aegon-lv82 1.0.0

package/src/views/gen-ai/components/RecentReportsTable.vue

@@ -0,0 +1,974 @@
+<template>
+  <div ref="rootRef" class="recent-reports-table">
+    <el-table
+      ref="tableRef"
+      :data="reports"
+      :fit="true"
+      :max-height="tableMaxHeight"
+      table-layout="fixed"
+    >
+      <el-table-column
+        prop="name"
+        label="報告名稱"
+        min-width="240"
+        align="left"
+        header-align="left"
+        class-name="industry-col-name"
+      >
+        <template #default="{ row }">
+          <a
+            v-if="row.canOpen"
+            href="#"
+            class="industry-report-name industry-report-name__pill industry-report-name--link"
+            @click.prevent="$emit('open', row)"
+            >{{ row.name }}</a
+          >
+          <span v-else class="industry-report-name industry-report-name__pill">{{ row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="industry"
+        label="行業"
+        min-width="88"
+        align="left"
+        header-align="left"
+      />
+      <el-table-column prop="year" label="年份" min-width="80" align="left" header-align="left" />
+      <el-table-column prop="status" label="狀態" min-width="96" align="left" header-align="left" />
+      <el-table-column
+        prop="initiator"
+        label="發起人"
+        min-width="220"
+        class-name="industry-col-initiator"
+        align="left"
+        header-align="left"
+      />
+      <el-table-column
+        label="編輯"
+        min-width="360"
+        class-name="industry-col-editor"
+        align="left"
+        header-align="left"
+      >
+        <template #default="{ row }">
+          <div class="industry-editors">
+            <span class="industry-editors__text">{{ formatVisibleEditors(row) }}</span>
+            <el-popover
+              v-if="resolveEditors(row).length > EDITOR_PREVIEW_COUNT"
+              placement="bottom-start"
+              :width="320"
+              trigger="click"
+              :visible="isEditorsPopoverOpen(row.id)"
+              popper-class="recent-editors-popover"
+              @update:visible="(open: boolean) => setEditorsPopoverOpen(row.id, open)"
+            >
+              <template #reference>
+                <button
+                  type="button"
+                  class="industry-editors__more"
+                  title="查看全部編輯者"
+                  @click.stop
+                >
+                  ...
+                </button>
+              </template>
+              <div class="recent-editors-popover__panel">
+                <div class="recent-editors-popover__title">全部編輯者</div>
+                <table class="recent-editors-popover__table">
+                  <thead>
+                    <tr>
+                      <th>用戶名</th>
+                      <th>所屬部門</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="(item, index) in toEditorRows(row)" :key="`${row.id}-${index}`">
+                      <td>{{ item.name }}</td>
+                      <td>{{ item.department }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </el-popover>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="permission"
+        label="我的權限"
+        min-width="112"
+        align="left"
+        header-align="left"
+      />
+      <el-table-column
+        prop="updatedAt"
+        label="最近更新"
+        min-width="112"
+        align="left"
+        header-align="left"
+      />
+    </el-table>
+
+    <!-- 表格外側滑塊（樣式對齊 el-scrollbar__bar.is-vertical），不改動 table 內部 overflow -->
+    <div
+      v-show="scrollCan"
+      class="recent-reports-table__vbar"
+      :style="vbarTrackStyle"
+      aria-hidden="true"
+    >
+      <div
+        class="recent-reports-table__vthumb"
+        :style="vbarThumbStyle"
+        @mousedown.prevent="onThumbMouseDown"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export interface RecentReport {
+  id: string
+  name: string
+  industry: string
+  year: string
+  status: string
+  initiator: string
+  /** 編輯者列表（優先） */
+  editors?: string[]
+  /** 兼容舊字段：逗號分隔字串 */
+  editor?: string
+  permission: string
+  updatedAt: string
+  canOpen: boolean
+}
+
+export const EDITOR_PREVIEW_COUNT = 2
+
+export function resolveEditors(row: RecentReport): string[] {
+  if (row.editors?.length) return row.editors
+  if (!row.editor?.trim()) return []
+  return row.editor
+    .replace(/\s*\.\.\.\s*$/u, '')
+    .split(/\s*,\s*/u)
+    .map((item) => item.trim())
+    .filter(Boolean)
+}
+
+export function formatVisibleEditors(row: RecentReport): string {
+  const list = resolveEditors(row)
+  if (!list.length) return '—'
+  return list.slice(0, EDITOR_PREVIEW_COUNT).join(' , ')
+}
+
+export interface EditorRow {
+  name: string
+  department: string
+}
+
+/** 解析「姓名 (部門)」為表格行 */
+export function parseEditorLabel(label: string): EditorRow {
+  const matched = label.match(/^(.+?)\s*[（(]\s*(.+?)\s*[）)]\s*$/u)
+  if (!matched) {
+    return { name: label.trim() || '—', department: '—' }
+  }
+  const department = matched[2]!.replace(/^單位\s*/u, '').trim() || '—'
+  return {
+    name: matched[1]!.trim() || '—',
+    department,
+  }
+}
+
+export function toEditorRows(row: RecentReport): EditorRow[] {
+  return resolveEditors(row).map(parseEditorLabel)
+}
+
+export const RECENT_REPORTS: RecentReport[] = [
+  {
+    id: '1',
+    name: '深圳房地產風控年報 - 2024',
+    industry: '房地產',
+    year: '2025',
+    status: '草稿',
+    initiator: '陳大文 (單位 xxxx)',
+    editors: ['陳1文 (行業研究部)', '陳2文 (投行業務部)', '錢七 (行業研究部)', '王五 (投行業務部)'],
+    permission: '可編輯',
+    updatedAt: '3天前',
+    canOpen: true,
+  },
+  {
+    id: '2',
+    name: '深圳房地產風控年報 - 2024',
+    industry: '房地產',
+    year: '2024',
+    status: '已產生',
+    initiator: '陳中文 (單位 yyyy)',
+    editors: ['陳4文 (行業研究部)', '陳5文 (投行業務部)', '錢七 (行業研究部)', '王五 (投行業務部)'],
+    permission: '無權限',
+    updatedAt: '3天前',
+    canOpen: false,
+  },
+  {
+    id: '3',
+    name: '深圳房地產風控年報 - 2024',
+    industry: '房地產',
+    year: '2023',
+    status: '已導出',
+    initiator: '陳小文 (單位 zzzz)',
+    editors: ['陳6文 (單位 zzzz)'],
+    permission: '可編輯',
+    updatedAt: '3天前',
+    canOpen: true,
+  },
+  {
+    id: '4',
+    name: '深圳房地產風控年報 - 2024',
+    industry: '房地產',
+    year: '2023',
+    status: '已導出',
+    initiator: '陳小文 (單位 zzzz)',
+    editors: ['陳6文 (單位 zzzz)', '陳3文 (單位 xxxx)', '陳11文 (單位 zzzz)'],
+    permission: '可編輯',
+    updatedAt: '3天前',
+    canOpen: true,
+  },
+  {
+    id: '5',
+    name: '深圳房地產風控年報 - 2024',
+    industry: '房地產',
+    year: '2023',
+    status: '已導出',
+    initiator: '陳小文 (單位 zzzz)',
+    editors: ['陳6文 (單位 zzzz)'],
+    permission: '可編輯',
+    updatedAt: '3天前',
+    canOpen: true,
+  },
+  {
+    id: '6',
+    name: '深圳房地產風控年報 - 2024',
+    industry: '房地產',
+    year: '2023',
+    status: '已導出',
+    initiator: '陳小文 (單位 zzzz)',
+    editors: ['陳6文 (單位 rrrr)', '陳3文 (單位 xxxx)'],
+    permission: '可編輯',
+    updatedAt: '3天前',
+    canOpen: true,
+  },
+  {
+    id: '7',
+    name: '深圳房地產風控年報 - 2024',
+    industry: '房地產',
+    year: '2023',
+    status: '已導出',
+    initiator: '陳小文 (單位 zzzz)',
+    editors: ['陳6文 (單位 zzzz)'],
+    permission: '可編輯',
+    updatedAt: '3天前',
+    canOpen: true,
+  },
+  {
+    id: '8',
+    name: '深圳房地產風控年報 - 2024',
+    industry: '房地產',
+    year: '2023',
+    status: '已導出',
+    initiator: '陳小文 (單位 zzzz)',
+    editors: ['陳6文 (單位 zzzz)'],
+    permission: '可編輯',
+    updatedAt: '3天前',
+    canOpen: true,
+  },
+  {
+    id: '9',
+    name: '深圳房地產風控年報 - 2024',
+    industry: '房地產',
+    year: '2023',
+    status: '已導出',
+    initiator: '陳小文 (單位 zzzz)',
+    editors: ['陳6文 (單位 zzzz)'],
+    permission: '可編輯',
+    updatedAt: '3天前',
+    canOpen: true,
+  },
+  {
+    id: '10',
+    name: '深圳房地產風控年報 - 2024',
+    industry: '房地產',
+    year: '2023',
+    status: '已導出',
+    initiator: '陳小文 (單位 zzzz)',
+    editors: ['陳6文 (單位 zzzz)'],
+    permission: '可編輯',
+    updatedAt: '3天前',
+    canOpen: true,
+  },
+  {
+    id: '11',
+    name: '上海商業地產風控季報 - 2024',
+    industry: '商業地產',
+    year: '2024',
+    status: '草稿',
+    initiator: '王小明 (單位 aaaa)',
+    editors: ['王2文 (單位 aaaa)'],
+    permission: '可編輯',
+    updatedAt: '5天前',
+    canOpen: true,
+  },
+  {
+    id: '12',
+    name: '廣州基建項目風控月報 - 2024',
+    industry: '基建',
+    year: '2024',
+    status: '已產生',
+    initiator: '李雷 (單位 bbbb)',
+    editors: ['李3文 (單位 bbbb)'],
+    permission: '可編輯',
+    updatedAt: '1周前',
+    canOpen: true,
+  },
+  {
+    id: '13',
+    name: '北京科技園區風控年報 - 2023',
+    industry: '科技園區',
+    year: '2023',
+    status: '已導出',
+    initiator: '韓梅梅 (單位 cccc)',
+    editors: ['韓4文 (單位 cccc)'],
+    permission: '無權限',
+    updatedAt: '2周前',
+    canOpen: false,
+  },
+  {
+    id: '14',
+    name: '北京科技園區風控年報 - 2023',
+    industry: '科技園區',
+    year: '2023',
+    status: '已導出',
+    initiator: '韓梅梅 (單位 cccc)',
+    editors: ['韓4文 (單位 cccc)'],
+    permission: '無權限',
+    updatedAt: '2周前',
+    canOpen: false,
+  },
+  {
+    id: '15',
+    name: '北京科技園區風控年報 - 2023',
+    industry: '科技園區',
+    year: '2023',
+    status: '已導出',
+    initiator: '韓梅梅 (單位 cccc)',
+    editors: ['韓4文 (單位 cccc)'],
+    permission: '無權限',
+    updatedAt: '2周前',
+    canOpen: false,
+  },
+  {
+    id: '16',
+    name: '北京科技園區風控年報 - 2023',
+    industry: '科技園區',
+    year: '2023',
+    status: '已導出',
+    initiator: '韓梅梅 (單位 cccc)',
+    editors: ['韓4文 (單位 cccc)'],
+    permission: '無權限',
+    updatedAt: '2周前',
+    canOpen: false,
+  },
+  {
+    id: '17',
+    name: '北京科技園區風控年報 - 2023',
+    industry: '科技園區',
+    year: '2023',
+    status: '已導出',
+    initiator: '韓梅梅 (單位 cccc)',
+    editors: ['韓4文 (單位 cccc)'],
+    permission: '無權限',
+    updatedAt: '2周前',
+    canOpen: false,
+  },
+]
+</script>
+
+<script setup lang="ts">
+import type { TableInstance } from 'element-plus'
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+
+const props = defineProps<{
+  reports: RecentReport[]
+  /**
+   * 父級傳入的表格最大高度（出現滾動條的上限）。
+   * number 視為 px；也可傳 '400px' / '50vh' / '100%' 等。
+   * 未傳時按父容器剩餘高度自動測量。
+   */
+  maxHeight?: number | string
+}>()
+
+defineEmits<{
+  open: [report: RecentReport]
+}>()
+
+const rootRef = ref<HTMLElement>()
+const tableRef = ref<TableInstance>()
+const measuredMaxHeight = ref<number | undefined>(undefined)
+const editorsPopoverOpenMap = reactive<Record<string, boolean>>({})
+
+const hasExternalMaxHeight = computed(() => {
+  const v = props.maxHeight
+  return v != null && v !== ''
+})
+
+/** 實際交給 el-table 的 max-height */
+const tableMaxHeight = computed(() => {
+  if (!hasExternalMaxHeight.value) return measuredMaxHeight.value
+  return props.maxHeight
+})
+
+function isEditorsPopoverOpen(id: string) {
+  return !!editorsPopoverOpenMap[id]
+}
+
+function setEditorsPopoverOpen(id: string, open: boolean) {
+  editorsPopoverOpenMap[id] = open
+}
+
+const THUMB_PX = 50
+const scrollCan = ref(false)
+const thumbHeight = ref(THUMB_PX)
+const thumbOffset = ref(0)
+const trackTop = ref(0)
+const trackHeight = ref(0)
+
+const vbarTrackStyle = computed(() => ({
+  top: `${trackTop.value}px`,
+  height: `${trackHeight.value}px`,
+}))
+
+const vbarThumbStyle = computed(() => ({
+  height: `${thumbHeight.value}px`,
+  transform: `translateY(${thumbOffset.value}px)`,
+}))
+
+function getScrollWrap(): HTMLElement | null {
+  return (
+    (rootRef.value?.querySelector(
+      '.el-table__body-wrapper .el-scrollbar__wrap'
+    ) as HTMLElement | null) ?? null
+  )
+}
+
+function refreshOuterBar() {
+  const root = rootRef.value
+  const wrap = getScrollWrap()
+  if (!root || !wrap) {
+    scrollCan.value = false
+    return
+  }
+
+  const { scrollTop, scrollHeight, clientHeight } = wrap
+  const can = scrollHeight > clientHeight + 1
+  scrollCan.value = can
+  if (!can) return
+
+  const header = root.querySelector('.el-table__header-wrapper') as HTMLElement | null
+  const headerH = header?.offsetHeight ?? 0
+  trackTop.value = headerH + 2
+  trackHeight.value = Math.max(0, clientHeight - 4)
+
+  const trackH = trackHeight.value
+  // 與編輯器同款：滑塊固定 50px
+  thumbHeight.value = Math.min(trackH, THUMB_PX)
+  const maxTravel = Math.max(0, trackH - thumbHeight.value)
+  const scrollMax = scrollHeight - clientHeight
+  thumbOffset.value = scrollMax > 0 ? Math.round((scrollTop / scrollMax) * maxTravel) : 0
+}
+
+function onWrapScroll() {
+  refreshOuterBar()
+}
+
+let dragCleanup: (() => void) | undefined
+
+function onThumbMouseDown(event: MouseEvent) {
+  const wrapEl = getScrollWrap()
+  if (!wrapEl || !scrollCan.value) return
+  const scrollEl: HTMLElement = wrapEl
+
+  const startY = event.clientY
+  const startTop = thumbOffset.value
+  const trackH = trackHeight.value
+  const maxTravel = Math.max(0, trackH - thumbHeight.value)
+  const scrollMax = scrollEl.scrollHeight - scrollEl.clientHeight
+
+  function onMove(e: MouseEvent) {
+    if (maxTravel <= 0 || scrollMax <= 0) return
+    const delta = e.clientY - startY
+    const nextOffset = Math.min(maxTravel, Math.max(0, startTop + delta))
+    thumbOffset.value = nextOffset
+    scrollEl.scrollTop = (nextOffset / maxTravel) * scrollMax
+  }
+
+  function onUp() {
+    dragCleanup?.()
+    dragCleanup = undefined
+  }
+
+  window.addEventListener('mousemove', onMove)
+  window.addEventListener('mouseup', onUp, { once: true })
+  dragCleanup = () => {
+    window.removeEventListener('mousemove', onMove)
+    window.removeEventListener('mouseup', onUp)
+  }
+}
+
+function bindWrapScroll() {
+  unbindWrapScroll()
+  const wrap = getScrollWrap()
+  if (!wrap) return
+  wrap.addEventListener('scroll', onWrapScroll, { passive: true })
+  boundWrap = wrap
+}
+
+let boundWrap: HTMLElement | null = null
+
+function unbindWrapScroll() {
+  boundWrap?.removeEventListener('scroll', onWrapScroll)
+  boundWrap = null
+}
+
+function measureTableHeight() {
+  if (hasExternalMaxHeight.value) {
+    tableRef.value?.doLayout()
+    void nextTick(() => refreshOuterBar())
+    return
+  }
+
+  const root = rootRef.value
+  const parent = root?.parentElement
+  if (!root || !parent) return
+
+  let used = 0
+  for (const child of Array.from(parent.children)) {
+    if (child === root) continue
+    used += (child as HTMLElement).offsetHeight
+  }
+  const style = getComputedStyle(parent)
+  const gap = Number.parseFloat(style.rowGap || style.gap || '0') || 0
+  const siblingCount = Math.max(0, parent.children.length - 1)
+  const available = Math.floor(parent.clientHeight - used - gap * siblingCount)
+  if (available > 0) {
+    measuredMaxHeight.value = available
+  }
+  tableRef.value?.doLayout()
+  void nextTick(() => refreshOuterBar())
+}
+
+function doLayout() {
+  measureTableHeight()
+}
+
+let resizeObserver: ResizeObserver | undefined
+
+onMounted(() => {
+  measureTableHeight()
+  void nextTick(() => {
+    bindWrapScroll()
+    refreshOuterBar()
+  })
+  const root = rootRef.value
+  const parent = root?.parentElement
+  if (root || parent) {
+    resizeObserver = new ResizeObserver(() => {
+      void nextTick(() => {
+        measureTableHeight()
+        bindWrapScroll()
+        refreshOuterBar()
+      })
+    })
+    if (parent) resizeObserver.observe(parent)
+    if (root) resizeObserver.observe(root)
+  }
+})
+
+onUnmounted(() => {
+  resizeObserver?.disconnect()
+  unbindWrapScroll()
+  dragCleanup?.()
+})
+
+watch(
+  () => props.reports,
+  () => {
+    void nextTick(() => {
+      measureTableHeight()
+      bindWrapScroll()
+      refreshOuterBar()
+    })
+  }
+)
+
+watch(
+  () => props.maxHeight,
+  () => {
+    void nextTick(() => {
+      if (hasExternalMaxHeight.value) {
+        measuredMaxHeight.value = undefined
+      }
+      measureTableHeight()
+      bindWrapScroll()
+      refreshOuterBar()
+    })
+  }
+)
+
+defineExpose({ doLayout })
+</script>
+
+<style scoped>
+.recent-reports-table {
+  --rr-table-row-h: 40px;
+  --rr-table-header-bg: #f9fafb;
+  --rr-table-header-fs: 14px;
+  --rr-table-header-color: #666;
+  --rr-table-header-fw: 500;
+  --rr-table-row-fs: 14px;
+  --rr-table-row-color: #111827;
+  --rr-table-border: 1px solid rgb(235, 238, 245);
+  --rr-font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  --rr-scroll-thumb: #999;
+  --rr-scroll-gutter: 16px;
+  position: relative;
+  width: 100%;
+  min-height: 0;
+  margin: 0;
+  padding: 0 var(--rr-scroll-gutter) 0 0;
+  box-sizing: border-box;
+  overflow: visible;
+  --el-table-border: none;
+  --el-table-border-color: transparent;
+  font-family: var(--rr-font-family);
+}
+
+/* 隱藏 table 內建豎向滑塊（外側自繪）；底部橫向滑塊寬 50px */
+.recent-reports-table :deep(.el-scrollbar__bar.is-vertical) {
+  display: none !important;
+}
+
+.recent-reports-table :deep(.el-scrollbar__wrap) {
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+
+.recent-reports-table :deep(.el-scrollbar__wrap::-webkit-scrollbar) {
+  width: 0 !important;
+  height: 0 !important;
+  display: none !important;
+}
+
+.recent-reports-table :deep(.el-scrollbar__bar.is-horizontal) {
+  display: block !important;
+  height: 8px !important;
+  left: 2px !important;
+  right: calc(var(--rr-scroll-gutter) + 2px) !important;
+  /* 與表格底邊預留 2px，避免橫向滑塊貼死最後一行 */
+  bottom: 2px !important;
+  opacity: 1 !important;
+  z-index: 10;
+}
+
+.recent-reports-table :deep(.el-scrollbar__bar.is-horizontal .el-scrollbar__thumb) {
+  display: block !important;
+  height: 8px !important;
+  width: 50px !important;
+  min-width: 50px !important;
+  border-radius: 4px !important;
+  background-color: var(--rr-scroll-thumb, #999) !important;
+  opacity: 1 !important;
+}
+
+.recent-reports-table__vbar {
+  position: absolute;
+  right: 4px;
+  width: 8px;
+  z-index: 10;
+  pointer-events: none;
+}
+
+.recent-reports-table__vthumb {
+  width: 8px;
+  height: 50px;
+  min-height: 50px;
+  border-radius: 4px;
+  background-color: var(--rr-scroll-thumb);
+  cursor: grab;
+  pointer-events: auto;
+  will-change: transform;
+}
+
+.recent-reports-table__vthumb:active {
+  cursor: grabbing;
+  background-color: #777;
+}
+
+.recent-reports-table :deep(.el-table) {
+  --el-table-header-text-color: var(--rr-table-header-color);
+  --el-table-text-color: var(--rr-table-row-color);
+  --el-table-row-hover-bg-color: #f5f7fa;
+  width: 100% !important;
+  font-family: var(--rr-font-family);
+}
+
+.recent-reports-table :deep(.el-table__inner-wrapper),
+.recent-reports-table :deep(.el-table__header-wrapper),
+.recent-reports-table :deep(.el-table__body-wrapper) {
+  margin-left: 0;
+  padding-left: 0;
+}
+
+.recent-reports-table :deep(.el-table__header table),
+.recent-reports-table :deep(.el-table__body table) {
+  width: 100% !important;
+  table-layout: fixed;
+}
+
+.recent-reports-table :deep(.el-table__header .cell),
+.recent-reports-table :deep(.el-table__body .cell) {
+  padding: 0;
+  text-align: left;
+  font-family: var(--rr-font-family);
+}
+
+.recent-reports-table :deep(.el-table__body-wrapper .cell) {
+  padding: 0;
+}
+
+.recent-reports-table :deep(.el-table__header th.el-table__cell),
+.recent-reports-table :deep(.el-table__header th.el-table__cell .cell) {
+  font-size: var(--rr-table-header-fs);
+  font-weight: var(--rr-table-header-fw);
+  font-family: var(--rr-font-family);
+  color: var(--rr-table-header-color);
+}
+
+.recent-reports-table :deep(.el-table__header th.el-table__cell .cell) {
+  white-space: nowrap;
+  overflow: visible;
+  text-overflow: clip;
+}
+
+.recent-reports-table :deep(.el-table__header th.el-table__cell:first-child .cell) {
+  padding-left: 10px;
+}
+
+.recent-reports-table :deep(.industry-col-name .cell) {
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.recent-reports-table :deep(.industry-col-initiator .cell),
+.recent-reports-table :deep(.industry-col-editor .cell) {
+  white-space: normal;
+  word-break: break-word;
+  line-height: 1.6;
+  overflow: visible;
+}
+
+.recent-reports-table :deep(.industry-col-editor.el-table__cell) {
+  overflow: visible;
+}
+
+.industry-editors {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.industry-editors__text {
+  min-width: 0;
+}
+
+.industry-editors__more {
+  margin: 0 0 0 4px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: #c53355;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  line-height: inherit;
+  cursor: pointer;
+}
+
+.industry-editors__more:hover {
+  color: #a82b48;
+}
+
+.recent-reports-table :deep(.el-table__inner-wrapper::before),
+.recent-reports-table :deep(.el-table__inner-wrapper::after) {
+  display: none;
+}
+
+.recent-reports-table :deep(.el-table__body-wrapper .el-table__body) {
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+.recent-reports-table :deep(.el-table__body tr.el-table__row),
+.recent-reports-table :deep(.el-table__body td.el-table__cell),
+.recent-reports-table :deep(.el-table__body td.el-table__cell .cell) {
+  font-size: var(--rr-table-row-fs);
+  font-family: var(--rr-font-family);
+  color: var(--rr-table-row-color);
+}
+
+.recent-reports-table :deep(.industry-report-name:not(.industry-report-name--link)) {
+  color: var(--rr-table-row-color);
+}
+
+.recent-reports-table :deep(.el-table__body tr.el-table__row) {
+  height: var(--rr-table-row-h);
+  background: #fff;
+  cursor: pointer;
+}
+
+.recent-reports-table :deep(.el-table__body tr) {
+  background: #fff;
+}
+
+.recent-reports-table :deep(.el-table__body tr.el-table__row:hover > td.el-table__cell) {
+  background-color: #f5f7fa !important;
+  box-shadow: none !important;
+}
+
+.recent-reports-table
+  :deep(.el-table__body tr.el-table__row:hover > td.el-table__cell:first-child) {
+  border-radius: 4px 0 0 4px;
+}
+
+.recent-reports-table :deep(.el-table__body tr.el-table__row:hover > td.el-table__cell:last-child) {
+  border-radius: 0 4px 4px 0;
+}
+
+.recent-reports-table :deep(.el-table__header-wrapper) {
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.recent-reports-table :deep(.el-table__header th.el-table__cell) {
+  font-weight: var(--rr-table-header-fw);
+  border-bottom: var(--rr-table-border);
+  background: var(--rr-table-header-bg);
+  height: var(--rr-table-row-h);
+  padding: 0 16px;
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+
+.recent-reports-table :deep(.el-table__header th.el-table__cell:first-child) {
+  border-radius: 4px 0 0 4px;
+}
+
+.recent-reports-table :deep(.el-table__header th.el-table__cell:last-child) {
+  border-radius: 0 4px 4px 0;
+}
+
+.recent-reports-table :deep(.el-table__body td.el-table__cell) {
+  height: var(--rr-table-row-h);
+  border-bottom: var(--rr-table-border);
+  padding: 0 16px;
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+
+.recent-reports-table :deep(.el-table__body td.el-table__cell .cell) {
+  display: flex;
+  align-items: center;
+  min-height: var(--rr-table-row-h);
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.recent-reports-table :deep(.el-table__body td.el-table__cell:not(:first-child) .cell) {
+  white-space: nowrap;
+}
+
+.industry-report-name__pill {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  padding: 6px 10px;
+  border-radius: 4px;
+  background: transparent;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  line-height: 1.4;
+}
+
+.industry-report-name {
+  color: inherit;
+}
+
+.industry-report-name--link {
+  color: #409eff;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.industry-report-name--link:hover {
+  color: #409eff;
+  text-decoration: underline;
+}
+</style>
+
+<style>
+.recent-editors-popover.el-popover.el-popper {
+  --rr-editors-header-bg: #f9fafb;
+  padding: 12px 14px;
+  border: 1px solid #ebeef5;
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+}
+
+.recent-editors-popover__title {
+  margin: -12px -14px 10px;
+  padding: 10px 14px;
+  background: var(--rr-editors-header-bg);
+  color: #303133;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.recent-editors-popover__table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+  font-size: 13px;
+  color: #303133;
+}
+
+.recent-editors-popover__table th,
+.recent-editors-popover__table td {
+  padding: 8px 10px;
+  text-align: left;
+  border-bottom: 1px solid #ebeef5;
+  word-break: break-all;
+}
+
+.recent-editors-popover__table th {
+  background: var(--rr-editors-header-bg);
+  font-weight: 600;
+  color: #606266;
+}
+
+.recent-editors-popover__table tbody tr:last-child td {
+  border-bottom: none;
+}
+</style>