aegon-lv97 1.0.0

package/gen-ai/build-report/coherence-check/index.vue

@@ -0,0 +1,559 @@
+<template>
+  <div
+    class="report-coherence-check-page"
+    :class="{
+      'is-aside-collapsed': asideCollapsed && !isStackedLayout,
+      'is-stacked': isStackedLayout,
+    }"
+  >
+    <main class="report-coherence-check-page__main">
+      <!-- 右欄收起／展開：與 reportEdit 中欄右側 divider 同款；窄屏堆疊時隱藏 -->
+      <button
+        v-if="payload"
+        v-show="!isStackedLayout"
+        type="button"
+        class="report-coherence-check-page__col-divider"
+        :aria-expanded="!asideCollapsed"
+        :aria-label="asideCollapsed ? '展開右側欄' : '收起右側欄'"
+        @click="asideCollapsed = !asideCollapsed"
+      >
+        <el-icon :size="14" color="#c53355">
+          <DArrowRight v-if="!asideCollapsed" />
+          <DArrowLeft v-else />
+        </el-icon>
+      </button>
+
+      <el-scrollbar class="report-coherence-check-page__main-scroll">
+        <header class="report-coherence-check-page__hero">
+          <h1 class="report-coherence-check-page__title">報告連貫性檢查</h1>
+          <p v-if="payload" class="report-coherence-check-page__desc">
+            {{ displayReportName }}
+          </p>
+        </header>
+
+        <section v-if="payload" class="report-coherence-check-results">
+          <ReportTypewriterDocEditor
+            :chapters="typewriterChapters"
+            :ready="typewriterReady"
+            empty-text="暫無連貫性檢查結果正文"
+            replay-key="coherence-result"
+            :replay-token="typewriterReplayToken"
+            :disable-typewriter="false"
+          />
+        </section>
+
+        <section
+          v-else
+          class="report-coherence-check-results report-coherence-check-results--empty"
+        >
+          <p>未找到檢查配置，請從「生成報告設置」重新發起連貫性檢查。</p>
+        </section>
+      </el-scrollbar>
+    </main>
+
+    <aside
+      v-if="payload"
+      class="report-coherence-check-page__aside"
+      :class="{ 'is-collapsed': asideCollapsed && !isStackedLayout }"
+    >
+      <el-scrollbar
+        v-show="!asideCollapsed || isStackedLayout"
+        class="report-coherence-check-page__aside-scroll"
+      >
+        <ReportGenerateSettingsPanel readonly :coherence-session="payload" />
+      </el-scrollbar>
+    </aside>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'
+import { ElIcon, ElScrollbar } from 'element-plus'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { ReportTypewriterDocEditor } from '../../common/index.ts'
+import '../common/assets/fonts.css'
+import {
+  buildGenerationSignature,
+  loadCoherenceCheckSession,
+  markCoherenceCheckCompleted,
+  saveCoherenceCheckSession,
+  type CoherenceCheckSessionPayload,
+} from '../report-domain.ts'
+import { useReportWorkflow } from '../useReportWorkflow.ts'
+import ReportGenerateSettingsPanel from '../components/ReportGenerateSettingsPanel.vue'
+
+const route = useRoute()
+const payload = ref<CoherenceCheckSessionPayload | null>(null)
+const asideCollapsed = ref(false)
+const typewriterReplayToken = ref(0)
+
+const typewriterChapters = computed(() => {
+  const text = String(payload.value?.coherenceCheckContentText ?? '').trim()
+  if (!text) return []
+  return [
+    {
+      key: 'coherence-result',
+      title: '連貫性檢查結果',
+      intro: text,
+    },
+  ]
+})
+
+const typewriterReady = computed(() => !!payload.value)
+
+const STACKED_MAX_WIDTH = 1024
+const isStackedLayout = ref(
+  typeof window !== 'undefined' ? window.innerWidth <= STACKED_MAX_WIDTH : false
+)
+
+function syncStackedLayout() {
+  const stacked = window.innerWidth <= STACKED_MAX_WIDTH
+  isStackedLayout.value = stacked
+  if (stacked) {
+    asideCollapsed.value = false
+  }
+}
+
+const { loadDraftFromSession, loadTemplateFromSession, patchDraft } = useReportWorkflow()
+
+const displayReportName = computed(() => {
+  if (!payload.value) return ''
+  const name = payload.value.reportName.trim() || '未命名報告'
+  return `${name} · ${payload.value.year}`
+})
+
+function applyPayload(session: CoherenceCheckSessionPayload) {
+  payload.value = session
+  saveCoherenceCheckSession(session)
+  patchDraft({
+    language: session.reportLanguage,
+    chapterContentLanguage: session.chapterContentLanguage,
+  })
+  markCoherenceCheckCompleted(
+    buildGenerationSignature(
+      session.templateId,
+      session.chapters,
+      session.reportLanguage,
+      session.chapterContentLanguage
+    )
+  )
+  typewriterReplayToken.value += 1
+}
+
+onMounted(() => {
+  loadDraftFromSession()
+  loadTemplateFromSession()
+  syncStackedLayout()
+  window.addEventListener('resize', syncStackedLayout)
+
+  const templateId = typeof route.query.templateId === 'string' ? route.query.templateId : ''
+  const session = loadCoherenceCheckSession()
+
+  if (session && (!templateId || session.templateId === templateId)) {
+    applyPayload(session)
+    return
+  }
+  // 無 session：不回落本地演示數據；引導用戶從生成設置重新發起
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', syncStackedLayout)
+})
+</script>
+
+<style scoped>
+/* 正文樣式與章節模板編輯器（ChapterTiptapEditor prose）對齊 */
+.report-coherence-check-page {
+  --report-edit-border: #e5e7eb;
+  --report-edit-col-scroll-thumb: #999;
+  /* 與 reportEdit prompt 三欄（2fr 6fr 2fr）右側設置欄同寬：佔總寬 2/10 */
+  display: grid;
+  grid-template-columns: minmax(0, 8fr) minmax(0, 2fr);
+  gap: 15px;
+  column-gap: 20px;
+  align-items: stretch;
+  min-height: 100dvh;
+  height: 100dvh;
+  max-height: 100dvh;
+  padding: 15px;
+  box-sizing: border-box;
+  background: #fff;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: 16px;
+  line-height: 1.6;
+  color: #374151;
+  overflow: hidden;
+  transition: grid-template-columns 0.25s ease;
+}
+
+.report-coherence-check-page.is-aside-collapsed {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.report-coherence-check-page__main {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  padding: 16px 20px;
+  border: 1px solid var(--report-edit-border);
+  border-radius: 8px;
+  background: #fff;
+  box-sizing: border-box;
+  overflow: visible;
+  transition: box-shadow var(--el-transition-duration, 0.3s);
+}
+
+.report-coherence-check-page__main:hover {
+  box-shadow: var(--el-box-shadow-light, 0 0 12px rgba(0, 0, 0, 0.12));
+}
+
+/* 與 reportEdit 中欄右側 divider 同款 */
+.report-coherence-check-page__col-divider {
+  z-index: 30;
+  position: absolute;
+  top: 50%;
+  right: calc(-1px - 4px - 14px);
+  left: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 14px;
+  height: 90px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  box-shadow: none;
+  cursor: pointer;
+  line-height: 0;
+  pointer-events: auto;
+  flex-shrink: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  transform: translateY(-50%);
+}
+
+.report-coherence-check-page__col-divider:hover {
+  background: #fdf0f2;
+}
+
+.report-coherence-check-page.is-aside-collapsed .report-coherence-check-page__col-divider {
+  background: #fdf0f2;
+}
+
+.report-coherence-check-page__col-divider:focus-visible {
+  outline: 2px solid rgba(197, 51, 85, 0.35);
+  outline-offset: 1px;
+}
+
+/* 左 card：滾動條在 card 內（與中欄一致，距內邊 4px） */
+.report-coherence-check-page__main-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 4px;
+}
+
+.report-coherence-check-page__main-scroll :deep(.el-scrollbar) {
+  height: 100%;
+  overflow: hidden;
+}
+
+.report-coherence-check-page__main-scroll :deep(.el-scrollbar__wrap) {
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
+  max-height: 100% !important;
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+
+.report-coherence-check-page__main-scroll :deep(.el-scrollbar__wrap::-webkit-scrollbar) {
+  width: 0 !important;
+  height: 0 !important;
+  display: none !important;
+}
+
+.report-coherence-check-page__main-scroll :deep(.el-scrollbar__bar.is-horizontal) {
+  display: none !important;
+}
+
+.report-coherence-check-page__main-scroll :deep(.el-scrollbar__bar.is-vertical) {
+  width: 8px !important;
+  right: 4px !important;
+  top: 2px !important;
+  bottom: 2px !important;
+  height: auto !important;
+  background: transparent !important;
+  opacity: 1 !important;
+  z-index: 10;
+}
+
+.report-coherence-check-page__main-scroll
+  :deep(.el-scrollbar__bar.is-vertical .el-scrollbar__thumb) {
+  display: block !important;
+  width: 8px !important;
+  height: 50px !important;
+  min-height: 50px !important;
+  border-radius: 4px !important;
+  background-color: var(--report-edit-col-scroll-thumb, #999) !important;
+  opacity: 1 !important;
+}
+
+.report-coherence-check-page__hero {
+  margin-bottom: 0;
+}
+
+.report-coherence-check-page__title {
+  margin: 0;
+  font-size: 36px;
+  font-weight: 700;
+  font-family: inherit;
+  line-height: 1.11;
+  color: #111827;
+}
+
+.report-coherence-check-page__desc {
+  margin: 20px 0;
+  font-size: 16px;
+  font-weight: 400;
+  font-family: inherit;
+  line-height: 1.6;
+  color: #374151;
+}
+
+.report-coherence-check-results {
+  flex: 1;
+  min-height: 0;
+}
+
+.report-coherence-check-results--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #909399;
+  font-size: 16px;
+  font-family: inherit;
+}
+
+.report-coherence-check-results__section-title {
+  margin: 48px 0 24px;
+  font-size: 24px;
+  font-weight: 700;
+  font-family: inherit;
+  line-height: 1.33;
+  color: #111827;
+}
+
+.report-coherence-check-results__section:first-child
+  .report-coherence-check-results__section-title {
+  margin-top: 32px;
+}
+
+.report-coherence-check-results__paragraph {
+  margin: 20px 0;
+  font-size: 16px;
+  font-weight: 400;
+  font-family: inherit;
+  line-height: 1.6;
+  color: #374151;
+  text-align: justify;
+}
+
+.report-coherence-check-results__paragraph:last-child {
+  margin-bottom: 0;
+}
+
+.report-coherence-check-page__aside {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  align-self: stretch;
+  font-family: inherit;
+  overflow: visible;
+}
+
+.report-coherence-check-page__aside.is-collapsed {
+  position: absolute;
+  width: 0;
+  height: 0;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+/* 右欄：生成報告設置 — 滾動條在 card 外側 */
+.report-coherence-check-page__aside-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+  overflow: visible;
+}
+
+.report-coherence-check-page__aside-scroll :deep(.el-scrollbar) {
+  height: 100%;
+  overflow: visible;
+}
+
+.report-coherence-check-page__aside-scroll :deep(.el-scrollbar__wrap) {
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
+  max-height: 100% !important;
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+
+.report-coherence-check-page__aside-scroll :deep(.el-scrollbar__wrap::-webkit-scrollbar) {
+  width: 0 !important;
+  height: 0 !important;
+  display: none !important;
+}
+
+.report-coherence-check-page__aside-scroll :deep(.el-scrollbar__bar.is-horizontal) {
+  display: none !important;
+}
+
+.report-coherence-check-page__aside-scroll :deep(.el-scrollbar__bar.is-vertical) {
+  width: 8px !important;
+  right: -12px !important;
+  top: 2px !important;
+  bottom: 2px !important;
+  height: auto !important;
+  background: transparent !important;
+  opacity: 1 !important;
+  z-index: 10;
+}
+
+.report-coherence-check-page__aside-scroll
+  :deep(.el-scrollbar__bar.is-vertical .el-scrollbar__thumb) {
+  display: block !important;
+  width: 8px !important;
+  height: 50px !important;
+  min-height: 50px !important;
+  border-radius: 4px !important;
+  background-color: var(--report-edit-col-scroll-thumb, #999) !important;
+  opacity: 1 !important;
+}
+
+.report-coherence-check-page__aside :deep(.chatbot-report-panel) {
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  height: auto;
+}
+
+/* 詳情 popover 打開時抬高層級，避免被後續章節／滾動區遮擋 */
+.report-coherence-check-page__aside :deep(.chatbot-report-chapter-row-wrap.is-popover-open) {
+  z-index: 50;
+}
+
+.report-coherence-check-page__aside :deep(.chatbot-report-panel.is-compact) {
+  flex: 0 0 auto;
+  height: auto;
+  align-self: flex-start;
+}
+
+.report-coherence-check-page__aside :deep(.chatbot-report-chapter-select) {
+  overflow: visible !important;
+}
+
+.report-coherence-check-page__aside
+  :deep(
+    .chatbot-report-panel--settings.is-readonly > .report-collapsible-section:not(.is-collapsed)
+  ),
+.report-coherence-check-page__aside
+  :deep(
+    .chatbot-report-panel--settings.is-readonly
+      > .report-collapsible-section:not(.is-collapsed)
+      .report-collapsible-section__body
+  ) {
+  overflow: visible !important;
+  flex: 0 0 auto;
+  min-height: 0;
+}
+
+.report-coherence-check-page__aside :deep(.el-button),
+.report-coherence-check-page__aside :deep(.el-select),
+.report-coherence-check-page__aside :deep(.el-input) {
+  font-family: inherit;
+}
+
+/* ≤1024：上（連貫性檢查）→ 下（生成報告設置），隱藏收起箭頭 */
+@media (max-width: 1024px) {
+  .report-coherence-check-page,
+  .report-coherence-check-page.is-aside-collapsed,
+  .report-coherence-check-page.is-stacked {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: stretch !important;
+    gap: 12px !important;
+    height: 100dvh !important;
+    max-height: 100dvh !important;
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .report-coherence-check-page__main {
+    order: 1;
+    flex: 0 0 auto;
+    width: 100% !important;
+    height: auto !important;
+    min-height: min(55dvh, 480px);
+    max-height: none;
+    overflow: hidden;
+  }
+
+  .report-coherence-check-page__aside,
+  .report-coherence-check-page__aside.is-collapsed {
+    order: 2;
+    position: relative !important;
+    flex: 0 0 auto;
+    width: 100% !important;
+    height: auto !important;
+    min-height: 280px;
+    max-height: none;
+    overflow: visible !important;
+    pointer-events: auto !important;
+  }
+
+  .report-coherence-check-page__col-divider {
+    display: none !important;
+  }
+
+  .report-coherence-check-page__aside-scroll {
+    height: auto !important;
+    max-height: none !important;
+  }
+
+  .report-coherence-check-page__aside-scroll :deep(.el-scrollbar),
+  .report-coherence-check-page__aside-scroll :deep(.el-scrollbar__wrap) {
+    height: auto !important;
+    max-height: none !important;
+  }
+
+  .report-coherence-check-page__aside-scroll :deep(.el-scrollbar__wrap) {
+    overflow: visible !important;
+  }
+
+  .report-coherence-check-page__aside-scroll :deep(.el-scrollbar__bar.is-vertical) {
+    display: none !important;
+  }
+
+  .report-coherence-check-page__main-scroll {
+    min-height: 240px;
+  }
+}
+</style>