refactor: 代码优化

2026-08-29 03:45:12 +08:00 · 2026-05-15 23:50:07 +08:00
parent 031a5c3876
commit 46c2ffcbbc
11 changed files with 10 additions and 32 deletions
@@ -1,7 +1,6 @@
 <template>
  <Popover
    trigger="click"
-    :placement="placement === 'top' ? 'top' : 'bottom'"
    :contentStyle="{ width: '240px' }"
  >
    <template #content>
@@ -64,10 +63,6 @@ import ColorPicker from '@/components/ColorPicker/index.vue'
 import NumberInput from '@/components/NumberInput.vue'
 import SelectCustom from '@/components/SelectCustom.vue'

-defineProps<{
-  placement: 'top' | 'bottom'
-}>()
-
 const slidesStore = useSlidesStore()
 const { theme } = storeToRefs(slidesStore)
 const { handleElement } = storeToRefs(useMainStore())
@@ -4,7 +4,7 @@
      <i-icon-park-outline:edit class="icon" />
      <span>编辑数据</span>
    </button>
-    <Popover trigger="click" :placement="placement === 'top' ? 'top' : 'bottom'">
+    <Popover trigger="click">
      <template #content>
        <div class="chart-type-list">
          <PopoverMenuItem
@@ -37,7 +37,6 @@ import PopoverMenuItem from '@/components/PopoverMenuItem.vue'

 defineProps<{
  elementInfo: PPTChartElement
-  placement: 'top' | 'bottom'
 }>()

 const slidesStore = useSlidesStore()
@@ -25,7 +25,6 @@ import FileInput from '@/components/FileInput.vue'

 defineProps<{
  elementInfo: PPTImageElement
-  placement: 'top' | 'bottom'
 }>()

 const mainStore = useMainStore()
@@ -4,7 +4,7 @@
      <i-icon-park-outline:edit class="icon" />
      <span>编辑 LaTeX</span>
    </button>
-    <Popover trigger="click" :placement="placement === 'top' ? 'top' : 'bottom'">
+    <Popover trigger="click">
      <template #content>
        <ColorPicker :modelValue="handleLatexElement.color" @update:modelValue="value => updateLatex({ color: value })" />
      </template>
@@ -29,7 +29,6 @@ import ColorPicker from '@/components/ColorPicker/index.vue'

 defineProps<{
  elementInfo: PPTLatexElement
-  placement: 'top' | 'bottom'
 }>()

 const slidesStore = useSlidesStore()
@@ -2,7 +2,6 @@
  <div class="toolbar-content">
    <Popover
      trigger="click"
-      :placement="placement === 'top' ? 'top' : 'bottom'"
      :contentStyle="{ width: '120px' }"
    >
      <template #content>
@@ -23,7 +22,7 @@
        <span>样式</span>
      </button>
    </Popover>
-    <Popover trigger="click" :placement="placement === 'top' ? 'top' : 'bottom'">
+    <Popover trigger="click">
      <template #content>
        <ColorPicker :modelValue="handleLineElement.color" @update:modelValue="value => updateLine({ color: value })" />
      </template>
@@ -58,7 +57,6 @@ import Slider from '@/components/Slider.vue'

 defineProps<{
  elementInfo: PPTLineElement
-  placement: 'top' | 'bottom'
 }>()

 const slidesStore = useSlidesStore()
@@ -1,6 +1,6 @@
 <template>
  <div class="toolbar-content">
-    <Popover trigger="click" :placement="placement === 'top' ? 'top' : 'bottom'">
+    <Popover trigger="click">
      <template #content>
        <ColorPicker :modelValue="fill" @update:modelValue="value => updateFill(value)" />
      </template>
@@ -9,10 +9,10 @@
        <span>填充</span>
      </button>
    </Popover>
-    <BorderPanel :placement="placement" />
+    <BorderPanel />
    <template v-if="showTextStyleControls">
      <div class="divider"></div>
-      <TextStyleControls :placement="placement" />
+      <TextStyleControls />
    </template>
  </div>
 </template>
