From e2e4e334e6e70dbfb10cda6dfc3e49df8e744b15 Mon Sep 17 00:00:00 2001
From: Austin <1344583166@qq.com>
Date: Tue, 24 Sep 2024 10:12:46 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E5=B9=B4=E5=BA=A6=E5=A4=A7?=
 =?UTF-8?q?=E7=89=88=E6=9C=AC=E6=B5=8B=E8=AF=95v1.5.0=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D=20#6958=20#=20Reviewed,=20?=
 =?UTF-8?q?transaction=20id:=2019177?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cluster-common/RenderBaseInfo.vue         | 68 ++++++++++---------
 .../cluster-common/SpecDetailForPopover.vue   | 60 ++++++++--------
 .../src/components/locale-switch/Index.vue    | 18 ++---
 .../columns/role-host-select/Index.vue        | 13 ++--
 dbm-ui/frontend/src/locales/en.json           |  5 +-
 dbm-ui/frontend/src/locales/zh-cn.json        |  6 +-
 .../detail/components/node-list/Index.vue     |  1 +
 .../list/components/list/Index.vue            |  1 +
 .../detail/components/node-list/Index.vue     | 33 +++++++--
 .../node-list/components/InstanceDetail.vue   |  2 +-
 .../hdfs/list/components/list/Index.vue       |  1 +
 .../kafka/list/components/list/Index.vue      |  1 +
 .../mysql/openarea/template/Index.vue         |  6 +-
 .../pulsar/list/components/list/Index.vue     |  1 +
 .../pages/page1/components/Index.vue          |  8 +--
 .../components/RenderTargetClusterType.vue    |  2 +-
 .../tendb-cluster/openarea-template/Index.vue |  6 +-
 .../spec/components/SpecList.vue              |  2 +-
 18 files changed, 131 insertions(+), 103 deletions(-)

diff --git a/dbm-ui/frontend/src/components/cluster-common/RenderBaseInfo.vue b/dbm-ui/frontend/src/components/cluster-common/RenderBaseInfo.vue
index 837a85c86e..e4c58b5799 100644
--- a/dbm-ui/frontend/src/components/cluster-common/RenderBaseInfo.vue
+++ b/dbm-ui/frontend/src/components/cluster-common/RenderBaseInfo.vue
@@ -14,39 +14,41 @@
 <template>
   <div class="render-cluster-base-info">
     <table>
-      <tr>
-        <td>ID：</td>
-        <td>{{ data.id }}</td>
-        <td>{{ $t('状态') }}：</td>
-        <td>
-          <RenderClusterStatus
-            v-if="data.status"
-            :data="data.status" />
-        </td>
-      </tr>
-      <tr>
-        <td>{{ $t('集群名称') }}：</td>
-        <td>
-          {{ data.cluster_name }}
-          <span
-            v-if="data.cluster_alias"
-            style="color: #63656e">
-            ({{ data.cluster_alias }})
-          </span>
-        </td>
-        <td>{{ $t('域名') }}：</td>
-        <td>{{ data.domain }}</td>
-      </tr>
-      <tr>
-        <td>{{ $t('所属业务') }}：</td>
-        <td>{{ displayBizName }}</td>
-        <td>{{ $t('数据版本') }}：</td>
-        <td>{{ data.major_version }}</td>
-      </tr>
-      <tr>
-        <td>{{ $t('创建时间') }}：</td>
-        <td>{{ data.create_at }}</td>
-      </tr>
+      <tbody>
+        <tr>
+          <td>ID：</td>
+          <td>{{ data.id }}</td>
+          <td>{{ $t('状态') }}：</td>
+          <td>
+            <RenderClusterStatus
+              v-if="data.status"
+              :data="data.status" />
+          </td>
+        </tr>
+        <tr>
+          <td>{{ $t('集群名称') }}：</td>
+          <td>
+            {{ data.cluster_name }}
+            <span
+              v-if="data.cluster_alias"
+              style="color: #63656e">
+              ({{ data.cluster_alias }})
+            </span>
+          </td>
+          <td>{{ $t('域名') }}：</td>
+          <td>{{ data.domain }}</td>
+        </tr>
+        <tr>
+          <td>{{ $t('所属业务') }}：</td>
+          <td>{{ displayBizName }}</td>
+          <td>{{ $t('数据版本') }}：</td>
+          <td>{{ data.major_version }}</td>
+        </tr>
+        <tr>
+          <td>{{ $t('创建时间') }}：</td>
+          <td>{{ data.create_at }}</td>
+        </tr>
+      </tbody>
     </table>
   </div>
 </template>
