diff --git a/app/appearance/themes/daylight/theme.css b/app/appearance/themes/daylight/theme.css
index 0b728e8ad..8779427ea 100644
--- a/app/appearance/themes/daylight/theme.css
+++ b/app/appearance/themes/daylight/theme.css
@@ -1,9 +1,9 @@
 :root {
     /* 主色 */
     --b3-theme-primary: #3575f0;
-    --b3-theme-primary-light: rgba(53, 117, 240, 0.54);
-    --b3-theme-primary-lighter: rgba(53, 117, 240, 0.38);
-    --b3-theme-primary-lightest: rgba(53, 117, 240, 0.12);
+    --b3-theme-primary-light: rgba(53, 117, 240, .54);
+    --b3-theme-primary-lighter: rgba(53, 117, 240, .38);
+    --b3-theme-primary-lightest: rgba(53, 117, 240, .12);
     --b3-theme-secondary: #f3a92f;
     --b3-theme-background: #fff;
     --b3-theme-background-light: #dfe0e1;
@@ -113,9 +113,9 @@
     --b3-select-background: url("data:image/svg+xml;utf8,<svg fill='rgba(95, 99, 104, .68)' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat right 2px center var(--b3-theme-background);
 
     /* 阴影 */
-    --b3-point-shadow: 0 0 1px 0px rgba(0, 0, 0, 0.1), 0 0 2px 0px rgba(0, 0, 0, 0.2);
-    --b3-dialog-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-    --b3-button-shadow: 0px 5px 5px -3px rgb(0 0 0 / 0.2), 0px 8px 10px 1px rgb(0 0 0 / 0.14), 0px 3px 14px 2px rgb(0 0 0 / 0.12);
+    --b3-point-shadow: 0 0 1px 0 rgba(0, 0, 0, .1), 0 0 2px 0 rgba(0, 0, 0, .2);
+    --b3-dialog-shadow: 0 8px 24px rgba(0, 0, 0, .2);
+    --b3-button-shadow: 0 5px 5px -3px rgb(0 0 0 / .2), 0 8px 10px 1px rgb(0 0 0 / .14), 0 3px 14px 2px rgb(0 0 0 / .12);
 
     /* 图表颜色 */
     --b3-graph-p-point: #076f7e;
diff --git a/app/appearance/themes/midnight/theme.css b/app/appearance/themes/midnight/theme.css
index b670aa315..88c06f0ba 100644
--- a/app/appearance/themes/midnight/theme.css
+++ b/app/appearance/themes/midnight/theme.css
@@ -1,12 +1,12 @@
 :root {
     /* 主色 */
     --b3-theme-primary: #3573f0;
-    --b3-theme-primary-light: rgba(53, 115, 240, 0.72);
-    --b3-theme-primary-lighter: rgba(53, 115, 240, 0.48);
-    --b3-theme-primary-lightest: rgba(53, 115, 240, 0.24);
+    --b3-theme-primary-light: rgba(53, 115, 240, .72);
+    --b3-theme-primary-lighter: rgba(53, 115, 240, .48);
+    --b3-theme-primary-lightest: rgba(53, 115, 240, .24);
     --b3-theme-secondary: #f3a92f;
     --b3-theme-background: #1e1e1e;
-    --b3-theme-background-light: rgba(255, 255, 255, 0.075);
+    --b3-theme-background-light: rgba(255, 255, 255, .075);
     --b3-theme-surface: #262626;
     --b3-theme-surface-light: rgba(41, 42, 45, .86);
     --b3-theme-surface-lighter: rgba(230, 230, 230, .06);
@@ -64,7 +64,7 @@
     --b3-empty-color: var(--b3-theme-on-surface);
 
     /* 遮罩 */
-    --b3-mask-background: rgba(10, 10, 10, 0.4);
+    --b3-mask-background: rgba(10, 10, 10, .4);
 
     /* 卡片背景 */
     --b3-card-error-color: rgb(243, 153, 147);
@@ -113,9 +113,9 @@
     --b3-select-background: url("data:image/svg+xml;utf8,<svg fill='rgba(154, 160, 166, .68)' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat right 2px center var(--b3-theme-background);
 
     /* 阴影 */
-    --b3-point-shadow: inset 0 0.5px 0.5px 0.5px rgba(255, 255, 255, 0.09), 0 3px 6px rgba(0, 0, 0, .04), 0 0 0 0 transparent;
+    --b3-point-shadow: inset 0 .5px .5px .5px rgba(255, 255, 255, .09), 0 3px 6px rgba(0, 0, 0, .04), 0 0 0 0 transparent;
     --b3-dialog-shadow: 0 8px 24px #010409;
-    --b3-button-shadow: 0px 5px 5px -3px rgb(0 0 0 / 0.2), 0px 8px 10px 1px rgb(0 0 0 / 0.14), 0px 3px 14px 2px rgb(0 0 0 / 0.12);
+    --b3-button-shadow: 0 5px 5px -3px rgb(0 0 0 / .2), 0 8px 10px 1px rgb(0 0 0 / .14), 0 3px 14px 2px rgb(0 0 0 / .12);
 
     /* 图表颜色 */
     --b3-graph-p-point: #076f7e;
diff --git a/app/src/assets/scss/base.scss b/app/src/assets/scss/base.scss
index 9d7a2dda2..25f511cfd 100644
--- a/app/src/assets/scss/base.scss
+++ b/app/src/assets/scss/base.scss
@@ -291,7 +291,7 @@ html {
       & > div {
         background-color: var(--b3-theme-primary-light);
         height: 4px;
-        background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
+        background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
         animation: stripMove 450ms linear infinite;
         background-size: 50px 50px;
       }
diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index 776fccac1..ead1ae61e 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -46,7 +46,7 @@
 
   &__views {
     align-items: center;
-    box-shadow: 0px -1px inset var(--b3-theme-background-light);
+    box-shadow: 0 -1px inset var(--b3-theme-background-light);
 
     &--show .block__icon {
       opacity: 1;
@@ -67,10 +67,10 @@
     }
 
     &--hide {
-      width: 0.1px;
+      width: .1px;
       overflow: hidden;
       height: 0;
-      min-height: 0.1px !important;
+      min-height: .1px !important;
     }
   }
 
@@ -258,7 +258,7 @@
 
     &--select {
       background-color: var(--b3-menu-background);
-      box-shadow: 2px 2px 0 var(--b3-theme-primary-lighter) inset, -2px -2px 0px var(--b3-theme-primary-lighter) inset;
+      box-shadow: 2px 2px 0 var(--b3-theme-primary-lighter) inset, -2px -2px 0 var(--b3-theme-primary-lighter) inset;
       border-radius: var(--b3-border-radius);
     }
 
diff --git a/app/src/assets/scss/business/_block.scss b/app/src/assets/scss/business/_block.scss
index 7c2577304..114e2d9e2 100644
--- a/app/src/assets/scss/business/_block.scss
+++ b/app/src/assets/scss/business/_block.scss
@@ -95,7 +95,7 @@
       opacity: 1;
 
       &.block__icon[disabled] {
-        opacity: 0.38;
+        opacity: .38;
         cursor: not-allowed;
       }
     }
diff --git a/app/src/assets/scss/business/_config.scss b/app/src/assets/scss/business/_config.scss
index b818a248f..1ff0b44e2 100644
--- a/app/src/assets/scss/business/_config.scss
+++ b/app/src/assets/scss/business/_config.scss
@@ -154,7 +154,7 @@
       background-position: 50%;
       background-size: cover;
       border-radius: 90px;
-      background-color: rgba(255, 255, 255, 0.8);
+      background-color: rgba(255, 255, 255, .8);
       box-shadow: var(--b3-point-shadow);
       border: 1px solid var(--b3-theme-surface-lighter);
     }
diff --git a/app/src/assets/scss/business/_graph.scss b/app/src/assets/scss/business/_graph.scss
index d5fa793f6..34436ae7e 100644
--- a/app/src/assets/scss/business/_graph.scss
+++ b/app/src/assets/scss/business/_graph.scss
@@ -17,7 +17,7 @@
     overflow: auto;
     box-sizing: border-box;
     z-index: 1;
-    opacity: 0.9;
+    opacity: .9;
     border-left: 1px solid var(--b3-border-color);
 
     label {
diff --git a/app/src/assets/scss/business/_layout.scss b/app/src/assets/scss/business/_layout.scss
index 035df16c8..488ffac60 100644
--- a/app/src/assets/scss/business/_layout.scss
+++ b/app/src/assets/scss/business/_layout.scss
@@ -44,7 +44,7 @@
 
     &.layout__dockr {
       border: 1px solid var(--b3-border-color);
-      box-shadow: -8px 0px 24px rgb(140 149 159 / 20%);
+      box-shadow: -8px 0 24px rgb(140 149 159 / 20%);
       border-right: 0;
       border-radius: var(--b3-border-radius-b) 0 0 var(--b3-border-radius-b);
       overflow: hidden;
diff --git a/app/src/assets/scss/business/_search.scss b/app/src/assets/scss/business/_search.scss
index f2bea9b16..6bc6afbf1 100644
--- a/app/src/assets/scss/business/_search.scss
+++ b/app/src/assets/scss/business/_search.scss
@@ -2,7 +2,7 @@
   &__layout {
     display: flex;
     flex: 1;
-    min-height: 0.1px;
+    min-height: .1px;
     flex-direction: column;
 
     &:not(.search__layout--row) .search__list {
@@ -25,7 +25,7 @@
         height: auto;
 
         &:after {
-          width: 0.5px;
+          width: .5px;
           height: 100%;
         }
       }
@@ -113,7 +113,7 @@
       transition: var(--b3-transition);
       top: 0;
       width: 100%;
-      height: 0.5px;
+      height: .5px;
     }
 
     &:hover:after {
diff --git a/app/src/assets/scss/component/_button.scss b/app/src/assets/scss/component/_button.scss
index 56bd15337..31f2fc7e9 100644
--- a/app/src/assets/scss/component/_button.scss
+++ b/app/src/assets/scss/component/_button.scss
@@ -9,7 +9,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
   border: 0;
   box-sizing: border-box;
   text-align: center;
@@ -29,7 +29,7 @@
   }
 
   &:active {
-    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, .12);
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
   }
 
   &--progress {
@@ -137,7 +137,7 @@
   }
 
   &:disabled {
-    opacity: 0.38;
+    opacity: .38;
     cursor: not-allowed;
   }
 }
diff --git a/app/src/assets/scss/component/_chip.scss b/app/src/assets/scss/component/_chip.scss
index 94e395f9c..355e0d300 100644
--- a/app/src/assets/scss/component/_chip.scss
+++ b/app/src/assets/scss/component/_chip.scss
@@ -13,7 +13,7 @@
   color: var(--b3-theme-on-background);
   line-height: 16px;
   font-weight: 400;
-  font-size: 0.8125rem;
+  font-size: .8125rem;
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
diff --git a/app/src/assets/scss/component/_dialog.scss b/app/src/assets/scss/component/_dialog.scss
index b68719889..aaa4b2a79 100644
--- a/app/src/assets/scss/component/_dialog.scss
+++ b/app/src/assets/scss/component/_dialog.scss
@@ -44,7 +44,7 @@
     max-width: 88vw;
     transform: scale(.8);
     opacity: 0;
-    transition: opacity 75ms linear, transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
+    transition: opacity 75ms linear, transform 150ms 0ms cubic-bezier(0, 0, .2, 1);
     border: 1px solid var(--b3-theme-surface-lighter);
   }
 
diff --git a/app/src/assets/scss/component/_form.scss b/app/src/assets/scss/component/_form.scss
index 7e569d363..f6c1e4bf8 100644
--- a/app/src/assets/scss/component/_form.scss
+++ b/app/src/assets/scss/component/_form.scss
@@ -41,7 +41,7 @@
     position: absolute;
     height: 18px;
     width: 16px;
-    opacity: 0.68;
+    opacity: .68;
     transition: var(--b3-transition);
     right: 0;
     cursor: pointer;
diff --git a/app/src/assets/scss/component/_list.scss b/app/src/assets/scss/component/_list.scss
index 8b59871ec..2923482c1 100644
--- a/app/src/assets/scss/component/_list.scss
+++ b/app/src/assets/scss/component/_list.scss
@@ -30,7 +30,7 @@
     .b3-list__panel:before {
       content: "";
       height: 100%;
-      top: 0px;
+      top: 0;
       position: absolute;
       border-left: 1px solid var(--b3-theme-background-light);
       left: -21px;
@@ -173,7 +173,7 @@
       flex-shrink: 0;
       height: 10px;
       width: 10px;
-      transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1), opacity 1s cubic-bezier(0, 0, 0.2, 1);
+      transition: transform .15s cubic-bezier(0, 0, .2, 1), opacity 1s cubic-bezier(0, 0, .2, 1);
 
       &--open {
         transform: rotate(90deg);
@@ -205,7 +205,7 @@
     }
 
     &__meta {
-      font-size: 0.75rem;
+      font-size: .75rem;
       margin-left: 8px;
       flex-shrink: 0;
       color: var(--b3-theme-on-surface);
diff --git a/app/src/assets/scss/component/_menu.scss b/app/src/assets/scss/component/_menu.scss
index 439b5407a..20e849e9a 100644
--- a/app/src/assets/scss/component/_menu.scss
+++ b/app/src/assets/scss/component/_menu.scss
@@ -21,7 +21,7 @@
     box-shadow: inset 0 0 2.5px 2.5px var(--b3-scroll-color);
 
     &:hover {
-      border-width: 0.5px;
+      border-width: .5px;
     }
   }
 
@@ -42,7 +42,7 @@
     height: 100vh;
     padding: 0;
     border-radius: 0;
-    transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms;
+    transition: transform .15s cubic-bezier(0, 0, .2, 1) 0ms;
     display: flex;
     flex-direction: column;
 
@@ -175,7 +175,7 @@
       cursor: not-allowed;
 
       & > *:not(.b3-menu__submenu) {
-        opacity: 0.38;
+        opacity: .38;
       }
     }
 
@@ -307,7 +307,7 @@
   }
 
   &__accelerator {
-    font-size: 0.75rem;
+    font-size: .75rem;
     margin-left: 16px;
     color: var(--b3-theme-on-surface);
     font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace, var(--b3-font-family);
@@ -339,7 +339,7 @@
 
   &__item {
     font-size: 24px;
-    line-height: 0.9em; // windows 需要这样设置
+    line-height: .9em; // windows 需要这样设置
     font-family: var(--b3-font-family-emoji);
     text-align: center;
     height: 28px;
diff --git a/app/src/assets/scss/component/_select.scss b/app/src/assets/scss/component/_select.scss
index ffcae511e..9df5b63fb 100644
--- a/app/src/assets/scss/component/_select.scss
+++ b/app/src/assets/scss/component/_select.scss
@@ -5,10 +5,10 @@
   box-sizing: border-box;
   line-height: 20px;
   color: var(--b3-theme-on-background);
-  transition: box-shadow 120ms 0ms cubic-bezier(0, 0, 0.2, 1), background-color .2s cubic-bezier(0, 0, .2, 1) 0ms;
+  transition: box-shadow 120ms 0ms cubic-bezier(0, 0, .2, 1), background-color .2s cubic-bezier(0, 0, .2, 1) 0ms;
   height: 28px;
   font-size: 14px;
-  box-shadow: inset 0 0 0 0.6px var(--b3-theme-on-surface);
+  box-shadow: inset 0 0 0 .6px var(--b3-theme-on-surface);
   background: var(--b3-select-background);
   appearance: none;
   cursor: pointer;
diff --git a/app/src/assets/scss/component/_snackbar.scss b/app/src/assets/scss/component/_snackbar.scss
index 117473b4b..c6f3ffc61 100644
--- a/app/src/assets/scss/component/_snackbar.scss
+++ b/app/src/assets/scss/component/_snackbar.scss
@@ -1,7 +1,7 @@
 .b3-snackbar {
   margin-bottom: 16px;
   position: relative;
-  transition: transform 256ms cubic-bezier(0.45, 0.05, 0.55, 0.95) 0ms;
+  transition: transform 256ms cubic-bezier(.45, .05, .55, .95) 0ms;
   text-align: right;
 
   &--hide {
@@ -17,7 +17,7 @@
     display: flex;
     flex-direction: column;
     transform: translate3d(calc(20vw + 48px), 0, 0);
-    transition: transform 0.15s cubic-bezier(0.4, 0, 1, 1) 0ms;
+    transition: transform .15s cubic-bezier(.4, 0, 1, 1) 0ms;
 
     &--show {
       transform: translate3d(0, 0, 0) !important;
diff --git a/app/src/assets/scss/component/_switch.scss b/app/src/assets/scss/component/_switch.scss
index 184479cd9..453e74b04 100644
--- a/app/src/assets/scss/component/_switch.scss
+++ b/app/src/assets/scss/component/_switch.scss
@@ -73,7 +73,7 @@
   }
 
   &:disabled {
-    opacity: 0.38;
+    opacity: .38;
     cursor: not-allowed;
   }
 
diff --git a/app/src/assets/scss/component/_text-field.scss b/app/src/assets/scss/component/_text-field.scss
index 2edd63e65..c535ef5b1 100644
--- a/app/src/assets/scss/component/_text-field.scss
+++ b/app/src/assets/scss/component/_text-field.scss
@@ -6,7 +6,7 @@
   line-height: 20px;
   box-sizing: border-box;
   color: var(--b3-theme-on-background);
-  transition: box-shadow 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
+  transition: box-shadow 120ms 0ms cubic-bezier(0, 0, .2, 1);
   background-color: var(--b3-theme-background);
   -webkit-appearance: none;
   font-variant-ligatures: none;
diff --git a/app/src/assets/scss/component/_tooltips.scss b/app/src/assets/scss/component/_tooltips.scss
index bf30ab97f..de51ffcc1 100644
--- a/app/src/assets/scss/component/_tooltips.scss
+++ b/app/src/assets/scss/component/_tooltips.scss
@@ -51,7 +51,7 @@
     background-color: var(--b3-tooltips-background);
     border-radius: var(--b3-border-radius);
     line-height: 17px;
-    transform: scale(0.8);
+    transform: scale(.8);
     max-width: 60vw;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -74,7 +74,7 @@
     pointer-events: none;
     position: absolute;
     opacity: 0;
-    transition: opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
+    transition: opacity 150ms 0ms cubic-bezier(0, 0, .2, 1), transform 150ms 0ms cubic-bezier(0, 0, .2, 1);
   }
 
   &:hover,
diff --git a/app/src/assets/scss/component/_typography.scss b/app/src/assets/scss/component/_typography.scss
index a8b987412..f4ce40386 100644
--- a/app/src/assets/scss/component/_typography.scss
+++ b/app/src/assets/scss/component/_typography.scss
@@ -52,11 +52,11 @@
   }
 
   span[data-type~="sup"] {
-    top: -0.5em;
+    top: -.5em;
   }
 
   span[data-type~="sub"] {
-    bottom: -0.25em;
+    bottom: -.25em;
   }
 
   em,
@@ -127,7 +127,7 @@
   .bq {
     padding: 4px;
     color: var(--b3-theme-on-surface);
-    border-left: 0.25em solid var(--b3-theme-surface-lighter);
+    border-left: .25em solid var(--b3-theme-surface-lighter);
     background-color: var(--b3-list-hover);
     margin: 4px 0;
   }
@@ -156,13 +156,13 @@
 
   .h1,
   h1 {
-    padding: 0.3em 4px;
+    padding: .3em 4px;
     font-size: 1.75em;
   }
 
   .h2,
   h2 {
-    padding: 0.3em 4px;
+    padding: .3em 4px;
     font-size: 1.55em;
   }
 
diff --git a/app/src/assets/scss/mobile.scss b/app/src/assets/scss/mobile.scss
index 62bb77623..ca1c9a3ea 100644
--- a/app/src/assets/scss/mobile.scss
+++ b/app/src/assets/scss/mobile.scss
@@ -125,7 +125,7 @@
     border-radius: var(--b3-border-radius);
 
     &[disabled] {
-      opacity: 0.38;
+      opacity: .38;
     }
 
     &--active,
@@ -167,7 +167,7 @@
   width: 100vw;
   z-index: 7;
   transform: translateX(-100vw);
-  transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms;
+  transition: transform .15s cubic-bezier(0, 0, .2, 1) 0ms;
 
   &--all {
     transform: translateY(-200vh);
@@ -228,7 +228,7 @@
       background-position: 50%;
       background-size: cover;
       border-radius: 90px;
-      background-color: rgba(255, 255, 255, 0.8);
+      background-color: rgba(255, 255, 255, .8);
       box-shadow: var(--b3-point-shadow);
       border: 1px solid var(--b3-theme-surface-lighter);
     }
@@ -314,7 +314,7 @@
     }
 
     &[disabled] {
-      opacity: 0.38;
+      opacity: .38;
     }
 
     &.protyle-toolbar__item--current svg {
diff --git a/app/src/assets/scss/pdf/_pdf.scss b/app/src/assets/scss/pdf/_pdf.scss
index 0bc4dab31..6b3d42127 100644
--- a/app/src/assets/scss/pdf/_pdf.scss
+++ b/app/src/assets/scss/pdf/_pdf.scss
@@ -397,7 +397,7 @@
   }
 
   &[disabled] {
-    opacity: 0.38;
+    opacity: .38;
     cursor: not-allowed;
   }
 }
