输入关键词,开始搜索

↑↓ 选择 打开 esc 关闭
沉浸

Plan 数据视图指令详解

11 min read

核心概念

Plan 指令将 Markdown 表格数据渲染为可切换的多视图组件。表头支持 name:type 格式声明列类型,不写 :type 时默认 text

下面每个场景都分成「演示效果」和「示例代码」两个选项卡,你可以直接复制代码使用。


场景一:项目开发计划(多视图组合)

最完整的用法,同时启用看板、表格、时间轴、进度四个视图,数据在所有视图中复用。

项目开发计划

待办 (1)
测试验收
2024-03-10
Dave
0%
进行中 (1)
前端开发
2024-02-01
Carol
65%
已完成 (2)
需求分析
2024-01-01
Alice
100%
技术选型
2024-01-10
Bob
100%
需求分析2024-01-01
Alice
100%
技术选型2024-01-10
Bob
100%
前端开发2024-02-01
Carol
65%
测试验收2024-03-10
Dave
0%
全部
done
doing
todo
全部
P0
P1
状态任务优先级截止日期负责人完成度
需求分析● P02024-01-01Alice
100%
技术选型● P12024-01-10Bob
100%
前端开发● P02024-02-01Carol
65%
测试验收● P02024-03-10Dave
0%
1月
2月
3月
01-01
01-10
02-01
03-10
需求分析
技术选型
前端开发
测试验收
66%整体完成度
整体完成度
4 个任务 · 2 已完成 · 1 进行中 · 1 待办
需求分析
100%
技术选型
100%
前端开发
65%
测试验收
0%
状态分布
● 已完成█████░░░░░250%
◉ 进行中███░░░░░░░125%
○ 待办███░░░░░░░125%
:::plan{title="项目开发计划" views="board,list,table,timeline,progress"
        default="board" dateCol="截止日期" progressCol="完成度"
        statusCol="状态" titleCol="任务" ownerCol="负责人"
        filters="状态,优先级"}
| 状态:status | 任务:text | 优先级:priority | 截止日期:date | 负责人:text | 完成度:progress |
|-------------|-----------|-----------------|---------------|-------------|-----------------|
| done        | 需求分析  | P0              | 2024-01-01    | Alice       | 100%            |
| done        | 技术选型  | P1              | 2024-01-10    | Bob         | 100%            |
| doing       | 前端开发  | P0              | 2024-02-01    | Carol       | 65%             |
| todo        | 测试验收  | P0              | 2024-03-10    | Dave        | 0%              |
:::

用到的特性:

  • views="board,list,table,timeline,progress" 启用五个视图
  • default="board" 默认显示看板视图
  • filters="状态,优先级" 表格视图启用筛选下拉
  • ownerCol="负责人" 看板卡片和列表条目显示负责人
  • :status 列在列表视图显示彩色竖条,在时间轴视图显示不同颜色的节点
  • :priority 列显示 P0/P1/P2 优先级标签
  • :date 列在时间轴中定位圆点,表格中带月份色条
  • :progress 列在进度视图中显示环形完成度和进度条
  • titleCol="任务" 指定卡片/列表/里程碑标题列

场景二:英语学习计划(艾宾浩斯复习)

基于艾宾浩斯遗忘曲线自动生成复习计划,鼠标悬停节点查看复习详情。

英语学习计划

