aegon-lv82 1.0.0

package/src/views/gen-ai/build-report/components/paramsSetting.vue

@@ -0,0 +1,886 @@
+<template>
+  <div class="admin-center-page">
+    <header class="admin-center-hero">
+      <h1 class="admin-center-hero__title">AI行業分析報告助手</h1>
+      <p class="admin-center-hero__subtitle">選擇報告生成參數，確定分析視角</p>
+    </header>
+
+    <div class="admin-center-board">
+      <!-- 左：參數 -->
+      <section class="admin-center-panel admin-center-panel--params">
+        <h2 class="admin-center-panel__title">基本參數</h2>
+
+        <div class="admin-form">
+          <div class="admin-form__row">
+            <label class="admin-form__label">行業</label>
+            <div class="admin-form__control">
+              <input
+                v-model="form.industry"
+                type="text"
+                class="admin-input admin-input--required"
+              />
+            </div>
+          </div>
+          <div class="admin-form__row">
+            <label class="admin-form__label">調研主要出發點</label>
+            <div class="admin-form__control">
+              <input
+                v-model="form.researchFocus"
+                type="text"
+                class="admin-input admin-input--required"
+              />
+            </div>
+          </div>
+          <div class="admin-form__row">
+            <label class="admin-form__label">年份</label>
+            <div class="admin-form__control">
+              <input v-model="form.year" type="text" class="admin-input admin-input--required" />
+            </div>
+          </div>
+          <div class="admin-form__row">
+            <label class="admin-form__label">報告名稱</label>
+            <div class="admin-form__control">
+              <input
+                v-model="form.reportName"
+                type="text"
+                class="admin-input admin-input--required"
+              />
+            </div>
+          </div>
+          <div class="admin-form__row">
+            <label class="admin-form__label">報告語言</label>
+            <div class="admin-form__control admin-form__control--radio">
+              <label v-for="lang in languageOptions" :key="lang.value" class="admin-radio">
+                <input v-model="form.language" type="radio" :value="lang.value" />
+                <span>{{ lang.label }}</span>
+              </label>
+            </div>
+          </div>
+          <div class="admin-form__row">
+            <label class="admin-form__label">每章節字數</label>
+            <div class="admin-form__control">
+              <input
+                v-model="form.wordsPerChapter"
+                type="number"
+                min="0"
+                class="admin-input admin-input--required"
+              />
+            </div>
+          </div>
+        </div>
+
+        <button type="button" class="admin-advanced-toggle" @click="advancedOpen = !advancedOpen">
+          <span
+            class="admin-advanced-toggle__arrow"
+            :class="{ 'is-open': advancedOpen }"
+            aria-hidden="true"
+          />
+          <span>進階參數</span>
+        </button>
+
+        <div v-show="advancedOpen" class="admin-form admin-form--advanced">
+          <div class="admin-form__row">
+            <label class="admin-form__label">模型</label>
+            <div class="admin-form__control">
+              <input v-model="form.model" type="text" class="admin-input admin-input--required" />
+            </div>
+          </div>
+          <div class="admin-form__row">
+            <label class="admin-form__label">搜尋模式</label>
+            <div class="admin-form__control">
+              <select v-model="form.searchMode" class="admin-input admin-input--select">
+                <option v-for="mode in searchModeOptions" :key="mode" :value="mode">
+                  {{ mode }}
+                </option>
+              </select>
+            </div>
+          </div>
+          <div class="admin-form__row admin-form__row--slider">
+            <label class="admin-form__label">權重</label>
+            <div class="admin-form__control admin-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="admin-slider-num"
+              />
+            </div>
+          </div>
+          <div class="admin-form__row">
+            <label class="admin-form__label">Rerank</label>
+            <div class="admin-form__control">
+              <input v-model="form.rerank" type="text" class="admin-input" />
+            </div>
+          </div>
+          <div class="admin-form__row admin-form__row--slider">
+            <label class="admin-form__label">Rerank top-N</label>
+            <div class="admin-form__control admin-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="admin-slider-num"
+              />
+            </div>
+          </div>
+          <div class="admin-form__row admin-form__row--slider">
+            <label class="admin-form__label">Rerank threshold</label>
+            <div class="admin-form__control admin-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="admin-slider-num"
+              />
+            </div>
+          </div>
+        </div>
+
+        <p v-if="form.searchMode === 'Vector Search'" class="admin-form__hint">
+          搜尋模式為「Vector Search」時，權重與 Rerank 相關參數將被忽略。
+        </p>
+      </section>
+
+      <!-- 右：資訊源 -->
+      <section class="admin-center-panel admin-center-panel--sources">
+        <h2 class="admin-center-panel__title">資訊源檔案</h2>
+
+        <div
+          class="admin-upload-zone"
+          role="button"
+          tabindex="0"
+          @click="triggerFilePick"
+          @keydown.enter="triggerFilePick"
+        >
+          <span class="admin-upload-zone__plus">+</span>
+          <span class="admin-upload-zone__label">添加資訊源</span>
+          <p class="admin-upload-zone__hint">
+            可一次選擇多個檔案，每個檔案大小不超過 100MB；支援
+            txt、doc、docx、pdf、xls、xlsx、json、csv、pptx、PNG、JPG、JPEG、GIF
+          </p>
+          <input
+            ref="fileInputRef"
+            type="file"
+            class="admin-upload-zone__input"
+            multiple
+            accept=".txt,.doc,.docx,.pdf,.xls,.xlsx,.json,.csv,.pptx,.png,.jpg,.jpeg,.gif"
+            @change="onFilesPicked"
+          />
+        </div>
+
+        <div v-if="pendingFiles.length" class="admin-pending">
+          <div v-for="file in pendingFiles" :key="file.id" class="admin-pending__row">
+            <span class="admin-pending__name">{{ file.name }}</span>
+            <span
+              class="admin-pending__size"
+              :class="{ 'is-over-limit': file.sizeKb > FILE_SIZE_LIMIT_KB }"
+            >
+              {{ file.sizeKb }}KB
+            </span>
+            <button
+              type="button"
+              class="admin-pending__remove"
+              aria-label="刪除"
+              @click="removePending(file.id)"
+            >
+              ×
+            </button>
+          </div>
+          <div class="admin-pending__actions">
+            <button type="button" class="admin-btn admin-btn--primary" @click="submitPending">
+              提交
+            </button>
+            <button type="button" class="admin-btn admin-btn--outline" @click="clearPending">
+              清空
+            </button>
+          </div>
+        </div>
+
+        <div class="admin-source-toolbar">
+          <label class="admin-source-toolbar__all">
+            <input v-model="allSourcesSelected" type="checkbox" @change="toggleAllSources" />
+            <span>全選</span>
+          </label>
+          <div class="admin-source-toolbar__search">
+            <span class="admin-source-toolbar__search-label">Search:</span>
+            <input v-model="sourceSearch" type="text" class="admin-source-toolbar__search-input" />
+            <button
+              type="button"
+              class="admin-btn admin-btn--outline admin-btn--sm"
+              @click="refreshSources"
+            >
+              Refresh
+            </button>
+          </div>
+        </div>
+
+        <div class="admin-source-table-wrap">
+          <table class="admin-source-table">
+            <thead>
+              <tr>
+                <th class="admin-source-table__check" />
+                <th>檔案名稱</th>
+                <th class="admin-source-table__action">下載</th>
+                <th class="admin-source-table__action">刪除</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="file in filteredSources" :key="file.id">
+                <td class="admin-source-table__check">
+                  <input v-model="file.selected" type="checkbox" />
+                </td>
+                <td class="admin-source-table__name">{{ file.name }}</td>
+                <td class="admin-source-table__action">
+                  <button
+                    type="button"
+                    class="admin-icon-btn"
+                    aria-label="下載"
+                    @click="downloadSource(file)"
+                  >
+                    <el-icon><Download /></el-icon>
+                  </button>
+                </td>
+                <td class="admin-source-table__action">
+                  <button
+                    type="button"
+                    class="admin-icon-btn"
+                    aria-label="刪除"
+                    @click="deleteSource(file.id)"
+                  >
+                    <el-icon><Close /></el-icon>
+                  </button>
+                </td>
+              </tr>
+              <tr v-if="!filteredSources.length">
+                <td colspan="4" class="admin-source-table__empty">暫無匹配檔案</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+
+    <footer class="admin-center-footer">
+      <button type="button" class="app-btn app-btn--wide" @click="selectTemplate">選擇模板</button>
+    </footer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Close, Download } from '@element-plus/icons-vue'
+import { ElIcon, ElSlider } from 'element-plus'
+import { computed, reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { openTemplateCenter } from '@/utils/gen-ai-navigation'
+
+const FILE_SIZE_LIMIT_KB = 100 * 1024
+
+const router = useRouter()
+const fileInputRef = ref<HTMLInputElement | null>(null)
+const advancedOpen = ref(true)
+const sourceSearch = ref('')
+const allSourcesSelected = ref(false)
+
+const languageOptions = [
+  { value: 'zh-Hant', label: '繁體中文' },
+  { value: 'zh-Hans', label: '簡體中文' },
+  { value: 'en', label: 'English' },
+] as const
+
+const searchModeOptions = ['Hybrid Search', 'Vector Search', 'Keyword Search'] as const
+
+const form = reactive({
+  industry: '',
+  researchFocus: '',
+  year: '',
+  reportName: '',
+  language: 'zh-Hant',
+  wordsPerChapter: '',
+  model: '',
+  searchMode: 'Hybrid Search',
+  weight: 0.5,
+  rerank: '',
+  rerankTopN: 5,
+  rerankThreshold: 0.5,
+})
+
+interface PendingFile {
+  id: string
+  name: string
+  sizeKb: number
+}
+
+interface SourceFile {
+  id: string
+  name: string
+  selected: boolean
+}
+
+const pendingFiles = ref<PendingFile[]>([
+  { id: 'p1', name: 'file_4.docx', sizeKb: 107782 },
+  { id: 'p2', name: 'file_3.xlsx', sizeKb: 530 },
+  { id: 'p3', name: 'file_1.pdf', sizeKb: 325 },
+])
+
+const sourceFiles = ref<SourceFile[]>([
+  { id: 's1', name: '香港物業市場回顧及前瞻2024.pdf', selected: false },
+  { id: 's2', name: '2024年香港住宅物業價格與租金走勢分析.pdf', selected: false },
+  { id: 's3', name: '香港商業地產市場年度觀察報告2024.pdf', selected: false },
+  { id: 's4', name: '香港房地產市場2024年回顧與展望.docx', selected: false },
+  { id: 's5', name: '香港住宅租金指數2024年數據匯總.xlsx', selected: false },
+])
+
+const filteredSources = computed(() => {
+  const q = sourceSearch.value.trim().toLowerCase()
+  if (!q) return sourceFiles.value
+  return sourceFiles.value.filter((f) => f.name.toLowerCase().includes(q))
+})
+
+function triggerFilePick() {
+  fileInputRef.value?.click()
+}
+
+function onFilesPicked(event: Event) {
+  const input = event.target as HTMLInputElement
+  const files = input.files
+  if (!files?.length) return
+
+  for (const file of files) {
+    pendingFiles.value.push({
+      id: `pending-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+      name: file.name,
+      sizeKb: Math.ceil(file.size / 1024),
+    })
+  }
+  input.value = ''
+}
+
+function removePending(id: string) {
+  pendingFiles.value = pendingFiles.value.filter((f) => f.id !== id)
+}
+
+function clearPending() {
+  pendingFiles.value = []
+}
+
+function submitPending() {
+  const valid = pendingFiles.value.filter((f) => f.sizeKb <= FILE_SIZE_LIMIT_KB)
+  valid.forEach((f) => {
+    sourceFiles.value.push({ id: f.id, name: f.name, selected: false })
+  })
+  pendingFiles.value = pendingFiles.value.filter((f) => f.sizeKb > FILE_SIZE_LIMIT_KB)
+}
+
+function toggleAllSources() {
+  sourceFiles.value.forEach((f) => {
+    f.selected = allSourcesSelected.value
+  })
+}
+
+function refreshSources() {
+  sourceSearch.value = ''
+}
+
+function downloadSource(file: SourceFile) {
+  console.log('download', file.name)
+}
+
+function deleteSource(id: string) {
+  sourceFiles.value = sourceFiles.value.filter((f) => f.id !== id)
+}
+
+function selectTemplate() {
+  openTemplateCenter(router)
+}
+</script>
+
+<style scoped>
+.admin-center-page {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  min-height: 100%;
+  color: #1a1a1a;
+}
+
+.admin-center-hero {
+  text-align: center;
+  padding: 8px 0 4px;
+}
+
+.admin-center-hero__title {
+  margin: 0 0 8px;
+  font-size: 22px;
+  font-weight: 700;
+  color: #1a1a1a;
+  letter-spacing: 0.02em;
+}
+
+.admin-center-hero__subtitle {
+  margin: 0;
+  font-size: 14px;
+  color: #4e5969;
+}
+
+.admin-center-board {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+  border: 1px solid #1a1a1a;
+  min-height: 520px;
+}
+
+.admin-center-panel {
+  padding: 20px 24px 24px;
+  min-width: 0;
+}
+
+.admin-center-panel--params {
+  border-right: 1px solid #1a1a1a;
+}
+
+.admin-center-panel__title {
+  margin: 0 0 16px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #1a1a1a;
+}
+
+/* —— 表單 —— */
+.admin-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.admin-form--advanced {
+  margin-top: 4px;
+}
+
+.admin-form__row {
+  display: grid;
+  grid-template-columns: 120px 1fr;
+  align-items: center;
+  gap: 12px;
+}
+
+.admin-form__row--slider {
+  align-items: center;
+}
+
+.admin-form__label {
+  font-size: 13px;
+  color: #1a1a1a;
+  white-space: nowrap;
+}
+
+.admin-form__control--radio {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.admin-form__control--slider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.admin-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;
+}
+
+.admin-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.admin-radio input {
+  accent-color: #c53355;
+}
+
+.admin-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;
+}
+
+.admin-input:focus {
+  border-color: #c53355;
+}
+
+.admin-input--select {
+  appearance: auto;
+  cursor: pointer;
+}
+
+.admin-input--required {
+  position: relative;
+  background-image: linear-gradient(225deg, #c53355 8px, transparent 8px);
+  background-repeat: no-repeat;
+  background-position: top right;
+}
+
+.admin-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;
+}
+
+.admin-advanced-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin: 16px 0 8px;
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 14px;
+  font-weight: 700;
+  color: #1a1a1a;
+  cursor: pointer;
+}
+
+.admin-advanced-toggle__arrow {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 7px solid #c53355;
+  border-bottom: none;
+  transition: transform 0.2s ease;
+}
+
+.admin-advanced-toggle__arrow.is-open {
+  transform: rotate(180deg);
+}
+
+.admin-form__hint {
+  margin: 12px 0 0;
+  font-size: 12px;
+  color: #86909c;
+}
+
+/* —— 上傳區 —— */
+.admin-upload-zone {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 120px;
+  padding: 16px;
+  border: 1px dashed #c9cdd4;
+  border-radius: 2px;
+  background: #fafafa;
+  cursor: pointer;
+  text-align: center;
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.admin-upload-zone:hover {
+  background: #f5f5f5;
+  border-color: #c53355;
+}
+
+.admin-upload-zone__plus {
+  font-size: 28px;
+  line-height: 1;
+  color: #86909c;
+  font-weight: 300;
+}
+
+.admin-upload-zone__label {
+  font-size: 13px;
+  color: #4e5969;
+}
+
+.admin-upload-zone__hint {
+  margin: 4px 0 0;
+  max-width: 100%;
+  font-size: 11px;
+  line-height: 1.5;
+  color: #86909c;
+}
+
+.admin-upload-zone__input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* —— 待提交列表 —— */
+.admin-pending {
+  margin-top: 12px;
+  border: 1px solid #e8eaec;
+}
+
+.admin-pending__row {
+  display: grid;
+  grid-template-columns: 1fr auto 28px;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-bottom: 1px solid #f0f2f5;
+  font-size: 13px;
+}
+
+.admin-pending__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.admin-pending__size {
+  color: #4e5969;
+  white-space: nowrap;
+}
+
+.admin-pending__size.is-over-limit {
+  color: #c53355;
+  font-weight: 600;
+}
+
+.admin-pending__remove {
+  border: 0;
+  background: none;
+  font-size: 18px;
+  line-height: 1;
+  color: #86909c;
+  cursor: pointer;
+  padding: 0;
+}
+
+.admin-pending__remove:hover {
+  color: #c53355;
+}
+
+.admin-pending__actions {
+  display: flex;
+  gap: 10px;
+  padding: 10px;
+}
+
+/* —— 按鈕 —— */
+.admin-btn {
+  min-width: 72px;
+  padding: 6px 16px;
+  border-radius: 3px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.admin-btn--primary {
+  border: 1px solid #c53355;
+  background: #c53355;
+  color: #fff;
+}
+
+.admin-btn--primary:hover {
+  background: #a82b48;
+  border-color: #a82b48;
+}
+
+.admin-btn--outline {
+  border: 1px solid #c53355;
+  background: #fff;
+  color: #c53355;
+}
+
+.admin-btn--outline:hover {
+  background: #fff5f6;
+}
+
+.admin-btn--sm {
+  min-width: auto;
+  padding: 4px 12px;
+  font-size: 12px;
+}
+
+/* —— 檔案表 —— */
+.admin-source-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 16px;
+  margin-bottom: 8px;
+}
+
+.admin-source-toolbar__all {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.admin-source-toolbar__all input {
+  accent-color: #c53355;
+}
+
+.admin-source-toolbar__search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.admin-source-toolbar__search-label {
+  font-size: 13px;
+  color: #4e5969;
+}
+
+.admin-source-toolbar__search-input {
+  width: 140px;
+  height: 28px;
+  padding: 2px 8px;
+  border: 1px solid #c9cdd4;
+  border-radius: 2px;
+  font-size: 13px;
+}
+
+.admin-source-table-wrap {
+  border: 1px solid #e8eaec;
+  overflow: auto;
+  max-height: 220px;
+}
+
+.admin-source-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.admin-source-table th,
+.admin-source-table td {
+  padding: 8px 10px;
+  border-bottom: 1px solid #f0f2f5;
+  text-align: left;
+}
+
+.admin-source-table th {
+  background: #fafafa;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.admin-source-table__check {
+  width: 36px;
+  text-align: center;
+}
+
+.admin-source-table__check input {
+  accent-color: #c53355;
+}
+
+.admin-source-table__action {
+  width: 56px;
+  text-align: center;
+}
+
+.admin-source-table__name {
+  word-break: break-all;
+}
+
+.admin-source-table__empty {
+  text-align: center;
+  color: #86909c;
+  padding: 24px;
+}
+
+.admin-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: #4e5969;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.admin-icon-btn:hover {
+  color: #c53355;
+  background: #fff5f6;
+}
+
+.admin-center-footer {
+  display: flex;
+  justify-content: center;
+  padding: 8px 0 4px;
+}
+
+@media (max-width: 960px) {
+  .admin-center-board {
+    grid-template-columns: 1fr;
+  }
+
+  .admin-center-panel--params {
+    border-right: 0;
+    border-bottom: 1px solid #1a1a1a;
+  }
+
+  .admin-form__row {
+    grid-template-columns: 1fr;
+    gap: 4px;
+  }
+}
+</style>