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.
This commit is contained in:
boos
@@ -0,0 +1,208 @@
|
||||
# Animations & Transitions
|
||||
|
||||
> 所有动画、过渡效果与运动设计清单。
|
||||
|
||||
---
|
||||
|
||||
## 1. CSS 变量控制的动画
|
||||
|
||||
| 变量 | 默认值 | 用途 |
|
||||
|---|---|---|
|
||||
| `--typewriter-fade-duration` | `900ms` | 流式打字机淡入时长 |
|
||||
| `--typewriter-fade-ease` | `ease-out` | 流式打字机缓动 |
|
||||
| `--stream-update-fade-duration` | 同上回退 | 流式内容更新淡入时长 |
|
||||
| `--stream-update-fade-ease` | 同上回退 | 流式内容更新缓动 |
|
||||
|
||||
---
|
||||
|
||||
## 2. Keyframe 动画
|
||||
|
||||
### 2.1 流式内容淡入
|
||||
|
||||
**组件**：InlineCodeNode
|
||||
|
||||
```css
|
||||
@keyframes inline-code-stream-update-fade-a { from { opacity: 0 } to { opacity: 1 } }
|
||||
@keyframes inline-code-stream-update-fade-b { from { opacity: 0 } to { opacity: 1 } }
|
||||
```
|
||||
|
||||
- 使用 a/b 交替触发避免重复动画不生效
|
||||
- Duration：`var(--stream-update-fade-duration, var(--typewriter-fade-duration, 900ms))`
|
||||
- Easing：`var(--stream-update-fade-ease, var(--typewriter-fade-ease, ease-out))`
|
||||
- `will-change: opacity`
|
||||
|
||||
### 2.2 骨架屏 Shimmer
|
||||
|
||||
**组件**：CodeBlockNode, TableNode
|
||||
|
||||
```css
|
||||
/* CodeBlockNode */
|
||||
@keyframes code-skeleton-shimmer {
|
||||
0% { background-position: -200% 0 }
|
||||
100% { background-position: 200% 0 }
|
||||
}
|
||||
/* background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 75%) */
|
||||
|
||||
/* TableNode */
|
||||
@keyframes table-node-shimmer {
|
||||
0% { background-position: -200% 0 }
|
||||
100% { background-position: 200% 0 }
|
||||
}
|
||||
```
|
||||
|
||||
### 2.3 Spinner 旋转
|
||||
|
||||
**组件**：MathBlockNode, TableNode, ImageNode
|
||||
|
||||
```css
|
||||
/* MathBlockNode */
|
||||
@keyframes math-spin {
|
||||
to { transform: rotate(360deg) }
|
||||
}
|
||||
/* 0.8s linear infinite */
|
||||
|
||||
/* TableNode */
|
||||
/* Tailwind animate-spin */
|
||||
|
||||
/* ImageNode */
|
||||
/* Tailwind animate-spin */
|
||||
```
|
||||
|
||||
### 2.4 链接脉冲下划线
|
||||
|
||||
**组件**：LinkNode
|
||||
|
||||
```css
|
||||
@keyframes underlinePulse {
|
||||
0%, 100% { opacity: var(--underline-rest-opacity, 0.18) }
|
||||
50% { opacity: var(--underline-opacity, 0.35) }
|
||||
}
|
||||
/* Duration: var(--underline-duration, 1.6s) */
|
||||
/* Timing: var(--underline-timing, ease-in-out) */
|
||||
/* Iteration: var(--underline-iteration, infinite) */
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. CSS Transitions
|
||||
|
||||
### 3.1 通用过渡模式
|
||||
|
||||
| 组件 | 属性 | 时长 | 缓动 |
|
||||
|---|---|---|---|
|
||||
| CodeBlockNode | `height, max-height` | `180ms` | `ease` |
|
||||
| MathBlockNode 渲染中 | `opacity` | `200ms` | `ease` |
|
||||
| MermaidBlockNode 容器 | `height` | `150ms` | `ease-out` |
|
||||
| Tooltip 位移 | `transform, box-shadow` | `220ms` | `cubic-bezier(.16,1,.3,1)` |
|
||||
|
||||
### 3.2 Vue Transition 组件
|
||||
|
||||
#### ImageNode — 图片切换
|
||||
|
||||
```
|
||||
名称：img-switch
|
||||
enter: opacity 220ms ease + translateY(6px → 0)
|
||||
leave: opacity 220ms ease + translateY(0 → 6px)
|
||||
```
|
||||
|
||||
#### MathBlockNode — 公式切换
|
||||
|
||||
```
|
||||
名称：math-fade
|
||||
enter: opacity 0.3s ease (0 → 1)
|
||||
leave: opacity 0.3s ease (1 → 0)
|
||||
```
|
||||
|
||||
#### TableNode — 表格淡入
|
||||
|
||||
```
|
||||
名称：table-node-fade
|
||||
enter: opacity 0.18s ease
|
||||
leave: opacity 0.18s ease
|
||||
```
|
||||
|
||||
#### Tooltip — 浮层出入
|
||||
|
||||
```
|
||||
名称：tooltip
|
||||
enter-from: opacity: 0, translateY(-6px) scale(0.98)
|
||||
enter-to: opacity: 1, translateY(0) scale(1)
|
||||
enter-active: opacity 120ms linear
|
||||
leave-active: opacity 120ms linear
|
||||
```
|
||||
|
||||
#### MermaidBlockNode — 弹窗
|
||||
|
||||
```
|
||||
名称：mermaid-dialog
|
||||
enter: opacity 200ms ease + scale(0.98 → 1.0)
|
||||
leave: opacity 200ms ease + scale(1.0 → 0.98)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. 交互反馈
|
||||
|
||||
### 4.1 按钮点击缩放
|
||||
|
||||
| 组件 | 选择器 | 效果 |
|
||||
|---|---|---|
|
||||
| CodeBlockNode | `.code-action-btn:active` | `transform: scale(0.98)` |
|
||||
| MermaidBlockNode | `.mermaid-action-btn:active` | `transform: scale(0.98)` |
|
||||
| AdmonitionNode | `.admonition-toggle` | `focus: outline 2px solid rgba(0,0,0,0.08)` |
|
||||
|
||||
### 4.2 禁用状态
|
||||
|
||||
| 组件 | 效果 |
|
||||
|---|---|
|
||||
| MermaidBlockNode 按钮 | `opacity: 0.5`, `cursor: not-allowed` |
|
||||
|
||||
---
|
||||
|
||||
## 5. 性能优化
|
||||
|
||||
### 5.1 `will-change` 使用
|
||||
|
||||
| 组件 | 元素 | `will-change` 值 |
|
||||
|---|---|---|
|
||||
| InlineCodeNode | `.inline-code-stream-delta` | `opacity` |
|
||||
| LinkNode | `.link-loading-indicator` | `opacity` |
|
||||
|
||||
### 5.2 减少动效偏好
|
||||
|
||||
支持 `prefers-reduced-motion`:
|
||||
|
||||
```css
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.inline-code-stream-delta { animation: none !important }
|
||||
}
|
||||
```
|
||||
|
||||
**组件**：InlineCodeNode, LinkNode
|
||||
|
||||
---
|
||||
|
||||
## 6. 动画时长速查表
|
||||
|
||||
| 速度等级 | 时长 | 用途 |
|
||||
|---|---|---|
|
||||
| 极快 | `120ms` | Tooltip 出入 |
|
||||
| 快速 | `150ms` | Mermaid 容器高度 |
|
||||
| 快速 | `180ms` | 代码块高度、表格淡入 |
|
||||
| 标准 | `200ms` | Mermaid 弹窗、数学公式渲染 |
|
||||
| 标准 | `220ms` | 图片切换、Tooltip 位移 |
|
||||
| 慢速 | `300ms` | 数学公式切换 |
|
||||
| 流式 | `900ms` | 打字机/流式更新淡入 |
|
||||
| 脉冲 | `1600ms` | 链接加载指示器 |
|
||||
|
||||
---
|
||||
|
||||
## 7. 缓动函数速查
|
||||
|
||||
| 缓动 | 用途 |
|
||||
|---|---|
|
||||
| `ease` | 代码块高度、数学公式、图片 |
|
||||
| `ease-out` | Mermaid 容器、打字机淡入 |
|
||||
| `ease-in-out` | 链接脉冲 |
|
||||
| `linear` | Spinner 旋转、Tooltip 透明度 |
|
||||
| `cubic-bezier(.16,1,.3,1)` | Tooltip 位移（弹性过冲） |
|
||||
Reference in New Issue
Block a user