fix(frontend): sqlserver 体验问题 #6801

# Reviewed, transaction id: 18033
TencentBlueKing · Sep 10, 2024 · 1765277 · 1765277
1 parent ec6527e
commit 1765277
Show file tree

Hide file tree

Showing 14 changed files with 210 additions and 308 deletions.
diff --git a/dbm-ui/frontend/src/components/instance-selector/Index.vue b/dbm-ui/frontend/src/components/instance-selector/Index.vue
@@ -361,7 +361,7 @@
     [ClusterTypes.TENDBCLUSTER]: [
       {
         id: 'tendbcluster',
-        name: t('Tendb Cluster'),
+        name: 'Tendb Cluster',
         topoConfig: {
           getTopoList: getMysqlClusterList,
         },

diff --git a/dbm-ui/frontend/src/components/render-table/columns/db-table-name/Index.vue b/dbm-ui/frontend/src/components/render-table/columns/db-table-name/Index.vue
@@ -99,21 +99,21 @@
 <style lang="less" scoped>
   .db-table-tag-tip {
     display: flex;
-    flex-direction: column;
-    line-height: 24px;
     padding: 3px 7px;
+    line-height: 24px;
+    flex-direction: column;
 
     div {
       display: flex;
       align-items: center;
 
       .circle-dot {
+        display: inline-block;
         width: 4px;
         height: 4px;
+        margin-right: 6px;
         background-color: #63656e;
         border-radius: 50%;
-        display: inline-block;
-        margin-right: 6px;
       }
     }
   }

diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3408,5 +3408,12 @@
     "需确认": "需确认",
     "免确认": "免确认",
     "确定删除策略？": "确定删除策略？",
+    "不允许输入系统库和特殊库 n": "不允许输入系统库和特殊库 {n}",
+    "不允许输入系统库，如\"msdb\", \"model\", \"tempdb\", \"Monitor\"": "不允许输入系统库，如\"msdb\", \"model\", \"tempdb\", \"Monitor\"",
+    "不允许输入系统库，如\"master\", \"msdb\", \"model\", \"tempdb\", \"Monitor\"": "不允许输入系统库，如\"master\", \"msdb\", \"model\", \"tempdb\", \"Monitor\"",
+    "DB名、表名不允许为空，忽略DB名、忽略表名不允许为 *": "DB名、表名不允许为空，忽略DB名、忽略表名不允许为 *",
+    "支持 %（指代任意长度字符串）,*（指代全部）2个通配符": "支持 %（指代任意长度字符串）,*（指代全部）2个通配符",
+    "单元格可同时输入多个对象，使用换行，空格或；，｜分隔，按 Enter 或失焦完成内容输入": "单元格可同时输入多个对象，使用换行，空格或；，｜分隔，按 Enter 或失焦完成内容输入",
+    "包含通配符时, 每一单元格只允许输入单个对象。% 不能独立使用， * 只能单独使用": "包含通配符时, 每一单元格只允许输入单个对象。% 不能独立使用， * 只能单独使用",
     "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/.../views/db-manage/common/sql-execute/sqlserver-execute-objects/RenderData/RenderDbName.vue b/.../views/db-manage/common/sql-execute/sqlserver-execute-objects/RenderData/RenderDbName.vue
@@ -12,33 +12,27 @@
 -->
 
 <template>
-  <div ref="rootRef">
-    <span @click="handleShowTips">
-      <TableEditTag
-        ref="editTagRef"
-        :model-value="modelValue"
-        :placeholder="t('请输入DB名称_支持通配符_含通配符的仅支持单个')"
-        :rules="rules"
-        @change="handleChange" />
-    </span>
-    <div
-      ref="popRef"
-      style="font-size: 12px; line-height: 24px; color: #63656e">
-      <p>{{ t('匹配任意长度字符串_如a_不允许独立使用') }}</p>
-      <p>{{ t('匹配任意单一字符_如a_d') }}</p>
-      <p>{{ t('专门指代ALL语义_只能独立使用') }}</p>
-      <p>{{ t('注_含通配符的单元格仅支持输入单个对象') }}</p>
-      <p>{{ t('Enter完成内容输入') }}</p>
-    </div>
-  </div>
+  <TableEditTag
+    ref="editTagRef"
+    :model-value="modelValue"
+    :placeholder="t('请输入DB名称_支持通配符_含通配符的仅支持单个')"
+    :rules="rules"
+    @change="handleChange">
+    <template #tip>
+      <div>{{ t('不允许输入系统库，如"msdb", "model", "tempdb", "Monitor"') }}</div>
+      <div>{{ t('DB名、表名不允许为空，忽略DB名、忽略表名不允许为 *') }}</div>
+      <div>{{ t('支持 %（指代任意长度字符串）,*（指代全部）2个通配符') }}</div>
+      <div>{{ t('单元格可同时输入多个对象，使用换行，空格或；，｜分隔，按 Enter 或失焦完成内容输入') }}</div>
+      <div>{{ t('包含通配符时, 每一单元格只允许输入单个对象。% 不能独立使用， * 只能单独使用') }}</div>
+    </template>
+  </TableEditTag>
 </template>
 <script lang="ts">
   const tagMemo = {} as Record<string, string[]>;
 </script>
 <script setup lang="ts">
   import _ from 'lodash';
-  import tippy, { type Instance, type SingleTarget } from 'tippy.js';
-  import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+  import { onBeforeUnmount, ref, watch } from 'vue';
   import { useI18n } from 'vue-i18n';
 
   import TableEditTag from '@components/render-table/columns/tag-input/index.vue';
@@ -58,9 +52,6 @@
     default: () => [],
   });
 
