diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index c4a2dbd78..f6c8774ae 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -3,6 +3,7 @@ const cn = {
   overall: {
     dashboard: '仪表盘',
     project: '系统',
+    monitor: '监控',
     alert: '告警',
     asset: '资产',
     config: '设置',
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index dd6efb00f..e5729721f 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -9,6 +9,7 @@ const en = {
   overall: {
     dashboard: 'Dashboards', // '仪表盘'
     project: 'Projects', // '系统'
+    monitor: 'Monitor', // 监控
     alert: 'Alerts', // "告警"
     asset: 'Assets', // '资产'
     config: 'Settings', // '设置'
diff --git a/nezha-fronted/src/components/common/mixin/dataList.js b/nezha-fronted/src/components/common/mixin/dataList.js
index c054c6db3..89f62bfdf 100644
--- a/nezha-fronted/src/components/common/mixin/dataList.js
+++ b/nezha-fronted/src/components/common/mixin/dataList.js
@@ -54,7 +54,7 @@ export default {
     isBuildIn (row) {
       return (row.buildIn && row.buildIn == 1) || (row.builtIn && row.builtIn == 1)
     },
-    getTableData (callBack) {
+    getTableData () {
       this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
       this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
       this.tools.loading = true
@@ -72,9 +72,6 @@ export default {
               this.toTopBtnHandler(this.scrollbarWrap)
             })
           }
-          if (callBack) {
-            callBack(response.data)
-          }
         }
       })
     },
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index 6d29837fc..4c3fa269a 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -3,7 +3,7 @@
   @import "./L5/css/props.css";
 </style>
 <template>
-  <div class="project-box" v-loading="topologyLoading" :style="{'border':fromOverView?'none':'1px solid #eeeeee'}">
+  <div class="project-box" v-loading="topologyLoading">
     <!--project主要信息-->
     <div class="project-title" v-if="showTopTools&&!fromOverView" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
       <div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px">
@@ -100,7 +100,7 @@
              {{$t('project.topology.preview')}}
            </button>
            <button @click="saveTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
-                   v-has="'project_topo_save'" :disabled="prevent_opt.save"
+                   :disabled="prevent_opt.save"
                    :class="{'nz-btn-disabled':prevent_opt.save}"
                    style="margin-right: 20px">
              {{$t('project.topology.save')}}
@@ -111,68 +111,11 @@
          </span>
       </div>
       <div style="width: 100%;display: flex;justify-content: space-between" v-if="!editTopologyFlag&&!fromOverView">
-        <div class="facade-top">
-          <div class="facade-top-left" v-loading="projectInfo.loading" v-if="projectInfoShow">
-            <div class="facade-top-title">
-              Project information
-            </div>
-            <div>
-              <!--<span><span class="label">Id :</span>{{projectInfo.id}}</span>-->
-              <span><span class="label">Name :</span>{{projectInfo.name}}</span>
-            </div>
-            <div>
-              <span><span class="label">Description :</span>{{projectInfo.remark?projectInfo.remark:'--'}}</span>
-            </div>
-            <!--<div>-->
-            <!--<span>-->
-            <!--<span class="label">Alert state :</span>-->
-            <!--<div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}-->
-            <!--<div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}-->
-            <!--<div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}-->
-            <!--</span>-->
-            <!--</div>-->
-            <div>
-              <span><span class="label">Module Num :</span>{{projectInfo.moduleMum}}</span>
-            </div>
-          </div>
-          <div class="facade-top-right" v-loading="projectInfo.loading" v-if="projectAlertShow" style="padding: 20px 20px 0 20px;height: calc(100% - 20px);">
-            <div class="facade-top-title">
-              <span class="label" style="padding-left: 0;">Alert :</span>
-              {{projectInfo.total}}
-            </div>
-            <div class="facade-top-right-content">
-              <div>
-                <div class="content-P1-title">
-                  {{returnSeverityLabel('P1')}}
-                </div>
-                <div>
-                  {{projectInfo.alertStat[0] || 0}}
-                </div>
-              </div>
-              <div>
-                <div class="content-P2-title">
-                  {{returnSeverityLabel('P2')}}
-                </div>
-                <div>
-                  {{projectInfo.alertStat[1] || 0}}
-                </div>
-              </div>
-              <div style="margin-bottom: 20px;">
-                <div class="content-P3-title">
-                  {{returnSeverityLabel('P3')}}
-                </div>
-                <div>
-                  {{projectInfo.alertStat[2] || 0}}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div  :style="{flex:1,'padding-right': '15px','text-align':topologyInfo.align,'font-size':topologyInfo.fontSize,'color':topologyInfo.fontColor,opacity:topologyInfo.opacity}">{{topologyInfo.name}}</div>
+        <div>{{topologyInfo.name}}</div>
         <span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag&&!fromPrev&&!fromOverView">
 
         <button @click="editTopology" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right"
