优化IconPicker组件

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,11 +32,13 @@
             <div class="search-section">
               <div class="search-controls">
                 <n-input
+                  ref="searchInputRef"
                   v-model:value="searchQuery"
                   :placeholder="t('Search icon name...')"
                   clearable
                   size="large"
                   @update:value="handleSearch"
+                  @keydown="handleInputKeydown"
                   style="flex: 1;"
                 >
                   <template #prefix>
@@ -118,8 +120,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, onMounted, watch, nextTick } from 'vue'
 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(() => {
@@ -351,6 +355,12 @@ async function openPicker() {
     searchQuery.value = ''
   }
   showPicker.value = true
+  
+  // 等待 drawer 完全打开后聚焦输入框
+  await nextTick()
+  setTimeout(() => {
+    searchInputRef.value?.focus()
+  }, 100)
 }
 
 // 确认选择
@@ -391,6 +401,12 @@ function handleSearch() {
   currentPage.value = 1
 }
 
+// 处理输入框键盘事件，防止事件被阻止
+function handleInputKeydown(event: KeyboardEvent) {
+  // 允许正常输入，不阻止默认行为
+  event.stopPropagation()
+}
+
 // 处理图标库切换
 async function handleLibraryChange(newLibrary: string) {
   currentLibrary.value = newLibrary
@@ -430,6 +446,17 @@ watch(() => props.modelValue, (newValue) => {
   }
 }, { immediate: true })
 
+// 监听 drawer 打开状态，确保输入框可以获得焦点
+watch(showPicker, async (isOpen) => {
+  if (isOpen) {
+    // drawer 打开后，等待 DOM 更新完成再聚焦
+    await nextTick()
+    setTimeout(() => {
+      searchInputRef.value?.focus()
+    }, 150)
+  }
+})
+
 // 组件挂载时加载图标
 onMounted(() => {
   loadAllIcons()