aegon-dangerious 1.0.0

package/build-report/components/ReportConfigPanel.vue

@@ -0,0 +1,609 @@
+<template>
+  <ReportCollapsibleSection ref="sectionRef" v-model:open="panelOpen" title="報告配置"
+    @before-collapse="handleBeforeCollapse">
+    <div class="report-config-panel">
+      <div class="report-config-field">
+        <span class="report-config-field__label">名稱</span>
+        <span class="report-config-field__value">{{ displayName }}</span>
+      </div>
+
+      <div ref="modelFieldRef" class="report-config-field report-config-field--editable">
+        <span class="report-config-field__label">模型</span>
+        <span class="report-config-field__value">{{ displayModel }}</span>
+        <button ref="modelEditBtnRef" type="button" class="report-config-field__edit" aria-label="編輯模型"
+          @click.stop="openFieldEdit('model')">
+          <el-icon>
+            <Edit />
+          </el-icon>
+        </button>
+      </div>
+
+      <div ref="researchFieldRef" class="report-config-field report-config-field--editable">
+        <span class="report-config-field__label">調研主要出發點</span>
+        <span class="report-config-field__value">{{ draft.researchFocus || '—' }}</span>
+        <button ref="researchEditBtnRef" type="button" class="report-config-field__edit" aria-label="編輯調研主要出發點"
+          @click.stop="openFieldEdit('research')">
+          <el-icon>
+            <Edit />
+          </el-icon>
+        </button>
+      </div>
+
+      <div class="report-config-field report-config-field--readonly">
+        <span class="report-config-field__label">年份</span>
+        <span class="report-config-field__value">{{ draft.year || '—' }}</span>
+      </div>
+
+      <div ref="languageFieldRef" class="report-config-field report-config-field--editable">
+        <span class="report-config-field__label">報告語言</span>
+        <span class="report-config-field__value">{{ languageLabel }}</span>
+        <button ref="languageEditBtnRef" type="button" class="report-config-field__edit" aria-label="編輯報告語言"
+          @click.stop="openFieldEdit('language')">
+          <el-icon>
+            <Edit />
+          </el-icon>
+        </button>
+      </div>
+
+      <button type="button" class="report-config-advanced-toggle" @click="advancedOpen = !advancedOpen">
+        <span>進階參數</span>
+        <span class="report-config-advanced-toggle__arrow" :class="{ 'is-open': advancedOpen }" aria-hidden="true" />
+      </button>
+
+      <div v-show="advancedOpen" class="report-config-advanced">
+        <div class="report-config-field report-config-field--stack">
+          <span class="report-config-field__label">搜尋模式</span>
+          <el-select v-model="advancedBuffers.searchMode" class="report-config-editor__select" size="small"
+            @change="applyAdvanced('searchMode', advancedBuffers.searchMode)">
+            <el-option v-for="mode in searchModeOptions" :key="mode" :label="mode" :value="mode" />
+          </el-select>
+        </div>
+        <div class="report-config-field report-config-field--stack">
+          <span class="report-config-field__label">每章節字數</span>
+          <el-input v-model="advancedBuffers.wordsPerChapter" size="small" placeholder="50-5000"
+            @blur="applyWordsPerChapter" />
+        </div>
+        <div class="report-config-field report-config-field--stack report-config-field--slider">
+          <span class="report-config-field__label">權重</span>
+          <div class="report-config-slider">
+            <el-slider v-model="advancedBuffers.weight" :min="0" :max="1" :step="0.1" :show-tooltip="false"
+              @change="applyAdvanced('weight', advancedBuffers.weight)" />
+            <span class="report-config-slider__num">{{ advancedBuffers.weight }}</span>
+          </div>
+        </div>
+        <div class="report-config-field report-config-field--stack">
+          <span class="report-config-field__label">Rerank</span>
+          <el-switch v-model="advancedBuffers.rerank" size="small" class="report-config-switch"
+            @change="applyAdvanced('rerank', advancedBuffers.rerank)" />
+        </div>
+        <p v-if="draft.searchMode === 'Vector Search'" class="report-config-advanced__hint">
+          搜尋模式為「Vector Search」時，權重與 Rerank 相關參數將被忽略。
+        </p>
+      </div>
+    </div>
+  </ReportCollapsibleSection>
+
+  <el-popover :visible="editModelOpen" :virtual-ref="modelFieldRef" placement="bottom-start" :width="popoverWidth"
+    :popper-options="popperOptions" :popper-style="modelPopperStyle" popper-class="report-config-popover"
+    :transition="popoverInstant ? 'report-config-popover-instant' : 'report-config-popover-fade'"
+    :gpu-acceleration="false" :teleported="true">
+    <div class="report-config-editor">
+      <el-select v-model="editBuffers.model" class="report-config-editor__select" filterable allow-create
+        default-first-option placeholder="">
+        <el-option v-for="item in modelOptions" :key="item" :label="item" :value="item" />
+      </el-select>
+      <div class="report-config-editor__actions">
+        <button type="button" class="report-config-editor__btn" @click="editModelOpen = false">取消</button>
+        <button type="button" class="report-config-editor__btn report-config-editor__btn--primary"
+          @click="applyField('model', editBuffers.model, () => (editModelOpen = false))">
+          確認
+        </button>
+      </div>
+    </div>
+  </el-popover>
+
+  <el-popover :visible="editResearchOpen" :virtual-ref="researchFieldRef" placement="bottom-start"
+    :width="popoverWidth" :popper-options="popperOptions" :popper-style="researchPopperStyle"
+    popper-class="report-config-popover" :transition="popoverInstant ? 'report-config-popover-instant' : 'report-config-popover-fade'"
+    :gpu-acceleration="false" :teleported="true">
+    <div class="report-config-editor">
+      <el-select v-model="editBuffers.researchFocus" class="report-config-editor__select" filterable allow-create
+        default-first-option clearable placeholder="">
+        <el-option v-for="item in researchFocusOptions" :key="item" :label="item" :value="item" />
+      </el-select>
+      <div class="report-config-editor__actions">
+        <button type="button" class="report-config-editor__btn" @click="editResearchOpen = false">取消</button>
+        <button type="button" class="report-config-editor__btn report-config-editor__btn--primary"
+          @click="applyField('researchFocus', editBuffers.researchFocus, () => (editResearchOpen = false))">
+          確認
+        </button>
+      </div>
+    </div>
+  </el-popover>
+
+  <el-popover :visible="editLanguageOpen" :virtual-ref="languageFieldRef" placement="bottom-start"
+    :width="popoverWidth" :popper-options="popperOptions" :popper-style="languagePopperStyle"
+    popper-class="report-config-popover" :transition="popoverInstant ? 'report-config-popover-instant' : 'report-config-popover-fade'"
+    :gpu-acceleration="false" :teleported="true">
+    <div class="report-config-editor">
+      <el-select v-model="editBuffers.language" class="report-config-editor__select" placeholder="">
+        <el-option v-for="item in languageOptions" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+      <div class="report-config-editor__actions">
+        <button type="button" class="report-config-editor__btn" @click="editLanguageOpen = false">取消</button>
+        <button type="button" class="report-config-editor__btn report-config-editor__btn--primary"
+          @click="applyField('language', editBuffers.language, () => (editLanguageOpen = false))">
+          確認
+        </button>
+      </div>
+    </div>
+  </el-popover>
+</template>
+
+<script lang="ts">
+export const DEFAULT_REPORT_MODEL = 'gpt-666'
+
+export const MODEL_OPTIONS = ['gpt-666', 'GPT-4o', 'GPT-4.1', 'Claude 3.5 Sonnet', 'Qwen-Max'] as const
+
+export const RESEARCH_FOCUS_OPTIONS = ['中國香港', '中國內地', '東南亞', '歐美市場'] as const
+
+export const LANGUAGE_OPTIONS = [
+  { value: 'zh-Hant', label: '繁體中文' },
+  { value: 'zh-Hans', label: '簡體中文' },
+  { value: 'en', label: 'English' },
+] as const
+
+export const SEARCH_MODE_OPTIONS = ['Hybrid Search', 'Vector Search'] as const
+</script>
+
+<script setup lang="ts">
+import { Edit } from '@element-plus/icons-vue'
+import { ElIcon, ElInput, ElOption, ElPopover, ElSelect, ElSlider, ElSwitch } from 'element-plus'
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { useReportWorkflow } from '../useReportWorkflow'
+import ReportCollapsibleSection from './ReportCollapsibleSection.vue'
+
+const WORDS_MIN = 50
+const WORDS_MAX = 5000
+
+const { draft, patchDraft } = useReportWorkflow()
+
+const panelOpen = ref(true)
+const advancedOpen = ref(false)
+const editModelOpen = ref(false)
+const editResearchOpen = ref(false)
+const editLanguageOpen = ref(false)
+const popoverInstant = ref(false)
+
+const modelFieldRef = ref<HTMLElement | null>(null)
+const researchFieldRef = ref<HTMLElement | null>(null)
+const languageFieldRef = ref<HTMLElement | null>(null)
+const modelEditBtnRef = ref<HTMLElement | null>(null)
+const researchEditBtnRef = ref<HTMLElement | null>(null)
+const languageEditBtnRef = ref<HTMLElement | null>(null)
+const sectionRef = ref<InstanceType<typeof ReportCollapsibleSection> | null>(null)
+
+const popoverWidthPx = ref(240)
+const arrowAlignKey = ref(0)
+const popoverWidth = computed(() => popoverWidthPx.value)
+
+function getSectionContentWidth() {
+  const sectionEl = sectionRef.value?.rootRef
+  if (!sectionEl) return 240
+  const styles = getComputedStyle(sectionEl)
+  const paddingX = parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight)
+  return Math.round(sectionEl.clientWidth - paddingX)
+}
+
+function getArrowPopperStyle(editBtn: HTMLElement | null): Record<string, string> {
+  void arrowAlignKey.value
+  void panelOpen.value
+  const sectionEl = sectionRef.value?.rootRef
+  if (!editBtn || !sectionEl) return {}
+  const sectionRect = sectionEl.getBoundingClientRect()
+  const paddingLeft = parseFloat(getComputedStyle(sectionEl).paddingLeft)
+  const btnRect = editBtn.getBoundingClientRect()
+  const left = btnRect.left + btnRect.width / 2 - sectionRect.left - paddingLeft - 8
+  return { '--report-config-arrow-left': `${left}px` }
+}
+
+const modelPopperStyle = computed(() => getArrowPopperStyle(modelEditBtnRef.value))
+
+const researchPopperStyle = computed(() => getArrowPopperStyle(researchEditBtnRef.value))
+
+const languagePopperStyle = computed(() => getArrowPopperStyle(languageEditBtnRef.value))
+
+const popperOptions = computed(() => {
+  const boundary = sectionRef.value?.rootRef
+  return {
+    modifiers: [
+      {
+        name: 'preventOverflow',
+        options: {
+          boundary: boundary ?? 'viewport',
+          padding: 0,
+          altAxis: true,
+        },
+      },
+      {
+        name: 'flip',
+        enabled: false,
+      },
+    ],
+  }
+})
+
+function syncPopoverWidth() {
+  popoverWidthPx.value = getSectionContentWidth()
+  arrowAlignKey.value += 1
+}
+
+function hasOpenFieldEdits() {
+  return editModelOpen.value || editResearchOpen.value || editLanguageOpen.value
+}
+
+function closeAllFieldEdits() {
+  editModelOpen.value = false
+  editResearchOpen.value = false
+  editLanguageOpen.value = false
+}
+
+function handleBeforeCollapse(done: (hadOpenOverlays: boolean) => void) {
+  const hadOpen = hasOpenFieldEdits()
+  if (hadOpen) {
+    popoverInstant.value = true
+    closeAllFieldEdits()
+    window.setTimeout(() => {
+      popoverInstant.value = false
+    }, 320)
+  }
+  done(hadOpen)
+}
+
+type EditableField = 'model' | 'research' | 'language'
+
+function openFieldEdit(field: EditableField) {
+  syncPopoverWidth()
+  editModelOpen.value = field === 'model' ? !editModelOpen.value : false
+  editResearchOpen.value = field === 'research' ? !editResearchOpen.value : false
+  editLanguageOpen.value = field === 'language' ? !editLanguageOpen.value : false
+  if (field === 'model' ? editModelOpen.value : field === 'research' ? editResearchOpen.value : editLanguageOpen.value) {
+    void nextTick(() => {
+      arrowAlignKey.value += 1
+    })
+  }
+}
+
+watch(panelOpen, (open) => {
+  if (!open) closeAllFieldEdits()
+})
+
+let sectionResizeObserver: ResizeObserver | null = null
+
+onMounted(() => {
+  void nextTick(() => {
+    syncPopoverWidth()
+    const sectionEl = sectionRef.value?.rootRef
+    if (sectionEl) {
+      sectionResizeObserver = new ResizeObserver(() => syncPopoverWidth())
+      sectionResizeObserver.observe(sectionEl)
+    }
+  })
+  window.addEventListener('resize', syncPopoverWidth)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', syncPopoverWidth)
+  sectionResizeObserver?.disconnect()
+})
+
+const modelOptions = MODEL_OPTIONS
+const researchFocusOptions = RESEARCH_FOCUS_OPTIONS
+const languageOptions = LANGUAGE_OPTIONS
+const searchModeOptions = SEARCH_MODE_OPTIONS
+
+const editBuffers = reactive({
+  model: DEFAULT_REPORT_MODEL,
+  researchFocus: '',
+  language: 'zh-Hant',
+})
+
+const advancedBuffers = reactive({
+  searchMode: 'Hybrid Search',
+  wordsPerChapter: '',
+  weight: 0.5,
+  rerank: true,
+})
+
+const displayName = computed(() => draft.reportName || '—')
+const displayModel = computed(() => draft.model || DEFAULT_REPORT_MODEL)
+
+const languageLabel = computed(() => {
+  const found = LANGUAGE_OPTIONS.find((item) => item.value === draft.language)
+  return found?.label ?? '繁體中文'
+})
+
+function syncBuffersFromDraft() {
+  editBuffers.model = draft.model || DEFAULT_REPORT_MODEL
+  editBuffers.researchFocus = draft.researchFocus
+  editBuffers.language = draft.language || 'zh-Hant'
+  advancedBuffers.searchMode = draft.searchMode
+  advancedBuffers.wordsPerChapter = draft.wordsPerChapter
+  advancedBuffers.weight = draft.weight
+  advancedBuffers.rerank = draft.rerank
+}
+
+watch(
+  () => [editModelOpen.value, editResearchOpen.value, editLanguageOpen.value] as const,
+  ([modelOpen, researchOpen, languageOpen]) => {
+    if (modelOpen || researchOpen || languageOpen) syncBuffersFromDraft()
+  },
+)
+
+watch(advancedOpen, (open) => {
+  if (open) syncBuffersFromDraft()
+})
+
+syncBuffersFromDraft()
+
+function applyField<K extends 'model' | 'researchFocus' | 'language'>(
+  key: K,
+  value: (typeof editBuffers)[K],
+  close: () => void,
+) {
+  patchDraft({ [key]: value })
+  close()
+}
+
+function applyAdvanced<K extends 'searchMode' | 'weight' | 'rerank'>(
+  key: K,
+  value: (typeof advancedBuffers)[K],
+) {
+  patchDraft({ [key]: value })
+}
+
+function applyWordsPerChapter() {
+  const raw = advancedBuffers.wordsPerChapter.trim()
+  if (!raw) {
+    patchDraft({ wordsPerChapter: '' })
+    return
+  }
+  const value = Math.round(Number(raw))
+  if (Number.isNaN(value)) {
+    advancedBuffers.wordsPerChapter = ''
+    patchDraft({ wordsPerChapter: '' })
+    return
+  }
+  const clamped = Math.min(WORDS_MAX, Math.max(WORDS_MIN, value))
+  advancedBuffers.wordsPerChapter = String(clamped)
+  patchDraft({ wordsPerChapter: String(clamped) })
+}
+</script>
+
+<style scoped>
+.report-config-panel {
+  box-sizing: border-box;
+}
+
+.report-config-panel__title {
+  margin: 0 0 4px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.report-config-panel__subtitle {
+  margin: 0 0 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.report-config-field {
+  display: grid;
+  grid-template-columns: 88px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  height: 40px;
+  padding: 0;
+  font-size: 14px;
+  font-weight: 400;
+  color: auto;
+  box-sizing: border-box;
+}
+
+.report-config-field--readonly {
+  grid-template-columns: 88px minmax(0, 1fr);
+}
+
+.report-config-field--editable {
+  width: 100%;
+  cursor: default;
+}
+
+.report-config-field--stack {
+  grid-template-columns: 1fr;
+  gap: 6px;
+  height: auto;
+  min-height: 40px;
+  padding: 8px 0;
+  font-size: 13px;
+}
+
+.report-config-field--slider {
+  align-items: flex-start;
+}
+
+.report-config-field__label {
+  color: auto;
+  font-size: 14px;
+  font-weight: 400;
+  white-space: nowrap;
+}
+
+.report-config-field__value {
+  text-align: right;
+  color: auto;
+  font-size: 14px;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.report-config-field__edit {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: #606266;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.report-config-field__edit:hover {
+  color: #c53355;
+}
+
+.report-config-advanced-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 10px;
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 13px;
+  font-weight: 700;
+  color: #1a1a1a;
+  cursor: pointer;
+}
+
+.report-config-advanced-toggle__arrow {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 7px solid #c53355;
+  transition: transform 0.2s ease;
+}
+
+.report-config-advanced-toggle__arrow.is-open {
+  transform: rotate(180deg);
+}
+
+.report-config-advanced {
+  padding-top: 4px;
+}
+
+.report-config-advanced__hint {
+  margin: 4px 0 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #86909c;
+}
+
+.report-config-editor__select {
+  width: 100%;
+}
+
+.report-config-editor__select :deep(.el-select__wrapper) {
+  min-height: 32px;
+}
+
+.report-config-editor__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.report-config-editor__btn {
+  min-width: 72px;
+  padding: 6px 10px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background: #fff;
+  font-size: 12px;
+  color: #606266;
+  cursor: pointer;
+}
+
+.report-config-editor__btn--primary {
+  border-color: #c53355;
+  background: #c53355;
+  color: #fff;
+}
+
+.report-config-editor__btn--primary:hover {
+  background: #fff;
+  color: #c53355;
+}
+
+.report-config-slider {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.report-config-slider :deep(.el-slider) {
+  flex: 1;
+  --el-slider-main-bg-color: #c53355;
+}
+
+.report-config-slider__num {
+  width: 28px;
+  font-size: 12px;
+  color: #606266;
+  text-align: right;
+}
+
+.report-config-switch {
+  --el-switch-on-color: #c53355;
+}
+</style>
+
+<style>
+.report-config-popover.el-popover.el-popper {
+  max-width: 100%;
+  padding: 12px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.report-config-popover.el-popper[data-popper-placement^='bottom'] .el-popper__arrow {
+  left: var(--report-config-arrow-left) !important;
+  right: auto !important;
+  top: -6px !important;
+  transform: translateX(-50%) !important;
+}
+
+.report-config-popover.el-popper[data-popper-placement^='bottom'] .el-popper__arrow::before {
+  bottom: -1px;
+}
+
+.report-config-popover-fade-enter-active,
+.report-config-popover-fade-leave-active {
+  transition: opacity 0.12s ease;
+}
+
+.report-config-popover-fade-enter-from,
+.report-config-popover-fade-leave-to {
+  opacity: 0;
+}
+
+.report-config-popover-instant-enter-active,
+.report-config-popover-instant-leave-active {
+  transition: none !important;
+}
+
+.report-config-popover-instant-enter-from,
+.report-config-popover-instant-leave-to {
+  opacity: 0;
+}
+</style>