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*
|