R524809涂鸦丫后台管理系统 - 前端应用
技术栈
- React 19
- TypeScript
- Vite
- Ant Design
- Axios
环境配置
- 复制
.env.example为.env - 配置API地址：
VITE_API_URL=http://localhost:3301
VITE_PORT=3300
安装依赖
npm install
运行
开发模式
npm run dev
构建
npm run build
预览
npm run preview
功能说明
汉字管理
-
卡片列表
- 每页显示9个汉字卡片
- 支持汉字搜索
- 按年级排序（低年级在前）
-
卡片内容
- 左上角：汉字（大号字体）
- 右上角上方：拼音（多音字用"|"分割）
- 右上角下方：SVG标识（绿色=有，灰色=无）
- 下方：第一张关联图片
-
详情弹窗
- 点击卡片右侧滑出弹窗
- 田字格+Canvas渲染字体
- 有SVG：黑色笔画渲染
- 无SVG：灰色文字显示
- 拼音展示
- 笔画顺序展示
- 图片管理（最多4张）
- 词语管理（待实现）
- 句子管理（支持添加、删除）
-
编辑模式
- 图片：支持删除、排序
- 句子：支持添加、删除
- 汉字、拼音、SVG不可编辑（通过其他方式导入）
注意事项
- 确保API服务已启动
- 图片路径需要正确配置
- SVG数据格式需要符合规范