aegon-lv82 1.0.0

package/src/views/gen-ai/model-manager/mockData.ts

@@ -0,0 +1,177 @@
+import type { TemplateItem } from './types'
+
+const INDUSTRY_RISK_ANNUAL_NAME = '行業風險年報測試擴展內容用於省略展示測試擴展內容用於省略展示'
+const INDUSTRY_RISK_ANNUAL_INDUSTRY = '新能源汽車測試擴展內容用於省略展示測試擴展內容用於省略展示測'
+
+const INDUSTRY_RISK_ANNUAL_DESC =
+  '本模板用於生成年度行業風險分析報告，覆蓋宏觀環境、行業運行、風險識別、授信結構、資產質素等模塊配置。適用於風險管理、授信審批及合規條線年度復盤，可按產業視角擴展指標口徑、預警規則與附件數據清單，確保報告內容一致、可追溯且具備決策參考價值。適用於風險管理、授信審批及合規條線年度復盤，可按產業視角擴展指標口徑、預警規則與附件數據清單，確保報告內容一致、可追溯且具備決策參考價值。適用於風險管理、授信審批及合規條線年度復盤，可按產業視角擴展指標口徑、預警規則與附件數據清單，確保報告內容一致、可追溯且具備決策參考價值。適用於風險管理、授信審批及合規條線年度復盤，可按產業視角擴展指標口徑、預警規則與附件數據清單，確保報告內容一致、可追溯且具備決策參考價值。適用於風險管理、授信審批及合規條線年度復盤，可按產業視角擴展指標口徑、預警規則與附件數據清單，確保報告內容一致、可追溯且具備決策參考價值。適用於風險管理、授信審批及合規條線年度復盤，可按產業視角擴展指標口徑、預警規則與附件數據清單，確保報告內容一致、可追溯且具備決策參考價值。適用於風險管理、授信審批及合規條線年度復盤，可按產業視角擴展指標口徑、預'
+
+const INDUSTRY_RISK_ANNUAL_CHAPTERS = [
+  '1. 摘要與本年總結',
+  '2. 宏觀經濟與政策背景',
+  '3. 行業運行情況與核心指標',
+  '4. 風險識別與評級',
+  '5. 授信與客戶結構分析',
+  '6. 資產質素與逾期/不良變化資產質素與逾期/不良變化資產質素與逾期/不良變化資產質素與逾期/不良變化資產質素與逾期/不良變化資產質素與逾期/不良變化',
+  '7. 重點客戶/項目風險',
+  '8. 新發生風險與預警',
+  '9. 風險管控措施與成效',
+  '10. 下年度風險研判與策略',
+  '11. 附件與數據',
+]
+
+const QUARTERLY_BRIEF_DESC =
+  '面向季度復盤的輕量模板，聚焦行業景氣、核心指標波動、重點風險事件與管控建議，適用於管理層例會與條線月報。'
+
+const QUARTERLY_BRIEF_CHAPTERS = [
+  '1. 季度摘要',
+  '2. 行業景氣與政策動態',
+  '3. 核心指標走勢',
+  '4. 重點風險事件',
+  '5. 管控措施與下季關注',
+]
+
+const FULL_RISK_DESC =
+  '完整版風險報告模板，章節可擴展至 20+，覆蓋母行、子公司、區域及產品線多維度風險拆解，支援附錄與數據口徑說明。'
+
+const FULL_RISK_CHAPTERS = [
+  ...INDUSTRY_RISK_ANNUAL_CHAPTERS,
+  '12. 區域風險分佈',
+  '13. 產品線風險拆解',
+  '14. 關聯方與集中度',
+  '15. 市場與流動性風險',
+  '16. 操作與合規風險',
+  '17. 聲譽與環境風險',
+  '18. 壓力測試結果',
+  '19. 整改跟進清單',
+  '20. 監管關注重點',
+  '21. 術語與指標口徑',
+  '22. 修訂記錄',
+]
+
+export const TEMPLATE_CATALOG: TemplateItem[] = [
+  {
+    id: '1',
+    name: INDUSTRY_RISK_ANNUAL_NAME,
+    description: INDUSTRY_RISK_ANNUAL_DESC,
+    chapters: INDUSTRY_RISK_ANNUAL_CHAPTERS,
+    author: '王明輝（風險管理部）',
+    approver: '李思琪（合規部）',
+    updatedAt: '2025/11/7 15:21',
+    unit: '風險管理部',
+    industry: INDUSTRY_RISK_ANNUAL_INDUSTRY,
+    locked: false,
+    locker: '陳大文（授信審批部）',
+    approvalStatus: '待審批',
+  },
+  {
+    id: '2',
+    name: INDUSTRY_RISK_ANNUAL_NAME,
+    description: INDUSTRY_RISK_ANNUAL_DESC,
+    chapters: INDUSTRY_RISK_ANNUAL_CHAPTERS,
+    author: '張偉（風險管理部）',
+    approver: '劉芳（合規部）',
+    updatedAt: '2025/10/28 09:15',
+    unit: '授信審批部',
+    industry: INDUSTRY_RISK_ANNUAL_INDUSTRY,
+    locked: true,
+    locker: '陳大文（授信審批部）',
+  },
+  {
+    id: '3',
+    name: INDUSTRY_RISK_ANNUAL_NAME,
+    description: INDUSTRY_RISK_ANNUAL_DESC,
+    chapters: INDUSTRY_RISK_ANNUAL_CHAPTERS,
+    author: '趙敏（公司金融部）',
+    approver: '周傑（合規部）',
+    updatedAt: '2025/9/12 11:40',
+    unit: '風險管理部',
+    industry: INDUSTRY_RISK_ANNUAL_INDUSTRY,
+    locked: false,
+    locker: '陳大文（授信審批部）',
+  },
+  {
+    id: '4',
+    name: '季度行業風險簡報',
+    description: QUARTERLY_BRIEF_DESC,
+    chapters: QUARTERLY_BRIEF_CHAPTERS,
+    author: '陳曉東（風險管理部）',
+    approver: '何靜（合規部）',
+    updatedAt: '2025/8/3 16:05',
+    unit: '合規部',
+    industry: '零售銀行',
+    locked: false,
+    locker: '陳大文（授信審批部）',
+  },
+  {
+    id: '5',
+    name: '全面風險分析模板',
+    description: FULL_RISK_DESC,
+    chapters: FULL_RISK_CHAPTERS,
+    author: '孫麗（風險管理部）',
+    approver: '馬強（合規部）',
+    updatedAt: '2025/7/19 14:32',
+    unit: '公司金融部',
+    industry: '房地產',
+    locked: false,
+    locker: '陳大文（授信審批部）',
+  },
+  {
+    id: '6',
+    name: INDUSTRY_RISK_ANNUAL_NAME,
+    description: INDUSTRY_RISK_ANNUAL_DESC,
+    chapters: INDUSTRY_RISK_ANNUAL_CHAPTERS,
+    author: '黃磊（授信審批部）',
+    approver: '吳婷（合規部）',
+    updatedAt: '2025/6/25 10:18',
+    unit: '授信審批部',
+    industry: INDUSTRY_RISK_ANNUAL_INDUSTRY,
+    locked: true,
+    locker: '陳大文（授信審批部）',
+  },
+]
+
+let chapterSeed = 0
+
+export function createEmptyChapter(expanded = false) {
+  chapterSeed += 1
+  return {
+    id: `chapter-${Date.now()}-${chapterSeed}`,
+    title: '',
+    description: '',
+    prompt: '',
+    expanded,
+  }
+}
+
+function stripChapterOrder(title: string) {
+  return title.replace(/^\d+\.\s*/, '')
+}
+
+export function buildEditorFormFromTemplate(template: TemplateItem, copy = false) {
+  return {
+    language: 'zh',
+    title: copy ? `${template.name}（副本）` : template.name,
+    description: template.description,
+    chapters: template.chapters.map((chapterTitle, index) => ({
+      id: `chapter-${template.id}-${index}`,
+      title: stripChapterOrder(chapterTitle),
+      description: index === 0 ? '本章節概述報告核心結論與年度重點。' : '',
+      prompt: index === 0 ? '請根據行業數據與風控政策，生成本章節分析內容。' : '',
+      expanded: index === 0,
+    })),
+  }
+}
+
+export function createEmptyEditorForm() {
+  return {
+    language: 'zh',
+    title: '',
+    description: '',
+    chapters: [createEmptyChapter(true)],
+  }
+}
+
+export function findTemplateById(id: string) {
+  return TEMPLATE_CATALOG.find((item) => item.id === id)
+}

