# game-material-tracker

**Repository Path**: nocjb/game-material-tracker

## Basic Information

- **Project Name**: game-material-tracker
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-31
- **Last Updated**: 2025-08-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 游戏人物材料统计系统

一个用于管理游戏人物升级材料和契约进化配方的Web应用，支持移动端访问。

## ✨ 功能特性

### 核心功能
- **人物管理**: 创建、编辑、删除游戏人物卡片
- **升级系统**: 设置人物升级需求和材料关系
- **库存管理**: 跟踪材料拥有数量和完成进度
- **契约进化**: 配置和管理人物契约进化配方
- **物品管理**: 管理进化所需的特殊物品

### 用户体验
- **响应式设计**: 完美适配桌面端和移动端
- **卡片视图**: 移动端友好的材料展示界面
- **实时统计**: 动态计算完成进度和需求分析
- **批量操作**: 支持批量选择和设置材料
- **搜索筛选**: 快速查找和筛选人物材料

### 移动端优化
- **触摸滑动**: 优化的移动端滚动体验
- **底部弹窗**: 移动端专属的配方设置界面
- **标签导航**: 移动端标签页切换
- **手势支持**: 完整的移动端交互支持

## 🛠 技术架构

### 前端技术栈
- **框架**: React 18 + TypeScript
- **构建工具**: Vite
- **样式**: Tailwind CSS
- **状态管理**: React Hooks + Context API
- **组件库**: 自定义组件系统
- **网络请求**: Axios

### 后端技术栈
- **运行时**: Node.js + Express
- **语言**: TypeScript
- **数据存储**: JSON文件存储（可扩展至PostgreSQL）
- **API设计**: RESTful API
- **中间件**: CORS, Helmet, Morgan

### 开发工具
- **代码质量**: ESLint + Prettier
- **类型检查**: TypeScript
- **版本控制**: Git
- **部署支持**: Docker

## 🚀 快速开始

### 环境要求
- Node.js 18+
- npm 或 yarn

### 开发环境启动

```bash
# 启动后端
cd backend
npm install
npm run dev

# 启动前端（在新终端中）
cd frontend
npm install
npm run dev
```

### 访问应用
- **前端应用**: http://localhost:5173
- **后端API**: http://localhost:3001
- **健康检查**: http://localhost:3001/health

### 移动端访问
1. 确保电脑和手机在同一局域网
2. 查看电脑IP地址（如：192.168.2.104）
3. 手机浏览器访问：http://192.168.2.104:5173

## 📖 使用指南

### 基础操作
1. **创建人物**: 在人物管理页面点击"创建人物"
2. **设置库存**: 在库存页面管理材料数量
3. **查看统计**: 点击人物卡片的"查看统计"按钮
4. **配置进化**: 在契约进化页面设置进化配方

### 移动端使用
- **滑动操作**: 在材料列表中上下滑动查看更多内容
- **批量选择**: 点击"批量选择"按钮快速选择多个材料
- **标签切换**: 在设置配方时使用标签页切换不同功能

## 🔧 API接口

### 已实现接口
- `GET /api/characters` - 获取所有人物
- `POST /api/characters` - 创建人物
- `PUT /api/characters/:id` - 更新人物
- `DELETE /api/characters/:id` - 删除人物
- `GET /api/inventory` - 获取库存
- `PUT /api/inventory/:characterId` - 更新库存
- `GET /api/summary/:characterId` - 获取人物统计
- `GET /api/evolution/:characterId` - 获取进化配方
- `POST /api/evolution/:characterId` - 设置进化配方

### 响应格式
```json
{
  "success": true,
  "data": {...},
  "message": "操作成功"
}
```

## 📁 项目结构

```
game-material-tracker/
├── frontend/                 # 前端React应用
│   ├── src/
│   │   ├── components/      # 组件目录
│   │   ├── hooks/          # 自定义Hooks
│   │   ├── contexts/       # React Context
│   │   ├── types/          # TypeScript类型定义
│   │   └── utils/          # 工具函数
├── backend/                 # 后端Express应用
│   ├── src/
│   │   ├── storage/        # 数据存储模块
│   │   ├── types/          # 类型定义
│   │   └── index-simple.ts # 简化版服务器
│   └── data/               # JSON数据文件
└── docs/                   # 文档目录
```

## 🎯 开发计划

### 即将发布
- [ ] 数据导出功能（JSON/Excel）
- [ ] 用户认证和权限管理
- [ ] 数据备份和恢复
- [ ] PostgreSQL数据库支持

### 长期规划
- [ ] 多语言支持
- [ ] 主题切换功能
- [ ] 高级统计分析
- [ ] 移动端应用

## 🤝 贡献指南

我们欢迎所有形式的贡献！

### 如何贡献
1. Fork 本项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建Pull Request

### 开发规范
- 使用TypeScript编写类型安全的代码
- 遵循ESLint配置的代码规范
- 编写清晰的组件和函数注释
- 确保移动端和桌面端的兼容性

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 📞 联系我们

- 提交问题: [GitHub Issues](../../issues)
- 功能建议: [GitHub Discussions](../../discussions)
- 邮箱: [your-email@example.com](mailto:your-email@example.com)

---

**⭐ 如果这个项目对您有帮助，请给我们一个Star！**