@agile-team/wl-skills-ui 1.8.8 → 1.8.12

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to **@agile-team/wl-skills-ui** will be documented in this f
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [1.8.9] - 2026-05-17
+
+### Improved
+
+- **token 化圆角**：`_base-query-toolbar.scss` / `_jh-pagination.scss` / `_jh-ui.scss` / `_jh-tree.scss` 所有硬编码 `border-radius: 6px` / `4px` 全部替换为 `var(--el-border-radius-base)` / `var(--el-border-radius-small)` token 引用，未来调整圆角一处生效。
+- **R028** 新增：检测业务 `<style>` 中硬编码 `border-radius` 数值，提示改用 token，避免升级后残留旧值。
+
 ## [1.8.8] - 2026-05-17
 
 ### Fixed

package/README.md

@@ -213,7 +213,7 @@ yarn add @agile-team/wl-skills-ui
 
 ## 版本亮点
 
-当前 v1.8.8：
+当前 v1.8.9：
 
 - **loading 遮罩质感优化**：BaseTable / AG Grid 的 v-loading 由灰色蒙层改为毛玻璃半透明（backdrop-filter），数据切换无感
 - **R027** 检测业务代码硬编码 `.el-loading-mask` 背景色 → 提示删除，由包统一覆盖

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agile-team/wl-skills-ui",
-  "version": "1.8.8",
+  "version": "1.8.12",
   "description": "企业级 UI 风格对齐框架 — Vue + Element Plus 项目通用化妆/原生双模式（tokens / element / vendors / layouts / runtime / scanner / fixer / skills）",
   "type": "module",
   "main": "./es/index.js",
@@ -134,4 +134,4 @@
       "eslint --fix --no-cache"
     ]
   }
-}
+}

package/scanner/__tests__/fixtures/r028-fail.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="card">内容</div>
+</template>
+<style scoped>
+.card {
+  border-radius: 8px;
+  background: #fff;
+}
+</style>

package/scanner/__tests__/fixtures/r028-pass.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="card">内容</div>
+</template>
+<style scoped>
+.card {
+  border-radius: var(--el-border-radius-base);
+  background: #fff;
+}
+</style>

package/scanner/rules/semantic.mjs

@@ -160,4 +160,43 @@ export const semanticRules = [
       return issues;
     },
   },
+
+  // R028: 检测业务 <style> 中硬编码 border-radius 数值（应使用 var(--el-border-radius-*)）
+  {
+    id: "R028",
+    category: "style",
+    severity: "info",
+    name: "业务代码硬编码 border-radius 数值（建议使用 --el-border-radius-base/small token）",
+    check() {
+      return [];
+    },
+    checkStyle(styleBlock, file, lineOffset) {
+      const issues = [];
+      const lines = styleBlock.split("\n");
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // 匹配 border-radius: Npx 但不含 var(
+        if (!/border-radius\s*:/.test(line)) continue;
+        if (/var\(/.test(line)) continue;
+        // 排除注释
+        if (/^\s*\/\//.test(line)) continue;
+        // 排除 50% / 100% / 99px（圆形/胶囊，刻意设计）
+        if (/border-radius\s*:\s*(50%|100%|99px|999px)/.test(line)) continue;
+        // 排除 0（无圆角，刻意重置）
+        if (/border-radius\s*:\s*0[;\s]/.test(line)) continue;
+        issues.push(
+          issue(
+            file,
+            lineOffset + i + 1,
+            "R028",
+            "style",
+            "info",
+            "border-radius 使用硬编码数值，未引用设计 token",
+            "建议改为 var(--el-border-radius-base) 或 var(--el-border-radius-small)，确保圆角随 token 统一调整",
+          ),
+        );
+      }
+      return issues;
+    },
+  },
 ];

package/standards/rules.json

@@ -422,6 +422,17 @@
       "autoFixable": true,
       "scanner": "scanner/rules/semantic.mjs",
       "skills": ["vendors/base-table", "element/el-table"]
