@agile-team/wl-skills-ui 1.6.2

package/standards/ui/04-tag-status.md

@@ -0,0 +1,110 @@
+# 规范 04：状态标签（Tag / Status）
+
+## 基础颜色语义
+
+| type      | 颜色    | 适用语义                          |
+|-----------|--------|----------------------------------|
+| `success` | 绿色   | 已完成、启用、已核实、已审批、正常   |
+| `warning` | 橙色   | 临时、待处理、审批中、未完成        |
+| `danger`  | 红色   | 停用、驳回、作废、超期              |
+| `info`    | 灰色   | 未处理、未提交、初始状态            |
+| `''`      | 蓝色   | 一般状态、默认                     |
+
+---
+
+## 渲染模式（推荐）
+
+```typescript
+// ✅ 文件顶部定义映射表 + 渲染函数
+import { h } from 'vue'
+import { ElTag } from 'element-plus'
+
+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[String(val)]
+  // 注意：type 可能为空字符串，需用 undefined 判断
+  if (cfg === undefined) return ''
+  return h(ElTag, { type: cfg.type || undefined }, { default: () => cfg.label })
+}
+```
+
+### 在 defineColumns 中使用
+
+```typescript
+{ field: 'enableStatus', headerName: '启用状态', pinned: 'right', defaultSlot: renderStatusTag }
+```
+
+### 在 el-table-column 中使用
+
+```vue
+<el-table-column label="状态" align="center" fixed="right">
+  <template #default="{ row }">
+    <el-tag :type="STATUS_TAG_MAP[row.status]?.type">
+      {{ STATUS_TAG_MAP[row.status]?.label }}
+    </el-tag>
+  </template>
+</el-table-column>
+```
+
+---
+
+## 分级标签（renderClassifyTag）
+
+用于隐患级别、检查级别等分级数据：
+
+```typescript
+import { renderClassifyTag } from '@/components/ag-cell-renders'
+
+const LEVEL_MAP = {
+  '1': { label: '一般', type: 'info' },
+  '2': { label: '较大', type: 'warning' },
+  '3': { label: '重大', type: 'danger' },
+}
+
+// defineColumns 中
+{ field: 'checkLevel', headerName: '隐患级别', defaultSlot: (val) => renderClassifyTag(val, LEVEL_MAP) }
+```
+
+---
+
+## 状态列固定右侧
+
+所有状态类列（启用/停用、审批状态、核实状态等）**必须** `fixed="right"` / `pinned: 'right'`：
+
+```vue
+<!-- el-table -->
+<el-table-column label="启用状态" align="center" fixed="right" width="90">
+
+<!-- defineColumns -->
+{ field: 'enableStatus', headerName: '启用状态', pinned: 'right', width: 90 }
+```
+
+---
+
+## 常见状态枚举参考
+
+```typescript
+// 审批状态
+const APPROVAL_STATUS_MAP = {
+  '0': { label: '未提交', type: 'info' },
+  '1': { label: '审批中', type: 'warning' },
+  '2': { label: '已审批', type: 'success' },
+  '3': { label: '已驳回', type: 'danger' },
+}
+
+// 核实状态
+const VERIFY_STATUS_MAP = {
+  '0': { label: '未核实', type: 'info' },
+  '1': { label: '已核实', type: 'success' },
+}
+
+// 启用状态
+const ENABLE_STATUS_MAP = {
+  '0': { label: '停用', type: 'danger' },
+  '1': { label: '启用', type: 'success' },
+}
+```

package/standards/ui/05-dialog-pagination.md

