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

pages/Base64Converter/index.tsx

@@ -1,16 +1,14 @@
-import { Type, Upload, Image } from 'lucide-react';
+import { Image as ImageIcon, Type, Upload } from 'lucide-react';
 import { useLazyTranslation } from '@/utils/useLazyTranslation';
 import PageHeader from '@/components/PageHeader';
 import { base64ConverterPageStyles } from '@/config/pageTheme';
 import { useStorageState } from '@/utils/useStorageState';
 import type { Base64ConverterPageMode } from '@/types/storage';
 import TextMode from './TextMode';
-import FileMode from './FileMode';
-import ImageMode from './ImageMode';
+import Base64ConverterSection from './Base64ConverterSection'; // ✅ 正确对接全新的一体化大组件
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 
 const VALID_PAGE_MODES: readonly Base64ConverterPageMode[] = ['text', 'file', 'image'];
-
 const isValidPageMode = (val: unknown): val is Base64ConverterPageMode =>
   typeof val === 'string' && (VALID_PAGE_MODES as readonly string[]).includes(val);
 
@@ -25,37 +23,37 @@ export default function Index() {
   );
 
   const modeIcon: Record<PageMode, React.ReactNode> = {
-    text: <Type />,
-    file: <Upload />,
-    image: <Image />,
+    text: <Type className="h-4 w-4" />,
+    file: <Upload className="h-4 w-4" />,
+    image: <ImageIcon className="h-4 w-4" />,
   };
 
   return (
-    <div>
-      <div className="p-2">
-        <PageHeader
-          title={t('base64Converter:pageTitle')}
-          subtitle={t('base64Converter:pageSubtitle')}
-          icon={modeIcon[pageMode]}
-          iconColor={base64ConverterPageStyles.primaryColor}
-        />
+    <div className="p-4 w-full flex flex-col space-y-4 min-h-[520px] select-none animate-in fade-in duration-300">
+      <PageHeader
+        title={t('base64Converter:pageTitle')}
+        subtitle={t('base64Converter:pageSubtitle')}
+        icon={modeIcon[pageMode]}
+        iconColor={base64ConverterPageStyles.primaryColor}
+        className="pb-1"
+      />
 
-        <div className="flex flex-col gap-6">
-          <SwitchButtonGroup
-            value={pageMode}
-            options={[
-              { value: 'text', label: t('base64Converter:textMode') },
-              { value: 'file', label: t('base64Converter:fileMode') },
-              { value: 'image', label: t('base64Converter:imageMode') },
-            ]}
-            onChange={(value: PageMode) => setPageMode(value)}
-            size="small"
-          />
+      <SwitchButtonGroup
+        value={pageMode}
+        options={[
+          { value: 'text', label: t('base64Converter:textMode') },
+          { value: 'file', label: t('base64Converter:fileMode') },
+          { value: 'image', label: t('base64Converter:imageMode') },
+        ]}
+        onChange={(value: PageMode) => setPageMode(value)}
+        size="small"
+        className="w-full sm:w-auto"
+      />
 
-          {pageMode === 'text' && <TextMode onSwitchToImageMode={() => setPageMode('image')} />}
-          {pageMode === 'file' && <FileMode />}
-          {pageMode === 'image' && <ImageMode />}
-        </div>
+      <div className="w-full pt-1">
+        {pageMode === 'text' && <TextMode onSwitchToImageMode={() => setPageMode('image')} />}
+        {pageMode === 'file' && <Base64ConverterSection mode="file" />}
+        {pageMode === 'image' && <Base64ConverterSection mode="image" />}
       </div>
     </div>
   );