diff --git a/frontend/package.json b/frontend/package.json
index 37882e3b..12eb42ac 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -40,6 +40,7 @@
         "@vue/cli-service": "~4.5.0",
         "babel-eslint": "^10.1.0",
         "babel-plugin-import": "^1.13.3",
+        "brace": "https://github.com/nightwing/brace",
         "easygettext": "^2.17.0",
         "eslint": "^6.7.2",
         "eslint-plugin-vue": "^6.2.2",
@@ -54,7 +55,8 @@
         "vue-cli-plugin-generate-build-id": "^0.2.0",
         "vue-cropper": "^0.5.6",
         "vue-template-babel-compiler": "^1.1.2",
-        "vue-template-compiler": "^2.6.11"
+        "vue-template-compiler": "^2.6.11",
+        "vue2-ace-editor": "^0.0.15"
     },
     "eslintConfig": {
         "root": true,
diff --git a/frontend/src/assets/css/dark.less b/frontend/src/assets/css/dark.less
index aa7b5800..805cb4cd 100644
--- a/frontend/src/assets/css/dark.less
+++ b/frontend/src/assets/css/dark.less
@@ -9,6 +9,8 @@
     @text-color-secondary: #bdbdbd;
     @heading-color: #fff;
 
+    @item-hover-bg: @black_bg;
+
     @body-background: @black_bg;
     @component-background: @black_content;
     @layout-body-background: @black_bg;
@@ -22,7 +24,7 @@
 
     @item-active-bg: #161717;
 
-    @link-color: #fff;
+    @link-color: #bcbcbc;
     @table-row-hover-bg: @black_bg;
     @table-selected-row-bg: @black_bg;
 
@@ -45,7 +47,6 @@
     // ---
     @alert-message-color: @black;
 
-
     .ant-select-dropdown-menu-item:hover {
         background: @black_bg;
     }
@@ -65,4 +66,9 @@
         background-color: @black_bg !important;
     }
 
+    .ant-card {
+        // box-shadow: 0 0 30px rgb(0, 0, 0, 10%) !important;
+        box-shadow: none !important;
+    }
+
 }
