使用claude code开发在线预览word、excel、ppt、pdf等多种文件，基于onlyoffice实现预览，onlyoffice包含AI插件，可以对文件内容进行处理

在线地址

https://chat.xutongbao.top/nextjs/light/onlyOffice

page.tsx

'use client'

import { useState, useRef, useEffect } from 'react'
import Header from '@/components/header'
import {
ArrowLeft,
Upload,
FileText,
File,
CheckCircle2,
AlertCircle,
Loader2,
X,
FolderOpen,
Sparkles,
Copy,
Search,
BookOpen,
MessageSquare,
Wand2,
} from 'lucide-react'
import { useRouter } from 'next/navigation'
import { Button } from '@/components/ui/button'
import Script from 'next/script'
import { cn } from '@/lib/utils'
import Api from '@/api/h5Api'

// 声明全局 DocsAPI 类型
declare global {
interface Window {
DocsAPI?: {
DocEditor: new (id: string, config: any) => any
}
}
}

// OnlyOffice Editor 实例类型
interface DocEditorInstance {
destroyEditor: () => void
downloadAs: (format: string) => void
requestClose: () => void
}

// 支持的文件格式
const SUPPORTED_FORMATS = {
documents: [
'.doc',
'.docx',
'.docm',
'.dot',
'.dotx',
'.dotm',
'.odt',
'.fodt',
'.ott',
'.rtf',
'.txt',
'.html',
'.htm',
'.mht',
'.pdf',
'.djvu',
'.fb2',
'.epub',
'.xps',
],
spreadsheets: [
'.xls',
'.xlsx',
'.xlsm',
'.xlt',
'.xltx',
'.xltm',
'.ods',
'.fods',
'.ots',
'.csv',
],
presentations: [
'.pps',
'.ppsx',
'.ppsm',
'.ppt',
'.pptx',
'.pptm',
'.pot',
'.potx',
'.potm',
'.odp',
'.fodp',
'.otp',
],
}

const ALL_FORMATS = [
…SUPPORTED_FORMATS.documents,
…SUPPORTED_FORMATS.spreadsheets,
…SUPPORTED_FORMATS.presentations,
]

interface UploadedFile {
file: File
name: string
size: number
type: string
uploadTime: number
previewUrl?: string
}

// API 响应类型
interface ApiResponse {
code: number
data?: {
token?: string
key?: string
url?: string
}
}

export default function OnlyOfficePage() {
const router = useRouter()
const [uploadedFile, setUploadedFile] = useState<UploadedFile | null>(null)
const [isUploading, setIsUploading] = useState(false)
const [isDragOver, setIsDragOver] = useState(false)
const [error, setError] = useState<string | null>(null)
const [isPreviewReady, setIsPreviewReady] = useState(false)
const [scriptLoaded, setScriptLoaded] = useState(false)
const [qiniuToken, setQiniuToken] = useState<string>('')
const [uploadProgress, setUploadProgress] = useState<number>(0)
const fileInputRef = useRef<HTMLInputElement>(null)
const editorContainerRef = useRef<HTMLDivElement>(null)
const docEditorRef = useRef<DocEditorInstance | null>(null)

// 鼠标位置追踪
const mousePositionRef = useRef({ x: 0, y: 0 })

// 上下文菜单状态
const [contextMenu, setContextMenu] = useState<{
visible: boolean
x: number
y: number
selectedText: string
}>({
visible: false,
x: 0,
y: 0,
selectedText: '',
})

// 格式化文件大小
const formatBytes = (bytes: number): string => {
if (bytes === 0) return '0 B'
const k = 1024
const sizes = ['B', 'KB', 'MB', 'GB']
const i = Math.floor(Math.log(bytes) / Math.log(k))
return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i]
}

// 检查文件格式
const isFileSupported = (fileName: string): boolean => {
const ext = '.' + fileName.split('.').pop()?.toLowerCase()
return ALL_FORMATS.includes(ext)
}

// 获取文件类型
const getFileType = (
fileName: string,
): 'word' | 'cell' | 'slide' | 'unknown' => {
const ext = '.' + fileName.split('.').pop()?.toLowerCase()
if (SUPPORTED_FORMATS.documents.includes(ext)) return 'word'
if (SUPPORTED_FORMATS.spreadsheets.includes(ext)) return 'cell'
if (SUPPORTED_FORMATS.presentations.includes(ext)) return 'slide'
return 'unknown'
}

// 获取七牛云上传 token
useEffect(() => {
const fetchQiniuToken = async () => {
try {
const res = (await Api.uploadGetTokenForH5(
{}
)) as unknown as ApiResponse
if (res.code === 200 && res.data?.token) {
setQiniuToken(res.data.token)
}
} catch (error) {
console.error('获取上传token失败:', error)
}
}
fetchQiniuToken()
}, [])

