From db52b3d5d527e850609393bbf7287458eb3b0384 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Mon, 29 May 2023 11:59:49 +0800
Subject: [PATCH] feat: add message count

---
 .../src/client/components/Dashboard.tsx       | 102 +++++++++++-------
 server/admin-next/src/client/i18n.ts          |   2 +
 2 files changed, 64 insertions(+), 40 deletions(-)

diff --git a/server/admin-next/src/client/components/Dashboard.tsx b/server/admin-next/src/client/components/Dashboard.tsx
index 1e8638fa..3466aa2d 100644
--- a/server/admin-next/src/client/components/Dashboard.tsx
+++ b/server/admin-next/src/client/components/Dashboard.tsx
@@ -1,4 +1,4 @@
-import { IconFile, IconUser, IconUserGroup } from 'tushan/icon';
+import { IconFile, IconMessage, IconUser, IconUserGroup } from 'tushan/icon';
 import React from 'react';
 import {
   XAxis,
@@ -30,16 +30,6 @@ export const Dashboard: React.FC = React.memo(() => {
   const { userIdentity } = useUserStore(createSelector('userIdentity'));
   const { t } = useTranslation();
 
-  const { total: usersNum } = useGetList('users', {
-    pagination: { page: 1, perPage: 1 },
-  });
-  const { total: groupNum } = useGetList('groups', {
-    pagination: { page: 1, perPage: 1 },
-  });
-  const { total: fileNum } = useGetList('file', {
-    pagination: { page: 1, perPage: 1 },
-  });
-
   return (
     <div>
       <div>
@@ -53,35 +43,7 @@ export const Dashboard: React.FC = React.memo(() => {
 
             <Divider />
 
-            <Grid.Row justify="center">
-              <Grid.Col flex={1} style={{ paddingLeft: '1rem' }}>
-                <DataItem
-                  icon={<IconUser />}
-                  title={t('tushan.dashboard.user')}
-                  count={usersNum}
-                />
-              </Grid.Col>
-
-              <Divider type="vertical" style={{ height: 40 }} />
-
-              <Grid.Col flex={1} style={{ paddingLeft: '1rem' }}>
-                <DataItem
-                  icon={<IconUserGroup />}
-                  title={t('tushan.dashboard.group')}
-                  count={groupNum}
-                />
-              </Grid.Col>
-
-              <Divider type="vertical" style={{ height: 40 }} />
-
-              <Grid.Col flex={1} style={{ paddingLeft: '1rem' }}>
-                <DataItem
-                  icon={<IconFile />}
-                  title={t('custom.dashboard.file')}
-                  count={fileNum}
-                />
-              </Grid.Col>
-            </Grid.Row>
+            <DashboardSummary />
 
             <Divider />
 
@@ -128,6 +90,66 @@ export const Dashboard: React.FC = React.memo(() => {
 });
 Dashboard.displayName = 'Dashboard';
 
+const DashboardSummary: React.FC = React.memo(() => {
+  const { t } = useTranslation();
+
+  const { total: usersNum } = useGetList('users', {
+    pagination: { page: 1, perPage: 1 },
+  });
+  const { total: groupNum } = useGetList('groups', {
+    pagination: { page: 1, perPage: 1 },
+  });
+  const { total: fileNum } = useGetList('file', {
+    pagination: { page: 1, perPage: 1 },
+  });
+  const { total: messagesNum } = useGetList('messages', {
+    pagination: { page: 1, perPage: 1 },
+  });
+
+  return (
+    <Grid.Row justify="center">
+      <Grid.Col flex={1} style={{ paddingLeft: '1rem' }}>
+        <DataItem
+          icon={<IconUser />}
+          title={t('tushan.dashboard.user')}
+          count={usersNum}
+        />
+      </Grid.Col>
+
+      <Divider type="vertical" style={{ height: 40 }} />
+
+      <Grid.Col flex={1} style={{ paddingLeft: '1rem' }}>
+        <DataItem
+          icon={<IconUserGroup />}
+          title={t('tushan.dashboard.group')}
+          count={groupNum}
+        />
+      </Grid.Col>
+
+      <Divider type="vertical" style={{ height: 40 }} />
+
+      <Grid.Col flex={1} style={{ paddingLeft: '1rem' }}>
+        <DataItem
+          icon={<IconFile />}
+          title={t('custom.dashboard.file')}
+          count={fileNum}
+        />
+      </Grid.Col>
+
+      <Divider type="vertical" style={{ height: 40 }} />
+
+      <Grid.Col flex={1} style={{ paddingLeft: '1rem' }}>
+        <DataItem
+          icon={<IconMessage />}
+          title={t('custom.dashboard.messages')}
+          count={messagesNum}
+        />
+      </Grid.Col>
+    </Grid.Row>
+  );
+});
+DashboardSummary.displayName = 'DashboardSummary';
+
 const DashboardItem: React.FC<
   React.PropsWithChildren<{
     title: string;
diff --git a/server/admin-next/src/client/i18n.ts b/server/admin-next/src/client/i18n.ts
index 69bf0a9f..8a52bd5e 100644
--- a/server/admin-next/src/client/i18n.ts
+++ b/server/admin-next/src/client/i18n.ts
@@ -15,6 +15,7 @@ export const i18n: TushanContextProps['i18n'] = {
           },
           dashboard: {
             file: 'File',
+            messages: 'Messages',
             newUserCount: 'New User Count',
             messageCount: 'Message Count',
             tip: {
@@ -138,6 +139,7 @@ export const i18n: TushanContextProps['i18n'] = {
           },
           dashboard: {
             file: '文件',
+            messages: '消息数',
             newUserCount: '用户新增',
             messageCount: '消息数',
             tip: {