KGcure UI 设计规范 · V1.1 可视化版

文档定位

本规范用于统一 KGcure 当前及后续前端页面的视觉、布局、组件、交互与状态表达。目标不是重做现有产品视觉，而是在保留现有蓝白科研产品风格的基础上，建立可复用、可落地、可验收的 UI Design System，解决页面之间的“拼凑感”和局部自定义失控问题。

V1.1 可视化版（品牌规范修订）说明：从 Design Foundations 开始，每个规范模块均附一张规范级可视化示例。示例中的尺寸、颜色、层级、状态和组件组合可直接作为设计与前端验收基准。

✓ 必须任何新页面不得自行定义主色、圆角、按钮、输入框、卡片、状态色和页面宽度；必须优先复用本规范中的 Design Token、基础组件和页面模板。

基本原则

1. 设计目标与基本原则 Principles

统一不是“限制设计”，而是让同类信息与同类操作在任何页面都表现为同一个东西。

可视化示例

六条原则每条原则都必须能被验收

一致性

同类信息和同类操作在不同页面保持相同视觉与行为。

同一 Button / Card / Input / Badge 全站复用同一组件。

专业克制

医学科研产品以可信、清晰、结构化为主，不以装饰性视觉抢占注意力。

减少渐变、重阴影、大面积彩色背景与多套图标语言。

结构优先

先统一页面骨架，再处理局部美化。

页面必须归入固定 Layout / Template。

语义稳定

颜色和状态必须具有固定含义。

蓝=操作/当前/选择；绿=成功/完成；橙=警告/待处理；红=错误/危险。

高信息效率

保证科研工具的数据密度，同时避免拥挤。

采用统一容器宽度、4pt 基础网格（4pt Grid System）和分级信息层次。

可扩展

新业务接入时无需重新定义视觉。

只允许新增业务组件，不允许重复造基础组件。

原则	定义	落地要求
一致性	同类信息和同类操作在不同页面保持相同视觉与行为。	同一 Button、Card、Input、Badge 在全站必须来自同一组件。
专业克制	医学科研产品以可信、清晰、结构化为主，不以装饰性视觉抢占注意力。	减少渐变、重阴影、大面积彩色背景和多套图标语言。
结构优先	先统一页面骨架，再处理局部美化。	页面必须归入固定 Layout / Template，而非逐页自由排版。
语义稳定	颜色和状态必须具有固定含义。	蓝=操作/当前/选择；绿=成功/完成；橙=警告/待处理；红=错误/危险。
高信息效率	保证科研工具的数据密度，同时避免拥挤。	采用统一容器宽度、4pt 基础网格（4pt Grid System）和分级信息层次。
可扩展	新业务接入时无需重新定义视觉。	只允许新增业务组件，不允许重复造基础组件。

问题清单

2. 当前系统需要统一的核心问题 Current Gaps

九个高频问题直接造成页面之间的“拼凑感”，也是本轮整改的起点。

可视化示例

问题 → 统一方向前 4 个问题的收敛方式示例

问题主操作不统一

蓝色、黑色、绿色、紫色渐变均承担主要 CTA。

统一方向主 CTA 全站统一 Primary Blue

问题页面宽度不统一

表单、详情、列表、对话页面使用不同的随机内容宽度。

统一方向建立 Compact / Reading / Standard / Wide 四档容器

760px840px 1200px1440px

问题状态色混用

绿色既表示已选用，也表示完成；蓝色同时表达进行中。

统一方向选择/当前=蓝；完成/成功=绿

已选用已完成待处理未开始

问题 Page Header 不统一

存在“返回文字”“返回按钮”“无返回”以及右侧操作位置变化。

统一方向所有内页统一使用 PageHeader

返回上一级页面标题主操作

问题	当前表现	统一方向
主操作不统一	蓝色、黑色、绿色、紫色渐变均承担主要 CTA。	主 CTA 全站统一 Primary Blue。
页面宽度不统一	表单、详情、列表、对话页面使用不同的随机内容宽度。	建立 Compact / Reading / Standard / Wide 四档容器。
Page Header 不统一	存在“返回文字”“返回按钮”“无返回”以及右侧操作位置变化。	所有内页统一使用 PageHeader。
卡片风格不统一	圆角、阴影、边框、Padding、选中态差异较大。	统一 Base Card，并定义 Hover / Selected / Completed。
状态色混用	绿色既表示已选用，也表示完成；蓝色也同时表达进行中。	选择/当前=蓝；完成/成功=绿。
字体层级不统一	页面标题、区块标题、卡片标题字号和粗细变化明显。	固定 Typography Scale。
图标体系混杂	线性/填充/彩色背景/不同尺寸并存。	统一图标库、尺寸和容器规范。
表单组件不统一	输入框、上传区、Label、辅助说明、按钮位置差异。	统一 Form System。
工作流页面独立成套	右侧助手、推荐卡、运行页使用不同视觉语言。	纳入主 Design System，仅保留业务结构差异。

Design Foundations · 3

设计基础 Design Foundations

色彩、字体、间距、圆角与图标是全部页面共用的底层语言。先冻结这五层，再讨论页面。

KGcure UI Design System

3.1 色彩 Color Tokens

品牌蓝负责交互；语义色只表达状态，不承担主操作。点击色块可复制 Hex。

规范原则同一颜色只能有一种含义：品牌蓝负责操作 / 当前 / 选择，语义色只表达状态。

V1.1 可视化示例

Color Tokens（点击复制）共 14 个 Token · 三层结构：品牌蓝 + 中性灰 + 语义色

语义色（只表达状态）

进行中 / 已选择已完成 / 成功

