boos
e0a5f57793
Vendor the rebranded BoosAPI Desktop client (Tauri + Vue) into metapi as a monorepo subdirectory under desktop/. Source only — node_modules, dist, Cargo target and the upstream .git history are excluded. desktop/ keeps its own independent Cargo workspace (desktop/src-tauri with crates/*); it is not part of the backend boosapi crate, so a `cargo check` at the metapi root still compiles only the backend. Build the desktop app from desktop/src-tauri per desktop/README.md. Note: app icons are still placeholder assets pending the final BoosAPI logo. The updater signing keys live outside the repo and are not included.
399 lines
10 KiB
Markdown
399 lines
10 KiB
Markdown
# 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 — 引用
|
||
|
||
- 引用标记渲染
|