diff --git a/resources/assets/js/components/AutoTip.vue b/resources/assets/js/components/AutoTip.vue
index 16c266d6..c8d40c8d 100644
--- a/resources/assets/js/components/AutoTip.vue
+++ b/resources/assets/js/components/AutoTip.vue
@@ -7,7 +7,7 @@
         :disabled="!showTooltip"
         :max-width="tooltipMaxWidth"
         transfer>
-        <span ref="content" @mouseenter="handleTooltipIn" class="auto-tip-content">
+        <span ref="content" @mouseenter="handleTooltipIn" class="common-auto-tip">
             <template v-if="existSlot"><slot/></template>
             <template v-else>{{text}}</template>
         </span>
diff --git a/resources/assets/js/components/ImgUpload.vue b/resources/assets/js/components/ImgUpload.vue
index 778d26c1..3d102109 100755
--- a/resources/assets/js/components/ImgUpload.vue
+++ b/resources/assets/js/components/ImgUpload.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="common-img-update">
         <div v-if="type !== 'callback'" class="imgcomp-upload-list" v-for="item in uploadList">
             <template v-if="item.status === 'finished'">
                 <div class="imgcomp-upload-img" v-bind:style="{ 'background-image': 'url(' + __thumb(item.thumb) + ')' }"></div>
@@ -74,261 +74,6 @@
     </div>
 </template>
 
