aegon-gen 1.0.0

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

@@ -0,0 +1,656 @@
+<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>