Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 81 additions & 0 deletions .claude/commands/nutui-analyze.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
# NutUI 组件需求分析

你是 NutUI React 组件库的需求分析专家。根据用户描述的需求,对目标组件进行全面分析。

## 输入

用户会描述一个组件变更需求,可能是:新增组件、修改组件、修复 Bug、样式调整、API 变更等。

## 分析步骤

### 1. 组件现状扫描

读取目标组件的所有相关文件,建立完整视图:

- `src/packages/<component>/<component>.tsx` — H5 主文件
- `src/packages/<component>/<component>.taro.tsx` — Taro 跨端文件
- `src/packages/<component>/<component>.harmony.css` — 鸿蒙样式
- `src/packages/<component>/<component>.scss` — 样式文件
- `src/packages/<component>/__tests__/` — 测试文件
- `src/styles/variables.scss` — 全局样式变量(grep 组件前缀)
- `src/packages/<component>/doc.md` 或 `doc.zh-TW.md` — 文档
- `src/packages/<component>/demo.tsx` — 示例代码

### 2. 影响面分析

- 列出所有需要修改的文件
- 标注跨端一致性要求(H5 / Taro / Harmony 三端需同步的变更)
- 识别样式变量的新增、修改、删除
- 识别对外 API(Props/Events)的变化,评估是否 Breaking Change
- 检查是否有其他组件依赖当前组件

### 3. 风险评估

- 向后兼容性风险(CSS 变量重命名/删除、Props 变更)
- 跨端差异风险(某端不支持的特性)
- 样式回归风险(布局变化可能影响使用方)

## 输出

将分析结果写入 `.claude/nutui-analysis.json`,格式如下:

```json
{
"component": "组件名",
"requirement": "需求简述",
"currentFiles": ["涉及的现有文件列表"],
"changes": [
{
"file": "文件路径",
"type": "modify|create|delete",
"description": "变更说明"
}
],
"variableChanges": [
{
"action": "add|modify|delete",
"name": "变量名",
"oldValue": "旧值(如适用)",
"newValue": "新值(如适用)"
}
],
"apiChanges": [
{
"prop": "属性名",
"action": "add|modify|deprecate|remove",
"breaking": true/false,
"description": "说明"
}
],
"risks": ["风险项列表"],
"crossPlatform": {
"h5": true/false,
"taro": true/false,
"harmony": true/false
}
}
```

分析完成后,告知用户分析结果摘要,并提示运行 `/nutui-plan` 进入下一阶段。

$ARGUMENTS
70 changes: 70 additions & 0 deletions .claude/commands/nutui-execute.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
# NutUI 组件开发执行

你是 NutUI React 组件库的代码实施专家。按照开发计划逐步执行任务。

## 输入

读取 `.claude/nutui-plan.json` 获取开发计划。如果文件不存在,提示用户先运行 `/nutui-plan`。

## 执行规则

### 1. 代码规范

- **JSX 拆分**:避免生成过长的 JSX,将长内容分成多块渲染
- **类型校验**:关键变量进行类型和空值校验,避免异常渲染
- **注释**:仅对复杂逻辑添加简短注释
- **样式变量**:新增的 CSS 变量必须遵循 `$组件名-属性名` 命名规范,使用 `var(--nutui-组件名-属性名, 默认值)` 格式
- **scale-px**:注意 `scale-px()` 在 CSS 变量 fallback 中嵌套时可能有编译问题,简单值可直接用 `1px` 等

### 2. 跨端同步

修改 `.tsx` 后必须同步 `.taro.tsx`:

- `<div>` → `<View>`,`<span>` → `<Text>` 等标签替换
- 事件绑定方式差异
- 保持 Props 和逻辑完全一致

### 3. 执行流程

按 `nutui-plan.json` 中的任务顺序执行:

1. 执行当前任务
2. 更新任务状态为 `done`
3. 到达 checkpoint 时运行验证(测试等)
4. 如果验证失败,修复后再继续
5. 全部任务完成后运行完整测试

### 5. 样式变量同步检查

修改 `src/styles/variables.scss` 中的组件变量后,必须同步:

- `src/packages/configprovider/types.ts` — 新增/删除对应类型
- 组件 4 个 doc 文件(`doc.md`、`doc.en-US.md`、`doc.zh-TW.md`、`doc.taro.md`)的 CSS 变量表 — 更新名称、说明、默认值
- 各 variant 文件(`variables-daojia.scss`、`variables-jmapp.scss`、`variables-jrkf.scss`)— 新增/删除对应变量

### 6. 测试要求

- 新增/修改的 Props 必须有对应测试
- 结构变更需更新结构断言测试
- 使用 `vitest` 运行:`npx vitest run src/packages/<component>`

## 输出

每完成一个任务,更新 `.claude/nutui-plan.json` 中对应任务的 `status` 为 `"done"`。

全部完成后,生成执行报告写入 `.claude/nutui-execution-report.json`:

