From c3fca96c98f2ef649eb6e21a9b7509c828880779 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 22 Oct 2025 11:19:37 +0800
Subject: [PATCH] perf: Optimize multiple selections

---
 .../items/MultiSelectConstructor.vue          |  1 +
 .../items/select/MultiSelect.vue              |  1 +
 .../resource-authorization-drawer/index.vue   |  1 +
 .../component/McpServersDialog.vue            |  2 +-
 ui/src/views/document/tag/CreateTagDialog.vue |  2 +-
 ui/src/views/document/tag/MulAddTagDialog.vue |  2 +-
 ui/src/views/document/upload/SetRules.vue     |  1 +
 .../group/component/CreateGroupUserDialog.vue | 97 +++++++++++--------
 .../ApplicationResourceIndex.vue              |  2 +-
 .../KnowledgeResourceIndex.vue                |  2 +-
 .../ToolResourceIndex.vue                     |  2 +-
 .../component/PermissionTable.vue             |  1 +
 .../role/component/MemberFormContent.vue      |  1 +
 13 files changed, 70 insertions(+), 45 deletions(-)

diff --git a/ui/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue b/ui/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue
index 77fd661b2..c4dafb033 100644
--- a/ui/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue
+++ b/ui/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue
@@ -130,6 +130,7 @@
       collapse-tags
       filterable
       clearable
+      :reserve-keyword="false"
       v-model="formValue.default_value"
       :teleported="false"
       popper-class="default-select"
diff --git a/ui/src/components/dynamics-form/items/select/MultiSelect.vue b/ui/src/components/dynamics-form/items/select/MultiSelect.vue
index 06d9a74d7..c27eec451 100644
--- a/ui/src/components/dynamics-form/items/select/MultiSelect.vue
+++ b/ui/src/components/dynamics-form/items/select/MultiSelect.vue
@@ -5,6 +5,7 @@
     filterable
     allow-create
     clearable
+    :reserve-keyword="false"
     v-bind="$attrs"
     v-model="_modelValue"
   >
diff --git a/ui/src/components/resource-authorization-drawer/index.vue b/ui/src/components/resource-authorization-drawer/index.vue
index d0a7e7190..0eb8e76e1 100644
--- a/ui/src/components/resource-authorization-drawer/index.vue
+++ b/ui/src/components/resource-authorization-drawer/index.vue
@@ -48,6 +48,7 @@
           filterable
           clearable
           multiple
+          :reserve-keyword="false"
           collapse-tags
           collapse-tags-tooltip
           style="width: 220px"
diff --git a/ui/src/views/application/component/McpServersDialog.vue b/ui/src/views/application/component/McpServersDialog.vue
index e16dc5961..43747c35b 100644
--- a/ui/src/views/application/component/McpServersDialog.vue
+++ b/ui/src/views/application/component/McpServersDialog.vue
@@ -38,7 +38,7 @@
           {{ `MCP ${$t('views.tool.title')}` }}
           <span class="color-danger">*</span>
         </template>
-        <el-select v-model="form.mcp_tool_ids" filterable multiple>
+        <el-select v-model="form.mcp_tool_ids" filterable multiple :reserve-keyword="false">
           <el-option
             v-for="mcpTool in mcpToolSelectOptions"
             :key="mcpTool.id"
diff --git a/ui/src/views/document/tag/CreateTagDialog.vue b/ui/src/views/document/tag/CreateTagDialog.vue
index 315d7c91d..11bf2ce8f 100644
--- a/ui/src/views/document/tag/CreateTagDialog.vue
+++ b/ui/src/views/document/tag/CreateTagDialog.vue
@@ -52,7 +52,7 @@
             </el-col>
             <el-col :span="1">
               <el-button
-                :disabled="index === 0"
+                :disabled="tags.length === 1"
                 link
                 type="info"
                 @click="deleteTag(index)"
diff --git a/ui/src/views/document/tag/MulAddTagDialog.vue b/ui/src/views/document/tag/MulAddTagDialog.vue
index 02cc62427..dd7abda34 100644
--- a/ui/src/views/document/tag/MulAddTagDialog.vue
+++ b/ui/src/views/document/tag/MulAddTagDialog.vue
@@ -82,7 +82,7 @@
             </el-col>
             <el-col :span="1">
               <el-button
-                :disabled="index === 0"
+                :disabled="tagList.length === 1"
                 text
                 @click="deleteTag(index)"
                 :style="{ marginTop: index === 0 ? '35px' : '5px' }"
