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>
This commit is contained in:
v0
@@ -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 }
|
||||
|
||||
Reference in New Issue
Block a user