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

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

核心设计理念

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

前端数据缓存策略

由于实体间频繁穿透查询，建议：

首次加载：Tab 切换时加载当前标签页对应表的全量数据并缓存
关联实体惰性加载：SideDrawer 内引用的跨表实体，在 Drawer 打开时按需请求
缓存键：以实体 ID 为 key，5 分钟 TTL
全局 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               获取全局统计数据

响应字段：

{
  "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]

前端框架选择：原本用 FastAPI 的 Jinja + Vanilla JS 实现，而 reference.html 基于 React + Tailwind。本次重构您希望使用工程化的 Vite 等完整前端方案，还是像 demo 那样以单文件 HTML + CDN 的极简无构建方式实现？

后端 API 是否齐备：目前 server.py 尚未看到 Capabilities、Requirements、Tools 等数据的访问路由。是否希望在这轮一并用 FastAPI 写好供前端调用的 REST API？

知识库筛选能力：知识库页面是否需要支持按 types（工序/用例/工具/经验/定义/User Profile）进行筛选过滤？当前后端已有 GET /api/knowledge?types=工序 支持。

知识库 eval 展示深度：列表页是否仅展示 eval.score 星级，还是同时展示 confidence 置信度条？

plan.md 92 KB 文件歷史 原始文件

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

核心设计理念

全局字体颜色系统

文本颜色规范

字号规范

字重规范

全局导航栏 (Navbar)

布局规格

通用组件设计

StatCard（统计卡片）— 紧凑版

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

SideDrawer 内区段标题规范

实体穿透交互规则

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

1. Dashboard（全局观测板）

设计目标

页面布局

StatCard 数据来源

内容拓扑树节点

节点视觉规格

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

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

2. 需求库 (Requirement Library)

设计目标

页面布局

StatCard 数据来源

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

字段精确映射

排序逻辑

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

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

设计目标

页面布局

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

能力网格卡片 (Capability Card)

字段精确映射

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

4. 工具库 (Tool Library)

设计目标

页面布局

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

工具扁平卡片 (Tool Card)

字段精确映射

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

5. 知识库 (K-Data Center)

设计目标

页面布局

表格行（Knowledge Row）

字段精确映射

类型标签配色方案

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

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

实体间跳转路径完整映射

前端数据缓存策略

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

1. 原子能力 API

2. 需求 API

3. 工具 API

4. Dashboard 聚合 API（可选）

用户确认点

plan.md 92 KB

文件歷史原始文件