aegon-gen 1.0.0

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

@@ -0,0 +1,456 @@
+<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">
+              <!-- 文本段落：带打字机效果 -->
+              <TypewriterText
+                v-if="item.type === 'text'"
+                :text="item.content!"
+                :auto-start="idx <= currentTypingIndex"
+                @completed="onTextCompleted(idx)"
+                class="text-paragraph"
+              />
+              <!-- 普通组件：直接渲染，使用 resolveComponent 或直接引用 -->
+              <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">✨ 整合 Element Plus 组件</p>
+      <p class="text-xs text-gray-400 mt-2">
+        包含：带状态表格 / 按钮组 / 图标集 / 断轴柱状图<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 />
+        • 图标展示 Element Plus 常用图标
+      </div>
+    </aside>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  onMounted,
+  defineComponent,
+  h,
+  markRaw,
+  type Component,
+} from "vue";
+import { Edit3Icon } from "lucide-vue-next";
+import { ElButton, ElTable, ElTableColumn, ElIcon } from "element-plus";
+// 注意：图标已在 main.ts 中全局注册，但为了 h 函数中使用，需要导入或使用 resolveComponent
+// 这里直接导入以确保类型和可用性
+import { Platform, Eleme, DeleteFilled, Delete } from "@element-plus/icons-vue";
+
+// 模拟导出函数（请替换为实际实现）
+const exportToPDF = (containerId: string, filename: string) => {
+  console.log(`导出 PDF: ${filename}`, containerId);
+  alert("PDF 导出功能演示（需接入实际库）");
+};
+const exportToWord = (containerId: string, filename: string) => {
+  console.log(`导出 Word: ${filename}`, containerId);
+  alert("Word 导出功能演示（需接入实际库）");
+};
+
+// ---------- 1. 报告文本 ----------
+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 = rawParagraphs[0] ?? "";
+const para2 = rawParagraphs[1] ?? "";
+const para3 = rawParagraphs[2] ?? "";
+
+// ---------- 2. 组件定义（使用 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 AxisBreakChart = markRaw(
+  defineComponent({
+    name: "AxisBreakChart",
+    setup() {
+      const createChartHtml = () => {
+        const wrapper = document.createElement("div");
+        wrapper.className =
+          "my-2 p-4 bg-gray-50 rounded-xl border border-gray-200";
+        const days = ["周一", "周二", "周三", "周四"];
+        const values = [45, 62, 28, 78];
+        const maxValue = 80;
+        let barsHtml = "";
+        for (let i = 0; i < days.length; i++) {
+          const value = values[i] ?? 0;
+          const heightPercent = (value / maxValue) * 100;
+          barsHtml += `
+          <div class="flex flex-col items-center w-16 group">
+            <div class="relative w-10 bg-teal-500 rounded-t-md hover:bg-teal-600 transition-all cursor-pointer" style="height: ${heightPercent}px; min-height: 8px;">
+              <span class="absolute -top-5 left-1/2 transform -translate-x-1/2 text-xs font-medium text-gray-700 opacity-0 group-hover:opacity-100 transition-opacity">${value}</span>
+            </div>
+            <div class="text-xs mt-2 font-medium text-gray-600">${days[i]}</div>
+            <div class="text-xs text-gray-500 mt-0.5">${value}</div>
+          </div>
+        `;
+        }
+        wrapper.innerHTML = `
+        <div class="flex items-center justify-between mb-3">
+          <h4 class="font-bold text-gray-800">📊 断轴柱状图（点击展开）</h4>
+          <span class="text-xs text-gray-400 bg-white px-2 py-0.5 rounded-full border">断轴标记 ⚡</span>
+        </div>
+        <div class="relative ml-8 mb-2">
+          <div class="absolute left-0 top-0 bottom-0 w-8 flex flex-col items-center justify-between text-xs text-gray-400">
+            <span>80</span><span>60</span>
+            <span class="relative">40<span class="absolute left-4 top-1/2 w-6 h-px bg-gray-400 transform -rotate-12"></span><span class="absolute left-4 top-1/2 w-6 h-px bg-gray-400 transform rotate-12"></span></span>
+            <span>20</span><span>0</span>
+          </div>
+          <div class="flex justify-around items-end pt-2 pl-8 border-l-2 border-b-2 border-gray-300">
+            ${barsHtml}
+          </div>
+          <div class="text-center text-xs text-gray-400 mt-3 italic">💡 点击柱状图或区域展开详细数据</div>
+        </div>
+      `;
+        const chartArea = wrapper.querySelector(".flex.justify-around");
+        if (chartArea) {
+          chartArea.addEventListener("click", (e) => {
+            const target = e.target as HTMLElement;
+            const barDiv = target.closest(".group");
+            if (barDiv) {
+              const day = barDiv.querySelector(
+                ".text-xs.font-medium"
+              )?.textContent;
+              const value = barDiv.querySelector(
+                ".text-xs.text-gray-500"
+              )?.textContent;
+              alert(
+                `📈 ${day} 详细数据：销售额 ${value} 万元\n点击展开更多趋势信息。`
+              );
+            } else {
+              const existingPanel = wrapper.querySelector(".expand-panel");
+              if (existingPanel) existingPanel.remove();
+              else {
+                const panel = document.createElement("div");
+                panel.className =
+                  "expand-panel mt-4 p-3 bg-white rounded-lg border border-teal-200 shadow-sm";
+                panel.innerHTML = `<div class="font-medium text-gray-700 mb-2">📋 本周销售明细（展开数据）</div>
+                <div class="grid grid-cols-2 gap-2 text-sm">
+                  <div>周一：45 万元</div><div>环比 +2%</div>
+                  <div>周二：62 万元</div><div>环比 +38%</div>
+                  <div>周三：28 万元</div><div>环比 -55%</div>
+                  <div>周四：78 万元</div><div>环比 +179%</div>
+                </div>
+                <div class="text-xs text-gray-500 mt-2">✨ 断轴区域已展开，数据来自实时模拟</div>`;
+                wrapper.appendChild(panel);
+              }
+            }
+          });
+        }
+        return wrapper;
+      };
+      return () =>
+        h("div", {
+          ref: (el) => {
+            if (el instanceof HTMLElement) el.appendChild(createChartHtml());
+          },
+        });
+    },
+  })
+);
+
+// ---------- 3. 构建显示序列（使用 markRaw 包装的组件）----------
+type DisplayItem =
+  | { type: "text"; content: string }
+  | { type: "component"; component: Component };
+
+// 使用 shallowRef 存储序列，避免深度响应式
+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: AxisBreakChart },
+  {
+    type: "text",
+    content: "✅ 以上为整合 Element Plus 组件与完整房地产报告的图文混排效果。",
+  },
+]);
+
+// ---------- 4. 打字机组件（内联定义）----------
+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;
+
+    const startTyping = () => {
+      if (interval) return;
+      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);
+  },
+});
+
+// 控制打字机顺序
+const currentTypingIndex = ref(-1);
+const isTypingActive = ref(false);
+
+const onTextCompleted = (idx: number) => {
+  let nextTextIdx = -1;
+  for (let i = idx + 1; i < displaySequence.value.length; i++) {
+    const seqItem = displaySequence.value[i];
+    if (seqItem?.type === "text") {
+      nextTextIdx = i;
+      break;
+    }
+  }
+  if (nextTextIdx !== -1) {
+    currentTypingIndex.value = nextTextIdx;
+  } else {
+    isTypingActive.value = false;
+  }
+};
+
+const startSequence = () => {
+  const firstTextIdx = displaySequence.value.findIndex(
+    (item) => item.type === "text"
+  );
+  if (firstTextIdx !== -1) {
+    currentTypingIndex.value = firstTextIdx;
+    isTypingActive.value = true;
+  }
+};
+
+const restartDemo = () => {
+  // 重置所有状态
+  currentTypingIndex.value = -1;
+  isTypingActive.value = false;
+  // 强制重新渲染 displaySequence（触发重新开始）
+  // 简单方法：重新赋值序列引用
+  displaySequence.value = [...displaySequence.value];
+  setTimeout(() => startSequence(), 50);
+};
+
+onMounted(() => {
+  startSequence();
+});
+</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;
+}
+.typewriter-text {
+  white-space: pre-wrap;
+}
+@media print {
+  .no-print {
+    display: none !important;
+  }
+}
+</style>

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

@@ -0,0 +1,5 @@
+<template>
+  <div class="min-h-screen bg-[#F3F4F6] text-[#333] flex items-center justify-center">
+    <p class="text-gray-500">index10（待完善）</p>
+  </div>
+</template>