Palantir · 航空制造
生产工作流重构与可复用的实施路径
这条卡片演示 .ui-card 的完整结构:hover 时边框加深、阴影升级、整体上移 1px。 摘要限四行,避免长短内容导致网格高度参差。
三层令牌架构(primitive → semantic → 组件),四套主题,含 20+ 组件。 零第三方依赖,全部为原生 CSS 与原生 JS。
语义令牌按用途命名(--semantic-text-primary),
指向 primitive 调色板(--p-blue-600)。
换主题只改 semantic 层,组件样式一行不动。
正文 15px、行高 1.5;字号按约 1.2 倍递增。中文优先 PingFang SC / 微软雅黑。
4px 基准,共 9 档(含负间距用于消除外边距)。控件高度三档:28 / 34 / 42 px。
三条曲线对应三种运动性质:减速(进入)、加速(退出)、标准(位置变化)。全局尊重 prefers-reduced-motion。
| 令牌 | 时长 | 用途 |
|---|---|---|
--p-duration-instant | 80ms | 按下反馈、颜色微调 |
--p-duration-fast | 140ms | 悬停、边框与文字颜色 |
--p-duration-base | 240ms | 弹窗进出、开关滑动 |
--p-duration-slow | 380ms | 大面积布局变化 |
tone 决定徽章"传达什么"而非"长什么样",新增语气只需定义一组 semantic 变量。 grade-* 用于分级标识(证据等级 A→D、详细度 深→浅)。
生产工作流重构与可复用的实施路径
这条卡片演示 .ui-card 的完整结构:hover 时边框加深、阴影升级、整体上移 1px。 摘要限四行,避免长短内容导致网格高度参差。
没有匹配的案例
试试减少筛选条件、换个关键词,或重置全部筛选。
| 维度 | 满分条件 | 一分条件 |
|---|---|---|
| 业务背景 | problem ≥ 50 字 | ≥ 25 字 |
| 改造流程 | solution ≥ 60 字 | ≥ 30 字 |
| 技术工作流 | architecture ≥6 步且 components ≥ 5 项 | architecture ≥ 4 步 |
| 人机与治理 | human ≥ 35 字且 fde_actions ≥ 5 项 | human ≥ 18 字 |
| 量化结果 | 含"数字 + 单位"或货币符号 | ≥ 20 字定性描述 |
| 来源可定位性 | evidence_level = A | B 或 C |
弹窗支持焦点陷阱、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 移除 |
副标题:说明当前上下文
弹窗内容区。头部 sticky,长内容滚动时标题与关闭按钮始终可见。 按 Esc 或点击遮罩关闭,Tab 键焦点在弹窗内循环。