diff --git a/package.json b/package.json
index 201fbd6e..404772d8 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "lodash": "^4.17.15",
     "mobile-device-detect": "^0.4.3",
     "moment": "^2.24.0",
+    "opencc-js": "^1.0.5",
     "register-service-worker": "^1.7.2",
     "swiper": "^5.3.6",
     "v-calendar": "^1.0.3",
@@ -43,6 +44,8 @@
     "babel-plugin-import": "^1.13.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.1.2",
+    "less": "^4.2.0",
+    "less-loader": "^7.3.0",
     "postcss-pxtorem": "^5.1.1",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
diff --git a/src/views/Novel/chapter.vue b/src/views/Novel/chapter.vue
index 912ff5de..ebec9c72 100644
--- a/src/views/Novel/chapter.vue
+++ b/src/views/Novel/chapter.vue
@@ -1,149 +1,34 @@
 <template>
-  <div class="chapter" ref="chapterEl">
-    <div class="topbar__wrapper" :class="{ show: isActionShow }">
+  <div class="chapter" :data-censored="isCensored(novel)" ref="chapterEl">
+    <div class="topbar__wrapper" :class="{ show: isMenuShow }">
       <div class="chapter-name">{{ novel.title }}</div>
       <TopBar :transparent="true" color="dark" :padding="false" />
-      <div class="btn-setting" @click="isSettingShow = !isSettingShow">
+      <div class="btn-setting" @click="$refs.novelReader.showSetting()">
         <Icon class="icon-setting" name="setting"></Icon>
       </div>
     </div>
-    <div class="page">{{ `${page} / ${total}` }}</div>
     <transition name="fade">
       <div class="loading" v-if="loading">加载中...</div>
     </transition>
-    <div
-      class="novel-content__wrapper"
-      :style="viewerStyle"
-      @pointerdown.prevent.stop="handleTouchStart"
-      @pointermove.stop.prevent="handleTouchMove"
-      @pointerup.prevent.stop="handleTouchEnd"
-      v-prevent="['touchmove','mousemove']"
-      ref="novelContentWrapper"
-    >
-      <!-- <NovelMeta :novel="novel" /> -->
-      <template v-if="!loading">
-        <div
-          class="novel-content"
-          :class="{ censored: isCensored(novel) }"
-          v-html="parsedContent"
-          ref="novelContentEl"
-        ></div>
-      </template>
-    </div>
-    <div class="setting__wrapper" :class="{ show: isSettingShow }">
-      <transition name="fade">
-        <div class="back-top" :class="{ show: isTopShow && isActionShow }" @click="toTop">
-          <Icon class="icon-top" name="top"></Icon>
-        </div>
-      </transition>
-      <div class="action-panel">
-        <div class="action-item slider">
-          <span>A-</span>
-          <van-slider
-            v-model="readerConfig.fontSize.value"
-            :min="readerConfig.fontSize.range[0]"
-            :max="readerConfig.fontSize.range[1]"
-            active-color="#ffcd59"
-          >
-            <template #button>
-              <div class="slide-button">{{ readerConfig.fontSize.value }}</div>
-            </template>
-          </van-slider>
-          <span class="big">A+</span>
-        </div>
-        <div class="row">
-          <div class="action-item slider">
-            <span>小</span>
-            <van-slider
-              v-model="readerConfig.padding.value"
-              :min="readerConfig.padding.range[0]"
-              :max="readerConfig.padding.range[1]"
-              active-color="#ffcd59"
-            >
-              <template #button>
-                <div class="slide-button">边距</div>
-              </template>
-            </van-slider>
-            <span>大</span>
-          </div>
-          <div class="action-item slider">
-            <span>紧</span>
-            <van-slider
-              v-model="readerConfig.lineHeight.value"
-              :min="readerConfig.lineHeight.range[0]"
-              :max="readerConfig.lineHeight.range[1]"
-              :step="0.1"
-              active-color="#ffcd59"
-            >
-              <template #button>
-                <div class="slide-button">行距</div>
-              </template>
-            </van-slider>
-            <span>松</span>
-          </div>
-        </div>
-        <div class="action-item">
-          <span class="label">选择颜色</span>
-          <span
-            class="color"
-            :class="{ active: readerConfig.theme.value === index }"
-            :style="{
-              color: item.color,
-              backgroundColor: item.bg,
-            }"
-            @click="readerConfig.theme.value = index"
-            v-for="(item, index) in themeList"
-            :key="index"
-          >字</span>
-        </div>
-        <div class="action-item">
-          <span class="label">选择字体</span>
-          <span
-            class="font"
-            :class="{ active: readerConfig.fontFamily.value === index }"
-            :style="{
-              fontFamily: item.font,
-            }"
-            @click="readerConfig.fontFamily.value = index"
-            v-for="(item, index) in fontList"
-            :key="index"
-          >{{ item.name }}</span>
-        </div>
-        <div class="action-item">
-          <span class="label">文字样式</span>
-          <span
-            class="bold-switch"
-            :class="{ active: readerConfig.bold.value }"
-            @click="readerConfig.bold.value = !readerConfig.bold.value"
-          >B</span>
-        </div>
-      </div>
-    </div>
+    <NovelReader
+      :content="novel.content"
+      :filter="novelFilter"
+      @action:menu="(flag) => this.isMenuShow = flag"
+      @action:parsed="handleParsed"
+      ref="novelReader"
+      v-if="!loading"
+    ></NovelReader>
   </div>
 </template>
 
 <script>
 import Vue from "vue";
-import { debounce } from "lodash";
-import { Tag, Slider } from "vant";
-import { mapGetters, mapState } from "vuex";
+import { mapGetters } from "vuex";
+import { Tag } from "vant";
 import TopBar from "@/components/TopBar";
+import NovelReader from "./components/novel-reader";
 import NovelMeta from "./components/novel-meta.vue";
-import { setThemeColor } from "@/utils";
-import { LocalStorage } from "@/utils/storage";
 import api from "@/api";
-import gsap from "gsap";
-
-const _READER_SETTING_KEY = "__PIXIV_readerSetting";
-
-let readerSetting = LocalStorage.get(_READER_SETTING_KEY, {
-  fontSize: 15,
-  padding: 14,
-  lineHeight: 1.5,
-  theme: 0,
-  fontFamily: 0,
-  bold: false,
-});
 
 export default {
   name: "Chapter",
@@ -165,83 +50,12 @@ export default {
       },
       immediate: true,
     },
