From fe912267272ac8bdb967cba08f431e2afca4324a Mon Sep 17 00:00:00 2001
From: sion123 <450702724@qq.com>
Date: Sat, 17 Jan 2026 19:54:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8A=9F=E8=83=BD=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../layouts/components/FullWidthLayout.vue    |   2 +-
 .../src/views/content-style/Copywriting.vue   | 298 ++++-----
 .../web-gold/src/views/kling/IdentifyFace.vue | 597 +++++++++---------
 3 files changed, 409 insertions(+), 488 deletions(-)

diff --git a/frontend/app/web-gold/src/layouts/components/FullWidthLayout.vue b/frontend/app/web-gold/src/layouts/components/FullWidthLayout.vue
index 21cfb71813..9df346a787 100644
--- a/frontend/app/web-gold/src/layouts/components/FullWidthLayout.vue
+++ b/frontend/app/web-gold/src/layouts/components/FullWidthLayout.vue
@@ -113,7 +113,7 @@ const handleBack = () => {
 .full-width-layout__content {
   flex: 1;
   overflow: auto;
-  background: var(--bg-secondary);
+  background: var(--color-bg);
 
   &.no-padding {
     padding: 0;
diff --git a/frontend/app/web-gold/src/views/content-style/Copywriting.vue b/frontend/app/web-gold/src/views/content-style/Copywriting.vue
index 39e5d7e015..32a43a6958 100644
--- a/frontend/app/web-gold/src/views/content-style/Copywriting.vue
+++ b/frontend/app/web-gold/src/views/content-style/Copywriting.vue
@@ -10,6 +10,7 @@ import { UserPromptApi } from '@/api/userPrompt'
 import { useUserStore } from '@/stores/user'
 import GradientButton from '@/components/GradientButton.vue'
 import { setJSON, getJSON } from '@/utils/storage'
+import BasicLayout from '@/layouts/components/BasicLayout.vue'
 
 const promptStore = usePromptStore()
 const userStore = useUserStore()
@@ -499,9 +500,7 @@ defineOptions({ name: 'ContentStyleCopywriting' })
 </script>
 
 <template>
-  <div class="copywriting-page">
-    <!-- 页面标题区域 -->
-
+  <BasicLayout title="AI 文案创作">
     <!-- 主要内容区域 -->
     <div class="main-content">
       <a-row :gutter="16">
@@ -517,9 +516,9 @@ defineOptions({ name: 'ContentStyleCopywriting' })
                         <span class="form-tip-inline">从已保存的提示词中选择</span>
                       </span>
                       <a-space>
-                        <a-button 
-                          size="small" 
-                          type="link" 
+                        <a-button
+                          size="small"
+                          type="link"
                           @click="showAllPromptsModal = true"
                           :disabled="allPrompts.length === 0">
                           更多 ({{ allPrompts.length }})
@@ -527,7 +526,7 @@ defineOptions({ name: 'ContentStyleCopywriting' })
                       </a-space>
                     </div>
                   </template>
-                  
+
                   <!-- 提示词标签展示区域 -->
                   <div v-if="displayPrompts.length > 0" class="prompt-tags-container">
                     <div class="prompt-tags-grid">
@@ -541,27 +540,27 @@ defineOptions({ name: 'ContentStyleCopywriting' })
                       </div>
                     </div>
                   </div>
-                  
+
                   <!-- 空状态 -->
                   <div v-else-if="!loadingPrompts" class="prompt-empty">
                     <div style="color: var(--color-text-secondary); font-size: 14px; text-align: center; padding: 20px;">
                       您可以在视频分析页面保存风格
                     </div>
                   </div>
-                  
+
                   <!-- 加载状态 -->
                   <div v-else class="prompt-loading">
                     <a-spin size="small" />
                   </div>
                 </a-form-item>
-                
+
                 <!-- 统一输入：文本或视频链接 -->
                 <a-form-item class="form-item">
                   <template #label>
                     输入内容
                     <span class="form-tip-inline">输入要生成的主题/段落，或粘贴视频链接以自动转写</span>
                   </template>
-                  <a-textarea 
+                  <a-textarea
                     v-model:value="form.userInput"
                     placeholder="直接输入文字，或粘贴视频链接（抖音、B站、YouTube等）"
                     :auto-size="{ minRows: 6, maxRows: 12 }"
@@ -576,17 +575,17 @@ defineOptions({ name: 'ContentStyleCopywriting' })
                     <span class="form-tip-inline">调整创作幅度，数值越大创意性越强</span>
                   </template>
                   <div class="amplitude-row">
-                    <a-slider 
-                      v-model:value="form.amplitude" 
-                      :min="0" 
-                      :max="100" 
+                    <a-slider
+                      v-model:value="form.amplitude"
+                      :min="0"
+                      :max="100"
                       :tooltip-formatter="(value) => `${value}%`"
                       style="flex: 1"
                     />
-                    <a-input-number 
-                      v-model:value="form.amplitude" 
-                      :min="0" 
-                      :max="100" 
+                    <a-input-number
+                      v-model:value="form.amplitude"
+                      :min="0"
+                      :max="100"
                       style="width: 96px; margin-left: 12px;"
                     />
                   </div>
@@ -608,11 +607,9 @@ defineOptions({ name: 'ContentStyleCopywriting' })
             </a-card>
           </div>
         </a-col>
-        
+
         <a-col :lg="14" :md="24">
           <div class="result-section">
-           
-            
             <a-card class="result-card" :bordered="false" title="生成结果">
               <template #extra>
                 <a-space>
@@ -626,11 +623,11 @@ defineOptions({ name: 'ContentStyleCopywriting' })
                   </a-button>
                 </a-space>
               </template>
-              
+
               <div v-if="generatedContent" class="result-content">
                 <!-- 编辑模式 -->
                 <div v-if="isEditMode" class="edit-mode">
-                    <a-textarea 
+                    <a-textarea
                     v-model:value="editableContent"
                     :auto-size="{ minRows: 15, maxRows: 30 }"
                     placeholder="在这里编辑生成的文案内容..."
@@ -649,11 +646,11 @@ defineOptions({ name: 'ContentStyleCopywriting' })
                     </a-space>
                   </div>
                 </div>
-                
+
                 <!-- 预览模式 -->
                 <div v-else class="generated-content" v-html="md.render(generatedContent)"></div>
               </div>
-              
+
               <div v-else class="custom-empty">
                 <div class="empty-description">
                   <div class="empty-icon"><GmIcon name="icon-empty-doc" :size="36" /></div>
@@ -672,19 +669,21 @@ defineOptions({ name: 'ContentStyleCopywriting' })
       v-model:open="showAllPromptsModal"
       title="选择提示词"
       :width="800"
-      :maskClosable="false">
+      :maskClosable="false"
+    >
       <div class="all-prompts-modal">
         <!-- 搜索框 -->
         <a-input
           v-model:value="promptSearchKeyword"
           placeholder="搜索提示词名称或内容..."
           allow-clear
-          style="margin-bottom: 16px;">
+          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
@@ -692,128 +691,64 @@ defineOptions({ name: 'ContentStyleCopywriting' })
             :key="prompt.id"
             class="all-prompt-tag"
             :class="{ 'all-prompt-tag-selected': selectedPromptId === prompt.id }"
-            @click="selectPrompt(prompt)">
+            @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" 
+          <a-button
+            type="primary"
             @click="loadUserPrompts"
-            :loading="loadingPrompts">
+            :loading="loadingPrompts"
+          >
             刷新列表
           </a-button>
         </a-space>
       </template>
     </a-modal>
-  </div>
+  </BasicLayout>
 </template>
 
 <style scoped>
-/* 页面整体样式 */
-.copywriting-page {
-  background: var(--color-bg);
-  min-height: 100vh;
+/* 主要内容区域 */
+.main-content {
   padding: 0;
 }
 
-/* 页面标题区域 */
-.page-header {
-  padding: 20px 0 30px 0;
-  text-align: center;
-}
-
-.header-content {
-  max-width: 600px;
-  margin: 0 auto;
-  padding: 0 20px;
-}
-
-.page-title {
-  font-size: 2rem;
-  font-weight: 600;
-  color: var(--color-text);
-  margin: 0 0 8px 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-}
-
-.title-icon {
-  font-size: 2rem;
-}
-
-.page-subtitle {
-  font-size: 1rem;
-  color: var(--color-text-secondary);
-  margin: 0;
-  font-weight: 400;
-}
-
-
-
-/* 区域标题 */
-.section-header {
-  margin-bottom: 16px;
-}
-
-.section-icon {
-  font-size: 1.2rem;
-  margin-bottom: 4px;
-  display: block;
-}
-
-.section-title {
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: #6b7280;
-  margin: 0 0 4px 0;
-}
-
-.section-desc {
-  font-size: 0.9rem;
-  color: #9ca3af;
-  margin: 0;
-  font-weight: 400;
-}
-
 /* 卡片样式 */
 .form-card,
 .result-card {
-  background: var(--color-surface);
+  background: var(--bg-primary);
   border-radius: 8px;
-  box-shadow: var(--shadow-sm);
-  border: 1px solid var(--color-border);
-  transition: all 0.3s ease;
-}
-
-.form-card:hover,
-.result-card:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  border: 1px solid transparent;
 }
 
 .form-card :deep(.ant-card-head),
 .result-card :deep(.ant-card-head) {
-  background: var(--color-surface);
-  border-bottom: 1px solid var(--color-border);
+  background: var(--bg-primary);
+  border: none;
   padding: 16px 20px;
+  min-height: auto;
 }
 
 .form-card :deep(.ant-card-head-title),
 .result-card :deep(.ant-card-head-title) {
-  font-size: 1.05rem;
-  font-weight: 700;
-  color: var(--color-text);
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  padding: 0;
+  margin: 0;
 }
 
 .form-card :deep(.ant-card-body),
@@ -827,7 +762,7 @@ defineOptions({ name: 'ContentStyleCopywriting' })
 }
 
 .form-item {
-  margin-bottom: 20px;
+  margin-bottom: 18px;
 }
 
 .form-item :deep(.ant-form-item-label) {
@@ -835,16 +770,17 @@ defineOptions({ name: 'ContentStyleCopywriting' })
 }
 
 .form-item :deep(.ant-form-item-label > label) {
-  font-weight: 600;
-  color: var(--color-text);
+  font-weight: 500;
+  color: var(--text-primary);
   font-size: 14px;
+  margin-bottom: 4px;
 }
 
 /* 表单标签后的内联提示（不使用 emoji） */
 .form-tip-inline {
   margin-left: var(--space-2);
-  font-size: 14px;
-  color: var(--color-text-secondary);
+  font-size: 13px;
+  color: var(--text-secondary);
   font-weight: 400;
 }
 
@@ -852,27 +788,25 @@ defineOptions({ name: 'ContentStyleCopywriting' })
 .custom-input,
 .custom-textarea {
   border-radius: 6px;
-  border: 1px solid var(--color-border);
-  transition: all 0.3s ease;
-  background: var(--color-surface);
-  color: var(--color-text);
+  border: 1px solid var(--border-light);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 14px;
 }
 
 .custom-input:focus,
 .custom-textarea:focus {
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 2px var(--color-primary-glow);
-  background: var(--color-surface);
+  border-color: var(--primary-color, #1677ff);
+  box-shadow: none;
 }
 
 .custom-input:hover,
 .custom-textarea:hover {
-  border-color: var(--color-border);
-  background: var(--color-surface);
+  border-color: var(--border-light-hover, #d9d9d9);
 }
 
 .custom-textarea::placeholder {
-  color: var(--color-text-secondary);
+  color: var(--text-disabled);
 }
 
 
@@ -905,18 +839,23 @@ defineOptions({ name: 'ContentStyleCopywriting' })
 /* 操作按钮样式 */
 .action-btn {
   border-radius: 6px;
-  transition: all 0.3s ease;
   font-weight: 500;
+  font-size: 13px;
+  padding: 4px 12px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
 }
 
 .action-btn:hover {
-  background: rgba(59, 130, 246, 0.08);
+  background: rgba(22, 119, 255, 0.08);
 }
 
 .copy-btn:hover {
-  background: rgba(59, 130, 246, 0.12);
-  border-color: var(--color-primary);
-  color: #fff;
+  background: rgba(22, 119, 255, 0.15);
+  border-color: var(--primary-color, #1677ff);
+  color: var(--primary-color, #1677ff);
 }
 
 /* 幅度滑块样式 */
@@ -995,32 +934,29 @@ defineOptions({ name: 'ContentStyleCopywriting' })
 .edit-textarea {
   margin-bottom: 12px;
   border-radius: 6px;
-  background: var(--color-surface);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-light);
   font-size: 14px;
   line-height: 1.6;
 }
 
 .edit-textarea:focus {
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 2px var(--color-primary-glow);
-  background: var(--color-surface);
-  color: var(--color-text);
+  border-color: var(--primary-color, #1677ff);
+  box-shadow: none;
 }
 
 .edit-textarea:hover {
-  border-color: var(--color-border);
+  border-color: var(--border-light-hover, #d9d9d9);
 }
 
 .edit-textarea::placeholder {
-  color: var(--color-text-secondary);
+  color: var(--text-disabled);
 }
 
 .edit-actions {
   text-align: right;
   padding-top: 12px;
-  border-top: 1px solid var(--color-border);
   margin-top: 12px;
 }
 
@@ -1034,7 +970,6 @@ defineOptions({ name: 'ContentStyleCopywriting' })
 .save-btn:hover {
   background: var(--color-primary);
   filter: brightness(1.04);
-  box-shadow: var(--shadow-blue);
 }
 
 .cancel-btn {
@@ -1048,14 +983,13 @@ defineOptions({ name: 'ContentStyleCopywriting' })
 }
 
 .generated-content {
-  padding: var(--space-6);
-  background: var(--color-surface);
-  border-radius: var(--radius-card);
-  border: 1px solid var(--color-border);
-  line-height: 1.9;
-  color: var(--color-text);
+  padding: 20px;
+  background: var(--bg-primary);
+  border-radius: 6px;
+  line-height: 1.8;
+  color: var(--text-primary);
   min-height: 400px;
-  font-size: 15px;
+  font-size: 14px;
   white-space: pre-wrap;
   word-break: break-word;
   -webkit-font-smoothing: antialiased;
@@ -1066,30 +1000,27 @@ defineOptions({ name: 'ContentStyleCopywriting' })
   font-size: 22px;
   font-weight: 600;
   margin-bottom: var(--space-4);
-  color: var(--color-text);
+  color: var(--text-primary);
   padding-bottom: var(--space-2);
-  border-bottom: 1px solid var(--color-border);
 }
 
 .generated-content :deep(h2) {
   font-size: 19px;
   font-weight: 600;
   margin: 22px 0 12px 0;
-  color: var(--color-text);
-  padding-bottom: 6px;
-  border-bottom: 1px solid var(--color-border);
+  color: var(--text-primary);
 }
 
 .generated-content :deep(h3) {
   font-size: 16px;
   font-weight: 600;
   margin: 18px 0 10px 0;
-  color: var(--color-text);
+  color: var(--text-primary);
 }
 
 .generated-content :deep(p) {
   margin: 12px 0 14px 0;
-  color: var(--color-text);
+  color: var(--text-primary);
   line-height: 1.9;
   font-size: 15px;
 }
@@ -1102,39 +1033,36 @@ defineOptions({ name: 'ContentStyleCopywriting' })
 
 .generated-content :deep(li) {
   margin: 6px 0;
-  color: var(--color-text);
+  color: var(--text-primary);
   line-height: 1.9;
   font-size: 15px;
 }
 
 .generated-content :deep(strong) {
   font-weight: 600;
-  color: var(--color-text);
+  color: var(--text-primary);
 }
 
 .generated-content :deep(code) {
-  background: var(--color-slate-100);
+  background: var(--bg-secondary);
   padding: 3px 8px;
   border-radius: 4px;
   font-family: 'Courier New', monospace;
   font-size: 13.5px;
   color: var(--color-red-500);
-  border: 1px solid var(--color-border);
 }
 
 .generated-content :deep(pre) {
-  background: var(--color-slate-100);
+  background: var(--bg-secondary);
   padding: 16px 18px;
   border-radius: 6px;
   overflow-x: auto;
   margin: 12px 0;
-  border: 1px solid var(--color-border);
 }
 
 .generated-content :deep(pre code) {
   background: transparent;
   padding: 0;
-  border: none;
   color: var(--color-red-500);
 }
 
@@ -1145,7 +1073,7 @@ defineOptions({ name: 'ContentStyleCopywriting' })
   border-left: 4px solid var(--color-primary);
   border-radius: 0 6px 6px 0;
   font-style: italic;
-  color: var(--color-text);
+  color: var(--text-primary);
 }
 
 /* 提示词标签样式 */
@@ -1163,31 +1091,28 @@ defineOptions({ name: 'ContentStyleCopywriting' })
   display: inline-flex;
   align-items: center;
   padding: 6px 14px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
+  background: var(--bg-primary);
+  border: 1px solid var(--border-light);
   border-radius: 16px;
   cursor: pointer;
-  transition: all 0.2s ease;
   font-size: 13px;
   font-weight: 500;
-  color: var(--color-text);
+  color: var(--text-primary);
 }
 
 .prompt-tag:hover {
-  border-color: var(--color-primary);
+  border-color: var(--primary-color, #1677ff);
   background: rgba(22, 119, 255, 0.08);
-  transform: translateY(-1px);
 }
 
 .prompt-tag-selected {
-  border-color: var(--color-primary);
-  background: var(--color-primary);
+  border-color: var(--primary-color, #1677ff);
+  background: var(--primary-color, #1677ff);
   color: #fff;
 }
 
 .prompt-tag-selected:hover {
-  background: var(--color-primary);
-  filter: brightness(1.1);
+  background: var(--primary-color, #1677ff);
 }
 
 .prompt-tag-name {
@@ -1221,31 +1146,28 @@ defineOptions({ name: 'ContentStyleCopywriting' })
   display: inline-flex;
   align-items: center;
   padding: 8px 16px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
+  background: var(--bg-primary);
+  border: 1px solid var(--border-light);
   border-radius: 16px;
   cursor: pointer;
-  transition: all 0.2s ease;
   font-size: 14px;
   font-weight: 500;
-  color: var(--color-text);
+  color: var(--text-primary);
 }
 
 .all-prompt-tag:hover {
-  border-color: var(--color-primary);
+  border-color: var(--primary-color, #1677ff);
   background: rgba(22, 119, 255, 0.08);
-  transform: translateY(-1px);
 }
 
 .all-prompt-tag-selected {
-  border-color: var(--color-primary);
-  background: var(--color-primary);
+  border-color: var(--primary-color, #1677ff);
+  background: var(--primary-color, #1677ff);
   color: #fff;
 }
 
 .all-prompt-tag-selected:hover {
-  background: var(--color-primary);
-  filter: brightness(1.1);
+  background: var(--primary-color, #1677ff);
 }
 
 .all-prompt-tag-name {
diff --git a/frontend/app/web-gold/src/views/kling/IdentifyFace.vue b/frontend/app/web-gold/src/views/kling/IdentifyFace.vue
index 96cf72efd7..7708e00885 100644
--- a/frontend/app/web-gold/src/views/kling/IdentifyFace.vue
+++ b/frontend/app/web-gold/src/views/kling/IdentifyFace.vue
@@ -1,288 +1,290 @@
 <template>
-  <div class="kling-page">
-    <div class="kling-content">
-      <!-- 左侧配置 -->
-      <div class="upload-panel">
-        <!-- 文案输入 -->
-        <div class="section">
-          <h3>文案</h3>
-          <a-textarea
-            v-model:value="ttsText"
-            :placeholder="textareaPlaceholder"
-            :rows="4"
-            :maxlength="maxTextLength"
-            :show-count="true"
-            class="tts-textarea"
-          />
-          <div v-if="identifyState.identified && faceDuration > 0" class="text-hint">
-            <span class="hint-icon">💡</span>
-            <span>视频中人脸出现时长约 {{ (faceDuration / 1000).toFixed(1) }} 秒，建议文案不超过 {{ suggestedMaxChars }} 字</span>
-          </div>
-        </div>
-
-        <!-- 音色选择 -->
-        <div class="section">
-          <h3>音色</h3>
-          <VoiceSelector ref="voiceSelectorRef" @select="handleVoiceSelect" />
-        </div>
-
-        <!-- TTS 控制 -->
-        <div class="section">
-          <h3>语音控制</h3>
-          <div class="control-group">
-            <div class="control-label">语速</div>
-            <div class="slider-card">
-              <div class="slider-info">
-                <div class="slider-value">{{ speechRateDisplay }}</div>
-                <button class="reset-btn" @click="speechRate = 1">重置</button>
-              </div>
-              <a-slider
-                v-model:value="speechRate"
-                :min="0.5"
-                :max="2"
-                :step="0.1"
-                :marks="speechRateMarks"
-                :tooltip-open="false"
-              />
+  <FullWidthLayout :show-padding="false">
+    <div class="kling-page">
+      <div class="kling-content">
+        <!-- 左侧配置 -->
+        <div class="upload-panel">
+          <!-- 文案输入 -->
+          <div class="section">
+            <h3>文案</h3>
+            <a-textarea
+              v-model:value="ttsText"
+              :placeholder="textareaPlaceholder"
+              :rows="4"
+              :maxlength="maxTextLength"
+              :show-count="true"
+              class="tts-textarea"
+            />
+            <div v-if="identifyState.identified && faceDuration > 0" class="text-hint">
+              <span class="hint-icon">💡</span>
+              <span>视频中人脸出现时长约 {{ (faceDuration / 1000).toFixed(1) }} 秒，建议文案不超过 {{ suggestedMaxChars }} 字</span>
             </div>
           </div>
-        </div>
 
-        <!-- 视频选择 -->
-        <div class="section">
-          <h3>视频</h3>
+          <!-- 音色选择 -->
+          <div class="section">
+            <h3>音色</h3>
+            <VoiceSelector ref="voiceSelectorRef" @select="handleVoiceSelect" />
+          </div>
 
-          <!-- 双选项卡片 -->
-          <div class="video-selection-cards">
-            <!-- 上传选项 -->
-            <div
-              class="video-option-card"
-              :class="{ selected: videoState.videoSource === 'upload' }"
-              @click="handleSelectUpload"
-            >
-              <div class="card-icon">
-                <UploadOutlined />
-              </div>
-              <div class="card-content">
-                <h4>点击上传新视频</h4>
-                <p>支持 MP4、MOV 格式</p>
-              </div>
-            </div>
-
-            <!-- 选择选项 -->
-            <div
-              class="video-option-card"
-              :class="{ selected: videoState.videoSource === 'select' }"
-              @click="handleSelectFromLibrary"
-            >
-              <div class="card-icon">
-                <PictureOutlined />
-              </div>
-              <div class="card-content">
-                <h4>从素材库选择</h4>
-                <p>选择已上传的视频</p>
+          <!-- TTS 控制 -->
+          <div class="section">
+            <h3>语音控制</h3>
+            <div class="control-group">
+              <div class="control-label">语速</div>
+              <div class="slider-card">
+                <div class="slider-info">
+                  <div class="slider-value">{{ speechRateDisplay }}</div>
+                  <button class="reset-btn" @click="speechRate = 1">重置</button>
+                </div>
+                <a-slider
+                  v-model:value="speechRate"
+                  :min="0.5"
+                  :max="2"
+                  :step="0.1"
+                  :marks="speechRateMarks"
+                  :tooltip-open="false"
+                />
               </div>
             </div>
           </div>
 
-          <!-- 已选择视频的预览 -->
-          <div v-if="videoState.selectedVideo" class="selected-video-preview">
-            <div class="preview-thumbnail">
-              <img
-                :src="getVideoPreviewUrl(videoState.selectedVideo)"
-                :alt="videoState.selectedVideo.fileName"
-              />
-              <div class="video-duration-badge">
-                {{ formatDuration(videoState.selectedVideo.duration) }}
+          <!-- 视频选择 -->
+          <div class="section">
+            <h3>视频</h3>
+
+            <!-- 双选项卡片 -->
+            <div class="video-selection-cards">
+              <!-- 上传选项 -->
+              <div
+                class="video-option-card"
+                :class="{ selected: videoState.videoSource === 'upload' }"
+                @click="handleSelectUpload"
+              >
+                <div class="card-icon">
+                  <UploadOutlined />
+                </div>
+                <div class="card-content">
+                  <h4>点击上传新视频</h4>
+                  <p>支持 MP4、MOV 格式</p>
+                </div>
+              </div>
+
+              <!-- 选择选项 -->
+              <div
+                class="video-option-card"
+                :class="{ selected: videoState.videoSource === 'select' }"
+                @click="handleSelectFromLibrary"
+              >
+                <div class="card-icon">
+                  <PictureOutlined />
+                </div>
+                <div class="card-content">
+                  <h4>从素材库选择</h4>
+                  <p>选择已上传的视频</p>
+                </div>
               </div>
             </div>
-            <div class="preview-info">
-              <div class="video-title">{{ videoState.selectedVideo.fileName }}</div>
-              <div class="video-meta">
-                <span>{{ formatFileSize(videoState.selectedVideo.fileSize) }}</span>
-                <span>{{ formatDuration(videoState.selectedVideo.duration) }}</span>
+
+            <!-- 已选择视频的预览 -->
+            <div v-if="videoState.selectedVideo" class="selected-video-preview">
+              <div class="preview-thumbnail">
+                <img
+                  :src="getVideoPreviewUrl(videoState.selectedVideo)"
+                  :alt="videoState.selectedVideo.fileName"
+                />
+                <div class="video-duration-badge">
+                  {{ formatDuration(videoState.selectedVideo.duration) }}
+                </div>
+              </div>
+              <div class="preview-info">
+                <div class="video-title">{{ videoState.selectedVideo.fileName }}</div>
+                <div class="video-meta">
+                  <span>{{ formatFileSize(videoState.selectedVideo.fileSize) }}</span>
+                  <span>{{ formatDuration(videoState.selectedVideo.duration) }}</span>
+                </div>
               </div>
-            </div>
-            <a-button type="link" size="small" @click="replaceVideo">
-              更换
-            </a-button>
-          </div>
-
-          <!-- 上传区域（仅在选择上传时显示） -->
-          <div
-            v-if="videoState.videoSource === 'upload'"
-            class="upload-zone"
-            @drop.prevent="handleDrop"
-            @dragover.prevent="dragOver = true"
-            @dragleave.prevent="dragOver = false"
-          >
-            <input ref="fileInput" type="file" accept=".mp4,.mov" style="display: none" @change="handleFileSelect" />
-
-            <div v-if="!videoState.uploadedVideo" class="upload-placeholder">
-              <h3>拖拽或点击上传视频文件</h3>
-              <p>支持 MP4、MOV</p>
-              <a-button type="primary" size="large" @click="triggerFileSelect">
-                选择文件
-              </a-button>
-            </div>
-
-            <div v-else class="video-preview">
-              <video :src="videoState.uploadedVideo" controls class="preview-video"></video>
-              <p>{{ videoState.videoFile?.name }}</p>
               <a-button type="link" size="small" @click="replaceVideo">
                 更换
               </a-button>
             </div>
-          </div>
-        </div>
 
-        <!-- 素材校验结果 -->
-        <div v-if="materialValidation.videoDuration > 0 && materialValidation.audioDuration > 0" class="section">
-          <h3>素材校验</h3>
-          <div class="validation-result" :class="{ 'validation-passed': materialValidation.isValid, 'validation-failed': !materialValidation.isValid }">
-            <div class="validation-status">
-              <span class="status-icon">{{ materialValidation.isValid ? '✅' : '❌' }}</span>
-              <span class="status-text">{{ materialValidation.isValid ? '校验通过' : '校验失败' }}</span>
-            </div>
-
-            <!-- 时长对比进度条 -->
-            <div class="duration-comparison">
-              <div class="duration-bar">
-                <div class="duration-label">
-                  <span>音频时长</span>
-                  <span class="duration-value">{{ (materialValidation.audioDuration / 1000).toFixed(1) }}s</span>
-                </div>
-                <div class="progress-bar audio-bar">
-                  <div
-                    class="progress-fill"
-                    :style="{ width: `${(materialValidation.audioDuration / Math.max(materialValidation.videoDuration, materialValidation.audioDuration)) * 100}%` }"
-                  ></div>
-                </div>
-              </div>
-
-              <div class="duration-bar">
-                <div class="duration-label">
-                  <span>视频时长</span>
-                  <span class="duration-value">{{ (materialValidation.videoDuration / 1000).toFixed(1) }}s</span>
-                </div>
-                <div class="progress-bar video-bar">
-                  <div
-                    class="progress-fill"
-                    :class="{ 'success': materialValidation.isValid, 'error': !materialValidation.isValid }"
-                    :style="{ width: `${(materialValidation.videoDuration / Math.max(materialValidation.videoDuration, materialValidation.audioDuration)) * 100}%` }"
-                  ></div>
-                </div>
-              </div>
-            </div>
-
-            <!-- 失败提示和建议 -->
-            <div v-if="!materialValidation.isValid" class="validation-error">
-              <p class="error-message">
-                视频时长必须大于音频时长才能生成数字人视频
-              </p>
-              <div class="quick-actions">
-                <a-button size="small" @click="replaceVideo">更换视频</a-button>
-                <a-button size="small" @click="handleSimplifyScript">精简文案</a-button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- 配音生成与校验（仅在识别后显示） -->
-        <div v-if="identifyState.identified" class="section audio-generation-section">
-          <h3>配音生成与校验</h3>
-
-          <!-- 生成配音按钮 -->
-          <div class="generate-audio-row">
-            <a-button
-              type="default"
-              size="large"
-              :disabled="!canGenerateAudio"
-              :loading="audioState.generating"
-              block
-              @click="generateAudio"
+            <!-- 上传区域（仅在选择上传时显示） -->
+            <div
+              v-if="videoState.videoSource === 'upload'"
+              class="upload-zone"
+              @drop.prevent="handleDrop"
+              @dragover.prevent="dragOver = true"
+              @dragleave.prevent="dragOver = false"
             >
-              {{ audioState.generating ? '生成中...' : '生成配音（用于校验时长）' }}
-            </a-button>
+              <input ref="fileInput" type="file" accept=".mp4,.mov" style="display: none" @change="handleFileSelect" />
+
+              <div v-if="!videoState.uploadedVideo" class="upload-placeholder">
+                <h3>拖拽或点击上传视频文件</h3>
+                <p>支持 MP4、MOV</p>
+                <a-button type="primary" size="large" @click="triggerFileSelect">
+                  选择文件
+                </a-button>
+              </div>
+
+              <div v-else class="video-preview">
+                <video :src="videoState.uploadedVideo" controls class="preview-video"></video>
+                <p>{{ videoState.videoFile?.name }}</p>
+                <a-button type="link" size="small" @click="replaceVideo">
+                  更换
+                </a-button>
+              </div>
+            </div>
           </div>
 
-          <!-- 音频预览（生成后显示） -->
-          <div v-if="audioState.generated" class="audio-preview">
-            <div class="audio-info">
-              <h4>生成的配音</h4>
-              <div class="duration-info">
-                <span class="label">音频时长：</span>
-                <span class="value">{{ (audioState.durationMs / 1000).toFixed(1) }} 秒</span>
+          <!-- 素材校验结果 -->
+          <div v-if="materialValidation.videoDuration > 0 && materialValidation.audioDuration > 0" class="section">
+            <h3>素材校验</h3>
+            <div class="validation-result" :class="{ 'validation-passed': materialValidation.isValid, 'validation-failed': !materialValidation.isValid }">
+              <div class="validation-status">
+                <span class="status-icon">{{ materialValidation.isValid ? '✅' : '❌' }}</span>
+                <span class="status-text">{{ materialValidation.isValid ? '校验通过' : '校验失败' }}</span>
               </div>
-              <div class="duration-info">
-                <span class="label">人脸区间：</span>
-                <span class="value">{{ (faceDuration / 1000).toFixed(1) }} 秒</span>
+
+              <!-- 时长对比进度条 -->
+              <div class="duration-comparison">
+                <div class="duration-bar">
+                  <div class="duration-label">
+                    <span>音频时长</span>
+                    <span class="duration-value">{{ (materialValidation.audioDuration / 1000).toFixed(1) }}s</span>
+                  </div>
+                  <div class="progress-bar audio-bar">
+                    <div
+                      class="progress-fill"
+                      :style="{ width: `${(materialValidation.audioDuration / Math.max(materialValidation.videoDuration, materialValidation.audioDuration)) * 100}%` }"
+                    ></div>
+                  </div>
+                </div>
+
+                <div class="duration-bar">
+                  <div class="duration-label">
+                    <span>视频时长</span>
+                    <span class="duration-value">{{ (materialValidation.videoDuration / 1000).toFixed(1) }}s</span>
+                  </div>
+                  <div class="progress-bar video-bar">
+                    <div
+                      class="progress-fill"
+                      :class="{ 'success': materialValidation.isValid, 'error': !materialValidation.isValid }"
+                      :style="{ width: `${(materialValidation.videoDuration / Math.max(materialValidation.videoDuration, materialValidation.audioDuration)) * 100}%` }"
+                    ></div>
+                  </div>
+                </div>
               </div>
-              <div class="duration-info" :class="{ 'validation-passed': audioState.validationPassed, 'validation-failed': !audioState.validationPassed }">
-                <span class="label">校验结果：</span>
-                <span class="value">
-                  {{ audioState.validationPassed ? '✅ 通过' : '❌ 不通过（需至少2秒重合）' }}
-                </span>
+
+              <!-- 失败提示和建议 -->
+              <div v-if="!materialValidation.isValid" class="validation-error">
+                <p class="error-message">
+                  视频时长必须大于音频时长才能生成数字人视频
+                </p>
+                <div class="quick-actions">
+                  <a-button size="small" @click="replaceVideo">更换视频</a-button>
+                  <a-button size="small" @click="handleSimplifyScript">精简文案</a-button>
+                </div>
               </div>
             </div>
+          </div>
 
-            <!-- 音频播放器 -->
-            <div class="audio-player">
-              <audio
-                v-if="audioState.generated.audioBase64"
-                :src="`data:audio/mp3;base64,${audioState.generated.audioBase64}`"
-                controls
-                class="audio-element"
-              />
-              <audio
-                v-else-if="audioState.generated.audioUrl"
-                :src="audioState.generated.audioUrl"
-                controls
-                class="audio-element"
-              />
-            </div>
+          <!-- 配音生成与校验（仅在识别后显示） -->
+          <div v-if="identifyState.identified" class="section audio-generation-section">
+            <h3>配音生成与校验</h3>
 
-            <!-- 重新生成按钮 -->
-            <div class="regenerate-row">
+            <!-- 生成配音按钮 -->
+            <div class="generate-audio-row">
               <a-button
-                type="link"
-                size="small"
-                @click="generateAudio"
+                type="default"
+                size="large"
+                :disabled="!canGenerateAudio"
                 :loading="audioState.generating"
+                block
+                @click="generateAudio"
               >
-                重新生成
+                {{ audioState.generating ? '生成中...' : '生成配音（用于校验时长）' }}
               </a-button>
             </div>
+
+            <!-- 音频预览（生成后显示） -->
+            <div v-if="audioState.generated" class="audio-preview">
+              <div class="audio-info">
+                <h4>生成的配音</h4>
+                <div class="duration-info">
+                  <span class="label">音频时长：</span>
+                  <span class="value">{{ (audioState.durationMs / 1000).toFixed(1) }} 秒</span>
+                </div>
+                <div class="duration-info">
+                  <span class="label">人脸区间：</span>
+                  <span class="value">{{ (faceDuration / 1000).toFixed(1) }} 秒</span>
+                </div>
+                <div class="duration-info" :class="{ 'validation-passed': audioState.validationPassed, 'validation-failed': !audioState.validationPassed }">
+                  <span class="label">校验结果：</span>
+                  <span class="value">
+                    {{ audioState.validationPassed ? '✅ 通过' : '❌ 不通过（需至少2秒重合）' }}
+                  </span>
+                </div>
+              </div>
+
+              <!-- 音频播放器 -->
+              <div class="audio-player">
+                <audio
+                  v-if="audioState.generated.audioBase64"
+                  :src="`data:audio/mp3;base64,${audioState.generated.audioBase64}`"
+                  controls
+                  class="audio-element"
+                />
+                <audio
+                  v-else-if="audioState.generated.audioUrl"
+                  :src="audioState.generated.audioUrl"
+                  controls
+                  class="audio-element"
+                />
+              </div>
+
+              <!-- 重新生成按钮 -->
+              <div class="regenerate-row">
+                <a-button
+                  type="link"
+                  size="small"
+                  @click="generateAudio"
+                  :loading="audioState.generating"
+                >
+                  重新生成
+                </a-button>
+              </div>
+            </div>
+          </div>
+
+          <!-- 按钮组 -->
+          <div class="action-buttons">
+            <a-button
+              type="primary"
+              size="large"
+              :disabled="!canGenerate"
+              block
+              @click="generateDigitalHuman"
+            >
+              生成数字人视频
+            </a-button>
+
+            <!-- 添加提示信息 -->
+            <div v-if="canGenerate && !audioState.validationPassed" class="generate-hint">
+              <span class="hint-icon">⚠️</span>
+              <span>请先生成配音并通过时长校验</span>
+            </div>
           </div>
         </div>
 
-        <!-- 按钮组 -->
-        <div class="action-buttons">
-          <a-button
-            type="primary"
-            size="large"
-            :disabled="!canGenerate"
-            block
-            @click="generateDigitalHuman"
-          >
-            生成数字人视频
-          </a-button>
-
-          <!-- 添加提示信息 -->
-          <div v-if="canGenerate && !audioState.validationPassed" class="generate-hint">
-            <span class="hint-icon">⚠️</span>
-            <span>请先生成配音并通过时长校验</span>
-          </div>
-        </div>
+        <!-- 右侧结果 -->
+        <ResultPanel @videoLoaded="handleVideoLoaded" />
       </div>
 
-      <!-- 右侧结果 -->
-      <ResultPanel @videoLoaded="handleVideoLoaded" />
+      <!-- 视频选择器弹窗 -->
+      <VideoSelector v-model:open="videoState.selectorVisible" @select="handleVideoSelect" />
     </div>
-
-    <!-- 视频选择器弹窗 -->
-    <VideoSelector v-model:open="videoState.selectorVisible" @select="handleVideoSelect" />
-  </div>
+  </FullWidthLayout>
 </template>
 
 <script setup lang="ts">
@@ -292,6 +294,7 @@ import { useVoiceCopyStore } from '@/stores/voiceCopy'
 import VideoSelector from '@/components/VideoSelector.vue'
 import VoiceSelector from '@/components/VoiceSelector.vue'
 import ResultPanel from '@/components/ResultPanel.vue'
+import FullWidthLayout from '@/layouts/components/FullWidthLayout.vue'
 
 // Controller Hook
 import { useIdentifyFaceController } from './hooks/useIdentifyFaceController'
@@ -363,34 +366,33 @@ onMounted(async () => {
 
 <style scoped lang="less">
 // ========== 公共变量 ==========
-@primary-color: var(--color-blue-500);
-@primary-bg-10: rgba(59, 130, 246, 0.1);
-@primary-bg-15: rgba(59, 130, 246, 0.15);
-@primary-bg-20: rgba(59, 130, 246, 0.2);
-@primary-bg-30: rgba(59, 130, 246, 0.3);
-@primary-bg-50: rgba(59, 130, 246, 0.5);
+@primary-color: var(--primary-color, #1677ff);
+@primary-bg-10: rgba(22, 119, 255, 0.1);
+@primary-bg-15: rgba(22, 119, 255, 0.15);
+@primary-bg-20: rgba(22, 119, 255, 0.2);
+@primary-bg-30: rgba(22, 119, 255, 0.3);
+@primary-bg-50: rgba(22, 119, 255, 0.5);
 @success-color: var(--color-green-500);
 @error-color: var(--color-red-500);
 @warning-color: var(--color-yellow-500);
-@surface-bg: var(--color-surface);
-@surface-bg-25: var(--color-surface);
-@surface-bg-30: var(--color-surface);
-@text-primary: var(--color-text);
-@text-secondary: var(--color-text-secondary);
-@panel-bg: var(--color-surface);
+@surface-bg: var(--bg-primary);
+@surface-bg-25: var(--bg-primary);
+@surface-bg-30: var(--bg-secondary);
+@text-primary: var(--text-primary);
+@text-secondary: var(--text-secondary);
+@panel-bg: var(--bg-primary);
 
 /* ========== 页面布局 ========== */
-.kling-page { padding: 24px; min-height: 100vh; }
+.kling-page { padding: 0; }
 .kling-content {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
-  margin: 0 auto;
 }
 .upload-panel,
 .result-panel {
   background: @panel-bg;
-  border-radius: 16px;
+  border-radius: 12px;
   padding: 24px;
 }
 
@@ -401,7 +403,8 @@ onMounted(async () => {
 .audio-info h4 {
   color: @text-primary;
   margin-bottom: 12px;
-  font-size: 18px;
+  font-size: 16px;
+  font-weight: 600;
 }
 .section h3 { margin-bottom: 12px; }
 .card-content h4, .audio-info h4 { margin-bottom: 12px; font-size: 14px; }
@@ -410,9 +413,8 @@ onMounted(async () => {
 
 /* ========== 表单控件 ========== */
 .tts-textarea {
-  background: @surface-bg-30;
-  border: 1px solid @primary-bg-20;
-  border-radius: 8px;
+  background: var(--bg-primary);
+  border-radius: 6px;
   padding: 12px;
   color: @text-primary;
 }
@@ -423,8 +425,8 @@ onMounted(async () => {
   gap: 6px;
   margin-top: 8px;
   padding: 8px 12px;
-  background: @primary-bg-10;
-  border: 1px solid @primary-bg-20;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-light);
   border-radius: 6px;
   font-size: 13px;
   color: @text-secondary;
@@ -440,10 +442,10 @@ onMounted(async () => {
   margin-bottom: 8px;
 }
 .slider-card {
-  border: 1px solid @primary-bg-20;
-  border-radius: 12px;
+  border: 1px solid var(--border-light);
+  border-radius: 8px;
   padding: 10px 12px;
-  background: @surface-bg-25;
+  background: var(--bg-primary);
 }
 .slider-info {
   display: flex;
@@ -460,9 +462,9 @@ onMounted(async () => {
 }
 .reset-btn {
   padding: 4px 12px;
-  border: 1px solid #d9d9d9;
-  background: #ffffff;
-  color: #000000;
+  border: 1px solid var(--border-light);
+  background: var(--bg-primary);
+  color: @text-primary;
   border-radius: 4px;
   cursor: pointer;
   font-size: 12px;
@@ -480,31 +482,29 @@ onMounted(async () => {
   align-items: center;
   gap: 16px;
   padding: 20px;
-  border: 2px dashed @primary-bg-30;
-  border-radius: 12px;
-  background: @surface-bg;
+  border: 1px solid var(--border-light);
+  border-radius: 8px;
+  background: var(--bg-primary);
   cursor: pointer;
-  transition: all 0.3s;
 }
 .video-option-card:hover {
-  border-color: @primary-bg-50;
-  background: @primary-bg-10;
+  border-color: @primary-color;
+  background: var(--bg-secondary);
 }
 .video-option-card.selected {
   border-color: @primary-color;
   background: @primary-bg-10;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
 }
 .card-icon {
-  font-size: 32px;
+  font-size: 24px;
   color: @primary-color;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 48px;
-  height: 48px;
+  width: 40px;
+  height: 40px;
   background: @primary-bg-10;
-  border-radius: 50%;
+  border-radius: 8px;
 }
 
 /* ========== 视频预览 ========== */
@@ -513,8 +513,8 @@ onMounted(async () => {
   align-items: center;
   gap: 12px;
   padding: 12px;
-  background: @surface-bg-30;
-  border: 1px solid @primary-bg-20;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-light);
   border-radius: 8px;
   margin-bottom: 16px;
 }
@@ -569,8 +569,8 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 2px dashed @primary-bg-30;
-  border-radius: 12px;
+  border: 2px dashed var(--border-light);
+  border-radius: 8px;
 }
 .upload-placeholder {
   text-align: center;
@@ -591,9 +591,9 @@ onMounted(async () => {
 /* ========== 验证结果 ========== */
 .validation-result {
   padding: 16px;
-  background: @surface-bg;
+  background: var(--bg-primary);
   border-radius: 8px;
-  border: 1px solid @primary-bg-20;
+  border: 1px solid var(--border-light);
 }
 .validation-result.validation-passed {
   border-color: rgba(82, 196, 26, 0.3);
@@ -638,7 +638,6 @@ onMounted(async () => {
 }
 .progress-fill {
   height: 100%;
-  transition: width 0.3s;
   border-radius: 4px;
 }
 .audio-bar .progress-fill {
@@ -654,8 +653,8 @@ onMounted(async () => {
 /* ========== 错误提示 ========== */
 .validation-error {
   padding: 12px;
-  background: rgba(255, 77, 79, 0.1);
-  border: 1px solid rgba(255, 77, 79, 0.3);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-light);
   border-radius: 6px;
 }
 .error-message {
@@ -669,14 +668,14 @@ onMounted(async () => {
 .audio-generation-section {
   margin-bottom: 24px;
   padding: 16px;
-  background: rgba(255, 255, 255, 0.03);
-  border-radius: 12px;
-  border: 1px solid @primary-bg-15;
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  border: 1px solid var(--border-light);
 }
 .generate-audio-row { margin-bottom: 16px; }
 .audio-preview {
   padding: 16px;
-  background: @surface-bg;
+  background: var(--bg-primary);
   border-radius: 8px;
 }
 .duration-info {