refactor: convert notification preferences to modal dialog

- Convert NotificationPreferences from inline Card to Modal dialog
- Add button next to export button in repair admin header
- Load preferences on modal open instead of component mount
- Add close button in modal footer
- Improve mobile responsiveness with button grouping

src/pages/repair/NotificationPreferences.tsx

@@ -1,5 +1,14 @@
 import { useEffect, useState } from "react"
-import { Card, CardBody, CardHeader, Switch, Spinner, Button } from "@heroui/react"
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Switch,
+  Spinner,
+  Button,
+} from "@heroui/react"
 import { saturdayClient } from "../../utils/client"
 import type { components } from "../../types/saturday"
 
@@ -11,15 +20,23 @@ interface NotificationPreferencesProps {
 }
 
 export default function NotificationPreferences({ token }: NotificationPreferencesProps) {
+  const [isOpen, setIsOpen] = useState(false)
   const [preferences, setPreferences] = useState<NotificationPreferenceItem[]>([])
-  const [isLoading, setIsLoading] = useState(true)
+  const [isLoading, setIsLoading] = useState(false)
   const [isSaving, setIsSaving] = useState(false)
   const [errorMessage, setErrorMessage] = useState<string>("")
   const [successMessage, setSuccessMessage] = useState<string>("")
 
-  useEffect(() => {
+  const openModal = () => {
+    setIsOpen(true)
     loadPreferences()
-  }, [token])
+  }
+
+  const closeModal = () => {
+    setIsOpen(false)
+    setErrorMessage("")
+    setSuccessMessage("")
+  }
 
   const loadPreferences = async () => {
     if (!token) return
@@ -99,27 +116,30 @@ export default function NotificationPreferences({ token }: NotificationPreferenc
     }
   }
 
-  if (isLoading) {
   return (
-      <Card className="w-full">
-        <CardBody className="flex justify-center items-center py-8">
-          <Spinner label="加载中..." />
-        </CardBody>
-      </Card>
-    )
-  }
+    <>
+      <Button onPress={openModal} color="primary" variant="flat">
+        通知设置
+      </Button>
 
-  return (
-    <Card className="w-full">
-      <CardHeader className="flex flex-col items-start gap-2 pb-4">
-        <h3 className="text-lg sm:text-xl font-bold">通知偏好设置</h3>
-        <p className="text-sm text-gray-500">管理您希望接收的通知类型</p>
-      </CardHeader>
-      <CardBody className="gap-4">
+      <Modal isOpen={isOpen} onClose={closeModal} size="2xl">
+        <ModalContent>
+          <ModalHeader className="flex flex-col gap-1">
+            <h3 className="text-xl font-bold">通知偏好设置</h3>
+            <p className="text-sm text-gray-500 font-normal">管理您希望接收的通知类型</p>
+          </ModalHeader>
+          <ModalBody>
+            {isLoading ? (
+              <div className="flex justify-center items-center py-8">
+                <Spinner label="加载中..." />
+              </div>
+            ) : (
+              <>
+                <div className="flex flex-col gap-4">
                   {preferences.map((pref) => (
                     <div
                       key={pref.notificationType}
-            className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 sm:gap-4 py-2 border-b border-gray-100 last:border-0"
+                      className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 sm:gap-4 py-3 border-b border-gray-100 last:border-0"
                     >
                       <div className="flex-1">
                         <p className="text-sm sm:text-base font-medium">{pref.description}</p>
@@ -134,6 +154,13 @@ export default function NotificationPreferences({ token }: NotificationPreferenc
                     </div>
                   ))}
 
+                  {preferences.length === 0 && !errorMessage && (
+                    <div className="text-center py-4 text-gray-500">
+                      <p className="text-sm">暂无可用的通知偏好设置</p>
+                    </div>
+                  )}
+                </div>
+
                 {/* Messages */}
                 {errorMessage && (
                   <div className="bg-red-50 border border-red-200 rounded-lg p-3 mt-2">
@@ -146,13 +173,16 @@ export default function NotificationPreferences({ token }: NotificationPreferenc
                     <p className="text-sm text-green-800">{successMessage}</p>
                   </div>
                 )}
-
-        {preferences.length === 0 && !errorMessage && (
-          <div className="text-center py-4 text-gray-500">
-            <p className="text-sm">暂无可用的通知偏好设置</p>
-          </div>
+              </>
             )}
-      </CardBody>
-    </Card>
+          </ModalBody>
+          <ModalFooter>
+            <Button variant="flat" onPress={closeModal}>
+              关闭
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
   )
 }

src/pages/repair/RepairAdmin.tsx

@@ -526,20 +526,13 @@ export default function App() {
     <section className="box-border max-w-full px-4 sm:px-6 lg:max-w-[1024px] lg:px-[22px] mx-auto mb-16 sm:mb-24">
       <div className="mt-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
         <div className="text-xl sm:text-2xl font-bold">维修管理</div>
-        {
-          userInfo?.roles?.find(v => v.toLowerCase() == "repair admin")
-            ? <div className="w-full sm:w-auto"><ExportExcelModal></ExportExcelModal></div>
-            : <></>
-        }
-      </div>
-
-      {/* Notification Preferences Section */}
-      {token && (
-        <div className="mt-6">
-          <NotificationPreferences token={token} />
-        </div>
+        <div className="flex gap-2 w-full sm:w-auto">
+          {token && <NotificationPreferences token={token} />}
+          {userInfo?.roles?.find(v => v.toLowerCase() == "repair admin") && (
+            <ExportExcelModal />
           )}
-
+        </div>
+      </div>
       <div className="my-8 flex flex-col gap-4">
         {/* Mobile Cards Layout */}
         <div className="block sm:hidden">