refactor(kling): 替换智能体选择为风格选择组件

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

@@ -22,26 +22,14 @@
 
           <!-- 内容区 -->
           <div class="popover-body">
-            <!-- 智能体选择 -->
+            <!-- 风格选择 -->
             <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"
-                    :key="agent.id"
-                    :value="agent.id"
-                  >
-                    <div class="agent-option">
-                      <img v-if="agent.icon" :src="agent.icon" class="agent-icon" />
-                      <span class="agent-name">{{ agent.agentName }}</span>
-                    </div>
-                  </SelectItem>
-                </SelectContent>
-              </Select>
+              <label class="form-label">选择风格</label>
+              <StyleSelector
+                v-model:value="selectedAgentId"
+                placeholder="选择风格"
+                storage-key="text_generate_style"
+              />
             </div>
 
             <!-- 主题输入 -->
@@ -88,14 +76,8 @@
 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'
-import { getAgentList, sendChatStream } from '@/api/agent'
+import StyleSelector from '@/components/StyleSelector.vue'
+import { sendChatStream } from '@/api/agent'
 
 // Props
 const props = defineProps<{
@@ -111,8 +93,6 @@ const emit = defineEmits<{
 }>()
 
 // 状态
-const agentList = ref<any[]>([])
-const loadingAgents = ref(false)
 const selectedAgentId = ref<number | null>(null)
 const theme = ref('')
 const generatedText = ref('')
@@ -125,25 +105,6 @@ const canGenerate = computed(() => {
   return selectedAgentId.value && theme.value.trim().length > 0
 })
 
-// 获取智能体列表
-const fetchAgents = async () => {
-  loadingAgents.value = true
-  try {
-    const res = await getAgentList()
-    if (res.code === 0 && res.data) {
-      agentList.value = res.data
-      // 默认选中第一个
-      if (res.data.length > 0 && !selectedAgentId.value) {
-        selectedAgentId.value = res.data[0].id
-      }
-    }
-  } catch (error) {
-    console.error('获取智能体列表失败:', error)
-  } finally {
-    loadingAgents.value = false
-  }
-}
-
 // 更新气泡位置
 const updatePosition = () => {
   // 找到触发按钮
@@ -179,9 +140,8 @@ const updatePosition = () => {
 const handleGenerate = async () => {
   if (!canGenerate.value || isGenerating.value) return
 
-  const selectedAgent = agentList.value.find(a => a.id === selectedAgentId.value)
-  if (!selectedAgent) {
-    toast.warning('请选择智能体')
+  if (!selectedAgentId.value) {
+    toast.warning('请选择风格')
     return
   }
 
@@ -198,7 +158,7 @@ const handleGenerate = async () => {
 
   try {
     await sendChatStream({
-      agentId: selectedAgent.id,
+      agentId: selectedAgentId.value,
       content: prompt,
       ctrl: abortController.value,
       onMessage: (result: { event: string; content?: string; errorMessage?: string }) => {
@@ -243,7 +203,6 @@ const handleClose = () => {
 // 监听 visible 变化
 watch(() => props.visible, (val) => {
   if (val) {
-    fetchAgents()
     updatePosition()
     // 监听窗口大小变化
     window.addEventListener('resize', updatePosition)
@@ -288,7 +247,7 @@ onUnmounted(() => {
 .popover-overlay {
   position: fixed;
   inset: 0;
-  z-index: 1000;
+  z-index: 40;
 }
 
 // 气泡卡片
@@ -298,7 +257,7 @@ onUnmounted(() => {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1);
   border: 1px solid @border-color;
   overflow: hidden;
-  z-index: 1001;
+  z-index: 40;
 }
 
 // 头部
@@ -358,45 +317,6 @@ onUnmounted(() => {
   margin-bottom: 6px;
 }
 
-.agent-select {
-  width: 100%;
-
-  :deep(.ant-select-selector) {
-    background: @bg-hover !important;
-    border-radius: 6px !important;
-    padding: 4px 10px !important;
-    min-height: 32px !important;
-    display: flex !important;
-    align-items: center !important;
-  }
-
-  :deep(.ant-select-selection-item) {
-    font-size: 13px;
-    color: @text-primary;
-    line-height: 24px !important;
-    display: flex !important;
-    align-items: center !important;
-  }
-}
-
-.agent-option {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.agent-icon {
-  width: 18px;
-  height: 18px;
-  border-radius: 4px;
-  object-fit: cover;
-}
-
-.agent-name {
-  font-size: 13px;
-  color: @text-primary;
-}
-
 .theme-input {
   width: 100%;
   height: 32px;