@qilitt-mickey/vue3-temp-skill 1.1.25 → 1.1.26

package/references/i18n-localization.md

@@ -0,0 +1,230 @@
+---
+skill: i18n-localization
+description: vue-i18n 国际化、locales 语言包、ReLanguageSwitch 语言切换、store/modules/lang
+scope: project
+tags: [国际化, 多语言, i18n, vue-i18n, locale, 语言切换, 语言包, $t, useI18n, ReLanguageSwitch]
+---
+
+# 国际化（i18n）
+
+> 使用 `vue-i18n` + `src/locales/` + `ReLanguageSwitch`，勿另起一套 i18n 方案。
+
+## 架构
+
+```
+src/
+├── locales/
+│   ├── index.ts        # i18n 实例创建，合并 Element Plus / Vant / 自定义语言包
+│   ├── en-US.json      # 英文翻译（按模块分组）
+│   └── zh-Cn.json      # 中文翻译（按模块分组）
+├── utils/
+│   └── i18n.ts         # getLanguage()：localStorage + Cookie + navigator.language 回退
+├── store/modules/
+│   └── lang.ts         # useLangStore：语言状态管理 + 持久化
+├── components/
+│   └── ReLanguageSwitch/  # 语言切换下拉组件
+└── main.ts             # app.use(i18n) + $t 全局注入
+```
+
+## 创建 i18n 实例
+
+```typescript
+// src/locales/index.ts
+import elenLocale from 'element-plus/es/locale/lang/en'
+import elzhLocale from 'element-plus/es/locale/lang/zh-cn'
+import venLocale from 'vant/es/locale/lang/en-US'
+import vzhLocale from 'vant/es/locale/lang/zh-CN'
+
+import { createI18n } from 'vue-i18n'
+import { getLanguage } from '@/utils/i18n'
+import enLocale from './en-US.json'
+import zhLocale from './zh-Cn.json'
+
+const messages = {
+  en: {
+    ...elenLocale,
+    ...venLocale,
+    ...enLocale,
+  },
+  zh: {
+    ...elzhLocale,
+    ...vzhLocale,
+    ...zhLocale,
+  },
+}
+
+export const i18n = createI18n({
+  legacy: false,
+  locale: getLanguage(),
+  fallbackLocale: 'zh',
+  messages,
+  globalInjection: true,
+})
+
+export const $t: typeof i18n.global.t = i18n.global.t
+export default i18n
+```
+
+## 语言检测
+
+```typescript
+// src/utils/i18n.ts
+import { storageLocal } from '@pureadmin/utils'
+import Cookies from 'js-cookie'
+
+export function getLanguage() {
+  const lang = storageLocal().getItem<string>('lang') || Cookies.get('lang')
+  if (!lang) {
+    return navigator.language.startsWith('en') ? 'en' : 'zh'
+  }
+  return lang
+}
+```
+
+优先级：`localStorage('lang')` > `Cookie('lang')` > `navigator.language` 回退。
+
+## 语言状态管理
+
+```typescript
+// src/store/modules/lang.ts
+import { storageLocal } from '@pureadmin/utils'
+import Cookies from 'js-cookie'
+import i18n from '@/locales/index'
+import { store } from '@/store'
+import { getLanguage } from '@/utils/i18n'
+
+export const useLangStore = defineStore('Lang', {
+  state: () => ({
+    lang: getLanguage(),
+  }),
+  actions: {
+    setLang(lang) {
+      this.lang = lang
+      storageLocal().setItem('lang', lang)
+      i18n.global.locale.value = lang
+      Cookies.set('lang', lang)
+    },
+  },
+})
+
+export function useLangStoreHook() {
+  return useLangStore(store)
+}
+```
+
+## 语言切换组件
+
+```vue
+<!-- src/components/ReLanguageSwitch/src/index.vue -->
+<script setup lang="ts">
+import { useGlobal } from '@pureadmin/utils'
+import { ElDropdown, ElDropdownItem, ElDropdownMenu } from 'element-plus'
+import { useLangStore } from '@/store/modules/lang'
+
+defineOptions({ name: 'LanguageSwitch' })
+
+const langStore = useLangStore()
+const { $t } = useGlobal<GlobalPropertiesApi>()
+
+const langSelectList = reactive([
+  { command: 'en', name: 'English', disabled: langStore.lang === 'en' },
+  { command: 'zh', name: $t('中文'), disabled: langStore.lang === 'zh' },
+])
+
+function handleSetLang(lang) {
+  langStore.setLang(lang)
+  window.location.reload()
+}
+</script>
+
+<template>
+  <ElDropdown @command="handleSetLang">
+    <div class="language-trigger">
+      <div class="i-ri:translate-2 language-icon" />
+    </div>
+    <template #dropdown>
+      <ElDropdownMenu>
+        <ElDropdownItem
+          v-for="{ command, name } in langSelectList"
+          :key="command"
+          :command="command"
+          :disabled="langStore.lang === command"
+        >
+          {{ name }}
+        </ElDropdownItem>
+      </ElDropdownMenu>
+    </template>
+  </ElDropdown>
+</template>
+```
+
+## main.ts 注册
+
+```typescript
+import i18n from '@/locales'
+
+const app = createApp(App)
+app.use(i18n)
+app.config.globalProperties.$t = i18n.global.t
+```
+
+## 语言包结构
+
+```json
+// src/locales/zh-Cn.json
+{
+  "请填写正确的验证码": "请填写正确的验证码",
+  "错误提示": "错误提示",
+  "确定": "确定",
+  "取消": "取消",
+  "登录": "登录",
+  "退出登录": "退出登录"
+}
+```
+
+```json
+// src/locales/en-US.json
+{
+  "请填写正确的验证码": "Please enter the correct verification code",
+  "错误提示": "Error",
+  "确定": "OK",
+  "取消": "Cancel",
+  "登录": "Login",
+  "退出登录": "Log Out"
+}
+```
+
+## 使用方式
+
+### 模板中使用
+
+```vue
+<template>
+  <span>{{ $t('登录') }}</span>
+  <ElButton>{{ $t('确定') }}</ElButton>
+</template>
+```
+
+### 脚本中使用
+
+```typescript
+import { useGlobal } from '@pureadmin/utils'
+const { $t } = useGlobal<GlobalPropertiesApi>()
+const message = $t('请填写正确的验证码')
+```
+
+### 新增语言
+
+1. 在 `src/locales/` 下新建语言包文件（如 `ja-JP.json`）
+2. 在 `src/locales/index.ts` 中 import 并合并到 `messages`
+3. 在 `ReLanguageSwitch` 的 `langSelectList` 中添加选项
+4. 在 `store/modules/lang.ts` 的 `setLang` 中同步持久化
+
+## Must-do 清单
+
+1. **勿用中文硬编码**：所有用户可见文案用 `$t('中文 key')` 包裹
+2. **语言包 key 用中文**：以中文原文作为 key，`$t('请填写正确的验证码')` 而非 `$t('enterCorrectCode')`
+3. **Element Plus / Vant 语言包合并**：`createI18n` 时须合并三方库自带语言包，确保组件内置文案同步切换
+4. **切换后 reload**：`langStore.setLang(lang)` 后调 `window.location.reload()`，确保所有组件重新渲染
+5. **持久化双写**：`localStorage` + `Cookie` 同时写入，兼容服务端读取
+6. **回退策略**：`fallbackLocale: 'zh'`，未翻译的 key 回退到中文

