├── mock
    ├── .gitkeep
    └── api.ts
├── src
    ├── pages
    │   ├── 404.tsx
    │   ├── login
    │   │   ├── index.less
    │   │   └── index.tsx
    │   ├── loading.tsx
    │   ├── details
    │   │   └── index.tsx
    │   ├── message
    │   │   └── index.tsx
    │   ├── account
    │   │   ├── index.less
    │   │   └── index.tsx
    │   ├── todo
    │   │   └── index.tsx
    │   └── home
    │   │   ├── index.less
    │   │   └── index.tsx
    ├── app.ts
    ├── components
    │   ├── icons
    │   │   ├── utils
    │   │   │   ├── canUseDom.ts
    │   │   │   └── dynamicCSS.ts
    │   │   ├── index.ts
    │   │   ├── Context.tsx
    │   │   ├── README.md
    │   │   ├── IconFont.tsx
    │   │   └── Icon.tsx
    │   └── index.ts
    ├── layouts
    │   ├── index.less
    │   ├── tab-bar
    │   │   ├── index.less
    │   │   └── index.tsx
    │   └── index.tsx
    ├── wrappers
    │   └── index.tsx
    ├── app.less
    └── theme.less
├── .husky
    ├── pre-commit
    └── commit-msg
├── .stylelintrc.js
├── .prettierignore
├── .prettierrc
├── typings.d.ts
├── .editorconfig
├── .gitignore
├── .lintstagedrc
├── .eslintrc.js
├── tsconfig.json
├── LICENSE.md
├── package.json
├── config
    ├── routes.ts
    └── config.ts
├── README-zh_CN.md
└── README.md


/mock/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/pages/404.tsx:
--------------------------------------------------------------------------------
1 | export default ()=>{
2 |   return <div>404</div>
3 | }
4 | 


--------------------------------------------------------------------------------
/src/app.ts:
--------------------------------------------------------------------------------
1 | import 'antd-mobile/2x/es/global';
2 | import './app.less';
3 | import './theme.less';
4 | 


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 | . "$(dirname -- "$0")/_/husky.sh"
3 | 
4 | npx --no-install lint-staged --quiet
5 | 


--------------------------------------------------------------------------------
/.stylelintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   // Umi Max 项目
3 |   extends: require.resolve('@umijs/max/stylelint'),
4 | };
5 | 


--------------------------------------------------------------------------------
/.husky/commit-msg:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 | . "$(dirname -- "$0")/_/husky.sh"
3 | 
4 | npx --no-install max verify-commit $1
5 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | **/*.md
2 | **/*.svg
3 | **/*.ejs
4 | **/*.html
5 | package.json
6 | .umi
7 | .umi-production
8 | .umi-test
9 | 


