refactor: optimize sync tabs with improved state management and performance

- Refactored DynamicTab, ArticleTab, and VideoTab with more efficient state handling
- Introduced useCallback and useMemo for performance optimization
- Simplified file handling and platform selection logic
- Updated PlatformCheckbox component with more compact design
- Improved event listener management and file processing
- Reduced code complexity and improved readability

Author: harryisfish

src/components/Sync/AboutTab.tsx

@@ -7,32 +7,32 @@ const AboutTab: React.FC = () => {
     <div className="flex flex-col gap-4">
       <Card className="shadow-none bg-default-50">
         <CardBody className="gap-6">
-          <div className="flex items-center justify-center">
+          <div className="flex justify-center items-center">
             <img
               src="/assets/icon.png"
               alt="logo"
               className="w-24 h-24 rounded-xl shadow-lg"
             />
           </div>
-          <div className="text-center space-y-2">
+          <div className="space-y-2 text-center">
             <h2 className="text-2xl font-bold">{chrome.i18n.getMessage('extensionDisplayName')}</h2>
             <p className="text-sm text-foreground/60">v{chrome.runtime.getManifest().version}</p>
           </div>
-          <p className="text-center text-foreground/80 text-base">{chrome.i18n.getMessage('aboutDescription')}</p>
+          <p className="text-base text-center text-foreground/80">{chrome.i18n.getMessage('aboutDescription')}</p>
         </CardBody>
       </Card>
 
       <Card className="shadow-none bg-default-50">
         <CardBody className="gap-4">
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <Button
               as={Link}
               href="https://github.com/leaper-one/MultiPost-Extension"
               target="_blank"
               rel="noopener noreferrer"
               variant="flat"
-              className="w-full justify-start">
-              <GithubIcon className="w-5 h-5 mr-2" />
+              className="justify-start w-full">
+              <GithubIcon className="mr-2 w-5 h-5" />
               GitHub
             </Button>
             <Button
@@ -41,8 +41,8 @@ const AboutTab: React.FC = () => {
               target="_blank"
               rel="noopener noreferrer"
               variant="flat"
-              className="w-full justify-start">
-              <Book className="w-5 h-5 mr-2" />
+              className="justify-start w-full">
+              <Book className="mr-2 w-5 h-5" />
               {chrome.i18n.getMessage('optionsViewDocs')}
             </Button>
             <Button
@@ -51,16 +51,16 @@ const AboutTab: React.FC = () => {
               target="_blank"
               rel="noopener noreferrer"
               variant="flat"
-              className="w-full justify-start">
-              <Globe className="w-5 h-5 mr-2" />
+              className="justify-start w-full">
+              <Globe className="mr-2 w-5 h-5" />
               {chrome.i18n.getMessage('options2SOMErenHomepage')}
             </Button>
             <Button
               as={Link}
               href="mailto:support@leaper.one"
               variant="flat"
-              className="w-full justify-start">
-              <Mail className="w-5 h-5 mr-2" />
+              className="justify-start w-full">
+              <Mail className="mr-2 w-5 h-5" />
               {chrome.i18n.getMessage('optionsFeedbackEmail')}
             </Button>
           </div>

src/components/Sync/ArticleTab.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { Card, Button, Image, Input, Textarea, CardHeader, CardBody, Progress, CardFooter } from '@heroui/react';
-import { ImagePlusIcon, XIcon, DownloadIcon } from 'lucide-react';
+import { ImagePlusIcon, XIcon, DownloadIcon, Eraser } from 'lucide-react';
 import type { FileData, SyncData } from '~sync/common';
 import PlatformCheckbox from './PlatformCheckbox';
 import { getPlatformInfos } from '~sync/common';
@@ -39,9 +39,9 @@ const ArticleTab: React.FC<ArticleTabProps> = ({ funcPublish, funcScraper }) =>
     codeBlockStyle: 'fenced',
   });
   const storage = new Storage({
-    area: "local" // 明确指定使用 localStorage
+    area: 'local', // 明确指定使用 localStorage
   });
-  
+
   useEffect(() => {
     if (process.env.NODE_ENV === 'development') {
       setTitle('开发环境标题');
@@ -50,11 +50,11 @@ const ArticleTab: React.FC<ArticleTabProps> = ({ funcPublish, funcScraper }) =>
   }, []);
 
   const handlePlatformChange = async (platform: string, isSelected: boolean) => {
-    const newSelectedPlatforms = isSelected 
-    ? [...selectedPlatforms, platform] 
-    : selectedPlatforms.filter((p) => p !== platform);   
-  setSelectedPlatforms(newSelectedPlatforms);
-  await storage.set('articlePlatforms', newSelectedPlatforms);
+    const newSelectedPlatforms = isSelected
+      ? [...selectedPlatforms, platform]
+      : selectedPlatforms.filter((p) => p !== platform);
+    setSelectedPlatforms(newSelectedPlatforms);
+    await storage.set('articlePlatforms', newSelectedPlatforms);
   };
 
   const clearSelectedPlatforms = async () => {
@@ -63,8 +63,8 @@ const ArticleTab: React.FC<ArticleTabProps> = ({ funcPublish, funcScraper }) =>
   };
 
   const loadPlatforms = async () => {
-    const platforms = await storage.get<string[]>("articlePlatforms");
-    setSelectedPlatforms(platforms as string[] || []);
+    const platforms = await storage.get<string[]>('articlePlatforms');
+    setSelectedPlatforms((platforms as string[]) || []);
   };
   loadPlatforms();
 
@@ -395,18 +395,19 @@ const ArticleTab: React.FC<ArticleTabProps> = ({ funcPublish, funcScraper }) =>
               <p className="text-sm font-medium">{chrome.i18n.getMessage('optionsSelectPublishPlatforms')}</p>
             </div>
             {selectedPlatforms.length > 0 && (
-              <Button 
-                size="sm" 
-                variant="light" 
-                color="danger" 
+              <Button
+                isIconOnly
+                size="sm"
+                variant="light"
+                color="danger"
                 onPress={clearSelectedPlatforms}
-                className="text-xs"
-              >
-                {chrome.i18n.getMessage('optionsClearPlatforms') || chrome.i18n.getMessage('optionsClearAll') || '清空平台'}
+                title="清空平台"
+                className="hover:bg-danger-100">
+                <Eraser className="size-4" />
               </Button>
             )}
           </div>
-          <div className="grid grid-cols-2 gap-3">
+          <div className="grid grid-cols-2 xs:grid-cols-3 sm:grid-cols-4 gap-1">
             {getPlatformInfos('ARTICLE').map((platform) => (
               <PlatformCheckbox
                 key={platform.name}