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