@@ -421,11 +421,11 @@
 }
 
 #pageWidthOption {
-  border-bottom: 1px rgba(255, 255, 255, 0.5) solid;
+  border-bottom: 1px rgba(255, 255, 255, .5) solid;
 }
 
 .bookmark[href="#"] {
-  opacity: 0.5;
+  opacity: .5;
   pointer-events: none;
 }
 
@@ -479,8 +479,8 @@
 
 .thumbnailImage {
   border: 1px solid rgba(0, 0, 0, 0);
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
-  opacity: 0.8;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3);
+  opacity: .8;
   z-index: 99;
   background-color: rgba(255, 255, 255, 1);
   background-clip: content-box;
@@ -495,14 +495,14 @@
 
 a:focus > .thumbnail > .thumbnailSelectionRing > .thumbnailImage,
 .thumbnail:hover > .thumbnailSelectionRing > .thumbnailImage {
-  opacity: 0.9;
+  opacity: .9;
 }
 
 a:focus > .thumbnail > .thumbnailSelectionRing,
 .thumbnail:hover > .thumbnailSelectionRing {
   background-color: var(--b3-list-hover);
   background-clip: padding-box;
-  color: rgba(255, 255, 255, 0.9);
+  color: rgba(255, 255, 255, .9);
 }
 
 .thumbnail.selected > .thumbnailSelectionRing > .thumbnailImage {
@@ -632,8 +632,8 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
   border-radius: var(--b3-border-radius-b);
   width: 520px;
   position: absolute;
-  inset-inline-start: 0px;
-  inset-inline-end: 0px;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   height: fit-content;
   margin: auto;
   display: none;
@@ -641,8 +641,8 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
 
   &--open {
     position: fixed;
-    inset-block-start: 0px;
-    inset-block-end: 0px;
+    inset-block-start: 0;
+    inset-block-end: 0;
     max-width: calc((100% - 6px) - 2em);
     max-height: calc((100% - 6px) - 2em);
     user-select: text;
@@ -824,9 +824,9 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
 }
 
 #viewer.textLayer-visible .textLayer span {
-  background-color: rgba(255, 255, 0, 0.1);
+  background-color: rgba(255, 255, 0, .1);
   color: rgba(0, 0, 0, 1);
-  border: solid 1px rgba(255, 0, 0, 0.5);
+  border: solid 1px rgba(255, 0, 0, .5);
   box-sizing: border-box;
 }
 