--------------------------------------------------------------------------------
/src/pages/login/index.less:
--------------------------------------------------------------------------------
1 | .login-page {
2 |   &-wrap {
3 |     position: relative;
4 |     font-size: 14px;
5 |     transform: scale(0.5);
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/src/components/icons/utils/canUseDom.ts:
--------------------------------------------------------------------------------
1 | export default function canUseDom() {
2 |   return !!(
3 |     typeof window !== 'undefined' &&
4 |     window.document &&
5 |     window.document.createElement
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/src/layouts/index.less:
--------------------------------------------------------------------------------
 1 | .global-layout {
 2 |   position: relative;
 3 |   width: 100%;
 4 |   height: 100%;
 5 | 
 6 |   .basic-layout-warp {
 7 |     position: relative;
 8 |     width: 100%;
 9 |     height: 100%;
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "singleQuote": true,
 3 |   "trailingComma": "all",
 4 |   "printWidth": 80,
 5 |   "overrides": [
 6 |     {
 7 |       "files": ".prettierrc",
 8 |       "options": { "parser": "json" }
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/src/components/icons/index.ts:
--------------------------------------------------------------------------------
1 | import Context from '@/components/icons/Context';
2 | export { default as createFromIconfontCN } from './IconFont';
3 | export { default } from '@/components/icons/Icon';
4 | const IconProvider = Context.Provider;
5 | export { IconProvider };
6 | 


--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
1 | import Icon, { createFromIconfontCN } from './icons';
2 | 
3 | const UmiAntdMobileIcon = createFromIconfontCN({
4 |   scriptUrl: '//at.alicdn.com/t/font_3162733_un2ldgoxap.js', // 在 iconfont.cn 上生成
5 | });
6 | 
7 | export { Icon, UmiAntdMobileIcon };
8 | 


--------------------------------------------------------------------------------
/src/components/icons/Context.tsx:
--------------------------------------------------------------------------------
 1 | import { createContext } from 'react';
 2 | 
 3 | export interface IconContextProps {
 4 |   prefixCls?: string;
 5 |   csp?: { nonce?: string };
 6 | }
 7 | 
 8 | const IconContext = createContext<IconContextProps>({});
 9 | 
10 | export default IconContext;
11 | 


--------------------------------------------------------------------------------
/typings.d.ts:
--------------------------------------------------------------------------------
 1 | declare module '*.css';
 2 | declare module '*.less';
 3 | declare module '*.png';
 4 | declare module '*.svg' {
 5 |   export function ReactComponent(
 6 |     props: React.SVGProps<SVGSVGElement>,
 7 |   ): React.ReactElement;
 8 |   const url: string;
 9 |   export default url;
10 | }
11 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 
15 | [Makefile]
16 | indent_style = tab
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /npm-debug.log*
 6 | /yarn-error.log
 7 | /yarn.lock
 8 | /package-lock.json
 9 | 
10 | # production
11 | /dist
12 | 
13 | # misc
14 | .DS_Store
15 | 
16 | # umi
17 | /src/.umi
18 | /src/.umi-production
19 | /src/.umi-test
20 | /.env.local
21 | 
22 | /.idea/
23 | 


--------------------------------------------------------------------------------
/.lintstagedrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "*.{md,json}": [
 3 |     "prettier --cache --write"
 4 |   ],
 5 |   "*.{js,jsx}": [
 6 |     "max lint --fix --eslint-only",
 7 |     "prettier --cache --write"
 8 |   ],
 9 |   "*.{css,less}": [
10 |     "max lint --fix --stylelint-only",
11 |     "prettier --cache --write"
12 |   ],
13 |   "*.ts?(x)": [
14 |     "max lint --fix --eslint-only",
15 |     "prettier --cache --parser=typescript --write"
16 |   ]
17 | }
18 | 


--------------------------------------------------------------------------------
/src/wrappers/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Navigate, Outlet } from '@umijs/max';
 2 | 
 3 | //假的权限验证
 4 | const useAuth = () => {
 5 |   const isLogin = true;
 6 |   return { isLogin };
 7 | };
 8 | 
 9 | export default () => {
10 |   const { isLogin } = useAuth();
11 |   if (isLogin) {
12 |     return (
13 |       <div>
14 |         <Outlet context={{ prop: 'from Layout' }} />
15 |       </div>
16 |     );
17 |   } else {
18 |     return <Navigate replace to="/login" />;
19 |   }
20 | };
21 | 


--------------------------------------------------------------------------------
/src/app.less:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 |   margin: 0 auto;
 4 |   padding: 0;
 5 | }
 6 | 
 7 | html {
 8 |   touch-action: manipulation;
 9 | }
10 | 
11 | .loading-warp {
12 |   display: flex;
13 |   flex-direction: column;
14 |   align-items: center;
15 |   justify-content: center;
16 |   width: 100vw;
17 |   height: 100vh;
18 |   background: rgba(255, 255, 255, 0.5);
19 | 
20 |   &-text {
21 |     margin-top: 15px;
22 |     color: #333333;
23 |     font-size: 28px;
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/mock/api.ts:
--------------------------------------------------------------------------------
 1 | import mockjs from 'mockjs';
 2 | 
 3 | export default {
 4 |   // 使用 mockjs 等三方库
 5 |   'GET /api/tags': mockjs.mock({
 6 |     'list|100': [{ name: '@city', 'value|1-100': 50, 'type|0-2': 1 }],
 7 |   }),
 8 |   // 支持值为 Object 和 Array
 9 |   'GET /api/users': { users: [1, 2] },
10 | 
11 |   // GET 可忽略
12 |   '/api/users/1': { id: 1 },
13 | 
14 |   // 支持自定义函数，API 参考 express@4
15 |   'POST /api/users/create': (req: any, res: any) => {
16 |     // 添加跨域请求头
17 |     res.setHeader('Access-Control-Allow-Origin', '*');
18 |     res.end('ok');
19 |   },
20 | };
21 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   extends: require.resolve('@umijs/max/eslint'),
 3 |   plugins: ['react'],
 4 |   rules: {
 5 |     '@typescript-eslint/indent': 'off',
 6 |     '@typescript-eslint/explicit-function-return-type': 'off',
 7 |     '@typescript-eslint/no-unused-expressions': 'off',
 8 |     '@typescript-eslint/no-var-requires': 0,
 9 |     '@typescript-eslint/explicit-module-boundary-types': 0,
10 |     'import/no-anonymous-default-export': 0,
11 |     '@typescript-eslint/no-explicit-any': 0,
12 |     '@typescript-eslint/no-invalid-this': 0,
13 |     'react/no-array-index-key': 0,
14 |   },
15 | };
16 | 


--------------------------------------------------------------------------------
/src/pages/loading.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { SpinLoading } from 'antd-mobile';
 3 | import '../app.less';
 4 | 
 5 | /**
 6 |  * 如何禁用掉每次刷新路由时出现的 loading... 状态？
 7 |  * https://umijs.org/zh-CN/docs/faq#%E5%A6%82%E4%BD%95%E7%A6%81%E7%94%A8%E6%8E%89%E6%AF%8F%E6%AC%A1%E5%88%B7%E6%96%B0%E8%B7%AF%E7%94%B1%E6%97%B6%E5%87%BA%E7%8E%B0%E7%9A%84-loading-%E7%8A%B6%E6%80%81%EF%BC%9F
 8 |  */
 9 | export default () => {
10 |   return (
11 |     <div className="loading-warp">
12 |       <div>
13 |         <SpinLoading color="primary" />
14 |       </div>
15 |       <div className="loading-warp-text">加载中...</div>
16 |     </div>
17 |   );
18 | };
19 | 


--------------------------------------------------------------------------------
/src/layouts/tab-bar/index.less:
--------------------------------------------------------------------------------
 1 | .tab-bar-layout {
 2 |   position: relative;
 3 |   width: 100%;
 4 |   height: 100vh;
 5 |   display: flex;
 6 |   flex-direction: column;
 7 |   justify-content: start;
 8 | 
 9 |   .container-warp {
10 |     position: relative;
11 |     flex: 1;
12 |     overflow: hidden;
13 | 
14 |     &:after {
15 |       content: '';
16 |       position: absolute;
17 |       left: 0;
18 |       right: 0;
19 |       bottom: 0;
20 |       height: 1px;
21 |       box-shadow: 0 0 10px 0 #999999;
22 |     }
23 | 
24 |     .view-warp {
25 |       position: relative;
26 |       overflow-y: auto;
27 |       height: 100%;
28 |       > div{
29 |         width: 100%;
30 |         height: 100%;
31 |       }
32 | 
33 |       &::-webkit-scrollbar {
34 |         display: none;
35 |       }
36 | 
37 |     }
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/pages/login/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Button, ErrorBlock, Toast } from 'antd-mobile';
 3 | import './index.less';
 4 | 
 5 | const LoginPage = () => {
 6 |   const [count, setCount] = React.useState(0);
 7 |   return (
 8 |     <div className="login-page-wrap">
 9 |       {' '}
10 |       <div>
11 |         <ErrorBlock status="disconnected" />
12 |       </div>
13 |       我是登录的页面 {count}
14 |       <div>
15 |         <Button
16 |           color="primary"
17 |           onClick={() => {
18 |             setCount(2222);
19 |           }}
20 |         >
21 |           Login
22 |         </Button>
23 |       </div>
24 |       <Button
25 |         onClick={() => {
26 |           Toast.show({
27 |             content: 'Hello World, This is a long text',
28 |             afterClose: () => {
29 |               console.log('after');
30 |             },
31 |           });
32 |         }}
33 |       >
34 |         轻提示
35 |       </Button>
36 |     </div>
37 |   );
38 | };
39 | 
40 | export default LoginPage;
41 | 


--------------------------------------------------------------------------------
/src/theme.less:
--------------------------------------------------------------------------------
 1 | // 主题自定义
 2 | // https://mobile.ant.design/zh/guide/theming
 3 | // 以下是 antd-mobile 目前提供的全局性 CSS 变量； 可以更具自己的需求自行变更
 4 | :root {
 5 |   --adm-font-size-1: 18px;
 6 |   --adm-font-size-2: 20px;
 7 |   --adm-font-size-3: 22px;
 8 |   --adm-font-size-4: 24px;
 9 |   --adm-font-size-5: 26px;
10 |   --adm-font-size-6: 28px;
11 |   --adm-font-size-7: 30px;
12 |   --adm-font-size-8: 32px;
13 |   --adm-font-size-9: 34px;
14 |   --adm-font-size-10: 36px;
15 |   --adm-color-primary: #1677ff;
16 |   --adm-color-success: #00b578;
17 |   --adm-color-warning: #ff8f1f;
18 |   --adm-color-danger: #ff3141;
19 |   --adm-color-white: #fff;
20 |   --adm-color-weak: #999;
21 |   --adm-color-light: #ccc;
22 |   --adm-color-border: #eee;
23 |   --adm-font-size-main: var(--adm-font-size-5, 26px);
24 |   --adm-color-text: #333;
25 |   --adm-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue',
26 |     helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui',
27 |     'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
28 | }
29 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "module": "esnext",
 7 |     "moduleResolution": "node",
 8 |     "resolveJsonModule": true,
 9 |     "importHelpers": true,
10 |     "noEmit": true,
11 |     "jsx": "react-jsx",
12 |     "esModuleInterop": true,
13 |     "sourceMap": true,
14 |     "baseUrl": "./",
15 |     "strict": true,
16 |     "paths": {
17 |       "@/*": ["src/*"],
18 |       "@@/*": ["src/.umi/*"]
19 |     },
20 |     "allowSyntheticDefaultImports": true,
21 |     "plugins": [
22 |       {
23 |         "name": "typescript-styled-plugin"
24 |       }
25 |     ],
26 |     "isolatedModules": true,
27 |     "lib": ["dom", "dom.iterable", "esnext"],
28 |     "noFallthroughCasesInSwitch": true
29 |   },
30 |   "include": ["mock/**/*", "src/**/*", "config/**/*", "typings.d.ts"],
31 |   "exclude": [
32 |     "node_modules",
33 |     "lib",
34 |     "es",
35 |     "dist",
36 |     "typings",
37 |     "**/__test__",
38 |     "test",
39 |     "docs",
40 |     "tests"
41 |   ]
42 | }
43 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Yanghc
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "umi-antd-mobile",
 3 |   "version": "0.0.1",
 4 |   "author": "Yanghc",
 5 |   "description": "基于umi@4.x + antd-mobile@next 快速构建h5及app应用",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "analyze": "cross-env ANALYZE=1 max build",
 9 |     "dev": "max dev",
10 |     "build": "max build",
11 |     "postinstall": "max setup",
12 |     "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
13 |     "test": "umi-test",
14 |     "test:coverage": "umi-test --coverage",
15 |     "prepare": "husky"
16 |   },
17 |   "gitHooks": {
18 |     "pre-commit": "lint-staged"
19 |   },
20 |   "engines": {
21 |     "node": ">=10.0.0"
22 |   },
23 |   "lint-staged": {
24 |     "*.{js,jsx,less,md,json}": [
25 |       "prettier --write"
26 |     ],
27 |     "*.ts?(x)": [
28 |       "prettier --parser=typescript --write"
29 |     ]
30 |   },
31 |   "dependencies": {
32 |     "@umijs/max": "^4.2.11",
33 |     "antd-mobile": "^5.36.1",
34 |     "antd-mobile-icons": "^0.3.0",
35 |     "react": "^18.3.1",
36 |     "react-dom": "^18.3.1"
37 |   },
38 |   "devDependencies": {
39 |     "@types/mockjs": "^1.0.6",
40 |     "@types/react": "^18.3.3",
41 |     "@types/react-dom": "^18.3.0",
42 |     "@umijs/lint": "^4.2.11",
43 |     "@umijs/plugin-antd-mobile": "^1.2.0",
44 |     "@umijs/test": "^4.0.70",
45 |     "eslint": "^8.57.0",
46 |     "husky": "^9.0.11",
47 |     "lint-staged": "^15.2.7",
48 |     "mockjs": "^1.1.0",
49 |     "postcss-px-to-viewport": "^1.1.1",
50 |     "prettier": "^3.3.2",
51 |     "stylelint": "^14",
52 |     "typescript": "^5.1.3",
53 |     "yorkie": "^2.0.0"
54 |   },
55 |   "peerDependencies": {}
56 | }
57 | 


--------------------------------------------------------------------------------
/src/pages/details/index.tsx:
--------------------------------------------------------------------------------
 1 | import { TabBarContext } from '@/layouts';
 2 | import { history } from '@umijs/max';
 3 | import { NavBar, ProgressCircle, Result, Space, Toast } from 'antd-mobile';
 4 | import { useContext } from 'react';
 5 | 
 6 | export default () => {
 7 |   const todo = useContext(TabBarContext);
 8 |   const back = () => {
 9 |     Toast.show({
10 |       content: '点击了返回区域',
11 |       duration: 1000,
12 |       afterClose: () => history.back(),
13 |     });
14 |   };
15 | 
16 |   return (
17 |     <div>
18 |       <NavBar back="返回" onBack={back}>
19 |         详情页面
20 |       </NavBar>
21 |       <Result
22 |         status="success"
23 |         title="操作成功"
24 |         description="内容详情可折行，建议不超过两行建议不超过两行建议不超过两行"
25 |       />
26 |       <Space justify={'center'} block style={{ '--gap': '24px' }}>
27 |         <div style={{ fontSize: 22 }}>
28 |           待办数：{todo.items.todoBadge || '0'}
29 |         </div>
30 |         <div style={{ fontSize: 22 }}>
31 |           消息数：{todo.items.messageBadge || '0'}
32 |         </div>
33 |       </Space>
34 |       <br />
35 |       <br />
36 |       <br />
37 |       <br />
38 |       <div>
39 |         <div className="">指定线条宽度</div>
40 |         <Space style={{ '--gap': '24px', width: '100%' }}>
41 |           <ProgressCircle percent={75} style={{ '--track-width': '2px' }}>
42 |             75%
43 |           </ProgressCircle>
44 |           <ProgressCircle percent={75} style={{ '--track-width': '3px' }}>
45 |             75%
46 |           </ProgressCircle>
47 |           <ProgressCircle percent={75} style={{ '--track-width': '4px' }}>
48 |             75%
49 |           </ProgressCircle>
50 |         </Space>
51 |       </div>
52 |     </div>
53 |   );
54 | };
55 | 


--------------------------------------------------------------------------------
/config/routes.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 路由配置
 3 |  * 更多路由请查询 https://umijs.org/zh-CN/docs/routing
 4 |  */
 5 | export default [
 6 |   { path: '/', redirect: '/tab-bar/index' },
 7 |   {
 8 |     path: '/',
 9 |     layout: '@/layouts/index', // 采用umi 约定的全局路由， 因为umi不能针对不同的路由配置不同的 layout，所以需要在全局的layout中特殊处理。
10 |     routes: [
11 |       {
12 |         path: '/tab-bar/index',
13 |         title: '首页',
14 |         icon: 'AlipayCircleFill',
15 |         component: '@/pages/home/index',
16 |       },
17 |       {
18 |         path: '/tab-bar/todo',
19 |         title: '我的待办',
20 |         badgeKey: 'todoBadge',
21 |         icon: 'UnorderedListOutline',
22 |         wrappers: [
23 |           // 配置路由的高阶组件封装
24 |           '@/wrappers/index', //用于路由级别的权限校验
25 |         ],
26 |         component: '@/pages/todo/index',
27 |       },
28 |       {
29 |         path: '/tab-bar/message',
30 |         title: '我的消息',
31 |         icon: 'MessageOutline',
32 |         badgeKey: 'messageBadge',
33 |         wrappers: [
34 |           // 配置路由的高阶组件封装
35 |           '@/wrappers/index', //用于路由级别的权限校验
36 |         ],
37 |         component: '@/pages/message/index',
38 |       },
39 |       {
40 |         path: '/tab-bar/personalCenter',
41 |         title: '个人中心',
42 |         icon: 'UserOutline',
43 |         wrappers: [
44 |           // 配置路由的高阶组件封装
45 |           '@/wrappers/index', //用于路由级别的权限校验
46 |         ],
47 |         component: '@/pages/account/index',
48 |       },
49 |     ],
50 |   },
51 |   { path: '/detail', title: '详情页', component: '@/pages/details/index' },
52 |   { path: '/login', component: '@/pages/login/index', layout: false },
53 |   { path: '/home', component: '@/pages/home/index', layout: false },
54 |   { path: '/*', component: '@/pages/404', layout: false },
55 |   { path: '/**/*', redirect: '/404', layout: false },
56 | ];
57 | 


--------------------------------------------------------------------------------
/config/config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from '@umijs/max';
 2 | import routes from './routes';
 3 | 
 4 | /**
 5 |  * UMI 配置
 6 |  * 更多相关配置查询 https://umijs.org/zh-CN/docs/config
 7 |  */
 8 | export default defineConfig({
 9 |   // layout: true,
10 |   title: 'umi-antd-mobile',
11 |   // dynamicImport: {
12 |   //   loading: "@/pages/loading"
13 |   // },
14 |   routes: routes,
15 |   // nodeModulesTransform: {
16 |   //   type: "none"
17 |   // },
18 |   layout: false,
19 |   alias: {
20 |     // "antd-mobile": "antd-mobile/2x" //使用高清适配
21 |   },
22 |   // mfsu: { production: { output: ".mfsu-production" } },
23 |   fastRefresh: true,
24 |   clickToComponent: {},
25 |   extraBabelPlugins: [],
26 |   autoprefixer: {
27 |     overrideBrowserslist: [
28 |       'Android 4.1',
29 |       'iOS 7.1',
30 |       'Chrome > 31',
31 |       'ff > 31',
32 |       'ie >= 8',
33 |       'last 10 versions', // 所有主流浏览器最近10版本用
34 |     ],
35 |     grid: true,
36 |   },
37 |   postcssLoader: {},
38 |   extraPostCSSPlugins: [
39 |     require('postcss-px-to-viewport')({
40 |       viewportWidth: 750, // 视口宽度，对应设计稿的宽度，一般是 375 或 750
41 |       viewportHeight: 1334, // 视口高度，根据 750 设备的宽度来指定，一般指定 1334 也可以不配置
42 |       unitPrecision: 3, // 指定 `px` 转换为视口单位值的小数位数
43 |       viewportUnit: 'vw', // 指定需要转换成的视口单位，建议使用 vw
44 |       selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视口单位的类，可以自定义，可以无限添加，建议定义一至两个通用的类名
45 |       minPixelValue: 1, // 小于或等于 `1px` 不转换为视口单位，你也可以设置为你想要的值
46 |       mediaQuery: true, // 允许在媒体查询中转换 `px`
47 |     }),
48 |   ],
49 |   metas: [
50 |     {
51 |       name: 'keywords',
52 |       content: 'umi, umijs, antd-mobile',
53 |     },
54 |     {
55 |       name: 'description',
56 |       content: '基于umi@3.x + antd-mobile@next 快速构建h5及app应用',
57 |     },
58 |     {
59 |       name: 'viewport',
60 |       content:
61 |         'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no',
62 |     },
63 |   ],
64 |   // https://mobile.ant.design/zh/guide/quick-start#%E5%85%BC%E5%AE%B9%E6%80%A7
65 |   targets: {
66 |     chrome: 49,
67 |     ios: 10,
68 |   },
69 | });
70 | 


--------------------------------------------------------------------------------
/src/layouts/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Outlet, useLocation, useOutletContext } from '@umijs/max';
 2 | import { ConfigProvider } from 'antd-mobile';
 3 | import zhCN from 'antd-mobile/es/locales/zh-CN';
 4 | import React, { useMemo, useState } from 'react';
 5 | import routes from '../../config/routes';
 6 | import TabBarLayout from './tab-bar';
 7 | import { BadgeProps } from 'antd-mobile/es/components/badge';
 8 | import './index.less';
 9 | 
10 | export interface TabBarItemValueProps {
11 |   homeBadge?: BadgeProps['content'];
12 |   todoBadge?: BadgeProps['content'];
13 |   messageBadge?: BadgeProps['content'];
14 |   meBadge?: BadgeProps['content'];
15 | }
16 | 
17 | export const TabBarContext = React.createContext<{
18 |   items: TabBarItemValueProps;
19 |   callback?: (values: TabBarItemValueProps) => void;
20 | }>({
21 |   items: {},
22 | });
23 | 
24 | /**
25 |  * 不同的全局 layout
26 |  * @param props
27 |  * @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
28 |  */
29 | export default () => {
30 |   const [taBarItemValues, setTabBarItemValues] = useState<
31 |     TabBarItemValueProps | any
32 |   >({});
33 |   const { pathname } = useLocation();
34 |   const props = useOutletContext();
35 | 
36 |   const getLayoutChildren = useMemo(() => {
37 |     if (pathname.startsWith('/tab-bar/')) {
38 |       return (
39 |         <TabBarLayout
40 |           routes={
41 |             routes?.filter((x) => x.path === '/' && x?.routes)[0]?.routes ?? []
42 |           }
43 |         />
44 |       );
45 |     }
46 | 
47 |     return (
48 |       <div className="basic-layout-warp">
49 |         <Outlet context={{ prop: 'basic Layout' }} />
50 |       </div>
51 |     );
52 |   }, [props]);
53 | 
54 |   console.log('taBarItemValues', taBarItemValues);
55 | 
56 |   return (
57 |     <ConfigProvider locale={zhCN}>
58 |       <TabBarContext.Provider
59 |         value={{
60 |           items: taBarItemValues,
61 |           callback: (items) => setTabBarItemValues({ ...items }),
62 |         }}
63 |       >
64 |         <div className="global-layout">{getLayoutChildren}</div>
65 |       </TabBarContext.Provider>
66 |     </ConfigProvider>
67 |   );
68 | };
69 | 


--------------------------------------------------------------------------------
/src/pages/message/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Grid, NoticeBar, Space } from 'antd-mobile';
 2 | import { CloseCircleOutline, CompassOutline } from 'antd-mobile-icons';
 3 | import { UmiAntdMobileIcon } from '@/components';
 4 | 
 5 | export default () => {
 6 |   return (
 7 |     <>
 8 |       <Space block direction="vertical">
 9 |         <NoticeBar content="默认" color="default" />
10 |         <NoticeBar content="警告" color="alert" />
11 |         <NoticeBar content="错误" color="error" />
12 |         <NoticeBar content="信息" color="info" />
13 |         <NoticeBar
14 |           content="超长滚动超长滚动超长滚动超长滚动超长滚动超长滚动超长滚动超长滚动超长滚动"
15 |           color="alert"
16 |         />
17 |         <NoticeBar content="这条通知可以关闭" color="alert" closeable />
18 |         <NoticeBar
19 |           extra={<CloseCircleOutline style={{ fontSize: 18 }} />}
20 |           icon={<CompassOutline />}
21 |           content={'自定义图标'}
22 |         />
23 |         <NoticeBar
24 |           extra={
25 |             <Space style={{ '--gap': '12px' }}>
26 |               <span>查看详情</span>
27 |               <span>关闭</span>
28 |             </Space>
29 |           }
30 |           content={'自定义右侧功能区'}
31 |           color="alert"
32 |         />
33 |       </Space>
34 | 
35 |       <div>自定义icon</div>
36 |       <Grid columns={6}>
37 |         <Grid.Item>
38 |           <UmiAntdMobileIcon type="icon-windows-fill" />
39 |         </Grid.Item>
40 |         <Grid.Item>
41 |           <UmiAntdMobileIcon type="icon-QQ" />
42 |         </Grid.Item>
43 |         <Grid.Item>
44 |           <UmiAntdMobileIcon type="icon-twitter" />
45 |         </Grid.Item>
46 |         <Grid.Item>
47 |           <UmiAntdMobileIcon type="icon-skype-fill" />
48 |         </Grid.Item>
49 |         <Grid.Item>
50 |           <UmiAntdMobileIcon type="icon-alipay-circle-fill" />
51 |         </Grid.Item>
52 |         <Grid.Item>
53 |           <UmiAntdMobileIcon type="icon-github-fill" />
54 |         </Grid.Item>
55 |         <Grid.Item>
56 |           <UmiAntdMobileIcon type="icon-dribbble-circle-fill" />
57 |         </Grid.Item>
58 |         <Grid.Item>
59 |           <UmiAntdMobileIcon type="icon-twitter-circle-fill" />
60 |         </Grid.Item>
61 |       </Grid>
62 |     </>
63 |   );
64 | };
65 | 


--------------------------------------------------------------------------------
/src/components/icons/README.md:
--------------------------------------------------------------------------------
 1 | # 自定义 font 图标
 2 | Icon 提供了一个 createFromIconfontCN 方法，方便开发者调用在 iconfont.cn 上自行管理的图标。
 3 | 
 4 | ```tsx
 5 | 
 6 | import { createFromIconfontCN } from '@/components/icon';
 7 | 
 8 | const MyIcon = createFromIconfontCN({
 9 | scriptUrl: '//at.alicdn.com/t/font_3162733_un2ldgoxap.js', // 在 iconfont.cn 上生成
10 | });
11 | 
12 | ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
13 | 
14 | ```
15 | 
16 | 其本质上是创建了一个使用 <use> 标签来渲染图标的组件。
17 | 
18 | options 的配置项如下：
19 | 
20 | | 参数 | 说明 | 类型                     | 默认值   | 版本 |
21 | | --- | --- |------------------------|-------| --- |
22 | | extraCommonProps | 给所有的 `svg` 图标 `<Icon />` 组件设置额外的属性 | { \[key: string]: any } | {}    |  |
23 | | scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 js 地址，支持 `string[]` 类型 | string \| string\[] | - |  |
24 | 
25 | 在 `scriptUrl` 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。
26 | 
27 | 见 [iconfont.cn 使用帮助](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) 查看如何生成 js 地址。
28 | 
29 | ### 注意：目前 `Icon` 导出的是一个空， 没有任何可用图标；
30 | 
31 | 
32 | ## 项目中使用帮助
33 | 如果需要使用自己的图标，请在 `components` 下的 `index.tx` 文件中修改 `scriptUrl`的链接地址，这个链接地址是在 [iconfont.cn官网](https://www.iconfont.cn) 生成的；
34 | 
35 | 然后在项目中导入 `import { UmiAntdMobileIcon } from '@/components';` 即可使用；
36 | 
37 | 示例代码：
38 | 
39 | ```tsx
40 | <Grid columns={6}>
41 |   <Grid.Item>
42 |     <UmiAntdMobileIcon  type='icon-windows-fill'/>
43 |   </Grid.Item>
44 |   <Grid.Item>
45 |     <UmiAntdMobileIcon  type='icon-QQ'/>
46 |   </Grid.Item>
47 |   <Grid.Item>
48 |     <UmiAntdMobileIcon  type='icon-twitter'/>
49 |   </Grid.Item>
50 |   <Grid.Item>
51 |     <UmiAntdMobileIcon  type='icon-skype-fill'/>
52 |   </Grid.Item>
53 |   <Grid.Item>
54 |     <UmiAntdMobileIcon  type='icon-alipay-circle-fill'/>
55 |   </Grid.Item>
56 |   <Grid.Item>
57 |     <UmiAntdMobileIcon  type='icon-github-fill'/>
58 |   </Grid.Item>
59 |   <Grid.Item>
60 |     <UmiAntdMobileIcon  type='icon-dribbble-circle-fill'/>
61 |   </Grid.Item>
62 |   <Grid.Item>
63 |     <UmiAntdMobileIcon  type='icon-twitter-circle-fill'/>
64 |   </Grid.Item>
65 | </Grid>
66 | ```
67 | 
68 | 组件中的 `type` 就是在 `iconfont` 自定义的图标名称
69 | 
70 | 更多使用方法请参考 [ant-design-icons](https://ant.design/components/icon-cn/)
71 | 
72 | 
73 | 


--------------------------------------------------------------------------------
/src/components/icons/utils/dynamicCSS.ts:
--------------------------------------------------------------------------------
 1 | import canUseDom from './canUseDom';
 2 | 
 3 | const MARK_KEY = `rc-util-key` as any;
 4 | 
 5 | interface Options {
 6 |   attachTo?: Element;
 7 |   csp?: { nonce?: string };
 8 |   prepend?: boolean;
 9 | }
10 | 
11 | function getContainer(option: Options) {
12 |   if (option.attachTo) {
13 |     return option.attachTo;
14 |   }
15 | 
16 |   const head = document.querySelector('head');
17 |   return head || document.body;
18 | }
19 | 
20 | export function injectCSS(css: string, option: Options = {}) {
21 |   if (!canUseDom()) {
22 |     return null;
23 |   }
24 | 
25 |   const styleNode = document.createElement('style');
26 |   if (option.csp?.nonce) {
27 |     styleNode.nonce = option.csp?.nonce;
28 |   }
29 |   styleNode.innerHTML = css;
30 | 
31 |   const container = getContainer(option);
32 |   const { firstChild } = container;
33 | 
34 |   if (option.prepend && container.prepend) {
35 |     // Use `prepend` first
36 |     container.prepend(styleNode);
37 |   } else if (option.prepend && firstChild) {
38 |     // Fallback to `insertBefore` like IE not support `prepend`
39 |     container.insertBefore(styleNode, firstChild);
40 |   } else {
41 |     container.appendChild(styleNode);
42 |   }
43 | 
44 |   return styleNode;
45 | }
46 | 
47 | const containerCache: any = new Map<Element, Node & ParentNode>();
48 | 
49 | function findExistNode(key: string, option: Options = {}) {
50 |   const container = getContainer(option);
51 | 
52 |   return Array.from(containerCache.get(container).children).find(
53 |     (node: any) => node.tagName === 'STYLE' && node[MARK_KEY] === key,
54 |   ) as HTMLStyleElement;
55 | }
56 | 
57 | export function removeCSS(key: string, option: Options = {}) {
58 |   const existNode = findExistNode(key, option);
59 | 
60 |   existNode?.parentNode?.removeChild(existNode);
61 | }
62 | 
63 | export function updateCSS(css: string, key: string, option: Options = {}) {
64 |   const container = getContainer(option);
65 | 
66 |   // Get real parent
67 |   if (!containerCache.has(container)) {
68 |     const placeholderStyle: any = injectCSS('', option);
69 |     const { parentNode } = placeholderStyle;
70 |     containerCache.set(container, parentNode);
71 |     parentNode.removeChild(placeholderStyle);
72 |   }
73 | 
74 |   const existNode = findExistNode(key, option);
75 | 
76 |   if (existNode) {
77 |     if (option.csp?.nonce && existNode.nonce !== option.csp?.nonce) {
78 |       existNode.nonce = option.csp?.nonce;
79 |     }
80 | 
81 |     if (existNode.innerHTML !== css) {
82 |       existNode.innerHTML = css;
83 |     }
84 | 
85 |     return existNode;
86 |   }
87 | 
88 |   const newNode: any = injectCSS(css, option);
89 |   newNode[MARK_KEY] = key;
90 |   return newNode;
91 | }
92 | 


--------------------------------------------------------------------------------
/src/components/icons/IconFont.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import Icon, { IconBaseProps } from './Icon';
 3 | 
 4 | const customCache = new Set<string>();
 5 | 
 6 | export interface CustomIconOptions {
 7 |   scriptUrl?: string | string[];
 8 |   extraCommonProps?: { [key: string]: any };
 9 | }
10 | 
11 | export interface IconFontProps<T extends string = string>
12 |   extends IconBaseProps {
13 |   type: T;
14 | }
15 | 
16 | function isValidCustomScriptUrl(scriptUrl: string): boolean {
17 |   return Boolean(
18 |     typeof scriptUrl === 'string' &&
19 |       scriptUrl.length &&
20 |       !customCache.has(scriptUrl),
21 |   );
22 | }
23 | 
24 | function createScriptUrlElements(
25 |   scriptUrls: string[],
26 |   index: number = 0,
27 | ): void {
28 |   const currentScriptUrl = scriptUrls[index];
29 |   if (isValidCustomScriptUrl(currentScriptUrl)) {
30 |     const script = document.createElement('script');
31 |     script.setAttribute('src', currentScriptUrl);
32 |     script.setAttribute('data-namespace', currentScriptUrl);
33 |     if (scriptUrls.length > index + 1) {
34 |       script.onload = () => {
35 |         createScriptUrlElements(scriptUrls, index + 1);
36 |       };
37 |       script.onerror = () => {
38 |         createScriptUrlElements(scriptUrls, index + 1);
39 |       };
40 |     }
41 |     customCache.add(currentScriptUrl);
42 |     document.body.appendChild(script);
43 |   }
44 | }
45 | 
46 | export default function create<T extends string = string>(
47 |   options: CustomIconOptions = {},
48 | ): React.FC<IconFontProps<T>> {
49 |   const { scriptUrl, extraCommonProps = {} } = options;
50 | 
51 |   /**
52 |    * DOM API required.
53 |    * Make sure in browser environment.
54 |    * The Custom Icon will create a <script/>
55 |    * that loads SVG symbols and insert the SVG Element into the document body.
56 |    */
57 |   if (
58 |     scriptUrl &&
59 |     typeof document !== 'undefined' &&
60 |     typeof window !== 'undefined' &&
61 |     typeof document.createElement === 'function'
62 |   ) {
63 |     if (Array.isArray(scriptUrl)) {
64 |       // 因为iconfont资源会把svg插入before，所以前加载相同type会覆盖后加载，为了数组覆盖顺序，倒叙插入
65 |       createScriptUrlElements(scriptUrl.reverse());
66 |     } else {
67 |       createScriptUrlElements([scriptUrl]);
68 |     }
69 |   }
70 | 
71 |   const Iconfont = React.forwardRef<HTMLSpanElement, IconFontProps<T>>(
72 |     (props, ref) => {
73 |       const { type, children, ...restProps } = props;
74 | 
75 |       // children > type
76 |       let content: React.ReactNode = null;
77 |       if (props.type) {
78 |         content = <use xlinkHref={`#${type}`} />;
79 |       }
80 |       if (children) {
81 |         content = children;
82 |       }
83 |       return (
84 |         <Icon {...extraCommonProps} {...restProps} ref={ref}>
85 |           {content}
86 |         </Icon>
87 |       );
88 |     },
89 |   );
90 | 
91 |   Iconfont.displayName = 'Iconfont';
92 | 
93 |   // @ts-ignore
94 |   return Iconfont;
95 | }
96 | 


--------------------------------------------------------------------------------
/src/pages/account/index.less:
--------------------------------------------------------------------------------
  1 | .account {
  2 |   position: relative;
  3 |   background: #fafafa;
  4 |   height: 100%;
  5 |   display: flex;
  6 |   flex-direction: column;
  7 | 
  8 |   .body {
  9 |     flex: 1;
 10 |     overflow-y: auto;
 11 |     padding-bottom: 158px;
 12 | 
 13 |     &::-webkit-scrollbar {
 14 |       display: none;
 15 |     }
 16 |   }
 17 | 
 18 |   :global {
 19 |     .adm-nav-bar {
 20 |       background: var(--adm-color-primary, #1677ff);
 21 |     }
 22 | 
 23 |     .adm-pull-to-refresh-head {
 24 |       background: var(--adm-color-primary, #1677ff);
 25 |       color: #a2d0fa;
 26 |       font-size: 20px;
 27 |       text-align: center;
 28 | 
 29 |       .adm-dot-loading {
 30 |         font-size: 38px;
 31 |         color: #a2d0fa;
 32 |       }
 33 |     }
 34 | 
 35 |     .adm-list-card {
 36 |       margin: 0;
 37 |     }
 38 |   }
 39 | 
 40 |   .leftTitle {
 41 |     font-size: 32px;
 42 |     color: #fff;
 43 |   }
 44 | 
 45 |   .reshingWarp {
 46 |     color: #a2d0fa;
 47 | 
 48 |     :global {
 49 |       .antd-mobile-icon {
 50 |         font-size: 62px;
 51 |       }
 52 |     }
 53 |   }
 54 | 
 55 |   .headerWarp {
 56 |     background: var(--adm-color-primary, #1677ff);
 57 | 
 58 |     --adm-color-background: var(--adm-color-primary, #1677ff);
 59 |     --adm-border-color: var(--adm-color-primary, #1677ff);
 60 | 
 61 |     :global {
 62 |       .adm-list-body {
 63 |         border-color: var(--adm-color-primary, #1677ff);
 64 |         background: var(--adm-color-primary, #1677ff);
 65 | 
 66 |         --size: var(--adm-avatar-size, 80px);
 67 | 
 68 |         .adm-avatar {
 69 |           border: 5px solid #a2d0fa;
 70 |           background: #a2d0fa;
 71 | 
 72 |           &.adm-image {
 73 |             width: 100px;
 74 |             height: 100px;
 75 |           }
 76 |         }
 77 | 
 78 |         .adm-list-item-content-arrow {
 79 |           color: #fff;
 80 |         }
 81 | 
 82 |         .adm-list-item-content-main {
 83 |           color: #fff;
 84 | 
 85 |           .adm-list-item-description {
 86 |             color: #a2d0fa;
 87 |           }
 88 |         }
 89 |       }
 90 |     }
 91 |   }
 92 | 
 93 |   .listGroupWarp {
 94 |     background: #fff;
 95 |     margin: 15px 25px;
 96 |     border-radius: 20px;
 97 |     overflow: hidden;
 98 | 
 99 |     :global {
100 |       .icon-1 {
101 |         color: #1890ff;
102 |         font-size: 34px;
103 |       }
104 | 
105 |       .icon-2 {
106 |         color: #f8b44b;
107 |         font-size: 34px;
108 |       }
109 | 
110 |       .icon-3 {
111 |         color: #f40;
112 |         font-size: 34px;
113 |       }
114 | 
115 |       .extraDefault {
116 |         font-size: 26px;
117 |       }
118 | 
119 |       .extra-1 {
120 |         color: #f8b44b;
121 |         font-size: 26px;
122 |       }
123 | 
124 |       .adm-list {
125 |         --font-size: 30px;
126 |       }
127 | 
128 |       .adm-list-item-content-arrow {
129 |         font-size: 26px;
130 |       }
131 |     }
132 |   }
133 | }
134 | 


--------------------------------------------------------------------------------
/src/layouts/tab-bar/index.tsx:
--------------------------------------------------------------------------------
 1 | import { history, Outlet, useLocation, useOutletContext } from '@umijs/max';
 2 | import { TabBar } from 'antd-mobile/2x';
 3 | import {
 4 |   AlipayCircleFill,
 5 |   AppOutline,
 6 |   MessageFill,
 7 |   UnorderedListOutline,
 8 |   UserOutline,
 9 | } from 'antd-mobile-icons';
10 | import type { TabBarItemProps } from 'antd-mobile/es/components/tab-bar';
11 | import React, { useCallback, useContext, useEffect, useState } from 'react';
12 | import { TabBarContext } from '@/layouts';
13 | import styles from './index.less';
14 | 
15 | export default ({ routes }: { routes: any[] }) => {
16 |   const [tabs, setTabs] = useState<TabBarItemProps[] | any[]>([]);
17 |   const [activeKey, setActiveKey] = useState<string>('');
18 |   const { pathname } = useLocation();
19 |   const tabBarContext = useContext(TabBarContext);
20 |   const props = useOutletContext();
21 | 
22 |   useEffect(() => {
23 |     if (routes) {
24 |       const _tabs = (routes || [])
25 |         .filter((x: any) => !!x.icon)
26 |         .map((_route: any) => {
27 |           const badgeKey = _route.badgeKey;
28 |           // @ts-ignore
29 |           const badge =
30 |             tabBarContext?.items?.[badgeKey as string] || _route.badge;
31 |           return {
32 |             key: (_route.path || '').replace('/', ''),
33 |             tabIndex: (_route.path || '').replace('/', ''),
34 |             title: _route.title,
35 |             icon: _route.icon,
36 |             badge: badge,
37 |           };
38 |         });
39 |       if (pathname) {
40 |         setActiveKey(pathname.replace('/', ''));
41 |       } else {
42 |         setActiveKey(_tabs[0].key);
43 |       }
44 |       setTabs(_tabs);
45 |     }
46 |   }, [props, pathname, tabBarContext?.items]);
47 | 
48 |   const renderTabItemIcon = useCallback((name: string) => {
49 |     switch (name) {
50 |       case 'AppOutline':
51 |         return <AppOutline />;
52 |       case 'AlipayCircleFill':
53 |         return <AlipayCircleFill />;
54 |       case 'UnorderedListOutline':
55 |         return <UnorderedListOutline />;
56 |       case 'MessageFill':
57 |         return <MessageFill />;
58 |       case 'MessageOutline':
59 |         return <MessageFill />;
60 |       case 'UserOutline':
61 |         return <UserOutline />;
62 |       default:
63 |         return '';
64 |     }
65 |   }, []);
66 | 
67 |   return (
68 |     <div className={styles['tab-bar-layout']}>
69 |       <div className={styles['container-warp']}>
70 |         <div className={styles['view-warp']}>
71 |           <Outlet />
72 |         </div>
73 |       </div>
74 |       <TabBar
75 |         activeKey={activeKey}
76 |         onChange={(key) => {
77 |           setActiveKey(key);
78 |           history.replace('/' + key);
79 |         }}
80 |         safeArea
81 |       >
82 |         {tabs.map((item: TabBarItemProps) => (
83 |           <TabBar.Item
84 |             data-key={item.tabIndex}
85 |             key={item.tabIndex}
86 |             icon={renderTabItemIcon(item.icon as string)}
87 |             title={item.title}
88 |             badge={item.badge}
89 |           />
90 |         ))}
91 |       </TabBar>
92 |     </div>
93 |   );
94 | };
95 | 


--------------------------------------------------------------------------------
/src/pages/todo/index.tsx:
--------------------------------------------------------------------------------
  1 | import { TabBarContext } from '@/layouts';
  2 | import { history } from '@umijs/max';
  3 | import { Badge, List, Switch } from 'antd-mobile';
  4 | import {
  5 |   PayCircleOutline,
  6 |   SetOutline,
  7 |   UnorderedListOutline,
  8 | } from 'antd-mobile-icons';
  9 | import { useCallback, useContext, useState } from 'react';
 10 | 
 11 | const Todo = () => {
 12 |   const todo = useContext(TabBarContext);
 13 |   const [count, setCount] = useState(0);
 14 | 
 15 |   const addTodoList = useCallback(() => {
 16 |     todo.callback &&
 17 |       todo.callback({
 18 |         ...todo.items,
 19 |         todoBadge: Math.floor(Math.random() * 100 + 1),
 20 |       });
 21 |   }, [todo]);
 22 | 
 23 |   const addMessage = useCallback(() => {
 24 |     todo.callback && todo.callback({ ...todo.items, messageBadge: Badge.dot });
 25 |   }, [todo]);
 26 | 
 27 |   const closeAllBadge = useCallback(() => {
 28 |     todo.callback && todo.callback({ messageBadge: null, todoBadge: null });
 29 |   }, [todo]);
 30 | 
 31 |   return (
 32 |     <>
 33 |       <List header="TabBar Badge 显示控制">
 34 |         <List.Item
 35 |           onClick={() => addTodoList()}
 36 |           extra="随机显示一个0～100以内的数字"
 37 |         >
 38 |           增加我的代办
 39 |         </List.Item>
 40 |         <List.Item
 41 |           onClick={() => {
 42 |             setCount(count + 1);
 43 |             todo.callback &&
 44 |               todo.callback({
 45 |                 ...todo.items,
 46 |                 messageBadge: count + 1 >= 20 ? '20+' : count + 1,
 47 |               });
 48 |           }}
 49 |           extra="消息tab显示具体条数，最大20+"
 50 |         >
 51 |           增加消息
 52 |         </List.Item>
 53 |         <List.Item onClick={() => addMessage()} extra="消息tab显示红点">
 54 |           增加消息
 55 |         </List.Item>
 56 |         <List.Item
 57 |           onClick={() => closeAllBadge()}
 58 |           extra="清空全部的 Badge 显示"
 59 |         >
 60 |           清楚全部
 61 |         </List.Item>
 62 |         <List.Item onClick={() => history.push('/detail')} extra="跳转到详情页">
 63 |           在其他页面展示数据
 64 |         </List.Item>
 65 |       </List>
 66 | 
 67 |       <List header="可点击的功能列表">
 68 |         <List.Item prefix={<UnorderedListOutline />} onClick={() => {}}>
 69 |           账单
 70 |         </List.Item>
 71 |         <List.Item prefix={<PayCircleOutline />} onClick={() => {}}>
 72 |           总资产
 73 |         </List.Item>
 74 |         <List.Item prefix={<SetOutline />} onClick={() => {}}>
 75 |           设置
 76 |         </List.Item>
 77 |       </List>
 78 | 
 79 |       <List header="复杂布局">
 80 |         <List.Item extra={<Switch defaultChecked />}>新消息通知</List.Item>
 81 |         <List.Item extra="未开启" clickable>
 82 |           大字号模式
 83 |         </List.Item>
 84 |         <List.Item description="管理已授权的产品和设备" clickable>
 85 |           授权管理
 86 |         </List.Item>
 87 |         <List.Item title="这里是标题">这里是主信息</List.Item>
 88 |       </List>
 89 | 
 90 |       <List header="列表项禁用">
 91 |         <List.Item disabled clickable prefix={<UnorderedListOutline />}>
 92 |           账单
 93 |         </List.Item>
 94 |         <List.Item disabled prefix={<PayCircleOutline />}>
 95 |           总资产
 96 |         </List.Item>
 97 |       </List>
 98 |     </>
 99 |   );
100 | };
101 | 
102 | Todo.title = 'TOTO';
103 | Todo.icon = 'toto-icon';
104 | Todo.badge = '5';
105 | export default Todo;
106 | 


--------------------------------------------------------------------------------
/src/pages/home/index.less:
--------------------------------------------------------------------------------
  1 | .homeWarp {
  2 |   position: relative;
  3 |   background: #fafafa;
  4 |   min-height: 100%;
  5 | 
  6 |   .header {
  7 |     background: #1890ff;
  8 |     padding: 35px 0;
  9 | 
 10 |     .location {
 11 |       color: #fff;
 12 |       font-size: 20px;
 13 |       text-align: center;
 14 | 
 15 |       .locationName {
 16 |         font-size: 26px;
 17 |       }
 18 | 
 19 |       .weather {
 20 |         margin-top: -8px;
 21 |       }
 22 |     }
 23 | 
 24 |     .searchBarWarp {
 25 |       position: relative;
 26 |       display: flex;
 27 |       background: #fff;
 28 |       border-radius: 6px;
 29 |       height: 60px;
 30 |       justify-content: center;
 31 |       align-items: center;
 32 |       padding: 0 25px;
 33 | 
 34 |       .icon {
 35 |         color: #d3d3d3;
 36 |         font-size: 32px;
 37 |       }
 38 | 
 39 |       .content {
 40 |         position: relative;
 41 |         flex: 1;
 42 |         color: #999;
 43 |         height: 60px;
 44 |         margin: 0 20px;
 45 |         font-size: 26px;
 46 |         line-height: 60px;
 47 | 
 48 |         &::after {
 49 |           content: '';
 50 |           position: absolute;
 51 |           right: 0;
 52 |           width: 1px;
 53 |           height: 30px;
 54 |           background: #1890ff;
 55 |           top: 50%;
 56 |           transform: translateY(-50%);
 57 |         }
 58 |       }
 59 | 
 60 |       .text {
 61 |         font-size: 28px;
 62 |         color: #1890ff;
 63 |       }
 64 |     }
 65 | 
 66 |     .expand {
 67 |       font-size: 42px;
 68 |       color: #fff;
 69 |       text-align: center;
 70 |     }
 71 | 
 72 |     .iconWarp {
 73 |       font-size: 56px;
 74 |       color: #fff;
 75 |       text-align: center;
 76 |       margin-top: 25px;
 77 | 
 78 |       .iconText {
 79 |         font-size: 26px;
 80 |       }
 81 |     }
 82 |   }
 83 | 
 84 |   .ribbonWarp {
 85 |     background: #fafafa;
 86 | 
 87 |     .iconWarp {
 88 |       font-size: 56px;
 89 |       color: #1890ff;
 90 |       text-align: center;
 91 |       margin-top: 25px;
 92 | 
 93 |       .iconText {
 94 |         font-size: 22px;
 95 |         color: #333;
 96 |       }
 97 |     }
 98 |   }
 99 | }
100 | 
101 | :global {
102 |   .adm-popover-content {
103 |     .adm-popover-arrow {
104 |       right: 15px !important;
105 |       width: 15px;
106 |       height: 15px;
107 |       top: 10px !important;
108 | 
109 |       .adm-popover-arrow-content {
110 |         width: 15px;
111 |         height: 15px;
112 |       }
113 |     }
114 | 
115 |     .adm-popover-inner-content {
116 |       padding: 0 !important;
117 |     }
118 |   }
119 | }
120 | 
121 | .expandMenuWarp {
122 |   width: 220px;
123 | 
124 |   .menuItem {
125 |     display: flex;
126 |     justify-content: start;
127 |     align-items: center;
128 |     padding: 15px 0 15px 25px;
129 | 
130 |     .icon {
131 |       font-size: 28px;
132 |       color: #fff;
133 |     }
134 | 
135 |     .menuItemInner {
136 |       flex: 1;
137 |       position: relative;
138 |       font-size: 24px;
139 |       color: #fff;
140 |       margin-left: 15px;
141 |       width: 100%;
142 | 
143 |       &::after {
144 |         content: '';
145 |         position: absolute;
146 |         width: 100%;
147 |         height: 1px;
148 |         bottom: -15px;
149 |         left: 0;
150 |         right: 0;
151 |         background: #646464;
152 |       }
153 |     }
154 | 
155 |     &:last-child {
156 |       .menuItemInner {
157 |         &::after {
158 |           background: transparent;
159 |         }
160 |       }
161 |     }
162 |   }
163 | }
164 | 
165 | .messageWarp {
166 |   position: relative;
167 |   background: #fff;
168 |   border-radius: 8px;
169 |   margin: 25px 25px 0;
170 |   display: flex;
171 |   justify-content: space-between;
172 |   align-items: center;
173 |   padding: 10px 0;
174 | 
175 |   .messageList {
176 |     .messageItem {
177 |       position: relative;
178 |       padding: 12px 0 12px 35px;
179 |       font-size: 26px;
180 |       color: #333;
181 |       font-weight: 400;
182 | 
183 |       span {
184 |         margin-left: 15px;
185 |         font-size: 22px;
186 |         color: #999;
187 |       }
188 | 
189 |       &::before {
190 |         content: '';
191 |         position: absolute;
192 |         width: 8px;
193 |         height: 8px;
194 |         background: #000;
195 |         border-radius: 50%;
196 |         left: 15px;
197 |         top: 50%;
198 |         transform: translateY(-50%);
199 |       }
200 |     }
201 |   }
202 | 
203 |   .messageArrow {
204 |     width: 40px;
205 |     font-size: 28px;
206 |     color: #999;
207 |   }
208 | }
209 | 
210 | .adWarp {
211 |   padding: 25px;
212 |   overflow: hidden;
213 | 
214 |   .content {
215 |     height: 180px;
216 |     color: #fff;
217 |     display: flex;
218 |     border-radius: 8px;
219 |     overflow: hidden;
220 |     justify-content: center;
221 |     align-items: center;
222 |     font-size: 48px;
223 |     user-select: none;
224 |   }
225 | }
226 | 


--------------------------------------------------------------------------------
/src/components/icons/Icon.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useContext, useEffect } from 'react';
  2 | import classNames from 'classnames';
  3 | import IconContext from './Context';
  4 | import { updateCSS } from './utils/dynamicCSS';
  5 | 
  6 | // These props make sure that the SVG behaviours like general text.
  7 | // Reference: https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
  8 | export const svgBaseProps = {
  9 |   width: '2em',
 10 |   height: '2em',
 11 |   fill: 'currentColor',
 12 |   'aria-hidden': 'true',
 13 |   focusable: 'false',
 14 | };
 15 | export const iconStyles = `
 16 | .anticon {
 17 |   display: inline-block;
 18 |   color: inherit;
 19 |   font-style: normal;
 20 |   line-height: 0;
 21 |   text-align: center;
 22 |   text-transform: none;
 23 |   vertical-align: -0.125em;
 24 |   text-rendering: optimizeLegibility;
 25 |   -webkit-font-smoothing: antialiased;
 26 |   -moz-osx-font-smoothing: grayscale;
 27 | }
 28 | .anticon > * {
 29 |   line-height: 1;
 30 | }
 31 | .anticon svg {
 32 |   display: inline-block;
 33 | }
 34 | .anticon::before {
 35 |   display: none;
 36 | }
 37 | .anticon .anticon-icon {
 38 |   display: block;
 39 | }
 40 | .anticon[tabindex] {
 41 |   cursor: pointer;
 42 | }
 43 | .anticon-spin::before,
 44 | .anticon-spin {
 45 |   display: inline-block;
 46 |   -webkit-animation: loadingCircle 1s infinite linear;
 47 |   animation: loadingCircle 1s infinite linear;
 48 | }
 49 | @-webkit-keyframes loadingCircle {
 50 |   100% {
 51 |     -webkit-transform: rotate(360deg);
 52 |     transform: rotate(360deg);
 53 |   }
 54 | }
 55 | @keyframes loadingCircle {
 56 |   100% {
 57 |     -webkit-transform: rotate(360deg);
 58 |     transform: rotate(360deg);
 59 |   }
 60 | }
 61 | `;
 62 | export const useInsertStyles = (styleStr: string = iconStyles) => {
 63 |   const { csp } = useContext(IconContext);
 64 | 
 65 |   useEffect(() => {
 66 |     updateCSS(styleStr, '@umi-antd-mobile-icons', {
 67 |       prepend: true,
 68 |       csp,
 69 |     });
 70 |   }, []);
 71 | };
 72 | 
 73 | export interface IconBaseProps extends React.HTMLProps<HTMLSpanElement> {
 74 |   spin?: boolean;
 75 |   rotate?: number;
 76 | }
 77 | 
 78 | export interface CustomIconComponentProps {
 79 |   width: string | number;
 80 |   height: string | number;
 81 |   fill: string;
 82 |   viewBox?: string;
 83 |   className?: string;
 84 |   style?: React.CSSProperties;
 85 | }
 86 | export interface IconComponentProps extends IconBaseProps {
 87 |   viewBox?: string;
 88 |   component?:
 89 |     | React.ComponentType<
 90 |         CustomIconComponentProps | React.SVGProps<SVGSVGElement>
 91 |       >
 92 |     | React.ForwardRefExoticComponent<CustomIconComponentProps>;
 93 |   ariaLabel?: React.AriaAttributes['aria-label'];
 94 | }
 95 | 
 96 | const Icon = React.forwardRef<HTMLSpanElement, IconComponentProps>(
 97 |   (props, ref) => {
 98 |     const {
 99 |       // affect outter <i>...</i>
100 |       className,
101 | 
102 |       // affect inner <svg>...</svg>
103 |       component: Component,
104 |       viewBox,
105 |       spin,
106 |       rotate,
107 | 
108 |       tabIndex,
109 |       onClick,
110 | 
111 |       // children
112 |       children,
113 |       ...restProps
114 |     } = props;
115 | 
116 |     console.warn(
117 |       Boolean(Component || children),
118 |       'Should have `component` prop or `children`.',
119 |     );
120 | 
121 |     useInsertStyles();
122 | 
123 |     const { prefixCls = 'anticon' } = React.useContext(IconContext);
124 | 
125 |     const classString = classNames(prefixCls, className);
126 | 
127 |     const svgClassString = classNames({
128 |       [`${prefixCls}-spin`]: !!spin,
129 |     });
130 | 
131 |     const svgStyle = rotate
132 |       ? {
133 |           msTransform: `rotate(${rotate}deg)`,
134 |           transform: `rotate(${rotate}deg)`,
135 |         }
136 |       : undefined;
137 | 
138 |     const innerSvgProps: CustomIconComponentProps = {
139 |       ...svgBaseProps,
140 |       className: svgClassString,
141 |       style: svgStyle,
142 |       viewBox,
143 |     };
144 | 
145 |     if (!viewBox) {
146 |       delete innerSvgProps.viewBox;
147 |     }
148 | 
149 |     // component > children
150 |     const renderInnerNode = () => {
151 |       if (Component) {
152 |         return <Component {...innerSvgProps}>{children}</Component>;
153 |       }
154 | 
155 |       if (children) {
156 |         console.warn(
157 |           Boolean(viewBox) ||
158 |             (React.Children.count(children) === 1 &&
159 |               React.isValidElement(children) &&
160 |               React.Children.only(children).type === 'use'),
161 |           'Make sure that you provide correct `viewBox`' +
162 |             ' prop (default `0 0 1024 1024`) to the icon.',
163 |         );
164 | 
165 |         return (
166 |           <svg {...innerSvgProps} viewBox={viewBox}>
167 |             {children}
168 |           </svg>
169 |         );
170 |       }
171 | 
172 |       return null;
173 |     };
174 | 
175 |     let iconTabIndex = tabIndex;
176 |     if (iconTabIndex === undefined && onClick) {
177 |       iconTabIndex = -1;
178 |     }
179 | 
180 |     return (
181 |       <span
182 |         role="img"
183 |         {...restProps}
184 |         ref={ref}
185 |         tabIndex={iconTabIndex}
186 |         onClick={onClick}
187 |         className={classString}
188 |       >
189 |         {renderInnerNode()}
190 |       </span>
191 |     );
192 |   },
193 | );
194 | 
195 | Icon.displayName = 'UmiAntdMobileIcon';
196 | 
197 | export default Icon;
198 | 


--------------------------------------------------------------------------------
/README-zh_CN.md:
--------------------------------------------------------------------------------
  1 | 
  2 | <div align="center">
  3 | <br/>
  4 | <br/>
  5 | <br/>
  6 | <br/>
  7 | <p align="center">
  8 |   <a href='https://umijs.org/zh-CN/'>
  9 |     <img src='https://user-images.githubusercontent.com/12181423/150708308-e0ca55ed-1bda-4db6-9e69-f34dbc27c01d.png' width='80'  alt="umijs"/>
 10 |   </a>
 11 |   <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
 12 |   <a href='https://mobile.ant.design/zh'>
 13 |     <img src='https://gw.alipayobjects.com/zos/bmw-prod/b2c7ff8b-eba0-4af9-9dd5-0b5b17f42c57.svg' width='105' alt="mobile"/>
 14 |   </a>
 15 | </p>
 16 | <p align="center" height='100'>
 17 |   <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
 18 |   <a href='https://umijs.org/zh-CN/'>
 19 |     <strong>UmiJS</strong>
 20 |   </a>
 21 |   <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
 22 |   <a href='https://mobile.ant.design/zh'>
 23 |      <strong>Ant Design Mobile</strong>
 24 |   </a>
 25 | </p>
 26 | <br/>
 27 | <br/>
 28 | <br/>
 29 | <br/>
 30 | <h1>umi-antd-mobile 移动应用</h1>
 31 | 
 32 | 
 33 | [![Build With Umi](https://img.shields.io/badge/build%20with-umi-028fe4.svg)](https://umijs.org/zh-CN)
 34 | [![Build With antd-mobile](https://img.shields.io/badge/build-antd--mobile-green.svg)](https://mobile.ant.design)
 35 | [![GitHub license](https://img.shields.io/github/license/hqwlkj/umi-antd-mobile)](https://github.com/hqwlkj/umi-antd-mobile)
 36 | 
 37 | [English](./README.md) · 中文
 38 | <br/>
 39 | <br/>
 40 | </div>
 41 | 
 42 | 
 43 | # 快速上手
 44 | 
 45 | ## 环境准备
 46 | 
 47 | 首先得有 [node](https://nodejs.org/en/)，并确保 node 版本是 10.13 或以上。（mac 下推荐使用 [nvm](https://github.com/creationix/nvm) 来管理 node 版本）
 48 | 
 49 | ```bash
 50 | $ node -v
 51 | v10.13.0
 52 | ```
 53 | 
 54 | 推荐使用 yarn 管理 npm 依赖，并[使用国内源](https://github.com/yiminghe/tyarn)（阿里用户使用内网源）。
 55 | 
 56 | ```bash
 57 | 
 58 | # 国内源
 59 | $ npm i yarn tyarn -g
 60 | 
 61 | # 后面文档里的 yarn 换成 tyarn
 62 | $ tyarn -v
 63 | 
 64 | # 阿里内网源
 65 | $ tnpm i yarn @ali/yarn -g
 66 | 
 67 | # 后面文档里的 yarn 换成 ayarn
 68 | $ ayarn -v
 69 | ```
 70 | 
 71 | 
 72 | ## 开始使用
 73 | 
 74 | clone项目
 75 | 
 76 | ```bash
 77 | $ git clone --depth=1 https://github.com/hqwlkj/umi-antd-mobile.git my-project
 78 | 
 79 | $ cd my-project
 80 | ```
 81 | 
 82 | 安装项目依赖
 83 | 
 84 | ```bash
 85 | $ yarn
 86 | ```
 87 | 
 88 | 本地启动
 89 | 
 90 | ```bash
 91 | $ yarn start
 92 | ```
 93 | 
 94 | ## 部署发布
 95 | 
 96 | ### 构建
 97 | 
 98 | ```bash
 99 | $ yarn build
100 | 
101 | ✔ Webpack
102 |   Compiled successfully in 17.17s
103 | 
104 |  DONE  Compiled successfully in 17167ms                                       8:26:25 PM
105 | 
106 | Build success.
107 | ✨  Done in 20.79s.
108 | ```
109 | 
110 | 构建产物默认生成到 `./dist` 下，然后通过 tree 命令查看，
111 | 
112 | ```bash
113 | tree ./dist
114 | 
115 | ./dist
116 | ├── index.html
117 | ├── umi.css
118 | └── umi.js
119 | ```
120 | 
121 | ### 本地验证
122 | 
123 | 发布之前，可以通过 `serve` 做本地验证，
124 | 
125 | ```bash
126 | $ yarn global add serve
127 | $ serve ./dist
128 | 
129 |    ┌────────────────────────────────────────────────────┐
130 |    │                                                    │
131 |    │   Serving!                                         │
132 |    │                                                    │
133 |    │   - Local:            http://localhost:5000        │
134 |    │   - On Your Network:  http://192.168.12.34:5000    │
135 |    │                                                    │
136 |    │   Copied local address to clipboard!               │
137 |    │                                                    │
138 |    └────────────────────────────────────────────────────┘
139 | ```
140 | 
141 | 访问 [http://localhost:5000](http://localhost:5000)，正常情况下应该是和执行 `yarn start` 时是一致的。
142 | 
143 | ### 部署
144 | 
145 | 本地验证完，就可以部署了。你需要把 `dist` 目录部署到服务器上。
146 | 
147 | 更多关于 **umijs** 的相关配置，请查阅 [umijs官方文档](https://umijs.org/zh-CN/config)
148 | 
149 | 更多关于 **antd-mobile** 的相关组件使用说明，请查阅 [Ant Design Mobile官方文档](https://mobile.ant.design/zh/components/button)
150 | 
151 | 
152 | ## 预览效果图
153 | 
154 | <img src="https://user-images.githubusercontent.com/12181423/150905972-d8bd4608-d86b-4bcc-98bc-ca42e2f91146.png" width="200" />&nbsp;&nbsp;<img src="https://user-images.githubusercontent.com/12181423/151107456-cf3ca33f-f2ee-4fb4-9f04-1426b729dba7.png" width="200" />&nbsp;&nbsp;<img src="https://user-images.githubusercontent.com/12181423/151107542-24f5c943-2af2-4e20-91ef-fb18d9aadbf7.png" width="200" />&nbsp;&nbsp;<img src="https://user-images.githubusercontent.com/12181423/150569860-2f288815-75b8-4cd9-abae-ee90f310826f.png" width="200" />&nbsp;&nbsp;<img src="https://user-images.githubusercontent.com/12181423/150569985-360f6b7e-0805-49e0-89fa-724307140bb5.png" width="200" />
155 | 
156 | https://github.com/hqwlkj/umi-antd-mobile/assets/12181423/e7fc06ba-f835-4f7c-a412-a7e0b9664095
157 | 
158 | 目前还是一个测试demo，所以图片就是一个截屏图，大家先将就看看 😂😂😂
159 | 
160 | ## 内置 Layout
161 | 
162 | 在 `src/layouts`中配置了两个常用的 `layout` 组件。
163 | 
164 | >1、`tab-bar` layout 主要用于根据配置的 `routes` 动态生成带有 Tabbar 的页面(如示例效果图)；同时可以根据浏览器地址栏的地址选择对于的 TabItem;
165 | 
166 | >2、<del> `basic` layout 主要用于普通的路由使用；目前没有做过多的封装；</del>
167 | 
168 | **这里的layout需要重新再构思一下；也希望社区能提供更好的建议**
169 | 
170 | 
171 | ## FAQ
172 |  >1. 如何更换自动生成的 `TabBar` 图标？
173 |  
174 | ```text
175 | 由于 `umijs` 的路由配置中没有支持 icon 属性可以为一个图标，所以需要自己进行处理，处理的方式如下：
176 | 
177 | 在配置 `routes` 时，将`icon`设置为 `antd-mobile-icons` 中的图标名称；
178 | 然后在 `src/layouts/tab-bar/index.tsx` 中的 `renderTabItemIcon` 函数中对应进行修改。
179 | 
180 | ```
181 | 
182 |  >2. 整理中 😄😄
183 | 
184 | 
185 | 
186 | ## 参与贡献
187 | 
188 | 我们非常欢迎你的贡献，你可以通过以下方式和我一起共建 :smiley:：
189 | 
190 | - 通过 [Issue](https://github.com/hqwlkj/umi-antd-mobile/issues) 报告 bug 或进行咨询。
191 | - 提交 [Pull Request](https://github.com/hqwlkj/umi-antd-mobile/pulls) 改进代码。
192 | 
193 | 
194 | 
195 | ## LICENSE
196 | 
197 | [MIT](https://github.com/hqwlkj/umi-antd-mobile/blob/master/LICENSE.md)
198 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | <div align="center">
  3 | <br/>
  4 | <br/>
  5 | <br/>
  6 | <br/>
  7 | <p align="center">
  8 |   <a href='https://umijs.org/zh-CN/'>
  9 |     <img src='https://user-images.githubusercontent.com/12181423/150708308-e0ca55ed-1bda-4db6-9e69-f34dbc27c01d.png' width='80'  alt="umijs"/>
 10 |   </a>
 11 |   <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
 12 |   <a href='https://mobile.ant.design/zh'>
 13 |     <img src='https://gw.alipayobjects.com/zos/bmw-prod/b2c7ff8b-eba0-4af9-9dd5-0b5b17f42c57.svg' width='105' alt="mobile"/>
 14 |   </a>
 15 | </p>
 16 | <p align="center" height='100'>
 17 |   <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
 18 |   <a href='https://umijs.org/zh-CN/'>
 19 |     <strong>UmiJS</strong>
 20 |   </a>
 21 |   <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
 22 |   <a href='https://mobile.ant.design/zh'>
 23 |      <strong>Ant Design Mobile</strong>
 24 |   </a>
 25 | </p>
 26 | <br/>
 27 | <br/>
 28 | <br/>
 29 | <br/>
 30 | <h1>umi-antd-mobile Mobile Application</h1>
 31 | 
 32 | 
 33 | [![Build With Umi](https://img.shields.io/badge/build%20with-umi-028fe4.svg)](https://umijs.org/zh-CN)
 34 | [![Build With antd-mobile](https://img.shields.io/badge/build-antd--mobile-green.svg)](https://mobile.ant.design)
 35 | [![GitHub license](https://img.shields.io/github/license/hqwlkj/umi-antd-mobile)](https://github.com/hqwlkj/umi-antd-mobile)
 36 | 
 37 | English · [中文](./README-zh_CN.md)
 38 | <br/>
 39 | <br/>
 40 | </div>
 41 | 
 42 | 
 43 | # Getting Started
 44 | 
 45 | ## Environment Setup
 46 | 
 47 | First, make sure you have [node](https://nodejs.org), and ensure the node version is 10.13 or above (it is recommended to use [nvm](https://github.com/nvm-sh/nvm) to manage node versions on Mac).
 48 | 
 49 | ```bash
 50 | $ node -v
 51 | v10.13.0
 52 | ```
 53 | 
 54 | It is recommended to use yarn to manage npm dependencies and [use a domestic source](https://yarnpkg.com).
 55 | 
 56 | ```bash
 57 | # Domestic source
 58 | $ npm i yarn tyarn -g
 59 | 
 60 | # Use tyarn instead of yarn in the following documents
 61 | $ tyarn -v
 62 | 
 63 | # Alibaba internal source
 64 | $ tnpm i yarn @ali/yarn -g
 65 | 
 66 | # Use ayarn instead of yarn in the following documents
 67 | $ ayarn -v
 68 | ```
 69 | 
 70 | ## Getting Started
 71 | 
 72 | Clone the project
 73 | 
 74 | ```bash
 75 | $ git clone --depth=1 https://github.com/hqwlkj/umi-antd-mobile.git my-project
 76 | 
 77 | $ cd my-project
 78 | ```
 79 | 
 80 | Install project dependencies
 81 | 
 82 | ```bash
 83 | $ yarn
 84 | ```
 85 | 
 86 | Start locally
 87 | 
 88 | ```bash
 89 | $ yarn start
 90 | ```
 91 | 
 92 | ## Deployment
 93 | 
 94 | ### Build
 95 | 
 96 | ```bash
 97 | $ yarn build
 98 | 
 99 | ✔ Webpack
100 |   Compiled successfully in 17.17s
101 | 
102 |  DONE  Compiled successfully in 17167ms                                       8:26:25 PM
103 | 
104 | Build success.
105 | ✨  Done in 20.79s.
106 | ```
107 | 
108 | The build output is generated by default to `./dist`. Use the tree command to view it.
109 | 
110 | ```bash
111 | tree ./dist
112 | 
113 | ./dist
114 | ├── index.html
115 | ├── umi.css
116 | └── umi.js
117 | ```
118 | 
119 | ### Local Verification
120 | 
121 | Before deploying, you can use `serve` for local verification.
122 | 
123 | ```bash
124 | $ yarn global add serve
125 | $ serve ./dist
126 | 
127 |    ┌────────────────────────────────────────────────────┐
128 |    │                                                    │
129 |    │   Serving!                                         │
130 |    │                                                    │
131 |    │   - Local:            http://localhost:5000        │
132 |    │   - On Your Network:  http://192.168.12.34:5000    │
133 |    │                                                    │
134 |    │   Copied local address to clipboard!               │
135 |    │                                                    │
136 |    └────────────────────────────────────────────────────┘
137 | ```
138 | 
139 | Visit [http://localhost:5000](http://localhost:5000), it should be consistent with executing `yarn start`.
140 | 
141 | ### Deployment
142 | 
143 | After local verification, you can deploy. You need to deploy the `dist` directory to the server.
144 | 
145 | For more configuration related to umijs, please refer to the [umijs official documentation](https://umijs.org).
146 | 
147 | For more usage instructions on antd-mobile components, please refer to the [Ant Design Mobile official documentation](https://mobile.ant.design).
148 | 
149 | ## Preview Effect Diagram
150 | 
151 | <img src="https://user-images.githubusercontent.com/12181423/150905972-d8bd4608-d86b-4bcc-98bc-ca42e2f91146.png" width="200" />&nbsp;&nbsp;<img src="https://user-images.githubusercontent.com/12181423/151107456-cf3ca33f-f2ee-4fb4-9f04-1426b729dba7.png" width="200" />&nbsp;&nbsp;<img src="https://user-images.githubusercontent.com/12181423/151107542-24f5c943-2af2-4e20-91ef-fb18d9aadbf7.png" width="200" />&nbsp;&nbsp;<img src="https://user-images.githubusercontent.com/12181423/150569860-2f288815-75b8-4cd9-abae-ee90f310826f.png" width="200" />&nbsp;&nbsp;<img src="https://user-images.githubusercontent.com/12181423/150569985-360f6b7e-0805-49e0-89fa-724307140bb5.png" width="200" />
152 | 
153 | https://github.com/hqwlkj/umi-antd-mobile/assets/12181423/e7fc06ba-f835-4f7c-a412-a7e0b9664095
154 | 
155 | Currently, it is still a test demo, so the pictures are just screenshots.
156 | 
157 | ## Built-in Layout
158 | 
159 | There are two commonly used `layout` components configured in `src/layouts`.
160 | 
161 | > 1. The `tab-bar` layout is mainly used to dynamically generate pages with Tabbar based on the configured `routes` (as shown in the example effect diagram); it can also select the corresponding TabItem based on the address in the browser's address bar.
162 | > 2. The `basic` layout is mainly used for ordinary routing; currently, it is not extensively wrapped.
163 | 
164 | These layouts need to be rethought; community suggestions are welcome.
165 | 
166 | ## FAQ
167 | 
168 | > 1. How to change the automatically generated `TabBar` icon?
169 | 
170 | Since the `umijs` route configuration does not support the icon attribute as an icon, you need to handle it yourself as follows:
171 | 
172 | When configuring `routes`, set `icon` to the icon name in `antd-mobile-icons`; then modify it in the `renderTabItemIcon` function in `src/layouts/tab-bar/index.tsx`.
173 | 
174 | ## Contributing
175 | 
176 | We welcome your contributions. You can contribute in the following ways:
177 | 
178 |   * Report bugs or make inquiries through [Issues](https://github.com/hqwlkj/umi-antd-mobile/issues).
179 |   * Submit [Pull Requests](https://github.com/hqwlkj/umi-antd-mobile/pulls) to improve the code.
180 | 
181 | ## LICENSE
182 | 
183 | [MIT](https://github.com/hqwlkj/umi-antd-mobile/blob/master/LICENSE)
184 | 
185 | ---
186 | 


--------------------------------------------------------------------------------
/src/pages/account/index.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Avatar,
  3 |   Badge,
  4 |   DotLoading,
  5 |   List,
  6 |   NavBar,
  7 |   PullToRefresh,
  8 |   Space,
  9 | } from 'antd-mobile';
 10 | import {
 11 |   AlipayCircleFill,
 12 |   AntOutline,
 13 |   BankcardOutline,
 14 |   CheckShieldOutline,
 15 |   ContentOutline,
 16 |   CouponOutline,
 17 |   FileOutline,
 18 |   FireFill,
 19 |   GiftOutline,
 20 |   HandPayCircleOutline,
 21 |   HistogramOutline,
 22 |   KoubeiFill,
 23 |   MoreOutline,
 24 |   PayCircleOutline,
 25 |   PieOutline,
 26 |   ReceiptOutline,
 27 |   SetOutline,
 28 |   UserCircleOutline,
 29 | } from 'antd-mobile-icons';
 30 | import styles from './index.less';
 31 | import { useState } from 'react';
 32 | import { sleep } from 'antd-mobile/es/utils/sleep';
 33 | 
 34 | export default () => {
 35 |   const listData = [
 36 |     [
 37 |       {
 38 |         icon: <AntOutline className="icon-1" />,
 39 |         title: (
 40 |           <span>
 41 |             支付宝会员 &nbsp;&nbsp;{' '}
 42 |             <Badge
 43 |               content={
 44 |                 <span>
 45 |                   {' '}
 46 |                   <AntOutline /> 钻石会员
 47 |                 </span>
 48 |               }
 49 |             />
 50 |           </span>
 51 |         ),
 52 |         extra: '',
 53 |       },
 54 |       {
 55 |         icon: <CheckShieldOutline className="icon-1" />,
 56 |         title: '用户保护中心',
 57 |         extra: '',
 58 |       },
 59 |       {
 60 |         icon: <CouponOutline className="icon-1" />,
 61 |         title: '商家服务',
 62 |         extra: '',
 63 |       },
 64 |     ],
 65 |     [
 66 |       {
 67 |         icon: <FileOutline className="icon-2" />,
 68 |         title: '账单',
 69 |         extra: '',
 70 |       },
 71 |       {
 72 |         icon: <PieOutline className="icon-1" />,
 73 |         title: '总资产',
 74 |         extra: <span className="extra-1">免费升级账户保障</span>,
 75 |       },
 76 |       {
 77 |         icon: <PayCircleOutline className="icon-1" />,
 78 |         title: '余额',
 79 |         extra: <span className="extraDefault">5.00</span>,
 80 |       },
 81 |       {
 82 |         icon: <HandPayCircleOutline className="icon-3" />,
 83 |         title: '余额宝',
 84 |         extra: '',
 85 |       },
 86 |       {
 87 |         icon: <HistogramOutline className="icon-1" />,
 88 |         title: '花呗',
 89 |         extra: '',
 90 |       },
 91 |       {
 92 |         icon: <ContentOutline className="icon-1" />,
 93 |         title: '余利宝',
 94 |         extra: '',
 95 |       },
 96 |       {
 97 |         icon: <BankcardOutline className="icon-2" />,
 98 |         title: '银行卡',
 99 |         extra: '',
100 |       },
101 |     ],
102 |     [
103 |       {
104 |         icon: <AntOutline className="icon-1" />,
105 |         title: '芝麻信用',
106 |         extra: (
107 |           <Badge content={Badge.dot} style={{ '--top': '50%' }}>
108 |             <span className="extraDefault">有芝麻粒待积攒 &nbsp;&nbsp;</span>
109 |           </Badge>
110 |         ),
111 |       },
112 |       {
113 |         icon: <AlipayCircleFill className="icon-1" />,
114 |         title: '蚂蚁保',
115 |         extra: '',
116 |       },
117 |       {
118 |         icon: <FireFill className="icon-3" />,
119 |         title: '相互宝',
120 |         extra: '',
121 |       },
122 |       {
123 |         icon: <ReceiptOutline className="icon-1" />,
124 |         title: '网商贷',
125 |         extra: '',
126 |       },
127 |       {
128 |         icon: <KoubeiFill className="icon-1" />,
129 |         title: '网商银行',
130 |         extra: '',
131 |       },
132 |     ],
133 |     [
134 |       {
135 |         icon: <GiftOutline className="icon-1" />,
136 |         title: '我的公益',
137 |         extra: '',
138 |       },
139 |     ],
140 |   ];
141 | 
142 |   const right = (
143 |     <div style={{ fontSize: 24 }}>
144 |       <Space style={{ '--gap': '16px', color: '#ffffff' }}>
145 |         <UserCircleOutline />
146 |         <SetOutline />
147 |       </Space>
148 |     </div>
149 |   );
150 | 
151 |   const getNextData = () => {
152 |     let current = 1;
153 |     const ret: string[] = [];
154 |     for (let i = 0; i < 18; i++) {
155 |       ret.unshift(current.toString());
156 |       current++;
157 |     }
158 |     return ret;
159 |   };
160 | 
161 |   const [data, setData] = useState(() => getNextData());
162 | 
163 |   return (
164 |     <div className={styles.account}>
165 |       <NavBar
166 |         right={right}
167 |         back={null}
168 |         left={<span className={styles.leftTitle}>我的</span>}
169 |       />
170 |       <div className={styles.body}>
171 |         <PullToRefresh
172 |           renderText={(status) => {
173 |             switch (status) {
174 |               case 'pulling':
175 |                 return (
176 |                   <div className={styles.reshingWarp}>
177 |                     <MoreOutline color="currentColor" />
178 |                   </div>
179 |                 );
180 |               case 'canRelease':
181 |                 return (
182 |                   <div className={styles.reshingWarp}>
183 |                     <div>松开刷新</div>
184 |                     <MoreOutline color="currentColor" />
185 |                   </div>
186 |                 );
187 |               case 'refreshing':
188 |                 return (
189 |                   <div className={styles.reshingWarp}>
190 |                     <DotLoading color="currentColor" />
191 |                   </div>
192 |                 );
193 |               case 'complete':
194 |                 return '';
195 |               default:
196 |                 return '';
197 |             }
198 |           }}
199 |           onRefresh={async () => {
200 |             await sleep(2000);
201 |             setData([...getNextData(), ...data]);
202 |           }}
203 |         >
204 |           <div className={styles.headerWarp}>
205 |             <List>
206 |               <List.Item
207 |                 prefix={
208 |                   <Avatar
209 |                     src={
210 |                       'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ'
211 |                     }
212 |                   />
213 |                 }
214 |                 description="deserunt@ali.com"
215 |                 onClick={() => {}}
216 |               >
217 |                 Novalee Spicer
218 |               </List.Item>
219 |             </List>
220 |           </div>
221 |           {listData.map((group, i) => {
222 |             return (
223 |               <div className={styles.listGroupWarp} key={`list-group-${i}`}>
224 |                 <List mode="card">
225 |                   {group.map((item, j) => (
226 |                     <List.Item
227 |                       key={`list-item-${i}-${j}`}
228 |                       prefix={item.icon}
229 |                       onClick={() => {}}
230 |                       extra={item.extra}
231 |                     >
232 |                       {item.title}
233 |                     </List.Item>
234 |                   ))}
235 |                 </List>
236 |               </div>
237 |             );
238 |           })}
239 |         </PullToRefresh>
240 |       </div>
241 |     </div>
242 |   );
243 | };
244 | 


--------------------------------------------------------------------------------
/src/pages/home/index.tsx:
--------------------------------------------------------------------------------
  1 | import { history } from '@umijs/max';
  2 | import {
  3 |   Button,
  4 |   Grid,
  5 |   Popover,
  6 |   Space,
  7 |   Swiper,
  8 |   Switch,
  9 |   Toast,
 10 | } from 'antd-mobile';
 11 | import {
 12 |   AddCircleOutline,
 13 |   AntOutline,
 14 |   DownOutline,
 15 |   FolderOutline,
 16 |   ReceivePaymentOutline,
 17 |   RightOutline,
 18 |   ScanningOutline,
 19 |   SearchOutline,
 20 |   TravelOutline,
 21 |   UploadOutline,
 22 |   UserContactOutline,
 23 | } from 'antd-mobile-icons';
 24 | import { useLayoutEffect, useState } from 'react';
 25 | import styles from './index.less';
 26 | 
 27 | export default function IndexPage() {
 28 |   const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'];
 29 |   const items = colors.map((color, index) => (
 30 |     <Swiper.Item key={index}>
 31 |       <div
 32 |         className={styles.content}
 33 |         style={{ background: color }}
 34 |         onClick={() => {
 35 |           Toast.show(`你点击了卡片 ${index + 1}`);
 36 |         }}
 37 |       >
 38 |         {index + 1}
 39 |       </div>
 40 |     </Swiper.Item>
 41 |   ));
 42 |   const [enableDarkMode, setEnableDarkMode] = useState(false);
 43 | 
 44 |   useLayoutEffect(() => {
 45 |     document.documentElement.setAttribute(
 46 |       'data-prefers-color-scheme',
 47 |       enableDarkMode ? 'dark' : 'light',
 48 |     );
 49 |   }, [enableDarkMode]);
 50 | 
 51 |   return (
 52 |     <div className={styles.homeWarp}>
 53 |       <div className={styles.header}>
 54 |         <Grid columns={12}>
 55 |           <Grid.Item span={2}>
 56 |             <div className={styles.location}>
 57 |               <div className={styles.locationName}>
 58 |                 重庆 &nbsp;
 59 |                 <DownOutline />
 60 |               </div>
 61 |               <div className={styles.weather}>多云 9℃</div>
 62 |             </div>
 63 |           </Grid.Item>
 64 |           <Grid.Item span={8}>
 65 |             <div className={styles.searchBarWarp}>
 66 |               <SearchOutline className={styles.icon} />
 67 |               <div className={styles.content}>
 68 |                 <Swiper
 69 |                   direction="vertical"
 70 |                   style={{ '--height': '30px' }}
 71 |                   autoplay={true}
 72 |                   loop={true}
 73 |                   indicator={() => null}
 74 |                 >
 75 |                   <Swiper.Item>
 76 |                     <div className={styles.verticalContent}>
 77 |                       重庆市第九人民医院
 78 |                     </div>
 79 |                   </Swiper.Item>
 80 |                   <Swiper.Item>
 81 |                     <div className={styles.verticalContent}>
 82 |                       重庆市卫健委发布重要通知
 83 |                     </div>
 84 |                   </Swiper.Item>
 85 |                 </Swiper>
 86 |               </div>
 87 |               <div className={styles.text}>搜索</div>
 88 |             </div>
 89 |           </Grid.Item>
 90 |           <Grid.Item span={2}>
 91 |             <div className={styles.expand}>
 92 |               <Popover
 93 |                 content={
 94 |                   <div className={styles.expandMenuWarp}>
 95 |                     <div className={styles.menuItem}>
 96 |                       <ScanningOutline className={styles.icon} />
 97 |                       <div className={styles.menuItemInner}>扫一扫</div>
 98 |                     </div>
 99 |                     <div className={styles.menuItem}>
100 |                       <ReceivePaymentOutline className={styles.icon} />
101 |                       <div className={styles.menuItemInner}>二维码收款</div>
102 |                     </div>
103 |                     <div className={styles.menuItem}>
104 |                       <UserContactOutline className={styles.icon} />
105 |                       <div className={styles.menuItemInner}>我的名片</div>
106 |                     </div>
107 |                     <div className={styles.menuItem}>
108 |                       <AntOutline className={styles.icon} />
109 |                       <div className={styles.menuItemInner}>智能助理</div>
110 |                     </div>
111 |                   </div>
112 |                 }
113 |                 placement="topRight"
114 |                 mode="dark"
115 |                 trigger="click"
116 |               >
117 |                 <AddCircleOutline />
118 |               </Popover>
119 |             </div>
120 |           </Grid.Item>
121 |         </Grid>
122 |         <Grid columns={4}>
123 |           <Grid.Item className={styles.iconWarp}>
124 |             <ScanningOutline />
125 |             <div className={styles.iconText}>扫一扫</div>
126 |           </Grid.Item>
127 |           <Grid.Item className={styles.iconWarp}>
128 |             <ReceivePaymentOutline />
129 |             <div className={styles.iconText}>收付款</div>
130 |           </Grid.Item>
131 |           <Grid.Item className={styles.iconWarp}>
132 |             <TravelOutline />
133 |             <div className={styles.iconText}>出行</div>
134 |           </Grid.Item>
135 |           <Grid.Item className={styles.iconWarp}>
136 |             <FolderOutline />
137 |             <div className={styles.iconText}>卡包</div>
138 |           </Grid.Item>
139 |         </Grid>
140 |       </div>
141 |       <div className={styles.ribbonWarp}>
142 |         <Grid columns={5}>
143 |           {[
144 |             '饿了么',
145 |             '消费金',
146 |             '市民中心',
147 |             '芭芭农场',
148 |             '蚂蚁森林',
149 |             '转账',
150 |             '汇率换算',
151 |             '余额宝',
152 |             '蚂蚁新村',
153 |             '生活缴费',
154 |             '花呗',
155 |             '健康码',
156 |             '运动',
157 |             '我的小程序',
158 |             '更多',
159 |           ].map((text, index) => (
160 |             <Grid.Item
161 |               className={styles.iconWarp}
162 |               key={`item-${index}`}
163 |               onClick={() => history.push('/detail')}
164 |             >
165 |               <ScanningOutline />
166 |               <div className={styles.iconText}>{text}</div>
167 |             </Grid.Item>
168 |           ))}
169 |         </Grid>
170 |       </div>
171 |       <div className={styles.messageWarp}>
172 |         <div className={styles.messageList}>
173 |           <div className={styles.messageItem}>
174 |             余额宝：余额宝收益到账啦 <span>7分钟前</span>
175 |           </div>
176 |           <div className={styles.messageItem}>
177 |             蚂蚁财富：你的基金收益已更新 <span>15分钟前</span>
178 |           </div>
179 |         </div>
180 |         <div className={styles.messageArrow}>
181 |           <RightOutline />
182 |         </div>
183 |       </div>
184 |       <div className={styles.adWarp}>
185 |         <Swiper autoplay={true} loop={true}>
186 |           {items}
187 |         </Swiper>
188 |       </div>
189 |       <div>
190 |         <Space wrap>
191 |           <Button
192 |             onClick={() => {
193 |               Toast.show({
194 |                 icon: 'success',
195 |                 content: '保存成功',
196 |               });
197 |             }}
198 |           >
199 |             成功
200 |           </Button>
201 |           <Button
202 |             onClick={() => {
203 |               Toast.show({
204 |                 icon: 'fail',
205 |                 content: '名称已存在',
206 |               });
207 |             }}
208 |           >
209 |             失败
210 |           </Button>
211 |           <Button
212 |             onClick={() => {
213 |               Toast.show({
214 |                 icon: 'loading',
215 |                 content: '加载中…',
216 |               });
217 |             }}
218 |           >
219 |             加载中
220 |           </Button>
221 |           <Button
222 |             onClick={() => {
223 |               Toast.show({
224 |                 content: '上传中',
225 |                 icon: <UploadOutline />,
226 |               });
227 |             }}
228 |           >
229 |             自定义图标
230 |           </Button>
231 |         </Space>
232 |       </div>
233 |       <div>
234 |         <Space align="center">
235 |           <div>Dark Mode</div>
236 |           <Switch
237 |             checked={enableDarkMode}
238 |             onChange={(v) => {
239 |               setEnableDarkMode(v);
240 |             }}
241 |           />
242 |         </Space>
243 |       </div>
244 |     </div>
245 |   );
246 | }
247 | 


--------------------------------------------------------------------------------