From b25ceb62040201149f51800f6ee3bc495346fdcd Mon Sep 17 00:00:00 2001
From: YangFong <yangfong2022@qq.com>
Date: Wed, 14 Aug 2024 21:55:22 +0800
Subject: [PATCH] refactor: migration and recombination

---
 src/api/config.js                             |  55 --
 src/assets/scripts/converter.js               |  22 -
 src/assets/scripts/themes/default-theme.js    | 193 -----
 src/assets/scripts/util.js                    | 372 ---------
 src/components/CodemirrorEditor/CssEditor.vue |  11 +-
 .../{ => EditorHeader}/AboutDialog.vue        |   0
 .../EditorHeader/EditDropdown.vue             |  44 +
 .../EditorHeader/HelpDropdown.vue             |   2 +-
 .../EditorHeader/PostInfo.vue                 |   2 -
 .../EditorHeader/StyleDropdown.vue            | 137 ++++
 .../CodemirrorEditor/EditorHeader/index.vue   | 146 +---
 .../CodemirrorEditor/InsertFormDialog.vue     |  23 +-
 .../CodemirrorEditor/UploadImgDialog.vue      | 755 +++++++-----------
 src/config/index.js                           | 479 ++++++++---
 src/main.js                                   |   4 +-
 src/stores/index.js                           |  58 +-
 src/{api => utils}/fetch.js                   |   0
 src/{api => utils}/file.js                    |   9 +-
 src/utils/index.js                            | 396 ++++++++-
 src/{assets/scripts => utils}/tokenTools.js   |   6 +-
 .../renderers => utils}/wx-renderer.js        |   1 +
 src/views/CodemirrorEditor.vue                |  36 +-
 22 files changed, 1321 insertions(+), 1430 deletions(-)
 delete mode 100644 src/api/config.js
 delete mode 100644 src/assets/scripts/converter.js
 delete mode 100644 src/assets/scripts/themes/default-theme.js
 delete mode 100644 src/assets/scripts/util.js
 rename src/components/CodemirrorEditor/{ => EditorHeader}/AboutDialog.vue (100%)
 create mode 100644 src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue
 create mode 100644 src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue
 rename src/{api => utils}/fetch.js (100%)
 rename src/{api => utils}/file.js (97%)
 rename src/{assets/scripts => utils}/tokenTools.js (99%)
 rename src/{assets/scripts/renderers => utils}/wx-renderer.js (99%)

diff --git a/src/api/config.js b/src/api/config.js
deleted file mode 100644
index fec7048ef..000000000
--- a/src/api/config.js
+++ /dev/null
@@ -1,55 +0,0 @@
-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`,
-  ],
-}
-
-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`,
-  ],
-}
-
-export { githubConfig, giteeConfig }
diff --git a/src/assets/scripts/converter.js b/src/assets/scripts/converter.js
deleted file mode 100644
index 1f54f8d64..000000000
--- a/src/assets/scripts/converter.js
+++ /dev/null
@@ -1,22 +0,0 @@
-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
-  }
-}
-
-export function mergeCss(html) {
-  return juice(html, {
-    inlinePseudoElements: true,
-    preserveImportant: true,
-  })
-}
diff --git a/src/assets/scripts/themes/default-theme.js b/src/assets/scripts/themes/default-theme.js
deleted file mode 100644
index dfb014944..000000000
--- a/src/assets/scripts/themes/default-theme.js
+++ /dev/null
@@ -1,193 +0,0 @@
-const baseColor = `#3f3f3f`
-
-export default {
-  BASE: {
-    'text-align': `left`,
-    'line-height': `1.75`,
-  },
-  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)`,
-      'color': 'var(--el-text-color-regular)',
-    },
-
-    // 二级标题样式
-    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)`,
-      'color': 'var(--el-text-color-regular)',
-    },
-
-    // 四级标题样式
-    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`,
-      'color': 'var(--el-text-color-regular)',
-      'text-align': `justify`,
-    },
-
-    // 引用样式
-    blockquote: {
-      'font-style': `normal`,
-      'border-left': `none`,
-      'padding': `1em`,
-      'border-radius': `8px`,
-      'color': `rgba(0,0,0,0.5)`,
-      'background': `#f7f7f7`,
-      'margin': `2em 8px`,
-    },
-
-    blockquote_p: {
-      'letter-spacing': `0.1em`,
-      'color': `rgb(80, 80, 80)`,
-      'font-size': `1em`,
-      'display': `block`,
-    },
-    code_pre: {
-      'font-size': `14px`,
-      'overflow-x': `auto`,
-      'border-radius': `8px`,
-      'padding': `1em`,
-      'line-height': `1.5`,
-      'margin': `10px 8px`,
-    },
-    code: {
-      'margin': 0,
-      'white-space': `nowrap`,
-      'font-family': `Menlo, Operator Mono, Consolas, Monaco, monospace`,
-    },
-
-    image: {
-      'border-radius': `4px`,
-      'display': `block`,
-      'margin': `0.1em auto 0.5em`,
-      'width': `100% !important`,
-    },
-
-    ol: {
-      'margin-left': `0`,
-      'padding-left': `1em`,
-      'color': 'var(--el-text-color-regular)',
-    },
-
-    ul: {
-      'margin-left': `0`,
-      'padding-left': `1em`,
-      'list-style': `circle`,
-      'color': 'var(--el-text-color-regular)',
-    },
-
-    footnotes: {
-      'margin': `0.5em 8px`,
-      'font-size': `80%`,
-      'color': 'var(--el-text-color-regular)',
-    },
-
-    figure: {
-      margin: `1.5em 8px`,
-      'color': 'var(--el-text-color-regular)',
-    },
-    hr: {
-      '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)`,
-    },
-  },
-  inline: {
-    listitem: {
-      'text-indent': `-1em`,
-      'display': `block`,
-      'margin': `0.2em 8px`,
-      'color': 'var(--el-text-color-regular)',
-    },
-
-    codespan: {
-      'font-size': `90%`,
-      'color': `#d14`,
-      'background': `rgba(27,31,35,.05)`,
-      'padding': `3px 5px`,
-      'border-radius': `4px`,
-      // 'word-break': `break-all`,
-    },
-
-    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`,
-      'color': 'var(--el-text-color-regular)',
-    },
-
-    thead: {
-      'background': `rgba(0, 0, 0, 0.05)`,
-      'font-weight': `bold`,
-      'color': 'var(--el-text-color-regular)',
-    },
-
-    td: {
-      border: `1px solid #dfdfdf`,
-      padding: `0.25em 0.5em`,
-      color: baseColor,
-    },
-
-    footnote: {
-      'font-size': `12px`,
-      'color': 'var(--el-text-color-regular)',
-    },
-
-    figcaption: {
-      'text-align': `center`,
-      'color': `#888`,
-      'font-size': `0.8em`,
-    },
-  },
-}
diff --git a/src/assets/scripts/util.js b/src/assets/scripts/util.js
deleted file mode 100644
index df4dd40b5..000000000
--- a/src/assets/scripts/util.js
+++ /dev/null
@@ -1,372 +0,0 @@
-import prettier from 'prettier/standalone'
-import prettierCss from 'prettier/parser-postcss'
-import prettierMarkdown from 'prettier/parser-markdown'
-import defaultTheme from './themes/default-theme'
-
-function createCustomTheme(theme, color) {
-  const customTheme = JSON.parse(JSON.stringify(theme))
-  customTheme.block.h1[`border-bottom`] = `2px solid ${color}`
-  customTheme.block.h2.background = color
-  customTheme.block.h3[`border-left`] = `3px solid ${color}`
-  customTheme.block.h4.color = color
-  customTheme.inline.strong.color = color
-  return customTheme
-}
-
-// 设置自定义颜色
-export function setColorWithTemplate(theme) {
-  return (color) => {
-    return createCustomTheme(theme, color)
-  }
-}
-
-export function setColorWithCustomTemplate(theme, color) {
-  return createCustomTheme(theme, color)
-}
-
-// 设置自定义字体大小
-export function setFontSizeWithTemplate(template) {
-  return function (fontSize) {
-    const customTheme = JSON.parse(JSON.stringify(template))
-    customTheme.block.h1[`font-size`] = `${fontSize * 1.14}px`
-    customTheme.block.h2[`font-size`] = `${fontSize * 1.1}px`
-    customTheme.block.h3[`font-size`] = `${fontSize}px`
-    customTheme.block.h4[`font-size`] = `${fontSize}px`
-    return customTheme
-  }
-}
-
-export const setColor = setColorWithTemplate(defaultTheme)
-export const setFontSize = setFontSizeWithTemplate(defaultTheme)
-
-export function customCssWithTemplate(jsonString, color, theme) {
-  // block
-  const customTheme = createCustomTheme(theme, color)
-
-  customTheme.block.h1 = Object.assign(customTheme.block.h1, jsonString.h1)
-  customTheme.block.h2 = Object.assign(customTheme.block.h2, jsonString.h2)
-  customTheme.block.h3 = Object.assign(customTheme.block.h3, jsonString.h3)
-  customTheme.block.h4 = Object.assign(customTheme.block.h4, jsonString.h4)
-  customTheme.block.code = Object.assign(
-    customTheme.block.code,
-    jsonString.code,
-  )
-  customTheme.block.p = Object.assign(customTheme.block.p, jsonString.p)
-  customTheme.block.hr = Object.assign(customTheme.block.hr, jsonString.hr)
-  customTheme.block.blockquote = Object.assign(
-    customTheme.block.blockquote,
-    jsonString.blockquote,
-  )
-  customTheme.block.blockquote_p = Object.assign(
-    customTheme.block.blockquote_p,
-    jsonString.blockquote_p,
-  )
-  customTheme.block.image = Object.assign(
-    customTheme.block.image,
-    jsonString.image,
-  )
-
-  // inline
-  customTheme.inline.strong = Object.assign(
-    customTheme.inline.strong,
-    jsonString.strong,
-  )
-  customTheme.inline.codespan = Object.assign(
-    customTheme.inline.codespan,
-    jsonString.codespan,
-  )
-  customTheme.inline.link = Object.assign(
-    customTheme.inline.link,
-    jsonString.link,
-  )
-  customTheme.inline.wx_link = Object.assign(
-    customTheme.inline.wx_link,
-    jsonString.wx_link,
-  )
-  customTheme.block.ul = Object.assign(customTheme.block.ul, jsonString.ul)
-  customTheme.block.ol = Object.assign(customTheme.block.ol, jsonString.ol)
-  customTheme.inline.listitem = Object.assign(
-    customTheme.inline.listitem,
-    jsonString.li,
-  )
-  return customTheme
-}
-
-/**
- * 将CSS形式的字符串转换为JSON
- *
- * @param {string} 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)
-  }
-
-  // 初始化返回值
-  const json = {}
-
-  while (css.length > 0 && css.includes(`{`) && css.includes(`}`)) {
-    // 存储第一个左/右花括号的下标
-    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) {
-      const ret = {}
-      array.forEach((e) => {
-        const index = e.indexOf(`:`)
-        const property = e.substring(0, index).trim()
-        ret[property] = e.substring(index + 1).trim()
-      })
-      return ret
-    }
-
-    // 切割声明块并移除空白符，然后放入数组中
-    let declarations = css
-      .substring(lbracket + 1, rbracket)
-      .split(`;`)
-      .map(e => e.trim())
-      .filter(e => e.length > 0) // 移除所有""空值
-
-    // 转为Object对象
-    declarations = toObject(declarations)
-
-    // 第二步：选择器处理，每个选择器会与它对应的声明相关联，如：
-    // `h1, p#bar {color: red}`
-    // ==>
-    // {"h1": {color: red}, "p#bar": {color: red}}
-
-    const 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
-}
-
-/**
- * 将编辑器内容保存到 LocalStorage
- * @param {*} editor
- * @param {*} name
- */
-export function saveEditorContent(editor, name) {
-  const content = editor.getValue(0)
-  if (content) {
-    localStorage.setItem(name, content)
-  }
-  else {
-    localStorage.removeItem(name)
-  }
-}
-
-/**
- * 格式化文档
- * @param {string} content - 文档内容
- */
-export function formatDoc(content) {
-  return prettier.format(content, {
-    parser: `markdown`,
-    plugins: [prettierMarkdown],
-  })
-}
-
-/**
- * 格式化css
- * @param {string} content - css内容
- */
-export function formatCss(content) {
-  return prettier.format(content, {
-    parser: `css`,
-    plugins: [prettierCss],
-  })
-}
-
-/**
- * 导出原始 Markdown 文档
- * @param {string} doc - 文档内容
- */
-export function downloadMD(doc) {
-  const downLink = document.createElement(`a`)
-
-  downLink.download = `content.md`
-  downLink.style.display = `none`
-  const blob = new Blob([doc])
-
-  downLink.href = URL.createObjectURL(blob)
-  document.body.appendChild(downLink)
-  downLink.click()
-  document.body.removeChild(downLink)
-}
-
-/**
- * 导出 HTML 生成内容
- */
-export function exportHTML() {
-  const element = document.querySelector(`#output`)
-  setStyles(element)
-  const htmlStr = element.innerHTML
-
-  const downLink = document.createElement(`a`)
-
-  downLink.download = `content.html`
-  downLink.style.display = `none`
-  const blob = new Blob([
-    `<html><head><meta charset="utf-8" /></head><body><div style="width: 750px; margin: auto;">${htmlStr}</div></body></html>`,
-  ])
-
-  downLink.href = URL.createObjectURL(blob)
-  document.body.appendChild(downLink)
-  downLink.click()
-  document.body.removeChild(downLink)
-
-  function setStyles(element) {
-    /**
-     * 获取一个 DOM 元素的所有样式，
-     * @param {DOM 元素} element DOM 元素
-     * @param {排除的属性} excludes 如果某些属性对结果有不良影响，可以使用这个参数来排除
-     * @returns 行内样式拼接结果
-     */
-    function getElementStyles(element, excludes = [`width`, `height`]) {
-      const styles = getComputedStyle(element, null)
-      return Object.entries(styles)
-        .filter(
-          ([key]) => styles.getPropertyValue(key) && !excludes.includes(key),
-        )
-        .map(([key, value]) => `${key}:${value};`)
-        .join(``)
-    }
-
-    switch (true) {
-      case isPre(element):
-      case isCode(element):
-      case isSpan(element):
-        element.setAttribute(`style`, getElementStyles(element))
-      // eslint-disable-next-line no-fallthrough
-      default:
-    }
-    if (element.children.length) {
-      Array.from(element.children).forEach(child => setStyles(child))
-    }
-
-    // 判断是否是包裹代码块的 pre 元素
-    function isPre(element) {
-      return (
-        element.tagName === `PRE`
-        && Array.from(element.classList).includes(`code__pre`)
-      )
-    }
-
-    // 判断是否是包裹代码块的 code 元素
-    function isCode(element) {
-      return (
-        element.tagName === `CODE`
-      )
-    }
-
-    // 判断是否是包裹代码字符的 span 元素
-    function isSpan(element) {
-      return (
-        element.tagName === `SPAN`
-        && (isCode(element.parentElement)
-        || isCode(element.parentElement.parentElement))
-      )
-    }
-  }
-}
-
-/**
- * 生成列表字符串
- * @param {*} data 对应内容集合
- * @param {*} rows 行
- * @param {*} cols 列
- */
-export function createTable({ data, rows, cols }) {
-  let table = ``
-  for (let i = 0; i < rows + 2; ++i) {
-    table += `| `
-    const currRow = []
-    for (let j = 0; j < cols; ++j) {
-      const rowIdx = i > 1 ? i - 1 : i
-      currRow.push(i === 1 ? `---` : data[`k_${rowIdx}_${j}`] || `     `)
-    }
-    table += currRow.join(` | `)
-    table += ` |\n`
-  }
-
-  return table
-}
-
-export function toBase64(file) {
-  return 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 file size
-  const maxSize = 10
-  const valid = file.size / 1024 / 1024 <= maxSize
-  if (!valid) {
-    return {
-      ok: false,
-      msg: `由于公众号限制，图片大小不能超过 ${maxSize}M`,
-    }
-  }
-  return { ok: true }
-}
-
-/**
- * 移除左边多余空格
- * @param {*} str
- * @returns
- */
-export function removeLeft(str) {
-  const lines = str.split(`\n`)
-  // 获取应该删除的空白符数量
-  const minSpaceNum = lines
-    .filter(item => item.trim())
-    .map(item => item.match(/(^\s+)?/)[0].length)
-    .sort((a, b) => a - b)[0]
-  // 删除空白符
-  return lines.map(item => item.slice(minSpaceNum)).join(`\n`)
-}
diff --git a/src/components/CodemirrorEditor/CssEditor.vue b/src/components/CodemirrorEditor/CssEditor.vue
index b0779efcc..16cd6aafe 100644
--- a/src/components/CodemirrorEditor/CssEditor.vue
+++ b/src/components/CodemirrorEditor/CssEditor.vue
@@ -1,15 +1,12 @@
 <script setup>
