aegon-gen 1.0.0

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

@@ -0,0 +1,623 @@
+<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">
+          <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>
+        </div>
+
+        <div class="prose prose-slate max-w-none">
+          <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">
+              <!-- 文本段落：使用独立打字机组件，仅当索引小于 activeIndex 时才渲染 -->
+              <TypewriterText
+                v-if="item.type === 'text' && idx < activeIndex"
+                :text="item.content!"
+                :auto-start="
+                  idx === activeIndex - 1 && idx === lastStartedTextIndex
+                "
+                @completed="onTextCompleted(idx)"
+                class="text-paragraph"
+              />
+              <!-- 普通组件：同样在索引小于 activeIndex 时渲染 -->
+              <component
+                v-else-if="item.type === 'component' && idx < activeIndex"
+                :is="item.component"
+                class="my-4"
+              />
+            </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">✨ ECharts 折柱图 + 打字机效果</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 />
+        • ECharts 图表支持缩放/保存/切换类型<br />
+        • 图标、表格、图表会随打字顺序逐步出现
+      </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 { saveAs } from "file-saver";
+
+// ---------- 导出工具函数（修复版）----------
+const isExporting = ref(false);
+
+// 等待所有内容完全显示（若未完成则自动完成）
+const waitForFullDisplay = async () => {
+  if (activeIndex.value < displaySequence.value.length) {
+    // 强制完成所有项目：将 activeIndex 设为末尾，并等待下一轮渲染
+    activeIndex.value = displaySequence.value.length;
+    // 等待 Vue 更新 DOM 和 ECharts 图表渲染
+    await nextTick();
+    // 给 ECharts 额外时间渲染（如果有图表组件）
+    await new Promise((resolve) => setTimeout(resolve, 500));
+  }
+};
+
+const exportToPDF = async (containerId: string, filename: string) => {
+  const element = document.getElementById(containerId);
+  if (!element) {
+    console.error("Container not found");
+    return;
+  }
+
+  try {
+    isExporting.value = true;
+    // 确保所有内容已完全显示
+    await waitForFullDisplay();
+
+    const loadingEl = document.createElement("div");
+    loadingEl.innerText = "正在生成PDF，请稍候...";
+    loadingEl.style.cssText = `
+      position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
+      background: rgba(0,0,0,0.7); color: white; padding: 10px 20px;
+      border-radius: 8px; z-index: 9999; font-size: 14px;
+    `;
+    document.body.appendChild(loadingEl);
+
+    // 临时移除可能干扰导出的元素（如动画光标）
+    const cursor = document.querySelector(".animate-pulse");
+    if (cursor) (cursor as HTMLElement).style.display = "none";
+
+    const canvas = await html2canvas(element, {
+      scale: 2,
+      useCORS: true,
+      logging: false,
+      backgroundColor: "#ffffff",
+      onclone: (clonedDoc, _element) => {
+        // 在克隆文档中确保图表样式正确
+        const charts = clonedDoc.querySelectorAll(".echarts-container");
+        charts.forEach((chart) => {
+          (chart as HTMLElement).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`);
+    document.body.removeChild(loadingEl);
+    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) {
+    console.error("Container not found");
+    return;
+  }
+
+  try {
+    isExporting.value = true;
+    await waitForFullDisplay();
+
+    const cloneElement = element.cloneNode(true) as HTMLElement;
+    // 移除所有按钮和交互元素（包括导出按钮、侧边栏等）
+    const noPrintElements = cloneElement.querySelectorAll(".no-print");
+    noPrintElements.forEach((el) => el.remove());
+    // 移除打字光标
+    const cursors = cloneElement.querySelectorAll(".animate-pulse");
+    cursors.forEach((el) => el.remove());
+
+    // 获取样式
+    const styles = document.querySelectorAll("style");
+    let styleHtml = "";
+    styles.forEach((style) => {
+      styleHtml += style.innerHTML;
+    });
+
+    const docHtml = `
+      <!DOCTYPE html>
+      <html>
+      <head>
+        <meta charset="UTF-8">
+        <title>${filename}</title>
+        <style>
+          body {
+            font-family: 'Segoe UI', 'Roboto', 'Noto Sans', sans-serif;
+            padding: 20px;
+            margin: 0 auto;
+            max-width: 1000px;
+          }
+          .el-table {
+            width: 100%;
+            border-collapse: collapse;
+          }
+          .el-table th, .el-table td {
+            border: 1px solid #ddd;
+            padding: 8px;
+          }
+          .success-row { background-color: #f0f9eb; }
+          .info-row { background-color: #e6f7ff; }
+          .warning-row { background-color: #fdf6ec; }
+          .danger-row { background-color: #fef0f0; }
+          .text-paragraph {
+            line-height: 1.8;
+            margin-bottom: 1rem;
+          }
+          ${styleHtml}
+        </style>
+      </head>
+      <body>
+        ${cloneElement.outerHTML}
+      </body>
+      </html>
+    `;
+
+    const blob = new Blob([docHtml], { type: "application/msword" });
+    saveAs(blob, `${filename}.doc`);
+  } catch (error) {
+    console.error("Word导出失败:", error);
+    alert("Word导出失败，请重试");
+  } finally {
+    isExporting.value = false;
+  }
+};
+
+const handleExportPDF = () =>
+  exportToPDF("report-container", "图文报告_房地产整合");
+const handleExportWord = () =>
+  exportToWord("report-container", "图文报告_房地产整合");
+
+// ---------- 报告文本 ----------
+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 = ""] = rawParagraphs;
+
+// ---------- 组件定义（markRaw）----------
+const ElStatusTable = markRaw(
+  defineComponent({
+    name: "ElStatusTable",
+    setup() {
+      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 "";
+      };
+      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() {
+      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() {
+      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() {
+      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());
+      };
+
+      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: "component", component: EChartsMixed },
+  {
+    type: "text",
+    content: "✅ 以上为整合 ECharts 图表与完整房地产报告的图文混排效果。",
+  },
+]);
+
+// ---------- 顺序显示控制 ----------
+const activeIndex = ref(0); // 当前已显示到第几个项目（从0开始，0表示未显示任何项目）
+const lastStartedTextIndex = ref(-1); // 记录当前正在打字的文本索引，用于 auto-start
+
+// 文本段落打字完成回调
+const onTextCompleted = (idx: number) => {
+  // 当前文本完成，显示下一个项目
+  if (idx === activeIndex.value - 1) {
+    // 注意：文本完成时 activeIndex 已经指向了该项目之后？不，逻辑是：当 activeIndex 增加时，会渲染新的项目。
+    // 此处需要将 activeIndex 增加1，以显示下一个项目
+    if (activeIndex.value < displaySequence.value.length) {
+      activeIndex.value++;
+      // 如果下一个项目是文本，则需要标记它开始打字
+      const nextItem = displaySequence.value[activeIndex.value - 1]; // 因为 activeIndex 刚增加，指向新显示的项目
+      if (nextItem?.type === "text") {
+        lastStartedTextIndex.value = activeIndex.value - 1;
+      }
+    }
+  }
+};
+
+// 启动顺序展示
+const startSequence = () => {
+  if (displaySequence.value.length === 0) return;
+  // 先显示第一个项目
+  activeIndex.value = 1;
+  const firstItem = displaySequence.value[0];
+  if (firstItem?.type === "text") {
+    lastStartedTextIndex.value = 0;
+  }
+};
+
+// 重置
+const restartDemo = () => {
+  activeIndex.value = 0;
+  lastStartedTextIndex.value = -1;
+  // 等待 Vue 更新后重新开始
+  nextTick(() => {
+    startSequence();
+  });
+};
+
+// 挂载时启动
+onMounted(() => {
+  startSequence();
+});
+
+// ---------- 打字机组件（独立控制每个文本段落的逐字显示）----------
+const TypewriterText = defineComponent({
+  name: "TypewriterText",
+  props: {
+    text: { type: String, required: true },
+    autoStart: { type: Boolean, default: false },
+  },
+  emits: ["completed"],
+  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++;
+        } 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;
+  }
+}
+</style>