@agile-team/wl-skills-ui 1.6.2

package/skills/vendors/c-components/SKILL.md

@@ -0,0 +1,36 @@
+---
+description: |
+  C_/c_ 前缀的项目自封装组件（团队约定的未来主流命名）。Layer L2，优先级 #3。
+  目前是占位 + 探测引导，待团队约定的具体 C_* 组件落地后填充细节。
+applyTo: "**/*.vue"
+---
+
+# Skill: vendors/c-components
+
+> Layer L2 · Vendor priority **#3** · 团队未来主流命名约定
+
+## Detect
+
+| 模式 | 示例 |
+|---|---|
+| PascalCase 标签 | `<C_Form>` / `<C_Table>` / `<C_DataPicker>` |
+| kebab-case 标签 | `<c-form>` / `<c-table>` / `<c-data-picker>` |
+| 类名 | `[class^='c-']` / `[class^='C_']` |
+| Import | `from '@/components/C*/'` / `from '@/business/c-*/'` |
+
+## Diagnose
+
+由于 C_* 属于团队约定的未来主流封装，识别到时优先按以下规则：
+- 检查内部是否调用了未对齐的 el-* 控件
+- 自行写的颜色硬编码 → 引导改用 token
+- 控件 size / 边距 / 圆角是否符合 element/_*.scss 规范
+
+## Repair
+
+A 类：补 size、补 empty-text、改 hex → token
+B 类：建议沉淀新的 `c-*` skill（拿到源码后）+ 在 `styles/vendors/_c-components.scss` 追加精确选择器
+
+## 扩展引导
+
+当出现新的 C_* 组件时，请把组件名称、典型 DOM 结构添加到本文件 + `_c-components.scss`，
+便于后续 AI 精确识别。

package/skills/vendors/custom-wrappers/SKILL.md

@@ -0,0 +1,45 @@
+---
+description: |
+  野路子自封装组件（src/components/XxxxXxxx 这类无规律前缀）的探测和兜底修复策略。
+  Layer L2，优先级 #4（兜底）。
+applyTo: "**/*.vue"
+---
+
+# Skill: vendors/custom-wrappers
+
+> Layer L2 · Vendor priority **#4**（兜底）
+
+## Detect
+
+无统一前缀，但满足以下任一即视为自封装：
+
+- 路径：`src/components/*.vue`（PascalCase 单文件）
+- Import：`from '@/components/XxxXxx'`
+- DOM 内部一定包含 `el-*` 元素（否则不属于本 skill）
+
+## 探测策略（AI 必读）
+
+由于没有命名规律，AI 应：
+1. 跟随 `<script setup>` 中的 `import` 找到组件源码
+2. 如能读到源码 → 按 **element-plus 规则**直接修复源码
+3. 如不能读到源码 → 走"化妆模式"：在 `styles/vendors/_custom-wrappers.scss` 追加包装类
+4. 输出"建议封装迁移到 C_/c_ 前缀"作为优化建议
+
+## Diagnose（典型问题）
+
+- 内部 `el-input` 没 `size="small"` → 但封装可能转发了 size prop，先确认源码
+- 内部 hex 颜色 → 应改 token
+- 内部布局魔法数 padding/margin → 建议改用 layouts/ 层 class
+
+## Repair
+
+### A 类（仅当能读到源码）
+- 同 element/* skill 的 A 类规则
+
+### B 类
+- 输出"建议把该组件改名为 C_*/c_* 前缀，纳入团队规范" 的修复建议
+- 在 `_custom-wrappers.scss` 注入 .{业务类名} 包装层覆盖
+
+## 与 C_/c_ 的迁移路径
+
+custom → 改名为 C_*/c_* → 进入 vendors/c-components 流程 → 拿到源码后从 L2 迁移到 L4 runtime

package/skills/vendors/jh-components/SKILL.md

