admin2 1.0.0

package/src/pages/overview/components/NewUserGuide/index.jsx

@@ -0,0 +1,114 @@
+import { useState, useCallback } from 'react';
+
+import {useLanguage} from '@/hooks';
+
+import styles from './index.less';
+import apply from './img/apply.png';
+import user from './img/user.png';
+import phone from './img/phone.png';
+import open from './img/open.png';
+
+import {Storage} from '@/utils/utils';
+import { useMenuContext } from '@/layouts/MenuContext';
+
+const NewUserGuide = props => {
+
+    const { isNewUser } = props;
+    const {t} = useLanguage();
+    const { toggleMenuOpenKey } = useMenuContext();
+
+    const environment =  Storage.get('sm_saas_info')?.environment;
+
+    //  展开天净菜单
+    const handleSkyfilterClick = () => {
+        toggleMenuOpenKey(['/new/overview', '/new', '/new/tianjing']);
+    };
+
+    const getDom = useCallback(() => {
+        if (environment === 'web-na') {
+            return (
+                <div className={styles['apply-na-content']}>
+                    {t('We have activated the image moderation product for you. You can find them under the ')}
+                    <span
+                        className={styles['apply-na-content-contact']}
+                        onClick={handleSkyfilterClick}
+                    >
+                        {t('Skyfilter - Content Moderation ')}
+                    </span>
+                    {t('menu in the left navigation bar.You are on a free trial.')}
+                    <a
+                        className={styles['apply-na-content-contact']}
+                        href="https://wa.me/8618302808016"
+                        target="_blank"
+                        rel="noreferrer"
+                    >
+                        {t('Contact us ')}
+                    </a>
+                    {t('to activate the full service!')}
+                </div>
+            );
+        }
+        return (
+            <>
+                <div className={styles.content}>
+                    {t('您还未正式开通试用服务，可')}
+                    <span className={styles['content-contact']}>
+                        {t('申请试用')}
+                    </span>
+                    {t('开通，开通后可查看风险数据大盘。')}
+                </div>
+                <div className={styles['apply-step']}>
+                    <span className={styles['step-item']}>
+                        <img src={apply} className={styles['step-img']} />
+                        <span className={styles['step-content']}>1.{t('试用申请提交')}</span>
+                    </span>
+                    <div className={styles['step-line']}></div>
+                    <span className={styles['step-item']}>
+                        <img src={user} className={styles['step-img']} />
+                        <span className={styles['step-content']}>2.{t('销售顾问对接')}</span>
+                    </span>
+                    <div className={styles['step-line']}></div>
+                    <span className={styles['step-item']}>
+                        <img src={open} className={styles['step-img']} />
+                        <span className={styles['step-content']}>3.{t('试用服务开通')}</span>
+                    </span>
+                </div>
+            </>
+        );
+    }, []);
+
+    // if (isNewUser) {
+    //     let _hmt = _hmt || [];
+    //     (function () {
+    //         var hm = document.createElement("script");
+    //         hm.src = "https://hm.baidu.com/hm.js?cabe4c29404569e674c049d17a42cd56";
+    //         var s = document.getElementsByTagName("script")[0];
+    //         s.parentNode.insertBefore(hm, s);
+    //     })();
+    // }
+
+    const [visible, setVisible] = useState(true);
+
+    const closeGuideBox = () => {
+        setVisible(false);
+    };
+
+
+    return (
+        isNewUser && visible
+            ? (
+                <div className={styles['guide-box']}>
+                    <span className={styles['guide-close']} onClick={closeGuideBox}>×</span>
+                    <div className={styles['guide-content']}>
+                        <div className={styles.title}>
+                            <span className={styles['title-hi']}>Hi~ </span>{t('欢迎进入数美风控平台')}
+                        </div>
+                        {getDom()}
+                    </div>
+                </div>
+            )
+            : null
+    );
+};
+
+export default NewUserGuide;

package/src/pages/overview/components/NewUserGuide/index.less

@@ -0,0 +1,158 @@
+.guide-box {
+    background-image: url('./img/guideCopy.png');
+    background-size: 100% auto;
+    background-repeat: no-repeat; 
+    height: 0;
+    padding-bottom: 22%;
+    margin-bottom: 16px;
+    .guide-close {
+        position: absolute;
+        top: 6px;
+        right: 28px;
+        font-size: 22px;
+        color: #ffffff;
+        cursor: pointer;
+    }
+    .guide-content{
+        margin-left: 24px;
+        margin-top: 24px;
+        position: absolute;
+        width: 475px;
+        .title{
+            color: #ffffff;
+            font-size: 14px;
+            font-weight: 600;
+            line-height: 20px;
+            .title-hi{
+                font-size: 24px;
+            }
+        }
+        .content{
+            color: #ffffff;
+            font-size: 12px;
+            margin-top: 10px;
+            .content-contact{
+                cursor: pointer;
+                color: #13cbb9;
+            }
+        }
+        .apply-step{
+            margin-top: 10px;
+            .step-item{
+                display: inline-block;
+                text-align: center;
+                width: 100px;;
+                .step-img{
+                    width: 32px;
+                    height: 32px;
+                }
+                .step-content{
+                    display: table;
+                    font-size: 12px;
+                    color: #ffffff;
+                }
+            }
+            .step-line{
+                display: inline-block;
+                width: 60px;
+                height: 0;
+                vertical-align: middle;
+                border-top: 1px solid #ffffff;
+                border-style: dashed;
+            }
+        }
+    }
+
+    .apply-na-content {
+        width: 462px;
+        color: #ffffff;
+        margin-top: 20px;
+        font-family: Helvetica;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 20px;
+        letter-spacing: 0px;
+        &-contact {
+            color: #13cbb9;
+            font-weight: 700;
+            cursor: pointer;
+        }
+    }
+}
+@media only screen and (min-width: 1360px) {
+    .apply-step{
+        margin-top: 14px !important;
+    }
+}
+:global {
+    #newBridge {
+        .nb-icon-inner-wrap {
+            opacity: 0;
+        }
+        .nb-icon-wrap {
+            display: none !important;
+        }
+        .nb-nodeboard-base {
+            right      : 0 !important;
+            bottom     : 0 !important;
+            margin-left: 0 !important;
+            margin-top : 0 !important;
+            .nb-nodeboard-contain-base {
+                .nb-nodeboard-top {
+                    background-color: #14E1CD !important;
+                }
+                .nb-nodeboard-send-btn {
+                    background-color: #14E1CD !important;
+                    margin          : 0 auto;
+                }
+                .nb-board-form {
+                    .nb-nodeboard-input,
+                    .nb-nodeboard-set-content {
+                        outline: none;
+                    }
+                }
+                .nb-nodeboard-success {
+                    .nb-success-box {
+                        top        : 45% !important;
+                        width      : 150px !important;
+                        margin-left: -75px !important;
+                        .nb-sucess-close {
+                            background-color: #14E1CD !important;
+                        }
+                        .nb-success-title {
+                            font-size  : 26px !important;
+                            color      : #2F2F2F !important;
+                            line-height: 1.6em;
+                            margin-top : 15px !important;
+                        }
+                        .nb-success-content {
+                            font-size  : 16px !important;
+                            color      : #535353 !important;
+                            line-height: 1.4em;
+                        }
+                        .nb-sucess-close {
+                            height     : 40px !important;
+                            width      : 110px !important;
+                            line-height: 40px !important;
+                            font-size  : 20px !important;
+                        }
+                        .nb-success-icon {
+                            width           : 83px !important;
+                            height          : 32px !important;
+                            //background: url('../../img/index/icon-bridge-send.png') no-repeat !important;
+                            background-size : 100% 100% !important;
+                            background-color: #ededed !important;
+                        }
+                    }
+                }
+            }
+        }
+        .nb-nodeboard-base,
+        .nb-nodeboard-position-base,
+        .nb-nodeboard-left-bottom,
+        .nb-show {
+            left: inherit !important;
+            top : inherit !important;
+        }
+    }
+}

