aegon-gen 1.0.0

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

@@ -0,0 +1,568 @@
+<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="exportToPDF('report-container', '图文报告_房地产整合')"
+            size="small"
+            plain
+            type="danger"
+          >
+            匯出為PDF
+          </el-button>
+          <el-button
+            @click="exportToWord('report-container', '图文报告_房地产整合')"
+            size="small"
+            plain
+            type="danger"
+          >
+            匯出為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">
+              <!-- 文本段落：带打字机效果 -->
+              <div
+                v-if="item.type === 'text'"
+                ref="textRefs"
+                :data-idx="idx"
+                class="text-paragraph"
+              >
+                {{ renderedTexts[idx] || "" }}
+              </div>
+              <!-- 一次性渲染的组件 -->
+              <component
+                v-else-if="item.type === 'component'"
+                :is="item.component"
+                class="my-4"
+              />
+            </template>
+          </div>
+
+          <!-- 打字光标 -->
+          <span
+            v-if="isTypingActive"
+            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 exportToPDF = async (containerId: string, filename: string) => {
+  const element = document.getElementById(containerId);
+  if (!element) {
+    console.error("Container not found");
+    return;
+  }
+
+  try {
+    // 显示加载提示（可选）
+    const loadingEl = document.createElement("div");
+    loadingEl.innerText = "正在生成PDF，请稍候...";
+    loadingEl.style.position = "fixed";
+    loadingEl.style.top = "50%";
+    loadingEl.style.left = "50%";
+    loadingEl.style.transform = "translate(-50%, -50%)";
+    loadingEl.style.backgroundColor = "rgba(0,0,0,0.7)";
+    loadingEl.style.color = "white";
+    loadingEl.style.padding = "10px 20px";
+    loadingEl.style.borderRadius = "8px";
+    loadingEl.style.zIndex = "9999";
+    document.body.appendChild(loadingEl);
+
+    const canvas = await html2canvas(element, {
+      scale: 2, // 提高清晰度
+      useCORS: true,
+      logging: false,
+    });
+    const imgData = canvas.toDataURL("image/png");
+    const pdf = new jsPDF("p", "mm", "a4");
+    const imgWidth = 210; // A4宽度 mm
+    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);
+  } catch (error) {
+    console.error("PDF导出失败:", error);
+    alert("PDF导出失败，请重试");
+  }
+};
+
+// 导出 Word（将 HTML 内容保存为 .doc 文件）
+const exportToWord = (containerId: string, filename: string) => {
+  const element = document.getElementById(containerId);
+  if (!element) {
+    console.error("Container not found");
+    return;
+  }
+
+  // 克隆容器，避免影响原页面
+  const cloneElement = element.cloneNode(true) as HTMLElement;
+  // 移除克隆中的按钮和交互元素（避免导出按钮再次出现）
+  const noPrintElements = cloneElement.querySelectorAll(".no-print");
+  noPrintElements.forEach((el) => el.remove());
+
+  // 获取样式（内联样式可能丢失，简单复制主要样式）
+  const styles = document.querySelectorAll('style, link[rel="stylesheet"]');
+  let styleHtml = "";
+  styles.forEach((style) => {
+    if (style.tagName === "STYLE") {
+      styleHtml += (style as HTMLStyleElement).innerHTML;
+    } else if (style.tagName === "LINK") {
+      // 外部样式表无法直接嵌入，忽略或可手动添加
+    }
+  });
+
+  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;
+        }
+        ${styleHtml}
+      </style>
+    </head>
+    <body>
+      ${cloneElement.outerHTML}
+    </body>
+    </html>
+  `;
+
+  const blob = new Blob([docHtml], { type: "application/msword" });
+  saveAs(blob, `${filename}.doc`);
+};
+
+// ---------- 报告文本 ----------
+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"
+            ),
+          ]
+        );
+    },
+  })
+);
+
+// ECharts 折柱图组件
+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" } });
+    },
+  })
+);
+
+// ---------- 构建显示序列 ----------
+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 renderedTexts = ref<string[]>(displaySequence.value.map(() => ""));
+const textRefs = ref<HTMLElement[]>([]);
+const isTypingActive = ref(false);
+let currentTypingIndex = 0;
+let typingTimer: number | null = null;
+let currentCharIndex = 0;
+
+// 停止当前打字
+const stopTyping = () => {
+  if (typingTimer) {
+    clearTimeout(typingTimer);
+    typingTimer = null;
+  }
+  isTypingActive.value = false;
+};
+
+// 开始打字（从某个序列项开始）
+const startTypingFrom = (startIdx: number) => {
+  stopTyping();
+  currentTypingIndex = startIdx;
+  currentCharIndex = 0;
+  isTypingActive.value = true;
+  typeNextChar();
+};
+
+const typeNextChar = () => {
+  // 找到下一个需要打字的文本项
+  while (currentTypingIndex < displaySequence.value.length) {
+    const item = displaySequence.value[currentTypingIndex];
+    if (!item) {
+      currentTypingIndex++;
+      currentCharIndex = 0;
+      continue;
+    }
+    if (item.type === "text") {
+      const fullText = item.content;
+      if (currentCharIndex < fullText.length) {
+        // 输出下一个字符
+        const currentText = renderedTexts.value[currentTypingIndex] || "";
+        renderedTexts.value[currentTypingIndex] =
+          currentText + fullText[currentCharIndex];
+        currentCharIndex++;
+        typingTimer = window.setTimeout(typeNextChar, 28);
+        return;
+      } else {
+        // 当前文本完成，移动到下一项
+        currentTypingIndex++;
+        currentCharIndex = 0;
+        continue;
+      }
+    } else {
+      // 组件项，直接跳过
+      currentTypingIndex++;
+      currentCharIndex = 0;
+      continue;
+    }
+  }
+  // 所有文本已完成
+  isTypingActive.value = false;
+  typingTimer = null;
+};
+
+const restartDemo = () => {
+  stopTyping();
+  // 重置所有渲染文本为空
+  renderedTexts.value = displaySequence.value.map(() => "");
+  currentTypingIndex = 0;
+  currentCharIndex = 0;
+  startTypingFrom(0);
+};
+
+// 确保在组件挂载后启动
+onMounted(() => {
+  startTypingFrom(0);
+});
+
+onUnmounted(() => {
+  stopTyping();
+});
+</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;
+}
+@media print {
+  .no-print {
+    display: none !important;
+  }
+}
+</style>