├── .npmrc
├── src
    ├── index.ts
    ├── component
    │   ├── index.ts
    │   ├── TryAgainPage.tsx
    │   └── index.less
    ├── .DS_Store
    ├── types.ts
    ├── lazyEntrance.tsx
    ├── loadable.tsx
    ├── retry.ts
    ├── withErrorBoundary.tsx
    └── assets
    │   └── page-crash.svg
├── .gitignore
├── demo
    ├── WechatIMG591.png
    ├── app.tsx
    ├── error.tsx
    └── index.tsx
├── babel.config.js
├── typings
    └── global.d.ts
├── .fatherrc.ts
├── .prettierrc
├── tsconfig.node.json
├── .editorconfig
├── vite.config.ts
├── index.html
├── tsconfig.json
├── LICENSE
├── README.md
└── package.json


/.npmrc:
--------------------------------------------------------------------------------
1 | registry=https://registry.npmjs.org/
2 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lazyEntrance';
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .DS_Store
3 | dist
4 | 


--------------------------------------------------------------------------------
/src/component/index.ts:
--------------------------------------------------------------------------------
1 | export * from './TryAgainPage';
2 | 


--------------------------------------------------------------------------------
/src/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hawx1993/lazy-import-with-error-boundary/main/src/.DS_Store


--------------------------------------------------------------------------------
/demo/WechatIMG591.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hawx1993/lazy-import-with-error-boundary/main/demo/WechatIMG591.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     ['@babel/preset-env', { targets: { node: 'current' } }],
4 |     '@babel/preset-typescript',
5 |   ],
6 | };
7 | 


--------------------------------------------------------------------------------
/demo/app.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const App = () => {
 4 |   const a = 1;
 5 |   a += 1;
 6 |   return <div>123</div>;
 7 | };
 8 | 
 9 | export default App;
10 | 


--------------------------------------------------------------------------------
/typings/global.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.css';
2 | declare module '*.less';
3 | declare module '*.svg';
4 | declare module '*.jpg';
5 | declare module '*.png';
6 | declare module '*.gif';
7 | declare module '*.scss';
8 | 


--------------------------------------------------------------------------------
/.fatherrc.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'father';
 2 | 
 3 | export default defineConfig({
 4 |   esm: {},
 5 |   cjs: {},
 6 |   umd: {
 7 |     entry: {
 8 |       'src/index': {},
 9 |     },
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 |   


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |       "composite": true,
 4 |       "module": "ESNext",
 5 |       "moduleResolution": "Node",
 6 |       "allowSyntheticDefaultImports": true
 7 |     },
 8 |     "include": ["vite.config.ts"]
 9 | }
10 |   


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | type State = {
 4 |   hasError: boolean;
 5 | };
 6 | 
 7 | type ErrorProps = {
 8 |   retry: () => void;
 9 | };
10 | 
11 | type Options = {
12 |   Error?: React.ElementType<ErrorProps>;
13 | };
14 | 
15 | export { State, ErrorProps, Options };
16 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite';
 2 | import react from '@vitejs/plugin-react';
 3 | 
 4 | // https://vitejs.dev/config/
 5 | export default defineConfig({
 6 |   plugins: [react()],
 7 |   css: {
 8 |     preprocessorOptions: {
 9 |       less: {
10 |         javascriptEnabled: true,
11 |       },
12 |     },
13 |   },
14 | });
15 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Vite + React + TS</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="root"></div>
10 |     <script type="module" src="/demo/index.tsx"></script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/demo/error.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback } from 'react';
 2 | // import './index.less';
 3 | 
 4 | const CustomError = ({ onReload }) => {
 5 |   const handleClick = useCallback(async () => {
 6 |     await onReload();
 7 |   }, [onReload]);
 8 |   return (
 9 |     <div className="custom-error-wrap">
10 |       <h4 className="title">页面崩溃了，无法正确显示，（自定义文案）</h4>
11 |       <button onClick={handleClick} className="refresh-btn">
12 |         刷新
13 |       </button>
14 |     </div>
15 |   );
16 | };
17 | export { CustomError };
18 | 


--------------------------------------------------------------------------------
/src/component/TryAgainPage.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback } from 'react';
 2 | import PAGE_CRASH from '../assets/page-crash.svg';
 3 | import './index.less';
 4 | 
 5 | const TryAgainPage = ({ onReload }) => {
 6 |   const handleClick = useCallback(async () => {
 7 |     await onReload();
 8 |   }, [onReload]);
 9 |   return (
10 |     <div className="error-wrap">
11 |       <img src={PAGE_CRASH} alt="" />
12 |       <h4 className="title">页面崩溃了，无法正确显示</h4>
13 |       <button onClick={handleClick} className="refresh-btn">
14 |         刷新
15 |       </button>
16 |     </div>
17 |   );
18 | };
19 | export { TryAgainPage };
20 | 


--------------------------------------------------------------------------------
/src/lazyEntrance.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { loadableComponent } from './loadable';
 3 | import { TryAgainPage } from './component/TryAgainPage';
 4 | import { ErrorProps } from './types';
 5 | 
 6 | interface DefaultImportedComponent<P> {
 7 |   default: React.ElementType<P>;
 8 | }
 9 | type DefaultComponent<P> = React.ElementType<P> | DefaultImportedComponent<P>;
10 | 
11 | const ErrorComponent = ({ retry }: ErrorProps) => (
12 |   <TryAgainPage onReload={retry} />
13 | );
14 | 
15 | export function lazyEntrance<T>(
16 |   loadFn: (props: T) => Promise<DefaultComponent<T>>,
17 |   customErrorComponent?: React.ElementType<ErrorProps>,
18 | ) {
19 |   return loadableComponent(loadFn, {
20 |     Loading: null,
21 |     Error: customErrorComponent || ErrorComponent,
22 |   });
23 | }
24 | export { ErrorComponent };
25 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "commonjs",
 5 |     "moduleResolution": "node",
 6 |     "jsx": "react",
 7 |     "declaration": true,
 8 |     "pretty": true,
 9 |     "rootDir": "src",
10 |     "sourceMap": false,
11 |     "strict": true,
12 |     "esModuleInterop": true,
13 |     "noUnusedLocals": true,
14 |     "noUnusedParameters": true,
15 |     "noImplicitReturns": true,
16 |     "noImplicitAny": false,
17 |     "noFallthroughCasesInSwitch": true,
18 |     "allowSyntheticDefaultImports": true,
19 |     "outDir": "dist",
20 |     "lib": [
21 |       "es2018",
22 |       "dom"
23 |     ],
24 |     "importHelpers": true
25 |   },
26 |   "include": ["src/**/*"],
27 |   "files": ["./typings/global.d.ts"],
28 |   "exclude": [
29 |     "node_modules",
30 |     "lib",
31 |     "esm",
32 |     "tests",
33 |   ]
34 | }
35 | 


--------------------------------------------------------------------------------
/src/loadable.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import loadable, {
 3 |   DefaultComponent,
 4 |   Options,
 5 |   LoadableComponentOptions,
 6 | } from '@loadable/component';
 7 | import withErrorBoundary from './withErrorBoundary';
 8 | import { retry, MaxRetriesError } from './retry';
 9 | import { ErrorProps } from './types';
10 | 
11 | type LoadableComponentOptions<T> = {
12 |   timeout?: number;
13 |   delay?: number;
14 |   Error?: React.ElementType<ErrorProps>;
15 |   retries?: number;
16 | } & Options<T>;
17 | 
18 | const RETRIES = 2;
19 | 
20 | function loadableComponent<T>(
21 |   loadFn: (props: T) => Promise<DefaultComponent<T>>,
22 |   options: LoadableComponentOptions<T> = {},
23 | ) {
24 |   const { retries = RETRIES, Error } = options;
25 |   const newLoadFn = (props: T) => retry(loadFn, retries, props);
26 |   return withErrorBoundary(loadable(newLoadFn), {
27 |     Error,
28 |   });
29 | }
30 | 
31 | export { loadableComponent, retry, MaxRetriesError };
32 | 


