38 | 
39 |
40 | );
41 | };
42 |
43 | const ImageModal: React.FC
18 |
19 |
--------------------------------------------------------------------------------
/config/config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'umi';
2 | import routes from './router'; // 路由
3 | import extraPostCSSPlugins from './postcssPlugins'; // 额外的 postcss 配置
4 |
5 | const path = '/Five-star-red-flag-Avatar/';
6 |
7 | export default defineConfig({
8 | routes,
9 | extraPostCSSPlugins,
10 | alias: {
11 | config: '/config',
12 | },
13 |
14 | publicPath: process.env.NODE_ENV === 'production' ? path : '/',
15 | base: path,
16 |
17 | fastRefresh: {},
18 | extraBabelPlugins: [['import', { libraryName: 'antd-mobile', libraryDirectory: 'es/components', style: false }]],
19 | dynamicImport: {
20 | loading: '@/components/Loading',
21 | },
22 |
23 | targets: {
24 | ios: 10,
25 | chrome: 79,
26 | ie: false,
27 | firefox: false,
28 | safari: false,
29 | edge: false,
30 | },
31 |
32 | // 优化项
33 | mfsu: {},
34 | mock: false,
35 | antd: false,
36 | hash: true,
37 | ignoreMomentLocale: true,
38 | nodeModulesTransform: {
39 | type: 'none',
40 | exclude: [],
41 | },
42 | });
43 |
--------------------------------------------------------------------------------
/config/postcssPlugins.ts:
--------------------------------------------------------------------------------
1 | export default [
2 | require('postcss-px-to-viewport')({
3 | viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是375
4 | unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
5 | viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
6 | selectorBlackList: [], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
7 | minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
8 | mediaQuery: false, // 允许在媒体查询中转换`px`
9 | }),
10 | // require('autoprefixer'),
11 | ]
--------------------------------------------------------------------------------
/config/router.ts:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | path: '/',
4 | component: '@/layouts',
5 | routes: [
6 | { path: '/', component: '@/pages/index', title: '渐变红旗头像生成' },
7 | ],
8 | },
9 | ];
10 |
--------------------------------------------------------------------------------
/images/index.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/findmio/Five-star-red-flag-Avatar/8bb49ea481c598d1e11343458f67907445ada4d1/images/index.png
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "scripts": {
4 | "start": "umi dev",
5 | "build": "umi build",
6 | "deploy": "npm run build && gh-pages -d dist",
7 | "postinstall": "umi generate tmp",
8 | "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
9 | "test": "umi-test",
10 | "test:coverage": "umi-test --coverage"
11 | },
12 | "gitHooks": {
13 | "pre-commit": "lint-staged"
14 | },
15 | "lint-staged": {
16 | "*.{js,jsx,less,md,json}": [
17 | "prettier --write"
18 | ],
19 | "*.ts?(x)": [
20 | "prettier --parser=typescript --write"
21 | ]
22 | },
23 | "dependencies": {
24 | "@ant-design/pro-layout": "^6.5.0",
25 | "ahooks": "^3.5.0",
26 | "antd-mobile": "^5.15.1",
27 | "axios": "^0.21.4",
28 | "cropperjs": "^1.5.12",
29 | "dayjs": "^1.10.7",
30 | "lodash": "^4.17.21",
31 | "qs": "^6.10.1",
32 | "react": "17.x",
33 | "react-dom": "17.x",
34 | "react-query": "^3.24.4",
35 | "umi": "^3.5.19"
36 | },
37 | "devDependencies": {
38 | "@types/lodash": "^4.14.175",
39 | "@types/qs": "^6.9.7",
40 | "@types/react": "^17.0.0",
41 | "@types/react-dom": "^17.0.0",
42 | "@umijs/preset-react": "1.x",
43 | "@umijs/test": "^3.5.19",
44 | "autoprefixer": "^10.3.5",
45 | "babel-plugin-import": "^1.13.3",
46 | "gh-pages": "^3.2.3",
47 | "lint-staged": "^10.0.7",
48 | "postcss-px-to-viewport": "^1.1.1",
49 | "prettier": "^2.2.0",
50 | "typescript": "^4.1.2",
51 | "yorkie": "^2.0.0"
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/src/app.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { QueryClient, QueryClientProvider } from 'react-query';
3 | import 'antd-mobile/es/global';
4 | import '@/styles/index.less';
5 |
6 | export function onRouteChange(props: { matchedRoutes: any }) {
7 | const { matchedRoutes } = props;
8 | if (matchedRoutes.length) {
9 | }
10 | }
11 |
12 | const queryClient = new QueryClient({
13 | defaultOptions: {
14 | queries: {
15 | refetchOnWindowFocus: false, // 窗口获得焦点时重新获取数据
16 | },
17 | },
18 | });
19 |
20 | /**
21 | * react-dom 渲染时的根组件
22 | */
23 | export function rootContainer(container: any) {
24 | const App = () =>