From 3b00a525387f6b11de4a2f4f765101194e002da9 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Wed, 11 Dec 2019 17:15:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20project=E9=83=A8=E5=88=86=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.具体为endpoint的弹框，包括param、host
2.部分样式统一抽取
---
 nezha-fronted/src/assets/css/main.css         | 175 ++++++-
 .../src/components/common/language/en.js      |   9 +-
 .../src/components/page/alert/config.vue      | 127 +----
 .../src/components/page/config/account.vue    | 373 +--------------
 .../src/components/page/config/promServer.vue | 142 +-----
 .../src/components/page/project/project.vue   | 436 ++++++++++++------
 6 files changed, 495 insertions(+), 767 deletions(-)

diff --git a/nezha-fronted/src/assets/css/main.css b/nezha-fronted/src/assets/css/main.css
index 58291f8cf..e12c91626 100644
--- a/nezha-fronted/src/assets/css/main.css
+++ b/nezha-fronted/src/assets/css/main.css
@@ -125,11 +125,13 @@ color: white;
 }
 .top-tools .top-tool-btn-active {
   color: white;
+  border: 1px solid #656565;
   background-color: #656565;
 }
 .top-tools .top-tool-btn-active:focus, .top-tools .top-tool-btn-active:hover {
   color: white;
   background-color: #656565;
+  border: 1px solid #656565;
 }
 .top-tools .top-tool-btn-txt {
   font-size: 14px;
@@ -153,6 +155,7 @@ color: white;
   text-align: center;
 }
   /* end--分页*/
+
   /* begin--右弹框滑入滑出动画*/
 @keyframes slide-in-from-right {
   from {right: -800px}
@@ -169,9 +172,179 @@ color: white;
   animation: slide-out-to-right 0.4s;
 }
   /* end--右弹框滑入滑出动画*/
+
+  /* begin--右子弹框动画*/
+@keyframes appear {
+  from {opacity:0}
+  to {opacity:1}
+}
+@keyframes disappear {
+  from {opacity:1}
+  to {opacity:0}
+}
+.right-sub-box-enter-active {
+  animation: appear 0.4s;
+}
+.right-sub-box-leave-active {
+  animation: disappear 0.4s;
+}
+  /* end--右子弹框动画*/
 /* end--右侧内容*/
 