-  const rootRef = ref();
-  const popRef = ref();
-
   const disabledTagMap = {
     monitor: true,
     model: true,
@@ -83,12 +74,22 @@
       validator: (value: string[]) => _.every(value, (item) => !disabledTagMap[item as keyof typeof disabledTagMap]),
       message: t(`DB名不能支持 n`, { n: Object.keys(disabledTagMap).join(',') }),
     },
+    {
+      validator: (value: string[]) => !_.some(value, (item) => /\*/.test(item) && item.length > 1),
+      message: t('* 只能独立使用'),
+    },
+    {
+      validator: (value: string[]) => _.every(value, (item) => !/^%$/.test(item)),
+      message: t('% 不允许单独使用'),
+    },
     {
       validator: (value: string[]) => {
-        const hasAllMatch = _.find(value, (item) => /%$/.test(item));
-        return !(value.length > 1 && hasAllMatch);
+        if (_.some(value, (item) => /[*%?]/.test(item))) {
+          return value.length < 2;
+        }
+        return true;
       },
-      message: t('一格仅支持单个_对象'),
+      message: t('含通配符的单元格仅支持输入单个对象'),
     },
     {
       validator: (value: string[]) => {
@@ -119,35 +120,7 @@
     tagMemo[instanceKey] = value;
   };
 
-  let tippyIns: Instance | undefined;
-
-  const handleShowTips = () => {
-    tippyIns?.show();
-  };
-
-  onMounted(() => {
-    tippyIns = tippy(rootRef.value as SingleTarget, {
-      content: popRef.value,
-      placement: 'top',
-      appendTo: () => document.body,
-      theme: 'light',
-      maxWidth: 'none',
-      trigger: 'manual',
-      interactive: true,
-      arrow: true,
-      offset: [0, 8],
-      zIndex: 999999,
-      hideOnClick: true,
-    });
-  });
-
   onBeforeUnmount(() => {
-    if (tippyIns) {
-      tippyIns.hide();
-      tippyIns.unmount();
-      tippyIns.destroy();
-      tippyIns = undefined;
-    }
     delete tagMemo[instanceKey];
   });
 

diff --git a/.../db-manage/common/sql-execute/sqlserver-execute-objects/RenderData/RenderIgnoreDbName.vue b/.../db-manage/common/sql-execute/sqlserver-execute-objects/RenderData/RenderIgnoreDbName.vue
@@ -73,16 +73,26 @@
 
   const rules = [
     {
-      validator: (value: string[]) => {
-        const hasAllMatch = _.find(value, (item) => /%$/.test(item));
-        return !(value.length > 1 && hasAllMatch);
-      },
-      message: t('一格仅支持单个_对象'),
+      validator: (value: string[]) => _.every(value, (item) => item !== '*'),
+      message: t('不允许为 *'),
     },
     {
       validator: (value: string[]) => _.every(value, (item) => !disabledTagMap[item as keyof typeof disabledTagMap]),
       message: t(`DB名不能支持 n`, { n: Object.keys(disabledTagMap).join(',') }),
     },
+    {
+      validator: (value: string[]) => _.every(value, (item) => !/^%$/.test(item)),
+      message: t('% 不允许单独使用'),
+    },
+    {
+      validator: (value: string[]) => {
+        if (_.some(value, (item) => /[*%?]/.test(item))) {
+          return value.length < 2;
+        }
+        return true;
+      },
+      message: t('含通配符的单元格仅支持输入单个对象'),
+    },
   ];
 
   const editTagRef = ref<InstanceType<typeof TableEditTag>>();