+    },
+    {
+      "id": "R028",
+      "category": "style",
+      "severity": "info",
+      "title": "业务代码 border-radius 应使用设计 token",
+      "rationale": "硬编码圆角数值无法随 --el-border-radius-base token 统一调整，升级 token 后业务侧残留旧值导致视觉不一致。",
+      "appliesTo": ["border-radius"],
+      "autoFixable": true,
+      "scanner": "scanner/rules/semantic.mjs",
+      "skills": ["tokens/index"]
     }
   ]
 }

package/styles/vendors/_base-components.scss

@@ -181,13 +181,14 @@
 
 // ── 状态标签 — 精致小标签（GitHub/Linear label 风格）────────────────────────
 // 实色填充 + 轻柔圆角 + 克制字号
-.ag-cell .el-tag {
+.ag-cell .el-tag,
+.el-table .el-tag {
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
-  height: 20px !important;
+  height: 18px !important;
   line-height: 1 !important;
-  padding: 0 8px !important;
+  padding: 0 7px !important;
   font-size: 11px !important;
   font-weight: 600 !important;
   border-radius: 4px !important;
@@ -196,7 +197,7 @@
   flex-shrink: 0;
 
   &.el-tag--danger {
-      background: var(--el-color-danger) !important;
+    background: var(--el-color-danger) !important;
       color: #fff !important;
     }
 
@@ -220,6 +221,12 @@
     background: var(--el-color-primary) !important;
     color: #fff !important;
   }
+                                                                >span,
+                                                                .el-tag__content,
+                                                                * {
+                                                                  font-size: inherit !important;
+                                                                  line-height: inherit !important;
+                                                                }
 }
 
 // ── 数值型徽标（考核基数/评分等）────────────────────────────────────────────
@@ -510,24 +517,86 @@
 
 // 必填星号：只保留一颗 — 默认 asterisk-left（::before），asterisk-right 用 ::after
 // 旧写法同时 display:inline-block 两个伪元素导致 * * 重复
