feat(desktop): embed BoosAPI Desktop client as a subproject

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.
2026-06-22 11:32:57 +08:00
parent d9c78ecc73
commit e0a5f57793
2305 changed files with 449355 additions and 0 deletions
@@ -0,0 +1,259 @@
+# Design Tokens
+
+> markstream-vue 当前所有设计令牌（Design Tokens）清单。
+> 来源：`src/index.css`、`tailwind.config.js`、各组件 `<style>` 块。
+
+---
+
+## 1. 全局 CSS 变量（Global CSS Variables）
+
+定义在 `src/index.css`，挂载于 `.markstream-vue` 根选择器。
+
+### 1.1 基础色彩（HSL 格式）
+
+| 变量名 | Light 值 | Dark 值 | 用途 |
+|---|---|---|---|
+| `--border` | `214.3 31.8% 91.4%` | `217.2 32.6% 17.5%` | 边框色 |
+| `--background` | `0 0% 100%` | `222.2 84% 4.9%` | 背景色 |
+| `--foreground` | `222.2 84% 4.9%` | `210 40% 98%` | 前景/文字色 |
+| `--secondary` | `210 40% 96%` | `217.2 32.6% 17.5%` | 次要背景（如行内代码底色） |
+| `--muted` | `210 40% 96%` | `217.2 32.6% 17.5%` | 弱化背景 |
+| `--muted-foreground` | `215.4 16.3% 46.9%` | `215 20.2% 65.1%` | 弱化文字 |
+
+### 1.2 Tailwind 扩展色彩映射
+
+定义在 `tailwind.config.js`，带回退值：
+
+```js
+const colors = {
+  'border': 'hsl(var(--border), 214.3 21.44% 93.4%)',
+  'background': 'hsl(var(--background), 0 0% 100%)',
+  'foreground': 'hsl(var(--foreground), 217.2 22.08% 19.5%)',
+  'secondary': 'hsl(var(--secondary), 214.3 21.44% 93.4%)',
+  'muted': 'hsl(var(--muted), 210 28% 98.1%)',
+  'muted-foreground': 'hsl(var(--muted-foreground), 215 12.16% 67.1%)',
+}
+```
+
+---
+
+## 2. 组件级 CSS 变量
+
+### 2.1 代码块（CodeBlockNode）
+
+| 变量名 | Light | Dark | 用途 |
+|---|---|---|---|
+| `--markstream-code-fallback-bg` | `#ffffff` | `#111827` | 代码区背景 |
+| `--markstream-code-fallback-fg` | `#111827` | `#e5e7eb` | 代码区文字 |
+| `--markstream-code-border-color` | `rgb(229 231 235)` | `rgb(55 65 81 / 0.3)` | 代码块边框 |
+| `--markstream-code-fallback-selection-bg` | `rgba(0,0,0,0.06)` | `rgba(255,255,255,0.08)` | 选区背景 |
+| `--markstream-code-padding-y` | `8px` | - | 代码内上下边距 |
+| `--markstream-code-padding-x` | `12px` | - | 代码内左右边距 |
+| `--markstream-code-padding-left` | `52px` | - | 代码内左边距（含行号） |
+| `--vscode-editor-font-size` | `12px` | - | 编辑器字号 |
+| `--vscode-editor-background` | 来自 Monaco 主题 | - | Monaco 背景色 |
+| `--vscode-editor-foreground` | 来自 Monaco 主题 | - | Monaco 前景色 |
+
+### 2.2 Diff 视图变量
+
+| 变量名 | Light | Dark |
+|---|---|---|
+| `--markstream-diff-frame-border` | `rgb(203 213 225 / 0.56)` | 深色变体 |
+| `--markstream-diff-frame-shadow` | `0 16px 40px -32px rgb(15 23 42 / 0.18)` | 深色变体 |
+| `--markstream-diff-shell-fg` | `#0f172a` | 深色变体 |
+| `--markstream-diff-shell-muted` | `#64748b` | 深色变体 |
+| `--markstream-diff-shell-border` | `rgb(148 163 184 / 0.18)` | 深色变体 |
+| `--markstream-diff-editor-bg` | `#ffffff` | 深色变体 |
+| `--markstream-diff-editor-fg` | `#435266` | 深色变体 |
+| `--markstream-diff-added-fg` | `#14b8a6` | `#5eead4` |
+| `--markstream-diff-removed-fg` | `#ff3658` | `#fda4af` |
+| `--markstream-diff-added-line` | `rgb(232 249 245 / 0.98)` | 深色变体 |
+| `--markstream-diff-removed-line` | `rgb(255 241 241 / 0.98)` | 深色变体 |
+| `--markstream-diff-added-inline` | `rgb(197 245 219 / 0.96)` | 深色变体 |
+| `--markstream-diff-removed-inline` | `rgb(255 215 217 / 0.92)` | 深色变体 |
+
+### 2.3 提示框（AdmonitionNode）
+
+| 变量名 | Light | Dark | 用途 |
+|---|---|---|---|
+| `--admonition-bg` | `#f8f8f8` | `#0b1220` | 提示框背景 |
+| `--admonition-border` | `#eaecef` | `rgba(255,255,255,0.06)` | 提示框边框 |
+| `--admonition-header-bg` | `rgba(0,0,0,0.03)` | `rgba(255,255,255,0.03)` | 标题栏背景 |
+| `--admonition-text` | `#111827` | `#e6eef8` | 正文色 |
+| `--admonition-muted` | `#374151` | `#cbd5e1` | 标题文字色 |
+| `--admonition-note-color` | `#448aff` | 同 | 蓝色-提示 |
+| `--admonition-tip-color` | `#00bfa5` | 同 | 绿色-技巧 |
+| `--admonition-warning-color` | `#ff9100` | 同 | 橙色-警告 |
+| `--admonition-danger-color` | `#ff5252` | 同 | 红色-危险 |
+
+### 2.4 其他组件变量
+
+| 变量名 | 默认值 | 组件 |
+|---|---|---|
+| `--blockquote-border-color` | `#e2e8f0` | BlockquoteNode |
+| `--hr-border-color` | `#e2e8f0` | ThematicBreakNode |
+| `--table-border` | `#cbd5e1` | TableNode |
+| `--list-item-counter-marker` | `#64748b` | ListItemNode（有序列表数字） |
+| `--list-item-marker` | `#cbd5e1` | ListItemNode（无序列表圆点） |
+| `--link-color` | `#0366d6` | LinkNode |
+| `--underline-height` | `2px` | LinkNode |
+| `--underline-bottom` | `-3px` | LinkNode |
+| `--underline-opacity` | `0.35` | LinkNode（动画最大透明度） |
+| `--underline-rest-opacity` | `0.18` | LinkNode（静止态透明度） |
+| `--underline-duration` | `1.6s` | LinkNode |
+| `--underline-timing` | `ease-in-out` | LinkNode |
+
+### 2.5 动画相关变量
+
+| 变量名 | 默认值 | 用途 |
+|---|---|---|
+| `--typewriter-fade-duration` | `900ms` | 打字机淡入时长 |
+| `--typewriter-fade-ease` | `ease-out` | 打字机缓动函数 |
+| `--stream-update-fade-duration` | 同上 | 流式更新淡入时长 |
+| `--stream-update-fade-ease` | 同上 | 流式更新缓动函数 |
+
+---
+
+## 3. 色彩体系（Color Palette）
+
+### 3.1 语义色彩
+
+| 语义 | 色值 | 用途 |
+|---|---|---|
+| Note / Info | `#448aff` | 信息提示 |
+| Tip | `#00bfa5` | 技巧提示 |
+| Warning | `#ff9100` | 警告提示 |
+| Danger / Error | `#ff5252` | 危险/错误提示 |
+| Link | `#0366d6` | 链接色 |
+| Highlight | `#ffff00` | 文本高亮 |
+| Diff Added | `#14b8a6` (light) / `#5eead4` (dark) | 新增行 |
+| Diff Removed | `#ff3658` (light) / `#fda4af` (dark) | 删除行 |
+
+### 3.2 灰阶色彩（散落于各组件）
+
+| 色值 | 出现位置 |
+|---|---|
+| `#111827` (gray-900) | 代码区前景、提示框文字 |
+| `#e5e7eb` (gray-200) | 代码区暗色前景 |
+| `#e2e8f0` (slate-200) | 引用线、分割线 |
+| `#cbd5e1` (slate-300) | 表格边框、列表标记 |
+| `#64748b` (slate-500) | 有序列表标记 |
+| `#374151` (gray-700) | 提示框标题文字 |
+| `#eaecef` | 提示框边框、脚注边框 |
+| `#0b1220` | 暗色提示框背景 |
+
+---
+
+## 4. 排版（Typography）
+
+### 4.1 标题层级
+
+| 等级 | 字号 | 字重 | 上边距 | 下边距 | 行高 |
+|---|---|---|---|---|---|
+| h1 | `text-4xl` (2.25rem) | `font-extrabold` (800) | `0` | `calc(8/9*1em)` | `calc(10/9*1)` |
+| h2 | `text-2xl` (1.5rem) | `font-bold` (700) | `2rem` | `1rem` | `calc(4/3*1)` |
+| h3 | `text-xl` (1.25rem) | `font-semibold` (600) | `calc(8/5*1em)` | `calc(3/5*1em)` | `calc(5/3*1)` |
+| h4 | `text-base` (1rem) | `font-semibold` (600) | `1.5rem` | `0.5rem` | 默认 |
+| h5 | `text-base` (1rem) | 默认 | `0` | `0` | 默认 |
+| h6 | `text-base` (1rem) | 默认 | `0` | `0` | 默认 |
+
+共有基类：`font-medium leading-tight`
+
+### 4.2 正文
+
+| 元素 | 字号 | 字重 | 行距 | 边距 |
+|---|---|---|---|---|
+| 段落 `<p>` | 继承 | 继承 | 继承 | `1.25em 0` |
+| 行内代码 | `85%` | `font-mono` | - | `px-1 py-0.5` |
+| 引用块 | 继承 | `500` | - | `mt-1.6em mb-1.6em pl-1em` |
+| 定义列表 term | 继承 | `600` | - | `mt-0.5rem` |
+| 定义列表 desc | 继承 | 继承 | - | `ml-1rem mb-0.5rem` |
+| 脚注 | `text-sm` | - | `leading-relaxed` | `mt-2 mb-2` |
+
+### 4.3 代码块
+
+| 属性 | 值 |
+|---|---|
+| 字号 | `var(--vscode-editor-font-size, 12px)` |
+| 字体 | monospace（系统等宽） |
+| 标题字号 | `14px` |
+| 标题字重 | `650` |
+| 标题字间距 | `0.01em` |
+| 说明文字字号 | `12px` |
+
+---
+
+## 5. 间距（Spacing）
+
+### 5.1 块级元素垂直间距
+
+| 元素 | margin-top | margin-bottom |
+|---|---|---|
+| 段落 | `1.25em` | `1.25em` |
+| 标题 h1 | `0` | `calc(8/9*1em)` |
+| 标题 h2 | `2rem` | `1rem` |
+| 标题 h3 | `calc(8/5*1em)` | `calc(3/5*1em)` |
+| 标题 h4 | `1.5rem` | `0.5rem` |
+| 引用块 | `1.6em` | `1.6em` |
+| 列表 | `1.25rem` | `1.25rem` |
+| 列表项 | `0.5rem` | `0.5rem` |
+| 提示框 | `1rem` | `1rem` |
+| 表格 | `2rem` | `2rem` |
+| 分割线 | `3rem` | `3rem` |
+| Mermaid 图 | `1rem` | `1rem` |
+| 定义列表 | `0` | `1rem` |
+
+### 5.2 内边距（Padding）
+
+| 元素 | padding |
+|---|---|
+| 行内代码 | `px-1 py-0.5` (4px 2px) |
+| 提示框标题 | `0.5rem 1rem` |
+| 提示框内容 | `0.5rem 1rem 1rem` |
+| 引用块左侧 | `1em` |
+| 列表缩进 | `calc(13/8*1em)` |
+| 列表缩进（移动端） | `calc(14/9*1em)` |
+| 列表项 | `pl-1.5` (6px) |
+| 表格单元格 | `calc(4/7*1em)` |
+| 代码块内容 | `8px 12px` (左侧 `52px` 含行号) |
+
+---
+
+## 6. 边框与圆角（Borders & Radius）
+
+| 元素 | 边框 | 圆角 |
+|---|---|---|
+| 行内代码 | `1px solid hsl(var(--border) / 0.9)` | `rounded` (0.25rem) |
+| 提示框 | `border-left: 4px solid` | `4px` |
+| 引用块 | `border-left: 0.25rem solid` | - |
+| 代码块 | `var(--markstream-code-border-color)` | 由 Monaco 控制 |
+| 表格 | `var(--table-border, #cbd5e1)` | - |
+| 分割线 | `border-t` | - |
+| 脚注 | `border-t border-[#eaecef]` | - |
+| Mermaid 图 | `border rounded-lg` | `0.5rem` |
+| Tooltip | `border rounded-md` | `0.375rem` |
+
+---
+
+## 7. 阴影（Shadows）
+
+| 元素 | 阴影值 |
+|---|---|
+| Mermaid 块 | `shadow-sm` |
+| Tooltip | `shadow-md` |
+| Diff 外框 | `0 16px 40px -32px rgb(15 23 42 / 0.18)` |
+| Diff shell | `0 30px 70px -48px rgb(15 23 42 / 0.42)` |
+| Mermaid 模态弹窗 | `shadow-lg` |
+| Mermaid 激活按钮 | `shadow-sm` |
+
+---
+
+## 8. 性能相关令牌
+
+| 属性 | 值 | 组件 |
+|---|---|---|
+| `content-visibility` | `auto` | markdown-renderer, CodeBlockNode, MermaidBlockNode |
+| `contain` | `content` / `layout` | 多个组件 |
+| `contain-intrinsic-size` | `320px 180px` | CodeBlockNode |
+| `contain-intrinsic-size` | `360px 240px` | MermaidBlockNode |
+| `container-type` | `inline-size` | CodeBlockNode |