TierMaster 动态内容分级工具

React + Vite + @dnd-kit 实现的动态分级榜单，支持自定义层级、跨容器拖拽、批量图片/文本添加、配置导入导出与长图截图。UI 采用深色沉浸式风格，底部待分类池吸底展示。

快速开始

• make init 安装依赖
• make dev 启动本地开发（默认 5173 端口）
• make lint 运行 ESLint
• make test 运行 Vitest（当前为占位，可按需补充用例）
• make build 构建产物

技术栈与规范

• 前端框架：React + TypeScript + Vite
• 拖拽：@dnd-kit/core + @dnd-kit/sortable
• 状态管理：zustand
• 样式：Tailwind CSS，自定义深色主题色板，字体使用 Space Grotesk
• I/O：file-saver（JSON 导出/图片保存）、html2canvas（长图截图）
• 规范：.editorconfig 统一缩进与行宽；ESLint + Prettier 校验；行宽上限 100；推荐使用 npm run lint 自检

主要功能

• 层级管理：添加/重命名/改色、清空、删除（含物品回收池），拖拽重排层级顺序
• 物品管理：批量图片上传（自动裁剪为正方形）、文本卡片创建、删除
• 拖拽交互：跨层级/池子拖拽，行内排序，拖拽高亮反馈
• 数据导入导出：JSON 结构与 docs/需求文档.md 定义兼容
• 长图保存：忽略底部操作栏，可下载当前榜单图片

数据结构

TierConfig（导入导出）：

• tiers: { id, label, color }[]
• items: { id, type: 'text'|'image', content, tierId }[]
• itemOrder: Record<containerId, string[]> 维护容器内排序；pool 代表待分类池

目录

• src/App.tsx：页面布局、顶部工具栏、交互入口
• src/components/：Tier 行、物品卡片、底部池子等 UI
• src/state/useTierStore.ts：zustand 状态与导入/导出/截图逻辑
• src/utils/image.ts：图片读取与正方形裁剪工具

后续扩展建议

• 增加分级色板选择/校验、移动端触控细节优化
• 为导入/导出增加 schema 校验与版本控制
• 增补单元测试（拖拽数据迁移、导入合并、色彩循环等）