refactor(projects): refactor themeSettings

Author: Ohh-889

pnpm-lock.yaml

@@ -10,7 +10,7 @@ const DARK_MODE_MEDIA_QUERY = '(prefers-color-scheme: dark)';
 const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
   const [themeMode, setThemeMode] = useState<ThemeModeType>((localStg.get('themeMode') as ThemeModeType) || 'light');
 
-  const darkMode = useMemo(() => themeMode === 'dark', [themeMode]);
+  const darkMode = themeMode === 'dark';
 
   function changeThemeMode(mode: ThemeModeType) {
     setThemeMode(mode);

src/features/themeSchema/ThemeProvider.tsx

@@ -0,0 +1,36 @@
+import { ThemeMode } from 'ahooks/lib/useTheme';
+import type { ThemeModeType } from 'ahooks/lib/useTheme';
+import type { SegmentedOptions } from 'antd/es/segmented';
+import { useContext } from 'react';
+
+import { ThemeContext, icons } from './themeContext';
+
+const ThemeSchemaSegmented = () => {
+  const { setThemeScheme, themeScheme } = useContext(ThemeContext);
+
+  const OPTIONS = Object.values(ThemeMode).map(item => {
+    const key = item as ThemeModeType;
+    return {
+      label: (
+        <div className="w-[70px] flex justify-center">
+          <SvgIcon
+            className="h-28px text-icon-small"
+            icon={icons[key]}
+          />
+        </div>
+      ),
+      value: item
+    };
+  }) satisfies SegmentedOptions;
+
+  return (
+    <ASegmented
+      className="bg-layout"
+      options={OPTIONS}
+      value={themeScheme}
+      onChange={setThemeScheme}
+    />
+  );
+};
+
+export default ThemeSchemaSegmented;

src/features/themeSchema/ThemeSchemaSegmented.tsx

@@ -2,4 +2,6 @@ export * from './themeContext';
 
 export { default as ThemeProvider } from './ThemeProvider';
 
+export { default as ThemeSchemaSegmented } from './ThemeSchemaSegmented';
+
 export { default as ThemeSchemaSwitch } from './ThemeSchemaSwitch';

src/features/themeSchema/index.ts

@@ -1,9 +1,6 @@
-import { ThemeMode } from 'ahooks/lib/useTheme';
-import type { ThemeModeType } from 'ahooks/lib/useTheme';
-import { Segmented, Switch } from 'antd';
-import type { SegmentedOptions } from 'antd/es/segmented';
+import { Switch } from 'antd';
 
-import { ThemeContext, icons } from '@/features';
+import { ThemeSchemaSegmented } from '@/features';
 import {
   getThemeSettings,
   setColourWeakness,
@@ -14,33 +11,12 @@ import {
 import SettingItem from '../components/SettingItem';
 import '@/styles/css/darkMode.css';
 
-const OPTIONS: SegmentedOptions = Object.values(ThemeMode).map(item => {
-  const key = item as ThemeModeType;
-  return {
-    label: (
-      <div className="w-[70px] flex justify-center">
-        <SvgIcon
-          className="h-28px text-icon-small"
-          icon={icons[key]}
-        />
-      </div>
-    ),
-    value: item
-  };
-});
-
 const DarkMode = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
 
-  const { setThemeScheme, themeScheme } = useContext(ThemeContext);
-
   const themeSettings = useAppSelector(getThemeSettings);
 
-  function handleSegmentChange(value: string | number) {
-    setThemeScheme(value as ThemeModeType);
-  }
-
   function handleGrayscaleChange(value: boolean) {
     dispatch(setGrayscale(value));
   }
@@ -55,12 +31,7 @@ const DarkMode = () => {
   return (
     <div className="flex-col-stretch gap-16px">
       <div className="i-flex-center">
-        <Segmented
-          className="bg-layout"
-          options={OPTIONS}
-          value={themeScheme}
-          onChange={handleSegmentChange}
-        />
+        <ThemeSchemaSegmented />
       </div>
 
       <SettingItem

src/layouts/modules/theme-drawer/modules/DarkMode.tsx

@@ -29,6 +29,7 @@ declare global {
   const APopover: typeof import('antd')['Popover']
   const ARadio: typeof import('antd')['Radio']
   const ARow: typeof import('antd')['Row']
+  const ASegmented: typeof import('antd')['Segmented']
   const ASelect: typeof import('antd')['Select']
   const ASpace: typeof import('antd')['Space']
   const AStatistic: typeof import('antd')['Statistic']