修复双栏菜单选中问题，保存设置

slowlyo · Sep 21, 2023 · bc9a01d · bc9a01d
1 parent d6a8955
commit bc9a01d
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 41 deletions.
diff --git a/admin-views/public/scripts/loading.js b/admin-views/public/scripts/loading.js
@@ -6,31 +6,31 @@ window.$owl.appLoader = () => {
     const color = settings?.system_theme_setting?.themeColor || '#1C1C1C'
 
     const loader = `
-<style>
-    body{ margin: 0; padding: 0; }
-    #app-loader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; font-size: 20px; display: flex; align-items: center; justify-content: center; background-color: white; z-index: 9999; }
-    .loading, .loading > div { position: relative; box-sizing: border-box; }
-    .loading { display: block; font-size: 0; color: ${color}; }
-    .loading > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor; }
-    .loading { width: 46px; height: 46px; }
-    .loading > div { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin-top: -4px; margin-left: -4px; border-radius: 100%; animation: ball-spin-clockwise 1s infinite ease-in-out; }
-    .loading > div:nth-child(1) { top: 5%; left: 50%; animation-delay: -0.875s; }
-    .loading > div:nth-child(2) { top: 18.1801948466%; left: 81.8198051534%; animation-delay: -0.75s; }
-    .loading > div:nth-child(3) { top: 50%; left: 95%; animation-delay: -0.625s; }
-    .loading > div:nth-child(4) { top: 81.8198051534%; left: 81.8198051534%; animation-delay: -0.5s; }
-    .loading > div:nth-child(5) { top: 94.9999999966%; left: 50.0000000005%; animation-delay: -0.375s; }
-    .loading > div:nth-child(6) { top: 81.8198046966%; left: 18.1801949248%; animation-delay: -0.25s; }
-    .loading > div:nth-child(7) { top: 49.9999750815%; left: 5.0000051215%; animation-delay: -0.125s; }
-    .loading > div:nth-child(8) { top: 18.179464974%; left: 18.1803700518%; animation-delay: 0s; }
-    .loading.la-sm { width: 16px; height: 16px; }
-    .loading.la-sm > div { width: 4px; height: 4px; margin-top: -2px; margin-left: -2px; }
-    .loading.la-2x { width: 64px; height: 64px; }
-    .loading.la-2x > div { width: 16px; height: 16px; margin-top: -8px; margin-left: -8px; }
-    .loading.la-3x { width: 96px; height: 96px; }
-    .loading.la-3x > div { width: 24px; height: 24px; margin-top: -12px; margin-left: -12px; }
-    @keyframes ball-spin-clockwise { 0%, 100% { opacity: 1; transform: scale(1); } 20% { opacity: 1; } 80% { opacity: 0; transform: scale(0); } }
-</style>
 <div id="app-loader">
+    <style>
+        body{ margin: 0; padding: 0; }
+        #app-loader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; font-size: 20px; display: flex; align-items: center; justify-content: center; background-color: white; z-index: 9999; }
+        .loading, .loading > div { position: relative; box-sizing: border-box; }
+        .loading { display: block; font-size: 0; color: ${color}; }
+        .loading > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor; }
+        .loading { width: 46px; height: 46px; }
+        .loading > div { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin-top: -4px; margin-left: -4px; border-radius: 100%; animation: ball-spin-clockwise 1s infinite ease-in-out; }
+        .loading > div:nth-child(1) { top: 5%; left: 50%; animation-delay: -0.875s; }
+        .loading > div:nth-child(2) { top: 18.1801948466%; left: 81.8198051534%; animation-delay: -0.75s; }
+        .loading > div:nth-child(3) { top: 50%; left: 95%; animation-delay: -0.625s; }
+        .loading > div:nth-child(4) { top: 81.8198051534%; left: 81.8198051534%; animation-delay: -0.5s; }
+        .loading > div:nth-child(5) { top: 94.9999999966%; left: 50.0000000005%; animation-delay: -0.375s; }
+        .loading > div:nth-child(6) { top: 81.8198046966%; left: 18.1801949248%; animation-delay: -0.25s; }
+        .loading > div:nth-child(7) { top: 49.9999750815%; left: 5.0000051215%; animation-delay: -0.125s; }
+        .loading > div:nth-child(8) { top: 18.179464974%; left: 18.1803700518%; animation-delay: 0s; }
+        .loading.la-sm { width: 16px; height: 16px; }
+        .loading.la-sm > div { width: 4px; height: 4px; margin-top: -2px; margin-left: -2px; }
+        .loading.la-2x { width: 64px; height: 64px; }
+        .loading.la-2x > div { width: 16px; height: 16px; margin-top: -8px; margin-left: -8px; }
+        .loading.la-3x { width: 96px; height: 96px; }
+        .loading.la-3x > div { width: 24px; height: 24px; margin-top: -12px; margin-left: -12px; }
+        @keyframes ball-spin-clockwise { 0%, 100% { opacity: 1; transform: scale(1); } 20% { opacity: 1; } 80% { opacity: 0; transform: scale(0); } }
+    </style>
     <div class="loading"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
 </div>
     `

diff --git a/admin-views/src/lang/en/index.ts b/admin-views/src/lang/en/index.ts
@@ -25,5 +25,6 @@ export default {
         need_save: 'Current configuration is not saved',
         save_btn: 'Save Configuration',
         cancel_btn: 'Cancel',
+        save_success: 'Save success',
     }
 }
