feat(layout): 添加底部布局组件并优化相关功能

- 新增 LayoutFooter 组件，用于显示版权信息和 GitHub 相关链接
- 移除 MoonLayout、TeamMenu 和 Login 组件中的重复代码
- 优化 TeamMenu 组件中的团队列表获取和处理逻辑
- 更新 Login 组件，使用新的 LayoutFooter 组件替换原有的版权信息显示方式

src/components/layout/footer.tsx

@@ -0,0 +1,36 @@
+import { CopyrightOutlined } from '@ant-design/icons'
+
+const actionList = [
+  {
+    img: 'https://img.shields.io/github/license/aide-family/moon.svg?style=flat',
+    url: 'https://github.com/aide-family/moon?tab=MIT-1-ov-file'
+  },
+  {
+    img: 'https://img.shields.io/github/v/release/aide-family/moon?style=flat',
+    url: 'https://github.com/aide-family/moon/releases'
+  },
+  {
+    img: 'https://img.shields.io/github/stars/aide-family/moon?style=flat',
+    url: 'https://github.com/aide-family/moon'
+  },
+  {
+    img: 'https://img.shields.io/github/forks/aide-family/moon?style=flat',
+    url: 'https://github.com/aide-family/moon/fork'
+  }
+]
+
+export default function LayoutFooter() {
+  return (
+    <div className='ml-2 flex items-center gap-2'>
+      <div className='flex items-center gap-2 text-sm'>
+        <CopyrightOutlined />
+        {window.location.host}
+      </div>
+      {actionList.map((item, index) => (
+        <div className='flex justify-center items-center h-[20px]' onClick={() => window.open(item.url)} key={index}>
+          <img src={item.img} alt='' />
+        </div>
+      ))}
+    </div>
+  )
+}

src/components/layout/index.tsx

@@ -1,12 +1,12 @@
-import { healthApi, isLogin, setToken } from '@/api/request'
+import { isLogin, setToken } from '@/api/request'
 import { useContainerHeight } from '@/hooks/useContainerHeightTop'
 import { GlobalContext } from '@/utils/context'
-import { CopyrightOutlined } from '@ant-design/icons'
 import { Layout, Menu, Spin, theme } from 'antd'
 import React, { Suspense, useContext, useEffect, useRef, useState } from 'react'
 import { Outlet, useLocation, useNavigate } from 'react-router-dom'
 import MoonChat from '../chat/moon-chat'
 import { CreateTeamModalProvider } from './create-team-provider'
+import LayoutFooter from './footer'
 import { HeaderOp } from './header-op'
 import HeaderTitle from './header-title'
 import RouteBreadcrumb from './route-breadcrumb'
@@ -47,7 +47,6 @@ const MoonLayout: React.FC = () => {
   const [openKeys, setOpenKeys] = useState<string[]>([])
   const [selectedKeys, setSelectedKeys] = useState<string[]>([])
   const [locationPath, setLocationPath] = useState<string>(location.pathname)
-  const [version, setVersion] = useState('version')
 
   const contentRef = useRef<HTMLDivElement>(null)
   const headerRef = useRef<HTMLDivElement>(null)
@@ -58,12 +57,6 @@ const MoonLayout: React.FC = () => {
     setContentHeight?.(autoContentHeight)
   }, [autoContentHeight, setContentHeight])
 
