From fe90dfb7d26eec255420c332bb1ac5ba307ede75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=87=E8=B6=A3=E4=BF=9D=E7=BD=97?=
 <dreamer_paul@126.com>
Date: Wed, 5 Nov 2025 20:16:02 +0800
Subject: [PATCH] =?UTF-8?q?Fix:=20=E4=BC=98=E5=8C=96=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E5=87=8F=E5=B0=91=E6=8A=96=E5=8A=A8=E7=8E=B0?=
 =?UTF-8?q?=E8=B1=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/editor.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/pages/editor.tsx b/src/pages/editor.tsx
index 83b2d7d..7efadfd 100644
--- a/src/pages/editor.tsx
+++ b/src/pages/editor.tsx
@@ -138,22 +138,22 @@ export default function Editor() {
     onError: (m) => setPageError(m),
   });
 
-  const colWidth = useMemo(() => `${100 / (languages.length + 2)}%`, [languages.length]);
+  const tableWidth = useMemo(() => (languages.length * 200) + 36 + 60 + 200, [languages.length]);
 
   const virtuosoComponents = useMemo(() => ({
-    Table: (props: React.TableHTMLAttributes<HTMLTableElement>) => <table className="min-w-full text-sm table-fixed" {...props} />,
+    Table: ({ style, ...props }: React.TableHTMLAttributes<HTMLTableElement>) => <table className="min-w-full text-sm table-fixed" {...props} style={{ ...style, width: tableWidth }} />,
     TableHead: (props: React.HTMLAttributes<HTMLTableSectionElement>) => <thead className="bg-muted" {...props} />,
     TableRow: (props: React.HTMLAttributes<HTMLTableRowElement>) => <tr className="border-t" {...props} />,
     TableBody: (props: React.HTMLAttributes<HTMLTableSectionElement>) => <tbody {...props} />,
     TableFoot: (props: React.HTMLAttributes<HTMLTableSectionElement>) => <tfoot {...props} />,
-  }), []);
+  }), [tableWidth]);
 
   const allSelected = useMemo(() => entries.length > 0 && selected.size === entries.length, [entries, selected]);
   const MAX_AI_ITEMS = 50;
 
   const headerContent = useCallback(() => (
     <tr>
-      <th style={{ width: 36 }} className="px-3 py-2">
+      <th style={{ width: 36 }} className="sticky left-0 text-left px-3 py-2 bg-muted">
         <Checkbox
           checked={allSelected}
           onCheckedChange={(checked) => {
@@ -167,11 +167,11 @@ export default function Editor() {
       </th>
       <th style={{ width: 200 }} className="text-left px-3 py-2">翻译条目名称</th>
       {languages.map((lang) => (
-        <th key={lang} style={{ width: colWidth }} className="text-left px-3 py-2">{lang}</th>
+        <th key={lang} style={{ width: 200 }} className="text-left px-3 py-2">{lang}</th>
       ))}
-      <th style={{ width: 80 }} className="text-left px-3 py-2">操作</th>
+      <th style={{ width: 60 }} className="sticky right-0 text-left px-3 py-2 bg-muted">操作</th>
     </tr>
-  ), [languages, colWidth, allSelected, entries]);
+  ), [languages, allSelected, entries]);
 
   const renderItemContent = useCallback((_idx: number, entry: FlatEntry) => {
     const handleCopy = () => {
@@ -181,7 +181,7 @@ export default function Editor() {
 
     return (
       <>
-        <td style={{ width: 36 }} className="px-3 py-2">
+        <td className="sticky left-0 px-3 py-2 bg-white">
           <Checkbox
             checked={selected.has(entry.path)}
             onCheckedChange={(checked) => {
@@ -193,7 +193,7 @@ export default function Editor() {
             }}
           />
         </td>
-        <td style={{ width: 200 }} className="px-3 py-2 font-mono">
+        <td className="px-3 py-2 font-mono">
           <button type="button" className="w-full text-left min-h-8 leading-8 px-2 rounded hover:bg-accent" onClick={handleCopy} title="点击复制">
             {entry.path}
           </button>
@@ -203,7 +203,7 @@ export default function Editor() {
           const isSaving = inline.isSavingCell(entry.path, lang);
           const displayValue = inline.getDisplayValue(entry.path, lang);
           return (
-            <td key={`${entry.path}:${lang}`} style={{ width: colWidth }} className="px-3 py-2 text-foreground/90 align-top">
+            <td key={`${entry.path}:${lang}`} className="px-3 py-2 text-foreground/90 align-top">
               {isEditing ? (
                 <Input
                   ref={inline.inputRef}
@@ -227,7 +227,7 @@ export default function Editor() {
             </td>
           );
         })}
-        <td style={{ width: "5em" }} className="px-3 py-2 align-top">
+        <td className="sticky right-0 px-3 py-2 align-top bg-white">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button size="sm" variant="outline">
@@ -285,7 +285,7 @@ export default function Editor() {
         </td>
       </>
     );
-  }, [languages, colWidth, inline, projectId, structure, setStructure, setValuesByLang, copy]);
+  }, [languages, inline, projectId, structure, setStructure, setValuesByLang, copy]);
 
   useEffect(() => {
     if (!projectId || languages.length === 0) return;