aegon-lv97 1.0.0

package/gen-ai/components/ModelCard.vue

@@ -0,0 +1,1114 @@
+<template>
+  <article ref="cardRef" class="model-card" :class="{ 'model-card--no-actions': !showActions }">
+    <header class="model-card__header">
+      <div class="model-card__title-block">
+        <h3 ref="titleRef" class="model-card__title">{{ displayTitle }}</h3>
+        <el-popover
+          v-if="titleOverflow"
+          placement="bottom"
+          :width="320"
+          trigger="click"
+          popper-class="model-card-overflow-popover"
+        >
+          <template #reference>
+            <button type="button" class="model-card__ellipsis" title="查看完整標題" @click.stop>
+              ...
+            </button>
+          </template>
+          <div class="model-card-overflow-popover__text">{{ template.name }}</div>
+        </el-popover>
+      </div>
+      <div class="model-card__meta-row">
+        <div class="model-card__tags">
+          <div v-if="industryTag" class="model-card__tag-col">
+            <span ref="industryTagWrapRef" class="model-card__tag model-card__tag--industry">
+              <span ref="industryTagRef" class="model-card__tag-text">{{ displayIndustry }}</span>
+              <el-popover
+                v-if="industryOverflow"
+                placement="bottom"
+                :width="320"
+                trigger="click"
+                popper-class="model-card-overflow-popover"
+              >
+                <template #reference>
+                  <button
+                    type="button"
+                    class="model-card__ellipsis"
+                    title="查看完整行業"
+                    @click.stop
+                  >
+                    ...
+                  </button>
+                </template>
+                <div class="model-card-overflow-popover__text">{{ industryTag }}</div>
+              </el-popover>
+            </span>
+          </div>
+          <div class="model-card__tag-col">
+            <span class="model-card__tag model-card__tag--chapters"
+              >{{ template.chapters.length }} 章節</span
+            >
+          </div>
+        </div>
+        <el-popover
+          placement="bottom-end"
+          :width="popoverWidth"
+          trigger="click"
+          :popper-style="popoverPopperStyle"
+          popper-class="model-card-preview-popover"
+          @show="onPopoverShow"
+        >
+          <template #reference>
+            <button
+              type="button"
+              class="model-card__view"
+              title="查看完整資訊"
+              @click.stop="syncPopoverMetrics"
+            >
+              <el-icon :size="15"><View /></el-icon>
+            </button>
+          </template>
+          <div
+            class="model-card-preview"
+            :class="{ 'is-scrollable': previewNeedsScroll }"
+            :style="{ maxHeight: `${popoverMaxHeight}px` }"
+          >
+            <el-scrollbar
+              ref="previewScrollbarRef"
+              class="model-card-preview__scroll"
+              :max-height="popoverMaxHeight"
+            >
+              <div class="model-card-preview__inner">
+                <h4 class="model-card-preview__title">{{ template.name }}</h4>
+                <div class="model-card-preview__tags">
+                  <span
+                    v-if="industryTag"
+                    class="model-card-preview__tag model-card-preview__tag--industry"
+                    >{{ industryTag }}</span
+                  >
+                  <span class="model-card-preview__tag model-card-preview__tag--chapters"
+                    >{{ template.chapters.length }} 章節</span
+                  >
+                </div>
+                <p class="model-card-preview__desc">{{ template.description }}</p>
+              </div>
+            </el-scrollbar>
+          </div>
+        </el-popover>
+      </div>
+    </header>
+
+    <div class="model-card__desc-block">
+      <p ref="descRef" class="model-card__desc">{{ displayDesc }}</p>
+      <el-popover
+        v-if="descOverflow"
+        placement="bottom"
+        :width="360"
+        trigger="click"
+        popper-class="model-card-overflow-popover"
+      >
+        <template #reference>
+          <button type="button" class="model-card__ellipsis" title="查看完整描述" @click.stop>
+            ...
+          </button>
+        </template>
+        <div class="model-card-overflow-popover__text">{{ template.description }}</div>
+      </el-popover>
+    </div>
+
+    <section class="model-card__chapters" aria-label="章節結構">
+      <span class="model-card__chapters-label">章節結構</span>
+      <div
+        ref="chaptersBoxRef"
+        class="model-card__chapters-box"
+        :class="{ 'is-scrollable': needsScroll }"
+      >
+        <el-scrollbar ref="scrollbarRef" class="model-card__chapters-scroll">
+          <ul class="model-card__chapters-list">
+            <li v-for="(chapter, index) in parsedChapters" :key="`${template.id}-${index}`">
+              <span class="model-card__chapter-no">{{ chapter.no }}.</span>
+              <span class="model-card__chapter-text">{{ chapter.text }}</span>
+            </li>
+          </ul>
+        </el-scrollbar>
+      </div>
+    </section>
+
+    <div class="model-card__meta">
+      <p class="model-card__meta-line">
+        <span class="model-card__meta-label">作者</span>
+        <span class="model-card__meta-value">{{ shortName(template.author) }}</span>
+        <span class="model-card__meta-label"> · 審批</span>
+        <span class="model-card__meta-value">{{ shortName(template.approver) }}</span>
+      </p>
+      <p class="model-card__meta-line">
+        <span class="model-card__meta-label">最後更新</span>
+        <span class="model-card__meta-value">{{ formatUpdatedAt(template.updatedAt) }}</span>
+      </p>
+    </div>
+
+    <footer v-if="showActions" ref="footerRef" class="model-card__footer">
+      <div class="model-card__footer-left">
+        <button type="button" class="model-card__action" @click.stop="$emit('edit', template)">
+          <el-icon :size="15"><EditPen /></el-icon>
+          <span>編輯</span>
+        </button>
+        <span class="model-card__footer-sep" aria-hidden="true" />
+        <button
+          type="button"
+          class="model-card__action"
+          :title="template.locked ? `${template.locker} 已鎖定` : '鎖定模板'"
+          @click.stop="$emit('lock', template)"
+        >
+          <el-icon :size="15">
+            <Lock v-if="template.locked" />
+            <Unlock v-else />
+          </el-icon>
+          <span>{{ template.locked ? '解鎖' : '鎖定' }}</span>
+        </button>
+      </div>
+      <button
+        type="button"
+        class="model-card__action model-card__action--danger"
+        @click.stop="$emit('delete', template)"
+      >
+        <el-icon :size="15"><Delete /></el-icon>
+        <span>刪除</span>
+      </button>
+    </footer>
+  </article>
+</template>
+
+<script lang="ts">
+export interface ModelCardItem {
+  id: string
+  name: string
+  description: string
+  chapters: string[]
+  author: string
+  approver: string
+  updatedAt: string
+  unit: string
+  locked: boolean
+  locker: string
+  industry?: string
+}
+</script>
+
+<script setup lang="ts">
+import { Delete, EditPen, Lock, Unlock, View } from '@element-plus/icons-vue'
+import type { ScrollbarInstance } from 'element-plus'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    template: ModelCardItem
+    /** 是否顯示底部編輯 / 鎖定 / 刪除操作欄 */
+    showActions?: boolean
+  }>(),
+  { showActions: true }
+)
+
+defineEmits<{
+  edit: [template: ModelCardItem]
+  lock: [template: ModelCardItem]
+  delete: [template: ModelCardItem]
+}>()
+
+const industryTag = computed(() => props.template.industry?.trim() || props.template.unit)
+
+const parsedChapters = computed(() =>
+  props.template.chapters.map((chapter, index) => {
+    const matched = chapter.match(/^(\d+)\.\s*(.*)$/)
+    if (matched) {
+      return { no: matched[1]!, text: matched[2] || '' }
+    }
+    return { no: String(index + 1), text: chapter }
+  })
+)
+
+const titleRef = ref<HTMLElement | null>(null)
+const industryTagRef = ref<HTMLElement | null>(null)
+const industryTagWrapRef = ref<HTMLElement | null>(null)
+const descRef = ref<HTMLElement | null>(null)
+const displayTitle = ref(props.template.name || '')
+const displayIndustry = ref(industryTag.value || '')
+const displayDesc = ref(props.template.description || '')
+const titleOverflow = ref(false)
+const industryOverflow = ref(false)
+const descOverflow = ref(false)
+
+const ELLIPSIS_RESERVE = 32
+
+function readFont(el: HTMLElement) {
+  const cs = getComputedStyle(el)
+  return `${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`
+}
+
+function measureSingleLineWidth(text: string, font: string) {
+  const probe = document.createElement('span')
+  probe.style.cssText = [
+    'position:absolute',
+    'visibility:hidden',
+    'pointer-events:none',
+    'left:-99999px',
+    'top:0',
+    'white-space:nowrap',
+    `font:${font}`,
+  ].join(';')
+  probe.textContent = text
+  document.body.appendChild(probe)
+  const width = probe.offsetWidth
+  probe.remove()
+  return width
+}
+
+function fitSingleLine(full: string, maxWidth: number, font: string) {
+  if (!full || maxWidth <= 0) return { text: '', overflow: full.length > 0 }
+  if (measureSingleLineWidth(full, font) <= maxWidth - 1) {
+    return { text: full, overflow: false }
+  }
+  const budget = Math.max(0, maxWidth - ELLIPSIS_RESERVE - 1)
+  let lo = 0
+  let hi = full.length
+  while (lo < hi) {
+    const mid = Math.ceil((lo + hi) / 2)
+    if (measureSingleLineWidth(full.slice(0, mid), font) <= budget) lo = mid
+    else hi = mid - 1
+  }
+  return { text: full.slice(0, Math.max(0, lo)), overflow: true }
+}
+
+function fitMultiline(full: string, width: number, maxHeight: number, styles: CSSStyleDeclaration) {
+  if (!full || width <= 0 || maxHeight <= 0) return { text: '', overflow: full.length > 0 }
+
+  const probe = document.createElement('div')
+  probe.style.cssText = [
+    'position:absolute',
+    'visibility:hidden',
+    'pointer-events:none',
+    'left:-99999px',
+    'top:0',
+    `width:${Math.floor(width)}px`,
+    `font:${styles.font}`,
+    `font-size:${styles.fontSize}`,
+    `font-weight:${styles.fontWeight}`,
+    `font-family:${styles.fontFamily}`,
+    `line-height:${styles.lineHeight}`,
+    'word-break:break-word',
+    'overflow-wrap:anywhere',
+    'white-space:normal',
+    'box-sizing:border-box',
+  ].join(';')
+  document.body.appendChild(probe)
+
+  const fits = (text: string) => {
+    probe.textContent = text
+    return probe.scrollHeight <= maxHeight + 1
+  }
+
+  try {
+    if (fits(full)) return { text: full, overflow: false }
+    let lo = 0
+    let hi = full.length
+    while (lo < hi) {
+      const mid = Math.ceil((lo + hi) / 2)
+      if (fits(full.slice(0, mid))) lo = mid
+      else hi = mid - 1
+    }
+    return { text: full.slice(0, Math.max(0, lo)), overflow: true }
+  } finally {
+    probe.remove()
+  }
+}
+
+function updateTextOverflow() {
+  const name = props.template.name || ''
+  const industry = industryTag.value || ''
+  const description = props.template.description || ''
+
+  const titleEl = titleRef.value
+  const titleBlock = titleEl?.parentElement
+  if (titleEl && titleBlock) {
+    const fitted = fitSingleLine(name, titleBlock.clientWidth, readFont(titleEl))
+    displayTitle.value = fitted.text
+    titleOverflow.value = fitted.overflow
+  } else {
+    displayTitle.value = name
+    titleOverflow.value = false
+  }
+
+  const industryEl = industryTagRef.value
+  const industryWrap = industryTagWrapRef.value
+  if (industryEl && industryWrap) {
+    const cs = getComputedStyle(industryWrap)
+    const pad = (Number.parseFloat(cs.paddingLeft) || 0) + (Number.parseFloat(cs.paddingRight) || 0)
+    const fitted = fitSingleLine(industry, industryWrap.clientWidth - pad, readFont(industryEl))
+    displayIndustry.value = fitted.text
+    industryOverflow.value = fitted.overflow
+  } else {
+    displayIndustry.value = industry
+    industryOverflow.value = false
+  }
+
+  const descEl = descRef.value
+  const descBlock = descEl?.parentElement
+  if (descEl && descBlock) {
+    const cs = getComputedStyle(descEl)
+    const maxHeight = Number.parseFloat(cs.maxHeight) || descEl.clientHeight
+    let fitted = fitMultiline(description, descBlock.clientWidth, maxHeight, cs)
+    if (fitted.overflow) {
+      fitted = fitMultiline(
+        description,
+        Math.max(0, descBlock.clientWidth - ELLIPSIS_RESERVE),
+        maxHeight,
+        cs
+      )
+    }
+    displayDesc.value = fitted.text
+    descOverflow.value = fitted.overflow
+  } else {
+    displayDesc.value = description
+    descOverflow.value = false
+  }
+}
+
+const cardRef = ref<HTMLElement | null>(null)
+const chaptersBoxRef = ref<HTMLElement | null>(null)
+const footerRef = ref<HTMLElement | null>(null)
+const scrollbarRef = ref<ScrollbarInstance>()
+const previewScrollbarRef = ref<ScrollbarInstance>()
+const needsScroll = ref(false)
+const previewNeedsScroll = ref(false)
+const popoverMaxHeight = ref(240)
+const popoverWidth = ref(320)
+
+const popoverPopperStyle = computed(() => ({
+  padding: '0',
+  maxHeight: `${popoverMaxHeight.value}px`,
+  width: `${popoverWidth.value}px`,
+}))
+
+let resizeObserver: ResizeObserver | null = null
+
+function getWrapEl(instance?: ScrollbarInstance | null) {
+  return instance?.wrapRef ?? null
+}
+
+function updateNeedsScroll() {
+  const wrap = getWrapEl(scrollbarRef.value)
+  if (!wrap) {
+    needsScroll.value = false
+    return
+  }
+  needsScroll.value = wrap.scrollHeight > wrap.clientHeight + 1
+}
+
+function updatePreviewNeedsScroll() {
+  const wrap = getWrapEl(previewScrollbarRef.value)
+  if (!wrap) {
+    previewNeedsScroll.value = false
+    return
+  }
+  previewNeedsScroll.value = wrap.scrollHeight > wrap.clientHeight + 1
+}
+
+function syncPopoverMetrics() {
+  const card = cardRef.value
+  const footer = footerRef.value
+  const viewBtn = card?.querySelector('.model-card__view') as HTMLElement | null
+  if (!card || !viewBtn) return
+
+  const cardRect = card.getBoundingClientRect()
+  const bottomBound = footer ? footer.getBoundingClientRect().top : cardRect.bottom
+  const viewBottom = viewBtn.getBoundingClientRect().bottom
+  // 有操作欄時底界為 footer 上邊；選擇模板頁無操作欄時用卡片底邊
+  popoverMaxHeight.value = Math.max(120, Math.floor(bottomBound - viewBottom - 4))
+  popoverWidth.value = Math.max(240, Math.floor(cardRect.width - 40))
+}
+
+function onPopoverShow() {
+  syncPopoverMetrics()
+  nextTick(() => {
+    syncPopoverMetrics()
+    updatePreviewNeedsScroll()
+    requestAnimationFrame(() => updatePreviewNeedsScroll())
+  })
+}
+
+function bindOverflowObserver() {
+  resizeObserver?.disconnect()
+  const wrap = getWrapEl(scrollbarRef.value)
+  resizeObserver = new ResizeObserver(() => {
+    updateNeedsScroll()
+    syncPopoverMetrics()
+    updateTextOverflow()
+  })
+  if (wrap) {
+    resizeObserver.observe(wrap)
+    const view = wrap.querySelector('.el-scrollbar__view')
+    if (view) resizeObserver.observe(view)
+  }
+  if (cardRef.value) resizeObserver.observe(cardRef.value)
+  if (titleRef.value) resizeObserver.observe(titleRef.value)
+  if (industryTagWrapRef.value) resizeObserver.observe(industryTagWrapRef.value)
+  if (descRef.value) resizeObserver.observe(descRef.value)
+  updateNeedsScroll()
+  updateTextOverflow()
+}
+
+function shortName(value: string) {
+  return (
+    value
+      .replace(/（[^）]*）/g, '')
+      .replace(/\([^)]*\)/g, '')
+      .trim() || value
+  )
+}
+
+function formatUpdatedAt(raw: string) {
+  const match = raw.match(/(\d{4})[/-](\d{1,2})[/-](\d{1,2})/)
+  if (!match) return raw
+  return `${match[1]} 年 ${Number(match[2])} 月 ${Number(match[3])} 日`
+}
+
+watch(
+  () =>
+    [
+      props.template.name,
+      props.template.description,
+      props.template.industry,
+      props.template.chapters,
+    ] as const,
+  () =>
+    nextTick(() => {
+      bindOverflowObserver()
+      updateNeedsScroll()
+      updateTextOverflow()
+    }),
+  { deep: true }
+)
+
+onMounted(() => {
+  nextTick(() => {
+    bindOverflowObserver()
+    updateNeedsScroll()
+    updateTextOverflow()
+    syncPopoverMetrics()
+  })
+  window.addEventListener('resize', syncPopoverMetrics, { passive: true })
+})
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  window.removeEventListener('resize', syncPopoverMetrics)
+})
+</script>
+
+<style scoped>
+.model-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  padding: 20px 20px 0;
+  border: 1px solid var(--el-border-color-light, #e4e7ed);
+  border-radius: 0.625rem;
+  background: #fff;
+  box-sizing: border-box;
+  transition: box-shadow var(--el-transition-duration, 0.3s);
+}
+
+.model-card--no-actions {
+  padding-bottom: 16px;
+}
+
+.model-card:hover {
+  box-shadow: var(--el-box-shadow-light, 0 0 12px rgba(0, 0, 0, 0.12));
+}
+
+.model-card__header {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+}
+
+.model-card__title-block {
+  display: inline-flex;
+  align-items: baseline;
+  justify-content: center;
+  max-width: 100%;
+  min-width: 0;
+  width: 100%;
+}
+
+.model-card__title {
+  margin: 0;
+  flex: 0 1 auto;
+  min-width: 0;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: #303133;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.model-card__ellipsis {
+  flex-shrink: 0;
+  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;
+}
+
+.model-card__ellipsis:hover {
+  color: #a82b48;
+}
+
+.model-card__meta-row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 28px;
+  min-width: 0;
+}
+
+.model-card__tags {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  padding: 0 32px;
+  box-sizing: border-box;
+}
+
+.model-card__tag-col {
+  flex: 1 1 0;
+  min-width: 0;
+  width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.model-card__tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  max-width: 100%;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: #f9fafb;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 26px;
+  color: #606266;
+  text-align: center;
+  box-sizing: border-box;
+  cursor: default;
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease;
+}
+
+.model-card__tag--industry {
+  width: 100%;
+}
+
+.model-card__tag--chapters {
+  width: 100%;
+  white-space: nowrap;
+}
+
+.model-card__tag-text {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.model-card__tag .model-card__ellipsis {
+  flex-shrink: 0;
+  font-size: 14px;
+  line-height: 26px;
+}
+
+.model-card__tag:hover {
+  color: #c53355;
+  border-color: transparent;
+  background: #fdf0f2;
+}
+
+.model-card__view {
+  position: absolute;
+  top: 0;
+  right: 0;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #606266;
+  cursor: pointer;
+}
+
+.model-card__view:hover {
+  color: #c53355;
+  background: #fdf0f2;
+}
+
+.model-card__desc-block {
+  display: inline-flex;
+  align-items: flex-end;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-top: 14px;
+  max-width: 100%;
+  min-width: 0;
+  width: 100%;
+}
+
+.model-card__desc {
+  margin: 0;
+  flex: 0 1 auto;
+  min-width: 0;
+  max-height: calc(14px * 1.7 * 3);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.7;
+  color: #606266;
+  text-align: center;
+  overflow: hidden;
+  word-break: break-word;
+}
+
+.model-card__desc-block .model-card__ellipsis {
+  flex-shrink: 0;
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.model-card__chapters {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 16px;
+  flex: 1;
+  min-height: 0;
+}
+
+.model-card__chapters-label {
+  flex-shrink: 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  color: #606266;
+}
+
+.model-card__chapters-box {
+  flex: 1;
+  min-height: 0;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  background: #fff;
+  box-sizing: border-box;
+  overflow: hidden;
+  transition: background-color 0.18s ease;
+}
+
+.model-card__chapters-box.is-scrollable {
+  background: #f9fafb;
+}
+
+.model-card__chapters-scroll {
+  height: 100%;
+  overflow: visible;
+}
+
+.model-card__chapters-scroll :deep(.el-scrollbar) {
+  height: 100%;
+  max-height: 100%;
+  overflow: visible;
+}
+
+.model-card__chapters-scroll :deep(.el-scrollbar__wrap) {
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
+  max-height: 100% !important;
+  box-sizing: border-box !important;
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+
+.model-card__chapters-scroll :deep(.el-scrollbar__wrap::-webkit-scrollbar) {
+  width: 0 !important;
+  height: 0 !important;
+  display: none !important;
+}
+
+.model-card__chapters-scroll :deep(.el-scrollbar__view) {
+  box-sizing: border-box;
+}
+
+.model-card__chapters-scroll :deep(.el-scrollbar__bar.is-horizontal) {
+  display: none !important;
+}
+
+.model-card__chapters-scroll :deep(.el-scrollbar__bar.is-vertical) {
+  width: 8px !important;
+  right: 4px !important;
+  top: 2px !important;
+  bottom: 2px !important;
+  height: auto !important;
+  opacity: 0 !important;
+  pointer-events: none;
+  z-index: 10;
+  transition: opacity 0.18s ease;
+}
+
+.model-card__chapters-box.is-scrollable
+  .model-card__chapters-scroll
+  :deep(.el-scrollbar__bar.is-vertical) {
+  opacity: 1 !important;
+  pointer-events: auto;
+}
+
+.model-card__chapters-scroll :deep(.el-scrollbar__bar.is-vertical .el-scrollbar__thumb) {
+  display: block !important;
+  width: 8px !important;
+  height: 50px !important;
+  min-height: 50px !important;
+  border-radius: 4px !important;
+  background-color: #999 !important;
+  opacity: 1 !important;
+}
+
+.model-card__chapters-list {
+  margin: 0;
+  padding: 12px 14px;
+  list-style: none;
+}
+
+.model-card__chapters-list > li {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: 4px;
+  align-items: start;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.7;
+  color: #303133;
+}
+
+.model-card__chapters-list > li + li {
+  margin-top: 2px;
+}
+
+.model-card__chapter-no {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.model-card__chapter-text {
+  min-width: 0;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+.model-card__meta {
+  flex-shrink: 0;
+  margin-top: 16px;
+  padding-bottom: 14px;
+}
+
+.model-card__meta-line {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.7;
+}
+
+.model-card__meta-label {
+  color: #606266;
+}
+
+.model-card__meta-value {
+  color: #303133;
+}
+
+.model-card__meta-label + .model-card__meta-value {
+  margin-left: 4px;
+}
+
+.model-card__footer {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: auto;
+  padding: 12px 0 16px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.model-card__footer-left {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.model-card__footer-sep {
+  flex-shrink: 0;
+  width: 1px;
+  height: 14px;
+  background: #e5e7eb;
+}
+
+.model-card__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 72px;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1;
+  color: #606266;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition:
+    color 0.2s ease,
+    border-color 0.2s ease,
+    background-color 0.2s ease;
+}
+
+.model-card__action:hover,
+.model-card__action--danger:hover {
+  color: #c53355;
+  border-color: #c53355;
+  background: #fdf0f2;
+}
+</style>
+
+<style>
+.model-card-overflow-popover.el-popover.el-popper {
+  padding: 12px 14px;
+  border: 1px solid #ebeef5;
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  box-sizing: border-box;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+.model-card-overflow-popover__text {
+  display: block;
+  width: 100%;
+  max-height: none;
+  overflow: visible;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.6;
+  color: #303133;
+  white-space: normal;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+.model-card-preview-popover.el-popover.el-popper {
+  padding: 0 !important;
+  border: 1px solid #ebeef5;
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.model-card-preview {
+  height: 100%;
+  max-height: inherit;
+  background: #fff;
+  box-sizing: border-box;
+  overflow: hidden;
+  transition: background-color 0.18s ease;
+}
+
+.model-card-preview.is-scrollable {
+  background: #f9fafb;
+}
+
+.model-card-preview__scroll {
+  height: 100%;
+  max-height: inherit;
+}
+
+.model-card-preview__scroll .el-scrollbar {
+  height: 100%;
+  max-height: inherit;
+}
+
+.model-card-preview__scroll .el-scrollbar__wrap {
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
+  max-height: inherit !important;
+  box-sizing: border-box !important;
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+
+.model-card-preview__scroll .el-scrollbar__wrap::-webkit-scrollbar {
+  width: 0 !important;
+  height: 0 !important;
+  display: none !important;
+}
+
+.model-card-preview__scroll .el-scrollbar__bar.is-horizontal {
+  display: none !important;
+}
+
+.model-card-preview__scroll .el-scrollbar__bar.is-vertical {
+  width: 8px !important;
+  right: 4px !important;
+  top: 2px !important;
+  bottom: 2px !important;
+  height: auto !important;
+  opacity: 0 !important;
+  pointer-events: none;
+  z-index: 10;
+  transition: opacity 0.18s ease;
+}
+
+.model-card-preview.is-scrollable .model-card-preview__scroll .el-scrollbar__bar.is-vertical {
+  opacity: 1 !important;
+  pointer-events: auto;
+}
+
+.model-card-preview__scroll .el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
+  display: block !important;
+  width: 8px !important;
+  height: 50px !important;
+  min-height: 50px !important;
+  border-radius: 4px !important;
+  background-color: #999 !important;
+  opacity: 1 !important;
+}
+
+.model-card-preview__inner {
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+.model-card-preview__title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: #303133;
+  text-align: center;
+}
+
+.model-card-preview__tags {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  justify-content: flex-start;
+  gap: 8px;
+  margin-top: 10px;
+  min-width: 0;
+  width: 100%;
+}
+
+.model-card-preview__tag {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-width: 0;
+  min-height: 28px;
+  height: auto;
+  padding: 4px 10px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: #f9fafb;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.4;
+  color: #606266;
+  text-align: center;
+  box-sizing: border-box;
+  white-space: normal;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  transition:
+    color 0.2s ease,
+    border-color 0.2s ease,
+    background-color 0.2s ease;
+}
+
+.model-card-preview__tag--industry {
+  display: block;
+  width: 100%;
+  white-space: normal;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  text-align: center;
+}
+
+.model-card-preview__tag--chapters {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+}
+
+.model-card-preview__tag:hover {
+  color: #c53355;
+  border-color: transparent;
+  background: #fdf0f2;
+}
+
+.model-card-preview__desc {
+  margin: 12px 0 0;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.7;
+  color: #606266;
+  text-align: center;
+  word-break: break-word;
+}
+</style>