refactor: 将富文本状态和表格样式状态的监听/更新机制由mitt改为vuex

src/store/constants.ts

@@ -14,6 +14,8 @@ export const enum MutationTypes {
   SET_AVAILABLE_FONTS = 'setAvailableFonts',
   SET_TOOLBAR_STATE = 'setToolbarState',
   SET_CLIPING_IMAGE_ELEMENT_ID = 'setClipingImageElementId',
+  SET_RICHTEXT_ATTRS = 'setRichTextAttrs',
+  SET_SELECTED_TABLE_CELLS = 'setSelectedTableCells',
 
   // slides
   SET_THEME = 'setTheme',

src/store/mutations.ts

@@ -6,6 +6,8 @@ import { Slide, PPTElement, SlideTheme } from '@/types/slides'
 import { CreatingElement } from '@/types/edit'
 import { SYS_FONTS } from '@/configs/font'
 import { isSupportFont } from '@/utils/font'
+import { ToolbarState } from '@/types/toolbar'
+import { TextAttrs } from '@/utils/prosemirror/utils'
 
 interface RemoveElementPropData {
   id: string;
@@ -68,14 +70,22 @@ export const mutations: MutationTree<State> = {
     state.availableFonts = SYS_FONTS.filter(font => isSupportFont(font.value))
   },
 
-  [MutationTypes.SET_TOOLBAR_STATE](state, type) {
-    state.toolbarState = type
+  [MutationTypes.SET_TOOLBAR_STATE](state, toolbarState: ToolbarState) {
+    state.toolbarState = toolbarState
   },
 
-  [MutationTypes.SET_CLIPING_IMAGE_ELEMENT_ID](state, elId) {
+  [MutationTypes.SET_CLIPING_IMAGE_ELEMENT_ID](state, elId: string) {
     state.clipingImageElementId = elId
   },
 
+  [MutationTypes.SET_RICHTEXT_ATTRS](state, attrs: TextAttrs) {
+    state.richTextAttrs = attrs
+  },
+
+  [MutationTypes.SET_SELECTED_TABLE_CELLS](state, cells: string[]) {
+    state.selectedTableCells = cells
+  },
+
   // slides
 
   [MutationTypes.SET_THEME](state, themeProps: Partial<SlideTheme>) {

src/store/state.ts

@@ -4,6 +4,7 @@ import { ToolbarState } from '@/types/toolbar'
 import { slides } from '@/mocks/slides'
 import { theme } from '@/mocks/theme'
 import { SYS_FONTS } from '@/configs/font'
+import { TextAttrs, defaultRichTextAttrs } from '@/utils/prosemirror/utils'
 
 export interface State {
   activeElementIdList: string[];
@@ -29,6 +30,8 @@ export interface State {
   shiftKeyState: boolean;
   screening: boolean;
   clipingImageElementId: string;
+  richTextAttrs: TextAttrs;
+  selectedTableCells: string[];
 }
 
 export const state: State = {
@@ -55,4 +58,6 @@ export const state: State = {
   shiftKeyState: false, // shift键按下状态
   screening: false, // 是否进入放映状态
   clipingImageElementId: '', // 当前正在裁剪的图片ID  
+  richTextAttrs: defaultRichTextAttrs, // 富文本状态
+  selectedTableCells: [], // 选中的表格单元格
 }

src/utils/emitter.ts

@@ -1,9 +1,7 @@
 import mitt, { Handler, Emitter } from 'mitt'
 
 export const enum EmitterEvents {
-  UPDATE_TEXT_STATE = 'UPDATE_TEXT_STATE',
   EXEC_TEXT_COMMAND = 'EXEC_TEXT_COMMAND',
-  UPDATE_TABLE_SELECTED_CELL = 'UPDATE_TABLE_SELECTED_CELL',
   SCALE_ELEMENT_STATE = 'SCALE_ELEMENT_STATE',
 }
 

src/utils/prosemirror/utils.ts

@@ -112,4 +112,22 @@ export const getTextAttrs = (view: EditorView) => {
   }
 }
 
-export type TextAttrs = ReturnType<typeof getTextAttrs>
+export type TextAttrs = ReturnType<typeof getTextAttrs>
+
+export const defaultRichTextAttrs: TextAttrs = {
+  bold: false,
+  em: false,
+  underline: false,
+  strikethrough: false,
+  superscript: false,
+  subscript: false,
+  code: false,
+  color: '#000',
+  backcolor: '#000',
+  fontsize: '20px',
+  fontname: '微软雅黑',
+  align: 'left',
+  bulletList: false,
+  orderedList: false,
+  blockquote: false,
+}

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

@@ -192,10 +192,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onUnmounted, ref, watch } from 'vue'
+import { computed, defineComponent, ref, watch } from 'vue'
 import { MutationTypes, useStore } from '@/store'
 import { PPTTableElement, TableCell, TableCellStyle, TableTheme } from '@/types/slides'
-import emitter, { EmitterEvents, EmitterHandler } from '@/utils/emitter'
 import { createRandomCode } from '@/utils/common'
 import { WEB_FONTS } from '@/configs/font'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
@@ -216,6 +215,7 @@ export default defineComponent({
   setup() {
     const store = useStore()
     const handleElement = computed<PPTTableElement>(() => store.getters.handleElement)
+    const selectedCells = computed(() => store.state.selectedTableCells)
     
     const availableFonts = computed(() => store.state.availableFonts)
     const fontSizeOptions = [
@@ -256,8 +256,6 @@ export default defineComponent({
 
     const { addHistorySnapshot } = useHistorySnapshot()
 
-    const selectedCells = ref<string[]>([])
-
     // 更新当前选中单元格的文本样式状态
     const updateTextAttrState = () => {
       if (!handleElement.value || handleElement.value.type !== 'table') return
@@ -299,16 +297,7 @@ export default defineComponent({
       }
     }
 
-    // 监听并更新当前选中的单元格
-    const updateSelectedCells: EmitterHandler = (cells: string[]) => {
-      selectedCells.value = cells
-      updateTextAttrState()
-    }
-
-    emitter.on(EmitterEvents.UPDATE_TABLE_SELECTED_CELL, updateSelectedCells)
-    onUnmounted(() => {
-      emitter.off(EmitterEvents.UPDATE_TABLE_SELECTED_CELL, updateSelectedCells)
-    })
+    watch(selectedCells, updateTextAttrState)
 
     // 设置单元格内容文本样式
     const updateTextAttrs = (textAttrProp: Partial<TableCellStyle>) => {

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

@@ -218,11 +218,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onUnmounted, ref, watch } from 'vue'
+import { computed, defineComponent, ref, watch } from 'vue'
 import { MutationTypes, useStore } from '@/store'
 import { PPTTextElement } from '@/types/slides'
-import emitter, { EmitterEvents, EmitterHandler } from '@/utils/emitter'
-import { TextAttrs } from '@/utils/prosemirror/utils'
+import emitter, { EmitterEvents } from '@/utils/emitter'
 import { WEB_FONTS } from '@/configs/font'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
@@ -320,6 +319,7 @@ export default defineComponent({
   setup() {
     const store = useStore()
     const handleElement = computed<PPTTextElement>(() => store.getters.handleElement)
+    const richTextAttrs = computed(() => store.state.richTextAttrs)
 
     const fill = ref<string>()
     const lineHeight = ref<number>()
@@ -333,24 +333,6 @@ export default defineComponent({
       wordSpace.value = handleElement.value.wordSpace || 0
     }, { deep: true, immediate: true })
 
-    const richTextAttrs = ref<TextAttrs>({
-      bold: false,
-      em: false,
-      underline: false,
-      strikethrough: false,
-      superscript: false,
-      subscript: false,
-      code: false,
-      color: '#000',
-      backcolor: '#000',
-      fontsize: '20px',
-      fontname: '微软雅黑',
-      align: 'left',
-      bulletList: false,
-      orderedList: false,
-      blockquote: false,
-    })
-
     const availableFonts = computed(() => store.state.availableFonts)
     const fontSizeOptions = [
       '12px', '14px', '16px', '18px', '20px', '22px', '24px', '28px', '32px',
@@ -360,14 +342,6 @@ export default defineComponent({
     const lineHeightOptions = [0.9, 1.0, 1.15, 1.2, 1.4, 1.5, 1.8, 2.0, 2.5, 3.0]
     const wordSpaceOptions = [0, 1, 2, 3, 4, 5, 6, 8, 10]
 
-    // 接收并更新当前光标所在位置的富文本状态
-    const updateRichTextAttrs: EmitterHandler = (attr: TextAttrs) => richTextAttrs.value = attr
-
-    emitter.on(EmitterEvents.UPDATE_TEXT_STATE, updateRichTextAttrs)
-    onUnmounted(() => {
-      emitter.off(EmitterEvents.UPDATE_TEXT_STATE, updateRichTextAttrs)
-    })
-
     // 发射富文本设置命令
     const emitRichTextCommand = (command: string, value?: string) => {
       emitter.emit(EmitterEvents.EXEC_TEXT_COMMAND, { command, value })

src/views/components/element/TableElement/index.vue

@@ -172,7 +172,7 @@ export default defineComponent({
 
     // 更新表格当前选中的单元格
     const updateSelectedCells = (cells: string[]) => {
-      nextTick(() => emitter.emit(EmitterEvents.UPDATE_TABLE_SELECTED_CELL, cells))
+      nextTick(() => store.commit(MutationTypes.SET_SELECTED_TABLE_CELLS, cells))
     }
 
     return {

src/views/components/element/TextElement/index.vue

@@ -179,8 +179,8 @@ export default defineComponent({
     }
 
     const handleClick = debounce(function() {
-      const attr = getTextAttrs(editorView)
-      emitter.emit(EmitterEvents.UPDATE_TEXT_STATE, attr)
+      const attrs = getTextAttrs(editorView)
+      store.commit(MutationTypes.SET_RICHTEXT_ATTRS, attrs)
     }, 30, { trailing: true })
 
     const handleKeydown = () => {