cd-personselector 1.3.5 → 1.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cd-personselector",
-  "version": "1.3.5",
+  "version": "1.3.7",
   "description": "人员选择器组件 - 支持多Tab、树形结构、搜索、懒加载、输入框选择模式",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/InputSelect.vue

@@ -25,40 +25,50 @@
             @tag-change="handleTagChange"
         >
             <template #panel>
-                <div v-if="currentSearchResults.length > 0" class="cd-input-select__panel">
-                    <t-checkbox
-                        v-for="result in currentSearchResults"
-                        :key="result.id"
-                        :value="result.id"
-                        :checked="isSelected(result.id)"
-                        class="cd-input-select__option"
-                        @change="(checked: boolean) => handleCheckboxChange(checked, result)"
-                    >
-                        <div class="cd-input-select__option-content">
-                            <div v-if="result.avatar" class="cd-input-select__option-avatar">
-                                <img :src="result.avatar" :alt="result.name" />
-                            </div>
-                            <div v-else class="cd-input-select__option-avatar cd-input-select__option-avatar--placeholder"
-                                :style="{
-                                    backgroundColor: getNodeTypeColor(result.nodeType),
-                                    color: '#fff'
-                                }">
-                                {{ getNodeTypeIcon(result.nodeType) }}
-                            </div>
-                            <div class="cd-input-select__option-info">
-                                <div class="cd-input-select__option-name">{{ result.name }}</div>
-                                <div v-if="result.isUser && (result.department || result.post)" class="cd-input-select__option-desc">
-                                    {{ result.department }}{{ result.department && result.post ? ' · ' : '' }}{{ result.post }}
+                <div v-if="currentSearchResults.length > 0" class="cd-input-select__panel" @mousedown.stop>
+                    <div class="cd-input-select__grid">
+                        <t-checkbox
+                            v-for="result in paginatedSearchResults"
+                            :key="result.id"
+                            :value="result.id"
+                            :checked="isSelected(result.id)"
+                            class="cd-input-select__option"
+                            @change="(checked: boolean) => handleCheckboxChange(checked, result)"
+                        >
+                            <div class="cd-input-select__option-content">
+                                <div v-if="result.avatar" class="cd-input-select__option-avatar">
+                                    <img :src="result.avatar" :alt="result.name" />
                                 </div>
-                                <div v-else-if="result.fnumber" class="cd-input-select__option-desc">
-                                    {{ result.fnumber }}
+                                <div v-else class="cd-input-select__option-avatar cd-input-select__option-avatar--placeholder"
+                                    :style="{
+                                        backgroundColor: getNodeTypeColor(result.nodeType),
+                                        color: '#fff'
+                                    }">
+                                    {{ getNodeTypeIcon(result.nodeType) }}
                                 </div>
+                                <div class="cd-input-select__option-info">
+                                    <div class="cd-input-select__option-name">{{ result.name }}</div>
+                                    <div v-if="result.isUser && (result.department || result.post)" class="cd-input-select__option-desc">
+                                        {{ result.department }}{{ result.department && result.post ? ' · ' : '' }}{{ result.post }}
+                                    </div>
+                                    <div v-else-if="result.fnumber" class="cd-input-select__option-desc">
+                                        {{ result.fnumber }}
+                                    </div>
+                                </div>
+                                <span class="cd-input-select__option-tag" :style="{ backgroundColor: getNodeTypeColor(result.nodeType) + '18', color: getNodeTypeColor(result.nodeType) }">
+                                    {{ getNodeTypeLabel(result.nodeType) }}
+                                </span>
                             </div>
-                            <span class="cd-input-select__option-tag" :style="{ backgroundColor: getNodeTypeColor(result.nodeType) + '18', color: getNodeTypeColor(result.nodeType) }">
-                                {{ getNodeTypeLabel(result.nodeType) }}
-                            </span>
+                        </t-checkbox>
+                    </div>
+                    <div v-if="searchTotalPages > 1" class="cd-input-select__pager">
+                        <span class="cd-input-select__pager-info">{{ currentSearchResults.length }} 条结果</span>
+                        <div class="cd-input-select__pager-btns">
+                            <t-button size="small" variant="text" :disabled="searchPage <= 1" @click="searchPage--">上一页</t-button>
+                            <span class="cd-input-select__pager-num">{{ searchPage }}/{{ searchTotalPages }}</span>
+                            <t-button size="small" variant="text" :disabled="searchPage >= searchTotalPages" @click="searchPage++">下一页</t-button>
                         </div>
-                    </t-checkbox>
+                    </div>
                 </div>
                 <div v-else-if="searchLoading" class="cd-input-select__loading">
                     搜索中...
@@ -113,6 +123,13 @@ const emit = defineEmits<{
 }>();
 const searchLoading = ref(false);
 const currentSearchResults = ref<UserItem[]>([]);
+const searchPage = ref(1);
+const searchPageSize = 10;
+const paginatedSearchResults = computed(() => {
+    const start = (searchPage.value - 1) * searchPageSize;
+    return currentSearchResults.value.slice(start, start + searchPageSize);
+});
+const searchTotalPages = computed(() => Math.ceil(currentSearchResults.value.length / searchPageSize));
 const showPersonSelector = ref(false);
 const selectedIds = ref<(string | number)[]>([]);
 const selectedOptions = ref<UserItem[]>([]);
@@ -295,6 +312,7 @@ watch(inputValue, (keyword) => {
         keyword,
         callback: (results: UserItem[]) => {
             currentSearchResults.value = results;
+            searchPage.value = 1;
             searchLoading.value = false;
             if (results.length > 0) {
                 popupVisible.value = true;
@@ -331,10 +349,37 @@ watch(inputValue, (keyword) => {
         margin: 0 !important;
     }
     &__panel {
-        max-height: 300px;
+        max-height: 400px;
         overflow-y: auto;
         width: 100%;
         box-sizing: border-box;
+        padding: 4px;
+    }
+    &__grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 4px;
+    }
+    &__pager {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 6px 8px;
+        border-top: 1px solid #e5e7eb;
+        margin-top: 4px;
+        &-info {
+            font-size: 12px;
+            color: #999;
+        }
+        &-btns {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+        &-num {
+            font-size: 12px;
+            color: #666;
+        }
     }
     &__loading,
     &__empty {