@deepstorm/cli 0.1.0 → 0.2.0

package/dist/config-schema.json

@@ -25,7 +25,7 @@
           "properties": {
             "framework": {
               "type": "string",
-              "enum": ["angular", "none"],
+              "enum": ["angular", "react", "none"],
               "description": "前端框架"
             },
             "tsConfig": {

package/dist/registry.json

@@ -114,6 +114,42 @@
                     "skills/reef-gen-frontend/SKILL.md.tmpl"
                   ]
                 },
+                {
+                  "value": "react",
+                  "label": "React",
+                  "template": {
+                    "label": "React 19 + TypeScript + Ant Design + Tailwind CSS 4",
+                    "buildTool": "npx:*",
+                    "formatCmd": "npx",
+                    "fileExt": "*.tsx / *.ts",
+                    "sourcePath": "src/",
+                    "styleRef": "→ 参考 [React 前端速查](quick-reference.md)"
+                  },
+                  "affectedTemplates": [
+                    "skills/reef-style-frontend/SKILL.md.tmpl",
+                    "agents/reef-review-frontend.md.tmpl",
+                    "skills/reef-review/SKILL.md.tmpl",
+                    "skills/reef-gen-frontend/SKILL.md.tmpl"
+                  ]
+                },
+                {
+                  "value": "vue",
+                  "label": "Vue",
+                  "template": {
+                    "label": "Vue 3 + TypeScript + Ant Design Vue + Tailwind CSS 4",
+                    "buildTool": "npx:*",
+                    "formatCmd": "npx",
+                    "fileExt": "*.vue / *.ts",
+                    "sourcePath": "src/",
+                    "styleRef": "→ 参考 [Vue 前端速查](quick-reference.md)"
+                  },
+                  "affectedTemplates": [
+                    "skills/reef-style-frontend/SKILL.md.tmpl",
+                    "agents/reef-review-frontend.md.tmpl",
+                    "skills/reef-review/SKILL.md.tmpl",
+                    "skills/reef-gen-frontend/SKILL.md.tmpl"
+                  ]
+                },
                 {
                   "value": "none",
                   "label": "不选择",
@@ -138,10 +174,6 @@
               "key": "reef.frontend.uiLibrary",
               "label": "UI 组件库",
               "type": "select",
-              "dependsOn": {
-                "key": "reef.frontend.framework",
-                "value": "angular"
-              },
               "options": [
                 {
                   "value": "primeng",
@@ -156,6 +188,32 @@
                     "ui-lib/primeng"
                   ]
                 },
+                {
+                  "value": "antd",
+                  "label": "Ant Design (React)",
+                  "template": {
+                    "styleRef": "→ 参考 [Ant Design 规范](antd.md)"
+                  },
+                  "affectedTemplates": [
+                    "skills/reef-style-frontend/SKILL.md.tmpl"
+                  ],
+                  "fragments": [
+                    "ui-lib/antd"
+                  ]
+                },
+                {
+                  "value": "antd-vue",
+                  "label": "Ant Design Vue",
+                  "template": {
+                    "styleRef": "→ 参考 [Ant Design Vue 规范](antd-vue.md)"
+                  },
+                  "affectedTemplates": [
+                    "skills/reef-style-frontend/SKILL.md.tmpl"
+                  ],
+                  "fragments": [
+                    "ui-lib/antd-vue"
+                  ]
+                },
                 {
                   "value": "none",
                   "label": "不使用 UI 组件库",
@@ -253,7 +311,9 @@
                     "skills/reef-style-frontend/SKILL.md.tmpl"
                   ],
                   "fragments": [
-                    "test/vitest"
+                    "test/vitest",
+                    "test/vitest-react",
+                    "test/vitest-vue"
                   ]
                 },
                 {

package/dist/skills/reef-gen-frontend/variants/react/steps.md

@@ -0,0 +1,31 @@
+# React 前端编码步骤
+
+按以下顺序逐块编写，依赖关系由前向后：
+
+1. **类型定义** — 实体接口/类型、Props 类型、API 响应类型
+2. **API Hooks** — 自定义 Hook 封装数据获取（loading / error / data 三态）
+3. **组件** — Ant Design 函数组件 + Hooks 状态管理
+4. **页面组装** — React Router 路由配置、Layout 页面布局
+
+每完成一块对照 `reef:reef-style-frontend` 中对应章节检查。
+
+## 核心约束
+
+- 函数组件 + TypeScript（禁止 Class 组件）
+- Props 使用 `interface` 定义（公共 API），联合类型使用 `type`
+- 自定义 Hook 使用 `use` 前缀命名
+- `useEffect` 依赖数组必须穷举闭包内所有响应值
+- 数据获取层与 UI 渲染层分离（自定义 Hook 封装业务逻辑）
+- Ant Design 组件按需导入（`import { Button } from 'antd'`）
+- 路由组件使用 `React.lazy()` + `Suspense` 懒加载
+
+## 构建命令
+
+```bash
+# 快速验证
+npx tsc --noEmit
+npx lint
+
+# 完整检查
+npx tsc --noEmit && npx lint && npx vitest run
+```

package/dist/skills/reef-gen-frontend/variants/vue/steps.md

@@ -0,0 +1,34 @@
+# Vue 3 前端编码步骤
+
+按以下顺序逐块编写，依赖关系由前向后：
+
+1. **类型定义** — 实体接口/类型、Props 类型（`defineProps<Props>()`）、Emits 类型（`defineEmits<{...}>()`）、API 响应类型
+2. **组合式函数** — 自定义 Composables 封装数据获取和业务逻辑（loading / error / data 三态），使用 `use` 前缀命名
+3. **组件** — `<script setup lang="ts">` + Ant Design Vue 组件 + 组合式 API 状态管理
+4. **页面组装** — Vue Router 路由配置（`createRouter` + `createWebHistory`）、懒加载、Layout 页面布局
+
+每完成一块对照 `reef:reef-style-frontend` 中对应章节检查。
+
+## 核心约束
+
+- `<script setup lang="ts">` 语法（禁止 Options API）
+- Props 使用 `defineProps<Props>()` 类型推断语法（公共 API），联合类型使用 `type`
+- 事件使用 `defineEmits<{ event: [arg: type] }>()` 命名元组语法
+- 组合式函数使用 `use` 前缀命名（`useAuth`、`usePagination`）
+- 响应式状态优先使用 `ref()`，`reactive()` 仅用于不需要整体替换的固定结构
+- 数据获取层与 UI 渲染层分离（组合式函数封装业务逻辑）
+- Ant Design Vue 组件通过 `unplugin-vue-components` 自动按需导入（`<a-button>`、`<a-table>`）
+- 页面组件使用动态 `import()` 实现懒加载
+- 状态管理使用 Pinia（setup store 语法）
+- 生命周期钩子中注册的监听器/定时器必须在 `onUnmounted` 中清理
+
+## 构建命令
+
+```bash
+# 快速验证
+npx vue-tsc --noEmit
+npx lint
+
+# 完整检查
+npx vue-tsc --noEmit && npx lint && npx vitest run
+```

package/dist/skills/reef-style-frontend/fragments/test/vitest-react/examples/testing.md

@@ -0,0 +1,283 @@
+# React 组件和 Hook 测试代码示例
+
+## 组件渲染测试
+
+```tsx
+// UserAvatar.test.tsx
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { UserAvatar } from './UserAvatar'
+
+describe('UserAvatar', () => {
+  const mockUser = { username: 'alice', avatar: 'https://example.com/avatar.png' }
+
+  it('renders with avatar image', () => {
+    render(<UserAvatar user={mockUser} />)
+    const img = screen.getByAltText('alice')
+    expect(img).toBeInTheDocument()
+    expect(img).toHaveAttribute('src', mockUser.avatar)
+  })
+
+  it('renders with size classes', () => {
+    const { container } = render(<UserAvatar user={mockUser} size="lg" />)
+    // Ant Design Avatar 通过 size 属性控制尺寸
+    expect(container.querySelector('.ant-avatar')).toBeInTheDocument()
+  })
+
+  it('is clickable when onClick provided', async () => {
+    const handleClick = vi.fn()
+    render(<UserAvatar user={mockUser} onClick={handleClick} />)
+
+    await userEvent.click(screen.getByAltText('alice'))
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+})
+```
+
+## 表单测试
+
+```tsx
+// CreateUserForm.test.tsx
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { CreateUserForm } from './CreateUserForm'
+
+// Mock message
+vi.mock('antd', async () => {
+  const actual = await vi.importActual('antd')
+  return { ...actual, message: { success: vi.fn(), error: vi.fn() } }
+})
+
+describe('CreateUserForm', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders all form fields', () => {
+    render(<CreateUserForm />)
+
+    expect(screen.getByLabelText('用户名')).toBeInTheDocument()
+    expect(screen.getByLabelText('邮箱')).toBeInTheDocument()
+    expect(screen.getByLabelText('角色')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '创建' })).toBeInTheDocument()
+  })
+
+  it('shows validation errors on empty submit', async () => {
+    render(<CreateUserForm />)
+
+    await userEvent.click(screen.getByRole('button', { name: '创建' }))
+
+    await waitFor(() => {
+      expect(screen.getByText('请输入用户名')).toBeInTheDocument()
+      expect(screen.getByText('请输入邮箱')).toBeInTheDocument()
+    })
+  })
+
+  it('submits form with valid data', async () => {
+    const createUser = vi.fn().mockResolvedValue({ id: '1' })
+    render(<CreateUserForm onSubmit={createUser} />)
+
+    await userEvent.type(screen.getByLabelText('用户名'), 'newuser')
+    await userEvent.type(screen.getByLabelText('邮箱'), 'new@example.com')
+
+    // Ant Design Select 需要特殊处理
+    const roleSelect = screen.getByLabelText('角色')
+    await userEvent.click(roleSelect)
+    await userEvent.click(screen.getByText('编辑'))
+
+    await userEvent.click(screen.getByRole('button', { name: '创建' }))
+
+    await waitFor(() => {
+      expect(createUser).toHaveBeenCalledWith({
+        username: 'newuser',
+        email: 'new@example.com',
+        role: 'EDITOR',
+      })
+    })
+  })
+})
+```
+
+## Hook 测试
+
+```tsx
+// useUsers.test.ts
+import { renderHook, act, waitFor } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { useUsers } from './useUsers'
+
+describe('useUsers', () => {
+  const mockUsers = [
+    { id: '1', username: 'alice', email: 'alice@example.com', role: 'ADMIN' },
+  ]
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('returns loading state initially', () => {
+    global.fetch = vi.fn().mockImplementation(() => new Promise(() => {})) // 永不 resolve
+
+    const { result } = renderHook(() => useUsers())
+
+    expect(result.current.loading).toBe(true)
+    expect(result.current.users).toEqual([])
+    expect(result.current.error).toBeNull()
+  })
+
+  it('returns users on successful fetch', async () => {
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve({ content: mockUsers, totalElements: 1 }),
+    })
+
+    const { result } = renderHook(() => useUsers())
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false)
+    })
+
+    expect(result.current.users).toEqual(mockUsers)
+    expect(result.current.error).toBeNull()
+  })
+
+  it('returns error on fetch failure', async () => {
+    global.fetch = vi.fn().mockRejectedValue(new Error('Network error'))
+
+    const { result } = renderHook(() => useUsers())
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false)
+    })
+
+    expect(result.current.error).toBeInstanceOf(Error)
+    expect(result.current.error?.message).toBe('Network error')
+    expect(result.current.users).toEqual([])
+  })
+
+  it('refresh resets loading state', async () => {
+    let resolvePromise!: (value: unknown) => void
+    global.fetch = vi.fn().mockImplementation(
+      () => new Promise((resolve) => { resolvePromise = resolve })
+    )
+
+    const { result } = renderHook(() => useUsers())
+
+    act(() => {
+      result.current.refresh()
+    })
+
+    // refresh should trigger a new fetch, loading goes back to true
+    expect(result.current.loading).toBe(true)
+  })
+})
+```
+
+## Ant Design 组件集成测试
+
+```tsx
+// UserTable.test.tsx
+import { render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi } from 'vitest'
+import { Table } from 'antd'
+import type { ColumnsType } from 'antd/es/table'
+
+interface User {
+  id: string
+  username: string
+  email: string
+  role: string
+}
+
+describe('UserTable with Ant Design', () => {
+  const columns: ColumnsType<User> = [
+    { title: '用户名', dataIndex: 'username', key: 'username' },
+    { title: '邮箱', dataIndex: 'email', key: 'email' },
+    { title: '角色', dataIndex: 'role', key: 'role' },
+  ]
+
+  const mockData: User[] = [
+    { id: '1', username: 'alice', email: 'alice@example.com', role: 'ADMIN' },
+    { id: '2', username: 'bob', email: 'bob@example.com', role: 'EDITOR' },
+  ]
+
+  it('renders table with data', () => {
+    render(
+      <Table
+        columns={columns}
+        dataSource={mockData}
+        rowKey="id"
+      />
+    )
+
+    expect(screen.getByText('alice')).toBeInTheDocument()
+    expect(screen.getByText('bob')).toBeInTheDocument()
+  })
+
+  it('shows empty state when no data', () => {
+    render(
+      <Table
+        columns={columns}
+        dataSource={[]}
+        rowKey="id"
+        locale={{ emptyText: '暂无数据' }}
+      />
+    )
+
+    expect(screen.getByText('暂无数据')).toBeInTheDocument()
+  })
+
+  it('handles row click', async () => {
+    const handleRow = vi.fn()
+    render(
+      <Table
+        columns={columns}
+        dataSource={mockData}
+        rowKey="id"
+        onRow={() => ({
+          onClick: () => handleRow(),
+        })}
+      />
+    )
+
+    const rows = screen.getAllByRole('row')
+    // 第一行是 header, 第二行是第一个数据行
+    await userEvent.click(rows[1])
+    expect(handleRow).toHaveBeenCalled()
+  })
+})
+```
+
+## 路由组件测试
+
+```tsx
+// ProtectedRoute.test.tsx
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter, Routes, Route } from 'react-router-dom'
+import { describe, it, expect, vi } from 'vitest'
+
+// Mock auth hook
+vi.mock('../hooks/useAuth', () => ({
+  useAuth: () => ({ user: null, loading: false }),
+}))
+
+import { ProtectedRoute } from './ProtectedRoute'
+
+describe('ProtectedRoute', () => {
+  it('redirects to login when not authenticated', () => {
+    render(
+      <MemoryRouter initialEntries={['/dashboard']}>
+        <Routes>
+          <Route path="/login" element={<div>登录页</div>} />
+          <Route path="/dashboard" element={<ProtectedRoute><div>仪表盘</div></ProtectedRoute>} />
+        </Routes>
+      </MemoryRouter>
+    )
+
+    expect(screen.getByText('登录页')).toBeInTheDocument()
+    expect(screen.queryByText('仪表盘')).not.toBeInTheDocument()
+  })
+})
+```

package/dist/skills/reef-style-frontend/fragments/test/vitest-react/quick-reference.md

@@ -0,0 +1,152 @@
+# Vitest + React Testing Library 测试规范
+
+## 测试配置
+
+```ts
+// vitest.config.ts
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/test/setup.ts',
+    css: true,
+    coverage: {
+      provider: 'v8',
+      include: ['src/**/*.{ts,tsx}'],
+      exclude: ['src/**/*.d.ts', 'src/test/**'],
+      thresholds: {
+        branches: 80,
+        functions: 80,
+        lines: 80,
+        statements: 80,
+      },
+    },
+  },
+})
+```
+
+```ts
+// src/test/setup.ts
+import '@testing-library/jest-dom'
+```
+
+## 通用原则
+
+- 遵循 AAA 模式：Arrange（准备）→ Act（执行）→ Assert（断言）
+- 测试应与实现解耦 — 通过用户可见的行为（文本、角色、aria-label）选择元素
+- 测试用户交互而非组件内部状态
+- 每个测试聚焦一个场景
+
+## 组件测试
+
+```tsx
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi } from 'vitest'
+
+// ✅ 正确：通过文本寻找元素
+render(<Button>提交</Button>)
+expect(screen.getByRole('button', { name: '提交' })).toBeInTheDocument()
+
+// ✅ 正确：模拟用户交互
+await userEvent.click(screen.getByRole('button'))
+
+// ❌ 避免：通过测试 ID 或实现细节选择
+// screen.getByTestId('submit-btn') // 仅在无其他方式时使用
+// wrapper.find('.btn-primary') // 禁止通过 CSS 类选择
+```
+
+## Hook 测试
+
+```tsx
+import { renderHook, act } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+
+describe('useCounter', () => {
+  it('should increment count', () => {
+    const { result } = renderHook(() => useCounter())
+
+    act(() => {
+      result.current.increment()
+    })
+
+    expect(result.current.count).toBe(1)
+  })
+})
+```
+
+## 测试文件命名与位置
+
+- 测试文件放在被测模块旁：`UserList.tsx` → `UserList.test.tsx`
+- 通用测试放在 `src/test/` 目录
+- Hook 测试：`useUsers.ts` → `useUsers.test.ts`
+
+## Mock 策略
+
+```tsx
+// 全局 mock API 调用
+import { vi } from 'vitest'
+
+// Mock fetch
+global.fetch = vi.fn()
+
+// Mock 模块
+vi.mock('antd', async () => {
+  const actual = await vi.importActual('antd')
+  return {
+    ...actual,
+    message: {
+      success: vi.fn(),
+      error: vi.fn(),
+    },
+  }
+})
+
+// Mock 自定义 Hook
+vi.mock('../hooks/useUsers', () => ({
+  useUsers: () => ({
+    users: mockUsers,
+    loading: false,
+    error: null,
+    refresh: vi.fn(),
+  }),
+}))
+```
+
+## 异步测试
+
+```tsx
+it('should load and display users', async () => {
+  // Arrange
+  const mockUsers = [
+    { id: '1', username: 'alice', email: 'alice@example.com', role: 'ADMIN' },
+    { id: '2', username: 'bob', email: 'bob@example.com', role: 'EDITOR' },
+  ]
+
+  // 模拟 API 响应
+  const mockFetch = vi.fn().mockResolvedValue({
+    ok: true,
+    json: () => Promise.resolve({ content: mockUsers, totalElements: 2 }),
+  })
+  global.fetch = mockFetch
+
+  // Act
+  render(<UserList />)
+
+  // Assert — 等待异步渲染完成
+  expect(await screen.findByText('alice')).toBeInTheDocument()
+  expect(screen.getByText('bob')).toBeInTheDocument()
+  expect(screen.getByText('ADMIN')).toBeInTheDocument()
+})
+```
+
+## 覆盖率要求
+
+- 功能性组件覆盖率达到 80%+（branches, functions, lines）
+- 核心业务逻辑的 Hook 需要 100% 覆盖
+- 工具函数/纯函数需要 100% 覆盖
+- UI 展示组件（页面布局）可低于 80%，但至少覆盖渲染正常路径和空状态