@kayak-sj/design 1.0.63 → 1.0.65

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@kayak-sj/design",
-  "version": "1.0.63",
+  "version": "1.0.65",
   "type": "module",
-  "description": "PC 组件库（Vue3 + Element Plus，对应旧 @kayak/kayak-design-vue2）",
+  "description": "基于 Vue 3 与 Element Plus 的 Kayak PC 端 UI 组件库，提供 KForm、KTable 等表单与表格能力",
   "license": "ISC",
   "sideEffects": [
     "**/*.css",
@@ -72,8 +72,8 @@
     "vite": "^8.1.5",
     "vitest": "^4.1.10",
     "vue": "^3.5.13",
-    "@kayak/tsconfig": "1.0.0",
-    "@kayak/vite-config": "1.0.0"
+    "@kayak/vite-config": "1.0.0",
+    "@kayak/tsconfig": "1.0.0"
   },
   "scripts": {
     "build": "vite build",

package/src/styles/components/_k-form.scss

@@ -8,7 +8,7 @@
 
   /// 编辑/弹窗：Grid 多列 + 右对齐标签
   /// 列数由 --k-form-effective-cols 控制（ResizeObserver：放不下 label+控件min 时降为 1 列）
-  /// min-width：单列也不压过「label + 控件理想宽」，再窄由外层横向滚动
+  /// min-width：按控件 min，容器收窄时控件可从 max 缩到 min，再窄外层滚动
   &--grid-layout {
     display: grid;
     min-width: var(--k-form-min-width);
@@ -60,6 +60,39 @@
         min-width: 0;
         width: 100%;
       }
+
+      /// controlWidth: 'full' 等：顶层标准控件取消统一上限
+      > .el-form-item__content > .k-form-input,
+      > .el-form-item__content > .k-form-select,
+      > .el-form-item__content > .k-form-date-picker,
+      > .el-form-item__content > .k-form-time-picker,
+      > .el-form-item__content > .k-form-tree-select,
+      > .el-form-item__content > .k-form-input-number,
+      > .el-form-item__content > .k-form-select-multiple,
+      > .el-form-item__content > .k-form-scroll-select,
+      > .el-form-item__content > .el-select,
+      > .el-form-item__content > .el-tree-select,
+      > .el-form-item__content > .el-cascader {
+        max-width: none;
+        width: 100%;
+      }
+    }
+
+    /// controlWidth: 480 / '480px'：覆盖统一 max-width
+    .k-form__item--control-width {
+      > .el-form-item__content > .k-form-input,
+      > .el-form-item__content > .k-form-select,
+      > .el-form-item__content > .k-form-date-picker,
+      > .el-form-item__content > .k-form-time-picker,
+      > .el-form-item__content > .k-form-tree-select,
+      > .el-form-item__content > .k-form-input-number,
+      > .el-form-item__content > .k-form-select-multiple,
+      > .el-form-item__content > .k-form-scroll-select,
+      > .el-form-item__content > .el-select,
+      > .el-form-item__content > .el-tree-select,
+      > .el-form-item__content > .el-cascader {
+        max-width: var(--k-form-field-control-max);
+      }
     }
 
     .el-form-item__label {
@@ -106,9 +139,12 @@
     .el-form-item__content > .k-form-select,
     .el-form-item__content > .k-form-date-picker,
     .el-form-item__content > .k-form-time-picker,
+    .el-form-item__content > .k-form-tree-select,
+    .el-form-item__content > .k-form-input-number,
+    .el-form-item__content > .k-form-select-multiple,
+    .el-form-item__content > .k-form-scroll-select,
     .el-form-item__content > .k-select,
     .el-form-item__content > .k-input,
-    .el-form-item__content > .k-tree-select,
     .el-form-item__content > .el-select,
     .el-form-item__content > .el-tree-select,
     .el-form-item__content > .el-cascader,
@@ -118,6 +154,11 @@
       min-width: var(--k-form-control-min-width);
     }
 
+    .el-form-item__content > .k-form-tree-select .el-tree-select,
+    .el-form-item__content > .k-form-tree-select .el-select {
+      width: 100%;
+    }
+
     /// EP DatePicker 默认 --el-date-editor-width: 220px，与 Input 不对齐；强制跟表单列宽走
     .el-form-item__content > .k-form-date-picker .el-date-editor,
     .el-form-item__content > .k-form-date-picker .el-date-editor.el-input,
@@ -257,7 +298,7 @@
     .k-form-time-picker,
     .k-select,
     .k-input,
-    .k-tree-select,
+    .k-form-tree-select,
     .input-mix-select,
     .el-select,
     .el-date-editor,
@@ -404,7 +445,7 @@
     .k-form-time-picker,
     .k-select,
     .k-input,
-    .k-tree-select,
+    .k-form-tree-select,
     .input-mix-select,
     .el-select,
     .el-tree-select,
@@ -533,6 +574,7 @@
 
 .k-form-tree-select {
   width: 100%;
+  max-width: var(--k-form-control-max-width);
 
   .el-tree-select {
     width: 100%;

package/src/styles/tokens/_css-vars.scss

@@ -93,9 +93,9 @@
   --k-form-control-bg: var(--k-color-bg-surface);
   --k-form-control-max-width: #{sem.$form-control-max-width};
   --k-form-control-min-width: #{sem.$form-control-min-width};
-  /// 换行阈值 = label + 控件 min；表单整体下限见实例上的 --k-form-min-width（label + 控件 max）
+  /// 换行列阈值 / 表单整体下限均按控件 min：宽时控件可到 max，窄时可从 max 缩到 min
   --k-form-grid-min-col: calc(var(--k-form-label-width) + var(--k-form-control-min-width));
-  --k-form-min-width: calc(var(--k-form-label-width) + var(--k-form-control-max-width) + var(--k-form-padding-x) * 2);
+  --k-form-min-width: calc(var(--k-form-label-width) + var(--k-form-control-min-width) + var(--k-form-padding-x) * 2);
   --k-form-textarea-max-width: #{sem.$form-textarea-max-width};
 
   --k-form-query-col-width: #{sem.$form-query-col-width};

package/src/styles/tokens/_semantic.scss

@@ -31,12 +31,12 @@ $form-control-height: 32px !default;
 $form-control-font-size: typo.$font-size-medium !default;
 /** 控件理想宽度；空间充足时不超过此值 */
 $form-control-max-width: 300px !default;
-/** 控件最小宽度；缩到此值后才换列，避免过早折行 */
+/** 控件最小宽度；缩到此值后停止，再窄由外层滚动 */
 $form-control-min-width: 200px !default;
 /** grid 单列最小宽 = label + 控件 min；运行时随 --k-form-label-width 变化 */
 $form-grid-min-col: calc(#{$form-label-width} + #{$form-control-min-width}) !default;
-/** 编辑表单整体最小宽：单列 label+控件理想宽+左右 padding，再窄则横向撑开由容器滚动 */
-$form-min-width: calc(#{$form-label-width} + #{$form-control-max-width} + #{$form-padding-x} * 2) !default;
+/** 编辑表单整体最小宽：label+控件min+左右 padding，保证能从 max 缩到 min */
+$form-min-width: calc(#{$form-label-width} + #{$form-control-min-width} + #{$form-padding-x} * 2) !default;
 $form-textarea-max-width: 500px !default;
 
 $form-query-col-width: 320px !default;