前端开发

技术栈

• Vue 3.5 + Composition API + <script setup>
• TypeScript
• Element Plus — UI 组件库
• Pinia — 状态管理
• UnoCSS — 原子化 CSS
• Vite — 构建工具
• vue-i18n — 国际化

项目结构

platform/ 和 tenant/ 遵循相同的目录规范，区别在于业务页面。

API 层 (src/api/)

每个业务模块一个文件，统一使用 myRequest 封装：

// src/api/product.ts
import { myRequest } from '@/utils/request'

export const productApi = {
    list: (params: any) => myRequest.get('/tenantapi/products', { params }),
    create: (data: any) => myRequest.post('/tenantapi/products', data),
    // ...
}

请求封装 (src/utils/request.ts)

• 基于 axios 封装
• 自动添加 Authorization: Bearer <token> 请求头
• 自动添加 Accept-Language 请求头（i18n）
• 401 响应自动跳转登录页
• 统一错误提示（ElMessage）

路由 (src/router/)

• 动态路由：登录后从后端 API 获取菜单数据，自动生成路由
• 路由守卫：未登录跳转登录页，已登录跳过登录页

状态管理 (src/store/)

Store	作用
app	全局状态（侧边栏折叠、主题配置等）
user	用户信息、Token、权限列表
settings	系统设置
multipleTabs	多标签页管理

Hooks (src/hooks/)

Hook	作用
useListPage	分页列表（搜索、分页、删除一体化）
useFormDialog	弹窗表单（新增/编辑、提交、重置）
useDictOptions	字典数据加载

组件规范

• 页面组件放在 views/{module}/index.vue
• 表单弹窗放在 views/{module}/components/{Module}Form.vue
• 通用组件放在 components/

权限指令

<!-- 按钮级权限控制 -->
<el-button v-has-perm="['product.store']">新增</el-button>

<!-- SaaS 功能开关（仅 tenant 端） -->
<el-button v-feature="'code.generator'">代码生成</el-button>

国际化

语言包在 src/locales/，使用 $t('key') 或 useI18n() 的 t() 方法：

<template>
  <span>{{ $t('common.search') }}</span>
</template>

<script setup>
const { t } = useI18n()
const label = t('common.confirm')
</script>

构建部署

pnpm build

构建产物在 dist/ 目录，上传到服务器对应目录即可。