项目结构

整体结构

mars-mgn-vue
|-- .editorconfig          # 编辑器代码风格统一配置
|-- .env                   # 基础环境变量配置（默认值）
|-- .env.dev               # 开发环境配置（开发服务器使用）
|-- .env.local             # 本地开发环境配置（个人开发使用，不提交到版本库）
|-- .env.prod              # 生产环境配置（打包到生产环境时使用）
|-- .env.stage             # 预发布环境配置（测试环境使用）
|-- .env.test              # 测试环境配置（单元测试/集成测试使用）
|-- .eslintignore          # ESLint忽略检查的文件配置
|-- .eslintrc-auto-import.json # 自动导入配置（与ESLint配合）
|-- .eslintrc.js           # ESLint代码检查规则配置
|-- .git                   # Git版本库目录（自动生成，无需手动修改）
|-- .gitee                 # Gitee平台相关配置（可选）
|-- .gitignore             # Git版本控制忽略文件配置
|-- .image                 # 项目相关图片资源（通常用于文档或README）
|-- .prettierignore        # Prettier格式化忽略的文件配置
|-- .stylelintignore       # Stylelint样式检查忽略的文件配置
|-- .vscode                # VSCode编辑器配置（工作区设置、推荐插件等）
|-- LICENSE                # 项目开源许可证文件
|-- README.en.md           # 项目英文说明文档
|-- README.md              # 项目中文说明文档
|-- assets                 # 项目内资源（会被构建工具处理，如图片、样式等）
|-- build                  # 构建脚本和工具配置（如自定义构建流程）
|-- index.html             # 应用入口HTML文件（Vite默认模板）
|-- node_modules           # 项目依赖包目录（npm/pnpm安装生成）
|-- package.json           # 项目配置文件（依赖、脚本、元数据）
|-- pnpm-lock.yaml         # pnpm包管理器锁定文件（确保依赖版本一致性）
|-- postcss.config.js      # PostCSS配置（CSS转换工具，如添加浏览器前缀）
|-- prettier.config.js     # Prettier代码格式化配置
|-- public                 # 静态资源目录（直接复制到输出目录，不被构建工具处理）
|-- src                    # 项目源代码目录
|-- stylelint.config.js    # Stylelint样式检查配置
|-- tsconfig.json          # TypeScript配置文件
|-- types                  # 类型定义文件
|-- uno.config.ts          # UnoCSS配置（原子化CSS引擎）
|-- vite.config.ts         # Vite构建工具配置
`-- web-types.json         # 提供IDE智能提示的元数据文件

源码目录结构

src源码目录

src # 项目源代码根目录，存放核心业务逻辑与资源 
|-- App.vue # 根组件，应用入口容器，包含全局布局和组件挂载点 
|-- api # API接口定义，每个模块对应一个目录
|-- assets # svg图标、图片等静态资源
|-- components # 富文本、弹窗等全局自定义组件，可被所有模块所引用
|-- config # 配置文件目录
    |   `-- axios # Axios 相关配置
    |       |-- config.ts # 定义baseURL 基础路径，timeout 超时时间，默认为 30000 毫秒
    |       |-- errorCode.ts # 接口错误码映射表（错误码转可读提示） 
    |       |-- index.ts # 统一处理 GET、POST 方法的请求参数、请求头，以及错误提示信息
    |       `-- service.ts # 封装axios：包括请求和响应拦截器等。
|-- directives # 权限控制：v-hasRole 和 v-hasPermi
|-- hooks # 封装通用的逻辑，例如本地缓存、权限控制、全局提示信息等
|-- layout # 页面布局目录
|-- locales # 国际化语言包目录
    |-- en.ts # 英文语言文件
    `-- zh-CN.ts # 中文简体语言文件
|-- main.ts # 应用入口文件（创建 Vue 实例、注册全局配置）
|-- permission.ts # 路由权限守卫配置（登录状态检查、动态路由加载）
|-- plugins # # 第三方插件集成目录（ECharts、国际化等）
|-- router # 路由配置目录
    |-- index.ts # 创建路由实例，配置路由模式和守卫
    `-- modules
        `-- remaining.ts # 静态路由，代表那些不需要动态判断权限的路由，如登录页、404、个人中心等通用页面。
|-- services # 业务逻辑服务目录（解耦组件与复杂逻辑）
|-- store # Pinia 状态管理
|-- styles # 实现全局样式，被所有页面所公用。
|-- types # 类型定义目录（TS 项目专用） 
|-- utils # 字典数据等工具类
`-- views # 页面组件，每个功能模块对应一个目录

src/views子目录

src/views # 页面组件目录，按业务模块拆分
|-- Error # 错误页面组件（如 404、500 错误页）
|-- Home # 首页 / 仪表盘组件，展示项目概览、数据统计等信息
|-- Login # 登录认证相关页面（登录表单、验证码、找回密码等）
|   |-- Login.vue            # 主登录页面（账号密码登录）
|   |-- SocialLogin.vue      # 第三方登录页面（微信/QQ/钉钉）
|   `-- components           # 登录模块内部组件（验证码、密码强度检测等）
|-- Profile # 用户个人中心（个人信息设置、密码修改等）
|-- Redirect # 重定向页面（用于路由跳转过渡）
|-- ai # 人工智能相关功能（如智能客服、AI 分析报告等）
|-- bpm # 业务流程管理（工作流设计、流程审批、任务管理等）
|-- infra # 基础设施管理（服务器监控、系统配置、定时任务等）
|-- iot # 物联网管理（设备监控、数据采集、远程控制等）
|-- report # 报表中心（数据可视化、自定义报表、多维分析等）
`-- system # 系统基础配置（用户管理、角色权限、菜单管理、字典数据、日志审计等）
        |-- dept # 部门管理页面
        |   |-- DeptForm.vue # 新增/修改的表单界面
        |   `-- index.vue # 树形列表界面
        |-- post # 岗位管理页面
        |   |-- PostForm.vue # 新增/修改的表单界面
        |   `-- index.vue # 普通列表界面

src/api子目录

src/api                  # API接口请求模块（按业务领域划分）
|-- ai                   # 人工智能相关接口（如AI模型调用、智能分析）
|-- bpm                  # 业务流程管理相关接口（如流程引擎、审批流）
|-- infra                # 基础设施相关接口
|-- iot                  # 物联网相关接口
|-- login                # 登录认证相关接口（如登录、注册、token刷新）
`-- system               # 系统管理相关接口（如用户管理、角色管理）

参考资料

前端项目基于 vue-element-plus-admin 和 yudao-ui-admin-vue3 进行二次开发

• vue-element-plus-admin 项目文档
• yudao-ui-admin-vue3 前端手册