feat: ✨ 新增设置面板，完成主题切换

apps/admin/src/components/GPaper/index.tsx

@@ -0,0 +1,10 @@
+interface Props {
+ direction?: 'row' | 'column';
+ className?: string;
+ children?: React.ReactNode;
+ spacing?: number;
+}
+
+const GPaper = (props: Props) => <div className={props.className}>{props.children}</div>;
+
+export default GPaper;

apps/admin/src/layout/feature/components/Layout.tsx

@@ -0,0 +1,49 @@
+import { Segmented } from 'antd';
+import { useTheme } from 'antd-style';
+import { useState } from 'react';
+
+import SvgIcon from '@/components/SvgIcon';
+
+import type { SegmentedLabeledOption, SegmentedValue } from 'antd/lib/segmented';
+
+export default function LayoutSettings() {
+ const [value, setValue] = useState<SegmentedValue>('1');
+ const token = useTheme();
+ const options: SegmentedLabeledOption[] = [
+ {
+ label: (
+ <div style={{ padding: '16px', color: value === '1' ? token.colorPrimary : token.colorText }}>
+ <SvgIcon name='fill' size={32} />
+ </div>
+ ),
+ value: '1',
+ },
+ {
+ label: (
+ <div style={{ padding: '16px', color: value === '2' ? token.colorPrimary : token.colorText }}>
+ <SvgIcon name='filling' size={32} />
+ </div>
+ ),
+ value: '2',
+ },
+ {
+ label: (
+ <div style={{ padding: '16px', color: value === '3' ? token.colorPrimary : token.colorText }}>
+ <SvgIcon name='topFill' size={32} />
+ </div>
+ ),
+ value: '3',
+ },
+ ];
+ return (
+ <Segmented
+ style={{
+ backgroundColor: token.colorBgContainerDisabled,
+ }}
+ block
+ value={value}
+ onChange={(v) => setValue(v)}
+ options={options}
+ />
+ );
+}

apps/admin/src/layout/feature/components/Settings.tsx

@@ -1,10 +1,44 @@
 import { SettingOutlined } from '@ant-design/icons';
-import { Button, Tooltip } from 'antd';
+import { Button, Drawer, List, Tooltip, Typography } from 'antd';
+import ErrorBoundary from 'antd/es/alert/ErrorBoundary';
+import { useState } from 'react';
+
+import LayoutSettings from './Layout';
+import SlideTheme from './SlideTheme';
+import useStyles from './styles';
+
+const { Text } = Typography;
 
 export default function Settings() {
+ const { styles } = useStyles();
+ const [open, setOpen] = useState(false);
+ const onClose = () => {
+ setOpen(false);
+ };
  return (
- <Tooltip title='设置' placement='bottom' mouseEnterDelay={0.5}>
- <Button shape='circle' size='small' icon={<SettingOutlined />} />
- </Tooltip>
+ <ErrorBoundary>
+ <Tooltip title='设置' placement='bottom' mouseEnterDelay={0.5}>
+ <Button shape='circle' onClick={() => setOpen(true)} size='small' icon={<SettingOutlined />} />
+ </Tooltip>
+ <Drawer
+ classNames={{
+ content: styles.driwer,
+ }}
+ title='设置'
+ placement='right'
+ onClose={onClose}
+ open={open}
+ // mask={false}
+ >
+ <List split={false}>
+ <List.Item>
+ <List.Item.Meta title={<Text type='secondary'>主题</Text>} description={<SlideTheme />} />
+ </List.Item>
+ <List.Item>
+ <List.Item.Meta title={<Text type='secondary'>布局</Text>} description={<LayoutSettings />} />
+ </List.Item>
+ </List>
+ </Drawer>
+ </ErrorBoundary>
  );
 }

apps/admin/src/layout/feature/components/SlideTheme.tsx

@@ -1,23 +1,40 @@
 import { Segmented, Tooltip } from 'antd';
