feat: 增加更多的资源(message/group/file)

pnpm-lock.yaml

@@ -894,6 +894,7 @@ importers:
 
   server/admin:
     specifiers:
+      '@mui/icons-material': ^5.11.0
       '@mui/material': ^5.11.3
       '@remix-run/dev': ^1.9.0
       '@remix-run/express': ^1.9.0
@@ -921,6 +922,7 @@ importers:
       ts-node: ^10.9.1
       typescript: ^4.8.4
     dependencies:
+      '@mui/icons-material': 5.11.0_oiuuhmk4wjjpe4qb2sby7usney
       '@mui/material': 5.11.3_ib3m5ricvtkl2cll7qpr2f6lvq
       '@remix-run/express': 1.9.0_cwk4saenierp7pa7l5cpbeswge
       '@remix-run/node': 1.9.0_biqbaboplfbrettd7655fr4n2y
@@ -7750,7 +7752,7 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.20.7
-      '@mui/material': 5.11.3_dqge6ix3sjwueqhzcenpc5wc2q
+      '@mui/material': 5.11.3_ib3m5ricvtkl2cll7qpr2f6lvq
       '@types/react': 18.0.26
       react: 18.2.0
     dev: false

server/admin/app/ra/App.tsx

@@ -10,6 +10,12 @@ import jsonServerProvider from 'ra-data-json-server';
 import { authProvider } from './authProvider';
 import { UserList } from './resources/user';
 import React from 'react';
