From 9fb4a10549fca8185d083dfb4a9afc5848ad3734 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Thu, 5 Oct 2023 12:37:29 +0800
Subject: [PATCH] refactor: style fix

---
 src/components/Popover.vue                    |  9 +++
 .../Editor/CanvasTool/TableGenerator.vue      |  8 +--
 .../Editor/Toolbar/ElementAnimationPanel.vue  |  4 +-
 .../Editor/Toolbar/ElementPositionPanel.vue   | 24 +++----
 .../ElementStylePanel/AudioStylePanel.vue     | 14 ++--
 .../ChartStylePanel/index.vue                 |  6 +-
 .../ElementStylePanel/LatexStylePanel.vue     |  6 +-
 .../ElementStylePanel/LineStylePanel.vue      |  2 +-
 .../ElementStylePanel/MultiStylePanel.vue     | 20 +++---
 .../ElementStylePanel/ShapeStylePanel.vue     | 48 ++++++--------
 .../ElementStylePanel/TableStylePanel.vue     |  6 +-
 .../ElementStylePanel/TextStylePanel.vue      | 35 +++++-----
 .../ElementStylePanel/VideoStylePanel.vue     |  4 +-
 src/views/Editor/Toolbar/SlideDesignPanel.vue | 65 ++++++++++---------
 .../Editor/Toolbar/common/ColorButton.vue     |  3 +-
 .../Toolbar/common/ElementColorMask.vue       | 17 ++---
 .../Editor/Toolbar/common/ElementOpacity.vue  |  7 +-
 .../Editor/Toolbar/common/ElementOutline.vue  | 18 ++---
 .../Editor/Toolbar/common/ElementShadow.vue   | 25 ++++---
 .../Editor/Toolbar/common/TextColorButton.vue |  1 +
 .../Mobile/MobileEditor/ElementToolbar.vue    |  4 +-
 21 files changed, 162 insertions(+), 164 deletions(-)

