aegon-dangerious 1.0.0

package/build-report/components/reportEdit.vue

@@ -0,0 +1,334 @@
+<template>
+  <div ref="pageRef" class="report-edit-page" :class="{
+    'is-generating': currentStep === 'generating',
+    'is-prompt': currentStep === 'prompt',
+    'is-sources-more-open': sourcesMoreOpen,
+  }">
+    <ReportGeneratingPanel v-if="currentStep === 'generating'" class="report-edit-page__generating"
+      @enter-editing="handleEnterEditing" />
+
+    <template v-else>
+      <ReportWorkflowSidebar class="report-edit-page__sidebar" :use-more-overlay="true"
+        @show-more="openSourcesMore" />
+
+      <main ref="mainRef" class="report-edit-page__main report-edit-page__main--anchored">
+        <ReportTemplatePicker v-if="currentStep === 'select'" @select="handleSelectTemplate" />
+
+        <ReportTemplateDetail v-else-if="currentStep === 'detail' && selectedTemplate" :template="selectedTemplate"
+          @back="goBackToSelect" @generate="goGenerating" />
+
+        <ReportChapterWorkspace v-else-if="currentStep === 'prompt'" @generate-report="openGenerateSettings"
+          @back-to-chapter-edit="backToChapterEdit" />
+
+        <ReportSourcesMoreOverlay v-if="sourcesMoreOpen" ref="sourcesMoreOverlayRef"
+          :parent-label="sourcesOverlayParentLabel" @close="closeSourcesMore" />
+      </main>
+
+      <template v-if="currentStep === 'prompt'">
+        <ReportPromptPanel v-if="currentRightPanel === 'prompt'" class="report-edit-page__prompt" />
+        <div v-else class="report-edit-page__prompt report-edit-page__right-stack">
+          <ReportGenerateSettingsPanel @generate="goGenerating" />
+          <ReportHistoryPanel />
+        </div>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { computed, defineAsyncComponent, nextTick, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import type { ReportTemplateCard } from '../report-template-data'
+import { useReportWorkflow } from '../useReportWorkflow'
+import {
+  createReportEditRouteSyncActions,
+  navigateToReportEdit,
+  parsePromptRightPanel,
+  parseReportEditStep,
+  syncWorkflowFromReportEditRoute,
+} from '../utils/report-edit-route'
+import ReportGenerateSettingsPanel from './ReportGenerateSettingsPanel.vue'
+import ReportHistoryPanel from './ReportHistoryPanel.vue'
+import ReportTemplateDetail from './ReportTemplateDetail.vue'
+import ReportTemplatePicker from './ReportTemplatePicker.vue'
+import ReportSourcesMoreOverlay from './ReportSourcesMoreOverlay.vue'
+import ReportWorkflowSidebar from './ReportWorkflowSidebar.vue'
+
+type ReportSourcesMoreOverlayExpose = {
+  resetBodyScroll: () => void
+}
+
+const router = useRouter()
+const route = useRoute()
+const workflow = useReportWorkflow()
+const routeSyncActions = createReportEditRouteSyncActions(workflow)
+
+const {
+  loadDraftFromSession,
+  loadTemplateFromSession,
+  setSelectedTemplate,
+  selectedTemplate,
+  sourceFiles,
+} = workflow
+
+const currentStep = computed(() => parseReportEditStep(route) ?? 'select')
+const currentRightPanel = computed(() => parsePromptRightPanel(route))
+const sourcesMoreOpen = ref(false)
+const pageRef = ref<HTMLElement | null>(null)
+const mainRef = ref<HTMLElement | null>(null)
+const sourcesMoreOverlayRef = ref<ReportSourcesMoreOverlayExpose | null>(null)
+
+const sourcesOverlayParentLabel = computed(() => {
+  switch (currentStep.value) {
+    case 'detail':
+      return '模板配置'
+    case 'prompt':
+      return '章節編輯'
+    default:
+      return '選擇模板'
+  }
+})
+
+const ReportGeneratingPanel = defineAsyncComponent(() => import('./ReportGeneratingPanel.vue'))
+const ReportChapterWorkspace = defineAsyncComponent(() => import('./ReportChapterWorkspace.vue'))
+const ReportPromptPanel = defineAsyncComponent(() => import('./ReportPromptPanel.vue'))
+
+function syncFromRoute(target = route) {
+  syncWorkflowFromReportEditRoute(target, routeSyncActions)
+}
+
+watch(
+  () => [
+    route.query.pageName,
+    route.query.step,
+    route.query.templateId,
+    route.query.rightPanel,
+  ] as const,
+  () => syncFromRoute(),
+  { immediate: true },
+)
+
+async function navigateStep(
+  step: Parameters<typeof navigateToReportEdit>[1],
+  templateId?: string,
+  rightPanel?: Parameters<typeof navigateToReportEdit>[4],
+) {
+  await navigateToReportEdit(router, step, templateId, true, rightPanel)
+  syncFromRoute()
+}
+
+function handleSelectTemplate(template: ReportTemplateCard) {
+  setSelectedTemplate(template)
+  void navigateStep('detail', template.id)
+}
+
+function goBackToSelect() {
+  void navigateStep('select')
+}
+
+function openGenerateSettings() {
+  if (!sourceFiles.value.length) {
+    ElMessage.warning('請至少添加一個信息源文件')
+    return
+  }
+  void navigateStep('prompt', selectedTemplate.value?.id, 'settings')
+}
+
+function backToChapterEdit() {
+  void navigateStep('prompt', selectedTemplate.value?.id, 'prompt')
+}
+
+function goGenerating() {
+  void navigateStep('generating', selectedTemplate.value?.id)
+}
+
+function handleEnterEditing() {
+  loadTemplateFromSession()
+  void navigateStep('prompt', selectedTemplate.value?.id)
+}
+
+function ensurePromptTemplate() {
+  if (currentStep.value !== 'prompt') return
+  if (!selectedTemplate.value) {
+    loadTemplateFromSession()
+  }
+  if (!selectedTemplate.value) {
+    void navigateStep('select')
+  }
+}
+
+function closeSourcesMore() {
+  sourcesMoreOpen.value = false
+}
+
+function openSourcesMore() {
+  sourcesMoreOpen.value = true
+
+  void nextTick(() => {
+    sourcesMoreOverlayRef.value?.resetBodyScroll()
+
+    const page = pageRef.value
+    const main = mainRef.value
+    if (!page || !main) return
+
+    const pageRect = page.getBoundingClientRect()
+    const mainRect = main.getBoundingClientRect()
+    const delta = mainRect.top - pageRect.top
+
+    if (Math.abs(delta) <= 1) return
+
+    page.scrollTo({
+      top: Math.max(0, page.scrollTop + delta),
+      behavior: 'auto',
+    })
+  })
+}
+
+onMounted(() => {
+  loadDraftFromSession()
+  loadTemplateFromSession()
+  syncFromRoute()
+  ensurePromptTemplate()
+
+  if (currentStep.value === 'detail' && !selectedTemplate.value) {
+    void navigateStep('select')
+  }
+})
+
+watch(currentStep, () => {
+  closeSourcesMore()
+  ensurePromptTemplate()
+})
+</script>
+
+<style scoped>
+.report-edit-page {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 8fr);
+  gap: 20px;
+  box-sizing: border-box;
+  align-items: stretch;
+  min-height: calc(100dvh - 48px);
+  max-height: 100dvh;
+  padding: 24px 30px;
+  overflow-y: auto;
+  background: #fff;
+}
+
+.report-edit-page.is-generating {
+  display: block;
+  grid-template-columns: none;
+  gap: 0;
+  padding: 0;
+  max-height: none;
+  min-height: 100dvh;
+  overflow: hidden;
+}
+
+.report-edit-page.is-prompt {
+  --report-edit-border: #ebeef5;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 6fr) minmax(0, 2fr);
+  align-items: stretch;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.report-edit-page.is-prompt .report-edit-page__main {
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100dvh - 96px);
+  height: 100%;
+  padding: 16px 20px;
+  border: 1px solid var(--report-edit-border);
+  overflow: visible;
+}
+
+.report-edit-page.is-prompt .report-edit-page__main>.report-chapter-workspace {
+  flex: 1;
+  min-height: 0;
+}
+
+.report-edit-page.is-prompt .report-edit-page__prompt,
+.report-edit-page.is-prompt .report-edit-page__right-stack {
+  min-height: calc(100dvh - 96px);
+  height: 100%;
+  overflow: visible;
+}
+
+.report-edit-page.is-prompt .report-edit-page__prompt:has(.report-prompt-panel.is-compact) {
+  min-height: 0;
+  height: auto;
+  align-self: flex-start;
+}
+
+.report-edit-page__right-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  align-self: stretch;
+  min-width: 0;
+  overflow-y: auto;
+}
+
+.report-edit-page__right-stack> :first-child {
+  flex: 1;
+  min-height: 0;
+}
+
+.report-edit-page.is-prompt .report-edit-page__sidebar {
+  min-height: calc(100dvh - 96px);
+  height: 100%;
+  overflow: visible;
+}
+
+.report-edit-page__generating {
+  min-height: 100dvh;
+}
+
+.report-edit-page__sidebar {
+  align-self: stretch;
+  min-width: 0;
+  min-height: 0;
+  overflow: visible;
+}
+
+.report-edit-page__main {
+  min-width: 0;
+  min-height: calc(100dvh - 48px);
+  border-radius: 8px;
+  background: #fff;
+  box-sizing: border-box;
+}
+
+.report-edit-page__main--anchored {
+  position: relative;
+}
+
+.report-edit-page.is-sources-more-open {
+  overflow: hidden;
+}
+
+.report-edit-page.is-sources-more-open .report-edit-page__main--anchored {
+  min-height: calc(100dvh - 96px);
+}
+
+.report-edit-page__toolbar {
+  margin-bottom: 12px;
+}
+
+.report-edit-page__prompt {
+  align-self: stretch;
+  min-width: 0;
+  min-height: calc(100dvh - 48px);
+}
+
+@media (max-width: 1100px) {
+
+  .report-edit-page,
+  .report-edit-page.is-prompt {
+    grid-template-columns: 1fr;
+    max-height: none;
+  }
+}
+</style>