@agile-team/wl-skills-ui 1.6.2

package/styles/vendors/_base-query-toolbar.scss

@@ -0,0 +1,253 @@
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// 搜索区域 & 工具栏按钮区域 精致化样式 — wl-ui-safe 统一设计规范
+// 适用：BaseQuery(.base-query-box) + BaseToolbar(.base-toolbar-box)
+// 维护：只改这一个文件，全项目生效
+//
+// 【设计语言】
+//   - 输入框：圆角 6px、轻描边、focus 品牌蓝光环
+//   - 按钮：主操作填充蓝、次级操作线框灰、危险填充红
+//   - 整体：紧凑（32px 高）、清晰层次感、与 AG Grid 视觉风格统一
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+// ── 搜索表单容器 ──────────────────────────────────────────────────────────────
+.base-query-box {
+  padding: 10px 12px 4px;
+  background: #ffffff;
+  border-radius: 6px 6px 0 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+
+  // ── 通用输入框精致化 ──────────────────────────────────────────────────────
+  .el-input__wrapper {
+    border-radius: 6px !important;
+    box-shadow: 0 0 0 1px var(--el-border-color) inset !important;
+    transition: box-shadow 0.15s ease;
+
+    &:hover:not(.is-disabled) {
+      box-shadow: 0 0 0 1px var(--el-border-color-darker) inset !important;
+    }
+    &.is-focus {
+      box-shadow: 0 0 0 1.5px var(--el-color-primary) inset !important;
+    }
+    &.is-disabled {
+      background-color: var(--el-disabled-bg-color) !important;
+    }
+  }
+
+  .el-input__inner {
+    font-size: 13px;
+    color: var(--el-text-color-primary);
+    &::placeholder { color: var(--el-text-color-placeholder); font-size: 12px; }
+  }
+
+  // ── 选择框 ────────────────────────────────────────────────────────────────
+  .el-select .el-select__wrapper {
+    border-radius: 6px !important;
+    box-shadow: 0 0 0 1px var(--el-border-color) inset !important;
+    transition: box-shadow 0.15s ease;
+
+    &:hover:not(.is-disabled) {
+      box-shadow: 0 0 0 1px var(--el-border-color-darker) inset !important;
+    }
+    &.is-focused {
+      box-shadow: 0 0 0 1.5px var(--el-color-primary) inset !important;
+    }
+  }
+
+  // ── 日期/时间选择器 ───────────────────────────────────────────────────────
+  .el-date-editor .el-input__wrapper,
+  .el-date-editor.el-input__wrapper {
+    border-radius: 6px !important;
+    box-shadow: 0 0 0 1px var(--el-border-color) inset !important;
+    transition: box-shadow 0.15s ease;
+
+    &:hover:not(.is-disabled) {
+      box-shadow: 0 0 0 1px var(--el-border-color-darker) inset !important;
+    }
+    &.is-focus {
+      box-shadow: 0 0 0 1.5px var(--el-color-primary) inset !important;
+    }
+  }
+
+  // ── 搜索/重置按钮行 ───────────────────────────────────────────────────────
+  .text-right {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    padding-bottom: 8px;
+  }
+
+  // 查询按钮（type=primary）→ 品牌蓝填充
+  .el-button--primary {
+    border-radius: 6px !important;
+    font-weight: 500;
+    letter-spacing: 0.01em;
+    height: 24px !important;
+    line-height: 1 !important;
+    padding: 0 10px !important;
+    font-size: 12px !important;
+    background-color: var(--el-color-primary) !important;
+    border-color: var(--el-color-primary) !important;
+    color: #ffffff !important;
+    transition: background-color 0.15s, box-shadow 0.15s;
+
+    &:hover {
+      background-color: var(--el-color-primary-light-3) !important;
+      border-color: var(--el-color-primary-light-3) !important;
+      box-shadow: 0 2px 8px rgba(34, 84, 244, 0.25);
+    }
+    &:active { opacity: 0.85; }
+  }
+
+  // 重置按钮（type=default）→ 轻线框样式
+  .el-button--default:not(.el-button--primary):not(.el-button--danger) {
+    border-radius: 6px !important;
+    font-size: 12px !important;
+    height: 24px !important;
+    line-height: 1 !important;
+    padding: 0 10px !important;
+    color: var(--el-text-color-regular) !important;
+    border-color: var(--el-border-color) !important;
+    background-color: #ffffff !important;
+    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
+
+    &:hover {
+      color: var(--el-color-primary) !important;
+      border-color: var(--el-color-primary-light-5) !important;
+      background-color: rgba(34, 84, 244, 0.04) !important;
+    }
+  }
+}
+
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// 工具栏按钮区域（BaseToolbar）精致化
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+.base-toolbar-box {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 6px 12px;
+  background: #ffffff;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+
+  // ── 真实 DOM 结构：.base-toolbar-box > .base-toolbar-content > .action-button-wrap ──
+  // .base-toolbar-content 是平台渲染的实际容器，直接设置 flex + gap
+  .base-toolbar-content {
+    display: flex !important;
+    align-items: center !important;
+    flex-wrap: wrap !important;
+    gap: 8px !important;
+    margin: 0 !important;
+  }
+
+  // .action-button-wrap 是每个按钮的包装，去除多余外边距
+  .action-button-wrap {
+    display: inline-flex !important;
+    align-items: center !important;
+    margin: 0 !important;
+  }
+
+  // 兜底：覆盖 EP 的 .el-button + .el-button { margin-left: 8px } 和 jh-ui 规则
+  .el-button + .el-button { margin-left: 0 !important; }
+  & > * { margin: 0 !important; }
+
+  // 统一按钮高度、圆角、字号
+  .el-button {
+    border-radius: 6px !important;
+    font-size: 11px !important;
+    font-weight: 500;
+    height: 24px !important;
+    line-height: 1 !important;
+    padding: 0 8px !important;
+    margin: 0 !important;           // 覆盖 jh-ui 的 margin-right:8px
+    letter-spacing: 0.01em;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+
+    // 图标 + 文字间距
+    .el-icon + span,
+    span + .el-icon { margin-left: 4px; }
+
+    // ── 主操作：填充蓝（新增/新建/申请）─────────────────────────────────
+    &.el-button--primary {
+      background-color: var(--el-color-primary) !important;
+      border-color: var(--el-color-primary) !important;
+      color: #ffffff !important;
+
+      &:hover {
+        background-color: var(--el-color-primary-light-3) !important;
+        border-color: var(--el-color-primary-light-3) !important;
+        box-shadow: 0 2px 8px rgba(34, 84, 244, 0.28);
+      }
+      &:active { opacity: 0.85; }
+    }
+
+    // ── 危险操作：填充红（删除/作废/驳回）───────────────────────────────
+    &.el-button--danger {
+      background-color: var(--el-color-danger) !important;
+      border-color: var(--el-color-danger) !important;
+      color: #ffffff !important;
+
+      &:hover {
+        background-color: var(--el-color-danger-light-3) !important;
+        border-color: var(--el-color-danger-light-3) !important;
+        box-shadow: 0 2px 8px rgba(187, 45, 63, 0.25);
+      }
+      &:active { opacity: 0.85; }
+    }
+
+    // ── 警告操作：填充橙（提醒/预警相关）───────────────────────────────
+    &.el-button--warning {
+      background-color: var(--el-color-warning) !important;
+      border-color: var(--el-color-warning) !important;
+      color: #ffffff !important;
+
+      &:hover {
+        background-color: var(--el-color-warning-light-3) !important;
+        border-color: var(--el-color-warning-light-3) !important;
+      }
+    }
+
+    // ── 次级操作：线框灰→hover 品牌色（导入/导出/模板下载）──────────────
+    &.el-button--default:not(.el-button--primary):not(.el-button--danger):not(.el-button--warning) {
+      color: var(--el-text-color-regular) !important;
+      border-color: var(--el-border-color) !important;
+      background-color: #ffffff !important;
+
+      &:hover {
+        color: var(--el-color-primary) !important;
+        border-color: var(--el-color-primary-light-5) !important;
+        background-color: rgba(34, 84, 244, 0.04) !important;
+      }
+    }
+
+    // ── 成功操作：填充绿（审批通过/启用）────────────────────────────────
+    &.el-button--success {
+      background-color: var(--el-color-success) !important;
+      border-color: var(--el-color-success) !important;
+      color: #ffffff !important;
+
+      &:hover {
+        background-color: var(--el-color-success-light-3) !important;
+        border-color: var(--el-color-success-light-3) !important;
+      }
+    }
+  }
+}
+
+// ── 下拉菜单按钮（工具栏内的 el-dropdown 触发器）────────────────────────────
+.base-toolbar-box .el-dropdown > .el-button,
+.base-toolbar-box .el-button-group .el-button {
+  height: 24px !important;
+  border-radius: 6px !important;
+  font-size: 11px !important;
+  font-weight: 500;
+}
+
+// ── 弹窗/抽屉底部按钮行 ──────────────────────────────────────────────────────
+.dialog-footer .el-button {
+  border-radius: 6px !important;
+  font-size: 13px !important;
+  height: 24px !important;
+  padding: 0 14px !important;
+  font-weight: 500;
+}

