45 lines
2.3 KiB
Markdown
45 lines
2.3 KiB
Markdown
# AstroResearch Design Systems / 设计系统与交互体验
|
|
|
|
AstroResearch 的前端界面设计坚持“未来科技感与学术沉浸”的理念，结合了现代网页设计的高级质感。
|
|
|
|
---
|
|
|
|
## 1. 视觉系统 (Visual Palette)
|
|
|
|
### 1.1 精致双色主题
|
|
|
|
AstroResearch 完美适配了深色与浅色模式。使用精挑细选的 HSL 柔和色彩代替刺眼的饱和色：
|
|
|
|
| 模式 | 背景色 | 主文本色 | 卡片容器 | 毛玻璃效果 (Glassmorphism) |
|
|
| :--- | :--- | :--- | :--- | :--- |
|
|
| **深色模式** | 深夜极光黑 (`#090d16`) | 纯净雪白 (`#f8fafc`) | 磨砂深灰 (`bg-slate-900/60`) | 边框: `border-slate-800/80`, 模糊: `backdrop-blur-md` |
|
|
| **浅色模式** | 雅致灰石色 (`#f8fafc`) | 深石板色 (`#0f172a`) | 磨砂亮白 (`bg-white/60`) | 边框: `border-slate-200/80`, 模糊: `backdrop-blur-md` |
|
|
|
|
---
|
|
|
|
## 2. 核心交互组件 (Key Interactive Components)
|
|
|
|
### 2.1 引文星系图谱 (Citation Galaxy Map)
|
|
- **底层技术**：完全脱离第三方庞大的 D3/G6 依赖，基于 HTML5 `<canvas>` 开发的自研力导向算法。
|
|
- **物理特性**：支持节点排斥力、中心引力、拖拽阻尼，双击节点可以动态多层级向外衍生（最高限制 50 节点以防止布局凌乱）。
|
|
- **色彩微效**：中心节点使用亮色光晕，参考文献与被引文献用渐变飞线标出，鼠标滑过产生平滑的高亮微动特效。
|
|
|
|
```mermaid
|
|
graph LR
|
|
C((中心文献)) -->|Cites| R1((参考文献 A))
|
|
C -->|Cites| R2((参考文献 B))
|
|
B1((被引文献 X)) -->|Cites| C
|
|
B2((被引文献 Y)) -->|Cites| C
|
|
classDef center fill:#ec4899,stroke:#db2777,stroke-width:2px;
|
|
classDef ref fill:#3b82f6,stroke:#2563eb,stroke-width:1px;
|
|
classDef cite fill:#10b981,stroke:#059669,stroke-width:1px;
|
|
class C center;
|
|
class R1,R2 ref;
|
|
class B1,B2 cite;
|
|
```
|
|
|
|
### 2.2 双分栏阅读器 (Split Reader)
|
|
- **结构化排版**：中英文双栏段落基准对齐，完美融合 `rehype-katex` 数学公式渲染和 `html2md` 图片嵌入。
|
|
- **划词标注与高亮**：鼠标选中阅读器任意段落词句，即刻浮现气泡菜单（支持 4 种高亮配色）。
|
|
- **浮动词汇浮屠**：检测到英文正文中含有天文学专业词汇时，自动显示下划线，悬浮可阅读中文释义对照。
|