--------------------------------------------------------------------------------
/src/retry.ts:
--------------------------------------------------------------------------------
 1 | export class MaxRetriesError {
 2 |   readonly name = 'MaxRetriesError';
 3 | 
 4 |   readonly stack?: string;
 5 | 
 6 |   readonly message: string;
 7 | 
 8 |   constructor(message?: string) {
 9 |     const error = new Error(message);
10 |     this.stack = error.stack;
11 |     this.message = error.message;
12 |   }
13 | }
14 | 
15 | export async function retry<T, P>(
16 |   fn: (props?: any) => Promise<T>,
17 |   retriesLeft: number = 2,
18 |   props?: P,
19 |   interval: number = 500,
20 |   exponential: boolean = true,
21 | ): Promise<T> {
22 |   try {
23 |     const val = await fn(props);
24 |     return val;
25 |   } catch (error) {
26 |     if (retriesLeft) {
27 |       await new Promise((r) => setTimeout(r, interval));
28 |       return retry(
29 |         fn,
30 |         retriesLeft - 1,
31 |         props,
32 |         exponential ? interval * 2 : interval,
33 |         exponential,
34 |       );
35 |     }
36 |     throw new MaxRetriesError();
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 trigkit4
 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 | 


--------------------------------------------------------------------------------
/src/component/index.less:
--------------------------------------------------------------------------------
 1 | .error-wrap {
 2 |     position: relative;
 3 |     top: 50%;
 4 |     transform: translate(0, 100%);
 5 |     bottom: 0;
 6 |     left: 0;
 7 |     right: 0;
 8 |     display: flex;
 9 |     flex-direction: column;
10 |     justify-content: center;
11 |     align-items: center;
12 |     img {
13 |       width: 220px;
14 |       height: 280px;
15 |     }
16 |     .title {
17 |       font-size: 14px;
18 |       color: #343434;
19 |       line-height: 22px;
20 |       font-weight: 600;
21 |     }
22 |     .refresh-btn{
23 |       min-width: 72px;
24 |       padding-right: 16px;
25 |       padding-left: 16px;
26 |       color: #fff;
27 |       border-color: #346fff;
28 |       background: #346fff;
29 |       outline: 0;
30 |       position: relative;
31 |       display: inline-block;
32 |       font-weight: 400;
33 |       white-space: nowrap;
34 |       text-align: center;
35 |       user-select: none;
36 |       touch-action: manipulation;
37 |       height: 32px;
38 |       padding: 4px 15px;
39 |       font-size: 14px;
40 |       border-radius: 4px;
41 |       border: 1px solid #dae0f0;
42 |       cursor: pointer;
43 |     }
44 | }
45 |   


--------------------------------------------------------------------------------
/demo/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render } from 'react-dom';
 3 | import { lazyEntrance } from '../src';
 4 | import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 5 | import { CustomError } from './error';
 6 | 
 7 | enum PATH_NAME {
 8 |   ROOT = '/',
 9 |   CUSTOM_ERROR_COMPONENT = '/custom-error-component',
10 | }
11 | 
12 | const CustomErrorComponent = ({ retry }: any) => (
13 |   <CustomError onReload={retry} />
14 | );
15 | const Apps = lazyEntrance(
16 |   () =>
17 |     import(
18 |       /* webpackChunkName: "page.onlineScripting" */
19 |       /* webpackPrefetch: true */
20 |       /* webpackPreload: true */ './app'
21 |     ),
22 | );
23 | 
24 | const CustomErrorPage = lazyEntrance(
25 |   () =>
26 |     import(
27 |       /* webpackChunkName: "page.onlineScripting" */
28 |       /* webpackPrefetch: true */
29 |       /* webpackPreload: true */ './app'
30 |     ),
31 |   CustomErrorComponent,
32 | );
33 | 
34 | const DemoComponent = () => {
35 |   return (
36 |     <Router>
37 |       <Switch>
38 |         <Route path={PATH_NAME.ROOT} exact component={Apps} />
39 |         <Route
40 |           path={PATH_NAME.CUSTOM_ERROR_COMPONENT}
41 |           component={CustomErrorPage}
42 |         />
43 |       </Switch>
44 |     </Router>
45 |   );
46 | };
47 | export default DemoComponent;
48 | 
49 | render(<DemoComponent />, document.getElementById('root'));
50 | 


--------------------------------------------------------------------------------
/src/withErrorBoundary.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { LoadableComponent } from '@loadable/component';
 3 | import { MaxRetriesError } from './retry';
 4 | import { State, Options } from './types';
 5 | 
 6 | export async function retry<T, P>(
 7 |   fn: (props?: P) => Promise<T>,
 8 |   retriesLeft: number = 2,
 9 |   props?: P,
10 |   interval: number = 500,
11 |   exponential: boolean = true,
12 | ): Promise<T> {
13 |   try {
14 |     const val = await fn(props);
15 |     return val;
16 |   } catch (error) {
17 |     if (retriesLeft) {
18 |       await new Promise((r) => setTimeout(r, interval));
19 |       return retry(
20 |         fn,
21 |         retriesLeft - 1,
22 |         props,
23 |         exponential ? interval * 2 : interval,
24 |         exponential,
25 |       );
26 |     }
27 |     throw new MaxRetriesError();
28 |   }
29 | }
30 | 
31 | export default function withErrorBoundary<P>(
32 |   Loadable: LoadableComponent<P>,
33 |   options: Options,
34 | ) {
35 |   return class ErrorBoundary extends React.PureComponent<P, State> {
36 |     state = {
37 |       hasError: false,
38 |     };
39 | 
40 |     retry = () => {
41 |       this.setState({ hasError: false });
42 |       Loadable.load(this.props);
43 |     };
44 | 
45 |     componentDidCatch(error: Error) {
46 |       if (error) {
47 |         this.setState({
48 |           hasError: true,
49 |         });
50 |       }
51 |     }
52 | 
53 |     render() {
54 |       if (this.state.hasError && options.Error) {
55 |         const { Error } = options;
56 |         return <Error retry={this.retry} />;
57 |       }
58 | 
59 |       return <Loadable {...this.props} />;
60 |     }
61 |   };
62 | }
63 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # lazy-import-with-error-boundary
 2 | 
 3 | <p align="center">
 4 |   <img src="https://img.shields.io/github/license/hawx1993/lazy-import-with-error-boundary" />
 5 |   <img src="https://img.shields.io/github/stars/hawx1993/lazy-import-with-error-boundary" /> 
 6 |   <img src="https://img.shields.io/github/forks/hawx1993/lazy-import-with-error-boundary" /> 
 7 |   <img src="https://img.shields.io/github/issues/hawx1993/lazy-import-with-error-boundary" />
 8 | </p>
 9 | 
10 | Features are as below:
11 | 
12 | - Support code splitting
13 | - support load on-demand
14 | - support hooks component error boundary.
15 | - Support refresh function on bottom page
16 | 
17 | ### Usages
18 | 
19 | 1、install
20 | ```bash
21 | $ yarn add lazy-import-with-error-boundary
22 | ```
23 | 
24 | import lazyEntrance in your react router entrance:
25 | 
26 | 2、Usage
27 | 
28 | ```tsx
29 | import { lazyEntrance  } from 'lazy-import-with-error-boundary';
30 | 
31 | export const Entrance = lazyEntrance(() =>
32 |   import(
33 |     /* webpackChunkName: "contact.entrance" */ /* webpackPrefetch: true */ './container/Entrance'
34 |   ),
35 | );
36 | ```
37 | 
38 | 3、custom error component
39 | 
40 | ```tsx
41 | import { CustomError } from './error';
42 | 
43 | const CustomErrorComponent = ({ retry }: any) => (
44 |   <CustomError onReload={retry} />
45 | );
46 | 
47 | const CustomErrorPage = lazyEntrance(
48 |   () =>
49 |     import(
50 |       /* webpackChunkName: "page.onlineScripting" */
51 |       /* webpackPrefetch: true */
52 |       /* webpackPreload: true */ './app'
53 |     ),
54 |   CustomErrorComponent,
55 | );
56 | ```
57 | more details: run demo, open: http://localhost:5173/custom-error-component
58 | ### Demo
59 | 
60 | ```bash
61 | $ yarn run dev
62 | ```
63 | 
64 | <img src="./demo/WechatIMG591.png" />


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "lazy-import-with-error-boundary",
 3 |   "version": "0.1.8",
 4 |   "description": "lazy import react hooks component with error boundary",
 5 |   "sideEffects": false,
 6 |   "files": [
 7 |     "dist"
 8 |   ],
 9 |   "module": "dist/esm/index.js",
10 |   "types": "dist/esm/index.d.ts",
11 |   "main": "dist/cjs/index.js",
12 |   "typings": "dist/esm/index.d.ts",
13 |   "scripts": {
14 |     "dev": "vite",
15 |     "build": "npx father  build",
16 |     "version": "npm run build",
17 |     "prepublishOnly": "npm version patch && git push",
18 |     "release": "npm run build && npm publish"
19 |   },
20 |   "husky": {
21 |     "hooks": {
22 |       "pre-commit": "lint-staged",
23 |       "pre-push": "yarn lint && yarn clean && yarn build"
24 |     }
25 |   },
26 |   "author": "@hawx1993",
27 |   "license": "MIT",
28 |   "repository": {
29 |     "type": "git"
30 |   },
31 |   "dependencies": {
32 |     "@loadable/component": "5.12.0"
33 |   },
34 |   "peerDependencies": {
35 |     "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
36 |     "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
37 |   },
38 |   "devDependencies": {
39 |     "@babel/core": "7.19.6",
40 |     "@babel/preset-env": "7.19.4",
41 |     "@babel/preset-typescript": "7.18.6",
42 |     "@types/react": "^18.0.25",
43 |     "@types/react-dom": "^18.0.9",
44 |     "@vitejs/plugin-react": "^2.2.0",
45 |     "father": "^4.1.0",
46 |     "husky": "^8.0.2",
47 |     "less": "^4.1.3",
48 |     "less-loader": "^11.1.0",
49 |     "lint-staged": "^13.0.3",
50 |     "react": "^18.2.0",
51 |     "react-dom": "^18.2.0",
52 |     "react-router": "^5.2.0",
53 |     "react-router-dom": "^5.2.0",
54 |     "vite": "^3.2.4"
55 |   },
56 |   "config": {
57 |     "commitizen": {
58 |       "path": "git-cz"
59 |     }
60 |   },
61 |   "lint-staged": {
62 |     "src/**/**/*.{ts,tsx}": [
63 |       "eslint --fix",
64 |       "git add"
65 |     ]
66 |   },
67 |   "volta": {
68 |     "node": "14.18.2",
69 |     "yarn": "1.22.17"
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/src/assets/page-crash.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8"?>
  2 | <svg width="280px" height="220px" viewBox="0 0 280 220" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  3 |     <title>编组 8</title>
  4 |     <defs>
  5 |         <rect id="path-1" x="0" y="0" width="280" height="220"></rect>
  6 |         <linearGradient x1="88.2842005%" y1="50%" x2="0%" y2="50%" id="linearGradient-3">
  7 |             <stop stop-color="#A6B5CC" stop-opacity="0.71263587" offset="0%"></stop>
  8 |             <stop stop-color="#8F9BAF" stop-opacity="0" offset="100%"></stop>
  9 |         </linearGradient>
 10 |         <linearGradient x1="60.2373362%" y1="87.6127993%" x2="65.0010777%" y2="58.6578%" id="linearGradient-4">
 11 |             <stop stop-color="#D4E1F6" stop-opacity="0" offset="0%"></stop>
 12 |             <stop stop-color="#FFFFFF" offset="100%"></stop>
 13 |         </linearGradient>
 14 |         <rect id="path-5" x="0" y="0" width="132.188552" height="110.30303"></rect>
 15 |         <linearGradient x1="57.5915776%" y1="88.8858288%" x2="50%" y2="-9.54224577%" id="linearGradient-7">
 16 |             <stop stop-color="#D4E1F6" stop-opacity="0" offset="0%"></stop>
 17 |             <stop stop-color="#FFFFFF" stop-opacity="0.555871656" offset="66.3972018%"></stop>
 18 |             <stop stop-color="#FFFFFF" offset="100%"></stop>
 19 |         </linearGradient>
 20 |         <path d="M56.4525538,21.2691668 C74.7541205,27.8112644 87.2233207,36.6707291 93.8166269,47.9396869 C98.8378846,56.5217758 98.0428168,65.3028853 92.6350401,75.3501207 C92.3464762,75.8862504 92.0608009,76.4040402 91.7711959,76.9139435 L91.2834567,77.7587094 L90.7957408,78.5760059 L90.4172007,79.1925425 L90.1572557,79.6075821 L89.7539447,80.2392554 L89.1869619,81.1049896 L88.7362707,81.7773265 L88.0962356,82.7124238 L87.2242588,83.9573173 L86.2605962,85.3047093 L85.1926475,86.7739173 L83.7557104,88.7249633 L81.5403362,91.7001929 L80.2843062,93.3821802 L79.100267,94.980081 L77.7493055,96.8255768 L76.7634375,98.1939579 L76.0748892,99.1644979 L75.42671,100.092444 L74.8160032,100.982464 L74.2398718,101.839229 L73.6954189,102.667408 L73.3486188,103.205951 L73.0137522,103.735247 L72.6899608,104.25668 L72.3763861,104.771634 L71.9233028,105.534942 L71.6315148,106.039749 L71.3469393,106.542919 L70.931722,107.297629 L70.6614227,107.802757 L70.3953317,108.31109 C70.3512862,108.396157 70.3073803,108.481414 70.2635961,108.566891 C67.2820876,114.387508 66.040308,119.544645 66.6326434,124.505897 C66.8267511,126.131695 65.6286209,127.602664 63.9565448,127.791399 C62.2844687,127.980134 60.7716278,126.815165 60.5775201,125.189368 C59.8327923,118.951714 61.3396001,112.693909 64.8071198,105.924482 L65.0935208,105.371155 L65.3831315,104.823348 L65.6768548,104.279589 L65.9755938,103.738408 L66.2802515,103.198332 L66.7503111,102.387075 L67.0737165,101.843328 L67.4062012,101.295537 L67.9239274,100.463051 L68.4671617,99.6131898 L69.0389519,98.740989 L69.4375148,98.1446584 L69.8510268,97.5347206 L70.2803909,96.9097041 L70.9561352,95.9406886 L71.9210383,94.5821605 L72.9656046,93.1368341 L74.0970584,91.5929387 L75.972956,89.0665305 L78.5421957,85.6212428 L79.7577725,83.9753613 L80.8495215,82.481132 L81.642328,81.381895 L82.3705646,80.3573557 L83.0407559,79.3975764 L83.5092319,78.7142625 L83.9514798,78.0575936 L84.2330998,77.6325469 L84.7683014,76.8074214 L85.14838,76.205533 L85.5132406,75.6135199 L85.9808061,74.8322844 L86.4327349,74.0512139 L86.6630687,73.6429948 C86.8542453,73.3013327 87.0438175,72.9554905 87.2341537,72.6018603 C91.7655311,64.1829079 92.3741643,57.4608705 88.5182217,50.8704811 C82.7365531,40.9887349 71.4334477,32.9725925 54.5674413,26.9098129 M19.2916814,12.2942155 C29.7253845,13.9319869 39.1447574,15.965298 47.5466227,18.4008737 L47.5526495,18.3732747 L47.5745112,18.4089607 C47.5788267,18.4102125 47.5831419,18.4114644 47.5874568,18.4127164 L47.5835758,18.4248923 L47.6542002,18.5465163 C48.1015093,19.3678415 48.1764971,20.3692675 47.8791635,21.5507943 C47.5635902,22.8048013 46.9766228,23.6735367 46.1182616,24.1570004 L46.1143189,24.1704663 L46.1008944,24.1667092 C46.0985056,24.1680346 46.0961147,24.1693571 46.0937217,24.1706765 L46.0945758,24.1648923 L45.1265882,23.8854083 C37.1834405,21.6195404 28.2490057,19.7040509 18.320171,18.1455284 C16.6583814,17.8846784 15.5287147,16.3633567 15.7969899,14.7475612 C16.0652651,13.1317658 17.6298918,12.0333655 19.2916814,12.2942155 Z M56.4661313,21.2662753 L54.59047,26.925148" id="path-8"></path>
 21 |         <filter x="-7.4%" y="-5.2%" width="114.7%" height="110.4%" filterUnits="objectBoundingBox" id="filter-9">
 22 |             <feGaussianBlur stdDeviation="4" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
 23 |             <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
 24 |             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
 25 |             <feColorMatrix values="0 0 0 0 0.631740127   0 0 0 0 0.789022581   0 0 0 0 0.884097777  0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
 26 |         </filter>
 27 |         <linearGradient x1="30.021169%" y1="35.1196611%" x2="59.7073279%" y2="50%" id="linearGradient-10">
 28 |             <stop stop-color="#D4DCEA" offset="0%"></stop>
 29 |             <stop stop-color="#64728F" offset="100%"></stop>
 30 |         </linearGradient>
 31 |         <linearGradient x1="57.4453576%" y1="100%" x2="45.895685%" y2="5.04199562%" id="linearGradient-11">
 32 |             <stop stop-color="#B5C2D6" offset="0%"></stop>
 33 |             <stop stop-color="#D4E1F6" offset="44.7883659%"></stop>
 34 |             <stop stop-color="#FFFFFF" offset="100%"></stop>
 35 |         </linearGradient>
 36 |         <path d="M141.004055,40.6954933 L145.857884,42.5316319 C147.529436,43.1639649 148.789541,44.5690338 149.236835,46.2993105 C150.088355,49.5932623 150.509338,52.983858 150.499784,56.4710976 C150.490668,59.7410918 150.116162,62.9803873 149.376266,66.188984 C148.881445,68.3348242 147.154376,69.9786492 144.986728,70.3669544 L139.500075,71.3498152 C136.510104,71.8854286 133.652053,69.8957788 133.11644,66.9058078 C133.050593,66.5382276 133.022353,66.1648968 133.032157,65.791594 L133.559957,45.6953241 C133.639707,42.658805 136.165942,40.26187 139.202461,40.3416199 C139.818578,40.3578013 140.427593,40.4774255 141.004055,40.6954933 Z" id="path-12"></path>
 37 |         <filter x="-33.0%" y="-10.5%" width="167.0%" height="124.6%" filterUnits="objectBoundingBox" id="filter-13">
 38 |             <feGaussianBlur stdDeviation="4" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
 39 |             <feOffset dx="0" dy="-4" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
 40 |             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
 41 |             <feColorMatrix values="0 0 0 0 0.631740127   0 0 0 0 0.789022581   0 0 0 0 0.884097777  0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
 42 |         </filter>
 43 |         <linearGradient x1="50%" y1="100%" x2="51.6959593%" y2="0%" id="linearGradient-14">
 44 |             <stop stop-color="#B5C2D6" offset="0%"></stop>
 45 |             <stop stop-color="#D4E1F6" offset="46.4471564%"></stop>
 46 |             <stop stop-color="#F6FAFF" offset="80.6121288%"></stop>
 47 |             <stop stop-color="#E8F2FC" offset="100%"></stop>
 48 |         </linearGradient>
 49 |         <path d="M11,6 L20.8491553,6 C42.3640865,6 59.8053843,23.4412978 59.8053843,44.956229 C59.8053843,66.4711601 42.3640865,83.9124579 20.8491553,83.9124579 L11.5990394,83.9124579 L11.5990394,83.9124579 L11,6 Z" id="path-15"></path>
 50 |         <filter x="-15.4%" y="-9.6%" width="130.7%" height="119.3%" filterUnits="objectBoundingBox" id="filter-17">
 51 |             <feGaussianBlur stdDeviation="4" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
 52 |             <feOffset dx="0" dy="-7" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
 53 |             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
 54 |             <feColorMatrix values="0 0 0 0 0.631740127   0 0 0 0 0.745463239   0 0 0 0 0.884097777  0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
 55 |         </filter>
 56 |         <linearGradient x1="62.7651031%" y1="51.4701914%" x2="66.5476718%" y2="49.6642823%" id="linearGradient-18">
 57 |             <stop stop-color="#5C7087" offset="0%"></stop>
 58 |             <stop stop-color="#6E819D" stop-opacity="0" offset="100%"></stop>
 59 |         </linearGradient>
 60 |         <filter x="-11.0%" y="-51.8%" width="122.1%" height="203.6%" filterUnits="objectBoundingBox" id="filter-19">
 61 |             <feGaussianBlur stdDeviation="1" in="SourceGraphic"></feGaussianBlur>
 62 |         </filter>
 63 |         <linearGradient x1="53.0460298%" y1="100%" x2="50%" y2="0%" id="linearGradient-20">
 64 |             <stop stop-color="#C5D3EB" offset="0%"></stop>
 65 |             <stop stop-color="#E8F0FD" offset="31.7866441%"></stop>
 66 |             <stop stop-color="#F1F9FF" offset="100%"></stop>
 67 |         </linearGradient>
 68 |         <linearGradient x1="14.65549%" y1="44.2055229%" x2="78.6018941%" y2="55.7944771%" id="linearGradient-21">
 69 |             <stop stop-color="#FFFFFF" offset="0%"></stop>
 70 |             <stop stop-color="#E5EEFD" offset="53.5528436%"></stop>
 71 |             <stop stop-color="#D6E2F4" offset="100%"></stop>
 72 |         </linearGradient>
 73 |         <path d="M59.3143888,40.9408788 L86.4524359,40.9408788 C90.3202887,40.9408788 93.4558029,44.076393 93.4558029,47.9442458 C93.4558029,51.8120986 90.3202887,54.9476128 86.4524359,54.9476128 L59.3143888,54.9476128 C55.446536,54.9476128 52.3110218,51.8120986 52.3110218,47.9442458 C52.3110218,44.076393 55.446536,40.9408788 59.3143888,40.9408788 Z" id="path-22"></path>
 74 |         <filter x="-13.4%" y="-39.3%" width="126.7%" height="178.5%" filterUnits="objectBoundingBox" id="filter-23">
 75 |             <feGaussianBlur stdDeviation="4" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
 76 |             <feOffset dx="-3" dy="-2" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
 77 |             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
 78 |             <feColorMatrix values="0 0 0 0 0.631740127   0 0 0 0 0.789022581   0 0 0 0 0.884097777  0 0 0 0.555946403 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
 79 |         </filter>
 80 |         <linearGradient x1="14.65549%" y1="44.4444444%" x2="78.6018941%" y2="55.5555556%" id="linearGradient-24">
 81 |             <stop stop-color="#FFFFFF" offset="0%"></stop>
 82 |             <stop stop-color="#E5EEFD" offset="53.5528436%"></stop>
 83 |             <stop stop-color="#D6E2F4" offset="100%"></stop>
 84 |         </linearGradient>
 85 |         <path d="M66.3391789,18.0446761 L94.3526469,18.0446761 C98.2204997,18.0446761 101.356014,21.1801903 101.356014,25.0480431 C101.356014,28.9158959 98.2204997,32.0514101 94.3526469,32.0514101 L66.3391789,32.0514101 C62.4713261,32.0514101 59.3358119,28.9158959 59.3358119,25.0480431 C59.3358119,21.1801903 62.4713261,18.0446761 66.3391789,18.0446761 Z" id="path-25"></path>
 86 |         <filter x="-13.1%" y="-39.3%" width="126.2%" height="178.5%" filterUnits="objectBoundingBox" id="filter-26">
 87 |             <feGaussianBlur stdDeviation="4" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
 88 |             <feOffset dx="-3" dy="-2" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
 89 |             <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
 90 |             <feColorMatrix values="0 0 0 0 0.631740127   0 0 0 0 0.789022581   0 0 0 0 0.884097777  0 0 0 0.555946403 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
 91 |         </filter>
 92 |         <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-27">
 93 |             <stop stop-color="#D9E5F6" stop-opacity="0.71263587" offset="0%"></stop>
 94 |             <stop stop-color="#B2C6EA" offset="100%"></stop>
 95 |         </linearGradient>
 96 |         <path d="M11.159092,2.6943027 C12.854403,5.88038824 12.652956,13.9621584 10.4619176,14.5316008 C9.58811885,14.7586977 7.72665005,14.2023872 5.83212591,13.0510033 L7.02136203,21.5333415 L-6.99198706e-12,21.5333415 L2.41752293,10.1742049 C1.0692619,8.57867291 0.156690798,6.62327226 0.309167051,4.43216754 C0.748456778,-1.88048624 9.46378103,-0.491782837 11.159092,2.6943027 Z" id="path-28"></path>
 97 |         <linearGradient x1="69.7377147%" y1="14.6135924%" x2="66.8904564%" y2="42.0340262%" id="linearGradient-30">
 98 |             <stop stop-color="#3C4C66" offset="0%"></stop>
 99 |             <stop stop-color="#4C617F" offset="100%"></stop>
100 |         </linearGradient>
101 |         <path d="M38.964198,62.2947311 C39.8247947,62.4257019 40.6559715,62.3720927 41.4577284,62.1339033 C42.2594852,61.895714 42.9522457,61.4925068 43.5360098,60.9242817 C40.9481055,51.7975254 37.4762776,41.8587593 33.1205263,31.1079834 C28.7647749,20.3572075 24.1738571,9.98787971 19.3477728,-9.17192385e-12 L4.79446482e-11,-9.17192385e-12 C6.33839496,13.2426979 12.9198786,24.7745726 19.7444508,34.595624 C26.5690231,44.4166755 32.9756054,53.6497112 38.964198,62.2947311 Z" id="path-31"></path>
102 |         <linearGradient x1="75.0867731%" y1="14.6135924%" x2="71.467888%" y2="42.0340262%" id="linearGradient-33">
103 |             <stop stop-color="#3C4C66" offset="0%"></stop>
104 |             <stop stop-color="#4C617F" offset="100%"></stop>
105 |         </linearGradient>
106 |         <linearGradient x1="62.2177729%" y1="75.7037984%" x2="50%" y2="50%" id="linearGradient-34">
107 |             <stop stop-color="#4C6280" offset="0%"></stop>
108 |             <stop stop-color="#445572" offset="100%"></stop>
109 |         </linearGradient>
110 |         <linearGradient x1="90.5017264%" y1="16.8684234%" x2="84.6591618%" y2="42.5416201%" id="linearGradient-35">
111 |             <stop stop-color="#435470" offset="0%"></stop>
112 |             <stop stop-color="#5F7696" offset="100%"></stop>
113 |         </linearGradient>
114 |         <path d="M0.387637695,36.2715309 C-0.0224620786,36.7591404 -0.0617530075,37.6109233 0.269764909,38.8268797 C0.601282825,40.0428362 1.09108673,40.8688966 1.73917661,41.3050612 C17.693262,42.7011793 27.4686825,41.6923963 31.0654381,38.278712 C34.6621937,34.8650278 38.7614334,22.1054572 43.3631572,-1.05793872e-11 L24.9139004,-1.05793872e-11 C21.9983565,18.101395 20.3683778,27.5320307 20.0239641,28.2919072 C19.6795504,29.0517838 13.1341083,31.7116583 0.387637695,36.2715309 Z" id="path-36"></path>
115 |         <linearGradient x1="83.6437465%" y1="83.336678%" x2="63.5740795%" y2="66.4600389%" id="linearGradient-38">
116 |             <stop stop-color="#52637F" offset="0%"></stop>
117 |             <stop stop-color="#627692" offset="100%"></stop>
118 |         </linearGradient>
119 |         <path d="M13.2285617,-9.13047415e-13 L13.248195,0.0577686998 C18.195161,0.626510402 21.2476268,5.07927573 24.4919685,9.58241516 L24.931396,10.1904136 C28.753171,15.4563275 32.9663037,20.554933 40.9143074,19.3426319 C41.2133009,19.2970267 41.59341,19.0933488 42.0005607,19.4618882 C42.2629467,19.6993914 42.5214438,22.7310864 42.4434925,23.2015812 C42.3915249,23.5152444 42.2707654,23.7137724 42.0812137,23.7971653 C28.8687631,29.439404 22.8647679,27.294828 18.8697056,23.7734997 C20.0156652,33.8912179 18.4803176,41.0642286 12.543676,41.0642286 L12.543676,41.0642286 L0.419753286,41.0642286 C-1.5058055,28.0812564 3.5549398,10.0800388 8.24661866,1.00036992 C8.42577974,0.653644718 8.80723167,-9.13047415e-13 9.70570745,-9.13047415e-13 L9.70570745,-9.13047415e-13 L13.2285617,-9.13047415e-13 L13.2285617,-9.13047415e-13 Z" id="path-39"></path>
120 |         <linearGradient x1="53.7348931%" y1="30.3451185%" x2="43.1371978%" y2="84.6818438%" id="linearGradient-41">
121 |             <stop stop-color="#000000" stop-opacity="0.1" offset="0%"></stop>
122 |             <stop stop-color="#000000" stop-opacity="0" offset="100%"></stop>
123 |         </linearGradient>
124 |         <linearGradient x1="19.5864035%" y1="40.405356%" x2="50%" y2="81.5884939%" id="linearGradient-42">
125 |             <stop stop-color="#D4D9DC" offset="0%"></stop>
126 |             <stop stop-color="#C0C7CB" offset="100%"></stop>
127 |         </linearGradient>
128 |     </defs>
129 |     <g id="4.18" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
130 |         <g id="页面崩溃" transform="translate(-580.000000, -180.000000)">
131 |             <g id="编组-8" transform="translate(580.000000, 180.000000)">
132 |                 <mask id="mask-2" fill="white">
133 |                     <use xlink:href="#path-1"></use>
134 |                 </mask>
135 |                 <g id="蒙版"></g>
136 |                 <g mask="url(#mask-2)" id="编组-6">
137 |                     <g transform="translate(28.000000, 19.778004)">
138 |                         <path d="M0.062931552,104.818332 C2.16576328,78.9706072 114.991638,29.0817758 135.937368,53.5642296 C156.883098,78.0466834 136.746376,123.993845 92.8518624,135.759744 C48.9573484,147.525642 -2.03990017,130.666056 0.062931552,104.818332 Z" id="Background-Shape备份" fill-opacity="0.603771717" fill="#F2F4F5" transform="translate(72.129845, 93.283156) scale(-1, 1) translate(-72.129845, -93.283156) "></path>
139 |                         <path d="M93.5471721,121.613035 C95.3965105,99.6543815 189.432173,62.043926 213.04214,78.0706698 C236.652107,94.0974135 226.80024,142.617343 188.197147,152.612934 C149.594054,162.608525 91.6978338,143.571688 93.5471721,121.613035 Z" id="Background-Shape备份-2" fill-opacity="0.601057146" fill="#DDE3E9"></path>
140 |                         <g id="编组-5" transform="translate(70.989884, 92.858955)" fill="url(#linearGradient-3)" opacity="0.154585484">
141 |                             <path d="M133.295572,2.90681189 C141.921586,6.29814791 147.105851,12.6828587 147.87445,22.2435943 C147.951936,23.2074479 147.233392,24.05162 146.269539,24.1291053 C145.305685,24.2065907 144.461513,23.4880472 144.384028,22.5241935 C143.173561,7.46698474 129.314399,2.0182252 108.183533,3.81701805 C105.126357,4.07726417 101.725076,4.73130244 97.9817203,5.77966634 L96.9974344,6.06209794 C96.8320939,6.11066082 96.6661071,6.15996921 96.4994741,6.21002314 L95.491924,6.5192937 C94.9842734,6.67840261 94.4708105,6.84422226 93.9515399,7.01675382 L92.9052562,7.3707665 C92.3782438,7.55224779 91.8454267,7.74044179 91.3068093,7.93534967 L90.221842,8.33411763 C90.0397257,8.40207104 89.8569652,8.47077054 89.6735607,8.54021615 L88.5654074,8.96584359 L87.4418067,9.40937998 C87.2532531,9.48479524 87.0640562,9.5609568 86.8742161,9.63786469 L85.7274594,10.1082685 L84.5652753,10.5965864 C84.3702928,10.6794657 84.1746678,10.7630915 83.9784005,10.8474639 L82.7930904,11.3626572 L81.592373,11.8957699 L80.3762563,12.4468042 C80.1722873,12.5401368 79.967677,12.6342163 79.7624256,12.7290426 L78.5232249,13.3069632 L77.2686449,13.9028107 L75.9986936,14.5165871 C75.7857546,14.6203773 75.5721754,14.7249147 75.3579562,14.8301993 L74.064963,15.4708731 L72.7566185,16.129481 C72.5372823,16.2407437 72.3173068,16.3527537 72.0966921,16.465511 L70.7653357,17.1510243 L69.4186481,17.854477 C69.192923,17.9732142 68.9665594,18.0926989 68.7395576,18.2129313 L67.3698881,18.9432971 L65.9849074,19.6916077 L64.5846235,20.4578652 C64.3499681,20.5870704 64.1146753,20.7170236 63.8787454,20.8477246 C63.6000376,21.0021239 63.2974754,21.0724433 63.0002756,21.0670687 C62.2907015,24.0957335 48.4657045,26.5119452 31.5151515,26.5119452 L30.9939909,26.5111829 C13.8290286,26.4609336 0,23.9329136 0,20.8217095 C0,17.6790791 14.1098139,15.1314738 31.5151515,15.1314738 C45.3230234,15.1314738 57.0568748,16.7347958 61.3174872,18.9665808 C61.4137702,18.4821615 61.7158628,18.0428139 62.1818607,17.7846592 L63.6193769,16.9931721 L65.0416687,16.219867 L66.448744,15.464746 L67.8406107,14.7278113 L69.217277,14.0090649 L70.5787508,13.308509 L71.9250401,12.6261456 L73.256153,11.9619769 C73.6973288,11.74362 74.1359764,11.5282959 74.5720974,11.316005 L75.8728814,10.6882319 C76.0884158,10.5851197 76.3033188,10.4827659 76.5175907,10.3811706 L77.795649,9.78069976 C78.4308924,9.48501521 79.0604582,9.1961572 79.6843507,8.91412693 L80.924573,8.35917038 L82.149675,7.82242323 L83.3596645,7.30388758 L84.5545496,6.80356552 L85.7343384,6.32145918 C85.9297123,6.24262621 86.1244575,6.16455232 86.3185741,6.08723755 L87.4757334,5.63245872 C89.0085597,5.03823378 90.5011824,4.49259809 91.953687,3.9955741 L93.0355446,3.63192116 L94.102366,3.28649971 C94.8085698,3.06229637 95.5047549,2.85024877 96.1909317,2.6503597 L97.2126922,2.35964535 C101.100677,1.28019885 104.657944,0.602790385 107.886521,0.327953462 C117.674708,-0.505278824 126.441544,0.212136169 133.295572,2.90681189 Z" id="形状结合"></path>
142 |                         </g>
143 |                         <g id="路径-6" transform="translate(127.811448, 43.089963)">
144 |                             <mask id="mask-6" fill="white">
145 |                                 <use xlink:href="#path-5"></use>
146 |                             </mask>
147 |                             <use id="蒙版" fill="url(#linearGradient-4)" xlink:href="#path-5"></use>
148 |                             <g id="编组-4" mask="url(#mask-6)" fill="#8F9AAE">
149 |                                 <g transform="translate(46.964212, 4.454840)">
150 |                                     <path d="M8.35434114,0.186444936 C8.83456459,0.290636 9.14712202,0.755071796 9.06281539,1.23918204 L8.36231168,5.26165396 C8.28235917,5.72076179 7.84536441,6.02812791 7.38625658,5.9481754 C7.37483042,5.94618556 7.3634465,5.94396035 7.35211208,5.94150119 C6.87188863,5.83731013 6.5593312,5.37287433 6.64363782,4.88876409 L7.34414154,0.86629217 C7.42409405,0.407184335 7.86108881,0.0998182178 8.32019664,0.179770732 C8.3316228,0.18176057 8.34300672,0.183985777 8.35434114,0.186444936 Z" id="矩形"></path>
151 |                                     <path d="M14.0903927,5.96209351 C14.4217603,6.36349261 14.3910508,6.9516617 14.0196833,7.31636963 L11.429257,9.86034264 C11.096684,10.1869517 10.5623113,10.182117 10.2357023,9.84954399 C10.2187005,9.83223179 10.2024533,9.81419445 10.1870057,9.79548225 C9.85563816,9.39408314 9.88634763,8.80591405 10.2577152,8.44120613 L12.8481415,5.89723312 C13.1807145,5.57062406 13.7150871,5.57545877 14.0416962,5.90803177 C14.0586979,5.92534397 14.0749452,5.94338131 14.0903927,5.96209351 Z" id="矩形备份-2"></path>
152 |                                     <path d="M0.772950755,2.21213207 C1.16084326,1.98064118 1.6629527,2.10742974 1.89444359,2.49532224 C1.90780999,2.51771936 1.92009741,2.54074303 1.93126371,2.56431431 L3.62645054,6.14273468 C3.84498751,6.60405088 3.67719848,7.15590213 3.23886199,7.41749756 C2.85096949,7.64898845 2.34886005,7.52219989 2.11736916,7.13430739 C2.10400275,7.11191027 2.09171534,7.0888866 2.08054903,7.06531532 L0.385362205,3.48689495 C0.166825235,3.02557875 0.334614265,2.47372749 0.772950755,2.21213207 Z" id="矩形备份"></path>
153 |                                 </g>
154 |                             </g>
155 |                             <g mask="url(#mask-6)">
156 |                                 <use fill="url(#linearGradient-7)" fill-rule="evenodd" xlink:href="#path-8"></use>
157 |                                 <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
158 |                             </g>
159 |                             <path d="M55.4517085,27.0445337 C56.1769309,27.0445337 56.7632963,25.7442346 56.7632963,24.052049 C56.7632963,22.3598634 56.2122954,21.0841625 55.487073,21.0841625 C54.7618506,21.0841625 54.1370337,22.3598634 54.1370337,24.052049 C54.1370337,25.7442346 54.7264861,27.0445337 55.4517085,27.0445337 Z" id="椭圆形" fill="url(#linearGradient-10)" mask="url(#mask-6)" transform="translate(55.450165, 24.064348) rotate(18.000000) translate(-55.450165, -24.064348) "></path>
160 |                         </g>
161 |                         <g id="矩形" transform="translate(141.677349, 55.248293) rotate(16.000000) translate(-141.677349, -55.248293) ">
162 |                             <use fill="url(#linearGradient-11)" fill-rule="evenodd" xlink:href="#path-12"></use>
163 |                             <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
164 |                         </g>
165 |                         <g id="路径-8" transform="translate(84.759437, 4.228617)">
166 |                             <mask id="mask-16" fill="white">
167 |                                 <use xlink:href="#path-15"></use>
168 |                             </mask>
169 |                             <g id="蒙版" transform="translate(35.402692, 44.956229) rotate(17.000000) translate(-35.402692, -44.956229) ">
170 |                                 <use fill="url(#linearGradient-14)" fill-rule="evenodd" xlink:href="#path-15"></use>
171 |                                 <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-15"></use>
172 |                             </g>
173 |                             <path d="M15.7188778,76.0513963 C20.303147,76.9909712 23.6151287,77.5848242 25.6548228,77.8329554 C27.694517,78.0810865 25.6830393,79.0836006 19.6203897,80.8404975 L13.0824863,79.0578 L-0.754341761,75.2317611 C0.303854412,75.0292706 1.0429959,74.9947513 1.4630827,75.1282031 C2.94518866,75.5990336 5.38913438,76.1089907 7.86200424,76.3462978 C11.1950883,76.6661547 13.8140461,76.5678542 15.7188778,76.0513963 Z" fill="url(#linearGradient-18)" opacity="0.622647967" filter="url(#filter-19)" mask="url(#mask-16)"></path>
174 |                         </g>
175 |                         <path d="M96.7300275,80.942558 C104.465733,80.942558 110.671073,63.0974227 110.671073,41.5824916 C110.671073,20.0675604 104.400044,2.62626263 96.6643389,2.62626263 C88.9286333,2.62626263 82.6576049,20.0675604 82.6576049,41.5824916 C82.6576049,63.0974227 88.9943219,80.942558 96.7300275,80.942558 Z" id="椭圆形" fill="url(#linearGradient-20)" transform="translate(96.664339, 41.784410) rotate(16.000000) translate(-96.664339, -41.784410) "></path>
176 |                         <g id="矩形" transform="translate(72.883412, 47.944246) rotate(18.000000) translate(-72.883412, -47.944246) ">
177 |                             <use fill="url(#linearGradient-21)" fill-rule="evenodd" xlink:href="#path-22"></use>
178 |                             <use fill="black" fill-opacity="1" filter="url(#filter-23)" xlink:href="#path-22"></use>
179 |                         </g>
180 |                         <g id="矩形备份-34" transform="translate(80.345913, 25.048043) rotate(18.000000) translate(-80.345913, -25.048043) ">
181 |                             <use fill="url(#linearGradient-24)" fill-rule="evenodd" xlink:href="#path-25"></use>
182 |                             <use fill="black" fill-opacity="1" filter="url(#filter-26)" xlink:href="#path-25"></use>
183 |                         </g>
184 |                         <g id="编组-3" transform="translate(8.659646, 34.803018)">
185 |                             <ellipse id="Oval" fill="url(#linearGradient-27)" opacity="0.402565511" transform="translate(58.592788, 128.728093) scale(-1, 1) translate(-58.592788, -128.728093) " cx="58.5927884" cy="128.728093" rx="32.2914406" ry="5.12042816"></ellipse>
186 |                             <g id="编组-38备份" transform="translate(53.387148, 65.924509) scale(-1, 1) rotate(-1.000000) translate(-53.387148, -65.924509) translate(1.906684, 0.948554)">
187 |                                 <g id="人物" transform="translate(51.085249, 64.595524) scale(-1, 1) rotate(7.000000) translate(-51.085249, -64.595524) translate(6.585249, 4.595524)">
188 |                                     <g id="Head/Front" transform="translate(39.602133, 0.381519)">
189 |                                         <g id="Head" transform="translate(0.877670, 1.769864)">
190 |                                             <mask id="mask-29" fill="white">
191 |                                                 <use xlink:href="#path-28"></use>
192 |                                             </mask>
193 |                                             <use fill="#E6BAAA" xlink:href="#path-28"></use>
194 |                                             <path d="M9.60546343,14.5523848 C8.25204167,13.8274753 7.17499077,13.1696603 6.37431074,12.5789398 C5.17329068,11.692859 4.62072748,11.0198061 3.50957084,9.5976301 C3.50957084,9.5976301 3.50957084,9.5976301 3.50957084,9.5976301 C3.4545788,9.52724544 3.3529409,9.51476727 3.28255625,9.56975932 C3.2461453,9.59820746 3.22364126,9.64087118 3.22068771,9.68698335 L2.80787779,16.2088003 L2.80787779,16.2088003 L6.176308,16.2280836 L6.24342822,14.1489634 L9.60546343,14.5523848 Z" id="路径-18" fill="#E2A893" mask="url(#mask-29)"></path>
195 |                                         </g>
196 |                                         <path d="M1.59237394,3.66558183 C2.30083311,-0.70849999 5.50544292,0.128453904 8.8341175,0.824995998 L9.22137997,0.905001395 C11.2236969,1.31188195 13.2376137,1.5933987 14.7496214,0.591070767 C14.7626484,0.582435005 14.7771501,0.572547139 14.7931265,0.561407171 L14.7931265,0.561407171 C14.8049065,0.553150689 14.8175564,0.546214772 14.8308385,0.54069019 C14.9332287,0.498101776 15.0507572,0.546580739 15.0933456,0.648970986 L15.0933456,0.648970986 L15.1602957,0.819489251 C16.2403722,3.74632844 13.2138295,5.30470341 8.94213728,4.92673274 C8.06458089,5.41958137 7.42046587,6.3110826 6.68753007,7.47883272 C6.36555105,7.15497487 5.99373935,6.93759049 5.62762592,6.93759049 C4.65817813,6.93759049 4.56438961,8.1300344 4.10300838,9.42423417 C3.8493846,10.1356628 4.16174084,10.4868636 4.65550441,10.6588982 C4.24297106,11.2508156 3.77732877,11.8704277 3.24164181,12.5103376 C1.207427,11.2797938 -1.22911482,6.67689571 1.48680525,3.77541071 Z" id="Hair" fill="#495369"></path>
197 |                                     </g>
198 |                                     <g id="Bottom/Skinny-Jeans-1" transform="translate(0.263981, 48.514552)">
199 |                                         <polygon id="Leg" fill="#E6BAAA" points="38.4848106 0 60.4822586 36.6928556 76.9740157 67.7135722 80.5261939 67.7135722 52.8940234 1.50354334e-13"></polygon>
200 |                                         <g id="Right-Shoe" transform="translate(75.489436, 65.867426)" fill="#566282">
201 |                                             <path d="M0.400935319,1.78865723 C0.232324108,2.28910961 0.148018503,2.67600599 0.148018503,2.94934635 C0.148018503,3.32920853 0.207131215,3.87236419 0.325356641,4.57881334 C0.339590274,4.66373579 0.413206018,4.72588047 0.499312702,4.72564158 C0.499312702,4.72564158 0.499312702,4.72564158 0.499312702,4.72564158 C1.33557496,4.7233215 4.75556722,4.70618275 10.7592895,4.67422534 C10.7592895,4.67422534 10.7592895,4.67422534 10.7592895,4.67422534 C10.8705867,4.67363291 10.9702041,4.60504708 11.0104821,4.50129199 C11.3496563,3.62733314 11.1881873,2.89021437 10.5260749,2.28993567 C9.46841536,1.33104937 6.87425687,1.41232339 6.26634011,1.22165383 C5.9402401,1.11937445 5.51288188,0.835745453 4.98426547,0.370766835 C4.82352806,0.229320948 4.57856335,0.245010453 4.4371507,0.40577709 C4.40882247,0.437982367 4.38603492,0.47466535 4.36971663,0.514331224 L4.11481931,1.13392569 L4.11481931,1.13392569 C3.45829803,1.44087541 2.92480633,1.59435026 2.51434421,1.59435026 C2.23925977,1.59435026 1.87772176,1.50252051 1.42973018,1.31886101 L1.42973738,1.31884346 C1.03355472,1.15642365 0.580717939,1.34592588 0.418298124,1.74210854 C0.412014735,1.7574353 0.406224161,1.7729595 0.400935319,1.78865723 Z" id="shoe"></path>
202 |                                         </g>
203 |                                         <g id="Pant备份-2" transform="translate(34.826999, -0.000000)">
204 |                                             <mask id="mask-32" fill="white">
205 |                                                 <use xlink:href="#path-31"></use>
206 |                                             </mask>
207 |                                             <use id="蒙版" fill="url(#linearGradient-30)" xlink:href="#path-31"></use>
208 |                                             <path d="M29.9048518,53.1566964 L41.8353701,49.2850136 C39.4752644,42.2251805 36.1173358,34.4113776 31.7615845,25.843605 C27.4058331,17.2758323 23.2678959,8.66129732 19.3477728,-7.76170612e-12 L4.93548659e-11,-7.76170612e-12 C4.8907884,10.5852671 9.81165627,20.3239087 14.7626036,29.2159249 C19.713551,38.1079411 24.7609671,46.0881982 29.9048518,53.1566964 Z" fill="url(#linearGradient-33)" mask="url(#mask-32)"></path>
209 |                                             <path d="M29.9048518,53.1566964 L32.1155597,55.3182149 C29.755454,48.2583818 26.3975254,40.444579 22.0417741,31.8768063 C17.6860227,23.3090337 13.5480855,14.6944987 9.62796245,6.03320136 L4.93548659e-11,-7.76170612e-12 C4.8907884,10.5852671 9.81165627,20.3239087 14.7626036,29.2159249 C19.713551,38.1079411 24.7609671,46.0881982 29.9048518,53.1566964 Z" id="Pant备份-3" fill="url(#linearGradient-34)" mask="url(#mask-32)"></path>
210 |                                         </g>
211 |                                         <path d="M37.0391518,3.5255443e-13 C34.9630059,12.8941214 30.9586888,29.3678541 30.5807892,29.8762384 C30.3288562,30.2151613 21.2592022,33.2474546 3.37182725,38.9731183 L4.13914061,42.0984237 C25.4697933,39.0277132 36.7092281,36.6453297 37.8574451,34.9512731 C39.5797706,32.4101883 48.1795742,12.3355621 51.5104388,3.5255443e-13 L37.0391518,3.5255443e-13 Z" id="Leg" fill="#E6BAAA"></path>
212 |                                         <path d="M-1.56949264,42.9206595 C-1.73810385,43.4211119 -1.82240946,43.8080082 -1.82240946,44.0813486 C-1.82240946,44.4612108 -1.76329675,45.0043664 -1.64507132,45.7108156 C-1.63083769,45.795738 -1.55722194,45.8578827 -1.47111526,45.8576438 C-1.47111526,45.8576438 -1.47111526,45.8576438 -1.47111526,45.8576438 C-0.634853001,45.8553237 2.78513925,45.838185 8.78886151,45.8062276 C8.78886151,45.8062276 8.78886151,45.8062276 8.78886151,45.8062276 C8.90015878,45.8056352 8.99977613,45.7370493 9.04005411,45.6332942 C9.37922839,44.7593354 9.21775933,44.0222166 8.55564695,43.4219379 C7.4979874,42.4630516 4.90382891,42.5443256 4.29591215,42.3536561 C3.96981214,42.2513767 3.54245392,41.9677477 3.0138375,41.5027691 C2.8531001,41.3613232 2.60813539,41.3770127 2.46672274,41.5377793 C2.43839451,41.5699846 2.41560696,41.6066676 2.39928867,41.6463335 L2.14439135,42.2659279 L2.14439135,42.2659279 C1.48787007,42.5728777 0.954378369,42.7263525 0.543916249,42.7263525 C0.268831807,42.7263525 -0.0927062033,42.6345228 -0.54069778,42.4508633 L-0.540690586,42.4508457 C-0.936873245,42.2884259 -1.38971002,42.4779281 -1.55212984,42.8741108 C-1.55841323,42.8894375 -1.5642038,42.9049617 -1.56949264,42.9206595 Z" id="shoe备份" fill="#566282" transform="translate(3.694991, 43.494959) rotate(76.000000) translate(-3.694991, -43.494959) "></path>
213 |                                         <g id="Pant备份" transform="translate(9.271904, 0.000000)">
214 |                                             <mask id="mask-37" fill="white">
215 |                                                 <use xlink:href="#path-36"></use>
216 |                                             </mask>
217 |                                             <use id="蒙版" fill="url(#linearGradient-35)" xlink:href="#path-36"></use>
218 |                                             <path d="M8.58762881,32.3966662 L1.2263797,34.5449391 C12.3070876,35.3584076 20.1171097,33.3591335 22.6151907,31.3701009 C25.1132718,29.3810683 24.7577851,23.0021767 24.3768357,17.5939087 C24.1228693,13.9883967 23.6863791,11.3116525 23.0673648,9.56367612 C21.0424108,20.1107162 19.9103297,25.6056128 19.6711215,26.0483659 C19.4319134,26.4911189 17.271619,29.0393678 8.58762881,32.3966662 Z" fill="url(#linearGradient-38)" mask="url(#mask-37)"></path>
219 |                                         </g>
220 |                                     </g>
221 |                                     <g id="Body/Long-Sleeve-1" transform="translate(30.362450, 16.849257)">
222 |                                         <path d="M33.3548043,18.7588594 L44.9721197,20.0393534 C47.529914,19.3559678 49.8076782,19.0297348 51.8054123,19.0606544 C52.3405763,19.1779057 53.1379409,19.5812886 51.6186648,20.311861 C50.0993887,21.0424334 48.53405,21.8793942 48.6195711,22.4931439 C48.7050922,23.1068935 49.9277414,23.1918369 49.9082092,24.0981066 C49.8951877,24.7022864 47.9715991,24.3205783 44.1374435,22.9529823 L34.1233873,24.2746646 L33.3548043,18.7588594 Z" id="Skin" fill="#E6BAAA" transform="translate(42.926670, 21.567330) scale(1, -1) rotate(9.000000) translate(-42.926670, -21.567330) "></path>
223 |                                         <path d="M14.4705429,3.56966401 C22.3575407,16.1065407 21.1082874,18.7240381 29.342567,12.7426756 C30.0041165,13.3080498 30.5067102,13.6923597 30.8503482,13.8956053 C31.2614419,14.1387477 31.8909457,14.4240198 32.7388596,14.7514216 C26.6090849,37.0524469 19.0388532,19.0301528 15.6744755,16.6653224 C13.3884276,15.058453 11.9265102,7.80436974 10.4864018,4.23910481 L14.4705429,3.56966401 Z" id="Coat-Back" fill="#8192A0" transform="translate(21.612631, 14.675318) rotate(15.000000) translate(-21.612631, -14.675318) "></path>
224 |                                         <path d="M3.24829568,34.0705846 L24.7718486,34.0705846 C25.4014851,34.0705402 25.9119063,33.560119 25.9119063,32.9304825 C25.9119063,32.8110476 25.8931386,32.6923546 25.85629,32.5787462 C25.85629,32.5787462 25.85629,32.5787462 25.85629,32.5787462 C25.4307617,31.266796 25.2050016,29.9427026 24.812699,28.707844 C20.6540061,15.6174421 18.1929233,6.87405353 18.0930706,1.62103738 C18.0873789,1.32161204 17.5361836,0.793982302 17.2923228,0.863080113 C15.5089946,1.36838495 13.6006928,1.1794469 11.5674172,0.296265953 C6.17692509,8.99416232 4.31279947,19.7030338 3.24829568,34.0705846 Z" id="Shirt" fill="#FAFDFF"></path>
225 |                                         <g id="Coat-Front备份" transform="translate(0.274534, 0.296266)">
226 |                                             <mask id="mask-40" fill="white">
227 |                                                 <use xlink:href="#path-39"></use>
228 |                                             </mask>
229 |                                             <use id="蒙版" fill="#D4D9DC" fill-rule="nonzero" xlink:href="#path-39"></use>
230 |                                             <path d="M11.3038057,21.7241418 C11.0382972,26.7216616 11.5782403,30.3883734 12.9236351,32.7242772 C14.2690299,35.060181 16.6343409,37.8549061 20.0195682,41.1084523 C18.7858357,41.4770504 17.7721323,41.6377332 16.978458,41.5905004 C16.1847838,41.5432677 14.7341816,40.9901604 12.6266516,39.9311785 L10.0375574,30.6196506 L11.3038057,21.7241418 Z" id="路径-2" fill="#B8C0C5" fill-rule="nonzero" mask="url(#mask-40)" transform="translate(15.028563, 31.661345) scale(-1, 1) rotate(1.000000) translate(-15.028563, -31.661345) "></path>
231 |                                             <path d="M19.9418844,18.6598348 C18.8017134,21.4499994 18.2367647,24.7725193 18.2470383,28.6273945 L12.9484546,32.1462864 C13.8582969,29.0140531 14.7561149,26.6389365 15.6419088,25.0209367 C16.5277026,23.4029368 17.9610278,21.2825696 19.9418844,18.6598348 Z" id="Shade备份-3" fill="url(#linearGradient-41)" mask="url(#mask-40)" transform="translate(16.445169, 25.403061) rotate(-58.000000) translate(-16.445169, -25.403061) "></path>
232 |                                         </g>
233 |                                         <path d="M12.9931827,0.308579363 C24.4319887,0.962442568 25.6586112,20.8619653 40.5841421,19.6605114 C40.8871061,19.6361239 41.3358174,19.5942663 41.7429681,19.9628058 C42.0053541,20.2003089 42.2638512,23.2320039 42.1858998,23.7024987 C42.1339323,24.0161619 42.0131727,24.2146899 41.8236211,24.2980828 C21.8262032,34.4478641 14.3839856,20.3497573 9.10164341,15.5971621 C7.96687815,14.5761984 4.67772466,7.12167166 12.9931827,0.308579363 Z" id="Clothes-Back" fill="url(#linearGradient-42)" fill-rule="nonzero"></path>
234 |                                     </g>
235 |                                 </g>
236 |                             </g>
237 |                         </g>
238 |                     </g>
239 |                 </g>
240 |             </g>
241 |         </g>
242 |     </g>
243 | </svg>


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