-    readerConfig: {
-      handler: debounce(function () {
-        for (let key in this.readerConfig) {
-          readerSetting[key] = this.readerConfig[key].value;
-        }
-
-        LocalStorage.set(_READER_SETTING_KEY, readerSetting);
-      }, 300),
-      deep: true,
-    },
-    viewerStyle: {
-      handler: debounce(function () {
-        setThemeColor(this.viewerStyle.backgroundColor);
-        this.calcPageNum();
-      }),
-      immediate: true,
-      deep: true,
-    },
   },
   data() {
     return {
       loading: false,
       novel: {},
-      parsedContent: "",
-      readerConfig: {
-        fontSize: {
-          type: "number",
-          value: 15,
-          range: [12, 30],
-        },
-        padding: {
-          type: "number",
-          value: 14,
-          range: [5, 50],
-        },
-        lineHeight: {
-          type: "number",
-          value: 1.5,
-          range: [0.8, 3],
-        },
-        theme: {
-          type: "number",
-          value: 0,
-          range: [0, 4],
-        },
-        fontFamily: {
-          type: "number",
-          value: 1,
-          range: [0, 3],
-        },
-        bold: {
-          type: "boolean",
-          value: false,
-        },
-      },
-      themeList: [
-        { color: "#1f1f1f", bg: "#ffffff" },
-        { color: "#1e1e1e", bg: "#f1f1f1" },
-        { color: "#b7b7b7", bg: "#1f1f1f" },
-        { color: "#1c1d1e", bg: "#e6f1fa" },
-        { color: "#1f1e1c", bg: "#fff8eb" },
-      ],
-      fontList: [
-        {
-          name: "Sans",
-          font: "Noto Sans SC",
-        },
-        {
-          name: "Serif",
-          font: "Noto Serif SC",
-        },
-      ],
-      isSettingShow: false,
-      isActionShow: false,
-      isTopShow: false,
-      page: 1,
-      total: 1,
+      isMenuShow: false,
     };
   },
   computed: {
@@ -255,36 +69,10 @@ export default {
         return false;
       }
     },
