307 lines
12 KiB
TypeScript
307 lines
12 KiB
TypeScript
"use client"
|
||
|
||
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
|
||
import { getDocumentationCatalog, type DocumentationPage } from "@/lib/documentation/catalog"
|
||
import { FileText, Download, Loader2, CheckCircle, XCircle, Eye, RefreshCw } from "lucide-react"
|
||
|
||
type PageStatus = "pending" | "loading" | "success" | "error"
|
||
|
||
type PageState = {
|
||
page: DocumentationPage
|
||
status: PageStatus
|
||
error?: string
|
||
}
|
||
|
||
export default function DocumentationToolPage() {
|
||
const [isGenerating, setIsGenerating] = useState(false)
|
||
const [error, setError] = useState<string | null>(null)
|
||
const [progress, setProgress] = useState(0)
|
||
const [currentPage, setCurrentPage] = useState<string | null>(null)
|
||
const [pageStates, setPageStates] = useState<PageState[]>([])
|
||
const [previewPath, setPreviewPath] = useState<string | null>(null)
|
||
const [showPreview, setShowPreview] = useState(false)
|
||
const iframeRef = useRef<HTMLIFrameElement>(null)
|
||
|
||
const pages = useMemo(() => getDocumentationCatalog(), [])
|
||
|
||
const groupedPages = useMemo(() => {
|
||
const groups: Record<string, DocumentationPage[]> = {}
|
||
for (const page of pages) {
|
||
if (!groups[page.group]) groups[page.group] = []
|
||
groups[page.group].push(page)
|
||
}
|
||
return groups
|
||
}, [pages])
|
||
|
||
useEffect(() => {
|
||
setPageStates(pages.map((page) => ({ page, status: "pending" })))
|
||
}, [pages])
|
||
|
||
const handleGenerate = async () => {
|
||
setError(null)
|
||
setIsGenerating(true)
|
||
setProgress(0)
|
||
setCurrentPage(null)
|
||
setPageStates(pages.map((page) => ({ page, status: "loading" })))
|
||
|
||
try {
|
||
// Simulate progress while waiting for the API
|
||
let progressValue = 0
|
||
const progressInterval = setInterval(() => {
|
||
progressValue += 2
|
||
const pageIndex = Math.floor((progressValue / 100) * pages.length)
|
||
const nextPage = pages[Math.min(pageIndex, pages.length - 1)]
|
||
if (nextPage) setCurrentPage(nextPage.title)
|
||
setProgress(Math.min(progressValue, 90))
|
||
|
||
// Update page states to show progress
|
||
setPageStates((prev) =>
|
||
prev.map((s, idx) => ({
|
||
...s,
|
||
status: idx < pageIndex ? "success" : idx === pageIndex ? "loading" : "pending",
|
||
})),
|
||
)
|
||
}, 800)
|
||
|
||
// Get token from URL if provided
|
||
const urlParams = new URLSearchParams(window.location.search)
|
||
const token = urlParams.get("token") || ""
|
||
|
||
const response = await fetch(`/api/documentation/generate${token ? `?token=${token}` : ""}`, {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
...(token ? { "x-documentation-token": token } : {}),
|
||
},
|
||
})
|
||
|
||
clearInterval(progressInterval)
|
||
|
||
if (!response.ok) {
|
||
const text = await response.text().catch(() => "")
|
||
let errorMessage = `生成失败(${response.status})`
|
||
try {
|
||
const json = JSON.parse(text)
|
||
errorMessage = json.error || errorMessage
|
||
} catch {
|
||
if (text) errorMessage = text
|
||
}
|
||
throw new Error(errorMessage)
|
||
}
|
||
|
||
setProgress(100)
|
||
setCurrentPage("完成")
|
||
setPageStates(pages.map((page) => ({ page, status: "success" })))
|
||
|
||
const blob = await response.blob()
|
||
const url = URL.createObjectURL(blob)
|
||
const a = document.createElement("a")
|
||
a.href = url
|
||
a.download = `应用功能文档_${new Date().toISOString().slice(0, 10)}.docx`
|
||
document.body.appendChild(a)
|
||
a.click()
|
||
a.remove()
|
||
URL.revokeObjectURL(url)
|
||
} catch (e) {
|
||
const message = e instanceof Error ? e.message : String(e)
|
||
setError(message)
|
||
setPageStates((prev) => prev.map((s) => ({ ...s, status: "error" })))
|
||
} finally {
|
||
setIsGenerating(false)
|
||
}
|
||
}
|
||
|
||
const handlePreview = useCallback((path: string) => {
|
||
setPreviewPath(path)
|
||
setShowPreview(true)
|
||
}, [])
|
||
|
||
const getStatusIcon = (status: PageStatus) => {
|
||
switch (status) {
|
||
case "pending":
|
||
return <div className="w-4 h-4 rounded-full bg-gray-600" />
|
||
case "loading":
|
||
return <Loader2 className="w-4 h-4 animate-spin text-teal-400" />
|
||
case "success":
|
||
return <CheckCircle className="w-4 h-4 text-green-500" />
|
||
case "error":
|
||
return <XCircle className="w-4 h-4 text-red-500" />
|
||
}
|
||
}
|
||
|
||
return (
|
||
<main className="min-h-screen bg-background text-foreground p-4 pb-24">
|
||
<div className="max-w-md mx-auto space-y-4">
|
||
{/* Header */}
|
||
<div className="flex items-center gap-3 py-2">
|
||
<FileText className="w-6 h-6 text-teal-400" />
|
||
<div>
|
||
<h1 className="text-lg font-semibold">文档生成器</h1>
|
||
<p className="text-xs text-muted-foreground">自动截图并导出专业文档</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Info Card */}
|
||
<div className="bg-card border border-border rounded-xl p-4 space-y-2">
|
||
<div className="flex items-center justify-between text-sm">
|
||
<span className="text-muted-foreground">页面总数</span>
|
||
<span className="font-medium text-teal-400">{pages.length} 个</span>
|
||
</div>
|
||
<div className="flex items-center justify-between text-sm">
|
||
<span className="text-muted-foreground">分组数量</span>
|
||
<span className="font-medium">{Object.keys(groupedPages).length} 组</span>
|
||
</div>
|
||
<div className="flex items-center justify-between text-sm">
|
||
<span className="text-muted-foreground">输出格式</span>
|
||
<span className="font-medium">Word (.docx)</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Progress */}
|
||
{isGenerating && (
|
||
<div className="bg-card border border-border rounded-xl p-4 space-y-3">
|
||
<div className="flex items-center justify-between text-sm">
|
||
<span className="text-muted-foreground">生成进度</span>
|
||
<span className="font-medium text-teal-400">{Math.round(progress)}%</span>
|
||
</div>
|
||
<div className="w-full h-2 bg-muted rounded-full overflow-hidden">
|
||
<div
|
||
className="h-full bg-gradient-to-r from-teal-500 to-cyan-400 transition-all duration-300"
|
||
style={{ width: `${progress}%` }}
|
||
/>
|
||
</div>
|
||
{currentPage && <p className="text-xs text-muted-foreground truncate">正在处理: {currentPage}</p>}
|
||
</div>
|
||
)}
|
||
|
||
{/* Error */}
|
||
{error && (
|
||
<div className="bg-destructive/10 border border-destructive/30 text-destructive rounded-xl p-3 text-sm">
|
||
<p className="font-medium mb-1">生成失败</p>
|
||
<p className="text-xs opacity-80">{error}</p>
|
||
<p className="text-xs mt-2 opacity-60">提示: 如需授权,请在URL中添加 ?token=your_token</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Generate Button */}
|
||
<button
|
||
type="button"
|
||
onClick={handleGenerate}
|
||
disabled={isGenerating}
|
||
className="w-full bg-gradient-to-r from-teal-500 to-cyan-500 text-white rounded-xl py-3.5 font-medium disabled:opacity-60 flex items-center justify-center gap-2 shadow-lg shadow-teal-500/20"
|
||
>
|
||
{isGenerating ? (
|
||
<>
|
||
<Loader2 className="w-5 h-5 animate-spin" />
|
||
<span>正在生成文档...</span>
|
||
</>
|
||
) : (
|
||
<>
|
||
<Download className="w-5 h-5" />
|
||
<span>一键生成 Word 文档</span>
|
||
</>
|
||
)}
|
||
</button>
|
||
|
||
{/* Page List */}
|
||
<div className="space-y-3">
|
||
<h2 className="text-sm font-medium text-muted-foreground flex items-center gap-2">
|
||
<span>文档目录预览</span>
|
||
<span className="text-xs opacity-60">({pages.length}个页面)</span>
|
||
</h2>
|
||
|
||
{Object.entries(groupedPages).map(([group, groupPages]) => (
|
||
<div key={group} className="bg-card border border-border rounded-xl overflow-hidden">
|
||
<div className="px-3 py-2 bg-muted/50 border-b border-border">
|
||
<h3 className="text-sm font-medium text-teal-400">{group}</h3>
|
||
</div>
|
||
<div className="divide-y divide-border">
|
||
{groupPages.map((page, index) => {
|
||
const state = pageStates.find((s) => s.page.path === page.path)
|
||
return (
|
||
<div
|
||
key={page.path}
|
||
className="px-3 py-2.5 flex items-center gap-3 hover:bg-muted/30 transition-colors"
|
||
>
|
||
<span className="text-xs text-muted-foreground w-5">{index + 1}</span>
|
||
{state && getStatusIcon(state.status)}
|
||
<div className="flex-1 min-w-0">
|
||
<p className="text-sm font-medium truncate">{page.title}</p>
|
||
{page.subtitle && <p className="text-xs text-muted-foreground truncate">{page.subtitle}</p>}
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => handlePreview(page.path)}
|
||
className="p-1.5 text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors"
|
||
title="预览页面"
|
||
>
|
||
<Eye className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Features */}
|
||
<div className="bg-card border border-border rounded-xl p-4 space-y-3">
|
||
<h3 className="text-sm font-medium">文档包含内容</h3>
|
||
<ul className="text-xs text-muted-foreground space-y-2">
|
||
<li className="flex items-start gap-2">
|
||
<CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
|
||
<span>自动生成的目录结构</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
|
||
<span>所有页面的真实截图(iPhone 14 Pro Max尺寸)</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
|
||
<span>每个页面的功能说明与路径</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
|
||
<span>按功能模块分组整理</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
{/* Note */}
|
||
<p className="text-xs text-muted-foreground text-center">生成过程需要30-60秒，请耐心等待</p>
|
||
</div>
|
||
|
||
{/* Preview Modal */}
|
||
{showPreview && previewPath && (
|
||
<div className="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4">
|
||
<div className="bg-card rounded-2xl w-full max-w-md overflow-hidden border border-border">
|
||
<div className="flex items-center justify-between px-4 py-3 border-b border-border">
|
||
<h3 className="font-medium text-sm">页面预览</h3>
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={() => iframeRef.current?.contentWindow?.location.reload()}
|
||
className="p-1.5 text-muted-foreground hover:text-foreground rounded-lg"
|
||
>
|
||
<RefreshCw className="w-4 h-4" />
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowPreview(false)}
|
||
className="p-1.5 text-muted-foreground hover:text-foreground rounded-lg"
|
||
>
|
||
<XCircle className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="w-full aspect-[430/932] bg-white">
|
||
<iframe ref={iframeRef} src={previewPath} className="w-full h-full" title="Page Preview" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</main>
|
||
)
|
||
}
|