aegon-dangerious 1.0.0

package/build-report/components/ReportChapterWorkspace.vue

@@ -0,0 +1,923 @@
+<template>
+  <section class="report-chapter-workspace">
+    <header class="report-chapter-workspace__toolbar">
+      <div v-if="isReportSettingsMode" class="report-chapter-workspace__chapter-box">
+        <el-button class="chatbot-report-btn-outline" @click="handleBackToChapterEdit">
+          返回章节编辑
+        </el-button>
+      </div>
+
+      <div v-else ref="chapterBoxRef" class="report-chapter-workspace__chapter-box">
+        <div class="report-chapter-workspace__trigger-wrap">
+          <button type="button" class="report-chapter-workspace__chapter-trigger"
+            :class="{ 'is-open': chapterPanelOpen }" @click="toggleChapterPanel">
+            <span class="report-chapter-workspace__chapter-trigger-text">{{ activeChapterTitle }}</span>
+            <el-icon class="report-chapter-workspace__chapter-trigger-arrow">
+              <ArrowDown />
+            </el-icon>
+          </button>
+
+          <div v-show="chapterPanelOpen" class="report-chapter-workspace__chapter-panel">
+            <div class="report-chapter-workspace__chapter-list-wrap">
+              <ul class="report-chapter-workspace__chapter-list">
+                <li v-for="(title, index) in chapterTitles" :key="`${title}-${index}`"
+                  class="report-chapter-workspace__chapter-item">
+                  <button type="button" class="report-chapter-workspace__chapter-item-btn"
+                    @click="selectChapterFromList(index)">
+                    <span class="report-chapter-workspace__chapter-item-title"
+                      :class="{ 'is-active': index === activeChapterIndex }">
+                      {{ title }}
+                    </span>
+                    <span class="report-chapter-workspace__chapter-item-status">{{ getChapterStatus(index) }}</span>
+                  </button>
+                </li>
+              </ul>
+            </div>
+
+            <div class="report-chapter-workspace__chapter-list-footer">
+              <button type="button" class="report-chapter-workspace__chapter-list-action" @click="openAddChapterDialog">
+                + 新增章節
+              </button>
+              <button type="button" class="report-chapter-workspace__chapter-list-action" @click="openSortChapterDialog">
+                章節排序
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="report-chapter-workspace__toolbar-right">
+        <template v-if="isReportSettingsMode">
+          <el-button class="chatbot-report-btn-primary" @click="handleApplyCreateTemplate">
+            申请创建模板
+          </el-button>
+          <el-button class="chatbot-report-btn-primary chatbot-report-btn-primary--wide" @click="handleViewCoherenceCheck">
+            查看报告连贯性检查结果
+          </el-button>
+          <el-button class="chatbot-report-btn-primary" @click="handleExportWord">
+            导出为 word
+          </el-button>
+        </template>
+
+        <template v-else>
+          <button
+            v-if="chapterEditMode"
+            type="button"
+            class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--outline template-center-toolbar-btn--wide"
+            @click="handleCancelEdit"
+          >
+            取消
+          </button>
+          <button
+            type="button"
+            class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--primary template-center-toolbar-btn--wide"
+            :disabled="!canEditReport"
+            @click="handleEditSave"
+          >
+            {{ chapterEditMode ? '保存' : '編輯/保存' }}
+          </button>
+          <button
+            type="button"
+            class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--primary template-center-toolbar-btn--wide"
+            @click="handleGenerateReport"
+          >
+            生成報告
+          </button>
+        </template>
+      </div>
+    </header>
+
+    <div class="report-chapter-workspace__editor">
+      <ReportChapterPreview
+        :key="editorKey"
+        :chapter-title="activeChapterTitle"
+        :chapter-intro="activeChapterIntro"
+      />
+    </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-chapter-dialog__header" @closed="handleChapterDialogClosed">
+      <template #header>
+        <span class="report-chapter-dialog__title">{{ chapterDialogTitle }}</span>
+      </template>
+
+      <div v-if="chapterDialogMode === 'add'" 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>
+
+        <ReportTemplatePromptField v-model="newChapterForm.prompt" :maxlength="CHAPTER_PROMPT_MAX" :rows="6"
+          label-width="100px" field-gap="16px" layout="row" :chapter-title="newChapterForm.title"
+          :chapter-description="newChapterForm.description" />
+      </div>
+
+      <div v-else class="report-chapter-dialog__sort">
+        <div class="report-chapter-workspace__sort-list-wrap report-chapter-dialog__sort-list-wrap">
+          <ul ref="sortListRef" class="report-chapter-workspace__sort-list">
+            <li v-for="(title, index) in draftChapterTitles" :key="`${title}-${index}`"
+              class="report-chapter-workspace__sort-item">
+              <span class="report-chapter-workspace__sort-handle" aria-hidden="true">
+                <el-icon>
+                  <Sort />
+                </el-icon>
+              </span>
+              <div class="report-chapter-workspace__sort-label" @click="draftActiveIndex = index">
+                <ChapterTitleScroll root-tag="div" :title="title" :active="index === draftActiveIndex" />
+              </div>
+            </li>
+          </ul>
+        </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 v-if="chapterDialogMode === 'add'" type="button"
+            class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--primary report-chapter-dialog__footer-btn"
+            @click="handleAddChapterSubmit">
+            提交並生成章節內容
+          </button>
+          <button v-else type="button"
+            class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--primary report-chapter-dialog__footer-btn"
+            @click="handleSortConfirm">
+            確定
+          </button>
+        </div>
+      </template>
+    </el-dialog>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ArrowDown, Sort } from '@element-plus/icons-vue'
+import { onClickOutside } from '@vueuse/core'
+import { ElButton, ElDialog, ElIcon, ElInput, ElMessage, ElMessageBox } from 'element-plus'
+import Sortable from 'sortablejs'
+import { computed, nextTick, reactive, ref, watch } from 'vue'
+import ReportChapterPreview from './ReportChapterPreview.vue'
+import ChapterTitleScroll from './ChapterTitleScroll.vue'
+import ReportTemplatePromptField from './ReportTemplatePromptField.vue'
+import { useReportWorkflow } from '../useReportWorkflow'
+
+const CHAPTER_PANEL_MAX_ROWS = 14
+const CHAPTER_PANEL_ROW_HEIGHT = 40
+const DEMO_EDITING_CHAPTER_INDEX = 2
+const CHAPTER_TITLE_MAX = 100
+const CHAPTER_DESC_MAX = 1000
+const CHAPTER_PROMPT_MAX = 1300
+
+const INITIAL_CHAPTER_TITLES = [
+  '摘要與本年結論',
+  '行業概覽與景氣判斷',
+  '核心風險指標快照',
+  '驅動因素拆解',
+  '風險點與預警信號',
+  '風控建議與跟進清單',
+  '附錄：參考資料與口徑',
+]
+
+type ChapterDialogMode = 'add' | 'sort'
+
+const {
+  draft,
+  generatedChapterBodies,
+  canEditReport,
+  sourceFiles,
+  promptRightPanel,
+  chapterEditMode,
+  enterChapterEditMode,
+  commitChapterEdit,
+  exitChapterEditMode,
+  isChapterEditDirty,
+} = useReportWorkflow()
+
+const isReportSettingsMode = computed(() => promptRightPanel.value === 'settings')
+
+const emit = defineEmits<{
+  'generate-report': []
+  'back-to-chapter-edit': []
+}>()
+
+const chapterTitles = ref<string[]>([...INITIAL_CHAPTER_TITLES])
+const activeChapterIndex = ref(0)
+
+const chapterBoxRef = ref<HTMLElement | null>(null)
+const chapterPanelOpen = ref(false)
+const chapterDialogVisible = ref(false)
+const chapterDialogMode = ref<ChapterDialogMode>('add')
+const draftChapterTitles = ref<string[]>([])
+const draftActiveIndex = ref(0)
+const sortListRef = ref<HTMLElement | null>(null)
+const newChapterForm = reactive({
+  title: '',
+  description: '',
+  prompt: '',
+})
+let sortableInstance: Sortable | null = null
+
+const chapterDialogTitle = computed(() =>
+  chapterDialogMode.value === 'add' ? '新增章節' : '章節排序',
+)
+
+onClickOutside(chapterBoxRef, () => {
+  if (chapterPanelOpen.value) closeChapterPanel()
+})
+
+watch(
+  () => chapterTitles.value.length,
+  (length) => {
+    if (activeChapterIndex.value >= length) {
+      activeChapterIndex.value = Math.max(0, length - 1)
+    }
+  },
+)
+
+const activeChapterTitle = computed(
+  () => chapterTitles.value[activeChapterIndex.value] ?? '章節內容',
+)
+
+function stripHtml(value: string) {
+  return value.replace(/<[^>]+>/g, '').trim()
+}
+
+const activeChapterIntro = computed(() => {
+  const index = activeChapterIndex.value
+  const generated = generatedChapterBodies.value[index]
+  if (generated) return stripHtml(generated)
+
+  if (index === 0) {
+    return `本報告基於「${draft.industry || '目標行業'}」${draft.year}年度調研，從${draft.researchFocus || '核心視角'}出發，對行業風險進行系統性梳理。整體風險可控，但需持續關注景氣波動與政策調整帶來的傳導效應。`
+  }
+
+  return '本章節內容將根據右側 Prompt 配置與資訊源生成。當前展示為演示 Mock 正文，用於預覽打字機輸出與表格排版效果。'
+})
+
+const editorKey = computed(
+  () => `${activeChapterIndex.value}-${activeChapterTitle.value}-${chapterEditMode.value ? 'edit' : 'view'}`,
+)
+
+const sortListMaxHeight = `${CHAPTER_PANEL_MAX_ROWS * CHAPTER_PANEL_ROW_HEIGHT}px`
+
+function destroySortable() {
+  sortableInstance?.destroy()
+  sortableInstance = null
+}
+
+function initSortable() {
+  destroySortable()
+  if (!sortListRef.value) return
+
+  sortableInstance = Sortable.create(sortListRef.value, {
+    handle: '.report-chapter-workspace__sort-handle',
+    animation: 150,
+    onEnd({ oldIndex, newIndex }) {
+      if (oldIndex == null || newIndex == null || oldIndex === newIndex) return
+
+      const next = [...draftChapterTitles.value]
+      const [moved] = next.splice(oldIndex, 1)
+      next.splice(newIndex, 0, moved!)
+      draftChapterTitles.value = next
+
+      if (draftActiveIndex.value === oldIndex) {
+        draftActiveIndex.value = newIndex
+        return
+      }
+
+      if (oldIndex < draftActiveIndex.value && newIndex >= draftActiveIndex.value) {
+        draftActiveIndex.value -= 1
+      } else if (oldIndex > draftActiveIndex.value && newIndex <= draftActiveIndex.value) {
+        draftActiveIndex.value += 1
+      }
+    },
+  })
+}
+
+async function openChapterPanel() {
+  draftChapterTitles.value = [...chapterTitles.value]
+  draftActiveIndex.value = activeChapterIndex.value
+  chapterPanelOpen.value = true
+}
+
+function closeChapterPanel() {
+  chapterPanelOpen.value = false
+}
+
+async function toggleChapterPanel() {
+  if (chapterPanelOpen.value) {
+    closeChapterPanel()
+    return
+  }
+  await openChapterPanel()
+}
+
+function getChapterStatus(index: number) {
+  if (index === activeChapterIndex.value && chapterEditMode.value) {
+    return '編輯中'
+  }
+  if (index === DEMO_EDITING_CHAPTER_INDEX) {
+    return '編輯中'
+  }
+  return '已生成'
+}
+
+function selectChapterFromList(index: number) {
+  activeChapterIndex.value = index
+  closeChapterPanel()
+}
+
+function resetNewChapterForm() {
+  newChapterForm.title = ''
+  newChapterForm.description = ''
+  newChapterForm.prompt = ''
+}
+
+function openAddChapterDialog() {
+  closeChapterPanel()
+  resetNewChapterForm()
+  chapterDialogMode.value = 'add'
+  chapterDialogVisible.value = true
+}
+
+async function openSortChapterDialog() {
+  closeChapterPanel()
+  chapterDialogMode.value = 'sort'
+  draftChapterTitles.value = [...chapterTitles.value]
+  draftActiveIndex.value = activeChapterIndex.value
+  chapterDialogVisible.value = true
+  await nextTick()
+  initSortable()
+}
+
+function closeChapterDialog() {
+  chapterDialogVisible.value = false
+}
+
+function handleChapterDialogClosed() {
+  destroySortable()
+  if (chapterDialogMode.value === 'add') {
+    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
+  }
+
+  chapterTitles.value = [...chapterTitles.value, title]
+  activeChapterIndex.value = chapterTitles.value.length - 1
+  closeChapterDialog()
+  ElMessage.success('章節已提交並生成內容（演示）')
+}
+
+function handleSortConfirm() {
+  chapterTitles.value = [...draftChapterTitles.value]
+  activeChapterIndex.value = draftActiveIndex.value
+  closeChapterDialog()
+  ElMessage.success('章節順序已更新')
+}
+
+function handleGenerateReport() {
+  if (!sourceFiles.value.length) {
+    ElMessage.warning('請至少添加一個信息源文件')
+    return
+  }
+  emit('generate-report')
+}
+
+function handleBackToChapterEdit() {
+  emit('back-to-chapter-edit')
+}
+
+function handleApplyCreateTemplate() {
+  ElMessage.info('申請創建模板（演示）')
+}
+
+function handleViewCoherenceCheck() {
+  ElMessage.info('查看報告連貫性檢查結果（演示）')
+}
+
+function handleExportWord() {
+  ElMessage.info('導出為 Word（演示）')
+}
+
+async function handleCancelEdit() {
+  if (!chapterEditMode.value) return
+
+  if (!isChapterEditDirty()) {
+    exitChapterEditMode(true)
+    return
+  }
+
+  try {
+    await ElMessageBox.confirm(
+      '您已修改部分內容且未保存，確定要進行「取消」的操作嗎？',
+      '提示',
+      {
+        confirmButtonText: '確定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    )
+    exitChapterEditMode(true)
+  } catch {
+    // 用戶取消操作，保持編輯狀態
+  }
+}
+
+function handleEditSave() {
+  if (!chapterEditMode.value) {
+    enterChapterEditMode()
+    return
+  }
+  commitChapterEdit()
+  ElMessage.success('章節內容已保存')
+}
+</script>
+
+<style scoped>
+.report-chapter-workspace {
+  --report-accent: #c53355;
+  --report-accent-soft: #fdf0f2;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+}
+
+.report-chapter-workspace__toolbar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  box-sizing: border-box;
+}
+
+.report-chapter-workspace__chapter-box {
+  position: relative;
+  min-width: 0;
+}
+
+.report-chapter-workspace__toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.report-chapter-workspace__trigger-wrap {
+  position: relative;
+  min-width: 0;
+}
+
+.report-chapter-workspace__chapter-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 220px;
+  min-width: 180px;
+  height: 39px;
+  margin: 0;
+  padding: 0 12px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background: #fff;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition: border-color 0.2s ease, color 0.2s ease;
+}
+
+.report-chapter-workspace__chapter-trigger-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  font-size: 14px;
+  font-weight: 400;
+  color: #606266;
+  transition: color 0.2s ease;
+}
+
+.report-chapter-workspace__chapter-trigger-arrow {
+  flex-shrink: 0;
+  font-size: 14px;
+  color: #c53355;
+  transition: transform 0.2s ease;
+}
+
+.report-chapter-workspace__chapter-trigger:hover,
+.report-chapter-workspace__chapter-trigger.is-open {
+  border-color: #c53355;
+}
+
+.report-chapter-workspace__chapter-trigger:hover .report-chapter-workspace__chapter-trigger-text,
+.report-chapter-workspace__chapter-trigger.is-open .report-chapter-workspace__chapter-trigger-text {
+  color: #c53355;
+}
+
+.report-chapter-workspace__chapter-trigger.is-open .report-chapter-workspace__chapter-trigger-arrow {
+  transform: rotate(180deg);
+}
+
+.report-chapter-workspace__chapter-panel {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 20;
+  width: 220px;
+  padding: 8px 0 10px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background: #fff;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+  box-sizing: border-box;
+}
+
+.report-chapter-workspace__chapter-list-wrap {
+  max-height: v-bind(sortListMaxHeight);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.report-chapter-workspace__chapter-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.report-chapter-workspace__chapter-item {
+  margin: 0;
+  padding: 0;
+}
+
+.report-chapter-workspace__chapter-item-btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  min-height: 36px;
+  margin: 0;
+  padding: 6px 12px;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  box-sizing: border-box;
+  text-align: left;
+  transition: background-color 0.2s ease;
+}
+
+.report-chapter-workspace__chapter-item-btn:hover {
+  background: #f5f7fa;
+}
+
+.report-chapter-workspace__chapter-item-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  color: #303133;
+}
+
+.report-chapter-workspace__chapter-item-title.is-active {
+  color: var(--report-accent);
+  font-weight: 600;
+}
+
+.report-chapter-workspace__chapter-item-status {
+  flex-shrink: 0;
+  font-size: 13px;
+  color: #909399;
+  white-space: nowrap;
+}
+
+.report-chapter-workspace__chapter-list-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 4px;
+  padding: 8px 12px 0;
+  border-top: 1px solid #ebeef5;
+}
+
+.report-chapter-workspace__chapter-list-action {
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 13px;
+  color: #409eff;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.report-chapter-workspace__chapter-list-action:hover {
+  color: #66b1ff;
+}
+
+.report-chapter-workspace__sort-list-wrap {
+  max-height: v-bind(sortListMaxHeight);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.report-chapter-dialog__sort-list-wrap {
+  padding: 0;
+  max-height: min(560px, 60vh);
+}
+
+.report-chapter-workspace__sort-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.report-chapter-workspace__sort-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 36px;
+  padding: 2px 0;
+}
+
+.report-chapter-workspace__sort-handle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  color: #909399;
+  cursor: grab;
+}
+
+.report-chapter-workspace__sort-handle:active {
+  cursor: grabbing;
+}
+
+.report-chapter-workspace__sort-label {
+  flex: 1;
+  min-width: 0;
+  cursor: pointer;
+}
+
+.report-chapter-workspace__sort-label :deep(.chapter-title-scroll) {
+  width: 100%;
+}
+
+.report-chapter-workspace__editor {
+  flex: 1;
+  min-height: 420px;
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+}
+
+.gen-ai-action-btn,
+.template-center-toolbar-btn {
+  font-size: 15px;
+  font-family: Arial, sans-serif;
+  font-weight: 400;
+}
+
+.template-center-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  box-sizing: border-box;
+  height: 32px;
+  min-width: 120px;
+  padding: 0 14px;
+  border-radius: 4px;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.template-center-toolbar-btn--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: 15px !important;
+  font-family: Arial, sans-serif !important;
+  font-weight: 400;
+}
+
+.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>
+.report-chapter-dialog.el-dialog {
+  --el-dialog-padding-primary: 0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.report-chapter-dialog .el-dialog__header,
+.report-chapter-dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 14px 20px;
+  background: #4a5f7a;
+}
+
+.report-chapter-dialog__title,
+.report-chapter-dialog .el-dialog__title {
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.report-chapter-dialog .el-dialog__body {
+  padding: 24px 20px;
+  background: #fff;
+}
+
+.report-chapter-dialog .el-dialog__footer {
+  padding: 12px 16px 16px;
+  background: #fff;
+  display: flex;
+  justify-content: center;
+}
+
+.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: 14px;
+  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__footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  width: 100%;
+}
+
+.report-chapter-dialog__footer-btn {
+  min-width: 140px;
+}
+</style>
+
+<style src="../styles/report-workflow-dialog.css"></style>