feat: 添加导入导出功能

woai3c · Feb 23, 2024 · a512ba3 · a512ba3
1 parent be8dc5e
commit a512ba3
Show file tree

Hide file tree

Showing 5 changed files with 154 additions and 46 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
     "editor.codeActionsOnSave": {
-        "source.fixAll": true
+        "source.fixAll": "explicit"
     },
     "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
     "stylelint.validate": [

diff --git a/src/components/Editor/AceEditor.vue b/src/components/Editor/AceEditor.vue
@@ -1,38 +1,38 @@
 <template>
     <div class="ace">
-        <el-button
-            class="btn"
-            style="margin-left: 380px;"
-            icon="el-icon-search"
-            @click="openSearchBox"
-        >
-            查找
-        </el-button>
-        <el-button
-            class="btn"
-            style="margin-left: 10px;"
-            icon="el-icon-close"
-            @click="closeEditor"
-        >
-            关闭
-        </el-button>
+        <div class="header">
+            <el-button
+                class="btn"
+                icon="el-icon-search"
+                @click="openSearchBox"
+            >
+                查找
+            </el-button>
+            <el-button
+                class="btn"
+                icon="el-icon-close"
+                @click="closeEditor"
+            >
+                关闭
+            </el-button>
+        </div>
         <div class="ace-editor">
             <div ref="ace" class="editor" />
         </div>
-        <el-button
-            type="primary"
-            style="margin-left: 360px;"
-            @click="setCode"
-        >
-            重置代码
-        </el-button>
-        <el-button
-            type="success"
-            style="margin-left: 20px;"
-            @click="getCode"
-        >
-            保存提交
-        </el-button>
+        <div class="footer">
+            <el-button
+                type="primary"
+                @click="setCode"
+            >
+                重置代码
+            </el-button>
+            <el-button
+                type="success"
+                @click="getCode"
+            >
+                保存提交
+            </el-button>
+        </div>
     </div>
 </template>
 
@@ -67,8 +67,8 @@ export default {
     mounted() {
         ace.config.set('basePath', 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/')
         this.editor = ace.edit(this.$refs.ace, {
-            maxLines: 34,
-            minLines: 34,
+            maxLines: 40,
+            minLines: 40,
             fontSize: 14,
             theme: 'ace/theme/one_dark',
             mode: 'ace/mode/json5',
@@ -112,7 +112,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .ace {
     position: absolute;
     height: calc(100% - 80px);
@@ -121,13 +121,21 @@ export default {
     background-color: #fff;
     border: 1px solid #ddd;
     z-index: 100;
-}
+    padding: 10px;
 
-.editor {
-    margin: 10px 5px;
+    .header,
+    .footer {
+        display: flex;
+        justify-content: flex-end;
+    }
+
+    .ace-editor {
+        height: calc(100% - 80px);
+        overflow: auto;
+    }
 }
 
-.btn {
-    margin-top: 5px;
+.editor {
+    margin: 10px 0;
 }
 </style>
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
@@ -1,7 +1,9 @@
 <template>
     <div>
         <div :class="isDarkMode ? 'dark toolbar' : 'toolbar'">
-            <el-button @click="handleAceEditorChange">JSON</el-button>
+            <el-button @click="onAceEditorChange">JSON</el-button>
+            <el-button @click="onImportJSON">导入</el-button>
+            <el-button @click="onExportJSON">导出</el-button>
             <el-button @click="undo">撤消</el-button>
             <el-button @click="redo">重做</el-button>
             <label for="input" class="insert">
@@ -19,7 +21,6 @@
             <el-button @click="clearCanvas">清空画布</el-button>
             <el-button :disabled="!areaData.components.length" @click="compose">组合</el-button>
             <el-button
-
                 :disabled="!curComponent || curComponent.isLock || curComponent.component != 'Group'"
                 @click="decompose"
             >
@@ -54,6 +55,35 @@
         <!-- 预览 -->
         <Preview v-if="isShowPreview" :is-screenshot="isScreenshot" @close="handlePreviewChange" />
         <AceEditor v-if="isShowAceEditor" @closeEditor="closeEditor" />
+
+        <el-dialog
+            :title="isExport ? '导出数据' : '导入数据'"
+            :visible.sync="isShowDialog"
+            :close-on-press-escape="false"
+            :close-on-click-modal="false"
+            width="600"
+        >
+            <el-input
+                v-model="jsonData"
+                type="textarea"
+                :rows="20"
+                placeholder="请输入 JSON 数据"
+            >
+            </el-input>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="isShowDialog = false">取 消</el-button>
+                <el-upload
+                    v-show="!isExport"
+                    action="/"
+                    :before-upload="beforeUpload"
+                    :show-file-list="false"
+                    accept="application/json"
+                >
+                    <el-button type="primary">选择 JSON 文件</el-button>
+                </el-upload>
+                <el-button type="primary" @click="processJSON">确 定</el-button>
+            </div>
+        </el-dialog>
     </div>
 </template>
 
@@ -78,10 +108,12 @@ export default {
             isScreenshot: false,
             scale: 100,
             switchValue: false,
+            isShowDialog: false,
+            jsonData: '',
+            isExport: false,
         }
     },
     computed: mapState(['componentData', 'canvasStyleData', 'areaData', 'curComponent', 'curComponentIndex', 'isDarkMode']),
-
     created() {
         eventBus.$on('preview', this.preview)
         eventBus.$on('save', this.save)
@@ -110,12 +142,12 @@ export default {
             }, 1000)
         },
 
-        handleAceEditorChange() {
+        onAceEditorChange() {
             this.isShowAceEditor = !this.isShowAceEditor
         },
 
         closeEditor() {
-            this.handleAceEditorChange()
+            this.onAceEditorChange()
         },
 
         lock() {
@@ -217,6 +249,65 @@ export default {
             this.isShowPreview = false
             this.$store.commit('setEditMode', 'edit')
         },
+
+        onImportJSON() {
+            this.jsonData = ''
+            this.isExport = false
+            this.isShowDialog = true
+        },
+
+        processJSON() {
+            try {
+                const data = JSON.parse(this.jsonData)
+                if (!Array.isArray(data)) {
+                    this.$message.error('数据格式错误，组件数据必须是一个数组')  
+                    return
+                }
+                
+                if (this.isExport) {
+                    this.downloadFileUtil(this.jsonData, 'application/json', 'data.json')
+                } else {
+                    this.$store.commit('setComponentData', data)
+                }
+                
+                this.isShowDialog = false
+            } catch (error) {
+                this.$message.error('数据格式错误，请传入合法的 JSON 格式数据')            
+            }
+        },
+
+        onExportJSON() {
+            this.isShowDialog = true
+            this.isExport = true
+            this.jsonData = JSON.stringify(this.componentData, null, 4)
+        },
+
+        downloadFileUtil(data, type, fileName = '') {
+            const url = window.URL.createObjectURL(new Blob([data], { type }))
+            const link = document.createElement('a')
+
+            link.style.display = 'none'
+            link.href = url
+            link.setAttribute('download', fileName)
+            document.body.appendChild(link)
+            link.click()
+
+            document.body.removeChild(link)
+            window.URL.revokeObjectURL(url)
+        },
+
+        beforeUpload(e) {
+            // 通过json文件导入
+            const reader = new FileReader()
+            reader.readAsText(e)
+            const self = this
+            reader.onload = function () {
+                self.jsonData = this.result
+                console.log(this.result)
+            }
+
+            return false
+        },
     },
 }
 </script>
@@ -310,4 +401,13 @@ export default {
         }
     }
 }
+
+.dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+
+    & > * {
+        margin-left: 10px;
+    }
+}
 </style>
diff --git a/src/styles/dark.scss b/src/styles/dark.scss
@@ -10,7 +10,7 @@
     --placeholder-bg-color: #242424;
     --actived-text-color: #fff;
     --actived-bg-color: #409eff;
-    --ace-bg-color: #000000d9;
+    --ace-bg-color: #000;
     --disable-text-color: #c0c4cc;
     --disable-border-color: #4b4a4ad9;
     --dropdown-border-color: #000000d9;

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -11,7 +11,7 @@
     --placeholder-bg-color: #fff;
     --actived-text-color: #409eff;
     --actived-bg-color: #ecf5ff;
-    --ace-bg-color: #ddd;
+    --ace-bg-color: #e4e7ed;
     --disable-text-color: #c0c4cc;
     --disable-border-color: #ebeef5;
     --dropdown-border-color: #e4e7ed;