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