@aplus-frontend/ui 0.6.0-beta.0 → 0.6.0-beta.10

package/theme/ap-grid/index.less

@@ -10,6 +10,18 @@
 @sb: ~'@{ns}-scroll-bar';
 
 .b(ap-grid, {
+  .reset-scrollbar();
+  .vxe-table .vxe-cell {
+    min-height: unset !important;
+    padding: 9px 12px !important;
+    font-size: @font-size-base;
+    line-height: @line-height-base;
+  }
+  .vxe-table.size--mini .vxe-cell {
+    min-height: unset !important;
+    padding: 6px 9px !important;
+    line-height: @line-height-base;
+  }
   &-adaptive {
     height: 100%;
     display: flex;
@@ -21,7 +33,7 @@
   }
   .@{pg} {
     ul.ant-pagination {
-      margin: 16px 0px 0px;
+      margin-block: @spacing-lg;
     }
   }
   &-sticky {
@@ -30,13 +42,13 @@
       z-index: 10;
       position: sticky;
       bottom: 0;
-      padding-bottom: 16px;
     }
+    // 如果粘贴模式下渲染了自定义滚动条，则隐藏默认滚动条及其区域，重设分页器顶部间距
     &:has(.@{sb}) {
       .@{pg} {
         ul.ant-pagination {
           margin-top: 0;
-          padding-top: 8px;
+          padding-top: 4px;
         }
       }
       .vxe-table--scroll-x-wrapper {
@@ -48,7 +60,12 @@
     }
   }
   &-wrapper {
-    padding: 16px;
+    padding: @spacing;
+    padding-bottom: @spacing-lg;
+    // 如果渲染了分页器，则取消容器的底部边距，防止双重边距
+    &:has(ul.ant-pagination) {
+      padding-bottom: 0;
+    }
     background-color: #fff;
   }
   &-wrapper&-sticky {
@@ -58,9 +75,10 @@
     padding-bottom: 0;
   }
   &__search-wrapper {
-    padding:16px;
+    padding: @spacing;
     padding-bottom: 0;
     background-color: #fff;
+    border-radius: @border-radius;
     margin-bottom: 10px;
   }
   &__table-wrapper {
@@ -72,11 +90,16 @@
     flex-direction: column;
   }
   &__table-wrapper-card {
-    padding: 12px 16px 16px;
+    padding: @spacing;
+    padding-bottom: @spacing-lg;
+    &:has(ul.ant-pagination) {
+      padding-bottom: 0;
+    }
+    border-radius: @border-radius;
     background-color: #fff;
   }
   &-pagination {
-    margin-top: 16px;
+    margin-block: @spacing-lg;
     display: flex;
     flex-wrap: wrap;
     row-gap: 8px;
@@ -95,7 +118,7 @@
   }
   &-header-wrapper {
   }
-  // ApTable中Table的Header区域
+  // ApGrid中表格表头的样式
   &-table-header {
     &__title {
       display: -webkit-inline-box;
@@ -110,15 +133,16 @@
       flex: 1;
     }
   }
-
-  th .vxe-cell--wrapper {
+  // 实现表头不换行排列
+  th.vxe-header--column .vxe-cell--wrapper {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     align-items: center;
+    min-width: unset;
     .vxe-cell--title {
       flex-shrink: 1;
-      flex-grow: 1;
+      flex-grow: 0;
     }
   }
 });

package/theme/ap-group-search/ap-extension-select.css

@@ -2,12 +2,30 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0 0 0 / 85%);
-  font-size: 14px;
+  color: #182948;
+  font-size: 12px;
   font-family: inherit;
-  line-height: 22px;
+  line-height: 1.5;
   list-style: none;
 }
