refactor: use uni-app framework (#55)

* update framework to uni-app * fix: bug fix * fix: bug fix * 修改输出路径 * feat: publicPath * feat: manifest update * fix: cssEditor theme * fix: style * style: format code with prettier * fix: table style & copy style on the night mode * fix: upload image * fix: style Co-authored-by: yanglbme <szuyanglb@outlook.com>
2024-11-24 19:10:34 +08:00 · 2021-02-28 14:50:52 +08:00 · 2021-02-28 14:50:52 +08:00 · b50ae32834
commit b50ae32834
parent 432db15576
41 changed files with 28044 additions and 16714 deletions
--- a/.automator/h5/.automator.json
+++ b/.automator/h5/.automator.json
--- a/.browserslistrc
+++ b/.browserslistrc
@ -1,2 +0,0 @@
-> 1%
-last 2 versions
--- a/.editorconfig
+++ b/.editorconfig
@ -1,5 +1,18 @@
-[*.{js,jsx,ts,tsx,vue}]
+# https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
 indent_style = space
-indent_size = 4
-trim_trailing_whitespace = true
 insert_final_newline = true
+max_line_length = 80
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false
+
+[COMMIT_EDITMSG]
+max_line_length = 0
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,27 +1,27 @@
 module.exports = {
-    root: true,
-    env: {
-        node: true,
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: ["plugin:vue/essential", "@vue/standard"],
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
+    camelcase: "off",
+    eqeqeq: "off",
+  },
+  parserOptions: {
+    parser: "babel-eslint",
+  },
+  overrides: [
+    {
+      files: [
+        "**/__tests__/*.{j,t}s?(x)",
+        "**/tests/unit/**/*.spec.{j,t}s?(x)",
+      ],
+      env: {
+        jest: true,
+      },
    },
-    extends: ["plugin:vue/essential", "@vue/standard"],
-    rules: {
-        "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-        "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
-        camelcase: "off",
-        eqeqeq: "off",
-    },
-    parserOptions: {
-        parser: "babel-eslint",
-    },
-    overrides: [
-        {
-            files: [
-                "**/__tests__/*.{j,t}s?(x)",
-                "**/tests/unit/**/*.spec.{j,t}s?(x)",
-            ],
-            env: {
-                jest: true,
-            },
-        },
-    ],
+  ],
 };
--- a/babel.config.js
+++ b/babel.config.js
@ -1,3 +1,60 @@
+const plugins = [];
+
+if (process.env.UNI_OPT_TREESHAKINGNG) {
+  plugins.push(
+    require("@dcloudio/vue-cli-plugin-uni-optimize/packages/babel-plugin-uni-api/index.js")
+  );
+}
+
+if (
+  (process.env.UNI_PLATFORM === "app-plus" && process.env.UNI_USING_V8) ||
+  (process.env.UNI_PLATFORM === "h5" &&
+    process.env.UNI_H5_BROWSER === "builtin")
+) {
+  const path = require("path");
+
+  const isWin = /^win/.test(process.platform);
+
+  const normalizePath = (path) => (isWin ? path.replace(/\\/g, "/") : path);
+
+  const input = normalizePath(process.env.UNI_INPUT_DIR);
+  try {
+    plugins.push([
+      require("@dcloudio/vue-cli-plugin-hbuilderx/packages/babel-plugin-console"),
+      {
+        file(file) {
+          file = normalizePath(file);
+          if (file.indexOf(input) === 0) {
+            return path.relative(input, file);
+          }
+          return false;
+        },
+      },
+    ]);
+  } catch (e) {}
+}
+
+process.UNI_LIBRARIES = process.UNI_LIBRARIES || ["@dcloudio/uni-ui"];
+process.UNI_LIBRARIES.forEach((libraryName) => {
+  plugins.push([
+    "import",
+    {
+      libraryName: libraryName,
+      customName: (name) => {
+        return `${libraryName}/lib/${name}/${name}`;
+      },
+    },
+  ]);
+});
 module.exports = {
-    presets: ["@vue/cli-plugin-babel/preset"],
+  presets: [
+    [
+      "@vue/app",
+      {
+        modules: "commonjs",
+        useBuiltIns: process.env.UNI_PLATFORM === "h5" ? "usage" : "entry",
+      },
+    ],
+  ],
+  plugins,
 };
--- a/jest.config.js
+++ b/jest.config.js
@ -1,3 +0,0 @@
-module.exports = {
-    preset: "@vue/cli-plugin-unit-jest",
-};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,53 +1,112 @@
 {
-  "name": "vue-md",
-  "version": "1.4.7",
-  "homepage": ".",
-  "description": "An open-source wechat markdown editor.",
-  "author": "doocs",
+  "name": "md",
+  "version": "1.5.0",
+  "private": true,
  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "test:unit": "vue-cli-service test:unit"
+    "serve": "npm run dev:h5",
+    "build": "npm run build:h5",
+    "build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
+    "build:custom": "cross-env NODE_ENV=production uniapp-cli custom",
+    "build:h5": "cross-env NODE_ENV=production UNI_OUTPUT_DIR=dist UNI_PLATFORM=h5 vue-cli-service uni-build",
+    "build:mp-360": "cross-env NODE_ENV=production UNI_PLATFORM=mp-360 vue-cli-service uni-build",
+    "build:mp-alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build",
+    "build:mp-baidu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build",
+    "build:mp-kuaishou": "cross-env NODE_ENV=production UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build",
+    "build:mp-qq": "cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build",
+    "build:mp-toutiao": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build",
+    "build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
+    "build:quickapp-native": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-native vue-cli-service uni-build",
+    "build:quickapp-webview": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview vue-cli-service uni-build",
+    "build:quickapp-webview-huawei": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build",
+    "build:quickapp-webview-union": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build",
+    "dev:app-plus": "cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch",
+    "dev:custom": "cross-env NODE_ENV=development uniapp-cli custom",
+    "dev:h5": "cross-env NODE_ENV=development UNI_OUTPUT_DIR=dist UNI_PLATFORM=h5 vue-cli-service uni-serve",
+    "dev:mp-360": "cross-env NODE_ENV=development UNI_PLATFORM=mp-360 vue-cli-service uni-build --watch",
+    "dev:mp-alipay": "cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch",
+    "dev:mp-baidu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",
+    "dev:mp-kuaishou": "cross-env NODE_ENV=development UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build --watch",
+    "dev:mp-qq": "cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch",
+    "dev:mp-toutiao": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",
+    "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
+    "dev:quickapp-native": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-native vue-cli-service uni-build --watch",
+    "dev:quickapp-webview": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview vue-cli-service uni-build --watch",
+    "dev:quickapp-webview-huawei": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build --watch",
+    "dev:quickapp-webview-union": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build --watch",
+    "info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js",
+    "serve:quickapp-native": "node node_modules/@dcloudio/uni-quickapp-native/bin/serve.js",
+    "test:android": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=android jest -i",
+    "test:h5": "cross-env UNI_PLATFORM=h5 jest -i",
+    "test:ios": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=ios jest -i",
+    "test:mp-baidu": "cross-env UNI_PLATFORM=mp-baidu jest -i",
+    "test:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin jest -i"
  },
  "dependencies": {
+    "@dcloudio/uni-app-plus": "^2.0.0-30720210122002",
+    "@dcloudio/uni-h5": "^2.0.0-30720210122002",
+    "@dcloudio/uni-helper-json": "*",
+    "@dcloudio/uni-mp-360": "^2.0.0-30720210122002",
+    "@dcloudio/uni-mp-alipay": "^2.0.0-30720210122002",
+    "@dcloudio/uni-mp-baidu": "^2.0.0-30720210122002",
+    "@dcloudio/uni-mp-qq": "^2.0.0-30720210122002",
+    "@dcloudio/uni-mp-toutiao": "^2.0.0-30720210122002",
+    "@dcloudio/uni-mp-vue": "^2.0.0-30720210122002",
+    "@dcloudio/uni-mp-weixin": "^2.0.0-30720210122002",
+    "@dcloudio/uni-quickapp-native": "^2.0.0-30720210122002",
+    "@dcloudio/uni-quickapp-webview": "^2.0.0-30720210122002",
+    "@dcloudio/uni-stat": "^2.0.0-30720210122002",
+    "@vue/shared": "^3.0.0",
    "ali-oss": "^6.11.2",
    "axios": "^0.21.0",
    "buffer-from": "^1.1.1",
    "codemirror": "^5.58.3",
-    "core-js": "^3.7.0",
+    "core-js": "^3.8.3",
    "cos-js-sdk-v5": "^1.1.0",
    "crypto-js": "^4.0.0",
    "element-ui": "^2.14.1",
+    "flyio": "^0.6.2",
    "jquery": "^3.5.1",
    "juice": "^7.0.0",
-    "less": "^3.12.2",
    "marked": "^2.0.0",
    "prettier": "^2.2.0",
    "prettify": "^0.1.7",
    "qiniu-js": "^3.1.2",
+    "regenerator-runtime": "^0.12.1",
    "uuid": "^8.3.1",
    "vue": "^2.6.12",
    "vue-router": "^3.4.9",
    "vuex": "^3.5.1"
  },
  "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.9",
-    "@vue/cli-plugin-eslint": "^4.5.9",
-    "@vue/cli-plugin-unit-jest": "^4.5.9",
-    "@vue/cli-service": "^4.5.9",
-    "@vue/eslint-config-standard": "^5.1.2",
-    "@vue/test-utils": "1.1.1",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^7.14.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^5.0.0",
-    "eslint-plugin-vue": "^7.1.0",
-    "less-loader": "^7.1.0",
-    "node-sass": "^5.0.0",
-    "sass-loader": "^10.1.0",
-    "vue-template-compiler": "^2.6.12"
+    "@dcloudio/types": "*",
+    "@dcloudio/uni-automator": "^2.0.0-30720210122002",
+    "@dcloudio/uni-cli-shared": "^2.0.0-30720210122002",
+    "@dcloudio/uni-migration": "^2.0.0-30720210122002",
+    "@dcloudio/uni-template-compiler": "^2.0.0-30720210122002",
+    "@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.0-30720210122002",
+    "@dcloudio/vue-cli-plugin-uni": "^2.0.0-30720210122002",
+    "@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.0-30720210122002",
+    "@dcloudio/webpack-uni-mp-loader": "^2.0.0-30720210122002",
+    "@dcloudio/webpack-uni-pages-loader": "^2.0.0-30720210122002",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "async-validator": "^1.11.5",
+    "babel-plugin-import": "^1.11.0",
+    "cross-env": "^7.0.2",
+    "jest": "^25.4.0",
+    "less": "^3.12.2",
+    "less-loader": "^5.0.0",
+    "mini-types": "*",
+    "miniprogram-api-typings": "*",
+    "postcss-comment": "^2.0.0",
+    "sass-loader": "^11.0.1",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "browserslist": [
+    "Android >= 4",
+    "ios >= 8"
+  ],
+  "uni-app": {
+    "scripts": {}
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,22 @@
+const path = require("path");
+module.exports = {
+  parser: require("postcss-comment"),
+  plugins: [
+    require("postcss-import")({
+      resolve(id, basedir, importOptions) {
+        if (id.startsWith("~@/")) {
+          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3));
+        } else if (id.startsWith("@/")) {
+          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2));
+        } else if (id.startsWith("/") && !id.startsWith("//")) {
+          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1));
+        }
+        return id;
+      },
+    }),
+    require("autoprefixer")({
+      remove: process.env.UNI_PLATFORM !== "h5",
+    }),
+    require("@dcloudio/vue-cli-plugin-uni/packages/postcss"),
+  ],
+};
--- a/public/index.html
+++ b/public/index.html
@ -1,33 +1,29 @@
 <!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <meta
-      name="keywords"
-      content="md,markdown,markdown-editor,wechat,official-account,yanglbme,doocs"
-    />
-    <meta
-      name="description"
-      content="Wechat Markdown Editor | 一款高度简洁的微信 Markdown 编辑器"
-    />
-    <meta
-      name="viewport"
-      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
-    />
-    <title>微信 Markdown 编辑器</title>
-    <link
-      rel="shortcut icon"
-      href="https://gitee.com/yanglbme/resource/raw/master/doocs-md/favicon.png"
-    />
-    <link
-      rel="apple-touch-icon-precomposed"
-      href="https://gitee.com/yanglbme/resource/raw/master/doocs-md/qrcode.png"
-    />
-    <script src="https://cdn.bootcdn.net/ajax/libs/prettify/r224/prettify.min.js"></script>
-  </head>
+<html lang="zh-CN">

-  <body>
-    <div id="app"></div>
-  </body>
-</html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="keywords" content="md,markdown,markdown-editor,wechat,official-account,yanglbme,doocs" />
+  <meta name="description" content="Wechat Markdown Editor | 一款高度简洁的微信 Markdown 编辑器" />
+  <meta name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
+  <!-- <title>
+            <%= htmlWebpackPlugin.options.title %>
+        </title> -->
+  <title>微信 Markdown 编辑器</title>
+  <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
+  <link rel="shortcut icon" href="https://gitee.com/yanglbme/resource/raw/master/doocs-md/favicon.png" />
+  <link rel="apple-touch-icon-precomposed" href="https://gitee.com/yanglbme/resource/raw/master/doocs-md/qrcode.png" />
+  <script src="https://cdn.bootcdn.net/ajax/libs/prettify/r224/prettify.min.js"></script>
+</head>
+
+<body>
+  <noscript>
+    <strong>Please enable JavaScript to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>
--- a/src/App.vue
+++ b/src/App.vue
@ -1,43 +1,76 @@
-<template>
-    <transition name="fade" v-if="loading">
-        <loading />
-    </transition>
-    <codemirror-editor v-else />
-</template>
-
 <script>
-import Loading from "./components/Loading";
-import CodemirrorEditor from "./view/CodemirrorEditor";
 export default {
-    name: "App",
-    components: {
-        Loading,
-        CodemirrorEditor,
-    },
-    data() {
-        return {
-            loading: true,
-        };
-    },
-    mounted() {
-        setTimeout(() => {
-            this.loading = false;
-        }, 100);
-    },
+  onLaunch: function () {
+    console.log("App Launch");
+  },
+  onShow: function () {
+    console.log("App Show");
+  },
+  onHide: function () {
+    console.log("App Hide");
+  },
 };
 </script>

-<style lang="scss" scoped>
-.fade-enter,
-.fade-leave-to {
-    opacity: 0;
+<style lang="less">
+/* 每个页面公共css */
+@import url("./assets/less/style-mirror.css");
+@import url("./assets/less/theme.less");
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  background-color: #fff;
 }