// 上传文件到七牛云
const uploadFileToQiniu = async (file: File): Promise<string> => {
if (!qiniuToken) {
throw new Error('上传 token 未获取，请稍后重试')
}

const formData = new FormData()
const key = `ai/onlyoffice/${Date.now()}_${file.name}`
formData.append('file', file)
formData.append('token', qiniuToken)
formData.append('key', key)

setUploadProgress(10)

const response = await fetch('https://upload-z1.qiniup.com', {
method: 'POST',
body: formData,
})

setUploadProgress(80)

const result = await response.json()

console.log('七牛云上传响应:', result)

// 七牛云直接返回 { key: "…", hash: "…" }
if (result.code === 200) {
const fileUrl = `https://static.xutongbao.top/${result.data.key}`
setUploadProgress(100)
console.log('上传成功，文件 URL:', fileUrl)
return fileUrl
} else {
throw new Error(result.error || '上传失败，未返回文件地址')
}
}

// 处理文件选择（改为上传到七牛云）
const handleFileSelect = async (file: File) => {
setError(null)
setIsPreviewReady(false)
setUploadProgress(0)

if (!isFileSupported(file.name)) {
setError(
`不支持的文件格式。支持的格式包括：${ALL_FORMATS.slice(0, 10).join(', ')} 等`,
)
return
}

if (!qiniuToken) {
setError('上传服务未就绪，请稍后重试')
return
}

setIsUploading(true)

try {
// 上传文件到七牛云
const fileUrl = await uploadFileToQiniu(file)

const uploadedFileData: UploadedFile = {
file,
name: file.name,
size: file.size,
type: getFileType(file.name),
uploadTime: Date.now(),
previewUrl: fileUrl, // 使用七牛云返回的 URL
}

setUploadedFile(uploadedFileData)

// 延迟显示预览准备就绪，useEffect 会自动触发 initOnlyOfficeEditor
setTimeout(() => {
setIsPreviewReady(true)
}, 500)
} catch (err: any) {
console.error('上传失败:', err)
setError(err.message || '上传失败，请重试')
} finally {
setIsUploading(false)
setUploadProgress(0)
}
}

// 初始化 OnlyOffice 编辑器
const initOnlyOfficeEditor = (fileData: any, type?: any) => {
if (!editorContainerRef.current || !window.DocsAPI) {
console.warn('OnlyOffice API 未加载或容器未准备好')
return
}

// 销毁旧的编辑器实例
if (docEditorRef.current) {
try {
docEditorRef.current.destroyEditor()
docEditorRef.current = null
// 清理容器内容
if (editorContainerRef.current) {
editorContainerRef.current.innerHTML = ''
}
} catch (error) {
console.warn('销毁旧编辑器失败:', error)
}
}

// 确定文件 URL 和数据
let url: string
let documentType: string
let fileName: string
let fileType: string
let timestamp: number

// 测试按钮使用固定的测试文件
if (type === '1') {
url = 'https://static.xutongbao.top/ai/onlyoffice/1769051991957_%E6%B5%8B%E8%AF%95%E4%B8%80%E4%B8%8B.docx'
documentType = 'word'
fileName = '测试.docx'
fileType = 'docx'
timestamp = 1768789600204
} else if (type === '2') {
url = 'https://static.xutongbao.top/ai/onlyoffice/1769053651678_1.xlsx'
documentType = 'cell'
fileName = '测试.xlsx'
fileType = 'xlsx'
timestamp = 1768789600204
} else if (type === '3') {
url = 'https://static.xutongbao.top/ai/onlyoffice/1769053694718_1.pptx'
documentType = 'slide'
fileName = '测试.pptx'
fileType = 'pptx'
timestamp = 1768789600204
} else {
// 用户上传的文件
url = fileData.previewUrl || ''
documentType = fileData.type || 'word'
fileName = fileData.name || '未命名文档'
fileType = fileName.split('.').pop() || 'docx'
timestamp = fileData.uploadTime || Date.now()
}

console.log('========== OnlyOffice 初始化 ==========')
console.log('文档 URL:', url)
console.log('文档类型:', documentType)
console.log('文件名:', fileName)
console.log('文件格式:', fileType)
console.log('时间戳:', timestamp)
console.log('=====================================')

if (!url) {
console.error('文档 URL 为空，无法加载')
setError('文档地址获取失败')
return
}

const config = {
documentType,
document: {
fileType,
key: `${timestamp}-${Math.random().toString(36).substring(7)}`,
title: fileName,
url,
},
editorConfig: {
mode: 'edit', // 编辑模式
lang: 'zh-CN',
user: {
id: '690313ca3814f11a1fb7cbd7',
name: '徐同保',
},
// 启用文本选中监听插件
plugins: {
autostart: ['asc.008'],
},
},
width: '100%',
height: '100%',
events: {
onDocumentReady: () => {
console.log('OnlyOffice 文档加载完成')
},
onAppReady: () => {
console.log('OnlyOffice 应用已准备就绪')
},
},
}

const editor = new window.DocsAPI.DocEditor('onlyoffice-editor', config)
docEditorRef.current = editor
}

