# 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 │ │
│ │ 若内容含代码片段，使用 高亮 │ │
│ ╰──────────────────────────────────────────────╯ │
│ │
│ ⑥ 驱动的能力 (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` 置信度条？