@@ -31,7 +31,6 @@ import ColorPicker from '@/components/ColorPicker/index.vue'

 defineProps<{
  elementInfo: PPTShapeElement
-  placement: 'top' | 'bottom'
 }>()

 const emit = defineEmits<{
@@ -1,6 +1,6 @@
 <template>
  <div class="toolbar-content">
-    <Popover trigger="click" :placement="placement === 'top' ? 'top' : 'bottom'">
+    <Popover trigger="click">
      <template #content>
        <ColorPicker :modelValue="cellBackcolor" @update:modelValue="value => updateCellBackcolor(value)" />
      </template>
@@ -9,7 +9,7 @@
        <span>填充</span>
      </button>
    </Popover>
-    <BorderPanel :placement="placement" />
+    <BorderPanel />
  </div>
 </template>

@@ -26,7 +26,6 @@ import ColorPicker from '@/components/ColorPicker/index.vue'

 defineProps<{
  elementInfo: PPTTableElement
-  placement: 'top' | 'bottom'
 }>()

 const slidesStore = useSlidesStore()
@@ -18,7 +18,7 @@

  <div class="divider"></div>

-  <Popover trigger="click" :placement="placement === 'top' ? 'top' : 'bottom'">
+  <Popover trigger="click">
    <template #content>
      <ColorPicker :modelValue="richTextAttrs.color" @update:modelValue="value => emitRichTextCommand('color', value)" />
    </template>
@@ -82,10 +82,6 @@ import Select from '@/components/Select.vue'
 import Popover from '@/components/Popover.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'

-defineProps<{
-  placement: 'top' | 'bottom'
-}>()
-
 const { richTextAttrs } = storeToRefs(useMainStore())

 const fontSizeOptions = [
@@ -1,6 +1,6 @@
 <template>
  <div class="toolbar-content">
-    <TextStyleControls :placement="placement" />
+    <TextStyleControls />
  </div>
 </template>

@@ -10,7 +10,6 @@ import TextStyleControls from './TextStyleControls.vue'

 defineProps<{
  elementInfo: PPTTextElement
-  placement: 'top' | 'bottom'
 }>()
 </script>

@@ -3,7 +3,6 @@
    <component
      :is="currentToolbarComponent"
      :elementInfo="elementInfo"
-      :placement="submenuPlacement"
      @resize="measureToolbar()"
    />
  </div>
@@ -27,7 +26,6 @@ import ChartToolbar from './ChartToolbar.vue'
 const props = defineProps<{
  elementInfo: PPTElement
  toolbarStyle: Record<string, string>
-  submenuPlacement: 'top' | 'bottom'
 }>()

 const emit = defineEmits<{
@@ -13,7 +13,6 @@
      :key="floatingToolbar.element.id"
      :elementInfo="floatingToolbar.element"
      :toolbarStyle="floatingToolbar.toolbarStyle"
-      :submenuPlacement="floatingToolbar.submenuPlacement"
      @measure="value => floatingToolbarWidth = value"
    />

@@ -134,7 +133,6 @@ const floatingToolbar = computed(() => {
  const toolbarLeft = canvasWidth ? (maxLeft < minLeft ? minLeft : Math.min(Math.max(left, minLeft), maxLeft)) : left
  const top = placement === 'bottom' ? bottomTop : range.minY * canvasScale.value - rotateHandlerGap - FLOATING_TOOLBAR_HEIGHT
  const toolbarTop = Math.max(availableTop + FLOAT_LAYER_GAP, top)
-  const submenuPlacement: 'top' | 'bottom' = canvasHeight && toolbarTop + FLOATING_TOOLBAR_HEIGHT / 2 > (availableTop + availableBottom) / 2 ? 'top' : 'bottom'

  return {
    element,
@@ -144,7 +142,6 @@ const floatingToolbar = computed(() => {
      left: toolbarLeft + 'px',
      top: toolbarTop + 'px',
    },
-    submenuPlacement,
  }
 })