perf: 修复标签搜索

src/assets/img/chatbot.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="transparent" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot "><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg>

src/components/Table/ListTable/TableAction/LabelSearch.vue

@@ -3,13 +3,16 @@
     <el-button
       v-if="showLabelButton"
       class="label-button"
+      plain
       size="small"
       @click="showSearchSelect"
     >
-      <i class="fa fa-tag" />
+      <svg-icon icon-class="tag" />
+      <span>{{ $t('common.Label') }}</span>
     </el-button>
     <el-cascader
       v-show="showLabelSearch"
+      ref="labelCascader"
       v-model="labelValue"
       :options="labelOptions"
       :placeholder="placeholder"
@@ -45,8 +48,6 @@ export default {
       this.$emit('labelSearch', newValue)
     }
   },
-  mounted() {
-  },
   methods: {
     getLabelOptions() {
       if (this.labelOptions.length > 0) {
@@ -57,17 +58,15 @@ export default {
         const groupedLabelOptions = _.groupBy(data, 'name')
         const labelOptions = []
         for (const [key, labels] of Object.entries(groupedLabelOptions)) {
-          let children = _.sortBy(labels, 'value')
-          children = [{ id: '*', value: this.$t('common.All') }, ...children]
+          const all = { value: '*', label: this.$t('common.All') }
+          const children = _.sortBy(labels, 'value').map(label => ({
+            value: label.value,
+            label: label.value
+          }))
           labelOptions.push({
             value: key,
             label: key,
-            children: children.map(label => {
-              return {
-                value: label.id,
-                label: label.value
-              }
-            })
+            children: [all, ...children]
           })
         }
         this.labelOptions = _.sortBy(labelOptions, 'label')
@@ -77,6 +76,9 @@ export default {
       this.getLabelOptions()
       this.showLabelSearch = true
       this.showLabelButton = false
+      setTimeout(() => {
+        this.$refs.labelCascader.toggleDropDownVisible(true)
+      }, 100)
     }
   }
 }
@@ -88,7 +90,7 @@ export default {
 }
 
 .label-button {
-  padding:  10px 15px;
+  padding: 10px 13px 10px 12px;
 }
 
 .label-select {

src/i18n/langs/en.json

@@ -942,7 +942,8 @@
     "ImageName": "Image name",
     "ID": "ID",
     "Ports": "Ports",
-    "EnterMessage": "Please enter a question, press Enter to send"
+    "EnterMessage": "Please enter a question, press Enter to send",
+    "Label": "Label"
   },
   "dashboard": {
     "ActiveAsset": "Asset active",

src/i18n/langs/ja.json

@@ -941,7 +941,8 @@
     "ImageName": "イメージ名",
     "ID": "ID",
     "Ports": "ポート",
-    "EnterMessage": "質問を入力してください、Enter キーを押して送信"
+    "EnterMessage": "質問を入力してください、Enter キーを押して送信",
+    "Label": "ラベル"
   },
   "dashboard": {
     "TotalJobLog": "ジョブ実行総数",

src/i18n/langs/zh.json

@@ -130,7 +130,7 @@
     "SelectValueOrCreateNew": "选择标签值或创建新的",
     "BindLabel": "关联标签",
     "LabelList": "标签列表",
-    "SelectLabelFilter": "选择标签进行过滤",
+    "SelectLabelFilter": "选择标签搜索",
     "BindResource": "关联资源",
     "ResourceType": "资源类型",
     "Resources": "资源",
@@ -490,6 +490,7 @@
     "ReLoginErr": "登录时长已超过 5 分钟，请重新登录"
   },
   "common": {
+    "Tag": "标签",
     "Selection": "可选择",
     "Selected": "已选择",
     "PagePrev": "上一页",
@@ -803,7 +804,7 @@
       "ConceptTitle": "\uD83E\uDD14 Python 解释器 ",
       "ConceptContent": "我想让你像一个 Python 解释器一样行事。我将给你 Python 代码，你将执行它。不要提供任何解释。除了代码的输出，不要用任何东西来回应。",
       "IdeaTitle": "\uD83C\uDF31 Linux 终端",
-      "IdeaContent": "我想让你充当一个 Linux 终端。我将输入命令，你将回答终端应该显示的内容。我希望你只在一个独特的代码块内回复终端输出，而不是其他。不要写解释。当我需要用英语告诉你一些事情时，我会把文字放在大括号里{备注文本}。"
+      "IdeaContent": "我想让你充当一个 Linux 终端。我将输入命令，你将回答终端应该显示的内容。我希望你只在一个独特的代码块内回复终端输出，而不是其他。不要写解释。当我需要告诉你一些事情时，我会把文字放在大括号里{备注文本}。"
     },
     "imExport": {
       "ExportAll": "导出所有",

src/icons/svg/tag.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="37" height="37" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M42.1691 29.2451L29.2631 42.1511C28.5879 42.8271 27.6716 43.2069 26.7161 43.2069C25.7606 43.2069 24.8444 42.8271 24.1691 42.1511L8 26V8H26L42.1691 24.1691C43.5649 25.5732 43.5649 27.841 42.1691 29.2451Z" fill="none" stroke="#4a4a4a" stroke-width="4" stroke-linejoin="miter"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.5 21C19.8807 21 21 19.8807 21 18.5C21 17.1193 19.8807 16 18.5 16C17.1193 16 16 17.1193 16 18.5C16 19.8807 17.1193 21 18.5 21Z" fill="#4a4a4a"/></svg>

src/views/labels/BindDialog.vue

@@ -6,6 +6,7 @@
     top="80px"
     v-bind="$attrs"
     width="768px"
+    @cancel="handleCancel"
     @confirm="handleConfirm"
     v-on="$listeners"
   >
@@ -110,6 +111,9 @@ export default {
       })
       this.$refs.pageTransfer.getData(1)
     },
+    handleCancel() {
+      this.$emit('update:visible', false)
+    },
     handleConfirm() {
       const selectedData = this.$refs.pageTransfer.getSelectedData()
       const data = {
@@ -117,15 +121,7 @@ export default {
       }
       const url = `/api/v1/labels/labels/${this.label.id}/resource-types/${this.select2.value}/resources/`
       this.$axios.put(url, data).then(res => {
-        this.pagingTransfer.selectedData = []
-        this.pagingTransfer.dataList = []
-        this.select2.value = ''
         this.$message.success('绑定成功')
-        this.transferLoading = true
-        setTimeout(() => {
-          this.transferLoading = false
-        }, 100)
-        this.$emit('update:visible', false)
       })
     },
     async getResourceTypes() {

src/views/labels/LabelList.vue

@@ -1,8 +1,13 @@
 <template>
   <div>
     <GenericListPage :header-actions="headerActions" :table-config="tableConfig" />
-    <BindDialog :label="label" :visible.sync="bindVisible" />
-    <LabelResourcesDialog v-if="resDialogVisible" :label="label" :visible.sync="resDialogVisible" @addResource="handleAddResource" />
+    <BindDialog v-if="bindVisible" :label="label" :visible.sync="bindVisible" />
+    <LabelResourcesDialog
+      v-if="resDialogVisible"
+      :label="label"
+      :visible.sync="resDialogVisible"
+      @addResource="handleAddResource"
+    />
   </div>
 </template>