perf: 页面渲染优化

src/pages/Admin/Product/Detail/tabs/RolePermDrawer.tsx

@@ -16,6 +16,7 @@ export const RolePermDrawer = ({ roleId, productCode, open, onClose }: RolePermD
   const [saving, setSaving] = useState(false);
   const [allPerms, setAllPerms] = useState<API.PermItem[]>([]);
   const [checkedIds, setCheckedIds] = useState<number[]>([]);
+  const [initialCheckedIds, setInitialCheckedIds] = useState<number[]>([]);
 
   useEffect(() => {
     if (!open) return;
@@ -23,7 +24,9 @@ export const RolePermDrawer = ({ roleId, productCode, open, onClose }: RolePermD
     Promise.all([fetchRoleDetail({ id: roleId }), fetchPermList({ productCode, pageSize: 9999 })])
       .then(([roleRes, permRes]) => {
         setAllPerms(permRes.data ?? []);
-        setCheckedIds(roleRes.data?.permIds ?? []);
+        const ids = roleRes.data?.permIds ?? [];
+        setCheckedIds(ids);
+        setInitialCheckedIds(ids);
       })
       .finally(() => setLoading(false));
   }, [open, roleId, productCode]);
@@ -56,12 +59,15 @@ export const RolePermDrawer = ({ roleId, productCode, open, onClose }: RolePermD
       }
     >
       <Spin spinning={loading}>
-        <PermTree
-          mode="edit"
-          allPerms={allPerms}
-          checkedPermIds={checkedIds}
-          onChange={setCheckedIds}
-        />
+        {!loading && (
+          <PermTree
+            key={roleId}
+            mode="edit"
+            allPerms={allPerms}
+            checkedPermIds={initialCheckedIds}
+            onChange={setCheckedIds}
+          />
+        )}
       </Spin>
     </Drawer>
   );

src/pages/Admin/_shared/PermTree/index.tsx

@@ -1,6 +1,6 @@
 import { useIntl } from '@umijs/max';
 import { Checkbox, Input, Tabs } from 'antd';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { TabContent } from './components/TabContent';
 import { usePermTree } from './hooks/usePermTree';
 
@@ -11,6 +11,8 @@ export interface PermTreeProps {
   onChange?: (ids: number[]) => void;
 }
 
+const TAB_KEYS = ['api', 'data'] as const;
+
 export const PermTree = ({ mode, allPerms, checkedPermIds = [], onChange }: PermTreeProps) => {
   const intl = useIntl();
   const {
@@ -28,10 +30,24 @@ export const PermTree = ({ mode, allPerms, checkedPermIds = [], onChange }: Perm
 
   const [activeTab, setActiveTab] = useState<'api' | 'data'>('api');
 
-  const tabItems = [
-    { key: 'api', label: intl.formatMessage({ id: 'admin.permTree.apiTab' }) },
-    { key: 'data', label: intl.formatMessage({ id: 'admin.permTree.dataTab' }) },
-  ];
+  const tabItems = useMemo(
+    () =>
+      TAB_KEYS.map((key) => ({
+        key,
+        label: intl.formatMessage({ id: `admin.permTree.${key}Tab` }),
+        children: (
+          <TabContent
+            tab={key}
+            filteredGroups={filteredGroups}
+            allGroups={allGroups}
+            checkedIds={checkedIds}
+            mode={mode}
+            onToggle={toggle}
+          />
+        ),
+      })),
+    [intl, filteredGroups, allGroups, checkedIds, mode, toggle],
+  );
 
   return (
     <div className="flex flex-col gap-2">
@@ -59,20 +75,7 @@ export const PermTree = ({ mode, allPerms, checkedPermIds = [], onChange }: Perm
       <Tabs
         activeKey={activeTab}
         onChange={(k) => setActiveTab(k as 'api' | 'data')}
-        items={tabItems.map((t) => ({
-          key: t.key,
-          label: t.label,
-          children: (
-            <TabContent
-              tab={t.key as 'api' | 'data'}
-              filteredGroups={filteredGroups}
-              allGroups={allGroups}
-              checkedIds={checkedIds}
-              mode={mode}
-              onToggle={toggle}
-            />
-          ),
-        }))}
+        items={tabItems}
       />
     </div>
   );

src/pages/Admin/_shared/UserPermDrawer.tsx

@@ -154,12 +154,15 @@ export const UserPermDrawer = ({
           )}
           {productCode && (
             <Spin spinning={loading}>
-              <PermTree
-                mode="edit"
-                allPerms={allPerms}
-                checkedPermIds={checkedIds}
-                onChange={setCheckedIds}
-              />
+              {!loading && (
+                <PermTree
+                  key={productCode}
+                  mode="edit"
+                  allPerms={allPerms}
+                  checkedPermIds={initialCheckedIds}
+                  onChange={setCheckedIds}
+                />
+              )}
             </Spin>
           )}
         </>