@agile-team/wl-skills-ui 1.8.7 → 1.8.9

package/CHANGELOG.md

@@ -4,6 +4,19 @@ 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
+
+- **圆角统一**：`--el-border-radius-base` 从 4px 升级为 6px，所有 el-button / el-input / el-select / el-card 等页面级按钮与弹窗按钮圆角完全一致，修复页面场景与 dialog 不统一问题。
+
 ## [1.8.7] - 2026-05-17
 
 ### Added

package/README.md

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

package/design/tokens/base.css

@@ -117,7 +117,7 @@
   --el-box-shadow-light: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
   --el-box-shadow-lighter: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
   --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
-  --el-border-radius-base: 4px;
+  --el-border-radius-base: 6px;
   --el-border-radius-small: 2px;
   --el-border-radius-round: 20px;
   --el-border-radius-circle: 100%;

package/dist/tokens.css

@@ -117,7 +117,7 @@
   --el-box-shadow-light: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
   --el-box-shadow-lighter: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
   --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
-  --el-border-radius-base: 4px;
+  --el-border-radius-base: 6px;
   --el-border-radius-small: 2px;
   --el-border-radius-round: 20px;
   --el-border-radius-circle: 100%;

package/package.json

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

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/tokens/index.scss

@@ -203,7 +203,7 @@ $wk-sidebar-width: var(--el-sidebar-width) !default;
   --el-box-shadow-light: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
   --el-box-shadow-lighter: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
   --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
-  --el-border-radius-base: 4px;
+  --el-border-radius-base: 6px;
   --el-border-radius-small: 2px;
   --el-border-radius-round: 20px;
   --el-border-radius-circle: 100%;
@@ -227,4 +227,4 @@ $wk-sidebar-width: var(--el-sidebar-width) !default;
   --el-sidebar-width: 240px;
   --el-menu-item-font-size: 16px;
   --el-menu-item-height: 40px;
-}
+}

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 结构