diff --git a/admin-views/src/lang/zh_CN/index.ts b/admin-views/src/lang/zh_CN/index.ts
@@ -25,5 +25,6 @@ export default {
         need_save: '当前配置未保存',
         save_btn: '保存配置',
         cancel_btn: '取消',
+        save_success: '保存成功',
     }
 }
diff --git a/admin-views/src/layouts/DoubleLayout/index.tsx b/admin-views/src/layouts/DoubleLayout/index.tsx
@@ -16,17 +16,15 @@ const {Header, Sider, Content} = Layout
 
 export const DoubleLayout = () => {
     const [collapsed, setCollapsed] = useState(false)
-    const {routes} = useRoute()
+    const {routes, getCurrentRoute} = useRoute()
     const history = useHistory()
     const pathname = history.location.pathname
 
     const [selectedKeys, setSelectedKeys] = useState<string[]>([])
     const [childrenRoutes, setChildrenRoutes] = useState<any[]>()
 
-    const flattenRoutes = useMemo(() => getFlattenRoutes(routes) || [], [routes])
-
     function updateMenuStatus() {
-        const current = flattenRoutes.find((r) => r.path.replace(/\?.*$/, '') === history.location.pathname)
+        const current = getCurrentRoute()
 
         if (!current) {
             return
@@ -52,7 +50,7 @@ export const DoubleLayout = () => {
     }
 
     const initChildrenRoutes = () => {
-        const currentRoute = flattenRoutes.find((r) => r.path === pathname)
+        const currentRoute = getCurrentRoute()
         if (currentRoute?.meta.parents.length) {
             setChildrenRoutes(getTopRoute(currentRoute).children)
         } else {

diff --git a/admin-views/src/layouts/TopLayout/index.tsx b/admin-views/src/layouts/TopLayout/index.tsx
@@ -5,7 +5,7 @@ import LayoutContent from '@/layouts/components/LayoutContent'
 import LayoutFooter from '@/layouts/components/LayoutFooter'
 import LayoutTopBar from '@/layouts/components/LayoutTopBar'
 
-const {Header, Footer, Content} = Layout
+const {Header, Content} = Layout
 
 const TopLayout = () => {
     return (

diff --git a/admin-views/src/layouts/components/LayoutMenu/index.tsx b/admin-views/src/layouts/components/LayoutMenu/index.tsx
@@ -23,7 +23,7 @@ const LayoutMenu = (
     const pathname = history.location.pathname
     const currentComponent = qs.parseUrl(pathname).url.slice(1)
 
-    const {routes, defaultRoute} = useRoute()
+    const {routes, defaultRoute, getCurrentRoute} = useRoute()
     const defaultSelectedKeys = [currentComponent || defaultRoute]
     const paths = (currentComponent || defaultRoute)?.split('/')
     const defaultOpenKeys = paths?.slice(0, paths.length - 1)
@@ -36,15 +36,17 @@ const LayoutMenu = (
     const flattenRoutes = useMemo(() => getFlattenRoutes(customRoutes) || [], [customRoutes])
 
     function updateMenuStatus() {
-        const current = flattenRoutes.find((r) => r.path.replace(/\?.*$/, '') === pathname)
+        const current = getCurrentRoute()
 
         if (!current) {
             return
         }
 
         const _parents = current.meta.parents.map((p) => p.path)
 
-        setSelectedKeys([current.path, ..._parents])
+        const getListPath = (path: string) => path.replace(/\/create$|\/:id\/edit$|\/:id$/g, '')
+
+        setSelectedKeys([current.path, getListPath(current.path), ..._parents])
 
         if (mode == 'inline') {
             setOpenKeys([...openKeys, ..._parents])

diff --git a/admin-views/src/layouts/components/SettingPanel/index.tsx b/admin-views/src/layouts/components/SettingPanel/index.tsx
@@ -1,11 +1,13 @@
-import {Alert, Button, ColorPicker, Drawer, Form, Space} from 'antd'
+import {Alert, Button, ColorPicker, Drawer, Form, message, Space} from 'antd'
 import useStore from '@/hooks/useStore'
 import {useLang} from '@/hooks/useLang'
 import SelectLayout from '@/layouts/components/SettingPanel/components/SelectLayout'
 import useTheme from '@/hooks/useTheme'
 import useSetting from '@/hooks/useSetting'
 import {useHistory} from 'react-router-dom'
 import {appLoaded, getCacheKey} from '@/utils/common'
+import {useRequest} from 'ahooks'
+import {saveSettings} from '@/service/api'
 
 const SettingPanel = () => {
     const history = useHistory()
@@ -44,8 +46,15 @@ const SettingPanel = () => {
         }
     }
 
-    const save = () => {
-        // localStorage.setItem(getCacheKey('settings'), JSON.stringify(res.data))
+    const save = useRequest(saveSettings, {
+        manual: true,
+        onSuccess: () => {
+            message.success(t('theme_setting.save_success'))
+        }
+    })
+
+    const submit = () => {
+        save.run({system_theme_setting: settings.system_theme_setting})
     }
 
     return (
@@ -55,7 +64,7 @@ const SettingPanel = () => {
                 title={t('theme_setting.title')}
                 footer={(
                     <Space>
-                        <Button type="primary">{t('theme_setting.save_btn')}</Button>
+                        <Button type="primary" onClick={submit}>{t('theme_setting.save_btn')}</Button>
                         <Button onClick={closeSetting}>{t('theme_setting.cancel_btn')}</Button>
                     </Space>
                 )}>

diff --git a/admin-views/src/layouts/index.tsx b/admin-views/src/layouts/index.tsx
@@ -1,6 +1,5 @@
 import React, {useEffect, useState} from 'react'
 import useRoute from '@/routes'
-import {getFlattenRoutes} from '@/routes/helpers'
 import {useHistory} from 'react-router'
 import DefaultLayout from '@/layouts/DefaultLayout'
 import LayoutContent from '@/layouts/components/LayoutContent'
@@ -14,14 +13,14 @@ import useSetting from '@/hooks/useSetting'
 import {appLoaded} from '@/utils/common'
 
 const Layout = () => {
-    const {routes} = useRoute()
+    const {getCurrentRoute} = useRoute()
     const history = useHistory()
     const pathname = history.location.pathname
     const isSmallScreen = useSmallScreen()
     const [isSm, setIsSm] = useState<boolean>(isSmallScreen)
     const {getSetting} = useSetting()
 
-    const currentRoute = getFlattenRoutes(routes).find((route) => route.path.replace(/\?.*$/, '') === history.location.pathname)
+    const currentRoute = getCurrentRoute()
 
     if (currentRoute?.is_full) {
         return (
@@ -31,7 +30,7 @@ const Layout = () => {
         )
     }
 
-    const RenderLayout = (mode: string) => {
+    const RenderLayout = (mode:string) => {
         switch (mode) {
             case 'default':
                 return <DefaultLayout/>