package/src/views/gen-ai/model-manager/template-detail-shared.ts

@@ -0,0 +1,154 @@
+import { buildEditorFormFromTemplate, findTemplateById } from './mockData'
+import type { TemplateChapterForm } from './types'
+
+export interface TemplateApprovalRecord {
+  id: string
+  operator: string
+  status: string
+  completedAt: string
+  detail: string
+}
+
+export interface TemplateDetailView {
+  sourceReport: string
+  language: string
+  title: string
+  description: string
+  chapters: TemplateChapterForm[]
+  approvalRecords: TemplateApprovalRecord[]
+}
+
+export type TemplateDetailMode = 'view' | 'process'
+
+export type TemplateProcessAction = 'reject' | 'approve'
+
+export interface TemplateProcessSubmitPayload {
+  templateId: string
+  action: TemplateProcessAction
+  title: string
+  description: string
+  opinion: string
+}
+
+export const TEMPLATE_DETAIL_MSG = {
+  dialogTitleView: '查看詳情',
+  dialogTitleProcess: '處理',
+  closeAriaLabel: '關閉',
+  sourceReport: '來源報告',
+  primaryLanguage: '主要語言',
+  templateTitle: '模板標題',
+  templateDescription: '模板描述',
+  chapterTitleFallback: '章節標題',
+  chapterPrompt: '章節Prompt',
+  chapterDescription: '章節描述',
+  processAction: '處理事項',
+  reject: '拒絕',
+  approve: '同意',
+  opinion: '意見',
+  cancel: '取消',
+  submit: '提交',
+  approvalSectionTitle: '審批明細',
+  approvalOperator: '操作人員',
+  approvalStatus: '處理狀態',
+  approvalCompletedAt: '處理完成時間',
+  approvalDetail: '詳情',
+  languageEnSuffix: 'English[原模板所選語言]',
+  languageZhSuffix: '中文[原模板所選語言]',
+  warnTitleRequired: '請輸入模板標題',
+  warnDescriptionRequired: '請輸入模板描述',
+  warnActionRequired: '請選擇處理事項',
+  warnOpinionRequired: '拒絕時請填寫意見',
+  confirmRejectMessage: '確定拒絕嗎？',
+  confirmApproveMessage: '確定通過嗎？',
+  confirmRejectTitle: '拒絕',
+  confirmApproveTitle: '通過',
+  confirmButton: '確定',
+  cancelButton: '取消',
+} as const
+
+export const TEMPLATE_DETAIL_LIMITS = {
+  titleMax: 100,
+  descMax: 3000,
+  chapterDescMax: 1000,
+  chapterPromptMax: 1300,
+  chapterPromptRows: 8,
+  opinionMax: 250,
+} as const
+
+const TEMPLATE_SOURCE_REPORTS: Record<string, string> = {
+  '1': '20XX年房地產調研報告 V3',
+}
+
+const TEMPLATE_APPROVAL_RECORDS: Record<string, TemplateApprovalRecord[]> = {
+  '1': [
+    {
+      id: 'apr-1',
+      operator: '陳大文 (8808808)',
+      status: '待審批',
+      completedAt: '2025-11-07 15:21:11',
+      detail: '-',
+    },
+    {
+      id: 'apr-2',
+      operator: '陳大文 (8808808)',
+      status: '已拒絕',
+      completedAt: '2025-11-07 15:21:11',
+      detail: '模板描述有錯別字',
+    },
+  ],
+}
+
+function enrichChapterForms(chapters: TemplateChapterForm[]) {
+  return chapters.map((chapter, index) => {
+    if (index === 0) {
+      return {
+        ...chapter,
+        title: chapter.title || '摘要與本年總結',
+        prompt:
+          chapter.prompt ||
+          '請根據行業數據與風控政策，生成本章節分析內容。[定稿時所使用的章節Prompt][不可修改]',
+        description:
+          chapter.description ||
+          '本章節概述報告核心結論與年度重點。[新增章節時所錄入的章節描述][不可修改]',
+      }
+    }
+    if (index === 1) {
+      return {
+        ...chapter,
+        title: chapter.title || '宏觀經濟與政策背景',
+        prompt: '請結合宏觀政策與行業背景撰寫本章節。[定稿時所使用的章節Prompt][不可修改]',
+        description: '說明宏觀經濟與政策變化對行業的影響。[新增章節時所錄入的章節描述][不可修改]',
+      }
+    }
+    return chapter
+  })
+}
+
+export function getTemplateDetail(id: string): TemplateDetailView | null {
+  const template = findTemplateById(id)
+  if (!template) return null
+
+  const form = buildEditorFormFromTemplate(template)
+
+  return {
+    sourceReport: TEMPLATE_SOURCE_REPORTS[id] ?? '—',
+    language: form.language,
+    title: form.title,
+    description: form.description,
+    chapters: enrichChapterForms(form.chapters),
+    approvalRecords: TEMPLATE_APPROVAL_RECORDS[id] ?? [],
+  }
+}
+
+export function getDetailLanguageDisplay(language: string) {
+  return language === 'en'
+    ? TEMPLATE_DETAIL_MSG.languageEnSuffix
+    : TEMPLATE_DETAIL_MSG.languageZhSuffix
+}
+
+export function getDetailDisplayChapters(detail: TemplateDetailView | null) {
+  if (!detail) return []
+  return detail.chapters.filter(
+    (chapter, index) => index < 2 || Boolean(chapter.prompt.trim() || chapter.description.trim())
+  )
+}

