From 5abb8595591160b932e07e30ad9efba3ad7b6f86 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sun, 2 Nov 2025 13:52:09 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96IconPicker=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/core/components/IconPicker.vue        | 41 ++++++++++++++-----
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/apps/jingrow/frontend/src/core/components/IconPicker.vue b/apps/jingrow/frontend/src/core/components/IconPicker.vue
index 569b428..5af9d36 100644
--- a/apps/jingrow/frontend/src/core/components/IconPicker.vue
+++ b/apps/jingrow/frontend/src/core/components/IconPicker.vue
@@ -22,7 +22,7 @@
       v-model:show="showPicker"
       :width="900"
       :placement="'right'"
-      :trap-focus="false"
+      :trap-focus="true"
       :close-on-esc="true"
     >
       <n-drawer-content :title="t('Select Icon')" :closable="true">
@@ -32,6 +32,7 @@
             <div class="search-section">
               <div class="search-controls">
                 <n-input
+                  ref="searchInputRef"
                   v-model:value="searchQuery"
                   :placeholder="t('Search icon name...')"
                   clearable
@@ -118,8 +119,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, watch, nextTick } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
 import { NButton, NDrawer, NDrawerContent, NInput, NSelect, useMessage } from 'naive-ui'
+import type { InputInst } from 'naive-ui'
 import { Icon } from '@iconify/vue'
 import { getIconLibraryConfig, getAvailableIconLibraries, DEFAULT_ICON_LIBRARY } from '@/shared/utils/icon-libraries'
 import { t } from '@/shared/i18n'
@@ -153,6 +156,7 @@ const loading = ref(false)
 const currentPage = ref(1)
 const pageSize = ref(200) // 每页200个图标
 const hasMore = ref(true)
+const searchInputRef = ref<InputInst | null>(null)
 
 // 计算属性
 const currentLibraryConfig = computed(() => {
@@ -316,6 +320,9 @@ function selectIcon(iconName: string) {
 
 // 打开弹窗时初始化临时选择
 async function openPicker() {
+  // 先打开 drawer，watch 会处理懒加载和聚焦
+  showPicker.value = true
+  
   // 如果已有图标名称包含前缀，提取图标名称部分
   if (selectedIcon.value && selectedIcon.value.includes(':')) {
     const [prefix, iconName] = selectedIcon.value.split(':')
@@ -325,8 +332,6 @@ async function openPicker() {
     if (correctLibrary) {
       // 切换到对应的图标库
       currentLibrary.value = correctLibrary.name
-      // 切换库后重新加载图标数据
-      await loadAllIcons()
       // 设置临时选择的图标名称（不包含前缀）
       tempSelectedIcon.value = iconName
       // 自动设置搜索关键词为图标名称，显示相关搜索结果
@@ -335,7 +340,6 @@ async function openPicker() {
       // 如果找不到对应的库，保持在All选项
       if (currentLibraryConfig.value.name !== 'all') {
         currentLibrary.value = 'all'
-        await loadAllIcons()
       }
       tempSelectedIcon.value = selectedIcon.value
       // 在All选项中，使用完整图标名称作为搜索关键词
@@ -350,7 +354,6 @@ async function openPicker() {
     tempSelectedIcon.value = ''
     searchQuery.value = ''
   }
-  showPicker.value = true
 }
 
 // 确认选择
@@ -385,15 +388,20 @@ function handleScroll(event: Event) {
   }
 }
 
+// 搜索防抖处理（优化性能）
+const debouncedHandleSearch = useDebounceFn(() => {
+  currentPage.value = 1
+}, 300)
+
 // 处理搜索变化
 function handleSearch() {
-  // 搜索时重置分页
-  currentPage.value = 1
+  debouncedHandleSearch()
 }
 
 // 处理图标库切换
 async function handleLibraryChange(newLibrary: string) {
   currentLibrary.value = newLibrary
+  // 切换库时重新加载图标
   await loadAllIcons()
   // 保持搜索关键词，只清空临时选择
   tempSelectedIcon.value = ''
@@ -430,9 +438,20 @@ watch(() => props.modelValue, (newValue) => {
   }
 }, { immediate: true })
 
-// 组件挂载时加载图标
-onMounted(() => {
-  loadAllIcons()
+// 监听 drawer 打开状态，确保输入框可以获得焦点并懒加载图标
+watch(showPicker, async (isOpen) => {
+  if (isOpen) {
+    // 懒加载：只在打开时加载图标（如果还没加载过）
+    if (allIcons.value.length === 0) {
+      await loadAllIcons()
+    }
+    
+    // drawer 打开后，等待 DOM 更新完成再聚焦
+    await nextTick()
+    setTimeout(() => {
+      searchInputRef.value?.focus()
+    }, 150)
+  }
 })
 
 // 暴露给外部的方法：打开选择器