@@ -836,7 +836,7 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
 }
 
 #viewer.textLayer-shadow .textLayer span {
-  background-color: rgba(255, 255, 255, 0.6);
+  background-color: rgba(255, 255, 255, .6);
   color: rgba(0, 0, 0, 1);
 }
 
diff --git a/app/src/assets/scss/pdf/annotation_layer_builder.scss b/app/src/assets/scss/pdf/annotation_layer_builder.scss
index a958ad94e..c6f74b590 100644
--- a/app/src/assets/scss/pdf/annotation_layer_builder.scss
+++ b/app/src/assets/scss/pdf/annotation_layer_builder.scss
@@ -14,7 +14,7 @@
  */
 
 :root {
-  --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
+  --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, .13);'/></svg>");
   --input-focus-border-color: Highlight;
   --input-focus-outline: 1px solid Canvas;
   --input-unfocused-border-color: transparent;
@@ -86,7 +86,7 @@
 
 .annotationLayer .linkAnnotation > a:hover,
 .annotationLayer .buttonWidgetAnnotation.pushButton > a:hover {
-  opacity: 0.2;
+  opacity: .2;
   background: rgba(255, 255, 0, 1);
   box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
 }
@@ -105,7 +105,7 @@
 .annotationLayer .choiceWidgetAnnotation select,
 .annotationLayer .buttonWidgetAnnotation.checkBox input,
 .annotationLayer .buttonWidgetAnnotation.radioButton input {
-  background-color: rgba(0, 54, 255, 0.13); // NOTE
+  background-color: rgba(0, 54, 255, .13); // NOTE
   border: 2px solid var(--input-unfocused-border-color);
   box-sizing: border-box;
   font: calc(9px * var(--scale-factor)) sans-serif;
diff --git a/app/src/assets/scss/pdf/xfa_layer_builder.scss b/app/src/assets/scss/pdf/xfa_layer_builder.scss
index ebe42829b..edac317cf 100644
--- a/app/src/assets/scss/pdf/xfa_layer_builder.scss
+++ b/app/src/assets/scss/pdf/xfa_layer_builder.scss
@@ -14,7 +14,7 @@
  */
 
 :root {
-  --xfa-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
+  --xfa-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, .13);'/></svg>");
 }
 
 .xfaLayer .highlight {
@@ -77,7 +77,7 @@
   font-style: inherit;
   font-weight: inherit;
   font-kerning: inherit;
-  letter-spacing: -0.01px;
+  letter-spacing: -.01px;
   text-align: inherit;
   text-decoration: inherit;
   box-sizing: border-box;
diff --git a/app/src/assets/scss/protyle/_protyle.scss b/app/src/assets/scss/protyle/_protyle.scss
index 19c18c78f..ac7045055 100644
--- a/app/src/assets/scss/protyle/_protyle.scss
+++ b/app/src/assets/scss/protyle/_protyle.scss
@@ -239,15 +239,15 @@
 
   &--transition {
     .protyle-wysiwyg {
-      transition: padding .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+      transition: padding .3s cubic-bezier(.25, .46, .45, .94) 0ms;
     }
 
     .protyle-title {
-      transition: margin .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+      transition: margin .3s cubic-bezier(.25, .46, .45, .94) 0ms;
     }
 
     .protyle-background__iconw {
-      transition: left .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+      transition: left .3s cubic-bezier(.25, .46, .45, .94) 0ms;
     }
   }
 }
