第 56 卷

10.2 组件与布局：让工作台真正好用起来

为什么这一块很重要（从大学生痛点出发）

很多同学搭好工作台后遇到一个尴尬：页面搭出来了，但"不好用"——待办清单用着别扭、笔记找不到、链接一堆乱糟糟、想看进度还得往下翻。问题出在哪？不是组件不够多，而是组件没用对、布局没设计好。

工作台好不好用，80%取决于组件与布局的设计：待办清单的优先级怎么设、日历怎么排课、笔记怎么分区、链接怎么分类、进度怎么追踪、分组容器怎么用……这些细节决定了你每天打开工作台是"一目了然"还是"一团乱麻"。

再进一步，WorkBuddy的工作台还能嵌入Skill组件——把AI对话、倒计时、天气、数据统计等能力直接放到工作台页面上，让工作台从"信息面板"升级为"AI面板"：打开工作台就能问AI问题、看考试倒计时、查学习数据，不用再跳

出去开另一个窗口。

这篇文章把工作台的组件和布局讲透：每个组件的用法、两栏布局的设计思路、以及如何嵌入Skill组件，让你搭出来的工作台真正"每天愿意打开"。

核心概念（3-5个概念，定义+示例）

概念一：基础组件（Base Components）

工作台的基础组件是可视化搭建的"积木"，主要包括：

• 待办清单：记录每日任务，支持完成勾选、设置任务优先级（区分紧急与普通任务）。
• 日历时间：展示日期、周计划，快速查看日程，无需跳转外部日历软件。
• 文本笔记：记录临时灵感、学习笔记，支持分块分区排版。
• 链接收藏：存放各类网站、文档链接，实现一键访问，替代浏览器收藏夹。
• 进度统计：进度条展示读书、打卡等完成进度，可视化跟踪目标。
• 图片与嵌入：插入图片、嵌入外部文档，用于资料归档展示。
• 分组容器：对组件进行分组归类，实现页面分区管理。

概念二：Skill组件（嵌入到工作台的技能）

除了基础组件，工作台还支持安装Skill插件后将其作为组件嵌入画布：安装并授权后，返回画布，就能在组件列表找到已安装的插件，拖拽到页面即可使用。常见的工作台Skill组件包括：

• AI对话Skill：工作台内直接完成问答、文案总结、翻译，无需跳转第三方AI网页。
• 实时天气Skill：展示温度、湿度、天气状况、短期预报。
• RSS订阅Skill：聚合博客、技术社区、新闻更新。
• 时间倒计时Skill：自定义目标时间，生成倒计时组件，用于考试、项目截止日提醒。
• 备忘录便签Skill：轻量化便签，快速记录碎片想法。
• 日历同步Skill：对接外部日历，统一展示日程。
• 代码片段Skill：保存、预览常用代码片段（适合计算机专业）。

分组容器用于把同类组件归到一组，设置分组标题，实现页面的功能分区。比如"课程学习"分组里放课表和笔记，"

备考"分组里放倒计时和进度，"日常"分组里放待办和链接。分组的价值是让页面有清晰的信息结构——扫一眼就知道"哪块在哪"，而不是一堆组件平铺。

概念四：布局（Layout）

工作台的排版设计。核心原则：

• 两栏或三栏布局优于单列堆放——单列内容太长，信息密度低，查找要反复滚动。
• 主次分明：最高频的组件放最显眼的位置（通常是左栏或中栏顶部），低频组件放边缘。
• 留白：组件之间预留空隙，保证阅读体验，避免内容拥挤。
• 低饱和度配色：减少花哨颜色，保证阅读舒适。

概念五：布局锁定与预览

搭建完成后锁定画布布局，防止误拖动打乱页面；日常使用是"查看模式"，需要修改时再解锁。锁定前建议先"预览模式"完整浏览一遍：检查组件是否正常渲染、链接是否有效、Skill组件能否正常加载。

实操方法（2-3种方法，逐步骤说明）

方法一：各基础组件的正确用法（大学生场景化）

1. 待办清单——"今日必做"的核心。

• 用法：每天早晨把当天任务录入，任务要具体可执行（"完成高数第三章习题1-10题"而不是"学高数"）。
• 进阶：使用优先级功能区分紧急与普通任务——紧急且重要的优先做，普通任务碎片时间做。
• 建议：待办清单放左栏顶部（最显眼位置），它应该是你每天打开工作台第一眼看到的东西。