-.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label::before {
+html body .el-form.el-form--label-left .el-form-item__label,
+html body .el-form.el-form--label-right .el-form-item__label {
+  align-items: baseline !important;
+  font-size: 12px !important;
+  line-height: 22px !important;
+}
+
+html body .el-form.el-form--label-left .el-form-item__label>.com-text,
+html body .el-form.el-form--label-right .el-form-item__label>.com-text {
+  font-size: 12px !important;
+  line-height: 22px !important;
+}
+
+.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label::before,
+html body .el-form.el-form--label-left .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label::before,
+html body .el-form.el-form--label-right .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label::before {
+  content: "*" !important;
+  color: var(--el-color-danger, #f56c6c) !important;
+  font-size: 12px !important;
+  font-weight: 400 !important;
+    line-height: 22px !important;
+  display: inline-block !important;
+  margin-right: 2px !important;
+    vertical-align: baseline !important;
+    position: relative !important;
+    top: 0 !important;
+    align-self: baseline !important;
+}
+.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label>.com-text::before,
+html body .el-form.el-form--label-left .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label>.com-text::before,
+html body .el-form.el-form--label-right .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label>.com-text::before {
+  content: "*" !important;
   color: var(--el-color-danger, #f56c6c) !important;
+  font-size: 12px !important;
+  font-weight: 400 !important;
+    line-height: 22px !important;
   display: inline-block !important;
+  margin-right: 2px !important;
+    vertical-align: baseline !important;
+    position: relative !important;
+    top: 0 !important;
+    align-self: baseline !important;
+}
+
+.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:has(>.com-text)::before,
+html body .el-form .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:has(>.com-text)::before {
+  display: none !important;
 }
+
 // asterisk-right 模式：显示 ::after，隐藏 ::before
-.el-form-item.is-required:not(.is-no-asterisk).asterisk-right>.el-form-item__label::before {
+.el-form-item.is-required:not(.is-no-asterisk).asterisk-right>.el-form-item__label::before,
+.el-form-item.is-required:not(.is-no-asterisk).asterisk-right>.el-form-item__label>.com-text::before {
   display: none !important;
 }
 
-.el-form-item.is-required:not(.is-no-asterisk).asterisk-right>.el-form-item__label::after {
+.el-form-item.is-required:not(.is-no-asterisk).asterisk-right>.el-form-item__label::after,
+html body .el-form.el-form--label-left .el-form-item.is-required:not(.is-no-asterisk).asterisk-right>.el-form-item__label::after,
+html body .el-form.el-form--label-right .el-form-item.is-required:not(.is-no-asterisk).asterisk-right>.el-form-item__label::after {
+  content: "*" !important;
   color: var(--el-color-danger, #f56c6c) !important;
+  font-size: 12px !important;
+  font-weight: 400 !important;
+    line-height: 22px !important;
   display: inline-block !important;
+  margin-left: 2px !important;
+    vertical-align: baseline !important;
+    position: relative !important;
+    top: 0 !important;
+    align-self: baseline !important;
 }
 
 // 默认模式：隐藏 ::after 防止重复星号
 .el-form-item.is-required:not(.is-no-asterisk):not(.asterisk-right)>.el-form-item__label::after {
   display: none !important;
 }
+.el-form-item.is-required.is-no-asterisk>.el-form-item__label::before,
+.el-form-item.is-required.is-no-asterisk>.el-form-item__label::after,
+.el-form-item.is-required.is-no-asterisk>.el-form-item__label>.com-text::before {
+  display: none !important;
+}
 
 .el-form-item.is-error {
   .el-form-item__label,

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

@@ -4,7 +4,7 @@
 // 维护：只改这一个文件，全项目生效
 //
 // 【设计语言】
-//   - 输入框：圆角 6px、轻描边、focus 品牌蓝光环
+//   - 输入框：圆角 var(--el-border-radius-base)、轻描边、focus 品牌蓝光环
 //   - 按钮：主操作填充蓝、次级操作线框灰、危险填充红
 //   - 整体：紧凑（32px 高）、清晰层次感、与 AG Grid 视觉风格统一
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
@@ -13,12 +13,12 @@
 .base-query-box {
   padding: 10px 12px 4px;
   background: #ffffff;
-  border-radius: 6px 6px 0 0;
+  border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 
   // ── 通用输入框精致化 ──────────────────────────────────────────────────────
   .el-input__wrapper {
-    border-radius: 6px !important;
+    border-radius: var(--el-border-radius-base) !important;
     box-shadow: 0 0 0 1px var(--el-border-color) inset !important;
     transition: box-shadow 0.15s ease;
 
@@ -50,7 +50,7 @@
     }
   // ── 选择框 ────────────────────────────────────────────────────────────────
   .el-select .el-select__wrapper {
-    border-radius: 6px !important;
+    border-radius: var(--el-border-radius-base) !important;
     box-shadow: 0 0 0 1px var(--el-border-color) inset !important;
     transition: box-shadow 0.15s ease;
 
@@ -65,7 +65,7 @@
   // ── 日期/时间选择器 ───────────────────────────────────────────────────────
   .el-date-editor .el-input__wrapper,
   .el-date-editor.el-input__wrapper {
-    border-radius: 6px !important;
+    border-radius: var(--el-border-radius-base) !important;
     box-shadow: 0 0 0 1px var(--el-border-color) inset !important;
     transition: box-shadow 0.15s ease;
 
@@ -88,7 +88,7 @@
 
   // 查询按钮（type=primary）→ 品牌蓝填充
   .el-button--primary {
-    border-radius: 6px !important;
+    border-radius: var(--el-border-radius-base) !important;
     font-weight: 500;
     letter-spacing: 0.01em;
     height: 24px !important;
@@ -110,7 +110,7 @@
 
   // 重置按钮（type=default）→ 轻线框样式
   .el-button--default:not(.el-button--primary):not(.el-button--danger) {
-    border-radius: 6px !important;
+    border-radius: var(--el-border-radius-base) !important;
     font-size: 12px !important;
     height: 24px !important;
     line-height: 1 !important;
@@ -162,7 +162,7 @@
 
   // 统一按钮高度、圆角、字号
   .el-button {
-    border-radius: 6px !important;
+    border-radius: var(--el-border-radius-base) !important;
     font-size: 11px !important;
     font-weight: 500;
     height: 24px !important;
@@ -266,7 +266,7 @@
 .base-toolbar-box .el-dropdown > .el-button,
 .base-toolbar-box .el-button-group .el-button {
   height: 24px !important;
-  border-radius: 6px !important;
+  border-radius: var(--el-border-radius-base) !important;
   font-size: 11px !important;
   font-weight: 500;
 }
@@ -282,13 +282,13 @@
   }
 
   .el-button:first-child {
-    border-top-left-radius: 6px !important;
-    border-bottom-left-radius: 6px !important;
+    border-top-left-radius: var(--el-border-radius-base) !important;
+      border-bottom-left-radius: var(--el-border-radius-base) !important;
   }
 
   .el-button:last-child {
-    border-top-right-radius: 6px !important;
-    border-bottom-right-radius: 6px !important;
+    border-top-right-radius: var(--el-border-radius-base) !important;
+      border-bottom-right-radius: var(--el-border-radius-base) !important;
     margin-left: -1px !important;
   }
 }
@@ -324,7 +324,7 @@
 }
 // ── 弹窗/抽屉底部按钮行 ──────────────────────────────────────────────────────
 .dialog-footer .el-button {
-  border-radius: 6px !important;
+  border-radius: var(--el-border-radius-base) !important;
   font-size: 13px !important;
   height: 24px !important;
   padding: 0 14px !important;

package/styles/vendors/_base-table.scss

@@ -17,7 +17,7 @@
 [class^='base-table-'],
 [class*=' base-table-'] {
   background: var(--el-bg-color, #fff);
-  border-radius: var(--el-border-radius-base, 4px);
+  border-radius: var(--el-border-radius-base, 6px);
   overflow: hidden;
 }
 

package/styles/vendors/_jh-pagination.scss

@@ -8,7 +8,7 @@
 
   // 页码按钮
   .el-pager .number {
-    border-radius: 4px !important;
+    border-radius: var(--el-border-radius-small) !important;
     font-size: 12px;
     min-width: 26px;
     height: 26px;
@@ -24,7 +24,7 @@
     &.is-active {
       background-color: var(--el-color-primary) !important;
       color: #ffffff !important;
-      border-radius: 4px !important;
+      border-radius: var(--el-border-radius-small) !important;
       font-weight: 600;
     }
   }
@@ -35,13 +35,13 @@
     min-width: 26px;
     height: 26px;
     line-height: 26px;
-    border-radius: 4px !important;
+    border-radius: var(--el-border-radius-small) !important;
   }
 
   // 上/下一页按钮
   .btn-prev,
   .btn-next {
-    border-radius: 4px !important;
+    border-radius: var(--el-border-radius-small) !important;
     min-width: 26px;
     height: 26px;
     line-height: 26px;
@@ -65,7 +65,7 @@
   .el-pagination__sizes .el-select__wrapper {
     font-size: 12px;
     height: 26px;
-    border-radius: 4px !important;
+    border-radius: var(--el-border-radius-small) !important;
   }
 
   // 跳页输入框
@@ -73,7 +73,7 @@
     font-size: 12px;
 
     .el-input__wrapper {
-      border-radius: 4px !important;
+      border-radius: var(--el-border-radius-small) !important;
       height: 26px;
     }
     .el-input__inner { font-size: 12px; }

package/styles/vendors/_jh-tree.scss

@@ -27,7 +27,7 @@
   padding: 0 10px 8px;
 
   .el-input__wrapper {
-    border-radius: 6px;
+    border-radius: var(--el-border-radius-base);
     background: #ffffff;
     box-shadow: 0 0 0 1px var(--el-border-color) inset;
     transition: box-shadow 0.18s;

package/styles/vendors/_jh-ui.scss

@@ -55,7 +55,7 @@
 .el-input > .el-input__inner,
 .el-textarea > .el-textarea__inner,
 .el-date-editor > .el-input__inner {
-  border-radius: 6px;
+  border-radius: var(--el-border-radius-base);
   transition: box-shadow 0.15s ease, border-color 0.15s ease;
 }
 
@@ -87,7 +87,7 @@
 .com-input > .el-input > .el-input__inner,
 .com-input > .el-textarea > .el-textarea__inner,
 .com-textarea > .el-textarea > .el-textarea__inner {
-  border-radius: 6px;
+  border-radius: var(--el-border-radius-base);
 }
 
 // 6) 必填星号兼容 jh-ui label 结构