单词 List 1
第 1 次复习
05-21
已完成
复习重点熟词僻义 + 例句
预计时长30分钟
状态done
第 2 次复习
05-22
已完成
复习重点熟词僻义 + 例句
预计时长30分钟
状态done
第 3 次复习
05-24
已完成
复习重点熟词僻义 + 例句
预计时长30分钟
状态done
第 4 次复习
05-27
已完成
复习重点熟词僻义 + 例句
预计时长30分钟
状态done
第 5 次复习
06-04
待复习
复习重点熟词僻义 + 例句
预计时长30分钟
状态done
第 6 次复习
06-19
待复习
复习重点熟词僻义 + 例句
预计时长30分钟
状态done
67%
单词 List 2
第 1 次复习
05-26
已完成
复习重点词根词缀整理
预计时长25分钟
状态doing
第 2 次复习
05-27
已完成
复习重点词根词缀整理
预计时长25分钟
状态doing
第 3 次复习
05-29
已完成
复习重点词根词缀整理
预计时长25分钟
状态doing
第 4 次复习
06-01
已完成
复习重点词根词缀整理
预计时长25分钟
状态doing
第 5 次复习
06-09
待复习
复习重点词根词缀整理
预计时长25分钟
状态doing
第 6 次复习
06-24
待复习
复习重点词根词缀整理
预计时长25分钟
状态doing
67%
高数导数
第 1 次复习
05-28
已完成
复习重点复合函数求导
预计时长45分钟
状态todo
第 2 次复习
05-29
已完成
复习重点复合函数求导
预计时长45分钟
状态todo
第 3 次复习
05-31
已完成
复习重点复合函数求导
预计时长45分钟
状态todo
第 4 次复习
06-03
今天该复习
复习重点复合函数求导
预计时长45分钟
状态todo
第 5 次复习
06-11
待复习
复习重点复合函数求导
预计时长45分钟
状态todo
第 6 次复习
06-26
待复习
复习重点复合函数求导
预计时长45分钟
状态todo
50%
内容学习日期复习重点预计时长状态
单词 List 12026-05-20熟词僻义 + 例句30
单词 List 22026-05-25词根词缀整理25
高数导数2026-05-27复合函数求导45
待办 (1)
高数导数
2026-05-27
进行中 (1)
单词 List 2
2026-05-25
已完成 (1)
单词 List 1
2026-05-20
:::plan{title="英语学习计划" views="ebbinghaus,table,board"
        default="ebbinghaus" dateCol="学习日期" titleCol="内容"
        groupBy="状态" statusCol="状态"}
| 内容:text | 学习日期:date | 复习重点:text | 预计时长:number | 状态:status |
|-----------|---------------|---------------|-----------------|-------------|
| 单词 List 1 | 2026-05-20    | 熟词僻义 + 例句 | 30分钟 | done        |
| 单词 List 2 | 2026-05-25    | 词根词缀整理    | 25分钟 | doing       |
| 高数导数   | 2026-05-27    | 复合函数求导    | 45分钟 | todo        |
:::

用到的特性:

  • views="ebbinghaus,table,board" 艾宾浩斯 + 表格 + 看板
  • dateCol="学习日期" 指定学习日期,自动计算 6 个复习节点(+1天、+2天、+4天、+7天、+15天、+30天)
  • steps="1,3,7,14,30,60,90" 可自定义复习间隔(默认不指定即可)
  • 节点状态:实心 = 已完成,呼吸动画 + 下箭头 = 今天该复习,空心 = 待复习
  • 鼠标悬停节点自动显示表格中其他列的内容(如”复习重点”、“预计时长”)
  • 右侧百分比表示已完成复习节点占比

场景三:阅读书单(看板 + 里程碑)

按类别分组的阅读计划,结合看板和里程碑两个视图。

2024 阅读计划

历史 (1)
万历十五年
文学 (2)
活着
2024-03-10
百年孤独
科幻 (2)
三体
2024-02-15
沙丘
2024-05-20
类别书名作者读完日期评分链接
科幻三体刘慈欣2024-02-159三体
文学活着余华2024-03-109活着
科幻沙丘赫伯特2024-05-208沙丘
历史万历十五年黄仁宇book.douban.com
文学百年孤独马尔克斯https://book.douban.com/subject/
2024-02-15
三体
2024-03-10
活着
2024-05-20
沙丘
:::plan{title="2024 阅读计划" views="board,table,milestone"
        default="board" groupBy="类别" dateCol="读完日期" titleCol="书名"}