-    viewerStyle() {
-      return {
-        "--padding": `${this.readerConfig.padding.value}px`,
-        "--lineHeight": `${this.readerConfig.lineHeight.value}`,
-        "--fontSize": `${this.readerConfig.fontSize.value}px`,
-        "--color": this.themeList[this.readerConfig.theme.value].color,
-        "--bg": this.themeList[this.readerConfig.theme.value].bg,
-        paddingLeft: `var(--padding)`,
-        paddingRight: `var(--padding)`,
-        fontSize: `${this.readerConfig.fontSize.value}px`,
-        lineHeight: `${this.readerConfig.lineHeight.value}`,
-        fontFamily: this.fontList[this.readerConfig.fontFamily.value].font,
-        fontWeight: this.readerConfig.bold.value ? "bold" : "normal",
-        color: this.themeList[this.readerConfig.theme.value].color,
-        backgroundColor: this.themeList[this.readerConfig.theme.value].bg,
-      };
-    },
   },
   methods: {
-    initSetting() {
-      for (let key in readerSetting) {
-        if (key in this.readerConfig) {
-          this.readerConfig[key].value = readerSetting[key];
-        }
-      }
-    },
     init() {
       this.reset();
-      this.initSetting();
-      setThemeColor(this.viewerStyle.backgroundColor);
       document.documentElement.scrollTo({ top: 0, behavior: "smooth" });
       const id = +this.$route.params.id;
       this.getNovel(id);
@@ -292,7 +80,6 @@ export default {
     reset() {
       this.loading = false;
       this.novel = {};
-      this.parsedContent = "";
     },
     async getNovel(id) {
       this.loading = true;
@@ -301,8 +88,6 @@ export default {
       if (res.status === 0) {
         this.novel = res.data;
 
-        this.parseNovel(this.novel);
-
         let title = "";
         if (this.novel.x_restrict === 1) {
           title += "[R-18] ";
@@ -338,12 +123,8 @@ export default {
 
       this.loading = false;
     },
-    parseNovel(novel) {
-      let content = novel.content;
-
-      // content = "载".repeat(10000);
-
-      const parseMap = (tag, from, to) => {
+    novelFilter(content) {
+      const parser = (tag, from, to) => {
         console.log(tag, from, to);
         switch (tag) {
           case "chapter": {
@@ -363,309 +144,41 @@ export default {
         if (!line) return;
 
         // [[rb:至尊 > 皇帝]] -> <ruby>至尊<rt>皇帝</rt></ruby>
-        const regex_cmd = /\[\[(?<tag>.*?):(?<from>.*?)\s?>\s?(?<to>.*?)\]\]/;
+        const regex_cmd = /\[\[(?<tag>.*?):(?<from>.*?)\s?>\s?(?<to>.*?)\]\]/g;
 
         // [chapter:今生の别れ] -> <h2>今生の别れ</h2>
-        const regex_tag = /\[(?<tag>.*?):(?<content>.*?)\]/;
+        const regex_tag = /\[(?<tag>.*?):(?<content>.*?)\]/g;
 
         line = line
-          .replace(regex_cmd, (_, tag, from, to) => parseMap(tag, from, to))
-          .replace(regex_tag, (_, tag, from, to) => parseMap(tag, from, to));
+          .replace(regex_cmd, (_, tag, from, to) => parser(tag, from, to))
+          .replace(regex_tag, (_, tag, from, to) => parser(tag, from, to));
 
         return `<p>${line}</p>`;
       };
 
-      content = content.split("\n").map(parseLine).join("");
-
-      content = `<div class="novel-content__header"></div>
-        <div class="novel-content__content">${content}</div>
-        <div class="novel-content__footer">`;
-
-      this.parsedContent = content;
-
-      this.$nextTick(() => {
-        const metaEL = this.$refs.novelContentEl.querySelector(
-          ".novel-content__header"
-        );
-        NovelMeta.router = this.$router;
-        const metaComp = Vue.extend(NovelMeta);
-        new metaComp({ propsData: { novel } }).$mount(metaEL);
-
-        setTimeout(() => {
-          this.calcPageNum();
-        }, 0);
-      });
-    },
-    calcPageNum() {
-      const wrapEL = this.$refs.novelContentWrapper;
-      if (!wrapEL) return;
-
-      this.total = Math.ceil(wrapEL.scrollWidth / wrapEL.clientWidth);
-    },
-    changePage(index, animate = true) {
-      // 已经是首尾 仍然继续翻页时 提示已经到头了
-      if (index < 1 || index > this.total) {
-        this.$toast({
-          message: index < 1 ? "已经是第一页了" : "已经是最后一页了",
-          duration: 2000,
-        });
-
-        this.isActionShow = true;
-
-        index = Math.min(Math.max(index, 1), this.total);
-      }
-
-      // 从首尾往回翻页时 隐藏顶栏
-      if (
-        (this.page === this.total && index < this.total) ||
-        (this.page === 1 && index > 1)
-      ) {
-        this.isActionShow = false;
-      }
-
-      this.page = index;
-
-      const wrapEL = this.$refs.novelContentWrapper;
-      const contentEL = this.$refs.novelContentEl;
-      const pageWidth = wrapEL.clientWidth;
-
-      if (contentEL._gsapInstance) contentEL._gsapInstance.pause().kill();
-      contentEL._gsapInstance = gsap.to(contentEL, {
-        duration: animate ? 0.2 : 0,
-        ease: "power1.inOut",
-        // scrollLeft: pageWidth * (index - 1),
-        x: -pageWidth * (index - 1),
-      });
-
-      console.log(
-        "changePage",
-        [this.page, this.total],
-        // [wrapEL.scrollLeft, wrapEL.scrollWidth],
-        [contentEL._gsap.x, contentEL.clientWidth],
-        pageWidth
-      );
-    },
-    addPage(num, animate = true) {
-      this.changePage(this.page + num, animate);
+      return content.split("\n").map(parseLine).join("");
     },
     toTop() {
       this.$refs.chapterEl.scrollTo({ top: 0, behavior: "smooth" });
     },
-    handleClickViewer(e) {
-      // 检测点击位置区域
-      const { clientWidth, clientHeight } = this.$refs.chapterEl;
-      const { clientX, clientY } = e;
-
-      // 定义每个区域位置 使用左上角和右下角坐标确定
-      const areaAxis = {
-        // 顶部区域 宽0.8 高0.3
-        top: [
-          [0, 0],
-          [0.8, 0.3],
-        ],
-        // 中心区域 宽0.2 高0.2
-        center: [
-          [0.4, 0.4],
-          [0.6, 0.6],
-        ],
-        // 底部左侧较窄区域 宽0.3 高0.7
-        back: [
-          [0, 0.3],
-          [0.3, 1],
-        ],
-        // 剩余区域
-        next: [
-          [0, 0],
-          [1, 1],
-        ],
-      };
-
-      const area = Object.keys(areaAxis).find((key) => {
-        const [min, max] = areaAxis[key];
-        return (
-          clientX / clientWidth >= min[0] && // 区域左侧
-          clientX / clientWidth <= max[0] && // 区域右侧
-          clientY / clientHeight >= min[1] && // 区域顶部
-          clientY / clientHeight <= max[1] // 区域底部
-        );
-      });
-
-      console.log(
-        area,
-        [clientX, clientY], // 坐标点
-        [clientX / clientWidth, clientY / clientHeight], // 相对左上角位置
-        e
-      );
-
-      switch (area) {
-        case "top":
-        case "center":
-          this.handleActionDisplay();
-          break;
-        case "back":
-          this.isActionShow = false;
-          this.isSettingShow = false;
-          this.addPage(-1, false);
-          break;
-        case "next":
-          this.isActionShow = false;
-          this.isSettingShow = false;
-          this.addPage(1, false);
-          break;
-        default:
-          console.warn("click area detect error");
-          break;
-      }
-    },
-    handleTouchStart(e) {
-      this._moveDistance = 0;
-      this._startTime = Date.now();
-      this._isTouching = true;
-    },
-    handleTouchMove(e) {
-      if (!this._isTouching) return;
-      if (this._locking) return;
-
-      const { clientX } = e;
-      const contentEL = this.$refs.novelContentEl;
-
-      const currentX = gsap.getProperty(contentEL, "x");
-
-      const lastX = this._lastX || clientX;
-
-      let deltaX = lastX - clientX;
-      this._lastX = clientX;
-
-      if (
-        currentX > 0 ||
-        currentX < -contentEL.scrollWidth + contentEL.clientWidth
-      ) {
-        // 边界情况下 滑动幅度减小为0.3倍
-        deltaX *= 0.3;
-      } else {
-        // 滑动幅度较大时 乘以一个系数加速滑动
-        const deltaX_abs = Math.abs(deltaX);
-        if (deltaX_abs > 1.8) {
-          deltaX *= 1.5;
-        } else if (deltaX_abs > 1.3) {
-          deltaX *= 1.1;
-        }
-      }
-
-      // 记录滑动距离
-      this._moveDistance += deltaX;
-
-      // 对应移动元素
-      // wrapEL.scrollLeft += deltaX;
-      gsap.set(contentEL, { x: `-=${deltaX}` });
-    },
-    handleTouchEnd(e) {
-      this._isTouching = false;
-
-      // 锁定移动
-      const lockMove = (ms) => {
-        this._locking = true;
-        if (this._lockTimer) clearTimeout(this._lockTimer);
-        this._lockTimer = setTimeout(() => {
-          this._locking = false;
-        }, ms);
-      };
-
-      // 根据滑动距离判断翻页
-      const handleSwipe = (threshold = 0.35) => {
-        if (this._moveDistance < -clientWidth * threshold) {
-          this.addPage(-1);
-        } else if (this._moveDistance > clientWidth * threshold) {
-          this.addPage(1);
-        } else {
-          // 否则恢复到原来的位置
-          this.changePage(this.page);
-        }
-      };
-
-      // 处理点击操作
-      if (
-        Date.now() - this._startTime < 200 &&
-        Math.abs(this._moveDistance) < 10
-      ) {
-        lockMove(200); // 点击翻页时 锁定200ms 防止手滑变成滑动翻页
-        this.handleClickViewer(e);
-        return;
-      }
-
-      const { clientWidth } = this.$refs.novelContentWrapper;
-
-      if (Date.now() - this._startTime <= 200) {
-        // 快速滑动时 触发翻页距离缩短
-        handleSwipe(0.06);
-      } else {
-        // 慢慢滑动时 正常计算翻页所需距离
-        handleSwipe(0.35);
-      }
-
-      this._lastX = null;
-      this._moveDistance = 0;
-    },
-    scrollHandler() {
-      const { scrollTop, clientHeight, scrollHeight } = this.$refs.chapterEl;
-      if (scrollTop > 1200) {
-        this.isTopShow = true;
-      } else {
-        this.isTopShow = false;
-      }
-
-      if (scrollTop >= scrollHeight - clientHeight) {
-        this.isActionShow = true;
-      }
-    },
-    handleActionDisplay() {
-      if (this.isActionShow) {
-        if (this.isSettingShow) {
-          this.isSettingShow = false;
-        } else {
-          this.isActionShow = false;
-        }
-      } else {
-        this.isActionShow = true;
-      }
-    },
-  },
-  directives: {
-    prevent: {
-      inserted(el, binding) {
-        const evtList = binding.value || [];
-
-        console.log("prevent", evtList);
-
-        evtList.forEach((evt) => {
-          el.addEventListener(evt, (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-          });
-        });
-      },
+    handleParsed($contentEL) {
+      const metaEL = $contentEL.querySelector(".novel-content__header");
+      NovelMeta.router = this.$router;
+      const metaComp = Vue.extend(NovelMeta);
+      new metaComp({ propsData: { novel: this.novel } }).$mount(metaEL);
     },
   },
   mounted() {
     this.init();
   },
   components: {
-    [Slider.name]: Slider,
     [Tag.name]: Tag,
     TopBar,
+    NovelReader,
   },
 };
 </script>
 
-<style lang="stylus">
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;600&family=Noto+Serif+SC:wght@500;700&display=swap');
-
-:root {
-  --color-fg: #1f1f1f;
-  --color-bg: #ffffff;
-}
-</style>
-
 <style lang="stylus" scoped>
 .chapter {
   position: fixed;
@@ -676,16 +189,11 @@ export default {
   box-sizing: border-box;
   z-index: 10;
 
-  .page {
-    position: absolute;
-    right: 15px;
-    bottom: 6px;
-    bottom: calc(6px + env(safe-area-inset-bottom));
-    font-size: 24px;
-    font-family: sans-serif;
-    opacity: 0.65;
-    z-index: 10;
-    pointer-events: none;
+  &[data-censored] {
+    &::v-deep .novel-content__wrapper .novel-content__content {
+      filter: blur(8px) opacity(0.5);
+      user-select: none;
+    }
   }
 
   .loading {
@@ -747,226 +255,4 @@ export default {
     height: 50px;
   }
 }
-
-.novel-content__wrapper {
-  position: relative;
-  height: 100%;
-  transition: color 0.3s, background 0.3s;
-  user-select: text;
-  box-sizing: border-box;
-  overflow: hidden;
-  padding-bottom: 20px;
-  padding-bottom: calc(20px + env(safe-area-inset-bottom));
-
-  .novel-content {
-    columns: calc(100vw - 2 * var(--padding)) 1;
-    height: 100%;
-    padding: var(--padding) 0;
-    word-break: break-all;
-    column-gap: calc(var(--padding) * 2);
-    box-sizing: border-box;
-    text-align: justify;
-
-    &.censored {
-      filter: blur(16px) opacity(0.5);
-      user-select: none;
-    }
-
-    &::v-deep {
-      .novel-content__footer {
-        height: 1px;
-        width: 100%;
-        margin: auto;
-        margin-right: calc(var(--padding) * -1);
-      }
-
-      p {
-        margin: 1em 0;
-      }
-
-      h2 {
-        font-size: 1.5em;
-      }
-    }
-  }
-}
-
-.setting__wrapper {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  // height: 400px;
-  padding: 30px 40px;
-  padding-bottom: 10px;
-  box-sizing: border-box;
-  outline: 2px solid rgba(#000, 0.1);
-  border-radius: 30px 30px 0 0;
-  background: rgba(#fff, 0.9);
-  backdrop-filter: blur(4px);
-  filter: drop-shadow(0px -5px 14px rgba(#000, 0.1));
-  transform: translateY(calc(100% + 100px));
-  transition: transform 0.3s ease-in-out;
-  z-index: 50;
-
-  &.show {
-    transform: translateY(0);
-
-    .back-top {
-      top: -140px;
-    }
-  }
-
-  .row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 0 20px;
-  }
-
-  .action-item {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    margin: 26px 0;
-    white-space: nowrap;
-
-    &.slider {
-      span {
-        flex: none;
-        display: inline-block;
-        text-align: center;
-        width: 30px;
-      }
-
-      .big {
-        font-size: 1.3em;
-      }
-
-      .van-slider {
-        height: 5px;
-        margin: 0 2px;
-        // filter: drop-shadow(0 1px 1px rgba(#000, 0.25));
-        outline: 1px solid rgba(#000, 0.08);
-        z-index: 5;
-
-        .slide-button {
-          width: 34px;
-          height: 34px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          font-size: 12px;
-          line-height: 1;
-          color: #1f1f1f;
-          background-color: #fff;
-          border-radius: 100px;
-          filter: drop-shadow(2px 4px 4px rgba(#000, 0.1));
-        }
-      }
-    }
-
-    .label {
-      margin-right: 10px;
-
-      & ~ span {
-        margin-left: 10px;
-      }
-    }
-
-    .color {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 64px;
-      height: 64px;
-      font-size: 30px;
-      line-height: 1;
-      border: 2px solid #a6a6a6;
-      border-radius: 50%;
-      margin: 0 10px;
-      cursor: pointer;
-
-      &.active {
-        border-color: #ffcd59;
-      }
-    }
-
-    .font {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 42px;
-      padding: 0 14px;
-      margin: 0 10px;
-      font-size: 24px;
-      line-height: 1;
-      border: 2px solid #a6a6a6;
-      border-radius: 10px;
-      cursor: pointer;
-
-      &.active {
-        border-color: #ffcd59;
-      }
-    }
-
-    .bold-switch {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 50px;
-      height: 42px;
-      font-size: 24px;
-      line-height: 1;
-      border: 2px solid #a6a6a6;
-      border-radius: 10px;
-      cursor: pointer;
-
-      &.active {
-        font-weight: bold;
-        border-color: #ffcd59;
-      }
-    }
-  }
-}
-
-.back-top {
-  position: absolute;
-  right: 30px;
-  top: -250px;
-  cursor: pointer;
-  transform: translateX(100% + 50px);
-  transition: all 0.3s ease-in-out;
-
-  &.show {
-    transform: translateX(0);
-  }
-
-  .icon-top {
-    width: 100px;
-    height: 100px;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .setting__wrapper {
-    right: 0;
-    width: 600px;
-    margin: 0 auto;
-
-    .action-item {
-      font-size: 20px;
-    }
-  }
-
-  .novel-content__wrapper {
-    .novel-meta {
-      max-width: 1200px;
-    }
-
-    .novel-content {
-      max-width: 1200px;
-      margin: 0 auto;
-    }
-  }
-}
 </style>
\ No newline at end of file
diff --git a/src/views/Novel/components/novel-reader.vue b/src/views/Novel/components/novel-reader.vue
new file mode 100644
index 00000000..5456656a
--- /dev/null
+++ b/src/views/Novel/components/novel-reader.vue
@@ -0,0 +1,837 @@
+<template>
+  <div class="novel-reader" ref="readerEL">
+    <div
+      class="novel-content__wrapper"
+      :style="viewerStyle"
+      @pointerdown.prevent.stop="handleTouchStart"
+      @pointermove.stop.prevent="handleTouchMove"
+      @pointerup.prevent.stop="handleTouchEnd"
+      v-prevent="['touchmove', 'mousemove']"
+      ref="novelContentWrapper"
+    >
+      <div class="page-counter">{{ `${pageNum} / ${pageTotal}` }}</div>
+      <template>
+        <div class="novel-content" v-html="parsedContent" ref="novelContentEl"></div>
+      </template>
+    </div>
+    <div class="setting__wrapper" :class="{ show: isSettingShow }">
+      <transition name="fade">
+        <div
+          class="back-top"
+          :class="{ show: isTopShow && isMenuShow }"
+          @click="$emit('action:to-top')"
+        >
+          <Icon class="icon-top" name="top"></Icon>
+        </div>
+      </transition>
+      <div class="action-panel">
+        <div class="action-item slider">
+          <span>A-</span>
+          <van-slider
+            v-model="readerConfig.fontSize.value"
+            :min="readerConfig.fontSize.range[0]"
+            :max="readerConfig.fontSize.range[1]"
+            active-color="#ffcd59"
+          >
+            <template #button>
+              <div class="slide-button">{{ readerConfig.fontSize.value }}</div>
+            </template>
+          </van-slider>
+          <span class="big">A+</span>
+        </div>
+        <div class="row">
+          <div class="action-item slider">
+            <span>小</span>
+            <van-slider
+              v-model="readerConfig.padding.value"
+              :min="readerConfig.padding.range[0]"
+              :max="readerConfig.padding.range[1]"
+              active-color="#ffcd59"
+            >
+              <template #button>
+                <div class="slide-button">边距</div>
+              </template>
+            </van-slider>
+            <span>大</span>
+          </div>
+          <div class="action-item slider">
+            <span>紧</span>
+            <van-slider
+              v-model="readerConfig.lineHeight.value"
+              :min="readerConfig.lineHeight.range[0]"
+              :max="readerConfig.lineHeight.range[1]"
+              :step="0.1"
+              active-color="#ffcd59"
+            >
+              <template #button>
+                <div class="slide-button">行距</div>
+              </template>
+            </van-slider>
+            <span>松</span>
+          </div>
+        </div>
+        <div class="action-item">
+          <span class="label">选择颜色</span>
+          <span
+            class="color"
+            :class="{ active: readerConfig.theme.value === index }"
+            :style="{
+              color: item.color,
+              backgroundColor: item.bg,
+            }"
+            @click="readerConfig.theme.value = index"
+            v-for="(item, index) in themeList"
+            :key="index"
+          >字</span>
+        </div>
+        <div class="action-item">
+          <span class="label">选择字体</span>
+          <span
+            class="btn font"
+            :class="{ active: readerConfig.fontFamily.value === index }"
+            :style="{
+              fontFamily: item.font,
+            }"
+            @click="readerConfig.fontFamily.value = index"
+            v-for="(item, index) in fontList"
+            :key="index"
+          >{{ item.name }}</span>
+        </div>
+        <div class="action-item">
+          <span class="label">文字样式</span>
+          <span
+            class="btn bold-switch"
+            :class="{ active: readerConfig.bold.value }"
+            @click="readerConfig.bold.value = !readerConfig.bold.value"
+          >B</span>
+          <span
+            class="btn zh-trans"
+            @click="
+              () => {
+                readerConfig.zhTrans.value++;
+                if (readerConfig.zhTrans.value > 2) {
+                  readerConfig.zhTrans.value = 0;
+                }
+                parseNovel();
+              }
+            "
+          >
+            <em
+              :class="{ cur: readerConfig.zhTrans.value === index }"
+              v-for="(char, index) in '原简繁'"
+              :key="index"
+            >{{ char }}</em>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Slider } from "vant";
+import { debounce } from "lodash";
+import gsap from "gsap";
+import * as OpenCC from "opencc-js";
+import { LocalStorage } from "@/utils/storage";
+import { setThemeColor } from "@/utils";
+
+const _READER_SETTING_KEY = "__PIXIV_readerSetting";
+
+let readerSetting = LocalStorage.get(_READER_SETTING_KEY, {
+  fontSize: 15,
+  padding: 14,
+  lineHeight: 1.5,
+  theme: 0,
+  fontFamily: 0,
+  bold: false,
+  zhTrans: 0,
+});
+
+const converter = {
+  s2t: new OpenCC.Converter({
+    from: "cn",
+    to: "tw",
+  }),
+  t2s: new OpenCC.Converter({
+    from: "tw",
+    to: "cn",
+  }),
+};
+
+export default {
+  name: "novel-reader",
+  components: {
+    [Slider.name]: Slider,
+  },
+  props: {
+    content: {
+      type: String,
+      default: "",
+    },
+    filter: {
+      type: Function,
+      default: (content) =>
+        content
+          .split("\n")
+          .map((line) => `<p>${line}</p>`)
+          .join(""),
+    },
+  },
+  watch: {
+    readerConfig: {
+      handler: debounce(function () {
+        for (let key in this.readerConfig) {
+          readerSetting[key] = this.readerConfig[key].value;
+        }
+
+        LocalStorage.set(_READER_SETTING_KEY, readerSetting);
+      }, 300),
+      deep: true,
+    },
+    viewerStyle: {
+      handler: debounce(function () {
+        setThemeColor(this.viewerStyle.backgroundColor);
+        this.calcPageNum();
+      }),
+      immediate: true,
+      deep: true,
+    },
+    content: {
+      handler: debounce(function () {
+        this.reset();
+        this.parseNovel();
+      }, 300),
+      immediate: true,
+    },
+    isMenuShow: {
+      handler: function () {
+        this.$emit("action:menu", this.isMenuShow);
+      },
+    },
+  },
+  computed: {
+    viewerStyle() {
+      return {
+        "--padding": `${this.readerConfig.padding.value}px`,
+        "--lineHeight": `${this.readerConfig.lineHeight.value}`,
+        "--fontSize": `${this.readerConfig.fontSize.value}px`,
+        "--color": this.themeList[this.readerConfig.theme.value].color,
+        "--bg": this.themeList[this.readerConfig.theme.value].bg,
+        paddingLeft: `var(--padding)`,
+        paddingRight: `var(--padding)`,
+        fontSize: `${this.readerConfig.fontSize.value}px`,
+        lineHeight: `${this.readerConfig.lineHeight.value}`,
+        fontFamily: this.fontList[this.readerConfig.fontFamily.value].font,
+        fontWeight: this.readerConfig.bold.value ? "bold" : "normal",
+        color: this.themeList[this.readerConfig.theme.value].color,
+        backgroundColor: this.themeList[this.readerConfig.theme.value].bg,
+      };
+    },
+  },
+  data() {
+    return {
+      pageNum: 1,
+      pageTotal: 1,
+      parsedContent: "",
+      isMenuShow: false,
+      isSettingShow: false,
+      isTopShow: false,
+      readerConfig: {
+        fontSize: {
+          type: "number",
+          value: 15,
+          range: [12, 30],
+        },
+        padding: {
+          type: "number",
+          value: 14,
+          range: [5, 50],
+        },
+        lineHeight: {
+          type: "number",
+          value: 1.5,
+          range: [0.8, 3],
+        },
+        theme: {
+          type: "number",
+          value: 0,
+          range: [0, 4],
+        },
+        fontFamily: {
+          type: "number",
+          value: 1,
+          range: [0, 3],
+        },
+        bold: {
+          type: "boolean",
+          value: false,
+        },
+        zhTrans: {
+          type: "number",
+          value: 0,
+          range: [0, 2],
+        },
+      },
+      themeList: [
+        { color: "#1f1f1f", bg: "#ffffff" },
+        { color: "#1e1e1e", bg: "#f1f1f1" },
+        { color: "#b7b7b7", bg: "#1f1f1f" },
+        { color: "#1c1d1e", bg: "#e6f1fa" },
+        { color: "#1f1e1c", bg: "#fff8eb" },
+      ],
+      fontList: [
+        {
+          name: "Sans",
+          font: "Noto Sans SC",
+        },
+        {
+          name: "Serif",
+          font: "Noto Serif SC",
+        },
+      ],
+    };
+  },
+  created() {
+    this.initSetting();
+  },
+  methods: {
+    reset() {
+      this.pageNum = 1;
+      this.pageTotal = 1;
+      this.parsedContent = "";
+    },
+    initSetting() {
+      for (let key in readerSetting) {
+        if (key in this.readerConfig) {
+          this.readerConfig[key].value = readerSetting[key];
+        }
+      }
+      setThemeColor(this.viewerStyle.backgroundColor);
+    },
+    parseNovel() {
+      if (!this.content) return;
+
+      let content = this.content;
+      // content = "载".repeat(10000);
+
+      const _now = Date.now();
+      switch (this.readerConfig.zhTrans.value) {
+        case 1: {
+          content = converter.t2s(content);
+          console.log(`繁 -> 简 耗时: ${Date.now() - _now}ms`);
+          break;
+        }
+        case 2: {
+          content = converter.s2t(content);
+          console.log(`简 -> 繁 耗时: ${Date.now() - _now}ms`);
+          break;
+        }
+      }
+
+      // 调用传入的过滤器
+      content = this.filter(content);
+
+      content = `<div class="novel-content__header"></div>
+        <div class="novel-content__content">${content}</div>
+        <div class="novel-content__footer">`;
+
+      this.parsedContent = content;
+
+      this.$nextTick(() => {
+        this.$emit("action:parsed", this.$refs.novelContentEl);
+        this.calcPageNum();
+      });
+    },
+    calcPageNum() {
+      const wrapEL = this.$refs.novelContentWrapper;
+      if (!wrapEL) return;
+
+      this.pageTotal = Math.ceil(wrapEL.scrollWidth / wrapEL.clientWidth);
+    },
+    handleClickViewer(e) {
+      // 检测点击位置区域
+      const { clientWidth, clientHeight } = this.$refs.readerEL;
+      const { clientX, clientY } = e;
+
+      // 定义每个区域位置 使用左上角和右下角坐标确定
+      const areaAxis = {
+        // 顶部区域 宽0.8 高0.3
+        top: [
+          [0, 0],
+          [0.8, 0.3],
+        ],
+        // 中心区域 宽0.2 高0.2
+        center: [
+          [0.4, 0.4],
+          [0.6, 0.6],
+        ],
+        // 底部左侧较窄区域 宽0.3 高0.7
+        back: [
+          [0, 0.3],
+          [0.3, 1],
+        ],
+        // 剩余区域
+        next: [
+          [0, 0],
+          [1, 1],
+        ],
+      };
+
+      const area = Object.keys(areaAxis).find((key) => {
+        const [min, max] = areaAxis[key];
+        return (
+          clientX / clientWidth >= min[0] && // 区域左侧
+          clientX / clientWidth <= max[0] && // 区域右侧
+          clientY / clientHeight >= min[1] && // 区域顶部
+          clientY / clientHeight <= max[1] // 区域底部
+        );
+      });
+
+      console.log(
+        area,
+        [clientX, clientY], // 坐标点
+        [clientX / clientWidth, clientY / clientHeight], // 相对左上角位置
+        e
+      );
+
+      switch (area) {
+        case "top":
+        case "center":
+          this.handleActionDisplay();
+          break;
+        case "back":
+          this.isMenuShow = false;
+          this.isSettingShow = false;
+          this.addPage(-1, false);
+          break;
+        case "next":
+          this.isMenuShow = false;
+          this.isSettingShow = false;
+          this.addPage(1, false);
+          break;
+        default:
+          console.warn("click area detect error");
+          break;
+      }
+    },
+    handleTouchStart() {
+      this._lastX = null;
+      this._moveDistance = 0;
+      this._startTime = Date.now();
+      this._isTouching = true;
+    },
+    handleTouchMove(e) {
+      if (!this._isTouching) return;
+      if (this._locking) return;
+
+      const { clientX } = e;
+      const contentEL = this.$refs.novelContentEl;
+
+      const currentX = gsap.getProperty(contentEL, "x");
+
+      const lastX = this._lastX || clientX;
+
+      let deltaX = lastX - clientX;
+      this._lastX = clientX;
+
+      if (
+        currentX > 0 ||
+        currentX < -contentEL.scrollWidth + contentEL.clientWidth
+      ) {
+        // 边界情况下 滑动幅度减小为0.3倍
+        deltaX *= 0.3;
+      } else {
+        // 滑动幅度较大时 乘以一个系数加速滑动
+        const deltaX_abs = Math.abs(deltaX);
+        if (deltaX_abs > 1.8) {
+          deltaX *= 1.5;
+        } else if (deltaX_abs > 1.3) {
+          deltaX *= 1.1;
+        }
+      }
+
+      // 记录滑动距离
+      this._moveDistance += deltaX;
+
+      // 设置页面位移
+      gsap.set(contentEL, { x: `-=${deltaX}` });
+    },
+    handleTouchEnd(e) {
+      this._isTouching = false;
+
+      // 锁定移动
+      const lockMove = (ms) => {
+        this._locking = true;
+        if (this._lockTimer) clearTimeout(this._lockTimer);
+        this._lockTimer = setTimeout(() => {
+          this._locking = false;
+        }, ms);
+      };
+
+      // 根据滑动距离判断翻页
+      const { clientWidth } = this.$refs.novelContentWrapper;
+      const handleSwipe = (threshold = 0.35) => {
+        if (this._moveDistance < -clientWidth * threshold) {
+          this.addPage(-1);
+        } else if (this._moveDistance > clientWidth * threshold) {
+          this.addPage(1);
+        } else {
+          // 否则恢复到原来的位置
+          this.changePage(this.pageNum);
+        }
+      };
+
+      // 处理点击操作
+      if (
+        Date.now() - this._startTime < 200 &&
+        Math.abs(this._moveDistance) < 10
+      ) {
+        lockMove(200); // 点击翻页时 锁定200ms 防止手滑变成滑动翻页
+        this.handleClickViewer(e);
+        return;
+      }
+
+      if (Date.now() - this._startTime <= 200) {
+        // 快速滑动时 触发翻页距离缩短
+        handleSwipe(0.06);
+      } else {
+        // 慢慢滑动时 正常计算翻页所需距离
+        handleSwipe(0.35);
+      }
+    },
+    changePage(index, animate = true) {
+      // 已经是首尾 仍然继续翻页时 提示已经到头了
+      if (index < 1 || index > this.pageTotal) {
+        this.$toast({
+          message: index < 1 ? "已经是第一页了" : "已经是最后一页了",
+          duration: 2000,
+        });
+
+        this.isMenuShow = true;
+
+        index = Math.min(Math.max(index, 1), this.pageTotal);
+      }
+
+      // 从首尾往回翻页时 隐藏菜单
+      if (
+        (this.pageNum === this.pageTotal && index < this.pageTotal) ||
+        (this.pageNum === 1 && index > 1)
+      ) {
+        this.isMenuShow = false;
+      }
+
+      this.pageNum = index;
+
+      const wrapEL = this.$refs.novelContentWrapper;
+      const contentEL = this.$refs.novelContentEl;
+      const pageWidth = wrapEL.clientWidth;
+
+      if (contentEL._gsapInstance) contentEL._gsapInstance.pause().kill();
+      contentEL._gsapInstance = gsap.to(contentEL, {
+        duration: animate ? 0.2 : 0,
+        ease: "power1.inOut",
+        x: -pageWidth * (index - 1),
+        onComplete: () => {
+          console.log(
+            "changePage",
+            [this.pageNum, this.pageTotal],
+            [gsap.getProperty(contentEL, "x") * -1, contentEL.scrollWidth],
+            pageWidth
+          );
+          contentEL._gsapInstance = null;
+        },
+      });
+    },
+    addPage(num, animate = true) {
+      this.changePage(this.pageNum + num, animate);
+    },
+    scrollHandler() {
+      const { scrollTop, clientHeight, scrollHeight } = this.$refs.readerEL;
+      if (scrollTop > 1200) {
+        this.isTopShow = true;
+      } else {
+        this.isTopShow = false;
+      }
+
+      if (scrollTop >= scrollHeight - clientHeight) {
+        this.isMenuShow = true;
+      }
+    },
+    handleActionDisplay() {
+      if (this.isMenuShow) {
+        if (this.isSettingShow) {
+          this.isSettingShow = false;
+        } else {
+          this.isMenuShow = false;
+        }
+      } else {
+        this.isMenuShow = true;
+      }
+    },
+    showSetting() {
+      this.isSettingShow = !this.isSettingShow;
+    },
+  },
+  directives: {
+    prevent: {
+      inserted(el, binding) {
+        const evtList = binding.value || [];
+
+        console.log("prevent", evtList);
+
+        evtList.forEach((evt) => {
+          el.addEventListener(evt, (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          });
+        });
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less">
+@import (css)
+  url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;600&family=Noto+Serif+SC:wght@500;700&display=swap");
+</style>
+
+<style lang="less" scoped>
+.novel-reader {
+  height: 100%;
+
+  .page-counter {
+    position: absolute;
+    right: 15px;
+    bottom: 6px;
+    bottom: calc(6px + env(safe-area-inset-bottom));
+    font-size: 24px;
+    font-family: sans-serif;
+    opacity: 0.65;
+    z-index: 10;
+    pointer-events: none;
+  }
+}
+
+.novel-content__wrapper {
+  position: relative;
+  height: 100%;
+  transition: color 0.3s, background 0.3s;
+  user-select: text;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding-bottom: 20px;
+  padding-bottom: calc(20px + env(safe-area-inset-bottom));
+
+  .novel-content {
+    columns: calc(100vw - 2 * var(--padding)) 1;
+    height: 100%;
+    padding: var(--padding) 0;
+    word-break: break-all;
+    column-gap: calc(var(--padding) * 2);
+    box-sizing: border-box;
+    text-align: justify;
+
+    &::v-deep {
+      .novel-content__footer {
+        width: 100%;
+        margin: auto;
+      }
+
+      p {
+        margin: 0;
+        margin-bottom: 1em;
+      }
+
+      h2 {
+        font-size: 1.5em;
+      }
+    }
+  }
+}
+
+.setting__wrapper {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  // height: 400px;
+  padding: 30px 40px;
+  padding-bottom: 10px;
+  box-sizing: border-box;
+  outline: 2px solid rgba(#000, 0.1);
+  border-radius: 30px 30px 0 0;
+  background: rgba(#fff, 0.9);
+  backdrop-filter: blur(4px);
+  filter: drop-shadow(0px -5px 14px rgba(#000, 0.1));
+  transform: translateY(calc(100% + 100px));
+  transition: transform 0.3s ease-in-out;
+  z-index: 50;
+
+  &.show {
+    transform: translateY(0);
+
+    .back-top {
+      top: -140px;
+    }
+  }
+
+  .row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0 20px;
+  }
+
+  .action-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin: 26px 0;
+    white-space: nowrap;
+
+    &.slider {
+      span {
+        flex: none;
+        display: inline-block;
+        text-align: center;
+        width: 30px;
+      }
+
+      .big {
+        font-size: 1.3em;
+      }
+
+      .van-slider {
+        height: 5px;
+        margin: 0 2px;
+        // filter: drop-shadow(0 1px 1px rgba(#000, 0.25));
+        outline: 1px solid rgba(#000, 0.08);
+        z-index: 5;
+
+        .slide-button {
+          width: 34px;
+          height: 34px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 12px;
+          line-height: 1;
+          color: #1f1f1f;
+          background-color: #fff;
+          border-radius: 100px;
+          filter: drop-shadow(2px 4px 4px rgba(#000, 0.1));
+        }
+      }
+    }
+
+    .label {
+      margin-right: 10px;
+
+      & + span {
+        margin-left: 10px;
+      }
+    }
+
+    .color {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 64px;
+      height: 64px;
+      font-size: 30px;
+      line-height: 1;
+      border: 2px solid #a6a6a6;
+      border-radius: 50%;
+      margin: 0 10px;
+      cursor: pointer;
+
+      &.active {
+        border-color: #ffcd59;
+      }
+    }
+
+    .btn {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 42px;
+      padding: 0 14px;
+      margin: 0 10px;
+      font-size: 24px;
+      line-height: 1;
+      border: 2px solid #a6a6a6;
+      border-radius: 10px;
+      cursor: pointer;
+
+      &.active {
+        border-color: #ffcd59;
+      }
+    }
+
+    .bold-switch {
+      width: 50px;
+      padding: 0;
+
+      &.active {
+        font-weight: bold;
+      }
+    }
+
+    .zh-trans {
+      display: flex;
+      align-items: center;
+      line-height: 1;
+
+      em {
+        font-size: 20px;
+
+        &.cur {
+          font-size: 28px;
+        }
+      }
+    }
+  }
+}
+
+.back-top {
+  position: absolute;
+  right: 30px;
+  top: -250px;
+  cursor: pointer;
+  transform: translateX(100% + 50px);
+  transition: all 0.3s ease-in-out;
+
+  &.show {
+    transform: translateX(0);
+  }
+
+  .icon-top {
+    width: 100px;
+    height: 100px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .setting__wrapper {
+    right: 0;
+    width: 600px;
+    margin: 0 auto;
+
+    .action-item {
+      font-size: 20px;
+    }
+  }
+
+  .novel-content__wrapper {
+    .novel-meta {
+      max-width: 1200px;
+    }
+
+    .novel-content {
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+  }
+}
+</style>
diff --git a/yarn.lock b/yarn.lock
index 4e28a70f..c894dff8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1169,7 +1169,7 @@
   dependencies:
     "@types/node" "*"
 
-"@types/json-schema@^7.0.5":
+"@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8":
   version "7.0.15"
   resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
@@ -1789,7 +1789,7 @@ ajv-keywords@^3.1.0, ajv-keywords@^3.4.1, ajv-keywords@^3.5.2:
   resolved "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz"
   integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
-ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4:
+ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5:
   version "6.12.6"
   resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -3571,6 +3571,13 @@ cookie@0.5.0:
   resolved "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
+copy-anything@^2.0.1:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz#092454ea9584a7b7ad5573062b2a87f5900fc480"
+  integrity sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==
+  dependencies:
+    is-what "^3.14.1"
+
 copy-concurrently@^1.0.0:
   version "1.0.5"
   resolved "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz"
@@ -4344,7 +4351,7 @@ entities@^2.0.0:
   resolved "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
-errno@^0.1.3, errno@~0.1.7:
+errno@^0.1.1, errno@^0.1.3, errno@~0.1.7:
   version "0.1.8"
   resolved "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz"
   integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
@@ -5654,6 +5661,13 @@ iconv-lite@0.4.24, iconv-lite@^0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+iconv-lite@^0.6.3:
+  version "0.6.3"
+  resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
 icss-utils@^4.0.0, icss-utils@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/icss-utils/-/icss-utils-4.1.1.tgz"
@@ -5681,6 +5695,11 @@ ignore@^4.0.3, ignore@^4.0.6:
   resolved "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
+image-size@~0.5.0:
+  version "0.5.5"
+  resolved "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
+  integrity sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==
+
 immediate@~3.0.5:
   version "3.0.6"
   resolved "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz"
@@ -6199,6 +6218,11 @@ is-weakref@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+is-what@^3.14.1:
+  version "3.14.1"
+  resolved "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1"
+  integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
+
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz"
@@ -6409,6 +6433,11 @@ kind-of@^6.0.0, kind-of@^6.0.2:
   resolved "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
+klona@^2.0.4:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz#85bffbf819c03b2f53270412420a4555ef882e22"
+  integrity sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==
+
 launch-editor-middleware@^2.2.1:
   version "2.6.1"
   resolved "https://registry.npmjs.org/launch-editor-middleware/-/launch-editor-middleware-2.6.1.tgz"
@@ -6429,6 +6458,32 @@ lazy-cache@^1.0.3:
   resolved "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz"
   integrity sha512-RE2g0b5VGZsOCFOCgP7omTRYFqydmZkBwl5oNnQ1lDYC57uyO9KqNnNVxT7COSHTxrRCWVcAVOcbjk+tvh/rgQ==
 
+less-loader@^7.3.0:
+  version "7.3.0"
+  resolved "https://registry.npmjs.org/less-loader/-/less-loader-7.3.0.tgz#f9d6d36d18739d642067a05fb5bd70c8c61317e5"
+  integrity sha512-Mi8915g7NMaLlgi77mgTTQvK022xKRQBIVDSyfl3ErTuBhmZBQab0mjeJjNNqGbdR+qrfTleKXqbGI4uEFavxg==
+  dependencies:
+    klona "^2.0.4"
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
+less@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/less/-/less-4.2.0.tgz#cbefbfaa14a4cd388e2099b2b51f956e1465c450"
+  integrity sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==
+  dependencies:
+    copy-anything "^2.0.1"
+    parse-node-version "^1.0.1"
+    tslib "^2.3.0"
+  optionalDependencies:
+    errno "^0.1.1"
+    graceful-fs "^4.1.2"
+    image-size "~0.5.0"
+    make-dir "^2.1.0"
+    mime "^1.4.1"
+    needle "^3.1.0"
+    source-map "~0.6.0"
+
 levn@^0.3.0, levn@~0.3.0:
   version "0.3.0"
   resolved "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz"
@@ -6628,7 +6683,7 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
-make-dir@^2.0.0:
+make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz"
   integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
@@ -6806,7 +6861,7 @@ mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24,
   dependencies:
     mime-db "1.52.0"
 
-mime@1.6.0:
+mime@1.6.0, mime@^1.4.1:
   version "1.6.0"
   resolved "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
@@ -7002,6 +7057,14 @@ natural-compare@^1.4.0:
   resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+needle@^3.1.0:
+  version "3.3.1"
+  resolved "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz#63f75aec580c2e77e209f3f324e2cdf3d29bd049"
+  integrity sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==
+  dependencies:
+    iconv-lite "^0.6.3"
+    sax "^1.2.4"
+
 negotiator@0.6.3:
   version "0.6.3"
   resolved "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz"
@@ -7311,6 +7374,11 @@ open@^6.3.0:
   dependencies:
     is-wsl "^1.1.0"
 
+opencc-js@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/opencc-js/-/opencc-js-1.0.5.tgz#4754a9407590c5d581c9b4788acd43e8627dd464"
+  integrity sha512-LD+1SoNnZdlRwtYTjnQdFrSVCAaYpuDqL5CkmOaHOkKoKh7mFxUicLTRVNLU5C+Jmi1vXQ3QL4jWdgSaa4sKjg==
+
 opener@^1.5.1:
   version "1.5.2"
   resolved "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz"
@@ -7490,6 +7558,11 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
+parse-node-version@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
+  integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==
+
 parse5-htmlparser2-tree-adapter@^6.0.0:
   version "6.0.1"
   resolved "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz"
@@ -8646,7 +8719,7 @@ safe-regex@^1.1.0:
   dependencies:
     ret "~0.1.10"
 
-"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@^2.1.2, safer-buffer@~2.1.0:
+"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@^2.1.2, safer-buffer@~2.1.0:
   version "2.1.2"
   resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
@@ -8656,6 +8729,11 @@ sax@>=0.6.0, sax@~1.2.4:
   resolved "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
+sax@^1.2.4:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz#a5dbe77db3be05c9d1ee7785dbd3ea9de51593d0"
+  integrity sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz"
@@ -8674,6 +8752,15 @@ schema-utils@^2.0.0, schema-utils@^2.5.0, schema-utils@^2.6.5, schema-utils@^2.7
     ajv "^6.12.4"
     ajv-keywords "^3.5.2"
 
+schema-utils@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz#f50a88877c3c01652a15b622ae9e9795df7a60fe"
+  integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==
+  dependencies:
+    "@types/json-schema" "^7.0.8"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz"
@@ -9560,6 +9647,11 @@ tslib@^1.9.0:
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2.3.0:
+  version "2.6.2"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz"