💄 style: Update Stats style

lobehub · Dec 27, 2024 · 6697e90 · 6697e90
1 parent d479ec3
commit 6697e90
Show file tree

Hide file tree

Showing 19 changed files with 211 additions and 152 deletions.
diff --git a/src/app/(main)/profile/(home)/Client.tsx b/src/app/(main)/profile/(home)/Client.tsx
@@ -6,17 +6,13 @@ import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
-import UserAvatar from '@/features/User/UserAvatar';
 import { useUserStore } from '@/store/user';
 import { authSelectors, userProfileSelectors } from '@/store/user/selectors';
 
 type SettingItemGroup = ItemGroup;
 
 const Client = memo<{ mobile?: boolean }>(() => {
-  const [enableAuth, isLoginWithNextAuth] = useUserStore((s) => [
-    authSelectors.enabledAuth(s),
-    authSelectors.isLoginWithNextAuth(s),
-  ]);
+  const [isLoginWithNextAuth] = useUserStore((s) => [authSelectors.isLoginWithNextAuth(s)]);
   const [nickname, username, userProfile] = useUserStore((s) => [
     userProfileSelectors.nickName(s),
     userProfileSelectors.username(s),

diff --git a/src/app/(main)/profile/stats/Client.tsx b/src/app/(main)/profile/stats/Client.tsx
@@ -3,7 +3,6 @@
 import { FormGroup, Grid } from '@lobehub/ui';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 
@@ -27,26 +26,10 @@ const Client = memo<{ mobile?: boolean }>(({ mobile }) => {
         </Grid>
       </FormGroup>
       <Grid gap={mobile ? undefined : 48} rows={2}>
-        <FormGroup
-          style={FORM_STYLE.style}
-          title={t('stats.assistantsRank.title')}
-          variant={'pure'}
-        >
-          <Flexbox paddingBlock={16}>
-            <AssistantsRank />
-          </Flexbox>
-        </FormGroup>
-        <FormGroup style={FORM_STYLE.style} title={t('stats.topicsRank.title')} variant={'pure'}>
-          <Flexbox paddingBlock={16}>
-            <TopicsRank />
-          </Flexbox>
-        </FormGroup>
+        <AssistantsRank />
+        <TopicsRank />
       </Grid>
-      <FormGroup style={FORM_STYLE.style} title={t('stats.heatmaps.title')} variant={'pure'}>
-        <Flexbox paddingBlock={24}>
-          <AiHeatmaps />
-        </Flexbox>
-      </FormGroup>
+      <AiHeatmaps />
     </>
   );
 });

diff --git a/src/app/(main)/profile/stats/features/AiHeatmaps.tsx b/src/app/(main)/profile/stats/features/AiHeatmaps.tsx
@@ -1,45 +1,54 @@
 import { Heatmaps } from '@lobehub/charts';
+import { FormGroup } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
+import { FORM_STYLE } from '@/const/layoutTokens';
 import { useClientDataSWR } from '@/libs/swr';
 import { messageService } from '@/services/message';
 
 const AiHeatmaps = memo(() => {
   const { t } = useTranslation('auth');
+  const { mobile } = useResponsive();
   const { data, isLoading } = useClientDataSWR('stats-heatmaps', async () =>
     messageService.getHeatmaps(),
   );
 
   return (
-    <Heatmaps
-      blockSize={14}
-      data={data || []}
-      labels={{
-        legend: {
-          less: t('heatmaps.legend.less'),
-          more: t('heatmaps.legend.more'),
-        },
-        months: [
-          t('heatmaps.months.jan'),
-          t('heatmaps.months.feb'),
-          t('heatmaps.months.mar'),
-          t('heatmaps.months.apr'),
-          t('heatmaps.months.may'),
-          t('heatmaps.months.jun'),
-          t('heatmaps.months.jul'),
-          t('heatmaps.months.aug'),
-          t('heatmaps.months.sep'),
-          t('heatmaps.months.oct'),
-          t('heatmaps.months.nov'),
-          t('heatmaps.months.dec'),
-        ],
-        tooltip: t('heatmaps.tooltip'),
-        totalCount: t('heatmaps.totalCount'),
-      }}
-      loading={isLoading}
-      maxLevel={4}
-    />
+    <FormGroup style={FORM_STYLE.style} title={t('stats.heatmaps.title')} variant={'pure'}>
+      <Flexbox paddingBlock={24}>
+        <Heatmaps
+          blockSize={mobile ? 8 : 14}
+          data={data || []}
+          labels={{
+            legend: {
+              less: t('heatmaps.legend.less'),
+              more: t('heatmaps.legend.more'),
+            },
+            months: [
+              t('heatmaps.months.jan'),
+              t('heatmaps.months.feb'),
+              t('heatmaps.months.mar'),
+              t('heatmaps.months.apr'),
+              t('heatmaps.months.may'),
+              t('heatmaps.months.jun'),
+              t('heatmaps.months.jul'),
+              t('heatmaps.months.aug'),
+              t('heatmaps.months.sep'),
+              t('heatmaps.months.oct'),
+              t('heatmaps.months.nov'),
+              t('heatmaps.months.dec'),
+            ],
+            tooltip: t('heatmaps.tooltip'),
+            totalCount: t('heatmaps.totalCount'),
+          }}
+          loading={isLoading || !data}
+          maxLevel={4}
+        />
+      </Flexbox>
+    </FormGroup>
   );
 });
 

diff --git a/src/app/(main)/profile/stats/features/AssistantsRank.tsx b/src/app/(main)/profile/stats/features/AssistantsRank.tsx
@@ -1,62 +1,100 @@
 import { BarList } from '@lobehub/charts';
-import { Avatar } from '@lobehub/ui';
+import { ActionIcon, Avatar, FormGroup, Modal } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
+import { MaximizeIcon } from 'lucide-react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import qs from 'query-string';
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
+import { FORM_STYLE } from '@/const/layoutTokens';
 import { DEFAULT_AVATAR } from '@/const/meta';
 import { useClientDataSWR } from '@/libs/swr';
 import { sessionService } from '@/services/session';
+import { SessionRankItem } from '@/types/session';
 
 export const AssistantsRank = memo(() => {
+  const [open, setOpen] = useState(false);
   const { t } = useTranslation(['auth', 'chat']);
   const theme = useTheme();
   const router = useRouter();
   const { data, isLoading } = useClientDataSWR('rank-sessions', async () =>
     sessionService.rankSessions(),
   );
 
+  const mapData = (item: SessionRankItem) => {
+    const link = qs.stringifyUrl({
+      query: {
+        session: item.id,
+      },
+      url: '/chat',
+    });
+    return {
+      icon: (
+        <Avatar
+          alt={item.title || t('defaultAgent', { ns: 'chat' })}
+          avatar={item.avatar || DEFAULT_AVATAR}
+          background={item.backgroundColor || theme.colorFillSecondary}
+          size={28}
+          style={{
+            backdropFilter: 'blur(8px)',
+          }}
+        />
+      ),
+      link,
+      name: (
+        <Link href={link} style={{ color: 'inherit' }}>
+          {item.title || t('defaultAgent', { ns: 'chat' })}
+        </Link>
+      ),
+      value: item.count,
+    };
+  };
+
   return (
-    <BarList
-      data={
-        data?.map((item) => {
-          const link = qs.stringifyUrl({
-            query: {
-              session: item.id,
-            },
-            url: '/chat',
-          });
-          return {
-            icon: (
-              <Avatar
-                alt={item.title || t('defaultAgent', { ns: 'chat' })}
-                avatar={item.avatar || DEFAULT_AVATAR}
-                background={item.backgroundColor || theme.colorFillSecondary}
-                size={28}
-                style={{
-                  backdropFilter: 'blur(8px)',
-                }}
-              />
-            ),
-            link,
-            name: (
-              <Link href={link} style={{ color: 'inherit' }}>
-                {item.title || t('defaultAgent', { ns: 'chat' })}
-              </Link>
-            ),
-            value: item.count,
-          };
-        }) || []
-      }
-      height={340}
-      leftLabel={t('stats.assistantsRank.left')}
-      loading={isLoading}
-      onValueChange={(item) => router.push(item.link)}
-      rightLabel={t('stats.assistantsRank.right')}
-    />
+    <>
+      <FormGroup
+        extra={
+          <ActionIcon
+            icon={MaximizeIcon}
+            onClick={() => setOpen(true)}
+            size={{ blockSize: 28, fontSize: 20 }}
+          />
+        }
+        style={FORM_STYLE.style}
+        title={t('stats.assistantsRank.title')}
+        variant={'pure'}
+      >
+        <Flexbox paddingBlock={16}>
+          <BarList
+            data={data?.slice(0, 5).map((item) => mapData(item)) || []}
+            height={220}
+            leftLabel={t('stats.assistantsRank.left')}
+            loading={isLoading || !data}
+            onValueChange={(item) => router.push(item.link)}
+            rightLabel={t('stats.assistantsRank.right')}
+          />
+        </Flexbox>
+      </FormGroup>
+      <Modal
+        footer={null}
+        loading={isLoading || !data}
+        onCancel={() => setOpen(false)}
+        open={open}
+        title={t('stats.assistantsRank.title')}
+      >
+        <BarList
+          data={data?.map((item) => mapData(item)) || []}
+          height={340}
+          leftLabel={t('stats.assistantsRank.left')}
+          loading={isLoading || !data}
+          onValueChange={(item) => router.push(item.link)}
+          rightLabel={t('stats.assistantsRank.right')}
+        />
+      </Modal>
+    </>
   );
 });