diff --git a/ui/src/views/document/upload/SetRules.vue b/ui/src/views/document/upload/SetRules.vue
index 9ff640eee..f8cc61107 100644
--- a/ui/src/views/document/upload/SetRules.vue
+++ b/ui/src/views/document/upload/SetRules.vue
@@ -47,6 +47,7 @@
                           <el-select
                             v-model="form.patterns"
                             multiple
+                            :reserve-keyword="false"
                             allow-create
                             default-first-option
                             filterable
diff --git a/ui/src/views/system-chat-user/group/component/CreateGroupUserDialog.vue b/ui/src/views/system-chat-user/group/component/CreateGroupUserDialog.vue
index f05d95265..b8567090c 100644
--- a/ui/src/views/system-chat-user/group/component/CreateGroupUserDialog.vue
+++ b/ui/src/views/system-chat-user/group/component/CreateGroupUserDialog.vue
@@ -1,17 +1,34 @@
 <template>
-  <el-dialog :title="$t('views.role.member.add')" v-model="dialogVisible"
-             :close-on-click-modal="false"
-             :close-on-press-escape="false" :destroy-on-close="true">
-    <el-form label-position="top" ref="formRef" :rules="rules" :model="form"
-             require-asterisk-position="right">
+  <el-dialog
+    :title="$t('views.role.member.add')"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+  >
+    <el-form
+      label-position="top"
+      ref="formRef"
+      :rules="rules"
+      :model="form"
+      require-asterisk-position="right"
+    >
       <el-form-item :label="$t('views.chatUser.group.usernameOrName')" prop="user">
-        <el-select v-model="form.user" multiple filterable
-                   :placeholder="$t('common.selectPlaceholder')"
-                   :loading="optionLoading"
-                   :filter-method="filterUser"
+        <el-select
+          v-model="form.user"
+          multiple
+          filterable
+          :reserve-keyword="false"
+          :placeholder="$t('common.selectPlaceholder')"
+          :loading="optionLoading"
+          :filter-method="filterUser"
         >
-          <el-option v-for="item in chatUserList" :key="item.id" :label="item.nick_name"
-                     :value="item.id">
+          <el-option
+            v-for="item in chatUserList"
+            :key="item.id"
+            :label="item.nick_name"
+            :value="item.id"
+          >
           </el-option>
         </el-select>
       </el-form-item>
@@ -28,22 +45,22 @@
 </template>
 
 <script setup lang="ts">
-import {ref, reactive, onBeforeMount} from 'vue'
-import type {FormInstance} from 'element-plus'
-import {MsgSuccess} from '@/utils/message'
-import {t} from '@/locales'
+import { ref, reactive, onBeforeMount } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { MsgSuccess } from '@/utils/message'
+import { t } from '@/locales'
 import SystemGroupApi from '@/api/system/user-group'
 import userManageApi from '@/api/system/chat-user'
