# KnowHub 前端精细化设计文档（完整版）

本文档基于 `reference.html` 的视觉风格和交互范式，以及 `knowhub_db/README.md` 中以 **"原子能力 (Atomic Capability)"** 为核心的全新数据库架构，提供**字段级、像素级**的前端设计规范。每一个卡片槽位、每一个 SideDrawer 区段、每一个徽章都可精确追溯至数据库的具体列与格式化规则。

---

## 核心设计理念

1. **高密度信息展示**：采用紧凑布局、合理字号（12px-18px 主体内容）、多列网格，在有限空间内展示最大化的关联信息。
2. **连贯的钻取阅读模式 (SideDrawer)**：摒弃传统的多页面跳转，统一使用右侧滑出式的 `SideDrawer`（宽度 650px）呈现任何实体的完整详情和所有关联关系。
3. **数据驱动的四象限透视**：以 `需求 - 能力 - 工具 - 知识` 四个维度构建标签页，相互通过软关联（JSONB ID 数组）穿透数据孤岛。
4. **全关联可视化**：所有 JSONB 关联字段（implements、source_nodes、三类knowledge等）都在界面中完整展示，支持点击跳转。
5. **字段级映射**：每个 UI 元素都精确映射到数据库表的具体字段，包括数据类型、格式化规则、交互行为。

---

## 全局字体颜色系统

### 文本颜色规范

| 用途 | Tailwind Class | 十六进制 | 使用场景 |
|------|---------------|---------|----------|
| **主标题** | `text-slate-900` | `#0f172a` | 页面标题、卡片主标题、实体名称 |
| **次标题** | `text-slate-700` | `#334155` | 副标题、区段标题 |
| **正文** | `text-slate-600` | `#475569` | 描述文本、详情内容、长文本 |
| **辅助文本** | `text-slate-500` | `#64748b` | 说明文字、提示信息 |
| **次要信息** | `text-slate-400` | `#94a3b8` | 元数据、时间戳、统计数字 |
| **占位符/禁用** | `text-slate-300` | `#cbd5e1` | 占位符、禁用状态、分隔文字 |
| **主题色链接** | `text-indigo-600` | `#4f46e5` | 可点击链接、主操作按钮文字 |
| **主题色悬停** | `text-indigo-700` | `#4338ca` | 链接悬停状态 |
| **成功/已满足** | `text-emerald-600` | `#059669` | 成功状态、已满足需求、可用工具 |
| **警告/部分** | `text-amber-600` | `#d97706` | 警告状态、部分满足、测试中 |
| **错误/未满足** | `text-rose-600` | `#dc2626` | 错误状态、未满足需求、异常工具 |
| **评分/高亮** | `text-amber-500` | `#f59e0b` | 星级评分、重要指标 |

### 字号规范

| 用途 | Tailwind Class | 像素值 | 使用场景 |
|------|---------------|--------|----------|
| **页面主标题** | `text-xl` | `20px` | 页面顶部标题 |
| **卡片标题** | `text-lg` | `18px` | 卡片主标题、实体名称 |
| **正文** | `text-base` | `16px` | 描述文本、详情内容 |
| **次要文本** | `text-sm` | `14px` | 辅助信息、标签文字 |
| **小标签** | `text-xs` | `12px` | 徽章、状态标签、元数据 |
| **微型文字** | `text-[10px]` | `10px` | 图标标注、极小标签 |
| **SideDrawer标题** | `text-2xl` | `24px` | 详情页主标题 |
| **统计数字** | `text-3xl` | `30px` | StatCard 数值 |

### 字重规范

| 用途 | Tailwind Class | 字重值 | 使用场景 |
|------|---------------|--------|----------|
| **超黑体** | `font-black` | `900` | 页面标题、重要数字、强调标题 |
| **粗体** | `font-bold` | `700` | 卡片标题、按钮文字、标签 |
| **中等** | `font-semibold` | `600` | 次要标题、强调文本 |
| **常规** | `font-medium` | `500` | 正文、描述文本 |
| **细体** | `font-normal` | `400` | 辅助文本、长文本阅读 |

---

## 全局导航栏 (Navbar)

### 布局规格

```
┌──────────────────────────────────────────────────────────────────────────────┐
│ [LOGO 🗄️ K-OS]       [Dashboard] [需求库] [能力库] [工具库] [知识库]    🔍 ⚙ │
│   ▲indigo-600          ▲ 激活态底部 indigo bar 2px                  Search  │
│   rounded-xl                                                       w-64    │
│   shadow-lg shadow-indigo-100                                              │
└──────────────────────────────────────────────────────────────────────────────┘
高度: 60px | 背景: bg-white/95 backdrop-blur-md | 边框: border-b border-slate-100
定位: sticky top-0 z-[100]
```

- **Logo 区**：`w-9 h-9` 的 `bg-indigo-600 rounded-xl` 图标容器 + "K-OS" 字样 (`font-black text-lg tracking-tight text-slate-900`)
- **Tab 列表**：Dashboard / 需求库 / 能力库 / 工具库 / 知识库，各自带图标
  - 激活态：`text-indigo-600 font-bold`，底部有 `h-1 bg-indigo-600 rounded-t-full` 指示条
  - 非激活态：`text-slate-500 hover:text-slate-700 font-medium`
  - 图标尺寸：`size={16}`
  - 文字尺寸：`text-sm`
- **搜索框**：`bg-slate-50 rounded-xl py-2 pl-10 pr-4 w-64 text-sm`，聚焦时 `focus:ring-2 ring-indigo-500/20 focus:bg-white`
- **设置按钮**：`h-8 w-8 rounded-xl bg-slate-50 border border-slate-100 text-slate-400 hover:text-indigo-600`

---

## 通用组件设计

### StatCard（统计卡片）— 紧凑版

```
╭───────────────────────────────╮
│ LABEL (10px 加粗灰色大写)  [i]│  ← 图标 p-2.5 rounded-xl
│ VALUE (3xl 超黑体)            │
│ subtext (xs 浅灰色)           │
╰───────────────────────────────╯
背景: bg-white | 内距: p-5 | 圆角: rounded-2xl
边框: border border-slate-100
阴影: shadow-sm
悬停: hover:shadow-md
```

- `label`：`text-[10px] font-bold text-slate-400 uppercase tracking-[0.08em]`
- `value`：`text-3xl font-black tracking-tight`，颜色可自定义
- `subtext`：`text-xs text-slate-400 font-medium`
- 右侧图标：`p-2.5 rounded-xl`，icon `size={18} strokeWidth={2}`

### SideDrawer（侧边抽屉）— 宽版高密度

```
╭════════════════════════════════════════════════ ✖ ══╮
│  {category_label}  (text-[10px] text-slate-300)     │  ← Header 区
│  {title} (text-xl font-black text-slate-900)        │     px-6 py-4
│                                                     │     border-b
│ ──────────────────────────────────────────────────  │
│                                                     │
│  {children — 可滚动区域}                             │  ← Body 区
│  bg-[#FAFBFC]                                       │     px-6 py-5
│  overflow-y-auto                                    │     flex-1
│  space-y-5 (区段间距紧凑)                            │
│                                                     │
│ ──────────────────────────────────────────────────  │
│  [关闭面板]                           [编辑条目]     │  ← Footer 区
│  bg-slate-50 text-sm                bg-indigo-600  │     px-6 py-3
│  rounded-xl                         rounded-xl     │     border-t
╰════════════════════════════════════════════════════╯
宽度: 650px | 定位: fixed inset-y-0 right-0 z-[500]
背景: bg-white shadow-2xl
入场动画: translate-x-full → translate-x-0, 400ms cubic-bezier(0.23,1,0.32,1)
遮罩: bg-slate-900/30 backdrop-blur-sm z-[499], 点击可关闭
```

### SideDrawer 内区段标题规范

每个信息区段使用统一的区段标题样式：
```
─── {SECTION_TITLE} ───────────────────────
text-[10px] font-black text-slate-300 uppercase tracking-[0.15em]
前置 w-6 h-px bg-slate-200 行内装饰线
margin-bottom: 8px
```

### 实体穿透交互规则

所有 SideDrawer 内和卡片内的关联实体标签均为**可点击**元素：
- 点击后关闭当前 SideDrawer，打开对应类型的新 SideDrawer
- 实现跨实体的无缝钻取浏览
- 视觉样式：`cursor-pointer text-indigo-600 hover:text-indigo-700 hover:underline decoration-indigo-300 decoration-1 underline-offset-2`
- 所有可点击实体右侧带 `ChevronRight size={12} text-slate-300` 暗示可跳转

### 关联实体标签（EntityTag）统一样式

