diff --git a/nezha-fronted/src/assets/css/components/common/detailView/detailViewTopSearch.scss b/nezha-fronted/src/assets/css/components/common/detailView/detailViewTopSearch.scss
index ba26178c0..036157f53 100644
--- a/nezha-fronted/src/assets/css/components/common/detailView/detailViewTopSearch.scss
+++ b/nezha-fronted/src/assets/css/components/common/detailView/detailViewTopSearch.scss
@@ -41,6 +41,12 @@
     max-width: 100px;
   }
 }
+.detail-top-search-dropdown.right-box-max-width {
+  .el-dropdown-menu__item {
+    max-width: unset;
+    min-width: 200px;
+  }
+}
 .detail-top-search-dropdown{
   max-height: 300px;
   overflow-y: auto;
@@ -52,10 +58,10 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     display: flex;
+    justify-content: space-between;
     .el-checkbox{
       width: calc(100% - 20px);
       height: 36px;
-      padding: 0 0 0 20px;
       display: flex;
       align-items: center;
       .el-checkbox__label{
@@ -72,12 +78,15 @@
     .children-title-name{
       width: calc(100% - 20px);
       height: 36px;
-      padding-left: 20px;
+      padding-right: 20px;
       font-size: 12px;
       color: $--color-text-secondary;
       line-height: 30px;
     }
   }
+  .el-checkbox-group {
+    padding: 0 20px;
+  }
   .el-dropdown-menu__item:not(.is-disabled):hover{
     color: $--color-text-secondary;
     background: $--background-color-base !important;
diff --git a/nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss b/nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss
index cb86e03d2..71b5507a2 100644
--- a/nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss
+++ b/nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss
@@ -13,7 +13,7 @@
 }
 
 .props-box .el-tabs--card > .el-tabs__header {
-  background: #EEEEEE;
+  background-color: $--background-color-base;
   border: none;
 }
 
@@ -31,26 +31,11 @@
   height: 31px;
   line-height: 31px;
 }
-.metric-selector-input-box {
-  width: calc(100% - 120px) !important;
-}
 
 .query-row .input-box {
   margin: 0;
 }
 
-.legend-title {
-  width: 100px;
-  margin-right: 10px;
-  text-align: left;
-  padding-left: 0;
-  margin-left: 10px;
-  height: 32px;
-  line-height: 32px;
-  font-size: 14px;
-  color: $--color-text-regular;
-}
-
 .project-title {
   background: #eeeeee;
   height: 36px;
@@ -145,7 +130,7 @@
     background: $--background-color-base;
     font-size: 14px;
     padding: 0 10px;
-
+    color: $--color-text-regular;
     .el-form-item__content {
       height: 100%;
       line-height: 32px;
@@ -211,6 +196,39 @@
     margin-right: 0 !important;
   }
 
+  .metric-selector-input-box {
+    width: calc(100% - 120px) !important;
+  }
+  .legend-title {
+    width: 100px;
+    margin-right: 10px;
+    text-align: left;
+    padding-left: 0;
+    margin-left: 10px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 14px;
+    color: $--color-text-regular;
+    background: transparent;
+  }
+  .el-textarea {
+    .el-textarea__inner {
+      border: 1px solid $--border-color-light !important;
+    }
+    .el-textarea__inner:focus {
+      border: 1px solid $--color-primary !important;
+    }
+    .el-textarea__inner:hover {
+      border: 1px solid $--border-color-light-hover !important;
+    }
+  }
+  .el-input__inner:hover,.el-select:hover .el-input__inner {
+    border: 1px solid $--border-color-light-hover !important;
+  }
+  .form-row-item.form-row-item-border {
+    border: 1px dashed $--border-color-light;
+  }
+
   .el-cascader-node {
     max-width: 200px;
     overflow: hidden;
@@ -253,7 +271,7 @@
 
   .el-collapse-item__header {
     padding: 0 10px;
-    background-color: #eeeeee;
+    background-color: $--background-color-base;
     height: 32px;
     font-size: 14px;
     color: $--color-text-primary;
@@ -601,12 +619,16 @@
   height: 22px;
 }
 .color-before-select {
-  width: 60px;
+  width: 60px !important;
   border-radius: 4px 0 0 4px;
-  background: $--border-color-light;
+  cursor: pointer;
+}
+.color-show {
+  cursor: pointer;
 }
 .color-before-select .el-input__inner {
-  background: rgb(245, 247, 250);
+  background: $--right-box-sub-title-background-color;
+  border-color: $--border-color-light;
 }
 
 .color-before-select .el-input__prefix {
@@ -618,4 +640,5 @@
 
 .color-before-select .el-select-dropdown__item {
   text-align: center;
+  overflow: unset;
 }
diff --git a/nezha-fronted/src/assets/css/components/common/project/topology.scss b/nezha-fronted/src/assets/css/components/common/project/topology.scss
index 8240f063a..2ed6b49d0 100644
--- a/nezha-fronted/src/assets/css/components/common/project/topology.scss
+++ b/nezha-fronted/src/assets/css/components/common/project/topology.scss
@@ -410,7 +410,7 @@
 }
 
 .special-select .el-input.el-input--prefix.el-input--suffix, .line-width .el-input.el-input--prefix.el-input--suffix {
-  border: 1px solid #DCDFE6;
+  border: 1px solid $--border-color-light;
   height: 28px;
 }
 
diff --git a/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss b/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
index d1932e062..c3789e5c2 100644
--- a/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
+++ b/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
@@ -15,11 +15,11 @@
     width: calc(50% - 10px);
     margin-right: 10px;
     min-width: 435px;
-    div.page {
-      textarea {
-        display: none;
-      }
-    }
+    //div.page {
+    //  textarea {
+    //    display: none;
+    //  }
+    //}
     .project-box.list-page {
       width: 100%;
       height: calc(100% - 8px)!important;
diff --git a/nezha-fronted/src/components/common/detailView/detailViewTopSearch.vue b/nezha-fronted/src/components/common/detailView/detailViewTopSearch.vue
index 2fc9dfff5..6f4714f24 100644
--- a/nezha-fronted/src/components/common/detailView/detailViewTopSearch.vue
+++ b/nezha-fronted/src/components/common/detailView/detailViewTopSearch.vue
@@ -89,7 +89,7 @@
                 </div>
                 <i class="nz-icon nz-icon-arrow-down search-value"/>
               </div>
-              <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top detail-top-search-dropdown">
+              <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top detail-top-search-dropdown right-box-max-width">
                 <div style="text-align: center;"><el-input style="width: calc(100% - 40px)" size="small" v-model="searchStr" @input="(val)=>{searchStrChange(val,key)}"  suffix-icon="el-icon-search"/></div>
                  <el-checkbox-group v-model="selectValue[item.key]">
                     <el-dropdown-item v-for="(item3,index3) in item.children" :key="index3" class="nz-dropdown-menu__item">
diff --git a/nezha-fronted/src/components/common/nezhaColor.vue b/nezha-fronted/src/components/common/nezhaColor.vue
index fdd0e5a0c..22266e417 100644
--- a/nezha-fronted/src/components/common/nezhaColor.vue
+++ b/nezha-fronted/src/components/common/nezhaColor.vue
@@ -17,7 +17,7 @@
       </div>
     </div>
 
-    <div v-if="showColorPicker" class="vue-color" :style="{top:position.y+'px',left:position.x+'px'}" ref="colorBox">
+    <div v-if="showColorPicker" class="vue-color right-box-select-top" :style="{top:position.y+'px',left:position.x+'px'}" ref="colorBox">
       <el-row v-if="!single" class="color-tab">
         <div v-for="item in valueArr" :key="item.key" :class="[keyName==item.name?'color-active':'']" @click="colorTabChange(item)">{{item.name}}</div>
       </el-row>
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
index a3ad75f8a..feb4e2b23 100644
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
@@ -9,7 +9,7 @@
           <el-form-item v-if="!selection.pen.type&&!fromDiagram" class="sub-box half-form-item" label="Module"
                         prop="moduleId">
             <el-select v-model="selection.pen.data.moduleId" :placeholder="$t('el.select.placeholder')"
-                       :popper-append-to-body="true" popper-class="asset-dropdown" size="small"
+                       :popper-append-to-body="true" popper-class="asset-dropdown right-box-select-top" size="small"
                        @change="moduleIdChange">
               <el-option
                 v-for="item in modules"
@@ -65,7 +65,7 @@
                     </el-col>
                     <el-col style="width: calc(100% - 120px)">
                       <el-select v-model="selection.pen.data.aggregation" :placeholder="$t('el.select.placeholder')"
-                                 :popper-append-to-body="true" class="right-box-row-with-btn"
+                                 :popper-append-to-body="true" class="right-box-row-with-btn right-box-select-top right-public-box-dropdown-top"
                                  popper-class="chart-box-dropdown-small"
                                  size="mini"
                                  style="width: 100%" value-key="chartType">
@@ -130,6 +130,7 @@
                       <el-select v-if="selection.pen&&selection.pen.type&&item.level!==0"
                                  v-model="item.animateType"
                                  :popper-append-to-body="true"
+                                 popper-class="right-box-select-top right-public-box-dropdown-top"
                                  size="small">
                         <el-option
                           v-for="(item,index) in lineAnimateOptions"
@@ -142,6 +143,7 @@
                       <el-select v-if="selection.pen&&!selection.pen.type&&item.level!==0"
                                  v-model="item.animateType"
                                  :popper-append-to-body="true"
+                                 popper-class="right-box-select-top right-public-box-dropdown-top"
                                  size="small">
                         <el-option
                           v-for="(item,index) in nodeAnimateOptions"
@@ -198,7 +200,7 @@
                              :props="{ expandTrigger: 'hover',emitPath:false }"
                              :show-all-levels="false"
                              filterable
-                             popper-class="dc-dropdown"
+                             popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top"
                              size="mini"
                 >
                 </el-cascader>
@@ -207,7 +209,7 @@
                             prop="type">
                 <el-select v-model="selection.pen.data.type" :placeholder="$t('el.select.placeholder')"
                            :popper-append-to-body="true" class="right-box-row-with-btn"
-                           popper-class="chart-box-dropdown-small"
+                           popper-class="chart-box-dropdown-small right-box-select-top"
                            size="mini" value-key="chartType">
                   <el-option v-for="item in chartTypeList" :key="item.id" :label="item.name" :value="item.id">
                     <span class="panel-dropdown-label-txt">{{ item.name }}</span>
@@ -216,8 +218,8 @@
               </el-form-item>
               <!--value mapping-->
               <el-row v-for="(item,index) in selection.pen.data.expressAllArr" :key="index"
-                      class="element-item form-row-item"
-                      style="width: 100%; border: 1px dashed rgba(0,0,0,0.15); border-radius: 2px; padding-right: 60px;">
+                      class="element-item form-row-item form-row-item-border"
+                      style="width: 100%; border-radius: 2px; padding-right: 60px;">
                 <promql-input
                   :from-father-data="true"
                   :metricOptionsParent="metricOptions"
@@ -416,7 +418,7 @@
                 <div>{{ $t('project.topology.gradient') }}</div>
                 <div class="p10 pl0 gradient-to">
                   <el-select :popper-append-to-body="true" v-model="selection.pen.gradientType" size="small"
-                             class="color-before-select" popper-class="color-before-select" @change="bkTypeChange">
+                             class="color-before-select" popper-class="color-before-select right-box-select-top right-public-box-dropdown-top" @change="bkTypeChange">
                     <div slot="prefix">
                       <i
                         :class="['nz-icon',bkTypeOption.find(item1=>item1.id==selection.pen.data.gradientType).label,bkTypeOption.find(item1=>item1.id==selection.pen.data.gradientType).fontSize]"></i>
@@ -457,7 +459,7 @@
               <div class="props-pen-item special-select">
                 <div>{{ $t('project.topology.lineDash') }}</div>
                 <div class="p10 pl0">
-                  <el-select :popper-append-to-body="true" v-model="selection.pen.dash" size="small"
+                  <el-select :popper-append-to-body="true" v-model="selection.pen.dash" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
                              @change="onChange">
                     <div slot="prefix">
                       <div class="icon-item">
@@ -487,7 +489,7 @@
               <div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
                 <div>{{ $t('project.topology.lineType') }}</div>
                 <div class="p10 pl0">
-                  <el-select :popper-append-to-body="true" v-model="selection.pen.name" size="small"
+                  <el-select :popper-append-to-body="true" v-model="selection.pen.name" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
                              @change="onClickName">
                     <div slot="prefix">
                       <div class="icon-item">
@@ -517,7 +519,7 @@
               <div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
                 <div>{{ $t('project.topology.fromArrow') }}</div>
                 <div class="p10 pl0">
-                  <el-select :popper-append-to-body="true" v-model="selection.pen.fromArrow" size="small"
+                  <el-select :popper-append-to-body="true" v-model="selection.pen.fromArrow" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
                              @change="onClickFromArrow">
                     <div slot="prefix">
                       <div class="icon-item">
@@ -566,7 +568,7 @@
               <div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
                 <div>{{ $t('project.topology.toArrow') }}</div>
                 <div class="p10 pl0">
-                  <el-select :popper-append-to-body="true" v-model="selection.pen.toArrow" size="small"
+                  <el-select :popper-append-to-body="true" v-model="selection.pen.toArrow" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
                              @change="onClickToArrow">
                     <div slot="prefix">
                       <div class="icon-item">
@@ -685,7 +687,7 @@
                 <div>{{ $t('project.topology.textAlign') }}</div>
                 <div class="p10 pl0">
                   <el-select :placeholder="$t('el.select.placeholder')" :popper-append-to-body="true"
-                             class="right-box-row-with-btn no-style-class" popper-class="chart-box-dropdown-small"
+                             class="right-box-row-with-btn no-style-class" popper-class="chart-box-dropdown-small right-box-select-top right-public-box-dropdown-top"
                              size="mini"
                              v-model="selection.pen.textAlign" value-key="chartType" @change="onChange">
                     <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in textAlignOptions">
@@ -699,7 +701,7 @@
                 <div>{{ $t('project.topology.textBaseline') }}</div>
                 <div class="p10 pl0">
                   <el-select :placeholder="$t('el.select.placeholder')" :popper-append-to-body="true"
-                             class="right-box-row-with-btn no-style-class" popper-class="chart-box-dropdown-small"
+                             class="right-box-row-with-btn no-style-class" popper-class="chart-box-dropdown-small right-box-select-top right-public-box-dropdown-top"
                              size="mini"
                              v-model="selection.pen.textBaseline" value-key="chartType" @change="onChange">
                     <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in textBaselineOptions">
diff --git a/nezha-fronted/src/permission.js b/nezha-fronted/src/permission.js
index 4eba56f1a..2751fa163 100644
--- a/nezha-fronted/src/permission.js
+++ b/nezha-fronted/src/permission.js
@@ -5,6 +5,7 @@ import ElementUI from 'element-ui'
 import Vue from 'vue'
 import i18n, { loadI18n } from './components/common/i18n'
 import VueResource from 'vue-resource'
+import bus from "@/libs/bus";
 
 Vue.use(VueResource)
 
@@ -39,11 +40,18 @@ router.beforeEach((to, from, next) => {
               next({ path: '/setup' })
             } else {
               if (localStorage.getItem('nz-token')) {
-                next({
-                  path: 'overview',
-                  query: {
-                    t: +new Date()
-                  }
+                post('/sys/user/permissions', { token: localStorage.getItem('nz-token') }).then(res => {
+                  const menuList = sortByOrderNum(res.data.menus)
+                  store.commit('setMenuList', menuList)
+                  store.commit('setButtonList', res.data.buttons)
+                  store.commit('setRoleList', res.data.roles)
+                  bus.$emit('login')
+                  router.push({
+                    path: menuList[0].children[0].route,
+                    query: {
+                      t: +new Date()
+                    }
+                  })
                 })
               } else {
                 next()
diff --git a/nezha-fronted/src/store/user.js b/nezha-fronted/src/store/user.js
index 5208878a0..1a25e57a8 100644
--- a/nezha-fronted/src/store/user.js
+++ b/nezha-fronted/src/store/user.js
@@ -83,7 +83,7 @@ const user = {
         store.commit('setRoleList', res.data.roles)
         bus.$emit('login')
         router.push({
-          path: menuList[0].children[0].name,
+          path: menuList[0].children[0].route,
           query: {
             t: +new Date()
           }