-                style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;margin-top: -2px" type="button" v-has="'project_topo_save'"
+                style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;margin-top: -2px" type="button"
         >
                   <i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>
         </button>
@@ -182,12 +125,19 @@
             :refresh-data-func="dateChange"
             v-model="searchTime"
             :use-chart-unit="false"
+            :showTimePicker="false"
             ref="pickTime">
           </pick-time>
+          <button @click="changeScreen" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right"
+                  style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;margin-top: -2px" type="button"
+                  :class="topoScreen?'':''"
+          >
+                  <i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>
+        </button>
       </span>
       </div>
     </div>
-    <div :class="['page',fromOverView?'overview-page':'']">
+    <div :class="['page',fromOverView?'overview-page':'']" :style="{'border':fromOverView?'none':'1px solid #eeeeee'}">
       <!--画布部分-->
       <div :id="'topology-canvas' + topologyIndexF" class="full" :ref="'topology-canvas'+ topologyIndexF"></div>
       <!--设置属性-->
@@ -579,6 +529,7 @@ export default {
       deep: true,
       immediate: true,
       handler (n) {
+        console.log(n, '123123123')
         if (n.id) {
           if (getTopology(this.topologyIndex)) {
             getTopology(this.topologyIndex).destroy()
@@ -636,7 +587,17 @@ export default {
       }
     }
   },
-  computed: {},
+  computed: {
+    topoScreen () {
+      this.$nextTick(() => {
+        const domRect = document.getElementById('topology-canvas' + this.topologyIndex).getBoundingClientRect()
+        if (getTopology(this.topologyIndex)) {
+          getTopology(this.topologyIndex).canvasPos = domRect
+        }
+      })
+      return this.$store.getters.getShowTopoScreen
+    }
+  },
   created () {
     canvasRegister()
     if (process.client) {
@@ -1016,10 +977,10 @@ export default {
     getProjectData (n) {
       // 获取projectInfo
       this.projectInfo.loading = true
-      this.$get('project/info', { id: n.id }).then(response => {
+      this.$get('monitor/project/' + n.id).then(response => {
         if (response.code === 200) {
           this.projectInfo.loading = false
-          this.projectInfo = { ...this.projectInfo, ...response.data.basic, moduleMum: response.data.module.length }
+          this.projectInfo = { ...this.projectInfo, ...response.data }
           this.projectInfo.total = this.projectInfo.alertStat[0] + this.projectInfo.alertStat[1] + this.projectInfo.alertStat[2]
           if (!this.projectInfo.total) {
             this.projectInfo.total = 0
@@ -1034,11 +995,10 @@ export default {
     // 获取module
     getModule () {
       this.projectInfo.loading = true
-      this.$get('project/info', { id: this.obj.id }).then(response => {
+      this.$get('/monitor/module?pageSize=-1&projectIds=' + this.obj.id).then(response => {
         if (response.code === 200) {
           this.projectInfo.loading = false
-          this.projectInfo = { ...this.projectInfo, ...response.data.basic, moduleMum: response.data.module.length }
-          this.allModules = response.data.module
+          this.allModules = response.data.list
           this.modulesDiff()
         }
       })
@@ -2052,6 +2012,9 @@ export default {
     },
     penToBottom () {
       getTopology(this.topologyIndex).bottom()
+    },
+    changeScreen () {
+      this.$store.commit('setShowTopoScreen')
     }
   },
   destroyed () {
@@ -2506,7 +2469,6 @@ export default {
     height: calc(100% - 20px);
     margin-top: 10px;
     position: relative;
-    border: 1px solid #eeeeee;
     border-radius: 2px;
     overflow: hidden;
     .pickTime{
@@ -2533,7 +2495,7 @@ export default {
 
   .page {
     display: flex;
-    height: calc(100% - 60px);
+    height: calc(100% - 55px);
     width: 100%;
     position: relative;
 
diff --git a/nezha-fronted/src/components/common/rightBox/projectBox.vue b/nezha-fronted/src/components/common/rightBox/projectBox.vue
index f264f31de..455e1d584 100644
--- a/nezha-fronted/src/components/common/rightBox/projectBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/projectBox.vue
@@ -68,7 +68,7 @@ export default {
         if (valid) {
           this.prevent_opt.save = true
           if (this.editProject.id) {
-            this.$put('project', this.editProject).then(response => {
+            this.$put('monitor/project', this.editProject).then(response => {
               if (response.code === 200) {
                 this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.$store.commit('projectListChange')
@@ -80,7 +80,7 @@ export default {
               this.prevent_opt.save = false
             })
           } else {
-            this.$post('project', this.editProject).then(response => {
+            this.$post('monitor/project', this.editProject).then(response => {
               if (response.code === 200) {
                 this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.$store.commit('projectListChange')
@@ -104,7 +104,7 @@ export default {
         cancelButtonText: this.$t('tip.no'),
         type: 'warning'
       }).then(() => {
-        this.$delete('project?ids=' + this.editProject.id).then(response => {
+        this.$delete('monitor/project?ids=' + this.editProject.id).then(response => {
           if (response.code === 200) {
             this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
             this.$store.commit('projectListChange')
diff --git a/nezha-fronted/src/components/common/table/settings/projectTable.vue b/nezha-fronted/src/components/common/table/settings/projectTable.vue
new file mode 100644
index 000000000..aec16c185
--- /dev/null
+++ b/nezha-fronted/src/components/common/table/settings/projectTable.vue
@@ -0,0 +1,125 @@
+<template>
+  <el-table
+    id="userTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    border
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="(selection) => { batchDeleteObjs = selection }"
+  >
+    <el-table-column
+      :resizable="false"
+      align="center"
+      type="selection"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitle"
+      v-if="item.show"
+      :key="`col-${index}`"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :width="`${item.width}`"
+      class="data-column"
+    >
+      <template slot="header">
+        <span>{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template slot-scope="scope" :column="item">
+        <template v-if="item.prop === 'moduleNum'">
+          moduleNum
+        </template>
+        <template v-else-if="item.prop === 'endpointNum'">
+          endpointNum
+        </template>
+        <template v-else-if="item.prop === 'alertNum'">
+          alertNum
+        </template>
+        <span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      :resizable="false"
+      :width="operationWidth"
+      fixed="right">
+      <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
+      <div slot-scope="scope" class="table-operation-items">
+        <button class="table-operation-item" @click="changeProjectTopo( scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
+        <el-dropdown size="medium" trigger="hover" @command="tableOperation">
+          <div class="table-operation-item table-operation-item--more">
+            <span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
+          </div>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
+            <el-dropdown-item :command="['delete', scope.row, `sys/user?ids=${scope.row.id}`]" :disabled="scope.row.id === 1"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import table from '@/components/common/mixin/table'
+export default {
+  name: 'userTable',
+  mixins: [table],
+  data () {
+    return {
+      tableTitle: [ // 原始table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('project.project.project'),
+          prop: 'name',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('project.module.module'),
+          prop: 'moduleNum',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('project.endpoint.endpoint'),
+          prop: 'endpointNum',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('project.endpoint.endpoint'),
+          prop: 'alertNum',
+          show: true,
+          width: 150
+        },
+        {
+          label: this.$t('overall.remark'),
+          prop: 'remark',
+          show: true,
+          minWidth: 150
+        }
+      ]
+    }
+  },
+  methods: {
+    changeProjectTopo (project) {
+      this.$store.commit('currentProjectChange', project)
+    }
+  },
+  computed: {
+    isCurrentUser () {
+      return function (username) {
+        return localStorage.getItem('nz-username') === username
+      }
+    }
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/layout/header.vue b/nezha-fronted/src/components/layout/header.vue
index 879ffa3d7..612e1162c 100644
--- a/nezha-fronted/src/components/layout/header.vue
+++ b/nezha-fronted/src/components/layout/header.vue
@@ -322,7 +322,7 @@ export default {
       }
     },
     getProjectList () {
-      this.$get('project', { pageSize: -1 }).then(response => {
+      this.$get('monitor/project', { pageSize: -1 }).then(response => {
         if (response.code == 200) {
           this.projectData = response.data.list
           let flag = false
diff --git a/nezha-fronted/src/components/layout/leftMenu.vue b/nezha-fronted/src/components/layout/leftMenu.vue
index 0a9f35de4..8e901f230 100644
--- a/nezha-fronted/src/components/layout/leftMenu.vue
+++ b/nezha-fronted/src/components/layout/leftMenu.vue
@@ -99,7 +99,7 @@ export default {
           className = 'nz-icon nz-icon-menu-assets'
           break
         }
-        case 'project': {
+        case 'monitor': {
           className = 'nz-icon nz-icon-menu-project'
           break
         }
diff --git a/nezha-fronted/src/components/page/monitor/project/index.vue b/nezha-fronted/src/components/page/monitor/project/index.vue
new file mode 100644
index 000000000..38bb04552
--- /dev/null
+++ b/nezha-fronted/src/components/page/monitor/project/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="main-list">
+    <projectList  :class="showList?'projectList':'hide'" />
+    <projectTopo class="projectTopo"/>
+  </div>
+</template>
+
+<script>
+import projectList from './projectList'
+import projectTopo from './project'
+export default {
+  name: 'index',
+  props: {},
+  computed:{
+    showList(){
+      return !this.$store.getters.getShowTopoScreen
+    }
+  },
+  components: {
+    projectList,
+    projectTopo
+  },
+  data () {
+    return {}
+  },
+  watch: {},
+  mounted () {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+.main-list{
+  height: 100%;
+  width: 100%;
+  display: flex;
+  background: #fff;
+  .projectList{
+    flex: 1;
+  }
+  .projectTopo{
+    flex: 1;
+  }
+  .hide{
+    display: none;
+  }
+}
+</style>
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/monitor/project/project.vue
similarity index 77%
rename from nezha-fronted/src/components/page/project/project.vue
rename to nezha-fronted/src/components/page/monitor/project/project.vue
index 90912d09f..66e763268 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/monitor/project/project.vue
@@ -1,5 +1,5 @@
 <style lang="scss">
-  @import '../../charts/chart';
+  @import '../../../charts/chart';
 
   .project-calendar .el-input__inner {
     height: 24px;
@@ -25,161 +25,7 @@
 </style>
 <template>
   <div class="project">
-    <template v-if="pageType == 'endpoint'">
-      <div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
-        <div class="main-modal"></div>
-        <div class="top-tools" v-show="bottomBox.mainResizeShow">
-          <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
-            <div class="top-tool-search">
-              <search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input>
-            </div>
-            <export-excel
-              id="endpoint-list"
-              export-file-name="endpoint"
-              export-url="/endpoint/export"
-              import-url="/endpoint/import"
-              :params="endpointSearchLabel"
-              :permissions="{import: 'project_endpoint_import', export: 'project_endpoint_export'}"
-              @afterImport="afterCloseImport"
-              class="margin-l-20"
-            >
-              <template slot="optionZone">
-                <button :title="$t('overall.createEndpoint')" @click.stop="addEndpoint" v-has="'project_endpoint_toAdd'"
-                        class="nz-btn nz-btn-size-normal nz-btn-style-light" id="project-create-project">
-                  <i class="nz-icon nz-icon-create-square"></i>
-                </button>
-              </template>
-            </export-excel>
-            <delete-button :delete-objs="batchDeleteObjs" @after="afterCloseImport" @before="delFlag=true" api="endpoint" v-has="'project_endpoint_delete'"></delete-button>
-          </div>
-          <div class="pagination-top pagination-top-hide display-none"></div>
-        </div>
-        <!-- 自定义table列 -->
-        <transition name="el-zoom-in-top">
-          <element-set
-            id="endpoint-list"
-            v-if="tools.showCustomTableTitle"
-            @close="tools.showCustomTableTitle = false"
-            :custom-table-title.sync="tools.customTableTitle"
-            :original-table-title="tableTitle"
-            ref="customTableTitle"
-          ></element-set>
-        </transition>
-        <el-table
-          id="endpoint-list-table"
-          :data="endpointTableData"
-          border
-          class="nz-table endpoint-table"
-          :height="mainTableHeight"
-          v-show="bottomBox.mainResizeShow"
-          ref="endpointTable"
-          :cell-class-name="messageStyle"
-          v-loading="tools.loading"
-          style="width: 100%;"
-          @sort-change="tableDataSort"
-          @row-dblclick="detailEndpoint"
-          @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
-          @header-dragend="()=>{this.$refs.endpointTable.doLayout();}"
-        >
-          <el-table-column
-            :resizable="false"
-            type="selection"
-            width="40"
-            align="center">
-          </el-table-column>
-          <el-table-column
-            :resizable="true"
-            v-for="(item, index) in tools.customTableTitle"
-            v-if="item.show"
-            :key="`col-${index}`"
-            :label="item.label"
-            :min-width="item.width || item.minWidth"
-            :sortable="$tableSet.sortableShow(item.prop,'project')"
-            :prop="$tableSet.propTitle(item.prop,'project')"
-            :sort-orders="['ascending', 'descending']"
-          >
-            <template slot-scope="scope" :column="item">
-              <span v-if="item.prop === 'asset' && scope.row[item.prop]" class="link" @click="detailEndpoint(scope.row)">
-                {{scope.row[item.prop].sn}} :
-                ({{scope.row[item.prop].host}})
-              </span>
-              <span v-else-if="item.prop === 'param'">
-              <template v-if="scope.row.paramObj">
-                <span v-for="(p, i) in scope.row.paramObj" :key="i">{{p.key}}={{p.value}}<span
-                  v-if="i < scope.row.paramObj.length-1">，</span></span>
-              </template>
-              <template v-else>-</template>
-            </span>
-              <span v-else-if="item.prop === 'labels'">
-                <template v-if="scope.row.labelModule">
-                  <span v-for="(p, i) in scope.row.labelModule" :key="i">{{p.key}}={{p.value}}<span
-                    v-if="i < scope.row.labelModule.length-1">，</span></span>
-                </template>
-                <template v-else>-</template>
-              </span>
-              <template v-else-if="item.prop === 'alerts'">
-                <el-tooltip :content="scope.row.alertNum+' '+$t('overall.active')" placement="top" effect="light"
-                            :disabled=" scope.row.alertNum < 99">
-                  <span :id="'endpoint-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row)" class="link">
-                    {{(scope.row.alertNum < 99 ? scope.row.alertNum : 99)}}
-                      <sup class="linkSup" v-if="scope.row.alertNum > 99">+</sup>
-                    {{' ' + $t('overall.active')}}
-                  </span>
-                </el-tooltip>
-              </template>
-              <template v-else-if="item.prop === 'type'">{{currentModule.type}}</template>
-              <div v-else-if="item.prop === 'option'" class="content-right-options">
-                <span :title="$t('overall.view')" @click="detailEndpoint(scope.row)" class="content-right-option"
-                      :id="'edp-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
-                &nbsp;
-                <span :title="$t('overall.query')" @click="query(scope.row)" class="content-right-option"
-                      :id="'edp-query-'+scope.row.id"><i class="nz-icon nz-icon-search"></i></span>
-                &nbsp;
-                <span :title="$t('overall.edit')" @click="editEndpoint(scope.row)" class="content-right-option" v-has="'project_endpoint_toEdit'"
-                      :id="'edp-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
-
-                <span :title="$t('overall.delete')" @click.stop="delEndpoint(scope.row)" class="content-right-option" v-has="'project_endpoint_delete'"
-                      :id="'asset-del-'+scope.row.id"><i class="nz-icon nz-icon-delete"></i></span>
-              </div>
-              <span v-else-if="item.prop === 'state'">
-              <el-popover placement="right" width="50" trigger="hover"
-                          :popper-class="scope.row.state == '1'?'small-pop':''">
-                <div slot="reference" style="width: 20px">
-                  <div :class="{'active-icon green':scope.row.state == '1', 'active-icon red':scope.row.state == '0', 'active-icon gray':scope.row.state == '2'}"></div>
-                </div>
-                <div>
-                  <div v-if="scope.row.state == '1'">up</div>
-                  <div v-else-if="scope.row.state == '0'">down:<br/>{{getStateErrorMsg(scope.row)}}</div>
-                  <div v-else-if="scope.row.state == '2'">suspended</div>
-                </div>
-              </el-popover>
-            </span>
-              <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
-              <template v-else>-</template>
-            </template>
-          </el-table-column>
-          <el-table-column width="28" :resizable="true">
-            <template slot="header">
-            <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)"
-                  class="nz-table-gear">
-              <i class="nz-icon nz-icon-gear"></i>
-            </span>
-            </template>
-          </el-table-column>
-        </el-table>
-        <button class="to-top" :style="{top: tools.toTopBtnTop}" id="endpoint-list-totop"
-                :class="{'to-top-is-hover': tools.tableHover}"
-                @click="toTop(scrollbarWrap)" v-show="tools.showTopBtn && bottomBox.mainResizeShow"><i
-          class="nz-icon nz-icon-top"></i></button>
-        <div class="pagination-bottom" v-show="!bottomBox.showSubList">
-          <Pagination :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo'
-                      @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
-        </div>
-      </div>
-    </template>
-    <template v-else-if="pageType == 'project'">
-      <!--<panel-tab from="project" :obj="currentProject" targetTab.sync="panel"></panel-tab>-->
-      <!--<facade :obj="currentProject" targetTab.sync="panel" ref="facade" v-if="reloadFacade"/>-->
+    <template>
       <topologyL5 :obj="currentProject" targetTab.sync="panel" ref="facade" :topologyIndexF="topologyIndexF" v-if="reloadFacade" @changeTopologyIndexF="changeTopologyIndexF"/>
     </template>
 
@@ -212,10 +58,10 @@
 </template>
 
 <script>
-import exportXLSX from '../../common/exportXLSX'
-import bus from '../../../libs/bus'
+import exportXLSX from '@/components/common/exportXLSX'
+import bus from '@/libs/bus'
 import topologyL5 from '@/components/common/project/topologyL5'
-import deleteButton from '../../common/deleteButton'
+import deleteButton from '@/components/common/deleteButton'
 
 export default {
   name: 'project2',
@@ -777,7 +623,6 @@ export default {
     if (pageSize) {
       this.endpointPageObj.pageSize = pageSize
     }
-    this.getModuleList()
     this.getUserData()
     this.getProjectList()
   },
@@ -786,7 +631,6 @@ export default {
     this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
       ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
       : this.tableTitle
-    this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
     setTimeout(() => {
       this.ready = true
     }, 300)
@@ -855,6 +699,12 @@ export default {
           this.delFlag = false
         }
       }
+    },
+    currentProjectChange: {
+      deep: true,
+      handler (n) {
+        this.currentProject = this.$store.state.currentProject
+      }
     }
   },
   beforeDestroy () {
diff --git a/nezha-fronted/src/components/page/monitor/project/projectList.vue b/nezha-fronted/src/components/page/monitor/project/projectList.vue
new file mode 100644
index 000000000..1991679b9
--- /dev/null
+++ b/nezha-fronted/src/components/page/monitor/project/projectList.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="project-list">
+    <nz-data-list
+      ref="dataList"
+      :api="url"
+      :custom-table-title.sync="tools.customTableTitle"
+      :from="fromRoute.user"
+      :layout="['searchInput', 'elementSet']"
+      :search-msg="searchMsg">
+      <template v-slot:top-tool-right>
+        <button id="account-add" v-has="'project_toAdd'" :title="$t('overall.createUser')" class="top-tool-btn margin-l-20"
+                type="button" @click="add">
+          <i class="nz-icon-create-square nz-icon"></i>
+        </button>
+        <delete-button id="account-list-batch-delete" v-has="'account_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+      </template>
+      <template v-slot="slotProps">
+        <project-table
+          ref="dataTable"
+          v-loading="slotProps.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
+          :height="mainTableHeight"
+          :table-data="tableData"
+          @del="del"
+          @edit="edit"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></project-table>
+      </template>
+      <template v-slot:pagination>
+        <div class="project-page">
+          <Pagination ref="Pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+        </div>
+      </template>
+    </nz-data-list>
+    <transition name="right-box">
+      <projectBox v-if="rightBox.show" :project="object" @close="closeRightBox"></projectBox>
+    </transition>
+  </div>
+</template>
+<script>
+import deleteButton from '@/components/common/deleteButton'
+import projectBox from '@/components/common/rightBox/projectBox'
+import nzDataList from '@/components/common/table/nzDataList'
+import dataListMixin from '@/components/common/mixin/dataList'
+import projectTable from '@/components/common/table/settings/projectTable'
+
+export default {
+  name: 'user',
+  components: {
+    nzDataList,
+    projectBox,
+    deleteButton,
+    projectTable
+  },
+  mixins: [dataListMixin],
+  data () {
+    return {
+      url: 'monitor/project',
+      blankObject: { // 空白对象
+        id: '',
+        name: '',
+        remark: ''
+      },
+      tableId: 'projectTable',
+      queryPermission: 'account_view',
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 10,
+          name: 'Project name',
+          type: 'input',
+          label: 'name',
+          disabled: false
+        },
+        {
+          id: 10,
+          name: 'Project id',
+          type: 'input',
+          label: 'id',
+          disabled: false
+        }]
+      },
+      roles: []
+    }
+  },
+  methods: {
+  },
+  computed: {
+  },
+  mounted () {
+  }
+}
+</script>
+<style lang="scss">
+  .project-list{
+    .project-page{
+      margin: 0 20px;
+      border: 1px solid #eeeeee;
+      border-top: none;
+      /deep/ .pagination{
+        padding-top: 0;
+      }
+    }
+  }
+</style>
diff --git a/nezha-fronted/src/router/index.js b/nezha-fronted/src/router/index.js
index 3c7325f5e..59d61f6ac 100644
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -34,8 +34,8 @@ export default new Router({
           component: resolve => require(['../components/page/dashboard/overview/overview2.vue'], resolve)
         },
         {
-          path: '/project',
-          component: resolve => require(['../components/page/project/project.vue'], resolve)
+          path: '/monitor/project',
+          component: resolve => require(['../components/page/monitor/project/index.vue'], resolve)
         },
         {
           path: '/asset',
diff --git a/nezha-fronted/src/store/index.js b/nezha-fronted/src/store/index.js
index cd9c7f870..aebff1236 100644
--- a/nezha-fronted/src/store/index.js
+++ b/nezha-fronted/src/store/index.js
@@ -31,7 +31,8 @@ const store = new Vuex.Store({
     },
     idcArr: [],
     overViewProject: {},
-    dcDataRefresh: false
+    dcDataRefresh: false,
+    showTopoScreen: false,
   },
   getters: {
     getLinkData (state) {
@@ -51,6 +52,12 @@ const store = new Vuex.Store({
     },
     getDcDataRefresh (state) {
       return state.dcDataRefresh
+    },
+    getCurrentProject (state) {
+      return state.currentProject
+    },
+    getShowTopoScreen (state) {
+      return state.showTopoScreen
     }
   },
   mutations: {
@@ -125,6 +132,9 @@ const store = new Vuex.Store({
       setTimeout(() => {
         state.dcDataRefresh = false
       }, 100)
+    },
+    setShowTopoScreen (state) {
+      state.showTopoScreen = !state.showTopoScreen
     }
   },
   actions: {
diff --git a/nezha-fronted/ws.js b/nezha-fronted/ws.js
new file mode 100644
index 000000000..db69d50ad
--- /dev/null
+++ b/nezha-fronted/ws.js
@@ -0,0 +1,18 @@
+'use strict'
+const path = require('path')
+
+module.exports = {
+  context: path.resolve(__dirname, './'),
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      '@': path.resolve('src'),
+      '@assets': path.resolve(__dirname, 'src/assets'),
+      '@pages': path.resolve(__dirname, 'src/pages'),
+      '@comp': path.resolve(__dirname, 'src/components'),
+      '@api': path.resolve(__dirname, 'src/api'),
+      '@plug': path.resolve(__dirname, 'src/plugins'),
+      '@utils': path.resolve(__dirname, 'src/utils')
+    }
+  }
+}