跳到主要内容
← FDE Atlas
DESIGN SYSTEM

FDE Atlas UI

三层令牌架构(primitive → semantic → 组件),四套主题,含 20+ 组件。 零第三方依赖,全部为原生 CSS 与原生 JS。

颜色

语义令牌按用途命名(--semantic-text-primary), 指向 primitive 调色板(--p-blue-600)。 换主题只改 semantic 层,组件样式一行不动。

语义令牌(当前主题生效)

primitive 色板

排版

正文 15px、行高 1.5;字号按约 1.2 倍递增。中文优先 PingFang SC / 微软雅黑。

间距与尺寸

4px 基准,共 9 档(含负间距用于消除外边距)。控件高度三档:28 / 34 / 42 px。

动效

三条曲线对应三种运动性质:减速(进入)、加速(退出)、标准(位置变化)。全局尊重 prefers-reduced-motion。

令牌时长用途
--p-duration-instant80ms按下反馈、颜色微调
--p-duration-fast140ms悬停、边框与文字颜色
--p-duration-base240ms弹窗进出、开关滑动
--p-duration-slow380ms大面积布局变化

按钮

6 种 variant × 3 种 size。按下时有 1px 位移反馈,提供物理感。

Variant

Size

状态

悬停我

表单

辅助说明文字
该字段必填

选择类

徽章与标签

tone 决定徽章"传达什么"而非"长什么样",新增语气只需定义一组 semantic 变量。 grade-* 用于分级标识(证据等级 A→D、详细度 深→浅)。

语气

中性 强调 成功 警告 危险 带圆点

分级

A 级|案例级直接来源 B 级|官方汇总来源 C 级|可信二次材料 D 级|线索待核验

标签

知识库 / RAG Embedding 已选中 可点击 带删除

卡片与统计

深度案例 技术方案

Palantir · 航空制造

生产工作流重构与可复用的实施路径

这条卡片演示 .ui-card 的完整结构:hover 时边框加深、阴影升级、整体上移 1px。 摘要限四行,避免长短内容导致网格高度参差。

127 案例总数
35 深度案例
107 KB 首屏数据(原 978 KB,减少 89%) ↓ 89%

反馈

提示:证据等级衡量来源能否被定位复核,不等于真实性评分。
成功:校验通过,127 条案例结构一致。
警告:14 组架构模板被多条案例共用,建议逐条重写。
错误:主来源链接必须使用 HTTPS。

空状态

没有匹配的案例

试试减少筛选条件、换个关键词,或重置全部筛选。

骨架屏

表格与步骤

六维详细度评分规则(每维 0–2 分,满分 12)
维度满分条件一分条件
业务背景problem ≥ 50 字≥ 25 字
改造流程solution ≥ 60 字≥ 30 字
技术工作流architecture ≥6 步且 components ≥ 5 项architecture ≥ 4 步
人机与治理human ≥ 35 字且 fde_actions ≥ 5 项human ≥ 18 字
量化结果含"数字 + 单位"或货币符号≥ 20 字定性描述
来源可定位性evidence_level = AB 或 C

步骤流

  1. 业务数据、文档与系统接口作为输入
  2. 文档解析、切分与元数据标注
  3. Embedding 与语义索引建立
  4. 按当前问题召回相似案例与规则
  5. LLM 基于证据生成建议并附出处
  6. 专家确认后新经验回写知识库

键值网格与来源卡

发布方 Datawhale FDE100
指标口径 来源方披露,未独立审计
查阅日期 2026-09-19

弹窗与浮层

弹窗支持焦点陷阱、Esc 关闭、焦点归还。支持窄/中/宽三档。

选项卡

主题对比

四套主题:跟随系统 / 亮色 / 暗色 / 高对比度。 高对比度模式去掉所有半透明叠加、边框加粗至 2px,正文对比度达到 WCAG AAA。

语义令牌亮色暗色高对比度

可访问性

能力实现
键盘导航全部交互元素可聚焦,焦点环使用 :focus-visible(鼠标点击不显示)
跳转链接.ui-skip-link,Tab 首项即到主内容
焦点陷阱弹窗内 Tab 循环,关闭后焦点归还触发元素
语义结构弹窗 role="dialog" aria-modal,实时区 aria-live="polite"
装饰性元素骨架屏、分隔点标记 aria-hidden,不污染读屏
减少动效prefers-reduced-motion 下所有动画降至 80ms
强制颜色forced-colors 下移除阴影,避免与系统配色冲突
视觉隐藏.ui-hidden 保留在无障碍树中,.ui-invisible 移除
已复制到剪贴板