feat(task-2.13): 升级模板库页面 — 类型分组展示 + 预览弹窗 + EditPlan 入口 #140
@@ -1,154 +1,661 @@
|
||||
/**
|
||||
* 模板库页面 — V21 设计系统
|
||||
* 页面头部 + 工具栏（搜索+分类胶囊按钮组）+ 4列模板卡片网格 + 空状态
|
||||
* 使用 mock 数据，CSS 变量，V21 组件
|
||||
* 模板库页面（升级版）— V21 设计系统
|
||||
* 任务 2.13：模板类型分类展示、模板预览功能、创建 EditPlan 入口
|
||||
*
|
||||
* - 按 EditTemplate 类型分组展示
|
||||
* - 缩略图 + 预览弹窗
|
||||
* - 创建 EditPlan 入口 UI
|
||||
* - Mock 数据 + 预留 API 对接接口
|
||||
*/
|
||||
import React, { useState } from "react";
|
||||
import React, { useState, useMemo } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Button } from "@/components/ui";
|
||||
import "./templates.css";
|
||||
|
||||
/* ============================================================
|
||||
* Mock 数据
|
||||
* 类型定义（对齐后端 EditTemplate / EditPlan / TemplateClipConfig）
|
||||
* ============================================================ */
|
||||
type TemplateCategory = "口播" | "种草" | "产品" | "品牌";
|
||||
|
||||
interface TemplateItem {
|
||||
/** 模板片段配置 */
|
||||
interface TemplateClipConfig {
|
||||
id: string;
|
||||
name: string;
|
||||
category: TemplateCategory;
|
||||
usageCount: number;
|
||||
isFavorite: boolean;
|
||||
gradient: string;
|
||||
codeSnippet: string;
|
||||
order: number;
|
||||
clipType: string;
|
||||
description: string;
|
||||
duration: number; // 秒
|
||||
}
|
||||
|
||||
const categories: Array<"全部" | TemplateCategory> = [
|
||||
"全部",
|
||||
"口播",
|
||||
"种草",
|
||||
"产品",
|
||||
"品牌",
|
||||
/** 模板类型 */
|
||||
type EditTemplateType =
|
||||
| "口播"
|
||||
| "种草"
|
||||
| "产品"
|
||||
| "品牌"
|
||||
| "混剪"
|
||||
| "Vlog";
|
||||
|
||||
/** 模板数据 */
|
||||
interface EditTemplate {
|
||||
id: string;
|
||||
name: string;
|
||||
type: EditTemplateType;
|
||||
description: string;
|
||||
usageCount: number;
|
||||
isFavorite: boolean;
|
||||
thumbnailGradient: string;
|
||||
scriptContent: string;
|
||||
clipConfigs: TemplateClipConfig[];
|
||||
recommendedDuration: number; // 秒
|
||||
tags: string[];
|
||||
}
|
||||
|
||||
/** 创建 EditPlan 参数 */
|
||||
interface CreateEditPlanParams {
|
||||
templateId: string;
|
||||
planName: string;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* API 占位函数（预留后端对接）
|
||||
* ============================================================ */
|
||||
|
||||
/** 获取模板列表 */
|
||||
export async function fetchTemplates(
|
||||
type?: EditTemplateType,
|
||||
): Promise<EditTemplate[]> {
|
||||
// TODO: 对接后端 GET /api/templates?type=xxx
|
||||
void type;
|
||||
return mockTemplates;
|
||||
}
|
||||
|
||||
/** 获取模板详情 */
|
||||
export async function fetchTemplateById(
|
||||
id: string,
|
||||
): Promise<EditTemplate | null> {
|
||||
// TODO: 对接后端 GET /api/templates/:id
|
||||
return mockTemplates.find((t) => t.id === id) ?? null;
|
||||
}
|
||||
|
||||
/** 创建 EditPlan */
|
||||
export async function createEditPlan(
|
||||
params: CreateEditPlanParams,
|
||||
): Promise<{ planId: string }> {
|
||||
// TODO: 对接后端 POST /api/edit-plans
|
||||
console.log("[Mock] createEditPlan", params);
|
||||
return { planId: `plan-${Date.now()}` };
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 模板类型配置
|
||||
* ============================================================ */
|
||||
|
||||
const TEMPLATE_TYPES: Array<{
|
||||
type: EditTemplateType | "全部";
|
||||
label: string;
|
||||
icon: string;
|
||||
color: string;
|
||||
}> = [
|
||||
{ type: "全部", label: "全部", icon: "📋", color: "#6366f1" },
|
||||
{ type: "口播", label: "口播", icon: "🎙️", color: "#6366f1" },
|
||||
{ type: "种草", label: "种草", icon: "🌱", color: "#10b981" },
|
||||
{ type: "产品", label: "产品", icon: "📦", color: "#0ea5e9" },
|
||||
{ type: "品牌", label: "品牌", icon: "🏷️", color: "#f59e0b" },
|
||||
{ type: "混剪", label: "混剪", icon: "🎬", color: "#8b5cf6" },
|
||||
{ type: "Vlog", label: "Vlog", icon: "📹", color: "#ec4899" },
|
||||
];
|
||||
|
||||
const mockTemplates: TemplateItem[] = [
|
||||
/* ============================================================
|
||||
* Mock 数据
|
||||
* ============================================================ */
|
||||
|
||||
const mockTemplates: EditTemplate[] = [
|
||||
{
|
||||
id: "tpl-1",
|
||||
name: "商品口播模板",
|
||||
category: "口播",
|
||||
type: "口播",
|
||||
description: "适用于电商商品介绍的口播视频模板，包含开场、产品介绍、卖点展示、结尾引导等完整结构。",
|
||||
usageCount: 128,
|
||||
isFavorite: true,
|
||||
gradient: "linear-gradient(135deg, #6366f1, #8b5cf6)",
|
||||
codeSnippet:
|
||||
"# 商品口播脚本\n## 开场白\n大家好，今天给大家推荐...\n## 产品介绍\n这款产品的特点是...",
|
||||
thumbnailGradient: "linear-gradient(135deg, #6366f1, #8b5cf6)",
|
||||
scriptContent: "# 商品口播脚本\n## 开场白\n大家好，今天给大家推荐...\n## 产品介绍\n这款产品的特点是...\n## 使用演示\n我们来看实际效果...\n## 总结\n赶紧下单吧！",
|
||||
clipConfigs: [
|
||||
{ id: "c1", order: 1, clipType: "开场", description: "吸引注意力的开场白", duration: 5 },
|
||||
{ id: "c2", order: 2, clipType: "产品展示", description: "产品外观和功能展示", duration: 15 },
|
||||
{ id: "c3", order: 3, clipType: "卖点讲解", description: "核心卖点详细说明", duration: 20 },
|
||||
{ id: "c4", order: 4, clipType: "结尾", description: "引导下单的结尾", duration: 5 },
|
||||
],
|
||||
recommendedDuration: 45,
|
||||
tags: ["电商", "口播", "商品介绍"],
|
||||
},
|
||||
{
|
||||
id: "tpl-2",
|
||||
name: "种草笔记视频模板",
|
||||
category: "种草",
|
||||
type: "种草",
|
||||
description: "适合美妆、护肤、生活方式等种草类内容，真实体验分享风格。",
|
||||
usageCount: 96,
|
||||
isFavorite: false,
|
||||
gradient: "linear-gradient(135deg, #10b981, #059669)",
|
||||
codeSnippet:
|
||||
"# 种草视频\n## 使用场景\n早上出门前的护肤步骤...\n## 产品亮点\n温和不刺激，适合敏感肌...",
|
||||
thumbnailGradient: "linear-gradient(135deg, #10b981, #059669)",
|
||||
scriptContent: "# 种草视频\n## 使用场景\n早上出门前的护肤步骤...\n## 产品亮点\n温和不刺激，适合敏感肌...\n## 使用心得\n用了一个月后的感受...",
|
||||
clipConfigs: [
|
||||
{ id: "c1", order: 1, clipType: "场景引入", description: "日常场景带入", duration: 8 },
|
||||
{ id: "c2", order: 2, clipType: "产品体验", description: "使用过程展示", duration: 20 },
|
||||
{ id: "c3", order: 3, clipType: "效果对比", description: "使用前后对比", duration: 10 },
|
||||
{ id: "c4", order: 4, clipType: "总结推荐", description: "使用心得总结", duration: 7 },
|
||||
],
|
||||
recommendedDuration: 45,
|
||||
tags: ["种草", "美妆", "体验分享"],
|
||||
},
|
||||
{
|
||||
id: "tpl-3",
|
||||
name: "新品发布展示模板",
|
||||
category: "产品",
|
||||
type: "产品",
|
||||
description: "适合新品发布、产品升级等场景，突出产品亮点和技术优势。",
|
||||
usageCount: 74,
|
||||
isFavorite: false,
|
||||
gradient: "linear-gradient(135deg, #0ea5e9, #0284c7)",
|
||||
codeSnippet:
|
||||
"# 新品发布\n## 产品概览\n全新升级，性能提升50%...\n## 核心功能\nAI智能识别，一键优化...",
|
||||
thumbnailGradient: "linear-gradient(135deg, #0ea5e9, #0284c7)",
|
||||
scriptContent: "# 新品发布\n## 产品概览\n全新升级，性能提升50%...\n## 核心功能\nAI智能识别，一键优化...\n## 技术参数\n详细技术规格展示...",
|
||||
clipConfigs: [
|
||||
{ id: "c1", order: 1, clipType: "悬念开场", description: "产品悬念引入", duration: 5 },
|
||||
{ id: "c2", order: 2, clipType: "产品全景", description: "产品360度展示", duration: 10 },
|
||||
{ id: "c3", order: 3, clipType: "功能演示", description: "核心功能实操", duration: 25 },
|
||||
{ id: "c4", order: 4, clipType: "技术规格", description: "参数对比展示", duration: 10 },
|
||||
{ id: "c5", order: 5, clipType: "结尾", description: "购买引导", duration: 5 },
|
||||
],
|
||||
recommendedDuration: 55,
|
||||
tags: ["产品", "发布", "科技"],
|
||||
},
|
||||
{
|
||||
id: "tpl-4",
|
||||
name: "品牌故事宣传片",
|
||||
category: "品牌",
|
||||
type: "品牌",
|
||||
description: "讲述品牌故事，传递品牌理念，适合品牌形象建设和宣传。",
|
||||
usageCount: 52,
|
||||
isFavorite: true,
|
||||
gradient: "linear-gradient(135deg, #f59e0b, #d97706)",
|
||||
codeSnippet:
|
||||
"# 品牌故事\n## 品牌起源\n2020年，我们从一个想法开始...\n## 品牌理念\n让创作更简单...",
|
||||
thumbnailGradient: "linear-gradient(135deg, #f59e0b, #d97706)",
|
||||
scriptContent: "# 品牌故事\n## 品牌起源\n2020年，我们从一个想法开始...\n## 品牌理念\n让创作更简单...\n## 团队风采\n我们的团队...",
|
||||
clipConfigs: [
|
||||
{ id: "c1", order: 1, clipType: "品牌起源", description: "创业故事引入", duration: 15 },
|
||||
{ id: "c2", order: 2, clipType: "发展历程", description: "里程碑事件", duration: 15 },
|
||||
{ id: "c3", order: 3, clipType: "核心理念", description: "品牌价值主张", duration: 10 },
|
||||
{ id: "c4", order: 4, clipType: "未来展望", description: "品牌愿景", duration: 10 },
|
||||
],
|
||||
recommendedDuration: 50,
|
||||
tags: ["品牌", "宣传", "故事"],
|
||||
},
|
||||
{
|
||||
id: "tpl-5",
|
||||
name: "知识分享口播模板",
|
||||
category: "口播",
|
||||
type: "口播",
|
||||
description: "适合知识博主、教程类内容，结构清晰，信息密度高。",
|
||||
usageCount: 215,
|
||||
isFavorite: false,
|
||||
gradient: "linear-gradient(135deg, #8b5cf6, #7c3aed)",
|
||||
codeSnippet:
|
||||
"# 知识分享\n## 主题引入\n今天我们来聊一个很多人问的问题...\n## 核心内容\n第一点，第二点，第三点...",
|
||||
thumbnailGradient: "linear-gradient(135deg, #8b5cf6, #7c3aed)",
|
||||
scriptContent: "# 知识分享\n## 主题引入\n今天我们来聊一个很多人问的问题...\n## 核心内容\n第一点，第二点，第三点...\n## 总结\n希望对你有帮助...",
|
||||
clipConfigs: [
|
||||
{ id: "c1", order: 1, clipType: "开场", description: "话题引入", duration: 5 },
|
||||
{ id: "c2", order: 2, clipType: "知识点1", description: "第一个要点", duration: 15 },
|
||||
{ id: "c3", order: 3, clipType: "知识点2", description: "第二个要点", duration: 15 },
|
||||
{ id: "c4", order: 4, clipType: "总结", description: "内容回顾", duration: 5 },
|
||||
],
|
||||
recommendedDuration: 40,
|
||||
tags: ["知识", "教程", "口播"],
|
||||
},
|
||||
{
|
||||
id: "tpl-6",
|
||||
name: "好物推荐种草模板",
|
||||
category: "种草",
|
||||
type: "种草",
|
||||
description: "以痛点引入，展示解决方案，适合日常好物推荐。",
|
||||
usageCount: 183,
|
||||
isFavorite: true,
|
||||
gradient: "linear-gradient(135deg, #059669, #047857)",
|
||||
codeSnippet:
|
||||
"# 好物推荐\n## 痛点引入\n你是不是也有这样的困扰...\n## 解决方案\n直到我发现了这个神器...",
|
||||
thumbnailGradient: "linear-gradient(135deg, #059669, #047857)",
|
||||
scriptContent: "# 好物推荐\n## 痛点引入\n你是不是也有这样的困扰...\n## 解决方案\n直到我发现了这个神器...\n## 使用效果\n一个月后的变化...",
|
||||
clipConfigs: [
|
||||
{ id: "c1", order: 1, clipType: "痛点", description: "用户痛点共鸣", duration: 8 },
|
||||
{ id: "c2", order: 2, clipType: "产品引入", description: "产品出场", duration: 10 },
|
||||
{ id: "c3", order: 3, clipType: "使用展示", description: "实际使用过程", duration: 15 },
|
||||
{ id: "c4", order: 4, clipType: "效果", description: "使用效果展示", duration: 10 },
|
||||
],
|
||||
recommendedDuration: 43,
|
||||
tags: ["种草", "好物", "推荐"],
|
||||
},
|
||||
{
|
||||
id: "tpl-7",
|
||||
name: "产品对比评测模板",
|
||||
category: "产品",
|
||||
type: "产品",
|
||||
description: "多维度对比评测，客观公正，适合数码、家电等产品。",
|
||||
usageCount: 67,
|
||||
isFavorite: false,
|
||||
gradient: "linear-gradient(135deg, #0284c7, #0369a1)",
|
||||
codeSnippet:
|
||||
"# 产品对比\n## 对比维度\n外观、性能、价格、体验...\n## 总结推荐\n综合来看，A适合...B适合...",
|
||||
thumbnailGradient: "linear-gradient(135deg, #0284c7, #0369a1)",
|
||||
scriptContent: "# 产品对比\n## 对比维度\n外观、性能、价格、体验...\n## 详细对比\n逐项分析...\n## 总结推荐\n综合来看，A适合...B适合...",
|
||||
clipConfigs: [
|
||||
{ id: "c1", order: 1, clipType: "产品亮相", description: "两款产品展示", duration: 8 },
|
||||
{ id: "c2", order: 2, clipType: "外观对比", description: "外观设计对比", duration: 12 },
|
||||
{ id: "c3", order: 3, clipType: "性能测试", description: "性能数据对比", duration: 15 },
|
||||
{ id: "c4", order: 4, clipType: "总结", description: "购买建议", duration: 10 },
|
||||
],
|
||||
recommendedDuration: 45,
|
||||
tags: ["评测", "对比", "产品"],
|
||||
},
|
||||
{
|
||||
id: "tpl-8",
|
||||
name: "品牌活动预热模板",
|
||||
category: "品牌",
|
||||
type: "品牌",
|
||||
description: "适合品牌活动、促销预热，制造期待感。",
|
||||
usageCount: 41,
|
||||
isFavorite: false,
|
||||
gradient: "linear-gradient(135deg, #d97706, #b45309)",
|
||||
codeSnippet:
|
||||
"# 活动预热\n## 悬念引入\n倒计时3天，惊喜即将揭晓...\n## 活动亮点\n福利一、福利二、福利三...",
|
||||
thumbnailGradient: "linear-gradient(135deg, #d97706, #b45309)",
|
||||
scriptContent: "# 活动预热\n## 悬念引入\n倒计时3天，惊喜即将揭晓...\n## 活动亮点\n福利一、福利二、福利三...\n## 参与方式\n如何参与活动...",
|
||||
clipConfigs: [
|
||||
{ id: "c1", order: 1, clipType: "悬念", description: "倒计时悬念", duration: 5 },
|
||||
{ id: "c2", order: 2, clipType: "亮点", description: "活动亮点展示", duration: 15 },
|
||||
{ id: "c3", order: 3, clipType: "福利", description: "优惠福利说明", duration: 10 },
|
||||
{ id: "c4", order: 4, clipType: "引导", description: "参与方式引导", duration: 5 },
|
||||
],
|
||||
recommendedDuration: 35,
|
||||
tags: ["品牌", "活动", "预热"],
|
||||
},
|
||||
{
|
||||
id: "tpl-9",
|
||||
name: "多素材混剪模板",
|
||||
type: "混剪",
|
||||
description: "适合多段素材拼接，自动匹配节奏，适合混剪类视频。",
|
||||
usageCount: 89,
|
||||
isFavorite: false,
|
||||
thumbnailGradient: "linear-gradient(135deg, #8b5cf6, #6d28d9)",
|
||||
scriptContent: "# 混剪模板\n## 素材1\n开场高能片段...\n## 素材2\n过渡衔接...\n## 素材3\n高潮部分...\n## 结尾\n精彩回顾...",
|
||||
clipConfigs: [
|
||||
{ id: "c1", order: 1, clipType: "高能开场", description: "吸引眼球的开场", duration: 5 },
|
||||
{ id: "c2", order: 2, clipType: "素材A", description: "第一段素材", duration: 10 },
|
||||
{ id: "c3", order: 3, clipType: "过渡", description: "转场衔接", duration: 3 },
|
||||
{ id: "c4", order: 4, clipType: "素材B", description: "第二段素材", duration: 10 },
|
||||
{ id: "c5", order: 5, clipType: "高潮", description: "高潮片段", duration: 8 },
|
||||
{ id: "c6", order: 6, clipType: "结尾", description: "精彩回顾", duration: 4 },
|
||||
],
|
||||
recommendedDuration: 40,
|
||||
tags: ["混剪", "多素材", "节奏"],
|
||||
},
|
||||
{
|
||||
id: "tpl-10",
|
||||
name: "日常Vlog模板",
|
||||
type: "Vlog",
|
||||
description: "记录日常生活，轻松自然的Vlog风格模板。",
|
||||
usageCount: 156,
|
||||
isFavorite: true,
|
||||
thumbnailGradient: "linear-gradient(135deg, #ec4899, #db2777)",
|
||||
scriptContent: "# 日常Vlog\n## 早安\n今天又是美好的一天...\n## 出门\n准备出门啦...\n## 日常\n记录精彩瞬间...\n## 晚安\n今天也很充实...",
|
||||
clipConfigs: [
|
||||
{ id: "c1", order: 1, clipType: "早安", description: "起床日常", duration: 8 },
|
||||
{ id: "c2", order: 2, clipType: "出门", description: "准备出门", duration: 10 },
|
||||
{ id: "c3", order: 3, clipType: "日常", description: "日常活动记录", duration: 20 },
|
||||
{ id: "c4", order: 4, clipType: "晚安", description: "一天总结", duration: 7 },
|
||||
],
|
||||
recommendedDuration: 45,
|
||||
tags: ["Vlog", "日常", "生活"],
|
||||
},
|
||||
];
|
||||
|
||||
/* ============================================================
|
||||
* 组件
|
||||
* 辅助函数
|
||||
* ============================================================ */
|
||||
|
||||
/** 获取类型对应颜色 */
|
||||
const getTypeColor = (type: EditTemplateType): string => {
|
||||
const found = TEMPLATE_TYPES.find((t) => t.type === type);
|
||||
return found?.color ?? "#6366f1";
|
||||
};
|
||||
|
||||
/** 获取片段类型标签 */
|
||||
const getClipTypeLabel = (clipType: string): string => clipType;
|
||||
|
||||
/** 获取片段类型颜色 */
|
||||
const getClipTypeColor = (clipType: string): string => {
|
||||
const colorMap: Record<string, string> = {
|
||||
开场: "#6366f1",
|
||||
产品展示: "#0ea5e9",
|
||||
卖点讲解: "#10b981",
|
||||
结尾: "#f59e0b",
|
||||
场景引入: "#8b5cf6",
|
||||
产品体验: "#ec4899",
|
||||
效果对比: "#14b8a6",
|
||||
总结推荐: "#f59e0b",
|
||||
悬念开场: "#6366f1",
|
||||
产品全景: "#0ea5e9",
|
||||
功能演示: "#10b981",
|
||||
技术规格: "#64748b",
|
||||
品牌起源: "#f59e0b",
|
||||
发展历程: "#0ea5e9",
|
||||
核心理念: "#8b5cf6",
|
||||
未来展望: "#10b981",
|
||||
知识点1: "#6366f1",
|
||||
知识点2: "#8b5cf6",
|
||||
痛点: "#ef4444",
|
||||
产品引入: "#10b981",
|
||||
使用展示: "#0ea5e9",
|
||||
效果: "#f59e0b",
|
||||
产品亮相: "#6366f1",
|
||||
外观对比: "#0ea5e9",
|
||||
性能测试: "#10b981",
|
||||
总结: "#f59e0b",
|
||||
悬念: "#6366f1",
|
||||
亮点: "#10b981",
|
||||
福利: "#f59e0b",
|
||||
引导: "#0ea5e9",
|
||||
高能开场: "#ef4444",
|
||||
过渡: "#64748b",
|
||||
高潮: "#ec4899",
|
||||
早安: "#f59e0b",
|
||||
出门: "#10b981",
|
||||
日常: "#0ea5e9",
|
||||
晚安: "#8b5cf6",
|
||||
};
|
||||
return colorMap[clipType] ?? "#6366f1";
|
||||
};
|
||||
|
||||
/** 格式化时长 */
|
||||
const formatDuration = (seconds: number): string => {
|
||||
const m = Math.floor(seconds / 60);
|
||||
const s = seconds % 60;
|
||||
if (m === 0) return `${s}秒`;
|
||||
return `${m}分${s > 0 ? `${s}秒` : ""}`;
|
||||
};
|
||||
|
||||
/* ============================================================
|
||||
* 预览弹窗组件
|
||||
* ============================================================ */
|
||||
|
||||
interface TemplatePreviewModalProps {
|
||||
template: EditTemplate;
|
||||
isFavorite: boolean;
|
||||
onClose: () => void;
|
||||
onToggleFavorite: (id: string) => void;
|
||||
onUse: (template: EditTemplate) => void;
|
||||
}
|
||||
|
||||
const TemplatePreviewModal: React.FC<TemplatePreviewModalProps> = ({
|
||||
template,
|
||||
isFavorite,
|
||||
onClose,
|
||||
onToggleFavorite,
|
||||
onUse,
|
||||
}) => {
|
||||
const totalDuration = template.clipConfigs.reduce(
|
||||
(sum, c) => sum + c.duration,
|
||||
0,
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="xx-template-modal-overlay" onClick={onClose}>
|
||||
<div
|
||||
className="xx-template-modal"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* 关闭按钮 */}
|
||||
<button
|
||||
className="xx-template-modal-close"
|
||||
onClick={onClose}
|
||||
title="关闭"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
|
||||
{/* 预览区域 */}
|
||||
<div
|
||||
className="xx-template-modal-preview"
|
||||
style={{ background: template.thumbnailGradient }}
|
||||
>
|
||||
<div className="xx-template-modal-preview-content">
|
||||
<span style={{ fontSize: 48 }}>
|
||||
{TEMPLATE_TYPES.find((t) => t.type === template.type)?.icon ?? "📋"}
|
||||
</span>
|
||||
<span style={{ fontSize: 18, fontWeight: 600, color: "#fff", marginTop: 8 }}>
|
||||
{template.name}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 内容区域 */}
|
||||
<div className="xx-template-modal-content">
|
||||
{/* 标题行 */}
|
||||
<div className="xx-template-modal-title-row">
|
||||
<h3>{template.name}</h3>
|
||||
<span
|
||||
className="xx-template-modal-type-badge"
|
||||
style={{
|
||||
color: getTypeColor(template.type),
|
||||
background: `${getTypeColor(template.type)}18`,
|
||||
}}
|
||||
>
|
||||
{TEMPLATE_TYPES.find((t) => t.type === template.type)?.icon}{" "}
|
||||
{template.type}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 描述 */}
|
||||
<p className="xx-template-modal-desc">{template.description}</p>
|
||||
|
||||
{/* 标签 */}
|
||||
<div className="xx-template-modal-tags">
|
||||
{template.tags.map((tag) => (
|
||||
<span key={tag} className="xx-template-modal-tag">
|
||||
#{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 脚本内容 */}
|
||||
<div className="xx-template-modal-section">
|
||||
<h4>📝 脚本内容</h4>
|
||||
<pre className="xx-template-modal-script">
|
||||
{template.scriptContent}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
{/* 视频结构 */}
|
||||
<div className="xx-template-modal-section">
|
||||
<h4>🎬 视频结构</h4>
|
||||
<div className="xx-template-modal-clip-list">
|
||||
{template.clipConfigs
|
||||
.sort((a, b) => a.order - b.order)
|
||||
.map((clip) => (
|
||||
<div key={clip.id} className="xx-template-modal-clip-item">
|
||||
<span
|
||||
className="xx-template-modal-clip-badge"
|
||||
style={{
|
||||
color: getClipTypeColor(clip.clipType),
|
||||
background: `${getClipTypeColor(clip.clipType)}18`,
|
||||
}}
|
||||
>
|
||||
{getClipTypeLabel(clip.clipType)}
|
||||
</span>
|
||||
<span className="xx-template-modal-clip-desc">
|
||||
{clip.description}
|
||||
</span>
|
||||
<span className="xx-template-modal-clip-duration">
|
||||
{clip.duration}秒
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="xx-template-modal-total-duration">
|
||||
总时长：{formatDuration(totalDuration)}
|
||||
{template.recommendedDuration !== totalDuration && (
|
||||
<span>
|
||||
{" "}
|
||||
· 推荐时长：{formatDuration(template.recommendedDuration)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 统计信息 */}
|
||||
<div className="xx-template-modal-stats">
|
||||
<span>已使用 {template.usageCount} 次</span>
|
||||
<button
|
||||
className={`xx-template-modal-fav-btn${isFavorite ? " is-favorite" : ""}`}
|
||||
onClick={() => onToggleFavorite(template.id)}
|
||||
>
|
||||
{isFavorite ? "★ 已收藏" : "☆ 收藏"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div className="xx-template-modal-actions">
|
||||
<Button buttonType="ghost" buttonSize="md" onClick={onClose}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
buttonType="primary"
|
||||
buttonSize="md"
|
||||
onClick={() => onUse(template)}
|
||||
>
|
||||
使用此模板
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/* ============================================================
|
||||
* 模板卡片组件
|
||||
* ============================================================ */
|
||||
|
||||
interface TemplateCardProps {
|
||||
template: EditTemplate;
|
||||
isFavorite: boolean;
|
||||
onPreview: (template: EditTemplate) => void;
|
||||
onToggleFavorite: (id: string, e: React.MouseEvent) => void;
|
||||
onUse: (template: EditTemplate) => void;
|
||||
}
|
||||
|
||||
const TemplateCard: React.FC<TemplateCardProps> = ({
|
||||
template,
|
||||
isFavorite,
|
||||
onPreview,
|
||||
onToggleFavorite,
|
||||
onUse,
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className="xx-template-card"
|
||||
onClick={() => onPreview(template)}
|
||||
>
|
||||
{/* 缩略图 */}
|
||||
<div className="xx-template-thumb">
|
||||
<div
|
||||
className="xx-template-thumb-bg"
|
||||
style={{ background: template.thumbnailGradient }}
|
||||
>
|
||||
{template.scriptContent.slice(0, 80)}...
|
||||
</div>
|
||||
<div className="xx-template-thumb-overlay" />
|
||||
<div className="xx-template-preview-hint">点击预览</div>
|
||||
<button
|
||||
className={`xx-template-fav-btn${isFavorite ? " is-favorite" : ""}`}
|
||||
onClick={(e) => onToggleFavorite(template.id, e)}
|
||||
title={isFavorite ? "取消收藏" : "收藏"}
|
||||
>
|
||||
{isFavorite ? "★" : "☆"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 信息区 */}
|
||||
<div className="xx-template-info">
|
||||
<div className="xx-template-info-top">
|
||||
<h4 className="xx-template-name">{template.name}</h4>
|
||||
<span
|
||||
className="xx-template-category-pill"
|
||||
style={{
|
||||
color: getTypeColor(template.type),
|
||||
background: `${getTypeColor(template.type)}18`,
|
||||
}}
|
||||
>
|
||||
{template.type}
|
||||
</span>
|
||||
</div>
|
||||
<p className="xx-template-desc">{template.description}</p>
|
||||
<div className="xx-template-meta">
|
||||
<span className="xx-template-usage">
|
||||
已使用 {template.usageCount} 次
|
||||
</span>
|
||||
<button
|
||||
className="xx-template-use-btn"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onUse(template);
|
||||
}}
|
||||
>
|
||||
使用此模板
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/* ============================================================
|
||||
* 主组件
|
||||
* ============================================================ */
|
||||
|
||||
const TemplateLibrary: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [activeCategory, setActiveCategory] = useState<
|
||||
"全部" | TemplateCategory
|
||||
>("全部");
|
||||
const [activeType, setActiveType] = useState<EditTemplateType | "全部">("全部");
|
||||
const [previewTemplate, setPreviewTemplate] = useState<EditTemplate | null>(null);
|
||||
const [favorites, setFavorites] = useState<Set<string>>(
|
||||
() => new Set(mockTemplates.filter((t) => t.isFavorite).map((t) => t.id)),
|
||||
);
|
||||
|
||||
/** 切换收藏 */
|
||||
const toggleFavorite = (id: string, e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
const toggleFavorite = (id: string, e?: React.MouseEvent) => {
|
||||
e?.stopPropagation();
|
||||
setFavorites((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) {
|
||||
next.delete(id);
|
||||
} else {
|
||||
next.add(id);
|
||||
}
|
||||
if (next.has(id)) next.delete(id);
|
||||
else next.add(id);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
/** 过滤模板 */
|
||||
const filtered = mockTemplates.filter((t) => {
|
||||
const matchSearch =
|
||||
!searchText ||
|
||||
t.name.toLowerCase().includes(searchText.toLowerCase()) ||
|
||||
t.codeSnippet.toLowerCase().includes(searchText.toLowerCase());
|
||||
const matchCategory =
|
||||
activeCategory === "全部" || t.category === activeCategory;
|
||||
return matchSearch && matchCategory;
|
||||
});
|
||||
const filtered = useMemo(() => {
|
||||
return mockTemplates.filter((t) => {
|
||||
const matchSearch =
|
||||
!searchText ||
|
||||
t.name.toLowerCase().includes(searchText.toLowerCase()) ||
|
||||
t.description.toLowerCase().includes(searchText.toLowerCase()) ||
|
||||
t.tags.some((tag) =>
|
||||
tag.toLowerCase().includes(searchText.toLowerCase()),
|
||||
);
|
||||
const matchType = activeType === "全部" || t.type === activeType;
|
||||
return matchSearch && matchType;
|
||||
});
|
||||
}, [searchText, activeType]);
|
||||
|
||||
/** 按类型分组 */
|
||||
const groupedTemplates = useMemo(() => {
|
||||
const groups: Record<string, EditTemplate[]> = {};
|
||||
for (const tpl of filtered) {
|
||||
if (!groups[tpl.type]) groups[tpl.type] = [];
|
||||
groups[tpl.type].push(tpl);
|
||||
}
|
||||
return groups;
|
||||
}, [filtered]);
|
||||
|
||||
/** 使用模板 → 创建 EditPlan */
|
||||
const handleUseTemplate = async (template: EditTemplate) => {
|
||||
try {
|
||||
const result = await createEditPlan({
|
||||
templateId: template.id,
|
||||
planName: `基于「${template.name}」的剪辑计划`,
|
||||
});
|
||||
console.log("[TemplateLibrary] EditPlan created:", result.planId);
|
||||
navigate("/app/editing-planner");
|
||||
} catch (err) {
|
||||
console.error("[TemplateLibrary] createEditPlan failed:", err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="xx-templates-page">
|
||||
@@ -156,96 +663,112 @@ const TemplateLibrary: React.FC = () => {
|
||||
<div className="xx-templates-header">
|
||||
<div className="xx-templates-header-text">
|
||||
<h2>模板库</h2>
|
||||
<p>选择模板快速开始创作，支持自定义修改</p>
|
||||
<p>选择模板快速创建剪辑计划，支持自定义修改</p>
|
||||
</div>
|
||||
<Button buttonType="primary" buttonSize="md">
|
||||
+ 创建模板
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* ── 工具栏：搜索 + 分类按钮组 ─────────────────────────── */}
|
||||
{/* ── 工具栏：搜索 + 类型按钮组 ─────────────────────────── */}
|
||||
<div className="xx-templates-toolbar">
|
||||
<div className="xx-templates-search">
|
||||
<span className="xx-templates-search-icon">🔍</span>
|
||||
<input
|
||||
className="xx-templates-search-input"
|
||||
type="text"
|
||||
placeholder="搜索模板名称或内容..."
|
||||
placeholder="搜索模板名称、描述或标签..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="xx-templates-categories">
|
||||
{categories.map((cat) => (
|
||||
{TEMPLATE_TYPES.map((cat) => (
|
||||
<button
|
||||
key={cat}
|
||||
className={`xx-templates-cat-btn${activeCategory === cat ? " active" : ""}`}
|
||||
onClick={() => setActiveCategory(cat)}
|
||||
key={cat.type}
|
||||
className={`xx-templates-cat-btn${activeType === cat.type ? " active" : ""}`}
|
||||
onClick={() => setActiveType(cat.type)}
|
||||
>
|
||||
{cat}
|
||||
<span className="xx-templates-cat-icon">{cat.icon}</span>
|
||||
{cat.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── 模板卡片网格 ──────────────────────────────────────── */}
|
||||
{/* ── 模板展示区 ────────────────────────────────────────── */}
|
||||
{filtered.length === 0 ? (
|
||||
<div className="xx-templates-empty">
|
||||
<div className="xx-templates-empty-icon">📭</div>
|
||||
<h3>
|
||||
{searchText || activeCategory !== "全部"
|
||||
{searchText || activeType !== "全部"
|
||||
? "未找到匹配的模板"
|
||||
: "暂无模板"}
|
||||
</h3>
|
||||
<p>
|
||||
{searchText || activeCategory !== "全部"
|
||||
? "试试调整搜索条件或切换分类"
|
||||
{searchText || activeType !== "全部"
|
||||
? "试试调整搜索条件或切换类型"
|
||||
: "点击上方「创建模板」开始创作"}
|
||||
</p>
|
||||
</div>
|
||||
) : activeType === "全部" ? (
|
||||
/* 全部类型 → 按类型分组展示 */
|
||||
<div className="xx-templates-grouped">
|
||||
{Object.entries(groupedTemplates).map(([type, templates]) => {
|
||||
const typeConfig = TEMPLATE_TYPES.find((t) => t.type === type);
|
||||
return (
|
||||
<div key={type} className="xx-templates-group">
|
||||
<div className="xx-templates-group-header">
|
||||
<span className="xx-templates-group-icon">
|
||||
{typeConfig?.icon ?? "📋"}
|
||||
</span>
|
||||
<h3>{type}</h3>
|
||||
<span className="xx-templates-group-count">
|
||||
{templates.length} 个模板
|
||||
</span>
|
||||
</div>
|
||||
<div className="xx-templates-grid">
|
||||
{templates.map((tpl) => (
|
||||
<TemplateCard
|
||||
key={tpl.id}
|
||||
template={tpl}
|
||||
isFavorite={favorites.has(tpl.id)}
|
||||
onPreview={setPreviewTemplate}
|
||||
onToggleFavorite={toggleFavorite}
|
||||
onUse={handleUseTemplate}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
/* 单类型 → 平铺网格 */
|
||||
<div className="xx-templates-grid">
|
||||
{filtered.map((tpl) => (
|
||||
<div key={tpl.id} className="xx-template-card">
|
||||
{/* 缩略图 */}
|
||||
<div className="xx-template-thumb">
|
||||
<div
|
||||
className="xx-template-thumb-bg"
|
||||
style={{ background: tpl.gradient }}
|
||||
>
|
||||
{tpl.codeSnippet}
|
||||
</div>
|
||||
<div className="xx-template-thumb-overlay" />
|
||||
<button
|
||||
className={`xx-template-fav-btn${favorites.has(tpl.id) ? " is-favorite" : ""}`}
|
||||
onClick={(e) => toggleFavorite(tpl.id, e)}
|
||||
title={favorites.has(tpl.id) ? "取消收藏" : "收藏"}
|
||||
>
|
||||
{favorites.has(tpl.id) ? "★" : "☆"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 信息区 */}
|
||||
<div className="xx-template-info">
|
||||
<div className="xx-template-info-top">
|
||||
<h4 className="xx-template-name">{tpl.name}</h4>
|
||||
<span
|
||||
className={`xx-template-category-pill xx-template-category-pill--${tpl.category}`}
|
||||
>
|
||||
{tpl.category}
|
||||
</span>
|
||||
</div>
|
||||
<div className="xx-template-meta">
|
||||
<span className="xx-template-usage">
|
||||
已使用 {tpl.usageCount} 次
|
||||
</span>
|
||||
<button className="xx-template-use-btn">使用此模板</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<TemplateCard
|
||||
key={tpl.id}
|
||||
template={tpl}
|
||||
isFavorite={favorites.has(tpl.id)}
|
||||
onPreview={setPreviewTemplate}
|
||||
onToggleFavorite={toggleFavorite}
|
||||
onUse={handleUseTemplate}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── 预览弹窗 ──────────────────────────────────────────── */}
|
||||
{previewTemplate && (
|
||||
<TemplatePreviewModal
|
||||
template={previewTemplate}
|
||||
isFavorite={favorites.has(previewTemplate.id)}
|
||||
onClose={() => setPreviewTemplate(null)}
|
||||
onToggleFavorite={toggleFavorite}
|
||||
onUse={handleUseTemplate}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/**
|
||||
* 模板库页面 - V21 设计系统样式
|
||||
* 页面头部 + 工具栏（搜索+分类按钮组）+ 4列模板卡片网格 + 空状态
|
||||
* 模板库页面 - V21 设计系统样式（升级版）
|
||||
* 任务 2.13：新增分组展示、预览弹窗、卡片描述等样式
|
||||
* 统一使用 CSS 变量，支持深色/浅色主题
|
||||
*/
|
||||
@import "../../styles/global.css";
|
||||
@@ -106,6 +106,9 @@
|
||||
cursor: pointer;
|
||||
transition: var(--transition-all);
|
||||
white-space: nowrap;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.xx-templates-cat-btn:hover {
|
||||
@@ -120,6 +123,43 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.xx-templates-cat-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
分组展示
|
||||
============================================================ */
|
||||
.xx-templates-grouped {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
.xx-templates-group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.xx-templates-group-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.xx-templates-group-header h3 {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.xx-templates-group-count {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
模板卡片网格
|
||||
============================================================ */
|
||||
@@ -183,6 +223,27 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 预览提示（hover 显示） */
|
||||
.xx-template-preview-hint {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(2px);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.xx-template-card:hover .xx-template-preview-hint {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 收藏按钮 */
|
||||
.xx-template-fav-btn {
|
||||
position: absolute;
|
||||
@@ -224,7 +285,7 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.xx-template-name {
|
||||
@@ -239,6 +300,18 @@
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* 卡片描述 */
|
||||
.xx-template-desc {
|
||||
margin: 0 0 10px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 分类药丸 */
|
||||
.xx-template-category-pill {
|
||||
display: inline-flex;
|
||||
@@ -251,26 +324,6 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.xx-template-category-pill--口播 {
|
||||
color: var(--primary-color);
|
||||
background: var(--primary-soft);
|
||||
}
|
||||
|
||||
.xx-template-category-pill--种草 {
|
||||
color: var(--success-color);
|
||||
background: var(--success-soft);
|
||||
}
|
||||
|
||||
.xx-template-category-pill--产品 {
|
||||
color: var(--info-color, #0ea5e9);
|
||||
background: var(--info-soft, #e0f2fe);
|
||||
}
|
||||
|
||||
.xx-template-category-pill--品牌 {
|
||||
color: var(--warning-color);
|
||||
background: var(--warning-soft);
|
||||
}
|
||||
|
||||
/* 使用次数 */
|
||||
.xx-template-meta {
|
||||
display: flex;
|
||||
@@ -333,6 +386,253 @@
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
预览弹窗
|
||||
============================================================ */
|
||||
.xx-template-modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 20px;
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.xx-template-modal {
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
max-width: 720px;
|
||||
width: 100%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
animation: slideUp 0.25s ease;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { transform: translateY(20px); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
.xx-template-modal-close {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(4px);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
transition: var(--transition-all);
|
||||
}
|
||||
|
||||
.xx-template-modal-close:hover {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* 预览区域 */
|
||||
.xx-template-modal-preview {
|
||||
aspect-ratio: 16 / 9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.xx-template-modal-preview-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.xx-template-modal-content {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.xx-template-modal-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.xx-template-modal-title-row h3 {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.xx-template-modal-type-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.xx-template-modal-desc {
|
||||
margin: 0 0 12px;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.xx-template-modal-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.xx-template-modal-tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--bg-surface, var(--bg-secondary));
|
||||
color: var(--text-secondary);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* 脚本内容 */
|
||||
.xx-template-modal-section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.xx-template-modal-section h4 {
|
||||
margin: 0 0 8px;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.xx-template-modal-script {
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
background: var(--bg-surface, var(--bg-secondary));
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: "SF Mono", "Fira Code", monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
max-height: 160px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 片段列表 */
|
||||
.xx-template-modal-clip-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.xx-template-modal-clip-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
background: var(--bg-surface, var(--bg-secondary));
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.xx-template-modal-clip-badge {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.xx-template-modal-clip-desc {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.xx-template-modal-clip-duration {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.xx-template-modal-total-duration {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* 统计信息 */
|
||||
.xx-template-modal-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0;
|
||||
border-top: 1px solid var(--border-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
margin-bottom: 16px;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.xx-template-modal-fav-btn {
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border-color);
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: var(--transition-all);
|
||||
}
|
||||
|
||||
.xx-template-modal-fav-btn:hover {
|
||||
border-color: #fbbf24;
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.xx-template-modal-fav-btn.is-favorite {
|
||||
border-color: #fbbf24;
|
||||
color: #fbbf24;
|
||||
background: #fbbf2418;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.xx-template-modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
响应式
|
||||
============================================================ */
|
||||
@@ -368,6 +668,19 @@
|
||||
.xx-templates-categories {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/* 弹窗移动端适配 */
|
||||
.xx-template-modal-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.xx-template-modal-actions {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.xx-template-modal-actions button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
||||
Reference in New Issue
Block a user