![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/01\/20260122054049-6971b861a333c.png\")
<\/p>\n<\/p>\n
![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/01\/20260122054050-6971b862b1f29.png\")
<\/p>\n
![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/01\/20260122054051-6971b863d83a9.png\")
<\/p>\n
![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/01\/20260122054053-6971b8652a455.png\")
<\/p>\n
![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/01\/20260122054054-6971b866111f3.png\")
<\/p>\n
![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/01\/20260122054055-6971b867279e5.png\")
<\/p>\n
![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/01\/20260122054056-6971b8682590f.png\")
<\/p>\n
![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/01\/20260122054056-6971b8683a416.png\")
<\/p>\n
https:\/\/chat.xutongbao.top\/nextjs\/light\/onlyOffice<\/p>\n
'use client'<\/p>\n
import { useState, useRef, useEffect } from 'react'
\nimport Header from '@\/components\/header'
\nimport {
\n ArrowLeft,
\n Upload,
\n FileText,
\n File,
\n CheckCircle2,
\n AlertCircle,
\n Loader2,
\n X,
\n FolderOpen,
\n Sparkles,
\n Copy,
\n Search,
\n BookOpen,
\n MessageSquare,
\n Wand2,
\n} from 'lucide-react'
\nimport { useRouter } from 'next\/navigation'
\nimport { Button } from '@\/components\/ui\/button'
\nimport Script from 'next\/script'
\nimport { cn } from '@\/lib\/utils'
\nimport Api from '@\/api\/h5Api'<\/p>\n
\/\/ \u58f0\u660e\u5168\u5c40 DocsAPI \u7c7b\u578b
\ndeclare global {
\n interface Window {
\n DocsAPI?: {
\n DocEditor: new (id: string, config: any) => any
\n }
\n }
\n}<\/p>\n
\/\/ OnlyOffice Editor \u5b9e\u4f8b\u7c7b\u578b
\ninterface DocEditorInstance {
\n destroyEditor: () => void
\n downloadAs: (format: string) => void
\n requestClose: () => void
\n}<\/p>\n
\/\/ \u652f\u6301\u7684\u6587\u4ef6\u683c\u5f0f
\nconst SUPPORTED_FORMATS = {
\n documents: [
\n '.doc',
\n '.docx',
\n '.docm',
\n '.dot',
\n '.dotx',
\n '.dotm',
\n '.odt',
\n '.fodt',
\n '.ott',
\n '.rtf',
\n '.txt',
\n '.html',
\n '.htm',
\n '.mht',
\n '.pdf',
\n '.djvu',
\n '.fb2',
\n '.epub',
\n '.xps',
\n ],
\n spreadsheets: [
\n '.xls',
\n '.xlsx',
\n '.xlsm',
\n '.xlt',
\n '.xltx',
\n '.xltm',
\n '.ods',
\n '.fods',
\n '.ots',
\n '.csv',
\n ],
\n presentations: [
\n '.pps',
\n '.ppsx',
\n '.ppsm',
\n '.ppt',
\n '.pptx',
\n '.pptm',
\n '.pot',
\n '.potx',
\n '.potm',
\n '.odp',
\n '.fodp',
\n '.otp',
\n ],
\n}<\/p>\n
const ALL_FORMATS = [
\n …SUPPORTED_FORMATS.documents,
\n …SUPPORTED_FORMATS.spreadsheets,
\n …SUPPORTED_FORMATS.presentations,
\n]<\/p>\n
interface UploadedFile {
\n file: File
\n name: string
\n size: number
\n type: string
\n uploadTime: number
\n previewUrl?: string
\n}<\/p>\n
\/\/ API \u54cd\u5e94\u7c7b\u578b
\ninterface ApiResponse {
\n code: number
\n data?: {
\n token?: string
\n key?: string
\n url?: string
\n }
\n}<\/p>\n
export default function OnlyOfficePage() {
\n const router = useRouter()
\n const [uploadedFile, setUploadedFile] = useState<UploadedFile | null>(null)
\n const [isUploading, setIsUploading] = useState(false)
\n const [isDragOver, setIsDragOver] = useState(false)
\n const [error, setError] = useState<string | null>(null)
\n const [isPreviewReady, setIsPreviewReady] = useState(false)
\n const [scriptLoaded, setScriptLoaded] = useState(false)
\n const [qiniuToken, setQiniuToken] = useState<string>('')
\n const [uploadProgress, setUploadProgress] = useState<number>(0)
\n const fileInputRef = useRef<HTMLInputElement>(null)
\n const editorContainerRef = useRef<HTMLDivElement>(null)
\n const docEditorRef = useRef<DocEditorInstance | null>(null)<\/p>\n
\/\/ \u9f20\u6807\u4f4d\u7f6e\u8ffd\u8e2a
\n const mousePositionRef = useRef({ x: 0, y: 0 })<\/p>\n
\/\/ \u4e0a\u4e0b\u6587\u83dc\u5355\u72b6\u6001
\n const [contextMenu, setContextMenu] = useState<{
\n visible: boolean
\n x: number
\n y: number
\n selectedText: string
\n }>({
\n visible: false,
\n x: 0,
\n y: 0,
\n selectedText: '',
\n })<\/p>\n
\/\/ \u683c\u5f0f\u5316\u6587\u4ef6\u5927\u5c0f
\n const formatBytes = (bytes: number): string => {
\n if (bytes === 0) return '0 B'
\n const k = 1024
\n const sizes = ['B', 'KB', 'MB', 'GB']
\n const i = Math.floor(Math.log(bytes) \/ Math.log(k))
\n return Math.round((bytes \/ Math.pow(k, i)) * 100) \/ 100 + ' ' + sizes[i]
\n }<\/p>\n
\/\/ \u68c0\u67e5\u6587\u4ef6\u683c\u5f0f
\n const isFileSupported = (fileName: string): boolean => {
\n const ext = '.' + fileName.split('.').pop()?.toLowerCase()
\n return ALL_FORMATS.includes(ext)
\n }<\/p>\n
\/\/ \u83b7\u53d6\u6587\u4ef6\u7c7b\u578b
\n const getFileType = (
\n fileName: string,
\n ): 'word' | 'cell' | 'slide' | 'unknown' => {
\n const ext = '.' + fileName.split('.').pop()?.toLowerCase()
\n if (SUPPORTED_FORMATS.documents.includes(ext)) return 'word'
\n if (SUPPORTED_FORMATS.spreadsheets.includes(ext)) return 'cell'
\n if (SUPPORTED_FORMATS.presentations.includes(ext)) return 'slide'
\n return 'unknown'
\n }<\/p>\n
\/\/ \u83b7\u53d6\u4e03\u725b\u4e91\u4e0a\u4f20 token
\n useEffect(() => {
\n const fetchQiniuToken = async () => {
\n try {
\n const res = (await Api.uploadGetTokenForH5(
\n {}
\n )) as unknown as ApiResponse
\n if (res.code === 200 && res.data?.token) {
\n setQiniuToken(res.data.token)
\n }
\n } catch (error) {
\n console.error('\u83b7\u53d6\u4e0a\u4f20token\u5931\u8d25:', error)
\n }
\n }
\n fetchQiniuToken()
\n }, [])<\/p>\n
\/\/ \u4e0a\u4f20\u6587\u4ef6\u5230\u4e03\u725b\u4e91
\n const uploadFileToQiniu = async (file: File): Promise<string> => {
\n if (!qiniuToken) {
\n throw new Error('\u4e0a\u4f20 token \u672a\u83b7\u53d6，\u8bf7\u7a0d\u540e\u91cd\u8bd5')
\n }<\/p>\n
const formData = new FormData()
\n const key = `ai\/onlyoffice\/${Date.now()}_${file.name}`
\n formData.append('file', file)
\n formData.append('token', qiniuToken)
\n formData.append('key', key)<\/p>\n
setUploadProgress(10)<\/p>\n
const response = await fetch('https:\/\/upload-z1.qiniup.com', {
\n method: 'POST',
\n body: formData,
\n })<\/p>\n
setUploadProgress(80)<\/p>\n
const result = await response.json()<\/p>\n
console.log('\u4e03\u725b\u4e91\u4e0a\u4f20\u54cd\u5e94:', result)<\/p>\n
\/\/ \u4e03\u725b\u4e91\u76f4\u63a5\u8fd4\u56de { key: "…", hash: "…" }
\n if (result.code === 200) {
\n const fileUrl = `https:\/\/static.xutongbao.top\/${result.data.key}`
\n setUploadProgress(100)
\n console.log('\u4e0a\u4f20\u6210\u529f，\u6587\u4ef6 URL:', fileUrl)
\n return fileUrl
\n } else {
\n throw new Error(result.error || '\u4e0a\u4f20\u5931\u8d25，\u672a\u8fd4\u56de\u6587\u4ef6\u5730\u5740')
\n }
\n }<\/p>\n
\/\/ \u5904\u7406\u6587\u4ef6\u9009\u62e9（\u6539\u4e3a\u4e0a\u4f20\u5230\u4e03\u725b\u4e91）
\n const handleFileSelect = async (file: File) => {
\n setError(null)
\n setIsPreviewReady(false)
\n setUploadProgress(0)<\/p>\n
if (!isFileSupported(file.name)) {
\n setError(
\n `\u4e0d\u652f\u6301\u7684\u6587\u4ef6\u683c\u5f0f\u3002\u652f\u6301\u7684\u683c\u5f0f\u5305\u62ec：${ALL_FORMATS.slice(0, 10).join(', ')} \u7b49`,
\n )
\n return
\n }<\/p>\n
if (!qiniuToken) {
\n setError('\u4e0a\u4f20\u670d\u52a1\u672a\u5c31\u7eea，\u8bf7\u7a0d\u540e\u91cd\u8bd5')
\n return
\n }<\/p>\n
setIsUploading(true)<\/p>\n
try {
\n \/\/ \u4e0a\u4f20\u6587\u4ef6\u5230\u4e03\u725b\u4e91
\n const fileUrl = await uploadFileToQiniu(file)<\/p>\n
const uploadedFileData: UploadedFile = {
\n file,
\n name: file.name,
\n size: file.size,
\n type: getFileType(file.name),
\n uploadTime: Date.now(),
\n previewUrl: fileUrl, \/\/ \u4f7f\u7528\u4e03\u725b\u4e91\u8fd4\u56de\u7684 URL
\n }<\/p>\n
setUploadedFile(uploadedFileData)<\/p>\n
\/\/ \u5ef6\u8fdf\u663e\u793a\u9884\u89c8\u51c6\u5907\u5c31\u7eea，useEffect \u4f1a\u81ea\u52a8\u89e6\u53d1 initOnlyOfficeEditor
\n setTimeout(() => {
\n setIsPreviewReady(true)
\n }, 500)
\n } catch (err: any) {
\n console.error('\u4e0a\u4f20\u5931\u8d25:', err)
\n setError(err.message || '\u4e0a\u4f20\u5931\u8d25，\u8bf7\u91cd\u8bd5')
\n } finally {
\n setIsUploading(false)
\n setUploadProgress(0)
\n }
\n }<\/p>\n
\/\/ \u521d\u59cb\u5316 OnlyOffice \u7f16\u8f91\u5668
\n const initOnlyOfficeEditor = (fileData: any, type?: any) => {
\n if (!editorContainerRef.current || !window.DocsAPI) {
\n console.warn('OnlyOffice API \u672a\u52a0\u8f7d\u6216\u5bb9\u5668\u672a\u51c6\u5907\u597d')
\n return
\n }<\/p>\n
\/\/ \u9500\u6bc1\u65e7\u7684\u7f16\u8f91\u5668\u5b9e\u4f8b
\n if (docEditorRef.current) {
\n try {
\n docEditorRef.current.destroyEditor()
\n docEditorRef.current = null
\n \/\/ \u6e05\u7406\u5bb9\u5668\u5185\u5bb9
\n if (editorContainerRef.current) {
\n editorContainerRef.current.innerHTML = ''
\n }
\n } catch (error) {
\n console.warn('\u9500\u6bc1\u65e7\u7f16\u8f91\u5668\u5931\u8d25:', error)
\n }
\n }<\/p>\n
\/\/ \u786e\u5b9a\u6587\u4ef6 URL \u548c\u6570\u636e
\n let url: string
\n let documentType: string
\n let fileName: string
\n let fileType: string
\n let timestamp: number<\/p>\n
\/\/ \u6d4b\u8bd5\u6309\u94ae\u4f7f\u7528\u56fa\u5b9a\u7684\u6d4b\u8bd5\u6587\u4ef6
\n if (type === '1') {
\n url = 'https:\/\/static.xutongbao.top\/ai\/onlyoffice\/1769051991957_%E6%B5%8B%E8%AF%95%E4%B8%80%E4%B8%8B.docx'
\n documentType = 'word'
\n fileName = '\u6d4b\u8bd5.docx'
\n fileType = 'docx'
\n timestamp = 1768789600204
\n } else if (type === '2') {
\n url = 'https:\/\/static.xutongbao.top\/ai\/onlyoffice\/1769053651678_1.xlsx'
\n documentType = 'cell'
\n fileName = '\u6d4b\u8bd5.xlsx'
\n fileType = 'xlsx'
\n timestamp = 1768789600204
\n } else if (type === '3') {
\n url = 'https:\/\/static.xutongbao.top\/ai\/onlyoffice\/1769053694718_1.pptx'
\n documentType = 'slide'
\n fileName = '\u6d4b\u8bd5.pptx'
\n fileType = 'pptx'
\n timestamp = 1768789600204
\n } else {
\n \/\/ \u7528\u6237\u4e0a\u4f20\u7684\u6587\u4ef6
\n url = fileData.previewUrl || ''
\n documentType = fileData.type || 'word'
\n fileName = fileData.name || '\u672a\u547d\u540d\u6587\u6863'
\n fileType = fileName.split('.').pop() || 'docx'
\n timestamp = fileData.uploadTime || Date.now()
\n }<\/p>\n
console.log('========== OnlyOffice \u521d\u59cb\u5316 ==========')
\n console.log('\u6587\u6863 URL:', url)
\n console.log('\u6587\u6863\u7c7b\u578b:', documentType)
\n console.log('\u6587\u4ef6\u540d:', fileName)
\n console.log('\u6587\u4ef6\u683c\u5f0f:', fileType)
\n console.log('\u65f6\u95f4\u6233:', timestamp)
\n console.log('=====================================')<\/p>\n
if (!url) {
\n console.error('\u6587\u6863 URL \u4e3a\u7a7a，\u65e0\u6cd5\u52a0\u8f7d')
\n setError('\u6587\u6863\u5730\u5740\u83b7\u53d6\u5931\u8d25')
\n return
\n }<\/p>\n
const config = {
\n documentType,
\n document: {
\n fileType,
\n key: `${timestamp}-${Math.random().toString(36).substring(7)}`,
\n title: fileName,
\n url,
\n },
\n editorConfig: {
\n mode: 'edit', \/\/ \u7f16\u8f91\u6a21\u5f0f
\n lang: 'zh-CN',
\n user: {
\n id: '690313ca3814f11a1fb7cbd7',
\n name: '\u5f90\u540c\u4fdd',
\n },
\n \/\/ \u542f\u7528\u6587\u672c\u9009\u4e2d\u76d1\u542c\u63d2\u4ef6
\n plugins: {
\n autostart: ['asc.008'],
\n },
\n },
\n width: '100%',
\n height: '100%',
\n events: {
\n onDocumentReady: () => {
\n console.log('OnlyOffice \u6587\u6863\u52a0\u8f7d\u5b8c\u6210')
\n },
\n onAppReady: () => {
\n console.log('OnlyOffice \u5e94\u7528\u5df2\u51c6\u5907\u5c31\u7eea')
\n },
\n },
\n }<\/p>\n
const editor = new window.DocsAPI.DocEditor('onlyoffice-editor', config)
\n docEditorRef.current = editor
\n }<\/p>\n
\/\/ \u76d1\u542c OnlyOffice API \u811a\u672c\u52a0\u8f7d\u548c DOM \u51c6\u5907\u5c31\u7eea
\n useEffect(() => {
\n if (
\n window.DocsAPI &&
\n scriptLoaded &&
\n uploadedFile &&
\n isPreviewReady &&
\n editorContainerRef.current
\n ) {
\n console.log('useEffect \u89e6\u53d1: \u6240\u6709\u6761\u4ef6\u6ee1\u8db3，\u521d\u59cb\u5316\u7f16\u8f91\u5668')
\n initOnlyOfficeEditor(uploadedFile)
\n }
\n }, [scriptLoaded, uploadedFile, isPreviewReady])<\/p>\n
\/\/ \u76d1\u542c\u9f20\u6807\u79fb\u52a8，\u8ffd\u8e2a\u9f20\u6807\u5750\u6807
\n useEffect(() => {
\n const handleMouseMove = (e: MouseEvent) => {
\n mousePositionRef.current = { x: e.clientX, y: e.clientY }
\n }<\/p>\n
window.addEventListener('mousemove', handleMouseMove)
\n return () => {
\n window.removeEventListener('mousemove', handleMouseMove)
\n }
\n }, [])<\/p>\n
\/\/ \u76d1\u542c\u6765\u81ea OnlyOffice \u7684\u6d88\u606f
\n useEffect(() => {
\n const handleMessage = (event: MessageEvent) => {
\n \/\/ \u76d1\u542c\u6765\u81ea OnlyOffice iframe \u7684\u6d88\u606f
\n if (event.data && typeof event.data === 'object') {
\n \/\/ \u6dfb\u52a0\u5230\u5bf9\u8bdd\u6d88\u606f
\n if (event.data.type === 'ADD_TO_CHAT') {
\n console.log('\u2713 \u6536\u5230\u6dfb\u52a0\u5230\u5bf9\u8bdd\u8bf7\u6c42:', event.data.text)
\n \/\/ \u8fd9\u91cc\u53ef\u4ee5\u8c03\u7528\u4f60\u7684\u5bf9\u8bdd\u529f\u80fd
\n alert(`\u6dfb\u52a0\u5230\u5bf9\u8bdd:\\\\n${event.data.text}`)
\n }<\/p>\n
\/\/ \u7ffb\u8bd1\u6d88\u606f
\n if (event.data.type === 'TRANSLATE_TEXT') {
\n console.log('\u2713 \u6536\u5230\u7ffb\u8bd1\u8bf7\u6c42:', event.data.text)
\n \/\/ \u8fd9\u91cc\u53ef\u4ee5\u8c03\u7528\u4f60\u7684\u7ffb\u8bd1\u529f\u80fd
\n alert(`\u7ffb\u8bd1\u6587\u672c:\\\\n${event.data.text}`)
\n }<\/p>\n
\/\/ \u6587\u672c\u9009\u4e2d\u6d88\u606f – \u4f7f\u7528\u7236\u9875\u9762\u6355\u83b7\u7684\u9f20\u6807\u5750\u6807
\n if (event.data.type === 'TEXT_SELECTED') {
\n const mousePos = mousePositionRef.current
\n const selectedText = event.data.text<\/p>\n
console.log('\u2713 \u6536\u5230\u6587\u672c\u9009\u4e2d\u4e8b\u4ef6:', {
\n text: selectedText,
\n mousePosition: mousePos,
\n timestamp: event.data.timestamp,
\n })<\/p>\n
\/\/ \u4fdd\u5b58\u9009\u4e2d\u7684\u6587\u672c\u5230 state \u5e76\u663e\u793a\u60ac\u6d6e\u83dc\u5355（\u56fa\u5b9a\u5230\u5c4f\u5e55\u4e2d\u5fc3）
\n setContextMenu({
\n visible: true,
\n x: 0, \/\/ \u4e0d\u518d\u4f7f\u7528\u9f20\u6807\u5750\u6807
\n y: 0,
\n selectedText: selectedText,
\n })<\/p>\n
console.log('\u9009\u4e2d\u6587\u672c\u5df2\u4fdd\u5b58\u5230 state:', selectedText)
\n console.log('\u60ac\u6d6e\u83dc\u5355\u663e\u793a\u5728\u5750\u6807:', mousePos)
\n }<\/p>\n
\/\/ \u9690\u85cf\u6587\u672c\u9009\u4e2d\u83dc\u5355\u6d88\u606f
\n if (event.data.type === 'HIDE_TEXT_SELECTED') {
\n console.log('\u2713 \u6536\u5230\u9690\u85cf\u83dc\u5355\u4e8b\u4ef6:', {
\n timestamp: event.data.timestamp,
\n })<\/p>\n
setContextMenu({
\n visible: false,
\n x: 0,
\n y: 0,
\n selectedText: '',
\n })<\/p>\n
console.log('\u60ac\u6d6e\u83dc\u5355\u5df2\u9690\u85cf')
\n }
\n }
\n }<\/p>\n
window.addEventListener('message', handleMessage)
\n return () => {
\n window.removeEventListener('message', handleMessage)
\n }
\n }, [])<\/p>\n
\/\/ \u76d1\u542c\u5168\u5c40\u70b9\u51fb\u4e8b\u4ef6，\u70b9\u51fb\u83dc\u5355\u5916\u90e8\u65f6\u9690\u85cf\u83dc\u5355
\n useEffect(() => {
\n if (!contextMenu.visible) return<\/p>\n
const handleClickOutside = (e: MouseEvent) => {
\n const target = e.target as HTMLElement
\n \/\/ \u68c0\u67e5\u70b9\u51fb\u7684\u5143\u7d20\u662f\u5426\u5728\u83dc\u5355\u5185\u90e8
\n const menuElement = document.getElementById('context-menu')
\n if (menuElement && !menuElement.contains(target)) {
\n setContextMenu((prev) => ({ …prev, visible: false }))
\n }
\n }<\/p>\n
\/\/ \u5ef6\u8fdf\u6dfb\u52a0\u4e8b\u4ef6\u76d1\u542c，\u907f\u514d\u83dc\u5355\u521a\u663e\u793a\u5c31\u88ab\u5173\u95ed
\n const timer = setTimeout(() => {
\n document.addEventListener('click', handleClickOutside)
\n }, 100)<\/p>\n
return () => {
\n clearTimeout(timer)
\n document.removeEventListener('click', handleClickOutside)
\n }
\n }, [contextMenu.visible])<\/p>\n
\/\/ \u6dfb\u52a0\u5230\u5bf9\u8bdd
\n const handleAddToChat = () => {
\n console.log('\u6dfb\u52a0\u5230\u5bf9\u8bdd – \u9009\u4e2d\u7684\u6587\u672c:', contextMenu.selectedText)
\n setContextMenu((prev) => ({ …prev, visible: false }))
\n }<\/p>\n
\/\/ \u7ffb\u8bd1
\n const handleTranslateText = () => {
\n console.log('\u7ffb\u8bd1 – \u9009\u4e2d\u7684\u6587\u672c:', contextMenu.selectedText)
\n setContextMenu((prev) => ({ …prev, visible: false }))
\n }<\/p>\n
const handleTest = (type: any) => {
\n setError(null)<\/p>\n
\/\/ \u5148\u9500\u6bc1\u65e7\u7684\u7f16\u8f91\u5668
\n if (docEditorRef.current) {
\n try {
\n docEditorRef.current.destroyEditor()
\n docEditorRef.current = null
\n } catch (error) {
\n console.warn('\u9500\u6bc1\u65e7\u7f16\u8f91\u5668\u5931\u8d25:', error)
\n }
\n }<\/p>\n
\/\/ \u91cd\u7f6e\u72b6\u6001
\n setIsPreviewReady(false)
\n setIsUploading(false)
\n setUploadedFile(null)<\/p>\n
\/\/ \u6839\u636e\u6d4b\u8bd5\u7c7b\u578b\u8bbe\u7f6e\u5b8c\u6574\u7684\u6587\u4ef6\u4fe1\u606f
\n let testFileData: UploadedFile
\n if (type === '1') {
\n testFileData = {
\n file: {} as File, \/\/ \u6d4b\u8bd5\u6587\u4ef6\u4e0d\u9700\u8981\u5b9e\u9645 File \u5bf9\u8c61
\n name: '\u6d4b\u8bd5\u6587\u6863.docx',
\n size: 245760, \/\/ 240 KB
\n type: 'word',
\n uploadTime: Date.now(),
\n previewUrl:
\n 'https:\/\/static.xutongbao.top\/ai\/onlyoffice\/1769051991957_%E6%B5%8B%E8%AF%95%E4%B8%80%E4%B8%8B.docx',
\n }
\n } else if (type === '2') {
\n testFileData = {
\n file: {} as File,
\n name: '\u6d4b\u8bd5\u8868\u683c.xlsx',
\n size: 102400, \/\/ 100 KB
\n type: 'cell',
\n uploadTime: Date.now(),
\n previewUrl:
\n 'https:\/\/static.xutongbao.top\/ai\/onlyoffice\/1769053651678_1.xlsx',
\n }
\n } else if (type === '3') {
\n testFileData = {
\n file: {} as File,
\n name: '\u6d4b\u8bd5\u6f14\u793a\u6587\u7a3f.pptx',
\n size: 512000, \/\/ 500 KB
\n type: 'slide',
\n uploadTime: Date.now(),
\n previewUrl:
\n 'https:\/\/static.xutongbao.top\/ai\/onlyoffice\/1769053694718_1.pptx',
\n }
\n } else if (type === '4') {
\n testFileData = {
\n file: {} as File,
\n name: '\u6d4b\u8bd5\u6587\u6863.pdf',
\n size: 1024000, \/\/ 1 MB
\n type: 'word', \/\/ PDF \u4f7f\u7528 word \u7c7b\u578b
\n uploadTime: Date.now(),
\n previewUrl:
\n 'https:\/\/static.xutongbao.top\/ai\/onlyoffice\/1769054138134_%E6%B5%8B%E8%AF%95%E4%B8%80%E4%B8%8B.pdf',
\n }
\n } else {
\n return
\n }<\/p>\n
\/\/ \u5ef6\u8fdf\u8bbe\u7f6e\u65b0\u6587\u4ef6，\u786e\u4fdd DOM \u5b8c\u5168\u6e05\u7406
\n setTimeout(() => {
\n setUploadedFile(testFileData)
\n setTimeout(() => {
\n setIsPreviewReady(true)
\n }, 100)
\n }, 100)
\n }<\/p>\n
\/\/ \u62d6\u62fd\u4e8b\u4ef6\u5904\u7406
\n const handleDragOver = (e: React.DragEvent) => {
\n e.preventDefault()
\n setIsDragOver(true)
\n }<\/p>\n
const handleDragLeave = () => {
\n setIsDragOver(false)
\n }<\/p>\n
const handleDrop = (e: React.DragEvent) => {
\n e.preventDefault()
\n setIsDragOver(false)<\/p>\n
const file = e.dataTransfer.files[0]
\n if (file) {
\n handleFileSelect(file)
\n }
\n }<\/p>\n
\/\/ \u6e05\u9664\u6587\u4ef6
\n const handleClearFile = () => {
\n setUploadedFile(null)
\n setIsPreviewReady(false)
\n setError(null)
\n if (fileInputRef.current) {
\n fileInputRef.current.value = ''
\n }
\n }<\/p>\n
return (
\n <>
\n {\/* \u52a0\u8f7d OnlyOffice API \u811a\u672c *\/}
\n <Script
\n src='https:\/\/chat.xutongbao.top\/onlyoffice\/web-apps\/apps\/api\/documents\/api.js'
\n \/\/ src='http:\/\/20.51.117.204\/web-apps\/apps\/api\/documents\/api.js'
\n strategy='afterInteractive'
\n onLoad={() => {
\n console.log('OnlyOffice API \u52a0\u8f7d\u5b8c\u6210')
\n setScriptLoaded(true)
\n }}
\n onError={(e) => {
\n console.error('OnlyOffice API \u52a0\u8f7d\u5931\u8d25:', e)
\n setError('OnlyOffice API \u52a0\u8f7d\u5931\u8d25，\u8bf7\u68c0\u67e5\u7f51\u7edc\u8fde\u63a5\u6216\u670d\u52a1\u5668\u914d\u7f6e')
\n }}
\n \/><\/p>\n
<Header \/><\/p>\n
<main className='m-only-office min-h-screen bg-gradient-to-br from-primary\/5 via-background to-secondary\/5 relative overflow-hidden'>
\n {\/* \u80cc\u666f\u88c5\u9970 *\/}
\n <div className='absolute inset-0 overflow-hidden pointer-events-none'>
\n <div className='absolute top-20 left-1\/4 w-96 h-96 bg-primary\/5 rounded-full blur-3xl animate-pulse-slow' \/>
\n <div
\n className='absolute bottom-20 right-1\/4 w-96 h-96 bg-secondary\/5 rounded-full blur-3xl animate-pulse-slow'
\n style={{ animationDelay: '2s' }}
\n \/>
\n <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' \/>
\n <\/div><\/p>\n
{\/* \u5185\u5bb9\u533a\u57df *\/}
\n <div className='relative max-w-7xl mx-auto px-4 py-8'>
\n {\/* \u8fd4\u56de\u6309\u94ae *\/}
\n <button
\n onClick={() => router.push('\/light')}
\n 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'
\n >
\n <div className='relative'>
\n <div className='absolute inset-0 bg-primary\/20 rounded-full blur-md scale-0 group-hover:scale-150 transition-transform duration-500' \/>
\n <ArrowLeft className='relative w-5 h-5 text-primary group-hover:text-primary transition-all duration-300 group-hover:-translate-x-1' \/>
\n <\/div>
\n <span className='text-sm font-medium text-foreground group-hover:text-primary transition-colors duration-300'>
\n \u8fd4\u56de
\n <\/span>
\n <\/button><\/p>\n
{\/* \u4e3b\u6807\u9898\u5361\u7247 *\/}
\n <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'>
\n <div className='flex items-center gap-4 mb-3'>
\n <div className='relative'>
\n <div className='absolute inset-0 bg-primary\/20 rounded-2xl blur-xl animate-pulse-slow' \/>
\n <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'>
\n <FileText className='w-8 h-8 text-primary-foreground' \/>
\n <\/div>
\n <\/div>
\n <div className='flex-1'>
\n <h1 className='text-3xl md:text-4xl font-bold bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent'>
\n OnlyOffice \u6587\u6863\u9884\u89c8
\n <\/h1>
\n <p className='text-sm text-muted-foreground mt-1'>
\n \u652f\u6301 Word\u3001Excel\u3001PowerPoint \u7b49\u591a\u79cd\u683c\u5f0f\u7684\u6587\u6863\u5728\u7ebf\u9884\u89c8
\n <\/p>
\n <\/div>
\n <\/div><\/p>\n
{\/* \u652f\u6301\u683c\u5f0f\u8bf4\u660e *\/}
\n <div className='mt-4 p-4 rounded-xl bg-muted\/30 border border-border\/50'>
\n <div className='flex items-center gap-2 mb-2'>
\n <Sparkles className='w-4 h-4 text-primary' \/>
\n <span className='text-sm font-semibold text-foreground'>
\n \u652f\u6301\u7684\u6587\u4ef6\u683c\u5f0f
\n <\/span>
\n <\/div>
\n <div className='grid grid-cols-1 md:grid-cols-3 gap-2 text-xs text-muted-foreground'>
\n <div>
\n <span className='font-medium text-foreground'>\u6587\u6863：<\/span>
\n DOC, DOCX, ODT, RTF, TXT, PDF \u7b49
\n <\/div>
\n <div>
\n <span className='font-medium text-foreground'>\u8868\u683c：<\/span>
\n XLS, XLSX, ODS, CSV \u7b49
\n <\/div>
\n <div>
\n <span className='font-medium text-foreground'>\u6f14\u793a：<\/span>
\n PPT, PPTX, ODP \u7b49
\n <\/div>
\n <\/div>
\n <\/div>
\n <\/div><\/p>\n
{\/* \u6d4b\u8bd5\u6309\u94ae\u7ec4 *\/}
\n <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'>
\n <div className='flex items-center gap-2 mb-4'>
\n <Sparkles className='w-5 h-5 text-primary' \/>
\n <h2 className='text-lg font-semibold text-foreground'>
\n \u5feb\u901f\u6d4b\u8bd5
\n <\/h2>
\n <\/div>
\n <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4'>
\n {\/* Word \u6d4b\u8bd5\u6309\u94ae *\/}
\n <button
\n onClick={() => handleTest('1')}
\n 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'
\n >
\n <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' \/>
\n <div className='relative flex flex-col items-center gap-3'>
\n <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'>
\n <FileText className='w-6 h-6 text-white' \/>
\n <\/div>
\n <div>
\n <div className='text-sm font-semibold text-foreground group-hover:text-blue-600 transition-colors duration-300'>
\n \u6d4b\u8bd5 Word
\n <\/div>
\n <div className='text-xs text-muted-foreground mt-1'>
\n \u6587\u6863\u7f16\u8f91\u5668
\n <\/div>
\n <\/div>
\n <\/div>
\n <\/button><\/p>\n
{\/* Excel \u6d4b\u8bd5\u6309\u94ae *\/}
\n <button
\n onClick={() => handleTest('2')}
\n 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'
\n >
\n <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' \/>
\n <div className='relative flex flex-col items-center gap-3'>
\n <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'>
\n <File className='w-6 h-6 text-white' \/>
\n <\/div>
\n <div>
\n <div className='text-sm font-semibold text-foreground group-hover:text-green-600 transition-colors duration-300'>
\n \u6d4b\u8bd5 Excel
\n <\/div>
\n <div className='text-xs text-muted-foreground mt-1'>
\n \u8868\u683c\u7f16\u8f91\u5668
\n <\/div>
\n <\/div>
\n <\/div>
\n <\/button><\/p>\n
{\/* PowerPoint \u6d4b\u8bd5\u6309\u94ae *\/}
\n <button
\n onClick={() => handleTest('3')}
\n 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'
\n >
\n <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' \/>
\n <div className='relative flex flex-col items-center gap-3'>
\n <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'>
\n <FileText className='w-6 h-6 text-white' \/>
\n <\/div>
\n <div>
\n <div className='text-sm font-semibold text-foreground group-hover:text-orange-600 transition-colors duration-300'>
\n \u6d4b\u8bd5 PowerPoint
\n <\/div>
\n <div className='text-xs text-muted-foreground mt-1'>
\n \u6f14\u793a\u6587\u7a3f\u7f16\u8f91\u5668
\n <\/div>
\n <\/div>
\n <\/div>
\n <\/button><\/p>\n
{\/* PDF \u6d4b\u8bd5\u6309\u94ae *\/}
\n <button
\n onClick={() => handleTest('4')}
\n 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'
\n >
\n <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' \/>
\n <div className='relative flex flex-col items-center gap-3'>
\n <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'>
\n <FileText className='w-6 h-6 text-white' \/>
\n <\/div>
\n <div>
\n <div className='text-sm font-semibold text-foreground group-hover:text-red-600 transition-colors duration-300'>
\n \u6d4b\u8bd5 PDF
\n <\/div>
\n <div className='text-xs text-muted-foreground mt-1'>
\n PDF \u9605\u8bfb\u5668
\n <\/div>
\n <\/div>
\n <\/div>
\n <\/button>
\n <\/div>
\n <\/div><\/p>\n
{\/* \u4e0a\u4f20\u533a\u57df\u6216\u6587\u4ef6\u9884\u89c8 *\/}
\n {!uploadedFile ? (
\n <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'>
\n <div
\n className={`
\n border-2 border-dashed rounded-2xl p-16 text-center cursor-pointer
\n transition-all duration-300 relative overflow-hidden
\n ${
\n isDragOver
\n ? 'border-primary bg-primary\/10 scale-[1.02]'
\n : 'border-border hover:border-primary\/50 hover:bg-muted\/30'
\n }
\n `}
\n onClick={() => fileInputRef.current?.click()}
\n onDragOver={handleDragOver}
\n onDragLeave={handleDragLeave}
\n onDrop={handleDrop}
\n >
\n {\/* \u88c5\u9970\u6027\u80cc\u666f *\/}
\n <div className='absolute inset-0 overflow-hidden pointer-events-none'>
\n <div className='absolute top-0 left-1\/4 w-32 h-32 bg-primary\/5 rounded-full blur-2xl animate-float' \/>
\n <div
\n className='absolute bottom-0 right-1\/4 w-32 h-32 bg-secondary\/5 rounded-full blur-2xl animate-float'
\n style={{ animationDelay: '1s' }}
\n \/>
\n <\/div><\/p>\n
<div className='relative flex flex-col items-center gap-6'>
\n <div
\n className={`
\n w-24 h-24 rounded-full flex items-center justify-center
\n transition-all duration-500
\n ${
\n isDragOver
\n ? 'bg-primary scale-110 shadow-2xl shadow-primary\/50'
\n : 'bg-gradient-to-br from-primary\/20 to-secondary\/20 shadow-lg'
\n }
\n `}
\n >
\n {isUploading ? (
\n <Loader2 className='w-12 h-12 text-primary animate-spin' \/>
\n ) : (
\n <Upload
\n className={`w-12 h-12 transition-all duration-300 ${
\n isDragOver ? 'text-white scale-110' : 'text-primary'
\n }`}
\n \/>
\n )}
\n <\/div><\/p>\n
<div>
\n <div className='text-2xl font-bold text-foreground mb-2'>
\n {isUploading
\n ? '\u4e0a\u4f20\u4e2d…'
\n : isDragOver
\n ? '\u677e\u5f00\u4ee5\u4e0a\u4f20\u6587\u4ef6'
\n : '\u70b9\u51fb\u6216\u62d6\u62fd\u6587\u4ef6\u5230\u6b64\u5904'}
\n <\/div>
\n <div className='text-sm text-muted-foreground mb-4'>
\n \u652f\u6301 Word\u3001Excel\u3001PowerPoint\u3001PDF \u7b49\u591a\u79cd\u683c\u5f0f
\n <\/div><\/p>\n
{\/* \u4e0a\u4f20\u8fdb\u5ea6\u6761 *\/}
\n {isUploading && uploadProgress > 0 && (
\n <div className='w-64 mx-auto mb-4'>
\n <div className='flex items-center justify-between text-xs text-muted-foreground mb-1'>
\n <span>\u4e0a\u4f20\u8fdb\u5ea6<\/span>
\n <span>{uploadProgress}%<\/span>
\n <\/div>
\n <div className='w-full h-2 bg-muted rounded-full overflow-hidden'>
\n <div
\n className='h-full bg-gradient-to-r from-primary to-secondary transition-all duration-300'
\n style={{ width: `${uploadProgress}%` }}
\n \/>
\n <\/div>
\n <\/div>
\n )}<\/p>\n
<div className='inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary\/10 border border-primary\/20'>
\n <FolderOpen className='w-4 h-4 text-primary' \/>
\n <span className='text-xs font-medium text-primary'>
\n \u5355\u4e2a\u6587\u4ef6，\u6700\u5927\u652f\u6301 100MB
\n <\/span>
\n <\/div>
\n <\/div>
\n <\/div>
\n <\/div><\/p>\n
<input
\n ref={fileInputRef}
\n type='file'
\n accept={ALL_FORMATS.join(',')}
\n className='hidden'
\n onChange={(e) => {
\n const file = e.target.files?.[0]
\n if (file) handleFileSelect(file)
\n }}
\n \/><\/p>\n
{\/* \u9519\u8bef\u63d0\u793a *\/}
\n {error && (
\n <div className='mt-6 p-4 rounded-xl bg-destructive\/10 border-2 border-destructive\/30 flex items-start gap-3 animate-shake'>
\n <AlertCircle className='w-5 h-5 text-destructive mt-0.5 flex-shrink-0' \/>
\n <div className='flex-1'>
\n <div className='font-semibold text-destructive mb-1'>
\n \u4e0a\u4f20\u5931\u8d25
\n <\/div>
\n <div className='text-sm text-destructive\/80'>{error}<\/div>
\n <\/div>
\n <\/div>
\n )}
\n <\/div>
\n ) : (
\n <>
\n {\/* \u6587\u4ef6\u4fe1\u606f\u5361\u7247 *\/}
\n <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'>
\n <div className='flex items-center justify-between'>
\n <div className='flex items-center gap-4 flex-1'>
\n <div className='relative'>
\n <div className='absolute inset-0 bg-green-500\/20 rounded-xl blur-lg animate-pulse-slow' \/>
\n <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'>
\n <File className='w-6 h-6 text-white' \/>
\n <\/div>
\n <\/div>
\n <div className='flex-1 min-w-0'>
\n <div className='flex items-center gap-2 mb-1'>
\n <h3 className='text-lg font-semibold text-foreground truncate'>
\n {uploadedFile.name}
\n <\/h3>
\n {isPreviewReady && (
\n <div className='flex items-center gap-1 px-2 py-1 rounded-full bg-green-500\/10 border border-green-500\/30'>
\n <CheckCircle2 className='w-3 h-3 text-green-500' \/>
\n <span className='text-xs font-medium text-green-500'>
\n \u9884\u89c8\u5c31\u7eea
\n <\/span>
\n <\/div>
\n )}
\n <\/div>
\n <div className='flex items-center gap-3 text-xs text-muted-foreground'>
\n <span>{formatBytes(uploadedFile.size)}<\/span>
\n <span>\u2022<\/span>
\n <span className='capitalize'>
\n {uploadedFile.type} \u6587\u6863
\n <\/span>
\n <span>\u2022<\/span>
\n <span>
\n {new Date(
\n uploadedFile.uploadTime,
\n ).toLocaleTimeString()}
\n <\/span>
\n <\/div>
\n {\/* \u663e\u793a\u6587\u4ef6 URL *\/}
\n {uploadedFile.previewUrl && (
\n <div className='mt-2 flex items-center gap-2'>
\n <span className='text-xs text-muted-foreground'>\u6587\u4ef6\u5730\u5740:<\/span>
\n <a
\n href={uploadedFile.previewUrl}
\n target='_blank'
\n rel='noopener noreferrer'
\n className='text-xs text-primary hover:underline truncate max-w-md'
\n >
\n {uploadedFile.previewUrl}
\n <\/a>
\n <\/div>
\n )}
\n <\/div>
\n <\/div><\/p>\n
<Button
\n onClick={handleClearFile}
\n variant='outline'
\n size='sm'
\n className='rounded-xl border-2 hover:border-destructive hover:bg-destructive\/5 hover:text-destructive transition-all duration-300'
\n >
\n <X className='w-4 h-4 mr-1' \/>
\n \u5173\u95ed
\n <\/Button>
\n <\/div>
\n <\/div><\/p>\n
{\/* \u9884\u89c8\u533a\u57df *\/}
\n <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'>
\n {!isPreviewReady ? (
\n <div className='w-full h-[calc(100vh-300px)] min-h-[700px] flex flex-col items-center justify-center gap-4 bg-muted\/20'>
\n <Loader2 className='w-12 h-12 text-primary animate-spin' \/>
\n <div className='text-lg font-semibold text-foreground'>
\n \u6b63\u5728\u52a0\u8f7d\u9884\u89c8…
\n <\/div>
\n <div className='text-sm text-muted-foreground'>
\n \u8bf7\u7a0d\u5019\u7247\u523b
\n <\/div>
\n <\/div>
\n ) : (
\n <div className='relative'>
\n <div
\n ref={editorContainerRef}
\n id='onlyoffice-editor'
\n className='w-full h-[calc(100vh-300px)] min-h-[700px] bg-white'
\n >
\n {\/* OnlyOffice \u7f16\u8f91\u5668\u5c06\u5728\u8fd9\u91cc\u52a0\u8f7d *\/}
\n <\/div>
\n <\/div>
\n )}
\n <\/div>
\n <\/>
\n )}
\n <\/div>
\n <\/main><\/p>\n
{\/* \u4e0a\u4e0b\u6587\u83dc\u5355 *\/}
\n {contextMenu.visible && (
\n <div
\n id='context-menu'
\n className='fixed z-50'
\n style={{
\n left: '50%',
\n top: '50%',
\n transform: 'translate(-50%, -50%)',
\n }}
\n >
\n <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'>
\n <div className='flex items-center gap-2'>
\n {\/* \u6dfb\u52a0\u5230\u5bf9\u8bdd\u6309\u94ae *\/}
\n <button
\n onClick={handleAddToChat}
\n className='group relative px-4 py-2.5 rounded-lg hover:bg-primary\/10 transition-all duration-200 flex items-center gap-2'
\n title='\u6dfb\u52a0\u5230\u5bf9\u8bdd'
\n >
\n <div className='absolute inset-0 bg-primary\/20 rounded-lg blur-md scale-0 group-hover:scale-100 transition-transform duration-300' \/>
\n <MessageSquare className='relative w-4 h-4 text-foreground group-hover:text-primary transition-colors duration-200' \/>
\n <span className='relative text-sm text-foreground group-hover:text-primary transition-colors duration-200'>
\n \u6dfb\u52a0\u5230\u5bf9\u8bdd
\n <\/span>
\n <\/button><\/p>\n
{\/* \u7ffb\u8bd1\u6309\u94ae *\/}
\n <button
\n onClick={handleTranslateText}
\n className='group relative px-4 py-2.5 rounded-lg hover:bg-primary\/10 transition-all duration-200 flex items-center gap-2'
\n title='\u7ffb\u8bd1'
\n >
\n <div className='absolute inset-0 bg-primary\/20 rounded-lg blur-md scale-0 group-hover:scale-100 transition-transform duration-300' \/>
\n <BookOpen className='relative w-4 h-4 text-foreground group-hover:text-primary transition-colors duration-200' \/>
\n <span className='relative text-sm text-foreground group-hover:text-primary transition-colors duration-200'>
\n \u7ffb\u8bd1
\n <\/span>
\n <\/button>
\n <\/div>
\n <\/div>
\n <\/div>
\n )}<\/p>\n
{\/* \u81ea\u5b9a\u4e49\u52a8\u753b\u6837\u5f0f *\/}
\n <style jsx global>{`
\n @keyframes pulse-slow {
\n 0%,
\n 100% {
\n opacity: 0.3;
\n transform: scale(1);
\n }
\n 50% {
\n opacity: 0.6;
\n transform: scale(1.05);
\n }
\n }<\/p>\n
@keyframes spin-slow {
\n from {
\n transform: translate(-50%, -50%) rotate(0deg);
\n }
\n to {
\n transform: translate(-50%, -50%) rotate(360deg);
\n }
\n }<\/p>\n
@keyframes fade-in {
\n from {
\n opacity: 0;
\n transform: translateY(10px);
\n }
\n to {
\n opacity: 1;
\n transform: translateY(0);
\n }
\n }<\/p>\n
@keyframes fade-in-up {
\n from {
\n opacity: 0;
\n transform: translateY(20px);
\n }
\n to {
\n opacity: 1;
\n transform: translateY(0);
\n }
\n }<\/p>\n
@keyframes float {
\n 0%,
\n 100% {
\n transform: translateY(0px);
\n }
\n 50% {
\n transform: translateY(-20px);
\n }
\n }<\/p>\n
@keyframes shake {
\n 0%,
\n 100% {
\n transform: translateX(0);
\n }
\n 10%,
\n 30%,
\n 50%,
\n 70%,
\n 90% {
\n transform: translateX(-2px);
\n }
\n 20%,
\n 40%,
\n 60%,
\n 80% {
\n transform: translateX(2px);
\n }
\n }<\/p>\n
.animate-pulse-slow {
\n animation: pulse-slow 4s ease-in-out infinite;
\n }<\/p>\n
.animate-spin-slow {
\n animation: spin-slow 20s linear infinite;
\n }<\/p>\n
.animate-fade-in {
\n animation: fade-in 0.5s ease-out forwards;
\n }<\/p>\n
.animate-fade-in-up {
\n animation: fade-in-up 0.6s ease-out forwards;
\n }<\/p>\n
.animate-float {
\n animation: float 3s ease-in-out infinite;
\n }<\/p>\n
.animate-shake {
\n animation: shake 0.5s ease-in-out;
\n }<\/p>\n
\/* OnlyOffice \u7f16\u8f91\u5668 iframe \u6837\u5f0f *\/
\n .m-only-office iframe {
\n width: 100% !important;
\n height: 100% !important;
\n min-height: 700px !important;
\n border: none !important;
\n }
\n `}<\/style>
\n <\/>
\n )
\n}<\/p>\n
nginx\u914d\u7f6e<\/p>\n
# OnlyOffice cache \u8def\u5f84\u4ee3\u7406
\n location \/cache\/ {
\n # \u8bbe\u7f6e\u5141\u8bb8\u8de8\u57df
\n add_header 'Access-Control-Allow-Origin' '*' always;
\n add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
\n add_header 'Access-Control-Allow-Headers' 'User-Agent,Keep-Alive,Content-Type,Authorization' always;
\n add_header 'Access-Control-Max-Age' 1728000 always;<\/p>\n
proxy_set_header X-Real-IP $remote_addr;
\n proxy_set_header REMOTE-HOST $remote_addr;
\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
\n proxy_set_header X-NginX-Proxy true;
\n proxy_set_header Host $host;<\/p>\n
# \u5173\u952e：\u544a\u8bc9\u540e\u7aef\u670d\u52a1\u8fd9\u662f HTTPS \u8bf7\u6c42
\n proxy_set_header X-Forwarded-Proto https;
\n proxy_set_header X-Forwarded-Ssl on;<\/p>\n
# \u7981\u7528 gzip \u538b\u7f29
\n proxy_set_header Accept-Encoding "";<\/p>\n
proxy_http_version 1.1;
\n proxy_set_header Connection "";<\/p>\n
# \u5bf9\u4e8e\u4e8c\u8fdb\u5236\u6587\u4ef6，\u5173\u95ed\u7f13\u51b2\u53ef\u80fd\u66f4\u597d
\n proxy_buffering off;
\n proxy_cache off;
\n proxy_request_buffering off;<\/p>\n
# \u4ee3\u7406\u5230 OnlyOffice \u670d\u52a1\u5668
\n proxy_pass http:\/\/20.51.117.204\/cache\/;<\/p>\n
# \u589e\u52a0\u8d85\u65f6\u65f6\u95f4
\n proxy_connect_timeout 300s;
\n proxy_send_timeout 300s;
\n proxy_read_timeout 300s;<\/p>\n
# \u7f13\u51b2\u533a\u8bbe\u7f6e（\u5373\u4f7f\u5173\u95ed buffering，\u4e5f\u4fdd\u7559\u8fd9\u4e9b\u8bbe\u7f6e）
\n proxy_buffer_size 128k;
\n proxy_buffers 8 128k;
\n proxy_busy_buffers_size 256k;
\n }<\/p>\n
# OnlyOffice \u4ee3\u7406\u914d\u7f6e
\n location \/onlyoffice\/ {
\n # \u8bbe\u7f6e\u5141\u8bb8\u8de8\u57df
\n add_header 'Access-Control-Allow-Origin' '*' always;
\n add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
\n add_header 'Access-Control-Allow-Headers' 'User-Agent,Keep-Alive,Content-Type,Authorization' always;
\n add_header 'Access-Control-Max-Age' 1728000 always;<\/p>\n
proxy_set_header X-Real-IP $remote_addr;
\n proxy_set_header REMOTE-HOST $remote_addr;
\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
\n proxy_set_header X-NginX-Proxy true;
\n proxy_set_header Host $host;
\n # \u4f7f\u7528\u4ee3\u7406\u76ee\u6807\u7684 Host，\u800c\u4e0d\u662f\u5ba2\u6237\u7aef\u8bf7\u6c42\u7684 Host
\n # proxy_set_header Host 20.51.117.204;<\/p>\n
# \u5173\u952e：\u544a\u8bc9\u540e\u7aef\u670d\u52a1\u8fd9\u662f HTTPS \u8bf7\u6c42
\n proxy_set_header X-Forwarded-Proto https;
\n proxy_set_header X-Forwarded-Ssl on;<\/p>\n
proxy_http_version 1.1;
\n proxy_set_header Upgrade $http_upgrade;
\n proxy_set_header Connection "upgrade";<\/p>\n
# \u5c06\u54cd\u5e94\u4e2d\u7684 HTTP \u94fe\u63a5\u66ff\u6362\u4e3a HTTPS
\n sub_filter 'http:\/\/chat.xutongbao.top' 'https:\/\/chat.xutongbao.top';
\n sub_filter 'http:\/\/${host}' 'https:\/\/${host}';
\n sub_filter_once off;
\n sub_filter_types *;<\/p>\n
chunked_transfer_encoding off;
\n # \u6ce8\u610f：\u4f7f\u7528 sub_filter \u9700\u8981\u5f00\u542f buffering
\n proxy_buffering on;
\n proxy_cache off;<\/p>\n
# \u4ee3\u7406\u5230 OnlyOffice \u670d\u52a1\u5668
\n proxy_pass http:\/\/20.51.117.204\/;<\/p>\n
# \u589e\u52a0\u8d85\u65f6\u65f6\u95f4
\n proxy_connect_timeout 300s;
\n proxy_send_timeout 300s;
\n proxy_read_timeout 300s;<\/p>\n
# \u7f13\u51b2\u533a\u8bbe\u7f6e
\n proxy_buffer_size 16k;
\n proxy_buffers 4 64k;
\n proxy_busy_buffers_size 128k;
\n }<\/p>\n
# \u539f\u6709\u9879\u76ee\u6839\u76ee\u5f55 (hash \u6a21\u5f0f)
\n location \/ {
\n root \/temp\/yuying;
\n index index.html index.htm;
\n add_header Content-Security-Policy upgrade-insecure-requests;
\n } <\/p>\n<\/p>\n
https:\/\/blog.csdn.net\/xutongbao\/article\/details\/157180010?spm=1001.2014.3001.5501<\/p><\/p>\n","protected":false},"excerpt":{"rendered":"
\u5728\u7ebf\u5730\u5740
\nhttps:\/\/chat.xutongbao.top\/nextjs\/light\/onlyOffice
\npage.tsx
\nuse clientimport { useState, useRef, useEffect } from react
\nimport Header from \/components\/header
\nimport {ArrowLeft,Upload,FileText,File,CheckCircle2,AlertCircle,Loader2,X,<\/p>\n","protected":false},"author":2,"featured_media":63847,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[1374,731,1375],"topic":[],"class_list":["post-63855","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-excel","tag-powerpoint","tag-word"],"yoast_head":"\n