# 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 校验与版本控制
- 增补单元测试（拖拽数据迁移、导入合并、色彩循环等）