aegon-lv82 1.0.0

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

@@ -0,0 +1,4258 @@
+<template>
+  <section
+    class="report-chapter-workspace"
+    v-loading="chapterContentAwaitingFirstChunk"
+    element-loading-text="章節內容生成中..."
+    element-loading-background="rgba(255, 255, 255, 0.72)"
+  >
+    <header class="report-chapter-workspace__toolbar">
+      <div v-if="showFinalizeToolbar" class="report-chapter-workspace__chapter-box">
+        <el-button class="chatbot-report-btn-outline" @click="handleBackToChapterEdit">
+          返回章節編輯
+        </el-button>
+      </div>
+
+      <!--
+        // new prompt sections
+        章節下拉（本組件內實現，不拆新組件）：
+        - 無章節時觸發器空白（不顯示 0）；空列表僅 footer「新增章節」
+        - >1024 彈層最小 500px + 長標題換行（樣式見本文件 style 底部同標記區塊）
+        - 整行可拖排序；拖後顯示「確認排序」；最多 14 章可見
+      -->
+      <div v-else-if="showChapterEditToolbar" class="report-chapter-workspace__chapter-box">
+        <el-select
+          ref="chapterSelectRef"
+          :model-value="chapterSelectModelValue"
+          class="report-chapter-workspace__chapter-select"
+          teleported
+          placement="bottom-start"
+          :fallback-placements="['bottom-start', 'top-start', 'bottom-end', 'top-end']"
+          :offset="10"
+          :popper-options="chapterSelectPopperOptions"
+          popper-class="report-chapter-workspace__chapter-select-popper"
+          placeholder=""
+          :disabled="chapterEditMode"
+          @update:model-value="onChapterSelectModelUpdate"
+          @visible-change="onChapterSelectVisibleChange"
+        >
+          <el-option
+            v-for="(title, index) in chapterTitles"
+            :key="genAiSectionItems[index]?.sectionId ?? `${title}-${index}`"
+            :label="title"
+            :value="index"
+            :class="{
+              'is-dragging': selectDragSortIndex === index,
+              'is-drag-over': selectDragOverSortIndex === index,
+            }"
+          >
+            <div class="report-chapter-workspace__chapter-option">
+                  <span class="report-chapter-workspace__sort-handle" aria-hidden="true">
+                    <el-icon>
+                      <Sort />
+                    </el-icon>
+                  </span>
+              <span
+                class="report-chapter-workspace__chapter-option-title"
+                :class="{ 'is-active': index === activeChapterIndex }"
+              >
+                {{ title }}
+              </span>
+              <span class="report-chapter-workspace__chapter-option-status">{{
+                getChapterStatus(index)
+              }}</span>
+                  </div>
+          </el-option>
+          <template #empty>
+            <div class="report-chapter-workspace__chapter-select-empty" aria-hidden="true" />
+          </template>
+          <template #footer>
+            <div class="report-chapter-workspace__chapter-select-footer">
+              <button
+                type="button"
+                class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--primary report-chapter-workspace__chapter-select-footer-btn"
+                @click="openAddChapterDialog"
+              >
+                新增章節
+              </button>
+              <!-- 默認隱藏；下拉內拖動重排後才顯示 -->
+              <button
+                v-if="showConfirmSortButton"
+                type="button"
+                class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--primary report-chapter-workspace__chapter-select-footer-btn"
+                @click="handleConfirmSort"
+              >
+                確認排序
+              </button>
+            </div>
+          </template>
+        </el-select>
+          </div>
+      <!-- // new prompt sections end -->
+
+      <div class="report-chapter-workspace__toolbar-right">
+        <template v-if="showFinalizeToolbar">
+          <el-button class="chatbot-report-btn-primary" @click="handleApplyCreateTemplate">
+            申請創建模板
+          </el-button>
+          <el-button
+            class="chatbot-report-btn-primary"
+            :loading="isExportingWord"
+            @click="handleExportWord1"
+          >
+            導出(Word-AI)
+          </el-button>
+          <el-button
+            class="chatbot-report-btn-primary"
+            :loading="isExportingWord"
+            @click="handleExportWord2"
+          >
+            導出(Word-Transform)
+          </el-button>
+          <template v-if="showCoherenceResultActions">
+            <el-button
+              class="chatbot-report-btn-primary chatbot-report-btn-primary--wide"
+              @click="handleViewCoherenceCheck"
+            >
+              查看報告連貫性檢查結果
+            </el-button>
+            <!-- <el-button
+              class="chatbot-report-btn-primary"
+              :loading="isExportingWord"
+              @click="handleExportWord"
+            >
+              導出(Word)
+            </el-button> -->
+          </template>
+        </template>
+
+        <template v-else>
+          <!-- 編輯態：取消 | 存為草稿 | 儲存 | 生成報告（max-width 100px、16px） -->
+        <button
+            v-if="chapterEditMode"
+          type="button"
+            class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--outline report-chapter-workspace__action-btn"
+          @click="handleCancelEdit"
+        >
+          取消
+        </button>
+        <button
+            v-if="chapterEditMode"
+          type="button"
+            class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--primary report-chapter-workspace__action-btn"
+            @click="handleSaveDraft"
+          >
+            存為草稿
+          </button>
+          <button
+            type="button"
+            class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--primary report-chapter-workspace__action-btn"
+          @click="handleEditSave"
+        >
+            {{ chapterEditMode ? '儲存' : '編輯/儲存' }}
+        </button>
+        <button
+          type="button"
+            class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--primary report-chapter-workspace__action-btn"
+          @click="handleGenerateReport"
+        >
+          生成報告
+        </button>
+        </template>
+      </div>
+    </header>
+
+    <div
+      v-if="isReportSettingsMode"
+      ref="wordExportRootRef"
+      class="report-chapter-workspace__settings-doc"
+    >
+      <ReportTypewriterDocEditor
+        :chapters="settingsDocChapters"
+        :ready="editorContentReady"
+        empty-text="請在右側「生成報告設置」勾選至少一個章節"
+        :replay-key="settingsTypewriterReplayKey"
+        :replay-token="settingsTypewriterReplayToken"
+        :disable-typewriter="!reportGenerateStreamActive"
+        :typewriter-settle-ms="reportGenerateStreamEnded ? 0 : 1500"
+        @typing-change="setSettingsTypingChapterKey"
+        @printing-change="setSettingsTypewriterPrinting"
+      />
+    </div>
+
+    <div v-else ref="wordExportRootRef" class="report-chapter-workspace__editor">
+      <ReportChapterTiptapEditor
+        v-if="editorContentReady"
+        :key="editorKey"
+        :chapter-title="previewChapterTitle"
+        :chapter-intro="previewChapterIntro"
+        :editable="false"
+        :disable-typewriter="!chapterTypewriterActive"
+        :show-review-markers="false"
+        plain-content
+        @typewriter-complete="onChapterTypewriterComplete"
+      />
+      <div v-else class="report-chapter-workspace__editor-shell" aria-hidden="true">
+        <div class="report-chapter-workspace__editor-shell-title" />
+        <div class="report-chapter-workspace__editor-shell-line" />
+        <div class="report-chapter-workspace__editor-shell-line is-short" />
+        <div class="report-chapter-workspace__editor-shell-line" />
+      </div>
+    </div>
+
+    <el-dialog
+      v-model="chapterDialogVisible"
+      width="60%"
+      append-to-body
+      :show-close="false"
+      modal-class="report-workflow-dialog-overlay"
+      class="report-workflow-dialog report-chapter-dialog"
+      header-class="report-workflow-dialog__header"
+      @closed="handleChapterDialogClosed"
+    >
+      <template #header="{ close }">
+        <span class="report-workflow-dialog__title">新增章節</span>
+        <button
+          type="button"
+          class="report-workflow-dialog__close"
+          aria-label="關閉"
+          @click="close"
+        >
+          ×
+        </button>
+      </template>
+
+      <div class="report-chapter-dialog__form">
+        <label class="report-chapter-dialog__field report-chapter-dialog__field--row">
+          <span class="report-chapter-dialog__label">
+            章節標題<span class="report-chapter-dialog__required">*</span>
+          </span>
+          <div class="report-chapter-dialog__control">
+            <el-input
+              v-model="newChapterForm.title"
+              :maxlength="CHAPTER_TITLE_MAX"
+              show-word-limit
+              class="report-chapter-dialog__input"
+            />
+          </div>
+        </label>
+
+        <label
+          class="report-chapter-dialog__field report-chapter-dialog__field--row report-chapter-dialog__field--textarea"
+        >
+          <span class="report-chapter-dialog__label">
+            章節描述<span class="report-chapter-dialog__required">*</span>
+          </span>
+          <div class="report-chapter-dialog__control">
+            <el-input
+              v-model="newChapterForm.description"
+              type="textarea"
+              :rows="4"
+              :maxlength="CHAPTER_DESC_MAX"
+              show-word-limit
+              resize="none"
+              class="report-chapter-dialog__textarea"
+            />
+          </div>
+        </label>
+
+        <!-- rows 加大，避免字數統計被 footer 裁切 -->
+        <ReportTemplatePromptField
+          v-model="newChapterForm.prompt"
+          :maxlength="CHAPTER_PROMPT_MAX"
+          :rows="8"
+          label-width="100px"
+          field-gap="16px"
+          layout="row"
+          @ai-assist="openAiPromptDialog"
+        />
+
+        <!-- Prompt 下方：資訊源範圍（全部 / 部分豎排 + 選擇按鈕） -->
+        <div
+          class="report-chapter-dialog__field report-chapter-dialog__field--row report-chapter-dialog__field--source"
+        >
+          <span class="report-chapter-dialog__label">
+            資訊源<span class="report-chapter-dialog__required">*</span>
+          </span>
+          <div class="report-chapter-dialog__control report-chapter-dialog__source-control">
+            <el-radio-group
+              v-model="newChapterForm.sourceMode"
+              class="report-chapter-dialog__source-radios"
+            >
+              <el-radio value="all">所有資訊源檔案</el-radio>
+              <div class="report-chapter-dialog__source-partial-row">
+                <el-radio value="partial">部分資訊源檔案</el-radio>
+                <a
+                  v-if="newChapterForm.sourceMode === 'partial'"
+                  href="javascript:void(0)"
+                  class="report-chapter-dialog__source-link"
+                  @click.prevent="openChapterSourcePicker"
+                >
+                  選擇資訊源
+                </a>
+                <span
+                  v-if="
+                    newChapterForm.sourceMode === 'partial' &&
+                    newChapterForm.selectedSourceIds.length
+                  "
+                  class="report-chapter-dialog__source-hint"
+                >
+                  已選 {{ newChapterForm.selectedSourceIds.length }} 個
+                </span>
+              </div>
+            </el-radio-group>
+          </div>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="report-chapter-dialog__footer">
+          <button
+            type="button"
+            class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--outline report-chapter-dialog__footer-btn"
+            @click="closeChapterDialog"
+          >
+            取消
+          </button>
+          <button
+            type="button"
+            class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--primary report-chapter-dialog__footer-btn"
+            @click="handleAddChapterSubmit"
+          >
+            提交並生成章節內容
+          </button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 新增章節：部分資訊源時選擇檔案 -->
+    <el-dialog
+      v-model="chapterSourcePickerVisible"
+      width="520px"
+      append-to-body
+      :show-close="false"
+      class="report-chapter-source-picker"
+      header-class="report-workflow-dialog__header"
+    >
+      <template #header="{ close }">
+        <span class="report-workflow-dialog__title">選擇資訊源</span>
+        <button
+          type="button"
+          class="report-workflow-dialog__close"
+          aria-label="關閉"
+          @click="close"
+        >
+          ×
+        </button>
+      </template>
+
+      <div class="report-chapter-source-picker__body">
+        <el-checkbox
+          v-model="chapterSourcePickerCheckAll"
+          :indeterminate="chapterSourcePickerIndeterminate"
+          @change="onChapterSourceCheckAll"
+        >
+          全選
+        </el-checkbox>
+        <el-checkbox-group
+          v-model="chapterSourcePickerDraft"
+          class="report-chapter-source-picker__list"
+        >
+          <el-checkbox
+            v-for="file in sourceFiles"
+            :key="file.id"
+            :value="file.id"
+            class="report-chapter-source-picker__item"
+          >
+            {{ file.name }}
+          </el-checkbox>
+        </el-checkbox-group>
+        <p v-if="!sourceFiles.length" class="report-chapter-source-picker__empty">暫無資訊源檔案</p>
+      </div>
+
+      <template #footer>
+        <div class="report-chapter-dialog__footer">
+          <button
+            type="button"
+            class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--outline report-chapter-dialog__footer-btn"
+            @click="chapterSourcePickerVisible = false"
+          >
+            取消
+          </button>
+          <button
+            type="button"
+            class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--primary report-chapter-dialog__footer-btn"
+            @click="confirmChapterSourcePicker"
+          >
+            確定
+          </button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+      v-model="applyTemplateDialogVisible"
+      width="80%"
+      append-to-body
+      :z-index="10000"
+      :show-close="false"
+      modal-class="apply-template-overlay"
+      class="apply-template-dialog"
+      header-class="apply-template-dialog__header"
+      @closed="resetApplyTemplateForm"
+    >
+      <template #header="{ close, titleId, titleClass }">
+        <span :id="titleId" :class="['apply-template-dialog__title', titleClass]"
+          >申請創建模板</span
+        >
+        <button type="button" class="apply-template-dialog__close" aria-label="關閉" @click="close">
+          ×
+        </button>
+      </template>
+
+      <el-scrollbar v-if="applyTemplateDetail" class="apply-template-dialog__scroll">
+        <div class="apply-template-form">
+          <div class="apply-template-meta">
+            <label class="apply-template-field apply-template-field--row">
+              <span class="apply-template-label">來源報告</span>
+              <div class="apply-template-field__control">
+                <span class="apply-template-source">{{ applyTemplateDetail.sourceReport }}</span>
+              </div>
+            </label>
+
+            <label class="apply-template-field apply-template-field--row">
+              <span class="apply-template-label"
+                >主要語言<span class="apply-template-label__required">*</span></span
+              >
+              <div class="apply-template-field__control apply-template-field__control--lang">
+                <el-input
+                  :model-value="applyTemplateLanguageDisplay"
+                  disabled
+                  class="apply-template-field__input"
+                />
+              </div>
+            </label>
+
+            <label class="apply-template-field apply-template-field--row">
+              <span class="apply-template-label"
+                >模板標題<span class="apply-template-label__required">*</span></span
+              >
+              <div class="apply-template-field__control">
+                <el-input
+                  v-model="applyTemplateTitle"
+                  :maxlength="100"
+                  show-word-limit
+                  class="apply-template-field__input"
+                />
+              </div>
+            </label>
+
+            <label
+              class="apply-template-field apply-template-field--row apply-template-field--textarea-row"
+            >
+              <span class="apply-template-label"
+                >模板描述<span class="apply-template-label__required">*</span></span
+              >
+              <div class="apply-template-field__control">
+                <el-input
+                  v-model="applyTemplateDescription"
+                  type="textarea"
+                  :rows="4"
+                  :maxlength="3000"
+                  show-word-limit
+                  resize="none"
+                  class="apply-template-field__textarea"
+                />
+              </div>
+            </label>
+          </div>
+
+          <div
+            v-for="chapter in applyTemplateDisplayChapters"
+            :key="chapter.id"
+            class="apply-template-chapter"
+          >
+            <h4 class="apply-template-chapter__title">{{ chapter.title || '章節標題' }}</h4>
+
+            <label
+              class="apply-template-field apply-template-field--row apply-template-field--textarea-row"
+            >
+              <span class="apply-template-label">章節Prompt</span>
+              <div class="apply-template-field__control">
+                <el-input
+                  :model-value="chapter.prompt"
+                  type="textarea"
+                  :rows="8"
+                  :maxlength="1300"
+                  show-word-limit
+                  resize="none"
+                  disabled
+                  class="apply-template-field__textarea"
+                />
+              </div>
+            </label>
+
+            <label
+              class="apply-template-field apply-template-field--row apply-template-field--textarea-row"
+            >
+              <span class="apply-template-label">章節描述</span>
+              <div class="apply-template-field__control">
+                <el-input
+                  :model-value="chapter.description"
+                  type="textarea"
+                  :rows="8"
+                  :maxlength="1000"
+                  show-word-limit
+                  resize="none"
+                  disabled
+                  class="apply-template-field__textarea"
+                />
+              </div>
+            </label>
+          </div>
+
+          <section class="apply-template-process">
+            <label
+              class="apply-template-field apply-template-field--row apply-template-process__row"
+            >
+              <span class="apply-template-label"
+                >處理事項<span class="apply-template-label__required">*</span></span
+              >
+              <div class="apply-template-field__control">
+                <el-radio-group
+                  v-model="applyTemplateAction"
+                  class="apply-template-process__radios"
+                >
+                  <el-radio value="reject">拒絕</el-radio>
+                  <el-radio value="approve">同意</el-radio>
+                </el-radio-group>
+              </div>
+            </label>
+
+            <label
+              class="apply-template-field apply-template-field--row apply-template-field--textarea-row"
+            >
+              <span class="apply-template-label">意見</span>
+              <div class="apply-template-field__control">
+                <el-input
+                  v-model="applyTemplateOpinion"
+                  type="textarea"
+                  :rows="4"
+                  :maxlength="250"
+                  show-word-limit
+                  resize="none"
+                  class="apply-template-field__textarea"
+                />
+              </div>
+            </label>
+
+            <div class="apply-template-process__actions">
+              <button
+                type="button"
+                class="apply-template-btn apply-template-btn--ghost"
+                @click="applyTemplateDialogVisible = false"
+              >
+                取消
+              </button>
+              <button
+                type="button"
+                class="apply-template-btn apply-template-btn--primary"
+                @click="handleApplyTemplateSubmit"
+              >
+                提交
+              </button>
+    </div>
+          </section>
+
+          <section class="apply-template-approval">
+            <h4 class="apply-template-approval__title">審批明細</h4>
+            <el-table
+              :data="applyTemplateDetail.approvalRecords"
+              border
+              class="apply-template-approval-table"
+            >
+              <el-table-column label="操作人員" min-width="180" prop="operator" />
+              <el-table-column label="處理狀態" width="120" prop="status" />
+              <el-table-column label="處理完成時間" min-width="180" prop="completedAt" />
+              <el-table-column label="詳情" min-width="200" prop="detail" show-overflow-tooltip />
+            </el-table>
+          </section>
+        </div>
+      </el-scrollbar>
+    </el-dialog>
+
+    <el-dialog
+      v-model="aiPromptDialogVisible"
+      width="60%"
+      append-to-body
+      :show-close="false"
+      modal-class="report-workflow-dialog-overlay"
+      class="report-workflow-dialog ai-prompt-generate-dialog"
+      header-class="report-workflow-dialog__header"
+      @closed="handleAiPromptDialogClosed"
+    >
+      <template #header="{ close }">
+        <span class="report-workflow-dialog__title">{{ aiPromptDialogTitle }}</span>
+        <button
+          type="button"
+          class="report-workflow-dialog__close"
+          aria-label="關閉"
+          @click="close"
+        >
+          ×
+        </button>
+      </template>
+
+      <div v-if="aiPromptDialogMode === 'input'" class="ai-prompt-generate-dialog__form">
+        <label class="ai-prompt-generate-dialog__field ai-prompt-generate-dialog__field--row">
+          <span class="ai-prompt-generate-dialog__label">章節標題</span>
+          <div class="ai-prompt-generate-dialog__control">
+            <el-input
+              v-model="aiPromptForm.title"
+              :maxlength="AI_PROMPT_TITLE_MAX"
+              show-word-limit
+              class="ai-prompt-generate-dialog__input"
+            />
+          </div>
+        </label>
+
+        <label
+          class="ai-prompt-generate-dialog__field ai-prompt-generate-dialog__field--row ai-prompt-generate-dialog__field--textarea"
+        >
+          <span class="ai-prompt-generate-dialog__label">章節描述</span>
+          <div class="ai-prompt-generate-dialog__control">
+            <el-input
+              v-model="aiPromptForm.description"
+              type="textarea"
+              :rows="4"
+              :maxlength="AI_PROMPT_DESC_MAX"
+              show-word-limit
+              resize="none"
+              class="ai-prompt-generate-dialog__textarea"
+            />
+          </div>
+        </label>
+      </div>
+
+      <div v-else class="ai-prompt-generate-dialog__preview">
+        <div class="ai-prompt-generate-dialog__preview-row">
+          <span class="ai-prompt-generate-dialog__label">章節標題</span>
+          <p class="ai-prompt-generate-dialog__preview-text">{{ aiPromptForm.title }}</p>
+        </div>
+
+        <div class="ai-prompt-generate-dialog__preview-row">
+          <span class="ai-prompt-generate-dialog__label">章節描述</span>
+          <p
+            class="ai-prompt-generate-dialog__preview-text ai-prompt-generate-dialog__preview-text--multiline"
+          >
+            {{ aiPromptForm.description }}
+          </p>
+        </div>
+
+        <div class="ai-prompt-generate-dialog__divider" aria-hidden="true" />
+
+        <div
+          class="ai-prompt-generate-dialog__preview-row ai-prompt-generate-dialog__preview-row--prompt"
+        >
+          <span class="ai-prompt-generate-dialog__label">生成的 prompt</span>
+          <p
+            class="ai-prompt-generate-dialog__preview-text ai-prompt-generate-dialog__preview-text--multiline"
+          >
+            {{ aiPromptGeneratedText }}
+          </p>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="ai-prompt-generate-dialog__footer">
+          <button
+            v-if="aiPromptDialogMode === 'input'"
+            type="button"
+            class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--outline ai-prompt-generate-dialog__footer-btn"
+            @click="closeAiPromptDialog"
+          >
+            取消
+          </button>
+          <button
+            v-else
+            type="button"
+            class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--outline ai-prompt-generate-dialog__footer-btn"
+            @click="aiPromptDialogMode = 'input'"
+          >
+            退回
+          </button>
+
+          <button
+            v-if="aiPromptDialogMode === 'input'"
+            type="button"
+            class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--primary ai-prompt-generate-dialog__footer-btn"
+            :disabled="aiPromptGenerating"
+            @click="generateAiPrompt"
+          >
+            {{ aiPromptGenerating ? '生成中' : '生成 Prompt' }}
+          </button>
+          <button
+            v-else
+            type="button"
+            class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--primary ai-prompt-generate-dialog__footer-btn"
+            @click="confirmAiPrompt"
+          >
+            確認
+          </button>
+        </div>
+      </template>
+    </el-dialog>
+  </section>
+</template>
+
+<script setup lang="ts">
+import genAiReportEditorApi, {
+  pickAdjustInstanceText,
+  pickExistsInstanceVersionNo,
+} from '@/api/modules/build-report/reportEditor'
+import genAiReportPermissionApi from '@/api/modules/build-report/reportPermission'
+import { useGenAiBuildReportStore } from '@/store/modules/gen-ai'
+import type {
+  GenAiAdjustInstanceContent,
+  GenAiAdjustInstanceData,
+  GenAiAdjustInstanceFileItem,
+  GenAiAdjustInstanceSection,
+  GenAiGetSectionListParams,
+  GenAiReportSectionItem,
+  GenAiSectionLatestStatus,
+  GenAiSectionVersionItem,
+} from '@/types/gen-ai/build-report/reportEditor'
+import {
+  DOCX_HEADER_CLASSIFICATION,
+  exportMarkdownToDocxWord,
+} from '../../components/AIExport'
+import { Sort } from '@element-plus/icons-vue'
+import type { SelectInstance } from 'element-plus'
+import {
+  ElButton,
+  ElCheckbox,
+  ElCheckboxGroup,
+  ElDialog,
+  ElIcon,
+  ElInput,
+  ElMessage,
+  ElMessageBox,
+  ElOption,
+  ElRadio,
+  ElRadioGroup,
+  ElScrollbar,
+  ElSelect,
+  ElTable,
+  ElTableColumn,
+} from 'element-plus'
+import Sortable from 'sortablejs'
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import {
+  ReportChapterTiptapEditor,
+  PromptField as ReportTemplatePromptField,
+  ReportTypewriterDocEditor,
+} from '../../common'
+import { isGenAiResponseOk } from '../../common/utils/api-res-status'
+import {
+  buildApplyTemplateDetailFromReport,
+  findFinalizedReportById,
+  getApplyTemplateDisplayChapters,
+  getApplyTemplateLanguageDisplay,
+  getReportLanguageLabel,
+  loadCoherenceCheckSession,
+  openReportCoherenceCheckResult,
+  stripChapterNumberPrefix,
+  translateChapterLabel,
+  translateChapterTitles,
+  type ApplyTemplateDetail,
+  type ApplyTemplateProcessAction,
+} from '../report-domain'
+import {
+  CHAPTER_DRAFT_HISTORY_TITLE,
+  createDefaultPromptChapterForm,
+  registerChapterHistoryReloader,
+  useReportWorkflow,
+  type PromptChapterForm,
+  type ReportHistoryItem,
+} from '../useReportWorkflow'
+
+const genAiBuildReportStore = useGenAiBuildReportStore()
+const route = useRoute()
+
+function resolveInstanceId() {
+  return String(genAiBuildReportStore.instanceId ?? '').trim()
+}
+
+const CHAPTER_PANEL_MAX_ROWS = 14
+const CHAPTER_PANEL_ROW_HEIGHT = 40
+const CHAPTER_TITLE_MAX = 100
+const CHAPTER_DESC_MAX = 1000
+const CHAPTER_PROMPT_MAX = 1300
+const AI_PROMPT_TITLE_MAX = 100
+const AI_PROMPT_DESC_MAX = 1000
+
+type AiPromptDialogMode = 'input' | 'preview'
+
+const aiPromptDialogVisible = ref(false)
+const aiPromptDialogMode = ref<AiPromptDialogMode>('input')
+const aiPromptGeneratedText = ref('')
+const aiPromptGenerating = ref(false)
+const aiPromptForm = reactive({
+  title: '',
+  description: '',
+})
+
+const aiPromptDialogTitle = computed(() =>
+  aiPromptDialogMode.value === 'input' ? '智能化生成 Prompt' : '智能化生成 Prompt 預覽'
+)
+
+function resetAiPromptDialogForm(initialTitle = '', initialDescription = '') {
+  aiPromptForm.title = initialTitle.trim()
+  aiPromptForm.description = initialDescription.trim()
+  aiPromptGeneratedText.value = ''
+  aiPromptDialogMode.value = 'input'
+}
+
+function openAiPromptDialog() {
+  requestOpenAiPromptDialog('add-chapter')
+}
+
+function closeAiPromptDialog() {
+  aiPromptDialogVisible.value = false
+}
+
+function handleAiPromptDialogClosed() {
+  aiPromptGenerating.value = false
+  resetAiPromptDialogForm()
+}
+
+const {
+  draft,
+  selectedTemplate,
+  generatedChapterBodies,
+  patchGeneratedChapterBody,
+  generatedChapterTitles,
+  sourceFiles,
+  uiShowFinalizeToolbar,
+  uiShowChapterEditToolbar,
+  uiShowSettingsDoc,
+  chapterEditMode,
+  historyPreviewDirty,
+  historyPreviewRecordId,
+  historyPreviewApplyToken,
+  historyPreviewChapterBodies,
+  resetHistoryPreviewState,
+  resetWorkspaceHistoryOnEnter,
+  chapterHistoryItems,
+  chapterHistoryOpen,
+  chapterHistoryPreviewBody,
+  chapterHistoryApplyToken,
+  activeChapterHistoryKey,
+  enterChapterEditMode,
+  commitChapterEdit,
+  exitChapterEditMode,
+  isChapterEditDirty,
+  promptChapterForm,
+  saveDraftToSession,
+  aiPromptDialogRequestToken,
+  aiPromptDialogSource,
+  requestOpenAiPromptDialog,
+  settingsChapterPresets,
+  settingsSelectedChapters,
+  settingsChapterOrder,
+  settingsChapterVersions,
+  settingsTypewriterReplayKey,
+  settingsTypewriterReplayToken,
+  setSettingsTypingChapterKey,
+  setSettingsTypewriterPrinting,
+  chapterTypewriterActive,
+  chapterContentAwaitingFirstChunk,
+  stopChapterContentTypewriter,
+  requestSettingsTypewriterReplay,
+  reportGenerateStreamText,
+  reportGenerateStreamActive,
+  reportGenerateStreamEnded,
+  clearReportGenerateStream,
+  ensureSettingsChapterLayout,
+  applyAdjustInstanceSections,
+  applyAdjustInstanceFiles,
+  clearAdjustInstanceBindings,
+  adjustInstanceContents,
+  setAdjustInstanceContents,
+  setExistsInstanceVersionNo,
+  coherenceResultReady,
+  setCoherenceCheckResultReady,
+  markAdjustInstanceSettingSynced,
+  beginSuppressAdjustInstanceSettingWatch,
+  endSuppressAdjustInstanceSettingWatch,
+  existsInstanceVersionNo,
+  resolveChapterChartAuditEventId,
+  upsertChapterChartStreamRefsFromSources,
+} = useReportWorkflow()
+
+/** 先渲染工具列，再掛載 TipTap，避免進頁中欄空白 */
+const editorContentReady = ref(false)
+
+const router = useRouter()
+
+/** 接口章節下拉（getSectionList）；有數據時優先驅動下拉，覆蓋 mock/模板 */
+const genAiSectionItems = ref<GenAiReportSectionItem[]>([])
+const chapterTitles = ref<string[]>([])
+const activeChapterIndex = ref(0)
+/** 進頁拉列表時抑制 watch(activeChapterIndex) 重複打版本接口 */
+let suppressSectionVersionReload = false
+
+watch(aiPromptDialogRequestToken, (token) => {
+  if (!token) return
+  if (aiPromptDialogSource.value === 'prompt-panel') {
+    const section = genAiSectionItems.value[activeChapterIndex.value]
+    resetAiPromptDialogForm(
+      section?.sectionName ||
+        stripChapterNumberPrefix(chapterTitles.value[activeChapterIndex.value] || ''),
+      section?.sectionDesc || ''
+    )
+  } else {
+    resetAiPromptDialogForm(newChapterForm.title, newChapterForm.description)
+  }
+  aiPromptDialogVisible.value = true
+})
+
+async function generateAiPrompt() {
+  const title = aiPromptForm.title.trim()
+  const description = aiPromptForm.description.trim()
+
+  if (!title) {
+    ElMessage.warning('請輸入章節標題')
+    return
+  }
+  if (!description) {
+    ElMessage.warning('請輸入章節描述')
+    return
+  }
+
+  aiPromptGenerating.value = true
+  const res: any = await genAiReportEditorApi
+    .adjustGenAiInstance({
+      instanceId: resolveInstanceId(),
+      promptType: 'AI_PROMPT',
+      sectionTitle: title,
+      sectionDesc: description,
+    })
+    .catch((err) => {
+      console.error('接口异常', err)
+      return null
+    })
+  aiPromptGenerating.value = false
+
+  try {
+    if (!isGenAiResponseOk(res)) {
+      ElMessage.warning(res?.message || '接口异常')
+      return
+    }
+    const text = pickAdjustInstanceText(res?.data)
+    if (!text) {
+      ElMessage.warning('接口异常')
+      return
+    }
+    aiPromptGeneratedText.value = text
+    aiPromptDialogMode.value = 'preview'
+  } catch (err) {
+    console.error('接口异常', err)
+    ElMessage.warning('接口异常')
+  }
+}
+
+function confirmAiPrompt() {
+  if (aiPromptDialogSource.value === 'prompt-panel') {
+    promptChapterForm.prompt = aiPromptGeneratedText.value
+  } else {
+    newChapterForm.prompt = aiPromptGeneratedText.value
+  }
+  closeAiPromptDialog()
+}
+
+const SECTION_STATUS_LABEL: Record<GenAiSectionLatestStatus, string> = {
+  PENDING: '未生成',
+  EDITING: '編輯中',
+  CREATED: '已生成',
+}
+
+function formatGenAiSectionTitle(item: GenAiReportSectionItem) {
+  // 圖中展示：「1. 摘要與本年總結」= orderSeq + sectionName
+  return `${item.orderSeq}. ${item.sectionName}`
+}
+
+function applyGenAiSectionList(list: GenAiReportSectionItem[]) {
+  const sorted = [...list].sort((a, b) => a.orderSeq - b.orderSeq)
+  genAiSectionItems.value = sorted
+  // 以接口為準完整覆蓋下拉標題
+  chapterTitles.value = sorted.map(formatGenAiSectionTitle)
+  activeChapterIndex.value = 0
+}
+
+/** 進頁 / 失敗：清空 mock 章節歷史與 Prompt，避免殘留覆蓋接口 */
+function clearChapterHistoryAndPromptForApi() {
+  genAiSectionVersionItems.value = []
+  chapterHistoryItems.value = []
+  activeChapterHistoryKey.value = ''
+  chapterHistoryOpen.value = false
+  Object.assign(promptChapterForm, createDefaultPromptChapterForm())
+  chapterHistoryPreviewBody.value = null
+  chapterHistoryApplyToken.value += 1
+}
+
+/**
+ * 進頁拉取章節下拉；成功則用接口數據替換 chapterTitles
+ * instanceId 取自 genAiBuildReportStore（當前頁正確來源）
+ * 無 instanceId / 接口失敗 / 空列表：界面置空，不阻斷主流程、不回落 mock
+ */
+async function loadGenAiSectionListOnEnter() {
+  const instanceId = String(genAiBuildReportStore.instanceId ?? '').trim()
+  if (!instanceId) {
+    console.warn('[report editor] 無 instanceId，章節下拉置空')
+    genAiSectionItems.value = []
+    chapterTitles.value = []
+    clearChapterHistoryAndPromptForApi()
+    return false
+  }
+  const result = await genAiSectionList({ instanceId })
+  if (!result.ok) {
+    console.warn('[report editor] getSectionList 失敗，章節下拉置空')
+    genAiSectionItems.value = []
+    chapterTitles.value = []
+    clearChapterHistoryAndPromptForApi()
+    return false
+  }
+  if (!result.sectionList.length) {
+    genAiSectionItems.value = []
+    chapterTitles.value = []
+    clearChapterHistoryAndPromptForApi()
+    return true
+  }
+  applyGenAiSectionList(result.sectionList)
+  suppressSectionVersionReload = true
+  try {
+    await loadGenAiSectionVersionListForActiveChapter()
+  } finally {
+    suppressSectionVersionReload = false
+  }
+  return true
+}
+
+onMounted(() => {
+  registerChapterHistoryReloader(() => loadGenAiSectionVersionListForActiveChapter())
+
+  // 每次進入：清預覽態，再清空 mock，隨後以接口完整覆蓋
+  resetWorkspaceHistoryOnEnter()
+  activeChapterIndex.value = 0
+  void init()
+
+  void (async () => {
+    if (isReportSettingsMode.value) {
+      syncLocalizedChapterTitles()
+      // 報告頁：AdjustInstance 由 watch(isReportSettingsMode) 觸發
+      return
+    }
+    clearChapterHistoryAndPromptForApi()
+    chapterTitles.value = []
+    genAiSectionItems.value = []
+    await loadGenAiSectionListOnEnter()
+  })()
+
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      editorContentReady.value = true
+    })
+  })
+})
+
+const isReportSettingsMode = computed(() => uiShowSettingsDoc.value)
+
+const isViewingReportHistory = computed(
+  () => !!historyPreviewRecordId.value && !historyPreviewDirty.value
+)
+
+function normalizeChapterMatchTitle(value: string) {
+  return stripChapterNumberPrefix(String(value || ''))
+    .replace(/\s+/g, '')
+    .toLowerCase()
+}
+
+/** 多候選中優先取有正文的 instanceContent，避免空殼占位擋住真實數據 */
+function pickAdjustInstanceContent(
+  candidates: Array<{ sectionTitle: string; sectionContent: string } | undefined>
+) {
+  const list = candidates.filter(
+    (item): item is { sectionTitle: string; sectionContent: string } => !!item
+  )
+  if (!list.length) return undefined
+  return list.find((item) => String(item.sectionContent || '').trim()) ?? list[0]
+}
+
+const SETTINGS_UNAVAILABLE_LABELS = new Set(['附件與數'])
+
+/** 設置模式：僅 AdjustInstance / AdjustInstanceSetting 正文；無接口則空 */
+const settingsPreviewChapters = computed(() => {
+  const ordered = settingsChapterOrder.value
+    .map((key) => settingsChapterPresets.value.find((preset) => preset.key === key))
+    .filter((preset): preset is { key: string; label: string } => !!preset)
+
+  const visible = ordered.filter(
+    (preset) =>
+      !!settingsSelectedChapters.value[preset.key] && !SETTINGS_UNAVAILABLE_LABELS.has(preset.label)
+  )
+
+  return visible.map((preset, visibleIndex) => {
+    const label = translateChapterLabel(preset.label, draft.language, 'zh-Hant')
+    const contents = adjustInstanceContents.value
+    const presetsLen = settingsChapterPresets.value.length
+    const sourceIndex = Number(preset.key.replace(/^chapter-/, ''))
+    const apiDefaultOrder = settingsChapterPresets.value.map((item) => item.key)
+    const orderIsApiDefault =
+      settingsChapterOrder.value.length === apiDefaultOrder.length &&
+      settingsChapterOrder.value.every((key, i) => key === apiDefaultOrder[i])
+
+    // 1) byTitle：標題對齊（首選）
+    // 2) byOrder：僅當 contents 與可見列表等長，且為「僅勾選 subset」或「已拖拽重排後的全量列表序」
+    //    —— AdjustInstanceSetting 常按 versionIdList / 拖拽序回寫，此時 visibleIndex 才安全
+    // 3) byKey：僅全量平行 + 順序仍是 chapter-0..n（首包 AdjustInstance）→ chapter-N → contents[N]
+    //    —— 禁止在拖拽後對「按列表序回寫的全量 contents」用 byKey（會搶在 byOrder 前錯配）
+    const want = normalizeChapterMatchTitle(preset.label)
+    const byTitle = contents.find(
+      (item) => normalizeChapterMatchTitle(item.sectionTitle || '') === want
+    )
+    const byOrder =
+      contents.length === visible.length &&
+      (contents.length < presetsLen || !orderIsApiDefault)
+        ? contents[visibleIndex]
+        : undefined
+    const byKey =
+      contents.length === presetsLen &&
+      orderIsApiDefault &&
+      Number.isFinite(sourceIndex)
+        ? contents[sourceIndex]
+        : undefined
+    const content = pickAdjustInstanceContent([byTitle, byOrder, byKey])
+
+    return {
+      key: preset.key,
+      displayTitle: stripChapterNumberPrefix(content?.sectionTitle?.trim() || label),
+      // 原文交給 editor 做 Markdown + HTML 解析，此處不剝標籤
+      intro: content ? String(content.sectionContent || '') : '',
+    }
+  })
+})
+
+/** 供獨立打字機組件：僅傳章節內容，不耦合打字/滾動狀態 */
+const settingsTypewriterChapters = computed(() =>
+  settingsPreviewChapters.value.map((chapter, index) => {
+    const bareTitle = stripChapterNumberPrefix(String(chapter.displayTitle || ''))
+    // 接口 sectionContent 常以 **標題** / <strong>標題</strong> / ## 標題 開頭，
+    // 與下方 buildPlainContentHtml 注入的 <h2>N. 標題</h2> 重複 → 剝掉這一行
+    let intro = String(chapter.intro || '')
+    const lead = intro.match(
+      /^\s*(?:<p[^>]*>\s*)?(?:#{1,6}\s+([^\n<#]+)|(?:\*\*|__|<strong[^>]*>)\s*([\s\S]*?)\s*(?:\*\*|__|<\/strong>))\s*(?:<\/p>)?\s*(?:\n+|$)/i
+    )
+    const leadTitle = (lead?.[1] || lead?.[2] || '').trim()
+    if (
+      lead &&
+      leadTitle &&
+      normalizeChapterMatchTitle(leadTitle) === normalizeChapterMatchTitle(bareTitle)
+    ) {
+      intro = intro.slice(lead[0].length)
+    }
+    return {
+      key: chapter.key,
+      title: `${index + 1}. ${bareTitle}`,
+      intro,
+    }
+  })
+)
+
+const settingsStreamChapters = computed(() => [
+  {
+    key: 'report-generate-stream',
+    title: draft.reportName?.trim() || '報告',
+    intro: reportGenerateStreamText.value,
+  },
+])
+
+const settingsDocChapters = computed(() =>
+  reportGenerateStreamActive.value ? settingsStreamChapters.value : settingsTypewriterChapters.value
+)
+
+watch(
+  isReportSettingsMode,
+  (enabled) => {
+    if (!enabled) {
+      setSettingsTypingChapterKey(null)
+      setSettingsTypewriterPrinting(false)
+      clearAdjustInstanceBindings()
+      clearReportGenerateStream()
+      return
+    }
+    stopChapterContentTypewriter()
+    // 章節 / 正文 / 資訊源由 AdjustInstance 回寫；不預填模板 mock
+    // 從 session / existsInstanceVersionNo 恢復：顯示「查看結果 / 導出 Word」
+    const session = loadCoherenceCheckSession()
+    if (String(session?.beenFinalizedFlag ?? '').toUpperCase() === 'Y') {
+      setCoherenceCheckResultReady(true, session?.coherenceCheckContentText ?? '')
+    } else if (String(existsInstanceVersionNo.value ?? '').trim()) {
+      setCoherenceCheckResultReady(true, '')
+    }
+  },
+  { immediate: true }
+)
+
+const showFinalizeToolbar = computed(() => uiShowFinalizeToolbar.value)
+const showChapterEditToolbar = computed(() => uiShowChapterEditToolbar.value)
+/** existsInstanceVersionNo 有值，或 CoherenceCheck 返回 Y → 顯示結果 / 導出 Word */
+const showCoherenceResultActions = computed(
+  () => coherenceResultReady.value || !!String(existsInstanceVersionNo.value ?? '').trim()
+)
+
+const settingsHistoryPreviewChapterIndex = ref(0)
+
+const emit = defineEmits<{
+  'back-to-chapter-edit': []
+  'generate-report': []
+}>()
+
+const applyTemplateDialogVisible = ref(false)
+const applyTemplateDetail = ref<ApplyTemplateDetail | null>(null)
+const applyTemplateTitle = ref('')
+const applyTemplateDescription = ref('')
+const applyTemplateAction = ref<'' | ApplyTemplateProcessAction>('')
+const applyTemplateOpinion = ref('')
+
+const applyTemplateLanguageDisplay = computed(() =>
+  applyTemplateDetail.value
+    ? getApplyTemplateLanguageDisplay(applyTemplateDetail.value.language)
+    : ''
+)
+const applyTemplateDisplayChapters = computed(() =>
+  getApplyTemplateDisplayChapters(applyTemplateDetail.value)
+)
+
+function mapReportLanguageToTemplateLanguage(language: string) {
+  if (language === 'en') return 'en'
+  return 'zh'
+}
+
+function resetApplyTemplateForm() {
+  applyTemplateTitle.value = applyTemplateDetail.value?.title ?? ''
+  applyTemplateDescription.value = applyTemplateDetail.value?.description ?? ''
+  applyTemplateAction.value = ''
+  applyTemplateOpinion.value = ''
+}
+
+function buildApplyTemplateDetail() {
+  const previewRecord = historyPreviewRecordId.value
+    ? findFinalizedReportById(historyPreviewRecordId.value)
+    : null
+
+  const sourceReport =
+    previewRecord?.displayTitle ?? `${draft.reportName || '未命名報告'} ${draft.year}`.trim()
+
+  const chapterSource = chapterTitles.value.length
+    ? chapterTitles.value
+    : (selectedTemplate.value?.chapters ?? [])
+
+  return buildApplyTemplateDetailFromReport({
+    sourceReport,
+    language: mapReportLanguageToTemplateLanguage(draft.language),
+    title: draft.reportName?.trim() || '',
+    description: '',
+    chapterTitles: chapterSource,
+    chapterPrompt: promptChapterForm.prompt,
+    // 審批明細以接口為準；無數據則空表，不填本地假操作人
+    approvalRecords: [],
+  })
+}
+
+// report editor api
+/**
+ * 查詢章節下拉列表
+ * 調試：data[] 含 instanceId/sectionId/orderSeq/sectionName/sectionDesc/latestStatus
+ * latestStatus：PENDING 未生成 / EDITING 編輯中 / CREATED 已生成
+ */
+const genAiSectionList = async (params: GenAiGetSectionListParams) => {
+  const res: any = await genAiReportEditorApi
+    .fetchGenAiSectionList({
+      instanceId: params.instanceId,
+    })
+    .catch((err) => {
+      console.error('接口异常', err)
+      return null
+    })
+
+  try {
+    if (!isGenAiResponseOk(res)) {
+      console.warn('[report editor] getSectionList', res?.message || '接口异常')
+      return {
+        ok: false as const,
+        sectionList: [] as GenAiReportSectionItem[],
+      }
+    }
+
+    const sectionList = (Array.isArray(res.data) ? res.data : []) as GenAiReportSectionItem[]
+    console.log('章节下拉列表', sectionList)
+    return { ok: true as const, sectionList }
+  } catch (err) {
+    console.error('接口异常', err)
+    return {
+      ok: false as const,
+      sectionList: [] as GenAiReportSectionItem[],
+    }
+  }
+}
+
+/**
+ * 更新章節順序
+ * 調試：傳 sections[{ instanceId, sectionId, orderSeq }]，orderSeq 為調整後新順序
+ */
+const updateGenAiSectionOrder = async () => {
+  const sections = genAiSectionItems.value.map((item) => ({
+    instanceId: item.instanceId,
+    sectionId: item.sectionId,
+    orderSeq: item.orderSeq,
+  }))
+  if (!sections.length) {
+    return { ok: false as const }
+  }
+
+  const res: any = await genAiReportEditorApi.updateGenAiSectionOrder({ sections }).catch((err) => {
+    console.error('接口异常', err)
+    return null
+  })
+
+  try {
+    if (!isGenAiResponseOk(res)) {
+      ElMessage.warning(res?.message || '接口异常')
+      return { ok: false as const }
+    }
+    console.log('章节顺序已更新', sections)
+    return { ok: true as const }
+  } catch (err) {
+    console.error('接口异常', err)
+    ElMessage.warning('接口异常')
+    return { ok: false as const }
+  }
+}
+
+/** 寫死調試參數（與接口文檔一致；後續換登錄用戶 / 當前章節） */
+const GEN_AI_HARDCODE_SECTION = {
+  categoryId: 1,
+  sectionId: '87E7D6DD-B6E2-4E37-9D38-DC816BD37809',
+  userId: '8740004',
+  userName: 'LOCAL ADMIN',
+  userUnitSeq: '1',
+} as const
+
+/**
+ * 更新章節狀態（點「編輯/儲存」進入編輯時）
+ * 調試：action "EDIT" → 後臺狀態改為 EDITING；參數暫用接口文檔寫死數據
+ */
+const changeGenAiSectionStatus = async () => {
+  const data = {
+    categoryId: GEN_AI_HARDCODE_SECTION.categoryId,
+    sectionId: GEN_AI_HARDCODE_SECTION.sectionId,
+    action: 'EDIT' as const,
+    updateUserId: GEN_AI_HARDCODE_SECTION.userId,
+    updateUserName: GEN_AI_HARDCODE_SECTION.userName,
+    updateUserUnitSeq: GEN_AI_HARDCODE_SECTION.userUnitSeq,
+  }
+
+  const res: any = await genAiReportEditorApi.changeGenAiSectionStatus(data).catch((err) => {
+    console.error('接口异常', err)
+    return null
+  })
+
+  try {
+    if (!isGenAiResponseOk(res)) {
+      ElMessage.warning(res?.message || '接口异常')
+      return { ok: false as const }
+    }
+    console.log('章节状态已更新为 EDITING', data)
+    return { ok: true as const }
+  } catch (err) {
+    console.error('接口异常', err)
+    ElMessage.warning('接口异常')
+    return { ok: false as const }
+  }
+}
+
+/**
+ * 版本[保存]/[存為草稿] saveSectionVersion
+ * draftFlag "N"=保存 / "Y"=存為草稿
+ * instanceId/versionId/versionNo/hasOldAiContent：優先取當前選中版本原值
+ */
+const saveGenAiSectionVersion = async (draftFlag: 'Y' | 'N') => {
+  const versionId = activeChapterHistoryKey.value
+  const version =
+    genAiSectionVersionItems.value.find((item) => item.versionId === versionId) ??
+    genAiSectionVersionItems.value[0]
+
+  const data = {
+    categoryId: GEN_AI_HARDCODE_SECTION.categoryId,
+    instanceId:
+      version?.instanceId ||
+      String(genAiBuildReportStore.instanceId ?? '') ||
+      '62D6B74B-13C8-4113-9F97-54117FEBA9A6',
+    sectionId: GEN_AI_HARDCODE_SECTION.sectionId,
+    versionId: version?.versionId || versionId || '2DE1F24F-61A2-4539-BA66-CC5B75C79CC5',
+    versionNo: version?.versionNo ?? 1,
+    draftFlag,
+    promptDetail: promptChapterForm.prompt,
+    promptByGen: (version?.promptByGen ?? 'N') as 'Y' | 'N',
+    contentLengthLimit: promptChapterForm.enableBodyContent
+      ? promptChapterForm.bodyWordLimit || 500
+      : (null as unknown as number),
+    // 存草稿時正文可空；後臺不存該字段
+    contentText: draftFlag === 'Y' ? '' : chapterHistoryPreviewBody.value || '',
+    fileIndexIdList: version?.fileIndexIdList?.length
+      ? [...version.fileIndexIdList]
+      : sourceFiles.value.filter((f) => f.selected).map((f) => f.id),
+    createdUserId: GEN_AI_HARDCODE_SECTION.userId,
+    createdUserName: GEN_AI_HARDCODE_SECTION.userName,
+    createdUserUnitSeq: GEN_AI_HARDCODE_SECTION.userUnitSeq,
+    tableInfo: promptChapterForm.enableTable
+      ? {
+          tableTitle: promptChapterForm.tableTitle,
+          columnLabel: promptChapterForm.tableRowLabels,
+          barLabel: promptChapterForm.tableColumnLabels,
+          content: promptChapterForm.tableContent,
+        }
+      : null,
+    chartInfo: promptChapterForm.enableSourceChart
+      ? { chartDesc: promptChapterForm.chartDescription }
+      : null,
+    // 須原值回傳
+    hasOldAiContent: (version?.hasOldAiContent ?? 'N') as 'Y' | 'N',
+    auditEventId: resolveChapterChartAuditEventId(),
+  }
+
+  const res: any = await genAiReportEditorApi.saveGenAiSectionVersion(data).catch((err) => {
+    console.error('接口异常', err)
+    return null
+  })
+
+  try {
+    if (!isGenAiResponseOk(res)) {
+      ElMessage.warning(res?.message || '接口异常')
+      return { ok: false as const }
+    }
+    console.log(draftFlag === 'Y' ? '已存为草稿' : '已保存版本', data)
+    return { ok: true as const }
+  } catch (err) {
+    console.error('接口异常', err)
+    ElMessage.warning('接口异常')
+    return { ok: false as const }
+  }
+}
+
+/**
+ * —— 章節歷史 / Prompt：接口 GenAiSectionVersionItem ↔ 組件字段一一對應 ——
+ *
+ * 【章節歷史 card】
+ * key / recordId          ← versionId（點選後按 versionId 回填 Prompt）
+ * kind                    ← draftFlag==="Y" → 'draft'（走草稿 card UI：繼續編輯/刪除）
+ *                         ← 否則 'history'（普通版本 card）
+ * title                   ← draftFlag==="Y" → CHAPTER_DRAFT_HISTORY_TITLE
+ *                           「您有未生成章節內容的草稿...」
+ *                         ← finalizedFlag==="Y" → objectName ||「定稿版本」
+ *                         ← 否則 objectName || `V${versionNo}`
+ * author                  ← updateUserName || createdUserName
+ * finalizedAt             ← updateDatetime || createdDatetime
+ * 列表順序                ← 草稿(draftFlag=Y)置頂，其餘按 versionNo 降序
+ *
+ * 【Prompt / 正文】
+ * prompt                  ← promptDetail
+ * enableBodyContent       ← hasOldAiContent==="Y"（後臺標識，保存時須原值回傳，見 version 緩存）
+ * bodyWordLimit           ← contentLengthLimit
+ * enableTable + table*    ← tableInfo（null 關閉；columnLabel→列，barLabel→欄/行）
+ * enableSourceChart+desc  ← chartInfo（null 關閉；chartDesc）
+ * 中欄正文                ← contentText
+ *
+ * 【資訊源反顯】僅用戶點選章節歷史 / 繼續編輯時
+ * fileIndexIdList → sourceFiles.selected；正文靜態反顯（不啟動打字機）
+ *
+ * 【僅緩存在 genAiSectionVersionItems，UI 暫不單獨展示】
+ * backupFlag / promptByGen / promptDetailExt(忽略) / fileIndexIdList /
+ * created* / update* / versionNo（保存須原值回傳）
+ */
+const genAiSectionVersionItems = ref<GenAiSectionVersionItem[]>([])
+
+function mapVersionToHistoryItem(version: GenAiSectionVersionItem): ReportHistoryItem {
+  const isDraft = version.draftFlag === 'Y'
+  const isFinalized = version.finalizedFlag === 'Y'
+  return {
+    key: version.versionId,
+    // draftFlag=Y：必須用組件約定的草稿文案，觸發 ReportHistoryList 草稿 card
+    title: isDraft
+      ? CHAPTER_DRAFT_HISTORY_TITLE
+      : isFinalized
+        ? version.objectName?.trim() || '定稿版本'
+        : version.objectName?.trim() || `V${version.versionNo}`,
+    author: version.updateUserName || version.createdUserName || '',
+    finalizedAt: version.updateDatetime || version.createdDatetime || '',
+    kind: isDraft ? 'draft' : 'history',
+    recordId: version.versionId,
+  }
+}
+
+function mapVersionToPromptForm(version: GenAiSectionVersionItem): PromptChapterForm {
+  const table = version.tableInfo
+  const chart = version.chartInfo
+  // Prompt 全量反顯：checkbox / input / textarea 與接口字段一一對齊
+  const limitRaw = version.contentLengthLimit
+  const hasBodyLimit = limitRaw != null && Number(limitRaw) > 0
+  const tableEnabled =
+    table != null && String((table as { enableTable?: string }).enableTable ?? 'Y') !== 'N'
+  const chartEnabled =
+    chart != null && String((chart as { enableChart?: string }).enableChart ?? 'Y') !== 'N'
+  return {
+    ...createDefaultPromptChapterForm(),
+    prompt: String(version.promptDetail ?? ''),
+    // 正文內容：有有效字數限制則勾選（與 chartAsStream contentLengthLimit null=關 對齊）
+    enableBodyContent: hasBodyLimit,
+    bodyWordLimit: hasBodyLimit ? Number(limitRaw) : 500,
+    enableTable: tableEnabled,
+    tableTitle: String(table?.tableTitle ?? ''),
+    // 列標籤 ← columnLabel；欄標籤 ← barLabel（與類型註釋 / UI 文案一致）
+    tableRowLabels: String(table?.columnLabel ?? ''),
+    tableColumnLabels: String(table?.barLabel ?? ''),
+    tableContent: String(table?.content ?? ''),
+    enableSourceChart: chartEnabled,
+    chartDescription: String(chart?.chartDesc ?? ''),
+  }
+}
+
+/** 程式內更新 activeChapterHistoryKey（切章拉列表等）時跳過 watch，避免誤觸 reverseUi */
+let suppressChapterHistoryKeyWatch = false
+
+/** 將當前選中版本寫入 Prompt 表單 + 中欄正文預覽（覆蓋組件內 mock / session） */
+function applyGenAiVersionToPromptAndBody(versionId: string, reverseUi = false) {
+  const version = genAiSectionVersionItems.value.find((item) => item.versionId === versionId)
+  if (!version) return false
+  // 靜態預覽也要先備 refList，才能把 contentText 裡 [ref:uuid] 解析成 tip
+  upsertChapterChartStreamRefsFromSources(version)
+  // reverseUi=true：用戶點選歷史 / 繼續編輯 → 停流、反顯資訊源、正文靜態展示（不啟動打字機）
+  // reverseUi=false：切章 / 刷新列表 → 保持原行為，不改資訊源、不額外停流
+  if (reverseUi) {
+    stopChapterContentTypewriter({ cancelStream: true })
+  }
+  const nextPrompt = mapVersionToPromptForm(version)
+  // Prompt 全量覆蓋寫入（checkbox / input / textarea），保證歷史切換時 UI 立即反顯
+  Object.assign(promptChapterForm, nextPrompt)
+  if (reverseUi) {
+    const selectedSet = new Set(
+      (Array.isArray(version.fileIndexIdList) ? version.fileIndexIdList : []).map((id) =>
+        String(id)
+      )
+    )
+    for (const file of sourceFiles.value) {
+      file.selected = selectedSet.has(String(file.id))
+    }
+    // 按接口原文靜態反顯；空正文也寫入，避免回落到舊 generated 緩存導致數據不准
+    const exactBody = String(version.contentText ?? '')
+    chapterHistoryPreviewBody.value = exactBody
+    chapterHistoryApplyToken.value += 1
+    patchGeneratedChapterBody(activeChapterIndex.value, exactBody)
+    return true
+  }
+  chapterHistoryPreviewBody.value = version.contentText || null
+  chapterHistoryApplyToken.value += 1
+  // 寫入本地緩存，切章時可先清空再秒開，無需乾等版本接口
+  const body = String(version.contentText || '')
+  if (body.trim()) {
+    patchGeneratedChapterBody(activeChapterIndex.value, body)
+  }
+  return true
+}
+
+function applyGenAiSectionVersionList(list: GenAiSectionVersionItem[]) {
+  // 列表內各版本 refList 先備齊，切歷史 / 靜態預覽即可匹配 tip
+  upsertChapterChartStreamRefsFromSources(list)
+  // 草稿置頂，其餘 versionNo 降序
+  const sorted = [...list].sort((a, b) => {
+    const aDraft = a.draftFlag === 'Y' ? 1 : 0
+    const bDraft = b.draftFlag === 'Y' ? 1 : 0
+    if (aDraft !== bDraft) return bDraft - aDraft
+    return b.versionNo - a.versionNo
+  })
+  genAiSectionVersionItems.value = sorted
+  chapterHistoryItems.value = sorted.map(mapVersionToHistoryItem)
+  // 有內容才展開；空列表保持收起
+  chapterHistoryOpen.value = chapterHistoryItems.value.length > 0
+  const firstKey = chapterHistoryItems.value[0]?.key ?? ''
+  // 程式刷新列表時抑制 watch，避免誤走 reverseUi（改資訊源 / 停流）
+  suppressChapterHistoryKeyWatch = true
+  activeChapterHistoryKey.value = firstKey
+  suppressChapterHistoryKeyWatch = false
+  if (firstKey) {
+    applyGenAiVersionToPromptAndBody(firstKey)
+  } else {
+    Object.assign(promptChapterForm, createDefaultPromptChapterForm())
+    chapterHistoryPreviewBody.value = null
+    chapterHistoryApplyToken.value += 1
+  }
+}
+
+/**
+ * 查詢版本列表 getSectionVersionList
+ * 調試：保存/存草稿須原值回傳 versionNo、hasOldAiContent；draftFlag 等為 Y/N
+ */
+const genAiSectionVersionList = async (params: { instanceId: string; sectionId: string }) => {
+  const res: any = await genAiReportEditorApi
+    .fetchGenAiSectionVersionList({
+      instanceId: params.instanceId,
+      sectionId: params.sectionId,
+    })
+    .catch((err) => {
+      console.error('接口异常', err)
+      return null
+    })
+
+  try {
+    if (!isGenAiResponseOk(res)) {
+      console.warn('[report editor] getSectionVersionList', res?.message || '接口异常')
+      return {
+        ok: false as const,
+        versionList: [] as GenAiSectionVersionItem[],
+      }
+    }
+    const versionList = (Array.isArray(res.data) ? res.data : []) as GenAiSectionVersionItem[]
+    console.log('章节版本列表', versionList)
+    return { ok: true as const, versionList }
+  } catch (err) {
+    console.error('接口异常', err)
+    return {
+      ok: false as const,
+      versionList: [] as GenAiSectionVersionItem[],
+    }
+  }
+}
+
+/** 按當前下拉選中章節拉取版本歷史 → 完整覆蓋章節歷史列表 + Prompt */
+async function loadGenAiSectionVersionListForActiveChapter() {
+  const instanceId = String(genAiBuildReportStore.instanceId ?? '').trim()
+  const section = genAiSectionItems.value[activeChapterIndex.value]
+  if (!instanceId || !section?.sectionId) {
+    console.warn('[report editor] 無 instanceId/sectionId，章節歷史置空')
+    clearChapterHistoryAndPromptForApi()
+    return false
+  }
+
+  const result = await genAiSectionVersionList({
+    instanceId,
+    sectionId: section.sectionId,
+  })
+  if (!result.ok) {
+    // 版本列表失敗不影響章節下拉；歷史 / Prompt / 正文置空
+    console.warn('[report editor] getSectionVersionList 失敗，章節歷史置空')
+    clearChapterHistoryAndPromptForApi()
+    return false
+  }
+
+  // 即使空列表也覆蓋（清空 mock）
+  applyGenAiSectionVersionList(result.versionList)
+  return true
+}
+
+/**
+ * 生成報告 AdjustInstance
+ * 點「生成報告」→ 先跳報告頁（settings）→ 綁定
+ * instanceContents / instanceSections / instanceFileList；
+ * existsInstanceVersionNo 有值 = 已通過連貫性檢查
+ */
+const adjustGenAiInstance = async (params: { instanceId: string }) => {
+  const res: any = await genAiReportEditorApi
+    .adjustGenAiInstance({
+      instanceId: params.instanceId,
+    })
+    .catch((err) => {
+      console.error('接口异常', err)
+      return null
+    })
+
+  try {
+    if (!isGenAiResponseOk(res)) {
+      console.warn('[report editor] AdjustInstance', res?.message || '接口异常')
+      return {
+        ok: false as const,
+        data: null as GenAiAdjustInstanceData | null,
+      }
+    }
+    const raw = (res?.data ?? {}) as Partial<GenAiAdjustInstanceData>
+    const data: GenAiAdjustInstanceData = {
+      instanceContents: (Array.isArray(raw.instanceContents)
+        ? raw.instanceContents
+        : []) as GenAiAdjustInstanceContent[],
+      instanceSections: (Array.isArray(raw.instanceSections)
+        ? raw.instanceSections
+        : []) as GenAiAdjustInstanceSection[],
+      instanceFileList: (Array.isArray(raw.instanceFileList)
+        ? raw.instanceFileList
+        : []) as GenAiAdjustInstanceFileItem[],
+      existsInstanceVersionNo: pickExistsInstanceVersionNo(raw),
+    }
+    console.log('生成报告 AdjustInstance', data)
+    return { ok: true as const, data }
+  } catch (err) {
+    console.error('接口异常', err)
+    return {
+      ok: false as const,
+      data: null as GenAiAdjustInstanceData | null,
+    }
+  }
+}
+
+/** 報告頁：調 AdjustInstance 並綁定中欄 / 右側章節 / 資訊源；無 instanceId / 失敗則清空綁定 */
+async function loadAdjustInstanceForReportPage() {
+  const instanceId = resolveInstanceId()
+  if (!instanceId) {
+    console.warn('[report editor] 無 instanceId，跳過 AdjustInstance 並清空綁定')
+    setAdjustInstanceContents([])
+    clearAdjustInstanceBindings()
+    return false
+  }
+
+  const result = await adjustGenAiInstance({ instanceId })
+  if (!result.ok || !result.data) {
+    setAdjustInstanceContents([])
+    clearAdjustInstanceBindings()
+    return false
+  }
+
+  const { instanceContents, instanceSections, instanceFileList, existsInstanceVersionNo } =
+    result.data
+
+  beginSuppressAdjustInstanceSettingWatch()
+  try {
+    // 中欄報告內容
+    setAdjustInstanceContents(instanceContents)
+    // 已存在報告版本號 → 報告歷史 card 選中對照
+    setExistsInstanceVersionNo(existsInstanceVersionNo)
+    // 右側「生成報告設置」章節列表 + 版本下拉（text 如 V3）
+    if (instanceSections.length) {
+      applyAdjustInstanceSections(instanceSections)
+    } else {
+      const titles = instanceContents
+        .map((item) => item.sectionTitle?.trim())
+        .filter((title): title is string => !!title)
+      if (titles.length) ensureSettingsChapterLayout(titles)
+      else clearAdjustInstanceBindings()
+    }
+    // 資訊源
+    applyAdjustInstanceFiles(instanceFileList)
+    // 標記當前版本組合已同步，避免 Settings watch 立刻再打 AdjustInstanceSetting 造成中欄閃爍
+    markAdjustInstanceSettingSynced(
+      settingsChapterOrder.value
+        .map((key) => String(settingsChapterVersions.value[key] ?? '').trim())
+        .filter(Boolean)
+    )
+    // existsInstanceVersionNo 有值 = 已通過連貫性檢查 → 顯示結果 / 導出 Word
+    if (String(existsInstanceVersionNo ?? '').trim()) {
+      setCoherenceCheckResultReady(true, '')
+    }
+
+    // 正文就緒後重播中欄打字機（避免空內容先 complete → 接口晚到只能靜態灌入）
+    const firstKey =
+      settingsChapterOrder.value.find((key) => settingsSelectedChapters.value[key]) ??
+      settingsChapterOrder.value[0]
+    if (firstKey && instanceContents.length) {
+      void nextTick(() => requestSettingsTypewriterReplay(firstKey))
+    }
+  } finally {
+    endSuppressAdjustInstanceSettingWatch()
+  }
+  return true
+}
+
+// —— report editor api end ——
+
+/** 進入報告頁（settings）後清空本地佈局再調 AdjustInstance */
+watch(
+  isReportSettingsMode,
+  (enabled) => {
+    if (!enabled) return
+    clearAdjustInstanceBindings()
+    void loadAdjustInstanceForReportPage()
+  },
+  { immediate: true }
+)
+
+/**
+ * 點選章節歷史 / 繼續編輯 → 反顯 Prompt + 正文 + 資訊源（靜態，不啟動打字機）
+ * 切章拉列表等程式寫 key 時由 suppressChapterHistoryKeyWatch 跳過
+ */
+watch(activeChapterHistoryKey, (key) => {
+  if (suppressChapterHistoryKeyWatch) return
+  if (!key || !genAiSectionVersionItems.value.length) return
+  applyGenAiVersionToPromptAndBody(key, true)
+})
+
+/** 重命名成功後 chapterHistoryItems.title 回寫 → 同步接口緩存 objectName */
+watch(
+  chapterHistoryItems,
+  (items) => {
+    for (const item of items) {
+      if (item.kind === 'draft') continue
+      const versionId = item.recordId || item.key
+      const version = genAiSectionVersionItems.value.find((entry) => entry.versionId === versionId)
+      if (version && item.title && version.objectName !== item.title) {
+        version.objectName = item.title
+      }
+    }
+  },
+  { deep: true }
+)
+
+/** 切章時先壓空正文，避免舊章在接口返回前殘留 ~1s */
+const chapterBodyCleared = ref(false)
+
+/** 切換章節下拉：先清空屏幕 → 再展示新章（緩存秒開 / 接口覆蓋） */
+watch(activeChapterIndex, async (index, prevIndex) => {
+  if (suppressSectionVersionReload) return
+  if (isReportSettingsMode.value) return
+
+  const isSwitch = prevIndex !== undefined && index !== prevIndex
+  if (isSwitch) {
+    stopChapterContentTypewriter({ cancelStream: true })
+    // 1) 立刻清空正文（標題隨 index 更新）
+    chapterHistoryPreviewBody.value = ''
+    chapterBodyCleared.value = true
+    await nextTick()
+    const wrap = document.querySelector(
+      '.report-edit-page__main--anchored .report-edit-page__col-scroll .el-scrollbar__wrap'
+    ) as HTMLElement | null
+    if (wrap) wrap.scrollTop = 0
+    // 2) 有本地緩存則秒開，減少等接口的空白
+    const cached = String(generatedChapterBodies.value[index] ?? '')
+    if (cached.trim()) {
+      chapterHistoryPreviewBody.value = cached
+    }
+    chapterBodyCleared.value = false
+  }
+
+  if (!genAiSectionItems.value.length) return
+  void loadGenAiSectionVersionListForActiveChapter()
+})
+
+function syncLocalizedChapterTitles() {
+  // 章節編輯：下拉僅由 getSectionList 驅動，不回落本地假標題
+  if (!isReportSettingsMode.value) {
+    if (genAiSectionItems.value.length) {
+      chapterTitles.value = genAiSectionItems.value.map(formatGenAiSectionTitle)
+    } else {
+      chapterTitles.value = []
+    }
+    return
+  }
+
+  // 優先：生成接口寫入的章節標題
+  if (generatedChapterTitles.value.length) {
+    chapterTitles.value = translateChapterTitles(
+      generatedChapterTitles.value,
+      draft.language,
+      isReportSettingsMode.value ? 'zh-Hant' : draft.chapterContentLanguage
+    )
+    return
+  }
+
+  if (historyPreviewRecordId.value && !historyPreviewDirty.value) {
+    syncHistoryPreviewChapterTitles()
+    return
+  }
+
+  // 僅用已選模板章節（接口/選模結果）；無則空
+  const sourceChapters = selectedTemplate.value?.chapters?.length
+    ? selectedTemplate.value.chapters
+    : []
+  chapterTitles.value = sourceChapters.length
+    ? translateChapterTitles(
+        sourceChapters,
+        draft.language,
+        isReportSettingsMode.value ? 'zh-Hant' : draft.chapterContentLanguage
+      )
+    : []
+}
+
+watch(
+  () =>
+    [
+      selectedTemplate.value?.chapters,
+      draft.language,
+      draft.chapterContentLanguage,
+      generatedChapterTitles.value,
+    ] as const,
+  () => {
+    syncLocalizedChapterTitles()
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  () => historyPreviewApplyToken.value,
+  () => {
+    if (isReportSettingsMode.value) {
+      settingsHistoryPreviewChapterIndex.value = 0
+      return
+    }
+    syncHistoryPreviewChapterTitles()
+  }
+)
+
+function syncHistoryPreviewChapterTitles() {
+  const recordId = historyPreviewRecordId.value
+  if (!recordId) return
+
+  const record = findFinalizedReportById(recordId)
+  if (!record) return
+
+  const titles = record.chapters.map((chapter, index) => `${index + 1}. ${chapter.label}`)
+  chapterTitles.value = translateChapterTitles(titles, draft.language, draft.chapterContentLanguage)
+  activeChapterIndex.value = 0
+}
+
+const chapterSelectRef = ref<SelectInstance>()
+const mainBoundaryEl = ref<HTMLElement | null>(null)
+
+function refreshMainBoundary() {
+  mainBoundaryEl.value = document.querySelector(
+    '.report-edit-page__main--anchored'
+  ) as HTMLElement | null
+}
+
+/** 章節下拉浮層限制在中間 main card 內，避免超出 report-edit-page__main--anchored */
+const chapterSelectPopperOptions = computed(() => {
+  const boundary = mainBoundaryEl.value ?? 'clippingParents'
+  return {
+    modifiers: [
+      {
+        name: 'preventOverflow',
+        options: {
+          boundary,
+          padding: 8,
+          altAxis: true,
+        },
+      },
+      {
+        name: 'flip',
+        options: {
+          boundary,
+          padding: 8,
+        },
+      },
+    ],
+  }
+})
+
+const chapterDialogVisible = ref(false)
+/** 拖動重排後顯示「確認排序」；點擊確認後隱藏 */
+const showConfirmSortButton = ref(false)
+const selectDragSortIndex = ref<number | null>(null)
+const selectDragOverSortIndex = ref<number | null>(null)
+const newChapterForm = reactive({
+  title: '',
+  description: '',
+  prompt: '',
+  /** all = 所有資訊源檔案；partial = 部分資訊源檔案 */
+  sourceMode: 'all' as 'all' | 'partial',
+  selectedSourceIds: [] as string[],
+})
+
+const chapterSourcePickerVisible = ref(false)
+const chapterSourcePickerDraft = ref<string[]>([])
+
+const chapterSourcePickerCheckAll = computed({
+  get: () =>
+    sourceFiles.value.length > 0 &&
+    chapterSourcePickerDraft.value.length === sourceFiles.value.length,
+  set: (checked: boolean) => {
+    chapterSourcePickerDraft.value = checked ? sourceFiles.value.map((f) => f.id) : []
+  },
+})
+
+const chapterSourcePickerIndeterminate = computed(
+  () =>
+    chapterSourcePickerDraft.value.length > 0 &&
+    chapterSourcePickerDraft.value.length < sourceFiles.value.length
+)
+
+function onChapterSourceCheckAll(checked: boolean | string | number) {
+  chapterSourcePickerCheckAll.value = Boolean(checked)
+}
+
+function openChapterSourcePicker() {
+  if (!sourceFiles.value.length) {
+    ElMessage.warning('暫無資訊源檔案，請先在資訊源面板添加')
+    return
+  }
+  chapterSourcePickerDraft.value = [...newChapterForm.selectedSourceIds]
+  chapterSourcePickerVisible.value = true
+}
+
+function confirmChapterSourcePicker() {
+  if (!chapterSourcePickerDraft.value.length) {
+    ElMessage.warning('請至少選擇一個資訊源檔案')
+    return
+  }
+  newChapterForm.selectedSourceIds = [...chapterSourcePickerDraft.value]
+  chapterSourcePickerVisible.value = false
+  ElMessage.success(`已選擇 ${newChapterForm.selectedSourceIds.length} 個資訊源`)
+}
+
+watch(
+  () => newChapterForm.sourceMode,
+  (mode) => {
+    if (mode === 'all') {
+      newChapterForm.selectedSourceIds = []
+    }
+  }
+)
+/** 下拉內 Sortable 實例（彈層打開時綁定，關閉時銷毀） */
+let selectSortableInstance: Sortable | null = null
+let selectListClickGuard: ((event: Event) => void) | null = null
+let selectDragMoved = false
+
+function closeChapterSelect() {
+  chapterSelectRef.value?.blur()
+}
+
+/** 確認當前下拉拖動後的章節順序（調用 updateSectionOrder） */
+async function handleConfirmSort() {
+  if (!genAiSectionItems.value.length) {
+    return
+  }
+  const result = await updateGenAiSectionOrder()
+  if (!result.ok) return
+  showConfirmSortButton.value = false
+  closeChapterSelect()
+  ElMessage.success('章節順序已更新')
+}
+
+function moveActiveIndexAfterReorder(activeIndex: number, oldIndex: number, newIndex: number) {
+  if (activeIndex === oldIndex) return newIndex
+  if (oldIndex < activeIndex && newIndex >= activeIndex) return activeIndex - 1
+  if (oldIndex > activeIndex && newIndex <= activeIndex) return activeIndex + 1
+  return activeIndex
+}
+
+function reorderStringList(list: string[], oldIndex: number, newIndex: number) {
+  const next = [...list]
+  const [moved] = next.splice(oldIndex, 1)
+  if (moved == null) return list
+  next.splice(newIndex, 0, moved)
+  return next
+}
+
+function reorderList<T>(list: T[], oldIndex: number, newIndex: number): T[] {
+  const next = [...list]
+  const [moved] = next.splice(oldIndex, 1)
+  if (moved === undefined) return list
+  next.splice(newIndex, 0, moved)
+  return next
+}
+
+function renumberChapterTitles(titles: string[]) {
+  return titles.map((title, index) => {
+    const label = stripChapterNumberPrefix(title)
+    return label ? `${index + 1}. ${label}` : `${index + 1}.`
+  })
+}
+
+watch(
+  () => chapterTitles.value.length,
+  (length) => {
+    if (activeChapterIndex.value >= length) {
+      activeChapterIndex.value = Math.max(0, length - 1)
+    }
+  }
+)
+
+const activeChapterTitle = computed(() => chapterTitles.value[activeChapterIndex.value] ?? '')
+
+// new prompt sections
+/** 無章節時不綁 0，觸發器顯示空白 */
+const chapterSelectModelValue = computed(() =>
+  chapterTitles.value.length ? activeChapterIndex.value : undefined
+)
+
+function onChapterSelectModelUpdate(value: unknown) {
+  if (value == null || value === '') return
+  if (typeof value !== 'number' || Number.isNaN(value)) return
+  if (value < 0 || value >= chapterTitles.value.length) return
+  if (value === activeChapterIndex.value) return
+  // 編輯中禁止切章
+  if (chapterEditMode.value) return
+  // 清空 / 停打字 / 拉版本列表由 watch(activeChapterIndex) 統一處理
+  activeChapterIndex.value = value
+}
+
+function onChapterTypewriterComplete() {
+  const body = String(chapterHistoryPreviewBody.value ?? '')
+  if (body.trim()) {
+    patchGeneratedChapterBody(activeChapterIndex.value, body)
+  }
+  stopChapterContentTypewriter()
+}
+// new prompt sections end
+
+const activeChapterIntro = computed(() => {
+  // 切章瞬間：強制空白，避免舊章正文殘留
+  if (chapterBodyCleared.value) return ''
+  // 打字機進行中只認 preview body，避免 '' 被當成空而回落到舊 generated 正文
+  if (chapterTypewriterActive.value) {
+    return String(chapterHistoryPreviewBody.value ?? '')
+  }
+  // 原文交給 editor 解析（Markdown / HTML / tip），此處不剝標籤
+  if (!isReportSettingsMode.value) {
+    if (chapterHistoryPreviewBody.value) return String(chapterHistoryPreviewBody.value)
+    const generated = generatedChapterBodies.value[activeChapterIndex.value]
+    if (generated) return String(generated)
+    return ''
+  }
+
+  if (chapterHistoryPreviewBody.value) return String(chapterHistoryPreviewBody.value)
+
+  const generated = generatedChapterBodies.value[activeChapterIndex.value]
+  if (generated) return String(generated)
+
+  return ''
+})
+
+const previewChapterTitle = computed(() => {
+  if (isReportSettingsMode.value && isViewingReportHistory.value) {
+    const record = findFinalizedReportById(historyPreviewRecordId.value!)
+    const chapter = record?.chapters[settingsHistoryPreviewChapterIndex.value]
+    if (!chapter) return '報告預覽'
+    const label = translateChapterLabel(chapter.label, draft.language, 'zh-Hant')
+    return `${settingsHistoryPreviewChapterIndex.value + 1}. ${label}`
+  }
+  return activeChapterTitle.value
+})
+
+const previewChapterIntro = computed(() => {
+  if (isReportSettingsMode.value && isViewingReportHistory.value) {
+    const historyBody = historyPreviewChapterBodies.value[settingsHistoryPreviewChapterIndex.value]
+    if (historyBody) return String(historyBody)
+    return '暫無報告歷史預覽內容。'
+  }
+  return activeChapterIntro.value
+})
+
+const editorKey = computed(() => {
+  if (isReportSettingsMode.value) {
+    return `settings-${historyPreviewRecordId.value ?? 'draft'}-${historyPreviewApplyToken.value}`
+  }
+  // 不含 chapterHistoryApplyToken：點「生成章節內容」只更新 intro，不整棵重掛打字機面板
+  // 切章仍靠 activeChapterIndex / title / historyKey 換實例
+  return `${activeChapterIndex.value}-${activeChapterTitle.value}-${activeChapterHistoryKey.value}`
+})
+
+function destroySelectSortable() {
+  const list = getSelectDropdownListEl()
+  if (list && selectListClickGuard) {
+    list.removeEventListener('click', selectListClickGuard, true)
+  }
+  selectListClickGuard = null
+  selectSortableInstance?.destroy()
+  selectSortableInstance = null
+  selectDragSortIndex.value = null
+  selectDragOverSortIndex.value = null
+}
+
+function getSelectDropdownListEl() {
+  return document.querySelector(
+    '.report-chapter-workspace__chapter-select-popper .el-select-dropdown__list'
+  ) as HTMLElement | null
+}
+
+function initSelectSortable() {
+  destroySelectSortable()
+  const list = getSelectDropdownListEl()
+  if (!list) return
+
+  selectListClickGuard = (event: Event) => {
+    if (!selectDragMoved) return
+    event.preventDefault()
+    event.stopImmediatePropagation()
+  }
+  list.addEventListener('click', selectListClickGuard, true)
+
+  selectSortableInstance = Sortable.create(list, {
+    animation: 150,
+    draggable: '.el-select-dropdown__item',
+    forceFallback: true,
+    fallbackOnBody: true,
+    fallbackClass: 'report-chapter-workspace__select-sortable-fallback',
+    // Sortable 新版類型已無 distance；用 touchStartThreshold + fallbackTolerance 等效防誤拖
+    fallbackTolerance: 4,
+    touchStartThreshold: 4,
+    ghostClass: 'is-drag-over',
+    chosenClass: 'is-dragging',
+    dragClass: 'is-dragging',
+    onStart({ oldIndex }) {
+      selectDragMoved = true
+      selectDragSortIndex.value = oldIndex ?? null
+    },
+    onMove(evt) {
+      const related = evt.related
+      selectDragOverSortIndex.value = related
+        ? Array.from(list.children).indexOf(related as HTMLElement)
+        : null
+      return true
+    },
+    onEnd({ oldIndex, newIndex }) {
+      selectDragSortIndex.value = null
+      selectDragOverSortIndex.value = null
+
+      const shouldReorder = oldIndex != null && newIndex != null && oldIndex !== newIndex
+
+      if (shouldReorder) {
+        if (genAiSectionItems.value.length) {
+          genAiSectionItems.value = reorderList(genAiSectionItems.value, oldIndex, newIndex).map(
+            (item, i) => ({
+              ...item,
+              orderSeq: i + 1,
+            })
+          )
+          chapterTitles.value = genAiSectionItems.value.map(formatGenAiSectionTitle)
+        } else {
+          chapterTitles.value = renumberChapterTitles(
+            reorderStringList(chapterTitles.value, oldIndex, newIndex)
+          )
+        }
+        activeChapterIndex.value = moveActiveIndexAfterReorder(
+          activeChapterIndex.value,
+          oldIndex,
+          newIndex
+        )
+        showConfirmSortButton.value = true
+      }
+
+      window.setTimeout(() => {
+        selectDragMoved = false
+      }, 0)
+
+      if (shouldReorder) {
+        void nextTick(() => {
+          initSelectSortable()
+        })
+      }
+    },
+  })
+}
+
+async function onChapterSelectVisibleChange(visible: boolean) {
+  if (!visible) {
+    destroySelectSortable()
+    selectDragMoved = false
+    return
+  }
+  refreshMainBoundary()
+  await nextTick()
+  requestAnimationFrame(() => {
+    const preferred = CHAPTER_PANEL_MAX_ROWS * CHAPTER_PANEL_ROW_HEIGHT
+    const main = document.querySelector('.report-edit-page__main--anchored') as HTMLElement | null
+    const selectEl = chapterSelectRef.value?.$el as HTMLElement | undefined
+    let available = preferred
+    if (main && selectEl) {
+      const mainRect = main.getBoundingClientRect()
+      const selectRect = selectEl.getBoundingClientRect()
+      const footerReserve = 56
+      const gap = 18
+      const spaceBelow = mainRect.bottom - selectRect.bottom - gap - footerReserve
+      const spaceAbove = selectRect.top - mainRect.top - gap - footerReserve
+      available = Math.max(
+        CHAPTER_PANEL_ROW_HEIGHT * 3,
+        Math.min(preferred, Math.max(spaceBelow, spaceAbove))
+      )
+    }
+    const listMaxHeight = `${Math.floor(available)}px`
+    const wrap = document.querySelector(
+      '.report-chapter-workspace__chapter-select-popper .el-select-dropdown__wrap'
+    ) as HTMLElement | null
+    if (wrap) {
+      wrap.style.setProperty('max-height', listMaxHeight, 'important')
+      wrap.style.setProperty('height', 'auto', 'important')
+      wrap.style.setProperty('overflow-y', 'auto', 'important')
+      wrap.style.setProperty('scrollbar-width', 'none', 'important')
+    }
+    const scrollbar = document.querySelector(
+      '.report-chapter-workspace__chapter-select-popper .el-select-dropdown > .el-scrollbar'
+    ) as HTMLElement | null
+    if (scrollbar) {
+      scrollbar.style.setProperty('max-height', listMaxHeight, 'important')
+    }
+
+    const needsScroll = !!wrap && wrap.scrollHeight > wrap.clientHeight + 1
+    const bar = document.querySelector(
+      '.report-chapter-workspace__chapter-select-popper .el-scrollbar__bar.is-vertical'
+    ) as HTMLElement | null
+    const thumb = bar?.querySelector('.el-scrollbar__thumb') as HTMLElement | null
+    if (bar) {
+      bar.style.setProperty('display', needsScroll ? 'block' : 'none', 'important')
+      bar.style.setProperty('width', '8px', 'important')
+      bar.style.setProperty('opacity', '1', 'important')
+    }
+    if (thumb && needsScroll) {
+      thumb.style.setProperty('width', '8px', 'important')
+      thumb.style.setProperty('height', '50px', 'important')
+      thumb.style.setProperty('min-height', '50px', 'important')
+      thumb.style.setProperty('opacity', '1', 'important')
+      thumb.style.setProperty('background-color', '#999', 'important')
+    }
+    initSelectSortable()
+  })
+}
+
+onUnmounted(() => {
+  registerChapterHistoryReloader(null)
+  destroySelectSortable()
+  selectDragMoved = false
+})
+
+function getChapterStatus(index: number) {
+  if (index === activeChapterIndex.value && chapterEditMode.value) {
+    return '編輯中'
+  }
+  const apiItem = genAiSectionItems.value[index]
+  if (apiItem?.latestStatus) {
+    return SECTION_STATUS_LABEL[apiItem.latestStatus] ?? apiItem.latestStatus
+  }
+  return genAiSectionItems.value.length ? '未生成' : ''
+}
+
+function resetNewChapterForm() {
+  newChapterForm.title = ''
+  newChapterForm.description = ''
+  newChapterForm.prompt = ''
+  newChapterForm.sourceMode = 'all'
+  newChapterForm.selectedSourceIds = []
+  chapterSourcePickerDraft.value = []
+  chapterSourcePickerVisible.value = false
+}
+
+// new prompt sections
+function openAddChapterDialog() {
+  closeChapterSelect()
+  resetNewChapterForm()
+  chapterDialogVisible.value = true
+}
+// new prompt sections end
+
+function closeChapterDialog() {
+  chapterDialogVisible.value = false
+}
+
+function handleChapterDialogClosed() {
+  resetNewChapterForm()
+}
+
+function handleAddChapterSubmit() {
+  const title = newChapterForm.title.trim()
+  const description = newChapterForm.description.trim()
+  const prompt = newChapterForm.prompt.trim()
+
+  if (!title) {
+    ElMessage.warning('請輸入章節標題')
+    return
+  }
+  if (!description) {
+    ElMessage.warning('請輸入章節描述')
+    return
+  }
+  if (!prompt) {
+    ElMessage.warning('請輸入 Prompt')
+    return
+  }
+  if (newChapterForm.sourceMode === 'partial' && !newChapterForm.selectedSourceIds.length) {
+    ElMessage.warning('請選擇資訊源檔案')
+    return
+  }
+
+  chapterTitles.value = [...chapterTitles.value, title]
+  activeChapterIndex.value = chapterTitles.value.length - 1
+  closeChapterDialog()
+  ElMessage.success('章節已提交並生成內容')
+}
+
+function handleGenerateReport() {
+  // if (!sourceFiles.value.length) {
+  //   ElMessage.warning('請至少添加一個資訊源檔案')
+  //   return
+  // }
+  stopChapterContentTypewriter()
+  // 先跳轉報告頁（settings）；進頁後 watch 調 AdjustInstance
+  emit('generate-report')
+}
+
+function handleBackToChapterEdit() {
+  resetHistoryPreviewState()
+  emit('back-to-chapter-edit')
+}
+
+function handleApplyCreateTemplate() {
+  applyTemplateDetail.value = buildApplyTemplateDetail()
+  resetApplyTemplateForm()
+  applyTemplateDialogVisible.value = true
+}
+
+async function handleApplyTemplateSubmit() {
+  if (!applyTemplateTitle.value.trim()) {
+    ElMessage.warning('請輸入模板標題')
+    return
+  }
+  if (!applyTemplateDescription.value.trim()) {
+    ElMessage.warning('請輸入模板描述')
+    return
+  }
+  if (!applyTemplateAction.value) {
+    ElMessage.warning('請選擇處理事項')
+    return
+  }
+  if (applyTemplateAction.value === 'reject' && !applyTemplateOpinion.value.trim()) {
+    ElMessage.warning('拒絕時請填寫意見')
+    return
+  }
+
+  const isReject = applyTemplateAction.value === 'reject'
+  try {
+    await ElMessageBox.confirm(
+      isReject ? '確定拒絕嗎？' : '確定通過嗎？',
+      isReject ? '拒絕' : '通過',
+      {
+        confirmButtonText: '確定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+    )
+  } catch {
+    return
+  }
+
+  applyTemplateDialogVisible.value = false
+  if (isReject) {
+    ElMessage.success('已拒絕該模板申請')
+    return
+  }
+  ElMessage.success('已提交模板申請，待審批')
+}
+
+function handleViewCoherenceCheck() {
+  const session = loadCoherenceCheckSession()
+  if (session) {
+    openReportCoherenceCheckResult(router, session)
+    return
+  }
+
+  const recordId = historyPreviewRecordId.value
+  if (recordId) {
+    const record = findFinalizedReportById(recordId)
+    if (record) {
+      openReportCoherenceCheckResult(router, {
+        templateId: selectedTemplate.value?.id ?? record.templateId,
+        reportName: draft.reportName,
+        year: draft.year,
+        chapters: record.chapters,
+        chapterContentLanguage: record.chapterContentLanguage,
+        reportLanguage: record.reportLanguage,
+      })
+      return
+    }
+  }
+
+  ElMessage.warning('請先進行報告連貫性檢查')
+}
+
+const wordExportRootRef = ref<HTMLElement | null>(null)
+const isExportingWord = ref(false)
+
+const instanceId = ref('')
+const editors = ref<any[]>([])
+const editorList = ref<any[]>([])
+/** 以接口 res.data 為準：有 data 才視為可用來源 */
+const editorsHasData = ref(false)
+const editorListHasData = ref(false)
+
+const userGenAiBuildReport = genAiBuildReportStore
+
+const init = async () => {
+  await userGenAiBuildReport.initFromStorage()
+  const instanceIdRoute: any = route.query.instanceId
+  instanceId.value = route.query.instanceId
+    ? instanceIdRoute
+    : (userGenAiBuildReport.instanceId as any) || ''
+  if (instanceId.value) {
+    userGenAiBuildReport.setInstanceId(String(instanceId.value))
+  }
+  getReportRoles({
+    categoryId: 1,
+    instanceId: route.query.instanceId ? instanceIdRoute : userGenAiBuildReport.instanceId,
+  })
+  getEditorList()
+}
+
+// report所有编辑者
+const getReportRoles = async (params: any) => {
+  const res: any = await genAiReportPermissionApi.fetchGenAiReportPermissionList(params)
+  try {
+    if (res.data) {
+      console.log('res.data + xx :', res.data)
+
+      const realSortCreator = res.data.find((item: any) => item.userRole === 'CREATOR')
+      const realSortEditor = res.data.filter((item: any) => item.userRole !== 'CREATOR')
+      editors.value = realSortCreator ? [realSortCreator, ...realSortEditor] : realSortEditor
+      editorsHasData.value = true
+    } else {
+      editors.value = []
+      editorsHasData.value = false
+    }
+  } catch {
+    editorsHasData.value = false
+  }
+}
+
+const getEditorList = async () => {
+  const res: any = await genAiReportPermissionApi.fetchGenAiReportPermissionEditorList({})
+  try {
+    if (res.data) {
+      editorList.value = res.data
+      editorListHasData.value = true
+    } else {
+      editorList.value = []
+      editorListHasData.value = false
+    }
+  } catch {
+    editorListHasData.value = false
+  }
+}
+
+/** 兩條導出共用：始終取權威正文（非打字機半成品 / 非流式佔位） */
+function getWordExportChapters() {
+  if (isReportSettingsMode.value) {
+    // 用 settingsTypewriterChapters（AdjustInstance / 歷史回寫後的完整 Markdown）
+    // 禁止 settingsDocChapters：流式生成時會變成單條 stream stub
+    return settingsTypewriterChapters.value.map((chapter) => ({
+      title: chapter.title,
+      content: chapter.intro,
+    }))
+  }
+
+  // Prompt 模式：當前章取最新（打字機目標正文 / 預覽 / 已生成緩存）
+  // 打字機進行動畫時 preview 已是完整目標串，不是 DOM 上已打出的片段
+  return [
+    {
+      title: previewChapterTitle.value,
+      content: previewChapterIntro.value,
+    },
+  ]
+}
+
+/** 導出前等 Vue 刷完（歷史切換 / 章節勾選回寫後的 computed） */
+async function settleWordExportSource() {
+  await nextTick()
+  await nextTick()
+}
+
+/** 按 res.data 可用性合併 getReportRoles / getEditorList，映射為導出 members */
+function mapEditorListToExportMembers() {
+  const rows: any[] = []
+  const seen = new Set<string>()
+
+  const pushAll = (list: any[]) => {
+    for (const item of list || []) {
+      const department = String(item?.userUnitSeqDesc ?? '').trim()
+      const name = String(item?.userName ?? '').trim()
+      if (!department && !name) continue
+      const key = String(item?.userId ?? `${department}\0${name}`).trim()
+      if (!key || seen.has(key)) continue
+      seen.add(key)
+      rows.push({ department, name })
+    }
+  }
+
+  // 以 res.data 為判斷：有 data 的來源才納入；兩者都有則合併（roles 在前，保 CREATOR 序）
+  if (editorsHasData.value) pushAll(editors.value)
+  if (editorListHasData.value) pushAll(editorList.value)
+
+  return rows
+}
+
+/** 報告配置「名稱」→ 導出封面 / 檔名同源 */
+function getReportConfigNameForExport() {
+  return (draft.reportName || '').trim() || '行業調研報告'
+}
+
+/** 對齊行業調研導出模板：封面 / 目錄 / 小組成員 / 參考文獻 */
+function getWordExportReportMeta() {
+  const chapters = getWordExportChapters()
+
+  return {
+    reportName: getReportConfigNameForExport(),
+    year: String(draft.year || '').trim(),
+    members: mapEditorListToExportMembers(),
+    sourceFileNames: sourceFiles.value
+      .filter((file) => file.selected || sourceFiles.value.every((f) => !f.selected))
+      .map((file) => file.name)
+      .filter(Boolean),
+    tocTitles: chapters.map((chapter) => String(chapter.title ?? '').trim()).filter(Boolean),
+  }
+}
+
+function assertWordExportChaptersReady() {
+  if (isReportSettingsMode.value && !settingsPreviewChapters.value.length) {
+    ElMessage.warning('請先勾選至少一個章節')
+    return null
+  }
+  const chapters = getWordExportChapters()
+  const hasContent = chapters.some(
+    (chapter) => String(chapter.title ?? '').trim() || String(chapter.content ?? '').trim()
+  )
+  if (!hasContent) {
+    ElMessage.warning('暫無可導出內容')
+    return null
+  }
+  return chapters
+}
+
+/**
+ * 兩條導出按鈕共用：權威章節 Markdown → AIExport 打包。
+ * 不走 DOM/altChunk 半成品路徑，避免遷移環境出現 --------tDocumentpart-- 殘片。
+ */
+async function runWordExport(filename: string) {
+  if (isExportingWord.value) return
+  await settleWordExportSource()
+  const chapters = assertWordExportChaptersReady()
+  if (!chapters) return
+
+  try {
+    isExportingWord.value = true
+    await nextTick()
+    await exportMarkdownToDocxWord(chapters, {
+      filename,
+      headerText: DOCX_HEADER_CLASSIFICATION,
+      showPageNumbers: true,
+      reportMeta: getWordExportReportMeta(),
+    })
+  } catch (error) {
+    console.error('Word 導出失敗:', error)
+    ElMessage.error(
+      error instanceof Error && error.message.trim()
+        ? error.message
+        : 'Word 導出失敗，請查看瀏覽器控制檯'
+    )
+  } finally {
+    isExportingWord.value = false
+  }
+}
+
+/** 版本號統一為 Vn（對齊生成報告設置 / existsInstanceVersionNo） */
+function normalizeExportVersionNo(raw: unknown): string {
+  if (raw == null || raw === '') return 'V1'
+  let text = String(raw).trim()
+  if (!text) return 'V1'
+  text = text.replace(/^報告版本\s*/i, '').trim()
+  text = text.toUpperCase()
+  if (!text) return 'V1'
+  return text.startsWith('V') ? text : `V${text}`
+}
+
+function sanitizeExportFilenamePart(value: string) {
+  return value.replace(/[\\/:*?"<>|]/g, '_').replace(/\s+/g, ' ').trim()
+}
+
+/**
+ * 檔名：[GenAI草稿] [報告名稱] [版本號] [語言] ([年份]年).docx
+ * 報告名稱 / 語言 / 年份 ← 報告配置；版本號 ← 生成報告設置 existsInstanceVersionNo
+ */
+function buildWordExportFilename() {
+  const name = sanitizeExportFilenamePart(getReportConfigNameForExport()) || '行業調研報告'
+  const version = normalizeExportVersionNo(existsInstanceVersionNo.value)
+  const language = sanitizeExportFilenamePart(
+    getReportLanguageLabel(String(draft.language || 'zh-Hant'))
+  )
+  const year =
+    String(draft.year || '').trim() || String(new Date().getFullYear())
+  return `[GenAI草稿] ${name} ${version} ${language} (${year}年).docx`
+}
+
+async function handleExportWord1() {
+  await runWordExport(buildWordExportFilename())
+}
+
+async function handleExportWord2() {
+  await runWordExport(buildWordExportFilename())
+}
+
+async function handleCancelEdit() {
+  if (!chapterEditMode.value) return
+
+  if (!isChapterEditDirty()) {
+    exitChapterEditMode(true)
+    return
+  }
+
+  try {
+    await ElMessageBox.confirm('您已修改部分內容且未儲存，確定要進行「取消」的操作嗎？', '提示', {
+      confirmButtonText: '確定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    exitChapterEditMode(true)
+  } catch {
+    // 用戶取消操作，保持編輯狀態
+  }
+}
+
+async function handleEditSave() {
+  if (!chapterEditMode.value) {
+    // 點「編輯」：嘗試 changeSectionStatus；失敗不阻斷進入編輯
+    void changeGenAiSectionStatus()
+    enterChapterEditMode()
+    return
+  }
+  // 點「儲存」：draftFlag=N
+  const result = await saveGenAiSectionVersion('N')
+  if (!result.ok) return
+  commitChapterEdit()
+  ElMessage.success('章節內容已儲存')
+  // 刷新章節歷史（失敗則保持當前，不阻斷）
+  void loadGenAiSectionVersionListForActiveChapter()
+}
+
+/** 編輯態「存為草稿」：draftFlag=Y 調 saveSectionVersion */
+async function handleSaveDraft() {
+  const result = await saveGenAiSectionVersion('Y')
+  if (!result.ok) return
+  saveDraftToSession()
+  ElMessage.success('已存為草稿')
+  void loadGenAiSectionVersionListForActiveChapter()
+}
+</script>
+
+<style scoped>
+.report-chapter-workspace {
+  --report-accent: #c53355;
+  --report-accent-soft: #fdf0f2;
+  --report-card-bg: #f5f5f5;
+  --report-table-row-hover-bg: #f5f7fa;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 0;
+  flex: 1 0 auto;
+  min-height: 0;
+  height: auto;
+}
+
+.report-chapter-workspace :deep(.el-loading-spinner .circular) {
+  width: 56px;
+  height: 56px;
+}
+
+.report-chapter-workspace :deep(.el-loading-spinner .el-loading-text) {
+  margin-top: 12px;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--report-accent);
+}
+
+.report-chapter-workspace__toolbar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  box-sizing: border-box;
+  /* 隨中欄滾動時吸頂，工具列本身不滾走 */
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  margin: 0;
+  /* 下邊距與中欄 card 上邊距（16px）一致 */
+  padding-bottom: 16px;
+  background: #fff;
+}
+
+.report-chapter-workspace__editor-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-height: 280px;
+  padding-top: 8px;
+}
+
+.report-chapter-workspace__editor-shell-title {
+  width: min(420px, 70%);
+  height: 28px;
+  border-radius: 4px;
+  background: linear-gradient(90deg, #f2f3f5 25%, #e9ebef 37%, #f2f3f5 63%);
+  background-size: 400% 100%;
+  animation: report-chapter-editor-shell-shimmer 1.2s ease-in-out infinite;
+}
+
+.report-chapter-workspace__editor-shell-line {
+  width: 100%;
+  height: 14px;
+  border-radius: 4px;
+  background: linear-gradient(90deg, #f5f6f8 25%, #eceef2 37%, #f5f6f8 63%);
+  background-size: 400% 100%;
+  animation: report-chapter-editor-shell-shimmer 1.2s ease-in-out infinite;
+}
+
+.report-chapter-workspace__editor-shell-line.is-short {
+  width: 55%;
+}
+
+@keyframes report-chapter-editor-shell-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+
+  100% {
+    background-position: 0 0;
+  }
+}
+
+.report-chapter-workspace__chapter-box {
+  position: relative;
+  min-width: 0;
+}
+
+.report-chapter-workspace__chapter-select {
+  width: 220px;
+  min-width: 180px;
+}
+
+.report-chapter-workspace__chapter-select :deep(.el-select__wrappe r) {
+  min-height: 39px;
+  padding: 0 12px;
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px #dcdfe6 inset;
+  transition: box-shadow 0.2s ease;
+}
+
+.report-chapter-workspace__chapter-select :deep(.el-select__wrapper:hover:not(.is-disabled)),
+.report-chapter-workspace__chapter-select :deep(.el-select__wrapper.is-focused:not(.is-disabled)) {
+  box-shadow: 0 0 0 1px var(--report-accent) inset;
+}
+
+.report-chapter-workspace__chapter-select :deep(.el-select__wrapper.is-disabled) {
+  cursor: not-allowed;
+  background-color: #f5f5f5;
+  box-shadow: 0 0 0 1px #dcdfe6 inset;
+}
+
+.report-chapter-workspace__chapter-select
+  :deep(.el-select__wrapper.is-disabled .el-select__selected-item) {
+  color: #a8abb2;
+}
+
+.report-chapter-workspace__chapter-select :deep(.el-select__selected-item) {
+  font-size: 15px;
+  font-weight: 400;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  color: #303133;
+}
+
+.report-chapter-workspace__chapter-select
+  :deep(.el-select__wrapper:hover .el-select__selected-item),
+.report-chapter-workspace__chapter-select
+  :deep(.el-select__wrapper.is-focused .el-select__selected-item) {
+  color: var(--report-accent);
+}
+
+.report-chapter-workspace__chapter-select :deep(.el-select__caret) {
+  color: #dcdfe6;
+  font-size: 15px;
+  transition: color 0.2s ease;
+}
+
+.report-chapter-workspace__chapter-select :deep(.el-select__caret svg) {
+  color: inherit;
+  fill: currentColor;
+}
+
+.report-chapter-workspace__chapter-select :deep(.el-select__wrapper:hover .el-select__caret),
+.report-chapter-workspace__chapter-select :deep(.el-select__wrapper.is-focused .el-select__caret) {
+  color: var(--report-accent);
+}
+
+.report-chapter-workspace__chapter-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  font-size: 15px;
+  font-weight: 400;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+}
+
+.report-chapter-workspace__chapter-option .report-chapter-workspace__sort-handle {
+  margin-top: 0;
+}
+
+.report-chapter-workspace__chapter-option-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 15px;
+  font-weight: 400;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  color: #303133;
+}
+
+.report-chapter-workspace__chapter-option-title.is-active {
+  color: var(--report-accent);
+  font-weight: 400;
+}
+
+.report-chapter-workspace__chapter-option-status {
+  flex-shrink: 0;
+  font-size: 15px;
+  font-weight: 400;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  color: #606266;
+  white-space: nowrap;
+}
+
+/* // new prompt sections — toolbar 側 footer 佈局（彈層內按鈕樣式見下方同標記區塊） */
+.report-chapter-workspace__chapter-select-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 10px 12px;
+}
+
+.report-chapter-workspace__chapter-select-footer-btn {
+  min-width: 120px;
+}
+/* // new prompt sections end */
+
+.report-chapter-workspace__toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+/* 覆蓋 Element Plus .el-button+.el-button 默認 margin-left:12px，避免與 gap 疊加；按鈕間距統一為 12px */
+.report-chapter-workspace__toolbar-right :deep(.el-button) {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+/* 取消 / 存為草稿 / 儲存 / 編輯/儲存 / 生成報告 */
+.report-chapter-workspace__action-btn {
+  width: 100px;
+  min-width: 100px;
+  max-width: 100px;
+  padding: 0 8px;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+}
+
+@media (max-width: 1024px) {
+  .report-chapter-workspace__toolbar {
+    flex-wrap: wrap;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  /* 章節 select：隨容器等比例縮小 */
+  .report-chapter-workspace__chapter-box {
+    flex: 1 1 auto;
+  min-width: 0;
+    max-width: 100%;
+    width: 100%;
+  }
+
+  .report-chapter-workspace__chapter-select {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  /* 操作按鈕整組換行 */
+  .report-chapter-workspace__toolbar-right {
+    flex: 1 1 100%;
+    width: 100%;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+
+  .report-chapter-workspace__action-btn {
+    width: 100px;
+    min-width: 0;
+    max-width: 100px;
+    flex: 0 1 auto;
+  }
+}
+
+.report-chapter-workspace__sort-handle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  margin-top: 3px;
+  color: #86909c;
+  cursor: grab;
+}
+
+.report-chapter-workspace__sort-handle:active {
+  cursor: grabbing;
+}
+
+.report-chapter-workspace__editor {
+  flex: 1 0 auto;
+  min-height: 420px;
+  border-radius: 8px;
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+}
+
+.report-chapter-workspace__settings-doc {
+  flex: 1 0 auto;
+  min-height: 0;
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+}
+
+.report-chapter-workspace__settings-doc
+  :deep(.ProseMirror > *:first-child:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)),
+.report-chapter-workspace__editor
+  :deep(.ProseMirror > *:first-child:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)) {
+  margin-top: 0 !important;
+}
+
+.report-chapter-workspace__settings-doc :deep(.ProseMirror h2),
+.report-chapter-workspace__editor :deep(.ProseMirror h2) {
+  margin: 24px 0 !important;
+}
+
+.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: 500;
+}
+
+.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--wide {
+  min-width: 160px;
+}
+
+.template-center-toolbar-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.template-center-toolbar-btn--primary {
+  border: 1px solid var(--report-accent);
+  background: var(--report-accent);
+  color: #fff;
+}
+
+.template-center-toolbar-btn--primary:hover:not(:disabled) {
+  background: #fff;
+  border-color: var(--report-accent);
+  color: var(--report-accent);
+}
+
+.template-center-toolbar-btn--outline {
+  border: 1px solid var(--report-accent);
+  color: var(--report-accent);
+  background: #fff;
+}
+
+.template-center-toolbar-btn--outline:hover:not(:disabled) {
+  border-color: var(--report-accent);
+  color: var(--report-accent);
+  background: var(--report-accent-soft);
+}
+
+.chatbot-report-btn-outline.el-button,
+.chatbot-report-btn-primary.el-button {
+  height: 32px !important;
+  padding-inline: 14px !important;
+  border-radius: 4px !important;
+  font-size: 16px !important;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif) !important;
+  font-weight: 500 !important;
+}
+
+.chatbot-report-btn-outline.el-button {
+  border: 1px solid var(--report-accent) !important;
+  color: var(--report-accent) !important;
+  background: #fff !important;
+}
+
+.chatbot-report-btn-outline.el-button:hover {
+  background: var(--report-accent-soft) !important;
+  color: var(--report-accent) !important;
+  border-color: var(--report-accent) !important;
+}
+
+.chatbot-report-btn-outline--wide.el-button {
+  min-width: 0;
+  max-width: 220px;
+  white-space: normal;
+  line-height: 1.3;
+  height: auto !important;
+  min-height: 32px;
+  padding-block: 6px !important;
+}
+
+.chatbot-report-btn-primary.el-button {
+  border: 1px solid var(--report-accent) !important;
+  background: var(--report-accent) !important;
+  color: #fff !important;
+}
+
+.chatbot-report-btn-primary.el-button:hover {
+  background: #fff !important;
+  color: var(--report-accent) !important;
+  border-color: var(--report-accent) !important;
+}
+
+.chatbot-report-btn-primary--wide.el-button {
+  min-width: 0;
+  max-width: 220px;
+  white-space: normal;
+  line-height: 1.3;
+  height: auto !important;
+  min-height: 32px;
+  padding-block: 6px !important;
+}
+</style>
+
+<style>
+/* 新增章節彈窗：尺寸 / 位置由 reportEdit 頁 CSS 變量對齊中間卡片 */
+.report-chapter-dialog.report-workflow-dialog.el-dialog {
+  --el-dialog-padding-primary: 0;
+  --report-accent: #c53355;
+  --report-accent-soft: #fdf0f2;
+  border-radius: 4px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.report-workflow-dialog .el-dialog__header,
+.report-workflow-dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin: 0;
+  padding: 14px 16px 14px 20px;
+  /* 標題欄樣式見 fonts.css（全局 dialog） */
+  background: transparent;
+  border-bottom: 1px solid #ebeef5;
+  flex-shrink: 0;
+}
+
+/* 1. 新增章節：去掉標題欄下劃線 */
+.report-chapter-dialog .el-dialog__header,
+.report-chapter-dialog .report-workflow-dialog__header {
+  border-bottom: none !important;
+}
+
+.report-workflow-dialog__title {
+  flex: 1;
+  min-width: 0;
+  color: #303133;
+  font-size: 18px;
+  font-weight: 600;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  line-height: 1.4;
+}
+
+.report-workflow-dialog__close {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #303133;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.report-workflow-dialog__close:hover {
+  color: #606266;
+}
+
+.report-chapter-dialog .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;
+  font-size: 15px;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-weight: 400;
+  transition: all 0.2s ease;
+}
+
+.report-chapter-dialog .template-center-toolbar-btn--primary {
+  border: 1px solid var(--report-accent);
+  background: var(--report-accent);
+  color: #fff;
+}
+
+.report-chapter-dialog .template-center-toolbar-btn--primary:hover:not(:disabled) {
+  background: #fff;
+  border-color: var(--report-accent);
+  color: var(--report-accent);
+}
+
+.report-chapter-dialog .template-center-toolbar-btn--outline {
+  border: 1px solid var(--report-accent);
+  color: var(--report-accent);
+  background: #fff;
+}
+
+.report-chapter-dialog .template-center-toolbar-btn--outline:hover:not(:disabled) {
+  border-color: var(--report-accent);
+  color: var(--report-accent);
+  background: var(--report-accent-soft);
+}
+
+.report-chapter-dialog .el-dialog__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  /* 3. 加大內容區，給 Prompt 字數統計留空 */
+  padding: 24px 20px 32px;
+  background: #fff;
+  overflow-y: auto;
+}
+
+.report-chapter-dialog .el-dialog__footer {
+  /* 4. 原下邊距 16px × 1.5 = 24px */
+  padding: 12px 16px 24px;
+  background: #fff;
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.report-chapter-dialog__form {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.report-chapter-dialog__field {
+  margin: 0;
+}
+
+.report-chapter-dialog__field--row {
+  display: grid;
+  grid-template-columns: 100px minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.report-chapter-dialog__field--textarea {
+  align-items: start;
+}
+
+.report-chapter-dialog__label {
+  padding-top: 8px;
+  font-size: 15px;
+  font-weight: 500;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  color: #303133;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+.report-chapter-dialog__required {
+  color: #c53355;
+}
+
+.report-chapter-dialog__control {
+  min-width: 0;
+}
+
+.report-chapter-dialog__input :deep(.el-input__wrapper),
+.report-chapter-dialog__textarea :deep(.el-textarea__inner) {
+  border-radius: 2px;
+}
+
+.report-chapter-dialog__textarea :deep(.el-textarea__inner) {
+  min-height: 250px;
+}
+
+.report-chapter-dialog__footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  width: 100%;
+}
+
+.report-chapter-dialog__field--source {
+  align-items: flex-start;
+}
+
+.report-chapter-dialog__source-control {
+  min-height: 32px;
+}
+
+.report-chapter-dialog__source-radios {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.report-chapter-dialog__source-partial-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+}
+
+.report-chapter-dialog__source-radios :deep(.el-radio) {
+  margin-right: 0;
+  height: auto;
+  font-size: 15px;
+  font-weight: 400;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  color: var(--report-accent, #c53355);
+}
+
+.report-chapter-dialog__source-radios :deep(.el-radio__label) {
+  font-size: 15px;
+  font-weight: 400;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  color: var(--report-accent, #c53355) !important;
+  padding-left: 8px;
+}
+
+.report-chapter-dialog__source-link {
+  font-size: 15px;
+  font-weight: 500;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  color: var(--report-accent, #c53355);
+  text-decoration: underline;
+  cursor: pointer;
+  line-height: 1.4;
+}
+
+.report-chapter-dialog__source-link:hover {
+  color: #a82845;
+}
+
+.report-chapter-dialog__source-hint {
+  font-size: 13px;
+  color: #909399;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+}
+
+.report-chapter-dialog__footer-btn {
+  min-width: 140px;
+}
+
+.report-chapter-source-picker.el-dialog {
+  --el-dialog-padding-primary: 0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.report-chapter-source-picker .el-dialog__header {
+  border-bottom: none !important;
+}
+
+.report-chapter-source-picker .el-dialog__body {
+  padding: 8px 20px 20px;
+}
+
+.report-chapter-source-picker .el-dialog__footer {
+  padding: 12px 16px 24px;
+}
+
+.report-chapter-source-picker__body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.report-chapter-source-picker__list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 320px;
+  overflow-y: auto;
+  padding: 8px 12px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+}
+
+.report-chapter-source-picker__item {
+  margin-right: 0;
+  height: auto;
+  white-space: normal;
+}
+
+.report-chapter-source-picker__empty {
+  margin: 0;
+  padding: 24px 0;
+  text-align: center;
+  color: #909399;
+  font-size: 14px;
+}
+
+.report-workflow-dialog-overlay {
+  overflow: auto;
+}
+
+.report-workflow-dialog.el-dialog {
+  --el-dialog-padding-primary: 0;
+  /* 寬高 / 對齊由 reportEdit 頁 --report-edit-main-* 變量控制；此處僅作無錨點時的兜底 */
+  width: 60% !important;
+  max-width: 80%;
+  min-height: 60vh;
+  height: auto;
+  max-height: 90vh;
+  margin-top: 5% !important;
+  margin-left: 21% !important;
+  margin-right: auto !important;
+  border-radius: 4px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.report-workflow-dialog .el-dialog__header {
+  flex-shrink: 0;
+}
+
+.report-workflow-dialog .el-dialog__body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.report-workflow-dialog .el-dialog__footer {
+  flex-shrink: 0;
+}
+
+.report-chapter-workspace__chapter-select-popper.el-popper {
+  --report-accent: #c53355;
+  --report-accent-soft: #fdf0f2;
+  width: 450px !important;
+  min-width: 450px !important;
+}
+
+/* 箭頭對齊 select 右側 caret 正下方（select 寬 220px） */
+.report-chapter-workspace__chapter-select-popper.el-popper .el-popper__arrow {
+  left: 200px !important;
+  right: auto !important;
+  transform: translateX(-50%) !important;
+}
+
+.report-chapter-workspace__chapter-select-popper.el-popper[data-popper-placement^='bottom']
+  .el-popper__arrow {
+  top: -5px !important;
+}
+
+.report-chapter-workspace__chapter-select-popper.el-popper[data-popper-placement^='top']
+  .el-popper__arrow {
+  bottom: -5px !important;
+}
+
+.report-chapter-workspace__chapter-select-popper .el-select-dropdown {
+  width: 450px;
+  min-width: 450px;
+}
+
+/* 最多顯示 14 章（14 × 40px），超出出現滾動條；只保留一條 EP 自定義條 */
+.report-chapter-workspace__chapter-select-popper .el-select-dropdown > .el-scrollbar {
+  max-height: 560px !important;
+  height: auto !important;
+  overflow: hidden !important;
+}
+
+.report-chapter-workspace__chapter-select-popper .el-select-dropdown__wrap,
+.report-chapter-workspace__chapter-select-popper .el-scrollbar__wrap,
+.report-chapter-workspace__chapter-select-popper .el-scrollbar__wrap--hidden-default {
+  max-height: 560px !important;
+  height: auto !important;
+  max-width: 100% !important;
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
+  /* 徹底隱藏原生滾動條，避免雙條 */
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+
+.report-chapter-workspace__chapter-select-popper .el-select-dropdown__wrap::-webkit-scrollbar,
+.report-chapter-workspace__chapter-select-popper .el-scrollbar__wrap::-webkit-scrollbar,
+.report-chapter-workspace__chapter-select-popper
+  .el-scrollbar__wrap--hidden-default::-webkit-scrollbar {
+  width: 0 !important;
+  height: 0 !important;
+  display: none !important;
+}
+
+.report-chapter-workspace__chapter-select-popper .el-scrollbar__view {
+  display: block !important;
+}
+
+.report-chapter-workspace__chapter-select-popper .el-scrollbar__bar.is-horizontal {
+  display: none !important;
+}
+
+.report-chapter-workspace__chapter-select-popper .el-scrollbar__bar.is-vertical {
+  width: 8px !important;
+  right: 4px !important;
+  top: 2px !important;
+  bottom: 2px !important;
+  height: auto !important;
+  opacity: 1 !important;
+  z-index: 10;
+}
+
+.report-chapter-workspace__chapter-select-popper
+  .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: #999 !important;
+  opacity: 1 !important;
+}
+
+.report-chapter-workspace__chapter-select-popper .el-select-dropdown__list {
+  /* 首尾章節向內 5px，避免貼邊 */
+  padding: 5px 0 !important;
+  margin: 0 !important;
+}
+
+.report-chapter-workspace__chapter-select-popper .el-select-dropdown__item {
+  display: flex;
+  align-items: center;
+  height: 40px !important;
+  min-height: 40px !important;
+  max-height: 40px !important;
+  margin: 0 5px;
+  padding: 0 12px !important;
+  line-height: 1.4;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  cursor: grab;
+  user-select: none;
+  font-size: 15px;
+  font-weight: 400;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  color: #303133;
+  transition:
+    background 0.15s ease,
+    box-shadow 0.15s ease,
+    opacity 0.15s ease;
+}
+
+.report-chapter-workspace__chapter-select-popper .el-select-dropdown__item.is-selected {
+  color: var(--report-accent);
+  font-weight: 400;
+}
+
+.report-chapter-workspace__chapter-select-popper .el-select-dropdown__item.is-hovering {
+  background-color: #f5f7fa;
+}
+
+.report-chapter-workspace__chapter-select-popper .el-select-dropdown__item.is-dragging {
+  opacity: 0.5;
+  cursor: grabbing;
+  background: #fff;
+  border-color: var(--report-accent);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+}
+
+.report-chapter-workspace__chapter-select-popper .el-select-dropdown__item.is-drag-over {
+  background: var(--report-accent-soft);
+  box-shadow: inset 0 0 0 1px rgba(197, 51, 85, 0.35);
+}
+
+.report-chapter-workspace__select-sortable-fallback {
+  opacity: 0.5;
+  cursor: grabbing;
+  background: #fff !important;
+  border: 1px solid #c53355 !important;
+  border-radius: 8px !important;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+  list-style: none;
+  z-index: 10001;
+}
+
+/* Element Plus 內置 .el-select-dropdown__footer（border-top + padding），不在業務源碼裏，需在此覆盖 */
+/* // new prompt sections — footer「新增章節」按鈕區 */
+.report-chapter-workspace__chapter-select-popper .el-select-dropdown__footer {
+  border-top: none;
+  padding: 0;
+}
+
+.report-chapter-workspace__chapter-select-popper .report-chapter-workspace__chapter-select-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 10px 12px;
+}
+
+.report-chapter-workspace__chapter-select-popper
+  .report-chapter-workspace__chapter-select-footer-btn {
+  --report-accent: #c53355;
+  --report-accent-soft: #fdf0f2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 120px;
+  height: 32px;
+  padding: 0 14px;
+  border-radius: 4px;
+  border: 1px solid var(--report-accent);
+  background: var(--report-accent);
+  color: #fff;
+  font-size: 15px;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.report-chapter-workspace__chapter-select-popper
+  .report-chapter-workspace__chapter-select-footer-btn:hover {
+  background: #fff;
+  border-color: var(--report-accent);
+  color: var(--report-accent);
+}
+/* // new prompt sections end */
+
+.apply-template-form {
+  --apply-template-label-w: 100px;
+  --apply-template-field-gap: 16px;
+  /* 與章節 card 內邊距一致，保證頂部標籤與下方「章節Prompt」左對齊 */
+  --apply-template-content-inset: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.apply-template-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0 var(--apply-template-content-inset);
+}
+
+.apply-template-field {
+  margin: 0;
+}
+
+.apply-template-field--row {
+  display: grid;
+  grid-template-columns: var(--apply-template-label-w) minmax(0, 1fr);
+  column-gap: var(--apply-template-field-gap);
+  align-items: center;
+  width: 100%;
+}
+
+.apply-template-field--textarea-row {
+  align-items: start;
+}
+
+.apply-template-field--textarea-row .apply-template-label {
+  padding-top: 8px;
+}
+
+.apply-template-label {
+  flex-shrink: 0;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  color: #303133;
+  white-space: nowrap;
+}
+
+.apply-template-label__required {
+  margin-left: 2px;
+  color: #f56c6c;
+}
+
+.apply-template-field__control {
+  min-width: 0;
+  width: 100%;
+}
+
+.apply-template-field__control--lang {
+  width: auto;
+  max-width: 270px;
+}
+
+.apply-template-source {
+  font-size: 14px;
+  color: #303133;
+}
+
+.apply-template-field__input,
+.apply-template-field__textarea {
+  width: 100%;
+}
+
+.apply-template-field--textarea-row .apply-template-field__control {
+  position: relative;
+  padding-bottom: 20px;
+}
+
+.apply-template-field__input :deep(.el-input__wrapper),
+.apply-template-field__textarea :deep(.el-textarea__inner) {
+  font-size: clamp(13px, calc(14 * 100vw / 1920), 14px);
+}
+
+/* textarea 字數統計移出框外独占一行，避免遮挡文字 */
+.apply-template-field__textarea :deep(.el-textarea) {
+  position: relative;
+  overflow: visible;
+}
+
+.apply-template-field__textarea :deep(.el-input__count) {
+  position: absolute !important;
+  top: auto !important;
+  right: 0 !important;
+  bottom: -18px !important;
+  left: auto !important;
+  z-index: 1;
+  display: block;
+  width: auto;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  line-height: 18px;
+  background: transparent !important;
+  font-size: 12px;
+  color: #909399;
+  text-align: right;
+  pointer-events: none;
+}
+
+.apply-template-field__input :deep(.el-input__count) {
+  font-size: 12px;
+  color: #909399;
+  background: transparent;
+}
+
+.apply-template-chapter {
+  padding: var(--apply-template-content-inset, 16px);
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+}
+
+.apply-template-chapter__title {
+  margin: 0 0 16px;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  color: #606266;
+}
+
+.apply-template-process {
+  padding: 20px 16px 16px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+}
+
+.apply-template-process__row {
+  align-items: center;
+}
+
+.apply-template-process__radios {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+.apply-template-process__actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin-top: 8px;
+}
+
+.apply-template-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 120px;
+  height: 32px;
+  padding: 0 20px;
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.apply-template-btn--primary {
+  border: 1px solid #c53355;
+  background: #c53355;
+  color: #fff;
+  font-weight: 500;
+}
+
+.apply-template-btn--primary:hover {
+  background: #fff;
+  color: #c53355;
+}
+
+.apply-template-btn--ghost {
+  border: 1px solid #dcdfe6;
+  background: #fff;
+  color: #606266;
+}
+
+.apply-template-btn--ghost:hover {
+  border-color: #c53355;
+  color: #c53355;
+  background: #fdf0f2;
+}
+
+.apply-template-approval {
+  margin-top: 24px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.apply-template-approval__title {
+  margin: 0;
+  padding: 12px 16px;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  color: #606266;
+  background: transparent;
+  border-bottom: 1px solid #dcdfe6;
+}
+
+.apply-template-approval-table {
+  width: 100%;
+}
+
+.apply-template-approval-table :deep(.el-table--border) {
+  border: none;
+}
+
+.apply-template-approval-table :deep(.el-table--border::before),
+.apply-template-approval-table :deep(.el-table--border::after),
+.apply-template-approval-table :deep(.el-table__inner-wrapper::before),
+.apply-template-approval-table :deep(.el-table__inner-wrapper::after) {
+  display: none;
+}
+
+.apply-template-approval-table :deep(.el-table__border-left-patch) {
+  display: none;
+}
+
+.apply-template-approval-table :deep(.el-table__header th.el-table__cell) {
+  background: rgb(249, 250, 251);
+  color: #606266;
+  font-weight: 500;
+  font-size: 16px;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+}
+
+.apply-template-approval-table :deep(.el-table__body tr.el-table__row) {
+  color: #303133;
+  font-size: 15px;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+}
+</style>
+
+<style>
+.apply-template-overlay {
+  overflow: hidden !important;
+}
+
+.apply-template-dialog.el-dialog {
+  --el-dialog-padding-primary: 0;
+  width: 80% !important;
+  max-width: 80%;
+  margin-top: 5vh;
+  border-radius: 4px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+  /* 給 body / scrollbar 明確高度，避免 max-height + height:auto 導致滾動失效 */
+  height: min(90vh, 900px);
+}
+
+.apply-template-dialog .el-dialog__header,
+.apply-template-dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin: 0;
+  padding: 14px 16px 14px 20px;
+  background: transparent;
+  border-bottom: none;
+  flex-shrink: 0;
+}
+
+.apply-template-dialog__title,
+.apply-template-dialog .el-dialog__title {
+  flex: 1;
+  min-width: 0;
+  color: #303133;
+  font-size: 18px;
+  font-weight: 600;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  line-height: 1.4;
+  text-decoration: none;
+  border-bottom: none;
+  box-shadow: none;
+}
+
+.apply-template-dialog__close {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #303133;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.apply-template-dialog__close:hover {
+  color: #606266;
+}
+
+.apply-template-dialog .el-dialog__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+  padding: 0;
+  background: #fff;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 與編輯器 / 生成頁同款：el-scrollbar，滑塊按比例計算（僅 min-height，勿鎖死 height） */
+.apply-template-dialog__scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.apply-template-dialog__scroll .el-scrollbar__view {
+  padding: 24px 20px;
+  box-sizing: border-box;
+}
+
+.apply-template-dialog__scroll .el-scrollbar__wrap {
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
+  max-height: 100% !important;
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+
+.apply-template-dialog__scroll .el-scrollbar__wrap::-webkit-scrollbar {
+  width: 0 !important;
+  height: 0 !important;
+  display: none !important;
+}
+
+.apply-template-dialog__scroll .el-scrollbar__bar.is-horizontal {
+  display: none !important;
+}
+
+.apply-template-dialog__scroll .el-scrollbar__bar.is-vertical {
+  width: 8px !important;
+  right: 4px !important;
+  top: 2px !important;
+  bottom: 2px !important;
+  height: auto !important;
+  opacity: 1 !important;
+  z-index: 10;
+}
+
+.apply-template-dialog__scroll .el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
+  display: block !important;
+  width: 8px !important;
+  min-height: 50px !important;
+  border-radius: 4px !important;
+  background-color: #999 !important;
+  opacity: 1 !important;
+}
+
+.ai-prompt-generate-dialog__form,
+.ai-prompt-generate-dialog__preview {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.ai-prompt-generate-dialog__field {
+  margin: 0;
+}
+
+.ai-prompt-generate-dialog__field--row {
+  display: grid;
+  grid-template-columns: 100px minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.ai-prompt-generate-dialog__field--textarea {
+  align-items: start;
+}
+
+.ai-prompt-generate-dialog__label {
+  padding-top: 8px;
+  font-size: 15px;
+  font-weight: 500;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  color: #303133;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+.ai-prompt-generate-dialog__control {
+  min-width: 0;
+}
+
+.ai-prompt-generate-dialog__preview-row {
+  display: grid;
+  grid-template-columns: 100px minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.ai-prompt-generate-dialog__preview-row--prompt .ai-prompt-generate-dialog__label {
+  padding-top: 0;
+}
+
+.ai-prompt-generate-dialog__preview-text {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #303133;
+  word-break: break-word;
+}
+
+.ai-prompt-generate-dialog__preview-text--multiline {
+  white-space: pre-wrap;
+}
+
+.ai-prompt-generate-dialog__divider {
+  height: 0;
+  border-top: 1px dashed #dcdfe6;
+}
+
+.ai-prompt-generate-dialog__footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  width: 100%;
+}
+
+.ai-prompt-generate-dialog__footer-btn {
+  min-width: 140px;
+}
+
+.ai-prompt-generate-dialog {
+  --report-accent: #c53355;
+  --report-accent-soft: #fdf0f2;
+}
+
+.ai-prompt-generate-dialog .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;
+  font-size: 15px;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-weight: 400;
+  transition: all 0.2s ease;
+}
+
+.ai-prompt-generate-dialog .template-center-toolbar-btn--primary {
+  border: 1px solid var(--report-accent);
+  background: var(--report-accent);
+  color: #fff;
+}
+
+.ai-prompt-generate-dialog .template-center-toolbar-btn--primary:hover:not(:disabled) {
+  background: #fff;
+  border-color: var(--report-accent);
+  color: var(--report-accent);
+}
+
+.ai-prompt-generate-dialog .template-center-toolbar-btn--outline {
+  border: 1px solid var(--report-accent);
+  color: var(--report-accent);
+  background: #fff;
+}
+
+.ai-prompt-generate-dialog .template-center-toolbar-btn--outline:hover:not(:disabled) {
+  border-color: var(--report-accent);
+  color: var(--report-accent);
+  background: var(--report-accent-soft);
+}
+
+.ai-prompt-generate-dialog.el-dialog {
+  --el-dialog-padding-primary: 0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.ai-prompt-generate-dialog .el-dialog__header,
+.ai-prompt-generate-dialog .report-workflow-dialog__header {
+  border-bottom: none !important;
+}
+
+.ai-prompt-generate-dialog .el-dialog__body {
+  padding: 24px 20px;
+  background: #fff;
+}
+
+.ai-prompt-generate-dialog .el-dialog__footer {
+  padding: 12px 16px 30px;
+  background: #fff;
+  display: flex;
+  justify-content: center;
+}
+
+.ai-prompt-generate-dialog__input .el-input__wrapper,
+.ai-prompt-generate-dialog__textarea .el-textarea__inner {
+  border-radius: 2px;
+}
+
+/* // new prompt sections — 章節下拉：空態空白 / >1024 最小 500px / 長標題換行（集中放置） */
+.report-chapter-workspace__chapter-select-empty {
+  min-height: 48px;
+  background: #fff;
+}
+
+.report-chapter-workspace__chapter-select-popper .el-select-dropdown__empty {
+  padding: 0 !important;
+  color: transparent !important;
+}
+
+@media (min-width: 1025px) {
+  .report-chapter-workspace__chapter-select-popper.el-popper {
+    width: max-content !important;
+    min-width: 500px !important;
+    max-width: min(720px, calc(100vw - 48px)) !important;
+  }
+
+  .report-chapter-workspace__chapter-select-popper .el-select-dropdown {
+    width: 100% !important;
+    min-width: 500px !important;
+    max-width: 100% !important;
+  }
+}
+
+.report-chapter-workspace__chapter-select-popper .el-select-dropdown__item {
+  height: auto !important;
+  min-height: 40px !important;
+  max-height: none !important;
+  align-items: flex-start !important;
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
+  white-space: normal !important;
+}
+
+.report-chapter-workspace__chapter-select-popper .report-chapter-workspace__chapter-option {
+  align-items: flex-start;
+}
+
+.report-chapter-workspace__chapter-select-popper .report-chapter-workspace__chapter-option-title {
+  overflow: visible;
+  text-overflow: unset;
+  white-space: normal;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  line-height: 1.4;
+}
+
+.report-chapter-workspace__chapter-select-popper .report-chapter-workspace__sort-handle,
+.report-chapter-workspace__chapter-select-popper .report-chapter-workspace__chapter-option-status {
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+/* // new prompt sections end */
+</style>