feat():learning后台管理前端页面初始化

2025-12-04 17:51:24 +08:00
commit 83a614bd75
97 changed files with 23324 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,178 @@
+# Goalfy Admin Web - Token 统计系统
+
+基于 React + Ant Design + TypeScript + Vite 技术栈开发的 Token 使用统计前端页面。
+
+## 技术栈
+
+- **React 19.1.1** - 前端框架
+- **Ant Design 5.x** - UI 组件库
+- **TypeScript 5.9.3** - 类型系统
+- **Vite 7.1.7** - 构建工具
+- **Axios** - HTTP 客户端
+- **Day.js** - 日期处理
+- **ESLint** - 代码检查
+
+## 功能特性
+
+### 🎯 核心功能
+- **Token 使用统计** - 实时显示 Token 使用量、用户数、项目数、模型数
+- **历史数据查询** - 支持按时间范围、用户、项目等条件查询
+- **数据可视化** - 图表展示使用趋势和排行榜
+- **详细数据表格** - 支持排序、分页的详细数据展示
+
+### 🎨 界面设计
+- **深色主题** - 参考 goalfy-admin 的深色设计风格
+- **响应式布局** - 支持桌面和移动端
+- **现代化 UI** - 使用 Ant Design 组件库
+- **直观操作** - 简洁的查询界面和操作流程
+
+## 项目结构
+
+```
+src/
+├── components/          # React 组件
+│   ├── QuotaFilters.tsx    # 查询过滤器
+│   ├── QuotaStats.tsx      # 统计概览
+│   ├── QuotaCharts.tsx     # 图表组件
+│   └── QuotaHistoryTable.tsx # 历史数据表格
+├── services/           # API 服务
+│   └── api.ts             # API 客户端
+├── types/              # TypeScript 类型
+│   └── quota.ts           # 配额相关类型
+├── App.tsx             # 主应用组件
+├── App.css             # 全局样式
+└── main.tsx            # 应用入口
+```
+
+## 快速开始
+
+### 1. 安装依赖
+```bash
+npm install
+```
+
+### 2. 启动开发服务器
+```bash
+npm run dev
+```
+
+### 3. 构建生产版本
+```bash
+npm run build
+```
+
+## API 配置
+
+在 `src/services/api.ts` 中配置后端 API 地址：
+
+```typescript
+const API_BASE_URL = 'http://localhost:8080'; // 修改为实际的后端地址
+```
+
+## 后端 API 接口
+
+应用调用以下后端接口：
+
+- `POST /api/quotas/history` - 获取配额历史数据
+- `GET /health` - 健康检查
+
+### 请求参数示例
+
+```json
+{
+  "start_date": "2024-01-01",
+  "end_date": "2024-01-31",
+  "user_id": "user123",
+  "api_group": "openai",
+  "project_id": "project456",
+  "period": "daily",
+  "group_by": ["user_id", "model"]
+}
+```
+
+### 响应数据格式
+
+```json
+{
+  "success": true,
+  "data": [
+    {
+      "id": 1,
+      "user_id": "user123",
+      "api_group": "openai",
+      "project_id": "project456",
+      "day": "2024-01-01",
+      "account": "account123",
+      "model": "gpt-4",
+      "quota_used": 1000.5,
+      "created_at": "2024-01-01T10:00:00Z"
+    }
+  ]
+}
+```
+
+## 组件说明
+
+### QuotaFilters
+查询条件过滤器，支持：
+- 时间范围选择
+- 用户ID、API组、项目ID筛选
+- 统计周期选择
+- 分组维度配置
+
+### QuotaStats
+统计概览卡片，显示：
+- 总 Token 使用量
+- 活跃用户数
+- 项目数量
+- 模型数量
+
+### QuotaCharts
+数据可视化图表：
+- 每日使用趋势图
+- 用户使用量排行
+- 模型使用量排行
+
+### QuotaHistoryTable
+详细数据表格，支持：
+- 数据排序
+- 分页显示
+- 响应式布局
+- 数据导出
+
+## 样式定制
+
+应用使用深色主题，主要颜色变量：
+
+```css
+--bg: #0b0c0f;        /* 背景色 */
+--panel: #12141a;     /* 面板色 */
+--text: #e7e9ee;      /* 文字色 */
+--accent: #5f97d2;    /* 强调色 */
+--border: #232634;    /* 边框色 */
+```
+
+## 开发说明
+
+### 添加新功能
+1. 在 `src/types/` 中定义类型
+2. 在 `src/services/` 中添加 API 调用
+3. 在 `src/components/` 中创建组件
+4. 在 `App.tsx` 中集成组件
+
+### 代码规范
+- 使用 TypeScript 严格模式
+- 遵循 ESLint 规则
+- 组件使用函数式写法
+- 使用 Ant Design 组件库
+
+## 部署说明
+
+1. 构建生产版本：`npm run build`
+2. 将 `dist` 目录部署到 Web 服务器
+3. 配置后端 API 地址
+4. 确保 CORS 配置正确
+
+## 许可证
+
+内部使用，仅供 Goalfy 团队使用。