@teamix-evo/skills 0.5.0 → 0.7.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/manifest.json +23 -37
- 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-manage/SKILL.md +288 -121
- package/src/teamix-evo-upgrade/SKILL.md +298 -0
- package/src/teamix-evo-design-opentrek/patterns/sidebar.md +0 -122
package/manifest.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"$schema": "https://teamix-evo.dev/schema/skills-package/v1.json",
|
|
3
3
|
"schemaVersion": 1,
|
|
4
4
|
"package": "skills",
|
|
5
|
-
"version": "0.
|
|
5
|
+
"version": "0.5.0",
|
|
6
6
|
"engines": {
|
|
7
7
|
"teamix-evo": ">=0.1.0"
|
|
8
8
|
},
|
|
@@ -10,17 +10,12 @@
|
|
|
10
10
|
{
|
|
11
11
|
"id": "teamix-evo-manage",
|
|
12
12
|
"name": "teamix-evo-manage",
|
|
13
|
-
"description": "Single entry point for the teamix-evo lifecycle: scaffold a new project, install the AI coding system into an existing repo, run / update / inspect / remove any teamix-evo package, and drive the placeholder→real UI migration loop after `npm create teamix-evo`.\nTRIGGER when: (CLI) user runs or asks about `teamix-evo tokens ...` / `teamix-evo skills ...` / `teamix-evo ui ...` / `teamix-evo biz-ui ...` / `teamix-evo templates ...` / `teamix-evo lint ...` / `teamix-evo logs ...`, or `npm create teamix-evo` / `pnpm create teamix-evo`; (模糊初始化) \"初始化一个项目\"、\"初始化一个工程\"、\"初始化一个 teamix-evo 工程\"、\"初始化一个 Teamix Evo 项目\"、\"create a teamix-evo project\"、\"set up teamix-evo from scratch\"、\"new teamix-evo app\"; (具名变体初始化) \"初始化一个 opentrek 工程 / op 工程 / OpenTrek 项目 / 探索者项目\"、\"初始化一个云管 / 云管控制台 / 云管项目 / uni-manager 工程 / 云管工程\"、\"new opentrek/uni-manager project\"; (AI coding 接入) \"给现有仓库装 teamix-evo\"、\"现有项目装一下 skills + ui\"、\"接入 AI coding 体系\"、\"装 teamix-evo 进这个项目\"、\"add teamix-evo to existing repo\"、\"install AI coding system\"、\"接入 opentrek 研发体系\"、\"接入 op 研发体系\"、\"接入 OpenTrek 研发体系\"、\"接入 opentrek 研发系统\"、\"接入 op 研发系统\"、\"接入云管研发体系\"、\"接入云管研发系统\"、\"接入 uni-manager 研发体系\"、\"接入 uni-manager 研发系统\"、\"接入统一管理研发体系\"; (更新检测) \"升级 teamix-evo\"、\"看看哪些要升级\"、\"update teamix-evo\"、\"check what needs updating\"、\"refresh installed teamix-evo packages\"; (卸载 / 清单) \"卸载 teamix-evo\"、\"看看装了哪些 teamix-evo 资源\"、\"remove the design system\"、\"list installed\"; (placeholder→real 升级) \"升级 UI\"、\"接入真组件\"、\"替换 placeholder\"、\"upgrade UI\"、\"replace placeholders\"、\"swap in real components\"、\"make the UI real\", or user opens / edits `src/components/_placeholder/**`, project contains `.teamix-evo/create/pending-ui.json`, literal `@teamix-evo:placeholder` tag in code; (状态文件) user touches `.teamix-evo/config.json`、`.teamix-evo/manifest.json`、`.teamix-evo/create/pending-ui.json`.\nSKIP: any content task — generating components, pages, services, or reviewing screens; changes to `src/` files outside the migration loop, design tokens, or business logic. Those go to teamix-evo-code-opentrek or teamix-evo-design-opentrek. SKIP if the user is mid-flow inside an already-initialized project asking to \"新增页面 / 加按钮 / 调接口\" — that's coding work, not lifecycle. SKIP pure styling / token tweaks — those go to ESLint + `tokens.overrides.css`.\nCoordinates with: teamix-evo-design-opentrek (visual side after a screen is generated)、teamix-evo-code-opentrek (file placement / reuse rules) — manage is the entry point and precedes content skills, never co-triggers.",
|
|
13
|
+
"description": "Single entry point for the teamix-evo lifecycle: scaffold a new project, install the AI coding system into an existing repo, run / update / inspect / remove any teamix-evo package, and drive the placeholder→real UI migration loop after `npm create teamix-evo`.\nTRIGGER when: (CLI) user runs or asks about `teamix-evo init` / `teamix-evo update` / `teamix-evo tokens ...` / `teamix-evo skills ...` / `teamix-evo ui ...` / `teamix-evo biz-ui ...` / `teamix-evo templates ...` / `teamix-evo lint ...` / `teamix-evo logs ...` / `teamix-evo restore ...` / `teamix-evo switch ...`, or `npm create teamix-evo` / `pnpm create teamix-evo`; (模糊初始化) \"初始化一个项目\"、\"初始化一个工程\"、\"初始化一个 teamix-evo 工程\"、\"初始化一个 Teamix Evo 项目\"、\"create a teamix-evo project\"、\"set up teamix-evo from scratch\"、\"new teamix-evo app\"; (具名变体初始化) \"初始化一个 opentrek 工程 / op 工程 / OpenTrek 项目 / 探索者项目\"、\"初始化一个云管 / 云管控制台 / 云管项目 / uni-manager 工程 / 云管工程\"、\"new opentrek/uni-manager project\"; (AI coding 接入) \"给现有仓库装 teamix-evo\"、\"现有项目装一下 skills + ui\"、\"接入 AI coding 体系\"、\"装 teamix-evo 进这个项目\"、\"add teamix-evo to existing repo\"、\"install AI coding system\"、\"接入 opentrek 研发体系\"、\"接入 op 研发体系\"、\"接入 OpenTrek 研发体系\"、\"接入 opentrek 研发系统\"、\"接入 op 研发系统\"、\"接入云管研发体系\"、\"接入云管研发系统\"、\"接入 uni-manager 研发体系\"、\"接入 uni-manager 研发系统\"、\"接入统一管理研发体系\"; (更新检测) \"升级 teamix-evo\"、\"看看哪些要升级\"、\"update teamix-evo\"、\"check what needs updating\"、\"refresh installed teamix-evo packages\"; (组件源码升级 — ADR 0040) \"升级 ui\"、\"升级业务组件\"、\"升级 button\"、\"生成 ui staging\"、\"生成 biz-ui staging\"、\"upgrade ui\"、\"upgrade biz-ui\"、\"upgrade ui component\"、\"stage ui upgrade\"、\"teamix-evo ui upgrade\"、\"teamix-evo biz-ui upgrade\"; (卸载 / 清单) \"卸载 teamix-evo\"、\"看看装了哪些 teamix-evo 资源\"、\"remove the design system\"、\"list installed\"; (placeholder→real 升级) \"升级 UI\"、\"接入真组件\"、\"替换 placeholder\"、\"upgrade UI\"、\"replace placeholders\"、\"swap in real components\"、\"make the UI real\", or user opens / edits `src/components/_placeholder/**`, project contains `.teamix-evo/create/pending-ui.json`, literal `@teamix-evo:placeholder` tag in code; (状态文件) user touches `.teamix-evo/config.json`、`.teamix-evo/manifest.json`、`.teamix-evo/create/pending-ui.json`.\nSKIP: any content task — generating components, pages, services, or reviewing screens; changes to `src/` files outside the migration loop, design tokens, or business logic. Those go to teamix-evo-code-opentrek or teamix-evo-design-opentrek. SKIP if the user is mid-flow inside an already-initialized project asking to \"新增页面 / 加按钮 / 调接口\" — that's coding work, not lifecycle. SKIP pure styling / token tweaks — those go to ESLint + `tokens.overrides.css`.\nCoordinates with: teamix-evo-design-opentrek (visual side after a screen is generated)、teamix-evo-code-opentrek (file placement / reuse rules) — manage is the entry point and precedes content skills, never co-triggers.",
|
|
14
14
|
"version": "0.2.0",
|
|
15
15
|
"source": "src/teamix-evo-manage",
|
|
16
|
-
"ides": [
|
|
17
|
-
"qoder",
|
|
18
|
-
"claude"
|
|
19
|
-
],
|
|
16
|
+
"ides": ["qoder", "claude"],
|
|
20
17
|
"updateStrategy": "managed",
|
|
21
|
-
"managedRegions": [
|
|
22
|
-
"core"
|
|
23
|
-
],
|
|
18
|
+
"managedRegions": ["core"],
|
|
24
19
|
"template": false,
|
|
25
20
|
"scope": "global"
|
|
26
21
|
},
|
|
@@ -31,14 +26,9 @@
|
|
|
31
26
|
"version": "0.2.0",
|
|
32
27
|
"source": "src/teamix-evo-design-opentrek",
|
|
33
28
|
"variant": "opentrek",
|
|
34
|
-
"ides": [
|
|
35
|
-
"qoder",
|
|
36
|
-
"claude"
|
|
37
|
-
],
|
|
29
|
+
"ides": ["qoder", "claude"],
|
|
38
30
|
"updateStrategy": "managed",
|
|
39
|
-
"managedRegions": [
|
|
40
|
-
"core"
|
|
41
|
-
],
|
|
31
|
+
"managedRegions": ["core"],
|
|
42
32
|
"template": false
|
|
43
33
|
},
|
|
44
34
|
{
|
|
@@ -48,14 +38,9 @@
|
|
|
48
38
|
"version": "0.2.0",
|
|
49
39
|
"source": "src/teamix-evo-code-opentrek",
|
|
50
40
|
"variant": "opentrek",
|
|
51
|
-
"ides": [
|
|
52
|
-
"qoder",
|
|
53
|
-
"claude"
|
|
54
|
-
],
|
|
41
|
+
"ides": ["qoder", "claude"],
|
|
55
42
|
"updateStrategy": "managed",
|
|
56
|
-
"managedRegions": [
|
|
57
|
-
"core"
|
|
58
|
-
],
|
|
43
|
+
"managedRegions": ["core"],
|
|
59
44
|
"template": false
|
|
60
45
|
},
|
|
61
46
|
{
|
|
@@ -65,14 +50,9 @@
|
|
|
65
50
|
"version": "0.2.0",
|
|
66
51
|
"source": "src/teamix-evo-design-uni-manager",
|
|
67
52
|
"variant": "uni-manager",
|
|
68
|
-
"ides": [
|
|
69
|
-
"qoder",
|
|
70
|
-
"claude"
|
|
71
|
-
],
|
|
53
|
+
"ides": ["qoder", "claude"],
|
|
72
54
|
"updateStrategy": "managed",
|
|
73
|
-
"managedRegions": [
|
|
74
|
-
"core"
|
|
75
|
-
],
|
|
55
|
+
"managedRegions": ["core"],
|
|
76
56
|
"template": false
|
|
77
57
|
},
|
|
78
58
|
{
|
|
@@ -82,14 +62,20 @@
|
|
|
82
62
|
"version": "0.2.0",
|
|
83
63
|
"source": "src/teamix-evo-code-uni-manager",
|
|
84
64
|
"variant": "uni-manager",
|
|
85
|
-
"ides": [
|
|
86
|
-
"qoder",
|
|
87
|
-
"claude"
|
|
88
|
-
],
|
|
65
|
+
"ides": ["qoder", "claude"],
|
|
89
66
|
"updateStrategy": "managed",
|
|
90
|
-
"managedRegions": [
|
|
91
|
-
|
|
92
|
-
|
|
67
|
+
"managedRegions": ["core"],
|
|
68
|
+
"template": false
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"id": "teamix-evo-upgrade",
|
|
72
|
+
"name": "teamix-evo-upgrade",
|
|
73
|
+
"description": "Help the user adopt token renames in `.teamix-evo/.upgrade-hints/tokens-<ts>.json` AND component source upgrades in `.teamix-evo/.upgrade-staging/{ui,biz-ui}-<ts>/` after `teamix-evo update` / `teamix-evo tokens update` / `teamix-evo switch` / `teamix-evo ui upgrade` / `teamix-evo biz-ui upgrade`. Read each hint or staging manifest, scan the project for usages or compare current vs incoming source, propose codemod / file-replace diffs, apply only after explicit user approval, then archive processed inputs.\nTRIGGER when: user references `.teamix-evo/.upgrade-hints/`、`.teamix-evo/.upgrade-staging/`、`tokens-*.json` hint files、`ui-*` or `biz-ui-*` staging directories、phrases like \"处理 token 改名\"、\"应用 codemod\"、\"扫一下 legacy token\"、\"升级 token 引用\"、\"更新 token 名\"、\"组件升级\"、\"ui-staging\"、\"biz-ui staging\"、\"apply ui staging\"、\"apply biz-ui staging\"、\"应用组件升级\"、\"apply token rename codemod\"、\"adopt token rename hints\"、\"scan for legacy tokens\"、\"token rename upgrade\"、\"component source upgrade\"、\"review ui staging diff\"; AI sees output of `teamix-evo update` / `teamix-evo tokens update` / `teamix-evo switch --apply` / `teamix-evo ui upgrade` / `teamix-evo biz-ui upgrade` mentioning `💡 token rename hint:` or `staging at .teamix-evo/.upgrade-staging/...` and the user wants to follow up; user opens any `.teamix-evo/.upgrade-hints/tokens-*.json` or any file under `.teamix-evo/.upgrade-staging/{ui,biz-ui}-*/`.\nSKIP: any other lifecycle work — `init` / `update` orchestration / variant switch itself / install / uninstall / generating staging (defer to teamix-evo-manage); pure visual or design changes (defer to teamix-evo-design-<variant>); any code authoring unrelated to the rename / staging window (defer to teamix-evo-code-<variant>); refuse to auto-apply — never write source code without explicit per-file user confirmation.\nCoordinates with: teamix-evo-manage (manage drives the upgrade flow that emits hints + staging; this skill consumes the resulting files).",
|
|
74
|
+
"version": "0.1.0",
|
|
75
|
+
"source": "src/teamix-evo-upgrade",
|
|
76
|
+
"ides": ["qoder", "claude"],
|
|
77
|
+
"updateStrategy": "managed",
|
|
78
|
+
"managedRegions": ["core"],
|
|
93
79
|
"template": false
|
|
94
80
|
}
|
|
95
81
|
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@teamix-evo/skills",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"description": "Skills (AI IDE capabilities) for Teamix Evo",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"devDependencies": {
|
|
13
13
|
"@clack/prompts": "^0.8.0",
|
|
14
14
|
"tsx": "^4.0.0",
|
|
15
|
-
"@teamix-evo/registry": "0.
|
|
15
|
+
"@teamix-evo/registry": "0.8.0"
|
|
16
16
|
},
|
|
17
17
|
"publishConfig": {
|
|
18
18
|
"access": "public",
|
|
@@ -7,58 +7,226 @@ description: |
|
|
|
7
7
|
Coordinates with: teamix-evo-code-opentrek (run alongside when the screen also creates new files).
|
|
8
8
|
---
|
|
9
9
|
|
|
10
|
-
#
|
|
10
|
+
# 页面规则系统 v7.8.4
|
|
11
11
|
|
|
12
|
-
>
|
|
13
|
-
>
|
|
14
|
-
>
|
|
15
|
-
> 本技能是 **完整自包含** 的 OpenTrek 设计规则(非 overlay)。
|
|
16
|
-
> Token 具体值请参照 `tokens/theme.css` 中的 CSS 变量,组件详细 API 通过 MCP `get_component_meta` 按需查询。
|
|
12
|
+
> 本文件是**入口索引**:只负责意图路由 + 文件角色索引。
|
|
13
|
+
> 生成 / 翻新 / 验证的详细执行步骤、GATE 门禁、MUST READ 清单一律在 [generation-flow.md](./generation-flow.md)。
|
|
14
|
+
> 页面类型决策树、子类型识别在 [patterns/page-types.md](./patterns/page-types.md)。
|
|
17
15
|
|
|
18
|
-
|
|
16
|
+
路由分发架构 — 根技能负责意图识别和索引路由,详细规则在子技能和 `./rules/` 目录。
|
|
17
|
+
三层参数化架构:元规则(固化)+ 产品配置(灵活)+ 模式细节。
|
|
19
18
|
|
|
20
|
-
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## 1. 意图路由
|
|
22
|
+
|
|
23
|
+
根据用户输入自动判断执行路径,无需用户指定:
|
|
24
|
+
|
|
25
|
+
| 意图 | 识别关键词 | 路由路径 | 详细流程 |
|
|
26
|
+
| -------- | -------------------------------------------------------------------- | -------------------- | ---------------------------------------------------------------------- |
|
|
27
|
+
| **翻新** | "改造"/"升级"/"替换"/"刷新规范"/"翻新"/"对齐规范"/"重新生成这个页面" | 翻新路径 | 详见 [generation-flow.md §2](./generation-flow.md) |
|
|
28
|
+
| **生成** | "生成"/"创建"/"新建"/"设计一个" | 生成路径(六步门控) | 详见 [generation-flow.md §1](./generation-flow.md) |
|
|
29
|
+
| **验证** | "检查"/"验证"/"评估"/"合规"/"是否符合规范" | 验证路径 | 详见 [generation-flow.md §3](./generation-flow.md) |
|
|
30
|
+
| **查询** | "token"/"色值"/"间距"/"字体"/"圆角"/"阴影"/"组件尺寸" | 查询路径 | 直接读取 `./rules/design-tokens.json` / `./rules/component-specs.json` |
|
|
31
|
+
| **规则** | 其他通用问题("列表页怎么设计"/"弹窗宽度"/"用什么颜色") | 根技能 | 读取对应 `./rules/` 文件回答 |
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
## 2. 页面类型索引
|
|
36
|
+
|
|
37
|
+
| 类型 ID | 中文名 | 核心特征 | 子技能目录 | 状态 |
|
|
38
|
+
| ------------------------------------------------------------------------------------------------- | ------ | -------------------------------------- | ---------------------- | ------ |
|
|
39
|
+
| ListPage | 列表页 | 多条结构化数据 + 搜索/筛选 + 分页 | `./pages/list-page/` | 已就绪 |
|
|
40
|
+
| DetailPage | 详情页 | 单条记录只读展示 + 描述列表 + 操作按钮 | `./pages/detail-page/` | 已就绪 |
|
|
41
|
+
| FormPage | 表单页 | 用户输入数据 + 字段校验 + 提交 | `./pages/form-page/` | 已就绪 |
|
|
42
|
+
| Dashboard | 仪表板 | 数据可视化 / 统计聚合 | — | 待开发 |
|
|
43
|
+
| WizardPage / ResultPage / ExceptionPage / WorkspacePage / KanbanPage / WelcomePage / OverviewPage | — | 见 patterns/page-types.md | — | 待开发 |
|
|
44
|
+
|
|
45
|
+
> 决策树、Zone Map、易混点速查、子类型识别详见 [patterns/page-types.md](./patterns/page-types.md)。
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## 3. 子技能索引
|
|
50
|
+
|
|
51
|
+
> 📖 **读取顺序**:生成/翻新页面时,**主入口 = `./pages/{type}-page/`**(完整规范与布局硬约束);`./patterns/{type}-page.md` 仅作为**索引概览**用于快速判断子类型。
|
|
52
|
+
|
|
53
|
+
| 子技能 ID | 名称 | 子类型数 | 入口文件 |
|
|
54
|
+
| ----------- | ---------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
55
|
+
| list-page | 列表页技能 | 6 | **生成入口**:[`./pages/list-page/`](./pages/list-page/) ← 完整规范 | 索引概览:[`./patterns/list-page.md`](./patterns/list-page.md) |
|
|
56
|
+
| detail-page | 详情页技能 | 2 | **生成入口**:[`./pages/detail-page/`](./pages/detail-page/) ← 完整规范 | 索引概览:[`./patterns/detail-page.md`](./patterns/detail-page.md) |
|
|
57
|
+
| form-page | 表单页技能 | 3 | **生成入口**:[`./pages/form-page/`](./pages/form-page/) ← 完整规范 | 索引概览:[`./patterns/form-page.md`](./patterns/form-page.md) |
|
|
58
|
+
|
|
59
|
+
### 关键词 → 子技能路由
|
|
60
|
+
|
|
61
|
+
| 关键词 | 路由到 |
|
|
62
|
+
| -------------------------------------- | -------------------------------------------------------------------------- |
|
|
63
|
+
| "列表"/"表格"/"查询"/"检索"/"数据列表" | → `./pages/list-page/` |
|
|
64
|
+
| "详情"/"查看"/"信息"/"配置详情" | → `./pages/detail-page/` |
|
|
65
|
+
| "表单"/"创建"/"编辑"/"填写"/"新建" | → `./pages/form-page/` |
|
|
66
|
+
| "仪表板"/"统计"/"分析"/"指标" | → [`./patterns/dashboard.md`](./patterns/dashboard.md)(完整子技能待开发) |
|
|
67
|
+
| 其他通用问题 | 根技能 + `./rules/` 索引 |
|
|
68
|
+
|
|
69
|
+
### 高频业务场景速查
|
|
70
|
+
|
|
71
|
+
完整 16 种业务场景映射见 `./rules/business-mapping.json`。核心 6 类:
|
|
72
|
+
|
|
73
|
+
| 业务场景 | 关键词 | 页面类型 | 返回行为 |
|
|
74
|
+
| -------- | ------------------- | -------------- | -------------- |
|
|
75
|
+
| 查看列表 | 列表/表格/查询/检索 | ListPage | 带分页和筛选 |
|
|
76
|
+
| 查看详情 | 详情/查看/信息 | DetailPage | 可返回列表 |
|
|
77
|
+
| 新建记录 | 新建/创建/新增 | FormPage(新建) | 保存后返回列表 |
|
|
78
|
+
| 编辑记录 | 编辑/修改 | FormPage(编辑) | 保存后返回原页 |
|
|
79
|
+
| 删除记录 | 删除/移除 | Dialog | 确认后刷新列表 |
|
|
80
|
+
| 复制新建 | 复制/克隆 | FormPage(复制) | 保存后返回列表 |
|
|
81
|
+
|
|
82
|
+
> 完整 CRUD 流转规则见 [flows.md](./flows.md) §3。
|
|
83
|
+
|
|
84
|
+
---
|
|
85
|
+
|
|
86
|
+
## 4. 文件角色简表
|
|
87
|
+
|
|
88
|
+
> 一句话说明每个文件的职责。详细 MUST READ 时机见 [generation-flow.md](./generation-flow.md) 各 Step。
|
|
89
|
+
|
|
90
|
+
### 4.1 流程与认知文档
|
|
91
|
+
|
|
92
|
+
| 文件 | 作用 |
|
|
93
|
+
| ------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
|
|
94
|
+
| [generation-flow.md](./generation-flow.md) | 生成 / 翻新 / 验证三大路径的完整执行步骤与 GATE 门禁(**唯一执行路径**) |
|
|
95
|
+
| [philosophy.md](./philosophy.md) | 设计哲学四大原则(理解"为什么这么做") |
|
|
96
|
+
| [brand.md](./brand.md) | 视觉调性 + 文案语气基调 + 视觉五维(圆角/配色/密度/阴影/焦点) |
|
|
97
|
+
| [foundations.md](./foundations.md) | Token 真值:色彩 / 间距 / 字号 / 圆角 / 阴影 / 动效 |
|
|
98
|
+
| [boundaries.md](./boundaries.md) | 38 条硬规则:F1-F10 禁止项 + S1-S8 样式规则 + C1-C12 结构 + I1-I4 图标 + FF1-FF4 表单 + Overlay 选型 |
|
|
99
|
+
| [components.md](./components.md) | 组件双层架构 + 选型决策树 + 拼装配方 |
|
|
100
|
+
| [checklist.md](./checklist.md) | 10 项自检清单(Step 7 必读) |
|
|
101
|
+
| [flows.md](./flows.md) | **页间流转唯一真值源**:四条用户旅程 + 主流转图 + CRUD 速查 + 资源生命周期 + 流转设计规则 |
|
|
102
|
+
|
|
103
|
+
### 4.2 模式文档(patterns/)
|
|
104
|
+
|
|
105
|
+
| 文件 | 作用 |
|
|
106
|
+
| -------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
|
|
107
|
+
| [patterns/page-types.md](./patterns/page-types.md) | 页面类型决策树 + Zone Map + 易混点判定 |
|
|
108
|
+
| [patterns/list-page.md](./patterns/list-page.md) | 列表页 6 种子类型规格(standard / pure-card / standard-card / drawer / expandable / l2-sidebar) |
|
|
109
|
+
| [patterns/detail-page.md](./patterns/detail-page.md) | 详情页 2 种子类型规格(tabbed / single-section) |
|
|
110
|
+
| [patterns/form-page.md](./patterns/form-page.md) | 表单页 3 种子类型规格(single-page / wizard / drawer-form) |
|
|
111
|
+
| [patterns/dashboard.md](./patterns/dashboard.md) | 仪表板模式(待开发) |
|
|
112
|
+
| [patterns/color-mapping.md](./patterns/color-mapping.md) | 语义色映射表(Step 6 必读) |
|
|
113
|
+
|
|
114
|
+
### 4.3 规则文件(rules/)
|
|
21
115
|
|
|
22
|
-
|
|
116
|
+
按读取层次分组,需要时按需读取:
|
|
23
117
|
|
|
24
|
-
|
|
118
|
+
**① 基础定义层**("有什么")
|
|
25
119
|
|
|
26
|
-
|
|
|
27
|
-
|
|
|
28
|
-
|
|
|
29
|
-
|
|
|
30
|
-
|
|
|
31
|
-
|
|
|
120
|
+
| 文件 | 作用 |
|
|
121
|
+
| -------------------------------- | ---------------------------------------------------------- |
|
|
122
|
+
| `./rules/page-frame.json` | L0/L1/L2 页面框架规范 + 框架组件继承 + 响应式规则 |
|
|
123
|
+
| `./rules/page-types.json` | 12 种页面类型 JSON 定义 |
|
|
124
|
+
| `./rules/business-mapping.json` | 16 个业务场景映射(含关键词数组 / 子技能目录 / CRUD 映射) |
|
|
125
|
+
| `./rules/common-components.json` | 40 个业务组件索引(v4.0,以组件名为唯一标识) |
|
|
32
126
|
|
|
33
|
-
|
|
127
|
+
**② 布局规则层**("怎么排")
|
|
34
128
|
|
|
35
|
-
|
|
129
|
+
| 文件 | 作用 |
|
|
130
|
+
| --------------------------- | ----------------------------------------------- |
|
|
131
|
+
| `./rules/layout-rules.json` | 4 种布局模式(A/B/C/D)+ PageContainer 嵌套约束 |
|
|
132
|
+
| `./rules/page-flow.json` | CRUD 页面流转 + 导航 + 操作确认三级规范 |
|
|
36
133
|
|
|
37
|
-
|
|
134
|
+
**③ 视觉规范层**("长什么样")
|
|
135
|
+
|
|
136
|
+
| 文件 | 作用 |
|
|
137
|
+
| ---------------------------- | ---------------------------------------------------------------- |
|
|
138
|
+
| `./rules/design-tokens.json` | 语义化色值 / 间距 / 字体 / 尺寸 / 断点(锚定 TrekClaw v4.1 CSS) |
|
|
139
|
+
| `./rules/design-tokens.css` | 完整 CSS 变量定义(:root 变量块),HTML 内联 / TSX `@import` |
|
|
140
|
+
|
|
141
|
+
**④ 实现约束层**("怎么写")
|
|
142
|
+
|
|
143
|
+
| 文件 | 作用 |
|
|
144
|
+
| ------------------------------ | --------------------------------------------------------------------------------------------- |
|
|
145
|
+
| `./rules/component-specs.json` | 26 条组件精确尺寸约束 C1-C26(Button / Input / Dialog / Table / Select / DescriptionList 等) |
|
|
146
|
+
| `./rules/styling.json` | S1-S8 样式规则 + F1-F10 禁止项 |
|
|
147
|
+
|
|
148
|
+
### 4.4 范例文档(examples/)
|
|
149
|
+
|
|
150
|
+
| 文件 | 作用 |
|
|
151
|
+
| ------------------------------------- | -------------------------------------------------- |
|
|
152
|
+
| `./examples/standard-table-list.html` | 标准表格列表参考范例(表格列规范 / 操作列 / 分页) |
|
|
153
|
+
| `./examples/standard-card-list.html` | 卡片列表参考范例(CardGrid / ItemCard 结构) |
|
|
154
|
+
| `./examples/detail-page.html` | 详情页参考范例(L2 框架 / Tabs / DescriptionList) |
|
|
155
|
+
| `./examples/wizard-form-page.html` | 向导表单参考范例(Steps / 动态底栏 / 校验) |
|
|
156
|
+
|
|
157
|
+
---
|
|
158
|
+
|
|
159
|
+
## 5. 通用组件分层(速查)
|
|
160
|
+
|
|
161
|
+
子技能通过**组件名**引用,通过 `shadcnComponent` 字段定位 @teamix-evo/ui 实现。完整索引见 `./rules/common-components.json` v4.0。
|
|
162
|
+
|
|
163
|
+
- **核心业务组件**:TopNavigation / Sidebar / PageHeader / Breadcrumb / Pagination / Dialog / Sheet / Button / Tag / Badge / Select / Input / Tooltip / Separator / Empty / Spinner / Alert / Sonner
|
|
164
|
+
- **业务扩展组件**:SearchCombo / ContextSwitcher / Steps / ItemCard / CardGrid / CardActionBar
|
|
165
|
+
- **详情页组件**:DescriptionList / DescriptionItem / InfoCard(component-specs.json C26)
|
|
166
|
+
|
|
167
|
+
---
|
|
168
|
+
|
|
169
|
+
## 6. 全局执行约束
|
|
170
|
+
|
|
171
|
+
> 所有路径共享的硬约束。生成代码时强制遵守,违反即不合规。Step 级 Token 用法详见 [generation-flow.md](./generation-flow.md) Step 6。
|
|
172
|
+
|
|
173
|
+
### 6.1 组件选用优先级(不得跳级)
|
|
174
|
+
|
|
175
|
+
```
|
|
176
|
+
优先级 1:./rules/ 中已定义的规范组件
|
|
177
|
+
→ common-components.json / component-specs.json / boundaries.md
|
|
178
|
+
优先级 2:@teamix-evo/ui 原子组件合理拼装
|
|
179
|
+
→ 遵循 styling.json 的 S1-S8 + F1-F10
|
|
180
|
+
优先级 3:自定义实现(仅当以上均无法满足)
|
|
181
|
+
→ 必须 <!-- CUSTOM: 原因 --> 标注 + 在 common-components.json 注册 shadcnComponent
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
### 6.2 Token 引用格式(速查)
|
|
185
|
+
|
|
186
|
+
所有视觉属性必须引用 Token,禁止硬编码。完整 Token 定义见 [foundations.md](./foundations.md)。
|
|
187
|
+
|
|
188
|
+
| 属性类别 | 正确写法 | 禁止写法 |
|
|
189
|
+
| -------- | ------------------------------------------- | ---------------------------------- |
|
|
190
|
+
| 颜色 | `hsl(var(--token-name))` | `#0055EE`、`rgb(0,85,238)`、`blue` |
|
|
191
|
+
| 间距 | Token 变量或 Tailwind spacing class | 裸写 `16px`、`1rem` |
|
|
192
|
+
| 字号 | `var(--font-size-*)` 四级(base/lg/xl/2xl) | 裸写 `14px`、`0.875rem` |
|
|
193
|
+
| 圆角 | `var(--radius-*)` 层级(sm/md/lg) | 裸写 `8px`、`0.5rem` |
|
|
194
|
+
| 阴影 | `var(--shadow-*)` | 裸写 `0 1px 3px rgba(...)` |
|
|
195
|
+
| 字体族 | `var(--font-sans)` / `var(--font-mono)` | 裸写 `Inter, sans-serif` |
|
|
196
|
+
|
|
197
|
+
### 6.3 标准范例引用
|
|
198
|
+
|
|
199
|
+
生成页面前**必须**参考对应类型的标准范例(见 §4.4 examples/),作为输出质量基准。
|
|
200
|
+
|
|
201
|
+
### 6.4 设计语言一致性
|
|
202
|
+
|
|
203
|
+
| 维度 | 约束 | 依据 |
|
|
204
|
+
| -------- | -------------------------------------------------------------------- | -------------------------------------- |
|
|
205
|
+
| 间距模型 | v7.5 分层 padding:Card.paddingX = 20px,Table 首末列 padding = 20px | `design-tokens.json` §componentSpacing |
|
|
206
|
+
| 品牌主色 | #0055EE(HSL 218.6° 100% 46.7%),通过 `var(--primary)` 引用 | `design-tokens.css` |
|
|
207
|
+
| 页面框架 | 遵循 `page-frame.json` 的 L0/L1/L2 层级继承 | `./rules/page-frame.json` |
|
|
208
|
+
| 布局模式 | 遵循 `layout-rules.json` 的 A/B/C/D 四种模式 + 扩展模式 | `./rules/layout-rules.json` |
|
|
209
|
+
| 页面流转 | 遵循 `page-flow.json` 的 CRUD 路径与导航规范 | `./rules/page-flow.json` |
|
|
210
|
+
| 表面规则 | v7.6 ContentCard:去 border,使用 shadow-sm | `styling.json` |
|
|
211
|
+
| 设计原则 | 优先使用已有组件 → 组合而非重写 → 优先内置 variant → 使用语义色值 | `foundations.md` |
|
|
212
|
+
|
|
213
|
+
### 6.5 降级拼装规则
|
|
214
|
+
|
|
215
|
+
当规范中未定义某组件需求时,使用 @teamix-evo/ui 拼装须满足:
|
|
216
|
+
|
|
217
|
+
1. **结构合规**:通过 `boundaries.md` C1-C12 校验
|
|
218
|
+
2. **样式合规**:通过 `styling.json` F1-F10 自检
|
|
219
|
+
3. **Token 合规**:所有视觉属性引用 Token,无硬编码
|
|
220
|
+
4. **语义清晰**:使用 @teamix-evo/ui 的 variant 体系
|
|
221
|
+
5. **可追溯**:HTML 注释中标注拼装来源和决策原因
|
|
222
|
+
|
|
223
|
+
---
|
|
38
224
|
|
|
39
|
-
|
|
40
|
-
- ❌ 只读 patterns/\*.md 不读 philosophy.md / boundaries.md / foundations.md
|
|
41
|
-
- ❌ 选择性读取("这个文件我已经知道内容了")
|
|
42
|
-
- ❌ 把 SKILL.md 文件索引当作"我可以只挑一个读"的菜单
|
|
225
|
+
## 7. 与 code-opentrek skill 协作
|
|
43
226
|
|
|
44
|
-
|
|
227
|
+
页面级任务通常 design + code 两个 skill 同时触发。冲突时按 ADR 0018:
|
|
45
228
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
| [philosophy.md](./philosophy.md) | 设计哲学 + 四大原则 + 方法论 |
|
|
49
|
-
| [generation-flow.md](./generation-flow.md) | AI 六步生成/翻新/验证流程 |
|
|
50
|
-
| [boundaries.md](./boundaries.md) | 硬约束:F/FF/S/C/I 五组共 38 条规则([ERROR]/[WARN]) |
|
|
51
|
-
| [checklist.md](./checklist.md) | 10 项自检清单 |
|
|
52
|
-
| [foundations.md](./foundations.md) | Token 用法 + 排版 + 间距 + 色彩 + 圆角 + 阴影 + 动效 |
|
|
53
|
-
| [components.md](./components.md) | 组件选型决策树 + 双层架构索引 + 组合规则 |
|
|
54
|
-
| [patterns/page-types.md](./patterns/page-types.md) | 5 种页面类型 + 识别决策树 + Zone Map + 页间流转(§6) |
|
|
55
|
-
| [patterns/list-page.md](./patterns/list-page.md) | 列表页模式 (6 种子类型) |
|
|
56
|
-
| [patterns/detail-page.md](./patterns/detail-page.md) | 详情页模式 |
|
|
57
|
-
| [patterns/form-page.md](./patterns/form-page.md) | 表单页模式 (含 wizard) |
|
|
58
|
-
| [patterns/dashboard.md](./patterns/dashboard.md) | Dashboard 数据概览(StatCard / Chart 标准结构) |
|
|
59
|
-
| [patterns/sidebar.md](./patterns/sidebar.md) | 侧边栏统一规范(3 级 / 2 级结构、收起态、品牌色槽位、禁止清单) |
|
|
60
|
-
| [patterns/color-mapping.md](./patterns/color-mapping.md) | v4.1 语义色映射表(主色 / 状态 5 档 / gray 8 / accent 10 / chart 10) |
|
|
61
|
-
| [flows.md](./flows.md) | 4 条核心用户旅程 + 流转自检 |
|
|
62
|
-
| [brand.md](./brand.md) | OpenTrek 品牌调性 + 文案语气 + 正反例 |
|
|
229
|
+
- **design 决定"做什么"**:页面骨架 / Zone 划分 / 组件选型 / Token 绑定 / 视觉规则
|
|
230
|
+
- **code 决定"怎么做"**:文件放置 / import 路径 / API 层 / 表单实现细节
|
|
63
231
|
|
|
64
|
-
|
|
232
|
+
> 完整分工矩阵见 [generation-flow.md §5](./generation-flow.md)。
|
|
@@ -279,7 +279,7 @@ CSS 变量已在 dark 模式下自动切换。手动 `dark:` 会绕过主题系
|
|
|
279
279
|
+ <Dialog><DialogContent>
|
|
280
280
|
```
|
|
281
281
|
|
|
282
|
-
适用:`Dialog / Sheet /
|
|
282
|
+
适用:`Dialog / Sheet / Popover / Tooltip / DropdownMenu / HoverCard`。组件自带层级管理。
|
|
283
283
|
|
|
284
284
|
> 检查: 无 lint (运行时 / 评审,可由 reviewer subagent 抽检)
|
|
285
285
|
|
|
@@ -326,7 +326,7 @@ CSS 变量已在 dark 模式下自动切换。手动 `dark:` 会绕过主题系
|
|
|
326
326
|
|
|
327
327
|
> 检查: 无 lint (后续可加 ESLint JSX 结构规则,目前由 reviewer subagent 抽检)
|
|
328
328
|
|
|
329
|
-
### [ERROR] C2 · Dialog / Sheet
|
|
329
|
+
### [ERROR] C2 · Dialog / Sheet 必须有 Title
|
|
330
330
|
|
|
331
331
|
```diff
|
|
332
332
|
- <DialogContent>...</DialogContent>
|
|
@@ -516,7 +516,7 @@ CSS 变量已在 dark 模式下自动切换。手动 `dark:` 会绕过主题系
|
|
|
516
516
|
| 需要输入的任务 | `Dialog` |
|
|
517
517
|
| 危险操作确认 | `AlertDialog variant="destructive"` |
|
|
518
518
|
| 侧面板(详情 / 筛选) | `Sheet` |
|
|
519
|
-
| 移动端底部面板 | `
|
|
519
|
+
| 移动端底部面板 | `Sheet side="bottom"` |
|
|
520
520
|
| 悬浮信息(hover 触发) | `HoverCard` |
|
|
521
521
|
| 点击弹出小内容 | `Popover` |
|
|
522
522
|
|
|
@@ -63,41 +63,41 @@ ui 多原子最小拼装(万不得已,注释声明)
|
|
|
63
63
|
- `navigation`:Breadcrumb / Pagination / DropdownMenu / Steps / NavigationMenu / Tabs
|
|
64
64
|
- `data-entry`:参见 §3.6 输入控件
|
|
65
65
|
- `data-display`:参见 §3.4 / §3.5;含 Accordion / Tooltip / Table / DataTable / Badge / Tag / Avatar / Descriptions / Statistic
|
|
66
|
-
- `feedback`:Alert / Dialog /
|
|
66
|
+
- `feedback`:Alert / Dialog / Sheet(抽屉) / Popover / Progress / Spinner / Empty / Skeleton / Sonner
|
|
67
67
|
- `deprecated`:不出现在 `list_components` 默认结果,无视
|
|
68
68
|
3. **能力边界核对**:候选单体用 `get_component_meta(name)` 确认 Props 是否承载所需语义,避免"看名字像"实际不通
|
|
69
69
|
|
|
70
70
|
**典型语义近似映射**(仅示例,使用前仍需 MCP 实查):
|
|
71
71
|
|
|
72
|
-
| 找不到的概念 | 优先尝试单体(语义近似)
|
|
73
|
-
| ------------------ |
|
|
74
|
-
| `ItemCard` | `card`(直接用)
|
|
75
|
-
| `SearchCombo` | `filter-bar`(直接用)
|
|
76
|
-
| `ContextSwitcher` | `
|
|
77
|
-
| `Empty` / `NoData` | `empty`(直接用)
|
|
78
|
-
| `Loading` | `spinner` / `skeleton`(直接用)
|
|
79
|
-
| `ConfirmDialog` | `alert-dialog`(直接用)
|
|
80
|
-
| `StatusTag` | `badge` / `tag`(按 §3.3)
|
|
72
|
+
| 找不到的概念 | 优先尝试单体(语义近似) | 万不得已的拼装兜底 |
|
|
73
|
+
| ------------------ | ----------------------------------------------- | --------------------------------- |
|
|
74
|
+
| `ItemCard` | `card`(直接用) | CardHeader + CardContent + Footer |
|
|
75
|
+
| `SearchCombo` | `filter-bar`(直接用) | Input + Select + Button |
|
|
76
|
+
| `ContextSwitcher` | `dropdown-menu` / `command` + `popover`(拼装) | command + popover + avatar |
|
|
77
|
+
| `Empty` / `NoData` | `empty`(直接用) | div + Icon + Text |
|
|
78
|
+
| `Loading` | `spinner` / `skeleton`(直接用) | div + animate-spin |
|
|
79
|
+
| `ConfirmDialog` | `alert-dialog`(直接用) | dialog + button + text |
|
|
80
|
+
| `StatusTag` | `badge` / `tag`(按 §3.3) | div + dot + text |
|
|
81
81
|
|
|
82
82
|
**严禁反模式**:
|
|
83
83
|
|
|
84
84
|
- 单体语义等价时仍按概念名拼装(例:明明有 `empty` 偏写 `<div className="flex flex-col items-center"><Icon><span>暂无数据</span></div>`)
|
|
85
|
-
- 把"最小拼装"理解为"多原子捆绑就行",而不是先**穷尽
|
|
85
|
+
- 把"最小拼装"理解为"多原子捆绑就行",而不是先**穷尽 88 件单体**
|
|
86
86
|
|
|
87
87
|
---
|
|
88
88
|
|
|
89
89
|
## 1. 双层组件架构(实物归属)
|
|
90
90
|
|
|
91
|
-
| 层级 | 来源 | 实物清单(截至当前 variant)
|
|
92
|
-
| ------------------------------------------ | ----------------------------- |
|
|
93
|
-
| **业务扩展层(biz-ui,opentrek variant)** | `@teamix-evo/biz-ui/opentrek` |
|
|
94
|
-
| **ui 实现层(shadcn 原子)** | `@teamix-evo/ui` | ≈
|
|
91
|
+
| 层级 | 来源 | 实物清单(截至当前 variant) |
|
|
92
|
+
| ------------------------------------------ | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
93
|
+
| **业务扩展层(biz-ui,opentrek variant)** | `@teamix-evo/biz-ui/opentrek` | 3 个实物:`list-card`、`op-sidebar`、`op-page-container`。其余 `business/` 目录为文档草稿,**不可 import**。 |
|
|
94
|
+
| **ui 实现层(shadcn 原子)** | `@teamix-evo/ui` | ≈ 76 个原子/复合组件。包含 **PageHeader / Pagination / Steps / Tabs / Tooltip / DataTable / FilterBar / Command / Combobox / DatePicker / Sheet / Dialog / AlertDialog / Card / Badge / Tag / Alert / Sonner / Form** 等高频件。 |
|
|
95
95
|
|
|
96
96
|
### 1.1 选型铁律
|
|
97
97
|
|
|
98
|
-
1. **优先 biz-ui 实物层** — 已封装变体 + 文案规范,但**注意 opentrek 当前仅
|
|
98
|
+
1. **优先 biz-ui 实物层** — 已封装变体 + 文案规范,但**注意 opentrek 当前仅 3 个实物**。
|
|
99
99
|
2. **biz-ui 无实物 → ui 单体精确名匹配** — 按组件名 / 显式语义直查 `find_components`。
|
|
100
|
-
3. **精确名未命中 → ui 单体语义近似扫描**(见 §0.4) — 在
|
|
100
|
+
3. **精确名未命中 → ui 单体语义近似扫描**(见 §0.4) — 在 88 件里找等价单体直接用,**这一步不可跳**。
|
|
101
101
|
4. **单体彻底无等价 → §5 多原子最小拼装** — 仅作为单体穷尽后的兜底。
|
|
102
102
|
5. **禁止**自造同名组件(违反 reuse-first,详见 §0)。
|
|
103
103
|
|
|
@@ -121,7 +121,7 @@ ui 多原子最小拼装(万不得已,注释声明)
|
|
|
121
121
|
|
|
122
122
|
## 3. 选型决策树
|
|
123
123
|
|
|
124
|
-
### 3.1 反馈与确认 — Dialog vs Sheet vs
|
|
124
|
+
### 3.1 反馈与确认 — Dialog vs Sheet vs Popover
|
|
125
125
|
|
|
126
126
|
```text
|
|
127
127
|
需要用户做出决定 / 阻塞主流程?
|
|
@@ -130,7 +130,7 @@ ui 多原子最小拼装(万不得已,注释声明)
|
|
|
130
130
|
│ └─ 复杂表单(< 8 字段)→ Dialog
|
|
131
131
|
└─ 否
|
|
132
132
|
├─ 临时编辑/筛选(侧边滑出)→ Sheet
|
|
133
|
-
├─ 多级下探查看(侧边可叠层)→
|
|
133
|
+
├─ 多级下探查看(侧边可叠层)→ Sheet(多层叠加模式)
|
|
134
134
|
├─ 内容预览/上下文操作(小气泡)→ Popover
|
|
135
135
|
└─ 仅展示信息(鼠标悬浮)→ Tooltip
|
|
136
136
|
```
|
|
@@ -146,17 +146,17 @@ ui 多原子最小拼装(万不得已,注释声明)
|
|
|
146
146
|
|
|
147
147
|
> 来源:Teamix-UI 容器规范。
|
|
148
148
|
|
|
149
|
-
| 类别 | 容器
|
|
150
|
-
| ---------- |
|
|
151
|
-
| **操作型** | 全页面(FormPage)
|
|
152
|
-
| **操作型** | 弹窗模态(Dialog)
|
|
153
|
-
| **操作型** | 气泡(Popconfirm)
|
|
154
|
-
| **展示型** | 全页面(DetailPage)
|
|
155
|
-
| **展示型** | 抽屉非模态(Sheet)
|
|
156
|
-
| **展示型** | 抽屉模态(
|
|
157
|
-
| **展示型** | 弹窗模态(Dialog)
|
|
158
|
-
| **展示型** | 卡片(Card)
|
|
159
|
-
| **展示型** | 通知反馈(
|
|
149
|
+
| 类别 | 容器 | 何时使用 |
|
|
150
|
+
| ---------- | -------------------------- | ------------------------------------------------ |
|
|
151
|
+
| **操作型** | 全页面(FormPage) | 字段多 / 步骤多 / 需要持久 URL |
|
|
152
|
+
| **操作型** | 弹窗模态(Dialog) | 阻塞主流程的简短确认或表单;最多 2 级,不再深入 |
|
|
153
|
+
| **操作型** | 气泡(Popconfirm) | 二次确认(删除/解绑),轻量提示 |
|
|
154
|
+
| **展示型** | 全页面(DetailPage) | 完整信息查看,路由可分享 |
|
|
155
|
+
| **展示型** | 抽屉非模态(Sheet) | 不阻塞主流程,可保留上下文(如侧栏 Detail) |
|
|
156
|
+
| **展示型** | 抽屉模态(Sheet 多层叠加) | 多级下探查看(如资源 → 子资源 → 配置),逐层推出 |
|
|
157
|
+
| **展示型** | 弹窗模态(Dialog) | 一次性展示重要信息 |
|
|
158
|
+
| **展示型** | 卡片(Card) | 同级信息分组;卡片之间间距 16px |
|
|
159
|
+
| **展示型** | 通知反馈(Sonner / Alert) | 瞬时反馈 / 页面级横幅 / 系统通知 |
|
|
160
160
|
|
|
161
161
|
### 3.3 状态展示 — Badge vs Tag vs Alert
|
|
162
162
|
|
|
@@ -195,14 +195,14 @@ ui 多原子最小拼装(万不得已,注释声明)
|
|
|
195
195
|
```text
|
|
196
196
|
枚举值 ≤ 7 → RadioGroup(一屏可见)
|
|
197
197
|
枚举值 8~30 → Select
|
|
198
|
-
枚举值 > 30 / 需搜索 → Combobox
|
|
199
|
-
多选 →
|
|
198
|
+
枚举值 > 30 / 需搜索 → Combobox(输入即建议,支持 multiple 多选)或 Command + Popover 拼装
|
|
199
|
+
多选 → Combobox (multiple={true}) / Checkbox
|
|
200
200
|
数值(整数/小数/金额)→ InputNumber(带 min/max/step/precision)
|
|
201
201
|
数值范围可视化 → Slider(仅用于资源配比/阈值的拖拽式选择)
|
|
202
202
|
日期 → DatePicker / DateRangePicker
|
|
203
|
-
富文本 → Textarea
|
|
203
|
+
富文本 → Textarea
|
|
204
204
|
文件 → Upload
|
|
205
|
-
自动补全 →
|
|
205
|
+
自动补全 → Combobox
|
|
206
206
|
```
|
|
207
207
|
|
|
208
208
|
---
|
|
@@ -224,15 +224,16 @@ ui 多原子最小拼装(万不得已,注释声明)
|
|
|
224
224
|
|
|
225
225
|
## 5. 业务扩展层(候补)— 实物 vs 概念 + 拼凑配方
|
|
226
226
|
|
|
227
|
-
> opentrek variant
|
|
227
|
+
> opentrek variant 当前有 **3 个**实物业务组件:`list-card`、`op-sidebar`、`op-page-container`。
|
|
228
228
|
> 以下表格区分"已实物化"与"概念占位(用 ui 拼装)"。
|
|
229
229
|
|
|
230
230
|
### 5.1 已实物化(直接使用)
|
|
231
231
|
|
|
232
|
-
| 组件
|
|
233
|
-
|
|
|
234
|
-
| **list-card**
|
|
235
|
-
| **op-sidebar**
|
|
232
|
+
| 组件 | 用途 | 归属 |
|
|
233
|
+
| --------------------- | ----------------------------------------- | --------------- |
|
|
234
|
+
| **list-card** | 列表页卡片化展示(替代 ItemCard) | biz-ui/opentrek |
|
|
235
|
+
| **op-sidebar** | 主导航侧栏 | biz-ui/opentrek |
|
|
236
|
+
| **op-page-container** | 页面容器(白卡 + 间距 + PageHeader 插槽) | biz-ui/opentrek |
|
|
236
237
|
|
|
237
238
|
### 5.2 概念占位(按配方拼装)
|
|
238
239
|
|
|
@@ -287,7 +288,7 @@ ui 多原子最小拼装(万不得已,注释声明)
|
|
|
287
288
|
- [ ] 已先用 `find_components` 验证组件存在性(不靠默认)
|
|
288
289
|
- [ ] biz-ui 命中失败 → **先按 §0.4 扫所有 ui 单体找语义近似替代**,单体覆盖时直接采用,未直接跳到 §5 拼装
|
|
289
290
|
- [ ] 单体彻底无等价时 → §5 拼装代码必加注释 `// 已扫尽 89 件 ui 单体无语义等价 → 拼装`
|
|
290
|
-
- [ ] 反馈 / 确认场景按容量选 Dialog / Sheet /
|
|
291
|
+
- [ ] 反馈 / 确认场景按容量选 Dialog / Sheet / Popover
|
|
291
292
|
- [ ] 容器层级 ≤ 3,弹窗最多 2 级,超过则跳转全页面
|
|
292
293
|
- [ ] 卡片列表优先 biz-ui `list-card`,否则用 `card[] + grid` 拼
|
|
293
294
|
- [ ] 表格 ≤ 6 列,超过改 DataTable + 列控制
|