提示词保存

2025-11-13 01:06:28 +08:00
parent fc7d2ccea5
commit c652d0ddf3
49 changed files with 4072 additions and 2452 deletions
--- a/frontend/app/web-gold/src/views/content-style/Benchmark.vue
+++ b/frontend/app/web-gold/src/views/content-style/Benchmark.vue
--- a/frontend/app/web-gold/src/views/content-style/Copywriting.vue
+++ b/frontend/app/web-gold/src/views/content-style/Copywriting.vue
@@ -1,13 +1,16 @@
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed, watch } from 'vue'
 import { usePromptStore } from '@/stores/prompt'
 import MarkdownIt from 'markdown-it'
 import { message } from 'ant-design-vue'
 import { CommonService } from '@/api/common'
 import useVoiceText from '@gold/hooks/web/useVoiceText'
 import GmIcon from '@/components/icons/Icon.vue'
+import { UserPromptApi } from '@/api/userPrompt'
+import { useUserStore } from '@/stores/user'

 const promptStore = usePromptStore()
+const userStore = useUserStore()
 const md = new MarkdownIt()

 // 表单数据（合并为单一输入）
@@ -29,11 +32,171 @@ const originalContent = ref('')
 const isLoading = ref(false)
 const { getVoiceText } = useVoiceText()

-// 页面加载时，如果有提示词则自动填充
-onMounted(() => {
+// 提示词相关状态
+const allPrompts = ref([])
+const loadingPrompts = ref(false)
+const showAllPromptsModal = ref(false)
+const selectedPromptId = ref(null)
+const promptSearchKeyword = ref('')
+const DISPLAY_COUNT = 6 // 展示的提示词数量
+
+// 计算属性：展示的部分提示词
+const displayPrompts = computed(() => {
+  return 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))
+  )
+})
+
+/**
+ * 加载用户提示词列表
+ * 从服务器获取当前用户的提示词，并按创建时间倒序排列
+ */
+async function loadUserPrompts() {
+  const userId = Number(userStore.userId)
+  if (!userId) {
+    console.warn('无法获取用户ID，跳过加载提示词')
+    return
+  }
+  
+  loadingPrompts.value = true
+  try {
+    const response = await UserPromptApi.getUserPromptPage({
+      userId: userId,
+      status: 1, // 只加载启用的提示词
+      pageNo: 1,
+      pageSize: 100, // 加载前100个
+    })
+    
+    if (response && (response.code === 0 || response.code === 200)) {
+      const list = response.data?.list || []
+      // 按创建时间倒序排列（最新的在前）
+      allPrompts.value = list.sort((a, b) => {
+        const timeA = a.createTime ? new Date(a.createTime).getTime() : 0
+        const timeB = b.createTime ? new Date(b.createTime).getTime() : 0
+        return timeB - timeA
+      })
+      
+      // 如果用户没有选择提示词，默认选中第一个
+      autoSelectFirstPromptIfNeeded()
+    } else {
+      throw new Error(response?.msg || response?.message || '加载失败')
+    }
+  } catch (error) {
+    console.error('加载提示词列表失败:', error)
+    // 不显示错误提示，避免影响用户体验
+  } finally {
+    loadingPrompts.value = false
+  }
+}
+
+/**
+ * 自动选中第一个提示词（如果用户还没有选择）
+ */
+function autoSelectFirstPromptIfNeeded() {
+  const hasPrompts = allPrompts.value.length > 0
+  const hasNoSelection = !selectedPromptId.value && !form.value.prompt
+  
+  if (hasPrompts && hasNoSelection) {
+    const firstPrompt = allPrompts.value[0]
+    if (firstPrompt?.content) {
+      selectedPromptId.value = firstPrompt.id
+      form.value.prompt = firstPrompt.content
+      promptStore.setPrompt(firstPrompt.content, firstPrompt)
+    }
+  }
+}
+
+// 选择提示词
+function selectPrompt(prompt) {
+  if (!prompt || !prompt.content) {
+    message.warning('提示词内容为空')
+    return
+  }
+  
+  selectedPromptId.value = prompt.id
+  form.value.prompt = prompt.content
+  promptStore.setPrompt(prompt.content, prompt)
+  showAllPromptsModal.value = false
+}
+
+
+/**
+ * 等待用户信息初始化完成
+ * @returns {Promise<void>}
+ */
+async function waitForUserInfo() {
+  // 等待 store 从本地存储恢复完成（最多等待 500ms）
+  let waitCount = 0
+  const maxWait = 50 // 50 * 10ms = 500ms
+  while (!userStore.isHydrated && waitCount < maxWait) {
+    await new Promise(resolve => setTimeout(resolve, 10))
+    waitCount++
+  }
+}
+
+/**
+ * 确保用户信息已加载
+ * 如果已登录但 userId 为空，则从服务器获取用户信息
+ */
+async function ensureUserInfoLoaded() {
+  const isLoggedIn = userStore.isLoggedIn
+  const hasNoUserId = !userStore.userId
+  
+  if (isLoggedIn && hasNoUserId) {
+    try {
+      await userStore.fetchUserInfo()
+    } catch (error) {
+      console.error('获取用户信息失败:', error)
+    }
+  }
+}
+
+/**
+ * 初始化页面数据
+ * 1. 恢复之前保存的提示词（如果有）
+ * 2. 等待用户信息初始化
+ * 3. 确保用户信息已加载
+ * 4. 加载提示词列表
+ */
+async function initializePage() {
+  // 1. 恢复之前保存的提示词
  if (promptStore.currentPrompt) {
    form.value.prompt = promptStore.currentPrompt
  }
+  
+  // 2. 等待用户信息初始化完成
+  await waitForUserInfo()
+  
+  // 3. 确保用户信息已加载
+  await ensureUserInfoLoaded()
+  
+  // 4. 加载提示词列表
+  await loadUserPrompts()
+}
+
+// 页面加载时初始化
+onMounted(() => {
+  initializePage()
+})
+
+// 监听 userId 变化：如果之前没有 userId，现在有了，则自动加载提示词
+watch(() => userStore.userId, async (newUserId, oldUserId) => {
+  const userIdChanged = newUserId && !oldUserId
+  const hasNoPrompts = allPrompts.value.length === 0
+  
+  if (userIdChanged && hasNoPrompts) {
+    await loadUserPrompts()
+  }
 })

 // 生成文案（流式）
@@ -45,6 +208,17 @@ async function generateCopywriting() {
    return
  }
  
+  // 检查是否选择了提示词风格
+  if (!form.value.prompt || !form.value.prompt.trim()) {
+    message.warning('请先选择提示词风格')
+    return
+  }
+  
+  if (!selectedPromptId.value) {
+    message.warning('请先选择提示词风格')
+    return
+  }
+  
  isLoading.value = true
  generatedContent.value = '' // 清空之前的内容
  
@@ -244,21 +418,54 @@ defineOptions({ name: 'ContentStyleCopywriting' })
              <a-form :model="form" layout="vertical" class="form-container">
                <a-form-item class="form-item">
                  <template #label>
-                    基础提示词
-                    <span class="form-tip-inline">从视频分析提取的提示词，将作为文案生成的基础参考</span>
+                    <div style="display: flex; justify-content: space-between; align-items: center;">
+                      <span>
+                        选择提示词风格
+                        <span class="form-tip-inline">从已保存的提示词中选择</span>
+                      </span>
+                      <a-space>
+                        <a-button 
+                          size="small" 
+                          type="link" 
+                          @click="showAllPromptsModal = true"
+                          :disabled="allPrompts.length === 0">
+                          更多 ({{ allPrompts.length }})
+                        </a-button>
+                      </a-space>
+                    </div>
                  </template>