diff --git a/src/components/Popover.vue b/src/components/Popover.vue
index b8043ec6..d5de2e52 100644
--- a/src/components/Popover.vue
+++ b/src/components/Popover.vue
@@ -58,6 +58,7 @@ onMounted(() => {
     offset: [0, 8],
     duration: 200,
     animation: 'scale',
+    theme: 'popover',
     onShow() {
       contentVisible.value = true
     },
@@ -84,5 +85,13 @@ onMounted(() => {
   border: 1px solid $borderColor;
   box-shadow: $boxShadow;
   border-radius: 2px;
+  font-size: 13px;
+}
+</style>
+
+<style lang="scss">
+.tippy-box[data-theme~='popover'] {
+  border: 0;
+  outline: 0;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/Editor/CanvasTool/TableGenerator.vue b/src/views/Editor/CanvasTool/TableGenerator.vue
index 5af71e31..7c75afca 100644
--- a/src/views/Editor/CanvasTool/TableGenerator.vue
+++ b/src/views/Editor/CanvasTool/TableGenerator.vue
@@ -26,21 +26,21 @@
 
     <div class="custom" v-else>
       <div class="row">
-        <div class="label" style="flex: 1;">行数：</div>
+        <div class="label" style="width: 25%;">行数：</div>
         <NumberInput
           :min="1"
           :max="20"
           v-model:value="customRow"
-          style="flex: 3;"
+          style="width: 75%;"
         />
       </div>
       <div class="row">
-        <div class="label" style="flex: 1;">列数：</div>
+        <div class="label" style="width: 25%;">列数：</div>
         <NumberInput
           :min="1"
           :max="20"
           v-model:value="customCol"
-          style="flex: 3;"
+          style="width: 75%;"
         />
       </div>
       <div class="btns">
diff --git a/src/views/Editor/Toolbar/ElementAnimationPanel.vue b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
index 44b6cc16..257fdb9d 100644
--- a/src/views/Editor/Toolbar/ElementAnimationPanel.vue
+++ b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
@@ -101,7 +101,7 @@
               />
             </div>
             <div class="config-item">
-              <Button style="flex: 1;" @click="openAnimationPool(element.id)">更换动画</Button>
+              <Button style="width: 100%;" @click="openAnimationPool(element.id)">更换动画</Button>
             </div>
           </div>
         </div>
@@ -424,7 +424,7 @@ $attentionColor: #e8b76a;
 }
 .sequence-item {
   border: 1px solid $borderColor;
-  padding: 10px 6px;
+  padding: 8px;
   border-radius: $borderRadius;
   margin-bottom: 8px;
   transition: all .5s;
diff --git a/src/views/Editor/Toolbar/ElementPositionPanel.vue b/src/views/Editor/Toolbar/ElementPositionPanel.vue
index a594a1be..4d43162e 100644
--- a/src/views/Editor/Toolbar/ElementPositionPanel.vue
+++ b/src/views/Editor/Toolbar/ElementPositionPanel.vue
@@ -31,18 +31,18 @@
         :step="5"
         :value="left"
         @update:value="value => updateLeft(value)"
-        style="flex: 4;"
+        style="width: 45%;"
       >
         <template #prefix>
           水平：
         </template>
       </NumberInput>
-      <div style="flex: 1;"></div>
+      <div style="width: 10%;"></div>
       <NumberInput
         :step="5"
         :value="top"
         @update:value="value => updateTop(value)"
-        style="flex: 4;"
+        style="width: 45%;"
       >
         <template #prefix>
           垂直：
@@ -59,17 +59,17 @@
           :disabled="isVerticalText"
           :value="width"
           @update:value="value => updateWidth(value)"
-          style="flex: 4;"
+          style="width: 45%;"
         >
           <template #prefix>
             宽度：
           </template>
         </NumberInput>
         <template v-if="['image', 'shape', 'audio'].includes(handleElement!.type)">
-          <IconLock style="flex: 1;" class="icon-btn" v-tooltip="'解除宽高比锁定'" @click="updateFixedRatio(false)" v-if="fixedRatio" />
-          <IconUnlock style="flex: 1;" class="icon-btn" v-tooltip="'宽高比锁定'" @click="updateFixedRatio(true)" v-else />
+          <IconLock style="width: 10%;" class="icon-btn" v-tooltip="'解除宽高比锁定'" @click="updateFixedRatio(false)" v-if="fixedRatio" />
+          <IconUnlock style="width: 10%;" class="icon-btn" v-tooltip="'宽高比锁定'" @click="updateFixedRatio(true)" v-else />
         </template>
-        <div style="flex: 1;" v-else></div>
+        <div style="width: 10%;" v-else></div>
         <NumberInput 
           :min="minSize"
           :max="800"
@@ -77,7 +77,7 @@
           :disabled="isHorizontalText || handleElement!.type === 'table'" 
           :value="height" 
           @update:value="value => updateHeight(value)"
-          style="flex: 4;"
+          style="width: 45%;"
         >
           <template #prefix>
             高度：
@@ -96,15 +96,15 @@
           :step="5"
           :value="rotate" 
           @update:value="value => updateRotate(value)" 
-          style="flex: 8;" 
+          style="width: 45%;" 
         >
           <template #prefix>
             旋转：
           </template>
         </NumberInput>
-        <div style="flex: 1;"></div>
-        <div class="text-btn" @click="updateRotate45('-')" style="flex: 5;"><IconRotate /> -45°</div>
-        <div class="text-btn" @click="updateRotate45('+')"  style="flex: 5;"><IconRotate :style="{ transform: 'rotateY(180deg)' }" /> +45°</div>
+        <div style="width: 7%;"></div>
+        <div class="text-btn" @click="updateRotate45('-')" style="width: 24%;"><IconRotate /> -45°</div>
+        <div class="text-btn" @click="updateRotate45('+')"  style="width: 24%;"><IconRotate :style="{ transform: 'rotateY(180deg)' }" /> +45°</div>
       </div>
     </template>
   </div>
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/AudioStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/AudioStylePanel.vue
index 19dea5bd..14bdc2e1 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/AudioStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/AudioStylePanel.vue
@@ -1,21 +1,21 @@
 <template>
   <div class="audio-style-panel">
     <div class="row">
-      <div style="flex: 2;">图标颜色：</div>
-      <Popover trigger="click" style="flex: 3;">
+      <div style="width: 40%;">图标颜色：</div>
+      <Popover trigger="click" style="width: 60%;">
         <template #content>
           <ColorPicker
             :modelValue="handleAudioElement.color"
             @update:modelValue="value => updateAudio({ color: value })"
           />
         </template>
-        <ColorButton :color="handleAudioElement.color" style="width: 100%;" />
+        <ColorButton :color="handleAudioElement.color" />
       </Popover>
     </div>
 
     <div class="row switch-row">
-      <div style="flex: 2;">自动播放：</div>
-      <div class="switch-wrapper" style="flex: 3;">
+      <div style="width: 40%;">自动播放：</div>
+      <div class="switch-wrapper" style="width: 60%;">
         <Switch 
           :value="handleAudioElement.autoplay" 
           @update:value="value => updateAudio({ autoplay: value })" 
@@ -24,8 +24,8 @@
     </div>
 
     <div class="row switch-row">
-      <div style="flex: 2;">循环播放：</div>
-      <div class="switch-wrapper" style="flex: 3;">
+      <div style="width: 40%;">循环播放：</div>
+      <div class="switch-wrapper" style="width: 60%;">
         <Switch 
           :value="handleAudioElement.loop" 
           @update:value="value => updateAudio({ loop: value })" 
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
index c075e161..997674ed 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
@@ -72,7 +72,7 @@
             @update:modelValue="value => updateFill(value)"
           />
         </template>
-        <ColorButton :color="fill" style="width: 100%;" />
+        <ColorButton :color="fill" />
       </Popover>
     </div>
     <div class="row">
@@ -84,7 +84,7 @@
             @update:modelValue="value => updateGridColor(value)"
           />
         </template>
-        <ColorButton :color="gridColor" style="width: 100%;" />
+        <ColorButton :color="gridColor" />
       </Popover>
     </div>
 
@@ -100,7 +100,7 @@
           />
         </template>
         <div class="color-btn-wrap" style="width: 100%;">
-          <ColorButton :color="color" style="width: 100%;" />
+          <ColorButton :color="color" />
           <div class="delete-color-btn" v-tooltip="'删除'" @click.stop="deleteThemeColor(index)" v-if="index !== 0"><IconCloseSmall /></div>
         </div>
       </Popover>
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue
index bd988f7c..ea3c8532 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="latex-style-panel">
-    <div class="row"><Button style="flex: 1;" @click="latexEditorVisible = true">编辑 LaTeX</Button></div>
+    <div class="row">
+      <Button style="flex: 1;" @click="latexEditorVisible = true">编辑 LaTeX</Button>
+    </div>
 
     <Divider />
 
@@ -13,7 +15,7 @@
             @update:modelValue="value => updateLatex({ color: value })"
           />
         </template>
-        <ColorButton :color="handleLatexElement.color" style="width: 100%;" />
+        <ColorButton :color="handleLatexElement.color" />
       </Popover>
     </div>
     <div class="row">
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue
index 9b9feef7..f0e94734 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue
@@ -21,7 +21,7 @@
             @update:modelValue="value => updateLine({ color: value })"
           />
         </template>
-        <ColorButton :color="handleLineElement.color" style="width: 100%;" />
+        <ColorButton :color="handleLineElement.color" />
       </Popover>
     </div>
     <div class="row">
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
index e5e119d6..e5333c46 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
@@ -9,7 +9,7 @@
             @update:modelValue="value => updateFill(value)"
           />
         </template>
-        <ColorButton :color="fill" style="width: 100%;" />
+        <ColorButton :color="fill" />
       </Popover>
     </div>
 
@@ -36,7 +36,7 @@
             @update:modelValue="value => updateOutline({ color: value })"
           />
         </template>
-        <ColorButton :color="outline.color || '#000'" style="width: 100%;" />
+        <ColorButton :color="outline.color || '#000'" />
       </Popover>
     </div>
     <div class="row">
@@ -52,7 +52,7 @@
 
     <SelectGroup class="row">
       <Select
-        style="flex: 3;"
+        style="width: 60%;;"
         :value="richTextAttrs.fontname"
         @update:value="value => updateFontStyle('fontname', value as string)"
         :options="[
@@ -65,7 +65,7 @@
         </template>
       </Select>
       <Select
-        style="flex: 2;"
+        style="width: 40%;"
         :value="richTextAttrs.fontsize"
         @update:value="value => updateFontStyle('fontsize', value as string)"
         :options="fontSizeOptions.map(item => ({
@@ -78,37 +78,37 @@
       </Select>
     </SelectGroup>
     <ButtonGroup class="row">
-      <Popover trigger="click" style="flex: 3;">
+      <Popover trigger="click" style="width: 30%;">
         <template #content>
           <ColorPicker
             :modelValue="richTextAttrs.color"
             @update:modelValue="value => updateFontStyle('color', value)"
           />
         </template>
-        <TextColorButton :color="richTextAttrs.color" style="width: 100%;" v-tooltip="'文字颜色'">
+        <TextColorButton :color="richTextAttrs.color" v-tooltip="'文字颜色'">
           <IconText />
         </TextColorButton>
       </Popover>
-      <Popover trigger="click" style="flex: 3;">
+      <Popover trigger="click" style="width: 30%;">
         <template #content>
           <ColorPicker
             :modelValue="richTextAttrs.backcolor"
             @update:modelValue="value => updateFontStyle('backcolor', value)"
           />
         </template>
-        <TextColorButton :color="richTextAttrs.backcolor" style="width: 100%;" v-tooltip="'文字高亮'">
+        <TextColorButton :color="richTextAttrs.backcolor" v-tooltip="'文字高亮'">
           <IconHighLight />
         </TextColorButton>
       </Popover>
       <Button 
         class="font-size-btn"
-        style="flex: 2;"
+        style="width: 20%;"
         v-tooltip="'增大字号'"
         @click="updateFontStyle('fontsize-add', '2')"
       ><IconFontSize />+</Button>
       <Button 
         class="font-size-btn"
-        style="flex: 2;"
+        style="width: 20%;"
         v-tooltip="'减小字号'"
         @click="updateFontStyle('fontsize-reduce', '2')"
       ><IconFontSize />-</Button>
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
index b8c4d9fb..b0217f02 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
@@ -22,7 +22,7 @@
 
     <div class="row">
       <Select 
-        style="flex: 10;" 
+        style="flex: 1;" 
         :value="fillType" 
         @update:value="value => updateFillType(value as 'fill' | 'gradient')"
         :options="[
@@ -30,18 +30,18 @@
           { label: '渐变填充', value: 'gradient' },
         ]"
       />
-      <div style="flex: 1;"></div>
-      <Popover trigger="click" v-if="fillType === 'fill'" style="flex: 10;">
+      <div style="width: 10px;"></div>
+      <Popover trigger="click" v-if="fillType === 'fill'" style="flex: 1;">
         <template #content>
           <ColorPicker
             :modelValue="fill"
             @update:modelValue="value => updateFill(value)"
           />
         </template>
-        <ColorButton :color="fill" style="width: 100%;" />
+        <ColorButton :color="fill" />
       </Popover>
       <Select 
-        style="flex: 10;" 
+        style="flex: 1;" 
         :value="gradient.type" 
         @update:value="value => updateGradient({ type: value as 'linear' | 'radial' })"
         v-else
@@ -54,33 +54,33 @@
     
     <template v-if="fillType === 'gradient'">
       <div class="row">
-        <div style="flex: 2;">起点颜色：</div>
-        <Popover trigger="click" style="flex: 3;">
+        <div style="width: 40%;">起点颜色：</div>
+        <Popover trigger="click" style="width: 60%;">
           <template #content>
             <ColorPicker
               :modelValue="gradient.color[0]"
               @update:modelValue="value => updateGradient({ color: [value, gradient.color[1]] })"
             />
           </template>
-          <ColorButton :color="gradient.color[0]" style="width: 100%;" />
+          <ColorButton :color="gradient.color[0]" />
         </Popover>
       </div>
       <div class="row">
-        <div style="flex: 2;">终点颜色：</div>
-        <Popover trigger="click" style="flex: 3;">
+        <div style="width: 40%;">终点颜色：</div>
+        <Popover trigger="click" style="width: 60%;">
           <template #content>
             <ColorPicker
               :modelValue="gradient.color[1]"
               @update:modelValue="value => updateGradient({ color: [gradient.color[0], value] })"
             />
           </template>
-          <ColorButton :color="gradient.color[1]" style="width: 100%;" />
+          <ColorButton :color="gradient.color[1]" />
         </Popover>
       </div>
       <div class="row" v-if="gradient.type === 'linear'">
-        <div style="flex: 2;">渐变角度：</div>
+        <div style="width: 40%;">渐变角度：</div>
         <Slider
-          class="slider"
+          style="width: 60%;"
           :min="0"
           :max="360"
           :step="15"
@@ -98,7 +98,7 @@
       <SelectGroup class="row">
         <Select
           class="font-select"
-          style="flex: 3;"
+          style="width: 60%;"
           :value="richTextAttrs.fontname"
           @update:value="value => emitRichTextCommand('fontname', value as string)"
           :options="[
@@ -111,7 +111,7 @@
           </template>
         </Select>
         <Select
-          style="flex: 2;"
+          style="width: 40%;"
           :value="richTextAttrs.fontsize"
           @update:value="value => emitRichTextCommand('fontsize', value as string)"
           :options="fontSizeOptions.map(item => ({
@@ -125,37 +125,37 @@
       </SelectGroup>
 
       <ButtonGroup class="row">
-        <Popover trigger="click" style="flex: 3;">
+        <Popover trigger="click" style="width: 30%;">
           <template #content>
             <ColorPicker
               :modelValue="richTextAttrs.color"
               @update:modelValue="value => emitRichTextCommand('color', value)"
             />
           </template>
-          <TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color" style="width: 100%;">
+          <TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color">
             <IconText />
           </TextColorButton>
         </Popover>
-        <Popover trigger="click" style="flex: 3;">
+        <Popover trigger="click" style="width: 30%;">
           <template #content>
             <ColorPicker
               :modelValue="richTextAttrs.backcolor"
               @update:modelValue="value => emitRichTextCommand('backcolor', value)"
             />
           </template>
-          <TextColorButton v-tooltip="'文字高亮'" :color="richTextAttrs.backcolor" style="width: 100%;">
+          <TextColorButton v-tooltip="'文字高亮'" :color="richTextAttrs.backcolor">
             <IconHighLight />
           </TextColorButton>
         </Popover>
         <Button 
           class="font-size-btn"
-          style="flex: 2;"
+          style="width: 20%;"
           v-tooltip="'增大字号'"
           @click="emitRichTextCommand('fontsize-add')"
         ><IconFontSize />+</Button>
         <Button 
           class="font-size-btn"
-          style="flex: 2;"
+          style="width: 20%;"
           v-tooltip="'减小字号'"
           @click="emitRichTextCommand('fontsize-reduce')"
         ><IconFontSize />-</Button>
@@ -380,15 +380,9 @@ const emitRichTextCommand = (command: string, value?: string) => {
   align-items: center;
   margin-bottom: 10px;
 }
-.font-select {
-  max-width: 50%;
-}
 .font-size-btn {
   padding: 0;
 }
-.slider {
-  flex: 3;
-}
 .title {
   display: flex;
   justify-content: space-between;
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
index 8687a48f..661c5bc2 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
@@ -36,7 +36,7 @@
             @update:modelValue="value => updateTextAttrs({ color: value })"
           />
         </template>
-        <TextColorButton v-tooltip="'文字颜色'" :color="textAttrs.color" style="width: 100%;">
+        <TextColorButton 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" style="width: 100%;">
+        <TextColorButton v-tooltip="'单元格填充'" :color="textAttrs.backcolor">
           <IconFill />
         </TextColorButton>
       </Popover>
@@ -160,7 +160,7 @@
               @update:modelValue="value => updateTheme({ color: value })"
             />
           </template>
-          <ColorButton :color="theme.color" style="width: 100%;" />
+          <ColorButton :color="theme.color" />
         </Popover>
       </div>
     </template>
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
index 6aa47ee7..720cf836 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
@@ -15,7 +15,7 @@
     <SelectGroup class="row">
       <Select
         class="font-select"
-        style="width: 50%;"
+        style="width: 60%;"
         :value="richTextAttrs.fontname"
         @update:value="value => emitRichTextCommand('fontname', value as string)"
         :options="[
@@ -28,7 +28,7 @@
         </template>
       </Select>
       <Select
-        style="width: 50%;"
+        style="width: 40%;"
         :value="richTextAttrs.fontsize"
         @update:value="value => emitRichTextCommand('fontsize', value as string)"
         :options="fontSizeOptions.map(item => ({
@@ -42,37 +42,37 @@
     </SelectGroup>
 
     <ButtonGroup class="row">
-      <Popover trigger="click" style="flex: 3;">
+      <Popover trigger="click" style="width: 30%;">
         <template #content>
           <ColorPicker
             :modelValue="richTextAttrs.color"
             @update:modelValue="value => emitRichTextCommand('color', value)"
           />
         </template>
-        <TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color" style="width: 100%;">
+        <TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color">
           <IconText />
         </TextColorButton>
       </Popover>
-      <Popover trigger="click" style="flex: 3;">
+      <Popover trigger="click" style="width: 30%;">
         <template #content>
           <ColorPicker
             :modelValue="richTextAttrs.backcolor"
             @update:modelValue="value => emitRichTextCommand('backcolor', value)"
           />
         </template>
-        <TextColorButton v-tooltip="'文字高亮'" :color="richTextAttrs.backcolor" style="width: 100%;">
+        <TextColorButton v-tooltip="'文字高亮'" :color="richTextAttrs.backcolor">
           <IconHighLight />
         </TextColorButton>
       </Popover>
       <Button 
         class="font-size-btn"
-        style="flex: 2;"
+        style="width: 20%;"
         v-tooltip="'增大字号'"
         @click="emitRichTextCommand('fontsize-add')"
       ><IconFontSize />+</Button>
       <Button 
         class="font-size-btn"
-        style="flex: 2;"
+        style="width: 20%;"
         v-tooltip="'减小字号'"
         @click="emitRichTextCommand('fontsize-reduce')"
       ><IconFontSize />-</Button>
@@ -144,7 +144,7 @@
         v-tooltip="'格式刷'"
         @click="toggleFormatPainter()"
       ><IconFormatBrush /></CheckboxButton>
-      <Popover placement="bottom-end" trigger="click" v-model:value="linkPopoverVisible" style="flex: 1;">
+      <Popover placement="bottom-end" trigger="click" v-model:value="linkPopoverVisible" style="width: 33.33%;">
         <template #content>
           <div class="link-popover">
             <Input v-model:value="link" placeholder="请输入超链接" />
@@ -178,7 +178,7 @@
     </RadioGroup>
 
     <div class="row">
-      <ButtonGroup style="flex: 15;">
+      <ButtonGroup style="flex: 1;">
         <Button
           :type="richTextAttrs.bulletList ? 'primary' : 'default'"
           style="flex: 1;"
@@ -201,8 +201,8 @@
           <Button class="popover-btn"><IconDown /></Button>
         </Popover>
       </ButtonGroup>
-      <div style="flex: 1;"></div>
-      <ButtonGroup style="flex: 15;">
+      <div style="width: 10px;"></div>
+      <ButtonGroup style="flex: 1;">
         <Button
           :type="richTextAttrs.orderedList ? 'primary' : 'default'"
           style="flex: 1;"
@@ -228,7 +228,7 @@
     </div>
 
     <div class="row">
-      <ButtonGroup style="flex: 15;">
+      <ButtonGroup style="flex: 1;">
         <Button style="flex: 1;" v-tooltip="'减小段落缩进'" @click="emitRichTextCommand('indent', '-1')"><IconIndentLeft /></Button>
         <Popover trigger="click" v-model:value="indentLeftPanelVisible">
           <template #content>
@@ -237,8 +237,8 @@
           <Button class="popover-btn"><IconDown /></Button>
         </Popover>
       </ButtonGroup>
-      <div style="flex: 1;"></div>
-      <ButtonGroup style="flex: 15;">
+      <div style="width: 10px;"></div>
+      <ButtonGroup style="flex: 1;">
         <Button style="flex: 1;" v-tooltip="'增大段落缩进'" @click="emitRichTextCommand('indent', '+1')"><IconIndentRight /></Button>
         <Popover trigger="click" v-model:value="indentRightPanelVisible">
           <template #content>
@@ -302,7 +302,7 @@
             @update:modelValue="value => updateFill(value)"
           />
         </template>
-        <ColorButton :color="fill" style="width: 100%;" />
+        <ColorButton :color="fill" />
       </Popover>
     </div>
 
@@ -550,9 +550,6 @@ const updateLink = (link?: string) => {
     margin-top: -1px;
   }
 }
-.font-select {
-  max-width: 50%;
-}
 .font-size-btn {
   padding: 0;
 }
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/VideoStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/VideoStylePanel.vue
index e8c11a64..75b02038 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/VideoStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/VideoStylePanel.vue
@@ -10,7 +10,9 @@
         </div>
       </FileInput>
     </div>
-    <div class="row"><Button style="flex: 1;" @click="updateVideo({ poster: '' })">重置封面</Button></div>
+    <div class="row">
+      <Button style="flex: 1;" @click="updateVideo({ poster: '' })">重置封面</Button>
+    </div>
   </div>
 </template>
 
diff --git a/src/views/Editor/Toolbar/SlideDesignPanel.vue b/src/views/Editor/Toolbar/SlideDesignPanel.vue
index 70778866..40bc0b2b 100644
--- a/src/views/Editor/Toolbar/SlideDesignPanel.vue
+++ b/src/views/Editor/Toolbar/SlideDesignPanel.vue
@@ -3,7 +3,7 @@
     <div class="title">背景填充</div>
     <div class="row">
       <Select 
-        style="flex: 10;" 
+        style="flex: 1;" 
         :value="background.type" 
         @update:value="value => updateBackgroundType(value as 'gradient' | 'image' | 'solid')"
         :options="[
@@ -12,20 +12,20 @@
           { label: '渐变填充', value: 'gradient' },
         ]"
       />
-      <div style="flex: 1;"></div>
+      <div style="width: 10px;"></div>
 
-      <Popover trigger="click" v-if="background.type === 'solid'" style="flex: 10;">
+      <Popover trigger="click" v-if="background.type === 'solid'" style="flex: 1;">
         <template #content>
           <ColorPicker
             :modelValue="background.color"
             @update:modelValue="color => updateBackground({ color })"
           />
         </template>
-        <ColorButton :color="background.color || '#fff'" style="width: 100%;" />
+        <ColorButton :color="background.color || '#fff'" />
       </Popover>
 
       <Select 
-        style="flex: 10;" 
+        style="flex: 1;" 
         :value="background.imageSize || 'cover'" 
         @update:value="value => updateBackground({ imageSize: value as 'repeat' | 'cover' | 'contain' })"
         v-else-if="background.type === 'image'"
@@ -37,7 +37,7 @@
       />
 
       <Select 
-        style="flex: 10;" 
+        style="flex: 1;" 
         :value="background.gradientType || ''" 
         @update:value="value => updateBackground({ gradientType: value as 'linear' | 'radial' })"
         v-else
@@ -60,50 +60,52 @@
 
     <div class="background-gradient-wrapper" v-if="background.type === 'gradient'">
       <div class="row">
-        <div style="flex: 2;">起点颜色：</div>
-        <Popover trigger="click" style="flex: 3;">
+        <div style="width: 40%;">起点颜色：</div>
+        <Popover trigger="click" style="width: 60%;">
           <template #content>
             <ColorPicker
               :modelValue="background.gradientColor![0]"
               @update:modelValue="value => updateBackground({ gradientColor: [value, background.gradientColor![1]] })"
             />
           </template>
-          <ColorButton :color="background.gradientColor![0]" style="width: 100%;" />
+          <ColorButton :color="background.gradientColor![0]" />
         </Popover>
       </div>
       <div class="row">
-        <div style="flex: 2;">终点颜色：</div>
-        <Popover trigger="click" style="flex: 3;">
+        <div style="width: 40%;">终点颜色：</div>
+        <Popover trigger="click" style="width: 60%;">
           <template #content>
             <ColorPicker
               :modelValue="background.gradientColor![1]"
               @update:modelValue="value => updateBackground({ gradientColor: [background.gradientColor![0], value] })"
             />
           </template>
-          <ColorButton :color="background.gradientColor![1]" style="width: 100%;" />
+          <ColorButton :color="background.gradientColor![1]" />
         </Popover>
       </div>
       <div class="row" v-if="background.gradientType === 'linear'">
-        <div style="flex: 2;">渐变角度：</div>
+        <div style="width: 40%;">渐变角度：</div>
         <Slider
-          class="slider"
           :min="0"
           :max="360"
           :step="15"
           :value="background.gradientRotate || 0"
           @update:value="value => updateBackground({ gradientRotate: value as number })" 
+          style="width: 60%;"
         />
       </div>
     </div>
 
-    <div class="row"><Button style="flex: 1;" @click="applyBackgroundAllSlide()">应用背景到全部</Button></div>
+    <div class="row">
+      <Button style="flex: 1;" @click="applyBackgroundAllSlide()">应用背景到全部</Button>
+    </div>
 
     <Divider />
 
     <div class="row">
-      <div style="flex: 2;">画布尺寸：</div>
+      <div style="width: 40%;">画布尺寸：</div>
       <Select 
-        style="flex: 3;" 
+        style="width: 60%;" 
         :value="viewportRatio" 
         @update:value="value => updateViewportRatio(value as number)"
         :options="[
@@ -119,9 +121,9 @@
 
     <div class="title">全局主题</div>
     <div class="row">
-      <div style="flex: 2;">字体：</div>
+      <div style="width: 40%;">字体：</div>
       <Select
-        style="flex: 3;"
+        style="width: 60%;"
         :value="theme.fontName"
         @update:value="value => updateTheme({ fontName: value as string })"
         :options="[
@@ -131,43 +133,45 @@
       />
     </div>
     <div class="row">
-      <div style="flex: 2;">字体颜色：</div>
-      <Popover trigger="click" style="flex: 3;">
+      <div style="width: 40%;">字体颜色：</div>
+      <Popover trigger="click" style="width: 60%;">
         <template #content>
           <ColorPicker
             :modelValue="theme.fontColor"
             @update:modelValue="value => updateTheme({ fontColor: value })"
           />
         </template>
-        <ColorButton :color="theme.fontColor" style="width: 100%;" />
+        <ColorButton :color="theme.fontColor" />
       </Popover>
     </div>
     <div class="row">
-      <div style="flex: 2;">背景颜色：</div>
-      <Popover trigger="click" style="flex: 3;">
+      <div style="width: 40%;">背景颜色：</div>
+      <Popover trigger="click" style="width: 60%;">
         <template #content>
           <ColorPicker
             :modelValue="theme.backgroundColor"
             @update:modelValue="value => updateTheme({ backgroundColor: value })"
           />
         </template>
-        <ColorButton :color="theme.backgroundColor" style="width: 100%;" />
+        <ColorButton :color="theme.backgroundColor" />
       </Popover>
     </div>
     <div class="row">
-      <div style="flex: 2;">主题色：</div>
-      <Popover trigger="click" style="flex: 3;">
+      <div style="width: 40%;">主题色：</div>
+      <Popover trigger="click" style="width: 60%;">
         <template #content>
           <ColorPicker
             :modelValue="theme.themeColor"
             @update:modelValue="value => updateTheme({ themeColor: value })"
           />
         </template>
-        <ColorButton :color="theme.themeColor" style="width: 100%;" />
+        <ColorButton :color="theme.themeColor" />
       </Popover>
     </div>
 
-    <div class="row"><Button style="flex: 1;" @click="applyThemeToAllSlides()">应用主题到全部</Button></div>
+    <div class="row">
+      <Button style="flex: 1;" @click="applyThemeToAllSlides()">应用主题到全部</Button>
+    </div>
 
     <Divider />
 
@@ -414,7 +418,4 @@ const updateViewportRatio = (value: number) => {
     }
   }
 }
