fix: 调整 Layout 及配置

hqwlkj · Jun 21, 2024 · 5b6ee5b · 5b6ee5b
1 parent b018e76
commit 5b6ee5b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 37 deletions.
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
@@ -2,17 +2,16 @@ import { Outlet, useLocation, useOutletContext } from '@umijs/max';
 import { ConfigProvider } from 'antd-mobile';
 import zhCN from 'antd-mobile/es/locales/zh-CN';
 import React, { useMemo, useState } from 'react';
-import routess from '../../config/routes';
+import routes from '../../config/routes';
 import TabBarLayout from './tab-bar';
-import { useAppData, useSelectedRoutes } from '@@/exports';
-import { TabBarItemProps } from 'antd-mobile/es/components/tab-bar';
+import { BadgeProps } from 'antd-mobile/es/components/badge';
 import './index.less';
 
 export interface TabBarItemValueProps {
-  homeBadge?: TabBarItemProps['badge'];
-  todoBadge?: TabBarItemProps['badge'];
-  messageBadge?: TabBarItemProps['badge'];
-  meBadge?: TabBarItemProps['badge'];
+  homeBadge?: BadgeProps['content'];
+  todoBadge?: BadgeProps['content'];
+  messageBadge?: BadgeProps['content'];
+  meBadge?: BadgeProps['content'];
 }
 
 export const TabBarContext = React.createContext<{
@@ -33,25 +32,15 @@ export default () => {
   >({});
   const { pathname } = useLocation();
   const props = useOutletContext();
-  const { clientRoutes } = useAppData();
-  const routes = useSelectedRoutes();
-  console.log('clientRoutes', clientRoutes);
-  console.log('routes', routes, routess);
 
   const getLayoutChildren = useMemo(() => {
     if (pathname.startsWith('/tab-bar/')) {
-      console.log(
-        '====== TabBarLayout ======',
-        routess.filter((x) => x.path === '/' && x?.routes)[0].routes,
-      );
       return (
         <TabBarLayout
           routes={
-            routess?.filter((x) => x.path === '/' && x?.routes)[0]?.routes ?? []
+            routes?.filter((x) => x.path === '/' && x?.routes)[0]?.routes ?? []
           }
-        >
-          <Outlet />
-        </TabBarLayout>
+        />
       );
     }
 
@@ -61,6 +50,9 @@ export default () => {
       </div>
     );
   }, [props]);
+
+  console.log('taBarItemValues', taBarItemValues);
+
   return (
     <ConfigProvider locale={zhCN}>
       <TabBarContext.Provider

diff --git a/src/layouts/tab-bar/index.tsx b/src/layouts/tab-bar/index.tsx
@@ -1,5 +1,5 @@
-import { history, useLocation, useOutletContext } from '@umijs/max';
-import { TabBar } from 'antd-mobile';
+import { history, Outlet, useLocation, useOutletContext } from '@umijs/max';
+import { TabBar } from 'antd-mobile/2x';
 import {
   AlipayCircleFill,
   AppOutline,
@@ -9,35 +9,31 @@ import {
 } from 'antd-mobile-icons';
 import type { TabBarItemProps } from 'antd-mobile/es/components/tab-bar';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
-import styles from './index.less';
 import { TabBarContext } from '@/layouts';
+import styles from './index.less';
 
-export default ({
-  children,
-  routes,
-}: {
-  children: React.ReactNode;
-  routes: any[];
-}) => {
+export default ({ routes }: { routes: any[] }) => {
   const [tabs, setTabs] = useState<TabBarItemProps[] | any[]>([]);
   const [activeKey, setActiveKey] = useState<string>('');
   const { pathname } = useLocation();
   const tabBarContext = useContext(TabBarContext);
   const props = useOutletContext();
 
   useEffect(() => {
-    console.log('========================', routes);
     if (routes) {
       const _tabs = (routes || [])
         .filter((x: any) => !!x.icon)
         .map((_route: any) => {
-          console.log('route', _route);
+          const badgeKey = _route.badgeKey;
+          // @ts-ignore
+          const badge =
+            tabBarContext?.items?.[badgeKey as string] || _route.badge;
           return {
             key: (_route.path || '').replace('/', ''),
             tabIndex: (_route.path || '').replace('/', ''),
             title: _route.title,
             icon: _route.icon,
-            badge: _route.badgeKey,
+            badge: badge,
           };
         });
       if (pathname) {
@@ -47,7 +43,7 @@ export default ({
       }
       setTabs(_tabs);
     }
-  }, [props, pathname]);
+  }, [props, pathname, tabBarContext?.items]);
 
   const renderTabItemIcon = useCallback((name: string) => {
     switch (name) {
@@ -71,7 +67,9 @@ export default ({
   return (
     <div className={styles['tab-bar-layout']}>
       <div className={styles['container-warp']}>
-        <div className={styles['view-warp']}>{children}</div>
+        <div className={styles['view-warp']}>
+          <Outlet />
+        </div>
       </div>
       <TabBar
         activeKey={activeKey}
@@ -83,10 +81,11 @@ export default ({
       >
         {tabs.map((item: TabBarItemProps) => (
           <TabBar.Item
+            data-key={item.tabIndex}
             key={item.tabIndex}
             icon={renderTabItemIcon(item.icon as string)}
             title={item.title}
-            badge={tabBarContext?.items?.['homeBadge'] || null}
+            badge={item.badge}
           />
         ))}
       </TabBar>

diff --git a/src/theme.less b/src/theme.less
@@ -2,15 +2,25 @@
 // https://mobile.ant.design/zh/guide/theming
 // 以下是 antd-mobile 目前提供的全局性 CSS 变量； 可以更具自己的需求自行变更
 :root {
+  --adm-font-size-1: 18px;
+  --adm-font-size-2: 20px;
+  --adm-font-size-3: 22px;
+  --adm-font-size-4: 24px;
+  --adm-font-size-5: 26px;
+  --adm-font-size-6: 28px;
+  --adm-font-size-7: 30px;
+  --adm-font-size-8: 32px;
+  --adm-font-size-9: 34px;
+  --adm-font-size-10: 36px;
   --adm-color-primary: #1677ff;
   --adm-color-success: #00b578;
   --adm-color-warning: #ff8f1f;
   --adm-color-danger: #ff3141;
   --adm-color-white: #fff;
   --adm-color-weak: #999;
   --adm-color-light: #ccc;
-  --adm-border-color: #eee;
-  --adm-font-size-main: 16px;
+  --adm-color-border: #eee;
+  --adm-font-size-main: var(--adm-font-size-5, 26px);
   --adm-color-text: #333;
   --adm-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue',
     helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui',