Demo：调整导出弹窗的样式

web/src/App.vue

@@ -23,4 +23,23 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
 }
+
+.customScrollbar {
+  &::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 7px;
+    background-color: rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+  }
+
+  &::-webkit-scrollbar-track {
+    box-shadow: none;
+    background: transparent;
+    display: none;
+  }
+}
 </style>

web/src/config/en.js

@@ -457,19 +457,20 @@ export const downTypeList = [
     name: 'Dedicated file',
     type: 'smm',
     icon: 'iconwenjian',
-    desc: 'Available for import'
+    desc:
+      'SimpleMindMap private format, can be used for re import, and the client can directly edit it'
   },
   {
     name: 'JSON',
     type: 'json',
     icon: 'iconjson',
-    desc: 'Popular data exchange formats, Available for import'
+    desc: 'Popular data exchange format that can be used for re importing'
   },
   {
     name: 'Image',
     type: 'png',
     icon: 'iconPNG',
-    desc: 'Suitable for viewing and sharing'
+    desc: 'Common image formats, suitable for viewing and sharing'
   },
   {
     name: 'SVG',
@@ -481,19 +482,19 @@ export const downTypeList = [
     name: 'PDF',
     type: 'pdf',
     icon: 'iconpdf',
-    desc: 'Suitable for printing'
+    desc: 'Suitable for viewing, browsing, and printing'
   },
   {
     name: 'Markdown',
     type: 'md',
     icon: 'iconmarkdown',
-    desc: 'Easy for other software to open'
+    desc: 'MD text format, easy for other software to open'
   },
   {
     name: 'XMind',
     type: 'xmind',
     icon: 'iconxmind',
-    desc: 'XMind file'
+    desc: 'XMind software file'
   },
   {
     name: 'Txt',
@@ -511,7 +512,7 @@ export const downTypeList = [
     name: 'Excel',
     type: 'xlsx',
     icon: 'iconfile-excel',
-    desc: 'Excel software format'
+    desc: 'Table text format, editable with Excel software'
   }
 ]
 
@@ -641,4 +642,4 @@ export const alignList = [
     name: 'Align right',
     value: 'right'
   }
-]
+]

web/src/config/zh.js

