udxcms 1.0.9 → 1.0.10

package/dist/components/cmsComponents/wiki/Wiki.vue

@@ -1,1143 +0,0 @@
-<template>
-  <div class="wiki-support">
-    <a id="wikiTop" name="wikiTop"></a>
-    <div class="bread-wrap">
-      <!-- <NavBread :list="bread" @breadClick="breadClick"></NavBread> -->
-      <PowxBread :list='bread' @breadClick="breadClick" :callOutSelf='true'></PowxBread>
-    </div>
-    <div class="h5-wrap">
-      <a-drawer
-        wrapClassName="wiki-popup"
-        width="300"
-        placement="left"
-        :zIndex="9999"
-        :visible="showPopup"
-        :headerStyle="{ padding: '0px' }"
-        :bodyStyle="{ padding: '8px' }"
-        @close="showClassify"
-      >
-        <template v-slot:title>
-          <Logo />
-        </template>
-
-        <div class="" style="margin-top: 8px">
-          <SiderBar
-            id="siderbarh5"
-            :list="list"
-            :initPath="initKeyPath"
-            @selectItem="selectItem"
-          />
-        </div>
-      </a-drawer>
-
-      <div class="h5-top-wrap">
-        <div class="list-img-wrap" @click="showClassify">
-          <img
-            class="list-icon-img"
-            src="../../../assets/img/wiki/icon_fi_list.png"
-            alt=""
-          />
-        </div>
-        <div class="h5-title-aside">
-          <div
-            :class="
-              showTitleList ? 'h5-title-header active' : 'h5-title-header'
-            "
-            @click="showTitleListHandle"
-          >
-            <p>On this page</p>
-
-            <img
-              v-if="showTitleList"
-              class="icon-img"
-              src="../../../assets/img/wiki/icon_down.png"
-              alt=""
-            />
-            <img
-              v-else
-              class="icon-img"
-              src="../../../assets/img/wiki/icon_up.png"
-              alt=""
-            />
-          </div>
-          <div v-show="showTitleList" class="title-list">
-            <TitleList
-              :moveId="moveId"
-              :list="titleList"
-              @toTitlePos="toTitlePos"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <section class="wiki-main">
-      <aside class="aside" :style="`top:${sideTop}px`">
-        <SiderBar
-          id="siderbar"
-          :list="list"
-          :initPath="initKeyPath"
-          @selectItem="selectItem"
-        />
-      </aside>
-      <section
-        class="wiki-container"
-        id="articleContainer"
-        ref="articleContainer"
-        v-if="articleContent"
-      >
-        <article class="article" ref="article">
-          <div
-            class="wiki-content markdown-typora"
-            ref="wiki-content"
-            v-html="articleContent"
-          ></div>
-          <section class="content-footer">
-            <div class="update" v-if="article.update_time">
-              Last updated on
-              <span class="bold">{{ article.update_time | dateyear }}</span>
-            </div>
-            <div class="nextpage-wrap">
-              <div
-                  v-if="nextPageList && nextPageList[0].show" class="nextpage-item-wrap">
-                <div
-                  class="prev nextpage-item"
-                  @click="nextPageHandle('prev')"
-                >
-                  <div class="nextpage-top">
-                    <img
-                      class="icon-arrow-img"
-                      src="../../../assets/img/wiki/icon_arrow_left.png"
-                      alt=""
-                    />
-                    <div class="nextpage-top-text">{{ provText }}</div>
-                  </div>
-                  <div class="next-title">{{ nextPageList[0].title }}</div>
-                </div>
-              </div>
-              <div v-else></div>
-              <div
-                  v-if="nextPageList && nextPageList[1].show" class="nextpage-item-wrap">
-                <div
-                  class="next nextpage-item"
-                  @click="nextPageHandle('next')"
-                >
-                  <div class="nextpage-top">
-                    <div class="nextpage-top-text">{{ nextText }}</div>
-
-                    <img
-                      class="icon-arrow-img"
-                      src="../../../assets/img/wiki/icon_arrow_right.png"
-                      alt=""
-                    />
-                  </div>
-                  <div class="next-title">{{ nextPageList[1].title }}</div>
-                </div>
-              </div>
-              <div v-else></div>
-            </div>
-          </section>
-        </article>
-        <aside class="title-aside">
-          <div class="title-wrap" :style="`top:${sideTop}px`">
-            <!-- <p class="title-list-header">{{ onThisPageText }}</p> -->
-            <div ref="titleList" class="title-list">
-              <TitleList
-                :moveId="moveId"
-                :list="titleList"
-                @toTitlePos="toTitlePos"
-              />
-            </div>
-          </div>
-        </aside>
-      </section>
-      <!-- loading -->
-      <div v-else class="loading-wrap">
-        <site-loading></site-loading>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script>
-import conf from "../../../config/index";
-import { loadImportScript } from "../../../utils/index";
-import dateyear from "../../../filter/dateyear";
-import marked from "./demo/marked";
-// import { marked } from 'marked'
-import SiderBar from "./SiderBar";
-import TitleList from "./TitleList";
-import Logo from "./Logo";
-import NavBread from "./NavBread";
-
-import Vue from "vue";
-import { Icon, Drawer, Menu } from "ant-design-vue";
-import { mapState } from "vuex";
-
-
-import hljs from "./lib/highlight/lib/index.js"; // 引入 highlight.js
-import "./lib/highlight/styles/vs2015.css"; // 引入高亮样式
-
-import katex from './lib/katex/katex.min.js'
-import './lib/katex/katex.min.css'
-
-Vue.use(Menu).use(Menu.SubMenu).use(Menu.Item);
-
-// 代码高亮
-marked.setOptions({
-  gfm: true,
-  breaks: true,
-  latexRender: katex.renderToString.bind(katex),
-  // langPrefix: 'hljs language-',
-  highlight: function(code) {
-    return hljs.highlightAuto(code).value;
-  },
-});
-
-
-// 测试 markdown
-// import testMD from './test.js'
-
-
-export default {
-  props: {
-    list: {
-      type: Array,
-      default: () => [],
-    },
-    // article: {
-    //   type: Object,
-    //   default: () => ({}),
-    // },
-    // initName: {
-    //   type: Array,
-    //   default: () => [],
-    // },
-    // nextPageList: {
-    //   type: Array,
-    //   default: () => [],
-    // },
-    // initPath: {
-    //   type: String,
-    //   default: "",
-    // },
-  },
-  components: {
-    SiderBar,
-    TitleList,
-    Logo,
-    NavBread,
-    "a-icon": Icon,
-    "a-drawer": Drawer,
-  },
-  filters: {
-    dateyear,
-  },
-  data() {
-    return {
-      moduleTitle: this.$t("wallet_wiki_navTitle_wiki"),
-      nextText: this.$t("wallet_wiki_nextpage_name"),
-      provText: this.$t("wallet_wiki_reviouspage_name"),
-      onThisPageText: this.$t("wallet_wiki_titlelist_title"),
-      initKeyPath: "",
-      articleContent: "",
-      titleList: [],
-      titleOrgList: [],
-      showPopup: false,
-      showTitleList: false,
-      scrollY: 0,
-      moveId: "",
-      updateTime: "",
-      keyPath: [],
-      article: {},
-      nextPageList: [{ show: false }, { show: false }],
-      treeList: [],
-      classifyName1: "",
-      bread: [
-        {
-          path: "/wiki",
-          name: this.$t("wallet_wiki_navTitle_wiki"),
-        },
-        {
-          path: "/wiki",
-          name: "",
-        },
-      ],
-      sideTop: 0,
-    };
-  },
-  computed: {
-    ...mapState({
-      lang: (state) => state.language,
-    }),
-  },
-  watch: {
-    list: {
-      handler(n, o) {
-        this.initTreeList();
-        this.initArticleData();
-      },
-      deep: true,
-    },
-    $route(val) {
-      console.log('$route val ', val )
-      try {
-        this.toTitlePos({
-          id: 'wikiTop'
-        });
-      } catch (error) {}
-    }
-  },
-  mounted() {
-    window.addEventListener("scroll", this.handleScroll, true);
-    // this.initDomList();
-    // this.initData();
-    this.initTreeList();
-    this.initArticleData();
-  },
-  methods: {
-    /**
-     * 初始化文章的翻页数据和左侧的menu菜单选中
-     */
-    async initArticleData() {
-      if (this.list.length === 0) {
-        return;
-      }
-
-      // this.keyPath 和 this.initKeyPath 基本一样 可以考虑只保留一个
-
-      // this.keyPath = this.treeList[0].path.split("/").reverse();
-
-      // this.initBread(this.keyPath[0]);
-
-      // if (this.list.length > 1) {
-      //   this.nextPageList = [
-      //     { show: false },
-      //     { ...this.treeList[0], show: true },
-      //   ];
-      // }
-
-      // await this.$nextTick();
-      // 如果有路由，切换到对应路由
-      const { categoryCode, name } = this.$route.params
-
-        let index = 0
-      if (
-        categoryCode && name
-      ) {
-        const path = `${categoryCode}/${name}`;
-        // console.log('path', path)
-        this.treeList.forEach((item, i) => {
-          if(item.path === path) {
-            this.initKeyPath = item.path;
-            index = i;
-          }
-        })
-        console.log('index', index)
-
-      }
-      if(this.initKeyPath === ''){
-        this.initKeyPath = this.treeList[0].path;
-      }
-      // 分页数据
-      if (index === 0) {
-        if (this.treeList.length > 1) {
-          this.nextPageList = [
-            { show: false },
-            { ...this.treeList[1], show: true },
-          ];
-        }
-      } else {
-        // 非最后一篇
-        if (index + 1 < this.treeList.length ) {
-          this.nextPageList = [
-            { ...this.treeList[index-1], show: true },
-            { ...this.treeList[index+1], show: true },
-          ];
-        } else {
-          this.nextPageList = [
-            { ...this.treeList[index-1], show: true },
-            { show: false },
-          ];
-        }
-      }
-
-      // 面包屑
-      this.keyPath = this.initKeyPath.split("/").reverse();
-      this.initBread(this.keyPath[0]);
-
-      // 加载文章详情
-      this.getArticle(this.initKeyPath);
-    },
-    /**
-     * 把分类tree拉平转成一维数组，方便做翻页的第一篇文章
-     */
-    initTreeList() {
-      let tree = [...this.list];
-      tree.forEach((o) => this.setName(o));
-      this.treeList = this.getLeef(tree);
-    },
-    /**
-     * 面包屑点击事件
-     */
-    breadClick({ index, item }) {
-      if (index == 0) {
-        // 点击 wiki 回到第一个分类
-        this.initArticleData();
-      }
-    },
-
-    /**
-     * 初始化数据
-     */
-    initData() {
-      const date = new Date(this.article.update_time);
-      const year = date.getFullYear();
-      const month = date.getMonth() + 1;
-      const day = date.getDate();
-      this.updateTime = `${month > 9 ? month : "0" + month}/${
-        day > 9 ? day : "0" + day
-      }/${year}`;
-    },
-    /**
-     * 初始化文章dom数据
-     */
-    async initDomList() {
-      if (!this.article.description) {
-        return false;
-      }
-
-      // 测试 markdown
-      // let mdtext = document.querySelector('#input')?.value
-      // let mdtext = testMD;
-      let mdtext = this.article.description.replace(/\<br\>/gi, "\n");
-
-      // this.articleContent = marked.parse(mdtext);
-      this.articleContent = marked.parse(mdtext).replace(/<pre>/g, "<pre class='hljs'>");
-
-      await this.$nextTick();
-
-      const wrap = document.querySelector(".wiki-content");
-      const list = wrap.children || [];
-      let nodes = this.filterHTag([...list]);
-      const HNODES = nodes.filter((v) => {
-        return (
-          v.innerText &&
-          v.innerText !== "\n" &&
-          v.innerText !== "\r" &&
-          v.innerText !== " " &&
-          v?.id !== "-"
-        );
-      });
-
-      let articleCon = this.$refs.article;
-      let articleContainerTop = this.$refs.articleContainer.offsetTop;
-
-      let titleList = HNODES.map((v) => {
-        // console.log('v:', v);
-        let text;
-        // 处理公式数据
-        if (v.querySelector('.katex-html')) {
-          text = v.querySelector('.katex-html').innerText;
-        } else {
-          text = v.innerText;
-        }
-        let ele = articleCon.querySelector(`#${v.id}`);
-        return {
-          id: v.id,
-          index: v.nodeName.substring(1),
-          nodeName: v.nodeName,
-          innerText: text,
-          top: ele.offsetTop - articleContainerTop,
-          children: [],
-        };
-      });
-
-      this.titleOrgList = [...titleList];
-
-      this.titleList = this.getDomChildren(titleList);
-    },
-    /**
-     * 过滤 h 标签
-     */
-    filterHTag(arr) {
-      let nodes = [];
-      for (let i = 0, len = arr.length; i < len; i++) {
-        if (
-          [ "h2", "h3", "h4", "h5"].includes(
-            arr[i].nodeName.toLocaleLowerCase()
-          )
-        ) {
-          nodes.push(arr[i]);
-        } else {
-          nodes.push(...this.filterHTag(arr[i].children));
-        }
-      }
-      return nodes;
-    },
-    /**
-     * title list按层次格式化成 tree
-     */
-    getDomChildren(data) {
-      let list = [];
-      for (let i = 0, len = data.length; i < len; i++) {
-        let obj = data[i];
-        let children = [];
-
-        for (let j = i + 1; j < data.length; j++) {
-          let item = data[j];
-
-          if (item.index > obj.index) {
-            children.push(item);
-            i++;
-          } else {
-            break;
-          }
-        }
-
-        if (children.length > 0) {
-          obj.children = this.getDomChildren(children);
-        }
-        list.push(obj);
-      }
-      return list;
-    },
-    /**
-     * 将dom字符串转成dom tree
-     */
-    parseDom(str) {
-      let _tdom = document.createElement("div");
-      _tdom.innerHTML = str;
-
-      return _tdom.childNodes;
-    },
-    /**
-     * 移动端弹出文章分类弹层
-     */
-    showClassify() {
-      this.showPopup = !this.showPopup;
-    },
-    /**
-     * 翻页事件
-     */
-    async nextPageHandle(page) {
-      // console.log('nextPageHandle page:', page);
-      let keyPath =
-        this.keyPath.length > 0
-          ? this.keyPath
-          : this.initKeyPath.split("/").reverse();
-
-      let index = this.treeList.findIndex((v) => v.name === keyPath[0]);
-
-
-      let classifyName = keyPath[1];
-      let contentName = keyPath[0];
-      let classifyPath = "";
-
-      if (page === "prev") {
-        this.nextPageList[1] = { ...this.treeList[index] };
-        this.nextPageList[1].show = true;
-
-        // 当前是index - 1
-        contentName = this.treeList[index - 1].name;
-        classifyPath = this.treeList[index - 1].path;
-
-        if (index - 1 <= 0) {
-          // 已经是第一个了
-          this.nextPageList[0].show = false;
-        } else {
-          this.nextPageList[0] = { ...this.treeList[index - 2] };
-          this.nextPageList[0].show = true;
-        }
-      } else if (page === "next") {
-        this.nextPageList[0] = { ...this.treeList[index] };
-        this.nextPageList[0].show = true;
-
-        // 当前是index + 1
-
-        contentName = this.treeList[index + 1].name;
-        classifyPath = this.treeList[index + 1].path;
-
-        if (index + 1 >= this.treeList.length - 1) {
-          // 已经是最后一个了
-
-          this.nextPageList[1].show = false;
-        } else {
-          this.nextPageList[1] = { ...this.treeList[index + 2] };
-          this.nextPageList[1].show = true;
-        }
-      }
-
-      this.nextPageList = [...this.nextPageList];
-
-      classifyName =
-        classifyPath.length > 0
-          ? classifyPath.split("/").reverse().slice(1)
-          : classifyName;
-
-      this.initKeyPath = classifyPath;
-      this.keyPath = classifyPath.split("/").reverse();
-
-      this.initBread(this.keyPath[0]);
-
-      this.$router.push('/wiki/'+ this.initKeyPath);
-      await this.$nextTick();
-      this.getArticle(classifyPath);
-    },
-    /**
-     * 选中文章分类
-     */
-    selectItem(payload) {
-      console.log(payload)
-      this.$router.push('/wiki/'+payload.path);
-      // return
-      this.keyPath = payload.keyPath;
-      this.showPopup = false;
-      // 翻页
-      let { keyPath } = payload;
-      let index = this.treeList.findIndex((v) => v.name === keyPath[0]);
-
-      this.initBread(keyPath[0]);
-
-      let classifyPath = "";
-
-      let contentName = this.treeList[index].name;
-      classifyPath = this.treeList[index].path;
-
-      this.getArticle(classifyPath);
-
-      if (this.treeList.length === 1) {
-        this.nextPageList[0].show = false;
-        this.nextPageList[1].show = false;
-      }
-
-      if (index <= 0) {
-        // 已经是第一个了
-        this.nextPageList[0].show = false;
-        this.nextPageList[1] = { ...this.treeList[index + 1] };
-        this.nextPageList[1].show = true;
-      } else if (index >= this.treeList.length - 1) {
-        // 已经是最后一个了
-        this.nextPageList[1].show = false;
-        this.nextPageList[0] = { ...this.treeList[index - 1] };
-        this.nextPageList[0].show = true;
-      } else {
-        this.nextPageList[0] = { ...this.treeList[index - 1] };
-        this.nextPageList[0].show = true;
-        this.nextPageList[1] = { ...this.treeList[index + 1] };
-        this.nextPageList[1].show = true;
-      }
-
-      this.nextPageList = [...this.nextPageList];
-    },
-    initBread(key) {
-      let index = this.treeList.findIndex((v) => v.name === key);
-      let classifyTitle = this.treeList[index].classifyTitle;
-      let classifyTitleArr = classifyTitle.split("/").reverse();
-
-      this.bread[this.bread.length - 1].name = classifyTitleArr[1];
-      this.bread = [...this.bread];
-    },
-    /**
-     * 给分类tree添加 name
-     */
-    setName(obj) {
-      obj.content.forEach((item) => {
-        const parentPath = obj.path || obj.name;
-        const parentTitle = obj.classifyTitle || obj.title;
-        item.path = `${parentPath}/${item.name}`;
-        item.classifyTitle = `${parentTitle}/${item.title}`;
-        item.content && this.setName(item);
-      });
-    },
-    /**
-     * 将分类tree转成一维数组
-     */
-    getLeef(arr) {
-      let list = [];
-      arr.forEach((item) => {
-        if (!item.content) {
-          list.push(item);
-        } else {
-          list.push(...this.getLeef(item.content));
-        }
-      });
-      return list;
-    },
-    /**
-     * 移动端展开title层级
-     */
-    showTitleListHandle() {
-      this.showTitleList = !this.showTitleList;
-    },
-    /**
-     * 滚动到文章指定位置
-     */
-    toTitlePos(item) {
-      if (item?.id !== '-') {
-        let PageId = document.querySelector("#" + item.id);
-        console.log('scroll PageId', PageId, PageId.offsetTop)
-        window.scrollTo({
-          top: PageId.offsetTop - 80,
-          // behavior: "smooth",
-        });
-      }
-    },
-    /**
-     * 滚动监听
-     */
-    handleScroll() {
-      this.scrollY = window.scrollY;
-      // 这里应该改成配置的
-      this.sideTop = this.scrollY > 500 ? 70 : 0;
-
-      if (this.scrollY && this.titleOrgList && this.titleOrgList.length > 0) {
-        this.titleOrgList.reduce((pre, cur, index, arr) => {
-          if (pre.top <= this.scrollY && this.scrollY < cur.top) {
-            this.moveId = pre.id;
-          } else if (this.scrollY >= cur) {
-            this.moveId = cur.id;
-          }
-          return cur;
-        });
-      }
-    },
-    /**
-     * 获取文章
-     * */
-    getArticle(path) {
-      const hostName = window.mainHostname;
-      const url = `${conf.sitePath}${hostName}/${this.lang}/wiki/${path}.js`;
-
-      this.articleContent = "";
-      loadImportScript(url, null, "message")
-        .then((res) => {
-          this.article = res;
-          this.initDomList();
-          this.initData();
-        })
-        .catch(() => false);
-    },
-  },
-  beforeDestroy() {
-    window.removeEventListener("scroll", this.handleScroll, false);
-  },
-};
-</script>
-
-<style lang='less' >
-@import "../../../assets/css/cms_detail.less";
-@import "./typora-lark.css";
-
-.theme-dark .wiki-support {
-    .wiki-container .content-footer .nextpage-wrap .nextpage-item-wrap{
-        border-color: rgba(34, 39, 52, 1);
-    }
-}
-
-.wiki-support {
-  max-width: 1400px;
-  margin: auto;
-  padding: 0 20px;
-  // padding: 0 10px;
-  .bread-wrap {
-    border-bottom: 1px solid var(--border-color-extend-two);
-    padding-left: 20px;
-  }
-
-  .h5-header {
-    margin-top: 72px;
-    width: 100%;
-    height: 72px;
-    padding: 16px;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    line-height: 72px;
-  }
-
-  .wiki-popup {
-    .logo-wrap {
-      height: 72px;
-      padding-top: 12px;
-      box-sizing: border-box;
-    }
-    .back-wrap {
-      height: 48px;
-      background: var(--popup-bg);
-      display: flex;
-      align-items: center;
-      padding: 0 20px;
-
-      .back-text {
-        margin-left: 8px;
-      }
-    }
-
-    .aside {
-      padding: 8px;
-    }
-  }
-
-  .h5-top-wrap {
-    display: flex;
-    margin: 16px;
-    .list-img-wrap {
-      height: 48px;
-      line-height: 48px;
-      // padding-left: 16px;
-      margin-right: 20px;
-      .list-icon-img {
-        width: 24px;
-      }
-    }
-  }
-
-  .h5-title-aside {
-    // margin: 16px;
-    flex: 1;
-
-    .icon-img {
-      width: 24px;
-    }
-    .h5-title-header {
-      padding: 12px;
-      height: 48px;
-      width: 100%;
-      background-color: var(--popup-bg);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      border-radius: 6px;
-      &.active {
-        border-radius: 6px 6px 0 0;
-        // box-shadow: 0px 1px 0px var(--border-color-extend-two);
-      }
-    }
-
-    .title-list {
-      height: auto;
-      background-color: var(--popup-bg);
-      border-radius: 0 0 6px 6px;
-      transition: height 2650ms ease-in-out 0s;
-      // margin-top: 1px;
-      padding-top: 0.1px;
-      padding-bottom: 10px;
-      border-top: 1px solid var(--border-color-extend-two);
-    }
-  }
-
-  .wiki-main {
-    display: flex;
-    max-width: 1336px;
-  }
-
-  .loading-wrap {
-    height: 100vh;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    flex: 1;
-  }
-
-  .aside {
-    flex-shrink: 0;
-    width: 300px;
-    padding: 8px;
-    // padding-left: 48px;
-    box-sizing: border-box;
-    // max-height: calc(100vh - 70px);
-    max-height: 100vh;
-    overflow-x: hidden;
-    display: none;
-    position: sticky;
-    top: 0;
-  }
-
-  .wiki-container {
-    ::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
-    }
-
-    ::-webkit-scrollbar-thumb {
-        border-radius: 8px;
-        // box-shadow: inset 0 0 2px rgba(0,0,0,.2)
-        background-color: #999;
-        margin: 5px;
-    }
-
-    ::-webkit-scrollbar, ::-webkit-scrollbar-track {
-        background-color: transparent;
-        padding: 4px;
-    }
-  }
-
-  .wiki-container {
-    flex: 1;
-    display: flex;
-    // padding: 0 20px 20px;
-    min-height: calc(100vh - 80px);
-    // overflow-x: hidden;
-    max-width: 100%;
-
-    .wiki-content{
-      width: calc(100vw - 40px);
-      overflow: hidden;
-    //   padding: 0 20px;
-      font-size: 16px;
-      line-height: 1.68;
-      div,
-      p {
-        font-size: 16px;
-        line-height: 26px;
-      }
-      pre.hljs{
-        padding: 0px;
-        // width: 100vw;
-        // width: 600px;
-        // width: calc(100vw - 40px);
-      }
-      pre.hljs code {
-        display: block;
-        overflow-x: auto;
-        // max-height: 500px;
-        padding:  10px;
-        background-color: #1E1E1E;
-      }
-
-      .table-wrapper{
-        max-width: 100%;
-        overflow: auto;
-      }
-    }
-
-    .article {
-      flex: 1;
-
-      .article-title {
-        margin-left: 20px;
-        margin-bottom: 30px;
-        font-weight: 700;
-        font-size: 36px;
-        line-height: 48px;
-        color: #292a2e;
-      }
-    }
-
-    .content-footer {
-      margin-top: 20px;
-      margin-right: 20px;
-      margin-left: 20px;
-      padding-bottom: 82px;
-      padding-top: 24px;
-      border-top: 1px solid var(--border-color-extend-two);
-
-      .update {
-        font-style: italic;
-        font-size: 16px;
-        line-height: 26px;
-        text-align: right;
-        color: var(--cms-content-color);
-
-        .bold {
-          font-weight: 700;
-        }
-      }
-
-      .nextpage-wrap {
-        margin-top: 20px;
-        display: flex;
-        align-items: stretch;
-        > div {
-          width: 50%;
-          flex: none;
-        }
-        .nextpage-item-wrap {
-          border: 1px solid var(--border-color-extend-two);
-          padding: 12px;
-          box-sizing: border-box;
-          border-radius: 6px;
-          flex: 1;
-          margin-right: 10px;
-          &:last-child {
-            margin-right: 0;
-          }
-        }
-
-        .nextpage-item {
-
-          .nextpage-top {
-            display: flex;
-            align-items: center;
-            .nextpage-top-text {
-              margin-left: 12px;
-              margin-right: 12px;
-              font-size: 14px;
-              line-height: 21px;
-              color: var(--cms-aside-color);
-            }
-
-            .icon-arrow-img {
-              width: 18px;
-            }
-          }
-          .next-title {
-            margin-top: 4px;
-            font-weight: 500;
-            font-size: 16px;
-            line-height: 24px;
-            color: var(--primary-color);
-          }
-        }
-
-        .next {
-          .nextpage-top {
-            justify-content: flex-end;
-          }
-          .next-title {
-            text-align: right;
-          }
-        }
-      }
-    }
-    .title-aside {
-      width: 275px;
-      padding-right: 8px;
-      box-sizing: border-box;
-      overflow-y: scroll;
-      // height: calc(100vh - 70px);
-      max-height: 100vh;
-      overflow-x: hidden;
-      display: none;
-      position: sticky;
-      top: 0;
-      margin-top: 20px;
-
-      .title-wrap {
-        border-left: 1px solid var(--border-color-extend-two);
-        position: sticky;
-        top: 0;
-      }
-
-      .title-list-header {
-        padding-left: 16px;
-        font-weight: 600;
-        font-size: 12px;
-        line-height: 38px;
-        color: #616161;
-      }
-
-      .title-list {
-        // margin-top: 20px;
-        // padding-left: 16px;
-        position: sticky;
-        top: 0;
-        color: var(--cms-aside-color);
-        font-size: 13px;
-        line-height: 20px;
-      }
-
-      .title-item {
-        padding: 6px 12px;
-      }
-    }
-  }
-}
-@media screen and (min-width: 768px) {
-  .wiki-support {
-    .h5-wrap {
-      display: none;
-    }
-
-    .aside {
-      display: block;
-    }
-
-    .wiki-container {
-      border-left: 1px solid var(--border-color-extend-two);
-      .title-aside {
-        display: none;
-      }
-
-      .wiki-content{
-        width: calc(100vw - 40px - 300px - 16px);
-        padding: 0 20px;
-        p:first-child img:first-child {
-            margin-top: 20px;
-        }
-        // pre.hljs{
-        //   width: calc(100vw - 40px - 300px - 40px - 16px);
-        // }
-      }
-
-      .content-footer {
-        .nextpage-wrap {
-          .nextpage-item-wrap {
-            margin-right: 20px;
-          }
-        }
-        .nextpage-item {
-          .nextpage-top {
-            .nextpage-top-text {
-              font-size: 20px;
-              line-height: 30px;
-            }
-          }
-          .next-title {
-            font-size: 20px;
-            line-height: 30px;
-          }
-        }
-      }
-    }
-  }
-}
-@media screen and (min-width: 1200px) {
-  .wiki-support {
-    padding: 0;
-    .h5-wrap {
-      display: none;
-    }
-
-    .aside {
-      display: block;
-    }
-
-    .wiki-container {
-      .title-aside {
-        display: block;
-      }
-      .wiki-content{
-        // max-width: 400px;
-        max-width: calc(1400px - 300px - 275px);
-        // width: calc(100vw - 100px - 300px - 275px - 40px - 16px);
-        // pre.hljs{
-        //   width: calc(100vw - 100px - 300px - 275px - 40px - 16px);
-        // }
-      }
-      .content-footer {
-        .nextpage-wrap {
-          .nextpage-item-wrap {
-            margin-right: 20px;
-          }
-        }
-        .nextpage-item {
-          .nextpage-top {
-            .nextpage-top-text {
-              font-size: 20px;
-              line-height: 30px;
-            }
-          }
-          .next-title {
-            font-size: 20px;
-            line-height: 30px;
-          }
-        }
-      }
-    }
-  }
-}
-</style>