用于在卡片和 SideDrawer 中展示关联实体引用，统一复用：

```
[🧠 文生图]  [🔧 Midjourney]  [⚡ 需求名]  [📄 知识名]

样式: inline-flex items-center gap-1 px-2.5 py-1 rounded-lg
      text-xs font-semibold cursor-pointer
      border transition-colors

配色按实体类型:
  能力(cap): bg-amber-50 text-amber-700 border-amber-100 hover:bg-amber-100
  工具(tool): bg-emerald-50 text-emerald-700 border-emerald-100 hover:bg-emerald-100
  需求(req): bg-indigo-50 text-indigo-700 border-indigo-100 hover:bg-indigo-100
  知识(know): bg-violet-50 text-violet-700 border-violet-100 hover:bg-violet-100
```

---

## 1. Dashboard（全局观测板）

### 设计目标
宏观了解系统中能力的沉淀和覆盖情况，同时以**内容拓扑树**为核心，展示每个节点关联的需求、能力、工具、知识的完整链路。

### 页面布局

```
┌───────────────────────────────────────────────────────────────────┐
│  知识图谱全景观测 (text-xl font-black text-slate-900)              │
│  从内容原子节点到工具执行端的全链路覆盖深度分析。(text-sm slate-500)│
├─────────┬─────────┬─────────┬─────────┐                           │
│StatCard │StatCard │StatCard │StatCard │  ← 4列 gap-4 mb-6        │
│原子节点  │需求覆盖 │能力覆盖 │工具覆盖 │                           │
└─────────┴─────────┴─────────┴─────────┘                           │
┌───────────────────────────────────────────────────────────────────┐
│                                                                   │
│  需求内容拓扑树 (Content Topology)                                 │
│  bg-white rounded-2xl border shadow-sm p-8 min-h-[500px]         │
│                                                                   │
│  [理念] ──┬── [商业事件] ──┬── [行业峰会 | 15,541]               │
│           │               └── [融资事件 |  8,539]                 │
│           │                                                       │
│  [现象] ──── [生活状态 | 14,895]                                  │
│                                                                   │
│  每个节点点击后展开下方关联面板 ↓                                   │
│  ╭──────────────────────────────────────────╮                     │
│  │ ⚡ 关联需求: [生成二次元角色封面] [✅已满足]│                     │
│  │ 🧠 关联能力: [AI高精视觉生成] [创意文本]  │                     │
│  │ 🔧 关联工具: [Midjourney] [SDXL] [GPT4o] │                     │
│  │ 📄 关联知识: [角色一致性方案] [脚本拆解]  │                     │
│  ╰──────────────────────────────────────────╯                     │
│                                                                   │
└───────────────────────────────────────────────────────────────────┘
```

### StatCard 数据来源

| 卡片 | label | value | subtext | icon | 数据来源 |
|------|-------|-------|---------|------|----------|
| 原子节点 | "原子节点" | 动态统计 | "活跃叶子节点数" | `Layers` (blue-500) | 前端从 `source_nodes` 树递归计算叶子节点总数 |
| 需求覆盖率 | "需求覆盖率" | `(已满足/总数×100)%` | `"需求数: {total}"` | `Hammer` (indigo-600) | `requirement_table` 全量查询，按 `status="已满足"` 过滤 |
| 能力覆盖率 | "能力覆盖率" | `(Ready/总数×100)%` | `"能力数: {total}"` | `Target` (amber-500) | 判断每个能力的 `tools[]` 关联工具是否全部 `status="可用"` |
| 工具覆盖率 | "工具覆盖率" | `(可用/总数×100)%` | `"已接入: {count}"` | `Wrench` (emerald-500) | `tool_table` 全量查询，按 `status="可用"` 过滤 |

### 内容拓扑树节点

- **数据来源**：`requirement_table.source_nodes` (JSONB 对象数组)
- **构建逻辑**：遍历所有 requirement 的 `source_nodes[]`，提取 `node_name`，按层级关系（可用 `/` 分隔或父子关系）构建树状结构

#### 节点视觉规格

```
╭───────────────────────────────────────╮
│ {node_name}    {posts_count} 权重     │
│ text-sm font-bold text-white          │
│ text-[10px] opacity-70                │
╰───────────────────────────────────────╯
背景: bg-{statusColor}-500 (权重>15000 → opacity-100, 否则 opacity-80)
内距: px-4 py-2.5 rounded-xl
悬停: hover:scale-105 hover:ring-2 ring-{color}-500/30
连线: w-8 h-px bg-slate-200 水平 | w-px bg-slate-200 垂直
```

#### 节点展开面板（关键新增设计）

点击任意节点后，在节点下方/右侧展开一个**关联信息面板**，展示该节点辐射到的所有四类实体：

```
╭──────────────────────────────────────────────────────────────────╮
│  📍 {node_name} 关联实体总览                                     │
│  bg-white rounded-xl border border-slate-100 shadow-md p-4      │
│                                                                  │
│  ⚡ 关联需求 ({N}条):                                            │
│  ┌─────────────────────────────────────────────────────────┐     │
│  │ {req.description}     [✅已满足/🔴未满足]    14,895权重  │→    │
│  │ text-sm text-slate-700  status徽章  text-xs text-slate-400│    │
│  ├─────────────────────────────────────────────────────────┤     │
│  │ {req.description}     [状态徽章]           8,200权重     │→    │
│  └─────────────────────────────────────────────────────────┘     │
│  数据: 筛选 requirement_table where source_nodes[].node_name匹配 │
│  每行可点击 → 打开需求 SideDrawer                                │
│                                                                  │
│  🧠 关联能力 ({N}个):                                            │
│  [AI高精视觉生成] [创意文本自动化] [多模态实时交互]                │
│  数据: 上面需求的 atomics[] → 去重 → 查 atomic_capability.name    │
│  每个为 EntityTag(cap) 可点击 → 打开能力 SideDrawer              │
│                                                                  │
│  🔧 关联工具 ({N}个):                                            │
│  [Midjourney v6.0 🟢] [SDXL 1.0 🔴] [GPT-4o 🟢] [ElevenLabs]  │
│  数据: 上面能力的 tools[] → 去重 → 查 tool_table.name+status     │
│  每个为 EntityTag(tool) 可点击 → 打开工具 SideDrawer             │
│  带 status 色点: 可用→emerald, 异常→rose, 未接入→slate           │
│                                                                  │
│  📄 关联知识 ({N}条):                                            │
│  [角色一致性控制方案 #用例] [5分钟爆款脚本拆解 #工序]             │
│  数据: 上面能力的 source_knowledge[] → 去重 → 查 knowledge.task   │
│  每个为 EntityTag(know) 可点击 → 打开知识 SideDrawer             │
│                                                                  │
╰──────────────────────────────────────────────────────────────────╯
```

**关联链路推导路径**:
```
node_name  →  requirement_table (筛选 source_nodes[].node_name)
           →  requirement.atomics[] → atomic_capability
           →  capability.tools[] → tool_table
           →  capability.source_knowledge[] → knowledge
```

### 节点 SideDrawer 详情（drawerType='node'）

```
╭════════════════════════════════════════════════ ✖ ══╮
│  节点观测报告                                       │
│  {node_name} (text-xl font-black text-slate-900)    │
├─────────────────────────────────────────────────────┤
│                                                     │
│  ① 权重统计暗色卡片                                 │
│  ╭───────────────────────────────────────────╮      │
│  │  bg-slate-900 rounded-2xl p-6 text-white  │      │
│  │                                           │      │
│  │  TOTAL NODE WEIGHT                        │      │
│  │  {posts_count} (text-4xl font-black白色)  │      │
│  │  来源帖子数 (text-xs opacity-50)           │      │
│  │  数据: source_nodes[].posts.length         │      │
│  ╰───────────────────────────────────────────╯      │
│                                                     │
│  ② 关联需求列表 (完整版)                             │
│  ─── COVERAGE REQUIREMENTS ({N}条) ────             │
│                                                     │
│  遍历 requirement_table，筛选:                       │
│  source_nodes[].node_name == 当前节点名              │
│                                                     │
│  ╭───────────────────────────────────────────╮      │
│  │ {req.description}                        →│      │
│  │ text-sm font-bold text-slate-700          │      │
│  │                                           │      │
│  │ [{status}] 徽章  热度:{posts数}            │      │
│  │ text-xs                                   │      │
│  │                                           │      │
│  │ 关联能力: [🧠cap1] [🧠cap2]               │      │
│  │ 数据: req.atomics[] → 查cap.name           │      │
│  │ EntityTag(cap) 可点击                      │      │
│  ╰───────────────────────────────────────────╯      │
│  bg-white p-4 rounded-xl border border-slate-100   │
│  hover:border-indigo-200 cursor-pointer             │
│  点击行 → 打开需求 SideDrawer                       │
│  space-y-3 间距                                     │
│                                                     │
│  ③ 汇总关联能力                                     │
│  ─── AGGREGATED CAPABILITIES ({N}个) ────           │
│  [🧠 AI高精视觉生成] [🧠 创意文本自动化] ...        │
│  EntityTag(cap) 横排 flex-wrap gap-2                │
│                                                     │
│  ④ 汇总关联工具                                     │
│  ─── AGGREGATED TOOLS ({N}个) ────                  │
│  [🔧 Midjourney 🟢] [🔧 SDXL 🔴] ...              │
│  EntityTag(tool) 横排 flex-wrap gap-2               │
│                                                     │
╰═════════════════════════════════════════════════════╯
```

