@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/base/HelpDocSet.vue

@@ -0,0 +1,1217 @@
+<template>
+<div class="container" :class="{'new-window': $route.name==='help'}">
+  <div class="docset-header">
+    <div class="docset-title">
+      <i class="docset-back el-icon-arrow-left" v-if="mode==='edit'" @click="backPage"></i>
+      <span class="docset-name">
+        <span v-if="!editName">{{docSet.NAME}}</span>
+        <el-input v-else v-model="docSet.NAME" size="small" @change="setFormName"></el-input>
+        <template v-if="mode==='edit'">
+          <i v-if="!editName" class="el-icon-edit-outline" @click="editName=!editName"></i>
+          <i v-else class="el-icon-circle-check" @click="setFormName"></i>
+        </template>
+      </span>
+    </div>
+    <div class="docset-header__right">
+      <el-popover
+        v-if="mode!=='edit'"
+        width="540"
+        trigger="manual"
+        v-model:visible="showSearchResult"
+      >
+        <template v-slot:reference><el-input size="default" suffix-icon="el-icon-search" placeholder="搜索" v-model="searchText"></el-input></template>
+        <ul class="search-result__list">
+          <li class="search-result__item" v-for="item in searchResultList" :key="item.ID" @click="nodeClick({id: item.ID})">
+            <div class="search-result__title" v-html="highlightText(item.NAME)"></div>
+            <div class="search-result__content" v-html="highlightText(item.CONTENT)"></div>
+          </li>
+        </ul>
+      </el-popover>
+      <div class="docset-extra">
+        <span>关联产品：{{ docSet['PRODUCT#'] }}</span>
+        <span>{{ `版本号：V${docSet.VERSION}` }}</span>
+      </div>
+    </div>
+  </div>
+  <div class="docset-container">
+    <div class="catalogue">
+      <div class="catalogue-header">
+        <span class="catalogue-title">目录</span>
+        <i v-if="mode==='edit'" class="el-icon-circle-plus-outline" @click="addDoc(null)"></i>
+      </div>
+      <div class="catalog-content">
+        <el-input
+          class="catalog-search"
+          suffix-icon="el-icon-search"
+          placeholder="输入文档名称进行查询"
+          v-model="filterText"
+        >
+        </el-input>
+        <div class="catalog-tree">
+          <el-tree
+            ref="catalogueTree"
+            :data="catalogue"
+            :props="treeProps"
+            :filter-node-method="filterNode"
+            node-key="id"
+            :expand-on-click-node="true"
+            :auto-expand-parent="false"
+            :default-expanded-keys="expandKeys"
+            :draggable="true"
+            @node-drop="drop"
+            @node-expand="expandNode"
+            @node-collapse="collapseNode"
+            @node-click="nodeClick"
+          >
+            <template #default="{ node, data }">
+              <div class="catalog-item">
+                <span>{{ node.label }}</span>
+                <div class="catalogue-item__operates" v-if="mode==='edit'">
+                  <i class="el-icon-circle-plus-outline" @click="addDoc(data.id)"></i>
+                  <el-dropdown @command="command=>executeDocCommand(command, data)">
+                    <i class="el-icon-more"></i>
+                    <template v-slot:dropdown><el-dropdown-menu>
+                      <el-dropdown-item command="rename">重命名</el-dropdown-item>
+                      <el-dropdown-item command="remove">删除</el-dropdown-item>
+                    </el-dropdown-menu></template>
+                  </el-dropdown>
+                </div>
+              </div>
+            </template>
+          </el-tree>
+        </div>
+      </div>
+    </div>
+    <div class="doc" v-if="docInfo">
+      <div class="doc-header">
+        <template v-if="mode==='edit'">
+          <div class="docset-title">
+            <span class="docset-name">
+              <span v-if="!editDocName">{{docInfo.NAME}}</span>
+              <el-input v-else v-model="docInfo.NAME" size="small" @change="setDocName"></el-input>
+              <i v-if="!editDocName" class="el-icon-edit-outline" @click="editDocName=!editDocName"></i>
+              <i v-else class="el-icon-circle-check" @click="setDocName"></i>
+            </span>
+            <span class="doc-updatetime">修改时间: {{ docInfo.LOG_U_TIME }}</span>
+          </div>
+          <div>
+            <el-button type="primary" size="default" @click="copy({id: docInfo.ID})">复制链接</el-button>
+            <el-button type="primary" size="default" @click="preview">预览</el-button>
+          </div>
+        </template>
+        <el-breadcrumb v-else separator="›">
+          <el-breadcrumb-item v-for="item in docBreadcrumbList" :key="item.id" @click="viewDoc(item)" :to="{ path: `/help/${client}/${system}/${docSet.NUMBER}/${item.id}` }">{{ item.title }}</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div class="doc-content">
+        <div class="doc-catalogue" :class="{'doc-catalogue--fold': catalogueFold}">
+          <div class="doc-catalogue__header">
+            <span>目录</span>
+            <i class="el-icon-s-fold" @click="catalogueFold=!catalogueFold"></i>
+          </div>
+          <ul class="doc-catalogue__list">
+            <li class="doc-catalogue__item" :class="[`indent-level-${item.level}`, {'is-active':activeToc === item.id}]" v-for="(item, index) in tocList" :key="item.id + index" @click="scrollToElement(item)">
+              <span>{{ item.title }}</span>
+            </li>
+          </ul>
+        </div>
+        <div class="doc-editor" ref="editorContainer">
+          <template v-if="mode==='edit'" >
+            <textarea ref="editor" class="editor"></textarea>
+          </template>
+          <template v-else>
+            <div class="doc-title">{{ docInfo.NAME }}</div>
+            <div class="doc-detail-content" ref="docContainer">
+              <div class="doc-detail-html" ref="docContent" v-html="docInfo.CONTENT"></div>
+              <div class="doc-navigation">
+                <div class="doc-navigation__item doc-navigation__pre">
+                  <div class="doc-navigation__item-inner" v-if="prevDocName" @click="prevDoc">
+                    <i class="doc-navigation__icon el-icon-arrow-left"></i>
+                    <div class="doc-navigation__content">
+                      <div class="doc-navigation__title">上一页</div>
+                      <div class="doc-navigation__name">{{ prevDocName }}</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="doc-navigation__item doc-navigation__next" >
+                  <div class="doc-navigation__item-inner" v-if="nextDocName" @click="nextDoc">
+                    <div class="doc-navigation__content">
+                      <div class="doc-navigation__title">下一页</div>
+                      <div class="doc-navigation__name">{{ nextDocName }}</div>
+                    </div>
+                    <i class="doc-navigation__icon el-icon-arrow-right"></i>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import component from '@epxing/core/src/mixins/component'
+export default {
+  name: 'epx-help-docset',
+  mixins: [component],
+  data () {
+    return {
+      mode: 'readonly',
+      searchText: '',
+      editName: false,
+      docSet: {},
+      catalogue: [],
+      treeProps: {
+        children: 'children',
+        label: 'text'
+      },
+      expandKeys: [],
+      docInfo: null,
+      editDocName: false,
+      tocList: [],
+      catalogueFold: false,
+      activeToc: null,
+      docSetMetaCode: 'DOC_SET',
+      docMetaCode: 'DOC',
+      filterText: '',
+      searchResultList: [],
+      docList: [],
+      currentDocIndex: -1,
+      client: '',
+      system: ''
+    }
+  },
+  computed: {
+    ...mapState({
+      showMenu: state => state.config.showMenu,
+      showAppNav: state => state.config.showAppNav
+    }),
+    docBreadcrumbList () {
+      if (this.docInfo.ID) {
+        const getParentTree = (id, tree) => {
+          for (let i = 0; i < tree.length; i++) {
+            const item = tree[i]
+            if (id === item.id) {
+              return [item]
+            } else if (item.children && item.children.length > 0) {
+              const children = getParentTree(id, item.children ? item.children : [])
+              if (children && children.length > 0) return [item, ...children]
+            }
+          }
+        }
+        return getParentTree(this.docInfo.ID, this.catalogue)
+      }
+      return []
+    },
+    highlightText () {
+      return text => {
+        const regex = new RegExp(`(${this.searchText})`, 'gi')
+        return text?.replace(regex, '<mark>$1</mark>')
+      }
+    },
+    prevDocName () {
+      let preIndex = this.currentDocIndex - 1
+      while (preIndex >= 0) {
+        const pre = this.docList[preIndex]
+        if (!pre.empty || pre.leaf) {
+          return pre.title
+        }
+        preIndex--
+      }
+      return null
+    },
+    nextDocName () {
+      let nextIndex = this.currentDocIndex + 1
+      while (nextIndex <= this.docList.length - 1) {
+        const next = this.docList[nextIndex]
+        if (!next.empty || next.leaf) {
+          return next.title
+        }
+        nextIndex++
+      }
+      return null
+    }
+  },
+  watch: {
+    filterText (val) {
+      this.$refs.catalogueTree.filter(val)
+    },
+    searchText (v) {
+      if (v) {
+        this.delaySearchDoc()
+      } else {
+        this.showSearchResult = false
+      }
+    }
+  },
+  methods: {
+    searchDoc () {
+      this.$http.$post({
+        action: 'searchDoc',
+        entityId: this.docMetaCode,
+        setId: this.docSet.ID,
+        searchText: this.searchText
+      })
+        .then(data => {
+          this.searchResultList = data.entitys
+          if (data.entitys.length === 0) {
+            this.showSearchResult = false
+          } else {
+            this.showSearchResult = true
+          }
+        })
+    },
+    filterNode (value, data) {
+      if (!value) return true
+      return (data.text || data.title).indexOf(value) !== -1
+    },
+    getDocSet () {
+      this.$http.find({
+        entityId: this.docSetMetaCode,
+        'scope.SYSTEM': this.SYSTEM,
+        'scope.NUMBER': this.$query.code || this.$query.docset
+      })
+        .then(data => {
+          this.docSet = data.data
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    getCatalogue () {
+      this.$http.$post({
+        action: 'getTree',
+        entityId: this.docMetaCode,
+        'scope.SYSTEM': this.SYSTEM,
+        'scope.DOCSET|NUMBER': this.$query.code || this.$query.docset
+      })
+        .then(data => {
+          this.catalogue = data
+          this.docList = this.flattenTree(data) // 将树形结构展平为列表
+          if (this.$query.docId) {
+            this.viewDoc({ id: this.$query.docId })
+              .then(() => {
+                this.expandKeys = [...new Set([...this.expandKeys, ...this.docBreadcrumbList.map(item => item.id)])]
+              })
+            this.$nextTick(() => {
+              this.$refs.catalogueTree.setCurrentKey(this.$query.docId)
+            })
+          } else if (!this.docInfo && this.catalogue.length > 0) {
+            this.viewDoc(this.catalogue[0])
+            this.$nextTick(() => {
+              this.$refs.catalogueTree.setCurrentKey(this.catalogue[0])
+            })
+          }
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    flattenTree (tree) {
+      let result = []
+      tree.forEach(node => {
+        result.push(node)
+        if (node.children && node.children.length > 0) {
+          result = result.concat(this.flattenTree(node.children))
+        }
+      })
+      return result
+    },
+    setFormName () {
+      this.$http.update({
+        entityId: this.docSetMetaCode,
+        bean: {
+          ID: this.docSet.ID,
+          NAME: this.docSet.NAME
+        }
+      })
+        .then(data => {
+          this.docSet = data.data
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    expandNode (node) {
+      this.expandKeys = [...new Set([...this.expandKeys, node.id])]
+    },
+    collapseNode (node) {
+      const index = this.expandKeys.findIndex(item => item === node.id)
+      if (index !== -1) {
+        this.expandKeys.splice(index, 1)
+      }
+    },
+    addDoc (parentId) {
+      this.$http.save({
+        entityId: this.docMetaCode,
+        bean: {
+          CLIENT: this.CLIENT,
+          SYSTEM: this.SYSTEM,
+          DOC_SET: this.docSet.ID,
+          NAME: '未命名文档',
+          UP: parentId
+        }
+      })
+        .then(data => {
+          this.getCatalogue()
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    getTreeModuleNode (modules, parentId) {
+      let node = null
+      for (let i = 0; i < modules.length; i++) {
+        const module = modules[i]
+        if ((module.id || module.ID) === parentId) {
+          node = module
+          return node
+        } else if (module.children && module.children.length > 0) {
+          node = this.getTreeModuleNode(module.children, parentId)
+        }
+        if (node) {
+          return node
+        }
+      }
+    },
+    drop (node, current, type, event) {
+      if (this.mode !== 'edit') return
+      // 获取当前节点结束后的父节点
+      let parentId = ''
+      let modules = []
+      if (type === 'after' || type === 'before') {
+        parentId = current.data.parent || 'root'
+      } else if (type === 'inner') {
+        parentId = current.data.id || current.data.ID
+      }
+
+      if (parentId === 'root') {
+        modules = [...this.catalogue]
+      } else {
+        const parentNode = this.getTreeModuleNode(this.catalogue, parentId) || { children: [...this.catalogue] }
+        modules = [...parentNode.children]
+      }
+
+      // 获取其父节点的所有子节点
+      const str = modules.reduce((str, item, index) => (str += (item.id || item.ID) + ':' + index + ','), '')
+      // 递归获取id为parentId的节点
+      this.$http.$request({
+        action: 'moveTree',
+        entityId: this.docMetaCode,
+        id: node.data.id || node.data.ID,
+        selfAttriName: 'ID',
+        newParentId: parentId,
+        orderString: str,
+        orderAtrriName: 'ORDER_NUM'
+      })
+        .then(data => {
+          this.getCatalogue()
+        })
+    },
+    executeDocCommand (command, data) {
+      this[command](data)
+    },
+    rename (data) {
+      this.$prompt('请输入文档名称', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputPattern: /.+/,
+        inputValue: data.text,
+        inputErrorMessage: '请输入文档名称'
+      }).then(({ value }) => {
+        this.$http.update({
+          entityId: this.docMetaCode,
+          bean: {
+            NAME: value,
+            ID: data.id
+          }
+        })
+          .then(() => {
+            this.getCatalogue()
+            if (data.id === this.docInfo.ID) {
+              this.getDocInfo(data.id)
+            }
+          })
+          .catch(err => {
+            this.$message.error(err.message)
+          })
+      })
+    },
+    remove (data) {
+      const flattenDeep = (arr) => arr.reduce((acc, item) => [...acc, item.id, ...flattenDeep(item.children || [])], [])
+      const ids = flattenDeep([data])
+      this.$confirm('该操作会删除此文档和它包含的所有子文档，' + this.$t('Confirm the deletion') + '?')
+        .then(() => {
+          this.$http.$request({
+            action: 'removeMulti',
+            entityId: this.docMetaCode,
+            ids: ids.join(',')
+          })
+            .then(data => {
+              this.$message.success(this.$t('deleted successfully'))
+              this.getCatalogue()
+            })
+        })
+    },
+    copy (data) {
+      const { client, system } = this.$route.params
+
+      this.$util.copyToClipboard(`${window.location.origin}${window.location.pathname}#/help/${client}/${system}/${this.docSet.NUMBER}/${data.id}`, () => {
+        this.$message.success('复制成功')
+      })
+    },
+    getDocInfo (id) {
+      return this.$http.get({
+        entityId: this.docMetaCode,
+        id: id
+      })
+        .then(data => {
+          this.docInfo = data.data
+          return data.data
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    nodeClick (data) {
+      if (this.mode !== 'edit') {
+        if (data.empty && !data.leaf) {
+          const { docId } = this.$route.params
+          this.$refs.catalogueTree.setCurrentKey(docId)
+          return
+        }
+        this.$refs.catalogueTree.setCurrentKey(data.id)
+        const { client, system } = this.$route.params
+        this.$router.push(`/help/${client}/${system}/${this.docSet.NUMBER}/${data.id}`)
+        this.saveDocContentDebounce?.cancel()
+      } else {
+        // 编辑模式下也需要更新左侧树的选中状态
+        this.$nextTick(() => {
+          this.$refs.catalogueTree.setCurrentKey(data.id)
+        })
+      }
+      this.viewDoc(data)
+        .then(() => {
+          this.expandKeys = [...new Set([...this.expandKeys, ...this.docBreadcrumbList.map(item => item.id)])]
+        })
+    },
+    viewDoc (data) {
+      this.docInfo = null
+      this.activeToc = null
+      this.showSearchResult = false
+      this.currentDocIndex = this.docList.findIndex(doc => doc.id === data.id)
+      return this.getDocInfo(data.id)
+        .then(data => {
+          if (this.mode === 'edit') {
+            this.$nextTick(() => {
+              this.createEditor()
+            })
+          } else {
+            // 预览模式：等待 DOM 更新后再处理
+            this.$nextTick(() => {
+              this.$nextTick(() => {
+                this.convertDocLinksToRealUrls()
+                this.getDocCatalogue()
+                this.addEventScrollListener()
+                this.bindDocLinkClick()
+              })
+            })
+          }
+        })
+    },
+    prevDoc () {
+      if (this.currentDocIndex > 0) {
+        this.currentDocIndex--
+        this.nodeClick(this.docList[this.currentDocIndex])
+      }
+    },
+    nextDoc () {
+      if (this.currentDocIndex < this.docList.length - 1) {
+        this.currentDocIndex++
+        this.nodeClick(this.docList[this.currentDocIndex])
+      }
+    },
+    imageUploadHandler (blobInfo, succFun) {
+      var file = blobInfo.blob()
+      return this.$http.save({
+        action: 'upload',
+        file: file
+      }, {
+        requestType: 'formData'
+
+      })
+        .then(data => {
+          if (data && data.bean) {
+            return this.$util.getFileUrl(data.bean, '', false)
+          }
+        })
+    },
+    async createEditor () {
+      if (!window.tinymce) await this.$util.usePlugin('tinymce')
+
+      // 加载文档链接插件
+      try {
+        await this.loadDocLinkPlugin()
+      } catch (error) {
+        console.error('文档链接插件加载失败:', error)
+      }
+
+      const editorNode = this.$refs.editor
+      const fontSizeList = []
+      for (let i = 8; i <= 48; i++) {
+        fontSizeList.push(i + 'px')
+      }
+      const filePickerCallback = (callback, value, meta) => {
+        const that = this
+        const changeFile = function () {
+          const file = this.files[0]
+          that.$http.save({
+            action: 'upload',
+            file: file,
+            SOURCE: 'page'
+          }, {
+            requestType: 'formData'
+          })
+            .then(data => {
+              if (data && data.bean) {
+                callback(that.$util.getFileUrl(data.bean, '', false), { text: file.name })
+              }
+            })
+        }
+        let input = document.createElement('input')
+        input.setAttribute('type', 'file')
+        input.click()
+        input.onchange = changeFile
+        input = null
+      }
+      this.saveDocContentDebounce = this.$_.debounce(this.saveDocContent, 500)
+
+      window.tinymce.init({
+        target: editorNode,
+        width: '100%',
+        plugins: 'searchreplace autolink directionality visualblocks visualchars fullscreen image link media codesample table charmap hr nonbreaking anchor advlist lists imagetools autosave paste quickbars doclink',
+        menubar: '',
+        toolbar_mode: 'wrap',
+        toolbar: 'doclink undo redo | blocks | bold italic underline strikethrough| alignment outdent indent | font_family lineheight fontsize | forecolor backcolor |numlist bullist|table | image | media | link | fullscreen',
+        quickbars_selection_toolbar: 'blocks alignment bold italic strikethrough underline quicklink codesample blockquote',
+        contextmenu: 'link image imagetools table  spellchecker doclink',
+        docTree: this.catalogue,
+        currentDocId: this.docInfo.ID,
+        onDocLinkClick: (docId, isNewWindow) => {
+          if (isNewWindow) {
+            const url = `/#/help/${this.client}/${this.system}/${this.docSet.NUMBER}/${docId}`
+            window.open(url)
+          } else {
+            this.nodeClick({ id: docId })
+          }
+        },
+        statusbar: false,
+        language: 'zh_CN',
+        content_style: 'p {margin: 2px 0}',
+        // 允许自定义属性
+        extended_valid_elements: 'a[href|target|class|style|data-doc-id|data-doc-name]',
+        custom_elements: 'a',
+        valid_children: '+a[div|p|span]',
+        font_family_formats: 'Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;宋体=simsun,serif;黑体=SimHei;仿宋=FangSong;华文中宋=STZhongsong;楷体=KaiTi;微软雅黑=Microsoft YaHei',
+        fontsize_formats: fontSizeList.join(' '),
+        paste_enable_default_filters: false,
+        convert_urls: false,
+        images_upload_handler: this.imageUploadHandler,
+        file_picker_callback: filePickerCallback,
+        promotion: false,
+        paste_preprocess: async (plugin, args) => {
+          if (/^<img src="(data:image.+)" alt="">$/.test(args.content)) {
+            const file = this.$util.dataURLtoBlob(RegExp.$1)
+            this.$http.save({
+              action: 'upload',
+              file: file,
+              SOURCE: 'page'
+            }, {
+              requestType: 'formData'
+            })
+              .then(data => {
+                if (data && data.bean) {
+                  this.editor.execCommand('mceInsertClipboardContent', false, {
+                    content: '<img src="' + this.$util.getFileUrl(data.bean, '', false) + '" alt="">'
+                  })
+                }
+              })
+          } else {
+            let needFormatImage = false
+            const parser = new DOMParser()
+            const node = parser.parseFromString(args.content, 'text/html')
+            const imgs = node.querySelectorAll('img')
+            for (const img of imgs) {
+              if (img.src.startsWith('http') && !img.src.includes('/file-server/')) {
+                needFormatImage = true
+                args.preventDefault()
+                // 上传
+                await this.$http.save({
+                  action: 'uploadUrl',
+                  entityId: this.docMetaCode,
+                  url: img.src
+                })
+                  .then(data => {
+                    img.setAttribute('src', window.MINIO_IP + data.slice('1'))
+                  })
+              }
+            }
+            if (needFormatImage) {
+              const html = node.body.innerHTML
+              args.target.insertContent(html)
+            }
+          }
+        },
+        setup: (ed) => {
+          ed.ui.registry.addGroupToolbarButton('alignment', {
+            icon: 'align-left',
+            tooltip: 'Alignment',
+            items: 'alignleft aligncenter alignright | alignjustify'
+          })
+          ed.on('input change keyup undo redo', () => {
+            this.editDocId = this.docInfo.ID
+            this.editContent = ed.getContent()
+            this.saveDocContentDebounce()
+          })
+          ed.on('remove', () => {
+            ed.off('input change keyup undo redo')
+          })
+        }
+      })
+        .then(editors => {
+          this.editor = editors[0]
+          const value = this.docInfo.CONTENT
+          if (value && this.editor) {
+            this.editor.setContent(value)
+          }
+          this.getDocCatalogue()
+          this.addEventScrollListener()
+        })
+    },
+    setDocName () {
+      this.$http.update({
+        entityId: this.docMetaCode,
+        bean: {
+          ID: this.docInfo.ID,
+          NAME: this.docInfo.NAME
+        }
+      })
+        .then(data => {
+          this.editDocName = false
+          this.getCatalogue()
+          this.$message.success('修改成功')
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    addEventScrollListener () {
+      if (this.isScrollToc) return
+      const scrollEl = this.mode === 'edit' ? this.editor.dom.doc : this.$refs.editorContainer
+      scrollEl.addEventListener('scroll', (e) => {
+        const element = this.mode === 'edit' ? e.target.documentElement : e.target
+        const scrollTop = element.scrollTop
+        const sortTocList = [...this.tocList]
+        sortTocList.sort((item, nextItem) => {
+          return Math.abs(item.element.offsetTop - scrollTop) - Math.abs(nextItem.element.offsetTop - scrollTop)
+        })
+        this.activeToc = sortTocList[0].id
+      })
+    },
+    getDocCatalogue () {
+      let headers = []
+      if (this.mode === 'edit') {
+        headers = this.editor.dom.select('h1,h2,h3,h4,h5,h6,h7,h8,h9')
+      } else {
+        // const iframe = this.$refs.iframe.contentWindow
+        headers = this.$refs.docContent.querySelectorAll('h1,h2,h3,h4,h5,h6,h7,h8,h9')
+      }
+      const tocList = []
+      for (const element of headers) {
+        const id = element.id || this.$util.genId()
+        element.id = id
+        if (element.innerText) {
+          tocList.push({
+            id,
+            title: element.innerText,
+            level: element.tagName.replace('H', ''),
+            element: element
+          })
+        }
+      }
+      this.tocList = tocList
+      if (!this.activeToc && tocList.length > 0) this.activeToc = tocList[0].id
+    },
+    saveDocContent () {
+      const value = this.editor.getContent()
+      this.$http.update({
+        entityId: this.docMetaCode,
+        bean: {
+          ID: this.editDocId || this.docInfo.ID,
+          CONTENT: this.editContent || value
+        }
+      })
+        .then(data => {
+          this.getDocInfo(this.docInfo.ID)
+          this.getDocCatalogue()
+        })
+    },
+    scrollToElement (item) {
+      this.activeToc = item.id
+      this.isScrollToc = true
+      item.element.scrollIntoView()
+      setTimeout(() => {
+        this.isScrollToc = false
+      }, 500)
+    },
+    preview () {
+      const { client, system } = this.$route.params
+      window.open(`/#/help/${client}/${system}/${this.docSet.NUMBER}/${this.docInfo.ID}`)
+    },
+    async loadDocLinkPlugin () {
+      // 检查插件是否已加载
+      if (window.tinymce && window.tinymce.PluginManager.get('doclink')) {
+        return Promise.resolve()
+      }
+
+      // 动态加载文档链接插件
+      return new Promise((resolve, reject) => {
+        const script = document.createElement('script')
+        // 静态三方库目录随 util.getStaticJsDir()（平台=assets/js/，产品项目默认 js/），别写死 /js/
+        script.src = '/' + this.$util.getStaticJsDir() + 'tinymce/plugins/doclink/plugin.js'
+        script.onload = resolve
+        script.onerror = (error) => {
+          console.error('Failed to load doclink plugin:', error)
+          reject(error)
+        }
+        document.head.appendChild(script)
+      })
+    },
+    bindDocLinkClick () {
+      const docLinks = this.$refs.docContent?.querySelectorAll('a.doc-link[data-doc-id]')
+
+      if (docLinks) {
+        docLinks.forEach(link => {
+          link.addEventListener('click', (e) => {
+            const target = link.getAttribute('target')
+            const href = link.getAttribute('href')
+
+            // 如果是新窗口打开且有有效的 href，使用默认行为
+            if (target === '_blank' && href && href !== 'javascript:void(0);') {
+              return
+            }
+
+            // 阻止默认行为，使用 Vue 路由跳转
+            e.preventDefault()
+            const docId = link.getAttribute('data-doc-id')
+
+            if (docId) {
+              this.nodeClick({ id: docId })
+            }
+          })
+        })
+      }
+    },
+    convertDocLinksToRealUrls () {
+      const docLinks = this.$refs.docContent?.querySelectorAll('a.doc-link[data-doc-id]')
+
+      if (docLinks && docLinks.length > 0) {
+        const client = this.client || this.$route.params.client
+        const system = this.system || this.$route.params.system
+        const docSetNumber = this.docSet.NUMBER
+
+        docLinks.forEach(link => {
+          const docId = link.getAttribute('data-doc-id')
+          if (docId) {
+            const url = `${window.location.origin}${window.location.pathname}#/help/${client}/${system}/${docSetNumber}/${docId}`
+            link.setAttribute('href', url)
+          }
+        })
+      }
+    }
+  },
+  mounted () {
+    const { client, system } = this.$route.params
+    this.client = client
+    this.system = system
+    this.mode = this.$query.mode
+    this.getDocSet()
+    this.getCatalogue()
+    this.delaySearchDoc = this.$_.debounce(this.searchDoc, 500)
+    if (this.showMenu) {
+      this.changeMenuFlag = true
+      this.$store.commit('SWITCH_MENU_SHOW', false)
+    }
+    if (this.showAppNav) {
+      this.changeAppNavFlag = true
+      this.$store.commit('SWITCH_APP_NAV_SHOW', false)
+    }
+  },
+  beforeUnmount () {
+    if (this.changeMenuFlag) {
+      this.$store.commit('SWITCH_MENU_SHOW', true)
+    }
+    if (this.changeAppNavFlag) {
+      this.$store.commit('SWITCH_APP_NAV_SHOW', true)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: calc(100% + 20px);
+  height: calc(100% + 20px);
+  margin: -10px;
+  &.new-window {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+  }
+}
+
+.docset-header {
+  height: 56px;
+  background: var(--epx-bg-card);
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--epx-border);
+}
+.docset-title {
+  display: flex;
+}
+.docset-header__right {
+  display: flex;
+  align-items: center;
+}
+.docset-back {
+  font-size: var(--epx-font-size-xl);
+  cursor: pointer;
+  position: relative;
+  top: 1px;
+}
+
+.docset-name {
+  color: var(--epx-text);
+  font-size: var(--epx-font-size-l);
+  line-height: 1;
+  margin: 0 12px 0 6px;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  i {
+    font-size: 18px;
+    color: #444;
+    cursor: pointer;
+    margin-left: 8px;
+  }
+}
+.docset-extra {
+  span {
+    margin-left: 10px;
+    color: var(--epx-text);
+  }
+}
+.docset-container {
+  height: calc(100% - 56px);
+  overflow: hidden;
+  display: flex;
+}
+.catalogue {
+  width: 300px;
+  height: 100%;
+  background: #F3F5FA;
+  box-shadow: 2px 0px 4px 0px rgba(0,0,0,0.15);
+  z-index: 1;
+}
+.catalogue-header {
+  height: 50px;
+  border-bottom: 1px solid var(--epx-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;
+  font-size: var(--epx-font-size-l);
+  >i {
+    cursor: pointer;
+    @include font_color_primary
+  }
+}
+.catalog-content {
+  height: calc(100% - 50px);
+}
+.catalog-search {
+  margin: 10px;
+  width: calc(100% - 20px);
+}
+.catalog-tree {
+  height: calc(100% - 60px);
+  overflow: auto;
+
+    :deep(.el-tree) {
+      background: none;
+    }
+    :deep(.el-tree-node) {
+      &.is-current {
+        >.el-tree-node__content{
+          @include bg_color_primary(.2);
+          @include font_color_primary;
+        }
+      }
+    }
+    :deep(.el-tree-node__content) {
+      height: 40px;
+    }
+    :deep(.el-tree-node__expand-icon) {
+      color: var(--epx-text);
+      &.is-leaf {
+        color: transparent;
+      }
+    }
+
+}
+
+.catalog-item {
+  flex: 1;
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: 16px;
+  &:hover {
+    .catalogue-item__operates  {
+      display: block;
+    }
+  }
+}
+.catalogue-item__operates {
+  display: none;
+  i {
+    color: #444;
+    margin-left: 8px;
+    &:hover {
+      @include font_color_primary;
+    }
+  }
+}
+.doc {
+  flex: 1;
+  background: var(--epx-bg-card);
+}
+.doc-header {
+  height: 50px;
+  background: var(--epx-bg-card);
+  padding: 0 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--epx-border);
+}
+.doc-updatetime {
+  color: var(--epx-text);
+  padding-left: 8px;
+  border-left: 1px solid var(--epx-border);
+}
+
+.doc-content {
+  height: calc(100% - 50px);
+  display: flex;
+  flex-direction: row-reverse;
+}
+.doc-catalogue {
+  width: 180px;
+  margin: 20px;
+  position: sticky;
+  height: calc(100% - 40px);
+}
+.doc-catalogue--fold {
+  width: 20px;
+  .doc-catalogue__header {
+    border: 0;
+    >span {
+      display: none;
+    }
+    i {
+      transform: rotateZ(180deg);
+    }
+  }
+  .doc-catalogue__list {
+    width: 0;
+    overflow: hidden;
+  }
+}
+.doc-catalogue__header {
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: var(--epx-font-size-l);
+  border-bottom: 1px solid var(--epx-border);
+  >i {
+    cursor: pointer;
+    &:hover {
+      @include font_color_primary
+    }
+  }
+}
+.doc-catalogue__list {
+  height: calc(100% - 40px);
+  overflow: auto;
+}
+.doc-catalogue__item {
+  color: #444;
+  line-height: 20px;
+  margin: 10px 0;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  &:hover, &.is-active {
+    @include font_color_primary;
+  }
+  @for $i from 2 to 10 {
+    &.indent-level-#{$i} {
+      padding-left: 10px * ($i - 1);
+    }
+  }
+}
+.doc-editor {
+  max-width: 1100px;
+  min-width: 700px;
+  width: calc(100% - 200px);
+  margin: 0 auto;
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow: auto;
+  word-break: break-all;
+  .editor {
+    height: 100%;
+    display: block;
+  }
+}
+.doc-title {
+  font-size: 32px;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+.doc-detail-content {
+  height: calc(100% - 68px);
+  font-size: var(--epx-font-size-l);
+
+    :deep(iframe) {
+      width: 100%;
+      height: 100%;
+      border:0;
+    }
+
+}
+.search-result__list {
+  max-height: 600px;
+  overflow:auto;
+}
+.search-result__item {
+  padding: 10px;
+  cursor: pointer;
+  border-radius: var(--epx-radius-base);
+  &:hover {
+    @include bg_color_primary(.1);
+  }
+}
+.search-result__title {
+  font-weight: bold;
+  font-size: var(--epx-font-size-l);
+  margin-bottom: 6px;
+  color: var(--epx-text);
+}
+.search-result__content {
+  line-height: 20px;
+  max-height: 40px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.doc-navigation {
+  display: flex;
+  margin: 0 -10px;
+  padding: 20px 0;
+}
+.doc-navigation__item {
+  flex: 1;
+  margin: 0 10px;
+}
+.doc-navigation__item-inner {
+  height: 70px;
+  background: var(--epx-bg);
+  border-radius: var(--epx-radius-base);
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  font-size: var(--epx-font-size-base);
+  color: #444444;
+  line-height: 22px;
+  cursor: pointer;
+  i{
+    font-size: var(--epx-font-size-l);
+    margin-right: 10px;
+  }
+  &:hover {
+    @include bg_color_primary(.1);
+    @include border_color_primary(.5);
+  }
+}
+.doc-navigation__name {
+  margin-top: 4px;
+  @include font_color_primary;
+  font-weight: bold;
+}
+.doc-navigation__next {
+  .doc-navigation__item-inner {
+    text-align: right;
+    justify-content: flex-end;
+    margin-right: 0;
+    i {
+      margin-left: 10px;
+    }
+  }
+}
+.doc-detail-html {
+  white-space: word-break;
+  max-width: 100%;
+
+    :deep(h1),
+    :deep(h2),
+    :deep(h3),
+    :deep(h4),
+    :deep(h5),
+    :deep(h6),
+    :deep(ul),
+    :deep(ol),
+    :deep(p) {
+      margin-block-start: 1em;
+      margin-block-end: 1em;
+    }
+
+    :deep(ul) {
+      padding-inline-start: 40px;
+      li {
+        list-style-type:disc;
+      }
+    }
+    :deep(ol) {
+      padding-inline-start: 40px;
+      li {
+        list-style-type:decimal;
+      }
+    }
+
+}
+</style>