admin
d9445b5888
- oil-ui-pro 升到 0.22.2：references 13→28 份（新增 16、删 imagery.md）、assets 增 cards/（22 组）与 fonts/、SKILL.md 顶层五步结构未改名。 - 升级路径：官方 `npx github:oil-oil/oil-cli update` 稳定失败（error=replace、报「检查目录权限」）。 真身为 EXDEV —— 解压在 os.tmpdir()（C 盘）、技能目录在 E 盘，Windows 上 rename 不能跨盘； CLI 的 catch 把非 CliError 原生异常一律兜底成 replaceFailed，真错误一个字不吐。 做法＝借其 prepare() 只做下载+校验，再 cp 到同盘 stage、rename 交换；官方命令复验 up_to_date。 - 回归：product-planning 按名引用的 visual-review.md／tools.md／design-direction.md／style-explorer.md 全部健在；命名闸门 2061｜0｜27。 - session-mechanism/references/pitfalls.md 新增 P0-98（含通则：更新器把原生错误兜底成指错方向的人话）。
4.4 KiB
4.4 KiB
卡片
目录 assets/cards/ 里有 19 套现成的卡片原型，可以在浏览器里看 画廊与可运行参考，每个原型的自包含代码在 assets/cards/<name>/（包含 card.html、card.css，带动画的还有 card.js；公共基础样式在 assets/cards/shared/shell.css）。
卡片用来承载产品特性、运行证据或具体的凭证；需要时借鉴这些原型的结构，或直接复用代码。
先看要不要用卡片
适合用卡片的地方：
- 并列展示 2–4 项核心产品能力，每一项都需要具体的画面切片才能说清楚；
- 摆出产品运行的真实证据（例如命令终端、构建流水线、任务审批单）；
- 把抽象的凭证或身份做成看得见摸得着的物件（例如访问通行证、API 规格卡、会员卡）；
- 对比或透视多份内容（例如版本对比、多来源检索）。
不适合用卡片的地方：
- 首屏主视觉（Hero）。首屏主角直接放产品本身的大界面或核心叙事，不要在首屏放几个碎卡片，见 设计方向；
- 连续阅读的长文、纯操作表单或密集数据表格，见 交互与状态。不要把能顺畅读下来的内容硬切成几张小卡片；
- 靠大图和连续排版建立气氛的页面。卡片的边界会把气氛切碎；
- 4–7 个核心对象、案例或方案要排成横向的画廊，或者在一个画面里展开和收起。这时要的是空间容器，不是平铺卡片，读 空间容器。
卡片清单
| 原型 | 适合放什么 | 包含的结构 |
|---|---|---|
beam-graph |
工作流拓扑、数据流向、生态连接 | 点阵底纹、发光连线、中心枢纽、微胶囊节点 |
terminal |
命令行执行、构建日志、实时事件 | 窗口顶栏、语法高亮、状态指示灯、闪烁光标 |
flow-object |
身份凭证、API 规格、硬件规格、会员卡 | 深色质感卡片、卡号、状态圆点、发光边框 |
ui-slice |
任务审批、流程进度、多看板切片 | 前后双层景深、看板底板、悬浮审批卡、进度条 |
answer-lens |
知识库检索、模型对比、多来源溯源 | 三张微倾斜卡片堆叠（-10° / 0° / 10°）、数据图表、来源标签 |
dot-globe |
全球节点、分布式算力、跨区域网络 | 3D 点阵地球或星图网格（mode: 'mesh'） |
deploy-preview |
版本发布、分支预览、CI/CD 状态 | 分支名、提交哈希、构建进度条、预览链接 |
metric |
实时吞吐量、关键指标、大盘数字 | 动态数字滚轮、趋势微图表、浮动百分比 |
keycaps |
快捷键说明、输入指令 | 键盘按键外观、立体投影 |
capture-notes |
语音记录、会议纪要、速记清单 | 音频波形跳动、多色分类标签、待办勾选框 |
line-ribbons |
流动线条、背景氛围、数据流向 | 彩色波浪飘带、平滑渐变 |
particle-ring |
中心焦点、加载反馈 | 向内聚拢的粒子光环 |
vector-space |
知识关联、聚类图谱 | 带连线的散点图、分组标签 |
file-mosaic |
格式解析、多类型文档资产 | 多格式文件卡片交错重叠 |
stream-window |
实时数据流、事件监控 | 逐行加载的数据列表 |
responsive-preview |
多端适配、设计系统展示 | 桌面、平板、手机三层画中画边框 |
portrait-story |
客户故事、创始人特写、金句引用 | 黑白人物大特写、大留白排版 |
promo-band |
版本更新通栏横幅 | 斜切通栏横幅、醒目标签 |
showcase |
旗舰功能大界面特写 | 界面截断出血大图 |
怎么使用这些卡片
卡片库是设计参考与现成代码库，不是强制约束。按以下方式使用：
- 先挑合适的原型：根据产品性质选 2–4 款能说清特性的原型；不适合放卡片的产品按自身骨架排版，不强行拼凑。
- 看现成代码取细节：看
assets/cards/shared/shell.css获取基础样式，再看选定卡片目录下的card.html、card.css（有 Canvas 动画的看card.js）。 - 借鉴结构，换成真实内容：
- 可以直接复用代码结构，也可以根据当前页面的网格自由调整；
- 把文案、标签、代码和数值换成当前产品的真实内容；
- 不要退回只有两行字的空白方框；配色和质感跟当前方向走，不照搬原型的。