目录与架构

目录结构

text

ace-admin-max/
├─ public/
│  ├─ api/                 # 静态 JSON 演示接口
│  └─ libarchive/          # 构建/启动时复制的 WASM 与 worker
├─ src/
│  ├─ api/                 # 按业务域组织的接口函数
│  ├─ assets/              # 样式与静态资源
│  ├─ components/          # 全局通用组件
│  ├─ composables/         # 操作列、确认、批量、导出等组合式能力
│  ├─ directives/          # v-auth 权限指令
│  ├─ i18n/                # 国际化实例与语言包
│  ├─ router/              # 路由实例、守卫与静态路由
│  ├─ shims/               # 浏览器空模块垫片
│  ├─ stores/              # Pinia 状态域
│  ├─ types/               # 共享 TypeScript 类型
│  ├─ utils/               # HTTP、文件、图表、权限等工具
│  └─ views/               # 页面与布局
├─ .env*                   # 环境配置
├─ vite.config.ts          # 开发服务器与构建配置
└─ package.json

启动链路

src/main.ts 的初始化顺序如下：

创建 Vue 应用并注册 v-auth。
安装全局错误处理器。
创建 Pinia，启用持久化插件。
优先注册首屏使用的 IconPark 图标。
安装 Naive UI 与 Pinia。
初始化路由：加载系统信息、数据字典；有 Token 时加载用户和动态菜单。
安装国际化并挂载应用。
浏览器空闲时异步加载其余图标包。

分层职责

页面组件负责交互编排，不直接处理底层请求细节；src/api 描述业务接口；src/utils/http 处理通用网络策略；store 管理跨组件和持久化状态；composable 封装跨页面重复的交互流程。

推荐依赖方向：

text

views/components → composables/stores/api → utils → 第三方库

避免让 utils 反向依赖具体业务页面，也不要在多个页面复制相同的确认、批量或错误处理逻辑。

重要组件

组件	用途
`views/layout/components/Table.vue`	通用数据表格、分页、选择与异常态
`views/layout/components/Search.vue`	配置驱动搜索表单
`components/Editor.vue`	wangEditor 富文本封装
`components/ImageCropper.vue`	图片裁剪
`components/IconSelect.vue`	多图标包选择器
`components/Draggable.vue`	拖拽封装
`components/Iframe.vue`	iframe 页面承载
`components/ErrorBoundary.vue`	局部错误边界

Mock 与真实后端

public/api 适合演示和 UI 联调，不是 Mock Server：它不会读取请求参数，也不会保存修改。真实开发建议使用独立后端、可编程 Mock 服务或契约测试工具，并让所有响应遵循统一信封。

目录与架构 ​

目录结构 ​

启动链路 ​

分层职责 ​

重要组件 ​

Mock 与真实后端 ​