From 72fc342d6a2c75814b74fc981a261b712dca60af Mon Sep 17 00:00:00 2001
From: lipeng <lipeng@wodcloud.com>
Date: Wed, 31 May 2023 16:25:46 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=90=8E=E5=A4=A9=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E8=81=94=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/main.js                                   |  11 +-
 src/page/main/support/document-type/index.vue |   7 +-
 src/page/main/support/document/add/index.vue  | 164 ++++++++
 src/page/main/support/document/edit/index.vue | 179 +++++++++
 src/page/main/support/document/helper.js      |  15 +
 src/page/main/support/document/index.vue      | 369 +++++++++++++++++-
 yarn.lock                                     |  37 ++
 8 files changed, 778 insertions(+), 5 deletions(-)
 create mode 100644 src/page/main/support/document/add/index.vue
 create mode 100644 src/page/main/support/document/edit/index.vue
 create mode 100644 src/page/main/support/document/helper.js

diff --git a/package.json b/package.json
index 1e7903b..a94d3ff 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "github-markdown-css": "^5.1.0",
     "html2canvas": "^1.4.1",
     "markdown-it": "^13.0.1",
+    "mavon-editor": "^3.0.0",
     "sass": "^1.35.1",
     "uuid": "^8.3.2",
     "vue": "^3.2.31",
diff --git a/src/main.js b/src/main.js
index d9a7ff2..087fedd 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,6 +2,9 @@ import { createApp } from "vue";
 
 import ElementPlus from "element-plus";
 import "element-plus/dist/index.css";
+
+import mavonEditor from "mavon-editor";
+import "mavon-editor/dist/css/index.css";
 import locale from "element-plus/lib/locale/lang/zh-cn";
 
 import * as ElementPlusIconsVue from "@element-plus/icons-vue";
@@ -101,7 +104,13 @@ Promise.all([getUser(), getMenu("dadb2d3f-e263-48d1-9389-42acb9ea49f8")])
     console.error(e);
   })
   .finally(() => {
-    createVue.use(ElementPlus, { locale }).use(store).use(router).use(i18n).use(bgui);
+    createVue
+      .use(ElementPlus, { locale })
+      .use(store)
+      .use(router)
+      .use(i18n)
+      .use(bgui)
+      .use(mavonEditor);
     createVue.mount("#app");
   });
 
diff --git a/src/page/main/support/document-type/index.vue b/src/page/main/support/document-type/index.vue
index 4300a7b..659e147 100644
--- a/src/page/main/support/document-type/index.vue
+++ b/src/page/main/support/document-type/index.vue
@@ -452,7 +452,12 @@ const deleteCurType = (row) => {
     content: "确定删除该文档类型吗？",
   };
 };
