From 537363ec67eea823039664a1323061ff5d2a68bd Mon Sep 17 00:00:00 2001
From: zxc <1171051090@qq.com>
Date: Sat, 2 Nov 2024 14:35:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85=E5=AF=BC=E5=87=BAJSO?=
 =?UTF-8?q?N=E6=96=87=E4=BB=B6=E4=BF=A1=E6=81=AF=EF=BC=88#293=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useExport.ts                       |  8 +++++++-
 src/views/Editor/ExportDialog/ExportJSON.vue | 14 ++++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/hooks/useExport.ts b/src/hooks/useExport.ts
index 0f2e038e..f190cce0 100644
--- a/src/hooks/useExport.ts
+++ b/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`)
   }
 
diff --git a/src/views/Editor/ExportDialog/ExportJSON.vue b/src/views/Editor/ExportDialog/ExportJSON.vue
index e30bd0a1..0607fab3 100644
--- a/src/views/Editor/ExportDialog/ExportJSON.vue
+++ b/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>