feat(admin): 增加群组列表详情页的展示

server/admin/app/ra/App.tsx

@@ -10,7 +10,7 @@ import jsonServerProvider from 'ra-data-json-server';
 import { authProvider, authStorageKey } from './authProvider';
 import { UserList } from './resources/user';
 import React from 'react';
-import { GroupList } from './resources/group';
+import { GroupList, GroupShow } from './resources/group';
 import { MessageList } from './resources/chat';
 import { FileList } from './resources/file';
 import PersonIcon from '@mui/icons-material/Person';
@@ -77,7 +77,7 @@ export const App = () => (
       name="groups"
       options={{ label: '群组' }}
       list={GroupList}
-      show={ShowGuesser}
+      show={GroupShow}
     />
     <Resource
       icon={AttachFileIcon}

server/admin/app/ra/components/UserField.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ReferenceField, ReferenceFieldProps, TextField } from 'react-admin';
+
+export const UserField: React.FC<Omit<ReferenceFieldProps, 'reference'>> =
+  React.memo((props) => {
+    return (
+      <ReferenceField link="show" {...props} reference="users">
+        <TextField source="nickname" />
+      </ReferenceField>
+    );
+  });
+UserField.displayName = 'UserField';

server/admin/app/ra/resources/group.tsx

@@ -8,9 +8,18 @@ import {
   ArrayField,
   SingleFieldList,
   ChipField,
+  Show,
+  SimpleShowLayout,
+  NumberField,
+  ReferenceField,
+  BooleanField,
+  SelectField,
+  TabbedShowLayout,
+  ImageField,
 } from 'react-admin';
 import React from 'react';
 import { Box } from '@mui/material';
+import { UserField } from '../components/UserField';
 
 const PostListActionToolbar = ({ children, ...props }) => (
   <Box sx={{ alignItems: 'center', display: 'flex' }}>{children}</Box>
@@ -43,3 +52,65 @@ export const GroupList: React.FC = () => (
   </List>
 );
 GroupList.displayName = 'GroupList';
+
+export const GroupShow: React.FC = () => (
+  <Show>
+    <TabbedShowLayout>
+      <TabbedShowLayout.Tab label="概述">
+        <TextField source="id" />
+        <ImageField source="avatar" label="头像" emptyText="(无头像)" />
+        <TextField source="name" label="群组名" />
+        <UserField source="owner" label="所有人" />
+
+        <DateField source="createdAt" label="创建时间" />
+        <DateField source="updatedAt" label="更新时间" />
+        <TextField source="fallbackPermissions" label="默认权限" />
+        <TextField source="config" label="配置信息" />
+      </TabbedShowLayout.Tab>
+
+      {/* 面板 */}
+      <TabbedShowLayout.Tab label="面板">
+        <ArrayField source="panels" label="群组面板">
+          <Datagrid>
+            <TextField source="id" />
+            <TextField source="name" label="面板名" />
+            <SelectField
+              source="type"
+              choices={[
+                { id: 0, name: '文本频道' },
+                { id: 1, name: '面板分组' },
+                { id: 2, name: '插件面板' },
+              ]}
+              label={'面板类型'}
+            />
+            <TextField source="provider" label="面板供应插件" />
+            <TextField source="pluginPanelName" label="插件面板名" />
+            <TextField source="meta" label="面板元信息" />
+            <TextField source="parentId" label="面板父级" />
+          </Datagrid>
+        </ArrayField>
+      </TabbedShowLayout.Tab>
+
+      {/* 身份组 */}
+      <TabbedShowLayout.Tab label="身份组">
+        <ArrayField source="roles" label="身份组">
+          <Datagrid>
+            <TextField source="name" label="名称" />
+            <TextField source="permission" label="权限" />
+          </Datagrid>
+        </ArrayField>
+      </TabbedShowLayout.Tab>
+
+      {/* 成员列表 */}
+      <TabbedShowLayout.Tab label="成员列表">
+        <ArrayField source="members" label="成员列表">
+          <Datagrid>
+            <UserField source="userId" label="成员" />
+            <TextField source="roles" label="角色" />
+          </Datagrid>
+        </ArrayField>
+      </TabbedShowLayout.Tab>
+    </TabbedShowLayout>
+  </Show>
+);
+GroupShow.displayName = 'GroupShow';

server/admin/app/ra/resources/user.tsx

@@ -8,6 +8,7 @@ import {
   ShowButton,
   EditButton,
   SearchInput,
+  ImageField,
 } from 'react-admin';
 import React from 'react';
 import { Box } from '@mui/material';
@@ -33,7 +34,11 @@ export const UserList: React.FC = () => (
       <TextField source="nickname" label="昵称" />
       <TextField source="discriminator" label="标识符" />
       <BooleanField source="temporary" label="是否游客" />
-      <TextField source="avatar" label="头像" />
+      <ImageField
+        sx={{ '.RaImageField-image': { height: 40, width: 40 } }}
+        source="avatar"
+        label="头像"
+      />
       <TextField source="type" label="用户类型" />
       <TextField source="settings" label="用户设置" />
       <DateField source="createdAt" label="创建时间" />

server/admin/app/server/index.ts

@@ -10,9 +10,9 @@ import { apiRouter } from './router/api';
 // 链接数据库
 mongoose.connect(process.env.MONGO_URL!, (error: any) => {
   if (!error) {
-    return console.info('Mongo connected');
+    return console.info('数据库已连接成功');
   }
-  console.error(error);
+  console.error('数据库连接失败', error);
 });
 
 const BUILD_DIR = path.join(process.cwd(), 'build');