@@ -0,0 +1,118 @@
+# 规范 05：弹窗内分页（Dialog + Pagination）
+
+## 核心原则
+
+**分页必须放在内容区（content area），不得放在 `#footer` 插槽中。**
+
+原因：`el-pagination` 组件内部有 fixed/absolute 定位逻辑，放入 `#footer` 后会逃出弹窗容器，导致分页漂浮在页面底部。
+
+---
+
+## 正确布局（SelectPopupCom 标准）
+
+```vue
+<el-dialog v-model="visible" width="80%" title="选择">
+  <el-row :gutter="8">
+    <!-- 主内容区：表格 + 分页 -->
+    <el-col :span="18">
+      <!-- 搜索区 -->
+      <div class="search-bar">...</div>
+
+      <!-- 表格 -->
+      <el-table :data="tableData" empty-text="暂无数据">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column type="index" label="序号" width="60" align="center" />
+        <!-- 数据列 -->
+      </el-table>
+
+      <!-- ✅ 分页：放在内容区，右对齐 -->
+      <div class="popup-pagination">
+        <el-pagination
+          v-model:current-page="page.current"
+          v-model:page-size="page.size"
+          :total="page.total"
+          layout="total, prev, pager, next"
+          background
+          small
+        />
+      </div>
+    </el-col>
+
+    <!-- 已选项区 -->
+    <el-col :span="6">
+      <div class="selected-panel">...</div>
+    </el-col>
+  </el-row>
+
+  <!-- ✅ footer：只放操作按钮，不放分页 -->
+  <template #footer>
+    <div class="dialog-footer">
+      <el-button @click="handleClose">取 消</el-button>
+      <el-button type="primary" @click="handleConfirm">确 认</el-button>
+    </div>
+  </template>
+</el-dialog>
+```
+
+---
+
+## 必要 CSS
+
+```scss
+// 分页右对齐
+.popup-pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 4px;
+}
+
+// footer 按钮右对齐（全局已有，参考 dist/style-override.scss）
+.el-dialog__footer .dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+```
+
+---
+
+## 规则 R011（scanner 检测）
+
+scanner 会扫描 `#footer` 插槽中是否包含 `el-pagination`，若有则报 **error** 级别警告：
+
+```
+R011 [error] el-pagination 位于 #footer 插槽中 — 请移至内容区域
+```
+
+修复方法：将 `<el-pagination>` 从 `<template #footer>` 中移出，放入 `el-col` 内容区，包裹在 `<div class="popup-pagination">` 中。
+
+---
+
+## 分页常用配置
+
+```vue
+<!-- 标准小型分页（弹窗内） -->
+<el-pagination
+  v-model:current-page="page.current"
+  v-model:page-size="page.size"
+  :total="page.total"
+  :page-sizes="[10, 20, 50]"
+  layout="total, sizes, prev, pager, next"
+  background
+  small
+  @size-change="handleSizeChange"
+  @current-change="handlePageChange"
+/>
+
+<!-- 标准普通分页（列表页底部） -->
+<el-pagination
+  v-model:current-page="page.current"
+  v-model:page-size="page.size"
+  :total="page.total"
+  :page-sizes="[20, 50, 100]"
+  layout="total, sizes, prev, pager, next, jumper"
+  background
+  @size-change="handleSizeChange"
+  @current-change="handlePageChange"
+/>
+```

package/styles/element/_card.scss

@@ -0,0 +1,26 @@
+html body .el-card {
+  border-color: var(--el-border-color-light);
+  border-radius: 10px;
+  box-shadow: var(--el-box-shadow);
+  overflow: hidden;
+
+  .el-card__header {
+    min-height: 44px;
+    padding: 12px 16px;
+    color: var(--el-text-color-primary);
+    font-weight: var(--el-font-weight-medium);
+    background: var(--el-fill-color-blank);
+    border-bottom-color: var(--el-border-color-light);
+  }
+
+  .el-card__body {
+    padding: 16px;
+    color: var(--el-text-color-regular);
+  }
+
+  &.is-always-shadow,
+  &.is-hover-shadow:focus,
+  &.is-hover-shadow:hover {
+    box-shadow: var(--el-box-shadow-light);
+  }
+}

package/styles/element/_descriptions.scss

@@ -0,0 +1,22 @@
+html body .el-descriptions {
+  .el-descriptions__title {
+    color: var(--el-text-color-primary);
+    font-size: var(--el-font-size-medium);
+    font-weight: var(--el-font-weight-medium);
+  }
+
+  .el-descriptions__label.el-descriptions__cell.is-bordered-label,
+  .el-descriptions__label:not(.is-bordered-label) {
+    color: var(--el-text-color-regular);
+    font-weight: var(--el-font-weight-medium);
+    background: var(--el-fill-color-lighter);
+  }
+
+  .el-descriptions__content {
+    color: var(--el-text-color-primary);
+  }
+
+  .el-descriptions__table.is-bordered .el-descriptions__cell {
+    border-color: var(--el-border-color-light);
+  }
+}