package/src/views/gen-ai/model-manager/template-editor.vue

@@ -0,0 +1,345 @@
+<template>
+  <div class="template-editor-page">
+    <main class="template-editor-page__body">
+      <section class="template-editor-hero">
+        <h2 class="template-editor-hero__title">{{ pageTitle }}</h2>
+        <p class="template-editor-hero__desc gen-ai-page-hero-desc">
+          配置報告生成的基礎參數，確定分析視角
+        </p>
+        <p v-if="lockedNoticeText" class="template-editor-hero__locked-notice">
+          {{ lockedNoticeText }}
+        </p>
+      </section>
+
+      <TemplateEditorFormPanel ref="formPanelRef" v-model="form" :editor-mode="editorMode" />
+
+      <div class="template-editor-form__footer">
+        <button
+          v-if="isCreateMode"
+          type="button"
+          class="template-editor-save-btn app-btn app-btn--wide gen-ai-action-btn"
+          @click="handleSave('saveAsNew')"
+        >
+          保存模板
+        </button>
+        <template v-else>
+          <button
+            v-if="showOverwriteSave"
+            type="button"
+            class="template-editor-save-btn app-btn app-btn--wide gen-ai-action-btn"
+            @click="handleSave('overwrite')"
+          >
+            保存模板（覆蓋）
+          </button>
+          <button
+            type="button"
+            class="template-editor-save-btn app-btn app-btn--wide gen-ai-action-btn"
+            @click="handleSave('saveAsNew')"
+          >
+            另存為新模板
+          </button>
+        </template>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import '../common/assets/fonts.css'
+import { ElMessage } from 'element-plus'
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import TemplateEditorFormPanel from './TemplateEditorFormPanel.vue'
+import { buildEditorFormFromTemplate, createEmptyEditorForm, findTemplateById } from './mockData'
+import type {
+  TemplateChapterForm,
+  TemplateEditorForm,
+  TemplateEditorMode,
+  TemplateItem,
+} from './types'
+
+const route = useRoute()
+
+const editorMode = computed(
+  () => (route.query.mode as TemplateEditorMode) || (route.query.id ? 'edit' : 'create')
+)
+const templateId = computed(() => String(route.query.id || ''))
+
+const pageTitle = computed(() => {
+  if (editorMode.value === 'create') return '創建報告模板'
+  if (editorMode.value === 'copy') return '創建報告模板'
+  return '編輯報告模板'
+})
+
+const form = ref<TemplateEditorForm>(createEmptyEditorForm())
+const sourceTemplate = ref<TemplateItem | null>(null)
+const formPanelRef = ref<InstanceType<typeof TemplateEditorFormPanel> | null>(null)
+
+const isCreateMode = computed(() => editorMode.value === 'create')
+
+const showOverwriteSave = computed(
+  () => editorMode.value === 'edit' && !sourceTemplate.value?.locked
+)
+
+const lockedNoticeText = computed(() => {
+  const template = sourceTemplate.value
+  if (!template?.locked) return ''
+  return '（此模板已被鎖定，如需修改，僅支援另存為新模板）'
+})
+
+function initForm() {
+  formPanelRef.value?.resetEditingState()
+
+  if (editorMode.value === 'create') {
+    form.value = createEmptyEditorForm()
+    sourceTemplate.value = null
+    return
+  }
+
+  const template = findTemplateById(templateId.value)
+  if (!template) {
+    form.value = createEmptyEditorForm()
+    sourceTemplate.value = null
+    ElMessage.warning('未找到模板，已進入新建模式')
+    return
+  }
+
+  sourceTemplate.value = template
+  form.value = buildEditorFormFromTemplate(template, editorMode.value === 'copy')
+}
+
+watch([editorMode, templateId], initForm, { immediate: true })
+
+function validateChapter(chapter: TemplateChapterForm) {
+  return Boolean(chapter.prompt.trim())
+}
+
+function validateForm() {
+  if (!form.value.language) {
+    ElMessage.warning('請選擇主要語言')
+    return false
+  }
+  if (!form.value.title.trim()) {
+    ElMessage.warning('請輸入模板標題')
+    return false
+  }
+  if (!form.value.description.trim()) {
+    ElMessage.warning('請輸入模板描述')
+    return false
+  }
+  if (form.value.chapters.length === 0) {
+    ElMessage.warning('請至少新增一個章節')
+    return false
+  }
+  if (!form.value.chapters.every(validateChapter)) {
+    ElMessage.warning('請完善所有章節的 Prompt')
+    return false
+  }
+  return true
+}
+
+type TemplateSaveType = 'overwrite' | 'saveAsNew'
+
+function handleSave(saveType: TemplateSaveType) {
+  if (!validateForm()) return
+
+  if (saveType === 'overwrite') {
+    ElMessage.success('模板已覆蓋保存')
+  } else {
+    ElMessage.success(
+      editorMode.value === 'create' || editorMode.value === 'copy' ? '模板已創建' : '已另存為新模板'
+    )
+  }
+  formPanelRef.value?.resetEditingState()
+}
+</script>
+
+<style scoped>
+.template-editor-page {
+  --gen-ai-design-w: 1920;
+  --gen-ai-fs-base: clamp(13px, calc(14 * 100vw / 1920), 14px);
+  --gen-ai-fs-hero: clamp(26px, calc(32 * 100vw / 1920), 32px);
+  --gen-ai-lh-tight: 1.4;
+  --gen-ai-fw-bold: 700;
+  --app-btn-color: #fff;
+  --app-btn-color-hover: #c53355;
+  --app-btn-bg: #c53355;
+  --app-btn-bg-hover: #fff;
+  --app-btn-border: #c53355;
+  --app-btn-border-hover: #c53355;
+  --app-btn-radius: 5px;
+  --app-btn-font-size: clamp(14px, calc(16 * 100vw / 1920), 16px);
+  --app-btn-font-weight: 600;
+  --app-btn-padding-y: 8px;
+  --app-btn-padding-x: 15px;
+  --app-btn-min-width: 120px;
+  --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: 1.6;
+  color: #2d3139;
+  min-height: 100vh;
+  background: #fff;
+}
+
+.template-editor-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;
+}
+
+.app-btn {
+  min-width: var(--app-btn-min-width);
+  padding: var(--app-btn-padding-y) var(--app-btn-padding-x);
+  border: 1px solid var(--app-btn-border);
+  border-radius: var(--app-btn-radius);
+  background: var(--app-btn-bg);
+  color: var(--app-btn-color);
+  font-size: var(--app-btn-font-size);
+  font-weight: var(--app-btn-font-weight);
+  line-height: var(--gen-ai-lh-tight);
+  font-family: inherit;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.app-btn:hover,
+.app-btn.is-active,
+.app-btn--active {
+  background: var(--app-btn-bg-hover);
+  border-color: var(--app-btn-border-hover);
+  color: var(--app-btn-color-hover);
+}
+
+.app-btn--wide {
+  min-width: 148px;
+}
+
+.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(--app-btn-border);
+  background: var(--app-btn-bg);
+  color: var(--app-btn-color);
+}
+
+.template-center-toolbar-btn--primary:hover:not(:disabled) {
+  background: var(--app-btn-bg-hover);
+  border-color: var(--app-btn-border-hover);
+  color: var(--app-btn-color-hover);
+}
+
+.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-editor-page__body {
+  width: 80%;
+  max-width: 1920px;
+  margin: 0 auto;
+  padding: 32px 24px 48px;
+  box-sizing: border-box;
+}
+
+.template-editor-hero {
+  text-align: center;
+  margin-bottom: 28px;
+}
+
+.template-editor-hero__title {
+  margin: 0 0 12px;
+  font-size: var(--gen-ai-fs-hero);
+  font-weight: var(--gen-ai-fw-bold);
+  color: #1a1a1a;
+}
+
+.template-editor-hero__desc {
+  margin: 0;
+}
+
+.template-editor-hero__locked-notice {
+  margin: 10px 0 0;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.7;
+  color: #f56c6c;
+}
+
+.template-editor-form__footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-top: 8px;
+}
+
+.template-editor-save-btn {
+  min-width: 160px;
+}
+</style>