flnxi-Wu/docs/TEMPLATE_IMPROVEMENTS.md
WuYongJie 8705b9846a
Some checks failed
CI Check / check (push) Has been cancelled
feat: 统一弹窗样式系统与分类管理优化
- 创建统一的Modal组件,采用Apple风格设计
- 实现毛玻璃效果、圆角、动画和细边框描边
- 修复弹窗打开时背景滚动问题
- 修复分类管理中重复卡片和数组字符串显示问题
- 优化选项解析逻辑,添加去重和过滤机制
2025-11-25 09:37:00 +08:00

5.2 KiB
Raw Blame History

模板功能改进说明

✅ 已完成的修改

1. 预制模板隐藏状态同步到首页

问题:预制模板隐藏后,首页的 tag 不会一起隐藏

解决方案:

  • 将隐藏状态从 localStorage 迁移到数据库 SystemSettings 表
  • 新增 hiddenBuiltinTemplates 字段(String 类型,存储 JSON 数组)
  • 修改 /api/templates 和 /api/upload-templates API,读取隐藏状态并过滤
  • 修改 TemplateManager 组件,从数据库读取和保存隐藏状态

修改文件:

  • prisma/schema.prisma - 添加 hiddenBuiltinTemplates 字段
  • app/api/system-settings/route.ts - 支持读取和更新隐藏状态
  • app/api/templates/route.ts - 过滤隐藏的预制模板
  • app/api/upload-templates/route.ts - 过滤隐藏的预制模板
  • app/admin/_components/TemplateManager.tsx - 从数据库读取/保存隐藏状态

数据库迁移: ⚠️ 重要说明:数据库迁移只需要执行一次(添加 hiddenBuiltinTemplates 字段),之后隐藏/显示预制模板的操作不需要再次迁移。

  • 第一次:运行迁移添加字段(已完成)

    npx prisma db push  # 已执行
    
  • 之后的操作:隐藏/显示预制模板只是更新 SystemSettings 表中的数据值,不是修改数据库结构,所以不需要迁移。这就像更新其他系统设置(如站点名称、Logo等)一样,只是数据更新,不是结构修改。


2. 预览模板样式同步到上传素材表单

问题:预览面板和实际上传表单的样式不一致

解决方案:

  • 将预览面板的样式类应用到上传表单
  • 统一使用 rounded-2xl、渐变背景、阴影等样式
  • 统一必填字段的标识样式(紫色渐变标签)

修改文件:

  • components/UploadModal.tsx - 同步预览面板的样式类

样式改进:

  • 输入框:rounded-2xl、渐变背景、阴影效果
  • 必填标签:紫色渐变标签(from-purple-500 to-indigo-600)
  • 标签样式:text-xs font-semibold、tracking-tight
  • 过渡动画:transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]

3. 自定义模板中隐藏"素材类型"字段

问题:自定义模板的目的是灵活应对不同客户群体,不需要"素材类型"字段

解决方案:

  • 在保存自定义模板时,自动过滤掉 materialType 字段
  • 在 API 返回自定义模板时,过滤掉 materialType 字段
  • 在上传表单渲染时,过滤掉 materialType 字段
  • 预制模板仍然保留 materialType 字段(用于兼容老系统)

修改文件:

  • app/admin/_components/TemplateManager.tsx - 保存时过滤 materialType
  • app/api/upload-templates/route.ts - 返回时过滤 materialType
  • components/UploadModal.tsx - 渲染时过滤 materialType

逻辑说明:

  • 预制模板:保留 materialType 字段(用于兼容老系统数据)
  • 自定义模板:自动隐藏 materialType 字段(更灵活)

📋 数据库迁移

⚠️ 重要说明:迁移只需要执行一次

数据库迁移只需要执行一次(添加 hiddenBuiltinTemplates 字段),之后隐藏/显示预制模板的操作不需要再次迁移。

迁移内容

在 SystemSettings 表中添加:

  • hiddenBuiltinTemplates (String?, nullable) - 存储隐藏的预制模板键名数组(JSON 格式)

迁移状态

✅ 已完成:已通过 npx prisma db push 添加字段到数据库

工作原理

  1. 第一次:添加 hiddenBuiltinTemplates 字段到 SystemSettings 表(结构修改,需要迁移)
  2. 之后:隐藏/显示预制模板时,只是更新这个字段的值(数据更新,不需要迁移)
    • 调用 /api/system-settings PUT 接口
    • 更新 hiddenBuiltinTemplates 字段的 JSON 值
    • 就像更新其他系统设置一样,只是数据更新,不是结构修改

这完全符合项目主旨:字段已经存在,只是在使用它来存储配置数据。


🎯 功能验证

1. 验证预制模板隐藏同步

  1. 进入模板管理
  2. 隐藏一个预制模板
  3. 刷新首页
  4. 检查首页的 tag 是否也隐藏了

2. 验证样式同步

  1. 进入模板管理
  2. 预览一个模板
  3. 打开上传素材表单
  4. 选择相同的模板
  5. 对比样式是否一致

3. 验证素材类型字段隐藏

  1. 创建一个自定义模板
  2. 添加字段(包括素材类型)
  3. 保存模板
  4. 在上传素材时选择该模板
  5. 检查是否看不到"素材类型"字段

⚠️ 注意事项

  1. 数据库迁移:✅ 已完成,只需要执行一次(添加字段)。之后隐藏/显示预制模板的操作只是更新数据,不需要再次迁移。
  2. 向后兼容:预制模板仍然包含 materialType 字段,不影响老系统
  3. 样式一致性:预览和实际上传表单现在使用相同的样式类
  4. 数据更新 vs 结构修改:
    • 隐藏/显示预制模板 = 数据更新(更新 hiddenBuiltinTemplates 字段的值)
    • 不需要数据库迁移,就像更新站点名称、Logo 等系统设置一样

更新日期: 2025-11-23 状态: ✅ 已完成