package/styles/element/_dialog.scss

@@ -0,0 +1,43 @@
+// styles/element/_dialog.scss — el-dialog / el-message-box 覆盖
+
+.el-message-box .el-message-box__status {
+  top: 12px !important;
+}
+
+// jh-ui dialog.scss 标题色为硬编码 #262626，覆盖为 Token
+html .el-dialog__title {
+  color: var(--el-text-color-primary);
+}
+
+// EP 原生 fullscreen prop 场景：全屏与关闭两个 headerbtn 间距收紧
+// 注：自定义全屏图标（.dialog-fullscreen-action）不受此影响
+.el-dialog__headerbtn {
+  right: 8px;
+}
+.el-dialog__headerbtn + .el-dialog__headerbtn {
+  right: 30px;
+}
+
+// jh-dialog / @jhlc/common-core DialogComponent 全屏图标
+// 紧贴 EP 关闭按钮左侧，svg-icon 14px 与其视觉大小匹配
+.dialog-header-fullscreen-icon {
+  position: absolute !important;
+  top: 16px !important;
+  right: 44px !important;
+  display: flex !important;
+  align-items: center !important;
+  cursor: pointer !important;
+  z-index: 10 !important;
+  color: var(--el-color-info);
+  transition: color 0.2s;
+
+  &:hover {
+    color: var(--el-color-primary);
+  }
+
+  .svg-icon {
+    font-size: 12px !important;
+    width: 1em !important;
+    height: 1em !important;
+  }
+}

package/styles/element/_drawer.scss

@@ -0,0 +1,22 @@
+html body .el-drawer {
+  background: var(--el-fill-color-blank);
+
+  .el-drawer__header {
+    min-height: 48px;
+    padding: 14px 16px;
+    margin-bottom: 0;
+    color: var(--el-text-color-primary);
+    font-weight: var(--el-font-weight-medium);
+    border-bottom: 1px solid var(--el-border-color-light);
+  }
+
+  .el-drawer__body {
+    padding: 16px;
+    color: var(--el-text-color-regular);
+  }
+
+  .el-drawer__footer {
+    padding: 12px 16px;
+    border-top: 1px solid var(--el-border-color-light);
+  }
+}

package/styles/element/_feedback.scss

@@ -0,0 +1,52 @@
+html body .el-empty {
+  --el-empty-padding: 32px 0;
+
+  .el-empty__description p {
+    color: var(--el-text-color-secondary);
+    font-size: var(--el-font-size-base);
+  }
+
+  .el-empty__bottom {
+    margin-top: 12px;
+  }
+}
+
+html body .el-alert {
+  border-radius: 8px;
+
+  .el-alert__title {
+    font-weight: var(--el-font-weight-medium);
+  }
+
+  .el-alert__description {
+    color: var(--el-text-color-regular);
+  }
+}
+
+html body .el-badge {
+  .el-badge__content {
+    border-color: var(--el-fill-color-blank);
+    box-shadow: var(--el-box-shadow);
+  }
+}
+
+html body .el-result {
+  .el-result__title p {
+    color: var(--el-text-color-primary);
+    font-weight: var(--el-font-weight-medium);
+  }
+
+  .el-result__subtitle p {
+    color: var(--el-text-color-secondary);
+  }
+}
+
+html body .el-timeline {
+  .el-timeline-item__timestamp {
+    color: var(--el-text-color-secondary);
+  }
+
+  .el-timeline-item__content {
+    color: var(--el-text-color-regular);
+  }
+}

package/styles/element/_form.scss

