@devflow-tools/plugin-ui-layout 0.1.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/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +126 -0
- package/dist/index.js.map +1 -0
- package/package.json +30 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,eAAO,MAAM,cAAc,EAAE,aAiI5B,CAAC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
export const uiLayoutPlugin = {
|
|
2
|
+
meta: {
|
|
3
|
+
name: "ui-layout",
|
|
4
|
+
version: "0.1.0",
|
|
5
|
+
description: "UI Layout 专家 — 布局模式、组件组合、响应式架构、设计系统",
|
|
6
|
+
icon: "📐",
|
|
7
|
+
tags: ["frontend", "layout", "responsive", "design-system", "ux"],
|
|
8
|
+
},
|
|
9
|
+
knowledge: {
|
|
10
|
+
sources: [
|
|
11
|
+
{
|
|
12
|
+
name: "web-dev-layout",
|
|
13
|
+
urls: [
|
|
14
|
+
"https://web.dev/learn/design/",
|
|
15
|
+
"https://web.dev/learn/css/layout/",
|
|
16
|
+
"https://web.dev/learn/design/introduction/",
|
|
17
|
+
],
|
|
18
|
+
pluginName: "ui-layout",
|
|
19
|
+
version: "2024",
|
|
20
|
+
},
|
|
21
|
+
],
|
|
22
|
+
},
|
|
23
|
+
memory: {
|
|
24
|
+
project: {
|
|
25
|
+
stack: ["CSS Grid", "Flexbox", "Container Queries", "Design Tokens"],
|
|
26
|
+
conventions: [
|
|
27
|
+
{ key: "grid-system", value: "使用 12 列 CSS Grid 系统，间距 16px/24px/32px", source: "manual", confidence: 0.9 },
|
|
28
|
+
{ key: "container-layout", value: "页面使用三区布局（header/main/footer），main 内部使用 Grid", source: "manual", confidence: 0.85 },
|
|
29
|
+
{ key: "spacing-scale", value: "间距使用 4px 倍数的 Scale：4/8/12/16/24/32/48/64", source: "manual", confidence: 0.8 },
|
|
30
|
+
{ key: "breakpoints", value: "响应式断点：mobile(<768)、tablet(768-1024)、desktop(>1024)、wide(>1440)", source: "manual", confidence: 0.85 },
|
|
31
|
+
],
|
|
32
|
+
},
|
|
33
|
+
global: [
|
|
34
|
+
{
|
|
35
|
+
id: "ui-layout:layout-patterns",
|
|
36
|
+
source: "ui-layout",
|
|
37
|
+
title: "常见布局模式",
|
|
38
|
+
content: "Card Layout：Grid + auto-fit + minmax 自适应卡片。Sidebar Layout：两列 Grid 或 Flex。Dashboard：命名 Grid Areas 定义区域。Holy Grail：header + 三列 + footer。Stack：垂直 Flex 排列组件。",
|
|
39
|
+
embedding: [],
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
id: "ui-layout:container-queries",
|
|
43
|
+
source: "ui-layout",
|
|
44
|
+
title: "Container Queries 组件级响应",
|
|
45
|
+
content: "@container 使组件根据容器宽度而非视口宽度调整样式。定义 container-type: inline-size。使用 @container (min-width: X) 替代 @media 实现组件级响应式。",
|
|
46
|
+
embedding: [],
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
id: "ui-layout:design-tokens",
|
|
50
|
+
source: "ui-layout",
|
|
51
|
+
title: "Design Token 体系",
|
|
52
|
+
content: "Token 分三层：Global（基础值如 blue-500）→ Alias（语义值如 color-primary）→ Component（组件级如 button-bg）。使用 CSS 变量传递 Token。Light/Dark 主题通过变量切换。",
|
|
53
|
+
embedding: [],
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
id: "ui-layout:accessibility-layout",
|
|
57
|
+
source: "ui-layout",
|
|
58
|
+
title: "无障碍布局设计",
|
|
59
|
+
content: "使用语义化 HTML（header/nav/main/aside/footer）。Landmark 角色帮助屏幕阅读器导航。Tab 顺序遵循视觉流。触控目标最小 44×44px。颜色对比度 4.5:1 以上。",
|
|
60
|
+
embedding: [],
|
|
61
|
+
},
|
|
62
|
+
],
|
|
63
|
+
},
|
|
64
|
+
workflow: {
|
|
65
|
+
steps: [],
|
|
66
|
+
templates: [
|
|
67
|
+
{
|
|
68
|
+
name: "layout-audit",
|
|
69
|
+
description: "布局审计：一致性检查 → 响应式问题 → 可访问性评估",
|
|
70
|
+
version: "1.0.0",
|
|
71
|
+
steps: [
|
|
72
|
+
{ id: "scan-layouts", description: "扫描页面中所有布局结构（Grid/Flex/定位）", type: "simple", timeout: 10000 },
|
|
73
|
+
{ id: "check-consistency", description: "检查布局一致性（间距、列数、断点是否统一）", type: "simple", depends: ["scan-layouts"], timeout: 10000 },
|
|
74
|
+
{ id: "check-spacing", description: "检查间距是否符合 Scale 体系", type: "simple", depends: ["scan-layouts"], timeout: 10000 },
|
|
75
|
+
{ id: "check-responsive", description: "检查各断点下布局是否正常", type: "simple", depends: ["scan-layouts"], timeout: 15000 },
|
|
76
|
+
{ id: "check-a11y", description: "检查语义化结构和 Landmark 角色", type: "simple", depends: ["scan-layouts"], timeout: 10000 },
|
|
77
|
+
{ id: "generate-report", description: "生成布局审计报告（分级问题 + 修复建议）", type: "llm", depends: ["check-consistency", "check-spacing", "check-responsive", "check-a11y"], timeout: 15000 },
|
|
78
|
+
{ id: "generate-fix", description: "生成布局修复代码", type: "llm", depends: ["generate-report"], timeout: 20000 },
|
|
79
|
+
],
|
|
80
|
+
triggers: [{ type: "cli", command: "audit:layout" }],
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
name: "responsive-design",
|
|
84
|
+
description: "响应式改造：断点分析 → 移动适配 → Container Queries",
|
|
85
|
+
version: "1.0.0",
|
|
86
|
+
steps: [
|
|
87
|
+
{ id: "audit-breakpoints", description: "审计当前断点使用情况", type: "simple", timeout: 10000 },
|
|
88
|
+
{ id: "check-mobile-first", description: "检查是否为移动优先策略", type: "simple", depends: ["audit-breakpoints"], timeout: 5000 },
|
|
89
|
+
{ id: "identify-breakpoints", description: "在哪些组件需要组件级响应（Container Queries）", type: "llm", depends: ["audit-breakpoints"], timeout: 10000 },
|
|
90
|
+
{ id: "refactor-layout", description: "重构布局为移动优先 + 渐进增强", type: "llm", depends: ["check-mobile-first", "identify-breakpoints"], timeout: 20000 },
|
|
91
|
+
{ id: "add-container-queries", description: "为独立组件添加 Container Queries", type: "llm", depends: ["identify-breakpoints"], timeout: 15000 },
|
|
92
|
+
{ id: "multi-viewport-test", description: "多视口截图验证", type: "simple", depends: ["refactor-layout", "add-container-queries"], timeout: 15000 },
|
|
93
|
+
],
|
|
94
|
+
triggers: [{ type: "cli", command: "design:responsive" }],
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
name: "design-token-setup",
|
|
98
|
+
description: "Design Token 体系建设：提取 → 分层 → 代码化",
|
|
99
|
+
version: "1.0.0",
|
|
100
|
+
steps: [
|
|
101
|
+
{ id: "extract-colors", description: "从现有代码提取所有颜色值", type: "simple", timeout: 10000 },
|
|
102
|
+
{ id: "extract-spacing", description: "提取所有间距和尺寸值", type: "simple", timeout: 10000 },
|
|
103
|
+
{ id: "group-tokens", description: "按 Global/Alias/Component 三层分组", type: "llm", depends: ["extract-colors", "extract-spacing"], timeout: 15000 },
|
|
104
|
+
{ id: "generate-tokens", description: "生成 CSS 变量 Token 文件", type: "llm", depends: ["group-tokens"], timeout: 10000 },
|
|
105
|
+
{ id: "replace-hardcoded", description: "替换硬编码值为 Token 引用", type: "llm", depends: ["generate-tokens"], timeout: 20000 },
|
|
106
|
+
{ id: "visual-regression", description: "视觉回归测试确认无差异", type: "simple", depends: ["replace-hardcoded"], timeout: 30000 },
|
|
107
|
+
],
|
|
108
|
+
triggers: [{ type: "cli", command: "setup:design-tokens" }],
|
|
109
|
+
},
|
|
110
|
+
],
|
|
111
|
+
},
|
|
112
|
+
prompt: {
|
|
113
|
+
system: "你是一个 UI Layout 专家。精通 CSS Grid、Flexbox 和响应式设计。使用 Design Token 体系管理样式变量。",
|
|
114
|
+
rules: [
|
|
115
|
+
"优先使用 CSS Grid 做页面布局，Flexbox 做组件内排列",
|
|
116
|
+
"使用容器查询实现组件级响应式",
|
|
117
|
+
"间距遵循 4px 倍数的 Scale 体系",
|
|
118
|
+
"使用语义化 HTML（header/nav/main/aside/footer）",
|
|
119
|
+
"移动优先设计，渐进增强",
|
|
120
|
+
"使用 CSS 变量管理 Design Token",
|
|
121
|
+
"确保触控目标 ≥ 44×44px，对比度 ≥ 4.5:1",
|
|
122
|
+
],
|
|
123
|
+
},
|
|
124
|
+
tools: [],
|
|
125
|
+
};
|
|
126
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@devflow-tools/plugin-ui-layout",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"main": "./dist/index.js",
|
|
6
|
+
"types": "./dist/index.d.ts",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"import": "./dist/index.js",
|
|
10
|
+
"types": "./dist/index.d.ts"
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
"scripts": {
|
|
14
|
+
"build": "tsc -b",
|
|
15
|
+
"test": "vitest run",
|
|
16
|
+
"typecheck": "tsc --noEmit",
|
|
17
|
+
"clean": "rm -rf dist"
|
|
18
|
+
},
|
|
19
|
+
"dependencies": {
|
|
20
|
+
"@devflow-tools/sdk": "*"
|
|
21
|
+
},
|
|
22
|
+
"devDependencies": {
|
|
23
|
+
"typescript": "^5.5.0",
|
|
24
|
+
"vitest": "^2.0.0"
|
|
25
|
+
},
|
|
26
|
+
"files": [
|
|
27
|
+
"dist"
|
|
28
|
+
],
|
|
29
|
+
"gitHead": "4cede97fc7fc673f929427fac169acab100ca8ed"
|
|
30
|
+
}
|