refactor: 调整公式和图表编辑器挂载位置，修复部分场景唤醒失败的问题

src/views/Editor/ChartDataEditorDialog.vue

@@ -0,0 +1,74 @@
+<template>
+  <Modal
+    v-model:visible="visible"
+    :width="640"
+  >
+    <ChartDataEditor
+      v-if="editingChartElement"
+      :type="editingChartElement.chartType"
+      :data="editingChartElement.data"
+      @close="visible = false"
+      @save="value => updateData(value)"
+    />
+  </Modal>
+</template>
+
+<script lang="ts" setup>
+import { computed, onUnmounted, ref, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useMainStore, useSlidesStore } from '@/store'
+import type { ChartData, ChartType, PPTChartElement } from '@/types/slides'
+import emitter, { EmitterEvents } from '@/utils/emitter'
+import useHistorySnapshot from '@/hooks/useHistorySnapshot'
+
+import ChartDataEditor from '@/components/ChartDataEditor.vue'
+import Modal from '@/components/Modal.vue'
+
+const mainStore = useMainStore()
+const slidesStore = useSlidesStore()
+const { handleElementId } = storeToRefs(mainStore)
+const { currentSlide } = storeToRefs(slidesStore)
+
+const visible = ref(false)
+const editingElementId = ref('')
+
+const editingChartElement = computed(() => {
+  const element = currentSlide.value.elements.find(item => item.id === editingElementId.value)
+  return element?.type === 'chart' ? element as PPTChartElement : null
+})
+
+watch(editingChartElement, () => {
+  if (!visible.value || editingChartElement.value) return
+  visible.value = false
+  editingElementId.value = ''
+})
+
+const { addHistorySnapshot } = useHistorySnapshot()
+
+const openDataEditor = () => {
+  const element = currentSlide.value.elements.find(item => item.id === handleElementId.value)
+  if (!element || element.type !== 'chart') return
+
+  editingElementId.value = element.id
+  visible.value = true
+}
+
+const updateData = (payload: {
+  data: ChartData
+  type: ChartType
+}) => {
+  if (!editingChartElement.value) return
+
+  slidesStore.updateElement({
+    id: editingChartElement.value.id,
+    props: { data: payload.data, chartType: payload.type },
+  })
+  addHistorySnapshot()
+  visible.value = false
+}
+
+emitter.on(EmitterEvents.OPEN_CHART_DATA_EDITOR, openDataEditor)
+onUnmounted(() => {
+  emitter.off(EmitterEvents.OPEN_CHART_DATA_EDITOR, openDataEditor)
+})
+</script>

src/views/Editor/LatexEditorDialog.vue

@@ -0,0 +1,76 @@
+<template>
+  <Modal
+    v-model:visible="visible"
+    :width="880"
+  >
+    <LaTeXEditor
+      v-if="editingLatexElement"
+      :value="editingLatexElement.latex"
+      @close="visible = false"
+      @update="data => updateLatexData(data)"
+    />
+  </Modal>
+</template>
+
+<script lang="ts" setup>
+import { computed, onUnmounted, ref, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useMainStore, useSlidesStore } from '@/store'
+import type { PPTLatexElement } from '@/types/slides'
+import emitter, { EmitterEvents } from '@/utils/emitter'
+import useHistorySnapshot from '@/hooks/useHistorySnapshot'
+
+import LaTeXEditor from '@/components/LaTeXEditor/index.vue'
+import Modal from '@/components/Modal.vue'
+
+const mainStore = useMainStore()
+const slidesStore = useSlidesStore()
+const { handleElementId } = storeToRefs(mainStore)
+const { currentSlide } = storeToRefs(slidesStore)
+
+const visible = ref(false)
+const editingElementId = ref('')
+
+const editingLatexElement = computed(() => {
+  const element = currentSlide.value.elements.find(item => item.id === editingElementId.value)
+  return element?.type === 'latex' ? element as PPTLatexElement : null
+})
+
+watch(editingLatexElement, () => {
+  if (!visible.value || editingLatexElement.value) return
+  visible.value = false
+  editingElementId.value = ''
+})
+
+const { addHistorySnapshot } = useHistorySnapshot()
+
+const openLatexEditor = () => {
+  const element = currentSlide.value.elements.find(item => item.id === handleElementId.value)
+  if (!element || element.type !== 'latex') return
+
+  editingElementId.value = element.id
+  visible.value = true
+}
+
+const updateLatexData = (data: { path: string; latex: string; w: number; h: number }) => {
+  if (!editingLatexElement.value) return
+
+  slidesStore.updateElement({
+    id: editingLatexElement.value.id,
+    props: {
+      path: data.path,
+      latex: data.latex,
+      width: data.w,
+      height: data.h,
+      viewBox: [data.w, data.h],
+    },
+  })
+  addHistorySnapshot()
+  visible.value = false
+}
+
+emitter.on(EmitterEvents.OPEN_LATEX_EDITOR, openLatexEditor)
+onUnmounted(() => {
+  emitter.off(EmitterEvents.OPEN_LATEX_EDITOR, openLatexEditor)
+})
+</script>