待处理 / 警告失败 / 危险

未开始 / 普通分类 AI / 推荐

颜色语义

✓ 必须蓝色=操作、当前、选择；绿色=完成、成功。

× 禁止黑色、紫色渐变、绿色同时作为主 CTA。

页面大面积背景保持白色或极浅灰，彩色仅用于操作、状态和少量强调。

状态色三层用法高饱和色只用于图标 / 状态点 · 点击 Token 可复制

用途	Success / 完成	Warning / 待处理	Error / 危险
图标 / 状态点	#16A34A	#D97706	#DC2626
Badge / 小字号状态文本	已完成	待处理	失败
Badge 背景	#F0FDF4	#FFF7ED	#FEF2F2

不要让同一个高饱和状态色同时直接用于小字号文本：图标与状态点使用 --color-success / warning / error， Badge 与小字号状态文本使用 -text，Badge 背景使用 -bg。

展开详细参数

Token	建议值	用途	禁止事项
Primary	#1A5BFF	主按钮、链接、选中、Focus、当前状态	不得用黑色或紫色渐变替代主 CTA
Primary Hover	#154FE6	Primary hover / active	不得新增页面级自定义深蓝
Primary Light	#EDF3FF	选中背景、弱提示背景	不得作为成功态
Primary Border	#B9CCFF	选中卡片浅边框	避免与普通边框混用
Text Primary	#0F172A	H1/H2、核心内容	不使用纯黑 #000 作为正文主色
Text Secondary	#475569	正文、描述	—
Text Muted	#94A3B8	时间、Caption、Placeholder	不用于关键数据
Border	#E2E8F0	默认边框、分割线	—
Background	#F8FAFC	侧栏、弱背景	页面主体不宜全部灰底
Surface	#FFFFFF	Card、Input、主内容区	—
Success	#16A34A	图标 / 状态点：成功、完成、校验通过	不得表达“已选中”
Success Text	#15803D	Badge 与小字号状态文本	不得替代图标 / 状态点色
Success BG	#F0FDF4	Badge / 成功提示背景	—
Warning	#D97706	图标 / 状态点：警告、待处理	—
Warning Text	#B45309	Badge 与小字号状态文本	—
Warning BG	#FFF7ED	Badge / 警告提示背景	—
Error	#DC2626	图标 / 状态点：错误、删除、危险操作	—
Error Text	#B91C1C	Badge 与小字号状态文本	—
Error BG	#FEF2F2	Badge / 错误提示背景	—
Purple	#7C3AED（可选）	AI / 推荐等弱语义标签	不得用作主 CTA

✓ 必须 颜色语义：蓝色表达“操作 / 当前 / 选择”，绿色只表达“成功 / 已完成”。 “已选用工作流”应使用蓝色 Selected State，而不是整张绿色卡片。

KGcure UI Design System

3.2 字体 Typography

同级信息必须使用同一字号、行高和字重，页面层级由字号而非颜色堆叠。

规范原则正式产品主字体为思源黑体；同级信息使用同一字号、行高与字重。

V1.1 可视化示例

Typography Scale · 字体规范示例主字体：思源黑体 Source Han Sans CN

Hero · 36/48 · 600–700

从一个问题，到真正的科研成果

首页专用

H1 · 28/36 · 600

我的科研空间

页面标题

H2 · 20/28 · 600

研究过程与阶段

区块标题

H3 · 16/24 · 600

非小细胞肺癌

卡片标题

Body · 14/22 · 400

用于描述科研任务、研究目标和当前阶段的主要说明文字。

正文

Secondary · 13/20 · 400

辅助说明、表单帮助文本、卡片描述。

说明、辅助信息

Caption · 12/18 · 400

更新于 2026-09-10 14:06

辅助信息

主字体：思源黑体（Source Han Sans CN）。中文、英文与数字默认统一使用该字体族；仅代码、路径、Token 等需要等宽对齐的场景使用等宽字体（--font-mono）。本页 CSS 中的字体栈："Source Han Sans CN" → "Source Han Sans SC" → "Noto Sans CJK SC" → "Microsoft YaHei" → sans-serif。 正式产品主字体为思源黑体。Fallback 字体仅用于字体加载失败场景，不视为最终视觉验收标准。

层级	字号	行高	字重	典型用途
Hero	36px	48px	600–700	仅首页核心标题
H1	28px	36px	600	页面标题：我的科研空间、全部工作流、个人资料
H2	20px	28px	600	一级 Section 标题
H3	16px	24px	600	卡片标题、二级区块
Body	14px	22px	400	正文、表单内容
Secondary	13px	20px	400	说明、辅助信息
Caption	12px	18px	400	时间、文件大小、状态说明

KGcure UI Design System

3.3 间距 Spacing

采用 4pt 基础网格（4pt Grid System），仅使用 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 64px。常用界面间距以 8 / 12 / 16 / 24 / 32px 为主。点击刻度可复制 Spacing Token。

V1.1 可视化示例

基础间距刻度条形长度 = 实际 px 值 × 6 · 点击数值复制 Token

场景	建议值
Icon 与文字	8px
Label 与 Input	8px
卡片内部紧凑元素	12px
同级控件	16px
Card Padding	20px / 24px
Section 内模块	24px
Section 与 Section	32px
页面顶部留白	24px / 32px

KGcure UI Design System

3.4 圆角、边框与阴影 Radius · Border · Shadow

常用元素只需 1px 描边 + 12px 圆角 + 默认无阴影，Hover 时才允许出现极轻阴影。

V1.1 可视化示例

Radius Token 6 / 8 / 12 / 16px · 点击色块复制 Radius Token

