aegon-gen 1.0.0

package/src/views/TemplateCenter/service.ts

@@ -0,0 +1,69 @@
+import { buildAuthHeaders } from '../../api/request'
+import { HEDERA_SYSTEM_PROMPT } from './Knowledge'
+
+/** Browser calls dev proxy; keys stay in .env on the server. */
+export const CHAT_API_URL = '/api/chat/completions'
+
+export const CHAT_MODEL =
+  import.meta.env.VITE_CHAT_MODEL ?? 'qwen/qwen-2.5-7b-instruct:free'
+
+export const CHAT_PROVIDER_LABEL =
+  import.meta.env.VITE_CHAT_PROVIDER_LABEL ?? 'OpenRouter · Qwen 2.5'
+
+export function buildChatMessages(userContent: string) {
+  return [
+    { role: 'system' as const, content: HEDERA_SYSTEM_PROMPT },
+    { role: 'user' as const, content: userContent },
+  ]
+}
+
+export async function* streamChatCompletion(
+  messages: Array<{ role: string; content: string }>,
+) {
+  const response = await fetch(CHAT_API_URL, {
+    method: 'POST',
+    headers: buildAuthHeaders(),
+    body: JSON.stringify({
+      model: CHAT_MODEL,
+      messages,
+      stream: true,
+      temperature: 0.7,
+      max_tokens: 2048,
+    }),
+  })
+
+  if (!response.ok) {
+    throw new Error(`HTTP ${response.status}`)
+  }
+
+  const reader = response.body?.getReader()
+  if (!reader) {
+    throw new Error('No reader')
+  }
+
+  const decoder = new TextDecoder()
+  let buffer = ''
+
+  while (true) {
+    const { done, value } = await reader.read()
+    if (done) break
+
+    buffer += decoder.decode(value, { stream: true })
+    const lines = buffer.split('\n')
+    buffer = lines.pop() || ''
+
+    for (const line of lines) {
+      const trimmed = line.trim()
+      if (!trimmed || trimmed === 'data: [DONE]') continue
+      if (!trimmed.startsWith('data: ')) continue
+
+      try {
+        const json = JSON.parse(trimmed.slice(6))
+        const delta = json.choices?.[0]?.delta?.content || ''
+        if (delta) yield delta
+      } catch {
+        /* ignore malformed SSE chunks */
+      }
+    }
+  }
+}

package/src/views/gen-ai/components/RecentReportsTable.vue

