@kayak-sj/design 1.0.52 → 1.0.54

package/package.json

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

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

@@ -7,9 +7,28 @@
   flex-wrap: wrap;
 
   /// 编辑/弹窗：Grid 多列 + 右对齐标签
+  /// auto-fit：列最小宽给足「偏宽 label(含 tip) + 300px 控件」，不够两列时先换行，不改 label 宽度算法
   &--grid-layout {
     display: grid;
-    grid-template-columns: repeat(var(--k-form-cols, 2), minmax(0, 1fr));
+    /* 面板再窄也不把控件压扁，由外层滚动条横向承载 */
+    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, 450px),
+            calc(
+              (100% - (var(--k-form-cols, 2) - 1) * var(--k-form-grid-gap-x)) / var(--k-form-cols, 2)
+            )
+          )
+        ),
+        1fr
+      )
+    );
     column-gap: var(--k-form-grid-gap-x);
     row-gap: 0;
     padding: 4px var(--k-form-padding-x) 0;

package/src/styles/components/_k-handle-page.scss

@@ -5,11 +5,11 @@
   min-height: 100%;
 
   /**
-   * 叠层约定（与 AdminTags 对齐）：
-   * 2  — sticky 壳（本页 header/footer、页签），只压文档流
-   * 10 — 活动等业务面板（如右侧抽屉）
-   * 12 — 本页 loading
-   * 勿把 header/footer 提到 ≥10，否则会盖住面板内 ElImageViewer 预览
+   * 叠层约定（与 AdminTags / 活动布局对齐）：
+   * 2   — sticky 壳（本页 header/footer、页签），只压文档流
+   * 100 — 活动等业务面板（form-panel）
+   * 110 — 本页 loading
+   * 勿把 header/footer 提到 ≥100，否则会盖住业务面板 / Upload 预览
    */
   &__header {
     position: sticky;
@@ -46,7 +46,7 @@
   &__loading {
     position: absolute;
     inset: 0;
-    z-index: 12;
+    z-index: 110;
     display: flex;
     align-items: center;
     justify-content: center;

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

@@ -82,6 +82,8 @@
   --k-form-padding-x: #{sem.$form-padding-x};
   --k-form-padding-y: #{sem.$form-padding-y};
   --k-form-grid-gap-x: #{sem.$form-grid-gap-x};
+  --k-form-grid-min-col: #{sem.$form-grid-min-col};
+  --k-form-min-width: #{sem.$form-min-width};
   --k-form-item-margin-bottom: #{sem.$form-item-margin-bottom};
   --k-form-label-width: #{sem.$form-label-width};
   --k-form-label-width-query: #{sem.$form-label-width-query};

package/src/styles/tokens/_semantic.scss

@@ -24,6 +24,10 @@ $shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08) !default;
 $form-padding-x: 24px !default;
 $form-padding-y: 20px !default;
 $form-grid-gap-x: 24px !default;
+/** grid 单列最小宽度, 两列临界时先换行，避免输入框被挤窄 */
+$form-grid-min-col: 450px !default;
+/** 编辑表单整体最小宽：单列 label+控件+左右 padding，再窄则横向撑开由容器滚动 */
+$form-min-width: calc(#{$form-grid-min-col} + #{$form-padding-x} * 2) !default;
 $form-item-margin-bottom: 20px !default;
 $form-label-width: 110px !default;
 $form-label-width-query: 120px !default;