# 涂鸦丫后台管理系统 - 前端应用

## 技术栈

- 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数据格式需要符合规范