@@ -552,19 +552,19 @@ export const downTypeList = [
     name: '专有文件',
     type: 'smm',
     icon: 'iconwenjian',
-    desc: '可用于导入'
+    desc: 'SimpleMindMap私有格式，可用于再次导入，客户端可直接编辑'
   },
   {
     name: 'JSON',
     type: 'json',
     icon: 'iconjson',
-    desc: '流行的数据交换格式，可用于导入'
+    desc: '流行的数据交换格式，可用于再次导入'
   },
   {
     name: '图片',
     type: 'png',
     icon: 'iconPNG',
-    desc: '适合查看分享'
+    desc: '常用图片格式，适合查看分享'
   },
   {
     name: 'SVG',
@@ -576,19 +576,19 @@ export const downTypeList = [
     name: 'PDF',
     type: 'pdf',
     icon: 'iconpdf',
-    desc: '适合打印'
+    desc: '适合查看浏览和打印'
   },
   {
     name: 'Markdown',
     type: 'md',
     icon: 'iconmarkdown',
-    desc: '便于其他软件打开'
+    desc: 'md文本格式，便于其他软件打开'
   },
   {
     name: 'XMind',
     type: 'xmind',
     icon: 'iconxmind',
-    desc: 'XMind格式'
+    desc: 'XMind软件格式'
   },
   {
     name: 'Txt',
@@ -606,7 +606,7 @@ export const downTypeList = [
     name: 'Excel',
     type: 'xlsx',
     icon: 'iconfile-excel',
-    desc: 'Excel软件格式'
+    desc: '表格文本形式，可用Excel软件编辑'
   }
 ]
 

web/src/config/zhtw.js

@@ -457,61 +457,61 @@ export const downTypeList = [
     name: '專用檔案',
     type: 'smm',
     icon: 'iconwenjian',
-    desc: '可用於匯入'
+    desc: 'SimpleMindMap私有格式，可用于再次導入，客戶端可直接編輯'
   },
   {
     name: 'JSON',
     type: 'json',
     icon: 'iconjson',
-    desc: '常見的資料交換格式，可用於匯入'
+    desc: '流行的數據交換格式，可用于再次導入'
   },
   {
     name: '圖片',
     type: 'png',
     icon: 'iconPNG',
-    desc: '適合檢視與分享'
+    desc: '常用圖片格式，適合查看分享'
   },
   {
     name: 'SVG',
     type: 'svg',
     icon: 'iconSVG',
-    desc: '可縮放向量圖形'
+    desc: '可縮放矢量圖形'
   },
   {
     name: 'PDF',
     type: 'pdf',
     icon: 'iconpdf',
-    desc: '適合列印'
+    desc: '適合查看浏覽和打印'
   },
   {
     name: 'Markdown',
     type: 'md',
     icon: 'iconmarkdown',
-    desc: '方便其他軟體開啟'
+    desc: 'md文本格式，便于其他軟件打開'
   },
   {
     name: 'XMind',
     type: 'xmind',
     icon: 'iconxmind',
-    desc: 'XMind 檔案'
+    desc: 'XMind軟件格式'
   },
   {
     name: 'Txt',
     type: 'txt',
     icon: 'iconTXT',
-    desc: '純文字檔案'
+    desc: '純文本文件'
   },
   {
     name: 'FreeMind',
     type: 'mm',
     icon: 'iconfreemind',
-    desc: 'FreeMind軟體格式'
+    desc: 'FreeMind軟件格式'
   },
   {
     name: 'Excel',
     type: 'xlsx',
     icon: 'iconfile-excel',
-    desc: 'Excel軟體格式'
+    desc: '表格文本形式，可用Excel軟件編輯'
   }
 ]
 

web/src/lang/en_us.js

