Skip to content

Commit bc04347

Browse files
author
李磊
committed
fix: add rule
1 parent b282307 commit bc04347

File tree

11 files changed

+321
-729
lines changed

11 files changed

+321
-729
lines changed

.cursor/rules/code-standards.mdc

Lines changed: 0 additions & 101 deletions
This file was deleted.

.cursor/rules/component-guidelines.mdc

Lines changed: 0 additions & 74 deletions
This file was deleted.

.cursor/rules/directives-guidelines.mdc

Lines changed: 48 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -3,109 +3,64 @@ description:
33
globs:
44
alwaysApply: false
55
---
6-
# 自定义指令开发规范
6+
# Directives 指令库使用规范
77

8-
## 目录结构
8+
本规则适用于 [packages/directives](mdc:../../packages/directives) 目录下的所有自定义指令模块。每个指令均为 Vue 3 兼容实现,适用于全局或局部注册。
99

10-
```
11-
packages/directives/src/
12-
├── directives/ # 指令目录
13-
│ ├── [directive]/ # 具体指令
14-
│ │ ├── index.ts # 指令实现
15-
│ │ └── types.ts # 类型定义
16-
│ └── index.ts # 指令导出
17-
├── types/ # 通用类型定义
18-
└── index.ts # 主入口文件
19-
```
20-
21-
## 开发规范
22-
23-
1. 命名规范
24-
- 指令名使用 kebab-case
25-
- 文件名使用 kebab-case
26-
- 类型名使用 PascalCase
27-
- 保持命名语义化
28-
29-
2. 类型定义
30-
- 为指令参数定义类型
31-
- 为指令钩子函数定义类型
32-
- 导出类型定义
33-
- 使用 TypeScript 类型推导
34-
35-
3. 指令实现
36-
- 实现必要的钩子函数
37-
- 处理指令参数
38-
- 处理指令更新
39-
- 清理指令副作用
40-
41-
4. 文档规范
42-
- 说明指令用途
43-
- 描述参数和修饰符
44-
- 提供使用示例
45-
- 说明注意事项
46-
47-
## 最佳实践
48-
49-
1. 指令设计
50-
- 保持指令功能单一
51-
- 提供合理的默认值
52-
- 支持参数配置
53-
- 考虑性能影响
10+
---
5411

55-
2. 性能优化
56-
- 避免不必要的更新
57-
- 优化事件监听
58-
- 及时清理资源
59-
- 使用防抖/节流
12+
## 1. 指令总览
13+
- 所有指令统一导出于 [src/index.ts](mdc:../../packages/directives/src/index.ts)。
14+
- 支持全局批量注册、按需注册。
15+
- 目前内置指令:`vFocus`、`vLazy`。
6016

61-
3. 错误处理
62-
- 参数类型检查
63-
- 异常情况处理
64-
- 提供错误提示
65-
- 优雅降级处理
17+
---
6618

67-
## 使用示例
19+
## 2. vFocus
20+
- **用途**:自动聚焦元素。
21+
- **主力 API**:
22+
- `vFocus` 指令对象,默认导出于 [v-focus/index.ts](mdc:../../packages/directives/src/v-focus/index.ts)。
23+
- **用法**:
24+
```vue
25+
<input v-focus />
26+
```
27+
- **注意**:仅在元素挂载后生效。
6828

69-
```typescript
70-
// 指令定义
71-
const vMyDirective = {
72-
mounted(el, binding) {
73-
// 指令挂载时的处理
74-
},
75-
updated(el, binding) {
76-
// 指令更新时的处理
77-
},
78-
unmounted(el) {
79-
// 指令卸载时的处理
80-
}
81-
}
29+
---
8230

83-
// 使用指令
84-
<div v-my-directive:arg.modifier="value"></div>
85-
```
31+
## 3. vLazy
32+
- **用途**:图片懒加载,仅适用于 `<img>` 元素。
33+
- **主力 API**:
34+
- `vLazy` 指令对象,默认导出于 [v-lazy/index.ts](mdc:../../packages/directives/src/v-lazy/index.ts)。
35+
- **用法**:
36+
```vue
37+
<img v-lazy="'https://example.com/image.png'" />
38+
```
39+
- **注意**:
40+
- 仅能用于 `<img>` 标签,否则控制台警告。
41+
- 依赖浏览器 `IntersectionObserver`,低版本浏览器需注意兼容性。
42+
- `rootMargin` 设为 100px,提前加载。
8643

87-
## 测试规范
44+
---
8845

89-
1. 单元测试
90-
- 测试指令挂载
91-
- 测试指令更新
92-
- 测试指令卸载
93-
- 测试参数处理
46+
## 4. 全局注册
47+
- 推荐通过 `globalRegister(app, directiveKeys?)` 批量注册。
48+
- **用法**:
49+
```ts
50+
import { globalRegister } from '@ssuperlilei/directives';
51+
app.use(globalRegister); // 注册全部
52+
// 或
53+
app.use((app) => globalRegister(app, ['vFocus'])); // 只注册 vFocus
54+
```
55+
- **注意**:注册时会自动去除 `v` 前缀,指令名为 `focus`、`lazy`。
9456

95-
2. 集成测试
96-
- 测试与其他组件交互
97-
- 测试性能影响
98-
- 测试边界情况
99-
- 测试错误处理
57+
---
10058

101-
## 发布流程
59+
## 5. 版本号
60+
- 版本号见 [version.ts](mdc:../../packages/directives/src/version.ts)。
10261

103-
1. 版本管理
104-
- 遵循语义化版本
105-
- 使用 changesets 管理版本
106-
- 更新 CHANGELOG.md
62+
---
10763

108-
2. 构建发布
109-
- 运行 `pnpm build` 构建
110-
- 使用 `pnpm publish:directives` 发布
111-
- 确保文档同步更新
64+
## 其他说明
65+
- 所有指令均为无副作用实现。
66+
- 如需扩展新指令,请保持 API 风格一致,统一导出并支持全局注册。

.cursor/rules/doc.mdc

Lines changed: 0 additions & 8 deletions
This file was deleted.

0 commit comments

Comments
 (0)