tokens-reef/deploy/docs-backup/MODULE_11_FRONTEND.md

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）

// 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封装

// 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 构建配置

# vite.config.ts
export default defineConfig({
  build: {
    target: 'es2020',
    minify: 'terser',
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia'],
        },
      },
    },
  },
})

4.2 Docker嵌入

# 后端构建时嵌入前端
RUN go build -tags embed -o sub2api ./cmd/server

5. 总结

前端模块特点：

• 现代技术栈：Vue 3 + TypeScript + Vite
• 组件化：清晰的组件层次
• 状态管理：Pinia统一管理
• 响应式：支持移动端

---

文档版本：1.0 分析基于：Sub2API v0.1.104