diff --git a/README.md b/README.md index f852d32..f55b102 100644 --- a/README.md +++ b/README.md @@ -5,11 +5,11 @@

- + umijs              - + mobile

diff --git a/config/config.ts b/config/config.ts index 820b591..626676a 100644 --- 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 index 2da3094..228e808 100644 --- 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 index c71ef38..3eb6e7f 100644 --- 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 index 779a636..4b79ba4 100644 --- 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 index 3b0a74b..b3cec7e 100644 --- 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 deleted file mode 100644 index ad78902..0000000 --- a/src/authority/index.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { ReactChild, ReactFragment, ReactPortal, useCallback } from 'react'; -import { Redirect } from 'umi' - -//假的权限验证 -const useAuth = ()=>{ - const isLogin = true; - return {isLogin} -} - -export default (props: { children: boolean | ReactChild | ReactFragment | ReactPortal | null | undefined; }) => { - const { isLogin } = useAuth(); - if (isLogin) { - return

{ props.children }
; - } else { - return ; - } -} diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 8ec9294..10b3eba 100644 --- 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 {props.children}; + return ( + + x.component === '@/layouts/index') + ?.routes ?? [], + }} + /> + + ); } - console.log('basic-layout-warp'); - return
{props.children}
; + + return ( +
+ +
+ ); }, [props]); return ( - setTabBarItemValues({ ...items }), - }} - > -
{getLayoutChildren}
- + + setTabBarItemValues({ ...items }), + }} + > +
{getLayoutChildren}
+ + ); }; diff --git a/src/layouts/tab-bar/index.tsx b/src/layouts/tab-bar/index.tsx index 2581bc3..5a02d6c 100644 --- a/src/layouts/tab-bar/index.tsx +++ b/src/layouts/tab-bar/index.tsx @@ -1,7 +1,5 @@ -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, @@ -9,38 +7,43 @@ import { 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([]); - const [activeKey, setActiveKey] = useState(''); - const tabBarContext = useContext(TabBarContext); + // const [activeKey, setActiveKey] = useState(''); + 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 ({
{children}
{ - setActiveKey(key); + // setActiveKey(key); history.replace('/' + key); }} safeArea > - {tabs.map((item) => ( + {tabs.map((item: TabBarItemProps) => ( ))} diff --git a/src/pages/details/index.tsx b/src/pages/details/index.tsx index e7908df..b639321 100644 --- 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 ( diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 57a8f27..8765658 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -1,5 +1,13 @@ -import { Button, Grid, Popover, Space, Swiper, Toast } from 'antd-mobile'; -import { useHistory } from 'umi'; +import { history } from '@umijs/max'; +import { + Button, + Grid, + Popover, + Space, + Swiper, + Switch, + Toast, +} from 'antd-mobile'; import { AddCircleOutline, AntOutline, @@ -13,10 +21,10 @@ import { UploadOutline, UserContactOutline, } from 'antd-mobile-icons'; +import { useLayoutEffect, useState } from 'react'; import styles from './index.less'; export default function IndexPage() { - const history = useHistory(); const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']; const items = colors.map((color, index) => ( @@ -31,6 +39,15 @@ export default function IndexPage() { )); + const [enableDarkMode, setEnableDarkMode] = useState(false); + + useLayoutEffect(() => { + document.documentElement.setAttribute( + 'data-prefers-color-scheme', + enableDarkMode ? 'dark' : 'light', + ); + }, [enableDarkMode]); + return (
@@ -213,6 +230,17 @@ export default function IndexPage() {
+
+ +
Dark Mode
+ { + setEnableDarkMode(v); + }} + /> + +
); } diff --git a/src/pages/todo/index.tsx b/src/pages/todo/index.tsx index be0f0d1..db1319b 100644 --- a/src/pages/todo/index.tsx +++ b/src/pages/todo/index.tsx @@ -1,16 +1,15 @@ +import { TabBarContext } from '@/layouts'; +import { history } from '@umijs/max'; import { Badge, List, Switch } from 'antd-mobile'; import { PayCircleOutline, SetOutline, UnorderedListOutline, } from 'antd-mobile-icons'; -import React, { useCallback, useContext, useState } from 'react'; -import { TabBarContext } from '@/layouts'; -import { useHistory } from 'umi'; +import { useCallback, useContext, useState } from 'react'; const Todo = () => { const todo = useContext(TabBarContext); - const history = useHistory(); const [count, setCount] = useState(0); const addTodoList = useCallback(() => { diff --git a/src/wrappers/index.tsx b/src/wrappers/index.tsx new file mode 100644 index 0000000..2b98702 --- /dev/null +++ b/src/wrappers/index.tsx @@ -0,0 +1,20 @@ +import { Navigate, Outlet } from '@umijs/max'; + +//假的权限验证 +const useAuth = () => { + const isLogin = true; + return { isLogin }; +}; + +export default () => { + const { isLogin } = useAuth(); + if (isLogin) { + return ( +
+ +
+ ); + } else { + return ; + } +};