+.reset-scrollbar ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb {
+  background-color: var(--basic-scrollbar-thumb-color-base, #bfbfbf);
+  background-clip: content-box;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.reset-scrollbar ::-webkit-scrollbar-track,
+.reset-scrollbar ::-webkit-scrollbar-corner {
+  background-color: var(--ap-table-header-bg, #f2f6f9);
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb:hover,
+.reset-scrollbar ::-webkit-scrollbar-thumb:active {
+  background-color: var(--basic-scrollbar-thumb-color-hover, #787878);
+}
 .clear-fix::before {
   display: table;
   content: '';
@@ -19,7 +37,7 @@
 }
 .common-style {
   box-sizing: border-box;
-  font-size: 14px;
+  font-size: 12px;
   font-family: inherit;
 }
 .common-style::before,

package/theme/ap-group-search/ap-group-search.css

@@ -2,12 +2,30 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0 0 0 / 85%);
-  font-size: 14px;
+  color: #182948;
+  font-size: 12px;
   font-family: inherit;
-  line-height: 22px;
+  line-height: 1.5;
   list-style: none;
 }
+.reset-scrollbar ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb {
+  background-color: var(--basic-scrollbar-thumb-color-base, #bfbfbf);
+  background-clip: content-box;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.reset-scrollbar ::-webkit-scrollbar-track,
+.reset-scrollbar ::-webkit-scrollbar-corner {
+  background-color: var(--ap-table-header-bg, #f2f6f9);
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb:hover,
+.reset-scrollbar ::-webkit-scrollbar-thumb:active {
+  background-color: var(--basic-scrollbar-thumb-color-hover, #787878);
+}
 .clear-fix::before {
   display: table;
   content: '';
@@ -19,7 +37,7 @@
 }
 .common-style {
   box-sizing: border-box;
-  font-size: 14px;
+  font-size: 12px;
   font-family: inherit;
 }
 .common-style::before,

package/theme/ap-group-search/ap-popover-select.css

@@ -2,12 +2,30 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0 0 0 / 85%);
-  font-size: 14px;
+  color: #182948;
+  font-size: 12px;
   font-family: inherit;
-  line-height: 22px;
+  line-height: 1.5;
   list-style: none;
 }
+.reset-scrollbar ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb {
+  background-color: var(--basic-scrollbar-thumb-color-base, #bfbfbf);
+  background-clip: content-box;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.reset-scrollbar ::-webkit-scrollbar-track,
+.reset-scrollbar ::-webkit-scrollbar-corner {
+  background-color: var(--ap-table-header-bg, #f2f6f9);
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb:hover,
+.reset-scrollbar ::-webkit-scrollbar-thumb:active {
+  background-color: var(--basic-scrollbar-thumb-color-hover, #787878);
+}
 .clear-fix::before {
   display: table;
   content: '';
@@ -19,7 +37,7 @@
 }
 .common-style {
   box-sizing: border-box;
-  font-size: 14px;
+  font-size: 12px;
   font-family: inherit;
 }
 .common-style::before,

package/theme/ap-image/ap-image.css

@@ -2,12 +2,30 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0 0 0 / 85%);
-  font-size: 14px;
+  color: #182948;
+  font-size: 12px;
   font-family: inherit;
-  line-height: 22px;
+  line-height: 1.5;
   list-style: none;
 }
+.reset-scrollbar ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb {
+  background-color: var(--basic-scrollbar-thumb-color-base, #bfbfbf);
+  background-clip: content-box;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.reset-scrollbar ::-webkit-scrollbar-track,
+.reset-scrollbar ::-webkit-scrollbar-corner {
+  background-color: var(--ap-table-header-bg, #f2f6f9);
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb:hover,
+.reset-scrollbar ::-webkit-scrollbar-thumb:active {
+  background-color: var(--basic-scrollbar-thumb-color-hover, #787878);
+}
 .clear-fix::before {
   display: table;
   content: '';
@@ -19,7 +37,7 @@
 }
 .common-style {
   box-sizing: border-box;
-  font-size: 14px;
+  font-size: 12px;
   font-family: inherit;
 }
 .common-style::before,

package/theme/ap-input-radio/ap-input-radio.css

@@ -2,12 +2,30 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0 0 0 / 85%);
-  font-size: 14px;
+  color: #182948;
+  font-size: 12px;
   font-family: inherit;
-  line-height: 22px;
+  line-height: 1.5;
   list-style: none;
 }
+.reset-scrollbar ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb {
+  background-color: var(--basic-scrollbar-thumb-color-base, #bfbfbf);
+  background-clip: content-box;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.reset-scrollbar ::-webkit-scrollbar-track,
+.reset-scrollbar ::-webkit-scrollbar-corner {
+  background-color: var(--ap-table-header-bg, #f2f6f9);
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb:hover,
+.reset-scrollbar ::-webkit-scrollbar-thumb:active {
+  background-color: var(--basic-scrollbar-thumb-color-hover, #787878);
+}
 .clear-fix::before {
   display: table;
   content: '';
@@ -19,7 +37,7 @@
 }
 .common-style {
   box-sizing: border-box;
-  font-size: 14px;
+  font-size: 12px;
   font-family: inherit;
 }
 .common-style::before,

package/theme/ap-label/ap-label.css

@@ -2,12 +2,30 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0 0 0 / 85%);
-  font-size: 14px;
+  color: #182948;
+  font-size: 12px;
   font-family: inherit;
-  line-height: 22px;
+  line-height: 1.5;
   list-style: none;
 }
+.reset-scrollbar ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb {
+  background-color: var(--basic-scrollbar-thumb-color-base, #bfbfbf);
+  background-clip: content-box;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.reset-scrollbar ::-webkit-scrollbar-track,
+.reset-scrollbar ::-webkit-scrollbar-corner {
+  background-color: var(--ap-table-header-bg, #f2f6f9);
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb:hover,
+.reset-scrollbar ::-webkit-scrollbar-thumb:active {
+  background-color: var(--basic-scrollbar-thumb-color-hover, #787878);
+}
 .clear-fix::before {
   display: table;
   content: '';
@@ -19,7 +37,7 @@
 }
 .common-style {
   box-sizing: border-box;
-  font-size: 14px;
+  font-size: 12px;
   font-family: inherit;
 }
 .common-style::before,

package/theme/ap-ladder/ap-ladder.css

@@ -2,12 +2,30 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0 0 0 / 85%);
-  font-size: 14px;
+  color: #182948;
+  font-size: 12px;
   font-family: inherit;
-  line-height: 22px;
+  line-height: 1.5;
   list-style: none;
 }
+.reset-scrollbar ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb {
+  background-color: var(--basic-scrollbar-thumb-color-base, #bfbfbf);
+  background-clip: content-box;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.reset-scrollbar ::-webkit-scrollbar-track,
+.reset-scrollbar ::-webkit-scrollbar-corner {
+  background-color: var(--ap-table-header-bg, #f2f6f9);
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb:hover,
+.reset-scrollbar ::-webkit-scrollbar-thumb:active {
+  background-color: var(--basic-scrollbar-thumb-color-hover, #787878);
+}
 .clear-fix::before {
   display: table;
   content: '';
@@ -19,7 +37,7 @@
 }
 .common-style {
   box-sizing: border-box;
-  font-size: 14px;
+  font-size: 12px;
   font-family: inherit;
 }
 .common-style::before,
@@ -29,7 +47,8 @@
 .aplus-ap-ladder {
   position: relative;
   width: inherit;
-  font-size: 14px;
+  font-size: 12px;
+  line-height: 1.5;
   /** 自动溢出省略 */
   /** Aplus端样式  */
   /** Admin端样式  */
@@ -132,11 +151,11 @@
   margin-left: 4px;
 }
 .aplus-ap-ladder__major {
-  line-height: 22px;
+  line-height: 1.5;
   color: #182948;
 }
 .aplus-ap-ladder__minor {
-  line-height: 22px;
+  line-height: 1.5;
   color: #8896B0;
 }
 .aplus-ap-ladder__label {

package/theme/ap-ladder/ap-ladder.less

@@ -5,7 +5,8 @@
   @root-cls: ~'@{ns}@{common-separator}ap-ladder';
   position: relative;
   width: inherit;
-  font-size: 14px;
+  font-size: @font-size-base;
+  line-height: @line-height-base;
 
 
   &__value-group-item{
@@ -110,11 +111,11 @@
 
   /** Aplus端样式  */
   &__major {
-    line-height: 22px;
+    line-height: @line-height-base;
     color: #182948;
   }
   &__minor {
-    line-height: 22px;
+    line-height: @line-height-base;
     color: #8896B0;
   }
   &__label {

package/theme/ap-layout/ap-info-layout.css

@@ -2,12 +2,30 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0 0 0 / 85%);
-  font-size: 14px;
+  color: #182948;
+  font-size: 12px;
   font-family: inherit;
-  line-height: 22px;
+  line-height: 1.5;
   list-style: none;
 }
+.reset-scrollbar ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb {
+  background-color: var(--basic-scrollbar-thumb-color-base, #bfbfbf);
+  background-clip: content-box;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.reset-scrollbar ::-webkit-scrollbar-track,
+.reset-scrollbar ::-webkit-scrollbar-corner {
+  background-color: var(--ap-table-header-bg, #f2f6f9);
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb:hover,
+.reset-scrollbar ::-webkit-scrollbar-thumb:active {
+  background-color: var(--basic-scrollbar-thumb-color-hover, #787878);
+}
 .clear-fix::before {
   display: table;
   content: '';
@@ -19,7 +37,7 @@
 }
 .common-style {
   box-sizing: border-box;
-  font-size: 14px;
+  font-size: 12px;
   font-family: inherit;
 }
 .common-style::before,

package/theme/ap-list/index.css

@@ -2,12 +2,30 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0 0 0 / 85%);
-  font-size: 14px;
+  color: #182948;
+  font-size: 12px;
   font-family: inherit;
-  line-height: 22px;
+  line-height: 1.5;
   list-style: none;
 }
+.reset-scrollbar ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb {
+  background-color: var(--basic-scrollbar-thumb-color-base, #bfbfbf);
+  background-clip: content-box;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.reset-scrollbar ::-webkit-scrollbar-track,
+.reset-scrollbar ::-webkit-scrollbar-corner {
+  background-color: var(--ap-table-header-bg, #f2f6f9);
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb:hover,
+.reset-scrollbar ::-webkit-scrollbar-thumb:active {
+  background-color: var(--basic-scrollbar-thumb-color-hover, #787878);
+}
 .clear-fix::before {
   display: table;
   content: '';
@@ -19,7 +37,7 @@
 }
 .common-style {
   box-sizing: border-box;
-  font-size: 14px;
+  font-size: 12px;
   font-family: inherit;
 }
 .common-style::before,
@@ -37,7 +55,7 @@
   pointer-events: none;
 }
 .aplus-ap-list__footer {
-  margin-top: 16px;
+  margin-top: 8px;
   display: flex;
   justify-content: flex-end;
 }

package/theme/ap-list/index.less

@@ -1,4 +1,5 @@
 @import '../mixins/mixins.less';
+@import '../mixins/config.less';
 
 @listCls: ~'@{ns}-ap-list';
 @listContentContainerCls: ~'@{listCls}-content-container';
@@ -14,7 +15,7 @@
      }
   }
   &__footer {
-    margin-top: 16px;
+    margin-top: @spacing;
     display: flex;
     justify-content: flex-end;
   }

package/theme/ap-product-info/ap-product-info.css

@@ -2,12 +2,30 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0 0 0 / 85%);
-  font-size: 14px;
+  color: #182948;
+  font-size: 12px;
   font-family: inherit;
-  line-height: 22px;
+  line-height: 1.5;
   list-style: none;
 }
+.reset-scrollbar ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb {
+  background-color: var(--basic-scrollbar-thumb-color-base, #bfbfbf);
+  background-clip: content-box;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.reset-scrollbar ::-webkit-scrollbar-track,
+.reset-scrollbar ::-webkit-scrollbar-corner {
+  background-color: var(--ap-table-header-bg, #f2f6f9);
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb:hover,
+.reset-scrollbar ::-webkit-scrollbar-thumb:active {
+  background-color: var(--basic-scrollbar-thumb-color-hover, #787878);
+}
 .clear-fix::before {
   display: table;
   content: '';
@@ -19,7 +37,7 @@
 }
 .common-style {
   box-sizing: border-box;
-  font-size: 14px;
+  font-size: 12px;
   font-family: inherit;
 }
 .common-style::before,

package/theme/ap-select-layout/ap-select-layout.css

@@ -2,12 +2,30 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0 0 0 / 85%);
-  font-size: 14px;
+  color: #182948;
+  font-size: 12px;
   font-family: inherit;
-  line-height: 22px;
+  line-height: 1.5;
   list-style: none;
 }
+.reset-scrollbar ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb {
+  background-color: var(--basic-scrollbar-thumb-color-base, #bfbfbf);
+  background-clip: content-box;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.reset-scrollbar ::-webkit-scrollbar-track,
+.reset-scrollbar ::-webkit-scrollbar-corner {
+  background-color: var(--ap-table-header-bg, #f2f6f9);
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb:hover,
+.reset-scrollbar ::-webkit-scrollbar-thumb:active {
+  background-color: var(--basic-scrollbar-thumb-color-hover, #787878);
+}
 .clear-fix::before {
   display: table;
   content: '';
@@ -19,7 +37,7 @@
 }
 .common-style {
   box-sizing: border-box;
-  font-size: 14px;
+  font-size: 12px;
   font-family: inherit;
 }
 .common-style::before,
@@ -64,17 +82,17 @@
 .aplus-ap-select-layout-side__header > h3 {
   margin: 0;
   color: #333;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: bold;
-  line-height: 18px;
+  line-height: 1.1 0.57142857;
 }
 .aplus-ap-select-layout-side__header--imgWrap {
   border-radius: 2px;
   cursor: pointer;
-  font-size: 24px;
+  font-size: 20px;
   color: #999;
   display: flex;
-  height: 24px;
+  height: 20px;
 }
 .aplus-ap-select-layout-side__header--imgWrap:hover {
   background: #f5f5f5;
@@ -138,9 +156,9 @@
   margin-right: 10px;
   border-radius: 2px;
   cursor: pointer;
-  font-size: 24px;
+  font-size: 20px;
   display: flex;
-  height: 24px;
+  height: 20px;
   color: #999;
 }
 .aplus-ap-select-layout-content__header--imgWrap:hover {
@@ -148,7 +166,7 @@
 }
 .aplus-ap-select-layout-content__header--title {
   margin: 0;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: bold;
-  line-height: 32px;
+  line-height: 1.1 0.57142857;
 }