@@ -348,7 +348,7 @@
   }
 
   &[custom-riff-decks] {
-    box-shadow: 3px 0px 0px -1px var(--b3-protyle-inline-mark-background) inset;
+    box-shadow: 3px 0 0 -1px var(--b3-protyle-inline-mark-background) inset;
   }
 
   &__icon {
diff --git a/app/src/assets/scss/protyle/_wysiwyg.scss b/app/src/assets/scss/protyle/_wysiwyg.scss
index 163495e02..c1d8844f7 100644
--- a/app/src/assets/scss/protyle/_wysiwyg.scss
+++ b/app/src/assets/scss/protyle/_wysiwyg.scss
@@ -17,12 +17,13 @@
     position: relative;
 
     &[custom-riff-decks] {
-      box-shadow: 3px 0px 0px -1px var(--b3-protyle-inline-mark-background) inset;
+      box-shadow: 3px 0 0 -1px var(--b3-protyle-inline-mark-background) inset;
     }
 
     [spellcheck] {
       word-break: break-word;
-      white-space: pre-wrap;
+      // https://github.com/siyuan-note/siyuan/issues/10483
+      white-space: break-spaces;
 
       &:focus {
         outline: none;
@@ -54,11 +55,11 @@
 
       .dragover {
         &__top:not(.av__row) {
-          box-shadow: 0 -3px 0 var(--b3-theme-primary-lighter), inset 0px 1px 0 var(--b3-theme-primary-lighter) !important;
+          box-shadow: 0 -3px 0 var(--b3-theme-primary-lighter), inset 0 1px 0 var(--b3-theme-primary-lighter) !important;
         }
 
         &__bottom:not(.av__row) {
-          box-shadow: 0 3px 0 var(--b3-theme-primary-lighter), inset 0px -1px 0 var(--b3-theme-primary-lighter) !important;
+          box-shadow: 0 3px 0 var(--b3-theme-primary-lighter), inset 0 -1px 0 var(--b3-theme-primary-lighter) !important;
         }
       }
     }
@@ -70,7 +71,7 @@
       &:before {
         content: "";
         position: absolute;
-        border-left: 0.5px solid var(--b3-theme-background-light);
+        border-left: .5px solid var(--b3-theme-background-light);
         left: 17px;
       }
 
@@ -289,7 +290,7 @@
         position: sticky;
         top: -1px;
         z-index: 2;
-        box-shadow: 0px -1px 0px var(--b3-theme-on-surface-light) inset;
+        box-shadow: 0 -1px 0 var(--b3-theme-on-surface-light) inset;
       }
     }
 