| 类别:select | 书名:text | 作者:text | 读完日期:date | 评分:number | 链接:link |
|-------------|-----------|-----------|---------------|-------------|-----------|
| 科幻        | 三体      | 刘慈欣    | 2024-02-15    | 9           | [豆瓣](https://book.douban.com/subject/2567698) |
| 文学        | 活着      | 余华      | 2024-03-10    | 9           | [豆瓣](https://book.douban.com/subject/4913064) |
| 科幻        | 沙丘      | 赫伯特    | 2024-05-20    | 8           | [豆瓣](https://book.douban.com/subject/26715448) |
| 历史        | 万历十五年 | 黄仁宇   |               |             | |
| 文学        | 百年孤独  | 马尔克斯  |               |             | |
:::

用到的特性:

  • groupBy="类别" 按类别列分组,看板每列一个颜色
  • :select 类型显示为 pill 标签(适合有限选项如”科幻/文学/历史”)
  • :number 类型显示为千分位格式化的 Notion 风格标签
  • :link 类型支持两种格式:直接 URL(https://...)或 Markdown 链接([名称](url)),带外部链接图标,悬停高亮
  • titleCol="书名" 指定看板卡片和里程碑标题

场景四:旅行行程(时间轴 + 里程碑)

时间线视图展示旅行安排,里程碑视图展示重要节点。

云南之行

7月
07-01
07-03
07-06
07-09
07-12
抵达昆明
大理古城
丽江古城
香格里拉
返程
2024-07-01
抵达昆明
2024-07-03
大理古城
2024-07-06
丽江古城
2024-07-09
香格里拉
2024-07-12
返程
:::plan{title="云南之行" views="timeline,milestone"
        default="timeline" dateCol="日期" statusCol="状态" titleCol="事件"}
| 事件:text | 日期:date | 状态:status | 备注:text |
|-----------|-----------|-------------|-----------|
| 抵达昆明  | 2024-07-01| done        | 入住翠湖附近 |
| 大理古城  | 2024-07-03| done        | 骑行洱海西线 |
| 丽江古城  | 2024-07-06| doing       | 玉龙雪山一日游 |
| 香格里拉  | 2024-07-09| todo        | 普达措国家公园 |
| 返程      | 2024-07-12| todo        | 昆明飞回     |
:::

用到的特性:

  • timeline 单点模式:每个事件显示为一个圆点
  • milestone 视图:按时间顺序排列的卡片,显示备注内容
  • :status 列控制时间轴节点颜色(todo=灰, doing=呼吸, done=实心)

场景五:习惯打卡(纯表格 + checkbox)

用 checkbox 类型做每日习惯打卡表。

每日习惯

习惯周一周二周三周四周五周六周日
早起
阅读
运动
冥想
:::plan{title="每日习惯" views="table"}
| 习惯:text | 周一:checkbox | 周二:checkbox | 周三:checkbox | 周四:checkbox | 周五:checkbox | 周六:checkbox | 周日:checkbox |
|-----------|---------------|---------------|---------------|---------------|---------------|---------------|---------------|
| 早起      | true          | true          | false         | true          | true          | false         | false         |
| 阅读      | true          | true          | true          | true          | false         | true          | true          |
| 运动      | true          | false         | true          | false         | true          | true          | false         |
| 冥想      | false         | true          | true          | true          | true          | false         | true          |
:::

用到的特性:

  • :checkbox 类型显示为实心/空心圆点(true=完成, false=未完成)
  • 纯表格视图,类似打卡表

场景六:年度计划(看板 + 进度)

个人成长计划,按状态分组的看板 + 整体进度视图。

2024 年度计划

待办 (2)
减重 5kg
● P0
0%
建立应急基金
● P1
0%
进行中 (2)
掌握 TypeScript
● P0
60%
阅读 12 本技术书
● P1
25%
已完成 (1)
每周运动 3 次
● P0
100%
37%整体完成度
整体完成度
5 个任务 · 1 已完成 · 2 进行中 · 2 待办
掌握 TypeScript
60%
阅读 12 本技术书
25%
减重 5kg
0%
每周运动 3 次
100%
建立应急基金
0%
状态分布
● 已完成██░░░░░░░░120%
◉ 进行中████░░░░░░240%
○ 待办████░░░░░░240%
优先级分布
● P0██████░░░░360%
● P1████░░░░░░240%
○ P2░░░░░░░░░░00%
:::plan{title="2024 年度计划" views="board,progress" default="board"
        groupBy="状态" titleCol="关键结果" progressCol="完成度"
        statusCol="状态" priorityCol="优先级"}
| 状态:status | 目标:text | 关键结果:text | 完成度:progress | 优先级:priority |
|-------------|-----------|---------------|-----------------|-----------------|
| doing       | 技术成长  | 掌握 TypeScript | 60%             | P0              |
| doing       | 技术成长  | 阅读 12 本技术书 | 25%             | P1              |
| todo        | 身体健康  | 减重 5kg        | 0%              | P0              |
| done        | 身体健康  | 每周运动 3 次   | 100%            | P0              |
| todo        | 财务规划  | 建立应急基金    | 0%              | P1              |
:::

用到的特性:

  • board + progress 组合,看板分组 + 环形进度图
  • groupBy="状态" 按状态分组
  • priorityCol="优先级" 在看板卡片和进度统计中显示优先级分布

场景七:软件迭代(里程碑 + 时间轴范围模式)

里程碑视图展示版本发布,时间轴范围模式展示开发周期。

产品迭代

2024-01-01
v1.0
首个正式版本
2024-03-15
v1.5
支持暗黑模式
2024-06-01
v2.0
全新架构上线
11月
12月
1月
3月
5月
11-01
12-31
03-10
05-28
v1.0
v1.5
v2.0
:::plan{title="产品迭代" views="milestone,timeline" default="milestone"
        dateCol="发布日期" titleCol="版本" descCol="更新内容"
        startDate="开始" endDate="结束"}
| 版本:text | 发布日期:date | 更新内容:text | 开始:date | 结束:date |
|-----------|---------------|---------------|-----------|-----------|
| v1.0      | 2024-01-01    | 首个正式版本   | 2023-11-01| 2023-12-31|
| v1.5      | 2024-03-15    | 支持暗黑模式   | 2024-01-15| 2024-03-10|
| v2.0      | 2024-06-01    | 全新架构上线   | 2024-03-20| 2024-05-28|
:::

用到的特性:

  • milestone 视图:按发布日期排列的里程碑卡片,显示 descCol 的内容
  • timeline 范围模式:startDate="开始" + endDate="结束" 渲染为甘特条
  • 同时有 dateCol(发布日期)和 startDate/endDate(开发周期),timeline 优先使用范围模式

场景八:自定义看板分组与顺序

groupOrder 属性覆盖默认的字母序排列。比如按”阶段”分组时,不指定 groupOrder 会按字母序变成 测试 → 上线 → 设计 → 开发,但业务上合理的顺序是 设计 → 开发 → 测试 → 上线

设计 (1)
首页原型
开发 (1)
API 接口
测试 (1)
用例编写
上线 (1)
生产部署
:::plan{views="board" groupBy="阶段" groupOrder="设计,开发,测试,上线" titleCol="任务"}
| 阶段:select | 任务:text | 负责人:text |
|-------------|-----------|-------------|
| 设计        | 首页原型  | Alice       |
| 开发        | API 接口  | Bob         |
| 测试        | 用例编写  | Carol       |
| 上线        | 生产部署  | Dave        |
:::

用到的特性:

  • groupOrder="设计,开发,测试,上线" 同时定义看板分组和列顺序(从左到右),最多8个
  • :select列类型(控制单元格显示为 pill 标签),groupOrder看板属性(定义分组和顺序),两者独立
  • 不指定 groupOrder 时,:select 列默认按字母序排列,这里用 groupOrder 覆盖了默认顺序
  • 8 种颜色按位置自动分配,均基于主题色派生

参考

列类型

类型说明示例
text默认纯文本任意文字
status状态圆点(todo/doing/donedone
priority优先级标签(P0/P1/P2P0
date日期,表格中带月份色条2024-01-01
progress进度条65%
number数字,自动千分位格式化,Notion 风格标签4200
checkbox勾选框(true/falsetrue
select单选标签任意文字
link可点击链接https://...

状态列

状态列使用 status 类型,支持三个值:

  • todo — 待办,空心圆
  • doing — 进行中,半实心圆 + 呼吸动画
  • done — 已完成,实心圆

属性

属性说明示例
title组件标题title="项目计划"
views启用的视图views="board,table"
default默认视图default="table"
groupByboard 分组列groupBy="状态"
groupOrderboard 自定义分组和列顺序(从左到右)groupOrder="待办,进行中,已完成"
filterstable 筛选列filters="状态,优先级"
dateCol日期列映射dateCol="截止日期"
startDate范围起始列startDate="开始"
endDate范围结束列endDate="结束"
progressCol进度列映射progressCol="完成度"
statusCol状态列映射statusCol="状态"
titleCol标题列映射titleCol="任务"
ownerCol负责人列映射ownerCol="负责人"
priorityCol优先级列映射priorityCol="优先级"
descCol描述列映射descCol="描述"
stepsebbinghaus 复习间隔(逗号分隔天数)steps="1,3,7,14,30"

视图所需列

视图所需列说明
table永远可渲染
list永远可渲染
board永远可渲染
timelinedateColstartDateendDate单点或范围模式
milestonedateCol只支持单点模式
progressprogressCol必须指定进度列
ebbinghausdateCol艾宾浩斯复习计划,自动计算复习节点

关于列类型: 视图所需列只要求列存在即可,不强制要求特定类型。例如 timeline 的 dateColtext 类型也能工作(只要值能被 new Date() 解析)。但建议声明对应类型(如 :date:progress)以获得更好的显示效果(月份色条、进度条等)。

© 本文著作权归作者所有,转载请注明出处。

Miki
Miki
未知标题
00:00
00:00
播放列表