-                  <a-textarea 
-                    v-model:value="form.prompt"
-                    placeholder="这里显示从视频分析中提取的创作提示词，将作为文案生成的基础参考"
-                    :auto-size="{ minRows: 6, maxRows: 12 }"
-                    class="custom-textarea"
-                  />
+                  
+                  <!-- 提示词标签展示区域 -->
+                  <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': selectedPromptId === 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: 12px; text-align: center; padding: 20px;">
+                      您可以在视频分析页面保存风格
+                    </div>
+                  </div>
+                  
+                  <!-- 加载状态 -->
+                  <div v-else class="prompt-loading">
+                    <a-spin size="small" />
+                  </div>
                </a-form-item>
                
                <!-- 统一输入：文本或视频链接 -->
                <a-form-item class="form-item">
                  <template #label>
-                    输入内容/视频链接
+                    输入内容
                    <span class="form-tip-inline">输入要生成的主题/段落，或粘贴视频链接以自动转写</span>
                  </template>
                  <a-textarea 
@@ -296,7 +503,7 @@ defineOptions({ name: 'ContentStyleCopywriting' })
                  <a-button 
                    type="primary" 
                    @click="generateCopywriting" 
-                    :disabled="!getCurrentInputValue() || isLoading"
+                    :disabled="!getCurrentInputValue() || !selectedPromptId || isLoading"
                    :loading="isLoading"
                    block
                    size="large"
@@ -361,20 +568,67 @@ defineOptions({ name: 'ContentStyleCopywriting' })
                <div v-else class="generated-content" v-html="md.render(generatedContent)"></div>
              </div>
              
-              <a-empty v-else class="custom-empty">
-                <template #description>
-                  <div class="empty-description">
-                    <div class="empty-icon"><GmIcon name="icon-empty-doc" :size="36" /></div>
-                    <div class="empty-title">等待生成文案</div>
-                    <div class="empty-desc">请选择内容类型并填写相关信息，然后点击"生成文案"按钮</div>
-                  </div>
-                </template>
-              </a-empty>
+              <div v-else class="custom-empty">
+                <div class="empty-description">
+                  <div class="empty-icon"><GmIcon name="icon-empty-doc" :size="36" /></div>
+                  <div class="empty-title">等待生成文案</div>
+                  <div class="empty-desc">请选择内容类型并填写相关信息，然后点击"生成文案"按钮</div>
+                </div>
+              </div>
            </a-card>
          </div>
        </a-col>
      </a-row>
    </div>
+    
+    <!-- 更多提示词弹窗 -->
+    <a-modal
+      v-model:open="showAllPromptsModal"
+      title="选择提示词"
+      :width="800"
+      :maskClosable="false">
+      <div class="all-prompts-modal">
+        <!-- 搜索框 -->
+        <a-input
+          v-model:value="promptSearchKeyword"
+          placeholder="搜索提示词名称或内容..."
+          allow-clear
+          style="margin-bottom: 16px;">
+          <template #prefix>
+            <GmIcon name="icon-search" :size="16" />
+          </template>
+        </a-input>
+        
+        <!-- 提示词列表（标签形式） -->
+        <div v-if="filteredPrompts.length > 0" class="all-prompts-tags">
+          <div
+            v-for="prompt in filteredPrompts"
+            :key="prompt.id"
+            class="all-prompt-tag"
+            :class="{ 'all-prompt-tag-selected': selectedPromptId === 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>
+      
+      <template #footer>
+        <a-space>
+          <a-button @click="showAllPromptsModal = false">取消</a-button>
+          <a-button 
+            type="primary" 
+            @click="loadUserPrompts"
+            :loading="loadingPrompts">
+            刷新列表
+          </a-button>
+        </a-space>
+      </template>
+    </a-modal>
  </div>
 </template>

@@ -848,6 +1102,111 @@ defineOptions({ name: 'ContentStyleCopywriting' })
  color: #e3e6ea;
 }