@@ -304,7 +305,7 @@
       }
 
       &--select {
-        filter: brightness(0.68);
+        filter: brightness(.68);
       }
 
       &--drag > span:after {
@@ -460,11 +461,11 @@
 
   .dragover {
     &__top:not(.av__row) {
-      box-shadow: 0 -4px 0 0px var(--b3-theme-primary-lighter) !important;
+      box-shadow: 0 -4px 0 0 var(--b3-theme-primary-lighter) !important;
     }
 
     &__bottom:not(.av__row) {
-      box-shadow: 0 4px 0 0px var(--b3-theme-primary-lighter) !important
+      box-shadow: 0 4px 0 0 var(--b3-theme-primary-lighter) !important
     }
   }
 
@@ -478,7 +479,7 @@
   }
 
   &--animate {
-    animation: scale 0.3s ease-in-out;
+    animation: scale .3s ease-in-out;
   }
 
   div[data-type="NodeMathBlock"] {
@@ -507,7 +508,7 @@
 
   [data-node-id][fold="1"]:not(.li):not([data-type="NodeHeading"]) {
     @include text-clamp(1);
-    opacity: 0.38;
+    opacity: .38;
     font-size: 16px;
     height: 26px;
     line-height: 26px;
@@ -616,7 +617,7 @@
 
       &:empty::after {
         content: "language";
-        opacity: 0.68;
+        opacity: .68;
       }
     }
   }
