组件用法示例

对齐 work_note：Tabs / Timeline / SeatingChart / 一键复制 / 密码加密等。

演示集中在下方组件（避免 Markdown 里直接嵌套闭合标签触发 Vue missing end tag）。

提示容器

INFO

信息提示

TIP

成功 / 建议

WARNING

警告

DANGER

危险 / 错误

一键复制

组件实战

随记

将成功的东西整理成册，就能永远成功。

Tabs / TabItem

外层 Tabs，内层多个 TabItem（label 必填，value 可选）。

前端示例

• 管理后台
• 移动端 H5

npm run docs:dev

后端示例

• 用户服务
• 订单服务

文档示例

• 本文档：/guide/components
• 加密说明见下方「密码保护」

Timeline / TimelineItem

纵向（插槽）

• 完成接口联调

  2026-07-14

  对齐 VitePress 路由与静态资源路径。
• 🧩

  接入主题组件

  2026-07-14

  Tabs / Timeline / SeatingChart 从 work_note 同步过来。
• 📝

  编写示例文档

  2026-07-14

  就是你现在看的这一页。

横向（items 数据）

• 📋

  需求评审

  2026-07-10

  明确接口与状态机
• 🎨

  原型确认

  2026-07-11

  交互细节与边缘态
• 🔌

  接口联调

  2026-07-12

  处理超时与重试
• 🧪

  单元测试

  2026-07-13

  覆盖异常与边界

SeatingChart 座位图

传 areas / seats；可开「排座模式」拖动后复制坐标 JSON。

开启排座模式 (可拖动)

一键复制

Markdown 语法：copy[展示文字](要复制的内容)（页面正文里直接写即可）。

密码保护

文首加 password frontmatter。示例： 承让迪的各种人格

其它全局组件

组件	用途
Boxx	随机名言（本页顶部）
Clock / Clock02	时钟
Reward	赞赏区
ToDoList / Projects	清单 / 项目列表
ViewsIndex / AboutPage / FriendsPage	概览 / 关于 / 友人帐

Markdown 里怎么写

Tabs：外层 Tabs，内层 TabItem；label 必填，value 可选。复杂内容优先抽成 .vue 再挂到 md。

Timeline 纵向：Timeline + 若干 TimelineItem（title / time / color / icon）。

Timeline 横向：自闭合写法，传 :items="[...]"。

SeatingChart：:areas / :seats / width / height / show-job / show-tags。

密码页：

---
password: "你的密码"
---

三列表 + 合并标题行

表头首格以关键字 表格标题 开头时，自动合并为整行标题（colspan），等价于原来的 <th colspan="3">图片类</th>：

|表格标题 图片类|||
|---|---|---|
|[mock图片](http://picsum.photos)|[路过图床](https://imgse.com/)|[iconfont](https://www.iconfont.cn/)|
|[图片压缩](https://yasuo.xunjiepdf.com/img/)|[图片压缩2](https://compressor.io/)|[图片处理工具](https://www.iloveimg.com/zh-cn)|

标题也可写成链接：|表格标题 [图片类](/views/)| ||

实效果：

图片类
mock图片	路过图床	iconfont
图片压缩	图片压缩2	图片处理工具

新增侧栏改 docs/.vitepress/config.mts；静态资源放 docs/.vitepress/public/。