feat: 优化菜单布局

JackySoft · Dec 18, 2024 · e9e9d00 · e9e9d00
1 parent 075ef93
commit e9e9d00
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 63 deletions.
diff --git a/packages/admin/src/components/Header/Header.tsx b/packages/admin/src/components/Header/Header.tsx
@@ -6,6 +6,7 @@ import { usePageStore } from '@marsview/materials/stores/pageStore';
 import { useProjectStore } from '@/stores/projectStore';
 import Logo from '../Logo/Logo';
 import BreadList from '../BreadList/BreadList';
+import Menu from '../Menu/Menu';
 import { getUserAvatar } from '@/api';
 import styles from './index.module.less';
 
@@ -37,7 +38,7 @@ const Header = memo(() => {
   return (
     <div className={styles.header} style={style}>
       {/* 加载面包屑，左右布局时，面包屑在顶部 */}
-      {projectInfo.layout === 1 && (
+      {projectInfo.layout === 1 ? (
         <Flex align="center">
           <div onClick={toggleCollapsed} style={{ cursor: 'pointer' }}>
             {collapsed ? (
@@ -48,9 +49,15 @@ const Header = memo(() => {
           </div>
           {projectInfo.breadcrumb === 1 && <BreadList />}
         </Flex>
-      )}
+      ) : null}
+
+      {projectInfo.layout === 2 ? (
+        <Flex align="center">
+          <Logo />
+          <Menu />
+        </Flex>
+      ) : null}
 
-      {projectInfo.layout === 2 ? <Logo /> : <span></span>}
       {/* 用户信息 */}
       <div className={styles.user}>
         {/* 用户头像 */}

diff --git a/packages/admin/src/components/Logo/index.module.less b/packages/admin/src/components/Logo/index.module.less
@@ -5,9 +5,10 @@
   gap: 15px;
   cursor: pointer;
   color: #fff;
+  width: 255px;
   img {
-    max-width: 100%;
-    max-height: 100%;
+    max-width: 80%;
+    max-height: 80%;
   }
 }
 .logoName {

diff --git a/packages/admin/src/components/Menu/Menu.tsx b/packages/admin/src/components/Menu/Menu.tsx
@@ -68,12 +68,16 @@ const MenuComponent: React.FC = () => {
 
   return (
     <div
-      style={{
-        width: collapsed ? 79 : 255,
-        background: projectInfo.menu_theme_color === 'light' ? '#fff' : '#001529',
-        borderRight: projectInfo.layout === 2 ? '1px solid #e8e9eb' : 'none',
-        overflowX: 'hidden',
-      }}
+      style={
+        projectInfo.menu_mode === 'horizontal'
+          ? { width: 'calc(100vw - 458px)' }
+          : {
+              width: collapsed ? 79 : 255,
+              background: projectInfo.menu_theme_color === 'light' ? '#fff' : '#001529',
+              borderRight: projectInfo.layout === 2 ? '1px solid #e8e9eb' : 'none',
+              overflowX: 'hidden',
+            }
+      }
     >
       <ConfigProvider
         theme={{
@@ -90,9 +94,9 @@ const MenuComponent: React.FC = () => {
           onClick={onClick}
           theme={projectInfo.menu_theme_color as MenuTheme}
           selectedKeys={selectedKeys}
-          style={{ height: 'calc(100vh - 64px)', border: 'none', overflowY: 'auto' }}
+          style={projectInfo.menu_mode === 'horizontal' ? {} : { height: 'calc(100vh - 64px)', border: 'none', overflowY: 'auto' }}
           mode={projectInfo.menu_mode}
-          inlineCollapsed={collapsed}
+          inlineCollapsed={projectInfo.menu_mode === 'horizontal' ? undefined : collapsed}
           items={menuList}
         />
       </ConfigProvider>

diff --git a/packages/admin/src/layout/layout.tsx b/packages/admin/src/layout/layout.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Outlet, useParams, useSearchParams, useNavigate, useLoaderData, useLocation } from 'react-router-dom';
 import { ConfigProvider, Layout } from 'antd';
 import Header from '../components/Header/Header';
@@ -90,18 +90,15 @@ const AdminLayout = () => {
   }, [projectId]);
 
   // 计算渲染区容器实际高度
-  let height = 64;
-  let calcHeight = '';
-  if (projectInfo.tag) {
-    height += 50;
-  }
-  calcHeight = `calc(100vh - ${height}px)`;
+  const calcHeight = useMemo(() => {
+    return projectInfo.tag ? `calc(100vh - 114px)` : `calc(100vh - 64px)`;
+  }, [projectInfo.tag]);
 
   // 定义Footer
   const Footer = () => (
     <Layout.Footer>
       <div className="footnote">
-        <span>Marsview 访问端</span>
+        <span>Copyright © 2024 Marsview. All Rights Reserved. </span>
       </div>
     </Layout.Footer>
   );
@@ -139,23 +136,17 @@ const AdminLayout = () => {
             </div>
           </Layout>
         )}
-        {/* 上左右布局 */}
+        {/* 上下布局 */}
         {projectInfo.layout === 2 && (
           <>
             <Header />
-            <Layout style={{ flexDirection: 'row' }}>
-              <Menu />
-              <Layout style={{ width: 'calc(100vw - 255px)' }}>
-                {/* 加载页签 */}
-                {projectInfo.tag ? <Tab /> : null}
-                {/* 加载内容 */}
-                <div style={{ height: calcHeight, overflow: 'auto' }}>
-                  {/* 加载面包屑 */}
-                  {projectInfo.breadcrumb === 1 && <BreadList />}
-                  <Outlet></Outlet>
-                  {projectInfo.footer === 1 && <Footer />}
-                </div>
-              </Layout>
+            {/* 加载页签 */}
+            {projectInfo.tag ? <Tab /> : null}
+            <Layout style={{ padding: 20, backgroundColor: '#f3f5f9', height: calcHeight, overflow: 'auto' }}>
+              {/* 加载面包屑 */}
+              {projectInfo.breadcrumb === 1 && <BreadList />}
+              <Outlet></Outlet>
+              {projectInfo.footer === 1 && <Footer />}
             </Layout>
           </>
         )}

diff --git a/packages/editor/src/layout/components/Header/index.tsx b/packages/editor/src/layout/components/Header/index.tsx
@@ -322,13 +322,12 @@ const Header = memo(() => {
                   {`${userInfo?.userName.split('@')[0]}` || '开发者'}
                 </a>
                 {avatar && <img width={25} style={{ verticalAlign: 'sub', borderRadius: '50%' }} src={avatar} />}
-                {/* <DownOutlined style={{ color: '#7d33ff' }} /> */}
               </Flex>
             </Dropdown>
 
             {/* github开源地址 */}
             {
-              <a href="https://github.com/JackySoft/marsview" className={styles.githubCorner} aria-label="View source on GitHub">
+              <a href="https://github.com/JackySoft/marsview" className={styles.githubCorner} aria-label="View source on GitHub" target="_blank">
                 <svg
                   width="50"
                   height="50"
@@ -350,23 +349,6 @@ const Header = memo(() => {
                   />
                 </svg>
               </a>
-              // <a href="https://github.com/JackySoft/marsview" aria-label="github" target="_blank">
-              //   <svg
-              //     className={styles.github}
-              //     viewBox="0 0 1024 1024"
-              //     version="1.1"
-              //     xmlns="http://www.w3.org/2000/svg"
-              //     p-id="4250"
-              //     width="20"
-              //     height="20"
-              //   >
-              //     <path
-              //       d="M512 12.64c-282.752 0-512 229.216-512 512 0 226.208 146.72 418.144 350.144 485.824 25.6 4.736 35.008-11.104 35.008-24.64 0-12.192-0.48-52.544-0.704-95.328-142.464 30.976-172.512-60.416-172.512-60.416-23.296-59.168-56.832-74.912-56.832-74.912-46.464-31.776 3.52-31.136 3.52-31.136 51.392 3.616 78.464 52.768 78.464 52.768 45.664 78.272 119.776 55.648 148.992 42.56 4.576-33.088 17.856-55.68 32.512-68.48-113.728-12.928-233.28-56.864-233.28-253.024 0-55.904 20-101.568 52.768-137.44-5.312-12.896-22.848-64.96 4.96-135.488 0 0 43.008-13.76 140.832 52.48 40.832-11.36 84.64-17.024 128.16-17.248 43.488 0.192 87.328 5.888 128.256 17.248 97.728-66.24 140.64-52.48 140.64-52.48 27.872 70.528 10.336 122.592 5.024 135.488 32.832 35.84 52.704 81.536 52.704 137.44 0 196.64-119.776 239.936-233.792 252.64 18.368 15.904 34.72 47.04 34.72 94.816 0 68.512-0.608 123.648-0.608 140.512 0 13.632 9.216 29.6 35.168 24.576 203.328-67.776 349.856-259.616 349.856-485.76 0-282.784-229.248-512-512-512z"
-              //       fill="#2c2c2c"
-              //       p-id="4251"
-              //     ></path>
-              //   </svg>
-              // </a>
             }
           </div>
         </div>

diff --git a/packages/editor/src/pages/admin/config/index.tsx b/packages/editor/src/pages/admin/config/index.tsx
@@ -98,21 +98,33 @@ const Config: React.FC = memo(() => {
         </Form.Item>
         <h3>系统配置</h3>
         <Form.Item label="系统布局" name="layout">
-          <Radio.Group {...props}>
+          <Radio.Group {...props} onChange={(event) => form.setFieldValue('menu_mode', event.target.value === 1 ? 'inline' : 'horizontal')}>
             <Radio value={1}>
-              <img style={{ width: 150 }} src="/imgs/layout-1.png" alt="左右布局" />
+              <img style={{ width: 100 }} src="https://imgcloud.cdn.bcebos.com/f35323e9a2625a85909cb6f3c.png" alt="左右布局" />
             </Radio>
             <Radio value={2}>
-              <img style={{ width: 150 }} src="/imgs/layout-2.png" alt="上左右下布局" />
+              <img style={{ width: 100 }} src="https://imgcloud.cdn.bcebos.com/f35323e9a2625a85909cb6f3d.png" alt="上左右下布局" />
             </Radio>
           </Radio.Group>
         </Form.Item>
-        <Form.Item label="菜单模式" name="menu_mode">
-          <Radio.Group {...props} buttonStyle="solid">
-            <Radio.Button value="vertical">垂直</Radio.Button>
-            {/* <Radio.Button value="horizontal">水平</Radio.Button> */}
-            <Radio.Button value="inline">内嵌</Radio.Button>
-          </Radio.Group>
+        <Form.Item noStyle shouldUpdate>
+          {(form: any) => {
+            const layout = form.getFieldValue('layout');
+            return layout === 1 ? (
+              <Form.Item label="菜单模式" name="menu_mode">
+                <Radio.Group {...props} buttonStyle="solid">
+                  <Radio.Button value="vertical">垂直</Radio.Button>
+                  <Radio.Button value="inline">内嵌</Radio.Button>
+                </Radio.Group>
+              </Form.Item>
+            ) : (
+              <Form.Item label="菜单模式" name="menu_mode">
+                <Radio.Group {...props} buttonStyle="solid">
+                  <Radio.Button value="horizontal">水平</Radio.Button>
+                </Radio.Group>
+              </Form.Item>
+            );
+          }}
         </Form.Item>
         <Form.Item label="菜单主题" name="menu_theme_color">
           <Radio.Group {...props}>