fix: layout

hqwlkj · Mar 6, 2024 · 18fdd95 · 18fdd95
1 parent 086910d
commit 18fdd95
Show file tree

Hide file tree

Showing 13 changed files with 190 additions and 117 deletions.
diff --git a/README.md b/README.md
@@ -5,11 +5,11 @@
 <br/>
 <p align="center">
   <a href='https://umijs.org/zh-CN/'>
-    <img src='https://user-images.githubusercontent.com/12181423/150708308-e0ca55ed-1bda-4db6-9e69-f34dbc27c01d.png' width='80' />
+    <img src='https://user-images.githubusercontent.com/12181423/150708308-e0ca55ed-1bda-4db6-9e69-f34dbc27c01d.png' width='80'  alt="umijs"/>
   </a>
   <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
   <a href='https://mobile.ant.design/zh'>
-    <img src='https://gw.alipayobjects.com/zos/bmw-prod/b2c7ff8b-eba0-4af9-9dd5-0b5b17f42c57.svg' width='105'/>
+    <img src='https://gw.alipayobjects.com/zos/bmw-prod/b2c7ff8b-eba0-4af9-9dd5-0b5b17f42c57.svg' width='105' alt="mobile"/>
   </a>
 </p>
 <p align="center" height='100'>

diff --git a/config/config.ts b/config/config.ts
@@ -1,51 +1,57 @@
-import { defineConfig } from "umi";
-import routes from "./routes";
-
+import { defineConfig } from '@umijs/max';
+import routes from './routes';
 
 /**
  * UMI 配置
  * 更多相关配置查询 https://umijs.org/zh-CN/docs/config
  */
 export default defineConfig({
-  layout: false,
-  title: "umi-antd-mobile",
-  dynamicImport: {
-    loading: "@/pages/loading"
-  },
+  // layout: true,
+  title: 'umi-antd-mobile',
+  // dynamicImport: {
+  //   loading: "@/pages/loading"
+  // },
   routes: [...routes],
-  nodeModulesTransform: {
-    type: "none"
-  },
-  antdMobile: {
-    hd: true
-  },
+  // nodeModulesTransform: {
+  //   type: "none"
+  // },
+  // antdMobile: {
+  //   hd: true
+  // },
   alias: {
     // "antd-mobile": "antd-mobile/2x" //使用高清适配
   },
-  mfsu: { production: { output: ".mfsu-production" } },
-  fastRefresh: {},
+  // mfsu: { production: { output: ".mfsu-production" } },
+  fastRefresh: true,
   extraBabelPlugins: [
-    // ["import", { "libraryName": "antd-mobile", "libraryDirectory": "es/components", "style": false}]
+    [
+      'import',
+      {
+        libraryName: 'antd-mobile',
+        libraryDirectory: 'es/components',
+        style: false,
+      },
+    ],
   ],
   extraPostCSSPlugins: [
-    require("postcss-px-to-viewport")({
+    require('postcss-px-to-viewport')({
       viewportWidth: 750,
-      mediaQuery: true
-    })
+      mediaQuery: true,
+    }),
   ],
   metas: [
     {
-      name: "keywords",
-      content: "umi, umijs, antd-mobile"
+      name: 'keywords',
+      content: 'umi, umijs, antd-mobile',
     },
     {
-      name: "description",
-      content: "基于umi@3.x + antd-mobile@next 快速构建h5及app应用"
-    }
+      name: 'description',
+      content: '基于umi@3.x + antd-mobile@next 快速构建h5及app应用',
+    },
   ],
   // https://mobile.ant.design/zh/guide/quick-start#%E5%85%BC%E5%AE%B9%E6%80%A7
-  targets:{
+  targets: {
     chrome: 49,
-    ios: 10
-  }
+    ios: 10,
+  },
 });
diff --git a/config/routes.ts b/config/routes.ts
@@ -21,7 +21,7 @@ export default [
         icon: 'UnorderedListOutline',
         wrappers: [
           // 配置路由的高阶组件封装
-          '@/authority/index', //用于路由级别的权限校验
+          '@/wrappers/index', //用于路由级别的权限校验
         ],
         component: '@/pages/todo/index',
       },
@@ -32,7 +32,7 @@ export default [
         badgeKey: 'messageBadge',
         wrappers: [
           // 配置路由的高阶组件封装
-          '@/authority/index', //用于路由级别的权限校验
+          '@/wrappers/index', //用于路由级别的权限校验
         ],
         component: '@/pages/message/index',
       },
