feat: added base64 file stream download

CHANGELOG.zh_CN.md

+## Wip
+
+### ✨ Features
+
+- 新增 base64 文件流下载
+
 ## 2.0.0-rc.10 (2020-11-13)
 
 ### ✨ Refactor

src/components/Menu/src/index.less

@@ -49,56 +49,10 @@
     }
   }
 
-  // collapsed show title end
-  .ant-menu-item,
-  .ant-menu-submenu-title {
-    > .basic-menu__name {
-      width: 100%;
-
-      .basic-menu__tag {
-        float: right;
-        margin-top: @app-menu-item-height / 2;
-        transform: translate(0%, -50%);
-      }
-    }
-  }
-
   .ant-menu-item {
     transition: unset;
   }
 
-  &__tag {
-    display: inline-block;
-    padding: 2px 4px;
-    margin-right: 4px;
-    font-size: 12px;
-    line-height: 14px;
-    color: #fff;
-    border-radius: 2px;
-
-    &.dot {
-      width: 8px;
-      height: 8px;
-      padding: 0;
-      border-radius: 50%;
-    }
-
-    &.primary {
-      background: @primary-color;
-    }
-
-    &.error {
-      background: @error-color;
-    }
-
-    &.success {
-      background: @success-color;
-    }
-
-    &.warn {
-      background: @warning-color;
-    }
-  }
   // scrollbar -s tart
   &__content {
     /* 滚动槽 */
@@ -245,6 +199,11 @@
       margin: 0;
       line-height: @app-menu-item-height;
     }
+
+    .ant-menu-item.basic-menu-item__level1 {
+      height: @app-menu-item-height;
+      line-height: @app-menu-item-height;
+    }
   }
 
   // 层级样式
@@ -381,3 +340,51 @@
     }
   }
 }
+// collapsed show title end
+.ant-menu-item,
+.ant-menu-submenu-title {
+  > .basic-menu__name {
+    width: 100%;
+
+    .basic-menu__tag {
+      float: right;
+      margin-top: @app-menu-item-height / 2;
+      transform: translate(0%, -50%);
+    }
+  }
+}
+
+.basic-menu__tag {
+  display: inline-block;
+  padding: 2px 4px;
+  margin-right: 4px;
+  font-size: 12px;
+  line-height: 14px;
+  color: #fff;
+  border-radius: 2px;
+
+  &.dot {
+    width: 8px;
+    height: 8px;
+    padding: 0;
+    margin-top: 21px !important;
+    margin-bottom: 2px;
+    border-radius: 50%;
+  }
+
+  &.primary {
+    background: @primary-color;
+  }
+
+  &.error {
+    background: @error-color;
+  }
+
+  &.success {
+    background: @success-color;
+  }
+
+  &.warn {
+    background: @warning-color;
+  }
+}

src/design/var/index.less

@@ -6,7 +6,7 @@
 @multiple-height: 30px;
 
 // headers
-@header-height: 46px;
+@header-height: 48px;
 
 // logo width
 @logo-width: 36px;

src/layouts/logo/index.vue

@@ -93,5 +93,13 @@
        opacity: 1;
      });
     }
+
+    // &.dark .logo-title {
+    //   font-weight: 400;
+    // }
+
+    &.light .logo-title {
+      color: @primary-color;
+    }
   }
 </style>

src/settings/colorSetting.ts

@@ -8,7 +8,7 @@ export const HEADER_PRESET_BG_COLOR_LIST: string[] = [
   '#409eff',
   '#4e73df',
   '#e74c3c',
-  '#f39c12',
+  '#24292e',
   '#394664',
   '#001529',
 ];
@@ -17,6 +17,7 @@ export const HEADER_PRESET_BG_COLOR_LIST: string[] = [
 export const SIDE_BAR_BG_COLOR_LIST: string[] = [
   '#273352',
   '#ffffff',
+  '#191a23',
   '#001529',
   '#304156',
   '#28333E',

src/utils/file/FileDownload.ts

+import { dataURLtoBlob } from './stream';
+
+export function downloadByBase64(buf: string, filename: string, mime?: string, bom?: BlobPart) {
+  const base64Buf = dataURLtoBlob(buf);
+  downloadByData(base64Buf, filename, mime, bom);
+}
+
 /**
- * 根据后台接口文件流下载
+ * Download according to the background interface file stream
  * @param {*} data
  * @param {*} filename
  * @param {*} mime
@@ -27,7 +34,7 @@ export function downloadByData(data: BlobPart, filename: string, mime?: string,
 }
 
 /**
- * 根据文件地址下载文件
+ * Download file according to file address
  * @param {*} sUrl
  */
 export function downloadByUrl({
@@ -43,7 +50,7 @@ export function downloadByUrl({
   const isSafari = window.navigator.userAgent.toLowerCase().indexOf('safari') > -1;
 
   if (/(iP)/g.test(window.navigator.userAgent)) {
-    console.error('您的浏览器不支持下载!');
+    console.error('Your browser does not support download!');
     return false;
   }
   if (isChrome || isSafari) {

src/utils/file/stream.ts

+/**
+ * @description: base64 to blob
+ */
+export function dataURLtoBlob(base64Buf: string): Blob {
+  const arr = base64Buf.split(',');
+  const typeItem = arr[0];
+  const mime = typeItem.match(/:(.*?);/)![1];
+  const bstr = atob(arr[1]);
+  let n = bstr.length;
+  const u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new Blob([u8arr], { type: mime });
+}

src/views/demo/feat/download/index.vue

@@ -4,14 +4,16 @@
     <a-button type="primary" class="my-4" @click="handleDownByData"> 文件流下载 </a-button>
 
     <a-alert message="根据文件地址下载文件" />
-
     <a-button type="primary" class="my-4" @click="handleDownloadByUrl"> 文件地址下载 </a-button>
+
+    <a-alert message="base64流下载" />
+    <a-button type="primary" class="my-4" @click="handleDownloadByBase64"> base64流下载 </a-button>
   </div>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import { downloadByUrl, downloadByData } from '/@/utils/file/FileDownload';
-
+  import { downloadByUrl, downloadByData, downloadByBase64 } from '/@/utils/file/FileDownload';
+  import imgBase64 from './imgBase64';
   export default defineComponent({
     setup() {
       function handleDownByData() {
@@ -23,9 +25,14 @@
           target: '_self',
         });
       }
+
+      function handleDownloadByBase64() {
+        downloadByBase64(imgBase64, 'logo.png');
+      }
       return {
         handleDownloadByUrl,
         handleDownByData,
+        handleDownloadByBase64,
       };
     },
   });