feat: 增加身份组基本框架

shared/i18n/langs/en-US/translation.json

@@ -16,6 +16,7 @@
   "k1bd56481": "Close independent window",
   "k1cbe2507": "Confirm",
   "k206eff71": "Nickname can not be blank",
+  "k21ee7a1f": "Roles",
   "k23a3bd72": "Abnormal",
   "k2426e452": "Friend Service",
   "k2488f9ee": "Friend Request",
@@ -88,7 +89,9 @@
   "k68283d04": "Application sent",
   "k685a1e78": "Copied to clipboard",
   "k6b5e7ffe": "The current panel has been opened in a separate window",
+  "k6c29eece": "Allows members to send message in text channels",
   "k6c75d61f": "Modify group avatar success",
+  "k6eac768d": "Add Members",
   "k6fb230da": "Pending friend request",
   "k6fc3abcd": "Enter now",
   "k7173d09e": "Account",
@@ -155,6 +158,7 @@
   "kb2217aa7": "Currently using a temporary account, <2>claim now</2>",
   "kb3390ae7": "Are you sure you want to leave the group?",
   "kb47a9aa4": "Password can not be empty",
+  "kb488372f": "All",
   "kb55c8dba": "Invite Member",
   "kb5a17e73": "Leave group",
   "kb6f1c83f": "What do you want to call you?",

shared/i18n/langs/zh-CN/translation.json

@@ -16,6 +16,7 @@
   "k1bd56481": "关闭独立窗口",
   "k1cbe2507": "确认",
   "k206eff71": "昵称不能为空",
+  "k21ee7a1f": "身份组",
   "k23a3bd72": "异常",
   "k2426e452": "好友服务",
   "k2488f9ee": "申请好友",
@@ -88,7 +89,9 @@
   "k68283d04": "已发送申请",
   "k685a1e78": "已复制到剪切板",
   "k6b5e7ffe": "当前面板已在独立窗口打开",
+  "k6c29eece": "允许成员在文字频道发送消息",
   "k6c75d61f": "修改群组头像成功",
+  "k6eac768d": "添加角色",
   "k6fb230da": "等待处理的好友请求",
   "k6fc3abcd": "立即进入",
   "k7173d09e": "账户信息",
@@ -155,6 +158,7 @@
   "kb2217aa7": "当前使用的是一个临时账号, <2>立即认领</2>",
   "kb3390ae7": "确定要退出群组么?",
   "kb47a9aa4": "密码不能为空",
+  "kb488372f": "所有人",
   "kb55c8dba": "邀请成员",
   "kb5a17e73": "退出群组",
   "kb6f1c83f": "想要让大家如何称呼你",

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

@@ -0,0 +1,28 @@
+import { Col, Row, Switch } from 'antd';
+import React from 'react';
+
+interface PermissionItemProps {
+  title: string;
+  desc?: string;
+}
+
+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 />
+          </Col>
+        </Row>
+
+        <div className="text-gray-400">{props.desc}</div>
+      </div>
+    );
+  }
+);
+PermissionItem.displayName = 'PermissionItem';

web/src/components/modals/GroupDetail/Role/RoleItem.tsx

@@ -0,0 +1,20 @@
+import clsx from 'clsx';
+import React from 'react';
+
+export const RoleItem: React.FC<{
+  active: boolean;
+}> = React.memo((props) => {
+  return (
+    <div
+      className={clsx(
+        'px-2 py-1 rounded cursor-pointer mb-1 hover:bg-black hover:bg-opacity-20',
+        {
+          'bg-black bg-opacity-20': props.active,
+        }
+      )}
+    >
+      {props.children}
+    </div>
+  );
+});
+RoleItem.displayName = 'RoleItem';

web/src/components/modals/GroupDetail/Role/index.tsx

@@ -0,0 +1,59 @@
+import { IconBtn } from '@/components/IconBtn';
+import { PillTabPane, PillTabs } from '@/components/PillTabs';
+import { UserListItem } from '@/components/UserListItem';
+import { Button } from 'antd';
+import React, { useCallback } from 'react';
+import { t, useGroupInfo } from 'tailchat-shared';
+import { PermissionItem } from './PermissionItem';
+import { RoleItem } from './RoleItem';
+
+interface GroupPermissionProps {
+  groupId: string;
+}
+export const GroupRole: React.FC<GroupPermissionProps> = React.memo((props) => {
+  const { groupId } = props;
+  const groupInfo = useGroupInfo(groupId);
+  const members = groupInfo?.members ?? [];
+
+  const handleAddMember = useCallback(() => {}, []);
+
+  return (
+    <div className="flex h-full">
+      <div className="pr-2 mr-2 w-40 border-r border-white border-opacity-20">
+        {/* 角色列表 */}
+        <RoleItem active={true}>{t('所有人')}</RoleItem>
+
+        <RoleItem active={false}>{t('添加角色')}</RoleItem>
+      </div>
+
+      <div className="flex-1 overflow-y-auto">
+        <PillTabs>
+          <PillTabPane key="permission" tab="权限">
+            {/* 权限详情 */}
+            <PermissionItem
+              title={t('发送消息')}
+              desc={t('允许成员在文字频道发送消息')}
+            />
+          </PillTabPane>
+          <PillTabPane key="member" tab="管理成员">
+            {/* 管理成员 */}
+            <div className="text-right mb-2">
+              <Button type="primary" onClick={handleAddMember}>
+                添加成员
+              </Button>
+            </div>
+
+            {members.map((m) => (
+              <UserListItem
+                key={m.userId}
+                userId={m.userId}
+                actions={[<IconBtn key="remove" icon="mdi:close" />]}
+              />
+            ))}
+          </PillTabPane>
+        </PillTabs>
+      </div>
+    </div>
+  );
+});
+GroupRole.displayName = 'GroupRole';

web/src/components/modals/GroupDetail/index.tsx

@@ -9,6 +9,7 @@ import { pluginCustomPanel } from '@/plugin/common';
 import React, { useCallback, useMemo } from 'react';
 import { t } from 'tailchat-shared';
 import { GroupPanel } from './Panel';
+import { GroupRole } from './Role';
 import { GroupSummary } from './Summary';
 
 interface SettingsViewProps {
@@ -43,6 +44,12 @@ export const GroupDetail: React.FC<SettingsViewProps> = React.memo((props) => {
             title: t('面板'),
             content: <GroupPanel groupId={groupId} />,
           },
+          {
+            type: 'item',
+            title: t('身份组'),
+            isDev: true,
+            content: <GroupRole groupId={groupId} />,
+          },
         ],
       },
     ];

web/src/routes/Panel/index.tsx

@@ -5,6 +5,7 @@ import { MainProvider } from '../Main/Provider';
 import { t } from 'tailchat-shared';
 import { PersonalConverse } from '../Main/Content/Personal/Converse';
 import { GroupPanelRoute } from '../Main/Content/Group/Panel';
+import { GroupDetail } from '@/components/modals/GroupDetail';
 
 const PanelRoute: React.FC = React.memo(() => {
   useRecordMeasure('AppRouteRenderStart');
@@ -18,6 +19,16 @@ const PanelRoute: React.FC = React.memo(() => {
             path="/panel/personal/converse/:converseId"
             component={PersonalConverse}
           />
+          <Route
+            exact={true}
+            path="/panel/group/:groupId/detail"
+            render={(props) => (
+              <GroupDetail
+                groupId={props.match.params.groupId}
+                onClose={() => {}}
+              />
+            )}
+          />
           <Route
             exact={true}
             path="/panel/group/:groupId/:panelId"