aegon-lv82 1.0.0

package/src/views/gen-ai/build-report/index.vue

@@ -0,0 +1,856 @@
+<template>
+  <!-- key=reportEditMountKey：一鍵生成 / 進入編輯後強制整組件重掛 -->
+  <ReportEdit v-if="isReportEditView" :key="reportEditMountKey" />
+  <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"
+                popper-class="report-form-select-dropdown"
+                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"
+                popper-class="report-form-select-dropdown"
+                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"
+                popper-class="report-form-select-dropdown"
+                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>
+
+        <el-scrollbar
+          v-show="advancedOpen"
+          class="report-form-advanced-scroll"
+          max-height="50vh"
+        >
+          <div 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"
+                  popper-class="report-form-select-dropdown"
+                  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"
+                  popper-class="report-form-select-dropdown"
+                  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>
+        </el-scrollbar>
+
+        <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, ElScrollbar, ElSelect, ElSlider, ElSwitch } from 'element-plus'
+import { computed, reactive, ref, watch } from 'vue'
+import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
+import '../common/assets/fonts.css'
+import ReportEdit from './components/reportEdit.vue'
+import ReportSourcesPanel from './components/ReportSourcesPanel.vue'
+import {
+  createReportEditRouteSyncActions,
+  isReportEditRoute,
+  navigateToReportEdit,
+  syncWorkflowFromReportEditRoute,
+} from './report-domain'
+import { useReportWorkflow } from './useReportWorkflow'
+
+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()
+workflow.restoreReportEditSession()
+const { reportEditMountKey } = workflow
+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,
+})
+
+function hydrateFormFromDraft() {
+  const d = workflow.draft
+  if (!d.industry && !d.reportName && !d.researchFocus) return
+  form.industry = d.industry || form.industry
+  form.researchFocus = d.researchFocus || form.researchFocus
+  form.year = d.year || form.year
+  form.reportName = d.reportName || form.reportName
+  form.language = d.language || form.language
+  form.wordsPerChapter = d.wordsPerChapter || form.wordsPerChapter
+  form.model = d.model || form.model
+  form.searchMode = d.searchMode || form.searchMode
+  form.weight = d.weight ?? form.weight
+  form.rerank = d.rerank ?? form.rerank
+  form.rerankTopN = d.rerankTopN ?? form.rerankTopN
+  form.rerankThreshold = d.rerankThreshold ?? form.rerankThreshold
+  if (d.reportName) reportNameTouched.value = true
+}
+
+hydrateFormFromDraft()
+
+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(),
+  })
+  workflow.openReportEdit('select')
+  void navigateToReportEdit(router, 'select')
+}
+
+watch(
+  () => route.fullPath,
+  () => {
+    if (workflow.isReportEditNavLocked()) return
+    syncWorkflowFromReportEditRoute(route, createReportEditRouteSyncActions(workflow))
+  },
+  { immediate: true, flush: 'sync' }
+)
+
+onBeforeRouteUpdate((to) => {
+  if (workflow.isReportEditNavLocked()) return
+  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;
+  transition: box-shadow var(--el-transition-duration, 0.3s);
+}
+
+.report-center-panel:hover {
+  box-shadow: var(--el-box-shadow-light, 0 0 12px rgba(0, 0, 0, 0.12));
+}
+
+.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;
+  padding-right: 4px;
+}
+
+.report-form-advanced-scroll {
+  margin-top: 4px;
+  width: 100%;
+  max-height: 50vh;
+}
+
+.report-form-advanced-scroll :deep(.el-scrollbar__wrap) {
+  max-height: 50vh !important;
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+
+.report-form-advanced-scroll :deep(.el-scrollbar__wrap::-webkit-scrollbar) {
+  width: 0 !important;
+  height: 0 !important;
+  display: none !important;
+}
+
+.report-form-advanced-scroll :deep(.el-scrollbar__bar.is-horizontal) {
+  display: none !important;
+}
+
+.report-form-advanced-scroll :deep(.el-scrollbar__bar.is-vertical) {
+  width: 8px !important;
+  right: 0 !important;
+  top: 2px !important;
+  bottom: 2px !important;
+  height: auto !important;
+  opacity: 1 !important;
+  z-index: 10;
+}
+
+.report-form-advanced-scroll :deep(.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: var(--report-edit-col-scroll-thumb, #999) !important;
+  opacity: 1 !important;
+}
+
+.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: 15px;
+  font-weight: 500;
+  color: #303133;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+}
+
+.report-form__select :deep(.el-select__selected-item),
+.report-form__select :deep(.el-select__placeholder),
+.report-form__select :deep(.el-select__input) {
+  font-size: 15px;
+  font-weight: 500;
+  color: #303133;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+}
+
+.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: none;
+  /* 收起朝下；展開朝上（與折疊區塊一致） */
+  border-top: 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>
+
+<style>
+/* teleport 下拉層：選項文字統一 */
+.report-form-select-dropdown.el-select__popper .el-select-dropdown__item {
+  font-size: 15px;
+  font-weight: 500;
+  color: #303133;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+}
+
+.report-form-select-dropdown.el-select__popper .el-select-dropdown__item.is-hovering,
+.report-form-select-dropdown.el-select__popper .el-select-dropdown__item.is-selected {
+  color: #303133;
+  font-weight: 500;
+}
+</style>