---

## 2. 需求库 (Requirement Library)

### 设计目标
展现前端业务需求（`requirement_table`）的落地情况，每条需求直接展示关联的能力、来源节点和满足状态。

### 页面布局

```
┌───────────────────────────────────────────────────────────────────┐
│  制作需求完备性分析 (text-xl font-black text-slate-900)            │
│  汇总原子能力 Pattern 对应的需求，按权重或满足度排序。(text-sm)    │
├────────┬────────┬────────┬────────┐                               │
│StatCard│StatCard│StatCard│StatCard│  ← 4列 gap-4 mb-6            │
│需求总数│满足率  │使用能力│能力覆盖│                               │
└────────┴────────┴────────┴────────┘                               │
┌───────────────────────────────────────────────────────────────────┐
│  Requirement Matrix (text-lg font-black text-slate-900 italic)   │
│  ┌─────────────────────────────────────────────────────────┐     │
│  │ [WEIGHT SORT ↕] [STATUS SORT ↕]                         │     │
│  ├─────────────────────────────────────────────────────────┤     │
│  │ 需求行 1 (含关联能力标签和来源节点)                      │     │
│  │ 需求行 2                                                │     │
│  │ ...                                                     │     │
│  └─────────────────────────────────────────────────────────┘     │
└───────────────────────────────────────────────────────────────────┘
容器: bg-white rounded-2xl border border-slate-100 shadow-sm
```

### StatCard 数据来源

| 卡片 | label | value | subtext | icon | 数据来源 |
|------|-------|-------|---------|------|----------|
| 需求总数 | "需求总数" | `count()` | "活跃制作需求" | `Hammer` (indigo) | `GET /api/requirements` → `.length` |
| 需求满足率 | "需求满足率" | `(status='已满足'/总数×100)%` | "已闭环占比" | `CheckCircle2` (indigo) | 按 `status` 过滤计算 |
| 使用能力数 | "使用能力数" | 去重 `atomics[]` 总数 | "被激活原子能力" | `Target` (amber) | `new Set(flatMap(r=>r.atomics)).size` |
| 能力覆盖率 | "能力覆盖率" | `(被引用/总数×100)%` | "能力库利用率" | `Activity` (amber) | 被引用能力数 / `atomic_capability.count()` |

### 需求列表行（Requirement Row）— 高密度版

```
╭──────────────────────────────────────────────────────────────────────╮
│ ●  {description}                                     [{status}]  → │
│    text-sm font-bold text-slate-900                   状态徽章      │
│                                                                    │
│    🎯 关联能力: [🧠 AI高精视觉生成] [🧠 创意文本自动化]              │
│    EntityTag(cap) 横排 可点击                                       │
│    数据: atomics[] → 查 atomic_capability.name                      │
│                                                                    │
│    📍 来源节点: [行业峰会 15,541] [生活状态 14,895]                  │
│    节点标签 横排 bg-slate-50 text-slate-600 text-xs rounded-lg      │
│    数据: source_nodes[] → node_name + posts.length                  │
│                                                                    │
│    📊 热度总权重: 15,541    🧠 关联能力: 2个                        │
│    text-xs text-slate-400 font-medium                              │
╰──────────────────────────────────────────────────────────────────────╯
行内距: px-6 py-4 | 悬停: hover:bg-indigo-50/30 | 分隔: divide-y divide-slate-50
```

#### 字段精确映射

| UI 位置 | 数据字段 | 类型 | 格式化规则 |
|---------|----------|------|-----------|
| **状态圆点** | `requirement_table.status` | VARCHAR | `"已满足"` → `bg-emerald-500`; `"未满足"` → `bg-rose-500`; `w-3 h-3 rounded-full` |
| **主标题** | `requirement_table.description` | TEXT | `text-sm font-bold text-slate-900` |
| **关联能力标签** | `requirement_table.atomics` | JSONB[] | 遍历 → 查 `atomic_capability.name`，展示为 EntityTag(cap)，可点击跳转 |
| **来源节点** | `requirement_table.source_nodes` | JSONB[] | 遍历每项 `{node_name, posts[]}`，展示为 `"{node_name} {posts.length}"` 标签 |
| **热度权重** | `source_nodes` 衍生 | — | 遍历累加每项 `posts.length`，格式 `toLocaleString()` |
| **状态徽章** | `requirement_table.status` | VARCHAR | `"已满足"` → `bg-emerald-50 text-emerald-600 border-emerald-100`; `"未满足"` → `bg-rose-50 text-rose-600 border-rose-100`; `px-3 py-1 rounded-lg text-xs font-bold` |

#### 排序逻辑

- **WEIGHT SORT**：按 `source_nodes[]` 各项 `posts.length` 总和升/降序
- **STATUS SORT**：`"已满足"` = 1, `"未满足"` = 0
- 排序按钮：`px-4 py-2 bg-slate-50 text-xs font-bold text-slate-600 rounded-xl hover:bg-indigo-600 hover:text-white`

### 需求 SideDrawer 详情（drawerType='req'）

```
╭════════════════════════════════════════════════ ✖ ══╮
│  制作需求分析                                       │
│  {description} (text-xl font-black text-slate-900)  │
├─────────────────────────────────────────────────────┤
│                                                     │
│  ① 状态展示区                                       │
│  ╭───────────────────────────────────────────╮      │
│  │  bg-{statusColor}-50 border-{color}-100   │      │
│  │  rounded-xl p-5                           │      │
│  │                                           │      │
│  │  REQUIREMENT STATUS                       │      │
│  │  text-[10px] font-bold text-{color}-600   │      │
│  │  uppercase tracking-[0.1em]               │      │
│  │                                           │      │
│  │  {status} (text-2xl font-black)           │      │
│  │  字段: requirement_table.status            │      │
│  │  "已满足" → emerald色系                    │      │
│  │  "未满足" → rose色系                       │      │
│  ╰───────────────────────────────────────────╯      │
│                                                     │
│  ② 匹配分析结果 (Match Analysis)                    │
│  ─── MATCH ANALYSIS & ACTION PLAN ────              │
│  ╭───────────────────────────────────────────╮      │
│  │  bg-white rounded-xl border p-5           │      │
│  │  border-slate-100 shadow-sm               │      │
│  │                                           │      │
│  │  [⚠ AlertCircle] 左上角图标                │      │
│  │  bg-amber-500 text-white p-2 rounded-lg   │      │
│  │                                           │      │
│  │  "{match_result}"                         │      │
│  │  字段: requirement_table.match_result      │      │
│  │  样式: text-sm text-slate-600              │      │
│  │        leading-relaxed                    │      │
│  │        font-serif italic                  │      │
│  │  用引号包裹的引用格式                      │      │
│  │                                           │      │
│  │  示例: "通过 Midjourney + ComfyUI 组合     │      │
│  │  可满足，但中文提示词支持不足，需调研       │      │
│  │  替代方案"                                │      │
│  ╰───────────────────────────────────────────╯      │
│                                                     │
│  ③ 关联的原子能力 (Associated Atomics)               │
│  ─── ASSOCIATED ATOMICS ({N}个) ────                │
│                                                     │
│  数据: requirement_table.atomics (JSONB[])           │
│  每个 ID → 查 atomic_capability 获取完整信息         │
│                                                     │
│  每条展示为信息丰富的小卡片（而非仅标签）:            │
│  ╭───────────────────────────────────────────╮      │
│  │ 🧠 {cap.name}               [{Ready?}]  →│      │
│  │ text-sm font-bold text-slate-900          │      │
│  │                                           │      │
│  │ {cap.description}                         │      │
│  │ text-xs text-slate-500 line-clamp-1       │      │
│  │                                           │      │
│  │ 评估标准: "{cap.criterion}"               │      │
│  │ text-xs text-amber-600 italic             │      │
│  │                                           │      │
│  │ 实现工具: [🔧 Midjourney] [🔧 SDXL]      │      │
│  │ 数据: cap.tools[] → 查 tool_table.name    │      │
│  │ EntityTag(tool) 横排可点击                 │      │
│  │                                           │      │
│  │ 知识支撑: {cap.source_knowledge.length}条  │      │
│  │ text-xs text-slate-400                    │      │
│  ╰───────────────────────────────────────────╯      │
│  bg-white p-4 rounded-xl border border-slate-100   │
│  hover:border-indigo-200 hover:shadow-sm            │
│  cursor-pointer space-y-3 间距                      │
│  点击卡片整体 → 打开能力 SideDrawer                 │
│                                                     │
│  ④ 数据来源节点 (Source Nodes)                      │
│  ─── SOURCE NODES ({N}个) ────                      │
│                                                     │
│  数据: requirement_table.source_nodes (JSONB[])      │
│  结构: [{node_name: string, posts: string[]}]       │
│                                                     │
│  每项展示为:                                         │
│  ╭───────────────────────────────────────────╮      │
│  │ 📍 {node_name}                            │      │
│  │ text-sm font-bold text-slate-700          │      │
│  │                                           │      │
│  │ 热度权重: {posts.length} 篇关联帖子        │      │
│  │ text-xs text-slate-500                    │      │
│  │                                           │      │
│  │ 帖子 ID 列表 (折叠/展开):                  │      │
│  │ [post-001] [post-002] [post-003] ...      │      │
│  │ text-[10px] text-slate-400 font-mono      │      │
│  │ 默认折叠，点击"展开全部"显示完整列表       │      │
│  ╰───────────────────────────────────────────╯      │
│  bg-slate-50 p-4 rounded-xl border border-slate-100│
│  space-y-3 间距                                     │
│                                                     │
│  ⑤ 操作按钮区                                       │
│  [🎯 Align Capabilities (flex-1 bg-indigo-600)]     │
│  [🔗 Share (w-10 h-10 bg-white)]                    │
│  text-sm font-bold rounded-xl                       │
│                                                     │
╰═════════════════════════════════════════════════════╯
```