-const props = defineProps({
-  showCssEditor: {
-    type: Boolean,
-    default: false,
-  },
-})
+import { useStore } from '@/stores'
+
+const store = useStore()
 </script>
 
 <template>
   <transition enter-active-class="bounceInRight">
-    <el-col v-show="props.showCssEditor" :span="8" class="cssEditor-wrapper h-full">
+    <el-col v-show="store.isShowCssEditor" :span="8" class="cssEditor-wrapper h-full">
       <textarea
         id="cssEditor"
         type="textarea"
diff --git a/src/components/CodemirrorEditor/AboutDialog.vue b/src/components/CodemirrorEditor/EditorHeader/AboutDialog.vue
similarity index 100%
rename from src/components/CodemirrorEditor/AboutDialog.vue
rename to src/components/CodemirrorEditor/EditorHeader/AboutDialog.vue
diff --git a/src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue b/src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue
new file mode 100644
index 000000000..5e2cd244c
--- /dev/null
+++ b/src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue
@@ -0,0 +1,44 @@
+<script setup>
+import { useStore } from '@/stores'
+
+const store = useStore()
+
+const {
+  toggleShowInsertFormDialog,
+  toggleShowUploadImgDialog,
+} = store
+</script>
+
+<template>
+  <el-dropdown>
+    <span class="el-dropdown-link">
+      编辑<el-icon class="ml-2">
+        <ElIconArrowDown />
+      </el-icon>
+    </span>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item class="leading-8" @click="toggleShowUploadImgDialog()">
+          <el-icon>
+            <ElIconUpload />
+          </el-icon>
+          上传图片
+        </el-dropdown-item>
+        <el-dropdown-item class="leading-8" @click="toggleShowInsertFormDialog()">
+          <el-icon>
+            <ElIconGrid />
+          </el-icon>
+          插入表格
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<style lang="less" scoped>
+.el-dropdown-link {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue b/src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue
index 161ec4968..0373afc9c 100644
--- a/src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import AboutDialog from '@/components/CodemirrorEditor/AboutDialog.vue'
+import AboutDialog from './AboutDialog.vue'
 
 const aboutDialogVisible = ref(false)
 </script>
diff --git a/src/components/CodemirrorEditor/EditorHeader/PostInfo.vue b/src/components/CodemirrorEditor/EditorHeader/PostInfo.vue
index d34c16220..a2bd8a75e 100644
--- a/src/components/CodemirrorEditor/EditorHeader/PostInfo.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/PostInfo.vue
@@ -4,8 +4,6 @@ import { storeToRefs } from 'pinia'
 
 import { useStore } from '@/stores'
 
-defineEmits([`close`, `post`])
-
 const store = useStore()
 const { output } = storeToRefs(store)
 
diff --git a/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue b/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue
new file mode 100644
index 000000000..ee7eb7f72
--- /dev/null
+++ b/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue
@@ -0,0 +1,137 @@
+<script setup>
+import { nextTick, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+
+import StyleOptionMenu from './StyleOptionMenu.vue'
+
+import { codeBlockThemeOptions, colorOptions, fontFamilyOptions, fontSizeOptions, githubConfig, legendOptions } from '@/config'
+import { useStore } from '@/stores'
+
+const store = useStore()
+
+const {
+  fontFamily,
+  fontSize,
+  fontColor,
+  codeBlockTheme,
+  legend,
+  isMacCodeBlock,
+  cssEditor,
+} = storeToRefs(store)
+
+const {
+  resetStyleConfirm,
+  fontChanged,
+  sizeChanged,
+  colorChanged,
+  codeBlockThemeChanged,
+  legendChanged,
+  macCodeBlockChanged,
+  toggleShowCssEditor,
+} = store
+
+const colorPicker = ref(null)
+
+function showPicker() {
+  colorPicker.value.show()
+}
+
+// 自定义CSS样式
+function customStyle() {
+  toggleShowCssEditor()
+  nextTick(() => {
+    if (!cssEditor.value) {
+      cssEditor.value.refresh()
+    }
+  })
+  setTimeout(() => {
+    cssEditor.value.refresh()
+  }, 50)
+}
+</script>
+
+<template>
+  <el-dropdown>
+    <span class="el-dropdown-link">
+      样式<el-icon class="ml-2">
+        <ElIconArrowDown />
+      </el-icon>
+    </span>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item class="leading-8">
+          <StyleOptionMenu title="字体" :options="fontFamilyOptions" :current="fontFamily" :change="fontChanged" />
+        </el-dropdown-item>
+        <el-dropdown-item class="leading-8">
+          <StyleOptionMenu title="字号" :options="fontSizeOptions" :current="fontSize" :change="sizeChanged" />
+        </el-dropdown-item>
+        <el-dropdown-item class="leading-8">
+          <StyleOptionMenu
+            title="颜色"
+            :options="colorOptions"
+            :current="fontColor"
+            :change="colorChanged"
+          />
+        </el-dropdown-item>
+        <el-dropdown-item class="leading-8">
+          <StyleOptionMenu
+            title="代码主题"
+            :options="codeBlockThemeOptions"
+            :current="codeBlockTheme"
+            :change="codeBlockThemeChanged"
+          />
+        </el-dropdown-item>
+        <el-dropdown-item class="leading-8">
+          <StyleOptionMenu title="图注格式" :options="legendOptions" :current="legend" :change="legendChanged" />
+        </el-dropdown-item>
+        <el-dropdown-item divided class="leading-8" @click="showPicker()">
+          <el-tooltip placement="right" effect="light">
+            <template #content>
+              <el-color-picker
+                ref="colorPicker"
+                v-model="fontColor"
+                :teleported="false"
+                show-alpha
+                class="ml-auto"
+                style="height: 2em"
+                @change="colorChanged"
+              />
+            </template>
+            <div class="w-full flex">
+              <el-icon class="opacity-0">
+                <ElIconCheck />
+              </el-icon>
+              自定义颜色
+            </div>
+          </el-tooltip>
+        </el-dropdown-item>
+        <el-dropdown-item class="leading-8" @click="customStyle">
+          <el-icon class="opacity-0">
+            <ElIconCheck />
+          </el-icon>
+          自定义 CSS
+        </el-dropdown-item>
+        <el-dropdown-item divided class="leading-8" @click="macCodeBlockChanged">
+          <el-icon :class="{ 'opacity-0': !isMacCodeBlock }">
+            <ElIconCheck />
+          </el-icon>
+          Mac 代码块
+        </el-dropdown-item>
+        <el-dropdown-item divided class="leading-8" @click="resetStyleConfirm">
+          <el-icon class="opacity-0">
+            <ElIconCheck />
+          </el-icon>
+          重置
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<style lang="less" scoped>
+.el-dropdown-link {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/CodemirrorEditor/EditorHeader/index.vue b/src/components/CodemirrorEditor/EditorHeader/index.vue
index 15669547b..310bb5ec2 100644
--- a/src/components/CodemirrorEditor/EditorHeader/index.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/index.vue
@@ -3,13 +3,13 @@ import { nextTick, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { ElNotification } from 'element-plus'
 
-import StyleOptionMenu from './StyleOptionMenu.vue'
 import PostInfo from './PostInfo.vue'
-import HelpDropdown from './HelpDropdown.vue'
 import FileDropdown from './FileDropdown.vue'
+import HelpDropdown from './HelpDropdown.vue'
+import StyleDropdown from './StyleDropdown.vue'
+import EditDropdown from './EditDropdown.vue'
 
-import { mergeCss, solveWeChatImage } from '@/assets/scripts/converter'
-import config from '@/config'
+import { mergeCss, solveWeChatImage } from '@/utils'
 import { useStore } from '@/stores'
 
 const emit = defineEmits([
@@ -17,9 +17,6 @@ const emit = defineEmits([
   `formatContent`,
   `startCopy`,
   `endCopy`,
-  `showCssEditor`,
-  `showDialogUploadImg`,
-  `showDialogForm`,
 ])
 
 const formatItems = [
@@ -53,38 +50,17 @@ const formatItems = [
 const store = useStore()
 
 const {
-  fontFamily,
-  fontSize,
-  fontColor,
-  codeBlockTheme,
-  legend,
   isDark,
   isCiteStatus,
-  isMacCodeBlock,
   output,
-  cssEditor,
 } = storeToRefs(store)
 
 const {
   toggleDark,
-  resetStyleConfirm,
   editorRefresh,
-
-  fontChanged,
-  sizeChanged,
-  colorChanged,
-  codeBlockThemeChanged,
-  legendChanged,
-  macCodeBlockChanged,
   citeStatusChanged,
 } = store
 
-const colorPicker = ref(null)
-
-function showPicker() {
-  colorPicker.value.show()
-}
-
 // 复制到微信公众号
 function copy() {
   emit(`startCopy`)
@@ -157,20 +133,6 @@ function copy() {
     emit(`endCopy`)
   }, 350)
 }
-
-// 自定义CSS样式
-function customStyle() {
-  emit(`showCssEditor`)
-  nextTick(() => {
-    if (!cssEditor.value) {
-      cssEditor.value.refresh()
-    }
-  })
-  setTimeout(() => {
-    cssEditor.value.refresh()
-  }, 50)
-}
-
 </script>
 
 <template>
@@ -206,104 +168,8 @@ function customStyle() {
           </el-dropdown-menu>
         </template>
       </el-dropdown>
-      <el-dropdown>
-        <span class="el-dropdown-link">
-          编辑<el-icon class="ml-2">
-            <ElIconArrowDown />
-          </el-icon>
-        </span>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item class="leading-8" @click="$emit('showDialogUploadImg')">
-              <el-icon>
-                <ElIconUpload />
-              </el-icon>
-              上传图片
-            </el-dropdown-item>
-            <el-dropdown-item class="leading-8" @click="$emit('showDialogForm')">
-              <el-icon>
-                <ElIconGrid />
-              </el-icon>
-              插入表格
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-      <el-dropdown>
-        <span class="el-dropdown-link">
-          样式<el-icon class="ml-2">
-            <ElIconArrowDown />
-          </el-icon>
-        </span>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item class="leading-8">
-              <StyleOptionMenu title="字体" :options="config.builtinFonts" :current="fontFamily" :change="fontChanged" />
-            </el-dropdown-item>
-            <el-dropdown-item class="leading-8">
-              <StyleOptionMenu title="字号" :options="config.sizeOption" :current="fontSize" :change="sizeChanged" />
-            </el-dropdown-item>
-            <el-dropdown-item class="leading-8">
-              <StyleOptionMenu
-                title="颜色"
-                :options="config.colorOption"
-                :current="fontColor"
-                :change="colorChanged"
-              />
-            </el-dropdown-item>
-            <el-dropdown-item class="leading-8">
-              <StyleOptionMenu
-                title="代码主题"
-                :options="config.codeThemeOption"
-                :current="codeBlockTheme"
-                :change="codeBlockThemeChanged"
-              />
-            </el-dropdown-item>
-            <el-dropdown-item class="leading-8">
-              <StyleOptionMenu title="图注格式" :options="config.legendOption" :current="legend" :change="legendChanged" />
-            </el-dropdown-item>
-            <el-dropdown-item divided class="leading-8" @click="showPicker()">
-              <el-tooltip placement="right" effect="light">
-                <template #content>
-                  <el-color-picker
-                    ref="colorPicker"
-                    v-model="fontColor"
-                    :teleported="false"
-                    show-alpha
-                    class="ml-auto"
-                    style="height: 2em"
-                    @change="colorChanged"
-                  />
-                </template>
-                <div class="w-full flex">
-                  <el-icon class="opacity-0">
-                    <ElIconCheck />
-                  </el-icon>
-                  自定义颜色
-                </div>
-              </el-tooltip>
-            </el-dropdown-item>
-            <el-dropdown-item class="leading-8" @click="customStyle">
-              <el-icon class="opacity-0">
-                <ElIconCheck />
-              </el-icon>
-              自定义 CSS
-            </el-dropdown-item>
-            <el-dropdown-item divided class="leading-8" @click="macCodeBlockChanged">
-              <el-icon :class="{ 'opacity-0': !isMacCodeBlock }">
-                <ElIconCheck />
-              </el-icon>
-              Mac 代码块
-            </el-dropdown-item>
-            <el-dropdown-item divided class="leading-8" @click="resetStyleConfirm">
-              <el-icon class="opacity-0">
-                <ElIconCheck />
-              </el-icon>
-              重置
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
+      <EditDropdown />
+      <StyleDropdown />
       <HelpDropdown />
     </el-space>
     <el-button plain type="primary" @click="copy">
diff --git a/src/components/CodemirrorEditor/InsertFormDialog.vue b/src/components/CodemirrorEditor/InsertFormDialog.vue
index b009b97e6..1f5b266cb 100644
--- a/src/components/CodemirrorEditor/InsertFormDialog.vue
+++ b/src/components/CodemirrorEditor/InsertFormDialog.vue
@@ -1,25 +1,16 @@
 <script setup>
 import { ref } from 'vue'
 import { useStore } from '@/stores'
-import { createTable } from '@/assets/scripts/util'
+import { createTable } from '@/utils'
 
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-})
+const store = useStore()
 
-const emit = defineEmits([`close`])
+const { formatContent, toggleShowInsertFormDialog } = store
 
 const rowNum = ref(3)
 const colNum = ref(3)
 const tableData = ref({})
 
-const store = useStore()
-
-const { formatContent } = store
-
 function resetVal() {
   rowNum.value = 3
   colNum.value = 3
@@ -40,7 +31,7 @@ function insertTable() {
   resetVal()
 
   formatContent()
-  emit(`close`)
+  toggleShowInsertFormDialog()
 }
 </script>
 
@@ -48,8 +39,8 @@ function insertTable() {
   <el-dialog
     title="插入表格"
     class="insert__dialog"
-    :model-value="props.visible"
-    @close="$emit('close')"
+    :model-value="store.isShowInsertFormDialog"
+    @close="toggleShowInsertFormDialog(false)"
   >
     <el-row class="tb-options" type="flex" align="middle" :gutter="10">
       <el-col :span="12">
@@ -90,7 +81,7 @@ function insertTable() {
     </table>
     <template #footer>
       <div class="dialog-footer">
-        <el-button plain @click="$emit('close')">
+        <el-button plain @click="toggleShowInsertFormDialog(false)">
           取 消
         </el-button>
         <el-button type="primary" plain @click="insertTable">
diff --git a/src/components/CodemirrorEditor/UploadImgDialog.vue b/src/components/CodemirrorEditor/UploadImgDialog.vue
index b68acd02c..3b8c01b08 100644
--- a/src/components/CodemirrorEditor/UploadImgDialog.vue
+++ b/src/components/CodemirrorEditor/UploadImgDialog.vue
@@ -1,70 +1,67 @@
-<script>
-import { nextTick } from 'vue'
+<script setup>
+import { nextTick, onBeforeMount, ref, watch } from 'vue'
 import CodeMirror from 'codemirror/lib/codemirror'
+import { ElMessage } from 'element-plus'
 import { UploadFilled } from '@element-plus/icons-vue'
 
-import { checkImage, removeLeft } from '@/assets/scripts/util'
+import { checkImage, removeLeft } from '@/utils'
+import { useStore } from '@/stores'
 
-export default {
-  components: {
-    UploadFilled,
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: [`uploadImage`, `close`],
-  data() {
-    return {
-      activeName: `upload`,
-
-      formGitHub: {
-        repo: ``,
-        branch: ``,
-        accessToken: ``,
-      },
-      // formGitee: {
-      //   repo: ``,
-      //   branch: ``,
-      //   accessToken: ``,
-      // },
-      formAliOSS: {
-        accessKeyId: ``,
-        accessKeySecret: ``,
-        bucket: ``,
-        region: ``,
-        path: ``,
-        cdnHost: ``,
-      },
-      formTxCOS: {
-        secretId: ``,
-        secretKey: ``,
-        bucket: ``,
-        region: ``,
-        path: ``,
-        cdnHost: ``,
-      },
-      formQiniu: {
-        accessKey: ``,
-        secretKey: ``,
-        bucket: ``,
-        domain: ``,
-        region: ``,
-      },
-      minioOSS: {
-        endpoint: ``,
-        port: ``,
-        useSSL: true,
-        bucket: ``,
-        accessKey: ``,
-        secretKey: ``,
-      },
-      formCustom: {
-        code:
-          localStorage.getItem(`formCustomConfig`)
-          || removeLeft(`
+const emit = defineEmits([`uploadImage`])
+
+const store = useStore()
+
+const formGitHub = ref({
+  repo: ``,
+  branch: ``,
+  accessToken: ``,
+})
+
+// const formGitee = ref({
+//   repo: ``,
+//   branch: ``,
+//   accessToken: ``,
+// })
+
+const formAliOSS = ref({
+  accessKeyId: ``,
+  accessKeySecret: ``,
+  bucket: ``,
+  region: ``,
+  path: ``,
+  cdnHost: ``,
+})
+
+const formTxCOS = ref({
+  secretId: ``,
+  secretKey: ``,
+  bucket: ``,
+  region: ``,
+  path: ``,
+  cdnHost: ``,
+})
+
+const formQiniu = ref({
+  accessKey: ``,
+  secretKey: ``,
+  bucket: ``,
+  domain: ``,
+  region: ``,
+})
+
+const minioOSS = ref({
+  endpoint: ``,
+  port: ``,
+  useSSL: true,
+  bucket: ``,
+  accessKey: ``,
+  secretKey: ``,
+})
+
+const formCustom = ref({
+  code:
+    localStorage.getItem(`formCustomConfig`)
+    || removeLeft(`
   const {file, util, okCb, errCb} = CUSTOM_ARG
   const param = new FormData()
   param.append('file', file)
@@ -76,237 +73,220 @@ export default {
     errCb(err)
   })
 `).trim(),
-        editor: undefined,
-      },
-      options: [
-        {
-          value: `default`,
-          label: `默认`,
-        },
-        // {
-        //   value: `gitee`,
-        //   label: `Gitee`,
-        // },
-        {
-          value: `github`,
-          label: `GitHub`,
-        },
-        {
-          value: `aliOSS`,
-          label: `阿里云`,
-        },
-        {
-          value: `txCOS`,
-          label: `腾讯云`,
-        },
-        {
-          value: `qiniu`,
-          label: `七牛云`,
-        },
-        {
-          value: `minio`,
-          label: `MinIO`,
-        },
-        {
-          value: `formCustom`,
-          label: `自定义代码`,
-        },
-      ],
-      imgHost: `default`,
-    }
+  editor: undefined,
+})
+
+const options = [
+  {
+    value: `default`,
+    label: `默认`,
   },
-  watch: {
-    activeName: {
-      immediate: true,
-      handler(val) {
-        if (val === `formCustom`) {
-          nextTick(() => {
-            const textarea
-              = this.$refs.formCustomElInput.$el.querySelector(`textarea`)
-            this.formCustom.editor
-              = this.formCustom.editor
-              || CodeMirror.fromTextArea(textarea, {
-                mode: `javascript`,
-              })
-            this.formCustom.editor.setValue(this.formCustom.code)
-          })
-        }
-      },
-    },
+  // {
+  //   value: `gitee`,
+  //   label: `Gitee`,
+  // },
+  {
+    value: `github`,
+    label: `GitHub`,
   },
-  beforeMount() {
-    if (localStorage.getItem(`githubConfig`)) {
-      this.formGitHub = JSON.parse(localStorage.getItem(`githubConfig`))
-    }
-    // if (localStorage.getItem(`giteeConfig`)) {
-    //   this.formGitee = JSON.parse(localStorage.getItem(`giteeConfig`))
-    // }
-    if (localStorage.getItem(`aliOSSConfig`)) {
-      this.formAliOSS = JSON.parse(localStorage.getItem(`aliOSSConfig`))
-    }
-    if (localStorage.getItem(`txCOSConfig`)) {
-      this.formTxCOS = JSON.parse(localStorage.getItem(`txCOSConfig`))
-    }
-    if (localStorage.getItem(`qiniuConfig`)) {
-      this.formQiniu = JSON.parse(localStorage.getItem(`qiniuConfig`))
-    }
-    if (localStorage.getItem(`minioConfig`)) {
-      this.minioOSS = JSON.parse(localStorage.getItem(`minioConfig`))
-    }
-    if (localStorage.getItem(`imgHost`)) {
-      this.imgHost = localStorage.getItem(`imgHost`)
-    }
+  {
+    value: `aliOSS`,
+    label: `阿里云`,
   },
-  methods: {
-    changeImgHost() {
-      localStorage.setItem(`imgHost`, this.imgHost)
-      this.$message.success(`已成功切换图床`)
-    },
-    saveGitHubConfiguration() {
-      if (!(this.formGitHub.repo && this.formGitHub.accessToken)) {
-        const blankElement = this.formGitHub.repo ? `token` : `GitHub 仓库`
-        this.$message.error(`参数「${blankElement}」不能为空`)
-        return
-      }
-      localStorage.setItem(`githubConfig`, JSON.stringify(this.formGitHub))
-      this.$message.success(`保存成功`)
-    },
-    // saveGiteeConfiguration() {
-    //   if (!(this.formGitee.repo && this.formGitee.accessToken)) {
-    //     const blankElement = this.formGitee.repo ? `私人令牌` : `Gitee 仓库`
-    //     this.$message.error(`参数「${blankElement}」不能为空`)
-    //     return
-    //   }
-    //   localStorage.setItem(`giteeConfig`, JSON.stringify(this.formGitee))
-    //   this.$message.success(`保存成功`)
-    // },
-    saveAliOSSConfiguration() {
-      if (
-        !(
-          this.formAliOSS.accessKeyId
-          && this.formAliOSS.accessKeySecret
-          && this.formAliOSS.bucket
-          && this.formAliOSS.region
-        )
-      ) {
-        this.$message.error(`阿里云 OSS 参数配置不全`)
-        return
-      }
-      localStorage.setItem(`aliOSSConfig`, JSON.stringify(this.formAliOSS))
-      this.$message.success(`保存成功`)
-    },
-    saveMinioOSSConfiguration() {
-      if (
-        !(
-          this.minioOSS.endpoint
-          && this.minioOSS.bucket
-          && this.minioOSS.accessKey
-          && this.minioOSS.secretKey
-        )
-      ) {
-        this.$message.error(`MinIO 参数配置不全`)
-        return
-      }
-      localStorage.setItem(`minioConfig`, JSON.stringify(this.minioOSS))
-      this.$message.success(`保存成功`)
-    },
-    saveTxCOSConfiguration() {
-      if (
-        !(
-          this.formTxCOS.secretId
-          && this.formTxCOS.secretKey
-          && this.formTxCOS.bucket
-          && this.formTxCOS.region
-        )
-      ) {
-        this.$message.error(`腾讯云 COS 参数配置不全`)
-        return
-      }
-      localStorage.setItem(`txCOSConfig`, JSON.stringify(this.formTxCOS))
-      this.$message.success(`保存成功`)
-    },
-
-    saveQiniuConfiguration() {
-      if (
-        !(
-          this.formQiniu.accessKey
-          && this.formQiniu.secretKey
-          && this.formQiniu.bucket
-          && this.formQiniu.domain
-          && this.formQiniu.region
-        )
-      ) {
-        this.$message.error(`七牛云 Kodo 参数配置不全`)
-        return
-      }
-      localStorage.setItem(`qiniuConfig`, JSON.stringify(this.formQiniu))
-      this.$message.success(`保存成功`)
-    },
-    formCustomSave() {
-      const str = this.formCustom.editor.getValue()
-      localStorage.setItem(`formCustomConfig`, str)
-      this.$message.success(`保存成功`)
-    },
-
-    beforeImageUpload(file) {
-      // check 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 || `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(params) {
-      this.$emit(`uploadImage`, params.file)
-    },
+  {
+    value: `txCOS`,
+    label: `腾讯云`,
   },
+  {
+    value: `qiniu`,
+    label: `七牛云`,
+  },
+  {
+    value: `minio`,
+    label: `MinIO`,
+  },
+  {
+    value: `formCustom`,
+    label: `自定义代码`,
+  },
+]
+
+const imgHost = ref(`default`)
+
+const formCustomElInput = ref(null)
+const activeName = ref(`upload`)
+
+watch(activeName, async (val) => {
+  if (val === `formCustom`) {
+    nextTick(() => {
+      const textarea
+        = formCustomElInput.value.$el.querySelector(`textarea`)
+      formCustom.value.editor
+        = formCustom.value.editor
+        || CodeMirror.fromTextArea(textarea, {
+          mode: `javascript`,
+        })
+      // formCustom.value.editor.setValue(formCustom.value.code)
+    })
+  }
+}, {
+  immediate: true,
+})
+
+onBeforeMount(() => {
+  if (localStorage.getItem(`githubConfig`)) {
+    formGitHub.value = JSON.parse(localStorage.getItem(`githubConfig`))
+  }
+  // if (localStorage.getItem(`giteeConfig`)) {
+  //   formGitee.value = JSON.parse(localStorage.getItem(`giteeConfig`))
+  // }
+  if (localStorage.getItem(`aliOSSConfig`)) {
+    formAliOSS.value = JSON.parse(localStorage.getItem(`aliOSSConfig`))
+  }
+  if (localStorage.getItem(`txCOSConfig`)) {
+    formTxCOS.value = JSON.parse(localStorage.getItem(`txCOSConfig`))
+  }
+  if (localStorage.getItem(`qiniuConfig`)) {
+    formQiniu.value = JSON.parse(localStorage.getItem(`qiniuConfig`))
+  }
+  if (localStorage.getItem(`minioConfig`)) {
+    minioOSS.value = JSON.parse(localStorage.getItem(`minioConfig`))
+  }
+  if (localStorage.getItem(`imgHost`)) {
+    imgHost.value = localStorage.getItem(`imgHost`)
+  }
+})
+
+function changeImgHost() {
+  localStorage.setItem(`imgHost`, imgHost.value)
+  ElMessage.success(`已成功切换图床`)
+}
+
+function saveGitHubConfiguration() {
+  if (!(formGitHub.value.repo && formGitHub.value.accessToken)) {
+    const blankElement = formGitHub.value.repo ? `token` : `GitHub 仓库`
+    ElMessage.error(`参数「${blankElement}」不能为空`)
+    return
+  }
+
+  localStorage.setItem(`githubConfig`, JSON.stringify(formGitHub.value))
+  ElMessage.success(`保存成功`)
+}
+
+// const saveGiteeConfiguration = () => {
+//   if (!(formGitee.value.repo && formGitee.value.accessToken)) {
+//     const blankElement = formGitee.value.repo ? `私人令牌` : `Gitee 仓库`
+//     ElMessage.error(`参数「${blankElement}」不能为空`)
+//     return
+//   }
+//   localStorage.setItem(`giteeConfig`, JSON.stringify(formGitee.value))
+//   ElMessage.success(`保存成功`)
+// }
+
+function saveAliOSSConfiguration() {
+  if (
+    !(
+      formAliOSS.value.accessKeyId
+      && formAliOSS.value.accessKeySecret
+      && formAliOSS.value.bucket
+      && formAliOSS.value.region
+    )
+  ) {
+    ElMessage.error(`阿里云 OSS 参数配置不全`)
+    return
+  }
+  localStorage.setItem(`aliOSSConfig`, JSON.stringify(formAliOSS.value))
+  ElMessage.success(`保存成功`)
+}
+function saveMinioOSSConfiguration() {
+  if (
+    !(
+      minioOSS.value.endpoint
+      && minioOSS.value.bucket
+      && minioOSS.value.accessKey
+      && minioOSS.value.secretKey
+    )
+  ) {
+    ElMessage.error(`MinIO 参数配置不全`)
+    return
+  }
+  localStorage.setItem(`minioConfig`, JSON.stringify(minioOSS.value))
+  ElMessage.success(`保存成功`)
+}
+function saveTxCOSConfiguration() {
+  if (
+    !(
+      formTxCOS.value.secretId
+      && formTxCOS.value.secretKey
+      && formTxCOS.value.bucket
+      && formTxCOS.value.region
+    )
+  ) {
+    ElMessage.error(`腾讯云 COS 参数配置不全`)
+    return
+  }
+  localStorage.setItem(`txCOSConfig`, JSON.stringify(formTxCOS.value))
+  ElMessage.success(`保存成功`)
+}
+function saveQiniuConfiguration() {
+  if (
+    !(
+      formQiniu.value.accessKey
+      && formQiniu.value.secretKey
+      && formQiniu.value.bucket
+      && formQiniu.value.domain
+      && formQiniu.value.region
+    )
+  ) {
+    ElMessage.error(`七牛云 Kodo 参数配置不全`)
+    return
+  }
+  localStorage.setItem(`qiniuConfig`, JSON.stringify(formQiniu.value))
+  ElMessage.success(`保存成功`)
+}
+
+function formCustomSave() {
+  const str = formCustom.value.editor.getValue()
+  localStorage.setItem(`formCustomConfig`, str)
+  ElMessage.success(`保存成功`)
+}
+
+function beforeImageUpload(file) {
+  // check image
+  const checkResult = checkImage(file)
+  if (!checkResult.ok) {
+    ElMessage.error(checkResult.msg)
+    return false
+  }
+  // check image host
+  let imgHost = localStorage.getItem(`imgHost`)
+  imgHost = imgHost || `default`
+  localStorage.setItem(`imgHost`, imgHost)
+
+  const config = localStorage.getItem(`${imgHost}Config`)
+  const isValidHost = imgHost === `default` || config
+  if (!isValidHost) {
+    ElMessage.error(`请先配置 ${imgHost} 图床参数`)
+    return false
+  }
+  return true
+}
+
+function uploadImage(params) {
+  emit(`uploadImage`, params.file)
 }
 </script>
 
 <template>
-  <el-dialog
-    title="本地上传"
-    class="upload__dialog"
-    :model-value="visible"
-    @close="$emit('close')"
-  >
+  <el-dialog title="本地上传" class="upload__dialog" :model-value="store.isShowUploadImgDialog" @close="store.toggleShowUploadImgDialog(false)">
     <el-tabs v-model="activeName">
       <el-tab-pane class="upload-panel" label="选择上传" name="upload">
-        <el-select
-          v-model="imgHost"
-          placeholder="请选择"
-          size="small"
-          @change="changeImgHost"
-        >
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
+        <el-select v-model="imgHost" placeholder="请选择" size="small" @change="changeImgHost">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
         <el-upload
-          drag
-          multiple
-          action=""
-          :headers="{ 'Content-Type': 'multipart/form-data' }"
-          :show-file-list="false"
-          accept=".jpg, .jpeg, .png, .gif"
-          name="file"
-          :before-upload="beforeImageUpload"
-          :http-request="uploadImage"
+          drag multiple action="" :headers="{ 'Content-Type': 'multipart/form-data' }" :show-file-list="false"
+          accept=".jpg, .jpeg, .png, .gif" name="file" :before-upload="beforeImageUpload" :http-request="uploadImage"
         >
           <el-icon class="el-icon--upload">
             <UploadFilled />
@@ -357,28 +337,16 @@ export default {
           </el-form>
         </el-tab-pane> -->
       <el-tab-pane class="github-panel" label="GitHub 图床" name="github">
-        <el-form
-          class="setting-form"
-          :model="formGitHub"
-          label-position="right"
-          label-width="150px"
-        >
+        <el-form class="setting-form" :model="formGitHub" label-position="right" label-width="150px">
           <el-form-item label="GitHub 仓库" :required="true">
-            <el-input
-              v-model.trim="formGitHub.repo"
-              placeholder="如：github.com/yanglbme/resource"
-            />
+            <el-input v-model.trim="formGitHub.repo" placeholder="如：github.com/yanglbme/resource" />
           </el-form-item>
           <el-form-item label="分支">
-            <el-input
-              v-model.trim="formGitHub.branch"
-              placeholder="如：release，可不填，默认 master"
-            />
+            <el-input v-model.trim="formGitHub.branch" placeholder="如：release，可不填，默认 master" />
           </el-form-item>
           <el-form-item label="Token" :required="true">
             <el-input
-              v-model.trim="formGitHub.accessToken"
-              show-password
+              v-model.trim="formGitHub.accessToken" show-password
               placeholder="如：cc1d0c1426d0fd0902bd2d7184b14da61b8abc46"
             />
             <el-link
@@ -397,53 +365,28 @@ export default {
         </el-form>
       </el-tab-pane>
       <el-tab-pane class="github-panel" label="阿里云 OSS" name="aliOSS">
-        <el-form
-          class="setting-form"
-          :model="formAliOSS"
-          label-position="right"
-          label-width="150px"
-        >
+        <el-form class="setting-form" :model="formAliOSS" label-position="right" label-width="150px">
           <el-form-item label="AccessKey ID" :required="true">
-            <el-input
-              v-model.trim="formAliOSS.accessKeyId"
-              placeholder="如：LTAI4GdoocsmdoxUf13ylbaNHk"
-            />
+            <el-input v-model.trim="formAliOSS.accessKeyId" placeholder="如：LTAI4GdoocsmdoxUf13ylbaNHk" />
           </el-form-item>
           <el-form-item label="AccessKey Secret" :required="true">
             <el-input
-              v-model.trim="formAliOSS.accessKeySecret"
-              show-password
+              v-model.trim="formAliOSS.accessKeySecret" show-password
               placeholder="如：cc1d0c142doocs0902bd2d7md4b14da6ylbabc46"
             />
           </el-form-item>
           <el-form-item label="Bucket" :required="true">
-            <el-input
-              v-model.trim="formAliOSS.bucket"
-              placeholder="如：doocs"
-            />
+            <el-input v-model.trim="formAliOSS.bucket" placeholder="如：doocs" />
           </el-form-item>
           <el-form-item label="Bucket 所在区域" :required="true">
-            <el-input
-              v-model.trim="formAliOSS.region"
-              placeholder="如：oss-cn-shenzhen"
-            />
+            <el-input v-model.trim="formAliOSS.region" placeholder="如：oss-cn-shenzhen" />
           </el-form-item>
           <el-form-item label="自定义 CDN 域名" :required="false">
-            <el-input
-              v-model.trim="formAliOSS.cdnHost"
-              placeholder="如：https://imagecdn.alidaodao.com，可不填"
-            />
+            <el-input v-model.trim="formAliOSS.cdnHost" placeholder="如：https://imagecdn.alidaodao.com，可不填" />
           </el-form-item>
           <el-form-item label="存储路径">
-            <el-input
-              v-model.trim="formAliOSS.path"
-              placeholder="如：img，可不填，默认为根目录"
-            />
-            <el-link
-              type="primary"
-              href="https://help.aliyun.com/document_detail/31883.html"
-              target="_blank"
-            >
+            <el-input v-model.trim="formAliOSS.path" placeholder="如：img，可不填，默认为根目录" />
+            <el-link type="primary" href="https://help.aliyun.com/document_detail/31883.html" target="_blank">
               如何使用阿里云 OSS？
             </el-link>
           </el-form-item>
@@ -455,53 +398,28 @@ export default {
         </el-form>
       </el-tab-pane>
       <el-tab-pane class="github-panel" label="腾讯云 COS" name="txCOS">
-        <el-form
-          class="setting-form"
-          :model="formTxCOS"
-          label-position="right"
-          label-width="150px"
-        >
+        <el-form class="setting-form" :model="formTxCOS" label-position="right" label-width="150px">
           <el-form-item label="SecretId" :required="true">
-            <el-input
-              v-model.trim="formTxCOS.secretId"
-              placeholder="如：AKIDnQp1w3DOOCSs8F5MDp9tdoocsmdUPonW3"
-            />
+            <el-input v-model.trim="formTxCOS.secretId" placeholder="如：AKIDnQp1w3DOOCSs8F5MDp9tdoocsmdUPonW3" />
           </el-form-item>
           <el-form-item label="SecretKey" :required="true">
             <el-input
-              v-model.trim="formTxCOS.secretKey"
-              show-password
+              v-model.trim="formTxCOS.secretKey" show-password
               placeholder="如：ukLmdtEJ9271f3DOocsMDsCXdS3YlbW0"
             />
           </el-form-item>
           <el-form-item label="Bucket" :required="true">
-            <el-input
-              v-model.trim="formTxCOS.bucket"
-              placeholder="如：doocs-3212520134"
-            />
+            <el-input v-model.trim="formTxCOS.bucket" placeholder="如：doocs-3212520134" />
           </el-form-item>
           <el-form-item label="Bucket 所在区域" :required="true">
-            <el-input
-              v-model.trim="formTxCOS.region"
-              placeholder="如：ap-guangzhou"
-            />
+            <el-input v-model.trim="formTxCOS.region" placeholder="如：ap-guangzhou" />
           </el-form-item>
           <el-form-item label="自定义 CDN 域名" :required="false">
-            <el-input
-              v-model.trim="formTxCOS.cdnHost"
-              placeholder="如：https://imagecdn.alidaodao.com，可不填"
-            />
+            <el-input v-model.trim="formTxCOS.cdnHost" placeholder="如：https://imagecdn.alidaodao.com，可不填" />
           </el-form-item>
           <el-form-item label="存储路径">
-            <el-input
-              v-model.trim="formTxCOS.path"
-              placeholder="如：img，可不填，默认根目录"
-            />
-            <el-link
-              type="primary"
-              href="https://cloud.tencent.com/document/product/436/38484"
-              target="_blank"
-            >
+            <el-input v-model.trim="formTxCOS.path" placeholder="如：img，可不填，默认根目录" />
+            <el-link type="primary" href="https://cloud.tencent.com/document/product/436/38484" target="_blank">
               如何使用腾讯云 COS？
             </el-link>
           </el-form-item>
@@ -513,53 +431,28 @@ export default {
         </el-form>
       </el-tab-pane>
       <el-tab-pane class="github-panel" label="七牛云 Kodo" name="qiniu">
-        <el-form
-          class="setting-form"
-          :model="formQiniu"
-          label-position="right"
-          label-width="150px"
-        >
+        <el-form class="setting-form" :model="formQiniu" label-position="right" label-width="150px">
           <el-form-item label="AccessKey" :required="true">
-            <el-input
-              v-model.trim="formQiniu.accessKey"
-              placeholder="如：6DD3VaLJ_SQgOdoocsyTV_YWaDmdnL2n8EGx7kG"
-            />
+            <el-input v-model.trim="formQiniu.accessKey" placeholder="如：6DD3VaLJ_SQgOdoocsyTV_YWaDmdnL2n8EGx7kG" />
           </el-form-item>
           <el-form-item label="SecretKey" :required="true">
             <el-input
-              v-model.trim="formQiniu.secretKey"
-              show-password
+              v-model.trim="formQiniu.secretKey" show-password
               placeholder="如：qgZa5qrvDOOcsmdKStD1oCjZ9nB7MDvJUs_34SIm"
             />
           </el-form-item>
           <el-form-item label="Bucket" :required="true">
-            <el-input
-              v-model.trim="formQiniu.bucket"
-              placeholder="如：md"
-            />
+            <el-input v-model.trim="formQiniu.bucket" placeholder="如：md" />
           </el-form-item>
           <el-form-item label="Bucket 对应域名" :required="true">
-            <el-input
-              v-model.trim="formQiniu.domain"
-              placeholder="如：https://images.123ylb.cn"
-            />
+            <el-input v-model.trim="formQiniu.domain" placeholder="如：https://images.123ylb.cn" />
           </el-form-item>
           <el-form-item label="存储区域" :required="true">
-            <el-input
-              v-model.trim="formQiniu.region"
-              placeholder="如：z2"
-            />
+            <el-input v-model.trim="formQiniu.region" placeholder="如：z2" />
           </el-form-item>
           <el-form-item label="存储路径" :required="false">
-            <el-input
-              v-model.trim="formQiniu.path"
-              placeholder="如：img，可不填，默认为根目录"
-            />
-            <el-link
-              type="primary"
-              href="https://developer.qiniu.com/kodo"
-              target="_blank"
-            >
+            <el-input v-model.trim="formQiniu.path" placeholder="如：img，可不填，默认为根目录" />
+            <el-link type="primary" href="https://developer.qiniu.com/kodo" target="_blank">
               如何使用七牛云 Kodo？
             </el-link>
           </el-form-item>
@@ -571,52 +464,26 @@ export default {
         </el-form>
       </el-tab-pane>
       <el-tab-pane class="github-panel" label="MinIO" name="minio">
-        <el-form
-          class="setting-form"
-          :model="minioOSS"
-          label-position="right"
-          label-width="150px"
-        >
+        <el-form class="setting-form" :model="minioOSS" label-position="right" label-width="150px">
           <el-form-item label="Endpoint" :required="true">
-            <el-input
-              v-model.trim="minioOSS.endpoint"
-              placeholder="如：play.min.io"
-            />
+            <el-input v-model.trim="minioOSS.endpoint" placeholder="如：play.min.io" />
           </el-form-item>
           <el-form-item label="Port" :required="false">
-            <el-input
-              v-model.trim="minioOSS.port"
-              type="number"
-              placeholder="如：9000，可不填，http 默认为 80，https 默认为 443"
-            />
+            <el-input v-model.trim="minioOSS.port" type="number" placeholder="如：9000，可不填，http 默认为 80，https 默认为 443" />
           </el-form-item>
           <el-form-item label="UseSSL" :required="true">
-            <el-switch
-              v-model="minioOSS.useSSL"
-              active-text="是"
-              inactive-text="否"
-            />
+            <el-switch v-model="minioOSS.useSSL" active-text="是" inactive-text="否" />
           </el-form-item>
           <el-form-item label="Bucket" :required="true">
-            <el-input
-              v-model.trim="minioOSS.bucket"
-              placeholder="如：doocs"
-            />
+            <el-input v-model.trim="minioOSS.bucket" placeholder="如：doocs" />
           </el-form-item>
           <el-form-item label="AccessKey" :required="true">
-            <el-input
-              v-model.trim="minioOSS.accessKey"
-              placeholder="如：zhangsan"
-            />
+            <el-input v-model.trim="minioOSS.accessKey" placeholder="如：zhangsan" />
           </el-form-item>
           <el-form-item label="SecretKey" :required="true">
-            <el-input
-              v-model.trim="minioOSS.secretKey"
-              placeholder="如：asdasdasd"
-            />
+            <el-input v-model.trim="minioOSS.secretKey" placeholder="如：asdasdasd" />
             <el-link
-              type="primary"
-              href="http://docs.minio.org.cn/docs/master/minio-client-complete-guide"
+              type="primary" href="http://docs.minio.org.cn/docs/master/minio-client-complete-guide"
               target="_blank"
             >
               如何使用 MinIO？
@@ -629,30 +496,14 @@ export default {
           </el-form-item>
         </el-form>
       </el-tab-pane>
-      <el-tab-pane
-        class="github-panel formCustom"
-        label="自定义代码"
-        name="formCustom"
-      >
-        <el-form
-          class="setting-form"
-          :model="formCustom"
-          label-position="right"
-        >
+      <el-tab-pane class="github-panel formCustom" label="自定义代码" name="formCustom">
+        <el-form class="setting-form" :model="formCustom" label-position="right">
           <el-form-item label="" :required="true">
             <el-input
-              ref="formCustomElInput"
-              v-model="formCustom.code"
-              class="formCustomElInput"
-              type="textarea"
-              resize="none"
-              placeholder="Your custom code here."
+              ref="formCustomElInput" v-model="formCustom.code" class="formCustomElInput" type="textarea"
+              resize="none" placeholder="Your custom code here."
             />
-            <el-link
-              type="primary"
-              href="https://github.com/doocs/md#自定义上传逻辑"
-              target="_blank"
-            >
+            <el-link type="primary" href="https://github.com/doocs/md#自定义上传逻辑" target="_blank">
               参数详情？
             </el-link>
           </el-form-item>
diff --git a/src/config/index.js b/src/config/index.js
index 53b36a730..a49903122 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -1,119 +1,370 @@
-export default {
-  prefix: `MD`,
-  builtinFonts: [
-    {
-      label: `无衬线`,
-      value: `-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif`,
-      desc: `字体123Abc`,
-    },
-    {
-      label: `衬线`,
-      value: `Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif`,
-      desc: `字体123Abc`,
-    },
-    {
-      label: `等宽`,
-      value: `Menlo, Monaco, 'Courier New', monospace`,
-      desc: `字体123Abc`,
-    },
-  ],
-  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: `更大`,
-    },
+export const prefix = `MD`
+
+export const fontFamilyOptions = [
+  {
+    label: `无衬线`,
+    value: `-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif`,
+    desc: `字体123Abc`,
+  },
+  {
+    label: `衬线`,
+    value: `Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif`,
+    desc: `字体123Abc`,
+  },
+  {
+    label: `等宽`,
+    value: `Menlo, Monaco, 'Courier New', monospace`,
+    desc: `字体123Abc`,
+  },
+]
+
+export const fontSizeOptions = [
+  {
+    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: `更大`,
+  },
+]
+
+export const colorOptions = [
+  {
+    label: `经典蓝`,
+    value: `rgba(15, 76, 129, 1)`,
+    desc: `最新流行`,
+  },
+  {
+    label: `翡翠绿`,
+    value: `rgba(0, 152, 116, 1)`,
+    desc: `优雅清新`,
+  },
+  {
+    label: `活力橘`,
+    value: `rgba(250, 81, 81, 1)`,
+    desc: `热情活泼`,
+  },
+  // { label: `微信绿`, value: `rgb(26, 173, 25,1)`, desc: `经典微信绿` },
+]
+
+export const codeBlockThemeOptions = [
+  {
+    label: `github`,
+    value: `https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/highlight.js@11.5.1/styles/github.min.css`,
+    desc: `light`,
+  },
+  {
+    label: `solarized-light`,
+    value: `https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/highlight.js@11.5.1/styles/solarized-light.min.css`,
+    desc: `light`,
+  },
+  {
+    label: `atom-one-dark`,
+    value: `https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/highlight.js@11.5.1/styles/atom-one-dark.min.css`,
+    desc: `dark`,
+  },
+  {
+    label: `obsidian`,
+    value: `https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/highlight.js@11.5.1/styles/obsidian.min.css`,
+    desc: `dark`,
+  },
+  {
+    label: `vs2015`,
+    value: `https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/highlight.js@11.5.1/styles/vs2015.min.css`,
+    desc: `dark`,
+  },
+]
+
+export const legendOptions = [
+  {
+    label: `title 优先`,
+    value: `title-alt`,
+    desc: ``,
+  },
+  {
+    label: `alt 优先`,
+    value: `alt-title`,
+    desc: ``,
+  },
+  {
+    label: `只显示 title`,
+    value: `title`,
+    desc: ``,
+  },
+  {
+    label: `只显示 alt`,
+    value: `alt`,
+    desc: ``,
+  },
+  {
+    label: `不显示`,
+    value: `none`,
+    desc: ``,
+  },
+]
+
+export 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`,
   ],
-  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: `热情活泼`,
-    },
-    // { label: `微信绿`, value: `rgb(26, 173, 25,1)`, desc: `经典微信绿` },
+}
+
+export 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`,
   ],
-  codeThemeOption: [
-    {
-      label: `github`,
-      value: `https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/highlight.js@11.5.1/styles/github.min.css`,
-      desc: `light`,
-    },
-    {
-      label: `solarized-light`,
-      value: `https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/highlight.js@11.5.1/styles/solarized-light.min.css`,
-      desc: `light`,
-    },
-    {
-      label: `atom-one-dark`,
-      value: `https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/highlight.js@11.5.1/styles/atom-one-dark.min.css`,
-      desc: `dark`,
-    },
-    {
-      label: `obsidian`,
-      value: `https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/highlight.js@11.5.1/styles/obsidian.min.css`,
-      desc: `dark`,
-    },
-    {
-      label: `vs2015`,
-      value: `https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/highlight.js@11.5.1/styles/vs2015.min.css`,
-      desc: `dark`,
+}
+
+const baseColor = `#3f3f3f`
+
+export const defaultTheme = {
+  BASE: {
+    'text-align': `left`,
+    'line-height': `1.75`,
+  },
+  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)`,
+      'color': `var(--el-text-color-regular)`,
     },
-  ],
-  legendOption: [
-    {
-      label: `title 优先`,
-      value: `title-alt`,
-      desc: ``,
-    },
-    {
-      label: `alt 优先`,
-      value: `alt-title`,
-      desc: ``,
-    },
-    {
-      label: `只显示 title`,
-      value: `title`,
-      desc: ``,
-    },
-    {
-      label: `只显示 alt`,
-      value: `alt`,
-      desc: ``,
-    },
-    {
-      label: `不显示`,
-      value: `none`,
-      desc: ``,
+
+    // 二级标题样式
+    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)`,
+      'color': `var(--el-text-color-regular)`,
+    },
+
+    // 四级标题样式
+    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`,
+      'color': `var(--el-text-color-regular)`,
+      'text-align': `justify`,
+    },
+
+    // 引用样式
+    blockquote: {
+      'font-style': `normal`,
+      'border-left': `none`,
+      'padding': `1em`,
+      'border-radius': `8px`,
+      'color': `rgba(0,0,0,0.5)`,
+      'background': `#f7f7f7`,
+      'margin': `2em 8px`,
+    },
+
+    blockquote_p: {
+      'letter-spacing': `0.1em`,
+      'color': `rgb(80, 80, 80)`,
+      'font-size': `1em`,
+      'display': `block`,
+    },
+    code_pre: {
+      'font-size': `14px`,
+      'overflow-x': `auto`,
+      'border-radius': `8px`,
+      'padding': `1em`,
+      'line-height': `1.5`,
+      'margin': `10px 8px`,
+    },
+    code: {
+      'margin': 0,
+      'white-space': `nowrap`,
+      'font-family': `Menlo, Operator Mono, Consolas, Monaco, monospace`,
+    },
+
+    image: {
+      'border-radius': `4px`,
+      'display': `block`,
+      'margin': `0.1em auto 0.5em`,
+      'width': `100% !important`,
+    },
+
+    ol: {
+      'margin-left': `0`,
+      'padding-left': `1em`,
+      'color': `var(--el-text-color-regular)`,
+    },
+
+    ul: {
+      'margin-left': `0`,
+      'padding-left': `1em`,
+      'list-style': `circle`,
+      'color': `var(--el-text-color-regular)`,
+    },
+
+    footnotes: {
+      'margin': `0.5em 8px`,
+      'font-size': `80%`,
+      'color': `var(--el-text-color-regular)`,
+    },
+
+    figure: {
+      margin: `1.5em 8px`,
+      color: `var(--el-text-color-regular)`,
+    },
+    hr: {
+      '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)`,
+    },
+  },
+  inline: {
+    listitem: {
+      'text-indent': `-1em`,
+      'display': `block`,
+      'margin': `0.2em 8px`,
+      'color': `var(--el-text-color-regular)`,
+    },
+
+    codespan: {
+      'font-size': `90%`,
+      'color': `#d14`,
+      'background': `rgba(27,31,35,.05)`,
+      'padding': `3px 5px`,
+      'border-radius': `4px`,
+      // 'word-break': `break-all`,
+    },
+
+    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`,
+      'color': `var(--el-text-color-regular)`,
+    },
+
+    thead: {
+      'background': `rgba(0, 0, 0, 0.05)`,
+      'font-weight': `bold`,
+      'color': `var(--el-text-color-regular)`,
+    },
+
+    td: {
+      border: `1px solid #dfdfdf`,
+      padding: `0.25em 0.5em`,
+      color: baseColor,
+    },
+
+    footnote: {
+      'font-size': `12px`,
+      'color': `var(--el-text-color-regular)`,
+    },
+
+    figcaption: {
+      'text-align': `center`,
+      'color': `#888`,
+      'font-size': `0.8em`,
+    },
+  },
 }
diff --git a/src/main.js b/src/main.js
index 6f5a24034..f71f96a5d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,8 +8,8 @@ import 'codemirror/lib/codemirror.css'
 import 'codemirror/theme/xq-light.css'
 
 /* 每个页面公共css */
-import './assets/less/theme.less'
-import './assets/less/style-mirror.less'
+import '@/assets/less/theme.less'
+import '@/assets/less/style-mirror.less'
 
 import 'codemirror/mode/css/css'
 import 'codemirror/mode/markdown/markdown'
diff --git a/src/stores/index.js b/src/stores/index.js
index b8b4be702..9045d2f6b 100644
--- a/src/stores/index.js
+++ b/src/stores/index.js
@@ -1,15 +1,15 @@
 import { markRaw, onMounted, ref } from 'vue'
 import { createPinia, defineStore } from 'pinia'
 import { marked } from 'marked'
-import CodeMirror from 'codemirror/lib/codemirror'
+import CodeMirror from 'codemirror'
 import { useDark, useStorage, useToggle } from '@vueuse/core'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
-import config from '@/config'
-import WxRenderer from '@/assets/scripts/renderers/wx-renderer'
+import { codeBlockThemeOptions, colorOptions, fontFamilyOptions, fontSizeOptions, githubConfig, legendOptions } from '@/config'
+import WxRenderer from '@/utils/wx-renderer'
 import DEFAULT_CONTENT from '@/assets/example/markdown.md?raw'
 import DEFAULT_CSS_CONTENT from '@/assets/example/theme-css.txt?raw'
-import { css2json, customCssWithTemplate, downloadMD, exportHTML, formatCss, formatDoc, setColor, setColorWithCustomTemplate, setFontSize } from '@/assets/scripts/util'
+import { css2json, customCssWithTemplate, downloadMD, exportHTML, formatCss, formatDoc, setColor, setColorWithCustomTemplate, setFontSize } from '@/utils'
 
 const defaultKeyMap = CodeMirror.keyMap.default
 const modPrefix
@@ -35,15 +35,15 @@ export const useStore = defineStore(`store`, () => {
   const output = ref(``)
 
   // 文本字体
-  const fontFamily = useStorage(`fonts`, config.builtinFonts[0].value)
+  const fontFamily = useStorage(`fonts`, fontFamilyOptions[0].value)
   // 文本大小
-  const fontSize = useStorage(`size`, config.sizeOption[2].value)
+  const fontSize = useStorage(`size`, fontSizeOptions[2].value)
   // 文本颜色
-  const fontColor = useStorage(`color`, config.colorOption[0].value)
+  const fontColor = useStorage(`color`, colorOptions[0].value)
   // 代码块主题
-  const codeBlockTheme = useStorage(`codeBlockTheme`, config.codeThemeOption[2].value)
+  const codeBlockTheme = useStorage(`codeBlockTheme`, codeBlockThemeOptions[2].value)
   // 图注格式
-  const legend = useStorage(`legend`, config.legendOption[3].value)
+  const legend = useStorage(`legend`, legendOptions[3].value)
 
   const wxRenderer = new WxRenderer({
     theme: setColor(fontColor.value),
@@ -51,11 +51,11 @@ export const useStore = defineStore(`store`, () => {
     size: fontSize.value,
   })
 
+  // 内容编辑器编辑器
+  const editor = ref(null)
   // 编辑区域内容
   const editorContent = useStorage(`__editor_content`, formatDoc(DEFAULT_CONTENT))
 
-  const editor = ref(null)
-
   // 格式化文档
   const formatContent = () => {
     const doc = formatDoc(editor.value.getValue())
@@ -130,6 +130,7 @@ export const useStore = defineStore(`store`, () => {
     output.value = outputTemp
   }
 
+  // 自义定 CSS 编辑器
   const cssEditor = ref(null)
   // 自定义 CSS 内容
   const cssContent = useStorage(`__css_content`, DEFAULT_CSS_CONTENT)
@@ -144,12 +145,6 @@ export const useStore = defineStore(`store`, () => {
     })
     editorRefresh()
   }
-
-  const setEditorContent = (val) => {
-    editor.value.setValue(val)
-    editorRefresh()
-  }
-
   // 初始化 CSS 编辑器
   onMounted(() => {
     const cssEditorDom = document.querySelector(`#cssEditor`)
@@ -192,11 +187,11 @@ export const useStore = defineStore(`store`, () => {
     isCiteStatus.value = false
     isMacCodeBlock.value = true
 
-    fontFamily.value = config.builtinFonts[0].value
-    fontSize.value = config.sizeOption[2].value
-    fontColor.value = config.colorOption[0].value
-    codeBlockTheme.value = config.codeThemeOption[2].value
-    legend.value = config.legendOption[3].value
+    fontFamily.value = fontFamilyOptions[0].value
+    fontSize.value = fontSizeOptions[2].value
+    fontColor.value = colorOptions[0].value
+    codeBlockTheme.value = codeBlockThemeOptions[2].value
+    legend.value = legendOptions[3].value
 
     cssEditor.value.setValue(DEFAULT_CSS_CONTENT)
 
@@ -319,7 +314,23 @@ export const useStore = defineStore(`store`, () => {
       })
   }
 
+  const isShowCssEditor = ref(false)
+  const toggleShowCssEditor = useToggle(isShowCssEditor)
+
+  const isShowInsertFormDialog = ref(false)
+  const toggleShowInsertFormDialog = useToggle(isShowInsertFormDialog)
+
+  const isShowUploadImgDialog = ref(false)
+  const toggleShowUploadImgDialog = useToggle(isShowUploadImgDialog)
+
   return {
+    isShowCssEditor,
+    toggleShowCssEditor,
+    isShowInsertFormDialog,
+    toggleShowInsertFormDialog,
+    isShowUploadImgDialog,
+    toggleShowUploadImgDialog,
+
     isDark,
     toggleDark,
 
@@ -340,9 +351,6 @@ export const useStore = defineStore(`store`, () => {
     legend,
 
     editorRefresh,
-    setEditorContent,
-
-    updateCss,
 
     fontChanged,
     sizeChanged,
diff --git a/src/api/fetch.js b/src/utils/fetch.js
similarity index 100%
rename from src/api/fetch.js
rename to src/utils/fetch.js
diff --git a/src/api/file.js b/src/utils/file.js
similarity index 97%
rename from src/api/file.js
rename to src/utils/file.js
index 53f149383..0bbdb973a 100644
--- a/src/api/file.js
+++ b/src/utils/file.js
@@ -5,10 +5,11 @@ import COS from 'cos-js-sdk-v5'
 import Buffer from 'buffer-from'
 import { v4 as uuidv4 } from 'uuid'
 import * as qiniu from 'qiniu-js'
-import { base64encode, safe64, utf16to8 } from '../assets/scripts/tokenTools'
-import * as tokenTools from '../assets/scripts/tokenTools'
-import { giteeConfig, githubConfig } from './config'
-import fetch from './fetch'
+
+import fetch from '@/utils/fetch'
+import { base64encode, safe64, utf16to8 } from '@/utils/tokenTools'
+import * as tokenTools from '@/utils/tokenTools'
+import { giteeConfig, githubConfig } from '@/config'
 
 function getConfig(useDefault, platform) {
   if (useDefault) {
diff --git a/src/utils/index.js b/src/utils/index.js
index 5c73ad593..85b14cc8a 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -1,5 +1,399 @@
-import { prefix } from '@/config'
+import juice from 'juice'
+import prettier from 'prettier/standalone'
+import prettierCss from 'prettier/parser-postcss'
+import prettierMarkdown from 'prettier/parser-markdown'
+
+import { defaultTheme, prefix } from '@/config'
 
 export function addPrefix(str) {
   return `${prefix}__${str}`
 }
+
+function createCustomTheme(theme, color) {
+  const customTheme = JSON.parse(JSON.stringify(theme))
+  customTheme.block.h1[`border-bottom`] = `2px solid ${color}`
+  customTheme.block.h2.background = color
+  customTheme.block.h3[`border-left`] = `3px solid ${color}`
+  customTheme.block.h4.color = color
+  customTheme.inline.strong.color = color
+  return customTheme
+}
+
+// 设置自定义颜色
+export function setColorWithTemplate(theme) {
+  return (color) => {
+    return createCustomTheme(theme, color)
+  }
+}
+
+export function setColorWithCustomTemplate(theme, color) {
+  return createCustomTheme(theme, color)
+}
+
+// 设置自定义字体大小
+export function setFontSizeWithTemplate(template) {
+  return function (fontSize) {
+    const customTheme = JSON.parse(JSON.stringify(template))
+    customTheme.block.h1[`font-size`] = `${fontSize * 1.14}px`
+    customTheme.block.h2[`font-size`] = `${fontSize * 1.1}px`
+    customTheme.block.h3[`font-size`] = `${fontSize}px`
+    customTheme.block.h4[`font-size`] = `${fontSize}px`
+    return customTheme
+  }
+}
+
+export const setColor = setColorWithTemplate(defaultTheme)
+export const setFontSize = setFontSizeWithTemplate(defaultTheme)
+
+export function customCssWithTemplate(jsonString, color, theme) {
+  // block
+  const customTheme = createCustomTheme(theme, color)
+
+  customTheme.block.h1 = Object.assign(customTheme.block.h1, jsonString.h1)
+  customTheme.block.h2 = Object.assign(customTheme.block.h2, jsonString.h2)
+  customTheme.block.h3 = Object.assign(customTheme.block.h3, jsonString.h3)
+  customTheme.block.h4 = Object.assign(customTheme.block.h4, jsonString.h4)
+  customTheme.block.code = Object.assign(
+    customTheme.block.code,
+    jsonString.code,
+  )
+  customTheme.block.p = Object.assign(customTheme.block.p, jsonString.p)
+  customTheme.block.hr = Object.assign(customTheme.block.hr, jsonString.hr)
+  customTheme.block.blockquote = Object.assign(
+    customTheme.block.blockquote,
+    jsonString.blockquote,
+  )
+  customTheme.block.blockquote_p = Object.assign(
+    customTheme.block.blockquote_p,
+    jsonString.blockquote_p,
+  )
+  customTheme.block.image = Object.assign(
+    customTheme.block.image,
+    jsonString.image,
+  )
+
+  // inline
+  customTheme.inline.strong = Object.assign(
+    customTheme.inline.strong,
+    jsonString.strong,
+  )
+  customTheme.inline.codespan = Object.assign(
+    customTheme.inline.codespan,
+    jsonString.codespan,
+  )
+  customTheme.inline.link = Object.assign(
+    customTheme.inline.link,
+    jsonString.link,
+  )
+  customTheme.inline.wx_link = Object.assign(
+    customTheme.inline.wx_link,
+    jsonString.wx_link,
+  )
+  customTheme.block.ul = Object.assign(customTheme.block.ul, jsonString.ul)
+  customTheme.block.ol = Object.assign(customTheme.block.ol, jsonString.ol)
+  customTheme.inline.listitem = Object.assign(
+    customTheme.inline.listitem,
+    jsonString.li,
+  )
+  return customTheme
+}
+
+/**
+ * 将CSS形式的字符串转换为JSON
+ *
+ * @param {string} 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)
+  }
+
+  // 初始化返回值
+  const json = {}
+
+  while (css.length > 0 && css.includes(`{`) && css.includes(`}`)) {
+    // 存储第一个左/右花括号的下标
+    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) {
+      const ret = {}
+      array.forEach((e) => {
+        const index = e.indexOf(`:`)
+        const property = e.substring(0, index).trim()
+        ret[property] = e.substring(index + 1).trim()
+      })
+      return ret
+    }
+
+    // 切割声明块并移除空白符，然后放入数组中
+    let declarations = css
+      .substring(lbracket + 1, rbracket)
+      .split(`;`)
+      .map(e => e.trim())
+      .filter(e => e.length > 0) // 移除所有""空值
+
+    // 转为Object对象
+    declarations = toObject(declarations)
+
+    // 第二步：选择器处理，每个选择器会与它对应的声明相关联，如：
+    // `h1, p#bar {color: red}`
+    // ==>
+    // {"h1": {color: red}, "p#bar": {color: red}}
+
+    const 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
+}
+
+/**
+ * 将编辑器内容保存到 LocalStorage
+ * @param {*} editor
+ * @param {*} name
+ */
+export function saveEditorContent(editor, name) {
+  const content = editor.getValue(0)
+  if (content) {
+    localStorage.setItem(name, content)
+  }
+  else {
+    localStorage.removeItem(name)
+  }
+}
+
+/**
+ * 格式化文档
+ * @param {string} content - 文档内容
+ */
+export function formatDoc(content) {
+  return prettier.format(content, {
+    parser: `markdown`,
+    plugins: [prettierMarkdown],
+  })
+}
+
+/**
+ * 格式化css
+ * @param {string} content - css内容
+ */
+export function formatCss(content) {
+  return prettier.format(content, {
+    parser: `css`,
+    plugins: [prettierCss],
+  })
+}
+
+/**
+ * 导出原始 Markdown 文档
+ * @param {string} doc - 文档内容
+ */
+export function downloadMD(doc) {
+  const downLink = document.createElement(`a`)
+
+  downLink.download = `content.md`
+  downLink.style.display = `none`
+  const blob = new Blob([doc])
+
+  downLink.href = URL.createObjectURL(blob)
+  document.body.appendChild(downLink)
+  downLink.click()
+  document.body.removeChild(downLink)
+}
+
+/**
+ * 导出 HTML 生成内容
+ */
+export function exportHTML() {
+  const element = document.querySelector(`#output`)
+  setStyles(element)
+  const htmlStr = element.innerHTML
+
+  const downLink = document.createElement(`a`)
+
+  downLink.download = `content.html`
+  downLink.style.display = `none`
+  const blob = new Blob([
+    `<html><head><meta charset="utf-8" /></head><body><div style="width: 750px; margin: auto;">${htmlStr}</div></body></html>`,
+  ])
+
+  downLink.href = URL.createObjectURL(blob)
+  document.body.appendChild(downLink)
+  downLink.click()
+  document.body.removeChild(downLink)
+
+  function setStyles(element) {
+    /**
+     * 获取一个 DOM 元素的所有样式，
+     * @param {DOM 元素} element DOM 元素
+     * @param {排除的属性} excludes 如果某些属性对结果有不良影响，可以使用这个参数来排除
+     * @returns 行内样式拼接结果
+     */
+    function getElementStyles(element, excludes = [`width`, `height`]) {
+      const styles = getComputedStyle(element, null)
+      return Object.entries(styles)
+        .filter(
+          ([key]) => styles.getPropertyValue(key) && !excludes.includes(key),
+        )
+        .map(([key, value]) => `${key}:${value};`)
+        .join(``)
+    }
+
+    switch (true) {
+      case isPre(element):
+      case isCode(element):
+      case isSpan(element):
+        element.setAttribute(`style`, getElementStyles(element))
+      // eslint-disable-next-line no-fallthrough
+      default:
+    }
+    if (element.children.length) {
+      Array.from(element.children).forEach(child => setStyles(child))
+    }
+
+    // 判断是否是包裹代码块的 pre 元素
+    function isPre(element) {
+      return (
+        element.tagName === `PRE`
+        && Array.from(element.classList).includes(`code__pre`)
+      )
+    }
+
+    // 判断是否是包裹代码块的 code 元素
+    function isCode(element) {
+      return (
+        element.tagName === `CODE`
+      )
+    }
+
+    // 判断是否是包裹代码字符的 span 元素
+    function isSpan(element) {
+      return (
+        element.tagName === `SPAN`
+        && (isCode(element.parentElement)
+        || isCode(element.parentElement.parentElement))
+      )
+    }
+  }
+}
+
+/**
+ * 生成列表字符串
+ * @param {*} data 对应内容集合
+ * @param {*} rows 行
+ * @param {*} cols 列
+ */
+export function createTable({ data, rows, cols }) {
+  let table = ``
+  for (let i = 0; i < rows + 2; ++i) {
+    table += `| `
+    const currRow = []
+    for (let j = 0; j < cols; ++j) {
+      const rowIdx = i > 1 ? i - 1 : i
+      currRow.push(i === 1 ? `---` : data[`k_${rowIdx}_${j}`] || `     `)
+    }
+    table += currRow.join(` | `)
+    table += ` |\n`
+  }
+
+  return table
+}
+
+export function toBase64(file) {
+  return 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 file size
+  const maxSize = 10
+  const valid = file.size / 1024 / 1024 <= maxSize
+  if (!valid) {
+    return {
+      ok: false,
+      msg: `由于公众号限制，图片大小不能超过 ${maxSize}M`,
+    }
+  }
+  return { ok: true }
+}
+
+/**
+ * 移除左边多余空格
+ * @param {*} str
+ * @returns string
+ */
+export function removeLeft(str) {
+  const lines = str.split(`\n`)
+  // 获取应该删除的空白符数量
+  const minSpaceNum = lines
+    .filter(item => item.trim())
+    .map(item => item.match(/(^\s+)?/)[0].length)
+    .sort((a, b) => a - b)[0]
+  // 删除空白符
+  return lines.map(item => item.slice(minSpaceNum)).join(`\n`)
+}
+
+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
+  }
+}
+
+export function mergeCss(html) {
+  return juice(html, {
+    inlinePseudoElements: true,
+    preserveImportant: true,
+  })
+}
diff --git a/src/assets/scripts/tokenTools.js b/src/utils/tokenTools.js
similarity index 99%
rename from src/assets/scripts/tokenTools.js
rename to src/utils/tokenTools.js
index ac5632fff..3d7f4df3c 100644
--- a/src/assets/scripts/tokenTools.js
+++ b/src/utils/tokenTools.js
@@ -60,7 +60,8 @@ export function utf8to16(str) {
 }
 
 const base64EncodeChars = `ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_`
-const base64DecodeChars = new Array(
+
+const base64DecodeChars = [
   -1,
   -1,
   -1,
@@ -189,7 +190,8 @@ const base64DecodeChars = new Array(
   -1,
   -1,
   -1,
-)
+]
+
 export function base64encode(str) {
   let out, i, len
   let c1, c2, c3
diff --git a/src/assets/scripts/renderers/wx-renderer.js b/src/utils/wx-renderer.js
similarity index 99%
rename from src/assets/scripts/renderers/wx-renderer.js
rename to src/utils/wx-renderer.js
index 8400c50ec..a55ddaa2b 100644
--- a/src/assets/scripts/renderers/wx-renderer.js
+++ b/src/utils/wx-renderer.js
@@ -229,4 +229,5 @@ class WxRenderer {
     }
   }
 }
+
 export default WxRenderer
diff --git a/src/views/CodemirrorEditor.vue b/src/views/CodemirrorEditor.vue
index 476021adc..383b52928 100644
--- a/src/views/CodemirrorEditor.vue
+++ b/src/views/CodemirrorEditor.vue
@@ -4,7 +4,7 @@ import { storeToRefs } from 'pinia'
 import { ElMessage } from 'element-plus'
 import CodeMirror from 'codemirror'
 
-import fileApi from '@/api/file'
+import fileApi from '@/utils/file'
 import { useStore } from '@/stores'
 
 import EditorHeader from '@/components/CodemirrorEditor/EditorHeader/index.vue'
@@ -18,7 +18,7 @@ import {
   checkImage,
   formatDoc,
   toBase64,
-} from '@/assets/scripts/util'
+} from '@/utils'
 
 import 'codemirror/mode/javascript/javascript'
 
@@ -27,7 +27,7 @@ const modPrefix
   = defaultKeyMap === CodeMirror.keyMap.macDefault ? `Cmd` : `Ctrl`
 
 const store = useStore()
-const { output, editor, editorContent } = storeToRefs(store)
+const { output, editor, editorContent, isShowCssEditor } = storeToRefs(store)
 
 const {
   editorRefresh,
@@ -36,11 +36,10 @@ const {
   formatContent,
   importMarkdownContent,
   resetStyleConfirm,
+  toggleShowInsertFormDialog,
+  toggleShowUploadImgDialog,
 } = store
 
-const showCssEditor = ref(false)
-const dialogUploadImgVisible = ref(false)
-const insertFormDialogVisible = ref(false)
 const isImgLoading = ref(false)
 const timeout = ref(0)
 const mouseLeft = ref(0)
@@ -123,10 +122,10 @@ function endCopy() {
 function onMenuEvent(type) {
   switch (type) {
     case `insertPic`:
-      dialogUploadImgVisible.value = true
+      toggleShowUploadImgDialog()
       break
     case `insertTable`:
-      insertFormDialogVisible.value = true
+      toggleShowInsertFormDialog()
       break
     case `resetStyle`:
       resetStyleConfirm()
@@ -176,7 +175,7 @@ function uploaded(imageUrl) {
     ElMessage.error(`上传图片未知异常`)
     return
   }
-  dialogUploadImgVisible.value = false
+  toggleShowUploadImgDialog(false)
   // 上传成功，获取光标
   const cursor = editor.value.getCursor()
   const markdownImage = `![](${imageUrl})`
@@ -224,7 +223,6 @@ function initEditor() {
     extraKeys: {
       [`${modPrefix}-F`]: function autoFormat(editor) {
         const doc = formatDoc(editor.getValue(0))
-        localStorage.setItem(`__editor_content`, doc)
         editor.setValue(doc)
       },
       [`${modPrefix}-B`]: function bold(editor) {
@@ -290,6 +288,7 @@ function initEditor() {
 }
 
 const container = ref(null)
+
 // 右键菜单
 function openMenu(e) {
   const menuMinWidth = 105
@@ -479,9 +478,6 @@ onMounted(() => {
         <EditorHeader
           @add-format="addFormat"
           @format-content="formatContent"
-          @show-css-editor="showCssEditor = !showCssEditor"
-          @show-dialog-form="insertFormDialogVisible = true"
-          @show-dialog-upload-img="dialogUploadImgVisible = true"
           @start-copy="startCopy"
           @end-copy="endCopy"
         />
@@ -491,7 +487,7 @@ onMounted(() => {
           <el-col
             ref="codeMirrorWrapper"
             :style="{ order: store.isEditOnLeft ? 0 : 1 }"
-            :span="showCssEditor ? 8 : 12"
+            :span="isShowCssEditor ? 8 : 12"
             class="codeMirror-wrapper"
             @contextmenu.prevent="openMenu"
           >
@@ -504,7 +500,7 @@ onMounted(() => {
           <el-col
             id="preview"
             ref="preview"
-            :span="showCssEditor ? 8 : 12"
+            :span="isShowCssEditor ? 8 : 12"
             class="preview-wrapper"
           >
             <div id="output-wrapper" :class="{ output_night: !backLight }">
@@ -517,23 +513,18 @@ onMounted(() => {
               </div>
             </div>
           </el-col>
-          <CssEditor :show-css-editor="showCssEditor" />
+          <CssEditor />
         </el-row>
       </el-main>
     </el-container>
 
     <UploadImgDialog
-      :visible="dialogUploadImgVisible"
-      @close="dialogUploadImgVisible = false"
       @before-upload="beforeUpload"
       @upload-image="uploadImage"
       @uploaded="uploaded"
     />
 
-    <InsertFormDialog
-      :visible="insertFormDialogVisible"
-      @close="insertFormDialogVisible = false"
-    />
+    <InsertFormDialog />
 
     <RightClickMenu
       :visible="rightClickMenuVisible"
@@ -542,6 +533,7 @@ onMounted(() => {
       @menu-tick="onMenuEvent"
       @close-menu="rightClickMenuVisible = false"
     />
+
     <RunLoading />
   </div>
 </template>