feat(frontend): mysql、spider库表校验规则调整 #6595

# Reviewed, transaction id: 17602

dbm-ui/frontend/src/components/render-table/columns/db-table-name/Index.vue

@@ -22,11 +22,29 @@
     :single="single"
     @change="handleValueChange">
     <template #tip>
-      <p>{{ t('不允许输入系统库和特殊库，如mysql、sys 等') }}</p>
-      <p>{{ t('DB名、表名不允许为空，忽略DB名、忽略表名不允许为 *') }}</p>
-      <p>{{ t('支持 %（指代任意长度字符串）, ?（指代单个字符串）, *（指代全部）三个通配符') }}</p>
-      <p>{{ t('单元格可同时输入多个对象，使用换行，空格或；，｜分隔，按 Enter 或失焦完成内容输入') }}</p>
-      <p>{{ t('包含通配符时, 每一单元格只允许输入单个对象。% ? 不能独立使用， * 只能单独使用') }}</p>
+      <div class="db-table-tag-tip">
+        <p style="font-weight: 700;">{{ t('库表输入说明') }}：</p>
+        <p>
+          <div class="circle-dot"></div>
+          <span>{{ t('不允许输入系统库和特殊库，如mysql、sys 等') }}</span>
+        </p>
+        <p>
+          <div class="circle-dot"></div>
+          <span>{{ t('DB名、表名不允许为空，忽略DB名、忽略表名不允许为 *') }}</span>
+        </p>
+        <p>
+          <div class="circle-dot"></div>
+          <span>{{ t('支持 %（指代任意长度字符串）, ?（指代单个字符串）, *（指代全部）三个通配符') }}</span>
+        </p>
+        <p>
+          <div class="circle-dot"></div>
+          <span>{{ t('单元格可同时输入多个对象，使用换行，空格或；，｜分隔，按 Enter 或失焦完成内容输入') }}</span>
+        </p>
+        <p>
+          <div class="circle-dot"></div>
+          <span>{{ t('包含通配符时, 每一单元格只允许输入单个对象。% ? 不能独立使用， * 只能单独使用') }}</span>
+        </p>
+      </div>
     </template>
   </TagInput>
 </template>
@@ -78,3 +96,25 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .db-table-tag-tip {
+    display: flex;
+    flex-direction: column;
+    line-height: 24px;
+    padding: 3px 7px;
+
+    p {
+      display: flex;
+      align-items: center;
+
+      .circle-dot {
+        width: 4px;
+        height: 4px;
+        background-color: #63656E;
+        border-radius: 50%; 
+        display: inline-block;
+        margin-right: 6px;
+      }
+    }
+  }
+</style>