aegon-gen 1.0.0

package/src/views/gen-ai/model-manager/index.vue

@@ -0,0 +1,1205 @@
+<template>
+  <div class="template-center-page">
+    <PageHeader title="IR-DEMO" />
+
+    <main ref="pageBodyRef" class="template-center-page__body">
+      <section class="template-center-hero">
+        <h2 class="template-center-hero__title">模板中心</h2>
+        <p class="template-center-hero__desc">所有已配置完畢的報告模板將會在此顯示</p>
+      </section>
+
+      <section class="template-center-toolbar">
+        <div class="template-center-toolbar__tabs">
+          <div class="template-center-toolbar__tabs-left">
+            <button type="button"
+              class="template-center-toolbar-btn template-center-toolbar-btn--primary template-center-btn--create"
+              @click="handleCreate">
+              新建模板
+            </button>
+            <el-badge :value="pendingCount" :max="99" type="danger"
+              :badge-style="{ marginRight: '10px', marginTop: '-5px' }" class="template-center-tab-badge">
+              <button type="button" class="template-center-toolbar-btn template-center-toolbar-btn--outline">
+                待審批模板
+              </button>
+            </el-badge>
+          </div>
+          <div class="template-center-toolbar__tabs-right">
+            <button type="button" class="template-center-toolbar-btn template-center-toolbar-btn--ghost"
+              @click="openRecycleBin">
+              <el-icon>
+                <Delete />
+              </el-icon>
+              回收站
+            </button>
+          </div>
+        </div>
+
+        <div class="template-center-toolbar__controls">
+          <div class="template-center-toolbar__right">
+            <label class="template-center-field">
+              <span class="template-center-field__label">語言</span>
+              <el-select v-model="language" class="template-center-field__select template-center-field__select--lang">
+                <el-option v-for="item in languageOptions" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </label>
+
+            <label class="template-center-field">
+              <span class="template-center-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="template-center-field__label">Search:</span>
+              <el-input v-model="keyword" clearable class="template-center-field__input" />
+            </label>
+
+            <button type="button" class="template-center-toolbar-btn template-center-toolbar-btn--primary"
+              @click="handleRefresh">
+              Refresh
+            </button>
+          </div>
+        </div>
+      </section>
+
+      <el-table ref="tableRef" :data="paginatedTemplates" class="template-center-table">
+        <el-table-column label="模板名稱" min-width="140">
+          <template #default="{ row }">
+            <div class="template-center-cell-body template-center-cell-body--name">
+              <span :ref="(el) => setLockAnchor(row.id, el as HTMLElement | null)"
+                class="template-center-row-lock-anchor" aria-hidden="true" />
+              <span class="template-center-name">{{ row.name }}</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="模板描述" min-width="280">
+          <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="320">
+          <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" />
+                  </ul>
+                  <ul class="template-center-chapters-col">
+                    <ChapterTitleScroll v-for="(chapter, index) in cols.right" :key="`r-${row.id}-${index}`"
+                      :title="chapter" />
+                    <li v-if="cols.hasMore" class="template-center-chapters-ellipsis">
+                      <button type="button" class="template-center-chapters-ellipsis-btn" title="查看全部章節"
+                        @click="openChapterDialog(row)">
+                        ...
+                      </button>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+
+        <!-- 模板作者 + 最後更新時間等宽；250px 可容納「作者：王明輝（風險管理部）」單行 -->
+        <el-table-column label="模板作者" width="250" class-name="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="250" class-name="template-col-updated">
+          <template #default="{ row }">
+            <div class="template-center-cell-divider template-center-cell-divider--updated">
+              <span class="template-center-updated">{{ row.updatedAt }}</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="" width="132" align="center" class-name="template-col-actions">
+          <template #default="{ row }">
+            <div class="template-center-cell-divider template-center-cell-divider--actions">
+              <div class="template-center-row-actions">
+                <button type="button" class="template-center-toolbar-btn template-center-toolbar-btn--ghost"
+                  @click="handleEdit(row)">
+                  {{ getEditActionLabel(row) }}
+                </button>
+                <button type="button" class="template-center-toolbar-btn template-center-toolbar-btn--ghost"
+                  @click="toggleLock(row)">
+                  {{ getLockActionLabel(row) }}
+                </button>
+                <button type="button"
+                  class="template-center-toolbar-btn template-center-toolbar-btn--outline template-center-toolbar-btn--delete"
+                  @click="handleDelete(row)">
+                  刪除
+                </button>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="template-center-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>
+    </main>
+
+    <Teleport to="body">
+      <div v-show="!chapterDialogVisible" class="template-center-row-lock-layer">
+        <span v-for="row in paginatedTemplates" v-show="lockPositions[row.id]" :key="`lock-${row.id}`"
+          class="template-center-row-lock-trigger template-center-row-lock-trigger--portal"
+          :title="row.locked ? `${row.locker} 已鎖定` : '模板未鎖定'" :style="getLockStyle(row)">
+          <el-icon :size="25" :color="row.locked ? '#909399' : '#c53355'">
+            <Lock v-if="row.locked" />
+            <Unlock v-else />
+          </el-icon>
+        </span>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import modelManagerApi from '@/api/modules/gen-ai/model-manager/index'
+import PageHeader from '@/components/PageHeader.vue'
+import type { TemplateItem } from '@/types/gen-ai/model-manager/index'
+import { Delete, Lock, Unlock } from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox, type TableInstance } from 'element-plus'
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch, type CSSProperties } from 'vue'
+import ChapterTitleScroll from './ChapterTitleScroll.vue'
+import { MOCK_TEMPLATES } from './mockData'
+
+const CHAPTER_DISPLAY_MAX = 14
+const CHAPTER_FIRST_COL_COUNT = 7
+const CHAPTER_LINE_HEIGHT = 19.5
+const CHAPTER_ROW_GAP = 4
+
+interface ChapterColumns {
+  left: string[]
+  right: string[]
+  hasMore: boolean
+}
+
+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
+}
+
+function chapterWrapStyle(chapters: string[]) {
+  const rowCount = chapterColumnRowCount(splitChapterColumns(chapters))
+  const contentHeight = chapterBlockHeight(rowCount)
+  return { height: `${contentHeight}px` }
+}
+
+const chapterDialogVisible = ref(false)
+const chapterDialogChapters = ref<string[]>([])
+
+function openChapterDialog(row: TemplateItem) {
+  chapterDialogChapters.value = row.chapters
+  chapterDialogVisible.value = true
+}
+
+const unitOptions = ['風險管理部', '授信審批部', '合規部', '公司金融部']
+const languageOptions = [
+  { label: '中文', value: 'zh' },
+  { label: 'English', value: 'en' },
+] as const
+const language = ref<(typeof languageOptions)[number]['value']>('zh')
+const unitFilter = ref('')
+const keyword = ref('')
+const currentPage = ref(1)
+const pageSize = ref(5)
+
+const templates = ref<TemplateItem[]>([...MOCK_TEMPLATES])
+
+function isTemplateList(data: unknown): data is TemplateItem[] {
+  return Array.isArray(data) && data.length > 0 && typeof data[0]?.id === 'string'
+}
+
+async function loadTemplates() {
+  try {
+    const data = await modelManagerApi.fetchTemplateListData({
+      language: language.value,
+    })
+    if (isTemplateList(data)) {
+      templates.value = data
+    }
+  } catch {
+    // 介面不可用時保留 mock 資料
+  }
+}
+
+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 pendingCount = computed(() => filteredTemplates.value.length)
+
+const paginatedTemplates = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  return filteredTemplates.value.slice(start, start + pageSize.value)
+})
+
+const LOCK_OFFSET_LEFT = 65
+
+const tableRef = ref<TableInstance>()
+const pageBodyRef = ref<HTMLElement>()
+const lockAnchors = new Map<string, HTMLElement>()
+const lockPositions = reactive<Record<string, { left: number; top: number } | null>>({})
+
+function setLockAnchor(id: string, el: HTMLElement | null) {
+  if (el) lockAnchors.set(id, el)
+  else lockAnchors.delete(id)
+}
+
+function getLockStyle(row: TemplateItem): CSSProperties {
+  const pos = lockPositions[row.id]
+  if (!pos) return { display: 'none' }
+
+  return {
+    position: 'fixed',
+    left: `15px`,
+    top: `${pos.top}px`,
+    transform: 'translateY(-50%)',
+    zIndex: 99,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '25px',
+    height: '25px',
+    cursor: 'help',
+    pointerEvents: 'auto',
+  }
+}
+
+function updateLockPositions() {
+  const activeIds = new Set(paginatedTemplates.value.map((row) => row.id))
+
+  for (const id of Object.keys(lockPositions)) {
+    if (!activeIds.has(id)) delete lockPositions[id]
+  }
+
+  paginatedTemplates.value.forEach((row) => {
+    const anchor = lockAnchors.get(row.id)
+    if (!anchor) {
+      lockPositions[row.id] = null
+      return
+    }
+
+    const rect = anchor.getBoundingClientRect()
+    const rowEl = anchor.closest('tr')
+    const rowRect = rowEl?.getBoundingClientRect() ?? rect
+
+    if (rowRect.bottom < 0 || rowRect.top > window.innerHeight) {
+      lockPositions[row.id] = null
+      return
+    }
+
+    lockPositions[row.id] = {
+      left: rect.left - LOCK_OFFSET_LEFT,
+      top: rowRect.top + rowRect.height / 2,
+    }
+  })
+}
+
+let lockRafId = 0
+function scheduleLockUpdate() {
+  cancelAnimationFrame(lockRafId)
+  lockRafId = requestAnimationFrame(updateLockPositions)
+}
+
+let tableBodyWrapper: HTMLElement | null = null
+let resizeObserver: ResizeObserver | null = null
+
+function bindLockListeners() {
+  tableBodyWrapper?.removeEventListener('scroll', scheduleLockUpdate)
+  pageBodyRef.value?.removeEventListener('scroll', scheduleLockUpdate)
+
+  const tableEl = tableRef.value?.$el as HTMLElement | undefined
+  if (tableEl) {
+    tableBodyWrapper = tableEl.querySelector('.el-table__body-wrapper')
+    tableBodyWrapper?.addEventListener('scroll', scheduleLockUpdate, { passive: true })
+    resizeObserver?.disconnect()
+    resizeObserver = new ResizeObserver(scheduleLockUpdate)
+    resizeObserver.observe(tableEl)
+  }
+
+  pageBodyRef.value?.addEventListener('scroll', scheduleLockUpdate, { passive: true })
+  scheduleLockUpdate()
+}
+
+onMounted(() => {
+  void loadTemplates()
+  nextTick(() => {
+    bindLockListeners()
+    nextTick(scheduleLockUpdate)
+  })
+
+  window.addEventListener('resize', scheduleLockUpdate, { passive: true })
+})
+
+onBeforeUnmount(() => {
+  cancelAnimationFrame(lockRafId)
+  window.removeEventListener('resize', scheduleLockUpdate)
+  tableBodyWrapper?.removeEventListener('scroll', scheduleLockUpdate)
+  pageBodyRef.value?.removeEventListener('scroll', scheduleLockUpdate)
+  resizeObserver?.disconnect()
+})
+
+watch(paginatedTemplates, () => nextTick(() => {
+  bindLockListeners()
+  scheduleLockUpdate()
+}), { flush: 'post' })
+watch(currentPage, () => nextTick(scheduleLockUpdate))
+watch(pageSize, () => nextTick(scheduleLockUpdate))
+
+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
+})
+
+function handleRefresh() {
+  keyword.value = ''
+  unitFilter.value = ''
+  void loadTemplates()
+  ElMessage.success('已重新整理')
+}
+
+function handleCreate() {
+  ElMessage.info('新建模板（演示）')
+}
+
+function openRecycleBin() {
+  ElMessage.info('回收站（演示）')
+}
+
+function getEditActionLabel(row: TemplateItem) {
+  return row.locked ? '複製並編輯' : '編輯'
+}
+
+function getLockActionLabel(row: TemplateItem) {
+  return row.locked ? '解鎖模板' : '鎖定'
+}
+
+function handleEdit(row: TemplateItem) {
+  if (row.locked) {
+    ElMessage.info(`複製並編輯：${row.name}`)
+    return
+  }
+  ElMessage.info(`編輯：${row.name}`)
+}
+
+async function handleDelete(row: TemplateItem) {
+  const message = row.locked
+    ? `模板「${row.name}」已鎖定，確定仍要刪除嗎？`
+    : `確定刪除模板「${row.name}」嗎？`
+  try {
+    await ElMessageBox.confirm(message, '刪除', {
+      confirmButtonText: '確定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    ElMessage.success(`已刪除：${row.name}`)
+  } catch {
+    // 用戶取消
+  }
+}
+
+async function toggleLock(row: TemplateItem) {
+  const willLock = !row.locked
+  const title = willLock ? '鎖定模板' : '解鎖模板'
+  const message = willLock ? `確定鎖定模板「${row.name}」嗎？` : `確定解鎖模板「${row.name}」嗎？`
+  try {
+    await ElMessageBox.confirm(message, title, {
+      confirmButtonText: '確定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    row.locked = willLock
+    ElMessage.success(willLock ? '模板已鎖定' : '模板已解鎖')
+  } catch {
+    // 用戶取消
+  }
+}
+</script>
+
+<style scoped>
+.template-center-page {
+  --report-accent: #c53355;
+  --report-accent-soft: #fdf0f2;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+  background: #fff;
+}
+
+.template-center-page__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  margin-left: 30px;
+  padding: 32px 24px 40px;
+  box-sizing: border-box;
+}
+
+.template-center-hero {
+  text-align: center;
+  margin-bottom: 28px;
+}
+
+.template-center-hero__title {
+  margin: 0 0 10px;
+  font-size: 28px;
+  font-weight: 700;
+  color: #1a1a1a;
+}
+
+.template-center-hero__desc {
+  margin: 0;
+  font-size: 14px;
+  color: #666;
+}
+
+.template-center-toolbar {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.template-center-toolbar__tabs {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.template-center-toolbar__tabs-left {
+  display: flex;
+  align-items: center;
+}
+
+.template-center-toolbar__tabs-right {
+  display: flex;
+  align-items: center;
+}
+
+.template-center-btn--create {
+  margin-right: 15px;
+}
+
+.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;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+  font-family: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.template-center-toolbar-btn--primary {
+  border: 1px solid var(--app-btn-border, #c53355);
+  background: var(--app-btn-bg, #c53355);
+  color: var(--app-btn-color, #fff);
+}
+
+.template-center-toolbar-btn--primary:hover {
+  background: var(--app-btn-bg-hover, #fff);
+  border-color: var(--app-btn-border-hover, #c53355);
+  color: var(--app-btn-color-hover, #c53355);
+}
+
+.template-center-toolbar-btn--outline {
+  border: 1px solid var(--report-accent, #c53355);
+  color: var(--report-accent, #c53355);
+  background: #fff;
+}
+
+.template-center-toolbar-btn--outline:hover {
+  border-color: var(--report-accent, #c53355);
+  color: var(--report-accent, #c53355);
+  background: var(--report-accent-soft, #fdf0f2);
+}
+
+/* 刪除：與返回章節編輯一致，默認 opacity 0.8，移入 1 */
+.template-center-toolbar-btn--delete {
+  border-color: var(--report-accent, #c53355);
+  color: var(--report-accent, #c53355);
+  background: #fff;
+  opacity: 0.8;
+}
+
+.template-center-toolbar-btn--delete:hover {
+  border-color: var(--report-accent, #c53355);
+  color: var(--report-accent, #c53355);
+  background: var(--report-accent-soft, #fdf0f2);
+  opacity: 1;
+}
+
+.template-center-toolbar-btn--ghost {
+  border: 1px solid #dcdfe6;
+  background: #fff;
+  color: #606266;
+  font-weight: 500;
+}
+
+.template-center-toolbar-btn--ghost:hover {
+  border-color: var(--report-accent, #c53355);
+  color: var(--report-accent, #c53355);
+  background: var(--report-accent-soft, #fdf0f2);
+}
+
+.template-center-toolbar__controls {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.template-center-toolbar__right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-left: auto;
+}
+
+.template-center-field {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+}
+
+.template-center-field__label {
+  font-size: 14px;
+  color: #606266;
+  white-space: nowrap;
+}
+
+.template-center-field__select {
+  width: 120px;
+}
+
+.template-center-field__select--lang {
+  width: 108px;
+}
+
+.template-center-field__input {
+  width: 180px;
+}
+
+.template-center-table {
+  width: 100%;
+  --el-table-border-color: transparent;
+  background: transparent;
+  overflow: visible;
+}
+
+.template-center-table :deep(.el-table__inner-wrapper),
+.template-center-table :deep(.el-table__body-wrapper),
+.template-center-table :deep(.el-table__header-wrapper),
+.template-center-table :deep(.el-scrollbar__wrap),
+.template-center-table :deep(.el-scrollbar__view),
+.template-center-table :deep(.el-table__body),
+.template-center-table :deep(.el-table__body tbody),
+.template-center-table :deep(.el-table__body tr.el-table__row) {
+  overflow: visible !important;
+}
+
+.template-center-table :deep(.el-table__inner-wrapper::before) {
+  display: none;
+}
+
+.template-center-table :deep(.el-table__header th.el-table__cell) {
+  border-bottom: none;
+  background: transparent;
+  padding: 0 16px 12px;
+  vertical-align: bottom;
+  color: #1a1a1a;
+  font-weight: 600;
+}
+
+.template-center-table :deep(.el-table__header th.el-table__cell .cell) {
+  padding: 0;
+}
+
+.template-center-table :deep(.el-table__header th.el-table__cell + th.el-table__cell .cell) {
+  position: relative;
+  padding-left: 16px;
+}
+
+.template-center-table :deep(.el-table__body-wrapper .el-table__body) {
+  border-collapse: separate;
+  border-spacing: 0 14px;
+}
+
+.template-center-table :deep(.el-table__body td.el-table__cell) {
+  vertical-align: top;
+  height: 1px;
+  padding: 20px 16px;
+  border-bottom: none;
+  background: #fff;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+}
+
+.template-center-table :deep(.el-table__body tr.el-table__row) {
+  background: #fff;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
+}
+
+.template-center-table :deep(.el-table__body tr.el-table__row:hover > td.el-table__cell) {
+  background-color: #fff !important;
+  box-shadow: none;
+}
+
+.template-center-table :deep(.el-table__body tr.el-table__row:hover td.el-table__cell:first-child) {
+  border-color: rgba(197, 51, 85, 0.5);
+}
+
+.template-center-table :deep(.el-table__body tr.el-table__row:hover td.el-table__cell:last-child) {
+  border-color: rgba(197, 51, 85, 0.5);
+}
+
+.template-center-table :deep(.el-table__body tr.el-table__row:hover td.el-table__cell:not(:first-child):not(:last-child)) {
+  border-top-color: rgba(197, 51, 85, 0.5);
+  border-bottom-color: rgba(197, 51, 85, 0.5);
+}
+
+.template-center-table :deep(.el-table__body-wrapper .cell) {
+  padding: 0;
+}
+
+.template-center-table :deep(.el-table__body td.el-table__cell:not(:first-child) > .cell) {
+  position: relative;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.template-center-table :deep(.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;
+}
+
+.template-center-cell-body,
+.template-center-cell-divider {
+  position: relative;
+  box-sizing: border-box;
+}
+
+.template-center-cell-divider {
+  width: 100%;
+  padding-left: 16px;
+}
+
+.template-center-cell-divider::before {
+  display: none;
+}
+
+.template-center-cell-divider--chapters {
+  height: auto;
+}
+
+.template-center-cell-divider--updated {
+  overflow: visible;
+}
+
+.template-center-cell-divider--actions {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 0;
+}
+
+.template-center-table :deep(.el-table__body tr.el-table__row td.el-table__cell:last-child > .cell) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.template-center-table :deep(.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;
+}
+
+.template-center-table :deep(.el-table__body tr.el-table__row td.el-table__cell:first-child > .cell) {
+  overflow: visible !important;
+  position: relative;
+}
+
+.template-center-cell-body.template-center-cell-body--name {
+  position: static;
+}
+
+.template-center-row-lock-anchor {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.template-center-table :deep(.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;
+}
+
+.template-center-table :deep(.el-table__header th.template-col-author),
+.template-center-table :deep(.el-table__header th.template-col-updated),
+.template-center-table :deep(.el-table__body td.template-col-author),
+.template-center-table :deep(.el-table__body td.template-col-updated) {
+  overflow: visible;
+}
+
+.template-center-table :deep(.el-table__header th.template-col-author .cell),
+.template-center-table :deep(.el-table__header th.template-col-updated .cell),
+.template-center-table :deep(.el-table__body td.template-col-author .cell),
+.template-center-table :deep(.el-table__body td.template-col-updated .cell) {
+  overflow: visible;
+}
+
+.template-center-table :deep(.el-table__header th.template-col-updated .cell),
+.template-center-table :deep(.el-table__body td.template-col-updated .cell) {
+  white-space: nowrap;
+}
+
+.template-center-table :deep(.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;
+}
+
+.template-center-name {
+  display: block;
+  font-size: 14px;
+  color: #303133;
+  font-weight: 500;
+}
+
+.template-center-updated {
+  display: block;
+  font-size: 13px;
+  line-height: 1.5;
+  color: #606266;
+  white-space: nowrap;
+}
+
+.template-center-desc {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.65;
+  color: #606266;
+  white-space: normal;
+}
+
+.template-center-chapters-wrap {
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.template-center-chapters {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+  box-sizing: border-box;
+  height: 100%;
+}
+
+.template-center-chapters-col {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 13px;
+  color: #606266;
+}
+
+.template-center-table :deep(.el-table__body tr.el-table__row:hover .chapter-title-scroll__ellipsis) {
+  background: linear-gradient(90deg, rgba(245, 247, 250, 0) 0%, #f5f7fa 45%);
+}
+
+.template-center-chapters-col>li+li,
+.chapter-title-scroll+li,
+.chapter-title-scroll+.chapter-title-scroll {
+  margin-top: 4px;
+}
+
+.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-chapters-ellipsis {
+  list-style: none;
+}
+
+.template-center-chapters-ellipsis-btn {
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #c53355;
+  font-size: 20px;
+  font-weight: 900;
+  height: 19.5px;
+  line-height: 19.5px;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+}
+
+.template-center-chapters-ellipsis-btn:hover {
+  color: #a82d48;
+  text-decoration: underline;
+}
+
+.template-center-author {
+  font-size: 13px;
+  line-height: 1.7;
+  color: #606266;
+}
+
+.template-center-author>div {
+  white-space: normal;
+  word-break: break-word;
+}
+
+.template-center-row-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+  width: 100%;
+  max-width: 132px;
+}
+
+.template-center-row-actions .template-center-toolbar-btn {
+  width: 100%;
+  min-width: 0;
+}
+
+.template-center-pagination {
+  margin-top: 20px;
+}
+
+.template-center-pagination :deep(.el-pagination) {
+  width: 100%;
+  font-size: 14px;
+  font-weight: 400;
+  color: #606266;
+}
+
+.template-center-pagination :deep(.el-pagination.is-background .btn-prev),
+.template-center-pagination :deep(.el-pagination.is-background .btn-next),
+.template-center-pagination :deep(.el-pagination.is-background .el-pager li) {
+  margin: 0 4px;
+  min-width: 32px;
+  height: 32px;
+  line-height: 30px;
+  padding: 0;
+  background-color: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  color: #606266;
+  font-weight: 400;
+  box-sizing: border-box;
+}
+
+.template-center-pagination :deep(.el-pagination.is-background .btn-prev),
+.template-center-pagination :deep(.el-pagination.is-background .btn-next) {
+  margin-left: 0;
+}
+
+.template-center-pagination :deep(.el-pagination.is-background .btn-prev .el-icon),
+.template-center-pagination :deep(.el-pagination.is-background .btn-next .el-icon) {
+  font-size: 12px;
+  color: #909399;
+}
+
+.template-center-pagination :deep(.el-pagination.is-background .btn-prev:disabled),
+.template-center-pagination :deep(.el-pagination.is-background .btn-next:disabled),
+.template-center-pagination :deep(.el-pagination.is-background .btn-prev.is-disabled),
+.template-center-pagination :deep(.el-pagination.is-background .btn-next.is-disabled) {
+  color: #c0c4cc;
+  background-color: #fff;
+  border-color: #e4e7ed;
+}
+
+.template-center-pagination :deep(.el-pagination.is-background .btn-prev:disabled .el-icon),
+.template-center-pagination :deep(.el-pagination.is-background .btn-next:disabled .el-icon),
+.template-center-pagination :deep(.el-pagination.is-background .btn-prev.is-disabled .el-icon),
+.template-center-pagination :deep(.el-pagination.is-background .btn-next.is-disabled .el-icon) {
+  color: #c0c4cc;
+}
+
+.template-center-pagination :deep(.el-pagination.is-background .el-pager li.is-active) {
+  background-color: #c53355;
+  border-color: #c53355;
+  color: #fff;
+  font-weight: 600;
+}
+
+.template-center-pagination :deep(.el-pagination.is-background .el-pager li.is-active:hover) {
+  color: #fff;
+}
+
+.template-center-pagination :deep(.el-pagination__sizes) {
+  margin-left: 8px;
+  color: #606266;
+}
+
+.template-center-pagination :deep(.el-pagination__sizes .el-select) {
+  width: 96px;
+}
+
+.template-center-pagination :deep(.el-pagination__sizes .el-select__wrapper) {
+  min-height: 32px;
+  padding: 0 8px;
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px #dcdfe6 inset;
+  background-color: #fff;
+}
+
+.template-center-pagination :deep(.el-pagination__sizes .el-select__placeholder),
+.template-center-pagination :deep(.el-pagination__sizes .el-select__selected-item) {
+  color: #606266;
+  font-size: 14px;
+}
+
+.template-center-pagination :deep(.el-pagination__rightwrapper) {
+  flex: 1;
+  justify-content: flex-end;
+}
+
+.template-center-pagination :deep(.el-pagination__jump) {
+  margin-left: 0;
+  color: #606266;
+  font-size: 14px;
+}
+
+.template-center-pagination :deep(.el-pagination__goto) {
+  margin-right: 8px;
+}
+
+.template-center-pagination :deep(.el-pagination__editor.el-input) {
+  width: 48px;
+  margin: 0;
+}
+
+.template-center-pagination :deep(.el-pagination__editor .el-input__wrapper) {
+  min-height: 32px;
+  padding: 0 8px;
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px #dcdfe6 inset;
+  background-color: #fff;
+}
+
+.template-center-pagination :deep(.el-pagination__editor .el-input__inner) {
+  text-align: center;
+  color: #606266;
+  font-size: 14px;
+}
+
+.template-center-pagination :deep(.el-pagination__classifier) {
+  margin-left: 8px;
+  color: #606266;
+}
+
+.template-center-pagination :deep(.el-pagination__total) {
+  margin-left: 16px;
+  color: #606266;
+  font-size: 14px;
+  font-weight: 400;
+}
+</style>
+
+<style>
+.template-center-tab-badge .el-badge__content.el-badge__content--danger.is-fixed {
+  margin-right: 10px !important;
+  margin-top: -5px !important;
+}
+
+.template-center-row-lock-layer {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  pointer-events: none;
+}
+
+.template-center-row-lock-trigger--portal {
+  line-height: 0;
+}
+
+.template-center-row-lock-trigger--portal .el-icon {
+  width: 25px;
+  height: 25px;
+}
+
+.template-center-row-lock-trigger--portal .el-icon svg {
+  width: 25px;
+  height: 25px;
+}
+
+/* 章節結構彈窗（append-to-body，需全局樣式） */
+.template-center-chapter-overlay {
+  overflow: auto;
+}
+
+.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: 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: 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: 13px;
+  line-height: 1.6;
+  overflow-y: auto;
+}
+</style>