self-evolve-framework 1.1.0 → 1.1.1
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 +1 -1
- package/template/rules/CodeGraph.mdc +0 -23
- package/template/rules/Svelte_5.mdc +0 -167
- package/template/rules/Svelte_Flow.mdc +0 -176
- package/template/rules/Tailwind_CSS_v4.mdc +0 -187
- package/template/rules/Tauri.mdc +0 -145
- package/template/rules/app-error-pattern.mdc +0 -65
- package/template/rules/invoke-safe-pattern.mdc +0 -53
- package/template/rules/js.mdc +0 -10
- package/template/rules/powershell.mdc +0 -9
- package/template/rules//346/227/245/345/277/227.mdc +0 -15
- package/template/rules//350/257/267/346/261/202.mdc +0 -49
- package/template/skills/caveman/SKILL.md +0 -49
- package/template/skills/check/SKILL.md +0 -393
- package/template/skills/check/agents/reviewer-architecture.md +0 -39
- package/template/skills/check/agents/reviewer-security.md +0 -39
- package/template/skills/check/references/persona-catalog.md +0 -56
- package/template/skills/check/references/project-context.md +0 -120
- package/template/skills/check/references/public-reply.md +0 -14
- package/template/skills/check/scripts/audit_signals.py +0 -666
- package/template/skills/check/scripts/run-tests.sh +0 -19
- package/template/skills/design/SKILL.md +0 -173
- package/template/skills/design/references/design-aesthetic-quality.md +0 -67
- package/template/skills/design/references/design-data-viz.md +0 -34
- package/template/skills/design/references/design-reference.md +0 -295
- package/template/skills/design/references/design-tokens.md +0 -45
- package/template/skills/design/references/design-traps.md +0 -43
- package/template/skills/design-an-interface/SKILL.md +0 -94
- package/template/skills/diagnose/SKILL.md +0 -117
- package/template/skills/diagnose/scripts/hitl-loop.template.sh +0 -41
- package/template/skills/edit-article/SKILL.md +0 -14
- package/template/skills/git-guardrails-claude-code/SKILL.md +0 -95
- package/template/skills/git-guardrails-claude-code/scripts/block-dangerous-git.sh +0 -25
- package/template/skills/grill-me/SKILL.md +0 -10
- package/template/skills/grill-with-docs/ADR-FORMAT.md +0 -47
- package/template/skills/grill-with-docs/CONTEXT-FORMAT.md +0 -60
- package/template/skills/grill-with-docs/SKILL.md +0 -88
- package/template/skills/handoff/SKILL.md +0 -15
- package/template/skills/health/SKILL.md +0 -260
- package/template/skills/health/agents/inspector-context.md +0 -119
- package/template/skills/health/agents/inspector-control.md +0 -84
- package/template/skills/health/agents/inspector-maintainability.md +0 -55
- package/template/skills/health/scripts/check-agent-context.sh +0 -5
- package/template/skills/health/scripts/check-doc-refs.sh +0 -8
- package/template/skills/health/scripts/check-maintainability.sh +0 -8
- package/template/skills/health/scripts/check-verifier-output.sh +0 -5
- package/template/skills/health/scripts/check_agent_context.py +0 -444
- package/template/skills/health/scripts/check_doc_refs.py +0 -110
- package/template/skills/health/scripts/check_maintainability.py +0 -635
- package/template/skills/health/scripts/check_verifier_output.py +0 -116
- package/template/skills/health/scripts/collect-data.sh +0 -751
- package/template/skills/hunt/SKILL.md +0 -232
- package/template/skills/hunt/references/failure-patterns.md +0 -138
- package/template/skills/hunt/references/ime-unicode.md +0 -58
- package/template/skills/hunt/references/logging-techniques.md +0 -72
- package/template/skills/hunt/references/rendering-debug.md +0 -34
- package/template/skills/improve-codebase-architecture/DEEPENING.md +0 -37
- package/template/skills/improve-codebase-architecture/HTML-REPORT.md +0 -123
- package/template/skills/improve-codebase-architecture/INTERFACE-DESIGN.md +0 -44
- package/template/skills/improve-codebase-architecture/LANGUAGE.md +0 -53
- package/template/skills/improve-codebase-architecture/SKILL.md +0 -81
- package/template/skills/learn/SKILL.md +0 -140
- package/template/skills/migrate-to-shoehorn/SKILL.md +0 -118
- package/template/skills/obsidian-vault/SKILL.md +0 -59
- package/template/skills/prototype/LOGIC.md +0 -79
- package/template/skills/prototype/SKILL.md +0 -30
- package/template/skills/prototype/UI.md +0 -112
- package/template/skills/qa/SKILL.md +0 -130
- package/template/skills/read/SKILL.md +0 -141
- package/template/skills/read/references/read-methods.md +0 -129
- package/template/skills/read/scripts/fetch.sh +0 -106
- package/template/skills/read/scripts/fetch_feishu.py +0 -251
- package/template/skills/read/scripts/fetch_local.py +0 -218
- package/template/skills/read/scripts/fetch_weixin.py +0 -107
- package/template/skills/request-refactor-plan/SKILL.md +0 -68
- package/template/skills/review/SKILL.md +0 -78
- package/template/skills/rust-auto-fix/SKILL.md +0 -94
- package/template/skills/scaffold-exercises/SKILL.md +0 -106
- package/template/skills/sdd-dev/SKILL.md +0 -114
- package/template/skills/setup-matt-pocock-skills/SKILL.md +0 -121
- package/template/skills/setup-matt-pocock-skills/domain.md +0 -51
- package/template/skills/setup-matt-pocock-skills/issue-tracker-github.md +0 -22
- package/template/skills/setup-matt-pocock-skills/issue-tracker-gitlab.md +0 -23
- package/template/skills/setup-matt-pocock-skills/issue-tracker-local.md +0 -19
- package/template/skills/setup-matt-pocock-skills/triage-labels.md +0 -15
- package/template/skills/setup-pre-commit/SKILL.md +0 -91
- package/template/skills/svelte-warnings-fix/SKILL.md +0 -94
- package/template/skills/tauri-nsis-installer-icon/SKILL.md +0 -92
- package/template/skills/tauri-nsis-installer-icon/references/tauri-nsis-schema.md +0 -71
- package/template/skills/tb/SKILL.md +0 -62
- package/template/skills/tdd/SKILL.md +0 -109
- package/template/skills/tdd/deep-modules.md +0 -33
- package/template/skills/tdd/interface-design.md +0 -31
- package/template/skills/tdd/mocking.md +0 -59
- package/template/skills/tdd/refactoring.md +0 -10
- package/template/skills/tdd/tests.md +0 -61
- package/template/skills/teach/GLOSSARY-FORMAT.md +0 -35
- package/template/skills/teach/LEARNING-RECORD-FORMAT.md +0 -46
- package/template/skills/teach/MISSION-FORMAT.md +0 -31
- package/template/skills/teach/RESOURCES-FORMAT.md +0 -32
- package/template/skills/teach/SKILL.md +0 -91
- package/template/skills/think/SKILL.md +0 -184
- package/template/skills/to-issues/SKILL.md +0 -83
- package/template/skills/to-prd/SKILL.md +0 -74
- package/template/skills/triage/AGENT-BRIEF.md +0 -168
- package/template/skills/triage/OUT-OF-SCOPE.md +0 -101
- package/template/skills/triage/SKILL.md +0 -103
- package/template/skills/ubiquitous-language/SKILL.md +0 -93
- package/template/skills/ver/SKILL.md +0 -62
- package/template/skills/write/SKILL.md +0 -209
- package/template/skills/write/references/write-en.md +0 -199
- package/template/skills/write/references/write-product-localization.md +0 -43
- package/template/skills/write/references/write-zh-bilingual.md +0 -59
- package/template/skills/write/references/write-zh-prose.md +0 -50
- package/template/skills/write/references/write-zh-release-notes.md +0 -40
- package/template/skills/write/references/write-zh.md +0 -721
- package/template/skills/write-a-skill/SKILL.md +0 -117
- package/template/skills/writing-beats/SKILL.md +0 -52
- package/template/skills/writing-fragments/SKILL.md +0 -75
- package/template/skills/writing-shape/SKILL.md +0 -64
- package/template/skills/zoom-out/SKILL.md +0 -7
package/package.json
CHANGED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: CodeBuddy 工具使用指南 — 何时用哪个工具
|
|
3
|
-
alwaysApply: true
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
## CodeBuddy 代码探索指南
|
|
7
|
-
|
|
8
|
-
### 工具选择原则
|
|
9
|
-
|
|
10
|
-
| 问题类型 | 推荐工具 |
|
|
11
|
-
|---------|---------|
|
|
12
|
-
| "查找名为 X 的定义" | `search_content`(精确匹配)或 `task(code-explorer)`(范围探索) |
|
|
13
|
-
| "X 被哪些地方调用?" | `search_content` 搜索引用 + `codebase_search` 语义搜索 |
|
|
14
|
-
| "这个文件的结构是什么?" | `read_file` 读取文件 |
|
|
15
|
-
| "目录下有哪些文件?" | `list_dir` 或 `search_file` 通配符匹配 |
|
|
16
|
-
| "给我整个模块的上下文" | `task(code-explorer)` 子代理批量探索 |
|
|
17
|
-
|
|
18
|
-
### 规则
|
|
19
|
-
|
|
20
|
-
- **直接回答,不委托探索。** 对于架构问题,先 `read_file` 关键文件,再 `search_content` 追踪引用。不需要启动子代理来读文件。
|
|
21
|
-
- **优先精确匹配。** 知道符号名时用 `search_content`(正则匹配),不确定时用 `codebase_search`(语义搜索)。
|
|
22
|
-
- **批量读取优于多次单读。** 需要理解多个文件时一次 `read_file` 多文件,不要分多次调用。
|
|
23
|
-
- **`task(code-explorer)` 适合大范围代码探索**(跨多个目录、多个模式搜索),简单查找直接用 `search_content`。
|
|
@@ -1,167 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
description:
|
|
3
|
-
alwaysApply: true
|
|
4
|
-
enabled: true
|
|
5
|
-
updatedAt: 2026-05-13T05:27:41.155Z
|
|
6
|
-
provider:
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
Svelte 5 项目编码规范(100% 严格遵循 Svelte 官方最新标准)
|
|
10
|
-
完全遵循 Svelte 5 官方文档、官方最佳实践、$ 响应式规范、组件设计与目录结构,无任何自定义野路子。
|
|
11
|
-
适用:Svelte 5 + SvelteKit 2/3(纯 Svelte / SvelteKit 通用)
|
|
12
|
-
一、项目结构规范(官方标准)
|
|
13
|
-
纯 Svelte 5 项目结构
|
|
14
|
-
plaintext
|
|
15
|
-
src/
|
|
16
|
-
├── components/ # 可复用 UI 组件(官方推荐)
|
|
17
|
-
├── lib/ # 工具函数、业务逻辑、TS 类型(官方固定目录)
|
|
18
|
-
├── App.svelte # 根组件
|
|
19
|
-
├── main.ts # 入口挂载文件
|
|
20
|
-
└── app.css # 全局样式
|
|
21
|
-
SvelteKit + Svelte 5 项目结构
|
|
22
|
-
plaintext
|
|
23
|
-
src/
|
|
24
|
-
├── routes/ # 路由页面(官方强制)
|
|
25
|
-
├── lib/ # 工具、组件、store、工具函数(官方强制)
|
|
26
|
-
│ ├── components/ # 公共组件
|
|
27
|
-
│ ├── stores/ # 全局状态
|
|
28
|
-
│ └── utils/ # 工具函数
|
|
29
|
-
└── app.html # 入口 HTML(官方固定)
|
|
30
|
-
官方强制规则:
|
|
31
|
-
工具 / 共享代码必须放在 src/lib/
|
|
32
|
-
禁止随意创建根目录(如 utils/、helpers/)
|
|
33
|
-
组件必须放在 lib/components/ 或同级路由内
|
|
34
|
-
二、响应式规范(Svelte 5 官方唯一标准:$ 响应式)
|
|
35
|
-
1. 声明响应式变量(官方唯一写法)
|
|
36
|
-
svelte
|
|
37
|
-
<script lang="ts">
|
|
38
|
-
// 基础响应式
|
|
39
|
-
let count = $state(0);
|
|
40
|
-
|
|
41
|
-
// 对象/数组(无需 $state.raw,Svelte 5 自动深度响应式)
|
|
42
|
-
let user = $state({ name: 'Svelte', age: 5 });
|
|
43
|
-
</script>
|
|
44
|
-
2. 计算属性(官方 $derived)
|
|
45
|
-
svelte
|
|
46
|
-
<script lang="ts">
|
|
47
|
-
let count = $state(0);
|
|
48
|
-
|
|
49
|
-
// 计算属性:自动依赖追踪
|
|
50
|
-
const double = $derived(count * 2);
|
|
51
|
-
</script>
|
|
52
|
-
3. 副作用(官方 $effect)
|
|
53
|
-
svelte
|
|
54
|
-
<script lang="ts">
|
|
55
|
-
let count = $state(0);
|
|
56
|
-
|
|
57
|
-
// 依赖变化时执行
|
|
58
|
-
$effect(() => {
|
|
59
|
-
console.log('count changed:', count);
|
|
60
|
-
});
|
|
61
|
-
|
|
62
|
-
// 挂载时执行一次
|
|
63
|
-
$effect(() => {
|
|
64
|
-
console.log('mounted');
|
|
65
|
-
return () => console.log('destroyed');
|
|
66
|
-
});
|
|
67
|
-
</script>
|
|
68
|
-
官方禁止:
|
|
69
|
-
禁止使用 Svelte 4 的 $: 语法(已废弃)
|
|
70
|
-
禁止手动实现响应式
|
|
71
|
-
禁止使用第三方响应式库替代原生 API
|
|
72
|
-
三、Props 传参规范(官方 $props())
|
|
73
|
-
svelte
|
|
74
|
-
<script lang="ts">
|
|
75
|
-
// 官方标准 Props 声明
|
|
76
|
-
const { title = '默认标题', count } = $props<{
|
|
77
|
-
title?: string;
|
|
78
|
-
count: number;
|
|
79
|
-
}>();
|
|
80
|
-
</script>
|
|
81
|
-
规则:
|
|
82
|
-
Props 必须使用 $props() 声明
|
|
83
|
-
必须使用 TS 泛型约束类型
|
|
84
|
-
禁止使用 export let(Svelte 5 兼容但不推荐)
|
|
85
|
-
四、事件规范(官方标准)
|
|
86
|
-
1. 子传父(官方 createEventDispatcher)
|
|
87
|
-
svelte
|
|
88
|
-
<script lang="ts">
|
|
89
|
-
import { createEventDispatcher } from 'svelte';
|
|
90
|
-
const dispatch = createEventDispatcher();
|
|
91
|
-
|
|
92
|
-
function send() {
|
|
93
|
-
dispatch('message', { text: 'hello' });
|
|
94
|
-
}
|
|
95
|
-
</script>
|
|
96
|
-
2. 父组件监听
|
|
97
|
-
svelte
|
|
98
|
-
<Child on:message={(e) => console.log(e.detail)} />
|
|
99
|
-
五、状态管理规范(Svelte 5 官方)
|
|
100
|
-
1. 组件内状态:$state
|
|
101
|
-
2. 全局共享状态:$state + 导出(官方标准)
|
|
102
|
-
ts
|
|
103
|
-
// src/lib/stores/appStore.ts
|
|
104
|
-
export const theme = $state('light');
|
|
105
|
-
export const user = $state(null);
|
|
106
|
-
官方规则:
|
|
107
|
-
全局状态直接使用 $state 声明并导出
|
|
108
|
-
无需第三方库
|
|
109
|
-
状态文件放在 src/lib/stores/
|
|
110
|
-
六、TypeScript 规范(官方强制)
|
|
111
|
-
所有文件必须使用 lang="ts"
|
|
112
|
-
svelte
|
|
113
|
-
<script lang="ts">
|
|
114
|
-
禁止使用 any
|
|
115
|
-
接口 / 类型放在 src/lib/types/
|
|
116
|
-
Props、事件、返回值必须强类型定义
|
|
117
|
-
七、组件规范(官方)
|
|
118
|
-
1. 组件命名:大驼峰
|
|
119
|
-
Button.svelte、UserForm.svelte
|
|
120
|
-
2. 样式规范:优先使用 Tailwind 原子类
|
|
121
|
-
- 优先使用 Tailwind CSS v4 原子类(遵循 Tailwind CSS v4 规范)
|
|
122
|
-
- 少量组件特有样式可使用 `<style scoped>`(避免污染全局)
|
|
123
|
-
- 禁止大量自定义原生 CSS 替代原子类
|
|
124
|
-
svelte
|
|
125
|
-
<!-- 推荐:优先使用 Tailwind 原子类 -->
|
|
126
|
-
<div class="relative w-full p-4 flex items-center gap-2 rounded-lg bg-white">
|
|
127
|
-
<slot />
|
|
128
|
-
</div>
|
|
129
|
-
|
|
130
|
-
<!-- 仅对组件特有样式使用 scoped -->
|
|
131
|
-
<style>
|
|
132
|
-
.special-effect { }
|
|
133
|
-
</style>
|
|
134
|
-
3. 逻辑规范
|
|
135
|
-
业务逻辑与 UI 分离
|
|
136
|
-
复杂逻辑抽离到 src/lib/
|
|
137
|
-
组件只做 UI 渲染
|
|
138
|
-
八、指令规范(官方原生)
|
|
139
|
-
{#if}
|
|
140
|
-
{#each}
|
|
141
|
-
{#snippet}(Svelte 5 官方插槽)
|
|
142
|
-
{#key}
|
|
143
|
-
禁止使用第三方指令 / 自定义语法扩展
|
|
144
|
-
九、Svelte 5 废弃语法(严禁使用)
|
|
145
|
-
❌ 禁止 $: 计算属性
|
|
146
|
-
❌ 禁止 export let props
|
|
147
|
-
❌ 禁止 <slot key={}> 旧插槽
|
|
148
|
-
❌ 禁止手动 onMount、beforeUpdate(改用 $effect)
|
|
149
|
-
十、Svelte 5 + Tauri + Svelte Flow 联合规范
|
|
150
|
-
前端 UI:遵循 Svelte 5 官方
|
|
151
|
-
流程图:遵循 Svelte Flow 官方
|
|
152
|
-
桌面能力:遵循 Tauri 官方
|
|
153
|
-
IPC 调用:Tauri 官方 invoke
|
|
154
|
-
状态:Svelte 5 $state
|
|
155
|
-
十一、AI 编码强制规则
|
|
156
|
-
必须使用 **Svelte 5 官方 $ 响应式**($state/$derived / $effect\)
|
|
157
|
-
Props 必须使用 $props()
|
|
158
|
-
共享状态必须放在 src/lib/stores/
|
|
159
|
-
工具函数必须放在 src/lib/utils/
|
|
160
|
-
组件必须放在 src/lib/components/
|
|
161
|
-
禁止使用任何 Svelte 4 废弃语法
|
|
162
|
-
必须使用 TypeScript
|
|
163
|
-
总结(Svelte 5 官方核心 4 条)
|
|
164
|
-
响应式:$state / $derived / $effect
|
|
165
|
-
Props:$props()
|
|
166
|
-
目录:src/lib/ 为唯一共享目录
|
|
167
|
-
无第三方响应式 / 无旧语法
|
|
@@ -1,176 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
description:
|
|
3
|
-
alwaysApply: true
|
|
4
|
-
enabled: true
|
|
5
|
-
updatedAt: 2026-05-13T04:27:39.806Z
|
|
6
|
-
provider:
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
Svelte Flow 项目编码规范(严格遵循 xyflow 官方文档规范)
|
|
10
|
-
适用:@xyflow/svelte 官方标准 | Svelte 4 / Svelte 5 | TypeScript所有规则完全对齐官方 API、官方最佳实践,不自定义野写法。
|
|
11
|
-
一、依赖与版本规范(官方标准)
|
|
12
|
-
唯一官方包:@xyflow/svelte,不安装旧版拆分包、不混用 ReactFlow 依赖。
|
|
13
|
-
始终使用官方稳定版,不装 beta/rc 预发布版。
|
|
14
|
-
安装命令(官方推荐):
|
|
15
|
-
bash
|
|
16
|
-
运行
|
|
17
|
-
pnpm add @xyflow/svelte
|
|
18
|
-
# 或 npm/yarn
|
|
19
|
-
npm install @xyflow/svelte
|
|
20
|
-
样式引入遵循官方:全局仅引入一次官方内置样式
|
|
21
|
-
ts
|
|
22
|
-
import '@xyflow/svelte/dist/style.css';
|
|
23
|
-
二、项目目录结构(官方组件分层规范)
|
|
24
|
-
严格按官方「画布 - 节点 - 边 - 类型 - 工具」分层,组件统一放在 src/lib/components/ 下(遵循 Svelte 5 官方标准):
|
|
25
|
-
plaintext
|
|
26
|
-
src/
|
|
27
|
-
├── lib/
|
|
28
|
-
│ ├── xyflow/
|
|
29
|
-
│ │ ├── types.ts # 官方衍生 TS 类型定义
|
|
30
|
-
│ │ ├── node-types.ts # 注册自定义节点类型(官方 nodeTypes 规范)
|
|
31
|
-
│ │ ├── edge-types.ts # 注册自定义边类型(官方 edgeTypes 规范)
|
|
32
|
-
│ │ └── constants.ts # 画布默认配置、网格、缩放常量
|
|
33
|
-
│ ├── components/
|
|
34
|
-
│ │ └── xyflow/
|
|
35
|
-
│ │ ├── FlowCanvas.svelte # 根画布容器(官方 SvelteFlow 入口)
|
|
36
|
-
│ │ ├── nodes/ # 所有自定义节点组件
|
|
37
|
-
│ │ │ ├── InputNode.svelte
|
|
38
|
-
│ │ │ ├── DefaultNode.svelte
|
|
39
|
-
│ │ │ └── OutputNode.svelte
|
|
40
|
-
│ │ └── edges/ # 所有自定义边组件
|
|
41
|
-
│ │ └── CustomEdge.svelte
|
|
42
|
-
│ └── stores/
|
|
43
|
-
│ └── flowStore.ts # 遵循官方不可变规则管理 nodes / edges
|
|
44
|
-
└── ...
|
|
45
|
-
三、基础 API 使用规范(严格对齐官方)
|
|
46
|
-
1. SvelteFlow 组件属性规范
|
|
47
|
-
只使用官方原生 Props,不私自封装冗余属性;必须遵循官方默认行为:
|
|
48
|
-
panOnDrag、zoomOnScroll 官方默认行为保留
|
|
49
|
-
fitView 仅初始化按需使用
|
|
50
|
-
snapToGrid、snapGrid 严格按官方类型传值
|
|
51
|
-
官方标准模板(Svelte 5 语法 + Tailwind)
|
|
52
|
-
svelte
|
|
53
|
-
<script lang="ts">
|
|
54
|
-
import { SvelteFlow, Controls, MiniMap, Background } from '@xyflow/svelte';
|
|
55
|
-
import '@xyflow/svelte/dist/style.css';
|
|
56
|
-
import { nodeTypes } from '$lib/xyflow/node-types';
|
|
57
|
-
import type { Node, Edge } from '@xyflow/svelte';
|
|
58
|
-
|
|
59
|
-
const { nodes = $bindable(), edges = $bindable() } = $props<{
|
|
60
|
-
nodes?: Node[];
|
|
61
|
-
edges?: Edge[];
|
|
62
|
-
}>();
|
|
63
|
-
</script>
|
|
64
|
-
|
|
65
|
-
<!-- 优先使用 Tailwind 原子类 -->
|
|
66
|
-
<div class="w-full h-full min-h-[600px]">
|
|
67
|
-
<SvelteFlow
|
|
68
|
-
bind:nodes
|
|
69
|
-
bind:edges
|
|
70
|
-
{nodeTypes}
|
|
71
|
-
fitView
|
|
72
|
-
panOnDrag={true}
|
|
73
|
-
zoomOnScroll={true}
|
|
74
|
-
snapToGrid={false}
|
|
75
|
-
>
|
|
76
|
-
<Controls />
|
|
77
|
-
<MiniMap />
|
|
78
|
-
<Background />
|
|
79
|
-
</SvelteFlow>
|
|
80
|
-
</div>
|
|
81
|
-
2. 容器布局强制规则(官方硬性要求)
|
|
82
|
-
官方文档明确:SvelteFlow 必须挂载在有明确宽高的父容器内
|
|
83
|
-
禁止无高度容器、禁止仅靠内容自适应
|
|
84
|
-
所有画布外层容器必须定义 width / height
|
|
85
|
-
四、节点(Node)官方规范
|
|
86
|
-
1. 节点结构遵循官方标准字段
|
|
87
|
-
必须严格遵循官方 Node 类型结构:
|
|
88
|
-
ts
|
|
89
|
-
interface Node {
|
|
90
|
-
id: string;
|
|
91
|
-
type?: string;
|
|
92
|
-
position: { x: number; y: number };
|
|
93
|
-
data: Record<string, any>;
|
|
94
|
-
selected?: boolean;
|
|
95
|
-
dragging?: boolean;
|
|
96
|
-
}
|
|
97
|
-
不得私自新增顶层自定义字段,自定义数据全部放在 data 内部
|
|
98
|
-
id 全局唯一,遵循官方唯一标识规则
|
|
99
|
-
2. Handle 连接点官方规范
|
|
100
|
-
严格区分官方两种类型:
|
|
101
|
-
type="target":入边 接收连接
|
|
102
|
-
type="source":出边 发起连接
|
|
103
|
-
位置仅使用官方枚举 Position.Left/Right/Top/Bottom
|
|
104
|
-
自定义节点内 只能渲染 Handle + UI,不写业务逻辑、不写状态变更
|
|
105
|
-
官方标准自定义节点模板(Svelte 5 语法):
|
|
106
|
-
svelte
|
|
107
|
-
<script lang="ts">
|
|
108
|
-
import { Handle, Position } from '@xyflow/svelte';
|
|
109
|
-
import type { NodeProps } from '@xyflow/svelte';
|
|
110
|
-
|
|
111
|
-
const { data } = $props<{
|
|
112
|
-
data: NodeProps['data'];
|
|
113
|
-
}>();
|
|
114
|
-
</script>
|
|
115
|
-
|
|
116
|
-
<div class="custom-node">
|
|
117
|
-
<Handle type="target" position={Position.Left} />
|
|
118
|
-
<span>{data.label}</span>
|
|
119
|
-
<Handle type="source" position={Position.Right} />
|
|
120
|
-
</div>
|
|
121
|
-
五、自定义节点 / 边 注册规范(官方 nodeTypes /edgeTypes)
|
|
122
|
-
必须在单独 node-types.ts 集中注册,遵循官方映射规则
|
|
123
|
-
键名对应节点 type 字段,值为 Svelte 组件
|
|
124
|
-
ts
|
|
125
|
-
// $lib/xyflow/node-types.ts
|
|
126
|
-
import InputNode from '$components/xyflow/nodes/InputNode.svelte';
|
|
127
|
-
import DefaultNode from '$components/xyflow/nodes/DefaultNode.svelte';
|
|
128
|
-
|
|
129
|
-
// 官方标准 nodeTypes 导出
|
|
130
|
-
export const nodeTypes = {
|
|
131
|
-
input: InputNode,
|
|
132
|
-
default: DefaultNode
|
|
133
|
-
};
|
|
134
|
-
使用时直接传给 <SvelteFlow {nodeTypes} />,完全遵循官方注册机制。
|
|
135
|
-
六、状态更新不可变规范(官方核心原则)
|
|
136
|
-
官方明确:禁止直接变异 nodes /edges 数组✅ 正确(官方推荐不可变更新)
|
|
137
|
-
ts
|
|
138
|
-
// 新增
|
|
139
|
-
nodes = [...nodes, newNode];
|
|
140
|
-
// 更新
|
|
141
|
-
nodes = nodes.map(n => n.id === id ? {...n, data: newData} : n);
|
|
142
|
-
// 删除
|
|
143
|
-
nodes = nodes.filter(n => n.id !== id);
|
|
144
|
-
❌ 禁止
|
|
145
|
-
ts
|
|
146
|
-
nodes.push()
|
|
147
|
-
nodes.splice()
|
|
148
|
-
nodes[index] = xxx
|
|
149
|
-
统一用 store 管理,严格遵守官方不可变数据流。
|
|
150
|
-
七、事件回调规范(官方原生事件)
|
|
151
|
-
仅使用官方内置回调,不封装自定义事件透传:
|
|
152
|
-
onConnect 连线创建
|
|
153
|
-
onNodeClick 节点点击
|
|
154
|
-
onPaneClick 画布空白点击
|
|
155
|
-
onNodesChange / onEdgesChange 官方数据流变更
|
|
156
|
-
所有事件逻辑写在 FlowCanvas 父组件,自定义节点只做 UI 展示,符合官方组件设计思想。
|
|
157
|
-
八、TypeScript 类型规范(官方类型优先)
|
|
158
|
-
所有节点、边、位置、Handle 类型全部导入官方内置类型
|
|
159
|
-
ts
|
|
160
|
-
import type {
|
|
161
|
-
Node, Edge, NodeProps, EdgeProps,
|
|
162
|
-
Position, Connection
|
|
163
|
-
} from '@xyflow/svelte';
|
|
164
|
-
不使用 any,自定义业务数据基于官方 data 扩展接口
|
|
165
|
-
禁止私自改写官方类型定义,如需扩展采用交叉类型
|
|
166
|
-
九、样式与主题规范
|
|
167
|
-
仅引入官方样式一次,不重复导入
|
|
168
|
-
自定义节点样式优先使用 Tailwind CSS v4 原子类(遵循 Tailwind CSS v4 规范)
|
|
169
|
-
少量组件特有样式可使用 <style scoped>(避免污染全局)
|
|
170
|
-
画布内置控件(Controls、MiniMap、Background)直接使用官方组件,不自己复刻
|
|
171
|
-
十、AI 编码强制约束(基于官方规范)
|
|
172
|
-
新增节点必须放入 components/xyflow/nodes 并在 node-types.ts 注册;
|
|
173
|
-
更新 nodes/edges 严格使用不可变替换,禁止原地变异;
|
|
174
|
-
SvelteFlow 父容器必须设置固定宽高,遵循官方布局要求;
|
|
175
|
-
自定义节点仅允许包含 Handle + UI,业务逻辑统一放在外层画布 / Store;
|
|
176
|
-
所有类型、事件、属性只使用官方原生 API,不造私有语法。
|
|
@@ -1,187 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: Tailwind CSS v4 项目编码规范(严格遵循官方标准)
|
|
3
|
-
alwaysApply: true
|
|
4
|
-
enabled: true
|
|
5
|
-
updatedAt: 2026-05-13T14:14:00.000Z
|
|
6
|
-
provider:
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
Tailwind CSS v4 项目编码规范(严格遵循官方标准)
|
|
10
|
-
完全对齐 Tailwind CSS v4 官方设计理念、书写规范、分层原则、最佳实践,不自定义非标写法、不滥用随意堆砌、不脱离官方语义。适用:Tailwind CSS v4,适配 Svelte5 / Vue / React / Tauri 所有项目。
|
|
11
|
-
|
|
12
|
-
一、核心原则(官方底层规范)
|
|
13
|
-
优先原子类,少写自定义 CSS,遵循「工具优先」官方理念。
|
|
14
|
-
语义化优先:优先用官方内置预设类,不随意造自定义工具类。
|
|
15
|
-
样式内聚在元素上,尽量不拆冗余全局 CSS。
|
|
16
|
-
遵循默认设计系统:间距、圆角、阴影、色值严格使用官方预设刻度,不写魔法数值。
|
|
17
|
-
最小自定义:仅在官方无对应语义时,才扩展主题。
|
|
18
|
-
|
|
19
|
-
二、项目引入与初始化规范(Tailwind v4 标准)
|
|
20
|
-
1. 入口引入规范(v4 新语法)
|
|
21
|
-
全局只引入一次 Tailwind 基础样式
|
|
22
|
-
禁止多处重复引入、禁止混用 CDN + 本地版
|
|
23
|
-
|
|
24
|
-
css
|
|
25
|
-
/* 全局主样式文件 src/app.css */
|
|
26
|
-
@import "tailwindcss";
|
|
27
|
-
2. 主题扩展规范(v4 新方式)
|
|
28
|
-
v4 不再使用 tailwind.config.js,改用 CSS @theme 指令
|
|
29
|
-
css
|
|
30
|
-
/* 在全局 CSS 文件中扩展主题 */
|
|
31
|
-
@import "tailwindcss";
|
|
32
|
-
|
|
33
|
-
@theme {
|
|
34
|
-
/* 扩展颜色 */
|
|
35
|
-
--color-brand: #3490dc;
|
|
36
|
-
--color-brand-light: #82c4f8;
|
|
37
|
-
|
|
38
|
-
/* 扩展间距 */
|
|
39
|
-
--spacing-section: 5rem;
|
|
40
|
-
|
|
41
|
-
/* 扩展圆角 */
|
|
42
|
-
--radius-card: 1rem;
|
|
43
|
-
}
|
|
44
|
-
3. 内容扫描规范(v4 新方式)
|
|
45
|
-
v4 不再使用 tailwind.config.js 的 content 字段,改用 CSS @source 指令
|
|
46
|
-
css
|
|
47
|
-
@import "tailwindcss";
|
|
48
|
-
|
|
49
|
-
/* 指定需要扫描的源文件目录 */
|
|
50
|
-
@source "../src";
|
|
51
|
-
@source "../components";
|
|
52
|
-
4. 配置文件规范(v4 不再需要)
|
|
53
|
-
v4 默认不需要 tailwind.config.js / tailwind.config.ts 文件
|
|
54
|
-
所有配置都在 CSS 文件中通过 @theme、@source 等指令完成
|
|
55
|
-
仅在需要插件或特殊配置时,才创建 tailwind.config.ts
|
|
56
|
-
|
|
57
|
-
三、类名书写顺序规范(官方推荐排序规则)
|
|
58
|
-
严格按官方约定顺序书写,固定顺序,便于维护、可读性统一:
|
|
59
|
-
布局定位:container / fixed / absolute / relative / static
|
|
60
|
-
盒模型:w-* h-* min-w-* max-h-* m-* p-*
|
|
61
|
-
弹性 / 网格:flex grid justify-* items-* gap-*
|
|
62
|
-
边框圆角:border border-* rounded-*
|
|
63
|
-
背景颜色:bg-*
|
|
64
|
-
文字排版:text-* font-* leading-* tracking-*
|
|
65
|
-
阴影层级:shadow-* z-*
|
|
66
|
-
交互状态:hover: focus: active: disabled:
|
|
67
|
-
响应式:sm: md: lg: xl: 放最后层叠
|
|
68
|
-
|
|
69
|
-
✅ 正确示例
|
|
70
|
-
html
|
|
71
|
-
<div class="relative w-full p-4 flex items-center gap-2 rounded-lg bg-white text-gray-700 shadow hover:shadow-md md:p-6"></div>
|
|
72
|
-
❌ 禁止:随意乱序、状态类穿插在中间。
|
|
73
|
-
|
|
74
|
-
四、响应式断点规范(官方默认断点不修改)
|
|
75
|
-
严格使用官方默认断点,不擅自改断点像素:
|
|
76
|
-
sm:640px
|
|
77
|
-
md:768px
|
|
78
|
-
lg:1024px
|
|
79
|
-
xl:1280px
|
|
80
|
-
2xl:1536px
|
|
81
|
-
|
|
82
|
-
书写规则:移动端优先,先写默认样式,再逐层加 sm:/md:/lg: 覆盖。
|
|
83
|
-
html
|
|
84
|
-
<div class="text-sm md:text-base lg:text-lg"></div>
|
|
85
|
-
|
|
86
|
-
五、状态变体规范(官方标准)
|
|
87
|
-
只使用官方原生变体,不自定义伪类语法:
|
|
88
|
-
悬浮:hover:
|
|
89
|
-
聚焦:focus:
|
|
90
|
-
激活:active:
|
|
91
|
-
禁用:disabled:
|
|
92
|
-
子元素:first: last: odd: even:
|
|
93
|
-
暗黑模式:dark:
|
|
94
|
-
|
|
95
|
-
写法:变体前缀在前,基础类在后
|
|
96
|
-
html
|
|
97
|
-
<button class="bg-blue-500 hover:bg-blue-600 disabled:opacity-50"></button>
|
|
98
|
-
|
|
99
|
-
六、颜色使用规范(官方)
|
|
100
|
-
优先使用官方语义色阶:gray-50 ~ gray-900、blue-500 等
|
|
101
|
-
禁止随意写十六进制、rgb 魔法色值
|
|
102
|
-
项目主题色统一在 @theme 的 --color-* 中扩展
|
|
103
|
-
透明度统一用官方语法:bg-blue-500/50
|
|
104
|
-
|
|
105
|
-
七、间距、尺寸规范(禁止魔法数字)
|
|
106
|
-
宽高、内边距、外边距、间距 只用官方预设刻度:
|
|
107
|
-
0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10 …
|
|
108
|
-
禁止:p-7 m-13 这类非预设非标值
|
|
109
|
-
必须自定义时,统一在 @theme 的 --spacing-* 中扩展,不直接写任意值
|
|
110
|
-
|
|
111
|
-
八、复用样式规范(官方三种标准方式)
|
|
112
|
-
1. 少量样式:直接写原子类,不抽离
|
|
113
|
-
2. 中等复用:使用 @apply(官方允许)
|
|
114
|
-
css
|
|
115
|
-
@layer components {
|
|
116
|
-
.btn-primary {
|
|
117
|
-
@apply px-4 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600;
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
强制规则:@apply 必须放在 @layer components / @layer utilities 内,禁止裸写。
|
|
121
|
-
|
|
122
|
-
3. 全局通用组件:封装成 Svelte/Vue 组件,不堆砌全局 CSS
|
|
123
|
-
禁止:动辄写大量自定义全局 class 替代原子类。
|
|
124
|
-
|
|
125
|
-
九、Layer 分层规范(官方强制层级)
|
|
126
|
-
严格遵循 Tailwind 三层层级,不打乱优先级:
|
|
127
|
-
@layer base:基础标签默认样式(html、body、h1~h6)
|
|
128
|
-
@layer components:可复用组件样式
|
|
129
|
-
@layer utilities:自定义工具类
|
|
130
|
-
|
|
131
|
-
禁止不写 @layer 直接全局覆写,避免优先级错乱。
|
|
132
|
-
|
|
133
|
-
十、暗黑模式规范(官方标准)
|
|
134
|
-
采用官方 class 模式,不混用 media 模式:
|
|
135
|
-
css
|
|
136
|
-
/* 在 tailwind.config.ts 中配置(如需要) */
|
|
137
|
-
export default {
|
|
138
|
-
darkMode: 'class'
|
|
139
|
-
}
|
|
140
|
-
页面通过给根元素加 dark 类切换,样式用 dark: 前缀。
|
|
141
|
-
|
|
142
|
-
十一、禁止与不推荐写法(官方避坑)
|
|
143
|
-
❌ 禁止
|
|
144
|
-
大量写自定义原生 CSS 替代原子类
|
|
145
|
-
随意修改官方默认断点、默认色板
|
|
146
|
-
滥用任意值语法 w-[123px] 当成常态
|
|
147
|
-
class 名无顺序、杂乱堆砌
|
|
148
|
-
在组件 style 里写大量非工具类样式
|
|
149
|
-
使用 tailwind.config.js 的 theme.extend(v4 已废弃)
|
|
150
|
-
|
|
151
|
-
✅ 允许
|
|
152
|
-
必要时用 [] 任意值,但尽量少用、统一注释
|
|
153
|
-
在 @theme 中增量扩展主题
|
|
154
|
-
合理使用 @apply 做通用组件抽象
|
|
155
|
-
|
|
156
|
-
十二、适配 Svelte5 / Tauri / Svelte Flow 项目附加规则
|
|
157
|
-
Svelte 组件全部样式优先用 Tailwind 原子类,少用 <style scoped>
|
|
158
|
-
Svelte Flow 自定义节点样式、画布控件统一用 Tailwind,不写冗余原生 CSS
|
|
159
|
-
Tauri 窗口、全局布局全部用 Tailwind 布局类控制
|
|
160
|
-
所有组件严格遵循「类名排序、响应式 mobile-first、无魔法值」
|
|
161
|
-
|
|
162
|
-
十三、AI 编码强制约束规则
|
|
163
|
-
所有样式优先使用 Tailwind v4 官方原子类,不主动生成自定义 CSS;
|
|
164
|
-
class 严格按「布局→盒模型→弹性→边框→背景→文字→阴影→状态→响应式」固定顺序;
|
|
165
|
-
禁止使用魔法数字、非标间距、随意十六进制色;
|
|
166
|
-
复用样式优先封装组件,其次 @apply 并放入对应 @layer;
|
|
167
|
-
响应式严格移动端优先,使用官方默认断点不改动;
|
|
168
|
-
不滥用 [] 任意值,仅特殊场景少量使用;
|
|
169
|
-
v4 项目必须使用 @import "tailwindcss" 引入,禁止使用旧的 @tailwind 指令。
|
|
170
|
-
|
|
171
|
-
十四、Tailwind v4 与 v3 主要差异对照表
|
|
172
|
-
| 功能 | Tailwind v3(已废弃) | Tailwind v4(当前使用) |
|
|
173
|
-
|------|---------------------|----------------------|
|
|
174
|
-
| 引入方式 | @tailwind base/components/utilities | @import "tailwindcss" |
|
|
175
|
-
| 配置文件 | tailwind.config.js | 无(改用 CSS @theme) |
|
|
176
|
-
| 内容扫描 | content: [] in config | @source in CSS |
|
|
177
|
-
| 主题扩展 | theme.extend in JS | @theme { } in CSS |
|
|
178
|
-
| 插件注册 | plugins: [] in config | @plugin in CSS |
|
|
179
|
-
| 前缀 | prefix in config | @prefix in CSS |
|
|
180
|
-
|
|
181
|
-
十五、v4 项目结构示例
|
|
182
|
-
plaintext
|
|
183
|
-
src/
|
|
184
|
-
├── app.css # 全局样式(包含 @import "tailwindcss" 和 @theme)
|
|
185
|
-
├── routes/ # 路由页面
|
|
186
|
-
├── lib/ # 工具、组件、store
|
|
187
|
-
└── tailwind.config.ts # 可选,仅在使用插件时需要
|