不灭的焱

革命尚未成功，同志仍须努力 下载Java

AI学习EleAdminPlus前端框架 v1.1
作者：AlbertWen  添加时间：2026-03-10 11:47:56  修改时间：2026-03-10 17:58:39  分类：01.AI编程  编辑

AI学习 EleAdminPlus 前端框架

更新时间：2026-03-10

结论：本项目前端 fuyo-ccc-bos-ui 已基于 ele-admin-plus@1.5.0 落地，不需要从零研究“框架怎么接入”，下次直接按本文档的项目约定开发即可。

1. 当前项目事实

  • 前端目录：fuyo-ccc-bos-ui
  • 技术栈：Vue 3.5.22 + TypeScript 5.9.3 + Vite 6.4.0
  • UI：Element Plus 2.11.7
  • 业务框架：EleAdminPlus 1.5.0
  • 状态管理：Pinia 3.0.3
  • 路由：Vue Router 4.6.3
  • 请求库：Axios 1.12.2

2. 这套框架在本项目里到底负责什么

EleAdminPlus 在本项目里不是“替代 Vue/Element Plus”的底层框架，而是管理后台增强层，主要承担这些事情：

  • 后台布局：侧栏、顶栏、标签页、面包屑
  • 动态菜单转动态路由
  • 表格增强：EleProTable
  • 弹窗抽屉增强：useModal
  • 消息提示：EleMessage
  • 树结构处理：toTree、mapTree、eachTree
  • 一批业务组件和布局能力

实际开发时仍然是：

  • 用 Vue 3 setup script 写页面
  • 用 Element Plus 做基础表单和交互
  • 用 EleAdminPlus 处理后台壳子、表格、弹窗、菜单权限

3. 入口和初始化要点

入口文件：fuyo-ccc-bos-ui/src/main.ts

当前项目初始化顺序：

  1. 创建 Vue App
  2. 安装 Pinia
  3. 安装 Router
  4. 安装权限指令插件 permission
  5. 安装 i18n
  6. 安装按需组件或开发态全量组件
  7. 安装图标
  8. 设置主题为 modern
  9. 全局关闭 ElDialog 点击遮罩关闭

项目级定制结论：

  • 默认主题已经被改成 modern
  • 标签页不在头部显示：tabInHeader = false
  • 标签风格为 tag
  • 所有 ElDialog 默认 closeOnClickModal = false

下次如果新增弹窗，不要再单独重复改遮罩关闭逻辑，先看全局默认是否已满足。

4. 目录速查

以 fuyo-ccc-bos-ui/src 为准：

  • api/：按业务模块拆分接口
  • components/：公共组件
  • config/：系统级常量配置
  • layout/：后台布局
  • router/：静态路由、动态路由生成
  • store/：Pinia 状态
  • styles/：全局样式和主题
  • utils/：请求、权限、token、通用函数
  • views/：页面

开发入口优先级建议：

  1. 先看 views/ 有没有同类页面
  2. 再看 api/ 是否已有同类接口封装
  3. 再看 components/ 是否已有公共组件
  4. 最后才自己新造模式

5. 动态菜单和动态路由的真实链路

核心文件：

  • src/api/layout/index.ts
  • src/store/modules/user.ts
  • src/utils/menu-util.ts
  • src/router/routes.ts

当前链路如下：

  1. 前端调用 /auth/user 获取当前用户信息
  2. 后端返回用户、角色、权限、菜单
  3. user.ts 中将 authorities 里 menuType !== 1 的数据拿出来转树
  4. formatUserMenu 把后端菜单结构转换为 EleAdminPlus 可识别的 MenuItem[]
  5. getMenuRoutes 使用 menuToRoutes 生成动态路由
  6. 组件路径通过 import.meta.glob('/src/views/**/index.vue') 解析

这里有一个非常关键的项目约定：

  • 后端菜单里的 component 必须能映射到 src/views 下的页面路径
  • 优先匹配：/src/views${component}.vue
  • 找不到时再匹配：/src/views${component}/index.vue

所以新增菜单页面时，最稳妥的文件结构是：

