@deepstorm/cli 0.10.2 → 0.11.1

package/dist/skills/reef-style-frontend/variants/react/examples/service-routing.md

@@ -4,92 +4,94 @@
 
 ```tsx
 // hooks/useUsers.ts
-import { useState, useEffect, useCallback } from 'react'
-import type { User, PageResponse } from '../shared/types/user'
+import { useState, useEffect, useCallback } from 'react';
+import type { User, PageResponse } from '../shared/types/user';
 
 interface UseUsersOptions {
-  page?: number
-  size?: number
-  search?: string
-  role?: string
+  page?: number;
+  size?: number;
+  search?: string;
+  role?: string;
 }
 
 interface UseUsersResult {
-  users: User[]
-  total: number
-  loading: boolean
-  error: Error | null
-  refresh: () => void
+  users: User[];
+  total: number;
+  loading: boolean;
+  error: Error | null;
+  refresh: () => void;
 }
 
 // 使用 URLSearchParams 构建查询参数
 function buildQuery(params: UseUsersOptions): string {
-  const searchParams = new URLSearchParams()
-  if (params.page !== undefined) searchParams.set('page', String(params.page))
-  if (params.size !== undefined) searchParams.set('size', String(params.size))
-  if (params.search) searchParams.set('search', params.search)
-  if (params.role) searchParams.set('role', params.role)
-  const qs = searchParams.toString()
-  return qs ? `?${qs}` : ''
+  const searchParams = new URLSearchParams();
+  if (params.page !== undefined) searchParams.set('page', String(params.page));
+  if (params.size !== undefined) searchParams.set('size', String(params.size));
+  if (params.search) searchParams.set('search', params.search);
+  if (params.role) searchParams.set('role', params.role);
+  const qs = searchParams.toString();
+  return qs ? `?${qs}` : '';
 }
 
 export function useUsers(options: UseUsersOptions = {}): UseUsersResult {
-  const [users, setUsers] = useState<User[]>([])
-  const [total, setTotal] = useState(0)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<Error | null>(null)
-  const [refreshKey, setRefreshKey] = useState(0)
+  const [users, setUsers] = useState<User[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  const [refreshKey, setRefreshKey] = useState(0);
 
-  const refresh = useCallback(() => setRefreshKey(k => k + 1), [])
+  const refresh = useCallback(() => setRefreshKey((k) => k + 1), []);
 
   useEffect(() => {
-    let cancelled = false
-    setLoading(true)
-    setError(null)
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
 
     fetch(`/api/v1/users${buildQuery(options)}`)
-      .then(res => {
-        if (!res.ok) throw new Error(`HTTP ${res.status}`)
-        return res.json() as Promise<PageResponse<User>>
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return res.json() as Promise<PageResponse<User>>;
       })
-      .then(data => {
+      .then((data) => {
         if (!cancelled) {
-          setUsers(data.content)
-          setTotal(data.totalElements)
-          setLoading(false)
+          setUsers(data.content);
+          setTotal(data.totalElements);
+          setLoading(false);
         }
       })
-      .catch(err => {
+      .catch((err) => {
         if (!cancelled) {
-          setError(err)
-          setLoading(false)
+          setError(err);
+          setLoading(false);
         }
-      })
+      });
 
-    return () => { cancelled = true }
-  }, [options.page, options.size, options.search, options.role, refreshKey])
+    return () => {
+      cancelled = true;
+    };
+  }, [options.page, options.size, options.search, options.role, refreshKey]);
 
-  return { users, total, loading, error, refresh }
+  return { users, total, loading, error, refresh };
 }
 
 // 写操作 Hook
 export function useCreateUser() {
-  const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(false);
 
   const create = async (data: CreateUserRequest): Promise<User> => {
-    setLoading(true)
+    setLoading(true);
     const res = await fetch('/api/v1/users', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(data),
-    })
-    if (!res.ok) throw new Error(`HTTP ${res.status}`)
-    const user = await res.json()
-    setLoading(false)
-    return user
-  }
-
-  return { create, loading }
+    });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const user = await res.json();
+    setLoading(false);
+    return user;
+  };
+
+  return { create, loading };
 }
 ```
 
