@qilitt-mickey/vue3-temp-skill 1.1.74 → 1.1.76

package/references/auth-pages.md

@@ -1,217 +1,217 @@
----
-name: auth-pages
-description: 登录/注册/忘记密码认证流程、API 模式、userStore 集成、路由配置
-scope: project
-tags: [登录, 注册, 忘记密码, 重置密码, 认证, auth, login, register, signup, forgot-password, 找回密码]
----
-
-# 认证流程规范（登录 / 注册 / 忘记密码）
-
-> **页面设计自由**：认证页面的视觉布局、交互形式、背景效果均由设计主导，本模块仅规范**认证流程、API 模式、Store 集成、路由配置**。勿将此处代码片段当作页面样板整段抄录，仅提取流程模式。
->
-> **验证码/滑块组件**：见 `verify-captcha` 模块（ReVerify 滑块拼图、ReDragVerify 拖拽验证、ReImageVerify 图片验证码、ReSmsCode 短信倒计时）。本模块不重复其用法。
-
-## 涉及文件
-
-```
-src/
-├── api/login/index.ts          # 认证 API（按后端实际接口调整字段）
-├── store/modules/user.ts       # useUserStore：login()、logOut()、token 管理
-├── views/login/                # 登录页（设计自由，仅流程受规范）
-├── utils/rule.ts               # 表单校验规则
-└── router/                     # 认证页路由（showLink:false）
-```
-
-## API 模式
-
-> 字段名和接口路径按后端实际定义，以下仅展示结构模式。**勿将字段当作硬约束**。
-
-```typescript
-// src/api/login/index.ts
-import { http } from '@/utils/http'
-
-// 接口参数类型 — 字段按后端实际定义
-interface LoginParams {
-  [key: string]: any  // 常见：账号、密码、验证码等，字段名不固定
-}
-
-// 登录返回 — 结构按后端实际返回
-interface LoginResult {
-  [key: string]: any  // 常见：token、用户信息等，字段名不固定
-}
-
-/** 登录 */
-export const getLogin = (data: LoginParams) => {
-  return http.request<Result<LoginResult>>('post', '/auth/login', { data })
-}
-
-/** 发送短信验证码 */
-export const sendSmsCode = (params: Record<string, any>) => {
-  return http.request<Result<null>>('post', '/auth/sms-code', { data: params })
-}
-
-// 注册/忘记密码 API 按需新增，遵循同一模式：
-// 1. 参数类型用 interface 声明，字段按后端定义
-// 2. 返回值用 Result<T> 包裹
-// 3. 方法名语义化（getRegister、sendResetLink、resetPassword）
-```
-
-## 认证流程模式
-
-> 无论页面长什么样，认证流程必须遵循以下链路。
-
-```
-用户输入 → 表单校验 → [验证码校验] → 调用 API → useUserStore 处理 token → initRouter → 跳转首页
-```
-
-### 1. Store 集成
-
-```typescript
-// store/modules/user.ts — 认证状态管理
-export const useUserStore = defineStore('user', {
-  state: () => ({
-    token: '',
-    userInfo: null as any,
-  }),
-  actions: {
-    // 登录：调用 API → 存 token → 返回结果
-    async login(data: Record<string, any>) {
-      const res = await getLogin(data)
-      if (res.status === 200 && res.data) {
-        // token 存储方式按项目实际（localStorage / cookie / pinia 持久化）
-        this.token = res.data.accessToken ?? ''
-        // 用户信息按后端返回结构存储
-        this.userInfo = res.data
-      }
-      return res
-    },
-    // 退出
-    logOut() {
-      this.token = ''
-      this.userInfo = null
-      // 清除存储、跳转登录
-    },
-  },
-})
-```
-
-### 2. 登录流程
-
-```typescript
-// 登录页脚本 — 仅展示流程，页面模板设计自由
-import { useUserStoreHook } from '@/store/modules/user'
-import { getTopMenu, initRouter } from '@/utils/router'
-
-const useUserStore = useUserStoreHook()
-const router = useRouter()
-const loading = ref(false)
-
-async function handleLogin(formData: Record<string, any>) {
-  loading.value = true
-  try {
-    const res = await useUserStore.login(formData)
-    if (res.status === 200) {
-      // 初始化路由（动态路由/权限路由）
-      await initRouter(router)
-      // 跳转到首页或来源页
-      router.push(getTopMenu().path)
-    }
-  } finally {
-    loading.value = false
-  }
-}
-```
-
-### 3. 注册流程
-
-```typescript
-// 注册页脚本 — 仅展示流程
-import { getRegister } from '@/api/login'
-
-async function handleRegister(formData: Record<string, any>) {
-  loading.value = true
-  try {
-    const res = await getRegister(formData)
-    if (res.status === 200) {
-      // 注册成功 → 跳转登录或自动登录
-      router.push('/login')
-    }
-  } finally {
-    loading.value = false
-  }
-}
-```
-
-### 4. 忘记密码流程
-
-```typescript
-// 忘记密码 — 分步流程，页面交互设计自由
-const step = ref(1) // 步骤数按实际流程定
-
-// 步骤 1：验证身份 → 发送重置凭证
-async function handleSendReset(account: string) { /* 调用 API */ }
-
-// 步骤 2：重置密码
-async function handleReset(formData: Record<string, any>) { /* 调用 API */ }
-
-// 步骤 3：完成 → 跳转登录
-function handleDone() {
-  router.push('/login')
-}
-```
-
-## 路由配置
-
-```typescript
-// 认证页路由统一约定
-{
-  path: '/login',
-  name: 'Login',
-  component: () => import('@/views/login/index.vue'),
-  meta: {
-    title: '登录',
-    showLink: false,       // 不在菜单显示
-    activePath: '/login',  // 高亮路径
-  },
-}
-// 注册/忘记密码页同理：showLink: false + activePath
-```
-
-## 表单校验模式
-
-> 校验规则按业务实际调整，以下为常见模式。
-
-```typescript
-import { loginRules } from '@/utils/rule'
-
-// 必填校验
-const rules = {
-  // 字段名按表单实际定义，不固定
-  account: [{ required: true, message: $t('请输入账号'), trigger: 'blur' }],
-  password: [{ required: true, message: $t('请输入密码'), trigger: 'blur' }],
-}
-
-// 密码确认校验（注册/重置密码场景）
-const confirmPasswordRule = {
-  validator: (rule: any, value: string, callback: any) => {
-    if (value !== formData.password) {
-      callback(new Error($t('两次密码不一致')))
-    } else {
-      callback()
-    }
-  },
-  trigger: 'blur',
-}
-```
-
-## Must-do 清单
-
-1. **认证流程链路**：`API → useUserStore.login() → initRouter() → 跳转`，勿另起流程
-2. **页面设计自由**：布局、背景、交互形式由设计主导，本模块不约束视觉
-3. **API 字段动态**：参数和返回值字段按后端实际定义，勿硬编码字段名
-4. **验证码组件**：见 `verify-captcha` 模块，不在本模块重复
-5. **路由约定**：认证页 `showLink: false` 不在菜单显示，`activePath` 指向自身
-6. **路由白名单**：登录/注册/忘记密码页在路由守卫白名单中，无需 token
-7. **国际化**：所有提示文案用 `$t()` 包裹
-8. **密码确认**：注册和重置密码须有确认密码字段 + 自定义校验
-9. **loading 状态**：提交期间禁用按钮，防止重复提交
+---
+name: auth-pages
+description: 登录/注册/忘记密码认证流程、API 模式、userStore 集成、路由配置
+scope: project
+tags: [登录, 注册, 忘记密码, 重置密码, 认证, auth, login, register, signup, forgot-password, 找回密码]
+---
+
+# 认证流程规范（登录 / 注册 / 忘记密码）
+
+> **页面设计自由**：认证页面的视觉布局、交互形式、背景效果均由设计主导，本模块仅规范**认证流程、API 模式、Store 集成、路由配置**。勿将此处代码片段当作页面样板整段抄录，仅提取流程模式。
+>
+> **验证码/滑块组件**：见 `verify-captcha` 模块（ReVerify 滑块拼图、ReDragVerify 拖拽验证、ReImageVerify 图片验证码、ReSmsCode 短信倒计时）。本模块不重复其用法。
+
+## 涉及文件
+
+```
+src/
+├── api/login/index.ts          # 认证 API（按后端实际接口调整字段）
+├── store/modules/user.ts       # useUserStore：login()、logOut()、token 管理
+├── views/login/                # 登录页（设计自由，仅流程受规范）
+├── utils/rule.ts               # 表单校验规则
+└── router/                     # 认证页路由（showLink:false）
+```
+
+## API 模式
+
+> 字段名和接口路径按后端实际定义，以下仅展示结构模式。**勿将字段当作硬约束**。
+
+```typescript
+// src/api/login/index.ts
+import { http } from '@/utils/http'
+
+// 接口参数类型 — 字段按后端实际定义
+interface LoginParams {
+  [key: string]: any  // 常见：账号、密码、验证码等，字段名不固定
+}
+
+// 登录返回 — 结构按后端实际返回
+interface LoginResult {
+  [key: string]: any  // 常见：token、用户信息等，字段名不固定
+}
+
+/** 登录 */
+export const getLogin = (data: LoginParams) => {
+  return http.request<Result<LoginResult>>('post', '/auth/login', { data })
+}
+
+/** 发送短信验证码 */
+export const sendSmsCode = (params: Record<string, any>) => {
+  return http.request<Result<null>>('post', '/auth/sms-code', { data: params })
+}
+
+// 注册/忘记密码 API 按需新增，遵循同一模式：
+// 1. 参数类型用 interface 声明，字段按后端定义
+// 2. 返回值用 Result<T> 包裹
+// 3. 方法名语义化（getRegister、sendResetLink、resetPassword）
+```
+
+## 认证流程模式
+
+> 无论页面长什么样，认证流程必须遵循以下链路。
+
+```
+用户输入 → 表单校验 → [验证码校验] → 调用 API → useUserStore 处理 token → initRouter → 跳转首页
+```
+
+### 1. Store 集成
+
+```typescript
+// store/modules/user.ts — 认证状态管理
+export const useUserStore = defineStore('user', {
+  state: () => ({
+    token: '',
+    userInfo: null as any,
+  }),
+  actions: {
+    // 登录：调用 API → 存 token → 返回结果
+    async login(data: Record<string, any>) {
+      const res = await getLogin(data)
+      if (res.status === 200 && res.data) {
+        // token 存储方式按项目实际（localStorage / cookie / pinia 持久化）
+        this.token = res.data.accessToken ?? ''
+        // 用户信息按后端返回结构存储
+        this.userInfo = res.data
+      }
+      return res
+    },
+    // 退出
+    logOut() {
+      this.token = ''
+      this.userInfo = null
+      // 清除存储、跳转登录
+    },
+  },
+})
+```
+
+### 2. 登录流程
+
+```typescript
+// 登录页脚本 — 仅展示流程，页面模板设计自由
+import { useUserStoreHook } from '@/store/modules/user'
+import { getTopMenu, initRouter } from '@/utils/router'
+
+const useUserStore = useUserStoreHook()
+const router = useRouter()
+const loading = ref(false)
+
+async function handleLogin(formData: Record<string, any>) {
+  loading.value = true
+  try {
+    const res = await useUserStore.login(formData)
+    if (res.status === 200) {
+      // 初始化路由（动态路由/权限路由）
+      await initRouter(router)
+      // 跳转到首页或来源页
+      router.push(getTopMenu().path)
+    }
+  } finally {
+    loading.value = false
+  }
+}
+```
+
+### 3. 注册流程
+
+```typescript
+// 注册页脚本 — 仅展示流程
+import { getRegister } from '@/api/login'
+
+async function handleRegister(formData: Record<string, any>) {
+  loading.value = true
+  try {
+    const res = await getRegister(formData)
+    if (res.status === 200) {
+      // 注册成功 → 跳转登录或自动登录
+      router.push('/login')
+    }
+  } finally {
+    loading.value = false
+  }
+}
+```
+
+### 4. 忘记密码流程
+
+```typescript
+// 忘记密码 — 分步流程，页面交互设计自由
+const step = ref(1) // 步骤数按实际流程定
+
+// 步骤 1：验证身份 → 发送重置凭证
+async function handleSendReset(account: string) { /* 调用 API */ }
+
+// 步骤 2：重置密码
+async function handleReset(formData: Record<string, any>) { /* 调用 API */ }
+
+// 步骤 3：完成 → 跳转登录
+function handleDone() {
+  router.push('/login')
+}
+```
+
+## 路由配置
+
+```typescript
+// 认证页路由统一约定
+{
+  path: '/login',
+  name: 'Login',
+  component: () => import('@/views/login/index.vue'),
+  meta: {
+    title: '登录',
+    showLink: false,       // 不在菜单显示
+    activePath: '/login',  // 高亮路径
+  },
+}
+// 注册/忘记密码页同理：showLink: false + activePath
+```
+
+## 表单校验模式
+
+> 校验规则按业务实际调整，以下为常见模式。
+
+```typescript
+import { loginRules } from '@/utils/rule'
+
+// 必填校验
+const rules = {
+  // 字段名按表单实际定义，不固定
+  account: [{ required: true, message: $t('请输入账号'), trigger: 'blur' }],
+  password: [{ required: true, message: $t('请输入密码'), trigger: 'blur' }],
+}
+
+// 密码确认校验（注册/重置密码场景）
+const confirmPasswordRule = {
+  validator: (rule: any, value: string, callback: any) => {
+    if (value !== formData.password) {
+      callback(new Error($t('两次密码不一致')))
+    } else {
+      callback()
+    }
+  },
+  trigger: 'blur',
+}
+```
+
+## Must-do 清单
+
+1. **认证流程链路**：`API → useUserStore.login() → initRouter() → 跳转`，勿另起流程
+2. **页面设计自由**：布局、背景、交互形式由设计主导，本模块不约束视觉
+3. **API 字段动态**：参数和返回值字段按后端实际定义，勿硬编码字段名
+4. **验证码组件**：见 `verify-captcha` 模块，不在本模块重复
+5. **路由约定**：认证页 `showLink: false` 不在菜单显示，`activePath` 指向自身
+6. **路由白名单**：登录/注册/忘记密码页在路由守卫白名单中，无需 token
+7. **国际化**：所有提示文案用 `$t()` 包裹
+8. **密码确认**：注册和重置密码须有确认密码字段 + 自定义校验
+9. **loading 状态**：提交期间禁用按钮，防止重复提交

