@agile-team/wl-skills-ui 1.6.3 → 1.6.4

package/package.json

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

package/skills/element/el-form/SKILL.md

@@ -46,6 +46,19 @@ el-date-picker 默认宽度不会自动撑满 el-form-item，必须显式设置
 
 ---
 
+## 表单控件圆角一致性 【中危】
+
+表单里的输入类控件必须按控件家族统一判断，不要只修 `el-input`：
+
+- 输入：`el-input` / `el-textarea` / `el-input-number`
+- 选择：`el-select` / `el-cascader` / `el-autocomplete`
+- 日期：`el-date-picker` / `el-time-picker` / range editor
+- 上传：`el-upload-dragger` / upload list item
+
+修复时优先使用全局样式 token `--wk-form-control-radius`，不要在业务页面对某几个控件单独写 `border-radius: 0`、`4px`、`10px` 等局部值。若页面需要特殊圆角，应在页面容器上覆盖 token，而不是逐个控件硬编码。
+
+---
+
 ## 完整标准表单示例
 
 ```html

package/skills/runtime/style-align/SKILL.md

@@ -87,6 +87,7 @@ npx wk-ui check --project [项目根目录]
 - **R006**【中危】el-input / el-select 缺少 `size="small"`
 - **R007**【中危】el-date-picker 缺少 `style="width:100%"`
 - **R008**【低危】el-form labelWidth < 150px
+- **表单圆角一致性**【中危】输入、选择、日期、textarea、上传等控件必须统一使用 `--wk-form-control-radius`，不要局部硬编码不同圆角
 
 ### 弹窗类 → 详见 [skills/components/dialog/SKILL.md](../../components/dialog/SKILL.md)
 

package/standards/ui/03-form.md

@@ -44,6 +44,18 @@ date-picker 默认宽度固定，在 grid 布局中需撑满列宽：
 
 ---
 
+## 规则：表单控件圆角必须统一
+
+输入、选择、日期、数字输入、级联、自动完成、textarea、上传拖拽区都属于表单控件家族，圆角必须使用统一 token：
+
+```scss
+--wk-form-control-radius
+```
+
+业务页面不要给单个控件硬编码不同 `border-radius`。确有特殊场景时，在页面容器覆盖 token，而不是逐个控件写死。
+
+---
+
 ## 布局标准
 
 ### 搜索区（列表页顶部）

package/styles/element/_form.scss

@@ -1,5 +1,9 @@
 // styles/element/_form.scss — el-form / el-input 覆盖
 
+html body {
+  --wk-form-control-radius: var(--el-border-radius-base, 6px);
+}
+
 .el-form-item--small {
   margin-bottom: 8px;
 }
@@ -10,13 +14,14 @@
 }
 
 // ── 全局输入框圆角统一（6px，与搜索区保持一致）──────────────────────────────
-.el-input__wrapper {
-  border-radius: 6px;
-}
-.el-select .el-select__wrapper {
-  border-radius: 6px;
-}
+.el-input__wrapper,
+.el-select__wrapper,
+.el-select .el-select__wrapper,
 .el-date-editor.el-input__wrapper,
-.el-date-editor .el-input__wrapper {
-  border-radius: 6px;
+.el-date-editor .el-input__wrapper,
+.el-input-number .el-input__wrapper,
+.el-cascader .el-input__wrapper,
+.el-autocomplete .el-input__wrapper,
+.el-textarea__inner {
+  border-radius: var(--wk-form-control-radius) !important;
 }

package/styles/element/_upload.scss

@@ -1,34 +1,34 @@
 html body .el-upload {
   .el-upload-dragger {
-    border-color: var(--el-border-color);
-    border-radius: 10px;
-    background: var(--el-fill-color-light);
+    border-color: var(--el-border-color, #dcdfe6);
+    border-radius: var(--wk-form-control-radius, var(--el-border-radius-base, 6px));
+    background: var(--el-fill-color-light, #f5f7fa);
     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);
+    border-color: var(--el-color-primary, #2254f4);
+    background: var(--el-color-primary-light-9, #f2f5ff);
   }
 
   .el-upload__tip {
-    color: var(--el-text-color-secondary);
-    font-size: var(--el-font-size-small);
+    color: var(--el-text-color-secondary, #909399);
+    font-size: var(--el-font-size-small, 12px);
   }
 }
 
 html body .el-upload-list {
   .el-upload-list__item {
-    border-radius: 6px;
+    border-radius: var(--wk-form-control-radius, var(--el-border-radius-base, 6px));
     transition: background-color 0.2s;
   }
 
   .el-upload-list__item:hover {
-    background: var(--el-fill-color-lighter);
+    background: var(--el-fill-color-lighter, #fafafa);
   }
 
   .el-upload-list__item-name {
-    color: var(--el-text-color-regular);
+    color: var(--el-text-color-regular, #606266);
   }
 }