feat: 增加文件列表

并增加文件存储体积计算字段

pnpm-lock.yaml

@@ -911,7 +911,9 @@ importers:
       dotenv: ^16.0.3
       express: ^4.18.2
       express-mongoose-ra-json-server: ^0.1.0
+      filesize: ^8.0.7
       isbot: ^3.6.5
+      lodash: ^4.17.21
       morgan: ^1.10.0
       nodemon: ^2.0.20
       npm-run-all: ^4.1.5
@@ -931,7 +933,9 @@ importers:
       compression: 1.7.4
       express: 4.18.2
       express-mongoose-ra-json-server: 0.1.0_express@4.18.2
+      filesize: 8.0.7
       isbot: 3.6.5
+      lodash: 4.17.21
       morgan: 1.10.0
       ra-data-json-server: 4.6.3_biqbaboplfbrettd7655fr4n2y
       react: 18.2.0

server/admin/app/entry.client.tsx

@@ -1,4 +1,5 @@
 import { RemixBrowser } from '@remix-run/react';
+import React from 'react';
 import { startTransition, StrictMode } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 

server/admin/app/ra/App.tsx

@@ -12,10 +12,12 @@ import { UserList } from './resources/user';
 import React from 'react';
 import { GroupList } from './resources/group';
 import { MessageList } from './resources/chat';
+import { FileList } from './resources/file';
 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';
+import { theme } from './theme';
 
 const httpClient: typeof fetchUtils.fetchJson = (url, options = {}) => {
   try {
@@ -40,6 +42,7 @@ const dataProvider = jsonServerProvider(
 export const App = () => (
   <Admin
     basename="/admin"
+    theme={theme}
     authProvider={authProvider}
     dataProvider={dataProvider}
   >
@@ -68,7 +71,7 @@ export const App = () => (
       icon={AttachFileIcon}
       name="file"
       options={{ label: '文件' }}
-      list={ListGuesser}
+      list={FileList}
       show={ShowGuesser}
     />
   </Admin>

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import filesize from 'filesize';
+import {
+  NumberFieldProps,
+  sanitizeFieldRestProps,
+  useRecordContext,
+  useTranslate,
+} from 'react-admin';
+import get from 'lodash/get';
+import { Typography } from '@mui/material';
+
+export const FilesizeField: React.FC<NumberFieldProps> = React.memo((props) => {
+  const { className, emptyText, source, locales, options, textAlign, ...rest } =
+    props;
+  const record = useRecordContext(props);
+  const translate = useTranslate();
+
+  if (!record) {
+    return null;
+  }
+  const value = get(record, source!);
+
+  if (value == null) {
+    return emptyText ? (
+      <Typography
+        component="span"
+        variant="body2"
+        className={className}
+        {...sanitizeFieldRestProps(rest)}
+      >
+        {emptyText && translate(emptyText, { _: emptyText })}
+      </Typography>
+    ) : null;
+  }
+
+  return (
+    <Typography
+      component="span"
+      variant="body2"
+      className={className}
+      {...sanitizeFieldRestProps(rest)}
+    >
+      {filesize(value)}
+    </Typography>
+  );
+});
+FilesizeField.displayName = 'FilesizeField';

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

@@ -10,7 +10,16 @@ import {
 } from 'react-admin';
 
 export const MessageList: React.FC = () => (
-  <List filters={[<SearchInput key="search" source="q" alwaysOn />]}>
+  <List
+    filters={[
+      <SearchInput
+        key="search"
+        source="q"
+        alwaysOn
+        placeholder="搜索消息内容"
+      />,
+    ]}
+  >
     <Datagrid rowClick="show">
       <TextField source="id" label="ID" sortable={true} sortByOrder="DESC" />
       <TextField source="content" label="内容" />

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+  Datagrid,
+  DateField,
+  List,
+  NumberField,
+  ReferenceField,
+  TextField,
+  UrlField,
+} from 'react-admin';
+import { FilesizeField } from '../components/FilesizeField';
+
+export const FileList: React.FC = () => (
+  <List>
+    <Datagrid>
+      <TextField source="objectName" label="对象存储名" />
+      <UrlField source="url" target="__blank" label="文件路径" />
+      <FilesizeField source="size" noWrap={true} />
+      <TextField source="metaData.content-type" label="文件类型" />
+      <TextField source="etag" />
+      <ReferenceField source="userId" reference="users" label="存储用户">
+        <TextField source="nickname" />
+        (<TextField source="email" />)
+      </ReferenceField>
+      <DateField source="createdAt" label="创建时间" />
+    </Datagrid>
+  </List>
+);

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

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

server/admin/app/ra/theme.ts

@@ -0,0 +1,22 @@
+import { defaultTheme } from 'react-admin';
+import { ThemeOptions } from '@mui/material';
+
+const customRaComponents = {
+  RaDatagrid: {
+    styleOverrides: {
+      root: {
+        '& .RaDatagrid-headerCell': {
+          whiteSpace: 'nowrap',
+        },
+      },
+    },
+  },
+};
+
+export const theme: ThemeOptions = {
+  ...defaultTheme,
+  components: {
+    ...defaultTheme.components,
+    ...customRaComponents,
+  },
+};

server/admin/package.json

@@ -20,7 +20,9 @@
     "compression": "^1.7.4",
     "express": "^4.18.2",
     "express-mongoose-ra-json-server": "^0.1.0",
+    "filesize": "^8.0.7",
     "isbot": "^3.6.5",
+    "lodash": "^4.17.21",
     "morgan": "^1.10.0",
     "ra-data-json-server": "^4.6.3",
     "react": "^18.2.0",

server/admin/server.ts

@@ -6,7 +6,7 @@ import { createRequestHandler } from '@remix-run/express';
 import mongoose from 'mongoose';
 import dotenv from 'dotenv';
 import { router } from './app/server/index';
-dotenv.config();
+dotenv.config({ path: path.resolve(__dirname, '../.env') });
 
 // 链接数据库
 mongoose.connect(process.env.MONGO_URL!, (error: any) => {