amis-ui 3.5.3 → 3.6.0

package/lib/themes/default.css

@@ -2586,6 +2586,7 @@
   --Drawer-widthXs: 12.5rem;
   --Rating-star-margin: var(--sizes-size-5);
   --Rating-star-size: var(--sizes-base-12);
+  --Rating-star-icon-size: var(--sizes-base-9);
   --Rating-star-icon: '<svg class="icon" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="currentColor" d="M4.99672493,4.37617062 L1.28100904,4.93702533 C0.463702827,5.06039054 -0.102812689,5.85030962 0.0156612291,6.70135899 C0.0628630935,7.04043042 0.216147743,7.35382434 0.451761131,7.59297508 L3.14101949,10.3226082 L3.14101949,10.3226082 L2.50531937,14.1787855 C2.3655991,15.0263332 2.91216489,15.8313483 3.72610824,15.9768371 C4.05030943,16.0347866 4.38381497,15.9798039 4.67496871,15.8204054 L7.99934906,14.0003997 L7.99934906,14.0003997 L11.3254267,15.8208814 C12.0564401,16.2209912 12.9605363,15.9282748 13.3447823,15.167081 C13.4978067,14.8639388 13.5505833,14.5167196 13.4949403,14.1791872 L12.859174,10.3226082 L12.859174,10.3226082 L15.5482634,7.59400813 C16.1397301,6.99385103 16.1519752,6.00805341 15.5756136,5.39216751 C15.3460036,5.14681192 15.0450939,4.98715562 14.7195072,4.93793566 L11.0034685,4.37617062 L11.0034685,4.37617062 L9.34151455,0.868493275 C8.97611971,0.0973002947 8.07952072,-0.219434766 7.33890469,0.161045701 C7.04395753,0.312570398 6.80521255,0.561123051 6.65963735,0.868217393 L4.99672493,4.37617062 L4.99672493,4.37617062 Z"></path></svg>';
   --Rating-colors: '[{"value":"#abadb1","id":2},{"value":"#787b81","id":3},{"value":"#ffa900","id":5}]';
   --Rating-text-color: var(--colors-neutral-text-2);
@@ -2695,6 +2696,9 @@
   --Switch-checked-bgColor: var(--switch-default-on-bg-color);
   --Switch-checked-onHover-bgColor: var(--switch-default-on-hover-bg-color);
   --Switch-checked-onActive-bgColor: var(--colors-brand-4);
+  --Switch-spinner-icon-width: var(--sizes-base-7);
+  --Switch-spinner-icon-width--sm: var(--sizes-base-5);
+  --switch-spinner-left--sm: var(--sizes-size-0);
   --collapse-default-top-border-color: var(--colors-neutral-line-8);
   --collapse-default-top-border-width: var(--borders-width-2);
   --collapse-default-top-border-style: var(--borders-style-2);
@@ -3983,7 +3987,6 @@
   --spinner-size-size: var(--sizes-base-16);
   --spinner-lg-size: var(--sizes-base-24);
   --spinner-overlay-bg: var(--colors-neutral-fill-11);
-  --spinner-color: var(--colors-brand-5);
   --Spinner--lg-height: var(--spinner-lg-size);
   --Spinner--lg-width: var(--spinner-lg-size);
   --Spinner--sm-height: var(--spinner-sm-size);
@@ -3993,6 +3996,7 @@
   --Spinner-overlay-bg: rgba(255, 255, 255, 0.4);
   --Spinner-width: var(--spinner-size-size);
   --Spinner-color: var(--spinner-base-color);
+  --Spinner-color--disabled: rgba(0, 0, 0, 0.65);
   --image-image-normal-paddingTop: var(--sizes-size-3);
   --image-image-normal-paddingBottom: var(--sizes-size-3);
   --image-image-normal-paddingLeft: var(--sizes-size-3);
@@ -5005,9 +5009,11 @@
   --colors-neutral-line-9: #f2f3f5;
   --colors-neutral-line-10: #f7f8fa;
   --colors-neutral-line-11: #ffffff;