package/src/pages/overview/components/UserInfoBox/img/app-manage-dark.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>应用管理灰色</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="SaaS概览页1440" transform="translate(-1128.000000, -336.000000)">
+            <g id="应用管理灰色" transform="translate(1128.000000, 336.000000)">
+                <g id="应用管理灰" fill="#F7FBFF">
+                    <circle id="椭圆形" cx="20" cy="20" r="20"></circle>
+                </g>
+                <path d="M32.3652532,17.2623733 L29.5187732,16.3128533 C29.462019,16.1658328 29.4012136,16.0204085 29.3364265,15.8767467 L30.6795865,13.19268 C30.858341,12.8351399 30.7881633,12.4033205 30.5053865,12.1207867 L27.8793865,9.49461338 C27.5970445,9.2114412 27.1649201,9.14128387 26.8074932,9.32058671 L24.1225599,10.6625334 C23.9788935,10.5986233 23.8337139,10.5381703 23.6871466,10.4812267 L22.7376266,7.63474673 C22.6114503,7.25560774 22.2566766,6.99986339 21.8570933,7.00000005 L18.1429067,7.00000005 C17.7433234,6.99986339 17.3885497,7.25560774 17.2623733,7.63474673 L16.3128533,10.4812267 C16.1663867,10.53808 16.0213067,10.5985734 15.8777867,10.6625334 L13.19268,9.32041339 C12.8352773,9.14076066 12.4029058,9.21102803 12.1207867,9.49461338 L9.49478674,12.1206134 C9.21193013,12.4031772 9.1417478,12.8350953 9.32058674,13.19268 L10.6625334,15.8776133 C10.5984001,16.0211333 10.5380801,16.1663867 10.4812267,16.3128533 L7.63474677,17.2623733 C7.25560779,17.3885497 6.99986344,17.7433234 7.00000011,18.1429067 L7.00000011,21.8570933 C6.99980956,22.256694 7.25557427,22.611496 7.63474677,22.7376267 L10.4812267,23.6871467 C10.5380801,23.8341333 10.5990934,23.97956 10.6635734,24.1232533 L9.32058674,26.8074933 C9.14187268,27.1649527 9.21197502,27.5966686 9.49461342,27.8792133 L12.1206134,30.5052133 C12.4027845,30.7886972 12.8350867,30.8589533 13.1925067,30.6794133 L15.8776133,29.3374666 C16.0213067,29.4014266 16.1663867,29.4617466 16.3128533,29.5187733 L17.2623733,32.3652533 C17.3885497,32.7443923 17.7433234,33.0001366 18.1429067,32.9999999 L21.8570933,32.9999999 C22.2568047,32.9999183 22.6117155,32.7443267 22.7384933,32.3652533 L23.6861066,29.51964 C23.8328127,29.4620261 23.9782725,29.4012878 24.1223866,29.3374666 L26.8073199,30.6794133 C27.1647726,30.8585478 27.5967935,30.7884072 27.8792132,30.5053866 L30.5052132,27.8793866 C30.7880698,27.5968228 30.8582521,27.1649047 30.6794132,26.80732 L29.3374665,24.1223867 C29.4012532,23.9786933 29.4617465,23.8336133 29.5187732,23.6871467 L32.3652532,22.7376267 C32.7444257,22.611496 33.0001904,22.256694 32.9999998,21.8570933 L32.9999998,18.1429067 C33.0002443,17.7432886 32.7444592,17.3884584 32.3652532,17.2623733 Z M31.1429065,21.1878533 L28.5058132,22.06752 C28.2289949,22.1596278 28.0116884,22.3766775 27.9192532,22.6533867 C27.7957969,23.0193446 27.6469462,23.3762386 27.4737865,23.7214667 C27.3439533,23.9825937 27.3443384,24.2895462 27.4748266,24.5503466 L28.7190132,27.0394133 L27.0395866,28.7190133 L24.5505199,27.4748266 C24.289673,27.3444745 23.9827589,27.3441536 23.7216399,27.47396 C23.376271,27.6468443 23.0193306,27.7955743 22.6533866,27.91908 C22.3761972,28.011447 22.1585626,28.2287605 22.0657866,28.5058133 L21.1880266,31.1429066 L18.8121466,31.1429066 L17.93248,28.5058133 C17.8404183,28.2289288 17.6233614,28.0115508 17.3466133,27.91908 C16.9806667,27.7957303 16.6237733,27.6469958 16.2785333,27.47396 C16.0174335,27.3440722 15.7104811,27.3443931 15.4496534,27.4748266 L12.9605867,28.7190133 L11.2809867,27.0394133 L12.52604,24.5503466 C12.656587,24.288864 12.656587,23.9812159 12.52604,23.7197333 C12.3531406,23.3750263 12.2044089,23.0187189 12.0809201,22.6533867 C11.988473,22.3766238 11.7710859,22.1595578 11.4941867,22.06752 L8.85709341,21.1880267 L8.85709341,18.8121467 L11.4941867,17.93248 C11.7710565,17.8403945 11.9884254,17.6233467 12.0809201,17.3466133 C12.2040091,16.9818212 12.3524556,16.6260825 12.5251734,16.282 C12.6564457,16.0204558 12.6567668,15.7123373 12.52604,15.45052 L11.2813334,12.9604134 L12.96076,11.2809867 L15.4508667,12.52604 C15.712574,12.6572335 16.0209134,12.6569121 16.2823467,12.5251734 C16.6264127,12.3523707 16.9821533,12.2038655 17.34696,12.0807467 C17.6237229,11.9882997 17.8407889,11.7709126 17.9328266,11.4940134 L18.81232,8.85709337 L21.1881999,8.85709337 L22.0676933,11.4941867 C22.1597549,11.7710712 22.3768118,11.9884492 22.6535599,12.08092 C23.0195673,12.2042574 23.3765192,12.3529922 23.7218133,12.52604 C23.9830859,12.6549274 24.2895175,12.6546069 24.5505199,12.5251734 L27.0397599,11.2809867 L28.7191865,12.9605867 L27.4741332,15.4496534 C27.3435862,15.711136 27.3435862,16.0187841 27.4741332,16.2802667 C27.6471083,16.625021 27.7958984,16.9813873 27.9194265,17.3467867 C28.0118735,17.6235496 28.2292607,17.8406156 28.5061599,17.9326533 L31.1430798,18.8121467 L31.1430798,21.1878533 L31.1429065,21.1878533 Z M20,15.3570934 C17.4364,15.3570934 15.3570934,17.4364 15.3570934,20 C15.3570934,22.5644667 17.4364,24.6429066 20,24.6429066 C22.5644666,24.6429066 24.6429066,22.5644667 24.6429066,20 C24.6429066,17.4364 22.5644666,15.3570934 20,15.3570934 Z M20,22.78564 C18.46392,22.78564 17.21436,21.53608 17.21436,20.0001733 C17.21436,18.46392 18.46392,17.2141867 20,17.2141867 C21.5362533,17.2141867 22.7856399,18.46392 22.7856399,20 C22.7856399,21.5362533 21.5362533,22.78564 20.0001733,22.78564 L20,22.78564 Z" id="形状" fill="#929EAB" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/pages/overview/components/UserInfoBox/img/app-manage-light.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>应用管理蓝色</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="SaaS概览页1440" transform="translate(-1128.000000, -384.000000)">
+            <g id="应用管理蓝色" transform="translate(1128.000000, 384.000000)">
+                <g id="应用管理蓝" fill="#F7FBFF">
+                    <circle id="椭圆形" cx="20" cy="20" r="20"></circle>
+                </g>
+                <path d="M32.3652532,17.2623733 L29.5187732,16.3128533 C29.462019,16.1658328 29.4012136,16.0204085 29.3364265,15.8767467 L30.6795865,13.19268 C30.858341,12.8351399 30.7881633,12.4033205 30.5053865,12.1207867 L27.8793865,9.49461338 C27.5970445,9.2114412 27.1649201,9.14128387 26.8074932,9.32058671 L24.1225599,10.6625334 C23.9788935,10.5986233 23.8337139,10.5381703 23.6871466,10.4812267 L22.7376266,7.63474673 C22.6114503,7.25560774 22.2566766,6.99986339 21.8570933,7.00000005 L18.1429067,7.00000005 C17.7433234,6.99986339 17.3885497,7.25560774 17.2623733,7.63474673 L16.3128533,10.4812267 C16.1663867,10.53808 16.0213067,10.5985734 15.8777867,10.6625334 L13.19268,9.32041339 C12.8352773,9.14076066 12.4029058,9.21102803 12.1207867,9.49461338 L9.49478674,12.1206134 C9.21193013,12.4031772 9.1417478,12.8350953 9.32058674,13.19268 L10.6625334,15.8776133 C10.5984001,16.0211333 10.5380801,16.1663867 10.4812267,16.3128533 L7.63474677,17.2623733 C7.25560779,17.3885497 6.99986344,17.7433234 7.00000011,18.1429067 L7.00000011,21.8570933 C6.99980956,22.256694 7.25557427,22.611496 7.63474677,22.7376267 L10.4812267,23.6871467 C10.5380801,23.8341333 10.5990934,23.97956 10.6635734,24.1232533 L9.32058674,26.8074933 C9.14187268,27.1649527 9.21197502,27.5966686 9.49461342,27.8792133 L12.1206134,30.5052133 C12.4027845,30.7886972 12.8350867,30.8589533 13.1925067,30.6794133 L15.8776133,29.3374666 C16.0213067,29.4014266 16.1663867,29.4617466 16.3128533,29.5187733 L17.2623733,32.3652533 C17.3885497,32.7443923 17.7433234,33.0001366 18.1429067,32.9999999 L21.8570933,32.9999999 C22.2568047,32.9999183 22.6117155,32.7443267 22.7384933,32.3652533 L23.6861066,29.51964 C23.8328127,29.4620261 23.9782725,29.4012878 24.1223866,29.3374666 L26.8073199,30.6794133 C27.1647726,30.8585478 27.5967935,30.7884072 27.8792132,30.5053866 L30.5052132,27.8793866 C30.7880698,27.5968228 30.8582521,27.1649047 30.6794132,26.80732 L29.3374665,24.1223867 C29.4012532,23.9786933 29.4617465,23.8336133 29.5187732,23.6871467 L32.3652532,22.7376267 C32.7444257,22.611496 33.0001904,22.256694 32.9999998,21.8570933 L32.9999998,18.1429067 C33.0002443,17.7432886 32.7444592,17.3884584 32.3652532,17.2623733 Z M31.1429065,21.1878533 L28.5058132,22.06752 C28.2289949,22.1596278 28.0116884,22.3766775 27.9192532,22.6533867 C27.7957969,23.0193446 27.6469462,23.3762386 27.4737865,23.7214667 C27.3439533,23.9825937 27.3443384,24.2895462 27.4748266,24.5503466 L28.7190132,27.0394133 L27.0395866,28.7190133 L24.5505199,27.4748266 C24.289673,27.3444745 23.9827589,27.3441536 23.7216399,27.47396 C23.376271,27.6468443 23.0193306,27.7955743 22.6533866,27.91908 C22.3761972,28.011447 22.1585626,28.2287605 22.0657866,28.5058133 L21.1880266,31.1429066 L18.8121466,31.1429066 L17.93248,28.5058133 C17.8404183,28.2289288 17.6233614,28.0115508 17.3466133,27.91908 C16.9806667,27.7957303 16.6237733,27.6469958 16.2785333,27.47396 C16.0174335,27.3440722 15.7104811,27.3443931 15.4496534,27.4748266 L12.9605867,28.7190133 L11.2809867,27.0394133 L12.52604,24.5503466 C12.656587,24.288864 12.656587,23.9812159 12.52604,23.7197333 C12.3531406,23.3750263 12.2044089,23.0187189 12.0809201,22.6533867 C11.988473,22.3766238 11.7710859,22.1595578 11.4941867,22.06752 L8.85709341,21.1880267 L8.85709341,18.8121467 L11.4941867,17.93248 C11.7710565,17.8403945 11.9884254,17.6233467 12.0809201,17.3466133 C12.2040091,16.9818212 12.3524556,16.6260825 12.5251734,16.282 C12.6564457,16.0204558 12.6567668,15.7123373 12.52604,15.45052 L11.2813334,12.9604134 L12.96076,11.2809867 L15.4508667,12.52604 C15.712574,12.6572335 16.0209134,12.6569121 16.2823467,12.5251734 C16.6264127,12.3523707 16.9821533,12.2038655 17.34696,12.0807467 C17.6237229,11.9882997 17.8407889,11.7709126 17.9328266,11.4940134 L18.81232,8.85709337 L21.1881999,8.85709337 L22.0676933,11.4941867 C22.1597549,11.7710712 22.3768118,11.9884492 22.6535599,12.08092 C23.0195673,12.2042574 23.3765192,12.3529922 23.7218133,12.52604 C23.9830859,12.6549274 24.2895175,12.6546069 24.5505199,12.5251734 L27.0397599,11.2809867 L28.7191865,12.9605867 L27.4741332,15.4496534 C27.3435862,15.711136 27.3435862,16.0187841 27.4741332,16.2802667 C27.6471083,16.625021 27.7958984,16.9813873 27.9194265,17.3467867 C28.0118735,17.6235496 28.2292607,17.8406156 28.5061599,17.9326533 L31.1430798,18.8121467 L31.1430798,21.1878533 L31.1429065,21.1878533 Z M20,15.3570934 C17.4364,15.3570934 15.3570934,17.4364 15.3570934,20 C15.3570934,22.5644667 17.4364,24.6429066 20,24.6429066 C22.5644666,24.6429066 24.6429066,22.5644667 24.6429066,20 C24.6429066,17.4364 22.5644666,15.3570934 20,15.3570934 Z M20,22.78564 C18.46392,22.78564 17.21436,21.53608 17.21436,20.0001733 C17.21436,18.46392 18.46392,17.2141867 20,17.2141867 C21.5362533,17.2141867 22.7856399,18.46392 22.7856399,20 C22.7856399,21.5362533 21.5362533,22.78564 20.0001733,22.78564 L20,22.78564 Z" id="形状" fill="#21BFBB" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/pages/overview/components/UserInfoBox/img/channel-manage-dark.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>渠道管理灰</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="SaaS概览页1440" transform="translate(-1203.000000, -384.000000)">
+            <g id="渠道管理灰" transform="translate(1203.000000, 384.000000)">
+                <circle id="椭圆形" fill="#F7FBFF" cx="20" cy="20" r="20"></circle>
+                <g id="分组-9" transform="translate(7.000000, 9.000000)" fill="#929EAB">
+                    <path d="M2,2 L2,16.8429752 L23.4545455,16.8429752 L23.4545455,2 L2,2 Z M1,-2.46519033e-32 L24.4545455,-2.22044605e-16 C25.0068302,-3.23497668e-16 25.4545455,0.44771525 25.4545455,1 L25.4545455,17.8429752 C25.4545455,18.39526 25.0068302,18.8429752 24.4545455,18.8429752 L1,18.8429752 C0.44771525,18.8429752 6.76353751e-17,18.39526 0,17.8429752 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,-2.46519033e-32 Z" id="矩形" fill-rule="nonzero"></path>
+                    <path d="M9.8989899,12.4008264 C8.31534432,12.4008264 7.04208754,11.0614265 7.04208754,9.4214876 C7.04208754,7.78154875 8.31534432,6.44214876 9.8989899,6.44214876 C11.4826355,6.44214876 12.7558923,7.78154875 12.7558923,9.4214876 C12.7558923,11.0614265 11.4826355,12.4008264 9.8989899,12.4008264 Z M9.8989899,11.4008264 C10.9187068,11.4008264 11.7558923,10.5201508 11.7558923,9.4214876 C11.7558923,8.32282439 10.9187068,7.44214876 9.8989899,7.44214876 C8.87927302,7.44214876 8.04208754,8.32282439 8.04208754,9.4214876 C8.04208754,10.5201508 8.87927302,11.4008264 9.8989899,11.4008264 Z" id="椭圆形" fill-rule="nonzero"></path>
+                    <path d="M16.8181818,8.13636364 C15.5378854,8.13636364 14.5,7.09847828 14.5,5.81818182 C14.5,4.53788535 15.5378854,3.5 16.8181818,3.5 C18.0984783,3.5 19.1363636,4.53788535 19.1363636,5.81818182 C19.1363636,7.09847828 18.0984783,8.13636364 16.8181818,8.13636364 Z M16.8181818,7.13636364 C17.5461935,7.13636364 18.1363636,6.54619353 18.1363636,5.81818182 C18.1363636,5.0901701 17.5461935,4.5 16.8181818,4.5 C16.0901701,4.5 15.5,5.0901701 15.5,5.81818182 C15.5,6.54619353 16.0901701,7.13636364 16.8181818,7.13636364 Z" id="椭圆形" fill-rule="nonzero"></path>
+                    <path d="M16.8181818,14.1363636 C15.5378854,14.1363636 14.5,13.0984783 14.5,11.8181818 C14.5,10.5378854 15.5378854,9.5 16.8181818,9.5 C18.0984783,9.5 19.1363636,10.5378854 19.1363636,11.8181818 C19.1363636,13.0984783 18.0984783,14.1363636 16.8181818,14.1363636 Z M16.8181818,13.1363636 C17.5461935,13.1363636 18.1363636,12.5461935 18.1363636,11.8181818 C18.1363636,11.0901701 17.5461935,10.5 16.8181818,10.5 C16.0901701,10.5 15.5,11.0901701 15.5,11.8181818 C15.5,12.5461935 16.0901701,13.1363636 16.8181818,13.1363636 Z" id="椭圆形" fill-rule="nonzero"></path>
+                    <ellipse id="椭圆形" cx="21.6835017" cy="14.8760331" rx="1" ry="1"></ellipse>
+                    <polygon id="路径-4" fill-rule="nonzero" points="12.2272727 17.8512397 13.2272727 17.8512397 13.2272727 20.8793397 12.2272727 20.8793397"></polygon>
+                    <polygon id="路径-4" fill-rule="nonzero" transform="translate(12.727273, 21.322314) rotate(-270.000000) translate(-12.727273, -21.322314) " points="12.2272727 15.1943679 13.2272727 15.1943679 13.2272727 27.4502602 12.2272727 27.4502602"></polygon>
+                    <polygon id="路径-6" fill-rule="nonzero" points="14.5139441 5.83113785 15.1012967 6.64046896 12.0781881 8.83441762 11.4908355 8.02508651"></polygon>
+                    <polygon id="路径-7" fill-rule="nonzero" points="11.5637529 10.8618494 12.0052706 9.96459686 15.0283792 11.4522002 14.5868616 12.3494527"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/pages/overview/components/UserInfoBox/img/channel-manage-light.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>渠道管理蓝色</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="SaaS概览页1440" transform="translate(-1203.000000, -336.000000)">
+            <g id="渠道管理蓝色" transform="translate(1203.000000, 336.000000)">
+                <g id="渠道管理蓝" fill="#F7FBFF">
+                    <circle id="椭圆形" cx="20" cy="20" r="20"></circle>
+                </g>
+                <g id="分组-9" transform="translate(7.272727, 9.000000)" fill="#21BFBB">
+                    <path d="M2,2 L2,16.8429752 L23.4545455,16.8429752 L23.4545455,2 L2,2 Z M1,-2.46519033e-32 L24.4545455,-2.22044605e-16 C25.0068302,-3.23497668e-16 25.4545455,0.44771525 25.4545455,1 L25.4545455,17.8429752 C25.4545455,18.39526 25.0068302,18.8429752 24.4545455,18.8429752 L1,18.8429752 C0.44771525,18.8429752 6.76353751e-17,18.39526 0,17.8429752 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,-2.46519033e-32 Z" id="矩形" fill-rule="nonzero"></path>
+                    <path d="M9.8989899,12.4008264 C8.31534432,12.4008264 7.04208754,11.0614265 7.04208754,9.4214876 C7.04208754,7.78154875 8.31534432,6.44214876 9.8989899,6.44214876 C11.4826355,6.44214876 12.7558923,7.78154875 12.7558923,9.4214876 C12.7558923,11.0614265 11.4826355,12.4008264 9.8989899,12.4008264 Z M9.8989899,11.4008264 C10.9187068,11.4008264 11.7558923,10.5201508 11.7558923,9.4214876 C11.7558923,8.32282439 10.9187068,7.44214876 9.8989899,7.44214876 C8.87927302,7.44214876 8.04208754,8.32282439 8.04208754,9.4214876 C8.04208754,10.5201508 8.87927302,11.4008264 9.8989899,11.4008264 Z" id="椭圆形" fill-rule="nonzero"></path>
+                    <path d="M16.8181818,8.13636364 C15.5378854,8.13636364 14.5,7.09847828 14.5,5.81818182 C14.5,4.53788535 15.5378854,3.5 16.8181818,3.5 C18.0984783,3.5 19.1363636,4.53788535 19.1363636,5.81818182 C19.1363636,7.09847828 18.0984783,8.13636364 16.8181818,8.13636364 Z M16.8181818,7.13636364 C17.5461935,7.13636364 18.1363636,6.54619353 18.1363636,5.81818182 C18.1363636,5.0901701 17.5461935,4.5 16.8181818,4.5 C16.0901701,4.5 15.5,5.0901701 15.5,5.81818182 C15.5,6.54619353 16.0901701,7.13636364 16.8181818,7.13636364 Z" id="椭圆形" fill-rule="nonzero"></path>
+                    <path d="M16.8181818,14.1363636 C15.5378854,14.1363636 14.5,13.0984783 14.5,11.8181818 C14.5,10.5378854 15.5378854,9.5 16.8181818,9.5 C18.0984783,9.5 19.1363636,10.5378854 19.1363636,11.8181818 C19.1363636,13.0984783 18.0984783,14.1363636 16.8181818,14.1363636 Z M16.8181818,13.1363636 C17.5461935,13.1363636 18.1363636,12.5461935 18.1363636,11.8181818 C18.1363636,11.0901701 17.5461935,10.5 16.8181818,10.5 C16.0901701,10.5 15.5,11.0901701 15.5,11.8181818 C15.5,12.5461935 16.0901701,13.1363636 16.8181818,13.1363636 Z" id="椭圆形" fill-rule="nonzero"></path>
+                    <ellipse id="椭圆形" cx="21.6835017" cy="14.8760331" rx="1" ry="1"></ellipse>
+                    <polygon id="路径-4" fill-rule="nonzero" points="12.2272727 17.8512397 13.2272727 17.8512397 13.2272727 20.8793397 12.2272727 20.8793397"></polygon>
+                    <polygon id="路径-4" fill-rule="nonzero" transform="translate(12.727273, 21.322314) rotate(-270.000000) translate(-12.727273, -21.322314) " points="12.2272727 15.1943679 13.2272727 15.1943679 13.2272727 27.4502602 12.2272727 27.4502602"></polygon>
+                    <polygon id="路径-6" fill-rule="nonzero" points="14.5139441 5.83113785 15.1012967 6.64046896 12.0781881 8.83441762 11.4908355 8.02508651"></polygon>
+                    <polygon id="路径-7" fill-rule="nonzero" points="11.5637529 10.8618494 12.0052706 9.96459686 15.0283792 11.4522002 14.5868616 12.3494527"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/pages/overview/components/UserInfoBox/img/user-account-dark.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>账户资料灰</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="SaaS概览页1440" transform="translate(-1352.000000, -384.000000)">
+            <g id="账户资料灰" transform="translate(1352.000000, 384.000000)">
+                <circle id="椭圆形" fill="#F7FBFF" cx="20" cy="20" r="20"></circle>
+                <g id="分组-2" transform="translate(7.272727, 8.181818)" fill="#929EAB" fill-rule="nonzero">
+                    <path d="M9.27272727,2 L9.27272727,21.6363636 L16.1818182,21.6363636 L16.1818182,2 L9.27272727,2 Z M8.27272727,-2.46519033e-32 L17.1818182,-2.22044605e-16 C17.7341029,-3.23497668e-16 18.1818182,0.44771525 18.1818182,1 L18.1818182,22.6363636 C18.1818182,23.1886484 17.7341029,23.6363636 17.1818182,23.6363636 L8.27272727,23.6363636 C7.72044252,23.6363636 7.27272727,23.1886484 7.27272727,22.6363636 L7.27272727,1 C7.27272727,0.44771525 7.72044252,1.01453063e-16 8.27272727,-2.46519033e-32 Z" id="矩形"></path>
+                    <path d="M12.7272727,19.5909091 C11.4469763,19.5909091 10.4090909,18.5530237 10.4090909,17.2727273 C10.4090909,15.9924308 11.4469763,14.9545455 12.7272727,14.9545455 C14.0075692,14.9545455 15.0454545,15.9924308 15.0454545,17.2727273 C15.0454545,18.5530237 14.0075692,19.5909091 12.7272727,19.5909091 Z M12.7272727,18.5909091 C13.4552844,18.5909091 14.0454545,18.000739 14.0454545,17.2727273 C14.0454545,16.5447156 13.4552844,15.9545455 12.7272727,15.9545455 C11.999261,15.9545455 11.4090909,16.5447156 11.4090909,17.2727273 C11.4090909,18.000739 11.999261,18.5909091 12.7272727,18.5909091 Z" id="椭圆形"></path>
+                    <path d="M2,4.72727273 L2,20.7272727 L7.09090909,20.7272727 L7.09090909,4.72727273 L2,4.72727273 Z M1,2.72727273 L8.09090909,2.72727273 C8.64319384,2.72727273 9.09090909,3.17498798 9.09090909,3.72727273 L9.09090909,21.7272727 C9.09090909,22.2795575 8.64319384,22.7272727 8.09090909,22.7272727 L1,22.7272727 C0.44771525,22.7272727 6.76353751e-17,22.2795575 0,21.7272727 L0,3.72727273 C-6.76353751e-17,3.17498798 0.44771525,2.72727273 1,2.72727273 Z" id="矩形"></path>
+                    <path d="M18.3636364,4.72727273 L18.3636364,20.7272727 L23.4545455,20.7272727 L23.4545455,4.72727273 L18.3636364,4.72727273 Z M17.3636364,2.72727273 L24.4545455,2.72727273 C25.0068302,2.72727273 25.4545455,3.17498798 25.4545455,3.72727273 L25.4545455,21.7272727 C25.4545455,22.2795575 25.0068302,22.7272727 24.4545455,22.7272727 L17.3636364,22.7272727 C16.8113516,22.7272727 16.3636364,22.2795575 16.3636364,21.7272727 L16.3636364,3.72727273 C16.3636364,3.17498798 16.8113516,2.72727273 17.3636364,2.72727273 Z" id="矩形"></path>
+                    <polygon id="路径-154" points="10.9368587 5.47320227 10.9368587 4.47320227 14.5304386 4.47320227 14.5304386 5.47320227"></polygon>
+                    <polygon id="路径-154" points="10.9368587 8.20047499 10.9368587 7.20047499 14.5304386 7.20047499 14.5304386 8.20047499"></polygon>
+                    <polygon id="路径-154" points="10.9368587 10.9545455 10.9368587 9.95454545 14.5304386 9.95454545 14.5304386 10.9545455"></polygon>
+                    <path d="M4.54545455,18.6818182 C3.26515808,18.6818182 2.22727273,17.6439328 2.22727273,16.3636364 C2.22727273,15.0833399 3.26515808,14.0454545 4.54545455,14.0454545 C5.82575101,14.0454545 6.86363636,15.0833399 6.86363636,16.3636364 C6.86363636,17.6439328 5.82575101,18.6818182 4.54545455,18.6818182 Z M4.54545455,17.6818182 C5.27346626,17.6818182 5.86363636,17.0916481 5.86363636,16.3636364 C5.86363636,15.6356246 5.27346626,15.0454545 4.54545455,15.0454545 C3.81744283,15.0454545 3.22727273,15.6356246 3.22727273,16.3636364 C3.22727273,17.0916481 3.81744283,17.6818182 4.54545455,17.6818182 Z" id="椭圆形"></path>
+                    <polygon id="路径-154" points="2.75504049 7.31818182 2.75504049 6.31818182 6.34862046 6.31818182 6.34862046 7.31818182"></polygon>
+                    <polygon id="路径-154" points="2.75504049 9.60430796 2.75504049 8.60430796 6.34862046 8.60430796 6.34862046 9.60430796"></polygon>
+                    <polygon id="路径-154" points="2.75504049 11.8904341 2.75504049 10.8904341 6.34862046 10.8904341 6.34862046 11.8904341"></polygon>
+                    <path d="M20.9090909,18.6818182 C19.6287944,18.6818182 18.5909091,17.6439328 18.5909091,16.3636364 C18.5909091,15.0833399 19.6287944,14.0454545 20.9090909,14.0454545 C22.1893874,14.0454545 23.2272727,15.0833399 23.2272727,16.3636364 C23.2272727,17.6439328 22.1893874,18.6818182 20.9090909,18.6818182 Z M20.9090909,17.6818182 C21.6371026,17.6818182 22.2272727,17.0916481 22.2272727,16.3636364 C22.2272727,15.6356246 21.6371026,15.0454545 20.9090909,15.0454545 C20.1810792,15.0454545 19.5909091,15.6356246 19.5909091,16.3636364 C19.5909091,17.0916481 20.1810792,17.6818182 20.9090909,17.6818182 Z" id="椭圆形"></path>
+                    <polygon id="路径-154" points="19.1186769 7.31818182 19.1186769 6.31818182 22.7122568 6.31818182 22.7122568 7.31818182"></polygon>
+                    <polygon id="路径-154" points="19.1186769 9.60430796 19.1186769 8.60430796 22.7122568 8.60430796 22.7122568 9.60430796"></polygon>
+                    <polygon id="路径-154" points="19.1186769 11.8904341 19.1186769 10.8904341 22.7122568 10.8904341 22.7122568 11.8904341"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/pages/overview/components/UserInfoBox/img/user-account-light.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>账户资料蓝</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="SaaS概览页1440" transform="translate(-1352.000000, -336.000000)">
+            <g id="账户资料蓝" transform="translate(1352.000000, 336.000000)">
+                <circle id="椭圆形" fill="#F7FBFF" cx="20" cy="20" r="20"></circle>
+                <g id="分组-2" transform="translate(7.272727, 8.181818)">
+                    <path d="M9.27272727,2 L9.27272727,21.6363636 L16.1818182,21.6363636 L16.1818182,2 L9.27272727,2 Z M8.27272727,0 L17.1818182,0 C17.7341029,-1.01453063e-16 18.1818182,0.44771525 18.1818182,1 L18.1818182,22.6363636 C18.1818182,23.1886484 17.7341029,23.6363636 17.1818182,23.6363636 L8.27272727,23.6363636 C7.72044252,23.6363636 7.27272727,23.1886484 7.27272727,22.6363636 L7.27272727,1 C7.27272727,0.44771525 7.72044252,1.01453063e-16 8.27272727,0 Z" id="矩形" fill="#21BFBB" fill-rule="nonzero"></path>
+                    <path d="M12.7272727,19.5909091 C11.4469763,19.5909091 10.4090909,18.5530237 10.4090909,17.2727273 C10.4090909,15.9924308 11.4469763,14.9545455 12.7272727,14.9545455 C14.0075692,14.9545455 15.0454545,15.9924308 15.0454545,17.2727273 C15.0454545,18.5530237 14.0075692,19.5909091 12.7272727,19.5909091 Z M12.7272727,18.5909091 C13.4552844,18.5909091 14.0454545,18.000739 14.0454545,17.2727273 C14.0454545,16.5447156 13.4552844,15.9545455 12.7272727,15.9545455 C11.999261,15.9545455 11.4090909,16.5447156 11.4090909,17.2727273 C11.4090909,18.000739 11.999261,18.5909091 12.7272727,18.5909091 Z" id="椭圆形" fill="#21BFBB" fill-rule="nonzero"></path>
+                    <path d="M2,4.72727273 L2,20.7272727 L7.09090909,20.7272727 L7.09090909,4.72727273 L2,4.72727273 Z M1,2.72727273 L8.09090909,2.72727273 C8.64319384,2.72727273 9.09090909,3.17498798 9.09090909,3.72727273 L9.09090909,21.7272727 C9.09090909,22.2795575 8.64319384,22.7272727 8.09090909,22.7272727 L1,22.7272727 C0.44771525,22.7272727 1.58565575e-15,22.2795575 -4.4408921e-16,21.7272727 L0,3.72727273 C-6.76353751e-17,3.17498798 0.44771525,2.72727273 1,2.72727273 Z" id="矩形" fill="#21BFBB" fill-rule="nonzero"></path>
+                    <path d="M18.3636364,20.7272727 L23.4545455,20.7272727 L23.4545455,4.72727273 L18.3636364,4.72727273 L18.3636364,20.7272727 Z M17.3636364,2.72727273 L24.4545455,2.72727273 C25.0068302,2.72727273 25.4545455,3.17498798 25.4545455,3.72727273 L25.4545455,21.7272727 C25.4545455,22.2795575 25.0068302,22.7272727 24.4545455,22.7272727 L17.3636364,22.7272727 C16.8113516,22.7272727 16.3636364,22.2795575 16.3636364,21.7272727 L16.3636364,3.72727273 C16.3636364,3.17498798 16.8113516,2.72727273 17.3636364,2.72727273 Z" id="矩形" fill="#21BFBB" fill-rule="nonzero"></path>
+                    <polygon id="路径-154" fill="#21BFBB" fill-rule="nonzero" points="10.9368587 5.47320227 10.9368587 4.47320227 14.5304386 4.47320227 14.5304386 5.47320227"></polygon>
+                    <polygon id="路径-154" fill="#21BFBB" fill-rule="nonzero" points="10.9368587 8.20047499 10.9368587 7.20047499 14.5304386 7.20047499 14.5304386 8.20047499"></polygon>
+                    <polygon id="路径-154" fill="#21BFBB" fill-rule="nonzero" points="10.9368587 10.9545455 10.9368587 9.95454545 14.5304386 9.95454545 14.5304386 10.9545455"></polygon>
+                    <path d="M4.54545455,18.6818182 C3.26515808,18.6818182 2.22727273,17.6439328 2.22727273,16.3636364 C2.22727273,15.0833399 3.26515808,14.0454545 4.54545455,14.0454545 C5.82575101,14.0454545 6.86363636,15.0833399 6.86363636,16.3636364 C6.86363636,17.6439328 5.82575101,18.6818182 4.54545455,18.6818182 Z M4.54545455,17.6818182 C5.27346626,17.6818182 5.86363636,17.0916481 5.86363636,16.3636364 C5.86363636,15.6356246 5.27346626,15.0454545 4.54545455,15.0454545 C3.81744283,15.0454545 3.22727273,15.6356246 3.22727273,16.3636364 C3.22727273,17.0916481 3.81744283,17.6818182 4.54545455,17.6818182 Z" id="椭圆形" fill="#21BFBB" fill-rule="nonzero"></path>
+                    <polygon id="路径-154" fill="#21BFBB" fill-rule="nonzero" points="2.75504049 7.31818182 2.75504049 6.31818182 6.34862046 6.31818182 6.34862046 7.31818182"></polygon>
+                    <polygon id="路径-154" fill="#21BFBB" fill-rule="nonzero" points="2.75504049 9.60430796 2.75504049 8.60430796 6.34862046 8.60430796 6.34862046 9.60430796"></polygon>
+                    <polygon id="路径-154" fill="#21BFBB" fill-rule="nonzero" points="2.75504049 11.8904341 2.75504049 10.8904341 6.34862046 10.8904341 6.34862046 11.8904341"></polygon>
+                    <path d="M20.9090909,18.6818182 C19.6287944,18.6818182 18.5909091,17.6439328 18.5909091,16.3636364 C18.5909091,15.0833399 19.6287944,14.0454545 20.9090909,14.0454545 C22.1893874,14.0454545 23.2272727,15.0833399 23.2272727,16.3636364 C23.2272727,17.6439328 22.1893874,18.6818182 20.9090909,18.6818182 Z M20.9090909,17.6818182 C21.6371026,17.6818182 22.2272727,17.0916481 22.2272727,16.3636364 C22.2272727,15.6356246 21.6371026,15.0454545 20.9090909,15.0454545 C20.1810792,15.0454545 19.5909091,15.6356246 19.5909091,16.3636364 C19.5909091,17.0916481 20.1810792,17.6818182 20.9090909,17.6818182 Z" id="椭圆形" fill="#21BFBB" fill-rule="nonzero"></path>
+                    <polygon id="路径-154" fill="#21BFBB" fill-rule="nonzero" points="19.1186769 7.31818182 19.1186769 6.31818182 22.7122568 6.31818182 22.7122568 7.31818182"></polygon>
+                    <path d="M19.1186769,9.10430796 L22.7122568,9.10430796" id="路径-154" stroke="#21BFBB"></path>
+                    <path d="M19.1186769,11.3904341 L22.7122568,11.3904341" id="路径-154" stroke="#21BFBB"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/pages/overview/components/UserInfoBox/img/user-manage-dark.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>用户管理灰</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="SaaS概览页1440" transform="translate(-1277.000000, -384.000000)">
+            <g id="用户管理灰" transform="translate(1277.000000, 384.000000)">
+                <circle id="椭圆形" fill="#F7FBFF" cx="20" cy="20" r="20"></circle>
+                <g id="分组-3" transform="translate(7.272727, 8.090909)">
+                    <path d="M9.09090909,11.0909091 C6.02823911,11.0909091 3.54545455,8.60812452 3.54545455,5.54545455 C3.54545455,2.48278457 6.02823911,0 9.09090909,0 C12.1535791,0 14.6363636,2.48278457 14.6363636,5.54545455 C14.6363636,8.60812452 12.1535791,11.0909091 9.09090909,11.0909091 Z M9.09090909,9.09090909 C11.0490096,9.09090909 12.6363636,7.50355502 12.6363636,5.54545455 C12.6363636,3.58735407 11.0490096,2 9.09090909,2 C7.13280861,2 5.54545455,3.58735407 5.54545455,5.54545455 C5.54545455,7.50355502 7.13280861,9.09090909 9.09090909,9.09090909 Z" id="椭圆形" fill="#929EAB" fill-rule="nonzero"></path>
+                    <path d="M16.1818182,23.7265846 L16.1818182,18.7272727 C16.1818182,15.0621103 13.210617,12.0909091 9.54545455,12.0909091 L8.63636364,12.0909091 C4.97120121,12.0909091 2,15.0621103 2,18.7272727 L2,23.721017 L-1.03397291e-11,23.721017 L-1.42108547e-14,18.7272727 C-1.42108547e-14,13.9575408 3.86663171,10.0909091 8.63636364,10.0909091 L9.54545455,10.0909091 C14.3151865,10.0909091 18.1818182,13.9575408 18.1818182,18.7272727 L18.1818182,23.7272727 L16.1818182,23.7265846 Z" id="路径" fill="#929EAB" fill-rule="nonzero"></path>
+                    <path d="M15.9090909,11.0909091 L15.9090909,9.09090909 C17.8671914,9.09090909 19.4545455,7.50355502 19.4545455,5.54545455 C19.4545455,3.58735407 17.8671914,2 15.9090909,2 L15.9090909,0 C18.9717609,0 21.4545455,2.48278457 21.4545455,5.54545455 C21.4545455,8.60812452 18.9717609,11.0909091 15.9090909,11.0909091 Z" id="路径" fill="#929EAB" fill-rule="nonzero"></path>
+                    <path d="M16.9792399,12.1190828 C20.3557985,12.4296636 23,15.269675 23,18.7272727 L23,20.1279975 L25,22.7884306 L25,18.7272727 C25,13.9575408 21.1333683,10.0909091 16.3636364,10.0909091 L15.4545455,10.0909091 L16.9792399,12.1190828 Z M23,18.7272727 L23,20.1279975 L25,22.7884306 L25,18.7272727 C25,13.9575408 21.1333683,10.0909091 16.3636364,10.0909091 L15.4545455,10.0909091 L16.9792399,12.1190828 C20.3557985,12.4296636 23,15.269675 23,18.7272727 Z" id="路径" fill="#929EAB" fill-rule="nonzero"></path>
+                    <path d="M24.0909091,23.7272727 L24.0909091,20.0909091" id="路径-155" stroke="#929EAB" stroke-width="2"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/pages/overview/components/UserInfoBox/img/user-manage-light.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>用户管理蓝</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="SaaS概览页1440" transform="translate(-1277.000000, -336.000000)">
+            <g id="用户管理蓝" transform="translate(1277.000000, 336.000000)">
+                <circle id="椭圆形" fill="#F7FBFF" cx="20" cy="20" r="20"></circle>
+                <g id="分组-3" transform="translate(7.272727, 8.090909)">
+                    <path d="M9.09090909,11.0909091 C6.02823911,11.0909091 3.54545455,8.60812452 3.54545455,5.54545455 C3.54545455,2.48278457 6.02823911,0 9.09090909,0 C12.1535791,0 14.6363636,2.48278457 14.6363636,5.54545455 C14.6363636,8.60812452 12.1535791,11.0909091 9.09090909,11.0909091 Z M9.09090909,9.09090909 C11.0490096,9.09090909 12.6363636,7.50355502 12.6363636,5.54545455 C12.6363636,3.58735407 11.0490096,2 9.09090909,2 C7.13280861,2 5.54545455,3.58735407 5.54545455,5.54545455 C5.54545455,7.50355502 7.13280861,9.09090909 9.09090909,9.09090909 Z" id="椭圆形" fill="#21BFBB" fill-rule="nonzero"></path>
+                    <path d="M16.1818182,23.7265846 L16.1818182,18.7272727 C16.1818182,15.0621103 13.210617,12.0909091 9.54545455,12.0909091 L8.63636364,12.0909091 C4.97120121,12.0909091 2,15.0621103 2,18.7272727 L2,23.721017 L2.66453526e-14,23.721017 L2.66453526e-14,18.7272727 C2.66453526e-14,13.9575408 3.86663171,10.0909091 8.63636364,10.0909091 L9.54545455,10.0909091 C14.3151865,10.0909091 18.1818182,13.9575408 18.1818182,18.7272727 L18.1818182,23.7272727 L16.1818182,23.7265846 Z" id="路径" fill="#21BFBB" fill-rule="nonzero"></path>
+                    <path d="M15.9090909,11.0909091 L15.9090909,9.09090909 C17.8671914,9.09090909 19.4545455,7.50355502 19.4545455,5.54545455 C19.4545455,3.58735407 17.8671914,2 15.9090909,2 L15.9090909,0 C18.9717609,0 21.4545455,2.48278457 21.4545455,5.54545455 C21.4545455,8.60812452 18.9717609,11.0909091 15.9090909,11.0909091 Z" id="路径" fill="#21BFBB" fill-rule="nonzero"></path>
+                    <path d="M16.9792399,12.1190828 C20.3557985,12.4296636 23,15.269675 23,18.7272727 L23,20.1279975 L25,22.7884306 L25,18.7272727 C25,13.9575408 21.1333683,10.0909091 16.3636364,10.0909091 L15.4545455,10.0909091 L16.9792399,12.1190828 Z M23,18.7272727 L23,20.1279975 L25,22.7884306 L25,18.7272727 C25,13.9575408 21.1333683,10.0909091 16.3636364,10.0909091 L15.4545455,10.0909091 L16.9792399,12.1190828 C20.3557985,12.4296636 23,15.269675 23,18.7272727 Z" id="路径" fill="#21BFBB" fill-rule="nonzero"></path>
+                    <path d="M24.0909091,23.7272727 L24.0909091,20.0909091" id="路径-155" stroke="#21BFBB" stroke-width="2"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/pages/overview/components/UserInfoBox/img/user.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="98px" height="98px" viewBox="0 0 98 98" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>分组 48</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <circle id="path-1" cx="42.3529412" cy="42" r="42"></circle>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="分组-48" transform="translate(1.000000, 1.000000)">
+            <circle id="Mask" stroke="#13CBB9" stroke-width="2" cx="48" cy="48" r="48"></circle>
+            <g id="分组-23" transform="translate(5.647059, 6.000000)">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <use id="Mask" fill="#F7F9FB" xlink:href="#path-1"></use>
+                <g mask="url(#mask-2)">
+                    <g transform="translate(0.000000, 4.352941)">
+                        <path d="M33.0822249,48.7196132 L33.0822249,54.5713393 C32.6666296,56.2352467 31.8745884,57.2115005 30.7061013,57.500101 C31.3377065,59.3607937 34.6545691,63.0521202 41.7763648,63.0521202 C46.5242286,63.0521202 50.0101799,61.4504503 52.2342186,58.2471105 C51.0989243,57.1154519 50.5312771,55.930443 50.5312771,54.6920837 C50.5312771,53.4537243 50.5312771,51.503149 50.5312771,48.8403575 L33.0822249,48.7196132 Z" id="路径-147" stroke="none" fill="#FFC5C5" fill-rule="evenodd"></path>
+                        <rect id="矩形" stroke="none" fill="#F9CEB6" fill-rule="evenodd" x="33.0559541" y="21.07428" width="17.5609756" height="39.2539455" rx="8.7804878"></rect>
+                        <path d="M3.55271368e-14,98.3683841 L8.86262422,70.13473 C11.2196488,64.850568 18.0945032,60.5827982 29.4871874,57.3314204 C37.3562994,61.8941174 45.3881298,61.8941174 53.5826787,57.3314204 C65.0232213,60.7235119 71.7440316,64.9912818 73.7451095,70.13473 C75.7461875,75.2781781 79.3544093,84.6893962 84.5697748,98.3683841 L3.55271368e-14,98.3683841 Z" id="路径-146" stroke="none" fill="#17001D" fill-rule="evenodd"></path>
+                        <polygon id="路径-149" stroke="none" fill="#6E5C5A" fill-rule="evenodd" points="39.9409333 58.3644189 38.2209469 94.5193687 45.911275 94.5193687 44.8657331 58.3644189"></polygon>
+                        <polygon id="路径-156" stroke="none" fill="#503839" fill-rule="evenodd" points="42.982099 58.8809182 39.7704448 62.3571703 44.9201412 65.9367178 44.9201412 60.2666634"></polygon>
+                        <polygon id="路径-148" stroke="none" fill="#FFFFFF" fill-rule="evenodd" points="32.181947 53.1994261 41.9663985 56.810362 51.7404 53.1994261 54.8009705 57.5144721 45.0519039 63.3357629 41.9663985 58.2675945 38.9250806 63.3357629 29.4404591 57.5144721"></polygon>
+                        <path d="M33.0559541,46.3946614 C36.1832327,50.85648 39.4523231,53.0873893 42.8632252,53.0873893 C46.2741274,53.0873893 48.8586955,52.3528241 50.6169297,50.8836936 L50.6169297,46.3827448 L33.0559541,46.3946614 Z" id="路径-69" stroke="none" fill="#EEB99D" fill-rule="evenodd"></path>
+                        <rect id="矩形" stroke="none" fill="#FFDCC9" fill-rule="evenodd" x="27.8909613" y="8.67829717" width="26.8579627" height="41.8364419" rx="13.4289813"></rect>
+                        <circle id="椭圆形" stroke="none" fill="#1E1147" fill-rule="evenodd" cx="35.3802009" cy="30.6295167" r="1.29124821"></circle>
+                        <circle id="椭圆形" stroke="none" fill="#1E1147" fill-rule="evenodd" cx="47.7761836" cy="30.6295167" r="1.29124821"></circle>
+                        <ellipse id="椭圆形" stroke="none" fill="#1E1147" fill-rule="evenodd" transform="translate(34.668703, 25.972461) rotate(-4.000000) translate(-34.668703, -25.972461) " cx="34.6687031" cy="25.9724613" rx="3.61549498" ry="1.03299857"></ellipse>
+                        <ellipse id="椭圆形" stroke="none" fill="#1E1147" fill-rule="evenodd" transform="translate(48.097684, 25.972461) scale(-1, 1) rotate(-4.000000) translate(-48.097684, -25.972461) " cx="48.0976845" cy="25.9724613" rx="3.61549498" ry="1.03299857"></ellipse>
+                        <path d="M32.0229555,13.6403179 C34.2212527,13.2831218 35.8115201,13.6245988 36.7937578,14.664749 C38.2671143,16.2249743 42.3434683,22.070002 47.0742122,22.070002 C50.2280415,22.070002 52.6838425,20.9880721 54.4416153,18.8242122 L54.2393351,15.3534943 L37.2349271,11.7772929 L32.0229555,13.6403179 Z" id="路径-65" stroke="none" fill="#EEB99D" fill-rule="evenodd"></path>
+                        <path d="M27.6943356,30.3618393 C27.9466251,19.8406738 30.1912214,14.2671133 34.4281243,13.6411579 C40.7834788,12.7022249 41.0962397,19.0380724 47.2376683,19.0380724 C51.331954,19.0380724 53.4081405,18.2853221 53.4662278,16.7798213 L54.9676104,30.3618393 C58.3362387,25.0876017 60.0205528,19.815965 60.0205528,14.5469293 C59.9942987,10.7192519 57.3946765,8.10294048 52.2216863,6.69799498 C47.0319668,0.950758019 41.9436951,-1.09790204 36.9568714,0.5520148 C31.9700476,2.20193164 29.5555244,5.19884474 29.7133018,9.54275411 C24.7027892,8.6926859 22.6748022,11.1050416 23.6293408,16.7798213 C24.5838794,22.454601 25.9388777,26.9819404 27.6943356,30.3618393 Z" id="路径-47" stroke="none" fill="#1E1147" fill-rule="evenodd"></path>
+                        <path d="M55.6616472,27.7715208 C59.7002517,26.8425012 61.8567274,27.9864205 62.1310744,31.2032786 C62.5425949,36.0285659 56.1707751,38.1091249 54.2338646,37.4588953 C54.2408367,36.13752 54.2408367,33.0104213 54.2338646,28.0775994 L55.6616472,27.7715208 Z" id="路径-50" stroke="none" fill="#FFDCC9" fill-rule="evenodd"></path>
+                        <path d="M22.0877539,27.7715208 C26.1263584,26.8425012 28.2828341,27.9864205 28.5571811,31.2032786 C28.9687016,36.0285659 22.5968818,38.1091249 20.6599713,37.4588953 C20.6669434,36.13752 20.6669434,33.0104213 20.6599713,28.0775994 L22.0877539,27.7715208 Z" id="路径-50" stroke="none" fill="#FFDCC9" fill-rule="evenodd" transform="translate(24.618101, 32.517123) scale(-1, 1) translate(-24.618101, -32.517123) "></path>
+                        <path d="M56.2984218,34.5386508 C56.4324372,31.6117548 57.7759808,30.4447173 60.3290527,31.0375383" id="路径-91" stroke="#692307" stroke-width="1" fill="none" stroke-linecap="round"></path>
+                        <path d="M22.7259684,34.5386508 C22.8599838,31.6117548 24.2035275,30.4447173 26.7565993,31.0375383" id="路径-91" stroke="#692307" stroke-width="1" fill="none" stroke-linecap="round" transform="translate(24.741284, 32.713209) scale(-1, 1) translate(-24.741284, -32.713209) "></path>
+                        <path d="M38.4381838,41.0082403 C39.9940899,43.1990714 42.1012686,43.9293484 44.7597198,43.1990714" id="路径-110" stroke="#96350E" stroke-width="1.5" fill="none" stroke-linecap="round" transform="translate(41.598952, 42.240583) rotate(-16.000000) translate(-41.598952, -42.240583) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>