@@ -0,0 +1,193 @@
+<template>
+  <el-table ref="tableRef" :data="reports" :fit="true" table-layout="fixed" class="recent-reports-table">
+    <el-table-column prop="name" label="報告名稱" min-width="240" align="left" header-align="left"
+      class-name="industry-col-name">
+      <template #default="{ row }">
+        <a v-if="row.canOpen" href="#" class="industry-report-name industry-report-name__pill industry-report-name--link"
+          @click.prevent="$emit('open', row)">{{ row.name }}</a>
+        <span v-else class="industry-report-name industry-report-name__pill">{{ row.name }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="industry" label="行業" min-width="88" align="left" header-align="left" />
+    <el-table-column prop="year" label="年份" min-width="80" align="left" header-align="left" />
+    <el-table-column prop="status" label="狀態" min-width="96" align="left" header-align="left" />
+    <el-table-column prop="initiator" label="發起人" min-width="220" class-name="industry-col-initiator" align="left"
+      header-align="left" />
+    <el-table-column prop="editor" label="編輯" min-width="360" class-name="industry-col-editor" align="left"
+      header-align="left" />
+    <el-table-column prop="permission" label="我的權限" min-width="112" align="left" header-align="left" />
+    <el-table-column prop="updatedAt" label="最近更新" min-width="112" align="left" header-align="left" />
+  </el-table>
+</template>
+
+<script setup lang="ts">
+import type { RecentReport } from '@/types/gen-ai/gen-entry/index'
+import type { TableInstance } from 'element-plus'
+import { ref } from 'vue'
+
+defineProps<{
+  reports: RecentReport[]
+}>()
+
+defineEmits<{
+  open: [report: RecentReport]
+}>()
+
+const tableRef = ref<TableInstance>()
+
+function doLayout() {
+  tableRef.value?.doLayout()
+}
+
+defineExpose({ doLayout, tableRef })
+</script>
+
+<style scoped>
+.recent-reports-table {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  --el-table-border: none;
+  --el-table-border-color: transparent;
+}
+
+.recent-reports-table :deep(.el-table) {
+  --el-table-header-text-color: #1a1a1a;
+  width: 100% !important;
+}
+
+.recent-reports-table :deep(.el-table__inner-wrapper),
+.recent-reports-table :deep(.el-table__header-wrapper),
+.recent-reports-table :deep(.el-table__body-wrapper) {
+  margin-left: 0;
+  padding-left: 0;
+}
+
+.recent-reports-table :deep(.el-table__header table),
+.recent-reports-table :deep(.el-table__body table) {
+  width: 100% !important;
+  table-layout: fixed;
+}
+
+.recent-reports-table :deep(.el-table__header .cell),
+.recent-reports-table :deep(.el-table__body .cell) {
+  padding: 0;
+  text-align: left;
+}
+
+.recent-reports-table :deep(.el-table__body-wrapper .cell) {
+  padding: 0;
+}
+
+.recent-reports-table :deep(.el-table__header th.el-table__cell .cell) {
+  white-space: nowrap;
+  overflow: visible;
+  text-overflow: clip;
+}
+
+.recent-reports-table :deep(.el-table__header th.el-table__cell:first-child .cell) {
+  padding-left: 10px;
+}
+
+.recent-reports-table :deep(.industry-col-name .cell) {
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.recent-reports-table :deep(.industry-col-initiator .cell),
+.recent-reports-table :deep(.industry-col-editor .cell) {
+  white-space: normal;
+  word-break: break-word;
+  line-height: 1.5;
+}
+
+.recent-reports-table :deep(.el-table__inner-wrapper::before),
+.recent-reports-table :deep(.el-table__inner-wrapper::after) {
+  display: none;
+}
+
+.recent-reports-table :deep(.el-table__body-wrapper .el-table__body) {
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+.recent-reports-table :deep(.el-table__body tr) {
+  background: #fff;
+}
+
+.recent-reports-table :deep(.el-table__body tr.el-table__row:hover > td.el-table__cell) {
+  background-color: var(--el-table-row-hover-bg-color, #f5f7fa) !important;
+  box-shadow: none !important;
+}
+
+.recent-reports-table :deep(.el-table__body tr.el-table__row:hover > td.el-table__cell:first-child) {
+  border-radius: 4px 0 0 4px;
+}
+
+.recent-reports-table :deep(.el-table__body tr.el-table__row:hover > td.el-table__cell:last-child) {
+  border-radius: 0 4px 4px 0;
+}
+
+.recent-reports-table :deep(.el-table__header-wrapper) {
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.recent-reports-table :deep(.el-table__header th.el-table__cell) {
+  font-weight: 600;
+  border-bottom: none;
+  background: #f5f7fa;
+  color: #1a1a1a;
+  padding: 12px 16px;
+  vertical-align: bottom;
+}
+
+.recent-reports-table :deep(.el-table__header th.el-table__cell:first-child) {
+  border-radius: 4px 0 0 4px;
+}
+
+.recent-reports-table :deep(.el-table__header th.el-table__cell:last-child) {
+  border-radius: 0 4px 4px 0;
+}
+
+.recent-reports-table :deep(.el-table__body td.el-table__cell) {
+  border-bottom: 1px solid #f0f2f5;
+  padding: 12px 16px;
+  vertical-align: middle;
+}
+
+.recent-reports-table :deep(.el-table__body td.el-table__cell:not(:first-child) .cell) {
+  color: #2d3139;
+  white-space: nowrap;
+}
+
+.industry-report-name__pill {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  padding: 6px 10px;
+  border-radius: 4px;
+  background: transparent;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  line-height: 1.4;
+  font-size: 13px;
+}
+
+.industry-report-name {
+  color: #606266;
+}
+
+.industry-report-name--link {
+  color: #409eff;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.industry-report-name--link:hover {
+  color: #66b1ff;
+  text-decoration: none;
+}
+</style>

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

@@ -0,0 +1,309 @@
+<template>
+  <div class="industry-page">
+    <PageHeader title="IR-DEMO" />
+
+    <main ref="pageBodyRef" class="industry-page__body" :class="{ 'is-scrollable': needsPageScroll }">
+      <section class="industry-hero">
+        <h2 class="industry-hero__title">AI產業分析報告</h2>
+        <p class="industry-hero__desc">
+          基於你選擇的模型、行業與年份，並結合上傳或雲端引用的資料，自動生成結構化的風控分析報告。
+        </p>
+        <p class="industry-hero__desc">
+          你可以從標準模板開始，逐章生成與調整內容，最終輸出可複用、可審閱的完整報告。
+        </p>
+
+        <div class="industry-hero__actions">
+          <template v-for="action in heroActions" :key="action.id">
+            <el-badge v-if="action.id === 'admin-sim'" :value="200" :max="99" type="danger"
+              :badge-style="{ marginRight: '5px', marginTop: '-5px' }" class="industry-hero__action-badge">
+              <button type="button" class="app-btn" @click="handleHeroAction(action)">
+                {{ action.label }}
+              </button>
+            </el-badge>
+            <button v-else type="button" class="app-btn" @click="handleHeroAction(action)">
+              {{ action.label }}
+            </button>
+          </template>
+        </div>
+      </section>
+
+      <section ref="reportsSectionRef" 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>
+
+    <CapsuleScrollbar
+      ref="capsuleScrollbarRef"
+      :scroll-el="pageBodyRef"
+      :anchor-el="reportsSectionRef"
+      :active="needsPageScroll"
+      :visible-ratio="2 / 3"
+      :right-offset-px="1"
+      :auto-hide-after-ms="3000"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import genEntryApi from '@/api/modules/gen-ai/gen-entry/index'
+import type { RecentReport } from '@/types/gen-ai/gen-entry/index'
+import {
+  bindViewportBodyHeight,
+  lockDocumentScroll,
+} from '@/utils/gen-ai-scroll'
+import {
+  navigateToReportCenter,
+  openManagementCenter,
+  openModelManager,
+  openReportCenter,
+  openTemplateCenter,
+} from '@/utils/gen-ai-navigation'
+import { Document } from '@element-plus/icons-vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import PageHeader from '@/components/PageHeader.vue'
+import CapsuleScrollbar from '@/components/CapsuleScrollbar.vue'
+import RecentReportsTable from '../components/RecentReportsTable.vue'
+import { MOCK_RECENT_REPORTS } from './mockData'
+
+const DEFAULT_VISIBLE_ROWS = 10
+
+const router = useRouter()
+const recentReports = ref<RecentReport[]>([...MOCK_RECENT_REPORTS])
+
+function isRecentReportList(data: unknown): data is RecentReport[] {
+  return Array.isArray(data) && data.length > 0 && typeof data[0]?.id === 'string'
+}
+
+async function loadRecentReports() {
+  try {
+    const data = await genEntryApi.fetchGenAiReportListData({})
+    if (isRecentReportList(data)) {
+      recentReports.value = data
+    }
+  } catch {
+    // 介面不可用時保留 mock 資料
+  }
+}
+
+const pageBodyRef = ref<HTMLElement | null>(null)
+const reportsSectionRef = ref<HTMLElement | null>(null)
+const tableRef = ref<InstanceType<typeof RecentReportsTable> | null>(null)
+const needsPageScroll = ref(false)
+const capsuleScrollbarRef = ref<InstanceType<typeof CapsuleScrollbar> | 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 detectPageScroll() {
+  await nextTick()
+  await new Promise<void>((resolve) => {
+    cancelAnimationFrame(measureRafId)
+    measureRafId = requestAnimationFrame(() => {
+      measureRafId = requestAnimationFrame(() => resolve())
+    })
+  })
+
+  const body = pageBodyRef.value
+  if (!body) return
+
+  const prevScrollable = body.classList.contains('is-scrollable')
+  if (!prevScrollable) {
+    body.classList.add('is-scrollable')
+  }
+
+  const overflows = body.scrollHeight > body.clientHeight + 1
+  needsPageScroll.value = overflows
+
+  if (!overflows) {
+    body.classList.remove('is-scrollable')
+  }
+
+  tableRef.value?.doLayout()
+  capsuleScrollbarRef.value?.refresh()
+}
+
+function scheduleDetectPageScroll() {
+  cancelAnimationFrame(measureRafId)
+  measureRafId = requestAnimationFrame(() => {
+    void detectPageScroll()
+  })
+}
+
+function handleMoreReports() {
+  navigateToReportCenter(router)
+}
+
+onMounted(() => {
+  void loadRecentReports().then(() => scheduleDetectPageScroll())
+  if (pageBodyRef.value) {
+    cleanupBodyHeight = bindViewportBodyHeight(pageBodyRef.value, {
+      subtractSelector: '.page-header',
+      subtractRoot: pageBodyRef.value.parentElement ?? undefined,
+    })
+    resizeObserver = new ResizeObserver(() => scheduleDetectPageScroll())
+    resizeObserver.observe(pageBodyRef.value)
+  }
+  cleanupLock = lockDocumentScroll()
+  window.addEventListener('resize', scheduleDetectPageScroll)
+  scheduleDetectPageScroll()
+})
+
+onUnmounted(() => {
+  cancelAnimationFrame(measureRafId)
+  resizeObserver?.disconnect()
+  window.removeEventListener('resize', scheduleDetectPageScroll)
+  cleanupBodyHeight?.()
+  cleanupLock?.()
+})
+
+watch(displayedReports, () => {
+  scheduleDetectPageScroll()
+})
+
+const heroActions = [
+  { id: 'new-report', label: '新建報告' },
+  { id: 'report-sim', label: '報告中心' },
+  { id: 'template-sim', label: '模板中心' },
+  { id: 'admin-sim', label: '管理中心' },
+] as const
+
+function handleHeroAction(action: (typeof heroActions)[number]) {
+  if (action.id === 'new-report') {
+    openTemplateCenter(router)
+  }
+  if (action.id === 'report-sim') {
+    openReportCenter(router)
+  }
+  if (action.id === 'template-sim') {
+    openModelManager(router)
+  }
+  if (action.id === 'admin-sim') {
+    openManagementCenter(router)
+  }
+}
+
+function openReport(report: RecentReport) {
+  openModelManager(router, { id: report.id })
+}
+</script>
+
+<style scoped>
+.industry-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+  background: #fff;
+}
+
+.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-page__body.is-scrollable {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.industry-hero {
+  flex-shrink: 0;
+  text-align: center;
+  margin-bottom: 48px;
+}
+
+.industry-hero__title {
+  margin: 0 0 20px;
+  font-size: 28px;
+  font-weight: 700;
+  color: #1a1a1a;
+}
+
+.industry-hero__desc {
+  margin: 0 0 8px;
+  font-size: 14px;
+  line-height: 1.7;
+  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: 0 0 auto;
+}
+
+.industry-reports__title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 16px;
+  padding: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #1a1a1a;
+  text-align: left;
+  width: 100%;
+}
+
+.industry-reports__title-icon {
+  font-size: 18px;
+  color: #606266;
+}
+
+.industry-reports__more {
+  display: inline-block;
+  margin: 12px 0 0;
+  padding: 0;
+  font-size: 14px;
+  color: #409eff;
+  text-decoration: none;
+  cursor: pointer;
+  text-align: left;
+}
+
+.industry-reports__more:hover {
+  color: #66b1ff;
+  text-decoration: none;
+}
+</style>
+
+<style>
+.industry-hero__action-badge .el-badge__content.el-badge__content--danger.is-fixed {
+  margin-right: 10px !important;
+  margin-top: -5px !important;
+}
+</style>