// 监听 OnlyOffice API 脚本加载和 DOM 准备就绪
useEffect(() => {
if (
window.DocsAPI &&
scriptLoaded &&
uploadedFile &&
isPreviewReady &&
editorContainerRef.current
) {
console.log('useEffect 触发: 所有条件满足，初始化编辑器')
initOnlyOfficeEditor(uploadedFile)
}
}, [scriptLoaded, uploadedFile, isPreviewReady])

// 监听鼠标移动，追踪鼠标坐标
useEffect(() => {
const handleMouseMove = (e: MouseEvent) => {
mousePositionRef.current = { x: e.clientX, y: e.clientY }
}

window.addEventListener('mousemove', handleMouseMove)
return () => {
window.removeEventListener('mousemove', handleMouseMove)
}
}, [])

// 监听来自 OnlyOffice 的消息
useEffect(() => {
const handleMessage = (event: MessageEvent) => {
// 监听来自 OnlyOffice iframe 的消息
if (event.data && typeof event.data === 'object') {
// 添加到对话消息
if (event.data.type === 'ADD_TO_CHAT') {
console.log('✓ 收到添加到对话请求:', event.data.text)
// 这里可以调用你的对话功能
alert(`添加到对话:\\n${event.data.text}`)
}

// 翻译消息
if (event.data.type === 'TRANSLATE_TEXT') {
console.log('✓ 收到翻译请求:', event.data.text)
// 这里可以调用你的翻译功能
alert(`翻译文本:\\n${event.data.text}`)
}

// 文本选中消息 – 使用父页面捕获的鼠标坐标
if (event.data.type === 'TEXT_SELECTED') {
const mousePos = mousePositionRef.current
const selectedText = event.data.text

console.log('✓ 收到文本选中事件:', {
text: selectedText,
mousePosition: mousePos,
timestamp: event.data.timestamp,
})

// 保存选中的文本到 state 并显示悬浮菜单（固定到屏幕中心）
setContextMenu({
visible: true,
x: 0, // 不再使用鼠标坐标
y: 0,
selectedText: selectedText,
})

console.log('选中文本已保存到 state:', selectedText)
console.log('悬浮菜单显示在坐标:', mousePos)
}

// 隐藏文本选中菜单消息
if (event.data.type === 'HIDE_TEXT_SELECTED') {
console.log('✓ 收到隐藏菜单事件:', {
timestamp: event.data.timestamp,
})

setContextMenu({
visible: false,
x: 0,
y: 0,
selectedText: '',
})

console.log('悬浮菜单已隐藏')
}
}
}

window.addEventListener('message', handleMessage)
return () => {
window.removeEventListener('message', handleMessage)
}
}, [])

// 监听全局点击事件，点击菜单外部时隐藏菜单
useEffect(() => {
if (!contextMenu.visible) return

const handleClickOutside = (e: MouseEvent) => {
const target = e.target as HTMLElement
// 检查点击的元素是否在菜单内部
const menuElement = document.getElementById('context-menu')
if (menuElement && !menuElement.contains(target)) {
setContextMenu((prev) => ({ …prev, visible: false }))
}
}

// 延迟添加事件监听，避免菜单刚显示就被关闭
const timer = setTimeout(() => {
document.addEventListener('click', handleClickOutside)
}, 100)

return () => {
clearTimeout(timer)
document.removeEventListener('click', handleClickOutside)
}
}, [contextMenu.visible])

// 添加到对话
const handleAddToChat = () => {
console.log('添加到对话 – 选中的文本:', contextMenu.selectedText)
setContextMenu((prev) => ({ …prev, visible: false }))
}

// 翻译
const handleTranslateText = () => {
console.log('翻译 – 选中的文本:', contextMenu.selectedText)
setContextMenu((prev) => ({ …prev, visible: false }))
}

