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

package/src/components/WikiWorkbench.vue

@@ -0,0 +1,717 @@
+<template>
+  <div class="epx-wiki-workbench" v-loading="loading" :style="{ height: boxHeight }">
+    <!-- 不画自己的标题栏：页面外壳已经有「〈 Wiki 工作台」那一条了，
+         再画一条就是上下两个返回箭头、两个标题。空间名与状态挂到页签行右侧 -->
+    <div class="wiki-workbench__tabs">
+      <button
+        v-for="t in tabs"
+        :key="t.key"
+        :class="{ 'is-on': tab === t.key }"
+        @click="tab = t.key"
+      >{{ t.name }}</button>
+      <span class="wiki-workbench__space">
+        <b>{{ spaceName }}</b>
+        <el-tag v-if="indexStale" size="small" type="warning">索引待重建</el-tag>
+        <el-tag v-if="detail.STATUS === '0'" size="small" type="danger">已停用</el-tag>
+      </span>
+    </div>
+
+    <!-- 内容：左目录树，右正文/编辑器 -->
+    <div v-show="tab === 'content'" class="wiki-workbench__body">
+      <div class="wiki-workbench__tree">
+        <div class="wiki-workbench__tree-top">
+          <el-input
+            v-model="filter"
+            size="small"
+            clearable
+            placeholder="过滤页标题或路径"
+            prefix-icon="el-icon-search"
+          ></el-input>
+          <!-- 目录操作只在编辑态出现：编辑就是那个总开关，
+               再给目录单配一个「管理目录」开关，等于同一件事要开两次 -->
+          <div v-if="editing" class="wiki-workbench__tree-ops">
+            <el-button type="primary" size="small" @click="newPage">＋ 新建页</el-button>
+            <el-button size="small" @click="newFolder">＋ 文件夹</el-button>
+          </div>
+        </div>
+        <div v-if="editing" class="wiki-workbench__tree-tip">
+          同级拖动 = 只改顺序，<b>不产生 commit</b>；改路径要走发布流程，暂未开放。
+        </div>
+        <wiki-tree
+          :nodes="nodes"
+          :current="path"
+          :keyword="filter"
+          :sortable="editing"
+          :deletable="editing"
+          empty-text="这个空间还没有页。先同步远端把已有文档拉进来"
+          @open="openPage"
+          @reorder="onReorder"
+          @remove="onRemove"
+        ></wiki-tree>
+      </div>
+
+      <div class="wiki-workbench__doc">
+        <!-- 顶条：左边说清「在改哪一页」，右边编辑动作与空间级动作用分隔线隔开——
+             前者只影响这一页，后者影响整个空间，混在一起容易点错 -->
+        <div class="wiki-workbench__doc-top">
+          <div class="wiki-workbench__doc-nm">
+            <span class="nm">{{ doc.title || doc.path || '未选择' }}</span>
+            <span class="pt">
+              {{ doc.path }}
+              <template v-if="doc.cite"> · 被引用 {{ doc.cite }} 次</template>
+            </span>
+          </div>
+          <div class="wiki-workbench__doc-ops">
+            <template v-if="editing">
+              <el-button size="small" @click="callDoc('cancelEdit')">退出编辑</el-button>
+              <el-button size="small" @click="callDoc('saveDraft')">保存草稿</el-button>
+            </template>
+            <el-button v-else type="primary" size="small" :disabled="!doc.path" @click="callDoc('startEdit')">
+              ✎ 编辑
+            </el-button>
+            <el-button
+              type="primary"
+              size="small"
+              :disabled="!doc.path || (!editing && doc.state !== 'draft')"
+              @click="callDoc(editing ? 'publish' : 'publishSavedDraft')"
+            >发布</el-button>
+            <span class="wiki-workbench__vsep"></span>
+            <el-button
+              v-if="detail.SOURCE_TYPE && detail.SOURCE_TYPE !== 'db'"
+              size="small"
+              :loading="syncing"
+              @click="doSync"
+            >同步远端</el-button>
+            <el-button size="small" :loading="inspecting" @click="doInspect">体检</el-button>
+            <el-button size="small" :loading="reindexing" @click="doReindex">重建索引</el-button>
+            <el-button size="small" @click="tab = 'intake'">⬆ 上传原始文件</el-button>
+          </div>
+        </div>
+
+        <wiki-doc
+          ref="doc"
+          :page="pageWithSpace"
+          :backlinks="backlinks"
+          :show-bar="false"
+          @open="openRelative"
+          @open-path="openPage"
+          @editing="editing = $event"
+          @dirty="dirty = $event"
+          @published="onPublished"
+        ></wiki-doc>
+
+        <!-- 底部条：发布会产生什么后果，在按发布之前就该看见 -->
+        <div class="wiki-workbench__foot">
+          <span>{{ publishHint }}</span>
+          <span class="wiki-workbench__foot-r">发布后自动重建检索索引</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 其余页签直接把内容摆出来。跳到别的页面等于把「在这个空间里干活」
+         拆成好几个入口，回来还得重新选一次空间 -->
+    <wiki-revisions
+      v-if="tab === 'changes'"
+      :wiki-id="wikiId"
+      :path="path"
+      :title="doc.title"
+      @back="tab = 'content'"
+    ></wiki-revisions>
+    <wiki-intake
+      v-if="tab === 'intake'"
+      :wiki-id="wikiId"
+      @open="openFromTab"
+      @changed="refreshContent"
+    ></wiki-intake>
+    <wiki-cites v-if="tab === 'cites'" :wiki-id="wikiId" @open="openFromTab"></wiki-cites>
+    <wiki-jobs v-if="tab === 'jobs'" :wiki-id="wikiId"></wiki-jobs>
+    <wiki-space-settings
+      v-if="tab === 'settings'"
+      :detail="detail"
+      :mounts="mounts"
+      @edit="goSettings"
+    ></wiki-space-settings>
+
+  </div>
+</template>
+
+<script>
+import component from '@epxing/core/src/mixins/component'
+import { WikiTree, WikiDoc } from '@epxing/components/src/wiki-site'
+import { WikiJobs, WikiRevisions, WikiCites, WikiIntake, WikiSpaceSettings } from './wiki-workbench'
+import { pagePath, resolvePath } from '@epxing/components/src/wiki-site/wiki-path'
+
+const WIKI_META = 'FM_AI_WIKI'
+
+// 空间编辑页的页面配置 ID（gen_wiki_pages.py 生成）。走 $configs 可覆盖——
+// 页面配置 ID 是环境数据，换一套库就变，写死在组件里等于每换一个环境改一次代码
+const SPACE_EDIT_PAGE_ID = 'F8DE4F345B29A697DE50F2EA5D313E58'
+
+export default {
+  name: 'epx-wiki-workbench',
+  components: { WikiTree, WikiDoc, WikiJobs, WikiRevisions, WikiCites, WikiIntake, WikiSpaceSettings },
+  mixins: [component],
+  spaceEditPageId: SPACE_EDIT_PAGE_ID,
+  data () {
+    return {
+      loading: false,
+      space: {},
+      // 空间完整记录。/space 只给读者需要的 id/code/name 三项——源地址、分支这些
+      // 刻意不下发（站点上谁都能看到就等于把内网仓库地址公开了）。
+      // 工作台是管理端，另取一次实体记录拿全字段
+      detail: {},
+      nodes: [],
+      // 字段名不能叫 page：平台的 component 混入已经声明了一个同名 prop（当前页面信息，
+      // 无默认值）。data 与 prop 撞名时 Vue 保留 prop、丢掉 data——于是这里的赋值不生效，
+      // 而模板里 doc.title 是在 undefined 上取值，整个组件渲染直接抛异常、内容区全白。
+      // 而且它只在「一页都没有」时暴露：有页的空间会很快给它赋上值，看着就像正常的
+      doc: {},
+      backlinks: [],
+      path: '',
+      filter: '',
+      mounts: '',
+      boxHeight: '100%',
+      tab: 'content',
+      editing: false,
+      // 编辑器里的内容改过没有。由 WikiDoc 报上来——它才知道基准是草稿还是已发布正文
+      dirty: false,
+      syncing: false,
+      inspecting: false,
+      reindexing: false,
+      tabs: [
+        { key: 'content', name: '内容' },
+        { key: 'intake', name: '原始文件' },
+        { key: 'changes', name: '变更' },
+        { key: 'cites', name: '引用与反馈' },
+        { key: 'jobs', name: '任务' },
+        { key: 'settings', name: '设置' }
+      ]
+    }
+  },
+  computed: {
+    /** 空间从页面参数来：列表页「进入」时带过来的记录 ID。 */
+    wikiId () {
+      return this.$query.id || this.$query.wikiId || this.$route.query.id || ''
+    },
+    /**
+     * 进来就要打开的页。
+     *
+     * 维护中心「去修这一页」、热度榜「打开这一页」都把 path 一起带过来：
+     * 不带的话人得自己在树里翻到那一页，而那恰恰是最该省掉的一步。
+     */
+    initialPath () {
+      return this.$query.path || this.$route.query.path || ''
+    },
+    /** 新建时放在当前页所在目录下——人多半是在「这一块」里继续加内容。 */
+    currentDir () {
+      const p = this.path || ''
+      return p.includes('/') ? p.slice(0, p.lastIndexOf('/')) : ''
+    },
+    pageWithSpace () {
+      return { ...this.doc, wikiId: this.wikiId }
+    },
+    spaceName () {
+      return this.detail.NAME || this.space.name || 'Wiki'
+    },
+    indexStale () {
+      return !!(this.detail.SOURCE_REV && this.detail.INDEXED_REV !== this.detail.SOURCE_REV)
+    },
+    /**
+     * 发布会产生什么后果，按源类型说清楚。
+     *
+     * Git 源发布是一次真实的 commit + push，不是「保存」——写明白了人才知道
+     * 这一下动的是生产仓库。
+     */
+    publishHint () {
+      if (this.detail.SOURCE_TYPE === 'git') {
+        return '发布将产生一次 commit 并推送到 ' + (this.detail.GIT_BRANCH || 'master')
+      }
+      if (this.detail.SOURCE_TYPE === 'oss') {
+        return '发布将覆盖对象存储里的同名文件'
+      }
+      return '发布将在库内新增一条版本记录'
+    }
+  },
+  created () {
+    // 高度量准过没有。不进 data：只有 fit 自己看，没有模板依赖它
+    this.measured = false
+    this.ro = null
+    this.load()
+  },
+  mounted () {
+    this.fit()
+    // 外壳的页面标题栏（epx-header-nav，60px + 10px 间距）和这个组件是同一批渲染的，
+    // mounted 里量到的顶边可能还是「标题栏还没进来」时的那个值，下一帧再量一次
+    this.$nextTick(this.fit)
+    this.watchBox()
+    window.addEventListener('resize', this.fit)
+  },
+  beforeUnmount () {
+    window.removeEventListener('resize', this.fit)
+    if (this.ro) {
+      this.ro.disconnect()
+      this.ro = null
+    }
+  },
+  methods: {
+    /**
+     * 量出可用高度。
+     *
+     * height:100% 只在祖先每一层都有确定高度时才成立，而页面外壳没给——
+     * 于是树和正文各自按内容撑开，整页被顶得很高，滚动条跑到最外层，
+     * 页签行跟着被滚走。所以自己量：顶边到「可用底边」之间剩多少就是多少。
+     *
+     * 底边不能一律取视窗底：外壳（menu-index 的 .main）底下还有内边距，
+     * 真正的界是最近那个会裁内容的祖先（.epx-page__container 是 overflow:auto）。
+     * 顶边也不能只量一次，见 mounted 与 watchBox。
+     */
+    fit () {
+      const el = this.$el
+      if (!el || !el.getBoundingClientRect) return
+      const rect = el.getBoundingClientRect()
+      // 栈式页面被别的页盖住时整块是 display:none，rect 全是 0。
+      // 按 top=0 算会多出一整条外壳标题栏的高度，底部那条发布提示就被顶到
+      // 可见区外面，滚动条落到最外层。这种时候标记成没量准，等显示了再量
+      if (!rect.width && !rect.height) {
+        this.measured = false
+        return
+      }
+      this.measured = true
+      // 低代码组件的 margin 来自页面配置，不在 rect.height 内。若不预留
+      // margin-bottom，内容盒会贴到容器底边，外边距再把页面顶出一截。
+      const marginBottom = parseFloat(window.getComputedStyle(el).marginBottom) || 0
+      const h = Math.max(320, Math.floor(this.availBottom() - rect.top - marginBottom))
+      const next = h + 'px'
+      if (next !== this.boxHeight) this.boxHeight = next
+    },
+
+    /**
+     * 可用底边（视窗坐标系）：最近那个裁内容的祖先的内容底边，
+     * 没有这种祖先才回落到视窗底（留一点余量，免得压线出滚动条）。
+     */
+    availBottom () {
+      let node = this.$el && this.$el.parentNode
+      while (node && node.nodeType === 1 && node !== document.body && node !== document.documentElement) {
+        const cs = window.getComputedStyle(node)
+        if (['auto', 'scroll', 'hidden'].indexOf(cs.overflowY) >= 0) {
+          const rect = node.getBoundingClientRect()
+          // clientHeight 含内边距、不含边框：从上边框内侧往下量，再把下内边距让出来
+          return rect.top + node.clientTop + node.clientHeight - (parseFloat(cs.paddingBottom) || 0)
+        }
+        node = node.parentNode
+      }
+      return window.innerHeight - 16
+    },
+
+    /**
+     * 从 display:none 变回可见时补量一次。
+     *
+     * 只在「上次没量准」时才重量：自己的高度就是自己设的，无条件重量会和
+     * 这次设置互相触发，来回抖。
+     */
+    watchBox () {
+      if (typeof ResizeObserver === 'undefined' || !this.$el) return
+      this.ro = new ResizeObserver(() => {
+        if (!this.measured) this.fit()
+      })
+      this.ro.observe(this.$el)
+    },
+
+    load () {
+      if (!this.wikiId) return Promise.resolve()
+      this.loadDetail()
+      this.loading = true
+      return this.$http.get({ action: 'space', entityId: WIKI_META, wikiId: this.wikiId })
+        .then(d => {
+          this.space = (d && d.space) || {}
+          this.nodes = (d && d.nodes) || []
+          // 带了 path 就直接开那一页；否则落在第一页上
+          if (!this.path && this.initialPath) {
+            this.doOpen(this.initialPath)
+          } else if (!this.path) {
+            const first = this.nodes.find(n => n.type === 'page')
+            if (first) this.openPage(first.path)
+          }
+        })
+        .catch(e => this.$message.error((e && e.message) || '空间加载失败'))
+        .finally(() => { this.loading = false })
+    },
+
+    /** 原始文件处理完成后，目录与当前正文都可能改变，两部分必须一起重取。 */
+    refreshContent () {
+      const current = this.path
+      return this.load().then(() => {
+        if (current) return this.doOpen(current)
+      })
+    },
+
+    newPage () {
+      this.$prompt('新页会先落成草稿，发布之后才写回源。', '新建页', {
+        confirmButtonText: '创建', cancelButtonText: '取消', inputPlaceholder: '页标题'
+      }).then(({ value }) => {
+        if (!value || !value.trim()) return
+        return this.$http.update({
+          action: 'createPage', entityId: WIKI_META, wikiId: this.wikiId, title: value.trim(), dir: this.currentDir
+        }).then(d => {
+          this.$message.success((d && d.message) || '已新建')
+          this.load()
+          if (d && d.path) this.doOpen(d.path)
+        })
+      }).catch(() => {})
+    },
+
+    newFolder () {
+      this.$prompt('文件夹只是路径的一段，不会往源里写文件。', '新建文件夹', {
+        confirmButtonText: '创建', cancelButtonText: '取消', inputPlaceholder: '文件夹名'
+      }).then(({ value }) => {
+        if (!value || !value.trim()) return
+        return this.$http.update({
+          action: 'createFolder', entityId: WIKI_META, wikiId: this.wikiId, name: value.trim(), dir: this.currentDir
+        }).then(d => {
+          this.$message.success((d && d.message) || '已新建')
+          this.load()
+        })
+      }).catch(() => {})
+    },
+
+    /**
+     * 删一页或一个空文件夹。
+     *
+     * 删除是一次真实的发布：已发布的页会从源里删掉文件并 push。所以确认框里
+     * 把后果写清楚，而不是只问一句「确定删除吗」。
+     */
+    onRemove (node) {
+      const isFolder = node.type === 'folder'
+      const tip = isFolder
+        ? '文件夹只是路径的一段，删它不会往源里写东西；里面还有内容时删不掉。'
+        : '已发布的页会从源里删除文件并推送，这是一次真实的 commit；指向它的链接会变成死链。'
+      this.$confirm(tip, '删除「' + (node.title || node.path) + '」', {
+        type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消', confirmButtonClass: 'el-button--danger'
+      }).then(() => {
+        return this.$http.update({ action: 'removePage', entityId: WIKI_META, wikiId: this.wikiId, pageId: node.id })
+          .then(d => {
+            this.$message.success((d && d.message) || '已删除')
+            // 删掉的正好是当前打开的页时，右边要退回未选择态，
+            // 否则那一页还留在屏幕上，看着像没删掉
+            if (node.path === this.path) {
+              this.path = ''
+              this.doc = {}
+              this.backlinks = []
+            }
+            this.load()
+          })
+          .catch(e => this.$message.error((e && e.message) || '删除失败'))
+      }).catch(() => {})
+    },
+
+    /** 拖完存顺序。只改 ORDER_NUM，后端不会因此产生 commit。 */
+    onReorder (pageIds) {
+      this.$http.update({
+        action: 'reorderPages', entityId: WIKI_META, wikiId: this.wikiId, pageIds: pageIds.join(',')
+      }).then(d => {
+        this.$message.success((d && d.message) || '顺序已保存')
+        this.load()
+      }).catch(e => {
+        this.$message.error((e && e.message) || '保存顺序失败')
+        this.load()
+      })
+    },
+
+    /** 空间的完整记录：源类型、分支、索引版本这些只有管理端要。 */
+    loadDetail () {
+      this.$http.get({ entityId: WIKI_META, id: this.wikiId })
+        .then(res => { this.detail = (res && res.data) || res || {} })
+        .catch(() => { this.detail = {} })
+      // 挂载数不在 FM_AI_WIKI 上（数的是 FM_SERVICE.WIKI_ID），单独一个接口补
+      this.$http.get({ action: 'stats', entityId: WIKI_META, wikiIds: this.wikiId })
+        .then(d => {
+          const row = ((d && d.stats) || {})[this.wikiId] || {}
+          this.mounts = row.mounts == null ? '' : row.mounts
+        })
+        .catch(() => { this.mounts = '' })
+    },
+
+    openPage (path) {
+      if (!path) return
+      // 编辑中换页会把没保存的改动丢掉，先问一声。
+      // 注意这里不动 editing：换页只是换页，编辑器接着开着（WikiDoc 会对新页重取草稿）。
+      // 早先在这儿把 editing 置了 false，结果是按钮变回「编辑」而编辑器还开着，
+      // 里面装的还是上一页的正文——两边状态对不上
+      // 只有真改过才拦。没动过内容还弹一次确认，等于把「翻几页看看」变成每翻一页点两次，
+      // 而弹出来的问题（要不要丢弃改动）本身还是假的——根本没有改动
+      if (this.editing && this.dirty) {
+        this.$confirm('这一页未保存的改动会丢掉，编辑状态保留，直接在新的一页上接着改。', '切换到别的页', {
+          type: 'warning', confirmButtonText: '丢弃并切换', cancelButtonText: '留在这里'
+        }).then(() => this.doOpen(path)).catch(() => {})
+        return
+      }
+      this.doOpen(path)
+    },
+
+    doOpen (path) {
+      const canonicalPath = pagePath(path)
+      if (!canonicalPath) return Promise.resolve()
+      this.path = canonicalPath
+      return this.$http.get({ action: 'page', entityId: WIKI_META, wikiId: this.wikiId, path: canonicalPath })
+        .then(d => {
+          this.doc = (d && d.page) || {}
+          this.backlinks = (d && d.backlinks) || []
+        })
+        .catch(() => {
+          this.doc = { path: canonicalPath, title: '', content: '这一页读不出来（可能已被删除或改名）。' }
+          this.backlinks = []
+        })
+    },
+
+    /** 正文里的相对链接：按当前页所在目录解析，与后端 WikiPaths.resolve 同一套规则。 */
+    openRelative (href) {
+      const target = resolvePath(this.path, href)
+      if (target.path) this.openPage(target.path)
+    },
+
+    /** 顶条的编辑动作转发给正文组件——编辑态在它内部，这里只是换了个位置放按钮。 */
+    callDoc (method) {
+      const doc = this.$refs.doc
+      if (doc && typeof doc[method] === 'function') doc[method]()
+    },
+
+    onPublished () {
+      this.load()
+      this.doOpen(this.path)
+    },
+
+    doSync () {
+      this.syncing = true
+      this.$http.update({ action: 'sync', entityId: WIKI_META, wikiId: this.wikiId })
+        .then(d => {
+          this.$message.success((d && d.message) || '同步完成')
+          this.load()
+        })
+        .catch(e => this.$message.error((e && e.message) || '同步失败'))
+        .finally(() => { this.syncing = false })
+    },
+
+    /** 重建索引只重算投影，不碰源——所以它和同步是两个按钮，不是一个。 */
+    doReindex () {
+      this.reindexing = true
+      this.$http.update({ action: 'reindex', entityId: WIKI_META, wikiId: this.wikiId })
+        .then(d => {
+          this.$message.success((d && d.message) || '索引已重建')
+          this.loadDetail()
+        })
+        .catch(e => this.$message.error((e && e.message) || '重建索引失败'))
+        .finally(() => { this.reindexing = false })
+    },
+
+    /** 从「引用与反馈」点开一页：切回内容页签，免得人以为点了没反应。 */
+    openFromTab (path) {
+      this.tab = 'content'
+      this.openPage(path)
+    },
+
+    doInspect () {
+      this.inspecting = true
+      this.$http.update({ action: 'inspect', entityId: WIKI_META, wikiId: this.wikiId })
+        .then(d => this.$message.success((d && d.message) || '体检完成'))
+        .catch(e => this.$message.error((e && e.message) || '体检失败'))
+        .finally(() => { this.inspecting = false })
+    },
+
+    goSettings () {
+      this.goPage(
+        {
+          metaId: WIKI_META,
+          pageId: this.$configs.spaceEditPageId || SPACE_EDIT_PAGE_ID,
+          pageType: 'EDIT',
+          openMode: '3',
+          num: 0
+        },
+        { ID: this.wikiId }
+      )
+    }
+
+  }
+}
+</script>
+
+<style lang="scss">
+@include b(wiki-workbench) {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  background: #fff;
+
+  &__tabs {
+    flex: none;
+    display: flex;
+    gap: 24px;
+    align-items: center;
+    padding: 10px 16px 0;
+    border-bottom: 1px solid #E3E3E3;
+
+    button {
+      position: relative;
+      padding: 0 0 10px;
+      border: 0;
+      background: transparent;
+      font-size: $--font-size-small;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+
+      &.is-on {
+        @include font_color_primary;
+        font-weight: 600;
+
+        &::after {
+          content: '';
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: -1px;
+          height: 2px;
+          @include bg_color_primary;
+        }
+      }
+    }
+  }
+
+  // 空间名与状态贴在页签行右端：既省一条栏，又让「我在哪个空间」一直看得见
+  &__space {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding-bottom: 10px;
+    font-size: $--font-size-small;
+    color: var(--color-text-secondary);
+
+    b {
+      color: var(--color-text-title);
+    }
+  }
+
+  &__body {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+  }
+
+  &__tree {
+    width: 260px;
+    flex: none;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    border-right: 1px solid #E3E3E3;
+  }
+
+  &__tree-top {
+    flex: none;
+    padding: 10px;
+  }
+
+  &__tree-ops {
+    display: flex;
+    gap: 8px;
+    margin-top: 8px;
+
+    .el-button {
+      flex: 1;
+      margin-left: 0;
+    }
+  }
+
+  &__tree-tip {
+    flex: none;
+    padding: 8px 10px;
+    background: #F7F8FA;
+    border-bottom: 1px solid #E3E3E3;
+    font-size: $--font-size-extra-small;
+    color: var(--color-text-assistant);
+    line-height: 1.6;
+  }
+
+  // 非「内容」页签是整块表格，撑满剩余高度自己滚——
+  // 不给高度的话表格会把工作台顶出外壳，滚动条跑到最外层去
+  .epx-wiki-jobs,
+  .epx-wiki-intake,
+  .epx-wiki-revs,
+  .epx-wiki-cites,
+  .epx-wiki-set {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  &__doc {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  &__doc-top {
+    flex: none;
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 10px 16px;
+    border-bottom: 1px solid #E3E3E3;
+  }
+
+  &__doc-nm {
+    flex: 1;
+    min-width: 0;
+
+    .nm {
+      display: block;
+      font-size: $--font-size-base;
+      font-weight: 600;
+      color: var(--color-text-title);
+    }
+
+    .pt {
+      display: block;
+      margin-top: 2px;
+      font-size: $--font-size-extra-small;
+      color: var(--color-text-assistant);
+    }
+  }
+
+  &__doc-ops {
+    flex: none;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+
+  // 这一页的动作与整个空间的动作之间画条线：前者只影响当前页，
+  // 后者影响整个空间，挨在一起容易点错
+  &__vsep {
+    width: 1px;
+    height: 16px;
+    background: #E3E3E3;
+  }
+
+  &__foot {
+    flex: none;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 16px;
+    border-top: 1px solid #E3E3E3;
+    background: #F7F8FA;
+    font-size: $--font-size-extra-small;
+    color: var(--color-text-assistant);
+  }
+
+  &__foot-r {
+    margin-left: auto;
+  }
+
+}
+</style>