@@ -0,0 +1,42 @@
+---
+description: |
+  jh-* 前缀的封装组件系列（jh-form / jh-table / jh-tree / jh-pagination / jh-drag-col 等）
+  的识别、诊断和修复规则。Layer L2，优先级 #2（次于 Base*）。
+applyTo: "**/*.vue"
+---
+
+# Skill: vendors/jh-components
+
+> Layer L2 · Vendor priority **#2**
+
+## Detect（识别）
+
+| 子组件 | 标签 | 关键类名 |
+|---|---|---|
+| jh-table | `<jh-table>` | `.jh-table` |
+| jh-form | `<jh-form>` | `.jh-form` |
+| jh-tree | `<jh-tree>` | `.jh-tree` / `.base-tree` |
+| jh-pagination | `<jh-pagination>` | `.jh-pagination` |
+| jh-drag-col | `<jh-drag-col>` | `.drag-col-container` / `.drag-left` / `.slider-col` |
+
+## Diagnose
+
+- ❌ 自行给 `.jh-tree` 写颜色覆盖（应用全局 `vendors/_jh-tree.scss`）
+- ❌ jh-drag-col 内自定义 padding 破坏拖拽条对齐
+- ❌ jh-pagination 未对齐到右侧（同 R011）
+- ❌ jh-form 内不用 `size="small"` 控件（同 R006）
+
+## Repair
+
+### A 类
+- 控件 size 缺失 → 补 `size="small"`
+- 表单内日期选择器无宽度 → `style="width:100%"`（R007）
+
+### B 类
+- 直接全局覆盖 `.jh-*` → 改为引入 `wk-skills-ui/styles` 由 vendors 层处理
+
+## 全局样式来源
+
+- `styles/vendors/_jh-tree.scss`
+- `styles/vendors/_jh-pagination.scss`
+- `styles/vendors/_jh-drag-col.scss`

package/skills/vendors/unknown-wrapper/SKILL.md

@@ -0,0 +1,44 @@
+---
+description: |
+  陌生封装组件的通用探测策略 — AI 在无 skill 匹配时的兜底逻辑。
+  通过 DOM 结构推断对应的 element-plus 控件，给出可解释的诊断和保守修复方案。
+applyTo: "**/*.vue"
+---
+
+# Skill: vendors/unknown-wrapper
+
+> 兜底探测器 — 当组件不属于已知任何 vendor 时启用
+
+## 工作方式
+
+1. **遍历 import**：识别所有非 element-plus 的组件标签
+2. **匹配 vendor skill**：
+   - Base* → vendors/base-table（如是表格）/ vendors/base-components
+   - jh-* → vendors/jh-components
+   - C_*/c_* → vendors/c-components
+   - 其他 → vendors/custom-wrappers
+3. **若仍未识别**：
+   - 输出"未识别的封装组件 `<XxxYy>`"
+   - 给出"请在 `skills/vendors/_registry.md` 追加该组件的识别规则"建议
+   - 不修改源码，仅输出诊断报告
+
+## DOM 推断表（兜底）
+
+| 内部 DOM 包含 | 推断为 |
+|---|---|
+| `.el-table` | 表格类 → 应用 R001/R002/R014 |
+| `.el-form` | 表单类 → 应用 R006/R008 |
+| `.el-dialog` | 弹窗类 → 应用 R011/R015 |
+| `.el-pagination` | 分页类 |
+| `.ag-root-wrapper` | AG Grid → 走 vendors/ag-grid |
+
+## 输出格式
+
+```
+[unknown-wrapper] 检测到未识别封装：<XxxYyy>（src/views/foo.vue:42）
+  推断类型：表格类（内部含 .el-table）
+  应用规则：R001, R002, R014
+  化妆建议：在 styles/vendors/_custom-wrappers.scss 追加：
+    .xxx-yyy { /* 复用 vendors/_base-table.scss 的覆盖 */ }
+  扩展建议：把该组件信息追加到 skills/vendors/c-components/SKILL.md（若团队约定改前缀）
+```

package/standards/engineering/01-import-order.md