src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="chart-style-panel">
-    <Button class="full-width-btn" @click="chartDataEditorVisible = true">
+    <Button class="full-width-btn" @click="openDataEditor()">
       <i-icon-park-outline:edit /> 编辑图表
     </Button>
 
@@ -100,18 +100,6 @@
 
     <ElementOutline />
 
-    <Modal
-      v-model:visible="chartDataEditorVisible" 
-      :width="640"
-    >
-      <ChartDataEditor 
-        :type="handleChartElement.chartType"
-        :data="handleChartElement.data"
-        @close="chartDataEditorVisible = false"
-        @save="value => updateData(value)"
-      />
-    </Modal>
-
     <Modal
       v-model:visible="themeColorsSettingVisible" 
       :width="310"
@@ -123,16 +111,15 @@
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, ref, watch, type Ref } from 'vue'
+import { ref, watch, type Ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
-import type { ChartData, ChartOptions, ChartType, PPTChartElement } from '@/types/slides'
+import type { ChartOptions, PPTChartElement } from '@/types/slides'
 import emitter, { EmitterEvents } from '@/utils/emitter'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import { CHART_PRESET_THEMES } from '@/configs/chart'
 
 import ElementOutline from '../../common/ElementOutline.vue'
-import ChartDataEditor from './ChartDataEditor.vue'
 import ThemeColorsSetting from './ThemeColorsSetting.vue'
 import ColorButton from '@/components/ColorButton.vue'
 import ColorListButton from '@/components/ColorListButton.vue'
@@ -150,7 +137,6 @@ const { theme } = storeToRefs(slidesStore)
 
 const handleChartElement = handleElement as Ref<PPTChartElement>
 
-const chartDataEditorVisible = ref(false)
 const themesVisible = ref(false)
 const themeColorsSettingVisible = ref(false)
 
@@ -191,15 +177,6 @@ const updateElement = (props: Partial<PPTChartElement>) => {
   addHistorySnapshot()
 }
 
-// 设置图表数据
-const updateData = (payload: {
-  data: ChartData
-  type: ChartType
-}) => {
-  chartDataEditorVisible.value = false
-  updateElement({ data: payload.data, chartType: payload.type })
-}
-
 // 设置扩展选项
 const updateOptions = (optionProps: ChartOptions) => {
   const _handleElement = handleElement.value as PPTChartElement
@@ -215,12 +192,7 @@ const setThemeColors = (colors: string[]) => {
   themeColorsSettingVisible.value = false
 }
 
-const openDataEditor = () => chartDataEditorVisible.value = true
-
-emitter.on(EmitterEvents.OPEN_CHART_DATA_EDITOR, openDataEditor)
-onUnmounted(() => {
-  emitter.off(EmitterEvents.OPEN_CHART_DATA_EDITOR, openDataEditor)
-})
+const openDataEditor = () => emitter.emit(EmitterEvents.OPEN_CHART_DATA_EDITOR)
 </script>
 
 <style lang="scss" scoped>
@@ -263,4 +235,4 @@ onUnmounted(() => {
   height: 20px;
   flex: 1;
 }
-</style>
+</style>

src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="latex-style-panel">
     <div class="row">
-      <Button style="flex: 1;" @click="latexEditorVisible = true"><i-icon-park-outline:edit /> 编辑 LaTeX</Button>
+      <Button style="flex: 1;" @click="openLatexEditor()"><i-icon-park-outline:edit /> 编辑 LaTeX</Button>
     </div>
 
     <Divider />
@@ -28,22 +28,11 @@
         style="width: 60%;" 
       />
     </div>
-
-    <Modal
-      v-model:visible="latexEditorVisible" 
-      :width="880"
-    >
-      <LaTeXEditor 
-        :value="handleLatexElement.latex"
-        @close="latexEditorVisible = false"
-        @update="data => { updateLatexData(data); latexEditorVisible = false }"
-      />
-    </Modal>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, ref, type Ref } from 'vue'
+import { type Ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import type { PPTLatexElement } from '@/types/slides'
@@ -51,9 +40,7 @@ import emitter, { EmitterEvents } from '@/utils/emitter'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ColorButton from '@/components/ColorButton.vue'
-import LaTeXEditor from '@/components/LaTeXEditor/index.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
-import Modal from '@/components/Modal.vue'
 import Divider from '@/components/Divider.vue'
 import Button from '@/components/Button.vue'
 import NumberInput from '@/components/NumberInput.vue'
@@ -64,8 +51,6 @@ const { handleElement } = storeToRefs(useMainStore())
 
 const handleLatexElement = handleElement as Ref<PPTLatexElement>
 
-const latexEditorVisible = ref(false)
-
 const { addHistorySnapshot } = useHistorySnapshot()
 
 const updateLatex = (props: Partial<PPTLatexElement>) => {
@@ -74,22 +59,7 @@ const updateLatex = (props: Partial<PPTLatexElement>) => {
   addHistorySnapshot()
 }
 
-const updateLatexData = (data: { path: string; latex: string; w: number; h: number; }) => {
-  updateLatex({
-    path: data.path,
-    latex: data.latex,
-    width: data.w,
-    height: data.h,
-    viewBox: [data.w, data.h],
-  })
-}
-
-const openLatexEditor = () => latexEditorVisible.value = true
-
-emitter.on(EmitterEvents.OPEN_LATEX_EDITOR, openLatexEditor)
-onUnmounted(() => {
-  emitter.off(EmitterEvents.OPEN_LATEX_EDITOR, openLatexEditor)
-})
+const openLatexEditor = () => emitter.emit(EmitterEvents.OPEN_LATEX_EDITOR)
 </script>
 
 <style lang="scss" scoped>
@@ -99,4 +69,4 @@ onUnmounted(() => {
   align-items: center;
   margin-bottom: 10px;
 }
-</style>
+</style>

src/views/Editor/index.vue

@@ -22,6 +22,8 @@
   <MarkupPanel v-if="showMarkupPanel" />
   <SymbolPanel v-if="showSymbolPanel" />
   <ImageLibPanel v-if="showImageLibPanel" />
+  <ChartDataEditorDialog />
+  <LatexEditorDialog />
 
   <Modal
     :visible="!!dialogForExport" 
@@ -57,6 +59,8 @@ import CanvasTool from './CanvasTool/index.vue'
 import Thumbnails from './Thumbnails/index.vue'
 import Toolbar from './Toolbar/index.vue'
 import Remark from './Remark/index.vue'
+import ChartDataEditorDialog from './ChartDataEditorDialog.vue'
+import LatexEditorDialog from './LatexEditorDialog.vue'
 import ExportDialog from './ExportDialog/index.vue'
 import SelectPanel from './SelectPanel.vue'
 import SearchPanel from './SearchPanel.vue'
@@ -115,4 +119,4 @@ usePasteEvent()
   width: 260px;
   height: 100%;
 }
-</style>
+</style>