@lark-apaas/coding-steering 0.1.0-alpha.1 → 0.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.
@@ -1,48 +0,0 @@
1
- ---
2
- name: client-coding-guide
3
- description: "Use when implementing client-side features in vite-react stack: components, hooks, routing, state management. 触发词:客户端开发, React 组件, 页面路由, hooks, vite, vite-react"
4
- steering: true
5
- steering-topic: client_coding_guide
6
- ---
7
-
8
- # Client Coding Guide (vite-react)
9
-
10
- ## 一、组件分层
11
-
12
- ```
13
- ui/ ← shadcn-ui 基础组件,源码自动生成,禁止直接编辑
14
- components/ ← 业务组件,组合 ui/ 实现具体场景
15
- pages/ ← 路由页面,组合多个 components/ 构建完整界面
16
- ```
17
-
18
- ## 二、State 管理
19
-
20
- - 局部 state 用 `useState`
21
- - 共享 state 优先用 React Context
22
- - 避免引入 Redux/Zustand 等全局 store(v0.1 不依赖)
23
-
24
- ## 三、表单实现模板
25
-
26
- ```tsx
27
- import { useForm } from 'react-hook-form';
28
- import { zodResolver } from '@hookform/resolvers/zod';
29
- import { z } from 'zod';
30
-
31
- const schema = z.object({
32
- name: z.string().min(1, '必填'),
33
- email: z.string().email(),
34
- });
35
-
36
- type FormValues = z.infer<typeof schema>;
37
-
38
- export function MyForm() {
39
- const form = useForm<FormValues>({ resolver: zodResolver(schema) });
40
- const onSubmit = (values: FormValues) => { /* ... */ };
41
- return (
42
- <form onSubmit={form.handleSubmit(onSubmit)}>
43
- <input {...form.register('name')} />
44
- {/* ... */}
45
- </form>
46
- );
47
- }
48
- ```
@@ -1,48 +0,0 @@
1
- ---
2
- name: component-conventions
3
- description: "Use when creating or refactoring React components: naming, file structure, props typing, default values. 触发词:组件命名, props 类型, 组件文件结构, React 最佳实践"
4
- steering: true
5
- steering-topic: component_conventions
6
- ---
7
-
8
- # Component Conventions (vite-react)
9
-
10
- ## 一、文件结构
11
-
12
- 每个组件一个目录:
13
-
14
- ```
15
- components/
16
- └── UserCard/
17
- ├── index.tsx # 组件主文件
18
- ├── UserCard.test.tsx # 测试(可选)
19
- └── types.ts # 局部类型(可选)
20
- ```
21
-
22
- ## 二、命名
23
-
24
- - 组件名 PascalCase:`UserCard`、`StatusBadge`
25
- - 文件名跟组件名一致:`UserCard.tsx`
26
- - props 接口:`UserCardProps`
27
-
28
- ## 三、props 类型
29
-
30
- ```tsx
31
- interface UserCardProps {
32
- user: User;
33
- onSelect?: (id: string) => void;
34
- className?: string;
35
- }
36
-
37
- export function UserCard({ user, onSelect, className }: UserCardProps) {
38
- // ...
39
- }
40
- ```
41
-
42
- - **强制带 `className?: string`**——所有业务组件都应允许外部传 className
43
- - **回调用 `onXxx` 命名**——`onSelect` / `onChange` / `onSubmit`
44
-
45
- ## 四、默认导出 vs 命名导出
46
-
47
- - 业务组件**命名导出**:`export function UserCard ...`
48
- - 入口/页面组件可以默认导出