+import { GroupList } from './resources/group';
+import { MessageList } from './resources/chat';
+import PersonIcon from '@mui/icons-material/Person';
+import MessageIcon from '@mui/icons-material/Message';
+import GroupIcon from '@mui/icons-material/Group';
+import AttachFileIcon from '@mui/icons-material/AttachFile';
 
 const httpClient: typeof fetchUtils.fetchJson = (url, options = {}) => {
   try {
@@ -38,10 +44,32 @@ export const App = () => (
     dataProvider={dataProvider}
   >
     <Resource
+      icon={PersonIcon}
       name="users"
       options={{ label: '用户管理' }}
       list={UserList}
       show={ShowGuesser}
     />
+    <Resource
+      icon={MessageIcon}
+      name="messages"
+      options={{ label: '聊天信息' }}
+      list={MessageList}
+      show={ShowGuesser}
+    />
+    <Resource
+      icon={GroupIcon}
+      name="groups"
+      options={{ label: '群组' }}
+      list={GroupList}
+      show={ShowGuesser}
+    />
+    <Resource
+      icon={AttachFileIcon}
+      name="file"
+      options={{ label: '文件' }}
+      list={ListGuesser}
+      show={ShowGuesser}
+    />
   </Admin>
 );

server/admin/app/ra/authProvider.ts

@@ -27,7 +27,7 @@ export const authProvider: AuthProvider = {
   getIdentity: () =>
     Promise.resolve({
       id: 'user',
-      fullName: 'John Doe',
+      fullName: 'Admin',
     }),
   getPermissions: () => Promise.resolve(''),
 };

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import {
+  BooleanField,
+  Datagrid,
+  DateField,
+  List,
+  ReferenceField,
+  TextField,
+  SearchInput,
+} from 'react-admin';
+
+export const MessageList: React.FC = () => (
+  <List filters={[<SearchInput key="search" source="q" alwaysOn />]}>
+    <Datagrid rowClick="show">
+      <TextField source="id" label="ID" sortable={true} sortByOrder="DESC" />
+      <TextField source="content" label="内容" />
+      <TextField source="author" label="作者" />
+      <ReferenceField source="groupId" reference="groups" label="群组ID" />
+      <TextField source="converseId" label="会话ID" />
+      <BooleanField source="hasRecall" label="撤回" />
+      <TextField source="reactions" label="消息反应" />
+      <DateField source="createdAt" label="创建时间" />
+    </Datagrid>
+  </List>
+);
+MessageList.displayName = 'MessageList';

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

@@ -0,0 +1,51 @@
+import {
+  Datagrid,
+  DateField,
+  List,
+  TextField,
+  ShowButton,
+  EditButton,
+  SearchInput,
+  ArrayField,
+  SingleFieldList,
+  ChipField,
+} from 'react-admin';
+import React from 'react';
+import { Box } from '@mui/material';
+
+const PostListActionToolbar = ({ children, ...props }) => (
+  <Box sx={{ alignItems: 'center', display: 'flex' }}>{children}</Box>
+);
+
+export const GroupList: React.FC = () => (
+  <List filters={[<SearchInput key="search" source="q" alwaysOn />]}>
+    <Datagrid>
+      <TextField
+        source="id"
+        label="群组ID"
+        sortable={true}
+        sortByOrder="DESC"
+      />
+      <TextField source="name" label="群组名称" />
+      <TextField source="owner" label="管理员" />
+      <TextField source="members.length" label="成员数量" />
+      <ArrayField source="panels" label="面板">
+        <SingleFieldList>
+          <ChipField source="name" />
+        </SingleFieldList>
+      </ArrayField>
+      <ArrayField source="roles" label="角色">
+        <SingleFieldList>
+          <ChipField source="name" />
+        </SingleFieldList>
+      </ArrayField>
+      <TextField source="fallbackPermissions" label="默认权限" />
+      <DateField source="createdAt" label="创建时间" />
+      <PostListActionToolbar>
+        <ShowButton />
+        <EditButton />
+      </PostListActionToolbar>
+    </Datagrid>
+  </List>
+);
+GroupList.displayName = 'GroupList';

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

@@ -19,17 +19,16 @@ const PostListActionToolbar = ({ children, ...props }) => (
 export const UserList: React.FC = () => (
   <List filters={[<SearchInput key="search" source="q" alwaysOn />]}>
     <Datagrid>
-      <TextField source="id" />
+      <TextField source="id" label="用户ID" sortByOrder="DESC" />
-      <EmailField source="email" />
+      <EmailField source="email" label="邮箱" />
-      <TextField source="nickname" />
+      <TextField source="nickname" label="昵称" />
-      <TextField source="discriminator" />
+      <TextField source="discriminator" label="标识符" />
-      <BooleanField source="temporary" />
+      <BooleanField source="temporary" label="是否游客" />
-      <TextField source="avatar" />
+      <TextField source="avatar" label="头像" />
-      <TextField source="type" />
+      <TextField source="type" label="用户类型" />
-      <TextField source="password" />
+      <TextField source="password" label="密码" />
-      <TextField source="settings" />
+      <TextField source="settings" label="用户设置" />
-      <DateField source="createdAt" />
+      <DateField source="createdAt" label="创建时间" />
-      <DateField source="updatedAt" />
       <PostListActionToolbar>
         <ShowButton />
         <EditButton />

server/admin/app/server/index.ts

@@ -0,0 +1,32 @@
+import { Router } from 'express';
+import raExpressMongoose from 'express-mongoose-ra-json-server';
+
+const router = Router();
+
+router.use(
+  '/users',
+  raExpressMongoose(require('../../../models/user/user').default, {
+    q: ['nickname', 'email'],
+  })
+);
+router.use(
+  '/messages',
+  raExpressMongoose(require('../../../models/chat/message').default, {
+    q: ['content'],
+    allowedRegexFields: ['content'],
+  })
+);
+router.use(
+  '/groups',
+  raExpressMongoose(require('../../../models/group/group').default, {
+    q: ['name'],
+  })
+);
+router.use(
+  '/file',
+  raExpressMongoose(require('../../../models/file').default, {
+    q: ['objectName'],
+  })
+);
+
+export { router };

server/admin/nodemon.json

@@ -1,6 +1,6 @@
 {
   "verbose": true,
-  "watch": ["./server.ts"],
+  "watch": ["./server.ts", "./app/server/*"],
   "ext": "ts",
   "delay": 1000,
   "exec": "ts-node ./server.ts"

server/admin/package.json

@@ -11,6 +11,7 @@
     "typecheck": "tsc -b"
   },
   "dependencies": {
+    "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.3",
     "@remix-run/express": "^1.9.0",
     "@remix-run/node": "^1.9.0",

server/admin/server.ts

@@ -1,11 +1,11 @@
 import path from 'path';
-import express, { Router } from 'express';
+import express from 'express';
 import compression from 'compression';
 import morgan from 'morgan';
 import { createRequestHandler } from '@remix-run/express';
-import raExpressMongoose from 'express-mongoose-ra-json-server';
 import mongoose from 'mongoose';
 import dotenv from 'dotenv';
+import { router } from './app/server/index';
 dotenv.config();
 
 // 链接数据库
@@ -37,15 +37,6 @@ app.use(express.static('public', { maxAge: '1h' }));
 
 app.use(morgan('tiny'));
 
-const router = Router();
-
-router.use(
-  '/users',
-  raExpressMongoose(require('../models/user/user').default, {
-    q: ['nickname', 'email'],
-  })
-);
-
 app.use('/admin/api', router);
 
 app.all(
@@ -68,7 +59,9 @@ app.all(
 const port = process.env.PORT || 3000;
 
 app.listen(port, () => {
-  console.log(`Express server listening on port ${port}`);
+  console.log(
+    `Express server listening on port ${port}, visit with: http://localhost:${port}/admin/`
+  );
 });
 
 function purgeRequireCache() {