diff --git a/frontend/app/web-gold/src/views/trends/Forecast.vue b/frontend/app/web-gold/src/views/trends/Forecast.vue
index 645b7189fa..aa1fa230ac 100644
--- a/frontend/app/web-gold/src/views/trends/Forecast.vue
+++ b/frontend/app/web-gold/src/views/trends/Forecast.vue
@@ -4,7 +4,6 @@ import { message } from 'ant-design-vue'
 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'
 import TikhubService, { InterfaceType, MethodType, ParamType } from '@/api/tikhub'
@@ -44,7 +43,6 @@ const topicDetails = reactive({
 const allPrompts = ref([])
 const loadingPrompts = ref(false)
 const promptSearchKeyword = ref('')
-const DISPLAY_COUNT = 6
 
 // 工具函数
 const formatNumber = (num) => {
@@ -52,7 +50,7 @@ const formatNumber = (num) => {
   return num >= 10000 ? `${(num / 10000).toFixed(1)}w` : num.toString()
 }
 
-const truncateTitle = (title, maxLength = 30) => {
+const truncateTitle = (title, maxLength = 28) => {
   if (!title) return ''
   return title.length <= maxLength ? title : `${title.substring(0, maxLength)}...`
 }
@@ -86,7 +84,7 @@ async function loadUserPrompts() {
       pageSize: 100,
       status: 1
     })
-    
+
     if (response?.data?.list) {
       allPrompts.value = response.data.list
     }
@@ -113,26 +111,25 @@ async function analyzeVoice(audioUrl) {
     console.warn('音频链接为空，无法分析')
     return
   }
-  
+
   isAnalyzing.value = true
   try {
-    message.info('正在分析语音链接，提取文案...')
+    message.info('正在分析语音...')
     const transcriptions = await getVoiceText([{ audio_url: audioUrl }])
     const transcript = transcriptions?.[0]?.value?.trim() || ''
-    
+
     if (transcript) {
       const hasExistingContent = topicDetails.copywriting?.trim()
-      topicDetails.copywriting = hasExistingContent 
+      topicDetails.copywriting = hasExistingContent
         ? `${topicDetails.copywriting}\n\n${transcript}`
         : transcript
-      message.success(`语音分析完成，已提取 ${transcript.length} 字文案内容`)
+      message.success('语音分析完成')
     } else {
-      console.warn('转写结果为空:', transcriptions)
-      message.warning('未从语音链接获取到可用的文案内容，请检查音频链接是否有效')
+      message.warning('未获取到可用文案')
     }
   } catch (error) {
     console.error('分析语音失败:', error)
-    message.error(`分析语音失败: ${error?.message || '请稍后重试'}`)
+    message.error('分析语音失败')
   } finally {
     isAnalyzing.value = false
   }
@@ -142,19 +139,17 @@ async function analyzeVoice(audioUrl) {
 async function handleCreate(topic) {
   selectedTopic.value = topic.id
   topicDetails.title = topic.title
-  
-  // 自动选中第一个提示词（如果还没有选中）
+
   if (!topicDetails.stylePromptId && allPrompts.value.length > 0) {
     const firstPrompt = allPrompts.value[0]
     topicDetails.stylePromptId = firstPrompt.id
     topicDetails.stylePrompt = firstPrompt.content || ''
   }
-  
-  // 自动分析语音
+
   if (topic.audioUrl?.trim()) {
     await analyzeVoice(topic.audioUrl)
   } else {
-    message.info('该视频暂无音频链接，无法自动提取语音文案')
+    message.info('该视频暂无音频')
   }
 }
 
@@ -164,52 +159,51 @@ async function handleGenerate() {
     message.warning('请输入文案内容')
     return
   }
-  
+
   if (!topicDetails.stylePrompt?.trim()) {
     message.warning('请先选择文案风格')
     return
   }
-  
+
   isGenerating.value = true
   generatedContent.value = ''
-  
+
   try {
     const requestData = {
       audio_prompt: topicDetails.stylePrompt,
       user_text: topicDetails.copywriting.trim(),
       amplitude: 50
     }
-    
+
     const ctrl = new AbortController()
     let fullText = ''
     let errorOccurred = false
     let isResolved = false
-    
+
     await new Promise((resolve, reject) => {
       let timeout = null
-      
+
       const cleanup = () => {
         if (timeout) {
           clearTimeout(timeout)
           timeout = null
         }
       }
-      
+
       timeout = setTimeout(() => {
         if (!isResolved) {
           cleanup()
           ctrl.abort()
-          reject(new Error('请求超时，请稍后重试'))
+          reject(new Error('请求超时'))
         }
       }, 180000)
-      
+
       CommonService.callWorkflowStream({
         data: requestData,
         ctrl,
         onMessage: (event) => {
           if (errorOccurred || !event?.data) return
-          
-          // 处理特殊标记
+
           const dataStr = event.data.trim()
           if (dataStr === '[DONE]') {
             cleanup()
@@ -219,7 +213,7 @@ async function handleGenerate() {
             }
             return
           }
-          
+
           if (dataStr.startsWith('[TIMEOUT]')) {
             cleanup()
             if (!isResolved) {
@@ -229,7 +223,7 @@ async function handleGenerate() {
             }
             return
           }
-          
+
           try {
             const obj = JSON.parse(event.data)
             const piece = obj?.text || obj?.content || obj?.data || ''
@@ -238,12 +232,9 @@ async function handleGenerate() {
               generatedContent.value = fullText
             }
           } catch (e) {
-            // 如果不是JSON，可能是纯文本
             if (event.data && !event.data.startsWith('[')) {
               fullText += event.data
               generatedContent.value = fullText
-            } else {
-              console.warn('解析流数据异常:', e)
             }
           }
         },
@@ -253,12 +244,7 @@ async function handleGenerate() {
             errorOccurred = true
             isResolved = true
             ctrl.abort()
-
-            // 尝试解析错误中的状态码和业务码
-            const status = err?.response?.status
-            const data = err?.response?.data
             const errorMsg = err?.message || '网络请求失败'
-            console.error('SSE请求错误:', err)
             message.error(errorMsg)
             reject(new Error(errorMsg))
           }
@@ -272,12 +258,12 @@ async function handleGenerate() {
         }
       })
     })
-    
+
     generatedContent.value = fullText.trim()
     message.success('文案生成成功')
   } catch (error) {
     console.error('生成文案失败:', error)
-    message.error('生成文案失败，请重试')
+    message.error('生成文案失败')
   } finally {
     isGenerating.value = false
   }
@@ -287,7 +273,6 @@ async function handleGenerate() {
 function extractAudioUrl(video) {
   const urlList = video?.play_addr?.url_list
   if (Array.isArray(urlList) && urlList.length > 0) {
-    // 优先使用最后一个，如果为空则使用第一个
     const lastUrl = urlList[urlList.length - 1]
     const firstUrl = urlList[0]
     return (lastUrl && lastUrl.trim()) || (firstUrl && firstUrl.trim()) || ''
@@ -296,10 +281,10 @@ function extractAudioUrl(video) {
 }
 
 function extractCover(video) {
-  return video?.origin_cover?.url_list?.[0] 
-    || video?.cover?.url_list?.[0] 
-    || video?.dynamic_cover?.url_list?.[0] 
-    || video?.animated_cover?.url_list?.[0] 
+  return video?.origin_cover?.url_list?.[0]
+    || video?.cover?.url_list?.[0]
+    || video?.dynamic_cover?.url_list?.[0]
+    || video?.animated_cover?.url_list?.[0]
     || ''
 }
 
@@ -307,7 +292,7 @@ function processSearchResults(response, startId = 1) {
   try {
     currentCursor.value = response?.data?.cursor || null
     const dataList = response?.data?.data || []
-    
+
     return dataList
       .map(el => el.aweme_info)
       .filter(Boolean)
@@ -319,8 +304,8 @@ function processSearchResults(response, startId = 1) {
         audioUrl: extractAudioUrl(item.video),
         cover: extractCover(item.video) || item?.cover?.url_list?.[0] || '',
         author: item.author?.nickname || item.author?.unique_id || '未知',
-        authorAvatar: item.author?.avatar_thumb?.url_list?.[0] 
-          || item.author?.avatar_larger?.url_list?.[0] 
+        authorAvatar: item.author?.avatar_thumb?.url_list?.[0]
+          || item.author?.avatar_larger?.url_list?.[0]
           || '',
         playCount: item.statistics?.play_count || 0,
         diggCount: item.statistics?.digg_count || 0,
@@ -342,7 +327,6 @@ async function handleSearch() {
     return
   }
 
-  // 重置状态
   searchParams.offset = 0
   searchParams.keyword = keyword
   currentCursor.value = null
@@ -351,7 +335,7 @@ async function handleSearch() {
 
   try {
     const urlParams = {
-      keyword:searchParams.keyword,
+      keyword: searchParams.keyword,
       offset: String(searchParams.offset),
       sort_type: String(searchParams.sort_type),
       publish_time: String(searchParams.publish_time),
@@ -377,7 +361,7 @@ async function handleSearch() {
     message.success(`找到 ${searchResults.length} 个结果`)
   } catch (error) {
     console.error('搜索失败:', error)
-    message.error(error?.message || '搜索失败，请稍后重试')
+    message.error(error?.message || '搜索失败')
     hotTopics.value = []
   } finally {
     isLoading.value = false
@@ -397,796 +381,861 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="fc-page">
-    <div class="fc-grid">
-      <!-- 左侧：热点列表 -->
-      <section class="fc-left">
-        <div class="fc-title">热点预测</div>
+  <div class="forecast-page">
+    <!-- 左侧面板 -->
+    <section class="panel panel-left">
+      <header class="panel-header">
+        <h2 class="panel-title">热点预测</h2>
+        <p class="panel-subtitle">搜索热门内容，发现创作灵感</p>
+      </header>
 
-        <!-- 搜索框 -->
-        <div class="search-box">
-          <div class="search-input-wrapper">
-            <input 
-              v-model="searchKeyword" 
-              type="text" 
-              placeholder="输入关键词搜索抖音热点..." 
-              class="search-input"
-              :disabled="isLoading" 
-              @keypress="handleSearchKeypress" 
-            />
-            <button 
-              @click="handleSearch" 
-              :disabled="isLoading || !searchKeyword.trim()" 
-              class="search-btn"
-            >
-              <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" />
-              </svg>
-            </button>
-          </div>
-          
-          <!-- 搜索参数配置 -->
-          <div class="search-params">
-            <div class="param-row">
-              <div class="param-item">
-                <label class="param-label">排序方式</label>
-                <a-select v-model:value="searchParams.sort_type" class="param-select">
-                  <a-select-option value="0">综合排序</a-select-option>
-                  <a-select-option value="1">最多点赞</a-select-option>
-                  <a-select-option value="2">最新发布</a-select-option>
-                </a-select>
-              </div>
-
-              <div class="param-item">
-                <label class="param-label">发布时间</label>
-                <a-select v-model:value="searchParams.publish_time" class="param-select">
-                  <a-select-option value="0">不限</a-select-option>
-                  <a-select-option value="1">最近一天</a-select-option>
-                  <a-select-option value="7">最近一周</a-select-option>
-                  <a-select-option value="180">最近半年</a-select-option>
-                </a-select>
-              </div>
-
-              <div class="param-item">
-                <label class="param-label">视频时长</label>
-                <a-select v-model:value="searchParams.filter_duration" class="param-select">
-                  <a-select-option value="0">不限</a-select-option>
-                  <a-select-option value="0-1">1分钟以内</a-select-option>
-                  <a-select-option value="1-5">1-5分钟</a-select-option>
-                  <a-select-option value="5-10000">5分钟以上</a-select-option>
-                </a-select>
-              </div>
-            </div>
-            
-            <div class="param-row">
-              <div class="param-item">
-                <label class="param-label">内容类型</label>
-                <a-select v-model:value="searchParams.content_type" class="param-select">
-                  <a-select-option value="0">不限</a-select-option>
-                  <a-select-option value="1">视频</a-select-option>
-                  <a-select-option value="2">图集</a-select-option>
-                </a-select>
-              </div>
-            </div>
-          </div>
+      <!-- 搜索区域 -->
+      <div class="search-section">
+        <div class="search-input-group">
+          <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <circle cx="11" cy="11" r="8"/>
+            <path d="M21 21l-4.35-4.35"/>
+          </svg>
+          <input
+            v-model="searchKeyword"
+            type="text"
+            placeholder="输入关键词搜索..."
+            class="search-input"
+            :disabled="isLoading"
+            @keypress="handleSearchKeypress"
+          />
+          <button
+            @click="handleSearch"
+            :disabled="isLoading || !searchKeyword.trim()"
+            class="search-btn"
+          >
+            {{ isLoading ? '搜索中' : '搜索' }}
+          </button>
         </div>
 
-        <!-- 热点列表 -->
-        <div class="topic-list">
-          <div class="p-2">
-            <!-- 空状态 -->
-            <div v-if="hotTopics.length === 0" class="empty-state">
-              <svg class="empty-icon" 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>
-                <circle cx="9" cy="9" r="3"></circle>
-              </svg>
-              <p class="empty-text">搜索抖音热点内容</p>
-              <p class="empty-hint">输入关键词，开始搜索热门内容</p>
-            </div>
-            
-            <!-- 热点列表 -->
-            <div 
-              v-for="topic in hotTopics" 
-              :key="topic.id" 
-              @click="handleCreate(topic)" 
-              class="topic-item"
-              :class="{ 'topic-item--selected': selectedTopic === topic.id }"
-            >
-              <div class="flex flex-col flex-1 min-w-0">
-                <!-- 封面和标题 -->
-                <div class="flex items-start gap-3 mb-2">
-                  <!-- 封面图片 -->
-                  <div class="topic-cover-wrapper">
-                    <img 
-                      v-if="topic.cover" 
-                      :src="topic.cover" 
-                      alt="封面" 
-                      class="topic-cover"
-                      @error="handleImageError"
-                    />
-                    <div v-else class="topic-cover-placeholder">
-                      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-                      </svg>
-                    </div>
-                  </div>
-                  
-                  <!-- 标题和作者 -->
-                  <div class="flex-1 min-w-0">
-                    <div class="flex items-center mb-1">
-                      <span class="topic-number">{{ topic.id }}</span>
-                      <span 
-                        v-if="topic.videoUrl" 
-                        @click="openVideo(topic, $event)" 
-                        class="flex-1 topic-title topic-title--clickable"
-                        :title="topic.title"
-                      >
-                        {{ truncateTitle(topic.title) }}
-                      </span>
-                      <span v-else class="flex-1 topic-title" :title="topic.title">
-                        {{ truncateTitle(topic.title) }}
-                      </span>
-                    </div>
-                    <!-- 作者信息 -->
-                    <div class="flex items-center gap-2 text-xs text-gray-500 topic-author">
-                      <img 
-                        v-if="topic.authorAvatar" 
-                        :src="topic.authorAvatar" 
-                        alt="作者头像" 
-                        class="author-avatar"
-                        @error="handleImageError"
-                      />
-                      <span>{{ topic.author }}</span>
-                    </div>
-                  </div>
+        <!-- 筛选器 -->
+        <div class="filters">
+          <div class="filter-item">
+            <label>排序</label>
+            <a-select v-model:value="searchParams.sort_type" size="small">
+              <a-select-option value="0">综合</a-select-option>
+              <a-select-option value="1">最热</a-select-option>
+              <a-select-option value="2">最新</a-select-option>
+            </a-select>
+          </div>
+          <div class="filter-item">
+            <label>时间</label>
+            <a-select v-model:value="searchParams.publish_time" size="small">
+              <a-select-option value="0">不限</a-select-option>
+              <a-select-option value="1">今天</a-select-option>
+              <a-select-option value="7">本周</a-select-option>
+              <a-select-option value="180">半年</a-select-option>
+            </a-select>
+          </div>
+          <div class="filter-item">
+            <label>时长</label>
+            <a-select v-model:value="searchParams.filter_duration" size="small">
+              <a-select-option value="0">不限</a-select-option>
+              <a-select-option value="0-1">&lt;1分钟</a-select-option>
+              <a-select-option value="1-5">1-5分钟</a-select-option>
+              <a-select-option value="5-10000">&gt;5分钟</a-select-option>
+            </a-select>
+          </div>
+        </div>
+      </div>
+
+      <!-- 结果列表 -->
+      <div class="results-section">
+        <!-- 空状态 -->
+        <div v-if="hotTopics.length === 0 && !isLoading" class="empty-state">
+          <div class="empty-visual">
+            <svg viewBox="0 0 80 80" fill="none">
+              <circle cx="35" cy="35" r="25" stroke="currentColor" stroke-width="2" opacity="0.3"/>
+              <path d="M55 55L70 70" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.5"/>
+              <circle cx="35" cy="35" r="10" fill="currentColor" opacity="0.1"/>
+            </svg>
+          </div>
+          <p class="empty-title">搜索热门内容</p>
+          <p class="empty-hint">输入关键词开始探索</p>
+        </div>
+
+        <!-- 加载状态 -->
+        <div v-else-if="isLoading" class="loading-state">
+          <div class="loading-spinner"></div>
+          <p>正在搜索...</p>
+        </div>
+
+        <!-- 结果列表 -->
+        <div v-else class="topic-list">
+          <article
+            v-for="topic in hotTopics"
+            :key="topic.id"
+            @click="handleCreate(topic)"
+            class="topic-card"
+            :class="{ active: selectedTopic === topic.id }"
+          >
+            <div class="topic-main">
+              <div class="topic-cover">
+                <img
+                  v-if="topic.cover"
+                  :src="topic.cover"
+                  alt=""
+                  @error="handleImageError"
+                />
+                <div v-else class="cover-placeholder">
+                  <svg viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M4 4h16a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2zm0 2v12h16V6H4zm6 2l5 4-5 4V8z"/>
+                  </svg>
                 </div>
-                <!-- 统计信息 -->
-                <div 
-                  v-if="topic.diggCount || topic.playCount || topic.commentCount || topic.collectCount || topic.shareCount" 
-                  class="flex flex-wrap items-center gap-4 text-xs text-gray-500 topic-stats"
+                <span class="topic-index">{{ topic.id }}</span>
+              </div>
+
+              <div class="topic-info">
+                <h3
+                  class="topic-title"
+                  @click.stop="openVideo(topic, $event)"
+                  :title="topic.title"
                 >
-                  <span v-if="topic.playCount" class="stat-item">
-                    <svg class="inline w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
-                      <path d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" />
-                    </svg>
-                    播放 {{ formatNumber(topic.playCount) }}
+                  {{ truncateTitle(topic.title) }}
+                </h3>
+                <div class="topic-meta">
+                  <img
+                    v-if="topic.authorAvatar"
+                    :src="topic.authorAvatar"
+                    alt=""
+                    class="author-avatar"
+                    @error="handleImageError"
+                  />
+                  <span class="author-name">{{ topic.author }}</span>
+                </div>
+                <div class="topic-stats">
+                  <span v-if="topic.playCount">
+                    <svg viewBox="0 0 20 20" fill="currentColor"><path d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"/></svg>
+                    {{ formatNumber(topic.playCount) }}
                   </span>
-                  <span v-if="topic.diggCount" class="stat-item">
-                    <svg class="inline w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
-                      <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.834a1 1 0 001.555.832L12 13.202a5 5 0 001.196-.599l.707-.707a1 1 0 00.293-.707V8.465a1 1 0 00-1.707-.707L12 8.465V5a2 2 0 00-2-2H7a1 1 0 000 2h3v3z" />
-                    </svg>
-                    点赞 {{ formatNumber(topic.diggCount) }}
+                  <span v-if="topic.diggCount">
+                    <svg viewBox="0 0 20 20" fill="currentColor"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.834a1 1 0 001.555.832L12 13.202a5 5 0 001.196-.599l.707-.707a1 1 0 00.293-.707V8.465a1 1 0 00-1.707-.707L12 8.465V5a2 2 0 00-2-2H7a1 1 0 000 2h3v3z"/></svg>
+                    {{ formatNumber(topic.diggCount) }}
                   </span>
-                  <span v-if="topic.commentCount" class="stat-item">
-                    <svg class="inline w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
-                      <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" />
-                    </svg>
-                    评论 {{ formatNumber(topic.commentCount) }}
-                  </span>
-                  <span v-if="topic.collectCount" class="stat-item">
-                    <svg class="inline w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
-                      <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
-                    </svg>
-                    收藏 {{ formatNumber(topic.collectCount) }}
-                  </span>
-                  <span v-if="topic.shareCount" class="stat-item">
-                    <svg class="inline w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
-                      <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z" />
-                    </svg>
-                    分享 {{ formatNumber(topic.shareCount) }}
+                  <span v-if="topic.commentCount">
+                    <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7z" clip-rule="evenodd"/></svg>
+                    {{ formatNumber(topic.commentCount) }}
                   </span>
                 </div>
               </div>
-              <GradientButton
-                text="创作"
-                size="small"
-                @click.stop="handleCreate(topic)"
-              />
             </div>
-          </div>
-          
-          <!-- Loading 指示器 -->
-          <div v-if="isLoading" class="loading-indicator">
-            <a-spin size="small" />
-            <span class="loading-text">搜索中...</span>
-          </div>
-        </div>
-      </section>
 
-      <!-- 右侧：创作详情 -->
-      <section class="fc-right">
-        <div class="fc-title">创作详情</div>
-
-        <div class="detail-content">
-          <!-- 热点标题 -->
-          <div>
-            <label class="form-label">热点标题</label>
-            <a-input
-              v-model:value="topicDetails.title"
-              placeholder="选择左侧热点或手动输入标题"
-            />
-          </div>
-
-          <!-- 文案 -->
-          <div>
-            <div class="form-label-wrapper">
-              <label class="form-label">文案</label>
-              <span v-if="isAnalyzing" class="analyzing-indicator">
-                <a-spin size="small" />
-                <span class="analyzing-text">正在分析语音...</span>
-              </span>
-            </div>
-            <a-textarea
-              v-model:value="topicDetails.copywriting"
-              :rows="5"
-              placeholder="输入或AI生成文案内容"
-              :disabled="isAnalyzing"
-            />
-          </div>
-
-          <!-- 风格提示词 -->
-          <div>
-            <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>
-
-          <!-- 生成文案按钮 -->
-          <div class="pt-2">
-            <button
-              class="w-full bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white py-3 rounded-lg font-bold shadow-lg shadow-indigo-500/30 transition flex items-center justify-center group"
-              style="color: white !important;"
-              :disabled="!topicDetails.copywriting?.trim() || !topicDetails.stylePromptId || isGenerating"
-              @click="handleGenerate"
-            >
-              <span v-if="isGenerating" class="flex items-center justify-center" style="color: white;">
-                <span class="spinner mr-2"></span>
-                <span>生成中...</span>
-              </span>
-              <span v-else class="flex items-center justify-center" style="color: white;">
-                <i class="fa-solid fa-wand-magic-sparkles mr-2 group-hover:rotate-12 transition" style="color: white;"></i>
-                <span>生成爆款</span>
-              </span>
+            <button class="create-btn" @click.stop="handleCreate(topic)">
+              创作
             </button>
-          </div>
-          
-          <!-- 生成的文案显示区域 -->
-          <div v-if="generatedContent" class="generated-content-section">
-            <div class="form-label">生成结果</div>
-            <div class="generated-content-wrapper">
-              <div class="generated-content-text">{{ generatedContent }}</div>
-            </div>
-          </div>
+          </article>
         </div>
-      </section>
-      
-    </div>
+      </div>
+    </section>
+
+    <!-- 右侧面板 -->
+    <section class="panel panel-right">
+      <header class="panel-header">
+        <h2 class="panel-title">创作详情</h2>
+        <p class="panel-subtitle">编辑内容并生成爆款文案</p>
+      </header>
+
+      <div class="editor-section">
+        <!-- 标题 -->
+        <div class="form-group">
+          <label class="form-label">标题</label>
+          <a-input
+            v-model:value="topicDetails.title"
+            placeholder="选择热点或输入标题"
+            class="form-input"
+          />
+        </div>
+
+        <!-- 文案 -->
+        <div class="form-group">
+          <div class="form-label-row">
+            <label class="form-label">文案</label>
+            <span v-if="isAnalyzing" class="analyzing-badge">
+              <span class="dot-pulse"></span>
+              分析中
+            </span>
+          </div>
+          <a-textarea
+            v-model:value="topicDetails.copywriting"
+            :rows="6"
+            placeholder="输入文案内容或从热点自动提取..."
+            :disabled="isAnalyzing"
+            class="form-textarea"
+          />
+        </div>
+
+        <!-- 风格选择 -->
+        <div class="form-group">
+          <label class="form-label">风格</label>
+          <PromptSelector
+            v-model="topicDetails.stylePromptId"
+            :prompts="allPrompts"
+            :loading="loadingPrompts"
+            :search-keyword="promptSearchKeyword"
+            @change="handlePromptChange"
+            @update:searchKeyword="promptSearchKeyword = $event"
+          />
+        </div>
+
+        <!-- 生成按钮 -->
+        <button
+          class="generate-btn"
+          :class="{ generating: isGenerating }"
+          :disabled="!topicDetails.copywriting?.trim() || !topicDetails.stylePromptId || isGenerating"
+          @click="handleGenerate"
+        >
+          <span v-if="isGenerating" class="btn-loading">
+            <span class="spinner"></span>
+            生成中...
+          </span>
+          <span v-else class="btn-content">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+            </svg>
+            生成爆款
+          </span>
+        </button>
+
+        <!-- 生成结果 -->
+        <Transition name="fade">
+          <div v-if="generatedContent" class="result-section">
+            <div class="result-header">
+              <span class="result-label">生成结果</span>
+              <button
+                class="copy-btn"
+                @click="navigator.clipboard.writeText(generatedContent); message.success('已复制')"
+              >
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <rect x="9" y="9" width="13" height="13" rx="2"/>
+                  <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
+                </svg>
+                复制
+              </button>
+            </div>
+            <div class="result-content">{{ generatedContent }}</div>
+          </div>
+        </Transition>
+      </div>
+    </section>
   </div>
 </template>
 
-<style scoped>
-.fc-page {
-  color: var(--color-text);
-}
+<style scoped lang="less">
+// 变量定义
+@primary-color: #00b030;
+@primary: var(--color-primary, @primary-color);
+@primary-hover: var(--color-primary-hover, #00c838);
+@bg: var(--color-bg, #0a0a0a);
+@surface: var(--color-surface, #141414);
+@border: var(--color-border, rgba(255, 255, 255, 0.08));
+@text: var(--color-text, rgba(255, 255, 255, 0.9));
+@text-secondary: var(--color-text-secondary, rgba(255, 255, 255, 0.5));
+@radius: 12px;
+@radius-sm: 8px;
 
-.fc-grid {
+// 主容器
+.forecast-page {
   display: grid;
-  grid-template-columns: 1fr;
-  gap: 16px;
-}
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  min-height: 100%;
+  padding: 20px;
+  color: @text;
 
-@media (min-width: 1024px) {
-  .fc-grid {
-    grid-template-columns: 1fr 1fr;
+  @media (max-width: 1024px) {
+    grid-template-columns: 1fr;
   }
 }
 
-.fc-left,
-.fc-right {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-card);
-  box-shadow: var(--shadow-inset-card);
-  padding: 16px;
-}
-
-.fc-title {
-  font-size: 14px;
-  color: var(--color-text-secondary);
-  margin-bottom: 8px;
-}
-
-/* 搜索框 */
-.search-box {
-  margin-bottom: 12px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.search-params {
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid var(--color-border);
-}
-
-.param-row {
+// 面板通用样式
+.panel {
+  background: @surface;
+  border: 1px solid @border;
+  border-radius: @radius;
   display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
+  flex-direction: column;
+  overflow: hidden;
+  transition: border-color 0.2s;
+
+  &:hover {
+    border-color: rgba(255, 255, 255, 0.12);
+  }
 }
 
-.param-item {
-  flex: 1;
-  min-width: 120px;
+.panel-header {
+  padding: 20px 24px 16px;
+  border-bottom: 1px solid @border;
 }
 
-.param-label {
-  display: block;
-  font-size: 14px;
-  color: var(--color-text-secondary);
-  margin-bottom: var(--space-1);
+.panel-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0 0 4px;
+  letter-spacing: -0.01em;
 }
 
-.param-select {
-  width: 100%;
-  font-size: 14px;
+.panel-subtitle {
+  font-size: 13px;
+  color: @text-secondary;
+  margin: 0;
 }
 
+// 搜索区域
+.search-section {
+  padding: 16px 24px;
+  border-bottom: 1px solid @border;
+}
 
-.search-input-wrapper {
+.search-input-group {
   display: flex;
-  gap: 8px;
+  gap: 10px;
+  position: relative;
+}
+
+.search-icon {
+  position: absolute;
+  left: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 18px;
+  height: 18px;
+  color: @text-secondary;
+  pointer-events: none;
 }
 
 .search-input {
   flex: 1;
-  padding: 8px 12px;
+  height: 44px;
+  padding: 0 16px 0 44px;
   font-size: 14px;
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
+  color: @text;
+  background: @bg;
+  border: 1px solid @border;
+  border-radius: @radius-sm;
   transition: all 0.2s;
-}
 
-.search-input:focus {
-  outline: none;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(0, 176, 48, 0.1);
-}
+  &::placeholder {
+    color: @text-secondary;
+  }
 
-.search-input:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
+  &:focus {
+    outline: none;
+    border-color: @primary;
+    box-shadow: 0 0 0 3px fade(@primary-color, 15%);
+  }
 
-.search-input::placeholder {
-  color: var(--color-text-secondary);
-  opacity: 0.6;
+  &:disabled {
+    opacity: 0.6;
+  }
 }
 
 .search-btn {
-  padding: 8px 16px;
-  background: var(--color-primary);
-  color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s;
-  min-width: 48px;
-}
-
-.search-btn:hover:not(:disabled) {
-  background: var(--color-primary);
-  filter: brightness(1.1);
-  transform: scale(1.05);
-}
-
-.search-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  transform: none;
-}
-
-/* Loading 指示器 */
-.loading-indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 16px;
-  color: var(--color-text-secondary);
-}
-
-.loading-text {
+  padding: 0 20px;
+  height: 44px;
   font-size: 14px;
+  font-weight: 500;
+  color: #fff;
+  background: @primary;
+  border: none;
+  border-radius: @radius-sm;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover:not(:disabled) {
+    background: @primary-hover;
+    transform: translateY(-1px);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+  }
 }
 
-/* 热点列表 */
-.topic-list {
-  max-height: 500px;
+// 筛选器
+.filters {
+  display: flex;
+  gap: 16px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid @border;
+}
+
+.filter-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  label {
+    font-size: 12px;
+    color: @text-secondary;
+  }
+
+  :deep(.ant-select) {
+    width: 100px;
+
+    .ant-select-selector {
+      background: @bg !important;
+      border-color: @border !important;
+      border-radius: 6px !important;
+      height: 28px !important;
+
+      .ant-select-selection-item {
+        color: @text !important;
+        font-size: 12px !important;
+        line-height: 26px !important;
+      }
+    }
+  }
+}
+
+// 结果区域
+.results-section {
+  flex: 1;
   overflow-y: auto;
+  padding: 12px;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: @border;
+    border-radius: 3px;
+  }
 }
 
-.topic-list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.topic-list::-webkit-scrollbar-track {
-  background: var(--color-bg);
-  border-radius: 10px;
-}
-
-.topic-list::-webkit-scrollbar-thumb {
-  background: var(--color-border);
-  border-radius: 10px;
-}
-
-.topic-list::-webkit-scrollbar-thumb:hover {
-  background: var(--color-text-secondary);
-}
-
-/* 空状态 */
+// 空状态
 .empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 80px 20px;
+  padding: 60px 20px;
   text-align: center;
 }
 
-.empty-icon {
+.empty-visual {
   width: 80px;
   height: 80px;
-  color: var(--color-text-secondary);
-  opacity: 0.4;
   margin-bottom: 16px;
+  color: @text-secondary;
+  opacity: 0.4;
 }
 
-.empty-text {
-  font-size: 16px;
+.empty-title {
+  font-size: 15px;
   font-weight: 500;
-  color: var(--color-text);
-  margin-bottom: 8px;
+  color: @text;
+  margin: 0 0 6px;
 }
 
 .empty-hint {
-  font-size: 14px;
-  color: var(--color-text-secondary);
-  opacity: 0.6;
+  font-size: 13px;
+  color: @text-secondary;
+  margin: 0;
 }
 
-/* 热点项 */
-.topic-item {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  padding: 12px;
-  margin-bottom: 8px;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.15s;
-  border: 1px solid transparent;
-}
-
-.topic-item:hover {
-  background: var(--color-bg);
-}
-
-.topic-item--selected {
-  background: var(--color-bg);
-  border-color: var(--color-primary);
-}
-
-.topic-number {
-  flex-shrink: 0;
-  margin-right: 12px;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--color-text-secondary);
-}
-
-.topic-title {
-  font-size: 14px;
-  color: var(--color-text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 100%;
-}
-
-.topic-title--clickable {
-  cursor: pointer;
-  color: var(--color-primary);
-  transition: all 0.2s;
-}
-
-.topic-title--clickable:hover {
-  text-decoration: underline;
-  color: var(--color-primary-hover);
-  opacity: 0.8;
-}
-
-/* 封面图片 */
-.topic-cover-wrapper {
-  flex-shrink: 0;
-  width: 80px;
-  height: 45px;
-  border-radius: 4px;
-  overflow: hidden;
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-}
-
-.topic-cover {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.topic-cover-placeholder {
-  width: 100%;
-  height: 100%;
+// 加载状态
+.loading-state {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  color: var(--color-text-secondary);
-  opacity: 0.4;
+  padding: 60px 20px;
+  color: @text-secondary;
+
+  p {
+    margin: 12px 0 0;
+    font-size: 14px;
+  }
 }
 
-/* 作者信息 */
-.topic-author {
-  padding-left: 32px;
-  margin-top: 4px;
-}
-
-.author-avatar {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  object-fit: cover;
-  flex-shrink: 0;
-}
-
-/* 统计信息 */
-.topic-stats {
-  padding-left: 32px;
-  margin-top: 4px;
-}
-
-.stat-item {
-  display: inline-flex;
-  align-items: center;
-  color: var(--color-text-secondary);
-}
-
-.stat-item svg {
-  width: 12px;
-  height: 12px;
-  vertical-align: middle;
-}
-
-/* 详情内容 */
-.detail-content {
-  color: var(--color-text);
-}
-
-.form-label {
-  display: block;
-  margin-bottom: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--color-text);
-}
-
-.form-input,
-.form-textarea {
-  width: 100%;
-  padding: 8px 12px;
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  transition: all 0.2s;
-  font-size: 14px;
-  font-family: inherit;
-}
-
-.form-input::placeholder,
-.form-textarea::placeholder {
-  color: var(--color-text-secondary);
-  opacity: 0.6;
-}
-
-.form-input:focus,
-.form-textarea:focus {
-  outline: none;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(0, 176, 48, 0.1);
-}
-
-.form-textarea {
-  resize: none;
-}
-
-.form-label-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 8px;
-}
-
-/* 提示词标签样式 */
-.prompt-tags-container {
-  margin-bottom: 12px;
-}
-
-.prompt-tags-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.prompt-tag {
-  display: inline-flex;
-  align-items: center;
-  padding: 6px 14px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: 16px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--color-text);
-}
-
-.prompt-tag:hover {
-  border-color: var(--color-primary);
-  background: rgba(24, 144, 255, 0.08);
-  transform: translateY(-1px);
-}
-
-.prompt-tag-selected {
-  border-color: var(--color-primary);
-  background: var(--color-primary);
-  color: #fff;
-}
-
-.prompt-tag-selected:hover {
-  background: var(--color-primary);
-  filter: brightness(1.1);
-}
-
-.prompt-tag-name {
-  white-space: nowrap;
-  user-select: none;
-}
-
-.prompt-empty {
-  padding: 20px;
-  text-align: center;
-}
-
-.prompt-loading {
-  display: flex;
-  justify-content: center;
-  padding: 20px;
-}
-
-/* 生成结果区域 */
-.generated-content-section {
-  margin-top: 24px;
-  padding-top: 24px;
-  border-top: 1px solid var(--color-border);
-}
-
-.generated-content-wrapper {
-  margin-top: 12px;
-  padding: 16px;
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.generated-content-text {
-  color: var(--color-text);
-  font-size: 14px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-
-/* 更多提示词弹窗样式 */
-.prompt-modal-content {
-  max-height: 500px;
-  overflow-y: auto;
-}
-
-.all-prompts-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.all-prompt-tag {
-  display: inline-flex;
-  align-items: center;
-  padding: 8px 16px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: 16px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--color-text);
-}
-
-.all-prompt-tag:hover {
-  border-color: var(--color-primary);
-  background: rgba(24, 144, 255, 0.08);
-  transform: translateY(-1px);
-}
-
-.all-prompt-tag-selected {
-  border-color: var(--color-primary);
-  background: var(--color-primary);
-  color: #fff;
-}
-
-.all-prompt-tag-selected:hover {
-  background: var(--color-primary);
-  filter: brightness(1.1);
-}
-
-.all-prompt-tag-name {
-  white-space: nowrap;
-  user-select: none;
-}
-
-
-/* 语音分析loading指示器 */
-.analyzing-indicator {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 14px;
-  color: var(--color-primary);
-}
-
-.analyzing-text {
-  color: var(--color-primary);
-}
-
-/* 按钮加载动画 */
-.spinner {
-  width: 16px;
-  height: 16px;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  border-top-color: white;
+.loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 2px solid @border;
+  border-top-color: @primary;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 }
 
 @keyframes spin {
-  to {
-    transform: rotate(360deg);
+  to { transform: rotate(360deg); }
+}
+
+// 热点卡片
+.topic-card {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px;
+  margin-bottom: 8px;
+  background: @bg;
+  border: 1px solid transparent;
+  border-radius: @radius-sm;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    border-color: @border;
+    transform: translateX(4px);
+  }
+
+  &.active {
+    border-color: @primary;
+    background: fade(@primary-color, 5%);
   }
 }
+
+.topic-main {
+  display: flex;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+}
+
+.topic-cover {
+  position: relative;
+  flex-shrink: 0;
+  width: 100px;
+  height: 56px;
+  background: @surface;
+  border-radius: 6px;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .cover-placeholder {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: @text-secondary;
+    opacity: 0.3;
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
+
+.topic-index {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  font-size: 10px;
+  font-weight: 600;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.topic-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.topic-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: @text;
+  margin: 0;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  cursor: pointer;
+  transition: color 0.2s;
+
+  &:hover {
+    color: @primary;
+  }
+}
+
+.topic-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.author-avatar {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.author-name {
+  font-size: 11px;
+  color: @text-secondary;
+}
+
+.topic-stats {
+  display: flex;
+  gap: 10px;
+
+  span {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    font-size: 11px;
+    color: @text-secondary;
+
+    svg {
+      width: 12px;
+      height: 12px;
+      opacity: 0.7;
+    }
+  }
+}
+
+.create-btn {
+  flex-shrink: 0;
+  padding: 6px 14px;
+  font-size: 12px;
+  font-weight: 500;
+  color: @primary;
+  background: transparent;
+  border: 1px solid @primary;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    color: #fff;
+    background: @primary;
+  }
+}
+
+// 编辑区域
+.editor-section {
+  flex: 1;
+  padding: 20px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  overflow-y: auto;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-label-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.form-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: @text-secondary;
+}
+
+.form-input,
+.form-textarea {
+  :deep(.ant-input) {
+    background: @bg !important;
+    border-color: @border !important;
+    color: @text !important;
+    border-radius: @radius-sm !important;
+
+    &::placeholder {
+      color: @text-secondary !important;
+    }
+
+    &:focus {
+      border-color: @primary !important;
+      box-shadow: 0 0 0 2px fade(@primary-color, 15%) !important;
+    }
+  }
+}
+
+.analyzing-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: @primary;
+}
+
+.dot-pulse {
+  width: 6px;
+  height: 6px;
+  background: @primary;
+  border-radius: 50%;
+  animation: pulse 1s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(0.8); }
+}
+
+// 生成按钮
+.generate-btn {
+  width: 100%;
+  height: 48px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #fff;
+  background: linear-gradient(135deg, @primary 0%, darken(@primary-color, 10%) 100%);
+  border: none;
+  border-radius: @radius-sm;
+  cursor: pointer;
+  transition: all 0.25s;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
+    opacity: 0;
+    transition: opacity 0.25s;
+  }
+
+  &:hover:not(:disabled)::before {
+    opacity: 1;
+  }
+
+  &:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px fade(@primary-color, 30%);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+  }
+
+  &.generating {
+    background: linear-gradient(135deg, @primary 0%, @primary 100%);
+  }
+}
+
+.btn-content,
+.btn-loading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+}
+
+.spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255,255,255,0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+// 结果区域
+.result-section {
+  padding-top: 16px;
+  border-top: 1px solid @border;
+}
+
+.result-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.result-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: @text-secondary;
+}
+
+.copy-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  font-size: 12px;
+  color: @text-secondary;
+  background: transparent;
+  border: 1px solid @border;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  &:hover {
+    color: @text;
+    border-color: @text-secondary;
+  }
+}
+
+.result-content {
+  padding: 16px;
+  font-size: 14px;
+  line-height: 1.7;
+  color: @text;
+  background: @bg;
+  border-radius: @radius-sm;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+// 过渡动画
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
 </style>