-import { type ThemeMode, useThemeMode } from 'antd-style';
+import { type ThemeMode, useTheme, useThemeMode } from 'antd-style';
+
+import SvgIcon from '@/components/SvgIcon';
 
 import type { SegmentedLabeledOption } from 'antd/lib/segmented';
 
-const options: SegmentedLabeledOption[] = [
- { label: '自动', value: 'auto' },
- { label: '亮色', value: 'light' },
- { label: '暗色', value: 'dark' },
-];
 export default function SlideTheme() {
  const { themeMode, setThemeMode } = useThemeMode();
+ const token = useTheme();
+ const options: SegmentedLabeledOption[] = [
+ {
+ label: (
+ <div style={{ padding: '16px', color: token.colorPrimary }}>
+ <SvgIcon style={{ color: token.colorPrimary }} name='sun' size={18} />
+ </div>
+ ),
+ value: 'light',
+ },
+ {
+ label: (
+ <div style={{ padding: '16px', color: token.colorPrimary }}>
+ <SvgIcon name='moon' size={18} />
+ </div>
+ ),
+ value: 'dark',
+ },
+ ];
  return (
- <Tooltip title='切换主题' placement='bottom' mouseEnterDelay={0.5}>
- <Segmented
- style={{ margin: '0 8px' }}
- value={themeMode}
- onChange={(v) => setThemeMode(v as ThemeMode)}
- options={options}
- />
- </Tooltip>
+ <Segmented
+ style={{
+ backgroundColor: token.colorBgContainerDisabled,
+ }}
+ block
+ value={themeMode}
+ onChange={(v) => setThemeMode(v as ThemeMode)}
+ options={options}
+ />
  );
 }

apps/admin/src/layout/feature/components/styles.ts

@@ -0,0 +1,18 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token, isDarkMode }) => {
+ console.log(token);
+
+ return {
+ driwer: {
+ backdropFilter: 'blur(6px) !important',
+ backgroundColor: !isDarkMode ? 'rgba(255, 255, 255, 0.9) !important' : 'rgba(0, 0, 0, 0.9) !important',
+ backgroundSize: '50% 50% !important',
+ backgroundRepeat: 'no-repeat !important',
+ backgroundImage: `url(${token.paperCyanImg}), url(${token.paperRedImg}) !important`,
+ backgroundPosition: 'right top, left bottom !important',
+ },
+ };
+});
+
+export default useStyles;

apps/admin/src/layout/header/style.ts

@@ -8,6 +8,7 @@ const useStyles = createStyles(({ token }) => {
  flexDirection: 'column',
  height: 'auto',
  background: token.colorBgBase,
+ padding: 0,
  },
  };
 });

apps/admin/src/layout/index.tsx

@@ -21,7 +21,7 @@ export const BasicLayout = (props: any) => {
 
  return (
  <Layout className={styles.layout_wrapper}>
- <Sider width={210} trigger={null} collapsed={getMenuFold} style={{ height: '100vh' }}>
+ <Sider width={240} trigger={null} theme='light' collapsed={getMenuFold} style={{ height: '100vh' }}>
  <AppLogo />
  <LayoutMenu />
  </Sider>

apps/admin/src/layout/menu/index.tsx

@@ -21,13 +21,14 @@ const getItem = (
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group',
-): MenuItem => ({
- label,
- key,
- icon,
- children,
- type,
-} as MenuItem);
+): MenuItem =>
+ ({
+ label,
+ key,
+ icon,
+ children,
+ type,
+ }) as MenuItem;
 
 const LayoutMenu = (props: any) => {
  const { pathname } = useLocation();
@@ -95,7 +96,7 @@ const LayoutMenu = (props: any) => {
  <div className='layout_menu'>
  <Spin spinning={loading} tip='Loading...'>
  <Menu
- theme='dark'
+ // theme='dark'
  mode='inline'
  triggerSubMenuAction='click'
  inlineIndent={20}