@@ -0,0 +1,46 @@
+# 工程规范 01 — Import 顺序
+
+## 规则
+
+按以下顺序组织 import，组间空一行：
+
+```
+1. Node.js 内置模块（node:fs 等）
+2. 第三方依赖（vue、element-plus、lodash 等）
+3. 内部别名路径（@/、@agile-team/）
+4. 相对路径（../、./）
+5. 类型导入（import type ...）
+```
+
+## 示例
+
+```typescript
+// ✅ 正确
+import { ref, computed } from "vue";
+import { ElMessage } from "element-plus";
+
+import { usePageHook } from "@/hooks/page";
+import type { PageResult } from "@/types";
+
+import { renderOps, defineColumns } from "@agile-team/wk-skills-ui/runtime";
+
+import MyModal from "./MyModal.vue";
+import type { MyItem } from "./types";
+```
+
+```typescript
+// ❌ 错误：类型与值混用，无分组
+import MyModal from "./MyModal.vue";
+import { ref } from "vue";
+import type { MyItem } from "./types";
+import { usePageHook } from "@/hooks/page";
+```
+
+## ESLint 配置参考
+
+```json
+"import/order": ["error", {
+  "groups": ["builtin", "external", "internal", "parent", "sibling", "index", "type"],
+  "newlines-between": "always"
+}]
+```

package/standards/engineering/02-naming.md

@@ -0,0 +1,54 @@
+# 工程规范 02 — 命名规范
+
+## 文件命名
+
+| 类型       | 规则                                     | 示例                 |
+| ---------- | ---------------------------------------- | -------------------- |
+| Vue 组件   | PascalCase                               | `RiskList.vue`       |
+| 工具/hooks | camelCase                                | `usePageHook.ts`     |
+| 常量/枚举  | camelCase（文件名）+ UPPER_SNAKE（变量） | `statusMap.ts`       |
+| 样式       | kebab-case                               | `risk-list.scss`     |
+| 模板       | TPL-前缀 + UPPER_KEBAB                   | `TPL-FORM-DIALOG.md` |
+
+## 变量/函数命名
+
+```typescript
+// ✅ 状态映射：UPPER_SNAKE + _MAP 后缀
+const ENABLE_STATUS_MAP = { ... }
+
+// ✅ Render 函数：renderXxx
+const renderEnableStatus = (v) => renderTagNode(v, ENABLE_STATUS_MAP);
+
+// ✅ API 函数：动词 + 名词
+async function getRiskList(params: QueryParams) {}
+async function updateRiskStatus(id: string, status: string) {}
+
+// ✅ hooks：use 前缀
+const page = usePageHook({ apiFn: getRiskList, params: () => searchForm });
+
+// ❌ 禁止
+const status_map = {}          // 应用 camelCase 或 UPPER_SNAKE
+function GetRiskList() {}      // 大写开头的非组件函数
+const renderFlag = (v) => ...  // 不应叫 flag，应描述具体字段
+```
+
+## 组件 prop 命名
+
+```typescript
+// ✅ camelCase（JS 侧），HTML 中用 kebab-case
+defineProps<{ labelWidth: string; isReadonly: boolean }>();
+
+// template 中
+<MyComp :label-width="150" :is-readonly="true" />
+```
+
+## 接口/类型命名
+
+```typescript
+// ✅ 接口：I 前缀 可选，但 Type 后缀推荐
+interface RiskItem { ... }
+type SearchParams = { name: string; status: string };
+
+// ✅ 响应包装
+type PageResult<T> = { records: T[]; total: number; current: number; size: number };
+```

package/standards/engineering/03-scss-structure.md

