aegon-lv82 1.0.0

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

@@ -0,0 +1,1583 @@
+<template>
+  <div class="template-center-page">
+    <main class="template-center-page__body">
+      <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__tabs">
+          <div class="template-center-toolbar__tabs-left">
+            <button
+              type="button"
+              class="template-center-toolbar-btn gen-ai-action-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 gen-ai-action-btn template-center-toolbar-btn--outline"
+                @click="openPendingProcess"
+              >
+                待審批模板
+              </button>
+            </el-badge>
+          </div>
+          <div class="template-center-toolbar__tabs-right">
+            <button
+              type="button"
+              class="template-center-toolbar-btn gen-ai-action-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="gen-ai-filter-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="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>
+
+      <div class="template-center-card-grid">
+        <ModelCard
+          v-for="row in paginatedTemplates"
+          :key="row.id"
+          :template="row"
+          @edit="handleEdit"
+          @lock="handleToggleLock"
+          @delete="handleDelete"
+        />
+      </div>
+
+      <GenAiPagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[4]"
+        :total="filteredTemplates.length"
+      />
+
+      <!-- //newww dialog — 查看詳情 / 處理（同頁彈出，不另封組件） -->
+      <el-dialog
+        v-model="detailDialogVisible"
+        width="80%"
+        append-to-body
+        :z-index="10000"
+        :show-close="false"
+        modal-class="template-detail-overlay"
+        class="template-detail-dialog"
+        header-class="template-detail-dialog__header"
+        @closed="resetDetailForm"
+      >
+        <template #header="{ close, titleId, titleClass }">
+          <span :id="titleId" :class="['template-detail-dialog__title', titleClass]">{{
+            detailDialogTitle
+          }}</span>
+          <button
+            type="button"
+            class="template-detail-dialog__close"
+            :aria-label="TEMPLATE_DETAIL_MSG.closeAriaLabel"
+            @click="close"
+          >
+            ×
+          </button>
+        </template>
+
+        <div v-if="templateDetail" class="template-detail-form">
+          <label class="template-detail-field template-detail-field--row">
+            <span class="template-detail-label">{{ TEMPLATE_DETAIL_MSG.sourceReport }}</span>
+            <div class="template-detail-field__control">
+              <span class="template-detail-source">{{ templateDetail.sourceReport }}</span>
+            </div>
+          </label>
+
+          <label class="template-detail-field template-detail-field--row">
+            <span class="template-detail-label">
+              {{ TEMPLATE_DETAIL_MSG.primaryLanguage
+              }}<span class="template-detail-label__required">*</span>
+            </span>
+            <div class="template-detail-field__control template-detail-field__control--lang">
+              <el-input
+                :model-value="detailLanguageDisplay"
+                disabled
+                class="template-detail-field__input"
+              />
+            </div>
+          </label>
+
+          <label class="template-detail-field template-detail-field--row">
+            <span class="template-detail-label">
+              {{ TEMPLATE_DETAIL_MSG.templateTitle
+              }}<span class="template-detail-label__required">*</span>
+            </span>
+            <div class="template-detail-field__control">
+              <el-input
+                v-model="detailEditableTitle"
+                :maxlength="TEMPLATE_DETAIL_LIMITS.titleMax"
+                show-word-limit
+                :disabled="!isDetailProcessMode"
+                class="template-detail-field__input"
+              />
+            </div>
+          </label>
+
+          <label
+            class="template-detail-field template-detail-field--row template-detail-field--textarea-row"
+          >
+            <span class="template-detail-label">
+              {{ TEMPLATE_DETAIL_MSG.templateDescription
+              }}<span class="template-detail-label__required">*</span>
+            </span>
+            <div class="template-detail-field__control">
+              <el-input
+                v-model="detailEditableDescription"
+                type="textarea"
+                :rows="4"
+                :maxlength="TEMPLATE_DETAIL_LIMITS.descMax"
+                show-word-limit
+                resize="none"
+                :disabled="!isDetailProcessMode"
+                class="template-detail-field__textarea"
+              />
+            </div>
+          </label>
+
+          <div
+            v-for="chapter in detailDisplayChapters"
+            :key="chapter.id"
+            class="template-detail-chapter"
+          >
+            <h4 class="template-detail-chapter__title">
+              {{ chapter.title || TEMPLATE_DETAIL_MSG.chapterTitleFallback }}
+            </h4>
+
+            <label
+              class="template-detail-field template-detail-field--row template-detail-field--textarea-row"
+            >
+              <span class="template-detail-label">{{ TEMPLATE_DETAIL_MSG.chapterPrompt }}</span>
+              <div class="template-detail-field__control">
+                <el-input
+                  :model-value="chapter.prompt"
+                  type="textarea"
+                  :rows="TEMPLATE_DETAIL_LIMITS.chapterPromptRows"
+                  :maxlength="TEMPLATE_DETAIL_LIMITS.chapterPromptMax"
+                  show-word-limit
+                  resize="none"
+                  disabled
+                  class="template-detail-field__textarea"
+                />
+              </div>
+            </label>
+
+            <label
+              class="template-detail-field template-detail-field--row template-detail-field--textarea-row"
+            >
+              <span class="template-detail-label">{{
+                TEMPLATE_DETAIL_MSG.chapterDescription
+              }}</span>
+              <div class="template-detail-field__control">
+                <el-input
+                  :model-value="chapter.description"
+                  type="textarea"
+                  :rows="TEMPLATE_DETAIL_LIMITS.chapterPromptRows"
+                  :maxlength="TEMPLATE_DETAIL_LIMITS.chapterDescMax"
+                  show-word-limit
+                  resize="none"
+                  disabled
+                  class="template-detail-field__textarea"
+                />
+              </div>
+            </label>
+          </div>
+
+          <section v-if="isDetailProcessMode" class="template-detail-process">
+            <label
+              class="template-detail-field template-detail-field--row template-detail-process__row"
+            >
+              <span class="template-detail-label">
+                {{ TEMPLATE_DETAIL_MSG.processAction
+                }}<span class="template-detail-label__required">*</span>
+              </span>
+              <div class="template-detail-field__control">
+                <el-radio-group
+                  v-model="detailProcessAction"
+                  class="template-detail-process__radios"
+                >
+                  <el-radio value="reject">{{ TEMPLATE_DETAIL_MSG.reject }}</el-radio>
+                  <el-radio value="approve">{{ TEMPLATE_DETAIL_MSG.approve }}</el-radio>
+                </el-radio-group>
+              </div>
+            </label>
+
+            <label
+              class="template-detail-field template-detail-field--row template-detail-field--textarea-row"
+            >
+              <span class="template-detail-label">{{ TEMPLATE_DETAIL_MSG.opinion }}</span>
+              <div class="template-detail-field__control">
+                <el-input
+                  v-model="detailProcessOpinion"
+                  type="textarea"
+                  :rows="4"
+                  :maxlength="TEMPLATE_DETAIL_LIMITS.opinionMax"
+                  show-word-limit
+                  resize="none"
+                  class="template-detail-field__textarea"
+                />
+              </div>
+            </label>
+
+            <div class="template-detail-process__actions">
+              <button
+                type="button"
+                class="template-detail-btn template-detail-btn--ghost"
+                @click="detailDialogVisible = false"
+              >
+                {{ TEMPLATE_DETAIL_MSG.cancel }}
+              </button>
+              <button
+                type="button"
+                class="template-detail-btn template-detail-btn--primary"
+                @click="submitDetailProcess"
+              >
+                {{ TEMPLATE_DETAIL_MSG.submit }}
+              </button>
+            </div>
+          </section>
+
+          <section class="template-detail-approval">
+            <h4 class="template-detail-approval__title">
+              {{ TEMPLATE_DETAIL_MSG.approvalSectionTitle }}
+            </h4>
+            <el-table
+              :data="templateDetail.approvalRecords"
+              border
+              class="template-detail-approval-table"
+            >
+              <el-table-column
+                :label="TEMPLATE_DETAIL_MSG.approvalOperator"
+                min-width="180"
+                prop="operator"
+              />
+              <el-table-column
+                :label="TEMPLATE_DETAIL_MSG.approvalStatus"
+                width="120"
+                prop="status"
+              />
+              <el-table-column
+                :label="TEMPLATE_DETAIL_MSG.approvalCompletedAt"
+                min-width="180"
+                prop="completedAt"
+              />
+              <el-table-column
+                :label="TEMPLATE_DETAIL_MSG.approvalDetail"
+                min-width="200"
+                prop="detail"
+                show-overflow-tooltip
+              />
+            </el-table>
+          </section>
+        </div>
+      </el-dialog>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import '../common/assets/fonts.css'
+import { Delete } from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { GenAiPagination, ModelCard, openTemplateEditor } from '../common'
+import modelManagerApi from './api'
+import { TEMPLATE_CATALOG } from './mockData'
+import {
+  TEMPLATE_DETAIL_LIMITS,
+  TEMPLATE_DETAIL_MSG,
+  getDetailDisplayChapters,
+  getDetailLanguageDisplay,
+  getTemplateDetail,
+  type TemplateDetailMode,
+  type TemplateProcessAction,
+} from './template-detail-shared'
+import type { TemplateItem } from './types'
+
+//newww start — 查看詳情 / 處理（類型、文案、mock、狀態與邏輯）
+const DETAIL_MSG = {
+  viewDetails: '查看詳情',
+  process: '處理',
+  rejectedSuccess: '已拒絕該模板',
+  approvedSuccess: '已通過，模板已更新至列表',
+} as const
+
+const detailDialogVisible = ref(false)
+const detailTemplateId = ref('')
+const detailDialogMode = ref<TemplateDetailMode>('view')
+const detailEditableTitle = ref('')
+const detailEditableDescription = ref('')
+const detailProcessAction = ref<'' | TemplateProcessAction>('')
+const detailProcessOpinion = ref('')
+
+const templateDetail = computed(() => {
+  if (!detailTemplateId.value) return null
+  return getTemplateDetail(detailTemplateId.value)
+})
+
+const isDetailProcessMode = computed(() => detailDialogMode.value === 'process')
+const detailDialogTitle = computed(() =>
+  isDetailProcessMode.value
+    ? TEMPLATE_DETAIL_MSG.dialogTitleProcess
+    : TEMPLATE_DETAIL_MSG.dialogTitleView
+)
+const detailLanguageDisplay = computed(() =>
+  templateDetail.value ? getDetailLanguageDisplay(templateDetail.value.language) : ''
+)
+const detailDisplayChapters = computed(() => getDetailDisplayChapters(templateDetail.value))
+
+function resetDetailForm() {
+  if (!templateDetail.value) return
+  detailEditableTitle.value = templateDetail.value.title
+  detailEditableDescription.value = templateDetail.value.description
+  detailProcessAction.value = ''
+  detailProcessOpinion.value = ''
+}
+
+function openTemplateDetail(row: TemplateItem, mode: TemplateDetailMode) {
+  detailTemplateId.value = row.id
+  detailDialogMode.value = mode
+  detailDialogVisible.value = true
+  resetDetailForm()
+}
+
+function handleProcess(row: TemplateItem) {
+  openTemplateDetail(row, 'process')
+}
+
+function openPendingProcess() {
+  const pending = templates.value.find((item) => item.approvalStatus === '待審批')
+  if (!pending) {
+    ElMessage.info('暫無待審批模板')
+    return
+  }
+  handleProcess(pending)
+}
+
+function formatDetailNow() {
+  const now = new Date()
+  const pad = (n: number) => String(n).padStart(2, '0')
+  return `${now.getFullYear()}/${now.getMonth() + 1}/${now.getDate()} ${pad(now.getHours())}:${pad(now.getMinutes())}`
+}
+
+function applyDetailProcessResult(
+  action: TemplateProcessAction,
+  title: string,
+  description: string
+) {
+  const target = templates.value.find((item) => item.id === detailTemplateId.value)
+  if (!target) return
+
+  target.name = title
+  target.description = description
+
+  if (action === 'reject') {
+    target.approvalStatus = '已拒絕'
+    ElMessage.success(DETAIL_MSG.rejectedSuccess)
+    return
+  }
+
+  target.approvalStatus = '已通過'
+  target.updatedAt = formatDetailNow()
+  ElMessage.success(DETAIL_MSG.approvedSuccess)
+}
+
+async function submitDetailProcess() {
+  if (!isDetailProcessMode.value) return
+
+  if (!detailEditableTitle.value.trim()) {
+    ElMessage.warning(TEMPLATE_DETAIL_MSG.warnTitleRequired)
+    return
+  }
+  if (!detailEditableDescription.value.trim()) {
+    ElMessage.warning(TEMPLATE_DETAIL_MSG.warnDescriptionRequired)
+    return
+  }
+  if (!detailProcessAction.value) {
+    ElMessage.warning(TEMPLATE_DETAIL_MSG.warnActionRequired)
+    return
+  }
+  if (detailProcessAction.value === 'reject' && !detailProcessOpinion.value.trim()) {
+    ElMessage.warning(TEMPLATE_DETAIL_MSG.warnOpinionRequired)
+    return
+  }
+
+  const isReject = detailProcessAction.value === 'reject'
+  try {
+    await ElMessageBox.confirm(
+      isReject
+        ? TEMPLATE_DETAIL_MSG.confirmRejectMessage
+        : TEMPLATE_DETAIL_MSG.confirmApproveMessage,
+      isReject ? TEMPLATE_DETAIL_MSG.confirmRejectTitle : TEMPLATE_DETAIL_MSG.confirmApproveTitle,
+      {
+        confirmButtonText: TEMPLATE_DETAIL_MSG.confirmButton,
+        cancelButtonText: TEMPLATE_DETAIL_MSG.cancelButton,
+        type: 'warning',
+      }
+    )
+  } catch {
+    return
+  }
+
+  applyDetailProcessResult(
+    detailProcessAction.value,
+    detailEditableTitle.value.trim(),
+    detailEditableDescription.value.trim()
+  )
+  detailDialogVisible.value = false
+}
+//newww end
+
+const unitOptions = ['風險管理部', '授信審批部', '合規部', '公司金融部']
+const languageOptions = [
+  { label: '中文', value: 'zh' },
+  { label: 'English', value: 'en' },
+]
+const language = ref('zh')
+const unitFilter = ref('')
+const keyword = ref('')
+const currentPage = ref(1)
+const pageSize = ref(4)
+
+const templates = ref([...TEMPLATE_CATALOG])
+const router = useRouter()
+
+function isTemplateList(data: unknown) {
+  return Array.isArray(data) && data.length > 0 && typeof data[0]?.id === 'string'
+}
+
+async function loadTemplates() {
+  const data = await modelManagerApi.fetchTemplateListData({
+    language: language.value,
+  })
+  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 pendingCount = computed(
+  () => templates.value.filter((item) => item.approvalStatus === '待審批').length
+)
+
+const paginatedTemplates = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  return filteredTemplates.value.slice(start, start + pageSize.value)
+})
+
+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()
+})
+
+function handleRefresh() {
+  keyword.value = ''
+  unitFilter.value = ''
+  void loadTemplates()
+  ElMessage.success('已重新整理')
+}
+
+function handleCreate() {
+  openTemplateEditor(router, { mode: 'create' })
+}
+
+function openRecycleBin() {
+  ElMessage.info('回收站（演示）')
+}
+
+function handleEdit(row: TemplateItem) {
+  openTemplateEditor(router, { mode: 'edit', id: row.id })
+}
+
+function handleToggleLock(row: TemplateItem) {
+  row.locked = !row.locked
+  ElMessage.success(row.locked ? `已鎖定：${row.name}` : `已解鎖：${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 {
+    // 用戶取消
+  }
+}
+</script>
+
+<style scoped>
+.template-center-page {
+  --gen-ai-design-w: 1920;
+  --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-lg: clamp(16px, calc(18 * 100vw / 1920), 18px);
+  --gen-ai-fs-xl: clamp(18px, calc(20 * 100vw / 1920), 20px);
+  --gen-ai-fs-2xl: clamp(20px, calc(24 * 100vw / 1920), 24px);
+  --gen-ai-fs-hero: clamp(26px, calc(32 * 100vw / 1920), 32px);
+  --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-tight: 1.4;
+  --gen-ai-lh-normal: 1.6;
+  --gen-ai-lh-relaxed: 1.7;
+  --gen-ai-fw-regular: 400;
+  --gen-ai-fw-semibold: 600;
+  --gen-ai-fw-bold: 700;
+  --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-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: var(--gen-ai-fs-base);
+  line-height: var(--gen-ai-lh-normal);
+  color: #2d3139;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+  background: #fff;
+}
+
+.template-center-page :deep(.el-table),
+.template-center-page :deep(.el-input),
+.template-center-page :deep(.el-select),
+.template-center-page :deep(.el-pagination) {
+  font-size: inherit;
+}
+
+.template-center-page :deep(.el-button) {
+  font-size: 18px;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+}
+
+.gen-ai-page-hero-desc {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.7;
+  color: #666;
+}
+
+.gen-ai-filter-field-label {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 500;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  white-space: nowrap;
+}
+
+.gen-ai-action-btn,
+.template-center-toolbar-btn {
+  font-size: 15px;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-weight: 400;
+}
+
+.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;
+}
+
+.template-center-toolbar-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.template-center-toolbar-btn--primary {
+  border: 1px solid var(--report-accent);
+  background: var(--report-accent);
+  color: #fff;
+}
+
+.template-center-toolbar-btn--primary:hover:not(:disabled) {
+  background: #fff;
+  border-color: var(--report-accent);
+  color: var(--report-accent);
+}
+
+.template-center-toolbar-btn--outline {
+  border: 1px solid var(--report-accent);
+  color: var(--report-accent);
+  background: #fff;
+}
+
+.template-center-toolbar-btn--outline:hover:not(:disabled) {
+  border-color: var(--report-accent);
+  color: var(--report-accent);
+  background: var(--report-accent-soft);
+}
+
+.template-center-toolbar-btn--delete {
+  border-color: var(--report-accent);
+  color: var(--report-accent);
+  background: #fff;
+}
+
+.template-center-toolbar-btn--delete:hover:not(:disabled) {
+  border-color: var(--report-accent);
+  color: var(--report-accent);
+  background: var(--report-accent-soft);
+}
+
+.template-center-toolbar-btn--ghost {
+  border: 1px solid #dcdfe6;
+  background: #fff;
+  color: #606266;
+}
+
+.template-center-toolbar-btn--ghost:hover:not(:disabled) {
+  border-color: var(--report-accent);
+  color: var(--report-accent);
+  background: var(--report-accent-soft);
+}
+
+.template-center-table.gen-ai-template-table-header :deep(.el-table__header th.el-table__cell),
+.template-center-table.gen-ai-template-table-header
+  :deep(.el-table__header th.el-table__cell .cell) {
+  font-size: 15px;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-weight: 500;
+}
+
+.template-center-table.gen-ai-template-table-header :deep(.el-table__body tr.el-table__row),
+.template-center-table.gen-ai-template-table-header :deep(.el-table__body td.el-table__cell),
+.template-center-table.gen-ai-template-table-header :deep(.el-table__body td.el-table__cell .cell),
+.template-center-table.gen-ai-template-table-header :deep(.template-center-name),
+.template-center-table.gen-ai-template-table-header :deep(.template-center-desc),
+.template-center-table.gen-ai-template-table-header :deep(.template-center-updated),
+.template-center-table.gen-ai-template-table-header :deep(.template-center-chapters-col),
+.template-center-table.gen-ai-template-table-header :deep(.chapter-title-scroll),
+.template-center-table.gen-ai-template-table-header
+  :deep(.chapter-title-scroll .chapter-title-scroll__text) {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.template-center-page__body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  margin-left: 30px;
+  padding: 32px 24px 24px;
+  box-sizing: border-box;
+}
+
+.template-center-hero {
+  flex-shrink: 0;
+  text-align: center;
+  margin-bottom: 28px;
+}
+
+.template-center-hero__title {
+  margin: 0 0 10px;
+  font-size: var(--gen-ai-fs-hero);
+  font-weight: var(--gen-ai-fw-bold);
+  color: #1a1a1a;
+}
+
+.template-center-hero__desc {
+  margin: 0;
+}
+
+.template-center-toolbar {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.template-center-card-grid {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-auto-rows: minmax(0, 1fr);
+  gap: 20px;
+  align-content: stretch;
+  align-items: stretch;
+}
+
+.template-center-card-grid > :deep(.template-center-card) {
+  height: 100%;
+  min-height: 0;
+}
+
+.template-center-page__body > .gen-ai-pagination {
+  flex-shrink: 0;
+  margin-top: 16px;
+}
+
+.template-center-page__body > .gen-ai-pagination :deep(.el-pagination__sizes) {
+  display: none;
+}
+
+@media (max-width: 1400px) {
+  .template-center-card-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 1100px) {
+  .template-center-card-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 720px) {
+  .template-center-card-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.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__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__select {
+  width: 180px;
+}
+
+.template-center-field__select--lang {
+  width: 162px;
+}
+
+.template-center-field__input {
+  width: 270px;
+}
+
+.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: #303133;
+}
+
+.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) {
+  position: relative;
+  z-index: 0;
+  background: #fff;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: filter var(--el-transition-duration, 0.3s);
+  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.06));
+}
+
+.template-center-table :deep(.el-table__body tr.el-table__row:hover) {
+  z-index: 1;
+  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.06)) drop-shadow(0 0 12px rgba(0, 0, 0, 0.12));
+}
+
+.template-center-table :deep(.el-table__body tr.el-table__row:hover > td.el-table__cell) {
+  background-color: #fff !important;
+}
+
+.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: relative;
+  min-height: 25px;
+}
+
+.template-center-row-lock-anchor {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.template-center-row-lock-trigger {
+  line-height: 0;
+}
+
+.template-center-row-lock-trigger .el-icon {
+  width: 25px;
+  height: 25px;
+}
+
+.template-center-row-lock-trigger .el-icon svg {
+  width: 25px;
+  height: 25px;
+}
+
+.template-center-name {
+  display: block;
+}
+
+.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;
+}
+
+.template-center-updated {
+  display: block;
+  line-height: var(--gen-ai-lh-normal);
+  white-space: nowrap;
+}
+
+.template-center-desc {
+  margin: 0;
+  line-height: var(--gen-ai-lh-relaxed);
+  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;
+}
+
+.template-center-table
+  :deep(.el-table__body tr.el-table__row:hover .chapter-title-scroll__ellipsis) {
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 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: 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;
+}
+
+.template-center-chapters-ellipsis-btn:hover {
+  color: #a82d48;
+  text-decoration: underline;
+}
+
+.template-center-author {
+  font-size: var(--gen-ai-fs-sm);
+  line-height: var(--gen-ai-lh-relaxed);
+  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;
+}
+
+/* //newww dialog — 查看詳情 / 處理觸發按鈕 */
+.template-center-row-actions .template-detail-dialog-trigger {
+  width: 100%;
+  min-width: 0;
+}
+
+.template-center-row-actions .template-center-toolbar-btn {
+  width: 100%;
+  min-width: 0;
+}
+
+/* //newww dialog — 查看詳情 / 處理彈窗（同頁 el-dialog） */
+.template-detail-form {
+  --template-detail-label-w: 100px;
+  --template-detail-field-gap: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.template-detail-field {
+  margin: 0;
+}
+
+.template-detail-field--row {
+  display: grid;
+  grid-template-columns: var(--template-detail-label-w) minmax(0, 1fr);
+  column-gap: var(--template-detail-field-gap);
+  align-items: center;
+  width: 100%;
+}
+
+.template-detail-field--textarea-row {
+  align-items: start;
+}
+
+.template-detail-field--textarea-row .template-detail-label {
+  padding-top: 8px;
+}
+
+.template-detail-label {
+  flex-shrink: 0;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  color: #303133;
+  white-space: nowrap;
+}
+
+.template-detail-label__required {
+  margin-left: 2px;
+  color: #f56c6c;
+}
+
+.template-detail-field__control {
+  min-width: 0;
+  width: 100%;
+}
+
+.template-detail-field__control--lang {
+  width: auto;
+  max-width: 270px;
+}
+
+.template-detail-source {
+  font-size: 14px;
+  color: #303133;
+}
+
+.template-detail-field__input,
+.template-detail-field__textarea {
+  width: 100%;
+}
+
+.template-detail-field--textarea-row .template-detail-field__control {
+  position: relative;
+  padding-bottom: 18px;
+}
+
+.template-detail-field__input :deep(.el-input__wrapper),
+.template-detail-field__textarea :deep(.el-textarea__inner) {
+  font-size: clamp(13px, calc(14 * 100vw / 1920), 14px);
+}
+
+.template-detail-field__input :deep(.el-input__count),
+.template-detail-field__textarea :deep(.el-input__count) {
+  right: 0;
+  bottom: -18px;
+  background: transparent;
+  font-size: 12px;
+  color: #909399;
+}
+
+.template-detail-chapter {
+  padding: 16px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+}
+
+.template-detail-chapter__title {
+  margin: 0 0 16px;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  color: #606266;
+}
+
+.template-detail-process {
+  padding: 20px 16px 16px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+}
+
+.template-detail-process__row {
+  align-items: center;
+}
+
+.template-detail-process__radios {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+.template-detail-process__actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin-top: 8px;
+}
+
+.template-detail-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 120px;
+  height: 32px;
+  padding: 0 20px;
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.template-detail-btn--primary {
+  border: 1px solid #c53355;
+  background: #c53355;
+  color: #fff;
+  font-weight: 500;
+}
+
+.template-detail-btn--primary:hover {
+  background: #fff;
+  color: #c53355;
+}
+
+.template-detail-btn--ghost {
+  border: 1px solid #dcdfe6;
+  background: #fff;
+  color: #606266;
+}
+
+.template-detail-btn--ghost:hover {
+  border-color: #c53355;
+  color: #c53355;
+  background: #fdf0f2;
+}
+
+.template-detail-approval {
+  margin-top: 24px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.template-detail-approval__title {
+  margin: 0;
+  padding: 12px 16px;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  color: #606266;
+  background: transparent;
+  border-bottom: 1px solid #dcdfe6;
+}
+
+.template-detail-approval-table {
+  width: 100%;
+}
+
+.template-detail-approval-table :deep(.el-table--border) {
+  border: none;
+}
+
+.template-detail-approval-table :deep(.el-table--border::before),
+.template-detail-approval-table :deep(.el-table--border::after),
+.template-detail-approval-table :deep(.el-table__inner-wrapper::before),
+.template-detail-approval-table :deep(.el-table__inner-wrapper::after) {
+  display: none;
+}
+
+.template-detail-approval-table :deep(.el-table__border-left-patch) {
+  display: none;
+}
+
+.template-detail-approval-table :deep(.el-table__header th.el-table__cell) {
+  background: rgb(249, 250, 251);
+  color: #606266;
+  font-weight: 500;
+  font-size: 16px;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+}
+
+.template-detail-approval-table :deep(.el-table__body tr.el-table__row) {
+  color: #303133;
+  font-size: 15px;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+}
+</style>
+
+<style>
+.template-center-tab-badge .el-badge__content.el-badge__content--danger.is-fixed {
+  margin-right: 10px !important;
+  margin-top: -5px !important;
+}
+
+/* //newww dialog — 查看詳情 / 處理彈窗（append-to-body，需全域樣式） */
+.template-detail-overlay {
+  overflow: auto;
+}
+
+.template-detail-dialog.el-dialog {
+  --el-dialog-padding-primary: 0;
+  width: 80% !important;
+  max-width: 80%;
+  margin-top: 5vh;
+  border-radius: 4px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+}
+
+.template-detail-dialog .el-dialog__header,
+.template-detail-dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin: 0;
+  padding: 14px 16px 14px 20px;
+  background: transparent;
+  border-bottom: 1px solid #ebeef5;
+  flex-shrink: 0;
+}
+
+.template-detail-dialog__title,
+.template-detail-dialog .el-dialog__title {
+  flex: 1;
+  min-width: 0;
+  color: #303133;
+  font-size: 18px;
+  font-weight: 600;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  line-height: 1.4;
+}
+
+.template-detail-dialog__close {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #303133;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.template-detail-dialog__close:hover {
+  color: #606266;
+}
+
+.template-detail-dialog .el-dialog__body {
+  flex: 1;
+  min-height: 0;
+  padding: 24px 20px;
+  background: #fff;
+  overflow-y: auto;
+}
+
+/* 章節結構彈窗（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: transparent;
+  border-bottom: 1px solid #ebeef5;
+  flex-shrink: 0;
+}
+
+.template-center-chapter-dialog__title,
+.template-center-chapter-dialog .el-dialog__title {
+  flex: 1;
+  min-width: 0;
+  color: #303133;
+  font-size: 18px;
+  font-weight: 600;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  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: #303133;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 1;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.template-center-chapter-dialog__close:hover {
+  color: #606266;
+}
+
+.template-center-chapter-dialog__close:focus-visible {
+  outline: 2px solid rgba(48, 49, 51, 0.35);
+  outline-offset: 2px;
+}
+
+.template-center-chapter-dialog .el-dialog__body {
+  flex: 1;
+  min-height: 60vh;
+  padding: 24px 20px;
+  background: #fff;
+  color: #606266;
+  font-size: var(--gen-ai-fs-chapter);
+  line-height: var(--gen-ai-lh-normal);
+  overflow-y: auto;
+}
+</style>