+/* 提示词标签样式 */
+.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: 13px;
+  font-weight: 500;
+  color: var(--color-text);
+}
+
+.prompt-tag:hover {
+  border-color: var(--color-primary);
+  background: rgba(22, 119, 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 {
+  padding: 20px;
+  text-align: center;
+}
+
+/* 更多提示词弹窗样式 */
+.all-prompts-modal {
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.all-prompts-tags {
+  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(22, 119, 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;
+}
+
 /* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
@@ -898,6 +1257,15 @@ defineOptions({ name: 'ContentStyleCopywriting' })
    padding: 14px;
    font-size: 15px;
  }
+  
+  .prompt-tags-grid {
+    gap: 6px;
+  }
+  
+  .prompt-tag {
+    font-size: 12px;
+    padding: 5px 12px;
+  }
 }
 </style>

--- a/frontend/app/web-gold/src/views/content-style/components/BatchAnalyzeModal.vue
+++ b/frontend/app/web-gold/src/views/content-style/components/BatchAnalyzeModal.vue
@@ -0,0 +1,242 @@
+<script setup>
+import { ref, watch } from 'vue'
+import { EditOutlined, CopyOutlined } from '@ant-design/icons-vue'
+import { message } from 'ant-design-vue'
+import ChatMessageRenderer from '@/components/ChatMessageRenderer.vue'
+import { ChatMessageApi } from '@/api/chat'
+import { streamChat } from '@/utils/streamChat'
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  mergedText: {
+    type: String,
+    default: '',
+  },
+  textCount: {
+    type: Number,
+    default: 0,
+  },
+})
+
+const emit = defineEmits(['update:visible', 'copy', 'save', 'use'])
+
+const batchPrompt = ref('')
+const batchPromptEditMode = ref(false)
+const batchPromptGenerating = ref(false)
+const hasGenerated = ref(false)
+
+watch(() => props.visible, (newVal) => {
+  if (newVal && props.mergedText && !hasGenerated.value) {
+    generateBatchPrompt()
+  } else if (!newVal) {
+    batchPrompt.value = ''
+    batchPromptEditMode.value = false
+    batchPromptGenerating.value = false
+    hasGenerated.value = false
+  }
+})
+
+watch(() => props.mergedText, (newVal) => {
+  if (props.visible && newVal && !hasGenerated.value) {
+    generateBatchPrompt()
+  }
+})
+
+async function generateBatchPrompt() {
+  if (!props.mergedText || hasGenerated.value) return
+  
+  hasGenerated.value = true
+  try {
+    batchPromptGenerating.value = true
+    const createPayload = { roleId: 20 }
+    console.debug('createChatConversationMy payload(batch):', createPayload)
+    const conversationResp = await ChatMessageApi.createChatConversationMy(createPayload)
+    
+    let conversationId = null
+    if (conversationResp?.data) {
+      conversationId = typeof conversationResp.data === 'object' ? conversationResp.data.id : conversationResp.data
+    }
+    
+    if (!conversationId) {
+      throw new Error('创建对话失败：未获取到 conversationId')
+    }
+    
+    const aiContent = await streamChat({
+      conversationId,
+      content: props.mergedText,
+      onUpdate: (fullText) => {
+        batchPrompt.value = fullText
+      },
+      enableTypewriter: true,
+      typewriterSpeed: 10,
+      typewriterBatchSize: 2
+    })
+
+    if (aiContent && aiContent !== batchPrompt.value) {
+      batchPrompt.value = aiContent
+    }
+    
+    message.success(`批量分析完成：已基于 ${props.textCount} 个视频的文案生成综合提示词`)
+  } catch (aiError) {
+    console.error('AI生成失败:', aiError)
+    message.error('AI生成失败，请稍后重试')
+  } finally {
+    batchPromptGenerating.value = false
+  }
+}
+
+function handleClose() {
+  emit('update:visible', false)
+}
+
+function handleCopy() {
+  emit('copy', batchPrompt.value)
+}
+
+function handleSave() {
+  emit('save', batchPrompt.value)
+}
+
+function handleUse() {
+  emit('use', batchPrompt.value)
+}
+</script>
+
+<template>
+  <a-modal
+    :open="visible"
+    title="综合分析结果"
+    :width="800"
+    :maskClosable="false"
+    :keyboard="false"
+    @cancel="handleClose">
+    <div class="batch-prompt-modal">
+      <div v-if="!batchPromptEditMode" class="batch-prompt-display">
+        <ChatMessageRenderer 
+          :content="batchPrompt"
+          :is-streaming="batchPromptGenerating"
+        />
+      </div>
+      <a-textarea 
+        v-else
+        v-model:value="batchPrompt" 
+        :rows="15" 
+        placeholder="内容将在这里显示..." />
+    </div>
+    
+    <template #footer>
+      <a-space>
+        <a-button size="small" :title="batchPromptEditMode ? '取消编辑' : '编辑'" @click="batchPromptEditMode = !batchPromptEditMode">
+          <template #icon>
+            <EditOutlined />
+          </template>
+        </a-button>
+        <a-button size="small" title="复制" @click="handleCopy">
+          <template #icon>
+            <CopyOutlined />
+          </template>
+        </a-button>
+        <a-button size="small" title="保存提示词" @click="handleSave" :disabled="!batchPrompt.trim()">
+          保存提示词
+        </a-button>
+        <a-button @click="handleClose">取消</a-button>
+        <a-button 
+          type="primary" 
+          :disabled="batchPromptGenerating || !batchPrompt.trim()"
+          @click="handleUse">去创作</a-button>
+      </a-space>
+    </template>
+  </a-modal>
+</template>
+
+<style scoped>
+.batch-prompt-modal {
+  min-height: 200px;
+}
+
+.batch-prompt-display {
+  min-height: 300px;
+  max-height: 500px;
+  overflow-y: auto;
+  padding: 12px;
+  background: #0d0d0d;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  line-height: 1.6;
+}
+
+.batch-prompt-display :deep(h1) {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 12px 0;
+  color: var(--color-text);
+}
+
+.batch-prompt-display :deep(h2) {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 16px 0 8px 0;
+  color: var(--color-text);
+}
+
+.batch-prompt-display :deep(h3) {
+  font-size: 14px;
+  font-weight: 600;
+  margin: 12px 0 6px 0;
+  color: var(--color-text-secondary);
+}
+
+.batch-prompt-display :deep(p) {
+  margin: 8px 0;
+  color: var(--color-text-secondary);
+}
+
+.batch-prompt-display :deep(ul),
+.batch-prompt-display :deep(ol) {
+  margin: 8px 0;
+  padding-left: 20px;
+}
+
+.batch-prompt-display :deep(li) {
+  margin: 4px 0;
+  color: var(--color-text-secondary);
+}
+
+.batch-prompt-display :deep(strong) {
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.batch-prompt-display :deep(code) {
+  background: #1a1a1a;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: 'Courier New', monospace;
+  font-size: 12px;
+  color: #e11d48;
+}
+
+.batch-prompt-display :deep(pre) {
+  background: #1a1a1a;
+  padding: 12px;
+  border-radius: 6px;
+  overflow-x: auto;
+  margin: 8px 0;
+}
+
+.batch-prompt-display :deep(pre code) {
+  background: transparent;
+  padding: 0;
+}
+
+.batch-prompt-display :deep(blockquote) {
+  border-left: 3px solid var(--color-primary);
+  padding-left: 12px;
+  margin: 8px 0;
+  color: var(--color-text-secondary);
+}
+</style>
+
--- a/frontend/app/web-gold/src/views/content-style/components/BenchmarkForm.vue
+++ b/frontend/app/web-gold/src/views/content-style/components/BenchmarkForm.vue
@@ -0,0 +1,126 @@
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['update:modelValue', 'analyze', 'reset'])
+
+const form = ref({ ...props.modelValue })
+
+function handleAnalyze() {
+  emit('update:modelValue', { ...form.value })
+  emit('analyze')
+}
+
+function handleReset() {
+  form.value = { platform: '抖音', url: '', count: 20, sort_type: 0 }
+  emit('update:modelValue', { ...form.value })
+  emit('reset')
+}
+</script>
+
+<template>
+  <section class="card">
+    <a-form :model="form" layout="vertical">
+      <a-form-item label="平台">
+        <a-radio-group v-model:value="form.platform" button-style="solid">
+          <a-radio-button value="抖音">抖音</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="主页/视频链接">
+        <a-input
+          v-model:value="form.url"
+          placeholder="粘贴抖音主页或视频链接，或点击下方示例试一试"
+          allow-clear
+          size="large"
+        />
+      </a-form-item>
+      <a-form-item label="最大数量（建议保持默认值20）">
+        <div class="slider-row">
+          <a-slider v-model:value="form.count" :min="1" :max="100" :tooltip-open="true" style="flex:1" />
+          <a-input-number v-model:value="form.count" :min="1" :max="100" style="width:96px; margin-left:12px;" />
+        </div>
+        <div class="form-hint">数量越大越全面，但分析时间更长；建议 20–30。</div>
+      </a-form-item>
+      <a-space>
+        <a-button type="primary" :loading="loading" @click="handleAnalyze">
+          {{ loading ? '分析中…' : '开始分析' }}
+        </a-button>
+        <a-button @click="handleReset">清空</a-button>
+      </a-space>
+    </a-form>
+  </section>
+</template>
+
+<style scoped>
+.card {
+  background: var(--color-surface);
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: var(--shadow-inset-card);
+  border: 1px solid var(--color-border);
+}
+
+.slider-row {
+  display: flex;
+  align-items: center;
+}
+
+.form-hint {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+:deep(.ant-input), :deep(.ant-input-affix-wrapper), :deep(textarea) {
+  background: #0f0f0f;
+  border-color: var(--color-border);
+}
+
+:deep(.ant-input:hover), :deep(.ant-input-affix-wrapper:hover), :deep(textarea:hover) {
+  border-color: color-mix(in oklab, var(--color-primary) 60%, var(--color-border));
+}
+
+:deep(.ant-input:focus), :deep(.ant-input-affix-wrapper-focused), :deep(textarea:focus) {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 25%, transparent);
+}
+
+:deep(.ant-slider) {
+  padding: 10px 0;
+}
+
+:deep(.ant-slider-rail) {
+  background-color: #252525;
+  height: 4px;
+}
+
+:deep(.ant-slider-track) {
+  background-color: var(--color-primary);
+  height: 4px;
+}
+
+:deep(.ant-slider:hover .ant-slider-track) {
+  background-color: var(--color-primary);
+}
+
+:deep(.ant-slider-handle::after) {
+  box-shadow: 0 0 0 2px var(--color-primary);
+}
+
+:deep(.ant-slider-handle:focus-visible::after),
+:deep(.ant-slider-handle:hover::after),
+:deep(.ant-slider-handle:active::after) {
+  box-shadow: 0 0 0 3px var(--color-primary);
+}
+</style>
+
--- a/frontend/app/web-gold/src/views/content-style/components/BenchmarkTable.vue
+++ b/frontend/app/web-gold/src/views/content-style/components/BenchmarkTable.vue
@@ -0,0 +1,232 @@
+<script setup>
+import { reactive, h } from 'vue'
+import { DownloadOutlined } from '@ant-design/icons-vue'
+import { formatTime } from '../utils/benchmarkUtils'
+import ExpandedRowContent from './ExpandedRowContent.vue'
+
+const props = defineProps({
+  data: {
+    type: Array,
+    required: true,
+  },
+  selectedRowKeys: {
+    type: Array,
+    required: true,
+  },
+  expandedRowKeys: {
+    type: Array,
+    required: true,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits([
+  'update:selectedRowKeys',
+  'update:expandedRowKeys',
+  'analyze',
+  'export',
+  'batchAnalyze',
+  'copy',
+  'saveToServer',
+  'createContent',
+])
+
+const defaultColumns = [
+  { title: '封面', key: 'cover', dataIndex: 'cover', width: 120, resizable: true },
+  { title: '描述', key: 'desc', dataIndex: 'desc', width: 280, resizable: true, ellipsis: true },
+  { title: '点赞', key: 'digg_count', dataIndex: 'digg_count', width: 90, resizable: true, 
+    sorter: (a, b) => (a.digg_count || 0) - (b.digg_count || 0), defaultSortOrder: 'descend' },
+  { title: '评论', key: 'comment_count', dataIndex: 'comment_count', width: 90, resizable: true, 
+    sorter: (a, b) => (a.comment_count || 0) - (b.comment_count || 0) },
+  { title: '分享', key: 'share_count', dataIndex: 'share_count', width: 90, resizable: true, 
+    sorter: (a, b) => (a.share_count || 0) - (b.share_count || 0) },
+  { title: '收藏', key: 'collect_count', dataIndex: 'collect_count', width: 90, resizable: true, 
+    sorter: (a, b) => (a.collect_count || 0) - (b.collect_count || 0) },
+  { title: '时长(s)', key: 'duration_s', dataIndex: 'duration_s', width: 90, resizable: true, 
+    sorter: (a, b) => (a.duration_s || 0) - (b.duration_s || 0) },
+  { title: '置顶', key: 'is_top', dataIndex: 'is_top', width: 70, resizable: true },
+  { title: '创建时间', key: 'create_time', dataIndex: 'create_time', width: 160, resizable: true, 
+    sorter: (a, b) => (a.create_time || 0) - (b.create_time || 0) },
+  { title: '链接', key: 'share_url', dataIndex: 'share_url', width: 80, resizable: true,
+    customRender: ({ record }) => record.share_url ? h('a', { href: record.share_url, target: '_blank' }, '打开') : null },
+  { title: '操作', key: 'action', width: 100, resizable: true, fixed: 'right' },
+]
+
+const columns = reactive([...defaultColumns])
+
+function onSelectChange(selectedKeys) {
+  emit('update:selectedRowKeys', selectedKeys)
+}
+
+function onExpandedRowKeysChange(keys) {
+  emit('update:expandedRowKeys', keys)
+}
+</script>
+
+<template>
+  <section class="card results-card" v-if="data.length > 0">
+    <div class="section-header">
+      <div class="section-title">分析结果</div>
+      <a-space align="center">
+        <a-button 
+          size="small" 
+          type="default" 
+          @click="$emit('export')"
+          :disabled="data.length === 0 || selectedRowKeys.length === 0 || selectedRowKeys.length > 10">
+          <template #icon>
+            <DownloadOutlined />
+          </template>
+          导出Excel ({{ selectedRowKeys.length }}/10)
+        </a-button>
+        <a-button size="small" type="primary" class="batch-btn" @click="$emit('batchAnalyze')">
+          批量分析 ({{ selectedRowKeys.length }})
+        </a-button>
+      </a-space>
+    </div>
+    <a-table 
+      :dataSource="data" 
+      :columns="columns" 
+      :pagination="false" 
+      :row-selection="{ selectedRowKeys, onChange: onSelectChange, hideSelectAll: true }"
+      :expandedRowKeys="expandedRowKeys"
+      @expandedRowsChange="onExpandedRowKeysChange"
+      :expandable="{ 
+        expandRowByClick: false
+      }"
+      :rowKey="(record) => String(record.id)"
+      :loading="loading"
+      class="benchmark-table">
+      <template #expandedRowRender="{ record }">
+        <ExpandedRowContent
+          :record="record"
+          @analyze="(row) => $emit('analyze', row)"
+          @copy="(row) => $emit('copy', row)"
+          @save-to-server="(row) => $emit('saveToServer', row)"
+          @create-content="(row) => $emit('createContent', row)"
+        />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'cover'">
+          <img v-if="record.cover" :src="record.cover" alt="cover" loading="lazy"
+            style="width:120px;height:68px;object-fit:cover;border-radius:6px;border:1px solid #eee;" />
+          <span v-else style="color:#999;font-size:12px;">无封面</span>
+        </template>
+        <template v-else-if="column.key === 'desc'">
+          <span :title="record.desc">{{ record.desc || '-' }}</span>
+        </template>
+        <template v-else-if="column.key === 'play_count'">
+          {{ record.play_count ? (record.play_count / 10000).toFixed(1) + 'w' : '0' }}
+        </template>
+        <template v-else-if="column.key === 'digg_count'">
+          {{ record.digg_count ? record.digg_count.toLocaleString('zh-CN') : '0' }}
+        </template>
+        <template v-else-if="column.key === 'comment_count'">
+          {{ record.comment_count ? record.comment_count.toLocaleString('zh-CN') : '0' }}
+        </template>
+        <template v-else-if="column.key === 'share_count'">
+          {{ record.share_count ? record.share_count.toLocaleString('zh-CN') : '0' }}
+        </template>
+        <template v-else-if="column.key === 'collect_count'">
+          {{ record.collect_count ? record.collect_count.toLocaleString('zh-CN') : '0' }}
+        </template>
+        <template v-else-if="column.key === 'is_top'">
+          <a-tag v-if="record.is_top" color="red">置顶</a-tag>
+          <span v-else>-</span>
+        </template>
+        <template v-else-if="column.key === 'create_time'">
+          {{ formatTime(record.create_time) }}
+        </template>
+        <template v-else-if="column.key === 'share_url'">
+          <a v-if="record.share_url" :href="record.share_url" target="_blank" class="link-btn">打开</a>
+          <span v-else>-</span>
+        </template>
+        <template v-else-if="column.key === 'action'">
+          <a-space>
+            <a-button size="small" type="primary" :loading="record._analyzing" :disabled="record._analyzing" @click="$emit('analyze', record)">
+              {{ record._analyzing ? '分析中…' : '分析' }}
+            </a-button>
+          </a-space>
+        </template>
+      </template>
+    </a-table>
+  </section>
+</template>
+
+<style scoped>
+.card {
+  background: var(--color-surface);
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: var(--shadow-inset-card);
+  border: 1px solid var(--color-border);
+}
+
+.results-card {
+  min-height: 420px;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.section-header .ant-space {
+  display: flex;
+  align-items: center;
+}
+
+.section-header .ant-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.section-title {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+  margin-bottom: 12px;
+}
+
+.batch-btn {
+  font-weight: 600;
+}
+
+.batch-btn:hover {
+  box-shadow: var(--glow-primary);
+  filter: brightness(1.03);
+}
+
+.link-btn {
+  color: #1677ff;
+  text-decoration: none;
+  transition: opacity 0.2s;
+}
+
+.link-btn:hover {
+  opacity: 0.8;
+  text-decoration: underline;
+}
+
+.benchmark-table :deep(.ant-table-expand-icon-th),
+.benchmark-table :deep(.ant-table-row-expand-icon-cell) {
+  width: 48px;
+  min-width: 48px;
+  text-align: center;
+}
+
+.benchmark-table :deep(.ant-table-row-expand-icon) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  user-select: none;
+}
+</style>
+
--- a/frontend/app/web-gold/src/views/content-style/components/ExpandedRowContent.vue
+++ b/frontend/app/web-gold/src/views/content-style/components/ExpandedRowContent.vue
@@ -0,0 +1,195 @@
+<script setup>
+import { CopyOutlined, SaveOutlined } from '@ant-design/icons-vue'
+import ChatMessageRenderer from '@/components/ChatMessageRenderer.vue'
+
+const props = defineProps({
+  record: {
+    type: Object,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['analyze', 'copy', 'saveToServer', 'createContent'])
+
+function handleCopy() {
+  emit('copy', props.record)
+}
+
+function handleSaveToServer() {
+  emit('saveToServer', props.record)
+}
+
+function handleCreateContent() {
+  emit('createContent', props.record)
+}
+</script>
+
+<template>
+  <div class="expanded-content">
+    <!-- 未分析的行显示提示 -->
+    <div v-if="!record.transcriptions && !record.prompt" class="no-analysis-tip">
+      <a-empty description="该视频尚未分析">
+        <template #image>
+          <svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="20" y="30" width="80" height="60" rx="4" stroke="currentColor" stroke-width="2" fill="none" opacity="0.3"/>
+            <circle cx="40" cy="50" r="8" fill="currentColor" opacity="0.4"/>
+            <rect x="54" y="47" width="40" height="6" rx="3" fill="currentColor" opacity="0.4"/>
+            <rect x="54" y="60" width="32" height="6" rx="3" fill="currentColor" opacity="0.4"/>
+          </svg>
+        </template>
+        <a-button type="primary" @click="$emit('analyze', record)" :loading="record._analyzing">
+          {{ record._analyzing ? '分析中…' : '开始分析' }}
+        </a-button>
+      </a-empty>
+    </div>
+    
+    <!-- 已分析的行显示内容 -->
+    <div v-else class="two-col">
+      <!-- 左侧：原配音内容 -->
+      <section class="col left-col">
+        <div class="sub-title">原配音</div>
+        <div class="transcript-box" v-if="record.transcriptions">
+          <div class="transcript-content">{{ record.transcriptions }}</div>
+        </div>
+        <div v-else class="no-transcript">暂无转写文本，请先点击"分析"获取</div>
+      </section>
+
+      <!-- 右侧：提示词 -->
+      <section class="col right-col">
+        <div class="sub-title">提示词</div>
+        
+        <div class="prompt-display-wrapper">
+          <ChatMessageRenderer 
+            :content="record.prompt || ''"
+            :is-streaming="record._analyzing || false"
+          />
+          <div v-if="!record.prompt" class="no-prompt">暂无提示词</div>
+        </div>
+        
+        <div class="right-actions">
+          <a-space>
+            <a-button 
+              size="small" 
+              type="text" 
+              class="copy-btn"
+              :title="'复制'"
+              @click="handleCopy">
+              <template #icon>
+                <CopyOutlined />
+              </template>
+            </a-button>
+            <a-button 
+              v-if="record.prompt"
+              size="small" 
+              type="text" 
+              class="save-server-btn"
+              :title="'保存'"
+              @click="handleSaveToServer">
+              <template #icon>
+                <SaveOutlined />
+              </template>
+              保存
+            </a-button>
+            <a-button 
+              type="dashed" 
+              :disabled="!record.prompt || record._analyzing"
+              @click="handleCreateContent">基于提示词去创作</a-button>
+          </a-space>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.expanded-content {
+  padding: 16px;
+  background: #161616;
+  border-radius: 6px;
+  margin: 8px 0;
+}
+
+.two-col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.col {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  padding: 12px;
+}
+
+.left-col .transcript-content {
+  white-space: pre-wrap;
+  line-height: 1.6;
+  color: var(--color-text-secondary);
+  background: #0d0d0d;
+  border: 1px dashed var(--color-border);
+  border-radius: 6px;
+  padding: 10px;
+}
+
+.sub-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text);
+  margin-bottom: 8px;
+}
+
+.no-transcript {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+.prompt-display-wrapper {
+  min-height: 200px;
+  max-height: 500px;
+  overflow-y: auto;
+  background: #0d0d0d;
+  border: 1px dashed var(--color-border);
+  border-radius: 6px;
+  padding: 12px;
+  margin-bottom: 8px;
+}
+
+.no-prompt {
+  padding: 16px;
+  text-align: center;
+  color: var(--color-text-secondary);
+}
+
+.right-actions {
+  margin-top: 8px;
+}
+
+.copy-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--color-primary);
+  cursor: pointer;
+}
+
+.copy-btn:hover {
+  opacity: 0.8;
+}
+
+
+.no-analysis-tip {
+  padding: 40px 20px;
+  text-align: center;
+}
+
+.no-analysis-tip :deep(.ant-empty) {
+  margin: 0;
+}
+
+.no-analysis-tip :deep(.ant-empty-description) {
+  color: var(--color-text-secondary);
+  margin-bottom: 16px;
+}
+</style>
+
--- a/frontend/app/web-gold/src/views/content-style/components/SavePromptModal.vue
+++ b/frontend/app/web-gold/src/views/content-style/components/SavePromptModal.vue
@@ -0,0 +1,138 @@
+<script setup>
+import { ref, watch } from 'vue'
+import { message } from 'ant-design-vue'
+import { UserPromptApi } from '@/api/userPrompt'
+import { useUserStore } from '@/stores/user'
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  promptContent: {
+    type: String,
+    default: '',
+  },
+})
+
+const emit = defineEmits(['update:visible', 'success'])
+
+const userStore = useUserStore()
+const savingPrompt = ref(false)
+const savePromptForm = ref({
+  name: '',
+  category: '',
+  content: '',
+})
+
+watch(() => props.visible, (newVal) => {
+  if (newVal) {
+    savePromptForm.value = {
+      name: '',
+      category: '',
+      content: props.promptContent,
+    }
+  }
+})
+
+async function handleSave() {
+  if (!savePromptForm.value.name.trim()) {
+    message.warning('请输入提示词名称')
+    return
+  }
+  
+  if (!savePromptForm.value.content.trim()) {
+    message.warning('提示词内容不能为空')
+    return
+  }
+  
+  const userId = Number(userStore.userId)
+  if (!userId) {
+    message.error('无法获取用户ID，请先登录')
+    return
+  }
+  
+  savingPrompt.value = true
+  try {
+    const payload = {
+      userId: userId,
+      name: savePromptForm.value.name.trim(),
+      content: savePromptForm.value.content.trim(),
+      category: savePromptForm.value.category.trim() || null,
+      isPublic: false,
+      sort: 0,
+      useCount: 0,
+      status: 1,
+    }
+    
+    const response = await UserPromptApi.createUserPrompt(payload)
+    
+    if (response && (response.code === 0 || response.code === 200)) {
+      message.success('提示词保存成功')
+      emit('update:visible', false)
+      emit('success')
+      // 重置表单
+      savePromptForm.value = {
+        name: '',
+        category: '',
+        content: '',
+      }
+    } else {
+      throw new Error(response?.msg || response?.message || '保存失败')
+    }
+  } catch (error) {
+    console.error('保存提示词失败:', error)
+    message.error(error?.message || '保存失败，请稍后重试')
+  } finally {
+    savingPrompt.value = false
+  }
+}
+
+function handleCancel() {
+  emit('update:visible', false)
+}
+</script>
+
+<template>
+  <a-modal
+    :open="visible"
+    title="保存提示词"
+    :width="600"
+    :maskClosable="false"
+    @cancel="handleCancel">
+    <a-form :model="savePromptForm" layout="vertical">
+      <a-form-item label="提示词名称" required>
+        <a-input 
+          v-model:value="savePromptForm.name" 
+          placeholder="请输入提示词名称"
+          :maxlength="50"
+          show-count />
+      </a-form-item>
+      <a-form-item label="分类/标签">
+        <a-input 
+          v-model:value="savePromptForm.category" 
+          placeholder="可选：输入分类或标签"
+          :maxlength="20" />
+      </a-form-item>
+      <a-form-item label="提示词内容">
+        <a-textarea 
+          v-model:value="savePromptForm.content" 
+          :rows="8" 
+          :readonly="true"
+          placeholder="提示词内容" />
+      </a-form-item>
+    </a-form>
+    
+    <template #footer>
+      <a-space>
+        <a-button @click="handleCancel">取消</a-button>
+        <a-button 
+          type="primary" 
+          :loading="savingPrompt"
+          :disabled="!savePromptForm.name.trim()"
+          @click="handleSave">保存</a-button>
+      </a-space>
+    </template>
+  </a-modal>
+</template>
+
--- a/frontend/app/web-gold/src/views/content-style/composables/useBenchmarkAnalysis.js
+++ b/frontend/app/web-gold/src/views/content-style/composables/useBenchmarkAnalysis.js
@@ -0,0 +1,157 @@
+import { ref } from 'vue'
+import { message } from 'ant-design-vue'
+import { ChatMessageApi } from '@/api/chat'
+import useVoiceText from '@gold/hooks/web/useVoiceText'
+import { streamChat } from '@/utils/streamChat'
+import { buildPromptFromTranscription } from '../utils/benchmarkUtils'
+
+export function useBenchmarkAnalysis(data, expandedRowKeys, saveTableDataToSession) {
+  const loading = ref(false)
+  const batchAnalyzeLoading = ref(false)
+  const globalLoading = ref(false)
+  const globalLoadingText = ref('')
+  const { getVoiceText } = useVoiceText()
+
+  /**
+   * 分析单个视频，获取提示词
+   */
+  async function analyzeVideo(row) {
+    try {
+      if (row._analyzing) return
+      
+      row._analyzing = true
+
+      // 1) 获取音频转写
+      message.info('正在获取音频转写...')
+      const transcriptions = await getVoiceText([row])
+      row.transcriptions = transcriptions.find(item => item.audio_url === row.audio_url)?.value
+
+      // 2) 检查是否有语音文案
+      if (!row.transcriptions || !row.transcriptions.trim()) {
+        message.warning('未提取到语音内容，请检查音频文件或稍后重试')
+        row._analyzing = false
+        return false
+      }
+
+      // 3) 创建对话
+      message.info('正在创建对话...')
+      const createPayload = { roleId: 20, role_id: 20 }
+      console.debug('createChatConversationMy payload:', createPayload)
+      const conversationResp = await ChatMessageApi.createChatConversationMy(createPayload)
+      
+      let conversationId = null
+      if (conversationResp?.data) {
+        conversationId = typeof conversationResp.data === 'object' ? conversationResp.data.id : conversationResp.data
+      }
+      
+      if (!conversationId) {
+        throw new Error('创建对话失败：未获取到 conversationId')
+      }
+      
+      // 4) 基于转写构建提示，流式生成并实时写入 UI
+      message.info('正在生成提示词...')
+      const content = buildPromptFromTranscription(row.transcriptions)
+      const index = data.value.findIndex(item => item.id === row.id)
+      const aiContent = await streamChat({
+        conversationId,
+        content,
+        onUpdate: (fullText) => {
+          if (index !== -1) data.value[index].prompt = fullText
+        },
+        enableTypewriter: true,
+        typewriterSpeed: 10,
+        typewriterBatchSize: 2
+      })
+
+      // 5) 兜底处理
+      const finalPrompt = aiContent || row.transcriptions || ''
+      if (index !== -1) data.value[index].prompt = finalPrompt
+      
+      // 6) 分析完成后自动展开该行
+      const rowId = String(row.id) // 确保类型一致
+      if (!expandedRowKeys.value.includes(rowId)) {
+        expandedRowKeys.value.push(rowId)
+      }
+      
+      // 7) 保存数据到 session
+      await saveTableDataToSession()
+      
+      message.success('分析完成')
+      return true
+    } catch (error) {
+      console.error('分析视频失败:', error)
+      message.error('分析失败，请稍后重试')
+      return false
+    } finally {
+      row._analyzing = false
+    }
+  }
+
+  /**
+   * 批量分析选中的视频
+   */
+  async function batchAnalyze(selectedRowKeys, onBatchComplete) {
+    if (selectedRowKeys.value.length === 0) {
+      message.warning('请先选择要分析的视频')
+      return
+    }
+
+    batchAnalyzeLoading.value = true
+    globalLoading.value = true
+    globalLoadingText.value = `正在批量分析 ${selectedRowKeys.value.length} 个视频...`
+
+    try {
+      // 1. 获取所有选中视频的语音转写
+      globalLoadingText.value = '正在获取中...'
+      const selectedRows = data.value.filter(item => selectedRowKeys.value.includes(item.id))
+      const transcriptions = await getVoiceText(selectedRows)
+      
+      // 2. 收集所有转写内容
+      const allTexts = []
+      for (const id of selectedRowKeys.value) {
+        const row = data.value.find(item => item.id === id)
+        if (row && row.audio_url) {
+          const transcription = transcriptions.find(item => item.audio_url === row.audio_url)
+          if (transcription && transcription.value && transcription.value.trim()) {
+            allTexts.push({ id: row.id, url: row.audio_url, text: transcription.value })
+            row.transcriptions = transcription.value
+          }
+        }
+      }
+
+      // 3. 检查是否有可用的语音内容
+      if (allTexts.length === 0) {
+        message.warning('未提取到任何语音内容，请检查音频文件或稍后重试')
+        batchAnalyzeLoading.value = false
+        globalLoading.value = false
+        globalLoadingText.value = ''
+        return
+      }
+
+      await saveTableDataToSession()
+      const mergedText = allTexts.map(item => item.text).join('\n\n---\n\n')
+      
+      // 4. 通知父组件打开弹窗并开始生成
+      if (onBatchComplete) {
+        await onBatchComplete(mergedText, allTexts.length)
+      }
+    } catch (error) {
+      console.error('批量分析失败:', error)
+      message.error('批量分析失败，请稍后重试')
+    } finally {
+      batchAnalyzeLoading.value = false
+      globalLoading.value = false
+      globalLoadingText.value = ''
+    }
+  }
+
+  return {
+    loading,
+    batchAnalyzeLoading,
+    globalLoading,
+    globalLoadingText,
+    analyzeVideo,
+    batchAnalyze,
+  }
+}
+
--- a/frontend/app/web-gold/src/views/content-style/composables/useBenchmarkData.js
+++ b/frontend/app/web-gold/src/views/content-style/composables/useBenchmarkData.js
@@ -0,0 +1,80 @@
+import { ref, reactive } from 'vue'
+import storage from '@/utils/storage'
+import { mapFromDouyin, mapFromXhs } from '../utils/benchmarkUtils'
+
+const TABLE_DATA_STORAGE_KEY = 'benchmark_table_data'
+
+export function useBenchmarkData() {
+  const data = ref([])
+  const selectedRowKeys = ref([])
+  const expandedRowKeys = ref([])
+
+  /**
+   * 保存表格数据到 session
+   */
+  async function saveTableDataToSession() {
+    try {
+      // 过滤掉不需要持久化的临时字段（如 _analyzing）
+      const persistData = (data.value || []).map((item) => {
+        const rest = { ...(item || {}) }
+        delete rest._analyzing
+        return rest
+      })
+      await storage.setJSON(TABLE_DATA_STORAGE_KEY, persistData)
+    } catch (error) {
+      console.warn('保存表格数据到session失败:', error)
+    }
+  }
+
+  /**
+   * 从 session 加载表格数据
+   */
+  async function loadTableDataFromSession() {
+    try {
+      const savedData = await storage.getJSON(TABLE_DATA_STORAGE_KEY)
+      if (savedData && Array.isArray(savedData) && savedData.length > 0) {
+        // 强制恢复临时字段的初始状态
+        data.value = savedData.map((item) => ({ ...item, _analyzing: false }))
+        console.log('从session加载了表格数据:', savedData.length, '条')
+      }
+    } catch (error) {
+      console.warn('从session加载表格数据失败:', error)
+    }
+  }
+
+  /**
+   * 处理 API 响应数据
+   */
+  function processApiResponse(resp, platform) {
+    if (platform === '抖音') {
+      const awemeList = resp?.data?.aweme_list || []
+      console.log('抖音返回的原始数据:', awemeList[0])
+      data.value = mapFromDouyin(awemeList)
+      console.log('映射后的第一条数据:', data.value[0])
+    } else {
+      const notes = resp?.data?.notes || resp?.data?.data || []
+      data.value = mapFromXhs(notes)
+    }
+  }
+
+  /**
+   * 清空数据
+   */
+  async function clearData() {
+    data.value = []
+    selectedRowKeys.value = []
+    expandedRowKeys.value = []
+    await storage.remove(TABLE_DATA_STORAGE_KEY)
+  }
+
+  return {
+    data,
+    selectedRowKeys,
+    expandedRowKeys,
+    saveTableDataToSession,
+    loadTableDataFromSession,
+    processApiResponse,
+    clearData,
+  }
+}
+
--- a/frontend/app/web-gold/src/views/content-style/utils/benchmarkUtils.js
+++ b/frontend/app/web-gold/src/views/content-style/utils/benchmarkUtils.js
@@ -0,0 +1,60 @@
+import dayjs from 'dayjs'
+
+/**
+ * 映射抖音数据结构
+ */
+export function mapFromDouyin(awemeList) {
+  return awemeList.map((item, idx) => ({
+    id: item?.statistics?.aweme_id || item?.aweme_id || idx + 1,
+    cover: item?.video?.origin_cover?.url_list?.[0] || item?.video?.cover?.url_list?.[0] 
+      || item?.video?.dynamic_cover?.url_list?.[0] || item?.video?.animated_cover?.url_list?.[0] || '',
+    is_top: item?.is_top ? 1 : 0,
+    create_time: item?.create_time,
+    audio_url: item?.video?.play_addr?.url_list?.reverse()[0] || '',
+    desc: item?.desc || item?.caption || '',
+    duration_s: Math.round((item?.video?.duration ?? 0) / 1000),
+    digg_count: item?.statistics?.digg_count ?? 0,
+    comment_count: item?.statistics?.comment_count ?? 0,
+    share_count: item?.statistics?.share_count ?? 0,
+    collect_count: item?.statistics?.collect_count ?? 0,
+    play_count: item?.statistics?.play_count ?? 0,
+    share_url: item?.share_info?.share_url || '',
+  }))
+}
+
+/**
+ * 映射小红书数据结构
+ */
+export function mapFromXhs(notes) {
+  return notes.map((note, idx) => ({
+    id: note?.note_id || note?.id || idx + 1,
+    cover: note?.cover?.url || note?.image_list?.[0]?.url || '',
+    is_top: 0,
+    create_time: note?.time || note?.create_time,
+    desc: note?.desc || note?.title || '',
+    duration_s: 0,
+    digg_count: note?.liked_count ?? note?.likes ?? 0,
+    comment_count: note?.comment_count ?? 0,
+    share_count: note?.share_count ?? 0,
+    play_count: note?.view_count ?? 0,
+    share_url: note?.link || '',
+  }))
+}
+
+/**
+ * 格式化时间戳
+ */
+export function formatTime(ts) {
+  if (!ts) return ''
+  const ms = ts > 1e12 ? ts : ts * 1000
+  return dayjs(ms).format('YYYY-MM-DD HH:mm:ss')
+}
+
+/**
+ * 根据转写内容构建 AI 提示
+ */
+export function buildPromptFromTranscription(text) {
+  if (text && text.trim()) return `${text}`
+  return '没有可用的语音转写内容，请给出一份适合短视频脚本创作的通用高质量提示词模板（包含框架、角色、语气、风格、内容要点等）。'
+}
+
--- a/frontend/app/web-gold/src/views/system/StyleSettings.vue
+++ b/frontend/app/web-gold/src/views/system/StyleSettings.vue
@@ -0,0 +1,489 @@
+<script setup>
+import { ref, onMounted, reactive, h } from 'vue'
+import { message, Modal } from 'ant-design-vue'
+import { EditOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
+import { UserPromptApi } from '@/api/userPrompt'
+import { useUserStore } from '@/stores/user'
+import dayjs from 'dayjs'
+
+const userStore = useUserStore()
+
+// 表格数据
+const dataSource = ref([])
+const loading = ref(false)
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  showSizeChanger: true,
+  showTotal: (total) => `共 ${total} 条`,
+})
+
+// 搜索表单
+const searchForm = reactive({
+  name: '',
+  category: '',
+  status: undefined,
+})
+
+// 编辑弹窗
+const editModalVisible = ref(false)
+const editForm = reactive({
+  id: null,
+  name: '',
+  content: '',
+  category: '',
+  status: 1,
+  _originalRecord: null, // 保存原始记录，用于更新时获取必需字段
+})
+const editFormRef = ref(null)
+
+// 表格列定义
+const columns = [
+  {
+    title: 'ID',
+    dataIndex: 'id',
+    key: 'id',
+    width: 80,
+  },
+  {
+    title: '名称',
+    dataIndex: 'name',
+    key: 'name',
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: '内容',
+    dataIndex: 'content',
+    key: 'content',
+    ellipsis: true,
+    customRender: ({ text }) => {
+      if (!text) return '-'
+      const preview = text.length > 100 ? text.substring(0, 100) + '...' : text
+      return h('span', { title: text }, preview)
+    },
+  },
+  {
+    title: '分类',
+    dataIndex: 'category',
+    key: 'category',
+    width: 120,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    width: 100,
+    customRender: ({ text }) => {
+      return h('span', {
+        style: {
+          color: text === 1 ? '#52c41a' : '#ff4d4f',
+        },
+      }, text === 1 ? '启用' : '禁用')
+    },
+  },
+  {
+    title: '使用次数',
+    dataIndex: 'useCount',
+    key: 'useCount',
+    width: 120,
+    sorter: (a, b) => (a.useCount || 0) - (b.useCount || 0),
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    key: 'createTime',
+    width: 180,
+    customRender: ({ text }) => {
+      return text ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : '-'
+    },
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 150,
+    fixed: 'right',
+    customRender: ({ record }) => {
+      return h('div', { style: { display: 'flex', gap: '8px' } }, [
+        h('a-button', {
+          type: 'link',
+          size: 'small',
+          onClick: () => handleEdit(record),
+        }, [
+          h(EditOutlined),
+          '编辑',
+        ]),
+        h('a-button', {
+          type: 'link',
+          size: 'small',
+          danger: true,
+          onClick: () => handleDelete(record),
+        }, [
+          h(DeleteOutlined),
+          '删除',
+        ]),
+      ])
+    },
+  },
+]
+
+// 加载数据
+async function loadData() {
+  loading.value = true
+  try {
+    const params = {
+      pageNo: pagination.current,
+      pageSize: pagination.pageSize,
+      name: searchForm.name || undefined,
+      category: searchForm.category || undefined,
+      status: searchForm.status,
+    }
+
+    const response = await UserPromptApi.getUserPromptPage(params)
+    
+    if (response && (response.code === 0 || response.code === 200)) {
+      dataSource.value = response.data?.list || []
+      pagination.total = response.data?.total || 0
+    } else {
+      throw new Error(response?.msg || response?.message || '加载失败')
+    }
+  } catch (error) {
+    console.error('加载提示词列表失败:', error)
+    message.error(error?.message || '加载失败，请稍后重试')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 搜索
+function handleSearch() {
+  pagination.current = 1
+  loadData()
+}
+
+// 重置搜索
+function handleReset() {
+  searchForm.name = ''
+  searchForm.category = ''
+  searchForm.status = undefined
+  pagination.current = 1
+  loadData()
+}
+
+// 新增
+function handleAdd() {
+  editForm.id = null
+  editForm.name = ''
+  editForm.content = ''
+  editForm.category = ''
+  editForm.status = 1
+  editForm._originalRecord = null
+  editModalVisible.value = true
+}
+
+// 编辑
+function handleEdit(record) {
+  editForm.id = record.id
+  editForm.name = record.name || ''
+  editForm.content = record.content || ''
+  editForm.category = record.category || ''
+  editForm.status = record.status ?? 1
+  // 保存原始记录的完整信息，用于更新时传递必需字段
+  editForm._originalRecord = record
+  editModalVisible.value = true
+}
+
+// 保存（新增/编辑）
+async function handleSave() {
+  try {
+    await editFormRef.value.validate()
+  } catch (error) {
+    return
+  }
+
+  loading.value = true
+  try {
+    const payload = {
+      name: editForm.name.trim(),
+      content: editForm.content.trim(),
+      category: editForm.category.trim() || null,
+      status: editForm.status,
+    }
+
+    if (editForm.id) {
+      // 更新：只需要传递要修改的字段，后端会自动填充其他字段
+      payload.id = editForm.id
+      // 注意：sort、useCount、isPublic 等字段后端会自动从数据库获取，无需前端传递
+      
+      const response = await UserPromptApi.updateUserPrompt(payload)
+      if (response && (response.code === 0 || response.code === 200)) {
+        message.success('更新成功')
+        editModalVisible.value = false
+        loadData()
+      } else {
+        throw new Error(response?.msg || response?.message || '更新失败')
+      }
+    } else {
+      // 新增：需要包含所有必需字段
+      payload.sort = 0
+      payload.useCount = 0
+      payload.isPublic = false
+      
+      const response = await UserPromptApi.createUserPrompt(payload)
+      if (response && (response.code === 0 || response.code === 200)) {
+        message.success('创建成功')
+        editModalVisible.value = false
+        loadData()
+      } else {
+        throw new Error(response?.msg || response?.message || '创建失败')
+      }
+    }
+  } catch (error) {
+    console.error('保存提示词失败:', error)
+    message.error(error?.message || '保存失败，请稍后重试')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 删除
+function handleDelete(record) {
+  Modal.confirm({
+    title: '确认删除',
+    content: `确定要删除提示词"${record.name}"吗？`,
+    onOk: async () => {
+      loading.value = true
+      try {
+        const response = await UserPromptApi.deleteUserPrompt(record.id)
+        if (response && (response.code === 0 || response.code === 200)) {
+          message.success('删除成功')
+          loadData()
+        } else {
+          throw new Error(response?.msg || response?.message || '删除失败')
+        }
+      } catch (error) {
+        console.error('删除提示词失败:', error)
+        message.error(error?.message || '删除失败，请稍后重试')
+      } finally {
+        loading.value = false
+      }
+    },
+  })
+}
+
+// 分页变化
+function handleTableChange(pag) {
+  pagination.current = pag.current
+  pagination.pageSize = pag.pageSize
+  loadData()
+}
+
+// 初始化
+onMounted(() => {
+  loadData()
+})
+</script>
+
+<template>
+  <div class="style-settings-page">
+    <div class="page-header">
+      <h1 class="page-title">风格设置</h1>
+      <p class="page-description">管理您的提示词模板，用于内容创作和风格定制</p>
+    </div>
+
+    <div class="page-content">
+      <!-- 搜索表单 -->
+      <div class="search-card card">
+        <a-form :model="searchForm" layout="inline" class="search-form">
+          <a-form-item label="名称">
+            <a-input
+              v-model:value="searchForm.name"
+              placeholder="请输入提示词名称"
+              allow-clear
+              style="width: 200px"
+              @pressEnter="handleSearch"
+            />
+          </a-form-item>
+          <a-form-item label="分类">
+            <a-input
+              v-model:value="searchForm.category"
+              placeholder="请输入分类"
+              allow-clear
+              style="width: 200px"
+              @pressEnter="handleSearch"
+            />
+          </a-form-item>
+          <a-form-item label="状态">
+            <a-select
+              v-model:value="searchForm.status"
+              placeholder="请选择状态"
+              allow-clear
+              style="width: 120px"
+            >
+              <a-select-option :value="1">启用</a-select-option>
+              <a-select-option :value="0">禁用</a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item>
+            <a-space>
+              <a-button type="primary" @click="handleSearch">搜索</a-button>
+              <a-button @click="handleReset">重置</a-button>
+            </a-space>
+          </a-form-item>
+        </a-form>
+      </div>
+
+      <!-- 操作栏 -->
+      <div class="action-bar">
+        <a-button type="primary" @click="handleAdd">
+          <template #icon>
+            <PlusOutlined />
+          </template>
+          新增提示词
+        </a-button>
+      </div>
+
+      <!-- 表格 -->
+      <div class="table-card card">
+        <a-table
+          :dataSource="dataSource"
+          :columns="columns"
+          :loading="loading"
+          :pagination="pagination"
+          rowKey="id"
+          @change="handleTableChange"
+          :scroll="{ x: 1200 }"
+        />
+      </div>
+    </div>
+
+    <!-- 编辑弹窗 -->
+    <a-modal
+      v-model:visible="editModalVisible"
+      :title="editForm.id ? '编辑提示词' : '新增提示词'"
+      width="800px"
+      @ok="handleSave"
+      @cancel="editModalVisible = false"
+    >
+      <a-form
+        ref="editFormRef"
+        :model="editForm"
+        :label-col="{ span: 4 }"
+        :wrapper-col="{ span: 20 }"
+      >
+        <a-form-item
+          label="名称"
+          name="name"
+          :rules="[{ required: true, message: '请输入提示词名称' }]"
+        >
+          <a-input v-model:value="editForm.name" placeholder="请输入提示词名称" />
+        </a-form-item>
+        <a-form-item
+          label="内容"
+          name="content"
+          :rules="[{ required: true, message: '请输入提示词内容' }]"
+        >
+          <a-textarea
+            v-model:value="editForm.content"
+            placeholder="请输入提示词内容"
+            :rows="8"
+          />
+        </a-form-item>
+        <a-form-item label="分类" name="category">
+          <a-input v-model:value="editForm.category" placeholder="请输入分类（可选）" />
+        </a-form-item>
+        <a-form-item
+          label="状态"
+          name="status"
+          :rules="[{ required: true, message: '请选择状态' }]"
+        >
+          <a-radio-group v-model:value="editForm.status">
+            <a-radio :value="1">启用</a-radio>
+            <a-radio :value="0">禁用</a-radio>
+          </a-radio-group>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<style scoped>
+.style-settings-page {
+  padding: 24px;
+  min-height: calc(100vh - 70px);
+  background: var(--color-bg);
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--color-text);
+  margin: 0 0 8px 0;
+}
+
+.page-description {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+.page-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-card);
+  padding: 16px;
+}
+
+.search-card {
+  padding: 16px;
+}
+
+.search-form {
+  margin: 0;
+}
+
+.action-bar {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.table-card {
+  padding: 0;
+  overflow: hidden;
+}
+
+:deep(.ant-table) {
+  background: transparent;
+}
+
+:deep(.ant-table-thead > tr > th) {
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  color: var(--color-text);
+}
+
+:deep(.ant-table-tbody > tr > td) {
+  border-bottom: 1px solid var(--color-border);
+  color: var(--color-text);
+}
+
+:deep(.ant-table-tbody > tr:hover > td) {
+  background: var(--color-bg);
+}
+
+:deep(.ant-pagination) {
+  margin: 16px;
+}
+</style>
+