@qilitt-mickey/vue3-temp-skill 1.0.12 → 1.1.2

package/references/advanced-ui.md

@@ -1,302 +0,0 @@
----
-skill: advanced-ui
-description: 规范高级 UI 组件的使用与开发，包括选择器组件（下拉/树/级联）、高级表格（vxe-table）、高级表单、图表（ECharts）、工作流（BPMN）、树形表格等。在开发复杂交互组件时调用。
-scope: project
-tags: [vue3, select, tree, table, vxe-table, echarts, bpmn, cascader, form-advanced]
----
-
-# 高级 UI 组件规范
-
-## 选择器组件
-
-### ReSelectQuery（下拉查询选择器）
-
-适用于需要搜索、分页、远程加载的下拉选择场景：
-
-```vue
-<script setup lang="ts">
-import { ReSelectQuery } from "@/components/ReSelectQuery";
-
-const value = ref("");
-
-// 远程搜索
-function remoteMethod(query: string) {
-  // 调用 API 获取选项列表
-}
-</script>
-
-<template>
-  <ReSelectQuery
-    v-model="value"
-    :api="getUserListApi"
-    label-key="name"
-    value-key="id"
-    placeholder="请选择用户"
-    :remote="true"
-    :remote-method="remoteMethod"
-  />
-</template>
-```
-
-### el-tree-select（树形下拉选择）
-
-适用于组织架构、分类选择等树形数据场景：
-
-```vue
-<template>
-  <el-tree-select
-    v-model="value"
-    :data="treeData"
-    :props="{ label: 'name', value: 'id', children: 'children' }"
-    check-strictly
-    :render-after-expand="false"
-    placeholder="请选择部门"
-  />
-</template>
-```
-
-### ReCascader（级联选择器）
-
-适用于省市区、多级分类等联动选择场景：
-
-```vue
-<template>
-  <ReCascader
-    v-model="value"
-    :api="getAreaListApi"
-    :props="{ label: 'name', value: 'code', children: 'children' }"
-    placeholder="请选择地区"
-  />
-</template>
-```
-
-### 选择器约定
-
-1. 简单下拉使用 `el-select`，需要搜索+分页用 `ReSelectQuery`。
-2. 树形数据选择使用 `el-tree-select`，不要用 `el-select` 嵌套 `el-tree`。
-3. 级联场景使用 `ReCascader`，支持异步加载子节点。
-4. 移动端选择使用 `RePopupPicker`（基于 Vant）。
-5. 选择器必须设置 `placeholder`，清除按钮默认开启。
-
-## 高级表格
-
-### ReTableBar（表格工具栏）
-
-```vue
-<ReTableBar>
-  <template #left>
-    <el-button type="primary" @click="handleAdd">新增</el-button>
-    <el-button type="danger" :disabled="!selected.length" @click="handleBatchDelete">
-      批量删除
-    </el-button>
-  </template>
-  <template #right>
-    <!-- 右侧默认包含：列配置、密度、全屏按钮 -->
-  </template>
-</ReTableBar>
-```
-
-### ReTableOperate（操作列按钮组）
-
-```vue
-<el-table-column label="操作" width="200" fixed="right">
-  <template #default="{ row }">
-    <ReTableOperate
-      :buttons="[
-        { label: '查看', type: 'primary', link: true, onClick: () => handleView(row) },
-        { label: '编辑', type: 'primary', link: true, onClick: () => handleEdit(row) },
-        {
-          label: '删除',
-          type: 'danger',
-          link: true,
-          confirm: { title: '确认删除？', message: `将删除「${row.name}」` },
-          onClick: () => handleDelete(row),
-        },
-      ]"
-      :max="3"
-    />
-  </template>
-</el-table-column>
-```
-
-### ReGrid（数据表格）
-
-```vue
-<ReGrid
-  v-loading="loading"
-  :data="content"
-  :pagination="pagination"
-  @page-change="handlePageChange"
-  @size-change="handleSizeChange"
-  @selection-change="handleSelectionChange"
->
-  <el-table-column type="selection" width="55" />
-  <el-table-column prop="name" label="名称" sortable />
-  <el-table-column prop="createTime" label="创建时间" width="180" />
-  <el-table-column label="操作" width="200" fixed="right">
-    <!-- ... -->
-  </el-table-column>
-</ReGrid>
-```
-
-### vxe-table（高性能表格）
-
-当数据量超过 1000 行或需要复杂编辑（行内编辑、单元格合并）时使用 vxe-table：
-
-```vue
-<script setup lang="ts">
-import { ref } from "vue";
-
-const gridRef = ref();
-const tableData = ref([]);
-
-const columns = [
-  { type: "seq", width: 60 },
-  { field: "name", title: "名称", sortable: true },
-  { field: "status", title: "状态", formatter: (v) => (v ? "启用" : "禁用") },
-];
-</script>
-
-<template>
-  <vxe-grid
-    ref="gridRef"
-    :data="tableData"
-    :columns="columns"
-    :pager-config="{ total: 100 }"
-    :edit-config="{ trigger: 'click', mode: 'cell' }"
-  />
-</template>
-```
-
-## 树形表格
-
-### 数据转换
-
-使用 `handleTree` 工具函数将平铺数据转为树形结构：
-
-```typescript
-import { handleTree } from "@/utils/tree";
-
-const flatData = ref<FlatItem[]>([]);
-const treeData = computed(() =>
-  handleTree(flatData.value, "id", "parentId", "children")
-);
-```
-
-### 树形表格渲染
-
-```vue
-<ReGrid :data="treeData" :tree-props="{ children: 'children' }" row-key="id">
-  <el-table-column prop="name" label="名称" />
-  <el-table-column prop="code" label="编码" />
-</ReGrid>
-```
-
-### 树形连线展示
-
-使用 `ReTreeLine` 组件为树形表格添加视觉连线：
-
-```vue
-<template>
-  <ReTreeLine :data="treeData">
-    <template #default="{ row }">
-      <span>{{ row.name }}</span>
-    </template>
-  </ReTreeLine>
-</template>
-```
-
-## 高级表单组件
-
-### ReIconPicker（图标选择器）
-
-```vue
-<el-form-item label="菜单图标">
-  <ReIconPicker v-model="formData.icon" />
-</el-form-item>
-```
-
-### ReSegmented（分段控制器）
-
-```vue
-<ReSegmented
-  v-model="activeTab"
-  :options="[
-    { label: '基本信息', value: 'basic' },
-    { label: '详细配置', value: 'config' },
-    { label: '权限设置', value: 'permission' },
-  ]"
-/>
-```
-
-### ReCheckCard（多选卡片）
-
-```vue
-<ReCheckCard
-  v-model="selectedRoles"
-  :options="roleOptions"
-  multiple
-/>
-```
-
-## 图表 (ECharts)
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import * as echarts from "echarts";
-
-const chartRef = ref<HTMLDivElement>();
-let chartInstance: echarts.ECharts;
-
-onMounted(() => {
-  chartInstance = echarts.init(chartRef.value!);
-  chartInstance.setOption({
-    title: { text: "数据统计" },
-    tooltip: { trigger: "axis" },
-    xAxis: { type: "category", data: ["1月", "2月", "3月"] },
-    yAxis: { type: "value" },
-    series: [{ type: "bar", data: [120, 200, 150] }],
-  });
-});
-
-// 响应式：监听容器大小变化
-const resizeObserver = new ResizeObserver(() => chartInstance?.resize());
-onMounted(() => resizeObserver.observe(chartRef.value!));
-onUnmounted(() => {
-  resizeObserver.disconnect();
-  chartInstance?.dispose();
-});
-</script>
-
-<template>
-  <div ref="chartRef" style="width: 100%; height: 400px;" />
-</template>
-```
-
-### 图表约定
-
-1. 始终在 `onUnmounted` 中 `dispose()` 图表实例，防止内存泄漏。
-2. 使用 `ResizeObserver` 监听容器变化自动调整大小。
-3. 图表配置项抽取为独立变量或函数，不要内联在 `setOption` 中。
-4. 数据大屏场景使用 `ReFlicker` 组件实现闪烁效果。
-
-## 工作流
-
-### BPMN 流程设计器
-
-项目集成 `bpmn-js` 用于流程设计，使用方式参考 `src/views/workflow/` 下的示例页面。
-
-### jsplumb 关系图
-
-用于可视化连线配置场景（如审批流程配置），参考 `src/components/` 下的封装组件。
-
-## 常见反例
-
-- 大数据量表格使用 `el-table` 而不是 `vxe-table`（性能问题）。
-- 树形数据不使用 `handleTree` 转换，手动递归。
-- 图表实例不在组件卸载时销毁，导致内存泄漏。
-- 操作列超过 3 个按钮不使用 `ReTableOperate` 的 `max` 属性折叠。
-- 选择器不设置 `placeholder`。

package/references/build-optim.md

@@ -1,282 +0,0 @@
----
-skill: build-optim
-description: 规范 Vite 构建配置、代码分割策略、性能优化手段和开发工具链（ESLint、Stylelint、Commitlint）。在修改构建配置或优化工具链时调用。
-scope: project
-tags: [vue3, vite, build, optimization, eslint, stylelint, commitlint, husky, performance]
----
-
-# 构建优化与工程化配置
-
-## Vite 构建配置
-
-### 核心配置
-
-```typescript
-// vite.config.ts
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
-import UnoCSS from "unocss/vite";
-import { resolve } from "path";
-
-export default defineConfig({
-  plugins: [
-    vue(),
-    UnoCSS(),
-    // 自动导入：Element Plus / Vant 组件按需引入
-    AutoImport({
-      imports: ["vue", "vue-router", "pinia"],
-      dts: "src/auto-imports.d.ts",
-    }),
-    Components({
-      resolvers: [
-        ElementPlusResolver(),
-        VantResolver(),
-      ],
-      dts: "src/components.d.ts",
-    }),
-  ],
-
-  resolve: {
-    alias: {
-      "@": resolve(__dirname, "src"),
-    },
-  },
-
-  build: {
-    target: "es2020",
-    minify: "oxc",
-    sourcemap: false,
-
-    rollupOptions: {
-      output: {
-        // 手动分包
-        manualChunks: {
-          "vue-vendor": ["vue", "vue-router", "pinia"],
-          "ui-vendor": ["element-plus"],
-          "chart-vendor": ["echarts"],
-        },
-        // 产物目录结构
-        chunkFileNames: "assets/js/[name]-[hash].js",
-        entryFileNames: "assets/js/[name]-[hash].js",
-        assetFileNames: "assets/[ext]/[name]-[hash].[ext]",
-      },
-    },
-
-    // 代码分割阈值
-    chunkSizeWarningLimit: 1000,
-  },
-
-  // 开发服务器
-  server: {
-    port: 8848,
-    host: true,
-    proxy: {
-      "/api": {
-        target: "http://localhost:8080",
-        changeOrigin: true,
-      },
-    },
-  },
-});
-```
-
-### 构建约定
-
-1. 使用 Vite 8.x（基于 Rolldown 构建引擎），不要使用 Webpack 相关配置。
-2. `manualChunks` 必须将 Vue 生态、UI 库、图表库分开打包。
-3. 压缩使用 `oxc`（Oxc 编译器），不使用 terser。
-4. 生产环境关闭 `sourcemap`。
-5. 静态资源按类型分目录输出（js/css/img/font）。
-6. 单个 chunk 超过 1000KB 时发出警告。
-
-## 代码分割策略
-
-### 路由级懒加载
-
-所有页面组件必须使用动态 `import()` 懒加载：
-
-```typescript
-// 正确
-component: () => import("@/views/system/user/index.vue")
-
-// 错误（会导致首屏加载全部页面）
-component: SystemUser
-```
-
-### 大型库按需引入
-
-```typescript
-// ECharts 按需引入
-import * as echarts from "echarts/core";
-import { BarChart, LineChart, PieChart } from "echarts/charts";
-import { GridComponent, TooltipComponent, TitleComponent } from "echarts/components";
-import { CanvasRenderer } from "echarts/renderers";
-
-echarts.use([
-  BarChart, LineChart, PieChart,
-  GridComponent, TooltipComponent, TitleComponent,
-  CanvasRenderer,
-]);
-
-// 或者使用完整引入（仅在确实需要全部图表类型时）
-// import * as echarts from "echarts";
-```
-
-### 分包建议
-
-| 分包名 | 包含内容 | 预估大小 |
-|--------|---------|---------|
-| vue-vendor | vue, vue-router, pinia | ~150KB |
-| ui-vendor | element-plus | ~300KB（按需引入后更小） |
-| chart-vendor | echarts | ~400KB（按需引入后更小） |
-| editor-vendor | wangeditor | ~200KB |
-| workflow-vendor | bpmn-js | ~500KB |
-
-## UnoCSS 配置
-
-```typescript
-// uno.config.ts
-import { defineConfig, presetWind3, presetAttributify, presetRemToPx } from "unocss";
-
-export default defineConfig({
-  presets: [
-    presetWind3(),        // Tailwind Wind 兼容
-    presetAttributify(),  // 属性化模式
-    presetRemToPx(),      // rem 转 px（适配移动端）
-  ],
-  shortcuts: {
-    "flex-center": "flex items-center justify-center",
-    "flex-between": "flex items-center justify-between",
-    "card-base": "rounded-lg bg-white p-4 shadow-sm",
-  },
-  safelist: [
-    // 动态类名需要加入 safelist
-    "text-red-500", "text-green-500", "text-blue-500",
-  ],
-});
-```
-
-## 代码质量工具链
-
-### 工具分工
-
-| 工具 | 职责 | 配置文件 |
-|------|------|---------|
-| oxlint | 高速 lint 检查（替代部分 ESLint 规则） | `oxlintrc.json` |
-| ESLint | 代码规范（@antfu/eslint-config） | `eslint.config.ts` |
-| Stylelint | CSS/SCSS 规范 | `stylelint.config.js` |
-| Prettier | 代码格式化 | `prettier.config.js` |
-| Husky | Git Hooks 管理 | `.husky/` |
-| Commitlint | 提交信息规范 | `commitlint.config.js` |
-
-### ESLint 配置
-
-```typescript
-// eslint.config.ts
-import antfu from "@antfu/eslint-config";
-
-export default antfu({
-  unocss: true,
-  vue: true,
-  typescript: true,
-  rules: {
-    "no-console": "warn",
-    "no-debugger": "error",
-    "vue/no-v-html": "off",
-    "@typescript-eslint/no-explicit-any": "warn",
-  },
-});
-```
-
-### Stylelint 配置
-
-```javascript
-// stylelint.config.js
-export default {
-  extends: [
-    "stylelint-config-standard-scss",
-    "stylelint-config-recess-order",
-  ],
-  rules: {
-    "selector-class-pattern": null,  // 允许 BEM / kebab-case
-    "no-descending-specificity": null,
-    "scss/at-mixin-pattern": null,
-  },
-};
-```
-
-### Commitlint 规范
-
-```javascript
-// commitlint.config.js
-export default {
-  extends: ["@commitlint/config-conventional"],
-  rules: {
-    "type-enum": [2, "always", [
-      "feat",     // 新功能
-      "fix",      // 修复
-      "docs",     // 文档
-      "style",    // 格式
-      "refactor", // 重构
-      "perf",     // 性能
-      "test",     // 测试
-      "chore",    // 构建/工具
-      "revert",   // 回退
-    ]],
-    "subject-case": [0],
-    "subject-max-length": [2, "always", 100],
-  },
-};
-```
-
-### Husky Git Hooks
-
-```bash
-# .husky/pre-commit
-npx oxlint --fix
-npx lint-staged
-
-# .husky/commit-msg
-npx commitlint --edit "$1"
-```
-
-### lint-staged 配置
-
-```json
-// package.json
-{
-  "lint-staged": {
-    "*.{vue,ts,tsx,js,jsx}": ["eslint --fix"],
-    "*.{css,scss,vue}": ["stylelint --fix"],
-    "*.{vue,ts,tsx,js,jsx,css,scss,json,md}": ["prettier --write"]
-  }
-}
-```
-
-### 工具链约定
-
-1. oxlint 负责高速检查，ESLint 负责深度规范，两者互补不冲突。
-2. 提交前自动运行 `oxlint --fix` + `lint-staged`。
-3. 提交信息必须遵循 Conventional Commits 格式：`type(scope): description`。
-4. 不要在代码中使用 `// eslint-disable`，除非有充分理由并附注释说明。
-5. Stylelint 检查 SCSS 和 `<style>` 块中的样式。
-
-## 性能优化清单
-
-1. 路由懒加载：所有页面组件使用 `() => import()`。
-2. 组件按需引入：Element Plus / Vant 通过 `unplugin-vue-components` 自动导入。
-3. 图片优化：使用 `van-image` 的 `lazy-load` 属性，大屏图片使用 WebP 格式。
-4. 虚拟滚动：超过 1000 行的列表使用 `vxe-table` 的虚拟滚动。
-5. 请求去重：http 封装内置请求去重，相同请求自动取消前一个。
-6. 组件缓存：使用 `<keep-alive>` 缓存频繁切换的页面组件。
-7. 第三方库按需引入：ECharts、lodash 等只引入使用到的模块。
-8. 预加载：关键资源使用 `<link rel="preload">`，非关键资源使用 `<link rel="prefetch">`。
-
-## 常见反例
-
-- 页面组件不使用懒加载，直接 `import` 静态引入。
-- ECharts 完整引入而不按需导入（增加 400KB+ 体积）。
-- 构建配置中使用 `terser` 而不是 `oxc`（Vite 8 推荐 Oxc）。
-- 没有配置 `manualChunks`，所有依赖打成一个巨大 chunk。
-- 跳过 Git Hooks 直接提交代码（`--no-verify`）。
-- 在代码中大量使用 `eslint-disable` 注释。