diff --git a/dbm-ui/frontend/src/components/cluster-common/SpecDetailForPopover.vue b/dbm-ui/frontend/src/components/cluster-common/SpecDetailForPopover.vue
index acd25c6d3e..ed764e9786 100644
--- a/dbm-ui/frontend/src/components/cluster-common/SpecDetailForPopover.vue
+++ b/dbm-ui/frontend/src/components/cluster-common/SpecDetailForPopover.vue
@@ -4,35 +4,37 @@
       {{ data.spec_name }}
     </div>
     <table class="info-box">
-      <tr>
-        <td>CPU:</td>
-        <td>
-          <span>{{ data.cpu.min }} ~ {{ data.cpu.max }} {{ t('核') }}</span>
-        </td>
-      </tr>
-      <tr>
-        <td>{{ t('内存') }}:</td>
-        <td>
-          <span>{{ data.mem.min }} ~ {{ data.mem.max }} G</span>
-        </td>
-      </tr>
-      <tr>
-        <td>{{ t('磁盘') }}:</td>
-        <td>
-          <BkTable
-            :border="['outer']"
-            :columns="tableColumns"
-            :data="data.storage_spec"
-            :max-height="200"
-            style="width: 420px" />
-        </td>
-      </tr>
-      <tr>
-        <td>{{ t('每台主机实例数量') }}:</td>
-        <td>
-          <span>{{ data.instance_num }}</span>
-        </td>
-      </tr>
+      <tbody>
+        <tr>
+          <td>CPU:</td>
+          <td>
+            <span>{{ data.cpu.min }} ~ {{ data.cpu.max }} {{ t('核') }}</span>
+          </td>
+        </tr>
+        <tr>
+          <td>{{ t('内存') }}:</td>
+          <td>
+            <span>{{ data.mem.min }} ~ {{ data.mem.max }} G</span>
+          </td>
+        </tr>
+        <tr>
+          <td>{{ t('磁盘') }}:</td>
+          <td>
+            <BkTable
+              :border="['outer']"
+              :columns="tableColumns"
+              :data="data.storage_spec"
+              :max-height="200"
+              style="width: 420px" />
+          </td>
+        </tr>
+        <tr>
+          <td>{{ t('每台主机实例数量') }}:</td>
+          <td>
+            <span>{{ data.instance_num }}</span>
+          </td>
+        </tr>
+      </tbody>
     </table>
   </div>
 </template>
diff --git a/dbm-ui/frontend/src/components/locale-switch/Index.vue b/dbm-ui/frontend/src/components/locale-switch/Index.vue
index 058f8d4715..3f2a45137f 100644
--- a/dbm-ui/frontend/src/components/locale-switch/Index.vue
+++ b/dbm-ui/frontend/src/components/locale-switch/Index.vue
@@ -24,6 +24,15 @@
     </div>
     <template #content>
       <div class="local-switch-menu">
+        <div
+          class="item"
+          :class="{ active: $i18n.locale === 'zh-cn' }"
+          @click="handleSwitchLocale('zh-cn')">
+          <DbIcon
+            class="mr-4"
+            type="cn" />
+          中文
+        </div>
         <div
           class="item"
           :class="{
@@ -35,15 +44,6 @@
             type="en" />
           English
         </div>
-        <div
-          class="item"
-          :class="{ active: $i18n.locale === 'zh-cn' }"
-          @click="handleSwitchLocale('zh-cn')">
-          <DbIcon
-            class="mr-4"
-            type="cn" />
-          中文
-        </div>
       </div>
     </template>
   </BkPopover>
diff --git a/dbm-ui/frontend/src/components/render-table/columns/role-host-select/Index.vue b/dbm-ui/frontend/src/components/render-table/columns/role-host-select/Index.vue
index 20f0e556ff..7a31dd1f2b 100644
--- a/dbm-ui/frontend/src/components/render-table/columns/role-host-select/Index.vue
+++ b/dbm-ui/frontend/src/components/render-table/columns/role-host-select/Index.vue
@@ -38,8 +38,7 @@
       :list="selectList"
       :placeholder="t('请选择')"
       :rules="rules"
