refactor: 抽离 useBase64Converter hook 并新增 Base64ConverterSection 组件，统一 Base64 转换页面的 shadcn 样式

pages/Base64Converter/ImageMode.tsx

@@ -1,33 +1,15 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
-import { Image, Trash2 } from 'lucide-react';
-import TextInputArea, { type ToolbarAction } from '@/components/TextInputArea';
+import { Image as ImageIcon, Trash2 } from 'lucide-react';
+import TextInputArea from '@/components/TextInputArea';
 import { useTranslation } from 'react-i18next';
 import CopyButton from '@/components/CopyButton';
 import DecodeResultPaper from '@/components/DecodeResultPaper';
-import {
-  fileToBase64,
-  isFileSizeValid,
-  isSupportedImageType,
-  isSupportedImageExtension,
-  formatFileSize,
-  base64ToBlob,
-  downloadBlob,
-  MAX_FILE_SIZE,
-} from '@/utils/base64Converter';
-import type { Base64ToBlobResult, FileToBase64Result } from '@/utils/base64Converter';
+import { Button } from '@/components/ui/button';
+import { downloadBlob, formatFileSize } from '@/utils/base64Converter';
 import { useStorageState } from '@/utils/useStorageState';
 import type { Base64ConvertDirection } from '@/types/storage';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
-
-interface FileInfo {
-  name: string;
-  size: number;
-  type: string;
-}
-
-const ERROR_MESSAGE_TO_I18N: Record<string, string> = {
-  'Invalid Base64 string': 'invalidBase64',
-};
+import { useBase64Converter } from './useBase64Converter'; // 💡 引入共享核心
+import { cn } from '@/lib/utils';
 
 const isValidDirection = (val: unknown): val is Base64ConvertDirection =>
   val === 'encode' || val === 'decode';
@@ -40,37 +22,24 @@ export default function ImageMode() {
     isValidDirection,
   );
 
-  // encode state
-  const [result, setResult] = useState<FileToBase64Result | null>(null);
-  const [info, setInfo] = useState<FileInfo | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isDragging, setIsDragging] = useState(false);
-  const imageInputRef = useRef<HTMLInputElement>(null);
-  const cancelRef = useRef(false);
-
-  // decode state
-  const [decodeInput, setDecodeInput] = useState('');
-  const [decoded, setDecoded] = useState<Base64ToBlobResult | null>(null);
-  const [decodedFileName, setDecodedFileName] = useState('');
-
-  // shared
-  const [error, setError] = useState<string | null>(null);
-
-  const resetAll = useCallback(() => {
-    cancelRef.current = true;
-    setResult(null);
-    setInfo(null);
-    setIsLoading(false);
-    setDecodeInput('');
-    setDecoded(null);
-    setDecodedFileName('');
-    setError(null);
-    if (imageInputRef.current) imageInputRef.current.value = '';
-  }, []);
-
-  const handleClear = () => {
-    resetAll();
-  };
+  // 消费完全托管的核心 Hook，消灭本地多余状态机
+  const {
+    result,
+    info,
+    isLoading,
+    isDragging,
+    setIsDragging,
+    fileInputRef,
+    encodeError,
+    decodeInput,
+    setDecodeInput,
+    decoded,
+    decodeError,
+    decodedFileName,
+    setCustomFileName,
+    resetAll,
+    safeFileSelect,
+  } = useBase64Converter({ mode: 'image' });
 
   const handleDirectionChange = (next: Base64ConvertDirection) => {
     if (!next || next === direction) return;
@@ -78,239 +47,213 @@ export default function ImageMode() {
     setDirection(next);
   };
 
-  const handleFileSelect = async (file: File) => {
-    cancelRef.current = false;
-    setError(null);
-    setResult(null);
-    setInfo(null);
-
-    if (!isFileSizeValid(file.size)) {
-      setError(t('fileSizeExceeded', { max: `${MAX_FILE_SIZE / 1024 / 1024} MB` }));
-      return;
-    }
-
-    if (!isSupportedImageType(file.type) && !isSupportedImageExtension(file.name)) {
-      setError(t('unsupportedImageType'));
-      return;
-    }
-
-    setInfo({
-      name: file.name,
-      size: file.size,
-      type: file.type || 'application/octet-stream',
-    });
-    setIsLoading(true);
-
-    try {
-      const res = await fileToBase64(file);
-      if (!cancelRef.current) setResult(res);
-    } catch (e) {
-      if (!cancelRef.current) {
-        setError(e instanceof Error ? e.message : t('conversionFailed'));
-      }
-    } finally {
-      if (!cancelRef.current) setIsLoading(false);
-    }
-  };
-
-  const handleDragOver = (e: React.DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragging(true);
-  };
-
-  const handleDragLeave = (e: React.DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragging(false);
-  };
-
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragging(false);
-    const file = e.dataTransfer.files[0];
-    if (file) handleFileSelect(file);
-  };
-
   const handleDownload = () => {
-    if (!decoded) return;
-    downloadBlob(decoded.blob, decodedFileName || `decoded${decoded.suggestedExtension}`);
+    if (decoded) downloadBlob(decoded.blob, decodedFileName);
   };
 
