fix(cover): 修复封面编辑器多项问题；加长草稿保存/全局timeout (#2033)

1. 封面设置弹窗(CoverSettingsModal):
   - 补充底部『取消/确认应用』按钮，解决选模板后无确认入口问题
   - 选中模板加紫色✓角标，空状态提示
   - 删除无效的『选择素材文件/导出全部』占位按钮

2. 自定义封面编辑器(CoverEditorModal):
   - 主/副标题文字改为可输入的TextArea(此前是只读div，完全无法输入)
   - 预览canvas修复：默认背景改为深蓝渐变而非大黑框；蒙版默认关闭且opacity=40%；
     人像默认关闭且占位用浅蓝；支持上传背景图/人像图
   - 面板分组按『基础/背景/主标题/副标题/人像/蒙版』重组，默认展开基础+背景+主标题
   - 新增backgroundColor/backgroundImage/portraitImage类型字段
   - 文字按charsPerLine自动换行渲染到预览
   - 打开弹窗时重置state，避免编辑旧模板污染新模板

3. API 超时调整:
   - 全局axios timeout 10s → 30s（解决智能选片/草稿保存偶发10s超时）
   - updateEditPlan(草稿保存) 单独60s
   - 智能选片from-assets已是60s、封面生成已是300s，保持不变

4. 类型/样式同步更新

apps/web/src/api/client.ts

@@ -11,7 +11,7 @@ import { cancelProactiveRefresh, executeTokenRefresh } from "./auth/tokenRefresh
 // 创建 Axios 实例
 const apiClient = axios.create({
   baseURL: "/api/v1",
-  timeout: 10000,
+  timeout: 30000, // 全局 30s；智能选片/封面生成/大文件上传接口单独覆盖更长超时
   headers: {
     "Content-Type": "application/json",
   },

apps/web/src/api/template-editor/editPlans.ts

@@ -6,17 +6,20 @@ import type { EditPlan, UpdateEditPlanRequest, GeneratedVideo } from "./types"
 
 /** 获取单个模板草稿 */
 export async function getEditPlan(templateId: string): Promise<EditPlan> {
-  const response = await apiClient.get(`/templates/${templateId}/editor`)
+  const response = await apiClient.get(`/templates/${templateId}/editor`, { timeout: 30_000 })
   return response.data
 }
 
-/** 更新模板草稿（支持传入 AbortSignal 用于自动保存竞态取消） */
+/** 更新模板草稿（支持传入 AbortSignal 用于自动保存竞态取消；超时 60s 防止大 config 写入失败） */
 export async function updateEditPlan(
   templateId: string,
   data: UpdateEditPlanRequest,
   signal?: AbortSignal,
 ): Promise<EditPlan> {
-  const response = await apiClient.put(`/templates/${templateId}/editor`, data, { signal })
+  const response = await apiClient.put(`/templates/${templateId}/editor`, data, {
+    signal,
+    timeout: 60_000,
+  })
   return response.data
 }
 

apps/web/src/pages/generate/components/cover-settings/CoverSettingsModal.tsx

@@ -40,12 +40,26 @@ const CoverSettingsModal: React.FC<CoverSettingsModalProps> = ({
   onCreateNew,
 }) => {
   return (
-    <Modal open={open} onCancel={onClose} width={800} title="封面设置" centered footer={null}>
+    <Modal
+      open={open}
+      onCancel={onClose}
+      width={800}
+      title="封面设置"
+      centered
+      footer={
+        <div style={{ display: "flex", justifyContent: "flex-end", gap: 8 }}>
+          <Button buttonType="ghost" onClick={onClose}>
+            取消
+          </Button>
+          <Button buttonType="primary" onClick={onClose}>
+            确认应用
+          </Button>
+        </div>
+      }
+    >
       <div className="xx-cover-modal-toolbar">
-        <Button buttonType="primary">选择素材文件</Button>
-        <Button buttonType="ghost">导出全部</Button>
         <Button buttonType="primary" onClick={onCreateNew}>
-          创建新模板
+          + 创建新模板
         </Button>
       </div>
 
@@ -59,52 +73,78 @@ const CoverSettingsModal: React.FC<CoverSettingsModalProps> = ({
         <div style={{ textAlign: "center", padding: "40px 0", color: "#ef4444" }}>{error}</div>
       )}
 
-      {!loading && !error && (
-        <div className="xx-cover-template-grid">
-          {templates.map((tpl) => (
-            <div
-              key={tpl.id}
-              className={`xx-cover-template-card${selectedTemplateId === tpl.id ? " selected" : ""}`}
-              onClick={() => onSelectTemplate(tpl.id)}
-            >
-              <div
-                className="xx-cover-template-thumb"
-                style={{ background: GRADIENT_MAP[tpl.id] || GRADIENT_MAP.default }}
-              >
-                🖼️
-              </div>
-              <div className="xx-cover-template-info">
-                <div className="xx-cover-template-name">
-                  {tpl.name}
-                  {tpl.is_system && <span className="xx-cover-template-badge">✨ 系统模板</span>}
-                </div>
-                <div className="xx-cover-template-date">{tpl.created_at}</div>
-                <div className="xx-cover-template-actions" onClick={(e) => e.stopPropagation()}>
-                  <Button buttonType="ghost" buttonSize="sm" onClick={() => onEditTemplate(tpl)}>
-                    编辑
-                  </Button>
-                  {!tpl.is_system && (
-                    <Button
-                      buttonType="ghost"
-                      buttonSize="sm"
-                      onClick={() => {
-                        if (confirm("确定删除此模板？")) {
-                          onDeleteTemplate(tpl.id)
-                        }
-                      }}
-                    >
-                      删除
-                    </Button>
-                  )}
-                  <Button buttonType="ghost" buttonSize="sm">
-                    导出
-                  </Button>
-                </div>
-              </div>
-            </div>
-          ))}
+      {!loading && !error && templates.length === 0 && (
+        <div
+          style={{
+            textAlign: "center",
+            padding: "40px 0",
+            color: "var(--text-secondary)",
+            fontSize: 13,
+          }}
+        >
+          暂无封面模板，点击右上角「创建新模板」可自定义封面样式
         </div>
       )}
+
+      {!loading && !error && templates.length > 0 && (
+        <div className="xx-cover-template-grid">
+          {templates.map((tpl) => {
+            const isSelected = selectedTemplateId === tpl.id
+            return (
+              <div
+                key={tpl.id}
+                className={`xx-cover-template-card${isSelected ? " selected" : ""}`}
+                onClick={() => onSelectTemplate(tpl.id)}
+              >
+                <div
+                  className="xx-cover-template-thumb"
+                  style={{ background: GRADIENT_MAP[tpl.id] || GRADIENT_MAP.default }}
+                >
+                  {isSelected && <span className="xx-cover-template-check">✓</span>}
+                  🖼️
+                </div>
+                <div className="xx-cover-template-info">
+                  <div className="xx-cover-template-name">
+                    {tpl.name}
+                    {tpl.is_system && <span className="xx-cover-template-badge">✨ 系统</span>}
+                  </div>
+                  <div className="xx-cover-template-actions" onClick={(e) => e.stopPropagation()}>
+                    <Button buttonType="ghost" buttonSize="sm" onClick={() => onEditTemplate(tpl)}>
+                      编辑
+                    </Button>
+                    {!tpl.is_system && (
+                      <Button
+                        buttonType="ghost"
+                        buttonSize="sm"
+                        onClick={() => {
+                          if (confirm("确定删除此模板？")) {
+                            onDeleteTemplate(tpl.id)
+                          }
+                        }}
+                      >
+                        删除
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      )}
+
+      <div
+        style={{
+          marginTop: 12,
+          padding: "8px 12px",
+          background: "rgba(124,58,237,0.06)",
+          borderRadius: 6,
+          fontSize: 12,
+          color: "#6d28d9",
+        }}
+      >
+        💡 点击卡片选中模板后，点击右下角「确认应用」即可使用该模板生成封面
+      </div>
     </Modal>
   )
 }

apps/web/src/pages/generate/generate.css

@@ -2739,6 +2739,7 @@
   justify-content: center;
   font-size: 32px;
   color: #ccc;
+  position: relative;
 }
 
 /* 卡片信息区 */
@@ -3693,6 +3694,42 @@
   z-index: -1;
 }
 
+
+/* Cover template selected check */
+.xx-cover-template-check {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 22px;
+  height: 22px;
+  background: #7c3aed;
+  color: #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 700;
+  z-index: 2;
+  box-shadow: 0 2px 6px rgba(124,58,237,0.4);
+}
+.xx-cover-template-thumb {
+  position: relative;
+}
+
+/* Preview tip */
+.xx-ce-preview-tip {
+  text-align: center;
+  margin-top: 12px;
+  font-size: 12px;
+  color: #6b7280;
+}
+
+/* Cover editor modal base gradient */
+.xx-ce-canvas {
+  background: #1a1a2e;
+}
+
 /* Antd Slider overrides for editor */
 .xx-ce-section-body .ant-slider {
   margin: 4px 0 8px;

apps/web/src/pages/generate/types/cover.ts

@@ -105,11 +105,14 @@ export interface CoverEditorConfig {
   portraitEnabled: boolean
   portraitSize: number
   portraitPosition: TextPosition
+  portraitImage?: string
 
   // 背景设置
   backgroundEnabled: boolean
   backgroundSize: number
   backgroundPosition: TextPosition
+  backgroundImage?: string
+  backgroundColor?: string
 
   // 主标题
   title: TextStyleConfig
@@ -199,23 +202,23 @@ export const DEFAULT_EDITOR_CONFIG: CoverEditorConfig = {
   titleMaxChars: 4,
   subtitleMaxChars: 10,
 
-  portraitEnabled: true,
-  portraitSize: 80,
-  portraitPosition: { x: 50, y: 50 },
+  portraitEnabled: false,
+  portraitSize: 50,
+  portraitPosition: { x: 50, y: 70 },
 
   backgroundEnabled: true,
-  backgroundSize: 90,
+  backgroundSize: 100,
   backgroundPosition: { x: 50, y: 50 },
 
   title: DEFAULT_TITLE_CONFIG,
   subtitle: DEFAULT_SUBTITLE_CONFIG,
 
-  maskEnabled: true,
+  maskEnabled: false,
   maskImage: "",
   maskSize: 100,
   maskPosition: { x: 50, y: 50 },
   maskColor: "#000000",
-  maskOpacity: 100,
+  maskOpacity: 40,
   maskShape: "矩形",
 }