Radius XS · 6px
Badge / Tag

Radius SM · 8px
Button / Input / Menu Item

Radius MD · 12px
Card / Panel

Radius LG · 16px
大型上传区 / Landing Composer（可选）

Base Card · 默认无阴影

非小细胞肺癌

1px #E2E8F0 描边 + 12px 圆角

Hover Shadow · 仅 Hover / 浮层

Hover 状态

边框加深 + 极轻阴影

Popover / Modal

浮层阴影

仅用于浮层、Popover、弹窗

Token	值	使用范围
Radius XS	6px	Badge / Tag
Radius SM	8px	Button / Input / Menu Item
Radius MD	12px	Card / Panel
Radius LG	16px	大型上传区 / Landing Composer（可选）
Border	1px #E2E8F0	默认
Shadow	默认 none	Card 默认不加阴影
Hover Shadow	极轻	仅 Hover、浮层、Popover

× 禁止避免同一页面同时出现 6 / 8 / 10 / 12 / 16 / 20px 多套圆角。基础组件只允许使用规范 Token。

KGcure UI Design System

3.5 图标 Iconography

全站使用同一套线性图标，尺寸与容器固定，避免混用填充、彩色和不同 stroke。

V1.1 可视化示例

推荐：统一 16 / 18 / 20 / 24px（本页真实图标）

搜索 · 16

上传 · 18

文件 · 20

AI · 24

功能 Icon Container

36×36px · radius 8px · icon 20px

避免

🔍★ ⚙

混用 Emoji、填充图标、不同尺寸和不同背景形状会产生“拼凑感”。

场景	尺寸	要求
按钮 / 表单图标	16px	与文字间距 8px
侧栏菜单	18px	线性图标
功能图标	20px	线性图标
大型功能入口	24px	可放 36×36 图标容器
Stroke	1.75–2	同一图标库统一

△ 推荐建议全站采用 Lucide 风格线性图标。功能彩色图标可以保留浅色底容器，但容器统一为 36×36px、8px 圆角、20px 图标。

Layout System · 4

布局系统 Layout System

骨架先统一：App Shell、内容容器、PageHeader、Sidebar、Assistant Panel 五项定死之后，页面之间才有可比性。

KGcure UI Design System

4.1 App Shell 三栏布局

Sidebar 固定 240px，主内容区占据剩余宽度，Assistant Panel 存在时固定右侧 320px。

V1.1 可视化示例

Main

剩余宽度 · 内容由 Container 控制

工作流推荐助手 AI 助理

推荐方向

临床预测模型数据清洗

320px · 左边框 1px
主内容不被覆盖

区域	规范
Product Sidebar	KGcure 产品正式侧栏固定 240px；背景 #F8FAFC；右边框 1px #E2E8F0。
Docs Sidebar	本规范网站自身的目录导航，可根据文档内容设置为约 280–300px。该宽度仅用于文档站点，不是产品 Token，不得用于产品页面。
Main	占据剩余宽度；页面内容由 Content Container 控制最大宽度。
Assistant Panel	存在时固定在右侧；推荐宽度 320px；左边框 1px #E2E8F0。
Top Utility	如分享、导出、文件等全局动作，位置必须固定，不侵入 PageHeader 层级。

KGcure UI Design System

4.2 内容容器 Content Container

内容区统一水平居中；桌面端左右 Padding 32px。禁止页面使用随机宽度。

V1.1 可视化示例

Compact760px · 工作流参数填写、单列设置表单

760px

Reading840px · AI 对话消息、长文本阅读

840px

Standard1200px · 科研空间、详情页、个人资料（本页使用）

1200px

Wide1440px · 文件列表、积分明细、宽表格

1440px

类型	最大宽度	适用页面
Compact	760px	工作流参数填写、单列设置表单
Reading	840px	AI 对话消息、长文本阅读
Standard	1200px	科研空间、详情页、个人资料
Wide	1440px	文件列表、积分明细、宽表格

× 禁止内容区统一水平居中；桌面端左右 Padding 32px。禁止页面使用随机宽度，例如 700、930、1080、1260px。

KGcure UI Design System

4.3 Page Header 页面头部

所有内页必须使用统一 PageHeader，不再由页面自行决定“返回文字 / 返回按钮 / 无返回”的结构。

V1.1 可视化示例

科研空间 / 非小细胞肺癌

非小细胞肺癌

创建于 2026-09-02 · 当前阶段 03 模型训练 · 目标：构建可解释的临床预测模型

区域	内容	规范
Back / Breadcrumb	返回上一级或面包屑	位于最上方；样式统一为 Ghost / Link。
Title	H1 页面名称	左对齐；28px / 600。
Description	页面说明	13–14px / Secondary。
Actions	Primary + Secondary	右侧对齐；一个页面最多一个 Primary CTA。

KGcure UI Design System

4.4 Sidebar 侧栏导航

现有左侧栏结构可以保留，重点是定死尺寸、Active State、分组间距和底部账户区。

V1.1 可视化示例

菜单项状态（鼠标悬停可试）

状态说明

Default透明背景

Hover#F1F5F9

Selected#EDF3FF + Primary Blue

36px菜单项高度，左右 Padding 12px，圆角 8px

16–24px分组间距

底部账户区积分 / 用户信息固定在底部，不随主导航滚动

项目	规范
菜单项高度	36px
左右 Padding	12px
圆角	8px
Default	透明背景
Hover	#F1F5F9
Selected	#EDF3FF + Primary Blue
分组间距	16–24px
底部账户区	积分 / 用户信息固定在底部，不随主导航滚动
Product Sidebar 宽度	240px（产品正式侧栏，固定不变）
Docs Sidebar 宽度	本规范网站自身目录可约 280–300px；仅用于文档站点，不属于产品 Token

