简体中文
项目结构
目录概览
zhontai-ui-admin-app/
├── src/ # 源码目录
│ ├── api/ # API 接口（自动生成）
│ │ ├── admin/ # Admin 模块 API
│ │ ├── dev/ # Dev 模块 API
│ │ └── demo/ # Demo 模块 API
│ │
│ ├── components/ # 全局组件
│ │ ├── DemoBlock.vue # 示例展示块（Demo页面使用）
│ │ ├── GlobalDialog.vue # 全局对话框
│ │ ├── GlobalLoading.vue # 全局加载提示
│ │ ├── GlobalToast.vue # 全局轻提示
│ │ ├── LoginForm.vue # 登录表单
│ │ ├── LoginPopup.vue # 登录弹窗
│ │ ├── MyNavbar.vue # 自定义导航栏
│ │ ├── PrivacyPopup.vue # 隐私协议弹窗
│ │ ├── SliderCaptcha.vue # 滑块验证码
│ │ └── SliderCaptchaPopup.vue # 滑块验证码弹窗
│ │
│ ├── composables/ # 组合式函数（可导出）
│ │ ├── types/ # 组合式函数类型
│ │ ├── useGlobalDialog.ts # 全局对话框
│ │ ├── useGlobalLoading.ts # 全局加载
│ │ ├── useGlobalToast.ts # 全局提示
│ │ ├── useLoginPopup.ts # 登录弹窗
│ │ ├── useManualTheme.ts # 手动主题切换
│ │ ├── useTabbar.ts # Tabbar 控制
│ │ ├── useTeam.ts # 团队相关
│ │ └── useTheme.ts # 主题控制
│ │
│ ├── hooks/ # 自定义 Hooks
│ │ ├── useAuth.ts # 权限控制（用于控制页面元素/功能）
│ │ └── useI18nSync.ts # 国际化语言同步（跟随系统/手动切换）
│ │
│ ├── layouts/ # 布局组件
│ │ ├── default.vue # 默认布局
│ │ └── tabbar.vue # TabBar 布局
│ │
│ ├── locale/ # 国际化语言包
│ │ ├── index.ts # i18n 实例创建与导出
│ │ ├── zh-Hans.json # 简体中文语言包
│ │ └── en.json # 英文语言包
│ │
│ ├── pages/ # 主业务页面
│ │ ├── workbench/ # 工作台
│ │ ├── msg/ # 消息
│ │ └── mine/ # 我的
│ │
│ ├── pages-core/ # 核心页面（分包）
│ │ ├── login/ # 登录页
│ │ ├── change-password/ # 修改密码页
│ │ ├── profile/ # 个人资料页
│ │ └── set/ # 设置页
│ │
│ ├── pages-demo/ # 示例页面
│ │
│ ├── pages-system/ # 系统页面（分包）
│ │ └── pkg/ # 套餐管理
│ │ └── form/ # 套餐表单页
│ │
│ ├── resolver/ # 组件解析器
│ │
│ ├── router/ # 路由配置
│ │ └── index.ts # 路由实例和守卫
│ │
│ ├── static/ # 静态资源
│ │
│ ├── store/ # Pinia 状态管理
│ │ ├── userStore.ts # 用户状态
│ │ ├── themeStore.ts # 主题状态
│ │ ├── manualThemeStore.ts # 手动主题状态
│ │ └── persist.ts # 持久化插件
│ │
│ ├── theme/ # 主题样式
│ │ ├── index.scss # 主题入口文件（导入基础变量）
│ │ └── app.scss # 应用级主题样式覆盖
│ │
│ ├── uni_modules/ # UniApp 模块
│ │
│ ├── utils/ # 工具函数
│ │ ├── date.ts # 日期工具
│ │ ├── enum.ts # 枚举定义
│ │ └── index.ts # 工具函数入口
│ │
│ ├── customize-tab-bar/ # 自定义 TabBar
│ │
│ ├── App.ku.vue # UniKu App 入口
│ ├── App.vue # 应用根组件
│ ├── auto-imports.d.ts # 自动导入类型声明
│ ├── components.d.ts # 组件类型声明
│ ├── env.d.ts # 环境变量类型
│ ├── main.ts # 应用入口
│ ├── manifest.json # UniApp 配置
│ ├── pages.json # 页面路由配置（自动生成）
│ ├── shims.d.ts # 类型声明补充
│ ├── theme.json # 主题变量
│ ├── uni.scss # 全局样式变量
│ └── uni-pages.d.ts # 页面类型声明
│
├── .env.development # 开发环境变量
├── .env.production # 生产环境变量
├── .env.staging # 预发布环境变量
├── alova.config.ts # Alova API 代码生成配置
├── commitlint.config.js # Commitlint 配置
├── eslint.config.mjs # ESLint 配置
├── index.html # 入口 HTML
├── manifest.config.ts # UniApp Manifest 配置
├── package.json # 项目依赖配置
├── pages.config.ts # 页面全局配置
├── pnpm-lock.yaml # 依赖锁定文件
├── pnpm-workspace.yaml # Pnpm 工作区配置
├── tsconfig.base.json # TypeScript 基础配置
├── tsconfig.json # TypeScript 主配置
├── uno.config.ts # UnoCSS 配置
└── vite.config.ts # Vite 构建配置核心目录说明
src/api/
API 接口目录，通过 alova 从 Swagger 自动生成。包含三个模块：
- admin/: 后台管理接口
- dev/: 开发工具接口
- demo/: 示例接口
src/components/
全局公共组件，支持 easycom 自动注册。主要包含：
| 组件 | 说明 |
|---|---|
| GlobalDialog | 全局模态对话框，配合 useGlobalDialog 使用 |
| GlobalLoading | 全局加载遮罩层，配合 useGlobalLoading 使用 |
| GlobalToast | 全局轻提示（Success/Error/Warning），配合 useGlobalToast 使用 |
| LoginForm | 登录表单组件（账号密码、验证码） |
| LoginPopup | 登录弹窗包装组件，处理未登录拦截场景 |
| MyNavbar | 自定义导航栏，替代原生导航栏 |
| PrivacyPopup | 隐私协议弹窗，首次启动展示 |
| SliderCaptcha | 滑块验证码组件，用于人机校验 |
| SliderCaptchaPopup | 滑块验证码弹窗封装 |
| DemoBlock | Demo 页面的示例展示块容器 |
src/composables/
Vue 3 组合式函数（Composables），用于逻辑复用。这些函数会被 AutoImport 自动导入，无需手动 import。
src/hooks/
自定义 Hooks 封装核心业务逻辑：
| Hook | 说明 |
|---|---|
| useAuth | 权限控制（用于控制页面元素/功能） |
| useI18nSync | 国际化语言同步：跟随系统语言切换、手动切换语言持久化 |
src/locale/
基于 vue-i18n 的国际化配置：
- index.ts: 创建 i18n 实例，配置默认语言和 fallback
- zh-Hans.json: 简体中文翻译
- en.json: 英文翻译
src/store/
Pinia 状态管理，包含：
- userStore: 用户登录状态、用户信息
- themeStore: 主题配置
- manualThemeStore: 手动主题切换状态
- persist: 持久化存储插件
src/pages/
主业务页面，采用分包加载优化性能：
pages-core/ — 核心页面包（必须独立分包）
| 页面 | 说明 |
|---|---|
| login | 登录页面，支持账号密码+验证码登录 |
| change-password | 修改密码页面 |
| profile | 个人资料查看与编辑 |
| set | 设置页面（语言切换、主题等） |
pages-system/ — 系统管理页面包
| 页面 | 说明 |
|---|---|
| pkg | 包管理列表 |
| pkg/form | 包表单（新增/编辑） |
pages/ — 主业务页面（主包）
- workbench/: 工作台首页
- msg/: 消息中心
- mine/: 个人中心
src/theme/
主题样式配置，SCSS 变量体系：
- index.scss: 导入 wot-ui 主题变量，定义项目基础变量
- app.scss: 应用级样式覆盖，包含全局组件样式定制
src/router/
基于 @wot-ui/router 的路由配置，包含：
- 路由实例创建
- 全局前置守卫（登录鉴权）
- 白名单机制
分包策略
项目采用 UniApp 分包加载策略，将页面分为多个包：
typescript
// vite.config.ts 中配置
UniHelperPages({
subPackages: [
'src/pages-core', // 核心页面包
'src/pages-system', // 系统页面包
],
})分包优势：
- 减少主包体积
- 按需加载，提升首屏速度
- 符合小程序分包限制