-const beforeSwitchStatus = (row) => {
+const beforeSwitchStatus = async (row) => {
+  const res = await axios.get(`/apaas/knowledge/v5/documentmgr/classify/quote/${row.id}`);
+  if (!res.data.data) {
+    ElMessage.warning("请将该文档类型下所挂载的文档删除或转移至其他文档类型下再停用！");
+    return false;
+  }
   const text = row.is_active ? "停用" : "启用";
   state.selectedRow = row;
   state.secondTipsDialogConfig = {
diff --git a/src/page/main/support/document/add/index.vue b/src/page/main/support/document/add/index.vue
new file mode 100644
index 0000000..c2ab0e1
--- /dev/null
+++ b/src/page/main/support/document/add/index.vue
@@ -0,0 +1,164 @@
+<!-- 角色管理 -->
+<template>
+  <div class="page_container">
+    <bg-breadcrumb></bg-breadcrumb>
+    <div class="main_container">
+      <div class="form_content apaas_scroll_nor">
+        <el-form label-width="80px" :model="formData" :rules="rules" ref="ruleForm">
+          <el-form-item label="文档类型">
+            <el-input disabled v-model="docTypeName"> </el-input>
+          </el-form-item>
+          <el-form-item label="文档名称" prop="title">
+            <el-input v-model="formData.title" placeholder="请输入"> </el-input>
+          </el-form-item>
+          <el-form-item class="editor" label="文档内容" prop="content">
+            <mavon-editor
+              class="mark-down-edit"
+              ref="editorRef"
+              v-model="formData.content"
+              :box-shadow="false"
+              :autofocus="false"
+              placeholder="请输入正文"
+              @img-add="(...arg) => $imgAdd(arg, editorRef)" />
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="operate_btns">
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary" @click="publish">发布</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, toRefs, computed, ref, onBeforeMount, nextTick } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import axios from "@/request/http.js";
+import { ElMessage } from "element-plus";
+import { $imgAdd } from "../helper";
+import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
+
+const route = useRoute();
+const router = useRouter();
+
+const ruleForm = ref(null);
+const editorRef = ref();
+const state = reactive({
+  //表单数据
+  formData: {
+    classify_id: route.query.classify_id,
+    title: "",
+    content: "",
+  },
+  //表单校验规则
+  rules: {
+    title: [
+      {
+        required: true,
+        message: "请输入",
+        trigger: "blur",
+      },
+    ],
+  },
+  docTypeNameArr: ["平台公开"],
+});
+const { formData, rules } = toRefs(state);
+
+const docTypeName = computed(() => {
+  return state.docTypeNameArr.join("/");
+});
+onBeforeMount(() => {
+  getTypeTree();
+});
+
+const getTypeTree = () => {
+  axios.get(`/apaas/knowledge/v5/documentmgr/classify/tree`).then((res) => {
+    if (res.data.code == 200) {
+      const result = res.data.data || [];
+      getDocTypeName(result[0].children, route.query.classify_id);
+    } else {
+      ElMessage.error(res.data.data);
+    }
+  });
+};
+const getDocTypeName = (data, classifyId) => {
+  const findItem = data.find((item) => item.classify_id === classifyId);
+  if (findItem) {
+    state.docTypeNameArr.push(findItem.classify_name);
+    return true;
+  }
+  data.find((item) => {
+    if (item.children && item.children.length) {
+      const res = getDocTypeName(item.children, classifyId);
+      if (res) {
+        state.docTypeNameArr.splice(state.docTypeNameArr.length - 2, 0, item.classify_name);
+      }
+      return res;
+    }
+  });
+};
+//取消
+const cancel = () => {
+  router.push("/support/document");
+};
+//发布
+const publish = () => {
+  ruleForm.value.validate((valid, fields) => {
+    let params = {
+      ...state.formData,
+    };
+    if (valid) {
+      axios.post(`/apaas/knowledge/v5/documentmgr/document/add`, params).then((res) => {
+        if (res.data.code == 200) {
+          ElMessage.success(res.data.msg);
+          router.push("/support/document");
+        } else {
+          ElMessage.error(res.data.data);
+        }
+      });
+    }
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.page_container {
+  .main_container {
+    position: relative;
+    margin: 0 0 16px;
+    width: 100%;
+    height: calc(100% - 62px);
+    padding: 24px 0 70px;
+    overflow: auto;
+    background-color: #fff;
+    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
+    border-radius: 6px;
+    .form_content {
+      overflow: auto;
+      width: 60%;
+      min-width: 972px;
+      height: 100%;
+      padding-left: 35px;
+    }
+    .mark-down-edit {
+      height: 525px;
+      border: solid 1px #dadee7;
+    }
+
+    .operate_btns {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 70px;
+      text-align: right;
+      line-height: 68px;
+      border-top: solid 1px #e6e9ef;
+      .el-button {
+        width: 92px;
+        margin-right: 16px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/page/main/support/document/edit/index.vue b/src/page/main/support/document/edit/index.vue
new file mode 100644
index 0000000..cf00c77
--- /dev/null
+++ b/src/page/main/support/document/edit/index.vue
@@ -0,0 +1,179 @@
+<!-- 角色管理 -->
+<template>
+  <div class="page_container">
+    <bg-breadcrumb></bg-breadcrumb>
+    <div class="main_container">
+      <div class="form_content apaas_scroll_nor">
+        <el-form label-width="80px" :model="formData" :rules="rules" ref="ruleForm">
+          <el-form-item label="文档类型">
+            <el-input disabled v-model="docTypeName"> </el-input>
+          </el-form-item>
+          <el-form-item label="文档名称" prop="title">
+            <el-input v-model="formData.title" disabled placeholder="请输入"> </el-input>
+          </el-form-item>
+          <el-form-item class="editor" label="文档内容" prop="content">
+            <mavon-editor
+              class="mark-down-edit"
+              ref="editorRef"
+              v-model="formData.content"
+              :box-shadow="false"
+              :autofocus="false"
+              placeholder="请输入正文"
+              @img-add="(...arg) => $imgAdd(arg, editorRef)" />
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="operate_btns">
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary" @click="publish">发布</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, toRefs, computed, ref, onBeforeMount, nextTick } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import axios from "@/request/http.js";
+import { ElMessage } from "element-plus";
+import { $imgAdd } from "../helper";
+import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
+
+const route = useRoute();
+const router = useRouter();
+
+const ruleForm = ref(null);
+const editorRef = ref();
+const state = reactive({
+  //表单数据
+  formData: {
+    classify_id: route.query.classify_id,
+    title: "",
+    content: "",
+  },
+  //表单校验规则
+  rules: {
+    title: [
+      {
+        required: true,
+        message: "请输入",
+        trigger: "blur",
+      },
+    ],
+  },
+  docTypeNameArr: ["平台公开"],
+});
+const { formData, rules } = toRefs(state);
+
+const docTypeName = computed(() => {
+  return state.docTypeNameArr.join("/");
+});
+onBeforeMount(() => {
+  getTypeTree();
+  getEditInfo();
+});
+
+const getTypeTree = () => {
+  axios.get(`/apaas/knowledge/v5/documentmgr/classify/tree`).then((res) => {
+    if (res.data.code == 200) {
+      const result = res.data.data || [];
+      getDocTypeName(result[0].children, route.query.classify_id);
+    } else {
+      ElMessage.error(res.data.data);
+    }
+  });
+};
+const getDocTypeName = (data, classifyId) => {
+  const findItem = data.find((item) => item.classify_id === classifyId);
+  if (findItem) {
+    state.docTypeNameArr.push(findItem.classify_name);
+    return true;
+  }
+  data.find((item) => {
+    if (item.children && item.children.length) {
+      const res = getDocTypeName(item.children, classifyId);
+      if (res) {
+        state.docTypeNameArr.splice(state.docTypeNameArr.length - 2, 0, item.classify_name);
+      }
+      return res;
+    }
+  });
+};
+
+const getEditInfo = () => {
+  axios.get(`/apaas/knowledge/v5/documentmgr/document/detail/${route.query.id}`).then((res) => {
+    if (res.data.code == 200) {
+      const result = res.data.data || {};
+      Object.keys(state.formData).forEach((key) => {
+        state.formData[key] = result[key];
+      });
+    } else {
+      ElMessage.error(res.data.data);
+    }
+  });
+};
+//取消
+const cancel = () => {
+  router.push("/support/document");
+};
+//发布
+const publish = () => {
+  ruleForm.value.validate((valid, fields) => {
+    let params = {
+      id: +route.query.id,
+      content: state.formData.content,
+    };
+    if (valid) {
+      axios.post(`/apaas/knowledge/v5/documentmgr/document/update`, params).then((res) => {
+        if (res.data.code == 200) {
+          ElMessage.success(res.data.msg);
+          router.push("/support/document");
+        } else {
+          ElMessage.error(res.data.data);
+        }
+      });
+    }
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.page_container {
+  .main_container {
+    position: relative;
+    margin: 0 0 16px;
+    width: 100%;
+    height: calc(100% - 62px);
+    padding: 24px 0 70px;
+    overflow: auto;
+    background-color: #fff;
+    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
+    border-radius: 6px;
+    .form_content {
+      overflow: auto;
+      width: 60%;
+      min-width: 972px;
+      height: 100%;
+      padding-left: 35px;
+    }
+    .mark-down-edit {
+      height: 525px;
+      border: solid 1px #dadee7;
+    }
+
+    .operate_btns {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 70px;
+      text-align: right;
+      line-height: 68px;
+      border-top: solid 1px #e6e9ef;
+      .el-button {
+        width: 92px;
+        margin-right: 16px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/page/main/support/document/helper.js b/src/page/main/support/document/helper.js
new file mode 100644
index 0000000..fe785fb
--- /dev/null
+++ b/src/page/main/support/document/helper.js
@@ -0,0 +1,15 @@
+import $axios from "@/request/http";
+
+export const $imgAdd = function (args, editorRef) {
+  const [pos, $file] = args;
+  const formdata = new FormData();
+  formdata.append("file", $file);
+  formdata.append("directory", "image");
+  $axios
+    .post("/apaas/common/image/upload", formdata, {
+      headers: { "Content-Type": "multipart/form-data" },
+    })
+    .then(({ data }) => {
+      editorRef.$img2Url(pos, data.data);
+    });
+};
diff --git a/src/page/main/support/document/index.vue b/src/page/main/support/document/index.vue
index ff6a285..008f048 100644
--- a/src/page/main/support/document/index.vue
+++ b/src/page/main/support/document/index.vue
@@ -1,5 +1,368 @@
 <template>
-  <div>文档管理</div>
+  <div class="page_container">
+    <bg-breadcrumb></bg-breadcrumb>
+    <div class="flex_row">
+      <div class="flex_left bgc_white">
+        <div class="tree_header">文档类型</div>
+        <div class="tree_content">
+          <div class="search">
+            <el-input v-model="filterTree" placeholder="请输入文档名称" :prefix-icon="Search" />
+          </div>
+          <div class="tree">
+            <el-tree
+              ref="treeRef"
+              :data="typeData"
+              :props="defaultProps"
+              @node-click="handleNodeClick"
+              node-key="classify_id"
+              :highlight-current="true"
+              :filter-node-method="filterNode"
+              :default-expand-all="true">
+              <template #default="{ node, data }">
+                <div class="custom_tree_node">
+                  <span class="label-text" :title="node.label">{{ node.label }} </span>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+        </div>
+      </div>
+      <div class="flex_right bgc_white">
+        <div class="main_container">
+          <bg-filter-group
+            @search="changeSearch"
+            v-model="filter.search"
+            placeholder="请输入文档类型名称">
+            <template v-if="showAdd" v-slot:left_action>
+              <div class="apaas_button">
+                <el-button type="primary" @click="addDoc">
+                  <bg-icon
+                    style="font-size: 12px; color: #fff; margin-right: 8px"
+                    icon="#bg-ic-add"></bg-icon>
+                  新增
+                </el-button>
+              </div>
+            </template>
+            <template v-slot:filter_group>
+              <div class="left-filter filter_list">
+                <div class="filter_item">
+                  <span class="filter_title">更新时间</span>
+                  <el-date-picker
+                    v-model="filter.time"
+                    type="daterange"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    value-format="YYYY-MM-DD"
+                    style="width: 300px; flex: 0 0 auto" />
+                </div>
+              </div>
+              <div class="right-action apaas_button">
+                <el-button type="primary" @click="filterAction"> 查询 </el-button>
+                <el-button type="default" @click="filterClear"> 重置 </el-button>
+              </div>
+            </template>
+          </bg-filter-group>
+          <div class="table_container apaas_scroll">
+            <bg-table
+              ref="dataTable"
+              :headers="headers"
+              :rows="tableRows"
+              :isIndex="true"
+              :stripe="true">
+              <template v-slot:action="{ row }">
+                <bg-table-btn @click="editCurDoc(row)"> 编辑 </bg-table-btn>
+                <bg-table-btn @click="deleteCurDoc(row)"> 删除 </bg-table-btn>
+              </template>
+            </bg-table>
+            <div class="pagination_box">
+              <bg-pagination
+                :page="filter.page"
+                :size="filter.limit"
+                :total="tableTotal"
+                @change-page="changePage"
+                @change-size="changeSize">
+              </bg-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-dialog v-model="deleteDialogVisible" title="删除" width="520px">
+      <div class="warning_info delete_tips">
+        <bg-icon
+          style="font-size: 12px; color: #a9b1c7; margin-right: 8px; vertical-align: baseline"
+          icon="#bg-ic-circle-tips"></bg-icon>
+        <span
+          >删除后，该文档将不再{{ selectedRow.classify_name }}里展示且<span style="color: red"
+            >删除后无法撤销</span
+          >,确定要删除吗？</span
+        >
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="handleCloseDeleteDialog">取消</el-button>
+          <el-button type="primary" @click="confirmDelete">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
 </template>
-<script setup></script>
-<style lang="scss" scoped></style>
+
+<script setup>
+import { Search } from "@element-plus/icons-vue";
+import { watch, nextTick, reactive, toRefs, ref, computed, onBeforeMount } from "vue";
+import { useRouter } from "vue-router";
+import axios from "@/request/http.js";
+import { ElMessage } from "element-plus";
+import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
+
+const dataTable = ref(null);
+const ruleForm = ref(null);
+const selectNodeObj = ref({});
+const filterTree = ref("");
+const treeRef = ref(null);
+const typeData = ref([]);
+const defaultProps = {
+  label: "classify_name",
+  children: "children",
+  value: "classify_id",
+};
+//校验上级类型
+const state = reactive({
+  filter: {
+    search: "",
+    time: [],
+    page: 1,
+    limit: 10,
+  },
+  headers: [
+    {
+      label: "文档名称",
+      prop: "title",
+      minWidth: 160,
+    },
+    {
+      label: "文档类型",
+      prop: "classify_name",
+      minWidth: 160,
+    },
+    {
+      label: "操作人",
+      prop: "updated_by",
+    },
+    {
+      label: "最后更新时间",
+      prop: "updated_time",
+    },
+    {
+      label: "操作",
+      prop: "action",
+      width: 220,
+      fixed: "right",
+    },
+  ],
+  tableRows: [],
+  tableTotal: 0,
+
+  //是否展示新增按钮，只有当选择没有子节点的叶子节点才展示
+  showAdd: false,
+  //删除确认弹框
+  deleteDialogVisible: false,
+  selectedRow: null,
+});
+
+const { filter, headers, tableRows, tableTotal, showAdd, deleteDialogVisible, selectedRow } =
+  toRefs(state);
+onBeforeMount(() => {
+  getTypeTree();
+});
+watch(filterTree, (val) => {
+  treeRef.value.filter(val);
+});
+
+const filterAction = () => {
+  changePage(1);
+};
+const filterClear = () => {
+  state.filter = {
+    search: "",
+    time: [],
+    page: 1,
+    limit: 10,
+  };
+  changePage(1);
+};
+
+const router = useRouter();
+const getTableRows = () => {
+  let params = {
+    ...state.filter,
+    start_at: state.filter.time ? state.filter.time[0] : undefined,
+    end_at: state.filter.time ? state.filter.time[1] : undefined,
+    classify_id: selectNodeObj.value.id ? selectNodeObj.value.id : undefined,
+  };
+  delete params.time;
+  axios
+    .get(`/apaas/knowledge/v5/documentmgr/document/list`, {
+      params,
+    })
+    .then((res) => {
+      if (res.data.code == 200) {
+        state.tableRows = res.data.data || [];
+        state.tableTotal = res.data.total;
+      } else {
+        ElMessage.error(res.data.data);
+      }
+    });
+};
+//新增文档
+const addDoc = () => {
+  router.push({
+    path: "/support/document/add",
+    query: {
+      classify_id: selectNodeObj.value.classify_id,
+    },
+  });
+};
+
+const handleNodeClick = (data) => {
+  selectNodeObj.value = data;
+  state.showAdd = !(data.children && data.children.length);
+  changePage(1);
+};
+
+const getTypeTree = () => {
+  axios.get(`/apaas/knowledge/v5/documentmgr/classify/tree`).then((res) => {
+    if (res.data.code == 200) {
+      const result = res.data.data || [];
+      typeData.value = result;
+      selectNodeObj.value = typeData.value.length > 0 ? typeData.value[0] : {};
+      nextTick(() => {
+        treeRef.value.setCurrentNode(selectNodeObj.value);
+      });
+      changePage(1);
+    } else {
+      ElMessage.error(res.data.data);
+    }
+  });
+};
+
+const filterNode = (value, data) => {
+  if (!value) return true;
+  return data.classify_name.includes(value);
+};
+
+const changeSize = (size) => {
+  state.filter.limit = size;
+  state.filter.page = 1;
+  changePage(1);
+};
+
+const changePage = (page) => {
+  state.filter.page = page;
+  getTableRows();
+};
+
+const changeSearch = (val) => {
+  state.filter.search = val;
+  changePage(1);
+}; // 表格关键字筛选
+
+const editCurDoc = async (row) => {
+  router.push({
+    path: "/support/document/edit",
+    query: {
+      id: row.id,
+      classify_id: row.classify_id,
+    },
+  });
+};
+const handleCloseDeleteDialog = () => {
+  state.deleteDialogVisible = false;
+};
+const deleteCurDoc = (row) => {
+  state.selectedRow = row;
+  state.deleteDialogVisible = true;
+};
+
+const confirmDelete = () => {
+  axios.delete(`/apaas/knowledge/v5/documentmgr/classify/${state.selectedRow.id}`).then((res) => {
+    if (res.data.code == 200) {
+      changePage(1);
+      ElMessage.success(res.data.msg);
+    } else {
+      ElMessage.error(res.data.data);
+    }
+    handleCloseDeleteDialog();
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.tree_header {
+  height: 40px;
+  line-height: 40px;
+  background-color: #f7f7f9;
+  border-radius: 6px 6px 0px 0px;
+  font-size: 16px;
+  letter-spacing: 0px;
+  color: #202531;
+  padding-left: 16px;
+}
+.tree_content {
+  overflow: hidden;
+  height: calc(100% - 45px);
+}
+.search {
+  padding: 16px;
+}
+.tree {
+  overflow: auto;
+  height: calc(100% - 65px);
+}
+.tree :deep() .el-tree-node > .el-tree-node__children {
+  overflow: unset;
+}
+.tree :deep().noFocus:focus > .el-tree-node__content {
+  background-color: #fff;
+}
+.custom_tree_node {
+  width: 100%;
+  font-size: 14px;
+  color: #202531;
+  padding-right: 16px;
+}
+.label-text:hover {
+  padding: 3px 0;
+  background-color: var(--el-tree-node-hover-bg-color);
+}
+.main_container {
+  height: 100%;
+}
+.table_container {
+  height: calc(100% - 30px);
+  overflow: auto;
+  padding: 0 16px;
+}
+.delete_tips {
+  display: flex;
+  align-items: baseline;
+  line-height: 20px;
+}
+.pagination_box {
+  position: sticky;
+  position: -webkit-sticky;
+  margin-top: 16px;
+  bottom: 25px;
+  background-color: #fff;
+  z-index: 1024;
+  height: 40px;
+  line-height: 40px;
+  padding-top: 5px;
+}
+.bg-pagination {
+  bottom: unset;
+  margin-top: 0px;
+}
+</style>
diff --git a/yarn.lock b/yarn.lock
index d7b392d..fe67ec5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -438,6 +438,11 @@ clipboard@^2.0.11:
     select "^1.1.2"
     tiny-emitter "^2.0.0"
 
+commander@^2.20.3:
+  version "2.20.3"
+  resolved "https://mirrors.cloud.tencent.com/npm/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
 compute-scroll-into-view@^1.0.20:
   version "1.0.20"
   resolved "https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz"
@@ -455,6 +460,11 @@ css-line-break@^2.1.0:
   dependencies:
     utrie "^1.0.2"
 
+cssfilter@0.0.10:
+  version "0.0.10"
+  resolved "https://mirrors.cloud.tencent.com/npm/cssfilter/-/cssfilter-0.0.10.tgz#c6d2672632a2e5c83e013e6864a42ce8defd20ae"
+  integrity sha1-xtJnJjKi5cg+AT5oZKQs6N79IK4=
+
 csstype@^2.6.8:
   version "2.6.20"
   resolved "https://registry.npmmirror.com/csstype/-/csstype-2.6.20.tgz"
@@ -744,6 +754,16 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+highlight.js-async-webpack@^1.0.4:
+  version "1.0.4"
+  resolved "https://mirrors.cloud.tencent.com/npm/highlight.js-async-webpack/-/highlight.js-async-webpack-1.0.4.tgz#c06b67bf99f049045d62b756e5855b0912ec616c"
+  integrity sha1-wGtnv5nwSQRdYrdW5YVbCRLsYWw=
+
+highlight.js@^9.11.0:
+  version "9.18.5"
+  resolved "https://mirrors.cloud.tencent.com/npm/highlight.js/-/highlight.js-9.18.5.tgz#d18a359867f378c138d6819edfc2a8acd5f29825"
+  integrity sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==
+
 html-void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmmirror.com/html-void-elements/-/html-void-elements-2.0.1.tgz"
@@ -895,6 +915,15 @@ markdown-it@^13.0.1:
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
+mavon-editor@^3.0.0:
+  version "3.0.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/mavon-editor/-/mavon-editor-3.0.0.tgz#232a34a8ceb2d9d1dfc7822103d09d1ffcf779ba"
+  integrity sha512-7TrZz4Z8+UUbQmVyQ688m50A9XBs2gZrOw8QaeWCvuo2stifyKukb0rPpmrBIMEeA1FCLPkR5dMf7BEMAc04uw==
+  dependencies:
+    highlight.js "^9.11.0"
+    highlight.js-async-webpack "^1.0.4"
+    xss "^1.0.6"
+
 mdurl@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/mdurl/-/mdurl-1.0.1.tgz"
@@ -1193,6 +1222,14 @@ wildcard@^1.1.0:
   resolved "https://registry.npmmirror.com/wildcard/-/wildcard-1.1.2.tgz"
   integrity sha512-DXukZJxpHA8LuotRwL0pP1+rS6CS7FF2qStDDE1C7DDg2rLud2PXRMuEDYIPhgEezwnlHNL4c+N6MfMTjCGTng==
 
+xss@^1.0.6:
+  version "1.0.14"
+  resolved "https://mirrors.cloud.tencent.com/npm/xss/-/xss-1.0.14.tgz#4f3efbde75ad0d82e9921cc3c95e6590dd336694"
+  integrity sha512-og7TEJhXvn1a7kzZGQ7ETjdQVS2UfZyTlsEdDOqvQF7GoxNfY+0YLCzBy1kPdsDDx4QuNAonQPddpsn6Xl/7sw==
+  dependencies:
+    commander "^2.20.3"
+    cssfilter "0.0.10"
+
 zrender@5.3.2:
   version "5.3.2"
   resolved "https://registry.npmmirror.com/zrender/-/zrender-5.3.2.tgz"
-- 
2.26.0