const handleTest = (type: any) => {
setError(null)

// 先销毁旧的编辑器
if (docEditorRef.current) {
try {
docEditorRef.current.destroyEditor()
docEditorRef.current = null
} catch (error) {
console.warn('销毁旧编辑器失败:', error)
}
}

// 重置状态
setIsPreviewReady(false)
setIsUploading(false)
setUploadedFile(null)

// 根据测试类型设置完整的文件信息
let testFileData: UploadedFile
if (type === '1') {
testFileData = {
file: {} as File, // 测试文件不需要实际 File 对象
name: '测试文档.docx',
size: 245760, // 240 KB
type: 'word',
uploadTime: Date.now(),
previewUrl:
'https://static.xutongbao.top/ai/onlyoffice/1769051991957_%E6%B5%8B%E8%AF%95%E4%B8%80%E4%B8%8B.docx',
}
} else if (type === '2') {
testFileData = {
file: {} as File,
name: '测试表格.xlsx',
size: 102400, // 100 KB
type: 'cell',
uploadTime: Date.now(),
previewUrl:
'https://static.xutongbao.top/ai/onlyoffice/1769053651678_1.xlsx',
}
} else if (type === '3') {
testFileData = {
file: {} as File,
name: '测试演示文稿.pptx',
size: 512000, // 500 KB
type: 'slide',
uploadTime: Date.now(),
previewUrl:
'https://static.xutongbao.top/ai/onlyoffice/1769053694718_1.pptx',
}
} else if (type === '4') {
testFileData = {
file: {} as File,
name: '测试文档.pdf',
size: 1024000, // 1 MB
type: 'word', // PDF 使用 word 类型
uploadTime: Date.now(),
previewUrl:
'https://static.xutongbao.top/ai/onlyoffice/1769054138134_%E6%B5%8B%E8%AF%95%E4%B8%80%E4%B8%8B.pdf',
}
} else {
return
}

// 延迟设置新文件，确保 DOM 完全清理
setTimeout(() => {
setUploadedFile(testFileData)
setTimeout(() => {
setIsPreviewReady(true)
}, 100)
}, 100)
}

// 拖拽事件处理
const handleDragOver = (e: React.DragEvent) => {
e.preventDefault()
setIsDragOver(true)
}

const handleDragLeave = () => {
setIsDragOver(false)
}

const handleDrop = (e: React.DragEvent) => {
e.preventDefault()
setIsDragOver(false)

const file = e.dataTransfer.files[0]
if (file) {
handleFileSelect(file)
}
}

// 清除文件
const handleClearFile = () => {
setUploadedFile(null)
setIsPreviewReady(false)
setError(null)
if (fileInputRef.current) {
fileInputRef.current.value = ''
}
}