package/references/layout-theme.md

@@ -2,7 +2,7 @@
 skill: layout-theme
 description: 布局、主题色、暗黑模式、侧栏配色、Design Tokens、UnoCSS、响应式。修改布局/主题/颜色时加载。上游设计产出落地见 design-handoff / design-system。
 scope: project
-tags: [vue3, layout, theme, dark-mode, css-variables, design-tokens, element-plus, vant, dual-ui, unocss, chroma-js]
+tags: [vue3, layout, theme, dark-mode, css-variables, design-tokens, element-plus, vant, dual-ui, unocss, chroma-js, 标签页, 面包屑, tabs, breadcrumb]
 ---
 
 # 设计系统、布局与主题适配

package/references/particles.md

@@ -1,3 +1,10 @@
+---
+skill: particles
+description: tsParticles 登录背景粒子、@tsparticles/slim、particlesOptions
+scope: project
+tags: [粒子, tsparticles, 登录背景粒子, 粒子动画]
+---
+
 # 粒子特效（tsParticles）
 
 > 按本文件示例编写，复用项目已有 `@tsparticles/*` 注册与 `src/utils/particles.ts` 配置，勿另起一套粒子实现，勿引入 `particles.js`。

package/references/project-inventory.md

@@ -1,3 +1,10 @@
+---
+skill: project-inventory
+description: 项目资产清单：三方库、Re* 组件、依赖安装表
+scope: project
+tags: [查Re, 版本, 安装, 依赖清单, 库版本]
+---
+
 # 项目资产清单（Project Inventory）
 
 ## 何时读本文件

