perf: 默认样式配置优化

src/assets/styles/antd.scss

@@ -1,3 +1,5 @@
+// 对 ant design vue 的默认样式覆盖
+
 // popover
 .ant-popover {
   padding-top: 5px !important;
@@ -6,7 +8,6 @@
   display: none;
 }
 .ant-popover-inner {
-  box-shadow: $boxShadow;
   border: 1px solid $borderColor;
 }
 .ant-popover-inner-content {
@@ -18,11 +19,9 @@
   min-width: 120px;
 }
 .ant-dropdown-menu {
-  box-shadow: $boxShadow;
   border: 1px solid $borderColor;
 }
 .ant-dropdown-menu-item {
-  font-size: 13px;
   transition: none;
 
   &:hover {
@@ -31,18 +30,11 @@
 }
 
 // button
-.ant-btn {
-  font-size: 13px !important;
-
-  &.no-padding {
-    padding: 0;
-  }
+.ant-btn.no-padding {
+  padding: 0;
 }
 
 // radio
-.ant-radio-group {
-  font-size: 13px !important;
-}
 .ant-radio-button-wrapper {
   text-align: center;
 }
@@ -59,19 +51,8 @@
 .ant-select {
   user-select: none;
 }
-.ant-select-selection-item {
-  font-size: 13px;
-}
-.ant-select-item-option-content {
-  font-size: 13px !important;
-}
 
 // tooltip
 .ant-tooltip-inner {
   font-size: 12px;
-}
-
-// checkbox
-.ant-checkbox-wrapper {
-  font-size: 13px;
 }

src/assets/styles/global.scss

@@ -19,37 +19,57 @@ time, mark, audio, video {
   box-sizing: border-box;
 }
 
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
   display: block;
 }
+
 body {
   line-height: 1;
   font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 }
-html, body {
+
+html,
+body {
   height: 100%;
   overflow: hidden;
   background-color: #fff;
   color: $textColor;
 }
-ol, ul {
+
+ol,
+ul,
+li {
   list-style: none;
 }
+
 blockquote, q {
   quotes: none;
 }
-blockquote::before, blockquote::after,
-q::before, q::after {
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
   content: '';
 }
+
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
+
 a {
   text-decoration: none;
-  color: #fff;
 }
 
 ::-webkit-scrollbar {

src/assets/styles/mixin.scss

@@ -1,12 +1,10 @@
-// 单行文字行末省略
-@mixin ellipsis {
+@mixin ellipsis-oneline() {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-// 多行文字尾行行末省略
-@mixin multi-ellipsis($line: 2) {
+@mixin ellipsis-multiline($line: 2) {
   word-wrap: break-word;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -15,12 +13,12 @@
   -webkit-box-orient: vertical;
 }
 
-// 表格式布局
-@mixin grid-layout-wrapper() {
+@mixin flex-grid-layout() {
   display: flex;
   flex-wrap: wrap;
 }
-@mixin grid-layout-item($col, $colWidth) {
+
+@mixin flex-grid-layout-children($col, $colWidth) {
   width: $colWidth;
   margin-bottom: calc(#{100 - $col * $colWidth} / #{$col - 1});
 

src/assets/styles/prosemirror.scss

@@ -1,3 +1,5 @@
+// ProseMirror 富文本默认样式
+
 .ProseMirror, .ProseMirror-static {
   outline: 0;
   border: 0;

src/components/ColorPicker/index.vue

@@ -229,10 +229,10 @@ export default defineComponent({
 }
 
 .picker-presets {
-  @include grid-layout-wrapper();
+  @include flex-grid-layout();
 }
 .picker-presets-color {
-  @include grid-layout-item(10, 7%);
+  @include flex-grid-layout-children(10, 7%);
 
   height: 0;
   padding-bottom: 7%;
@@ -241,10 +241,10 @@ export default defineComponent({
   cursor: pointer;
 }
 .picker-gradient-presets {
-  @include grid-layout-wrapper();
+  @include flex-grid-layout();
 }
 .picker-gradient-col {
-  @include grid-layout-item(10, 7%);
+  @include flex-grid-layout-children(10, 7%);
 
   display: flex;
   flex-direction: column;

src/views/Editor/CanvasTool/ChartPool.vue

@@ -35,10 +35,10 @@ export default defineComponent({
   width: 120px;
   margin-bottom: -5px;
 
-  @include grid-layout-wrapper();
+  @include flex-grid-layout();
 }
 .chart-item {
-  @include grid-layout-item(3, 32%);
+  @include flex-grid-layout-children(3, 32%);
 
   height: 0;
   padding-bottom: 32%;

src/views/Editor/CanvasTool/LinePool.vue

@@ -77,10 +77,10 @@ export default defineComponent({
   width: 200px;
   margin-bottom: -5px;
 
-  @include grid-layout-wrapper();
+  @include flex-grid-layout();
 }
 .line-item {
-  @include grid-layout-item(5, 19%);
+  @include flex-grid-layout-children(5, 19%);
 
   height: 0;
   padding-bottom: 19%;

src/views/Editor/CanvasTool/ShapePool.vue

@@ -72,12 +72,12 @@ export default defineComponent({
   padding: 2px 0 2px 10px;
 }
 .shape-list {
-  @include grid-layout-wrapper();
+  @include flex-grid-layout();
 
   margin-bottom: 10px;
 }
 .shape-item {
-  @include grid-layout-item(10, 8%);
+  @include flex-grid-layout-children(10, 8%);
 
   height: 0;
   padding-bottom: 8%;

src/views/Editor/EditorHeader/HotkeyDoc.vue

@@ -47,6 +47,6 @@ export default defineComponent({
 .label {
   width: 140px;
 
-  @include ellipsis();
+  @include ellipsis-oneline();
 }
 </style>

src/views/Editor/Toolbar/ElementAnimationPanel.vue

@@ -229,10 +229,10 @@ export default defineComponent({
   padding: 2px 0 2px 10px;
 }
 .pool-item-wrapper {
-  @include grid-layout-wrapper();
+  @include flex-grid-layout();
 }
 .pool-item {
-  @include grid-layout-item(4, 24%);
+  @include flex-grid-layout-children(4, 24%);
 
   margin-bottom: 10px;
   height: 40px;

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

@@ -411,7 +411,7 @@ export default defineComponent({
 .shape-clip {
   margin-bottom: 10px;
 
-  @include grid-layout-wrapper();
+  @include flex-grid-layout();
 }
 .shape-clip-item {
   display: flex;
@@ -419,7 +419,7 @@ export default defineComponent({
   align-items: center;
   cursor: pointer;
 
-  @include grid-layout-item(5, 16%);
+  @include flex-grid-layout-children(5, 16%);
 
   .shape {
     width: 40px;

src/views/Editor/Toolbar/SlideStylePanel.vue

@@ -367,10 +367,10 @@ export default defineComponent({
 }
 
 .theme-list {
-  @include grid-layout-wrapper();
+  @include flex-grid-layout();
 }
 .theme-item {
-  @include grid-layout-item(4, 22%);
+  @include flex-grid-layout-children(4, 22%);
 
   padding-bottom: 22%;
   border-radius: $borderRadius;

vue.config.js

@@ -14,7 +14,10 @@ module.exports = {
         lessOptions: {
           modifyVars: {
             'primary-color': '#d14424',
-            'link-color': '#d14424',
+            'text-color': '#41464b',
+            'font-size-base': '13px',
+            'border-radius-base': '2px',
+            'box-shadow-base': '3px 3px 3px rgba(#000, 0.15)',
           },
           javascriptEnabled: true,
         },