@aplus-frontend/ui 0.6.0-beta.2 → 0.6.0-beta.21

package/theme/antd-global-overwrite/aplus/table.less

@@ -2,139 +2,9 @@
 
 @tw: ~'@{ns}-ap-table__table-wrapper';
 @sb: ~'@{ns}-scroll-bar';
-// vben表格
-// 新增对sticky表格的样式类型
-[class$='-basic-table'],
-[class$='-basic-table-form-container'],
-[class$='-basic-table ap-table--sticky'],
-[class$='-basic-table-form-container ap-table--sticky'] {
-  width: 100%;
-  height: 100%;
 
-  .ant-table-wrapper {
-    // 自定义title样式
-    .ant-table.ant-table.ant-table-small .ant-table-title,
-    .ant-table.ant-table.ant-table-middle .ant-table-title {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      min-height: 40px;
-      padding: 0 0 10px;
-      border: none;
-    }
-
-    // ①-表格公共样式
-    .ant-table {
-      width: 100%;
-      overflow-x: hidden;
-      border-radius: 0;
-      // 自定义 header 样式
-      .ant-table-container .ant-table-header {
-        border-radius: 0;
-
-        .ant-table-thead > tr > th {
-          color: #182948;
-          font-weight: 700;
-          font-size: 14px;
-          font-style: normal;
-          text-align: left;
-          text-transform: none;
-          background: #f2f6f9;
-          // 去掉ant表头竖线
-          &::before {
-            display: none;
-            width: 0;
-            visibility: hidden;
-          }
-        }
-      }
-
-      // 自定义 body 样式
-      &-body {
-        .ant-table-tbody > tr.ant-table-row {
-          &:hover {
-            background: #f6f9fa;
-          }
-
-          &:hover > td {
-            background: #f6f9fa;
-          }
-        }
-
-        .ant-table-tbody > tr.ant-table-row > td {
-          color: #182948;
-          font-weight: 400;
-          font-size: 14px;
-          font-style: normal;
-          text-align: left;
-          text-transform: none;
-          transition: unset; // 解决表格td，hover延迟
-        }
-      }
-    }
-
-    // ②-基础性表格样式
-    .ant-table.ant-table-middle {
-      .ant-table-container {
-        // 表头
-        .ant-table-thead {
-          tr > th {
-            padding: 12px 16px; //表头内边距16px
-            line-height: 22px;
-          }
-        }
-        // 单元格
-        .ant-table-tbody {
-          tr.ant-table-measure-row + tr > td {
-            border-top: 1px solid;
-            border-top-color: transparent;
-          }
-
-          tr > .ant-table-cell {
-            padding: 12px 16px; // 表格单元格内边距16px
-            line-height: 22px; // 基础表格单元格行高
-          }
-        }
-      }
-    }
-
-    // ③-紧凑型表格样式
-    .ant-table.ant-table-small {
-      .ant-table-container {
-        .ant-table-thead {
-          tr > th {
-            padding: 10.5px 16px; //紧凑型表格表头
-            line-height: 18px;
-          }
-        }
-
-        .ant-table-tbody {
-          tr.ant-table-measure-row + tr > td {
-            border-top: 1px solid;
-            border-top-color: transparent;
-          }
-
-          tr > .ant-table-cell {
-            padding: 10.5px 16px; // 紧凑型表格高度单元格
-            line-height: 18px;
-          }
-        }
-      }
-    }
-  }
-}
-
-// vben表格的斑马纹
-[class$='-basic-table-row__striped'] {
-  td {
-    background-color: #f6f9fa;
-  }
-}
-
-// 三种表格（ApTable，BacisTable，ProTable）的表头+分页器的sticky定位样式
-[class*='-basic-table'].ap-table--sticky,
-[class*='-ap-table'].ap-table--sticky,
-[class*='-pro-table'].ap-table--sticky {
+// ApTable的表头+分页器的sticky定位样式
+[class*='-ap-table'].ap-table--sticky {
   .@{tw},
   .ant-table-wrapper {
     &:has(ul.ant-pagination) {
@@ -168,7 +38,7 @@
 
       &:has(ul.ant-pagination) {
         .@{sb} {
-          bottom: 48px;
+          bottom: 44px;
         }
       }
 
@@ -177,7 +47,7 @@
         bottom: 0;
         z-index: 90;
         margin: 0;
-        padding: 12px 0;
+        padding: 8px 0;
         background-color: #ffffff;
       }
 

package/theme/antd-global-overwrite/aplus/tooltip.css

@@ -0,0 +1,3 @@
+.ant-tooltip div[role='tooltip'] {
+  padding-block: 6px;
+}

package/theme/antd-global-overwrite/aplus/tooltip.less

@@ -0,0 +1,3 @@
+.ant-tooltip div[role='tooltip'] {
+  padding-block: 6px;
+}

package/theme/ap-action/item-dropdown.css

@@ -2,12 +2,30 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0 0 0 / 85%);
+  color: #182948;
   font-size: 12px;
   font-family: inherit;
   line-height: 1.5;
   list-style: none;
 }
+.reset-scrollbar ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb {
+  background-color: var(--ap-scrollbar-thumb-color-base);
+  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(--ap-scrollbar-thumb-color-hover);
+}
 .clear-fix::before {
   display: table;
   content: '';

package/theme/ap-action/item.css

@@ -2,12 +2,30 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0 0 0 / 85%);
+  color: #182948;
   font-size: 12px;
   font-family: inherit;
   line-height: 1.5;
   list-style: none;
 }