KGcure UI Design System

4.5 Assistant Panel 助手面板

右侧工作流推荐助手固定宽度与结构，不随不同工作流页面改变视觉语言。

V1.1 可视化示例

主内容区

主内容不得被 Assistant Panel 覆盖；宽度变化由 Layout 统一处理。

工作流推荐助手 AI 助理

推荐方向

临床预测模型数据清洗

描述你的科研需求，助手会推荐可运行的工作流

区域	规范
宽度	320px（桌面端）
Header	56px 固定高度
Content	独立滚动
Composer	底部固定
边界	1px 左边框
背景	#FFFFFF
与主内容关系	主内容不得被 Assistant Panel 覆盖；宽度变化由 Layout 统一处理

Base Components · 5

基础组件规范 Base Components

Button、Input、Upload、Card、Badge、Tabs、Table、Search、Overlay、Feedback 十类基础组件，是所有页面的最小复用单元。本节全部为可交互真实组件。

KGcure UI Design System

5.1 Button 按钮

全站仅保留 Primary / Secondary / Ghost / Destructive / Link 五种语义。

规范原则一个页面原则上只有一个 Primary CTA，所有主操作统一使用品牌蓝。

V1.1 可视化示例

Variant 点击 Primary 可查看 Loading 状态

Size Small 32px · Default 36px · Large 40px

状态 Default · Hover · Focus · Disabled · Loading

Default

Hover

Focus

Disabled

Loading

Secondary Disabled

Destructive Hover

Ghost

Variant	视觉	用途
Primary	蓝底白字	页面唯一核心操作：运行、创建、提交、进入、上传
Secondary	白底灰边	次级操作：查看案例、取消、筛选
Ghost	透明	弱操作：返回、更多、刷新
Destructive	红色	删除、清空等不可逆操作
Link	蓝色文字	页面跳转、查看详情

尺寸	高度	适用
Small	32px	表格行内、紧凑操作
Default	36px	默认
Large	40px	Landing / 关键表单

✓ 必须一个页面原则上只有一个 Primary CTA。

△ 推荐 Hover 仅增加轻微视觉反馈（加深底色），不做位移、放大或改色。

× 禁止不再使用黑色、绿色或紫色渐变主按钮。

迁移规则：全系统取消黑色主按钮和紫色渐变主按钮。当前“进入研究”“发起科研任务” “确认信息，开始执行”“充值”等均统一为 Primary。

KGcure UI Design System

5.2 Input / Select / Textarea 表单控件

统一结构：Label → Help → Control → Error。Label 与控件间距 8px，辅助说明顺序全站一致。

规范原则表单统一结构：Label → Help → Control → Error，顺序全站一致。

V1.1 可视化示例

研究名称* 显示在科研空间卡片与详情页标题。研究目标* 研究目标需不少于 10 个字，以便系统匹配工作流。研究类型禁用状态

数据说明（Textarea，最小高度 96px）支持 Markdown；建议 500 字以内。

搜索型 Input（带图标）

Focus 状态（Primary Border + Light Ring）

展开详细参数

属性	规范
Default Height	40px
Border	1px #E2E8F0
Radius	8px
Horizontal Padding	12px
Text	14px
Placeholder	#94A3B8
Focus	Primary Border + 2px Light Ring
Disabled	#F8FAFC 背景 + Muted Text
Error	Error Border + 下方错误说明

KGcure UI Design System

5.3 Upload 上传

Dropzone 使用 1px 虚线边框；上传中 / 成功 / 失败使用独立状态，不改变整体布局。

规范原则上传状态独立表达，不改变页面整体布局。

V1.1 可视化示例

点击上传或拖拽文件到此处支持 CSV / XLSX / PDF / DOCX，单个文件不超过 50MB，最多 10 个

Dropzone：1px dashed #CBD5E1 · 8–12px 圆角 · 内容垂直居中

File Item 状态

compound_list.csv 386 KB · 已上传 · 2026-09-10 11:32 已上传

RNA-seq_报告.pdf 8.7 MB · 上传中 62% 上传中

raw_data_2026.parquet 格式不支持：仅支持 CSV / XLSX / PDF / DOCX 上传失败

模式	规范
Dropzone	1px dashed #CBD5E1；8–12px 圆角；内容垂直居中。
Uploaded File	使用统一 File Item；展示图标、文件名、大小、操作。
状态	上传中 / 成功 / 失败使用独立状态，不改变整体布局。
限制信息	格式、数量、大小使用 Caption 显示。

KGcure UI Design System

5.4 Card 卡片

Base / Hover / Selected / Completed / Disabled 五种状态。悬停真实卡片可查看 Hover 反馈。

规范原则 “选择”与“完成”必须分离：Selected 用品牌蓝，Completed 只用绿色 Badge。

V1.1 可视化示例

Base

Base Card

白底 · 1px #E2E8F0 · 12px 圆角 · 默认无阴影

Hover

Hover Card

边框加深，可增加极轻阴影

Selected

Selected Card

#1A5BFF 边框 + #EDF3FF 背景

Completed

已完成

Completed Card

卡片本体保持 Base，只增加绿色 Completed Badge

Disabled

Disabled Card

降低文字与图标对比度；禁止点击

Card Padding

20 / 24px

紧凑卡片 20px，内容卡片 24px

