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

package/theme/index.less

@@ -1,3 +1,4 @@
+@import './ui-mode.less';
 @import './ap-action/item.less';
 @import './ap-action/item-dropdown.less';
 @import './ap-attachment/ap-attachment.less';
@@ -13,6 +14,7 @@
 @import './ap-label/ap-label.less';
 @import './ap-ladder/ap-ladder.less';
 @import './ap-product-info/ap-product-info.less';
+@import './ap-copy/ap-copy.less';
 @import './ap-layout/ap-info-layout.less';
 @import './ap-list/index.less';
 @import './ap-select-layout/ap-select-layout.less';
@@ -44,3 +46,5 @@
 @import './mask/index.less';
 @import './splitter/index.less';
 @import './ap-view/ap-view.less';
+@import './ap-radio-group/ap-radio-group.less';
+@import './ap-drawer/ap-drawer.less';

package/theme/mask/index.css

@@ -31,12 +31,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/mixins/config.less

@@ -5,7 +5,7 @@
 @state-prefix: 'is-';
 
 @iconify-bg-color: #5551;
-@text-color-base: rgba(0 0 0 / 85%);
+@text-color-base: #182948;
 @primary-color: #34b77c;
 @error-color: #ed6f6f;
 @warning-color: #efbd47;

package/theme/mixins/mixins.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/mixins/mixins.less

@@ -19,6 +19,31 @@
   list-style: none;
 }
 