return (
<>
{/* 加载 OnlyOffice API 脚本 */}
<Script
src='https://chat.xutongbao.top/onlyoffice/web-apps/apps/api/documents/api.js'
// src='http://20.51.117.204/web-apps/apps/api/documents/api.js'
strategy='afterInteractive'
onLoad={() => {
console.log('OnlyOffice API 加载完成')
setScriptLoaded(true)
}}
onError={(e) => {
console.error('OnlyOffice API 加载失败:', e)
setError('OnlyOffice API 加载失败，请检查网络连接或服务器配置')
}}
/>

<Header />

<main className='m-only-office min-h-screen bg-gradient-to-br from-primary/5 via-background to-secondary/5 relative overflow-hidden'>
{/* 背景装饰 */}
<div className='absolute inset-0 overflow-hidden pointer-events-none'>
<div className='absolute top-20 left-1/4 w-96 h-96 bg-primary/5 rounded-full blur-3xl animate-pulse-slow' />
<div
className='absolute bottom-20 right-1/4 w-96 h-96 bg-secondary/5 rounded-full blur-3xl animate-pulse-slow'
style={{ animationDelay: '2s' }}
/>
<div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-r from-primary/3 to-secondary/3 rounded-full blur-3xl animate-spin-slow' />
</div>

{/* 内容区域 */}
<div className='relative max-w-7xl mx-auto px-4 py-8'>
{/* 返回按钮 */}
<button
onClick={() => router.push('/light')}
className='group mb-8 flex items-center gap-2 px-4 py-3 rounded-2xl bg-card/80 backdrop-blur-xl border-2 border-border hover:border-primary shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 animate-fade-in'
>
<div className='relative'>
<div className='absolute inset-0 bg-primary/20 rounded-full blur-md scale-0 group-hover:scale-150 transition-transform duration-500' />
<ArrowLeft className='relative w-5 h-5 text-primary group-hover:text-primary transition-all duration-300 group-hover:-translate-x-1' />
</div>
<span className='text-sm font-medium text-foreground group-hover:text-primary transition-colors duration-300'>
返回
</span>
</button>

{/* 主标题卡片 */}
<div className='mb-8 p-8 rounded-3xl bg-gradient-to-br from-card/95 to-card/80 backdrop-blur-2xl border-2 border-border/50 shadow-2xl animate-fade-in'>
<div className='flex items-center gap-4 mb-3'>
<div className='relative'>
<div className='absolute inset-0 bg-primary/20 rounded-2xl blur-xl animate-pulse-slow' />
<div className='relative w-16 h-16 rounded-2xl bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center shadow-lg'>
<FileText className='w-8 h-8 text-primary-foreground' />
</div>
</div>
<div className='flex-1'>
<h1 className='text-3xl md:text-4xl font-bold bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent'>
OnlyOffice 文档预览
</h1>
<p className='text-sm text-muted-foreground mt-1'>
支持 Word、Excel、PowerPoint 等多种格式的文档在线预览
</p>
</div>
</div>

{/* 支持格式说明 */}
<div className='mt-4 p-4 rounded-xl bg-muted/30 border border-border/50'>
<div className='flex items-center gap-2 mb-2'>
<Sparkles className='w-4 h-4 text-primary' />
<span className='text-sm font-semibold text-foreground'>
支持的文件格式
</span>
</div>
<div className='grid grid-cols-1 md:grid-cols-3 gap-2 text-xs text-muted-foreground'>
<div>
<span className='font-medium text-foreground'>文档：</span>
DOC, DOCX, ODT, RTF, TXT, PDF 等
</div>
<div>
<span className='font-medium text-foreground'>表格：</span>
XLS, XLSX, ODS, CSV 等
</div>
<div>
<span className='font-medium text-foreground'>演示：</span>
PPT, PPTX, ODP 等
</div>
</div>
</div>
</div>

{/* 测试按钮组 */}
<div className='mb-8 p-6 rounded-3xl bg-gradient-to-br from-card/95 to-card/80 backdrop-blur-2xl border-2 border-border/50 shadow-2xl animate-fade-in'>
<div className='flex items-center gap-2 mb-4'>
<Sparkles className='w-5 h-5 text-primary' />
<h2 className='text-lg font-semibold text-foreground'>
快速测试
</h2>
</div>
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4'>
{/* Word 测试按钮 */}
<button
onClick={() => handleTest('1')}
className='group relative overflow-hidden px-6 py-4 rounded-2xl bg-gradient-to-br from-blue-500/10 to-blue-600/5 backdrop-blur-xl border-2 border-blue-500/30 hover:border-blue-500 shadow-lg hover:shadow-2xl hover:shadow-blue-500/20 transition-all duration-300 hover:scale-105'
>
<div className='absolute inset-0 bg-gradient-to-br from-blue-500/0 to-blue-600/0 group-hover:from-blue-500/10 group-hover:to-blue-600/5 transition-all duration-300' />
<div className='relative flex flex-col items-center gap-3'>
<div className='w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300'>
<FileText className='w-6 h-6 text-white' />
</div>
<div>
<div className='text-sm font-semibold text-foreground group-hover:text-blue-600 transition-colors duration-300'>
测试 Word
</div>
<div className='text-xs text-muted-foreground mt-1'>
文档编辑器
</div>
</div>
</div>
</button>

{/* Excel 测试按钮 */}
<button
onClick={() => handleTest('2')}
className='group relative overflow-hidden px-6 py-4 rounded-2xl bg-gradient-to-br from-green-500/10 to-green-600/5 backdrop-blur-xl border-2 border-green-500/30 hover:border-green-500 shadow-lg hover:shadow-2xl hover:shadow-green-500/20 transition-all duration-300 hover:scale-105'
>
<div className='absolute inset-0 bg-gradient-to-br from-green-500/0 to-green-600/0 group-hover:from-green-500/10 group-hover:to-green-600/5 transition-all duration-300' />
<div className='relative flex flex-col items-center gap-3'>
<div className='w-12 h-12 rounded-xl bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300'>
<File className='w-6 h-6 text-white' />
</div>
<div>
<div className='text-sm font-semibold text-foreground group-hover:text-green-600 transition-colors duration-300'>
测试 Excel
</div>
<div className='text-xs text-muted-foreground mt-1'>
表格编辑器
</div>
</div>
</div>
</button>

{/* PowerPoint 测试按钮 */}
<button
onClick={() => handleTest('3')}
className='group relative overflow-hidden px-6 py-4 rounded-2xl bg-gradient-to-br from-orange-500/10 to-orange-600/5 backdrop-blur-xl border-2 border-orange-500/30 hover:border-orange-500 shadow-lg hover:shadow-2xl hover:shadow-orange-500/20 transition-all duration-300 hover:scale-105'
>
<div className='absolute inset-0 bg-gradient-to-br from-orange-500/0 to-orange-600/0 group-hover:from-orange-500/10 group-hover:to-orange-600/5 transition-all duration-300' />
<div className='relative flex flex-col items-center gap-3'>
<div className='w-12 h-12 rounded-xl bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300'>
<FileText className='w-6 h-6 text-white' />
</div>
<div>
<div className='text-sm font-semibold text-foreground group-hover:text-orange-600 transition-colors duration-300'>
测试 PowerPoint
</div>
<div className='text-xs text-muted-foreground mt-1'>
演示文稿编辑器
</div>
</div>
</div>
</button>

{/* PDF 测试按钮 */}
<button
onClick={() => handleTest('4')}
className='group relative overflow-hidden px-6 py-4 rounded-2xl bg-gradient-to-br from-red-500/10 to-red-600/5 backdrop-blur-xl border-2 border-red-500/30 hover:border-red-500 shadow-lg hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300 hover:scale-105'
>
<div className='absolute inset-0 bg-gradient-to-br from-red-500/0 to-red-600/0 group-hover:from-red-500/10 group-hover:to-red-600/5 transition-all duration-300' />
<div className='relative flex flex-col items-center gap-3'>
<div className='w-12 h-12 rounded-xl bg-gradient-to-br from-red-500 to-red-600 flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300'>
<FileText className='w-6 h-6 text-white' />
</div>
<div>
<div className='text-sm font-semibold text-foreground group-hover:text-red-600 transition-colors duration-300'>
测试 PDF
</div>
<div className='text-xs text-muted-foreground mt-1'>
PDF 阅读器
</div>
</div>
</div>
</button>
</div>
</div>

{/* 上传区域或文件预览 */}
{!uploadedFile ? (
<div className='p-8 rounded-3xl bg-gradient-to-br from-card/95 to-card/80 backdrop-blur-2xl border-2 border-border/50 shadow-2xl animate-fade-in-up'>
<div
className={`
border-2 border-dashed rounded-2xl p-16 text-center cursor-pointer
transition-all duration-300 relative overflow-hidden
${
isDragOver
? 'border-primary bg-primary/10 scale-[1.02]'
: 'border-border hover:border-primary/50 hover:bg-muted/30'
}
`}
onClick={() => fileInputRef.current?.click()}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
>
{/* 装饰性背景 */}
<div className='absolute inset-0 overflow-hidden pointer-events-none'>
<div className='absolute top-0 left-1/4 w-32 h-32 bg-primary/5 rounded-full blur-2xl animate-float' />
<div
className='absolute bottom-0 right-1/4 w-32 h-32 bg-secondary/5 rounded-full blur-2xl animate-float'
style={{ animationDelay: '1s' }}
/>
</div>

<div className='relative flex flex-col items-center gap-6'>
<div
className={`
w-24 h-24 rounded-full flex items-center justify-center
transition-all duration-500
${
isDragOver
? 'bg-primary scale-110 shadow-2xl shadow-primary/50'
: 'bg-gradient-to-br from-primary/20 to-secondary/20 shadow-lg'
}
`}
>
{isUploading ? (
<Loader2 className='w-12 h-12 text-primary animate-spin' />
) : (
<Upload
className={`w-12 h-12 transition-all duration-300 ${
isDragOver ? 'text-white scale-110' : 'text-primary'
}`}
/>
)}
</div>

<div>
<div className='text-2xl font-bold text-foreground mb-2'>
{isUploading
? '上传中…'
: isDragOver
? '松开以上传文件'
: '点击或拖拽文件到此处'}
</div>
<div className='text-sm text-muted-foreground mb-4'>
支持 Word、Excel、PowerPoint、PDF 等多种格式
</div>

{/* 上传进度条 */}
{isUploading && uploadProgress > 0 && (
<div className='w-64 mx-auto mb-4'>
<div className='flex items-center justify-between text-xs text-muted-foreground mb-1'>
<span>上传进度</span>
<span>{uploadProgress}%</span>
</div>
<div className='w-full h-2 bg-muted rounded-full overflow-hidden'>
<div
className='h-full bg-gradient-to-r from-primary to-secondary transition-all duration-300'
style={{ width: `${uploadProgress}%` }}
/>
</div>
</div>
)}

<div className='inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20'>
<FolderOpen className='w-4 h-4 text-primary' />
<span className='text-xs font-medium text-primary'>
单个文件，最大支持 100MB
</span>
</div>
</div>
</div>
</div>

<input
ref={fileInputRef}
type='file'
accept={ALL_FORMATS.join(',')}
className='hidden'
onChange={(e) => {
const file = e.target.files?.[0]
if (file) handleFileSelect(file)
}}
/>

{/* 错误提示 */}
{error && (
<div className='mt-6 p-4 rounded-xl bg-destructive/10 border-2 border-destructive/30 flex items-start gap-3 animate-shake'>
<AlertCircle className='w-5 h-5 text-destructive mt-0.5 flex-shrink-0' />
<div className='flex-1'>
<div className='font-semibold text-destructive mb-1'>
上传失败
</div>
<div className='text-sm text-destructive/80'>{error}</div>
</div>
</div>
)}
</div>
) : (
<>
{/* 文件信息卡片 */}
<div className='mb-6 p-6 rounded-3xl bg-gradient-to-br from-card/95 to-card/80 backdrop-blur-2xl border-2 border-primary/30 shadow-2xl animate-fade-in'>
<div className='flex items-center justify-between'>
<div className='flex items-center gap-4 flex-1'>
<div className='relative'>
<div className='absolute inset-0 bg-green-500/20 rounded-xl blur-lg animate-pulse-slow' />
<div className='relative w-12 h-12 rounded-xl bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center shadow-lg'>
<File className='w-6 h-6 text-white' />
</div>
</div>
<div className='flex-1 min-w-0'>
<div className='flex items-center gap-2 mb-1'>
<h3 className='text-lg font-semibold text-foreground truncate'>
{uploadedFile.name}
</h3>
{isPreviewReady && (
<div className='flex items-center gap-1 px-2 py-1 rounded-full bg-green-500/10 border border-green-500/30'>
<CheckCircle2 className='w-3 h-3 text-green-500' />
<span className='text-xs font-medium text-green-500'>
预览就绪
</span>
</div>
)}
</div>
<div className='flex items-center gap-3 text-xs text-muted-foreground'>
<span>{formatBytes(uploadedFile.size)}</span>
<span>•</span>
<span className='capitalize'>
{uploadedFile.type} 文档
</span>
<span>•</span>
<span>
{new Date(
uploadedFile.uploadTime,
).toLocaleTimeString()}
</span>
</div>
{/* 显示文件 URL */}
{uploadedFile.previewUrl && (
<div className='mt-2 flex items-center gap-2'>
<span className='text-xs text-muted-foreground'>文件地址:</span>
<a
href={uploadedFile.previewUrl}
target='_blank'
rel='noopener noreferrer'
className='text-xs text-primary hover:underline truncate max-w-md'
>
{uploadedFile.previewUrl}
</a>
</div>
)}
</div>
</div>

<Button
onClick={handleClearFile}
variant='outline'
size='sm'
className='rounded-xl border-2 hover:border-destructive hover:bg-destructive/5 hover:text-destructive transition-all duration-300'
>
<X className='w-4 h-4 mr-1' />
关闭
</Button>
</div>
</div>

{/* 预览区域 */}
<div className='rounded-3xl bg-gradient-to-br from-card/95 to-card/80 backdrop-blur-2xl border-2 border-border/50 shadow-2xl animate-fade-in-up overflow-hidden'>
{!isPreviewReady ? (
<div className='w-full h-[calc(100vh-300px)] min-h-[700px] flex flex-col items-center justify-center gap-4 bg-muted/20'>
<Loader2 className='w-12 h-12 text-primary animate-spin' />
<div className='text-lg font-semibold text-foreground'>
正在加载预览…
</div>
<div className='text-sm text-muted-foreground'>
请稍候片刻
</div>
</div>
) : (
<div className='relative'>
<div
ref={editorContainerRef}
id='onlyoffice-editor'
className='w-full h-[calc(100vh-300px)] min-h-[700px] bg-white'
>
{/* OnlyOffice 编辑器将在这里加载 */}
</div>
</div>
)}
</div>
</>
)}
</div>
</main>

{/* 上下文菜单 */}
{contextMenu.visible && (
<div
id='context-menu'
className='fixed z-50'
style={{
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)',
}}
>
<div className='px-4 py-3 rounded-xl bg-gradient-to-br from-card/95 to-card/90 backdrop-blur-2xl border-2 border-border/50 shadow-2xl'>
<div className='flex items-center gap-2'>
{/* 添加到对话按钮 */}
<button
onClick={handleAddToChat}
className='group relative px-4 py-2.5 rounded-lg hover:bg-primary/10 transition-all duration-200 flex items-center gap-2'
title='添加到对话'
>
<div className='absolute inset-0 bg-primary/20 rounded-lg blur-md scale-0 group-hover:scale-100 transition-transform duration-300' />
<MessageSquare className='relative w-4 h-4 text-foreground group-hover:text-primary transition-colors duration-200' />
<span className='relative text-sm text-foreground group-hover:text-primary transition-colors duration-200'>
添加到对话
</span>
</button>

{/* 翻译按钮 */}
<button
onClick={handleTranslateText}
className='group relative px-4 py-2.5 rounded-lg hover:bg-primary/10 transition-all duration-200 flex items-center gap-2'
title='翻译'
>
<div className='absolute inset-0 bg-primary/20 rounded-lg blur-md scale-0 group-hover:scale-100 transition-transform duration-300' />
<BookOpen className='relative w-4 h-4 text-foreground group-hover:text-primary transition-colors duration-200' />
<span className='relative text-sm text-foreground group-hover:text-primary transition-colors duration-200'>
翻译
</span>
</button>
</div>
</div>
</div>
)}

