refactor: extract PermissionList into independent component

client/web/src/components/PermissionList.tsx

@@ -0,0 +1,98 @@
+import { Col, Divider, Row, Switch } from 'antd';
+import React from 'react';
+import { getPermissionList, t, useEvent } from 'tailchat-shared';
+import _uniq from 'lodash/uniq';
+import _without from 'lodash/without';
+import { pluginPermission } from '@/plugin/common';
+
+interface PermissionListProps {
+  value: string[];
+  onChange: (value: string[]) => void;
+}
+export const PermissionList: React.FC<PermissionListProps> = React.memo(
+  (props) => {
+    const handleSwitchPermission = useEvent(
+      (permissionKey: string, enabled: boolean) => {
+        if (enabled) {
+          props.onChange(_uniq([...props.value, permissionKey]));
+        } else {
+          props.onChange(_without(props.value, permissionKey));
+        }
+      }
+    );
+
+    return (
+      <div>
+        {/* 权限详情 */}
+        {getPermissionList().map((p) => (
+          <PermissionItem
+            key={p.key}
+            title={p.title}
+            desc={p.desc}
+            disabled={
+              p.required
+                ? !p.required.every((r) => props.value.includes(r))
+                : undefined
+            }
+            checked={props.value.includes(p.key)}
+            onChange={(checked) => handleSwitchPermission(p.key, checked)}
+          />
+        ))}
+
+        {pluginPermission.length > 0 && (
+          <>
+            <Divider>{t('以下为插件权限')}</Divider>
+
+            {/* 权限详情 */}
+            {pluginPermission.map((p) => (
+              <PermissionItem
+                key={p.key}
+                title={p.title}
+                desc={p.desc}
+                disabled={
+                  p.required
+                    ? !p.required.every((r) => props.value.includes(r))
+                    : undefined
+                }
+                checked={props.value.includes(p.key)}
+                onChange={(checked) => handleSwitchPermission(p.key, checked)}
+              />
+            ))}
+          </>
+        )}
+      </div>
+    );
+  }
+);
+PermissionList.displayName = 'PermissionList';
+
+interface PermissionItemProps {
+  title: string;
+  desc?: string;
+  disabled?: boolean;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}
+
+const PermissionItem: React.FC<PermissionItemProps> = React.memo((props) => {
+  return (
+    <div className="mx-2 py-3 border-b border-white border-opacity-20">
+      <Row>
+        <Col flex={1} className="font-bold">
+          {props.title}
+        </Col>
+
+        <Col>
+          <Switch
+            disabled={props.disabled}
+            checked={props.checked}
+            onChange={props.onChange}
+          />
+        </Col>
+      </Row>
+
+      <div className="text-gray-400">{props.desc}</div>
+    </div>
+  );
+});
+PermissionItem.displayName = 'PermissionItem';

client/web/src/components/modals/GroupDetail/Role/PermissionItem.tsx

@@ -1,35 +0,0 @@
-import { Col, Row, Switch } from 'antd';
-import React from 'react';
-
-interface PermissionItemProps {
-  title: string;
-  desc?: string;
-  disabled?: boolean;
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-}
-
-export const PermissionItem: React.FC<PermissionItemProps> = React.memo(
-  (props) => {
-    return (
-      <div className="mx-2 py-3 border-b border-white border-opacity-20">
-        <Row>
-          <Col flex={1} className="font-bold">
-            {props.title}
-          </Col>
-
-          <Col>
-            <Switch
-              disabled={props.disabled}
-              checked={props.checked}
-              onChange={props.onChange}
-            />
-          </Col>
-        </Row>
-
-        <div className="text-gray-400">{props.desc}</div>
-      </div>
-    );
-  }
-);
-PermissionItem.displayName = 'PermissionItem';

client/web/src/components/modals/GroupDetail/Role/tabs/permission.tsx

@@ -1,10 +1,9 @@
 import { AllPermission, getPermissionList } from 'tailchat-shared';
-import { Button, Divider } from 'antd';
+import { Button } from 'antd';
 import React, { useCallback, useMemo } from 'react';
 import { model, t } from 'tailchat-shared';
-import { PermissionItem } from '../PermissionItem';
 import { useModifyPermission } from '../useModifyPermission';
-import { pluginPermission } from '@/plugin/common';
+import { PermissionList } from '@/components/PermissionList';
 
 interface RolePermissionProps {
   roleId: typeof AllPermission | string;
@@ -22,12 +21,8 @@ export const RolePermission: React.FC<RolePermissionProps> = React.memo(
       return props.currentRoleInfo?.permissions ?? [];
     }, [props.roleId, props.fallbackPermissions, props.currentRoleInfo]);
 
-    const {
+    const { isEditing, editingPermission, setEditingPermission } =
-      isEditing,
+      useModifyPermission(currentRolePermissions);
-      editingPermission,
-      setEditingPermission,
-      handleSwitchPermission,
-    } = useModifyPermission(currentRolePermissions);
 
     const handleResetPermission = useCallback(() => {
       setEditingPermission(
@@ -51,43 +46,10 @@ export const RolePermission: React.FC<RolePermissionProps> = React.memo(
           </Button>
         </div>
 
-        {/* 权限详情 */}
+        <PermissionList
-        {getPermissionList().map((p) => (
+          value={editingPermission}
-          <PermissionItem
+          onChange={setEditingPermission}
-            key={p.key}
-            title={p.title}
-            desc={p.desc}
-            disabled={
-              p.required
-                ? !p.required.every((r) => editingPermission.includes(r))
-                : undefined
-            }
-            checked={editingPermission.includes(p.key)}
-            onChange={(checked) => handleSwitchPermission(p.key, checked)}
-          />
-        ))}
-
-        {pluginPermission.length > 0 && (
-          <>
-            <Divider>{t('以下为插件权限')}</Divider>
-
-            {/* 权限详情 */}
-            {pluginPermission.map((p) => (
-              <PermissionItem
-                key={p.key}
-                title={p.title}
-                desc={p.desc}
-                disabled={
-                  p.required
-                    ? !p.required.every((r) => editingPermission.includes(r))
-                    : undefined
-                }
-                checked={editingPermission.includes(p.key)}
-                onChange={(checked) => handleSwitchPermission(p.key, checked)}
         />
-            ))}
-          </>
-        )}
       </div>
     );
   }

client/web/src/components/modals/GroupDetail/Role/useModifyPermission.ts

@@ -1,8 +1,5 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import _isEqual from 'lodash/isEqual';
-import _uniq from 'lodash/uniq';
-import _without from 'lodash/without';
-import { useAsyncFn } from 'tailchat-shared';
 
 /**
  * 权限编辑
@@ -18,21 +15,9 @@ export function useModifyPermission(originPermission: string[]) {
     setEditingPermission([...originPermission]);
   }, [originPermission]);
 
-  const handleSwitchPermission = useCallback(
-    (permissionKey: string, enabled: boolean) => {
-      if (enabled) {
-        setEditingPermission(_uniq([...editingPermission, permissionKey]));
-      } else {
-        setEditingPermission(_without(editingPermission, permissionKey));
-      }
-    },
-    [editingPermission]
-  );
-
   return {
     isEditing,
     editingPermission,
     setEditingPermission,
-    handleSwitchPermission,
   };
 }