refactor: 用户选择器重构

frontend/src/components/business/ms-user-group-comp/addUserModal.vue

@@ -2,7 +2,6 @@
   <a-modal
     v-model:visible="currentVisible"
     class="ms-modal-form ms-modal-medium"
-    width="680px"
     text-align="start"
     :ok-text="t('system.userGroup.add')"
     unmount-on-close
@@ -10,7 +9,7 @@
   >
     <template #title> {{ t('system.userGroup.addUser') }} </template>
     <div class="form">
-      <a-form ref="formRef" :model="form" size="large" :style="{ width: '600px' }" layout="vertical">
+      <a-form ref="formRef" class="rounded-[4px]" :model="form" layout="vertical">
         <a-form-item
           field="name"
           :label="t('system.userGroup.user')"

frontend/src/components/business/ms-user-selector/index.vue

@@ -5,6 +5,7 @@
     multiple
     :value-key="props.valueKey"
     :disabled="props.disabled"
+    :filter-option="false"
     allow-clear
     @change="change"
     @search="debouncedSearch"
@@ -12,7 +13,7 @@
     <template #label="{ data }">
       <span class="text-[var(--color-text-1)]"> {{ data.value.name }} </span>
     </template>
-    <a-option v-for="data in currentOptions" :key="data.id" :disabled="data.disabled" :value="data">
+    <a-option v-for="data in allOptions" :key="data.id" :disabled="data.disabled" :value="data">
       <span :class="data.disabled ? 'text-[var(--color-text-4)]' : 'text-[var(--color-text-1)]'">
         {{ data.name }}
       </span>
@@ -62,25 +63,18 @@
   }>();
   const { t } = useI18n();
 
+  const allOptions = ref<MsUserSelectorOption[]>([]);
   const currentOptions = ref<MsUserSelectorOption[]>([]);
   const currentLoadParams = ref<Record<string, any>>(props.loadOptionParams || {});
+  const loading = ref(false);
 
   const currentValue = computed(() => {
     return currentOptions.value.filter((item) => props.value.includes(item.id)) || [];
   });
 
-  const change = (
-    value: string | number | boolean | Record<string, any> | (string | number | boolean | Record<string, any>)[]
-  ) => {
-    const tmpArr = Array.isArray(value) ? value : [value];
-    const { valueKey } = props;
-    emit(
-      'update:value',
-      tmpArr.map((item) => item[valueKey])
-    );
-  };
   const loadList = async () => {
     try {
+      loading.value = true;
       const list = (await initOptionsFunc(props.type, currentLoadParams.value || {})) || [];
       const { firstLabelKey, secondLabelKey, disabledKey, valueKey } = props;
       list.forEach((item: MsUserSelectorOption) => {
@@ -97,23 +91,49 @@
           item.id = item[valueKey] as string;
         }
       });
-      currentOptions.value = [...list];
+      allOptions.value = [...list];
     } catch (error) {
       // eslint-disable-next-line no-console
       console.log(error);
-      currentOptions.value = [];
+      allOptions.value = [];
     }
   };
 
