From 72e242c7b7909a523258ebacea5dd77ab5a99776 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E6=96=AF=EF=BC=88xiaosi=EF=BC=89?= <1531733886@qq.com> Date: Sat, 3 Dec 2022 01:47:05 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20=E4=BF=AE=E6=94=B9=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 4 +- .../Setting/ThemeSettings/index.less | 14 +++ .../Setting/ThemeSettings/index.tsx | 34 ++++++ src/layout/components/Setting/index.less | 100 +++++++++--------- src/layout/components/Setting/index.tsx | 6 +- src/locales/en_US/modules/layout.ts | 1 + src/locales/zh_CN/modules/layout.ts | 1 + src/store/modules/app.ts | 23 ++-- 8 files changed, 124 insertions(+), 59 deletions(-) create mode 100644 src/layout/components/Setting/ThemeSettings/index.less create mode 100644 src/layout/components/Setting/ThemeSettings/index.tsx diff --git a/src/App.tsx b/src/App.tsx index a85c3c4..7196fe7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -14,7 +14,7 @@ import { localeConfig } from './locales'; import { useStoreApp } from './hooks/setting/useStoreApp'; function App() { - const { locale, themeMode } = useStoreApp(); + const { locale, color, themeMode } = useStoreApp(); const getLocale = useMemo(() => { if (locale === 'en-US') { @@ -30,7 +30,7 @@ function App() { { + const { color, setAppConfig } = useStoreApp(); + + const colorList = ['#722ed1', '#eb2f96', '#52c41a', '#13c2c2', '#fadb14', '#fa541c', '#f5222d']; + + return ( +
+
+ {colorList.map((i) => { + return ( +
{ + setAppConfig({ color: i }); + }} + > + {color === i && } + {/* */} +
+ ); + })} +
+
+ ); +}); + +export default ThemeSettings; diff --git a/src/layout/components/Setting/index.less b/src/layout/components/Setting/index.less index b48e4a1..4860745 100644 --- a/src/layout/components/Setting/index.less +++ b/src/layout/components/Setting/index.less @@ -1,61 +1,65 @@ -.sidebar_seting { - display: flex; - align-items: center; - justify-content: space-around; +.setting { + padding: 0 16px; - .sidebar_mode { - position: relative; - width: 80px; - height: 60px; - background: #f0f2f5; - border-radius: 5px; - box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%); - overflow: hidden; + .sidebar_seting { + display: flex; + align-items: center; + justify-content: space-between; - &:nth-child(1) { - div { - &:nth-child(1) { - width: 30%; - height: 100%; - } + .sidebar_mode { + position: relative; + width: 80px; + height: 60px; + background: #f0f2f5; + border-radius: 5px; + box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%); + overflow: hidden; + + &:nth-child(1) { + div { + &:nth-child(1) { + width: 30%; + height: 100%; + } - &:nth-child(2) { - position: absolute; - top: 0; - right: 0; - width: 70%; - height: 30%; - background: #fff; - box-shadow: 0 0 1px #888; + &:nth-child(2) { + position: absolute; + top: 0; + right: 0; + width: 70%; + height: 30%; + background: #fff; + box-shadow: 0 0 1px #888; + } } } - } - &:nth-child(2) { - div { - &:nth-child(1) { - width: 100%; - height: 30%; - box-shadow: 0 0 1px #888; + &:nth-child(2) { + div { + &:nth-child(1) { + width: 100%; + height: 30%; + box-shadow: 0 0 1px #888; + } } } - } - &:nth-child(3) { - div { - &:nth-child(1) { - width: 30%; - height: 100%; - background: #fff; - } + &:nth-child(3) { + div { + &:nth-child(1) { + width: 30%; + height: 100%; + background: #fff; + } - &:nth-child(2) { - position: absolute; - top: 0; - right: 0; - width: 100%; - height: 30%; - box-shadow: 0 0 1px #888; + &:nth-child(2) { + position: absolute; + top: 0; + right: 0; + width: 100%; + height: 30%; + box-shadow: 0 0 1px #888; + } } } } diff --git a/src/layout/components/Setting/index.tsx b/src/layout/components/Setting/index.tsx index ee65bc7..dba0592 100644 --- a/src/layout/components/Setting/index.tsx +++ b/src/layout/components/Setting/index.tsx @@ -1,6 +1,7 @@ import { SettingOutlined } from '@ant-design/icons'; import { Divider, Drawer, theme, Tooltip } from 'antd'; import { memo, useState } from 'react'; +import ThemeSettings from './ThemeSettings'; import { useLocale } from '@/locales'; import './index.less'; import type { AppConfigMode } from '@/store/modules/app'; @@ -41,7 +42,7 @@ const Setting = memo(() => { onClose={() => setDrawerOpen(false)} open={drawerOpen} > -
+
{intl.formatMessage({ id: 'layout.setting.layoutSettings' })}
{sidebarSeting.map((i) => { @@ -66,6 +67,9 @@ const Setting = memo(() => { ); })}
+ {intl.formatMessage({ id: 'layout.setting.themeSettings' })} + +
diff --git a/src/locales/en_US/modules/layout.ts b/src/locales/en_US/modules/layout.ts index a2f7dd0..65ee118 100644 --- a/src/locales/en_US/modules/layout.ts +++ b/src/locales/en_US/modules/layout.ts @@ -1,4 +1,5 @@ export default { 'layout.setting.title': 'Setting', 'layout.setting.layoutSettings': 'Layout Settings', + 'layout.setting.themeSettings': 'Theme Settings', }; diff --git a/src/locales/zh_CN/modules/layout.ts b/src/locales/zh_CN/modules/layout.ts index 2bd8768..3a8ae0e 100644 --- a/src/locales/zh_CN/modules/layout.ts +++ b/src/locales/zh_CN/modules/layout.ts @@ -1,4 +1,5 @@ export default { 'layout.setting.title': '设置', 'layout.setting.layoutSettings': '布局设置', + 'layout.setting.themeSettings': '主题设置', }; diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index e6d1ece..5f60aae 100644 --- a/src/store/modules/app.ts +++ b/src/store/modules/app.ts @@ -7,19 +7,25 @@ export interface AppConfigMode { locale: LocaleType; themeMode: 'dark' | 'light'; sidebarMode: 'vertical' | 'horizontal' | 'blend'; + color: string; } -interface appConfig { +interface AppConfig { appConfigMode: AppConfigMode; } -const initialState: appConfig = { - appConfigMode: { - collapsed: false, - locale: 'zh-CN', - themeMode: 'light', - sidebarMode: 'vertical', - }, +const defaultAppConfig: AppConfigMode = { + collapsed: false, + locale: 'zh-CN', + themeMode: 'light', + sidebarMode: 'vertical', + color: '#409eff', +}; + +const localAppConfig = localStorage.getItem('appConfig'); + +const initialState: AppConfig = { + appConfigMode: localAppConfig ? JSON.parse(localAppConfig) : defaultAppConfig, }; export const appSlice = createSlice({ @@ -28,6 +34,7 @@ export const appSlice = createSlice({ reducers: { setAppConfigMode: (state, action: PayloadAction) => { state.appConfigMode = action.payload; + localStorage.setItem('appConfig', JSON.stringify(state.appConfigMode)); }, }, });