# AstroResearch Design Systems / 设计系统与交互体验

AstroResearch 的前端界面设计坚持“未来科技感与学术沉浸”的理念，结合了现代网页设计的高级质感。

---

## 1. 视觉系统 (Visual Palette)

### 1.1 高对比度浅色纯中文控制台

AstroResearch 前端目前重构并统一为**高对比度浅色纯中文学术控制台**，以确保长久学术检索与对照阅读的沉浸体验：

| 元素 | 背景色 / 边框色 | 主文本色 | 交互按钮与状态指示 | 设计风格 |
| :--- | :--- | :--- | :--- | :--- |
| **主背景** | 纯净冷灰白 (`#f1f5f9`) | 深石板灰/接近纯黑 (`#0f172a`) | 控制台按钮 (`.btn-console` / `.btn-console-primary`) | 扁平极简实边框设计 |
| **卡片/容器** | 纯白背景 (`#ffffff`)，实线灰色边框 (`#e2e8f0`) | 辅助灰 (`#64748b`) | 指示灯：深宝石绿 (就绪) / 灰石色 (未解析) | 微卡片投影效果 |

---

## 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 种高亮配色）。
- **浮动词汇浮屠**：检测到英文正文中含有天文学专业词汇时，自动显示下划线，悬浮可阅读中文释义对照。