State	规范
Base	白底；1px #E2E8F0；12px 圆角；20/24px Padding；默认无阴影。
Hover	边框加深，可增加极轻阴影。
Selected	#1A5BFF 边框 + #EDF3FF 背景。
Completed	卡片本体保持 Base，只增加绿色 Completed Badge。
Disabled	降低文字与图标对比度；禁止点击。

✓ 必须 “选择”与“完成”必须分离。不要再用整张绿色卡表示已选择某工作流。

KGcure UI Design System

5.5 Badge / Tag / Status 状态标识

Badge 推荐高度 22–24px、水平 Padding 8px、圆角 6px、字号 12px。

规范原则状态不得只靠颜色区分：文字、图标与颜色必须同时表达同一语义。

V1.1 可视化示例

状态色与语义颜色不是唯一信号：Badge 文本使用 -text Token，背景使用 -bg Token

进行中已选中当前阶段已完成执行成功待处理需补充失败错误未开始 AI 推荐推荐度 92%

表格中的状态

已同步处理中失败

分类 Tag

数据清洗临床预测论文写作

尺寸与规范

高度 22–24px · Padding 0 8px · Radius 6px · 字号 12px

✓ 必须 Selected 使用品牌蓝；Badge 文本使用 -text，背景使用 -bg。

× 禁止使用绿色表达“当前已选择”。

状态	颜色	示例
Current / Selected / Running	Blue	当前、已选中、进行中
Completed / Success	Green	已完成、执行成功
Pending / Warning	Orange	待处理、需补充
Error / Failed	Red	失败、错误
Default / Not started	Gray	未开始、普通分类
AI / Recommended	Purple or Blue Light	AI 助理、推荐度

规范	Badge 推荐高度 22–24px、水平 Padding 8px、圆角 6px、字号 12px。

KGcure UI Design System

5.6 Tabs / Segmented Control 视图切换

Tabs 用于多个同级内容视图，Segmented 用于 2–3 个互斥模式；Filter Chips 只表达筛选。

规范原则 Tabs 表达同级视图，Segmented 表达互斥模式，Filter Chips 只表达筛选。

V1.1 可视化示例

Tabs · Active 蓝色文字 + 2px 底线

研究概览：展示研究目标、当前阶段、成果数量与最近更新时间。

Segmented · 首页“对话 / 科研任务”

当前模式：对话。两个首页共用同一个 Hero + Composer 组件，只替换标题、说明、Placeholder 和下方内容。

Filter Chips · 仅表达筛选

组件	适用	规范
Tabs	多个同级内容视图	文本型；Active 使用蓝色文字 + 2px 底线。
Segmented	2–3 个互斥模式	用于首页“对话 / 科研任务”；容器及尺寸固定。
Filter Chips	筛选条件	不等同于 Tabs；仅表达筛选。

KGcure UI Design System

5.7 Table 数据表格

表头 44px、行高 44–52px、仅保留必要横向分隔。支持排序、选择与分页。

规范原则表格只保留必要横向分隔，选择、排序与分页位置全站统一。

	文件名 ↕	格式	来源	大小 ↕	更新时间 ↕	状态	操作

共 0 条

展开详细参数

元素	规范
Header	12–13px / 500；浅灰背景可选；高度 44px
Row	44–52px，按信息密度统一
Border	仅保留必要横向分隔，避免重网格
Selection	Checkbox 固定在第一列
Actions	固定最右；优先 icon / 更多菜单
Number	右对齐
Date / ID	可用等宽数字字体
Pagination	表格底部右侧或两端布局全站统一

KGcure UI Design System

5.8 Search & Filter Bar 搜索与筛选

统一放在内容区上方，同一行优先顺序：搜索框 → 主要筛选 → 更多筛选 → 视图切换。

规范原则搜索与筛选固定在内容区上方：搜索 → 主要筛选 → 更多筛选 → 视图切换。

V1.1 可视化示例

已应用 0 个筛选 · 共 9 条结果

✓ 必须列表页搜索和筛选统一放在内容区上方，同一行优先顺序：搜索框 → 主要筛选 → 更多筛选 → 视图切换。筛选结果数量或“已应用筛选”应有清晰反馈。

KGcure UI Design System

5.9 Modal / Drawer / Popover 浮层

按流程长度选择容器：短流程用 Modal，较长编辑或快速详情用 Drawer，菜单与轻量信息用 Popover。

规范原则按流程长度选择浮层：短流程 Modal，较长编辑 Drawer，轻量信息 Popover。

V1.1 可视化示例

Modal · 短流程确认 / 危险操作

Drawer · 较长编辑、快速详情

Popover · 菜单、筛选、轻量信息

组件	使用边界
Modal	短流程确认、表单提交、危险操作。
Drawer	较长编辑、详情快速查看，不打断主页面上下文。
Popover	菜单、筛选、轻量信息。
Confirm Dialog	删除、批量不可逆操作，必须明确对象和后果。

KGcure UI Design System

5.10 Feedback 反馈

Toast 承载操作结果，Inline Alert 承载需要用户处理的问题，Empty State 必须给出一个明确下一步。

规范原则每种结果都要有反馈：Toast 说结果，Inline Alert 说下一步，Empty State 给出路。

V1.1 可视化示例

Toast · 3–5 秒自动消失

Inline Alert · 放在相关上下文附近

当前阶段需要补充数据上传至少 1 份 CSV 文件后可继续运行“模型训练”。

第 3 阶段运行失败：输入文件缺少 label 列请补齐标签列后重新运行，或联系工作流作者。

结果已保存到“我的科研空间 / 非小细胞肺癌” 可在成果列表中查看或下载。

Loading · Skeleton 优先于大面积 Spinner

Empty State · 说明为什么为空 + 一个下一步

