perf: git star

client/src/components/Layout/index.tsx

@@ -28,7 +28,7 @@ const Layout = ({ children }: { children: JSX.Element }) => {
   const router = useRouter();
   const { colorMode, setColorMode } = useColorMode();
   const { Loading } = useLoading();
-  const { loading, setScreenWidth, isPc } = useGlobalStore();
+  const { loading, setScreenWidth, isPc, loadGitStar } = useGlobalStore();
   const { userInfo } = useUserStore();
 
   const isChatPage = useMemo(
@@ -46,14 +46,16 @@ const Layout = ({ children }: { children: JSX.Element }) => {
     const resize = throttle(() => {
       setScreenWidth(document.documentElement.clientWidth);
     }, 300);
-    resize();
 
     window.addEventListener('resize', resize);
 
+    resize();
+    loadGitStar();
+
     return () => {
       window.removeEventListener('resize', resize);
     };
-  }, []);
+  }, [loadGitStar, setScreenWidth]);
 
   const { data: unread = 0 } = useQuery(['getUnreadCount'], getUnreadCount, {
     enabled: !!userInfo,

client/src/components/Layout/navbar.tsx

@@ -11,6 +11,8 @@ import Avatar from '../Avatar';
 import MyIcon from '../Icon';
 import Language from '../Language';
 import { useTranslation } from 'next-i18next';
+import { useGlobalStore } from '@/store/global';
+import MyTooltip from '../MyTooltip';
 
 export enum NavbarTypeEnum {
   normal = 'normal',
@@ -21,6 +23,7 @@ const Navbar = ({ unread }: { unread: number }) => {
   const { t } = useTranslation();
   const router = useRouter();
   const { userInfo } = useUserStore();
+  const { gitStar } = useGlobalStore();
   const { lastChatAppId, lastChatId } = useChatStore();
   const navbarList = useMemo(
     () => [
@@ -158,16 +161,18 @@ const Navbar = ({ unread }: { unread: number }) => {
       )}
       <Language {...itemStyles} />
       {feConfigs?.show_git && (
-        <Link
-          as={NextLink}
-          href="https://github.com/labring/FastGPT"
-          target={'_blank'}
-          {...itemStyles}
-          mt={0}
-          color={'#9096a5'}
-        >
-          <MyIcon name={'git'} width={'22px'} height={'22px'} />
-        </Link>
+        <MyTooltip label={`Git Star: ${gitStar}`} placement={'right-end'}>
+          <Link
+            as={NextLink}
+            href="https://github.com/labring/FastGPT"
+            target={'_blank'}
+            {...itemStyles}
+            mt={0}
+            color={'#9096a5'}
+          >
+            <MyIcon name={'git'} width={'22px'} height={'22px'} />
+          </Link>
+        </MyTooltip>
       )}
     </Flex>
   );

client/src/components/MyTooltip/index.tsx

@@ -11,7 +11,7 @@ const MyTooltip = ({ children, forceShow = false, shouldWrapChildren = true, ...
   return isPc || forceShow ? (
     <Tooltip
       bg={'white'}
-      arrowShadowColor={' rgba(0,0,0,0.1)'}
+      arrowShadowColor={' rgba(0,0,0,0.05)'}
       hasArrow
       arrowSize={12}
       offset={[-15, 15]}

client/src/pages/index.tsx

@@ -7,15 +7,13 @@ import { serviceSideProps } from '@/utils/i18n';
 import { useTranslation } from 'next-i18next';
 
 import styles from './index.module.scss';
-import axios from 'axios';
 import MyIcon from '@/components/Icon';
 
 const Home = () => {
   const router = useRouter();
   const { t } = useTranslation();
   const { inviterId } = router.query as { inviterId: string };
-  const { isPc } = useGlobalStore();
-  const [star, setStar] = useState(1500);
+  const { isPc, gitStar } = useGlobalStore();
 
   useEffect(() => {
     if (inviterId) {
@@ -136,15 +134,6 @@ const Home = () => {
     }, 500);
   }, [isPc]);
 
-  useEffect(() => {
-    (async () => {
-      try {
-        const { data: git } = await axios.get('https://api.github.com/repos/labring/FastGPT');
-        setStar(git.stargazers_count);
-      } catch (error) {}
-    })();
-  }, []);
-
   return (
     <Flex
       className={styles.home}
@@ -200,7 +189,7 @@ const Home = () => {
               leftIcon={<MyIcon name={'git'} w={'20px'} />}
               onClick={() => window.open('https://github.com/labring/FastGPT', '_blank')}
             >
-              Stars {(star / 1000).toFixed(1)}k
+              Stars {(gitStar / 1000).toFixed(1)}k
             </Button>
           )}
           <Button

client/src/pages/tools/index.tsx

@@ -25,7 +25,7 @@ const list = [
     ? [
         {
           icon: 'git',
-          label: 'Git项目地址',
+          label: 'GitHub 地址',
           link: 'https://github.com/labring/FastGPT'
         }
       ]

client/src/store/global.ts

@@ -1,6 +1,7 @@
 import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
+import axios from 'axios';
 
 type State = {
   loading: boolean;
@@ -9,6 +10,8 @@ type State = {
   setScreenWidth: (val: number) => void;
   isPc?: boolean;
   initIsPc(val: boolean): void;
+  gitStar: number;
+  loadGitStar: () => Promise<void>;
 };
 
 export const useGlobalStore = create<State>()(
@@ -35,6 +38,16 @@ export const useGlobalStore = create<State>()(
         set((state) => {
           state.isPc = val;
         });
+      },
+      gitStar: 2700,
+      async loadGitStar() {
+        try {
+          const { data: git } = await axios.get('https://api.github.com/repos/labring/FastGPT');
+
+          set((state) => {
+            state.gitStar = git.stargazers_count;
+          });
+        } catch (error) {}
       }
     }))
   )