+.reset-scrollbar ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb {
+  background-color: var(--ap-scrollbar-thumb-color-base);
+  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(--ap-scrollbar-thumb-color-hover);
+}
 .clear-fix::before {
   display: table;
   content: '';
@@ -30,7 +48,7 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0 0 0 / 85%);
+  color: #182948;
   font-size: 12px;
   font-family: inherit;
   line-height: 1.5;
@@ -39,19 +57,19 @@
   cursor: pointer;
 }
 .aplus-action-item--primary {
-  color: var(--ap-action-color-primary-base, #0070FF);
+  color: var(--ap-color-link);
 }
 .aplus-action-item--primary:not(.aplus-action-item--disabled):hover {
-  color: var(--ap-action-color-primary-hover, #66A9FF);
+  color: var(--ap-color-link-hover);
 }
 .aplus-action-item--success {
-  color: var(--ap-action-color-success, #2ED1A3);
+  color: var(--ap-color-success);
 }
 .aplus-action-item--error {
-  color: var(--ap-action-color-error, #FF4D4F);
+  color: var(--ap-color-error);
 }
 .aplus-action-item--warn {
-  color: var(--ap-action-color-warn, #FFA940);
+  color: var(--ap-color-warn);
 }
 .aplus-action-item--loading {
   opacity: 0.35;
@@ -62,6 +80,17 @@
   margin-right: 4px;
 }
 .aplus-action-item--disabled {
-  color: #CCE2FF;
   cursor: not-allowed;
 }
+.aplus-action-item--primary.aplus-action-item--disabled {
+  color: var(--ap-color-link-disabled);
+}
+.aplus-action-item--success.aplus-action-item--disabled {
+  color: var(--ap-color-success-disabled);
+}
+.aplus-action-item--error.aplus-action-item--disabled {
+  color: var(--ap-color-error-disabled);
+}
+.aplus-action-item--warn.aplus-action-item--disabled {
+  color: var(--ap-color-warn-disabled);
+}

package/theme/ap-action/item.less

@@ -9,22 +9,22 @@
   cursor: pointer;
   // 因为这里action-item类似于button type=link 所以主色=link色
   &--primary {
-    color: var(--ap-action-color-primary-base, #0070FF);
+    color: var(--ap-color-link);
     &:not(.@{aid}):hover {
-      color: var(--ap-action-color-primary-hover, #66A9FF);
+      color: var(--ap-color-link-hover);
     }
   }
 
   &--success {
-    color: var(--ap-action-color-success, #2ED1A3);
+    color: var(--ap-color-success);
   }
 
   &--error {
-    color: var(--ap-action-color-error, #FF4D4F);
+    color: var(--ap-color-error);
   }
 
   &--warn {
-    color: var(--ap-action-color-warn, #FFA940);
+    color: var(--ap-color-warn);
   }
 
   &--loading {
@@ -37,7 +37,19 @@
   }
 
   &--disabled {
-    color: #CCE2FF;
     cursor: not-allowed;
   }
+
+  &--primary&--disabled {
+    color: var(--ap-color-link-disabled);
+  }
+  &--success&--disabled {
+    color: var(--ap-color-success-disabled);
+  }
+  &--error&--disabled {
+    color: var(--ap-color-error-disabled);
+  }
+  &--warn&--disabled {
+    color: var(--ap-color-warn-disabled);
+  }
 });

package/theme/ap-appendix/ap-appendix.css

@@ -2,12 +2,30 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0 0 0 / 85%);
+  color: #182948;
   font-size: 12px;
   font-family: inherit;
   line-height: 1.5;
   list-style: none;
 }
+.reset-scrollbar ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb {
+  background-color: var(--ap-scrollbar-thumb-color-base);
+  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(--ap-scrollbar-thumb-color-hover);
+}
 .clear-fix::before {
   display: table;
   content: '';
@@ -38,11 +56,11 @@
   height: min-content;
 }
 .aplus-ap-appendix__file-area {
-  margin-top: 16px;
+  margin-top: 12px;
 }
 .aplus-ap-appendix__file-area--border {
-  border: 1px dashed var(--ap-appendix-area-color-border, #DEE4ED);
-  padding: 16px 20px;
+  border: 1px dashed var(--ap-border-color-base);
+  padding: 12px;
   border-radius: 4px;
 }
 .aplus-ap-appendix__file-area-content {
@@ -69,7 +87,7 @@
 }
 .aplus-ap-appendix__file-area-content-item-icon svg {
   width: 16px;
-  color: var(--ap-appendix-area-color-icon, #ABB7CC);
+  color: var(--ap-text-color-4);
 }
 .aplus-ap-appendix__file-area-content-item-file-name {
   min-width: 0;
@@ -82,18 +100,18 @@
 .aplus-ap-appendix__file-area-content-item-file-name .ant-typography {
   font-size: 12px;
   line-height: 1.5;
-  color: var(--ap-appendix-area-color-font, #182948);
+  color: var(--ap-text-color-2);
   transition: color 0.2s;
 }
 .aplus-ap-appendix__file-area-content-item-content:hover .ant-typography {
-  color: var(--ap-appendix-area-color-font-hover, #0070ff);
+  color: var(--ap-color-link);
 }
 .aplus-ap-appendix__file-area-content-item--loading-content {
   cursor: not-allowed;
 }
 .aplus-ap-appendix__file-area-content-item--loading .ant-typography {
-  color: var(--ap-appendix-area-color-font-disabled, #ABB7CC);
+  color: var(--ap-text-color-4);
 }
 .aplus-ap-appendix__file-area-content-item--loading-content:hover .ant-typography {
-  color: var(--ap-appendix-area-color-font-disabled, #ABB7CC);
+  color: var(--ap-text-color-4);
 }

package/theme/ap-appendix/ap-appendix.less

@@ -12,10 +12,10 @@
     height: min-content;
   }
   &__file-area {
-    margin-top: 16px;
+    margin-top: 12px;
     &--border{
-      border: 1px dashed var(--ap-appendix-area-color-border,#DEE4ED);
-      padding: 16px 20px;
+      border: 1px dashed var(--ap-border-color-base);
+      padding: 12px;
       border-radius: 4px;
     }
     &-content {
@@ -36,7 +36,7 @@
           margin-right: 8px;
           svg{
             width: 16px;
-            color: var(--ap-appendix-area-color-icon,#ABB7CC);
+            color: var(--ap-text-color-4);
           }
         }
         &-file-name{
@@ -48,13 +48,13 @@
           .ant-typography{
             font-size: @font-size-base;
             line-height: @line-height-base;
-            color: var(--ap-appendix-area-color-font,#182948);
+            color: var(--ap-text-color-2);
             transition: color 0.2s;
           }
         }
         &-content:hover{
           .ant-typography{
-            color: var(--ap-appendix-area-color-font-hover,#0070ff);
+            color: var(--ap-color-link);
           }
         }
         &--loading{
@@ -62,11 +62,11 @@
             cursor: not-allowed;
           }
           .ant-typography{
-            color: var(--ap-appendix-area-color-font-disabled,#ABB7CC);
+            color: var(--ap-text-color-4);
           }
           &-content:hover{
             .ant-typography{
-              color: var(--ap-appendix-area-color-font-disabled,#ABB7CC);
+              color: var(--ap-text-color-4);
             }
           }
         }

package/theme/ap-attachment/ap-attachment.css

@@ -2,12 +2,30 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0 0 0 / 85%);
+  color: #182948;
   font-size: 12px;
   font-family: inherit;
   line-height: 1.5;
   list-style: none;
 }
+.reset-scrollbar ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb {
+  background-color: var(--ap-scrollbar-thumb-color-base);
+  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(--ap-scrollbar-thumb-color-hover);
+}
 .clear-fix::before {
   display: table;
   content: '';
@@ -61,6 +79,7 @@
 .aplus-ap-attachment__more {
   display: inline-block;
   font-size: 12px;
+  line-height: 1.5;
   cursor: pointer;
   color: var(--download-main-color);
 }
@@ -77,7 +96,7 @@
 .aplus-ap-attachment__file-item {
   flex: 1;
   word-wrap: break-word;
-  margin-bottom: 16px;
+  margin-bottom: 12px;
   font-size: 12px;
   color: #000;
   cursor: pointer;

package/theme/ap-attachment/ap-attachment.less

@@ -35,6 +35,7 @@
   &__more{
     display: inline-block;
     font-size: @font-size-base;
+    line-height: @line-height-base;
     cursor: pointer;
     color: var(--download-main-color);
     &:hover{
@@ -47,12 +48,11 @@
     flex-direction: column;
     margin:0;
     padding:0;
-    
   }
   &__file-item{
     flex:1;
     word-wrap: break-word;
-    margin-bottom: 16px;
+    margin-bottom: 12px;
     font-size: @font-size-base;
     color:#000;
     cursor: pointer;

package/theme/ap-batch-action/ap-batch-action.css

@@ -2,12 +2,30 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0 0 0 / 85%);
+  color: #182948;
   font-size: 12px;
   font-family: inherit;
   line-height: 1.5;
   list-style: none;
 }
+.reset-scrollbar ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb {
+  background-color: var(--ap-scrollbar-thumb-color-base);
+  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(--ap-scrollbar-thumb-color-hover);
+}
 .clear-fix::before {
   display: table;
   content: '';
@@ -44,10 +62,10 @@
   display: flex;
   align-items: center;
   font-size: 12px;
-  color: var(--ap-batch-action-color-font, #8896b0);
+  color: var(--ap-text-color-3);
 }
 .aplus-ap-batch-action-body .selected-desc-conut span {
-  color: var(--ap-batch-action-color-active, #0070ff);
+  color: var(--ap-color-primary);
   font-weight: bold;
   min-width: 10px;
   text-align: center;
@@ -63,5 +81,5 @@
   width: 100%;
   padding-bottom: 8px;
   margin-bottom: 8px;
-  border-bottom: 1px solid var(--ap-batch-action-color-border, #E9EDF3);
+  border-bottom: 1px solid var(--ap-color-bg);
 }

package/theme/ap-batch-action/ap-batch-action.less

@@ -15,9 +15,9 @@
         display: flex;
         align-items: center;
         font-size: @font-size-base;
-        color: var(--ap-batch-action-color-font,#8896b0);
+        color: var(--ap-text-color-3);
         span{
-          color: var(--ap-batch-action-color-active,#0070ff);
+          color: var(--ap-color-primary);
           font-weight: bold;
           min-width: 10px;
           text-align: center;
@@ -36,6 +36,6 @@
     width: 100%;
     padding-bottom: 8px;
     margin-bottom: 8px;
-    border-bottom: 1px solid var(--ap-batch-action-color-border,#E9EDF3);
+    border-bottom: 1px solid var(--ap-color-bg);
   }
 });

package/theme/ap-button/ap-button.css

@@ -2,12 +2,30 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0 0 0 / 85%);
+  color: #182948;
   font-size: 12px;
   font-family: inherit;
   line-height: 1.5;
   list-style: none;
 }
+.reset-scrollbar ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb {
+  background-color: var(--ap-scrollbar-thumb-color-base);
+  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(--ap-scrollbar-thumb-color-hover);
+}
 .clear-fix::before {
   display: table;
   content: '';

package/theme/ap-card/ap-card.css

@@ -2,12 +2,30 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0 0 0 / 85%);
+  color: #182948;
   font-size: 12px;
   font-family: inherit;
   line-height: 1.5;
   list-style: none;
 }
+.reset-scrollbar ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb {
+  background-color: var(--ap-scrollbar-thumb-color-base);
+  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(--ap-scrollbar-thumb-color-hover);
+}
 .clear-fix::before {
   display: table;
   content: '';
@@ -34,5 +52,5 @@
   margin-top: 10px;
 }
 .aplus-ap-card-title {
-  margin-bottom: 14px;
+  margin-bottom: 12px;
 }

package/theme/ap-card/ap-card.less

@@ -8,5 +8,5 @@
   }
 });
 .b(ap-card-title,{
-  margin-bottom: 14px;
+  margin-bottom: 12px;
 });