Feat(Theme): Support switch theme mode

src/components/common/Sidebar/Footer.tsx

@@ -1,11 +1,12 @@
 import Icon from '@ant-design/icons'
 import useStyles from '@/assets/css/components/common/sidebar/footer.style'
-import { SidebarContext } from '@/components/common/Sidebar/index'
-import { notification } from '@/util/common'
+import { THEME_DARK, THEME_FOLLOW_SYSTEM, THEME_LIGHT } from '@/constants/common.constants'
+import { getThemeMode, notification, setThemeMode, ThemeMode } from '@/util/common'
 import { getRedirectUrl } from '@/util/route'
 import { getAvatar, getLoginStatus, getNickname, removeToken } from '@/util/auth'
 import { navigateToLogin, navigateToUser } from '@/util/navigation'
 import { r_auth_logout } from '@/services/auth'
+import { SidebarContext } from '@/components/common/Sidebar/index'
 
 const Footer = () => {
     const { styles, theme, cx } = useStyles()
@@ -77,6 +78,31 @@ const Footer = () => {
                     登录
                 </NavLink>
             </span>
+            {!getLoginStatus() && !isCollapse && (
+                <AntdSegmented<ThemeMode>
+                    options={[
+                        {
+                            icon: <Icon component={IconOxygenThemeSystem} />,
+                            title: '跟随系统',
+                            value: THEME_FOLLOW_SYSTEM
+                        },
+                        {
+                            label: <Icon component={IconOxygenThemeLight} />,
+                            title: '亮色',
+                            value: THEME_LIGHT
+                        },
+                        {
+                            label: <Icon component={IconOxygenThemeDark} />,
+                            title: '深色',
+                            value: THEME_DARK
+                        }
+                    ]}
+                    defaultValue={getThemeMode()}
+                    onChange={setThemeMode}
+                    size={'small'}
+                    block
+                />
+            )}
             <span
                 hidden={!getLoginStatus()}
                 className={cx(styles.text, isCollapse ? styles.collapsedText : '')}

src/components/common/Sidebar/index.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
 import useStyles from '@/assets/css/components/common/sidebar/index.style'
-import { getLocalStorage, setLocalStorage } from '@/util/browser'
+import { getSidebarCollapse, setSidebarCollapse } from '@/util/common'
 import Item from '@/components/common/Sidebar/Item'
 import ItemList from '@/components/common/Sidebar/ItemList'
 import Scroll from '@/components/common/Sidebar/Scroll'
@@ -20,12 +20,10 @@ interface SidebarProps extends PropsWithChildren {
 
 const Sidebar = (props: SidebarProps) => {
     const { styles, cx } = useStyles()
-    const [isCollapseSidebar, setIsCollapseSidebar] = useState(
-        getLocalStorage('COLLAPSE_SIDEBAR') === 'true'
-    )
+    const [isCollapseSidebar, setIsCollapseSidebar] = useState(getSidebarCollapse())
 
     const switchSidebar = () => {
-        setLocalStorage('COLLAPSE_SIDEBAR', !isCollapseSidebar ? 'true' : 'false')
+        setSidebarCollapse(!isCollapseSidebar)
         setIsCollapseSidebar(!isCollapseSidebar)
         props.onSidebarSwitch?.(isCollapseSidebar)
     }