Fix: 优化编辑体验，改成多行输入框

src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

src/hooks/biz/use-translation-inline-edit.ts

@@ -18,7 +18,7 @@ export function useTranslationInlineEdit(opts: {
   const [editingKey, setEditingKey] = useState<string | null>(null);
   const [editingValue, setEditingValue] = useState<string>("");
   const [savingKey, setSavingKey] = useState<string | null>(null);
-  const inputRef = useRef<HTMLInputElement | null>(null);
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
 
   function startEdit(path: string, lang: string) {
     const key = makeKey(path, lang);
@@ -63,7 +63,7 @@ export function useTranslationInlineEdit(opts: {
     }
   }
 
-  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
     if (e.key === "Enter") {
       e.preventDefault();
       void saveEdit();

src/index.css

@@ -11,7 +11,7 @@
   --card-foreground: oklch(0.129 0.042 264.695);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.129 0.042 264.695);
-  --primary: oklch(0.208 0.042 265.755);
+  --primary: oklch(62.3% 0.214 259.815);
   --primary-foreground: oklch(0.984 0.003 247.858);
   --secondary: oklch(0.968 0.007 247.896);
   --secondary-foreground: oklch(0.208 0.042 265.755);

src/pages/editor.tsx

@@ -36,6 +36,7 @@ import {
 import { useClipboard } from "@/hooks/use-clipboard";
 import { toast } from "sonner";
 import { Checkbox } from "@/components/ui/checkbox";
+import { Textarea } from "@/components/ui/textarea";
 
 export default function Editor() {
   const { id: projectId } = useParams();
@@ -202,17 +203,18 @@ export default function Editor() {
           const isEditing = inline.isEditingCell(entry.path, lang);
           const isSaving = inline.isSavingCell(entry.path, lang);
           const displayValue = inline.getDisplayValue(entry.path, lang);
+
           return (
             <td key={`${entry.path}:${lang}`} className="px-3 py-2 text-foreground/90 align-top">
               {isEditing ? (
-                <Input
+                <Textarea
                   ref={inline.inputRef}
                   value={inline.editingValue}
                   onChange={(e) => inline.setEditingValue(e.target.value)}
                   onBlur={inline.saveEdit}
                   onKeyDown={inline.handleKeyDown}
                   disabled={isSaving}
-                  className="h-8"
+                  className="leading-8 px-2 py-0"
                 />
               ) : (
                 <button
@@ -221,7 +223,7 @@ export default function Editor() {
                   onClick={() => inline.startEdit(entry.path, lang)}
                   title="点击编辑"
                 >
-                  {displayValue || <span className="text-muted-foreground">点击编辑</span>}
+                  {displayValue || <span className="text-destructive">点击编辑</span>}
                 </button>
               )}
             </td>
@@ -369,7 +371,7 @@ export default function Editor() {
                 <CaseSensitive />
                 {caseSensitive ? "区分大小写" : "忽略大小写"}
               </Button>
-              <Button variant="outline" type="submit">
+              <Button type="submit">
                 <LocateFixed />
                 定位
               </Button>