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

package/src/views/WikiBinding.vue

@@ -0,0 +1,740 @@
+<template>
+  <div class="wiki-binding" v-loading="loading">
+    <!-- 未绑定：虚线框 + 大图标 + 两条明确的路，与设计稿 .bindbox 一致。
+         不给一个空下拉——「一个都没有」和「没加载出来」长得一模一样 -->
+    <div v-if="!bound" class="wiki-binding__bindbox">
+      <span class="wiki-binding__bindbox-ic">📚</span>
+      <span class="wiki-binding__bindbox-title">还没有绑定 Wiki 空间</span>
+      <span class="wiki-binding__bindbox-desc">
+        绑定之后，这个智能体回答时会去空间里检索，并在答案里给出<b>可点开原文的引用</b>。
+        不绑定也能问答，但答案没有出处，用户无法查证。
+      </span>
+      <span class="wiki-binding__bindbox-acts">
+        <el-button type="primary" size="small" @click="openPicker">
+          选择已有空间<template v-if="usableCount">（{{ usableCount }} 个可选）</template>
+        </el-button>
+        <el-button size="small" @click="goCreate">＋ 新建一个空间</el-button>
+      </span>
+      <span v-if="!spaces.length" class="wiki-binding__bindbox-warn">
+        当前还没有任何 Wiki 空间，先新建一个。
+      </span>
+    </div>
+
+    <template v-else>
+      <!-- 已绑定时直接看空间内容，不是先看一屏配置。
+           配置是建的时候的事，之后每次进来想看的是「这个空间里到底有什么」。
+           空间名与「配置」按钮都放进站点自带的顶栏——外层再起一条信息栏就重复了 -->
+      <div v-show="view === 'content'" ref="content" class="wiki-binding__content" :style="contentStyle">
+        <epx-wiki-site ref="wikiSite" embedded :space-id="space.ID" :allow-import="false">
+          <template v-slot:ops>
+            <el-button size="small" @click="view = 'intake'">⬆ 上传原始文件</el-button>
+            <el-button size="small" @click="view = 'config'">⚙ 配置</el-button>
+          </template>
+        </epx-wiki-site>
+      </div>
+
+      <!-- 空空间要给下一步：没有页时问答检索不到东西，答案也不会有引用 -->
+      <div v-if="view === 'content' && !space.PAGES" class="wiki-binding__warn">
+        <b>这个空间还没有页</b>，现在问答检索不到任何内容，答案也不会有引用。下一步：{{ nextStep }}。
+      </div>
+
+      <!-- 配置态 -->
+      <template v-if="view === 'config'">
+        <div class="wiki-binding__card">
+          <div class="wiki-binding__card-head">
+            绑定的空间
+            <span class="wiki-binding__sub">一个智能体只能绑一个空间</span>
+            <!-- 返回与高级设置并排放在标题行右侧：单给「返回」起一行，
+                 白占一整条却只放一个链接 -->
+            <span class="wiki-binding__head-ops">
+              <el-button type="primary" link @click="view = 'content'">← 返回内容</el-button>
+              <el-button type="primary" link @click="goAdvanced">⚙ 高级设置</el-button>
+            </span>
+          </div>
+          <div class="wiki-binding__card-body wiki-binding__boundcard">
+            <span class="wiki-binding__boundcard-avt">📚</span>
+            <div class="wiki-binding__boundcard-body">
+              <div class="wiki-binding__boundcard-nm">{{ space.NAME }}</div>
+              <div class="wiki-binding__boundcard-kv">
+                <span>空间编码 <b>{{ space.CODE }}</b></span>
+                <span>源类型 <b>{{ sourceName }}</b></span>
+                <span>页数 <b>{{ space.PAGES || 0 }}</b></span>
+                <span v-if="space.LAST_SYNC_TIME">最后同步 <b>{{ space.LAST_SYNC_TIME }}</b></span>
+              </div>
+            </div>
+            <div class="wiki-binding__boundcard-acts">
+              <el-button size="small" @click="openPicker">换绑</el-button>
+              <el-button size="small" class="wiki-binding__danger" @click="unbind">解绑</el-button>
+            </div>
+          </div>
+        </div>
+
+        <div class="wiki-binding__card">
+          <div class="wiki-binding__card-head">
+            检索与引用
+            <span class="wiki-binding__sub">决定这个智能体怎么用这个空间</span>
+          </div>
+          <!-- 两列 + label 左对齐带冒号，与相邻页签的 add-form-item 一个形状。
+               原来是 label 在上、控件在下的竖排，在这一排页签里只有它长这样 -->
+          <div class="wiki-binding__card-body">
+            <el-form label-width="110px" label-position="right" size="small">
+              <el-row :gutter="20">
+                <el-col :span="12">
+                  <el-form-item label="可引用范围：">
+                    <el-select v-model="form.scope" clearable placeholder="全部页" @change="saveField('WIKI_SCOPE', form.scope)">
+                      <el-option v-for="d in dirs" :key="d" :value="d" :label="'只用 ' + d"></el-option>
+                    </el-select>
+                    <div class="wiki-binding__hint">
+                      收窄到某个目录，是「同一空间的子集」，不违反一个智能体只绑一个空间
+                    </div>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="检索方式：">
+                    <el-select v-model="form.retrieval" @change="saveField('WIKI_RETRIEVAL', form.retrieval)">
+                      <el-option value="exact" label="仅关键词精确匹配"></el-option>
+                      <el-option value="auto" label="自动（关键词 + 语义并行合并）· 二期开放" disabled></el-option>
+                      <el-option value="semantic" label="仅语义召回 · 二期开放" disabled></el-option>
+                    </el-select>
+                    <div class="wiki-binding__hint">
+                      一期只有关键词一条路，命中不了就是「没有页覆盖」，会落成待办。置灰的两项二期开放
+                    </div>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </div>
+      </template>
+
+      <!-- 上传与处理是应用内的一个工作视图，不用弹窗遮住正文。 -->
+      <div v-if="view === 'intake'" class="wiki-binding__card">
+        <div class="wiki-binding__card-head">
+          上传原始文件
+          <span class="wiki-binding__sub">上传、处理及生成进度</span>
+          <span class="wiki-binding__head-ops">
+            <el-button type="text" @click="view = 'content'">← 返回内容</el-button>
+          </span>
+        </div>
+        <wiki-intake
+          :wiki-id="space.ID"
+          @open="openGeneratedPage"
+          @changed="refreshWiki"
+        ></wiki-intake>
+      </div>
+    </template>
+
+    <!-- 空间选择器。列出所有空间，包括当前不可选的——并说明原因。
+         隐藏它们只会让人以为「我建的空间怎么没了」 -->
+    <el-dialog
+      :title="bound ? '换绑 Wiki 空间' : '选择 Wiki 空间'"
+      v-model="pickerVisible"
+      width="600px"
+      append-to-body
+    >
+      <div class="wiki-binding__pick-tip">
+        列出所有空间，包括当前不可选的——并说明原因。
+      </div>
+      <div class="wiki-binding__spacepick">
+        <button
+          v-for="s in spaces"
+          :key="s.ID"
+          :class="['wiki-binding__pick-row', { 'is-on': pick === s.ID, 'is-off': !usable(s).ok }]"
+          @click="usable(s).ok && (pick = s.ID)"
+        >
+          <span class="wiki-binding__pick-rd"></span>
+          <span class="wiki-binding__pick-info">
+            <span class="wiki-binding__pick-nm">
+              {{ s.NAME }}
+              <el-tag v-if="s.ID === space.ID" size="small">当前</el-tag>
+            </span>
+            <span class="wiki-binding__pick-meta">
+              <span>{{ s.CODE }}</span>
+              <span>{{ s.PAGES || 0 }} 个页</span>
+            </span>
+            <span v-if="!usable(s).ok" class="wiki-binding__pick-why">
+              不可选：{{ usable(s).why }}
+            </span>
+          </span>
+        </button>
+      </div>
+      <div v-if="bound" class="wiki-binding__pick-tip wiki-binding__pick-tip--foot">
+        换绑<b>不会删任何东西</b>：新空间的内容立即生效；历史回答里的引用仍指向旧空间的那一版，照样打得开。
+      </div>
+      <template v-slot:footer><span>
+        <el-button size="small" @click="pickerVisible = false">取消</el-button>
+        <el-button type="primary" size="small" :disabled="!pick" @click="bind">
+          {{ bound ? '确认换绑' : '确认绑定' }}
+        </el-button>
+      </span></template>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+// 与后端 WikiController 的 @RequestMapping 对齐；平台接口统一挂在 /epxing-frame/api 下
+import component from '@epxing/core/src/mixins/component'
+import { WikiIntake } from '@epxing/business/src/components/wiki-workbench'
+// 后端是平台 action（FM_ACTION 上注册的 WikiAction），地址由 $http 拼
+const WIKI_META = 'FM_AI_WIKI'
+
+const SOURCE_NAME = { git: 'Git', db: '数据库', oss: '对象存储' }
+
+// 兜底的空间新建 / 编辑页配置 ID（gen_wiki_pages.py 生成，见 FM_AI_WIKI-页面配置.sql）。
+// 正式取值走 $configs，这里只是没配时的默认，免得一没配就变成点了没反应
+const SPACE_ADD_PAGE_ID = '2EC43DD61E4312F8A25156287988C063'
+const SPACE_EDIT_PAGE_ID = 'F8DE4F345B29A697DE50F2EA5D313E58'
+
+export default {
+  name: 'epx-wiki-binding',
+  components: { WikiIntake },
+  mixins: [component],
+  // 配置点默认值，设计器面板里读的也是这两个
+  spaceAddPageId: SPACE_ADD_PAGE_ID,
+  spaceEditPageId: SPACE_EDIT_PAGE_ID,
+  data () {
+    return {
+      loading: false,
+      space: {},
+      spaces: [],
+      dirs: [],
+      pick: '',
+      pickerVisible: false,
+      // 已绑定时默认看内容：配置是建的时候的事，之后每次进来想看的是
+      // 「这个空间里到底有什么」。配置收进右上角按钮
+      view: 'content',
+      contentHeight: 0,
+      form: { scope: '', retrieval: 'exact' }
+    }
+  },
+  computed: {
+    /**
+     * 智能体 ID 来自表单主键：这个页签挂在「应用新增编辑」上，编辑的就是这条服务记录。
+     *
+     * <p>要从 `$query` 取，不是 `$route.query`。页面是配置驱动渲染的，
+     * 记录 ID 走的是平台的页面参数（entity-add-page 传下来的 `$query.id`），
+     * 地址栏上并没有它——取错地方的话 agentId 一直是空，`load()` 直接 return，
+     * 页面既不报错也没有数据，表现成「选择 wiki 的时候是空的」。
+     */
+    agentId () {
+      return this.$query.id || this.$pageParams?.id || this.$route.query.id || this.$route.params.id || ''
+    },
+    bound () {
+      return !!(this.space && this.space.ID)
+    },
+    contentStyle () {
+      return this.contentHeight ? { height: this.contentHeight + 'px' } : {}
+    },
+    /** 按钮上直接写清有几个能选，省得点开才发现一个都选不了。 */
+    usableCount () {
+      return this.spaces.filter(s => this.usable(s).ok).length
+    },
+    sourceName () {
+      return SOURCE_NAME[this.space.SOURCE_TYPE] || this.space.SOURCE_TYPE || '—'
+    },
+    nextStep () {
+      return this.space.SOURCE_TYPE === 'git' ? '同步 Git 远端把已有文档拉进来' : '上传原始文件或新建页'
+    },
+    /**
+     * 空间新建 / 编辑页。做成配置点是因为页面配置 ID 是环境数据：
+     * 换一套库这两个 ID 就变了，写死在组件里等于每换一个环境改一次代码。
+     */
+    spaceAddPageId () {
+      return this.$configs.spaceAddPageId || SPACE_ADD_PAGE_ID
+    },
+    spaceEditPageId () {
+      return this.$configs.spaceEditPageId || SPACE_EDIT_PAGE_ID
+    }
+  },
+  created () {
+    this.load()
+  },
+  watch: {
+    view (v) {
+      if (v === 'content') this.fitContent()
+    }
+  },
+  mounted () {
+    this.fitContent()
+    window.addEventListener('resize', this.fitContent)
+  },
+  beforeUnmount () {
+    window.removeEventListener('resize', this.fitContent)
+  },
+  methods: {
+    load () {
+      if (!this.agentId) return
+      this.loading = true
+      this.$http.get({ action: 'binding', entityId: WIKI_META, agentId: this.agentId })
+        .then(d => {
+          this.space = (d && d.space) || {}
+          this.spaces = (d && d.spaces) || []
+          this.dirs = (d && d.dirs) || []
+          this.form.scope = (d && d.scope) || ''
+          this.form.retrieval = (d && d.retrieval) || 'exact'
+        })
+        .catch(() => { this.space = {} })
+        .finally(() => {
+          this.loading = false
+          // 数据到位后元素才真正占上位置，这时候量才准
+          this.fitContent()
+        })
+    },
+
+    /**
+     * 这个空间现在能不能绑，不能的话为什么。
+     *
+     * <p>不可选的也列出来并说明原因——隐藏它们只会让人以为「我建的空间怎么没了」，
+     * 然后再去建一个同名的，两个空间的页开始分叉。
+     */
+    usable (s) {
+      if (!s) return { ok: false, why: '' }
+      if (s.STATUS === '0') return { ok: false, why: '空间已停用，先在空间设置里启用' }
+      return { ok: true, why: '' }
+    },
+
+    /**
+     * 让内容区正好填满视口剩下的部分。
+     *
+     * <p>按实测位置算，不用 calc(100vh - 常数)：那个常数取决于这个页签上方
+     * 有多少东西（页面标题栏、页签行、外层留白），而它随入口不同而变——
+     * 估小了下面白空一截，估大了溢出几像素就触发外层滚动，把顶栏一起滚走。
+     * 前者我估过 300，后者估过 150，两次都不对。位置只有量出来才是准的。
+     */
+    fitContent () {
+      this.$nextTick(() => {
+        const el = this.$refs.content
+        if (!el) return
+        const top = el.getBoundingClientRect().top
+        // 底部留 12px，别正好顶到边
+        this.contentHeight = Math.max(460, Math.floor(window.innerHeight - top - 12))
+      })
+    },
+
+    openPicker () {
+      // 打开时预选当前绑定的那个，换绑时才看得出「原来绑的是哪一个」
+      this.pick = this.space.ID || ''
+      this.pickerVisible = true
+    },
+
+    bind () {
+      if (!this.pick || this.pick === this.space.ID) {
+        this.pickerVisible = false
+        return
+      }
+      this.saveField('WIKI_ID', this.pick).then(() => {
+        this.pickerVisible = false
+        this.pick = ''
+        this.view = 'content'
+        this.load()
+      })
+    },
+
+    /**
+     * 解绑要二次确认。
+     *
+     * 解绑之后这个智能体的答案立刻不再带原文引用——这是使用者能直接感知的退化，
+     * 不该由一次误点触发。
+     */
+    unbind () {
+      this.$confirm(
+        '解绑后，这个智能体的回答将不再带原文引用。空间本身和里面的页不受影响。',
+        '解绑 Wiki 空间',
+        { type: 'warning', confirmButtonText: '解绑', cancelButtonText: '取消' }
+      ).then(() => this.saveField('WIKI_ID', '')).then(() => this.load()).catch(() => {})
+    },
+
+    /**
+     * 写回智能体上的一个字段。
+     *
+     * <p>实体保存的入参是 `entityId` + 平铺的 `bean.字段名`，不是 `metaId` + `data` 对象——
+     * 后者两处都错：`metaId` 不是 `$http` 认的键，拼出来的地址上没有对象段；
+     * `data` 这一层包装后端也收不到，等于提交了一条没有字段的记录。
+     * 与平台表单（AddForm.submitForm）保持同一个形状。
+     */
+    saveField (field, value) {
+      return this.$http.update({
+        action: 'update',
+        entityId: 'FM_SERVICE',
+        'bean.ID': this.agentId,
+        ['bean.' + field]: value == null ? '' : value
+      }).then(() => {
+        this.$message.success('已保存')
+      })
+    },
+
+    /**
+     * 新建空间是控制台那边的完整表单，不在这里重造一份——两份表单必然漂移。
+     *
+     * 走 goPage 打开页面配置，不是 window.open 拼地址：`#/wiki/space/new` 这种路径
+     * 在 router 里根本没有注册（只有 `/wiki/:client/:system/:wiki/:path*` 和 `/wiki/view`），
+     * 点下去是一个空白页，而且从界面上完全看不出是地址错了。
+     */
+    goCreate () {
+      this.goPage({ metaId: 'FM_AI_WIKI', pageId: this.spaceAddPageId, openMode: '3', num: 0 })
+    },
+
+    /** 高级设置＝空间配置表单，与控制台「编辑配置」是同一个页面，不是另做一份。 */
+    goAdvanced () {
+      this.goPage(
+        { metaId: 'FM_AI_WIKI', pageId: this.spaceEditPageId, pageType: 'EDIT', openMode: '3', num: 0 },
+        { ID: this.space.ID }
+      )
+    },
+
+    /** 生成完成后刷新嵌入站点，让新页面立即出现在目录中。 */
+    refreshWiki () {
+      const site = this.$refs.wikiSite
+      if (!site) return
+      site.loadSpace().then(() => {
+        if (site.path) site.loadPage(site.path)
+        else site.openFirst()
+      })
+    },
+
+    /** 从入库记录点击生成页时，回到内容视图并打开同一页。 */
+    openGeneratedPage (path) {
+      this.view = 'content'
+      this.$nextTick(() => {
+        const site = this.$refs.wikiSite
+        if (!site) return
+        site.loadSpace().then(() => site.open(path))
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.wiki-binding {
+  padding: var(--padding-large) 0;
+
+  // 未绑定态：虚线框 + 居中，与设计稿 .bindbox 一致。
+  // 虚线是有意的——它表示「这里还空着，等你填」，实线框看着像一块已经配好的内容
+  &__bindbox {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    padding: 22px 24px;
+    border: 1px dashed #C9CDD4;
+    border-radius: var(--border-radius);
+    background: #F7F8FA;
+    text-align: center;
+  }
+
+  &__bindbox-ic {
+    font-size: 32px;
+    opacity: .5;
+  }
+
+  &__bindbox-title {
+    font-size: $--font-size-medium;
+    font-weight: 600;
+    color: var(--color-text-title);
+  }
+
+  &__bindbox-desc {
+    // 限宽：一行拉满屏幕的说明文字没人会读完
+    max-width: 560px;
+    font-size: $--font-size-small;
+    color: var(--color-text-secondary);
+    line-height: 1.7;
+  }
+
+  &__bindbox-acts {
+    display: flex;
+    gap: 10px;
+    margin-top: 4px;
+  }
+
+  &__bindbox-warn {
+    font-size: $--font-size-extra-small;
+    color: var(--color-warning);
+  }
+
+  // 嵌入的站点内容。
+  //
+  // 高度按视口算而不是写死一个数：写死的话大屏白空半屏、小屏只剩半截。
+  // 减掉的 150px 是这个页签上方固定占掉的部分——页面标题栏约 52 + 页签行约 53 +
+  // 上下留白，量出来的，不是拍脑袋。原来减 300 是估的，于是内容区下面白空一大截。
+  //
+  // 外层页签容器不是 flex，所以只能这么算；min-height 兜住极端矮屏——
+  // 太矮的话目录树和正文都没法看。
+  &__content {
+    // 高度由 fitContent 按实测位置写进行内样式；这里只兜底，
+    // 免得 JS 还没跑到时闪一下零高度
+    min-height: 460px;
+    background: #fff;
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    margin-bottom: var(--margin-large);
+  }
+
+  // 已绑定态：图标 / 信息 / 右侧竖排操作，与设计稿 .boundcard 一致
+  &__boundcard {
+    display: flex;
+    gap: 16px;
+    align-items: flex-start;
+  }
+
+  &__boundcard-avt {
+    width: 38px;
+    height: 38px;
+    flex: none;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 19px;
+    @include bg_color_primary(.1);
+  }
+
+  &__boundcard-body {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__boundcard-nm {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: $--font-size-base;
+    font-weight: 600;
+    color: var(--color-text-title);
+  }
+
+  &__boundcard-kv {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px 22px;
+    margin-top: 8px;
+    font-size: $--font-size-small;
+    color: var(--color-text-assistant);
+
+    b {
+      color: var(--color-text-secondary);
+      font-weight: 400;
+    }
+  }
+
+  &__boundcard-acts {
+    flex: none;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 6px;
+  }
+
+  // 空间选择器：单选列表而不是下拉。下拉塞不下「几个页 / 为什么不可选」这些
+  // 判断依据，而选空间恰恰要靠它们
+  &__spacepick {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #E3E3E3;
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    max-height: 320px;
+    overflow-y: auto;
+    @include scroll-bar;
+  }
+
+  &__pick-row {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    width: 100%;
+    padding: 12px 14px;
+    border: 0;
+    border-bottom: 1px solid #E3E3E3;
+    background: #fff;
+    text-align: left;
+    cursor: pointer;
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    &:hover:not(.is-off) {
+      @include bg_color_primary(.06);
+    }
+
+    // 选中态用左侧主题色条，与列表行选中的既有做法一致
+    &.is-on {
+      @include bg_color_primary(.08);
+      @include border_color_primary;
+      border-left: 3px solid;
+      padding-left: 11px;
+    }
+
+    &.is-off {
+      background: #F7F8FA;
+      cursor: not-allowed;
+      opacity: .75;
+    }
+  }
+
+  &__pick-rd {
+    width: 15px;
+    height: 15px;
+    flex: none;
+    border-radius: 50%;
+    border: 1px solid #C9CDD4;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__pick-row.is-on &__pick-rd {
+    @include border_color_primary;
+
+    &::after {
+      content: '';
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      @include bg_color_primary;
+    }
+  }
+
+  &__pick-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__pick-nm {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: $--font-size-small;
+    font-weight: 600;
+    color: var(--color-text-title);
+  }
+
+  &__pick-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-top: 3px;
+    font-size: $--font-size-extra-small;
+    color: var(--color-text-assistant);
+  }
+
+  &__pick-why {
+    display: block;
+    margin-top: 3px;
+    font-size: $--font-size-extra-small;
+    color: var(--color-warning);
+  }
+
+  &__pick-tip {
+    margin-bottom: 12px;
+    font-size: $--font-size-small;
+    color: var(--color-text-secondary);
+    line-height: 1.7;
+
+    &--foot {
+      margin: 14px 0 0;
+    }
+  }
+
+  &__opt-note {
+    float: right;
+    color: var(--color-text-assistant);
+    font-size: $--font-size-extra-small;
+  }
+
+  &__card {
+    background: #fff;
+    border-radius: var(--border-radius);
+    margin-bottom: var(--margin-large);
+  }
+
+  // 与平台表单卡片（add-form-item）同一套：16px 标题 + 3px 主题色标记条 + 1px 分隔线。
+  // 这个页签夹在「应用服务」「记忆设置」等 add-form 页签中间，卡片长得不一样最扎眼
+  &__card-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 16px;
+    border-bottom: 1px solid #E3E3E3;
+    font-size: $--font-size-medium;
+    line-height: 36px;
+    color: var(--color-text-title);
+
+    &::before {
+      content: '';
+      width: 3px;
+      height: 16px;
+      border-radius: 2px;
+      @include bg_color_primary;
+    }
+  }
+
+  &__sub {
+    font-weight: 400;
+    font-size: $--font-size-extra-small;
+    color: var(--color-text-assistant);
+  }
+
+  &__head-ops {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    // el-button 之间默认没有间距，文字按钮挨在一起会读成一个词
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+  }
+
+  &__card-body {
+    padding: 16px 20px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  &__space {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__space-name {
+    font-size: $--font-size-base;
+    color: var(--color-text-title);
+    font-weight: 600;
+  }
+
+  &__space-meta {
+    margin-top: 6px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    font-size: $--font-size-extra-small;
+    color: var(--color-text-assistant);
+  }
+
+  &__danger {
+    color: $--color-danger;
+    border-color: #FAB6B6;
+  }
+
+  &__warn {
+    margin: 0 20px 16px;
+    padding: 10px 12px;
+    background: #FDF6EC;
+    color: #E6A23C;
+    border-radius: var(--border-radius);
+    font-size: $--font-size-small;
+  }
+
+  &__hint {
+    font-size: $--font-size-extra-small;
+    color: var(--color-text-assistant);
+    line-height: 1.6;
+  }
+}
+</style>