@@ -0,0 +1,59 @@
+# 工程规范 03 — SCSS 文件结构
+
+## 项目级样式目录
+
+```
+src/
+  styles/
+    index.scss          # 全局入口：@use 所有模块
+    variables.scss      # 项目自定义变量（扩展 token）
+    mixins.scss         # 项目公共 mixin
+    components/         # 组件级样式（按需使用）
+      _risk.scss
+      _audit.scss
+    pages/              # 页面级样式（scoped 内可重写）
+```
+
+## 全局入口 (src/styles/index.scss)
+
+```scss
+// 1. wk-skills-ui 设计 token（必须在 index.html <link> 加载 design/tokens/base.css）
+
+// 2. wk-skills-ui 样式重置
+@use "@agile-team/wk-skills-ui/styles" as *;
+
+// 3. 项目自定义变量
+@use "./variables" as *;
+
+// 4. 项目公共 mixin
+@use "./mixins" as *;
+```
+
+## 规则
+
+1. **禁用 `@import`**（SCSS 已废弃）— 统一用 `@use` / `@forward`
+2. **颜色**必须用 CSS 变量或 token（R016/R017/R018），不写硬编码 hex
+3. **scoped 样式**中不写全局覆盖；全局覆盖统一在 `styles/components/` 中
+4. **BEM 命名**：`.block__element--modifier`
+5. 组件 `<style lang="scss" scoped>` 中只写该组件私有样式
+
+## 示例
+
+```scss
+// ✅ 正确
+.risk-card {
+  background: var(--el-bg-color);
+  border-radius: var(--el-border-radius-base);
+  color: var(--el-text-color-primary);
+
+  &__header { ... }
+  &__body   { ... }
+  &--active { border-color: var(--el-color-primary); }
+}
+
+// ❌ 禁止
+.risk-card {
+  background: #fff;           // 硬编码颜色
+  color: rgba(0, 0, 0, 0.85); // 硬编码
+}
+```

package/standards/ui/01-table.md

@@ -0,0 +1,111 @@
+# 规范 01：表格列（el-table-column / ag-grid）
+
+## 适用组件
+- `<el-table-column>` (Element Plus)
+- AG Grid 列定义（`defineColumns` + `COLUMN_AUTO_MAP`）
+
+---
+
+## 规则 R001：所有列必须居中对齐
+
+```vue
+<!-- ❌ 错误：缺少 align -->
+<el-table-column label="状态" prop="status" />
+
+<!-- ✅ 正确 -->
+<el-table-column label="状态" prop="status" align="center" />
+```
+
+**例外**：内容为长文本描述（如"备注"、"标准内容"）的列可使用 `align="left"`，但需显式标注，不可省略。
+
+---
+
+## 规则 R002：el-table 必须设置 empty-text
+
+```vue
+<!-- ❌ 错误：缺少 empty-text -->
+<el-table :data="list">
+
+<!-- ✅ 正确 -->
+<el-table :data="list" empty-text="暂无数据">
+```
+
+---
+
+## 规则 R004：操作列使用 renderOps / jh-op-btn
+
+操作列按钮**不得**直接使用 `<el-button>` 或裸文本，必须通过 `renderOps` 渲染：
+
+```typescript
+// ✅ AG Grid defineColumns 方式
+import { renderOps } from '@/components/ag-cell-renders'
+
+defineColumns([
+  // ...
+  {
+    field: 'ops',
+    headerName: '操作',
+    cellRenderer: (p) => renderOps(p, [
+      { label: '修改', type: 'primary', show: (row) => row.status === 1 },
+      { label: '作废', type: 'danger',  show: (row) => row.status === 1 },
+      { label: '删除', type: 'danger',  show: (row) => row.status === 0 },
+    ]),
+  },
+])
+```
+
+```vue
+<!-- ✅ el-table 方式 -->
+<el-table-column label="操作" align="center" width="120">
+  <template #default="{ row }">
+    <span class="jh-op-btn primary" @click="handleEdit(row)">修改</span>
+    <span class="jh-op-btn danger"  @click="handleVoid(row)" v-if="row.status === 1">作废</span>
+  </template>
+</el-table-column>
+```
+
+---
+
+## 规则 R009：选择列宽度标准
+
+| 列类型        | 宽度     |
+|-------------|----------|
+| 序号列 (index) | 60px    |
+| 多选列 (selection) | 55px |
+| 普通固定列   | 按内容估算，最小 80px |
+
+---
+
+## 状态列固定右侧 + 色块渲染
+
+```typescript
+// ✅ 状态映射 + 渲染函数（文件顶部定义）
+const STATUS_TAG_MAP: Record<string, { label: string; type: '' | 'success' | 'warning' | 'danger' | 'info' }> = {
+  '0': { label: '停用', type: 'danger' },
+  '1': { label: '启用', type: 'success' },
+}
+
+function renderStatusTag(val: string) {
+  const cfg = STATUS_TAG_MAP[val]
+  if (!cfg) return ''
+  return h(ElTag, { type: cfg.type }, { default: () => cfg.label })
+}
+```
+
+```typescript
+// ✅ defineColumns 中引用
+{ field: 'enableStatus', headerName: '启用状态', pinned: 'right', defaultSlot: renderStatusTag }
+```
+
+---
+
+## COLUMN_AUTO_MAP 自动配置
+
+`defineColumns` 会根据 `COLUMN_AUTO_MAP` 自动为以下字段设置标准格式：
+
+| field 包含关键字 | 自动效果 |
+|----------------|---------|
+| `checkNo`      | renderBadge 徽章渲染 |
+| `level`, `classify` | renderClassifyTag 分级渲染 |
+| `status`       | 提示需自定义 renderStatusTag |
+| `createTime`, `updateTime` | 宽度 160px |