@@ -0,0 +1,22 @@
+// styles/element/_form.scss — el-form / el-input 覆盖
+
+.el-form-item--small {
+  margin-bottom: 8px;
+}
+
+// 解决 el-form-item 出现错误提示时底部 margin 增加的问题
+.is-error.el-form-item--small {
+  margin-bottom: 18px !important;
+}
+
+// ── 全局输入框圆角统一（6px，与搜索区保持一致）──────────────────────────────
+.el-input__wrapper {
+  border-radius: 6px;
+}
+.el-select .el-select__wrapper {
+  border-radius: 6px;
+}
+.el-date-editor.el-input__wrapper,
+.el-date-editor .el-input__wrapper {
+  border-radius: 6px;
+}

package/styles/element/_navigation.scss

@@ -0,0 +1,36 @@
+html body .el-breadcrumb {
+  .el-breadcrumb__inner,
+  .el-breadcrumb__separator {
+    color: var(--el-text-color-secondary);
+  }
+
+  .el-breadcrumb__inner.is-link,
+  .el-breadcrumb__inner a {
+    color: var(--el-text-color-regular);
+    font-weight: var(--el-font-weight-regular);
+  }
+
+  .el-breadcrumb__inner.is-link:hover,
+  .el-breadcrumb__inner a:hover {
+    color: var(--el-color-primary);
+  }
+}
+
+html body .el-menu {
+  border-right-color: var(--el-border-color-light);
+
+  .el-menu-item,
+  .el-sub-menu__title {
+    height: var(--el-menu-item-height, 40px);
+    line-height: var(--el-menu-item-height, 40px);
+    color: var(--el-text-color-regular);
+    font-size: var(--el-menu-item-font-size, 14px);
+  }
+
+  .el-menu-item.is-active,
+  .el-menu-item:hover,
+  .el-sub-menu__title:hover {
+    color: var(--el-color-primary);
+    background: var(--el-color-primary-light-9);
+  }
+}

package/styles/element/_overlay.scss

@@ -0,0 +1,32 @@
+html body .el-popper,
+html body .el-popover,
+html body .el-tooltip__popper,
+html body .el-dropdown__popper {
+  border-color: var(--el-border-color-light);
+  border-radius: 8px;
+  box-shadow: var(--el-box-shadow-light);
+}
+
+html body .el-popover {
+  color: var(--el-text-color-regular);
+}
+
+html body .el-dropdown-menu {
+  padding: 6px;
+
+  .el-dropdown-menu__item {
+    min-height: 32px;
+    border-radius: 6px;
+    color: var(--el-text-color-regular);
+  }
+
+  .el-dropdown-menu__item:not(.is-disabled):focus,
+  .el-dropdown-menu__item:not(.is-disabled):hover {
+    color: var(--el-color-primary);
+    background: var(--el-color-primary-light-9);
+  }
+
+  .el-dropdown-menu__item.is-disabled {
+    color: var(--el-text-color-disabled);
+  }
+}

package/styles/element/_pagination.scss

@@ -0,0 +1,16 @@
+// styles/element/_pagination.scss — el-pagination 精致化覆盖
+
+.el-pagination {
+  --el-pagination-button-width: 24px;
+  --el-pagination-button-height: 24px;
+  --el-pagination-button-font-size: 12px;
+
+  .el-input__wrapper {
+    height: 24px;
+  }
+
+  // jh-ui pagination.scss 中激活页码边框为硬编码色，此处用变量覆盖
+  .el-pager li.is-active {
+    border-color: var(--el-color-primary) !important;
+  }
+}

package/styles/element/_steps.scss

@@ -0,0 +1,32 @@
+html body .el-steps {
+  .el-step__title {
+    color: var(--el-text-color-regular);
+    font-weight: var(--el-font-weight-medium);
+  }
+
+  .el-step__description {
+    color: var(--el-text-color-secondary);
+  }
+
+  .el-step__head.is-process,
+  .el-step__title.is-process {
+    color: var(--el-color-primary);
+    border-color: var(--el-color-primary);
+  }
+
+  .el-step__head.is-success,
+  .el-step__title.is-success {
+    color: var(--el-color-success);
+    border-color: var(--el-color-success);
+  }
+
+  .el-step__head.is-error,
+  .el-step__title.is-error {
+    color: var(--el-color-danger);
+    border-color: var(--el-color-danger);
+  }
+
+  .el-step__line {
+    background-color: var(--el-border-color-light);
+  }
+}

