perf: admin

admin/package.json

@@ -25,7 +25,7 @@
     "react-admin": "^4.11.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^12.3.1",
-    "tushan": "^0.2.22"
+    "tushan": "^0.2.23"
   },
   "devDependencies": {
     "@types/jsonexport": "^3.0.2",

admin/server.js

@@ -15,6 +15,15 @@ useAppRoute(app);
 useKbRoute(app);
 useSystemRoute(app);
 
+app.get('/*', (req, res) => {
+  res.sendFile(new URL('dist/index.html', import.meta.url).pathname);
+});
+
+app.use((err, req, res, next) => {
+  res.sendFile(new URL('dist/index.html', import.meta.url).pathname);
+});
+
+
 const PORT = process.env.PORT || 3001;
 app.listen(PORT, () => {
   console.log(`Server is running on port ${PORT}`);

admin/service/route/system.js

@@ -110,8 +110,7 @@ export const auth = () => {
     try {
       const authorization = req.headers.authorization;
       if (!authorization) {
-        res.status(401).end('not found authorization in headers');
-        return;
+        return next(new Error("unAuthorization"))
       }
 
       const token = authorization.slice('Bearer '.length);

admin/service/route/user.js

@@ -12,8 +12,12 @@ export const useUserRoute = (app) => {
   // 统计近 30 天注册用户数量
   app.get('/users/data', auth(), async (req, res) => {
     try {
+      const day = 60;
+      let startCount = await User.countDocuments({
+        createTime: { $lt: new Date(Date.now() - day * 24 * 60 * 60 * 1000) }
+      });
       const usersRaw = await User.aggregate([
-        { $match: { createTime: { $gte: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000) } } },
+        { $match: { createTime: { $gte: new Date(Date.now() - day * 24 * 60 * 60 * 1000) } } },
         {
           $group: {
             _id: {
@@ -34,7 +38,18 @@ export const useUserRoute = (app) => {
         { $sort: { date: 1 } }
       ]);
 
-      res.json(usersRaw);
+      const countResult = usersRaw.map((item) => {
+        const increaseRate = `${((item.count / startCount) * 100).toFixed(2)}%`;
+        startCount += item.count;
+        return {
+          date: item.date,
+          count: startCount,
+          increase: item.count,
+          increaseRate
+        };
+      });
+
+      res.json(countResult);
     } catch (err) {
       console.log(`Error fetching users: ${err}`);
       res.status(500).json({ error: 'Error fetching users' });

admin/src/App.tsx

@@ -9,6 +9,7 @@ import {
 import { authProvider } from './auth';
 import { userFields, payFields, kbFields, ModelFields, SystemFields } from './fields';
 import { Dashboard } from './Dashboard';
+import { IconUser, IconApps, IconBook, IconStamp } from 'tushan/icon';
 
 const authStorageKey = 'tushan:auth';
 
@@ -40,6 +41,7 @@ function App() {
       <Resource
         name="users"
         label="用户信息"
+        icon={<IconUser />}
         list={
           <ListTable
             filter={[
@@ -56,6 +58,7 @@ function App() {
       <Resource
         name="pays"
         label="支付记录"
+        icon={<IconStamp />}
         list={
           <ListTable
             filter={[
@@ -71,6 +74,7 @@ function App() {
       <Resource
         name="kbs"
         label="知识库"
+        icon={<IconBook />}
         list={
           <ListTable
             filter={[
@@ -88,6 +92,7 @@ function App() {
       />
       <Resource
         name="models"
+        icon={<IconApps />}
         label="应用"
         list={<ListTable fields={ModelFields} action={{ detail: true }} />}
       />

admin/src/Dashboard.tsx

@@ -15,13 +15,13 @@ import dayjs from 'dayjs';
 
 const authStorageKey = 'tushan:auth';
 
-type UsersChartDataType = { count: number; date: string }[];
+type UsersChartDataType = { count: number; date: string; increase: number; increaseRate: string };
 
 export const Dashboard: React.FC = React.memo(() => {
   const [userCount, setUserCount] = useState(0); //用户数量
   const [kbCount, setkbCount] = useState(0);
   const [modelCount, setmodelCount] = useState(0);
-  const [usersData, setUsersData] = useState<UsersChartDataType>([]);
+  const [usersData, setUsersData] = useState<UsersChartDataType[]>([]);
 
   useEffect(() => {
     const baseUrl = import.meta.env.VITE_PUBLIC_SERVER_URL;
@@ -57,7 +57,7 @@ export const Dashboard: React.FC = React.memo(() => {
       }
     };
     const fetchUserData = async () => {
-      const userResponse: UsersChartDataType = await fetch(`${baseUrl}/users/data`, {
+      const userResponse: UsersChartDataType[] = await fetch(`${baseUrl}/users/data`, {
         headers
       }).then((res) => res.json());
       setUsersData(
@@ -96,7 +96,7 @@ export const Dashboard: React.FC = React.memo(() => {
               <Divider type="vertical" style={{ height: 40 }} />
 
               <Grid.Col flex={1} style={{ paddingLeft: '1rem' }}>
-                <DataItem icon={<IconApps />} title={'AI模型'} count={modelCount} />
+                <DataItem icon={<IconApps />} title={'应用'} count={modelCount} />
               </Grid.Col>
             </Grid.Row>
 
@@ -110,38 +110,31 @@ export const Dashboard: React.FC = React.memo(() => {
 });
 Dashboard.displayName = 'Dashboard';
 
-const DashboardItem: React.FC<
-  React.PropsWithChildren<{
-    title: string;
-    href?: string;
-  }>
-> = React.memo((props) => {
-  const { t } = useTranslation();
-
-  return (
-    <Card
-      title={props.title}
-      extra={
-        props.href && (
-          <Link target="_blank" href={props.href}>
-            {t('tushan.dashboard.more')}
-          </Link>
-        )
-      }
-      bordered={false}
-      style={{ overflow: 'hidden' }}
-    >
-      {props.children}
-    </Card>
-  );
-});
+const DashboardItem = React.memo(
+  (props: { title: string; href?: string; children: React.ReactNode }) => {
+    const { t } = useTranslation();
+
+    return (
+      <Card
+        title={props.title}
+        extra={
+          props.href && (
+            <Link target="_blank" href={props.href}>
+              {t('tushan.dashboard.more')}
+            </Link>
+          )
+        }
+        bordered={false}
+        style={{ overflow: 'hidden' }}
+      >
+        {props.children}
+      </Card>
+    );
+  }
+);
 DashboardItem.displayName = 'DashboardItem';
 
-const DataItem: React.FC<{
-  icon: React.ReactElement;
-  title: string;
-  count: number;
-}> = React.memo((props) => {
+const DataItem = React.memo((props: { icon: React.ReactElement; title: string; count: number }) => {
   return (
     <Space>
       <div
@@ -168,7 +161,34 @@ const DataItem: React.FC<{
 });
 DataItem.displayName = 'DataItem';
 
-const UserChart = ({ data }: { data: UsersChartDataType }) => {
+const CustomTooltip = ({ active, payload }: any) => {
+  const data = payload?.[0]?.payload as UsersChartDataType;
+  if (active && data) {
+    return (
+      <div
+        style={{
+          background: 'white',
+          padding: '5px 8px',
+          borderRadius: '8px',
+          boxShadow: '2px 2px 5px rgba(0,0,0,0.2)'
+        }}
+      >
+        <p className="label">
+          count: <strong>{data.count}</strong>
+        </p>
+        <p className="label">
+          increase: <strong>{data.increase}</strong>
+        </p>
+        <p className="label">
+          increaseRate: <strong>{data.increaseRate}</strong>
+        </p>
+      </div>
+    );
+  }
+  return null;
+};
+
+const UserChart = ({ data }: { data: UsersChartDataType[] }) => {
   return (
     <ResponsiveContainer width="100%" height={320}>
       <AreaChart
@@ -190,7 +210,7 @@ const UserChart = ({ data }: { data: UsersChartDataType }) => {
         <XAxis dataKey="date" />
         <YAxis />
         <CartesianGrid strokeDasharray="3 3" />
-        <Tooltip />
+        <Tooltip content={<CustomTooltip />} />
         <Area
           type="monotone"
           dataKey="count"