# Monoco 看板 UI 优化计划

## 1. 设计美学: "Monoco Prism"

为了打造专业、高端且令人惊叹的用户体验，我们将采用 "Monoco Prism" 设计语言。

### 核心原则

- **深度与玻璃感 (Depth & Glass)**: 大量使用玻璃拟态（背景模糊）和层级 z-index 来创造深度。
- **鲜艳渐变 (Vibrant Gradients)**: 在主要操作和强调色中使用微妙但丰富的渐变，避免使用扁平的原色。
- **数据密度 (Data Density)**: 作为开发者工具，优先考虑信息密度，但通过留白和一致的分组保持呼吸感。
- **动效 (Motion)**: 在悬停、聚焦和状态变化时提供微交互。

### 配色方案 (Tailwind 映射)

- **画布 (Canvas)**: `bg-slate-950` (深空)
- **表面 (Surface)**: `bg-slate-900/50` (玻璃黑)
- **边框 (Borders)**: `border-slate-800`
- **主渐变 (Primary Gradient)**: `from-blue-500 to-indigo-600`
- **强调色 (Accents)**:
  - **Epic**: 紫/粉渐变
  - **Feature**: 蓝/青渐变
  - **Chore**: 板岩/灰 (微妙)
  - **Fix**: 红/橙 (警示)

### 排版

- **标题**: Inter, 紧凑字间距 (tracking-tight), 粗体 (font-bold)。
- **等宽字体**: JetBrains Mono 或 Fira Code，用于 ID 和代码片段。

## 2. 可视化: "Issue 神经网络"

我们将用项目状态的“神经网络”可视化来替换/增强简单的列表视图。

### 技术栈

- **库**: `reactflow` (交互式基于节点的图表)。
- **布局**: `dagre` (有向无环图) 用于自动层级布局。

### 节点设计

每个节点 (Issue) 将是一个包含以下内容的自定义 React 组件:

- **头部**: ID + 类型图标 (颜色编码)。
- **主体**: 截断的标题。
- **底部**: 状态徽章 + 进度 (如果适用)。
- **句柄**: 依赖关系的连接点。

### 图表逻辑