-import type {ChatUserItem} from '@/api/type/systemChatUser'
-import {loadPermissionApi} from "@/utils/dynamics-api/permission-api.ts";
+import type { ChatUserItem } from '@/api/type/systemChatUser'
+import { loadPermissionApi } from '@/utils/dynamics-api/permission-api.ts'
 
 const emit = defineEmits<{
-  (e: 'refresh'): void;
-}>();
+  (e: 'refresh'): void
+}>()
 
 const dialogVisible = ref<boolean>(false)
 const defaultForm = {
-  user: []
+  user: [],
 }
 const form = ref<{ user: string[] }>({
   ...defaultForm,
@@ -51,12 +68,12 @@ const form = ref<{ user: string[] }>({
 
 const optionLoading = ref(false)
 const chatUserList = ref<ChatUserItem[]>([])
-const originalChatUserList = ref<ChatUserItem[]>([]);
+const originalChatUserList = ref<ChatUserItem[]>([])
 async function getChatUserList() {
   try {
     const res = await loadPermissionApi('chatUser').getChatUserList(optionLoading)
-    originalChatUserList.value = res.data;
-    chatUserList.value = [...res.data];
+    originalChatUserList.value = res.data
+    chatUserList.value = [...res.data]
   } catch (e) {
     console.error(e)
   }
@@ -64,32 +81,32 @@ async function getChatUserList() {
 
 const filterUser = (query: string) => {
   if (!query) {
-    chatUserList.value = originalChatUserList.value;
-    return;
+    chatUserList.value = originalChatUserList.value
+    return
   }
 
-  const q = query.toLowerCase();
+  const q = query.toLowerCase()
   chatUserList.value = originalChatUserList.value.filter(
-    (item) => item.nick_name?.toLowerCase().includes(q) || item.username?.toLowerCase().includes(q)
-  );
-};
+    (item) => item.nick_name?.toLowerCase().includes(q) || item.username?.toLowerCase().includes(q),
+  )
+}
 
 onBeforeMount(() => {
   getChatUserList()
 })
 
-const groupId = ref('');
+const groupId = ref('')
 
 function open(id: string) {
-  form.value = {...defaultForm}
+  form.value = { ...defaultForm }
   groupId.value = id
   dialogVisible.value = true
 }
 
-const formRef = ref<FormInstance>();
+const formRef = ref<FormInstance>()
 
 const rules = reactive({
-  user: [{required: true, message: t('common.selectPlaceholder'), trigger: 'blur'}],
+  user: [{ required: true, message: t('common.selectPlaceholder'), trigger: 'blur' }],
 })
 
 const loading = ref<boolean>(false)
@@ -97,14 +114,16 @@ const submit = async (formEl: FormInstance | undefined) => {
   if (!formEl) return
   await formEl.validate((valid) => {
     if (valid) {
-      loadPermissionApi('userGroup').postAddMember(groupId.value, {"user_ids": form.value.user}, loading).then(() => {
-        MsgSuccess(t('common.addSuccess'))
-        emit('refresh')
-        dialogVisible.value = false
-      })
+      loadPermissionApi('userGroup')
+        .postAddMember(groupId.value, { user_ids: form.value.user }, loading)
+        .then(() => {
+          MsgSuccess(t('common.addSuccess'))
+          emit('refresh')
+          dialogVisible.value = false
+        })
     }
   })
 }
 
-defineExpose({open})
+defineExpose({ open })
 </script>
diff --git a/ui/src/views/system-resource-management/ApplicationResourceIndex.vue b/ui/src/views/system-resource-management/ApplicationResourceIndex.vue
index 891e1b2dd..aaed4dd2e 100644
--- a/ui/src/views/system-resource-management/ApplicationResourceIndex.vue
+++ b/ui/src/views/system-resource-management/ApplicationResourceIndex.vue
@@ -46,7 +46,7 @@
             filterable
             style="width: 220px"
           >
-            <el-option v-for="u in type_options" :value="u.value" :label="u.label"/>
+            <el-option v-for="u in type_options" :key="u.id" :value="u.value" :label="u.label"/>
           </el-select>
         </div>
       </div>
diff --git a/ui/src/views/system-resource-management/KnowledgeResourceIndex.vue b/ui/src/views/system-resource-management/KnowledgeResourceIndex.vue
index f42510401..1040e18a5 100644
--- a/ui/src/views/system-resource-management/KnowledgeResourceIndex.vue
+++ b/ui/src/views/system-resource-management/KnowledgeResourceIndex.vue
@@ -45,7 +45,7 @@
             filterable
             style="width: 220px"
           >
-            <el-option v-for="u in type_options" :value="u.value" :label="u.label" />
+            <el-option v-for="u in type_options" :key="u.id" :value="u.value" :label="u.label" />
           </el-select>
         </div>
       </div>
diff --git a/ui/src/views/system-resource-management/ToolResourceIndex.vue b/ui/src/views/system-resource-management/ToolResourceIndex.vue
index 794c14a66..2983d41d2 100644
--- a/ui/src/views/system-resource-management/ToolResourceIndex.vue
+++ b/ui/src/views/system-resource-management/ToolResourceIndex.vue
@@ -45,7 +45,7 @@
             filterable
             style="width: 220px"
           >
-            <el-option v-for="u in type_options" :value="u.value" :label="u.label"/>
+            <el-option v-for="u in type_options" :key="u.id"  :value="u.value" :label="u.label"/>
           </el-select>
         </div>
       </div>
diff --git a/ui/src/views/system/resource-authorization/component/PermissionTable.vue b/ui/src/views/system/resource-authorization/component/PermissionTable.vue
index 7ed66c7f3..7205fc9cb 100644
--- a/ui/src/views/system/resource-authorization/component/PermissionTable.vue
+++ b/ui/src/views/system/resource-authorization/component/PermissionTable.vue
@@ -39,6 +39,7 @@
             filterable
             clearable
             multiple
+            :reserve-keyword="false"
             collapse-tags
             collapse-tags-tooltip
             style="width: 220px"
diff --git a/ui/src/views/system/role/component/MemberFormContent.vue b/ui/src/views/system/role/component/MemberFormContent.vue
index c95edd631..dcf040259 100644
--- a/ui/src/views/system/role/component/MemberFormContent.vue
+++ b/ui/src/views/system/role/component/MemberFormContent.vue
@@ -22,6 +22,7 @@
             "
             filterable
             multiple
+            :reserve-keyword="false"
             style="width: 100%"
             collapse-tags
             collapse-tags-tooltip