mirror of https://github.com/Wei-Shaw/claude-relay-service.git synced 2026-01-22 16:43:35 +00:00

Files

shaw 414856f152 feat: 全新的Vue3管理后台(admin-spa)和路由重构

🎨 新增功能：
- 使用Vue3 + Vite构建的全新管理后台界面
- 支持Tab切换的API统计页面（统计查询/使用教程）
- 优雅的胶囊式Tab切换设计
- 同步了PR #106的会话窗口管理功能
- 完整的响应式设计和骨架屏加载状态

🔧 路由调整：
- 新版管理后台部署在 /admin-next/ 路径
- 将根路径 / 重定向到 /admin-next/api-stats
- 将 /web 页面路由重定向到新版，保留 /web/auth/* 认证路由
- 将 /apiStats 页面路由重定向到新版，保留API端点

🗑️ 清理工作：
- 删除旧版 web/admin/ 静态文件
- 删除旧版 web/apiStats/ 静态文件
- 清理相关的文件服务代码

🐛 修复问题：
- 修复重定向循环问题
- 修复环境变量配置
- 修复路由404错误
- 优化构建配置

🚀 生成方式：使用 Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>

2025-07-29 12:40:51 +08:00

3.7 KiB

Raw Blame History

Claude Relay Service 管理后台 SPA

这是 Claude Relay Service 管理后台的 Vue3 SPA 重构版本。

开发环境要求

Node.js >= 16
npm >= 7

安装和运行

1. 安装依赖

cd web/admin-spa
npm install

2. 开发模式运行

npm run dev

重要提示：

开发服务器启动后，会自动在浏览器中打开
必须访问完整路径：http://localhost:3001/web/admin/
不要访问 http://localhost:3001/ （会显示404）
首次访问会自动跳转到登录页面

3. 生产构建

npm run build

构建产物将输出到 dist 目录。

4. 预览生产构建

npm run preview

项目结构

web/admin-spa/
├── public/               # 静态资源
├── src/
│   ├── api/             # API 接口封装
│   ├── assets/          # 资源文件
│   ├── components/      # 组件
│   ├── composables/     # 组合式函数
│   ├── router/          # 路由配置
│   ├── stores/          # Pinia 状态管理
│   ├── utils/           # 工具函数
│   ├── views/           # 页面视图
│   ├── App.vue          # 根组件
│   └── main.js          # 入口文件
├── package.json
└── vite.config.js

功能模块

✅ 登录认证
✅ 仪表板（系统统计、使用趋势、模型分布）
🚧 API Keys 管理
🚧 账户管理（Claude/Gemini）
🚧 使用教程
🚧 系统设置

技术栈

Vue 3.3.4
Vue Router 4
Pinia（状态管理）
Element Plus 2.4.4
Tailwind CSS
Chart.js 4.4.0
Vite 5

开发注意事项

所有 API 请求都通过 /api 目录下的模块进行封装
状态管理使用 Pinia，存放在 /stores 目录
组件按功能模块组织在 /components 目录下
保持与原版页面的功能和样式一致性

代理配置

如果你的后端服务器需要通过代理访问（例如服务器在国外），可以配置 HTTP 代理：

方法一：使用环境变量文件（推荐）

创建 .env.development.local 文件：

# 后端服务器地址
VITE_API_TARGET=http://74.48.134.98:3000

# HTTP 代理配置
VITE_HTTP_PROXY=http://127.0.0.1:7890

方法二：使用系统环境变量

# Linux/Mac
export VITE_HTTP_PROXY=http://127.0.0.1:7890
npm run dev

# Windows
set VITE_HTTP_PROXY=http://127.0.0.1:7890
npm run dev

注意：.env.development.local 文件不会被提交到版本控制，适合存放本地特定的配置。

部署

构建后的文件需要部署到 Claude Relay Service 的 web/admin/ 路径下。

常见问题

Q: 访问 localhost:3001 显示 404？

A: 这是正常的。应用配置在 /web/admin/ 路径下，必须访问完整路径：http://localhost:3001/web/admin/

Q: 登录时 API 请求失败（500错误）？

确保主服务运行：Claude Relay Service 必须运行在 http://localhost:3000
检查代理配置：Vite 会自动代理 /admin 和 /api 请求到 3000 端口
重启开发服务器：如果修改了配置，需要重启 npm run dev
测试代理：运行 node test-proxy.js 检查代理是否正常工作

Q: 如何处理开发和生产环境的 API 配置？

开发环境：使用 Vite 代理，自动转发请求到 localhost:3000
生产环境：直接使用相对路径 /admin，无需配置
两种环境都使用相同的 API 路径，通过环境变量自动切换

Q: 如何部署到生产环境？

运行 npm run build 构建项目
将 dist 目录内容复制到服务器的 /web/admin/ 路径
确保服务器配置了 SPA 路由回退规则

3.7 KiB Raw Blame History Unescape Escape