diff --git a/app/src/assets/scss/util/_function.scss b/app/src/assets/scss/util/_function.scss
index 920b77a12..171ae431a 100644
--- a/app/src/assets/scss/util/_function.scss
+++ b/app/src/assets/scss/util/_function.scss
@@ -46,9 +46,9 @@
 
     &-1 {
       flex: 1;
-      min-width: 0.1px;
+      min-width: .1px;
       overflow: auto;
-      min-height: 0.1px;
+      min-height: .1px;
     }
 
     &-column {
@@ -129,7 +129,7 @@
   }
 
   &__code {
-    padding: 0.2em 0.4em;
+    padding: .2em .4em;
     margin: 0;
     font-size: 85%;
     border-radius: var(--b3-border-radius);
diff --git a/app/src/assets/scss/util/_keyframes.scss b/app/src/assets/scss/util/_keyframes.scss
index 125ab91f0..a8bae451f 100644
--- a/app/src/assets/scss/util/_keyframes.scss
+++ b/app/src/assets/scss/util/_keyframes.scss
@@ -10,10 +10,10 @@
 
 @keyframes addCard {
   0% {
-    box-shadow: 100vw 0px 0px -1px var(--b3-protyle-inline-mark-background) inset;
+    box-shadow: 100vw 0px 0 -1px var(--b3-protyle-inline-mark-background) inset;
   }
   100% {
-    box-shadow: 3px 0px 0px -1px var(--b3-protyle-inline-mark-background) inset;
+    box-shadow: 3px 0 0 -1px var(--b3-protyle-inline-mark-background) inset;
   }
 }
 
@@ -32,7 +32,7 @@
 @keyframes zoomIn {
   0% {
     opacity: 0;
-    transform: scale(0.8);
+    transform: scale(.8);
   }
 
   to {
diff --git a/app/src/assets/scss/util/_reset.scss b/app/src/assets/scss/util/_reset.scss
index 149bd60ef..0b4877915 100644
--- a/app/src/assets/scss/util/_reset.scss
+++ b/app/src/assets/scss/util/_reset.scss
@@ -157,11 +157,11 @@ sup {
 }
 
 sup {
-  top: -0.5em;
+  top: -.5em;
 }
 
 sub {
-  bottom: -0.25em;
+  bottom: -.25em;
 }
 
 img {
diff --git a/app/src/assets/scss/viewerjs/_viewer.scss b/app/src/assets/scss/viewerjs/_viewer.scss
index 6a025394a..423133f70 100644
--- a/app/src/assets/scss/viewerjs/_viewer.scss
+++ b/app/src/assets/scss/viewerjs/_viewer.scss
@@ -81,7 +81,7 @@
   }
 
   &-navbar {
-    background-color: rgba(0, 0, 0, 0.48);
+    background-color: rgba(0, 0, 0, .48);
     overflow: hidden;
   }
 
@@ -101,12 +101,12 @@
       line-height: 0;
       opacity: .48;
       overflow: hidden;
-      transition: opacity 0.15s;
+      transition: opacity .15s;
       width: 30px;
 
       &:focus,
       &:hover {
-        opacity: 0.78;
+        opacity: .78;
       }
 
       &:focus {
@@ -171,7 +171,7 @@
         float: left;
         height: 24px;
         overflow: hidden;
-        transition: background-color 0.15s;
+        transition: background-color .15s;
         width: 24px;
 
         &:focus,
@@ -252,7 +252,7 @@
   }
 
   &-button {
-    background-color: rgba(0, 0, 0, 0.48);
+    background-color: rgba(0, 0, 0, .48);
     border-radius: 50%;
     cursor: pointer;
     height: 80px;
@@ -260,7 +260,7 @@
     position: absolute;
     right: -40px;
     top: -40px;
-    transition: background-color 0.15s;
+    transition: background-color .15s;
     width: 80px;
     -webkit-app-region: no-drag;
 
@@ -298,7 +298,7 @@
   }
 
   &-backdrop {
-    background-color: rgba(0, 0, 0, 0.24);
+    background-color: rgba(0, 0, 0, .24);
   }
 
   &-invisible {
@@ -319,7 +319,7 @@
   }
 
   &-transition {
-    transition: all 0.3s;
+    transition: all .3s;
   }
 
   @keyframes viewer-spinner {
@@ -335,8 +335,8 @@
   &-loading {
     &::after {
       animation: viewer-spinner 1s linear infinite;
-      border: 4px solid rgba(255, 255, 255, 0.1);
-      border-left-color: rgba(255, 255, 255, 0.5);
+      border: 4px solid rgba(255, 255, 255, .1);
+      border-left-color: rgba(255, 255, 255, .5);
       border-radius: 50%;
       content: '';
       display: inline-block;