yc-pro-components 0.0.24 → 0.0.26

package/theme-chalk/src/form.scss

@@ -31,4 +31,24 @@
     font-size: getCssVar('font-size-base');
     margin-bottom: 18px;
   }
+
+  @include e(row) {
+    width: 100%;
+
+    &--flex {
+      display: flex;
+      flex-wrap: wrap;
+      column-gap: 24px;
+      row-gap: 16px;
+      align-items: flex-end;
+    }
+  }
+
+  @include e(item-wrapper) {
+    width: 100%;
+
+    &--flex {
+      flex: 0 0 auto;
+    }
+  }
 }

package/theme-chalk/src/search.scss

@@ -2,11 +2,136 @@
 @use 'mixins/config' as *;
 
 @include b(search) {
+  --yc-plus-search-field-width: 320px;
+  --yc-plus-search-field-max-width: 400px;
+  --yc-plus-search-label-width: 98px;
+  --yc-plus-search-label-padding-right: 6px;
+  --yc-plus-search-button-padding-left: 64px;
+
+  // 防止搜索表单内容被裁剪（覆盖 el-form 的 overflow: hidden）
+  overflow: visible !important;
+  
+  // 使用组合选择器确保覆盖 el-form 样式
+  &.#{$el-namespace + -form} {
+    overflow: visible !important;
+  }
+
   .#{$plus-namespace + -form__row} {
     row-gap: 18px;
     width: 100%;
   }
 
+  // ========== Flex 布局模式 ==========
+  // 传统 flexbox 布局，表单项固定宽度
+  .#{$plus-namespace + -form__row--flex} {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px 24px;
+    width: 100%;
+  }
+
+  .#{$plus-namespace + -form__item-wrapper--flex} {
+    flex: 0 0 auto;
+    width: auto;
+  }
+
+  .#{$plus-namespace + -form__row--flex} .#{$plus-namespace + -search__button__wrapper} {
+    flex: 1;
+    justify-content: flex-start;
+    padding-left: 36px;
+  }
+
+  // ========== Grid 布局模式 ==========
+  // CSS Grid 自适应布局，使用 auto-fill + minmax 自动计算列数
+  // 每列最小宽度 = label宽度(98px) + field宽度(320px) + 内边距 ≈ 420px
+  --yc-plus-search-column-min-width: 420px;
+  
+  .#{$plus-namespace + -form__row--grid} {
+    display: grid;
+    gap: 16px 24px;
+    width: 100%;
+    
+    // 使用 auto-fill 自动计算列数
+    // min(420px, 100%) 确保最小列宽不超过容器宽度，防止溢出
+    grid-template-columns: repeat(
+      auto-fill, 
+      minmax(min(var(--yc-plus-search-column-min-width, 420px), 100%), 1fr)
+    );
+  }
+
+  .#{$plus-namespace + -form__item-wrapper--grid} {
+    width: 100%;
+  }
+
+  .#{$plus-namespace + -form__row--grid} .#{$plus-namespace + -search__button__wrapper} {
+    justify-content: flex-start;
+    padding-left: 36px;
+  }
+
+  // ========== 通用表单项样式 ==========
+  .#{$plus-namespace + -form-item-field} {
+    // 输入框最小 320px，可伸缩填满父容器
+    min-width: var(--yc-plus-search-field-width, 320px);
+    width: 100%;
+    flex: 1;
+
+    // 确保 Element Plus 日期选择器继承宽度
+    .#{$el-namespace + -date-editor} {
+      width: 100% !important;
+    }
+
+    // 当日期选择器本身就有 plus-form-item-field 类时
+    &.#{$el-namespace + -date-editor} {
+      width: 100% !important;
+    }
+  }
+
+  // Grid 布局下的表单项样式
+  .#{$plus-namespace + -form__row--grid} {
+    .#{$plus-namespace + -form-item} {
+      width: 100%; // 填满整个 Grid 列
+    }
+
+    .#{$el-namespace + -form-item__label} {
+      width: var(--yc-plus-search-label-width, 98px) !important;
+      padding-right: var(--yc-plus-search-label-padding-right, 6px);
+      flex-shrink: 0;
+    }
+    
+    .#{$el-namespace + -form-item__content} {
+      flex: 1; // 拉伸填满剩余空间
+    }
+  }
+
+  // Flex 布局下的表单项样式
+  .#{$plus-namespace + -form__row--flex} {
+    .#{$plus-namespace + -form-item} {
+      width: auto;
+    }
+
+    .#{$el-namespace + -form-item__label} {
+      width: var(--yc-plus-search-label-width, 98px) !important;
+      padding-right: var(--yc-plus-search-label-padding-right, 6px);
+      flex-shrink: 0;
+    }
+    
+    .#{$el-namespace + -form-item__content} {
+      flex: 0 0 auto;
+    }
+
+    // Flex 布局下输入框字段固定 320px 宽度
+    .#{$plus-namespace + -form-item-field} {
+      width: var(--yc-plus-search-field-width, 320px);
+      min-width: var(--yc-plus-search-field-width, 320px);
+      flex: 0 0 auto;
+    }
+
+    // 日期选择器固定 320px 宽度
+    .#{$el-namespace + -date-editor} {
+      width: var(--yc-plus-search-field-width, 320px) !important;
+    }
+  }
+
   &.#{$el-namespace + -form--inline} {
     .#{$el-namespace + -form-item} {
       margin-right: 0;

