feat(菜单): 添加打开和保存文档功能

在菜单栏中新增打开和保存文档按钮，支持导入JSON/文本文件以及导出为JSON文件

index.html

@@ -12,6 +12,12 @@
   <div id="app">
     <div class="menu" editor-component="menu">
       <div class="menu-item">
+        <div class="menu-item__open" title="打开文档">
+          <i></i>
+        </div>
+        <div class="menu-item__save" title="保存文档">
+          <i></i>
+        </div>
         <div class="menu-item__undo">
           <i></i>
         </div>

src/main.ts

@@ -79,7 +79,88 @@ window.onload = function () {
     }
   )
 
-  // 2. | 撤销 | 重做 | 格式刷 | 清除格式 |
+  // 2. | 打开 | 保存 | 撤销 | 重做 | 格式刷 | 清除格式 |
+  
+  // 打开文档功能
+  const openDom = document.querySelector<HTMLDivElement>('.menu-item__open')!
+  openDom.onclick = function () {
+    console.log('open document')
+    
+    // 创建文件输入元素
+    const fileInput = document.createElement('input')
+    fileInput.type = 'file'
+    fileInput.accept = '.json,.txt'
+    fileInput.style.display = 'none'
+    
+    fileInput.onchange = function (event) {
+      const file = (event.target as HTMLInputElement).files?.[0]
+      if (!file) return
+      
+      const reader = new FileReader()
+      reader.onload = function (e) {
+        try {
+          const content = e.target?.result as string
+          let editorData
+          
+          // 尝试解析JSON格式
+          try {
+            editorData = JSON.parse(content)
+          } catch {
+            // 如果不是JSON，作为纯文本处理
+            editorData = {
+              main: [{ value: content }]
+            }
+          }
+          
+          // 设置编辑器内容
+          instance.command.executeSetValue(editorData)
+          console.log('文档已打开')
+        } catch (error) {
+          console.error('打开文档失败:', error)
+          alert('打开文档失败，请检查文件格式')
+        }
+      }
+      
+      reader.readAsText(file)
+      document.body.removeChild(fileInput)
+    }
+    
+    document.body.appendChild(fileInput)
+    fileInput.click()
+  }
+
+  // 保存文档功能
+  const saveDom = document.querySelector<HTMLDivElement>('.menu-item__save')!
+  saveDom.onclick = function () {
+    console.log('save document')
+    
+    try {
+      // 获取编辑器内容
+      const editorValue = instance.command.getValue()
+      const content = JSON.stringify(editorValue.data, null, 2)
+      
+      // 创建下载链接
+      const blob = new Blob([content], { type: 'application/json' })
+      const url = URL.createObjectURL(blob)
+      
+      const downloadLink = document.createElement('a')
+      downloadLink.href = url
+      downloadLink.download = `document_${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.json`
+      downloadLink.style.display = 'none'
+      
+      document.body.appendChild(downloadLink)
+      downloadLink.click()
+      document.body.removeChild(downloadLink)
+      
+      // 清理URL对象
+      URL.revokeObjectURL(url)
+      console.log('文档已保存')
+    } catch (error) {
+      console.error('保存文档失败:', error)
+      alert('保存文档失败')
+    }
+  }
+
   const undoDom = document.querySelector<HTMLDivElement>('.menu-item__undo')!
   undoDom.title = `撤销(${isApple ? '⌘' : 'Ctrl'}+Z)`
   undoDom.onclick = function () {