diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index bb66572bb..6559201e3 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -1,7 +1,6 @@
 <template>
     <div class="header">
         <div class="submenu">
-
             <el-menu
                     class="el-menu-demo"
                     mode="horizontal"
@@ -107,6 +106,11 @@
                 </el-popover>
             </div>
         </div>
+
+        <project-box :project="editProject" @reload="projectReload" ref="projectBox"></project-box>
+        <module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
+        <endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="" ref="endpointBox"></endpoint-box>
+
     </div>
 </template>
 
@@ -117,8 +121,24 @@ export default {
     return {
       language: localStorage.getItem("language"),
       assetData: [],
-      projectData: [],
-      createMenu: [
+      projectData: [], //顶部菜单project列表中的数据
+      editProject: {id: '', name: '', remark: ''}, //新增/编辑的project
+      currentProject: {id: '', name: '', remark: ''}, //module/endpoint弹框用来回显project，此处固定为空对象
+      editModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //新增/编辑的module
+      currentModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //endpoint弹框用来回显module，此处固定为空对象
+      editEndpoint: { //新增/编辑的endpoint
+        id: '',
+        host: '',
+        port: '',
+        param: '',
+        path: '',
+        asset: {id: '', name: '', host: ''},
+        project: {id: '', name: ''},
+        module: {id: '', name: '', param: '', paramObj: {}, projectId: ''},
+        moduleId: '',
+        assetId: ''
+      },
+      createMenu: [ //新增按钮内容
         {
           label: this.$t('project.project.createProject'),
           url: 'project',
@@ -157,7 +177,16 @@ export default {
       });
     },
     createBox(item) {
-      this.jumpTo(item.url);
+      if (item.type == 1) {
+        this.$refs.projectBox.show(true);
+        this.editProject = {id: '', name: '', remark: ''};
+      } else if (item.type == 2) {
+        this.$refs.moduleBox.show(true);
+        this.editModule = {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []};
+      } else if (item.type == 3) {
+        this.$refs.endpointBox.show(true);
+      }
+      /*this.jumpTo(item.url);
       setTimeout(() =>{
         if (item.type == 1) {
           if (this.projectData.length > 0) {
@@ -179,7 +208,7 @@ export default {
           this.$store.commit('projectRightBoxShow', false);
           this.$store.commit('toCreateAlertConfig', true);
         }
-      }, 120);
+      }, 120);*/
     },
     jumpToAsset(data, id) {
       this.$store.state.assetData.moduleData = data;
@@ -202,19 +231,18 @@ export default {
       })
     },
     getProjectData() {
-      this.$get('project', this.pageObj).then(response => {
+      this.$get('project', {}).then(response => {
         if (response.code == 200) {
           this.projectData = response.data.list;
         }
       })
     },
     toEditProject(p) {
-      this.jumpTo('project');
-      setTimeout(() =>{
-        this.$store.commit('setProject', p);
-        this.$store.commit('projectRightBoxShow', true);
-      }, 50);
-
+      this.$refs.projectBox.show(true);
+      this.editProject = Object.assign({}, p);
+    },
+    projectReload() {
+      this.getProjectData();
     }
   },
   mounted() {
@@ -257,6 +285,7 @@ export default {
     padding-left: 50%;
     width: 500px;
     float: left;
+    font-size: 22px;
 }
 
 .header {
@@ -264,7 +293,6 @@ export default {
     box-sizing: border-box;
     width: 100%;
     height: 60px;
-    font-size: 22px;
     background-color: #ffffff;
     z-index: 510;
     box-shadow: 0px 20px 13px -19px #5E5E5E;
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 28c62df9b..8ce9bc542 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -25,10 +25,12 @@ const en = {
     confirmDelete: "Confirm Delete?",
     yes: "Yes",
     no: "No",
-    deleteSuccess: "Successfully Deleted"
+    deleteSuccess: "Successfully Deleted",
+    saveSuccess: "Successfully Saved"
   },
   asset:{
     createAsset: "Create Asset",
+    asset: 'Asset',
     tableTitle: {
       id: 'ID',
       assetType: '资产类型',
diff --git a/nezha-fronted/src/components/common/rightBox/endpointBox.vue b/nezha-fronted/src/components/common/rightBox/endpointBox.vue
new file mode 100644
index 000000000..f4cfd9a0d
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/endpointBox.vue
@@ -0,0 +1,245 @@
+<template>
+  <transition name="right-box">
+    <div class="right-box right-box-endpoint" v-if="rightBox.show" @click.stop>
+      <!-- begin--顶部按钮-->
+      <div class="right-box-top-btns">
+        <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>
+          <span>{{$t('overall.esc')}}</span>
+        </div>
+        <div class="right-box-top-btn right-box-top-btn-full" @click="saveOrToEdit">
+          <div class="right-box-btn-icon">
+            <i class="el-icon-edit-outline"></i>
+          </div>
+          <span v-if="rightBox.isEdit">{{$t('overall.save')}}</span>
+          <span v-else>{{$t('overall.edit')}}</span>
+        </div>
+        <div class="right-box-top-btn" v-if="rightBox.isEdit && endpoint.id != ''" @click="del()">
+          <div class="right-box-btn-icon">
+            <i class="el-icon-delete"></i>
+          </div>
+          <span>{{$t('overall.delete')}}</span>
+        </div>
+      </div>
+      <!-- end--顶部按钮-->
+
+      <!-- begin--标题-->
+      <div class="right-box-title">{{rightBox.title}}</div>
+      <!-- end--标题-->
+
+      <!-- begin--表单-->
+      <div class="right-box-form">
+        <!--project-->
+        <div class="right-box-form-row">
+          <div class="right-box-form-label">{{$t("project.project.project")}}</div>
+          <div class="right-box-form-content">
+            <el-select @change="((val) => {getToSelectModuleData(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 projectList" :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">{{$t("project.module.module")}}</div>
+          <div class="right-box-form-content">
+            <el-select @change="((val) => {})" value-key="id" popper-class="config-dropdown" v-model="currentModule" placeholder="" v-if="rightBox.isEdit" size="small">
+              <el-option v-for="item in toSelectModuleData" :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
+              class="right-box-row-with-btn"
+              v-if="rightBox.isEdit"
+              placeholder=""
+              v-model="endpoint.host"
+              size="small"
+            ></el-input>
+            <div @click="showSubBox" 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 v-if="rightBox.isEdit" 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 v-if="rightBox.isEdit" 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 param-box-endpoint">
+              <div class="param-box-row" v-for="(item, index) in paramObj">
+                <el-input :disabled="!rightBox.isEdit" placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input>
+                <span class="param-box-row-eq">=</span>
+                <el-input :disabled="!rightBox.isEdit" placeholder="value" class="param-box-row-value" size="mini" v-model="item.value"></el-input>
+                <span v-if="rightBox.isEdit" class="param-box-row-symbol" @click="removeParam(index)"><i class="el-icon-minus"></i></span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- end--表单-->
+
+      <!-- begin--底部按钮-->
+      <div class="right-box-bottom-btns">
+        <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>
+</template>
+
+<script>
+  export default {
+    name: "endpointBox",
+    props: {
+      endpoint: Object,
+      currentProject: Object,
+      currentModule: Object
+    },
+    data() {
+      return {
+        // 清除param
+        clearAllParam: function() {
+          this.module.paramObj = [];
+        },
+
+        // 新增param
+        addParam: function() {
+          this.module.paramObj.push({key: '', value: ''});
+        },
+
+        // 移除单个param
+        removeParam: function(index) {
+          this.module.paramObj.splice(index, 1);
+        },
+
+        //将param转为json字符串格式
+        paramToJson: function(param) {
+          let tempParam = {};
+          for (let i = 0; i < param.length; i++) {
+            eval('tempParam.' + param[i].key + '="' + param[i].value + '"');
+          }
+          let jsonString = JSON.stringify(tempParam);
+          if (jsonString == '{}') {
+            return "";
+          } else {
+            return jsonString;
+          }
+        },
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  /* start--param*/
+  .param-btn {
+    float: right;
+    height: 27px;
+    margin-top: -3px;
+  }
+  .param-btn-active {
+    background-color: #656565;
+    color: white;
+    border: 1px solid #656565;
+  }
+  .param-btn-active:hover, .param-btn-active:focus {
+    background-color: #656565;
+    color: white;
+  }
+  .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 {
+    border: 1px solid #DCDFE6;
+    border-radius: 4px;
+    padding: 0 10px;
+  }
+  .param-box-endpoint {
+    height: 325px;
+  }
+  .param-box-module {
+    height: 227px;
+  }
+  .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%;
+  }
+  .param-box-row-eq {
+    display: inline-block;
+    width: 22px;
+    text-align: center;
+    height: 32px;
+    line-height: 32px;
+    color: #c4c7cF;
+  }
+  .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;
+  }
+  .param-box-row-symbol>i {
+    position: absolute;
+    top: 1px;
+    right: 1px;
+  }
+  /* end--param*/
+</style>
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
new file mode 100644
index 000000000..6a0e6d9e3
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -0,0 +1,322 @@
+<template>
+  <transition name="right-box">
+    <div class="right-box right-box-endpoint" v-if="rightBox.show" @click.stop>
+      <el-scrollbar style="height: 100%">
+        <!-- begin--顶部按钮-->
+        <div class="right-box-top-btns">
+          <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>
+            <span>{{$t('overall.esc')}}</span>
+          </div>
+          <div class="right-box-top-btn right-box-top-btn-full" @click="save">
+            <div class="right-box-btn-icon">
+              <i class="el-icon-edit-outline"></i>
+            </div>
+            <span>{{$t('overall.save')}}</span>
+          </div>
+          <div class="right-box-top-btn" v-if="module.id != ''" @click="del">
+            <div class="right-box-btn-icon">
+              <i class="el-icon-delete"></i>
+            </div>
+            <span>{{$t('overall.delete')}}</span>
+          </div>
+        </div>
+        <!-- end--顶部按钮-->
+
+        <!-- begin--标题-->
+        <div class="right-box-title">{{rightBox.title}}</div>
+        <!-- end--标题-->
+
+        <!-- begin--表单-->
+        <div class="right-box-form">
+          <!--project-->
+          <div class="right-box-form-row">
+            <div class="right-box-form-label">{{$t("project.project.project")}}</div>
+            <div class="right-box-form-content">
+              <el-select value-key="id" popper-class="config-dropdown" v-model="module.project" placeholder="" size="small">
+                <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
+              </el-select>
+            </div>
+          </div>
+          <!--name-->
+          <div class="right-box-form-row">
+            <div class="right-box-form-label">{{$t("project.module.moduleName")}}</div>
+            <div class="right-box-form-content">
+              <el-input placeholder="" maxlength="64" show-word-limit v-model="module.name" size="small"></el-input>
+            </div>
+          </div>
+          <!--description-->
+          <div class="right-box-form-row">
+            <div class="right-box-form-label">{{$t("project.module.description")}}</div>
+            <div class="right-box-form-content">
+              <el-input type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="module.remark" size="small"></el-input>
+            </div>
+          </div>
+          <!--tip-->
+          <div class="right-box-form-row">
+            <div class="right-box-form-content">
+              <div class="right-box-form-tip">
+                {{$t('project.module.tip.defaultEndpointSet')}}
+                <div class="line-100"></div>
+                {{$t('project.module.tip.relation')}}
+              </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 placeholder="" v-model="module.port" size="small"></el-input>
+            </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 placeholder="" v-model="module.path" size="small"></el-input>
+            </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 param-box-module">
+                <div class="param-box-row" v-for="(item, index) in module.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>
+
+        <!-- begin--底部按钮-->
+        <div class="right-box-bottom-btns">
+          <div @click="esc" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="save" class="right-box-bottom-btn right-box-bottom-btn-50">{{module.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
+        </div>
+        <!-- end--底部按钮-->
+      </el-scrollbar>
+    </div>
+  </transition>
+</template>
+
+<script>
+  export default {
+    name: "moduleBox",
+    props: {
+      module: Object,
+      currentProject: Object
+    },
+    data() {
+      return {
+        rightBox: {
+          show: false,
+          title: ''
+        },
+        projectList: [],
+      }
+    },
+    methods: {
+      show(show) {
+        this.rightBox.show = show;
+      },
+
+      /*关闭弹框*/
+      esc() {
+        this.rightBox.show = false;
+      },
+
+      /*保存*/
+      save() {
+        this.module.param = this.paramToJson(this.module.paramObj);
+        if (this.module.id) {
+          this.$put('module', this.module).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 3000, type: 'success', message: this.$t("tip.saveSuccess")});
+              this.$emit("reload");
+              this.rightBox.show = false;
+            } else {
+              this.$message.error(response.msg);
+            }
+          });
+        } else {
+          this.module.projectId = this.module.project.id;
+          this.$post('module', this.module).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 3000, type: 'success', message: this.$t("tip.saveSuccess")});
+              this.$emit("reload");
+              this.rightBox.show = false;
+            } else {
+              this.$message.error(response.msg);
+            }
+          });
+        }
+      },
+
+      /*删除*/
+      del() {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("project?ids=" + this.project.id).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 3000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.rightBox.show = false;
+              this.$emit("reload");
+            } else {
+              this.$message.error(response.msg);
+            }
+          })
+        });
+      },
+
+      /*获取project列表*/
+      getProjectList: function() {
+        this.$get('project', {pageSize: 999, pageNo: 1}).then(response => {
+          if (response.code === 200) {
+            this.projectList = response.data.list;
+            if (this.currentProject && this.currentProject.id) {
+              for (let i = 0; i < this.projectList.length; i++) {
+                if (this.projectList[i].id == this.currentProject.id) {
+                  this.currentProject = this.projectList[i];
+                  break;
+                }
+              }
+            }
+          }
+        });
+      },
+
+      // 清除param
+      clearAllParam: function() {
+        this.module.paramObj = [];
+      },
+
+      // 新增param
+      addParam: function() {
+        this.module.paramObj.push({key: '', value: ''});
+      },
+
+      // 移除单个param
+      removeParam: function(index) {
+        this.module.paramObj.splice(index, 1);
+      },
+
+      //将param转为json字符串格式
+      paramToJson: function(param) {
+        let tempParam = {};
+        for (let i = 0; i < param.length; i++) {
+          eval('tempParam.' + param[i].key + '="' + param[i].value + '"');
+        }
+        let jsonString = JSON.stringify(tempParam);
+        if (jsonString == '{}') {
+          return "";
+        } else {
+          return jsonString;
+        }
+      },
+    },
+    created() {
+      this.getProjectList();
+    },
+    watch: {
+      module: {
+        immediate: true,
+        handler(n, o) {
+          if (n && n.id) {
+            this.rightBox.title = this.$t("project.module.editModule") + "  ID：" + n.id;
+          } else {
+            this.rightBox.title = this.$t("project.module.createModule");
+          }
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  /* start--param*/
+  .param-btn {
+    float: right;
+    height: 27px;
+    margin-top: -3px;
+  }
+  .param-btn-active {
+    background-color: #656565;
+    color: white;
+    border: 1px solid #656565;
+  }
+  .param-btn-active:hover, .param-btn-active:focus {
+    background-color: #656565;
+    color: white;
+  }
+  .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 {
+    border: 1px solid #DCDFE6;
+    border-radius: 4px;
+    padding: 0 10px;
+  }
+  .param-box-endpoint {
+    height: 325px;
+  }
+  .param-box-module {
+    height: 227px;
+  }
+  .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%;
+  }
+  .param-box-row-eq {
+    display: inline-block;
+    width: 22px;
+    text-align: center;
+    height: 32px;
+    line-height: 32px;
+    color: #c4c7cF;
+  }
+  .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;
+  }
+  .param-box-row-symbol>i {
+    position: absolute;
+    top: 1px;
+    right: 1px;
+  }
+  /* end--param*/
+</style>
diff --git a/nezha-fronted/src/components/common/rightBox/projectBox.vue b/nezha-fronted/src/components/common/rightBox/projectBox.vue
new file mode 100644
index 000000000..0d00034df
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/projectBox.vue
@@ -0,0 +1,144 @@
+<template>
+  <transition name="right-box">
+    <div class="right-box right-box-endpoint" v-if="rightBox.show" @click.stop>
+      <!-- begin--顶部按钮-->
+      <div class="right-box-top-btns">
+        <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>
+          <span>{{$t('overall.esc')}}</span>
+        </div>
+        <div class="right-box-top-btn right-box-top-btn-full" @click="save">
+          <div class="right-box-btn-icon">
+            <i class="el-icon-edit-outline"></i>
+          </div>
+          <span>{{$t('overall.save')}}</span>
+        </div>
+        <div class="right-box-top-btn" v-if="project.id != ''" @click="del">
+          <div class="right-box-btn-icon">
+            <i class="el-icon-delete"></i>
+          </div>
+          <span>{{$t('overall.delete')}}</span>
+        </div>
+      </div>
+      <!-- end--顶部按钮-->
+
+      <!-- begin--标题-->
+      <div class="right-box-title">{{rightBox.title}}</div>
+      <!-- end--标题-->
+
+      <!-- begin--表单-->
+      <div class="right-box-form">
+        <!--name-->
+        <div class="right-box-form-row">
+          <div class="right-box-form-label">{{$t("project.project.projectName")}}</div>
+          <div class="right-box-form-content">
+            <el-input placeholder="" maxlength="64" show-word-limit v-model="project.name" size="small"></el-input>
+          </div>
+        </div>
+        <!--description-->
+        <div class="right-box-form-row">
+          <div class="right-box-form-label">{{$t("project.project.description")}}</div>
+          <div class="right-box-form-content">
+            <el-input type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="project.remark" size="small"></el-input>
+          </div>
+        </div>
+      </div>
+
+      <!-- begin--底部按钮-->
+      <div class="right-box-bottom-btns">
+        <div @click="esc" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="save" class="right-box-bottom-btn right-box-bottom-btn-50">{{project.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
+      </div>
+      <!-- end--底部按钮-->
+    </div>
+  </transition>
+</template>
+<script>
+  export default {
+    name: "projectBox",
+    props: {
+      project: Object
+    },
+    data() {
+      return {
+        rightBox: {
+          show: false,
+          title: '',
+          isCreate: false
+        }
+      }
+    },
+    methods: {
+      show(show) {
+        this.rightBox.show = show;
+      },
+
+      /*关闭弹框*/
+      esc() {
+        this.rightBox.show = false;
+      },
+
+      /*保存*/
+      save() {
+        if (this.project.id) {
+          this.$put('project', this.project).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 3000, type: 'success', message: this.$t("tip.saveSuccess")});
+              this.$emit("reload");
+              this.rightBox.show = false;
+            } else {
+              this.$message.error(response.msg);
+            }
+          });
+        } else {
+          this.$post('project', this.project).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 3000, type: 'success', message: this.$t("tip.saveSuccess")});
+              this.$emit("reload");
+              this.rightBox.show = false;
+            } else {
+              this.$message.error(response.msg);
+            }
+          });
+        }
+      },
+
+      /*删除*/
+      del() {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("project?ids=" + this.project.id).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 3000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.rightBox.show = false;
+              this.$emit("reload");
+            } else {
+              this.$message.error(response.msg);
+            }
+          })
+        });
+      }
+    },
+    watch: {
+      project: {
+        immediate: true,
+        handler(n, o) {
+          if (n && n.id) {
+            this.rightBox.title = this.$t("project.project.editProject") + "  ID：" + n.id;
+          } else {
+            this.rightBox.title = this.$t("project.project.createProject");
+          }
+        }
+      }
+    }
+  }
+</script>
+
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/common/searchInput.vue b/nezha-fronted/src/components/common/searchInput.vue
index 5638832d1..eb9304a7a 100644
--- a/nezha-fronted/src/components/common/searchInput.vue
+++ b/nezha-fronted/src/components/common/searchInput.vue
@@ -215,7 +215,8 @@
               //dc
               selectDc(column, selectItem, e) {
                 this.stop_click(e);
-                this.searchLabelList.forEach(val=>{
+                this.select_list.forEach(val=>{
+                  console.info(val)
                   if(val.type == 'dc'){
                     val.val = selectItem.name;
                     val.valnum = selectItem.id;
diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue
index fb489f8ae..2117e18df 100644
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -58,12 +58,7 @@
                 <span><i class="el-icon-plus"></i></span>
                 <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
               </el-button>
-              <el-input
-                  class="top-tool-search top-tool top-tool-right"
-                  type="text"
-                  :placeholder="$t('overall.search')"
-                  size="mini"
-                ></el-input>
+              <div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
             </div>
             <el-table
                   :data="tableData"
@@ -329,7 +324,32 @@ export default {
         id: '6',
         name: '小组6',
         description: '小组6desc'
-      }]
+      }],
+      searchMsg: { //给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [/*{
+          id: 1,
+          name: 'ID',
+          type: 'input',
+          label: 'userId',
+          disabled: false
+        },*/{
+          id: 10,
+          name: this.$t('config.account.account'),
+          type: 'input',
+          label: 'username',
+          disabled: false
+        }/*,{
+          id: 11,
+          name: 'E-mail',
+          type: 'input',
+          label: 'email',
+          disabled: false
+        }*/],
+      },
+      searchLabel: { //搜索参数
+
+      },
     }
   },
   methods: {
@@ -348,7 +368,9 @@ export default {
       this.rightBox.show = true;
     },
     getTableData: function() {
-      this.$get('sys/user/list', this.pageObj).then(response => {
+      this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
+      this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
+      this.$get('sys/user/list', this.searchLabel).then(response => {
         if (response.code === 200) {
           for (var i = 0; i < response.data.list.length; i++) {
             response.data.list[i].status = response.data.list[i].status + "";
@@ -455,6 +477,15 @@ export default {
     pageSize(val) {
       this.pageObj.pageSize = val;
       this.getTableData();
+    },
+    search: function(searchObj) {
+      this.searchLabel = {};
+      for (let item in searchObj) {
+        if (searchObj[item]) {
+          this.$set(this.searchLabel, item, searchObj[item]);
+        }
+      }
+      this.getTableData();
     }
   },
   mounted() {
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index 960363e33..f54a5fa0d 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -258,12 +258,7 @@
             <span class="top-tool-btn-txt">{{$t('project.metrics.metrics')}}</span>
           </el-button>
         </el-button-group>
-        <el-input
-          class="top-tool-search top-tool top-tool-right"
-          type="text"
-          :placeholder="$t('overall.search')"
-          size="mini"
-        ></el-input>
+        <div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
       </div>
       <el-table
         :data="metricsTableData"
@@ -300,12 +295,7 @@
           <span><i class="el-icon-plus"></i></span>
           <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
         </el-button>
-        <el-input
-          class="top-tool-search top-tool top-tool-right"
-          type="text"
-          :placeholder="$t('overall.search')"
-          size="mini"
-        ></el-input>
+        <div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
       </div>
       <el-table
         :data="endPointTableData"
@@ -776,6 +766,37 @@ export default {
         id: '',
         host: '',
         sn: ''
+      },
+      searchMsg: { //给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 1,
+          name: 'ID',
+          type: 'input',
+          label: 'id',
+          disabled: false
+        },{
+          id: 12,
+          name: this.$t('project.project.project'),
+          type: 'project',
+          label: 'project',
+          disabled: false
+        },{
+          id: 13,
+          name: this.$t('project.module.module'),
+          type: 'module',
+          label: 'module',
+          disabled: false
+        },{
+          id: 14,
+          name: this.$t('asset.asset'),
+          type: 'asset',
+          label: 'asset',
+          disabled: false
+        }],
+      },
+      searchLabel: { //搜索参数
+
       },
       endpointTableTitle: [
         {
@@ -850,8 +871,10 @@ export default {
     },
     // table数据
     getEndPointTableData: function() {
-      this.$set(this.pageObj, 'moduleId', this.currentModule.id);
-      this.$get('endpoint', this.pageObj).then(response => {
+      this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
+      this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
+      this.$set(this.searchLabel, 'moduleId', this.currentModule.id);
+      this.$get('endpoint', this.searchLabel).then(response => {
         if (response.code === 200) {
           for (var i = 0; i < response.data.list.length; i++) {
             try {
@@ -928,7 +951,7 @@ export default {
           this.moduleData = response.data.list;
           for (let i = 0; i < response.data.list.length; i++) {
             try {
-              var tempObj = JSON.parse(response.data.list[i].param);
+              let tempObj = JSON.parse(response.data.list[i].param);
             } catch (err) {
               console.info(response.data.list[i]);
               console.info(err);
@@ -1246,6 +1269,15 @@ export default {
     dropdownSelect: function(label) {
       this.assetSearch.label = label;
       this.assetSearch.dropdownShow = false;
+    },
+    search: function(searchObj) {
+      this.searchLabel = {};
+      for (let item in searchObj) {
+        if (searchObj[item]) {
+          this.$set(this.searchLabel, item, searchObj[item]);
+        }
+      }
+      this.getEndPointTableData();
     }
   },
   created: function() {
diff --git a/nezha-fronted/src/components/page/project/project2.vue b/nezha-fronted/src/components/page/project/project2.vue
new file mode 100644
index 000000000..4dc4d7326
--- /dev/null
+++ b/nezha-fronted/src/components/page/project/project2.vue
@@ -0,0 +1,372 @@
+<template>
+  <div class="project">
+    <div class="content-left">
+      <div class="sidebar-title">{{currentProject.name}}</div>
+      <div class="sidebar-info">
+      </div>
+    </div>
+
+    <div class="content-right">
+      <div class="top-tools">
+        <el-button-group>
+          <el-button @click="" class="top-tool-btn top-tool top-tool-btn-active" size="mini">
+            <span class="top-tool-btn-txt">{{$t('project.endpoint.endpoint')}}</span>
+          </el-button>
+          <el-button @click="" class="top-tool-btn top-tool" size="mini">
+            <span class="top-tool-btn-txt">{{$t('project.metrics.metrics')}}</span>
+          </el-button>
+        </el-button-group>
+        <el-button @click.stop="toAdd" class="top-tool-btn top-tool-btn-active top-tool margin-l-10 top-tool-right" size="mini">
+          <span><i class="el-icon-plus"></i></span>
+          <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
+        </el-button>
+        <div class="top-tool-search top-tool top-tool-right"></div>
+      </div>
+      <el-table
+        :data="endpointTableData"
+        border
+        height="calc(100% - 65px)"
+        style="width: 100%;">
+        <el-table-column
+          v-for="(item, index) in endpointTableTitle"
+          v-if="item.show"
+          :width="item.width"
+          :key="`col-${index}`"
+          :label="item.label"
+        >
+          <template slot-scope="scope" :column="item">
+            <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">
+          <template slot-scope="scope" :column="item">
+            <div class="content-right-options">
+              <span @click.stop="detail(scope.row)" class="content-right-option"><i class="el-icon-view"></i></span>
+              <span @click.stop="toEdit(scope.row)" class="content-right-option"><i class="el-icon-edit-outline"></i></span>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <Pagination :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="Pagination"></Pagination>
+    </div>
+
+    <module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
+  </div>
+</template>
+
+<script>
+import projectBox from '../../common/rightBox/projectBox';
+export default {
+  name: "project2",
+  data() {
+    return {
+      endpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: ''},
+      endpointTableTitle: [
+        {
+          label: this.$t("project.endpoint.endpointId"),
+          prop: 'id',
+          show: true,
+          width: 110
+        },{
+          label: this.$t("project.endpoint.host"),
+          prop: 'host',
+          show: true,
+        },{
+          label: this.$t("project.endpoint.port"),
+          prop: 'port',
+          show: true,
+        },{
+          label: this.$t("project.endpoint.param"),
+          prop: 'param',
+          show: true,
+        },{
+          label: this.$t("project.endpoint.path"),
+          prop: 'path',
+          show: true,
+        },{
+          label: this.$t("project.endpoint.asset"),
+          prop: 'asset',
+          show: true,
+        }
+      ],
+      endpointTableData: [],
+      endpointPageObj: {
+        pageNo: 1,
+        pageSize: 20,
+        total:0
+      },
+      moduleList: [],
+      currentProject: {id: '', name: '', remark: ''}, //endpoint弹框、module列表用来回显project
+      editModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //编辑的module
+      currentModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //endpoint弹框用来回显module
+
+    }
+  },
+  methods: {
+    getEndPointTableData() {
+      this.$get('endpoint', this.endpointPageObj).then(response => {
+        if (response.code === 200) {
+          for (let i = 0; i < response.data.list.length; i++) {
+            try {
+              var tempObj = JSON.parse(response.data.list[i].param);
+            } catch (err) {
+              console.info(response.data.list[i]);
+              console.info(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.endpointPageObj.total = response.data.total;
+        }
+      });
+    },
+    endpointPageNo(val) {
+      this.endpointPageObj.pageNo = val;
+      this.getEndPointTableData();
+    },
+    endpointPageSize(val) {
+      this.endpointPageObj.pageSize = val;
+      this.getEndPointTableData();
+    },
+  },
+  created() {
+    this.getEndPointTableData();
+  }
+}
+</script>
+
+<style scoped>
+  .project {
+    height: 100%;
+  }
+  .content-right-option {
+    cursor: pointer;
+    display: inline-block;
+    margin-right: 6px;
+  }
+  .content-right-option .el-icon-delete {
+    color: #F98D9A;
+  }
+  .content-right-option .el-icon-delete:hover {
+    color: #D96D7A;
+  }
+  .content-right-option .el-icon-view {
+    color: #60BEFF;
+  }
+  .content-right-option .el-icon-view:hover {
+    color: #409EFF;
+  }
+
+  /* start--param*/
+  .param-btn {
+    float: right;
+    height: 27px;
+    margin-top: -3px;
+  }
+  .param-btn-active {
+    background-color: #656565;
+    color: white;
+    border: 1px solid #656565;
+  }
+  .param-btn-active:hover, .param-btn-active:focus {
+    background-color: #656565;
+    color: white;
+  }
+  .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 {
+    border: 1px solid #DCDFE6;
+    border-radius: 4px;
+    padding: 0 10px;
+  }
+  .param-box-endpoint {
+    height: 325px;
+  }
+  .param-box-module {
+    height: 227px;
+  }
+  .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%;
+  }
+  .param-box-row-eq {
+    display: inline-block;
+    width: 22px;
+    text-align: center;
+    height: 32px;
+    line-height: 32px;
+    color: #c4c7cF;
+  }
+  .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;
+  }
+  .param-box-row-symbol>i {
+    position: absolute;
+    top: 1px;
+    right: 1px;
+  }
+  /* end--param*/
+
+  /* begin--子弹框*/
+  .right-sub-box {
+    width: 380px;
+    height: 520px;
+    position: absolute;
+    top: 380px;
+    right: 100px;
+    z-index: 2;
+    padding: 0 10px;
+  }
+  .right-sub-box .el-input-group {
+    width: 227px;
+    float: right;
+    margin: 7px 0 0 0;
+  }
+  /* begin--搜索框*/
+  .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;
+    text-align: center;
+  }
+  .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--搜索框*/
+  /* begin--table*/
+  .endpoint-sub-table {
+    margin-top: 25px;
+  }
+  .line-100 {
+    margin-bottom: 3px;
+  }
+  .endpoint-sub-table-head {
+    line-height: 28px;
+    height: 30px;
+  }
+  .endpoint-sub-table-row {
+    line-height: 28px;
+    height: 30px;
+    color: #656565;
+  }
+  .endpoint-sub-table-row-active {
+    background-color: #dadada;
+  }
+  .endpoint-sub-table-col {
+    display: inline-block;
+    width: 45%;
+    padding-left: 10px;
+  }
+  .endpoint-sub-table-paginate-all {
+    position: absolute;
+    left: 10px;
+    bottom: 17px;
+    color: #5a5a5a;
+  }
+  .endpoint-sub-table-body {
+    font-size: 15px;
+  }
+  /* end--table*/
+
+  /* end--子弹框*/
+</style>
+<style>
+  /* begin--覆盖分页组件样式*/
+  .right-sub-box .el-pagination.is-background .btn-next, .right-sub-box .el-pagination.is-background .btn-prev, .right-sub-box .el-pagination.is-background .el-pager li {
+    margin: 0 3px;
+    min-width: 25px;
+  }
+  .right-sub-box .el-pagination button, .right-sub-box .el-pagination span:not([class*=suffix]) {
+    margin: 0 3px;
+    height: 25px;
+    line-height: 25px;
+  }
+  .right-sub-box .el-pager li {
+    height: 25px;
+    line-height: 25px;
+  }
+  .right-sub-box .el-pagination.is-background .el-pager li:not(.disabled).active {
+    background-color: #656565;
+    border: 1px solid #656565;
+  }
+  .right-sub-box .el-pagination.is-background .btn-next, .right-sub-box .el-pagination.is-background .btn-prev, .right-sub-box .el-pagination.is-background .el-pager li {
+    background-color: white;
+  }
+  .right-sub-box .el-pagination button, .right-sub-box .el-pager li {
+    border: 1px solid #DADADA;
+  }
+  .right-sub-box .el-pager li.active+li {
+    border: 1px solid #DADADA;
+  }
+  .right-sub-box .el-pagination.is-background .el-pager li:not(.disabled):hover {
+    color: black;
+  }
+  .right-sub-box .el-pagination.is-background .el-pager li.active:hover {
+    color: white;
+  }
+  .endpoint-sub-table-paginate .el-pagination {
+    position: absolute;
+    right: 10px;
+    bottom: 13px;
+  }
+  .el-input-group__append {
+    cursor: pointer;
+  }
+
+  /* end--覆盖分页组件样式*/
+</style>
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index af94aa536..6098dfe8d 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -16,9 +16,15 @@ import {post, get, put, del} from './http.js'
 
 import Pagination from "./components/common/pagination"; //引入全局分页组件
 import searchInput from "./components/common/searchInput"; //搜索框组件
+import projectBox from './components/common/rightBox/projectBox'; //project弹框组件
+import moduleBox from './components/common/rightBox/moduleBox'; //module弹框组件
+import endpointBox from './components/common/rightBox/endpointBox'; //endpoint弹框组件
 
 Vue.component("Pagination", Pagination);
 Vue.component("searchInput", searchInput);
+Vue.component("project-box", projectBox);
+Vue.component("module-box", moduleBox);
+Vue.component("endpoint-box", endpointBox);
 
 Vue.prototype.$axios = axios;
 Vue.prototype.$post = post;
diff --git a/nezha-fronted/src/router/index.js b/nezha-fronted/src/router/index.js
index 768a1ec2f..376d227b0 100644
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -23,7 +23,7 @@ export default new Router({
         },
         {
           path: '/project',
-          component: resolve => require(['../components/page/project/project.vue'], resolve),
+          component: resolve => require(['../components/page/project/project2.vue'], resolve),
         },
         {
           path: '/asset',