{/* 自定义动画样式 */}
<style jsx global>{`
@keyframes pulse-slow {
0%,
100% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 0.6;
transform: scale(1.05);
}
}

@keyframes spin-slow {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}

@keyframes fade-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes float {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}

@keyframes shake {
0%,
100% {
transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
transform: translateX(-2px);
}
20%,
40%,
60%,
80% {
transform: translateX(2px);
}
}

.animate-pulse-slow {
animation: pulse-slow 4s ease-in-out infinite;
}

.animate-spin-slow {
animation: spin-slow 20s linear infinite;
}

.animate-fade-in {
animation: fade-in 0.5s ease-out forwards;
}

.animate-fade-in-up {
animation: fade-in-up 0.6s ease-out forwards;
}

.animate-float {
animation: float 3s ease-in-out infinite;
}

.animate-shake {
animation: shake 0.5s ease-in-out;
}

/* OnlyOffice 编辑器 iframe 样式 */
.m-only-office iframe {
width: 100% !important;
height: 100% !important;
min-height: 700px !important;
border: none !important;
}
`}</style>
</>
)
}

nginx配置

# OnlyOffice cache 路径代理
location /cache/ {
# 设置允许跨域
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'User-Agent,Keep-Alive,Content-Type,Authorization' always;
add_header 'Access-Control-Max-Age' 1728000 always;

proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_set_header Host $host;

# 关键：告诉后端服务这是 HTTPS 请求
proxy_set_header X-Forwarded-Proto https;
proxy_set_header X-Forwarded-Ssl on;

# 禁用 gzip 压缩
proxy_set_header Accept-Encoding "";

proxy_http_version 1.1;
proxy_set_header Connection "";

# 对于二进制文件，关闭缓冲可能更好
proxy_buffering off;
proxy_cache off;
proxy_request_buffering off;

# 代理到 OnlyOffice 服务器
proxy_pass http://20.51.117.204/cache/;

# 增加超时时间
proxy_connect_timeout 300s;
proxy_send_timeout 300s;
proxy_read_timeout 300s;

# 缓冲区设置（即使关闭 buffering，也保留这些设置）
proxy_buffer_size 128k;
proxy_buffers 8 128k;
proxy_busy_buffers_size 256k;
}

