@kayak-sj/design 1.0.57 → 1.0.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kayak-sj/design",
-  "version": "1.0.57",
+  "version": "1.0.59",
   "type": "module",
   "description": "PC 组件库（Vue3 + Element Plus，对应旧 @kayak/kayak-design-vue2）",
   "license": "ISC",

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

@@ -7,28 +7,14 @@
   flex-wrap: wrap;
 
   /// 编辑/弹窗：Grid 多列 + 右对齐标签
-  /// auto-fit：列最小宽给足「偏宽 label(含 tip) + 300px 控件」，不够两列时先换行，不改 label 宽度算法
+  /// 列数由 --k-form-effective-cols 控制（ResizeObserver：放不下 label+控件min 时降为 1 列）
+  /// min-width：单列也不压过「label + 控件理想宽」，再窄由外层横向滚动
   &--grid-layout {
     display: grid;
-    /* 面板再窄也不把控件压扁，由外层滚动条横向承载 */
     min-width: var(--k-form-min-width);
     width: 100%;
     box-sizing: border-box;
-    grid-template-columns: repeat(
-      auto-fit,
-      minmax(
-        min(
-          100%,
-          max(
-            var(--k-form-grid-min-col),
-            calc(
-              (100% - (var(--k-form-cols, 2) - 1) * var(--k-form-grid-gap-x)) / var(--k-form-cols, 2)
-            )
-          )
-        ),
-        1fr
-      )
-    );
+    grid-template-columns: repeat(var(--k-form-effective-cols, 2), minmax(0, 1fr));
     column-gap: var(--k-form-grid-gap-x);
     row-gap: 0;
     padding: 4px var(--k-form-padding-x) 0;
@@ -42,10 +28,31 @@
       width: 100%;
     }
 
-    .k-form__item--full-row {
+    /// newLineStart 普通字段：靠左占一列，宽度与同列双字段对齐
+    .k-form__item--row-start {
+      grid-column-start: 1;
+    }
+
+    /// Editor / Upload / 日期区间：真正撑满整行
+    .k-form__item--full-row,
+    .k-form__item:has(.k-editor),
+    .k-form__item:has(.k-upload),
+    .k-form__item:has(.k-upload-wrap) {
       grid-column: 1 / -1;
     }
 
+    /// 与 --row-start 配对，占满同行剩余列，避免下一个字段挤上来
+    > .k-form__row-fill {
+      grid-column: 2 / -1;
+      height: 0;
+      margin: 0;
+      padding: 0;
+      border: 0;
+      overflow: hidden;
+      visibility: hidden;
+      pointer-events: none;
+    }
+
     .el-form-item__label {
       flex-shrink: 0;
       height: auto;
@@ -99,6 +106,16 @@
     .el-cascader,
     .k-datePicker {
       max-width: var(--k-form-control-max-width);
+      /* 硬下限：与换行阈值一致，不再随容器无限压扁 */
+      min-width: var(--k-form-control-min-width);
+    }
+
+    /// EP DatePicker 默认 --el-date-editor-width: 220px，与 Input 不对齐；强制跟表单列宽走
+    .el-date-editor,
+    .el-date-editor.el-input,
+    .el-date-editor.el-input__wrapper {
+      width: 100%;
+      --el-date-editor-width: 100%;
     }
 
     .k-form-date-picker--datetimerange,
@@ -137,10 +154,13 @@
     }
 
     .el-form-item__content:has(.k-editor) {
+      flex: 1 1 auto;
+      width: 100%;
       max-width: none;
       line-height: normal;
       overflow: visible;
     }
+
   }
 
   /// 查询面板：按 colLength 分列，空间不足时自动换行
@@ -201,7 +221,8 @@
       max-width: var(--k-form-query-daterange-col-width);
     }
 
-    .k-form__item--full-row {
+    .k-form__item--full-row,
+    .k-form__item--row-start {
       flex: 1 1 100%;
       max-width: none;
     }
@@ -425,6 +446,11 @@
       line-height: normal;
       overflow: visible;
     }
