目录结构
完整目录树
naive-admin-max/
├── public/
│ └── api/ # 静态 JSON Mock（只读种子数据，CRUD 不持久化）
│ ├── system/ # 系统模块 Mock 数据
│ └── ... # 其他模块 Mock 数据
├── src/
│ ├── api/ # 接口定义（按模块划分，统一走 utils/http）
│ │ ├── system/ # 系统模块接口（用户/角色/菜单/字典等）
│ │ └── ... # 其他业务模块接口
│ ├── assets/ # 全局样式与静态资源
│ │ ├── images/ # 图片资源
│ │ └── styles/ # 全局样式文件
│ ├── components/ # 通用组件
│ │ ├── Table/ # 数据表格组件（含分页/加载态/空状态）
│ │ ├── Search/ # 搜索表单组件
│ │ ├── Editor/ # 富文本编辑器（wangEditor）
│ │ ├── IconSelect/ # 图标选择器
│ │ └── ... # 其他通用组件
│ ├── composables/ # 组合式函数
│ │ ├── useRowActions.ts # 表格操作列（声明式配置）
│ │ ├── useConfirm.ts # 确认弹窗
│ │ ├── useBatchOptions.ts # 批量操作
│ │ ├── useExport.ts # 分页导出
│ │ └── useResultModal.ts # 结果弹窗
│ ├── directives/ # 自定义指令
│ │ └── auth.ts # v-auth 按钮权限指令
│ ├── i18n/ # 国际化
│ │ ├── index.ts # i18n 实例配置
│ │ └── locales/ # 语言包
│ │ ├── zh-CN.ts # 中文语言包
│ │ └── en-US.ts # 英文语言包
│ ├── router/ # 路由
│ │ ├── index.ts # 路由实例与守卫
│ │ └── routes/
│ │ └── staticRoutes.ts # 静态路由（登录/异常页等）
│ ├── stores/ # Pinia 状态管理
│ │ ├── settings.ts # 主题/布局/偏好配置
│ │ ├── settings.migrate.ts # 偏好 schema 版本迁移
│ │ ├── user.ts # 用户信息 + 菜单/动态路由
│ │ ├── dict.ts # 数据字典
│ │ ├── tab.ts # 多页签状态
│ │ ├── lock.ts # 锁屏状态与 PIN
│ │ └── socket.ts # WebSocket 连接状态
│ ├── types/ # 全局类型声明
│ ├── utils/
│ │ ├── http/ # Axios 封装
│ │ │ ├── index.ts # Axios 实例与拦截器
│ │ │ ├── error.ts # 错误处理逻辑
│ │ │ └── status.ts # 状态码映射
│ │ ├── pure.ts # 纯函数（树/颜色/时间等，零 UI 依赖）
│ │ └── tools.ts # UI 相关工具 + re-export pure
│ ├── views/ # 页面
│ │ ├── layout/ # 主布局（侧边栏/顶栏/内容区）
│ │ ├── login/ # 登录页
│ │ ├── dashboard/ # 仪表盘
│ │ ├── templates/ # 业务模块模板
│ │ │ └── system/ # 系统管理（用户/角色/菜单）
│ │ └── error/ # 异常页面（403/404/500）
│ ├── App.vue # 根组件
│ ├── main.ts # 入口文件
│ └── style.css # 全局样式
├── .env # 基础环境变量
├── .env.development # 开发环境变量
├── .env.production # 生产环境变量
├── eslint.config.js # ESLint flat config
├── tsconfig.json # TypeScript 配置
├── vite.config.ts # Vite 配置
└── package.json # 项目配置与依赖目录职责说明
| 目录/文件 | 职责 |
|---|---|
public/api/ | 静态 JSON Mock 数据，开箱即用无需后端；CRUD 操作仅前端生效，刷新后还原 |
src/api/ | 按业务模块组织的接口定义文件，统一使用 utils/http 发送请求 |
src/components/ | 通用可复用组件，如 Table、Search、Editor、IconSelect 等 |
src/composables/ | Vue 3 组合式函数，封装操作列、确认弹窗、批量操作、导出等逻辑 |
src/directives/ | 自定义指令，目前主要是 v-auth 按钮权限指令 |
src/i18n/ | 国际化配置与语言包，支持中英文切换 |
src/router/ | 路由实例、路由守卫、静态路由定义；动态路由由 Store 登录后挂载 |
src/stores/ | Pinia 状态管理，涵盖用户、偏好、字典、页签、锁屏、WebSocket |
src/utils/ | 工具函数：HTTP 封装（拦截器/错误处理）、纯函数、UI 工具 |
src/views/ | 所有页面组件，按功能模块组织 |