aegon-lv82 1.0.0

package/src/views/gen-ai/build-report/components/ReportGenerateSettingsPanel.vue

@@ -0,0 +1,2361 @@
+<template>
+  <aside
+    ref="settingsPanelRef"
+    class="chatbot-report-panel chatbot-report-panel--settings"
+    :class="{
+      'is-readonly': readonly,
+      'is-compact': !settingsOpen && (readonly || !historyOpen),
+    }"
+  >
+    <ReportCollapsibleSection v-model:open="settingsOpen" title="生成報告設置" card-hover>
+      <div class="chatbot-report-settings__content">
+        <div class="chatbot-report-chapter-select">
+          <div class="chatbot-report-chapter-header">
+            <span class="chatbot-report-chapter-header__title">選擇章節及模板</span>
+            <span
+              class="chatbot-report-chapter-header__col chatbot-report-chapter-header__col--version"
+              >版本</span
+            >
+            <span
+              class="chatbot-report-chapter-header__col chatbot-report-chapter-header__col--generator"
+              >生成人</span
+            >
+          </div>
+
+          <label class="chatbot-report-chapter-select-all">
+            <span
+              class="chatbot-report-chapter-row__sort chatbot-report-chapter-row__sort--placeholder"
+              aria-hidden="true"
+            />
+            <input
+              class="chatbot-report-chapter-row__check"
+              type="checkbox"
+              :checked="allChaptersSelected"
+              :disabled="readonly"
+              @change="toggleAllChapters"
+            />
+            <span class="chatbot-report-chapter-select-all__label">全部章節</span>
+          </label>
+
+          <div class="chatbot-report-chapter-list">
+            <div
+              v-for="(preset, index) in orderedPresets"
+              :key="preset.key"
+              class="chatbot-report-chapter-row-wrap"
+              :data-chapter-key="preset.key"
+              :class="{ 'is-popover-open': openChapterDetailKey === preset.key }"
+            >
+              <div
+                class="chatbot-report-chapter-row"
+                :class="{
+                  'is-dragging': dragChapterKey === preset.key,
+                  'is-drag-over': dragOverChapterKey === preset.key,
+                  'is-unavailable': isChapterUnavailable(preset),
+                  'is-ellipsis-clickable': readonly || hasChapterRowEllipsis(preset),
+                  'is-detail-open': openChapterDetailKey === preset.key,
+                }"
+                :draggable="!readonly"
+                @dragstart="onChapterDragStart($event, preset.key)"
+                @dragend="handleChapterDragEnd"
+                @dragover.prevent="dragOverChapterKey = preset.key"
+                @drop="handleChapterDrop(preset.key)"
+                @click="onChapterRowClick(preset.key, $event)"
+              >
+                <el-icon class="chatbot-report-chapter-row__sort" aria-hidden="true">
+                  <Sort />
+                </el-icon>
+                <input
+                  v-model="selectedChapters[preset.key]"
+                  class="chatbot-report-chapter-row__check"
+                  type="checkbox"
+                  :disabled="readonly || isChapterUnavailable(preset)"
+                  @click.stop
+                  @mousedown.stop
+                />
+                <div class="chatbot-report-chapter-row__label" @mousedown.stop @dragstart.prevent>
+                  <button
+                    type="button"
+                    class="chatbot-report-chapter-row__label-text"
+                    :class="{ 'is-truncated': labelOverflowMap[preset.key] }"
+                    draggable="false"
+                    :ref="(el) => bindChapterLabelEl(preset.key, el)"
+                    @mousedown.stop
+                  >
+                    <span class="chatbot-report-chapter-row__label-main">
+                      {{ formatChapterDisplayTitle(index, preset.label) }}
+                    </span>
+                    <span
+                      v-if="labelOverflowMap[preset.key]"
+                      class="chatbot-report-chapter-row__label-ellipsis"
+                      aria-hidden="true"
+                      >...</span
+                    >
+                  </button>
+                </div>
+                <template v-if="isChapterUnavailable(preset)">
+                  <span class="chatbot-report-chapter-row__no-version">{{
+                    unavailableVersionLabel
+                  }}</span>
+                </template>
+                <template v-else>
+                  <el-select
+                    v-model="chapterVersions[preset.key]"
+                    class="chatbot-report-chapter-row__version"
+                    size="small"
+                    teleported
+                    :disabled="readonly || !getChapterVersionOptions(preset.key).length"
+                    @click.stop
+                    @mousedown.stop="onVersionSelectMouseDown"
+                    @visible-change="onChapterVersionVisibleChange"
+                  >
+                    <el-option
+                      v-for="version in getChapterVersionOptions(preset.key)"
+                      :key="`${preset.key}-${version.value}-${version.text}`"
+                      :label="version.text"
+                      :value="version.value"
+                    />
+                  </el-select>
+                  <span
+                    class="chatbot-report-chapter-row__generator"
+                    :class="{
+                      'is-truncated': isGeneratorNameTruncated(preset.key),
+                    }"
+                  >
+                    <span class="chatbot-report-chapter-row__generator-main">
+                      {{ formatGeneratorDisplayName(preset.key) }}
+                    </span>
+                    <span
+                      v-if="isGeneratorNameTruncated(preset.key)"
+                      class="chatbot-report-chapter-row__generator-ellipsis"
+                      aria-hidden="true"
+                      >...</span
+                    >
+                  </span>
+                </template>
+              </div>
+
+              <!-- 浮動詳情：absolute 不佔文檔流空間，覆蓋在後續章節之上 -->
+              <div
+                v-if="openChapterDetailKey === preset.key && openChapterDetail"
+                class="chatbot-report-chapter-title-popover-local"
+                role="dialog"
+                aria-label="章節詳情"
+                @click.stop
+                @mousedown.stop
+              >
+                <div class="chatbot-report-chapter-detail-row">
+                  <span class="chatbot-report-chapter-detail-row__label">章節標題</span>
+                  <span class="chatbot-report-chapter-detail-row__value">{{
+                    openChapterDetail.title
+                  }}</span>
+                </div>
+                <div class="chatbot-report-chapter-detail-row">
+                  <span class="chatbot-report-chapter-detail-row__label">版本</span>
+                  <span class="chatbot-report-chapter-detail-row__value">{{
+                    openChapterDetail.version
+                  }}</span>
+                </div>
+                <div class="chatbot-report-chapter-detail-row">
+                  <span class="chatbot-report-chapter-detail-row__label">生成人</span>
+                  <span class="chatbot-report-chapter-detail-row__value">{{
+                    openChapterDetail.generator
+                  }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="!readonly" class="chatbot-report-settings__toolbar">
+          <div class="chatbot-report-settings__toolbar-inner">
+            <div class="chatbot-report-settings__col-coherence">
+              <el-select
+                v-if="showChapterLanguageSelect"
+                v-model="chapterContentLanguage"
+                class="chatbot-report-settings__language"
+                size="small"
+                teleported
+                @mousedown="onVersionSelectMouseDown"
+                @visible-change="onChapterVersionVisibleChange"
+              >
+                <el-option
+                  v-for="item in chapterContentLanguageOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+              <el-button
+                class="chatbot-report-settings__btn chatbot-report-settings__btn--primary chatbot-report-settings__btn--coherence"
+                :loading="coherenceChecking"
+                :disabled="readonly || coherenceChecking"
+                @click="handleCoherenceCheck"
+              >
+                報告連貫性檢查
+              </el-button>
+            </div>
+            <el-button
+              class="chatbot-report-settings__btn chatbot-report-settings__btn--primary chatbot-report-settings__btn--generate"
+              @click="handleGenerate"
+            >
+              生成報告
+            </el-button>
+          </div>
+        </div>
+      </div>
+    </ReportCollapsibleSection>
+
+    <!-- 無報告歷史時默認收起；有內容或滾動定位時可展開 -->
+    <ReportCollapsibleSection
+      v-if="!readonly"
+      v-model:open="historyOpen"
+      title="報告歷史"
+      card-hover
+    >
+      <ReportHistoryList
+        v-model:active-key="activeHistoryKey"
+        :items="reportHistoryItems"
+        :show-title="false"
+        :editable="false"
+        @select="handleSelectHistory"
+      />
+    </ReportCollapsibleSection>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import genAiReportEditorApi, {
+  pickAdjustInstanceText,
+  pickExistsInstanceVersionNo,
+} from '@/api/modules/build-report/reportEditor'
+import { useGenAiBuildReportStore } from '@/store/modules/gen-ai'
+import type {
+  GenAiAdjustInstanceSection,
+  GenAiInstanceVersionVO,
+  GenAiSimTradTargetLang,
+} from '@/types/gen-ai/build-report/reportEditor'
+import { Sort } from '@element-plus/icons-vue'
+import { ElButton, ElIcon, ElMessage, ElMessageBox, ElOption, ElSelect } from 'element-plus'
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ReportCollapsibleSection, ReportHistoryList } from '../../common'
+import { isGenAiResponseOk } from '../../common/utils/api-res-status'
+import {
+  buildChapterOrderForHistoryRecord,
+  buildGenerationSignature,
+  CHAPTER_CONTENT_LANGUAGE_OPTIONS,
+  findFinalizedReportById,
+  isCoherenceCheckCompleted,
+  loadCoherenceCheckSession,
+  markCoherenceCheckCompleted,
+  openReportCoherenceCheck,
+  saveCoherenceCheckSession,
+  serializeChapterLayoutFromState,
+  shouldShowChapterLanguageSelect,
+  translateChapterLabel,
+  translateUnavailableVersionLabel,
+  type ChapterContentLanguage,
+  type CoherenceCheckSessionPayload,
+  type ReportChapterSelectionItem,
+} from '../report-domain'
+import { useReportWorkflow, type ReportHistoryItem } from '../useReportWorkflow'
+
+const props = withDefaults(
+  defineProps<{
+    readonly?: boolean
+    coherenceSession?: CoherenceCheckSessionPayload | null
+  }>(),
+  {
+    readonly: false,
+    coherenceSession: null,
+  }
+)
+
+const UNAVAILABLE_CHAPTER_LABELS = new Set(['附件與數'])
+
+interface ChapterPreset {
+  key: string
+  label: string
+}
+
+const emit = defineEmits<{
+  generated: [{ historyKey: string; displayTitle: string }]
+}>()
+
+const settingsOpen = ref(true)
+const historyOpen = ref(false)
+const route = useRoute()
+const router = useRouter()
+const {
+  selectedTemplate,
+  draft,
+  patchDraft,
+  historyPreviewRecordId,
+  historyPreviewLayoutBaseline,
+  historyPreviewApplyToken,
+  markHistoryPreviewDirty,
+  selectHistoryReport,
+  reportHistoryItems,
+  activeHistoryKey,
+  historyScrollTargetKey,
+  clearHistoryScrollTarget,
+  resetHistoryPreviewState,
+  settingsChapterPresets,
+  settingsSelectedChapters,
+  settingsChapterOrder,
+  settingsChapterVersionOptions,
+  settingsChapterVersions,
+  settingsChapterGenerators,
+  applyAdjustInstanceFiles,
+  requestSettingsTypewriterReplay,
+  settingsTypingChapterKey,
+  adjustInstanceContents,
+  setAdjustInstanceContents,
+  existsInstanceVersionNo,
+  setExistsInstanceVersionNo,
+  applyAdjustInstanceSections,
+  setCoherenceCheckResultReady,
+  clearCoherenceCheckResultReady,
+  coherenceCheckContentText,
+  coherenceResultReady,
+  markAdjustInstanceSettingSynced,
+  isAdjustInstanceSettingSynced,
+  suppressAdjustInstanceSettingWatch,
+  beginReportGenerateStream,
+  appendReportGenerateStream,
+  finishReportGenerateStream,
+  clearReportGenerateStream,
+  sourceFiles,
+  upsertChapterChartStreamRef,
+  clearChapterChartStreamRefs,
+} = useReportWorkflow()
+
+const genAiBuildReportStore = useGenAiBuildReportStore()
+
+/** 本地測試：優先 store.instanceId */
+function resolveInstanceId() {
+  return String(genAiBuildReportStore.instanceId ?? '').trim()
+}
+
+// report editor api
+/** 報告歷史接口緩存（InstHistEnquiry.instanceVersionVOList） */
+const genAiInstanceVersionVOList = ref<GenAiInstanceVersionVO[]>([])
+/** 避免佈局回填 / 初始化時誤觸 AdjustInstanceSetting */
+let suppressAdjustInstanceSetting = false
+/** 用戶手動點報告歷史時，暫不因 existsInstanceVersionNo 回寫改選中 */
+let suppressHistorySelectByExistsVersion = false
+let adjustInstanceSettingSeq = 0
+let simTradTransferSeq = 0
+/** 中欄正文指紋：相同內容不重播打字機 */
+let lastAdjustContentsFingerprint = ''
+
+function fingerprintAdjustContents(
+  list: Array<{ sectionTitle?: string; sectionContent?: string }>
+) {
+  return JSON.stringify(
+    list.map((item) => ({
+      t: String(item.sectionTitle ?? ''),
+      c: String(item.sectionContent ?? ''),
+    }))
+  )
+}
+
+/**
+ * 按章節標題還原用戶拖拽後的順序。
+ * 背景：AdjustInstanceSetting 回寫調用 applyAdjustInstanceSections 時，
+ * 會把 settingsChapterOrder 重置為 chapter-0..n（接口列表下標），
+ * 導致「取消全選 → 拖拽 → 再勾全部章節」後打字機按接口序打印而非拖拽序。
+ */
+function restoreChapterOrderByLabels(orderLabels: string[]) {
+  if (!orderLabels.length || !settingsChapterPresets.value.length) return
+  // 標題 → 當前 key（回寫後 key 可能重編，只能用標題對齊）
+  const keyByLabel = new Map(
+    settingsChapterPresets.value.map((preset) => [preset.label, preset.key] as const)
+  )
+  const restored = orderLabels
+    .map((label) => keyByLabel.get(label))
+    .filter((key): key is string => typeof key === 'string')
+  if (!restored.length) return
+  const used = new Set(restored)
+  // 拖拽序裡沒有的章節（若有）接在後面，避免丟章
+  const rest = settingsChapterPresets.value
+    .map((preset) => preset.key)
+    .filter((key) => !used.has(key))
+  settingsChapterOrder.value = [...restored, ...rest]
+}
+
+function splitCommaIds(raw: string | undefined | null): string[] {
+  if (!raw) return []
+  return String(raw)
+    .split(',')
+    .map((item) => item.trim())
+    .filter(Boolean)
+}
+
+/** 統一版本號：V1 / v1 / 1 → V1，便於 existsInstanceVersionNo 對照 */
+function normalizeInstanceVersionNo(raw: unknown): string {
+  if (raw == null || raw === '') return ''
+  const text = String(raw).trim().toUpperCase()
+  if (!text) return ''
+  return text.startsWith('V') ? text : `V${text}`
+}
+
+function mapInstanceVersionToHistoryItem(
+  item: GenAiInstanceVersionVO,
+  index: number
+): ReportHistoryItem {
+  const versionNo = item.instanceVersionNo
+  const titleFromNo =
+    versionNo != null && String(versionNo).trim() ? `報告版本 V${String(versionNo).trim()}` : ''
+  const title = item.objectName?.trim() || titleFromNo || `報告歷史 ${index + 1}`
+  const key =
+    item.instanceVersionId?.trim() ||
+    `${item.instanceId || 'hist'}-${index}-${item.sectionVersionIdList || ''}`
+
+  return {
+    key,
+    title,
+    author: item.updateUserName || item.createdUserName || '',
+    finalizedAt: item.updateDatetime || item.createdDatetime || '',
+    recordId: key,
+    kind: 'history',
+  }
+}
+
+/** 當前 versionIdList（上→下）是否與某條報告歷史 sectionVersionIdList 一致 */
+function findHistoryMatchingVersionIds(
+  versionIdList: string[]
+): GenAiInstanceVersionVO | undefined {
+  if (!versionIdList.length) return undefined
+  const target = versionIdList.join(',')
+  return genAiInstanceVersionVOList.value.find((item) => {
+    const ids = splitCommaIds(item.sectionVersionIdList)
+    return ids.length === versionIdList.length && ids.join(',') === target
+  })
+}
+
+/** 已生成報告展示標題（接口歷史 / existsInstanceVersionNo） */
+function resolveExistingReportDisplayTitle(vo?: GenAiInstanceVersionVO | null): string {
+  if (vo) {
+    const versionNo = vo.instanceVersionNo
+    const titleFromNo =
+      versionNo != null && String(versionNo).trim() ? `報告版本 ${String(versionNo).trim()}` : ''
+    return (
+      vo.objectName?.trim() ||
+      titleFromNo ||
+      `${draft.reportName || '報告'}${existsInstanceVersionNo.value ? ` ${existsInstanceVersionNo.value}` : ''}`
+    )
+  }
+  if (existsInstanceVersionNo.value) {
+    const name = draft.reportName?.trim() || '報告'
+    return `${name} ${existsInstanceVersionNo.value}`
+  }
+  return draft.reportName?.trim() || '報告'
+}
+
+/**
+ * 「已生成報告」校驗：僅對照 InstHistEnquiry 章節版本匹配
+ */
+async function findAlreadyGeneratedReportTitle(
+  _templateId: string,
+  _selection: ReportChapterSelectionItem[]
+): Promise<string | null> {
+  const versionIdList = buildSelectedVersionIdList()
+  const instanceId = resolveInstanceId()
+  if (instanceId) {
+    await loadGenAiInstanceHistForReportPage()
+  }
+
+  const matchedHist = findHistoryMatchingVersionIds(versionIdList)
+  if (matchedHist) {
+    return resolveExistingReportDisplayTitle(matchedHist)
+  }
+  return null
+}
+
+/**
+ * 報告歷史查詢 InstHistEnquiry
+ * 調試：參數僅 instanceId；返回 instanceVersionVOList
+ */
+const fetchGenAiInstanceHist = async (params: { instanceId: string }) => {
+  const res: any = await genAiReportEditorApi
+    .fetchGenAiInstanceHist({
+      instanceId: params.instanceId,
+    })
+    .catch((err) => {
+      console.error('接口异常', err)
+      return null
+    })
+
+  try {
+    if (!isGenAiResponseOk(res)) {
+      console.warn('[report editor] InstHistEnquiry', res?.message || '接口异常')
+      return {
+        ok: false as const,
+        list: [] as GenAiInstanceVersionVO[],
+      }
+    }
+    const list = (
+      Array.isArray(res?.data?.instanceVersionVOList) ? res.data.instanceVersionVOList : []
+    ) as GenAiInstanceVersionVO[]
+    console.log('报告历史列表', list)
+    return { ok: true as const, list }
+  } catch (err) {
+    console.error('接口异常', err)
+    return {
+      ok: false as const,
+      list: [] as GenAiInstanceVersionVO[],
+    }
+  }
+}
+
+/** 拉取報告歷史並覆蓋右側列表；失敗則空並收起 */
+async function loadGenAiInstanceHistForReportPage() {
+  const instanceId = resolveInstanceId()
+  if (!instanceId) {
+    console.warn('[report editor] 無 instanceId，InstHistEnquiry 跳過')
+    genAiInstanceVersionVOList.value = []
+    reportHistoryItems.value = []
+    activeHistoryKey.value = ''
+    historyOpen.value = false
+    return false
+  }
+
+  const result = await fetchGenAiInstanceHist({ instanceId })
+  if (!result.ok) {
+    genAiInstanceVersionVOList.value = []
+    reportHistoryItems.value = []
+    activeHistoryKey.value = ''
+    historyOpen.value = false
+    return false
+  }
+
+  genAiInstanceVersionVOList.value = result.list
+  reportHistoryItems.value = result.list.map((item, index) =>
+    mapInstanceVersionToHistoryItem(item, index)
+  )
+  historyOpen.value = reportHistoryItems.value.length > 0
+  // 進頁：existsInstanceVersionNo === instanceVersionNo → 選中第一個匹配 card
+  selectHistoryMatchingExistsVersionNo()
+  return true
+}
+
+/**
+ * AdjustInstance.existsInstanceVersionNo 對照報告歷史 instanceVersionNo
+ * 相等則該 card 為選中態（多個匹配取第一個）；無匹配則選列表首條
+ */
+function selectHistoryMatchingExistsVersionNo() {
+  if (!reportHistoryItems.value.length) {
+    activeHistoryKey.value = ''
+    return
+  }
+  const target = normalizeInstanceVersionNo(existsInstanceVersionNo.value)
+  if (target) {
+    const matchIndex = genAiInstanceVersionVOList.value.findIndex(
+      (item) => normalizeInstanceVersionNo(item.instanceVersionNo) === target
+    )
+    if (matchIndex >= 0) {
+      activeHistoryKey.value = reportHistoryItems.value[matchIndex]?.key ?? ''
+      console.log('[report editor] 報告歷史選中（對照 existsInstanceVersionNo）', {
+        existsInstanceVersionNo: existsInstanceVersionNo.value,
+        key: activeHistoryKey.value,
+      })
+      return
+    }
+  }
+  activeHistoryKey.value = reportHistoryItems.value[0]?.key ?? ''
+}
+
+/**
+ * 已勾選章節的版本 UUID 列表（上→下）
+ * = instanceSections.versions[].value
+ */
+function buildSelectedVersionIdList(): string[] {
+  return chapterOrder.value
+    .map((key) => chapterPresets.value.find((preset) => preset.key === key))
+    .filter((preset): preset is ChapterPreset => !!preset)
+    .filter((preset) => !!selectedChapters.value[preset.key] && !isChapterUnavailable(preset))
+    .map((preset) => String(chapterVersions.value[preset.key] ?? '').trim())
+    .filter(Boolean)
+}
+
+/**
+ * 調整報告設置 AdjustInstanceSetting
+ * 勾選章節 / 拖動 / 切換報告歷史後調用
+ * 回寫：資訊源 +（若有）右側章節設置 + 中欄正文
+ */
+const adjustGenAiInstanceSetting = async (params: {
+  instanceId: string
+  versionIdList: string[]
+}) => {
+  const res: any = await genAiReportEditorApi
+    .adjustGenAiInstanceSetting({
+      instanceId: params.instanceId,
+      versionIdList: params.versionIdList,
+    })
+    .catch((err) => {
+      console.error('接口异常', err)
+      return null
+    })
+
+  try {
+    if (!isGenAiResponseOk(res)) {
+      console.warn('[report editor] AdjustInstanceSetting', res?.message || '接口异常')
+      return { ok: false as const }
+    }
+    const data = res?.data ?? {}
+    const fileList = Array.isArray(data.instanceFileList) ? data.instanceFileList : []
+    const sectionList = Array.isArray(data.instanceSections) ? data.instanceSections : []
+    const contentList = Array.isArray(data.instanceContents) ? data.instanceContents : []
+
+    // —— 保留拖拽順序：回寫前先記下當前標題序，回寫後還原 ——
+    const preservedOrderLabels = settingsChapterOrder.value
+      .map((key) => settingsChapterPresets.value.find((preset) => preset.key === key)?.label)
+      .filter((label): label is string => !!label)
+
+    // 回寫會改 chapterOrder / versions → 抑制 watch，避免死循環閃爍
+    suppressAdjustInstanceSetting = true
+    try {
+      setExistsInstanceVersionNo(pickExistsInstanceVersionNo(data))
+      applyAdjustInstanceFiles(fileList)
+
+      // 右側「生成報告設置」章節勾選 / 版本 / 排序
+      let orderRestoredToDrag = false
+      if (sectionList.length) {
+        applyAdjustInstanceSections(sectionList)
+        // 接口剛寫入的默認序（chapter-0..n）
+        const apiOrderKeys = settingsChapterOrder.value.slice()
+        // 還原為用戶拖拽後的標題序
+        restoreChapterOrderByLabels(preservedOrderLabels)
+        // 是否相對接口默認序發生了拖拽重排（用於決定是否強制重播打字機）
+        orderRestoredToDrag =
+          JSON.stringify(settingsChapterOrder.value) !== JSON.stringify(apiOrderKeys)
+      }
+      // 中欄 editor 正文：
+      // 1) 內容指紋變了 → 按還原後的首章重播打字機
+      // 2) 內容沒變但拖拽序變了 → 仍按新順序重播，避免打印序錯亂
+      if (contentList.length) {
+        const fp = fingerprintAdjustContents(contentList)
+        setAdjustInstanceContents(contentList)
+        const firstKey = settingsChapterOrder.value[0]
+        if (fp !== lastAdjustContentsFingerprint) {
+          lastAdjustContentsFingerprint = fp
+          if (firstKey) requestSettingsTypewriterReplay(firstKey)
+        } else if (orderRestoredToDrag && firstKey) {
+          requestSettingsTypewriterReplay(firstKey)
+        }
+      }
+
+      markAdjustInstanceSettingSynced(buildSelectedVersionIdList())
+    } finally {
+      void nextTick(() => {
+        suppressAdjustInstanceSetting = false
+      })
+    }
+
+    console.log('调整报告设置', {
+      versionIdList: params.versionIdList,
+      existsInstanceVersionNo: existsInstanceVersionNo.value,
+      sections: sectionList.length,
+      contents: contentList.length,
+      fileList,
+    })
+    return { ok: true as const }
+  } catch (err) {
+    console.error('接口异常', err)
+    return { ok: false as const }
+  }
+}
+
+/** 勾選 / 拖動 / 切換章節版本後調用；全部不選不調用（原有佈局聯動 + 資訊源反顯） */
+async function loadAdjustInstanceSettingOnChapterChange() {
+  if (props.readonly) return false
+  if (
+    suppressAdjustInstanceSetting ||
+    suppressAdjustInstanceSettingWatch.value ||
+    isApplyingHistoryLayout.value
+  ) {
+    return false
+  }
+  // 尚無接口版本選項時不調（避免模板 mock V1..V6）
+  if (!Object.keys(settingsChapterVersionOptions.value).length) return false
+
+  const versionIdList = buildSelectedVersionIdList()
+  if (!versionIdList.length) {
+    console.log('[report editor] 未勾選章節，跳過 AdjustInstanceSetting')
+    return false
+  }
+  // 與上次回寫結果一致 → 跳過（打斷回寫觸發的 watch 循環）
+  if (isAdjustInstanceSettingSynced(versionIdList)) return false
+
+  const instanceId = resolveInstanceId()
+  if (!instanceId) {
+    console.warn('[report editor] 無 instanceId，AdjustInstanceSetting 跳過')
+    return false
+  }
+
+  const seq = ++adjustInstanceSettingSeq
+  const result = await adjustGenAiInstanceSetting({ instanceId, versionIdList })
+  if (seq !== adjustInstanceSettingSeq) return false
+  return result.ok
+}
+
+/**
+ * 報告定稿 FinalInstance
+ * 生成報告設置頁點「生成報告」後調用；參數同 AdjustInstanceSetting
+ */
+const finalGenAiInstance = async (params: { instanceId: string; versionIdList: string[] }) => {
+  const res: any = await genAiReportEditorApi
+    .finalGenAiInstance({
+      instanceId: params.instanceId,
+      versionIdList: params.versionIdList,
+    })
+    .catch((err) => {
+      console.error('接口异常', err)
+      return null
+    })
+
+  try {
+    if (!isGenAiResponseOk(res)) {
+      console.warn('[report editor] FinalInstance', res?.message || '接口异常')
+      return { ok: false as const, message: String(res?.message || '報告定稿失敗') }
+    }
+    console.log('报告定稿 FinalInstance', {
+      versionIdList: params.versionIdList,
+      data: res?.data,
+    })
+    return { ok: true as const, message: String(res?.message || '') }
+  } catch (err) {
+    console.error('接口异常', err)
+    return { ok: false as const, message: '報告定稿失敗' }
+  }
+}
+
+/** 點「生成報告」→ FinalInstance；失敗不走本地定稿 */
+async function loadFinalInstanceOnGenerate() {
+  const versionIdList = buildSelectedVersionIdList()
+  if (!versionIdList.length) {
+    ElMessage.warning('請先勾選章節')
+    return false
+  }
+
+  const instanceId = resolveInstanceId()
+  if (!instanceId) {
+    console.warn('[report editor] 無 instanceId，FinalInstance 跳過')
+    ElMessage.warning('缺少報告實例，無法生成')
+    return false
+  }
+
+  const result = await finalGenAiInstance({ instanceId, versionIdList })
+  if (!result.ok) {
+    ElMessage.warning(result.message || '報告定稿失敗')
+    return false
+  }
+  // 定稿成功後刷新報告歷史
+  await loadGenAiInstanceHistForReportPage()
+  return true
+}
+
+/** zh-Hans → CHS（簡體），zh-Hant → CHT（繁體） */
+function mapChapterContentLanguageToTargetLang(
+  lang: ChapterContentLanguage
+): GenAiSimTradTargetLang {
+  return lang === 'zh-Hans' ? 'CHS' : 'CHT'
+}
+
+/**
+ * 繁簡轉換 SimTradTransfer
+ * 生成報告設置「語言」下拉切換後調用；回寫中欄 instanceContents
+ */
+const simTradTransferGenAiInstance = async (params: {
+  targetLang: GenAiSimTradTargetLang
+  instanceContents: Array<{ sectionTitle: string; sectionContent: string }>
+}) => {
+  const res: any = await genAiReportEditorApi
+    .simTradTransferGenAiInstance({
+      targetLang: params.targetLang,
+      instanceContents: params.instanceContents,
+    })
+    .catch((err) => {
+      console.error('接口异常', err)
+      return null
+    })
+
+  try {
+    if (!isGenAiResponseOk(res)) {
+      console.warn('[report editor] SimTradTransfer', res?.message || '接口异常')
+      return { ok: false as const }
+    }
+    const raw = res?.data
+    const list = Array.isArray(raw?.instanceContents)
+      ? raw.instanceContents
+      : Array.isArray(raw)
+        ? raw
+        : []
+    setAdjustInstanceContents(
+      list.map((item: { sectionTitle?: string; sectionContent?: string }) => ({
+        sectionTitle: String(item?.sectionTitle ?? ''),
+        sectionContent: String(item?.sectionContent ?? ''),
+      }))
+    )
+    lastAdjustContentsFingerprint = fingerprintAdjustContents(adjustInstanceContents.value)
+    console.log('繁简转换 SimTradTransfer', {
+      targetLang: params.targetLang,
+      contents: adjustInstanceContents.value,
+    })
+    return { ok: true as const }
+  } catch (err) {
+    console.error('接口异常', err)
+    return { ok: false as const }
+  }
+}
+
+/** 語言下拉：先走原有 draft 語言切換，再調繁簡轉換；無正文時僅保留本地語言（標題 i18n） */
+async function loadSimTradTransferOnLanguageChange(lang: ChapterContentLanguage) {
+  if (props.readonly) return false
+  const contents = adjustInstanceContents.value
+  if (!contents.length) {
+    console.log('[report editor] 無 instanceContents，跳過 SimTradTransfer（保留本地語言切換）')
+    return false
+  }
+
+  const targetLang = mapChapterContentLanguageToTargetLang(lang)
+  const seq = ++simTradTransferSeq
+  const result = await simTradTransferGenAiInstance({
+    targetLang,
+    instanceContents: contents.map((item) => ({
+      sectionTitle: item.sectionTitle,
+      sectionContent: item.sectionContent,
+    })),
+  })
+  if (seq !== simTradTransferSeq) return false
+  if (!result.ok) {
+    ElMessage.warning('繁簡轉換失敗')
+    return false
+  }
+  // 原有中欄重播：內容已換
+  const firstKey = settingsChapterOrder.value[0]
+  if (firstKey) requestSettingsTypewriterReplay(firstKey)
+  return true
+}
+
+// —— report editor api end ——
+
+function handleSelectHistory(item: ReportHistoryItem) {
+  activeHistoryKey.value = item.key
+  const voIndex = reportHistoryItems.value.findIndex((entry) => entry.key === item.key)
+  const vo = voIndex >= 0 ? genAiInstanceVersionVOList.value[voIndex] : undefined
+  if (vo) {
+    // 切換報告歷史 → AdjustInstanceSetting 刷新：生成報告設置 + 中欄 editor + 資訊源
+    const versionIdList = splitCommaIds(vo.sectionVersionIdList)
+    const instanceId = String(vo.instanceId ?? '').trim() || resolveInstanceId()
+    console.log('選中報告歷史', {
+      instanceId,
+      sectionIds: splitCommaIds(vo.sectionIdList),
+      sectionVersionIds: versionIdList,
+      instanceVersionNo: vo.instanceVersionNo,
+      vo,
+    })
+    if (instanceId && versionIdList.length) {
+      void loadAdjustInstanceSettingFromHistoryCard({ instanceId, versionIdList })
+    } else {
+      ElMessage.warning('該歷史缺少版本信息，無法刷新報告設置')
+    }
+    resetHistoryPreviewState()
+    return
+  }
+  if (!item.recordId) {
+    resetHistoryPreviewState()
+    return
+  }
+  // 本地定稿歷史：原有預覽邏輯
+  selectHistoryReport(item.recordId)
+}
+
+/**
+ * 點擊報告歷史 card → AdjustInstanceSetting 刷新頁面（資訊源等）
+ * 參數取自該 card 的 instanceId + sectionVersionIdList
+ */
+async function loadAdjustInstanceSettingFromHistoryCard(params: {
+  instanceId: string
+  versionIdList: string[]
+}) {
+  if (props.readonly) return false
+  const selectedKey = activeHistoryKey.value
+  suppressAdjustInstanceSetting = true
+  suppressHistorySelectByExistsVersion = true
+  const seq = ++adjustInstanceSettingSeq
+  const result = await adjustGenAiInstanceSetting(params)
+  if (seq !== adjustInstanceSettingSeq) return false
+  // 保持用戶點選的 card
+  if (selectedKey) activeHistoryKey.value = selectedKey
+  void nextTick(() => {
+    suppressAdjustInstanceSetting = false
+    suppressHistorySelectByExistsVersion = false
+  })
+  return result.ok
+}
+
+/** 中欄打字進度經 workflow 通知；右側自行滾動列表行，不依賴中欄 DOM */
+watch(settingsTypingChapterKey, (key) => {
+  if (!key) return
+  void nextTick(() => {
+    const row = document.querySelector(
+      `.chatbot-report-chapter-row-wrap[data-chapter-key="${CSS.escape(key)}"]`
+    ) as HTMLElement | null
+    row?.scrollIntoView({ block: 'nearest', behavior: 'smooth', inline: 'nearest' })
+  })
+})
+
+watch(historyScrollTargetKey, async (key) => {
+  if (!key) return
+  historyOpen.value = true
+  await nextTick()
+  clearHistoryScrollTarget()
+})
+
+/** 無報告歷史時收起面板，避免空內容佔位 */
+watch(
+  reportHistoryItems,
+  (items) => {
+    if (!items.length) historyOpen.value = false
+  },
+  { deep: true }
+)
+
+const chapterContentLanguageOptions = CHAPTER_CONTENT_LANGUAGE_OPTIONS
+
+const showChapterLanguageSelect = computed(() => shouldShowChapterLanguageSelect(draft.language))
+
+const chapterContentLanguage = computed({
+  get: () => draft.chapterContentLanguage,
+  set: (value: ChapterContentLanguage) => {
+    if (draft.chapterContentLanguage === value) return
+    patchDraft({ chapterContentLanguage: value })
+    // 語言下拉：CHS/CHT 繁簡轉換
+    void loadSimTradTransferOnLanguageChange(value)
+  },
+})
+
+const unavailableVersionLabel = computed(() =>
+  translateUnavailableVersionLabel(draft.language, 'zh-Hant')
+)
+
+const chapterPresets = settingsChapterPresets
+const selectedChapters = settingsSelectedChapters
+/** 與 AdjustInstance 共用：value=UUID（或回落 V1..V6） */
+const chapterVersions = settingsChapterVersions
+const chapterGenerators = settingsChapterGenerators
+const chapterOrder = settingsChapterOrder
+const dragChapterKey = ref<string | null>(null)
+const dragOverChapterKey = ref<string | null>(null)
+const isApplyingHistoryLayout = ref(false)
+let chapterRowDragMoved = false
+
+/** 章節版本下拉：僅接口 versions；無則空（不回落 V1..V6 mock） */
+function getChapterVersionOptions(key: string) {
+  if (props.readonly) {
+    const text = String(chapterVersions.value[key] ?? '').trim()
+    const uploadUsrNameDisplay = String(chapterGenerators.value[key] ?? '').trim()
+    return text
+      ? [{ text, value: text, selected: true, uploadUsrNameDisplay }]
+      : []
+  }
+  return settingsChapterVersionOptions.value[key] ?? []
+}
+
+/** 詳情彈層展示 text，而非 UUID */
+function getChapterVersionDisplayText(key: string) {
+  const value = chapterVersions.value[key]
+  const opt = getChapterVersionOptions(key).find((item) => item.value === value)
+  return opt?.text || value || '—'
+}
+
+/**
+ * 生成人展示：≤3 字完整顯示；>3 字只顯示前 4 字 + ...（對齊圖中 LOCA...）
+ * 完整資訊在詳情彈層
+ */
+const GENERATOR_NAME_FULL_MAX = 3
+const GENERATOR_NAME_TRUNCATED_CHARS = 4
+
+function getGeneratorNameChars(key: string) {
+  const name = getChapterVersionOptions(key).find(
+    (item) => item.value == chapterVersions.value[key]
+  )?.uploadUsrNameDisplay
+  return String(name ?? '').trim()
+}
+
+function isGeneratorNameTruncated(key: string) {
+  return Array.from(getGeneratorNameChars(key)).length > GENERATOR_NAME_FULL_MAX
+}
+
+function formatGeneratorDisplayName(key: string) {
+  const chars = Array.from(getGeneratorNameChars(key))
+  if (!chars.length) return ''
+  if (chars.length <= GENERATOR_NAME_FULL_MAX) return chars.join('')
+  return chars.slice(0, GENERATOR_NAME_TRUNCATED_CHARS).join('')
+}
+
+const orderedPresets = computed(() =>
+  chapterOrder.value
+    .map((key) => chapterPresets.value.find((preset) => preset.key === key))
+    .filter((preset): preset is ChapterPreset => !!preset)
+)
+
+const allChaptersSelected = computed(() => {
+  const selectable = chapterPresets.value.filter((preset) => !isChapterUnavailable(preset))
+  return selectable.length > 0 && selectable.every((preset) => selectedChapters.value[preset.key])
+})
+
+function isChapterUnavailable(preset: ChapterPreset) {
+  return UNAVAILABLE_CHAPTER_LABELS.has(preset.label)
+}
+
+function formatChapterDisplayTitle(_index: number, label: string) {
+  return translateChapterLabel(label, draft.language, 'zh-Hant')
+}
+
+/** 章節標題是否溢出；完整詳情掛在當前章節行下方 */
+const labelOverflowMap = reactive<Record<string, boolean>>({})
+const labelElMap = new Map<string, HTMLElement>()
+const openChapterDetailKey = ref<string | null>(null)
+const openChapterDetail = ref<{ title: string; version: string; generator: string } | null>(null)
+const settingsPanelRef = ref<HTMLElement | null>(null)
+let labelResizeObserver: ResizeObserver | null = null
+
+function measureChapterLabelOverflow(key: string) {
+  const el = labelElMap.get(key)
+  if (!el) {
+    labelOverflowMap[key] = false
+    return
+  }
+  const main = el.querySelector('.chatbot-report-chapter-row__label-main') as HTMLElement | null
+  if (!main) {
+    labelOverflowMap[key] = false
+    return
+  }
+  labelOverflowMap[key] = main.scrollWidth > main.clientWidth + 1
+}
+
+function bindChapterLabelEl(key: string, el: unknown) {
+  const prev = labelElMap.get(key)
+  if (prev && labelResizeObserver) labelResizeObserver.unobserve(prev)
+
+  const node = el as HTMLElement | null
+  if (!node) {
+    labelElMap.delete(key)
+    labelOverflowMap[key] = false
+    return
+  }
+
+  labelElMap.set(key, node)
+  labelResizeObserver?.observe(node)
+  const shell = node.closest('.chatbot-report-chapter-row__label')
+  if (shell) labelResizeObserver?.observe(shell)
+  void nextTick(() => measureChapterLabelOverflow(key))
+}
+
+function remeasureAllChapterLabels() {
+  for (const key of labelElMap.keys()) measureChapterLabelOverflow(key)
+}
+
+function buildChapterDetail(key: string) {
+  const presetIndex = orderedPresets.value.findIndex((item) => item.key === key)
+  const preset = orderedPresets.value[presetIndex]
+  if (!preset) return null
+  return {
+    title: formatChapterDisplayTitle(presetIndex, preset.label),
+    version: isChapterUnavailable(preset)
+      ? unavailableVersionLabel.value
+      : getChapterVersionDisplayText(preset.key),
+    generator: getGeneratorNameChars(key) || '',
+  }
+}
+
+function closeChapterDetailPopover() {
+  openChapterDetailKey.value = null
+  openChapterDetail.value = null
+}
+
+/** 關閉面板內已展開的 el-select 下拉（與詳情彈層互斥） */
+function closeOpenSelectDropdowns() {
+  const panel = settingsPanelRef.value
+  if (!panel) return
+  panel
+    .querySelectorAll<HTMLElement>('.el-select__wrapper[aria-expanded="true"]')
+    .forEach((node) => {
+      node.blur()
+      node.click()
+    })
+  // teleported 下拉：Escape 再兜底關閉
+  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+}
+
+/** 點選版本 / 語言下拉：立刻收起詳情 */
+function onVersionSelectMouseDown() {
+  closeChapterDetailPopover()
+}
+
+/** 打開版本 / 語言下拉時關閉章節詳情 */
+function onChapterVersionVisibleChange(open: boolean) {
+  if (open) closeChapterDetailPopover()
+}
+
+function hasChapterRowEllipsis(preset: ChapterPreset) {
+  const titleOverflow = !!labelOverflowMap[preset.key]
+  const generatorOverflow =
+    !isChapterUnavailable(preset) && isGeneratorNameTruncated(preset.key)
+  return titleOverflow || generatorOverflow
+}
+
+function toggleChapterDetailPopover(key: string) {
+  const preset = orderedPresets.value.find((item) => item.key === key)
+  if (!preset) {
+    closeChapterDetailPopover()
+    return
+  }
+  // 可編輯：僅標題／生成人截斷時可開詳情；只讀檢查頁：任意行可查看完整資訊
+  if (!props.readonly && !hasChapterRowEllipsis(preset)) {
+    closeChapterDetailPopover()
+    return
+  }
+
+  if (openChapterDetailKey.value === key) {
+    closeChapterDetailPopover()
+    return
+  }
+
+  const detail = buildChapterDetail(key)
+  if (!detail) return
+  // 打開詳情前先收起下拉，避免與版本選擇同時彈開
+  closeOpenSelectDropdowns()
+  openChapterDetailKey.value = key
+  openChapterDetail.value = detail
+  // 確保詳情不被滾動區裁切：把當前行滾入可視區
+  void nextTick(() => {
+    const wrap = settingsPanelRef.value?.querySelector(
+      `.chatbot-report-chapter-row-wrap[data-chapter-key="${key}"]`
+    ) as HTMLElement | null
+    wrap?.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+  })
+}
+
+function onChapterRowClick(key: string, event: MouseEvent) {
+  if (chapterRowDragMoved) return
+  const target = event.target as HTMLElement | null
+  // 可編輯：點勾選／版本下拉不開詳情
+  // 只讀：下拉已禁用，點版本／生成人／標題區均可打開 popover 查看完整資訊
+  if (props.readonly) {
+    if (target?.closest('.chatbot-report-chapter-row__check')) return
+    toggleChapterDetailPopover(key)
+    return
+  }
+  if (
+    target?.closest(
+      '.chatbot-report-chapter-row__check, .chatbot-report-chapter-row__version, .el-select, .el-select__wrapper'
+    )
+  ) {
+    return
+  }
+  toggleChapterDetailPopover(key)
+}
+
+function onDocPointerDown(event: MouseEvent) {
+  if (!openChapterDetailKey.value) return
+  const target = event.target as HTMLElement | null
+  // 點擊版本 / 語言下拉（含 teleport 的 dropdown）→ 收起詳情
+  if (
+    target?.closest(
+      '.chatbot-report-chapter-row__version, .chatbot-report-settings__language, .el-select-dropdown, .el-popper'
+    )
+  ) {
+    closeChapterDetailPopover()
+    return
+  }
+  // 點擊詳情本身不關閉
+  if (target?.closest('.chatbot-report-chapter-title-popover-local')) return
+  // 點擊當前打開詳情的章節行：由 toggle 處理
+  if (target?.closest('.chatbot-report-chapter-row.is-detail-open')) return
+  // 點擊其他章節行：由該行 click 切換；其餘空白區域關閉
+  if (target?.closest('.chatbot-report-chapter-row')) return
+  closeChapterDetailPopover()
+}
+
+onMounted(() => {
+  labelResizeObserver = new ResizeObserver(() => remeasureAllChapterLabels())
+  window.addEventListener('resize', remeasureAllChapterLabels)
+  document.addEventListener('mousedown', onDocPointerDown, true)
+  void nextTick(() => {
+    requestAnimationFrame(() => remeasureAllChapterLabels())
+  })
+  // 報告頁掛載：拉報告歷史（失敗置空，不阻斷）
+  if (!props.readonly) {
+    void loadGenAiInstanceHistForReportPage()
+  }
+})
+
+onBeforeUnmount(() => {
+  chartAsStreamAbort?.abort()
+  chartAsStreamAbort = null
+  window.removeEventListener('resize', remeasureAllChapterLabels)
+  document.removeEventListener('mousedown', onDocPointerDown, true)
+  labelResizeObserver?.disconnect()
+  labelResizeObserver = null
+  labelElMap.clear()
+  closeChapterDetailPopover()
+})
+
+/** AdjustInstance 回寫 existsInstanceVersionNo 後，對照報告歷史選中第一個匹配 card */
+watch(existsInstanceVersionNo, (versionNo) => {
+  if (props.readonly) return
+  // 有值 = 已通過連貫性檢查 → 顯示結果 / 導出 Word；清空則回落首次生成態
+  syncCoherenceReadyByExistsVersionNo(versionNo)
+  if (suppressHistorySelectByExistsVersion) return
+  if (!reportHistoryItems.value.length) return
+  selectHistoryMatchingExistsVersionNo()
+})
+
+/**
+ * existsInstanceVersionNo 有值：已通過連貫性檢查（非首次生成）
+ * 無值：需點「報告連貫性檢查」走 CoherenceCheck
+ */
+function syncCoherenceReadyByExistsVersionNo(versionNo: string | null | undefined) {
+  const hasVersion = !!String(versionNo ?? '').trim()
+  if (hasVersion) {
+    setCoherenceCheckResultReady(true, coherenceCheckContentText.value)
+    const templateId = selectedTemplate.value?.id
+    const selection = buildCurrentChapterSelection()
+    if (templateId && selection.length) {
+      markCoherenceCheckCompleted(
+        buildGenerationSignature(
+          templateId,
+          selection,
+          draft.language,
+          draft.chapterContentLanguage
+        )
+      )
+    }
+    return
+  }
+  // 無版本號時不強制清 Y（可能剛由 CoherenceCheck 返回 Y、尚未定稿）
+}
+
+watch(
+  () => orderedPresets.value.map((item) => item.key).join('|'),
+  () => {
+    void nextTick(() => {
+      requestAnimationFrame(() => remeasureAllChapterLabels())
+    })
+  }
+)
+
+watch(settingsOpen, (open) => {
+  if (!open) {
+    closeChapterDetailPopover()
+    return
+  }
+  void nextTick(() => {
+    requestAnimationFrame(() => remeasureAllChapterLabels())
+  })
+})
+
+/** AdjustInstance 寫入章節後：生成人由 settingsChapterGenerators 同步 */
+watch(
+  settingsChapterGenerators,
+  () => {
+    void nextTick(() => {
+      requestAnimationFrame(() => remeasureAllChapterLabels())
+    })
+  },
+  { deep: true }
+)
+
+watch(
+  () => props.coherenceSession,
+  (session) => {
+    if (!props.readonly || !session) return
+    applyCoherenceSessionLayout(session)
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  () => historyPreviewApplyToken.value,
+  () => {
+    applyHistoryPreviewLayout()
+  }
+)
+
+watch(
+  [chapterOrder, selectedChapters, chapterVersions],
+  () => {
+    checkHistoryLayoutDrift()
+    // 章節組合變更後需重新連貫性檢查
+    clearCoherenceCheckResultReady()
+    const session = loadCoherenceCheckSession()
+    if (session && String(session.beenFinalizedFlag ?? '').toUpperCase() === 'Y') {
+      saveCoherenceCheckSession({
+        ...session,
+        beenFinalizedFlag: undefined,
+        coherenceCheckContentText: undefined,
+      })
+    }
+    // 勾選 / 拖動 / 切換章節版本 → AdjustInstanceSetting（全部不選不調）
+    void loadAdjustInstanceSettingOnChapterChange()
+  },
+  { deep: true }
+)
+
+function applyHistoryPreviewLayout() {
+  if (props.readonly) return
+  const recordId = historyPreviewRecordId.value
+  if (!recordId) return
+
+  const record = findFinalizedReportById(recordId)
+  const templateChapters = selectedTemplate.value?.chapters
+  if (!record || !templateChapters?.length) return
+
+  isApplyingHistoryLayout.value = true
+  suppressAdjustInstanceSetting = true
+  const layout = buildChapterOrderForHistoryRecord(templateChapters, record.chapters, (label) =>
+    UNAVAILABLE_CHAPTER_LABELS.has(label)
+  )
+  chapterPresets.value = layout.presets
+  chapterOrder.value = layout.chapterOrder
+  selectedChapters.value = layout.selectedChapters
+  chapterVersions.value = layout.chapterVersions
+  chapterGenerators.value = Object.fromEntries(layout.presets.map((preset) => [preset.key, '']))
+  isApplyingHistoryLayout.value = false
+  void nextTick(() => {
+    suppressAdjustInstanceSetting = false
+  })
+}
+
+function applyCoherenceSessionLayout(session: CoherenceCheckSessionPayload) {
+  const chapters = session.chapters ?? []
+  const presets = chapters.map((chapter, index) => ({
+    key: `coherence-chapter-${index}`,
+    label: String(chapter.label ?? '')
+      .trim()
+      .replace(/^\d+\.\s*/, '') || `章節${index + 1}`,
+  }))
+  const order = presets.map((preset) => preset.key)
+  const selectedMap = Object.fromEntries(presets.map((preset) => [preset.key, true]))
+  const versionMap = Object.fromEntries(
+    presets.map((preset, index) => [preset.key, String(chapters[index]?.version ?? '').trim()])
+  )
+  const generatorMap = Object.fromEntries(
+    presets.map((preset, index) => [
+      preset.key,
+      String(chapters[index]?.generator ?? '').trim(),
+    ])
+  )
+  const optionsMap = Object.fromEntries(
+    presets.map((preset, index) => {
+      const text = versionMap[preset.key] || ''
+      const uploadUsrNameDisplay = generatorMap[preset.key] || ''
+      return [
+        preset.key,
+        text
+          ? [{ text, value: text, selected: true, uploadUsrNameDisplay }]
+          : [],
+      ]
+    })
+  )
+  const paint = () => {
+    chapterPresets.value = presets
+    chapterOrder.value = order
+    selectedChapters.value = selectedMap
+    chapterVersions.value = { ...versionMap }
+    chapterGenerators.value = { ...generatorMap }
+    settingsChapterVersionOptions.value = { ...optionsMap }
+  }
+  paint()
+  void nextTick(paint)
+}
+
+function buildCurrentChapterSelection(): ReportChapterSelectionItem[] {
+  return orderedPresets.value
+    .filter((preset) => selectedChapters.value[preset.key] && !isChapterUnavailable(preset))
+    .map((preset) => ({
+      label: preset.label,
+      version: getChapterVersionDisplayText(preset.key),
+      generator: getGeneratorNameChars(preset.key),
+    }))
+}
+
+function checkHistoryLayoutDrift() {
+  if (props.readonly) return
+  if (!historyPreviewLayoutBaseline.value || isApplyingHistoryLayout.value) return
+
+  const currentLayout = serializeChapterLayoutFromState(
+    chapterOrder.value,
+    selectedChapters.value,
+    chapterPresets.value,
+    (label) => UNAVAILABLE_CHAPTER_LABELS.has(label)
+  )
+
+  if (currentLayout !== historyPreviewLayoutBaseline.value) {
+    markHistoryPreviewDirty()
+  }
+}
+
+function toggleAllChapters() {
+  if (props.readonly) return
+  const selectable = chapterPresets.value.filter((preset) => !isChapterUnavailable(preset))
+  const next = !selectable.every((preset) => selectedChapters.value[preset.key])
+  selectable.forEach((preset) => {
+    selectedChapters.value[preset.key] = next
+  })
+}
+
+function onChapterDragStart(event: DragEvent, key: string) {
+  if (props.readonly) {
+    event.preventDefault()
+    return
+  }
+  if (
+    (event.target as HTMLElement).closest(
+      '.chatbot-report-chapter-row__check, .chatbot-report-chapter-row__version, .chatbot-report-chapter-row__label, .el-select'
+    )
+  ) {
+    event.preventDefault()
+    return
+  }
+  chapterRowDragMoved = true
+  dragChapterKey.value = key
+  dragOverChapterKey.value = key
+}
+
+function handleChapterDragEnd() {
+  dragChapterKey.value = null
+  dragOverChapterKey.value = null
+  window.setTimeout(() => {
+    chapterRowDragMoved = false
+  }, 0)
+}
+
+function handleChapterDrop(targetKey: string) {
+  if (props.readonly) return
+  const draggingKey = dragChapterKey.value
+  if (draggingKey && draggingKey !== targetKey) {
+    const newOrder = [...chapterOrder.value]
+    const fromIdx = newOrder.indexOf(draggingKey)
+    const toIdx = newOrder.indexOf(targetKey)
+    if (fromIdx !== -1 && toIdx !== -1) {
+      newOrder.splice(fromIdx, 1)
+      newOrder.splice(toIdx, 0, draggingKey)
+      chapterOrder.value = newOrder
+      // 釋放後：跳到新位置並從該章起重新列印
+      void nextTick(() => {
+        requestSettingsTypewriterReplay(draggingKey)
+      })
+    }
+  }
+  handleChapterDragEnd()
+}
+
+function handleCoherenceCheck() {
+  void loadCoherenceCheckWithApi()
+}
+
+async function handleGenerate() {
+  const selection = buildCurrentChapterSelection()
+  if (selection.length === 0) {
+    ElMessage.warning('請先勾選章節')
+    return
+  }
+
+  const templateId = selectedTemplate.value?.id
+  if (!templateId) {
+    ElMessage.warning('請先選擇模板')
+    return
+  }
+
+  // 原有「已生成」校驗（報告歷史章節版本匹配 / 本地定稿簽名）
+  const existingTitle = await findAlreadyGeneratedReportTitle(templateId, selection)
+  if (existingTitle) {
+    ElMessage.info(`所選章節版本已生成報告《${existingTitle}》`)
+    return
+  }
+
+  const signature = buildGenerationSignature(
+    templateId,
+    selection,
+    draft.language,
+    draft.chapterContentLanguage
+  )
+
+  // existsInstanceVersionNo 有值 = 已通過連貫性檢查；否則看本地 signature
+  const coherencePassed =
+    !!String(existsInstanceVersionNo.value ?? '').trim() ||
+    coherenceResultReady.value ||
+    isCoherenceCheckCompleted(signature)
+  if (!coherencePassed) {
+    ElMessage.warning('請先進行報告連貫性檢查後再生成')
+    return
+  }
+
+  try {
+    await ElMessageBox.confirm('檢測到該報告已完成連貫性檢查，確認生成報告？', '提示', {
+      confirmButtonText: '確認',
+      cancelButtonText: '取消',
+      type: 'info',
+    })
+  } catch {
+    return
+  }
+
+  const streamed = await streamChartAsStreamToEditor(selection)
+  if (!streamed) return
+
+  ElMessage.success('已生成')
+  emit('generated', {
+    historyKey: reportHistoryItems.value[0]?.key ?? '',
+    displayTitle: draft.reportName?.trim() || '報告',
+  })
+}
+
+const coherenceChecking = ref(false)
+let chartAsStreamAbort: AbortController | null = null
+let chartAsStreamSeq = 0
+
+/** 圖中已勾選章節 + 當前版本（對齊 AdjustInstance.instanceSections） */
+function buildSelectedInstanceSections(): GenAiAdjustInstanceSection[] {
+  return orderedPresets.value
+    .filter((preset) => selectedChapters.value[preset.key] && !isChapterUnavailable(preset))
+    .map((preset) => {
+      const currentValue = String(chapterVersions.value[preset.key] ?? '').trim()
+      const versions = getChapterVersionOptions(preset.key).map((item) => ({
+        text: item.text,
+        value: item.value,
+        selected: item.value === currentValue,
+        uploadUsrNameDisplay: String(item.uploadUsrNameDisplay ?? '').trim(),
+      }))
+      return {
+        sectionTitle: preset.label,
+        selected: true,
+        createUserName: getGeneratorNameChars(preset.key) || undefined,
+        versions: versions.length
+          ? versions
+          : currentValue
+            ? [
+                {
+                  text: getChapterVersionDisplayText(preset.key),
+                  value: currentValue,
+                  selected: true,
+                  uploadUsrNameDisplay: getGeneratorNameChars(preset.key),
+                },
+              ]
+            : [],
+      }
+    })
+}
+
+/**
+ * 報告連貫性檢查：AdjustInstance promptType=COHERENCE_CHECK_PROMPT
+ * 傳遞圖中已勾選章節 + 版本，成功後跳轉結果頁打字機展示
+ */
+async function loadCoherenceCheckWithApi() {
+  const selection = buildCurrentChapterSelection().map((item) => ({
+    label: item.label,
+    version: item.version,
+    generator: String(item.generator ?? '').trim(),
+  }))
+  const versionIdList = buildSelectedVersionIdList()
+  const instanceSections = buildSelectedInstanceSections()
+  const templateId = selectedTemplate.value?.id
+  const instanceId = resolveInstanceId()
+
+  if (!selection.length || !versionIdList.length) {
+    ElMessage.warning('請先勾選章節')
+    return
+  }
+  if (!templateId) {
+    ElMessage.warning('請先選擇模板')
+    return
+  }
+  if (!instanceId) {
+    ElMessage.warning('缺少報告實例，無法進行連貫性檢查')
+    return
+  }
+
+  coherenceChecking.value = true
+  try {
+    const res: any = await genAiReportEditorApi
+      .adjustGenAiInstance({
+        instanceId,
+        promptType: 'COHERENCE_CHECK_PROMPT',
+        versionIdList,
+        instanceSections,
+      })
+      .catch((err) => {
+        console.error('接口异常', err)
+        return null
+      })
+
+    if (!isGenAiResponseOk(res)) {
+      ElMessage.warning(res?.message || '連貫性檢查失敗')
+      return
+    }
+
+    clearCoherenceCheckResultReady()
+    openReportCoherenceCheck(router, {
+      templateId,
+      reportName: draft.reportName,
+      year: draft.year,
+      chapters: selection,
+      chapterContentLanguage: draft.chapterContentLanguage,
+      reportLanguage: draft.language,
+      versionIdList,
+      instanceId,
+      coherenceCheckContentText: pickAdjustInstanceText(res?.data) || undefined,
+    })
+  } finally {
+    coherenceChecking.value = false
+  }
+}
+
+/** 點「生成報告」→ chartAsStream SSE，中欄打字機逐塊打印，[DONE] 結束 */
+async function streamChartAsStreamToEditor(selection: ReportChapterSelectionItem[]) {
+  chartAsStreamAbort?.abort()
+  chartAsStreamAbort = new AbortController()
+  const seq = ++chartAsStreamSeq
+  const signal = chartAsStreamAbort.signal
+
+  const promptDetail = [
+    draft.reportName?.trim(),
+    draft.researchFocus?.trim(),
+    selection.map((item) => item.label).join('\n'),
+  ]
+    .filter(Boolean)
+    .join('\n')
+
+  let started = false
+
+  try {
+    clearChapterChartStreamRefs()
+    for await (const chunk of genAiReportEditorApi.streamChartAsStream(
+      {
+        modelName: String(draft.model || '').trim(),
+        promptDetail: promptDetail || 'who are you?',
+        promptType: 'AI_PROMPT',
+        contentLengthLimit: null,
+        tableInfo: null,
+        chartInfo: null,
+        fileIdList: sourceFiles.value.filter((file) => file.selected).map((file) => file.id),
+        instanceId: resolveInstanceId(),
+        categoryId: 1,
+        temperature: null,
+        maxTokens: null,
+        stream: true,
+      },
+      signal,
+      {
+        onRefEvent: (ref) => upsertChapterChartStreamRef(ref),
+      }
+    )) {
+      if (seq !== chartAsStreamSeq) return false
+      if (!started) {
+        beginReportGenerateStream()
+        requestSettingsTypewriterReplay('report-generate-stream')
+        started = true
+      }
+      appendReportGenerateStream(chunk)
+    }
+    if (seq !== chartAsStreamSeq) return false
+    if (!started) return false
+    finishReportGenerateStream()
+    return true
+  } catch (err) {
+    if (signal.aborted || seq !== chartAsStreamSeq) return false
+    console.error('接口异常', err)
+    if (started) clearReportGenerateStream()
+    ElMessage.warning(err instanceof Error && err.message.trim() ? err.message : '生成報告失敗')
+    return false
+  }
+}
+</script>
+
+<style scoped>
+.chatbot-report-panel--settings {
+  --report-accent: #c53355;
+  --report-accent-hover: #a82b48;
+  --report-accent-soft: #fff5f6;
+  --report-border: #ebeef5;
+  --report-card-bg: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  min-width: 0;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: visible;
+}
+
+.chatbot-report-panel--settings.is-compact {
+  height: auto;
+  align-self: flex-start;
+}
+
+/* 報告歷史：與章節歷史相同，展開時吃掉欄內剩餘高度 */
+.chatbot-report-panel--settings > :deep(.report-collapsible-section:last-child:not(.is-collapsed)) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.chatbot-report-panel--settings
+  > :deep(
+    .report-collapsible-section:last-child:not(.is-collapsed) .report-collapsible-section__body
+  ) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.chatbot-report-panel--settings :deep(.report-collapsible-section__toggle) {
+  border-bottom: none;
+}
+
+.chatbot-report-panel--settings
+  :deep(.report-collapsible-section.is-collapsed .report-collapsible-section__toggle) {
+  padding-bottom: 0;
+}
+
+.chatbot-report-panel--settings :deep(.report-collapsible-section__body) {
+  padding-left: 0;
+  padding-right: 0;
+  padding-bottom: 10px;
+}
+
+.chatbot-report-panel--settings :deep(.report-collapsible-section__arrow) {
+  border-top-color: var(--report-accent);
+}
+
+.chatbot-report-panel--settings.is-readonly {
+  height: 100%;
+  min-height: 0;
+  gap: 0;
+}
+
+.chatbot-report-panel--settings.is-readonly.is-compact {
+  height: auto;
+  align-self: flex-start;
+}
+
+/* 僅展開時撐滿欄高；收起後隨標題收縮，避免留下空白卡片 */
+.chatbot-report-panel--settings.is-readonly
+  > :deep(.report-collapsible-section:not(.is-collapsed)) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.chatbot-report-panel--settings.is-readonly > :deep(.report-collapsible-section.is-collapsed) {
+  flex: 0 0 auto;
+}
+
+.chatbot-report-panel--settings.is-readonly
+  > :deep(.report-collapsible-section:not(.is-collapsed) .report-collapsible-section__body) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.chatbot-report-settings__content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  /* 內容自動撐開，不在設置區內滾動 */
+  min-height: auto;
+  overflow: visible;
+}
+
+.chatbot-report-chapter-select {
+  min-height: auto;
+  overflow: visible;
+  --chapter-sort-size: 16px;
+  --chapter-check-size: 14px;
+  --chapter-version-width: 48px;
+  /* 足夠放下 3 個整字，或「兩字...」，避免 overflow 裁出半字 */
+  --chapter-generator-width: 48px;
+  /* 五列共用：拖拽 | 勾選 | 標題(吃剩餘) | 版本 | 生成人 —— 右側略收，標題多一點空間 */
+  --chapter-grid-cols: var(--chapter-sort-size) var(--chapter-check-size) minmax(72px, 1fr)
+    var(--chapter-version-width) var(--chapter-generator-width);
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.chatbot-report-chapter-header,
+.chatbot-report-chapter-select-all,
+.chatbot-report-chapter-row {
+  display: grid;
+  grid-template-columns: var(--chapter-grid-cols);
+  column-gap: 6px;
+  align-items: center;
+  padding: 0;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.chatbot-report-chapter-header {
+  padding-bottom: 6px;
+}
+
+.chatbot-report-chapter-header__title,
+.chatbot-report-chapter-select-all__label,
+.chatbot-report-chapter-row__label {
+  min-width: 0;
+  text-align: left;
+  justify-self: stretch;
+}
+
+.chatbot-report-chapter-header__title {
+  /* 與下方 sort icon 左對齊，橫跨拖拽 + 勾選 + 標題三列 */
+  grid-column: 1 / 4;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chatbot-report-chapter-header__col {
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+  text-align: left;
+  white-space: nowrap;
+  justify-self: stretch;
+  width: 100%;
+}
+
+.chatbot-report-chapter-header__col--version {
+  grid-column: 4;
+  text-align: left;
+}
+
+.chatbot-report-chapter-header__col--generator {
+  grid-column: 5;
+  text-align: left;
+}
+
+.chatbot-report-chapter-select-all {
+  margin: 8px 0 6px;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+  user-select: none;
+  cursor: pointer;
+}
+
+.chatbot-report-chapter-select-all:has(.chatbot-report-chapter-row__check:disabled) {
+  cursor: default;
+}
+
+.chatbot-report-chapter-select-all__label {
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+  cursor: inherit;
+}
+
+.chatbot-report-chapter-row__sort {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--chapter-sort-size);
+  height: var(--chapter-sort-size);
+  margin: 0;
+  padding: 0;
+  color: #86909c;
+  flex-shrink: 0;
+  cursor: grab;
+  justify-self: start;
+  font-size: var(--chapter-sort-size);
+}
+
+.chatbot-report-chapter-row__sort :deep(svg) {
+  width: var(--chapter-sort-size);
+  height: var(--chapter-sort-size);
+}
+
+.chatbot-report-chapter-row__sort--placeholder {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.chatbot-report-chapter-row__check {
+  box-sizing: border-box;
+  width: var(--chapter-check-size);
+  height: var(--chapter-check-size);
+  margin: 0;
+  padding: 0;
+  accent-color: var(--report-accent);
+  cursor: pointer;
+  flex-shrink: 0;
+  justify-self: start;
+}
+
+.chatbot-report-chapter-row__check--spacer {
+  visibility: hidden;
+  pointer-events: none;
+  appearance: none;
+  border: 0;
+  background: transparent;
+}
+
+.chatbot-report-chapter-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow: visible;
+}
+
+.chatbot-report-chapter-row-wrap {
+  position: relative;
+  z-index: 0;
+}
+
+.chatbot-report-chapter-row-wrap.is-popover-open {
+  z-index: 30;
+}
+
+.chatbot-report-chapter-row {
+  padding: 6px 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  cursor: grab;
+  user-select: none;
+  align-items: center;
+  transition:
+    background 0.15s ease,
+    box-shadow 0.15s ease,
+    opacity 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.chatbot-report-chapter-row__sort,
+.chatbot-report-chapter-row__check {
+  margin-top: 0;
+  align-self: center;
+  justify-self: start;
+}
+
+/* 鼠標移入：灰底 + 圓角（對齊章節列表交互） */
+.chatbot-report-chapter-row:hover {
+  background: #f5f7fa;
+  border-radius: 8px;
+}
+
+/* 拖動中 / 落點 */
+.chatbot-report-chapter-row.is-dragging {
+  opacity: 0.5;
+  cursor: grabbing;
+  background: #fff;
+  border-color: #c53355;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+}
+
+.chatbot-report-chapter-row.is-drag-over {
+  background: var(--report-accent-soft);
+  border-color: rgba(197, 51, 85, 0.35);
+  border-radius: 8px;
+  box-shadow: inset 0 0 0 1px rgba(197, 51, 85, 0.35);
+}
+
+.chatbot-report-chapter-row__label {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-align: left;
+  align-self: center;
+}
+
+.chatbot-report-chapter-row__label-text {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.45;
+  font-weight: 500;
+  color: #303133;
+  text-align: left;
+  cursor: default;
+  pointer-events: auto;
+  position: relative;
+  z-index: 1;
+}
+
+.chatbot-report-chapter-row__label-main {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  color: #303133;
+  font-family: inherit;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 1.45;
+}
+
+.chatbot-report-chapter-row__label-ellipsis {
+  flex: 0 0 auto;
+  margin-left: 1px;
+  color: #c53355;
+  font-weight: 900;
+  font-size: 15px;
+  line-height: 1.2;
+  letter-spacing: 0;
+}
+
+.chatbot-report-chapter-row__label-text.is-truncated {
+  cursor: pointer;
+}
+
+.chatbot-report-chapter-row.is-unavailable {
+  cursor: default;
+}
+
+.chatbot-report-chapter-row.is-unavailable .chatbot-report-chapter-row__label-text {
+  color: #909399;
+}
+
+.chatbot-report-chapter-row__check:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.chatbot-report-chapter-row__no-version {
+  grid-column: 4 / 6;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.45;
+  color: #909399;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.chatbot-report-chapter-row__version {
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+  flex-shrink: 0;
+  justify-self: stretch;
+  align-self: center;
+  margin-top: 0;
+}
+
+.chatbot-report-chapter-row__version :deep(.el-select__wrapper) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  min-height: 24px;
+  padding: 0 6px;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: 14px;
+  font-weight: 500;
+  box-shadow: 0 0 0 1px #dcdfe6 inset;
+}
+
+.chatbot-report-chapter-row__version :deep(.el-select__selection) {
+  flex: 1 1 auto;
+  flex-wrap: nowrap;
+  min-width: 0;
+}
+
+.chatbot-report-chapter-row__version :deep(.el-select__selected-item) {
+  color: #303133;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chatbot-report-chapter-row__version :deep(.el-select__suffix) {
+  flex: 0 0 auto;
+  margin-left: auto;
+}
+
+.chatbot-report-chapter-row__version :deep(.el-select__caret) {
+  font-size: 14px;
+}
+
+.chatbot-report-chapter-row__version :deep(.el-select__wrapper:hover) {
+  box-shadow: 0 0 0 1px var(--report-accent) inset;
+}
+
+.chatbot-report-chapter-row__version :deep(.el-select__wrapper.is-focused) {
+  box-shadow: 0 0 0 1px var(--report-accent) inset;
+}
+
+.chatbot-report-chapter-row__generator {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
+  justify-self: stretch;
+  align-self: center;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.45;
+  color: #303133;
+  text-align: left;
+  overflow: hidden;
+}
+
+.chatbot-report-chapter-row__generator-main {
+  flex: 0 0 auto;
+  max-width: none;
+  overflow: visible;
+  white-space: nowrap;
+}
+
+.chatbot-report-chapter-row__generator-ellipsis {
+  flex: 0 0 auto;
+  margin-left: 1px;
+  color: #c53355;
+  font-weight: 900;
+  font-size: 13px;
+  line-height: 1.2;
+}
+
+.chatbot-report-chapter-row.is-ellipsis-clickable {
+  cursor: pointer;
+}
+
+.chatbot-report-chapter-row.is-ellipsis-clickable .chatbot-report-chapter-row__label-text,
+.chatbot-report-chapter-row.is-ellipsis-clickable .chatbot-report-chapter-row__generator {
+  cursor: pointer;
+}
+
+.chatbot-report-settings__toolbar {
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-top: 16px;
+  width: 100%;
+  max-width: 100%;
+}
+
+/* 左列：下拉與「報告連貫性檢查」同寬左對齊；右列：「生成報告」與左列按鈕底對齊 */
+.chatbot-report-settings__toolbar-inner {
+  display: flex;
+  align-items: flex-end;
+  gap: 10px;
+  width: max-content;
+  max-width: 100%;
+}
+
+.chatbot-report-settings__col-coherence {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 12px;
+  width: max-content;
+  max-width: 100%;
+}
+
+.chatbot-report-settings__language {
+  /* 不撐開父級，寬度跟隨「報告連貫性檢查」按鈕 */
+  width: 0;
+  min-width: 100%;
+  max-width: none;
+  flex-shrink: 0;
+  align-self: stretch;
+}
+
+.chatbot-report-settings__language :deep(.el-select__wrapper) {
+  width: 100%;
+  min-width: 0;
+  min-height: 32px;
+  padding: 0 10px;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+  box-shadow: 0 0 0 1px #dcdfe6 inset;
+}
+
+.chatbot-report-settings__language :deep(.el-select__wrapper:hover),
+.chatbot-report-settings__language :deep(.el-select__wrapper.is-focused) {
+  box-shadow: 0 0 0 1px var(--report-accent) inset;
+}
+
+.chatbot-report-settings__language :deep(.el-select__caret) {
+  color: #dcdfe6;
+}
+
+.chatbot-report-settings__btn--coherence.el-button {
+  width: max-content;
+  white-space: nowrap;
+  margin-left: 0 !important;
+}
+
+.chatbot-report-settings__btn--generate.el-button {
+  margin-left: 0 !important;
+  width: 100px;
+  min-width: 100px;
+  max-width: 100px;
+  padding: 0 8px;
+  font-size: 16px;
+}
+
+.chatbot-report-settings__btn--primary.el-button {
+  height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--report-accent) !important;
+  background: var(--report-accent) !important;
+  color: #fff !important;
+  border-radius: 4px;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.chatbot-report-settings__btn--primary.el-button:hover:not(.is-disabled) {
+  background: var(--report-accent-hover) !important;
+  border-color: var(--report-accent-hover) !important;
+  color: #fff !important;
+}
+
+.chatbot-report-settings__btn--primary.el-button.is-disabled {
+  border-color: #dcdfe6 !important;
+  background: #f5f7fa !important;
+  color: #c0c4cc !important;
+}
+
+.chatbot-report-panel--settings.is-readonly :deep(.chatbot-report-chapter-row__sort) {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.chatbot-report-panel--settings.is-readonly :deep(.chatbot-report-chapter-row__check:disabled) {
+  cursor: not-allowed;
+}
+
+/* 只讀：版本下拉禁用，點擊穿透到行，便於打開詳情 popover */
+.chatbot-report-panel--settings.is-readonly .chatbot-report-chapter-row__version {
+  pointer-events: none;
+}
+
+.chatbot-report-panel--settings.is-readonly .chatbot-report-chapter-row {
+  cursor: pointer;
+}
+</style>
+
+<style>
+.chatbot-report-panel--settings .el-select-dropdown__item.is-selected {
+  color: #c53355;
+  font-weight: 600;
+}
+
+.chatbot-report-panel--settings .el-select-dropdown__item.is-hovering {
+  background-color: #fff5f6;
+}
+
+/* 章節詳情：浮動在當前行下方，absolute 不佔文檔流空間 */
+.chatbot-report-chapter-title-popover-local {
+  position: absolute;
+  top: calc(100% + 2px);
+  left: 0;
+  right: 0;
+  z-index: 40;
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+  padding: 12px 14px;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  box-sizing: border-box;
+}
+
+/* 檢查頁只讀：避免被父級 overflow 裁切詳情 */
+.chatbot-report-panel--settings.is-readonly
+  .chatbot-report-chapter-row-wrap.is-popover-open
+  .chatbot-report-chapter-title-popover-local {
+  z-index: 60;
+}
+
+.chatbot-report-chapter-title-popover__title {
+  margin: 0 0 10px;
+  color: #303133;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.chatbot-report-chapter-title-popover__body {
+  margin: 0;
+  color: #303133;
+  font-size: 13px;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.chatbot-report-chapter-detail-row {
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr);
+  column-gap: 10px;
+  align-items: start;
+}
+
+.chatbot-report-chapter-detail-row + .chatbot-report-chapter-detail-row {
+  margin-top: 10px;
+}
+
+.chatbot-report-chapter-detail-row__label {
+  color: #909399;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.5;
+  white-space: nowrap;
+}
+
+.chatbot-report-chapter-detail-row__value {
+  min-width: 0;
+  color: #303133;
+  font-size: 13px;
+  line-height: 1.5;
+  word-break: break-word;
+}
+</style>