@teamix-evo/skills 0.5.0 → 0.6.0
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/package.json +2 -2
- package/src/teamix-evo-design-opentrek/SKILL.md +210 -42
- package/src/teamix-evo-design-opentrek/boundaries.md +3 -3
- package/src/teamix-evo-design-opentrek/components.md +41 -40
- package/src/teamix-evo-design-opentrek/examples/detail-ai-gateway-1.html +1069 -0
- package/src/teamix-evo-design-opentrek/examples/detail-ai-gateway-instance.html +941 -0
- package/src/teamix-evo-design-opentrek/examples/detail-page-api-doc.html +906 -0
- package/src/teamix-evo-design-opentrek/examples/detail-page-config.html +993 -0
- package/src/teamix-evo-design-opentrek/examples/detail-page-monitor.html +1339 -0
- package/src/teamix-evo-design-opentrek/examples/detail-page.html +933 -0
- package/src/teamix-evo-design-opentrek/examples/settings-page.html +1119 -0
- package/src/teamix-evo-design-opentrek/examples/standard-card-list.html +1094 -0
- package/src/teamix-evo-design-opentrek/examples/standard-table-list.html +1361 -0
- package/src/teamix-evo-design-opentrek/examples/wizard-form-page.html +877 -0
- package/src/teamix-evo-design-opentrek/flows.md +85 -12
- package/src/teamix-evo-design-opentrek/foundations.md +9 -9
- package/src/teamix-evo-design-opentrek/generation-flow.md +15 -3
- package/src/teamix-evo-design-opentrek/pages/detail-page/SKILL.md +260 -0
- package/src/teamix-evo-design-opentrek/pages/detail-page/patterns/api-doc-detail.md +163 -0
- package/src/teamix-evo-design-opentrek/pages/detail-page/patterns/comparison-detail.md +100 -0
- package/src/teamix-evo-design-opentrek/pages/detail-page/patterns/monitor-detail.md +190 -0
- package/src/teamix-evo-design-opentrek/pages/detail-page/patterns/resource-detail.md +148 -0
- package/src/teamix-evo-design-opentrek/pages/form-page/SKILL.md +362 -0
- package/src/teamix-evo-design-opentrek/pages/list-page/SKILL.md +286 -0
- package/src/teamix-evo-design-opentrek/pages/list-page/_shared/action-column-spec.md +60 -0
- package/src/teamix-evo-design-opentrek/pages/list-page/_shared/column-meta-rules.md +117 -0
- package/src/teamix-evo-design-opentrek/pages/list-page/_shared/search-combo-spec.md +194 -0
- package/src/teamix-evo-design-opentrek/pages/list-page/_shared/state-action-pattern.md +51 -0
- package/src/teamix-evo-design-opentrek/pages/list-page/patterns/advanced-filter-list.md +94 -0
- package/src/teamix-evo-design-opentrek/pages/list-page/patterns/card-list.md +558 -0
- package/src/teamix-evo-design-opentrek/pages/list-page/patterns/drawer-list.md +76 -0
- package/src/teamix-evo-design-opentrek/pages/list-page/patterns/expandable-list.md +70 -0
- package/src/teamix-evo-design-opentrek/pages/list-page/patterns/l2-sidebar-list.md +73 -0
- package/src/teamix-evo-design-opentrek/pages/list-page/patterns/standard-list.md +198 -0
- package/src/teamix-evo-design-opentrek/patterns/color-mapping.md +1 -1
- package/src/teamix-evo-design-opentrek/patterns/detail-page.md +217 -152
- package/src/teamix-evo-design-opentrek/patterns/form-page.md +437 -231
- package/src/teamix-evo-design-opentrek/patterns/list-page.md +220 -292
- package/src/teamix-evo-design-opentrek/patterns/page-types.md +40 -130
- package/src/teamix-evo-design-opentrek/rules/_assets/OP_AGENT RUNTIME.svg +1 -0
- package/src/teamix-evo-design-opentrek/rules/_assets/OP_AI GATEWAY.svg +1 -0
- package/src/teamix-evo-design-opentrek/rules/_assets/OP_AI STUDIO.svg +1 -0
- package/src/teamix-evo-design-opentrek/rules/_assets/OP_DEV-2.svg +1 -0
- package/src/teamix-evo-design-opentrek/rules/_assets/OP_LOGO.svg +1 -0
- package/src/teamix-evo-design-opentrek/rules/_assets/OP_OPS.svg +1 -0
- package/src/teamix-evo-design-opentrek/rules/boundaries.rules.json +3 -3
- package/src/teamix-evo-design-opentrek/rules/business-mapping.json +124 -0
- package/src/teamix-evo-design-opentrek/rules/common-components.json +924 -0
- package/src/teamix-evo-design-opentrek/rules/component-specs.json +1083 -0
- package/src/teamix-evo-design-opentrek/rules/design-tokens.css +433 -0
- package/src/teamix-evo-design-opentrek/rules/design-tokens.json +2798 -0
- package/src/teamix-evo-design-opentrek/rules/layout-rules.json +218 -0
- package/src/teamix-evo-design-opentrek/rules/page-flow.json +351 -0
- package/src/teamix-evo-design-opentrek/rules/page-frame.json +241 -0
- package/src/teamix-evo-design-opentrek/rules/page-header-spec.md +123 -0
- package/src/teamix-evo-design-opentrek/rules/page-types.json +206 -0
- package/src/teamix-evo-design-opentrek/rules/sidebar-spec.md +217 -0
- package/src/teamix-evo-design-opentrek/rules/styling.json +188 -0
- package/src/teamix-evo-design-opentrek/rules/token-mapping.md +284 -0
- package/src/teamix-evo-design-uni-manager/SKILL.md +1 -1
- package/src/teamix-evo-design-uni-manager/boundaries.md +3 -3
- package/src/teamix-evo-design-uni-manager/brand.md +1 -1
- package/src/teamix-evo-design-uni-manager/components.md +30 -28
- package/src/teamix-evo-design-uni-manager/foundations.md +21 -21
- package/src/teamix-evo-design-uni-manager/generation-flow.md +3 -1
- package/src/teamix-evo-design-uni-manager/patterns/detail-page.md +1 -1
- package/src/teamix-evo-design-uni-manager/patterns/form-page.md +18 -18
- package/src/teamix-evo-design-uni-manager/patterns/list-page.md +29 -29
- package/src/teamix-evo-design-uni-manager/patterns/page-types.md +11 -11
- package/src/teamix-evo-design-uni-manager/philosophy.md +1 -1
- package/src/teamix-evo-design-uni-manager/rules/boundaries.rules.json +3 -3
- package/src/teamix-evo-design-opentrek/patterns/sidebar.md +0 -122
|
@@ -0,0 +1,241 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": "1.2",
|
|
3
|
+
"description": "页面框架规范 — 定义所有页面类型的框架级属性(Sidebar含品牌区/Breadcrumb/返回按钮),子技能自动继承,无需重复声明。TopNavigation 已移除,品牌标识下沉至 Sidebar 顶部。",
|
|
4
|
+
"frameLevels": {
|
|
5
|
+
"L0": {
|
|
6
|
+
"name": "无导航页",
|
|
7
|
+
"topNavigation": false,
|
|
8
|
+
"sidebar": false,
|
|
9
|
+
"breadcrumb": false,
|
|
10
|
+
"backButton": false,
|
|
11
|
+
"layout": "SINGLE_COL",
|
|
12
|
+
"pageTypes": [
|
|
13
|
+
"ResultPage",
|
|
14
|
+
"ExceptionPage",
|
|
15
|
+
"WelcomePage"
|
|
16
|
+
],
|
|
17
|
+
"description": "无全局导航、无侧边栏、无面包屑的独立页面"
|
|
18
|
+
},
|
|
19
|
+
"L1": {
|
|
20
|
+
"name": "主页面",
|
|
21
|
+
"topNavigation": false,
|
|
22
|
+
"sidebar": true,
|
|
23
|
+
"breadcrumb": false,
|
|
24
|
+
"backButton": false,
|
|
25
|
+
"layout": "TWO_COL | SINGLE_COL",
|
|
26
|
+
"pageTypes": [
|
|
27
|
+
"ListPage",
|
|
28
|
+
"Dashboard",
|
|
29
|
+
"OverviewPage",
|
|
30
|
+
"WorkspacePage",
|
|
31
|
+
"KanbanPage"
|
|
32
|
+
],
|
|
33
|
+
"description": "Sidebar(含Logo+产品名),使用页头业务组件的标题基础组件模式。适用于 ListPage、Dashboard、OverviewPage。Sidebar 仅在 TWO_COL 布局时显示,SINGLE_COL 布局时 Sidebar 隐藏。"
|
|
34
|
+
},
|
|
35
|
+
"L2": {
|
|
36
|
+
"name": "子页面",
|
|
37
|
+
"topNavigation": false,
|
|
38
|
+
"sidebar": true,
|
|
39
|
+
"breadcrumb": true,
|
|
40
|
+
"backButton": false,
|
|
41
|
+
"layout": "TWO_COL | SINGLE_COL",
|
|
42
|
+
"pageTypes": [
|
|
43
|
+
"DetailPage",
|
|
44
|
+
"FormPage",
|
|
45
|
+
"WizardPage"
|
|
46
|
+
],
|
|
47
|
+
"description": "Sidebar(含Logo+产品名),使用页头业务组件的面包屑基础组件模式。面包屑父级项可点击返回上一级。适用于 DetailPage、FormPage、WizardPage。Sidebar 仅在 TWO_COL 布局时显示,SINGLE_COL 布局时 Sidebar 隐藏."
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
"pageAreaOrder": "Sidebar(Logo+Name) → PageContainer → ContentWrapper → Card(白卡容器) → [Breadcrumb + PageHeader] → [ActionToolbar] → [内容区] → [Pagination]",
|
|
51
|
+
"pageSkeleton": {
|
|
52
|
+
"description": "各框架级别的页面骨架图。仅展示框架组件占位,不包含业务内容区细节(内容区骨架见子技能 SKILL.md)。",
|
|
53
|
+
"L0": {
|
|
54
|
+
"label": "无导航页",
|
|
55
|
+
"ascii": "┌───────────────────────────────────┐\n│ PageContainer (全宽) │\n│ ContentWrapper │\n│ ┌─ Card(白卡容器) ──────────────┐ │\n│ │ [PageHeader] │ │\n│ │ [ActionToolbar] │ │\n│ │ [内容区] │ │\n│ │ [Pagination] │ │\n│ └───────────────────────────────┘ │\n└───────────────────────────────────┘",
|
|
56
|
+
"annotation": "无 TopNavigation / Sidebar / Breadcrumb。适用于 ResultPage、ExceptionPage、WelcomePage。所有内容放在 Card 白卡容器内."
|
|
57
|
+
},
|
|
58
|
+
"L1": {
|
|
59
|
+
"label": "主页面",
|
|
60
|
+
"ascii": "┌────────┬──────────────────────────────────────┐\n│Sidebar │ PageContainer │\n│Logo │ ┌─ ContentWrapper ────────────────┐ │\n│+Name │ │ ┌─ Card(白卡容器) ───────────┐ │ │\n│(240px) │ │ │ [PageHeader: 标题组件] │ │ │\n│ │ │ │ [ActionToolbar] │ │ │\n│ │ │ │ [DataTable/CardGrid] │ │ │\n│ │ │ │ [Pagination] │ │ │\n│ │ │ └────────────────────────────┘ │ │\n│ │ └─────────────────────────────────┘ │\n└────────┴──────────────────────────────────────┘",
|
|
61
|
+
"annotation": "Sidebar(顶部Logo+产品名)+ PageHeader(标题基础组件模式,无返回能力)+ ContentWrapper + Card白卡容器。适用于 ListPage、Dashboard、OverviewPage。Sidebar 仅在 TWO_COL 布局时显示,SINGLE_COL 布局时 Sidebar 隐藏。"
|
|
62
|
+
},
|
|
63
|
+
"L2": {
|
|
64
|
+
"label": "子页面",
|
|
65
|
+
"ascii": "┌────────┬──────────────────────────────────────┐\n│Sidebar │ PageContainer │\n│Logo │ ┌─ ContentWrapper ────────────────┐ │\n│+Name │ │ ┌─ Card(白卡容器) ───────────┐ │ │\n│(240px) │ │ │ [PageHeader: 面包屑组件] │ │ │\n│ │ │ │ [ActionToolbar] │ │ │\n│ │ │ │ [内容组件] │ │ │\n│ │ │ │ [Pagination] │ │ │\n│ │ │ └────────────────────────────┘ │ │\n│ │ └─────────────────────────────────┘ │\n└────────┴──────────────────────────────────────┘",
|
|
66
|
+
"annotation": "Sidebar(顶部Logo+产品名)+ PageHeader(面包屑基础组件模式,父级项点击返回)。PageHeader 必须在白卡容器内顶部渲染。使用面包屑基础组件模式时禁止展示标题基础组件(Breadcrumb 已承载导航与页面标识)。适用于 DetailPage、FormPage、WizardPage。Sidebar 仅在 TWO_COL 布局时显示,SINGLE_COL 布局时 Sidebar 隐藏."
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
"universalComponents": {
|
|
70
|
+
"description": "子技能自动继承的框架组件,SKILL.md 中无需再声明这些组件的存在性。",
|
|
71
|
+
"sidebar": {
|
|
72
|
+
"inheritLevel": [
|
|
73
|
+
"L1",
|
|
74
|
+
"L2"
|
|
75
|
+
],
|
|
76
|
+
"condition": "layout 为 TWO_COL 时显示;SINGLE_COL 时隐藏",
|
|
77
|
+
"specRef": "rules/sidebar-spec.md",
|
|
78
|
+
"spec": {
|
|
79
|
+
"width": "240px(= --layout-sidebar-width,详见 design-tokens.json sidebarRules.width.expanded)",
|
|
80
|
+
"collapsedWidth": "68px(详见 design-tokens.json sidebarRules.width.collapsed)",
|
|
81
|
+
"containerBorder": "禁止右侧外边框(详见 design-tokens.json sidebarRules.colors.container.border: none)",
|
|
82
|
+
"header": {
|
|
83
|
+
"description": "Sidebar 顶部品牌区域,替代原 TopNavigation 的 Logo+ProductName。禁止底部边框(与下方菜单区无分割线,通过背景色一致实现视觉区分)。",
|
|
84
|
+
"height": "56px",
|
|
85
|
+
"padding": "0 16px",
|
|
86
|
+
"elements": [
|
|
87
|
+
"Logo Icon (20x20)",
|
|
88
|
+
"ProductName (text-xl, font-black, 20px, 间距 4px)"
|
|
89
|
+
],
|
|
90
|
+
"collapsedState": {
|
|
91
|
+
"description": "收起态:显示折叠 Logo(30x30px),隐藏 ProductName。hover Logo 显示展开 icon(14x14px, #717376),点击展开 sidebar。",
|
|
92
|
+
"padding": "0 12px",
|
|
93
|
+
"justifyContent": "center",
|
|
94
|
+
"detail": "详见 design-tokens.json sidebarRules.collapseBehavior.header"
|
|
95
|
+
},
|
|
96
|
+
"backgroundColor": "var(--sidebar)",
|
|
97
|
+
"borderBottom": "none(禁止底部边框/分割线)"
|
|
98
|
+
},
|
|
99
|
+
"menuLevels": {
|
|
100
|
+
"max": 3,
|
|
101
|
+
"variants": {
|
|
102
|
+
"threeLevel": "默认变体:group-label + main-item + sub-item,适用信息架构需要 3 层归类的场景(顶层按业务域 / 模块分组、中层主导航、底层细分功能)",
|
|
103
|
+
"twoLevel": "新增变体:main-item + sub-item,去掉分组标题,适用信息架构只有 2 层归类的场景(顶层主导航、底层细分功能,主菜单项同语义层级)",
|
|
104
|
+
"selectionPrinciple": "以信息架构层级深度为准,与菜单项个数无关"
|
|
105
|
+
},
|
|
106
|
+
"detail": "详细定义见 design-tokens.json sidebarRules.structure.variants"
|
|
107
|
+
},
|
|
108
|
+
"menuItemHeight": "40px",
|
|
109
|
+
"l2Indent": "16px",
|
|
110
|
+
"selectedState": {
|
|
111
|
+
"indicator": "灰色背景 var(--sidebar-active)",
|
|
112
|
+
"background": "var(--sidebar-active)"
|
|
113
|
+
},
|
|
114
|
+
"colorTokens": {
|
|
115
|
+
"background": "var(--sidebar)",
|
|
116
|
+
"foreground": "var(--sidebar-foreground)",
|
|
117
|
+
"activeBg": "var(--sidebar-active)",
|
|
118
|
+
"activeFg": "var(--sidebar-active-foreground)",
|
|
119
|
+
"hoverBg": "var(--sidebar-hover)",
|
|
120
|
+
"groupText": "var(--sidebar-group)",
|
|
121
|
+
"itemText": "var(--sidebar-item)",
|
|
122
|
+
"itemTextMuted": "var(--sidebar-item-muted)",
|
|
123
|
+
"accentBg": "var(--sidebar-accent)",
|
|
124
|
+
"accentFg": "var(--sidebar-accent-foreground)",
|
|
125
|
+
"border": "var(--sidebar-border)",
|
|
126
|
+
"ring": "var(--sidebar-ring)"
|
|
127
|
+
},
|
|
128
|
+
"collapseBehavior": {
|
|
129
|
+
"width": "68px",
|
|
130
|
+
"menuItem": "40x40px 居中于 34px 中轴线,gap: 0,flex-shrink: 0",
|
|
131
|
+
"overflow": "visible(容器)+ overflow-y: auto(content)",
|
|
132
|
+
"flyout": "hover 右侧弹出子菜单浮层,z-index: 200",
|
|
133
|
+
"alignment": "所有可见元素视觉中心对齐于 x = 34px",
|
|
134
|
+
"detail": "详见 design-tokens.json sidebarRules.collapseBehavior"
|
|
135
|
+
},
|
|
136
|
+
"responsive": "768px 断点折叠为抽屉(Sheet 模式)"
|
|
137
|
+
},
|
|
138
|
+
"reference": "common-components.json Sidebar"
|
|
139
|
+
},
|
|
140
|
+
"breadcrumb": {
|
|
141
|
+
"inheritLevel": [
|
|
142
|
+
"L2"
|
|
143
|
+
],
|
|
144
|
+
"specRef": "rules/page-header-spec.md",
|
|
145
|
+
"spec": {
|
|
146
|
+
"maxLevels": 4,
|
|
147
|
+
"maxItemWidth": "160px",
|
|
148
|
+
"clickableParent": true,
|
|
149
|
+
"lastItemClickable": false,
|
|
150
|
+
"semantics": "反映系统层级(非用户浏览路径)"
|
|
151
|
+
},
|
|
152
|
+
"visualSpecSummary": {
|
|
153
|
+
"containerHeight": "64px",
|
|
154
|
+
"fontSize": "18px (var(--font-size-2xl))",
|
|
155
|
+
"fontWeight": "500",
|
|
156
|
+
"gap": "4px",
|
|
157
|
+
"separatorIcon": "ChevronRight 20px",
|
|
158
|
+
"separatorColor": "hsl(var(--muted-foreground))",
|
|
159
|
+
"parentColor": "hsl(var(--gray-secondary))",
|
|
160
|
+
"currentColor": "hsl(var(--gray-title))",
|
|
161
|
+
"detailSpec": "rules/page-header-spec.md §3 面包屑模式"
|
|
162
|
+
},
|
|
163
|
+
"constraints": [
|
|
164
|
+
{
|
|
165
|
+
"rule": "使用面包屑基础组件模式时,禁止展示标题基础组件",
|
|
166
|
+
"scope": ["L2"],
|
|
167
|
+
"pageTypes": ["FormPage", "DetailPage"],
|
|
168
|
+
"rationale": "面包屑已承载导航和页面标识功能,不再需要额外的标题组件。PageHeader 区域仅保留 Breadcrumb,不渲染 Title 元素。"
|
|
169
|
+
}
|
|
170
|
+
],
|
|
171
|
+
"reference": "common-components.json Breadcrumb"
|
|
172
|
+
}
|
|
173
|
+
},
|
|
174
|
+
"responsiveFrameRules": {
|
|
175
|
+
"description": "各断点下的框架级响应式行为,子技能只定义内容区响应式变化。",
|
|
176
|
+
"DesktopXL": {
|
|
177
|
+
"breakpoint": "≥1920px",
|
|
178
|
+
"sidebar": "展开(240px,详见 design-tokens.json sidebarRules)",
|
|
179
|
+
"sidebarHeader": "Logo + ProductName 完整显示"
|
|
180
|
+
},
|
|
181
|
+
"Desktop": {
|
|
182
|
+
"breakpoint": "1200px - 1919px",
|
|
183
|
+
"sidebar": "可收起(68px,详见 design-tokens.json sidebarRules.width.collapsed),用户可控",
|
|
184
|
+
"sidebarHeader": "收起时仅显示 Logo Icon,ProductName 隐藏"
|
|
185
|
+
},
|
|
186
|
+
"Tablet": {
|
|
187
|
+
"breakpoint": "768px - 1199px",
|
|
188
|
+
"sidebar": "强制折叠为抽屉(Overlay 模式),点击触发显示",
|
|
189
|
+
"sidebarHeader": "抽屉内完整显示",
|
|
190
|
+
"note": "表格横滚、DescriptionList 列数降级由子技能定义"
|
|
191
|
+
},
|
|
192
|
+
"Mobile": {
|
|
193
|
+
"breakpoint": "<768px",
|
|
194
|
+
"sidebar": "隐藏,提示使用桌面端",
|
|
195
|
+
"sidebarHeader": "隐藏"
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
"layoutSelectionRules": {
|
|
199
|
+
"description": "页面选择 SINGLE_COL / TWO_COL 的判断逻辑。",
|
|
200
|
+
"rules": [
|
|
201
|
+
{
|
|
202
|
+
"condition": "页面需要分类导航(左侧树/分类筛选)",
|
|
203
|
+
"layout": "TWO_COL"
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
"condition": "页面需要 Tab 分类的资源详情页(Tab 内有关联资源列表)",
|
|
207
|
+
"layout": "TWO_COL"
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
"condition": "纯内容展示(列表/表单/详情)无分类导航需求",
|
|
211
|
+
"layout": "SINGLE_COL"
|
|
212
|
+
},
|
|
213
|
+
{
|
|
214
|
+
"condition": "表单页(FormPage)",
|
|
215
|
+
"layout": "SINGLE_COL(默认)| TWO_COL(有步骤导航时)"
|
|
216
|
+
},
|
|
217
|
+
{
|
|
218
|
+
"condition": "Dashboard / 仪表板",
|
|
219
|
+
"layout": "SINGLE_COL 或 GRID"
|
|
220
|
+
}
|
|
221
|
+
]
|
|
222
|
+
},
|
|
223
|
+
"frameToSubtypeMapping": {
|
|
224
|
+
"description": "页面子类型与框架级别的映射,覆盖 pageTypes 的默认 L 级分配。",
|
|
225
|
+
"listPage": {
|
|
226
|
+
"defaultFrame": "L1",
|
|
227
|
+
"override": {
|
|
228
|
+
"drawer": "L0(嵌入 Sheet 内的弹窗列表,无框架组件)"
|
|
229
|
+
}
|
|
230
|
+
},
|
|
231
|
+
"detailPage": {
|
|
232
|
+
"defaultFrame": "L2"
|
|
233
|
+
},
|
|
234
|
+
"formPage": {
|
|
235
|
+
"defaultFrame": "L2",
|
|
236
|
+
"override": {
|
|
237
|
+
"dialogForm": "L0(弹窗表单,由全局状态管理)"
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
# PageHeader 强约束(L1 标题模式 + L2 面包屑模式)
|
|
2
|
+
|
|
3
|
+
> **L1 标题模式**:适用于列表页、Dashboard、概览页 — 仅显示页面标题文字。
|
|
4
|
+
> **L2 面包屑模式**:适用于所有详情页子类型(资源详情、监控详情、API文档详情、对比型详情)。
|
|
5
|
+
> **真相源**:[`common-components.json`](./common-components.json) → PageHeader / Breadcrumb。**生成页面前必读**。
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 1. 容器规格(visualSpec)
|
|
10
|
+
|
|
11
|
+
- `height: 64px`(不是 56px / 不是 48px)
|
|
12
|
+
- `padding: 0`(水平由 Card.paddingX = 20px 提供,禁止重复设置)
|
|
13
|
+
- `background: transparent` | `border: 无` | `box-shadow: 无`
|
|
14
|
+
|
|
15
|
+
## 2. 标题模式(L1 titleMode.spec)
|
|
16
|
+
|
|
17
|
+
> L1 页面(列表页 / Dashboard / 概览页)使用标题模式,**仅显示页面标题文字**,无面包屑、无返回按钮。
|
|
18
|
+
|
|
19
|
+
- 内容:仅一个页面标题文本,**禁止**出现面包屑、返回箭头、面包屑分隔符
|
|
20
|
+
- `font-size: 18px`(使用 `var(--font-size-2xl)`,与面包屑字号一致)
|
|
21
|
+
- `font-weight: 500` (medium)
|
|
22
|
+
- `color: hsl(var(--gray-primary))`(或 `--gray-title`,不可点击)
|
|
23
|
+
- 位置:`page-header` 的**左侧**,与右侧 `actions` 区域平级
|
|
24
|
+
|
|
25
|
+
**最小实现**:
|
|
26
|
+
```html
|
|
27
|
+
<div class="page-header"><!-- height:64px; padding:0 -->
|
|
28
|
+
<h1 class="page-title">实例管理</h1><!-- 18px; font-weight:500; color:--gray-primary -->
|
|
29
|
+
<div class="actions">...</div>
|
|
30
|
+
</div>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
**禁止项**:
|
|
34
|
+
- ❌ 与面包屑同时出现(L1 与 L2 互斥)
|
|
35
|
+
- ❌ 添加返回按钮或其他导航元素
|
|
36
|
+
- ❌ 文字后追加副标题、描述、状态标签等额外元素
|
|
37
|
+
|
|
38
|
+
## 3. 面包屑模式(L2 breadcrumbMode.spec)
|
|
39
|
+
|
|
40
|
+
- `font-size: 18px`(使用 `var(--font-size-2xl)`,**禁止用 base/lg/xl 替代**)
|
|
41
|
+
- `font-weight: 500` (medium)
|
|
42
|
+
- `gap: 4px`(gap-1,**不是 6px / 8px**)
|
|
43
|
+
- 父项 color = `hsl(var(--gray-secondary))`,hover = `hsl(var(--gray-primary))`,可点击
|
|
44
|
+
- 当前项 color = `hsl(var(--gray-title))`,不可点击
|
|
45
|
+
- 分隔符:**ChevronRight 图标 20px**(lucide / 等价 SVG `<polyline points="9 18 15 12 9 6"/>`),color = `hsl(var(--muted-foreground))`,**禁止用 `/` `>` 等文本字符**
|
|
46
|
+
|
|
47
|
+
## 4. 禁止项(违反即视为不合规)
|
|
48
|
+
|
|
49
|
+
1. ❌ 容器自身外框 border(`border-top` / `border-left` / `border-right`)及底色 / 阴影
|
|
50
|
+
2. ❌ 页头下方添加 `<hr>` / `section-divider` / 任何分割线(组件间距由 margin/padding 控制)
|
|
51
|
+
3. ❌ 标题基础组件与面包屑基础组件同时出现(L1/L2 必须二选一)
|
|
52
|
+
4. ❌ `style={{ fontSize: '18px' }}` 等字面量;`h-[64px]` 等硬编码 Tailwind 任意值
|
|
53
|
+
5. ❌ PageHeader 放在 Card 白卡外部
|
|
54
|
+
|
|
55
|
+
## 5. 下方分割线澄清
|
|
56
|
+
|
|
57
|
+
- PageHeader 容器自身 **不设置** border / background / box-shadow
|
|
58
|
+
- 但 PageHeader **与内容区之间** 可通过 `border-bottom: 1px solid hsl(var(--gray-line))` 实现功能性分割线
|
|
59
|
+
- 此分割线属于 PageHeader 的 **最后一个视觉元素**(非容器 border)
|
|
60
|
+
- 生成时默认 **不添加** 此分割线;仅当页面需要明确标题区与内容区边界时才使用
|
|
61
|
+
|
|
62
|
+
## 6. 最小正确实现(L2 面包屑模式 / HTML 静态原型)
|
|
63
|
+
|
|
64
|
+
```html
|
|
65
|
+
<div class="page-header"><!-- height:64px; padding:0; 无 border 无 bg 无 box-shadow -->
|
|
66
|
+
<nav class="breadcrumb"><!-- gap:4px; font-size:var(--font-size-2xl) (18px); font-weight:500; color:hsl(var(--gray-secondary)) -->
|
|
67
|
+
<span class="crumb">实例 i-xxx</span>
|
|
68
|
+
<span class="sep" aria-hidden="true"><!-- 20px ChevronRight; color:hsl(var(--muted-foreground)) -->
|
|
69
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
|
|
70
|
+
</span>
|
|
71
|
+
<span class="crumb current">概览</span><!-- color:hsl(var(--gray-title)) -->
|
|
72
|
+
</nav>
|
|
73
|
+
<div class="actions">…</div>
|
|
74
|
+
</div>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## 7. 生成检查清单
|
|
78
|
+
|
|
79
|
+
> AI 生成详情页时,**必须逐项确认**以下规则。任一不符即视为不合规。
|
|
80
|
+
|
|
81
|
+
| # | 检查项 | 正确值 | 常见错误 |
|
|
82
|
+
|---|--------|--------|---------|
|
|
83
|
+
| 1 | 容器高度 | `height: 64px` | 56px / 48px / 72px |
|
|
84
|
+
| 2 | 容器 padding | `padding: 0` | padding: 0 16px / padding: 0 20px |
|
|
85
|
+
| 3 | 容器外框 border | 无(不设置 border-top/left/right) | border: 1px solid / 四边框 |
|
|
86
|
+
| 3a | 下方功能性分割线 | 可选:`border-bottom: 1px solid hsl(var(--gray-line))`(默认不加) | 粗线 / 阴影 / hr 标签 |
|
|
87
|
+
| 4 | 容器 background | `transparent`(不设置) | background: white / hsl(...) |
|
|
88
|
+
| 5 | 容器 box-shadow | 无 | box-shadow: 0 1px ... |
|
|
89
|
+
| 6 | 面包屑字号 | `font-size: var(--font-size-2xl)` (18px) | --font-size-base / --font-size-lg / 12px / 14px |
|
|
90
|
+
| 7 | 面包屑字重 | `font-weight: var(--font-weight-medium)` (500) | 400 / 600 / --font-weight-normal |
|
|
91
|
+
| 8 | 面包屑 gap | `gap: 4px` | 6px / 8px / 12px |
|
|
92
|
+
| 9 | 分隔符类型 | ChevronRight SVG `<polyline points="9 18 15 12 9 6"/>` | 文本 "/" ">" "›" |
|
|
93
|
+
| 10 | 分隔符尺寸 | `width: 20px; height: 20px` | 14px / 16px / 24px |
|
|
94
|
+
| 11 | 分隔符颜色 | `hsl(var(--muted-foreground))` | --gray-line / --gray-primary / 硬编码色值 |
|
|
95
|
+
| 12 | 父项颜色 | `hsl(var(--gray-secondary))` | --muted-foreground / --gray-primary |
|
|
96
|
+
| 13 | 当前项颜色 | `hsl(var(--gray-title))` 或 `hsl(var(--gray-primary))` | --gray-secondary / --muted-foreground |
|
|
97
|
+
| 14 | PageHeader 位置 | Card 白卡**内部**(第一个子元素) | Card 外部 / body 直接子元素 |
|
|
98
|
+
| 15 | 标题与面包屑 | L1/L2 必须二选一:L1 仅标题、L2 仅面包屑 | 两者同时出现 |
|
|
99
|
+
| 16 | L1 标题文本 | `font-size: 18px; font-weight: 500; color: hsl(var(--gray-primary))` | 字号偏大 / 颜色用 secondary / 追加副标题 |
|
|
100
|
+
|
|
101
|
+
## 8. 高频错误纠正
|
|
102
|
+
|
|
103
|
+
| # | 高频错误 | 正确做法 | 错误根源 |
|
|
104
|
+
|---|---------|--------|---------|
|
|
105
|
+
| 1 | separator 颜色用 `--gray-tertiary` 或硬编码 | `hsl(var(--muted-foreground))` | legacy 别名未废弃 |
|
|
106
|
+
| 2 | 容器四边框 `border: 1px solid` | 仅可选下方分割线 `border-bottom`,容器自身无 border | 与 ContentCard 边框规则混淆 |
|
|
107
|
+
| 3 | 高度设为 48px / 56px | 必须 `height: 64px` | 与 Toolbar / AppBar 混淆 |
|
|
108
|
+
| 4 | 字号用 `--font-size-base` / `--font-size-lg` | `var(--font-size-2xl)` (18px) | Token scale 理解不足 |
|
|
109
|
+
| 5 | gap 设为 6px / 8px / 12px | `gap: 4px` | 与 button-gap 混淆 |
|
|
110
|
+
| 6 | 分隔符用文本 "/" ">" "›" | SVG ChevronRight 20×20px | 旧版文本习惯 |
|
|
111
|
+
| 7 | PageHeader 放在 Card 外部 | 必须在 Card 白卡内部(第一个子元素) | 布局层级误解 |
|
|
112
|
+
| 8 | padding 设为 0 16px / 0 20px | `padding: 0`(水平由 Card.paddingX 提供) | 重复设置水平间距 |
|
|
113
|
+
|
|
114
|
+
## 9. Sidebar 规范引用
|
|
115
|
+
|
|
116
|
+
> Sidebar 是 L1/L2 全局框架组件,完整规格已迁移至上游 rules 层。
|
|
117
|
+
>
|
|
118
|
+
> **完整规范** → [`sidebar-spec.md`](./sidebar-spec.md)
|
|
119
|
+
>
|
|
120
|
+
> 本文件仅定义 PageHeader 与 Sidebar 的边界:
|
|
121
|
+
> - PageHeader 必须放在 Card 白卡内部,与 Sidebar 平级无嵌套关系
|
|
122
|
+
> - Sidebar 收起时,`.main-content` 的 `margin-left` 自动从 240px 变为 68px
|
|
123
|
+
> - PageHeader 不应包含任何 Sidebar 逻辑(如收起按钮、Logo 切换)
|
|
@@ -0,0 +1,206 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": "3.3",
|
|
3
|
+
"description": "11种标准页面类型索引(level 字段引用 page-frame.json frameLevels;zoneMap / priorityRules 为全局适用约定)",
|
|
4
|
+
"levelRef": "./page-frame.json#frameLevels",
|
|
5
|
+
"priorityRules": [
|
|
6
|
+
{ "trigger": "出现批量操作", "resolveTo": "ListPage", "note": "即使页面看起来像 Dashboard" },
|
|
7
|
+
{ "trigger": "出现步骤/分步", "resolveTo": "FormPage", "note": "WizardPage 子类型" },
|
|
8
|
+
{ "trigger": "出现对比", "resolveTo": "DetailPage", "note": "对比型详情页" },
|
|
9
|
+
{ "trigger": "不确定", "resolveTo": "ListPage", "note": "最通用入口" }
|
|
10
|
+
],
|
|
11
|
+
"zoneMap": {
|
|
12
|
+
"description": "区域命名约定(默认壳层:Sidebar(左) + Header(顶) + Main(中))",
|
|
13
|
+
"zones": [
|
|
14
|
+
{ "id": "header", "位置": "顶部", "用途": "PageHeader(标题或面包屑 + 主操作)" },
|
|
15
|
+
{ "id": "toolbar", "位置": "header 下", "用途": "ActionToolbar(搜索 + 筛选 + 视图切换)" },
|
|
16
|
+
{ "id": "main", "位置": "中部主体", "用途": "主要内容区(DataTable / Form / DescriptionList)" },
|
|
17
|
+
{ "id": "bulk-action", "位置": "main 浮于底部", "用途": "BulkActionBar(仅 ListPage 选中行时)" },
|
|
18
|
+
{ "id": "footer", "位置": "底部固定", "用途": "Pagination 或 SubmitBar" },
|
|
19
|
+
{ "id": "sidebar", "位置": "左侧", "用途": "全局导航(框架级,自动继承)" },
|
|
20
|
+
{ "id": "aside", "位置": "右侧", "用途": "侧边详情 / AI 面板(按 variant 启用)" }
|
|
21
|
+
]
|
|
22
|
+
},
|
|
23
|
+
"pageTypes": [
|
|
24
|
+
{
|
|
25
|
+
"id": "ListPage",
|
|
26
|
+
"name": "列表页",
|
|
27
|
+
"nameZh": "列表页",
|
|
28
|
+
"level": "L1",
|
|
29
|
+
"coreFeature": "多条结构化数据的展示、筛选和操作入口",
|
|
30
|
+
"识别条件": "数据表格 + 搜索/筛选 + 分页",
|
|
31
|
+
"决策关键词": ["列表", "表格", "查询", "检索", "卡片管理"],
|
|
32
|
+
"核心组件": "DataTable, QueryFilter, Pagination",
|
|
33
|
+
"典型布局": "TWO_COL / SINGLE_COL",
|
|
34
|
+
"子技能目录": "pages/list-page/",
|
|
35
|
+
"子类型": [
|
|
36
|
+
"标准列表页",
|
|
37
|
+
"带L2导航列表",
|
|
38
|
+
"可展开列表",
|
|
39
|
+
"抽屉中列表",
|
|
40
|
+
"卡片列表",
|
|
41
|
+
"常规卡片列表",
|
|
42
|
+
"纯卡片列表",
|
|
43
|
+
"高级筛选列表",
|
|
44
|
+
"视图切换列表"
|
|
45
|
+
]
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"id": "DetailPage",
|
|
49
|
+
"name": "详情页",
|
|
50
|
+
"nameZh": "详情页",
|
|
51
|
+
"level": "L2",
|
|
52
|
+
"coreFeature": "单条记录的只读展示",
|
|
53
|
+
"识别条件": "描述列表 + 操作按钮",
|
|
54
|
+
"决策关键词": ["详情", "查看", "信息", "概览"],
|
|
55
|
+
"核心组件": "DescriptionList, PageHeader, ActionGroup",
|
|
56
|
+
"典型布局": "TWO_COL / SINGLE_COL",
|
|
57
|
+
"子技能目录": "pages/detail-page/",
|
|
58
|
+
"子类型": [
|
|
59
|
+
"标准详情页",
|
|
60
|
+
"资源详情页",
|
|
61
|
+
"概览型详情页",
|
|
62
|
+
"流程型详情页",
|
|
63
|
+
"对比型详情页"
|
|
64
|
+
]
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"id": "FormPage",
|
|
68
|
+
"name": "表单页",
|
|
69
|
+
"nameZh": "表单页",
|
|
70
|
+
"level": "L2",
|
|
71
|
+
"coreFeature": "用户输入数据",
|
|
72
|
+
"识别条件": "输入控件 + 校验 + 提交",
|
|
73
|
+
"决策关键词": ["新建", "创建", "编辑", "修改", "复制"],
|
|
74
|
+
"核心组件": "Form, FormItem, SubmitButton",
|
|
75
|
+
"典型布局": "SINGLE_COL / GRID",
|
|
76
|
+
"子技能目录": "pages/form-page/",
|
|
77
|
+
"子类型": [
|
|
78
|
+
"新建模式",
|
|
79
|
+
"编辑模式",
|
|
80
|
+
"复制模式"
|
|
81
|
+
]
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"id": "Dashboard",
|
|
85
|
+
"name": "仪表板",
|
|
86
|
+
"nameZh": "仪表板",
|
|
87
|
+
"level": "L1",
|
|
88
|
+
"coreFeature": "数据可视化/统计",
|
|
89
|
+
"识别条件": "指标卡片 + 图表 + 筛选",
|
|
90
|
+
"决策关键词": ["仪表盘", "概览大屏", "监控", "统计"],
|
|
91
|
+
"核心组件": "Chart, StatisticCard, FilterBar",
|
|
92
|
+
"典型布局": "GRID",
|
|
93
|
+
"子技能目录": "pages/dashboard/",
|
|
94
|
+
"子类型": [
|
|
95
|
+
"待开发"
|
|
96
|
+
]
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"id": "WizardPage",
|
|
100
|
+
"name": "向导页",
|
|
101
|
+
"nameZh": "向导页",
|
|
102
|
+
"level": "L2",
|
|
103
|
+
"coreFeature": "分步引导流程",
|
|
104
|
+
"识别条件": "步骤条 + 顺序表单",
|
|
105
|
+
"决策关键词": ["步骤", "分步", "向导"],
|
|
106
|
+
"核心组件": "Steps, StepForm",
|
|
107
|
+
"典型布局": "SINGLE_COL",
|
|
108
|
+
"子技能目录": "pages/wizard-page/",
|
|
109
|
+
"子类型": [
|
|
110
|
+
"待开发"
|
|
111
|
+
]
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"id": "ResultPage",
|
|
115
|
+
"name": "结果页",
|
|
116
|
+
"nameZh": "结果页",
|
|
117
|
+
"level": "L0",
|
|
118
|
+
"coreFeature": "操作结果展示",
|
|
119
|
+
"识别条件": "状态图标 + 描述 + 操作",
|
|
120
|
+
"决策关键词": ["结果", "成功", "失败"],
|
|
121
|
+
"核心组件": "StatusIcon, Description, ActionButton",
|
|
122
|
+
"典型布局": "SINGLE_COL",
|
|
123
|
+
"子技能目录": "pages/result-page/",
|
|
124
|
+
"子类型": [
|
|
125
|
+
"待开发"
|
|
126
|
+
]
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
"id": "ExceptionPage",
|
|
130
|
+
"name": "异常页",
|
|
131
|
+
"nameZh": "异常页",
|
|
132
|
+
"level": "L0",
|
|
133
|
+
"coreFeature": "错误页面",
|
|
134
|
+
"识别条件": "错误码 + 描述 + 返回",
|
|
135
|
+
"决策关键词": ["异常", "错误", "404", "403", "500"],
|
|
136
|
+
"核心组件": "ErrorCode, Description, ReturnButton",
|
|
137
|
+
"典型布局": "SINGLE_COL",
|
|
138
|
+
"子技能目录": "pages/exception-page/",
|
|
139
|
+
"子类型": [
|
|
140
|
+
"待开发"
|
|
141
|
+
]
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"id": "WorkspacePage",
|
|
145
|
+
"name": "工作台",
|
|
146
|
+
"nameZh": "工作台",
|
|
147
|
+
"level": "L1",
|
|
148
|
+
"coreFeature": "个性化内容 + 快捷入口",
|
|
149
|
+
"识别条件": "个性化面板 + 快捷入口 + 最近访问",
|
|
150
|
+
"决策关键词": ["工作台", "快捷入口", "最近访问"],
|
|
151
|
+
"核心组件": "Card, StatisticCard, QuickEntry",
|
|
152
|
+
"典型布局": "GRID",
|
|
153
|
+
"子技能目录": "pages/workspace-page/",
|
|
154
|
+
"子类型": [
|
|
155
|
+
"待开发"
|
|
156
|
+
]
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
"id": "KanbanPage",
|
|
160
|
+
"name": "看板页",
|
|
161
|
+
"nameZh": "看板页",
|
|
162
|
+
"level": "L1",
|
|
163
|
+
"coreFeature": "任务看板",
|
|
164
|
+
"识别条件": "状态列 + 可拖拽卡片",
|
|
165
|
+
"决策关键词": ["看板", "拖拽", "任务流"],
|
|
166
|
+
"核心组件": "KanbanColumn, KanbanCard",
|
|
167
|
+
"典型布局": "HORIZONTAL_SCROLL",
|
|
168
|
+
"子技能目录": "pages/kanban-page/",
|
|
169
|
+
"子类型": [
|
|
170
|
+
"待开发"
|
|
171
|
+
]
|
|
172
|
+
},
|
|
173
|
+
{
|
|
174
|
+
"id": "WelcomePage",
|
|
175
|
+
"name": "欢迎页",
|
|
176
|
+
"nameZh": "欢迎页",
|
|
177
|
+
"level": "L0",
|
|
178
|
+
"coreFeature": "首次访问引导 / 登录后的欢迎展示",
|
|
179
|
+
"识别条件": "欢迎文案 + 引导按钮 + 快捷入口",
|
|
180
|
+
"决策关键词": ["欢迎", "引导", "首次访问"],
|
|
181
|
+
"核心组件": "Card, QuickEntry, HeroSection",
|
|
182
|
+
"典型布局": "SINGLE_COL",
|
|
183
|
+
"子技能目录": "pages/welcome-page/",
|
|
184
|
+
"子类型": [
|
|
185
|
+
"标准欢迎页",
|
|
186
|
+
"引导型欢迎页"
|
|
187
|
+
]
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
"id": "OverviewPage",
|
|
191
|
+
"name": "概览页",
|
|
192
|
+
"nameZh": "概览页",
|
|
193
|
+
"level": "L1",
|
|
194
|
+
"coreFeature": "全局概览仪表盘",
|
|
195
|
+
"识别条件": "统计卡片 + 关键指标 + 快捷操作",
|
|
196
|
+
"决策关键词": ["概览", "全局", "指标"],
|
|
197
|
+
"核心组件": "StatisticCard, Chart, QuickAction",
|
|
198
|
+
"典型布局": "GRID",
|
|
199
|
+
"子技能目录": "pages/overview-page/",
|
|
200
|
+
"子类型": [
|
|
201
|
+
"资源概览页",
|
|
202
|
+
"业务概览页"
|
|
203
|
+
]
|
|
204
|
+
}
|
|
205
|
+
]
|
|
206
|
+
}
|