udxcms 1.0.10 → 1.0.12

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

@@ -0,0 +1,1143 @@
+<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>