-.slider {
-  flex: 3;
-}
 </style>
\ No newline at end of file
diff --git a/src/views/Editor/Toolbar/common/ColorButton.vue b/src/views/Editor/Toolbar/common/ColorButton.vue
index 17549460..bc332ff9 100644
--- a/src/views/Editor/Toolbar/common/ColorButton.vue
+++ b/src/views/Editor/Toolbar/common/ColorButton.vue
@@ -17,6 +17,7 @@ defineProps<{
 
 <style lang="scss" scoped>
 .color-btn {
+  width: 100%;
   display: flex !important;
   align-items: center;
   justify-content: center;
@@ -34,7 +35,7 @@ defineProps<{
   height: 100%;
 }
 .color-btn-icon {
-  width: 34px;
+  width: 32px;
   font-size: 13px;
   color: #bfbfbf;
 }
diff --git a/src/views/Editor/Toolbar/common/ElementColorMask.vue b/src/views/Editor/Toolbar/common/ElementColorMask.vue
index 59a1ce1e..148f59a2 100644
--- a/src/views/Editor/Toolbar/common/ElementColorMask.vue
+++ b/src/views/Editor/Toolbar/common/ElementColorMask.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="element-color-mask">
     <div class="row">
-      <div style="flex: 1;">着色（蒙版）：</div>
-      <div class="switch-wrapper" style="flex: 1;">
+      <div style="width: 40%;">着色（蒙版）：</div>
+      <div class="switch-wrapper" style="width: 60%;">
         <Switch 
           :value="hasColorMask" 
           @update:value="value => toggleColorMask(value)" 
@@ -11,26 +11,26 @@
     </div>
     <template v-if="hasColorMask">
       <div class="row" style="margin-top: 15px;">
-        <div style="flex: 2;">蒙版颜色：</div>
-        <Popover trigger="click" style="flex: 3;">
+        <div style="width: 40%;">蒙版颜色：</div>
+        <Popover trigger="click" style="width: 60%;">
           <template #content>
             <ColorPicker
               :modelValue="colorMask.color"
               @update:modelValue="value => updateColorMask({ color: value })"
             />
           </template>
-          <ColorButton :color="colorMask.color" style="width: 100%;" />
+          <ColorButton :color="colorMask.color" />
         </Popover>
       </div>
       <div class="row">
-        <div style="flex: 2;">不透明度：</div>
+        <div style="width: 40%;">不透明度：</div>
         <Slider
-          class="opacity-slider"
           :max="1"
           :min="0"
           :step="0.05"
           :value="colorMask.opacity"
           @update:value="value => updateColorMask({ opacity: value as number })"
+          style="width: 60%;"
         />
       </div>
     </template>
@@ -98,7 +98,4 @@ const updateColorMask = (colorMaskProp: Partial<ImageColorElementMask>) => {
 .switch-wrapper {
   text-align: right;
 }
-.opacity-slider {
-  flex: 3;
-}
 </style>
\ No newline at end of file
diff --git a/src/views/Editor/Toolbar/common/ElementOpacity.vue b/src/views/Editor/Toolbar/common/ElementOpacity.vue
index bdb01ff5..219784e1 100644
--- a/src/views/Editor/Toolbar/common/ElementOpacity.vue
+++ b/src/views/Editor/Toolbar/common/ElementOpacity.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="element-opacity">
     <div class="row">
-      <div style="flex: 2;">不透明度：</div>
+      <div style="width: 40%;">不透明度：</div>
       <Slider
-        class="slider"
         :min="0"
         :max="1"
         :step="0.1"
         :value="opacity"
         @update:value="value => updateOpacity(value as number)" 
+        style="width: 60%;"
       />
     </div>
   </div>
@@ -48,7 +48,4 @@ const updateOpacity = (value: number) => {
   align-items: center;
   margin-bottom: 10px;
 }
-.slider {
-  flex: 3;
-}
 </style>
\ No newline at end of file
diff --git a/src/views/Editor/Toolbar/common/ElementOutline.vue b/src/views/Editor/Toolbar/common/ElementOutline.vue
index 014aa66b..c80e1cc6 100644
--- a/src/views/Editor/Toolbar/common/ElementOutline.vue
+++ b/src/views/Editor/Toolbar/common/ElementOutline.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="element-outline">
     <div class="row" v-if="!fixed">
-      <div style="flex: 2;">启用边框：</div>
-      <div class="switch-wrapper" style="flex: 3;">
+      <div style="width: 40%;">启用边框：</div>
+      <div class="switch-wrapper" style="width: 60%;">
         <Switch 
           :value="hasOutline" 
           @update:value="value => toggleOutline(value)" 
@@ -11,9 +11,9 @@
     </div>
     <template v-if="hasOutline && outline">
       <div class="row">
-        <div style="flex: 2;">边框样式：</div>
+        <div style="width: 40%;">边框样式：</div>
         <Select 
-          style="flex: 3;" 
+          style="width: 60%;" 
           :value="outline.style || ''" 
           @update:value="value => updateOutline({ style: value as 'dashed' | 'solid' })"
           :options="[
@@ -23,23 +23,23 @@
         />
       </div>
       <div class="row">
-        <div style="flex: 2;">边框颜色：</div>
-        <Popover trigger="click" style="flex: 3;">
+        <div style="width: 40%;">边框颜色：</div>
+        <Popover trigger="click" style="width: 60%;">
           <template #content>
             <ColorPicker
               :modelValue="outline.color"
               @update:modelValue="value => updateOutline({ color: value })"
             />
           </template>
-          <ColorButton :color="outline.color || '#000'" style="width: 100%;" />
+          <ColorButton :color="outline.color || '#000'" />
         </Popover>
       </div>
       <div class="row">
-        <div style="flex: 2;">边框粗细：</div>
+        <div style="width: 40%;">边框粗细：</div>
         <NumberInput 
           :value="outline.width || 0" 
           @update:value="value => updateOutline({ width: value })" 
-          style="flex: 3;" 
+          style="width: 60%;" 
         />
       </div>
     </template>
diff --git a/src/views/Editor/Toolbar/common/ElementShadow.vue b/src/views/Editor/Toolbar/common/ElementShadow.vue
index 9c8d180f..6c43cd0c 100644
--- a/src/views/Editor/Toolbar/common/ElementShadow.vue
+++ b/src/views/Editor/Toolbar/common/ElementShadow.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="element-shadow">
     <div class="row">
-      <div style="flex: 2;">启用阴影：</div>
-      <div class="switch-wrapper" style="flex: 3;">
+      <div style="width: 40%;">启用阴影：</div>
+      <div class="switch-wrapper" style="width: 60%;">
         <Switch :value="hasShadow" @update:value="value => toggleShadow(value)" />
       </div>
     </div>
     <template v-if="hasShadow && shadow">
       <div class="row">
-        <div style="flex: 2;">水平阴影：</div>
+        <div style="width: 40%;">水平阴影：</div>
         <Slider 
-          class="slider"
+          style="width: 60%;"
           :min="-10" 
           :max="10" 
           :step="1" 
@@ -19,9 +19,9 @@
         />
       </div>
       <div class="row">
-        <div style="flex: 2;">垂直阴影：</div>
+        <div style="width: 40%;">垂直阴影：</div>
         <Slider
-          class="slider"
+          style="width: 60%;"
           :min="-10"
           :max="10"
           :step="1"
@@ -30,9 +30,9 @@
         />
       </div>
       <div class="row">
-        <div style="flex: 2;">模糊距离：</div>
+        <div style="width: 40%;">模糊距离：</div>
         <Slider
-          class="slider"
+          style="width: 60%;"
           :min="1"
           :max="20"
           :step="1"
@@ -41,15 +41,15 @@
         />
       </div>
       <div class="row">
-        <div style="flex: 2;">阴影颜色：</div>
-        <Popover trigger="click" style="flex: 3;">
+        <div style="width: 40%;">阴影颜色：</div>
+        <Popover trigger="click" style="width: 60%;">
           <template #content>
             <ColorPicker
               :modelValue="shadow.color"
               @update:modelValue="value => updateShadow({ color: value })"
             />
           </template>
-          <ColorButton :color="shadow.color" style="width: 100%;" />
+          <ColorButton :color="shadow.color" />
         </Popover>
       </div>
     </template>
@@ -113,7 +113,4 @@ const toggleShadow = (checked: boolean) => {
 .switch-wrapper {
   text-align: right;
 }
-.slider {
-  flex: 3;
-}
 </style>
\ No newline at end of file
diff --git a/src/views/Editor/Toolbar/common/TextColorButton.vue b/src/views/Editor/Toolbar/common/TextColorButton.vue
index acd5642b..2146cc9b 100644
--- a/src/views/Editor/Toolbar/common/TextColorButton.vue
+++ b/src/views/Editor/Toolbar/common/TextColorButton.vue
@@ -17,6 +17,7 @@ defineProps<{
 
 <style lang="scss" scoped>
 .text-color-btn {
+  width: 100%;
   display: flex !important;
   flex-direction: column;
   justify-content: center;
diff --git a/src/views/Mobile/MobileEditor/ElementToolbar.vue b/src/views/Mobile/MobileEditor/ElementToolbar.vue
index 72a418a7..7282eae9 100644
--- a/src/views/Mobile/MobileEditor/ElementToolbar.vue
+++ b/src/views/Mobile/MobileEditor/ElementToolbar.vue
@@ -37,11 +37,11 @@
 
         <ButtonGroup class="row">
           <Button 
-            style="flex: 2;"
+            style="flex: 1;"
             @click="emitRichTextCommand('fontsize-add')"
           ><IconFontSize />+</Button>
           <Button 
-            style="flex: 2;"
+            style="flex: 1;"
             @click="emitRichTextCommand('fontsize-reduce')"
           ><IconFontSize />-</Button>
         </ButtonGroup>