aegon-dangerious 1.0.0

package/build-report/index.vue

@@ -0,0 +1,646 @@
+<template>
+  <ReportEdit
+    v-if="isReportEditView"
+    :key="`${String(route.query.step ?? '')}-${String(route.query.templateId ?? '')}-${String(route.query.rightPanel ?? '')}`"
+  />
+  <div v-else class="report-center-page">
+    <header class="report-center-hero">
+      <h1 class="report-center-hero__title">AI行業分析報告助手</h1>
+      <p class="report-center-hero__subtitle">選擇報告生成參數，確定分析視角</p>
+    </header>
+
+    <el-card class="report-center-board" shadow="never">
+      <!-- 左：參數 -->
+      <section class="report-center-panel report-center-panel--params">
+        <h2 class="report-center-panel__title">基本參數</h2>
+
+        <div class="report-form">
+          <div class="report-form__row">
+            <label class="report-form__label">行業</label>
+            <div class="report-form__control">
+              <el-select v-model="form.industry" class="report-form__select" filterable allow-create
+                default-first-option clearable placeholder="">
+                <el-option v-for="item in industryOptions" :key="item.id" :label="item.name" :value="item.name" />
+              </el-select>
+            </div>
+          </div>
+          <div class="report-form__row">
+            <label class="report-form__label">調研主要出發點</label>
+            <div class="report-form__control">
+              <el-select v-model="form.researchFocus" class="report-form__select" filterable allow-create
+                default-first-option clearable placeholder="">
+                <el-option v-for="item in researchFocusOptions" :key="item.id" :label="item.name" :value="item.name" />
+              </el-select>
+            </div>
+          </div>
+          <div class="report-form__row">
+            <label class="report-form__label">年份</label>
+            <div class="report-form__control">
+              <el-select v-model="form.year" class="report-form__select" placeholder="">
+                <el-option v-for="year in yearOptions" :key="year" :label="year" :value="year" />
+              </el-select>
+            </div>
+          </div>
+          <div class="report-form__row">
+            <label class="report-form__label">報告名稱</label>
+            <div class="report-form__control">
+              <input v-model="form.reportName" type="text" class="report-input" @input="reportNameTouched = true" />
+            </div>
+          </div>
+          <div class="report-form__row">
+            <label class="report-form__label">報告語言</label>
+            <div class="report-form__control report-form__control--radio">
+              <label v-for="lang in languageOptions" :key="lang.value" class="report-radio">
+                <input v-model="form.language" type="radio" :value="lang.value" />
+                <span>{{ lang.label }}</span>
+              </label>
+            </div>
+          </div>
+          <div class="report-form__row report-form__row--textarea">
+            <label class="report-form__label">每章節字數</label>
+            <div class="report-form__control report-form__textarea-box">
+              <el-input v-model="form.wordsPerChapter" type="textarea" :rows="2" resize="none"
+                class="report-form__textarea" placeholder="" @blur="clampWordsPerChapter" />
+              <span class="report-form__textarea-hint">50-5000</span>
+            </div>
+          </div>
+        </div>
+
+        <button type="button" class="report-advanced-toggle" @click="advancedOpen = !advancedOpen">
+          <span>進階參數</span>
+          <span class="report-advanced-toggle__arrow" :class="{ 'is-open': advancedOpen }" aria-hidden="true" />
+        </button>
+
+        <div v-show="advancedOpen" class="report-form report-form--advanced">
+          <div class="report-form__row">
+            <label class="report-form__label">模型</label>
+            <div class="report-form__control">
+              <el-select v-model="form.model" class="report-form__select" filterable allow-create default-first-option
+                clearable placeholder="">
+                <el-option v-for="item in modelOptions" :key="item.id" :label="item.name" :value="item.name" />
+              </el-select>
+            </div>
+          </div>
+          <div class="report-form__row">
+            <label class="report-form__label">搜尋模式</label>
+            <div class="report-form__control">
+              <el-select v-model="form.searchMode" class="report-form__select" placeholder="">
+                <el-option v-for="mode in searchModeOptions" :key="mode" :label="mode" :value="mode" />
+              </el-select>
+            </div>
+          </div>
+          <div class="report-form__row report-form__row--slider">
+            <label class="report-form__label">權重</label>
+            <div class="report-form__control report-form__control--slider">
+              <el-slider v-model="form.weight" :min="0" :max="1" :step="0.1" :show-tooltip="false" />
+              <input v-model.number="form.weight" type="number" min="0" max="1" step="0.1" class="report-slider-num" />
+            </div>
+          </div>
+          <div class="report-form__row">
+            <label class="report-form__label">Rerank</label>
+            <div class="report-form__control">
+              <el-switch v-model="form.rerank" class="report-form__switch" />
+            </div>
+          </div>
+          <div class="report-form__row report-form__row--slider">
+            <label class="report-form__label">Rerank top-N</label>
+            <div class="report-form__control report-form__control--slider">
+              <el-slider v-model="form.rerankTopN" :min="1" :max="20" :step="1" :show-tooltip="false" />
+              <input v-model.number="form.rerankTopN" type="number" min="1" max="20" class="report-slider-num" />
+            </div>
+          </div>
+          <div class="report-form__row report-form__row--slider">
+            <label class="report-form__label">Rerank threshold</label>
+            <div class="report-form__control report-form__control--slider">
+              <el-slider v-model="form.rerankThreshold" :min="0" :max="1" :step="0.1" :show-tooltip="false" />
+              <input v-model.number="form.rerankThreshold" type="number" min="0" max="1" step="0.1"
+                class="report-slider-num" />
+            </div>
+          </div>
+        </div>
+
+        <p v-if="form.searchMode === 'Vector Search'" class="report-form__hint">
+          搜尋模式為「Vector Search」時，權重與 Rerank 相關參數將被忽略。
+        </p>
+      </section>
+
+      <ReportSourcesPanel sync-workflow />
+    </el-card>
+
+    <footer class="report-center-footer">
+      <button type="button" class="app-btn app-btn--wide" @click="selectTemplate">選擇模板</button>
+    </footer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ElInput, ElOption, ElSelect, ElSlider, ElSwitch } from 'element-plus'
+import { computed, reactive, ref, watch } from 'vue'
+import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
+import ReportEdit from './components/reportEdit.vue'
+import ReportSourcesPanel from './components/ReportSourcesPanel.vue'
+import { useReportWorkflow } from './useReportWorkflow'
+import {
+  createReportEditRouteSyncActions,
+  isReportEditRoute,
+  navigateToReportEdit,
+  syncWorkflowFromReportEditRoute,
+} from './utils/report-edit-route'
+
+const WORDS_PER_CHAPTER_MIN = 50
+const WORDS_PER_CHAPTER_MAX = 5000
+
+interface ManagementOption {
+  id: string
+  name: string
+}
+
+const MOCK_INDUSTRIES: ManagementOption[] = [
+  { id: 'ind-1', name: '新能源汽車' },
+  { id: 'ind-2', name: '新能源發電' },
+  { id: 'ind-3', name: '數據中心' },
+  { id: 'ind-4', name: '本港房地產' },
+  { id: 'ind-5', name: '內地房地產' },
+  { id: 'ind-6', name: '香港股票市場' },
+  { id: 'ind-7', name: '戰略新興產業' },
+  { id: 'ind-8', name: '半導體' },
+  { id: 'ind-9', name: '消費電子' },
+  { id: 'ind-10', name: '醫療健康' },
+  { id: 'ind-11', name: '生物醫藥' },
+  { id: 'ind-12', name: '物流運輸' },
+  { id: 'ind-13', name: '航空旅遊' },
+  { id: 'ind-14', name: '零售消費' },
+  { id: 'ind-15', name: '食品飲料' },
+  { id: 'ind-16', name: '化工材料' },
+  { id: 'ind-17', name: '機械裝備' },
+  { id: 'ind-18', name: '建築工程' },
+  { id: 'ind-19', name: '電信運營' },
+  { id: 'ind-20', name: '互聯網科技' },
+]
+
+const MOCK_RESEARCH_POINTS: ManagementOption[] = [
+  { id: 'res-1', name: '中國香港' },
+  { id: 'res-2', name: '中國內地' },
+  { id: 'res-3', name: '東南亞' },
+  { id: 'res-4', name: '歐美市場' },
+]
+
+const route = useRoute()
+const router = useRouter()
+const workflow = useReportWorkflow()
+const isReportEditView = computed(() => isReportEditRoute(route))
+const advancedOpen = ref(false)
+const reportNameTouched = ref(false)
+
+const languageOptions = [
+  { value: 'zh-Hant', label: '繁體中文' },
+  { value: 'zh-Hans', label: '簡體中文' },
+  { value: 'en', label: 'English' },
+] as const
+
+const searchModeOptions = ['Hybrid Search', 'Vector Search'] as const
+
+const modelOptions = [
+  { id: 'model-1', name: 'GPT-4o' },
+  { id: 'model-2', name: 'GPT-4.1' },
+  { id: 'model-3', name: 'Claude 3.5 Sonnet' },
+  { id: 'model-4', name: 'Qwen-Max' },
+] as const
+
+const industryOptions = MOCK_INDUSTRIES
+const researchFocusOptions = MOCK_RESEARCH_POINTS
+
+const yearOptions = computed(() => {
+  const currentYear = new Date().getFullYear()
+  return [currentYear - 2, currentYear - 1, currentYear].map((year) => String(year))
+})
+
+function buildReportName(industry: string, year: string) {
+  const name = industry.trim()
+  const y = year.trim()
+  if (!name || !y) return ''
+  return `${name}行業調研報告 (${y}年)`
+}
+
+const form = reactive({
+  industry: '',
+  researchFocus: '',
+  year: String(new Date().getFullYear()),
+  reportName: '',
+  language: 'zh-Hant',
+  wordsPerChapter: '',
+  model: '',
+  searchMode: 'Hybrid Search',
+  weight: 0.5,
+  rerank: true,
+  rerankTopN: 5,
+  rerankThreshold: 0.5,
+})
+
+watch(
+  () => [form.industry, form.year] as const,
+  ([industry, year]) => {
+    if (reportNameTouched.value) return
+    form.reportName = buildReportName(industry, year)
+  },
+  { immediate: true },
+)
+
+function clampWordsPerChapter() {
+  const raw = form.wordsPerChapter.trim()
+  if (!raw) {
+    form.wordsPerChapter = ''
+    return
+  }
+  const value = Math.round(Number(raw))
+  if (Number.isNaN(value)) {
+    form.wordsPerChapter = ''
+    return
+  }
+  if (value < WORDS_PER_CHAPTER_MIN) {
+    form.wordsPerChapter = String(WORDS_PER_CHAPTER_MIN)
+  } else if (value > WORDS_PER_CHAPTER_MAX) {
+    form.wordsPerChapter = String(WORDS_PER_CHAPTER_MAX)
+  } else {
+    form.wordsPerChapter = String(value)
+  }
+}
+
+function getSelectedSourceCount() {
+  return workflow.sourceFiles.value.filter((file) => file.selected).length
+}
+
+function selectTemplate() {
+  workflow.patchDraft({
+    industry: form.industry,
+    researchFocus: form.researchFocus,
+    year: form.year,
+    reportName: form.reportName,
+    language: form.language,
+    wordsPerChapter: form.wordsPerChapter,
+    model: form.model,
+    searchMode: form.searchMode,
+    weight: form.weight,
+    rerank: form.rerank,
+    rerankTopN: form.rerankTopN,
+    rerankThreshold: form.rerankThreshold,
+    sourceCount: getSelectedSourceCount(),
+  })
+  navigateToReportEdit(router, 'select')
+}
+
+watch(
+  () => [
+    route.query.pageName,
+    route.query.step,
+    route.query.templateId,
+    route.query.rightPanel,
+  ] as const,
+  () => {
+    syncWorkflowFromReportEditRoute(route, createReportEditRouteSyncActions(workflow))
+  },
+  { immediate: true },
+)
+
+onBeforeRouteUpdate((to) => {
+  syncWorkflowFromReportEditRoute(to, createReportEditRouteSyncActions(workflow))
+})
+</script>
+
+<style scoped>
+.report-center-page {
+  /* 與 model-manager 模板列表卡片邊框一致 */
+  --report-center-board-border-color: #ebeef5;
+  --app-btn-color: #fff;
+  --app-btn-color-hover: #c53355;
+  --app-btn-bg: #c53355;
+  --app-btn-bg-hover: #fff;
+  --app-btn-border: #c53355;
+  --app-btn-border-hover: #c53355;
+  --app-btn-radius: 5px;
+  --app-btn-font-size: clamp(14px, calc(16 * 100vw / 1920), 16px);
+  --app-btn-font-weight: 600;
+  --app-btn-padding-y: 8px;
+  --app-btn-padding-x: 15px;
+  --app-btn-min-width: 120px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  box-sizing: border-box;
+  min-height: 100dvh;
+  padding: 32px 24px 24px 30px;
+  color: #1a1a1a;
+  background: #fff;
+}
+
+.report-center-hero {
+  text-align: center;
+  padding: 8px 0 4px;
+}
+
+.report-center-hero__title {
+  margin: 0 0 8px;
+  font-size: 22px;
+  font-weight: 700;
+  color: #1a1a1a;
+  letter-spacing: 0.02em;
+}
+
+.report-center-hero__subtitle {
+  margin: 0;
+  font-size: 14px;
+  color: #4e5969;
+}
+
+.report-center-board {
+  flex: 1 0 auto;
+  border: none;
+  background: transparent;
+  --el-card-border-color: transparent;
+}
+
+.report-center-board :deep(.el-card__body) {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  align-items: stretch;
+  box-sizing: border-box;
+  min-height: 68dvh;
+  height: auto;
+  padding: 0;
+  background: transparent;
+}
+
+.report-center-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 20px 24px 24px;
+  min-width: 0;
+  border: 1px solid var(--report-center-board-border-color);
+  border-radius: 8px;
+  background: #fff;
+  box-sizing: border-box;
+}
+
+.report-center-panel__title {
+  margin: 0 0 16px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #1a1a1a;
+}
+
+/* —— 表單 —— */
+.report-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.report-form--advanced {
+  margin-top: 4px;
+}
+
+.report-form__row {
+  display: grid;
+  grid-template-columns: 120px 1fr;
+  align-items: center;
+  gap: 12px;
+}
+
+.report-form__row--slider {
+  align-items: center;
+}
+
+.report-form__row--textarea {
+  align-items: flex-start;
+  margin-bottom: 18px;
+}
+
+.report-form__row--textarea .report-form__label {
+  padding-top: 6px;
+}
+
+.report-form__label {
+  font-size: 13px;
+  color: #1a1a1a;
+  white-space: nowrap;
+}
+
+.report-form__control--radio {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.report-form__control--slider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.report-form__control--slider :deep(.el-slider) {
+  flex: 1;
+  min-width: 0;
+  --el-slider-main-bg-color: #c53355;
+  --el-slider-runway-bg-color: #e8eaec;
+  --el-slider-button-size: 14px;
+}
+
+.report-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.report-radio input {
+  accent-color: #c53355;
+}
+
+.report-input {
+  width: 100%;
+  height: 32px;
+  padding: 4px 10px;
+  border: 1px solid #c9cdd4;
+  border-radius: 2px;
+  font-size: 13px;
+  color: #1a1a1a;
+  background: #fff;
+  box-sizing: border-box;
+  outline: none;
+}
+
+.report-input:focus {
+  border-color: #c53355;
+}
+
+.report-form__select {
+  width: 100%;
+}
+
+.report-form__select :deep(.el-select__wrapper) {
+  min-height: 32px;
+  padding: 4px 10px;
+  border-radius: 2px;
+  box-shadow: 0 0 0 1px #c9cdd4 inset;
+  font-size: 13px;
+}
+
+.report-form__select :deep(.el-select__wrapper.is-focused) {
+  box-shadow: 0 0 0 1px #c53355 inset;
+}
+
+.report-form__textarea-box {
+  position: relative;
+  width: 100%;
+}
+
+.report-form__textarea {
+  width: 100%;
+}
+
+.report-form__textarea :deep(.el-textarea__inner) {
+  min-height: 56px;
+  padding: 6px 10px 22px;
+  border-radius: 2px;
+  box-shadow: 0 0 0 1px #c9cdd4 inset;
+  font-size: 13px;
+  color: #1a1a1a;
+  line-height: 1.5;
+}
+
+.report-form__textarea :deep(.el-textarea__inner:focus) {
+  box-shadow: 0 0 0 1px #c53355 inset;
+}
+
+.report-form__textarea-hint {
+  position: absolute;
+  right: 0;
+  bottom: -18px;
+  font-size: 12px;
+  line-height: 1;
+  color: #909399;
+  pointer-events: none;
+  user-select: none;
+}
+
+.report-form__switch {
+  --el-switch-on-color: #c53355;
+  --el-switch-off-color: #fff;
+}
+
+.report-form__switch :deep(.el-switch__core) {
+  border: 1px solid #c9cdd4;
+}
+
+.report-form__switch :deep(.el-switch.is-checked .el-switch__core) {
+  border-color: #c53355;
+}
+
+.report-input--select {
+  appearance: auto;
+  cursor: pointer;
+}
+
+.report-slider-num {
+  width: 52px;
+  height: 28px;
+  padding: 2px 6px;
+  border: 1px solid #c9cdd4;
+  border-radius: 2px;
+  font-size: 13px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.report-advanced-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin: 16px 0 8px;
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 14px;
+  font-weight: 700;
+  color: #1a1a1a;
+  cursor: pointer;
+}
+
+.report-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-advanced-toggle__arrow.is-open {
+  transform: rotate(180deg);
+}
+
+.report-form__hint {
+  margin: 12px 0 0;
+  font-size: 12px;
+  color: #86909c;
+}
+
+.report-center-footer {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  margin-top: auto;
+  padding: 4px 0 8px;
+  background: #fff;
+}
+
+.app-btn {
+  min-width: var(--app-btn-min-width);
+  padding: var(--app-btn-padding-y) var(--app-btn-padding-x);
+  border: 1px solid var(--app-btn-border);
+  border-radius: var(--app-btn-radius);
+  background: var(--app-btn-bg);
+  color: var(--app-btn-color);
+  font-size: var(--app-btn-font-size);
+  font-weight: var(--app-btn-font-weight);
+  line-height: 1.4;
+  font-family: inherit;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.app-btn:hover {
+  background: var(--app-btn-bg-hover);
+  border-color: var(--app-btn-border-hover);
+  color: var(--app-btn-color-hover);
+}
+
+.app-btn--wide {
+  min-width: 148px;
+}
+
+@media (max-width: 960px) {
+  .report-center-board :deep(.el-card__body) {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+
+  .report-center-panel {
+    height: auto;
+  }
+
+  .report-center-board :deep(.el-card__body) {
+    min-height: auto;
+  }
+
+  .report-form__row {
+    grid-template-columns: 1fr;
+    gap: 4px;
+  }
+}
+</style>