# OnlyOffice 代理配置
location /onlyoffice/ {
# 设置允许跨域
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'User-Agent,Keep-Alive,Content-Type,Authorization' always;
add_header 'Access-Control-Max-Age' 1728000 always;

proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_set_header Host $host;
# 使用代理目标的 Host，而不是客户端请求的 Host
# proxy_set_header Host 20.51.117.204;

# 关键：告诉后端服务这是 HTTPS 请求
proxy_set_header X-Forwarded-Proto https;
proxy_set_header X-Forwarded-Ssl on;

proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";

# 将响应中的 HTTP 链接替换为 HTTPS
sub_filter 'http://chat.xutongbao.top' 'https://chat.xutongbao.top';
sub_filter 'http://${host}' 'https://${host}';
sub_filter_once off;
sub_filter_types *;

chunked_transfer_encoding off;
# 注意：使用 sub_filter 需要开启 buffering
proxy_buffering on;
proxy_cache off;

# 代理到 OnlyOffice 服务器
proxy_pass http://20.51.117.204/;

# 增加超时时间
proxy_connect_timeout 300s;
proxy_send_timeout 300s;
proxy_read_timeout 300s;

# 缓冲区设置
proxy_buffer_size 16k;
proxy_buffers 4 64k;
proxy_busy_buffers_size 128k;
}

# 原有项目根目录 (hash 模式)
location / {
root /temp/yuying;
index index.html index.htm;
add_header Content-Security-Policy upgrade-insecure-requests;
}

参考链接

https://blog.csdn.net/xutongbao/article/details/157180010?spm=1001.2014.3001.5501