@lark-apaas/coding-templates 0.1.10 → 0.1.11
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
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
client/src/
|
|
19
19
|
├── app.tsx # 路由注册
|
|
20
20
|
├── index.css # 全局样式 + 主题变量
|
|
21
|
-
├── components/ #
|
|
21
|
+
├── components/ # 基础 UI 组件（禁止存放业务组件）
|
|
22
22
|
│ └── ui/ # shadcn/ui 内置组件（勿手动修改）
|
|
23
23
|
├── pages/ # 页面模块（每个页面一个目录）
|
|
24
24
|
│ └── home/
|
|
@@ -54,11 +54,33 @@ export default function DashboardPage() {
|
|
|
54
54
|
- 每个视觉上独立的区块拆为一个组件文件，即使只出现一次
|
|
55
55
|
- 单个组件文件不超过 **150 行**，超出时进一步拆分子组件
|
|
56
56
|
- 页面专属组件放在 `pages/<page>/components/`
|
|
57
|
-
-
|
|
58
|
-
- 相同 UI 片段出现 **≥2 次**时，必须提取为可复用组件
|
|
57
|
+
- `client/src/components/` 仅存放基础 UI 组件（如 shadcn/ui），**禁止存放业务组件**
|
|
59
58
|
- 文件名 kebab-case（`stat-card.tsx`），组件名 PascalCase（`StatCard`）
|
|
60
59
|
- 组件之间**禁止循环引用**
|
|
61
60
|
|
|
61
|
+
### Section 独立性（并行开发规范）
|
|
62
|
+
|
|
63
|
+
每个 Section 级组件（如 `StatsSection`、`DataTableSection`）必须做到**完全自包含**：
|
|
64
|
+
|
|
65
|
+
**1. 页面文件 = 纯布局组合器**
|
|
66
|
+
|
|
67
|
+
- `index.tsx` 只做 import + JSX 排列，**禁止包含** `useState`、`useEffect`、数据请求或业务逻辑
|
|
68
|
+
- 页面文件无 props 接口定义，不承担任何数据协调职责
|
|
69
|
+
|
|
70
|
+
**2. Section 自包含原则**
|
|
71
|
+
|
|
72
|
+
每个 Section 组件独立拥有自己的：
|
|
73
|
+
- **数据获取**（API 调用、fetch）— 即使多个 Section 需要同一份数据，各自获取
|
|
74
|
+
- **状态管理**（useState、useReducer）
|
|
75
|
+
- **类型定义**（写在同文件或同目录下的 `types.ts`）
|
|
76
|
+
- **子组件**（如需拆分，放在同级目录，如 `components/stats-section/` 目录化）
|
|
77
|
+
|
|
78
|
+
**3. 禁止 Section 间横向依赖**
|
|
79
|
+
|
|
80
|
+
- 兄弟 Section 之间**禁止互相 import**
|
|
81
|
+
- 兄弟 Section 之间**禁止通过 Context、全局 store、事件总线、页面 props 共享状态**
|
|
82
|
+
- 每个 Section 可独立开发、独立测试，不依赖其他 Section 的存在
|
|
83
|
+
|
|
62
84
|
---
|
|
63
85
|
|
|
64
86
|
## 路由注册
|
|
@@ -165,8 +187,8 @@ export default function DashboardPage() {
|
|
|
165
187
|
|
|
166
188
|
| 检查项 | 验收标准 |
|
|
167
189
|
|--------|---------|
|
|
168
|
-
| 页面拆分 |
|
|
169
|
-
|
|
|
190
|
+
| 页面拆分 | 页面文件只做骨架编排（无 state/effect/逻辑）；每个 Section 自包含数据+状态+类型；兄弟 Section 间无互相 import；单文件 ≤150 行 |
|
|
191
|
+
| 命名规范 | 文件名 kebab-case，组件名 PascalCase |
|
|
170
192
|
| 路由注册 | 新页面已在 `app.tsx` 注册；跳转使用 `<Link>` / `useNavigate()`，无 `<a href>` |
|
|
171
193
|
| 主题色 | 使用语义化变量类（`bg-background`、`text-primary` 等）；未硬编码颜色值 |
|
|
172
194
|
| 主题修改 | 仅增量覆盖变更的变量；新增色同时注册 `:root` 和 `@theme inline` |
|