package/standards/ui/02-button.md

@@ -0,0 +1,83 @@
+# 规范 02：按钮
+
+## 工具栏按钮（列表页顶部）
+
+### 顺序规则
+1. **新增/新增申请**类按钮永远排第一
+2. 其余按钮按照操作频次降序排列
+
+### 类型规则
+
+| 操作语义   | type        | plain  | 说明           |
+|----------|-------------|--------|----------------|
+| 新增/添加 | `primary`   | false  | 蓝色填充        |
+| 导入      | `primary`   | true   | 蓝色线框        |
+| 导出      | `success`   | true   | 绿色线框        |
+| 删除/作废 | `danger`    | false  | 红色填充（批量操作慎用）|
+| 审批/提交 | `primary`   | false  | 蓝色填充        |
+| 重置/取消 | `default`   | false  | 默认灰色        |
+
+```vue
+<!-- ✅ 工具栏按钮组 -->
+<el-button type="primary" @click="handleCreate">新增</el-button>
+<el-button type="primary" plain @click="handleImport">导入</el-button>
+<el-button type="success" plain @click="handleExport">导出</el-button>
+```
+
+---
+
+## 操作列按钮（表格行内）
+
+使用 `jh-op-btn` 类，**禁止** `<el-button>` 在行内使用：
+
+```vue
+<!-- ❌ 错误 -->
+<el-button type="text" @click="handleEdit(row)">编辑</el-button>
+
+<!-- ✅ 正确 -->
+<span class="jh-op-btn primary" @click="handleEdit(row)">修改</span>
+<span class="jh-op-btn danger"  @click="handleVoid(row)">作废</span>
+```
+
+### 按钮标签严格对应原型
+
+| 操作    | 正确标签 | 禁止替换为 |
+|--------|---------|----------|
+| 修改记录 | **修改** | ~~编辑~~ |
+| 软删除  | **作废** | ~~删除~~ |
+| 硬删除  | **删除** | ~~移除~~ |
+
+### 条件显示（不同状态不同按钮）
+
+```typescript
+// ✅ renderOps 中用 show 控制
+renderOps(p, [
+  { label: '修改', type: 'primary', show: (row) => row.status === 1 },
+  { label: '作废', type: 'danger',  show: (row) => row.status === 1 },
+  { label: '编辑', type: 'primary', show: (row) => row.status === 0 },
+  { label: '删除', type: 'danger',  show: (row) => row.status === 0 },
+])
+```
+
+---
+
+## 弹窗底部按钮（对话框）
+
+```vue
+<!-- ✅ 标准：取消在左，确认在右；footer 右对齐 -->
+<template #footer>
+  <div class="dialog-footer">
+    <el-button @click="handleClose">取 消</el-button>
+    <el-button type="primary" @click="handleConfirm">确 认</el-button>
+  </div>
+</template>
+```
+
+CSS 全局保证 footer 右对齐（已在 `dist/style-override.scss` 中定义）：
+```scss
+.el-dialog__footer .dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+```

