增加部分设置项

slowlyo · Sep 25, 2023 · 4ac9d57 · 4ac9d57
1 parent e0dd92b
commit 4ac9d57
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 20 deletions.
diff --git a/admin-views/src/lang/en/index.ts b/admin-views/src/lang/en/index.ts
@@ -26,5 +26,11 @@ export default {
         save_btn: 'Save Configuration',
         cancel_btn: 'Cancel',
         save_success: 'Save success',
+        login_template: 'Login Template',
+        default: 'Default',
+        top_theme: 'Top Menu Theme',
+        sider_theme: 'Sider Theme',
+        light: 'Light',
+        dark: 'Dark',
     }
 }
diff --git a/admin-views/src/lang/zh_CN/index.ts b/admin-views/src/lang/zh_CN/index.ts
@@ -26,5 +26,11 @@ export default {
         save_btn: '保存配置',
         cancel_btn: '取消',
         save_success: '保存成功',
+        login_template: '登录页模板',
+        default: '默认',
+        top_theme: '顶部菜单主题',
+        sider_theme: '侧边栏主题',
+        light: '亮色',
+        dark: '暗色',
     }
 }
diff --git a/admin-views/src/layouts/components/SettingPanel/index.tsx b/admin-views/src/layouts/components/SettingPanel/index.tsx
@@ -1,4 +1,4 @@
-import {Alert, Button, ColorPicker, Drawer, Form, message, Space} from 'antd'
+import {Badge, Button, ColorPicker, Drawer, Form, message, Radio, Space} from 'antd'
 import useStore from '@/hooks/useStore'
 import {useLang} from '@/hooks/useLang'
 import SelectLayout from '@/layouts/components/SettingPanel/components/SelectLayout'
@@ -8,6 +8,7 @@ import {useHistory} from 'react-router-dom'
 import {appLoaded, getCacheKey} from '@/utils/common'
 import {useRequest} from 'ahooks'
 import {saveSettings} from '@/service/api'
+import {useState} from 'react'
 
 const SettingPanel = () => {
     const history = useHistory()
@@ -16,7 +17,8 @@ const SettingPanel = () => {
     const {setThemeColor} = useTheme()
     const {settings} = useSetting()
     const {t} = useLang()
-    const cachedSettings = localStorage.getItem(getCacheKey('settings'))
+
+    const [cachedSettings, setCachedSettings] = useState(localStorage.getItem(getCacheKey('settings')))
 
     const closeSetting = () => {
         dispatch({
@@ -29,10 +31,12 @@ const SettingPanel = () => {
         if (key === 'themeColor') setThemeColor(value)
 
         const system_theme_setting = Object.assign({}, settings.system_theme_setting, {[key]: value})
+        console.log(system_theme_setting)
         dispatch({
             type: 'update-settings',
             payload: {settings: {...settings, system_theme_setting}}
         })
+
         if (key === 'layoutMode') {
             // 解决刷新后页面不显示的问题
             window.$owl.appLoader()
@@ -50,6 +54,10 @@ const SettingPanel = () => {
         manual: true,
         onSuccess: () => {
             message.success(t('theme_setting.save_success'))
+
+            // 保存成功后，更新缓存
+            localStorage.setItem(getCacheKey('settings'), JSON.stringify(settings))
+            setCachedSettings(JSON.stringify(settings))
         }
     })
 
@@ -63,35 +71,72 @@ const SettingPanel = () => {
                 closeIcon={false}
                 title={t('theme_setting.title')}
                 footer={(
-                    <Space>
-                        <Button type="primary" onClick={submit}>{t('theme_setting.save_btn')}</Button>
-                        <Button onClick={closeSetting}>{t('theme_setting.cancel_btn')}</Button>
-                    </Space>
+                    <>
+                        <Space>
+                            <Badge dot count={cachedSettings != JSON.stringify(state.settings) ? 1 : 0}>
+                                <Button type="primary"
+                                        onClick={submit}
+                                        disabled={save.loading}>{t('theme_setting.save_btn')}</Button>
+                            </Badge>
+                            <Button onClick={closeSetting}
+                                    disabled={save.loading}>{t('theme_setting.cancel_btn')}</Button>
+
+                        </Space>
+                    </>
                 )}>
-            {cachedSettings != JSON.stringify(state.settings) && (
-                <Alert className="mb-3" message={t('theme_setting.need_save')} showIcon type="warning"/>
-            )}
-            <Form
-                labelAlign="left"
-                labelCol={{span: 8}}
-                wrapperCol={{span: 16}}
-            >
+            <Form labelAlign="left" labelCol={{span: 8}} wrapperCol={{span: 16}}>
+                {/*主题色*/}
                 <Form.Item colon={false} label={t('theme_setting.theme_color')}>
                     <ColorPicker showText
                                  disabledAlpha
                                  onChange={(_, hex) => handleChange('themeColor', hex)}
-                                 presets={[
-                                     {
-                                         label: t('theme_setting.preinstall'),
-                                         colors: ['#1677FF', '#F5222D', '#FA8C16', '#52C41A', '#13A8A8', '#2F54EB', '#722ED1', '#EB2F96'],
-                                     },
-                                 ]}/>
+                                 presets={[{
+                                     label: t('theme_setting.preinstall'),
+                                     colors: ['#1677FF', '#F5222D', '#FA8C16', '#52C41A', '#13A8A8', '#2F54EB', '#722ED1', '#EB2F96'],
+                                 }]}/>
                 </Form.Item>
 
+                {/*布局模式*/}
                 <Form.Item colon={false} label={t('theme_setting.layout_mode')}>
                     <SelectLayout current={settings.system_theme_setting.layoutMode}
                                   change={(value) => handleChange('layoutMode', value)}/>
                 </Form.Item>
+
+                {/*登录页模板*/}
+                <Form.Item colon={false} label={t('theme_setting.login_template')}>
+                    <Radio.Group
+                        onChange={(e) => handleChange('loginTemplate', e.target.value)}
+                        value={settings.system_theme_setting.loginTemplate}
+                        optionType="button"
+                        options={[
+                            {label: t('theme_setting.default'), value: 'default'},
+                            {label: 'amis', value: 'amis'}
+                        ]}/>
+                </Form.Item>
+
+                {/*顶部菜单主题*/}
+                <Form.Item colon={false} label={t('theme_setting.top_theme')}>
+                    <Radio.Group
+                        onChange={(e) => handleChange('topTheme', e.target.value)}
+                        value={settings.system_theme_setting.topTheme}
+                        optionType="button"
+                        options={[
+                            {label: t('theme_setting.light'), value: 'light'},
+                            {label: t('theme_setting.dark'), value: 'dark'}
+                        ]}/>
+                </Form.Item>
+
+                {/*侧边栏主题*/}
+                <Form.Item colon={false} label={t('theme_setting.sider_theme')}>
+                    <Radio.Group
+                        onChange={(e) => handleChange('siderTheme', e.target.value)}
+                        value={settings.system_theme_setting.siderTheme}
+                        optionType="button"
+                        options={[
+                            {label: t('theme_setting.light'), value: 'light'},
+                            {label: t('theme_setting.dark'), value: 'dark'}
+                        ]}/>
+                </Form.Item>
             </Form>
         </Drawer>
     )