Demo：Feature：支持导入和导出为markdown格式，优化导出弹窗视觉

web/src/config/en.js

@@ -369,3 +369,43 @@ export const sidebarTriggerList = [
     icon: 'iconjianpan'
   }
 ]
+
+// 下载类型列表
+export const downTypeList = [
+  {
+    name: 'Dedicated file',
+    type: 'smm',
+    icon: 'iconwenjian',
+    desc: 'Available for import'
+  },
+  {
+    name: 'JSON',
+    type: 'json',
+    icon: 'iconjson',
+    desc: 'Popular data exchange formats, Available for import'
+  },
+  {
+    name: 'Image',
+    type: 'png',
+    icon: 'iconPNG',
+    desc: 'Suitable for viewing and sharing'
+  },
+  {
+    name: 'SVG',
+    type: 'svg',
+    icon: 'iconSVG',
+    desc: 'Scalable Vector Graphics'
+  },
+  {
+    name: 'PDF',
+    type: 'pdf',
+    icon: 'iconpdf',
+    desc: 'Suitable for printing'
+  },
+  {
+    name: 'Markdown',
+    type: 'md',
+    icon: 'iconmarkdown',
+    desc: 'Easy for other software to open'
+  }
+]

web/src/config/index.js

@@ -15,7 +15,8 @@ import {
   shortcutKeyList as shortcutKeyListZh,
   shapeList as shapeListZh,
   sidebarTriggerList as sidebarTriggerListZh,
-  backgroundSizeList as backgroundSizeListZh
+  backgroundSizeList as backgroundSizeListZh,
+  downTypeList as downTypeListZh
 } from './zh'
 import {
   fontFamilyList as fontFamilyListEn,
@@ -26,7 +27,8 @@ import {
   shortcutKeyList as shortcutKeyListEn,
   shapeList as shapeListEn,
   sidebarTriggerList as sidebarTriggerListEn,
-  backgroundSizeList as backgroundSizeListEn
+  backgroundSizeList as backgroundSizeListEn,
+  downTypeList as downTypeListEn
 } from './en'
 
 const fontFamilyList = {
@@ -74,6 +76,11 @@ const sidebarTriggerList = {
   en: sidebarTriggerListEn
 }
 
+const downTypeList = {
+  zh: downTypeListZh,
+  en: downTypeListEn
+}
+
 export {
   fontSizeList,
   lineHeightList,
@@ -91,5 +98,6 @@ export {
   backgroundSizeList,
   shortcutKeyList,
   shapeList,
-  sidebarTriggerList
+  sidebarTriggerList,
+  downTypeList
 }

web/src/config/zh.js

@@ -441,3 +441,43 @@ export const sidebarTriggerList = [
     icon: 'iconjianpan'
   }
 ]
+
+// 下载类型列表
+export const downTypeList = [
+  {
+    name: '专有文件',
+    type: 'smm',
+    icon: 'iconwenjian',
+    desc: '可用于导入'
+  },
+  {
+    name: 'JSON',
+    type: 'json',
+    icon: 'iconjson',
+    desc: '流行的数据交换格式，可用于导入'
+  },
+  {
+    name: '图片',
+    type: 'png',
+    icon: 'iconPNG',
+    desc: '适合查看分享'
+  },
+  {
+    name: 'SVG',
+    type: 'svg',
+    icon: 'iconSVG',
+    desc: '可缩放矢量图形'
+  },
+  {
+    name: 'PDF',
+    type: 'pdf',
+    icon: 'iconpdf',
+    desc: '适合打印'
+  },
+  {
+    name: 'Markdown',
+    type: 'md',
+    icon: 'iconmarkdown',
+    desc: '便于其他软件打开'
+  }
+]

web/src/lang/en_us.js

@@ -88,6 +88,7 @@ export default {
     imageFile: 'Image file',
     svgFile: 'svg file',
     pdfFile: 'pdf file',
+    markdownFile: 'markdown file',
     tips: 'tips: .smm and .json file can be import',
     domToImage: 'Whether to convert rich text nodes in svg into pictures',
     pngTips: 'tips: Exporting pictures in rich text mode is time-consuming. It is recommended to export to svg format',
@@ -103,7 +104,7 @@ export default {
   import: {
     title: 'Import',
     selectFile: 'Select file',
-    supportFile: 'Support .smm、.json、.xmind、.xlsx file'
+    supportFile: 'Support .smm、.json、.xmind、.xlsx、.md file'
   },
   navigatorToolbar: {
     openMiniMap: 'Open mini map',

web/src/lang/zh_cn.js

@@ -88,6 +88,7 @@ export default {
     imageFile: '图片文件',
     svgFile: 'svg文件',
     pdfFile: 'pdf文件',
+    markdownFile: 'markdown文件',
     tips: 'tips：.smm和.json文件可用于导入',
     domToImage: '是否将svg中富文本节点转换成图片',
     pngTips: 'tips：富文本模式导出图片非常耗时，建议导出为svg格式',
@@ -103,7 +104,7 @@ export default {
   import: {
     title: '导入',
     selectFile: '选取文件',
-    supportFile: '支持.smm、.json、.xmind、.xlsx文件'
+    supportFile: '支持.smm、.json、.xmind、.xlsx、.md文件'
   },
   navigatorToolbar: {
     openMiniMap: '开启小地图',

web/src/pages/Edit/components/Export.vue

@@ -30,26 +30,21 @@
           >{{ $t('export.domToImage') }}</el-checkbox
         >
       </div>
-      <el-radio-group v-model="exportType" size="mini">
-        <el-radio-button label="smm"
-          >{{ $t('export.dedicatedFile') }}（.smm）</el-radio-button
+      <div class="downloadTypeList">
+        <div 
+          class="downloadTypeItem" 
+          v-for="item in downTypeList" 
+          :key="item.type" 
+          :class="{active: exportType === item.type}" 
+          @click="exportType = item.type"
         >
-        <el-radio-button label="json"
-          >{{ $t('export.jsonFile') }}（.json）</el-radio-button
-        >
-        <el-radio-button label="png"
-          >{{ $t('export.imageFile') }}（.png）</el-radio-button
-        >
-        <el-radio-button label="svg"
-          >{{ $t('export.svgFile') }}（.svg）</el-radio-button
-        >
-        <el-radio-button label="pdf"
-          >{{ $t('export.pdfFile') }}（.pdf）</el-radio-button
-        >
-        <el-radio-button label="md"
-          >Markdown文件（.md）</el-radio-button
-        >
-      </el-radio-group>
+          <div class="icon iconfont" :class="[item.icon, item.type]"></div>
+          <div class="info">
+            <div class="name">{{ item.name }}</div>
+            <div class="desc">{{ item.desc }}</div>
+          </div>
+        </div>
+      </div>
       <div class="tip">{{ $t('export.tips') }}</div>
       <div class="tip warning" v-if="openNodeRichText && ['png', 'pdf'].includes(exportType)">{{ $t('export.pngTips') }}</div>
       <div class="tip warning" v-if="openNodeRichText && exportType === 'svg' && domToImage">{{ $t('export.svgTips') }}</div>
@@ -65,6 +60,7 @@
 
 <script>
 import { mapState } from 'vuex'
+import { downTypeList } from '@/config'
 
 /**
  * @Author: 王林
@@ -87,7 +83,11 @@ export default {
   computed: {
     ...mapState({
       openNodeRichText: state => state.localConfig.openNodeRichText,
-    })
+    }),
+
+    downTypeList() {
+      return downTypeList[this.$i18n.locale] || downTypeList.zh
+    },
   },
   created() {
     this.$bus.$on('showExport', () => {
@@ -151,6 +151,10 @@ export default {
 
 <style lang="less" scoped>
 .nodeDialog {
+  /deep/ .el-dialog__body {
+    background-color: #f2f4f7;
+  }
+
   .nameInputBox {
     margin-bottom: 20px;
 
@@ -166,5 +170,70 @@ export default {
       color: #F56C6C;
     }
   }
+
+  .downloadTypeList {
+    display: flex;
+    flex-wrap: wrap;
+    .downloadTypeItem {
+      width: 200px;
+      height: 88px;
+      padding: 22px;
+      overflow: hidden;
+      margin: 10px;
+      border-radius: 11px;
+      box-shadow: 0 0 20px 0 rgba(0,0,0,.02);
+      background-color: #fff;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      border: 2px solid transparent;
+
+      &.active {
+        border-color: #409eff;
+      }
+
+      .icon {
+        font-size: 30px;
+        margin-right: 10px;
+
+        &.png {
+          color: #ffc038;
+        }
+
+        &.pdf {
+          color: #ff6c4d;
+        }
+
+        &.md {
+          color: #2b2b2b;
+        }
+
+        &.json {
+          color: #12c87e;
+        }
+
+        &.svg {
+          color: #4380ff;
+        }
+
+        &.smm {
+          color: #409eff;
+        }
+      }
+
+      .info {
+        .name {
+          color: #1a1a1a;
+          font-size: 15px;
+          margin-bottom: 5px;
+        }
+
+        .desc {
+          color: #999;
+          font-size: 12px;
+        }
+      }
+    }
+  }
 }
 </style>

web/src/pages/Edit/components/Import.vue

@@ -33,6 +33,7 @@
 
 <script>
 import xmind from 'simple-mind-map/src/parse/xmind.js'
+import markdown from 'simple-mind-map/src/parse/markdown.js'
 import { fileToBuffer } from '@/utils'
 import { read, utils } from 'xlsx'
 
@@ -68,9 +69,9 @@ export default {
      * @Desc: 文件选择
      */
     onChange(file) {
-      let reg = /\.(smm|xmind|json|xlsx)$/
+      let reg = /\.(smm|xmind|json|xlsx|md)$/
       if (!reg.test(file.name)) {
-        this.$message.error('请选择.smm、.json、.xmind、.xlsx文件')
+        this.$message.error('请选择.smm、.json、.xmind、.xlsx、.md文件')
         this.fileList = []
       } else {
         this.fileList.push(file)
@@ -112,7 +113,9 @@ export default {
         this.handleXmind(file)
       } else if (/\.xlsx$/.test(file.name)) {
         this.handleExcel(file)
-      }
+      } else if (/\.md$/.test(file.name)) {
+        this.handleMd(file)
+      } 
       this.cancel()
     },
 
@@ -220,6 +223,22 @@ export default {
         console.log(error)
         this.$message.error('文件解析失败')
       }
+    },
+
+    // 处理markdown文件
+    async handleMd(file) {
+      let fileReader = new FileReader()
+      fileReader.readAsText(file.raw)
+      fileReader.onload = async evt => {
+        try {
+          let data = await markdown.transformMarkdownTo(evt.target.result)
+          this.$bus.$emit('setData', data)
+          this.$message.success('导入成功')
+        } catch (error) {
+          console.log(error)
+          this.$message.error('文件解析失败')
+        }
+      }
     }
   }
 }