---

## 3. 能力库 (Capability Library) — 系统核心

### 设计目标
原子能力表（`atomic_capability`）的展现和操作大盘。

### 页面布局

```
┌─────────────────────────────────────────────────────────────────────┐
│  制作能力分布分析                                                    │
│  能力实现率：当某一能力关联的所有工具都已接入并可用时，              │
│  该能力定义为"Ready"。                                              │
├─────────────────────────┬─────────────────────────┐                 │
│ StatCard                │ StatCard                │  ← 2列网格      │
│ 原子能力总数             │ 能力实现率               │                 │
└─────────────────────────┴─────────────────────────┘                 │
┌──────────────────────────────┬──────────────────────────────┐       │
│  能力卡片 1                   │  能力卡片 2                   │       │
│                              │                              │       │
├──────────────────────────────┼──────────────────────────────┤       │
│  能力卡片 3                   │  能力卡片 4                   │       │
│                              │                              │       │
└──────────────────────────────┴──────────────────────────────┘       │
网格: grid-cols-1 lg:grid-cols-2 gap-10
```

### StatCard 数据来源（能力库页头）

| 卡片 | label | value | subtext | icon | 数据来源 |
|------|-------|-------|---------|------|----------|
| 原子能力总数 | "原子能力总数" | `atomic_capability.count()` | "已定义核心能力" | `Target` (amber) | `GET /api/atomic_capabilities` → `.length` |
| 能力实现率 | "能力实现率" | `(Ready数/总数*100)%` | "工具链闭环的能力占比" | `ShieldCheck` (emerald) | 判断逻辑：遍历每个能力的 `tools[]`，查找对应 `tool_table` 记录，若所有关联工具 `status="可用"` 则 Ready |

### 能力网格卡片 (Capability Card)

```
╭────────────────────────────────────────────────────────────╮
│                                                            │
│  [🧠 Cpu图标]                    [状态徽章]                │
│  bg-slate-50 p-4                  px-5 py-2 rounded-2xl    │
│  rounded-3xl                      text-[10px] font-black   │
│  hover → bg-indigo-600            uppercase tracking-[0.2em]│
│  hover → text-white                                        │
│                                                            │
│  {name}                                                    │
│  字段: atomic_capability.name (VARCHAR)                     │
│  样式: text-3xl font-black text-slate-800                   │
│  hover → text-indigo-600                                    │
│                                                            │
│  {description}                                             │
│  字段: atomic_capability.description (TEXT)                  │
│  样式: text-base text-slate-400 leading-relaxed line-clamp-2│
│  最多显示2行，超出省略                                      │
│                                                            │
│  ─────────────── (mt-auto pt-8 border-t) ───────────────  │
│                                                            │
│  [工具头像组]                   [📚 N Knowledge Links]     │
│  取自 tools[] 关联的             source_knowledge.length    │
│  tool_table.name 首字母          bg-slate-50 px-5 py-2     │
│  最多展示3个，多余+N More        rounded-2xl text-[10px]   │
│                                                            │
╰────────────────────────────────────────────────────────────╯
容器: bg-white p-12 rounded-[3.5rem] border border-slate-100
悬停: hover:shadow-2xl
高度: min-h-[350px] flex flex-col
右侧状态条: absolute top-0 right-0 w-6 h-full bg-{color}-500 opacity-20
```

#### 字段精确映射

| UI 位置 | 数据字段 | 类型 | 格式化规则 |
|---------|----------|------|-----------|
| **图标** | 固定 | — | `Cpu` 图标，`size={32}` |
| **状态徽章** | 动态计算 | — | 判断逻辑：`tools[]` 关联的所有 `tool_table.status` 是否全部为 `"可用"`。全满足 → `"Capability Fully Ready"` (emerald); 否则 → `"Development In Progress"` (slate) |
| **能力名称** | `atomic_capability.name` | VARCHAR | `text-3xl font-black` |
| **能力描述** | `atomic_capability.description` | TEXT | `text-base text-slate-400 line-clamp-2`，最多2行 |
| **工具头像组** | `atomic_capability.tools` | JSONB[] | 遍历 `tools[]`，查询 `tool_table.name` 取首字母显示为头像。每个头像 `w-12 h-12 rounded-2xl bg-white border-4 border-slate-50 shadow-lg`。最多3个，超出 `+{N} More` |
| **知识链接数** | `atomic_capability.source_knowledge` | JSONB[] | 取 `.length`，展示为 `"{N} Knowledge Links"` |
| **右侧状态条** | 动态计算 | — | Ready → `bg-emerald-500 opacity-20`; 否则 → `bg-slate-500 opacity-20` |

### 能力 SideDrawer 详情（drawerType='cap'）

