feat(sd): add filesystem type selection for SD card format (exFAT/FAT32)

Signed-off-by: luckfox-eng29 <eng29@luckfox.com>

ui/src/layout/components_side/SharedFolders/FileManager.tsx

@@ -67,6 +67,8 @@ interface StorageFilePageProps {
   onUnmountSDStorage?: () => void;
   onFormatSDStorage?: () => void;
   onMountSDStorage?: () => void;
+  fsType?: 'exfat' | 'fat32';
+  onFsTypeChange?: (value: 'exfat' | 'fat32') => void;
 }
 
 export const FileManager: React.FC<StorageFilePageProps> = ({
@@ -79,6 +81,8 @@ export const FileManager: React.FC<StorageFilePageProps> = ({
                                                               onResetSDStorage,
                                                               onUnmountSDStorage,
                                                               onFormatSDStorage,
+                                                              fsType,
+                                                              onFsTypeChange,
                                                             }) => {
   const { $at } = useReactAt();
 
@@ -251,15 +255,28 @@ export const FileManager: React.FC<StorageFilePageProps> = ({
                   </p>
                   {sdMountStatus !== "none" && (
                     <div className="pt-2">
-                      <AntdButton
-                        disabled={loading}
-                        danger={true}
-                        type="primary"
-                        onClick={handleFormatWrapper}
-                        className="w-full text-red-500 dark:text-red-400 border-red-200 dark:border-red-800"
-                      >
-                        {$at("Format MicroSD Card")}
-                      </AntdButton>
+                      <div className="w-full space-y-2">
+                        <p className="w-full text-left text-xs text-slate-700 dark:text-slate-300">
+                          {$at("Choose the file system for MicroSD formatting")}
+                        </p>
+                        <select
+                          value={fsType || "fat32"}
+                          onChange={(e) => onFsTypeChange?.(e.target.value as 'exfat' | 'fat32')}
+                          style={{ width: "100%", padding: "8px", borderRadius: "4px" }}
+                        >
+                          <option value="fat32">FAT32</option>
+                          <option value="exfat">exFAT</option>
+                        </select>
+                        <AntdButton
+                          disabled={loading}
+                          danger={true}
+                          type="primary"
+                          onClick={handleFormatWrapper}
+                          className="w-full text-red-500 dark:text-red-400 border-red-200 dark:border-red-800"
+                        >
+                          {$at("Format MicroSD Card")} ({(fsType || "fat32")})
+                        </AntdButton>
+                      </div>
                     </div>
                   )}
                 </div>
@@ -318,6 +335,8 @@ export const FileManager: React.FC<StorageFilePageProps> = ({
         onUnmountSDStorage={handleUnmountWrapper}
         onFormatSDStorage={handleFormatWrapper}
         syncStorage={syncStorage}
+        fsType={fsType}
+        onFsTypeChange={onFsTypeChange}
       />
 
       {uploadFile ? (
@@ -504,29 +523,46 @@ interface ActionButtonsSectionProps {
   onUnmountSDStorage?: () => void;
   onFormatSDStorage?: () => void;
   syncStorage: () => void;
+  fsType?: 'exfat' | 'fat32';
+  onFsTypeChange?: (value: 'exfat' | 'fat32') => void;
 }
 
 const ActionButtonsSection: React.FC<ActionButtonsSectionProps> = ({
-                                                                     mediaType,
-                                                                     loading,
-                                                                     showSDManagement,
-                                                                     onUnmountSDStorage,
-                                                                     onFormatSDStorage,
-                                                                   }) => {
+                                                                      mediaType,
+                                                                      loading,
+                                                                      showSDManagement,
+                                                                      onUnmountSDStorage,
+                                                                      onFormatSDStorage,
+                                                                      fsType,
+                                                                      onFsTypeChange,
+                                                                    }) => {
   const { $at } = useReactAt();
 
   if (mediaType === "sd" && showSDManagement) {
     return (
-      <div className="flex animate-fadeIn justify-between gap-2 opacity-0"
+      <div className="animate-fadeIn space-y-2 opacity-0"
            style={{ animationDuration: "0.7s", animationDelay: "0.25s" }}
       >
-        <AntdButton
-          disabled={loading}
-          type="primary"
-          danger={true}
-          onClick={onFormatSDStorage}
-          className="w-full text-red-500 dark:text-red-400 border-red-200 dark:border-red-800"
-        >{$at("Format MicroSD Card")}</AntdButton>
+        <div className="w-full space-y-2">
+          <p className="w-full text-left text-xs text-slate-700 dark:text-slate-300">
+            {$at("Choose the file system for MicroSD formatting")}
+          </p>
+          <select
+            value={fsType || "fat32"}
+            onChange={(e) => onFsTypeChange?.(e.target.value as 'exfat' | 'fat32')}
+            style={{ width: "100%", padding: "8px", borderRadius: "4px" }}
+          >
+            <option value="fat32">FAT32</option>
+            <option value="exfat">exFAT</option>
+          </select>
+          <AntdButton
+            disabled={loading}
+            type="primary"
+            danger={true}
+            onClick={onFormatSDStorage}
+            className="w-full text-red-500 dark:text-red-400 border-red-200 dark:border-red-800"
+          >{$at("Format MicroSD Card")} ({(fsType || "fat32")})</AntdButton>
+        </div>
         <AntdButton
           disabled={loading}
           type="primary"

ui/src/layout/components_side/SharedFolders/SDFilePage.tsx

@@ -9,6 +9,7 @@ export default function SDFilePage() {
   const { $at } = useReactAt();
   const [send] = useJsonRpc();
   const [loading, setLoading] = useState(false);
+  const [fsType, setFsType] = useState<'exfat' | 'fat32'>('fat32');
 
   const handleResetSDStorage = async () => {
     setLoading(true);
@@ -37,11 +38,11 @@ export default function SDFilePage() {
   };
 
   const handleFormatSDStorage = async () => {
-    if (!window.confirm($at("Formatting the SD card will erase all data. Continue?"))) {
+    if (!window.confirm($at(`Formatting the SD card as ${fsType.toUpperCase()} will erase all data. Continue?`))) {
       return;
     }
     setLoading(true);
-    send("formatSDStorage", { confirm: true }, res => {
+    send("formatSDStorage", { confirm: true, fsType }, res => {
       if ("error" in res) {
         notifications.error(res.error.data || res.error.message);
         setLoading(false);
@@ -54,17 +55,21 @@ export default function SDFilePage() {
   };
 
   return (
-    <FileManager
-      mediaType="sd"
-      returnTo="/sd-files"
-      listFilesMethod="listSDStorageFiles"
-      getSpaceMethod="getSDStorageSpace"
-      deleteFileMethod="deleteSDStorageFile"
-      downloadUrlPrefix="/storage/sd-download"
-      showSDManagement={true}
-      onResetSDStorage={handleResetSDStorage}
-      onUnmountSDStorage={handleUnmountSDStorage}
-      onFormatSDStorage={handleFormatSDStorage}
-    />
+    <>
+      <FileManager
+        mediaType="sd"
+        returnTo="/sd-files"
+        listFilesMethod="listSDStorageFiles"
+        getSpaceMethod="getSDStorageSpace"
+        deleteFileMethod="deleteSDStorageFile"
+        downloadUrlPrefix="/storage/sd-download"
+        showSDManagement={true}
+        onResetSDStorage={handleResetSDStorage}
+        onUnmountSDStorage={handleUnmountSDStorage}
+        onFormatSDStorage={handleFormatSDStorage}
+        fsType={fsType}
+        onFsTypeChange={setFsType}
+      />
+    </>
   );
 }

ui/src/layout/components_side/VirtualMediaSource/ImageManager.tsx

@@ -105,6 +105,7 @@ export default function ImageManager({
   const [sdMountStatus, setSDMountStatus] = useState<"ok" | "none" | "fail" | null>(storageType === 'sd' ? null : 'ok');
   const [loading, setLoading] = useState(false);
   const [uploadFile, setUploadFile] = useState<string | null>(null);
+  const [fsType, setFsType] = useState<'exfat' | 'fat32'>('fat32');
   const filesPerPage = 5;
 
   const percentageUsed = useMemo(() => {
@@ -170,7 +171,7 @@ export default function ImageManager({
       return;
     }
     setLoading(true);
-    send("formatSDStorage", { confirm: true }, res => {
+    send("formatSDStorage", { confirm: true, fsType }, res => {
       if ("error" in res) {
         notifications.error(res.error.data || res.error.message);
         setLoading(false);
@@ -347,15 +348,28 @@ export default function ImageManager({
                   </p>
                   {sdMountStatus !== "none" && (
                     <div className="pt-2">
-                      <AntdButton
-                        disabled={loading}
-                        danger={true}
-                        type="primary"
-                        onClick={handleFormatSDStorage}
-                        className="w-full text-red-500 dark:text-red-400 border-red-200 dark:border-red-800"
-                      >
-                        {$at("Format MicroSD Card")}
-                      </AntdButton>
+                      <div className="mx-auto w-full max-w-[360px] space-y-2">
+                        <p className="w-full text-left text-xs text-slate-700 dark:text-slate-300">
+                          {$at("Choose the file system for MicroSD formatting")}
+                        </p>
+                        <select
+                          value={fsType}
+                          onChange={(e) => setFsType(e.target.value as 'exfat' | 'fat32')}
+                          style={{ width: "100%", padding: "8px", borderRadius: "4px" }}
+                        >
+                          <option value="fat32">FAT32</option>
+                          <option value="exfat">exFAT</option>
+                        </select>
+                        <AntdButton
+                          disabled={loading}
+                          danger={true}
+                          type="primary"
+                          onClick={handleFormatSDStorage}
+                          className="w-full text-red-500 dark:text-red-400 border-red-200 dark:border-red-800"
+                        >
+                          {$at("Format MicroSD Card")} ({fsType})
+                        </AntdButton>
+                      </div>
                     </div>
                   )}
                 </div>
@@ -493,16 +507,29 @@ export default function ImageManager({
       </div>
 
       {unmountApi && storageType === 'sd' && (
-        <div className="flex animate-fadeIn justify-between gap-2 opacity-0"
+        <div className="animate-fadeIn space-y-2 opacity-0"
              style={{ animationDuration: "0.7s", animationDelay: "0.25s" }}
         >
-          <AntdButton
-            disabled={loading}
-            type="primary"
-            danger={true}
-            onClick={handleFormatSDStorage}
-            className="w-full text-red-500 dark:text-red-400 border-red-200 dark:border-red-800"
-          >{$at("Format MicroSD Card")}</AntdButton>
+          <div className="w-full space-y-2">
+            <p className="w-full text-left text-xs text-slate-700 dark:text-slate-300">
+              {$at("Choose the file system for MicroSD formatting")}
+            </p>
+            <select
+              value={fsType}
+              onChange={(e) => setFsType(e.target.value as 'exfat' | 'fat32')}
+              style={{ width: "100%", padding: "8px", borderRadius: "4px" }}
+            >
+              <option value="fat32">FAT32</option>
+              <option value="exfat">exFAT</option>
+            </select>
+            <AntdButton
+              disabled={loading}
+              type="primary"
+              danger={true}
+              onClick={handleFormatSDStorage}
+              className="w-full text-red-500 dark:text-red-400 border-red-200 dark:border-red-800"
+            >{$at("Format MicroSD Card")} ({fsType})</AntdButton>
+          </div>
           <AntdButton
             disabled={loading}
             type="primary"