perf: store代码优化

src/hooks/useAlignElementToCanvas.ts

@@ -7,8 +7,8 @@ import useHistorySnapshot from './useHistorySnapshot'
 
 export default () => {
   const slidesStore = useSlidesStore()
-  const { activeElementIdList, activeElementList, viewportSize } = storeToRefs(useMainStore())
+  const { activeElementIdList, activeElementList } = storeToRefs(useMainStore())
-  const { currentSlide, viewportRatio } = storeToRefs(slidesStore)
+  const { currentSlide, viewportRatio, viewportSize } = storeToRefs(slidesStore)
 
   const { addHistorySnapshot } = useHistorySnapshot()
 

src/hooks/useCreateElement.ts

@@ -30,8 +30,8 @@ interface CreateTextData {
 export default () => {
   const mainStore = useMainStore()
   const slidesStore = useSlidesStore()
-  const { creatingElement, viewportSize } = storeToRefs(mainStore)
+  const { creatingElement } = storeToRefs(mainStore)
-  const { theme, viewportRatio } = storeToRefs(slidesStore)
+  const { theme, viewportRatio, viewportSize } = storeToRefs(slidesStore)
 
   const { addHistorySnapshot } = useHistorySnapshot()
 

src/hooks/useExport.ts

@@ -5,7 +5,7 @@ import { saveAs } from 'file-saver'
 import pptxgen from 'pptxgenjs'
 import tinycolor from 'tinycolor2'
 import { toPng, toJpeg } from 'html-to-image'
-import { useMainStore, useSlidesStore } from '@/store'
+import { useSlidesStore } from '@/store'
 import type { PPTElementOutline, PPTElementShadow, PPTElementLink, Slide } from '@/types/slides'
 import { getElementRange, getLineElementPath, getTableSubThemeColor } from '@/utils/element'
 import { type AST, toAST } from '@/utils/htmlParser'
@@ -22,8 +22,7 @@ interface ExportImageConfig {
 
 export default () => {
   const slidesStore = useSlidesStore()
-  const { slides, theme, viewportRatio, title } = storeToRefs(slidesStore)
+  const { slides, theme, viewportRatio, title, viewportSize } = storeToRefs(slidesStore)
-  const { viewportSize } = storeToRefs(useMainStore())
 
   const ratioPx2Inch = computed(() => {
     return 96 * (viewportSize.value / 960)

src/hooks/useImport.ts

@@ -2,7 +2,7 @@ import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { parse, type Shape, type Element, type ChartItem } from 'pptxtojson'
 import { nanoid } from 'nanoid'
-import { useMainStore, useSlidesStore } from '@/store'
+import { useSlidesStore } from '@/store'
 import { decrypt } from '@/utils/crypto'
 import { type ShapePoolItem, SHAPE_LIST, SHAPE_PATH_FORMULAS } from '@/configs/shapes'
 import useAddSlidesOrElements from '@/hooks/useAddSlidesOrElements'
@@ -31,9 +31,6 @@ export default () => {
   const slidesStore = useSlidesStore()
   const { theme } = storeToRefs(useSlidesStore())
 
-  const mainStore = useMainStore()
-  const { viewportSize } = storeToRefs(mainStore)
-
   const { addSlidesFromData } = useAddSlidesOrElements()
   const { isEmptySlide } = useSlideHandler()
 
@@ -111,7 +108,7 @@ export default () => {
       const ratio = 96 / 72
       const width = json.size.width
 
-      mainStore.setViewportSize(width * ratio)
+      slidesStore.setViewportSize(width * ratio)
 
       const slides: Slide[] = []
       for (const item of json.slides) {

src/store/main.ts

@@ -14,7 +14,6 @@ export interface MainState {
   handleElementId: string
   activeGroupElementId: string
   hiddenElementIdList: string[]
-  viewportSize: number
   canvasPercentage: number
   canvasScale: number
   canvasDragged: boolean
@@ -50,9 +49,8 @@ export const useMainStore = defineStore('main', {
     handleElementId: '', // 正在操作的元素ID
     activeGroupElementId: '', // 组合元素成员中，被选中可独立操作的元素ID
     hiddenElementIdList: [], // 被隐藏的元素ID集合
-    viewportSize: 1000, // 可视区域宽度基数
     canvasPercentage: 90, // 画布可视区域百分比
-    canvasScale: 1, // 画布缩放比例（基于宽度1000px）
+    canvasScale: 1, // 画布缩放比例（基于宽度{{slidesStore.viewportSize}}像素）
     canvasDragged: false, // 画布被拖拽移动
     thumbnailsFocus: false, // 左侧导航缩略图区域聚焦
     editorAreaFocus: false, //  编辑区域聚焦
@@ -117,10 +115,6 @@ export const useMainStore = defineStore('main', {
       this.canvasPercentage = percentage
     },
   
-    setViewportSize(size: number) {
-      this.viewportSize = size
-    },
-  
     setCanvasScale(scale: number) {
       this.canvasScale = scale
     },

src/store/slides.ts

@@ -27,6 +27,7 @@ export interface SlidesState {
   theme: SlideTheme
   slides: Slide[]
   slideIndex: number
+  viewportSize: number
   viewportRatio: number
 }
 
@@ -36,6 +37,7 @@ export const useSlidesStore = defineStore('slides', {
     theme: theme, // 主题样式
     slides: slides, // 幻灯片页面数据
     slideIndex: 0, // 当前页面索引
+    viewportSize: 1000, // 可视区域宽度基数
     viewportRatio: 0.5625, // 可视区域比例，默认16:9
   }),
 
@@ -116,6 +118,10 @@ export const useSlidesStore = defineStore('slides', {
       this.theme = { ...this.theme, ...themeProps }
     },
   
+    setViewportSize(size: number) {
+      this.viewportSize = size
+    },
+  
     setViewportRatio(viewportRatio: number) {
       this.viewportRatio = viewportRatio
     },

src/views/Editor/Canvas/GridLines.vue

@@ -20,8 +20,8 @@ import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import type { SlideBackground } from '@/types/slides'
 
-const { canvasScale, gridLineSize, viewportSize } = storeToRefs(useMainStore())
+const { canvasScale, gridLineSize } = storeToRefs(useMainStore())
-const { currentSlide, viewportRatio } = storeToRefs(useSlidesStore())
+const { currentSlide, viewportRatio, viewportSize } = storeToRefs(useSlidesStore())
 
 const background = computed<SlideBackground | undefined>(() => currentSlide.value?.background)
 

src/views/Editor/Canvas/Ruler.vue

@@ -72,8 +72,8 @@ const props = defineProps<{
   elementList: PPTElement[]
 }>()
 
-const { canvasScale, activeElementIdList, viewportSize } = storeToRefs(useMainStore())
+const { canvasScale, activeElementIdList } = storeToRefs(useMainStore())
-const { viewportRatio } = storeToRefs(useSlidesStore())
+const { viewportRatio, viewportSize } = storeToRefs(useSlidesStore())
 
 const elementListRange = ref<null | ReturnType<typeof getElementListRange>>(null)
 

src/views/Editor/Canvas/hooks/useDragElement.ts

@@ -12,9 +12,9 @@ export default (
   canvasScale: Ref<number>,
 ) => {
   const slidesStore = useSlidesStore()
-  const { activeElementIdList, activeGroupElementId, viewportSize } = storeToRefs(useMainStore())
+  const { activeElementIdList, activeGroupElementId } = storeToRefs(useMainStore())
   const { shiftKeyState } = storeToRefs(useKeyboardStore())
-  const { viewportRatio } = storeToRefs(slidesStore)
+  const { viewportRatio, viewportSize } = storeToRefs(slidesStore)
 
   const { addHistorySnapshot } = useHistorySnapshot()
 

src/views/Editor/Canvas/hooks/useScaleElement.ts

@@ -99,8 +99,8 @@ export default (
 ) => {
   const mainStore = useMainStore()
   const slidesStore = useSlidesStore()
-  const { activeElementIdList, activeGroupElementId, viewportSize } = storeToRefs(mainStore)
+  const { activeElementIdList, activeGroupElementId } = storeToRefs(mainStore)
-  const { viewportRatio } = storeToRefs(slidesStore)
+  const { viewportRatio, viewportSize } = storeToRefs(slidesStore)
   const { ctrlOrShiftKeyActive } = storeToRefs(useKeyboardStore())
 
   const { addHistorySnapshot } = useHistorySnapshot()

src/views/Editor/Canvas/hooks/useViewportSize.ts

@@ -7,8 +7,8 @@ export default (canvasRef: Ref<HTMLElement | undefined>) => {
   const viewportTop = ref(0)
 
   const mainStore = useMainStore()
-  const { canvasPercentage, canvasDragged, viewportSize } = storeToRefs(mainStore)
+  const { canvasPercentage, canvasDragged } = storeToRefs(mainStore)
-  const { viewportRatio } = storeToRefs(useSlidesStore())
+  const { viewportRatio, viewportSize } = storeToRefs(useSlidesStore())
 
   // 初始化画布可视区域的位置
   const initViewportPosition = () => {

src/views/Mobile/MobileEditor/SlideToolbar.vue

@@ -32,7 +32,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
-import { useMainStore, useSlidesStore } from '@/store'
+import { useSlidesStore } from '@/store'
 import useSlideHandler from '@/hooks/useSlideHandler'
 import useCreateElement from '@/hooks/useCreateElement'
 import { getImageDataURL } from '@/utils/image'
@@ -44,8 +44,7 @@ import Button from '@/components/Button.vue'
 import ButtonGroup from '@/components/ButtonGroup.vue'
 
 const slidesStore = useSlidesStore()
-const { viewportRatio, currentSlide } = storeToRefs(slidesStore)
+const { viewportRatio, currentSlide, viewportSize } = storeToRefs(slidesStore)
-const { viewportSize } = storeToRefs(useMainStore())
 
 const { createSlide, copyAndPasteSlide, deleteSlide, } = useSlideHandler()
 const { createTextElement, createImageElement, createShapeElement } = useCreateElement()

src/views/Mobile/MobileEditor/index.vue

@@ -65,8 +65,8 @@ defineProps<{
 
 const slidesStore = useSlidesStore()
 const mainStore = useMainStore()
-const { slideIndex, currentSlide, viewportRatio } = storeToRefs(slidesStore)
+const { slideIndex, currentSlide, viewportRatio, viewportSize } = storeToRefs(slidesStore)
-const { activeElementIdList, handleElement, viewportSize } = storeToRefs(mainStore)
+const { activeElementIdList, handleElement } = storeToRefs(mainStore)
 
 const contentRef = ref<HTMLElement>()
 const viewportRef = ref<HTMLElement>()

src/views/Screen/ScreenSlide.vue

@@ -23,7 +23,7 @@
 <script lang="ts" setup>
 import { computed, provide } from 'vue'
 import { storeToRefs } from 'pinia'
-import { useMainStore, useSlidesStore } from '@/store'
+import { useSlidesStore } from '@/store'
 import type { Slide } from '@/types/slides'
 import { injectKeySlideId } from '@/types/injectKey'
 import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
@@ -38,8 +38,7 @@ const props = defineProps<{
   manualExitFullscreen: () => void
 }>()
 
-const { viewportRatio } = storeToRefs(useSlidesStore())
+const { viewportRatio, viewportSize } = storeToRefs(useSlidesStore())
-const { viewportSize } = storeToRefs(useMainStore())
 
 const background = computed(() => props.slide.background)
 const { backgroundStyle } = useSlideBackgroundStyle(background)

src/views/Screen/ScreenSlideList.vue

@@ -37,7 +37,7 @@
 <script lang="ts" setup>
 import { computed, provide } from 'vue'
 import { storeToRefs } from 'pinia'
-import { useMainStore, useSlidesStore } from '@/store'
+import { useSlidesStore } from '@/store'
 import { injectKeySlideScale } from '@/types/injectKey'
 import { SLIDE_ANIMATIONS } from '@/configs/animation'
 
@@ -51,8 +51,7 @@ const props = defineProps<{
   manualExitFullscreen: () => void
 }>()
 
-const { slides, slideIndex } = storeToRefs(useSlidesStore())
+const { slides, slideIndex, viewportSize } = storeToRefs(useSlidesStore())
-const { viewportSize } = storeToRefs(useMainStore())
 
 const slidesWithTurningMode = computed(() => {
   return slides.value.map(slide => {

src/views/components/ThumbnailSlide/index.vue

@@ -29,7 +29,7 @@
 <script lang="ts" setup>
 import { computed, provide } from 'vue'
 import { storeToRefs } from 'pinia'
-import { useMainStore, useSlidesStore } from '@/store'
+import { useSlidesStore } from '@/store'
 import type { Slide } from '@/types/slides'
 import { injectKeySlideScale } from '@/types/injectKey'
 import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
@@ -44,8 +44,7 @@ const props = withDefaults(defineProps<{
   visible: true,
 })
 
-const { viewportRatio } = storeToRefs(useSlidesStore())
+const { viewportRatio, viewportSize } = storeToRefs(useSlidesStore())
-const { viewportSize } = storeToRefs(useMainStore())
 
 const background = computed(() => props.slide.background)
 const { backgroundStyle } = useSlideBackgroundStyle(background)

src/views/components/element/AudioElement/ScreenAudioElement.vue

@@ -38,7 +38,7 @@
 <script lang="ts" setup>
 import { computed, inject, ref } from 'vue'
 import { storeToRefs } from 'pinia'
-import { useMainStore, useSlidesStore } from '@/store'
+import { useSlidesStore } from '@/store'
 import type { PPTAudioElement } from '@/types/slides'
 import { injectKeySlideId, injectKeySlideScale } from '@/types/injectKey'
 
@@ -48,8 +48,7 @@ const props = defineProps<{
   elementInfo: PPTAudioElement
 }>()
 
-const { viewportRatio, currentSlide } = storeToRefs(useSlidesStore())
+const { viewportRatio, currentSlide, viewportSize } = storeToRefs(useSlidesStore())
-const { viewportSize } = storeToRefs(useMainStore())
 
 const scale = inject(injectKeySlideScale) || ref(1)
 const slideId = inject(injectKeySlideId) || ref('')

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

@@ -54,8 +54,8 @@ const props = defineProps<{
   contextmenus: () => ContextmenuItem[] | null
 }>()
 
-const { canvasScale, handleElementId, viewportSize } = storeToRefs(useMainStore())
+const { canvasScale, handleElementId } = storeToRefs(useMainStore())
-const { viewportRatio } = storeToRefs(useSlidesStore())
+const { viewportRatio, viewportSize } = storeToRefs(useSlidesStore())
 
 const audioIconSize = computed(() => {
   return Math.min(props.elementInfo.width, props.elementInfo.height) + 'px'