package/references/qrcode-barcode.md

@@ -1,3 +1,10 @@
+---
+skill: qrcode-barcode
+description: 二维码、条形码相关 Re 组件与依赖
+scope: project
+tags: [二维码, 条形码, qrcode, barcode, 扫码]
+---
+
 # 二维码与条形码
 
 > 按本文件示例编写，复用项目已有 `ReQrcode` / `ReBarcode` 等封装，勿另起一套码生成实现。

package/references/rich-text.md

@@ -1,3 +1,10 @@
+---
+skill: rich-text
+description: '@wangeditor/editor + ReRichText 富文本使用方式、图片/视频上传'
+scope: project
+tags: [富文本, wangeditor, ReRichText, 编辑器, Markdown]
+---
+
 # 富文本编辑器
 
 > 按本文件示例编写；富文本使用选型表中的 `@wangeditor/editor` + `ReRichText`，勿改用 Quill / TinyMCE 等；新依赖须待确认。

package/references/seamless-scroll.md

@@ -1,3 +1,10 @@
+---
+skill: seamless-scroll
+description: ReSeamlessScroll 无缝滚动、classOption、关键滚动约定
+scope: project
+tags: [无缝滚动, 跑马灯, marquee, 滚动公告, 滚动通知]
+---
+
 # 无缝滚动
 
 > 按本文件示例编写，复用项目已有 `ReSeamlessScroll` 等封装，勿另起一套滚动实现。

package/references/table-vxe.md

@@ -2,7 +2,7 @@
 skill: table-vxe
 description: vxe-table / vxe-pc-ui 高性能表格规范。大数据量或复杂网格编辑时加载。自带完整示例。
 scope: project
-tags: [vxe-table, vxe-pc-ui, grid, performance, table]
+tags: [vxe-table, vxe-pc-ui, grid, performance, table, 单元格编辑, 可编辑表格]
 ---
 
 # VXE 高性能表格

package/references/tree-table.md

@@ -1,3 +1,10 @@
+---
+skill: tree-table
+description: handleTree/buildHierarchyTree 和 el-table 树形表格、树与表格联动
+scope: project
+tags: [树表, ReTreeLine, handleTree, 树形, 树状, 层级表格, 组织架构, 部门树, 树形列表, 树状表格]
+---
+
 # 树形表格与树结构
 
 > 使用 `handleTree` / `ReTreeLine` + `el-table` tree，按本示例编写。

package/references/verify-captcha.md

@@ -1,3 +1,10 @@
+---
+skill: verify-captcha
+description: 滑块拼图 ReVerify、拖拽验证 ReDragVerify、图片验证码、短信验证码
+scope: project
+tags: [验证码, 滑块, 短信验证, captcha, 拖拽验证, 图片验证码]
+---
+
 # 验证码与校验组件
 
 > 按本文件示例编写，复用项目已有验证码相关组件与封装，勿另起一套校验交互。

package/references/websocket-realtime.md

@@ -1,3 +1,10 @@
+---
+skill: websocket-realtime
+description: WebSocket 实时通信架构 utils/websocket + useWebSocket
+scope: project
+tags: [websocket, ws, 实时, 消息推送, 实时推送, 在线状态]
+---
+
 # WebSocket 实时通信
 
 > 使用 `utils/websocket` + `useWebSocket`，勿另起一套 WS 管理器。