package/standards/ui/03-form.md

@@ -0,0 +1,118 @@
+# 规范 03：表单（el-form）
+
+## 规则 R008：labelWidth 统一使用 150px
+
+中文标签最长 9 字（如"隐患排查内容及标准"），需要 150px 才不截断：
+
+```vue
+<!-- ❌ 错误：100px 会截断9字标签 -->
+<el-form :model="form" label-width="100px">
+
+<!-- ✅ 正确 -->
+<el-form :model="form" label-width="150px">
+```
+
+---
+
+## 规则 R006：el-input / el-select 必须加 size="small"
+
+系统统一使用 small 尺寸，与表格行高匹配：
+
+```vue
+<!-- ❌ 错误 -->
+<el-input v-model="form.name" />
+<el-select v-model="form.type">
+
+<!-- ✅ 正确 -->
+<el-input v-model="form.name" size="small" />
+<el-select v-model="form.type" size="small">
+```
+
+---
+
+## 规则 R007：el-date-picker 必须加 style="width:100%"
+
+date-picker 默认宽度固定，在 grid 布局中需撑满列宽：
+
+```vue
+<!-- ❌ 错误 -->
+<el-date-picker v-model="form.date" type="date" />
+
+<!-- ✅ 正确 -->
+<el-date-picker v-model="form.date" type="date" style="width:100%" />
+```
+
+---
+
+## 布局标准
+
+### 搜索区（列表页顶部）
+
+```vue
+<el-form :inline="true" :model="queryForm" size="small">
+  <el-form-item label="关键词">
+    <el-input v-model="queryForm.keyword" size="small" placeholder="请输入" />
+  </el-form-item>
+  <el-form-item label="状态">
+    <el-select v-model="queryForm.status" size="small" placeholder="请选择" clearable>
+      <el-option label="启用" :value="1" />
+      <el-option label="停用" :value="0" />
+    </el-select>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" size="small" @click="handleSearch">搜索</el-button>
+    <el-button size="small" @click="handleReset">重置</el-button>
+  </el-form-item>
+</el-form>
+```
+
+### 弹窗表单（新增/修改）
+
+```vue
+<el-form
+  ref="formRef"
+  :model="form"
+  :rules="rules"
+  label-width="150px"
+>
+  <el-row :gutter="20">
+    <el-col :span="12">
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="form.name" size="small" />
+      </el-form-item>
+    </el-col>
+    <el-col :span="12">
+      <el-form-item label="日期" prop="date">
+        <el-date-picker
+          v-model="form.date"
+          type="date"
+          style="width:100%"
+          size="small"
+        />
+      </el-form-item>
+    </el-col>
+  </el-row>
+</el-form>
+```
+
+---
+
+## 复杂表单判断
+
+| 条件 | 方案 |
+|-----|------|
+| 字段 ≤ 15，无子表 | 弹窗（`el-dialog`） |
+| 字段 > 15，或含多个子表 | 独立路由页（`/xxx-form`） |
+| Tab > 3 个 | 独立路由页 |
+
+---
+
+## 校验规则命名
+
+```typescript
+const rules = {
+  name:   [{ required: true, message: '请输入名称', trigger: 'blur' }],
+  type:   [{ required: true, message: '请选择类型', trigger: 'change' }],
+  date:   [{ required: true, message: '请选择日期', trigger: 'change' }],
+}
+```