aegon-lv82 1.0.0

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

@@ -0,0 +1,302 @@
+<template>
+  <section class="report-template-picker">
+    <section class="template-center-hero">
+      <h2 class="template-center-hero__title">選擇模板</h2>
+      <p class="template-center-hero__desc gen-ai-page-hero-desc">點擊卡片進入詳情與章節預覽</p>
+    </section>
+
+    <section class="template-center-toolbar">
+      <div class="template-center-toolbar__controls">
+        <div class="template-center-toolbar__right">
+          <label class="template-center-field">
+            <span class="gen-ai-filter-field-label">單位</span>
+            <el-select
+              v-model="unitFilter"
+              placeholder=""
+              clearable
+              class="template-center-field__select"
+            >
+              <el-option v-for="item in unitOptions" :key="item" :label="item" :value="item" />
+            </el-select>
+          </label>
+
+          <label class="template-center-field">
+            <span class="gen-ai-filter-field-label">Search</span>
+            <el-input v-model="keyword" clearable class="template-center-field__input" />
+          </label>
+
+          <button
+            type="button"
+            class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--primary"
+            @click="handleRefresh"
+          >
+            Refresh
+          </button>
+        </div>
+      </div>
+    </section>
+
+    <div class="report-template-picker__card-grid">
+      <div
+        v-for="row in paginatedTemplates"
+        :key="row.id"
+        class="report-template-picker__card-hit"
+        @click="handleCardClick(row)"
+      >
+        <ModelCard :template="row" :show-actions="false" />
+      </div>
+    </div>
+
+    <GenAiPagination
+      v-model:current-page="currentPage"
+      v-model:page-size="pageSize"
+      :page-sizes="[4]"
+      :total="filteredTemplates.length"
+    />
+  </section>
+</template>
+
+<script lang="ts">
+export {
+  REPORT_TEMPLATE_CARDS,
+  REPORT_TEMPLATE_ITEMS,
+  fetchReportTemplateList,
+  resolveReportTemplateById,
+} from '../report-template-data'
+export type { ReportTemplateCard, TemplateItem } from '../report-template-data'
+</script>
+
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { computed, onMounted, ref, watch } from 'vue'
+import {
+  REPORT_TEMPLATE_ITEMS,
+  fetchReportTemplateList,
+  templateItemToReportCard,
+  type ReportTemplateCard,
+  type TemplateItem,
+} from '../report-template-data'
+import { GenAiPagination, ModelCard } from '../../common'
+
+const unitOptions = ['風險管理部', '授信審批部', '合規部', '公司金融部']
+
+const unitFilter = ref('')
+const keyword = ref('')
+const currentPage = ref(1)
+const pageSize = ref(4)
+const templates = ref<TemplateItem[]>([...REPORT_TEMPLATE_ITEMS])
+
+const emit = defineEmits<{
+  select: [template: ReportTemplateCard]
+}>()
+
+function isTemplateList(data: unknown) {
+  return Array.isArray(data) && data.length > 0 && typeof data[0]?.id === 'string'
+}
+
+async function loadTemplates(force = false) {
+  const data = await fetchReportTemplateList(
+    {
+      unit: unitFilter.value || undefined,
+      keyword: keyword.value.trim() || undefined,
+    },
+    { force }
+  )
+  if (isTemplateList(data)) {
+    templates.value = data as TemplateItem[]
+  }
+}
+
+function handleCardClick(row: TemplateItem) {
+  emit('select', templateItemToReportCard(row))
+}
+
+function handleRefresh() {
+  keyword.value = ''
+  unitFilter.value = ''
+  void loadTemplates(true)
+  ElMessage.success('已重新整理')
+}
+
+const filteredTemplates = computed(() => {
+  const kw = keyword.value.trim().toLowerCase()
+  return templates.value.filter((item) => {
+    const unitOk = !unitFilter.value || item.unit === unitFilter.value
+    const keywordOk =
+      !kw ||
+      item.name.toLowerCase().includes(kw) ||
+      item.description.toLowerCase().includes(kw) ||
+      item.author.toLowerCase().includes(kw) ||
+      (item.industry || '').toLowerCase().includes(kw)
+    return unitOk && keywordOk
+  })
+})
+
+const paginatedTemplates = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  return filteredTemplates.value.slice(start, start + pageSize.value)
+})
+
+watch([keyword, unitFilter], () => {
+  currentPage.value = 1
+})
+
+watch(filteredTemplates, (list) => {
+  const maxPage = Math.max(1, Math.ceil(list.length / pageSize.value))
+  if (currentPage.value > maxPage) currentPage.value = maxPage
+})
+
+onMounted(() => {
+  void loadTemplates()
+})
+</script>
+
+<style scoped>
+.report-template-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-height: 0;
+  overflow: visible;
+  --gen-ai-fs-hero: clamp(26px, calc(32 * 100vw / 1920), 32px);
+  --gen-ai-fw-bold: 700;
+  --report-accent: #c53355;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #2d3139;
+}
+
+.template-center-hero {
+  text-align: center;
+  margin-bottom: 28px;
+}
+
+.template-center-hero__title {
+  margin: 0 0 10px;
+  font-size: var(--gen-ai-fs-hero);
+  font-weight: var(--gen-ai-fw-bold);
+  color: #1a1a1a;
+}
+
+.template-center-hero__desc {
+  margin: 0;
+}
+
+.gen-ai-page-hero-desc {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.7;
+  color: #666;
+}
+
+.template-center-toolbar {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.template-center-toolbar__controls {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.template-center-toolbar__right {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.template-center-field {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.gen-ai-filter-field-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #606266;
+  white-space: nowrap;
+}
+
+.template-center-field__select {
+  width: 160px;
+}
+
+.template-center-field__input {
+  width: 200px;
+}
+
+.template-center-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  padding: 0 16px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.template-center-toolbar-btn--primary {
+  background: #c53355;
+  border-color: #c53355;
+  color: #fff;
+}
+
+.template-center-toolbar-btn--primary:hover:not(:disabled) {
+  background: #a82b48;
+  border-color: #a82b48;
+}
+
+.report-template-picker__card-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 20px;
+  align-items: stretch;
+  min-height: 0;
+}
+
+.report-template-picker__card-hit {
+  min-width: 0;
+  min-height: 520px;
+  cursor: pointer;
+}
+
+.report-template-picker__card-hit :deep(.template-center-card) {
+  height: 100%;
+  min-height: 0;
+}
+
+.report-template-picker :deep(.gen-ai-pagination) {
+  margin-top: 16px;
+}
+
+.report-template-picker :deep(.gen-ai-pagination .el-pagination__sizes) {
+  display: none;
+}
+
+@media (max-width: 1400px) {
+  .report-template-picker__card-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 1100px) {
+  .report-template-picker__card-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 720px) {
+  .report-template-picker__card-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

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

@@ -0,0 +1,148 @@
+<template>
+  <aside class="report-workflow-sidebar" :class="{ 'is-collapsed': collapsed }">
+    <div v-show="!collapsed" class="report-workflow-sidebar__body">
+      <ReportConfigPanel />
+
+      <ReportSourceFileSummary v-if="showEditorPanel" />
+
+      <ReportCollapsibleSection
+        ref="sourcesSectionRef"
+        v-model:open="sourcesOpen"
+        title="資訊源"
+        card-hover
+        class="report-workflow-sidebar__sources-wrap"
+        :class="{ 'is-collapsed': !sourcesOpen }"
+        @before-collapse="closeSourcesOverlays"
+      >
+        <ReportSourcesPanel
+          ref="sourcesPanelRef"
+          sync-workflow
+          embedded
+          :section-boundary-el="sourcesSectionRoot"
+          :panel-open="sourcesOpen"
+          :sources-view-mode="sourcesViewMode"
+          :class="{ 'is-section-collapsed': !sourcesOpen }"
+          @submitted="collapseSources"
+        />
+      </ReportCollapsibleSection>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { ReportCollapsibleSection } from '../../common'
+import { useReportWorkflow } from '../useReportWorkflow'
+import ReportConfigPanel from './ReportConfigPanel.vue'
+import ReportSourceFileSummary from './ReportSourceFileSummary.vue'
+import ReportSourcesPanel from './ReportSourcesPanel.vue'
+
+withDefaults(
+  defineProps<{
+    /** 由父級 Divider 控制，收起後不佔佈局 */
+    collapsed?: boolean
+  }>(),
+  {
+    collapsed: false,
+  }
+)
+
+const { promptRightPanel, modelStep } = useReportWorkflow()
+
+const showEditorPanel = computed(() => promptRightPanel.value !== 'settings')
+const sourcesViewMode = computed<'edit' | 'finalize'>(() =>
+  modelStep.value === 'prompt' && promptRightPanel.value === 'settings' ? 'finalize' : 'edit'
+)
+
+const sourcesOpen = ref(true)
+const sourcesSectionRef = ref<InstanceType<typeof ReportCollapsibleSection> | null>(null)
+const sourcesPanelRef = ref<InstanceType<typeof ReportSourcesPanel> | null>(null)
+const sourcesSectionRoot = computed(() => sourcesSectionRef.value?.rootRef ?? null)
+
+function closeSourcesOverlays(done: (hadOpenOverlays: boolean) => void) {
+  const hadOpen = sourcesPanelRef.value?.hasOpenOverlays() ?? false
+  if (hadOpen) {
+    sourcesPanelRef.value?.closeAllOverlays(true)
+  }
+  done(hadOpen)
+}
+
+function collapseSources() {
+  // sourcesOpen.value = false
+}
+</script>
+
+<style scoped>
+.report-workflow-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.report-workflow-sidebar.is-collapsed {
+  width: 0;
+  min-width: 0;
+  height: 0;
+  min-height: 0;
+  gap: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.report-workflow-sidebar__body {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto;
+  /* 陰影左右不被父級裁切 */
+  overflow: visible;
+}
+
+.report-workflow-sidebar__sources-wrap {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.report-workflow-sidebar__sources-wrap.is-collapsed {
+  flex: 0 0 auto;
+  min-height: auto;
+}
+
+.report-workflow-sidebar__sources-wrap :deep(.report-collapsible-section) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.report-workflow-sidebar__sources-wrap.is-collapsed :deep(.report-collapsible-section) {
+  flex: 0 0 auto;
+  min-height: auto;
+  height: auto;
+}
+
+.report-workflow-sidebar__sources-wrap :deep(.report-collapsible-section__body) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+}
+
+.report-workflow-sidebar__sources-wrap :deep(.report-collapsible-section__toggle) {
+  border-bottom: none;
+}
+
+.report-workflow-sidebar__sources-wrap.is-collapsed :deep(.report-collapsible-section__toggle) {
+  padding-bottom: 0;
+}
+</style>