```
╭═══════════════════════════════════════════════════ ✖ ═══╮
│                                                          │
│  Observation & Analytics                                 │
│  原子能力蓝图 Capability                                  │
│                                                          │
│ ────────────────────────────────────────────────────── │
│                                                          │
│  ① 能力标题区                                             │
│  ─────────────                                           │
│  [ATOMIC CAPABILITY] (浅色小字 10px uppercase)            │
│  {name}                                                  │
│  字段: atomic_capability.name (VARCHAR)                    │
│  样式: text-5xl font-black text-slate-800 tracking-tighter│
│                                                          │
│  ② 能力描述                                               │
│  ─────────                                               │
│  {description}                                           │
│  字段: atomic_capability.description (TEXT)                │
│  样式: text-lg text-slate-500 leading-relaxed             │
│                                                          │
│  ③ 核心评估标准 (Criterion)                               │
│  ╭──────────────────────────────────────────────╮        │
│  │  bg-amber-50 border border-amber-100 p-8     │        │
│  │  rounded-[2.5rem] shadow-sm                   │        │
│  │                                              │        │
│  │  🎯 CORE CRITERION                           │        │
│  │  (text-[10px] font-black text-amber-600       │        │
│  │   uppercase tracking-[0.2em])                 │        │
│  │                                              │        │
│  │  "{criterion}"                               │        │
│  │  字段: atomic_capability.criterion (TEXT)      │        │
│  │  样式: text-lg font-black text-amber-800       │        │
│  │        leading-relaxed                        │        │
│  │  示例: "构图准确度 > 90%, 角色特征保持率 >      │        │
│  │        85%, 出图无变形"                        │        │
│  ╰──────────────────────────────────────────────╯        │
│                                                          │
│  ④ 下发工具执行链 (Implements Detail)                     │
│  ─── Implements Detail ───                               │
│                                                          │
│  数据源: atomic_capability.implements (JSONB{})           │
│  结构: { tool_name: description_string, ... }            │
│                                                          │
│  遍历 implements 对象的每个 key-value:                     │
│                                                          │
│  ╭────────────────────────────────────────────╮          │
│  │  ⚙️ {key} (即 tool_table.name)            │          │
│  │  样式: text-xl font-black text-slate-800   │          │
│  │  可点击 → 打开工具 SideDrawer               │          │
│  │                                            │          │
│  │  > {value} (即实现描述)                     │          │
│  │  样式: text-base text-slate-500             │          │
│  │        leading-relaxed pl-6                │          │
│  │        border-l-4 border-indigo-200         │          │
│  │                                            │          │
│  │  示例:                                     │          │
│  │  ⚙️ Midjourney                             │          │
│  │  > 通过 /imagine 命令生成图像，效果优秀     │          │
│  │    但不支持中文提示词。                     │          │
│  │                                            │          │
│  │  ⚙️ Stable Diffusion XL                    │          │
│  │  > 开源生态最丰富的图像生成引擎，支持       │          │
│  │    本地部署，显卡显存需>16G。               │          │
│  ╰────────────────────────────────────────────╯          │
│  容器: bg-white p-10 rounded-[3rem]                       │
│        border border-slate-100 shadow-sm                  │
│  每个工具项之间: 16px 间距 (space-y-4)                     │
│                                                          │
│  ⑤ 辐射的需求矩阵 (Requirements)                         │
│  ─── Requirements ───                                    │
│                                                          │
│  数据源: atomic_capability.requirements (JSONB[])         │
│  对每个 ID 查询 requirement_table 获取完整信息             │
│                                                          │
│  每条展示为可点击条目:                                     │
│  ╭────────────────────────────────────────────╮          │
│  │ ⚡ [需求] {req.description}               │→         │
│  │ [{req.status}] 徽章                        │          │
│  │ bg-white p-6 rounded-[2rem] border          │          │
│  │ border-slate-100 hover:border-indigo-200     │          │
│  │ hover:shadow-lg cursor-pointer              │          │
│  ╰────────────────────────────────────────────╯          │
│  点击 → 打开需求 SideDrawer (drawerType='req')            │
│                                                          │
│  ⑥ 支撑该能力的知识沉淀 (Source Knowledge)                │
│  ─── Source Knowledge ───                                │
│                                                          │
│  数据源: atomic_capability.source_knowledge (JSONB[])     │
│  对每个 ID 查询 knowledge 表获取 task 和 types             │
│                                                          │
│  每条展示为:                                              │
│  ╭────────────────────────────────────────────╮          │
│  │ 🔗 [{types 首项}] {knowledge.task}         │          │
│  │    (#{knowledge.id 尾部片段})               │          │
│  │                                            │          │
│  │ bg-slate-50 p-5 rounded-2xl border          │          │
│  │ border-slate-100                            │          │
│  │ hover:bg-indigo-50 cursor-pointer           │          │
│  │                                            │          │
│  │ types 用 tag 呈现:                          │          │
│  │ knowledge.types[] → 多色独立小标签          │          │
│  │ 工序→blue 用例→purple 工具→emerald          │          │
│  │ 经验→amber 定义→slate User Profile→rose     │          │
│  ╰────────────────────────────────────────────╯          │
│  点击 → 打开知识 SideDrawer (drawerType='know')           │
│                                                          │
╰══════════════════════════════════════════════════════════╯
```

---

## 4. 工具库 (Tool Library)

### 设计目标
展示系统中可利用的工具集（`tool_table`）。

### 页面布局

```
┌─────────────────────────────────────────────────────────────────────┐
│  工具资源完备性分析                                                  │
│  工具成熟度：成功案例数量达到 10 份以上即定义为"Mature"。             │
├──────────┬──────────┬──────────┐                                    │
│ StatCard │ StatCard │ StatCard │  ← 3列网格 gap-6                   │
│ 工具总数 │ 工具可用 │ 工具成熟 │                                    │
└──────────┴──────────┴──────────┘                                    │
┌─────────────────┬─────────────────┬─────────────────┐               │
│  工具卡片 1      │  工具卡片 2      │  工具卡片 3      │               │
├─────────────────┼─────────────────┼─────────────────┤               │
│  工具卡片 4      │  工具卡片 5      │  ...            │               │
└─────────────────┴─────────────────┴─────────────────┘               │
网格: grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10
```

### StatCard 数据来源（工具库页头）

| 卡片 | label | value | subtext | icon | 数据来源 |
|------|-------|-------|---------|------|----------|
| 工具总数 | "工具总数" | `tool_table.count()` | "活跃工具库总计" | `Wrench` (indigo) | `GET /api/tools` → `.length` |
| 工具可用率 | "工具可用率" | `(status='可用'的数量/总数*100)%` | "已接入/总数" | `Globe` (indigo) | 按 `tool_table.status` 过滤计算 |
| 工具成熟度 | "工具成熟度" | `(case知识>10的工具数/总数*100)%` | "案例充足(>10)/总数" | `Zap` (amber) | 按 `tool_table.case_knowledge.length > 10` 过滤计算 |

### 工具扁平卡片 (Tool Card)

```
╭────────────────────────────────────────────────────────────╮
│                                                            │
│  [🔧 Wrench图标]                         [状态徽章]        │
│  w-16 h-16 bg-slate-50                    接入状态          │
│  rounded-[1.5rem]                         px-4 py-2        │
│  hover → bg-indigo-600                    rounded-2xl      │
│  hover → text-white                       text-[10px]      │
│                                                            │
│  {name}  {version}                                         │
│  ▲        ▲                                                │
│  2xl      sm text-slate-200 ml-2                           │
│  font-black                                                │
│  字段: tool_table.name    tool_table.version                │
│                                                            │
│  {introduction}                                            │
│  字段: tool_table.introduction (TEXT)                       │
│  样式: text-base text-slate-400 leading-relaxed            │
│        line-clamp-2 min-h-[50px]                           │
│                                                            │
│  ─── (mt-auto) ──────────────────────────────────────────  │
│                                                            │
│  ✅ CASE STUDY                     {cases} FILES [MATURE]  │
│  text-[10px] font-black            text-xs font-black      │
│  text-slate-300 uppercase          >10 → text-emerald-500  │
│                                                            │
│  [████████████████████░░░░░░] ← 进度条                     │
│  h-2.5 bg-slate-50 rounded-full                            │
│  内部: bg-emerald-500 或 bg-indigo-500                      │
│  宽度: Math.min((cases/30)*100, 100)%                      │
│                                                            │
╰────────────────────────────────────────────────────────────╯
容器: bg-white border border-slate-100 rounded-[3rem] p-12
悬停: hover:shadow-2xl hover:border-indigo-100
高度: flex flex-col
```

#### 字段精确映射

| UI 位置 | 数据字段 | 类型 | 格式化规则 |
|---------|----------|------|-----------|
| **图标** | 固定 | — | `Wrench` 图标，`size={32} strokeWidth={2.5}` |
| **状态徽章** | `tool_table.status` | VARCHAR | `"可用"` → `bg-emerald-50 text-emerald-600 border-emerald-100 shadow-sm shadow-emerald-100`; `"未接入"` / `"异常"` → `bg-rose-50 text-rose-600 border-rose-100` |
| **工具名称** | `tool_table.name` | VARCHAR | `text-2xl font-black text-slate-800` |
| **版本号** | `tool_table.version` | VARCHAR | `text-sm font-medium text-slate-200 ml-2` |
| **功能介绍** | `tool_table.introduction` | TEXT | `text-base text-slate-400 line-clamp-2 min-h-[50px]` |
| **案例数** | `tool_table.case_knowledge` | JSONB[] | 取 `.length`，展示为 "{N} FILES"。若 `> 10` 追加 `"✨ MATURE"` (text-emerald-500) |
| **进度条** | `tool_table.case_knowledge.length` | JSONB[] | 宽度比例 `Math.min((length/30)*100, 100)%`。`> 10` 用 `bg-emerald-500`，否则 `bg-indigo-500`。带 `shadow-[0_0_10px_rgba(79,70,229,0.3)]` |

### 工具 SideDrawer 详情（drawerType='tool'）