@@ -152,11 +152,7 @@ export default {
     svgFile: 'svg file',
     pdfFile: 'pdf file',
     markdownFile: 'markdown file',
-    tips: 'tips: .smm and .json file can be import',
     isTransparent: 'Background is transparent',
-    pngTips:
-      'tips: Exporting pictures in rich text mode is time-consuming. It is recommended to export to svg format',
-    svgTips: 'tips: Exporting pictures in rich text mode is time-consuming',
     transformingDomToImages: 'Converting nodes: ',
     notifyTitle: 'Info',
     notifyMessage:
@@ -166,7 +162,9 @@ export default {
     useMultiPageExport: 'Export multi page',
     defaultFileName: 'Mind map',
     addFooterTextPlaceholder: 'For example: From simple-mind-map',
-    addFooterText: 'Add text at the footer'
+    addFooterText: 'Add text at the footer',
+    desc: 'Desc',
+    options: 'Options'
   },
   fullscreen: {
     fullscreenShow: 'Full screen show',

web/src/lang/zh_cn.js

@@ -77,7 +77,8 @@ export default {
     enableAutoEnterTextEditWhenKeydown: '键盘输入时自动进入文本编辑',
     confirm: '确定',
     cancel: '取消',
-    changeRichTextTip: '该操作会清空所有历史修改记录，并且修改思维导图数据，是否继续？',
+    changeRichTextTip:
+      '该操作会清空所有历史修改记录，并且修改思维导图数据，是否继续？',
     changeRichTextTip2: '是否切换为富文本模式？',
     changeRichTextTip3: '是否切换为非富文本模式？',
     enableDragImport: '是否允许直接拖拽文件到页面进行导入',
@@ -150,10 +151,7 @@ export default {
     svgFile: 'svg文件',
     pdfFile: 'pdf文件',
     markdownFile: 'markdown文件',
-    tips: 'tips：.smm和.json文件可用于导入',
     isTransparent: '背景是否透明',
-    pngTips: 'tips：富文本模式导出图片非常耗时，建议导出为svg格式',
-    svgTips: 'tips：富文本模式导出图片非常耗时',
     transformingDomToImages: '正在转换节点：',
     notifyTitle: '消息',
     notifyMessage: '如果没有触发下载，请检查是否被浏览器拦截了',
@@ -162,7 +160,9 @@ export default {
     useMultiPageExport: '是否多页导出',
     defaultFileName: '思维导图',
     addFooterText: '底部添加文字',
-    addFooterTextPlaceholder: '比如：来自simple-mind-map'
+    addFooterTextPlaceholder: '比如：来自simple-mind-map',
+    desc: '说明',
+    options: '选项'
   },
   fullscreen: {
     fullscreenShow: '全屏查看',
@@ -270,7 +270,7 @@ export default {
     bottom: '下',
     left: '左',
     right: '右',
-    tag: '标签',
+    tag: '标签'
   },
   theme: {
     title: '主题',

web/src/lang/zh_tw.js

@@ -152,10 +152,7 @@ export default {
     svgFile: 'SVG 檔案',
     pdfFile: 'PDF 檔案',
     markdownFile: 'Markdown 檔案',
-    tips: '提示：.smm 和 .json 檔案可以匯入',
     isTransparent: '背景透明',
-    pngTips: '提示：在豐富文字模式下匯出圖片非常耗時，建議匯出為 SVG 格式',
-    svgTips: '提示：在豐富文字模式下匯出圖片非常耗時',
     transformingDomToImages: '正在轉換節點：',
     notifyTitle: '訊息',
     notifyMessage: '如果沒有觸發下載，請檢查是否被瀏覽器封鎖',
@@ -164,7 +161,9 @@ export default {
     useMultiPageExport: '多頁匯出',
     defaultFileName: '心智圖',
     addFooterText: '在底部新增文字',
-    addFooterTextPlaceholder: '例如：來自 simple-mind-map'
+    addFooterTextPlaceholder: '例如：來自 simple-mind-map',
+    desc: '說明',
+    options: '選項'
   },
   fullscreen: {
     fullscreenShow: '全螢幕檢視',

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

@@ -1,16 +1,18 @@
 <template>
   <el-dialog
     class="nodeExportDialog"
+    :class="{ isMobile: isMobile, isDark: isDark }"
     :title="$t('export.title')"
     :visible.sync="dialogVisible"
     v-loading.fullscreen.lock="loading"
     :element-loading-text="loadingText"
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.8)"
-    :width="isMobile ? '90%' : '50%'"
+    :width="isMobile ? '90%' : '800px'"
     :top="isMobile ? '20px' : '15vh'"
   >
     <div class="exportContainer" :class="{ isDark: isDark }">
+      <!-- 文件名称输入 -->
       <div class="nameInputBox">
         <span class="name">{{ $t('export.filename') }}</span>
         <el-input
@@ -19,71 +21,90 @@
           size="mini"
           @keydown.native.stop
         ></el-input>
-        <el-checkbox
-          v-show="['smm', 'json'].includes(exportType)"
-          v-model="widthConfig"
-          style="margin-left: 12px"
-          >{{ $t('export.include') }}</el-checkbox
-        >
       </div>
-      <div
-        class="paddingInputBox"
-        v-show="['svg', 'png', 'pdf'].includes(exportType)"
-      >
-        <div class="paddingInputGroup">
-          <span class="name">{{ $t('export.paddingX') }}</span>
-          <el-input
-            style="max-width: 100px"
-            v-model="paddingX"
-            size="mini"
-            @change="onPaddingChange"
-            @keydown.native.stop
-          ></el-input>
-        </div>
-        <div class="paddingInputGroup">
-          <span class="name">{{ $t('export.paddingY') }}</span>
-          <el-input
-            style="width: 100px"
-            v-model="paddingY"
-            size="mini"
-            @change="onPaddingChange"
-            @keydown.native.stop
-          ></el-input>
-        </div>
-        <div class="paddingInputGroup">
-          <span class="name">{{ this.$t('export.addFooterText') }}</span>
-          <el-input
-            style="width: 200px"
-            v-model="extraText"
-            size="mini"
-            :placeholder="$t('export.addFooterTextPlaceholder')"
-            @keydown.native.stop
-          ></el-input>
-        </div>
-        <div class="paddingInputGroup">
-          <el-checkbox
-            v-show="['png', 'pdf'].includes(exportType)"
-            v-model="isTransparent"
-            >{{ $t('export.isTransparent') }}</el-checkbox
+      <!-- 导出类型选择 -->
+      <div class="downloadTypeSelectBox">
+        <!-- 类型列表 -->
+        <div class="downloadTypeList customScrollbar">
+          <div
+            class="downloadTypeItem"
+            v-for="item in downTypeList"
+            :key="item.type"
+            :class="{ active: exportType === item.type }"
+            @click="exportType = item.type"
           >
-        </div>
-      </div>
-      <div class="downloadTypeList">
-        <div
-          class="downloadTypeItem"
-          v-for="item in downTypeList"
-          :key="item.type"
-          :class="{ active: exportType === item.type }"
-          @click="exportType = item.type"
-        >
-          <div class="icon iconfont" :class="[item.icon, item.type]"></div>
-          <div class="info">
+            <div class="icon iconfont" :class="[item.icon, item.type]"></div>
             <div class="name">{{ item.name }}</div>
-            <div class="desc">{{ item.desc }}</div>
+            <div class="icon checked el-icon-check"></div>
+          </div>
+        </div>
+        <!-- 类型内容 -->
+        <div class="downloadTypeContent customScrollbar">
+          <div class="contentRow">
+            <div class="contentName">{{ $t('export.desc') }}</div>
+            <div class="contentValue">
+              {{ currentTypeData ? currentTypeData.desc : '' }}
+            </div>
+          </div>
+          <div class="contentRow">
+            <div class="contentName">{{ $t('export.options') }}</div>
+            <div class="contentValue">
+              <div
+                class="valueItem"
+                v-show="['smm', 'json'].includes(exportType)"
+              >
+                <el-checkbox v-model="widthConfig">{{
+                  $t('export.include')
+                }}</el-checkbox>
+              </div>
+              <div
+                class="valueItem"
+                v-show="['svg', 'png', 'pdf'].includes(exportType)"
+              >
+                <div class="valueSubItem">
+                  <span class="name">{{ $t('export.paddingX') }}</span>
+                  <el-input
+                    style="width: 200px"
+                    v-model="paddingX"
+                    size="mini"
+                    @change="onPaddingChange"
+                    @keydown.native.stop
+                  ></el-input>
+                </div>
+                <div class="valueSubItem">
+                  <span class="name">{{ $t('export.paddingY') }}</span>
+                  <el-input
+                    style="width: 200px"
+                    v-model="paddingY"
+                    size="mini"
+                    @change="onPaddingChange"
+                    @keydown.native.stop
+                  ></el-input>
+                </div>
+                <div class="valueSubItem">
+                  <span class="name">{{
+                    this.$t('export.addFooterText')
+                  }}</span>
+                  <el-input
+                    style="width: 200px"
+                    v-model="extraText"
+                    size="mini"
+                    :placeholder="$t('export.addFooterTextPlaceholder')"
+                    @keydown.native.stop
+                  ></el-input>
+                </div>
+                <div class="valueSubItem">
+                  <el-checkbox
+                    v-show="['png', 'pdf'].includes(exportType)"
+                    v-model="isTransparent"
+                    >{{ $t('export.isTransparent') }}</el-checkbox
+                  >
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-      <div class="tip">{{ $t('export.tips') }}</div>
     </div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>
@@ -143,6 +164,13 @@ export default {
           return true
         }
       })
+    },
+
+    currentTypeData() {
+      const cur = this.downTypeList.find(item => {
+        return item.type === this.exportType
+      })
+      return cur
     }
   },
   created() {
@@ -247,15 +275,39 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.exportContainer {
-  &.isDark {
-    .downloadTypeList {
-      .downloadTypeItem {
-        background-color: #363b3f;
+.nodeExportDialog {
+  .exportContainer {
+    &.isDark {
+      .nameInputBox {
+        .name {
+          color: hsla(0, 0%, 100%, 0.6);
+        }
+      }
 
-        .info {
-          .name {
-            color: hsla(0, 0%, 100%, 0.9);
+      .downloadTypeSelectBox {
+        .downloadTypeList {
+          .downloadTypeItem {
+            background-color: #363b3f;
+
+            &.active {
+              background-color: #262a2e;
+            }
+
+            .name {
+              color: hsla(0, 0%, 100%, 0.9);
+            }
+          }
+        }
+
+        .downloadTypeContent {
+          .contentRow {
+            .contentName {
+              color: hsla(0, 0%, 100%, 0.6);
+            }
+
+            .contentValue {
+              color: hsla(0, 0%, 100%, 0.6);
+            }
           }
         }
       }
@@ -264,125 +316,228 @@ export default {
 }
 
 .nodeExportDialog {
-  /deep/ .el-dialog__body {
-    background-color: #f2f4f7;
-  }
-
-  .nameInputBox {
-    margin-bottom: 20px;
-
-    .name {
-      margin-right: 10px;
-    }
-  }
-
-  .paddingInputBox {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-
-    .paddingInputGroup {
-      margin-right: 12px;
-      margin-bottom: 12px;
-
-      &:last-of-type {
-        margin-right: 0;
+  &.isDark {
+    /deep/ .el-dialog__body {
+      .el-checkbox {
+        .el-checkbox__label {
+          color: hsla(0, 0%, 100%, 0.6);
+        }
       }
     }
+  }
 
-    .name {
-      margin-right: 10px;
+  /deep/ .el-dialog__body {
+    padding: 0;
+    border-top: 1px solid #f2f4f7;
+    border-bottom: 1px solid #f2f4f7;
+
+    .el-checkbox__input.is-checked + .el-checkbox__label {
+      color: #409eff !important;
+    }
+
+    .el-checkbox {
+      .el-checkbox__label {
+        color: #1a1a1a;
+      }
     }
   }
 
-  .tip {
-    margin-top: 10px;
+  &.isMobile {
+    .exportContainer {
+      .downloadTypeSelectBox {
+        flex-direction: column;
 
-    &.warning {
-      color: #f56c6c;
+        .downloadTypeList {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          overflow-x: auto;
+          height: 60px;
+
+          .downloadTypeItem {
+            width: 100px;
+            flex-shrink: 0;
+            padding-left: 10px;
+
+            .icon {
+              margin-right: 5px;
+
+              &.checked {
+                display: none !important;
+              }
+            }
+          }
+        }
+
+        .downloadTypeContent {
+          .contentRow {
+            flex-direction: column;
+
+            .contentName {
+              margin-bottom: 10px;
+            }
+
+            .contentValue {
+              .valueItem {
+                .valueSubItem {
+                  display: flex;
+                  flex-direction: column;
+
+                  .name {
+                    margin-bottom: 5px;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
     }
   }
 
-  .downloadTypeList {
+  .exportContainer {
+    width: 100%;
+    height: 450px;
+    overflow: hidden;
     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, 0.02);
-      background-color: #fff;
+    flex-direction: column;
+
+    .nameInputBox {
       display: flex;
       align-items: center;
-      cursor: pointer;
-      border: 2px solid transparent;
+      justify-content: center;
+      flex-wrap: wrap;
+      height: 50px;
+      flex-shrink: 0;
+      border-bottom: 1px solid #f2f4f7;
 
-      &.active {
-        border-color: #409eff;
-      }
-
-      .icon {
-        font-size: 30px;
+      .name {
         margin-right: 10px;
+      }
+    }
+
+    .downloadTypeSelectBox {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      display: flex;
+
+      .downloadTypeList {
+        width: 210px;
+        height: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
+        background-color: #f2f4f7;
         flex-shrink: 0;
 
-        &.png {
-          color: #ffc038;
-        }
+        .downloadTypeItem {
+          width: 100%;
+          height: 60px;
+          padding-left: 28px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          cursor: pointer;
 
-        &.pdf {
-          color: #ff6c4d;
-        }
+          &.active {
+            background-color: #fff;
 
-        &.md {
-          color: #2b2b2b;
-        }
+            .icon {
+              &.checked {
+                display: block;
+              }
+            }
+          }
 
-        &.json {
-          color: #12c87e;
-        }
+          .icon {
+            font-size: 25px;
+            margin-right: 15px;
+            flex-shrink: 0;
 
-        &.svg {
-          color: #4380ff;
-        }
+            &.png {
+              color: #ffc038;
+            }
 
-        &.smm {
-          color: #409eff;
-        }
+            &.pdf {
+              color: #ff6c4d;
+            }
 
-        &.xmind {
-          color: #f55e5e;
-        }
+            &.md {
+              color: #2b2b2b;
+            }
 
-        &.txt {
-          color: #70798e;
+            &.json {
+              color: #12c87e;
+            }
+
+            &.svg {
+              color: #4380ff;
+            }
+
+            &.smm {
+              color: #409eff;
+            }
+
+            &.xmind {
+              color: #f55e5e;
+            }
+
+            &.txt {
+              color: #70798e;
+            }
+
+            &.checked {
+              color: #409eff;
+              font-size: 20px;
+              margin-left: auto;
+              display: none;
+            }
+          }
+
+          .name {
+            color: #1a1a1a;
+            font-size: 15px;
+            margin-bottom: 5px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
         }
       }
 
-      .info {
-        width: 100%;
-        overflow: hidden;
+      .downloadTypeContent {
+        padding: 30px;
+        height: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
 
-        .name {
-          color: #1a1a1a;
-          font-size: 15px;
-          margin-bottom: 5px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
+        .contentRow {
+          display: flex;
+          font-size: 14px;
+          margin-bottom: 20px;
 
-        .desc {
-          color: #999;
-          font-size: 12px;
-          display: -webkit-box; /* 必须设置display属性为-webkit-box */
-          overflow: hidden; /* 超出部分隐藏 */
-          text-overflow: ellipsis; /* 显示省略号 */
-          -webkit-line-clamp: 2; /* 限制显示两行 */
-          -webkit-box-orient: vertical; /* 垂直方向上的换行 */
+          .contentName {
+            width: 80px;
+            color: #666;
+          }
+
+          .contentValue {
+            color: #1a1a1a;
+
+            .valueItem {
+              .valueSubItem {
+                margin-bottom: 12px;
+
+                &:last-of-type {
+                  margin-right: 0;
+                }
+
+                .name {
+                  margin-right: 12px;
+                }
+              }
+            }
+          }
         }
       }
     }

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="noteContentViewer"
+    class="noteContentViewer customScrollbar"
     ref="noteContentViewer"
     :style="{
       left: this.left + 'px',
@@ -124,22 +124,5 @@ export default {
   overflow-y: auto;
   box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.06);
   border: 1px solid rgba(0, 0, 0, 0.06);
-
-  &::-webkit-scrollbar {
-    width: 7px;
-    height: 7px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-radius: 7px;
-    background-color: rgba(0, 0, 0, 0.3);
-    cursor: pointer;
-  }
-
-  &::-webkit-scrollbar-track {
-    box-shadow: none;
-    background: transparent;
-    display: none;
-  }
 }
 </style>