diff --git a/src/api/admins.ts b/src/api/admins.ts
new file mode 100644
index 0000000..96afbc0
--- /dev/null
+++ b/src/api/admins.ts
@@ -0,0 +1,42 @@
+import request from '@/utils/request'
+
+export const getAdminInfo = (data: any) =>
+  request({
+    url: '/admin/info',
+    method: 'post',
+    data
+  })
+
+export const login = (data: any) =>
+  request({
+    url: '/admin/login',
+    method: 'post',
+    data
+  })
+
+export const logout = () =>
+  request({
+    url: '/admin/logout',
+    method: 'post'
+  })
+
+export const saveAdmin = (data: any) =>
+  request({
+    url: '/admin/save',
+    method: 'post',
+    data
+  })
+
+export const deleteAdmin = (uid: string) => {
+  return request({
+    url: `/admin/${uid}/delete`,
+    method: 'post'
+  })
+}
+
+export const getUsers = (params: any) =>
+  request({
+    url: '/admins',
+    method: 'get',
+    params
+  })
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 7b4baea..4a07d0c 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -174,5 +174,9 @@ export default {
     showSidebarLogo: 'Sidebar Logo',
     fixedHeader: 'Fixed Header',
     sidebarTextTheme: 'Sidebar Text Theme'
+  },
+  admin: {
+    addAdmin: 'New Admin',
+    editAdmin: 'Edit Admin'
   }
 }
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 1e2bb34..9aba62d 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -23,7 +23,7 @@ const systemRoutes: RouteConfig = {
     },
     {
       path: 'admin',
-      component: () => import('@/views/system/role.vue'),
+      component: () => import('@/views/system/admin.vue'),
       name: 'AdminPermission',
       meta: {
         title: 'adminuser',
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index be2f2ad..426e1a0 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -5,7 +5,7 @@ import {
   Mutation,
   VuexModule
 } from 'vuex-module-decorators'
-import { getUserInfo, login, logout } from '@/api/users'
+import { getAdminInfo, login, logout } from '@/api/admins'
 import { getToken, removeToken, setToken } from '@/utils/cookies'
 import store from '@/store'
 import router, { resetRouter } from '@/router'
@@ -54,7 +54,7 @@ class User extends VuexModule implements IUserState {
     if (this.token === '') {
       throw Error('GetUserInfo: token is undefined!')
     }
-    const { data } = await getUserInfo({ /* Your params here */ })
+    const { data } = await getAdminInfo({ /* Your params here */ })
     if (!data) {
       throw Error('Verification failed, please Login again.')
     }
diff --git a/src/utils/request.ts b/src/utils/request.ts
index 90be9ef..9a278c9 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -36,7 +36,7 @@ service.interceptors.response.use(
     const res = response.data
     if (res.code) {
       Message({
-        message: res.message || 'Error',
+        message: res.msg || 'Error',
         type: 'error',
         duration: 5 * 1000
       })
diff --git a/src/views/system/admin.vue b/src/views/system/admin.vue
new file mode 100644
index 0000000..ad114b1
--- /dev/null
+++ b/src/views/system/admin.vue
@@ -0,0 +1,294 @@
+<template>
+  <div class="app-container">
+    <el-button
+        type="primary"
+        @click="handleCreateAdmin"
+    >
+      {{$t('admin.addAdmin')}}
+    </el-button>
+
+    <el-table
+        :data="adminList"
+        style="width: 100%;margin-top:30px;"
+        border
+    >
+      <el-table-column
+          align="center"
+          label="帐号名"
+      >
+        <template slot-scope="{row}">
+          {{row.username}}
+        </template>
+      </el-table-column>
+      <el-table-column
+          align="center"
+          label="显示名"
+      >
+        <template slot-scope="{row}">
+          {{row.showname}}
+        </template>
+      </el-table-column>
+      <el-table-column
+          align="center"
+          label="角色"
+      >
+        <template slot-scope="{row}">
+          {{ row.roles.join(',') }}
+        </template>
+      </el-table-column>
+      <el-table-column
+          align="header-center"
+          label="备注"
+      >
+        <template slot-scope="{row}">
+          {{row.comment}}
+        </template>
+      </el-table-column>
+      <el-table-column
+          align="center"
+          label="操作"
+      >
+        <template slot-scope="scope">
+          <el-button
+              type="primary"
+              size="small"
+              @click="handleEdit(scope)"
+          >
+            {{$t('admin.editAdmin')}}
+          </el-button>
+          <el-button
+              type="danger"
+              size="small"
+              @click="handleDelete(scope)"
+          >
+            {{$t('permission.delete')}}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog
+        :visible.sync="dialogVisible"
+        :title="dialogType==='edit'?'Edit Admin':'New Admin'"
+    >
+      <el-form
+          :model="record"
+          label-width="80px"
+          label-position="left"
+      >
+        <el-form-item label="用户名">
+          <el-input
+              v-model="record.username"
+              placeholder="用户名"
+          />
+        </el-form-item>
+        <el-form-item label="密码" v-if="dialogType==='edit'">
+          <el-input
+              type="password"
+              v-model="record.password"
+              placeholder="不修改就留空"
+          />
+        </el-form-item>
+        <el-form-item label="密码" v-if="dialogType!=='edit'">
+          <el-input
+              type="password"
+              v-model="record.password"
+              placeholder="密码"
+          />
+        </el-form-item>
+        <el-form-item label="显示名">
+          <el-input
+              v-model="record.showname"
+              placeholder="显示名"
+          />
+        </el-form-item>
+        <el-form-item label="性别">
+          <el-radio-group v-model="record.sex">
+            <el-radio label="0" >未指定</el-radio>
+            <el-radio label="1" >男</el-radio>
+            <el-radio label="2" >女</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="角色">
+          <el-checkbox-group v-model="record.roles">
+            <el-checkbox v-for="role in roleList"
+                         :key="role.key"
+                :label="role.key"
+                name="type"
+            >{{role.name}}</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item label="锁定">
+          <el-switch v-model="record.locked" />
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input
+              v-model="record.comment"
+              :autosize="{minRows: 2, maxRows: 4}"
+              type="textarea"
+              placeholder="备注"
+          />
+        </el-form-item>
+      </el-form>
+      <div style="text-align:right;">
+        <el-button
+            type="danger"
+            @click="dialogVisible=false"
+        >
+          {{$t('permission.cancel')}}
+        </el-button>
+        <el-button
+            type="primary"
+            @click="confirmRole"
+        >
+          {{$t('permission.confirm')}}
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import { cloneDeep } from 'lodash'
+import { Component, Vue } from 'vue-property-decorator'
+import { getRoles } from '@/api/roles'
+import TagInput from '@/components/TagInput/index.vue'
+import { getUsers, deleteAdmin, saveAdmin } from '@/api/admins'
+import { IRole } from '@/views/system/role.vue'
+
+interface IAdmin {
+  id: string
+  username: string
+  showname: string
+  comment: string
+  locked: boolean
+  roles: string[]
+  sex: string
+  avatar: string
+  password: string
+}
+
+const defaultAdmin: IAdmin = {
+  id: '',
+  username: '',
+  showname: '',
+  comment: '',
+  locked: false,
+  roles: [],
+  sex: '0',
+  password: '',
+  avatar: ''
+}
+
+@Component({
+  name: 'AdminSystem',
+  components: {
+    TagInput
+  }
+})
+export default class extends Vue {
+  private record = Object.assign({}, defaultAdmin)
+  private adminList: IAdmin[] = []
+  private roleList: IRole[] = []
+  private dialogVisible = false
+  private dialogType = 'new'
+  private checkStrictly = false
+  private defaultProps = {
+    children: 'children',
+    label: 'title'
+  }
+
+  created() {
+    this.getRecords()
+    this.getAllRole()
+  }
+
+  private async getRecords() {
+    const { data } = await getUsers({ /* Your params here */ })
+    this.adminList = data
+  }
+
+  private async getAllRole() {
+    const { data } = await getRoles({ /* Your params here */ })
+    this.roleList = data
+  }
+
+  private handleCreateAdmin() {
+    this.record = Object.assign({}, defaultAdmin)
+
+    this.dialogType = 'new'
+    this.dialogVisible = true
+  }
+
+  private handleEdit(scope: any) {
+    this.dialogType = 'edit'
+    this.dialogVisible = true
+    this.checkStrictly = true
+    this.record = cloneDeep(scope.row)
+  }
+
+  private handleDelete(scope: any) {
+    const { $index, row } = scope
+    this.$confirm('Confirm to remove the record?', 'Warning', {
+      confirmButtonText: 'Confirm',
+      cancelButtonText: 'Cancel',
+      type: 'warning'
+    })
+      .then(async() => {
+        await deleteAdmin(row.id)
+        this.adminList.splice($index, 1)
+        this.$message({
+          type: 'success',
+          message: 'Deleted!'
+        })
+      })
+      .catch(err => {
+        console.log(err)
+      })
+  }
+  // TODO: 验证数据完整性
+  private async confirmRole() {
+    const isEdit = this.dialogType === 'edit'
+    const { data } = await saveAdmin(this.record)
+    console.log(data)
+    if (isEdit) {
+      for (let index = 0; index < this.adminList.length; index++) {
+        if (this.adminList[index].id === this.record.id) {
+          this.adminList.splice(index, 1, Object.assign({}, this.record))
+          break
+        }
+      }
+    } else {
+      this.adminList.push(data)
+    }
+
+    const { username, showname } = this.record
+    this.dialogVisible = false
+    this.$notify({
+      title: 'Success',
+      dangerouslyUseHTMLString: true,
+      message: `
+          <div>Admin Username: ${username}</div>
+          <div>Admin Showname: ${showname}</div>
+        `,
+      type: 'success'
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  .roles-table {
+    margin-top: 30px;
+  }
+
+  .permission-tree {
+    margin-bottom: 30px;
+  }
+}
+
+read-only {
+  color: #a09d9d;
+}
+</style>
diff --git a/src/views/system/role.vue b/src/views/system/role.vue
index 5414f38..447b054 100644
--- a/src/views/system/role.vue
+++ b/src/views/system/role.vue
@@ -129,7 +129,7 @@ import { Component, Vue } from 'vue-property-decorator'
 import { getRoles, saveRole, deleteRole } from '@/api/roles'
 import TagInput from '@/components/TagInput/index.vue'
 
-interface IRole {
+export interface IRole {
   key: string
   name: string
   comment: string