Initial clean project import
This commit is contained in:
cat-shark
@@ -0,0 +1,507 @@
|
||||
# 系统模板设置和使用指南
|
||||
|
||||
## 📍 在哪里创建系统模板？
|
||||
|
||||
现在您可以直接在现有的模板编辑器中创建系统模板，**无需创建专门的管理页面**。
|
||||
|
||||
---
|
||||
|
||||
## ✨ 新功能：在模板编辑器中设为系统模板
|
||||
|
||||
### 位置
|
||||
|
||||
**封面模板编辑器**
|
||||
|
||||
位置: `视频` → `创建视频` → `编辑封面模板`
|
||||
|
||||
或: 在 `CoverSettingsDialog` 中编辑封面模板
|
||||
|
||||
文件: `src/pages/Video/components/CoverCustomEditor/index.vue`
|
||||
|
||||
---
|
||||
|
||||
## 🎯 使用流程
|
||||
|
||||
### 第 1 步：编辑模板
|
||||
|
||||
1. 进入 **视频** 页面
|
||||
2. 创建或编辑**封面模板**
|
||||
3. 设计您的模板内容（使用 Canvas 编辑器）
|
||||
|
||||
### 第 2 步：设为系统模板（仅开发模式）
|
||||
|
||||
**⚠️ 仅在开发模式下可用**
|
||||
|
||||
在模板编辑器底部，您会看到：
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────┐
|
||||
│ ✨ 设为系统模板 │
|
||||
│ （保存时自动导出到配置文件） │
|
||||
│ [☐] ← 勾选此选项 │
|
||||
├──────────────────────────────────────────────┤
|
||||
│ [取消] [保存系统模板] │
|
||||
└──────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**如何使用:**
|
||||
|
||||
1. **创建新模板** → 设计内容
|
||||
2. **勾选** "✨ 设为系统模板" 选项
|
||||
3. **点击保存** → 系统会自动：
|
||||
- ✅ 保存到数据库
|
||||
- ✅ 导出到 `system-templates.json`
|
||||
- ✅ 显示成功提示
|
||||
|
||||
### 第 3 步：验证导出
|
||||
|
||||
保存成功后，会看到提示：
|
||||
|
||||
```
|
||||
✅ 系统模板已保存并自动导出到配置文件
|
||||
```
|
||||
|
||||
模板已自动导出到: `electron/config/system-templates.json`
|
||||
|
||||
---
|
||||
|
||||
## 🔄 工作流程图
|
||||
|
||||
```
|
||||
┌─────────────────────────┐
|
||||
│ 打开封面模板编辑器 │
|
||||
└────────────┬────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────┐
|
||||
│ 编辑模板（设计内容） │
|
||||
└────────────┬────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────┐
|
||||
│ 在开发模式下？ │
|
||||
└────┬──────────────┬─────┘
|
||||
│ 是 │ 否
|
||||
▼ ▼
|
||||
✅ 显示 ❌ 不显示
|
||||
系统模板选项 系统模板选项
|
||||
│ │
|
||||
└──────┬───────┘
|
||||
│
|
||||
▼
|
||||
┌────────────────┐
|
||||
│ 勾选系统模板 │
|
||||
└────────┬───────┘
|
||||
│ (可选)
|
||||
▼
|
||||
┌────────────────────┐
|
||||
│ 点击"保存系统模板" │
|
||||
└────────┬───────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────┐
|
||||
│ 后端处理： │
|
||||
│ 1. 保存到 data.db │
|
||||
│ 2. 导出到 JSON 文件 │
|
||||
└────────┬────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────┐
|
||||
│ ✅ 系统模板已保存 │
|
||||
│ 并自动导出! │
|
||||
└─────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────┐
|
||||
│ 重启应用后: │
|
||||
│ 自动加载此系统模板 │
|
||||
└─────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📋 功能说明
|
||||
|
||||
### 开发模式检测
|
||||
|
||||
系统会自动检测您是否在开发模式：
|
||||
|
||||
```typescript
|
||||
// 开发模式 ✅
|
||||
npm run dev:win
|
||||
npm run dev:mac
|
||||
|
||||
// 生产模式 ❌
|
||||
npm run build:win
|
||||
npm run build:mac
|
||||
export ELECTRON_ENV_PROD=1
|
||||
```
|
||||
|
||||
**只有在开发模式下，才会显示"设为系统模板"选项。**
|
||||
|
||||
---
|
||||
|
||||
## 🔒 生产模式保护
|
||||
|
||||
### 生产环境中的行为
|
||||
|
||||
在生产模式下：
|
||||
|
||||
✅ **系统模板是只读的**
|
||||
- 用户无法编辑系统模板
|
||||
- 无法看到"设为系统模板"选项
|
||||
- 系统模板被标记为 `readonly=1`
|
||||
|
||||
✅ **用户可以创建自己的模板**
|
||||
- 自定义模板保存到数据库
|
||||
- 不会自动导出到 JSON
|
||||
- 用户可以编辑和删除自己的模板
|
||||
|
||||
---
|
||||
|
||||
## 💾 自动导出机制
|
||||
|
||||
### 什么被导出？
|
||||
|
||||
当您勾选"设为系统模板"并保存时：
|
||||
|
||||
```json
|
||||
{
|
||||
"version": "1.0.0",
|
||||
"description": "系统内置模板配置",
|
||||
"timestamp": "2026-01-15T...",
|
||||
"subtitleTemplates": [ /* ... */ ],
|
||||
"coverTemplates": [
|
||||
{
|
||||
"id": "your_template_id",
|
||||
"name": "您的模板名称",
|
||||
"description": "模板描述",
|
||||
"is_system": 1,
|
||||
"readonly": 0,
|
||||
"config": { /* 完整的模板配置 */ },
|
||||
"createdAt": 1768396885438
|
||||
}
|
||||
// ... 其他系统模板
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 文件位置
|
||||
|
||||
导出位置: `electron/config/system-templates.json`
|
||||
|
||||
### 什么时候导出？
|
||||
|
||||
- ✅ 保存时自动导出（勾选了"设为系统模板"）
|
||||
- ✅ 修改系统模板时自动导出
|
||||
- ✅ 每次导出都会更新时间戳
|
||||
|
||||
---
|
||||
|
||||
## 🔧 技术细节
|
||||
|
||||
### 修改的文件
|
||||
|
||||
**`src/pages/Video/components/CoverCustomEditor/index.vue`**
|
||||
|
||||
新增功能：
|
||||
- 开发模式检测 (`useDevMode()`)
|
||||
- 系统模板选项 (`isSystemTemplate` ref)
|
||||
- 自动导出逻辑 (`saveCoverTemplateWithAutoExport()`)
|
||||
- 保存时的条件判断
|
||||
|
||||
新增状态变量：
|
||||
```typescript
|
||||
const { isDev } = useDevMode(); // 开发模式检测
|
||||
const isSystemTemplate = ref(false); // 系统模板选项
|
||||
const isSaving = ref(false); // 保存状态
|
||||
```
|
||||
|
||||
新增保存逻辑：
|
||||
```typescript
|
||||
if (isSystemTemplate.value && isDev) {
|
||||
// 使用自动导出 API 保存系统模板
|
||||
await saveCoverTemplateWithAutoExport({...});
|
||||
} else {
|
||||
// 普通模板保存
|
||||
await saveCoverTemplate({...});
|
||||
}
|
||||
```
|
||||
|
||||
### 相关 API
|
||||
|
||||
**前端 API** (`src/api/systemTemplates.ts`):
|
||||
- `saveCoverTemplateWithAutoExport(template)` - 保存并自动导出
|
||||
- `saveSubtitleTemplateWithAutoExport(template)` - 字幕模板（如适用）
|
||||
- `isDevMode()` - 检查开发模式
|
||||
|
||||
**后端 IPC** (`electron/mapi/subtitleCover/`):
|
||||
- `systemTemplates:saveCoverAndExport` - IPC 处理程序
|
||||
- `saveCoverTemplateAndExport()` - 后端实现
|
||||
|
||||
**Composable** (`src/composables/useDevMode.ts`):
|
||||
- `useDevMode()` - 开发模式检测 hook
|
||||
|
||||
---
|
||||
|
||||
## 📊 模板数据结构
|
||||
|
||||
### 覆盖模板配置示例
|
||||
|
||||
```typescript
|
||||
{
|
||||
// 基础信息
|
||||
id: "template_custom_1234567890",
|
||||
name: "我的系统模板",
|
||||
description: "这是一个自定义的系统模板",
|
||||
|
||||
// 系统标记
|
||||
is_system: 1, // 1=系统模板, 0=用户模板
|
||||
readonly: 0, // 1=只读(生产), 0=可编辑(开发)
|
||||
|
||||
// 时间戳
|
||||
created_at: 1768396885438,
|
||||
updated_at: 1768396885438,
|
||||
|
||||
// 完整的设计配置
|
||||
config: {
|
||||
name: "我的系统模板",
|
||||
backgroundEnabled: true,
|
||||
backgroundBlurEnabled: true,
|
||||
backgroundBlurIntensity: 10,
|
||||
// ... 其他 1000+ 个配置字段
|
||||
titleText: "标题",
|
||||
subtitleText: "副标题",
|
||||
// ... 完整的封面配置
|
||||
},
|
||||
|
||||
// 可选
|
||||
thumbnailPath: "/path/to/thumbnail.png"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ 验证导出成功
|
||||
|
||||
### 方法 1：检查文件变化
|
||||
|
||||
```bash
|
||||
# 检查 system-templates.json 文件是否已更新
|
||||
ls -la electron/config/system-templates.json
|
||||
|
||||
# 查看文件内容（搜索您的模板 ID）
|
||||
cat electron/config/system-templates.json | grep "your_template_id"
|
||||
```
|
||||
|
||||
### 方法 2：查看浏览器控制台
|
||||
|
||||
保存系统模板时，会输出日志：
|
||||
|
||||
```
|
||||
[CoverCustomEditor] 保存为系统模板: template_custom_1234567890
|
||||
[CoverCustomEditor] 系统模板已导出: template_custom_1234567890
|
||||
```
|
||||
|
||||
### 方法 3：检查数据库
|
||||
|
||||
```sql
|
||||
-- 检查数据库中的系统模板
|
||||
SELECT id, name, is_system, readonly FROM cover_templates
|
||||
WHERE is_system = 1
|
||||
ORDER BY created_at DESC;
|
||||
|
||||
-- 输出示例：
|
||||
-- id name is_system readonly
|
||||
-- template_custom_1234567890 我的系统模板 1 0
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 下次启动时的行为
|
||||
|
||||
### 应用启动流程
|
||||
|
||||
```
|
||||
1️⃣ 应用启动
|
||||
↓
|
||||
2️⃣ initSystemTemplates() 运行
|
||||
├─ 读取 system-templates.json
|
||||
└─ 初始化数据库
|
||||
↓
|
||||
3️⃣ 您的系统模板被加载
|
||||
├─ is_system = 1（标记为系统模板）
|
||||
├─ readonly = 0（开发模式可编辑）
|
||||
└─ 完整的配置被加载到数据库
|
||||
↓
|
||||
4️⃣ 应用正常运行
|
||||
└─ 您的系统模板可以被选择和使用
|
||||
```
|
||||
|
||||
### 生产模式下
|
||||
|
||||
```
|
||||
1️⃣ 应用启动
|
||||
2️⃣ initSystemTemplates() 运行
|
||||
3️⃣ 您的系统模板被加载
|
||||
└─ readonly = 1（设为只读）
|
||||
4️⃣ 用户无法编辑系统模板
|
||||
├─ UI 不显示编辑选项
|
||||
├─ IPC 调用被拒绝
|
||||
└─ 数据库标记为只读
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎁 额外特性
|
||||
|
||||
### 自动导出失败处理
|
||||
|
||||
如果导出到 JSON 失败：
|
||||
|
||||
✅ **保存操作仍然成功**
|
||||
- 数据已保存到数据库
|
||||
- 只是 JSON 导出失败
|
||||
- 后端会记录警告日志
|
||||
|
||||
❌ **不会中断保存过程**
|
||||
|
||||
示例：
|
||||
```
|
||||
[CoverCustomEditor] 保存为系统模板: template_id
|
||||
[CoverCustomEditor] 系统模板已导出: template_id
|
||||
✅ 系统模板已保存并自动导出到配置文件
|
||||
```
|
||||
|
||||
### 时间戳自动更新
|
||||
|
||||
每次导出都会自动更新时间戳：
|
||||
|
||||
```json
|
||||
{
|
||||
"timestamp": "2026-01-15T14:30:45.123Z",
|
||||
// ... 其他字段
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📝 常见问题
|
||||
|
||||
### Q1：在哪里找到系统模板选项？
|
||||
|
||||
**A:** 在模板编辑器底部，只有在**开发模式**下才会显示。
|
||||
|
||||
```
|
||||
开发模式: npm run dev:win
|
||||
查看位置: 底部按钮上方
|
||||
```
|
||||
|
||||
### Q2：为什么看不到系统模板选项？
|
||||
|
||||
**A:** 可能原因：
|
||||
|
||||
1. ❌ 不在开发模式
|
||||
```bash
|
||||
# 检查是否开发模式
|
||||
npm run dev:win # ✅ 正确
|
||||
npm run build:win # ❌ 这是生产构建
|
||||
```
|
||||
|
||||
2. ❌ 设置了生产环境变量
|
||||
```bash
|
||||
unset ELECTRON_ENV_PROD # 清除环境变量
|
||||
```
|
||||
|
||||
### Q3：系统模板和普通模板的区别？
|
||||
|
||||
| 特性 | 系统模板 | 普通模板 |
|
||||
|------|--------|--------|
|
||||
| 开发模式可编辑 | ✅ | ✅ |
|
||||
| 生产模式只读 | ✅ | ❌ |
|
||||
| 自动导出到 JSON | ✅ | ❌ |
|
||||
| 包含在发行版中 | ✅ | ❌ |
|
||||
| 用户可删除 | ❌ | ✅ |
|
||||
| is_system 标记 | 1 | 0 |
|
||||
|
||||
### Q4：如何修改已保存的系统模板？
|
||||
|
||||
**A:** 再次编辑并保存：
|
||||
|
||||
1. 打开模板编辑器
|
||||
2. 修改内容
|
||||
3. **再次勾选** "✨ 设为系统模板"
|
||||
4. 点击保存
|
||||
5. 配置文件会自动更新
|
||||
|
||||
---
|
||||
|
||||
## 🎓 工作原理总结
|
||||
|
||||
### 简化流程
|
||||
|
||||
```
|
||||
编辑模板 + 勾选"系统模板" + 点保存
|
||||
↓
|
||||
自动执行后端逻辑
|
||||
├─ 保存到 data.db
|
||||
├─ 导出到 system-templates.json
|
||||
└─ 更新时间戳
|
||||
↓
|
||||
重启应用时
|
||||
├─ 从 JSON 加载配置
|
||||
└─ 初始化到数据库
|
||||
↓
|
||||
✅ 系统模板被成功保留
|
||||
```
|
||||
|
||||
### 关键优势
|
||||
|
||||
✨ **无需手动导出** - 自动完成
|
||||
✨ **不需要新页面** - 复用现有编辑器
|
||||
✨ **开发友好** - 编辑即导出
|
||||
✨ **生产安全** - 系统模板只读
|
||||
|
||||
---
|
||||
|
||||
## 📞 技术支持
|
||||
|
||||
### 查看日志
|
||||
|
||||
**浏览器控制台:**
|
||||
```
|
||||
F12 → Console → 搜索 [CoverCustomEditor]
|
||||
```
|
||||
|
||||
**应用日志:**
|
||||
```
|
||||
electron/mapi/log/main.ts
|
||||
搜索关键字: saveSubtitleTemplateAndExport, saveCoverTemplateAndExport
|
||||
```
|
||||
|
||||
### 调试
|
||||
|
||||
```typescript
|
||||
// 检查开发模式
|
||||
console.log('isDev:', isDev.value);
|
||||
|
||||
// 检查系统模板选项
|
||||
console.log('isSystemTemplate:', isSystemTemplate.value);
|
||||
|
||||
// 检查导出结果
|
||||
console.log('[CoverCustomEditor] 系统模板已导出');
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎉 总结
|
||||
|
||||
现在您可以：
|
||||
|
||||
1. ✅ 在模板编辑器中创建和设计系统模板
|
||||
2. ✅ 勾选选项自动导出到 JSON
|
||||
3. ✅ 重启应用后自动加载系统模板
|
||||
4. ✅ 生产版本中系统模板保持只读
|
||||
5. ✅ 无需创建专门的管理页面
|
||||
|
||||
**就这么简单！** 🚀
|
||||
Reference in New Issue
Block a user