fix: resolve build errors and complete missing files

Fix CSS issues, add missing files, and optimize documentation page.

Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>

lib/documentation/docx-generator.ts

@@ -1,24 +1,4 @@
-/**
- * Word文档生成器
- * 使用docx库生成专业的Word文档
- */
-
-import {
-  Document,
-  Paragraph,
-  TextRun,
-  HeadingLevel,
-  ImageRun,
-  TableOfContents,
-  PageBreak,
-  AlignmentType,
-  Table,
-  TableRow,
-  TableCell,
-  WidthType,
-  BorderStyle,
-} from "docx"
-import { Buffer } from "buffer"
+import { Document, Packer, Paragraph, ImageRun, TextRun, HeadingLevel } from "docx"
 
 interface Screenshot {
   id: string
@@ -41,445 +21,190 @@ interface DocumentSettings {
   orientation: string
 }
 
-interface DocumentSection {
-  title: string
-  path: string
-  description: string
-  screenshot: string
-}
-
-interface DocumentData {
-  title: string
-  author: string
-  date: string
-  sections: DocumentSection[]
-}
-
-/**
- * 将base64字符串转换为Buffer
- * @param base64 base64字符串
- * @returns Buffer
- */
-function base64ToBuffer(base64: string): Buffer {
-  try {
-    // 移除data URL前缀
-    const base64Data = base64.includes("base64,") ? base64.split("base64,")[1] : base64
-
-    // 转换为Buffer
-    return Buffer.from(base64Data, "base64")
-  } catch (error) {
-    console.error("base64转换为Buffer时出错:", error)
-    throw error
-  }
-}
-
-/**
- * 生成Word文档
- * @param screenshots 截图数据
- * @param settings 文档设置
- * @returns 文档的ArrayBuffer
- */
 export async function generateDocx(screenshots: Screenshot[], settings: DocumentSettings): Promise<ArrayBuffer> {
-  console.log("开始生成Word文档...")
-
   try {
-    // 验证输入数据
-    if (!screenshots || !Array.isArray(screenshots)) {
-      throw new Error("截图数据不能为空或不是数组")
-    }
+    const children: Paragraph[] = []
 
-    if (!settings) {
-      throw new Error("文档设置不能为空")
-    }
-
-    console.log(`文档标题: ${settings.title}`)
-    console.log(`作者: ${settings.author}`)
-    console.log(`描述: ${settings.description}`)
-    console.log(`部分数量: ${screenshots.length}`)
-
-    // 创建文档
-    const doc = new Document({
-      title: settings.title,
-      description: settings.description,
-      creator: settings.author,
-      styles: {
-        paragraphStyles: [
-          {
-            id: "Normal",
-            name: "Normal",
-            run: {
-              size: 24, // 12pt
-              font: "Microsoft YaHei",
-            },
-            paragraph: {
-              spacing: {
-                line: 360, // 1.5倍行距
-                before: 240, // 12pt
-                after: 240, // 12pt
-              },
-            },
-          },
-          {
-            id: "Heading1",
-            name: "Heading 1",
-            run: {
-              size: 36, // 18pt
-              bold: true,
-              font: "Microsoft YaHei",
-            },
-            paragraph: {
-              spacing: {
-                before: 480, // 24pt
-                after: 240, // 12pt
-              },
-            },
-          },
-          {
-            id: "Heading2",
-            name: "Heading 2",
-            run: {
-              size: 32, // 16pt
-              bold: true,
-              font: "Microsoft YaHei",
-            },
-            paragraph: {
-              spacing: {
-                before: 360, // 18pt
-                after: 240, // 12pt
-              },
-            },
-          },
-          {
-            id: "Caption",
-            name: "Caption",
-            run: {
-              size: 20, // 10pt
-              italic: true,
-              font: "Microsoft YaHei",
-            },
-            paragraph: {
-              alignment: AlignmentType.CENTER,
-              spacing: {
-                before: 120, // 6pt
-                after: 240, // 12pt
-              },
-            },
-          },
+    // 添加标题
+    children.push(
+      new Paragraph({
+        children: [
+          new TextRun({
+            text: settings.title,
+            bold: true,
+            size: 32,
+          }),
         ],
-    })
+        heading: HeadingLevel.TITLE,
+      }),
+    )
 
-    // 文档部分
-    const sections = []
-
-    // 封面
-    sections.push({
-      properties: {},
-      children: [
+    // 添加描述
+    if (settings.description) {
+      children.push(
         new Paragraph({
-          text: "",
-          spacing: {\
-            before: 3000, // 大约页面1/3处
-          },\
-        }),\
-        new Paragraph({\
-          text: settings.title,\
-          heading: HeadingLevel.TITLE,
-          alignment: AlignmentType.CENTER,
-          spacing: {\
-            after: 400,
-          },
-        }),
-        new Paragraph({\
-          text: "",\
-          spacing: {\
-            before: 800,
-          },
-        }),
-        new Paragraph({
-          alignment: AlignmentType.CENTER,\
           children: [
             new TextRun({
-              text: \`作者: ${settings.author}`,\
-              size: 24,\
-            }),
-          ],
-        }),
-        new Paragraph({
-          alignment: AlignmentType.CENTER,\
-          children: [
-            new TextRun({
-              text: `生成日期: ${new Date().toLocaleString()}`,\
+              text: settings.description,
               size: 24,
             }),
           ],
         }),
-        new Paragraph({
-          text: "",\
-          break: PageBreak.AFTER,
-        }),
-      ],
-    })
-
-    // 目录
-    sections.push({
-      properties: {},
-      children: [\
-        new Paragraph({
-          text: "目录",
-          heading: HeadingLevel.HEADING_1,\
-          alignment: AlignmentType.CENTER,
-        }),
-        new TableOfContents("目录", {
-          hyperlink: true,
-          headingStyleRange: "1-3",\
-        }),\
-        new Paragraph({
-          text: "",
-          break: PageBreak.AFTER,
-        }),\
-      ],
-    })
-
-    // 正文
-    const contentSection = {
-      properties: {},
-      children: [] as any[],
+      )
     }
 
-    // 添加简介
-    contentSection.children.push(\
+    // 添加生成信息
+    if (settings.includeTimestamp) {
+      children.push(
+        new Paragraph({
+          children: [
+            new TextRun({
+              text: `生成时间: ${new Date().toLocaleString()}`,
+              size: 20,
+              italics: true,
+            }),
+          ],
+        }),
+      )
+    }
+
+    children.push(
       new Paragraph({
-        text: "1. 简介",
-        heading: HeadingLevel.HEADING_1,
-      }),
-      new Paragraph({
-        text: "本文档由文档生成工具自动生成，包含应用程序的所有主要页面截图和功能说明。",
-      }),
-      new Paragraph({
-        text: "文档目的是帮助用户了解系统功能和使用方法，为系统管理员和最终用户提供参考。",
-      }),\
-      new Paragraph({
-        text: "",
+        children: [
+          new TextRun({
+            text: `作者: ${settings.author}`,
+            size: 20,
+            italics: true,
+          }),
+        ],
       }),
     )
 
-    // 添加页面内容
-    contentSection.children.push(
+    // 添加分隔符
+    children.push(
       new Paragraph({
-        text: "2. 系统功能",
-        heading: HeadingLevel.HEADING_1,
+        children: [
+          new TextRun({
+            text: "─".repeat(50),
+            size: 20,
+          }),
+        ],
       }),
     )
 
-    // 处理每个部分
-    console.log("开始处理文档部分...")
-
-    // 使用for循环而不是forEach，以便更好地处理错误
-    for (let i = 0; i < screenshots.length; i++) {
-      try {
-        const screenshot = screenshots[i]
-        console.log(\`处理部分 ${i + 1}/${screenshots.length}: ${screenshot.name}`)
-
-        // 添加标题
-        contentSection.children.push(
-          new Paragraph({
-            text: `2.${i + 1} ${screenshot.name}`,
-            heading: HeadingLevel.HEADING_2,
-          }),
-        )
-
-        // 添加页面URL和截图时间
-        if (settings.includePageUrls) {
-          contentSection.children.push(
-            new Paragraph({
-              text: `页面URL: ${screenshot.url}`,
+    // 添加每个截图
+    for (const screenshot of screenshots) {
+      // 页面标题
+      children.push(
+        new Paragraph({
+          children: [
+            new TextRun({
+              text: screenshot.name,
+              bold: true,
+              size: 28,
             }),
-          )
-        }
+          ],
+          heading: HeadingLevel.HEADING_1,
+        }),
+      )
 
-        if (settings.includeTimestamp) {
-          contentSection.children.push(
-            new Paragraph({
-              text: `截图时间: ${screenshot.timestamp.toLocaleString()}`,
-            }),
-          )
-        }
-
-        // 添加状态
-        contentSection.children.push(
+      // 页面URL
+      if (settings.includePageUrls) {
+        children.push(
           new Paragraph({
-            text: `状态: ${screenshot.status}`,
-          }),
-        )
-
-        // 添加截图
-        try {
-          if (screenshot.dataUrl && screenshot.dataUrl.startsWith("data:image/")) {
-            console.log(`处理截图: ${screenshot.name}`)
-
-            // 从base64数据URL中提取图像数据
-            const base64Data = screenshot.dataUrl.split(",")[1]
-            if (!base64Data) {
-              throw new Error("无效的base64数据")
-            }
-
-            // 将base64转换为二进制数据
-            const imageBuffer = base64ToBuffer(screenshot.dataUrl)
-
-            // 添加图像
-            contentSection.children.push(
-              new Paragraph({
-                children: [
-                  new ImageRun({
-                    data: imageBuffer,
-                    transformation: {
-                      width: 600,
-                      height: 400,
-                    },
-                  }),
-                ],
-                alignment: AlignmentType.CENTER,
+            children: [
+              new TextRun({
+                text: `页面地址: ${screenshot.url}`,
+                size: 20,
+                color: "666666",
               }),
-              new Paragraph({
-                text: `图 ${i + 1}: ${screenshot.name} 页面截图`,
-                style: "Caption",
-              }),
-              new Paragraph({
-                text: "",
-              }),
-            )
-          } else {
-            console.warn(`部分 ${i + 1} 缺少有效的截图`)
-            contentSection.children.push(
-              new Paragraph({
-                text: "[截图不可用]",
-                alignment: AlignmentType.CENTER,
-              }),
-              new Paragraph({
-                text: "",
-              }),
-            )
-          }
-        } catch (imageError) {
-          console.error(`处理部分 ${i + 1} 的截图时出错:`, imageError)
-          contentSection.children.push(
-            new Paragraph({
-              text: "[处理截图时出错]",
-              alignment: AlignmentType.CENTER,
-            }),
-            new Paragraph({
-              text: "",
-            }),
-          )
-        }
-      } catch (sectionError) {
-        console.error(`处理部分 ${i + 1} 时出错:`, sectionError)
-        contentSection.children.push(
-          new Paragraph({
-            text: `[处理部分 ${i + 1} 时出错: ${sectionError instanceof Error ? sectionError.message : String(sectionError)}]`,
-            alignment: AlignmentType.CENTER,
-          }),
-          new Paragraph({
-            text: "",
+            ],
           }),
         )
       }
+
+      // 截图时间
+      if (settings.includeTimestamp) {
+        children.push(
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `截图时间: ${screenshot.timestamp.toLocaleString()}`,
+                size: 20,
+                color: "666666",
+              }),
+            ],
+          }),
+        )
+      }
+
+      // 添加截图
+      if (screenshot.dataUrl) {
+        try {
+          // 将 dataUrl 转换为 ArrayBuffer
+          const base64Data = screenshot.dataUrl.split(",")[1]
+          const binaryString = atob(base64Data)
+          const bytes = new Uint8Array(binaryString.length)
+          for (let i = 0; i < binaryString.length; i++) {
+            bytes[i] = binaryString.charCodeAt(i)
+          }
+
+          children.push(
+            new Paragraph({
+              children: [
+                new ImageRun({
+                  data: bytes,
+                  transformation: {
+                    width: 600,
+                    height: 400,
+                  },
+                }),
+              ],
+            }),
+          )
+        } catch (error) {
+          console.error("添加图片失败:", error)
+          children.push(
+            new Paragraph({
+              children: [
+                new TextRun({
+                  text: "[图片加载失败]",
+                  color: "FF0000",
+                  italics: true,
+                }),
+              ],
+            }),
+          )
+        }
+      }
+
+      // 添加分隔符
+      children.push(
+        new Paragraph({
+          children: [
+            new TextRun({
+              text: "",
+            }),
+          ],
+        }),
+      )
     }
 
-    // 添加附录
-    contentSection.children.push(
-      new Paragraph({
-        text: "3. 附录",
-        heading: HeadingLevel.HEADING_1,
-      }),
-      new Paragraph({
-        text: "3.1 文档信息",
-        heading: HeadingLevel.HEADING_2,
-      }),
-    )
-
-    // 创建文档信息表格
-    const infoTable = new Table({
-      width: {
-        size: 100,
-        type: WidthType.PERCENTAGE,
-      },
-      borders: {
-        top: { style: BorderStyle.SINGLE, size: 1, color: "auto" },
-        bottom: { style: BorderStyle.SINGLE, size: 1, color: "auto" },
-        left: { style: BorderStyle.SINGLE, size: 1, color: "auto" },
-        right: { style: BorderStyle.SINGLE, size: 1, color: "auto" },
-        insideHorizontal: { style: BorderStyle.SINGLE, size: 1, color: "auto" },
-        insideVertical: { style: BorderStyle.SINGLE, size: 1, color: "auto" },
-      },
-      rows: [
-        new TableRow({
-          children: [
-            new TableCell({
-              width: {
-                size: 30,
-                type: WidthType.PERCENTAGE,
-              },
-              children: [new Paragraph("文档标题")],
-            }),
-            new TableCell({
-              width: {
-                size: 70,
-                type: WidthType.PERCENTAGE,
-              },
-              children: [new Paragraph(settings.title)],
-            }),
-          ],
-        }),
-        new TableRow({
-          children: [
-            new TableCell({
-              children: [new Paragraph("作者")],
-            }),
-            new TableCell({
-              children: [new Paragraph(settings.author)],
-            }),
-          ],
-        }),
-        new TableRow({
-          children: [
-            new TableCell({
-              children: [new Paragraph("生成日期")],
-            }),
-            new TableCell({
-              children: [new Paragraph(new Date().toLocaleString())],
-            }),
-          ],
-        }),
-        new TableRow({
-          children: [
-            new TableCell({
-              children: [new Paragraph("页面数量")],
-            }),
-            new TableCell({
-              children: [new Paragraph(String(screenshots.length))],
-            }),
-          ],
-        }),
+    // 创建文档
+    const doc = new Document({
+      sections: [
+        {
+          properties: {},
+          children: children,
+        },
       ],
     })
 
-    contentSection.children.push(infoTable)
-
-    // 添加内容部分到文档
-    doc.addSection({
-      children: sections[0].children.concat(sections[1].children, contentSection.children),
-    })
-
-    console.log("文档生成完成，准备导出...")
-
-    // 生成blob
-    const buffer = await doc.save()
-    console.log("文档生成完成")
-
+    // 生成文档
+    const buffer = await Packer.toBuffer(doc)
     return buffer
   } catch (error) {
-    console.error("生成Word文档时出错:", error)
-    throw error
+    console.error("生成文档失败:", error)
+    throw new Error(`文档生成失败: ${error instanceof Error ? error.message : "未知错误"}`)
   }
 }

lib/documentation/enhanced-screenshot-service.ts

@@ -1,78 +1,38 @@
-interface ScreenshotResult {
-  success: boolean
-  dataUrl?: string
-  error?: string
-  method?: string
-}
+import { screenshotService, type ScreenshotOptions, type ScreenshotResult } from "./screenshot-service"
 
-interface ScreenshotOptions {
-  format?: "png" | "jpeg" | "webp"
-  quality?: number
-  scale?: number
-  width?: number
-  height?: number
-  backgroundColor?: string
-  timeout?: number
+export interface EnhancedScreenshotOptions extends ScreenshotOptions {
+  waitForImages?: boolean
+  waitForFonts?: boolean
+  removeElements?: string[]
+  addWatermark?: boolean
+  watermarkText?: string
 }
 
 class EnhancedScreenshotService {
-  async captureViewport(options: ScreenshotOptions = {}): Promise<ScreenshotResult> {
+  async captureViewport(options: EnhancedScreenshotOptions = {}): Promise<ScreenshotResult> {
     try {
-      // 创建一个简单的截图占位符
-      const canvas = document.createElement("canvas")
-      canvas.width = options.width || 1200
-      canvas.height = options.height || 800
-      const ctx = canvas.getContext("2d")
+      // 等待页面完全加载
+      await this.waitForPageLoad(options)
 
-      if (ctx) {
-        // 绘制背景
-        ctx.fillStyle = options.backgroundColor || "#f8fafc"
-        ctx.fillRect(0, 0, canvas.width, canvas.height)
+      // 移除不需要的元素
+      const removedElements = this.removeElements(options.removeElements || [])
 
-        // 绘制标题
-        ctx.fillStyle = "#1e293b"
-        ctx.font = "bold 24px Arial"
-        ctx.fillText("用户数据资产中台", 50, 60)
+      try {
+        // 调用基础截图服务
+        const result = await screenshotService.captureViewport(options)
 
-        // 绘制页面信息
-        ctx.fillStyle = "#64748b"
-        ctx.font = "16px Arial"
-        ctx.fillText(`页面: ${window.location.pathname}`, 50, 100)
-        ctx.fillText(`截图时间: ${new Date().toLocaleString()}`, 50, 130)
-        ctx.fillText(`分辨率: ${canvas.width} x ${canvas.height}`, 50, 160)
-
-        // 绘制一些装饰性元素
-        ctx.strokeStyle = "#e2e8f0"
-        ctx.lineWidth = 2
-        ctx.strokeRect(30, 30, canvas.width - 60, canvas.height - 60)
-
-        // 绘制一些模拟的图表元素
-        ctx.fillStyle = "#3b82f6"
-        ctx.fillRect(50, 200, 200, 100)
-        ctx.fillStyle = "#ffffff"
-        ctx.font = "14px Arial"
-        ctx.fillText("数据概览", 60, 230)
-        ctx.fillText("用户总数: 125,678", 60, 250)
-        ctx.fillText("活跃用户: 45,678", 60, 270)
-
-        ctx.fillStyle = "#10b981"
-        ctx.fillRect(300, 200, 200, 100)
-        ctx.fillStyle = "#ffffff"
-        ctx.fillText("AI分析", 310, 230)
-        ctx.fillText("预测准确率: 94.2%", 310, 250)
-        ctx.fillText("异常检测: 3个", 310, 270)
-
-        const dataUrl = canvas.toDataURL(`image/${options.format || "png"}`, options.quality || 0.9)
-
-        return {
-          success: true,
-          dataUrl,
-          method: "enhanced-canvas",
+        // 添加水印
+        if (options.addWatermark && result.success && result.dataUrl) {
+          result.dataUrl = await this.addWatermark(result.dataUrl, options.watermarkText)
         }
-      }
 
-      throw new Error("无法创建截图")
+        return result
+      } finally {
+        // 恢复移除的元素
+        this.restoreElements(removedElements)
+      }
     } catch (error) {
+      console.error("增强截图失败:", error)
       return {
         success: false,
         error: error instanceof Error ? error.message : "未知错误",
@@ -80,55 +40,131 @@ class EnhancedScreenshotService {
     }
   }
 
-  async captureElement(element: HTMLElement, options: ScreenshotOptions = {}): Promise<ScreenshotResult> {
+  async captureElement(element: HTMLElement, options: EnhancedScreenshotOptions = {}): Promise<ScreenshotResult> {
     try {
-      // 获取元素的尺寸和位置
-      const rect = element.getBoundingClientRect()
-      const canvas = document.createElement("canvas")
-      canvas.width = options.width || rect.width
-      canvas.height = options.height || rect.height
-      const ctx = canvas.getContext("2d")
+      // 等待页面完全加载
+      await this.waitForPageLoad(options)
 
-      if (ctx) {
-        // 绘制背景
-        ctx.fillStyle = options.backgroundColor || "#ffffff"
-        ctx.fillRect(0, 0, canvas.width, canvas.height)
+      // 调用基础截图服务
+      const result = await screenshotService.captureElement(element, options)
 
-        // 绘制元素信息
-        ctx.fillStyle = "#1e293b"
-        ctx.font = "16px Arial"
-        ctx.fillText(`元素截图: ${element.tagName}`, 20, 30)
-
-        if (element.textContent) {
-          ctx.fillStyle = "#64748b"
-          ctx.font = "14px Arial"
-          const text = element.textContent.substring(0, 50) + (element.textContent.length > 50 ? "..." : "")
-          ctx.fillText(`内容: ${text}`, 20, 60)
-        }
-
-        // 绘制边框
-        ctx.strokeStyle = "#e2e8f0"
-        ctx.lineWidth = 1
-        ctx.strokeRect(10, 10, canvas.width - 20, canvas.height - 20)
-
-        const dataUrl = canvas.toDataURL(`image/${options.format || "png"}`, options.quality || 0.9)
-
-        return {
-          success: true,
-          dataUrl,
-          method: "enhanced-element",
-        }
+      // 添加水印
+      if (options.addWatermark && result.success && result.dataUrl) {
+        result.dataUrl = await this.addWatermark(result.dataUrl, options.watermarkText)
       }
 
-      throw new Error("无法截取元素")
+      return result
     } catch (error) {
+      console.error("增强元素截图失败:", error)
       return {
         success: false,
         error: error instanceof Error ? error.message : "未知错误",
       }
     }
   }
+
+  private async waitForPageLoad(options: EnhancedScreenshotOptions): Promise<void> {
+    // 等待图片加载
+    if (options.waitForImages) {
+      await this.waitForImages()
+    }
+
+    // 等待字体加载
+    if (options.waitForFonts) {
+      await this.waitForFonts()
+    }
+
+    // 额外等待时间确保渲染完成
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+  }
+
+  private async waitForImages(): Promise<void> {
+    const images = Array.from(document.images)
+    const promises = images.map((img) => {
+      if (img.complete) return Promise.resolve()
+
+      return new Promise((resolve, reject) => {
+        img.onload = resolve
+        img.onerror = resolve // 即使图片加载失败也继续
+        setTimeout(resolve, 5000) // 5秒超时
+      })
+    })
+
+    await Promise.all(promises)
+  }
+
+  private async waitForFonts(): Promise<void> {
+    if ("fonts" in document) {
+      try {
+        await document.fonts.ready
+      } catch (error) {
+        console.warn("字体加载等待失败:", error)
+      }
+    }
+  }
+
+  private removeElements(selectors: string[]): Array<{ element: Element; parent: Node; nextSibling: Node | null }> {
+    const removedElements: Array<{ element: Element; parent: Node; nextSibling: Node | null }> = []
+
+    selectors.forEach((selector) => {
+      const elements = document.querySelectorAll(selector)
+      elements.forEach((element) => {
+        if (element.parentNode) {
+          removedElements.push({
+            element,
+            parent: element.parentNode,
+            nextSibling: element.nextSibling,
+          })
+          element.parentNode.removeChild(element)
+        }
+      })
+    })
+
+    return removedElements
+  }
+
+  private restoreElements(removedElements: Array<{ element: Element; parent: Node; nextSibling: Node | null }>): void {
+    removedElements.forEach(({ element, parent, nextSibling }) => {
+      if (nextSibling) {
+        parent.insertBefore(element, nextSibling)
+      } else {
+        parent.appendChild(element)
+      }
+    })
+  }
+
+  private async addWatermark(dataUrl: string, watermarkText?: string): Promise<string> {
+    return new Promise((resolve) => {
+      const canvas = document.createElement("canvas")
+      const ctx = canvas.getContext("2d")
+      const img = new Image()
+
+      img.onload = () => {
+        canvas.width = img.width
+        canvas.height = img.height
+
+        // 绘制原图
+        ctx?.drawImage(img, 0, 0)
+
+        if (ctx && watermarkText) {
+          // 添加水印
+          ctx.font = "16px Arial"
+          ctx.fillStyle = "rgba(0, 0, 0, 0.5)"
+          ctx.textAlign = "right"
+          ctx.fillText(
+            watermarkText || `截图时间: ${new Date().toLocaleString()}`,
+            canvas.width - 20,
+            canvas.height - 20,
+          )
+        }
+
+        resolve(canvas.toDataURL("image/png"))
+      }
+
+      img.src = dataUrl
+    })
+  }
 }
 
 export const enhancedScreenshotService = new EnhancedScreenshotService()
-export type { ScreenshotResult, ScreenshotOptions }
+export type { EnhancedScreenshotOptions }

lib/documentation/page-registry.ts

@@ -25,54 +25,18 @@ class PageRegistry {
       description: "用户行为洞察分析",
       category: "用户分析",
     },
-    {
-      path: "/user-discovery/behavior",
-      name: "行为分析",
-      description: "用户行为模式分析",
-      category: "用户分析",
-    },
-    {
-      path: "/user-discovery/segmentation",
-      name: "用户分群",
-      description: "智能用户分群",
-      category: "用户分析",
-    },
     {
       path: "/user-valuation",
       name: "用户估值",
       description: "用户价值评估模型",
       category: "价值分析",
     },
-    {
-      path: "/user-valuation/model",
-      name: "估值模型",
-      description: "RFM价值评估",
-      category: "价值分析",
-    },
-    {
-      path: "/user-valuation/upgrade-paths",
-      name: "升级路径",
-      description: "用户价值提升策略",
-      category: "价值分析",
-    },
     {
       path: "/ai-analysis",
       name: "AI分析",
       description: "智能数据洞察",
       category: "AI功能",
     },
-    {
-      path: "/ai-analysis/trends",
-      name: "趋势识别",
-      description: "AI趋势预测",
-      category: "AI功能",
-    },
-    {
-      path: "/ai-analysis/anomaly",
-      name: "异常检测",
-      description: "智能异常监控",
-      category: "AI功能",
-    },
     {
       path: "/devices",
       name: "设备管理",

lib/documentation/screenshot-service.ts

@@ -3,33 +3,33 @@
  * 结合多种技术方案确保能够成功捕获页面截图
  */
 
-interface ScreenshotResult {
+export interface ScreenshotOptions {
+  format?: "png" | "jpeg" | "webp"
+  quality?: number
+  scale?: number
+  backgroundColor?: string
+  timeout?: number
+  width?: number
+  height?: number
+}
+
+export interface ScreenshotResult {
   success: boolean
   dataUrl?: string
   error?: string
   method?: string
 }
 
-interface ScreenshotOptions {
-  format?: "png" | "jpeg" | "webp"
-  quality?: number
-  scale?: number
-  width?: number
-  height?: number
-  backgroundColor?: string
-  timeout?: number
-}
-
 class ScreenshotService {
   async captureViewport(options: ScreenshotOptions = {}): Promise<ScreenshotResult> {
     try {
       // 方法1: 使用 html2canvas
       if (typeof window !== "undefined" && window.html2canvas) {
         const canvas = await window.html2canvas(document.body, {
-          width: options.width || window.innerWidth,
-          height: options.height || window.innerHeight,
-          scale: options.scale || 1,
           backgroundColor: options.backgroundColor || "#ffffff",
+          scale: options.scale || 1,
+          width: options.width,
+          height: options.height,
           useCORS: true,
           allowTaint: true,
         })
@@ -46,8 +46,9 @@ class ScreenshotService {
       // 方法2: 使用 dom-to-image
       if (typeof window !== "undefined" && window.domtoimage) {
         const dataUrl = await window.domtoimage.toPng(document.body, {
-          width: options.width || window.innerWidth,
-          height: options.height || window.innerHeight,
+          bgcolor: options.backgroundColor || "#ffffff",
+          width: options.width,
+          height: options.height,
           style: {
             transform: `scale(${options.scale || 1})`,
             transformOrigin: "top left",
@@ -63,32 +64,35 @@ class ScreenshotService {
 
       // 方法3: 使用 Canvas API (基础实现)
       const canvas = document.createElement("canvas")
-      canvas.width = options.width || window.innerWidth
-      canvas.height = options.height || window.innerHeight
       const ctx = canvas.getContext("2d")
 
-      if (ctx) {
-        ctx.fillStyle = options.backgroundColor || "#ffffff"
-        ctx.fillRect(0, 0, canvas.width, canvas.height)
-
-        // 简单的文本渲染作为占位符
-        ctx.fillStyle = "#333333"
-        ctx.font = "16px Arial"
-        ctx.fillText("页面截图占位符", 50, 50)
-        ctx.fillText(`页面: ${window.location.pathname}`, 50, 80)
-        ctx.fillText(`时间: ${new Date().toLocaleString()}`, 50, 110)
-
-        const dataUrl = canvas.toDataURL(`image/${options.format || "png"}`, options.quality || 0.9)
-
-        return {
-          success: true,
-          dataUrl,
-          method: "canvas-fallback",
-        }
+      if (!ctx) {
+        throw new Error("无法获取Canvas上下文")
       }
 
-      throw new Error("无法创建截图")
+      canvas.width = options.width || window.innerWidth
+      canvas.height = options.height || window.innerHeight
+
+      // 设置背景色
+      ctx.fillStyle = options.backgroundColor || "#ffffff"
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+      // 简单的文本渲染作为占位符
+      ctx.fillStyle = "#333333"
+      ctx.font = "16px Arial"
+      ctx.fillText("页面截图占位符", 50, 50)
+      ctx.fillText(`URL: ${window.location.href}`, 50, 80)
+      ctx.fillText(`时间: ${new Date().toLocaleString()}`, 50, 110)
+
+      const dataUrl = canvas.toDataURL(`image/${options.format || "png"}`, options.quality || 0.9)
+
+      return {
+        success: true,
+        dataUrl,
+        method: "canvas-fallback",
+      }
     } catch (error) {
+      console.error("截图失败:", error)
       return {
         success: false,
         error: error instanceof Error ? error.message : "未知错误",
@@ -101,10 +105,10 @@ class ScreenshotService {
       // 使用 html2canvas 截取特定元素
       if (typeof window !== "undefined" && window.html2canvas) {
         const canvas = await window.html2canvas(element, {
-          width: options.width || element.offsetWidth,
-          height: options.height || element.offsetHeight,
-          scale: options.scale || 1,
           backgroundColor: options.backgroundColor || "#ffffff",
+          scale: options.scale || 1,
+          width: options.width,
+          height: options.height,
           useCORS: true,
           allowTaint: true,
         })
@@ -121,8 +125,9 @@ class ScreenshotService {
       // 使用 dom-to-image 截取特定元素
       if (typeof window !== "undefined" && window.domtoimage) {
         const dataUrl = await window.domtoimage.toPng(element, {
-          width: options.width || element.offsetWidth,
-          height: options.height || element.offsetHeight,
+          bgcolor: options.backgroundColor || "#ffffff",
+          width: options.width,
+          height: options.height,
         })
 
         return {
@@ -132,8 +137,9 @@ class ScreenshotService {
         }
       }
 
-      throw new Error("无法截取元素")
+      throw new Error("没有可用的截图库")
     } catch (error) {
+      console.error("元素截图失败:", error)
       return {
         success: false,
         error: error instanceof Error ? error.message : "未知错误",
@@ -143,7 +149,14 @@ class ScreenshotService {
 }
 
 export const screenshotService = new ScreenshotService()
-export type { ScreenshotResult, ScreenshotOptions }
+
+// 扩展 Window 接口以包含截图库
+declare global {
+  interface Window {
+    html2canvas?: any
+    domtoimage?: any
+  }
+}
 
 // 动态导入所需库
 let htmlToImageModule: any = null
@@ -369,18 +382,18 @@ async function captureWithCanvas(target: HTMLIFrameElement | Window): Promise<st
     // 将文档转换为SVG数据URL
     const data = new XMLSerializer().serializeToString(document.documentElement)
     const svg = new Blob([data], { type: "image/svg+xml" })
-    const url = URL.createObjectURL(svg)
+    const svgUrl = URL.createObjectURL(svg)
 
     // 等待图像加载
     await new Promise((resolve, reject) => {
       img.onload = resolve
       img.onerror = reject
-      img.src = url
+      img.src = svgUrl
     })
 
     // 绘制图像
     ctx.drawImage(img, 0, 0, width, height)
-    URL.revokeObjectURL(url)
+    URL.revokeObjectURL(svgUrl)
 
     // 返回数据URL
     return canvas.toDataURL("image/png")