还没有科研成果

运行任意阶段工作流后，结果文件会自动汇总到这里。

Error · 说明发生了什么、如何恢复

无法加载工作流列表网络连接已中断。请检查网络后重试，或在“我的科研空间”中查看已保存的结果。

类型	规范
Toast	操作结果；3–5 秒自动消失；不承载复杂说明。
Inline Alert	需要用户处理的问题；放在相关上下文附近。
Empty State	说明“为什么为空”+ 一个明确下一步。
Loading	Skeleton 优先于大面积 Spinner。
Error	说明发生了什么、如何恢复；不要只显示“系统错误”。

Domain Components · 6

AI 与科研业务组件 Domain Components

AIComposer、WorkflowCard、ResearchStageCard、ResearchSpaceCard、FileItem 五类业务组件，必须建立在基础组件之上，不得自定义基础视觉。

KGcure UI Design System

6.1 AI Composer 对话输入

Attachment 左下固定，Model / Mode 右下弱化显示，Send 最右为主按钮。可直接输入并发送试一下。

规范原则两个首页共用同一个 Hero + Composer，只替换文案与下方内容。

V1.1 可视化示例

我我有一份 1200 例非小细胞肺癌的临床数据，想做可解释的预后预测模型，应该选哪些工作流？

建议按“数据清洗 → 特征筛选 → 模型训练与评估 → 结果报告”的顺序执行。推荐先运行 医疗数据清洗（推荐度 92%），它可以直接输出建模可用格式。

nslc_cohort.csv

内容由 AI 生成，请核对关键结论与数据。

属性	规范
宽度	Landing 按页面模板；Conversation 使用 Reading Width。
高度	单行输入默认 96–112px；随内容增长。
Attachment	左下固定
Model / Mode	右下，弱化显示
Send	最右，Primary / 高对比圆形按钮
Disclaimer	Composer 下方使用 Caption 居中

✓ 必须两个首页“对话 / 科研任务”必须共用同一个 Hero + Composer 组件，只替换标题、说明、Placeholder 和下方内容。

KGcure UI Design System

6.2 Workflow Card 工作流卡片

列表、推荐、科研阶段中的工作流卡片共享同一基础组件和状态语义。点击卡片可切换选中态。

规范原则工作流卡片在列表、推荐与科研阶段中共享同一基础视觉与状态语义。

V1.1 可视化示例

临床预测模型构建

自动完成预处理、训练、评估与报告生成，适合回顾性临床队列。

临床预测推荐度 88%

已选择工作流推荐度 92%

医疗数据清洗

用于医疗数据清洗与离线处理，输出可直接建模的标准表。

数据清洗 02 阶段

已完成

完整论文初稿生成

当前阶段已生成结果文件，可查看或下载。

论文写作 2026-09-10 14:06

区域	内容
Icon	统一业务图标容器
Title	16px / 600
Category	Badge
Description	最多 2–3 行，超出截断
Meta	推荐度、收藏等弱信息
Action	卡片底部统一位置：进入 / 运行 / 查看详情
Selected	蓝色边框 + 浅蓝背景

KGcure UI Design System

6.3 Research Stage Card 阶段卡片

序号使用两位数字 Caption，状态为未开始=Gray / 进行中=Blue / 已完成=Green。点击切换当前阶段，不改变“完成”语义。

规范原则阶段卡片只切换当前阶段，不改变“完成”语义。

V1.1 可视化示例

01 数据接入未开始 2 个文件

02 数据清洗已完成 6 个文件

03 特征筛选进行中 3 个文件

04 模型训练未开始 0 个文件

05 结果报告未开始 0 个文件

当前阶段：03 特征筛选（Primary Border + Primary Light）

元素	规范
序号	两位数字 01/02/03…，Caption
阶段名	H3
文件数	弱 Badge
状态	未开始=Gray；进行中=Blue；已完成=Green
选中阶段	Primary Border + Primary Light
点击行为	切换当前阶段，不改变“完成”语义

KGcure UI Design System

6.4 Research Space Card 科研空间卡片

更新时间在顶部作为 Caption，研究名称使用 H3，Primary Action 统一为“进入研究”。

规范原则研究卡固定信息顺序：更新时间 → 名称 → 目标 → 成果 → 当前阶段 → 进入研究。

V1.1 可视化示例

更新于 2026-09-10 14:06 进行中

非小细胞肺癌

目标：构建可解释的临床预后预测模型（0.1 版本）

成果 4 阶段 03 / 05

当前阶段特征筛选

最近结果feature_selected.top300.csv

更新于 2026-09-08 09:44 已完成

甘露糖代谢与免疫微环境

目标：完成文献综述与通路富集分析，形成可投稿初稿。

成果 9 阶段 05 / 05

当前阶段结果报告

最近结果文献综述_甘露糖.pptx

字段	建议
更新时间	顶部 Caption
研究名称	H3
研究目标 / 类型	Secondary 区域
成果数量	Badge + 简要结果
当前阶段	状态 + 阶段名
Primary Action	进入研究

KGcure UI Design System

6.5 Result / File Item 结果与文件

对话结果、科研成果、工作流产出和“我的文件”复用同一 File Item 视觉语言。

规范原则所有页面复用同一 File Item：类型图标、名称、格式、大小、来源、时间与动作一致。

V1.1 可视化示例

feature_selected.top300.csv CSV · 386 KB · 来源：工作流产出 · 2026-09-10 11:32

论文初稿_v3.docx DOCX · 2.4 MB · 来源：科研空间 / 非小细胞肺癌 · 2026-09-10 14:06