-.fade-enter-to,
-.fade-leave {
-    opacity: 1;
+
+::-webkit-scrollbar-track {
+  border-radius: 6px;
+  background-color: rgba(200, 200, 200, 0.3);
 }
-.fade-enter-active,
-.fade-leave-active {
-    transition: all 1s;
+
+::-webkit-scrollbar-thumb {
+  border-radius: 6px;
+  background-color: rgba(144, 146, 152, 0.5);
+  transition: background-color 0.3s;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(144, 146, 152, 0.5);
+}
+/* CSS-hints */
+.CodeMirror-hints {
+  position: absolute;
+  z-index: 10;
+  overflow: hidden;
+  list-style: none;
+
+  margin: 0;
+  padding: 2px;
+
+  border-radius: 4px;
+  background-color: #ffffff;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+  min-width: 200px;
+  font-size: 12px;
+  font-family: monospace;
+
+  max-height: 20em;
+  overflow-y: auto;
+  color: #333333;
+}
+
+.CodeMirror-hint {
+  margin: 0;
+  margin-top: 10px;
+  padding: 4px 6px;
+  border-radius: 2px;
+  white-space: pre;
+  color: black;
+  cursor: pointer;
+}
+.CodeMirror-hint:first-of-type {
+  margin-top: 0;
+}
+.CodeMirror-hint:hover {
+  background: #f0f0f0;
 }
 </style>
--- a/src/api/config.js
+++ b/src/api/config.js
@ -1,55 +1,55 @@
 const githubConfig = {
-    username: "filess",
-    repoList: Array.from(
-        [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
-        (e) => `img${e}`
-    ),
-    branch: "main",
-    accessTokenList: [
-        "7715d7ca67b5d3837cfdoocsmde8c38421815aa423510af",
-        "c411415bf95dbe39625doocsmd5047ba9b7a2a6c9642abe",
-        "2821cd8819fa345c053doocsmdca86ac653f8bc20db1f1b",
-        "445f0dae46ef1f2a4d6doocsmdc797301e94797b4750a4c",
-        "cc1d0c1426d0fd0902bdoocsmdd2d7184b14da61b86ec46",
-        "b67e9d15cb6f910492fdoocsmdac6b44d379c953bb19eff",
-        "618c4dc2244ccbbc088doocsmd125d17fd31b7d06a50cf3",
-        "a4b581732e1c1507458doocsmdc5b223b27dae5e2e16a55",
-        "77904db41aee57ad79bdoocsmd760f848201dac9c96fd5e",
-        "02f251cb14ac62ab100doocsmdddbfc8527d773f1f04ce1",
-        "eb321079a95ba7028d9doocsmde2e84c502dac70de7cf08",
-        "22f74fcfb071a961fa2doocsmde28dabc746f0503a15e5d",
-        "85124c2bfe7abba0938doocsmd0af7f67918b99d085a5fd",
-        "0a561b4d4bbecb2de7edoocsmdd9ba3833d11dbc5e430f5",
-        "e8a01491188d8d5a097doocsmd03ede0aad1fe9e3af24e9",
-        "36e1f420d7e5bdebd67doocsmd65463562f5f25b20b8377",
-    ],
+  username: "filess",
+  repoList: Array.from(
+    [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
+    (e) => `img${e}`
+  ),
+  branch: "main",
+  accessTokenList: [
+    "7715d7ca67b5d3837cfdoocsmde8c38421815aa423510af",
+    "c411415bf95dbe39625doocsmd5047ba9b7a2a6c9642abe",
+    "2821cd8819fa345c053doocsmdca86ac653f8bc20db1f1b",
+    "445f0dae46ef1f2a4d6doocsmdc797301e94797b4750a4c",
+    "cc1d0c1426d0fd0902bdoocsmdd2d7184b14da61b86ec46",
+    "b67e9d15cb6f910492fdoocsmdac6b44d379c953bb19eff",
+    "618c4dc2244ccbbc088doocsmd125d17fd31b7d06a50cf3",
+    "a4b581732e1c1507458doocsmdc5b223b27dae5e2e16a55",
+    "77904db41aee57ad79bdoocsmd760f848201dac9c96fd5e",
+    "02f251cb14ac62ab100doocsmdddbfc8527d773f1f04ce1",
+    "eb321079a95ba7028d9doocsmde2e84c502dac70de7cf08",
+    "22f74fcfb071a961fa2doocsmde28dabc746f0503a15e5d",
+    "85124c2bfe7abba0938doocsmd0af7f67918b99d085a5fd",
+    "0a561b4d4bbecb2de7edoocsmdd9ba3833d11dbc5e430f5",
+    "e8a01491188d8d5a097doocsmd03ede0aad1fe9e3af24e9",
+    "36e1f420d7e5bdebd67doocsmd65463562f5f25b20b8377",
+  ],
 };

 const giteeConfig = {
-    username: "filesss",
-    repoList: Array.from(
-        [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
-        (e) => `img${e}`
-    ),
-    branch: "main",
-    accessTokenList: [
-        "ed5fc9866bd6c2fdoocsmddd433f806fd2f399c",
-        "5448ffebbbf1151doocsmdc4e337cf814fc8a62",
-        "25b05efd2557ca2doocsmd75b5c0835e3395911",
-        "11628c7a5aef015doocsmd2eeff9fb9566f0458",
-        "cb2f5145ed938dedoocsmdbd063b4ed244eecf8",
-        "d8c0b57500672c1doocsmd55f48b866b5ebcd98",
-        "78c56eadb88e453doocsmd43ddd95753351771a",
-        "03e1a688003948fdoocsmda16fcf41e6f03f1f0",
-        "c49121cf4d191fbdoocsmdd6a7877ed537e474a",
-        "adfeb2fadcdc4aadoocsmdfe1ee869ac9c968ff",
-        "116c94549ca4a0ddoocsmd192653af5c0694616",
-        "ecf30ed7f2eb184doocsmd51ea4ec8300371d9e",
-        "5837cf2bd5afd93doocsmd73904bed31934949e",
-        "b5b7e1c7d57e01fdoocsmd5266f552574297d78",
-        "684d55564ffbd0bdoocsmd7d747e5cc23aed6d6",
-        "3fc04a9d272ab71doocsmd010c56cb57d88d2ba",
-    ],
+  username: "filesss",
+  repoList: Array.from(
+    [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
+    (e) => `img${e}`
+  ),
+  branch: "main",
+  accessTokenList: [
+    "ed5fc9866bd6c2fdoocsmddd433f806fd2f399c",
+    "5448ffebbbf1151doocsmdc4e337cf814fc8a62",
+    "25b05efd2557ca2doocsmd75b5c0835e3395911",
+    "11628c7a5aef015doocsmd2eeff9fb9566f0458",
+    "cb2f5145ed938dedoocsmdbd063b4ed244eecf8",
+    "d8c0b57500672c1doocsmd55f48b866b5ebcd98",
+    "78c56eadb88e453doocsmd43ddd95753351771a",
+    "03e1a688003948fdoocsmda16fcf41e6f03f1f0",
+    "c49121cf4d191fbdoocsmdd6a7877ed537e474a",
+    "adfeb2fadcdc4aadoocsmdfe1ee869ac9c968ff",
+    "116c94549ca4a0ddoocsmd192653af5c0694616",
+    "ecf30ed7f2eb184doocsmd51ea4ec8300371d9e",
+    "5837cf2bd5afd93doocsmd73904bed31934949e",
+    "b5b7e1c7d57e01fdoocsmd5266f552574297d78",
+    "684d55564ffbd0bdoocsmd7d747e5cc23aed6d6",
+    "3fc04a9d272ab71doocsmd010c56cb57d88d2ba",
+  ],
 };

 export { githubConfig, giteeConfig };
--- a/src/api/fetch.js
+++ b/src/api/fetch.js
@ -2,29 +2,29 @@ import axios from "axios";

 // 创建axios实例
 const service = axios.create({
-    baseURL: "",
-    timeout: 10 * 1000, // 请求超时时间
+  baseURL: "",
+  timeout: 10 * 1000, // 请求超时时间
 });

 service.interceptors.request.use(
-    (config) => {
-        if (/^(post)|(put)|(delete)$/i.test(config.method)) {
-            if (config.data && config.data.upload) {
-                config.headers["Content-Type"] = "multipart/form-data";
-            }
-        }
-        return config;
-    },
-    (error) => {
-        Promise.reject(error);
+  (config) => {
+    if (/^(post)|(put)|(delete)$/i.test(config.method)) {
+      if (config.data && config.data.upload) {
+        config.headers["Content-Type"] = "multipart/form-data";
+      }
    }
+    return config;
+  },
+  (error) => {
+    Promise.reject(error);
+  }
 );

 service.interceptors.response.use(
-    (res) => {
-        return res.data ? res.data : Promise.reject(res);
-    },
-    (error) => Promise.reject(error)
+  (res) => {
+    return res.data ? res.data : Promise.reject(res);
+  },
+  (error) => Promise.reject(error)
 );

 export default service;
--- a/src/api/file.js
+++ b/src/api/file.js
@ -9,51 +9,51 @@ import * as qiniu from "qiniu-js";
 import { utf16to8, base64encode, safe64 } from "../assets/scripts/tokenTools";

 function getConfig(useDefault, platform) {
-    if (useDefault) {
-        // load default config file
-        const config = platform === "github" ? githubConfig : giteeConfig;
-        const { username, repoList, branch, accessTokenList } = config;
+  if (useDefault) {
+    // load default config file
+    const config = platform === "github" ? githubConfig : giteeConfig;
+    const { username, repoList, branch, accessTokenList } = config;

-        // choose random token from access_token list
-        const tokenIndex = Math.floor(Math.random() * accessTokenList.length);
-        const accessToken = accessTokenList[tokenIndex].replace("doocsmd", "");
+    // choose random token from access_token list
+    const tokenIndex = Math.floor(Math.random() * accessTokenList.length);
+    const accessToken = accessTokenList[tokenIndex].replace("doocsmd", "");

-        // choose random repo from repo list
-        const repoIndex = Math.floor(Math.random() * repoList.length);
-        const repo = repoList[repoIndex];
+    // choose random repo from repo list
+    const repoIndex = Math.floor(Math.random() * repoList.length);
+    const repo = repoList[repoIndex];

-        return { username, repo, branch, accessToken };
-    }
+    return { username, repo, branch, accessToken };
+  }

-    // load configuration from localStorage
-    const customConfig = JSON.parse(localStorage.getItem(`${platform}Config`));
+  // load configuration from localStorage
+  const customConfig = JSON.parse(localStorage.getItem(`${platform}Config`));

-    // split username/repo
-    const repoUrl = customConfig.repo
-        .replace(`https://${platform}.com/`, "")
-        .replace(`http://${platform}.com/`, "")
-        .replace(`${platform}.com/`, "")
-        .split("/");
-    return {
-        username: repoUrl[0],
-        repo: repoUrl[1],
-        branch: customConfig.branch || "master",
-        accessToken: customConfig.accessToken,
-    };
+  // split username/repo
+  const repoUrl = customConfig.repo
+    .replace(`https://${platform}.com/`, "")
+    .replace(`http://${platform}.com/`, "")
+    .replace(`${platform}.com/`, "")
+    .split("/");
+  return {
+    username: repoUrl[0],
+    repo: repoUrl[1],
+    branch: customConfig.branch || "master",
+    accessToken: customConfig.accessToken,
+  };
 }

 function getDir() {
-    const date = new Date();
-    const year = date.getFullYear();
-    const month = (date.getMonth() + 1).toString().padStart(2, "0");
-    const day = date.getDate().toString().padStart(2, "0");
-    return `${year}/${month}/${day}`;
+  const date = new Date();
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString().padStart(2, "0");
+  const day = date.getDate().toString().padStart(2, "0");
+  return `${year}/${month}/${day}`;
 }

 function getDateFilename(filename) {
-    const currentTimestamp = new Date().getTime();
-    const fileSuffix = filename.split(".")[1];
-    return `${currentTimestamp}-${uuidv4()}.${fileSuffix}`;
+  const currentTimestamp = new Date().getTime();
+  const fileSuffix = filename.split(".")[1];
+  return `${currentTimestamp}-${uuidv4()}.${fileSuffix}`;
 }

 //-----------------------------------------------------------------------
@ -61,32 +61,32 @@ function getDateFilename(filename) {
 //-----------------------------------------------------------------------

 async function ghFileUpload(content, filename) {
-    const useDefault = localStorage.getItem("imgHost") === "default";
-    const { username, repo, branch, accessToken } = getConfig(
-        useDefault,
-        "github"
-    );
-    const dir = getDir();
-    const url = `https://api.github.com/repos/${username}/${repo}/contents/${dir}/`;
-    const dateFilename = getDateFilename(filename);
-    const res = await fetch({
-        url: url + dateFilename,
-        method: "put",
-        headers: {
-            Authorization: `token ${accessToken}`,
-        },
-        data: {
-            content,
-            branch,
-            message: `Upload by ${window.location.href}`,
-        },
-    });
+  const useDefault = localStorage.getItem("imgHost") === "default";
+  const { username, repo, branch, accessToken } = getConfig(
+    useDefault,
+    "github"
+  );
+  const dir = getDir();
+  const url = `https://api.github.com/repos/${username}/${repo}/contents/${dir}/`;
+  const dateFilename = getDateFilename(filename);
+  const res = await fetch({
+    url: url + dateFilename,
+    method: "put",
+    headers: {
+      Authorization: `token ${accessToken}`,
+    },
+    data: {
+      content,
+      branch,
+      message: `Upload by ${window.location.href}`,
+    },
+  });

-    const githubResourceUrl = `raw.githubusercontent.com/${username}/${repo}/${branch}/`;
-    const cdnResourceUrl = `cdn.jsdelivr.net/gh/${username}/${repo}@${branch}/`;
-    return useDefault
-        ? res.content.download_url.replace(githubResourceUrl, cdnResourceUrl)
-        : res.content.download_url;
+  const githubResourceUrl = `raw.githubusercontent.com/${username}/${repo}/${branch}/`;
+  const cdnResourceUrl = `cdn.jsdelivr.net/gh/${username}/${repo}@${branch}/`;
+  return useDefault
+    ? res.content.download_url.replace(githubResourceUrl, cdnResourceUrl)
+    : res.content.download_url;
 }

 //-----------------------------------------------------------------------
@ -94,25 +94,25 @@ async function ghFileUpload(content, filename) {
 //-----------------------------------------------------------------------

 async function giteeUpload(content, filename) {
-    const useDefault = localStorage.getItem("imgHost") === "default";
-    const { username, repo, branch, accessToken } = getConfig(
-        useDefault,
-        "gitee"
-    );
-    const dir = getDir();
-    const dateFilename = getDateFilename(filename);
-    const url = `https://gitee.com/api/v5/repos/${username}/${repo}/contents/${dir}/${dateFilename}`;
-    const res = await fetch({
-        url,
-        method: "POST",
-        data: {
-            content,
-            branch,
-            access_token: accessToken,
-            message: `Upload by ${window.location.href}`,
-        },
-    });
-    return encodeURI(res.content.download_url);
+  const useDefault = localStorage.getItem("imgHost") === "default";
+  const { username, repo, branch, accessToken } = getConfig(
+    useDefault,
+    "gitee"
+  );
+  const dir = getDir();
+  const dateFilename = getDateFilename(filename);
+  const url = `https://gitee.com/api/v5/repos/${username}/${repo}/contents/${dir}/${dateFilename}`;
+  const res = await fetch({
+    url,
+    method: "POST",
+    data: {
+      content,
+      branch,
+      access_token: accessToken,
+      message: `Upload by ${window.location.href}`,
+    },
+  });
+  return encodeURI(res.content.download_url);
 }

 //-----------------------------------------------------------------------
@ -120,37 +120,37 @@ async function giteeUpload(content, filename) {
 //-----------------------------------------------------------------------

 function getQiniuToken(accessKey, secretKey, putPolicy) {
-    const policy = JSON.stringify(putPolicy);
-    const encoded = base64encode(utf16to8(policy));
-    const hash = CryptoJS.HmacSHA1(encoded, secretKey);
-    const encodedSigned = hash.toString(CryptoJS.enc.Base64);
-    return `${accessKey}:${safe64(encodedSigned)}:${encoded}`;
+  const policy = JSON.stringify(putPolicy);
+  const encoded = base64encode(utf16to8(policy));
+  const hash = CryptoJS.HmacSHA1(encoded, secretKey);
+  const encodedSigned = hash.toString(CryptoJS.enc.Base64);
+  return `${accessKey}:${safe64(encodedSigned)}:${encoded}`;
 }

 async function qiniuUpload(file) {
-    const { accessKey, secretKey, bucket, region, path, domain } = JSON.parse(
-        localStorage.getItem("qiniuConfig")
-    );
-    const token = getQiniuToken(accessKey, secretKey, {
-        scope: bucket,
-        deadline: Math.trunc(new Date().getTime() / 1000) + 3600,
-    });
-    const dir = path ? `${path}/` : "";
-    const dateFilename = dir + getDateFilename(file.name);
-    const observable = qiniu.upload(file, dateFilename, token, {}, { region });
-    return new Promise((resolve, reject) => {
-        observable.subscribe({
-            next: (result) => {
-                console.log(result);
-            },
-            error: (err) => {
-                reject(err.message);
-            },
-            complete: (result) => {
-                resolve(`${domain}/${result.key}`);
-            },
-        });
+  const { accessKey, secretKey, bucket, region, path, domain } = JSON.parse(
+    localStorage.getItem("qiniuConfig")
+  );
+  const token = getQiniuToken(accessKey, secretKey, {
+    scope: bucket,
+    deadline: Math.trunc(new Date().getTime() / 1000) + 3600,
+  });
+  const dir = path ? `${path}/` : "";
+  const dateFilename = dir + getDateFilename(file.name);
+  const observable = qiniu.upload(file, dateFilename, token, {}, { region });
+  return new Promise((resolve, reject) => {
+    observable.subscribe({
+      next: (result) => {
+        console.log(result);
+      },
+      error: (err) => {
+        reject(err.message);
+      },
+      complete: (result) => {
+        resolve(`${domain}/${result.key}`);
+      },
    });
+  });
 }

 //-----------------------------------------------------------------------
@ -158,30 +158,30 @@ async function qiniuUpload(file) {
 //-----------------------------------------------------------------------

 async function aliOSSFileUpload(content, filename) {
-    const dateFilename = getDateFilename(filename);
-    const {
-        region,
-        bucket,
-        accessKeyId,
-        accessKeySecret,
-        cdnHost,
-        path,
-    } = JSON.parse(localStorage.getItem("aliOSSConfig"));
-    const buffer = Buffer(content, "base64");
-    const dir = `${path}/${dateFilename}`;
-    const client = new OSS({
-        region,
-        bucket,
-        accessKeyId,
-        accessKeySecret,
-    });
-    try {
-        const res = await client.put(dir, buffer);
-        if (cdnHost == "") return res.url;
-        return `${cdnHost}/${path == "" ? dateFilename : dir}`;
-    } catch (e) {
-        return Promise.reject(e);
-    }
+  const dateFilename = getDateFilename(filename);
+  const {
+    region,
+    bucket,
+    accessKeyId,
+    accessKeySecret,
+    cdnHost,
+    path,
+  } = JSON.parse(localStorage.getItem("aliOSSConfig"));
+  const buffer = Buffer(content, "base64");
+  const dir = `${path}/${dateFilename}`;
+  const client = new OSS({
+    region,
+    bucket,
+    accessKeyId,
+    accessKeySecret,
+  });
+  try {
+    const res = await client.put(dir, buffer);
+    if (cdnHost == "") return res.url;
+    return `${cdnHost}/${path == "" ? dateFilename : dir}`;
+  } catch (e) {
+    return Promise.reject(e);
+  }
 }

 //-----------------------------------------------------------------------
@ -189,61 +189,61 @@ async function aliOSSFileUpload(content, filename) {
 //-----------------------------------------------------------------------

 async function txCOSFileUpload(file) {
-    const dateFilename = getDateFilename(file.name);
-    const { secretId, secretKey, bucket, region, path, cdnHost } = JSON.parse(
-        localStorage.getItem("txCOSConfig")
+  const dateFilename = getDateFilename(file.name);
+  const { secretId, secretKey, bucket, region, path, cdnHost } = JSON.parse(
+    localStorage.getItem("txCOSConfig")
+  );
+  const cos = new COS({
+    SecretId: secretId,
+    SecretKey: secretKey,
+  });
+  return new Promise((resolve, reject) => {
+    cos.putObject(
+      {
+        Bucket: bucket,
+        Region: region,
+        Key: `${path}/${dateFilename}`,
+        Body: file,
+      },
+      function (err, data) {
+        if (err) {
+          reject(err);
+        } else if (cdnHost) {
+          resolve(
+            path == ""
+              ? `${cdnHost}/${dateFilename}`
+              : `${cdnHost}/${path}/${dateFilename}`
+          );
+        } else {
+          resolve(`https://${data.Location}`);
+        }
+      }
    );
-    const cos = new COS({
-        SecretId: secretId,
-        SecretKey: secretKey,
-    });
-    return new Promise((resolve, reject) => {
-        cos.putObject(
-            {
-                Bucket: bucket,
-                Region: region,
-                Key: `${path}/${dateFilename}`,
-                Body: file,
-            },
-            function (err, data) {
-                if (err) {
-                    reject(err);
-                } else if (cdnHost) {
-                    resolve(
-                        path == ""
-                            ? `${cdnHost}/${dateFilename}`
-                            : `${cdnHost}/${path}/${dateFilename}`
-                    );
-                } else {
-                    resolve(`https://${data.Location}`);
-                }
-            }
-        );
-    });
+  });
 }

 function fileUpload(content, file) {
-    const imgHost = localStorage.getItem("imgHost");
-    !imgHost && localStorage.setItem("imgHost", "default");
-    switch (imgHost) {
-        case "aliOSS":
-            return aliOSSFileUpload(content, file.name);
-        case "txCOS":
-            return txCOSFileUpload(file);
-        case "qiniu":
-            return qiniuUpload(file);
-        case "gitee":
-            return giteeUpload(content, file.name);
-        case "github":
-            return ghFileUpload(content, file.name);
-        default:
-            // return file.size / 1024 < 1024
-            //     ? giteeUpload(content, file.name)
-            //     : ghFileUpload(content, file.name);
-            return ghFileUpload(content, file.name);
-    }
+  const imgHost = localStorage.getItem("imgHost");
+  !imgHost && localStorage.setItem("imgHost", "default");
+  switch (imgHost) {
+    case "aliOSS":
+      return aliOSSFileUpload(content, file.name);
+    case "txCOS":
+      return txCOSFileUpload(file);
+    case "qiniu":
+      return qiniuUpload(file);
+    case "gitee":
+      return giteeUpload(content, file.name);
+    case "github":
+      return ghFileUpload(content, file.name);
+    default:
+      // return file.size / 1024 < 1024
+      //     ? giteeUpload(content, file.name)
+      //     : ghFileUpload(content, file.name);
+      return ghFileUpload(content, file.name);
+  }
 }

 export default {
-    fileUpload,
+  fileUpload,
 };
--- a/src/assets/less/app.less
+++ b/src/assets/less/app.less
@ -41,14 +41,6 @@ body {
  flex-direction: column;
 }

-.top {
-  height: 60px;
-  padding: 10px 20px;
-  display: flex;
-  align-items: center;
-  margin-right: 20px;
-}
-
 .web-title {
  margin: 0 15px 0 5px;
 }
@ -75,7 +67,6 @@ section {
  display: flex;
  flex-direction: column;
  padding-top: 0;
-  padding-bottom: 10px;
 }

 .ctrl {
@ -92,8 +83,8 @@ section {
  align-items: center;
  justify-content: center;
  display: flex;
-  overflow: scroll;
  word-break: break-all;
+  overflow-y: scroll;
 }

 .main-section {
@ -107,6 +98,7 @@ section {
 }

 .preview {
+  position: relative;
  margin: 0 -20px;
  width: 375px;
  padding: 20px;
@ -123,31 +115,6 @@ section {
  width: 100% !important;
 }

-/* 
-.preview table tr:nth-child(even){
-  background: rgb(250, 250, 250);
-}
- */
-.select-item-left {
-  float: left;
-}
-
-.select-item-right {
-  float: right;
-  color: #8492a6;
-  font-size: 13px;
-}
-
-.CodeMirror {
-  height: 100% !important;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-  font-size: 14px;
-  padding: 20px;
-  width: 100% !important;
-  font-family: "PingFang SC", BlinkMacSystemFont, Roboto, "Helvetica Neue",
-    sans-serif !important;
-}
-
 /* ele ui */
 .el-form-item {
  margin-bottom: 0 !important;
@ -157,33 +124,10 @@ section {
  cursor: pointer;
 }

-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-  background-color: #fff;
-}
-
-::-webkit-scrollbar-track {
-  border-radius: 6px;
-  background-color: rgba(200, 200, 200, 0.3);
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 6px;
-  background-color: rgba(144, 146, 152, 0.5);
-  transition: background-color 0.3s;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(144, 146, 152, 0.5);
-}
-
-.CodeMirror-vscrollbar:focus {
-  outline: none;
-}
-
-.CodeMirror-scroll,
-.preview-wrapper {
-  overflow: unset;
-  overflow-y: scroll;
+uni-page-body,
+uni-page-refresh {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
 }
--- a/src/assets/less/style-mirror.css
+++ b/src/assets/less/style-mirror.css
@ -9,13 +9,19 @@
 */

 .cm-s-style-mirror.CodeMirror {
-  background: #f5f5f5;
  color: #444;
  font-size: 16px;
-  padding: 20px;
  line-height: 25px;
 }

+.cm-s-style-mirror .CodeMirror-scroll {
+  padding: 20px;
+  width: 100%;
+  box-sizing: border-box;
+  overflow-x: hidden!important;
+  overflow-y: scroll!important;
+}
+
 .cm-s-style-mirror div.CodeMirror-selected {
  background: #e0e0e0;
 }
--- a/src/assets/less/theme.less
+++ b/src/assets/less/theme.less
@ -129,3 +129,32 @@
    background-color: @nightCodeMirrorColor;
  }
 }
+
+.CodeMirror {
+  padding-bottom: 0;
+  height: 100% !important;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  font-size: 14px;
+  font-family: "PingFang SC", BlinkMacSystemFont, Roboto, "Helvetica Neue",
+    sans-serif !important;
+}
+
+.CodeMirror-vscrollbar:focus {
+  outline: none;
+}
+
+.CodeMirror-scroll {
+  padding: 20px;
+  padding-bottom: 0px;
+  overflow-x: hidden !important;
+  overflow-y: scroll !important;
+}
+
+.CodeMirror-vscrollbar {
+  width: 0px;
+  height: 0px;
+}
+
+.codeMirror-wrapper {
+  height: 100% !important;
+}
--- a/src/assets/scripts/config.js
+++ b/src/assets/scripts/config.js
@ -1,74 +1,74 @@
 export default {
-    builtinFonts: [
-        {
-            label: "无衬线",
-            value:
-                "-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif",
-        },
-        {
-            label: "衬线",
-            value:
-                "Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif",
-        },
-    ],
-    sizeOption: [
-        {
-            label: "12px",
-            value: "12px",
-            desc: "更小",
-        },
-        {
-            label: "13px",
-            value: "13px",
-            desc: "稍小",
-        },
-        {
-            label: "14px",
-            value: "14px",
-            desc: "推荐",
-        },
-        {
-            label: "15px",
-            value: "15px",
-            desc: "稍大",
-        },
-        {
-            label: "16px",
-            value: "16px",
-            desc: "更大",
-        },
-    ],
-    colorOption: [
-        {
-            label: "经典蓝",
-            value: "rgba(15, 76, 129, 1)",
-            desc: "最新流行",
-        },
-        {
-            label: "翡翠绿",
-            value: "rgba(0, 152, 116, 1)",
-            desc: "优雅清新",
-        },
-        {
-            label: "活力橘",
-            value: "rgba(250, 81, 81, 1)",
-            desc: "热情活泼",
-        },
-    ],
-    codeThemeOption: [
-        {
-            label: "微信",
-            value: "wechat",
-            desc: "默认样式",
-        },
-        {
-            label: "GitHub",
-            value: "github",
-            desc: "精简风格",
-        },
-    ],
-    form: {
-        rows: 1,
-        cols: 1,
+  builtinFonts: [
+    {
+      label: "无衬线",
+      value:
+        "-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif",
    },
+    {
+      label: "衬线",
+      value:
+        "Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif",
+    },
+  ],
+  sizeOption: [
+    {
+      label: "12px",
+      value: "12px",
+      desc: "更小",
+    },
+    {
+      label: "13px",
+      value: "13px",
+      desc: "稍小",
+    },
+    {
+      label: "14px",
+      value: "14px",
+      desc: "推荐",
+    },
+    {
+      label: "15px",
+      value: "15px",
+      desc: "稍大",
+    },
+    {
+      label: "16px",
+      value: "16px",
+      desc: "更大",
+    },
+  ],
+  colorOption: [
+    {
+      label: "经典蓝",
+      value: "rgba(15, 76, 129, 1)",
+      desc: "最新流行",
+    },
+    {
+      label: "翡翠绿",
+      value: "rgba(0, 152, 116, 1)",
+      desc: "优雅清新",
+    },
+    {
+      label: "活力橘",
+      value: "rgba(250, 81, 81, 1)",
+      desc: "热情活泼",
+    },
+  ],
+  codeThemeOption: [
+    {
+      label: "微信",
+      value: "wechat",
+      desc: "默认样式",
+    },
+    {
+      label: "GitHub",
+      value: "github",
+      desc: "精简风格",
+    },
+  ],
+  form: {
+    rows: 1,
+    cols: 1,
+  },
 };
--- a/src/assets/scripts/converter.js
+++ b/src/assets/scripts/converter.js
@ -1,25 +1,25 @@
 import juice from "juice";

 export function solveWeChatImage() {
-    const clipboardDiv = document.getElementById("output");
-    const images = clipboardDiv.getElementsByTagName("img");
-    for (let i = 0; i < images.length; i++) {
-        const image = images[i];
-        const width = image.getAttribute("width");
-        const height = image.getAttribute("height");
-        image.removeAttribute("width");
-        image.removeAttribute("height");
-        image.style.width = width;
-        image.style.height = height;
-    }
+  const clipboardDiv = document.getElementById("output");
+  const images = clipboardDiv.getElementsByTagName("img");
+  for (let i = 0; i < images.length; i++) {
+    const image = images[i];
+    const width = image.getAttribute("width");
+    const height = image.getAttribute("height");
+    image.removeAttribute("width");
+    image.removeAttribute("height");
+    image.style.width = width;
+    image.style.height = height;
+  }
 }
 export function solveHtml() {
-    const element = document.getElementById("output-wrapper");
-    let html = element.innerHTML;
-    let res = "";
-    res = juice.inlineContent(html, {
-        inlinePseudoElements: true,
-        preserveImportant: true,
-    });
-    return res;
+  const element = document.getElementById("output-wrapper");
+  let html = element.innerHTML;
+  let res = "";
+  res = juice.inlineContent(html, {
+    inlinePseudoElements: true,
+    preserveImportant: true,
+  });
+  return res;
 }
--- a/src/assets/scripts/renderers/wx-renderer.js
+++ b/src/assets/scripts/renderers/wx-renderer.js
@ -1,73 +1,73 @@
 import marked from "marked";
 class WxRenderer {
-    constructor(opts) {
-        this.opts = opts;
-        let ENV_STRETCH_IMAGE = true;
+  constructor(opts) {
+    this.opts = opts;
+    let ENV_STRETCH_IMAGE = true;

-        let footnotes = [];
-        let footnoteIndex = 0;
-        let styleMapping = null;
+    let footnotes = [];
+    let footnoteIndex = 0;
+    let styleMapping = null;

-        const CODE_FONT_FAMILY =
-            "Menlo, Operator Mono, Consolas, Monaco, monospace";
+    const CODE_FONT_FAMILY =
+      "Menlo, Operator Mono, Consolas, Monaco, monospace";

-        let merge = (base, extend) => Object.assign({}, base, extend);
+    let merge = (base, extend) => Object.assign({}, base, extend);

-        this.buildTheme = (themeTpl) => {
-            let mapping = {};
-            let base = merge(themeTpl.BASE, {
-                "font-family": this.opts.fonts,
-                "font-size": this.opts.size,
-            });
-            let base_block = merge(base, {});
-            for (let ele in themeTpl.inline) {
-                if (themeTpl.inline.hasOwnProperty(ele)) {
-                    let style = themeTpl.inline[ele];
-                    mapping[ele] = merge(base, style);
-                }
-            }
+    this.buildTheme = (themeTpl) => {
+      let mapping = {};
+      let base = merge(themeTpl.BASE, {
+        "font-family": this.opts.fonts,
+        "font-size": this.opts.size,
+      });
+      let base_block = merge(base, {});
+      for (let ele in themeTpl.inline) {
+        if (themeTpl.inline.hasOwnProperty(ele)) {
+          let style = themeTpl.inline[ele];
+          mapping[ele] = merge(base, style);
+        }
+      }

-            for (let ele in themeTpl.block) {
-                if (themeTpl.block.hasOwnProperty(ele)) {
-                    let style = themeTpl.block[ele];
-                    if (ele === "code") {
-                        style["font-family"] = CODE_FONT_FAMILY;
-                    }
-                    mapping[ele] = merge(base_block, style);
-                }
-            }
-            return mapping;
-        };
+      for (let ele in themeTpl.block) {
+        if (themeTpl.block.hasOwnProperty(ele)) {
+          let style = themeTpl.block[ele];
+          if (ele === "code") {
+            style["font-family"] = CODE_FONT_FAMILY;
+          }
+          mapping[ele] = merge(base_block, style);
+        }
+      }
+      return mapping;
+    };

-        let getStyles = (tokenName, addition) => {
-            let arr = [];
-            let dict = styleMapping[tokenName];
-            if (!dict) return "";
-            for (const key in dict) {
-                arr.push(key + ":" + dict[key]);
-            }
-            return `style="${arr.join(";") + (addition || "")}"`;
-        };
+    let getStyles = (tokenName, addition) => {
+      let arr = [];
+      let dict = styleMapping[tokenName];
+      if (!dict) return "";
+      for (const key in dict) {
+        arr.push(key + ":" + dict[key]);
+      }
+      return `style="${arr.join(";") + (addition || "")}"`;
+    };

-        let addFootnote = (title, link) => {
-            footnotes.push([++footnoteIndex, title, link]);
-            return footnoteIndex;
-        };
+    let addFootnote = (title, link) => {
+      footnotes.push([++footnoteIndex, title, link]);
+      return footnoteIndex;
+    };

-        this.buildFootnotes = () => {
-            let footnoteArray = footnotes.map((x) => {
-                if (x[1] === x[2]) {
-                    return `<code style="font-size: 90%; opacity: 0.6;">[${x[0]}]</code>: <i>${x[1]}</i><br/>`;
-                }
-                return `<code style="font-size: 90%; opacity: 0.6;">[${x[0]}]</code> ${x[1]}: <i>${x[2]}</i><br/>`;
-            });
-            return `<h4 ${getStyles("h4")}>引用链接</h4><p ${getStyles(
-                "footnotes"
-            )}>${footnoteArray.join("\n")}</p>`;
-        };
+    this.buildFootnotes = () => {
+      let footnoteArray = footnotes.map((x) => {
+        if (x[1] === x[2]) {
+          return `<code style="font-size: 90%; opacity: 0.6;">[${x[0]}]</code>: <i>${x[1]}</i><br/>`;
+        }
+        return `<code style="font-size: 90%; opacity: 0.6;">[${x[0]}]</code> ${x[1]}: <i>${x[2]}</i><br/>`;
+      });
+      return `<h4 ${getStyles("h4")}>引用链接</h4><p ${getStyles(
+        "footnotes"
+      )}>${footnoteArray.join("\n")}</p>`;
+    };

-        this.buildAddition = () => {
-            return `
+    this.buildAddition = () => {
+      return `
            <style>
            .preview-wrapper pre::before {
                position: absolute;
@ -83,134 +83,122 @@ class WxRenderer {
            }
            </style>
        `;
-        };
+    };

-        this.setOptions = (newOpts) => {
-            this.opts = merge(this.opts, newOpts);
-        };
+    this.setOptions = (newOpts) => {
+      this.opts = merge(this.opts, newOpts);
+    };

-        this.hasFootnotes = () => footnotes.length !== 0;
+    this.hasFootnotes = () => footnotes.length !== 0;

-        this.getRenderer = (status) => {
-            footnotes = [];
-            footnoteIndex = 0;
+    this.getRenderer = (status) => {
+      footnotes = [];
+      footnoteIndex = 0;

-            styleMapping = this.buildTheme(this.opts.theme);
-            let renderer = new marked.Renderer();
+      styleMapping = this.buildTheme(this.opts.theme);
+      let renderer = new marked.Renderer();

-            renderer.heading = (text, level) => {
-                switch (level) {
-                    case 1:
-                        return `<h1 ${getStyles("h1")}>${text}</h1>`;
-                    case 2:
-                        return `<h2 ${getStyles("h2")}>${text}</h2>`;
-                    case 3:
-                        return `<h3 ${getStyles("h3")}>${text}</h3>`;
-                    default:
-                        return `<h4 ${getStyles("h4")}>${text}</h4>`;
-                }
-            };
-            renderer.paragraph = (text) => {
-                if (
-                    text.indexOf("<figure") != -1 &&
-                    text.indexOf("<img") != -1
-                ) {
-                    return text;
-                }
-                return text.replace(/ /g, "") === ""
-                    ? ""
-                    : `<p ${getStyles("p")}>${text}</p>`;
-            };
+      renderer.heading = (text, level) => {
+        switch (level) {
+          case 1:
+            return `<h1 ${getStyles("h1")}>${text}</h1>`;
+          case 2:
+            return `<h2 ${getStyles("h2")}>${text}</h2>`;
+          case 3:
+            return `<h3 ${getStyles("h3")}>${text}</h3>`;
+          default:
+            return `<h4 ${getStyles("h4")}>${text}</h4>`;
+        }
+      };
+      renderer.paragraph = (text) => {
+        if (text.indexOf("<figure") != -1 && text.indexOf("<img") != -1) {
+          return text;
+        }
+        return text.replace(/ /g, "") === ""
+          ? ""
+          : `<p ${getStyles("p")}>${text}</p>`;
+      };

-            renderer.blockquote = (text) => {
-                text = text.replace(
-                    /<p.*?>/g,
-                    `<p ${getStyles("blockquote_p")}>`
-                );
-                return `<blockquote ${getStyles(
-                    "blockquote"
-                )}>${text}</blockquote>`;
-            };
-            renderer.code = (text, lang) => {
-                text = text.replace(/</g, "&lt;").replace(/>/g, "&gt;");
-                const codeLines = text
-                    .split("\n")
-                    .map(
-                        (line) =>
-                            `<code class="prettyprint"><span class="code-snippet_outer">${
-                                line || "<br>"
-                            }</span></code>`
-                    );
-                const codeTheme = "github";
-                return `
+      renderer.blockquote = (text) => {
+        text = text.replace(/<p.*?>/g, `<p ${getStyles("blockquote_p")}>`);
+        return `<blockquote ${getStyles("blockquote")}>${text}</blockquote>`;
+      };
+      renderer.code = (text, lang) => {
+        text = text.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+        const codeLines = text
+          .split("\n")
+          .map(
+            (line) =>
+              `<code class="prettyprint"><span class="code-snippet_outer">${
+                line || "<br>"
+              }</span></code>`
+          );
+        const codeTheme = "github";
+        return `
                <section class="code-snippet__${codeTheme}">
                    <pre class="code__pre" data-lang="${lang}">
                        ${codeLines.join("")}
                    </pre>
                </section>
            `;
-            };
-            renderer.codespan = (text, lang) =>
-                `<code ${getStyles("codespan")}>${text}</code>`;
-            renderer.listitem = (text) =>
-                `<span ${getStyles(
-                    "listitem"
-                )}><span style="margin-right: 10px;"><%s/></span>${text}</span>`;
+      };
+      renderer.codespan = (text, lang) =>
+        `<code ${getStyles("codespan")}>${text}</code>`;
+      renderer.listitem = (text) =>
+        `<span ${getStyles(
+          "listitem"
+        )}><span style="margin-right: 10px;"><%s/></span>${text}</span>`;

-            renderer.list = (text, ordered, start) => {
-                text = text.replace(/<\/*p.*?>/g, "");
-                let segments = text.split(`<%s/>`);
-                if (!ordered) {
-                    text = segments.join("•");
-                    return `<p ${getStyles("ul")}>${text}</p>`;
-                }
-                text = segments[0];
-                for (let i = 1; i < segments.length; i++) {
-                    text = text + i + "." + segments[i];
-                }
-                return `<p ${getStyles("ol")}>${text}</p>`;
-            };
-            renderer.image = (href, title, text) => {
-                let subText = "";
-                if (text) {
-                    subText = `<figcaption ${getStyles(
-                        "figcaption"
-                    )}>${text}</figcaption>`;
-                }
-                let figureStyles = getStyles("figure");
-                let imgStyles = getStyles(
-                    ENV_STRETCH_IMAGE ? "image" : "image_org"
-                );
-                return `<figure ${figureStyles}><img ${imgStyles} src="${href}" title="${title}" alt="${text}"/>${subText}</figure>`;
-            };
-            renderer.link = (href, title, text) => {
-                if (href.startsWith("https://mp.weixin.qq.com")) {
-                    return `<a href="${href}" title="${
-                        title || text
-                    }" ${getStyles("wx_link")}>${text}</a>`;
-                }
-                if (href === text || !status) {
-                    return text;
-                }
-                let ref = addFootnote(title || text, href);
-                return `<span ${getStyles(
-                    "link"
-                )}>${text}<sup>[${ref}]</sup></span>`;
-            };
-            renderer.strong = (text) =>
-                `<strong ${getStyles("strong")}>${text}</strong>`;
-            renderer.em = (text) =>
-                `<span style="font-style: italic;">${text}</span>`;
-            renderer.table = (header, body) =>
-                `<section style="padding:0 8px;"><table class="preview-table"><thead ${getStyles(
-                    "thead"
-                )}>${header}</thead><tbody>${body}</tbody></table></section>`;
-            renderer.tablecell = (text, flags) =>
-                `<td ${getStyles("td")}>${text}</td>`;
-            renderer.hr = () =>
-                `<hr style="border-style: solid;border-width: 1px 0 0;border-color: rgba(0,0,0,0.1);-webkit-transform-origin: 0 0;-webkit-transform: scale(1, 0.5);transform-origin: 0 0;transform: scale(1, 0.5);">`;
-            return renderer;
-        };
-    }
+      renderer.list = (text, ordered, start) => {
+        text = text.replace(/<\/*p.*?>/g, "");
+        let segments = text.split(`<%s/>`);
+        if (!ordered) {
+          text = segments.join("•");
+          return `<p ${getStyles("ul")}>${text}</p>`;
+        }
+        text = segments[0];
+        for (let i = 1; i < segments.length; i++) {
+          text = text + i + "." + segments[i];
+        }
+        return `<p ${getStyles("ol")}>${text}</p>`;
+      };
+      renderer.image = (href, title, text) => {
+        let subText = "";
+        if (text) {
+          subText = `<figcaption ${getStyles(
+            "figcaption"
+          )}>${text}</figcaption>`;
+        }
+        let figureStyles = getStyles("figure");
+        let imgStyles = getStyles(ENV_STRETCH_IMAGE ? "image" : "image_org");
+        return `<figure ${figureStyles}><img ${imgStyles} src="${href}" title="${title}" alt="${text}"/>${subText}</figure>`;
+      };
+      renderer.link = (href, title, text) => {
+        if (href.startsWith("https://mp.weixin.qq.com")) {
+          return `<a href="${href}" title="${title || text}" ${getStyles(
+            "wx_link"
+          )}>${text}</a>`;
+        }
+        if (href === text || !status) {
+          return text;
+        }
+        let ref = addFootnote(title || text, href);
+        return `<span ${getStyles("link")}>${text}<sup>[${ref}]</sup></span>`;
+      };
+      renderer.strong = (text) =>
+        `<strong ${getStyles("strong")}>${text}</strong>`;
+      renderer.em = (text) =>
+        `<span style="font-style: italic;">${text}</span>`;
+      renderer.table = (header, body) =>
+        `<section style="padding:0 8px;"><table class="preview-table"><thead ${getStyles(
+          "thead"
+        )}>${header}</thead><tbody>${body}</tbody></table></section>`;
+      renderer.tablecell = (text, flags) =>
+        `<td ${getStyles("td")}>${text}</td>`;
+      renderer.hr = () =>
+        `<hr style="border-style: solid;border-width: 1px 0 0;border-color: rgba(0,0,0,0.1);-webkit-transform-origin: 0 0;-webkit-transform: scale(1, 0.5);transform-origin: 0 0;transform: scale(1, 0.5);">`;
+      return renderer;
+    };
+  }
 }
 export default WxRenderer;
--- a/src/assets/scripts/themes/default-theme.js
+++ b/src/assets/scripts/themes/default-theme.js
@ -1,178 +1,178 @@
 export default {
-    BASE: {
-        "text-align": "left",
-        color: "#3f3f3f",
-        "line-height": "1.75",
+  BASE: {
+    "text-align": "left",
+    color: "#3f3f3f",
+    "line-height": "1.75",
+  },
+  BASE_BLOCK: {
+    margin: "1em 8px",
+  },
+  block: {
+    // 一级标题样式
+    h1: {
+      "font-size": "1.2em",
+      "text-align": "center",
+      "font-weight": "bold",
+      display: "table",
+      margin: "2em auto 1em",
+      padding: "0 1em",
+      "border-bottom": "2px solid rgba(0, 152, 116, 0.9)",
    },
-    BASE_BLOCK: {
-        margin: "1em 8px",
+
+    // 二级标题样式
+    h2: {
+      "font-size": "1.2em",
+      "text-align": "center",
+      "font-weight": "bold",
+      display: "table",
+      margin: "4em auto 2em",
+      padding: "0 0.2em",
+      background: "rgba(0, 152, 116, 0.9)",
+      color: "#fff",
    },
-    block: {
-        // 一级标题样式
-        h1: {
-            "font-size": "1.2em",
-            "text-align": "center",
-            "font-weight": "bold",
-            display: "table",
-            margin: "2em auto 1em",
-            padding: "0 1em",
-            "border-bottom": "2px solid rgba(0, 152, 116, 0.9)",
-        },

-        // 二级标题样式
-        h2: {
-            "font-size": "1.2em",
-            "text-align": "center",
-            "font-weight": "bold",
-            display: "table",
-            margin: "4em auto 2em",
-            padding: "0 0.2em",
-            background: "rgba(0, 152, 116, 0.9)",
-            color: "#fff",
-        },
-
-        // 三级标题样式
-        h3: {
-            "font-weight": "bold",
-            "font-size": "1.1em",
-            margin: "2em 8px 0.75em 0",
-            "line-height": "1.2",
-            "padding-left": "8px",
-            "border-left": "3px solid rgba(0, 152, 116, 0.9)",
-        },
-
-        // 四级标题样式
-        h4: {
-            "font-weight": "bold",
-            "font-size": "1em",
-            margin: "2em 8px 0.5em",
-            color: "rgba(66, 185, 131, 0.9)",
-        },
-
-        // 段落样式
-        p: {
-            margin: "1.5em 8px",
-            "letter-spacing": "0.1em",
-        },
-
-        // 引用样式
-        blockquote: {
-            "font-style": "normal",
-            "border-left": "none",
-            padding: "1em",
-            "border-radius": "4px",
-            color: "#FEEEED",
-            background: "rgba(27,31,35,.05)",
-            margin: "2em 8px",
-        },
-
-        blockquote_p: {
-            "letter-spacing": "0.1em",
-            color: "rgb(80, 80, 80)",
-            "font-size": "1em",
-            display: "block",
-        },
-
-        code: {
-            "font-size": "80%",
-            overflow: "auto",
-            color: "#333",
-            "white-space": "pre",
-            background: "rgb(247, 247, 247)",
-            "border-radius": "2px",
-            padding: "10px",
-            "line-height": "1.5",
-            border: "1px solid rgb(236,236,236)",
-            margin: "20px 0",
-        },
-
-        image: {
-            "border-radius": "4px",
-            display: "block",
-            margin: "0.1em auto 0.5em",
-            width: "100% !important",
-        },
-
-        image_org: {
-            "border-radius": "4px",
-            display: "block",
-        },
-
-        ol: {
-            "margin-left": "0",
-            "padding-left": "1em",
-        },
-
-        ul: {
-            "margin-left": "0",
-            "padding-left": "1em",
-            "list-style": "circle",
-        },
-
-        footnotes: {
-            margin: "0.5em 8px",
-            "font-size": "80%",
-        },
-
-        figure: {
-            margin: "1.5em 8px",
-        },
+    // 三级标题样式
+    h3: {
+      "font-weight": "bold",
+      "font-size": "1.1em",
+      margin: "2em 8px 0.75em 0",
+      "line-height": "1.2",
+      "padding-left": "8px",
+      "border-left": "3px solid rgba(0, 152, 116, 0.9)",
    },
-    inline: {
-        listitem: {
-            "text-indent": "-1em",
-            display: "block",
-            margin: "0.2em 8px",
-        },

-        codespan: {
-            "font-size": "90%",
-            "white-space": "pre",
-            color: "#d14",
-            background: "rgba(27,31,35,.05)",
-            padding: "3px 5px",
-            "border-radius": "4px",
-        },
-
-        link: {
-            color: "#576b95",
-        },
-
-        wx_link: {
-            color: "#576b95",
-            "text-decoration": "none",
-        },
-
-        // 字体加粗样式
-        strong: {
-            color: "rgba(15, 76, 129, 0.9)",
-            "font-weight": "bold",
-        },
-
-        table: {
-            "border-collapse": "collapse",
-            "text-align": "center",
-            margin: "1em 8px",
-        },
-
-        thead: {
-            background: "rgba(0, 0, 0, 0.05)",
-            "font-weight": "bold",
-        },
-
-        td: {
-            border: "1px solid #dfdfdf",
-            padding: "0.25em 0.5em",
-        },
-
-        footnote: {
-            "font-size": "12px",
-        },
-
-        figcaption: {
-            "text-align": "center",
-            color: "#888",
-            "font-size": "0.8em",
-        },
+    // 四级标题样式
+    h4: {
+      "font-weight": "bold",
+      "font-size": "1em",
+      margin: "2em 8px 0.5em",
+      color: "rgba(66, 185, 131, 0.9)",
    },
+
+    // 段落样式
+    p: {
+      margin: "1.5em 8px",
+      "letter-spacing": "0.1em",
+    },
+
+    // 引用样式
+    blockquote: {
+      "font-style": "normal",
+      "border-left": "none",
+      padding: "1em",
+      "border-radius": "4px",
+      color: "#FEEEED",
+      background: "rgba(27,31,35,.05)",
+      margin: "2em 8px",
+    },
+
+    blockquote_p: {
+      "letter-spacing": "0.1em",
+      color: "rgb(80, 80, 80)",
+      "font-size": "1em",
+      display: "block",
+    },
+
+    code: {
+      "font-size": "80%",
+      overflow: "auto",
+      color: "#333",
+      "white-space": "pre",
+      background: "rgb(247, 247, 247)",
+      "border-radius": "2px",
+      padding: "10px",
+      "line-height": "1.5",
+      border: "1px solid rgb(236,236,236)",
+      margin: "20px 0",
+    },
+
+    image: {
+      "border-radius": "4px",
+      display: "block",
+      margin: "0.1em auto 0.5em",
+      width: "100% !important",
+    },
+
+    image_org: {
+      "border-radius": "4px",
+      display: "block",
+    },
+
+    ol: {
+      "margin-left": "0",
+      "padding-left": "1em",
+    },
+
+    ul: {
+      "margin-left": "0",
+      "padding-left": "1em",
+      "list-style": "circle",
+    },
+
+    footnotes: {
+      margin: "0.5em 8px",
+      "font-size": "80%",
+    },
+
+    figure: {
+      margin: "1.5em 8px",
+    },
+  },
+  inline: {
+    listitem: {
+      "text-indent": "-1em",
+      display: "block",
+      margin: "0.2em 8px",
+    },
+
+    codespan: {
+      "font-size": "90%",
+      "white-space": "pre",
+      color: "#d14",
+      background: "rgba(27,31,35,.05)",
+      padding: "3px 5px",
+      "border-radius": "4px",
+    },
+
+    link: {
+      color: "#576b95",
+    },
+
+    wx_link: {
+      color: "#576b95",
+      "text-decoration": "none",
+    },
+
+    // 字体加粗样式
+    strong: {
+      color: "rgba(15, 76, 129, 0.9)",
+      "font-weight": "bold",
+    },
+
+    table: {
+      "border-collapse": "collapse",
+      "text-align": "center",
+      margin: "1em 8px",
+    },
+
+    thead: {
+      background: "rgba(0, 0, 0, 0.05)",
+      "font-weight": "bold",
+    },
+
+    td: {
+      border: "1px solid #dfdfdf",
+      padding: "0.25em 0.5em",
+    },
+
+    footnote: {
+      "font-size": "12px",
+    },
+
+    figcaption: {
+      "text-align": "center",
+      color: "#888",
+      "font-size": "0.8em",
+    },
+  },
 };
--- a/src/assets/scripts/tokenTools.js
+++ b/src/assets/scripts/tokenTools.js
@ -1,269 +1,265 @@
 export function utf16to8(str) {
-    var out, i, len, c;
-    out = "";
-    len = str.length;
-    for (i = 0; i < len; i++) {
-        c = str.charCodeAt(i);
-        if (c >= 0x0001 && c <= 0x007f) {
-            out += str.charAt(i);
-        } else if (c > 0x07ff) {
-            out += String.fromCharCode(0xe0 | ((c >> 12) & 0x0f));
-            out += String.fromCharCode(0x80 | ((c >> 6) & 0x3f));
-            out += String.fromCharCode(0x80 | ((c >> 0) & 0x3f));
-        } else {
-            out += String.fromCharCode(0xc0 | ((c >> 6) & 0x1f));
-            out += String.fromCharCode(0x80 | ((c >> 0) & 0x3f));
-        }
+  var out, i, len, c;
+  out = "";
+  len = str.length;
+  for (i = 0; i < len; i++) {
+    c = str.charCodeAt(i);
+    if (c >= 0x0001 && c <= 0x007f) {
+      out += str.charAt(i);
+    } else if (c > 0x07ff) {
+      out += String.fromCharCode(0xe0 | ((c >> 12) & 0x0f));
+      out += String.fromCharCode(0x80 | ((c >> 6) & 0x3f));
+      out += String.fromCharCode(0x80 | ((c >> 0) & 0x3f));
+    } else {
+      out += String.fromCharCode(0xc0 | ((c >> 6) & 0x1f));
+      out += String.fromCharCode(0x80 | ((c >> 0) & 0x3f));
    }
-    return out;
+  }
+  return out;
 }

 export function utf8to16(str) {
-    var out, i, len, c;
-    var char2, char3;
-    out = "";
-    len = str.length;
-    i = 0;
-    while (i < len) {
-        c = str.charCodeAt(i++);
-        switch (c >> 4) {
-            case 0:
-            case 1:
-            case 2:
-            case 3:
-            case 4:
-            case 5:
-            case 6:
-            case 7:
-                // 0xxxxxxx
-                out += str.charAt(i - 1);
-                break;
-            case 12:
-            case 13:
-                // 110x xxxx 10xx xxxx
-                char2 = str.charCodeAt(i++);
-                out += String.fromCharCode(((c & 0x1f) << 6) | (char2 & 0x3f));
-                break;
-            case 14:
-                // 1110 xxxx 10xx xxxx 10xx xxxx
-                char2 = str.charCodeAt(i++);
-                char3 = str.charCodeAt(i++);
-                out += String.fromCharCode(
-                    ((c & 0x0f) << 12) |
-                        ((char2 & 0x3f) << 6) |
-                        ((char3 & 0x3f) << 0)
-                );
-                break;
-        }
+  var out, i, len, c;
+  var char2, char3;
+  out = "";
+  len = str.length;
+  i = 0;
+  while (i < len) {
+    c = str.charCodeAt(i++);
+    switch (c >> 4) {
+      case 0:
+      case 1:
+      case 2:
+      case 3:
+      case 4:
+      case 5:
+      case 6:
+      case 7:
+        // 0xxxxxxx
+        out += str.charAt(i - 1);
+        break;
+      case 12:
+      case 13:
+        // 110x xxxx 10xx xxxx
+        char2 = str.charCodeAt(i++);
+        out += String.fromCharCode(((c & 0x1f) << 6) | (char2 & 0x3f));
+        break;
+      case 14:
+        // 1110 xxxx 10xx xxxx 10xx xxxx
+        char2 = str.charCodeAt(i++);
+        char3 = str.charCodeAt(i++);
+        out += String.fromCharCode(
+          ((c & 0x0f) << 12) | ((char2 & 0x3f) << 6) | ((char3 & 0x3f) << 0)
+        );
+        break;
    }
-    return out;
+  }
+  return out;
 }

 const base64EncodeChars =
-    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
 const base64DecodeChars = new Array(
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    62,
-    -1,
-    -1,
-    -1,
-    63,
-    52,
-    53,
-    54,
-    55,
-    56,
-    57,
-    58,
-    59,
-    60,
-    61,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    0,
-    1,
-    2,
-    3,
-    4,
-    5,
-    6,
-    7,
-    8,
-    9,
-    10,
-    11,
-    12,
-    13,
-    14,
-    15,
-    16,
-    17,
-    18,
-    19,
-    20,
-    21,
-    22,
-    23,
-    24,
-    25,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1,
-    26,
-    27,
-    28,
-    29,
-    30,
-    31,
-    32,
-    33,
-    34,
-    35,
-    36,
-    37,
-    38,
-    39,
-    40,
-    41,
-    42,
-    43,
-    44,
-    45,
-    46,
-    47,
-    48,
-    49,
-    50,
-    51,
-    -1,
-    -1,
-    -1,
-    -1,
-    -1
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  62,
+  -1,
+  -1,
+  -1,
+  63,
+  52,
+  53,
+  54,
+  55,
+  56,
+  57,
+  58,
+  59,
+  60,
+  61,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  0,
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12,
+  13,
+  14,
+  15,
+  16,
+  17,
+  18,
+  19,
+  20,
+  21,
+  22,
+  23,
+  24,
+  25,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1,
+  26,
+  27,
+  28,
+  29,
+  30,
+  31,
+  32,
+  33,
+  34,
+  35,
+  36,
+  37,
+  38,
+  39,
+  40,
+  41,
+  42,
+  43,
+  44,
+  45,
+  46,
+  47,
+  48,
+  49,
+  50,
+  51,
+  -1,
+  -1,
+  -1,
+  -1,
+  -1
 );
 export function base64encode(str) {
-    var out, i, len;
-    var c1, c2, c3;
-    len = str.length;
-    i = 0;
-    out = "";
-    while (i < len) {
-        c1 = str.charCodeAt(i++) & 0xff;
-        if (i == len) {
-            out += base64EncodeChars.charAt(c1 >> 2);
-            out += base64EncodeChars.charAt((c1 & 0x3) << 4);
-            out += "==";
-            break;
-        }
-        c2 = str.charCodeAt(i++);
-        if (i == len) {
-            out += base64EncodeChars.charAt(c1 >> 2);
-            out += base64EncodeChars.charAt(
-                ((c1 & 0x3) << 4) | ((c2 & 0xf0) >> 4)
-            );
-            out += base64EncodeChars.charAt((c2 & 0xf) << 2);
-            out += "=";
-            break;
-        }
-        c3 = str.charCodeAt(i++);
-        out += base64EncodeChars.charAt(c1 >> 2);
-        out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xf0) >> 4));
-        out += base64EncodeChars.charAt(((c2 & 0xf) << 2) | ((c3 & 0xc0) >> 6));
-        out += base64EncodeChars.charAt(c3 & 0x3f);
+  var out, i, len;
+  var c1, c2, c3;
+  len = str.length;
+  i = 0;
+  out = "";
+  while (i < len) {
+    c1 = str.charCodeAt(i++) & 0xff;
+    if (i == len) {
+      out += base64EncodeChars.charAt(c1 >> 2);
+      out += base64EncodeChars.charAt((c1 & 0x3) << 4);
+      out += "==";
+      break;
    }
-    return out;
+    c2 = str.charCodeAt(i++);
+    if (i == len) {
+      out += base64EncodeChars.charAt(c1 >> 2);
+      out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xf0) >> 4));
+      out += base64EncodeChars.charAt((c2 & 0xf) << 2);
+      out += "=";
+      break;
+    }
+    c3 = str.charCodeAt(i++);
+    out += base64EncodeChars.charAt(c1 >> 2);
+    out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xf0) >> 4));
+    out += base64EncodeChars.charAt(((c2 & 0xf) << 2) | ((c3 & 0xc0) >> 6));
+    out += base64EncodeChars.charAt(c3 & 0x3f);
+  }
+  return out;
 }

 export function base64decode(str) {
-    var c1, c2, c3, c4;
-    var i, len, out;
-    len = str.length;
-    i = 0;
-    out = "";
-    while (i < len) {
-        /* c1 */
-        do {
-            c1 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
-        } while (i < len && c1 == -1);
-        if (c1 == -1) break;
-        /* c2 */
-        do {
-            c2 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
-        } while (i < len && c2 == -1);
-        if (c2 == -1) break;
-        out += String.fromCharCode((c1 << 2) | ((c2 & 0x30) >> 4));
-        /* c3 */
-        do {
-            c3 = str.charCodeAt(i++) & 0xff;
-            if (c3 == 61) return out;
-            c3 = base64DecodeChars[c3];
-        } while (i < len && c3 == -1);
-        if (c3 == -1) break;
-        out += String.fromCharCode(((c2 & 0xf) << 4) | ((c3 & 0x3c) >> 2));
-        /* c4 */
-        do {
-            c4 = str.charCodeAt(i++) & 0xff;
-            if (c4 == 61) return out;
-            c4 = base64DecodeChars[c4];
-        } while (i < len && c4 == -1);
-        if (c4 == -1) break;
-        out += String.fromCharCode(((c3 & 0x03) << 6) | c4);
-    }
-    return out;
+  var c1, c2, c3, c4;
+  var i, len, out;
+  len = str.length;
+  i = 0;
+  out = "";
+  while (i < len) {
+    /* c1 */
+    do {
+      c1 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
+    } while (i < len && c1 == -1);
+    if (c1 == -1) break;
+    /* c2 */
+    do {
+      c2 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
+    } while (i < len && c2 == -1);
+    if (c2 == -1) break;
+    out += String.fromCharCode((c1 << 2) | ((c2 & 0x30) >> 4));
+    /* c3 */
+    do {
+      c3 = str.charCodeAt(i++) & 0xff;
+      if (c3 == 61) return out;
+      c3 = base64DecodeChars[c3];
+    } while (i < len && c3 == -1);
+    if (c3 == -1) break;
+    out += String.fromCharCode(((c2 & 0xf) << 4) | ((c3 & 0x3c) >> 2));
+    /* c4 */
+    do {
+      c4 = str.charCodeAt(i++) & 0xff;
+      if (c4 == 61) return out;
+      c4 = base64DecodeChars[c4];
+    } while (i < len && c4 == -1);
+    if (c4 == -1) break;
+    out += String.fromCharCode(((c3 & 0x03) << 6) | c4);
+  }
+  return out;
 }

 export function safe64(base64) {
-    base64 = base64.replace(/\+/g, "-");
-    base64 = base64.replace(/\//g, "_");
-    return base64;
+  base64 = base64.replace(/\+/g, "-");
+  base64 = base64.replace(/\//g, "_");
+  return base64;
 }
--- a/src/assets/scripts/util.js
+++ b/src/assets/scripts/util.js
@ -5,21 +5,7 @@ import prettierCss from "prettier/parser-postcss";

 // 设置自定义颜色
 export function setColorWithTemplate(template) {
-    return function (color) {
-        let custom_theme = JSON.parse(JSON.stringify(template));
-        custom_theme.block.h1["border-bottom"] = `2px solid ${color}`;
-        custom_theme.block.h2["background"] = color;
-        custom_theme.block.h3["border-left"] = `3px solid ${color}`;
-        custom_theme.block.h4["color"] = color;
-        custom_theme.inline.strong["color"] = color;
-        return custom_theme;
-    };
-}
-
-export const setColorWithCustomTemplate = function setColorWithCustomTemplate(
-    template,
-    color
-) {
+  return function (color) {
    let custom_theme = JSON.parse(JSON.stringify(template));
    custom_theme.block.h1["border-bottom"] = `2px solid ${color}`;
    custom_theme.block.h2["background"] = color;
@ -27,69 +13,83 @@ export const setColorWithCustomTemplate = function setColorWithCustomTemplate(
    custom_theme.block.h4["color"] = color;
    custom_theme.inline.strong["color"] = color;
    return custom_theme;
+  };
+}
+
+export const setColorWithCustomTemplate = function setColorWithCustomTemplate(
+  template,
+  color
+) {
+  let custom_theme = JSON.parse(JSON.stringify(template));
+  custom_theme.block.h1["border-bottom"] = `2px solid ${color}`;
+  custom_theme.block.h2["background"] = color;
+  custom_theme.block.h3["border-left"] = `3px solid ${color}`;
+  custom_theme.block.h4["color"] = color;
+  custom_theme.inline.strong["color"] = color;
+  return custom_theme;
 };

 // 设置自定义字体大小
 export function setFontSizeWithTemplate(template) {
-    return function (fontSize) {
-        let custom_theme = JSON.parse(JSON.stringify(template));
-        custom_theme.block.h1["font-size"] = `${fontSize * 1.14}px`;
-        custom_theme.block.h2["font-size"] = `${fontSize * 1.1}px`;
-        custom_theme.block.h3["font-size"] = `${fontSize}px`;
-        custom_theme.block.h4["font-size"] = `${fontSize}px`;
-        return custom_theme;
-    };
+  return function (fontSize) {
+    let custom_theme = JSON.parse(JSON.stringify(template));
+    custom_theme.block.h1["font-size"] = `${fontSize * 1.14}px`;
+    custom_theme.block.h2["font-size"] = `${fontSize * 1.1}px`;
+    custom_theme.block.h3["font-size"] = `${fontSize}px`;
+    custom_theme.block.h4["font-size"] = `${fontSize}px`;
+    return custom_theme;
+  };
 }

 export const setColor = setColorWithTemplate(default_theme);
 export const setFontSize = setFontSizeWithTemplate(default_theme);

 export function customCssWithTemplate(jsonString, color, theme) {
-    let custom_theme = JSON.parse(JSON.stringify(theme));
-    // block
-    custom_theme.block.h1["border-bottom"] = `2px solid ${color}`;
-    custom_theme.block.h2["background"] = color;
-    custom_theme.block.h3["border-left"] = `3px solid ${color}`;
-    custom_theme.block.h4["color"] = color;
-    custom_theme.inline.strong["color"] = color;
+  let custom_theme = JSON.parse(JSON.stringify(theme));
+  // block
+  custom_theme.block.h1["border-bottom"] = `2px solid ${color}`;
+  custom_theme.block.h2["background"] = color;
+  custom_theme.block.h3["border-left"] = `3px solid ${color}`;
+  custom_theme.block.h4["color"] = color;
+  custom_theme.inline.strong["color"] = color;

-    custom_theme.block.h1 = Object.assign(custom_theme.block.h1, jsonString.h1);
-    custom_theme.block.h2 = Object.assign(custom_theme.block.h2, jsonString.h2);
-    custom_theme.block.h3 = Object.assign(custom_theme.block.h3, jsonString.h3);
-    custom_theme.block.h4 = Object.assign(custom_theme.block.h4, jsonString.h4);
-    custom_theme.block.p = Object.assign(custom_theme.block.p, jsonString.p);
-    custom_theme.block.blockquote = Object.assign(
-        custom_theme.block.blockquote,
-        jsonString.blockquote
-    );
-    custom_theme.block.blockquote_p = Object.assign(
-        custom_theme.block.blockquote_p,
-        jsonString.blockquote_p
-    );
-    custom_theme.block.image = Object.assign(
-        custom_theme.block.image,
-        jsonString.image
-    );
+  custom_theme.block.h1 = Object.assign(custom_theme.block.h1, jsonString.h1);
+  custom_theme.block.h2 = Object.assign(custom_theme.block.h2, jsonString.h2);
+  custom_theme.block.h3 = Object.assign(custom_theme.block.h3, jsonString.h3);
+  custom_theme.block.h4 = Object.assign(custom_theme.block.h4, jsonString.h4);
+  custom_theme.block.p = Object.assign(custom_theme.block.p, jsonString.p);
+  custom_theme.block.blockquote = Object.assign(
+    custom_theme.block.blockquote,
+    jsonString.blockquote
+  );
+  custom_theme.block.blockquote_p = Object.assign(
+    custom_theme.block.blockquote_p,
+    jsonString.blockquote_p
+  );
+  custom_theme.block.image = Object.assign(
+    custom_theme.block.image,
+    jsonString.image
+  );

-    // inline
-    custom_theme.inline.strong = Object.assign(
-        custom_theme.inline.strong,
-        jsonString.strong
-    );
-    custom_theme.inline.codespan = Object.assign(
-        custom_theme.inline.codespan,
-        jsonString.codespan
-    );
-    custom_theme.inline.link = Object.assign(
-        custom_theme.inline.link,
-        jsonString.link
-    );
-    custom_theme.inline.wx_link = Object.assign(
-        custom_theme.inline.wx_link,
-        jsonString.wx_link
-    );
+  // inline
+  custom_theme.inline.strong = Object.assign(
+    custom_theme.inline.strong,
+    jsonString.strong
+  );
+  custom_theme.inline.codespan = Object.assign(
+    custom_theme.inline.codespan,
+    jsonString.codespan
+  );
+  custom_theme.inline.link = Object.assign(
+    custom_theme.inline.link,
+    jsonString.link
+  );
+  custom_theme.inline.wx_link = Object.assign(
+    custom_theme.inline.wx_link,
+    jsonString.wx_link
+  );

-    return custom_theme;
+  return custom_theme;
 }

 /**
@ -98,81 +98,77 @@ export function customCssWithTemplate(jsonString, color, theme) {
 * @param {css字符串} css
 */
 export function css2json(css) {
-    // 移除CSS所有注释
-    let open, close;
-    while (
-        (open = css.indexOf("/*")) !== -1 &&
-        (close = css.indexOf("*/")) !== -1
-    ) {
-        css = css.substring(0, open) + css.substring(close + 2);
+  // 移除CSS所有注释
+  let open, close;
+  while (
+    (open = css.indexOf("/*")) !== -1 &&
+    (close = css.indexOf("*/")) !== -1
+  ) {
+    css = css.substring(0, open) + css.substring(close + 2);
+  }
+
+  // 初始化返回值
+  let json = {};
+
+  while (css.length > 0 && css.indexOf("{") !== -1 && css.indexOf("}") !== -1) {
+    // 存储第一个左/右花括号的下标
+    const lbracket = css.indexOf("{");
+    const rbracket = css.indexOf("}");
+
+    // 第一步：将声明转换为Object，如：
+    // `font: 'Times New Roman' 1em; color: #ff0000; margin-top: 1em;`
+    //  ==>
+    // `{"font": "'Times New Roman' 1em", "color": "#ff0000", "margin-top": "1em"}`
+
+    // 辅助方法：将array转为object
+    function toObject(array) {
+      let ret = {};
+      array.forEach((e) => {
+        const index = e.indexOf(":");
+        const property = e.substring(0, index).trim();
+        const value = e.substring(index + 1).trim();
+        ret[property] = value;
+      });
+      return ret;
    }

-    // 初始化返回值
-    let json = {};
+    // 切割声明块并移除空白符，然后放入数组中
+    let declarations = css
+      .substring(lbracket + 1, rbracket)
+      .split(";")
+      .map((e) => e.trim())
+      .filter((e) => e.length > 0); // 移除所有""空值

-    while (
-        css.length > 0 &&
-        css.indexOf("{") !== -1 &&
-        css.indexOf("}") !== -1
-    ) {
-        // 存储第一个左/右花括号的下标
-        const lbracket = css.indexOf("{");
-        const rbracket = css.indexOf("}");
+    // 转为Object对象
+    declarations = toObject(declarations);

-        // 第一步：将声明转换为Object，如：
-        // `font: 'Times New Roman' 1em; color: #ff0000; margin-top: 1em;`
-        //  ==>
-        // `{"font": "'Times New Roman' 1em", "color": "#ff0000", "margin-top": "1em"}`
+    // 第二步：选择器处理，每个选择器会与它对应的声明相关联，如：
+    // `h1, p#bar {color: red}`
+    // ==>
+    // {"h1": {color: red}, "p#bar": {color: red}}

-        // 辅助方法：将array转为object
-        function toObject(array) {
-            let ret = {};
-            array.forEach((e) => {
-                const index = e.indexOf(":");
-                const property = e.substring(0, index).trim();
-                const value = e.substring(index + 1).trim();
-                ret[property] = value;
-            });
-            return ret;
-        }
+    let selectors = css
+      .substring(0, lbracket)
+      // 以,切割，并移除空格：`"h1, p#bar, span.foo"` => ["h1", "p#bar", "span.foo"]
+      .split(",")
+      .map((selector) => selector.trim());

-        // 切割声明块并移除空白符，然后放入数组中
-        let declarations = css
-            .substring(lbracket + 1, rbracket)
-            .split(";")
-            .map((e) => e.trim())
-            .filter((e) => e.length > 0); // 移除所有""空值
+    // 迭代赋值
+    selectors.forEach((selector) => {
+      // 若不存在，则先初始化
+      if (!json[selector]) json[selector] = {};
+      // 赋值到JSON
+      Object.keys(declarations).forEach((key) => {
+        json[selector][key] = declarations[key];
+      });
+    });

-        // 转为Object对象
-        declarations = toObject(declarations);
+    // 继续下个声明块
+    css = css.slice(rbracket + 1).trim();
+  }

-        // 第二步：选择器处理，每个选择器会与它对应的声明相关联，如：
-        // `h1, p#bar {color: red}`
-        // ==>
-        // {"h1": {color: red}, "p#bar": {color: red}}
-
-        let selectors = css
-            .substring(0, lbracket)
-            // 以,切割，并移除空格：`"h1, p#bar, span.foo"` => ["h1", "p#bar", "span.foo"]
-            .split(",")
-            .map((selector) => selector.trim());
-
-        // 迭代赋值
-        selectors.forEach((selector) => {
-            // 若不存在，则先初始化
-            if (!json[selector]) json[selector] = {};
-            // 赋值到JSON
-            Object.keys(declarations).forEach((key) => {
-                json[selector][key] = declarations[key];
-            });
-        });
-
-        // 继续下个声明块
-        css = css.slice(rbracket + 1).trim();
-    }
-
-    // 返回JSON形式的结果串
-    return json;
+  // 返回JSON形式的结果串
+  return json;
 }

 /**
@ -181,12 +177,12 @@ export function css2json(css) {
 * @param {*} name
 */
 export function saveEditorContent(editor, name) {
-    const content = editor.getValue(0);
-    if (content) {
-        localStorage.setItem(name, content);
-    } else {
-        localStorage.removeItem(name);
-    }
+  const content = editor.getValue(0);
+  if (content) {
+    localStorage.setItem(name, content);
+  } else {
+    localStorage.removeItem(name);
+  }
 }

 /**
@ -194,11 +190,11 @@ export function saveEditorContent(editor, name) {
 * @param {文档内容} content
 */
 export function formatDoc(content) {
-    const doc = prettier.format(content, {
-        parser: "markdown",
-        plugins: [prettierMarkdown],
-    });
-    return doc;
+  const doc = prettier.format(content, {
+    parser: "markdown",
+    plugins: [prettierMarkdown],
+  });
+  return doc;
 }

 /**
@ -206,20 +202,20 @@ export function formatDoc(content) {
 * @param {css内容}} content
 */
 export function formatCss(content) {
-    const doc = prettier.format(content, {
-        parser: "css",
-        plugins: [prettierCss],
-    });
-    return doc;
+  const doc = prettier.format(content, {
+    parser: "css",
+    plugins: [prettierCss],
+  });
+  return doc;
 }

 export function fixCodeWhiteSpace(value = "pre") {
-    const preDomList = document.getElementsByClassName("code__pre");
-    if (preDomList.length > 0) {
-        preDomList.forEach((pre) => {
-            pre.style.whiteSpace = value;
-        });
-    }
+  const preDomList = document.getElementsByClassName("code__pre");
+  if (preDomList.length > 0) {
+    preDomList.forEach((pre) => {
+      pre.style.whiteSpace = value;
+    });
+  }
 }

 /**
@ -227,16 +223,16 @@ export function fixCodeWhiteSpace(value = "pre") {
 * @param {文档内容} doc
 */
 export function downloadMD(doc) {
-    let downLink = document.createElement("a");
+  let downLink = document.createElement("a");

-    downLink.download = "content.md";
-    downLink.style.display = "none";
-    let blob = new Blob([doc]);
+  downLink.download = "content.md";
+  downLink.style.display = "none";
+  let blob = new Blob([doc]);

-    downLink.href = URL.createObjectURL(blob);
-    document.body.appendChild(downLink);
-    downLink.click();
-    document.body.removeChild(downLink);
+  downLink.href = URL.createObjectURL(blob);
+  document.body.appendChild(downLink);
+  downLink.click();
+  document.body.removeChild(downLink);
 }

 /**
@ -246,50 +242,50 @@ export function downloadMD(doc) {
 * @param {*} cols 列
 */
 export function createTable({ data, rows, cols }) {
-    let table = "";
-    let currRow = [];
-    for (let i = 0; i < rows + 2; ++i) {
-        table += "|\t";
-        currRow = [];
-        for (let j = 0; j < cols; ++j) {
-            const rowIdx = i > 1 ? i - 1 : i;
-            i === 1
-                ? currRow.push("---\t")
-                : currRow.push(data[`k_${rowIdx}_${j}`] || "");
-        }
-        table += currRow.join("\t|\t");
-        table += "\t|\n";
+  let table = "";
+  let currRow = [];
+  for (let i = 0; i < rows + 2; ++i) {
+    table += "|\t";
+    currRow = [];
+    for (let j = 0; j < cols; ++j) {
+      const rowIdx = i > 1 ? i - 1 : i;
+      i === 1
+        ? currRow.push("---\t")
+        : currRow.push(data[`k_${rowIdx}_${j}`] || "");
    }
+    table += currRow.join("\t|\t");
+    table += "\t|\n";
+  }

-    return table;
+  return table;
 }

 export const toBase64 = (file) =>
-    new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.readAsDataURL(file);
-        reader.onload = () => resolve(reader.result.split(",").pop());
-        reader.onerror = (error) => reject(error);
-    });
+  new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result.split(",").pop());
+    reader.onerror = (error) => reject(error);
+  });

 export function checkImage(file) {
-    // check filename suffix
-    const isValidSuffix = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name);
-    if (!isValidSuffix) {
-        return {
-            ok: false,
-            msg: "请上传 JPG/PNG/GIF 格式的图片",
-        };
-    }
+  // check filename suffix
+  const isValidSuffix = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name);
+  if (!isValidSuffix) {
+    return {
+      ok: false,
+      msg: "请上传 JPG/PNG/GIF 格式的图片",
+    };
+  }

-    // check file size
-    const maxSize = 5;
-    const isLt5M = file.size / 1024 / 1024 <= maxSize;
-    if (!isLt5M) {
-        return {
-            ok: false,
-            msg: `由于公众号限制，图片大小不能超过 ${maxSize}M`,
-        };
-    }
-    return { ok: true };
+  // check file size
+  const maxSize = 5;
+  const isLt5M = file.size / 1024 / 1024 <= maxSize;
+  if (!isLt5M) {
+    return {
+      ok: false,
+      msg: `由于公众号限制，图片大小不能超过 ${maxSize}M`,
+    };
+  }
+  return { ok: true };
 }
--- a/src/components/CodemirrorEditor/aboutDialog.vue
+++ b/src/components/CodemirrorEditor/aboutDialog.vue
@ -1,57 +1,57 @@
 <template>
-    <el-dialog
-        title="关于"
-        class="about__dialog"
-        :visible="value"
-        @close="$emit('input', false)"
-        width="30%"
-        center
-    >
-        <div style="text-align: center">
-            <h3>一款高度简洁的微信 Markdown 编辑器</h3>
-        </div>
-        <div style="text-align: center; margin-top: 10px">
-            <p>扫码关注我的公众号，原创技术文章第一时间推送！</p>
-            <img
-                src="https://gitee.com/yanglbme/resource/raw/master/doocs-md/qrcode.png"
-                style="width: 40%; display: block; margin: 20px auto 10px"
-            />
-        </div>
-        <span slot="footer" class="dialog-footer">
-            <el-button
-                type="primary"
-                @click="onRedirect('https://github.com/doocs/md')"
-                plain
-                >GitHub 仓库</el-button
-            >
-            <el-button
-                type="primary"
-                @click="onRedirect('https://gitee.com/doocs/md')"
-                plain
-                >Gitee 仓库</el-button
-            >
-        </span>
-    </el-dialog>
+  <el-dialog
+    title="关于"
+    class="about__dialog"
+    :visible="value"
+    @close="$emit('input', false)"
+    width="30%"
+    center
+  >
+    <div style="text-align: center">
+      <h3>一款高度简洁的微信 Markdown 编辑器</h3>
+    </div>
+    <div style="text-align: center; margin-top: 10px">
+      <p>扫码关注我的公众号，原创技术文章第一时间推送！</p>
+      <img
+        src="https://gitee.com/yanglbme/resource/raw/master/doocs-md/qrcode.png"
+        style="width: 40%; display: block; margin: 20px auto 10px"
+      />
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button
+        type="primary"
+        @click="onRedirect('https://github.com/doocs/md')"
+        plain
+        >GitHub 仓库</el-button
+      >
+      <el-button
+        type="primary"
+        @click="onRedirect('https://gitee.com/doocs/md')"
+        plain
+        >Gitee 仓库</el-button
+      >
+    </span>
+  </el-dialog>
 </template>

 <script>
 export default {
-    props: {
-        value: {
-            type: Boolean,
-            default: false,
-        },
+  props: {
+    value: {
+      type: Boolean,
+      default: false,
    },
-    methods: {
-        onRedirect(url) {
-            window.open(url);
-        },
+  },
+  methods: {
+    onRedirect(url) {
+      window.open(url);
    },
+  },
 };
 </script>

 <style lang="less" scoped>
 /deep/ .el-dialog {
-    min-width: 420px;
+  min-width: 420px;
 }
 </style>
--- a/src/components/CodemirrorEditor/header.vue
+++ b/src/components/CodemirrorEditor/header.vue
@ -1,194 +1,186 @@
 <template>
-    <el-container class="top is-dark">
-        <!-- 图片上传 -->
-        <el-tooltip
-            :effect="effect"
-            content="上传图片"
-            placement="bottom-start"
+  <el-container class="top is-dark">
+    <div class="left-side">
+      <!-- 图片上传 -->
+      <el-tooltip :effect="effect" content="上传图片" placement="bottom-start">
+        <i
+          class="el-icon-upload"
+          size="medium"
+          @click="$emit('show-dialog-upload-img')"
+        ></i>
+      </el-tooltip>
+      <!-- 下载文本文档 -->
+      <el-tooltip
+        class="header__item"
+        :effect="effect"
+        content="下载 Markdown 文档"
+        placement="bottom-start"
+      >
+        <i
+          class="el-icon-download"
+          size="medium"
+          @click="$emit('download')"
+        ></i>
+      </el-tooltip>
+      <!-- 页面重置 -->
+      <el-tooltip
+        class="header__item"
+        :effect="effect"
+        content="重置页面"
+        placement="bottom-start"
+      >
+        <i
+          class="el-icon-refresh"
+          size="medium"
+          @click="showResetConfirm = true"
+        ></i>
+      </el-tooltip>
+      <!-- 插入表格 -->
+      <el-tooltip
+        class="header__item header__item_last"
+        :effect="effect"
+        content="插入表格"
+        placement="bottom-start"
+      >
+        <i
+          class="el-icon-s-grid"
+          size="medium"
+          @click="$emit('show-dialog-form')"
+        ></i>
+      </el-tooltip>
+      <el-select
+        v-model="selectFont"
+        size="mini"
+        placeholder="选择字体"
+        clearable
+        @change="fontChanged"
+      >
+        <el-option
+          v-for="font in config.builtinFonts"
+          :style="{ fontFamily: font.value }"
+          :key="font.value"
+          :label="font.label"
+          :value="font.value"
        >
-            <i
-                class="el-icon-upload"
-                size="medium"
-                @click="$emit('show-dialog-upload-img')"
-            ></i>
-        </el-tooltip>
-        <!-- 下载文本文档 -->
-        <el-tooltip
-            class="header__item"
-            :effect="effect"
-            content="下载 Markdown 文档"
-            placement="bottom-start"
+          <span class="select-item-left">{{ font.label }}</span>
+          <span class="select-item-right">Abc</span>
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="selectSize"
+        size="mini"
+        placeholder="选择段落字号"
+        clearable
+        @change="sizeChanged"
+      >
+        <el-option
+          v-for="size in config.sizeOption"
+          :key="size.value"
+          :label="size.label"
+          :value="size.value"
        >
-            <i
-                class="el-icon-download"
-                size="medium"
-                @click="$emit('download')"
-            ></i>
-        </el-tooltip>
-        <!-- 页面重置 -->
-        <el-tooltip
-            class="header__item"
-            :effect="effect"
-            content="重置页面"
-            placement="bottom-start"
+          <span class="select-item-left">{{ size.label }}</span>
+          <span class="select-item-right">{{ size.desc }}</span>
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="selectColor"
+        size="mini"
+        placeholder="选择颜色"
+        clearable
+        @change="colorChanged"
+      >
+        <el-option
+          v-for="color in config.colorOption"
+          :key="color.value"
+          :label="color.label"
+          :value="color.value"
        >
-            <i
-                class="el-icon-refresh"
-                size="medium"
-                @click="showResetConfirm = true"
-            ></i>
-        </el-tooltip>
-        <!-- 插入表格 -->
-        <el-tooltip
-            class="header__item header__item_last"
-            :effect="effect"
-            content="插入表格"
-            placement="bottom-start"
+          <span class="select-item-left">{{ color.label }}</span>
+          <span class="select-item-right">{{ color.desc }}</span>
+        </el-option>
+      </el-select>
+      <el-tooltip content="自定义颜色" :effect="effect" placement="top">
+        <el-color-picker
+          v-model="selectColor"
+          size="mini"
+          show-alpha
+          @change="colorChanged"
+        ></el-color-picker>
+      </el-tooltip>
+      <el-tooltip
+        content="微信外链自动转为文末引用"
+        :effect="effect"
+        placement="top"
+      >
+        <el-switch
+          class="header__switch"
+          v-model="citeStatus"
+          active-color="#67c23a"
+          inactive-color="#dcdfe6"
+          @change="statusChanged"
        >
-            <i
-                class="el-icon-s-grid"
-                size="medium"
-                @click="$emit('show-dialog-form')"
-            ></i>
-        </el-tooltip>
-        <el-form size="mini" class="ctrl" :inline="true">
-            <el-form-item>
-                <el-select
-                    v-model="selectFont"
-                    size="mini"
-                    placeholder="选择字体"
-                    clearable
-                    @change="fontChanged"
-                >
-                    <el-option
-                        v-for="font in config.builtinFonts"
-                        :style="{ fontFamily: font.value }"
-                        :key="font.value"
-                        :label="font.label"
-                        :value="font.value"
-                    >
-                        <span class="select-item-left">{{ font.label }}</span>
-                        <span class="select-item-right">Abc</span>
-                    </el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item>
-                <el-select
-                    v-model="selectSize"
-                    size="mini"
-                    placeholder="选择段落字号"
-                    clearable
-                    @change="sizeChanged"
-                >
-                    <el-option
-                        v-for="size in config.sizeOption"
-                        :key="size.value"
-                        :label="size.label"
-                        :value="size.value"
-                    >
-                        <span class="select-item-left">{{ size.label }}</span>
-                        <span class="select-item-right">{{ size.desc }}</span>
-                    </el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item>
-                <el-select
-                    v-model="selectColor"
-                    size="mini"
-                    placeholder="选择颜色"
-                    clearable
-                    @change="colorChanged"
-                >
-                    <el-option
-                        v-for="color in config.colorOption"
-                        :key="color.value"
-                        :label="color.label"
-                        :value="color.value"
-                    >
-                        <span class="select-item-left">{{ color.label }}</span>
-                        <span class="select-item-right">{{ color.desc }}</span>
-                    </el-option>
-                </el-select>
-            </el-form-item>
-            <el-tooltip content="自定义颜色" :effect="effect" placement="top">
-                <el-color-picker
-                    v-model="selectColor"
-                    size="mini"
-                    show-alpha
-                    @change="colorChanged"
-                ></el-color-picker>
-            </el-tooltip>
-            <el-tooltip
-                content="微信外链自动转为文末引用"
-                :effect="effect"
-                placement="top"
-            >
-                <el-switch
-                    class="header__switch"
-                    v-model="citeStatus"
-                    active-color="#67c23a"
-                    inactive-color="#dcdfe6"
-                    @change="statusChanged"
-                >
-                </el-switch>
-            </el-tooltip>
-        </el-form>
-        <el-tooltip
-            class="item"
-            :effect="effect"
-            content="自定义CSS样式"
-            placement="left"
-        >
-            <el-button
-                :type="btnType"
-                plain
-                size="medium"
-                icon="el-icon-setting"
-                @click="customStyle"
-            ></el-button>
-        </el-tooltip>
+        </el-switch>
+      </el-tooltip>
+    </div>
+    <div class="right-side">
+      <el-tooltip
+        class="item"
+        :effect="effect"
+        content="自定义CSS样式"
+        placement="left"
+      >
        <el-button
-            :type="btnType"
-            plain
-            size="medium"
-            @click="copy"
-            placement="bottom-start"
-            >复制</el-button
-        >
-        <el-button
-            :type="btnType"
-            plain
-            size="medium"
-            class="about"
-            @click="$emit('show-about-dialog')"
-            >关于</el-button
-        >
-        <el-tooltip
-            :content="btnContent"
-            :effect="effect"
-            placement="bottom-start"
-        >
-            <div
-                class="mode__switch mode__switch_black"
-                v-if="nightMode"
-                @click="themeChanged"
-            ></div>
-            <div class="mode__switch" v-else @click="themeChanged"></div>
-        </el-tooltip>
-        <resetDialog
-            :showResetConfirm="showResetConfirm"
-            @confirm="confirmReset"
-            @close="cancelReset"
-        />
-    </el-container>
+          :type="btnType"
+          plain
+          size="medium"
+          icon="el-icon-setting"
+          @click="customStyle"
+        ></el-button>
+      </el-tooltip>
+      <el-button
+        :type="btnType"
+        plain
+        size="medium"
+        @click="copy"
+        placement="bottom-start"
+        >复制</el-button
+      >
+      <el-button
+        :type="btnType"
+        plain
+        size="medium"
+        class="about"
+        @click="$emit('show-about-dialog')"
+        >关于</el-button
+      >
+      <el-tooltip
+        :content="btnContent"
+        :effect="effect"
+        placement="bottom-start"
+      >
+        <div
+          class="mode__switch mode__switch_black"
+          v-if="nightMode"
+          @click="themeChanged"
+        ></div>
+        <div class="mode__switch" v-else @click="themeChanged"></div>
+      </el-tooltip>
+    </div>
+    <resetDialog
+      :showResetConfirm="showResetConfirm"
+      @confirm="confirmReset"
+      @close="cancelReset"
+    />
+  </el-container>
 </template>

 <script>
 import {
-    downloadMD,
-    setFontSize,
-    fixCodeWhiteSpace,
-    setColorWithCustomTemplate,
+  downloadMD,
+  setFontSize,
+  fixCodeWhiteSpace,
+  setColorWithCustomTemplate,
 } from "../../assets/scripts/util";
 import { solveWeChatImage, solveHtml } from "../../assets/scripts/converter";
 import config from "../../assets/scripts/config";
@ -196,196 +188,226 @@ import DEFAULT_CSS_CONTENT from "../../assets/scripts/themes/default-theme-css";
 import resetDialog from "./resetDialog";
 import { mapState, mapMutations } from "vuex";
 export default {
-    name: "editor-header",
-    data() {
-        return {
-            config: config,
-            citeStatus: false,
-            showResetConfirm: false,
-            selectFont: "",
-            selectSize: "",
-            selectColor: "",
-            selectCodeTheme: "github",
-        };
+  name: "editor-header",
+  data() {
+    return {
+      config: config,
+      citeStatus: false,
+      showResetConfirm: false,
+      selectFont: "",
+      selectSize: "",
+      selectColor: "",
+      selectCodeTheme: "github",
+    };
+  },
+  components: {
+    resetDialog,
+  },
+  computed: {
+    effect() {
+      return this.nightMode ? "dark" : "light";
    },
-    components: {
-        resetDialog,
+    btnContent() {
+      return this.nightMode ? "浅色模式" : "暗黑模式";
    },
-    computed: {
-        effect() {
-            return this.nightMode ? "dark" : "light";
-        },
-        btnContent() {
-            return this.nightMode ? "浅色模式" : "暗黑模式";
-        },
-        btnType() {
-            return this.nightMode ? "default" : "primary";
-        },
-        ...mapState({
-            output: (state) => state.output,
-            editor: (state) => state.editor,
-            cssEditor: (state) => state.cssEditor,
-            currentFont: (state) => state.currentFont,
-            currentSize: (state) => state.currentSize,
-            currentColor: (state) => state.currentColor,
-            codeTheme: (state) => state.codeTheme,
-            nightMode: (state) => state.nightMode,
-        }),
+    btnType() {
+      return this.nightMode ? "default" : "primary";
    },
-    methods: {
-        fontChanged(fonts) {
-            this.setWxRendererOptions({
-                fonts: fonts,
-            });
-            this.setCurrentFont(fonts);
-            this.$emit("refresh");
-        },
-        sizeChanged(size) {
-            let theme = setFontSize(size.replace("px", ""));
-            theme = setColorWithCustomTemplate(theme, this.currentColor);
-            this.setWxRendererOptions({
-                size: size,
-                theme: theme,
-            });
-            this.setCurrentSize(size);
-            this.$emit("refresh");
-        },
-        colorChanged(color) {
-            let theme = setFontSize(this.currentSize.replace("px", ""));
+    ...mapState({
+      output: (state) => state.output,
+      editor: (state) => state.editor,
+      cssEditor: (state) => state.cssEditor,
+      currentFont: (state) => state.currentFont,
+      currentSize: (state) => state.currentSize,
+      currentColor: (state) => state.currentColor,
+      codeTheme: (state) => state.codeTheme,
+      nightMode: (state) => state.nightMode,
+    }),
+  },
+  methods: {
+    fontChanged(fonts) {
+      this.setWxRendererOptions({
+        fonts: fonts,
+      });
+      this.setCurrentFont(fonts);
+      this.$emit("refresh");
+    },
+    sizeChanged(size) {
+      let theme = setFontSize(size.replace("px", ""));
+      theme = setColorWithCustomTemplate(theme, this.currentColor);
+      this.setWxRendererOptions({
+        size: size,
+        theme: theme,
+      });
+      this.setCurrentSize(size);
+      this.$emit("refresh");
+    },
+    colorChanged(color) {
+      let theme = setFontSize(this.currentSize.replace("px", ""));

-            theme = setColorWithCustomTemplate(theme, color);
-            this.setWxRendererOptions({
-                theme: theme,
-            });
-            this.setCurrentColor(color);
-            this.$emit("refresh");
-        },
-        codeThemeChanged(theme) {
-            this.setCurrentCodeTheme(theme);
-            this.$emit("refresh");
-        },
-        statusChanged(val) {
-            this.setCiteStatus(val);
-            this.$emit("refresh");
-        },
-        // 复制到微信公众号
-        copy(e) {
-            this.$emit("startCopy");
-            setTimeout(() => {
-                let clipboardDiv = document.getElementById("output");
-                solveWeChatImage();
-                fixCodeWhiteSpace();
-                solveHtml();
-                clipboardDiv.focus();
-                window.getSelection().removeAllRanges();
-                let range = document.createRange();
-
-                range.setStartBefore(clipboardDiv.firstChild);
-                range.setEndAfter(clipboardDiv.lastChild);
-                window.getSelection().addRange(range);
-                document.execCommand("copy");
-                window.getSelection().removeAllRanges();
-                fixCodeWhiteSpace("normal");
-
-                clipboardDiv.innerHTML = this.output;
-                // 输出提示
-                this.$notify({
-                    showClose: true,
-                    message:
-                        "已复制渲染后的文章到剪贴板，可直接到公众号后台粘贴",
-                    offset: 80,
-                    duration: 1600,
-                    type: "success",
-                });
-                this.$emit("refresh");
-                this.$emit("endCopy");
-            }, 350);
-            e.target.blur();
-        },
-        // 自定义CSS样式
-        async customStyle() {
-            this.$emit("showCssEditor");
-            this.$nextTick(() => {
-                if (!this.cssEditor) {
-                    this.cssEditor.refresh();
-                }
-            });
-            setTimeout(() => {
-                this.cssEditor.refresh();
-            }, 50);
-
-            let flag = await localStorage.getItem("__css_content");
-            if (!flag) {
-                this.setCssEditorValue(DEFAULT_CSS_CONTENT);
-            }
-        },
-        // 重置页面
-        confirmReset() {
-            localStorage.clear();
-            this.clearEditorToDefault();
-            this.editor.focus();
-            this.citeStatus = false;
-            this.statusChanged(false);
-            this.fontChanged(this.config.builtinFonts[0].value);
-            this.colorChanged(this.config.colorOption[0].value);
-            this.sizeChanged(this.config.sizeOption[2].value);
-            this.$emit("cssChanged");
-            this.selectFont = this.currentFont;
-            this.selectSize = this.currentSize;
-            this.selectColor = this.currentColor;
-            this.showResetConfirm = false;
-        },
-        cancelReset() {
-            this.showResetConfirm = false;
-            this.editor.focus();
-        },
-        ...mapMutations([
-            "clearEditorToDefault",
-            "setCurrentColor",
-            "setCiteStatus",
-            "themeChanged",
-            "setCurrentFont",
-            "setCurrentSize",
-            "setCssEditorValue",
-            "setCurrentCodeTheme",
-            "setWxRendererOptions",
-        ]),
+      theme = setColorWithCustomTemplate(theme, color);
+      this.setWxRendererOptions({
+        theme: theme,
+      });
+      this.setCurrentColor(color);
+      this.$emit("refresh");
    },
-    mounted() {
-        this.selectFont = this.currentFont;
-        this.selectSize = this.currentSize;
-        this.selectColor = this.currentColor;
-        this.selectCodeTheme = this.codeTheme;
+    codeThemeChanged(theme) {
+      this.setCurrentCodeTheme(theme);
+      this.$emit("refresh");
    },
+    statusChanged(val) {
+      this.setCiteStatus(val);
+      this.$emit("refresh");
+    },
+    // 复制到微信公众号
+    copy(e) {
+      this.$emit("startCopy");
+      setTimeout(() => {
+        let clipboardDiv = document.getElementById("output");
+        solveWeChatImage();
+        fixCodeWhiteSpace();
+        solveHtml();
+        clipboardDiv.focus();
+        window.getSelection().removeAllRanges();
+        let range = document.createRange();
+
+        range.setStartBefore(clipboardDiv.firstChild);
+        range.setEndAfter(clipboardDiv.lastChild);
+        window.getSelection().addRange(range);
+        document.execCommand("copy");
+        window.getSelection().removeAllRanges();
+        fixCodeWhiteSpace("normal");
+
+        clipboardDiv.innerHTML = this.output;
+        // 输出提示
+        this.$notify({
+          showClose: true,
+          message: "已复制渲染后的文章到剪贴板，可直接到公众号后台粘贴",
+          offset: 80,
+          duration: 1600,
+          type: "success",
+        });
+        this.$emit("refresh");
+        this.$emit("endCopy");
+      }, 350);
+    },
+    // 自定义CSS样式
+    async customStyle() {
+      this.$emit("showCssEditor");
+      this.$nextTick(() => {
+        if (!this.cssEditor) {
+          this.cssEditor.refresh();
+        }
+      });
+      setTimeout(() => {
+        this.cssEditor.refresh();
+      }, 50);
+
+      let flag = await localStorage.getItem("__css_content");
+      if (!flag) {
+        this.setCssEditorValue(DEFAULT_CSS_CONTENT);
+      }
+    },
+    // 重置页面
+    confirmReset() {
+      localStorage.clear();
+      this.clearEditorToDefault();
+      this.editor.focus();
+      this.citeStatus = false;
+      this.statusChanged(false);
+      this.fontChanged(this.config.builtinFonts[0].value);
+      this.colorChanged(this.config.colorOption[0].value);
+      this.sizeChanged(this.config.sizeOption[2].value);
+      this.$emit("cssChanged");
+      this.selectFont = this.currentFont;
+      this.selectSize = this.currentSize;
+      this.selectColor = this.currentColor;
+      this.showResetConfirm = false;
+    },
+    cancelReset() {
+      this.showResetConfirm = false;
+      this.editor.focus();
+    },
+    ...mapMutations([
+      "clearEditorToDefault",
+      "setCurrentColor",
+      "setCiteStatus",
+      "themeChanged",
+      "setCurrentFont",
+      "setCurrentSize",
+      "setCssEditorValue",
+      "setCurrentCodeTheme",
+      "setWxRendererOptions",
+    ]),
+  },
+  mounted() {
+    this.selectFont = this.currentFont;
+    this.selectSize = this.currentSize;
+    this.selectColor = this.currentColor;
+    this.selectCodeTheme = this.codeTheme;
+  },
 };
 </script>

 <style lang="less" scoped>
 .editor__header {
-    width: 100%;
+  width: 100%;
 }
 .header__item {
-    margin: 0 3px;
+  margin: 0 3px;
 }
 .header__item_last {
-    margin-right: 8px;
+  margin-right: 8px;
 }
 .header__switch {
-    margin-left: 8px;
+  margin-left: 8px;
 }
 .mode__switch {
-    margin-left: 24px;
-    width: 24px;
-    height: 24px;
-    background: url("../../assets/images/night.png") no-repeat;
-    background-size: cover;
-    transition: all 0.3s;
+  margin-left: 24px;
+  margin-right: 24px;
+  width: 24px;
+  height: 24px;
+  background: url("../../assets/images/night.png") no-repeat;
+  background-size: cover;
+  transition: all 0.3s;
 }
 .mode__switch_black {
-    background: url("../../assets/images/light.png") no-repeat;
-    background-size: cover;
+  background: url("../../assets/images/light.png") no-repeat;
+  background-size: cover;
 }
 .top {
-    margin-right: 0;
+  height: 60px;
+  padding: 10px 20px;
+  display: flex;
+  align-items: center;
+  margin-right: 0;
+}
+.el-select {
+  margin-right: 12px;
+}
+.left-side {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+.right-side {
+  display: flex;
+  align-items: center;
+}
+
+/*
+.preview table tr:nth-child(even){
+  background: rgb(250, 250, 250);
+}
+ */
+.select-item-left {
+  float: left;
+}
+
+.select-item-right {
+  float: right;
+  color: #8492a6;
+  font-size: 13px;
 }
 </style>
--- a/src/components/CodemirrorEditor/insertForm.vue
+++ b/src/components/CodemirrorEditor/insertForm.vue
@ -1,57 +1,55 @@
 <template>
-    <el-dialog
-        title="插入表格"
-        class="insert__dialog"
-        :visible="value"
-        @close="$emit('input', false)"
-        border
-    >
-        <el-row class="tb-options" type="flex" align="middle" :gutter="10">
-            <el-col>
-                行数：
-                <el-input-number
-                    v-model="rowNum"
-                    controls-position="right"
-                    :min="1"
-                    :max="100"
-                    size="small"
-                ></el-input-number>
-            </el-col>
-            <el-col>
-                列数：
-                <el-input-number
-                    v-model="colNum"
-                    controls-position="right"
-                    :min="1"
-                    :max="100"
-                    size="small"
-                ></el-input-number>
-            </el-col>
-        </el-row>
-        <table style="border-collapse: collapse" class="input-table">
-            <tr
-                :class="{ 'head-style': row === 1 }"
-                v-for="row in rowNum + 1"
-                :key="row"
-            >
-                <td v-for="col in colNum" :key="col">
-                    <el-input
-                        align="center"
-                        v-model="tableData[`k_${row - 1}_${col - 1}`]"
-                        :placeholder="row === 1 ? '表头' : ''"
-                    />
-                </td>
-            </tr>
-        </table>
-        <div slot="footer" class="dialog-footer">
-            <el-button :type="btnType" plain @click="$emit('input', false)"
-                >取 消</el-button
-            >
-            <el-button :type="btnType" @click="insertTable" plain
-                >确 定</el-button
-            >
-        </div>
-    </el-dialog>
+  <el-dialog
+    title="插入表格"
+    class="insert__dialog"
+    :visible="value"
+    @close="$emit('input', false)"
+    border
+  >
+    <el-row class="tb-options" type="flex" align="middle" :gutter="10">
+      <el-col>
+        行数：
+        <el-input-number
+          v-model="rowNum"
+          controls-position="right"
+          :min="1"
+          :max="100"
+          size="small"
+        ></el-input-number>
+      </el-col>
+      <el-col>
+        列数：
+        <el-input-number
+          v-model="colNum"
+          controls-position="right"
+          :min="1"
+          :max="100"
+          size="small"
+        ></el-input-number>
+      </el-col>
+    </el-row>
+    <table style="border-collapse: collapse" class="input-table">
+      <tr
+        :class="{ 'head-style': row === 1 }"
+        v-for="row in rowNum + 1"
+        :key="row"
+      >
+        <td v-for="col in colNum" :key="col">
+          <el-input
+            align="center"
+            v-model="tableData[`k_${row - 1}_${col - 1}`]"
+            :placeholder="row === 1 ? '表头' : ''"
+          />
+        </td>
+      </tr>
+    </table>
+    <div slot="footer" class="dialog-footer">
+      <el-button :type="btnType" plain @click="$emit('input', false)"
+        >取 消</el-button
+      >
+      <el-button :type="btnType" @click="insertTable" plain>确 定</el-button>
+    </div>
+  </el-dialog>
 </template>

 <script>
@ -59,66 +57,66 @@ import config from "../../assets/scripts/config";
 import { createTable } from "../../assets/scripts/util";
 import { mapState, mapMutations } from "vuex";
 export default {
-    props: {
-        value: {
-            type: Boolean,
-            default: false,
-        },
+  props: {
+    value: {
+      type: Boolean,
+      default: false,
    },
-    data() {
-        return {
-            config: config,
-            rowNum: 3,
-            colNum: 3,
-            tableData: {},
-        };
+  },
+  data() {
+    return {
+      config: config,
+      rowNum: 3,
+      colNum: 3,
+      tableData: {},
+    };
+  },
+  computed: {
+    btnType() {
+      return this.nightMode ? "default" : "primary";
    },
-    computed: {
-        btnType() {
-            return this.nightMode ? "default" : "primary";
-        },
-        ...mapState({
-            nightMode: (state) => state.nightMode,
-            editor: (state) => state.editor,
-        }),
-    },
-    methods: {
-        // 插入表格
-        insertTable() {
-            const cursor = this.editor.getCursor();
-            const table = createTable({
-                data: this.tableData,
-                rows: this.rowNum,
-                cols: this.colNum,
-            });
+    ...mapState({
+      nightMode: (state) => state.nightMode,
+      editor: (state) => state.editor,
+    }),
+  },
+  methods: {
+    // 插入表格
+    insertTable() {
+      const cursor = this.editor.getCursor();
+      const table = createTable({
+        data: this.tableData,
+        rows: this.rowNum,
+        cols: this.colNum,
+      });

-            this.tableData = {};
-            this.rowNum = 3;
-            this.colNum = 3;
-            this.editor.replaceSelection(`\n${table}\n`, "end");
-            this.$emit("input", false);
-            this.editorRefresh();
-        },
-        ...mapMutations(["editorRefresh"]),
+      this.tableData = {};
+      this.rowNum = 3;
+      this.colNum = 3;
+      this.editor.replaceSelection(`\n${table}\n`, "end");
+      this.$emit("input", false);
+      this.editorRefresh();
    },
+    ...mapMutations(["editorRefresh"]),
+  },
 };
 </script>

 <style lang="less" scoped>
 /deep/ .el-dialog {
-    width: 55%;
-    min-height: 375px;
-    min-width: 440px;
+  width: 55%;
+  min-height: 375px;
+  min-width: 440px;
 }
 .tb-options {
-    margin-bottom: 20px;
+  margin-bottom: 20px;
 }

 .input-table ::v-deep .el-input__inner {
-    border-radius: 0;
+  border-radius: 0;
 }

 .head-style /deep/ .el-input__inner {
-    background-color: #f2f2f2;
+  background-color: #f2f2f2;
 }
 </style>
--- a/src/components/CodemirrorEditor/resetDialog.vue
+++ b/src/components/CodemirrorEditor/resetDialog.vue
@ -1,57 +1,53 @@
 <template>
-    <el-dialog
-        title="提示"
-        class="reset__dialog"
-        :visible="showResetConfirm"
-        @close="$emit('close')"
-    >
-        <div class="text">
-            此操作将丢失本地缓存的文本和自定义样式，是否继续?
-        </div>
-        <div slot="footer" class="dialog-footer">
-            <el-button :type="btnType" plain @click="$emit('close')"
-                >取 消</el-button
-            >
-            <el-button :type="btnType" @click="$emit('confirm')" plain
-                >确 定</el-button
-            >
-        </div>
-    </el-dialog>
+  <el-dialog
+    title="提示"
+    class="reset__dialog"
+    :visible="showResetConfirm"
+    @close="$emit('close')"
+  >
+    <div class="text">此操作将丢失本地缓存的文本和自定义样式，是否继续?</div>
+    <div slot="footer" class="dialog-footer">
+      <el-button :type="btnType" plain @click="$emit('close')">取 消</el-button>
+      <el-button :type="btnType" @click="$emit('confirm')" plain
+        >确 定</el-button
+      >
+    </div>
+  </el-dialog>
 </template>

 <script>
 import { mapState } from "vuex";
 export default {
-    props: {
-        showResetConfirm: {
-            type: Boolean,
-            default: false,
-        },
+  props: {
+    showResetConfirm: {
+      type: Boolean,
+      default: false,
    },
-    computed: {
-        btnType() {
-            return this.nightMode ? "default" : "primary";
-        },
-        ...mapState({
-            nightMode: (state) => state.nightMode,
-        }),
+  },
+  computed: {
+    btnType() {
+      return this.nightMode ? "default" : "primary";
    },
+    ...mapState({
+      nightMode: (state) => state.nightMode,
+    }),
+  },
 };
 </script>

 <style lang="less" scoped>
 /deep/ .el-dialog {
-    min-width: 440px;
+  min-width: 440px;
 }
 .reset__dialog {
-    text-align: center;
+  text-align: center;
 }

 .text {
-    text-align: center;
+  text-align: center;
 }

 .dialog-footer {
-    text-align: center;
+  text-align: center;
 }
 </style>
--- a/src/components/CodemirrorEditor/rightClickMenu.vue
+++ b/src/components/CodemirrorEditor/rightClickMenu.vue
@ -1,139 +1,139 @@
 <template>
-    <ul
-        v-show="value"
-        id="menu"
-        class="menu"
-        :style="`left: ${left}px;top: ${top}px;`"
-    >
-        <div class="menu__group" v-for="(menuItem, index) in menu" :key="index">
-            <li
-                v-for="item of menuItem"
-                :key="item.key"
-                class="menu_item"
-                @mousedown="onMouseDown(item.key)"
-            >
-                <span>{{ item.text }}</span>
-            </li>
-        </div>
-    </ul>
+  <ul
+    v-show="value"
+    id="menu"
+    class="menu"
+    :style="`left: ${left}px;top: ${top}px;`"
+  >
+    <div class="menu__group" v-for="(menuItem, index) in menu" :key="index">
+      <li
+        v-for="item of menuItem"
+        :key="item.key"
+        class="menu_item"
+        @mousedown="onMouseDown(item.key)"
+      >
+        <span>{{ item.text }}</span>
+      </li>
+    </div>
+  </ul>
 </template>

 <script>
 export default {
-    props: {
-        value: {
-            type: Boolean,
-            default: false,
-        },
-        top: {
-            type: Number,
-            default: 0,
-        },
-        left: {
-            type: Number,
-            default: 0,
-        },
+  props: {
+    value: {
+      type: Boolean,
+      default: false,
    },
-    data() {
-        return {
-            menu: [
-                [
-                    {
-                        text: "上传图片",
-                        key: "insertPic",
-                    },
-                    {
-                        text: "插入表格",
-                        key: "insertTable",
-                    },
-                    {
-                        text: "页面重置",
-                        key: "pageReset",
-                    },
-                ],
-                [
-                    {
-                        text: "下载 Markdown 文档",
-                        key: "download",
-                    },
-                    {
-                        text: "格式化 Markdown 文档",
-                        key: "formatMarkdown",
-                    },
-                ],
-            ],
-        };
+    top: {
+      type: Number,
+      default: 0,
    },
-    methods: {
-        closeCB() {
-            this.$emit("input", false);
-        },
-        onMouseDown(key) {
-            this.$emit("menuTick", key);
-            this.$emit("closeMenu", false);
-        },
+    left: {
+      type: Number,
+      default: 0,
    },
+  },
+  data() {
+    return {
+      menu: [
+        [
+          {
+            text: "上传图片",
+            key: "insertPic",
+          },
+          {
+            text: "插入表格",
+            key: "insertTable",
+          },
+          {
+            text: "页面重置",
+            key: "pageReset",
+          },
+        ],
+        [
+          {
+            text: "下载 Markdown 文档",
+            key: "download",
+          },
+          {
+            text: "格式化 Markdown 文档",
+            key: "formatMarkdown",
+          },
+        ],
+      ],
+    };
+  },
+  methods: {
+    closeCB() {
+      this.$emit("input", false);
+    },
+    onMouseDown(key) {
+      this.$emit("menuTick", key);
+      this.$emit("closeMenu", false);
+    },
+  },
 };
 </script>

 <style lang="less" scoped>
 .menu {
-    position: absolute;
-    border-radius: 4px;
-    background-color: #ffffff;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
-    z-index: 9999;
+  position: absolute;
+  border-radius: 4px;
+  background-color: #ffffff;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+  z-index: 9999;
 }

 .menu_item {
-    margin-top: 10px;
-    min-width: 200px;
-    font-size: 12px;
-    line-height: 20px;
-    color: #333333;
-    cursor: pointer;
-    &:first-of-type {
-        margin-top: 0;
-    }
-    &:hover {
-        background: #f0f0f0;
-    }
-    span,
-    .btn-upload {
-        display: inline-block;
-        padding: 4px 0;
-        padding-left: 24px;
-        width: 100%;
-    }
-    .btn-upload {
-        margin: 0;
-        border: none;
-        outline: none;
-        background: transparent;
-    }
-    .btn-upload:hover {
-        background: #aaaaaa;
-    }
-    ::v-deep .el-upload {
-        width: 100%;
-    }
+  margin-top: 10px;
+  min-width: 200px;
+  font-size: 12px;
+  line-height: 20px;
+  color: #333333;
+  cursor: pointer;
+  &:first-of-type {
+    margin-top: 0;
+  }
+  &:hover {
+    background: #f0f0f0;
+  }
+  span,
+  .btn-upload {
+    display: inline-block;
+    padding: 4px 0;
+    padding-left: 24px;
+    width: 100%;
+  }
+  .btn-upload {
+    margin: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+  }
+  .btn-upload:hover {
+    background: #aaaaaa;
+  }
+  ::v-deep .el-upload {
+    width: 100%;
+  }
 }

 .menu__group {
-    padding-top: 6px;
-    padding-bottom: 6px;
-    border-bottom: 1px solid #eeeeee;
-    &:last-of-type {
-        border-bottom: none;
-    }
+  padding-top: 6px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid #eeeeee;
+  &:last-of-type {
+    border-bottom: none;
+  }
 }

 li:hover {
-    background-color: #1790ff;
+  background-color: #1790ff;
 }

 li {
-    font-size: 15px;
-    list-style: none;
+  font-size: 15px;
+  list-style: none;
 }
 </style>
--- a/src/components/CodemirrorEditor/uploadImgDialog.vue
+++ b/src/components/CodemirrorEditor/uploadImgDialog.vue
--- a/src/components/Loading.vue
+++ b/src/components/Loading.vue
@ -1,47 +1,47 @@
 <template>
-    <div class="loading" id="loading">
-        <div class="loading-wrapper">
-            <div class="loading-anim"></div>
-            <div class="loading-text">致力于让 Markdown 编辑更简单</div>
-        </div>
+  <div class="loading" id="loading">
+    <div class="loading-wrapper">
+      <div class="loading-anim"></div>
+      <div class="loading-text">致力于让 Markdown 编辑更简单</div>
    </div>
+  </div>
 </template>

 <script></script>

 <style lang="less" scoped>
 .loading-wrapper {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
 }
 .loading {
-    text-align: center;
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    z-index: 99999;
-    background-color: #f2f2f2;
+  text-align: center;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: 99999;
+  background-color: #f2f2f2;
 }

 .loading_night {
-    background-color: #303133;
+  background-color: #303133;
 }

 .loading-text {
-    font-size: 18px;
-    font-weight: bold;
-    margin-top: 26px;
-    color: #303133;
+  font-size: 18px;
+  font-weight: bold;
+  margin-top: 26px;
+  color: #303133;
 }

 .loading-anim {
-    display: inline-block;
-    width: 100px;
-    height: 100px;
-    background: url("../assets/images/favicon.png") no-repeat;
-    background-size: cover;
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: url("../assets/images/favicon.png") no-repeat;
+  background-size: cover;
 }
 </style>
--- a/src/main.js
+++ b/src/main.js
@ -1,5 +1,5 @@
 import Vue from "vue";
-import App from "./App.vue";
+import App from "./App";
 import store from "./store";
 import ElementUI from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";
@ -13,13 +13,15 @@ import "codemirror/addon/edit/matchbrackets";
 import "codemirror/addon/selection/active-line";
 import "codemirror/addon/hint/show-hint.js";
 import "codemirror/addon/hint/css-hint.js";
-import "./assets/less/theme.less";

 Vue.use(ElementUI);

 Vue.config.productionTip = false;

-new Vue({
-    store,
-    render: (h) => h(App),
-}).$mount("#app");
+App.mpType = "app";
+
+const app = new Vue({
+  store,
+  ...App,
+});
+app.$mount();
--- a/src/manifest.json
+++ b/src/manifest.json
@ -0,0 +1,71 @@
+{
+  "name": "uni-md",
+  "appid": "",
+  "description": "",
+  "versionName": "1.0.0",
+  "versionCode": "100",
+  "transformPx": false,
+  "h5": {
+    "publicPath": "/md/"
+  },
+  "app-plus": {
+    "usingComponents": true,
+    "splashscreen": {
+      "alwaysShowBeforeRender": true,
+      "waiting": true,
+      "autoclose": true,
+      "delay": 0
+    },
+    "modules": {},
+    "distribute": {
+      "android": {
+        "permissions": [
+          "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+          "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
+          "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+          "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+          "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+          "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+          "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
+          "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+          "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
+          "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+          "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
+          "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
+          "<uses-feature android:name=\"android.hardware.camera\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
+          "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+        ]
+      },
+      "ios": {},
+      "sdkConfigs": {}
+    }
+  },
+  "quickapp": {},
+  "mp-weixin": {
+    "appid": "",
+    "setting": {
+      "urlCheck": false
+    },
+    "usingComponents": true
+  },
+  "mp-alipay": {
+    "usingComponents": true
+  },
+  "mp-baidu": {
+    "usingComponents": true
+  },
+  "mp-toutiao": {
+    "usingComponents": true
+  },
+  "mp-qq": {
+    "usingComponents": true
+  }
+}
--- a/src/pages.json
+++ b/src/pages.json
@ -0,0 +1,17 @@
+{
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": ""
+      }
+    }
+  ],
+  "globalStyle": {
+    "navigationStyle": "custom",
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "uni-app",
+    "navigationBarBackgroundColor": "#F8F8F8",
+    "backgroundColor": "#F8F8F8"
+  }
+}
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@ -0,0 +1,43 @@
+<template>
+  <transition name="fade" v-if="loading">
+    <loading />
+  </transition>
+  <codemirror-editor v-else />
+</template>
+
+<script>
+import Loading from "../../components/Loading";
+import CodemirrorEditor from "./view/CodemirrorEditor";
+export default {
+  name: "App",
+  components: {
+    Loading,
+    CodemirrorEditor,
+  },
+  data() {
+    return {
+      loading: true,
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.loading = false;
+    }, 100);
+  },
+};
+</script>
+
+<style scoped>
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+.fade-enter-to,
+.fade-leave {
+  opacity: 1;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 1s;
+}
+</style>
--- a/src/pages/index/view/CodemirrorEditor.vue
+++ b/src/pages/index/view/CodemirrorEditor.vue
@ -0,0 +1,486 @@
+<template>
+  <div class="container" :class="{ container_night: nightMode }">
+    <el-container>
+      <el-header class="editor__header">
+        <editor-header
+          ref="header"
+          @refresh="onEditorRefresh"
+          @cssChanged="cssChanged"
+          @download="downloadEditorContent"
+          @showCssEditor="showCssEditor = !showCssEditor"
+          @show-about-dialog="aboutDialogVisible = true"
+          @show-dialog-form="dialogFormVisible = true"
+          @show-dialog-upload-img="dialogUploadImgVisible = true"
+          @startCopy="(isCoping = true), (backLight = true)"
+          @endCopy="endCopy"
+        />
+      </el-header>
+      <el-main class="main-body">
+        <el-row class="main-section">
+          <el-col
+            :span="12"
+            class="codeMirror-wrapper"
+            @contextmenu.prevent.native="openMenu($event)"
+          >
+            <textarea
+              id="editor"
+              type="textarea"
+              placeholder="Your markdown text here."
+              v-model="source"
+            >
+            </textarea>
+          </el-col>
+          <el-col
+            :span="12"
+            class="preview-wrapper"
+            id="preview"
+            ref="preview"
+            :class="{
+              'preview-wrapper_night': nightMode && isCoping,
+            }"
+          >
+            <section
+              id="output-wrapper"
+              :class="{ output_night: nightMode && !backLight }"
+            >
+              <div class="preview">
+                <section id="output" v-html="output"></section>
+                <div class="loading-mask" v-if="nightMode && isCoping">
+                  <div class="loading__img"></div>
+                  <span>正在生成</span>
+                </div>
+              </div>
+            </section>
+          </el-col>
+          <transition
+            name="custom-classes-transition"
+            enter-active-class="bounceInRight"
+          >
+            <el-col
+              id="cssBox"
+              v-show="showCssEditor"
+              :span="12"
+              class="cssEditor-wrapper"
+            >
+              <textarea
+                id="cssEditor"
+                type="textarea"
+                placeholder="Your custom css here."
+              >
+              </textarea>
+            </el-col>
+          </transition>
+        </el-row>
+      </el-main>
+    </el-container>
+    <upload-img-dialog
+      v-model="dialogUploadImgVisible"
+      @close="dialogUploadImgVisible = false"
+      @beforeUpload="beforeUpload"
+      @uploadImage="uploadImage"
+      @uploaded="uploaded"
+    />
+    <about-dialog v-model="aboutDialogVisible" />
+    <insert-form-dialog v-model="dialogFormVisible" />
+    <right-click-menu
+      v-model="rightClickMenuVisible"
+      :left="mouseLeft"
+      :top="mouseTop"
+      @menuTick="onMenuEvent"
+      @closeMenu="closeRightClickMenu"
+    />
+  </div>
+</template>
+<script>
+import editorHeader from "../../../components/CodemirrorEditor/header";
+import aboutDialog from "../../../components/CodemirrorEditor/aboutDialog";
+import insertFormDialog from "../../../components/CodemirrorEditor/insertForm";
+import rightClickMenu from "../../../components/CodemirrorEditor/rightClickMenu";
+import uploadImgDialog from "../../../components/CodemirrorEditor/uploadImgDialog";
+
+import {
+  css2json,
+  downloadMD,
+  formatDoc,
+  setFontSize,
+  saveEditorContent,
+  customCssWithTemplate,
+  checkImage,
+} from "../../../assets/scripts/util";
+
+import { toBase64 } from "../../../assets/scripts/util";
+import fileApi from "../../../api/file";
+
+require("codemirror/mode/javascript/javascript");
+import { mapState, mapMutations } from "vuex";
+export default {
+  data() {
+    return {
+      showCssEditor: false,
+      aboutDialogVisible: false,
+      dialogUploadImgVisible: false,
+      dialogFormVisible: false,
+      isCoping: false,
+      isImgLoading: false,
+      backLight: false,
+      timeout: null,
+      changeTimer: null,
+      source: "",
+      mouseLeft: 0,
+      mouseTop: 0,
+    };
+  },
+  components: {
+    editorHeader,
+    aboutDialog,
+    insertFormDialog,
+    rightClickMenu,
+    uploadImgDialog,
+  },
+  computed: {
+    ...mapState({
+      wxRenderer: (state) => state.wxRenderer,
+      output: (state) => state.output,
+      editor: (state) => state.editor,
+      cssEditor: (state) => state.cssEditor,
+      currentSize: (state) => state.currentSize,
+      currentColor: (state) => state.currentColor,
+      nightMode: (state) => state.nightMode,
+      rightClickMenuVisible: (state) => state.rightClickMenuVisible,
+    }),
+  },
+  created() {
+    this.initEditorState();
+    this.$nextTick(() => {
+      this.initEditor();
+      this.initCssEditor();
+      this.onEditorRefresh();
+    });
+  },
+  methods: {
+    initEditor() {
+      this.initEditorEntity();
+      this.editor.on("change", (cm, e) => {
+        if (this.changeTimer) clearTimeout(this.changeTimer);
+        this.changeTimer = setTimeout(() => {
+          this.onEditorRefresh();
+          saveEditorContent(this.editor, "__editor_content");
+        }, 300);
+      });
+
+      // 粘贴上传图片并插入
+      this.editor.on("paste", (cm, e) => {
+        if (!(e.clipboardData && e.clipboardData.items) || this.isImgLoading) {
+          return;
+        }
+        for (let i = 0, len = e.clipboardData.items.length; i < len; ++i) {
+          let item = e.clipboardData.items[i];
+          if (item.kind === "file") {
+            // 校验图床参数
+            const pasteFile = item.getAsFile();
+            const isValid = this.beforeUpload(pasteFile);
+            if (!isValid) {
+              continue;
+            }
+            this.uploadImage(pasteFile);
+          }
+        }
+      });
+
+      this.editor.on("mousedown", () => {
+        this.$store.commit("setRightClickMenuVisible", false);
+      });
+      this.editor.on("blur", () => {
+        //!影响到右键菜单的点击事件，右键菜单的点击事件在组件内通过mousedown触发
+        this.$store.commit("setRightClickMenuVisible", false);
+      });
+      this.editor.on("scroll", () => {
+        this.$store.commit("setRightClickMenuVisible", false);
+      });
+    },
+    initCssEditor() {
+      this.initCssEditorEntity();
+      // 自动提示
+      this.cssEditor.on("keyup", (cm, e) => {
+        if ((e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 189) {
+          cm.showHint(e);
+        }
+      });
+      this.cssEditor.on("update", (instance) => {
+        this.cssChanged();
+        saveEditorContent(this.cssEditor, "__css_content");
+      });
+    },
+    cssChanged() {
+      let json = css2json(this.cssEditor.getValue(0));
+      let theme = setFontSize(this.currentSize.replace("px", ""));
+
+      theme = customCssWithTemplate(json, this.currentColor, theme);
+      this.setWxRendererOptions({
+        theme: theme,
+      });
+      this.onEditorRefresh();
+    },
+    beforeUpload(file) {
+      // validate image
+      const checkResult = checkImage(file);
+      if (!checkResult.ok) {
+        this.$message.error(checkResult.msg);
+        return false;
+      }
+
+      // check image host
+      let imgHost = localStorage.getItem("imgHost");
+      imgHost = imgHost ? imgHost : "default";
+      localStorage.setItem("imgHost", imgHost);
+
+      const config = localStorage.getItem(`${imgHost}Config`);
+      const isValidHost = imgHost == "default" || config;
+      if (!isValidHost) {
+        this.$message.error(`请先配置 ${imgHost} 图床参数`);
+        return false;
+      }
+      return true;
+    },
+    uploadImage(file) {
+      this.isImgLoading = true;
+      toBase64(file)
+        .then((base64Content) => {
+          fileApi
+            .fileUpload(base64Content, file)
+            .then((url) => {
+              this.uploaded(url);
+            })
+            .catch((err) => {
+              this.$message.error(err.message);
+            });
+        })
+        .catch((err) => {
+          this.$message.error(err.message);
+        });
+      this.isImgLoading = false;
+    },
+    // 图片上传结束
+    uploaded(response) {
+      if (!response) {
+        this.$message.error("上传图片未知异常");
+        return;
+      }
+      this.dialogUploadImgVisible = false;
+      // 上传成功，获取光标
+      const cursor = this.editor.getCursor();
+      const imageUrl = response;
+      const markdownImage = `![](${imageUrl})`;
+      // 将 Markdown 形式的 URL 插入编辑框光标所在位置
+      this.editor.replaceSelection(`\n${markdownImage}\n`, cursor);
+      this.$message.success("图片上传成功");
+      this.onEditorRefresh();
+    },
+    // 左右滚动
+    leftAndRightScroll() {
+      const scrollCB = (text) => {
+        let source, target;
+
+        clearTimeout(this.timeout);
+        if (text === "preview") {
+          source = this.$refs.preview.$el;
+          target = document.getElementsByClassName("CodeMirror-scroll")[0];
+          this.editor.off("scroll", editorScrollCB);
+          this.timeout = setTimeout(() => {
+            this.editor.on("scroll", editorScrollCB);
+          }, 300);
+        } else if (text === "editor") {
+          source = document.getElementsByClassName("CodeMirror-scroll")[0];
+          target = this.$refs.preview.$el;
+          target.removeEventListener("scroll", previewScrollCB, false);
+          this.timeout = setTimeout(() => {
+            target.addEventListener("scroll", previewScrollCB, false);
+          }, 300);
+        }
+
+        let percentage =
+          source.scrollTop / (source.scrollHeight - source.offsetHeight);
+        let height = percentage * (target.scrollHeight - target.offsetHeight);
+
+        target.scrollTo(0, height);
+      };
+      const editorScrollCB = () => {
+        scrollCB("editor");
+      };
+      const previewScrollCB = () => {
+        scrollCB("preview");
+      };
+
+      this.$refs.preview.$el.addEventListener("scroll", previewScrollCB, false);
+      this.editor.on("scroll", editorScrollCB);
+    },
+    // 更新编辑器
+    onEditorRefresh() {
+      this.editorRefresh();
+      setTimeout(() => PR.prettyPrint(), 0);
+    },
+    // 复制结束
+    endCopy() {
+      this.backLight = false;
+      setTimeout(() => {
+        this.isCoping = false;
+      }, 800);
+    },
+    // 下载编辑器内容到本地
+    downloadEditorContent() {
+      downloadMD(this.editor.getValue(0));
+    },
+    // 格式化文档
+    formatContent() {
+      const doc = formatDoc(this.editor.getValue(0));
+      localStorage.setItem("__editor_content", doc);
+      this.editor.setValue(doc);
+    },
+    // 右键菜单
+    openMenu(e) {
+      const menuMinWidth = 105;
+      const offsetLeft = this.$el.getBoundingClientRect().left;
+      const offsetWidth = this.$el.offsetWidth;
+      const maxLeft = offsetWidth - menuMinWidth;
+      const left = e.clientX - offsetLeft;
+      this.mouseLeft = Math.min(maxLeft, left);
+      this.mouseTop = e.clientY + 10;
+      this.$store.commit("setRightClickMenuVisible", true);
+    },
+    closeRightClickMenu() {
+      this.$store.commit("setRightClickMenuVisible", false);
+    },
+    onMenuEvent(type, info = {}) {
+      switch (type) {
+        case "pageReset":
+          this.$refs.header.showResetConfirm = true;
+          break;
+        case "insertPic":
+          this.dialogUploadImgVisible = true;
+          break;
+        case "download":
+          this.downloadEditorContent();
+          break;
+        case "insertTable":
+          this.dialogFormVisible = true;
+          break;
+        case "formatMarkdown":
+          this.formatContent();
+          break;
+        default:
+          break;
+      }
+    },
+    ...mapMutations([
+      "initEditorState",
+      "initEditorEntity",
+      "setWxRendererOptions",
+      "editorRefresh",
+      "initCssEditorEntity",
+    ]),
+  },
+  mounted() {
+    setTimeout(() => {
+      this.leftAndRightScroll();
+      PR.prettyPrint();
+    }, 300);
+  },
+};
+</script>
+<style lang="less" scoped>
+.main-body {
+  padding-top: 12px;
+  overflow: hidden;
+}
+.el-main {
+  transition: all 0.3s;
+  padding: 0;
+  margin: 20px;
+  margin-top: 0;
+}
+.container {
+  transition: all 0.3s;
+}
+.textarea-wrapper {
+  height: 100%;
+}
+.preview-wrapper_night {
+  overflow-y: inherit;
+  position: relative;
+  left: -3px;
+  .preview {
+    background-color: #fff;
+  }
+}
+#output-wrapper {
+  position: relative;
+  user-select: text;
+}
+.loading-mask {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 376px;
+  height: 101%;
+  padding-top: 1px;
+  font-size: 15px;
+  color: gray;
+  background-color: #1e1e1e;
+  .loading__img {
+    position: absolute;
+    left: 50%;
+    top: 330px;
+    width: 50px;
+    height: 50px;
+    transform: translate(-50%, -50%);
+    background: url("../../../assets/images/favicon.png") no-repeat;
+    background-size: cover;
+  }
+  span {
+    position: absolute;
+    left: 50%;
+    top: 390px;
+    transform: translate(-50%, -50%);
+  }
+}
+.bounceInRight {
+  animation-name: bounceInRight;
+  animation-duration: 1s;
+  animation-fill-mode: both;
+}
+/deep/ .preview-table {
+  border-spacing: 0px;
+}
+
+@keyframes bounceInRight {
+  0%,
+  60%,
+  75%,
+  90%,
+  100% {
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+  0% {
+    opacity: 0;
+    transform: translate3d(3000px, 0, 0);
+  }
+  60% {
+    opacity: 1;
+    transform: translate3d(-25px, 0, 0);
+  }
+  75% {
+    transform: translate3d(10px, 0, 0);
+  }
+  90% {
+    transform: translate3d(-5px, 0, 0);
+  }
+  100% {
+    transform: none;
+  }
+}
+</style>
+<style lang="less" scoped>
+@import url("../../../assets/less/app.less");
+@import url("../../../assets/less/github-v2.min.css");
+</style>
--- a/src/plugins/element/index.js
+++ b/src/plugins/element/index.js
@ -1,22 +1,22 @@
 import Vue from "vue";
 import {
-    Container,
-    Header,
-    Upload,
-    Tooltip,
-    Form,
-    FormItem,
-    Select,
-    Option,
-    ColorPicker,
-    Switch,
-    Button,
-    Main,
-    Col,
-    Row,
-    Dialog,
-    Loading,
-    Message,
+  Container,
+  Header,
+  Upload,
+  Tooltip,
+  Form,
+  FormItem,
+  Select,
+  Option,
+  ColorPicker,
+  Switch,
+  Button,
+  Main,
+  Col,
+  Row,
+  Dialog,
+  Loading,
+  Message,
 } from "element-ui";

 Vue.use(Container);
--- a/src/store/index.js
+++ b/src/store/index.js
@ -11,154 +11,147 @@ import { setColor, formatDoc, formatCss } from "../assets/scripts/util";
 Vue.use(Vuex);

 const state = {
-    wxRenderer: null,
-    output: "",
-    html: "",
-    editor: null,
-    cssEditor: null,
-    currentFont: "",
-    currentSize: "",
-    currentColor: "",
-    citeStatus: 0,
-    nightMode: false,
-    codeTheme: "github",
-    rightClickMenuVisible: false,
+  wxRenderer: null,
+  output: "",
+  html: "",
+  editor: null,
+  cssEditor: null,
+  currentFont: "",
+  currentSize: "",
+  currentColor: "",
+  citeStatus: 0,
+  nightMode: false,
+  codeTheme: "github",
+  rightClickMenuVisible: false,
 };
 const mutations = {
-    setEditorValue(state, data) {
-        state.editor.setValue(data);
-    },
-    setCssEditorValue(state, data) {
-        state.cssEditor.setValue(data);
-    },
-    setWxRendererOptions(state, data) {
-        state.wxRenderer.setOptions(data);
-    },
-    setCiteStatus(state, data) {
-        state.citeStatus = data;
-        localStorage.setItem("citeStatus", data);
-    },
-    setCurrentFont(state, data) {
-        state.currentFont = data;
-        localStorage.setItem("fonts", data);
-    },
-    setCurrentSize(state, data) {
-        state.currentSize = data;
-        localStorage.setItem("size", data);
-    },
-    setCurrentColor(state, data) {
-        state.currentColor = data;
-        localStorage.setItem("color", data);
-    },
-    setCurrentCodeTheme(state, data) {
-        state.codeTheme = data;
-        localStorage.setItem("codeTheme", data);
-    },
-    setRightClickMenuVisible(state, data) {
-        state.rightClickMenuVisible = data;
-    },
-    themeChanged(state) {
-        state.nightMode = !state.nightMode;
-        localStorage.setItem("nightMode", state.nightMode);
-    },
-    initEditorState(state) {
-        state.currentFont =
-            localStorage.getItem("fonts") || config.builtinFonts[0].value;
-        state.currentColor =
-            localStorage.getItem("color") || config.colorOption[0].value;
-        state.currentSize =
-            localStorage.getItem("size") || config.sizeOption[2].value;
-        state.codeTheme =
-            localStorage.getItem("codeTheme") ||
-            config.codeThemeOption[0].value;
-        state.citeStatus = localStorage.getItem("citeStatus") === "true";
-        state.nightMode = localStorage.getItem("nightMode") === "true";
-        state.wxRenderer = new WxRenderer({
-            theme: setColor(state.currentColor),
-            fonts: state.currentFont,
-            size: state.currentSize,
-            status: state.citeStatus,
-        });
-    },
-    initEditorEntity(state) {
-        state.editor = CodeMirror.fromTextArea(
-            document.getElementById("editor"),
-            {
-                value: "",
-                mode: "text/x-markdown",
-                theme: "xq-light",
-                lineNumbers: false,
-                lineWrapping: true,
-                styleActiveLine: true,
-                autoCloseBrackets: true,
-                extraKeys: {
-                    "Ctrl-F": function autoFormat(editor) {
-                        const doc = formatDoc(editor.getValue(0));
-                        localStorage.setItem("__editor_content", doc);
-                        editor.setValue(doc);
-                    },
-                    "Ctrl-S": function save(editor) {},
-                },
-            }
-        );
+  setEditorValue(state, data) {
+    state.editor.setValue(data);
+  },
+  setCssEditorValue(state, data) {
+    state.cssEditor.setValue(data);
+  },
+  setWxRendererOptions(state, data) {
+    state.wxRenderer.setOptions(data);
+  },
+  setCiteStatus(state, data) {
+    state.citeStatus = data;
+    localStorage.setItem("citeStatus", data);
+  },
+  setCurrentFont(state, data) {
+    state.currentFont = data;
+    localStorage.setItem("fonts", data);
+  },
+  setCurrentSize(state, data) {
+    state.currentSize = data;
+    localStorage.setItem("size", data);
+  },
+  setCurrentColor(state, data) {
+    state.currentColor = data;
+    localStorage.setItem("color", data);
+  },
+  setCurrentCodeTheme(state, data) {
+    state.codeTheme = data;
+    localStorage.setItem("codeTheme", data);
+  },
+  setRightClickMenuVisible(state, data) {
+    state.rightClickMenuVisible = data;
+  },
+  themeChanged(state) {
+    state.nightMode = !state.nightMode;
+    localStorage.setItem("nightMode", state.nightMode);
+  },
+  initEditorState(state) {
+    state.currentFont =
+      localStorage.getItem("fonts") || config.builtinFonts[0].value;
+    state.currentColor =
+      localStorage.getItem("color") || config.colorOption[0].value;
+    state.currentSize =
+      localStorage.getItem("size") || config.sizeOption[2].value;
+    state.codeTheme =
+      localStorage.getItem("codeTheme") || config.codeThemeOption[0].value;
+    state.citeStatus = localStorage.getItem("citeStatus") === "true";
+    state.nightMode = localStorage.getItem("nightMode") === "true";
+    state.wxRenderer = new WxRenderer({
+      theme: setColor(state.currentColor),
+      fonts: state.currentFont,
+      size: state.currentSize,
+      status: state.citeStatus,
+    });
+  },
+  initEditorEntity(state) {
+    const editorDom = document.getElementById("editor");

-        // 如果有编辑器内容被保存则读取，否则加载默认内容
-        state.editor.setValue(
-            localStorage.getItem("__editor_content") ||
-                formatDoc(DEFAULT_CONTENT)
-        );
-    },
-    initCssEditorEntity(state) {
-        state.cssEditor = CodeMirror.fromTextArea(
-            document.getElementById("cssEditor"),
-            {
-                value: "",
-                mode: "css",
-                theme: "style-mirror",
-                lineNumbers: false,
-                lineWrapping: true,
-                matchBrackets: true,
-                autofocus: true,
-                extraKeys: {
-                    "Ctrl-F": function autoFormat(editor) {
-                        const doc = formatCss(editor.getValue(0));
-                        localStorage.setItem("__css_content", doc);
-                        editor.setValue(doc);
-                    },
-                    "Ctrl-S": function save(editor) {},
-                },
-            }
-        );
+    if (!editorDom.value) {
+      editorDom.value =
+        localStorage.getItem("__editor_content") || formatDoc(DEFAULT_CONTENT);
+    }
+    state.editor = CodeMirror.fromTextArea(editorDom, {
+      mode: "text/x-markdown",
+      theme: "xq-light",
+      lineNumbers: false,
+      lineWrapping: true,
+      styleActiveLine: true,
+      autoCloseBrackets: true,
+      extraKeys: {
+        "Ctrl-F": function autoFormat(editor) {
+          const doc = formatDoc(editor.getValue(0));
+          localStorage.setItem("__editor_content", doc);
+          editor.setValue(doc);
+        },
+        "Ctrl-S": function save(editor) {},
+      },
+    });
+  },
+  initCssEditorEntity(state) {
+    const cssEditorDom = document.getElementById("cssEditor");

-        // 如果有编辑器内容被保存则读取，否则加载默认内容
-        state.cssEditor.setValue(
-            localStorage.getItem("__css_content") || DEFAULT_CSS_CONTENT
-        );
-    },
-    editorRefresh(state) {
-        let output = marked(state.editor.getValue(0), {
-            renderer: state.wxRenderer.getRenderer(state.citeStatus),
-        });
+    if (!cssEditorDom.value) {
+      cssEditorDom.value =
+        localStorage.getItem("__css_content") || DEFAULT_CSS_CONTENT;
+    }
+    state.cssEditor = CodeMirror.fromTextArea(cssEditorDom, {
+      mode: "css",
+      theme: "style-mirror",
+      lineNumbers: false,
+      lineWrapping: true,
+      matchBrackets: true,
+      autofocus: true,
+      extraKeys: {
+        "Ctrl-F": function autoFormat(editor) {
+          const doc = formatCss(editor.getValue(0));
+          localStorage.setItem("__css_content", doc);
+          editor.setValue(doc);
+        },
+        "Ctrl-S": function save(editor) {},
+      },
+    });
+  },
+  editorRefresh(state) {
+    let output = marked(state.editor.getValue(0), {
+      renderer: state.wxRenderer.getRenderer(state.citeStatus),
+    });

-        // 去除第一行的 margin-top
-        output = output.replace(/(style=".*?)"/, '$1;margin-top: 0"');
-        if (state.citeStatus) {
-            // 引用脚注
-            output += state.wxRenderer.buildFootnotes();
-            // 附加的一些 style
-            output += state.wxRenderer.buildAddition();
-        }
-        state.output = output;
-    },
-    clearEditorToDefault(state) {
-        const doc = formatDoc(DEFAULT_CONTENT);
-        state.editor.setValue(doc);
-        state.cssEditor.setValue(DEFAULT_CSS_CONTENT);
-    },
+    // 去除第一行的 margin-top
+    output = output.replace(/(style=".*?)"/, '$1;margin-top: 0"');
+    if (state.citeStatus) {
+      // 引用脚注
+      output += state.wxRenderer.buildFootnotes();
+      // 附加的一些 style
+      output += state.wxRenderer.buildAddition();
+    }
+    state.output = output;
+  },
+  clearEditorToDefault(state) {
+    const doc = formatDoc(DEFAULT_CONTENT);
+
+    state.editor.setValue(doc);
+    state.cssEditor.setValue(DEFAULT_CSS_CONTENT);
+  },
 };

 export default new Vuex.Store({
-    state,
-    mutations,
-    actions: {},
+  state,
+  mutations,
+  actions: {},
 });
--- a/src/view/CodemirrorEditor.vue
+++ b/src/view/CodemirrorEditor.vue
@ -1,505 +0,0 @@
-<template>
-    <div class="container" :class="{ container_night: nightMode }">
-        <el-container>
-            <el-header class="editor__header">
-                <editor-header
-                    ref="header"
-                    @refresh="onEditorRefresh"
-                    @cssChanged="cssChanged"
-                    @download="downloadEditorContent"
-                    @showCssEditor="showCssEditor = !showCssEditor"
-                    @show-about-dialog="aboutDialogVisible = true"
-                    @show-dialog-form="dialogFormVisible = true"
-                    @show-dialog-upload-img="dialogUploadImgVisible = true"
-                    @startCopy="(isCoping = true), (backLight = true)"
-                    @endCopy="endCopy"
-                />
-            </el-header>
-            <el-main class="main-body">
-                <el-row class="main-section">
-                    <el-col
-                        :span="12"
-                        @contextmenu.prevent.native="openMenu($event)"
-                    >
-                        <textarea
-                            id="editor"
-                            type="textarea"
-                            placeholder="Your markdown text here."
-                            v-model="source"
-                        >
-                        </textarea>
-                    </el-col>
-                    <el-col
-                        :span="12"
-                        class="preview-wrapper"
-                        id="preview"
-                        ref="preview"
-                        :class="{
-                            'preview-wrapper_night': nightMode && isCoping,
-                        }"
-                    >
-                        <section
-                            id="output-wrapper"
-                            :class="{ output_night: nightMode && !backLight }"
-                        >
-                            <div class="preview">
-                                <section id="output" v-html="output"></section>
-                                <div
-                                    class="loading-mask"
-                                    v-if="nightMode && isCoping"
-                                >
-                                    <div class="loading__img"></div>
-                                    <span>正在生成</span>
-                                </div>
-                            </div>
-                        </section>
-                    </el-col>
-                    <transition
-                        name="custom-classes-transition"
-                        enter-active-class="bounceInRight"
-                    >
-                        <el-col id="cssBox" :span="12" v-show="showCssEditor">
-                            <textarea
-                                id="cssEditor"
-                                type="textarea"
-                                placeholder="Your custom css here."
-                            >
-                            </textarea>
-                        </el-col>
-                    </transition>
-                </el-row>
-            </el-main>
-        </el-container>
-        <upload-img-dialog
-            v-model="dialogUploadImgVisible"
-            @close="dialogUploadImgVisible = false"
-            @beforeUpload="beforeUpload"
-            @uploadImage="uploadImage"
-            @uploaded="uploaded"
-        />
-        <about-dialog v-model="aboutDialogVisible" />
-        <insert-form-dialog v-model="dialogFormVisible" />
-        <right-click-menu
-            v-model="rightClickMenuVisible"
-            :left="mouseLeft"
-            :top="mouseTop"
-            @menuTick="onMenuEvent"
-            @closeMenu="closeRightClickMenu"
-        />
-    </div>
-</template>
-<script>
-import editorHeader from "../components/CodemirrorEditor/header";
-import aboutDialog from "../components/CodemirrorEditor/aboutDialog";
-import insertFormDialog from "../components/CodemirrorEditor/insertForm";
-import rightClickMenu from "../components/CodemirrorEditor/rightClickMenu";
-import uploadImgDialog from "../components/CodemirrorEditor/uploadImgDialog";
-
-import {
-    css2json,
-    downloadMD,
-    formatDoc,
-    setFontSize,
-    saveEditorContent,
-    customCssWithTemplate,
-    checkImage,
-} from "../assets/scripts/util";
-
-import { toBase64 } from "../assets/scripts/util";
-import fileApi from "../api/file";
-
-require("codemirror/mode/javascript/javascript");
-import { mapState, mapMutations } from "vuex";
-export default {
-    data() {
-        return {
-            showCssEditor: false,
-            aboutDialogVisible: false,
-            dialogUploadImgVisible: false,
-            dialogFormVisible: false,
-            isCoping: false,
-            isImgLoading: false,
-            backLight: false,
-            timeout: null,
-            changeTimer: null,
-            source: "",
-            mouseLeft: 0,
-            mouseTop: 0,
-        };
-    },
-    components: {
-        editorHeader,
-        aboutDialog,
-        insertFormDialog,
-        rightClickMenu,
-        uploadImgDialog,
-    },
-    computed: {
-        ...mapState({
-            wxRenderer: (state) => state.wxRenderer,
-            output: (state) => state.output,
-            editor: (state) => state.editor,
-            cssEditor: (state) => state.cssEditor,
-            currentSize: (state) => state.currentSize,
-            currentColor: (state) => state.currentColor,
-            nightMode: (state) => state.nightMode,
-            rightClickMenuVisible: (state) => state.rightClickMenuVisible,
-        }),
-    },
-    created() {
-        this.initEditorState();
-        this.$nextTick(() => {
-            this.initEditor();
-            this.initCssEditor();
-            this.onEditorRefresh();
-        });
-    },
-    methods: {
-        initEditor() {
-            this.initEditorEntity();
-            this.editor.on("change", (cm, e) => {
-                if (this.changeTimer) clearTimeout(this.changeTimer);
-                this.changeTimer = setTimeout(() => {
-                    this.onEditorRefresh();
-                    saveEditorContent(this.editor, "__editor_content");
-                }, 300);
-            });
-
-            // 粘贴上传图片并插入
-            this.editor.on("paste", (cm, e) => {
-                if (
-                    !(e.clipboardData && e.clipboardData.items) ||
-                    this.isImgLoading
-                ) {
-                    return;
-                }
-                for (
-                    let i = 0, len = e.clipboardData.items.length;
-                    i < len;
-                    ++i
-                ) {
-                    let item = e.clipboardData.items[i];
-                    if (item.kind === "file") {
-                        // 校验图床参数
-                        const pasteFile = item.getAsFile();
-                        const isValid = this.beforeUpload(pasteFile);
-                        if (!isValid) {
-                            continue;
-                        }
-                        this.uploadImage(pasteFile);
-                    }
-                }
-            });
-
-            this.editor.on("mousedown", () => {
-                this.$store.commit("setRightClickMenuVisible", false);
-            });
-            this.editor.on("blur", () => {
-                //!影响到右键菜单的点击事件，右键菜单的点击事件在组件内通过mousedown触发
-                this.$store.commit("setRightClickMenuVisible", false);
-            });
-            this.editor.on("scroll", () => {
-                this.$store.commit("setRightClickMenuVisible", false);
-            });
-        },
-        initCssEditor() {
-            this.initCssEditorEntity();
-            // 自动提示
-            this.cssEditor.on("keyup", (cm, e) => {
-                if ((e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 189) {
-                    cm.showHint(e);
-                }
-            });
-            this.cssEditor.on("update", (instance) => {
-                this.cssChanged();
-                saveEditorContent(this.cssEditor, "__css_content");
-            });
-        },
-        cssChanged() {
-            let json = css2json(this.cssEditor.getValue(0));
-            let theme = setFontSize(this.currentSize.replace("px", ""));
-
-            theme = customCssWithTemplate(json, this.currentColor, theme);
-            this.setWxRendererOptions({
-                theme: theme,
-            });
-            this.onEditorRefresh();
-        },
-        beforeUpload(file) {
-            // validate image
-            const checkResult = checkImage(file);
-            if (!checkResult.ok) {
-                this.$message.error(checkResult.msg);
-                return false;
-            }
-
-            // check image host
-            let imgHost = localStorage.getItem("imgHost");
-            imgHost = imgHost ? imgHost : "default";
-            localStorage.setItem("imgHost", imgHost);
-
-            const config = localStorage.getItem(`${imgHost}Config`);
-            const isValidHost = imgHost == "default" || config;
-            if (!isValidHost) {
-                this.$message.error(`请先配置 ${imgHost} 图床参数`);
-                return false;
-            }
-            return true;
-        },
-        uploadImage(file) {
-            this.isImgLoading = true;
-            toBase64(file)
-                .then((base64Content) => {
-                    fileApi
-                        .fileUpload(base64Content, file)
-                        .then((url) => {
-                            this.uploaded(url);
-                        })
-                        .catch((err) => {
-                            this.$message.error(err.message);
-                        });
-                })
-                .catch((err) => {
-                    this.$message.error(err.message);
-                });
-            this.isImgLoading = false;
-        },
-        // 图片上传结束
-        uploaded(response) {
-            if (!response) {
-                this.$message.error("上传图片未知异常");
-                return;
-            }
-            this.dialogUploadImgVisible = false;
-            // 上传成功，获取光标
-            const cursor = this.editor.getCursor();
-            const imageUrl = response;
-            const markdownImage = `![](${imageUrl})`;
-            // 将 Markdown 形式的 URL 插入编辑框光标所在位置
-            this.editor.replaceSelection(`\n${markdownImage}\n`, cursor);
-            this.$message.success("图片上传成功");
-            this.onEditorRefresh();
-        },
-        // 左右滚动
-        leftAndRightScroll() {
-            const scrollCB = (text) => {
-                let source, target;
-
-                clearTimeout(this.timeout);
-                if (text === "preview") {
-                    source = this.$refs.preview.$el;
-                    target = document.getElementsByClassName(
-                        "CodeMirror-scroll"
-                    )[0];
-                    this.editor.off("scroll", editorScrollCB);
-                    this.timeout = setTimeout(() => {
-                        this.editor.on("scroll", editorScrollCB);
-                    }, 300);
-                } else if (text === "editor") {
-                    source = document.getElementsByClassName(
-                        "CodeMirror-scroll"
-                    )[0];
-                    target = this.$refs.preview.$el;
-                    target.removeEventListener(
-                        "scroll",
-                        previewScrollCB,
-                        false
-                    );
-                    this.timeout = setTimeout(() => {
-                        target.addEventListener(
-                            "scroll",
-                            previewScrollCB,
-                            false
-                        );
-                    }, 300);
-                }
-
-                let percentage =
-                    source.scrollTop /
-                    (source.scrollHeight - source.offsetHeight);
-                let height =
-                    percentage * (target.scrollHeight - target.offsetHeight);
-
-                target.scrollTo(0, height);
-            };
-            const editorScrollCB = () => {
-                scrollCB("editor");
-            };
-            const previewScrollCB = () => {
-                scrollCB("preview");
-            };
-
-            this.$refs.preview.$el.addEventListener(
-                "scroll",
-                previewScrollCB,
-                false
-            );
-            this.editor.on("scroll", editorScrollCB);
-        },
-        // 更新编辑器
-        onEditorRefresh() {
-            this.editorRefresh();
-            setTimeout(() => PR.prettyPrint(), 0);
-        },
-        // 复制结束
-        endCopy() {
-            this.backLight = false;
-            setTimeout(() => {
-                this.isCoping = false;
-            }, 800);
-        },
-        // 下载编辑器内容到本地
-        downloadEditorContent() {
-            downloadMD(this.editor.getValue(0));
-        },
-        // 格式化文档
-        formatContent() {
-            const doc = formatDoc(this.editor.getValue(0));
-            localStorage.setItem("__editor_content", doc);
-            this.editor.setValue(doc);
-        },
-        // 右键菜单
-        openMenu(e) {
-            const menuMinWidth = 105;
-            const offsetLeft = this.$el.getBoundingClientRect().left;
-            const offsetWidth = this.$el.offsetWidth;
-            const maxLeft = offsetWidth - menuMinWidth;
-            const left = e.clientX - offsetLeft;
-            this.mouseLeft = Math.min(maxLeft, left);
-            this.mouseTop = e.clientY + 10;
-            this.$store.commit("setRightClickMenuVisible", true);
-        },
-        closeRightClickMenu() {
-            this.$store.commit("setRightClickMenuVisible", false);
-        },
-        onMenuEvent(type, info = {}) {
-            switch (type) {
-                case "pageReset":
-                    this.$refs.header.showResetConfirm = true;
-                    break;
-                case "insertPic":
-                    this.dialogUploadImgVisible = true;
-                    break;
-                case "download":
-                    this.downloadEditorContent();
-                    break;
-                case "insertTable":
-                    this.dialogFormVisible = true;
-                    break;
-                case "formatMarkdown":
-                    this.formatContent();
-                    break;
-                default:
-                    break;
-            }
-        },
-        ...mapMutations([
-            "initEditorState",
-            "initEditorEntity",
-            "setWxRendererOptions",
-            "editorRefresh",
-            "initCssEditorEntity",
-        ]),
-    },
-    mounted() {
-        setTimeout(() => {
-            this.leftAndRightScroll();
-            PR.prettyPrint();
-        }, 300);
-    },
-};
-</script>
-<style lang="less" scoped>
-.main-body {
-    padding-top: 12px;
-    overflow: hidden;
-}
-.el-main {
-    transition: all 0.3s;
-    padding: 0;
-    margin: 20px;
-    margin-top: 0;
-}
-.container {
-    transition: all 0.3s;
-}
-.preview {
-    transition: background 0s;
-    transition-delay: 0.2s;
-}
-.preview-wrapper_night {
-    overflow-y: inherit;
-    position: relative;
-    left: -3px;
-    .preview {
-        background-color: #fff;
-    }
-}
-#output-wrapper {
-    position: relative;
-}
-.loading-mask {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 376px;
-    height: 101%;
-    padding-top: 1px;
-    font-size: 15px;
-    color: gray;
-    background-color: #1e1e1e;
-    .loading__img {
-        position: absolute;
-        left: 50%;
-        top: 330px;
-        width: 50px;
-        height: 50px;
-        transform: translate(-50%, -50%);
-        background: url("../assets/images/favicon.png") no-repeat;
-        background-size: cover;
-    }
-    span {
-        position: absolute;
-        left: 50%;
-        top: 390px;
-        transform: translate(-50%, -50%);
-    }
-}
-.bounceInRight {
-    animation-name: bounceInRight;
-    animation-duration: 1s;
-    animation-fill-mode: both;
-}
-@keyframes bounceInRight {
-    0%,
-    60%,
-    75%,
-    90%,
-    100% {
-        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    }
-    0% {
-        opacity: 0;
-        transform: translate3d(3000px, 0, 0);
-    }
-    60% {
-        opacity: 1;
-        transform: translate3d(-25px, 0, 0);
-    }
-    75% {
-        transform: translate3d(10px, 0, 0);
-    }
-    90% {
-        transform: translate3d(-5px, 0, 0);
-    }
-    100% {
-        transform: none;
-    }
-}
-</style>
-<style lang="less">
-@import url("../assets/less/app.less");
-@import url("../assets/less/style-mirror.css");
-@import url("../assets/less/github-v2.min.css");
-</style>
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "types": [
+      "@dcloudio/types",
+      "miniprogram-api-typings",
+      "mini-types"
+    ]
+  }
+}
--- a/vue.config.js
+++ b/vue.config.js
@ -1,4 +1,20 @@
-module.exports = {
-    outputDir: "dist",
-    publicPath: process.env.NETLIFY ? "/" : "/md/",
-};
+const fs = require("fs");
+function writeManifestJson() {
+  fs.readFile("./src/manifest.json", function (err, data) {
+    if (err) {
+      return console.error(err);
+    }
+    const strData = data.toString();
+    const manifest = JSON.parse(strData);
+
+    manifest.h5.publicPath = process.env.NETLIFY ? "/" : "/md/";
+    const result = JSON.stringify(manifest, null, 4);
+
+    fs.writeFile("./src/manifest.json", result, function (err) {
+      if (err) {
+        console.error(err);
+      }
+    });
+  });
+}
+writeManifestJson();
--- a/yarn.lock
+++ b/yarn.lock