@agile-team/wl-skills-ui 1.6.2

package/styles/vendors/_jh-tree.scss

@@ -0,0 +1,196 @@
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// el-tree / jh-tree 全局样式 — wl-ui-safe 统一设计规范
+//
+// 【根因确认】
+//   jh-drag-col 渲染出 .drag-left（来源确认：common-core drag-col.vue）
+//   BaseTree 渲染 .base-tree，内部经过 el-scrollbar 多层后才是 jh-tree
+//   中间层 class 名称（.left-tree-box 等）在运行时版本中可能不存在
+//   → 选择器只依赖 .drag-left 这一个确定父级，不写任何中间 class
+//
+// 【策略：最短可靠路径 + 通配覆盖】
+//   .drag-left .el-tree-node__content:hover → 背景色
+//   .drag-left .el-tree-node__content:hover * → 文字色（通配，覆盖所有子元素）
+//   .drag-left .el-tree-node.is-current > .el-tree-node__content → 选中
+//   !important 确保胜过 jh-tree scoped 规则（后者不用 !important）
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+// ── 面板容器 ──────────────────────────────────────────────────────────────────
+.drag-left > div {
+  background-color: #f7f8fb;
+  padding: 10px 0;
+  border-radius: 4px 0 0 4px;
+  border-right: 1px solid rgba(0, 0, 0, 0.07);
+}
+
+// ── 搜索框（BaseTree 内置搜索）───────────────────────────────────────────────
+.drag-left .base-tree-search-box {
+  padding: 0 10px 8px;
+
+  .el-input__wrapper {
+    border-radius: 6px;
+    background: #ffffff;
+    box-shadow: 0 0 0 1px var(--el-border-color) inset;
+    transition: box-shadow 0.18s;
+    &:hover  { box-shadow: 0 0 0 1px var(--el-border-color-darker) inset; }
+    &.is-focus { box-shadow: 0 0 0 1.5px var(--el-color-primary) inset !important; }
+  }
+
+  .el-input__inner {
+    font-size: 13px;
+    color: var(--el-text-color-regular);
+    &::placeholder { color: var(--el-text-color-placeholder); }
+  }
+
+  .el-input__prefix-inner .el-icon { color: var(--el-text-color-placeholder); }
+}
+
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// jh-tree 核心颜色覆盖（已修正：不依赖 .left-tree-box 等中间层 class）
+// 直接使用 .drag-left 作为唯一父级锚点
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// ── 树节点宽度 ────────────────────────────────────────────────────────────────
+.drag-left .el-tree-node {
+  white-space: normal !important;
+  overflow: visible !important;
+  width: 100%;
+}
+.drag-left .el-tree-node__children { width: 100%; }
+.drag-left .el-tree { background: transparent; width: 100%; }
+
+// ── 行基础 ────────────────────────────────────────────────────────────────────
+.drag-left .el-tree-node__content {
+  position: relative;
+  width: 100% !important;
+  height: 32px;
+  line-height: 32px;
+  font-size: 13px;
+  box-sizing: border-box !important;
+  padding-right: 12px;
+  transition: background-color 0.12s ease, color 0.12s ease;
+  user-select: none;
+  background-color: transparent !important;
+
+  // ── 左侧圆点装饰（仅 hover 时显示，选中时隐藏）────────────────────────────
+  &::before {
+    content: '';
+    position: absolute;
+    left: 4px;
+    top: 50%;
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: var(--el-color-primary);
+    transform: translateY(-50%) scale(0);
+    opacity: 0;
+    pointer-events: none;
+    z-index: 2;
+    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease;
+  }
+
+  // ── Hover（非选中行）──────────────────────────────────────────────────────
+  &:hover {
+    background-color: rgba(34, 84, 244, 0.07) !important;
+
+    &::before { transform: translateY(-50%) scale(1); opacity: 0.55; }
+
+    // 通配覆盖所有子元素（包括 menu-tree-node background:#f0f3ff）
+    * {
+      color: var(--el-color-primary) !important;
+      background-color: transparent !important;
+      background: transparent !important;
+    }
+
+    // 叶子展开图标保持透明
+    > .el-tree-node__expand-icon.is-leaf { color: transparent !important; }
+  }
+}
+
+// 键盘 focus → 去除 jh-tree 的 background:#addaff
+.drag-left .el-tree-node:focus > .el-tree-node__content {
+  background-color: transparent !important;
+  outline: none;
+}
+
+// ── 选中状态 ──────────────────────────────────────────────────────────────────
+.drag-left .el-tree-node.is-current > .el-tree-node__content {
+  background-color: rgba(34, 84, 244, 0.10) !important;
+  box-shadow: inset 3px 0 0 var(--el-color-primary) !important;
+  font-weight: 500;
+  color: var(--el-color-primary) !important;
+
+  // 选中时圆点不显示
+  &::before {
+    transform: translateY(-50%) scale(0) !important;
+    opacity: 0 !important;
+  }
+
+  // ① 通配覆盖 — 确保所有子孙文字同色（左右一致）
+  // background/background-color 同时清除，防止 jh-tree scoped 的 background: #f0f3ff 残留
+  * {
+    color: var(--el-color-primary) !important;
+    background-color: transparent !important;
+    background: transparent !important;
+  }
+
+  // ② 精确覆盖 jh-tree scoped 选中态规则
+  .menu-tree-node,
+  .menu-title,
+  .el-tree-node__label,
+  span,
+  div {
+    color: var(--el-color-primary) !important;
+    background: transparent !important;
+    background-color: transparent !important;
+  }
+
+  > .el-tree-node__expand-icon.is-leaf { color: transparent !important; }
+
+  // hover 时加深一点
+    &:hover {
+      background-color: rgba(34, 84, 244, 0.15) !important;
+    }
+}
+
+// ── 展开/折叠图标 ─────────────────────────────────────────────────────────────
+.drag-left .el-tree-node__expand-icon {
+  font-size: 11px;
+  padding: 9px 7px;
+  flex-shrink: 0;
+  transition: color 0.12s, transform 0.18s ease;
+
+  &.is-leaf { color: transparent !important; pointer-events: none; cursor: default; }
+}
+
+// ── 树滚动条 ──────────────────────────────────────────────────────────────────
+.drag-left .base-tree .el-scrollbar__wrap {
+  overflow-y: auto !important;
+  overflow-x: auto !important;
+  padding-right: 0 !important;
+
+  &::-webkit-scrollbar        { width: 4px; height: 4px; }
+  &::-webkit-scrollbar-corner { background: transparent; }
+  &::-webkit-scrollbar-track  { background: transparent; }
+  &::-webkit-scrollbar-thumb  { background: transparent; border-radius: 2px; }
+}
+
+.drag-left .base-tree:hover .el-scrollbar__wrap::-webkit-scrollbar-thumb       { background: rgba(0, 0, 0, 0.12); }
+.drag-left .base-tree:hover .el-scrollbar__wrap::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); }
+
+// ── 兜底：当 BaseTree 内部不是 el-scrollbar 而是直接出现原生滚动条时 ─────
+//   覆盖范围：.drag-left 内所有可能的滚动容器（.base-tree、.jh-tree、.el-tree、
+//   以及 .left-tree-box / .left-content 等任意中间层），统一为 4px 极细滚动条，
+//   颜色与表格保持一致（rgba 0.12 / hover 0.25）。
+//   仅 hover 容器时才显示 thumb，避免静态视觉噪声。
+.drag-left {
+  // 所有子级滚动容器（包含 :hover 子树）都统一为 4px、透明轨道
+  *::-webkit-scrollbar        { width: 4px !important; height: 4px !important; }
+  *::-webkit-scrollbar-track  { background: transparent !important; }
+  *::-webkit-scrollbar-corner { background: transparent !important; }
+  *::-webkit-scrollbar-thumb  {
+    background: transparent !important;
+    border-radius: 2px !important;
+  }
+
+  &:hover *::-webkit-scrollbar-thumb       { background: rgba(0, 0, 0, 0.12) !important; }
+  &:hover *::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25) !important; }
+}