-  const getVersion = () => {
-    healthApi().then((res) => {
-      setVersion(res.version)
-    })
-  }
-
   const handleMenuOpenChange = (keys: string[]) => {
     let openKeyList: string[] = keys
     if (openKeyList.length === 0) {
@@ -81,7 +74,6 @@ const MoonLayout: React.FC = () => {
   }
 
   useEffect(() => {
-    getVersion()
     setSelectedKeys([location.pathname])
 
     const openKey = location.pathname.split('/').slice(1)
@@ -141,8 +133,7 @@ const MoonLayout: React.FC = () => {
               className='h-8 flex items-center justify-center gap-1'
               style={{ background: token.colorBgContainer }}
             >
-              <CopyrightOutlined />
-              {window.location.host} <div className='ml-2'>version: {version}</div>
+              <LayoutFooter />
             </Footer>
           </Layout>
         </Layout>

src/components/layout/team-menu.tsx

@@ -5,50 +5,51 @@ import { myTeam } from '@/api/team'
 import { useCreateTeamModal } from '@/hooks/create-team'
 import { GlobalContext } from '@/utils/context'
 import { DownOutlined } from '@ant-design/icons'
+import { useRequest } from 'ahooks'
 import { Avatar, Col, Dropdown, message, Row, Space } from 'antd'
-import { debounce } from 'lodash'
 import React, { useCallback, useContext, useEffect } from 'react'
 
-export interface TeamMenuProps {}
-
-export const TeamMenu: React.FC<TeamMenuProps> = () => {
+export const TeamMenu: React.FC = () => {
   const createTeamContext = useCreateTeamModal()
   const { teamInfo, setTeamInfo, setUserInfo, refreshMyTeamList } = useContext(GlobalContext)
   const [teamList, setTeamList] = React.useState<TeamItem[]>([])
 
-  const handleRefreshToken = (team?: TeamItem) => {
-    if (!team || !team.id) return
-    setTeamInfo?.(team)
-    refreshToken({ teamID: team.id }).then((res) => {
-      const { token, user } = res
+  const { run: initRefreshToken } = useRequest(refreshToken, {
+    manual: true,
+    onSuccess: ({ token, user }) => {
       setToken(token)
       setUserInfo?.(user)
-    })
-  }
+    }
+  })
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const handleGetMyTeamList = useCallback(
-    debounce(async () => {
-      myTeam().then(({ list }) => {
-        setTeamList(list || [])
-        if (!list?.length) {
-          message.warning('当前没有团队信息, 部分功能无法使用，你需要创建团队或者加入团队')
-          return
-        }
-        const exist = list.some((item) => {
-          if (item.id === teamInfo?.id) {
-            setTeamInfo?.(item)
-            return true
-          }
-        })
-        if (!exist) {
-          handleRefreshToken(list?.[0])
-          setTeamInfo?.(list?.[0])
+  const handleRefreshToken = useCallback(
+    (team?: TeamItem) => {
+      if (!team || !team.id) return
+      initRefreshToken({ teamID: team.id })
+    },
+    [initRefreshToken]
+  )
+
+  const { run: initTeamList } = useRequest(myTeam, {
+    manual: true,
+    onSuccess: ({ list }) => {
+      setTeamList(list || [])
+      if (!list?.length) {
+        message.warning('当前没有团队信息, 部分功能无法使用，你需要创建团队或者加入团队')
+        return
+      }
+      const exist = list.some((item) => {
+        if (item.id === teamInfo?.id) {
+          setTeamInfo?.(item)
+          return true
         }
       })
-    }, 500),
-    []
-  )
+      if (!exist) {
+        handleRefreshToken(list?.[0])
+        setTeamInfo?.(list?.[0])
+      }
+    }
+  })
 
   useEffect(() => {
     handleRefreshToken(teamInfo)
@@ -59,14 +60,13 @@ export const TeamMenu: React.FC<TeamMenuProps> = () => {
       1000 * 60 * 10
     )
     return () => clearInterval(interval)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [handleRefreshToken, teamInfo])
 
   useEffect(() => {
     if (!createTeamContext.open) {
-      handleGetMyTeamList()
+      initTeamList()
     }
-  }, [createTeamContext.open, handleGetMyTeamList, refreshMyTeamList])
+  }, [createTeamContext.open, initTeamList, refreshMyTeamList])
 
   return (
     <Dropdown
@@ -85,7 +85,7 @@ export const TeamMenu: React.FC<TeamMenuProps> = () => {
               </Row>
             ),
             onClick: () => {
-              handleRefreshToken(item)
+              setTeamInfo?.(item)
               window.location.reload()
             }
           }

src/pages/index.tsx

@@ -24,6 +24,14 @@ function getUserInfo() {
   return {}
 }
 
+function getTeamInfo() {
+  const teamInfo = localStorage.getItem('teamInfo')
+  if (teamInfo) {
+    return JSON.parse(teamInfo)
+  }
+  return {}
+}
+
 function App() {
   const { token } = useToken()
 
@@ -32,7 +40,7 @@ function App() {
   const [size, setSize] = useStorage<SpaceSize>('size', 'middle')
   const [collapsed, setCollapsed] = useStorage<boolean>('collapsed', false)
   const [userInfo, setUserInfo] = useStorage<UserItem>('userInfo', getUserInfo())
-  const [teamInfo, setTeamInfo, removeTeamInfo] = useStorage<TeamItem>('teamInfo')
+  const [teamInfo, setTeamInfo, removeTeamInfo] = useStorage<TeamItem>('teamInfo', getTeamInfo())
   const [refreshMyTeamList, setRefreshMyTeamList] = useState<boolean>(false)
   const [isFullscreen, setIsFullscreen] = useState(false)
   const [showLevelColor, setShowLevelColor] = useStorage<boolean>('showLevelColor', false)

src/pages/login/index.tsx

@@ -1,11 +1,11 @@
-import { healthApi } from '@/api/request'
 import logoIcon from '@/assets/images/logo.svg'
 import { Docusaurus, Gitee } from '@/components/icon'
+import LayoutFooter from '@/components/layout/footer'
 import { docURL, giteeURL, githubURL } from '@/components/layout/header-op'
 import { GlobalContext } from '@/utils/context'
-import { CopyrightOutlined, GithubOutlined, MoonOutlined, SunOutlined } from '@ant-design/icons'
+import { GithubOutlined, MoonOutlined, SunOutlined } from '@ant-design/icons'
 import { Button, theme } from 'antd'
-import React, { useContext, useEffect, useRef, useState } from 'react'
+import React, { useContext, useEffect } from 'react'
 import Banner from './banner'
 import LoginForm from './form'
 
@@ -15,28 +15,6 @@ const { useToken } = theme
 const Login: React.FC<LoginProps> = () => {
   const { theme, setTheme, title = 'Moon' } = useContext(GlobalContext)
   const { token } = useToken()
-  const [version, setVersion] = useState('version')
-  const timerRef = useRef<NodeJS.Timeout | null>(null)
-
-  const getVersion = () => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current)
-    }
-    timerRef.current = setTimeout(() => {
-      healthApi().then((res) => {
-        setVersion(res.version)
-      })
-    }, 300)
-  }
-
-  useEffect(() => {
-    getVersion()
-    return () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current)
-      }
-    }
-  }, [])
 
   useEffect(() => {
     document.title = title
@@ -103,9 +81,7 @@ const Login: React.FC<LoginProps> = () => {
         </Button>
       </div>
       <div className='absolute bottom-3 flex items-center justify-center gap-2 w-full'>
-        <CopyrightOutlined />
-        {window.location.host}
-        <div className='ml-2'>version: {version}</div>
+        <LayoutFooter />
       </div>
     </div>
   )