-/* start--自定义可编辑的el-select下拉框样式*/
+/* begin--右侧弹框*/
+.right-box, .right-sub-box {
+  position: fixed;
+  top: 80px;
+  right: 15px;
+  z-index: 1;
+  border-radius: 8px;
+  box-shadow: 0 0 15px #ccc;
+  background-color: white;
+  padding: 0 20px;
+}
+
+  /*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
+.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-endpoint {
+  width: 520px;
+  height: calc(100% - 100px);
+}
+  /* begin--右侧弹框--顶部按钮*/
+.right-box-top-btns {
+  text-align: center;
+}
+.right-box-top-btn {
+  border-radius: 0 0 9px 9px;
+  float: right;
+  color: #656565;
+  height: 30px;
+  font-size: 12px;
+  padding: 3px 8px 1px 8px;
+  border: 1px solid #aaaaaa;
+  border-top: none;
+  cursor: pointer;
+  margin-left: 20px;
+}
+.right-box-top-btn-full {
+  background-color: #656565;
+  border: 1px solid #656565;
+  border-top: none;
+  color: white;
+}
+  /* end--右侧弹框--顶部按钮*/
+
+  /* begin--右侧弹框--内容*/
+.right-box-title {
+  height: 30px;
+  line-height: 40px;
+  text-align: left;
+  display: inline-block;
+}
+.right-box-form {
+  margin-top: 35px;
+}
+.right-box-form-row {
+  margin-top: 20px;
+}
+.right-box-form-label {
+  margin-bottom: 8px;
+  text-align: left;
+}
+.right-box-form-content {
+  line-height: 32px;
+  text-align: left;
+  width: 100%;
+}
+.right-box-form-content-txt {
+  padding-left: 11px;
+}
+.right-box-form-content .el-select {
+  width: 100%;
+}
+.right-box-form-content .right-box-row-with-btn {
+  width: calc(100% - 38px);
+  vertical-align: top;
+}
+.right-box-row-btn {
+  width: 33px;
+  height: 33px;
+  display: inline-block;
+  text-align: center;
+  border-radius: 5px;
+  border: 1px solid #DCDFE6;
+  box-sizing: border-box;
+  color: #C7C9CE;
+  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+  cursor: pointer;
+}
+.right-box-row-btn-active {
+  color: white;
+  border: 1px solid #656565;
+  background-color: #656565;
+}
+.right-box-row-btn:hover {
+  border: 1px solid #C0C4CC;
+}
+.right-box-row-btn-active:hover {
+  border: 1px solid #656565;
+}
+  /* end--右侧弹框--内容*/
+
+  /* begin--右侧弹框--底部按钮*/
+.right-box-bottom-btns {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 40px;
+  left: 0;
+  text-align: center;
+}
+.right-box-bottom-btn:first-of-type {
+  border-bottom-left-radius: 8px;
+}
+.right-box-bottom-btn:last-of-type{
+  border-bottom-right-radius: 8px;
+}
+.right-box-bottom-btn {
+  display: inline-block;
+  background-color: #656565;
+  color: white;
+  height: 100%;
+  line-height: 40px;
+  cursor: pointer;
+  width: 100%;
+}
+.config-dropdown-label-input {
+  width: 50%;
+  display: inline-block;
+}
+.right-box-bottom-btn-cancel {
+  background-color: #DADADA;
+  color: #656565;
+}
+.right-box-bottom-btn-50 {
+  width: 50%;
+}
+  /* end--右侧弹框--底部按钮*/
+/* end--右侧弹框*/
+/* begin--endpoint->子弹框asset搜索框前缀和后缀*/
+.right-sub-box .el-input-group__append, .right-sub-box .el-input-group__prepend {
+  background-color: #656565;
+  color: white;
+  vertical-align: middle;
+  display: table-cell;
+  position: relative;
+  padding: 0 8px;
+  border: none;
+  font-size: 13px;
+}
+.right-sub-box .el-input-group__prepend {
+  border-radius: 4px 0 0 4px;
+}
+.right-sub-box .el-input-group__append {
+  border-radius: 0 4px 4px 0;
+}
+/* end--endpoint->子弹框asset搜索框前缀和后缀*/
+/* begin--自定义可编辑的el-select下拉框样式*/
 .config-dropdown {
   width: 550px;
 }
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 575f2beeb..6256b4bf0 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -14,7 +14,8 @@ const en = {
     save: 'Save',
     search: 'Search',
     add: "Add",
-    option: "Option"
+    option: "Option",
+    clearAll: "Clear All"
   },
   asset:{
     tableTitle: {
@@ -103,6 +104,12 @@ const en = {
     }
   },
   project: {
+    project: {
+      project: "Project"
+    },
+    module: {
+      module: "Module"
+    },
     endpoint: {
       createEndpoint: "Create Endpoint",
       editEndpoint: "Edit Endpoint",
diff --git a/nezha-fronted/src/components/page/alert/config.vue b/nezha-fronted/src/components/page/alert/config.vue
index be95615e6..c5f0c8f83 100644
--- a/nezha-fronted/src/components/page/alert/config.vue
+++ b/nezha-fronted/src/components/page/alert/config.vue
@@ -19,127 +19,6 @@
   .account-list-option .el-icon-view:hover {
     color: #409EFF;
   }
-  /* begin--右侧弹框*/
-  .right-box {
-    position: fixed;
-    top: 80px;
-    right: 15px;
-    z-index: 1;
-    border-radius: 8px;
-    box-shadow: 0 0 15px #ccc;
-    background-color: white;
-    padding: 0 20px;
-  }
-  .right-box-account {
-    width: 550px;
-    height: calc(100% - 100px);
-  }
-  /* begin--右侧弹框--顶部按钮*/
-  .right-box-top-btns {
-    text-align: center;
-  }
-  .right-box-top-btn {
-    border-radius: 0 0 9px 9px;
-    float: right;
-    color: #656565;
-    height: 30px;
-    font-size: 12px;
-    padding: 3px 8px 1px 8px;
-    border: 1px solid #aaaaaa;
-    border-top: none;
-    cursor: pointer;
-    margin-left: 20px;
-  }
-  .right-box-top-btn-full {
-    background-color: #656565;
-    border: 1px solid #656565;
-    border-top: none;
-    color: white;
-   }
-  /* end--右侧弹框--顶部按钮*/
-
-  /* begin--右侧弹框--内容*/
-  .right-box-title {
-    height: 30px;
-    line-height: 40px;
-    text-align: left;
-  }
-  .right-box-form {
-    margin-top: 35px;
-  }
-  .right-box-form-row {
-    margin-top: 25px;
-  }
-  .right-box-form-label {
-    margin-bottom: 8px;
-    text-align: left;
-  }
-  .right-box-form-content {
-    line-height: 32px;
-    text-align: left;
-    width: 100%;
-  }
-  .right-box-form-content-txt {
-    padding-left: 11px;
-  }
-  .right-box-form-content .el-select {
-    width: calc(100% - 38px);
-    vertical-align: top;
-  }
-  .el-select-add-btn {
-    width: 33px;
-    height: 33px;
-    display: inline-block;
-    text-align: center;
-    border-radius: 5px;
-    border: 1px solid #DCDFE6;
-    box-sizing: border-box;
-    color: #C7C9CE;
-    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
-  }
-  .el-select-add-btn:hover {
-    border: 1px solid #C0C4CC;
-    cursor: pointer;
-  }
-  /* end--右侧弹框--内容*/
-
-  /* begin--右侧弹框--底部按钮*/
-  .right-box-bottom-btns {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 40px;
-    left: 0;
-    text-align: center;
-  }
-  .right-box-bottom-btn:first-of-type {
-    border-bottom-left-radius: 8px;
-  }
-  .right-box-bottom-btn:last-of-type{
-    border-bottom-right-radius: 8px;
-  }
-  .right-box-bottom-btn {
-    display: inline-block;
-    background-color: #656565;
-    color: white;
-    height: 100%;
-    line-height: 40px;
-    cursor: pointer;
-    width: 100%;
-  }
-  .config-dropdown-label-input {
-    width: 50%;
-    display: inline-block;
-  }
-  .right-box-bottom-btn-cancel {
-    background-color: #DADADA;
-    color: #656565;
-  }
-  .right-box-bottom-btn-50 {
-    width: 50%;
-  }
-  /* end--右侧弹框--底部按钮*/
-  /* end--右侧弹框*/
 </style>
 <template>
     <div class="account">
@@ -190,7 +69,7 @@
         </div>
 
         <transition name="right-box">
-            <div class="right-box right-box-account" v-if="rightBox.show">
+            <div class="right-box right-box-alert-config" v-if="rightBox.show">
                 <!-- begin--顶部按钮-->
                 <div class="right-box-top-btns">
                     <div class="right-box-top-btn right-box-top-btn-full" @click="esc()">
@@ -304,7 +183,7 @@
                     <div class="right-box-form-row">
                         <div class="right-box-form-label">{{$t('config.account.receiver')}}</div>
                         <div class="right-box-form-content">
-                            <el-select value-key="id" popper-class="config-dropdown" v-model="alertRule.receiver" placeholder="" v-if="rightBox.isEdit" size="small">
+                            <el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown" v-model="alertRule.receiver" placeholder="" v-if="rightBox.isEdit" size="small">
                                 <el-option
                                   @click.native="blurEditReceiver()"
                                   v-for="item in receiverData"
@@ -327,7 +206,7 @@
                                     <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelReceiver(item)"><i class="el-icon-delete"></i></span>
                                 </el-option>
                             </el-select>
-                            <div class="el-select-add-btn" v-if="rightBox.isEdit">
+                            <div class="right-box-row-btn" v-if="rightBox.isEdit">
                                 <span class="el-icon-plus"></span>
                             </div>
                             <div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{alertRule.receiver}}</div>
diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue
index 92f1a4d0e..def7d4c21 100644
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -25,127 +25,6 @@
   .content-right-option .el-icon-view:hover {
     color: #409EFF;
   }
-  /* begin--右侧弹框*/
-  .right-box {
-    position: fixed;
-    top: 80px;
-    right: 15px;
-    z-index: 1;
-    border-radius: 8px;
-    box-shadow: 0 0 15px #ccc;
-    background-color: white;
-    padding: 0 20px;
-  }
-  .right-box-account {
-    width: 550px;
-    height: calc(100% - 100px);
-  }
-  /* begin--右侧弹框--顶部按钮*/
-  .right-box-top-btns {
-    text-align: center;
-  }
-  .right-box-top-btn {
-    border-radius: 0 0 9px 9px;
-    float: right;
-    color: #656565;
-    height: 30px;
-    font-size: 12px;
-    padding: 3px 8px 1px 8px;
-    border: 1px solid #aaaaaa;
-    border-top: none;
-    cursor: pointer;
-    margin-left: 20px;
-  }
-  .right-box-top-btn-full {
-    background-color: #656565;
-    border: 1px solid #656565;
-    border-top: none;
-    color: white;
-   }
-  /* end--右侧弹框--顶部按钮*/
-
-  /* begin--右侧弹框--内容*/
-  .right-box-title {
-    height: 30px;
-    line-height: 40px;
-    text-align: left;
-  }
-  .right-box-form {
-    margin-top: 35px;
-  }
-  .right-box-form-row {
-    margin-top: 25px;
-  }
-  .right-box-form-label {
-    margin-bottom: 8px;
-    text-align: left;
-  }
-  .right-box-form-content {
-    line-height: 32px;
-    text-align: left;
-    width: 100%;
-  }
-  .right-box-form-content-txt {
-    padding-left: 11px;
-  }
-  .right-box-form-content .el-select {
-    width: calc(100% - 38px);
-    vertical-align: top;
-  }
-  .el-select-add-btn {
-    width: 33px;
-    height: 33px;
-    display: inline-block;
-    text-align: center;
-    border-radius: 5px;
-    border: 1px solid #DCDFE6;
-    box-sizing: border-box;
-    color: #C7C9CE;
-    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
-  }
-  .el-select-add-btn:hover {
-    border: 1px solid #C0C4CC;
-    cursor: pointer;
-  }
-  /* end--右侧弹框--内容*/
-
-  /* begin--右侧弹框--底部按钮*/
-  .right-box-bottom-btns {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 40px;
-    left: 0;
-    text-align: center;
-  }
-  .right-box-bottom-btn:first-of-type {
-    border-bottom-left-radius: 8px;
-  }
-  .right-box-bottom-btn:last-of-type{
-    border-bottom-right-radius: 8px;
-  }
-  .right-box-bottom-btn {
-    display: inline-block;
-    background-color: #656565;
-    color: white;
-    height: 100%;
-    line-height: 40px;
-    cursor: pointer;
-    width: 100%;
-  }
-  .config-dropdown-label-input {
-    width: 50%;
-    display: inline-block;
-  }
-  .right-box-bottom-btn-cancel {
-    background-color: #DADADA;
-    color: #656565;
-  }
-  .right-box-bottom-btn-50 {
-    width: 50%;
-  }
-  /* end--右侧弹框--底部按钮*/
-  /* end--右侧弹框*/
 
   /* begin--右弹框滑入滑出动画*/
   @keyframes slide-in-from-right {
@@ -289,7 +168,7 @@
                     <div class="right-box-form-row">
                         <div class="right-box-form-label">{{$t('config.account.receiver')}}</div>
                         <div class="right-box-form-content">
-                            <el-select value-key="id" popper-class="config-dropdown" multiple v-model="user.receiver" placeholder="" v-if="rightBox.isEdit" size="small">
+                            <el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown" multiple v-model="user.receiver" placeholder="" v-if="rightBox.isEdit" size="small">
                                 <el-option
                                   @click.native="blurEditReceiver()"
                                   v-for="item in receiverData"
@@ -312,7 +191,7 @@
                                     <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelReceiver(item)"><i class="el-icon-delete"></i></span>
                                 </el-option>
                             </el-select>
-                            <div class="el-select-add-btn" v-if="rightBox.isEdit">
+                            <div class="right-box-row-btn" v-if="rightBox.isEdit">
                                 <span class="el-icon-plus"></span>
                             </div>
                             <div class="right-box-form-content-txt" v-if="!rightBox.isEdit">
@@ -413,7 +292,6 @@ export default {
           label: this.$t('config.account.createTime'),
           prop: 'createTime',
           show: true,
-          width: 240
         }, {
           label: this.$t('config.account.enable'),
           prop: 'status',
@@ -423,255 +301,10 @@ export default {
           label: this.$t('config.account.option'),
           prop: 'option',
           show: true,
+          width: 100
         }
       ],
       tableData: [],
-      /*tableData: [{
-        userId: '1',
-        username: '王小虎1',
-        email: 'c92c@qq.com',
-        lang: 'en',
-        receiver: [{
-          id: '1',
-          name: 'group1'
-        }, {
-          id: '2',
-          name: 'group2'
-        }],
-        createTime: '2019-11-28  21:39:05',
-        status: '1'
-      }, {
-        userId: '2',
-        username: '王小虎2',
-        email: 'c92c@qq.com',
-        lang: 'en',
-        receiver: [{
-          id: '1',
-          name: 'group1'
-        }, {
-          id: '2',
-          name: 'group2'
-        }],
-        createTime: '2019-11-28  21:39:05',
-        status: '0'
-      }, {
-        userId: '3',
-        username: '王小虎3',
-        email: 'c92c@qq.com',
-        lang: 'en',
-        receiver: [{
-          id: '1',
-          name: 'group1'
-        }, {
-          id: '2',
-          name: 'group2'
-        }],
-        createTime: '2019-11-28  21:39:05',
-        status: '1'
-      }, {
-        userId: '4',
-        username: '王小虎4',
-        email: 'c92c@qq.com',
-        lang: 'zh',
-        receiver: [{
-          id: '1',
-          name: 'group1'
-        }, {
-          id: '2',
-          name: 'group2'
-        }],
-        createTime: '2019-11-28  21:39:05',
-        status: '1'
-      }, {
-        userId: '5',
-        username: '王小虎5',
-        email: 'c92c@qq.com',
-        lang: 'en',
-        receiver: [{
-          id: '1',
-          name: 'group1'
-        }, {
-          id: '2',
-          name: 'group2'
-        }],
-        createTime: '2019-11-28  21:39:05',
-        status: '1'
-      }, {
-        userId: '6',
-        username: '王小虎6',
-        email: 'c92c@qq.com',
-        lang: 'en',
-        receiver: [{
-          id: '1',
-          name: 'group1'
-        }, {
-          id: '2',
-          name: 'group2'
-        }],
-        createTime: '2019-11-28  21:39:05',
-        status: '1'
-      }, {
-        userId: '7',
-        username: '王小虎7',
-        email: 'c92c@qq.com',
-        lang: 'en',
-        receiver: [{
-          id: '1',
-          name: 'group1'
-        }, {
-          id: '2',
-          name: 'group2'
-        }],
-        createTime: '2019-11-28  21:39:05',
-        status: '1'
-      }, {
-        userId: '8',
-        username: '王小虎8',
-        email: 'c92c@qq.com',
-        lang: 'en',
-        receiver: [{
-          id: '1',
-          name: 'group1'
-        }, {
-          id: '2',
-          name: 'group2'
-        }, {
-          id: '5',
-          isEdit: false,
-          name: '小组啊小组5'
-        }],
-        createTime: '2019-11-28  21:39:05',
-        status: '1'
-      }, {
-        userId: '9',
-        username: '王小虎9',
-        email: 'c92c@qq.com',
-        lang: 'en',
-        receiver: [{
-          id: '1',
-          name: 'group1'
-        }, {
-          id: '2',
-          name: 'group2'
-        }],
-        createTime: '2019-11-28  21:39:05',
-        status: '1'
-      }, {
-        userId: '10',
-        username: '王小虎',
-        email: 'c92c@qq.com',
-        lang: 'en',
-        receiver: [{
-          id: '1',
-          name: 'group1'
-        }, {
-          id: '2',
-          name: 'group2'
-        }],
-        createTime: '2019-11-28  21:39:05',
-        status: '1'
-      }, {
-        userId: '222',
-        username: '王小虎',
-        email: 'c92c@qq.com',
-        lang: 'en',
-        receiver: [{
-          id: '1',
-          name: 'group1'
-        }, {
-          id: '2',
-          name: 'group2'
-        }],
-        createTime: '2019-11-28  21:39:05',
-        status: '1'
-      }, {
-        userId: '223',
-        username: '王小虎',
-        email: 'c92c@qq.com',
-        lang: 'en',
-        receiver: [{
-          id: '1',
-          name: 'group1'
-        }, {
-          id: '2',
-          name: 'group2'
-        }],
-        createTime: '2019-11-28  21:39:05',
-        status: '1'
-      }, {
-        userId: '224',
-        username: '王小虎',
-        email: 'c92c@qq.com',
-        lang: 'en',
-        receiver: [{
-          id: '1',
-          name: 'group1'
-        }, {
-          id: '2',
-          name: 'group2'
-        }],
-        createTime: '2019-11-28  21:39:05',
-        status: '1'
-      }, {
-        userId: '226',
-        username: '王小虎',
-        email: 'c92c@qq.com',
-        lang: 'en',
-        receiver: [{
-          id: '1',
-          name: 'group1'
-        }, {
-          id: '2',
-          name: 'group2'
-        }],
-        createTime: '2019-11-28  21:39:05',
-        status: '1'
-      }, {
-        userId: '225',
-        username: '王小虎',
-        email: 'c92c@qq.com',
-        lang: 'en',
-        receiver: [{
-          id: '1',
-          name: 'group1'
-        }, {
-          id: '2',
-          name: 'group2'
-        }],
-        createTime: '2019-11-28  21:39:05',
-        status: '1'
-      }, {
-        userId: '2',
-        username: '王小虎',
-        email: 'c92c@qq.com',
-        lang: 'en',
-        receiver: [{
-          id: '1',
-          name: 'group1'
-        }, {
-          id: '2',
-          name: 'group2'
-        }],
-        createTime: '2019-11-28  21:39:05',
-        status: '1'
-      }, {
-        userId: '2',
-        username: '王小虎',
-        email: 'c92c@qq.com',
-        lang: 'en',
-        receiver: [{
-          id: '1',
-          name: 'group1'
-        }, {
-          id: '2',
-          name: 'group2'
-        }, {
-          id: '3',
-          name: '小组3'
-        }],
-        createTime: '2019-11-28  21:39:05',
-        status: '1'
-      }],*/
       receiverData: [{
         id: '1',
         name: 'group1',
diff --git a/nezha-fronted/src/components/page/config/promServer.vue b/nezha-fronted/src/components/page/config/promServer.vue
index 5d3b6a35f..e60101b6f 100644
--- a/nezha-fronted/src/components/page/config/promServer.vue
+++ b/nezha-fronted/src/components/page/config/promServer.vue
@@ -23,144 +23,6 @@
   .content-right-option .el-icon-view:hover {
     color: #409EFF;
   }
-  /* begin--右侧弹框*/
-  .right-box {
-    position: fixed;
-    top: 80px;
-    right: 15px;
-    z-index: 1;
-    border-radius: 8px;
-    box-shadow: 0 0 15px #ccc;
-    background-color: white;
-    padding: 0 20px;
-  }
-  .right-box-prom {
-    width: 550px;
-    height: calc(100% - 100px);
-  }
-  /* begin--右侧弹框--顶部按钮*/
-  .right-box-top-btns {
-    text-align: center;
-  }
-  .right-box-top-btn {
-    border-radius: 0 0 9px 9px;
-    float: right;
-    color: #656565;
-    height: 30px;
-    font-size: 12px;
-    padding: 3px 8px 1px 8px;
-    border: 1px solid #aaaaaa;
-    border-top: none;
-    cursor: pointer;
-    margin-left: 20px;
-  }
-  .right-box-top-btn-full {
-    background-color: #656565;
-    border: 1px solid #656565;
-    border-top: none;
-    color: white;
-   }
-  /* end--右侧弹框--顶部按钮*/
-
-  /* begin--右侧弹框--内容*/
-  .right-box-title {
-    height: 30px;
-    line-height: 40px;
-    text-align: left;
-  }
-  .right-box-form {
-    margin-top: 35px;
-  }
-  .right-box-form-row {
-    margin-top: 25px;
-  }
-  .right-box-form-label {
-    margin-bottom: 8px;
-    text-align: left;
-  }
-  .right-box-form-content {
-    line-height: 32px;
-    text-align: left;
-    width: 100%;
-  }
-  .right-box-form-content-txt {
-    padding-left: 11px;
-  }
-  .right-box-form-content .el-select {
-    width: calc(100% - 38px);
-    vertical-align: top;
-  }
-  .el-select-add-btn {
-    width: 33px;
-    height: 33px;
-    display: inline-block;
-    text-align: center;
-    border-radius: 5px;
-    border: 1px solid #DCDFE6;
-    box-sizing: border-box;
-    color: #C7C9CE;
-    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
-  }
-  .el-select-add-btn:hover {
-    border: 1px solid #C0C4CC;
-    cursor: pointer;
-  }
-  /* end--右侧弹框--内容*/
-
-  /* begin--右侧弹框--底部按钮*/
-  .right-box-bottom-btns {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 40px;
-    left: 0;
-    text-align: center;
-  }
-  .right-box-bottom-btn:first-of-type {
-    border-bottom-left-radius: 8px;
-  }
-  .right-box-bottom-btn:last-of-type{
-    border-bottom-right-radius: 8px;
-  }
-  .right-box-bottom-btn {
-    display: inline-block;
-    background-color: #656565;
-    color: white;
-    height: 100%;
-    line-height: 40px;
-    cursor: pointer;
-    width: 100%;
-  }
-  .config-dropdown-label-input {
-    width: 50%;
-    display: inline-block;
-  }
-  .right-box-bottom-btn-cancel {
-    background-color: #DADADA;
-    color: #656565;
-  }
-  .right-box-bottom-btn-50 {
-    width: 50%;
-  }
-  /* end--右侧弹框--底部按钮*/
-  /* end--右侧弹框*/
-
-  /* begin--右弹框滑入滑出动画*/
-  @keyframes slide-in-from-right {
-    from {right: -800px}
-    to {right: 0}
-  }
-  @keyframes slide-out-to-right {
-    from {right: 0}
-    to {right: -800px}
-  }
-  .right-box-enter-active {
-    animation: slide-in-from-right 0.4s;
-  }
-  .right-box-leave-active {
-    animation: slide-out-to-right 0.4s;
-  }
-  /* end--右弹框滑入滑出动画*/
 </style>
 <template>
     <div class="prom">
@@ -249,7 +111,7 @@
                     <div class="right-box-form-row">
                         <div class="right-box-form-label">IDC</div>
                         <div class="right-box-form-content">
-                            <el-select value-key="id" popper-class="config-dropdown" v-model="promServer.idc" placeholder="" v-if="rightBox.isEdit" size="small">
+                            <el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown" v-model="promServer.idc" placeholder="" v-if="rightBox.isEdit" size="small">
                                 <el-option
                                   @click.native="blurEditIdc()"
                                   v-for="item in idcData"
@@ -272,7 +134,7 @@
                                     <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelIdc(item)"><i class="el-icon-delete"></i></span>
                                 </el-option>
                             </el-select>
-                            <div class="el-select-add-btn" v-if="rightBox.isEdit">
+                            <div class="right-box-row-btn" v-if="rightBox.isEdit">
                                 <span class="el-icon-plus"></span>
                             </div>
                             <div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{promServer.idc.name}}</div>
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index 36417c04d..c3e4247d0 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -20,127 +20,125 @@
   color: #409EFF;
 }
 
-/* begin--右侧弹框*/
-.right-box {
-  position: fixed;
-  top: 80px;
-  right: 15px;
-  z-index: 1;
-  border-radius: 8px;
-  box-shadow: 0 0 15px #ccc;
-  background-color: white;
-  padding: 0 20px;
-}
-.right-box-project {
-  width: 550px;
-  height: calc(100% - 100px);
-}
-/* begin--右侧弹框--顶部按钮*/
-.right-box-top-btns {
-  text-align: center;
-}
-.right-box-top-btn {
-  border-radius: 0 0 9px 9px;
+/* start--param*/
+.param-btn {
   float: right;
-  color: #656565;
-  height: 30px;
-  font-size: 12px;
-  padding: 3px 8px 1px 8px;
-  border: 1px solid #aaaaaa;
-  border-top: none;
-  cursor: pointer;
-  margin-left: 20px;
+  height: 27px;
+  margin-top: -3px;
 }
-.right-box-top-btn-full {
+.param-btn-active {
   background-color: #656565;
+  color: white;
   border: 1px solid #656565;
-  border-top: none;
-  color: white;
 }
-/* end--右侧弹框--顶部按钮*/
-
-/* begin--右侧弹框--内容*/
-.right-box-title {
-  height: 30px;
-  line-height: 40px;
-  text-align: left;
-}
-.right-box-form {
-  margin-top: 35px;
-}
-.right-box-form-row {
-  margin-top: 25px;
-}
-.right-box-form-label {
-  margin-bottom: 8px;
-  text-align: left;
-}
-.right-box-form-content {
-  line-height: 32px;
-  text-align: left;
-  width: 100%;
-}
-.right-box-form-content-txt {
-  padding-left: 11px;
-}
-.right-box-form-content .el-select {
-  width: calc(100% - 38px);
-  vertical-align: top;
-}
-.el-select-add-btn {
-  width: 33px;
-  height: 33px;
-  display: inline-block;
-  text-align: center;
-  border-radius: 5px;
-  border: 1px solid #DCDFE6;
-  box-sizing: border-box;
-  color: #C7C9CE;
-  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
-}
-.el-select-add-btn:hover {
-  border: 1px solid #C0C4CC;
-  cursor: pointer;
-}
-/* end--右侧弹框--内容*/
-
-/* begin--右侧弹框--底部按钮*/
-.right-box-bottom-btns {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: 40px;
-  left: 0;
-  text-align: center;
-}
-.right-box-bottom-btn:first-of-type {
-  border-bottom-left-radius: 8px;
-}
-.right-box-bottom-btn:last-of-type{
-  border-bottom-right-radius: 8px;
-}
-.right-box-bottom-btn {
-  display: inline-block;
+.param-btn-active:hover, .param-btn-active:focus {
   background-color: #656565;
   color: white;
-  height: 100%;
-  line-height: 40px;
-  cursor: pointer;
-  width: 100%;
 }
-.config-dropdown-label-input {
-  width: 50%;
+.param-btn-clear {
+  background-color: #D4D4D4;
+  border: 1px solid #D4D4D4;
+  color: white;
+}
+.param-btn-clear:hover, .param-btn-clear:focus {
+  background-color: #D4D4D4;
+  color: white;
+}
+
+.param-box {
+  height: 303px;
+  border: 1px solid #DCDFE6;
+  border-radius: 4px;
+  padding: 0 10px;
+}
+.param-box-row {
+  padding: 7px 0 0 0;
+  position: relative;
+}
+.param-box-row:last-of-type {
+  padding-bottom: 7px;
+}
+.param-box-row-key, .param-box-row-value {
   display: inline-block;
+  width: 41.5%;
 }
-.right-box-bottom-btn-cancel {
-  background-color: #DADADA;
-  color: #656565;
+.param-box-row-eq {
+  display: inline-block;
+  width: 22px;
+  text-align: center;
+  height: 32px;
+  line-height: 32px;
+  color: #c4c7cF;
 }
-.right-box-bottom-btn-50 {
-  width: 50%;
+.param-box-row-symbol {
+  font-size: 12px;
+  color: #c4c7cF;
+  border: 1px solid #c4c7cF;
+  text-align: center;
+  height: 12px;
+  width: 14px;
+  display: inline-block;
+  position: absolute;
+  top: 17px;
+  right: 25px;
+  cursor: pointer;
 }
-/* end--右侧弹框--底部按钮*/
-/* end--右侧弹框*/
+.param-box-row-symbol>i {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+}
+/* end--param*/
+
+/* begin--子弹框*/
+.right-sub-box {
+  width: 330px;
+  height: calc(50%);
+  position: absolute;
+  top: 380px;
+  right: 100px;
+  z-index: 2;
+}
+.right-sub-box .el-input-group {
+  width: 60%;
+  float: right;
+  margin: 7px 0 0 0;
+}
+.endpoint-asset-prepend {
+  border-radius: 4px 0 0 4px;
+}
+.endpoint-asset-label {
+  line-height: 26px;
+  height: 26px;
+}
+.endpoint-asset-dropdown {
+  position: absolute;
+  top: 27px;
+  background-color: #656565;
+  border-radius: 4px;
+  width: 52px;
+  left: 0;
+}
+.endpoint-asset-dropdown-item {
+  text-align: center;
+  line-height: 22px;
+  height: 22px;
+  cursor: default;
+}
+.endpoint-asset-label-txt {
+  display: inline-block;
+  width: 19px;
+}
+.endpoint-asset-dropdown-item:first-of-type {
+  border-radius: 4px 4px 0 0;
+}
+.endpoint-asset-dropdown-item:last-of-type {
+  border-radius: 0 0 4px 4px;
+}
+.endpoint-asset-dropdown-item:hover {
+  background-color: #3a8ee6;
+}
+/* end--子弹框*/
 </style>
 <template>
   <div class="project">
@@ -173,7 +171,7 @@
         ></el-input>
       </div>
       <el-table
-        :data="tableData"
+        :data="endPointTableData"
         border
         height="calc(100% - 65px)"
         style="width: 100%;">
@@ -185,9 +183,8 @@
           :label="item.label"
         >
           <template slot-scope="scope" :column="item">
-            <!--<span v-if="item.prop == 'asset'">{{scope.row[item.prop].name}}</span>
-            <span v-else>{{scope.row[item.prop]}}</span>-->
-            <span>{{scope.row[item.prop]}}</span>
+            <span v-if="item.prop == 'asset'">{{scope.row[item.prop].host}}</span>
+            <span v-else>{{scope.row[item.prop]}}</span>
           </template>
         </el-table-column>
         <el-table-column :label="$t('overall.option')" width="100">
@@ -204,10 +201,10 @@
 
     <!-- begin--右弹框-->
     <transition name="right-box">
-      <div class="right-box right-box-project" v-if="rightBox.show">
+      <div class="right-box right-box-endpoint" v-if="rightBox.show">
         <!-- begin--顶部按钮-->
         <div class="right-box-top-btns">
-          <div class="right-box-top-btn right-box-top-btn-full" @click="esc()">
+          <div class="right-box-top-btn right-box-top-btn-full" @click="esc">
             <div class="right-box-btn-icon">
               <i class="el-icon-close"></i>
             </div>
@@ -235,24 +232,87 @@
 
         <!-- begin--表单-->
         <div class="right-box-form">
+          <!--project-->
           <div class="right-box-form-row">
-            <div class="right-box-form-label">IDC</div>
-            <div class="right-box-form-content">aaa
+            <div class="right-box-form-label">{{$t("project.project.project")}}</div>
+            <div class="right-box-form-content">
+              <el-select @change="((val) => {getModuleData(val.id)})" value-key="id" popper-class="config-dropdown" v-model="endpoint.project" placeholder="" v-if="rightBox.isEdit" size="small">
+                <el-option v-for="item in projectData" :key="item.id" :label="item.name" :value="item"></el-option>
+              </el-select>
+              <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.project.name}}</div>
             </div>
           </div>
+          <!--module-->
           <div class="right-box-form-row">
-            <div class="right-box-form-label">Host</div>
+            <div class="right-box-form-label">{{$t("project.module.module")}}</div>
+            <div class="right-box-form-content">
+              <el-select @change="((val) => {changeModule(val.id)})" value-key="id" popper-class="config-dropdown" v-model="selectedModule" placeholder="" v-if="rightBox.isEdit" size="small">
+                <el-option v-for="item in moduleData" :key="item.id" :label="item.name" :value="item"></el-option>
+              </el-select>
+              <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.module.name}}</div>
+            </div>
+          </div>
+          <!--host-->
+          <div class="right-box-form-row">
+            <div class="right-box-form-label">{{$t("project.endpoint.host")}}</div>
             <div class="right-box-form-content">
               <el-input
-                type="text"
+                class="right-box-row-with-btn"
                 v-if="rightBox.isEdit"
                 placeholder=""
                 v-model="endpoint.host"
                 size="small"
               ></el-input>
+              <div @click="showSubShow" class="right-box-row-btn right-box-row-btn-active" v-if="rightBox.isEdit">
+                <span class="el-icon-more"></span>
+              </div>
               <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.host}}</div>
             </div>
           </div>
+          <!--port-->
+          <div class="right-box-form-row">
+            <div class="right-box-form-label">{{$t("project.endpoint.port")}}</div>
+            <div class="right-box-form-content">
+              <el-input
+                v-if="rightBox.isEdit"
+                placeholder=""
+                v-model="endpoint.port"
+                size="small"
+              ></el-input>
+              <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.port}}</div>
+            </div>
+          </div>
+          <!--path-->
+          <div class="right-box-form-row">
+            <div class="right-box-form-label">{{$t("project.endpoint.path")}}</div>
+            <div class="right-box-form-content">
+              <el-input
+                v-if="rightBox.isEdit"
+                placeholder=""
+                v-model="endpoint.path"
+                size="small"
+              ></el-input>
+              <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.path}}</div>
+            </div>
+          </div>
+          <!--param-->
+          <div class="right-box-form-row">
+            <div class="right-box-form-label">
+              {{$t("project.endpoint.param")}}
+              <el-button class="param-btn param-btn-active margin-l-10" size="mini" @click="addParam"><i class="el-icon-plus"></i>{{$t('overall.add')}}</el-button>
+              <el-button class="param-btn param-btn-clear" size="mini" @click="clearAllParam">{{$t('overall.clearAll')}}</el-button>
+            </div>
+            <div class="right-box-form-content">
+              <div class="param-box">
+                <div class="param-box-row" v-for="(item, index) in paramObj">
+                  <el-input placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input>
+                  <span class="param-box-row-eq">=</span>
+                  <el-input placeholder="value" class="param-box-row-value" size="mini" v-model="item.value"></el-input>
+                  <span class="param-box-row-symbol" @click="removeParam(index)"><i class="el-icon-minus"></i></span>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
         <!-- end--表单-->
 
