diff --git a/frontend/app/web-gold/src/components/StyleSelector.vue b/frontend/app/web-gold/src/components/StyleSelector.vue
index 1fef584ce8..aaaee725d3 100644
--- a/frontend/app/web-gold/src/components/StyleSelector.vue
+++ b/frontend/app/web-gold/src/components/StyleSelector.vue
@@ -1,11 +1,18 @@
 <template>
-  <Select v-model="selectedId" @update:model-value="handleChange">
-    <SelectTrigger class="w-full">
-      <SelectValue :placeholder="placeholder" />
-    </SelectTrigger>
-    <SelectContent>
-      <SelectItem
-        v-for="item in allList"
+  <Combobox v-model="selectedId" @update:model-value="handleChange">
+    <ComboboxAnchor class="w-full">
+      <ComboboxTrigger as-child>
+        <ComboboxInput
+          :placeholder="placeholder"
+          v-model="searchKeyword"
+          :display-value="displayValue"
+        />
+      </ComboboxTrigger>
+    </ComboboxAnchor>
+    <ComboboxList>
+      <ComboboxEmpty>未找到匹配项</ComboboxEmpty>
+      <ComboboxItem
+        v-for="item in filteredList"
         :key="item.id"
         :value="item.id"
       >
@@ -14,14 +21,9 @@
           <span class="option-name">{{ item.name }}</span>
           <span class="option-tag">{{ item.category || '其他' }}</span>
         </div>
-      </SelectItem>
-
-      <!-- 空状态 -->
-      <div v-if="!loading && allList.length === 0" class="empty-text">
-        暂无可选项
-      </div>
-    </SelectContent>
-  </Select>
+      </ComboboxItem>
+    </ComboboxList>
+  </Combobox>
 </template>
 
 <script setup>
@@ -29,7 +31,15 @@ import { ref, computed, watch, onMounted } from 'vue'
 import { usePromptStore } from '@/stores/prompt'
 import { getJSON, setJSON } from '@/utils/storage'
 
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import {
+  Combobox,
+  ComboboxAnchor,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxTrigger
+} from '@/components/ui/combobox'
 
 const props = defineProps({
   modelValue: {
@@ -52,10 +62,30 @@ 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) {
diff --git a/frontend/app/web-gold/src/views/kling/components/TextGeneratePopup.vue b/frontend/app/web-gold/src/views/kling/components/TextGeneratePopup.vue
index 3e1ddecc08..f6e4ca2886 100644
--- a/frontend/app/web-gold/src/views/kling/components/TextGeneratePopup.vue
+++ b/frontend/app/web-gold/src/views/kling/components/TextGeneratePopup.vue
@@ -25,13 +25,20 @@
             <!-- 智能体选择 -->
             <div class="form-item">
               <label class="form-label">选择智能体</label>
-              <Select v-model="selectedAgentId" :disabled="loadingAgents" class="agent-select">
-                <SelectTrigger class="agent-select-trigger">
-                  <SelectValue :placeholder="loadingAgents ? '加载中...' : '请选择智能体'" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem
-                    v-for="agent in agentList"
+              <Combobox v-model="selectedAgentId" :disabled="loadingAgents">
+                <ComboboxAnchor class="agent-select-anchor">
+                  <ComboboxTrigger as-child>
+                    <ComboboxInput
+                      :placeholder="loadingAgents ? '加载中...' : '搜索或选择智能体...'"
+                      v-model="searchKeyword"
+                      :display-value="displayValue"
+                    />
+                  </ComboboxTrigger>
+                </ComboboxAnchor>
+                <ComboboxList class="agent-combobox-list">
+                  <ComboboxEmpty>未找到匹配的智能体</ComboboxEmpty>
+                  <ComboboxItem
+                    v-for="agent in filteredAgents"
                     :key="agent.id"
                     :value="agent.id"
                   >
@@ -39,9 +46,9 @@
                       <img v-if="agent.icon" :src="agent.icon" class="agent-icon" />
                       <span class="agent-name">{{ agent.agentName }}</span>
                     </div>
-                  </SelectItem>
-                </SelectContent>
-              </Select>
+                  </ComboboxItem>
+                </ComboboxList>
+              </Combobox>
             </div>
 
             <!-- 主题输入 -->
@@ -89,12 +96,14 @@ import { ref, computed, watch, onUnmounted } from 'vue'
 import { Icon } from '@iconify/vue'
 import { toast } from 'vue-sonner'
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from '@/components/ui/select'
+  Combobox,
+  ComboboxAnchor,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxTrigger
+} from '@/components/ui/combobox'
 import { getAgentList, sendChatStream } from '@/api/agent'
 
 // Props
@@ -117,6 +126,7 @@ 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>>({})
 
@@ -125,6 +135,24 @@ 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