KM_curve_plot.png PNG · 640 KB · 来源：对话结果 · 2026-09-09 18:20

✓ 必须对话结果、科研成果、工作流产出和“我的文件”应复用同一 File Item 视觉语言。文件类型图标、文件名、格式、大小、来源、时间、下载、保存到科研空间等动作必须保持一致。

Page Templates · 7

7. 页面模板 Page Templates

今后需求描述应优先使用“用某个 Page Template 创建某页面”，而不是“重新设计一个某页面”。

V1.1 可视化示例

Landing 对话首页、科研任务首页

List 我的科研空间、工作流卡片列表

Detail 科研空间详情、工作流详情

Form 工作流参数填写、账号编辑

Conversation 工作流推荐、工作流执行结果

Data List 我的文件、积分明细

Settings 个人资料、账号与安全、会员与账单

Marketplace 全部工作流

模板	适用页面	骨架
Landing	对话首页、科研任务首页	Hero → Composer → 快捷入口 / 场景内容
List	我的科研空间、工作流卡片列表	PageHeader → Search/Filter → Cards/List → Pagination
Detail	科研空间详情、工作流详情	PageHeader → Summary → Sections / Tabs → Actions
Form	工作流参数填写、账号编辑	PageHeader/Context → Form Sections → Footer Actions
Conversation	工作流推荐、工作流执行结果	Thread Header → Message Stream → Composer
Data List	我的文件、积分明细	PageHeader → Filters → Table → Pagination
Settings	个人资料、账号与安全、会员与账单	PageHeader → Setting Sections / Cards
Marketplace	全部工作流	PageHeader → Category/Filter → Grid + Assistant Panel

△ 推荐今后需求描述应优先使用“用某个 Page Template 创建某页面”，而不是“重新设计一个某页面”。

Page Mapping · 8

8. 当前主要页面统一映射 Page Mapping

12 个现有页面全部归入 8 类模板，并明确各自的重点整改项。

展开详细参数

当前页面	归属模板	重点整改
对话首页	Landing	Hero/Composer 与科研任务首页完全共用；统一快捷入口图标和卡片。
科研任务首页	Landing	与对话首页只替换文案与下方内容，不改变结构尺寸。
我的科研空间	List	Standard Container；压缩过度空白；统一 PageHeader 与卡片。
科研空间详情	Detail	统一 Header；阶段卡片使用 Research Stage Card；CTA 改 Primary Blue。
全部工作流	Marketplace	工作流卡片、筛选条、右侧助手归一；去除多套颜色。
工作流详情	Detail + Assistant	按钮、卡片、助手面板统一。
工作流参数填写	Form	取消紫色渐变 CTA；统一 Label/Input/Upload/Footer Action。
工作流推荐对话	Conversation	推荐卡使用 Workflow Card；选中态改蓝色。
工作流执行结果	Conversation	文件结果统一 File Item；错误/需协助使用 Inline Alert。
我的文件	Data List	Wide Container；统一筛选条、表格、分页、文件操作。
积分明细	Data List	与“我的文件”共享表格/筛选/分页规范；充值用 Primary。
个人资料	Settings	Standard Container；统一 Section / Divider / Edit Action。

States & Interaction · 9

9. 状态与交互语义 States

按钮提交后必须提供 loading 状态并防止重复提交；完成后恢复按钮状态或跳转至明确结果页。

V1.1 可视化示例

可点击

当前 / 选中

已选中

已完成

禁用

危险

语义	视觉	交互要求
可点击	蓝色 / 正常对比度	Hover 必须有反馈
当前 / 选中	Primary + Primary Light	不可与“完成”混用
已完成	Success Badge	不必整块变绿
禁用	Muted + Disabled Background	不可 Hover，不使用指针手势
危险	Error	二次确认
推荐	Purple / Blue Light Badge	不提升到主 CTA 层级
加载中	Skeleton / Loading	防止重复提交
错误	Inline Error + Recovery	给出可执行恢复方式

10. 响应式与分辨率 Responsive

拖动滑块查看不同视口宽度下的容器与侧栏行为；宽屏页面的“空”应来自容器之外。

V1.1 可视化示例

视口宽度 1440px 1280–1599px：标准桌面布局；Sidebar 240px；Assistant 320px

容器最大宽度保持 1200px，不随屏幕无限拉伸；空余来自容器之外。

区间	策略
≥ 1600px	保持容器最大宽度，不随屏幕无限拉伸。
1280–1599px	标准桌面布局；Sidebar 240px；Assistant 320px。
1024–1279px	适当减少页面左右 Padding；Assistant 可折叠。
< 1024px	如产品暂不支持移动端，应至少保证页面不重叠、不截断，并提示推荐桌面端。

✓ 必须宽屏页面的“空”应该来自容器之外，而不是页面内部随意增加留白。

Content & Copy · 11

11. 文案与内容展示规范 Content & Copy

按钮使用动词 + 对象；页面标题使用名词短语；错误文案必须给出下一步。

V1.1 可视化示例

推荐写法

清洗与转换数据

上传 CSV 后，系统将按字段类型统一缺失值、单位与编码。

避免写法

运行 medical-structured-data-cleaning skill

将 skill_id: 1024 提交至 /v2/tasks 接口执行。

项目	规则
按钮	使用动词 + 对象：创建科研空间、运行工作流、上传文件。
页面标题	使用名词短语，避免营销化长句。Landing Hero 例外。
说明文案	说明用户能做什么，而不是介绍系统“非常智能”。
错误文案	描述原因 + 下一步，避免“未知错误 / 系统异常”。
空状态	说明当前无内容，并提供一个主要下一步。
术语	“科研空间”“工作流”“成果”“阶段”等同一概念全站统一命名。
时间	统一 YYYY-MM-DD HH:mm 或相对时间规则，不混用多种格式。
数字	积分、文件大小、数量等采用统一精度和千分位规则。

