@gong-ym/ai-spec-auto 0.2.13 → 0.2.15

package/.agents/rules/profiles/react/07-/347/212/266/346/200/201/347/256/241/347/220/206.md

@@ -1,226 +1,226 @@
----
-alwaysApply: false
-description: 项目的状态管理规范，支持 Zustand 或经典 Redux（二选一）。当新增、修改或重构状态管理时读取此规则。
----
-
-# 状态管理规范（NON-NEGOTIABLE）
-
-## 基础规范
-
-- 状态管理使用 **Zustand** 或 **经典 Redux**，同一项目**禁止混用**
-- 所有 store 文件必须放在 `src/store/modules/` 目录下，按业务模块划分子目录
-- **禁止在 `src` 下新建其他目录存放 store**
-
-## 目录结构
-
-无论使用哪种方案，模块化目录结构保持一致：
-
-```
-src/store/
-├── index.ts                    # Zustand: 统一导出 / Redux: createStore + combineReducers
-└── modules/
-    ├── user/
-    │   ├── index.ts            # Zustand: useUserStore / Redux: reducer + action creators
-    │   └── type.ts             # 类型定义
-    ├── theme/
-    │   ├── index.ts
-    │   └── type.ts
-    └── ai-editor/
-        ├── index.ts
-        └── type.ts
-```
-
-- 每个业务模块独立一个目录，目录名使用 `kebab-case`
-- 目录内必须包含 `index.ts`（store / reducer 定义）和 `type.ts`（类型定义）
-- `src/store/index.ts` 负责统一导出或创建 store 实例
-
----
-
-## 方案 A：Zustand
-
-### Store 编写规范
-
-- 每个模块暴露 `useXxxStore` Hook
-- Store 中不要直接耦合具体 UI 组件，只存纯数据与业务行为
-
-```typescript
-// src/store/modules/theme/type.ts
-export enum ThemeMode {
-  LIGHT = 'light',
-  DARK = 'dark',
-}
-
-export interface ThemeState {
-  theme: ThemeMode
-  setTheme: (theme: ThemeMode) => void
-  toggleTheme: () => void
-}
-```
-
-```typescript
-// src/store/modules/theme/index.ts
-import { create } from 'zustand'
-import { ThemeMode } from './type'
-import type { ThemeState } from './type'
-
-export const useThemeStore = create<ThemeState>((set) => ({
-  theme: ThemeMode.LIGHT,
-  setTheme: (theme) => set({ theme }),
-  toggleTheme: () =>
-    set((state) => ({
-      theme: state.theme === ThemeMode.LIGHT ? ThemeMode.DARK : ThemeMode.LIGHT,
-    })),
-}))
-```
-
-### 持久化
-
-当状态需要跨页面刷新保留时，使用 `zustand/middleware` 的 `persist`：
-
-```typescript
-import { create } from 'zustand'
-import { persist } from 'zustand/middleware'
-import type { ThemeState } from './type'
-
-export const useThemeStore = create<ThemeState>()(
-  persist(
-    (set) => ({
-      theme: ThemeMode.LIGHT,
-      setTheme: (theme) => set({ theme }),
-    }),
-    { name: 'app-theme' },
-  ),
-)
-```
-
-### 入口文件
-
-```typescript
-// src/store/index.ts
-export { useThemeStore } from './modules/theme'
-export { useUserStore } from './modules/user'
-```
-
-### 组件中使用
-
-```typescript
-const { theme, toggleTheme } = useThemeStore()
-```
-
----
-
-## 方案 B：经典 Redux
-
-### Store 编写规范
-
-- 每个模块默认导出 reducer，具名导出 action creators
-- State 类型和 Action 类型统一放在 `type.ts`
-- Action type 常量定义在 `type.ts` 中，使用 `模块名/动作名` 格式
-
-```typescript
-// src/store/modules/user/type.ts
-export interface UserInfo {
-  id: string
-  name: string
-  avatar: string
-  roles: string[]
-}
-
-export interface UserState {
-  userInfo: UserInfo | null
-  token: string
-}
-
-export const SET_USER = 'user/SET_USER'
-export const SET_TOKEN = 'user/SET_TOKEN'
-export const RESET_USER = 'user/RESET_USER'
-
-export type UserAction =
-  | { type: typeof SET_USER; payload: UserInfo }
-  | { type: typeof SET_TOKEN; payload: string }
-  | { type: typeof RESET_USER }
-```
-
-```typescript
-// src/store/modules/user/index.ts
-import type { UserInfo, UserState, UserAction } from './type'
-import { SET_USER, SET_TOKEN, RESET_USER } from './type'
-
-const initialState: UserState = {
-  userInfo: null,
-  token: '',
-}
-
-export const setUser = (payload: UserInfo): UserAction => ({ type: SET_USER, payload })
-export const setToken = (payload: string): UserAction => ({ type: SET_TOKEN, payload })
-export const resetUser = (): UserAction => ({ type: RESET_USER })
-
-export default function userReducer(state = initialState, action: UserAction): UserState {
-  switch (action.type) {
-    case SET_USER:
-      return { ...state, userInfo: action.payload }
-    case SET_TOKEN:
-      return { ...state, token: action.payload }
-    case RESET_USER:
-      return { ...state, userInfo: null, token: '' }
-    default:
-      return state
-  }
-}
-```
-
-### 入口文件
-
-```typescript
-// src/store/index.ts
-import { createStore, combineReducers } from 'redux'
-import userReducer from './modules/user'
-import themeReducer from './modules/theme'
-
-const rootReducer = combineReducers({
-  user: userReducer,
-  theme: themeReducer,
-})
-
-export type RootState = ReturnType<typeof rootReducer>
-export type AppDispatch = typeof store.dispatch
-
-const store = createStore(rootReducer)
-export default store
-```
-
-### 类型化 Hook
-
-在 `src/hooks/` 下定义类型化的 `useAppSelector` 和 `useAppDispatch`，组件中统一使用：
-
-```typescript
-// src/hooks/useRedux.ts
-import { useSelector, useDispatch } from 'react-redux'
-import type { TypedUseSelectorHook } from 'react-redux'
-import type { RootState, AppDispatch } from '@/store'
-
-export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
-export const useAppDispatch = () => useDispatch<AppDispatch>()
-```
-
-### 组件中使用
-
-```typescript
-import { useAppSelector, useAppDispatch } from '@/hooks/useRedux'
-import { setUser } from '@/store/modules/user'
-
-const userInfo = useAppSelector((state) => state.user.userInfo)
-const dispatch = useAppDispatch()
-
-dispatch(setUser({ id: '1', name: 'Admin', avatar: '', roles: ['admin'] }))
-```
-
----
-
-## 通用约束
-
-- 按业务领域拆分，每个模块单独一个目录
-- 禁止创建巨型 store / reducer，单个模块的 `index.ts` 不超过 **200 行**
-- 模块之间禁止循环依赖
-- 模块私有类型放在模块目录下的 `type.ts`，全局共享类型放在 `src/types/`
-- Store 中不要直接耦合具体 UI 组件，只存纯数据与业务行为
+---
+alwaysApply: false
+description: 项目的状态管理规范，支持 Zustand 或经典 Redux（二选一）。当新增、修改或重构状态管理时读取此规则。
+---
+
+# 状态管理规范（NON-NEGOTIABLE）
+
+## 基础规范
+
+- 状态管理使用 **Zustand** 或 **经典 Redux**，同一项目**禁止混用**
+- 所有 store 文件必须放在 `src/store/modules/` 目录下，按业务模块划分子目录
+- **禁止在 `src` 下新建其他目录存放 store**
+
+## 目录结构
+
+无论使用哪种方案，模块化目录结构保持一致：
+
+```
+src/store/
+├── index.ts                    # Zustand: 统一导出 / Redux: createStore + combineReducers
+└── modules/
+    ├── user/
+    │   ├── index.ts            # Zustand: useUserStore / Redux: reducer + action creators
+    │   └── type.ts             # 类型定义
+    ├── theme/
+    │   ├── index.ts
+    │   └── type.ts
+    └── ai-editor/
+        ├── index.ts
+        └── type.ts
+```
+
+- 每个业务模块独立一个目录，目录名使用 `kebab-case`
+- 目录内必须包含 `index.ts`（store / reducer 定义）和 `type.ts`（类型定义）
+- `src/store/index.ts` 负责统一导出或创建 store 实例
+
+---
+
+## 方案 A：Zustand
+
+### Store 编写规范
+
+- 每个模块暴露 `useXxxStore` Hook
+- Store 中不要直接耦合具体 UI 组件，只存纯数据与业务行为
+
+```typescript
+// src/store/modules/theme/type.ts
+export enum ThemeMode {
+  LIGHT = 'light',
+  DARK = 'dark',
+}
+
+export interface ThemeState {
+  theme: ThemeMode
+  setTheme: (theme: ThemeMode) => void
+  toggleTheme: () => void
+}
+```
+
+```typescript
+// src/store/modules/theme/index.ts
+import { create } from 'zustand'
+import { ThemeMode } from './type'
+import type { ThemeState } from './type'
+
+export const useThemeStore = create<ThemeState>((set) => ({
+  theme: ThemeMode.LIGHT,
+  setTheme: (theme) => set({ theme }),
+  toggleTheme: () =>
+    set((state) => ({
+      theme: state.theme === ThemeMode.LIGHT ? ThemeMode.DARK : ThemeMode.LIGHT,
+    })),
+}))
+```
+
+### 持久化
+
+当状态需要跨页面刷新保留时，使用 `zustand/middleware` 的 `persist`：
+
+```typescript
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import type { ThemeState } from './type'
+
+export const useThemeStore = create<ThemeState>()(
+  persist(
+    (set) => ({
+      theme: ThemeMode.LIGHT,
+      setTheme: (theme) => set({ theme }),
+    }),
+    { name: 'app-theme' },
+  ),
+)
+```
+
+### 入口文件
+
+```typescript
+// src/store/index.ts
+export { useThemeStore } from './modules/theme'
+export { useUserStore } from './modules/user'
+```
+
+### 组件中使用
+
+```typescript
+const { theme, toggleTheme } = useThemeStore()
+```
+
+---
+
+## 方案 B：经典 Redux
+
+### Store 编写规范
+
+- 每个模块默认导出 reducer，具名导出 action creators
+- State 类型和 Action 类型统一放在 `type.ts`
+- Action type 常量定义在 `type.ts` 中，使用 `模块名/动作名` 格式
+
+```typescript
+// src/store/modules/user/type.ts
+export interface UserInfo {
+  id: string
+  name: string
+  avatar: string
+  roles: string[]
+}
+
+export interface UserState {
+  userInfo: UserInfo | null
+  token: string
+}
+
+export const SET_USER = 'user/SET_USER'
+export const SET_TOKEN = 'user/SET_TOKEN'
+export const RESET_USER = 'user/RESET_USER'
+
+export type UserAction =
+  | { type: typeof SET_USER; payload: UserInfo }
+  | { type: typeof SET_TOKEN; payload: string }
+  | { type: typeof RESET_USER }
+```
+
+```typescript
+// src/store/modules/user/index.ts
+import type { UserInfo, UserState, UserAction } from './type'
+import { SET_USER, SET_TOKEN, RESET_USER } from './type'
+
+const initialState: UserState = {
+  userInfo: null,
+  token: '',
+}
+
+export const setUser = (payload: UserInfo): UserAction => ({ type: SET_USER, payload })
+export const setToken = (payload: string): UserAction => ({ type: SET_TOKEN, payload })
+export const resetUser = (): UserAction => ({ type: RESET_USER })
+
+export default function userReducer(state = initialState, action: UserAction): UserState {
+  switch (action.type) {
+    case SET_USER:
+      return { ...state, userInfo: action.payload }
+    case SET_TOKEN:
+      return { ...state, token: action.payload }
+    case RESET_USER:
+      return { ...state, userInfo: null, token: '' }
+    default:
+      return state
+  }
+}
+```
+
+### 入口文件
+
+```typescript
+// src/store/index.ts
+import { createStore, combineReducers } from 'redux'
+import userReducer from './modules/user'
+import themeReducer from './modules/theme'
+
+const rootReducer = combineReducers({
+  user: userReducer,
+  theme: themeReducer,
+})
+
+export type RootState = ReturnType<typeof rootReducer>
+export type AppDispatch = typeof store.dispatch
+
+const store = createStore(rootReducer)
+export default store
+```
+
+### 类型化 Hook
+
+在 `src/hooks/` 下定义类型化的 `useAppSelector` 和 `useAppDispatch`，组件中统一使用：
+
+```typescript
+// src/hooks/useRedux.ts
+import { useSelector, useDispatch } from 'react-redux'
+import type { TypedUseSelectorHook } from 'react-redux'
+import type { RootState, AppDispatch } from '@/store'
+
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
+export const useAppDispatch = () => useDispatch<AppDispatch>()
+```
+
+### 组件中使用
+
+```typescript
+import { useAppSelector, useAppDispatch } from '@/hooks/useRedux'
+import { setUser } from '@/store/modules/user'
+
+const userInfo = useAppSelector((state) => state.user.userInfo)
+const dispatch = useAppDispatch()
+
+dispatch(setUser({ id: '1', name: 'Admin', avatar: '', roles: ['admin'] }))
+```
+
+---
+
+## 通用约束
+
+- 按业务领域拆分，每个模块单独一个目录
+- 禁止创建巨型 store / reducer，单个模块的 `index.ts` 不超过 **200 行**
+- 模块之间禁止循环依赖
+- 模块私有类型放在模块目录下的 `type.ts`，全局共享类型放在 `src/types/`
+- Store 中不要直接耦合具体 UI 组件，只存纯数据与业务行为

