feat: 前端优化

slowlyo · Sep 2, 2024 · cfd3bf5 · cfd3bf5
1 parent 919c8d4
commit cfd3bf5
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 45 deletions.
diff --git a/admin-views/src/global.css b/admin-views/src/global.css
@@ -46,11 +46,6 @@ html, body {
     vertical-align: -0.225rem !important;
 }
 
-.owl-container {
-    height: 100%;
-    padding: 1.25rem;
-}
-
 .owl-container:has(.owl-iframe) {
     padding: 0;
 }

diff --git a/admin-views/src/layouts/components/CollapseTrigger/index.tsx b/admin-views/src/layouts/components/CollapseTrigger/index.tsx
@@ -6,8 +6,8 @@ const CollapseTrigger = ({collapsed, toggle}) => {
     return (
         <IconButton onClick={() => toggle(!collapsed)}>
             <div className="p-1 h-full flex justify-center items-center">
-                {collapsed && <Icon icon="line-md:menu-fold-right" fontSize={18}/>}
-                {collapsed || <Icon icon="line-md:menu-fold-left" fontSize={18}/>}
+                {collapsed && <Icon icon="ant-design:menu-unfold-outlined" fontSize={18}/>}
+                {collapsed || <Icon icon="ant-design:menu-fold-outlined" fontSize={18}/>}
             </div>
         </IconButton>
     )

diff --git a/admin-views/src/layouts/components/LayoutContent/index.tsx b/admin-views/src/layouts/components/LayoutContent/index.tsx
@@ -75,35 +75,33 @@ const LayoutContent = () => {
                             className="clear-children-mb custom-scrollbar"
                             ref={scrollbarRef}
                             onScroll={() => setScroll(scrollbarRef.current.getValues().scrollTop)}>
-                    <div className="owl-container">
-                        <QueueAnim className="relative"
-                                   type={[getSetting('system_theme_setting.animateInType'), getSetting('system_theme_setting.animateOutType')]}
-                                   duration={[getSetting('system_theme_setting.animateInDuration'), getSetting('system_theme_setting.animateInDuration')]}>
-                            <div key={pathname} id={pathname} className="absolute w-full iframe">
-                                <Switch location={location}>
-                                    {flattenRoutes.map(({name, path, component}, index) => {
-                                        return <Route key={index} path={path.replace(/\?.*$/, '')} render={() => (
-                                            // @ts-ignore
-                                            <KeepAlive name={name}
-                                                       cacheKey={path}
-                                                       id={`keep-alive-${name}-${path}`} // 确保ID唯一
-                                                       when={currentRoute?.keep_alive == 1 || (getSetting('system_theme_setting.keepAlive') && getSetting('layout.keep_alive_exclude')?.indexOf(path) == -1)}>
-                                                {React.createElement(component, {currentRoute})}
-                                            </KeepAlive>
-                                        )}/>
-                                    })}
-                                    <Route exact path="/">
-                                        <Redirect to={`/${defaultRoute}`}/>
-                                    </Route>
-                                    {flattenRoutes.length && (
-                                        <Route path="*" component={lazyLoad(() => import('@/pages/404'))}/>
-                                    )}
-                                </Switch>
-                            </div>
-                        </QueueAnim>
+                    <QueueAnim className="relative"
+                               type={[getSetting('system_theme_setting.animateInType'), getSetting('system_theme_setting.animateOutType')]}
+                               duration={[getSetting('system_theme_setting.animateInDuration'), getSetting('system_theme_setting.animateInDuration')]}>
+                        <div key={pathname} id={pathname} className="absolute w-full iframe p-5">
+                            <Switch location={location}>
+                                {flattenRoutes.map(({name, path, component}, index) => {
+                                    return <Route key={index} path={path.replace(/\?.*$/, '')} render={() => (
+                                        // @ts-ignore
+                                        <KeepAlive name={name}
+                                                   cacheKey={path}
+                                                   id={`keep-alive-${name}-${path}`} // 确保ID唯一
+                                                   when={currentRoute?.keep_alive == 1 || (getSetting('system_theme_setting.keepAlive') && getSetting('layout.keep_alive_exclude')?.indexOf(path) == -1)}>
+                                            {React.createElement(component, {currentRoute})}
+                                        </KeepAlive>
+                                    )}/>
+                                })}
+                                <Route exact path="/">
+                                    <Redirect to={`/${defaultRoute}`}/>
+                                </Route>
+                                {flattenRoutes.length && (
+                                    <Route path="*" component={lazyLoad(() => import('@/pages/404'))}/>
+                                )}
+                            </Switch>
+                        </div>
+                    </QueueAnim>
 
-                        {scroll > 400 && <FloatButton.BackTop visibilityHeight={0} onClick={() => backTop()}/>}
-                    </div>
+                    {scroll > 400 && <FloatButton.BackTop style={{bottom: '5rem'}} visibilityHeight={0} onClick={() => backTop()}/>}
                 </Scrollbars>
             </div>
             {!currentRoute?.is_full && <LayoutFooter/>}

diff --git a/admin-views/src/layouts/components/LayoutTopBar/components/DarkThemeButton/index.tsx b/admin-views/src/layouts/components/LayoutTopBar/components/DarkThemeButton/index.tsx
@@ -15,7 +15,7 @@ const DarkThemeButton = () => {
     }
 
     return (
-        <IconButton icon={getSetting('system_theme_setting.darkTheme') ? 'material-symbols:light-mode-outline' : 'material-symbols:dark-mode-outline'}
+        <IconButton icon={getSetting('system_theme_setting.darkTheme') ? 'ant-design:sun-outlined' : 'ant-design:moon-outlined'}
                     onClick={() => toggleDarkTheme()}/>
     )
 }

diff --git a/admin-views/src/layouts/components/LayoutTopBar/components/LocaleButton/index.tsx b/admin-views/src/layouts/components/LayoutTopBar/components/LocaleButton/index.tsx
@@ -47,7 +47,7 @@ const LocaleButton = () => {
                       defaultSelectedKeys: [currentLocale],
                   }}>
             <div>
-                <IconButton icon="lucide:languages" onClick={(e) => e.preventDefault()}/>
+                <IconButton icon="ant-design:translation-outlined" onClick={(e) => e.preventDefault()}/>
             </div>
         </Dropdown>
     )

diff --git a/admin-views/src/pages/amis/index.tsx b/admin-views/src/pages/amis/index.tsx
@@ -60,14 +60,11 @@ function AmisPage() {
     useMount(() => initPage.run(pathname, currentRoute?.page_sign))
 
     return (
-        <>
-            <Spin spinning={initPage.loading}
-                  className="w-full"
-                  style={{minHeight: initPage.loading ? '500px' : ''}}>
-                <AmisRender schema={schema}/>
-            </Spin>
-            <div className="h-5"></div>
-        </>
+        <Spin spinning={initPage.loading}
+              className="w-full"
+              style={{minHeight: initPage.loading ? '500px' : ''}}>
+            <AmisRender schema={schema}/>
+        </Spin>
     )
 }