feat: 优化

frontend/app/web-gold/src/components/StyleSelector.vue

@@ -1,18 +1,11 @@
 <template>
-  <Combobox v-model="selectedId" @update:model-value="handleChange">
+  <Select v-model="selectedId" @update:model-value="handleChange">
-    <ComboboxAnchor class="w-full">
+    <SelectTrigger class="w-full">
-      <ComboboxTrigger as-child>
+      <SelectValue :placeholder="placeholder" />
-        <ComboboxInput
+    </SelectTrigger>
-          :placeholder="placeholder"
+    <SelectContent>
-          v-model="searchKeyword"
+      <SelectItem
-          :display-value="displayValue"
+        v-for="item in allList"
-        />
-      </ComboboxTrigger>
-    </ComboboxAnchor>
-    <ComboboxList>
-      <ComboboxEmpty>未找到匹配项</ComboboxEmpty>
-      <ComboboxItem
-        v-for="item in filteredList"
         :key="item.id"
         :value="item.id"
       >
@@ -21,9 +14,14 @@
           <span class="option-name">{{ item.name }}</span>
           <span class="option-tag">{{ item.category || '其他' }}</span>
         </div>
-      </ComboboxItem>
+      </SelectItem>
-    </ComboboxList>
+
-  </Combobox>
+      <!-- 空状态 -->
+      <div v-if="!loading && allList.length === 0" class="empty-text">
+        暂无可选项
+      </div>
+    </SelectContent>
+  </Select>
 </template>
 
 <script setup>
@@ -31,15 +29,7 @@ import { ref, computed, watch, onMounted } from 'vue'
 import { usePromptStore } from '@/stores/prompt'
 import { getJSON, setJSON } from '@/utils/storage'
 
-import {
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-  Combobox,
-  ComboboxAnchor,
-  ComboboxEmpty,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxList,
-  ComboboxTrigger
-} from '@/components/ui/combobox'
 
 const props = defineProps({
   modelValue: {
@@ -62,30 +52,10 @@ const promptStore = usePromptStore()
 
 const loading = ref(false)
 const selectedId = ref(null)
-const searchKeyword = ref('')
 
 // 全部列表（来自 /ai/user-prompt/my-list）
 const allList = computed(() => promptStore.promptList || [])
 
-// 过滤后的列表
-const filteredList = computed(() => {
-  if (!searchKeyword.value.trim()) {
-    return allList.value
-  }
-  const keyword = searchKeyword.value.toLowerCase()
-  return allList.value.filter(item =>
-    item.name?.toLowerCase().includes(keyword) ||
-    item.category?.toLowerCase().includes(keyword)
-  )
-})
-
-// 显示选中项名称
-const displayValue = (val) => {
-  if (!val) return ''
-  const item = allList.value.find(p => p.id === val)
-  return item?.name || ''
-}
-
 // 处理选择变化
 function handleChange(value) {
   if (!value) {

frontend/app/web-gold/src/views/kling/components/TextGeneratePopup.vue

@@ -25,20 +25,13 @@
             <!-- 智能体选择 -->
             <div class="form-item">
               <label class="form-label">选择智能体</label>
-              <Combobox v-model="selectedAgentId" :disabled="loadingAgents">
+              <Select v-model="selectedAgentId" :disabled="loadingAgents" class="agent-select">
-                <ComboboxAnchor class="agent-select-anchor">
+                <SelectTrigger class="agent-select-trigger">
-                  <ComboboxTrigger as-child>
+                  <SelectValue :placeholder="loadingAgents ? '加载中...' : '请选择智能体'" />
-                    <ComboboxInput
+                </SelectTrigger>
-                      :placeholder="loadingAgents ? '加载中...' : '搜索或选择智能体...'"
+                <SelectContent>
-                      v-model="searchKeyword"
+                  <SelectItem
-                      :display-value="displayValue"
+                    v-for="agent in agentList"
-                    />
-                  </ComboboxTrigger>
-                </ComboboxAnchor>
-                <ComboboxList class="agent-combobox-list">
-                  <ComboboxEmpty>未找到匹配的智能体</ComboboxEmpty>
-                  <ComboboxItem
-                    v-for="agent in filteredAgents"
                     :key="agent.id"
                     :value="agent.id"
                   >
@@ -46,9 +39,9 @@
                       <img v-if="agent.icon" :src="agent.icon" class="agent-icon" />
                       <span class="agent-name">{{ agent.agentName }}</span>
                     </div>
-                  </ComboboxItem>
+                  </SelectItem>
-                </ComboboxList>
+                </SelectContent>
-              </Combobox>
+              </Select>
             </div>
 
             <!-- 主题输入 -->
@@ -96,14 +89,12 @@ import { ref, computed, watch, onUnmounted } from 'vue'
 import { Icon } from '@iconify/vue'
 import { toast } from 'vue-sonner'
 import {
-  Combobox,
+  Select,
-  ComboboxAnchor,
+  SelectContent,
-  ComboboxEmpty,
+  SelectItem,
-  ComboboxInput,
+  SelectTrigger,
-  ComboboxItem,
+  SelectValue
-  ComboboxList,
+} from '@/components/ui/select'
-  ComboboxTrigger
-} from '@/components/ui/combobox'
 import { getAgentList, sendChatStream } from '@/api/agent'
 
 // Props
@@ -126,7 +117,6 @@ const selectedAgentId = ref<number | null>(null)
 const theme = ref('')
 const generatedText = ref('')
 const isGenerating = ref(false)
-const searchKeyword = ref('')
 const abortController = ref<AbortController | null>(null)
 const popoverStyle = ref<Record<string, string>>({})
 
@@ -135,24 +125,6 @@ const canGenerate = computed(() => {
   return selectedAgentId.value && theme.value.trim().length > 0
 })
 
-// 过滤后的智能体列表
-const filteredAgents = computed(() => {
-  if (!searchKeyword.value.trim()) {
-    return agentList.value
-  }
-  const keyword = searchKeyword.value.toLowerCase()
-  return agentList.value.filter(agent =>
-    agent.agentName?.toLowerCase().includes(keyword)
-  )
-})
-
-// 显示选中智能体的名称
-const displayValue = (val: number | null) => {
-  if (!val) return ''
-  const agent = agentList.value.find(a => a.id === val)
-  return agent?.agentName || ''
-}
-
 // 获取智能体列表
 const fetchAgents = async () => {
   loadingAgents.value = true