package/.agents/rules/profiles/react/09-/346/240/267/345/274/217/350/247/204/350/214/203.md

@@ -1,71 +1,71 @@
----
-alwaysApply: false
-globs: ["**/*.tsx", "**/*.jsx", "**/*.scss", "**/*.module.scss"]
-description: 项目的样式规范，包括 SCSS Modules 使用、Ant Design 与自定义主题 CSS 变量。当编写、修改组件样式或主题适配，或涉及 .tsx/.jsx/.scss 文件时读取此规则。
----
-
-# 样式规范
-
-## 基础原则
-
-- 组件库使用 Ant Design
-- 组件样式采用 SCSS Modules（`index.module.scss`）
-- 全局样式（变量、reset、mixins）统一在 `src/styles/` 目录下定义，禁止在组件中使用无作用域的全局样式
-- `classnames` 负责动态 class 管理
-- UI 交互保持 Antd + 自研组件体验一致
-
-## 主题色 CSS 变量（NON-NEGOTIABLE）
-
-在未使用 Ant Design 组件的场景下，自定义样式**必须**使用主题色 CSS 变量，**严格禁止**硬编码颜色值：
-
-- **Ant Design 变量**：`var(--ant-color-primary)`、`var(--ant-color-text)`、`var(--ant-color-bg-container)`、`var(--ant-color-border)`
-- **自定义变量**：`var(--shentu-card-bg)`、`var(--shentu-border-radius)`、`var(--shentu-cn-family)`
-
-确保自定义组件能够正确响应主题切换（浅色/暗色模式）。
-
-如需了解主题变量的具体使用方式，请使用技能文件：
-
-- `.agents/skills/theme-variables/SKILL.md`
-
-## 设计稿颜色提取规范
-
-### 常见颜色属性
-
-| 属性 | 含义 | 示例 |
-|------|------|------|
-| `fill` | 背景色 | `"#13131c73"` |
-| `stroke` | 边框色 | `"#5f50ffff"` |
-| `opacity` | 透明度 | `0.5` |
-
-### 特殊效果
-
-| 属性 | 含义 | 提取方式 |
-|------|------|----------|
-| `background_blur` | 毛玻璃效果 | CSS `backdrop-filter: blur()` |
-| `shadow` | 阴影效果 | CSS `box-shadow` |
-| `cornerRadius` | 圆角 | CSS `border-radius` |
-
-### 提取步骤
-
-1. 定位目标元素（按钮、卡片等）
-2. 查找 `fill` 属性获取背景色
-3. 查找 `effect` 字段（模糊、阴影等）
-4. 记录文字颜色（通常在 `children` 的 `text` 元素中）
-
-### 示例
-
-设计稿按钮：
-```
-"fill": "#13131c73",
-"effect": {"type": "background_blur", "radius": 17.5}
-```
-
-对应 CSS：
-```scss
-.button {
-  background-color: rgba(19, 19, 28, 0.45);
-  backdrop-filter: blur(17.5px);
-}
-```
-
-**注意**：带有透明度的颜色需要转换为 RGBA 格式。例如 `#13131c73` 中 `73` 是透明度（十六进制），转换为十进制约 0.45。
+---
+alwaysApply: false
+globs: ["**/*.tsx", "**/*.jsx", "**/*.scss", "**/*.module.scss"]
+description: 项目的样式规范，包括 SCSS Modules 使用、Ant Design 与自定义主题 CSS 变量。当编写、修改组件样式或主题适配，或涉及 .tsx/.jsx/.scss 文件时读取此规则。
+---
+
+# 样式规范
+
+## 基础原则
+
+- 组件库使用 Ant Design
+- 组件样式采用 SCSS Modules（`index.module.scss`）
+- 全局样式（变量、reset、mixins）统一在 `src/styles/` 目录下定义，禁止在组件中使用无作用域的全局样式
+- `classnames` 负责动态 class 管理
+- UI 交互保持 Antd + 自研组件体验一致
+
+## 主题色 CSS 变量（NON-NEGOTIABLE）
+
+在未使用 Ant Design 组件的场景下，自定义样式**必须**使用主题色 CSS 变量，**严格禁止**硬编码颜色值：
+
+- **Ant Design 变量**：`var(--ant-color-primary)`、`var(--ant-color-text)`、`var(--ant-color-bg-container)`、`var(--ant-color-border)`
+- **自定义变量**：`var(--shentu-card-bg)`、`var(--shentu-border-radius)`、`var(--shentu-cn-family)`
+
+确保自定义组件能够正确响应主题切换（浅色/暗色模式）。
+
+如需了解主题变量的具体使用方式，请使用技能文件：
+
+- `.agents/skills/theme-variables/SKILL.md`
+
+## 设计稿颜色提取规范
+
+### 常见颜色属性
+
+| 属性 | 含义 | 示例 |
+|------|------|------|
+| `fill` | 背景色 | `"#13131c73"` |
+| `stroke` | 边框色 | `"#5f50ffff"` |
+| `opacity` | 透明度 | `0.5` |
+
+### 特殊效果
+
+| 属性 | 含义 | 提取方式 |
+|------|------|----------|
+| `background_blur` | 毛玻璃效果 | CSS `backdrop-filter: blur()` |
+| `shadow` | 阴影效果 | CSS `box-shadow` |
+| `cornerRadius` | 圆角 | CSS `border-radius` |
+
+### 提取步骤
+
+1. 定位目标元素（按钮、卡片等）
+2. 查找 `fill` 属性获取背景色
+3. 查找 `effect` 字段（模糊、阴影等）
+4. 记录文字颜色（通常在 `children` 的 `text` 元素中）
+
+### 示例
+
+设计稿按钮：
+```
+"fill": "#13131c73",
+"effect": {"type": "background_blur", "radius": 17.5}
+```
+
+对应 CSS：
+```scss
+.button {
+  background-color: rgba(19, 19, 28, 0.45);
+  backdrop-filter: blur(17.5px);
+}
+```
+
+**注意**：带有透明度的颜色需要转换为 RGBA 格式。例如 `#13131c73` 中 `73` 是透明度（十六进制），转换为十进制约 0.45。