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

package/src/components/wiki-workbench/WikiIntake.vue

@@ -0,0 +1,505 @@
+<template>
+  <div class="epx-wiki-intake" v-loading="loading">
+    <el-alert type="info" :closable="false" show-icon class="epx-wiki-intake__tip">
+      <template v-slot:title>上传的 Word / PDF / PPT / 文本先落暂存区，解析后组织成 Wiki 页</template>
+      暂存区 <b>{{ stash }}</b> 不在纳入范围内，原始文件本身永远不会被当成页检索到。
+      页生成之后原始文件按策略清理，<b>只保留这张入库记录</b>——「这段内容是谁、什么时候、
+      用哪个文件生成的」出现争议时，这条记录是唯一的追溯依据。
+    </el-alert>
+
+    <div v-if="runningRows.length" class="epx-wiki-intake__progress">
+      <i class="el-icon-loading"></i>
+      <div>
+        <b>AI 正在生成 Wiki</b>
+        <div>{{ runningRows[0].note || '任务已开始，正在准备材料…' }}</div>
+      </div>
+    </div>
+
+    <div class="epx-wiki-intake__h">
+      入库记录
+      <span class="sub">共 {{ rows.length }} 条</span>
+      <el-upload
+        class="r"
+        action=""
+        multiple
+        :limit="MAX_FILES"
+        :auto-upload="false"
+        :file-list="picked"
+        :on-change="onPick"
+        :on-remove="onPick"
+        :on-exceed="onExceed"
+        accept=".doc,.docx,.pdf,.ppt,.pptx,.xls,.xlsx,.txt,.md"
+      >
+        <el-button size="small">选择文件</el-button>
+      </el-upload>
+      <!-- 手动提交而不是选完就传：一批文件要走**一个请求**才能落成一条入库记录，
+           而 el-upload 的自动上传是每个文件各调一次 -->
+      <el-button
+        type="primary"
+        size="small"
+        :disabled="!picked.length"
+        :loading="uploading"
+        @click="doUpload"
+      >⬆ 上传{{ picked.length ? ' ' + picked.length + ' 个' : '' }}</el-button>
+    </div>
+
+    <el-table :data="rows" size="small" empty-text="还没有上传过原始文件">
+      <el-table-column label="文件" min-width="200">
+        <template v-slot="s">
+          <div class="epx-wiki-intake__nm">{{ ICON[s.row.fileType] || '📄' }} {{ s.row.fileName }}</div>
+          <div class="epx-wiki-intake__sub">{{ size(s.row.fileSize) }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="处理方式" width="120">
+        <template v-slot="s">{{ modeLabels[s.row.intakeMode] || s.row.intakeMode || '—' }}</template>
+      </el-table-column>
+      <el-table-column label="生成的页" min-width="180">
+        <template v-slot="s">
+          <template v-if="pagesOf(s.row).length">
+            <el-button type="text" class="epx-wiki-intake__pages-toggle" @click="togglePages(s.row)">
+              已生成 {{ pagesOf(s.row).length }} 页
+              <i :class="expandedPages[s.row.id] ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
+            </el-button>
+            <div v-show="expandedPages[s.row.id]" class="epx-wiki-intake__pages-list">
+              <div v-for="p in pagesOf(s.row)" :key="p">
+                <el-button type="text" @click="$emit('open', p)">{{ p }}</el-button>
+              </div>
+            </div>
+          </template>
+          <span v-else class="epx-wiki-intake__sub">—</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="上传" width="160">
+        <template v-slot="s">
+          {{ s.row.createUser || '—' }}
+          <div class="epx-wiki-intake__sub">{{ s.row.createTime }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="原始文件" width="110">
+        <template v-slot="s">
+          <el-tag :type="s.row.purged === '1' ? 'info' : 'warning'" size="small">
+            {{ s.row.purged === '1' ? '已清理' : '暂存中' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" width="280">
+        <template v-slot="s">
+          <el-tag :type="STATE_TYPE[s.row.state] || 'info'" size="small">
+            {{ stateLabels[s.row.state] || s.row.state }}
+          </el-tag>
+          <div v-if="s.row.note" class="epx-wiki-intake__sub">{{ s.row.note }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="250">
+        <template v-slot="s">
+          <!-- 三种方式装不进两个按钮，用下拉：每一项都写清楚它会怎么切 -->
+          <el-dropdown
+            v-if="s.row.state === 'wait' || s.row.state === 'fail'"
+            trigger="click"
+            @command="mode => run(s.row, mode)"
+          >
+            <el-button type="text">
+              {{ s.row.state === 'fail' ? '换方式重试' : '开始处理' }}<i class="el-icon-arrow-down"></i>
+            </el-button>
+            <template v-slot:dropdown><el-dropdown-menu>
+              <!-- 走 Beaver 的 WikiGenerator：它自己规划目录树、逐页生成、逐页验收，
+                   产物先落平台草稿，确认后再发布。和下面三项不是一个量级 -->
+              <el-dropdown-item command="wiki" divided>AI 生成目录与内容（会调模型，慢）</el-dropdown-item>
+              <el-dropdown-item command="ai">AI 按语义拆页（Word/PDF 用这个）</el-dropdown-item>
+              <el-dropdown-item command="outline">按标题拆页（原文是 markdown 才有效）</el-dropdown-item>
+              <el-dropdown-item command="single">整篇转成一个页</el-dropdown-item>
+            </el-dropdown-menu></template>
+          </el-dropdown>
+          <el-button v-if="s.row.state === 'done' && s.row.purged !== '1'" type="text" @click="purge(s.row)">
+            清理原文件
+          </el-button>
+          <el-button v-if="canRegenerate(s.row)" type="text" @click="generate(s.row)">
+            重新 AI 生成
+          </el-button>
+          <el-button type="text" class="epx-wiki-intake__del" @click="drop(s.row)">删记录</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { codeLabelsAll } from './codes'
+
+/**
+ * 工作台「原始文件」页签。
+ *
+ * 处理产出一律先进草稿，<strong>要人过一遍再发布</strong>——自动写回等于让一次上传
+ * 直接改生产 Wiki，而解析出来的结构十有八九要调。
+ *
+ * 解析失败时原始文件<strong>保留</strong>并把原因写进记录：先删文件会让
+ * 「换个处理方式重试」无从下手。
+ */
+// 处理方式与状态的中文名读代码表（FM_AI_WIKI_INTAKE_MODE / _STATE）。颜色留在组件里
+const STATE_TYPE = { wait: 'info', run: 'primary', done: 'success', fail: 'danger' }
+// mixed = 一批里混着几种后缀，给个「一包东西」的图标；单一后缀的按类型给
+const ICON = {
+  docx: '📄',
+  doc: '📄',
+  pdf: '📕',
+  pptx: '📊',
+  ppt: '📊',
+  xlsx: '📗',
+  xls: '📗',
+  txt: '📃',
+  md: '📝',
+  mixed: '📦'
+}
+// 单个文件的上限。再大的多半是扫描件或整本手册，拆页的结果没法看，
+// 而且解析要占住一个请求线程好几分钟
+const MAX_MB = 20
+// 一批最多几个。不设上限的话，误选一整个文档目录就是几十个请求一起打过去，
+// 而每个都要过一遍 MinIO
+const MAX_FILES = 10
+// 不能用持续 interval：上一次请求还没回来时下一次就可能再次发出，且状态刚结束时
+// 还会多打一次。每次响应后确认仍有处理中记录，再安排下一次单次刷新。
+const POLL_INTERVAL = 2000
+
+export default {
+  name: 'epx-wiki-intake',
+  props: {
+    wikiId: { type: String, default: '' },
+    metaId: { type: String, default: 'FM_AI_WIKI' }
+  },
+  data () {
+    // 暂存位置跟列表一起回：它按源类型算，前端自己拼一遍迟早和后端算的不一样
+    return {
+      loading: false,
+      rows: [],
+      stash: '暂存区',
+      // 多选时 el-upload 会对每个文件各调一次 http-request，所以这里自己数着：
+      // 全部落地之后再提示一次、刷一次列表。每个文件弹一个 toast、刷一次表格的话，
+      // 传十个就是十次闪屏，而且中间几次刷新拿到的还是不全的列表
+      // 已选但还没提交的文件。一批要一起发，所以自己收着，不用 el-upload 的自动上传
+      picked: [],
+      uploading: false,
+      pollingTimer: null,
+      // 按入库记录保存“生成的页”展开状态。轮询会替换 rows，不能把状态挂在行对象上。
+      expandedPages: {},
+      modeLabels: {},
+      stateLabels: {},
+      STATE_TYPE,
+      ICON,
+      MAX_FILES
+    }
+  },
+  watch: {
+    wikiId: 'load'
+  },
+  created () {
+    this.load()
+    codeLabelsAll(this.$http, { mode: 'FM_AI_WIKI_INTAKE_MODE', state: 'FM_AI_WIKI_INTAKE_STATE' })
+      .then(m => {
+        this.modeLabels = m.mode
+        this.stateLabels = m.state
+      })
+  },
+  beforeUnmount () {
+    this.stopPolling()
+  },
+  computed: {
+    runningRows () {
+      return this.rows.filter(row => row.state === 'run')
+    },
+    hasRunningRows () {
+      return this.runningRows.length > 0
+    }
+  },
+  methods: {
+    load (silent) {
+      if (!this.wikiId) return
+      if (!silent) this.loading = true
+      this.$http.get({ action: 'intakes', entityId: this.metaId, wikiId: this.wikiId })
+        .then(d => {
+          this.rows = (d && d.intakes) || []
+          this.stash = (d && d.stash) || '暂存区'
+          this.syncPolling()
+        })
+        .catch(() => {
+          this.rows = []
+          this.stopPolling()
+        })
+        .finally(() => { if (!silent) this.loading = false })
+    },
+
+    syncPolling () {
+      if (!this.hasRunningRows) {
+        this.stopPolling()
+        return
+      }
+      // 同一时刻只保留一个待执行定时器。定时器触发后先清空句柄，等本次请求响应并
+      // 更新 rows，再由 syncPolling 判断是否仍需下一轮。
+      if (this.pollingTimer) return
+      this.pollingTimer = window.setTimeout(() => {
+        this.pollingTimer = null
+        this.load(true)
+      }, POLL_INTERVAL)
+    },
+
+    stopPolling () {
+      if (this.pollingTimer) window.clearTimeout(this.pollingTimer)
+      this.pollingTimer = null
+    },
+
+    pagesOf (row) {
+      return (row.pages || '').split(',').map(s => s.trim()).filter(Boolean)
+    },
+
+    togglePages (row) {
+      this.$set(this.expandedPages, row.id, !this.expandedPages[row.id])
+    },
+
+    /** 只有 AI 生成记录才能原位重跑；原文件清理后已经没有输入，入口必须隐藏。 */
+    canRegenerate (row) {
+      return row.intakeMode === 'wiki' && row.state === 'done' && row.purged !== '1'
+    },
+
+    size (bytes) {
+      const n = Number(bytes) || 0
+      if (n < 1024) return n + ' B'
+      if (n < 1024 * 1024) return (n / 1024).toFixed(1) + ' KB'
+      return (n / 1024 / 1024).toFixed(1) + ' MB'
+    },
+
+    onExceed () {
+      this.$message.warning('一次最多选 ' + MAX_FILES + ' 个文件，分批传')
+    },
+
+    /** 选择/移除都走这里：el-upload 的 fileList 是它自己维护的，这里只跟着同步一份。 */
+    onPick (file, fileList) {
+      this.picked = fileList
+    },
+
+    /**
+     * 一次提交整批。
+     *
+     * <p>平台 http 层的 formData 模式对数组会把每一项用同一个字段名 append 进去，
+     * 所以 file 传数组就是一个请求里的多个 part，后端按 getMultiFileMap 全取出来、
+     * 落成<strong>一条</strong>入库记录。
+     */
+    doUpload () {
+      const files = this.picked.map(f => f.raw || f).filter(Boolean)
+      if (!files.length) return
+      const over = files.find(f => f.size > MAX_MB * 1024 * 1024)
+      if (over) {
+        this.$message.error('「' + over.name + '」超过 ' + MAX_MB + 'MB。太大的文档拆出来的页也没法看，先自己拆一下')
+        return
+      }
+      this.uploading = true
+      this.$http.update(
+        { action: 'uploadRaw', entityId: this.metaId, wikiId: this.wikiId, file: files },
+        { requestType: 'formData' })
+        .then(d => {
+          this.$message.success((d && d.message) || '已上传')
+          this.picked = []
+          this.load()
+        })
+        .catch(e => this.$message.error((e && e.message) || '上传失败'))
+        .finally(() => { this.uploading = false })
+    },
+
+    /**
+     * 处理方式由人当场选，没有默认。
+     *
+     * <p>同一份文件按什么方式切，取决于它本身的结构：markdown 有标题就按标题，
+     * Word/PDF 转出来的文本一个 # 都没有、只能靠 AI 判语义，而结构混乱的干脆整篇一页。
+     * 替人默认一种的话，选错的代价是整批页要删回去重来。
+     */
+    run (row, mode) {
+      if (mode === 'wiki') return this.generate(row)
+      this.loading = true
+      if (mode === 'ai') this.$message.info('AI 拆页要调一次模型，稍等几秒')
+      return this.$http.update({
+        action: 'processIntake', entityId: this.metaId, intakeId: row.id, intakeMode: mode
+      }).then(d => {
+        this.$message.success((d && d.message) || '已生成草稿')
+        this.load()
+        this.$emit('changed')
+      }).catch(e => {
+        this.$message.error((e && e.message) || '处理失败')
+        this.load()
+      }).finally(() => { this.loading = false })
+    },
+
+    /**
+     * AI 生成目录与内容。
+     *
+     * 与「AI 按语义拆页」的区别：拆页只把这份文件切成几页；这条是让 Beaver 的生成器
+     * 规划一套目录树、逐页写内容、再逐页验收，完成后统一发布并更新索引。
+     * 同一条入库记录再次生成时，后端会原位更新上次登记的页面，不会复制出一套重名页。
+     */
+    generate (row) {
+      const regenerating = this.canRegenerate(row)
+      this.$prompt((regenerating ? '会原位更新这条记录上次生成的页面，不会复制一套重名页。' : '') +
+        '会调模型逐页生成，每页一次，完成后自动发布并纳入索引。' +
+        '主题用于告诉模型「这是什么的文档」。',
+      regenerating ? '重新 AI 生成' : 'AI 生成目录与内容', {
+        confirmButtonText: regenerating ? '重新生成' : '开始生成',
+        cancelButtonText: '取消',
+        inputPlaceholder: '例如：实施交付手册（留空则用空间名）'
+      }).then(({ value }) => {
+        row.state = 'run'
+        row.note = '任务已开始，正在解析上传材料…'
+        this.syncPolling()
+        return this.$http.update({
+          action: 'generateWiki', entityId: this.metaId, intakeId: row.id, subject: (value || '').trim()
+        }).then(d => {
+          this.showGenerationResult(d)
+          this.load()
+          this.$emit('changed')
+        }).catch(e => {
+          this.$message.error((e && e.message) || '生成失败')
+          this.load()
+        }).finally(() => { this.load(true) })
+      }).catch(() => {})
+    },
+
+    /**
+     * HTTP 成功只代表请求跑完，不代表整套 Wiki 验收通过。
+     *
+     * passed=false 时后端仍会发布已经成功落成的页面，所以用警告而不是笼统报错，
+     * 并把未完成页与未解析输入分组列出来，方便只重试缺失部分。
+     */
+    showGenerationResult (result) {
+      const data = result || {}
+      if (data.passed !== false) {
+        this.$message({ type: 'success', message: data.message || '生成完成', duration: 5000, showClose: true })
+        return
+      }
+      const inputFailed = Array.isArray(data.inputFailed) ? data.inputFailed : []
+      const inputMissing = new Set(inputFailed.map(item => '输入材料：' + item))
+      const missing = (Array.isArray(data.missing) ? data.missing : [])
+        .filter(item => !inputMissing.has(String(item)))
+      const h = this.$createElement
+      const sections = [h('p', data.message || '部分内容未生成，请检查后重试')]
+      if (missing.length) {
+        sections.push(h('strong', '未完成项'))
+        sections.push(h('ul', missing.map(item => h('li', String(item)))))
+      }
+      if (inputFailed.length) {
+        sections.push(h('strong', '未解析输入'))
+        sections.push(h('ul', inputFailed.map(item => h('li', String(item)))))
+      }
+      this.$msgbox({
+        title: 'AI 生成未完全通过',
+        message: h('div', sections),
+        type: 'warning',
+        confirmButtonText: '知道了'
+      }).catch(() => {})
+    },
+
+    purge (row) {
+      this.$confirm('删掉暂存区里的原始文件，这条入库记录保留。生成的页不受影响。', '清理原文件', {
+        type: 'warning', confirmButtonText: '清理', cancelButtonText: '取消'
+      }).then(() => {
+        return this.$http.update({ action: 'purgeIntake', entityId: this.metaId, intakeId: row.id })
+          .then(d => {
+            this.$message.success((d && d.message) || '已清理')
+            this.load()
+          })
+          .catch(e => this.$message.error((e && e.message) || '清理失败'))
+      }).catch(() => {})
+    },
+
+    drop (row) {
+      this.$confirm('记录删了就没法再追溯这几个页是从哪个文件生成的。确定删除？', '删除入库记录', {
+        type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消', confirmButtonClass: 'el-button--danger'
+      }).then(() => {
+        return this.$http.update({ action: 'dropIntake', entityId: this.metaId, intakeId: row.id })
+          .then(d => {
+            this.$message.success((d && d.message) || '已删除')
+            this.load()
+          })
+          .catch(e => this.$message.error((e && e.message) || '删除失败'))
+      }).catch(() => {})
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@include b(wiki-intake) {
+  padding: 16px;
+  overflow-y: auto;
+  @include scroll-bar;
+
+  @include e(tip) {
+    margin-bottom: 16px;
+  }
+
+  @include e(progress) {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 12px;
+    padding: 10px 12px;
+    border: 1px solid rgba(var(--color-primary), .3);
+    border-radius: var(--border-radius);
+    background: rgba(var(--color-primary), .08);
+    font-size: $--font-size-extra-small;
+    line-height: 1.6;
+    color: var(--color-text-secondary);
+
+    i {
+      font-size: 20px;
+      color: rgb(var(--color-primary));
+    }
+
+    b {
+      color: var(--color-text-primary);
+    }
+  }
+
+  @include e(h) {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
+    font-size: $--font-size-base;
+    font-weight: 600;
+    color: var(--color-text-title);
+
+    .sub {
+      font-size: $--font-size-extra-small;
+      font-weight: 400;
+      color: var(--color-text-assistant);
+    }
+
+    .r {
+      margin-left: auto;
+    }
+  }
+
+  @include e(nm) {
+    color: var(--color-text-title);
+  }
+
+  @include e(sub) {
+    font-size: $--font-size-extra-small;
+    color: var(--color-text-assistant);
+    line-height: 1.5;
+  }
+
+  @include e(pages-toggle) {
+    i {
+      margin-left: 3px;
+    }
+  }
+
+  @include e(pages-list) {
+    max-height: 180px;
+    overflow-y: auto;
+    padding-left: 8px;
+    @include scroll-bar;
+  }
+
+  @include e(del) {
+    color: $--color-danger;
+  }
+}
+</style>

package/src/components/wiki-workbench/WikiJobs.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="epx-wiki-jobs" v-loading="loading">
+    <div class="epx-wiki-jobs__h">
+      任务记录
+      <span class="sub">同步 / 索引 / 体检 / 发布 / AI 生成</span>
+      <el-button type="text" class="r" @click="load">刷新</el-button>
+    </div>
+    <el-table :data="rows" size="small" :empty-text="emptyText">
+      <el-table-column label="时间" width="160">
+        <template v-slot="s">{{ s.row.startTime || '—' }}</template>
+      </el-table-column>
+      <el-table-column label="类型" width="80">
+        <template v-slot="s">{{ typeLabels[s.row.jobType] || s.row.jobType }}</template>
+      </el-table-column>
+      <el-table-column label="结果" min-width="200" show-overflow-tooltip>
+        <template v-slot="s">{{ s.row.result || s.row.errorMessage || '—' }}</template>
+      </el-table-column>
+      <el-table-column label="耗时" width="90" align="right">
+        <template v-slot="s">{{ cost(s.row) }}</template>
+      </el-table-column>
+      <el-table-column label="状态" width="90">
+        <template v-slot="s">
+          <el-tag :type="STATE_TYPE[s.row.state] || 'info'" size="small">
+            {{ stateLabels[s.row.state] || s.row.state }}
+          </el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      class="epx-wiki-jobs__pager"
+      layout="total, sizes, prev, pager, next"
+      :current-page="page"
+      :page-size="pageSize"
+      :page-sizes="PAGE_SIZES"
+      :total="total"
+      @current-change="changePage"
+      @size-change="changePageSize"
+    ></el-pagination>
+  </div>
+</template>
+
+<script>
+import { codeLabelsAll } from './codes'
+
+/**
+ * 工作台「任务」页签：这个空间跑过的同步 / 索引 / 体检 / 发布 / AI 生成。
+ *
+ * 独立成组件而不是塞进工作台：它只做「取一张表、画一张表」，
+ * 和正文编辑、目录管理没有任何共享状态。
+ */
+// 类型与状态的中文名读代码表（FM_AI_WIKI_JOB_TYPE / _STATE），不在这里抄第二份。
+// 颜色不在代码表里，那是展示口径，留在组件里
+const STATE_TYPE = { success: 'success', failed: 'danger', running: 'primary', pending: 'info' }
+const PAGE_SIZES = [10, 20, 50]
+
+export default {
+  name: 'epx-wiki-jobs',
+  props: {
+    wikiId: { type: String, default: '' },
+    metaId: { type: String, default: 'FM_AI_WIKI' }
+  },
+  data () {
+    return {
+      loading: false,
+      rows: [],
+      page: 1,
+      pageSize: 10,
+      total: 0,
+      typeLabels: {},
+      stateLabels: {},
+      STATE_TYPE,
+      PAGE_SIZES
+    }
+  },
+  computed: {
+    emptyText () {
+      return this.wikiId ? '还没有跑过任务。点「同步远端」「AI 生成」或「体检」试试' : '先选一个空间'
+    }
+  },
+  watch: {
+    wikiId: 'resetAndLoad'
+  },
+  created () {
+    this.load()
+    codeLabelsAll(this.$http, { type: 'FM_AI_WIKI_JOB_TYPE', state: 'FM_AI_WIKI_JOB_STATE' })
+      .then(m => {
+        this.typeLabels = m.type
+        this.stateLabels = m.state
+      })
+  },
+  methods: {
+    load () {
+      if (!this.wikiId) return
+      this.loading = true
+      this.$http.get({
+        action: 'jobLog',
+        entityId: this.metaId,
+        wikiId: this.wikiId,
+        page: this.page,
+        pageSize: this.pageSize
+      })
+        .then(d => {
+          this.rows = (d && d.jobs) || []
+          this.total = Number(d && d.total) || 0
+        })
+        .catch(() => {
+          this.rows = []
+          this.total = 0
+        })
+        .finally(() => { this.loading = false })
+    },
+
+    resetAndLoad () {
+      this.page = 1
+      this.load()
+    },
+
+    changePage (page) {
+      this.page = page
+      this.load()
+    },
+
+    changePageSize (size) {
+      this.pageSize = size
+      this.page = 1
+      this.load()
+    },
+
+    /**
+     * 耗时按起止时间算。
+     *
+     * 后端不存耗时字段：存了就要在每条链路上记得写，漏一处就是一列空白；
+     * 起止时间本来就得记，减一下即可。
+     */
+    cost (row) {
+      const a = Date.parse((row.startTime || '').replace(/-/g, '/'))
+      const b = Date.parse((row.endTime || '').replace(/-/g, '/'))
+      if (!a || !b || b < a) return '—'
+      const ms = b - a
+      return ms < 1000 ? ms + 'ms' : (ms / 1000).toFixed(1) + 's'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@include b(wiki-jobs) {
+  padding: 16px;
+
+  @include e(h) {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
+    font-size: $--font-size-base;
+    font-weight: 600;
+    color: var(--color-text-title);
+
+    .sub {
+      font-size: $--font-size-extra-small;
+      font-weight: 400;
+      color: var(--color-text-assistant);
+    }
+
+    .r {
+      margin-left: auto;
+    }
+  }
+
+  @include e(pager) {
+    margin-top: 12px;
+    text-align: right;
+  }
+}
+</style>