From 1a7194481c7435c1a35fd9964da5f2f2017af0f6 Mon Sep 17 00:00:00 2001 From: pipipi-pikachu Date: Mon, 8 Feb 2021 18:01:20 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E9=BB=98=E8=AE=A4=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/antd.scss | 27 +++------------ src/assets/styles/global.scss | 34 +++++++++++++++---- src/assets/styles/mixin.scss | 12 +++---- src/assets/styles/prosemirror.scss | 2 ++ src/components/ColorPicker/index.vue | 8 ++--- src/views/Editor/CanvasTool/ChartPool.vue | 4 +-- src/views/Editor/CanvasTool/LinePool.vue | 4 +-- src/views/Editor/CanvasTool/ShapePool.vue | 4 +-- src/views/Editor/EditorHeader/HotkeyDoc.vue | 2 +- .../Editor/Toolbar/ElementAnimationPanel.vue | 4 +-- .../ElementStylePanel/ImageStylePanel.vue | 4 +-- src/views/Editor/Toolbar/SlideStylePanel.vue | 4 +-- vue.config.js | 5 ++- 13 files changed, 59 insertions(+), 55 deletions(-) diff --git a/src/assets/styles/antd.scss b/src/assets/styles/antd.scss index df9448d4..8e441292 100644 --- a/src/assets/styles/antd.scss +++ b/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; } \ No newline at end of file diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss index bd4e1ac9..b3b2af01 100644 --- a/src/assets/styles/global.scss +++ b/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 { diff --git a/src/assets/styles/mixin.scss b/src/assets/styles/mixin.scss index 3dc90299..e6b441a2 100644 --- a/src/assets/styles/mixin.scss +++ b/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}); diff --git a/src/assets/styles/prosemirror.scss b/src/assets/styles/prosemirror.scss index 51a3f616..1aa7feaf 100644 --- a/src/assets/styles/prosemirror.scss +++ b/src/assets/styles/prosemirror.scss @@ -1,3 +1,5 @@ +// ProseMirror 富文本默认样式 + .ProseMirror, .ProseMirror-static { outline: 0; border: 0; diff --git a/src/components/ColorPicker/index.vue b/src/components/ColorPicker/index.vue index 0b100fee..2dbc70cd 100644 --- a/src/components/ColorPicker/index.vue +++ b/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; diff --git a/src/views/Editor/CanvasTool/ChartPool.vue b/src/views/Editor/CanvasTool/ChartPool.vue index 3cea36f3..e1ed2523 100644 --- a/src/views/Editor/CanvasTool/ChartPool.vue +++ b/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%; diff --git a/src/views/Editor/CanvasTool/LinePool.vue b/src/views/Editor/CanvasTool/LinePool.vue index 8d3b53ef..7607015a 100644 --- a/src/views/Editor/CanvasTool/LinePool.vue +++ b/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%; diff --git a/src/views/Editor/CanvasTool/ShapePool.vue b/src/views/Editor/CanvasTool/ShapePool.vue index 22946930..db778cea 100644 --- a/src/views/Editor/CanvasTool/ShapePool.vue +++ b/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%; diff --git a/src/views/Editor/EditorHeader/HotkeyDoc.vue b/src/views/Editor/EditorHeader/HotkeyDoc.vue index 239f8520..c6e0c887 100644 --- a/src/views/Editor/EditorHeader/HotkeyDoc.vue +++ b/src/views/Editor/EditorHeader/HotkeyDoc.vue @@ -47,6 +47,6 @@ export default defineComponent({ .label { width: 140px; - @include ellipsis(); + @include ellipsis-oneline(); } \ No newline at end of file diff --git a/src/views/Editor/Toolbar/ElementAnimationPanel.vue b/src/views/Editor/Toolbar/ElementAnimationPanel.vue index 27ad86d6..6df4e141 100644 --- a/src/views/Editor/Toolbar/ElementAnimationPanel.vue +++ b/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; diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue index ca3116b8..490fe81b 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue +++ b/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; diff --git a/src/views/Editor/Toolbar/SlideStylePanel.vue b/src/views/Editor/Toolbar/SlideStylePanel.vue index 0f0c73c1..a39cab76 100644 --- a/src/views/Editor/Toolbar/SlideStylePanel.vue +++ b/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; diff --git a/vue.config.js b/vue.config.js index 3aec66c3..22f8618b 100644 --- a/vue.config.js +++ b/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, },