BoosAPI/desktop/libs/markstream-vue/design/components.md

Component Style Inventory

每个组件的当前样式详情，按功能分类。 来源：src/components/ 下各 .vue 文件的 <style> 块。

---

1. 文本类组件

1.1 HeadingNode — 标题

文件：src/components/HeadingNode/HeadingNode.vue

级别	类名	字号	字重	行高	上下边距
h1	.heading-1	text-4xl	extrabold	calc(10/9*1)	0 / calc(8/9*1em)
h2	.heading-2	text-2xl	bold	calc(4/3*1)	2rem / 1rem
h3	.heading-3	text-xl	semibold	calc(5/3*1)	calc(8/5*1em) / calc(3/5*1em)
h4	.heading-4	text-base	semibold	默认	1.5rem / 0.5rem
h5	.heading-5	text-base	默认	默认	0 / 0
h6	.heading-6	text-base	默认	默认	0 / 0

• 通用类 .heading-node：font-medium leading-tight
• 特殊规则：hr + .heading-node 取消 margin-top

---

1.2 ParagraphNode — 段落

文件：src/components/ParagraphNode/ParagraphNode.vue

• .paragraph-node：margin: 1.25em 0
• 列表内嵌套时：li .paragraph-node { margin: 0 }

---

1.3 StrongNode / EmphasisNode — 加粗与斜体

• 无自定义样式，继承 HTML 默认 <strong> / <em> 行为

---

1.4 StrikethroughNode — 删除线

文件：src/components/StrikethroughNode/StrikethroughNode.vue

• .strikethrough-node：text-decoration: line-through

---

1.5 HighlightNode — 高亮

文件：src/components/HighlightNode/HighlightNode.vue

• .highlight-node：background-color: #ffff00，padding: 0 0.2rem
• 待改进：仅有亮黄色，无暗色模式适配

---

1.6 SubscriptNode / SuperscriptNode — 上下标

• 无自定义样式，使用 HTML 原生 <sub> / <sup>

---

1.7 InsertNode — 插入标记

• 使用 HTML 原生 <ins> 样式

---

1.8 EmojiNode — 表情

文件：src/components/EmojiNode/EmojiNode.vue

• .emoji-node：display: inline-block

---

2. 链接与引用

2.1 LinkNode — 链接

文件：src/components/LinkNode/LinkNode.vue