package/styles/vendors/_portal.scss

@@ -0,0 +1,114 @@
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// @agile-team/wk-skills-ui — Portal / 远程 public 模块视觉增强（可选模块）
+// 来源：wl-safe src/assets/style/element.scss 中 .portal-* 段落
+// 仅当业务系统嵌入了相同的 jh4j-cloud-ui-public Portal 模块时引入
+// 用法： @use '@agile-team/wk-skills-ui/dist/portal.scss';
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+// 主背景：双径向渐变替换纯灰
+html body .portal-main {
+  background:
+    radial-gradient(ellipse at 15% 0%, rgba(34, 84, 244, 0.09) 0%, transparent 45%),
+      radial-gradient(ellipse at 85% 85%, rgba(122, 152, 248, 0.07) 0%, transparent 45%),
+    #eef0f8 !important;
+}
+
+// 顶栏：毛玻璃效果
+html body .portal-header {
+  background: rgba(255, 255, 255, 0.88) !important;
+  backdrop-filter: blur(12px) !important;
+  -webkit-backdrop-filter: blur(12px) !important;
+  box-shadow: 0 1px 16px rgba(34, 84, 244, 0.08) !important;
+    border-bottom: 1px solid rgba(34, 84, 244, 0.07) !important;
+}
+
+// 平台标题：蓝紫渐变文字
+html body .portal-text {
+  background: linear-gradient(135deg, #2254f4 0%, #7a98f8 100%) !important;
+  -webkit-background-clip: text !important;
+  -webkit-text-fill-color: transparent !important;
+  background-clip: text !important;
+  font-weight: 700 !important;
+}
+
+// 左侧 banner 图：加圆角+阴影
+html body .portal-bg {
+  border-radius: 14px !important;
+  overflow: hidden !important;
+  box-shadow: 0 8px 32px rgba(34, 84, 244, 0.12) !important;
+}
+
+// 综合待办卡片：玻璃质感
+html body .portal-zh {
+  background: rgba(255, 255, 255, 0.82) !important;
+  backdrop-filter: blur(20px) !important;
+  -webkit-backdrop-filter: blur(20px) !important;
+  border-radius: 14px !important;
+  border: 1px solid rgba(34, 84, 244, 0.12) !important;
+    box-shadow: 0 8px 32px rgba(34, 84, 244, 0.1) !important;
+  overflow: hidden !important;
+}
+
+// 通知待办 Tab 激活下划线
+html body .portal-tabs .el-tabs__active-bar {
+  background: linear-gradient(90deg, #2254f4 0%, #7a98f8 100%) !important;
+}
+html body .portal-tabs .el-tabs__item.is-active {
+  color: #2254f4 !important;
+  font-weight: 600 !important;
+}
+html body .portal-tabs .el-tabs__item:hover {
+  color: #2254f4 !important;
+}
+
+// 子系统区域卡片：玻璃质感
+html body .portal-mainBottom .portal-content,
+html body .portal-mainMiddle {
+  background: rgba(255, 255, 255, 0.82) !important;
+  backdrop-filter: blur(20px) !important;
+  -webkit-backdrop-filter: blur(20px) !important;
+  border-radius: 14px !important;
+  border: 1px solid rgba(34, 84, 244, 0.12) !important;
+    box-shadow: 0 8px 32px rgba(34, 84, 244, 0.1) !important;
+  overflow: hidden !important;
+}
+
+// 子系统图标卡：悬停上浮动效
+html body .portal-childrenSystem {
+  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
+  cursor: pointer !important;
+
+  &:hover {
+    transform: translateY(-8px) scale(1.08) !important;
+  }
+
+  &:hover .children-name {
+    color: var(--el-color-primary, #2254f4) !important;
+    font-weight: 600 !important;
+  }
+}
+
+// 区块标题左竖线：蓝紫渐变
+html body .portal-line {
+  background: linear-gradient(180deg, #2254f4 0%, #7a98f8 100%) !important;
+  border-radius: 2px !important;
+}
+
+// 区块标题文字
+html body .portal-font {
+  color: var(--el-text-color-primary, #303133) !important;
+  font-weight: 600 !important;
+}
+
+// 消息数量角标：主色背景
+html body .portal-tabs-label .num {
+  background: var(--el-color-primary, #2254f4) !important;
+  color: #fff !important;
+  border-radius: 10px !important;
+  font-weight: 600 !important;
+}
+
+// 消息行 hover
+html body .portal-tabs-row:hover {
+  color: var(--el-color-primary, #2254f4) !important;
+}

package/styles/vendors/index.scss

@@ -0,0 +1,17 @@
+// styles/vendors/index.scss — Vendors 层（L2 化妆层）汇总
+//
+// 加载顺序：从最高优先级到兜底（同选择器特异性下，后加载会覆盖前面）
+// 优先级约定（v3 团队规范）：
+//   Base*  >  jh-*  >  C_*/c_*  >  custom wrappers
+// → 但 SCSS 加载顺序里我们反过来：兜底先加载，让高优先级覆盖
+
+@forward './_portal';            // 弹层/popper 通用（基础设施层）
+@forward './_ag-grid';           // AG Grid 完整主题
+@forward './_custom-wrappers';   // 兜底：野路子自封装
+@forward './_c-components';      // C_/c_ 前缀
+@forward './_jh-tree';           // jh-tree
+@forward './_jh-pagination';     // jh-pagination
+@forward './_jh-drag-col';       // jh-drag-col（含左树右表骨架）
+@forward './_base-query-toolbar';// BaseQuery / BaseToolbar
+@forward './_base-components';   // Base* 通用（操作按钮组、徽标、tag）
+@forward './_base-table';        // BaseTable（最高优先级）

package/templates/ag-grid-page/TPL-AG-GRID.md

@@ -0,0 +1,76 @@
+# TPL-AG-GRID — AG Grid 列表页模板
+
+> 适用：使用 AG Grid 作为表格组件的高性能列表页（大数据量、复杂列操作）。
+
+## 模板代码（TypeScript 类风格）
+
+```typescript
+// [Module]List.ts — 页面逻辑
+import { defineColumns, renderOps, renderTagNode } from '@agile-team/wk-skills-ui/runtime';
+import type { TableColumnDesc } from '@/types/table';
+
+columnsDef(): TableColumnDesc<any>[] {
+  return defineColumns([
+    // ── 选择/序号 ──
+    {
+      type: 'selection',
+      label: '',
+      width: 55,
+      fixed: 'left',
+      align: 'center',
+      headerAlign: 'center',
+    },
+    { type: 'index', label: '序号', width: 60, align: 'center' },
+
+    // ── 数据列（已注册字段自动映射，无需 defaultNode）──
+    { name: 'riskNo',    label: '编号',     width: 100 },  // → renderBadge
+    { name: 'name',      label: '名称',     minWidth: 150 },
+    { name: 'riskLevel', label: '风险分级', width: 90 },   // → renderRiskLevel Tag
+    { name: 'riskStatus', label: '状态',   width: 90 },    // → renderRiskStatus Tag
+
+    // ── 自定义渲染列 ──
+    { name: 'checkLevel', label: '检查层级', width: 90,
+      defaultSlot: ({ row }) => renderCheckLevel(row.checkLevel) },
+
+    // ── 操作列 ──
+    {
+      label: '操作',
+      width: 120,
+      fixed: 'right',
+      align: 'center',
+      defaultSlot: ({ row }) => renderOps([
+        { type: 'view', onClick: () => this.modal.view(row.id) },
+        { type: 'edit', show: !this.isReadonly, onClick: () => this.modal.edit(row.id) },
+        { type: 'del',  show: !this.isReadonly, onClick: () => this.handleDel(row.id) },
+      ]),
+    },
+  ]);
+}
+```
+
+## 工具栏定义
+
+```typescript
+toolbarDef() {
+  return [
+    {
+      label: '新增',
+      icon: 'Plus',
+      type: 'primary',
+      onClick: () => this.modal.add(),
+    },
+    {
+      label: '导出',
+      icon: 'Download',
+      onClick: () => this.handleExport(),
+    },
+  ];
+}
+```
+
+## 注意事项
+
+1. 所有列用 `defineColumns()` 包裹 — 已注册字段自动应用渲染器
+2. 操作列用 `renderOps([...])` — 图标按钮 + 自动 stopPropagation
+3. selection 列必须同时设置 `align: 'center'` + `headerAlign: 'center'`（R014）
+4. 分类字段（type/level）用 `renderClassifyTag`，状态字段用 `renderTagNode`

package/templates/form-dialog/TPL-FORM-DIALOG.md

@@ -0,0 +1,165 @@
+# TPL-FORM-DIALOG — 标准表单弹窗模板
+
+> 适用：新增/编辑弹窗，含表单验证、查看模式（只读）、成功回调。
+
+## 模板代码
+
+```vue
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="title"
+    width="700px"
+    :close-on-click-modal="false"
+    @closed="handleClosed"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="150px"
+      :disabled="optr === 'view'"
+    >
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="名称" prop="name">
+            <el-input
+              size="small"
+              v-model="form.name"
+              placeholder="请输入名称"
+              maxlength="50"
+              show-word-limit
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="所属部门" prop="deptId">
+            <el-select
+              size="small"
+              v-model="form.deptId"
+              placeholder="请选择"
+              style="width:100%"
+            >
+              <el-option
+                v-for="o in deptOptions"
+                :key="o.value"
+                :label="o.label"
+                :value="o.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="开始日期" prop="startDate">
+            <el-date-picker
+              style="width:100%"
+              size="small"
+              v-model="form.startDate"
+              type="date"
+              placeholder="请选择日期"
+              value-format="YYYY-MM-DD"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="备注" prop="remark">
+            <el-input
+              size="small"
+              v-model="form.remark"
+              type="textarea"
+              :rows="3"
+              placeholder="请输入备注"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="visible = false">取消</el-button>
+      <el-button
+        v-if="optr !== 'view'"
+        type="primary"
+        :loading="saving"
+        @click="handleSubmit"
+      >
+        确定
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import { ElMessage } from 'element-plus';
+// import { addModule, updateModule, getModuleDetail } from '@/api/module';
+
+const emit = defineEmits(['success']);
+
+// ── 状态 ────────────────────────────────────────────────────────────────────
+const visible = ref(false);
+const optr = ref<'add' | 'edit' | 'view'>('add');
+const saving = ref(false);
+const formRef = ref();
+
+// ── 表单数据 ──────────────────────────────────────────────────────────────────
+const EMPTY_FORM = { name: '', deptId: undefined, startDate: '', remark: '' };
+const form = reactive({ ...EMPTY_FORM });
+
+// ── 验证规则 ──────────────────────────────────────────────────────────────────
+const rules = {
+  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+  deptId: [{ required: true, message: '请选择部门', trigger: 'change' }],
+};
+
+// ── 计算标题 ──────────────────────────────────────────────────────────────────
+const title = computed(() => ({ add: '新增', edit: '编辑', view: '查看' }[optr.value] || '');
+
+// ── 打开弹窗 ──────────────────────────────────────────────────────────────────
+async function add() {
+  optr.value = 'add';
+  Object.assign(form, EMPTY_FORM);
+  visible.value = true;
+}
+async function edit(id: string) {
+  optr.value = 'edit';
+  // const data = await getModuleDetail(id);
+  // Object.assign(form, data);
+  visible.value = true;
+}
+async function view(id: string) {
+  optr.value = 'view';
+  // const data = await getModuleDetail(id);
+  // Object.assign(form, data);
+  visible.value = true;
+}
+defineExpose({ add, edit, view });
+
+// ── 提交 ──────────────────────────────────────────────────────────────────────
+async function handleSubmit() {
+  await formRef.value?.validate();
+  saving.value = true;
+  try {
+    // if (optr.value === 'add') await addModule(form);
+    // else await updateModule(form);
+    ElMessage.success('操作成功');
+    visible.value = false;
+    emit('success');
+  } finally {
+    saving.value = false;
+  }
+}
+
+function handleClosed() {
+  formRef.value?.resetFields();
+}
+</script>
+```
+
+## 注意事项
+
+1. `label-width="150px"` — 统一标准（R008）
+2. `el-input` / `el-select` 必须 `size="small"`（R006）
+3. `el-date-picker` 必须 `style="width:100%"`（R007）
+4. 查看模式用 `:disabled="optr === 'view'"`，不重复渲染
+5. `<template #footer>` 只放操作按钮，不放分页（R011）