feat: 样式升级

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

@@ -16,7 +16,7 @@
           <div class="popover-header">
             <span class="popover-title">AI 文案生成</span>
             <button class="close-btn" @click="handleClose">
-              <CloseOutlined />
+              <Icon icon="lucide:x" class="w-3.5 h-3.5" />
             </button>
           </div>
 
@@ -25,25 +25,23 @@
             <!-- 智能体选择 -->
             <div class="form-item">
               <label class="form-label">选择智能体</label>
-              <a-select
-                v-model:value="selectedAgentId"
-                :loading="loadingAgents"
-                placeholder="请选择智能体"
-                class="agent-select"
-                :bordered="false"
-                size="small"
-              >
-                <a-select-option
-                  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>
-                </a-select-option>
-              </a-select>
+              <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>
             </div>
 
             <!-- 主题输入 -->
@@ -88,8 +86,15 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, onUnmounted } from 'vue'
-import { CloseOutlined, LoadingOutlined } from '@ant-design/icons-vue'
-import { message } from 'ant-design-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'
 
 // Props
@@ -176,7 +181,7 @@ const handleGenerate = async () => {
 
   const selectedAgent = agentList.value.find(a => a.id === selectedAgentId.value)
   if (!selectedAgent) {
-    message.warning('请选择智能体')
+    toast.warning('请选择智能体')
     return
   }
 
@@ -200,12 +205,12 @@ const handleGenerate = async () => {
         if (result.event === 'message' && result.content) {
           generatedText.value += result.content
         } else if (result.event === 'error') {
-          message.error(result.errorMessage || '生成出错')
+          toast.error(result.errorMessage || '生成出错')
           isGenerating.value = false
         }
       },
       onError: () => {
-        message.error('生成失败，请重试')
+        toast.error('生成失败，请重试')
         isGenerating.value = false
       },
       onClose: () => {
@@ -218,7 +223,7 @@ const handleGenerate = async () => {
     })
   } catch (error: any) {
     if (error.name !== 'AbortError') {
-      message.error('生成失败')
+      toast.error('生成失败')
     }
     isGenerating.value = false
   }