src/views/业务域/页面名/index.vue

后端菜单 component 推荐配置成：

/业务域/页面名

6. 权限控制怎么用

全局指令注册文件：src/utils/permission.ts

当前可直接使用的指令：

  • v-role
  • v-any-role
  • v-permission
  • v-any-permission

使用方式：

<el-button v-permission="'system:user:add'">新增</el-button>
<el-button v-any-permission="['system:user:edit', 'system:user:update']">编辑</el-button>

行为特征：

  • 没权限时，元素会直接从 DOM 中移除
  • 适合按钮、链接、操作入口控制

开发结论：

  • 页面级访问控制主要走菜单和路由
  • 按钮级访问控制优先走 v-permission
  • 不要只做前端隐藏，后端接口仍必须做权限校验

7. 请求层约定

核心文件：src/utils/request.ts

当前项目约定：

  • baseURL = import.meta.env.VITE_API_URL
  • token 请求头名不是 Authorization，而是 satoken
  • GET 请求参数会被拼接到 URL
  • 响应里如果返回新 token，会从响应头 authorization 回写本地缓存
  • 登录过期时会自动跳登录

下次接接口时要记住：

  • 不要自己重复封装 axios 实例
  • 新接口统一写在 src/api/业务模块
  • 成功判断统一看 res.data.code === 0

接口层推荐模板：

export async function pageDemo(params: DemoParam) {
  const res = await request.get<ApiResult<PageResult<Demo>>>('/demo/page', {
    params
  });
  if (res.data.code === 0) {
    return res.data.data;
  }
  return Promise.reject(new Error(res.data.msg));
}

8. 最常用的页面开发模式

8.1 列表页

本项目列表页标准形态基本是：

  1. ele-page
  2. 搜索组件
  3. ele-card
  4. ele-pro-table
  5. toolbar 放新增/批量删除
  6. action 插槽放行内操作

参考页面：src/views/system/role/index.vue

典型特征：

  • row-key 必填
  • columns 单独定义
  • datasource 对接分页接口
  • v-model:selections 管理勾选
  • reload 统一刷新
  • 导出/打印单独配置完整数据源

推荐骨架：

<ele-page>
  <demo-search @search="(where) => reload(where, 1)" />
  <ele-card :body-style="{ paddingTop: '8px' }">
    <ele-pro-table
      ref="tableRef"
      row-key="id"
      :columns="columns"
      :datasource="datasource"
      v-model:selections="selections"
      cache-key="DemoTable"
    >
      <template #toolbar>
        <btn-items :items="[{ preset: 'add', onClick: () => openEdit() }]" />
      </template>
      <template #action="{ row }">
        <btn-items
          type="link"
          :items="[
            { preset: 'edit', onClick: () => openEdit(row) },
            { preset: 'del', onClick: () => remove(row) }
          ]"
        />
      </template>
    </ele-pro-table>
  </ele-card>
</ele-page>

8.2 编辑弹窗

项目已经明显偏向使用 useModal，不要再优先写一堆 dialogVisible。

推荐方式：

const { openModal } = useModal();

const openEdit = (row?: Demo) => {
  openModal({
    custom: true,
    asyncComponent: () => import('./components/demo-edit.vue'),
    componentProps: {
      data: row,
      onDone: () => reload()
    }
  });
};

结论：

  • 新增/编辑共用一个弹窗组件
  • 弹窗保存成功后调用父级 onDone
  • 复杂弹窗优先 useModal，代码更干净

8.3 搜索表单

本项目常见做法：

  • 搜索表单拆独立组件
  • 对外只抛 search 事件
  • 父页面负责把 where 传给 tableRef.reload

这样做的好处：

  • 页面主体更干净
  • 搜索条件可以复用
  • 更适合中后台列表页批量开发

9. EleProTable 的落地规则

EleProTable 是这个项目最值得优先复用的组件。

必须掌握的点：

  • 支持分页数据源
  • 支持搜索条件和排序条件合并
  • 支持导出、打印
  • 支持插槽列
  • 支持缓存 cache-key
  • 支持选中项联动

项目中最常见的数据源写法：