package/styles/vendors/_base-table.scss

@@ -0,0 +1,41 @@
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// styles/vendors/_base-table.scss — BaseTable / <base-table> 系列封装组件覆盖
+// 适用：所有以 Base 前缀的表格类封装（BaseTable / BaseDataTable / BaseList...）
+// 优先级：v3 化妆模式中 Base* 组件最优先（团队约定主流封装）
+//
+// 【识别规则（供 scanner / AI 使用）】
+//   - 标签：<BaseTable> / <base-table> / <BaseDataTable>
+//   - 类名：.base-table-wrapper / .base-table-container / .base-table-* 
+//   - props：通常包含 columns / data / hook / renderType
+//
+// 【设计语言】对齐 Element Plus el-table 的视觉规范（参见 element/_table.scss）
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+// 容器层 — 与页面边距对齐
+.base-table-wrapper,
+.base-table-container,
+[class^='base-table-'],
+[class*=' base-table-'] {
+  background: var(--el-bg-color, #fff);
+  border-radius: var(--el-border-radius-base, 4px);
+  overflow: hidden;
+}
+
+// 表头颜色对齐（防 BaseTable 内部 el-table 没继承到全局覆盖）
+.base-table-wrapper {
+  .el-table__header-wrapper th,
+  .el-table th.el-table__cell {
+    background-color: var(--wk-table-header-bg, #fafafa) !important;
+    color: var(--wk-table-header-color, #303133);
+    font-weight: 500;
+  }
+
+  // 操作按钮组复用 .ops-icons 类
+  .el-button.is-text + .el-button.is-text {
+    margin-left: 4px;
+  }
+}
+
+// ── 扩展位 ────────────────────────────────────────────────────────────────────
+// 当业务侧 BaseTable 有更多结构性 class（如 base-table__toolbar / base-table__footer），
+// 在这里继续追加，不要污染全局选择器。

package/styles/vendors/_c-components.scss

@@ -0,0 +1,34 @@
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// styles/vendors/_c-components.scss — C_*/c_* 前缀组件覆盖
+// 适用：未来团队约定以 C_/c_ 开头的项目自封装组件
+// 优先级：v3 化妆模式中第三优先（Base > jh > C_/c_ > custom）
+//
+// 【识别规则】
+//   - 标签：<C_Form> / <C_Table> / <c-form> / <c-table> ...
+//   - 类名：.c-form / .c-table / [class^='c-'] / [class^='C_']
+//   - 文件路径：通常在 src/components/C*/ 或 src/business/c-*/
+//
+// 【填充指引】
+//   未来当具体的 C_* 组件确定下来时，在本文件按 element-plus 控件的视觉
+//   规范追加覆盖；保持选择器精确（带 .c- 前缀），避免污染。
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+// ── 占位：保持表头/输入框/按钮统一 ───────────────────────────────────────────
+.c-form,
+[class^='c-form'],
+[class^='C_Form'] {
+  // el-form-item 间距对齐（已由 element/_form.scss 提供，这里补封装层 wrapper）
+  .el-form-item {
+    margin-bottom: 12px;
+  }
+}
+
+.c-table,
+[class^='c-table'],
+[class^='C_Table'] {
+  .el-table__header-wrapper th {
+    background-color: var(--wk-table-header-bg, #fafafa) !important;
+  }
+}
+
+// ── 扩展位（按需追加） ───────────────────────────────────────────────────────

package/styles/vendors/_custom-wrappers.scss

@@ -0,0 +1,30 @@
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// styles/vendors/_custom-wrappers.scss — 项目内野路子封装组件兜底覆盖
+// 适用：src/components/XxxxXxxx 这类没有统一前缀的自封装组件
+// 优先级：v3 化妆模式中最后兜底（Base > jh > C_/c_ > 这里）
+//
+// 【识别策略】
+//   - 这类组件通常没有规律的类名/标签前缀
+//   - 但内部一定基于 el-* 控件 → 通过它们渲染出的 .el-* 结构去覆盖
+//   - 选择器形式：.{业务自定义类名} .el-input、 .{业务} .el-table 等
+//
+// 【填充指引】
+//   1. scanner audit 模式会扫描 src/components/*.vue 的根 class 名
+//   2. 把扫描出的高频 class 加到本文件
+//   3. 内部 el-* 选择器走 element/ 层，保持单一来源
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+// ── 兜底：常见业务包装类（按项目实际情况追加/移除） ─────────────────────────
+// 示例：
+// .module-wrapper,
+// .panel-content,
+// .business-card {
+//   .el-input { /* 强制 size small */ }
+//   .el-button { /* 强制圆角 */ }
+// }
+
+// ── 兜底：所有未识别的封装内 el-table 表头颜色 ───────────────────────────────
+// （仅在化妆模式启用，可能影响 element/_table.scss 生效）
+:where(:not(.base-table-wrapper):not(.c-table):not([class^='jh-'])) {
+  // 留空 — 默认不污染，需要时在项目侧覆盖
+}

package/styles/vendors/_jh-drag-col.scss

@@ -0,0 +1,63 @@
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// 左树右表布局 + 拖拽分割条 — wl-ui-safe 统一设计规范
+// 适用：所有 jh-drag-col 左树右表结构页面
+// 维护：只改这一个文件，全项目生效
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+// ── 拖拽分割条 — 极简细线 + grip dots ────────────────────────────────────────
+html .drag-col-container > .slider-col {
+  background: linear-gradient(
+    to right,
+    transparent 4px,
+    var(--el-border-color-light) 4px,
+    var(--el-border-color-light) 5px,
+    transparent 5px
+  ) !important;
+  transition: background 0.2s !important;
+
+  &::before { display: none !important; }
+
+  &::after {
+    content: '' !important;
+    position: absolute !important;
+    left: 50% !important;
+    right: auto !important;
+    top: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    width: 4px !important;
+    height: 4px !important;
+    min-height: unset !important;
+    max-height: unset !important;
+    border-radius: 50% !important;
+    background-color: var(--el-border-color) !important;
+    box-shadow: 0 -8px 0 var(--el-border-color), 0 8px 0 var(--el-border-color) !important;
+    transition: background-color 0.2s, box-shadow 0.2s !important;
+    opacity: 0.6;
+  }
+
+  &:hover {
+    background: linear-gradient(
+      to right,
+      rgba(34, 84, 244, 0.06) 3px,
+      var(--el-color-primary) 3px,
+      var(--el-color-primary) 7px,
+      rgba(34, 84, 244, 0.06) 7px
+    ) !important;
+
+    &::after {
+      background-color: var(--el-color-primary) !important;
+      box-shadow: 0 -8px 0 var(--el-color-primary), 0 8px 0 var(--el-color-primary) !important;
+      opacity: 1;
+    }
+  }
+
+  &:active {
+    background: linear-gradient(
+      to right,
+      rgba(34, 84, 244, 0.1) 2.5px,
+      var(--el-color-primary) 2.5px,
+      var(--el-color-primary) 7.5px,
+      rgba(34, 84, 244, 0.1) 7.5px
+    ) !important;
+  }
+}

package/styles/vendors/_jh-pagination.scss

@@ -0,0 +1,81 @@
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// 分页器统一样式 — wl-ui-safe 设计规范
+// 适用：el-pagination / jh-pagination
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+.el-pagination {
+  font-size: 12px;
+  gap: 2px;
+
+  // 页码按钮
+  .el-pager .number {
+    border-radius: 4px !important;
+    font-size: 12px;
+    min-width: 26px;
+    height: 26px;
+    line-height: 26px;
+    transition: background-color 0.12s, color 0.12s;
+
+    &:hover {
+      color: var(--el-color-primary) !important;
+      background-color: rgba(34, 84, 244, 0.06) !important;
+    }
+
+    // 当前页 → 品牌蓝填充
+    &.is-active {
+      background-color: var(--el-color-primary) !important;
+      color: #ffffff !important;
+      border-radius: 4px !important;
+      font-weight: 600;
+    }
+  }
+
+  // 省略号
+  .el-pager .more {
+    font-size: 12px;
+    min-width: 26px;
+    height: 26px;
+    line-height: 26px;
+    border-radius: 4px !important;
+  }
+
+  // 上/下一页按钮
+  .btn-prev,
+  .btn-next {
+    border-radius: 4px !important;
+    min-width: 26px;
+    height: 26px;
+    line-height: 26px;
+    transition: background-color 0.12s, color 0.12s;
+
+    &:hover:not(:disabled) {
+      color: var(--el-color-primary) !important;
+      background-color: rgba(34, 84, 244, 0.06) !important;
+    }
+
+    &:disabled { opacity: 0.4; cursor: not-allowed; }
+  }
+
+  // "共 X 条" 文字
+  .el-pagination__total {
+    font-size: 12px;
+    color: var(--el-text-color-regular);
+  }
+
+  // 每页条数选择
+  .el-pagination__sizes .el-select__wrapper {
+    font-size: 12px;
+    height: 26px;
+    border-radius: 4px !important;
+  }
+
+  // 跳页输入框
+  .el-pagination__jump {
+    font-size: 12px;
+
+    .el-input__wrapper {
+      border-radius: 4px !important;
+      height: 26px;
+    }
+    .el-input__inner { font-size: 12px; }
+  }
+}