AstroResearch/docs/design.md

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 节点以防止布局凌乱）。
• 色彩微效：中心节点使用亮色光晕，参考文献与被引文献用渐变飞线标出，鼠标滑过产生平滑的高亮微动特效。

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