-      @change="(value) => handleChange(value as string)"
-      @option-click="(value) => handleOptionClick(value as string)">
+      @change="(value) => handleChange(value as string)">
       <template #default="{ optionItem }">
         <div class="role-host-select-option">
           <div>{{ optionItem.label }}</div>
@@ -167,11 +166,11 @@
     emits('type-change', value);
   };
 
-  const handleOptionClick = (value: string) => {
-    if (value === localValue.value) {
-      isShowInstanceSelecotr.value = true;
-    }
-  };
+  // const handleOptionClick = (value: string) => {
+  //   if (value === localValue.value) {
+  //     isShowInstanceSelecotr.value = true;
+  //   }
+  // };
 
   const handleInstancesChange = (selectedValues: InstanceSelectorValues<IValue>) => {
     selected.value = selectedValues;
diff --git a/dbm-ui/frontend/src/locales/en.json b/dbm-ui/frontend/src/locales/en.json
index 92a0980f37..1d56985a0f 100644
--- a/dbm-ui/frontend/src/locales/en.json
+++ b/dbm-ui/frontend/src/locales/en.json
@@ -352,7 +352,6 @@
   "新Proxy主机": "New Proxy host",
   "新主库IP": "New Master IP",
   "新从库IP": "New Slave IP",
-  "新从库主机": "New Slave host",
   "新实例": "New instance",
   "新客户端IP": "New client IP",
   "新节点IP": "New node IP",
@@ -1005,7 +1004,7 @@
   "清空": "Cleanup",
   "角色": "Role",
   "解析并添加": "Parse and add",
-  "请输入IP_Port_如_1_1_1_1_10000_多个可使用换行_空格或_分隔": "Please enter IP:Port, such as (127.0.0.1:10000)\nMultiples can be separated by newlines, spaces or ;, |",
+  "请输入IP_Port_如_1_1_1_1_10000_多个可使用换行_空格或_分隔": "Please enter IP:Port, such as (127.0.0.1:10000)\nMultiples can be separated by newlines, spaces or ；，｜",
   "请输入实例": "Please enter an instance",
   "请选择实例": "Please select an instance",
   "Agent异常无法使用": "Agent is abnormally",
@@ -1596,6 +1595,6 @@
   "规格名称不能为空": "Specification name cannot be empty",
   "主机资源不足_等待管理员users补货_补货完成后可以前往place重试": "Host resources are insufficient. Wait for the administrator ({users}) to replenish the inventory. After the replenishment is complete, you can go to \"{place}\" and try again",
   "可用主机数": "Number of available hosts",
-
+  "版本日志": "Release Notes",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index 0928aa67d5..f3df2c373e 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3430,6 +3430,10 @@
     "我的申请": "我的申请",
     "我负责的业务": "我负责的业务",
     "统一设置": "统一设置",
-    "统一设置：将该列统一设置为相同的值": "统一设置：将该列统一设置为相同的值",
+    "仅DataNode类型的节点支持替换": "仅DataNode类型的节点支持替换",
+    "库表输入说明": "库表输入说明",
+    "不允许输入系统库和特殊库，如mysql、sys 等": "不允许输入系统库和特殊库，如mysql、sys 等",
+    "支持 %（指代任意长度字符串）, ?（指代单个字符串）, *（指代全部）三个通配符": "支持 %（指代任意长度字符串）, ?（指代单个字符串）, *（指代全部）三个通配符",
+    "包含通配符时, 每一单元格只允许输入单个对象。% ? 不能独立使用， * 只能单独使用": "包含通配符时, 每一单元格只允许输入单个对象。% ? 不能独立使用， * 只能单独使用",
     "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/views/db-manage/elastic-search/list/components/detail/components/node-list/Index.vue b/dbm-ui/frontend/src/views/db-manage/elastic-search/list/components/detail/components/node-list/Index.vue
index 80dc504e18..9b3949a44c 100644
--- a/dbm-ui/frontend/src/views/db-manage/elastic-search/list/components/detail/components/node-list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/elastic-search/list/components/detail/components/node-list/Index.vue
@@ -446,6 +446,7 @@
       label: t('部署时间'),
       field: 'create_at',
       sort: true,
+      width: 250,
       render: ({ data }: {data: EsNodeModel}) => <span>{data.createAtDisplay}</span>,
     },
     {
diff --git a/dbm-ui/frontend/src/views/db-manage/elastic-search/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/elastic-search/list/components/list/Index.vue
index e39758e125..9fbceac420 100644
--- a/dbm-ui/frontend/src/views/db-manage/elastic-search/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/elastic-search/list/components/list/Index.vue
@@ -796,6 +796,7 @@
       'es_datanode_hot',
       'es_datanode_cold',
     ],
