diff --git a/src/userviews/assets/index.vue b/src/userviews/assets/index.vue
index b62fe7d34..3b43e480d 100644
--- a/src/userviews/assets/index.vue
+++ b/src/userviews/assets/index.vue
@@ -1,13 +1,86 @@
 <template>
-
+  <GenericTreeListPage :table-config="tableConfig" :header-actions="headerActions" :tree-setting="treeSetting" />
 </template>
 
 <script>
-  export default {
-    name: 'index.vue'
+import GenericTreeListPage from '@/layout/components/GenericTreeListPage/index'
+import { DetailFormatter, ActionsFormatter, BooleanFormatter } from '@/components/ListTable/formatters'
+export default {
+  components: {
+    GenericTreeListPage
+  },
+  data() {
+    return {
+      treeSetting: {
+        showMenu: true,
+        showRefresh: true,
+        showAssets: false,
+        url: '/api/v1/perms/users/assets/',
+        nodeUrl: '/api/v1/perms/users/nodes/',
+        // ?assets=0不显示资产. =1显示资产
+        treeUrl: '/api/v1/perms/users/nodes/children/tree/?cache_policy=2',
+        callback: {
+          refresh: () => {}
+        }
+      },
+      tableConfig: {
+        url: '/api/v1/perms/users/assets/',
+        hasTree: true,
+        columns: [
+          {
+            prop: 'hostname',
+            label: this.$t('assets.Hostname'),
+            formatter: DetailFormatter,
+            sortable: true,
+            align: 'center'
+          },
+          {
+            prop: 'ip',
+            align: 'center',
+            label: this.$t('assets.ip'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'hardware_info',
+            align: 'center',
+            label: this.$t('assets.SystemUsers')
+          },
+          {
+            prop: 'comment',
+            align: 'center',
+            label: this.$t('assets.Comment')
+          },
+          {
+            prop: 'id',
+            align: 'center',
+            formatter: ActionsFormatter,
+            width: '200px',
+            label: this.$t('common.action'),
+            actions: {
+              performDelete: ({ row, col }) => {
+                const id = row.id
+                const url = `/api/v1/assets/assets/${id}/`
+                return this.$axios.delete(url)
+              }
+            }
+          }
+        ]
+      },
+      headerActions: {
+        hasExport: false,
+        hasImport: false,
+        hasRefresh: false,
+        hasCreate: false,
+        hasBulkDelete: false,
+        hasBulkUpdate: false,
+        hasLeftActions: false,
+        hasSearch: true,
+        hasRightActions: false
+      }
+    }
   }
+}
 </script>
 
-<style scoped>
-
+<style>
 </style>
diff --git a/src/userviews/users/Detail.vue b/src/userviews/users/Detail.vue
new file mode 100644
index 000000000..6f412ce4c
--- /dev/null
+++ b/src/userviews/users/Detail.vue
@@ -0,0 +1,178 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :span="14">
+      <DetailCard :items="detailCardItems" />
+    </el-col>
+    <el-col :span="10" />
+  </el-row>
+</template>a
+
+<script>
+import DetailCard from '@/components/DetailCard'
+import RelationCard from '@/components/RelationCard'
+import QuickActions from '@/components/QuickActions'
+import { toSafeLocalDateStr } from '@/utils/common'
+export default {
+  name: 'Detail',
+  components: {
+    DetailCard
+  },
+  props: {
+    object: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      quickActions: [
+        {
+          title: this.$t('assets.is_active'),
+          type: 'switcher',
+          attrs: {
+            label: this.$t('common.Test'),
+            model: this.object.is_active
+          },
+          callbacks: {
+            click: function() {
+              this.$axios.post(
+                `api/v1/assets/system-users/${this.object.id}/tasks/`,
+                { action: 'test' }
+              ).then(res => {
+                window.open(`/ops/celery/task/${res.task}/log/`, '', 'width=900,height=600')
+              }
+              )
+            }.bind(this)
+          }
+        },
+        {
+          title: this.$t('assets.TestAssetsConnective'),
+          attrs: {
+            type: 'primary',
+            label: this.$t('common.Test')
+          },
+          callbacks: {
+            click: function() {
+              this.$axios.post(
+                `api/v1/assets/system-users/${this.object.id}/tasks/`,
+                { action: 'test' }
+              ).then(res => {
+                window.open(`/ops/celery/task/${res.task}/log/`, '', 'width=900,height=600')
+              }
+              )
+            }.bind(this)
+          }
+        },
+        {
+          title: this.$t('assets.PushSystemUserNow'),
+          attrs: {
+            type: 'primary',
+            label: this.$t('common.Push')
+          },
+          callbacks: {
+            click: function() {
+              this.$axios.post(
+                `api/v1/assets/system-users/${this.object.id}/tasks/`,
+                { action: 'push' }
+              ).then(res => {
+                window.open(`/ops/celery/task/${res.task}/log/`, '', 'width=900,height=600')
+              }
+              )
+            }.bind(this)
+          }
+        }
+      ],
+      nodeReletionConfig: {
+        icon: 'fa-info',
+        title: this.$t('perms.Add node to this permission'),
+        objectsAjax: {
+          url: '/api/v1/assets/nodes/',
+          processResults(data) {
+            let results = data.results
+            results = results.map((item) => {
+              return { label: item.full_value, value: item.id }
+            })
+            const more = !!data.next
+            return { results: results, pagination: more, total: data.count }
+          }
+        },
+        hasObjectsId: this.object.nodes,
+        performAdd: (items) => {
+          const newData = []
+          const value = this.$refs.NodeRelation.iHasObjects
+          value.map(v => {
+            newData.push(v.value)
+          })
+          const relationUrl = `/api/v1/assets/assets/${this.object.id}/`
+          items.map(v => {
+            newData.push(v.value)
+          })
+          return this.$axios.patch(relationUrl, { nodes: newData }).then(res => {
+            this.$message.success(this.$t('common.Update success'))
+          }).catch(err => {
+            this.$message.error(this.$t('common.Update failed' + ' ' + err))
+          })
+        },
+        performDelete: (item) => {
+          const itemId = item.value
+          const newData = []
+          const value = this.$refs.NodeRelation.iHasObjects
+          value.map(v => {
+            if (v.value !== itemId) {
+              newData.push(v.value)
+            }
+          })
+          const relationUrl = `/api/v1/assets/assets/${this.object.id}/`
+          return this.$axios.patch(relationUrl, { nodes: newData }).then(res => {
+            this.$message.success(this.$t('common.Update success'))
+          }).catch(err => {
+            this.$message.error(this.$t('common.Update failed' + ' ' + err))
+          })
+        }
+      }
+    }
+  },
+  computed: {
+    detailCardItems() {
+      return [
+        {
+          value: this.object.username,
+          key: this.$t('asset.username')
+        },
+        {
+          value: this.object.name,
+          key: this.$t('asset.name')
+        },
+        {
+          value: this.object.role_display,
+          key: this.$t('asset.role')
+        },
+        {
+          value: this.object.email,
+          key: this.$t('asset.email')
+        },
+        {
+          value: `${this.object.is_active}`,
+          key: this.$t('asset.is_active')
+        },
+        {
+          value: `没有这个API`,
+          key: this.$t('asset.sshkey')
+        },
+        {
+          value: this.object.mfa_level_display,
+          key: this.$t('asset.mfa_level_display')
+        }
+      ]
+    }
+  },
+  mounted() {
+    console.log(this.object)
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang='less' scoped>
+</style>
diff --git a/src/userviews/users/index.vue b/src/userviews/users/index.vue
index 231393f7a..0fef748c9 100644
--- a/src/userviews/users/index.vue
+++ b/src/userviews/users/index.vue
@@ -1,17 +1,38 @@
 <template>
-    <div/>
+  <GenericDetailPage :object.sync="TaskDetail" :active-menu.sync="config.activeMenu" v-bind="config" v-on="$listeners">
+    <keep-alive>
+      <component :is="config.activeMenu" :object="TaskDetail" />
+    </keep-alive>
+  </GenericDetailPage>
 </template>
 
 <script>
+  import { GenericDetailPage } from '@/layout/components'
+  import Detail from './Detail.vue'
   export default {
-    name: '',
-    components: {},
+    name: 'AssetListDetail',
+    components: {
+      GenericDetailPage,
+      Detail
+    },
     data() {
-      return {}
+      return {
+        TaskDetail: {},
+        config: {
+          title: this.$t('assets.SystemUserDetail'),
+          activeMenu: 'Detail',
+          submenu: [
+            {
+              title: this.$t('assets.detail'),
+              name: 'Detail'
+            }
+          ],
+          hasRightSide: false
+        }
+      }
     }
   }
 </script>
 
-<style lang='less' scoped>
-
+<style scoped>
 </style>