@@ -261,9 +321,39 @@
           <div @click="esc()" :class="{'right-box-bottom-btn-50': rightBox.isEdit}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div @click="save()" v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{endpoint.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
         </div>
         <!-- end--底部按钮-->
-
       </div>
     </transition>
+
+    <!-- begin--子弹框-->
+    <transition name="right-sub-box">
+      <div class="right-sub-box" v-if="rightSubBox.show">
+        <!-- begin--标题-->
+        <div class="right-box-title">{{rightSubBox.title}}</div>
+        <!-- end--标题-->
+
+        <!-- begin--搜索框-->
+        <el-input placeholder="" v-model="assetSearch.text">
+          <template slot="prepend">
+            <div class="endpoint-asset-prepend">
+              <div class="endpoint-asset-label">
+                <span class="endpoint-asset-label-txt">{{assetSearch.label}}</span>
+                <span @click="assetSearch.dropdownShow = !assetSearch.dropdownShow">
+                  <i v-if="assetSearch.dropdownShow" class="el-icon-arrow-up"></i>
+                  <i v-if="!assetSearch.dropdownShow" class="el-icon-arrow-down"></i>
+                </span>
+              </div>
+              <div class="endpoint-asset-dropdown" v-if="assetSearch.dropdownShow">
+                <div @click="dropdownSelect('IP')" class="endpoint-asset-dropdown-item">IP</div>
+                <div @click="dropdownSelect('SN')" class="endpoint-asset-dropdown-item">SN</div>
+              </div>
+            </div>
+          </template>
+          <template slot="append"><i class="el-icon-search"></i></template>
+        </el-input>
+        <!-- end--搜索框-->
+      </div>
+    </transition>
+    <!-- end--子弹框-->
   </div>
 </template>
 