package/theme-chalk/src/table.scss

@@ -2,6 +2,16 @@
 @use 'mixins/mixins' as *;
 @use 'mixins/function' as *;
 
+/* 宽松模式下表格行高固定为 50px（包含 padding） */
+.el-table--large {
+  .el-table__row {
+    td.el-table__cell {
+      height: 50px;
+      padding: 2px 0;
+    }
+  }
+}
+
 @include b(table) {
   /* 自定义列栏 */
   @include b(table-column) {

package/theme-chalk/src/yc-dialog.scss

@@ -24,6 +24,56 @@
     overflow: hidden;
   }
 
+  /* 标题字重 */
+  .el-dialog__title {
+    font-weight: 500;
+  }
+
+  /* 表头底部边框 - 使用伪元素实现贯穿效果 */
+  .el-dialog__header {
+    position: relative;
+    padding-bottom: 16px;
+
+    /* 关闭按钮位置调整，抵消 padding-bottom 的影响 */
+    .el-dialog__headerbtn {
+      top: 0;
+      transform: translateY(0);
+      width: 32px;
+      height: 32px;
+    }
+
+    &::after {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: -16px;
+      width: calc(100% + 32px);
+      height: 1px;
+      content: "";
+      background-color: #f5f7f9;
+    }
+  }
+
+  /* 无表头边框模式 */
+  &--no-header-border .el-dialog__header::after {
+    display: none;
+  }
+
+  /* 底部 footer 边框 - 使用伪元素实现贯穿效果 */
+  .el-dialog__footer {
+    position: relative;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: -16px;
+      width: calc(100% + 32px);
+      height: 1px;
+      content: "";
+      background-color: #f5f7f9;
+    }
+  }
+
   &__content {
     flex: 1;
     padding: 0;

package/theme-chalk/src/yc-drawer.scss

@@ -34,7 +34,7 @@
         height: 24px;
         font-family: NotoSansSC, PingFangSC, sans-serif;
         font-size: 16px;
-        font-weight: normal;
+        font-weight: 500;
         line-height: 24px;
         color: rgb(0 0 0 / 100%);
         text-align: left;

package/theme-chalk/src/yc-plus-tree.scss

@@ -14,6 +14,7 @@
   .search-input {
     flex-shrink: 0;
     margin-bottom: 16px;
+    padding-right: 24px;
   }
 
   .tree-container {