Accessibility · 12

12. 可用性与无障碍 Accessibility

对比度：正文与背景保证可读对比度；Muted 文本不承担关键信息。

V1.1 可视化示例

Token 组合实测对比度（WCAG 2.1）

Text Primary on Surface 17.9 : 1 AAA

Text Secondary on Surface 7.6 : 1 AAA

Text Muted on Surface 2.6 : 1 仅辅助

#FFFFFF on Primary 5.3 : 1 AA

Primary on Primary Light 4.8 : 1 AA

Success Badge · 文本色 4.8 : 1 AA

Warning Badge · 文本色 4.7 : 1 AA

Error Badge · 文本色 5.9 : 1 AA

状态点 / 图标（Success） 3.3 : 1 非文本 ≥ 3:1

状态不得仅通过颜色表达，应同时使用颜色、图标或文字；正文和状态文字本身仍需满足可读性和对比度要求。因此高饱和状态色只用于图标 / 状态点（非文本 ≥ 3:1），Badge 与小字号状态文本统一使用 -text Token（≥ 4.5:1）。

Focus 状态 · 所有可交互控件必须有键盘 Focus

使用键盘 Tab 键可看到蓝色 Focus Ring

点击区域 · 桌面端 ≥ 32×32px · 触屏端推荐 ≥ 44×44px

32×32 · 触屏 44×44

颜色非唯一信号

已完成图标 + 文字 + 颜色三重表达

表单结构（必填 / 错误 / 帮助文本结构化关联）

邮箱* 邮箱格式不正确，请补全域名，例如 demo@kgcure.com。

要求	规范
对比度	正文与背景保证可读对比度；Muted 文本不承担关键信息。
Focus	所有可交互控件必须有键盘 Focus State。
点击区域	桌面端：图标按钮最小点击区域 ≥ 32×32px；触屏端：推荐点击区域 ≥ 44×44px。
颜色非唯一信号	状态同时使用文字 / 图标 / Badge，不能只靠颜色区分。
表单	必填、错误、帮助文本必须结构化关联。
Tooltip	纯图标按钮必须有 Tooltip / aria-label。

Implementation · 13

13. 前端实现约束 Implementation

若当前前端继续使用 shadcn/ui + Tailwind，建议将本规范首先落地为 Token 与基础组件层，而不是在页面中散落 className。

V1.1 可视化示例

层级	建议
Tokens	集中定义 CSS Variables：颜色、radius、spacing、font、border、shadow。
Base Components	Button、Input、Textarea、Select、Card、Badge、Tabs、Table、Dialog、Toast。
Domain Components	AIComposer、WorkflowCard、ResearchStageCard、ResearchSpaceCard、FileItem。
Layouts	AppShell、PageContainer、PageHeader、AssistantPanel。
Templates	LandingTemplate、ListTemplate、DetailTemplate、FormTemplate、ConversationTemplate。
页面	只负责组合 Template 和业务组件，不直接定义视觉基础样式。

建议的 Token 命名示例（本页实际使用）

:root {
  /* color */
  --color-primary: #1A5BFF;
  --color-primary-hover: #154FE6;
  --color-primary-light: #EDF3FF;
  --color-text-primary: #0F172A;
  --color-text-secondary: #475569;
  --color-border: #E2E8F0;
  --color-bg: #F8FAFC;
  /* radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  /* space (4pt grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
}

Rollout · 14

14. 现有页面整改优先级 Rollout Priority

先做覆盖面最大的 P0，再做视觉差异最大的工作流 / 科研空间全链路。

V1.1 可视化示例

P02 组 · 覆盖面最大 P13 组 · 全链路统一 P22 组 · 完整性补齐

优先级	范围	原因
P0	Color / Button / Card / Input / Badge / PageHeader	覆盖面最大，最直接降低“拼凑感”。
P0	App Shell / Content Container	解决不同页面宽度、位置和留白不一致。
P1	工作流全链路	当前视觉差异最大：列表→详情→选择→表单→执行结果。
P1	科研空间全链路	统一研究卡、阶段卡、成果文件和 CTA。
P1	文件 / 积分 / 个人资料	统一后台型数据页面与 Settings 模板。
P2	Empty / Loading / Error / Modal 等状态	完善产品完整性。
P2	Responsive / Accessibility	在基础组件稳定后统一补齐。

Checklist · 15

15. UI 验收 Checklist Acceptance Checklist

可勾选的验收清单，进度会保存在本地浏览器中（localStorage）。

Quick Reference · 16

16. 一页速查 Quick Reference

交付与验收时只需要对照这张表；任何页面都不应出现表外的自定义值。

V1.1 可视化示例

#1A5BFF 品牌主色 · 每页最多一个 Primary CTA

类别	统一值 / 规则
品牌主色	#1A5BFF
页面 H1	28px / 36px / 600
正文	14px / 22px
Button	32 / 36 / 40px；Radius 8px
Input	40px；Radius 8px
Card	Radius 12px；Border #E2E8F0；默认无阴影
Badge	22–24px；Radius 6px
Sidebar	240px
Assistant Panel	320px
Compact / Reading / Standard / Wide	760 / 840 / 1200 / 1440px
页面 Padding	32px Desktop
状态色	蓝=当前/选择；绿=完成；橙=警告；红=错误
Primary CTA	每页最多一个；全站蓝色
Spacing	4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 64px