vue-vben-admin 工作台快速上手：1 个页面装下项目、导航、待办与数据看板-开发者社区

vue-vben-admin 工作台快速上手：1 个页面装下项目、导航、待办与数据看板

【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. It's fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin

每天打开后台都要先翻半天菜单，找项目入口、找待办、看数据？vue-vben-admin 自带的工作台（Workbench）就是为这件事准备的：把常用项目、快捷入口、待办清单和访问数据集中到一张首页上，相当于是你后台的"驾驶舱"——关键信息集中摆在最显眼的位置。读完这篇，你会知道怎么启动它、每个区域该看什么，以及怎么把它改成团队自己的样子。

三步启动工作台

先说结论：不需要额外装插件，仓库里的示例应用就带好了工作台页面。🚀 按顺序执行下面三条命令即可，分别是克隆仓库、安装依赖、启动示例应用：

git clone https://gitcode.com/GitHub_Trending/vu/vue-vben-admin cd vue-vben-admin && pnpm install pnpm dev:play

启动后浏览器打开http://localhost:5555。登录页账号填vben、密码填123456即可进入。

进入后在左侧菜单找到「仪表盘 → 工作台」，或者直接访问路径/dashboard/workspace。路由定义就在仪表盘路由模块里，analytics是分析页，workspace就是你现在要用的工作台。

打开工作台页面：从左上到右下的导览

第一次进页面，信息可能有点多。按"从左上到右下"的顺序扫一遍，心里就有地图了。🧭

最上方是欢迎区（WorkbenchHeader组件）：头像、一句问候和一行描述，比如天气。它确认的是"今天你是谁、状态如何"。

左列占约 3/5 宽，放两块内容：上面是项目卡片组，每个卡片有标题、分组、图标和一句话介绍，点击可跳转；下面是最新动态，一条成员行为的时间线，谁建了项目、谁发了文章一目了然。

右列占约 2/5 宽，从上到下三块：快捷导航是一组彩色图标格子，点一下直接跳到高频页面；待办清单列任务，点一下切换完成状态；最底下是访问来源饼图，看流量从哪些渠道进来。

模块	作用	你什么时候看它
欢迎区	头像 + 问候语 + 一行描述	每天开工扫一眼
项目卡片	常用项目的集中入口	要跳去某个系统时
最新动态	团队成员行为时间线	想知道团队最近忙什么
快捷导航	图标格子，直达高频页面	想少点几层菜单时
待办清单	记录任务，点击勾选	每天规划任务时
访问来源	饼图展示访问渠道	关注流量构成时

下图是同一套框架下的仪表盘页面，侧边栏里就能看到「工作台」菜单的位置：

三个高频场景：改项目、调入口、管待办

工作台的所有配置都集中在工作台源码这一个文件里，数据以几个数组的形式写在文件开头。知道这一点后，下面三个场景都很顺。

场景一：把团队常用项目挂上首页

你要做什么：让常用系统的入口不用再从菜单里找。

改哪里：projectItems数组。每个项目是标题、分组、图标、颜色、介绍和链接的集合，url可以写外部链接，也可以写内部路由：

const projectItems: WorkbenchProjectItem[] = [ { color: '#3fb27f', title: '知识库', group: '平台组', icon: 'ion:library-outline', date: '2024-07-01', content: '团队文档与规范', url: '/analytics', // 换成你的外部链接或内部路由 }, ];

看到什么效果：项目区多一张新卡片。点击跳转不用你操心——框架里已有一条判断逻辑：链接以http开头就开新窗口，以/开头就在应用内跳转。

场景二：按业务增删快捷入口

你要做什么：把默认的「首页 / 仪表盘 / 组件」这类演示入口，换成你业务里真正高频的页面。

改哪里：quickNavItems数组。每项就四个字段：color区分色块、icon图标名、title显示文字、url跳转目标。加一条就是一个新格子，删一条就少一个格子。

看到什么效果：右上的图标格子实时对应你的业务。比如加一个「审批中心」指向/demos/access/page-control，团队成员从工作台一步就能到，不用翻菜单树。

场景三：管理并跟踪待办清单

你要做什么：把每天要做的事摊在首页，做完打个勾。

改哪里：todoItems数组。每项包含completed（是否完成）、title（任务名）、content（说明）、date（时间）。当前是静态示例数据，直接改内容就能先跑起来。

看到什么效果：点击某一条任务，勾选状态会切换。多人协作、数据持久化属于下一步，下面的"换成接口数据"会讲。

把工作台改成你自己的：欢迎语、真实数据与角色过滤

示例代码能跑，但真正用起来还要贴近你的业务。常见诉求有三类：

想换一句欢迎语。欢迎区支持插槽，标题和描述都能自己定义。下面这段就是修改问候语的最小改法：

<WorkbenchHeader :avatar="userStore.userInfo?.avatar"> <template #title> {{ userStore.userInfo?.realName }}，开始今天的工作吧 </template> <template #description> 今日晴，20℃ - 32℃ </template> </WorkbenchHeader>

想把静态数据换成接口数据。做法不变形：数组结构保持原样，只在页面初始化时发请求，把返回结果赋给对应的数组。比如项目列表接口返回后赋给projectItems，组件无需任何改动——因为组件只关心"你给了它什么数据"，不关心数据从哪来。待办事项尤其建议走接口，这样勾选状态才能落到数据库里，多个人看到的是同一份清单。

想让不同角色看到不同内容。在数据传给组件之前先过滤一遍：根据用户 store 里的角色信息筛出该角色可见的项目、导航或待办，只把过滤结果交给组件。组件本身不用改，权限判断收敛在数据入口这一处，后续维护也最省事。