package/references/base-code-dict.md

@@ -1,56 +1,56 @@
----
-name: base-code-dict
-description: 基础代码字典获取、缓存、useApp().baseCodeGet、filterValue
-scope: project
-tags: [字典, baseCode, 码表, 下拉字典, 数据字典]
----
-
-# 基础代码（字典）
-
-> 按本文件示例编写，复用 `useApp().baseCodeGet` / `filterValue` 等已有码表能力，勿另起一套字典请求与缓存。
-
-规范基础代码（字典）的获取、缓存、映射与使用。在页面需要码表、枚举、下拉数据时参照。
-
-## 获取基础代码
-
-通过 `useApp().baseCodeGet(codeType)` 获取：
-
-```typescript
-import { useApp } from "@/hooks/useApp";
-
-const { baseCodeGet, filterValue } = useApp();
-const statusList = baseCodeGet("status");
-```
-
-## 特点
-
-- 首次调用会自动发起请求并缓存到 `BaseCode` Store。
-- 后续调用直接返回缓存数据。
-- 如需刷新缓存，在 `params` 中传 `refresh: true`。
-
-## 映射显示
-
-```typescript
-const label = filterValue(code, list, "code", "value");
-```
-
-- 默认字段名：`code` / `value`。
-
-## 在模板中使用
-
-```vue
-<template>
-  <span>{{ filterValue(row.status, statusList) }}</span>
-</template>
-```
-
-## Store 底层
-
-- `src/store/modules/baseCode.ts` 维护 `baseCodeCache`。
-- 接口：`getBaseCode({ codeType })`。
-
-## 关键约定
-
-1. 码表数据优先使用 `baseCodeGet`，避免重复请求。
-2. 列表中码表回写统一使用 `filterValue`。
-3. 不同模块相同码表使用相同 `codeType`。
+---
+name: base-code-dict
+description: 基础代码字典获取、缓存、useApp().baseCodeGet、filterValue
+scope: project
+tags: [字典, baseCode, 码表, 下拉字典, 数据字典]
+---
+
+# 基础代码（字典）
+
+> 按本文件示例编写，复用 `useApp().baseCodeGet` / `filterValue` 等已有码表能力，勿另起一套字典请求与缓存。
+
+规范基础代码（字典）的获取、缓存、映射与使用。在页面需要码表、枚举、下拉数据时参照。
+
+## 获取基础代码
+
+通过 `useApp().baseCodeGet(codeType)` 获取：
+
+```typescript
+import { useApp } from "@/hooks/useApp";
+
+const { baseCodeGet, filterValue } = useApp();
+const statusList = baseCodeGet("status");
+```
+
+## 特点
+
+- 首次调用会自动发起请求并缓存到 `BaseCode` Store。
+- 后续调用直接返回缓存数据。
+- 如需刷新缓存，在 `params` 中传 `refresh: true`。
+
+## 映射显示
+
+```typescript
+const label = filterValue(code, list, "code", "value");
+```
+
+- 默认字段名：`code` / `value`。
+
+## 在模板中使用
+
+```vue
+<template>
+  <span>{{ filterValue(row.status, statusList) }}</span>
+</template>
+```
+
+## Store 底层
+
+- `src/store/modules/baseCode.ts` 维护 `baseCodeCache`。
+- 接口：`getBaseCode({ codeType })`。
+
+## 关键约定
+
+1. 码表数据优先使用 `baseCodeGet`，避免重复请求。
+2. 列表中码表回写统一使用 `filterValue`。
+3. 不同模块相同码表使用相同 `codeType`。