# CreateTemplate 模版设计页 - 架构与维护指南

## 概述

CreateTemplate.vue 是模版创建/编辑页，功能较多，代码量大。本文档描述当前架构、目录结构与维护建议，便于团队协作与调试。

## 目录结构

```
TemplateManagement/
├── CreateTemplate.vue      # 主页面（编排层）
├── TemplateDesign.vue     # 模版列表页
├── constants.js           # 常量集中管理（可调试、易维护）
├── utils.js               # 纯工具函数
├── ARCHITECTURE.md        # 本架构文档
└── composables/           # （规划）可复用的组合式逻辑
    └── ...
```

## 模块职责

### constants.js
- **职责**：集中管理配置常量，便于调整与调试
- **内容**：画布比例、AI 工具列表、素材分类、预设参数等
- **使用**：`import { RATIO_CONFIG, AI_TOOL_LIST, ... } from './constants.js'`

### utils.js
- **职责**：纯函数工具，无副作用，可单独测试
- **内容**：`resolveMaterialUrl`、`toStoragePath`、`formatFileSize`、`getImageLoadUrl`
- **使用**：`import { resolveMaterialUrl, getImageLoadUrl, toStoragePath, formatFileSize } from './utils.js'`

### CreateTemplate.vue
- **职责**：页面编排、状态管理、事件协调
- **建议**：保持为“薄编排层”，将复杂逻辑逐步抽离到 composables 或子组件

## 可维护性建议

1. **常量修改**：统一在 `constants.js` 中修改，避免在组件内硬编码
2. **工具函数**：新增纯函数放入 `utils.js`，并补充 JSDoc
3. **调试**：通过修改 `constants.js` 中的值可快速验证不同配置
4. **后续拆分**：可将 `useMaterials`、`useCanvasLayers`、`useTemplateSave` 等抽成 composables

## 状态流转概要

- **pages / layers**：多页模版，每页独立图层数组
- **currentPageIndex**：当前编辑页
- **selectedLayerId**：当前选中图层
- **editingTemplateId**：编辑已有模版时的 ID（保存走更新接口）

## 关键流程

- 新建：`clearDesign()` → 空画布
- 编辑：`useTemplate(template)` → 加载模版数据
- 做同款：`useAsTemplate(template)` → 加载但不设 editingTemplateId
- 保存：`saveTemplate()` → 根据 editingTemplateId 调用新增/更新接口