-  const search = async (value: string) => {
-    currentLoadParams.value = {
-      ...currentLoadParams.value,
-      keyword: value,
-    };
-    await loadList();
+  const debouncedSearch = async (value: string) => {
+    if (!value) {
+      currentLoadParams.value = {
+        ...currentLoadParams.value,
+        keyword: value,
+      };
+      await loadList();
+    } else {
+      const fn = debounce(
+        () => {
+          currentLoadParams.value = {
+            ...currentLoadParams.value,
+            keyword: value,
+          };
+          loadList();
+        },
+        300,
+        { maxWait: 1000 }
+      );
+      fn();
+    }
   };
 
-  const debouncedSearch = debounce(search, 300, { maxWait: 1000 });
+  const change = (
+    value: string | number | boolean | Record<string, any> | (string | number | boolean | Record<string, any>)[]
+  ) => {
+    const tmpArr = Array.isArray(value) ? value : [value];
+    currentOptions.value = tmpArr;
+    const { valueKey } = props;
+    emit(
+      'update:value',
+      tmpArr.map((item) => item[valueKey])
+    );
+    debouncedSearch('');
+  };
 
   onMounted(async () => {
     await loadList();

frontend/src/views/project-management/projectAndPermission/userGroup/projectUserGroup.vue

@@ -66,19 +66,18 @@
     v-model:visible="addUserGroupVisible"
     :ok-text="t('common.create')"
     title-align="start"
-    class="ms-modal-form ms-modal-medium"
-    width="480px"
+    class="ms-modal-form ms-modal-small"
   >
     <template #title> {{ t('project.userGroup.addUserGroup') }} </template>
     <div class="form">
-      <a-form ref="addUserGroupFormRef" :model="form" size="large" layout="vertical">
+      <a-form ref="addUserGroupFormRef" :model="form" layout="vertical">
         <a-form-item
           field="name"
           :label="t('project.userGroup.name')"
           :rules="[{ required: true, message: t('project.userGroup.addRequired') }]"
           asterisk-position="end"
         >
-          <a-input v-model="form.name" class="w-100" />
+          <a-input v-model="form.name" />
         </a-form-item>
       </a-form>
     </div>

frontend/src/views/setting/organization/project/components/addProjectModal.vue

@@ -1,7 +1,7 @@
 <template>
   <a-modal
     v-model:visible="currentVisible"
-    width="680px"
+    title-align="start"
     class="ms-modal-form ms-modal-medium"
     unmount-on-close
     @cancel="handleCancel(false)"
@@ -16,7 +16,7 @@
       </span>
     </template>
     <div class="form">
-      <a-form ref="formRef" :model="form" size="large" :style="{ width: '632px' }" layout="vertical">
+      <a-form ref="formRef" class="rounded-[4px]" :model="form" layout="vertical">
         <a-form-item
           field="name"
           required

frontend/src/views/setting/system/organizationAndProject/components/addOrganizationModal.vue

@@ -1,10 +1,10 @@
 <template>
   <a-modal
     v-model:visible="currentVisible"
-    width="680px"
     class="ms-modal-form ms-modal-medium"
     :ok-text="t('system.organization.create')"
     unmount-on-close
+    title-align="start"
     @cancel="handleCancel"
   >
     <template #title>
@@ -17,7 +17,7 @@
       </span>
     </template>
     <div class="form">
-      <a-form ref="formRef" :model="form" size="large" :style="{ width: '600px' }" layout="vertical">
+      <a-form ref="formRef" class="rounded-[4px]" :model="form" layout="vertical">
         <a-form-item
           field="name"
           required

frontend/src/views/setting/system/organizationAndProject/components/addProjectModal.vue

@@ -4,6 +4,7 @@
     width="680px"
     class="ms-modal-form ms-modal-medium"
     :ok-text="isEdit ? t('common.update') : t('common.create')"
+    title-align="start"
     unmount-on-close
     @cancel="handleCancel(false)"
   >
@@ -17,7 +18,7 @@
       </span>
     </template>
     <div class="form">
-      <a-form ref="formRef" :model="form" size="large" :style="{ width: '600px' }" layout="vertical">
+      <a-form ref="formRef" :model="form" :style="{ width: '600px' }" layout="vertical">
         <a-form-item
           field="name"
           required

frontend/src/views/setting/system/organizationAndProject/components/addUserModal.vue

@@ -9,7 +9,7 @@
   >
     <template #title> {{ t('system.organization.addMember') }} </template>
     <div class="form">
-      <a-form ref="formRef" :model="form" size="large" :style="{ width: '600px' }" layout="vertical">
+      <a-form ref="formRef" class="rounded-[4px]" :model="form" layout="vertical">
         <a-form-item
           field="name"
           :label="t('system.organization.member')"