修复 TypeScript 类型错误：将 MUI sx 语法改成标准 CSS 属性

entrypoints/options/App.tsx

@@ -397,7 +397,7 @@ export default function App() {
               iconColor={theme.palette.primary.main}
               title="应用设置"
               subtitle="针对不同窗口类型独立配置 Dashboard 中显示的功能及其排序"
-              sx={{ mb: 4 }}
+              sx={{ marginBottom: '1rem' }}
             />
             {/* Tab 与恢复按钮同行 */}
             <Stack

entrypoints/popup/App.tsx

@@ -6,7 +6,6 @@ import { SnackbarProvider } from '@/components/GlobalSnackbar';
 import { Box } from '@mui/material';
 import { getEntryPointType } from '@/config/features';
 import { useMemo } from 'react';
-import { Button } from '@/components/ui/button';
 
 export default function App() {
   // 打开Chrome扩展选项页面，需确保manifest中已配置options_page或options_ui
@@ -64,9 +63,6 @@ export default function App() {
           <ErrorBoundary>
             <RouterContainer />
           </ErrorBoundary>
-          <Button variant="outline" className="m-4">
-            测试 Tailwind CSS 按钮
-          </Button>
         </Box>
       </SnackbarProvider>
     </RouterProvider>

pages/JsonTools/JsonFormatSection.tsx

@@ -80,7 +80,7 @@ export default function JsonFormatSection() {
             value={indentSize}
             onChange={(v) => setIndentSize(v)}
             options={INDENT_OPTIONS.map((size) => ({ value: size, label: String(size) }))}
-            sx={{ width: 'auto', mb: 0, flexShrink: 0 }}
+            sx={{ width: 'auto', marginBottom: 0, flexShrink: 0 }}
             size="small"
           />
 

pages/QrCode/index.tsx

@@ -28,14 +28,14 @@ export default function Index() {
             subtitle={t('qrCode:pageSubtitle')}
             icon={<QrCode />}
             iconColor={qrCodePageStyles.primaryColor}
-            sx={{ mb: 2.5 }}
+            sx={{ marginBottom: '0.625rem' }}
           />
 
           <SwitchButtonGroup
             value={qrCode.mode}
             options={modeOptions}
             onChange={qrCode.setMode}
-            sx={{ mb: 3 }}
+            sx={{ marginBottom: '0.75rem' }}
           />
 
           {qrCode.mode === 'generate' ? <GeneratePanel /> : <ParsePanel />}

pages/StorageCleaner/DomainHeader.tsx

@@ -43,7 +43,12 @@ export default function DomainHeader({ domain, totalSize }: DomainHeaderProps) {
           </Box>
         ) : null
       }
-      iconSx={storageCleanerPageStyles.DOMAIN_HEADER_ICON}
+      iconSx={{
+        padding: '0.3rem',
+        borderRadius: '0.75rem',
+        boxShadow: '0 2px 8px rgba(245, 158, 11, 0.15)',
+        transition: 'all 0.2s',
+      }}
       titleSx={{
         fontSize: '1rem',
       }}
@@ -53,10 +58,10 @@ export default function DomainHeader({ domain, totalSize }: DomainHeaderProps) {
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
-        mt: 0.3,
+        marginTop: '0.3rem',
         fontSize: '0.75rem',
       }}
-      sx={{ mb: 3 }}
+      sx={{ marginBottom: '0.75rem' }}
     />
   );
 }

pages/TextStatistics/index.tsx

@@ -52,7 +52,7 @@ export default function Index() {
           minRows={8}
           maxRows={15}
           showClear={false}
-          sx={{ mb: 3 }}
+          sx={{ marginBottom: '0.75rem' }}
         />
 
         {/* 统计结果展示区域 */}

pages/Timestamp/index.tsx

@@ -77,7 +77,7 @@ export default function Index() {
                     { value: 's', label: t('timestamp:unitS') },
                   ]}
                   onChange={(v) => setUnit(v as 'ms' | 's')}
-                  sx={{ width: 'auto', mb: 0, flexShrink: 0 }}
+                  sx={{ width: 'auto', marginBottom: 0, flexShrink: 0 }}
                   size="small"
                 />