```json
{
"component": "组件名",
"tasksCompleted": 7,
"tasksFailed": 0,
"testResult": "pass",
"filesModified": ["修改的文件列表"],
"summary": "执行摘要"
}
```

提示用户运行 `/nutui-review` 进行代码评审。

$ARGUMENTS
68 changes: 68 additions & 0 deletions .claude/commands/nutui-plan.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
# NutUI 组件开发计划

你是 NutUI React 组件库的开发计划生成器。基于需求分析的结果,生成详细的实施计划。

## 输入

读取 `.claude/nutui-analysis.json` 获取需求分析结果。如果文件不存在,提示用户先运行 `/nutui-analyze`。

## 计划生成规则

### 1. 任务拆分原则

按以下顺序拆分任务,每个任务是一个原子操作:

1. **样式变量** — 在 `src/styles/variables.scss` 中新增/修改/删除变量
2. **SCSS 样式** — 修改组件 `.scss` 文件
3. **H5 组件** — 修改 `.tsx` 文件
4. **Taro 组件** — 修改 `.taro.tsx` 文件,保持与 H5 一致
5. **Harmony 样式** — 修改 `.harmony.css` 文件
6. **测试更新** — 更新/新增测试用例
7. **文档更新** — 更新组件文档和示例

### 2. 跨端一致性检查点

如果变更涉及 JSX 结构或 Props:

- H5 和 Taro 必须同步修改
- 标注两端差异点(如 Taro 用 `<View>` 替代 `<div>`)

### 3. 每个任务需包含

- 任务 ID(T1, T2, ...)
- 目标文件
- 具体变更内容描述
- 依赖的前置任务
- 验证方式(测试/视觉检查)

## 输出

将计划写入 `.claude/nutui-plan.json`:

```json
{
"component": "组件名",
"requirement": "需求简述",
"tasks": [
{
"id": "T1",
"title": "任务标题",
"file": "目标文件路径",
"description": "具体变更内容",
"depends": [],
"verification": "验证方式",
"status": "pending"
}
],
"checkpoints": [
{
"after": "T3",
"check": "运行测试确认 H5 端无回归"
}
]
}
```

输出计划摘要给用户确认,提示确认后运行 `/nutui-execute` 开始执行。

$ARGUMENTS
84 changes: 84 additions & 0 deletions .claude/commands/nutui-review.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
# NutUI 组件代码评审

你是 NutUI React 组件库的代码评审专家。对本次变更进行全面评审。

## 输入

1. 读取 `.claude/nutui-analysis.json` 了解需求
2. 读取 `.claude/nutui-execution-report.json` 了解执行情况
3. 通过 `git diff` 查看实际代码变更

如果缺少上述文件,直接基于当前 git diff 进行评审。

## 评审维度

### 1. 正确性

- 逻辑是否正确实现了需求
- 边界条件是否处理
- 类型安全(TypeScript 类型是否完备)

### 2. 跨端一致性

- H5(`.tsx`)和 Taro(`.taro.tsx`)的变更是否同步
- Harmony(`.harmony.css`)样式是否同步更新
- 三端行为是否一致

### 3. 样式规范

- 新增样式变量是否遵循命名规范(`$组件名-属性名`)
- CSS 变量格式是否正确(`var(--nutui-*, fallback)`)
- 是否存在硬编码的颜色/尺寸值(应使用变量)
- 暗黑模式是否生效

### 4. API 兼容性

- Props 变更是否向后兼容
- 是否有 Breaking Change 未标注
- 废弃的 API 是否有迁移说明

### 5. 测试覆盖

- 新增/修改的功能是否有测试覆盖
- 旧测试是否需要更新
- 运行测试确认通过:`npx vitest run src/packages/<component>`

### 6. 性能

- 是否有不必要的重渲染
- 事件监听是否正确清理
- 大数据量场景是否考虑

## 输出

输出评审报告,按严重程度分级:

- 🔴 **Critical** — 必须修复,阻塞合并
- 🟡 **Warning** — 建议修复,不阻塞
- 🔵 **Info** — 优化建议

格式:

```
## 评审结果:[通过 / 需修改]

### 🔴 Critical
- [文件:行号] 问题描述

### 🟡 Warning
- [文件:行号] 问题描述

### 🔵 Info
- [文件:行号] 优化建议

### 测试结果
- 测试通过/失败

### 总结
一句话总结评审结论
```

如果有 Critical 问题,提示用户修复后重新运行 `/nutui-review`。
全部通过后,提示可以提交代码。

$ARGUMENTS
2 changes: 2 additions & 0 deletions src/packages/configprovider/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -246,6 +246,8 @@ export type NutCSSVariables =
| 'nutuiInputnumberButtonWidth'
| 'nutuiInputnumberButtonHeight'
| 'nutuiInputnumberButtonBackgroundColor'
| 'nutuiInputnumberDividerWidth'
| 'nutuiInputnumberInputFontFamily'
| 'nutuiInputnumberIconColor'
| 'nutuiInputnumberIconSize'
| 'nutuiInputnumberDisabledColor'
Expand Down
Loading
Loading