项目结构

ZsAdmin 前端采用模块化、组件化的设计思想，代码结构清晰，易于维护和扩展。本章节将详细介绍项目的目录结构和各目录的主要功能。

项目根目录结构

核心目录结构

src/
├── api/                # 接口定义
│   ├── login/          # 登录相关接口
│   ├── sys/            # 系统管理接口
│   ├── tool/           # 工具相关接口
│   └── *.ts            # 其他接口文件
├── assets/             # 静态资源
│   └── icons/          # 图标资源
├── components/         # 公共组件
├── config/             # 配置文件
├── directive/          # 自定义指令
├── hooks/              # 自定义钩子
├── layout/             # 布局组件
├── locale/             # 国际化配置
├── mock/               # 模拟数据
├── router/             # 路由配置
├── store/              # 状态管理
├── types/              # TypeScript 类型定义
├── typings/            # 类型声明
├── utils/              # 工具函数
├── views/              # 页面组件
├── App.vue             # 根组件
└── main.ts             # 入口文件

目录详细说明

目录	主要功能
assets/	存放项目的静态资源，包括图标、图片和样式文件
components/	存放公共组件，可在多个页面中复用
composables/	存放 Vue 3 组合式函数，用于逻辑复用
directives/	存放自定义指令，扩展 Vue 的功能
layouts/	存放布局组件，定义页面的整体结构
locales/	存放国际化配置，支持多语言切换
router/	存放路由配置，定义页面路由和权限控制
stores/	存放 Pinia 状态管理，管理应用的状态
types/	存放 TypeScript 类型定义，提供类型安全
utils/	存放工具函数，提供通用的功能支持
views/	存放页面组件，对应路由配置的页面