const datasource: DatasourceFunction = ({ pages, where, orders }) => {
  return pageDemo({ ...where, ...orders, ...pages });
};

注意事项：

  • 后端分页字段命名必须与当前封装兼容
  • 排序参数 orders 会直接透传给后端
  • 导出全部数据时不要直接复用分页接口，单独写 listXXX

10. 树结构工具该怎么记

本项目大量使用：

  • toTree
  • mapTree
  • eachTree

典型场景：

  • 菜单平转树
  • 菜单树转 EleAdminPlus 菜单格式
  • 更新菜单徽章
  • 树形下拉和树表数据处理

简单记忆：

  • toTree：平铺数组转树
  • mapTree：遍历树并返回新树
  • eachTree：遍历树做副作用处理

11. 组件按需和构建约定

配置文件：vite.config.ts

当前策略：

  • 开发环境：走全量安装，便于调试
  • 构建环境：Element Plus 和 EleAdminPlus 按需引入
  • 使用 unplugin-vue-components
  • 已集成 EleAdminResolver

开发结论：

  • 大多数 EleAdminPlus/Element Plus 组件在 SFC 中可直接使用
  • 不要因为“没手动 import”就误判组件不可用
  • 先遵循现有自动注册机制

12. 主题和外观结论

从 main.ts 看，本项目当前主题取向已经明确：

  • 皮肤：modern
  • 标签：内容区显示
  • 标签样式：tag

下次做前端页面时：

  • 优先顺着当前主题做，不要单页搞完全不同的视觉体系
  • 样式先贴合后台管理页，不要自行制造新布局系统

13. EleAdminPlus 1.5.0 值得记住的新能力

根据项目内手册 更新日志.md，当前版本新增/强化的能力里，最值得下次直接使用的是：

  • UserSelect
  • RoleSelect
  • DepartmentSelect
  • useModal
  • BtnItems
  • EleModal / EleDrawer 的 loading、flexTable
  • 新主题：清新、现代，以及暗黑模式适配

对本项目最实用的结论：

  • 人员、角色、部门选择场景，优先查现成组件，不要先手搓弹窗树和表格
  • 操作列按钮，优先 BtnItems
  • 弹窗交互，优先 useModal

14. 新增一个标准后台页面的最短路径

下次开发时直接按这个顺序：

  1. 在 src/api/业务模块 新增接口封装
  2. 在 src/views/业务域/页面名/ 新建页面
  3. 列表页优先套 ele-page + ele-card + ele-pro-table
  4. 搜索区拆成 components/xxx-search.vue
  5. 新增/编辑拆成 components/xxx-edit.vue
  6. 用 useModal 打开编辑弹窗
  7. 需要按钮权限就加 v-permission
  8. 后端菜单 component 填成和 src/views 对应的路径
  9. 联调 /auth/user 返回的菜单是否能正确生成路由

15. 容易踩坑的地方

  • 菜单 component 路径填错，动态路由会落到 404
  • 只配前端按钮权限、不配后端权限，安全上无效
  • 表格导出全部时误用分页接口，导出数据不完整
  • 自己再建一套 axios 封装，破坏统一 token 和过期处理
  • 忘记 row-key，导致表格勾选和刷新行为异常
  • 弹窗状态手写过重，和项目现有 useModal 风格脱节

16. 下次直接复用的心智模型

一句话记住：

EleAdminPlus 在本项目中的正确使用方式，不是“研究它全部组件”，而是“沿着现有后台模板继续开发”：动态菜单驱动路由，EleProTable 驱动列表页，useModal 驱动编辑弹窗，权限指令驱动按钮显示，request.ts 驱动接口调用。

如果下次让我继续基于这个项目写前端，默认按以下约定执行：

  • 页面放 src/views/**/index.vue
  • 菜单转路由沿用现有动态模式
  • 列表优先 EleProTable
  • 编辑优先 useModal
  • 权限优先 v-permission
  • 接口优先复用 request.ts
  • 样式优先贴合 modern 主题
Copyright © 2012-2035 不灭的焱 版权所有 粤ICP备17073848号