@@ -42,12 +42,12 @@ export default [
         icon: 'UserOutline',
         wrappers: [
           // 配置路由的高阶组件封装
-          '@/authority/index', //用于路由级别的权限校验
+          '@/wrappers/index', //用于路由级别的权限校验
         ],
         component: '@/pages/account/index',
       },
       { path: '/detail', title: '详情页', component: '@/pages/details/index' },
-      { path: '/login', component: '@/pages/login/index' },
+      { path: '/login', component: '@/pages/login/index', layout: false },
       { path: '/*', component: '@/pages/404' },
       { path: '/**/*', redirect: '/404' },
     ],

diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "private": true,
   "scripts": {
     "analyze": "cross-env ANALYZE=1 max build",
-    "start": "max dev",
+    "dev": "max dev",
     "build": "max build",
     "postinstall": "max setup",
     "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",

diff --git a/src/app.less b/src/app.less
@@ -1,3 +1,13 @@
+html,
+body {
+  margin: 0 auto;
+  padding: 0;
+}
+
+html {
+  touch-action: manipulation;
+}
+
 .loading-warp {
   display: flex;
   flex-direction: column;

diff --git a/src/app.ts b/src/app.ts
@@ -1,2 +1,3 @@
 import 'antd-mobile/es/global';
+import './app.less';
 import './theme.less';
diff --git a/src/authority/index.tsx b/src/authority/index.tsx
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
@@ -1,8 +1,11 @@
-import type { IRouteComponentProps } from 'umi';
-import React, { useMemo, useState } from 'react';
+import { Outlet, useLocation, useOutletContext } from '@umijs/max';
+import { ConfigProvider } from 'antd-mobile';
 import type { BadgeProps } from 'antd-mobile/es/components/badge';
-import TabBarLayout from './tab-bar';
+import zhCN from 'antd-mobile/es/locales/zh-CN';
+import React, { useMemo, useState } from 'react';
+import routes from '../../config/routes';
 import './index.less';
+import TabBarLayout from './tab-bar';
 
 export interface TabBarItemValueProps {
   homeBadge?: BadgeProps['content'];
@@ -23,26 +26,47 @@ export const TabBarContext = React.createContext<{
  * @param props
  * @url https://umijs.org/zh-CN/docs/convention-routing#%E4%B8%8D%E5%90%8C%E7%9A%84%E5%85%A8%E5%B1%80-layout
  */
-export default (props: IRouteComponentProps) => {
+export default () => {
   const [taBarItemValues, setTabBarItemValues] = useState<
     TabBarItemValueProps | any
   >({});
+  const { pathname } = useLocation();
+  const props = useOutletContext();
+
   const getLayoutChildren = useMemo(() => {
-    if (props.location.pathname.includes('/tabBar/')) {
+    if (pathname.includes('/tabBar/')) {
       console.log('====== TabBarLayout ======');
-      return <TabBarLayout {...props}>{props.children}</TabBarLayout>;
+      return (
+        <TabBarLayout>
+          <Outlet
+            context={{
+              name: 'TabBar Layout',
+              component: '@/layouts/index',
+              routes:
+                routes?.find((x) => x.component === '@/layouts/index')
+                  ?.routes ?? [],
+            }}
+          />
+        </TabBarLayout>
+      );
     }
-    console.log('basic-layout-warp');
-    return <div className="basic-layout-warp">{props.children}</div>;
+
+    return (
+      <div className="basic-layout-warp">
+        <Outlet context={{ prop: 'basic Layout' }} />
+      </div>
+    );
   }, [props]);
   return (
-    <TabBarContext.Provider
-      value={{
-        items: taBarItemValues,
-        callback: (items) => setTabBarItemValues({ ...items }),
-      }}
-    >
-      <div className="global-layout">{getLayoutChildren}</div>
-    </TabBarContext.Provider>
+    <ConfigProvider locale={zhCN}>
+      <TabBarContext.Provider
+        value={{
+          items: taBarItemValues,
+          callback: (items) => setTabBarItemValues({ ...items }),
+        }}
+      >
+        <div className="global-layout">{getLayoutChildren}</div>
+      </TabBarContext.Provider>
+    </ConfigProvider>
   );
 };
diff --git a/src/layouts/tab-bar/index.tsx b/src/layouts/tab-bar/index.tsx
@@ -1,46 +1,49 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { history, useLocation, useOutletContext } from '@umijs/max';
 import { TabBar } from 'antd-mobile';
-import type { TabBarItemProps } from 'antd-mobile/es/components/tab-bar';
-import type { IRouteComponentProps } from 'umi';
 import {
   AlipayCircleFill,
   AppOutline,
   MessageFill,
   UnorderedListOutline,
   UserOutline,
 } from 'antd-mobile-icons';
+import type { TabBarItemProps } from 'antd-mobile/es/components/tab-bar';
+import React, { useCallback, useEffect, useState } from 'react';
 import styles from './index.less';
-import { TabBarContext } from '@/layouts';
 
-export default ({
-  children,
-  route,
-  history,
-  location,
-}: IRouteComponentProps) => {
+export default ({ children }: { children: React.ReactNode }) => {
   const [tabs, setTabs] = useState<TabBarItemProps[] | any[]>([]);
-  const [activeKey, setActiveKey] = useState<string>('');
-  const tabBarContext = useContext(TabBarContext);
+  // const [activeKey, setActiveKey] = useState<string>('');
+  const { pathname } = useLocation();
+  const props = useOutletContext();
+  console.log('proddddddddps', props);
+
+  // useEffect(() => {
+  //   const { pathname } = location;
+  //   console.log('========================');
+  //   if (props) {
+  //     const { routes, name } = props as any;
+  //     console.log('name', name);
+  //     const _tabs = (routes || [])
+  //       .filter((x: any) => !!x.icon)
+  //       .map((_route: any) => ({
+  //         key: (_route.path || '').replace('/', ''),
+  //         title: _route.title,
+  //         icon: _route.icon,
+  //         badge: _route.badgeKey,
+  //       }));
+  //     if (pathname) {
+  //       // setActiveKey(pathname.replace('/', ''));
+  //     } else {
+  //       // setActiveKey(_tabs[0].key);
+  //     }
+  //     console.log('tabs', tabs);
+  //     setTabs(_tabs);
+  //   }
+  // }, [props]);
   useEffect(() => {
-    const { pathname } = location;
-    if (route) {
-      const { routes } = route as any;
-      const _tabs = (routes || [])
-        .filter((x: any) => !!x.icon)
-        .map((_route: any) => ({
-          key: (_route.path || '').replace('/', ''),
-          title: _route.title,
-          icon: _route.icon,
-          badge: _route.badgeKey,
-        }));
-      if (pathname) {
-        setActiveKey(pathname.replace('/', ''));
-      } else {
-        setActiveKey(_tabs[0].key);
-      }
-      setTabs(_tabs);
-    }
-  }, [route, location]);
+    console.log('weqqqqqqqqewqewqeqeqqqeqewqqqe');
+  }, []);
 
   const renderTabItemIcon = useCallback((name: string) => {
     switch (name) {
@@ -67,19 +70,19 @@ export default ({
         <div className={styles['view-warp']}>{children}</div>
       </div>
       <TabBar
-        activeKey={activeKey}
+        // activeKey={activeKey}
         onChange={(key) => {
-          setActiveKey(key);
+          // setActiveKey(key);
           history.replace('/' + key);
         }}
         safeArea
       >
-        {tabs.map((item) => (
+        {tabs.map((item: TabBarItemProps) => (
           <TabBar.Item
-            key={item.key}
-            icon={renderTabItemIcon(item.icon)}
+            key={item.tabIndex}
+            icon={renderTabItemIcon(item.icon as string)}
             title={item.title}
-            badge={tabBarContext.items[item.badge] || null}
+            // badge={tabBarContext.items[item.badge as any] || null}
           />
         ))}
       </TabBar>

diff --git a/src/pages/details/index.tsx b/src/pages/details/index.tsx
@@ -1,16 +1,15 @@
-import { NavBar, Toast, Result, Space, ProgressCircle } from 'antd-mobile';
-import { useHistory } from 'umi';
-import { useContext } from 'react';
 import { TabBarContext } from '@/layouts';
+import { history } from '@umijs/max';
+import { NavBar, ProgressCircle, Result, Space, Toast } from 'antd-mobile';
+import { useContext } from 'react';
 
 export default () => {
-  const history = useHistory();
   const todo = useContext(TabBarContext);
   const back = () =>
     Toast.show({
       content: '点击了返回区域',
       duration: 1000,
-      afterClose: () => history.goBack(),
+      afterClose: () => history.back(),
     });
 
   return (