@lark-base-open/base-database-cli 1.3.7 → 1.3.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -0
- package/README.md +2 -0
- package/dist/ai-functions.d.ts +11 -0
- package/dist/ai-functions.d.ts.map +1 -1
- package/dist/ai-functions.js +118 -9
- package/dist/ai-functions.js.map +1 -1
- package/dist/archive.d.ts.map +1 -1
- package/dist/archive.js +4 -0
- package/dist/archive.js.map +1 -1
- package/dist/deploy.d.ts +4 -0
- package/dist/deploy.d.ts.map +1 -1
- package/dist/deploy.js +26 -8
- package/dist/deploy.js.map +1 -1
- package/dist/init.d.ts +1 -1
- package/dist/init.d.ts.map +1 -1
- package/dist/init.js +4 -3
- package/dist/init.js.map +1 -1
- package/dist/lark-cli-error.d.ts +1 -0
- package/dist/lark-cli-error.d.ts.map +1 -1
- package/dist/lark-cli-error.js +37 -7
- package/dist/lark-cli-error.js.map +1 -1
- package/dist/lark-cli.d.ts.map +1 -1
- package/dist/lark-cli.js +16 -4
- package/dist/lark-cli.js.map +1 -1
- package/dist/program.d.ts.map +1 -1
- package/dist/program.js +7 -2
- package/dist/program.js.map +1 -1
- package/dist/public-sql-error.d.ts.map +1 -1
- package/dist/public-sql-error.js +2 -18
- package/dist/public-sql-error.js.map +1 -1
- package/dist/pull.d.ts +1 -0
- package/dist/pull.d.ts.map +1 -1
- package/dist/pull.js +13 -0
- package/dist/pull.js.map +1 -1
- package/package.json +1 -1
- package/skills/lark-base-database/SKILL.md +30 -12
- package/skills/lark-base-database/references/ai-function.md +12 -4
- package/skills/lark-base-database/references/base-capability-routing.md +4 -4
- package/skills/lark-base-database/references/base-sql-errors.generated.md +403 -0
- package/skills/lark-base-database/references/database-function-limitations.md +20 -37
- package/skills/lark-base-database/references/database-function.md +14 -40
- package/skills/lark-base-database/references/development.md +2 -2
- package/skills/lark-base-database/references/faas.md +6 -6
- package/skills/lark-base-database/references/file-transfer.md +1 -1
- package/skills/lark-base-database/references/frontend-design-guide.md +163 -33
- package/skills/lark-base-database/references/notifications.md +9 -9
- package/skills/lark-base-database/references/release.md +10 -10
- package/skills/lark-base-database/references/style-guide.md +2 -2
- package/skills/lark-base-database/references/verification.md +6 -4
- package/skills/lark-base-database/references/workspace.md +15 -13
- package/templates/database-starter/gitignore +7 -0
- package/templates/database-starter/page/package-lock.json +4 -4
- package/templates/database-starter/page/package.json +1 -1
- package/templates/database-starter/page/src/components/floating-button/assets/toast-close.svg +3 -0
- package/templates/database-starter/page/src/components/floating-button/assets/toast-info.svg +5 -0
- package/templates/database-starter/page/src/components/floating-button/assets/tooltip-caret.svg +3 -0
- package/templates/database-starter/page/src/components/floating-button/index.tsx +122 -5
- package/skills/lark-base-database/references/design/components/actions-fields.md +0 -16
- package/skills/lark-base-database/references/design/components/code/controls.css +0 -122
- package/skills/lark-base-database/references/design/components/code/controls.tsx +0 -73
- package/skills/lark-base-database/references/design/components/code/date-picker.tsx +0 -42
- package/skills/lark-base-database/references/design/components/code/floating.tsx +0 -41
- package/skills/lark-base-database/references/design/components/code/overlays.tsx +0 -19
- package/skills/lark-base-database/references/design/components/code/select.tsx +0 -34
- package/skills/lark-base-database/references/design/components/code/styles.d.ts +0 -1
- package/skills/lark-base-database/references/design/components/code/theme.css +0 -49
- package/skills/lark-base-database/references/design/components/code/usage.tsx +0 -38
- package/skills/lark-base-database/references/design/components/date-time-number.md +0 -9
- package/skills/lark-base-database/references/design/components/feedback-navigation.md +0 -9
- package/skills/lark-base-database/references/design/components/index.md +0 -18
- package/skills/lark-base-database/references/design/components/overlays.md +0 -9
- package/skills/lark-base-database/references/design/components/patterns/flat-business.md +0 -7
- package/skills/lark-base-database/references/design/components/selection.md +0 -24
- package/skills/lark-base-database/references/design/components.md +0 -91
- package/skills/lark-base-database/references/design/composition.md +0 -90
- package/skills/lark-base-database/references/design/control-recipes.md +0 -107
- package/skills/lark-base-database/references/design/examples.md +0 -172
- package/skills/lark-base-database/references/design/foundations.md +0 -126
- package/skills/lark-base-database/references/design/review.md +0 -82
- package/skills/lark-base-database/references/design/scenes/analysis-report.md +0 -66
- package/skills/lark-base-database/references/design/scenes/brand-showcase.md +0 -70
- package/skills/lark-base-database/references/design/scenes/business-operations.md +0 -85
- package/skills/lark-base-database/references/design/scenes/campaign-report.md +0 -66
- package/skills/lark-base-database/references/design/scenes/dashboard.md +0 -77
- package/skills/lark-base-database/references/design/scenes/festive-campaign.md +0 -69
- package/skills/lark-base-database/references/design/theme.md +0 -27
- package/skills/lark-base-database/references/design/typography.md +0 -56
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
# 业务操作
|
|
2
|
-
|
|
3
|
-
适用:CRM、订单、审批、排班、录入和处理记录的工作台。目标是看清当前对象、状态与下一步,快速且可靠地完成操作。基础规则见[通用规范](../foundations.md)。不因业务属于营销、金融或科技就把操作页改成活动页或大屏。
|
|
4
|
-
|
|
5
|
-
## 设计语言
|
|
6
|
-
|
|
7
|
-
以任务效率为主,保留适当品牌特征。默认浅色中性页面、清楚的内容区和克制的品牌动作色;沿用已有主题。按[字体规范](../typography.md)选定当前应用的工具页文本角色,按[控件设计](../components.md)统一当前所需变体并用于页面。密度由频率和字段数决定,不把内容稀疏化当作精致。
|
|
8
|
-
|
|
9
|
-
构图先为当前任务分配空间,再放必要辅助信息;同一应用的排班、创作、个人任务不共用固定 KPI 开场。需要正向参考时只读[业务操作示例](../examples.md#业务操作示例)中对应小节,理解对齐、比例与视觉重量,不复制模块清单。
|
|
10
|
-
|
|
11
|
-
工作台可由待办、异常或最近处理对象开场;仅在统计帮助行动时加入指标。品牌感来自导航、字体细节、色彩与业务内容,不默认依赖大幅 Hero;身份与文案遵守通用规范。
|
|
12
|
-
|
|
13
|
-
## 默认布局与控件配方
|
|
14
|
-
|
|
15
|
-
普通业务页[直接在页面上排版](../composition.md#普通业务页直接排版):页头、工具栏、表单/列表/日历与动作共用对齐线,不加包住整页内容的 Card/Panel。只去边框和阴影仍可能留下无用途的底板;业务分组默认无背景、无圆角外壳。局部独立对象确需比较、选择或预览时再用卡片,保留输入边界、日历网格、错误与浮层层级。
|
|
16
|
-
|
|
17
|
-
需要新建控件基准时按 [A/B/C 配方](../control-recipes.md)选择:通用或目标密度不明确时 A,持续密集处理记录/筛选时优先 B,明确需要舒展输入时优先 C。用户及已有有效规范优先,一个应用保留同一基础;不因为每页都有表单就逐页改用 C,也不因 B 而改成绿色。形状、密度与配色分别落实为实际复用的规范。
|
|
18
|
-
|
|
19
|
-
## 页面模式
|
|
20
|
-
|
|
21
|
-
### 工作台
|
|
22
|
-
|
|
23
|
-
先按当前角色任务排序:需要立即处理的对象 → 常用操作 → 相关状态与动态。角色与可见数据由主流程提供,不自行增加权限。用明确对象和动作替代一组泛化“效率、增长、赋能”卡片。布局可为待办主区配上下文侧区,也可为紧凑队列;内容支持哪个才用哪个。
|
|
24
|
-
|
|
25
|
-
先为主要工作区分配空间,再安排摘要与辅助内容。页面头采用标题与动作,不默认写“查看、维护、管理……”的功能概述,也不以所有内容塞进首屏为目标。操作工作区随可用宽度伸展;表格、日历不跟随单列表单或说明文字一起被限宽。
|
|
26
|
-
|
|
27
|
-
### 创作与素材浏览
|
|
28
|
-
|
|
29
|
-
创作输入是主要任务时可以突出,围绕输入、必要对象选择、提交和结果组织。使用输入示例帮助表达需求,快捷任务用于预填或操作,不在副标题复述“用自然语言描述……系统结合……生成……”的处理流程。未表达且影响当前选择的能力或输入限制就近保留,例如只有图片快捷任务时不能误删视频能力入口信息;不将所有后台规则搬到输入区上方。
|
|
30
|
-
|
|
31
|
-
自然语言输入配快捷示例时,步骤条、输入主区和示例区可直接放在页面布局中,不默认把整组套进大圆角面板。Textarea 保留清楚输入边界;示例优先用紧凑、可点击的文字行及悬停/焦点反馈,不逐条套高内边距描边卡。通过按钮语义和清楚的动作表达支持填充,不只依赖“点击填充”的括注;去掉外壳不能删除预填功能。清空等低优先级操作使用应用共用的轻量变体。
|
|
32
|
-
|
|
33
|
-
素材卡要能辨认内容及必要的对象、类型、版本或状态。根据浏览任务与素材比例决定预览高度、列宽、裁切或留边,不让宽屏网格中的预览随列宽无限长高,也不靠巨大空色块制造视觉内容。标题通常在卡片信息区呈现;不要为了填预览而再复制一次标题,素材本身包含文字除外。
|
|
34
|
-
|
|
35
|
-
使用已有且获准使用的代表性素材。没有图片时呈现可理解的回退与已有元数据;按实际状态区分“暂无预览”、生成中和加载失败,不因无图推断任务失败。任务已完成也可能没有可用预览,两者分别表达。不强制引入外部图片服务或新生成流程。
|
|
36
|
-
|
|
37
|
-
### 快速记录与个人工作台
|
|
38
|
-
|
|
39
|
-
围绕当前任务、输入和下一步分配空间,统计作辅助。输入区应能正常阅读与编辑,多栏过窄时改为单列或调整比例,不靠缩小文字维持双栏。
|
|
40
|
-
|
|
41
|
-
桌面按主任务与辅助区组织有效宽度,专注输入区可局部限宽,不把整页套进固定手机列;用户明确要求手机外壳时保留。并列同级统计卡遵守通用规范的同排等高与内容对齐,不能因说明长短各自生长。任务优先级、今日焦点与关联目标按真实含义呈现。
|
|
42
|
-
|
|
43
|
-
### 列表与台账
|
|
44
|
-
|
|
45
|
-
顺序通常是页面身份与主要新增动作 → 搜索/筛选 → 记录及选择状态 → 分页或加载更多,直接在页面布局上组织,不用整页卡片包围。让筛选范围、结果数量与清空入口可见;结果数和“全选”的含义与当前数据范围一致。
|
|
46
|
-
|
|
47
|
-
- 文本左对齐,数字右对齐,日期和状态格式统一。为主要标识、金额和日期分配可读宽度,避免完整日期或关键数值被挤成难扫读的碎片;空间不足时调整列分配或采用局部滚动,次要字段按任务优先级收纳。
|
|
48
|
-
- 行尾放操作,频繁动作直接可达,低频动作可收进菜单。避免每行排列大量彩色按钮。
|
|
49
|
-
- 批量操作只在选中后突出,清楚显示选择数量与作用范围。不能把“本页全选”描述成“全部结果”。
|
|
50
|
-
- 空值使用一致表达;长文本可打开详情或展开,不能仅靠 hover。保留筛选、排序、页码和滚动上下文。
|
|
51
|
-
- 每条记录使用稳定 ID。分页、过滤和排序按主 Skill 数据协议实现;不要为排版拉取整库。
|
|
52
|
-
|
|
53
|
-
### 详情
|
|
54
|
-
|
|
55
|
-
顶部包含可辨识的对象标题、状态和本次任务主要动作;下面按信息关系组织属性、相关对象和历史。无需所有信息卡片化。少量属性可用紧凑描述列表,长内容用阅读区,相关明细用表格。弹窗或抽屉适合局部查看;内容复杂且需要独立定位时使用已有页面结构。
|
|
56
|
-
|
|
57
|
-
### 表单
|
|
58
|
-
|
|
59
|
-
字段分组直接排在表单布局里,用区块标题与留白表达关系,不按组添加底板。短表单单列优先;多列只用于有明确关联的短字段。标签、帮助、必填与错误表达一致,错误关联到字段。长表单保持主要提交操作可达但不遮挡内容。
|
|
60
|
-
|
|
61
|
-
提交中防止重复操作;成功依据当前数据模式的返回,失败保留输入并定位错误。异步选项区分加载、无匹配与不可用。只对已经定义的业务限制进行校验,设计不增加必填项或审批步骤。编辑已有对象时明确保存与取消的含义。
|
|
62
|
-
|
|
63
|
-
### 排班与计划
|
|
64
|
-
|
|
65
|
-
围绕人员 × 日期/时段组织视图,月份、当前日期范围与门店/人员选择应可辨认。摘要与日历范围不同时就近说明,不能将本周数值改名为本月。月视图优先看日期分布和异常,周/日视图可展开时段细节;重复的月份或“班次”列只有提供额外识别作用时才占用网格空间。
|
|
66
|
-
|
|
67
|
-
排班摘要是日历的辅助信息,优先采用紧凑平面指标组或无描边、无投影的小型内容面,不自动添加装饰圆斑。可用宽度足以容纳标签与数值时,避免用两排高卡片把日历推到页面后半段;空间不足时按内容重排,不强制四列。月份与筛选靠近日历,不给工具栏和日历分别套重复外框;日期格所需网格线继续保留。
|
|
68
|
-
|
|
69
|
-
班次以文字、色彩或图案共同编码,图例与页面一致。常规记录使用适当的视觉重量,避免每条都用大块高饱和底色;异常依据真实状态突出。当前日、休息、未排班、不可用等仅在业务提供时呈现;不能把空单元格都推断为异常。
|
|
70
|
-
|
|
71
|
-
用高密度日期检查月历的可扫读性;可以紧凑呈现班次并提供可操作的“更多”或详情,完整时段、人员与必要状态仍需可达,不能静默删掉记录。避免少数繁忙日期无控制地撑高整周,不强制所有视图使用同一行高。
|
|
72
|
-
|
|
73
|
-
高密度桌面视图可提供局部横向滚动;窄屏可切换为按日或按人的列表,保留时段与操作。拖拽如存在,应有点击编辑或键盘可用替代,不用拖拽承载唯一修改入口。冲突、容量与合法转换由业务返回,界面展示原因和可用动作。
|
|
74
|
-
|
|
75
|
-
### 审批与处理
|
|
76
|
-
|
|
77
|
-
让当前状态、处理依据、申请内容和允许动作可见。危险或不可逆动作明确对象及后果,并遵守主流程已有授权方式;不额外发明审批机制。处理完成后局部刷新对象和队列,部分失败保留未完成项。
|
|
78
|
-
|
|
79
|
-
## 窄屏与状态
|
|
80
|
-
|
|
81
|
-
表格需逐列比较时使用独立滚动区,首要识别列与状态可达;逐条处理适合摘要行,点击进入完整信息。不要静默删列、丢状态或用文字逐字竖排压缩内容。错误和权限反馈留在相关区域,其他区域仍可操作。
|
|
82
|
-
|
|
83
|
-
## 场景检查
|
|
84
|
-
|
|
85
|
-
核对当前对象、范围和下一步的表达,列表/详情/编辑的上下文与按钮状态实现。代码与已有产物中核对日历密度、素材预览、输入和长字段处理,以及工作区宽度与同级组件对齐。检查方法遵循[设计自检与按需评审](../review.md),不新增运行态验收。
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
# 战报与数字叙事
|
|
2
|
-
|
|
3
|
-
适用:业绩展示、活动成果、年度回顾等滚动阅读页面。数字是叙事主角,每章表达一个有依据的成果;不是自助分析看板。基础规则见[通用规范](../foundations.md)。
|
|
4
|
-
|
|
5
|
-
## 情绪与设计语言
|
|
6
|
-
|
|
7
|
-
在已有品牌和用户要求内选择明暗、强调色和节奏。可参考:增长与庆祝适合明亮暖色;技术成果可用冷色或深色;年度仪式感可用深色暖强调;健康与可持续可用明亮绿色。无信号时使用清晰浅色,不靠关键词机械决定主题。
|
|
8
|
-
|
|
9
|
-
使用一个主强调色贯穿焦点数字、关键标记与图形;中性底色保持稳定,深度来自文字尺度、构图和少量表面层次。Shader 可增强特定 Hero,但不是战报的必要条件。
|
|
10
|
-
|
|
11
|
-
## Token 与排版起点
|
|
12
|
-
|
|
13
|
-
页面、两档表面、三档文字、品牌/品牌高亮/品牌淡底、边框和图表阶梯分别命名并映射现有主题。浅色背景 L 可从 0.96–0.98、文字 0.14–0.18、primary 0.55–0.72 起步;暗色背景 0.09–0.14、文字 0.93–0.96、primary 0.62–0.72 起步,按真实色相与对比验证。强调色不要覆盖所有文字。
|
|
14
|
-
|
|
15
|
-
| 角色 | 桌面起点 | 小屏起点 |
|
|
16
|
-
| --- | --- | --- |
|
|
17
|
-
| 单一焦点数字 | 96–140px | 48–64px |
|
|
18
|
-
| Hero 标题 | 56–88px | 32–44px |
|
|
19
|
-
| 章节标题 | 32–56px | 24–34px |
|
|
20
|
-
| 正文 | 15–18px | 15–16px |
|
|
21
|
-
| 注释 | 12–13px | 12–13px |
|
|
22
|
-
|
|
23
|
-
上表只提供候选尺度。按[字体规范](../typography.md)为当前战报选定标题、章节、正文、焦点数字与单位的完整组合,写成有用途的共享角色和响应式变体;不能让每章在范围中各自选值。标题按实际字体与中文可读性选字重。字体沿用可用资源,数字使用 tabular。单位紧随数值但更小,基线对齐,避免数值换行。应用导航和普通控件继续继承全站规范。
|
|
24
|
-
|
|
25
|
-
焦点数字随可用宽度和并列数量选择共享变体:单列可用展示字号,双列约 34–56px,三四列约 26–40px,更密集时优先重排或选择可读的紧凑变体,不逐个数字动态缩字。容器 `min-width: 0`,长数值保留精度与可读性,不能溢出相邻单元格。需要构图参考时读[战报示例](../examples.md#战报示例),关注焦点与证据的节奏,不固定 Hero 或章节。
|
|
26
|
-
|
|
27
|
-
## Hero
|
|
28
|
-
|
|
29
|
-
有明确核心成果时,Hero 用「主题/时期 + 标题 + 关键指标名与数字 + 必要比较」建立开场。焦点指标由业务定义或用户意图确定,数据模式与聚合遵守通用规范;示例成果不冒充真实业绩,来源表达沿用通用文案规则,不逐章追加模拟环境说明。
|
|
30
|
-
|
|
31
|
-
独立展示页可用接近一屏的开场;嵌在工作台或用户需要快速查看时收紧。Hero 不是必须:缺少可靠核心指标时可用简短标题与内容开场。
|
|
32
|
-
|
|
33
|
-
- 用户要求产品图或现场照片且资料存在时,让图片有实际展示区域,不能只保留装饰渐变。
|
|
34
|
-
- 数字主导可用不等分布局配时间与范围;图片主导可用文字与图片分区;极简仪式性开场可用居中排版。
|
|
35
|
-
- 只在收益明确且依赖可用时使用一个 Shader,限定 Hero 区域。现有图片、静态渐变或纯排版均可作为完整方案,不为 Shader 缺失中断实现。
|
|
36
|
-
- 装饰层绝对定位,内容在其上,避免负 z-index 或把 WebGL 包在透明度动画父层。离屏、后台和 reduced-motion 时停止或改静态;内容对比不依赖动画帧。
|
|
37
|
-
|
|
38
|
-
## 章节语法
|
|
39
|
-
|
|
40
|
-
先识别数据关系,再选表达,最后决定视觉强调。内容不足时不补空章节。
|
|
41
|
-
|
|
42
|
-
| 数据关系 | 结构 | 表现重点 |
|
|
43
|
-
| --- | --- | --- |
|
|
44
|
-
| 随时间变化 | 趋势图配短注释 | 关键变化与时间范围 |
|
|
45
|
-
| 构成 | 水平比例轨或堆叠 | 总量、分母与各部分 |
|
|
46
|
-
| 两项比较 | 成对数字或并列条 | 同尺度,差异有口径 |
|
|
47
|
-
| 排名 | 紧凑排序行 | 最大项、真实排序、完整或明确截取范围 |
|
|
48
|
-
| 多指标共同证明一个成果 | 相关数字组 | 一个共同结论,数字按列数缩放 |
|
|
49
|
-
| 用户提供的引言 | 独立文字区域 | 作为叙事停顿,不虚构引语 |
|
|
50
|
-
| 收束 | 简短结论与必要说明 | 仅在数据支持时出现 |
|
|
51
|
-
|
|
52
|
-
可用构图包括:单一焦点、非对称分区、连续横带、相关指标网格、比例轨、纯文字段落。通过疏密、图形和文字尺度形成节奏;不强制每两章换布局,也不为避免重复把同一种比较改成难懂的图。
|
|
53
|
-
|
|
54
|
-
内容宽度可从约 1024px 起步,章节留白比工具页大,但根据篇幅和设备调整。普通内容面默认无描边、无投影;章节主要通过留白和文字层级组织,必要内容面只承担所属图表或相关指标组。图表坐标或局部分隔按读取任务保留,不因章节分组给父子区域逐层画框;正式品牌边饰按明确要求处理。
|
|
55
|
-
|
|
56
|
-
## 图表与动效
|
|
57
|
-
|
|
58
|
-
沿用现有图表库与主题,显式 series 颜色。图表按任务选型,不把单色或禁用饼图当作普遍数据规则。完整数值、标签与单位比动画重要。
|
|
59
|
-
|
|
60
|
-
可在 Hero 或少数核心数字使用一次强调动画;图表、正文与章节壳体先保持可见。入场动效只作用于局部标题或装饰,避免快速滚动后内容仍隐藏。数字动画须使用已解析的数值,单位分开,格式与静态显示一致;未知值不能从 0 动画成假数值。
|
|
61
|
-
|
|
62
|
-
装饰动画通常约 600–1000ms,避免全页等待;图表默认静态,筛选或数据刷新不重播。reduced-motion 覆盖 JS 数字动画和 Shader;不可用时静态完成表达。
|
|
63
|
-
|
|
64
|
-
## 场景检查
|
|
65
|
-
|
|
66
|
-
核对章节数据依据、核心数字的指标名/单位/范围、任务路由与图片需求;正文和图表不被入场样式默认隐藏。方法遵循[设计自检与按需评审](../review.md)。
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
# 数据看板
|
|
2
|
-
|
|
3
|
-
适用:多指标扫描、筛选比较、经营总览、监控与异常定位。读者先扫视再阅读,每个区块能独立理解,相关指标和上下文相邻。用于线性结论阅读时选分析报告,主要处理记录时选业务操作。基础规则见[通用规范](../foundations.md)。
|
|
4
|
-
|
|
5
|
-
## 选择设计方向
|
|
6
|
-
|
|
7
|
-
在已有主题和用户品牌内确定明暗、强调色、字体、圆角、密度和表面方式。下表是可用起点,不按关键词强制切换,也不要求每个方向产生固定页面。
|
|
8
|
-
|
|
9
|
-
| 方向 | 适用感受 | 默认 token 参考(OKLCH) | 布局与字形 |
|
|
10
|
-
| --- | --- | --- | --- |
|
|
11
|
-
| 工程清晰 | 工程、技术指标 | ground `0.97 0.005 240`;primary `0.58 0.13 180` | 紧凑无衬线,圆角约 12px |
|
|
12
|
-
| 经营稳健 | 财务、经营比较 | ground `0.975 0.004 145`;primary `0.55 0.17 145` | 紧凑无衬线,圆角约 6px |
|
|
13
|
-
| 编辑式简报 | 高管重点、OKR | ground `1 0 0`;primary `0.546 0.245 262.88` | 中等密度、平面行分隔;有条件使用中英文配套衬线 |
|
|
14
|
-
| 夜间监控 | 明确暗色或夜间使用 | ground `0.11 0.002 260`;primary `0.72 0.18 45` | 密集、较锐利轮廓,数字可用等宽 |
|
|
15
|
-
| 通用清晰 | 无明显方向 | ground `0.97 0.005 263.168`;primary `0.523 0.239 263.168` | 紧凑无衬线,圆角约 8px |
|
|
16
|
-
|
|
17
|
-
品牌明确时以品牌色和对比度为准,不机械固定色相的亮度/色度。字体采用现有可用资源;新引入的 Geist、中文无衬线、Fraunces 等需实际加载,不假定包存在。方向表帮助选择关系,不形成一套与应用脱节的字体或控件规范:文本角色按[字体规范](../typography.md)固定具体组合,筛选与动作使用应用共用变体。
|
|
18
|
-
|
|
19
|
-
先确定最重要的比较关系,再分配指标、图表与行动区的面积;需要构图参考时读[看板示例](../examples.md#看板示例)。不能只统一圆角和颜色而保留无主次的模块堆叠。
|
|
20
|
-
|
|
21
|
-
看板可按独立指标或图表设置局部内容面,但不先加一张包住全页的大卡片;不是每组标题都需要自己的卡片。浅色内容表面可用纯白,暗色表面可比背景提升约 0.03–0.04 的 OKLCH L 并保持近中性。普通指标与图表内容面默认无描边、无投影,包括组件库自带的细灰边和常驻 ring;按[容器规则](../composition.md#容器与可见边界)用表面与留白分组。已有卡片并列时,父级为无装饰网格,不再套大卡片。编辑式方向可用连续平面与必要的局部分隔。
|
|
22
|
-
|
|
23
|
-
## Token 与颜色角色
|
|
24
|
-
|
|
25
|
-
把页面背景、两档表面、主/次/辅助文字、品牌、边框、浮层、输入与焦点,以及 Sidebar 变量映射到同一主题。检查 dark 下 Tabs、Tooltip、菜单是否意外继承浅色值。
|
|
26
|
-
|
|
27
|
-
- 焦点指标用品牌色,其余数值以正文色承载。焦点通过字号与位置建立,不默认单独增加全屏 Hero。
|
|
28
|
-
- 同一数量维度使用单色明度阶梯;双系列可结合深浅和线型。三种以上真实身份系列可用有限且可辨识的分类色,图例名称保持稳定。
|
|
29
|
-
- 暗色监控可优先单色阶梯,状态色用于状态点、文字和异常提示。若单色无法区分必要数据,应调整图形、标注或分图,不能牺牲理解来守色板。
|
|
30
|
-
- 正/负/警告颜色依据业务意义,成本下降可能是正向;无定义时不要自行宣布好坏。不要把一整块图表刷成语义色。
|
|
31
|
-
- 示例色阶是起点,需在真实背景检查文字、图形与相邻系列对比,不仅检查颜色代码。
|
|
32
|
-
|
|
33
|
-
## 信息结构
|
|
34
|
-
|
|
35
|
-
从用户提供的模块和数据构建区块,不要求补齐某个模板。可参考:经营总览为关键指标→趋势→构成→明细;执行简报为重点指标→进度/目标→趋势→风险;监控为状态→吞吐/延迟→健康分布→事件。没有对应数据就不用该区块,但用户要求的数据不能为了布局被删掉。
|
|
36
|
-
|
|
37
|
-
同一组 KPI 卡使用等宽网格、同排等高与统一内部槽位,标签、数字及必要说明对齐;可选说明不应改变相邻数字基线,也不补空话撑高。列数随可用宽度与内容调整,不固定四项模板。焦点可用更大数字或全宽结论区,但不破坏同级组件的几何一致性。
|
|
38
|
-
|
|
39
|
-
指标脚注保留定义、范围或行动所需信息,如加权口径、草稿是否计入、待审批数量。变化、目标与文案去重遵守通用规范,不为每张卡强制安排图形或副文案。
|
|
40
|
-
|
|
41
|
-
图表/表格标题放在所属内容区,单位、范围与口径采用一次清楚的表达;图例与坐标已传达的内容不再写成副标题。局部与全局范围不同时就近标明差异,不改数据迎合标题。看板工作区随可用宽度展开,不默认设置 1280px 等全局上限;用网格分配比较空间,文字说明可局部限宽。同排同级图表统一布局边界与标题区尺寸,布局边界不要求可见描边,图形比例按数据任务决定。
|
|
42
|
-
|
|
43
|
-
## 图表实现
|
|
44
|
-
|
|
45
|
-
沿用可用图表库。Recharts 的建议:使用项目现有 ChartContainer 或有明确高度的 ResponsiveContainer;每个 series 显式设置颜色,数据字段真实存在;默认关闭 series 入场动画,过滤后直接更新数据。不要复制不存在的导入路径。
|
|
46
|
-
|
|
47
|
-
| 分析任务 | 选择与边界 |
|
|
48
|
-
| --- | --- |
|
|
49
|
-
| 时间趋势 | 线或面积;多系列有图例,可辅以线型;密集点不逐点放大圆点 |
|
|
50
|
-
| 排名 | 降序水平条,最大在上;显式 fill/Cell,异常仅在有业务依据时标记 |
|
|
51
|
-
| 构成 | 比例条、堆叠或少量分类环图;标签清楚,分类过多时合理合并并可看明细 |
|
|
52
|
-
| 二维状态 | 网格热图,图例与可读标签一起提供 |
|
|
53
|
-
| 目标与实际 | 成对条或进度与偏差,目标口径明确 |
|
|
54
|
-
| 阶段分布 | 各阶段存量用同尺度条形图或表格,标签按业务阶段顺序排列 |
|
|
55
|
-
| 转化漏斗 | 数据满足通用规范的转化口径时使用;否则呈现阶段分布 |
|
|
56
|
-
|
|
57
|
-
坐标轴范围按数据与比较任务设置,不统一套“±10%”,不用负边距隐藏被截断的轴。轴格式不能四舍五入出重复刻度,单位转换保持一致;零值、缺失和阶段语义遵守通用规范。
|
|
58
|
-
|
|
59
|
-
Tooltip 背景、标题、系列文字均使用当前主题色,保留系列真实名称。面积可用低透明度同色填充;不要给每个分类一套装饰渐变。环图标签留足边距,图例与详细数值可读,不依赖 Tooltip 作为唯一说明。
|
|
60
|
-
|
|
61
|
-
## 交互与导航
|
|
62
|
-
|
|
63
|
-
控件由任务和可支持的数据决定,不以固定行数自动增加功能。时间跨度需要比较时提供窗口选择,表格有比较任务时提供排序,多个独立数据视图可用 Tabs。每个控件连接实际查询或已取得的完整小数据集;加载、失败和无结果保持条件可见。
|
|
64
|
-
|
|
65
|
-
服务端分页场景不能用当前页数组假装全量排序、全量筛选或全部计数。长明细使用真实分页、展开或明确的 Top N 标识,保留访问全部所需数据的途径。不要因筛选后为空删掉功能入口。
|
|
66
|
-
|
|
67
|
-
继承应用导航。独立看板只有真实目的地需要切换时才增加导航,内容区块本身不算页面;不强制“三页以上就侧栏”。使用现有组件的移动导航行为,主题统一,当前页明确。
|
|
68
|
-
|
|
69
|
-
## 窄屏与动效
|
|
70
|
-
|
|
71
|
-
KPI 可从两列起,长数值时降为单列;图表小屏堆叠,数字与单位不拆行。表格按任务选择摘要行或局部滚动,保留状态、时间和主要标识,不能靠删指标修溢出。
|
|
72
|
-
|
|
73
|
-
页面入场轻量且一次,区块整体出现,避免每张卡依次拖延。筛选与排序不重播入场,不每次把数字从零滚动。默认数字静态;若焦点数字确需一次动画,遵守 reduced-motion,真实刷新不能显示为虚假清零过程。
|
|
74
|
-
|
|
75
|
-
## 场景检查
|
|
76
|
-
|
|
77
|
-
核对模块归属、指标定义与范围、零值/缺失/变化、阶段顺序和负向数据;筛选与对应数据关联。检查图例、浮层主题、同排对齐和宽窄屏容器策略的实现,方法遵循[设计自检与按需评审](../review.md)。
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
# 节庆活动
|
|
2
|
-
|
|
3
|
-
适用:面向参与者的节庆促销、领券、商品活动、邀请、抽奖等页面。主活动对象、明确气氛和短参与路径构成重点。活动配置和营销后台使用业务操作规范。基础规则见[通用规范](../foundations.md)。
|
|
4
|
-
|
|
5
|
-
## 根据机制组织
|
|
6
|
-
|
|
7
|
-
先使用主流程已明确的机制,再选择对应构图。不因素材中有转盘或刮卡代码就新增业务机制。
|
|
8
|
-
|
|
9
|
-
| 实际机制 | 结构建议 |
|
|
10
|
-
| --- | --- |
|
|
11
|
-
| 商品、SKU、优惠券 | 活动介绍→目录/分类→商品与价格→适用券与真实动作 |
|
|
12
|
-
| 邀请、验证、刮卡 | 紧凑说明→资格输入/当前状态→可参与机制→实际结果 |
|
|
13
|
-
| 转盘或抽奖 | 活动对象→规则与资格→抽奖动作→结果与后续 |
|
|
14
|
-
| 其他已定义活动 | 复用主题基础,结构按需求组织,不强套无关范例 |
|
|
15
|
-
|
|
16
|
-
每个事实与主要 CTA 有明确归属;必要位置可有合理快捷入口,但不要反复重复倒计时、参与人数与口号。重要规则不能藏在装饰之后。
|
|
17
|
-
|
|
18
|
-
## 色彩与材质
|
|
19
|
-
|
|
20
|
-
从品牌与节日选择一套主底色、金色/高亮和辅助信号,不随机混色。以下沿用原资产的候选角色值,可适配真实品牌:
|
|
21
|
-
|
|
22
|
-
| 取向 | 主色 | 金色/高亮 | 次色 |
|
|
23
|
-
| --- | --- | --- | --- |
|
|
24
|
-
| 经典庆典 | `#A51D24` | `#F3C66B` | `#206B59` |
|
|
25
|
-
| 活跃橙色 | `#C8441F` | `#F1B84B` | `#238064` |
|
|
26
|
-
| 轻快洋红 | `#A61F52` | `#F0C76E` | `#25735C` |
|
|
27
|
-
| 清晰蓝色 | `#2459A6` | `#EFC76F` | `#217A68` |
|
|
28
|
-
| 克制典礼 | `#731821` | `#D7B56D` | `#8D7254` |
|
|
29
|
-
|
|
30
|
-
将颜色写入当前主题 token,主底色用于活动气氛,温暖浅纸面承载规则与内容,高亮用于主要动作或机制焦点。语义成功/错误另设变量,不用“金色”代替成功状态。检查浅纸面、深底与浮层上的真实文字对比。
|
|
31
|
-
|
|
32
|
-
允许活动需要的渐变、金属高光和少量纹理,但限定于标题或主机制,不铺满每张卡片。高端取向降低材质强度,活跃促销可更鲜明;普通表单、商品和说明保持清楚平整。不要把“去 AI 味”误解为去掉所有节日表达。
|
|
33
|
-
|
|
34
|
-
## 字体与空间
|
|
35
|
-
|
|
36
|
-
显示标题可选择有品牌依据的衬线、圆体或较强无衬线;正文与 CTA 保持清晰。按[字体规范](../typography.md)选定完整角色组合,标题表达不扩散到普通字段与规则正文;控件按[控件设计](../components.md)定义本活动作用域内的主题变体并共享。只使用实际加载的字体,按工程规范打包,不复制 Google Fonts `@import`。中文标题的字距、字重与行数以已有证据和内容决定,不强制全站衬线或 900 字重。需要构图参考时读[活动示例](../examples.md#活动示例),只迁移当前机制适用的关系。
|
|
37
|
-
|
|
38
|
-
圆角可从 8px 起,规则与商品面板用一致语言。商品图片先于正文,比例可从 4:3 开始,价格与主要动作紧邻。优惠券可用票券结构区分金额、门槛与动作,但虚线和缺口不能影响文本。
|
|
39
|
-
|
|
40
|
-
Hero 展示活动对象;邀请与输入类任务使用紧凑 Hero,让参与入口尽早出现。较强展示页可以突出视觉,但首屏仍让用户理解是什么活动及如何参与。窄屏堆叠内容,避免侧栏把主机制挤窄。
|
|
41
|
-
|
|
42
|
-
## 表现与组件
|
|
43
|
-
|
|
44
|
-
沿用现有按钮、输入框、Tabs、Dialog 等交互行为,通过 token 和变体调整主题。不要因某个范例要求而重写基础交互或切换整套库。卡片只包有边界的重复对象,例如商品;不把导航、整页表单和主机制都套白色卡片。
|
|
45
|
-
|
|
46
|
-
图片有替代文字与失败状态,头像有文字回退。浮层主题与活动容器一致,内容内滚动并有明确关闭方式。动效按实际活动选用,不必强制一个 Shader;已有装饰不相互竞争。
|
|
47
|
-
|
|
48
|
-
转盘、刮卡等若为实际需求,应将“机制显示”与“结果”分开:先取得结果,再用动画表现。实际接入时不在浏览器 `Math.random()` 决定奖项;明确 mock 时使用一致的模拟结果。刮卡既有指针操作,也有可访问的揭晓方式,指针划动次数不作为资格校验。
|
|
49
|
-
|
|
50
|
-
## 活动数据与状态
|
|
51
|
-
|
|
52
|
-
继承通用规范的数据模式:实际接入使用主流程提供的资格、次数、库存、券和奖励状态;明确本地 mock 时使用一致 fixture 与模拟状态。模拟结果的必要辨识按通用文案规则处理,不另加整页技术说明。邀请码长度、按钮点击或动画完成都不独立代表成功,不推断未提供的规则。
|
|
53
|
-
|
|
54
|
-
- 加载资格:显示检查中,不提前承诺可参与。
|
|
55
|
-
- 可参与:清楚展示当前动作及已有规则。
|
|
56
|
-
- 提交中:禁止重复动作,保持状态可理解。
|
|
57
|
-
- 成功:按当前模式返回的结果展示;真实“奖励已到账”须有确已到账的返回,模拟到账须能辨认是演示结果。
|
|
58
|
-
- 未获奖/不可参与:依据业务结果解释,不把正常结果显示为系统错误。
|
|
59
|
-
- 失败或结果未知:给已有能力支持的恢复入口;未知结果不诱导重复抽取或重复领取。
|
|
60
|
-
|
|
61
|
-
倒计时、价格、门槛、库存、概率、参与人数与开奖时间使用当前模式的数据。实际接入缺少这些数据时按需省略或表达缺失,不能用 fixture 填补;本地 mock 的数值与规则、操作结果保持一致。设计不新增活动规则、通知或发奖能力。
|
|
62
|
-
|
|
63
|
-
## 动效与降级
|
|
64
|
-
|
|
65
|
-
主机制可有较长动画,但请求状态与结果不能被动画掩盖;支持 reduced-motion 时直接显示或简化过渡。Shader 与装饰动画在离屏或后台停止,不可用时回退静态主题。触控滑动不应被无关 canvas 捕获,核心参与路径有键盘入口。
|
|
66
|
-
|
|
67
|
-
## 场景检查
|
|
68
|
-
|
|
69
|
-
核对机制是否来自需求,主要参与入口、规则和资格的表达,动画与结果的关联,以及失败、未知和已到账的区分。方法遵循[设计自检与按需评审](../review.md)。
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
# 组件主题:先确定颜色角色,再映射配方
|
|
2
|
-
|
|
3
|
-
新增或调整组件配色时读取本文件,并结合[基础配方](control-recipes.md)。A/B/C 只决定控件几何、密度及输入边界方式,不指定蓝、绿、棕等品牌色。现有品牌与应用主题适用时直接映射,不因示例重新配色;没有现成主题时,Agent 根据当前产品、素材与任务自行确定一套颜色,不增加向用户询问配色的步骤。
|
|
4
|
-
|
|
5
|
-
## 选择与映射
|
|
6
|
-
|
|
7
|
-
先确认用户给出的品牌色、宿主约束、工程已用的颜色角色,以及是否有明确的浅色/暗色环境。没有现成主题时,确定一个承担主动作的颜色,再选中性表面的明度和冷暖;通过实际页面内容核对文字、图标及边界可读性。行业词不能直接决定色相,也不为每个页面重新抽色。
|
|
8
|
-
|
|
9
|
-
将实际 CSS 颜色值映射到下列 `--ds-*` 角色;[参考样式](components/code/theme.css)给出所需变量及从角色派生轻量交互色的方法。若工程的 `--primary` 等变量是 HSL 数值片段,先转换为完整 CSS 颜色,不能将片段直接赋给 `--ds-action`。现有主题命名可继续使用,不必在生产工程原样引入第二套变量;确保这些角色最终指向实际使用的值即可。
|
|
10
|
-
|
|
11
|
-
| 角色 | 决定方式 |
|
|
12
|
-
| --- | --- |
|
|
13
|
-
| `--ds-page`、`--ds-surface`、`--ds-popover` | 页面、普通内容与浮层的实际表面;暗色页面不强塞白底 |
|
|
14
|
-
| `--ds-text`、`--ds-muted`、`--ds-placeholder` | 主、次与占位文字。必要信息不能靠低对比度淡灰承载 |
|
|
15
|
-
| `--ds-action`、`--ds-on-action` | 主动作及其前景;前景依据选定的背景决定,不固定白字 |
|
|
16
|
-
| `--ds-focus` | 与主题协调、可辨的焦点颜色;常规输入在原边界位置呈现单层 1px 焦点 |
|
|
17
|
-
| `--ds-border`、`--ds-field` | 控件边界与输入表面;A 使用一层轻描边,B/C 采用轻填充,聚焦仍保留占位 |
|
|
18
|
-
| `--ds-danger`、`--ds-warning`、`--ds-success` | 独立语义状态;不拿品牌色代替错误或成功 |
|
|
19
|
-
| `--ds-shadow`、`--ds-scrim` | 仅为浮层分离层级;普通按钮与普通内容卡不借用投影 |
|
|
20
|
-
|
|
21
|
-
主动作的 hover/pressed、轻量选中底色、选项 hover 等从已选角色派生,控制变化幅度,不逐个组件添加新强调色。状态同时出现时保留实际含义,例如错误文字与焦点可同时存在;可见边界只能有一个绘制者。Portal 挂到 `body` 时,将主题变量映射到 Portal 内容或主题根节点,避免弹层回到另一套颜色。
|
|
22
|
-
|
|
23
|
-
## 色彩与几何的验收样本
|
|
24
|
-
|
|
25
|
-
同一套已选颜色分别套 A/B/C,应改变高度、圆角、密度和输入表面方式,不改变品牌身份。将同一配方套已有正式主题与另一个无品牌应用时,主动作、文字、浮层和状态应随各自主题变化;不能只让按钮变色。选中日期、勾选标记、进度填充和弹层文字都要核对,而不是只看静态触发器。
|
|
26
|
-
|
|
27
|
-
默认无视觉证据时,只能确认角色映射和代码调用;不得称实际配色已通过视觉评审。本文件不要求普通生成启动浏览器检查。
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
# 字体规范
|
|
2
|
-
|
|
3
|
-
新建或整体改版时确定一次应用共用的文本样式,页面复用;局部修改沿用现有样式,只处理本次涉及的角色。场景中的字号是候选起点,选定后写入工程的共享样式或主题,不能在每个页面重新挑值。
|
|
4
|
-
|
|
5
|
-
## 先确认字体,再确定角色
|
|
6
|
-
|
|
7
|
-
沿用宿主或工程的字体资源、实际可用字重及中文/拉丁文/数字覆盖。无品牌需求时系统字体栈就是完整选择,不默认下载新字体或引入 CDN。若新增字体确有收益,遵循工程的资源规则,只使用已提供的文件、字重与授权范围;不要用 CSS 中写了字体名作为字体已加载的证据。
|
|
8
|
-
|
|
9
|
-
为本次用到的角色确定:**字体族、字号、字重、行高、字距、文字颜色角色**。即使采用默认字距,也明确继承规则;颜色引用语义 token。使用已有命名体系,角色可共享同一底层样式,不强制一角色一组件或一组新变量。
|
|
10
|
-
|
|
11
|
-
| 角色 | 要确定的关系 |
|
|
12
|
-
| --- | --- |
|
|
13
|
-
| 页面标题 | 当前任务的标题层级;同类页面一致,长标题有换行策略 |
|
|
14
|
-
| 区块标题 | 能和内容区分,但不与页面标题或核心数字争抢注意力 |
|
|
15
|
-
| 正文/列表值 | 高频阅读的基准;中文行高与密度适合实际内容 |
|
|
16
|
-
| 标签/表头 | 易于关联字段或列;可与正文同字号,通过字重、位置和间距区分 |
|
|
17
|
-
| 控件文字 | 按钮、输入、选择框与导航所需的字号/行高,与控件高度配合 |
|
|
18
|
-
| 辅助文字 | 次级而仍可读;不能用极浅颜色承载唯一的状态、单位或必要规则 |
|
|
19
|
-
| 指标数值与单位 | 数值为主体、单位紧邻,基线和格式稳定;长数值有等值缩写或重排策略 |
|
|
20
|
-
| 展示标题/引言 | 仅在场景需要时扩展,限制在对应容器;不扩大普通工具页全部文字 |
|
|
21
|
-
|
|
22
|
-
不是所有页面都需要全部角色。导航、表头或标签若继承已有样式,不新建平行的一套;局部文案修改也不借机替换全站字体。
|
|
23
|
-
|
|
24
|
-
## 用完整组合建立层级
|
|
25
|
-
|
|
26
|
-
下面是一套适用于中等密度中文工具页的**候选组合**,展示如何把范围落实为具体值,不是所有应用的默认皮肤。字体为工程已有无衬线;示例字重以实际可用为前提,不可用时选择近似可用字重并重新协调层级。
|
|
27
|
-
|
|
28
|
-
| 角色 | 字号 / 行高 | 字重 | 字距 | 颜色角色 |
|
|
29
|
-
| --- | --- | --- | --- | --- |
|
|
30
|
-
| 页面标题 | 24 / 32px | 600 | normal | 主文本 |
|
|
31
|
-
| 区块标题 | 16 / 24px | 600 | normal | 主文本 |
|
|
32
|
-
| 正文/列表值 | 14 / 22px | 400 | normal | 主文本 |
|
|
33
|
-
| 标签/表头 | 14 / 20px | 500 | normal | 次文本 |
|
|
34
|
-
| 控件文字 | 14 / 20px | 500;输入值 400 | normal | 按控件状态映射 |
|
|
35
|
-
| 辅助文字 | 12 / 18px | 400 | normal | 可读的次文本 |
|
|
36
|
-
| 指标数值 | 28 / 36px | 600 | normal | 主文本 |
|
|
37
|
-
| 指标单位 | 14 / 20px | 400 | normal | 次文本 |
|
|
38
|
-
|
|
39
|
-
采用 [A/B/C 控件配方](control-recipes.md)时,将对应字号/行高映射到这里的“控件文字”角色,再协调邻接标签与正文。B 的 13px 是密集控件起点,不要求正文、表格值和必要说明全部缩小;已有品牌字体、可用字重与可读性优先。配方不另起一套与应用脱节的字体体系。
|
|
40
|
-
|
|
41
|
-
选择基准后,按内容调整整组关系:长文可扩大正文字号与行高,密集工具页可收紧容器间距,展示页可扩大局部标题跨度。不要逐个模块任意加字号;标题、正文和注释不必全用不同字体或全加粗。通过位置、间距、字重与尺度共同建立主次,也不要把所有非标题文字降成难读的浅灰。
|
|
42
|
-
|
|
43
|
-
中文正文保留足够行高;多行大标题也不能沿用导致上下字形相碰的英文紧行高。中文强调优先用可用字重,默认不加斜体、负字距或大范围字母式 tracking。拉丁缩写和英文短标签可按字体单独处理,不能将该字距应用于整段中文。语义标题层级与视觉样式分别处理,不为字号选择错误的 HTML 标题等级。
|
|
44
|
-
|
|
45
|
-
## 数字、长内容和响应式
|
|
46
|
-
|
|
47
|
-
- 金额、统计和需要纵向比较的编号使用字体支持的 `tabular-nums`;数值列右对齐。数字与单位关联,单位缩小但不淡到难读;不要靠空格字符手工对齐。
|
|
48
|
-
- 长标题自然换行或在允许的场景截断并提供可达的完整内容。输入标签、必要错误和关键金额不能仅为等高而裁掉;不按每条内容动态缩成不同字号。
|
|
49
|
-
- 同一种文本角色共用响应式规则;例如普通页标题窄屏适度缩小或保持原值,正文与输入文字保持可读。展示标题可按容器流式变化,但设定上下限,避免全页按视口缩放。
|
|
50
|
-
- 检查字体回退时仍有足够容器空间;对加载前后、长中文、混排、数值与单位的效果,只声明实际取得的证据。没有运行证据不补做浏览器检查,也不声称字体渲染已验证。
|
|
51
|
-
|
|
52
|
-
## 落实到共享代码
|
|
53
|
-
|
|
54
|
-
选定的组合进入现有主题、CSS 文本类、样式配置或组件变体,并被实际页面调用。仅声明一组未被使用的 token 不算完成;也不能只写“正文 13–15px”后让各页各自选择。按钮、输入、表头与卡片调用同一角色或明确的用途变体,主题切换继承文字颜色角色。
|
|
55
|
-
|
|
56
|
-
场景有展示需求时,在基础角色之外定义有语义的变体,如报告封面标题、战报焦点数字;同一展示角色仍共享规则,不让专题样式污染应用导航。是否美观按[review](review.md)区分实现证据与视觉证据,不新增字体规范文档或用户选字体环节。
|