# 目录结构

# 整体结构概览

本项目遵循模块化结构设计，确保代码的可维护性、可复用性和清晰的职责划分。以下是项目的根目录结构概览：

本项目主要由以下几个核心部分组成：

CRUD 组件
Vab-Admin 相关代码（即 library 文件夹）
其他配置文件
业务相关文件

# 下级结构解析

# 其他配置文件

该部分主要存放环境配置、构建相关文件等，通常无需修改。

babel.config.js、tsconfig.json：构建和类型配置
.eslintrc.js、.prettierrc：代码规范配置
...(常规工程化配置，不再一一介绍)

由于这些配置文件通常已经优化好，开发过程中一般无需改动。

# `CRUD` 组件

CRUD 组件是 DJ-Admin 框架的核心模块，提供高可复用的增删改查功能。

components：CRUD 相关 UI 组件，如 AForm、ATable、APagination。

目录/文件	说明
独立封装组件	每个模块单独封装，可单独使用。最终由`CRUD`组合成高级组件，涵盖所有功能。
使用限制说明	虽然每个组件可独立使用，但是因为共用一套配置格式，可能会有轻微的耦合性限制。

config： CRUD 组件的配置逻辑，如表单、搜索、分页的预设,自动计算等...

这些底层逻辑是不需要修改的，除非有 Bug 或特殊情况

目录/文件	说明
`config.global`	存放默认配置
`config.items.*`	是针对 `items` 配置的不同处理
`config.labelWidth` & `config.operateWidth`	是自动计算的一些逻辑处理
`index.ts`	是整体逻辑的封装，以及提供了一些便捷方法，如：`updateItems`、`setOptions`...

目录/文件	说明
`directive`	自定义指令，如权限控制、`v-copyText` 一键复制、`v-debounce、v-throttle` 防抖节流
`utils`	相关工具函数，防抖、节流、字典、权限、弹窗等...

CRUD 组件基本都已全局注册，无需手动引入。包括 utils 中的一些方法也已经挂载到 Vue 实例上。

const { proxy } = getCurrentInstance();

// toast 提示
proxy.$popup.success(msg);

// 获取字典
const { role } = await proxy.$dict(["role"], false);

// 安全执行
proxy.$safelyCall(someVar.value, () => {
  // doSome
});

// 省略...

# `Vab-Admin` 相关代码

Vab-Admin 是本项目的底层 Admin 框架，包含 UI 组件、布局管理等。

目录/文件	说明
`components`	`Vab-Admin` UI 组件，如 `VabMenu`、`VabTable`
`layouts`	多种布局方案，如 `VabLayoutVertical`、`VabLayoutHorizontal`
`plugins`	插件管理
`styles`	全局样式

Vab-Admin 组件库中的组件，大多是框架使用的组件，如 VabMenu、VabNav 等。不会在项目中使用。

# 业务相关文件

该部分主要是相关联的业务逻辑代码，如 src 目录下的 views、api、store 等。

目录/文件	说明
`/env.*`	环境变量配置文件，如 `.env.development`、`.env.production`
`/src/config`	配置管理，包括 `request`、`token`、`title` 等配置
`/src/router`	路由配置， `/modules` 存放的多位前端路由，如使用后端路由，不会有这么多文件。`permissions.ts` 是针对权限在路由中的拦截处理、以及生成校验。
`/src/api`	后端接口模块化封装，如 `user.js`、`order.js`
`/src/store`	状态管理，如 `pinia` 的 `userStore`、`routesRoute`
`/src/utils`	用于存放系统工具函数、业务工具函数，也包括拦截器 `request`、动态路由处理 `routes`等
`/src/views`	业务页面，如 `System`、`UserManagement`

# 总结

本项目目录结构清晰，核心模块包括 CRUD 组件、Vab-Admin 组件库、其他配置文件及业务文件。

CRUD 组件：提供高可复用的组件，通常情况下无需修改。
Vab-Admin 基础 Admin 组件，如菜单、表格、布局等，也无需修改。
其他配置文件：环境变量、构建配置、代码规范等，根据情况调整。
业务相关文件：前端业务逻辑，是需要关注的点，如 views、api、store。

了解以上结构设计，利于快速熟悉工程项目，可以更高效地开发和维护。

后续会根据需求，继续拓展新的功能模块。

← 创建项目生命周期 →