aegon-lv82 1.0.0

package/src/components/GEN-AI/index6.vue

@@ -0,0 +1,634 @@
+<template>
+  <div class="flex h-screen bg-[#F3F4F6] text-[#333]">
+    <main class="flex-1 overflow-y-auto p-12">
+      <div
+        class="max-w-5xl mx-auto bg-white shadow-sm border border-gray-100 rounded-sm p-10 min-h-screen relative"
+        id="report-container"
+      >
+        <!-- 导出按钮组（导出时会自动隐藏） -->
+        <div
+          class="absolute top-6 right-8 flex gap-4 no-print"
+          style="margin: 10px 0; text-align: end"
+        >
+          <el-button
+            @click="handleExportPDF"
+            size="small"
+            plain
+            type="danger"
+            :loading="isExporting"
+          >
+            匯出為PDF
+          </el-button>
+          <el-button
+            @click="handleExportWord"
+            size="small"
+            plain
+            type="danger"
+            :loading="isExporting"
+          >
+            匯出為Word
+          </el-button>
+          <el-button @click="handlePrint" size="small" plain type="success">
+            打印 / 另存為PDF
+          </el-button>
+        </div>
+
+        <!-- 可滚动的内容容器 -->
+        <div
+          ref="scrollContainer"
+          class="prose prose-slate max-w-none"
+          style="
+            margin: 0px;
+            padding: 10px;
+            border: 1px solid #ccc;
+            min-height: 600px;
+            max-height: 60vh;
+            overflow-y: auto;
+          "
+        >
+          <div class="font-bold flex items-center mb-5 text-lg border-t pt-6">
+            正文：
+            <Edit3Icon :size="18" class="ml-2 text-[#C54E5E] cursor-pointer" />
+          </div>
+
+          <div class="content-wrapper space-y-4">
+            <template v-for="(item, idx) in displaySequence" :key="idx">
+              <TypewriterText
+                v-if="item.type === 'text' && idx < activeIndex"
+                :text="item.content!"
+                :auto-start="idx === activeIndex - 1 && idx === lastStartedTextIndex"
+                @completed="onTextCompleted"
+                @typing="scrollToBottom"
+                class="text-paragraph"
+              />
+              <component
+                v-else-if="item.type === 'component' && idx < activeIndex"
+                :is="item.component"
+                class="my-4"
+                @ready="onComponentReady"
+              />
+            </template>
+          </div>
+
+          <span
+            v-if="activeIndex < displaySequence.length"
+            class="inline-block w-[2px] h-[18px] bg-[#C54E5E] animate-pulse ml-1 align-middle"
+          ></span>
+        </div>
+      </div>
+    </main>
+
+    <aside class="w-80 bg-white border-l border-gray-200 p-6 no-print">
+      <h3 class="font-bold text-gray-700 mb-6">生成報告設置</h3>
+      <p class="text-sm text-gray-500">✨ 完整图文混排 + 打字机效果</p>
+      <p class="text-xs text-gray-400 mt-2">
+        包含：带状态表格 / 按钮组 / 图标集 / 完整文本段落 / ECharts混合图表<br />
+        上半部分+下半部分全部按顺序逐字/逐组件展示
+      </p>
+      <el-button @click="restartDemo" type="danger" plain class="w-full mt-6"> 重新播放 </el-button>
+      <div class="mt-6 text-xs text-gray-400 border-t pt-4">
+        💡 提示：<br />
+        • 表格、按钮、图标、图表均会逐步出现<br />
+        • 文本逐字显示，完成后自动展示下一项<br />
+        • PDF/Word导出前自动等待所有内容渲染完成
+      </div>
+    </aside>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  defineComponent,
+  h,
+  markRaw,
+  type Component,
+  nextTick,
+} from 'vue'
+import { Edit3Icon } from 'lucide-vue-next'
+import { ElButton, ElTable, ElTableColumn, ElIcon } from 'element-plus'
+import { Platform, Eleme, DeleteFilled, Delete } from '@element-plus/icons-vue'
+import * as echarts from 'echarts'
+import html2canvas from 'html2canvas'
+import jsPDF from 'jspdf'
+import { asBlob } from 'html-docx-js-typescript'
+import { saveAs } from 'file-saver'
+
+// ---------- 滚动容器引用 ----------
+const scrollContainer = ref<HTMLElement | null>(null)
+
+// 滚动到底部（平滑滚动）
+const scrollToBottom = () => {
+  nextTick(() => {
+    if (scrollContainer.value) {
+      scrollContainer.value.scrollTo({
+        top: scrollContainer.value.scrollHeight,
+        behavior: 'smooth',
+      })
+    }
+  })
+}
+
+// ---------- 导出工具函数 ----------
+const isExporting = ref(false)
+
+const waitForFullDisplay = async () => {
+  if (activeIndex.value < displaySequence.value.length) {
+    activeIndex.value = displaySequence.value.length
+    await nextTick()
+    await new Promise((resolve) => setTimeout(resolve, 500))
+  }
+}
+
+const exportToPDF = async (containerId: string, filename: string) => {
+  const element = document.getElementById(containerId)
+  if (!element) return
+  try {
+    isExporting.value = true
+    await waitForFullDisplay()
+    const cursor = document.querySelector('.animate-pulse')
+    if (cursor) (cursor as HTMLElement).style.display = 'none'
+
+    const canvas = await html2canvas(element, {
+      scale: 3,
+      backgroundColor: '#ffffff',
+      useCORS: true,
+      logging: false,
+      windowWidth: element.scrollWidth,
+      windowHeight: element.scrollHeight,
+      onclone: (clonedDoc, _element) => {
+        const charts = clonedDoc.querySelectorAll('.echarts-container')
+        charts.forEach((chart: any) => {
+          chart.style.height = '400px'
+        })
+      },
+    })
+    const imgData = canvas.toDataURL('image/png')
+    const pdf = new jsPDF('p', 'mm', 'a4')
+    const imgWidth = 210
+    const pageHeight = 297
+    const imgHeight = (canvas.height * imgWidth) / canvas.width
+    let heightLeft = imgHeight
+    let position = 0
+    pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight)
+    heightLeft -= pageHeight
+    while (heightLeft > 0) {
+      position = heightLeft - imgHeight
+      pdf.addPage()
+      pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight)
+      heightLeft -= pageHeight
+    }
+    pdf.save(`${filename}.pdf`)
+    if (cursor) (cursor as HTMLElement).style.display = ''
+  } catch (error) {
+    console.error('PDF导出失败:', error)
+    alert('PDF导出失败，请重试')
+  } finally {
+    isExporting.value = false
+  }
+}
+
+const exportToWord = async (containerId: string, filename: string) => {
+  const element = document.getElementById(containerId)
+  if (!element) return
+
+  try {
+    isExporting.value = true
+    await waitForFullDisplay()
+
+    const cloneContainer = element.cloneNode(true) as HTMLElement
+    const chartDivs = cloneContainer.querySelectorAll('.echarts-container')
+    const originalCharts = element.querySelectorAll('.echarts-container canvas')
+
+    chartDivs.forEach((div, index) => {
+      const canvas = originalCharts[index] as HTMLCanvasElement
+      if (canvas) {
+        const img = document.createElement('img')
+        img.src = canvas.toDataURL('image/png')
+        img.width = 600
+        div.innerHTML = ''
+        div.appendChild(img)
+      }
+    })
+
+    const allElements = cloneContainer.querySelectorAll('*')
+    allElements.forEach((el) => {
+      const htmlEl = el as HTMLElement
+      const style = window.getComputedStyle(el)
+      htmlEl.style.color = style.color
+      htmlEl.style.fontSize = style.fontSize
+      htmlEl.style.fontFamily = style.fontFamily
+      htmlEl.style.fontWeight = style.fontWeight
+      htmlEl.style.backgroundColor = style.backgroundColor
+      if (htmlEl.tagName === 'TABLE') {
+        htmlEl.style.borderCollapse = 'collapse'
+        htmlEl.style.width = '100%'
+      }
+      if (htmlEl.tagName === 'TD' || htmlEl.tagName === 'TH') {
+        htmlEl.style.border = '1px solid #dee2e6'
+        htmlEl.style.padding = '8px'
+      }
+    })
+
+    cloneContainer.querySelectorAll('.no-print, .animate-pulse').forEach((el) => el.remove())
+
+    const contentHtml = cloneContainer.innerHTML
+    const fullHtml = `
+      <!DOCTYPE html>
+      <html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
+      <head>
+        <meta charset="utf-8">
+        <style>
+          @page {
+            size: 21cm 29.7cm;
+            margin: 2cm;
+          }
+          body {
+            font-family: "Microsoft YaHei", "SimSun", sans-serif;
+          }
+          .text-paragraph { margin-bottom: 15pt; line-height: 1.5; }
+        </style>
+      </head>
+      <body>
+        ${contentHtml}
+      </body>
+      </html>
+    `
+
+    const blob = await asBlob(fullHtml, {
+      orientation: 'portrait',
+      margins: { top: 720, right: 720, bottom: 720, left: 720 },
+    })
+
+    saveAs(blob as Blob, `${filename}.docx`)
+  } catch (error) {
+    console.error('Word 导出失败:', error)
+    alert('Word 导出失败，请检查浏览器控制台')
+  } finally {
+    isExporting.value = false
+  }
+}
+
+const handleExportPDF = () => exportToPDF('report-container', '图文报告_房地产整合')
+const handleExportWord = () => exportToWord('report-container', '图文报告_房地产整合')
+const handlePrint = () => window.print()
+
+// ---------- 报告文本 ----------
+const rawReport = `2024年香港房地產市場整體呈現「價跌量穩、租金偏強、商業不振」的分化局面，全年各類物業價格普遍下調，但成交及租賃需求在政策放寬和人口流入支持下較前兩年有所改善。住宅方面，撤銷所有樓市「辣招」、放寬按揭成數及利率見頂後回落，帶動一手主導的成交回升，但無礙樓價全年再跌約中個百分比，反映經濟及供應壓力仍然主導價格走勢。
+
+在住宅市場，本年特點包括：
+一、銷售量回升、價格續調：2024年在全面撤辣及按揭寬鬆後，全年住宅買賣宗數按年錄得逾兩成增長，但全年樓價仍錄得約6%至7%的跌幅，延續過去兩年的調整趨勢。
+二、供應顯著增加：私樓落成量約2.4萬個單位，較2023年大幅增加約七成，主要為中小型單位，為後市價格帶來持續壓力。
+三、租金走勢優於樓價：在人口及人才計劃帶動下，住宅租金全年錄得中低個位升幅，租金指數距歷史高位僅約數個百分點，令小型單位的平均回報率升至近十多年高位水平。
+
+在非住宅方面，2024年為商廈及舖位市場的「谷底年」，寫字樓空置率創逾十年新高，商業成交金額及宗數均跌至有紀錄以來低位。
+
+下半部分额外内容：以下是按钮组与折柱图展示区。`
+
+const rawParagraphs = rawReport.split(/\n\s*\n/).filter((p) => p.trim().length > 0)
+const [para1 = '', para2 = '', para3 = '', paraExtra] = rawParagraphs
+
+// ---------- 组件定义（markRaw） ----------
+const ElStatusTable = markRaw(
+  defineComponent({
+    name: 'ElStatusTable',
+    setup(_, { emit }) {
+      const tableData = [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路1518弄',
+          status: 'success',
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路1518弄',
+          status: 'info',
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路1518弄',
+          status: 'warning',
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路1518弄',
+          status: 'danger',
+        },
+      ]
+      const rowClassName = ({ row }: { row: any }) => {
+        if (row.status === 'success') return 'success-row'
+        if (row.status === 'info') return 'info-row'
+        if (row.status === 'warning') return 'warning-row'
+        if (row.status === 'danger') return 'danger-row'
+        return ''
+      }
+      onMounted(() => emit('ready'))
+      return () =>
+        h(
+          ElTable,
+          {
+            data: tableData,
+            style: { width: '100%' },
+            rowClassName,
+            border: true,
+          },
+          () => [
+            h(ElTableColumn, { prop: 'date', label: '日期', width: '120' }),
+            h(ElTableColumn, { prop: 'name', label: '姓名', width: '100' }),
+            h(ElTableColumn, { prop: 'address', label: '地址' }),
+            h(
+              ElTableColumn,
+              { label: '状态', width: '100' },
+              {
+                default: ({ row }: any) => {
+                  let type: 'success' | 'info' | 'warning' | 'danger' = 'success'
+                  if (row.status === 'info') type = 'info'
+                  if (row.status === 'warning') type = 'warning'
+                  if (row.status === 'danger') type = 'danger'
+                  return h(ElButton, { size: 'small', type, plain: true }, () => row.status)
+                },
+              }
+            ),
+          ]
+        )
+    },
+  })
+)
+
+const ButtonGroup = markRaw(
+  defineComponent({
+    setup(_, { emit }) {
+      onMounted(() => emit('ready'))
+      return () =>
+        h('div', { class: 'flex flex-wrap gap-3 my-2' }, [
+          h(ElButton, { type: 'primary' }, () => '主要按钮'),
+          h(ElButton, { type: 'success' }, () => '成功按钮'),
+          h(ElButton, { type: 'info' }, () => '信息按钮'),
+          h(ElButton, { type: 'warning' }, () => '警告按钮'),
+          h(ElButton, { type: 'danger' }, () => '危险按钮'),
+          h(ElButton, {}, () => '默认按钮'),
+          h(ElButton, { round: true }, () => '圆角按钮'),
+        ])
+    },
+  })
+)
+
+const IconShowcase = markRaw(
+  defineComponent({
+    setup(_, { emit }) {
+      onMounted(() => emit('ready'))
+      return () =>
+        h('div', { class: 'flex gap-4 items-center py-3 border-y border-gray-100' }, [
+          h(ElIcon, { size: 24, color: '#409EFF' }, () => h(Platform)),
+          h(ElIcon, { size: 24, color: '#67C23A' }, () => h(Eleme)),
+          h(ElIcon, { size: 24, color: '#F56C6C' }, () => h(DeleteFilled)),
+          h(ElIcon, { size: 24, color: '#E6A23C' }, () => h(Delete)),
+          h(
+            'span',
+            { class: 'text-sm text-gray-500 ml-2' },
+            'el-icon-platform-eleme / eleme / delete-filled / delete'
+          ),
+        ])
+    },
+  })
+)
+
+const EChartsMixed = markRaw(
+  defineComponent({
+    name: 'EChartsMixed',
+    setup(_, { emit }) {
+      const chartRef = ref<HTMLDivElement | null>(null)
+      let chartInstance: echarts.ECharts | null = null
+      const initChart = () => {
+        if (!chartRef.value) return
+        chartInstance = echarts.init(chartRef.value)
+        const option = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: { type: 'cross', crossStyle: { color: '#999' } },
+          },
+          toolbox: {
+            feature: {
+              dataView: { show: true, readOnly: false },
+              magicType: { show: true, type: ['line', 'bar'] },
+              restore: { show: true },
+              saveAsImage: { show: true },
+            },
+          },
+          legend: { data: ['Evaporation', 'Precipitation', 'Temperature'] },
+          xAxis: [
+            {
+              type: 'category',
+              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+              axisPointer: { type: 'shadow' },
+            },
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: 'Precipitation',
+              min: 0,
+              max: 250,
+              interval: 50,
+              axisLabel: { formatter: '{value} ml' },
+            },
+            {
+              type: 'value',
+              name: 'Temperature',
+              min: 0,
+              max: 25,
+              interval: 5,
+              axisLabel: { formatter: '{value} °C' },
+            },
+          ],
+          series: [
+            {
+              name: 'Evaporation',
+              type: 'bar',
+              tooltip: { valueFormatter: (value: any) => value + ' ml' },
+              data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6],
+            },
+            {
+              name: 'Precipitation',
+              type: 'bar',
+              tooltip: { valueFormatter: (value: any) => value + ' ml' },
+              data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6],
+            },
+            {
+              name: 'Temperature',
+              type: 'line',
+              yAxisIndex: 1,
+              tooltip: { valueFormatter: (value: any) => value + ' °C' },
+              data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3],
+            },
+          ],
+        }
+        chartInstance.setOption(option)
+        window.addEventListener('resize', () => chartInstance?.resize())
+        emit('ready')
+      }
+      onMounted(() => {
+        nextTick(() => initChart())
+      })
+      onUnmounted(() => {
+        chartInstance?.dispose()
+      })
+      return () =>
+        h('div', {
+          ref: chartRef,
+          style: { width: '100%', height: '400px' },
+          class: 'echarts-container',
+        })
+    },
+  })
+)
+
+// ---------- 显示序列 ----------
+type DisplayItem = { type: 'text'; content: string } | { type: 'component'; component: Component }
+
+const displaySequence = ref<DisplayItem[]>([
+  { type: 'text', content: para1 },
+  { type: 'component', component: ElStatusTable },
+  { type: 'text', content: '📌 带状态表格（高亮区分成功/信息/警告/危险）' },
+  { type: 'text', content: para2 },
+  { type: 'component', component: ButtonGroup },
+  { type: 'component', component: IconShowcase },
+  { type: 'text', content: para3 },
+  {
+    type: 'text',
+    content: paraExtra || '📊 下半部分：按钮组与折柱图详细数据展示',
+  },
+  { type: 'component', component: ButtonGroup },
+  { type: 'component', component: EChartsMixed },
+  { type: 'text', content: '✅ 以上为完整报告，包含上下两部分全部内容。' },
+])
+
+// ---------- 顺序控制 ----------
+const activeIndex = ref(0)
+const lastStartedTextIndex = ref(-1)
+
+const nextItem = () => {
+  if (activeIndex.value < displaySequence.value.length) {
+    activeIndex.value++
+    const newItem = displaySequence.value[activeIndex.value - 1]
+    if (!newItem) return
+    if (newItem.type === 'text') {
+      lastStartedTextIndex.value = activeIndex.value - 1
+    }
+  }
+  scrollToBottom()
+}
+
+const onTextCompleted = () => nextItem()
+const onComponentReady = () => nextItem()
+
+const startSequence = () => {
+  if (displaySequence.value.length === 0) return
+  activeIndex.value = 1
+  const firstItem = displaySequence.value[0]
+  if (firstItem?.type === 'text') lastStartedTextIndex.value = 0
+  scrollToBottom()
+}
+
+const restartDemo = () => {
+  activeIndex.value = 0
+  lastStartedTextIndex.value = -1
+  nextTick(() => startSequence())
+}
+
+onMounted(() => startSequence())
+
+// ---------- 打字机组件（增强：每打字一个字符都触发滚动） ----------
+const TypewriterText = defineComponent({
+  name: 'TypewriterText',
+  props: {
+    text: { type: String, required: true },
+    autoStart: { type: Boolean, default: false },
+  },
+  emits: ['completed', 'typing'],
+  setup(props, { emit }) {
+    const displayed = ref('')
+    let interval: number | null = null
+    let isStarted = false
+
+    const startTyping = () => {
+      if (isStarted) return
+      isStarted = true
+      displayed.value = ''
+      let i = 0
+      interval = window.setInterval(() => {
+        if (i < props.text.length) {
+          displayed.value += props.text[i]
+          i++
+          emit('typing') // 每打一个字符触发滚动
+        } else {
+          if (interval) clearInterval(interval)
+          interval = null
+          emit('completed')
+        }
+      }, 28)
+    }
+
+    if (props.autoStart) startTyping()
+
+    return () => h('div', { class: 'typewriter-text' }, displayed.value)
+  },
+})
+</script>
+
+<style scoped>
+:deep(.el-table .success-row) {
+  background-color: #f0f9eb;
+}
+:deep(.el-table .info-row) {
+  background-color: #e6f7ff;
+}
+:deep(.el-table .warning-row) {
+  background-color: #fdf6ec;
+}
+:deep(.el-table .danger-row) {
+  background-color: #fef0f0;
+}
+.text-paragraph {
+  line-height: 1.8;
+  font-size: 15px;
+  letter-spacing: 0.01em;
+  color: #374151;
+  margin-bottom: 1rem;
+  white-space: pre-wrap;
+}
+.typewriter-text {
+  white-space: pre-wrap;
+}
+@media print {
+  .no-print {
+    display: none !important;
+  }
+}
+/* 针对滚动容器 */
+.prose.prose-slate.max-w-none::-webkit-scrollbar {
+  width: 8px; /* 垂直滚动条宽度 */
+  height: 8px; /* 水平滚动条高度（如有需要） */
+  display: none;
+}
+
+.prose.prose-slate.max-w-none::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 10px;
+}
+
+.prose.prose-slate.max-w-none::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 10px;
+}
+
+.prose.prose-slate.max-w-none::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+</style>