-  --fonts-base-family: -apple-system, BlinkMacSystemFont, SF Pro SC, SF Pro Text,
-    Helvetica Neue, Helvetica, PingFang SC, Segoe UI, Roboto, Hiragino Sans GB,
-    Arial, microsoft yahei ui, Microsoft YaHei, SimSun, sans-serif;
+  --fonts-base-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica,
+    "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB",
+    "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN",
+    "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti",
+    SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
   --fonts-size-1: 48px;
   --fonts-size-2: 40px;
   --fonts-size-3: 32px;
@@ -14875,6 +14881,13 @@ samp {
 .visibility-sensor {
   min-height: 5px;
 }
+.renderer-error-boundary {
+  padding: 5px;
+  font-family: PingFangSC-Medium;
+  font-size: 14px;
+  color: #cf1322;
+  border: 1px dashed #cf1322;
+}
 html,
 body {
   width: 100%;
@@ -20922,6 +20935,13 @@ input[type=button].cxd-Button--block {
   width: auto;
   height: auto;
 }
+.cxd-Spinner .cxd-Spinner-icon.cxd-Spinner-icon--disabled > svg.icon {
+  color: var(--Spinner-color--disabled);
+  fill: var(--Spinner-color--disabled);
+}
+.cxd-Spinner .cxd-Spinner-icon.cxd-Spinner-icon--disabled > svg.icon path {
+  fill: var(--Spinner-color--disabled);
+}
 .cxd-Spinner .cxd-Spinner-icon--lg {
   width: var(--Spinner--lg-width);
   height: var(--Spinner--lg-height);
@@ -20985,6 +21005,9 @@ input[type=button].cxd-Button--block {
   background: var(--Spinner-overlay-bg);
   transition: ease-out opacity var(--animation-duration);
   opacity: 0;
+  -webkit-backdrop-filter: blur(1px);
+  backdrop-filter: blur(1px);
+  filter: blur(1px);
 }
 .cxd-Spinner-overlay.in {
   opacity: 1;
@@ -23163,8 +23186,11 @@ input[type=button].cxd-Button--block {
 .cxd-Table-table td .cxd-SwitchControl {
   padding-top: 0;
 }
+.cxd-Table-table--affixHeader {
+  margin-top: calc(var(--Table-thead-height) * -1);
+}
 .cxd-Table-table--affixHeader > thead {
-  visibility: collapse;
+  visibility: hidden;
 }
 .cxd-Table-table--withCombine > thead > tr > th:first-child,
 .cxd-Table-table--withCombine > tbody > tr > td:first-child {
@@ -30804,6 +30830,7 @@ input.cxd-TextControl-input-password {
 }
 .cxd-TreeSelection-item {
   position: relative;
+  margin-bottom: 2px;
 }
 .cxd-TreeSelection-item.is-expanded > .cxd-TreeSelection-sublist {
   display: block;
@@ -31194,6 +31221,34 @@ input.cxd-TextControl-input-password {
   width: calc(var(--Switch-height) + 0.125rem);
   border-radius: 10px;
 }
+.cxd-Switch-spinner {
+  position: absolute;
+  top: var(--Switch-slider-margin);
+  bottom: var(--Switch-slider-margin);
+  left: var(--Switch-slider-margin);
+}
+.cxd-Switch-spinner > .cxd-Switch-spinner-icon > svg.icon {
+  width: var(--Switch-spinner-icon-width);
+  height: var(--Switch-spinner-icon-width);
+}
+.cxd-Switch-spinner--sm {
+  position: absolute;
+  top: var(--switch-size-sm-slider-margin);
+  bottom: var(--switch-size-sm-slider-margin);
+  left: var(--switch-spinner-left--sm);
+}
+.cxd-Switch-spinner--sm > .cxd-Switch-spinner-icon > svg.icon {
+  width: var(--Switch-spinner-icon-width--sm);
+  height: var(--Switch-spinner-icon-width--sm);
+}
+.cxd-Switch-spinner.cxd-Switch-spinner--checked {
+  left: calc(100% - var(--Switch-slider-width) - var(--Switch-slider-margin));
+  right: var(--Switch-slider-margin);
+}
+.cxd-Switch-spinner.cxd-Switch-spinner--checked.cxd-Switch-spinner--sm {
+  left: calc(100% - var(--Switch-slider-width--sm) - var(--Switch-slider-margin));
+  right: var(--Switch-slider-margin);
+}
 .cxd-Switch-option {
   vertical-align: middle;
   font-size: var(--switch-option-fontSize);
@@ -32562,6 +32617,14 @@ input.cxd-TextControl-input-password {
 .tangram-suggestion-main {
   display: none !important;
 }
+@media screen and (min-width: 768px) {
+  .cxd-LocationPicker-value {
+    margin-right: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
 .cxd-MatrixControl {
   max-width: 100%;
 }
@@ -35904,6 +35967,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   border-width: var(--Pick-base-top-border-width) var(--Pick-base-right-border-width) var(--Pick-base-bottom-border-width) var(--Pick-base-left-border-width);
   border-style: var(--Pick-base-top-border-style) var(--Pick-base-right-border-style) var(--Pick-base-bottom-border-style) var(--Pick-base-left-border-style);
   border-color: var(--Pick-base-top-border-color) var(--Pick-base-right-border-color) var(--Pick-base-bottom-border-color) var(--Pick-base-left-border-color);
+  overflow: auto;
 }
 .cxd-Picker .cxd-Picker-values {
   display: inline;
@@ -35983,6 +36047,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   width: var(--Pick-base-icon-size);
   height: var(--Pick-base-icon-size);
   content: var(--Pick-base-icon);
+  display: flex;
 }
 .cxd-Picker-clear {
   padding: var(--Form-input-clearBtn-padding);
@@ -36272,11 +36337,14 @@ td.rdtQuarter.rdtDisabled:hover > span {
   flex-flow: row wrap;
 }
 .cxd-Rating-star {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--Rating-star-size);
+  height: var(--Rating-star-size);
   position: relative;
-  margin-right: var(--Rating-star-margin);
   overflow: hidden;
-  display: block;
-  font-size: var(--Rating-star-size);
+  font-size: var(--Rating-star-icon-size);
   line-height: 1;
   cursor: pointer;
   -webkit-user-select: none;
@@ -36319,8 +36387,18 @@ td.rdtQuarter.rdtDisabled:hover > span {
   margin-left: var(--Rating-star-margin);
 }
 .Rating-star-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--Rating-star-size);
+  height: var(--Rating-star-size);
   content: var(--Rating-star-icon);
 }
+.Rating-star-icon > svg.icon {
+  width: var(--Rating-star-icon-size);
+  height: var(--Rating-star-icon-size);
+  top: 0;
+}
 .cxd-RatingControl {
   position: relative;
   overflow: hidden;

package/package.json

@@ -3,7 +3,7 @@
   "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
-  "version": "3.5.3",
+  "version": "3.6.0",
   "description": "",
   "scripts": {
     "build": "npm run clean-dist && NODE_ENV=production rollup -c ",
@@ -36,8 +36,8 @@
   },
   "dependencies": {
     "@rc-component/mini-decimal": "^1.0.1",
-    "amis-core": "^3.5.3",
-    "amis-formula": "^3.5.3",
+    "amis-core": "^3.6.0",
+    "amis-formula": "^3.6.0",
     "classnames": "2.3.2",
     "codemirror": "^5.63.0",
     "downshift": "6.1.12",
@@ -146,5 +146,5 @@
       "/.rollup.cache/"
     ]
   },
-  "gitHead": "b48f8f9a99c85f26512626a57d09559703b4e121"
+  "gitHead": "7fcb81d2c01a1134c8d953b819f136ad4b1a9dfa"
 }

package/scss/_components.scss

@@ -1862,6 +1862,7 @@
   // 评分
   --Rating-star-margin: var(--sizes-size-5);
   --Rating-star-size: var(--sizes-base-12);
+  --Rating-star-icon-size: var(--sizes-base-9);
   --Rating-star-icon: '<svg class="icon" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="currentColor" d="M4.99672493,4.37617062 L1.28100904,4.93702533 C0.463702827,5.06039054 -0.102812689,5.85030962 0.0156612291,6.70135899 C0.0628630935,7.04043042 0.216147743,7.35382434 0.451761131,7.59297508 L3.14101949,10.3226082 L3.14101949,10.3226082 L2.50531937,14.1787855 C2.3655991,15.0263332 2.91216489,15.8313483 3.72610824,15.9768371 C4.05030943,16.0347866 4.38381497,15.9798039 4.67496871,15.8204054 L7.99934906,14.0003997 L7.99934906,14.0003997 L11.3254267,15.8208814 C12.0564401,16.2209912 12.9605363,15.9282748 13.3447823,15.167081 C13.4978067,14.8639388 13.5505833,14.5167196 13.4949403,14.1791872 L12.859174,10.3226082 L12.859174,10.3226082 L15.5482634,7.59400813 C16.1397301,6.99385103 16.1519752,6.00805341 15.5756136,5.39216751 C15.3460036,5.14681192 15.0450939,4.98715562 14.7195072,4.93793566 L11.0034685,4.37617062 L11.0034685,4.37617062 L9.34151455,0.868493275 C8.97611971,0.0973002947 8.07952072,-0.219434766 7.33890469,0.161045701 C7.04395753,0.312570398 6.80521255,0.561123051 6.65963735,0.868217393 L4.99672493,4.37617062 L4.99672493,4.37617062 Z"></path></svg>';
   --Rating-colors: '[{"value":"#abadb1","id":2},{"value":"#787b81","id":3},{"value":"#ffa900","id":5}]';
   --Rating-text-color: var(--colors-neutral-text-2);
@@ -1972,6 +1973,9 @@
   --Switch-checked-bgColor: var(--switch-default-on-bg-color);
   --Switch-checked-onHover-bgColor: var(--switch-default-on-hover-bg-color);
   --Switch-checked-onActive-bgColor: var(--colors-brand-4);
+  --Switch-spinner-icon-width: var(--sizes-base-7);
+  --Switch-spinner-icon-width--sm: var(--sizes-base-5);
+  --switch-spinner-left--sm: var(--sizes-size-0);
 
   --collapse-default-top-border-color: var(--colors-neutral-line-8);
   --collapse-default-top-border-width: var(--borders-width-2);
@@ -3292,7 +3296,6 @@
   --spinner-size-size: var(--sizes-base-16);
   --spinner-lg-size: var(--sizes-base-24);
   --spinner-overlay-bg: var(--colors-neutral-fill-11);
-  --spinner-color: var(--colors-brand-5);
 
   --Spinner--lg-height: var(--spinner-lg-size);
   --Spinner--lg-width: var(--spinner-lg-size);
@@ -3304,6 +3307,7 @@
   --Spinner-overlay-bg: rgba(255, 255, 255, 0.4);
   --Spinner-width: var(--spinner-size-size);
   --Spinner-color: var(--spinner-base-color);
+  --Spinner-color--disabled: rgba(0, 0, 0, 0.65);
 
   // Image
   --image-image-normal-paddingTop: var(--sizes-size-3);

package/scss/base/_common.scss

@@ -9,3 +9,11 @@
 .visibility-sensor {
   min-height: 5px;
 }
+
+.renderer-error-boundary {
+  padding: 5px;
+  font-family: PingFangSC-Medium;
+  font-size: 14px;
+  color: #cf1322;
+  border: 1px dashed #cf1322;
+}

package/scss/components/_spinner.scss

@@ -77,6 +77,15 @@
       height: auto;
     }
 
+    &.#{$ns}Spinner-icon--disabled > svg.icon {
+      color: var(--Spinner-color--disabled);
+      fill: var(--Spinner-color--disabled);
+
+      & path {
+        fill: var(--Spinner-color--disabled);
+      }
+    }
+
     &--lg {
       width: var(--Spinner--lg-width);
       height: var(--Spinner--lg-height);
@@ -156,6 +165,9 @@
   background: var(--Spinner-overlay-bg);
   transition: ease-out opacity var(--animation-duration);
   opacity: 0;
+  -webkit-backdrop-filter: blur(1px);
+  backdrop-filter: blur(1px);
+  filter: blur(1px);
 
   &.in {
     opacity: 1;

package/scss/components/_table.scss

@@ -273,8 +273,12 @@
       padding-top: 0;
     }
 
-    &--affixHeader > thead {
-      visibility: collapse;
+    &--affixHeader {
+      margin-top: calc(var(--Table-thead-height) * -1);
+
+      > thead {
+        visibility: hidden;
+      }
     }
 
     &--withCombine {

package/scss/components/form/_location.scss

@@ -193,3 +193,14 @@
 .tangram-suggestion-main {
   display: none !important;
 }
+
+@media screen and (min-width: 768px) {
+  .#{$ns}LocationPicker {
+    &-value {
+      margin-right: 0;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}

package/scss/components/form/_picker.scss

@@ -93,6 +93,7 @@
     border-color: var(--Pick-base-top-border-color)
       var(--Pick-base-right-border-color) var(--Pick-base-bottom-border-color)
       var(--Pick-base-left-border-color);
+    overflow: auto;
   }
 
   .#{$ns}Picker-values {
@@ -143,6 +144,7 @@
     width: var(--Pick-base-icon-size);
     height: var(--Pick-base-icon-size);
     content: var(--Pick-base-icon);
+    display: flex;
   }
 
   &-clear {

package/scss/components/form/_rating.scss

@@ -16,11 +16,14 @@
   }
 
   &-star {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--Rating-star-size);
+    height: var(--Rating-star-size);
     position: relative;
-    margin-right: var(--Rating-star-margin);
     overflow: hidden;
-    display: block;
-    font-size: var(--Rating-star-size);
+    font-size: var(--Rating-star-icon-size);
     line-height: 1;
     cursor: pointer;
     user-select: none;
@@ -71,7 +74,18 @@
 }
 
 .Rating-star-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--Rating-star-size);
+  height: var(--Rating-star-size);
   content: var(--Rating-star-icon);
+
+  & > svg.icon {
+    width: var(--Rating-star-icon-size);
+    height: var(--Rating-star-icon-size);
+    top: 0;
+  }
 }
 
 .#{$ns}RatingControl {

package/scss/components/form/_selection.scss

@@ -217,6 +217,7 @@
 
   &-item {
     position: relative;
+    margin-bottom: 2px;
   }
   &-item.is-expanded > &-sublist {
     display: block;

package/scss/components/form/_switch.scss

@@ -153,6 +153,44 @@
       border-radius: 10px;
     }
   }
+
+  &-spinner {
+    position: absolute;
+    top: var(--Switch-slider-margin);
+    bottom: var(--Switch-slider-margin);
+    left: var(--Switch-slider-margin);
+
+    & > &-icon > svg.icon {
+      width: var(--Switch-spinner-icon-width);
+      height: var(--Switch-spinner-icon-width);
+    }
+
+    &--sm {
+      position: absolute;
+      top: var(--switch-size-sm-slider-margin);
+      bottom: var(--switch-size-sm-slider-margin);
+      left: var(--switch-spinner-left--sm);
+
+      & > .#{$ns}Switch-spinner-icon > svg.icon {
+        width: var(--Switch-spinner-icon-width--sm);
+        height: var(--Switch-spinner-icon-width--sm);
+      }
+    }
+
+    &.#{$ns}Switch-spinner--checked {
+      left: calc(
+        100% - var(--Switch-slider-width) - var(--Switch-slider-margin)
+      );
+      right: var(--Switch-slider-margin);
+
+      &.#{$ns}Switch-spinner--sm {
+        left: calc(
+          100% - var(--Switch-slider-width--sm) - var(--Switch-slider-margin)
+        );
+        right: var(--Switch-slider-margin);
+      }
+    }
+  }
 }
 
 .#{$ns}Switch-option {