+    showLineHeight: false,
     trigger: 'manual' as const,
   };
 
diff --git a/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/detail/components/node-list/Index.vue b/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/detail/components/node-list/Index.vue
index 700448715c..74ae1286fd 100644
--- a/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/detail/components/node-list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/detail/components/node-list/Index.vue
@@ -239,6 +239,24 @@
     return options;
   };
 
+  const checkNodeReplaceDisable = (node: HdfsNodeModel) => {
+    const options = {
+      disabled: false,
+      tooltips: {
+        disabled: true,
+        content: '',
+      },
+    };
+
+    if (!node.isDataNode) {
+      options.disabled = true;
+      options.tooltips.disabled = false;
+      options.tooltips.content = t('节点类型不支持替换');
+    }
+
+    return options;
+  };
+
   const globalBizsStore = useGlobalBizs();
   const copy = useCopy();
   const { t, locale } = useI18n();
@@ -342,7 +360,7 @@
     if (_.find(selectList, item => !item.isDataNode)) {
       options.disabled = true;
       options.tooltips.disabled = false;
-      options.tooltips.content = t('仅DataNode类型的节点支持缩容');
+      options.tooltips.content = t('仅DataNode类型的节点支持替换');
       return options;
     }
     return options;
@@ -371,6 +389,7 @@
       label: t('节点IP'),
       field: 'ip',
       showOverflowTooltip: false,
+      width: 120,
       render: ({ data }: { data: HdfsNodeModel }) => (
       <div style="display: flex; align-items: center;">
         <div class="text-overflow" v-overflow-tips>
@@ -428,6 +447,7 @@
       label: t('部署时间'),
       field: 'create_at',
       sort: true,
+      width: 250,
       render: ({ data }: {data: HdfsNodeModel}) => <span>{data.createAtDisplay}</span>,
     },
     {
@@ -436,6 +456,7 @@
       fixed: 'right',
       render: ({ data }: { data: HdfsNodeModel }) => {
         const shrinkDisableTooltips = checkNodeShrinkDisable(data);
+        const replaceDisableTooltips = checkNodeReplaceDisable(data);
         return (
           <>
             <OperationBtnStatusTips
@@ -458,17 +479,17 @@
               v-db-console="hdfs.nodeList.replace"
               data={operationData.value}>
               <span v-bk-tooltips={{
-                  content: t('节点类型不支持替换'),
-                  disabled: data.isDataNode,
-                }}>
-                <auth-button
+                content: t('节点类型不支持替换'),
+                disabled: data.isDataNode,
+              }}>
+              <auth-button
                 text
                 theme="primary"
                 action-id="hdfs_replace"
                 permission={data.permission.hdfs_replace}
                 resource={data.bk_host_id}
                 class="ml8"
-                disabled={operationData.value?.operationDisabled}
+                disabled={replaceDisableTooltips.disabled || operationData.value?.operationDisabled}
                 onClick={() => handleReplaceOne(data)}
               >
                 {t('替换')}
diff --git a/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/detail/components/node-list/components/InstanceDetail.vue b/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/detail/components/node-list/components/InstanceDetail.vue
index cbdf468d11..717133a580 100644
--- a/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/detail/components/node-list/components/InstanceDetail.vue
+++ b/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/detail/components/node-list/components/InstanceDetail.vue
@@ -18,7 +18,7 @@
         :disabled="isBatchRestartDisabled || isRestartActionDisabled"
         :loading="isBatchRestartLoading"
         @click="handleBatchRestart">
-        {{ $t('批量重启') }}
+        {{ t('批量重启') }}
       </BkButton>
     </div>
     <BkLoading :loading="isLoading">
diff --git a/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/list/Index.vue
index ab17b72176..dd54df6076 100644
--- a/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/list/Index.vue
@@ -821,6 +821,7 @@
       'hdfs_journalnode',
       'hdfs_datanode',
     ],
