feat: support Excel spreadsheet preview (#267)

* feat: support Excel spreadsheet preview

* feat: CSV files support switching between preview and code modes

Author: yiboyasss

frontend/package-lock.json

@@ -60,7 +60,8 @@
     "tailwindcss-animate": "^1.0.7",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
-    "typescript": "^5.0.0"
+    "typescript": "^5.0.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@types/dagre": "^0.7.53",

frontend/package.json

@@ -0,0 +1,127 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { useI18n } from "@/contexts/i18n-context"
+import * as XLSX from "xlsx"
+
+interface ExcelPreviewRendererProps {
+    base64Content: string
+}
+
+export function ExcelPreviewRenderer({ base64Content }: ExcelPreviewRendererProps) {
+    const containerRef = useRef<HTMLDivElement | null>(null)
+    const [error, setError] = useState<string | null>(null)
+    const [activeSheet, setActiveSheet] = useState<string | null>(null)
+    const [sheets, setSheets] = useState<{ [key: string]: string }>({})
+    const { t } = useI18n()
+
+    useEffect(() => {
+        const render = async () => {
+            if (!base64Content) {
+                return
+            }
+
+            try {
+                let workbook;
+
+                // Check if content is likely base64
+                const isBase64 = /^[A-Za-z0-9+/=]+$/.test(base64Content.replace(/\s/g, ''));
+
+                if (isBase64) {
+                    try {
+                        const binary = atob(base64Content)
+                        const bytes = new Uint8Array(binary.length)
+                        for (let i = 0; i < binary.length; i++) {
+                            bytes[i] = binary.charCodeAt(i)
+                        }
+                        workbook = XLSX.read(bytes, { type: "array" })
+                    } catch (e) {
+                        // Fallback for non-base64 text
+                        workbook = XLSX.read(base64Content, { type: "string" })
+                    }
+                } else {
+                    workbook = XLSX.read(base64Content, { type: "string" })
+                }
+
+                const sheetData: { [key: string]: string } = {}
+
+                workbook.SheetNames.forEach((sheetName) => {
+                    const worksheet = workbook.Sheets[sheetName]
+                    const html = XLSX.utils.sheet_to_html(worksheet)
+                    sheetData[sheetName] = html
+                })
+
+                setSheets(sheetData)
+                if (workbook.SheetNames.length > 0) {
+                    setActiveSheet(workbook.SheetNames[0])
+                }
+                setError(null)
+            } catch (e) {
+                console.error(e)
+                setError(t("files.previewDialog.errors.excelRenderFailed") || "Failed to render Excel file")
+            }
+        }
+
+        render()
+    }, [base64Content, t])
+
+    if (error) {
+        return <div className="p-4 text-sm text-destructive">{error}</div>
+    }
+
+    if (!activeSheet || !sheets[activeSheet]) {
+        return null
+    }
+
+    return (
+        <div className="flex flex-col h-full overflow-hidden bg-background">
+            {Object.keys(sheets).length > 1 && (
+                <div className="flex border-b overflow-x-auto bg-muted/30 p-2 gap-2 flex-shrink-0">
+                    {Object.keys(sheets).map((sheetName) => (
+                        <button
+                            key={sheetName}
+                            onClick={() => setActiveSheet(sheetName)}
+                            className={`px-3 py-1.5 text-sm rounded-md transition-colors whitespace-nowrap ${activeSheet === sheetName
+                                ? "bg-background shadow-sm border border-border font-medium"
+                                : "text-muted-foreground hover:bg-muted"
+                                }`}
+                        >
+                            {sheetName}
+                        </button>
+                    ))}
+                </div>
+            )}
+
+            <div
+                className="flex-1 overflow-auto p-4 excel-preview-container"
+                ref={containerRef}
+            >
+                <div
+                    className="bg-background rounded-md shadow-sm border min-w-max"
+                    dangerouslySetInnerHTML={{ __html: sheets[activeSheet] }}
+                />
+            </div>
+
+            <style dangerouslySetInnerHTML={{
+                __html: `
+        .excel-preview-container table {
+          border-collapse: collapse;
+          width: 100%;
+        }
+        .excel-preview-container th,
+        .excel-preview-container td {
+          border: 1px solid hsl(var(--border));
+          padding: 8px;
+          min-width: 80px;
+          text-align: left;
+        }
+        .excel-preview-container td[data-t="n"] {
+          text-align: right;
+        }
+        .excel-preview-container tr:nth-child(even) {
+          background-color: hsl(var(--muted) / 0.3);
+        }
+      `}} />
+        </div>
+    )
+}

frontend/src/components/file/excel-preview-renderer.tsx

@@ -1,8 +1,9 @@
 import { Loader2, XIcon } from "lucide-react"
 import { DocxPreviewRenderer } from "@/components/file/docx-preview-renderer"
+import { ExcelPreviewRenderer } from "@/components/file/excel-preview-renderer"
 import { MarkdownRenderer } from "@/components/ui/markdown-renderer"
 import { useI18n } from "@/contexts/i18n-context"
-import { getApiUrl, isHtmlFile, isMarkdownFile } from "@/lib/utils"
+import { getApiUrl, isHtmlFile, isMarkdownFile, isCsvFile } from "@/lib/utils"
 
 interface FileViewerProps {
   fileName: string
@@ -99,6 +100,25 @@ export function FileViewer({
         </div>
       ) : mimeType?.includes('wordprocessingml') || fileName.toLowerCase().endsWith('.docx') ? (
         <DocxPreviewRenderer base64Content={content || ''} />
+      ) : mimeType?.includes('spreadsheetml') || fileName.toLowerCase().endsWith('.xlsx') || fileName.toLowerCase().endsWith('.csv') ? (
+        viewMode === 'code' && isCsvFile(fileName) ? (
+          <pre className="p-4 text-sm font-mono whitespace-pre-wrap break-words">
+            {(() => {
+              const c = content || '';
+              if (!c) return t('files.previewDialog.emptyContent');
+              if (/^[A-Za-z0-9+/=]+$/.test(c.replace(/\s/g, ''))) {
+                try {
+                  return decodeURIComponent(escape(atob(c)));
+                } catch {
+                  return c;
+                }
+              }
+              return c;
+            })()}
+          </pre>
+        ) : (
+          <ExcelPreviewRenderer base64Content={content || ''} />
+        )
       ) : isHtmlFile(fileName) ? (
         viewMode === 'code' ? (
           <pre className="p-4 text-sm font-mono whitespace-pre-wrap break-words">

frontend/src/components/file/file-viewer.tsx

@@ -862,6 +862,7 @@ Build when you need.`
       errors: {
         loadFailed: "Failed to load file",
         docxRenderFailed: "Failed to render DOCX preview",
+        excelRenderFailed: "Failed to render Excel preview",
         cors: "CORS error: Unable to access the file. This might be a browser cache issue, please try refreshing the page.",
         networkErrorWithMsg: "Network error: {msg}",
       },

frontend/src/i18n/locales/en.ts

@@ -862,6 +862,7 @@ Build when you need.`
       errors: {
         loadFailed: "文件加载失败",
         docxRenderFailed: "DOCX 预览渲染失败",
+        excelRenderFailed: "Excel 预览渲染失败",
         cors: "CORS 错误：无法访问文件。这可能是浏览器缓存问题，请尝试刷新页面。",
         networkErrorWithMsg: "网络错误：{msg}",
       },

frontend/src/i18n/locales/zh.ts

@@ -135,6 +135,11 @@ export function isMarkdownFile(fileName: string): boolean {
   return fileName.toLowerCase().endsWith('.md')
 }
 
+export function isCsvFile(fileName: string): boolean {
+  if (!fileName) return false
+  return fileName.toLowerCase().endsWith('.csv')
+}
+
 export function isToggleableFile(fileName: string): boolean {
-  return isHtmlFile(fileName) || isMarkdownFile(fileName)
+  return isHtmlFile(fileName) || isMarkdownFile(fileName) || isCsvFile(fileName)
 }