属性	值
颜色	var(--link-color, #0366d6)
装饰	默认无下划线，hover 显示
hover 效果	text-decoration: underline，text-underline-offset: 0.2rem
加载态	脉冲下划线动画（underlinePulse keyframe）

CSS 变量（可自定义）：

--link-color, --underline-height, --underline-bottom,
--underline-opacity, --underline-rest-opacity,
--underline-duration, --underline-timing, --underline-iteration

---

2.2 FootnoteNode — 脚注

文件：src/components/FootnoteNode/FootnoteNode.vue

• 容器：flex mt-2 mb-2 text-sm leading-relaxed
• 上方分隔线：border-t border-[#eaecef] pt-2

2.3 FootnoteAnchorNode / FootnoteReferenceNode

• 上标链接样式，无复杂自定义

---

3. 代码类组件

3.1 InlineCodeNode — 行内代码

文件：src/components/InlineCodeNode/InlineCodeNode.vue

属性	值
字号	85%
字体	font-mono
颜色	hsl(var(--foreground))
背景	hsl(var(--secondary))
边框	1px solid hsl(var(--border) / 0.9)
内边距	px-1 py-0.5
圆角	rounded
换行	whitespace-normal break-words

流式更新动画：inline-code-stream-update-fade-a/b，duration 900ms

---

3.2 CodeBlockNode — 代码块

文件：src/components/CodeBlockNode/CodeBlockNode.vue（~2700 行）

容器：

• contain: content，content-visibility: auto
• container-type: inline-size（支持 Container Queries）
• contain-intrinsic-size: 320px 180px

Header：

• gap: 16px
• 标题：font-size: 14px，font-weight: 650，letter-spacing: 0.01em
• 说明：font-size: 12px，62% 透明度
• 操作按钮：gap: 8px，hover 态 scale(0.98)

代码编辑器区域：

• 使用 Monaco Editor / Shiki 高亮
• 主题可通过 darkTheme / lightTheme prop 切换
• 大量 --markstream-code-* 和 --markstream-diff-* CSS 变量（详见 tokens.md）

加载骨架屏：shimmer 动画，linear-gradient(90deg, ...) 背景滑动

Diff 视图：完整的增删行/内联 diff 颜色系统，含 Light/Dark 两套

---

3.3 PreCodeNode

文件：src/components/PreCodeNode/PreCodeNode.vue

• 简化版代码块，用于无高亮场景

---

3.4 MarkdownCodeBlockNode

• Markdown 渲染的代码块封装

---

4. 容器类组件

4.1 BlockquoteNode — 引用块

文件：src/components/BlockquoteNode/BlockquoteNode.vue

属性	值
字重	500
字体样式	italic
左边框	0.25rem solid var(--blockquote-border-color, #e2e8f0)
左内边距	1em
上下边距	1.6em
引号字符	"\201C" "\201D" "\2018" "\2019"

---

4.2 AdmonitionNode — 提示框

文件：src/components/AdmonitionNode/AdmonitionNode.vue

基础样式：

• 左边框：4px solid
• 圆角：4px
• 无 overflow: hidden

类型色彩：

类型	边框色	标题背景
note / info	#448aff	rgba(68, 138, 255, 0.06)
tip	#00bfa5	rgba(0, 191, 165, 0.06)
warning / caution	#ff9100	rgba(255, 145, 0, 0.06)
danger / error	#ff5252	rgba(255, 82, 82, 0.06)

Dark 模式：背景透明度从 6% 提升到 12%

标题栏：padding: 0.5rem 1rem，font-weight: 600，带图标 内容区：padding: 0.5rem 1rem 1rem 折叠按钮：border-radius: 4px，focus: outline 2px

---

4.3 VmrContainerNode — 通用容器

• 自定义容器节点封装

---

5. 列表类组件

5.1 ListNode — 列表

文件：src/components/ListNode/ListNode.vue

• .list-node：my-5 pl-[calc(13/8*1em)]
• .list-decimal：list-style-type: decimal
• .list-disc：list-style-type: disc
• 移动端：max-lg:my-[calc(4/3*1em)] max-lg:pl-[calc(14/9*1em)]

5.2 ListItemNode — 列表项

文件：src/components/ListItemNode/ListItemNode.vue

• .list-item：pl-1.5 my-2，dir="auto"
• 有序列表标记色：var(--list-item-counter-marker, #64748b)，line-height: 1.6
• 无序列表标记色：var(--list-item-marker, #cbd5e1)

5.3 CheckboxNode — 复选框

文件：src/components/CheckboxNode/CheckboxNode.vue

• .checkbox-node：margin-right: 0.5rem，vertical-align: middle
• .checkbox-input：margin: 0，cursor: default

---

5.4 DefinitionListNode — 定义列表

文件：src/components/DefinitionListNode/DefinitionListNode.vue

• .definition-list：margin: 0 0 1rem
• .definition-term：font-weight: 600，margin-top: 0.5rem
• .definition-desc：margin-left: 1rem，margin-bottom: 0.5rem

---

6. 表格组件

6.1 TableNode — 表格

文件：src/components/TableNode/TableNode.vue

容器：

• .table-node-wrapper：max-width: 100%，overflow-x: auto，-webkit-overflow-scrolling: touch，scrollbar-gutter: stable

表格：

• table-layout: fixed，width: 100%，border-collapse: collapse
• my-8 text-sm
• th：font-semibold p-[calc(4/7*1em)]
• td：p-[calc(4/7*1em)]
• 边框色：var(--table-border, #cbd5e1)

加载态：shimmer 骨架动画 + 旋转 spinner

无障碍：.sr-only 屏幕阅读器文本

---

7. 媒体类组件

7.1 ImageNode — 图片

文件：src/components/ImageNode/ImageNode.vue

• .image-node__img：max-width: 24rem
• 内联图片：display: inline-block，vertical-align: middle，无固定尺寸
• 切换动画：opacity 220ms ease + translateY(6px) 过渡
• 加载旋转器：border: 2px solid，animate-spin

---

7.2 MermaidBlockNode — Mermaid 图表

文件：src/components/MermaidBlockNode/MermaidBlockNode.vue

容器：rounded-lg border shadow-sm overflow-hidden

Header：

• Light：bg-gray-50 border-gray-200
• Dark：bg-gray-800 border-gray-700/30
• 模式切换按钮带 shadow-sm

图表区域：

• .mermaid-container：min-h-[360px]，transition-[height] duration-150 ease-out
• content-visibility: auto，contain: content，contain-intrinsic-size: 360px 240px
• 支持缩放、拖拽（cursor-grab / cursor-grabbing）

全屏弹窗：

• 遮罩：bg-black/70，z-50
• 面板：shadow-lg，入场 scale(0.98)→1.0

操作按钮：

• Light：text-gray-600 hover:bg-gray-200
• Dark：text-gray-400 hover:bg-gray-700
• Active：scale(0.98)

---

7.3 MathBlockNode / MathInlineNode — 数学公式

文件：src/components/MathBlockNode/MathBlockNode.vue

块级：

• text-center overflow-x-auto min-h-[40px]
• 加载遮罩：backdrop-filter: blur(2px)
• Spinner：20px，border: 2px solid，0.8s linear spin
• 渲染中：opacity: 0.3，transition: opacity 0.2s ease
• 切换：opacity 0.3s ease

---

7.4 D2BlockNode — D2 图表

• 类似 MermaidBlockNode，用于 D2 图表渲染

7.5 InfographicBlockNode — 信息图

• 信息图嵌入容器

---

8. 分隔与装饰组件

8.1 ThematicBreakNode — 分割线

文件：src/components/ThematicBreakNode/ThematicBreakNode.vue

• .hr-node：border-t border-[var(--hr-border-color, #e2e8f0)] my-12

---

9. HTML 嵌入

9.1 HtmlBlockNode / HtmlInlineNode

• 原始 HTML 渲染，样式由内容自身决定

---

10. 辅助组件

10.1 Tooltip — 提示浮层

文件：src/components/Tooltip/Tooltip.vue

属性	Light	Dark
背景	bg-white	bg-gray-900
文字	text-gray-900	text-white
边框	border-gray-200	border-gray-700
圆角	rounded-md	同
阴影	shadow-md	同
层级	z-[9999]	同

入场动画：opacity 120ms linear，translateY(-6px) scale(0.98) → 0 scale(1) 位移动画：transform 220ms cubic-bezier(.16,1,.3,1)

---

10.2 NodeRenderer — 渲染器

文件：src/components/NodeRenderer/NodeRenderer.vue

• 根容器传递 isDark prop 到所有子组件
• 使用 .markstream-vue 作为作用域根类

---

10.3 ReferenceNode — 引用

• 引用标记渲染