package/styles/element/_table.scss

@@ -0,0 +1,13 @@
+// styles/element/_table.scss — el-table 表头颜色覆盖
+// jh-ui table.scss 表头颜色为硬编码，此处用 CSS 变量覆盖
+
+html .el-table {
+  .el-table__header-wrapper th,
+  .el-table__fixed-header-wrapper th {
+    color: var(--el-text-color-primary);
+    background: var(--el-fill-color-lighter);
+  }
+  .el-table__header tr {
+    --el-table-tr-bg-color: var(--el-fill-color-lighter);
+  }
+}

package/styles/element/_tabs.scss

@@ -0,0 +1,40 @@
+html body .el-tabs {
+  --el-tabs-header-height: 40px;
+
+  .el-tabs__header {
+    margin-bottom: 12px;
+  }
+
+  .el-tabs__nav-wrap::after {
+    height: 1px;
+    background-color: var(--el-border-color-light);
+  }
+
+  .el-tabs__item {
+    color: var(--el-text-color-regular);
+    font-weight: var(--el-font-weight-regular);
+  }
+
+  .el-tabs__item.is-active,
+  .el-tabs__item:hover {
+    color: var(--el-color-primary);
+  }
+
+  .el-tabs__active-bar {
+    height: 2px;
+    border-radius: 2px;
+    background-color: var(--el-color-primary);
+  }
+
+  &.el-tabs--border-card {
+    border-color: var(--el-border-color-light);
+    border-radius: 10px;
+    box-shadow: var(--el-box-shadow);
+    overflow: hidden;
+
+    > .el-tabs__header {
+      background-color: var(--el-fill-color-lighter);
+      border-bottom-color: var(--el-border-color-light);
+    }
+  }
+}

package/styles/element/_tree.scss

@@ -0,0 +1,27 @@
+html body .el-tree {
+  --el-tree-node-hover-bg-color: var(--el-color-primary-light-9);
+  color: var(--el-text-color-regular);
+  background: transparent;
+
+  .el-tree-node__content {
+    min-height: 32px;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s;
+  }
+
+  .el-tree-node__content:hover,
+  .el-tree-node:focus > .el-tree-node__content {
+    color: var(--el-color-primary);
+    background: var(--el-color-primary-light-9);
+  }
+
+  .el-tree-node.is-current > .el-tree-node__content {
+    color: var(--el-color-primary);
+    font-weight: var(--el-font-weight-medium);
+    background: var(--el-color-primary-light-9);
+  }
+
+  .el-tree-node__expand-icon {
+    color: var(--el-text-color-secondary);
+  }
+}

package/styles/element/_upload.scss

@@ -0,0 +1,34 @@
+html body .el-upload {
+  .el-upload-dragger {
+    border-color: var(--el-border-color);
+    border-radius: 10px;
+    background: var(--el-fill-color-light);
+    transition: border-color 0.2s, background-color 0.2s;
+  }
+
+  .el-upload-dragger:hover,
+  .el-upload-dragger.is-dragover {
+    border-color: var(--el-color-primary);
+    background: var(--el-color-primary-light-9);
+  }
+
+  .el-upload__tip {
+    color: var(--el-text-color-secondary);
+    font-size: var(--el-font-size-small);
+  }
+}
+
+html body .el-upload-list {
+  .el-upload-list__item {
+    border-radius: 6px;
+    transition: background-color 0.2s;
+  }
+
+  .el-upload-list__item:hover {
+    background: var(--el-fill-color-lighter);
+  }
+
+  .el-upload-list__item-name {
+    color: var(--el-text-color-regular);
+  }
+}

package/styles/element/index.scss

@@ -0,0 +1,17 @@
+// styles/element/index.scss — Element Plus 覆盖层汇总
+// 前置：design/tokens/base.css 必须最先在 index.html 中加载
+
+@forward './pagination';
+@forward './form';
+@forward './table';
+@forward './dialog';
+@forward './card';
+@forward './tabs';
+@forward './descriptions';
+@forward './tree';
+@forward './drawer';
+@forward './upload';
+@forward './steps';
+@forward './overlay';
+@forward './navigation';
+@forward './feedback';