refactor: 提取 scss 变量 和 mixin

src/assets/styles/mixin.scss

@@ -25,4 +25,17 @@
   &:not(:nth-child(#{$col}n)) {
     margin-right: calc(#{100 - $col * $colWidth} / #{$col - 1});
   }
+}
+
+@mixin overflow-overlay() {
+  overflow: auto;
+  overflow: overlay;
+}
+
+@mixin absolute-0 {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
 }

src/assets/styles/variable.scss

@@ -5,4 +5,8 @@ $lightGray: #f9f9f9;
 
 $boxShadow: 3px 3px 3px rgba(#000, 0.15);
 
+$transitionDelay: .2s;
+$transitionDelayFast: .1s;
+$transitionDelaySlow: .3s;
+
 $borderRadius: 2px;

src/components/ColorPicker/Alpha.vue

@@ -88,26 +88,15 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .alpha {
-  position: absolute;
+  @include absolute-0();
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
 }
 .alpha-checkboard-wrap {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
   overflow: hidden;
+
+  @include absolute-0();
 }
 .alpha-gradient {
-  position: absolute;
+  @include absolute-0();
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
 }
 .alpha-container {
   cursor: pointer;

src/components/ColorPicker/Checkboard.vue

@@ -63,11 +63,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .checkerboard {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
   background-size: contain;
+
+  @include absolute-0();
 }
 </style>

src/components/ColorPicker/Hue.vue

@@ -103,12 +103,9 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .hue {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
   background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+
+  @include absolute-0();
 }
 .hue-container {
   cursor: pointer;

src/components/ColorPicker/Saturation.vue

@@ -100,11 +100,8 @@ export default defineComponent({
 .saturation,
 .saturation-white,
 .saturation-black {
-  position: absolute;
+  @include absolute-0();
-  top: 0;
+
-  left: 0;
-  right: 0;
-  bottom: 0;
   cursor: pointer;
 }
 .saturation-white {

src/components/ColorPicker/index.vue

@@ -261,11 +261,8 @@ export default defineComponent({
   }
 }
 .picker-current-color {
-  position: absolute;
+  @include absolute-0();
-  top: 0;
+
-  left: 0;
-  right: 0;
-  bottom: 0;
   z-index: 2;
 }
 

src/components/Contextmenu/MenuContent.vue

@@ -68,7 +68,7 @@ $subMenuWidth: 120px;
   padding: 0 20px;
   color: #555;
   font-size: 12px;
-  transition: all .1s;
+  transition: all $transitionDelayFast;
   white-space: nowrap;
   height: $menuHeight;
   line-height: $menuHeight;
@@ -130,7 +130,7 @@ $subMenuWidth: 120px;
     right: 18px;
     top: 3px;
     transform: scale(0);
-    transition: transform .2s;
+    transition: transform $transitionDelay;
   }
 
   .sub-text {

src/components/WritingBoard.vue

@@ -267,11 +267,7 @@ export default defineComponent({
   background-color: #0f392b;
 }
 .canvas {
-  position: absolute;
+  @include absolute-0();
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
 }
 .eraser, .pen {
   pointer-events: none;

src/views/Editor/Canvas/GridLines.vue

@@ -67,13 +67,10 @@ export default defineComponent({
 .grid-lines {
   width: 100%;
   height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
   overflow: visible;
   z-index: 999;
   pointer-events: none;
+
+  @include absolute-0();
 }
 </style>

src/views/Editor/CanvasTool/ChartPool.vue

@@ -47,11 +47,8 @@ export default defineComponent({
   cursor: pointer;
 }
 .chart-content {
-  position: absolute;
+  @include absolute-0();
-  top: 0;
+
-  bottom: 0;
-  left: 0;
-  right: 0;
   display: flex;
   justify-content: center;
   align-items: center;

src/views/Editor/CanvasTool/LinePool.vue

@@ -108,11 +108,8 @@ export default defineComponent({
   cursor: pointer;
 }
 .line-content {
-  position: absolute;
+  @include absolute-0();
-  top: 0;
+
-  bottom: 0;
-  left: 0;
-  right: 0;
   display: flex;
   justify-content: center;
   align-items: center;

src/views/Editor/CanvasTool/ShapePool.vue

@@ -86,11 +86,8 @@ export default defineComponent({
   cursor: pointer;
 }
 .shape-content {
-  position: absolute;
+  @include absolute-0();
-  top: 0;
+
-  bottom: 0;
-  left: 0;
-  right: 0;
   display: flex;
   justify-content: center;
   align-items: center;

src/views/Editor/EditorHeader/index.vue

@@ -142,7 +142,7 @@ export default defineComponent({
   align-items: center;
   font-size: 14px;
   padding: 0 10px;
-  transition: background-color .2s;
+  transition: background-color $transitionDelay;
   cursor: pointer;
 
   .text {

src/views/Editor/Remark/index.vue

@@ -79,11 +79,6 @@ export default defineComponent({
   textarea {
     width: 100%;
     height: 100%;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
     overflow-y: auto;
     resize: none;
     border: 0;
@@ -91,6 +86,8 @@ export default defineComponent({
     padding: 8px;
     font-size: 12px;
     background-color: transparent;
+
+    @include absolute-0();
   }
 }
 .resize-handler {

src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue

@@ -217,11 +217,11 @@ export default defineComponent({
 .editor-content {
   width: 100%;
   height: 360px;
-  overflow: auto;
-  overflow: overlay;
   position: relative;
   border-right: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
+
+  @include overflow-overlay();
 }
 .range-box {
   position: absolute;
@@ -231,17 +231,17 @@ export default defineComponent({
   user-select: none;
 }
 .temp-range {
+  width: 0;
+  height: 0;
   position: absolute;
   top: 0;
   left: 0;
-  width: 0;
-  height: 0;
   background-color: rgba($color: #888, $alpha: .3);
 }
 .range-line {
-  position: absolute;
   width: 0;
   height: 0;
+  position: absolute;
   left: 0;
   top: 0;
   border: 0 solid $themeColor;

src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue

@@ -421,7 +421,7 @@ export default defineComponent({
   align-items: center;
   position: relative;
   cursor: pointer;
-  transition: all .2s;
+  transition: all $transitionDelay;
 
   &:hover {
     border-color: $themeColor;

src/views/Editor/Toolbar/SlideAnimationPanel.vue

@@ -115,7 +115,7 @@ export default defineComponent({
     left: 0;
     top: 0;
     background-color: #d9dadb;
-    animation: $animationType .3s linear;
+    animation: $animationType $transitionDelaySlow linear;
   }
 
   &.fade:hover {

src/views/Editor/Toolbar/SlideStylePanel.vue

@@ -378,7 +378,7 @@ export default defineComponent({
   border: 1px dashed $borderColor;
   border-radius: $borderRadius;
   position: relative;
-  transition: all .2s;
+  transition: all $transitionDelay;
 
   &:hover {
     border-color: $themeColor;
@@ -386,11 +386,8 @@ export default defineComponent({
   }
 
   .content {
-    position: absolute;
+    @include absolute-0();
-    top: 0;
+
-    bottom: 0;
-    left: 0;
-    right: 0;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -413,16 +410,13 @@ export default defineComponent({
   cursor: pointer;
 
   .theme-item-content {
-    position: absolute;
+    @include absolute-0();
-    top: 0;
+
-    bottom: 0;
-    left: 0;
-    right: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    transition: box-shadow .2s;
+    transition: box-shadow $transitionDelay;
 
     &:hover {
       box-shadow: 0 0 4px #888;

src/views/Editor/Toolbar/index.vue

@@ -123,7 +123,7 @@ export default defineComponent({
 .content {
   padding: 12px;
   font-size: 13px;
-  overflow: auto;
+
-  overflow: overlay;
+  @include overflow-overlay();
 }
 </style>

src/views/Screen/SlideThumbnails.vue

@@ -79,8 +79,8 @@ export default defineComponent({
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
-  overflow: auto;
+
-  overflow: overlay;
+  @include overflow-overlay();
 
   .thumbnail {
     width: 150px;

src/views/components/element/TableElement/index.vue

@@ -198,13 +198,10 @@ export default defineComponent({
   cursor: move;
 }
 .table-mask {
-  position: absolute;
+  @include absolute-0();
-  top: 0;
+
-  bottom: 0;
-  left: 0;
-  right: 0;
   opacity: 0;
-  transition: opacity .2s;
+  transition: opacity $transitionDelay;
 
   .mask-tip {
     position: absolute;