feat(admin-next): add message and group list

server/admin-next/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@fastify/busboy": "^1.1.0",
+    "axios": "^1.4.0",
     "body-parser": "^1.20.1",
     "compression": "^1.7.4",
     "express": "^4.18.2",

server/admin-next/src/client/App.tsx

@@ -5,10 +5,12 @@ import {
   Resource,
   Tushan,
 } from 'tushan';
+import { IconMessage, IconUser } from 'tushan/icon';
 import { authProvider } from './auth';
-import { photoFields, userFields } from './fields';
+import { groupFields, messageFields, userFields } from './fields';
+import { httpClient } from './request';
 
-const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
+const dataProvider = jsonServerProvider('/admin/api', httpClient);
 
 function App() {
   return (
@@ -20,11 +22,12 @@ function App() {
       <Resource
         name="users"
         label="User"
+        icon={<IconUser />}
         list={
           <ListTable
             filter={[
               createTextField('q', {
-                label: 'Query',
+                label: 'Search',
               }),
             ]}
             fields={userFields}
@@ -34,11 +37,34 @@ function App() {
       />
 
       <Resource
-        name="photos"
-        label="Photos"
+        name="messages"
+        label="Messages"
+        icon={<IconMessage />}
         list={
           <ListTable
-            fields={photoFields}
+            filter={[
+              createTextField('q', {
+                label: 'Search',
+              }),
+            ]}
+            fields={messageFields}
+            action={{ detail: true, edit: true, delete: true }}
+          />
+        }
+      />
+
+      <Resource
+        name="groups"
+        label="Groups"
+        icon={<IconMessage />}
+        list={
+          <ListTable
+            filter={[
+              createTextField('q', {
+                label: 'Search',
+              }),
+            ]}
+            fields={groupFields}
             action={{ detail: true, edit: true, delete: true }}
           />
         }

server/admin-next/src/client/fields.ts

@@ -3,41 +3,80 @@ import {
   createEmailField,
   createImageField,
   createTextField,
-  createUrlField,
+  createBooleanField,
 } from 'tushan';
 
 export const userFields = [
   createTextField('id', {
     label: 'ID',
-  }),
-  createTextField('name', {
-    label: 'Name',
     list: {
       sort: true,
     },
   }),
   createEmailField('email', {
     label: 'Email',
   }),
-  createUrlField('website', {
-    label: 'Website',
+  createTextField('nickname', {
+    label: 'Nickname',
+  }),
+  createTextField('discriminator', {
+    label: 'Discriminator',
+  }),
+  createBooleanField('temporary', {
+    label: 'Temporary',
+  }),
+  createImageField('avatar', {
+    label: 'Avatar',
+    height: 42,
+  }),
+  createTextField('settings', {
+    label: 'Settings',
+    list: {
+      width: 200,
+    },
+    edit: {
+      hidden: true, // wait for json field
+    },
+  }),
+  createTextField('createdAt', {
+    label: 'Created At',
   }),
 ];
 
-export const photoFields = [
+export const messageFields = [
   createTextField('id', {
     label: 'ID',
   }),
-  createTextField('albumId', {
-    label: 'AlbumId',
+  createTextField('content', {
+    label: 'Content',
+  }),
+  createTextField('author', {
+    label: 'Author',
   }),
-  createTextField('title', {
-    label: 'Title',
+  createTextField('groupId'),
+  createTextField('converseId'),
+  createBooleanField('hasRecall'),
+  createTextField('reactions'),
+  createTextField('createdAt'),
+];
+
+export const groupFields = [
+  createTextField('id', {
+    label: 'ID',
   }),
-  createImageField('url', {
-    label: 'Url',
+  createTextField('name'),
+  createTextField('owner'),
+  createTextField('members.length', {
+    edit: {
+      hidden: true,
+    },
   }),
-  createAvatarField('thumbnailUrl', {
-    label: 'ThumbnailUrl',
+  createTextField('panels.length', {
+    edit: {
+      hidden: true,
+    },
   }),
+  createTextField('roles'),
+  createTextField('fallbackPermissions'),
+  createTextField('createdAt'),
 ];

server/admin-next/src/client/request.ts

@@ -0,0 +1,46 @@
+import axios from 'axios';
+import { authStorageKey } from './auth';
+import _set from 'lodash/set';
+import { fetchJSON } from 'tushan';
+
+/**
+ * 创建请求实例
+ */
+function createRequest() {
+  const ins = axios.create({
+    baseURL: '/admin/api',
+  });
+
+  ins.interceptors.request.use(async (val) => {
+    try {
+      const { token } = JSON.parse(
+        window.localStorage.getItem(authStorageKey) ?? '{}'
+      );
+      _set(val, ['headers', 'Authorization'], `Bearer ${token}`);
+
+      return val;
+    } catch (err) {
+      throw err;
+    }
+  });
+
+  return ins;
+}
+
+export const request = createRequest();
+
+export const httpClient: typeof fetchJSON = (url, options = {}) => {
+  try {
+    if (!options.headers) {
+      options.headers = new Headers({ Accept: 'application/json' });
+    }
+    const { token } = JSON.parse(
+      window.localStorage.getItem(authStorageKey) ?? '{}'
+    );
+    (options.headers as Headers).set('Authorization', `Bearer ${token}`);
+
+    return fetchJSON(url, options);
+  } catch (err) {
+    return Promise.reject();
+  }
+};