@lark-base-open/base-database-cli 1.3.7 → 1.3.9
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 +42 -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 +16 -2
- package/dist/archive.d.ts.map +1 -1
- package/dist/archive.js +63 -13
- 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/function-description.d.ts +6 -0
- package/dist/function-description.d.ts.map +1 -0
- package/dist/function-description.js +29 -0
- package/dist/function-description.js.map +1 -0
- 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 +2 -0
- package/dist/lark-cli-error.d.ts.map +1 -1
- package/dist/lark-cli-error.js +42 -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/mutation.d.ts +1 -1
- package/dist/mutation.d.ts.map +1 -1
- package/dist/mutation.js +5 -5
- package/dist/mutation.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/project-context.d.ts.map +1 -1
- package/dist/project-context.js +42 -6
- package/dist/project-context.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 +32 -12
- package/skills/lark-base-database/references/ai-function.md +19 -7
- package/skills/lark-base-database/references/base-capability-routing.md +4 -4
- package/skills/lark-base-database/references/base-sql-errors.generated.md +845 -0
- package/skills/lark-base-database/references/database-function-limitations.md +20 -37
- package/skills/lark-base-database/references/database-function.md +39 -42
- package/skills/lark-base-database/references/development.md +4 -2
- package/skills/lark-base-database/references/faas.md +9 -7
- 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/mutations.md +4 -4
- 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/mutations/README.md +1 -1
- 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 +140 -25
- package/templates/database-starter/page/src/components/floating-button/utils/request-edit.test.ts +42 -0
- package/templates/database-starter/page/src/components/floating-button/utils/request-edit.ts +21 -0
- package/templates/database-starter/page/src/main.test.ts +28 -0
- package/templates/database-starter/page/src/main.tsx +2 -0
- 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,107 +0,0 @@
|
|
|
1
|
-
# 控件基础配方与选择
|
|
2
|
-
|
|
3
|
-
本次首次实现或调整交互控件外观时,**在决定尺寸和颜色之前**随[控件设计](components.md)读取,并从[组件索引](components/index.md)继续阅读任务用到的类型。已有合适规范可以继承,但需先核对;其依据必须在本轮开始前已经存在并被实际调用。本文件将 A/B/C 的可复用规格用于实际页面;它们是控件配方,不是页面布局模板、业务场景路由或三套固定配色。配色按[主题规则](theme.md)独立确定。选择由 Agent 根据主流程已有信息完成,不向用户追加风格选择。
|
|
4
|
-
|
|
5
|
-
## 选择顺序
|
|
6
|
-
|
|
7
|
-
1. **用户明确要求优先**;其次继承应用或宿主在本轮任务前已有、实际调用且有效的规范。已有规范合适时,不为套用 A/B/C 重做控件。
|
|
8
|
-
2. 需要新定规范时,按应用主要任务与密度匹配下表。按内容和操作判断,不按“CRM”“AI”“个人”等名称自动匹配。
|
|
9
|
-
3. 多种任务并存、没有明显主导密度时,以 A 为起点。没有足够线索也用 A,不随机抽取,不追加问卷。
|
|
10
|
-
|
|
11
|
-
| 条件 | 优先配方 | 决策依据 |
|
|
12
|
-
| --- | --- | --- |
|
|
13
|
-
| 通用业务界面、常规表单与列表、密度没有明显倾向 | A 清晰标准 | 清楚的输入边界和中等比例,作为默认起点 |
|
|
14
|
-
| 持续处理记录、较多并列筛选、密集表格或排班操作 | B 平面高效 | 紧凑比例、轻表面,把空间交给工作内容 |
|
|
15
|
-
| 创作或低频填写为主、字段较少、确实需要更舒展的输入空间 | C 舒展温和 | 较大的内边距和柔和形状;不能只因有表单就选 C |
|
|
16
|
-
|
|
17
|
-
这是按条件优先,不是 A > B > C 的质量排名。同一应用先有一套基础配方;不能列表页 B、详情页 A、编辑页 C,连带字体、圆角与色彩每页重选。局部确有密度需要时,从当前配方扩展命名明确的紧凑/舒展/触控尺寸变体,保留其形状、语义色与状态语言。触控要求独立处理,C 的 40px 视觉高度本身不代表触控目标已经足够。
|
|
18
|
-
|
|
19
|
-
## 三套具体规格
|
|
20
|
-
|
|
21
|
-
以下为没有既定规范时可直接采用的起始值;选定后写入共享定义。根据真实字体、用户要求和宿主约束调整时,成组调整比例,不能让每个调用点随意取值。Button、单行 Input、Select 触发器、组合输入共用当前密度。
|
|
22
|
-
|
|
23
|
-
| 规格 | A 清晰标准 | B 平面高效 | C 舒展温和 |
|
|
24
|
-
| --- | --- | --- | --- |
|
|
25
|
-
| 单行最小高度 | 36px | 32px | 40px |
|
|
26
|
-
| 控件文本字号 / 行高 | 14 / 20px | 13 / 20px | 14 / 20px |
|
|
27
|
-
| 按钮文字 / 输入值字重 | 500 / 400 | 500 / 400 | 500 / 400 |
|
|
28
|
-
| 水平内边距 | 12px | 10px | 14px |
|
|
29
|
-
| 单行垂直内边距参考 | 7px | 5px | 9px |
|
|
30
|
-
| 圆角 | 6px | 4px | 10px |
|
|
31
|
-
| 普通图标视觉尺寸 | 16px | 16px | 16px |
|
|
32
|
-
| 图标与文字间距 | 6px | 5px | 8px |
|
|
33
|
-
| 输入常态表面 | 干净输入面 + 1px 轻描边 | 与背景可区分的轻填充,常态边框透明 | 柔和轻填充,常态边框透明 |
|
|
34
|
-
| 普通控件投影 | 无 | 无 | 无 |
|
|
35
|
-
| 输入聚焦 | 同位置 1px 焦点色边界 | 同位置 1px 焦点色边界 | 同位置 1px 焦点色边界 |
|
|
36
|
-
|
|
37
|
-
输入表面继承当前明暗主题;浅色主题采用干净浅色面,已有暗色主题不强塞白底。使用 border-box。单行高度关系为文本行高 + 两侧内边距 + 两侧 1px 边界;无可见边框时仍保留等量透明占位,避免聚焦或错误时跳动。高度作为最小值,长动作文字应调整操作组、合理换行,不能被固定高度裁掉。
|
|
38
|
-
|
|
39
|
-
字号只定义控件角色,不把全站正文、页标题和图表文字都缩成 B 的 13px。[字体规范](typography.md)仍负责应用层级;若现有可用字重不含 500,选择稳定的近似字重并统一,不能逐控件伪造粗细。触控入口扩大命中区或使用合适尺寸变体,不靠压缩文字装入较小控件。
|
|
40
|
-
|
|
41
|
-
配方中的“轻描边”是输入边界,不是普通内容卡的灰框。选 A 不代表页面需要带边框的卡片,选 C 不代表页面需要大圆角底板;页面容器遵守[普通业务页直接排版](composition.md#普通业务页直接排版)。
|
|
42
|
-
|
|
43
|
-
## 颜色与配方分开决定
|
|
44
|
-
|
|
45
|
-
颜色遵守[应用配色规则](foundations.md#token-与主题),A/B/C 都能使用同一品牌主题。预览中的 A 蓝、B 绿、C 棕不构成绑定;不要把配方名称当颜色来源。
|
|
46
|
-
|
|
47
|
-
| 颜色角色 | 应用方式 |
|
|
48
|
-
| --- | --- |
|
|
49
|
-
| 主动作色与前景 | 来自已选定的应用主题;前景依据实际背景选择,亮色主动作不自动配白字 |
|
|
50
|
-
| 次动作表面与文字 | 轻量主题染色或中性面,文字仍清楚;不能所有按钮都变成灰底灰边 |
|
|
51
|
-
| 输入表面与常态边界 | 按配方选择描边或浅填充,颜色映射应用表面和边界角色 |
|
|
52
|
-
| 焦点色 | 与主题协调、较克制且可辨;不是固定鲜蓝,常规输入只保留一层 1px 边界 |
|
|
53
|
-
| hover / selected | 对现有角色作有限变化;selected 可用填充与勾选,不加粗外圈或改变控件尺寸 |
|
|
54
|
-
| 错误 / 警告 / 成功 | 沿用业务语义色,不与品牌动作色或分类色混用 |
|
|
55
|
-
| 浮层 | 继承所属应用或专题的主题;Portal 不能丢失表面、文字与状态颜色 |
|
|
56
|
-
|
|
57
|
-
例如应用已有紫色品牌且密集操作明显,可采用 B 的 32px / 4px 几何规格,再映射该应用的紫色动作、近中性输入表面与错误色;不复制预览里的绿色,也不为另一页面重新选蓝色。颜色选择无需再问用户,继承主流程已知信息即可。
|
|
58
|
-
|
|
59
|
-
## 操作与输入的共同外观
|
|
60
|
-
|
|
61
|
-
| 变体 | 起始处理 |
|
|
62
|
-
| --- | --- |
|
|
63
|
-
| 主按钮 | 主题动作色实底、清楚前景,无常驻阴影;一个操作组突出当前主动作 |
|
|
64
|
-
| 次按钮 | 轻填充优先;既有规范确用描边时只保留单层清楚边界,避免灰底 + 灰边 + 阴影堆叠 |
|
|
65
|
-
| 文字按钮 | 透明表面和稳定命中区,hover 轻量反馈;清空、取消等按实际层级使用 |
|
|
66
|
-
| 危险按钮 | 真实危险语义下使用危险色,不作为装饰;主次仍由当前任务决定 |
|
|
67
|
-
| 图标按钮 | 命中区与当前密度协调,图标居中并有可访问名称;使用同套图标,不以 emoji 代替 |
|
|
68
|
-
| 单行输入与搜索 | 标签可感知,输入值正文级可读;前缀图标与文字各有固定位置,placeholder 仅作示例 |
|
|
69
|
-
| Select 触发器 | 与输入同高度、表面和字形;值与尾部箭头分槽,长值不把相邻动作挤出页面 |
|
|
70
|
-
| 组合输入 | 前后缀、步进按钮共享一个输入外壳与焦点层;内部操作仍有自己的键盘位置反馈 |
|
|
71
|
-
|
|
72
|
-
优先映射工程已有组件的主题、slot 或 variant;轻量项目可用共享 CSS。不要额外引入一整套库。先清理库默认样式与调用方叠加来源,再应用配方;仅声明 token 而继续调用默认灰框组件不算落实。
|
|
73
|
-
|
|
74
|
-
## 状态与展开面板
|
|
75
|
-
|
|
76
|
-
具体状态契约见[单一焦点规则](components.md#一个控件一层聚焦强调)、[完整面板](components.md#控件规范包含展开后的面板)与[多行输入](components.md#多行输入与字段反馈),所有配方共用:
|
|
77
|
-
|
|
78
|
-
- 输入聚焦不叠加品牌色边框、outline 和 ring;普通控件无投影,浮层可用必要的轻投影。选中值、展开和实际键盘焦点分别表达,不把已填值长期画成聚焦态。
|
|
79
|
-
- 下拉、日期、时段和菜单的面板、选项、hover、selected、键盘焦点及必要滚动一起使用应用主题;只美化触发器而留下未设计的系统弹出样式不算完成。
|
|
80
|
-
- 面板内搜索点击后只显示输入光标,不新增矩形框、底线或整行填充;鼠标打开不自动聚焦搜索,键盘可以进入并有局部可辨标记。这是面板搜索的专用处理,不移除普通表单的输入边界。
|
|
81
|
-
- Textarea 明确 `resize: none`,没有右下角拖拽斜线。可从约 3 行起,自动增高到合理上限后内部滚动;预填、粘贴和窄屏换行也保留完整编辑能力。预览中的 220px 上限只是候选值,不限制真实任务。
|
|
82
|
-
- 普通字段校验恢复后移除该条错误及其描述关联,不展示“已填写”或成功勾选,不保留空帮助行。必要帮助、真实保存状态和失败反馈继续存在。
|
|
83
|
-
- disabled、loading、error 依据真实行为或用户明确要求的模拟出现。提交中防重复,尺寸稳定;不将预览里的演示等待带入无异步操作的业务按钮。
|
|
84
|
-
|
|
85
|
-
## 其他组件按需纳入同一规范
|
|
86
|
-
|
|
87
|
-
只实现任务用到的类型,按下表落实外观与行为的关系;不能为了“组件丰富”给页面补控件。
|
|
88
|
-
|
|
89
|
-
| 类型 | 视觉与行为要求 |
|
|
90
|
-
| --- | --- |
|
|
91
|
-
| 复选 / 单选 / 开关 | 保持原有语义和键盘行为,标签与命中区对齐;状态用同一主题表达;开关按已定义的即时生效或待保存语义工作 |
|
|
92
|
-
| 分段切换 / Tabs | 当前项清楚,切换实际改变对应视图或内容;不以假按钮伪造入口 |
|
|
93
|
-
| 搜索多选 | 触发器紧凑呈现已选值,保留移除和完整选择入口;搜索无结果与空选择分开,长列表局部滚动 |
|
|
94
|
-
| 日期 / 时段 | 月份导航、今天、选中及禁用项层级清楚;范围与校验来自业务,完整键盘与焦点恢复不因美化丢失 |
|
|
95
|
-
| 数字步进 / 金额前后缀 | 数值、单位与增减槽位对齐;最小值、最大值、步长和精度沿用业务,不能抄预览的 1–99 限制 |
|
|
96
|
-
| 状态标记 / 可移除标签 | 状态文字与点或轻填充协调;标签的关闭入口不干扰读数;关闭须改变真实选项或筛选条件 |
|
|
97
|
-
| 滑块 | 标签、当前值与轨道关系清楚,范围和步长正确;键盘可调整,不能只改变装饰进度 |
|
|
98
|
-
| 进度 / 加载反馈 | 进度对应真实或明确模拟的量;未知总量用不定进度,不编造百分比 |
|
|
99
|
-
| 菜单 | 次要动作紧凑排列,危险/不可用有真实含义;依附触发器定位,边缘不越出当前视口 |
|
|
100
|
-
| Dialog / Drawer | 平整内容面,标题/内容/动作对齐;内容滚动、关闭及焦点管理明确;不在浮层内部再垫一张包裹全部内容的装饰卡 |
|
|
101
|
-
| 分页 | 沿用本组高度和文字,当前页清楚,首尾不可用状态准确;切页与列表查询连接,保留筛选条件与范围含义 |
|
|
102
|
-
|
|
103
|
-
## 落实范围
|
|
104
|
-
|
|
105
|
-
把选定配方的尺寸、形状与状态映射到工程共享定义,再检查本次页面的实际调用。浮层和复合控件也使用同一套规范,不能仅修 Button。用户明确提供的正式规范优先,局部修改不扩大成全站改版。
|
|
106
|
-
|
|
107
|
-
页面背景和布局、字体层级、业务数据与控件配方分开负责。展示范例中的分组标题、规格说明、演示数据、模拟成功和预览脚注不进入实际业务 UI。检查方式仍按[review](review.md),本文件不新增设计文档、用户确认或浏览器检查步骤。
|
|
@@ -1,172 +0,0 @@
|
|
|
1
|
-
# 设计示例:看关系,再迁移
|
|
2
|
-
|
|
3
|
-
这些是为本规范编写的结构示意和局部设计配方,用于说明如何形成主次、比例、对齐与节奏;不是已通过用户评测的成品截图,也不是每次必须搭建的模板。示意框表示区域关系,不表示每个区域都要画卡片边框。仅阅读与当前任务对应的段落,不复制不存在的字段、指标、素材或操作。
|
|
4
|
-
|
|
5
|
-
| 当前任务 | 读取段落 |
|
|
6
|
-
| --- | --- |
|
|
7
|
-
| 列表、表单、详情、排班、创作、个人任务 | [业务操作示例](#业务操作示例)中的对应小节 |
|
|
8
|
-
| 经营总览与比较 | [看板示例](#看板示例) |
|
|
9
|
-
| 分析与结论阅读 | [分析报告示例](#分析报告示例) |
|
|
10
|
-
| 成果展示 | [战报示例](#战报示例) |
|
|
11
|
-
| 品牌、产品与作品浏览 | [展示示例](#展示示例) |
|
|
12
|
-
| 活动参与 | [活动示例](#活动示例) |
|
|
13
|
-
|
|
14
|
-
组件与文字的具体组合分别见[控件设计](components.md)、[A/B/C 控件配方](control-recipes.md)和[字体规范](typography.md)。迁移时保留适合任务的关系,按实际内容重新确定尺度、配色和密度;同一任务也可以有多种成立的构图。
|
|
15
|
-
|
|
16
|
-
## 业务操作示例
|
|
17
|
-
|
|
18
|
-
### 普通业务页:先直接排版
|
|
19
|
-
|
|
20
|
-
```text
|
|
21
|
-
客户 [新建客户]
|
|
22
|
-
[搜索] [负责人] [状态] 结果数量
|
|
23
|
-
|
|
24
|
-
客户名称 负责人 状态 操作
|
|
25
|
-
记录…… …… …… ……
|
|
26
|
-
记录…… …… …… ……
|
|
27
|
-
[分页]
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
**设计关系**:页头、工具栏与数据共用起止线,直接放在页面上,不加包住它们的 Card。应用背景与必要滚动容器继续存在;结构分组不附带圆角底板。数据行可有必要分隔,输入与焦点保留边界。
|
|
31
|
-
|
|
32
|
-
**迁移到表单/详情**:编辑页可为「标题与返回 → 两组直接排列的字段 → 保存/取消」,通过组标题与留白区分;详情页可为对象属性列表配明细或时间线。不先生成大面板,再把每组塞进小卡片。
|
|
33
|
-
|
|
34
|
-
**控件迁移**:新建规范时一般用 A,持续密集筛选和处理优先 B,明确需要舒展输入才优先 C;已有应用规范优先。C 只改变控件比例,不要求表单卡片化,三者都沿用当前应用配色。
|
|
35
|
-
|
|
36
|
-
### 排班:让日历成为工作区
|
|
37
|
-
|
|
38
|
-
```text
|
|
39
|
-
应用导航
|
|
40
|
-
排班 [新建班次]
|
|
41
|
-
[日期范围] [门店] [人员] [月/周]
|
|
42
|
-
必要的范围摘要或异常入口
|
|
43
|
-
┌───────────────────────────────────┐
|
|
44
|
-
│ 日历:日期、班次、人员、实际异常 │
|
|
45
|
-
│ 常规班次紧凑;繁忙日期可展开更多 │
|
|
46
|
-
└───────────────────────────────────┘
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
**设计关系**:页头、工具栏与日历共用起止线。日期范围靠近它控制的日历;摘要只有帮助排班决策时出现,不固定四张大 KPI。班次文字用稳定的时间/人员层级,常规记录低强度填充,异常在已有状态依据下提高对比。这样主要视觉重量来自工作内容,空白也留给日期关系。
|
|
50
|
-
|
|
51
|
-
**尺度迁移**:桌面宽度给日期列;窄屏按日或按人重排并保留完整时段。班次太多时用可操作展开,避免把每条都做成厚重彩色按钮。必要的“缺员”不能只剩颜色。
|
|
52
|
-
|
|
53
|
-
**同任务的另一种结构**:以批量分配人员为主时,可使用人员 × 日期矩阵;重点变成逐行比较,不照搬月历。两种结构仍复用同一文本与控件规范。
|
|
54
|
-
|
|
55
|
-
**输入排班需求的子页**:步骤条在普通布局中,下方是输入主区与紧凑示例列表。输入保留边界,示例作为真实预填按钮提供反馈;父级不垫大卡片底板,即使已去掉描边和阴影也不保留无用途的圆角背景,示例也不逐条放进厚重圆角卡。字段标签可直接用「排班需求」,示例已经展示输入方式时,不重复补充“用自然语言描述……结合……生成……”的功能说明。
|
|
56
|
-
|
|
57
|
-
**统计与日历的表面关系**:辅助统计采用平面分组或无描边、无投影的小型内容面;去掉无意义的角落圆斑。日历保留日期格所需线条,工具栏与日历整体不再被多重外框包裹。布局宽度足够时采用紧凑横向摘要;窄屏按内容重排,不能为了复制示例固定列数。
|
|
58
|
-
|
|
59
|
-
### 创作:输入紧凑,产物可辨
|
|
60
|
-
|
|
61
|
-
```text
|
|
62
|
-
创作 [素材库]
|
|
63
|
-
[必要对象选择]
|
|
64
|
-
[描述输入 ]
|
|
65
|
-
[真实快捷任务] [开始创作]
|
|
66
|
-
|
|
67
|
-
最近工作 [查看全部]
|
|
68
|
-
[真实预览] [真实预览] [真实预览]
|
|
69
|
-
名称 / 状态 名称 / 状态 名称 / 状态
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
**设计关系**:输入是当前主动作,最近工作让用户恢复已有任务。快捷任务与提交按钮是不同层级。素材使用一致的预览规则与信息槽位,名称只在需要处表达一次;图片中的自然文字不算重复 UI 标题。单张预览保持适合内容的比例,宽屏增加合适列数或比较空间,不把三块占位无限放大。
|
|
73
|
-
|
|
74
|
-
**无图变体**:若都没有可用预览,采用紧凑信息行「名称—对象/类型—状态—已有动作」,或小尺寸无预览回退;生成中、无预览和失败分别表达。不要借示例要求调用新图片服务或伪造产品图片。
|
|
75
|
-
|
|
76
|
-
**文案迁移**:标题和提交已表达创作动作时,不补流程副标题。必要上传限制在上传处,未被入口表达且影响选择的能力就近提示。
|
|
77
|
-
|
|
78
|
-
### 个人任务:重心与轻量辅助区
|
|
79
|
-
|
|
80
|
-
```text
|
|
81
|
-
今日 [已有导航]
|
|
82
|
-
当前任务与下一步 快速记录
|
|
83
|
-
任务标题 [输入]
|
|
84
|
-
必要上下文 [分类] [提交]
|
|
85
|
-
[开始专注]
|
|
86
|
-
必要统计:较小的数字与标签
|
|
87
|
-
待处理任务清单
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
**设计关系**:当前任务获得更大面积;记录区保证可输入的宽度。统计不与主任务争抢字号和品牌色,可用一条平面分组代替多张阴影卡片。任务名称、关联目标和截止日期按真实含义组织,既不补口号,也不误删不同事实。
|
|
91
|
-
|
|
92
|
-
**尺度迁移**:桌面使用有效分区,局部文字限宽;空间不足时顺序堆叠,而非保留拥挤双栏。若用户的核心任务是快速收集而非执行当前任务,允许输入主导、任务列表在后。问候只有用户需求或既有产品语气支持时保留。
|
|
93
|
-
|
|
94
|
-
## 看板示例
|
|
95
|
-
|
|
96
|
-
```text
|
|
97
|
-
经营概览 [范围] [负责范围]
|
|
98
|
-
相关指标组:数量由实际决策需要决定
|
|
99
|
-
┌─────────────────────┬───────────────┐
|
|
100
|
-
│ 趋势 / 核心比较 │ 阶段或构成 │
|
|
101
|
-
│ │ │
|
|
102
|
-
└─────────────────────┴───────────────┘
|
|
103
|
-
风险对象 下一步/待办
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
**设计关系**:趋势需要较长横轴时分配较宽区域;阶段分布依标签与数量获得自己的宽度。同级指标的标签区、数值基线与说明槽位共用规则,说明不存在时不补句。图表使用平整表面,重点系列有对比,其余系列保持可区分。风险与下一步相邻,让观察能连接行动。
|
|
107
|
-
|
|
108
|
-
**局部配方**:在中等密度工具页中,可使用「页面标题 24/32、区块标题 16/24、正文 14/22、指标 28/36」的协调组合;沿用实际品牌动作色,常规数字用主文本色。单位、范围和系列由标题、控件、图例、轴各承担一次清楚表达,不另配同义副标题。这些值选定后映射共享角色,不能在别页重新散选。
|
|
109
|
-
|
|
110
|
-
**另一种结构**:以风险处理为主时,将风险列表放在主区,趋势作为较小辅助区,按业务操作路由。只有少量指标时采用连续平面行和小图也可成立。不要为了复刻该示意增加趋势数据、指标数量或漏斗。
|
|
111
|
-
|
|
112
|
-
## 分析报告示例
|
|
113
|
-
|
|
114
|
-
```text
|
|
115
|
-
报告标题 / 范围
|
|
116
|
-
有依据的核心结论
|
|
117
|
-
──────────────────────────────────────
|
|
118
|
-
章节结论
|
|
119
|
-
支持结论的图表或明细
|
|
120
|
-
尚未表达但影响理解的口径 / 来源
|
|
121
|
-
|
|
122
|
-
下一章节结论与证据
|
|
123
|
-
```
|
|
124
|
-
|
|
125
|
-
**设计关系**:结论紧邻证据,章节之间留白大于章节内部间距。阅读文字局部限宽,复杂图表可比正文宽;共同起止线维持秩序。可用章节标题的尺度、正文行高和细分隔建立层级,不要求每节套一张卡。
|
|
126
|
-
|
|
127
|
-
**迁移条件**:没有证据时使用准确中性标题,不为示例中的“结论”写夸大判断。报告封面标题可扩展为独立字体角色,正文继续共享阅读角色。若用户需要频繁筛选监控,应改为看板结构。
|
|
128
|
-
|
|
129
|
-
## 战报示例
|
|
130
|
-
|
|
131
|
-
```text
|
|
132
|
-
主题 / 时期
|
|
133
|
-
成果名称 可靠的焦点数字 + 单位
|
|
134
|
-
必要的比较依据
|
|
135
|
-
|
|
136
|
-
趋势证据 → 构成或排名 → 数据支持的收束
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
**设计关系**:开场只集中强调有依据的核心成果;后续通过图形与文字尺度形成节奏。焦点数字、正文与单位分别定义角色,品牌强调集中在关键位置,不让每组数字都使用 Hero 字号。中间章节可采用连续横带、比较行或相关指标组,不机械交替背景颜色。
|
|
140
|
-
|
|
141
|
-
**迁移条件**:有真实图片且图片承担故事时,可把视觉重心交给图片;缺少焦点成果时采用紧凑文字开场。结果少就缩短篇幅,不凑固定章节或增加 Shader。
|
|
142
|
-
|
|
143
|
-
## 展示示例
|
|
144
|
-
|
|
145
|
-
```text
|
|
146
|
-
产品 / 作品名称 [真实导航]
|
|
147
|
-
┌───────────────────────┬─────────────┐
|
|
148
|
-
│ 代表性真实素材 │ 必要信息 │
|
|
149
|
-
│ │ 已有行动 │
|
|
150
|
-
└───────────────────────┴─────────────┘
|
|
151
|
-
可比较的目录或相关内容
|
|
152
|
-
```
|
|
153
|
-
|
|
154
|
-
**设计关系**:素材和说明相邻,比例由素材形态与阅读长度决定。标题、正文、价格/规格承担不同角色,目录统一图像规则方便比较;详情可不等分,目录可规则网格,无需为了“设计感”把两者都做成不规则拼贴。
|
|
155
|
-
|
|
156
|
-
**迁移条件**:查询目录是主要目的时直接以分类与目录开场,不强加 Hero。没有素材可采用清楚的文本索引;不要伪造作品或把业务后台改成品牌展台。正式品牌继续保留,无品牌普通工具无需生成彩色首字 Logo。
|
|
157
|
-
|
|
158
|
-
## 活动示例
|
|
159
|
-
|
|
160
|
-
```text
|
|
161
|
-
活动对象 / 主题
|
|
162
|
-
┌───────────────────────┬─────────────┐
|
|
163
|
-
│ 实际商品或参与机制 │ 当前资格 │
|
|
164
|
-
│ │ 必要规则 │
|
|
165
|
-
│ │ [参与动作] │
|
|
166
|
-
└───────────────────────┴─────────────┘
|
|
167
|
-
实际结果 / 已有后续入口
|
|
168
|
-
```
|
|
169
|
-
|
|
170
|
-
**设计关系**:活动气氛集中在主题或机制区域;规则和普通输入使用平整、可读表面,当前动作可发现。强展示标题与正文分别定字体角色,材质不覆盖规则。窄屏将资格、必要规则和参与入口按操作顺序排列,不留下被挤窄的侧栏。
|
|
171
|
-
|
|
172
|
-
**迁移条件**:商品促销可用目录和商品动作;邀请类优先输入与资格。图中的“机制”只能来自已有需求,不能据示意添加抽奖或发券。无论视觉气氛如何,结果由主流程的数据模式决定。
|
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
# 通用设计规范
|
|
2
|
-
|
|
3
|
-
适用于所有页面;场景文件只调整当前页面的表现方式。这里的尺寸和取向是可调整的起点,不是平台限制。以用户要求、已有设计、实际可读性和主要任务为依据选择,不为差异而改动成熟用法。
|
|
4
|
-
|
|
5
|
-
## 先决定信息,再决定风格
|
|
6
|
-
|
|
7
|
-
识别使用者当前要看什么、决定什么、做什么;把对象、状态、主要操作与结果放在对应位置。导航反映应用目的地,页面按任务组织,不机械照着 Base 表生成 CRUD,也不因暂时没有记录删除有效入口。
|
|
8
|
-
|
|
9
|
-
新建或整体改版时,读取[页面构图](composition.md)与[字体规范](typography.md);涉及交互控件时再读[控件设计](components.md)。先确定页面主次和宽度策略,再选定应用共用的主题、文本角色与控件变体,直接落实到共享代码。局部修改只读相关章节,从实际 token、公共组件和当前页面继承决策,只补任务涉及的缺项。不要新增向用户提问的步骤,也不要推导新的业务规则。
|
|
10
|
-
|
|
11
|
-
构图、字体和控件的决策以本次真实内容为依据:标题长度、数值位数、必要字段、状态及可用素材都参与设计。规则负责约束质量和复用,不要求所有应用采用同一字号、圆角、配色或结构。
|
|
12
|
-
|
|
13
|
-
## 应用身份与图标
|
|
14
|
-
|
|
15
|
-
从用户输入、宿主与工程识别产品名、Logo 及其来源。用户或宿主指定的正式品牌默认保留;工程中稳定采用的身份优先继承,但“代码里已有”不等于正式品牌。仅当本次范围包含品牌区清理,且已有材料可确认是临时占位或生成回退时,可改用文字名称。来源不明时保留,不凭外观判定为临时标识;明确的品牌改版要求优先。名称未给定时沿用主流程工作名或业务描述,不另造品牌名、口号或确认问题。
|
|
16
|
-
|
|
17
|
-
- 普通业务工具只有名称、没有 Logo 时,默认用清楚的文字名称,通过字重、间距与对齐组织身份区。不要为填满导航角落自动添加“彩色底形 + 首字/类别图标 + 阴影 + 功能副标语”,也不要随意换成抽象 SVG。
|
|
18
|
-
- 任务明确包含品牌标记设计时,再依据名称、含义和使用尺寸设计。正式单字标志、圆角或渐变不因形式相似就判为错误;品牌展示与活动按各自任务表达身份。
|
|
19
|
-
- 折叠侧栏、应用切换或 favicon 确实需要紧凑标识时,可用稳定的简称回退,并保留完整可访问名称。应用标识与账号头像应容易区分,不仅靠颜色区分两个相同首字。
|
|
20
|
-
- 功能图标沿用同一套合适的图标,保持笔画和视觉尺寸一致。emoji 可用于用户内容或明确的品牌表达,不默认替代工具栏图标、正式 Logo 或素材预览。AI 功能按真实能力命名,不自动附加机器人、星光与发光装饰。
|
|
21
|
-
|
|
22
|
-
## Token 与主题
|
|
23
|
-
|
|
24
|
-
颜色、文本样式、间距、圆角、阴影、控件高度与过渡时间收敛到现有主题变量和共享样式;文本样式不只定义字号,还包括字重、行高与文字颜色角色。按当前需要区分:页面背景、内容表面、浮层、主/次/辅助文本、边框、品牌动作、焦点、相关语义状态及图表颜色,不为未使用的组件补建 token。语义色独立于品牌色,不因品牌为红色就把所有状态变成危险。
|
|
25
|
-
|
|
26
|
-
- 默认浅色;明确品牌、现有界面或使用环境支持暗色时使用暗色,不凭“技术”“值班”等单个词强制换主题。不为单一主题需求增加切换器。
|
|
27
|
-
- 背景以中性或轻微染色为主,强调色集中用于需要注意的内容与操作。层级先由对比、排版与间距形成,避免靠多层阴影和多种彩色底板区分所有区域。
|
|
28
|
-
- 场景 token 映射到宿主实际使用的命名体系,不另造第二套互不关联的变量。存在 `card`、`popover`、`muted`、`input`、`ring`、`sidebar` 等组件变量时同步覆盖,检查暗色浮层与输入框。
|
|
29
|
-
- 应用根容器绘制实际页面背景;在嵌入式宿主中检查边缘与侧栏接缝,不假定宿主 `body` 颜色。
|
|
30
|
-
- 独立专题主题使用页面容器作用域。浮层通过宿主主题机制或 Portal 容器继承主题,不写影响所有页面的 `body, *` 重置。
|
|
31
|
-
- A/B/C 控件配方决定几何与状态表达,不绑定蓝、绿、紫等固定配色;选配方不重置已有品牌或全站主题。
|
|
32
|
-
|
|
33
|
-
### 先定一套应用配色再复用
|
|
34
|
-
|
|
35
|
-
优先级为用户明确要求、正式品牌及宿主/应用已有规范,再依据当前内容和使用环境补齐缺项。新建应用将所需颜色落实为共享 token 的具体取值,并让实际组件调用;不要只写“高级蓝”“低饱和”或给每页一段任意取值的范围。无需新增向用户询问配色的步骤。
|
|
36
|
-
|
|
37
|
-
组件需要新建或调整配色时,读取[组件主题](theme.md)中的角色与映射方法;配方 A/B/C 与品牌色独立。使用到的日期、下拉、菜单、Dialog 和 Drawer 的浮层同样应用所选主题,不仅修改入口控件。
|
|
38
|
-
|
|
39
|
-
先定页面/内容/浮层表面、主次文本、主要动作与其前景、输入边界、焦点、交互反馈和业务语义色。主要动作可有更强对比,普通输入和布局保持安静;焦点清楚但不粗重。前景色依据实际背景选择,不默认所有强调色上都放白字。错误、警告与成功表达业务状态,不按品牌色统一染色;弹出菜单、日期面板和 Portal 同步继承主题。图表颜色按比较关系分配,不把每个系列变成一种新的应用强调色。
|
|
40
|
-
|
|
41
|
-
## 排版与数字
|
|
42
|
-
|
|
43
|
-
按[字体规范](typography.md)为本次用到的文本角色选定完整样式并复用;字号范围只是选择起点,不能成为各页任意取值的许可。已有应用沿用其语义角色和可用字体,仅在本次范围内补充或修改。数字与单位关联、表格数值右对齐,长文字与窄屏通过布局和换行处理,不靠难读的小字号或裁掉关键内容适配。
|
|
44
|
-
|
|
45
|
-
## 布局、密度与组件
|
|
46
|
-
|
|
47
|
-
以 4px 基数、8px 节奏组织间距,组间距大于组内间距。工具页保持适当紧凑,表单和长文提供阅读空间;同类任务采用一致密度。表格行高可从 40/48/56px 选择。高密度不意味着所有文本缩小。
|
|
48
|
-
|
|
49
|
-
普通业务页默认[直接在页面上排版](composition.md#普通业务页直接排版):标题、工具栏、表单/列表/日历与动作直接构成页面,不先垫一张 Card/Panel。移除无用途的圆角底板本身,不能只去掉它的灰边与阴影。局部独立对象确需卡片时再使用,不把少量指标当作整页卡片化的依据。
|
|
50
|
-
|
|
51
|
-
并列内容用网格,顺序内容用步骤或时间轴,层级内容用分组。布局分组默认透明、无描边、无阴影;标题、间距和对齐已经表达关系时,不加可见外壳。普通内容卡默认无描边、无投影,用必要的表面明度差和留白组织;不因为组件库的 Card 自带灰边就继承该装饰。容器规则见[页面构图](composition.md#容器与可见边界)。
|
|
52
|
-
|
|
53
|
-
同一个内容组不默认叠加“外层面板 + 内层卡片”的重复可见外壳:子项需要独立卡片时,父级退为无装饰布局;父级已承担内容表面时,内部用平面分组、行和留白。输入边界、日历/表格网格、必要选择与焦点状态分别保留,不计为装饰性卡片嵌套。用户明确的视觉要求或正式品牌系统优先;例外依据当前任务,不以“能分组”为理由任意加框。用当前数据模式下的完整内容检查布局,不为凑列数删掉数据或添加指标。
|
|
54
|
-
|
|
55
|
-
沿用 starter 或已有组件库的可靠行为,通过 token、类名和组件变体完成当前产品的外观。新建或整体改版时,复用组件不等于接受未处理的默认样式;局部修改继续遵守原任务范围。弹窗、菜单、日期选择、Tooltip 保留定位、键盘和焦点管理,不另引整套组件库或图标依赖。
|
|
56
|
-
|
|
57
|
-
同一规则网格中、相同层级与结构的卡片统一列宽、同排高度、内边距和内容槽位。标题、指标与底部动作对齐;长标题或有无说明的差异通过共享网格行/槽位处理,不靠补空话、裁掉内容或逐卡写死高度。可用 Grid 等宽列与 stretch、卡片纵向 flex 和底部动作自动贴底实现;同排共同随内容增高。主次分区、编辑网格和不同任务的容器可有不同尺寸,窄屏堆叠后不保留桌面的空白高度。
|
|
58
|
-
|
|
59
|
-
### 控件外观
|
|
60
|
-
|
|
61
|
-
按[控件设计](components.md)先选定本次所需尺寸、层级与状态,形成应用共用变体后复用。需要新建基准时采用 [A/B/C 控件配方](control-recipes.md):通用或不明确时 A,持续密集操作优先 B,明确需要舒展输入时优先 C;已有有效规范优先,配色独立决定。普通按钮与输入框默认无投影,输入采用纯净表面与清楚边界;保留焦点、错误和禁用状态的可辨识性。控件美观通过比例、视觉重量、边界、间距和组合关系落实,不能把“全站统一”当作美观已经达成。
|
|
62
|
-
|
|
63
|
-
同一输入或选择控件仅由一层绘制焦点,展开面板也沿用控件规范;不能只定制入口而使用未设计的系统弹出样式。多行输入隐藏右下角拖拽斜线(`resize: none`),同时保留自动增高及长内容滚动。字段正常填写后不展示“已填写”等冗余补句;具体状态、键盘与长内容要求见[控件设计](components.md)。
|
|
64
|
-
|
|
65
|
-
表单有可感知 label;placeholder 只作示例。按钮说明结果,主次与危险动作有层级,同一区域突出当前主要动作。必要的行操作、批量选择范围、提交反馈可理解;不可仅用 hover 暴露核心能力。
|
|
66
|
-
|
|
67
|
-
## 数据、状态与交互表达
|
|
68
|
-
|
|
69
|
-
数据模式由用户与主 Skill 确定,设计层继承,所有场景适用:
|
|
70
|
-
|
|
71
|
-
- 实际接入:依据主流程的数据契约与业务返回展示。缺少数据或结果时保留空态、缺失或未知,不能自行切换 mock,也不把随机值或浏览器 state 冒充业务事实。
|
|
72
|
-
- 明确要求本地演示或 mock:可使用一致的 fixture 和模拟状态,统计、详情与操作结果彼此吻合;不为满足“真实数据”擅自接后端、鉴权或发布。仍需实现任务要求的本地交互,不能点击后仅弹成功而不更新对应状态。演示与真实结果的表达按下方文案规则处理。
|
|
73
|
-
|
|
74
|
-
以下“返回/结果”在两种模式中分别指业务返回或约定的模拟结果。统计定义与聚合、筛选遵循主流程,不通过字段名猜 sum/avg/max。只处理相关或要求模拟的状态,不为凑清单添加虚假延迟。
|
|
75
|
-
|
|
76
|
-
- loading:先呈现可用骨架与导航,远端区域分别加载,不用占位数冒充统计。
|
|
77
|
-
- empty:区分初始无数据与筛选无结果,给符合已有能力的下一步。
|
|
78
|
-
- error:明确受影响范围与可恢复动作,保留可用数据和输入。
|
|
79
|
-
- forbidden:说明当前不可访问,不显示伪空结果掩盖权限状态。
|
|
80
|
-
- submitting/success/partial-success:防止重复提交;依据返回显示结果,部分成功说明剩余事项。
|
|
81
|
-
|
|
82
|
-
只显示有业务与数据支持的控件。筛选、排序、Tabs、分页切实改变对应内容;请求中保留条件,旧响应不覆盖新条件。保持用户上下文,不为刷新局部数据重置整个页面。
|
|
83
|
-
|
|
84
|
-
## 数字与图表公共原则
|
|
85
|
-
|
|
86
|
-
先选比较任务,再选图形。趋势用线,数量比较用条,构成在分母明确时用堆叠/比例图,精确读取用表。颜色不是唯一标识,多系列结合图例、直接标签或线型。不同页面主题可变化,但同一业务状态和同一实体的编码在当前比较上下文中一致。
|
|
87
|
-
|
|
88
|
-
- 变化箭头、delta、sparkline 和目标进度须有对应比较值、序列或目标,范围与口径明确。当前筛选下缺少依据时省略或说明不可比较,不以静态文案假装趋势,也不混用“活跃客户”和“成交客户”等概念。
|
|
89
|
-
- 数值为零时保留类别和 0 标签,数量填充长度为零;标签与命中区单独实现,不用最小条宽把 0 画成非零。缺失不当作 0。柱状长度比较通常保留零基线,折线可在清晰标轴时收紧范围。
|
|
90
|
-
- 阶段存量按业务顺序展示,数量不必递减,不解释为同批对象的转化。转化漏斗需有一致的对象群、时间口径和明确分母;分母为零时不可计算,不按数量重排阶段或裁改数据来制造漏斗形状。
|
|
91
|
-
|
|
92
|
-
差异悬殊的指标分图或使用明确标注的指数。只对业务上可加和且互斥的分类合并“其他”,保留明细;不要合并不相关指标或自动删除负面数据。
|
|
93
|
-
|
|
94
|
-
使用工程已安装且合适的图表库,显式设置颜色、尺寸、单位、图例和 Tooltip。使用 Recharts 时保证容器可测量、series 字段存在、填色和动画策略明确。不要照搬其他工程的路径或假定 `ChartContainer` 已存在。
|
|
95
|
-
|
|
96
|
-
## 响应式、动效与可访问性
|
|
97
|
-
|
|
98
|
-
按内容任务区分容器:操作工作区、表格、日历与看板默认利用扣除导航和合理边距后的可用宽度;长文、单列表单或专注输入区可局部限宽;品牌与报告按阅读构图决定。不能给整站统一套窄阅读列,或将固定手机外壳用于用户未指定的桌面应用。
|
|
99
|
-
|
|
100
|
-
从宿主容器、应用根节点到主内容逐层处理可用宽高。识别 starter 遗留的根级 `max-width`、固定宽度、大 padding、全页居中与嵌套限宽,仅移除妨碍本次布局的约束;`w-full` 无法突破父级上限。侧栏后的主区可用 `flex: 1; min-width: 0`,子网格使用流式轨道,避免用 `100vw` 绕过宿主或侧栏。
|
|
101
|
-
|
|
102
|
-
宽屏扩展有效工作区:让表格列、日历日期格、图表与比较区获得空间,按内容增加合理列数或主次分区;不只把背景铺满而让主体始终缩在中间,也不靠字号、控件等比放大填屏。信息确实稀少时可留白,不虚构模块凑满;高度按任务组织,不把长页面整体垂直居中或缩放塞进一屏。
|
|
103
|
-
|
|
104
|
-
窄屏调整导航、列数、信息顺序与操作位置,flex/grid 子项按需 `min-width: 0`,页面级不横向溢出。表格需要逐列比较时保留独立滚动容器;适合逐条阅读时转摘要行,并提供关键字段和完整详情。固定操作考虑安全区。宽屏与窄屏均在实现中定义规则,验证方式沿用主流程,不因此新增浏览器检查。
|
|
105
|
-
|
|
106
|
-
触控目标以至少 44×44px 为出发点,可用外围命中区而非放大所有图标。核心任务可用键盘完成,焦点可辨识;弹窗处理焦点进入、关闭恢复和适当的焦点约束。状态结合文字,不仅靠颜色。按实际背景验证对比度。
|
|
107
|
-
|
|
108
|
-
工具页动效以反馈为主,通常 150–250ms;展示页按场景允许更有节奏的入场。避免初始隐藏整个页面、布局属性动画和反复播放导致数据难读。CSS 与 JS 动画都响应 reduced-motion;内容在动画、字体或装饰资源不可用时仍可读可操作。
|
|
109
|
-
|
|
110
|
-
## 文案与去 AI 味
|
|
111
|
-
|
|
112
|
-
页面头默认只放标题、必要范围与动作;副标题、功能介绍和指标补句默认不生成。标题组件的 description/helper 为可选项,缺省不渲染,也不保留空白占位。“信息是真的”或“增加了新信息”都不足以保留辅助文案:只有缺少它会影响当前选择、正确输入、读数或后果理解,且现有标题、字段、按钮、图例、坐标或交互尚未表达时,才在最相关位置补充。不要将 PRD、功能清单或实现说明搬成页面副标题。
|
|
113
|
-
|
|
114
|
-
- 按钮说明实际操作与结果;只进入下一步时不承诺已经生成或提交。placeholder 提供输入示例,不替代 label;帮助文字就近补充必要规则,不把后续页面的控件写成当前必须先完成的步骤。
|
|
115
|
-
- 同一可视区域的同一事实保留清楚的主表达,按文字与控件、图例、坐标共同判断。例如坐标已表达 7 个月、图例已区分新增商机与成交金额时,不再补“近 7 个月新增商机 / 成交金额”。不同时间口径、单位或分母仍须明确。
|
|
116
|
-
- 按含义去重,不按字面合并:事件日期与截止日期、任务优先级与今日焦点、任务与关联目标可能不同。仅调整 UI 模板,不改写用户录入的名称、正文或其他业务记录。
|
|
117
|
-
- 必要信息就近表达:上传限制放在上传处,保存不可逆的后果放在相关动作处,加权口径放在相应指标旁。导航与标题、不同操作上下文中的入口可合理重复;唯一必要说明不能仅 hover 可见。
|
|
118
|
-
- 用可发现的控件表达操作,不在每页副标题中写“点击查看”“管理、维护、生成”等操作手册。若有不明显的新交互,先改善入口;仍需帮助时就近提供短提示。删减后保留窄屏和相关状态所需的标签、单位、范围与恢复路径。
|
|
119
|
-
|
|
120
|
-
不默认添加“演示环境 / Mock 数据 / 操作仅保存在本地”等横幅、副标题或页脚,数据来源与保存方式通常在交付说明中交代;用户明确要求的标识沿用其范围。涉及模拟付款、领券或奖励结果且可能误认真实完成时,复用已有演示语境,必要时在结果处加最小辨识信息,不逐页重复技术免责声明。不可将模拟结果谎称为真实业务完成。
|
|
121
|
-
|
|
122
|
-
同一概念全站同名;删除无意义英文标签和普通工具页的宣传补句。不在业务界面暴露 SQL、binding、SDK 或内部发布流程。不设字数或删除比例目标。用户明确要求的品牌文案、问候或教学内容按其任务保留,不据此给其他区块补口号。
|
|
123
|
-
|
|
124
|
-
不要为了“像设计稿”补满 KPI、趋势、图片、徽章或 CTA。每个元素应承担信息、结构、品牌或操作职责;检查圆斑、色块与光晕是否有实际作用,避免沿用范例装饰。渐变、大标题和卡片可用于合适场景,不能成为没有内容依据的默认装饰。
|
|
125
|
-
|
|
126
|
-
多样性来自用户品牌、业务对象、内容形态和主要任务。范例展示的是关系与工艺,不是必须复制的骨架。不同任务应产生合理结构差异;同类操作允许相似,不以随机换色、字体或圆角制造差异。
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
# 设计自检与按需评审
|
|
2
|
-
|
|
3
|
-
本文件提供设计实现标准与检查项,不建立独立验收流程。检查时机、方法、范围与完成条件沿用主 Skill 和用户任务;不因加载本文件启动浏览器、遍历页面、截图、创建预览或新增运行态验证。
|
|
4
|
-
|
|
5
|
-
## 自检方式
|
|
6
|
-
|
|
7
|
-
普通生成与修改:核对受影响的代码、组件、样式、文案和已有产物,完成设计实现自检后进入主流程。不将浏览器可用作为自动验收的触发条件。
|
|
8
|
-
|
|
9
|
-
用户明确要求视觉/运行态验收,或主流程已经安排相关检查时:在其规定范围内使用可用证据应用下列检查项,不额外扩展到全站或所有视口。用户提供的截图可用于对应状态的视觉判断;没有交互证据时不推断点击、保存或权限行为通过。
|
|
10
|
-
|
|
11
|
-
| 范围 | 核对要点 |
|
|
12
|
-
| --- | --- |
|
|
13
|
-
| 任务与构图 | 主要任务决定焦点、分区与面积,页头/工具栏/内容有共同对齐;辅助区不与主区争抢视觉重量;功能介绍、摘要与装饰没有挤压工作区 |
|
|
14
|
-
| 全站连续性 | 导航、基础组件、语义色与字体一致;专题样式不污染其他页 |
|
|
15
|
-
| 字体规范 | 所用文本角色有具体字体/字号/字重/行高/字距/颜色选择,并在实际页面共享;已有规范被继承;长中文、数字单位、回退与响应式规则有对应实现 |
|
|
16
|
-
| 内容完整 | 用户要求的指标、记录、负向数据和标签未因布局删除;统计口径来自业务定义 |
|
|
17
|
-
| 容器与边界 | 普通业务页直接排版,没有无用途的整页 Card/Panel 或等价圆角底板;局部卡片有独立用途,布局分组没有自动加壳;同组父子未重复使用装饰外框,普通内容卡无默认描边/投影;组件默认边框、ring 和伪元素已核对;输入、数据网格、选择/焦点与浮层边界按职责保留 |
|
|
18
|
-
| 配方与配色 | 本次新增/调整控件前实际读取配方及对应组件参考;已有规范应在本轮前存在、实际调用且符合要求;新建基准按条件选择 A/B/C 并落实具体尺寸及变体,不逐页换配方;颜色独立选择并在实际调用中共享,浮层继承,状态色不被品牌色替代 |
|
|
19
|
-
| 控件设计与复用 | 所需密度、比例、层级与状态已落实为被实际调用的共享变体;图文和工具栏组合协调;没有未处理的灰底、边框和阴影堆叠;焦点、错误及输入边界仍可辨,状态变化不无故跳动 |
|
|
20
|
-
| 输入与展开面板 | 同一字段没有品牌色边框与 outline/ring 双框,常规输入焦点边界轻而清楚;点击选择器不无故自动强调内部搜索框,点击搜索后也无新增矩形框、底线或整行填充,键盘进入时有局部位置标记;复合输入只有一个边界所有者且内部焦点可辨;**核对实际页面调用中是否仍有 `select`、`input[type=date]`、`input[type=time]` 或其封装呈现系统弹层**,本地/mock/不发布不构成豁免;下拉/日期/时间/菜单按对应组件参考核对触发器和面板、选项、状态、明暗主题,保留选择、关闭与键盘能力;确属用户明确要求或平台硬约束时记录具体依据 |
|
|
21
|
-
| 多行输入与字段反馈 | Textarea 无原生拖拽斜线,长内容可编辑且不裁切;正常填入后错误及其描述关联恢复,无“已填写”补句或空白帮助行;必要规则及真实保存反馈保留 |
|
|
22
|
-
| 对齐与密度 | 同排同级卡片的尺寸、内边距与内容槽位统一;长标题、可选说明不打乱指标和动作对齐;长字段与日期不靠裁切或极小字号适配 |
|
|
23
|
-
| 交互 | 筛选/排序/切换确实改变对应内容;表单和弹窗可完成任务,模拟操作也更新关联状态;无装饰按钮与假成功 |
|
|
24
|
-
| 数据表达 | 继承主流程的数据模式,演示不冒充真实完成;缺失不当零,零值无非零填充;比较有依据,阶段与转化口径成立 |
|
|
25
|
-
| 状态 | 实际相关或用户要求模拟的 loading、empty、error、forbidden、submitting 和部分成功有恰当反馈;不为凑状态添加虚假等待 |
|
|
26
|
-
| 尺寸适配 | 工作区宽度随宿主容器伸展,根节点与父容器没有意外限宽;阅读区局部限宽;窄屏有明确重排与必要滚动策略 |
|
|
27
|
-
| 可访问性 | 标签与焦点清楚;键盘能完成核心操作;颜色有文字补充;减少动效有效 |
|
|
28
|
-
|
|
29
|
-
数据与交互检查仍遵守主 Skill 的授权及契约,不为自检增加业务写入、外发消息或用户确认。模拟结果与真实业务区分,数据缺失不构成切换 mock 的理由。
|
|
30
|
-
|
|
31
|
-
结论注明证据层级:实现已核对、运行效果已验证、有问题或未验证。没有运行证据时不声称真实交互或视觉通过,也不为消除所有“未验证”而自行启动额外检查。复用主流程已有结果,截图或代码存在本身不等于对应功能通过。
|
|
32
|
-
|
|
33
|
-
## 将实现一致性与实际美观分开判断
|
|
34
|
-
|
|
35
|
-
**实现一致性**可以从当前代码与配置核对:具体规范已确定、共用样式被实际调用、变体有用途、页面有尺寸策略;仅有一份 token 清单或 Agent 的事后自述不算复用证据。局部任务只核对涉及部分,不要求补齐整个设计系统。
|
|
36
|
-
|
|
37
|
-
**实际美观**在已有截图或任务已安排的视觉证据中判断,不以规则条数代替:
|
|
38
|
-
|
|
39
|
-
- 视线先落到当前任务或重要内容,主要区域的面积与内容量相称;不会被装饰、统计或辅助按钮带偏。
|
|
40
|
-
- 文字层级清楚,正文舒适,单位和辅助信息仍可读;不是所有内容都大、粗或淡。
|
|
41
|
-
- 组内与组间留白有节奏,共同对齐线清楚;没有密集控件旁接巨大空洞,也没有无内容依据的满屏卡片。
|
|
42
|
-
- 色彩、边界与表面配合,控件比例自然;同站一致中保留不同任务的构图差异。
|
|
43
|
-
- 素材与数据可辨,缺少资源时回退紧凑诚实;没有通过占位色块、重复文案或随机图标伪造完成度。
|
|
44
|
-
|
|
45
|
-
视觉问题应指出具体区域、现象及影响,如“辅助指标比主要输入更醒目”,再修正对应构图或共享规则,避免笼统要求“更高级”。对于卡片嵌套,核对页面→分组→子项各层实际背景、描边、圆角、ring 和阴影,由哪一层承担必要表面;不能只因组件没叫 Card 就判定通过,也不能仅把灰边调淡而保留重复外壳。普通业务页即使边框与阴影已去除,仍应移除无用途的额外圆角底板。截图只支持其页面、尺寸和状态;没有相应证据的项保留未验证。本节不会触发补截图、全站遍历或视觉修复循环。
|
|
46
|
-
|
|
47
|
-
## 场景专项
|
|
48
|
-
|
|
49
|
-
按本次范围内页面实际包含的内容与行为选择检查项,不以读过哪些场景文件为限。混合页面逐项适用,不要求加载全部场景;数字与图表无论出现在哪类页面都检查上表的数据表达。
|
|
50
|
-
|
|
51
|
-
- 业务操作:选择范围、行操作与批量动作明确,失败保留输入,详情与列表保留上下文。相关实现覆盖高密度日历的展开、可辨素材与无预览回退、输入区与长字段;不靠静默删记录或缩小文字处理布局。
|
|
52
|
-
- 看板或嵌入图表:口径、范围、单位与图例可见;局部与全局筛选范围一致或差异明确;筛选改变对应指标和图表。
|
|
53
|
-
- 分析报告:结论能被可见证据支持;口径、时间范围和来源一致;没有无必要的监控控件或戏剧化动效。
|
|
54
|
-
- 战报:每章有当前数据支持,示例成果不冒充真实业绩;节奏服务叙事,滚动后内容不消失。
|
|
55
|
-
- 品牌展示:品牌与当前任务内容主导布局;范例未被换字复制;图片、字体或 Shader 失败时仍可理解与操作。
|
|
56
|
-
- 节庆活动:活动对象和参与路径清楚;资格、次数、库存、结果与当前数据模式一致;无法参与、提交中、未知结果与已到账有明确区分。
|
|
57
|
-
|
|
58
|
-
## 去 AI 味与同质化检查
|
|
59
|
-
|
|
60
|
-
按以下区域核对 UI 模板、内容与已有视觉证据;规则见[通用规范](foundations.md)。辅助文案既要未被表达,也要对当前选择或操作必要,不能仅因“增加新信息”就保留。
|
|
61
|
-
|
|
62
|
-
| 检查位置 | 核对与处理 |
|
|
63
|
-
| --- | --- |
|
|
64
|
-
| 页面头与创作区 | 没有默认生成的功能副标题、操作手册或技术性演示横幅;确有必要的能力/限制信息就近表达,空 description 不占位 |
|
|
65
|
-
| 指标卡、图表与列表行 | 补句、比例与拼接字段是否为当前读数或动作必要且未被表达;含义不同的标签与业务记录是否被误删或改写 |
|
|
66
|
-
| 品牌区与账号区 | 品牌来源与本次修改范围是否支持保留或替换;是否把生成占位当正式品牌保护,或把正式标志当装饰删除;应用与头像是否可区分 |
|
|
67
|
-
| 图片、图标与装饰 | 素材可辨认或有诚实回退,功能图标一致;圆斑、光晕、大色块和卡片分组有作用,不以占位装饰冒充内容 |
|
|
68
|
-
| 跨页面结构 | 布局适合各自任务,同站基础语言一致;不为所有任务复制四 KPI 两图,也不为差异随机换色或破坏成熟用法 |
|
|
69
|
-
|
|
70
|
-
删减后核对相关实现仍保留必要标签、操作入口、范围、单位、风险与恢复能力;静态检查未覆盖的运行效果如实标记。不按字数、Logo 数量或统一极简样式验收;正式品牌、用户要求的语气与任务需要的视觉表达受到保护。
|
|
71
|
-
|
|
72
|
-
## 定向修复
|
|
73
|
-
|
|
74
|
-
按影响排序:业务可用与信息准确 → 核心内容可达 → 交互及布局 → 排版和视觉细节。只修复本次范围内有证据的问题;若根因是误路由,重读正确场景并调整受影响部分。
|
|
75
|
-
|
|
76
|
-
修复后核对受影响实现与必要信息,是否需要运行复验继续由主流程决定。本文件不设置浏览器复查轮数或自动循环;旧截图不能证明修改后的效果,不把“改了代码”写成“运行验证通过”。未解决问题与检查限制按主 Skill 报告。
|
|
77
|
-
|
|
78
|
-
本次应用的问题在本次工程修复;不在普通生成中自动修改公共 Prompt 或共享资产库。可把可复现问题记录为后续资产改进依据。
|
|
79
|
-
|
|
80
|
-
## 交付信息
|
|
81
|
-
|
|
82
|
-
回到主 Skill 原有交付方式。只报告与用户有关的设计变化、实际验证结果和影响使用的限制。需要审查证据时用「页面/状态—现象—影响—修复—验证结果」记录;不强制输出内部路由、token 清单或设计文档。
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
# 分析报告
|
|
2
|
-
|
|
3
|
-
适用:一次性或线性阅读的经营分析、专题诊断与管理汇报。结论在前,图表提供证据;丰富度来自图形、信息节奏与分析内容。需要频繁筛选监控时用看板。基础规则见[通用规范](../foundations.md)。
|
|
4
|
-
|
|
5
|
-
## 稳定特征与适应范围
|
|
6
|
-
|
|
7
|
-
保持:结论与证据相邻、可核查口径、克制动效、稳定阅读顺序、清楚的文字与数值层级。可变:品牌色、明暗、章节数量、图表形式、封面组织与内容密度。不要把所有报告做成相同章节或强制塞满 KPI。
|
|
8
|
-
|
|
9
|
-
以轻微暖纸感、单一强调色为默认方向;用户品牌优先。正文与标题默认清楚的无衬线,数字 tabular;无需强制下载特定字体。标题 30–44px、章节 24–32px、正文 14–16px、说明至少约 12px 是候选范围;按[字体规范](../typography.md)选定报告标题、章节、阅读正文的完整组合与响应式规则,跨章节复用,应用导航与工具栏仍继承全站样式。通过尺度与位置强调,不滥用粗体或巨型数字;不用场景规则禁止必要的可读字重。
|
|
10
|
-
|
|
11
|
-
需要构图参考时读[分析报告示例](../examples.md#分析报告示例),关注结论与证据距离、正文和图表的宽度关系;不复制章节数量。
|
|
12
|
-
|
|
13
|
-
## 表面与颜色
|
|
14
|
-
|
|
15
|
-
可用页面背景与一个阅读纸面形成关系,中间布局容器不再画可见外壳。纸面在浅色中最亮,默认无描边、无投影;参考 page L 0.98、paper L 1,表面色度低于约 0.006。章节内部以文字、留白和必要的局部分隔组织,不逐章套卡。用户明确要求的印刷边饰按品牌表达处理;宿主已形成纸面时直接复用。其余边界遵循[容器规则](../composition.md#容器与可见边界)。
|
|
16
|
-
|
|
17
|
-
强调色分成文字与图形两个角色:文字强调要在纸面上可读,数据填充可稍亮;次级数据用同色阶或中性淡化。浅色的 signature L 约 0.52、data-focus L 约 0.66 可作为起点,按实际色相验证。不要从范例固定继承蓝紫色。
|
|
18
|
-
|
|
19
|
-
正负变化色只用于业务支持的变化或异常,说明其含义。类别确需区分时才增加分类色;有序等级优先用同色阶。图表区保持平整,避免额外材质、发光和纹理影响读数。
|
|
20
|
-
|
|
21
|
-
## 页面与章节
|
|
22
|
-
|
|
23
|
-
阅读列可从最大约 1140px 开始,桌面纸面内边距约 64px,小屏 16–20px。外框在小屏收起,内容自然铺开,不通过双层大 padding 压窄正文。章节间距可从桌面 80–112px、小屏 48–64px 调整。
|
|
24
|
-
|
|
25
|
-
开头呈现用户提供的报告标题、时间/范围及核心结论;有可靠焦点数字时配指标名与单位,没有时不硬加数字封面。随后按分析任务组织证据:归因可先趋势,诊断可先核心图,比较可先对比数据,结构分析可先构成。
|
|
26
|
-
|
|
27
|
-
每个分析章节通常包括:
|
|
28
|
-
|
|
29
|
-
1. 指标或类别标识,仅在有用时出现。
|
|
30
|
-
2. 数据支持的结论式标题。
|
|
31
|
-
3. 必要的口径或上下文。
|
|
32
|
-
4. 主要证据图或表;比较任务可用一对相关图。
|
|
33
|
-
5. 仅在影响读数或结论时补充未表达的口径与来源,不默认给每张图配说明,也不复述图例和坐标。
|
|
34
|
-
|
|
35
|
-
例如「西北同比增长 32.6%」须有对应时间范围和比较值;无法证实“领跑”时不写排名断言。内容不足时使用中性准确标题,不为了结论式标题推导不存在的事实。
|
|
36
|
-
|
|
37
|
-
可选布局:全宽证据图、左结论右图、双图比较、精确明细表、数字结论、比例点阵。章节整体仍按阅读顺序推进;相邻章节仅在内容需要时变化,不为“避免重复”强迫不同图形。无需每章独立大卡片。
|
|
38
|
-
|
|
39
|
-
## 图形选择与细节
|
|
40
|
-
|
|
41
|
-
| 意图 | 证据形式 |
|
|
42
|
-
| --- | --- |
|
|
43
|
-
| 趋势、转折 | 线/面积,必要时标真实目标或事件窗口 |
|
|
44
|
-
| 排名、集中度 | 水平排名条;Pareto 在实际需要时组合数量与累计占比并清楚标轴 |
|
|
45
|
-
| 构成、分布 | 比例条、少量类别环图、分桶条;分类和分母明确 |
|
|
46
|
-
| 预算/目标与实际 | 成对比较与偏差标注 |
|
|
47
|
-
| 组间差异 | 相同尺度的小多图或并列比较 |
|
|
48
|
-
| 精确值、多属性 | 表格,数字对齐且单位一致 |
|
|
49
|
-
|
|
50
|
-
保留工程中可靠的图表容器、轴与 Tooltip,不手写数据坐标内核。图表默认静态;每个 series 颜色和单位显式设置。排名可使用轻量 RankBarRow;Tooltip、Delta、系列尾标签可以按需实现为共用组件,不要求复制一整套组件库。
|
|
51
|
-
|
|
52
|
-
将关键结论直接标在相关图形或说明中,读者不必 hover 才看懂。参考线与事件范围必须有真实含义;大小差异过大的指标分图。展示 Top N 时说明总数与截取范围,不能隐去影响结论的记录。
|
|
53
|
-
|
|
54
|
-
## 数据与文案
|
|
55
|
-
|
|
56
|
-
继承通用规范的数据模式:实际接入时,数字、对象、时间与口径来自真实查询或用户材料;明确的示例报告可使用一致 fixture,结论也须与示例证据对应。单位转换保持等值、精度与标注一致。结论只能表达证据支持的排序、比较或变化,不能据相关性推断因果。冲突输入按主流程处理,不自行创造“更合理”的结果。
|
|
57
|
-
|
|
58
|
-
不虚构数据来源、生成时间或署名;需要呈现示例报告来源时统一注明示例数据,不伪造外部出处或逐图重复模拟环境说明。无证据章节可省略;用户要求但当前无数据的部分应明确空态或缺失情况,不能悄悄隐藏。建议和依据在视觉上区分,不把行动建议写成已发生事实。
|
|
59
|
-
|
|
60
|
-
报告正文避免营销 CTA、口号与第二人称鼓动。真实需求中的导出、返回、筛选或分享入口可放在应用工具区,不因“印刷风格”删除已有功能。
|
|
61
|
-
|
|
62
|
-
## 动效与检查
|
|
63
|
-
|
|
64
|
-
默认静止,可选轻量一次入场;不使用数字滚动、WebGL、逐字揭示或滚动绑定。正文在首次绘制即可读,减少动效时完全静态。
|
|
65
|
-
|
|
66
|
-
核对结论与数据、跨章节的时间/单位,以及因果与排名依据;阅读宽度、图例和表格实现满足目标尺寸。方法遵循[设计自检与按需评审](../review.md)。
|