+// 通用滚动条重设样式，高度为10px，视觉高度为8px
+.reset-scrollbar {
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--ap-scrollbar-thumb-color-base);
+    background-clip: content-box;
+    border: 1px solid transparent;
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-track,
+  ::-webkit-scrollbar-corner {
+    background-color: var(--ap-table-header-bg, #f2f6f9);
+  }
+
+  ::-webkit-scrollbar-thumb:hover,
+  ::-webkit-scrollbar-thumb:active {
+    background-color: var(--ap-scrollbar-thumb-color-hover);
+  }
+}
+
 .clear-fix {
   &::before {
     display: table;

package/theme/scroll-bar/index.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/scroll-view/index.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/splitter/index.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: '';
@@ -36,7 +54,7 @@
   position: absolute;
   z-index: 1;
   display: none;
-  background: var(--basic-color-primary, #0070ff);
+  background: var(--ap-color-primary);
   opacity: 0.2;
   transition: none;
   pointer-events: none;
@@ -45,7 +63,7 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: rgba(0 0 0 / 85%);
+  color: #182948;
   font-size: 12px;
   line-height: 1.5;
   list-style: none;
@@ -119,7 +137,7 @@
   background: rgba(0, 0, 0, 0.04);
   font-size: 10px;
   border-radius: 2px;
-  color: rgba(0 0 0 / 85%);
+  color: #182948;
   cursor: pointer;
   opacity: 0;
   display: flex;
@@ -159,7 +177,7 @@
   position: absolute;
   z-index: 1;
   display: none;
-  background: var(--basic-color-primary, #0070ff);
+  background: var(--ap-color-primary);
   opacity: 0.2;
   transition: none;
   pointer-events: none;
@@ -207,7 +225,7 @@
   position: absolute;
   z-index: 1;
   display: none;
-  background: var(--basic-color-primary, #0070ff);
+  background: var(--ap-color-primary);
   opacity: 0.2;
   transition: none;
   pointer-events: none;

package/theme/splitter/index.less

@@ -12,7 +12,7 @@
   position: absolute;
   z-index: 1;
   display: none;
-  background: var(--basic-color-primary, #0070ff);
+  background: var(--ap-color-primary);
   opacity: 0.2;
   transition: none;
   pointer-events: none;

package/theme/text/group.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/text/index.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;
@@ -45,7 +63,7 @@
 .aplus-ap-text__label {
   display: inline-flex;
   align-items: baseline;
-  color: var(--ap-text-label-color, #8896b0);
+  color: var(--ap-text-color-3);
 }
 .aplus-ap-text__label::after {
   content: ':';
@@ -69,11 +87,11 @@
   line-height: 1;
 }
 .aplus-ap-text span.ant-typography {
-  color: var(--ap-text-content-color-major, #182948);
+  color: var(--ap-text-color-2);
 }
 .aplus-ap-text span.ant-typography.ant-typography-secondary {
-  color: var(--ap-text-content-color-minor, #8896b0);
+  color: var(--ap-text-color-3);
 }
 .aplus-ap-text a.ant-typography {
-  color: var(--basic-color-primary, #0070ff);
+  color: var(--ap-color-link);
 }

package/theme/text/index.less

@@ -12,7 +12,7 @@
   &__label {
     display: inline-flex;
     align-items: baseline;
-    color: var(--ap-text-label-color, #8896b0);
+    color: var(--ap-text-color-3);
     &::after {
       content: ':';
       position: relative;
@@ -38,12 +38,12 @@
     }
   }
   span.ant-typography {
-    color: var(--ap-text-content-color-major, #182948);
+    color: var(--ap-text-color-2);
   }
   span.ant-typography.ant-typography-secondary {
-    color: var(--ap-text-content-color-minor, #8896b0);
+    color: var(--ap-text-color-3);
   }
   a.ant-typography {
-    color: var(--basic-color-primary, #0070ff);
+    color: var(--ap-color-link);
   }
 });

package/theme/ui-mode.css

@@ -0,0 +1,58 @@
+[data-aplus-ui-mode='aplus'] {
+  --ap-border-color-base: #dee4ed;
+  --ap-hover-color-base: #66a9ff;
+  --ap-active-color-base: #66a9ff;
+  --ap-color-primary: #0070ff;
+  --ap-color-primary-disabled: #cce2ff;
+  --ap-color-link: #0070ff;
+  --ap-color-link-hover: #66a9ff;
+  --ap-color-link-disabled: #cce2ff;
+  --ap-form-bordered-shadow-color: rgba(5, 155, 255, 0.1);
+  --ap-color-success: #2ed1a3;
+  --ap-color-success-disabled: #d5f6ed;
+  --ap-color-error: #ff4d4f;
+  --ap-color-error-disabled: #ffdbdc;
+  --ap-color-warn: #ffa940;
+  --ap-color-warn-disabled: #ffeed9;
+  --ap-table-header-bg: #f2f6f9;
+  --ap-text-color-1: #526a90;
+  --ap-text-color-2: #182948;
+  --ap-text-color-3: #8896b0;
+  --ap-color-bg: #e9edf3;
+  --ap-color-bg-1: #f6f9fa;
+  --ap-color-bg-2: #f3f5f8;
+  --ap-scrollbar-thumb-color-base: #c8d1de;
+  --ap-scrollbar-thumb-color-hover: #959ca7;
+  --ap-text-color-4: #abb7cc;
+  --batch-input-group-trigger-color-disabled: rgba(24, 41, 72, 0.25);
+  --ap-radio-group-item-active-bg-color: rgba(0, 112, 255, 0.12);
+}
+[data-aplus-ui-mode='admin'] {
+  --ap-border-color-base: #d9d9d9;
+  --ap-hover-color-base: #85d4b0;
+  --ap-active-color-base: #85d4b0;
+  --ap-color-primary: #34b77c;
+  --ap-color-primary-disabled: #d6f1e5;
+  --ap-color-link: #1890ff;
+  --ap-color-link-hover: #5eb1ff;
+  --ap-color-link-disabled: #cce2ff;
+  --ap-form-bordered-shadow-color: rgba(11, 166, 66, 0.09);
+  --ap-color-success: #34b77c;
+  --ap-color-success-disabled: #d6f1e5;
+  --ap-color-error: #ff4d4f;
+  --ap-color-error-disabled: #ffdbdc;
+  --ap-color-warn: #faad14;
+  --ap-color-warn-disabled: #ffeed9;
+  --ap-table-header-bg: #f7f7f7;
+  --ap-text-color-1: #666666;
+  --ap-text-color-2: #333333;
+  --ap-text-color-3: #999999;
+  --ap-color-bg: #e9e9e9;
+  --ap-color-bg-1: #f6f9fa;
+  --ap-color-bg-2: #f5f5f5;
+  --ap-scrollbar-thumb-color-base: #bfbfbf;
+  --ap-scrollbar-thumb-color-hover: #787878;
+  --ap-text-color-4: #bfbfbf;
+  --batch-input-group-trigger-color-disabled: rgba(0, 0, 0, 0.25);
+  --ap-radio-group-item-active-bg-color: rgba(52, 183, 124, 0.12);
+}

package/theme/ui-mode.less

@@ -0,0 +1,107 @@
+[data-aplus-ui-mode='aplus'] {
+  // 基础边框颜色
+  --ap-border-color-base: #dee4ed;
+  // 基础hover色
+  --ap-hover-color-base: #66a9ff;
+  // 基础active色
+  --ap-active-color-base: #66a9ff;
+  // 系统主色
+  --ap-color-primary: #0070ff;
+  // 主色-禁用
+  --ap-color-primary-disabled: #cce2ff;
+  // 链接色
+  --ap-color-link: #0070ff;
+  // 链接hover色
+  --ap-color-link-hover: #66a9ff;
+  // 链接色禁用
+  --ap-color-link-disabled: #cce2ff;
+  // 表单项边框样式阴影色
+  --ap-form-bordered-shadow-color: rgba(5, 155, 255, 0.1);
+  // 成功色
+  --ap-color-success: #2ed1a3;
+  // 成功色-禁用
+  --ap-color-success-disabled: #d5f6ed;
+  // 失败色
+  --ap-color-error: #ff4d4f;
+  // 失败色-禁用
+  --ap-color-error-disabled: #ffdbdc;
+  // 警告色
+  --ap-color-warn: #ffa940;
+  // 警告色-禁用
+  --ap-color-warn-disabled: #ffeed9;
+  // 表格表头背景色
+  --ap-table-header-bg: #f2f6f9;
+  // 文本颜色1号色
+  --ap-text-color-1: #526a90;
+  // 文本颜色二号色（着重）
+  --ap-text-color-2: #182948;
+  // 文本颜色三号色（次级）
+  --ap-text-color-3: #8896b0;
+  // 基础背景色（某些边框也使用此颜色）
+  --ap-color-bg: #e9edf3;
+  // 背景色-1
+  --ap-color-bg-1: #f6f9fa;
+  // 背景色-2
+  --ap-color-bg-2: #f3f5f8;
+  // 滚动条滑块颜色
+  --ap-scrollbar-thumb-color-base: #c8d1de;
+  // 滚动条滑动块hover色
+  --ap-scrollbar-thumb-color-hover: #959ca7;
+  // 文本颜色4号色（三级）
+  --ap-text-color-4: #abb7cc;
+  // 批量输入组禁用色
+  --batch-input-group-trigger-color-disabled: rgba(24, 41, 72, 0.25);
+  --ap-radio-group-item-active-bg-color: rgba(#0070ff, 0.12);
+}
+
+[data-aplus-ui-mode='admin'] {
+  --ap-border-color-base: #d9d9d9;
+  --ap-hover-color-base: #85d4b0;
+  --ap-active-color-base: #85d4b0;
+  // 系统主色
+  --ap-color-primary: #34b77c;
+  // 主色-禁用
+  --ap-color-primary-disabled: #d6f1e5;
+  // 链接色
+  --ap-color-link: #1890ff;
+  // 链接hover色
+  --ap-color-link-hover: #5eb1ff;
+  // 链接色禁用
+  --ap-color-link-disabled: #cce2ff;
+  --ap-form-bordered-shadow-color: rgba(11, 166, 66, 0.09);
+  // 成功色
+  --ap-color-success: #34b77c;
+  // 成功色-禁用
+  --ap-color-success-disabled: #d6f1e5;
+  // 失败色
+  --ap-color-error: #ff4d4f;
+  // 失败色-禁用
+  --ap-color-error-disabled: #ffdbdc;
+  // 警告色
+  --ap-color-warn: #faad14;
+  // 警告色-禁用
+  --ap-color-warn-disabled: #ffeed9;
+  // 表格表头背景色
+  --ap-table-header-bg: #f7f7f7;
+  // 文本颜色1号色
+  --ap-text-color-1: #666666;
+  // 文本颜色二号色（着重）
+  --ap-text-color-2: #333333;
+  // 文本颜色三号色（次级）
+  --ap-text-color-3: #999999;
+  // 基础背景色（某些边框也使用此颜色）
+  --ap-color-bg: #e9e9e9;
+  // 背景色-1
+  --ap-color-bg-1: #f6f9fa;
+  // 背景色-2
+  --ap-color-bg-2: #f5f5f5;
+  // 滚动条滑动块基础色
+  --ap-scrollbar-thumb-color-base: #bfbfbf;
+  // 滚动条滑动块基础色
+  --ap-scrollbar-thumb-color-hover: #787878;
+  // 文本颜色4号色（三级）
+  --ap-text-color-4: #bfbfbf;
+  // 批量输入组禁用色
+  --batch-input-group-trigger-color-disabled: rgba(0, 0, 0, 0.25);
+  --ap-radio-group-item-active-bg-color: rgba(#34b77c, 0.12);
+}

package/theme/work-order-modal/index.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: '';