+    showLineHeight: false,
     trigger: 'manual' as const,
   };
 
diff --git a/dbm-ui/frontend/src/views/db-manage/kafka/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/kafka/list/components/list/Index.vue
index c8d3f9f449..cecad6ae51 100644
--- a/dbm-ui/frontend/src/views/db-manage/kafka/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/kafka/list/components/list/Index.vue
@@ -733,6 +733,7 @@
       'zookeeper',
       'broker',
     ],
+    showLineHeight: false,
     trigger: 'manual' as const,
   };
 
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/openarea/template/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/openarea/template/Index.vue
index c78030fff2..4cd0ebe269 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/openarea/template/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/openarea/template/Index.vue
@@ -149,17 +149,15 @@
       nextTick(() => {
         tableRef.value.fetchData({
           config_name: searchKey.value,
+        }, {
           cluster_type: 'tendbha,tendbsingle',
         });
       })
-    },
-    {
-      immediate: true
     }
   );
 
   const fetchData = () => {
-    tableRef.value.fetchData({
+    tableRef.value.fetchData({}, {
       cluster_type: 'tendbha,tendbsingle',
     });
   };
diff --git a/dbm-ui/frontend/src/views/db-manage/pulsar/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/pulsar/list/components/list/Index.vue
index f07b7c17dc..0bef32bc71 100644
--- a/dbm-ui/frontend/src/views/db-manage/pulsar/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/pulsar/list/components/list/Index.vue
@@ -756,6 +756,7 @@
       'pulsar_zookeeper',
       'pulsar_broker',
     ],
+    showLineHeight: false,
     trigger: 'manual' as const,
   };
 
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/components/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/components/Index.vue
index 24be40cba5..15fa6e6e65 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/components/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/components/Index.vue
@@ -16,7 +16,7 @@
     <RenderTable>
       <template #default>
         <RenderTableHeadColumn
-          :min-width="100"
+          :min-width="200"
           :width="270">
           <span>{{ t('源集群') }}</span>
           <template #append>
@@ -56,7 +56,7 @@
           <span>{{ t('当前集群容量/QPS') }}</span>
         </RenderTableHeadColumn>
         <RenderTableHeadColumn
-          :min-width="120"
+          :min-width="180"
           :width="350">
           <BkPopover
             :content="t('将会部署新的集群以进行集群变更')"
@@ -66,8 +66,8 @@
           </BkPopover>
         </RenderTableHeadColumn>
         <RenderTableHeadColumn
-          :min-width="100"
-          :width="140">
+          :min-width="200"
+          :width="250">
           <span>{{ t('版本') }}</span>
           <template
             v-if="versionList.length"
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/components/RenderTargetClusterType.vue b/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/components/RenderTargetClusterType.vue
index c8e1f375aa..a2209d6afa 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/components/RenderTargetClusterType.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/components/RenderTargetClusterType.vue
@@ -74,7 +74,7 @@
     },
     {
       value: ClusterTypes.PREDIXY_REDIS_CLUSTER,
-      label: t('RedisCluster集群'),
+      label: 'RedisCluster',
     },
   ];
 
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/openarea-template/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/openarea-template/Index.vue
index d81e5ad3f0..7de9f1df79 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/openarea-template/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/openarea-template/Index.vue
@@ -149,17 +149,15 @@
       nextTick(() => {
         tableRef.value.fetchData({
           config_name: searchKey.value,
+        }, {
           cluster_type: 'tendbcluster',
         });
       })
-    },
-    {
-      immediate: true
     }
   );
 
   const fetchData = () => {
-    tableRef.value.fetchData({
+    tableRef.value.fetchData({}, {
       cluster_type: 'tendbcluster',
     });
   };
diff --git a/dbm-ui/frontend/src/views/resource-manage/spec/components/SpecList.vue b/dbm-ui/frontend/src/views/resource-manage/spec/components/SpecList.vue
index 77b0e40e1b..e0f92ff1dd 100644
--- a/dbm-ui/frontend/src/views/resource-manage/spec/components/SpecList.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/spec/components/SpecList.vue
@@ -416,7 +416,7 @@
   watch(() => [
     props.clusterType,
     props.machineType,
-    searchKey,
+    searchKey.value,
   ], () => {
     fetchData();
   });