@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,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)。
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
# 品牌、门户与产品展示
|
|
2
|
-
|
|
3
|
-
适用:品牌介绍、产品目录、内容门户、作品与案例展示。通过内容和品牌建立辨识度,引导浏览或已有业务动作。不要因为页面含产品列表就把产品管理后台路由到这里。基础规则见[通用规范](../foundations.md)。
|
|
4
|
-
|
|
5
|
-
## 设计决策
|
|
6
|
-
|
|
7
|
-
内部先按内容决定主视觉、阅读顺序与布局,再选定配色、标题字体、圆角、控件形态和密度;按[字体规范](../typography.md)与[控件设计](../components.md)落实为应用共用角色和变体。展示标题允许有品牌表达,普通输入与操作保持协调可用。不输出随机 Seed,不要求用户挑选风格。需要正向构图参考时读[展示示例](../examples.md#展示示例)。
|
|
8
|
-
|
|
9
|
-
按通用规范识别品牌来源与本次修改范围。新建时让业务内容决定性格:文化与出版可用编辑式排版,工程与技术可用清楚的数字与等宽细节,运动可有更强尺度与字重,儿童或轻松消费可用柔和字形,日常产品可用简洁几何感。行业是线索,不是强制风格标签。
|
|
10
|
-
|
|
11
|
-
字体需实际可用并覆盖目标语言;没有资源时选清楚的宿主字体,不把系统字体视为失败。展示字重随性格变化,小字保持可读,不强制全站 300 或 400。中文避免复制英文的大字距。
|
|
12
|
-
|
|
13
|
-
## 配色起点
|
|
14
|
-
|
|
15
|
-
用户给出颜色时优先使用并调整配套对比。以下是可选方向,按业务适用性选择,不随机抽取,也不要求只能使用表中颜色。
|
|
16
|
-
|
|
17
|
-
| 方向 | 背景与文字 | 强调色参考 |
|
|
18
|
-
| --- | --- | --- |
|
|
19
|
-
| 墨色编辑 | 浅中性底、深墨文字 | `oklch(0.1811 0.0016 197.01)` |
|
|
20
|
-
| 暖纸 | 暖白底、深棕黑文字 | `oklch(0.1901 0.0102 67.15)` |
|
|
21
|
-
| 自然鼠尾草 | 清淡中性底、深绿灰文字 | `oklch(0.6932 0.0455 175.73)` |
|
|
22
|
-
| 清晰群青 | 浅中性底、深文字 | `oklch(0.3932 0.2493 268.1)` |
|
|
23
|
-
| 鲜明朱红 | 暖浅底、深文字 | `oklch(0.6001 0.1998 31.96)` |
|
|
24
|
-
| 金色质感 | 暖纸底、深文字 | `oklch(0.75 0.14 85.27)` |
|
|
25
|
-
| 梅紫 | 中性浅底、深文字 | `oklch(0.5304 0.1648 330.16)` |
|
|
26
|
-
| 清爽青绿 | 浅底、冷深文字 | `oklch(0.5811 0.0904 195.92)` |
|
|
27
|
-
| 深石墨 | 深中性底、浅文字 | `oklch(0.6403 0.1555 255.11)` |
|
|
28
|
-
|
|
29
|
-
高亮度强调色不自动配白字,需验证按钮与文本对比。必要时用深色字或调整强调色。高饱和色可作为小面积动作与标记,不推导成满屏高饱和底色。相邻内容主要通过排版、间距与表面区分。
|
|
30
|
-
|
|
31
|
-
圆角与密度同站一致;锐角内容配胶囊控件可以是明确系统选择,不随组件随机混用。普通内容卡默认无描边、无投影;品牌明确需要边饰时使用有用途的主题变体,不因组件默认而给所有内容加灰框。
|
|
32
|
-
|
|
33
|
-
## 布局词汇
|
|
34
|
-
|
|
35
|
-
根据主要内容选择真正对应的结构,不把所有名称最后都实现为等宽卡片列表。
|
|
36
|
-
|
|
37
|
-
| 内容任务 | 可选结构 | 应保留的关系 |
|
|
38
|
-
| --- | --- | --- |
|
|
39
|
-
| 品牌介绍或产品叙事 | 连续内容流 | 先理解价值与对象,再看证据与行动 |
|
|
40
|
-
| 产品/案例详细介绍 | 不等分主区与 sticky 信息区 | 图片或内容与相关说明相邻,窄屏顺序合理 |
|
|
41
|
-
| 长文/观点 | 窄阅读列 | 标题、段落、插图有阅读节奏 |
|
|
42
|
-
| 不同权重的内容集合 | 不规则编辑网格 | 重点有更大面积,大小源于信息价值 |
|
|
43
|
-
| 图片是主体 | 画廊 | 图片比例、排序与查看体验优先 |
|
|
44
|
-
| 混合新闻或专题 | 杂志布局 | 主内容、次内容与短列表形成层级 |
|
|
45
|
-
| 双方对照或视觉与说明 | 分屏 | 两部分有真实关系,小屏合并后仍成立 |
|
|
46
|
-
| 商品/项目目录 | 规则目录网格或文本索引 | 便于比较和定位,不强求不规则 |
|
|
47
|
-
|
|
48
|
-
相似目录可以使用相似结构;不同内容任务不能只换文案与颜色。范例只是尺度、表面、图片和文字关系的参考,不要求复制具体行业、标题、栏目或数据。
|
|
49
|
-
|
|
50
|
-
## Hero 与导航
|
|
51
|
-
|
|
52
|
-
Hero 是否出现,由入口任务、品牌素材与内容决定。访客页面也可能直接进入目录,目标模糊时不要默认 80vh Shader;已有工具或消费工具应优先让功能可达。
|
|
53
|
-
|
|
54
|
-
需要 Hero 时选择图片、排版、产品演示或轻量背景之一作为主要视觉,不堆多种装饰。独立品牌开场可较大,内容查询入口则紧凑。用户提供图片时优先真实素材;缺图时使用诚实的占位或纯文字方案,不虚构产品照片。
|
|
55
|
-
|
|
56
|
-
Shader 仅在依赖可用且能增加表达时选择,默认低到中等对比,文字独立于 canvas。只动画文字或局部装饰,不将 WebGL 包在渐隐父元素中;支持静态与 reduced-motion 回退。
|
|
57
|
-
|
|
58
|
-
继承应用导航;新建展示页按真实目的地提供导航,不强制无内容的导航栏或空锚点。主 CTA 连接实际目标,目录动作有真实效果。
|
|
59
|
-
|
|
60
|
-
## 内容卡与详情
|
|
61
|
-
|
|
62
|
-
每张卡只呈现当前比较所需信息,不能把“图片、标题、价格、按钮”固定为所有行业四件套。产品可能需要规格与价格,文章需要标题与摘要,作品可能只需图片和标题。
|
|
63
|
-
|
|
64
|
-
主次信息通过排版与间距区分,内容面与嵌套关系遵循[容器规则](../composition.md#容器与可见边界),继续使用可靠组件并调整样式。模态详情沿用现有 Dialog,限制视口高度、内容内滚动,管理键盘焦点和关闭恢复。
|
|
65
|
-
|
|
66
|
-
图片有尺寸、比例与适当裁切;长内容可展开,图集能查看大图,资源失败有可理解替代。动画不隐藏首屏主要内容,字体失败不使布局崩溃。
|
|
67
|
-
|
|
68
|
-
## 场景检查
|
|
69
|
-
|
|
70
|
-
核对业务内容、Hero 对入口任务的作用、栏目与链接依据,以及图片失败回退、弹窗和窄屏实现。方法遵循[设计自检与按需评审](../review.md)。
|