vue-vben-admin 工作台完整指南从默认配置到个性化数据驾驶舱【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin刚登录 vue-vben-admin 后台管理页面左侧菜单里除了业务功能还有一个「工作台」入口。很多人点进去只当它是演示页其实它天生就是一个数据驾驶舱你关心的项目、常用的入口、没做完的事、系统运行数据全被摆在登录后的第一屏里。想象一下这个场景早上打开系统不用翻三个菜单找待办不用记住每个内部页面的路径甚至不用打开浏览器查外部资料。这些重复动作都可以浓缩在一页面上。工作台的默认实现已经把这些事做完了你要做的只是改几个数据数组。工作台能力全景打开/dashboard/workspace路由页面分成五大区块欢迎头头像 一句问候语来自用户登录信息。项目区卡片列表展示在跟进的项目或资源点击可跳转。动态区时间线形式展示最新动态比如谁提交了什么。快捷导航 待办右侧上中两块前者是常用入口格子后者是可勾选的任务列表。图表区一个访问来源的环形图直观看到数据分布。前四块在左侧纵向排列导航、待办和图表在右侧纵排大屏下左右分栏小屏自动堆叠。所有区块的 UI 都封装在 packages/effects/common-ui 里页面文件只负责喂数据。项目区把常用项目挂在首屏默认项目区里放了 6 个卡片Github、Vue、Html5、Angular、React、Js。每张卡片带一个主题色、图标、分组标签、一句话描述和日期。改哪里生效页面文件 playground/src/views/dashboard/workspace/ 下的index.vue里面有个projectItems数组。加一个对象就多一张卡{ color: #3fb27f, icon: ion:logo-vue, title: Vue, group: 算法组, date: 2021-04-01, url: /some/page, }url有个小讲究以http开头就在新窗口打开外部网站以/开头就走 vue-router 站内跳转。同一个字段兼容内外链导航逻辑写在navTo函数里不用你操心。快捷导航把高频入口做成格子导航区默认 6 个格子首页、仪表盘、组件、系统管理、权限管理、图表。每个格子一个颜色加图标点击直达对应页面。想换成你自己的入口改同文件里的quickNavItems数组每个项四个字段title显示名、icon图标项目内置 iconify 支持写ion:home-outline这类前缀即可、color标识色、url目标路径。内部路由和外部链接同样支持。图标怎么挑去 playground/src/views/demos/ 找图标示例页项目里预置了 lucide、ion、carbon 等 icon 集合直接复制名字回来用。待办区可勾选的任务列表待办区默认 5 条示例任务每条有标题、描述、日期和完成状态。点一下左侧复选框任务立刻加删除线变灰再点又恢复——状态直接写在todoItems数组的completed字段上是响应式的。数据结构很薄{ title: 审查前端代码提交, content: 审查最近提交到Git仓库的前端代码确保代码质量和规范。, date: 2024-07-30 11:00:00, completed: false, }接真实业务时把静态数组换成ref([])在onMounted里拉接口填充即可UI 层不用动。想让完成状态跨会话保留就在勾选回调里发个 PATCH 请求落库。图表区一张图看清访问来源右侧最下方是一张「访问来源」环形图默认四个来源搜索引擎、直接访问、邮件营销、联盟广告。它不是写死的 canvas走的是项目统一的 ECharts 封装。数据改哪里playground/src/views/dashboard/analytics/analytics-visits-source.vue 里series[0].data数组每项{ name, value }想加几个来源就加几项图表自适应。图表卡片外壳AnalysisChartCard也支持传任意组件作为内容所以你想换成趋势折线、地图直接换插槽里的组件就行。欢迎语从「早安」到个性化问候欢迎头默认是「早安, {realName}, 开始您一天的工作吧」名字从用户 store 里取头像也是登录返回的userInfo.avatar没登录就用preferences.app.defaultAvatar兜底。改文案很简单WorkbenchHeader组件暴露了#title和#description两个插槽WorkbenchHeader :avataruserStore.userInfo?.avatar template #title 欢迎回来, {{ userStore.userInfo?.realName }} /template template #description 当前角色{{ userStore.userInfo?.role }} /template /WorkbenchHeader天气、节日、部门名都能塞进#description一句话的事。接入动态数据把静态数组换成接口现在页面里的projectItems、quickNavItems、todoItems、trendItems全是写死的示例。上生产前的第一件事就是把这些换成接口调用。套路很固定const todoItems refWorkbenchTodoItem[]([]); onMounted(async () { todoItems.value await fetchTodoList(); });四个数组都这么处理。类型定义集中在 packages/effects/common-ui/src/ui/dashboard/typing.ts字段对齐WorkbenchTodoItem、WorkbenchProjectItem这些接口就行类型检查会帮你拦住漏字段。想做得更细一点比如项目区只显示当前用户有权限的项目就在拿到数据后跑一遍过滤projectItems.value raw.filter(p p.roles?.includes(userStore.userInfo?.role) );配合项目自带的权限体系做「管理员看全部、普通用户只看自己负责的项目」这种差异化视图只需要在数据层加判断。上手路径三步打开工作台 从克隆到打开页面全程三条命令。git clone https://gitcode.com/GitHub_Trending/vu/vue-vben-admin cd vue-vben-admin pnpm install pnpm dev启动后浏览器打开http://localhost:5555/dashboard/workspace端口以终端输出为准不同 UI 变体的 playground 端口略有差异。左侧菜单「仪表盘 → 工作台」就是同一个页面。⚙️ 想切到别的 UI 库看同一套工作台把命令换成pnpm dev:antd、pnpm dev:ele、pnpm dev:naive、pnpm dev:tdesign五个变体antd、antdv-next、ele、naive、tdesign都有各自的src/views/dashboard/workspace/index.vue结构一致数据改法也一致。继续深挖组件源码packages/effects/common-ui/src/ui/dashboard/workbench/目录里是五个区块组件analysis/目录是图表卡片typing.ts是全部数据类型。路由注册playground/src/router/routes/modules/dashboard.ts想调整菜单层级、加 affixTab、改 keepAlive 都在这。权限控制docs/src/guide/in-depth/access.md把「按角色过滤项目」做到路由级和组件级。快速上手docs/src/guide/introduction/quick-start.md环境要求、目录结构、构建命令都在这。图标库playground/src/views/demos/找icons示例页所有 iconify 前缀都能在这里试。工作台的设计思路一句话UI 骨架固定在 common-ui 里业务数据全部由页面文件注入。你只要维护好那四个数组和图表数据就能把默认的演示页改成贴着自己业务的数据驾驶舱。【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考