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

package/src/components/WikiSpaceList.vue

@@ -0,0 +1,270 @@
+<script>
+import EntityList from '@epxing/components/src/entity-list'
+
+const SRC_NAME = { git: 'Git', db: '数据库', oss: '对象存储' }
+const SRC_TAG = { git: '', db: 'info', oss: 'warning' }
+
+/**
+ * 单元格里的副行。
+ *
+ * 表格单元格是 el-table 的作用域插槽渲染的，scoped 样式的 data-v 属性在这里不可靠
+ * （ClientAdminList 同样的位置也是用内联样式绕开的），所以副行样式走内联 + CSS 变量：
+ * 令牌照样是令牌，只是不经过 scoped 那一层。
+ */
+const SUB_STYLE = {
+  // 字号在这套令牌里只有 SCSS 变量、没有 CSS 变量，内联样式取不到，所以直接写令牌值
+  fontSize: '12px',
+  color: 'var(--color-text-assistant)',
+  lineHeight: '1.5',
+  marginTop: '2px'
+}
+
+// 工作台页面配置 ID（gen_wiki_pages.py 生成）。走 $configs 可覆盖——
+// 页面配置 ID 是环境数据，换一套库就变
+const WORKBENCH_PAGE_ID = '8973567E2B0C19E20D577F22A980A2C7'
+
+export default {
+  name: 'epx-wiki-space-list',
+  extends: EntityList,
+  workbenchPageId: WORKBENCH_PAGE_ID,
+  computed: {
+    workbenchPageId () {
+      return this.$configs.workbenchPageId || WORKBENCH_PAGE_ID
+    }
+  },
+  data () {
+    return {
+      // 空间 ID → { pages, mounts }。这两个数不在 FM_AI_WIKI 上（页数数 FM_AI_WIKI_PAGE，
+      // 挂载数数 FM_SERVICE.WIKI_ID），由 stats 接口单独取，列表本身还是那张普通实体表
+      spaceStats: {}
+    }
+  },
+  watch: {
+    data: {
+      handler: 'loadStats',
+      immediate: true
+    }
+  },
+  methods: {
+    /**
+     * 取当前这一页的统计。
+     *
+     * 只取当前页的 ID，不取全量：翻到第 3 页时前两页的数字已经不在屏幕上了，
+     * 算它们纯属浪费。失败就让这两列显示「—」，不弹错——统计取不到不该挡住整张列表。
+     */
+    loadStats () {
+      const ids = (this.data || []).map(row => row.ID).filter(Boolean)
+      if (!ids.length) {
+        this.spaceStats = {}
+        return
+      }
+      this.$http.get({ action: 'stats', entityId: this.$metaId, wikiIds: ids.join(',') })
+        .then(d => { this.spaceStats = (d && d.stats) || {} })
+        .catch(() => { this.spaceStats = {} })
+    },
+
+    statOf (row, key) {
+      const stat = this.spaceStats[row.ID]
+      return stat && stat[key] != null ? stat[key] : null
+    },
+
+    /**
+     * 索引状态。
+     *
+     * 直接显示 INDEXED_REV 那串哈希对人没有意义——人要判断的是「这个空间现在能不能用」，
+     * 而那是三个状态：已索引、待重建、未同步。所以在这里把版本号翻译成状态。
+     * 停用与否是另一回事，单独一列，不混进来：一个停用的空间索引可能是好的。
+     */
+    indexState (row) {
+      if (!row.LAST_SYNC_TIME) return { text: '未同步', type: 'info' }
+      if (row.INDEXED_REV && row.INDEXED_REV === row.SOURCE_REV) return { text: '已索引', type: 'success' }
+      return { text: '待重建', type: 'warning' }
+    },
+
+    /**
+     * 地址一栏按源类型给不同的东西：三种源的「在哪儿」根本不是同一个概念。
+     *
+     * 外部源分主副两行而不是拼成一串：主行是「去哪台机器找」，副行是源内位置。
+     * 数据库源没有可配置的外部地址，只说明它是库内主存，不暴露内部物理表名。
+     */
+    address (row) {
+      if (row.SOURCE_TYPE === 'git') {
+        return { main: row.GIT_REMOTE || '—', sub: row.GIT_BRANCH ? '@' + row.GIT_BRANCH : '' }
+      }
+      if (row.SOURCE_TYPE === 'oss') {
+        return { main: [row.OSS_ENDPOINT, row.OSS_BUCKET].filter(Boolean).join(' / ') || '—', sub: row.OSS_PREFIX || '' }
+      }
+      return { main: '库内主存', sub: '' }
+    },
+
+    /**
+     * 分享空间站点地址。
+     *
+     * 复制的是站点首页地址；具体某一页的分享在站点里做——
+     * 在列表上分享的意图是「这个知识库你看一下」，不是「看这一段」。
+     */
+    share (row) {
+      const url = `${window.location.origin}${window.location.pathname}#/wiki/view?w=${encodeURIComponent(row.ID)}`
+      if (navigator.clipboard) {
+        navigator.clipboard.writeText(url)
+          .then(() => this.$message.success('链接已复制。对方需要有这个空间的查看权限才打得开。'))
+          .catch(() => this.$message.info(url))
+      } else {
+        this.$message.info(url)
+      }
+    },
+
+    /**
+     * 同步：把源侧的改动拉进来并重建索引。
+     *
+     * 走 WikiController 的 POST /sync，不是实体通用 action——FM_AI_WIKI 上没有注册
+     * 名为 sync 的 FM_ENTITY_API，按 commonAction 配下去只会得到一个「找不到接口」。
+     */
+    doSync (row) {
+      if (row.STATUS === '0') {
+        this.$message.warning('这个空间已停用，先启用再同步')
+        return
+      }
+      this.$http.update({ action: 'sync', entityId: this.$metaId, wikiId: row.ID })
+        .then(() => {
+          this.$message.success('同步已触发，完成后索引会自动重建')
+          this.reloadData()
+        }).catch(err => this.$message.error((err && err.message) || '同步失败'))
+    },
+
+    /**
+     * 进入空间＝打开 Wiki 站点（左侧目录树 + 正文预览），不是打开编辑表单。
+     *
+     * 这两件事在列表上看着都像「点开这个空间」，但意图完全不同：
+     * 「进入」是去读，改配置在「更多 → 编辑配置」。
+     *
+     * 走 /wiki/view?w= 这条不带客户/系统段的路由：从列表进来时上下文已在登录态里，
+     * 权限仍由接口按空间的 VIEW_ROLES 判定，不靠地址形状。
+     */
+    /**
+     * 进入空间＝打开工作台，不是站点。
+     *
+     * <p>两者是两个页面：站点（#/wiki/...）给读者，只读、地址可分享；
+     * 工作台在控制中心里，给维护者，带编辑、发布、同步、体检。
+     * 从管理列表点「进入」的人是来维护的，落到只读站点上就少了一半能做的事。
+     * 要把内容分享给别人看，用这一行的「分享」——那给的才是站点地址。
+     */
+    enter (row) {
+      if (row.STATUS === '0') {
+        this.$message.warning('这个空间已停用，先启用再进入')
+        return
+      }
+      this.goPage(
+        { metaId: this.$metaId, pageId: this.workbenchPageId, openMode: '3', num: 1 },
+        row
+      )
+    },
+
+    /**
+     * 只接管这一页真正特殊的几列，其余列一律交回平台默认渲染。
+     *
+     * 之前这里是整个覆写 render() 自己画一张 table，代价是把平台的查询区、按钮区、
+     * 表格样式和分页全丢了——页面于是和控制台其它列表长得完全不一样，
+     * 而且 listFields / searchFields / pageFlag 这些配置配了也不生效。
+     */
+    renderField (field, index) {
+      const cell = this.wikiCell(field.attriName)
+      if (!cell) return EntityList.options.methods.renderField.call(this, field, index)
+      return {
+        default: ({ row }) => <div class="epx-entity-list__table-cell">{cell(row)}</div>
+      }
+    },
+
+    /** 特殊列的渲染函数表。返回 undefined 表示这一列没什么特别的。 */
+    wikiCell (attriName) {
+      const map = {
+        // 名称与编码是一件事的两面（给人看的 / 给地址用的），拆成两列会让人以为是两个东西
+        NAME: row => [
+          <a style={{ fontWeight: '600', cursor: 'pointer' }} class="primary-color" onClick={() => this.enter(row)}>{row.NAME}</a>,
+          <div style={SUB_STYLE}>{row.CODE}</div>
+        ],
+        SOURCE_TYPE: row => (
+          <el-tag size="small" type={SRC_TAG[row.SOURCE_TYPE]}>
+            {SRC_NAME[row.SOURCE_TYPE] || row.SOURCE_TYPE || '—'}
+          </el-tag>
+        ),
+        // 地址列挂在 GIT_REMOTE 上：它是三种源里最长的那个，列宽按它撑开才不会挤
+        GIT_REMOTE: row => {
+          const addr = this.address(row)
+          return [
+            <div style={{ color: 'var(--color-text-secondary)', wordBreak: 'break-all' }}>{addr.main}</div>,
+            addr.sub ? <div style={SUB_STYLE}>{addr.sub}</div> : null
+          ]
+        },
+        // 页数与挂载挂在两个用不上的真字段上占位——平台的列必须对应一个 attriName。
+        // 值来自 stats 接口，与列表查询分开
+        INDEX_GENERATION: row => {
+          const n = this.statOf(row, 'pages')
+          return <span>{n == null ? '—' : n}</span>
+        },
+        DESIRED_REV: row => {
+          const n = this.statOf(row, 'mounts')
+          if (n == null) return <span>—</span>
+          // 未挂载要一眼看出来：一个空间建好了却没有智能体用它，通常是漏了绑定那一步
+          return n > 0
+            ? <span>{n} 个智能体</span>
+            : <span style={{ color: 'var(--color-text-assistant)' }}>未挂载</span>
+        },
+        INDEXED_REV: row => {
+          const state = this.indexState(row)
+          return <el-tag size="small" type={state.type}>{state.text}</el-tag>
+        },
+        LAST_SYNC_TIME: row => [
+          <div>{row.LAST_SYNC_TIME || '—'}</div>,
+          row.LAST_SYNC_NOTE
+            ? <div style={{ ...SUB_STYLE, color: this.indexState(row).type === 'warning' ? 'var(--color-text-secondary)' : 'var(--color-text-assistant)' }}>{row.LAST_SYNC_NOTE}</div>
+            : null
+        ],
+        STATUS: row => (
+          <el-tag size="small" type={row.STATUS === '0' ? 'info' : 'success'}>
+            {row.STATUS === '0' ? '停用' : '启用'}
+          </el-tag>
+        )
+      }
+      return map[attriName]
+    },
+
+    /**
+     * 操作列：进入 / 分享 平铺，其余收进「更多」。
+     *
+     * 进入、分享、同步写在组件里，是因为它们没有对应的实体 action 可配：前两个压根不碰后端，
+     * 同步走的是 WikiController 的 REST 端点。其余（编辑配置、删除……）一律读配置里的
+     * columnOperates 并交给 $handler，这样以后加一条改配置就行，不用动组件。
+     */
+    renderColumnOperates () {
+      return {
+        default: ({ row }) => {
+          const more = this.getShowColumnOperates(row)
+          return (
+            <div class="epx-entity-list__column-operates">
+              <el-button class="epx-entity-list__column-operate" type="text" size="small" onClick={() => this.enter(row)}>进入</el-button>
+              <el-button class="epx-entity-list__column-operate" type="text" size="small" onClick={() => this.share(row)}>分享</el-button>
+              <el-dropdown persistent={false} trigger="click" v-slots={{
+                dropdown: () => (<el-dropdown-menu>
+                  <el-dropdown-item onClick={() => this.doSync(row)}>同步</el-dropdown-item>
+                  {
+                    more.map(operate => (
+                      <el-dropdown-item key={operate.text} icon={operate.iconCls} onClick={() => this.$handler(operate, row)}>
+                        {operate.text}
+                      </el-dropdown-item>
+                    ))
+                  }
+                </el-dropdown-menu>)
+              }}>
+                <el-button class="epx-entity-list__column-operate" type="text" size="small">
+                  更多<i class="el-icon-arrow-down el-icon--right"></i>
+                </el-button>
+              </el-dropdown>
+            </div>
+          )
+        }
+      }
+    }
+  }
+}
+</script>