最近把站内的角色生成器重新打磨了一轮。这次不只是加了”角色封面”功能，而是把整个流程——角色配置、前台预览、后台模板管理、封面导出——完整梳理了一遍。
从开发角度看，真正做的事是把原本零散的角色展示逻辑，整理成一套更完整、更可维护的系统。
为什么要重做角色生成器
最初做角色生成器，只想让用户快速组合角色形象。但功能越加越多后，问题开始暴露：
- 角色配置项越来越多，部件之间需要同步切换
- 前台预览和后台数据逐渐分散
- 新增封面功能后，流程变得更复杂
- 导出下载、iframe 预览等场景陆续出现
当功能从”能用”走向”长期维护”，临时拼凑的结构就撑不住了。所以干脆完整重做一轮。
这次重构的核心目标
这次主要想解决三件事：
-
- 让角色配置更直观
- 让封面生成真正接入角色流程
- 让后台模板管理和前台展示联动
目标很明确：用户从进入页面到最后下载图片，中间是一条连续链路，不割裂。
角色配置的难点不在”切换”，而在”组织”
表面看是”点按钮换张图”，实际难点在于：把多个配置项的状态整理清楚，稳定映射到预览结果。
角色预览基于外部接口生成，但前端仍有大量逻辑要处理：
- 不同配置项的数据结构如何统一
- 用户切换选项后，当前状态如何保存
- 当前角色配置如何稳定同步到预览区域
- 哪些配置需要互相关联
- 进入封面步骤后，如何把当前角色状态继续传递下去
真正的挑战不是”有没有自己绘制角色图层”，而是如何把配置、接口预览和后续封面流程顺利串起来。
角色配置为什么必须做成”数据驱动”
尽量不让逻辑写死在前端判断里。思路是：
- 前台读取配置数据
- 根据数据生成选项和预览
- 用户切换时只更新对应状态
- 最终把状态传递给封面模块
好处明显：以后新增配置项、调整顺序、扩展内容，只需围绕同一套数据结构扩展，不用推翻重写。
角色生成器要有结果输出
以前很多类似功能到”配置完成”就结束了。但我认为，角色生成器真正有价值的地方，是让过程产出一个结果。
所以把”角色封面”作为重要一环接入：
- 完成角色配置
- 进入封面选择
- 将角色放进不同模板预览
- 最终生成并下载
这给角色生成器补上了最后一段：让角色从”配置中的对象”变成”可以产出的内容”。
封面模板的设计与管理
- 封面模板的结构设计
封面采用模板驱动，每个模板在后台独立维护，包含：名称、预览图、封面图、底层图、分层模式、角色 X/Y 坐标、是否启用。
核心三部分：预览图用于前台快速选择样式，封面图/底层图决定实际合成效果，X/Y坐标微调角色在封面中的位置。后台维护封面时不需要改前端逻辑，调参数即可适配。 - 为什么必须支持分层模式
如果只是加边框图，实现很简单。但想让角色”融入”封面，必须分层。
开启分层后，层级变为：底层图 → 角色 → 封面图。角色可以站在前景装饰和背景之间，或部分被边框遮挡，构图更完整，更像成品封面。 - 每个模板需要独立坐标
不同封面构图差异大，角色可能居中、偏下、靠左或靠右。如果共用固定位置，效果会很僵硬。
每个模板加入独立 X/Y 坐标微调：X 正值向右，负值向左；Y 正值向下，负值向上。不用改前端结构，不用单独写特殊逻辑。 - 后台折叠式管理
模板数量增加后，平铺表单会很长很乱。改成折叠式管理：每个模板一个折叠项，默认收起，需要时展开。页面更整洁，结构更清晰。标题栏直接显示启用/关闭状态（绿色”已启用”/灰色”已关闭”），不展开也能知道哪些模板正在前台使用。 - 动态新增和删除
封面模板如果写死，每次新增都要改代码。现在做成动态结构：支持新增、删除，动态保存任意数量模板，前台按启用数据自动读取。以后新增封面是”维护内容”，不是”改程序”。 - 前台展示逻辑调整
封面前台不再读固定编号，而是读取后台模板列表并筛选：只展示启用模板，按当前顺序显示，切换时实时更新预览。后台新增、关闭、删除，前台同步反映，无需额外改逻辑。这种联动比写死在模板里健康得多。
导出下载的坑
下载流程本身没问题：捕获封面区域 → 渲染 canvas → 转 blob → 触发下载。
但在 iframe 预览时遇到隐蔽问题：提示下载成功，实际没下载文件。原因是 iframe 的 sandbox 权限拦截了下载动作。修复后 iframe 场景才能正常工作。
iframe 模式下隐藏导航和底部
工具型页面在 iframe 里打开时，导航、页脚、角标会挤压主区域、分散注意力。加了 iframe 模式识别：自动切换到嵌入模式，隐藏顶部导航、底部和装饰元素，让页面更聚焦于角色内容本身。
这次最重要的：链路补完整了
拆开看是几件小事：整理配置、增加封面、重做后台、修下载和 iframe 问题。
合在一起，完成的是一条完整链路：用户进入页面 → 配置角色 → 实时预览 → 选择封面模板 → 生成展示图 → 下载保存。角色生成器不再只是”可交互页面”，而是真正具备从配置到输出的完整能力。
后续优化方向
增加更多角色配置项和封面模板风格，支持更细的角色缩放和定位参数，优化移动端选择和预览体验，更直观的后台缩略图管理，扩展不同尺寸、比例的导出规格。基础结构已搭好，以后加内容改动成本会低很多。
这次不是单纯做了一个”封面功能”，而是把角色配置、前台预览、后台管理和最终导出连成了一条完整流程。角色配置解决”怎么生成角色”，封面解决”怎么变成最终成品”。两部分打通后，角色生成器不再只是配置页面，而是一个能产出内容的工具模块。后续会继续围绕这套结构优化下去。
