feat: 补充导出JSON文件信息（#293）

src/hooks/useExport.ts

@@ -67,7 +67,13 @@ export default () => {
   
   // 导出JSON文件
   const exportJSON = () => {
-    const blob = new Blob([JSON.stringify(slides.value)], { type: '' })
+    const json = {
+      title: title.value,
+      width: viewportSize.value,
+      height: viewportSize.value * viewportRatio.value,
+      slides: slides.value,
+    }
+    const blob = new Blob([JSON.stringify(json)], { type: '' })
     saveAs(blob, `${title.value}.json`)
   }
 

src/views/Editor/ExportDialog/ExportJSON.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="export-json-dialog">
     <div class="preview">
-      <pre>{{slides}}</pre>
+      <pre>{{ json }}</pre>
     </div>
 
     <div class="btns">
@@ -12,6 +12,7 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import useExport from '@/hooks/useExport'
@@ -21,8 +22,17 @@ const emit = defineEmits<{
   (event: 'close'): void
 }>()
 
-const { slides } = storeToRefs(useSlidesStore())
+const { slides, viewportRatio, title, viewportSize } = storeToRefs(useSlidesStore())
 const { exportJSON } = useExport()
+
+const json = computed(() => {
+  return {
+    title: title.value,
+    width: viewportSize.value,
+    height: viewportSize.value * viewportRatio.value,
+    slides: slides.value,
+  }
+})
 </script>
 
 <style lang="scss" scoped>