feat: add group panel permission filter in permission

client/shared/utils/role-helper.ts

@@ -1,3 +1,4 @@
+import { GroupPanelType } from 'tailchat-types';
 import { model, t } from '..';
 
 /**
@@ -28,6 +29,15 @@ export interface PermissionItemType {
    * 是否依赖其他权限点
    */
   required?: string[];
+  /**
+   * 面板权限
+   * 如果是内置类型(数字) 则仅会在规定的类型中展示
+   * 如果是字符串数组则仅会在特定的插件面板中显示
+   * 如果不传则视为不适用于面板
+   *
+   * @default undefined
+   */
+  panel?: boolean | (string | GroupPanelType)[];
 }
 
 export const PERMISSION = {
@@ -55,6 +65,7 @@ export const getPermissionList = (): PermissionItemType[] => [
     title: t('发送消息'),
     desc: t('允许成员在文字频道发送消息'),
     default: true,
+    panel: [GroupPanelType.TEXT],
   },
   {
     key: PERMISSION.core.invite,

client/web/src/components/PermissionList.tsx

@@ -1,11 +1,21 @@
 import { Col, Divider, Row, Switch } from 'antd';
 import React from 'react';
-import { getPermissionList, t, useEvent } from 'tailchat-shared';
+import {
+  getPermissionList,
+  GroupPanelType,
+  PermissionItemType,
+  t,
+  useEvent,
+} from 'tailchat-shared';
 import _uniq from 'lodash/uniq';
 import _without from 'lodash/without';
 import { pluginPermission } from '@/plugin/common';
 
 interface PermissionListProps {
+  /**
+   * 面板类型，如果没传说明是群组，则展示所有的
+   */
+  panelType?: string | GroupPanelType.TEXT | GroupPanelType.GROUP;
   value: string[];
   onChange: (value: string[]) => void;
 }
@@ -21,10 +31,46 @@ export const PermissionList: React.FC<PermissionListProps> = React.memo(
       }
     );
 
+    const panelPermissionFilterFn = useEvent(
+      (permissionInfo: PermissionItemType) => {
+        if (typeof props.panelType === 'undefined') {
+          // 如果不传则无限制
+          return true;
+        }
+
+        if (!permissionInfo.panel) {
+          // 没有定义面板信息，则该权限不适用于面板策略
+          return false;
+        }
+
+        if (permissionInfo.panel === true) {
+          return true;
+        }
+
+        if (Array.isArray(permissionInfo.panel)) {
+          return permissionInfo.panel.includes(props.panelType);
+        }
+      }
+    );
+
+    const builtinPermissionList = getPermissionList().filter(
+      panelPermissionFilterFn
+    );
+    const pluginPermissionList = pluginPermission.filter(
+      panelPermissionFilterFn
+    );
+
+    if (
+      builtinPermissionList.length === 0 &&
+      pluginPermissionList.length === 0
+    ) {
+      return <div className="text-center">{t('暂无可用的权限项')}</div>;
+    }
+
     return (
       <div>
         {/* 权限详情 */}
-        {getPermissionList().map((p) => (
+        {builtinPermissionList.map((p) => (
           <PermissionItem
             key={p.key}
             title={p.title}
@@ -39,7 +85,7 @@ export const PermissionList: React.FC<PermissionListProps> = React.memo(
           />
         ))}
 
-        {pluginPermission.length > 0 && (
+        {pluginPermissionList.length > 0 && (
           <>
             <Divider>{t('以下为插件权限')}</Divider>
 

client/web/src/components/modals/GroupPanel/AdvanceGroupPanelPermission.tsx

@@ -1,16 +1,17 @@
 import { PermissionList } from '@/components/PermissionList';
 import { Button } from 'antd';
 import clsx from 'clsx';
-import React, { PropsWithChildren, useState } from 'react';
+import React, { PropsWithChildren, useMemo, useState } from 'react';
 import {
   ALL_PERMISSION,
   getDefaultPermissionList,
+  GroupPanelType,
   t,
   useAppSelector,
   useEvent,
   useLazyValue,
 } from 'tailchat-shared';
-import _isEqual from 'lodash/isEqual';
+import { LoadingSpinner } from '@/components/LoadingSpinner';
 
 interface AdvanceGroupPanelPermissionProps {
   height?: number;
@@ -32,10 +33,15 @@ export const AdvanceGroupPanelPermission: React.FC<AdvanceGroupPanelPermissionPr
       return groupInfo.roles;
     });
 
+    const panelInfo = useAppSelector((state) => {
+      const groupInfo = state.group.groups[props.groupId];
+      const panelInfo = groupInfo.panels.find((p) => p.id === props.panelId);
+
+      return panelInfo;
+    });
+
     const permissionMap: Record<string | typeof ALL_PERMISSION, string[]> =
-      useAppSelector((state) => {
-        const groupInfo = state.group.groups[props.groupId];
-        const panelInfo = groupInfo.panels.find((p) => p.id === props.panelId);
+      useMemo(() => {
         if (!panelInfo) {
           return { [ALL_PERMISSION]: getDefaultPermissionList() };
         } else {
@@ -45,7 +51,7 @@ export const AdvanceGroupPanelPermission: React.FC<AdvanceGroupPanelPermissionPr
             ...panelInfo.permissionMap,
           };
         }
-      }, _isEqual);
+      }, [panelInfo]);
 
     const [editPermissionMap, setEditPermissionMap] = useLazyValue(
       permissionMap,
@@ -64,6 +70,10 @@ export const AdvanceGroupPanelPermission: React.FC<AdvanceGroupPanelPermissionPr
       props.onChange(undefined);
     });
 
+    if (!panelInfo) {
+      return <LoadingSpinner />;
+    }
+
     return (
       <div className="flex" style={{ width: 540 }}>
         <div>
@@ -88,6 +98,11 @@ export const AdvanceGroupPanelPermission: React.FC<AdvanceGroupPanelPermissionPr
             <Button onClick={handleSyncWithGroup}>{t('与群组配置同步')}</Button>
           </div>
           <PermissionList
+            panelType={
+              panelInfo.type === GroupPanelType.PLUGIN
+                ? panelInfo.pluginPanelName
+                : panelInfo.type
+            }
             value={editPermissionMap[selectedRoleId] ?? []}
             onChange={handleUpdatePermissionMap}
           />