package/scss/themes/_ang-variables.scss

@@ -109,9 +109,11 @@ $ns: 'a-';
   --colors-neutral-line-9: #f3f2f5;
   --colors-neutral-line-10: #f8f7fa;
   --colors-neutral-line-11: #ffffff;
-  --fonts-base-family: -apple-system, BlinkMacSystemFont, SF Pro SC, SF Pro Text,
-    Helvetica Neue, Helvetica, PingFang SC, Segoe UI, Roboto, Hiragino Sans GB,
-    Arial, microsoft yahei ui, Microsoft YaHei, SimSun, sans-serif;
+  --fonts-base-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica,
+    'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', 'Hiragino Sans GB',
+    'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN',
+    'Microsoft YaHei', 'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti',
+    SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif;
   --fonts-size-1: 48px;
   --fonts-size-2: 40px;
   --fonts-size-3: 32px;

package/scss/themes/_antd-variables.scss

@@ -109,9 +109,11 @@ $ns: 'antd-';
   --colors-neutral-line-9: #f2f4f5;
   --colors-neutral-line-10: #f7f9fa;
   --colors-neutral-line-11: #ffffff;
-  --fonts-base-family: -apple-system, BlinkMacSystemFont, SF Pro SC, SF Pro Text,
-    Helvetica Neue, Helvetica, PingFang SC, Segoe UI, Roboto, Hiragino Sans GB,
-    Arial, microsoft yahei ui, Microsoft YaHei, SimSun, sans-serif;
+  --fonts-base-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica,
+    'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', 'Hiragino Sans GB',
+    'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN',
+    'Microsoft YaHei', 'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti',
+    SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif;
   --fonts-size-1: 48px;
   --fonts-size-2: 40px;
   --fonts-size-3: 32px;

