aegon-lv82 1.0.0

package/src/views/gen-ai/gen-entry/api/index.ts

@@ -0,0 +1,32 @@
+import type { genAiReportDataParams } from '../types'
+import { RECENT_REPORTS, type RecentReport } from '../../components/RecentReportsTable.vue'
+import { postGenAiRequest } from '../../common/utils/remote-request'
+
+function isRecentReportList(data: unknown) {
+  return Array.isArray(data) && data.length > 0 && typeof data[0]?.id === 'string'
+}
+
+function fallbackRecentReports() {
+  return [...RECENT_REPORTS]
+}
+
+const genEntryApi = {
+  /** gen-entry: report list；網絡失敗或超時時回退 mock，不阻塞頁面 */
+  async fetchGenAiReportListData(data: genAiReportDataParams) {
+    try {
+      const response = await postGenAiRequest('/reportLatest', data)
+      if (isRecentReportList(response)) {
+        return response as RecentReport[]
+      }
+    } catch (error) {
+      console.error('獲取 fetchGenAiReportListData 失敗', error)
+    }
+    return fallbackRecentReports()
+  },
+
+  async fetchtest(data: unknown) {
+    return postGenAiRequest('/hello', data)
+  },
+}
+
+export default genEntryApi

package/src/views/gen-ai/gen-entry/index.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="industry-page">
+    <main ref="pageBodyRef" class="industry-page__body">
+      <section class="industry-hero">
+        <h2 class="industry-hero__title">AI產業分析報告</h2>
+        <p class="industry-hero__desc">
+          基於你選擇的模型、行業與年份，並結合上傳或雲端引用的資料，自動生成結構化的風控分析報告。
+        </p>
+
+        <div class="industry-hero__actions">
+          <EntryHeroNavCards @select="handleHeroAction" />
+        </div>
+      </section>
+
+      <section class="industry-reports">
+        <h3 class="industry-reports__title">
+          <el-icon class="industry-reports__title-icon">
+            <Document />
+          </el-icon>
+          最近的報告
+        </h3>
+        <RecentReportsTable ref="tableRef" :reports="displayedReports" @open="openReport" />
+        <a
+          v-if="showMoreLink"
+          href="#"
+          class="industry-reports__more"
+          @click.prevent="handleMoreReports"
+        >
+          更多報告 &gt;&gt;
+        </a>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import '../common/assets/fonts.css'
+import { Document } from '@element-plus/icons-vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import {
+  bindViewportBodyHeight,
+  lockDocumentScroll,
+  RECENT_REPORTS,
+  navigateToReportCenter,
+  openManagementCenter,
+  openModelManager,
+  openReportCenter,
+  openReportCreate,
+  RecentReportsTable,
+  type RecentReport,
+  type RecentReportsTableExpose,
+} from '../common'
+import EntryHeroNavCards, { type EntryHeroNavId } from '../components/EntryHeroNavCards.vue'
+import genEntryApi from './api'
+
+const DEFAULT_VISIBLE_ROWS = 10
+
+const router = useRouter()
+const recentReports = ref([...RECENT_REPORTS])
+
+function isRecentReportList(data: unknown) {
+  return Array.isArray(data) && data.length > 0 && typeof data[0]?.id === 'string'
+}
+
+async function loadRecentReports() {
+  const data = await genEntryApi.fetchGenAiReportListData({})
+  if (isRecentReportList(data)) {
+    recentReports.value = data as RecentReport[]
+  }
+}
+
+const pageBodyRef = ref(null as HTMLElement | null)
+const tableRef = ref<RecentReportsTableExpose | null>(null)
+
+const displayedReports = computed(() => recentReports.value.slice(0, DEFAULT_VISIBLE_ROWS))
+
+const showMoreLink = computed(() => recentReports.value.length > DEFAULT_VISIBLE_ROWS)
+
+let cleanupBodyHeight: (() => void) | undefined
+let cleanupLock: (() => void) | undefined
+let resizeObserver: ResizeObserver | undefined
+let measureRafId = 0
+
+async function relayoutTable() {
+  await nextTick()
+  await new Promise((resolve) => {
+    cancelAnimationFrame(measureRafId)
+    measureRafId = requestAnimationFrame(() => {
+      measureRafId = requestAnimationFrame(() => resolve(undefined))
+    })
+  })
+  tableRef.value?.doLayout()
+}
+
+function scheduleRelayoutTable() {
+  cancelAnimationFrame(measureRafId)
+  measureRafId = requestAnimationFrame(() => {
+    void relayoutTable()
+  })
+}
+
+function handleMoreReports() {
+  navigateToReportCenter(router)
+}
+
+onMounted(() => {
+  void loadRecentReports()
+  if (pageBodyRef.value) {
+    cleanupBodyHeight = bindViewportBodyHeight(pageBodyRef.value)
+    resizeObserver = new ResizeObserver(() => scheduleRelayoutTable())
+    resizeObserver.observe(pageBodyRef.value)
+  }
+  cleanupLock = lockDocumentScroll()
+  window.addEventListener('resize', scheduleRelayoutTable)
+  scheduleRelayoutTable()
+})
+
+onUnmounted(() => {
+  cancelAnimationFrame(measureRafId)
+  resizeObserver?.disconnect()
+  window.removeEventListener('resize', scheduleRelayoutTable)
+  cleanupBodyHeight?.()
+  cleanupLock?.()
+})
+
+watch(displayedReports, () => {
+  scheduleRelayoutTable()
+})
+
+function handleHeroAction(id: EntryHeroNavId) {
+  if (id === 'new-report') {
+    openReportCreate(router)
+  }
+  if (id === 'report-sim') {
+    openReportCenter(router)
+  }
+  if (id === 'template-sim') {
+    openModelManager(router)
+  }
+  if (id === 'admin-sim') {
+    openManagementCenter(router)
+  }
+}
+
+function openReport(report: RecentReport) {
+  openModelManager(router, { id: report.id })
+}
+</script>
+
+<style scoped>
+.industry-page {
+  --gen-ai-design-w: 1920;
+  --gen-ai-fs-xs: clamp(11px, calc(12 * 100vw / 1920), 12px);
+  --gen-ai-fs-sm: clamp(12px, calc(13 * 100vw / 1920), 13px);
+  --gen-ai-fs-base: clamp(13px, calc(14 * 100vw / 1920), 14px);
+  --gen-ai-fs-md: clamp(14px, calc(16 * 100vw / 1920), 16px);
+  --gen-ai-fs-lg: clamp(16px, calc(18 * 100vw / 1920), 18px);
+  --gen-ai-fs-hero: clamp(26px, calc(32 * 100vw / 1920), 32px);
+  --gen-ai-lh-tight: 1.4;
+  --gen-ai-lh-normal: 1.6;
+  --gen-ai-lh-relaxed: 1.7;
+  --gen-ai-fw-semibold: 600;
+  --gen-ai-fw-bold: 700;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: var(--gen-ai-fs-base);
+  line-height: var(--gen-ai-lh-normal);
+  color: #2d3139;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+  background: #fff;
+}
+
+.industry-page :deep(.el-table),
+.industry-page :deep(.el-input),
+.industry-page :deep(.el-select),
+.industry-page :deep(.el-pagination) {
+  font-size: inherit;
+}
+
+.industry-page :deep(.el-button) {
+  font-size: 18px;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+}
+
+.industry-page__body {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 48px 24px 40px;
+  box-sizing: border-box;
+}
+
+.industry-hero {
+  flex-shrink: 0;
+  text-align: center;
+  margin-bottom: 48px;
+}
+
+.industry-hero__title {
+  margin: 0 0 20px;
+  font-size: var(--gen-ai-fs-hero);
+  font-weight: var(--gen-ai-fw-bold);
+  color: #1a1a1a;
+}
+
+.industry-hero__desc {
+  margin: 0 0 8px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: var(--gen-ai-lh-relaxed);
+  color: #666;
+}
+
+.industry-hero__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin-top: 28px;
+}
+
+.industry-reports {
+  width: 80%;
+  max-width: 80%;
+  margin: 0 auto;
+  padding: 0;
+  box-sizing: border-box;
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.industry-reports :deep(.recent-reports-table) {
+  flex: 0 1 auto;
+  min-height: 0;
+  width: 100%;
+}
+
+.industry-reports__title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 16px;
+  padding: 0;
+  font-size: 18px;
+  font-weight: var(--gen-ai-fw-semibold);
+  color: #1a1a1a;
+  text-align: left;
+  width: 100%;
+  flex-shrink: 0;
+}
+
+.industry-reports__title-icon {
+  font-size: var(--gen-ai-fs-lg);
+  color: #606266;
+}
+
+.industry-reports__more {
+  display: inline-block;
+  margin: 12px 0 0;
+  padding: 0;
+  font-size: var(--gen-ai-fs-base);
+  color: #409eff;
+  text-decoration: none;
+  cursor: pointer;
+  text-align: left;
+  flex-shrink: 0;
+}
+
+.industry-reports__more:hover {
+  color: #66b1ff;
+  text-decoration: none;
+}
+</style>

package/src/views/gen-ai/gen-entry/types/index.ts

@@ -0,0 +1,4 @@
+/** gen-entry 報告列表請求參數；usmRight 不傳表示全部 */
+export interface genAiReportDataParams {
+  usmRight?: string
+}

package/src/views/gen-ai/i.mark

@@ -0,0 +1,2 @@
+pnpm add jszip@^3.10.1 file-saver@^2.0.5 html2canvas@^1.4.1 marked@^9
+pnpm add -D @types/file-saver