fix: 修复问题

frontend/app/web-gold/src/views/trends/Forecast.vue

@@ -6,6 +6,7 @@ import { CommonService } from '@/api/common'
 import { UserPromptApi } from '@/api/userPrompt'
 import { useUserStore } from '@/stores/user'
 import GradientButton from '@/components/GradientButton.vue'
+import PromptSelector from '@/components/PromptSelector.vue'
 import { getVoiceText } from '@gold/hooks/web/useVoiceText'
 
 defineOptions({ name: 'ForecastView' })
@@ -42,22 +43,9 @@ const topicDetails = reactive({
 // 提示词相关
 const allPrompts = ref([])
 const loadingPrompts = ref(false)
-const showAllPromptsModal = ref(false)
 const promptSearchKeyword = ref('')
 const DISPLAY_COUNT = 6
 
-// 计算属性
-const displayPrompts = computed(() => allPrompts.value.slice(0, DISPLAY_COUNT))
-
-const filteredPrompts = computed(() => {
-  if (!promptSearchKeyword.value.trim()) return allPrompts.value
-  const keyword = promptSearchKeyword.value.trim().toLowerCase()
-  return allPrompts.value.filter(p => 
-    p.name.toLowerCase().includes(keyword) || 
-    (p.content && p.content.toLowerCase().includes(keyword))
-  )
-})
-
 // 工具函数
 const formatNumber = (num) => {
   if (!num) return '0'
@@ -101,12 +89,6 @@ async function loadUserPrompts() {
     
     if (response?.data?.list) {
       allPrompts.value = response.data.list
-      // 自动选中第一个提示词
-      if (!topicDetails.stylePromptId && allPrompts.value.length > 0) {
-        const firstPrompt = allPrompts.value[0]
-        topicDetails.stylePromptId = firstPrompt.id
-        topicDetails.stylePrompt = firstPrompt.content || ''
-      }
     }
   } catch (error) {
     console.error('加载提示词失败:', error)
@@ -116,14 +98,14 @@ async function loadUserPrompts() {
   }
 }
 
-function selectPrompt(prompt) {
+// 处理提示词选择
+function handlePromptChange(prompt) {
   if (!prompt?.content) {
     message.warning('提示词内容为空')
     return
   }
   topicDetails.stylePromptId = prompt.id
   topicDetails.stylePrompt = prompt.content
-  showAllPromptsModal.value = false
 }
 
 // 语音分析
@@ -649,44 +631,21 @@ onMounted(async () => {
 
           <!-- 风格提示词 -->
           <div>
-            <div class="form-label-wrapper">
-              <label class="form-label">风格提示词</label>
-              <a-button
-                v-if="allPrompts.length > DISPLAY_COUNT"
-                size="small"
-                type="link"
-                @click="showAllPromptsModal = true"
-                style="padding: 0; height: auto; font-size: 14px;"
-              >
-                更多 ({{ allPrompts.length }})
-              </a-button>
-            </div>
-            
-            <!-- 提示词标签展示区域 -->
-            <div v-if="displayPrompts.length > 0" class="prompt-tags-container">
-              <div class="prompt-tags-grid">
-                <div
-                  v-for="prompt in displayPrompts"
-                  :key="prompt.id"
-                  class="prompt-tag"
-                  :class="{ 'prompt-tag-selected': topicDetails.stylePromptId === prompt.id }"
-                  @click="selectPrompt(prompt)"
-                >
-                  <span class="prompt-tag-name">{{ prompt.name }}</span>
-                </div>
-              </div>
-            </div>
-            
-            <!-- 空状态 -->
-            <div v-else-if="!loadingPrompts" class="prompt-empty">
-              <div style="color: var(--color-text-secondary); font-size: 14px; text-align: center; padding: 20px;">
-                您可以在视频分析页面保存风格
-              </div>
-            </div>
-            
-            <!-- 加载状态 -->
-            <div v-else class="prompt-loading">
-              <a-spin size="small" />
+            <label class="form-label" style="display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--color-text);">风格提示词</label>
+
+            <!-- 使用 PromptSelector 组件 -->
+            <PromptSelector
+              v-model="topicDetails.stylePromptId"
+              :prompts="allPrompts"
+              :loading="loadingPrompts"
+              :search-keyword="promptSearchKeyword"
+              @change="handlePromptChange"
+              @update:searchKeyword="promptSearchKeyword = $event"
+            />
+
+            <!-- 空状态提示 -->
+            <div v-if="!loadingPrompts && allPrompts.length === 0" class="prompt-empty" style="color: var(--color-text-secondary); font-size: 14px; text-align: center; padding: 20px;">
+              您可以在视频分析页面保存风格
             </div>
           </div>
 
@@ -719,47 +678,6 @@ onMounted(async () => {
         </div>
       </section>
       
-      <!-- 更多提示词弹窗 -->
-      <a-modal
-        v-model:open="showAllPromptsModal"
-        title="选择提示词风格"
-        :width="600"
-        :footer="null"
-      >
-        <div class="prompt-modal-content">
-          <!-- 搜索框 -->
-          <a-input
-            v-model:value="promptSearchKeyword"
-            placeholder="搜索提示词..."
-            style="margin-bottom: 16px;"
-            allow-clear
-          >
-            <template #prefix>
-              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-              </svg>
-            </template>
-          </a-input>
-          
-          <!-- 提示词列表 -->
-          <div v-if="filteredPrompts.length > 0" class="all-prompts-grid">
-            <div
-              v-for="prompt in filteredPrompts"
-              :key="prompt.id"
-              class="all-prompt-tag"
-              :class="{ 'all-prompt-tag-selected': topicDetails.stylePromptId === prompt.id }"
-              @click="selectPrompt(prompt)"
-            >
-              <span class="all-prompt-tag-name">{{ prompt.name }}</span>
-            </div>
-          </div>
-          
-          <!-- 空状态 -->
-          <div v-else style="text-align: center; padding: 40px; color: var(--color-text-secondary);">
-            没有找到匹配的提示词
-          </div>
-        </div>
-      </a-modal>
     </div>
   </div>
 </template>