feat: 接入编辑器和导入导出

src/editor/toolbar/ToolbarRight.vue

@@ -1,16 +1,99 @@
 <!-- 右侧工具栏 -->
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
+import { useEditorStore } from '@/stores/editor'
+import { storeToRefs } from 'pinia'
+import { ElMessage } from 'element-plus'
+
+const editorStore = useEditorStore()
+const { page } = storeToRefs(editorStore)
+
+const visible = ref(false)
+const jsonContent = ref('')
+
+const inputRef = useTemplateRef<HTMLInputElement>('inputRef')
+
+// 显示 JSON 编辑器
+const showJson = () => {
+  visible.value = true
+  jsonContent.value = JSON.stringify(page.value, null, 2)
+}
+
+// 确认编辑 JSON
+const onConfirm = () => {
+  const newPage = JSON.parse(jsonContent.value)
+  editorStore.setPage(newPage)
+  visible.value = false
+}
+
+// 导出文件
+const onExport = () => {
+  const json = JSON.stringify(page.value, null, 2)
+  const blob = new Blob([json], { type: 'application/json;charset=utf-8' })
+
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = 'design.json'
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+
+  URL.revokeObjectURL(url)
+}
+
+// 导入文件
+const onImport = () => {
+  inputRef.value?.click()
+}
+
+// 文件选择变化处理
+const onFileChange = (e: Event) => {
+  const target = e.target as HTMLInputElement
+  const file = target.files?.[0]
+  if (!file) return
+
+  const reader = new FileReader()
+  // 读取文件完成后的回调
+  reader.onload = (e) => {
+    const content = e.target?.result as string
+    try {
+      const newPage = JSON.parse(content)
+      editorStore.setPage(newPage)
+      ElMessage.success('导入成功')
+    } catch (error) {
+      console.error('导入的文件不是有效的 JSON 文件', error)
+      ElMessage.error('导入的文件不是有效的 JSON 文件')
+    }
+  }
+  // 读取文件内容
+  reader.readAsText(file)
+}
 </script>
 
 <template>
   <div class="flex items-center justify-end gap-5">
     <span class="border p-1 rounded-lg"><Icon icon="icon-park-outline:preview-open"></Icon></span>
-    <span class="border p-1 rounded-lg"><Icon icon="si:json-line"></Icon></span>
+    <span class="border p-1 rounded-lg" @click="showJson"><Icon icon="si:json-line"></Icon></span>
     <span class="border p-1 rounded-lg"><Icon icon="hugeicons:internet"></Icon></span>
-    <span class="border p-1 rounded-lg"><Icon icon="lets-icons:import"></Icon></span>
-    <span class="border p-1 rounded-lg"><Icon icon="lets-icons:export"></Icon></span>
+    <span class="border p-1 rounded-lg" @click="onImport" title="导入">
+      <Icon icon="lets-icons:import"> </Icon>
+    </span>
+    <span class="border p-1 rounded-lg" @click="onExport" title="导出">
+      <Icon icon="lets-icons:export"> </Icon>
+    </span>
+
+    <input ref="inputRef" type="file" class="hidden" @change="onFileChange" />
+
+    <el-drawer v-model="visible" title="编辑 JSON" class="json-drawer" destroy-on-close>
+      <MonacoEditor v-model="jsonContent" lang="json" />
+
+      <template #footer>
+        <div class="flex justify-end gap-2">
+          <el-button @click="visible = false">取消</el-button>
+          <el-button type="primary" @click="onConfirm">确认</el-button>
+        </div>
+      </template>
+    </el-drawer>
   </div>
 </template>
-
-<style scoped></style>