feat(admin): add operate which can add group member

server/admin/src/client/App.tsx

@@ -25,11 +25,11 @@ import { Dashboard } from './components/Dashboard';
 import {
   discoverFields,
   fileFields,
-  groupFields,
   mailFields,
   messageFields,
 } from './fields';
 import { i18n } from './i18n';
+import { GroupList } from './resources/group';
 import { UserList } from './resources/user';
 import { CacheManager } from './routes/cache';
 import { TailchatNetwork } from './routes/network';
@@ -70,21 +70,7 @@ function App() {
         }
       />
 
-      <Resource
-        name="groups"
-        icon={<IconUserGroup />}
-        list={
-          <ListTable
-            filter={[
-              createTextField('q', {
-                label: 'Search',
-              }),
-            ]}
-            fields={groupFields}
-            action={{ detail: true, edit: true, delete: true, export: true }}
-          />
-        }
-      />
+      <Resource name="groups" icon={<IconUserGroup />} list={<GroupList />} />
 
       <Resource
         name="file"

server/admin/src/client/i18n.ts

@@ -29,6 +29,10 @@ export const i18n: TushanContextProps['i18n'] = {
               'Banning a user disconnects the user from the current connection and prevents future logins',
             unbanUser: 'Unban User',
             unbanUserDesc: 'After lifting the ban, the user can login normally',
+            addGroupMember: 'Add Group Member',
+            addGroupMemberTitle: 'Select Member and append into group member',
+            addGroupMemberRequiredTip: 'You need select group member',
+            selectUser: 'Select User',
           },
           dashboard: {
             file: 'File',
@@ -209,6 +213,10 @@ export const i18n: TushanContextProps['i18n'] = {
             banUserDesc: '封禁用户会将用户从当前连接断开并阻止之后的登录操作',
             unbanUser: '解除封禁用户',
             unbanUserDesc: '解除封禁后用户可以正常登录',
+            addGroupMember: '增加群组成员',
+            addGroupMemberTitle: '选择用户并添加为群组成员',
+            addGroupMemberRequiredTip: '你需要选择用户',
+            selectUser: '选择用户',
           },
           dashboard: {
             file: '文件',

server/admin/src/client/request.ts

@@ -27,3 +27,15 @@ function createRequest() {
 }
 
 export const request = createRequest();
+
+export async function callAction(
+  actionName: string,
+  params: Record<string, any>
+) {
+  const { data } = await request.post('/callAction', {
+    action: actionName,
+    params,
+  });
+
+  return data;
+}

server/admin/src/client/resources/group.tsx

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import {
+  createTextField,
+  Identifier,
+  ListTable,
+  Message,
+  Modal,
+  ReferenceFieldEdit,
+  useEvent,
+  useTranslation,
+} from 'tushan';
+import { groupFields } from '../fields';
+import { callAction } from '../request';
+
+export const GroupList: React.FC = React.memo(() => {
+  const { t } = useTranslation();
+  const [modal, contextHolder] = Modal.useModal();
+  return (
+    <>
+      {contextHolder}
+      <ListTable
+        filter={[
+          createTextField('q', {
+            label: 'Search',
+          }),
+        ]}
+        fields={groupFields}
+        action={{
+          detail: true,
+          edit: true,
+          delete: true,
+          export: true,
+          custom: (record) => [
+            {
+              key: 'addGroupMember',
+              label: t('custom.action.addGroupMember'),
+              onClick: () => {
+                let userId: Identifier;
+                const { close } = modal.confirm({
+                  title: t('custom.action.addGroupMemberTitle'),
+                  content: (
+                    <div>
+                      <div>{t('custom.action.selectUser')}:</div>
+                      <UserSelector onChange={(val) => (userId = val)} />
+                    </div>
+                  ),
+                  onOk: async () => {
+                    if (!userId) {
+                      Message.error(
+                        t('custom.action.addGroupMemberRequiredTip')
+                      );
+                      return;
+                    }
+
+                    try {
+                      await callAction('group.addMember', {
+                        groupId: record.id,
+                        userId,
+                      });
+                      Message.success(t('tushan.common.success'));
+                      close();
+                    } catch (err) {
+                      console.error(err);
+                      Message.error(String(err));
+                    }
+                  },
+                });
+              },
+            },
+          ],
+        }}
+      />
+    </>
+  );
+});
+GroupList.displayName = 'GroupList';
+
+export const UserSelector: React.FC<{ onChange: (val: Identifier) => void }> =
+  React.memo((props) => {
+    const [userId, setUserId] = useState<Identifier>('');
+
+    const handleChange = useEvent((val: Identifier) => {
+      setUserId(val);
+      props.onChange(val);
+    });
+
+    return (
+      <ReferenceFieldEdit
+        value={userId}
+        onChange={handleChange}
+        options={{
+          displayField: 'nickname',
+          reference: 'users',
+        }}
+      />
+    );
+  });
+UserSelector.displayName = 'UserSelector';

server/admin/src/server/router/api.ts

@@ -8,6 +8,7 @@ import { fileRouter } from './file';
 import dayjs from 'dayjs';
 import userModel from '../../../../models/user/user';
 import messageModel from '../../../../models/chat/message';
+import groupModel from '../../../../models/group/group';
 import { raExpressMongoose } from '../middleware/express-mongoose-ra-json-server';
 import { cacheRouter } from './cache';
 import discoverModel from '../../../../plugins/com.msgbyte.discover/models/discover';
@@ -50,6 +51,13 @@ router.use('/config', configRouter);
 router.use('/file', fileRouter);
 router.use('/cache', cacheRouter);
 
+router.post('/callAction', auth(), async (req, res) => {
+  const { action, params } = req.body;
+  const ret = await callBrokerAction(action, params);
+
+  res.json(ret);
+});
+
 router.get('/user/count/summary', auth(), async (req, res) => {
   // 返回最近14天的用户数统计
   const day = 14;