refactor(frontend): simplify home card settings state

src/pages/home.tsx

@@ -83,12 +83,17 @@ interface HomeCardsSettings {
   [key: string]: boolean
 }
 
-// 首页设置对话框组件接口
-interface HomeSettingsDialogProps {
-  open: boolean
-  onClose: () => void
-  homeCards: HomeCardsSettings
-  onSave: (cards: HomeCardsSettings) => void
+const DEFAULT_HOME_CARDS: HomeCardsSettings = {
+  info: false,
+  profile: true,
+  proxy: true,
+  network: true,
+  mode: true,
+  traffic: true,
+  clashinfo: true,
+  systeminfo: true,
+  test: true,
+  ip: true,
 }
 
 const serializeCardFlags = (cards: HomeCardsSettings) =>
@@ -97,12 +102,16 @@ const serializeCardFlags = (cards: HomeCardsSettings) =>
     .map((key) => `${key}:${cards[key] ? 1 : 0}`)
     .join('|')
 
+// 首页设置对话框组件接口
+interface HomeSettingsDialogProps {
+  onClose: () => void
+  homeCards: HomeCardsSettings
+}
+
 // 首页设置对话框组件
 const HomeSettingsDialog = ({
-  open,
   onClose,
   homeCards,
-  onSave,
 }: HomeSettingsDialogProps) => {
   const { t } = useTranslation()
   const [cards, setCards] = useState<HomeCardsSettings>(homeCards)
@@ -117,12 +126,11 @@ const HomeSettingsDialog = ({
 
   const handleSave = async () => {
     await patchVerge({ home_cards: cards })
-    onSave(cards)
     onClose()
   }
 
   return (
-    <Dialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
+    <Dialog open onClose={onClose} maxWidth="xs" fullWidth>
       <DialogTitle>{t('home.page.settings.title')}</DialogTitle>
       <DialogContent>
         <FormGroup>
@@ -226,51 +234,10 @@ const HomePage = () => {
 
   // 设置弹窗的状态
   const [settingsOpen, setSettingsOpen] = useState(false)
-  const [localHomeCards, setLocalHomeCards] = useState<{
-    value: HomeCardsSettings
-    baseSignature: string
-  } | null>(null)
 
   // 卡片显示状态
-  const defaultCards = useMemo<HomeCardsSettings>(
-    () => ({
-      info: false,
-      profile: true,
-      proxy: true,
-      network: true,
-      mode: true,
-      traffic: true,
-      clashinfo: true,
-      systeminfo: true,
-      test: true,
-      ip: true,
-    }),
-    [],
-  )
-
-  const vergeHomeCards = useMemo<HomeCardsSettings | null>(
-    () => (verge?.home_cards as HomeCardsSettings | undefined) ?? null,
-    [verge],
-  )
-
-  const remoteHomeCards = useMemo<HomeCardsSettings>(
-    () => vergeHomeCards ?? defaultCards,
-    [defaultCards, vergeHomeCards],
-  )
-
-  const remoteSignature = useMemo(
-    () => serializeCardFlags(remoteHomeCards),
-    [remoteHomeCards],
-  )
-
-  const pendingLocalCards = useMemo<HomeCardsSettings | null>(() => {
-    if (!localHomeCards) return null
-    return localHomeCards.baseSignature === remoteSignature
-      ? localHomeCards.value
-      : null
-  }, [localHomeCards, remoteSignature])
-
-  const effectiveHomeCards = pendingLocalCards ?? remoteHomeCards
+  const homeCards =
+    (verge?.home_cards as HomeCardsSettings | undefined) ?? DEFAULT_HOME_CARDS
 
   // 文档链接函数
   const toGithubDoc = useLockFn(() => {
@@ -284,7 +251,7 @@ const HomePage = () => {
 
   const renderCard = useCallback(
     (cardKey: string, component: React.ReactNode, size: number = 6) => {
-      if (!effectiveHomeCards[cardKey]) return null
+      if (!homeCards[cardKey]) return null
 
       return (
         <Grid size={size} key={cardKey}>
@@ -292,7 +259,7 @@ const HomePage = () => {
         </Grid>
       )
     },
-    [effectiveHomeCards],
+    [homeCards],
   )
 
   const criticalCards = useMemo(
@@ -308,27 +275,6 @@ const HomePage = () => {
     [current, mutateProfiles, renderCard],
   )
 
-  // 新增：保存设置时用requestIdleCallback/setTimeout
-  const handleSaveSettings = (newCards: HomeCardsSettings) => {
-    if (window.requestIdleCallback) {
-      window.requestIdleCallback(() =>
-        setLocalHomeCards({
-          value: newCards,
-          baseSignature: remoteSignature,
-        }),
-      )
-    } else {
-      setTimeout(
-        () =>
-          setLocalHomeCards({
-            value: newCards,
-            baseSignature: remoteSignature,
-          }),
-        0,
-      )
-    }
-  }
-
   const nonCriticalCards = useMemo(
     () => [
       renderCard(
@@ -369,10 +315,6 @@ const HomePage = () => {
     ],
     [t, renderCard],
   )
-  const dialogKey = useMemo(
-    () => `${serializeCardFlags(effectiveHomeCards)}:${settingsOpen ? 1 : 0}`,
-    [effectiveHomeCards, settingsOpen],
-  )
   return (
     <BasePage
       title={t('home.page.title')}
@@ -408,13 +350,13 @@ const HomePage = () => {
       </Grid>
 
       {/* 首页设置弹窗 */}
-      <HomeSettingsDialog
-        key={dialogKey}
-        open={settingsOpen}
-        onClose={() => setSettingsOpen(false)}
-        homeCards={effectiveHomeCards}
-        onSave={handleSaveSettings}
-      />
+      {settingsOpen && (
+        <HomeSettingsDialog
+          key={serializeCardFlags(homeCards)}
+          onClose={() => setSettingsOpen(false)}
+          homeCards={homeCards}
+        />
+      )}
     </BasePage>
   )
 }