Fun Toolkit一套框架，按任务组合
先复用结构与状态，再接处理逻辑。统一流程：选择素材 → 预览与调整 → 生成 → 下载；自动处理工具可省去手动生成。
六区是六种职责，不是六张卡。基础工具只需左侧工作卡与右侧输出卡；一两个参数放在相关内容旁边，不另开侧栏。
| 六区 | 必选内容 | 按需模块 |
|---|---|---|
| ① 全站页头 | Logo 回首页、当前导航、中英切换、作者 | 更多工具入口 |
| ② 标题与帮助 | 一个左对齐 H1，简短工具名 | 灰色使用说明 / 案例按钮，详情放弹窗 |
| ③ 预览与输入 | 上传、格式约束、空态、预览、替换 | 拖放、批量队列、透明底与背景切换 |
| ④ 参数与动作 | 任务状态；只保留真正需要用户决定的参数 | 尺寸、质量、裁切、播放、时间轴、生成、进度 |
| ⑤ 输出结果 | 首次空态、有效结果、真实尺寸、下载 | 缩略图、体积、多规格列表、ZIP |
| ⑥ 全站页脚 | 版权、统计、设计规范、作者 | 确认后的资源链接 |
桌面留空间，手机顺着做
7:3 是桌面目标比例；输出栏的最小宽度和窄屏可用性优先。
> 900 px · 双栏
- 容器最大 1440 px，默认左右各 42 px；901–1100 px 紧凑桌面为 24 px。
- 7:3 工作台，右栏至少 300 px；间距 16 px。
- 1440 px 下内容宽 1356 px，双栏约 938 / 402 px。
541–900 px · 单列
- 左右 24 px。
- 先预览与参数，再输出。
- 默认自然页面滚动，不强行压窄双栏。
320–540 px · 手机
- 左右 16 px；卡片内边距 16 px、卡片间距 14 px。
- 页头两行；操作命中区 ≥44×44 px。
- 输入内容 ≥16 px；页面无横向滚动。
| 模块 | 统一规则 |
|---|---|
| 标题与卡片 | H1 桌面 26/32、手机 22/28 px；标题到工作台桌面 16 / 手机 14 px。外卡桌面圆角 22、内边距 24 px；手机圆角 18 px。 |
| 预览高度 | 新模板桌面空态默认 440 px，541–900 px 为 400 px；手机可用 clamp(280px, 48svh, 360px)。载入后按内容适应，不把图片比例强制变成整张工作卡高度。 |
| 长内容 | 文件名换行或展开；英文动作不截断。需要横滑的表格与时间轴仅在自身区域滚动。 |
| 滚动与键盘 | 默认不吸附输出栏，不给两栏同时设固定满屏高度。手机键盘和弹窗出现后，关键动作仍可到达。 |
当前差异：头像框 / Banner 桌面空预览 440 px，房间背景保留 590 px 长画布例外。旧卡片内边距 23 / 19 / 18 px，新增模板统一 24 px；手机均用 16 px。不要复制旧隐藏 .sources 来源侧栏。
五个状态，先搭齐再接业务
状态占用稳定区域；重要反馈留在页面上。下面是新工具标准，不代表现有工具已经具备全部恢复能力。
| 状态 | 界面与动作 | 文案示例 |
|---|---|---|
| idle · 上传前 | 上传入口、支持格式、空结果；导出禁用并说明条件。 | 点击或拖入图片 上传素材后可生成文件 |
| ready · 已载入 | 预览、文件名、替换、参数；手动生成或明确转入自动处理。 | 已载入，可以调整后生成 |
| processing · 处理中 | 保留素材，锁定会改变当前任务的操作；按钮保宽防重；只显示真实进度。 | 正在读取… / 正在生成… / 正在打包… |
| success · 成功 | 结果可检查；展示规格与下载，保留再次调整入口。 | 已生成 2 个文件 下载全部 · ZIP |
| error · 错误 | 保留输入，在失败位置解释原因并给出恢复操作。 | 文件读取失败，请替换文件或重试 |
读取、校验、编码、下载失败分别反馈；“已发起下载”不能写“已保存成功”。批量部分成功、单项重试、取消与保留旧结果需要实际实现，模板不能仅显示一个可点击入口。
选一种变体，删掉多余模块
差异只在业务模块。页头、标题、卡片、反馈与输出继续使用同一套语言。
Banner
一处上传，工作卡内展示多个预览；右侧按规格列结果，提供单个下载与 ZIP。
- 上传后自动生成。
- 房间 772×200；游戏 684×240，内图 645×201。
- 黑色 / 透明只切换预览，导出仍透明。
房间背景
左侧批量预览；裁切、错误定位到具体文件；右侧按源文件与规格组织输出。
- 720×1560 与 300×480。
- 不同规格有独立裁切位置。
- 预览 UI 图层不混入背景导出。
头像框
预览下方放播放、前后帧、时间轴；右侧放选定帧、尺寸与导出。
- 载入停在第 1 帧，点击播放才播放。
- 默认 240×240，1:1 锁定；16–2048 整数。
- 输出静态透明 WebP。
单文件不硬塞批量操作；动画不自动播放；没有真实质量调节能力时，不展示无效质量滑杆。未来文字 / 表单工具采用左输入、右结果，移除上传与画布槽，不造空画布填位置。
让页面可复用，也让结果可信
结构由模板复用，业务由工具实现。内部标识稳定，显示名称可以中英切换。
状态持有
- 语言、视口、预览背景不改变导出内容，保留素材、参数与帧位置。
- 源文件、处理参数、选定帧改变时，旧结果应标记失效；新结果成功后再释放旧资源。
- 任务版本拦截过期回调，旧文件不能覆盖新文件。
- 切工具或刷新后的恢复能力需单独定义；不要承诺刷新后恢复内存文件。
真实能力边界
- 模板不自动提供编码、SVGA 解码、上传服务、取消、持久化或共享统计。
- 失败不计生成；ZIP 不重复计生成；下载计有效发起操作。
- 当前统计只登记 room / avatar / banner；新工具需补前后端登记。
- 文件类型、字节、像素、数量限制按工具明确并真实校验。
| 契约 | 要求 |
|---|---|
| 工具标识与路由 | 当前 data-tool 为 room / avatar / banner；地址为 #room-backgrounds / #avatar-frames / #banners。新工具使用稳定英文小写标识与可读短横线路由。 |
| 结构与字段 | 旧页沿用 .workspace / .preview / .exports；新模板隔离样式，按职责插槽接入，不要求旧页重命名。字段 ID 带工具前缀，label for 对应唯一 ID。 |
| 状态与输出 | 建议 data-state="idle|ready|processing|success|error"；输出记录持有源文件、规格、尺寸、格式、体积、文件名、下载地址和任务版本。 |
| 双语 | 文案按工具分组；标题、参数、错误、空态、辅助说明、ARIA 名称一起翻译。文件名、px、格式与尺寸不翻译。 |
旧结果失效、部分成功保留与任务版本是新增接入目标；现有三工具仍有差异。Banner 的 30 MiB / 4000 万像素上限不代表全站限制。当前没有自动注册 API，首页、hash、词条、导航与计数需要明确接入。
独立 Starter 用于复制页面骨架，不是第 4 个生产工具；状态控制器属于示例，不发起真实生成或统计。
模板实际使用empty / ready / processing / success / error，empty对应这里的idle。入口为ToolPageDemo.setState()；结构以data-slot标记。替换tool-page.js中的simulateGeneration()与previewFile()接入业务，完整插槽清单见模板README。
同样的动作，同样的反馈
沿用主规范的控件和动效参数，不在每个新工具里重新设计一套。
- 主动作蓝底白字，普通 hover 保持蓝调；替换用绿色，删除用危险色。每个区域只突出当前阶段最重要的动作。
- 鼠标输入焦点为 1 px 细蓝边和极淡光晕；键盘为 2 px 外环；错误边框不能被 hover 覆盖。
- 主按钮复用轻扫光；禁用与处理中停用，只对精确指针 hover 触发，触屏不残留、不循环。
- 帮助弹窗沿用轻弹性与玻璃遮罩；明确关闭按钮、Escape、焦点进入与返回；支持减少动画。
- 导航用链接、操作用按钮、字段有标签；状态用 role=status / aria-live=polite。避免上传区与内部按钮相互重复触发。
- 手机保持纵向滚动，操作区至少 44 px；200% 缩放与长英文仍能完成流程。
当前三个工具通过根目录 tool-feedback.css / tool-feedback.js 适配共用 feedback-motion。最新模板复用同一反馈基础：800ms Spinner、1600ms 骨架；普通内容 180ms / 6px 入场，生产 Canvas 区域 160ms 纯透明度淡入，忙碌提示 120ms 淡出。配套六张空态与两张占位 SVG，详见反馈规范 →；团队 Skill 与三步用法 →。
新工具接入清单
模板节省页面搭建时间，验收仍以真实文件与真实任务为准。
- 选择单文件 / 批量 / 动画变体，删除不用的模块。
- 确认输入限制、自动或手动流程、默认参数、输出规格、压缩与命名。
- 复用全站壳、标题与两张工作卡；补帮助、导航选中与首页入口。
- 接真实读取、校验、处理、编码和下载；不把模拟计时器当作正式成功。
- 补五态、替换、校验、失败恢复、旧结果失效与并发任务规则。
- 补中英、标签、键盘、弹窗焦点和减少动画。
- 验证 1440 / 1024 / 900 / 768 / 390 / 320 px、长英文和 200% 缩放。
- 用真实素材核对尺寸、透明度、画质、命名、单个 / 批量下载；统计在真实成功后接入。