-<style lang="scss">
-:global {
-    .img-upload-modal {
-        .ivu-modal-mask {
-            z-index: 1001;
-        }
-
-        .ivu-modal-no-mask {
-            background-color: rgba(55, 55, 55, .2);
-        }
-
-        .ivu-modal-wrap {
-            z-index: 1001;
-        }
-    }
-
-    .imgcomp-upload-list {
-        display: inline-block;
-        width: 60px;
-        height: 60px;
-        text-align: center;
-        line-height: 60px;
-        border: 1px solid transparent;
-        border-radius: 4px;
-        overflow: hidden;
-        background: #fff;
-        position: relative;
-        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-        margin-right: 4px;
-        vertical-align: top;
-
-        .imgcomp-upload-img {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-position: center;
-            background-size: cover;
-        }
-
-        .imgcomp-upload-list-cover {
-            display: none;
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0, 0, 0, .6);
-        }
-
-        .imgcomp-upload-list-cover i {
-            color: #fff;
-            font-size: 24px;
-            cursor: pointer;
-            vertical-align: middle;
-            margin: 0;
-            transition: all .2s;
-        }
-
-        .imgcomp-upload-list-cover i:hover {
-            font-size: 28px;
-        }
-
-        .ivu-progress-outer {
-            background-color: rgba(0, 0, 0, 0.68);
-
-            .ivu-progress-inner {
-                width: 88%;
-            }
-        }
-    }
-
-    .imgcomp-upload-list:hover .imgcomp-upload-list-cover {
-        display: block;
-    }
-
-    .img-upload-foot {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-
-        .img-upload-foot-input {
-            flex: 1;
-            text-align: left;
-            display: flex;
-            align-items: center;
-            justify-content: flex-end;
-
-            .img-upload-foot-httptitle {
-                cursor: pointer;
-                padding-left: 3px;
-                margin-right: 22px;
-            }
-        }
-    }
-
-    .add-box {
-        width: 60px;
-        height: 60px;
-        line-height: 60px;
-        display: inline-block;
-        background: #fff;
-        border: 1px dashed #dddee1;
-        border-radius: 4px;
-        text-align: center;
-        position: relative;
-        overflow: hidden;
-        vertical-align: top;
-
-        .add-box-icon {
-            i {
-                vertical-align: middle;
-                padding-bottom: 2px;
-            }
-        }
-
-        .add-box-upload {
-            display: none;
-            position: absolute;
-            top: 0;
-            left: 0;
-            height: 100%;
-            width: 100%;
-            color: #ffffff;
-            padding-top: 9px;
-            background: rgba(0, 0, 0, 0.6);
-
-            .add-box-item {
-                height: 22px;
-                line-height: 22px;
-                cursor: pointer;
-
-                .ivu-upload-drag, .ivu-upload-drag:hover {
-                    background: transparent;
-                    border: 0;
-                    border-radius: 0;
-                }
-
-                span {
-                    transition: all .2s;
-                    font-size: 12px;
-                }
-            }
-
-            .add-box-item:hover {
-                span {
-                    font-size: 14px;
-                }
-            }
-        }
-
-        em {
-            font-style: normal;
-        }
-    }
-
-    .add-box:hover {
-        border-color: rgba(0, 0, 0, .6);
-
-        .add-box-upload {
-            display: block;
-        }
-    }
-
-    .callback-add-box {
-        display: block;
-        width: auto;
-        height: 25px;
-        line-height: 25px;
-        border: 0;
-        background: transparent;
-
-        .add-box-icon {
-            display: none;
-        }
-
-        .add-box-upload {
-            display: block;
-            width: auto;
-            background: transparent;
-            color: #333;
-            padding: 0;
-
-            > div {
-                display: inline-block;
-                padding-right: 10px;
-            }
-        }
-    }
-
-    .browse-load {
-        margin: 20px;
-        text-align: center;
-    }
-
-    .browse-list {
-        max-height: 540px;
-        overflow: auto;
-
-        .browse-item {
-            margin: 10px 15px;
-            display: inline-block;
-            text-align: center;
-            cursor: pointer;
-            position: relative;
-
-            .browse-img {
-                width: 64px;
-                height: 64px;
-                background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKoAAABxCAAAAABg5GeyAAACW0lEQVR4Ae3XVRLjMBAE0L3/rSwKM3OcSNPyLVYOLvM6UD0Bd03LVe9XH+RlhlRSSSWVVFJJJZVUUkkllVRSSSWVVFJJJZVUUkl9WyqppJJKKqmkkgpURP17xngOAR5NxW5wlJ9MaLQh83F4NHWmd/gZtdVBaOldfDB1bq5UpJFbFOC6LKnYrkRO209PAw+hIuzWB8Ep5es8HvYo4z4tE1X8UeRwlMM2D5Bzkc7kj6Bi3VTKDDwEeUcrMxrUvGDXTnHa6kK69SDN9sgq1clxKSbNHqqnYmdri81Q9QHf1JPt1Frncaib2XbiTKL2GkHaurnY9LOulMV0O7G6Kw+g9sw2ohhm62KezVJaaufjWC1TnOkr1exilJ7Ji0vxCCqO9V4UwV4PYr9+apouhGYLKfnahdpqegjmeoXOpXgANe70pKT6Zhu19qkY2nC0PZS527lQOyInqr8Uvc5jqfUb1X+PGh5IhW90S2quh3FQC2XRcF66TUkTXPcLKm5FtdR9RJq+2hWII7UpFtmsQLEyzsdJtkxxpr6gLotbUSlV9yeT0Trmzk2XPdUThLYarUbWOY9j04xXQ2u+pMZLYSumGmNUH3HbM9qOAwSHodN2Pks25F2j3aI7+IxqNsB+YLWb16ukSjiW4xNB0gMoMfApBS/XZQgi3p9/5RsiKNKZEOwYFVIF5VyTyD19sbyjIJiNJRZxpNbx2S8sGKvGZNHJBniBu9Wy5WxjGuQFqIAcBHiRGyt4ua5gSCWVVFJJJZVUUkkllVRSSSWVVFJJJZVUUkkllVRSSSWVVFI/AgO0SXIVYHeGAAAAAElFTkSuQmCC);
-                background-position: center;
-                background-repeat: no-repeat;
-                background-size: cover;
-            }
-
-            .browse-title {
-                display: block;
-                width: 64px;
-                margin-top: 5px;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-
-            .browse-icon {
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 64px;
-                font-size: 36px;
-                padding-top: 15px;
-                color: #ffffff;
-                background-color: rgba(0, 0, 0, 0.5);
-            }
-        }
-    }
-
-    .browse-list-disabled {
-        position: relative;
-    }
-
-    .browse-list-disabled:after {
-        position: absolute;
-        content: '';
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(255, 255, 255, 0.9);
-        z-index: 1;
-    }
-}
-</style>
 <script>
     export default {
         name: 'ImgUpload',
diff --git a/resources/assets/js/components/Loading.vue b/resources/assets/js/components/Loading.vue
index 4033e4c7..b60b4556 100644
--- a/resources/assets/js/components/Loading.vue
+++ b/resources/assets/js/components/Loading.vue
@@ -2,70 +2,6 @@
     <svg viewBox="25 25 50 50" class="common-loading"><circle cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10" class="common-path"></circle></svg>
 </template>
 
-<style lang="scss" scoped>
-:global {
-    .common-loading {
-        transform-origin: center center;
-        width: 30px;
-        height: 30px;
-        max-width: 100%;
-        max-height: 100%;
-        margin: auto;
-        overflow: hidden;
-        &:local {
-            animation: rotate 2s linear infinite;
-        }
-
-        .common-path {
-            stroke-dasharray: 1, 200;
-            stroke-dashoffset: 0;
-            stroke-linecap: round;
-            &:local {
-                animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
-            }
-        }
-    }
-    @keyframes rotate {
-        to {
-            -webkit-transform: rotate(1turn);
-            transform: rotate(1turn)
-        }
-    }
-    @keyframes dash {
-        0% {
-            stroke-dasharray: 1, 200;
-            stroke-dashoffset: 0
-        }
-
-        50% {
-            stroke-dasharray: 89, 200;
-            stroke-dashoffset: -35
-        }
-
-        to {
-            stroke-dasharray: 89, 200;
-            stroke-dashoffset: -124
-        }
-    }
-    @keyframes color {
-        0%, to {
-            stroke: #d62d20
-        }
-
-        40% {
-            stroke: #0057e7
-        }
-
-        66% {
-            stroke: #008744
-        }
-
-        80%, 90% {
-            stroke: #ffa700
-        }
-    }
-}
-</style>
 <script>
     export default {
         name: 'Loading',
diff --git a/resources/assets/js/components/ScrollerY.vue b/resources/assets/js/components/ScrollerY.vue
index 07260169..a81d857b 100644
--- a/resources/assets/js/components/ScrollerY.vue
+++ b/resources/assets/js/components/ScrollerY.vue
@@ -1,32 +1,10 @@
 <template>
-    <div ref="scrollerView" class="app-scroller" :class="[static ? 'app-scroller-static' : '']">
+    <div ref="scrollerView" class="app-scroller-y" :class="[static ? 'static' : '']">
         <slot/>
         <div ref="bottom" class="app-scroller-bottom"></div>
     </div>
 </template>
 
-<style lang="scss" scoped>
-.app-scroller {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    .app-scroller-bottom {
-        height: 0;
-        margin: 0;
-        padding: 0;
-    }
-}
-
-.app-scroller-static {
-    position: static;
-    flex: 1;
-}
-</style>
 <script>
 export default {
     name: 'ScrollerY',
diff --git a/resources/assets/js/components/Spinner.vue b/resources/assets/js/components/Spinner.vue
index 589d0fa2..dc662cf2 100644
--- a/resources/assets/js/components/Spinner.vue
+++ b/resources/assets/js/components/Spinner.vue
@@ -4,30 +4,6 @@
     </div>
 </template>
 
-<style lang="scss" scoped>
-:global {
-    .common-spinner {
-        display: none;
-        position: fixed;
-        z-index: 9999;
-        bottom: 20px;
-        right: 20px;
-        margin: 0 auto;
-        width: 30px;
-        height: 30px;
-
-        .common-circular {
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            width: 100%;
-            height: 100%;
-        }
-    }
-}
-</style>
 <script>
     export default {
         name: 'Spinner',
diff --git a/resources/assets/js/components/TEditor.vue b/resources/assets/js/components/TEditor.vue
index f626b0b8..2fb50569 100755
--- a/resources/assets/js/components/TEditor.vue
+++ b/resources/assets/js/components/TEditor.vue
@@ -49,31 +49,6 @@
     </div>
 </template>
 
-<style lang="scss" scoped>
-:global {
-    .teditor-loadstyle {
-        width: 100%;
-        height: 180px;
-        overflow: hidden;
-        position: relative;
-    }
-
-    .teditor-loadedstyle {
-        width: 100%;
-        max-height: inherit;
-        overflow: inherit;
-        position: relative;
-    }
-
-    .upload-control {
-        display: none;
-        width: 0;
-        height: 0;
-        overflow: hidden;
-    }
-}
-</style>
-
 <script>
     import tinymce from 'tinymce/tinymce';
     import ImgUpload from "./ImgUpload";
diff --git a/resources/assets/js/components/TagInput.vue b/resources/assets/js/components/TagInput.vue
index 71c9f185..acefbd18 100755
--- a/resources/assets/js/components/TagInput.vue
+++ b/resources/assets/js/components/TagInput.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="tags-wrap" @paste="pasteText($event)" @click="clickWrap">
+    <div class="common-tag-input" @paste="pasteText($event)" @click="clickWrap">
         <div class="tags-item" v-for="(text, index) in disSource">
             <span class="tags-content" @click.stop="">{{text}}</span><span class="tags-del" @click.stop="delTag(index)">&times;</span>
         </div>
@@ -10,84 +10,6 @@
     </div>
 </template>
 
-<style lang="scss">
-:global {
-    .tags-wrap {
-        display: inline-block;
-        width: 100%;
-        min-height: 32px;
-        padding: 2px 7px;
-        border: 1px solid #dddee1;
-        border-radius: 4px;
-        color: #495060;
-        background: #fff;
-        position: relative;
-        cursor: text;
-        vertical-align: middle;
-        line-height: normal;
-        -webkit-transition: border .2s ease-in-out, background .2s ease-in-out, -webkit-box-shadow .2s ease-in-out;
-        transition: border .2s ease-in-out, background .2s ease-in-out, -webkit-box-shadow .2s ease-in-out;
-
-        .tags-item, .tags-input {
-            position: relative;
-            float: left;
-            color: #495060;
-            background-color: #f1f8ff;
-            border-radius: 3px;
-            line-height: 22px;
-            margin: 2px 6px 2px 0;
-            padding: 0 20px 0 6px;
-
-            .tags-content {
-                line-height: 22px;
-            }
-
-            .tags-del {
-                width: 20px;
-                height: 22px;
-                text-align: center;
-                cursor: pointer;
-                position: absolute;
-                top: -1px;
-                right: 0;
-            }
-        }
-
-        .tags-input {
-            max-width: 80%;
-            padding: 0;
-            background-color: inherit;
-            border: none;
-            color: inherit;
-            height: 22px;
-            line-height: 22px;
-            -webkit-appearance: none;
-            outline: none;
-            resize: none;
-            overflow: hidden;
-        }
-
-        .tags-input::placeholder {
-            color: #bbbbbb;
-        }
-
-        .tags-placeholder {
-            position: absolute;
-            left: 0;
-            top: 0;
-            z-index: -1;
-            color: #ffffff00;
-        }
-    }
-
-    .tags-wrap::after {
-        content: "";
-        display: block;
-        height: 0;
-        clear: both;
-    }
-}
-</style>
 <script>
     export default {
         name: 'TagInput',
diff --git a/resources/assets/js/components/WAvatar.vue b/resources/assets/js/components/WAvatar.vue
index a7e4bfdc..19762ff1 100644
--- a/resources/assets/js/components/WAvatar.vue
+++ b/resources/assets/js/components/WAvatar.vue
@@ -5,6 +5,7 @@
         <span ref="children" :class="[prefixCls + '-string']" :style="childrenStyle" v-else><slot></slot></span>
     </span>
 </template>
+
 <script>
     import Icon from 'view-design-hi/src/components/icon';
     import { oneOf } from 'view-design-hi/src/utils/assist';
diff --git a/resources/assets/js/components/WCircle.vue b/resources/assets/js/components/WCircle.vue
index 5547ca1c..0138f6c4 100644
--- a/resources/assets/js/components/WCircle.vue
+++ b/resources/assets/js/components/WCircle.vue
@@ -12,24 +12,6 @@
     </div>
 </template>
 
-<style lang="scss" scoped>
-:global {
-    .common-circle {
-        border-radius: 50%;
-        .common-circle-path {
-            fill: transparent;
-        }
-        .common-circle-g-path-ring {
-            stroke: #87d068;
-        }
-        .common-circle-g-path-core {
-            fill: #87d068;
-            transform: scale(0.56);
-            transform-origin: 50%;
-        }
-    }
-}
-</style>
 <script>
 export default {
     name: 'WCircle',
diff --git a/resources/assets/js/pages/404.vue b/resources/assets/js/pages/404.vue
index 37298755..438f8cbd 100644
--- a/resources/assets/js/pages/404.vue
+++ b/resources/assets/js/pages/404.vue
@@ -8,40 +8,38 @@
 </template>
 
 <style lang="scss" scoped>
-:global {
-    .page-404 {
-        background-color: #fff;
-        color: #636b6f;
-        font-weight: 400;
+.page-404 {
+    background-color: #fff;
+    color: #636b6f;
+    font-weight: 400;
+    height: 100vh;
+    margin: 0;
+
+    .full-height {
         height: 100vh;
-        margin: 0;
+    }
 
-        .full-height {
-            height: 100vh;
-        }
+    .flex-center {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+    }
 
-        .flex-center {
-            align-items: center;
-            display: flex;
-            justify-content: center;
-        }
+    .position-ref {
+        position: relative;
+    }
 
-        .position-ref {
-            position: relative;
-        }
+    .code {
+        border-right: 2px solid;
+        font-size: 26px;
+        padding: 0 15px 0 15px;
+        text-align: center;
+    }
 
-        .code {
-            border-right: 2px solid;
-            font-size: 26px;
-            padding: 0 15px 0 15px;
-            text-align: center;
-        }
-
-        .message {
-            font-size: 18px;
-            padding: 10px;
-            text-align: center;
-        }
+    .message {
+        font-size: 18px;
+        padding: 10px;
+        text-align: center;
     }
 }
 </style>
diff --git a/resources/assets/js/pages/login.vue b/resources/assets/js/pages/login.vue
index 947ba1d3..f0dbfb31 100644
--- a/resources/assets/js/pages/login.vue
+++ b/resources/assets/js/pages/login.vue
@@ -21,97 +21,6 @@
     </div>
 </template>
 
-<style lang="scss">
-:global {
-    .page-login {
-        .login-body {
-            .login-box {
-                .login-input {
-                    .ivu-input {
-                        border-color: #f1f1f1;
-                    }
-                    .login-code {
-                        .ivu-input-group-prepend,
-                        .ivu-input-group-append {
-                            background: transparent;
-                            border-color: #f1f1f1;
-                        }
-                        .ivu-input {
-                            border-left-color: transparent;
-                            border-right-color: transparent;
-                        }
-                        .login-code-end {
-                            margin: -6px -7px;
-                            height: 38px;
-                            overflow: hidden;
-                            cursor: pointer;
-                            img {
-                                height: 100%;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-</style>
-<style lang="scss" scoped>
-:global {
-    .page-login {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: #F3F6FE;
-        .login-body {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            .login-logo {
-                width: 64px;
-                height: 64px;
-                background: url("../../statics/images/logo.svg") no-repeat center center;
-                background-size: contain;
-            }
-            .login-box {
-                margin-top: 32px;
-                width: 450px;
-                border-radius: 12px;
-                background-color: #ffffff;
-                box-shadow: 0 0 10px #e6ecfa;
-                .login-title {
-                    font-size: 24px;
-                    font-weight: 600;
-                    text-align: center;
-                    margin-top: 36px;
-                }
-                .login-subtitle {
-                    font-size: 14px;
-                    text-align: center;
-                    margin-top: 12px;
-                    color: #AAAAAA;
-                }
-                .login-input {
-                    margin: 40px;
-                    > * {
-                        margin-top: 26px;
-                    }
-                }
-            }
-            .login-forgot {
-                color: #aaaaaa;
-                margin-top: 36px;
-            }
-        }
-    }
-}
-</style>
-
 <script>
 export default {
     data() {
diff --git a/resources/assets/js/pages/manage.vue b/resources/assets/js/pages/manage.vue
index 8255cb9e..a77ca2b3 100644
--- a/resources/assets/js/pages/manage.vue
+++ b/resources/assets/js/pages/manage.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="manage-wrapper">
+    <div class="page-manage">
         <div class="manage-box-menu">
             <Dropdown class="manage-box-dropdown" trigger="click" @on-click="settingRoute">
                 <div class="manage-box-title">
diff --git a/resources/assets/js/pages/manage/calendar.vue b/resources/assets/js/pages/manage/calendar.vue
index b57278ab..fe18ee9e 100644
--- a/resources/assets/js/pages/manage/calendar.vue
+++ b/resources/assets/js/pages/manage/calendar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="calendar">
+    <div class="page-calendar">
         <PageTitle>{{$L('日历')}}</PageTitle>
         <div class="nopage">
             <div class="nopage-icon"><Icon type="md-calendar" /></div>
@@ -8,34 +8,6 @@
     </div>
 </template>
 
-<style lang="scss" scoped>
-:global {
-    .nopage {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        .nopage-icon {
-            background-color: #f4f5f7;
-            padding: 20px;
-            border-radius: 50%;
-            .ivu-icon {
-                color: #d1d8dd;
-                font-size: 46px;
-            }
-        }
-        .nopage-text {
-            margin-top: 16px;
-            color: #bec6cc;
-            background-color: #f4f5f7;
-            padding: 4px 15px;
-            border-radius: 14px;
-        }
-    }
-}
-</style>
 <script>
 export default {
     data() {
diff --git a/resources/assets/js/pages/manage/components/DialogView.vue b/resources/assets/js/pages/manage/components/DialogView.vue
index b7e19222..7eb7c70f 100644
--- a/resources/assets/js/pages/manage/components/DialogView.vue
+++ b/resources/assets/js/pages/manage/components/DialogView.vue
@@ -32,7 +32,7 @@
                 :width="360"
                 :offset="8"
                 @on-popper-show="popperShow">
-                <div slot="content" class="dialog-readbox">
+                <div slot="content" class="dialog-wrapper-read-poptip-content">
                     <ul class="read">
                         <li class="read-title"><em>{{readList.length}}</em>{{$L('已读')}}</li>
                         <li v-for="item in readList"><UserAvatar :userid="item.userid" :size="26" show-name/></li>
diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue
index f6f1a331..c72d2ccf 100644
--- a/resources/assets/js/pages/manage/components/DialogWrapper.vue
+++ b/resources/assets/js/pages/manage/components/DialogWrapper.vue
@@ -10,7 +10,12 @@
                 <em v-if="peopleNum > 0">({{peopleNum}})</em>
             </div>
         </slot>
-        <ScrollerY ref="scroller" class="dialog-chat dialog-scroller" :auto-bottom="autoBottom" @on-scroll="chatScroll">
+        <ScrollerY
+            ref="scroller"
+            class="dialog-scroller"
+            :auto-bottom="autoBottom"
+            @on-scroll="chatScroll"
+            static>
             <div ref="manageList" class="dialog-list">
                 <ul>
                     <li v-if="dialogMsgLoad > 0" class="loading"><Loading/></li>
diff --git a/resources/assets/js/pages/manage/components/ProjectDialog.vue b/resources/assets/js/pages/manage/components/ProjectDialog.vue
index be3d5daf..3b2e83e8 100644
--- a/resources/assets/js/pages/manage/components/ProjectDialog.vue
+++ b/resources/assets/js/pages/manage/components/ProjectDialog.vue
@@ -22,56 +22,53 @@
 </template>
 
 <style lang="scss" scoped>
-:global {
-    .project-dialog {
-        display: flex;
-        flex-direction: column;
-        background-color: #ffffff;
-        border-left: 1px solid #f4f5f5;
-        z-index: 1;
-        .project-dialog-wrapper {
-            flex: 1;
-            height: 0;
-            .dialog-user {
-                margin-top: 36px;
-                padding: 0 32px;
-                .member-head {
-                    display: flex;
-                    align-items: center;
-                    .member-title {
-                        flex: 1;
-                        font-size: 18px;
-                        font-weight: 600;
-                        > span {
-                            padding-left: 6px;
-                            color: #2d8cf0;
-                        }
-                    }
-                    .member-view-all {
-                        color: #999;
-                        font-size: 13px;
-                        cursor: pointer;
-                        &:hover {
-                            color: #777;
-                        }
+.project-dialog {
+    display: flex;
+    flex-direction: column;
+    background-color: #ffffff;
+    border-left: 1px solid #f4f5f5;
+    z-index: 1;
+    position: relative;
+    .project-dialog-wrapper {
+        .dialog-user {
+            margin-top: 36px;
+            padding: 0 32px;
+            .member-head {
+                display: flex;
+                align-items: center;
+                .member-title {
+                    flex: 1;
+                    font-size: 18px;
+                    font-weight: 600;
+                    > span {
+                        padding-left: 6px;
+                        color: #2d8cf0;
                     }
                 }
-                .member-list {
-                    display: flex;
-                    align-items: center;
-                    margin-top: 14px;
-                    overflow: auto;
-                    > li {
-                        position: relative;
-                        list-style: none;
-                        margin-right: 14px;
-                        margin-bottom: 8px;
+                .member-view-all {
+                    color: #999;
+                    font-size: 13px;
+                    cursor: pointer;
+                    &:hover {
+                        color: #777;
                     }
-                    &.member-all {
-                        display: block;
-                        > li {
-                            display: inline-block;
-                        }
+                }
+            }
+            .member-list {
+                display: flex;
+                align-items: center;
+                margin-top: 14px;
+                overflow: auto;
+                > li {
+                    position: relative;
+                    list-style: none;
+                    margin-right: 14px;
+                    margin-bottom: 8px;
+                }
+                &.member-all {
+                    display: block;
+                    > li {
+                        display: inline-block;
                     }
                 }
             }
diff --git a/resources/assets/js/pages/manage/components/TaskAdd.vue b/resources/assets/js/pages/manage/components/TaskAdd.vue
index 0da1e475..8bcb7ee6 100644
--- a/resources/assets/js/pages/manage/components/TaskAdd.vue
+++ b/resources/assets/js/pages/manage/components/TaskAdd.vue
@@ -95,7 +95,12 @@
                         </Col>
                     </Row>
                 </div>
-                <Input type="text" v-model="subName" class="enter-input" @on-enter="addSubTask" :placeholder="$L('+ 输入子任务，回车添加子任务')"></Input>
+                <Input
+                    type="text"
+                    v-model="subName"
+                    :class="['enter-input', subName == '' ? 'empty' : '']"
+                    @on-enter="addSubTask"
+                    :placeholder="$L('+ 输入子任务，回车添加子任务')"/>
             </div>
         </Form>
     </div>
diff --git a/resources/assets/js/pages/manage/components/TaskPriority.vue b/resources/assets/js/pages/manage/components/TaskPriority.vue
index e7573625..3ed18b2e 100644
--- a/resources/assets/js/pages/manage/components/TaskPriority.vue
+++ b/resources/assets/js/pages/manage/components/TaskPriority.vue
@@ -2,20 +2,6 @@
     <div class="task-priority" :style="myStyle"><slot/></div>
 </template>
 
-<style lang="scss" scoped>
-:global {
-    .task-priority {
-        display: inline-block;
-        padding: 0 6px;
-        border-radius: 3px;
-        max-width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-}
-</style>
-
 <script>
 export default {
     name: "TaskPriority",
diff --git a/resources/assets/js/pages/manage/dashboard.vue b/resources/assets/js/pages/manage/dashboard.vue
index c13e4a60..94a7f093 100644
--- a/resources/assets/js/pages/manage/dashboard.vue
+++ b/resources/assets/js/pages/manage/dashboard.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="dashboard">
+    <div class="page-dashboard">
         <PageTitle>{{$L('仪表板')}}</PageTitle>
         <div class="nopage">
             <div class="nopage-icon"><Icon type="ios-speedometer" /></div>
@@ -8,34 +8,6 @@
     </div>
 </template>
 
-<style lang="scss" scoped>
-:global {
-    .nopage {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        .nopage-icon {
-            background-color: #f4f5f7;
-            padding: 20px;
-            border-radius: 50%;
-            .ivu-icon {
-                color: #d1d8dd;
-                font-size: 46px;
-            }
-        }
-        .nopage-text {
-            margin-top: 16px;
-            color: #bec6cc;
-            background-color: #f4f5f7;
-            padding: 4px 15px;
-            border-radius: 14px;
-        }
-    }
-}
-</style>
 <script>
 export default {
     data() {
diff --git a/resources/assets/js/pages/manage/messenger.vue b/resources/assets/js/pages/manage/messenger.vue
index 3ffc0f2f..bfd259e4 100644
--- a/resources/assets/js/pages/manage/messenger.vue
+++ b/resources/assets/js/pages/manage/messenger.vue
@@ -1,8 +1,7 @@
 <template>
-    <div class="messenger">
+    <div class="page-messenger">
         <PageTitle>{{ $L('消息') }}</PageTitle>
         <div class="messenger-wrapper">
-
             <div class="messenger-select">
                 <div class="messenger-search">
                     <div class="search-wrapper">
@@ -62,14 +61,6 @@
     </div>
 </template>
 
-<style lang="scss" scoped>
-:global {
-    .messenger {
-        display: flex;
-    }
-}
-</style>
-
 <script>
 import {mapState} from "vuex";
 import DialogWrapper from "./components/DialogWrapper";
diff --git a/resources/assets/js/pages/manage/project.vue b/resources/assets/js/pages/manage/project.vue
index bb5c3a02..49a55fcb 100644
--- a/resources/assets/js/pages/manage/project.vue
+++ b/resources/assets/js/pages/manage/project.vue
@@ -1,43 +1,11 @@
 <template>
-    <div class="project">
+    <div class="page-project">
         <PageTitle>{{ $L('项目面板') }}</PageTitle>
         <ProjectList/>
         <ProjectDialog v-if="$store.state.projectChatShow"/>
     </div>
 </template>
 
-<style lang="scss" scoped>
-:global {
-    .project {
-        display: flex;
-        align-items: flex-start;
-        .project-list {
-            flex: 1;
-            width: 0;
-            height: 100%;
-            background-color: #fafafa;
-        }
-        .project-dialog {
-            position: relative;
-            height: 100%;
-            width: 35%;
-            min-width: 320px;
-            max-width: 520px;
-            flex-shrink: 0;
-            &:before {
-                content: "";
-                position: absolute;
-                top: 0;
-                left: 0;
-                height: 100%;
-                width: 1px;
-                background-color: #f2f2f2;
-            }
-        }
-    }
-}
-</style>
-
 <script>
 import ProjectList from "./components/ProjectList";
 import ProjectDialog from "./components/ProjectDialog";
diff --git a/resources/assets/js/pages/manage/setting/index.vue b/resources/assets/js/pages/manage/setting/index.vue
index c4cc5c5d..38aaebe1 100644
--- a/resources/assets/js/pages/manage/setting/index.vue
+++ b/resources/assets/js/pages/manage/setting/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="setting">
+    <div class="page-setting">
         <PageTitle>{{$L('设置')}}</PageTitle>
         <div class="setting-head">
             <div class="setting-titbox">
@@ -26,80 +26,6 @@
     </div>
 </template>
 
-<style lang="scss" scoped>
-:global {
-    .setting {
-        display: flex;
-        flex-direction: column;
-        .setting-head {
-            display: flex;
-            align-items: flex-start;
-            margin: 32px 32px 16px;
-            border-bottom: 1px solid #F4F4F5;
-            .setting-titbox {
-                flex: 1;
-                margin-bottom: 16px;
-                .setting-title {
-                    display: flex;
-                    align-items: center;
-                    > h1 {
-                        color: #333333;
-                        font-size: 28px;
-                        font-weight: 600;
-                    }
-                }
-            }
-        }
-    }
-    .setting-box {
-        flex: 1;
-        height: 0;
-        display: flex;
-        margin-bottom: 16px;
-        .setting-menu {
-            width: 200px;
-            flex-shrink: 0;
-            border-right: 1px solid #F4F4F5;
-            overflow: auto;
-            > ul {
-                padding: 12px 0 0 32px;
-                > li {
-                    cursor: pointer;
-                    color: #6C7D8C;
-                    list-style: none;
-                    line-height: 42px;
-                    padding: 0 20px;
-                    margin: 5px 0;
-                    position: relative;
-                    &.active,
-                    &:hover {
-                        background-color: #F4F5F7;
-                    }
-                }
-            }
-        }
-        .setting-content {
-            flex: 1;
-            overflow: auto;
-            position: relative;
-            display: flex;
-            flex-direction: column;
-            .setting-content-title {
-                font-size: 20px;
-                font-weight: 500;
-                padding: 12px 32px;
-            }
-            .setting-content-view {
-                flex: 1;
-                position: relative;
-                .setting-router-view {
-                    padding: 24px 40px;
-                }
-            }
-        }
-    }
-}
-</style>
 <script>
 import {mapState} from "vuex";
 
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
index 7b2dffd6..0b054306 100644
--- a/resources/assets/sass/app.scss
+++ b/resources/assets/sass/app.scss
@@ -1,14 +1,8 @@
-@import "main";
-@import "loading";
-@import "iconfont";
-@import "scrollbar";
 @import "element";
+@import "iconfont";
+@import "loading";
+@import "scrollbar";
 
-@import "auto-tip";
-@import "common-avatar";
-@import "manage-wrapper";
-@import "dialog-wrapper";
-@import "messenger-wrapper";
-@import "project-list";
-@import "task-add";
+@import "components/_";
+@import "pages/_";
 
diff --git a/resources/assets/sass/components/_.scss b/resources/assets/sass/components/_.scss
new file mode 100644
index 00000000..0b5927d0
--- /dev/null
+++ b/resources/assets/sass/components/_.scss
@@ -0,0 +1,10 @@
+@import "auto-tip";
+@import "circle";
+@import "img-update";
+@import "loading";
+@import "scroller-y";
+@import "spinner";
+@import "t-editor";
+@import "tag-input";
+@import "user-avatar";
+@import "user-input";
diff --git a/resources/assets/sass/auto-tip.scss b/resources/assets/sass/components/auto-tip.scss
similarity index 78%
rename from resources/assets/sass/auto-tip.scss
rename to resources/assets/sass/components/auto-tip.scss
index 3b260152..30299356 100644
--- a/resources/assets/sass/auto-tip.scss
+++ b/resources/assets/sass/components/auto-tip.scss
@@ -1,4 +1,4 @@
-.auto-tip-content {
+.common-auto-tip-content {
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/resources/assets/sass/components/circle.scss b/resources/assets/sass/components/circle.scss
new file mode 100644
index 00000000..e45c9110
--- /dev/null
+++ b/resources/assets/sass/components/circle.scss
@@ -0,0 +1,14 @@
+.common-circle {
+    border-radius: 50%;
+    .common-circle-path {
+        fill: transparent;
+    }
+    .common-circle-g-path-ring {
+        stroke: #87d068;
+    }
+    .common-circle-g-path-core {
+        fill: #87d068;
+        transform: scale(0.56);
+        transform-origin: 50%;
+    }
+}
diff --git a/resources/assets/sass/components/img-update.scss b/resources/assets/sass/components/img-update.scss
new file mode 100644
index 00000000..e654ae40
--- /dev/null
+++ b/resources/assets/sass/components/img-update.scss
@@ -0,0 +1,251 @@
+.img-upload-modal {
+    .ivu-modal-mask {
+        z-index: 1001;
+    }
+
+    .ivu-modal-no-mask {
+        background-color: rgba(55, 55, 55, .2);
+    }
+
+    .ivu-modal-wrap {
+        z-index: 1001;
+    }
+}
+
+.imgcomp-upload-list {
+    display: inline-block;
+    width: 60px;
+    height: 60px;
+    text-align: center;
+    line-height: 60px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    overflow: hidden;
+    background: #fff;
+    position: relative;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
+    margin-right: 4px;
+    vertical-align: top;
+
+    .imgcomp-upload-img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-position: center;
+        background-size: cover;
+    }
+
+    .imgcomp-upload-list-cover {
+        display: none;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: rgba(0, 0, 0, .6);
+    }
+
+    .imgcomp-upload-list-cover i {
+        color: #fff;
+        font-size: 24px;
+        cursor: pointer;
+        vertical-align: middle;
+        margin: 0;
+        transition: all .2s;
+    }
+
+    .imgcomp-upload-list-cover i:hover {
+        font-size: 28px;
+    }
+
+    .ivu-progress-outer {
+        background-color: rgba(0, 0, 0, 0.68);
+
+        .ivu-progress-inner {
+            width: 88%;
+        }
+    }
+}
+
+.imgcomp-upload-list:hover .imgcomp-upload-list-cover {
+    display: block;
+}
+
+.img-upload-foot {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    .img-upload-foot-input {
+        flex: 1;
+        text-align: left;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+
+        .img-upload-foot-httptitle {
+            cursor: pointer;
+            padding-left: 3px;
+            margin-right: 22px;
+        }
+    }
+}
+
+.add-box {
+    width: 60px;
+    height: 60px;
+    line-height: 60px;
+    display: inline-block;
+    background: #fff;
+    border: 1px dashed #dddee1;
+    border-radius: 4px;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    vertical-align: top;
+
+    .add-box-icon {
+        i {
+            vertical-align: middle;
+            padding-bottom: 2px;
+        }
+    }
+
+    .add-box-upload {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        color: #ffffff;
+        padding-top: 9px;
+        background: rgba(0, 0, 0, 0.6);
+
+        .add-box-item {
+            height: 22px;
+            line-height: 22px;
+            cursor: pointer;
+
+            .ivu-upload-drag, .ivu-upload-drag:hover {
+                background: transparent;
+                border: 0;
+                border-radius: 0;
+            }
+
+            span {
+                transition: all .2s;
+                font-size: 12px;
+            }
+        }
+
+        .add-box-item:hover {
+            span {
+                font-size: 14px;
+            }
+        }
+    }
+
+    em {
+        font-style: normal;
+    }
+}
+
+.add-box:hover {
+    border-color: rgba(0, 0, 0, .6);
+
+    .add-box-upload {
+        display: block;
+    }
+}
+
+.callback-add-box {
+    display: block;
+    width: auto;
+    height: 25px;
+    line-height: 25px;
+    border: 0;
+    background: transparent;
+
+    .add-box-icon {
+        display: none;
+    }
+
+    .add-box-upload {
+        display: block;
+        width: auto;
+        background: transparent;
+        color: #333;
+        padding: 0;
+
+        > div {
+            display: inline-block;
+            padding-right: 10px;
+        }
+    }
+}
+
+.browse-load {
+    margin: 20px;
+    text-align: center;
+}
+
+.browse-list {
+    max-height: 540px;
+    overflow: auto;
+
+    .browse-item {
+        margin: 10px 15px;
+        display: inline-block;
+        text-align: center;
+        cursor: pointer;
+        position: relative;
+
+        .browse-img {
+            width: 64px;
+            height: 64px;
+            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKoAAABxCAAAAABg5GeyAAACW0lEQVR4Ae3XVRLjMBAE0L3/rSwKM3OcSNPyLVYOLvM6UD0Bd03LVe9XH+RlhlRSSSWVVFJJJZVUUkkllVRSSSWVVFJJJZVUUkl9WyqppJJKKqmkkgpURP17xngOAR5NxW5wlJ9MaLQh83F4NHWmd/gZtdVBaOldfDB1bq5UpJFbFOC6LKnYrkRO209PAw+hIuzWB8Ep5es8HvYo4z4tE1X8UeRwlMM2D5Bzkc7kj6Bi3VTKDDwEeUcrMxrUvGDXTnHa6kK69SDN9sgq1clxKSbNHqqnYmdri81Q9QHf1JPt1Frncaib2XbiTKL2GkHaurnY9LOulMV0O7G6Kw+g9sw2ohhm62KezVJaaufjWC1TnOkr1exilJ7Ji0vxCCqO9V4UwV4PYr9+apouhGYLKfnahdpqegjmeoXOpXgANe70pKT6Zhu19qkY2nC0PZS527lQOyInqr8Uvc5jqfUb1X+PGh5IhW90S2quh3FQC2XRcF66TUkTXPcLKm5FtdR9RJq+2hWII7UpFtmsQLEyzsdJtkxxpr6gLotbUSlV9yeT0Trmzk2XPdUThLYarUbWOY9j04xXQ2u+pMZLYSumGmNUH3HbM9qOAwSHodN2Pks25F2j3aI7+IxqNsB+YLWb16ukSjiW4xNB0gMoMfApBS/XZQgi3p9/5RsiKNKZEOwYFVIF5VyTyD19sbyjIJiNJRZxpNbx2S8sGKvGZNHJBniBu9Wy5WxjGuQFqIAcBHiRGyt4ua5gSCWVVFJJJZVUUkkllVRSSSWVVFJJJZVUUkkllVRSSSWVVFI/AgO0SXIVYHeGAAAAAElFTkSuQmCC);
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
+
+        .browse-title {
+            display: block;
+            width: 64px;
+            margin-top: 5px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .browse-icon {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 64px;
+            font-size: 36px;
+            padding-top: 15px;
+            color: #ffffff;
+            background-color: rgba(0, 0, 0, 0.5);
+        }
+    }
+}
+
+.browse-list-disabled {
+    position: relative;
+}
+
+.browse-list-disabled:after {
+    position: absolute;
+    content: '';
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.9);
+    z-index: 1;
+}
diff --git a/resources/assets/sass/components/loading.scss b/resources/assets/sass/components/loading.scss
new file mode 100644
index 00000000..8846b392
--- /dev/null
+++ b/resources/assets/sass/components/loading.scss
@@ -0,0 +1,56 @@
+.common-loading {
+    transform-origin: center center;
+    width: 30px;
+    height: 30px;
+    max-width: 100%;
+    max-height: 100%;
+    margin: auto;
+    overflow: hidden;
+    animation: rotate 2s linear infinite;
+
+    .common-path {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+        stroke-linecap: round;
+        animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+    }
+}
+@keyframes rotate {
+    to {
+        -webkit-transform: rotate(1turn);
+        transform: rotate(1turn)
+    }
+}
+@keyframes dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0
+    }
+
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35
+    }
+
+    to {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124
+    }
+}
+@keyframes color {
+    0%, to {
+        stroke: #d62d20
+    }
+
+    40% {
+        stroke: #0057e7
+    }
+
+    66% {
+        stroke: #008744
+    }
+
+    80%, 90% {
+        stroke: #ffa700
+    }
+}
diff --git a/resources/assets/sass/components/scroller-y.scss b/resources/assets/sass/components/scroller-y.scss
new file mode 100755
index 00000000..7f9f816d
--- /dev/null
+++ b/resources/assets/sass/components/scroller-y.scss
@@ -0,0 +1,19 @@
+.app-scroller-y {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    .app-scroller-bottom {
+        height: 0;
+        margin: 0;
+        padding: 0;
+    }
+    &.static {
+        position: static;
+        flex: 1;
+    }
+}
diff --git a/resources/assets/sass/components/spinner.scss b/resources/assets/sass/components/spinner.scss
new file mode 100644
index 00000000..8238a0ed
--- /dev/null
+++ b/resources/assets/sass/components/spinner.scss
@@ -0,0 +1,20 @@
+.common-spinner {
+    display: none;
+    position: fixed;
+    z-index: 9999;
+    bottom: 20px;
+    right: 20px;
+    margin: 0 auto;
+    width: 30px;
+    height: 30px;
+
+    .common-circular {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
+    }
+}
diff --git a/resources/assets/sass/components/t-editor.scss b/resources/assets/sass/components/t-editor.scss
new file mode 100755
index 00000000..8782e8da
--- /dev/null
+++ b/resources/assets/sass/components/t-editor.scss
@@ -0,0 +1,98 @@
+.teditor-box,
+.teditor-transfer {
+    .tox {
+        &.tox-silver-sink {
+            z-index: 13000;
+        }
+    }
+}
+
+.teditor-box {
+    textarea {
+        opacity: 0;
+    }
+
+    .tox-tinymce {
+        box-shadow: none;
+        box-sizing: border-box;
+        border-color: #dddee1;
+        border-radius: 4px;
+        overflow: hidden;
+
+        .tox-statusbar {
+            span.tox-statusbar__branding {
+                a {
+                    display: none;
+                }
+            }
+        }
+    }
+}
+
+.teditor-transfer {
+    background-color: #ffffff;
+
+    .tox-toolbar {
+        > div:last-child {
+            > button:last-child {
+                margin-right: 64px;
+            }
+        }
+    }
+
+    .ivu-modal-header {
+        display: none;
+    }
+
+    .ivu-modal-close {
+        top: 7px;
+        z-index: 2;
+    }
+
+    .teditor-transfer-body {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+
+        textarea {
+            opacity: 0;
+        }
+
+        .tox-tinymce {
+            border: 0;
+
+            .tox-statusbar {
+                span.tox-statusbar__branding {
+                    a {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.teditor-loadstyle {
+    width: 100%;
+    height: 180px;
+    overflow: hidden;
+    position: relative;
+}
+
+.teditor-loadedstyle {
+    width: 100%;
+    max-height: inherit;
+    overflow: inherit;
+    position: relative;
+}
+
+.upload-control {
+    display: none;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+}
diff --git a/resources/assets/sass/components/tag-input.scss b/resources/assets/sass/components/tag-input.scss
new file mode 100755
index 00000000..d16682fe
--- /dev/null
+++ b/resources/assets/sass/components/tag-input.scss
@@ -0,0 +1,73 @@
+.common-tag-input {
+    display: inline-block;
+    width: 100%;
+    min-height: 32px;
+    padding: 2px 7px;
+    border: 1px solid #dddee1;
+    border-radius: 4px;
+    color: #495060;
+    background: #fff;
+    position: relative;
+    cursor: text;
+    vertical-align: middle;
+    line-height: normal;
+    -webkit-transition: border .2s ease-in-out, background .2s ease-in-out, -webkit-box-shadow .2s ease-in-out;
+    transition: border .2s ease-in-out, background .2s ease-in-out, -webkit-box-shadow .2s ease-in-out;
+
+    .tags-item, .tags-input {
+        position: relative;
+        float: left;
+        color: #495060;
+        background-color: #f1f8ff;
+        border-radius: 3px;
+        line-height: 22px;
+        margin: 2px 6px 2px 0;
+        padding: 0 20px 0 6px;
+
+        .tags-content {
+            line-height: 22px;
+        }
+
+        .tags-del {
+            width: 20px;
+            height: 22px;
+            text-align: center;
+            cursor: pointer;
+            position: absolute;
+            top: -1px;
+            right: 0;
+        }
+    }
+
+    .tags-input {
+        max-width: 80%;
+        padding: 0;
+        background-color: inherit;
+        border: none;
+        color: inherit;
+        height: 22px;
+        line-height: 22px;
+        -webkit-appearance: none;
+        outline: none;
+        resize: none;
+        overflow: hidden;
+    }
+
+    .tags-input::placeholder {
+        color: #bbbbbb;
+    }
+
+    .tags-placeholder {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: -1;
+        color: #ffffff00;
+    }
+}
+.common-tag-input::after {
+    content: "";
+    display: block;
+    height: 0;
+    clear: both;
+}
diff --git a/resources/assets/sass/common-avatar.scss b/resources/assets/sass/components/user-avatar.scss
similarity index 100%
rename from resources/assets/sass/common-avatar.scss
rename to resources/assets/sass/components/user-avatar.scss
diff --git a/resources/assets/sass/components/user-input.scss b/resources/assets/sass/components/user-input.scss
new file mode 100755
index 00000000..30db8be5
--- /dev/null
+++ b/resources/assets/sass/components/user-input.scss
@@ -0,0 +1,66 @@
+.common-user {
+    position: relative;
+    .common-user-loading {
+        position: absolute;
+        top: 2px;
+        bottom: 0;
+        right: 10px;
+        display: flex;
+        align-items: center;
+        .common-loading {
+            width: 14px;
+            height: 14px;
+        }
+    }
+    &.hidden-input {
+        .ivu-select-selection {
+            padding: 0 4px;
+            .ivu-select-input {
+                display: none;
+            }
+        }
+    }
+}
+.common-user-transfer {
+    .user-input-option {
+        display: flex;
+        align-items: center;
+        .user-input-avatar {
+            .ivu-avatar {
+                width: 26px;
+                height: 26px;
+            }
+        }
+        .user-input-nickname {
+            margin-left: 10px;
+            flex: 1;
+        }
+        .user-input-userid {
+            margin-left: 10px;
+            font-size: 12px;
+            color: #cccccc;
+            transition: margin 0.1s;
+        }
+    }
+    .ivu-select-item {
+        &.ivu-select-item-selected {
+            &:after {
+                top: 8px;
+            }
+            .user-input-option {
+                .user-input-userid {
+                    margin-right: 16px;
+                }
+            }
+        }
+    }
+    .user-drop-prepend {
+        text-align: center;
+        color: #c5c8ce;
+        line-height: 20px;
+        padding-bottom: 5px;
+        font-size: 12px;
+        border-bottom: 1px solid #f1f1f1;
+        margin-bottom: 5px;
+    }
+}
diff --git a/resources/assets/sass/dialog-wrapper.scss b/resources/assets/sass/dialog-wrapper.scss
deleted file mode 100644
index 99e2d5ad..00000000
--- a/resources/assets/sass/dialog-wrapper.scss
+++ /dev/null
@@ -1,100 +0,0 @@
-.dialog-wrapper {
-    display: flex;
-    flex-direction: column;
-    background-color: #ffffff;
-    z-index: 1;
-    .dialog-title {
-        display: flex;
-        align-items: center;
-        padding: 0 32px;
-        margin-top: 20px;
-        > h2 {
-            font-size: 18px;
-            font-weight: 600;
-        }
-        > em {
-            font-style: normal;
-            font-size: 17px;
-            font-weight: 500;
-            padding-left: 6px;
-        }
-    }
-    .dialog-chat {
-        flex: 1;
-        padding: 0 32px;
-        margin-top: 18px;
-    }
-    .dialog-footer {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
-        padding: 0 28px;
-        margin-bottom: 20px;
-        .dialog-newmsg {
-            display: none;
-            height: 30px;
-            line-height: 30px;
-            color: #ffffff;
-            font-size: 12px;
-            background-color: rgba(0, 0, 0, 0.6);
-            padding: 0 12px;
-            margin-bottom: 20px;
-            margin-right: 10px;
-            border-radius: 16px;
-            cursor: pointer;
-            z-index: 2;;
-        }
-        .dialog-input {
-            background-color: #F4F5F7;
-            padding: 10px 12px;
-            border-radius: 10px;
-            .ivu-input {
-                border: 0;
-                resize: none;
-                background-color: transparent;
-                &:focus {
-                    box-shadow: none;
-                }
-            }
-        }
-        .chat-upload {
-            display: none;
-            width: 0;
-            height: 0;
-            overflow: hidden;
-        }
-        &.newmsg {
-            margin-top: -50px;
-            .dialog-newmsg {
-                display: block;
-            }
-        }
-    }
-    .drag-over {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        z-index: 3;
-        background-color: rgba(255, 255, 255, 0.78);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        &:before {
-            content: "";
-            position: absolute;
-            top: 16px;
-            left: 16px;
-            right: 16px;
-            bottom: 16px;
-            border: 2px dashed #7b7b7b;
-            border-radius: 12px;
-        }
-        .drag-text {
-            padding: 12px;
-            font-size: 18px;
-            color: #666666;
-        }
-    }
-}
diff --git a/resources/assets/sass/main.scss b/resources/assets/sass/main.scss
deleted file mode 100755
index d91b7de2..00000000
--- a/resources/assets/sass/main.scss
+++ /dev/null
@@ -1,689 +0,0 @@
-body {
-    overflow: hidden;
-    .ivu-input,
-    .ivu-select-selection {
-        border-color: #e8e8e8;
-    }
-}
-
-*[hidden="hidden"] {
-    display: none !important;
-}
-
-.icon-loading {
-    animation: icon-loading-load 0.6s infinite linear;
-}
-
-@keyframes icon-loading-load {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.ivu-modal-wrap {
-    &.simple-modal {
-        .ivu-modal {
-            top: 100px;
-            padding-bottom: 100px;
-            @media (max-height: 900px) {
-                top: 35px;
-                padding-bottom: 35px;
-            }
-            &.ivu-modal-fullscreen {
-                top: 0;
-            }
-            .ivu-modal-header,
-            .ivu-modal-footer {
-                border-color: transparent;
-            }
-
-            .ivu-modal-header {
-                padding: 22px 24px 20px;
-                .ivu-modal-header-inner {
-                    font-size: 18px;
-                }
-            }
-            .ivu-modal-body {
-                padding: 16px 32px 2px;
-            }
-            .ivu-modal-footer {
-                padding: 20px 30px 22px;
-                .ivu-btn {
-                    height: 34px;
-                    line-height: 32px;
-                    min-width: 94px;
-                }
-            }
-            .ivu-modal-content {
-                border-radius: 18px;
-                .ivu-modal-close {
-                    .ivu-icon-ios-close {
-                        font-size: 38px;
-                        top: 3px;
-                        right: 2px;
-                        transition: all 0.2s;
-                    }
-                    &:hover {
-                        .ivu-icon-ios-close {
-                            transform: rotate(-90deg);
-                        }
-                    }
-                }
-            }
-        }
-
-        .form-network-add-tabs {
-            .ivu-tabs-tabpane {
-                padding: 10px 6px 0;
-            }
-        }
-        .form-network-add-in-out {
-            padding: 0 6px;
-            .select-in-type {
-                span.ivu-radio {
-                    display: none;
-                }
-                .select-in-type-item-checked {
-                    color: #2d8cf0;
-                    border: 1px solid #2d8cf0 !important;
-                }
-                .select-in-type-item {
-                    display: flex;
-                    align-items: center;
-                    min-width: 90px;
-                    border: 1px solid #E8EBEE;
-                    border-radius: 4px;
-                    padding: 0 12px;
-                    margin: 0 8px 0 0;
-                    > span {
-                        flex: 1;
-                    }
-                    &:hover {
-                        cursor: pointer;
-                    }
-                    .select-in-type-icon {
-                        margin-left: 12px;
-                    }
-                }
-            }
-            .select-in-node {
-                margin-top: 18px;
-            }
-        }
-    }
-    .ivu-modal-confirm {
-        .ivu-modal-confirm-body {
-            > div {
-                word-break: break-all;
-            }
-        }
-    }
-}
-
-.modal-info-show {
-    display: flex;
-    .column {
-        color: #6D6D6D;
-        margin: 5px 0;
-        min-width: 70px;
-        max-width: 100px;
-        text-align: right;
-    }
-    .value {
-        flex: 1;
-        width: 0;
-        color: #414141;
-        margin: 5px 0 5px 5px;
-        word-break: break-all;
-    }
-}
-
-.ivu-select-dropdown {
-    max-height: 360px;
-    &.select-node {
-        .ivu-select-item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            .option-title {
-                flex: 1;
-            }
-            .ivu-tag {
-                margin-left: 18px;
-                margin-right: 0;
-                transform: scale(0.9);
-                transform-origin: right center;
-            }
-        }
-    }
-}
-
-.ivu-tooltip-popper {
-    .ivu-tooltip-inner {
-        white-space: normal;
-    }
-}
-
-.ivu-table {
-    table {
-        width: 100% !important;
-        .ivu-table-cell {
-            padding-left: 12px;
-            padding-right: 12px;
-        }
-        thead {
-            .ivu-table-cell {
-                display: block;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
-        }
-        tbody {
-            .tree-icon-loading {
-                .ivu-table-cell {
-                    display: flex;
-                    align-items: center;
-                    .ivu-table-cell-tree {
-                        margin-right: 6px;
-                    }
-                }
-            }
-        }
-    }
-    .td-ellipsis {
-        display: flex;
-        align-items: center;
-        max-width: 100%;
-        .remark-text {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            align-items: center;
-            white-space: nowrap;
-            height: 20px;
-            line-height: 20px;
-            margin-right: 6px;
-        }
-        .remark-icon {
-            display: none;
-            font-size: 16px;
-            cursor: pointer;
-        }
-        .remark-tag {
-            display: inline-block;
-            height: 22px;
-            line-height: 22px;
-            margin: 2px 4px 2px 0;
-            border: 1px solid #e8eaec;
-            border-radius: 3px;
-            background: #f7f7f7;
-            font-size: 12px;
-            vertical-align: middle;
-            opacity: 1;
-            color: #515a6e;
-            padding: 0 4px;
-            white-space: nowrap;
-            overflow: visible;
-            &.pointer-tag {
-                cursor: pointer;
-                color: #1890ff;
-                background: #e6f7ff;
-                border-color: #91d5ff;
-            }
-        }
-        .icon-tooltip {
-            .ivu-tooltip-rel {
-                display: flex;
-                align-items: center;
-            }
-        }
-    }
-    .td-action {
-        max-width: 100%;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        vertical-align: middle;
-        .td-action-container {
-            display: inline-block;
-            a {
-                font-size: 12px;
-                padding: 0 5px;
-            }
-        }
-    }
-    .ivu-table-row-hover {
-        &:hover {
-            .td-ellipsis {
-                .remark-icon {
-                    display: inline-block;
-                }
-            }
-        }
-    }
-    &:before {
-        background-color: #efefef;
-    }
-}
-
-.common-user {
-    position: relative;
-    .common-user-loading {
-        position: absolute;
-        top: 2px;
-        bottom: 0;
-        right: 10px;
-        display: flex;
-        align-items: center;
-        .common-loading {
-            width: 14px;
-            height: 14px;
-        }
-    }
-    &.hidden-input {
-        .ivu-select-selection {
-            padding: 0 4px;
-            .ivu-select-input {
-                display: none;
-            }
-        }
-    }
-}
-
-.common-user-transfer {
-    .user-input-option {
-        display: flex;
-        align-items: center;
-        .user-input-avatar {
-            .ivu-avatar {
-                width: 26px;
-                height: 26px;
-            }
-        }
-        .user-input-nickname {
-            margin-left: 10px;
-            flex: 1;
-        }
-        .user-input-userid {
-            margin-left: 10px;
-            font-size: 12px;
-            color: #cccccc;
-            transition: margin 0.1s;
-        }
-    }
-    .ivu-select-item {
-        &.ivu-select-item-selected {
-            &:after {
-                top: 8px;
-            }
-            .user-input-option {
-                .user-input-userid {
-                    margin-right: 16px;
-                }
-            }
-        }
-    }
-    .user-drop-prepend {
-        text-align: center;
-        color: #c5c8ce;
-        line-height: 20px;
-        padding-bottom: 5px;
-        font-size: 12px;
-        border-bottom: 1px solid #f1f1f1;
-        margin-bottom: 5px;
-    }
-}
-
-// tinymce
-.teditor-box,
-.teditor-transfer {
-    .tox {
-        &.tox-silver-sink {
-            z-index: 13000;
-        }
-    }
-}
-
-.teditor-box {
-    textarea {
-        opacity: 0;
-    }
-
-    .tox-tinymce {
-        box-shadow: none;
-        box-sizing: border-box;
-        border-color: #dddee1;
-        border-radius: 4px;
-        overflow: hidden;
-
-        .tox-statusbar {
-            span.tox-statusbar__branding {
-                a {
-                    display: none;
-                }
-            }
-        }
-    }
-}
-
-.teditor-transfer {
-    background-color: #ffffff;
-
-    .tox-toolbar {
-        > div:last-child {
-            > button:last-child {
-                margin-right: 64px;
-            }
-        }
-    }
-
-    .ivu-modal-header {
-        display: none;
-    }
-
-    .ivu-modal-close {
-        top: 7px;
-        z-index: 2;
-    }
-
-    .teditor-transfer-body {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        padding: 0;
-        margin: 0;
-
-        textarea {
-            opacity: 0;
-        }
-
-        .tox-tinymce {
-            border: 0;
-
-            .tox-statusbar {
-                span.tox-statusbar__branding {
-                    a {
-                        display: none;
-                    }
-                }
-            }
-        }
-    }
-}
-
-.setting-item {
-    .ivu-input,
-    .ivu-select-selection {
-        max-width: 460px;
-    }
-    .form-tip {
-        color: #999999;
-    }
-    .setting-color {
-        max-width: 600px;
-        margin-bottom: 12px;
-        > div {
-            text-align: center;
-            padding-right: 12px;
-            &:first-child {
-                text-align: left;
-            }
-            &:last-child {
-                padding-right: 0;
-                width: 60px;
-                flex: auto;
-                flex-shrink: 0;
-                max-width: 60px;
-            }
-            .ivu-color-picker {
-                width: 100%;
-            }
-        }
-        .information {
-            color: #999999;
-        }
-    }
-    .setting-footer {
-        > button {
-            height: 34px;
-            line-height: 32px;
-            min-width: 94px;
-        }
-    }
-    &.submit {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        .setting-footer {
-            position: absolute;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            z-index: 1;
-            padding: 16px 24px 0;
-            border-top: 1px solid #F4F4F5;
-        }
-    }
-}
-
-.dialog-scroller {
-    position: relative;
-    overflow: auto;
-    .dialog-list {
-        > ul {
-            > li {
-                display: flex;
-                flex-direction: row;
-                align-items: flex-end;
-                list-style: none;
-                margin-bottom: 16px;
-                .dialog-avatar {
-                    position: relative;
-                    margin-bottom: 20px;
-                    flex-shrink: 0;
-                    width: 30px;
-                    height: 30px;
-                }
-                .dialog-view {
-                    max-width: 70%;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: flex-start;
-                    margin: 0 0 0 8px;
-                    .dialog-content {
-                        color: #333333;
-                        background-color: #F4F5F7;
-                        padding: 8px;
-                        border-radius: 6px 6px 6px 0;
-                        &.loading {
-                            display: flex;
-                            .common-loading {
-                                width: 20px;
-                                height: 20px;
-                                margin: 4px;
-                            }
-                        }
-                        &.file {
-                            display: inline-block;
-                            .file-box {
-                                background-color: #ffffff;
-                                display: flex;
-                                align-items: center;
-                                padding: 10px 14px;
-                                border-radius: 3px;
-                                width: 220px;
-                                .file-thumb {
-                                    width: 36px;
-                                }
-                                .file-info {
-                                    margin-left: 12px;
-                                    display: flex;
-                                    flex-direction: column;
-                                    justify-content: center;
-                                    .file-name {
-                                        color: #333333;
-                                        font-size: 14px;
-                                        line-height: 18px;
-                                        word-break: break-all;
-                                        text-overflow: ellipsis;
-                                        overflow: hidden;
-                                        display: -webkit-box;
-                                        -webkit-line-clamp: 2;
-                                        -webkit-box-orient: vertical;
-                                    }
-                                    .file-size {
-                                        padding-top: 4px;
-                                        color: #666666;
-                                        font-size: 14px;
-                                    }
-                                }
-                            }
-                        }
-                        &.img {
-                            padding: 0;
-                            display: flex;
-                            max-width: 220px;
-                            max-height: 220px;
-                            border-radius: 6px;
-                            background-color: transparent;
-                            overflow: hidden;
-                            .file-img {
-                                display: flex;
-                            }
-                        }
-                        &.unknown {
-                            text-decoration: underline;
-                        }
-                    }
-                    .dialog-foot {
-                        display: flex;
-                        align-items: center;
-                        padding-top: 4px;
-                        height: 21px;
-                        line-height: 1;
-                        .common-loading {
-                            margin: 0 2px;
-                            width: 10px;
-                            height: 10px;
-                        }
-                        .time {
-                            color: #bbbbbb;
-                            font-size: 12px;
-                        }
-                        .done {
-                            display: none;
-                            margin-left: 4px;
-                            transform: scale(0.9);
-                            font-size: 12px;
-                            color: #87d068;
-                        }
-                        .percent {
-                            display: none;
-                            margin-left: 4px;
-                            cursor: pointer;
-                        }
-                    }
-                }
-                &.loading {
-                    padding: 12px 0;
-                    justify-content: center;
-                    .common-loading {
-                        margin: 0;
-                        width: 18px;
-                        height: 18px;
-                    }
-                }
-                &.nothing {
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
-                    color: #999999;
-                }
-                &.bottom {
-                    height: 0;
-                    margin: 0;
-                    padding: 0;
-                }
-                &.self {
-                    flex-direction: row-reverse;
-                    .dialog-view {
-                        align-items: flex-end;
-                        margin: 0 8px 0 0;
-                        .dialog-content {
-                            color: #ffffff;
-                            background-color: #2d8cf0;
-                            border-radius: 6px 6px 0 6px;
-                            &.file {
-                                background-color: #F4F5F7;
-                            }
-                            &.img {
-                                border-radius: 6px;
-                                background-color: transparent;
-                            }
-                        }
-                        .dialog-foot {
-                            .done {
-                                display: inline-block;
-                            }
-                            .percent {
-                                display: inline-block;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-.dialog-readbox {
-    display: flex;
-    position: relative;
-    .read,
-    .unread {
-        flex: 1;
-        max-height: 300px;
-        overflow: auto;
-        > li {
-            list-style: none;
-            margin-bottom: 12px;
-            .common-avatar {
-                width: 100%;
-            }
-            &:last-child {
-                margin-bottom: 6px;
-            }
-            &.read-title {
-                > em {
-                    font-size: 18px;
-                    font-weight: 600;
-                    font-style: normal;
-                    padding-right: 6px;
-                }
-            }
-        }
-    }
-    .unread {
-        > li {
-            padding-left: 16px;
-        }
-    }
-    &:before {
-        content: "";
-        position: absolute;
-        left: 50%;
-        top: 0;
-        bottom: 0;
-        width: 1px;
-        background-color: #F4F4F5;
-    }
-}
-
diff --git a/resources/assets/sass/messenger-wrapper.scss b/resources/assets/sass/messenger-wrapper.scss
deleted file mode 100644
index 1c366735..00000000
--- a/resources/assets/sass/messenger-wrapper.scss
+++ /dev/null
@@ -1,252 +0,0 @@
-.messenger-wrapper {
-    flex: 1;
-    display: flex;
-    align-items: flex-start;
-    .messenger-select {
-        position: relative;
-        height: 100%;
-        width: 30%;
-        min-width: 240px;
-        max-width: 320px;
-        flex-shrink: 0;
-        display: flex;
-        flex-direction: column;
-        &:after {
-            content: "";
-            position: absolute;
-            top: 0;
-            right: 0;
-            height: 100%;
-            width: 1px;
-            background-color: #f2f2f2;
-        }
-        .messenger-search {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 54px;
-            padding: 0 12px;
-            flex-shrink: 0;
-            .search-wrapper {
-                flex: 1;
-                background-color: #F7F7F7;
-                padding: 0 8px;
-                margin: 0 4px;
-                border-radius: 12px;
-                overflow: hidden;
-                .ivu-input {
-                    border-color: transparent;
-                    background-color: transparent;
-                    &:hover,
-                    &:focus {
-                        box-shadow: none;
-                    }
-                }
-            }
-        }
-        .messenger-list {
-            flex: 1;
-            height: 0;
-            width: 100%;
-            overflow-x: hidden;
-            overflow-y: auto;
-            > ul {
-                &.dialog {
-                    > li {
-                        display: flex;
-                        flex-direction: row;
-                        align-items: center;
-                        height: 80px;
-                        padding: 0 12px;
-                        position: relative;
-                        cursor: pointer;
-                        list-style: none;
-                        &.active {
-                            background-color: #F4F5F7;
-                        }
-                        &.loading {
-                            margin: 0;
-                            height: 52px;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            .common-loading {
-                                width: 20px;
-                                height: 20px;
-                                margin: 0;
-                            }
-                        }
-                        .user-avatar,
-                        .icon-avatar {
-                            width: 46px;
-                            height: 46px;
-                            flex-grow: 0;
-                            flex-shrink: 0;
-                        }
-                        .icon-avatar {
-                            line-height: 46px;
-                            border-radius: 50%;
-                            font-size: 26px;
-                            background-color: #61B2F9;
-                            color: #ffffff;
-                        }
-                        .dialog-box {
-                            flex: 1;
-                            display: flex;
-                            flex-direction: column;
-                            padding-left: 12px;
-                            .dialog-title {
-                                display: flex;
-                                flex-direction: row;
-                                align-items: center;
-                                justify-content: space-between;
-                                line-height: 24px;
-                                > span {
-                                    flex: 1;
-                                    max-width: 130px;
-                                    color: #333333;
-                                    font-size: 14px;
-                                    white-space: nowrap;
-                                    overflow: hidden;
-                                    text-overflow: ellipsis;
-                                }
-                                > i {
-                                    margin-left: 8px;
-                                    transform: scale(0.9);
-                                    font-size: 12px;
-                                    color: #87d068;
-                                }
-                                > em {
-                                    margin-left: 8px;
-                                    font-style: normal;
-                                    color: #999999;
-                                    font-size: 12px;
-                                }
-                            }
-                            .dialog-text {
-                                max-width: 170px;
-                                color: #999999;
-                                font-size: 12px;
-                                line-height: 24px;
-                                white-space: nowrap;
-                                overflow: hidden;
-                                text-overflow: ellipsis;
-                            }
-                        }
-                        .dialog-num {
-                            position: absolute;
-                            top: 10px;
-                            left: 42px;
-                            font-size: 12px;
-                            transform: scale(0.8);
-                        }
-                    }
-                }
-                &.contacts {
-                    > li {
-                        list-style: none;
-                        margin-left: 24px;
-                        position: relative;
-                        .label {
-                            padding-left: 4px;
-                            margin-top: 6px;
-                            margin-bottom: 6px;
-                            height: 34px;
-                            line-height: 34px;
-                            border-bottom: 1px solid #efefef;
-                        }
-                        &.loading {
-                            margin: 0;
-                            height: 52px;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            .common-loading {
-                                width: 20px;
-                                height: 20px;
-                                margin: 0;
-                            }
-                        }
-                        > ul {
-                            > li {
-                                list-style: none;
-                                display: flex;
-                                flex-direction: row;
-                                align-items: center;
-                                height: 52px;
-                                cursor: pointer;
-                                .avatar {
-                                    flex-grow: 0;
-                                    flex-shrink: 0;
-                                    width: 30px;
-                                    height: 30px;
-                                }
-                                .nickname {
-                                    padding: 0 12px;
-                                    font-size: 14px;
-                                    white-space: nowrap;
-                                    overflow: hidden;
-                                    text-overflow: ellipsis;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-        .messenger-menu {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 54px;
-            flex-shrink: 0;
-            border-top: 1px solid #f2f2f2;
-            > i {
-                cursor: pointer;
-                font-size: 28px;
-                margin: 0 24px;
-                color: #aaaaaa;
-                opacity: 0.9;
-                &.active {
-                    opacity: 1;
-                    color: #2d8cf0;
-                }
-                &:hover {
-                    opacity: 1;
-                }
-            }
-        }
-    }
-    .messenger-msg {
-        flex: 1;
-        width: 0;
-        height: 100%;
-        display: flex;
-        .dialog-wrapper,
-        .dialog-no {
-            flex: 1;
-        }
-        .dialog-no {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            .dialog-no-icon {
-                background-color: #f4f5f7;
-                padding: 20px;
-                border-radius: 50%;
-                .ivu-icon {
-                    color: #d1d8dd;
-                    font-size: 46px;
-                }
-            }
-            .dialog-no-text {
-                margin-top: 16px;
-                color: #bec6cc;
-                background-color: #f4f5f7;
-                padding: 4px 15px;
-                border-radius: 14px;
-            }
-        }
-    }
-}
diff --git a/resources/assets/sass/pages/_.scss b/resources/assets/sass/pages/_.scss
new file mode 100755
index 00000000..7ad619d3
--- /dev/null
+++ b/resources/assets/sass/pages/_.scss
@@ -0,0 +1,10 @@
+@import "common.scss";
+@import "page-calendar.scss";
+@import "page-dashboard.scss";
+@import "page-login.scss";
+@import "page-manage.scss";
+@import "page-messenger.scss";
+@import "page-project.scss";
+@import "page-setting.scss";
+
+@import "components/_";
diff --git a/resources/assets/sass/pages/common.scss b/resources/assets/sass/pages/common.scss
new file mode 100755
index 00000000..7072888c
--- /dev/null
+++ b/resources/assets/sass/pages/common.scss
@@ -0,0 +1,273 @@
+body {
+    overflow: hidden;
+    .ivu-input,
+    .ivu-select-selection {
+        border-color: #e8e8e8;
+    }
+}
+
+*[hidden="hidden"] {
+    display: none !important;
+}
+
+.icon-loading {
+    animation: icon-loading-load 0.6s infinite linear;
+}
+
+@keyframes icon-loading-load {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.ivu-modal-wrap {
+    &.simple-modal {
+        .ivu-modal {
+            top: 100px;
+            padding-bottom: 100px;
+            @media (max-height: 900px) {
+                top: 35px;
+                padding-bottom: 35px;
+            }
+            &.ivu-modal-fullscreen {
+                top: 0;
+            }
+            .ivu-modal-header,
+            .ivu-modal-footer {
+                border-color: transparent;
+            }
+
+            .ivu-modal-header {
+                padding: 22px 24px 20px;
+                .ivu-modal-header-inner {
+                    font-size: 18px;
+                }
+            }
+            .ivu-modal-body {
+                padding: 16px 32px 2px;
+            }
+            .ivu-modal-footer {
+                padding: 20px 30px 22px;
+                .ivu-btn {
+                    height: 34px;
+                    line-height: 32px;
+                    min-width: 94px;
+                }
+            }
+            .ivu-modal-content {
+                border-radius: 18px;
+                .ivu-modal-close {
+                    .ivu-icon-ios-close {
+                        font-size: 38px;
+                        top: 3px;
+                        right: 2px;
+                        transition: all 0.2s;
+                    }
+                    &:hover {
+                        .ivu-icon-ios-close {
+                            transform: rotate(-90deg);
+                        }
+                    }
+                }
+            }
+        }
+
+        .form-network-add-tabs {
+            .ivu-tabs-tabpane {
+                padding: 10px 6px 0;
+            }
+        }
+        .form-network-add-in-out {
+            padding: 0 6px;
+            .select-in-type {
+                span.ivu-radio {
+                    display: none;
+                }
+                .select-in-type-item-checked {
+                    color: #2d8cf0;
+                    border: 1px solid #2d8cf0 !important;
+                }
+                .select-in-type-item {
+                    display: flex;
+                    align-items: center;
+                    min-width: 90px;
+                    border: 1px solid #E8EBEE;
+                    border-radius: 4px;
+                    padding: 0 12px;
+                    margin: 0 8px 0 0;
+                    > span {
+                        flex: 1;
+                    }
+                    &:hover {
+                        cursor: pointer;
+                    }
+                    .select-in-type-icon {
+                        margin-left: 12px;
+                    }
+                }
+            }
+            .select-in-node {
+                margin-top: 18px;
+            }
+        }
+    }
+    .ivu-modal-confirm {
+        .ivu-modal-confirm-body {
+            > div {
+                word-break: break-all;
+            }
+        }
+    }
+}
+
+.modal-info-show {
+    display: flex;
+    .column {
+        color: #6D6D6D;
+        margin: 5px 0;
+        min-width: 70px;
+        max-width: 100px;
+        text-align: right;
+    }
+    .value {
+        flex: 1;
+        width: 0;
+        color: #414141;
+        margin: 5px 0 5px 5px;
+        word-break: break-all;
+    }
+}
+
+.ivu-select-dropdown {
+    max-height: 360px;
+    &.select-node {
+        .ivu-select-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .option-title {
+                flex: 1;
+            }
+            .ivu-tag {
+                margin-left: 18px;
+                margin-right: 0;
+                transform: scale(0.9);
+                transform-origin: right center;
+            }
+        }
+    }
+}
+
+.ivu-tooltip-popper {
+    .ivu-tooltip-inner {
+        white-space: normal;
+    }
+}
+
+.ivu-table {
+    table {
+        width: 100% !important;
+        .ivu-table-cell {
+            padding-left: 12px;
+            padding-right: 12px;
+        }
+        thead {
+            .ivu-table-cell {
+                display: block;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+        tbody {
+            .tree-icon-loading {
+                .ivu-table-cell {
+                    display: flex;
+                    align-items: center;
+                    .ivu-table-cell-tree {
+                        margin-right: 6px;
+                    }
+                }
+            }
+        }
+    }
+    .td-ellipsis {
+        display: flex;
+        align-items: center;
+        max-width: 100%;
+        .remark-text {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            align-items: center;
+            white-space: nowrap;
+            height: 20px;
+            line-height: 20px;
+            margin-right: 6px;
+        }
+        .remark-icon {
+            display: none;
+            font-size: 16px;
+            cursor: pointer;
+        }
+        .remark-tag {
+            display: inline-block;
+            height: 22px;
+            line-height: 22px;
+            margin: 2px 4px 2px 0;
+            border: 1px solid #e8eaec;
+            border-radius: 3px;
+            background: #f7f7f7;
+            font-size: 12px;
+            vertical-align: middle;
+            opacity: 1;
+            color: #515a6e;
+            padding: 0 4px;
+            white-space: nowrap;
+            overflow: visible;
+            &.pointer-tag {
+                cursor: pointer;
+                color: #1890ff;
+                background: #e6f7ff;
+                border-color: #91d5ff;
+            }
+        }
+        .icon-tooltip {
+            .ivu-tooltip-rel {
+                display: flex;
+                align-items: center;
+            }
+        }
+    }
+    .td-action {
+        max-width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        vertical-align: middle;
+        .td-action-container {
+            display: inline-block;
+            a {
+                font-size: 12px;
+                padding: 0 5px;
+            }
+        }
+    }
+    .ivu-table-row-hover {
+        &:hover {
+            .td-ellipsis {
+                .remark-icon {
+                    display: inline-block;
+                }
+            }
+        }
+    }
+    &:before {
+        background-color: #efefef;
+    }
+}
+
+
+
diff --git a/resources/assets/sass/pages/components/_.scss b/resources/assets/sass/pages/components/_.scss
new file mode 100755
index 00000000..81a05159
--- /dev/null
+++ b/resources/assets/sass/pages/components/_.scss
@@ -0,0 +1,5 @@
+@import "dialog-wrapper.scss";
+@import "project-list.scss";
+@import "task-add.scss";
+@import "task-add-simple.scss";
+@import "task-priority.scss";
diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
new file mode 100644
index 00000000..3806c532
--- /dev/null
+++ b/resources/assets/sass/pages/components/dialog-wrapper.scss
@@ -0,0 +1,315 @@
+.dialog-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    background-color: #ffffff;
+    z-index: 1;
+    .dialog-title {
+        display: flex;
+        align-items: center;
+        padding: 0 32px;
+        margin-top: 20px;
+        > h2 {
+            font-size: 18px;
+            font-weight: 600;
+        }
+        > em {
+            font-style: normal;
+            font-size: 17px;
+            font-weight: 500;
+            padding-left: 6px;
+        }
+    }
+    .dialog-scroller {
+        position: relative;
+        flex: 1;
+        padding: 0 32px;
+        margin-top: 18px;
+        overflow: auto;
+        .dialog-list {
+            > ul {
+                > li {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: flex-end;
+                    list-style: none;
+                    margin-bottom: 16px;
+                    .dialog-avatar {
+                        position: relative;
+                        margin-bottom: 20px;
+                        flex-shrink: 0;
+                        width: 30px;
+                        height: 30px;
+                    }
+                    .dialog-view {
+                        max-width: 70%;
+                        display: flex;
+                        flex-direction: column;
+                        align-items: flex-start;
+                        margin: 0 0 0 8px;
+                        .dialog-content {
+                            color: #333333;
+                            background-color: #F4F5F7;
+                            padding: 8px;
+                            border-radius: 6px 6px 6px 0;
+                            &.loading {
+                                display: flex;
+                                .common-loading {
+                                    width: 20px;
+                                    height: 20px;
+                                    margin: 4px;
+                                }
+                            }
+                            &.file {
+                                display: inline-block;
+                                .file-box {
+                                    background-color: #ffffff;
+                                    display: flex;
+                                    align-items: center;
+                                    padding: 10px 14px;
+                                    border-radius: 3px;
+                                    width: 220px;
+                                    .file-thumb {
+                                        width: 36px;
+                                    }
+                                    .file-info {
+                                        margin-left: 12px;
+                                        display: flex;
+                                        flex-direction: column;
+                                        justify-content: center;
+                                        .file-name {
+                                            color: #333333;
+                                            font-size: 14px;
+                                            line-height: 18px;
+                                            word-break: break-all;
+                                            text-overflow: ellipsis;
+                                            overflow: hidden;
+                                            display: -webkit-box;
+                                            -webkit-line-clamp: 2;
+                                            -webkit-box-orient: vertical;
+                                        }
+                                        .file-size {
+                                            padding-top: 4px;
+                                            color: #666666;
+                                            font-size: 14px;
+                                        }
+                                    }
+                                }
+                            }
+                            &.img {
+                                padding: 0;
+                                display: flex;
+                                max-width: 220px;
+                                max-height: 220px;
+                                border-radius: 6px;
+                                background-color: transparent;
+                                overflow: hidden;
+                                .file-img {
+                                    display: flex;
+                                }
+                            }
+                            &.unknown {
+                                text-decoration: underline;
+                            }
+                        }
+                        .dialog-foot {
+                            display: flex;
+                            align-items: center;
+                            padding-top: 4px;
+                            height: 21px;
+                            line-height: 1;
+                            .common-loading {
+                                margin: 0 2px;
+                                width: 10px;
+                                height: 10px;
+                            }
+                            .time {
+                                color: #bbbbbb;
+                                font-size: 12px;
+                            }
+                            .done {
+                                display: none;
+                                margin-left: 4px;
+                                transform: scale(0.9);
+                                font-size: 12px;
+                                color: #87d068;
+                            }
+                            .percent {
+                                display: none;
+                                margin-left: 4px;
+                                cursor: pointer;
+                            }
+                        }
+                    }
+                    &.loading {
+                        padding: 12px 0;
+                        justify-content: center;
+                        .common-loading {
+                            margin: 0;
+                            width: 18px;
+                            height: 18px;
+                        }
+                    }
+                    &.nothing {
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+                        color: #999999;
+                    }
+                    &.bottom {
+                        height: 0;
+                        margin: 0;
+                        padding: 0;
+                    }
+                    &.self {
+                        flex-direction: row-reverse;
+                        .dialog-view {
+                            align-items: flex-end;
+                            margin: 0 8px 0 0;
+                            .dialog-content {
+                                color: #ffffff;
+                                background-color: #2d8cf0;
+                                border-radius: 6px 6px 0 6px;
+                                &.file {
+                                    background-color: #F4F5F7;
+                                }
+                                &.img {
+                                    border-radius: 6px;
+                                    background-color: transparent;
+                                }
+                            }
+                            .dialog-foot {
+                                .done {
+                                    display: inline-block;
+                                }
+                                .percent {
+                                    display: inline-block;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .dialog-footer {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        padding: 0 28px;
+        margin-bottom: 20px;
+        .dialog-newmsg {
+            display: none;
+            height: 30px;
+            line-height: 30px;
+            color: #ffffff;
+            font-size: 12px;
+            background-color: rgba(0, 0, 0, 0.6);
+            padding: 0 12px;
+            margin-bottom: 20px;
+            margin-right: 10px;
+            border-radius: 16px;
+            cursor: pointer;
+            z-index: 2;;
+        }
+        .dialog-input {
+            background-color: #F4F5F7;
+            padding: 10px 12px;
+            border-radius: 10px;
+            .ivu-input {
+                border: 0;
+                resize: none;
+                background-color: transparent;
+                &:focus {
+                    box-shadow: none;
+                }
+            }
+        }
+        .chat-upload {
+            display: none;
+            width: 0;
+            height: 0;
+            overflow: hidden;
+        }
+        &.newmsg {
+            margin-top: -50px;
+            .dialog-newmsg {
+                display: block;
+            }
+        }
+    }
+    .drag-over {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 3;
+        background-color: rgba(255, 255, 255, 0.78);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &:before {
+            content: "";
+            position: absolute;
+            top: 16px;
+            left: 16px;
+            right: 16px;
+            bottom: 16px;
+            border: 2px dashed #7b7b7b;
+            border-radius: 12px;
+        }
+        .drag-text {
+            padding: 12px;
+            font-size: 18px;
+            color: #666666;
+        }
+    }
+}
+.dialog-wrapper-read-poptip-content {
+    display: flex;
+    position: relative;
+    .read,
+    .unread {
+        flex: 1;
+        max-height: 300px;
+        overflow: auto;
+        > li {
+            list-style: none;
+            margin-bottom: 12px;
+            .common-avatar {
+                width: 100%;
+            }
+            &:last-child {
+                margin-bottom: 6px;
+            }
+            &.read-title {
+                > em {
+                    font-size: 18px;
+                    font-weight: 600;
+                    font-style: normal;
+                    padding-right: 6px;
+                }
+            }
+        }
+    }
+    .unread {
+        > li {
+            padding-left: 16px;
+        }
+    }
+    &:before {
+        content: "";
+        position: absolute;
+        left: 50%;
+        top: 0;
+        bottom: 0;
+        width: 1px;
+        background-color: #F4F4F5;
+    }
+}
diff --git a/resources/assets/sass/project-list.scss b/resources/assets/sass/pages/components/project-list.scss
similarity index 100%
rename from resources/assets/sass/project-list.scss
rename to resources/assets/sass/pages/components/project-list.scss
diff --git a/resources/assets/sass/pages/components/task-add-simple.scss b/resources/assets/sass/pages/components/task-add-simple.scss
new file mode 100644
index 00000000..55345be5
--- /dev/null
+++ b/resources/assets/sass/pages/components/task-add-simple.scss
@@ -0,0 +1,50 @@
+.task-add-simple {
+    .ivu-input-wrapper {
+        display: none;
+    }
+    .add-placeholder {
+        cursor: pointer;
+        color: #888888;
+        .ivu-icon {
+            margin-right: 4px;
+        }
+        &:hover {
+            color: #666666;
+        }
+    }
+    .priority {
+        display: none;
+        align-items: center;
+        min-height: 22px;
+        margin-top: 10px;
+        margin-bottom: -3px;
+        > ul {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            > li {
+                list-style: none;
+                margin-right: 3px;
+                .iconfont {
+                    font-size: 22px;
+                    cursor: pointer;
+                }
+            }
+        }
+        .ivu-icon {
+            cursor: pointer;
+            font-size: 16px;
+        }
+    }
+    &.active {
+        .ivu-input-wrapper {
+            display: block;
+        }
+        .add-placeholder {
+            display: none;
+        }
+        .priority {
+            display: flex;
+        }
+    }
+}
diff --git a/resources/assets/sass/task-add.scss b/resources/assets/sass/pages/components/task-add.scss
similarity index 67%
rename from resources/assets/sass/task-add.scss
rename to resources/assets/sass/pages/components/task-add.scss
index c075184f..ff91ab37 100644
--- a/resources/assets/sass/task-add.scss
+++ b/resources/assets/sass/pages/components/task-add.scss
@@ -63,12 +63,14 @@
             border-radius: 6px;
             background-color: #f8f8f8;
             .enter-input {
-                .ivu-input {
-                    background: transparent;
-                    border-color: transparent;
-                    &:hover,
-                    &:focus {
-                        box-shadow: none;
+                &.empty {
+                    .ivu-input {
+                        background: transparent;
+                        border-color: transparent;
+                        &:hover,
+                        &:focus {
+                            box-shadow: none;
+                        }
                     }
                 }
             }
@@ -100,53 +102,3 @@
         margin-bottom: 5px;
     }
 }
-.task-add-simple {
-    .ivu-input-wrapper {
-        display: none;
-    }
-    .add-placeholder {
-        cursor: pointer;
-        color: #888888;
-        .ivu-icon {
-            margin-right: 4px;
-        }
-        &:hover {
-            color: #666666;
-        }
-    }
-    .priority {
-        display: none;
-        align-items: center;
-        min-height: 22px;
-        margin-top: 10px;
-        margin-bottom: -3px;
-        > ul {
-            flex: 1;
-            display: flex;
-            align-items: center;
-            > li {
-                list-style: none;
-                margin-right: 3px;
-                .iconfont {
-                    font-size: 22px;
-                    cursor: pointer;
-                }
-            }
-        }
-        .ivu-icon {
-            cursor: pointer;
-            font-size: 16px;
-        }
-    }
-    &.active {
-        .ivu-input-wrapper {
-            display: block;
-        }
-        .add-placeholder {
-            display: none;
-        }
-        .priority {
-            display: flex;
-        }
-    }
-}
diff --git a/resources/assets/sass/pages/components/task-priority.scss b/resources/assets/sass/pages/components/task-priority.scss
new file mode 100644
index 00000000..993484e8
--- /dev/null
+++ b/resources/assets/sass/pages/components/task-priority.scss
@@ -0,0 +1,9 @@
+.task-priority {
+    display: inline-block;
+    padding: 0 6px;
+    border-radius: 3px;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
diff --git a/resources/assets/sass/pages/page-calendar.scss b/resources/assets/sass/pages/page-calendar.scss
new file mode 100644
index 00000000..b8b0ea91
--- /dev/null
+++ b/resources/assets/sass/pages/page-calendar.scss
@@ -0,0 +1,26 @@
+.page-calendar {
+    .nopage {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        .nopage-icon {
+            background-color: #f4f5f7;
+            padding: 20px;
+            border-radius: 50%;
+            .ivu-icon {
+                color: #d1d8dd;
+                font-size: 46px;
+            }
+        }
+        .nopage-text {
+            margin-top: 16px;
+            color: #bec6cc;
+            background-color: #f4f5f7;
+            padding: 4px 15px;
+            border-radius: 14px;
+        }
+    }
+}
diff --git a/resources/assets/sass/pages/page-dashboard.scss b/resources/assets/sass/pages/page-dashboard.scss
new file mode 100644
index 00000000..f5c4229c
--- /dev/null
+++ b/resources/assets/sass/pages/page-dashboard.scss
@@ -0,0 +1,26 @@
+.page-dashboard {
+    .nopage {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        .nopage-icon {
+            background-color: #f4f5f7;
+            padding: 20px;
+            border-radius: 50%;
+            .ivu-icon {
+                color: #d1d8dd;
+                font-size: 46px;
+            }
+        }
+        .nopage-text {
+            margin-top: 16px;
+            color: #bec6cc;
+            background-color: #f4f5f7;
+            padding: 4px 15px;
+            border-radius: 14px;
+        }
+    }
+}
diff --git a/resources/assets/sass/pages/page-login.scss b/resources/assets/sass/pages/page-login.scss
new file mode 100644
index 00000000..56d742f6
--- /dev/null
+++ b/resources/assets/sass/pages/page-login.scss
@@ -0,0 +1,74 @@
+.page-login {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #F3F6FE;
+    .login-body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .login-logo {
+            width: 64px;
+            height: 64px;
+            background: url("../statics/images/logo.svg") no-repeat center center;
+            background-size: contain;
+        }
+        .login-box {
+            margin-top: 32px;
+            width: 450px;
+            border-radius: 12px;
+            background-color: #ffffff;
+            box-shadow: 0 0 10px #e6ecfa;
+            .login-title {
+                font-size: 24px;
+                font-weight: 600;
+                text-align: center;
+                margin-top: 36px;
+            }
+            .login-subtitle {
+                font-size: 14px;
+                text-align: center;
+                margin-top: 12px;
+                color: #AAAAAA;
+            }
+            .login-input {
+                margin: 40px;
+                > * {
+                    margin-top: 26px;
+                }
+                .ivu-input {
+                    border-color: #f1f1f1;
+                }
+                .login-code {
+                    .ivu-input-group-prepend,
+                    .ivu-input-group-append {
+                        background: transparent;
+                        border-color: #f1f1f1;
+                    }
+                    .ivu-input {
+                        border-left-color: transparent;
+                        border-right-color: transparent;
+                    }
+                    .login-code-end {
+                        margin: -6px -7px;
+                        height: 38px;
+                        overflow: hidden;
+                        cursor: pointer;
+                        img {
+                            height: 100%;
+                        }
+                    }
+                }
+            }
+        }
+        .login-forgot {
+            color: #aaaaaa;
+            margin-top: 36px;
+        }
+    }
+}
diff --git a/resources/assets/sass/manage-wrapper.scss b/resources/assets/sass/pages/page-manage.scss
similarity index 99%
rename from resources/assets/sass/manage-wrapper.scss
rename to resources/assets/sass/pages/page-manage.scss
index 154aeedf..d070d789 100644
--- a/resources/assets/sass/manage-wrapper.scss
+++ b/resources/assets/sass/pages/page-manage.scss
@@ -1,4 +1,4 @@
-.manage-wrapper {
+.page-manage {
     position: absolute;
     top: 0;
     left: 0;
diff --git a/resources/assets/sass/pages/page-messenger.scss b/resources/assets/sass/pages/page-messenger.scss
new file mode 100644
index 00000000..dacd5710
--- /dev/null
+++ b/resources/assets/sass/pages/page-messenger.scss
@@ -0,0 +1,252 @@
+.page-messenger {
+    display: flex;
+    .messenger-wrapper {
+        flex: 1;
+        display: flex;
+        align-items: flex-start;
+        .messenger-select {
+            position: relative;
+            height: 100%;
+            width: 30%;
+            min-width: 240px;
+            max-width: 320px;
+            flex-shrink: 0;
+            display: flex;
+            flex-direction: column;
+            &:after {
+                content: "";
+                position: absolute;
+                top: 0;
+                right: 0;
+                height: 100%;
+                width: 1px;
+                background-color: #f2f2f2;
+            }
+            .messenger-search {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 54px;
+                padding: 0 12px;
+                flex-shrink: 0;
+                .search-wrapper {
+                    flex: 1;
+                    background-color: #F7F7F7;
+                    padding: 0 8px;
+                    margin: 0 4px;
+                    border-radius: 12px;
+                    overflow: hidden;
+                    .ivu-input {
+                        border-color: transparent;
+                        background-color: transparent;
+                        &:hover,
+                        &:focus {
+                            box-shadow: none;
+                        }
+                    }
+                }
+            }
+            .messenger-list {
+                flex: 1;
+                height: 0;
+                width: 100%;
+                overflow-x: hidden;
+                overflow-y: auto;
+                > ul {
+                    &.dialog {
+                        > li {
+                            display: flex;
+                            flex-direction: row;
+                            align-items: center;
+                            height: 80px;
+                            padding: 0 12px;
+                            position: relative;
+                            cursor: pointer;
+                            list-style: none;
+                            &.active {
+                                background-color: #F4F5F7;
+                            }
+                            &.loading {
+                                margin: 0;
+                                height: 52px;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                .common-loading {
+                                    width: 20px;
+                                    height: 20px;
+                                    margin: 0;
+                                }
+                            }
+                            .user-avatar,
+                            .icon-avatar {
+                                width: 46px;
+                                height: 46px;
+                                flex-grow: 0;
+                                flex-shrink: 0;
+                            }
+                            .icon-avatar {
+                                line-height: 46px;
+                                border-radius: 50%;
+                                font-size: 26px;
+                                background-color: #61B2F9;
+                                color: #ffffff;
+                            }
+                            .dialog-box {
+                                flex: 1;
+                                display: flex;
+                                flex-direction: column;
+                                padding-left: 12px;
+                                .dialog-title {
+                                    display: flex;
+                                    flex-direction: row;
+                                    align-items: center;
+                                    justify-content: space-between;
+                                    line-height: 24px;
+                                    > span {
+                                        flex: 1;
+                                        max-width: 130px;
+                                        color: #333333;
+                                        font-size: 14px;
+                                        white-space: nowrap;
+                                        overflow: hidden;
+                                        text-overflow: ellipsis;
+                                    }
+                                    > i {
+                                        margin-left: 8px;
+                                        transform: scale(0.9);
+                                        font-size: 12px;
+                                        color: #87d068;
+                                    }
+                                    > em {
+                                        margin-left: 8px;
+                                        font-style: normal;
+                                        color: #999999;
+                                        font-size: 12px;
+                                    }
+                                }
+                                .dialog-text {
+                                    max-width: 170px;
+                                    color: #999999;
+                                    font-size: 12px;
+                                    line-height: 24px;
+                                    white-space: nowrap;
+                                    overflow: hidden;
+                                    text-overflow: ellipsis;
+                                }
+                            }
+                            .dialog-num {
+                                position: absolute;
+                                top: 10px;
+                                left: 42px;
+                                font-size: 12px;
+                                transform: scale(0.8);
+                            }
+                        }
+                    }
+                    &.contacts {
+                        > li {
+                            list-style: none;
+                            margin-left: 24px;
+                            position: relative;
+                            .label {
+                                padding-left: 4px;
+                                margin-top: 6px;
+                                margin-bottom: 6px;
+                                height: 34px;
+                                line-height: 34px;
+                                border-bottom: 1px solid #efefef;
+                            }
+                            &.loading {
+                                margin: 0;
+                                height: 52px;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                .common-loading {
+                                    width: 20px;
+                                    height: 20px;
+                                    margin: 0;
+                                }
+                            }
+                            > ul {
+                                > li {
+                                    list-style: none;
+                                    display: flex;
+                                    flex-direction: row;
+                                    align-items: center;
+                                    height: 52px;
+                                    cursor: pointer;
+                                    .avatar {
+                                        flex-grow: 0;
+                                        flex-shrink: 0;
+                                        width: 30px;
+                                        height: 30px;
+                                    }
+                                    .nickname {
+                                        padding: 0 12px;
+                                        font-size: 14px;
+                                        white-space: nowrap;
+                                        overflow: hidden;
+                                        text-overflow: ellipsis;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            .messenger-menu {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 54px;
+                flex-shrink: 0;
+                border-top: 1px solid #f2f2f2;
+                > i {
+                    cursor: pointer;
+                    font-size: 28px;
+                    margin: 0 24px;
+                    color: #aaaaaa;
+                    opacity: 0.9;
+                    &.active {
+                        opacity: 1;
+                        color: #2d8cf0;
+                    }
+                    &:hover {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+        .messenger-msg {
+            flex: 1;
+            width: 0;
+            height: 100%;
+            display: flex;
+            position: relative;
+            .dialog-no {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                .dialog-no-icon {
+                    background-color: #f4f5f7;
+                    padding: 20px;
+                    border-radius: 50%;
+                    .ivu-icon {
+                        color: #d1d8dd;
+                        font-size: 46px;
+                    }
+                }
+                .dialog-no-text {
+                    margin-top: 16px;
+                    color: #bec6cc;
+                    background-color: #f4f5f7;
+                    padding: 4px 15px;
+                    border-radius: 14px;
+                }
+            }
+        }
+    }
+}
diff --git a/resources/assets/sass/pages/page-project.scss b/resources/assets/sass/pages/page-project.scss
new file mode 100644
index 00000000..c3da90b9
--- /dev/null
+++ b/resources/assets/sass/pages/page-project.scss
@@ -0,0 +1,19 @@
+.page-project {
+    flex: 1;
+    display: flex;
+    align-items: flex-start;
+    .project-list {
+        flex: 1;
+        width: 0;
+        height: 100%;
+        background-color: #fafafa;
+    }
+    .project-dialog {
+        position: relative;
+        height: 100%;
+        width: 35%;
+        min-width: 320px;
+        max-width: 520px;
+        flex-shrink: 0;
+    }
+}
diff --git a/resources/assets/sass/pages/page-setting.scss b/resources/assets/sass/pages/page-setting.scss
new file mode 100755
index 00000000..332e573a
--- /dev/null
+++ b/resources/assets/sass/pages/page-setting.scss
@@ -0,0 +1,126 @@
+.page-setting {
+    display: flex;
+    flex-direction: column;
+    .setting-head {
+        display: flex;
+        align-items: flex-start;
+        margin: 32px 32px 16px;
+        border-bottom: 1px solid #F4F4F5;
+        .setting-titbox {
+            flex: 1;
+            margin-bottom: 16px;
+            .setting-title {
+                display: flex;
+                align-items: center;
+                > h1 {
+                    color: #333333;
+                    font-size: 28px;
+                    font-weight: 600;
+                }
+            }
+        }
+    }
+    .setting-box {
+        flex: 1;
+        height: 0;
+        display: flex;
+        margin-bottom: 16px;
+        .setting-menu {
+            width: 200px;
+            flex-shrink: 0;
+            border-right: 1px solid #F4F4F5;
+            overflow: auto;
+            > ul {
+                padding: 12px 0 0 32px;
+                > li {
+                    cursor: pointer;
+                    color: #6C7D8C;
+                    list-style: none;
+                    line-height: 42px;
+                    padding: 0 20px;
+                    margin: 5px 0;
+                    position: relative;
+                    &.active,
+                    &:hover {
+                        background-color: #F4F5F7;
+                    }
+                }
+            }
+        }
+        .setting-content {
+            flex: 1;
+            overflow: auto;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            .setting-content-title {
+                font-size: 20px;
+                font-weight: 500;
+                padding: 12px 32px;
+            }
+            .setting-content-view {
+                flex: 1;
+                position: relative;
+                .setting-router-view {
+                    padding: 24px 40px;
+                }
+            }
+        }
+    }
+    .setting-item {
+        .ivu-input,
+        .ivu-select-selection {
+            max-width: 460px;
+        }
+        .form-tip {
+            color: #999999;
+        }
+        .setting-color {
+            max-width: 600px;
+            margin-bottom: 12px;
+            > div {
+                text-align: center;
+                padding-right: 12px;
+                &:first-child {
+                    text-align: left;
+                }
+                &:last-child {
+                    padding-right: 0;
+                    width: 60px;
+                    flex: auto;
+                    flex-shrink: 0;
+                    max-width: 60px;
+                }
+                .ivu-color-picker {
+                    width: 100%;
+                }
+            }
+            .information {
+                color: #999999;
+            }
+        }
+        .setting-footer {
+            > button {
+                height: 34px;
+                line-height: 32px;
+                min-width: 94px;
+            }
+        }
+        &.submit {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            .setting-footer {
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                z-index: 1;
+                padding: 16px 24px 0;
+                border-top: 1px solid #F4F4F5;
+            }
+        }
+    }
+}