@@ -277,6 +367,17 @@ export default {
         isEdit: false, //false查看，true编辑
         title: ''
       },
+      rightSubBox: { //弹出框相关
+        show: false,
+        title: this.$t("overall.asset")
+      },
+      assetSearch: {
+        ip: '',
+        sn: '',
+        text: '',
+        label: 'IP',
+        dropdownShow: false
+      },
       pageObj: {
         pageNo: 1,
         pageSize: 20,
@@ -290,7 +391,11 @@ export default {
         path: '',
         asset: {id: '', name: '', host: ''},
         project: {id: '', name: ''},
-        module: {id: '', name: ''}
+        module: {id: '', name: '', param: '', paramObj: {}}
+      },
+      selectedModule: {
+        id: '',
+        name: ''
       },
       tableTitle: [
         {
@@ -325,20 +430,72 @@ export default {
           show: true,
         }
       ],
-      tableData: []
+      endPointTableData: [],
+      projectData: [],
+      moduleData: [],
+      paramObj: []
     }
   },
   methods: {
-    getTableData: function() {
+    showSubShow: function() {
+      this.rightSubBox.show = !this.rightSubBox.show;
+    },
+    getEndPointTableData: function() {
       this.$get('endpoint', this.pageObj).then(response => {
         if (response.code === 200) {
-          this.tableData = response.data.list;
-          this.pageObj.total = response.data.total
+          for (var i = 0; i < response.data.list.length; i++) {
+            try {
+              var tempObj = JSON.parse(response.data.list[i].param);
+            } catch (err) {
+
+            }
+            response.data.list[i].paramObj = [];
+            for (let k in tempObj) {
+              response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
+            }
+          }
+          this.endPointTableData = response.data.list;
+          this.pageObj.total = response.data.total;
         }
-      })
+      });
+    },
+    getProjectData: function() {
+      this.$get('project').then(response => {
+        if (response.code === 200) {
+          this.projectData = response.data.list;
+        }
+      });
+    },
+    getModuleData: function(projectId) {
+      // module选择改变时，记录旧module的id值(endpoint.moduleId)和对应的endpoint的param(endpoint.和对应的endpoint.param)，
+      // 然后改变，改变后param用module的值，如果改回旧module，则恢复endpoint的param
+      this.selectedModule = {id: '', name: ''};
+      this.$get('module', {projectId: projectId}).then(response => {
+        if (response.code === 200) {
+          for (var i = 0; i < response.data.list.length; i++) {
+            var tempObj = JSON.parse(response.data.list[i].param);
+            response.data.list[i].paramObj = [];
+            for (let k in tempObj) {
+              response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
+            }
+          }
+          this.moduleData = response.data.list;
+        }
+      });
+    },
+    changeModule: function(moduleId) {
+      if (moduleId == this.endpoint.moduleId) {
+        this.paramObj = JSON.parse(JSON.stringify(this.endpoint.paramObj));
+      } else {
+        this.paramObj = JSON.parse(JSON.stringify(this.selectedModule.paramObj));
+      }
     },
     toEdit: function(u) {
+      this.getModuleData(u.project.id);
+      this.selectedModule = Object.assign({}, u.module);
       this.endpoint = Object.assign({}, u);
+      //this.paramObj = this.endpoint.paramObj;
+      this.paramObj = JSON.parse(JSON.stringify(this.endpoint.paramObj));
       this.rightBox.isEdit = true;
       this.rightBox.title = this.$t("project.endpoint.editEndpoint") + "  ID：" + u.id;
       this.rightBox.show = true;
@@ -347,12 +504,14 @@ export default {
     },
     toAdd: function() {
       this.cleanEndpoint();
+      this.paramObj = [];
+      this.moduleData = [];
       this.rightBox.isEdit = true;
       this.rightBox.title = this.$t("project.endpoint.createEndpoint");
       this.rightBox.show = true;
     },
     detail: function(u) {
-      this.alertRule = Object.assign({}, u);
+      this.endpoint = Object.assign({}, u);
       this.rightBox.isEdit = false;
       this.rightBox.title = this.$t("project.endpoint.endpoint") + "  ID：" + u.id;
       this.rightBox.show = true;
@@ -360,11 +519,20 @@ export default {
     saveOrToEdit: function() {
       if (!this.rightBox.isEdit) {
         this.rightBox.isEdit = true;
-        this.rightBox.title = this.$t("project.endpoint.editEndpoint") + "  ID：" + this.alertRule.id;
+        this.rightBox.title = this.$t("project.endpoint.editEndpoint") + "  ID：" + this.endpoint.id;
       }
     },
     save: function() {
 
+    },
+    clearAllParam: function() {
+      this.paramObj = [];
+    },
+    addParam: function() {
+      this.paramObj.push({key: '', value: ''});
+    },
+    removeParam: function(index) {
+      this.paramObj.splice(index, 1);
     },
     esc: function() {
       this.rightBox.show = false;
@@ -383,15 +551,21 @@ export default {
     },
     pageNo(val) {
       this.pageObj.pageNo = val;
-      this.getTableData();
+      this.getEndPointTableData();
     },
     pageSize(val) {
       this.pageObj.pageSize = val;
-      this.getTableData();
+      this.getEndPointTableData();
+    },
+
+    dropdownSelect: function(label) {
+      this.assetSearch.label = label;
+      this.assetSearch.dropdownShow = false;
     }
   },
   mounted: function() {
-    this.getTableData();
+    this.getEndPointTableData();
+    this.getProjectData();
   }
 }
 </script>