349d783fd1
- Remove old review reports (keep latest only) - Move docs/ to deploy/docs-backup/ - Move performance-testing/ to deploy/ - Clean up test output files - Organize root directory
137 lines
2.9 KiB
Markdown
137 lines
2.9 KiB
Markdown
# Sub2API 模块分析报告：前端架构与实现
|
||
|
||
## 1. 模块概述
|
||
|
||
### 1.1 模块定位
|
||
前端模块是Sub2API的Web管理界面，提供用户管理、账号管理、监控面板等功能。前端采用Vue 3框架开发，与后端通过RESTful API通信。
|
||
|
||
### 1.2 技术栈
|
||
|
||
| 技术 | 版本 |
|
||
|------|------|
|
||
| Vue | 3.4+ |
|
||
| TypeScript | 5.0+ |
|
||
| Vite | 5.0+ |
|
||
| Pinia | 状态管理 |
|
||
| TailwindCSS | UI框架 |
|
||
| Axios | HTTP客户端 |
|
||
|
||
## 2. 代码结构
|
||
|
||
### 2.1 目录结构
|
||
|
||
```
|
||
frontend/src/
|
||
├── api/ # API调用
|
||
├── assets/ # 静态资源
|
||
├── components/ # 公共组件
|
||
├── composables/ # Vue组合式函数
|
||
├── layouts/ # 布局组件
|
||
├── router/ # 路由配置
|
||
├── stores/ # Pinia状态
|
||
├── styles/ # 样式文件
|
||
├── types/ # TypeScript类型
|
||
├── utils/ # 工具函数
|
||
└── views/ # 页面组件
|
||
```
|
||
|
||
### 2.2 核心模块
|
||
|
||
| 模块 | 说明 |
|
||
|------|------|
|
||
| `api/` | 后端API封装 |
|
||
| `stores/` | 全局状态管理 |
|
||
| `views/` | 页面组件 |
|
||
| `components/` | 可复用组件 |
|
||
|
||
## 3. 核心功能
|
||
|
||
### 3.1 状态管理（Pinia）
|
||
|
||
```typescript
|
||
// stores/user.ts
|
||
export const useUserStore = defineStore('user', {
|
||
state: () => ({
|
||
user: null as User | null,
|
||
token: '',
|
||
}),
|
||
|
||
actions: {
|
||
async login(email: string, password: string) {
|
||
const response = await api.login(email, password)
|
||
this.token = response.token
|
||
this.user = response.user
|
||
},
|
||
},
|
||
})
|
||
```
|
||
|
||
### 3.2 API封装
|
||
|
||
```typescript
|
||
// api/index.ts
|
||
const client = axios.create({
|
||
baseURL: import.meta.env.VITE_API_BASE_URL,
|
||
})
|
||
|
||
client.interceptors.request.use((config) => {
|
||
const token = useUserStore().token
|
||
if (token) {
|
||
config.headers.Authorization = `Bearer ${token}`
|
||
}
|
||
return config
|
||
})
|
||
```
|
||
|
||
### 3.3 页面组织
|
||
|
||
| 页面 | 路由 | 功能 |
|
||
|------|------|------|
|
||
| 仪表板 | `/dashboard` | 概览统计 |
|
||
| 用户管理 | `/users` | 用户CRUD |
|
||
| API Key | `/apikeys` | Key管理 |
|
||
| 账号管理 | `/accounts` | 上游账号 |
|
||
| 分组管理 | `/groups` | 分组配置 |
|
||
| 用量统计 | `/usage` | 用量查询 |
|
||
| 系统设置 | `/settings` | 系统配置 |
|
||
|
||
## 4. 构建与部署
|
||
|
||
### 4.1 构建配置
|
||
|
||
```yaml
|
||
# vite.config.ts
|
||
export default defineConfig({
|
||
build: {
|
||
target: 'es2020',
|
||
minify: 'terser',
|
||
rollupOptions: {
|
||
output: {
|
||
manualChunks: {
|
||
vendor: ['vue', 'vue-router', 'pinia'],
|
||
},
|
||
},
|
||
},
|
||
},
|
||
})
|
||
```
|
||
|
||
### 4.2 Docker嵌入
|
||
|
||
```dockerfile
|
||
# 后端构建时嵌入前端
|
||
RUN go build -tags embed -o sub2api ./cmd/server
|
||
```
|
||
|
||
## 5. 总结
|
||
|
||
前端模块特点：
|
||
|
||
- **现代技术栈**：Vue 3 + TypeScript + Vite
|
||
- **组件化**：清晰的组件层次
|
||
- **状态管理**：Pinia统一管理
|
||
- **响应式**：支持移动端
|
||
|
||
---
|
||
*文档版本：1.0*
|
||
*分析基于：Sub2API v0.1.104* |