aegon-dangerious 1.0.0

package/build-report/components/ReportTemplatePicker.vue

@@ -0,0 +1,802 @@
+<template>
+  <section class="report-template-picker">
+    <section class="template-center-hero">
+      <h2 class="template-center-hero__title">選擇模板</h2>
+      <p class="template-center-hero__desc gen-ai-page-hero-desc">點擊列表中的模板進入詳情與章節預覽</p>
+    </section>
+
+    <section class="template-center-toolbar">
+      <div class="template-center-toolbar__controls">
+        <div class="template-center-toolbar__right">
+          <label class="template-center-field">
+            <span class="gen-ai-filter-field-label">單位</span>
+            <el-select v-model="unitFilter" placeholder="" clearable class="template-center-field__select">
+              <el-option v-for="item in unitOptions" :key="item" :label="item" :value="item" />
+            </el-select>
+          </label>
+
+          <label class="template-center-field">
+            <span class="gen-ai-filter-field-label">Search</span>
+            <el-input v-model="keyword" clearable class="template-center-field__input" />
+          </label>
+
+          <button type="button"
+            class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--primary"
+            @click="handleRefresh">
+            Refresh
+          </button>
+        </div>
+      </div>
+    </section>  
+
+    <el-table :data="paginatedTemplates" class="template-center-table gen-ai-template-table-header" table-layout="fixed"
+      @row-click="handleRowClick">
+      <el-table-column label="模板名稱" width="140" class-name="template-col-d1">
+        <template #default="{ row }">
+          <div class="template-center-cell-body template-center-cell-body--name">
+            <span class="template-center-name">{{ row.name }}</span>
+          </div>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="模板描述" min-width="300" class-name="template-col-d2">
+        <template #default="{ row }">
+          <div class="template-center-cell-divider">
+            <p class="template-center-desc">{{ row.description }}</p>
+          </div>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="章節結構" min-width="420" class-name="template-col-d3">
+        <template #default="{ row }">
+          <div class="template-center-cell-divider template-center-cell-divider--chapters">
+            <div class="template-center-chapters-wrap" :style="chapterWrapStyle(row.chapters)">
+              <div v-for="cols in [splitChapterColumns(row.chapters)]" :key="row.id" class="template-center-chapters">
+                <ul class="template-center-chapters-col">
+                  <ChapterTitleScroll v-for="(chapter, index) in cols.left" :key="`l-${row.id}-${index}`"
+                    :title="chapter" @click.stop />
+                </ul>
+                <ul class="template-center-chapters-col">
+                  <ChapterTitleScroll v-for="(chapter, index) in cols.right" :key="`r-${row.id}-${index}`"
+                    :title="chapter" @click.stop />
+                  <li v-if="cols.hasMore" class="template-center-chapters-ellipsis" @click.stop>
+                    <button type="button" class="template-center-chapters-ellipsis-btn" title="查看全部章節"
+                      @click.stop.prevent="openChapterDialog(row, $event)">
+                      ...
+                    </button>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="模板作者" width="250" class-name="template-col-d4 template-col-author">
+        <template #default="{ row }">
+          <div class="template-center-cell-divider">
+            <div class="template-center-author">
+              <div>作者：{{ row.author }}</div>
+              <div>審批：{{ row.approver }}</div>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="最後更新時間" width="168" class-name="template-col-d5 template-col-updated">
+        <template #default="{ row }">
+          <div
+            class="template-center-cell-divider template-center-cell-divider--updated template-center-cell-divider--d5">
+            <span class="template-center-updated">{{ row.updatedAt }}</span>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="gen-ai-pagination">
+      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 20]"
+        layout="prev, pager, next, sizes, ->, jumper, total" :total="filteredTemplates.length" background />
+    </div>
+
+    <el-dialog v-model="chapterDialogVisible" width="60%" append-to-body :z-index="10000" :show-close="false"
+      modal-class="template-center-chapter-overlay" class="template-center-chapter-dialog"
+      header-class="template-center-chapter-dialog__header">
+      <template #header="{ close, titleId, titleClass }">
+        <span :id="titleId" :class="['template-center-chapter-dialog__title', titleClass]">章節結構</span>
+        <button type="button" class="template-center-chapter-dialog__close" aria-label="關閉" @click="close">×</button>
+      </template>
+      <ul class="template-center-chapters template-center-chapters--dialog">
+        <li v-for="(chapter, index) in chapterDialogChapters" :key="`dlg-${index}`">{{ chapter }}</li>
+      </ul>
+    </el-dialog>
+  </section>
+</template>
+
+<script lang="ts">
+import {
+  MOCK_TEMPLATES,
+  fetchReportTemplateList,
+  type ReportTemplateCard,
+  type TemplateItem,
+} from '../report-template-data'
+
+export type { ReportTemplateCard, TemplateItem }
+export {
+  MOCK_TEMPLATES,
+  fetchReportTemplateList,
+  MOCK_REPORT_TEMPLATES,
+  resolveReportTemplateById,
+} from '../report-template-data'
+
+export const CHAPTER_DISPLAY_MAX = 14
+export const CHAPTER_FIRST_COL_COUNT = 7
+export const CHAPTER_LINE_HEIGHT = 22
+export const CHAPTER_ROW_GAP = 4
+
+export interface ChapterColumns {
+  left: string[]
+  right: string[]
+  hasMore: boolean
+}
+
+export function splitChapterColumns(chapters: string[]): ChapterColumns {
+  const visible =
+    chapters.length > CHAPTER_DISPLAY_MAX ? chapters.slice(0, CHAPTER_DISPLAY_MAX - 1) : chapters
+
+  return {
+    left: visible.slice(0, CHAPTER_FIRST_COL_COUNT),
+    right: visible.slice(CHAPTER_FIRST_COL_COUNT),
+    hasMore: chapters.length > CHAPTER_DISPLAY_MAX,
+  }
+}
+
+function chapterColumnRowCount(columns: ChapterColumns) {
+  return Math.max(columns.left.length, columns.right.length + (columns.hasMore ? 1 : 0))
+}
+
+function chapterBlockHeight(rowCount: number) {
+  if (rowCount <= 0) return 0
+  return rowCount * CHAPTER_LINE_HEIGHT + Math.max(0, rowCount - 1) * CHAPTER_ROW_GAP
+}
+
+export function chapterWrapStyle(chapters: string[]) {
+  const rowCount = chapterColumnRowCount(splitChapterColumns(chapters))
+  const contentHeight = chapterBlockHeight(rowCount)
+  return { height: `${contentHeight}px` }
+}
+</script>
+
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { computed, onMounted, ref, watch } from 'vue'
+import ChapterTitleScroll from './ChapterTitleScroll.vue'
+
+const unitOptions = ['風險管理部', '授信審批部', '合規部', '公司金融部']
+
+const unitFilter = ref('')
+const keyword = ref('')
+const currentPage = ref(1)
+const pageSize = ref(5)
+const templates = ref<TemplateItem[]>([...MOCK_TEMPLATES])
+
+const chapterDialogVisible = ref(false)
+const chapterDialogChapters = ref<string[]>([])
+
+const emit = defineEmits<{
+  select: [template: ReportTemplateCard]
+}>()
+
+function isTemplateList(data: unknown) {
+  return Array.isArray(data) && data.length > 0 && typeof data[0]?.id === 'string'
+}
+
+async function loadTemplates() {
+  const data = await fetchReportTemplateList({
+    unit: unitFilter.value || undefined,
+    keyword: keyword.value.trim() || undefined,
+  })
+  if (isTemplateList(data)) {
+    templates.value = data as TemplateItem[]
+  }
+}
+
+const filteredTemplates = computed(() => {
+  const kw = keyword.value.trim().toLowerCase()
+  return templates.value.filter((item) => {
+    const unitOk = !unitFilter.value || item.unit === unitFilter.value
+    const keywordOk =
+      !kw ||
+      item.name.toLowerCase().includes(kw) ||
+      item.description.toLowerCase().includes(kw) ||
+      item.author.toLowerCase().includes(kw)
+    return unitOk && keywordOk
+  })
+})
+
+const paginatedTemplates = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  return filteredTemplates.value.slice(start, start + pageSize.value)
+})
+
+function toReportTemplateCard(item: TemplateItem): ReportTemplateCard {
+  return {
+    id: item.id,
+    name: item.name,
+    description: item.description,
+    chapters: item.chapters,
+    author: item.author,
+    updatedAt: item.updatedAt,
+  }
+}
+
+function shouldIgnoreRowClick(target: HTMLElement | null) {
+  if (!target) return false
+  return Boolean(
+    target.closest(
+      '.template-center-chapters-ellipsis-btn, .template-center-chapters-ellipsis, .chapter-title-scroll',
+    ),
+  )
+}
+
+function handleRowClick(row: TemplateItem, _column: unknown, event: MouseEvent) {
+  const target = event.target as HTMLElement | null
+  if (shouldIgnoreRowClick(target)) return
+  emit('select', toReportTemplateCard(row))
+}
+
+function openChapterDialog(row: TemplateItem, event?: Event) {
+  event?.stopPropagation()
+  chapterDialogChapters.value = row.chapters
+  chapterDialogVisible.value = true
+}
+
+function handleRefresh() {
+  keyword.value = ''
+  unitFilter.value = ''
+  void loadTemplates()
+  ElMessage.success('已重新整理')
+}
+
+watch([keyword, unitFilter], () => {
+  currentPage.value = 1
+})
+
+watch(filteredTemplates, (list) => {
+  const maxPage = Math.max(1, Math.ceil(list.length / pageSize.value))
+  if (currentPage.value > maxPage) currentPage.value = maxPage
+})
+
+onMounted(() => {
+  void loadTemplates()
+})
+</script>
+
+<style scoped>
+.report-template-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-height: 0;
+}
+</style>
+
+<style>
+/* 與 model-manager 模板中心列表視覺一致 */
+.report-template-picker {
+  --template-col-d1: 140px;
+  --template-col-d4: 250px;
+  --template-col-d5: 168px;
+  --gen-ai-fs-hero: clamp(26px, calc(32 * 100vw / 1920), 32px);
+  --gen-ai-fw-bold: 700;
+  --gen-ai-fs-xs: clamp(11px, calc(12 * 100vw / 1920), 12px);
+  --gen-ai-fs-sm: clamp(12px, calc(13 * 100vw / 1920), 13px);
+  --gen-ai-fs-base: clamp(13px, calc(14 * 100vw / 1920), 14px);
+  --gen-ai-fs-md: clamp(14px, calc(16 * 100vw / 1920), 16px);
+  --gen-ai-fs-xl: clamp(18px, calc(20 * 100vw / 1920), 20px);
+  --gen-ai-fs-chapter: clamp(12px, calc(14 * 100vw / 1920), 14px);
+  --gen-ai-lh-chapter: clamp(18px, calc(22 * 100vw / 1920), 22px);
+  --gen-ai-lh-normal: 1.6;
+  --gen-ai-lh-relaxed: 1.7;
+  --gen-ai-fw-black: 900;
+  --gen-ai-el-table-header-fs: 14px;
+  --gen-ai-el-table-header-color: #303133;
+  --gen-ai-el-table-row-fs: 14px;
+  --gen-ai-el-table-row-color: #606266;
+  --report-accent: #c53355;
+  --report-accent-soft: #fdf0f2;
+  font-size: var(--gen-ai-fs-base);
+  line-height: var(--gen-ai-lh-normal);
+  color: #2d3139;
+}
+
+.report-template-picker .template-center-hero {
+  text-align: center;
+  margin-bottom: 28px;
+}
+
+.report-template-picker .template-center-hero__title {
+  margin: 0 0 10px;
+  font-size: var(--gen-ai-fs-hero);
+  font-weight: var(--gen-ai-fw-bold);
+  color: #1a1a1a;
+}
+
+.report-template-picker .template-center-hero__desc {
+  margin: 0;
+}
+
+.report-template-picker .gen-ai-page-hero-desc {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.7;
+  color: #666;
+}
+
+.report-template-picker .gen-ai-filter-field-label {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 500;
+  font-family: Arial, sans-serif;
+  white-space: nowrap;
+}
+
+.report-template-picker .template-center-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  box-sizing: border-box;
+  height: 32px;
+  min-width: 120px;
+  padding: 0 14px;
+  border-radius: 4px;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 15px;
+  font-family: Arial, sans-serif;
+  font-weight: 400;
+}
+
+.report-template-picker .template-center-toolbar-btn--primary {
+  border: 1px solid var(--report-accent);
+  background: var(--report-accent);
+  color: #fff;
+}
+
+.report-template-picker .template-center-toolbar-btn--primary:hover:not(:disabled) {
+  background: #fff;
+  border-color: var(--report-accent);
+  color: var(--report-accent);
+}
+
+.report-template-picker .template-center-toolbar {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.report-template-picker .template-center-toolbar__controls {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.report-template-picker .template-center-toolbar__right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-left: auto;
+}
+
+.report-template-picker .template-center-field {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+}
+
+.report-template-picker .template-center-field__select {
+  width: 180px;
+}
+
+.report-template-picker .template-center-field__input {
+  width: 270px;
+}
+
+.report-template-picker .gen-ai-pagination {
+  margin-top: 8px;
+}
+
+.report-template-picker .gen-ai-pagination .el-pagination {
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 8px 0;
+  font-weight: 400;
+}
+
+.report-template-picker .gen-ai-pagination .el-pagination.is-background .btn-prev,
+.report-template-picker .gen-ai-pagination .el-pagination.is-background .btn-next,
+.report-template-picker .gen-ai-pagination .el-pagination.is-background .el-pager li {
+  background-color: #fff;
+  border: 1px solid #dcdfe6;
+  color: #606266;
+  font-weight: 400;
+  min-width: 32px;
+  height: 32px;
+  line-height: 30px;
+  border-radius: 4px;
+}
+
+.report-template-picker .gen-ai-pagination .el-pagination.is-background .el-pager li.is-active {
+  background-color: var(--report-accent);
+  border-color: var(--report-accent);
+  color: #fff;
+}
+
+.report-template-picker .template-center-table.gen-ai-template-table-header .el-table__header th.el-table__cell,
+.report-template-picker .template-center-table.gen-ai-template-table-header .el-table__header th.el-table__cell .cell {
+  font-size: var(--gen-ai-el-table-header-fs);
+  font-weight: 600;
+  color: var(--gen-ai-el-table-header-color);
+}
+
+.report-template-picker .template-center-table.gen-ai-template-table-header .el-table__body tr.el-table__row,
+.report-template-picker .template-center-table.gen-ai-template-table-header .el-table__body td.el-table__cell,
+.report-template-picker .template-center-table.gen-ai-template-table-header .el-table__body td.el-table__cell .cell,
+.report-template-picker .template-center-table.gen-ai-template-table-header .template-center-name,
+.report-template-picker .template-center-table.gen-ai-template-table-header .template-center-desc,
+.report-template-picker .template-center-table.gen-ai-template-table-header .template-center-updated,
+.report-template-picker .template-center-table.gen-ai-template-table-header .template-center-chapters-col,
+.report-template-picker .template-center-table.gen-ai-template-table-header .chapter-title-scroll,
+.report-template-picker .template-center-table.gen-ai-template-table-header .chapter-title-scroll .chapter-title-scroll__text {
+  font-size: var(--gen-ai-el-table-row-fs);
+  color: var(--gen-ai-el-table-row-color);
+}
+
+.report-template-picker .template-center-table {
+  width: 100%;
+  --el-table-border-color: transparent;
+  background: transparent;
+  overflow: visible;
+}
+
+.report-template-picker .template-center-table .el-table__inner-wrapper,
+.report-template-picker .template-center-table .el-table__body-wrapper,
+.report-template-picker .template-center-table .el-table__header-wrapper,
+.report-template-picker .template-center-table .el-scrollbar__wrap,
+.report-template-picker .template-center-table .el-scrollbar__view,
+.report-template-picker .template-center-table .el-table__body,
+.report-template-picker .template-center-table .el-table__body tbody,
+.report-template-picker .template-center-table .el-table__body tr.el-table__row {
+  overflow: visible !important;
+}
+
+.report-template-picker .template-center-table .el-table__inner-wrapper::before {
+  display: none;
+}
+
+.report-template-picker .template-center-table .el-table__header th.el-table__cell {
+  border-bottom: none;
+  background: transparent;
+  padding: 0 16px 12px;
+  vertical-align: bottom;
+  color: #303133;
+}
+
+.report-template-picker .template-center-table .el-table__header th.el-table__cell .cell {
+  padding: 0;
+}
+
+.report-template-picker .template-center-table .el-table__header th.el-table__cell + th.el-table__cell .cell {
+  position: relative;
+  padding-left: 16px;
+}
+
+.report-template-picker .template-center-table .el-table__body-wrapper .el-table__body {
+  border-collapse: separate;
+  border-spacing: 0 14px;
+}
+
+.report-template-picker .template-center-table .el-table__body td.el-table__cell {
+  vertical-align: top;
+  height: 1px;
+  padding: 20px 16px;
+  border-bottom: none;
+  background: #fff;
+  transition: background-color 0.2s ease;
+}
+
+.report-template-picker .template-center-table .el-table__body tr.el-table__row {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
+  cursor: pointer;
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 0.15s;
+}
+
+.report-template-picker .template-center-table .el-table__body tr.el-table__row:hover {
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+.report-template-picker .template-center-table .el-table__body tr.el-table__row:hover > td.el-table__cell {
+  background-color: #fff !important;
+}
+
+.report-template-picker .template-center-table .el-table__body-wrapper .cell {
+  padding: 0;
+}
+
+.report-template-picker .template-center-table .el-table__body td.el-table__cell:not(:first-child) > .cell {
+  position: relative;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.report-template-picker .template-center-table .el-table__body td.el-table__cell:not(:first-child) > .cell::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: #f0f2f5;
+}
+
+.report-template-picker .template-center-cell-body,
+.report-template-picker .template-center-cell-divider {
+  position: relative;
+  box-sizing: border-box;
+}
+
+.report-template-picker .template-center-cell-divider {
+  width: 100%;
+  padding-left: 16px;
+}
+
+.report-template-picker .template-center-cell-divider--chapters {
+  height: auto;
+}
+
+.report-template-picker .template-center-cell-divider--updated {
+  overflow: visible;
+}
+
+.report-template-picker .template-center-cell-divider--d5 {
+  padding-left: 0;
+}
+
+.report-template-picker .template-center-table .el-table__header th.template-col-d5.el-table__cell,
+.report-template-picker .template-center-table .el-table__body td.template-col-d5.el-table__cell {
+  width: var(--template-col-d5);
+  max-width: var(--template-col-d5);
+  overflow: visible;
+}
+
+.report-template-picker .template-center-table .el-table__header th.template-col-d5 .cell,
+.report-template-picker .template-center-table .el-table__body td.template-col-d5 .cell {
+  padding-left: 16px;
+  padding-right: 16px;
+  white-space: nowrap;
+  overflow: visible;
+  text-align: left;
+}
+
+.report-template-picker .template-center-table .el-table__body tr.el-table__row td.template-col-d5.el-table__cell:last-child > .cell {
+  display: block;
+  justify-content: flex-start;
+}
+
+.report-template-picker .template-center-table .el-table__body tr.el-table__row td.el-table__cell:first-child {
+  overflow: visible !important;
+  border-radius: 8px 0 0 8px;
+  border: 1px solid #ebeef5;
+  border-right: none;
+}
+
+.report-template-picker .template-center-table .el-table__body tr.el-table__row td.el-table__cell:last-child {
+  border-radius: 0 8px 8px 0;
+  border: 1px solid #ebeef5;
+  border-left: none;
+}
+
+.report-template-picker .template-center-table .el-table__body tr.el-table__row td.el-table__cell:not(:first-child):not(:last-child) {
+  border-top: 1px solid #ebeef5;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.report-template-picker .template-center-name {
+  display: block;
+}
+
+.report-template-picker .template-center-updated {
+  display: block;
+  line-height: var(--gen-ai-lh-normal);
+  white-space: nowrap;
+}
+
+.report-template-picker .template-center-desc {
+  margin: 0;
+  line-height: var(--gen-ai-lh-relaxed);
+  white-space: normal;
+}
+
+.report-template-picker .template-center-chapters-wrap {
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.report-template-picker .template-center-chapters {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+  box-sizing: border-box;
+  height: 100%;
+}
+
+.report-template-picker .template-center-chapters-col {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.report-template-picker .template-center-chapters-col > li + li,
+.report-template-picker .chapter-title-scroll + li,
+.report-template-picker .chapter-title-scroll + .chapter-title-scroll {
+  margin-top: 4px;
+}
+
+.report-template-picker .chapter-title-scroll.is-truncatable {
+  cursor: pointer;
+}
+
+.report-template-picker .chapter-title-scroll.is-truncatable.is-dragging {
+  cursor: grabbing;
+}
+
+.report-template-picker .chapter-title-scroll__ellipsis {
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+.report-template-picker .template-center-table .el-table__body tr.el-table__row:hover .chapter-title-scroll__ellipsis {
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 45%);
+}
+
+.report-template-picker .template-center-chapters-ellipsis {
+  list-style: none;
+}
+
+.report-template-picker .template-center-chapters-ellipsis-btn {
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #c53355;
+  font-size: var(--gen-ai-fs-xl);
+  font-weight: var(--gen-ai-fw-black);
+  height: var(--gen-ai-lh-chapter);
+  line-height: var(--gen-ai-lh-chapter);
+  letter-spacing: 0.05em;
+  cursor: pointer;
+}
+
+.report-template-picker .template-center-chapters-ellipsis-btn:hover {
+  color: #a82d48;
+  text-decoration: underline;
+}
+
+.report-template-picker .template-center-author {
+  font-size: var(--gen-ai-fs-sm);
+  line-height: var(--gen-ai-lh-relaxed);
+  color: #606266;
+}
+
+.report-template-picker .template-center-author > div {
+  white-space: normal;
+  word-break: break-word;
+}
+
+.template-center-chapter-overlay {
+  overflow: auto;
+}
+
+.template-center-chapters--dialog {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px 28px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.template-center-chapters--dialog > li {
+  white-space: normal;
+  overflow: visible;
+}
+
+.template-center-chapter-dialog.el-dialog {
+  --el-dialog-padding-primary: 0;
+  width: 60%;
+  max-width: 80%;
+  max-height: 70%;
+  margin-top: 5%;
+  margin-left: 21%;
+  margin-right: auto;
+  border-radius: 4px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.template-center-chapter-dialog .el-dialog__header,
+.template-center-chapter-dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin: 0;
+  padding: 14px 16px 14px 20px;
+  background: #4a5f7a;
+  flex-shrink: 0;
+}
+
+.template-center-chapter-dialog__title,
+.template-center-chapter-dialog .el-dialog__title {
+  flex: 1;
+  min-width: 0;
+  color: #fff;
+  font-size: clamp(14px, calc(16 * 100vw / 1920), 16px);
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.template-center-chapter-dialog__close {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #fff;
+  font-size: clamp(20px, calc(24 * 100vw / 1920), 24px);
+  font-weight: 400;
+  line-height: 1;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.template-center-chapter-dialog__close:hover {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.template-center-chapter-dialog__close:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.8);
+  outline-offset: 2px;
+}
+
+.template-center-chapter-dialog .el-dialog__body {
+  flex: 1;
+  min-height: 60vh;
+  padding: 24px 20px;
+  background: #fff;
+  color: #606266;
+  font-size: clamp(12px, calc(14 * 100vw / 1920), 14px);
+  line-height: 1.6;
+  overflow-y: auto;
+}
+</style>