```
╭═══════════════════════════════════════════════════ ✖ ═══╮
│                                                          │
│  Observation & Analytics                                 │
│  工具技术规格 Tool Spec                                   │
│                                                          │
│ ────────────────────────────────────────────────────── │
│                                                          │
│  ① 工具标题 + 版本号                                      │
│  ─────────────────                                       │
│  {name}                          [{version}]             │
│  字段: tool_table.name           tool_table.version       │
│  样式: text-5xl font-black       bg-indigo-50 px-6 py-3  │
│        text-slate-800            rounded-2xl font-black   │
│        tracking-tighter          text-indigo-600 text-sm  │
│                                  uppercase border         │
│                                  border-indigo-100        │
│                                                          │
│  ② 暗色数据概览卡片                                       │
│  ╭──────────────────────────────────────────────╮        │
│  │  bg-slate-900 p-10 rounded-[3.5rem]          │        │
│  │  text-white shadow-2xl                        │        │
│  │  装饰圆: absolute bottom-0 right-0            │        │
│  │  w-64 h-64 bg-white/5 rounded-full           │        │
│  │                                              │        │
│  │  ┌──────────────┬──────────────┐             │        │
│  │  │ MATURITY     │ SERVICE      │             │        │
│  │  │ CASES        │ HEALTH       │             │        │
│  │  │              │              │             │        │
│  │  │ {cases}      │ {status}     │             │        │
│  │  │ 字段:        │ 字段:        │             │        │
│  │  │ case_        │ tool_table   │             │        │
│  │  │ knowledge    │ .status      │             │        │
│  │  │ .length      │              │             │        │
│  │  │ text-5xl     │ text-5xl     │             │        │
│  │  │ font-black   │ font-black   │             │        │
│  │  │              │ "可用"→      │             │        │
│  │  │              │ emerald-400  │             │        │
│  │  │              │ "异常"→      │             │        │
│  │  │              │ rose-400     │             │        │
│  │  └──────────────┴──────────────┘             │        │
│  │                                              │        │
│  │  成熟度定义说明 (italic, border-l-4           │        │
│  │  border-indigo-500 pl-6 text-sm text-slate-400)│       │
│  ╰──────────────────────────────────────────────╯        │
│                                                          │
│  ③ 图谱知识分布 (Knowledge Breakdown)                     │
│  ─── Knowledge Breakdown ───                             │
│                                                          │
│  三张横排计分卡 (grid-cols-3 gap-6):                       │
│                                                          │
│  ╭──────────╮  ╭──────────╮  ╭──────────╮               │
│  │ 工具知识  │  │ 工序知识  │  │ 实操案例  │               │
│  │ TOOL      │  │ PROCESS  │  │ CASE     │               │
│  │ KNOWLEDGE │  │ KNOWLEDGE│  │ KNOWLEDGE│               │
│  │           │  │          │  │          │               │
│  │ {count}   │  │ {count}  │  │ {count}  │               │
│  │ 字段:     │  │ 字段:    │  │ 字段:    │               │
│  │ tool_     │  │ process_ │  │ case_    │               │
│  │ knowledge │  │ knowledge│  │ knowledge│               │
│  │ .length   │  │ .length  │  │ .length  │               │
│  │           │  │          │  │          │               │
│  │ text-3xl  │  │ text-3xl │  │ text-3xl │               │
│  │ font-black│  │ font-black│ │ font-black│              │
│  ╰──────────╯  ╰──────────╯  ╰──────────╯               │
│  bg-white p-8 rounded-[2rem] border                       │
│  border-slate-100 shadow-sm text-center                   │
│  每张卡的标签色:                                           │
│  工具知识 → indigo  工序知识 → amber  案例 → emerald       │
│                                                          │
│  ④ 详细技术指标 (Technical Specification)                  │
│  ─── Technical Specification ───                         │
│                                                          │
│  双列网格 (grid-cols-2 gap-6):                             │
│                                                          │
│  ╭──────────────────╮  ╭──────────────────╮              │
│  │ INPUT FORMAT      │  │ OUTPUT FORMAT     │              │
│  │ text-[10px]       │  │ text-[10px]       │              │
│  │ font-black        │  │ font-black        │              │
│  │ text-slate-300    │  │ text-slate-300    │              │
│  │ uppercase         │  │ uppercase         │              │
│  │                  │  │                  │              │
│  │ {input}          │  │ {output}         │              │
│  │ 字段:            │  │ 字段:            │              │
│  │ tool_table.input │  │ tool_table.output│              │
│  │ (JSONB)          │  │ (JSONB)          │              │
│  │ text-base        │  │ text-base        │              │
│  │ font-black       │  │ font-black       │              │
│  │ text-slate-800   │  │ text-slate-800   │              │
│  ╰──────────────────╯  ╰──────────────────╯              │
│  bg-white border border-slate-100 p-8 rounded-[2.5rem]   │
│  shadow-sm hover:shadow-xl                                │
│                                                          │
│  ⑤ 操作向导 (Operational Tutorial)                        │
│  ╭──────────────────────────────────────────────╮        │
│  │  bg-white border border-slate-100 p-10       │        │
│  │  rounded-[3rem] shadow-sm                     │        │
│  │                                              │        │
│  │  💬 OPERATIONAL TUTORIAL                     │        │
│  │  MessageSquare icon text-indigo-400           │        │
│  │                                              │        │
│  │  {tutorial}                                  │        │
│  │  字段: tool_table.tutorial (TEXT)              │        │
│  │  样式: text-lg text-slate-600 leading-relaxed │        │
│  │        font-serif text-justify                │        │
│  │  若内容含代码片段，使用 <code> 高亮            │        │
│  ╰──────────────────────────────────────────────╯        │
│                                                          │
│  ⑥ 驱动的能力 (Capabilities)                              │
│  ─── Driven Capabilities ───                             │
│                                                          │
│  数据源: tool_table.capabilities (JSONB[])                │
│  对每个 ID 查询 atomic_capability.name                    │
│                                                          │
│  横排标签组:                                               │
│  [{cap.name}] [{cap.name}] ...                           │
│  bg-amber-50 px-5 py-2 rounded-2xl text-amber-700        │
│  text-[10px] font-black uppercase                        │
│  border border-amber-100                                  │
│  hover:bg-amber-100 cursor-pointer                       │
│  点击 → 打开能力 SideDrawer (drawerType='cap')            │
│                                                          │
│  ⑦ 知识条目详情                                           │
│  ─── Associated Knowledge ───                            │
│                                                          │
│  分三组展示（各组用折叠展开）:                              │
│                                                          │
│  📘 工具知识 (tool_knowledge):                            │
│  遍历 tool_table.tool_knowledge (JSONB[])                 │
│  每项查 knowledge.task 展示任务名                          │
│                                                          │
│  📗 工序知识 (process_knowledge):                         │
│  遍历 tool_table.process_knowledge (JSONB[])              │
│  每项查 knowledge.task 展示任务名                          │
│                                                          │
│  📕 案例知识 (case_knowledge):                            │
│  遍历 tool_table.case_knowledge (JSONB[])                 │
│  每项查 knowledge.task 展示任务名                          │
│                                                          │
│  每条展示为可点击条目:                                     │
│  ╭────────────────────────────────────────────╮          │
│  │ 📄 {knowledge.task}                       │→         │
│  │    [{types 标签}]                          │          │
│  │ bg-slate-50 p-4 rounded-2xl                │          │
│  │ hover:bg-indigo-50 cursor-pointer           │          │
│  ╰────────────────────────────────────────────╯          │
│  点击 → 打开知识 SideDrawer (drawerType='know')           │
│                                                          │
│  ⑧ 运维时间戳                                            │
│  ─────────────                                           │
│  🕐 最后更新: {updated_time → 相对时间}                    │
│  字段: tool_table.updated_time (BIGINT, 秒级时间戳)        │
│  格式化: 转换为相对时间，如 "3天前" / "2小时前"             │
│  样式: text-xs text-slate-300 font-medium                 │
│  位置: SideDrawer 底部或卡片角落                           │
│                                                          │
╰══════════════════════════════════════════════════════════╯
```

---

## 5. 知识库 (K-Data Center)

### 设计目标
沉淀生产、方法论（`knowledge`）的最佳实践。

### 页面布局

```
┌─────────────────────────────────────────────────────────────────────┐
│  知识沉淀库                                                         │
│  沉淀生产过程中积累的用例、方法论与标准，驱动原子能力的演进。         │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│  ┌────────────────────────────────────────────────────────────┐     │
│  │  [🧠 BrainCircuit图标]  K-Data Center     🔍搜索  🔽筛选 │     │
│  │  bg-indigo-600 p-4                     w-72  ListFilter  │     │
│  │  rounded-3xl text-white                      w-12 h-12   │     │
│  ├────────────────────────────────────────────────────────────┤     │
│  │  Knowledge/Task │ Categories │ Evaluation │ Actions       │     │
│  │  (列头 text-[10px] font-black text-slate-300 uppercase)   │     │
│  ├────────────────────────────────────────────────────────────┤     │
│  │  ● {task}       │ [{types}]  │ ★ {score}  │     →       │     │
│  │  ● {task}       │ [{types}]  │ ★ {score}  │     →       │     │
│  │  ● {task}       │ [{types}]  │ ★ {score}  │     →       │     │
│  └────────────────────────────────────────────────────────────┘     │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘
容器: bg-white rounded-[3rem] border border-slate-100 shadow-sm
表头区: p-10 border-b border-slate-50
```

