From e3aef88a58682808474a9895dfa183f325a2b0ce Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Fri, 13 Oct 2023 14:14:21 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=8C=89=E9=92=AE=E7=BB=84=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Button.vue                     |  6 ++
 src/components/ButtonGroup.vue                | 83 +++++++++++++++----
 .../ChartStylePanel/index.vue                 |  8 +-
 .../ElementStylePanel/ImageStylePanel.vue     |  6 +-
 .../ElementStylePanel/MultiStylePanel.vue     |  7 +-
 .../ElementStylePanel/ShapeStylePanel.vue     |  7 +-
 .../ElementStylePanel/TableStylePanel.vue     |  6 +-
 .../ElementStylePanel/TextStylePanel.vue      | 33 ++++----
 8 files changed, 109 insertions(+), 47 deletions(-)

diff --git a/src/components/Button.vue b/src/components/Button.vue
index d2de3134..d1287058 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -9,6 +9,8 @@
       'checkbox': !disabled && type === 'checkbox',
       'radio': !disabled && type === 'radio',
       'small': size === 'small',
+      'first': first,
+      'last': last,
     }"
     @click="handleClick()"
   >
@@ -22,11 +24,15 @@ const props = withDefaults(defineProps<{
   disabled?: boolean
   type?: 'default' | 'primary' | 'checkbox' | 'radio'
   size?: 'small' | 'normal'
+  first?: boolean
+  last?: boolean
 }>(), {
   checked: false,
   disabled: false,
   type: 'default',
   size: 'normal',
+  first: false,
+  last: false,
 })
 
 const emit = defineEmits<{
diff --git a/src/components/ButtonGroup.vue b/src/components/ButtonGroup.vue
index 7da25077..b59b73f6 100644
--- a/src/components/ButtonGroup.vue
+++ b/src/components/ButtonGroup.vue
@@ -1,36 +1,85 @@
 <template>
-  <div class="button-group">
+  <div class="button-group" :class="{ 'passive': passive }" ref="groupRef">
     <slot></slot>
   </div>
 </template>
 
 <script lang="ts" setup>
-
+withDefaults(defineProps<{
+  passive?: boolean
+}>(), {
+  passive: false,
+})
 </script>
 
 <style lang="scss" scoped>
 .button-group {
   display: flex;
   align-items: center;
-  border: 1px solid #d9d9d9;
-  border-right: 0;
-  border-radius: $borderRadius;
-  overflow: hidden;
 
-  ::v-deep(.button) {
+  ::v-deep(button.button) {
     border-radius: 0;
-    border: 0;
+    border-left-width: 1px;
+    border-right-width: 0;
     display: inline-block;
-    position: relative;
+  }
 
-    &::after {
-      content: '';
-      width: 1px;
-      height: 100%;
-      background-color: #d9d9d9;
-      position: absolute;
-      top: 0;
-      right: 0;
+  &:not(.passive) {
+    ::v-deep(button.button) {
+      &:not(:last-child, .radio, .checkbox):hover {
+        position: relative;
+
+        &::after {
+          content: '';
+          width: 1px;
+          height: calc(100% + 2px);
+          background-color: $themeColor;
+          position: absolute;
+          top: -1px;
+          right: -1px;
+        }
+      }
+      
+      &:first-child {
+        border-top-left-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+        border-left-width: 1px;
+      }
+
+      &:last-child {
+        border-top-right-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+        border-right-width: 1px;
+      }
+    }
+  }
+  &.passive {
+    ::v-deep(button.button) {
+      &:not(.last, .radio, .checkbox):hover {
+        position: relative;
+
+        &::after {
+          content: '';
+          width: 1px;
+          height: calc(100% + 2px);
+          background-color: $themeColor;
+          position: absolute;
+          top: -1px;
+          right: -1px;
+        }
+      }
+
+      &.first {
+        border-top-left-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+        border-left-width: 1px;
+      }
+
+      &.last {
+        border-top-right-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+        border-right-width: 1px;
+      }
     }
   }
 }
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
index 997674ed..f80ec8d1 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
@@ -105,7 +105,7 @@
         </div>
       </Popover>
     </div>
-    <ButtonGroup class="row">
+    <ButtonGroup class="row" passive>
       <Popover trigger="click" v-model:open="presetThemesVisible" style="width: 40%;">
         <template #content>
           <div class="preset-themes">
@@ -123,10 +123,10 @@
             </div>
           </div>
         </template>
-        <Button class="no-padding" style="width: 100%;">推荐主题</Button>
+        <Button first style="width: 100%;">推荐主题</Button>
       </Popover>
-      <Button 
-        class="no-padding" 
+      <Button
+        last
         :disabled="themeColor.length >= 10" 
         style="width: 60%;" 
         @click="addThemeColor()"
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
index 24e3ac87..a2b01344 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
@@ -7,8 +7,8 @@
 
     <ElementFlip />
 
-    <ButtonGroup class="row">
-      <Button style="width: calc(100% / 6 * 5);" @click="clipImage()"><IconTailoring class="btn-icon" /> 裁剪图片</Button>
+    <ButtonGroup class="row" passive>
+      <Button first style="width: calc(100% / 6 * 5);" @click="clipImage()"><IconTailoring class="btn-icon" /> 裁剪图片</Button>
       <Popover trigger="click" v-model:value="clipPanelVisible" style="width: calc(100% / 6);">
         <template #content>
           <div class="clip">
@@ -37,7 +37,7 @@
             </template>
           </div>
         </template>
-        <Button class="popover-btn" style="width: 100%;"><IconDown /></Button>
+        <Button last class="popover-btn" style="width: 100%;"><IconDown /></Button>
       </Popover>
     </ButtonGroup>
 
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
index e5333c46..7242e6c5 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
@@ -77,7 +77,7 @@
         </template>
       </Select>
     </SelectGroup>
-    <ButtonGroup class="row">
+    <ButtonGroup class="row" passive>
       <Popover trigger="click" style="width: 30%;">
         <template #content>
           <ColorPicker
@@ -85,7 +85,7 @@
             @update:modelValue="value => updateFontStyle('color', value)"
           />
         </template>
-        <TextColorButton :color="richTextAttrs.color" v-tooltip="'文字颜色'">
+        <TextColorButton first :color="richTextAttrs.color" v-tooltip="'文字颜色'">
           <IconText />
         </TextColorButton>
       </Popover>
@@ -106,7 +106,8 @@
         v-tooltip="'增大字号'"
         @click="updateFontStyle('fontsize-add', '2')"
       ><IconFontSize />+</Button>
-      <Button 
+      <Button
+        last
         class="font-size-btn"
         style="width: 20%;"
         v-tooltip="'减小字号'"
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
index b554fc7c..77587f9e 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
@@ -124,7 +124,7 @@
         </Select>
       </SelectGroup>
 
-      <ButtonGroup class="row">
+      <ButtonGroup class="row" passive>
         <Popover trigger="click" style="width: 30%;">
           <template #content>
             <ColorPicker
@@ -132,7 +132,7 @@
               @update:modelValue="value => emitRichTextCommand('color', value)"
             />
           </template>
-          <TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color">
+          <TextColorButton first v-tooltip="'文字颜色'" :color="richTextAttrs.color">
             <IconText />
           </TextColorButton>
         </Popover>
@@ -153,7 +153,8 @@
           v-tooltip="'增大字号'"
           @click="emitRichTextCommand('fontsize-add')"
         ><IconFontSize />+</Button>
-        <Button 
+        <Button
+          last
           class="font-size-btn"
           style="width: 20%;"
           v-tooltip="'减小字号'"
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
index 661c5bc2..28e23419 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
@@ -28,7 +28,7 @@
       </Select>
     </SelectGroup>
 
-    <ButtonGroup class="row">
+    <ButtonGroup class="row" passive>
       <Popover trigger="click" style="width: 50%;">
         <template #content>
           <ColorPicker
@@ -36,7 +36,7 @@
             @update:modelValue="value => updateTextAttrs({ color: value })"
           />
         </template>
-        <TextColorButton v-tooltip="'文字颜色'" :color="textAttrs.color">
+        <TextColorButton first v-tooltip="'文字颜色'" :color="textAttrs.color">
           <IconText />
         </TextColorButton>
       </Popover>
@@ -47,7 +47,7 @@
             @update:modelValue="value => updateTextAttrs({ backcolor: value })"
           />
         </template>
-        <TextColorButton v-tooltip="'单元格填充'" :color="textAttrs.backcolor">
+        <TextColorButton last v-tooltip="'单元格填充'" :color="textAttrs.backcolor">
           <IconFill />
         </TextColorButton>
       </Popover>
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
index 6fe98171..d58c3783 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
@@ -41,7 +41,7 @@
       </Select>
     </SelectGroup>
 
-    <ButtonGroup class="row">
+    <ButtonGroup class="row" passive>
       <Popover trigger="click" style="width: 30%;">
         <template #content>
           <ColorPicker
@@ -49,7 +49,7 @@
             @update:modelValue="value => emitRichTextCommand('color', value)"
           />
         </template>
-        <TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color">
+        <TextColorButton first v-tooltip="'文字颜色'" :color="richTextAttrs.color">
           <IconText />
         </TextColorButton>
       </Popover>
@@ -70,7 +70,8 @@
         v-tooltip="'增大字号'"
         @click="emitRichTextCommand('fontsize-add')"
       ><IconFontSize />+</Button>
-      <Button 
+      <Button
+        last
         class="font-size-btn"
         style="width: 20%;"
         v-tooltip="'减小字号'"
@@ -132,8 +133,9 @@
       ><IconQuote /></CheckboxButton>
     </ButtonGroup>
 
-    <ButtonGroup class="row">
+    <ButtonGroup class="row" passive>
       <CheckboxButton
+        first
         style="flex: 1;"
         v-tooltip="'清除格式'"
         @click="emitRichTextCommand('clear')"
@@ -155,6 +157,7 @@
           </div>
         </template>
         <CheckboxButton
+          last
           style="width: 100%;"
           :checked="!!richTextAttrs.link"
           v-tooltip="'超链接'"
@@ -177,9 +180,10 @@
       <RadioButton value="justify" v-tooltip="'两端对齐'" style="flex: 1;"><IconAlignTextBoth /></RadioButton>
     </RadioGroup>
 
-    <div class="row">
+    <div class="row" passive>
       <ButtonGroup style="flex: 1;">
         <Button
+          first
           :type="richTextAttrs.bulletList ? 'primary' : 'default'"
           style="flex: 1;"
           v-tooltip="'项目符号'"
@@ -198,12 +202,13 @@
               </ul>
             </div>
           </template>
-          <Button class="popover-btn"><IconDown /></Button>
+          <Button last class="popover-btn"><IconDown /></Button>
         </Popover>
       </ButtonGroup>
       <div style="width: 10px;"></div>
-      <ButtonGroup style="flex: 1;">
+      <ButtonGroup style="flex: 1;" passive>
         <Button
+          first
           :type="richTextAttrs.orderedList ? 'primary' : 'default'"
           style="flex: 1;"
           v-tooltip="'编号'"
@@ -222,29 +227,29 @@
               </ul>
             </div>
           </template>
-          <Button class="popover-btn"><IconDown /></Button>
+          <Button last class="popover-btn"><IconDown /></Button>
         </Popover>
       </ButtonGroup>
     </div>
 
     <div class="row">
-      <ButtonGroup style="flex: 1;">
-        <Button style="flex: 1;" v-tooltip="'减小段落缩进'" @click="emitRichTextCommand('indent', '-1')"><IconIndentLeft /></Button>
+      <ButtonGroup style="flex: 1;" passive>
+        <Button first style="flex: 1;" v-tooltip="'减小段落缩进'" @click="emitRichTextCommand('indent', '-1')"><IconIndentLeft /></Button>
         <Popover trigger="click" v-model:value="indentLeftPanelVisible">
           <template #content>
             <PopoverMenuItem @click="emitRichTextCommand('textIndent', '-1')">减小首行缩进</PopoverMenuItem>
           </template>
-          <Button class="popover-btn"><IconDown /></Button>
+          <Button last class="popover-btn"><IconDown /></Button>
         </Popover>
       </ButtonGroup>
       <div style="width: 10px;"></div>
-      <ButtonGroup style="flex: 1;">
-        <Button style="flex: 1;" v-tooltip="'增大段落缩进'" @click="emitRichTextCommand('indent', '+1')"><IconIndentRight /></Button>
+      <ButtonGroup style="flex: 1;" passive>
+        <Button first style="flex: 1;" v-tooltip="'增大段落缩进'" @click="emitRichTextCommand('indent', '+1')"><IconIndentRight /></Button>
         <Popover trigger="click" v-model:value="indentRightPanelVisible">
           <template #content>
             <PopoverMenuItem @click="emitRichTextCommand('textIndent', '+1')">增大首行缩进</PopoverMenuItem>
           </template>
-          <Button class="popover-btn"><IconDown /></Button>
+          <Button last class="popover-btn"><IconDown /></Button>
         </Popover>
       </ButtonGroup>
     </div>