-  const actions: ToolbarAction[] = useMemo(
-    () => [
-      {
-        key: 'decode',
-        label: t('decode'),
-        type: 'primary',
-        position: 'bottom',
-        disabled: (value: string) => !value.trim(),
-        onClick: (value: string, helpers) => {
-          helpers.setError('');
-          setDecoded(null);
-          try {
-            const res = base64ToBlob(value);
-            setDecoded(res);
-            setDecodedFileName(`decoded${res.suggestedExtension}`);
-          } catch (e) {
-            const message = e instanceof Error ? e.message : '';
-            const i18nKey = ERROR_MESSAGE_TO_I18N[message];
-            helpers.setError(i18nKey ? t(i18nKey) : message || t('conversionFailed'));
-          }
-        },
-      },
-    ],
-    [t],
-  );
-
   return (
-    <>
-      <SwitchButtonGroup
-        value={direction}
-        options={[
-          { value: 'encode', label: t('encode') },
-          { value: 'decode', label: t('decode') },
-        ]}
-        onChange={handleDirectionChange}
-        size="small"
-      />
+    <div className="w-full flex flex-col space-y-4 animate-in fade-in duration-300">
+      <div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
+        <SwitchButtonGroup
+          value={direction}
+          options={[
+            { value: 'encode', label: t('encode') },
+            { value: 'decode', label: t('decode') },
+          ]}
+          onChange={handleDirectionChange}
+          size="small"
+        />
+      </div>
 
-      {direction === 'encode' && (
-        <>
+      {direction === 'encode' ? (
+        <div className="flex flex-col space-y-4">
+          {/* 图片拖拽投递箱终端 */}
           <div
-            onDragOver={handleDragOver}
-            onDragLeave={handleDragLeave}
-            onDrop={handleDrop}
-            onClick={() => imageInputRef.current?.click()}
-            className={`flex flex-col items-center justify-center min-h-[180px] border-2 border-dashed rounded-xl p-8 cursor-pointer transition-all duration-200 ${
+            onDragOver={(e) => {
+              e.preventDefault();
+              setIsDragging(true);
+            }}
+            onDragLeave={() => setIsDragging(false)}
+            onDrop={(e) => {
+              e.preventDefault();
+              setIsDragging(false);
+              const file = e.dataTransfer.files[0];
+              if (file) safeFileSelect(file);
+            }}
+            onClick={() => fileInputRef.current?.click()}
+            className={cn(
+              'flex flex-col items-center justify-center min-h-[190px] border-2 border-dashed rounded-2xl p-8 cursor-pointer transition-all duration-300',
               isDragging
                 ? 'border-primary bg-primary/10'
                 : info
-                  ? 'border-primary bg-primary/5'
-                  : 'border-input bg-muted hover:border-primary hover:bg-primary/5'
-            }`}
+                  ? 'border-primary/60 bg-primary/5'
+                  : 'border-border bg-muted/40 hover:border-primary/80 hover:bg-muted/70',
+            )}
           >
             <input
-              ref={imageInputRef}
+              ref={fileInputRef}
               type="file"
               accept="image/*"
               hidden
               onChange={(e) => {
                 const file = e.target.files?.[0];
-                if (file) handleFileSelect(file);
+                if (file) safeFileSelect(file);
               }}
             />
             {isLoading ? (
-              <div className="w-10 h-10 border-4 border-primary/30 border-t-primary rounded-full animate-spin" />
+              <div className="w-9 h-9 border-3 border-primary/20 border-t-primary rounded-full animate-spin" />
             ) : info ? (
-              <div className="flex flex-col items-center gap-1">
+              <div className="flex flex-col items-center gap-1.5 text-center animate-in fade-in duration-200 w-full">
                 {result && (
-                  <img
-                    src={result.output}
-                    alt="preview"
-                    className="max-w-full max-h-40 rounded-lg object-contain mb-2"
-                  />
+                  <div className="relative p-1 border border-border bg-background rounded-lg shadow-sm mb-1 max-w-[180px] overflow-hidden">
+                    <img
+                      src={result.output}
+                      alt="preview"
+                      className="max-h-32 w-full object-contain rounded"
+                    />
+                  </div>
                 )}
-                <span className="text-sm font-bold">{info.name}</span>
-                <span className="text-xs text-muted-foreground">
+                <span className="text-sm font-bold text-foreground/90 max-w-[280px] truncate">
+                  {info.name}
+                </span>
+                <span className="text-xs text-muted-foreground/80 font-mono tabular-nums">
                   {formatFileSize(info.size)} · {info.type}
                 </span>
-                <span className="text-xs text-muted-foreground">{t('clickOrDropToReplace')}</span>
+                <span className="text-[11px] font-medium text-primary/80 mt-1">
+                  {t('clickOrDropToReplace')}
+                </span>
               </div>
             ) : (
-              <div className="flex flex-col items-center gap-1">
-                <Image className="w-10 h-10 text-muted-foreground" />
-                <span className="text-sm text-muted-foreground font-semibold">
+              <div className="flex flex-col items-center gap-1.5 text-center">
+                <ImageIcon className="w-8 h-8 text-muted-foreground/60" />
+                <span className="text-xs font-bold text-foreground/80">
                   {t('clickOrDropToImage')}
                 </span>
-                <span className="text-xs text-muted-foreground">{t('supportedFormats')}</span>
+                <span className="text-[10px] font-medium text-muted-foreground/60">
+                  {t('supportedFormats')}
+                </span>
               </div>
             )}
           </div>
 
-          {error && (
+          {encodeError && (
             <div
               role="alert"
-              className="p-3 rounded-lg bg-red-50 border border-red-200 text-sm text-red-700"
+              className="p-3.5 bg-destructive/10 border border-destructive/20 rounded-xl text-xs font-semibold text-destructive tracking-wide"
             >
-              {error}
+              {encodeError}
             </div>
           )}
 
           {result && (
-            <div className="p-4 rounded-xl bg-primary/10 border border-primary/30">
-              <div className="flex justify-between items-center mb-2">
-                <span className="text-xs font-bold text-muted-foreground">{t('base64Output')}</span>
-                <div className="flex gap-1">
-                  <CopyButton text={result.rawBase64} tooltip={t('copyRaw')} />
-                  <CopyButton text={result.output} tooltip={t('copyDataUri')} color="info" />
+            <div className="p-4 rounded-2xl bg-card border border-border shadow-sm flex flex-col space-y-3">
+              <div className="flex justify-between items-center select-none">
+                <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
+                  {t('base64Output')}
+                </span>
+                <div className="flex gap-2">
+                  <CopyButton
+                    text={result.rawBase64}
+                    tooltip={t('copyRaw')}
+                    className="h-6 px-2 rounded-md border text-[10px] font-bold"
+                  />
+                  <CopyButton
+                    text={result.output}
+                    tooltip={t('copyDataUri')}
+                    className="h-6 px-2 rounded-md border text-[10px] font-bold"
+                  />
                 </div>
               </div>
-              <div className="font-mono text-xs break-all max-h-[200px] overflow-y-auto leading-relaxed text-primary font-semibold">
-                {result.output.length > 2000
-                  ? `${result.output.substring(0, 2000)}...`
-                  : result.output}
-              </div>
-              <div className="flex gap-4 mt-2">
-                <span className="text-xs text-muted-foreground">
-                  {t('originalSize')}: {formatFileSize(result.originalBytes)}
-                </span>
-                <span className="text-xs text-muted-foreground">
-                  {t('encodedSize')}: {formatFileSize(result.outputBytes)}
-                </span>
+
+              <TextInputArea
+                readOnly
+                value={
+                  result.output.length > 2000
+                    ? `${result.output.substring(0, 2000)}...`
+                    : result.output
+                }
+                showClear={false}
+                minRows={4}
+              />
+
+              <div className="flex items-center justify-between font-mono text-[10px] text-muted-foreground/70 select-none pt-1">
+                <div className="flex gap-4 items-center tabular-nums">
+                  <span>
+                    {t('originalSize')}:{' '}
+                    <span className="font-semibold text-foreground/80">
+                      {formatFileSize(result.originalBytes)}
+                    </span>
+                  </span>
+                  <span className="text-border/60">|</span>
+                  <span>
+                    {t('encodedSize')}:{' '}
+                    <span className="font-semibold text-foreground/80">
+                      {formatFileSize(result.outputBytes)}
+                    </span>
+                  </span>
+                </div>
+
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={resetAll}
+                  className="h-7 rounded-md text-muted-foreground hover:text-destructive text-[11px] gap-1 px-2"
+                >
+                  <Trash2 className="w-3.5 h-3.5" />
+                  {t('clear')}
+                </Button>
               </div>
             </div>
           )}
 
-          {info && (
-            <button
-              type="button"
-              onClick={handleClear}
-              className="flex items-center gap-1 px-3 py-2 text-sm text-muted-foreground hover:bg-accent rounded-lg transition-colors"
-            >
-              <Trash2 className="w-4 h-4" />
-              {t('clear')}
-            </button>
+          {info && !result && (
+            <div className="flex justify-end select-none">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={resetAll}
+                className="h-8 rounded-md text-xs gap-1.5 text-destructive hover:text-destructive hover:bg-destructive/5 dark:hover:bg-destructive/10"
+              >
+                <Trash2 className="w-3.5 h-3.5" />
+                {t('clear')}
+              </Button>
+            </div>
           )}
-        </>
-      )}
-
-      {direction === 'decode' && (
-        <>
+        </div>
+      ) : (
+        <div className="flex flex-col space-y-4">
           <TextInputArea
             placeholder={t('decodeBase64Placeholder')}
             value={decodeInput}
-            onChange={(v) => {
-              setDecodeInput(v);
-              setError(null);
-            }}
-            actions={actions}
-            externalError={error || undefined}
-            onClear={() => {
-              setDecoded(null);
-              setDecodedFileName('');
-            }}
+            onChange={setDecodeInput}
+            externalError={decodeError || undefined}
+            showClear={true}
+            allowCopy={true}
+            minRows={6}
+            onClear={resetAll}
           />
-
           {decoded && (
-            <DecodeResultPaper
-              title={t('decodedImageOutput')}
-              mimeType={decoded.mimeType}
-              blobSize={decoded.blob.size}
-              fileName={decodedFileName}
-              onFileNameChange={setDecodedFileName}
-              onDownload={handleDownload}
-            >
-              <img
-                src={`data:${decoded.mimeType};base64,${decoded.rawBase64}`}
-                alt="decoded preview"
-                className="max-w-full max-h-40 rounded-lg object-contain mb-3"
-              />
-            </DecodeResultPaper>
+            <div className="animate-in slide-in-from-bottom-2 duration-300">
+              <DecodeResultPaper
+                title={t('decodedImageOutput')}
+                mimeType={decoded.mimeType}
+                blobSize={decoded.blob.size}
+                fileName={decodedFileName}
+                onFileNameChange={setCustomFileName}
+                onDownload={handleDownload}
+              >
+                <div className="relative p-1.5 border border-border bg-background dark:bg-muted/10 rounded-xl max-w-[220px] mb-3 overflow-hidden shadow-sm">
+                  <img
+                    src={`data:${decoded.mimeType};base64,${decoded.rawBase64}`}
+                    alt="decoded preview"
+                    className="max-h-40 w-full rounded-lg object-contain bg-[linear-gradient(45deg,#ccc_25%,transparent_25%),linear-gradient(-45deg,#ccc_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#ccc_75%),linear-gradient(-45deg,transparent_75%,#ccc_75%)] bg-[size:10px_10px] bg-[position:0_0,0_5px,5px_-5px,-5px_0] dark:bg-none"
+                  />
+                </div>
+              </DecodeResultPaper>
+            </div>
           )}
-        </>
+        </div>
       )}
-    </>
+    </div>
   );
 }