package/references/workflow-bpmn.md

@@ -1,3 +1,10 @@
+---
+skill: workflow-bpmn
+description: bpmn-js 只读 Viewer 使用方式，明确不用 Modeler
+scope: project
+tags: [bpmn, 流程审批, 审批流, BPMN流程, 工作流, 审批流程]
+---
+
 # BPMN 工作流查看器
 
 > 按本文件示例编写；必须使用选型表中的 `bpmn-js` Viewer（见 project-inventory），勿改用同类其他流程引擎；新依赖须待确认。

package/scripts/ai-content-audit.mjs

@@ -0,0 +1,244 @@
+#!/usr/bin/env node
+
+/**
+ * 参考文件 AI 可用性审计
+ *
+ * 从 AI 代码生成角度审计每个 references/*.md 文件：
+ * 1. 标准样板 — 是否有完整可抄的代码块（AI 最依赖的"整段照抄"）
+ * 2. Must-do 清单 — 是否有 AI 可逐项核对的检查项
+ * 3. 完整性守则 — 是否声明了"不能只抄部分"的约束
+ * 4. 依赖信息 — 是否说明了需要什么包/组件/Hook
+ * 5. 交叉引用 — 是否标注了何时同时加载其他模块
+ * 6. 代码块完备性 — 代码块是否完整（有开始标签和结束标签）
+ * 7. 可替换标记 — 样板中是否有明确的占位符（如 Customer、customer）
+ *
+ * 核心思路：AI 生成代码时是"照抄样板 + 改名"，如果样板不完整或缺约束，
+ * AI 生成的代码就会出问题。本脚本检测这些"AI 生成质量风险点"。
+ *
+ * 用法：
+ *   node scripts/ai-content-audit.mjs              # 全量审计
+ *   node scripts/ai-content-audit.mjs crud-pages    # 审计单个模块
+ *   node scripts/ai-content-audit.mjs --json        # JSON 输出
+ */
+
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.resolve(__dirname, "..");
+const REFS_DIR = path.join(ROOT, "references");
+
+const c = {
+  red: (s) => `\x1b[31m${s}\x1b[0m`,
+  green: (s) => `\x1b[32m${s}\x1b[0m`,
+  yellow: (s) => `\x1b[33m${s}\x1b[0m`,
+  cyan: (s) => `\x1b[36m${s}\x1b[0m`,
+  bold: (s) => `\x1b[1m${s}\x1b[0m`,
+  dim: (s) => `\x1b[2m${s}\x1b[0m`,
+};
+
+// ── 审计单个文件 ─────────────────────────────────────────
+function auditFile(id, content) {
+  const report = {
+    moduleId: id,
+    size: content.length,
+    checks: {},
+    risks: [],
+    score: 0,
+  };
+
+  // 1. 标准样板检测
+  const hasTemplate =
+    /标准样板|强制样板|完整示例/.test(content) ||
+    /照抄|整段/.test(content);
+  const codeBlocks = content.match(/```[\s\S]*?```/g) || [];
+  const vueBlocks = codeBlocks.filter((b) => b.startsWith("```vue"));
+  const tsBlocks = codeBlocks.filter((b) => b.startsWith("```typescript") || b.startsWith("```ts"));
+  const hasCompleteCode = codeBlocks.length > 0;
+  report.checks.template = {
+    hasStandardTemplate: hasTemplate,
+    codeBlockCount: codeBlocks.length,
+    vueBlockCount: vueBlocks.length,
+    tsBlockCount: tsBlocks.length,
+  };
+  if (!hasCompleteCode) report.risks.push("无代码块 — AI 无样板可抄");
+  if (hasTemplate && codeBlocks.length === 0) report.risks.push("声明了「标准样板」但无代码块");
+
+  // 2. Must-do 清单检测
+  const hasMustDo = /Must-do|必须|清单/.test(content);
+  const checklistItems = (content.match(/^- \[ \]/gm) || []).length +
+    (content.match(/^\d+\.\s/gm) || []).length;
+  report.checks.mustDo = {
+    hasMustDoSection: hasMustDo,
+    checklistItemCount: checklistItems,
+  };
+  if (!hasMustDo) report.risks.push("无 Must-do 清单 — AI 生成后无法逐项核对");
+
+  // 3. 完整性守则检测
+  const hasCompletenessRule = /完整性守则|完整性|整段|禁止只/.test(content);
+  report.checks.completeness = {
+    hasCompletenessRule,
+  };
+  if (!hasCompletenessRule) report.risks.push("无完整性守则 — AI 可能只抄 API 签名丢掉配套段落");
+
+  // 4. 依赖信息检测
+  const hasDeps = /依赖|pnpm add|package\.json|缺则先装/.test(content);
+  const depMatches = content.match(/`([\w@/-]+)@([\d.]+)`/g) || [];
+  report.checks.dependencies = {
+    hasDepInfo: hasDeps,
+    pinnedVersions: depMatches.length,
+  };
+
+  // 5. 交叉引用检测
+  const crossRefPattern = /→\s*`?([a-z][a-z0-9-]+)`?|见\s*`?([a-z][a-z0-9-]+)`?/g;
+  let crossRefCount = 0;
+  let m;
+  while ((m = crossRefPattern.exec(content)) !== null) {
+    crossRefCount++;
+  }
+  const hasCoLoad = /同读|同批|同时加载|同读|一起/.test(content);
+  report.checks.crossRefs = {
+    crossRefCount,
+    hasCoLoadInstruction: hasCoLoad,
+  };
+  if (crossRefCount === 0) report.risks.push("无交叉引用 — AI 不知道何时还需加载其他模块");
+
+  // 6. 代码块完备性检测
+  const unclosedBlocks = (content.match(/```/g) || []).length % 2;
+  report.checks.codeBlocks = {
+    totalFences: (content.match(/```/g) || []).length,
+    isBalanced: unclosedBlocks === 0,
+  };
+  if (unclosedBlocks !== 0) report.risks.push("代码块未闭合 — AI 可能截断生成");
+
+  // 7. 可替换标记检测（样板中是否有占位符暗示 AI 需要改名）
+  const placeholders = content.match(/[A-Z][a-z]+(?:List|Detail|Edit|View|Page)/g) || [];
+  const hasPlaceholder = placeholders.length > 0;
+  report.checks.placeholders = {
+    placeholderCount: placeholders.length,
+    examples: [...new Set(placeholders)].slice(0, 5),
+  };
+
+  // 8. AI 可执行性检测（是否有 step-by-step 指引）
+  const hasSteps = /步骤|Step|第一步|1\./.test(content);
+  const hasCodeToCopy = codeBlocks.length >= 2;
+  report.checks.executability = {
+    hasSteps,
+    hasEnoughCode: hasCodeToCopy,
+  };
+
+  // 评分
+  let score = 0;
+  if (hasCompleteCode) score += 20;
+  if (hasTemplate) score += 15;
+  if (hasMustDo) score += 15;
+  if (hasCompletenessRule) score += 15;
+  if (hasDeps) score += 10;
+  if (crossRefCount > 0) score += 10;
+  if (unclosedBlocks === 0) score += 10;
+  if (hasCoLoad) score += 5;
+  report.score = score;
+
+  return report;
+}
+
+// ── 主审计逻辑 ───────────────────────────────────────────
+function auditAll(targetModule) {
+  const files = fs
+    .readdirSync(REFS_DIR)
+    .filter((f) => f.endsWith(".md"))
+    .sort();
+
+  const reports = [];
+  for (const file of files) {
+    const id = file.replace(".md", "");
+    if (targetModule && id !== targetModule) continue;
+    const content = fs.readFileSync(path.join(REFS_DIR, file), "utf-8");
+    reports.push(auditFile(id, content));
+  }
+
+  return reports;
+}
+
+// ── 文本输出 ─────────────────────────────────────────────
+function printReport(report) {
+  const { moduleId, checks, risks, score } = report;
+
+  console.log(c.bold(`\n${c.cyan(moduleId)} ${c.dim(`(score: ${score}/100)`)}\n`));
+
+  console.log(c.dim("  检查项："));
+  const items = [
+    ["标准样板", checks.template?.hasStandardTemplate, `${checks.template?.codeBlockCount || 0} 代码块`],
+    ["Must-do 清单", checks.mustDo?.hasMustDoSection, `${checks.mustDo?.checklistItemCount || 0} 项`],
+    ["完整性守则", checks.completeness?.hasCompletenessRule, ""],
+    ["依赖信息", checks.dependencies?.hasDepInfo, `${checks.dependencies?.pinnedVersions || 0} 精确版本`],
+    ["交叉引用", checks.crossRefs?.crossRefCount > 0, `${checks.crossRefs?.crossRefCount || 0} 处引用`],
+    ["同批加载指引", checks.crossRefs?.hasCoLoadInstruction, ""],
+    ["代码块闭合", checks.codeBlocks?.isBalanced, `${checks.codeBlocks?.totalFences || 0} 围栏`],
+    ["可替换标记", checks.placeholders?.placeholderCount > 0, checks.placeholders?.examples?.join(", ") || ""],
+    ["步骤指引", checks.executability?.hasSteps, ""],
+    ["充足代码量", checks.executability?.hasEnoughCode, ""],
+  ];
+
+  for (const [name, passed, detail] of items) {
+    const mark = passed ? c.green("✓") : c.red("✗");
+    console.log(`  ${mark} ${name.padEnd(16)} ${c.dim(detail)}`);
+  }
+
+  if (risks.length > 0) {
+    console.log(c.yellow(`\n  AI 生成风险 (${risks.length})：`));
+    for (const r of risks) {
+      console.log(`  ${c.yellow("!")} ${r}`);
+    }
+  }
+}
+
+function printSummary(reports) {
+  console.log(c.bold(`\n${c.cyan("AI 可用性审计汇总")} — ${reports.length} 个模块\n`));
+
+  // 按评分排序
+  const sorted = [...reports].sort((a, b) => b.score - a.score);
+
+  for (const r of sorted) {
+    const bar = "█".repeat(Math.floor(r.score / 5)) +
+                c.dim("░".repeat(20 - Math.floor(r.score / 5)));
+    const level = r.score >= 70 ? c.green("优") : r.score >= 40 ? c.yellow("中") : c.red("差");
+    const riskStr = r.risks.length > 0 ? c.red(` (${r.risks.length} 风险)`) : "";
+    console.log(`  ${bar} ${r.score.toString().padStart(3)} ${c.bold(r.moduleId.padEnd(22))} ${level}${riskStr}`);
+  }
+
+  // 统计
+  const totalRisks = reports.reduce((sum, r) => sum + r.risks.length, 0);
+  const avgScore = Math.round(reports.reduce((sum, r) => sum + r.score, 0) / reports.length);
+  const excellent = reports.filter((r) => r.score >= 70).length;
+  const poor = reports.filter((r) => r.score < 40).length;
+
+  console.log(c.dim(`\n  平均分: ${avgScore}/100 | 优: ${excellent} | 中: ${reports.length - excellent - poor} | 差: ${poor} | 总风险: ${totalRisks}\n`));
+
+  // 高风险模块
+  const highRisk = reports.filter((r) => r.risks.length >= 2);
+  if (highRisk.length > 0) {
+    console.log(c.bold(`高风险模块（≥2 个 AI 生成风险）：\n`));
+    for (const r of highRisk) {
+      console.log(`  ${c.red("!")} ${r.moduleId} ${c.dim(`(score: ${r.score})`)}`);
+      for (const risk of r.risks) {
+        console.log(`      ${c.yellow("!")} ${risk}`);
+      }
+    }
+  }
+}
+
+// ── CLI 入口 ────────────────────────────────────────────────
+const args = process.argv.slice(2);
+const targetModule = args.find((a) => !a.startsWith("--"));
+const reports = auditAll(targetModule);
+
+if (args.includes("--json")) {
+  console.log(JSON.stringify(reports, null, 2));
+} else if (targetModule) {
+  printReport(reports[0]);
+  console.log("");
+} else {
+  printSummary(reports);
+}