1. 日历时间——课表与日程。

• 用法：把每周固定课程、实验、会议录入日历组件，一眼看到本周安排。
• 进阶：重要节点（期中考试、DDL、答辩）用日历标注，配合倒计时Skill使用。
• 建议：日历放左栏待办下方，与待办形成"今天做什么+这周有什么"的组合。

1. 文本笔记——课堂笔记与灵感。

• 用法：按课程分区记录笔记，或用分组容器把"高数笔记""英语笔记"分开。
• 进阶：笔记里可以放AI整理好的结构化内容（见11.1），也可以留一块"灵感区"随时记录想法。
• 建议：笔记区放中栏，面积最大，因为它是你日常读写最频繁的区域。

1. 链接收藏——告别浏览器收藏夹。

• 用法：按类别分组收藏：网课（中国大学MOOC、B站课程）、数据库（知网、Web of

Science）、工具（翻译、查重）、教务系统。

• 进阶：链接命名用"平台+用途"（如"知网-论文检索"），而不是一串看不懂的标题。
• 建议：链接收藏放右栏，数量控制在20个以内，只留高频使用的。

• 进阶：拆解大目标——"期末复习"拆成"第一章√ 第二章√

第三章…"，每完成一块推进一次进度条，非常有成就感。

• 建议：进度条放右栏下方或单独分组，和倒计时Skill搭配（"距离考试还剩X天，复习进度X%"）。

1. 分组容器——让页面有结构。

• 用法：把相关组件拖入同一个分组，设置分组标题。示例：分组"课程学习"（课表+笔记）、分组"备考"（倒计时

+进度+错题链接）、分组"日常"（待办+灵感笔记）。

• 建议：分组标题用行动导向的命名（"今日行动""本周课程"），比"模块一""模块二"好用。

方法二：两栏布局设计思路（大学生学习工作台）

推荐的学习工作台两栏布局：

┌─────────────────────────────────────────────────┐

• 标题：我的学习工作台（背景：低饱和纯色） │

├──────────────────────────┬──────────────────────┤

• 左栏 │ 右栏 │
• ┌─ 分组：今日行动 ──┐ │ ┌─ 分组：本周课程 ──┐ │
• │ 待办清单（优先级） │ │ │ 日历时间 │ │
• └──────────────────┘ │ └──────────────────┘ │
• ┌─ 分组：课堂笔记 ──┐ │ ┌─ 分组：学习资源 ──┐ │
• │ 文本笔记（分块） │ │ │ 链接收藏（分类） │ │
• └──────────────────┘ │ └──────────────────┘ │
• │ ┌─ 分组：备考冲刺 ──┐ │
• │ │ 倒计时+进度统计 │ │
• │ └──────────────────┘ │

└──────────────────────────┴──────────────────────┘

设计逻辑：

• 左栏=行动区：待办（今天做什么）+ 笔记（边学边记），是高频交互区。
• 右栏=信息区：课表（这周有什么）+ 链接（需要时访问）+ 进度（目标推进），是低频查看区。
• 三个分组让页面信息结构清晰，扫一眼就能定位。

方法三：嵌入Skill组件（把AI放进工作台）

第1步：安装Skill插件。

打开Skill插件市场，搜索你需要的插件（如"AI对话"、"倒计时"、"天气"），点击安装并完成授权。

第2步：拖入画布。返回画布编辑页面，在组件列表中找到已安装的插件，拖拽到页面合适位置。

第3步：配置与使用。

部分组件需要简单配置（如倒计时设置目标日期、RSS填入订阅源），配置后即可使用。例如：

• 嵌入"倒计时"组件，设置"2026年12月大学英语六级考试"，页面每天显示剩余天数。
• 嵌入"AI对话"组件，在复习时直接在工作台里提问："解释一下拉格朗日中值定理的几何意义"。
• 嵌入"数据统计"组件，记录每天学习时长，自动生成柱状图。

第4步：按需精简。不要一次嵌入太多Skill组件——每个组件都增加页面加载负担，选3-5个真正高频的就够。

学生场景组件搭配参考