导航结构 · 待拍板

专员和工具,该不该收成一个一级导航?

去把 WorkBuddy 翻了一遍(未登录能到的页面全部走到,按钮逐个点过)。它给出的答案很明确: 专家、技能、连接器——三个独立模块,侧边栏只占一行,点进去是一条三格 tab。 下面是实测证据、三个可选方案(照着我们的应用渲染出来的),以及收完之后怎么互动。

01 · 实测

WorkBuddy 把三个模块压成了一行

我未登录能打开 workbuddy.cn/app,落地页和几个公开页面完整渲染。它自己是个 React SPA, 锚点全是营销页,所以我把它的路由表从打包产物里挖出来了。

WorkBuddy 专家页
/app/experts — 左侧三格 tab(专家 · 技能 · 连接器),当前格是浅灰底; 搜索框钉在同一条 tab 行最右,placeholder 随 tab 变;下一行左边是分类胶囊「全部」, 右边是排序分段器「综合 / 最热 / 最新」。

三条路由,一行入口

从打包产物里挖出来的路由:experts/*、skills、connectors —— 是三个各自独立的顶层路由,不是同一个页面的三个 tab 状态。 但侧边栏只给它们一行:专家·技能·连接器。

它的一级导航只有四项

你之前那张登录后的截图里是:新建任务 · 项目 · 专家·技能·连接器 · 更多, 下面接任务列表。能干活的东西全在第三格,考试的、资料库的、设置的也都没单独占位。

要你补一下 登录态那部分我摸不到

未登录时侧边栏不渲染,我看到的是营销落地页。/app/projects 直接跳登录页, /app/library 跳回首页 —— 这些必须带登录态。 如果你愿意,跑一条命令我就能接着把登录后的页面也量完:

google-chrome --remote-debugging-port=9223 --user-data-dir=/tmp/chrome-wb https://www.workbuddy.cn/app
用这个临时 profile 登录,别用你日常那个 —— 那个里面有所有站的 cookie 和密码。

02 · 三个方案

照着我们的应用渲染出来的侧边栏

三列都是我们现有模块的真名,只是层级不同。左边一列是现状。

方案 A 8 项

现状。专员、工具、连接器各占一格。

代价:三格都是「往对话上挂的东西」,却跟考试、资料库平级,权重给高了;一级导航太长。

博博昇AI数字员工
+新建任务
👤AI专员
💬AI工具
🔗连接器
📝AI考试
📚资料库
⚙️后台管理
▦我的
任务
华东客户主协议修订
新人销售训练营第 3 周
方案 B 6 项 推荐

把「能挂到对话上的三样」收成一格,里面三格 tab。

代价:连接器现在只有一页,放进来会显得空 —— 但它本来就属于这一类。

博博昇AI数字员工
+新建任务
🧩AI 能力3
专员工具连接器
📝AI考试
📚资料库
⚙️后台管理
▦我的
任务
华东客户主协议修订
新人销售训练营第 3 周
方案 C 4 项

WorkBuddy 原样:再收一格「更多」,把考试/资料库/后台折进去。

代价:考试在我们这儿是重头戏(自测+正式考+证书+排行榜),折进「更多」会埋掉它。

博博昇AI数字员工
+新建任务
📂项目
🧩AI 能力3
专员工具连接器
⋯更多
任务
华东客户主协议修订
新人销售训练营第 3 周
八十二亿之后:全球人口趋势分析
WorkBuddy 实测 4 项

它登录后的侧边栏长这样(照你那张截图复刻)。

「项目」是任务的容器,「专家·技能·连接器」是资源,两类分开。

WWorkBuddy
+新建任务
📂项目
🧠专家·技能·连接器
⋯更多
任务
打工人小账本
团队 OKR 雷达图
售后退款原因复盘

03 · 收完之后怎么互动

四个按钮我逐个点过,这是它们真实的行为

这部分是这次翻页最有价值的收获 —— WorkBuddy 把「浏览/管理」和「用」拆成了两条路: 导航是前者,输入框左边那个 + 是后者。

1输入框的 + 就是同一个入口

点 + 弹出的菜单是固定的五项,每一项都带 › 往右飞二级菜单:

添加文件模式 专家技能连接器

就是导航里那一格的三样东西,在这里可以直接挂到当前对话上,不用先跳走。

+ 菜单
实测:._trigger_1h7yd_19(aria-label「更多操作」)→ 200×197 的菜单,五项各自飞出。

2二级菜单最后一行,跳回浏览页

每个资源类的二级菜单都以一条「管理…」收尾,这是两条路的接缝:

专家暂无可用专家召唤更多专家
技能暂无可用技能从本地添加技能管理技能
连接器暂无可用连接器管理连接器

挂载和管理是两件事,但出口连着 —— 不会让人找不到「去哪儿加一个」。

技能二级菜单
实测:技能二级菜单 320×165,空态 + 两个管理动作。

3「模式」换掉的是一整套能力

标题下面那个 日常办公 / 代码开发 是个分段器,选中项是黑底。 切一下,输入框上面那排胶囊整排换掉:

日常办公→ 幻灯片 视频生成 深度研究 文档处理 数据分析 可视化…
代码开发→ 日常开发 网站开发 Agent 应用 Skill 开发 CI/CD 文档

而且代码开发模式会在输入卡片下面多长出一行「📁 选择仓库 ▾」—— 场景可以自带一个上下文选择器。

切到代码开发模式
实测:切到「代码开发」后胶囊换成 6 个,卡片下沿多出「选择仓库」。

4胶囊点一下:变成输入框里的 token

点「深度研究」,它掉进输入框变成一个浅绿的可删胶囊(右边有 ✕), 同时上面那排胶囊原地换成这个能力的示例提示词,点一条就填进去。

场景→ 胶囊→ 输入框里的 token ✕→ 它的示例提示词→ 发出

这一条把「专员/工具怎么被用掉」讲清楚了:不是导航过去用它,是把它挂到这次任务上。

点胶囊后
实测:胶囊行变成示例提示词,输入框里出现绿色 token「🔍 深度研究 ✕」。

04 · 顺带翻到的

它把「任务从哪开始」做成了内容

/app/discover 是公开的,未登录就能看全 —— 一个「灵感」瀑布流, 标题下一行小字写着定位:常见工作流沉淀成可复用的任务起点。

WorkBuddy 灵感页
分类胶囊:全部 / 精选 / 个人工作台 / 办公协同 / 投资理财 / 内容创作 / 数据分析 / 效率工具 / 开发工具 / 知识与学习 / 信息与资讯 / 商业运营 / 旅行出行 / 智能体能力。 每张卡是真产物的缩略图 + 标题 + 类型徽章(HTML / 视频)+ 一句说明 + 「官方」标 + ♡ 收藏。

另外两个值得抄的

云助理(/app/colleagues):顶部一个「本地 / 云端」分段器(云端是薄荷绿), 下面一张大白卡,卡里一行输入「抛出想法,分配任务,就这么简单」+ 一个「安排工作」按钮, 再下面才是助理卡片网格,空态是一张虚线「创建助理」卡。

右侧常驻栏:每一页右边都有「概览 / 产物」两格 —— 对话产物是一个独立面板,不是塞在消息流里。

我的建议

  1. 收,按方案 B。专员 / 工具 / 连接器三者是同一类东西——「挂到对话上的资源」, 现在却跟 AI考试、资料库平级,等于把工具当成了栏目。收成一格,一级导航从 8 项降到 6 项。
  2. 名字别叫「专家·技能·连接器」。WorkBuddy 那串是三个名词硬拼的,读起来像没起名。 叫「AI 能力」或者干脆「能力」,tab 上再写专员 / 工具 / 连接器。
  3. 关键不是收,是收完之后两个入口要接上。 输入框的 + 我已经做了专员/工具两组,对齐成五组(加文件、模式、专员、工具、连接器), 每组二级菜单末尾加一条「管理…」跳回浏览页。这样收成几格就不那么要紧了 —— 反正干活的人从 + 走,管东西的人从导航走。
  4. 「模式」这一层我们现在完全没有。它一个场景能换掉一整排胶囊,还能给输入卡片挂一行上下文 (选仓库)。对应到我们这儿就是「日常办公 / 销售 / 培训」这类场景,各自带自己的专员和工具。 这个可能是比「收几格」更值钱的一条。