feat(admin): add basic system config

server/admin/app/ra/App.tsx

@@ -18,6 +18,7 @@ import { TailchatLayout } from './layout';
 import { i18nProvider } from './i18n/index';
 import { httpClient } from './request';
 import { SocketIOAdmin } from './routes/socketio';
+import { SystemConfig } from './routes/system';
 
 const dataProvider = jsonServerProvider(
   // 'https://jsonplaceholder.typicode.com'
@@ -65,6 +66,7 @@ export const App = () => (
 
     <CustomRoutes>
       {/* 添加完毕以后还需要到 layout/Menu 增加侧边栏 */}
+      <Route path="/system" element={<SystemConfig />} />
       <Route path="/network" element={<TailchatNetwork />} />
       <Route path="/socketio" element={<SocketIOAdmin />} />
     </CustomRoutes>

server/admin/app/ra/i18n/custom.ts

@@ -11,6 +11,7 @@ export const englishCustom = {
     menu: {
       network: 'Tailchat Network',
       socket: 'Socket.IO TCP',
+      system: 'System Config',
     },
     dashboard: {
       welcomeTitle: 'Welcome to Tailchat Admin',
@@ -61,6 +62,10 @@ export const englishCustom = {
       tip2: 'The account password is the account password of Tailchat Admin',
       btn: 'Open the Admin platform',
     },
+    config: {
+      uploadFileLimit: 'Upload file limit (KB)',
+      emailVerification: 'Mandatory Email Verification',
+    },
   },
 };
 
@@ -77,6 +82,7 @@ export const chineseCustom = {
     menu: {
       network: 'Tailchat 网络',
       socket: 'Socket.IO 长链接',
+      system: '系统设置',
     },
     dashboard: {
       welcomeTitle: '欢迎使用 Tailchat 后台管理程序',
@@ -125,5 +131,9 @@ export const chineseCustom = {
       tip2: '账号密码为Tailchat后台的账号密码',
       btn: '打开管理平台',
     },
+    config: {
+      uploadFileLimit: '上传文件限制(KB)',
+      emailVerification: '邮箱强制验证',
+    },
   },
 };

server/admin/app/ra/layout/Menu.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react-admin';
 import FilterDramaIcon from '@mui/icons-material/FilterDrama';
 import LinkIcon from '@mui/icons-material/Link';
+import SettingsIcon from '@mui/icons-material/Settings';
 
 export const TailchatMenu: React.FC<MenuProps> = React.memo((props) => {
   const resources = useResourceDefinitions();
@@ -21,6 +22,12 @@ export const TailchatMenu: React.FC<MenuProps> = React.memo((props) => {
         .filter((name) => resources[name].hasList)
         .map((name) => <ResourceMenuItem key={name} name={name} />)}
 
+      <Menu.Item
+        to="/admin/system"
+        primaryText={translate('custom.menu.system')}
+        leftIcon={<SettingsIcon />}
+      />
+
       <Menu.Item
         to="/admin/network"
         primaryText={translate('custom.menu.network')}

server/admin/app/ra/routes/system/index.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { request } from '../../request';
+import { useRequest } from 'ahooks';
+import { CircularProgress, Box, Grid } from '@mui/material';
+import _uniq from 'lodash/uniq';
+import { BooleanField, useTranslate } from 'react-admin';
+import DoneIcon from '@mui/icons-material/Done';
+import ClearIcon from '@mui/icons-material/Clear';
+
+/**
+ * Tailchat 系统设置
+ */
+export const SystemConfig: React.FC = React.memo(() => {
+  const translate = useTranslate();
+  const { data: config, loading } = useRequest(async () => {
+    const { data } = await request('/config/client');
+
+    return data.config ?? {};
+  });
+
+  if (loading) {
+    return <CircularProgress />;
+  }
+
+  return (
+    <Box
+      sx={{
+        paddingTop: 2,
+        paddingBottom: 2,
+        maxWidth: '100vw',
+      }}
+    >
+      <Grid container spacing={2}>
+        <Grid item xs={4}>
+          {translate('custom.config.uploadFileLimit')}
+        </Grid>
+        <Grid item xs={8}>
+          {config.uploadFileLimit}
+        </Grid>
+      </Grid>
+      <Grid container spacing={2}>
+        <Grid item xs={4}>
+          {translate('custom.config.emailVerification')}
+        </Grid>
+        <Grid item xs={8}>
+          {config.emailVerification ? (
+            <DoneIcon fontSize="small" />
+          ) : (
+            <ClearIcon fontSize="small" />
+          )}
+        </Grid>
+      </Grid>
+    </Box>
+  );
+});
+SystemConfig.displayName = 'SystemConfig';

server/admin/app/server/router/api.ts

@@ -3,6 +3,7 @@ import raExpressMongoose from 'express-mongoose-ra-json-server';
 import jwt from 'jsonwebtoken';
 import { call } from '../broker';
 import { adminAuth, auth, authSecret } from '../middleware/auth';
+import { configRouter } from './config';
 import { networkRouter } from './network';
 
 const router = Router();
@@ -39,6 +40,7 @@ router.post('/login', (req, res) => {
 });
 
 router.use('/network', networkRouter);
+router.use('/config', configRouter);
 
 router.use(
   '/users',

server/admin/app/server/router/config.ts

@@ -0,0 +1,19 @@
+/**
+ * Network 相关接口
+ */
+
+import { Router } from 'express';
+import { broker } from '../broker';
+import { auth } from '../middleware/auth';
+
+const router = Router();
+
+router.get('/client', auth(), async (req, res) => {
+  const config = await broker.call('config.client');
+
+  res.json({
+    config,
+  });
+});
+
+export { router as configRouter };