aegon-gen 1.0.0

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

@@ -0,0 +1,1065 @@
+<template>
+  <div
+    class="text-[#333] select-none"
+    :class="embedded ? 'gen-ai-index9-embedded' : 'min-h-screen bg-[#F3F4F6]'"
+  >
+    <main :class="embedded ? 'gen-ai-index9-embedded__main' : 'overflow-y-auto p-8'">
+      <div :class="embedded ? 'gen-ai-index9-embedded__inner' : 'max-w-[842px] mx-auto'">
+        <div class="typewriter-card" :class="{ 'typewriter-card--embedded': embedded }">
+          <div v-if="!embedded" class="typewriter-card__toolbar no-print no-export">
+            <el-button @click="restartDemo" size="small" plain type="danger">
+              重新播放
+            </el-button>
+            <div class="typewriter-card__actions">
+              <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">
+                打印
+              </el-button>
+            </div>
+          </div>
+
+          <div
+            id="report-container"
+            class="typewriter-card__body doc-sample-root"
+          >
+            <div class="content-wrapper doc-sample-body">
+              <template v-for="(item, idx) in displaySequence" :key="idx">
+                <TypewriterText
+                  v-if="item.type === 'text' && idx < activeIndex"
+                  :text="item.content!"
+                  :customClass="item.styleClass"
+                  :auto-start="idx === activeIndex - 1 && idx === lastStartedTextIndex"
+                  @completed="onTextCompleted"
+                />
+
+                <span
+                  v-else-if="item.type === 'page-break' && idx < activeIndex"
+                  class="page-break-marker"
+                  data-export-page-break
+                  :class="triggerComponentReady(idx)"
+                ></span>
+
+                <component
+                  v-else-if="item.type === 'component' && idx < activeIndex"
+                  :is="item.component"
+                  @ready="onComponentReady"
+                />
+              </template>
+            </div>
+
+            <span
+              v-if="showGlobalCursor"
+              class="typewriter-cursor typewriter-cursor--global"
+            >|</span>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+  onMounted,
+  defineComponent,
+  h,
+  markRaw,
+  type Component,
+  nextTick,
+  watch,
+} from "vue";
+import { ElButton } from "element-plus";
+
+withDefaults(
+  defineProps<{
+    embedded?: boolean
+  }>(),
+  {
+    embedded: false,
+  },
+)
+import { saveAs } from "file-saver";
+import { renderReportPdfBlob } from "../../utils/reportPdfExport";
+import {
+  buildWordDocumentHtml,
+  DOCX_FLOAT_ICON_SIZE_PX,
+  DOCX_PIE_CHART_MAX_HEIGHT_PX,
+  DOCX_PIE_CHART_MAX_WIDTH_PX,
+  exportHtmlToDocx,
+  stripWordPageBreaks,
+  prepareDomForDocx,
+  rasterizeImagesForDocx,
+} from "../../utils/docxExport";
+import accessIconImg from "../../assets/sample-access-icon.png";
+import pieChartImg from "../../assets/sample-pie-chart.png";
+
+const TH_GREEN_STYLE = {
+  backgroundColor: "#c6efce",
+  color: "#000000",
+};
+
+const TH_RED_STYLE = {
+  backgroundColor: "#ffc7ce",
+  color: "#000000",
+};
+
+// ---------- 状态及导出逻辑控制器 ----------
+const isExporting = ref(false);
+const activeIndex = ref(0);
+const lastStartedTextIndex = ref(-1);
+
+const showGlobalCursor = computed(() => {
+  if (activeIndex.value >= displaySequence.value.length) return false;
+  const pending = displaySequence.value[activeIndex.value];
+  return pending?.type !== "text";
+});
+
+const waitForFullDisplay = async () => {
+  if (activeIndex.value < displaySequence.value.length) {
+    activeIndex.value = displaySequence.value.length;
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 600));
+  }
+};
+
+// 强制令无内容实体（如 Page Break）快速推入下一生命周期周期
+const triggerComponentReady = (idx: number) => {
+  if (idx === activeIndex.value - 1) {
+    nextTick(() => { nextItem(); });
+  }
+  return "";
+};
+
+// --- PDF 深度渲染并注入物理 A4 切割机制 ---
+const handleExportPDF = async () => {
+  const element = document.getElementById("report-container");
+  if (!element) return;
+  try {
+    isExporting.value = true;
+    await waitForFullDisplay();
+    
+    const pulseCursor = document.querySelector(".animate-pulse");
+    if (pulseCursor) (pulseCursor as HTMLElement).style.display = "none";
+
+    const pdfBlob = await renderReportPdfBlob(element);
+    saveAs(pdfBlob, "無障礙標準圖文報告_sample3.pdf");
+    if (pulseCursor) (pulseCursor as HTMLElement).style.display = "";
+  } catch (error) {
+    console.error("PDF導出失敗:", error);
+  } finally {
+    isExporting.value = false;
+  }
+};
+
+// --- Word：DOM 结构化 HTML → 可编辑 .docx（非 PDF 截图转档）---
+const handleExportWord = async () => {
+  const element = document.getElementById("report-container");
+  if (!element) return;
+  try {
+    isExporting.value = true;
+    await waitForFullDisplay();
+    await nextTick();
+
+    const pulseCursor = document.querySelector(".animate-pulse");
+    if (pulseCursor) (pulseCursor as HTMLElement).style.display = "none";
+
+    const cloneContainer = element.cloneNode(true) as HTMLElement;
+    stripWordPageBreaks(cloneContainer);
+    await rasterizeImagesForDocx(cloneContainer, element);
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 200));
+
+    const prepared = prepareDomForDocx(cloneContainer, true);
+    const fullHtml = buildWordDocumentHtml(prepared.innerHTML);
+    const blob = await exportHtmlToDocx(fullHtml, {
+      headerFooter: { headerText: "商业机密", showPageNumbers: true },
+    });
+
+    saveAs(blob, "無障礙標準圖文報告_sample3.docx");
+    if (pulseCursor) (pulseCursor as HTMLElement).style.display = "";
+  } catch (error) {
+    console.error("Word 導出失敗:", error);
+    window.alert("Word 導出失敗，請查看瀏覽器控制台");
+  } finally {
+    isExporting.value = false;
+  }
+};
+
+const handlePrint = () => window.print();
+
+// ---------- 1:1 静态抽取分流组件群 (markRaw 防底层死循环) ----------
+
+// 1. 文档提纲有序及嵌套无序列表组件
+const DocumentOutlineList = markRaw(
+  defineComponent({
+    name: "DocumentOutlineList",
+    setup(_, { emit }) {
+      onMounted(() => emit("ready"));
+      return () =>
+        h("ol", { class: "doc-ol" }, [
+          h("li", {}, "Headings"),
+          h("li", {}, "Lists"),
+          h("li", {}, "Links"),
+          h("li", {}, "Images"),
+          h("li", {}, [
+            h("span", { class: "doc-ol-label" }, "Tables"),
+            h("ul", { class: "doc-ul" }, [
+              h("li", {}, "Simple Tables"),
+              h("li", {}, "Complex Tables"),
+            ]),
+          ]),
+          h("li", {}, "Columns"),
+        ]);
+    },
+  })
+);
+
+const TABLE_CELL_STYLE = {
+  border: "1px solid #000000",
+  padding: "4pt 6pt",
+  fontSize: "11pt",
+  color: "#000000",
+};
+
+// 2. Images 章节：左浮动图标 + 两段正文环绕排版
+const ImagesFloatSection = markRaw(
+  defineComponent({
+    name: "ImagesFloatSection",
+    setup(_, { emit }) {
+      const p1 = ref("");
+      const p2 = ref("");
+      const typingPhase = ref<0 | 1 | 2>(0);
+      const text1 =
+        'Documents may contain images. For example, there is an image of the web accessibility symbol to the left of this paragraph. Its alternate text is "Web Access Symbol".';
+      const text2 =
+        "Alt text should communicate what an image means, not how it looks.";
+
+      const typeInto = (target: typeof p1, text: string) =>
+        new Promise<void>((resolve) => {
+          let i = 0;
+          const timer = window.setInterval(() => {
+            if (i < text.length) {
+              target.value += text[i];
+              i++;
+            } else {
+              clearInterval(timer);
+              resolve();
+            }
+          }, 15);
+        });
+
+      onMounted(async () => {
+        typingPhase.value = 1;
+        await typeInto(p1, text1);
+        typingPhase.value = 2;
+        await typeInto(p2, text2);
+        typingPhase.value = 0;
+        emit("ready");
+      });
+
+      return () =>
+        h("div", { class: "doc-images-block" }, [
+          h("img", {
+            class: "doc-float-icon",
+            src: accessIconImg,
+            alt: "Web Access Symbol",
+            width: DOCX_FLOAT_ICON_SIZE_PX,
+            height: DOCX_FLOAT_ICON_SIZE_PX,
+          }),
+          h("p", { class: "doc-p doc-images-p" }, [
+            p1.value,
+            typingPhase.value === 1
+              ? h("span", { class: "typewriter-cursor" }, "|")
+              : null,
+          ]),
+          h("p", { class: "doc-p doc-images-p" }, [
+            p2.value,
+            typingPhase.value === 2
+              ? h("span", { class: "typewriter-cursor" }, "|")
+              : null,
+          ]),
+        ]);
+    },
+  })
+);
+
+const CHART_INTRO_TEXT =
+  "Some images, such as charts or graphs, require long descriptions, but not all document types allow that. In web pages, long descriptions may be provided in several ways: on the page below the image, via a link below the image, or via a link on the image.";
+
+// 3. 饼图（左）+ 说明文字（右）左右布局
+const PieChartIntro = markRaw(
+  defineComponent({
+    name: "PieChartIntro",
+    setup(_, { emit }) {
+      const displayed = ref("");
+      const isTyping = ref(false);
+      let timer: number | null = null;
+
+      onMounted(() => {
+        isTyping.value = true;
+        let i = 0;
+        timer = window.setInterval(() => {
+          if (i < CHART_INTRO_TEXT.length) {
+            displayed.value += CHART_INTRO_TEXT[i];
+            i++;
+          } else {
+            if (timer) clearInterval(timer);
+            timer = null;
+            isTyping.value = false;
+            emit("ready");
+          }
+        }, 15);
+      });
+
+      return () =>
+        h("div", { class: "doc-chart-intro" }, [
+          h("div", { class: "doc-chart-intro__left" }, [
+            h("img", {
+              class: "doc-pie-chart-img",
+              src: pieChartImg,
+              alt: "Screen reader market share chart",
+              width: DOCX_PIE_CHART_MAX_WIDTH_PX,
+              height: DOCX_PIE_CHART_MAX_HEIGHT_PX,
+            }),
+          ]),
+          h("div", { class: "doc-chart-intro__right" }, [
+            h("p", { class: "doc-p doc-chart-intro-text" }, [
+              displayed.value,
+              isTyping.value
+                ? h("span", { class: "typewriter-cursor" }, "|")
+                : null,
+            ]),
+          ]),
+        ]);
+    },
+  })
+);
+
+// 4. 双栏排版（Columns 章节）
+const ColumnsTypewriter = markRaw(
+  defineComponent({
+    name: "ColumnsTypewriter",
+    setup(_, { emit }) {
+      const col1 = ref("");
+      const col2 = ref("");
+      const typingCol = ref<1 | 2 | 0>(0);
+      const text1 =
+        "This is an example of columns. With columns, the page is split into two or more horizontal sections. Unlike tables, in which you usually read across a row and then down to the next, in columns, you read down a column and then across to the next.";
+      const text2 =
+        "When columns are not created correctly, screen readers may run lines together, reading the first line of the first column, then the first line of the second column, then the second line of the first column, and so on. Obviously, that is not accessible.";
+
+      const typeInto = (target: typeof col1, text: string) =>
+        new Promise<void>((resolve) => {
+          let i = 0;
+          const timer = window.setInterval(() => {
+            if (i < text.length) {
+              target.value += text[i];
+              i++;
+            } else {
+              clearInterval(timer);
+              resolve();
+            }
+          }, 15);
+        });
+
+      onMounted(async () => {
+        typingCol.value = 1;
+        await typeInto(col1, text1);
+        typingCol.value = 2;
+        await typeInto(col2, text2);
+        typingCol.value = 0;
+        emit("ready");
+      });
+
+      return () =>
+        h("div", { class: "doc-columns" }, [
+          h("div", { class: "doc-col" }, [
+            col1.value,
+            typingCol.value === 1 ? h("span", { class: "typewriter-cursor" }, "|") : null,
+          ]),
+          h("div", { class: "doc-col" }, [
+            col2.value,
+            typingCol.value === 2 ? h("span", { class: "typewriter-cursor" }, "|") : null,
+          ]),
+        ]);
+    },
+  })
+);
+
+const tableAttrs = () => ({
+  class: "doc-table",
+  style: {
+    width: "100%",
+    borderCollapse: "collapse" as const,
+    border: "1px solid #000000",
+  },
+  cellspacing: "0",
+  cellpadding: "0",
+  border: "1",
+});
+
+const thCell = (
+  text: string,
+  extra: { style?: Record<string, string>; [key: string]: unknown } = {}
+) => {
+  const { style: extraStyle, ...rest } = extra;
+  return h(
+    "th",
+    {
+      style: { ...TABLE_CELL_STYLE, fontWeight: "bold", ...extraStyle },
+      ...rest,
+    },
+    text
+  );
+};
+
+const tdCell = (text: string, alignRight = false) =>
+  h(
+    "td",
+    {
+      style: {
+        ...TABLE_CELL_STYLE,
+        textAlign: alignRight ? "right" : "left",
+      },
+    },
+    text
+  );
+
+// 5. 简单数据表格（Simple Table: 统一行列且不包含合并单元格）
+const SimpleDataTable = markRaw(
+  defineComponent({
+    name: "SimpleDataTable",
+    setup(_, { emit }) {
+      const rows = [
+        ["JAWS", "853", "49%"],
+        ["NVDA", "238", "14%"],
+        ["Window-Eyes", "214", "12%"],
+        ["System Access", "181", "10%"],
+        ["VoiceOver", "159", "9%"],
+      ];
+      onMounted(() => emit("ready"));
+      return () =>
+        h("table", tableAttrs(), [
+          h("thead", {}, [
+            h("tr", { class: "doc-table-head-green" }, [
+              thCell("Screen Reader", {
+                class: "doc-th-green",
+                style: { ...TABLE_CELL_STYLE, fontWeight: "bold", ...TH_GREEN_STYLE },
+              }),
+              thCell("Responses", {
+                class: "doc-th-green",
+                style: { ...TABLE_CELL_STYLE, fontWeight: "bold", textAlign: "right", ...TH_GREEN_STYLE },
+              }),
+              thCell("Share", {
+                class: "doc-th-green",
+                style: { ...TABLE_CELL_STYLE, fontWeight: "bold", textAlign: "right", ...TH_GREEN_STYLE },
+              }),
+            ]),
+          ]),
+          h(
+            "tbody",
+            {},
+            rows.map((row) =>
+              h("tr", {}, [
+                tdCell(row[0]!),
+                tdCell(row[1]!, true),
+                tdCell(row[2]!, true),
+              ])
+            )
+          ),
+        ]);
+    },
+  })
+);
+
+// 6. 复杂合并表头数据表格（Complex Table: 包含顶层跨列合并单元格字段）
+const ComplexDataTable = markRaw(
+  defineComponent({
+    name: "ComplexDataTable",
+    setup(_, { emit }) {
+      onMounted(() => emit("ready"));
+      return () =>
+        h("table", { ...tableAttrs(), class: "doc-table doc-table-complex" }, [
+          h("thead", {}, [
+            h("tr", { class: "doc-table-head-red" }, [
+              thCell("Screen Reader", {
+                rowspan: 2,
+                class: "doc-th-red",
+                style: { ...TABLE_CELL_STYLE, fontWeight: "bold", ...TH_RED_STYLE },
+              }),
+              thCell("May 2012", {
+                colspan: 2,
+                class: "doc-th-red",
+                style: { ...TABLE_CELL_STYLE, fontWeight: "bold", textAlign: "center", ...TH_RED_STYLE },
+              }),
+              thCell("September 2010", {
+                colspan: 2,
+                class: "doc-th-red",
+                style: { ...TABLE_CELL_STYLE, fontWeight: "bold", textAlign: "center", ...TH_RED_STYLE },
+              }),
+            ]),
+            h("tr", { class: "doc-table-head-red" }, [
+              thCell("Responses", {
+                class: "doc-th-red",
+                style: { ...TABLE_CELL_STYLE, fontWeight: "bold", textAlign: "right", ...TH_RED_STYLE },
+              }),
+              thCell("Share", {
+                class: "doc-th-red",
+                style: { ...TABLE_CELL_STYLE, fontWeight: "bold", textAlign: "right", ...TH_RED_STYLE },
+              }),
+              thCell("Responses", {
+                class: "doc-th-red",
+                style: { ...TABLE_CELL_STYLE, fontWeight: "bold", textAlign: "right", ...TH_RED_STYLE },
+              }),
+              thCell("Share", {
+                class: "doc-th-red",
+                style: { ...TABLE_CELL_STYLE, fontWeight: "bold", textAlign: "right", ...TH_RED_STYLE },
+              }),
+            ]),
+          ]),
+          h("tbody", {}, [
+            ["JAWS", "853", "49%", "727", "59%"],
+            ["NVDA", "238", "14%", "105", "9%"],
+            ["Window-Eyes", "214", "12%", "138", "11%"],
+            ["System Access", "181", "10%", "58", "5%"],
+            ["VoiceOver", "159", "9%", "120", "10%"],
+          ].map((row) =>
+            h(
+              "tr",
+              {},
+              row.map((cell, i) => tdCell(cell, i > 0))
+            )
+          )),
+        ]);
+    },
+  })
+);
+
+// ---------- 基于 docx 原始拓扑构造的核心流水展示序列 ----------
+interface DisplayItem {
+  type: "text" | "component" | "page-break";
+  content?: string;
+  styleClass?: string;
+  component?: Component;
+}
+
+const displaySequence = ref<DisplayItem[]>([
+  // PAGE 1: 导言与排版大纲
+  { type: "text", content: "Sample Document", styleClass: "doc-h1" },
+  { type: "text", content: "This document was created using accessibility techniques for headings, lists, image alternate text, tables, and columns. It should be completely accessible using assistive technologies such as screen readers.", styleClass: "doc-p" },
+  
+  { type: "text", content: "Headings", styleClass: "doc-h2" },
+  { type: "text", content: "There are eight section headings in this document. At the beginning, \"Sample Document\" is a level 1 heading. The main section headings, such as \"Headings\" and \"Lists\" are level 2 headings. The Tables section contains two sub-headings, \"Simple Table\" and \"Complex Table,\" which are both level 3 headings.", styleClass: "doc-p" },
+  
+  { type: "text", content: "Lists", styleClass: "doc-h2" },
+  { type: "text", content: "The following outline of the sections of this document is an ordered (numbered) list with six items. The fifth item, \"Tables,\" contains a nested unordered (bulleted) list with two items.", styleClass: "doc-p" },
+  { type: "component", component: DocumentOutlineList },
+
+  // 插入物理分页符点：拦截断层
+  { type: "page-break" },
+
+  // PAGE 2: 链接与多媒体无障碍设计说明
+  { type: "text", content: "Links", styleClass: "doc-h2" },
+  { type: "text", content: "In web documents, links can point different locations on the page, different pages, or even downloadable documents, such as Word documents or PDFs:", styleClass: "doc-p" },
+  { type: "text", content: "Top of this Page", styleClass: "doc-link-line" },
+  { type: "text", content: "Sample Document", styleClass: "doc-link-line" },
+  { type: "text", content: "Sample Document (docx)", styleClass: "doc-link-line" },
+
+  { type: "text", content: "Images", styleClass: "doc-h2" },
+  { type: "component", component: ImagesFloatSection },
+  { type: "text", content: "Some images, such as charts or graphs, require long descriptions, but not all document types allow that. In web pages, long descriptions may be provided in several ways: on the page below the image, via a link below the image, or via a link on the image.", styleClass: "doc-p" },
+
+  { type: "page-break" },
+
+  // PAGE 3: 饼图说明（左右布局）+ 简单/复杂表格
+  { type: "component", component: PieChartIntro },
+  { type: "text", content: "Tables", styleClass: "doc-h2" },
+  { type: "text", content: "Simple Tables", styleClass: "doc-h3" },
+  { type: "text", content: "Simple tables have a uniform number of columns and rows, without any merged cells:", styleClass: "doc-p" },
+  { type: "component", component: SimpleDataTable },
+  
+  { type: "text", content: "Complex Tables", styleClass: "doc-h3" },
+  { type: "text", content: "The following is a complex table, using merged cells as headers for sections within the table. This can't be made accessible in all types of documents:", styleClass: "doc-p" },
+  { type: "component", component: ComplexDataTable },
+
+  { type: "page-break" },
+
+  // PAGE 4: 分栏排版特征说明
+  { type: "text", content: "Columns", styleClass: "doc-h2" },
+  { type: "component", component: ColumnsTypewriter },
+]);
+
+// ---------- 线性打字机驱动器进程控制 ----------
+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;
+    }
+  }
+};
+
+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;
+};
+
+const restartDemo = () => {
+  activeIndex.value = 0;
+  lastStartedTextIndex.value = -1;
+  nextTick(() => startSequence());
+};
+
+onMounted(() => startSequence());
+
+defineExpose({
+  handleExportPDF,
+  handleExportWord,
+  restartDemo,
+});
+
+const STYLE_TAG_MAP: Record<string, string> = {
+  "doc-h1": "h1",
+  "doc-h2": "h2",
+  "doc-h3": "h3",
+  "doc-p": "p",
+  "doc-link-line": "p",
+};
+
+// ---------- 打字机文本流（1:1 复现 Word 样式 + 竖线光标） ----------
+const TypewriterText = defineComponent({
+  name: "TypewriterText",
+  props: {
+    text: { type: String, required: true },
+    autoStart: { type: Boolean, default: false },
+    customClass: { type: String, default: "" },
+  },
+  emits: ["completed"],
+  setup(props, { emit }) {
+    const displayed = ref("");
+    const isTyping = ref(false);
+    let timer: number | null = null;
+
+    const classList = () =>
+      props.customClass
+        .split(/\s+/)
+        .filter(Boolean)
+        .concat("typewriter-paragraph");
+
+    const resolveTag = () => {
+      const primary = props.customClass.split(/\s+/).find((c) => STYLE_TAG_MAP[c]);
+      return primary ? (STYLE_TAG_MAP[primary] ?? "p") : "p";
+    };
+
+    const startTyping = () => {
+      if (timer) return;
+      displayed.value = "";
+      isTyping.value = true;
+      let i = 0;
+      timer = window.setInterval(() => {
+        if (i < props.text.length) {
+          displayed.value += props.text[i];
+          i++;
+        } else {
+          if (timer) clearInterval(timer);
+          timer = null;
+          isTyping.value = false;
+          emit("completed");
+        }
+      }, 15);
+    };
+
+    watch(
+      () => props.autoStart,
+      (val) => {
+        if (val) startTyping();
+      },
+      { immediate: true }
+    );
+
+    return () => {
+      const tag = resolveTag();
+      const linkText =
+        tag === "p" && props.customClass.includes("doc-link-line")
+          ? h("a", { class: "doc-link-anchor", href: "#" }, displayed.value)
+          : displayed.value;
+
+      return h(tag as keyof HTMLElementTagNameMap, { class: classList() }, [
+        linkText,
+        isTyping.value ? h("span", { class: "typewriter-cursor" }, "|") : null,
+      ]);
+    };
+  },
+});
+</script>
+
+<style scoped>
+.typewriter-card {
+  background: #ffffff;
+  border: 1px solid #e8eaec;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+}
+
+.typewriter-card__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 16px;
+  border-bottom: 1px solid #e8eaec;
+  background: #fafafa;
+}
+
+.typewriter-card__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.typewriter-card__body {
+  padding: 32px 40px;
+  min-height: 600px;
+  overflow-x: hidden;
+  box-sizing: border-box;
+}
+
+/* ---------- Sample Document 1:1 样式（对齐 Word / 参考图） ---------- */
+.doc-sample-root,
+.doc-sample-body {
+  font-family: Calibri, "Segoe UI", Arial, Helvetica, sans-serif;
+  font-size: 11pt;
+  color: #000000;
+  line-height: 1.15;
+  text-align: left;
+}
+
+.doc-h1 {
+  font-size: 20pt;
+  font-weight: bold;
+  color: #c00000;
+  text-align: left;
+  margin: 0 0 12pt;
+  padding: 0;
+  border: none;
+}
+
+.doc-h2 {
+  font-size: 14pt;
+  font-weight: bold;
+  color: #000000;
+  margin: 12pt 0 6pt;
+  padding: 0;
+  border: none;
+}
+
+.doc-h3 {
+  font-size: 12pt;
+  font-weight: bold;
+  color: #000000;
+  margin: 10pt 0 4pt;
+}
+
+.doc-p {
+  font-size: 11pt;
+  line-height: 1.15;
+  color: #000000;
+  margin: 0 0 10pt;
+  text-align: left;
+}
+
+.doc-images-block {
+  overflow: hidden;
+  margin: 0 0 10pt;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.doc-images-block .doc-images-p {
+  margin: 0 0 10pt;
+  text-align: left;
+}
+
+.doc-images-block .doc-images-p:last-child {
+  margin-bottom: 0;
+}
+
+.doc-link-line {
+  font-size: 11pt;
+  margin: 0 0 2pt;
+  padding: 0;
+}
+
+.doc-link-line :deep(.doc-link-anchor) {
+  color: #0563c1;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.doc-ol {
+  list-style-type: decimal;
+  padding-left: 0.5in;
+  margin: 6pt 0 10pt;
+  font-size: 11pt;
+  color: #000000;
+}
+
+.doc-ol > li {
+  margin-bottom: 2pt;
+  line-height: 1.15;
+}
+
+.doc-ul {
+  list-style-type: disc;
+  padding-left: 0.25in;
+  margin: 2pt 0 0;
+}
+
+.doc-ul > li {
+  margin-bottom: 2pt;
+}
+
+.doc-float-icon,
+:deep(.doc-float-icon) {
+  float: left;
+  width: 72px;
+  height: 72px;
+  max-width: 72px;
+  max-height: 72px;
+  margin: 0 12pt 8pt 0;
+  box-sizing: border-box;
+}
+
+.doc-chart-intro {
+  display: table;
+  width: 100%;
+  max-width: 100%;
+  table-layout: fixed;
+  margin: 0 0 10pt;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.doc-chart-intro__left,
+.doc-chart-intro__right {
+  display: table-cell;
+  vertical-align: top;
+}
+
+.doc-chart-intro__left {
+  width: 42%;
+  max-width: 220px;
+  padding-right: 12pt;
+  box-sizing: border-box;
+}
+
+.doc-chart-intro__right {
+  width: 58%;
+}
+
+.doc-pie-chart-img,
+:deep(.doc-pie-chart-img) {
+  display: block;
+  width: 100%;
+  max-width: 220px;
+  max-height: 120px;
+  height: auto;
+  object-fit: contain;
+  box-sizing: border-box;
+}
+
+.doc-chart-intro-text {
+  margin: 0;
+  text-align: left;
+}
+
+:deep(.doc-table) {
+  width: 100%;
+  max-width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+  margin: 6pt 0 12pt;
+  font-size: 11pt;
+  color: #000000;
+  border: 1px solid #000000;
+  box-sizing: border-box;
+  word-wrap: break-word;
+}
+
+:deep(.doc-table th),
+:deep(.doc-table td) {
+  border: 1px solid #000000 !important;
+  padding: 4pt 6pt;
+  vertical-align: top;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  box-sizing: border-box;
+}
+
+:deep(.doc-table th) {
+  font-weight: bold;
+  text-align: left;
+}
+
+:deep(.doc-th-green),
+:deep(th.doc-th-green) {
+  background-color: #c6efce !important;
+  color: #000000 !important;
+}
+
+:deep(.doc-th-red),
+:deep(th.doc-th-red) {
+  background-color: #ffc7ce !important;
+  color: #000000 !important;
+}
+
+:deep(.doc-table-num) {
+  text-align: right;
+}
+
+:deep(.doc-table-center) {
+  text-align: center;
+}
+
+.doc-columns {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+  margin: 0 0 10pt;
+  font-size: 11pt;
+  line-height: 1.15;
+  color: #000000;
+}
+
+.doc-col {
+  display: table-cell;
+  width: 50%;
+  vertical-align: top;
+  padding-right: 12pt;
+  text-align: left;
+}
+
+.doc-col:last-child {
+  padding-right: 0;
+  padding-left: 6pt;
+}
+
+.typewriter-paragraph {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.typewriter-cursor {
+  display: inline-block;
+  color: inherit;
+  font-weight: normal;
+  margin-left: 1px;
+  animation: typewriter-blink 1s step-end infinite;
+}
+
+.typewriter-cursor--global {
+  font-size: 11pt;
+  color: #000000;
+  margin-top: 4pt;
+}
+
+@keyframes typewriter-blink {
+  50% { opacity: 0; }
+}
+
+/* 打字机预览：分页标记不可见，仅用于导出 Word 时定位 */
+.page-break-marker {
+  display: none !important;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+}
+
+.gen-ai-index9-embedded {
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: #fff;
+}
+
+.gen-ai-index9-embedded__main {
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+  overflow-y: auto;
+  padding: 0;
+}
+
+.gen-ai-index9-embedded__inner {
+  width: 100%;
+  max-width: none;
+  min-height: 100%;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.typewriter-card--embedded {
+  width: 100%;
+  flex: 1;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background: #fff;
+}
+
+.typewriter-card--embedded .typewriter-card__body {
+  flex: 1;
+  width: 100%;
+  min-height: 100%;
+  padding: 28px 32px 36px;
+  box-sizing: border-box;
+  background: #fff;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+@media print {
+  .no-print,
+  .no-export {
+    display: none !important;
+  }
+}
+</style>