package/scss/themes/_cxd-variables.scss

@@ -106,9 +106,12 @@ $ns: 'cxd-';
   --colors-neutral-line-9: #f2f3f5;
   --colors-neutral-line-10: #f7f8fa;
   --colors-neutral-line-11: #ffffff;
-  --fonts-base-family: -apple-system, BlinkMacSystemFont, SF Pro SC, SF Pro Text,
-    Helvetica Neue, Helvetica, PingFang SC, Segoe UI, Roboto, Hiragino Sans GB,
-    Arial, microsoft yahei ui, Microsoft YaHei, SimSun, sans-serif;
+  // 参考 https://zenozeng.github.io/fonts.css/
+  --fonts-base-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica,
+    'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', 'Hiragino Sans GB',
+    'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN',
+    'Microsoft YaHei', 'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti',
+    SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif;
   --fonts-size-1: 48px;
   --fonts-size-2: 40px;
   --fonts-size-3: 32px;

package/scss/themes/_dark-variables.scss

@@ -117,9 +117,11 @@ $ns: 'dark-';
   --colors-neutral-line-9: #f2f4f5;
   --colors-neutral-line-10: #f7f9fa;
   --colors-neutral-line-11: #ffffff;
-  --fonts-base-family: -apple-system, BlinkMacSystemFont, SF Pro SC, SF Pro Text,
-    Helvetica Neue, Helvetica, PingFang SC, Segoe UI, Roboto, Hiragino Sans GB,
-    Arial, microsoft yahei ui, Microsoft YaHei, SimSun, sans-serif;
+  --fonts-base-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica,
+    'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', 'Hiragino Sans GB',
+    'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN',
+    'Microsoft YaHei', 'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti',
+    SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif;
   --fonts-size-1: 48px;
   --fonts-size-2: 40px;
   --fonts-size-3: 32px;