mes-ai-admin-backend-ui/src/view/TemplateManagement/ARCHITECTURE.md

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 调用新增/更新接口