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