feat(frontend): 支持集群标签功能 #10056 (#10421)

Author: jinquantianxia

dbm-ui/frontend/src/locales/en.json

@@ -1871,5 +1871,6 @@
   "编辑集群别名": "",
   "执行常用管理命令": "",
   "多个标签值以空格、逗号、分号、竖线分割": "",
+  "标签值不能重复": "",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/locales/zh-cn.json

@@ -4509,5 +4509,6 @@
   "n项已修改": "{0} 项已修改",
   "清空表格已有数据": "清空表格已有数据",
   "多个标签值以空格、逗号、分号、竖线分割": "多个标签值以空格、逗号、分号、竖线分割",
+  "标签值不能重复": "标签值不能重复",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/views/db-manage/common/cluster-batch-add-tag/components/tag-operation/components/key-value-mode/Index.vue

@@ -91,10 +91,6 @@
   };
 
   const handleDelete = (index: number) => {
-    if (pairList.value.length === 1) {
-      return;
-    }
-
     pairList.value.splice(index, 1);
     nextTick(() => {
       handleSelectKey();

dbm-ui/frontend/src/views/db-manage/common/cluster-table-column/ClusterTagColumn.vue

@@ -6,6 +6,7 @@
     <template #default="{ data }: { data: IRowData }">
       <ClusterTagCell
         :data="data"
+        mode="vertical"
         @success="handleOperateSuccess" />
     </template>
   </BkTableColumn>

dbm-ui/frontend/src/views/db-manage/common/cluster-table-column/components/cluster-tag-cell/Index.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="cluster-tag-list-box">
-    <div class="list-display-main">
+    <div
+      v-if="isVertical"
+      class="list-display-main">
       <TextOverflowLayout
         v-for="(item, index) in renderList"
         :key="index">
@@ -16,6 +18,13 @@
         </BkButton>
       </template>
     </div>
+    <div
+      v-else
+      class="list-display-main">
+      <TextOverflowLayout>
+        {{ renderList.map((item) => `${item.key} : ${item.value.join(' , ')}`).join(' , ') }}
+      </TextOverflowLayout>
+    </div>
     <AuthButton
       :action-id="actionId"
       class="edit-main"
@@ -45,11 +54,14 @@
 
   interface Props {
     data: { permission: Record<string, boolean> } & ClusterCommonInfo;
+    mode?: 'horizontal' | 'vertical';
   }
 
   type Emits = (e: 'success') => void;
 
-  const props = defineProps<Props>();
+  const props = withDefaults(defineProps<Props>(), {
+    mode: 'horizontal',
+  });
   const emits = defineEmits<Emits>();
 
   const { t } = useI18n();
@@ -58,6 +70,8 @@
 
   const isShowAddTag = ref(false);
 
+  const isVertical = computed(() => props.mode === 'vertical');
+
   const totalList = computed(() =>
     props.data.sortedTags.map((item) => ({
       key: item.key,

dbm-ui/frontend/src/views/tag-manage/cluster/Index.vue

@@ -77,10 +77,9 @@
               <template #content>
                 <div class="append-tag-main">
                   <div class="title-main">{{ t('标签值') }}</div>
-                  <BkInput
-                    v-model="appendTagValue"
-                    class="mt-6"
-                    :placeholder="t('请输入标签值（多个标签值以逗号、分号、竖线分割，回车完成输入）')" />
+                  <TagValueInput
+                    v-model="appendTagValues"
+                    class="mt-6" />
                 </div>
               </template>
               <BkButton
@@ -245,10 +244,13 @@
 
   import { batchCreateTags, deleteTag, listClusterTag, updateTag } from '@services/source/tag';
 
+  import { tagValueRegex } from '@common/regex';
+
   import RenderTagOverflow from '@components/render-tag-overflow/Index.vue';
 
-  import { execCopy, getSearchSelectorParams, messageSuccess } from '@utils';
+  import { execCopy, getSearchSelectorParams, messageError, messageSuccess } from '@utils';
 
+  import TagValueInput from './components/add-tag/components/key-value-mode/components/key-value-pair/components/TagValueInput.vue';
   import CreateTag from './components/add-tag/Index.vue';
   import EditableCell from './components/EditableCell.vue';
 
@@ -261,7 +263,7 @@
   const isCreateTagDialogShow = ref(false);
   const searchValue = ref([]);
   const selectedMap = ref<Record<string, boolean>>({});
-  const appendTagValue = ref('');
+  const appendTagValues = ref<string[]>([]);
   const toggleInfoMap = ref<Record<string, boolean>>({});
   const existedKeyList = ref<Set<string>>(new Set());
   const appendTagVisableMap = ref<Record<number, boolean>>({});
@@ -385,22 +387,28 @@
   };
 
   const handleConfirmAppendTagValue = () => {
-    if (appendTagValue.value) {
-      const tagList = appendTagValue.value.split(/[\s,，;；|｜]/).filter((item) => !!item);
-      runBatchCreate({
-        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-        tags: tagList.map((value) => ({
-          key: currentKey,
-          value,
-        })),
-        type: 'cluster',
-      });
-      appendTagValue.value = '';
+    if (!appendTagValues.value.length) {
+      return;
+    }
+
+    if (appendTagValues.value.some((item) => !tagValueRegex.test(item))) {
+      messageError(t('标签值为1-100个字符，支持英文字母、数字或汉字，中划线(-)，下划线(_)，点(.)'));
+      return;
     }
+
+    runBatchCreate({
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+      tags: appendTagValues.value.map((value) => ({
+        key: currentKey,
+        value,
+      })),
+      type: 'cluster',
+    });
+    appendTagValues.value = [];
   };
 
   const handlecancelAppendTagValue = () => {
-    appendTagValue.value = '';
+    appendTagValues.value = [];
     appendTagVisableMap.value = {};
   };
 

dbm-ui/frontend/src/views/tag-manage/cluster/components/add-tag/components/TextMode.vue

@@ -87,7 +87,7 @@
         return null;
       }
       const [key, value] = pairStr.split(validPairRegex);
-      const valueList = value.trim().split(/[\s,，;；|｜]/);
+      const valueList = value.trim().split(/[,，;；|｜]/);
       if (!key) {
         verifyTip.value = t('键必填');
         return null;

dbm-ui/frontend/src/views/tag-manage/cluster/components/add-tag/components/key-value-mode/Index.vue

@@ -15,7 +15,7 @@
 
   import type { TagsPairType } from '../../Index.vue';
 
-  import KeyValuePair from './components/KeyValuePair.vue';
+  import KeyValuePair from './components/key-value-pair/Index.vue';
 
   interface Props {
     data?: TagsPairType;

dbm-ui/frontend/src/views/tag-manage/cluster/components/add-tag/components/key-value-mode/components/KeyValuePair.vue renamed to dbm-ui/frontend/src/views/tag-manage/cluster/components/add-tag/components/key-value-mode/components/key-value-pair/Index.vue

@@ -12,24 +12,10 @@
         class="error-icon"
         type="exclamation-fill" />
     </div>
-    <div class="value-input-wraper">
-      <BkTagInput
-        allow-auto-match
-        allow-create
-        class="value-input"
-        :class="{ 'is-not-valid': !isValueVerifyPass }"
-        collapse-tags
-        has-delete-icon
-        :model-value="pairInfo.value"
-        :placeholder="t('请输入标签值（多个标签值以逗号、分号、竖线分割，回车完成输入）')"
-        @change="checkInputValue" />
-      <DbIcon
-        v-if="!isValueVerifyPass"
-        v-bk-tooltips="valueVerifyTip"
-        class="error-icon"
-        style="right: 18px"
-        type="exclamation-fill" />
-    </div>
+    <TagValueInput
+      ref="valueInputRef"
+      v-model="pairInfo.value"
+      class="value-input-wraper" />
     <div class="operation-main">
       <DbIcon
         type="plus-fill"
@@ -42,10 +28,11 @@
   </div>
 </template>
 <script setup lang="ts">
-  import _ from 'lodash';
   import { useI18n } from 'vue-i18n';
 
-  import { tagKeyRegex, tagValueRegex } from '@common/regex';
+  import { tagKeyRegex } from '@common/regex';
+
+  import TagValueInput from './components/TagValueInput.vue';
 
   interface Props {
     data: typeof pairInfo.value;
@@ -66,14 +53,13 @@
 
   const { t } = useI18n();
 
+  const valueInputRef = ref<InstanceType<typeof TagValueInput>>();
   const pairInfo = ref({
     key: '',
     value: [] as string[],
   });
   const isKeyVerifyPass = ref(true);
-  const isValueVerifyPass = ref(true);
   const keyVerifyTip = ref(t('必填'));
-  const valueVerifyTip = ref(t('必填'));
 
   watch(
     () => props.data,
@@ -82,7 +68,6 @@
         pairInfo.value.key = props.data.key;
         pairInfo.value.value = props.data.value;
         keyVerifyTip.value = '';
-        valueVerifyTip.value = '';
       }
     },
     { immediate: true },
@@ -92,10 +77,6 @@
     isKeyVerifyPass.value = !keyVerifyTip.value;
   });
 
-  watch(valueVerifyTip, () => {
-    isValueVerifyPass.value = !valueVerifyTip.value;
-  });
-
   const checkInputKey = (key: string) => {
     if (!key) {
       keyVerifyTip.value = t('必填');
@@ -115,22 +96,6 @@
     keyVerifyTip.value = '';
   };
 
-  const checkInputValue = (value: string[]) => {
-    const inputList = _.flatMap(value.map((item) => item.split(/[\s,，;；|｜]/)));
-    pairInfo.value.value = inputList;
-    if (!value.length) {
-      valueVerifyTip.value = t('必填');
-      return;
-    }
-
-    if (inputList.some((item) => !tagValueRegex.test(item))) {
-      valueVerifyTip.value = t('标签值为1-100个字符，支持英文字母、数字或汉字，中划线(-)，下划线(_)，点(.)');
-      return;
-    }
-
-    valueVerifyTip.value = '';
-  };
-
   const handleAdd = () => {
     emits('add');
   };
@@ -142,8 +107,7 @@
   defineExpose<Exposes>({
     getValue() {
       isKeyVerifyPass.value = !!pairInfo.value.key && !keyVerifyTip.value;
-      isValueVerifyPass.value = !!pairInfo.value.value.length && !valueVerifyTip.value;
-      if (!isKeyVerifyPass.value || !isValueVerifyPass.value) {
+      if (!isKeyVerifyPass.value || !valueInputRef.value!.getValue()) {
         return null;
       }
 
@@ -167,9 +131,7 @@
     }
 
     .value-input-wraper {
-      position: relative;
-
-      .value-input {
+      :deep(.value-input) {
         width: 340px;
         margin-right: 8px;
         margin-left: 14px;
@@ -195,14 +157,6 @@
       :deep(.bk-input--text) {
         background-color: #fff0f1;
       }
-
-      :deep(.bk-tag-input-trigger) {
-        background-color: #fff0f1;
-
-        .clear-icon {
-          display: none !important;
-        }
-      }
     }
   }
 </style>