diff --git a/frontend/src/assets/css/style.bak.less b/frontend/src/assets/css/style.bak.less
deleted file mode 100644
index 3f165564..00000000
--- a/frontend/src/assets/css/style.bak.less
+++ /dev/null
@@ -1,1499 +0,0 @@
-/* 基准 */
-* {
-    -webkit-tap-highlight-color: transparent
-}
-
-/*::selection {
-    background: unset;
-    color: unset;
-}
-
-::-moz-selection {
-    background: unset;
-    color: unset;
-}*/
-
-a {
-    color: #444;
-    @media (prefers-color-scheme: dark) {
-        color: #f5f5f5;
-    }
-    text-decoration: none;
-    -webkit-transition: all .3s ease;
-    -moz-transition: all .3s ease;
-    -ms-transition: all .3s ease;
-    -o-transition: all .3s ease;
-    transition: all .3s ease;
-
-    &:hover {
-        color: #19B5FE;
-        text-decoration: none;
-    }
-
-    &:focus {
-        outline: 0;
-        text-decoration: none;
-    }
-}
-
-b {
-    font-weight: normal
-}
-
-i {
-    font-style: normal
-}
-
-p {
-    margin: 0
-}
-
-h1, h2, h4 {
-    margin: 0;
-    font-weight: normal;
-}
-
-h3 {
-    font-size: 17px;
-    font-weight: 400
-}
-
-h4 {
-    font-size: 15px;
-}
-
-ul {
-    margin: 0;
-    padding: 0;
-    list-style: none
-}
-
-img {
-    border: 0
-}
-
-code {
-    font-family: Menlo, monospace;
-    font-size: 90%
-}
-
-p > code {
-    padding: 0.2em 0.4em;
-    background: #e1e9ed
-}
-
-pre {
-    text-align: left;
-    overflow-x: scroll;
-    background-color: #f5f5f5;
-    padding: 10pt 15pt;
-    font-size: 13px;
-    border-radius: 4px;
-    color: #333;
-    border: 1px solid rgba(0, 0, 0, 0.15)
-}
-
-button {
-    box-shadow: unset !important;
-}
-
-.clear {
-    clear: both
-}
-
-.center {
-    display: flex;
-    justify-content: center;
-}
-
-.limit-max {
-    max-width: 1000px;
-}
-
-.ant-notification {
-    z-index: 2100
-}
-
-.ant-comment-actions {
-    margin-top: unset;
-}
-
-.ant-input:hover {
-
-}
-
-.grecaptcha-badge {
-    visibility: hidden;
-}
-
-.card {
-    border-radius: 10px;
-    box-shadow: 0 0 30px rgba(200, 200, 200, 0.25);
-    margin: 0 0 30px 0;
-    position: relative;
-}
-
-.card .ant-card-head {
-    border: 0;
-}
-
-.card .ant-card-head-title {
-    color: #444;
-    font-weight: 300;
-    text-align: left;
-    height: 48px;
-    padding: 20px 0 0 0;
-}
-
-.container .content .ant-card-head-title {
-    height: unset;
-    font-size: 22px;
-}
-
-.card .ant-card-body {
-    padding: 6px 24px 20px 24px;
-}
-
-.border-radius {
-    border-radius: 10px !important;
-}
-
-#nprogress .bar {
-    z-index: 2030 !important;
-    background: #1890ff !important;
-}
-
-.loading {
-    position: fixed;
-    background: #ffffff;
-    z-index: 2030;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    right: 0;
-}
-
-.loading .wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    height: 100%;
-
-}
-
-.loading .wrapper .ant-spin {
-    position: unset;
-}
-
-/* body */
-body {
-    margin: 0;
-    padding: 0;
-    //cursor: default;
-    //-webkit-user-select: none;
-    -webkit-text-size-adjust: none;
-    -webkit-font-smoothing: antialiased;
-    font-family: "Myriad Pro", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif
-
-}
-
-/* header */
-header {
-    height: 50px;
-    position: fixed;
-    width: 100%;
-    border: 0;
-    background: #fff;
-    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
-    z-index: 1001;
-}
-
-header .title {
-    float: left;
-    line-height: 50px;
-    padding: 0 0 0 15px;
-}
-
-header .title i {
-    font-size: 110px;
-}
-
-header .title .svg {
-    height: 30px;
-}
-
-header .menu {
-    height: 50px;
-    border: 0;
-}
-
-header .menu .horizontal_menu {
-    text-align: right;
-}
-
-header .menu .horizontal_menu li {
-    line-height: 50px
-}
-
-header .menu .horizontal_menu li a {
-    display: inline !important
-}
-
-header .login_button {
-    float: right;
-    line-height: 50px;
-    padding: 0 10px 0 0
-}
-
-header .avatar {
-    float: right;
-    line-height: 50px;
-    padding: 0 10px 0 0
-}
-
-.user-pop-card {
-    width: 180px;
-}
-
-.user-pop-card table {
-    width: 100%;
-}
-
-.user-pop-card tr {
-    line-height: 2;
-}
-
-.ant-popover-inner-content .ant-divider-horizontal {
-    margin: 12px 0;
-}
-
-.container {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    padding: 80px 15px 0 15px
-}
-
-.container .breadcrumb .ant-card-body {
-    padding: 15px 25px;
-}
-
-.container .breadcrumb .ant-breadcrumb {
-    font-size: 13px;
-}
-
-.container .content {
-    padding: 0 30px 0 0;
-}
-
-/* Home */
-.container .content .home {
-
-}
-
-.container .content .home .carousel img {
-    width: 90%;
-    clear: both;
-    display: block;
-    margin: auto;
-    padding-bottom: 15px;
-}
-
-.container .content .home .card.config {
-    box-shadow: unset;
-}
-
-.container .content .home .card.gallery {
-    width: 300px;
-    margin: 0 0 10px 0;
-    box-shadow: 0 0 30px rgba(200, 200, 200, 0.15);
-}
-
-.container .content .home .card.gallery .ant-card-meta {
-    padding: 18px 0 0 0;
-}
-
-.container .content .home .card.gallery .ant-card-meta .ant-card-meta-detail .ant-card-meta-title {
-    font-size: 14px;
-    margin: unset;
-}
-
-.container .content .home .card.gallery .ant-card-meta .ant-card-meta-avatar {
-    padding-right: 10px;
-}
-
-.container .content .home .card.gallery .ant-card-meta .ant-card-meta-detail .ant-card-meta-description {
-    font-size: 10px;
-    font-weight: 300;
-}
-
-.card .card-wrapper {
-    margin: 15px 0 10px 0;
-    width: 100%;
-    overflow: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-}
-
-.gallery .banner .wrapper::-webkit-scrollbar {
-    height: 3px;
-}
-
-.card .card-wrapper.sub {
-    text-align: center;
-}
-
-.card .card-wrapper a {
-    text-decoration: none;
-}
-
-.card .card-wrapper::-webkit-scrollbar {
-    height: 3px;
-}
-
-/* trick to only apply in webkit */
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-    .card .card-wrapper {
-        background-color: rgba(0, 0, 0, 0);
-        -webkit-background-clip: text;
-        transition: background-color .8s;
-    }
-
-    .card .card-wrapper::-webkit-scrollbar-track {
-        display: none;
-    }
-
-    .card .card-wrapper::-webkit-scrollbar-thumb {
-        border-radius: 4px;
-        background-color: inherit;
-    }
-
-    .card .card-wrapper::-webkit-scrollbar-thumb:hover {
-        background: #20A4F1;
-    }
-
-    .gallery .banner .wrapper {
-        background-color: rgba(0, 0, 0, 0);
-        -webkit-background-clip: text;
-        transition: background-color .8s;
-    }
-
-    .gallery .banner .wrapper::-webkit-scrollbar-track {
-        display: none;
-    }
-
-    .gallery .banner .wrapper::-webkit-scrollbar-thumb {
-        border-radius: 4px;
-        background-color: inherit;
-    }
-
-    .gallery .banner .wrapper::-webkit-scrollbar-thumb:hover {
-        background: #20A4F1;
-    }
-
-}
-
-.card .card-wrapper ul {
-    font-size: 0;
-    white-space: nowrap;
-    word-break: normal;
-    padding: 0;
-}
-
-.card .card-wrapper li {
-    display: inline-block;
-    padding: 0 15px 0 4px;
-    vertical-align: top;
-}
-
-.card .card-wrapper li:nth-last-child(1) {
-    padding: 0 0 0 4px;
-}
-
-.card .card-wrapper .card-block {
-    float: left;
-    position: relative;
-    border-radius: 18px;
-    width: 210px;
-    height: 280px
-}
-
-.card .card-wrapper .card-block .card-content {
-    position: relative;
-}
-
-.card .card-wrapper .card-block .card-content .pic {
-    width: 80px;
-    overflow: hidden;
-    padding-top: 36px;
-    margin: 0 auto;
-}
-
-.card .card-wrapper .card-block .card-content .pic img {
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-}
-
-.card .card-wrapper .card-block .card-content .info {
-    font-size: 18px;
-    display: block;
-    padding: 13px;
-    margin: 0 auto;
-    width: 98%;
-    white-space: normal;
-}
-
-.card .card-wrapper .card-block .card-content .info h2 {
-    color: #fff;
-    font-size: 12px;
-    font-weight: 600
-}
-
-.card .card-wrapper .card-block .card-content .info p {
-    margin-top: 5px;
-    color: #fff;
-    font-size: 12px;
-    font-weight: 500
-}
-
-.card .card-wrapper button {
-    border-radius: 25px;
-    font-size: 12px;
-    height: 26px;
-    width: 48%;
-}
-
-.card .card-wrapper .enter {
-}
-
-.card .card-wrapper .enter button {
-    width: unset;
-}
-
-.card .card-wrapper .card-block .card-content button:hover {
-    color: #ffffff;
-    border-color: #ffffff;
-
-}
-
-.card .card-wrapper .card-block .card-content button:focus {
-    color: #ffffff;
-    border-color: #ffffff;
-
-}
-
-@media screen and (max-width: 800px) {
-    .card .card-wrapper li {
-        padding: 0 20px 0 4px;
-    }
-}
-
-.container .content .home .source {
-    font-size: 11px;
-    color: #8e8e90;
-    position: absolute;
-    top: 18px;
-}
-
-.container .content .home .source img {
-    height: 20px;
-    border-radius: 50%;
-}
-
-.container .content .home .ant-card-head-title {
-    padding: 40px 0 5px 0;
-}
-
-
-/* Firmwares */
-.container .content .home .source .firmwares-ipswme-icon {
-    width: 20px;
-    height: 20px;
-    vertical-align: middle;
-    margin-right: 5px;
-}
-
-.container .content .home .firmwares .select {
-    padding: 10px;
-}
-
-.container .content .home .firmwares .sub-title {
-    padding: 0 0 0 5px;
-    margin: -10px 0 0 0;
-}
-
-.container .content .home .firmwares .download button {
-    width: 100%;
-    border-radius: 12px;
-    font-size: 13px;
-    height: 36px;
-}
-
-.container .content .home .firmwares h3 {
-    margin: 10px 0 0 0;
-    font-weight: 300;
-    border-bottom: 1px solid #e9e9e9;
-}
-
-.container .content .home .firmwares .details {
-
-}
-
-.container .content .home .firmwares .details li {
-    color: #555;
-    font-size: 13px;
-    line-height: 31px;
-}
-
-.container .content .home .firmwares .beta-download .ant-btn {
-
-}
-
-.container .content .home .firmwares .beta-download .ant-btn-group > .ant-btn:first-child:not(:last-child), .ant-btn-group > span:first-child:not(:last-child) > .ant-btn {
-    border-bottom-left-radius: 12px;
-    border-top-left-radius: 12px;
-}
-
-.container .content .home .firmwares .beta-download .ant-btn-group > .ant-btn:last-child:not(:first-child), .ant-btn-group > span:last-child:not(:first-child) > .ant-btn {
-    border-bottom-right-radius: 12px;
-    border-top-right-radius: 12px;
-    padding: 0 8px;
-}
-
-.container .content .home .firmwares .details .tss {
-    text-align: center;
-}
-
-.container .content .home .firmwares .ok {
-    color: #5bb0ed;
-}
-
-.container .content .home .firmwares .no {
-    color: #ee5854;
-}
-
-/* Price Tag */
-.pricetag .row {
-
-}
-
-.pricetag .row .app {
-    padding: 9px;
-}
-
-.pricetag .row .app .artwork {
-
-}
-
-.pricetag .row .app .artwork img {
-    float: left;
-    height: 50px;
-    border-radius: 10px;
-}
-
-.pricetag .row .app .info {
-    margin: 0 0 0 65px;
-    border-bottom: 1px solid #e8e8e8;
-    height: 50px;
-}
-
-.pricetag .row .app .info .description {
-    float: left;
-}
-
-.pricetag .row .app .info .description .title {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: 14px;
-    width: 120px;
-}
-
-.pricetag .row .app .info .description span {
-    font-size: 11px;
-    color: #979797;
-}
-
-.pricetag .row .app .info .button {
-    float: right;
-    line-height: 35px;
-}
-
-.pricetag button {
-    border-radius: 25px;
-    font-size: 12px;
-    height: 26px;
-    box-shadow: unset;
-}
-
-.pricetag .get-more-app {
-    padding: 15px 0 0 0;
-}
-
-/* gallery */
-.gallery .banner {
-    margin: 0 0 20px 0;
-}
-
-.gallery .banner .wrapper {
-    width: 100%;
-    overflow: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-}
-
-.gallery .banner .wrapper ul {
-    font-size: 0;
-    white-space: nowrap;
-    word-break: normal;
-    padding: 0;
-}
-
-.gallery .banner .wrapper li {
-    display: inline-block;
-    padding: 0 15px 0 4px;
-    vertical-align: top;
-}
-
-.gallery .banner .wrapper li:last-child {
-    display: inline-block;
-    padding: 0 4px 0 0;
-}
-
-.gallery .banner .wrapper .block {
-    float: left;
-    height: 200px;
-    width: 480px;
-    position: relative;
-}
-
-.gallery .banner .wrapper .background {
-    border-radius: 10px;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    height: 100%;
-    width: 100%;
-    background-position: center;
-    position: absolute;
-    z-index: -1;
-}
-
-.gallery .banner .wrapper .background .inner {
-    background: rgba(0, 0, 0, .5);
-    border-radius: 10px;
-    height: 100%;
-}
-
-.gallery .banner .wrapper .card-content,
-.gallery .banner .wrapper .card-content .info {
-    width: 100%;
-    height: 100%;
-}
-
-.gallery .banner .wrapper .card-content .info h1 {
-    color: #ffffff;
-    position: absolute;
-    font-size: 26px;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-}
-
-.gallery .gallery-content {
-
-}
-
-.gallery .gallery-content .title {
-    padding: 20px 0 0 0;
-}
-
-.gallery .gallery-content .title .avatar {
-    float: left;
-    padding: 0 15px 0 0;
-}
-
-.gallery .gallery-content .title .avatar {
-    float: left;
-    padding: 0 15px 0 0;
-}
-
-.gallery .gallery-content .title .subscribe {
-    float: right;
-}
-
-.gallery .gallery-content .title .subscribe button {
-    border-radius: 20px;
-}
-
-.gallery .gallery-content .menu .ant-menu-item {
-    width: 33.3%;
-    text-align: center;
-}
-
-.gallery .ant-comment-inner {
-
-}
-
-.gallery .official {
-    margin: 20px 0 0 0;
-}
-
-.gallery .official .card h2 {
-    font-size: 20px;
-}
-
-.gallery .official .card .digest {
-    padding: 10px 0 0 0;
-}
-
-.gallery .official .card .digest p {
-    line-height: 1.3;
-}
-
-.gallery .official .card .ant-card-cover img {
-    border-radius: 10px 10px 0 0;
-}
-
-.gallery .official .card .ant-card-body {
-    padding: 30px;
-    white-space: pre-wrap;
-}
-
-.gallery .official .card .ant-card-meta-title {
-    text-overflow: unset;
-    overflow: unset;
-    white-space: unset;
-}
-
-
-/* Feedback */
-.container .content .topic.feedback .article:first-of-type {
-    margin: 20px 0 0 0;
-}
-
-.container .content .topic.feedback .article {
-    padding: 20px 0 0 0;
-    margin: 30px 0 0 0
-}
-
-.container .content .topic.feedback .article .ant-card-actions {
-    border: unset;
-    background: unset;
-}
-
-/* Discuss */
-.editor textarea {
-    min-height: 180px;
-    width: 100%;
-    outline: none;
-    resize: none;
-    outline: none;
-}
-
-.editor .input_length {
-    float: right;
-}
-
-.editor .allow_comment {
-    margin: 10px 0 0 0;
-    float: left;
-}
-
-.editor .ant-upload-list-picture-card {
-    width: 100%;
-}
-
-.editor .save {
-    margin: 10px 0 0 0;
-    float: right;
-}
-
-/* Topic */
-.container .content .topic .article {
-    position: relative;
-    padding: 36px 30px 20px 30px;
-    border-radius: 10px;
-    background-color: #fff;
-    box-shadow: 0 0 30px rgba(200, 200, 200, 0.25);
-    margin: 0 0 30px 0;
-}
-
-.container .content .topic .article.major .post_info {
-    border-radius: 10px 10px 0 0;
-    position: relative;
-}
-
-.container .content .topic .banner img {
-    border-radius: 10px 10px 0 0;
-    width: 100%;
-}
-
-.container .content .topic .article .post_info .title {
-    padding: 0 0 20px 0;
-}
-
-.container .content .topic .article .post_info .title h1 {
-    font-size: 23px;
-}
-
-.container .content .topic .article .post_info .avatar {
-    float: left;
-}
-
-.container .content .topic .article .post_info .author {
-    display: block;
-    padding: 0 0 0 46px;
-}
-
-.container .content .topic .article .post_info .author p {
-    text-indent: unset;
-    line-height: 16px;
-    font-size: 13px;
-}
-
-.container .content .topic .article.major .post_content {
-    padding: 18px 0 0 0;
-}
-
-.container .content .topic .article .post_content img {
-    margin-left: auto;
-    margin-right: auto;
-    display: block;
-    max-width: 80%;
-    width: 320px;
-    border-radius: 4px;
-}
-
-.container .content .topic .article.major .post_content h1 {
-    font-size: 20px;
-    text-align: left;
-    font-weight: bold;
-    margin: 20px 0;
-    border-left: 5px solid red;
-    padding-left: 10px
-}
-
-.container .content .topic .article.major .post_content h2 {
-    font-size: 18px;
-    text-align: left;
-    font-weight: bold;
-    margin: 20px 0;
-    border-left: 5px solid red;
-    padding-left: 10px
-}
-
-.container .content .topic .article.major .post_content h3 {
-    font-weight: bold;
-    font-size: 16px;
-    margin: 20px 0
-}
-
-.container .content .topic .article.major .post_content p {
-    margin: 10px;
-    line-height: 1.75;
-    font-size: 14px;
-    letter-spacing: 2px
-}
-
-.container .content .topic .article.major .post_content code {
-    font-size: 80%;
-    overflow: auto;
-    color: #333;
-    background: rgb(247, 247, 247);
-    border-radius: 2px;
-    padding: 10px;
-    line-height: 1.3;
-    border: 1px solid rgb(236, 236, 236);
-    margin: 20px 0;
-}
-
-.container .content .topic .article.major .post_content ol {
-    margin-left: 0;
-    padding-left: 20px
-}
-
-.container .content .topic .article.major .post_content ul {
-    margin-left: 0;
-    padding-left: 30px;
-    list-style: disc;
-    letter-spacing: 2px
-}
-
-.container .content .topic .article.major .post_content table {
-    border-collapse: collapse;
-    margin: 20px 0;
-}
-
-.container .content .topic .article.major .post_content thead {
-    background: rgba(0, 0, 0, 0.05);
-}
-
-.container .content .topic .article.major .post_content td {
-    font-size: 80%;
-    border: 1px solid #dfdfdf;
-    padding: 4px 8px;
-}
-
-.container .content .topic .article .post_content .hljs-left {
-    text-align: left;
-}
-
-.container .content .topic .article .post_content .hljs-center {
-    text-align: center;
-}
-
-.container .content .topic .article .post_content .hljs-right {
-    text-align: right;
-}
-
-.container .content .topic .article .post_modified {
-    color: #8e8e90;
-    float: right;
-    text-indent: unset;
-    font-size: 13px;
-}
-
-.container .content .topic .article h1 {
-    overflow: hidden;
-    color: #333;
-    text-overflow: ellipsis;
-    font-weight: 300;
-    font-size: 22px
-}
-
-.container .content .topic .article h2 {
-    font-size: 17px;
-    font-weight: 400;
-    line-height: 18px;
-    padding: 18px 0 8px;
-    color: #474747;
-}
-
-.container .content .topic .article h3 {
-    font-size: 15px;
-    font-weight: 400;
-    line-height: 18px;
-    padding: 15px 0 5px;
-    color: #474747;
-}
-
-.container .content .topic .article p {
-    color: #333;
-    font-size: 13px;
-    line-height: 26px;
-}
-
-.container .content .topic .article .favour .action {
-    padding: 10px;
-}
-
-/* Donate-pages */
-.container .content .topic .donate p {
-    text-indent: unset;
-    text-align: center;
-}
-
-.container .content .topic .donate .left-thanks img {
-    width: 33%;
-    float: left;
-    padding: 30px 0 0 0;
-}
-
-.container .content .topic .article .donate .donate_form {
-    float: left;
-    width: 33%;
-    padding: 10px 0 30px 0;
-}
-
-.container .content .topic .donate .right-thanks img {
-    width: 33%;
-    float: left;
-    padding: 30px 0 0 0;
-}
-
-.container .content .topic .article .donate .donate_form .switch {
-    float: left;
-}
-
-.container .content .topic .article .donate .donate_form .create_order {
-    padding: 15px 0 15px 0;
-    float: right;
-}
-
-.container .content .topic .donate .menu .ant-menu-item {
-    width: 33.3%;
-    text-align: center;
-}
-
-.container .content .topic .donate .pagination {
-    float: right;
-    padding: 20px 0 0 0;
-}
-
-.container .content .topic .donate .ant-table-small {
-    border: 0;
-    text-align: center;
-}
-
-.container .content .topic .donate .ant-table-small .ant-table-body th {
-    width: 33.3%;
-    text-align: center;
-}
-
-.container .content .topic .donate .ant-table-small .ant-table-body tr {
-    width: 33.3%;
-    text-align: center;
-}
-
-/* Install */
-.container .content .topic.install .button {
-    text-align: center;
-    padding: 15px 0 15px 0;
-}
-
-.container .content .topic.install .button button:first-child {
-    margin: 0 15px 0 0;
-}
-
-/* TimeLine */
-.ant-timeline-item-content {
-    margin: 0 0 0 15px;
-}
-
-.ant-timeline-item-content .timeline-content p {
-    text-indent: unset !important;
-}
-
-
-/* Widget */
-.widget-area {
-
-}
-
-.widget-area .card {
-    text-align: center;
-
-}
-
-.widget-area .card .ant-card-head {
-
-}
-
-.widget-area .card .ant-card-head-title {
-
-}
-
-.widget-area .card .ant-card-body {
-    padding: 6px 24px 24px 20px;
-}
-
-.widget-area .card p {
-    line-height: 30px;
-    font-size: 13px;
-}
-
-.widget-area .card button {
-    margin: 10px 0 0 0;
-    border-radius: 20px;
-}
-
-.widget-area .contact-us {
-    text-align: left;
-}
-
-.widget-area .contact-us .item {
-    height: 45px;
-    padding: 0 5px 0 5px;
-    font-size: 13px;
-}
-
-.widget-area .contact-us .item span {
-    margin: 0 10px 0 0
-}
-
-/* Footer */
-footer {
-    margin: 5px auto 0;
-    height: 50px;
-    font-size: 12px;
-}
-
-footer .row {
-
-}
-
-footer .row .col {
-    padding: 0 15px 15px;
-    text-align: center;
-}
-
-/* Login */
-.login {
-    position: fixed;
-    height: 100%;
-    width: 100%;
-}
-
-.login .wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    background: #fff;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 0 30px rgba(200, 200, 200, 0.25);
-    height: 360px;
-}
-
-.login .wrapper .welcome {
-    display: inline-table;
-    margin: 0 auto;
-}
-
-
-.login .wrapper h1, .login .wrapper h2 {
-    font-weight: 300;
-    text-align: center;
-}
-
-.login .login-panel {
-    background: #fff;
-    padding: 20px;
-    margin: 0 0 0 -150px;
-    border-radius: 10px;
-    box-shadow: 0 0 30px rgba(200, 200, 200, 0.25);
-    max-width: 340px;
-}
-
-.login .login-panel .logo {
-    text-align: center;
-    padding: 26px;
-}
-
-.login .login-panel .login-form {
-    width: 75%;
-}
-
-.login .login-panel .login-form .ant-form-item {
-    margin: 0 0 15px 0;
-}
-
-.login .login-panel .login-form .ant-form-item:last-child {
-    margin: 0;
-}
-
-.login .login-panel .login-form .ant-form-item input {
-    border-radius: 20px;
-}
-
-.login .login-panel .login-form .checkbox {
-    padding: 0 0 15px 0;
-}
-
-.login .login-panel .login-form .login-form-button {
-    margin: 13px 0;
-}
-
-.login .login-panel .login-form .login-form-button button {
-    border-radius: 20px;
-}
-
-.login .login-panel .login-form .remember {
-    float: right;
-    font-size: 13px;
-}
-
-.login .login-panel .login-form .login-form-forgot {
-    font-size: 12px;
-}
-
-.login .login-panel .welcome {
-    margin: 0 auto;
-    text-align: center;
-}
-
-.login .login-panel .welcome h1 {
-    font-size: 16px;
-    font-weight: 300;
-}
-
-.login .login-panel .welcome h2 {
-    font-size: 14px;
-    font-weight: 300;
-}
-
-/* Register */
-.register .login-panel {
-    margin: unset;
-    width: 100%;
-    max-width: 340px;
-}
-
-/* User Center */
-.container .sidebar {
-    padding: 20px;
-    background: #fff;
-    border-radius: 10px;
-    box-shadow: 0 0 30px rgba(200, 200, 200, 0.25);
-    margin: 0 30px 0 0;
-}
-
-.container .sidebar ul {
-    border: 0;
-}
-
-.container.user-center {
-    padding: 80px 15px 30px 15px;
-}
-
-.container .user-panel {
-    padding: 25px;
-    background: #fff;
-    border-radius: 10px;
-    box-shadow: 0 0 30px rgba(200, 200, 200, 0.25);
-    position: relative;
-}
-
-.container .user-panel .avatar {
-    padding: 10px;
-    float: left;
-}
-
-.container .user-panel .welcome {
-    padding: 35px 0 0 10px;
-    float: left;
-
-}
-
-.container .user-panel h1 {
-    padding: 0 0 20px 0;
-    font-size: 27px;
-    font-weight: 300;
-}
-
-.container .user-panel .post {
-
-}
-
-.container .user-panel .post a {
-    color: #1890ff;
-}
-
-.container .user-panel .input {
-    padding: 0 20px 20px 0;
-}
-
-.container .user-panel .switch {
-    padding: 5px 0 5px 0;
-}
-
-.container .user-panel .save {
-    float: right;
-    padding: 20px 0 0 0;
-}
-
-.container .user-panel .contribute .allow_comment {
-    padding: 20px 0 0 0;
-}
-
-.container .user-panel .message .delete-button {
-    float: right;
-    margin: 10px 0 0 0;
-}
-
-.container .user-panel .message .message-block .ant-card-body {
-    padding: 20px
-}
-
-.container .user-panel .message .message-block .ant-card-meta-title {
-    font-weight: 300;
-    font-size: 13px;
-}
-
-.container .user-panel .message .message-block .ant-card-meta-description {
-    color: unset;
-}
-
-.container .user-panel .message .message-block .send_date {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    font-weight: 300;
-    font-size: 12px;
-}
-
-.container .user-panel .message .message-block .is_read {
-    margin: 10px 0 0 40px;
-}
-
-/* "Auto" Layout */
-/**
-{
-  xs: '480px',
-  sm: '576px',
-  md: '768px',
-  lg: '992px',
-  xl: '1200px',
-  xxl: '1600px',
-}
-**/
-@media (max-width: 320px) {
-    header .menu li.home_link {
-        display: none !important;
-    }
-
-    .container .content .topic .article {
-        border-radius: unset;
-        padding: 36px 5px 20px 5px;
-    }
-
-    .container .content .topic .article .donate td {
-        font-size: 12px;
-    }
-
-    .gallery .banner {
-        height: 115px !important;
-    }
-
-    .gallery .banner .wrapper .block {
-        height: 115px !important;
-        width: 276px !important;
-    }
-
-}
-
-@media (max-width: 576px) {
-    header .menu .horizontal_menu {
-        text-align: center;
-    }
-
-    .gallery .banner {
-        height: 150px;
-    }
-
-    .gallery .banner .wrapper .block {
-        height: 150px;
-        width: 360px;
-    }
-
-    .container .content .topic .article .donate .donate_form .create_order {
-
-    }
-}
-
-@media (max-width: 768px) {
-    header .menu .horizontal_menu li i {
-        display: none;
-    }
-
-    .ant-menu-item, .ant-menu-submenu-title {
-        padding: 0 16px;
-    }
-
-    .container {
-        padding: 40px 0 0 0;
-    }
-
-    .container.user-center {
-        padding: 40px 0 30px 0;
-    }
-
-    .container .content {
-        padding: unset;
-    }
-
-    .container .breadcrumb {
-        margin: 35px 0;
-    }
-
-    .container .content .home .carousel {
-        padding: 40px 0 0 0;
-    }
-
-    .container .content .topic .banner img {
-        border-radius: unset;
-    }
-
-    .container .content .topic .article {
-        border-radius: unset;
-        padding: 36px 16px 20px 16px;
-    }
-
-    .container .content .topic .article.major .post_info {
-        border-radius: unset;
-    }
-
-    .gallery .banner {
-        margin: 30px 0 20px 0;
-    }
-
-    .ant-card {
-        border-radius: unset;
-    }
-
-    .login .wrapper {
-        display: none;
-    }
-
-    .login.activate .wrapper, .login .wrapper.registered {
-        display: flex;
-    }
-
-    .login .login-panel {
-        margin: unset;
-    }
-
-    .login .login-panel .logo {
-        padding: 26px 26px 10px 26px;
-    }
-
-    .user-panel {
-        border-radius: 0 !important;
-    }
-
-    footer {
-        margin: 0 auto;
-        width: 100%;
-        height: 50px;
-        border-top: none;
-        text-align: center
-    }
-
-    footer ul li {
-        float: none !important;
-        margin-right: 0;
-        font-size: 12px !important;
-        line-height: 20px !important;
-    }
-
-    footer ul li span {
-        display: none;
-    }
-
-    footer ul li a {
-        font-size: 12px !important;
-    }
-}
-
-@media (min-width: 768px) and (max-width: 992px) {
-    .container .content {
-        padding: unset;
-    }
-
-}
-
-@media (min-width: 992px) and (max-width: 1200px) {
-
-}
-
-@media (min-width: 1200px) {
-    .login .login-panel .welcome {
-        display: none;
-    }
-
-    .login.register .login-panel .welcome {
-        display: block;
-    }
-
-}
diff --git a/frontend/src/assets/css/style.less b/frontend/src/assets/css/style.less
index 4deca2c0..a1cb7b31 100644
--- a/frontend/src/assets/css/style.less
+++ b/frontend/src/assets/css/style.less
@@ -31,7 +31,6 @@ a {
     text-decoration: none;
     -webkit-transition: all .3s ease;
     -moz-transition: all .3s ease;
-    -ms-transition: all .3s ease;
     -o-transition: all .3s ease;
     transition: all .3s ease;
 
@@ -149,9 +148,34 @@ button {
     box-shadow: 0 0 30px rgba(200, 200, 200, 0.25);
 }
 
-.ant-collapse {
-    background: #ffffff;
-    @media (prefers-color-scheme: dark) {
-        background: #28292c;
-    }
+.ant-list-item-action {
+    margin-left: 0 !important;
 }
+
+/*@media (max-width: 900px) {
+
+    .ant-steps-navigation > .ant-steps-item::after {
+        position: relative;
+        top: -2px;
+        left: 50%;
+        display: block;
+        width: 8px;
+        height: 8px;
+        margin-bottom: 8px;
+        text-align: center;
+        transform: rotate(135deg);
+    }
+
+    .ant-steps-navigation > .ant-steps-item.ant-steps-item-active::before {
+        top: 0;
+        right: 0;
+        left: unset;
+        display: block;
+        width: 3px;
+        height: calc(100% - 24px);
+    }
+
+    .ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item, .ant-steps-horizontal.ant-steps-label-horizontal {
+        display: block;
+    }
+}*/
diff --git a/frontend/src/components/Logo/Logo.vue b/frontend/src/components/Logo/Logo.vue
index 2c7e535e..d60345b3 100644
--- a/frontend/src/components/Logo/Logo.vue
+++ b/frontend/src/components/Logo/Logo.vue
@@ -19,13 +19,20 @@ export default {
 
 <style lang="less" scoped>
 .logo {
-    margin: 8px 18px;
-    border-bottom: 1px solid #e8e8e8;
+    padding: 8px 25px;
+    -webkit-box-shadow: 1px 1px 0 0 #e8e8e8;
+    box-shadow: 1px 1px 0 0 #e8e8e8;
     transition: all 0.3s;
-    height: 56px;
-    width: 80%;
+    height: 64px;
+    width: 100%;
     overflow: hidden;
     display: inline-block;
+    background-color: #ffffff;
+    @media (prefers-color-scheme: dark) {
+        background-color: transparent;
+        -webkit-box-shadow: 1px 1px 0 0 #404040;
+        box-shadow: 1px 1px 0 0 #404040;
+    }
 
     img {
         height: 46px;
@@ -33,11 +40,11 @@ export default {
     }
 
     .text {
-        font-weight: 300;
-        font-size: 23px;
+        float: left;
+        font-size: 22px;
         line-height: 48px;
         height: 48px;
-        padding-left: 52px;
+        display: inline-block;
     }
 }
 </style>
diff --git a/frontend/src/components/PageHeader/PageHeader.vue b/frontend/src/components/PageHeader/PageHeader.vue
index c192e289..da44df00 100644
--- a/frontend/src/components/PageHeader/PageHeader.vue
+++ b/frontend/src/components/PageHeader/PageHeader.vue
@@ -68,7 +68,7 @@ export default {
     padding: 16px 32px 0;
     border-bottom: 1px solid #e8e8e8;
     @media (prefers-color-scheme: dark) {
-        background: transparent;
+        background: #28292c;
         border-bottom: unset;
     }
 
diff --git a/frontend/src/components/VueItextarea/VueItextarea.vue b/frontend/src/components/VueItextarea/VueItextarea.vue
index 90e8393c..f99b0f3d 100644
--- a/frontend/src/components/VueItextarea/VueItextarea.vue
+++ b/frontend/src/components/VueItextarea/VueItextarea.vue
@@ -1,5 +1,6 @@
 <template>
-    <codemirror v-model="current_value" :options="cmOptions"/>
+<!--    <codemirror v-model="current_value" :options="cmOptions"/>-->
+    <editor v-model="current_value" @init="editorInit" lang="nginx" theme="monokai" width="100%" height="1000"></editor>
 </template>
 <style lang="less">
 .cm-s-monokai {
@@ -7,7 +8,7 @@
 }
 </style>
 <script>
-import {codemirror} from 'vue-codemirror'
+//import {codemirror} from 'vue-codemirror'
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/theme/monokai.css'
 
@@ -16,7 +17,8 @@ import 'codemirror/mode/nginx/nginx'
 export default {
     name: 'vue-itextarea',
     components: {
-        codemirror
+       // codemirror
+        editor: require('vue2-ace-editor'),
     },
     props: {
         value: {},
@@ -48,5 +50,12 @@ export default {
             }
         }
     },
+    methods: {
+        editorInit: function () {
+            require('brace/ext/language_tools') //language extension prerequsite...
+            require('brace/mode/nginx')    //language
+            require('brace/theme/monokai')
+        }
+    }
 }
 </script>
diff --git a/frontend/src/layouts/BaseLayout.vue b/frontend/src/layouts/BaseLayout.vue
index fadfa540..7646ff03 100644
--- a/frontend/src/layouts/BaseLayout.vue
+++ b/frontend/src/layouts/BaseLayout.vue
@@ -17,6 +17,7 @@
                 :collapsible="true"
                 :style="{zIndex: 11}"
                 theme="light"
+                class="layout-sider"
             >
                 <side-bar/>
             </a-layout-sider>
@@ -47,7 +48,7 @@ import HeaderLayout from './HeaderLayout'
 import SideBar from './SideBar'
 import FooterLayout from './FooterLayout'
 import PageHeader from '@/components/PageHeader/PageHeader'
-import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
+import zh_CN from 'ant-design-vue/es/locale/zh_CN'
 
 export default {
     name: 'BaseLayout',
@@ -55,7 +56,7 @@ export default {
         return {
             collapsed: this.collapse(),
             zh_CN,
-            clientWidth: document.body.clientWidth
+            clientWidth: document.body.clientWidth,
         }
     },
     mounted() {
@@ -73,7 +74,28 @@ export default {
     methods: {}
 }
 </script>
+<style lang="less">
+.layout-sider .sidebar {
+    position: fixed;
+    width: 200px;
 
+    ul.ant-menu-inline.ant-menu-root {
+        height: calc(100vh - 120px);
+        overflow-y: auto;
+        overflow-x: hidden;
+
+        .ant-menu-item {
+            width: unset;
+        }
+    }
+
+    ul.ant-menu-inline-collapsed {
+        height: calc(100vh - 200px);
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+}
+</style>
 <style lang="less">
 @dark: ~"(prefers-color-scheme: dark)";
 
@@ -90,7 +112,17 @@ p {
     @media @dark {
         background-color: #28292c;
     }
-    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.01);
+    box-shadow: 2px 0 8px rgba(29, 35, 41, 0.05);
+}
+
+.ant-drawer-body {
+    .sidebar .logo {
+        box-shadow: 0 1px 0 0 #e8e8e8;
+    }
+
+    .ant-menu-inline .ant-menu-selected::after, .ant-menu-inline .ant-menu-item-selected::after {
+        border-right: 0 !important;
+    }
 }
 
 @media @dark {
diff --git a/frontend/src/layouts/HeaderLayout.vue b/frontend/src/layouts/HeaderLayout.vue
index c2d66ea3..47a0734d 100644
--- a/frontend/src/layouts/HeaderLayout.vue
+++ b/frontend/src/layouts/HeaderLayout.vue
@@ -34,17 +34,14 @@ export default {
 </script>
 
 <style lang="less" scoped>
-
 .header {
     height: 64px;
     padding: 0 20px 0 0;
     background: #fff;
     box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
-    border-bottom: 1px solid #e8e8e8;
     @media (prefers-color-scheme: dark) {
         background: #28292c;
-        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-        border-bottom: unset;
+        box-shadow: 1px 1px 0 0 #404040;
     }
     position: fixed;
     width: 100%;
diff --git a/frontend/src/layouts/SideBar.vue b/frontend/src/layouts/SideBar.vue
index a5125c5b..188b9cc2 100644
--- a/frontend/src/layouts/SideBar.vue
+++ b/frontend/src/layouts/SideBar.vue
@@ -70,7 +70,9 @@ export default {
         },
         visible(sidebars) {
             return sidebars.filter(c => {
-                return c.meta === undefined || (c.meta.hiddenInSidebar === undefined || c.meta.hiddenInSidebar !== true)
+                return c.meta === undefined ||
+                    (c.meta.hiddenInSidebar === undefined || c.meta.hiddenInSidebar !== true)
+                    && (c.meta.power === undefined || this.$store.state.user.power === c.meta.power)
             })
         }
     }
@@ -78,22 +80,7 @@ export default {
 </script>
 
 
-<style lang="less" scoped>
-.sidebar {
-    position: fixed;
-    width: 200px;
-
-    .ant-menu-inline {
-        height: calc(100vh - 120px);
-        overflow-y: auto;
-        overflow-x: hidden;
-
-        .ant-menu-item {
-            width: unset;
-        }
-    }
-}
-
+<style lang="less">
 .ant-layout-sider-collapsed .logo {
     overflow: hidden;
 }
diff --git a/frontend/src/views/domain/DomainEdit.vue b/frontend/src/views/domain/DomainEdit.vue
index 1fae423b..b5d148f1 100644
--- a/frontend/src/views/domain/DomainEdit.vue
+++ b/frontend/src/views/domain/DomainEdit.vue
@@ -248,6 +248,10 @@ export default {
 
 <style lang="less">
 .ant-collapse {
+    background: #ffffff;
+    @media (prefers-color-scheme: dark) {
+        background: #28292c;
+    }
     margin-bottom: 20px;
 
     .ant-collapse-item {
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index f0276c2c..1c4bce1d 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2939,6 +2939,10 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+brace@^0.11.0, "brace@https://github.com/nightwing/brace":
+  version "0.11.1"
+  resolved "https://github.com/nightwing/brace#46be64e49976bca45a9425addd056142c53960eb"
+
 braces@^2.3.1, braces@^2.3.2:
   version "2.3.2"
   resolved "https://registry.npm.taobao.org/braces/download/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
@@ -10421,6 +10425,13 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.npm.taobao.org/vue-template-es2015-compiler/download/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=
 
+vue2-ace-editor@^0.0.15:
+  version "0.0.15"
+  resolved "https://registry.yarnpkg.com/vue2-ace-editor/-/vue2-ace-editor-0.0.15.tgz#569b208e54ae771ae1edd3b8902ac42f0edc74e3"
+  integrity sha512-e3TR9OGXc71cGpvYcW068lNpRcFt3+OONCC81oxHL/0vwl/V3OgqnNMw2/RRolgQkO/CA5AjqVHWmANWKOtNnQ==
+  dependencies:
+    brace "^0.11.0"
+
 vue@^2.6.11:
   version "2.6.12"
   resolved "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz?cache=0&sync_timestamp=1614614707443&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
diff --git a/server/api/analytic.go b/server/api/analytic.go
index c5f10511..2ca3a54f 100644
--- a/server/api/analytic.go
+++ b/server/api/analytic.go
@@ -8,6 +8,7 @@ import (
 	"github.com/shirou/gopsutil/v3/host"
 	"github.com/shirou/gopsutil/v3/load"
 	"github.com/shirou/gopsutil/v3/mem"
+	"github.com/shirou/gopsutil/v3/net"
 	"net/http"
 	"runtime"
 	"strconv"
@@ -81,6 +82,9 @@ func Analytic(c *gin.Context) {
 			response["disk_total"] = humanize.Bytes(diskUsage.Total)
 			response["disk_percentage"], _ = strconv.ParseFloat(fmt.Sprintf("%.2f", diskUsage.UsedPercent), 64)
 
+			network, _ := net.IOCounters(false)
+			response["network"] = network
+
 			m, _ := json.Marshal(response)
 			message = m
 
diff --git a/server/test/analytic_test.go b/server/test/analytic_test.go
index 03ac6722..e593a1d7 100644
--- a/server/test/analytic_test.go
+++ b/server/test/analytic_test.go
@@ -6,6 +6,7 @@ import (
 	"github.com/shirou/gopsutil/v3/disk"
 	"github.com/shirou/gopsutil/v3/load"
 	"github.com/shirou/gopsutil/v3/mem"
+	"github.com/shirou/gopsutil/v3/net"
 	"runtime"
 	"testing"
 	"time"
@@ -33,4 +34,10 @@ func TestGoPsutil(t *testing.T) {
 
 	diskUsage, _ := disk.Usage(".")
 	fmt.Println(diskUsage.String())
+
+	network, _ := net.IOCounters(false)
+	fmt.Println(network)
+	time.Sleep(time.Second)
+	network, _ = net.IOCounters(false)
+	fmt.Println(network)
 }