### 表格行（Knowledge Row）

```
╭────────────────────────────────────────────────────────────────────╮
│                                                                    │
│  ●  {task}          │  [#工序] [#经验]  │  ★ {score}  │   [→]     │
│  ▲   ▲              │   ▲              │   ▲         │    ▲       │
│  指示点 任务名称     │  类型标签组       │  评分       │  箭头按钮  │
│  w-3    lg           │  多色独立标签     │  amber-500  │  w-12     │
│  h-3    font-black   │                  │  font-black │  h-12     │
│  bg-    text-slate   │                  │  text-lg    │  rounded  │
│  indigo -800         │                  │             │  -2xl     │
│  -600                │                  │             │           │
│                                                                    │
╰────────────────────────────────────────────────────────────────────╯
行内距: px-10 py-8 | 悬停: hover:bg-indigo-50/30
分隔: border-b border-slate-50
```

#### 字段精确映射

| UI 位置 | 数据字段 | 类型 | 格式化规则 |
|---------|----------|------|-----------|
| **指示圆点** | 固定 | — | `w-3 h-3 rounded-full bg-indigo-600 shadow-[0_0_12px_rgba(79,70,229,0.8)]` |
| **任务名称** | `knowledge.task` | VARCHAR | `font-black text-slate-800 text-lg`，hover → `text-indigo-600` |
| **类型标签** | `knowledge.types` | ARRAY | 遍历数组，每个类型一个独立标签。样式: `px-4 py-1.5 bg-white border border-slate-100 text-indigo-600 rounded-xl text-[10px] font-black shadow-sm uppercase` |
| **评分** | `knowledge.eval.score` | JSONB→number | Star 图标 (`fill-current`) + 分数值。`text-amber-500 font-black text-lg` |
| **操作箭头** | 固定 | — | `ChevronRight` 图标，hover → `bg-indigo-600 text-white shadow-lg` |

#### 类型标签配色方案

| types 值 | 背景色 | 文字色 | 边框色 |
|---------|--------|--------|--------|
| 工序 | `bg-blue-50` | `text-blue-600` | `border-blue-100` |
| 用例 | `bg-purple-50` | `text-purple-600` | `border-purple-100` |
| 工具 | `bg-emerald-50` | `text-emerald-600` | `border-emerald-100` |
| 经验 | `bg-amber-50` | `text-amber-600` | `border-amber-100` |
| 定义 | `bg-slate-50` | `text-slate-600` | `border-slate-200` |
| User Profile | `bg-rose-50` | `text-rose-600` | `border-rose-100` |

### 知识 SideDrawer 详情（drawerType='know'）

```
╭═══════════════════════════════════════════════════ ✖ ═══╮
│                                                          │
│  Observation & Analytics                                 │
│  知识沉淀条目 Knowledge                                   │
│                                                          │
│ ────────────────────────────────────────────────────── │
│                                                          │
│  ① 标题 + 评分区                                          │
│  ─────────────                                           │
│  ┌───────────────────────────────┬───────────┐          │
│  │ {task}                        │  [★]      │          │
│  │ 字段: knowledge.task          │  {score}  │          │
│  │ 样式: text-4xl font-black     │  Star图标  │          │
│  │ text-slate-800                │  fill-    │          │
│  │ tracking-tighter              │  amber-500│          │
│  │ flex-1 mr-10                  │  text-2xl │          │
│  │ leading-[1.1]                 │  bg-amber │          │
│  │                              │  -50 p-6  │          │
│  │                              │  rounded- │          │
│  │                              │  [2rem]   │          │
│  │                              │  border   │          │
│  │                              │  amber-100│          │
│  └───────────────────────────────┴───────────┘          │
│                                                          │
│  ② 业务标签系 (Types + Tags)                              │
│  ─────────────────────                                   │
│                                                          │
│  A. 类型标签 (knowledge.types ARRAY):                     │
│  [{工序}] [{经验}] [{用例}] ...                           │
│  px-5 py-2 bg-white rounded-2xl text-[10px]              │
│  font-black text-indigo-500 tracking-[0.2em]             │
│  uppercase border border-slate-100 shadow-sm             │
│  配色方案同上表                                           │
│                                                          │
│  B. 标签键值对 (knowledge.tags JSONB):                    │
│  遍历 tags 对象的每个 key-value 对                        │
│  每对展示为 KV 徽章组:                                    │
│  ╭──────────────────────────────╮                        │
│  │ {key}: {value}              │                        │
│  │ 如: intent: 信息调研         │                        │
│  │     project: feature_extract│                        │
│  │ bg-slate-50 px-4 py-2       │                        │
│  │ rounded-xl text-xs           │                        │
│  │ text-slate-600 font-medium  │                        │
│  │ border border-slate-100     │                        │
│  ╰──────────────────────────────╯                        │
│                                                          │
│  ③ 评估明细窗 (Eval Details)                              │
│  ─── Evaluation Details ───                              │
│                                                          │
│  数据源: knowledge.eval (JSONB)                           │
│  结构: {score, harmful, helpful, confidence}             │
│                                                          │
│  四列网格 (grid-cols-4 gap-4):                             │
│                                                          │
│  ╭────────╮ ╭────────╮ ╭────────╮ ╭────────╮            │
│  │ SCORE  │ │HARMFUL │ │HELPFUL │ │CONFID. │            │
│  │        │ │        │ │        │ │        │            │
│  │ {score}│ │{harmful│ │{helpful│ │{confid │            │
│  │        │ │}       │ │}       │ │ence}   │            │
│  │ 5      │ │ 0      │ │ 1      │ │ 0.5    │            │
│  │        │ │        │ │        │ │        │            │
│  │ amber  │ │ rose   │ │emerald │ │ blue   │            │
│  │ text-  │ │ text-  │ │ text-  │ │ text-  │            │
│  │ 3xl    │ │ 3xl    │ │ 3xl    │ │ 3xl    │            │
│  │ font-  │ │ font-  │ │ font-  │ │ font-  │            │
│  │ black  │ │ black  │ │ black  │ │ black  │            │
│  ╰────────╯ ╰────────╯ ╰────────╯ ╰────────╯            │
│  bg-white p-6 rounded-[2rem] border                      │
│  border-slate-100 shadow-sm text-center                   │
│                                                          │
│  score: text-amber-500 (Star图标)                        │
│  harmful: 0 → text-emerald-500; >0 → text-rose-500      │
│  helpful: >0 → text-emerald-500; 0 → text-slate-400     │
│  confidence: 数值颜色梯度                                 │
│    <0.3 → text-rose-500                                  │
│    0.3-0.7 → text-amber-500                              │
│    >0.7 → text-emerald-500                               │
│                                                          │
│  ④ 正文区 (Content)                                       │
│  ╭──────────────────────────────────────────────╮        │
│  │  bg-white p-12 rounded-[4rem]                │        │
│  │  border border-slate-100                     │        │
│  │  shadow-2xl                                  │        │
│  │                                              │        │
│  │  [📄 FileText 图标]                          │        │
│  │  absolute -top-5 -left-5                     │        │
│  │  bg-indigo-600 text-white p-5                │        │
│  │  rounded-[2rem] shadow-2xl shadow-indigo-200 │        │
│  │                                              │        │
│  │  {content}                                   │        │
│  │  字段: knowledge.content (TEXT)                │        │
│  │  样式: text-slate-700                         │        │
│  │        leading-[1.9]                         │        │
│  │        font-serif                            │        │
│  │        whitespace-pre-wrap                   │        │
│  │        text-xl                               │        │
│  │        text-justify                          │        │
│  │        tracking-tight                        │        │
│  │  支持 Markdown 渲染 (marked.js)               │        │
│  ╰──────────────────────────────────────────────╯        │
│                                                          │
│  ⑤ 追溯属性 (Lineage / Source)                            │
│  ╭──────────────────────────────────────────────╮        │
│  │  bg-slate-50 p-10 rounded-[3rem]             │        │
│  │  border border-slate-100                     │        │
│  │                                              │        │
│  │  KNOWLEDGE LINEAGE & TRACEABILITY            │        │
│  │  (text-[10px] font-black text-slate-300       │        │
│  │   uppercase tracking-[0.3em])                 │        │
│  │                                              │        │
│  │  👤 CONTRIBUTOR:                             │        │
│  │     {owner}                                  │        │
│  │     字段: knowledge.owner (VARCHAR)           │        │
│  │     样式: font-black text-slate-800           │        │
│  │     underline decoration-indigo-200           │        │
│  │     decoration-4 underline-offset-4           │        │
│  │                                              │        │
│  │  🏷 CATEGORY:                                │        │
│  │     {source.category}                        │        │
│  │     字段: knowledge.source.category (JSONB)   │        │
│  │     样式: font-bold text-slate-600            │        │
│  │                                              │        │
│  │  🤖 AGENT:                                   │        │
│  │     {source.agent_id}                        │        │
│  │     字段: knowledge.source.agent_id (JSONB)   │        │
│  │     样式: font-mono text-indigo-600           │        │
│  │                                              │        │
│  │  🔑 SCOPES:                                  │        │
│  │     [{scopes[0]}] [{scopes[1]}] ...          │        │
│  │     字段: knowledge.scopes (ARRAY)            │        │
│  │     每项为独立标签 bg-slate-100 rounded-xl     │        │
│  │                                              │        │
│  │  📅 CREATED:                                  │        │
│  │     {created_at → 格式化日期}                  │        │
│  │     字段: knowledge.created_at (BIGINT)        │        │
│  │     格式: YYYY-MM-DD HH:mm                    │        │
│  │                                              │        │
│  │  📅 UPDATED:                                  │        │
│  │     {updated_at → 格式化日期}                  │        │
│  │     字段: knowledge.updated_at (BIGINT)        │        │
│  │     格式: YYYY-MM-DD HH:mm + 相对时间          │        │
│  │                                              │        │
│  │  📋 STATUS:                                   │        │
│  │     {status}                                 │        │
│  │     字段: knowledge.status (VARCHAR)           │        │
│  │     "approved" → emerald 徽章                 │        │
│  │     "pending" → amber 徽章                    │        │
│  │     "rejected" → rose 徽章                    │        │
│  ╰──────────────────────────────────────────────╯        │
│                                                          │
│  ⑥ 支撑实体挂载点 (Supports)                              │
│  ─── Support Entities ───                                │
│                                                          │
│  A. 支撑的原子能力:                                       │
│  数据源: knowledge.support_capability (JSONB[])           │
│  对每个 ID 查询 atomic_capability.name                    │
│                                                          │
│  ╭────────────────────────────────────────────╮          │
│  │ 🧠 {capability.name}                     │→         │
│  │ bg-amber-50 px-5 py-3 rounded-2xl         │          │
│  │ text-amber-700 font-black text-sm          │          │
│  │ border border-amber-100                    │          │
│  │ hover:bg-amber-100 cursor-pointer          │          │
│  ╰────────────────────────────────────────────╯          │
│  点击 → 打开能力 SideDrawer (drawerType='cap')            │
│                                                          │
│  B. 关联的工具:                                           │
│  数据源: knowledge.tools (JSONB[])                        │
│  对每个 ID 查询 tool_table.name                           │
│                                                          │
│  ╭────────────────────────────────────────────╮          │
│  │ 🔧 {tool.name}                           │→         │
│  │ bg-indigo-50 px-5 py-3 rounded-2xl        │          │
│  │ text-indigo-700 font-black text-sm         │          │
│  │ border border-indigo-100                   │          │
│  │ hover:bg-indigo-100 cursor-pointer         │          │
│  ╰────────────────────────────────────────────╯          │
│  点击 → 打开工具 SideDrawer (drawerType='tool')           │
│                                                          │
│  ⑦ 关联关系 (Relationships)                               │
│  ─── Relationships ───                                   │
│                                                          │
│  数据源: knowledge.relationships (JSONB[])                │
│  每项结构: {type: string, target: string}                 │
│                                                          │
│  展示为关系图谱卡片:                                       │
│  ╭────────────────────────────────────────────╮          │
│  │ {type} → {target}                         │→         │
│  │ type 映射:                                 │          │
│  │   "complement" → 🔄 互补知识 (blue)        │          │
│  │   "duplicate"  → 📋 重复知识 (slate)       │          │
│  │   "subset"     → 📦 子集知识 (amber)       │          │
│  │   "superset"   → 📚 超集知识 (purple)      │          │
│  │   "conflict"   → ⚠️ 冲突知识 (rose)        │          │
│  │                                            │          │
│  │ bg-{type_color}-50 p-4 rounded-2xl         │          │
│  │ border border-{type_color}-100             │          │
│  │ hover:shadow-md cursor-pointer             │          │
│  ╰────────────────────────────────────────────╯          │
│  点击 → 打开目标知识 SideDrawer (drawerType='know')       │
│                                                          │
╰══════════════════════════════════════════════════════════╯
```

