@qilitt-mickey/vue3-temp-skill 1.1.34 → 1.1.35

package/references/crud-pages.md

@@ -1,5 +1,5 @@
 ---
-skill: crud-pages
+name: crud-pages
 description: 查询列表页、表单页、标准 CRUD。含 useTableSearch、列表标准样板、表单约定。
 scope: project
 tags: [vue3, crud, list, form, detail, table, useTableSearch, page, layout, 批量, 排序, 批量操作]
@@ -249,249 +249,249 @@ function handleSizeChange(size: number) {
 </template>
 ```
 
-补充：`ReTableOperate` 用 `:list`；`defineOptions.name` === 路由 `name`；`svgLoading` 来自 `useApp()`；列表定高走壳层令牌 + `vts-page-card`。
-
-## 列表设计模式样板（设计 Skill 产出存在时使用）
-
-> **触发条件**：存在 `design-handoff/v1` JSON（含 `structureRequirements` + `pageStructure` 段）、用户指定设计规范、或命中 `design-system` 模块且设计 Skill 产出可用。
->
-> **1:1 还原要求**：页面区域结构必须按 JSON `structureRequirements.pageRegions` 实现，框架壳层按 `structureRequirements.frameworkShell` 实现。详见设计 Skill 的 `project-implementation-protocol.md`。
->
-> **与出厂模式的区别**：出厂模式（上文 L1-L9）直接堆 `el-card` + 查询区 + 表格，无页面标题区。设计模式按 JSON `pageStructure` 区域拆分，包含完整的页面标题区、筛选区容器、操作栏、表格区。
->
-> **结构变化**（以 JSON `structureRequirements.pageRegions` 为准，下方为默认区域）：
-> - 新增 `.vts-page-header`（标题 + 描述 + 标题区操作按钮）— 对应 JSON `pageStructure.regions.header`
-> - 查询区从 `bg-bg_color p-5` 升级为 `.vts-filter-area`（有容器感 + 分隔线）— 对应 `pageStructure.regions.filter`
-> - 表格区外包 `.vts-table-area`（有圆角边框包裹）— 对应 `pageStructure.regions.table`
-> - 主操作按钮（新增/导入）从 `ReTableBar #buttons` 移到 `.vts-page-header__actions`
-> - 若 JSON 指定额外区域（如统计区、页签切换区），按 `pageStructure.regions` 顺序在 `otherRef` 位或独立区域中实现
-
-| # | 必须 |
-|---|------|
-| D1 | `el-card` + `class="vts-page-card"` + `ref="content"`（同 L1） |
-| D2 | `.vts-page-header`：标题 18px 加粗 + 描述 13px tertiary + 右侧操作按钮（新增/导入） |
-| D3 | `.vts-filter-area`：筛选区容器（独立背景 + 圆角 + 底部分隔线） |
-| D4 | `.vts-action-bar`：表格上方操作栏（批量删除等 + 右侧刷新/列设置） |
-| D5 | `.vts-table-area`：表格区包裹（圆角 + 边框） |
-| D6 | 表头：品牌色浅底 + 字重 600 + 底部强调线（由 `element-plus.scss` 全局提供） |
-| D7 | 行 hover：品牌色极浅底 + 过渡（由 `element-plus.scss` 全局提供） |
-| D8 | 其余同 L4-L9（ReGrid / ReTableBar / RePagination / ReTableOperate） |
-
-```vue
-<script setup lang="ts">
-import type { OperateButton } from "@/components/ReTableOperate";
-import type { Customer, CustomerQuery } from "@/api/customer";
-import { getCustomerList } from "@/api/customer";
-import { ReGrid } from "@/components/ReGrid";
-import { ReGridItem } from "@/components/ReGridItem";
-import { RePagination } from "@/components/RePagination";
-import { ReTableBar } from "@/components/ReTableBar";
-import { ReTableOperate, resolveOperateColumnWidth } from "@/components/ReTableOperate";
-import { useApp } from "@/hooks/useApp";
-import { useTableSearch } from "@/hooks/useTableSearch";
-import { message } from "@/utils/message";
-
-defineOptions({ name: "CustomerList" });
-
-const { svgLoading } = useApp();
-const formQuery = reactive<CustomerQuery>({ keyword: "", status: undefined });
-
-const {
-  content,
-  otherRef,
-  tableHeight,
-  paginationRef,
-  loading,
-  formRef,
-  multipleTableRef,
-  pagination,
-  onSearch,
-  tableData,
-  gridRef,
-  showCollapse,
-  collapsed,
-  collapsedToggle,
-  upBold,
-  downBold,
-  reset,
-} = useTableSearch(
-  formQuery,
-  getCustomerList,
-  `${import.meta.env.VITE_API_BASE_URL}/console/customer/list`,
-);
-
-const tableList = computed(() => tableData.value.tableList as Customer[]);
-
-const operateLimit = 3;
-
-const operateButtons: OperateButton[] = [
-  {
-    label: $t("删除"),
-    type: "danger",
-    icon: "i-ep:delete",
-    onClick: (row) => handleDelete(row as Customer),
-  },
-];
-
-onMounted(() => onSearch());
-
-function handleDelete(row: Customer) {
-  message($t("删除成功"), { type: "success" });
-  onSearch();
-}
-
-function handleCurrentChange(cur: number) {
-  pagination.currentPage = cur;
-  onSearch();
-}
-
-function handleSizeChange(size: number) {
-  pagination.pageSize = size;
-  onSearch();
-}
-</script>
-
-<template>
-  <div>
-    <el-card
-      ref="content"
-      class="vts-page-card"
-      shadow="never"
-    >
-      <!-- D2: 页面标题区 -->
-      <div class="vts-page-header">
-        <div class="vts-page-header__info">
-          <span class="vts-page-header__title">{{ $t("客户列表") }}</span>
-          <span class="vts-page-header__desc">{{ $t("管理客户的售价、类型与库存信息") }}</span>
-        </div>
-        <div class="vts-page-header__actions">
-          <el-button
-            type="primary"
-            v-auth="['admin']"
-            @click="handleAdd"
-          >
-            {{ $t("新增") }}
-          </el-button>
-          <el-button v-auth="['admin']">{{ $t("导入") }}</el-button>
-        </div>
-      </div>
-
-      <!-- D3: 筛选区容器 -->
-      <div class="vts-filter-area">
-        <el-form
-          ref="formRef"
-          :inline="true"
-          :model="formQuery"
-        >
-          <ReGrid
-            ref="gridRef"
-            :collapsed="collapsed"
-            :gap="[0, 20]"
-            :cols="{ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }"
-            style="max-height: 300px; overflow-y: auto;"
-            @should-show-collapse="(val) => (showCollapse = val)"
-          >
-            <ReGridItem index="0">
-              <el-form-item :label="$t('关键词')" prop="keyword" class="w-[100%] !mr-0">
-                <el-input v-model="formQuery.keyword" clearable :placeholder="$t('请输入')" />
-              </el-form-item>
-            </ReGridItem>
-            <ReGridItem index="1">
-              <el-form-item :label="$t('状态')" prop="status" class="w-[100%] !mr-0">
-                <el-select v-model="formQuery.status" clearable :placeholder="$t('请选择')">
-                  <el-option :label="$t('启用')" :value="1" />
-                  <el-option :label="$t('禁用')" :value="0" />
-                </el-select>
-              </el-form-item>
-            </ReGridItem>
-            <ReGridItem suffix>
-              <div class="flex flex-end">
-                <el-button
-                  type="primary"
-                  :loading="loading"
-                  @click="pagination.currentPage = 1; pagination.pageSize = 10; onSearch()"
-                >
-                  {{ $t("查询") }}
-                </el-button>
-                <el-button @click="reset">{{ $t("重置") }}</el-button>
-                <el-button
-                  v-if="showCollapse"
-                  type="primary"
-                  link
-                  class="!font-size-12"
-                  @click="collapsedToggle"
-                >
-                  {{ collapsed ? $t("展开") : $t("收起") }}
-                  <el-icon class="el-icon--right">
-                    <component :is="collapsed ? downBold : upBold" />
-                  </el-icon>
-                </el-button>
-              </div>
-            </ReGridItem>
-          </ReGrid>
-        </el-form>
-      </div>
-
-      <div ref="otherRef">
-        <!-- 统计/页签等额外模块；无则删除整段 -->
-      </div>
-
-      <!-- D4+D5: 操作栏 + 表格区 -->
-      <div class="vts-table-area">
-        <ReTableBar :columns="[]" @refresh="onSearch">
-          <template #title>
-            <span class="truncate font-size-16 font-bold">{{ $t("展示列表") }}</span>
-          </template>
-          <template #buttons>
-            <el-button type="danger" v-auth="['admin']">{{ $t("批量删除") }}</el-button>
-          </template>
-          <template #default="{ size }">
-            <div class="vl-parent">
-              <el-table
-                ref="multipleTableRef"
-                v-loading.lock="loading"
-                :element-loading-text="$t('加载中')"
-                :element-loading-spinner="svgLoading"
-                element-loading-svg-view-box="0, 0, 20, 20"
-                :style="{ height: `${tableHeight}px` }"
-                :size="size"
-                :data="tableList"
-                row-key="id"
-              >
-                <el-table-column prop="code" :label="$t('编号')" min-width="120" />
-                <el-table-column prop="name" :label="$t('名称')" min-width="140" />
-                <el-table-column
-                  :label="$t('操作')"
-                  :width="resolveOperateColumnWidth({ list: operateButtons, limit: operateLimit, size })"
-                  fixed="right"
-                >
-                  <template #default="{ row, $index }">
-                    <ReTableOperate
-                      :list="operateButtons"
-                      :row="row"
-                      :index="$index"
-                      :limit="operateLimit"
-                      :size="size"
-                    />
-                  </template>
-                </el-table-column>
-              </el-table>
-              <RePagination
-                ref="paginationRef"
-                :size="size"
-                :pagination="pagination"
-                @handle-current-change="handleCurrentChange"
-                @handle-size-change="handleSizeChange"
-              />
-            </div>
-          </template>
-        </ReTableBar>
-      </div>
-    </el-card>
-  </div>
-</template>
-```
-
+补充：`ReTableOperate` 用 `:list`；`defineOptions.name` === 路由 `name`；`svgLoading` 来自 `useApp()`；列表定高走壳层令牌 + `vts-page-card`。
+
+## 列表设计模式样板（设计 Skill 产出存在时使用）
+
+> **触发条件**：存在 `design-handoff/v1` JSON（含 `structureRequirements` + `pageStructure` 段）、用户指定设计规范、或命中 `design-system` 模块且设计 Skill 产出可用。
+>
+> **1:1 还原要求**：页面区域结构必须按 JSON `structureRequirements.pageRegions` 实现，框架壳层按 `structureRequirements.frameworkShell` 实现。详见设计 Skill 的 `project-implementation-protocol.md`。
+>
+> **与出厂模式的区别**：出厂模式（上文 L1-L9）直接堆 `el-card` + 查询区 + 表格，无页面标题区。设计模式按 JSON `pageStructure` 区域拆分，包含完整的页面标题区、筛选区容器、操作栏、表格区。
+>
+> **结构变化**（以 JSON `structureRequirements.pageRegions` 为准，下方为默认区域）：
+> - 新增 `.vts-page-header`（标题 + 描述 + 标题区操作按钮）— 对应 JSON `pageStructure.regions.header`
+> - 查询区从 `bg-bg_color p-5` 升级为 `.vts-filter-area`（有容器感 + 分隔线）— 对应 `pageStructure.regions.filter`
+> - 表格区外包 `.vts-table-area`（有圆角边框包裹）— 对应 `pageStructure.regions.table`
+> - 主操作按钮（新增/导入）从 `ReTableBar #buttons` 移到 `.vts-page-header__actions`
+> - 若 JSON 指定额外区域（如统计区、页签切换区），按 `pageStructure.regions` 顺序在 `otherRef` 位或独立区域中实现
+
+| # | 必须 |
+|---|------|
+| D1 | `el-card` + `class="vts-page-card"` + `ref="content"`（同 L1） |
+| D2 | `.vts-page-header`：标题 18px 加粗 + 描述 13px tertiary + 右侧操作按钮（新增/导入） |
+| D3 | `.vts-filter-area`：筛选区容器（独立背景 + 圆角 + 底部分隔线） |
+| D4 | `.vts-action-bar`：表格上方操作栏（批量删除等 + 右侧刷新/列设置） |
+| D5 | `.vts-table-area`：表格区包裹（圆角 + 边框） |
+| D6 | 表头：品牌色浅底 + 字重 600 + 底部强调线（由 `element-plus.scss` 全局提供） |
+| D7 | 行 hover：品牌色极浅底 + 过渡（由 `element-plus.scss` 全局提供） |
+| D8 | 其余同 L4-L9（ReGrid / ReTableBar / RePagination / ReTableOperate） |
+
+```vue
+<script setup lang="ts">
+import type { OperateButton } from "@/components/ReTableOperate";
+import type { Customer, CustomerQuery } from "@/api/customer";
+import { getCustomerList } from "@/api/customer";
+import { ReGrid } from "@/components/ReGrid";
+import { ReGridItem } from "@/components/ReGridItem";
+import { RePagination } from "@/components/RePagination";
+import { ReTableBar } from "@/components/ReTableBar";
+import { ReTableOperate, resolveOperateColumnWidth } from "@/components/ReTableOperate";
+import { useApp } from "@/hooks/useApp";
+import { useTableSearch } from "@/hooks/useTableSearch";
+import { message } from "@/utils/message";
+
+defineOptions({ name: "CustomerList" });
+
+const { svgLoading } = useApp();
+const formQuery = reactive<CustomerQuery>({ keyword: "", status: undefined });
+
+const {
+  content,
+  otherRef,
+  tableHeight,
+  paginationRef,
+  loading,
+  formRef,
+  multipleTableRef,
+  pagination,
+  onSearch,
+  tableData,
+  gridRef,
+  showCollapse,
+  collapsed,
+  collapsedToggle,
+  upBold,
+  downBold,
+  reset,
+} = useTableSearch(
+  formQuery,
+  getCustomerList,
+  `${import.meta.env.VITE_API_BASE_URL}/console/customer/list`,
+);
+
+const tableList = computed(() => tableData.value.tableList as Customer[]);
+
+const operateLimit = 3;
+
+const operateButtons: OperateButton[] = [
+  {
+    label: $t("删除"),
+    type: "danger",
+    icon: "i-ep:delete",
+    onClick: (row) => handleDelete(row as Customer),
+  },
+];
+
+onMounted(() => onSearch());
+
+function handleDelete(row: Customer) {
+  message($t("删除成功"), { type: "success" });
+  onSearch();
+}
+
+function handleCurrentChange(cur: number) {
+  pagination.currentPage = cur;
+  onSearch();
+}
+
+function handleSizeChange(size: number) {
+  pagination.pageSize = size;
+  onSearch();
+}
+</script>
+
+<template>
+  <div>
+    <el-card
+      ref="content"
+      class="vts-page-card"
+      shadow="never"
+    >
+      <!-- D2: 页面标题区 -->
+      <div class="vts-page-header">
+        <div class="vts-page-header__info">
+          <span class="vts-page-header__title">{{ $t("客户列表") }}</span>
+          <span class="vts-page-header__desc">{{ $t("管理客户的售价、类型与库存信息") }}</span>
+        </div>
+        <div class="vts-page-header__actions">
+          <el-button
+            type="primary"
+            v-auth="['admin']"
+            @click="handleAdd"
+          >
+            {{ $t("新增") }}
+          </el-button>
+          <el-button v-auth="['admin']">{{ $t("导入") }}</el-button>
+        </div>
+      </div>
+
+      <!-- D3: 筛选区容器 -->
+      <div class="vts-filter-area">
+        <el-form
+          ref="formRef"
+          :inline="true"
+          :model="formQuery"
+        >
+          <ReGrid
+            ref="gridRef"
+            :collapsed="collapsed"
+            :gap="[0, 20]"
+            :cols="{ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }"
+            style="max-height: 300px; overflow-y: auto;"
+            @should-show-collapse="(val) => (showCollapse = val)"
+          >
+            <ReGridItem index="0">
+              <el-form-item :label="$t('关键词')" prop="keyword" class="w-[100%] !mr-0">
+                <el-input v-model="formQuery.keyword" clearable :placeholder="$t('请输入')" />
+              </el-form-item>
+            </ReGridItem>
+            <ReGridItem index="1">
+              <el-form-item :label="$t('状态')" prop="status" class="w-[100%] !mr-0">
+                <el-select v-model="formQuery.status" clearable :placeholder="$t('请选择')">
+                  <el-option :label="$t('启用')" :value="1" />
+                  <el-option :label="$t('禁用')" :value="0" />
+                </el-select>
+              </el-form-item>
+            </ReGridItem>
+            <ReGridItem suffix>
+              <div class="flex flex-end">
+                <el-button
+                  type="primary"
+                  :loading="loading"
+                  @click="pagination.currentPage = 1; pagination.pageSize = 10; onSearch()"
+                >
+                  {{ $t("查询") }}
+                </el-button>
+                <el-button @click="reset">{{ $t("重置") }}</el-button>
+                <el-button
+                  v-if="showCollapse"
+                  type="primary"
+                  link
+                  class="!font-size-12"
+                  @click="collapsedToggle"
+                >
+                  {{ collapsed ? $t("展开") : $t("收起") }}
+                  <el-icon class="el-icon--right">
+                    <component :is="collapsed ? downBold : upBold" />
+                  </el-icon>
+                </el-button>
+              </div>
+            </ReGridItem>
+          </ReGrid>
+        </el-form>
+      </div>
+
+      <div ref="otherRef">
+        <!-- 统计/页签等额外模块；无则删除整段 -->
+      </div>
+
+      <!-- D4+D5: 操作栏 + 表格区 -->
+      <div class="vts-table-area">
+        <ReTableBar :columns="[]" @refresh="onSearch">
+          <template #title>
+            <span class="truncate font-size-16 font-bold">{{ $t("展示列表") }}</span>
+          </template>
+          <template #buttons>
+            <el-button type="danger" v-auth="['admin']">{{ $t("批量删除") }}</el-button>
+          </template>
+          <template #default="{ size }">
+            <div class="vl-parent">
+              <el-table
+                ref="multipleTableRef"
+                v-loading.lock="loading"
+                :element-loading-text="$t('加载中')"
+                :element-loading-spinner="svgLoading"
+                element-loading-svg-view-box="0, 0, 20, 20"
+                :style="{ height: `${tableHeight}px` }"
+                :size="size"
+                :data="tableList"
+                row-key="id"
+              >
+                <el-table-column prop="code" :label="$t('编号')" min-width="120" />
+                <el-table-column prop="name" :label="$t('名称')" min-width="140" />
+                <el-table-column
+                  :label="$t('操作')"
+                  :width="resolveOperateColumnWidth({ list: operateButtons, limit: operateLimit, size })"
+                  fixed="right"
+                >
+                  <template #default="{ row, $index }">
+                    <ReTableOperate
+                      :list="operateButtons"
+                      :row="row"
+                      :index="$index"
+                      :limit="operateLimit"
+                      :size="size"
+                    />
+                  </template>
+                </el-table-column>
+              </el-table>
+              <RePagination
+                ref="paginationRef"
+                :size="size"
+                :pagination="pagination"
+                @handle-current-change="handleCurrentChange"
+                @handle-size-change="handleSizeChange"
+              />
+            </div>
+          </template>
+        </ReTableBar>
+      </div>
+    </el-card>
+  </div>
+</template>
+```
+
 **设计模式与出厂模式的关键差异**：
 
 | 差异点 | 出厂模式 | 设计模式 | JSON 来源 |

package/references/data-compare.md

@@ -1,5 +1,5 @@
 ---
-skill: data-compare
+name: data-compare
 description: 编辑页数据变更对比：v-compare、compareStore、ChangeSummaryService
 scope: project
 tags: [v-compare, 变更汇总, 变更对比, 数据对比, 字段对比, 高亮变更]

package/references/data-mapping.md

@@ -1,5 +1,5 @@
 ---
-skill: data-mapping
+name: data-mapping
 description: jsplumb 数据映射页面结构和连线初始化
 scope: project
 tags: [jsplumb, 字段映射, 连线映射, 数据映射]

package/references/data-screen.md

@@ -1,5 +1,5 @@
 ---
-skill: data-screen
+name: data-screen
 description: 大屏等比缩放、1920x1080 设计稿、transform: scale()、grid-layout-plus
 scope: project
 tags: [大屏, dataScreen, 数据大屏, 看板, 数据看板, 仪表盘, 全屏可视化]

package/references/data-writeback.md

@@ -1,5 +1,5 @@
 ---
-skill: data-writeback
+name: data-writeback
 description: 编辑回显用 Object.assign(formData, res.data) 避免破坏响应式
 scope: project
 tags: [回显, 回填, 回写, useFormCheck, Object.assign, 编辑数据]