@@ -98,28 +100,28 @@ export function useCreateUser() {
 ```tsx
 // services/userService.ts
 // 将 API 调用统一到 Service 层，Hook 只负责状态管理
-import type { User, CreateUserRequest, UpdateUserRequest, PageResponse } from '../shared/types/user'
+import type { User, CreateUserRequest, UpdateUserRequest, PageResponse } from '../shared/types/user';
 
-const BASE_URL = '/api/v1/users'
+const BASE_URL = '/api/v1/users';
 
 async function handleResponse<T>(res: Response): Promise<T> {
   if (!res.ok) {
-    const error = await res.json().catch(() => ({ message: `HTTP ${res.status}` }))
-    throw new Error(error.message)
+    const error = await res.json().catch(() => ({ message: `HTTP ${res.status}` }));
+    throw new Error(error.message);
   }
-  return res.json()
+  return res.json();
 }
 
 export const userService = {
   list(params?: Record<string, string | number>): Promise<PageResponse<User>> {
-    const qs = params ? '?' + new URLSearchParams(
-      Object.entries(params).map(([k, v]) => [k, String(v)])
-    ).toString() : ''
-    return fetch(`${BASE_URL}${qs}`).then(handleResponse)
+    const qs = params
+      ? '?' + new URLSearchParams(Object.entries(params).map(([k, v]) => [k, String(v)])).toString()
+      : '';
+    return fetch(`${BASE_URL}${qs}`).then(handleResponse);
   },
 
   getById(id: string): Promise<User> {
-    return fetch(`${BASE_URL}/${id}`).then(handleResponse)
+    return fetch(`${BASE_URL}/${id}`).then(handleResponse);
   },
 
   create(data: CreateUserRequest): Promise<User> {
@@ -127,7 +129,7 @@ export const userService = {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(data),
-    }).then(handleResponse)
+    }).then(handleResponse);
   },
 
   update(id: string, data: UpdateUserRequest): Promise<User> {
@@ -135,77 +137,101 @@ export const userService = {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(data),
-    }).then(handleResponse)
+    }).then(handleResponse);
   },
 
   delete(id: string): Promise<void> {
-    return fetch(`${BASE_URL}/${id}`, { method: 'DELETE' }).then(handleResponse)
+    return fetch(`${BASE_URL}/${id}`, { method: 'DELETE' }).then(handleResponse);
   },
-}
+};
 ```
 
 ## 路由配置
 
 ```tsx
 // routes/index.tsx
-import { createBrowserRouter, Navigate } from 'react-router-dom'
-import { lazy, Suspense } from 'react'
-import { Spin } from 'antd'
+import { createBrowserRouter, Navigate } from 'react-router-dom';
+import { lazy, Suspense } from 'react';
+import { Spin } from 'antd';
 
 // 懒加载页面组件
-const Dashboard = lazy(() => import('../pages/Dashboard'))
-const UserList = lazy(() => import('../pages/UserList'))
-const UserDetail = lazy(() => import('../pages/UserDetail'))
-const CreateUser = lazy(() => import('../pages/CreateUser'))
-const Settings = lazy(() => import('../pages/Settings'))
-const NotFound = lazy(() => import('../pages/NotFound'))
+const Dashboard = lazy(() => import('../pages/Dashboard'));
+const UserList = lazy(() => import('../pages/UserList'));
+const UserDetail = lazy(() => import('../pages/UserDetail'));
+const CreateUser = lazy(() => import('../pages/CreateUser'));
+const Settings = lazy(() => import('../pages/Settings'));
+const NotFound = lazy(() => import('../pages/NotFound'));
 
 // 通用懒加载包装
 const LazyLoad: React.FC<{ children: React.ReactNode }> = ({ children }) => (
   <Suspense fallback={<Spin style={{ display: 'flex', justifyContent: 'center', marginTop: 120 }} />}>
     {children}
   </Suspense>
-)
+);
 
 export const router = createBrowserRouter([
   {
     path: '/',
-    element: <LazyLoad><Dashboard /></LazyLoad>,
+    element: (
+      <LazyLoad>
+        <Dashboard />
+      </LazyLoad>
+    ),
   },
   {
     path: '/users',
-    element: <LazyLoad><UserList /></LazyLoad>,
+    element: (
+      <LazyLoad>
+        <UserList />
+      </LazyLoad>
+    ),
   },
   {
     path: '/users/new',
-    element: <LazyLoad><CreateUser /></LazyLoad>,
+    element: (
+      <LazyLoad>
+        <CreateUser />
+      </LazyLoad>
+    ),
   },
   {
     path: '/users/:id',
-    element: <LazyLoad><UserDetail /></LazyLoad>,
+    element: (
+      <LazyLoad>
+        <UserDetail />
+      </LazyLoad>
+    ),
   },
   {
     path: '/settings',
-    element: <LazyLoad><Settings /></LazyLoad>,
+    element: (
+      <LazyLoad>
+        <Settings />
+      </LazyLoad>
+    ),
   },
   {
     path: '/404',
-    element: <LazyLoad><NotFound /></LazyLoad>,
+    element: (
+      <LazyLoad>
+        <NotFound />
+      </LazyLoad>
+    ),
   },
   {
     path: '*',
     element: <Navigate to="/404" replace />,
   },
-])
+]);
 ```
 
 ## 主应用入口
 
 ```tsx
 // App.tsx
-import { RouterProvider } from 'react-router-dom'
-import { ConfigProvider } from 'antd'
-import { router } from './routes'
+import { RouterProvider } from 'react-router-dom';
+import { ConfigProvider } from 'antd';
+import { router } from './routes';
 
 const App: React.FC = () => {
   return (
@@ -219,8 +245,8 @@ const App: React.FC = () => {
     >
       <RouterProvider router={router} />
     </ConfigProvider>
-  )
-}
+  );
+};
 
-export default App
+export default App;
 ```

package/dist/skills/reef-style-frontend/variants/react/quick-reference.md

@@ -6,22 +6,22 @@
 
 ## 速查
 
-| 场景 | 决策 |
-| --- | --- |
-| 新建组件 | 函数组件 + TypeScript + `interface` Props |
-| 新建表单 | Ant Design `Form` + `useState` / `useReducer` |
-| 读数据 | 自定义 Hook（`useUsers`）封装 fetch/axios |
-| 写数据 | 自定义 Hook + `useState` loading/error 三态 |
-| Hook 职责 | 只负责业务逻辑和数据获取，不管理 UI 渲染 |
-| 路由 | `React.lazy()` + `Suspense` 懒加载 |
+| 场景      | 决策                                          |
+| --------- | --------------------------------------------- |
+| 新建组件  | 函数组件 + TypeScript + `interface` Props     |
+| 新建表单  | Ant Design `Form` + `useState` / `useReducer` |
+| 读数据    | 自定义 Hook（`useUsers`）封装 fetch/axios     |
+| 写数据    | 自定义 Hook + `useState` loading/error 三态   |
+| Hook 职责 | 只负责业务逻辑和数据获取，不管理 UI 渲染      |
+| 路由      | `React.lazy()` + `Suspense` 懒加载            |
 
 ## 新建组件
 
 ```tsx
 interface UserTableProps {
-  users: User[]
-  loading?: boolean
-  onSelect?: (user: User) => void
+  users: User[];
+  loading?: boolean;
+  onSelect?: (user: User) => void;
 }
 
 const UserTable: React.FC<UserTableProps> = ({ users, loading, onSelect }) => {
@@ -35,16 +35,16 @@ const UserTable: React.FC<UserTableProps> = ({ users, loading, onSelect }) => {
         onClick: () => onSelect?.(record),
       })}
     />
-  )
-}
+  );
+};
 ```
 
-| 规则 | 要求 |
-| --- | --- |
-| 函数组件 | 禁止 Class 组件，使用 `React.FC` 或显式 Props 类型 |
+| 规则              | 要求                                                  |
+| ----------------- | ----------------------------------------------------- |
+| 函数组件          | 禁止 Class 组件，使用 `React.FC` 或显式 Props 类型    |
 | `interface` Props | 使用 `interface` 定义 Props，使用 `type` 定义联合类型 |
-| 状态提升 | 组件间共享状态提升到最近公共父组件 |
-| 默认导出 | 页面级组件使用 `export default`，通用组件使用具名导出 |
+| 状态提升          | 组件间共享状态提升到最近公共父组件                    |
+| 默认导出          | 页面级组件使用 `export default`，通用组件使用具名导出 |
 
 ## Hooks 规则
 
@@ -55,18 +55,24 @@ const UserTable: React.FC<UserTableProps> = ({ users, loading, onSelect }) => {
 ```tsx
 // ✅ 正确：自定义 Hook 分离数据获取逻辑
 function useUsers() {
-  const [users, setUsers] = useState<User[]>([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<Error | null>(null)
+  const [users, setUsers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
 
   useEffect(() => {
     fetch('/api/v1/users')
-      .then(res => res.json())
-      .then(data => { setUsers(data); setLoading(false) })
-      .catch(err => { setError(err); setLoading(false) })
-  }, [])
-
-  return { users, loading, error }
+      .then((res) => res.json())
+      .then((data) => {
+        setUsers(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err);
+        setLoading(false);
+      });
+  }, []);
+
+  return { users, loading, error };
 }
 ```
 
@@ -91,13 +97,13 @@ function useUsers() {
 - 权限通过 Route 组件的 wrapper 或 middleware 模式控制
 
 ```tsx
-const UserList = React.lazy(() => import('./pages/UserList'))
-const UserDetail = React.lazy(() => import('./pages/UserDetail'))
+const UserList = React.lazy(() => import('./pages/UserList'));
+const UserDetail = React.lazy(() => import('./pages/UserDetail'));
 
 const routes = [
   { path: '/users', element: <UserList /> },
   { path: '/users/:id', element: <UserDetail /> },
-]
+];
 ```
 
 ## 代码风格
@@ -109,18 +115,18 @@ const routes = [
 
 ## 注释规则
 
-| 文件类型 | 注释要求 |
-|---------|---------|
-| **类型定义** | 复杂类型加行内注释说明字段含义 |
-| **API Hook** | 简要说明该 Hook 的功能和返回值 |
-| **组件** | 关键组件加注释说明用途；复杂逻辑行内注释 |
+| 文件类型     | 注释要求                                 |
+| ------------ | ---------------------------------------- |
+| **类型定义** | 复杂类型加行内注释说明字段含义           |
+| **API Hook** | 简要说明该 Hook 的功能和返回值           |
+| **组件**     | 关键组件加注释说明用途；复杂逻辑行内注释 |
 
 ## 常见坑
 
-| 场景 | 问题 | 正确做法 |
-|------|------|---------|
-| `useEffect` 依赖遗漏 | 闭包内使用了 state 或 props 但未加入依赖数组 | 穷举所有依赖，或使用 `useCallback` 稳定引用 |
-| 列表 `key` | 使用 index 作为 key 导致渲染异常 | 使用唯一 ID（`rowKey` / 数据 id） |
-| 表单受控/非受控混淆 | 组件同时接收 `value` 和 `defaultValue` | 受控组件用 `value` + `onChange`，非受控用 `defaultValue` |
-| 状态更新异步 | 连续 `setState` 导致只生效最后一次 | 使用函数形式 `setCount(prev => prev + 1)` |
-| `useCallback` 滥用 | 对所有函数都用 `useCallback` | 仅对传给子组件或 `useEffect` 依赖的函数使用 |
+| 场景                 | 问题                                         | 正确做法                                                 |
+| -------------------- | -------------------------------------------- | -------------------------------------------------------- |
+| `useEffect` 依赖遗漏 | 闭包内使用了 state 或 props 但未加入依赖数组 | 穷举所有依赖，或使用 `useCallback` 稳定引用              |
+| 列表 `key`           | 使用 index 作为 key 导致渲染异常             | 使用唯一 ID（`rowKey` / 数据 id）                        |
+| 表单受控/非受控混淆  | 组件同时接收 `value` 和 `defaultValue`       | 受控组件用 `value` + `onChange`，非受控用 `defaultValue` |
+| 状态更新异步         | 连续 `setState` 导致只生效最后一次           | 使用函数形式 `setCount(prev => prev + 1)`                |
+| `useCallback` 滥用   | 对所有函数都用 `useCallback`                 | 仅对传给子组件或 `useEffect` 依赖的函数使用              |

package/dist/skills/reef-style-frontend/variants/vue/examples/code-wrapping.md

@@ -58,10 +58,7 @@
   <a-divider />
 
   <!-- ✅ 多属性 -->
-  <a-date-picker
-    v-model:value="date"
-    format="YYYY-MM-DD"
-  />
+  <a-date-picker v-model:value="date" format="YYYY-MM-DD" />
 </template>
 ```
 
@@ -73,13 +70,7 @@
   <div>{{ loading ? '加载中...' : users.length + ' 条记录' }}</div>
 
   <!-- ✅ 复杂条件使用多个 v-if 换行 -->
-  <a-alert
-    v-if="error"
-    type="error"
-    :message="error.message"
-    closable
-    @close="clearError"
-  />
+  <a-alert v-if="error" type="error" :message="error.message" closable @close="clearError" />
   <a-table v-else-if="!loading" :data-source="users" />
 </template>
 ```
@@ -89,26 +80,21 @@
 ```vue
 <script setup lang="ts">
 // ✅ ref/computed 连续排列，按逻辑分组
-const users = ref<User[]>([])
-const loading = ref(true)
-const search = ref('')
+const users = ref<User[]>([]);
+const loading = ref(true);
+const search = ref('');
 
-const filteredUsers = computed(() =>
-  users.value.filter(u => u.username.includes(search.value))
-)
+const filteredUsers = computed(() => users.value.filter((u) => u.username.includes(search.value)));
 
 // ✅ watch 短依赖行内
 watch(search, () => {
-  fetchUsers(search.value)
-})
+  fetchUsers(search.value);
+});
 
 // ✅ 多源 watch 换行
-watch(
-  [search, role, status],
-  ([newSearch, newRole, newStatus]) => {
-    fetchFilteredUsers({ search: newSearch, role: newRole, status: newStatus })
-  }
-)
+watch([search, role, status], ([newSearch, newRole, newStatus]) => {
+  fetchFilteredUsers({ search: newSearch, role: newRole, status: newStatus });
+});
 </script>
 ```
 
@@ -120,22 +106,17 @@ watch(
   <a-button @click="isOpen = true">打开</a-button>
 
   <!-- ✅ 多行函数体：提取到 script setup 中 -->
-  <a-modal
-    title="确认删除"
-    :open="isOpen"
-    @ok="handleDelete"
-    @cancel="isOpen = false"
-  >
+  <a-modal title="确认删除" :open="isOpen" @ok="handleDelete" @cancel="isOpen = false">
     <p>确定要删除该用户吗？</p>
   </a-modal>
 </template>
 
 <script setup lang="ts">
 async function handleDelete() {
-  await deleteUser(id)
-  message.success('删除成功')
-  isOpen.value = false
-  onDeleted?.()
+  await deleteUser(id);
+  message.success('删除成功');
+  isOpen.value = false;
+  onDeleted?.();
 }
 </script>
 ```
@@ -145,18 +126,18 @@ async function handleDelete() {
 ```typescript
 // ✅ 每个属性一行
 interface UserFormProps {
-  user?: User
-  onSubmit: (values: CreateUserRequest) => Promise<void>
-  onCancel: () => void
+  user?: User;
+  onSubmit: (values: CreateUserRequest) => Promise<void>;
+  onCancel: () => void;
 }
 
 // ✅ emits 命名元组每个事件一行
 const emit = defineEmits<{
-  success: [userId: string]
-  close: []
-  error: [message: string]
-}>()
+  success: [userId: string];
+  close: [];
+  error: [message: string];
+}>();
 
 // ✅ 联合类型换行
-type UserStatus = 'active' | 'inactive' | 'locked' | 'pending'
+type UserStatus = 'active' | 'inactive' | 'locked' | 'pending';
 ```