---

## 全局数据流与关联穿透矩阵

### 实体间跳转路径完整映射

```
需求 SideDrawer
  ├── 点击 [Associated Atomics] → 能力 SideDrawer
  └── 点击 [Source Nodes] → 节点 SideDrawer

能力 SideDrawer
  ├── 点击 [Implements 工具名] → 工具 SideDrawer
  ├── 点击 [Requirements 需求] → 需求 SideDrawer
  └── 点击 [Source Knowledge] → 知识 SideDrawer

工具 SideDrawer
  ├── 点击 [Capabilities 标签] → 能力 SideDrawer
  └── 点击 [Knowledge 条目]   → 知识 SideDrawer

知识 SideDrawer
  ├── 点击 [Support Capability] → 能力 SideDrawer
  ├── 点击 [Tools 标签]         → 工具 SideDrawer
  └── 点击 [Relationships]     → 知识 SideDrawer (另一条)
```

### 前端数据缓存策略

由于实体间频繁穿透查询，建议：
1. **首次加载**：Tab 切换时加载当前标签页对应表的全量数据并缓存
2. **关联实体惰性加载**：SideDrawer 内引用的跨表实体，在 Drawer 打开时按需请求
3. **缓存键**：以实体 ID 为 key，5 分钟 TTL
4. **全局 State**：维护 `{ requirements: Map, capabilities: Map, tools: Map, knowledge: Map }` 四个实体缓存池

---

## 需增加/完善的后端 API 接口

> [!WARNING]
> 在目前的 `server.py` 中，主要暴露了关于 Resources 和 Knowledge 的 API 端点。要支撑上述完整的连贯体验，以下接口必须补充：

### 1. 原子能力 API

```
GET  /api/atomic_capabilities           列出全部原子能力
GET  /api/atomic_capabilities/{id}      按 ID 获取单条能力详情
```

响应字段：`id, name, criterion, description, requirements, implements, tools, source_knowledge`

### 2. 需求 API

```
GET  /api/requirements                  列出全部需求
GET  /api/requirements/{id}             按 ID 获取单条需求详情
```

响应字段：`id, description, atomics, source_nodes, status, match_result`

### 3. 工具 API

```
GET  /api/tools                         列出全部工具
GET  /api/tools/{id:path}               按 ID 获取单条工具详情（路径格式）
```

响应字段：`id, name, version, introduction, tutorial, input, output, updated_time, status, capabilities, tool_knowledge, case_knowledge, process_knowledge`

### 4. Dashboard 聚合 API（可选）

```
GET  /api/dashboard/stats               获取全局统计数据
```

响应字段：
```json
{
  "requirement_count": 42,
  "requirement_satisfied_count": 18,
  "capability_count": 15,
  "capability_ready_count": 6,
  "tool_count": 24,
  "tool_available_count": 12,
  "knowledge_count": 350,
  "node_tree": [...]
}
```

> 此接口可选。替代方案是前端分别请求四个列表接口后自行聚合计算。

---

## 用户确认点

> [!IMPORTANT]
>
> 1. **前端框架选择**：原本用 FastAPI 的 Jinja + Vanilla JS 实现，而 `reference.html` 基于 **React + Tailwind**。本次重构您希望使用工程化的 Vite 等完整前端方案，还是像 demo 那样以单文件 HTML + CDN 的极简无构建方式实现？
> 2. **后端 API 是否齐备**：目前 `server.py` 尚未看到 Capabilities、Requirements、Tools 等数据的访问路由。是否希望在这轮一并用 FastAPI 写好供前端调用的 REST API？
> 3. **知识库筛选能力**：知识库页面是否需要支持按 `types`（工序/用例/工具/经验/定义/User Profile）进行筛选过滤？当前后端已有 `GET /api/knowledge?types=工序` 支持。
> 4. **知识库 eval 展示深度**：列表页是否仅展示 `eval.score` 星级，还是同时展示 `confidence` 置信度条？
