From 76c0138d6af6e8dd828ba33faa6d0321c2bad624 Mon Sep 17 00:00:00 2001 From: pipipi-pikachu Date: Sun, 15 Oct 2023 21:38:14 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E6=A0=B7=E5=BC=8F=E7=BB=9F=E4=B8=80/?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/prosemirror.scss | 2 +- src/components/Contextmenu/MenuContent.vue | 2 +- src/components/FullscreenSpin.vue | 4 ++-- src/components/Modal.vue | 1 + src/components/Popover.vue | 2 +- src/components/PopoverMenuItem.vue | 2 +- src/components/Select.vue | 1 + src/components/Slider.vue | 2 +- src/plugins/directive/tooltip.scss | 2 +- src/views/Editor/EditorHeader/index.vue | 1 + .../Editor/Toolbar/ElementAnimationPanel.vue | 11 ++++++++--- .../Toolbar/ElementStylePanel/TextStylePanel.vue | 15 --------------- src/views/Editor/Toolbar/SlideDesignPanel.vue | 1 + 13 files changed, 20 insertions(+), 26 deletions(-) diff --git a/src/assets/styles/prosemirror.scss b/src/assets/styles/prosemirror.scss index be135de7..1f7e8a4f 100644 --- a/src/assets/styles/prosemirror.scss +++ b/src/assets/styles/prosemirror.scss @@ -10,7 +10,7 @@ } ::selection { - background-color: rgba(#d14424, 0.25); + background-color: rgba($themeColor, 0.25); color: inherit; } diff --git a/src/components/Contextmenu/MenuContent.vue b/src/components/Contextmenu/MenuContent.vue index e1ba514d..e5eb95df 100644 --- a/src/components/Contextmenu/MenuContent.vue +++ b/src/components/Contextmenu/MenuContent.vue @@ -50,7 +50,7 @@ $subMenuWidth: 120px; background: #fff; border: 1px solid $borderColor; box-shadow: $boxShadow; - border-radius: 2px; + border-radius: $borderRadius; list-style: none; margin: 0; } diff --git a/src/components/FullscreenSpin.vue b/src/components/FullscreenSpin.vue index 020810dc..0b7b84bc 100644 --- a/src/components/FullscreenSpin.vue +++ b/src/components/FullscreenSpin.vue @@ -46,14 +46,14 @@ withDefaults(defineProps<{ .spinner { width: 36px; height: 36px; - border: 3px solid #d14424; + border: 3px solid $themeColor; border-top-color: transparent; border-radius: 50%; animation: spinner .8s linear infinite; } .text { margin-top: 20px; - color: #d14424; + color: $themeColor; } @keyframes spinner { 0% { diff --git a/src/components/Modal.vue b/src/components/Modal.vue index dbc4f434..22128a41 100644 --- a/src/components/Modal.vue +++ b/src/components/Modal.vue @@ -101,6 +101,7 @@ const onClickMask = () => { padding: 20px; background: #fff; border-radius: $borderRadius; + overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); position: relative; } diff --git a/src/components/Popover.vue b/src/components/Popover.vue index 6cf215c9..23b7eaa7 100644 --- a/src/components/Popover.vue +++ b/src/components/Popover.vue @@ -84,7 +84,7 @@ onMounted(() => { padding: 10px; border: 1px solid $borderColor; box-shadow: $boxShadow; - border-radius: 2px; + border-radius: $borderRadius; font-size: 13px; } diff --git a/src/components/PopoverMenuItem.vue b/src/components/PopoverMenuItem.vue index 4102a377..5ac7f2f9 100644 --- a/src/components/PopoverMenuItem.vue +++ b/src/components/PopoverMenuItem.vue @@ -20,7 +20,7 @@ const emit = defineEmits<{ .popover-menu-item { min-width: 80px; padding: 6px 10px; - border-radius: 2px; + border-radius: $borderRadius; font-size: 13px; cursor: pointer; diff --git a/src/components/Select.vue b/src/components/Select.vue index d656448b..5d7fa310 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -141,6 +141,7 @@ const handleSelect = (option: SelectOption) => { height: 32px; line-height: 32px; padding: 0 5px; + border-radius: $borderRadius; cursor: pointer; @include ellipsis-oneline(); diff --git a/src/components/Slider.vue b/src/components/Slider.vue index b965f541..d14bf6d7 100644 --- a/src/components/Slider.vue +++ b/src/components/Slider.vue @@ -262,7 +262,7 @@ const handleMousedown = (e: MouseEvent | TouchEvent) => { background-color: #262626; text-align: center; color: #fff; - border-radius: 2px; + border-radius: $borderRadius; padding: 6px 5px; font-size: 12px; } diff --git a/src/plugins/directive/tooltip.scss b/src/plugins/directive/tooltip.scss index 6fb2afe2..4d7a899a 100644 --- a/src/plugins/directive/tooltip.scss +++ b/src/plugins/directive/tooltip.scss @@ -1,7 +1,7 @@ .tippy-box[data-theme~='tooltip'] { background-color: #262626; color: #fff; - border-radius: 2px; + border-radius: $borderRadius; padding: 8px; font-size: 12px; line-height: 1.5; diff --git a/src/views/Editor/EditorHeader/index.vue b/src/views/Editor/EditorHeader/index.vue index 0d371aec..19968a19 100644 --- a/src/views/Editor/EditorHeader/index.vue +++ b/src/views/Editor/EditorHeader/index.vue @@ -164,6 +164,7 @@ const setDialogForExport = (type: DialogForExportTypes) => { display: flex; margin: 0 8px; padding: 0 2px; + border-radius: $borderRadius; &:hover { background-color: #f1f1f1; diff --git a/src/views/Editor/Toolbar/ElementAnimationPanel.vue b/src/views/Editor/Toolbar/ElementAnimationPanel.vue index 257fdb9d..c30b821a 100644 --- a/src/views/Editor/Toolbar/ElementAnimationPanel.vue +++ b/src/views/Editor/Toolbar/ElementAnimationPanel.vue @@ -371,7 +371,8 @@ $attentionColor: #e8b76a; overflow-y: auto; overflow-x: hidden; font-size: 12px; - margin-right: -12px; + margin-right: -10px; + padding-right: 5px; position: relative; .mask { @@ -391,13 +392,16 @@ $attentionColor: #e8b76a; background-color: rgba($color: $attentionColor, $alpha: .15); } } +.pool-type:not(:last-child) { + margin-bottom: 5px; +} .type-title { width: 100%; font-size: 13px; margin-bottom: 10px; border-left: 4px solid #aaa; background-color: #eee; - padding: 2px 0 2px 10px; + padding: 4px 0 4px 10px; } .pool-item-wrapper { @include flex-grid-layout(); @@ -405,7 +409,7 @@ $attentionColor: #e8b76a; .pool-item { @include flex-grid-layout-children(4, 24%); - margin-bottom: 10px; + margin-bottom: 5px; height: 40px; line-height: 40px; text-align: center; @@ -413,6 +417,7 @@ $attentionColor: #e8b76a; } .animation-box { background-color: $lightGray; + border-radius: $borderRadius; } .animation-sequence { diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue index ab514aba..a07725a5 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue @@ -616,21 +616,6 @@ const updateLink = (link?: string) => { background-color: #666; } } -.popover-list { - display: flex; - flex-direction: column; - padding: 5px; - margin: -12px; -} -.popover-item { - padding: 9px 12px; - border-radius: 2px; - cursor: pointer; - - &:hover { - background-color: #f5f5f5; - } -} .popover-btn { padding: 0 3px; } diff --git a/src/views/Editor/Toolbar/SlideDesignPanel.vue b/src/views/Editor/Toolbar/SlideDesignPanel.vue index 40bc0b2b..89ecd829 100644 --- a/src/views/Editor/Toolbar/SlideDesignPanel.vue +++ b/src/views/Editor/Toolbar/SlideDesignPanel.vue @@ -372,6 +372,7 @@ const updateViewportRatio = (value: number) => { justify-content: center; padding: 8px; border: 1px solid $borderColor; + border-radius: $borderRadius; } .text {