[Enhancement] 前端 UI 视觉优化：整体样式与知识图谱展示美化

[koen666]

背景

DeepGraph Dashboard（Flask + web/static/css/style.css + web/static/js/app.js）功能完整，但视觉呈现和图谱交互体验较差，影响日常浏览 taxonomy、探索 research insights 时的观感与可用性。

本 issue 仅关注前端样式与图谱可视化，不涉及流水线运维面板、job 状态追踪等功能性改造。

当前问题

1. 整体 UI 样式偏粗糙

• 布局偏「工具页」感，卡片、Tab、列表信息密度高但层次感弱
• 字体混用（Newsreader serif + Source Sans）但标题/正文/数据区层级不够清晰
• 色彩系统（暖色 #c4704b 为主）单调，Insight 卡片、Badge、表格等组件风格不统一
• Evidence 矩阵（renderMatrix）为原生 HTML table，缺少现代数据表格的视觉 polish
• 移动端/窄屏下 sidebar、graph 区域缩放体验一般

2. Taxonomy 径向图谱（D3）展示太丑

当前 Overview / Explore 使用 renderRadialGraph()（静态径向布局，非 force simulation）：

视觉问题：

• 节点为简单 circle + 硬编码 hex 颜色，缺乏 depth / shadow / hover 动效
• 子节点标签 trunc() 截断严重，长 domain 名几乎不可读
• 连线为直线 + 单一 gradient，层次感和方向感弱
• 节点大小仅按 paper_count 线性缩放，gap/method 信息表达不直观
• Overview 预览图（card-graph-preview）与 Explore 全尺寸图风格一致但空间更小，更显拥挤

交互问题：

• 无 zoom / pan，子节点多时无法细看
• 无 drag 调整布局，点击是唯一交互
• Tooltip 为原生 DOM #tooltip，样式与主 UI 脱节
• 缺少 legend（颜色/大小编码含义）
• Evidence Tab 的 entity/relation 仅为文字列表（graph_summary），没有真正的知识图谱可视化

3. 图谱能力缺口

• /api/taxonomy/<node_id>/graph 已有 entity-relation 数据，但前端未渲染为网络图
• 47k+ entities / 276k+ relations 的数据规模下，缺少分层/聚合/聚焦子图的展示策略
• 与 Insights、Papers 的关联无法在图上直观看到

建议改进方向

P0 — 视觉基础

• 统一 design tokens（spacing、typography scale、shadow、border-radius）
• 重构 card / tab / badge / insight-card 组件样式，提升留白与层次
• Evidence matrix 热力图化或至少改善表头、SOTA 高亮、空 cell 样式
• 响应式：Explore 图谱区在 ≥1280px / ≥768px 下布局合理

P0 — Taxonomy 径向图重设计

• 节点：更好的 label 排版（多行/弧形文字/hover 展开），替代粗暴 trunc
• 边：曲线（bezier）或 bundling，减少交叉
• 交互：zoom + pan（d3.zoom）；hover 高亮邻接节点
• 编码：用 color + size + ring/badge 同时表达 papers / gaps / methods
• 增加图例与当前节点 breadcrumb 的视觉联动

P1 — 知识图谱可视化（Evidence / Entity-Relation）

• 新增 force-directed 或 layered 布局，渲染 /api/taxonomy/<id>/graph 的 top entities/relations
• 支持点击 entity 跳转相关 papers / insights
• 大图谱性能：限制初始节点数、按 degree 采样、渐进展开

P2 — 可选升级

• 考虑引入轻量图表库（如 echarts-graph、sigma.js）或 React 子应用仅负责 graph 区域
• 暗色主题 / 高对比度模式
• Overview 首页 taxonomy 预览改为可交互 mini-map

相关文件

• web/static/css/style.css — 全局样式（~1800 行）
• web/static/js/app.js — renderRadialGraph()（~L701）、renderMatrix()、loadEvidenceForNode()
• web/templates/index.html — #overviewGraphPreview、#exploreGraph SVG 容器
• web/app.py — /api/taxonomy/<id>/graph

验收标准

1. Explore 页 taxonomy 图谱在 10+ 子节点时仍可读、可 zoom，视觉明显优于当前版本
2. 整体 Dashboard 风格统一，Insight 卡片与图谱区域不像两套不同产品
3. Evidence Tab 或 Explore 详情中能看到 entity-relation 网络图（至少 top-N 子图），而非纯文字列表
4. 提供 before/after 截图 PR 描述

非目标（本 issue 不做）

• Auto Research job 进度条、manuscript 状态面板
• Pipeline Control / Provider 运维信息集成
• 后端 API 业务逻辑改造（除非图谱渲染必需）