+
+    .el-form-item__content .k-editor {
+      width: 100%;
+      max-width: 100%;
+    }
   }
 
   .k-form-input[type='textarea'] {

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

@@ -92,9 +92,10 @@
   --k-form-control-border: var(--k-color-border);
   --k-form-control-bg: var(--k-color-bg-surface);
   --k-form-control-max-width: #{sem.$form-control-max-width};
-  /// 引用 label / control 变量，便于表单实例覆盖 --k-form-label-width 后自动重算
-  --k-form-grid-min-col: calc(var(--k-form-label-width) + var(--k-form-control-max-width));
-  --k-form-min-width: calc(var(--k-form-grid-min-col) + var(--k-form-padding-x) * 2);
+  --k-form-control-min-width: #{sem.$form-control-min-width};
+  /// 换行阈值 = label + 控件 min；表单整体下限见实例上的 --k-form-min-width（label + 控件 max）
+  --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-textarea-max-width: #{sem.$form-textarea-max-width};
 
   --k-form-query-col-width: #{sem.$form-query-col-width};

package/src/styles/tokens/_semantic.scss

@@ -29,11 +29,14 @@ $form-label-width: 110px !default;
 $form-label-width-query: 120px !default;
 $form-control-height: 32px !default;
 $form-control-font-size: typo.$font-size-medium !default;
+/** 控件理想宽度；空间充足时不超过此值 */
 $form-control-max-width: 300px !default;
-/** grid 单列最小宽 = label + 控件 max；运行时随 --k-form-label-width 变化 */
-$form-grid-min-col: calc(#{$form-label-width} + #{$form-control-max-width}) !default;
-/** 编辑表单整体最小宽：单列 label+控件+左右 padding，再窄则横向撑开由容器滚动 */
-$form-min-width: calc(#{$form-grid-min-col} + #{$form-padding-x} * 2) !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;
 $form-textarea-max-width: 500px !default;
 
 $form-query-col-width: 320px !default;

package/dist/assets/KEditor-LzsE5URl.css

@@ -1 +0,0 @@
-.k-editor[data-v-b9ef08e0]{width:80%}.k-editor__shell[data-v-b9ef08e0]{border:1px solid var(--el-border-color);background:#fff}.k-editor__shell.w-e-full-screen-container[data-v-b9ef08e0]{z-index:4000;background:#fff}.k-editor__shell.w-e-full-screen-container .k-editor__toolbar[data-v-b9ef08e0]{flex:none}.k-editor__shell.w-e-full-screen-container .k-editor__content[data-v-b9ef08e0]{flex:auto!important;height:auto!important;min-height:0!important;max-height:none!important}.k-editor__toolbar[data-v-b9ef08e0]{border-bottom:1px solid var(--el-border-color)}.k-editor__content[data-v-b9ef08e0]{box-sizing:border-box;word-break:break-all;cursor:text;background:#fff;overflow:hidden}.k-editor__tips[data-v-b9ef08e0]{text-align:right;margin:8px 0 0}.k-editor__tips span[data-v-b9ef08e0]{color:var(--el-color-danger);margin-left:5px}.k-editor__readonly[data-v-b9ef08e0]{color:var(--el-text-color-regular);background:var(--el-fill-color-light);border:1px solid var(--el-border-color);word-break:break-all;border-radius:4px;padding:8px 12px}.k-editor__preview[data-v-b9ef08e0]{word-break:break-all;max-height:60vh;overflow:auto}.k-editor[data-v-b9ef08e0] .w-e-text-container{box-sizing:border-box;position:relative;overflow:hidden;height:100%!important}.k-editor[data-v-b9ef08e0] .w-e-scroll{box-sizing:border-box;-webkit-overflow-scrolling:touch;height:100%!important;max-height:100%!important;overflow-y:auto!important}.k-editor[data-v-b9ef08e0] [data-slate-editor]{min-height:100%!important}

package/dist/assets/componentRegistry-CdMmVVcX.css

@@ -1 +0,0 @@
-.k-form-cascader__readonly[data-v-ed0da536]{color:var(--k-color-text-regular);font-size:var(--k-form-control-font-size)}.k-form-checkbox[data-v-fca64c11] .el-checkbox.is-bordered+.el-checkbox.is-bordered{margin-left:0}.k-form-checkbox__readonly[data-v-fca64c11]{color:var(--k-color-text-regular);font-size:var(--k-form-control-font-size)}.k-form-date-picker[data-v-4885818d]{align-items:center;gap:8px;width:100%;max-width:100%;display:flex}.k-form-date-picker[data-v-4885818d] .el-date-editor{width:100%}.k-form-date-picker--datetimerange[data-v-4885818d]{width:fit-content;max-width:100%;display:inline-flex}.k-form-date-picker--datetimerange[data-v-4885818d] .el-date-editor.el-date-editor--datetimerange{flex:none;max-width:100%;width:fit-content!important;min-width:unset!important}.k-form-date-picker--datetimerange[data-v-4885818d] .el-date-editor--datetimerange .el-input__wrapper{padding-left:6px;padding-right:4px}.k-form-date-picker--datetimerange[data-v-4885818d] .el-date-editor--datetimerange .el-range-input{width:150px;min-width:0;max-width:150px;font-size:var(--k-form-control-font-size);flex:0 0 150px}.k-form-date-picker--datetimerange[data-v-4885818d] .el-date-editor--datetimerange .el-range-separator{font-size:var(--k-form-control-font-size);flex-shrink:0;padding:0 1px}.k-form-date-picker--datetimerange[data-v-4885818d] .el-date-editor--datetimerange .el-range__icon{margin-right:-4px}.k-form-date-picker--datetimerange[data-v-4885818d] .el-date-editor--datetimerange .el-range__close-icon{margin-left:-4px}.k-form-date-picker__text[data-v-4885818d]{color:var(--k-color-text-regular);font-size:var(--k-form-control-font-size);white-space:nowrap;flex-shrink:0}.k-form-date-picker__readonly[data-v-4885818d]{color:var(--k-color-text-regular);font-size:var(--k-form-control-font-size);word-break:break-all}.k-form-input-mix-input[data-v-6fdf6265]{vertical-align:top;flex-wrap:wrap;align-items:center;gap:8px;width:auto;max-width:100%;display:inline-flex}.k-form-input-mix-input__control[data-v-6fdf6265]{flex:none;max-width:100%}.k-form-input-mix-input__control[data-v-6fdf6265] .k-form-input{width:100%!important;max-width:none!important}.k-form-input-mix-input__control[data-v-6fdf6265] .el-input{width:100%}.k-form-input-mix-input__control--affix[data-v-6fdf6265] .k-form-input{width:auto!important}.k-form-input-mix-input__control--affix[data-v-6fdf6265] .el-input-group{vertical-align:middle;width:max-content;max-width:100%;display:inline-flex}.k-form-input-mix-input__control--affix[data-v-6fdf6265] .el-input-group .el-input__wrapper{width:var(--k-mix-input-field-width,120px);min-width:var(--k-mix-input-field-width,120px);flex:auto}.k-form-input-mix-input__control--affix[data-v-6fdf6265] .el-input-group__prepend,.k-form-input-mix-input__control--affix[data-v-6fdf6265] .el-input-group__append{white-space:nowrap;flex:none}.k-form-input-mix-input__text[data-v-6fdf6265]{color:var(--k-color-text-regular);font-size:var(--k-form-control-font-size);white-space:nowrap;flex:none}.k-form-input-mix-input--readonly .k-form-input-mix-input__control[data-v-6fdf6265]{width:auto;min-width:0}.k-form-select[data-v-20fc23b7],.k-form-select [data-v-20fc23b7] .el-select{width:100%}.k-form-select__readonly[data-v-20fc23b7]{color:var(--k-color-text-regular);font-size:var(--k-form-control-font-size)}.k-form-input-mix-select[data-v-1f46ef39]{vertical-align:top;width:auto;max-width:100%;display:inline-flex}.k-form-input-mix-select__row[data-v-1f46ef39]{flex-wrap:wrap;align-items:center;width:auto;max-width:100%;display:inline-flex}.k-form-input-mix-select__text[data-v-1f46ef39]{color:var(--k-color-text-regular);font-size:var(--k-form-control-font-size,12px);white-space:nowrap;flex-shrink:0;line-height:1.4}.k-form-input-mix-select__control[data-v-1f46ef39]{flex:none;max-width:100%}.k-form-input-mix-select__control[data-v-1f46ef39] .k-form-input,.k-form-input-mix-select__control[data-v-1f46ef39] .k-form-select{min-width:0;width:100%!important;max-width:none!important}.k-form-input-mix-select__control[data-v-1f46ef39] .el-input,.k-form-input-mix-select__control[data-v-1f46ef39] .el-select{width:100%}.k-form-input-mix-select__control--affix[data-v-1f46ef39] .k-form-input,.k-form-input-mix-select__control--affix[data-v-1f46ef39] .k-form-select{width:auto!important}.k-form-input-mix-select__control--affix[data-v-1f46ef39] .el-input-group{vertical-align:middle;width:max-content;max-width:100%;display:inline-flex}.k-form-input-mix-select__control--affix[data-v-1f46ef39] .el-input-group .el-input__wrapper{width:var(--k-mix-select-field-width,140px);min-width:var(--k-mix-select-field-width,140px);flex:auto}.k-form-input-mix-select__control--affix[data-v-1f46ef39] .el-input-group__prepend,.k-form-input-mix-select__control--affix[data-v-1f46ef39] .el-input-group__append{white-space:nowrap;flex:none}.k-form-input-mix-select--readonly .k-form-input-mix-select__control[data-v-1f46ef39]{width:auto;min-width:0}.k-form-input-number[data-v-acdc4199]{align-items:center;display:flex}.k-form-input-number__side[data-v-acdc4199]{color:var(--k-color-text-regular);white-space:nowrap;font-size:12px}.k-form-input-number__side--left[data-v-acdc4199]{margin-right:5px}.k-form-input-number__side--right[data-v-acdc4199]{margin-left:5px}.k-form-input-number__readonly[data-v-acdc4199]{color:var(--k-color-text-regular);font-size:var(--k-form-control-font-size)}.k-form-radio[data-v-e0ff32b0] .el-radio.is-bordered,.k-form-radio[data-v-e0ff32b0] .el-radio-button{margin-left:0}.k-form-radio__readonly[data-v-e0ff32b0]{color:var(--k-color-text-regular);font-size:var(--k-form-control-font-size)}.k-form-radio-input[data-v-1543c319]{white-space:nowrap;flex-flow:row;align-items:center;max-width:100%;display:inline-flex}.k-form-radio-input__radio[data-v-1543c319]{flex:none}.k-form-radio-input__radio[data-v-1543c319] .el-radio-group{white-space:nowrap;flex-wrap:nowrap;display:inline-flex}.k-form-radio-input__input[data-v-1543c319]{flex:none;width:150px;min-width:150px;max-width:200px;margin-left:10px}.k-form-radio-input__label[data-v-1543c319]{color:var(--k-color-text-regular);flex:none;margin-left:5px;font-size:12px;font-weight:500;line-height:1}.k-form-radio-input__readonly[data-v-1543c319]{color:var(--k-color-text-regular);font-size:var(--k-form-control-font-size);margin-left:6px}.k-form-scroll-select[data-v-dc0bba37]{width:100%;max-width:300px}.k-form-scroll-select__readonly[data-v-dc0bba37]{color:var(--k-color-text-regular);font-size:var(--k-form-control-font-size)}.k-form-select-multiple[data-v-e6ca06e1]{width:100%}.k-form-select-multiple__readonly[data-v-e6ca06e1]{color:var(--k-color-text-regular);font-size:var(--k-form-control-font-size)}.k-form-tag[data-v-9961a98a]{flex-wrap:wrap;gap:8px;display:flex}.k-form-tag__item[data-v-9961a98a]{cursor:pointer}.k-form-tag__item.is-active[data-v-9961a98a]{color:var(--el-color-primary);border-color:var(--el-color-primary)}.k-form-tag__item.is-disabled[data-v-9961a98a]{cursor:not-allowed;opacity:.65}.k-form-tag__item.is-readonly[data-v-9961a98a]{cursor:default}.k-form-text p[data-v-9dc35114]{color:var(--k-color-text-regular);line-height:1.5;font-size:var(--k-form-control-font-size);word-break:break-all;margin:0}.k-form-time-picker[data-v-8680ec2d]{align-items:center;gap:8px;width:100%;max-width:100%;display:flex}.k-form-time-picker[data-v-8680ec2d] .el-date-editor{width:100%}.k-form-time-picker__text[data-v-8680ec2d],.k-form-time-picker__side[data-v-8680ec2d]{color:var(--k-color-text-regular);font-size:var(--k-form-control-font-size);white-space:nowrap;flex-shrink:0}.k-form-time-picker__side--left[data-v-8680ec2d]{margin-right:2px}.k-form-time-picker__side--right[data-v-8680ec2d]{margin-left:2px}.k-form-time-picker__readonly[data-v-8680ec2d]{color:var(--k-color-text-regular);font-size:var(--k-form-control-font-size);word-break:break-all}.k-upload__file-item[data-v-01959ada]{width:100%;height:100%;position:relative}.k-upload__media-play[data-v-01959ada]{border:1px dashed var(--el-border-color);border-radius:var(--el-border-radius-base);background:var(--el-fill-color-light);width:100%;min-width:80px;height:100%;min-height:80px;color:var(--el-color-primary);cursor:pointer;justify-content:center;align-items:center;font-size:22px;display:inline-flex}.k-upload__file-progress[data-v-01959ada]{z-index:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:auto!important;margin:0!important}.k-upload__file-progress[data-v-01959ada] .el-progress-circle{display:block}.k-upload__inline-actions[data-v-aee31b8d]{align-items:center;gap:8px;display:inline-flex}.k-upload__inline-tip[data-v-aee31b8d]{color:var(--el-text-color-secondary);font-size:var(--k-font-size-base,12px);white-space:normal;line-height:1.5}.k-upload__download[data-v-aee31b8d]{height:32px;color:var(--el-color-primary);white-space:nowrap;cursor:pointer;background:0 0;border:0;align-items:center;gap:4px;padding:0 4px;font-size:13px;line-height:1;transition:color .2s,opacity .2s;display:inline-flex}.k-upload__download[data-v-aee31b8d]:hover{color:var(--el-color-primary-light-3)}.k-upload__download[data-v-aee31b8d]:focus-visible{outline:2px solid var(--el-color-primary-light-5);outline-offset:2px;border-radius:4px}.k-upload__download-icon[data-v-aee31b8d]{font-size:14px}.k-upload__tip-icon[data-v-aee31b8d]{border:1px solid var(--el-text-color-secondary);width:16px;height:16px;color:var(--el-text-color-secondary);cursor:help;border-radius:50%;justify-content:center;align-items:center;font-size:12px;font-style:normal;display:inline-flex}.k-upload__media-wrap[data-v-b9720661]{justify-content:center;align-items:center;display:flex}.k-upload__media[data-v-b9720661]{max-width:100%;height:auto}.k-upload__plus[data-v-69cd76c2]{color:var(--el-text-color-secondary);font-size:28px}.k-upload__trigger-row[data-v-69cd76c2]{flex-wrap:wrap;align-items:center;gap:8px;display:inline-flex}.k-upload--limit[data-v-69cd76c2] .el-upload,.k-upload_detail[data-v-69cd76c2] .el-upload{display:none}