文档 v1.0

VKB 高保真原型文档

VKB (Variant Knowledge Base) 基因变异知识库检索系统的高保真HTML原型设计文档。

01 项目简介

VKB (Variant Knowledge Base) 是一个专业的基因变异知识库检索系统，为医学和生物信息学领域提供专业的基因型与表型关联查询服务。

12,847

基因总数

98,432

位点总数

5,231

表型总数

02 设计规范

色彩系统

类别	颜色值	用途
主色	`#00AEEF`	Logo、主要按钮、链接
主色浅	`#E6F7FD`	背景、hover状态
致病性-P	`#DC2626`	Pathogenic 徽章
致病性-LP	`#EA580C`	Likely Pathogenic 徽章
致病性-VUS	`#F59E0B`	Uncertain Significance 徽章
致病性-LB	`#3B82F6`	Likely Benign 徽章
致病性-B	`#22C55E`	Benign 徽章
纯合子	`#7C3AED`	HOM 徽章
杂合子	`#0891B2`	HET 徽章

字体规范

标题/正文

Inter, system-ui, sans-serif

数据/代码

JetBrains Mono, Consolas, monospace

03 页面清单

index.html

首页 - 搜索入口

introduction.html

产品介绍页 - Landing Page

登录页

user.html

用户中心

admin.html

管理后台

search-results.html

搜索结果页 - 基因型→表型

search-results2.html

搜索结果页 - 表型→基因型

detail.html

详情页 - 位点详情

advanced-search.html

智能组合检索

advanced-search-result.html

智能组合检索结果页

首页 (index.html)

功能: 搜索入口、快捷导航、数据统计

主要元素：

居中的Logo和搜索框
热门搜索标签
三个快捷入口卡片 (基因型→表型、表型→基因型、智能组合检索)
底部统计 (基因/位点/表型总数)

搜索结果页 (search-results.html)

功能: 基因概览、位点列表、多维度筛选

主要元素：

基因信息卡片 (基因名、描述、统计数据)
筛选面板 (致病性、纯杂合、表型)
已选筛选标签
数据表格 (位点、致病性、纯杂合、出现次数、相关表型)
分页器

详情页 (detail.html)

功能: 位点详细信息、关联表型、频率统计

主要元素：

位点标题和关键徽章
基因组信息网格
关键指标卡片 (致病性评级、纯杂合状态、OMIM关联、验证状态)
标签页切换 (关联表型、高级表型数据、参考文献)
表型频率条图表
注释信息框

智能组合检索 (advanced-search.html)

功能: 多维度组合筛选

主要元素：

三个输入框 (基因、HGVS、表型)
致病性等级复选框
纯杂合状态复选框
相关性等级复选框
运行检索按钮
已保存的检索列表

产品介绍页 (introduction.html)

功能: 产品 Landing Page，展示 VKB 平台核心功能

主要元素：

科技感 Hero 区域，带有 DNA 双螺旋动画和粒子效果
主搜索框支持三种检索模式切换
热门基因快速链接 (BRCA1, TP53, EGFR, PTEN, ATM)
三大搜索模式卡片
数据统计展示
平台特性介绍
完整的页脚导航和联系信息

登录页 (login.html)

功能: 用户登录入口

主要元素：

DNA 双螺旋动画背景效果
六边形网格背景纹理
浮动粒子效果
登录表单（用户名/邮箱、密码）
密码显示/隐藏切换
第三方登录（微信）

用户中心 (user.html)

功能: 用户个人信息管理

主要元素：

左侧菜单导航（个人信息、我的积分、我的收藏）
个人信息编辑表单
积分概览和等级进度条
积分明细记录
收藏列表（基因、变异位点、表型）

管理后台 (admin.html)

功能: 系统管理控制台

主要元素：

用户管理：用户列表、角色分配、状态管理
数据管理：数据库统计、数据导入（支持 CSV/VCF/JSON/Excel）
第三方数据库接口维护（ClinVar、OMIM、HGMD）
日志管理：操作日志、登录日志、系统日志
数据增长趋势图表（ECharts）

04 交互说明

表格

行hover高亮效果
点击行可跳转详情页
表头固定，支持横向滚动
支持表头点击排序

筛选

复选框卡片样式，选中状态有视觉反馈
已选筛选项显示为标签，可移除
支持清除全部筛选
多条件组合筛选（基因、表型、致病性等）

徽章系统

致病性徽章 (圆形)

P Pathogenic

LP Likely Pathogenic

VUS Uncertain

LB Likely Benign

B Benign

纯杂合徽章 (圆角矩形)

HOM 纯合子

HET 杂合子

图表交互

ECharts 图表支持鼠标悬停显示详情
图表自适应窗口大小变化
饼图、条形图、折线图等多种类型

05 技术实现

框架

纯 HTML + Tailwind CSS (CDN)

图标

Heroicons (SVG内联)

图表库

ECharts 5.x (CDN)

字体

Inter, JetBrains Mono (Google Fonts)

页面依赖关系

独立页面

introduction.html - 产品官网入口，可跳转至登录或搜索
login.html - 独立登录页，登录后跳转至首页

搜索流程

index.html → 输入关键词 → search-results.html (基因型→表型)
search-results2.html - 表型→基因型反向检索
advanced-search.html → 组合筛选 → advanced-search-result.html
任意列表页 → 点击详情 → detail.html

设计原则

专业严谨

医学/生物信息学领域的专业感

清晰可读

大量数据表格的清晰呈现

高效操作

快速检索和信息获取

视觉一致

统一的色彩、间距、圆角规范