diff --git a/console/mock/index.ts b/console/mock/index.ts
index 3c586b16d870c7cbad7d20cf309ad33fa55a1d89..b01a5205ec7d1c166ea1d4f669f004a9f24fd8a7 100644
--- a/console/mock/index.ts
+++ b/console/mock/index.ts
@@ -4,7 +4,7 @@ import { userList, phoneResource, phoneUserList, userPhoneList, taskList, appLis
 
 export default [
   {
-    url: '/api/user/login',
+    url: '/api/user/admin/login',
     method: 'post',
     response: ({body}) => {
       const { username, password } = body;
diff --git a/console/src/components/AppList.vue b/console/src/components/AppList.vue
index 82f3fdc242b00c41cdec3e7b6d7db40981c33804..e08e75c63466de434b9d48cd550b55e48939f53d 100644
--- a/console/src/components/AppList.vue
+++ b/console/src/components/AppList.vue
@@ -145,7 +145,7 @@
   <div class="page-content">
     <div class="right-content">
       <div class="table-content">
-        <tiny-grid ref="appTableGrid" :data="tableData" border @select-change="selectChange" @select-all="selectAll">
+        <tiny-grid ref="appTableGrid" auto-resize :data="tableData" border @select-change="selectChange" @select-all="selectAll">
           <template #toolbar>
             <tiny-grid-toolbar style="width:100%;">
               <template #buttons>
diff --git a/console/src/components/MenuList.vue b/console/src/components/MenuList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c1913eb133f5012c5974878bd4b4d1b6564c65b9
--- /dev/null
+++ b/console/src/components/MenuList.vue
@@ -0,0 +1,96 @@
+<script lang="ts">
+  import { Grid, GridColumn, ActionMenu, GridToolbar, Button, Pager } from '@opentiny/vue'
+  import { getMenuTreeList } from '../request/request' 
+  import editMenuModal from './custom/EditMenu.vue'
+  import deleteModal from './custom/DeleteModal.vue'
+  export default {
+    components: {
+      TinyGrid: Grid,
+      TinyGridColumn: GridColumn,
+      TinyActionMenu: ActionMenu,
+      TinyGridToolbar: GridToolbar,
+      TinyButton: Button,
+      TinyPager: Pager,
+      editMenuModal: editMenuModal,
+      deleteModal: deleteModal
+    },
+    data() {
+      return {
+        tableData: [],
+        showAddMenuModal: false,
+        showUpdateMenuModal: false,
+        showDeleteModal: false
+      }
+    },
+    mounted() {
+      this.getMenuTreeData();
+    },
+    methods: {
+      getMenuTreeData() {
+        getMenuTreeList().then((res: any) => {
+          const data = res.data;
+          this.tableData = data;
+        })
+      }, 
+      menuItemClick(menuId: string, data: any) {
+        switch (menuId) {
+          case 'updateMenu':
+            this.showUpdateMenuModal = true;
+            (this.$refs.updateMenuRef as any).getSelectData(data);
+            break;
+          case 'delete':
+            this.showDeleteModal = true;
+            (this.$refs.deleteMenuRef as any).getDeleteData(data);
+            break;
+          default:
+            break;
+        }
+      },
+      addMenuClick() {
+        this.showAddMenuModal = true;
+      }
+    }
+  }
+</script>
+
+<template>
+  <div class="page-content">
+    <div class="right-content">
+      <tiny-grid :data="tableData" auto-resize :tree-config="{ children: 'children' }">
+        <template #toolbar>
+          <tiny-grid-toolbar>
+            <template #buttons>
+              <div style="width: 100%">
+                <tiny-button type="primary" @click="addMenuClick()">{{$t('menu_add')}}</tiny-button>
+              </div>
+            </template>
+          </tiny-grid-toolbar>
+        </template>
+        <tiny-grid-column field="index" width="60" tree-node></tiny-grid-column>
+        <tiny-grid-column field="menuName" :title="$t('menu_name')"></tiny-grid-column>
+        <tiny-grid-column field="path" :title="$t('menu_path')"></tiny-grid-column>
+        <tiny-grid-column field="alias" :title="$t('menu_path_name')"></tiny-grid-column>
+        <tiny-grid-column field="createTime" :title="$t('menu_create_time')"></tiny-grid-column>
+        <tiny-grid-column :title="$t('operate_column')" #default="data">
+          <tiny-button type="text" size="mini" :text="$t('update_menu')" @click="menuItemClick('updateMenu', data.row)"></tiny-button>
+          <tiny-button type="text" size="mini" :text="$t('role_delete')" @click="menuItemClick('delete', data.row)"></tiny-button>
+        </tiny-grid-column>
+      </tiny-grid>
+    </div>
+    <edit-menu-modal v-model="showAddMenuModal" :showAddMenuModal="showAddMenuModal"></edit-menu-modal>
+    <edit-menu-modal ref="updateMenuRef" v-model="showUpdateMenuModal" :showUpdateMenuModal="showUpdateMenuModal"></edit-menu-modal>
+    <delete-modal ref="deleteMenuRef" :showDeleteModal="showDeleteModal"
+      v-model="showDeleteModal" :showTitle="$t('delete_menu')" modalMark="menuList"></delete-modal>
+  </div>
+</template>
+
+<style scoped>
+  .right-content {
+    margin-top: 40px;
+    padding: 25px;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 8px 8px #a9aeb80d;
+    overflow: hidden;
+  }
+</style>
\ No newline at end of file
diff --git a/console/src/components/PhoneList.vue b/console/src/components/PhoneList.vue
index dd6c0eee34a5445569e20a799db81a765b7e16b5..7a17197dd229c8305b0db5ad7a3a49a110493b2b 100644
--- a/console/src/components/PhoneList.vue
+++ b/console/src/components/PhoneList.vue
@@ -297,7 +297,7 @@
         </tiny-form>
       </div>
       <div class="table-content">
-        <tiny-grid ref="phoneListGrid" :data="tableData" border @select-change="selectChange" @select-all="selectAll">
+        <tiny-grid ref="phoneListGrid" auto-resize :data="tableData" border @select-change="selectChange" @select-all="selectAll">
           <template #toolbar>
             <tiny-grid-toolbar>
               <template #buttons>
diff --git a/console/src/components/PhoneUserList.vue b/console/src/components/PhoneUserList.vue
index e66870b9317bc2884c8633852f8058aa8ae4f104..5032e071e72a5c358fc2f0a9e0517b75df318da6 100644
--- a/console/src/components/PhoneUserList.vue
+++ b/console/src/components/PhoneUserList.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { Grid, GridColumn, Pager, Select, Input, Button, Tooltip, Option, Form, FormItem, Row, Col, Modal} from '@opentiny/vue'
+import { Grid, GridColumn, Pager, Select, Input, Button, Tooltip, Option, Form, FormItem, Row, Col, GridToolbar} from '@opentiny/vue'
 import { IconDel, IconRefres, IconLink } from '@opentiny/vue-icon'
 import { getPhoneUserList, getUserPhoneList } from '../request/request'
 import deleteModal from './custom/DeleteModal.vue'
@@ -20,6 +20,7 @@ export default {
     TinyFormItem: FormItem,
     TinyRow: Row,
     TinyCol: Col,
+    TinyGridToolbar: GridToolbar,
     deleteModal: deleteModal
   },
   data() {
@@ -49,7 +50,7 @@ export default {
         userId: ''
       },
       showDeleteModal: false,
-      showTitle: '删除云手机'
+      showTitle: this.$t('delete_cloudphone')
     }
   },
   mounted() {
@@ -110,6 +111,25 @@ export default {
     rebootSearchForm() {
       this.searchFormData.username = '';
       this.searchFormData.userId = '';
+    },
+    addUserClick() {},
+    menuItemClick(menuId: string, data: any) {
+      switch (menuId) {
+        case 'modifyPassword':
+          // todo
+          break;
+        case 'updateUserRole':
+          // todo
+          break;
+        case 'addCloudphone':
+        // todo
+        break;
+        default:
+          break;
+        }
+    },
+    renderEmpty() {
+      return this.$t('table_empty_text');
     }
   }
 }
@@ -144,9 +164,18 @@ export default {
         </tiny-form>
       </div>
       <tiny-grid :data="tableData" border auto-resize :loading="loading" @toggle-expand-change="handleExpand">
+        <template #toolbar>
+          <tiny-grid-toolbar>
+            <template #buttons>
+              <div style="width: 100%">
+                <tiny-button type="primary" @click="addUserClick()">{{$t('add_user_account')}}</tiny-button>
+              </div>
+            </template>
+          </tiny-grid-toolbar>
+        </template>
         <tiny-grid-column type="expand" :title="$t('operate_column')" width="60">
           <template #default="data">
-            <tiny-grid :data="data.row.phoneList">
+            <tiny-grid :data="data.row.phoneList" auto-resize :render-empty="renderEmpty">
               <tiny-grid-column field="phone_id" title="USER_PHONE_ID"></tiny-grid-column>
               <tiny-grid-column field="cloud_phone_id" title="PHONE_ID"></tiny-grid-column>
               <tiny-grid-column field="phone_name" :title="$t('phone_name_column')"></tiny-grid-column>
@@ -162,10 +191,16 @@ export default {
           </template>
         </tiny-grid-column>
         <tiny-grid-column field="user_id" title="USER_ID"></tiny-grid-column>
-        <tiny-grid-column field="user_name" :title="$t('username')"></tiny-grid-column>
-        <tiny-grid-column field="phone_count" :title="$t('phone_count_column')"></tiny-grid-column>
+        <tiny-grid-column field="username" :title="$t('username')" width="120"></tiny-grid-column>
+        <tiny-grid-column field="role_remark" :title="$t('userRole')" width="120"></tiny-grid-column>
+        <tiny-grid-column field="phone_count" :title="$t('phone_count_column')" width="100"></tiny-grid-column>
         <tiny-grid-column field="first_login_time" :title="$t('create_time_column')"></tiny-grid-column>
         <tiny-grid-column field="last_login_time" :title="$t('update_time_column')"></tiny-grid-column>
+        <tiny-grid-column :title="$t('operate_column')" #default="data">
+          <tiny-button type="text" size="mini" :text="$t('modify_password')" @click="menuItemClick('modifyPassword', data.row)"></tiny-button>
+          <tiny-button type="text" size="mini" :text="$t('update_user_role')" @click="menuItemClick('updateUserRole', data.row)"></tiny-button>
+          <tiny-button type="text" size="mini" :text="$t('add_cloudphone')" @click="menuItemClick('addCloudphone', data.row)"></tiny-button>
+        </tiny-grid-column>
       </tiny-grid>
       <div class="pager-content" v-if="tableData.length">
         <tiny-pager mode="simple" 
@@ -202,7 +237,6 @@ export default {
     width: 120px;
   }
   .search-content {
-    margin-bottom: 20px;
     overflow: hidden;
   }
   .space-mr-left {
diff --git a/console/src/components/RoleList.vue b/console/src/components/RoleList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a93b98cb343438980b8165ab31595c8eaa2575c9
--- /dev/null
+++ b/console/src/components/RoleList.vue
@@ -0,0 +1,141 @@
+<script lang="ts">
+  import { Grid, GridColumn, ActionMenu, GridToolbar, Button, Pager } from '@opentiny/vue'
+  import { getRoleList } from '../request/request'
+  import editRoleModal from './custom/EditRole.vue'
+  import deleteModal from './custom/DeleteModal.vue'
+  import userAssignMenuModal from './custom/UserAssignMenu.vue'
+
+  export default {
+    components: {
+      TinyGrid: Grid,
+      TinyGridColumn: GridColumn,
+      TinyActionMenu: ActionMenu,
+      TinyGridToolbar: GridToolbar,
+      TinyButton: Button,
+      TinyPager: Pager,
+      editRoleModal: editRoleModal,
+      deleteModal: deleteModal,
+      userAssignMenuModal: userAssignMenuModal
+    },
+    data() {
+      return {
+        tableData: [],
+        total: 0,
+        currentPage: 1,
+        pageSize: 10,
+        showAddRoleModal: false,
+        showUpdateRoleModal: false,
+        showDeleteModal: false,
+        showAssignMenuModal: false
+      }
+    },
+    mounted() {
+      this.getRoleData();
+    },
+    methods: {
+      getRoleData() {
+        const params = {
+          offset: (this.currentPage - 1) * this.pageSize,
+          limit: this.pageSize
+        };
+        getRoleList(params).then((res: any) => {
+          this.tableData = res.data.content;
+          this.total = res.data.count;
+        })
+      },
+      handleSizeChange(size: number) {
+        this.pageSize = size;
+        this.currentPage = 1;
+        this.getRoleData();
+      },
+      handleCurrentChange(currentPage: number) {
+        this.currentPage = currentPage;
+        this.getRoleData();
+      },
+      menuItemClick(menuId: string, data: any) {
+        switch (menuId) {
+          case 'updateMenu':
+            this.showAssignMenuModal = true;
+            (this.$refs.assignMenuRef as any).getSelectData(data);
+            break;
+          case 'editRole':
+            this.showUpdateRoleModal = true;
+            (this.$refs.editRoleRef as any).getSelectData(data);
+            break;
+          case 'delete':
+            this.showDeleteModal = true;
+            (this.$refs.deleteRoleRef as any).getDeleteData(data);
+            break;
+          default:
+            break;
+        }
+      },
+      addRoleClick() {
+        this.showAddRoleModal = true;
+      }
+    }
+  }
+</script>
+
+<template>
+  <div class="page-content">
+    <div class="right-content">
+      <tiny-grid ref="roleListGria" auto-resize :data="tableData" border>
+        <template #toolbar>
+          <tiny-grid-toolbar>
+            <template #buttons>
+              <div style="width: 100%">
+                <tiny-button type="primary" @click="addRoleClick()">{{$t('role_add')}}</tiny-button>
+              </div>
+            </template>
+          </tiny-grid-toolbar>
+        </template>
+        <tiny-grid-column field="id" width="100" :title="$t('role_id')"></tiny-grid-column>
+        <tiny-grid-column field="authority_level" width="100" :title="$t('authority_number')"></tiny-grid-column>
+        <tiny-grid-column field="role_name" :title="$t('role_name')"></tiny-grid-column>
+        <tiny-grid-column field="remark" :title="$t('role_remark')"></tiny-grid-column>
+        <tiny-grid-column :title="$t('operate_column')" #default="data">
+          <tiny-button type="text" size="mini" :text="$t('role_connect_menu')" :disabled="![99, 98].includes(data.row.authority_level)" @click="menuItemClick('updateMenu', data.row)"></tiny-button>
+          <tiny-button type="text" size="mini" :text="$t('role_update')" @click="menuItemClick('editRole', data.row)"></tiny-button>
+          <tiny-button type="text" size="mini" :text="$t('role_delete')" @click="menuItemClick('delete', data.row)"></tiny-button>
+        </tiny-grid-column>
+      </tiny-grid>
+      <div v-if="tableData.length">
+        <tiny-pager mode="simple" 
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          @update:current-page="currentPage = $event"
+          :page-size="pageSize"
+          :page-sizes="[10, 20, 30]"
+          layout="total, sizes, prev, pager, next"
+          :total="total">
+        </tiny-pager>
+      </div>
+    </div>
+    <edit-role-modal
+      v-model="showAddRoleModal"
+      :showAddRoleModal="showAddRoleModal">
+    </edit-role-modal>
+    <edit-role-modal
+      ref="editRoleRef"
+      v-model="showUpdateRoleModal"
+      :showUpdateRoleModal="showUpdateRoleModal">
+    </edit-role-modal>
+    <delete-modal ref="deleteRoleRef" :showDeleteModal="showDeleteModal"
+      v-model="showDeleteModal" :showTitle="$t('role_delete_text')" modalMark="roleList">
+    </delete-modal>
+    <user-assign-menu-modal ref="assignMenuRef" v-model="showAssignMenuModal" :showAssignMenuModal="showAssignMenuModal"></user-assign-menu-modal>
+  </div>
+</template>
+
+<style scoped>
+  .right-content {
+    margin-top: 40px;
+    padding: 25px;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 8px 8px #a9aeb80d;
+    overflow: hidden;
+  }
+</style>
\ No newline at end of file
diff --git a/console/src/components/custom/DeleteModal.vue b/console/src/components/custom/DeleteModal.vue
index fe55b3ad082d5b7daa0f3757205b2e44ffeb99d3..daf2629d030d939c4490a5907484646fb2ec0932 100644
--- a/console/src/components/custom/DeleteModal.vue
+++ b/console/src/components/custom/DeleteModal.vue
@@ -1,15 +1,18 @@
 <script lang="ts">
   import { Button, Modal, Grid, GridColumn, Pager } from '@opentiny/vue'
+  import { deleteRole, deleteMenu } from '../../request/request'
 
   export default {
     name: 'deleteModal',
     props: {
       showTitle: String,
-      showDeleteModal: Boolean
+      showDeleteModal: Boolean,
+      modalMark: String
     },
     setup(props) {
       props.showDeleteModal,
-      props.showTitle
+      props.showTitle,
+      props.modalMark
     },
     components: {
       TinyButton: Button,
@@ -24,16 +27,39 @@
         currentPage: 1,
         pageSize: 10,
         total: 0,
-        showModal: false
+        showModal: false,
+        deleteId: ''
       }
     },
     mounted() {
       this.showModal = this.showDeleteModal;
     },
     methods: {
+      getDeleteData(data: any) {
+        this.deleteId = data.id;
+      },
       confirmClick() {
-        this.showModal = false;
-        (this.$parent as any).showDeleteModal = false;
+        if (this.modalMark === 'roleList') {
+          const params = {
+            role_id: this.deleteId
+          };
+          deleteRole(params).then(() => {
+            this.showModal = false;
+            (this.$parent as any).showDeleteModal = false;
+            (this.$parent as any).getRoleData();
+          });
+        }
+
+        if (this.modalMark === 'menuList') {
+          const params = {
+            menu_id: this.deleteId
+          };
+          deleteMenu(params).then(() => {
+            this.showModal = false;
+            (this.$parent as any).showDeleteModal = false;
+            (this.$parent as any).getMenuTreeData();
+          });
+        }
       },
       cancelClick() {
         this.showModal = false;
@@ -49,11 +75,11 @@
 <template>
   <tiny-modal v-model="showModal" :lock-scroll="false" show-footer :title="showTitle" @close="closeClick">
     <template #default>
-      <p>您确定要删除吗?</p>
+      <p>{{$t('delete_modal_content')}}</p>
     </template>
     <template #footer>
-      <tiny-button type="danger" @click="confirmClick">删除</tiny-button>
-      <tiny-button @click="cancelClick">取消</tiny-button>
+      <tiny-button type="danger" @click="confirmClick">{{$t('delete_btn_text')}}</tiny-button>
+      <tiny-button @click="cancelClick">{{$t('cancel_btn_text')}}</tiny-button>
     </template>
   </tiny-modal>
 </template>
diff --git a/console/src/components/custom/EditMenu.vue b/console/src/components/custom/EditMenu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b917267f922a9606b10653754ce43953447821d1
--- /dev/null
+++ b/console/src/components/custom/EditMenu.vue
@@ -0,0 +1,184 @@
+<script lang="ts">
+  import { Button, Modal,  Form, FormItem, Input, Numeric, Select  } from '@opentiny/vue'
+  import { addMenu, updateMenu, getMenuTreeList } from '../../request/request'
+
+  interface MenuItem {
+    id: number,
+    menuName: string,
+    children: [],
+    alias?: string,
+    createTime?: string,
+    parentId?: number,
+    path?: string
+    sequence?: number
+  }
+
+  export default {
+    name: 'editMenuModal',
+    props: {
+      showAddMenuModal: Boolean,
+      showUpdateMenuModal: Boolean,
+    },
+    setup(props) {
+      props.showAddMenuModal,
+      props.showUpdateMenuModal
+    },
+    components: {
+      TinyButton: Button,
+      TinyModal: Modal,
+      TinyForm: Form,
+      TinyFormItem: FormItem,
+      TinyInput: Input,
+      TinyNumeric: Numeric,
+      TinySelect: Select
+    },
+    data() {
+      return {
+        showModal: false,
+        modalTitle: this.$t('menu_add'),
+        editFormData: {
+          menuName: '',
+          path: '',
+          alias: '',
+          createTime: '',
+          parentId: 0,
+          sequence: 0
+        },
+        updateMenuData: {} as MenuItem,
+        treeOp: {
+          data: [] as MenuItem[]
+        }
+      }
+    },
+    mounted() {
+      this.getMenuTreeData();
+      if (this.showAddMenuModal) {
+        this.showModal = this.showAddMenuModal;
+      }
+      if (this.showUpdateMenuModal) {
+        this.showModal = this.showUpdateMenuModal;
+      }
+    },
+    methods: {
+      getMenuTreeData() {
+        getMenuTreeList().then((res: any) => {
+          const data = res.data;
+          let menuList = [{
+            id: 999,
+            menuName: '顶级菜单',
+            children: data
+          }];
+          this.treeOp.data = menuList;
+        })
+      }, 
+      getSelectData(data: any) {
+        this.updateMenuData = data;
+        this.editFormData.menuName = data.menuName;
+        this.editFormData.alias = data.alias;
+        this.editFormData.path = data.path;
+        this.editFormData.parentId = data.parentId === 0 ? 999 : data.parentId;
+        this.modalTitle = this.showAddMenuModal ? this.$t('menu_add') : this.$t('update_menu');
+
+        // 过滤掉当前操作菜单
+        this.treeOp.data = this.filterList(this.treeOp.data);
+      },
+      filterList(list: any) {
+        return list.filter((item: any) => {
+          if (item.id === (this.updateMenuData as any).id) {
+            return false;
+          } else if (item.children && item.children.length) {
+            item.children = this.filterList(item.children);
+          }
+          return true;
+        });
+      },
+      closeClick() {
+        this.showModal = false;
+        if (this.showAddMenuModal) {
+          (this.$parent as any).showAddMenuModal = false;
+        }
+        
+        if (this.showUpdateMenuModal) {
+          (this.$parent as any).showUpdateMenuModal = false;
+        }
+      },
+      confirmClick() {
+        const params = {
+          alias: this.editFormData.alias,
+          menu_name: this.editFormData.menuName,
+          parentId: this.editFormData.parentId === 999 ? 0 : this.editFormData.parentId,
+          path: this.editFormData.path
+        };
+
+        if (this.showAddMenuModal) {
+          addMenu(params).then(() => {
+            this.showModal = false;
+            (this.$parent as any).showAddMenuModal = false;
+            (this.$parent as any).getMenuTreeData();
+          });
+        }
+
+        if (this.showUpdateMenuModal) {
+          (params as any).createTime = this.updateMenuData.createTime;
+          (params as any).id = this.updateMenuData.id;
+          (params as any).sequence = this.updateMenuData.sequence;
+          updateMenu(params).then(() => {
+            this.showModal = false;
+            (this.$parent as any).showUpdateMenuModal = false;
+            (this.$parent as any).getMenuTreeData();
+          });
+        }
+        
+      },
+      cancelClick() {
+        this.showModal = false;
+        if (this.showAddMenuModal) {
+          (this.$parent as any).showAddMenuModal = false;
+        }
+        
+        if (this.showUpdateMenuModal) {
+          (this.$parent as any).showUpdateMenuModal = false;
+        }
+      },
+      filter(value: any, data: any) {
+        if (!value) return true
+
+        return data.label.includes(value)
+      }
+    }
+  }
+</script>
+<template>
+  <tiny-modal v-model="showModal" :lock-scroll="false" show-footer
+    :title="modalTitle" @close="closeClick">
+    <template #default>
+      <tiny-form>
+        <tiny-form-item :label="$t('menu_name')">
+          <tiny-input :placeholder="$t('menu_name_placeholder')" v-model="editFormData.menuName"></tiny-input>
+        </tiny-form-item>
+        <tiny-form-item :label="$t('menu_path')">
+          <tiny-input :placeholder="$t('menu_path_placeholder')" v-model="editFormData.path"></tiny-input>
+        </tiny-form-item>
+        <tiny-form-item :label="$t('menu_path_name')">
+          <tiny-input :placeholder="$t('menu_path_name_placeholder')" v-model="editFormData.alias"></tiny-input>
+        </tiny-form-item>
+        <tiny-form-item :label="$t('parent_menu')">
+          <tiny-select
+            v-model="editFormData.parentId"
+            filterable
+            :filter-method="filter"
+            clearable
+            value-field="id"
+            text-field="menuName"
+            render-type="tree"
+            :tree-op="treeOp"
+          ></tiny-select>
+        </tiny-form-item>
+      </tiny-form>
+    </template>
+    <template #footer>
+      <tiny-button type="danger" @click="confirmClick">{{$t('confirm_btn_text')}}</tiny-button>
+      <tiny-button @click="cancelClick">{{$t('cancel_btn_text')}}</tiny-button>
+    </template>
+  </tiny-modal>
+</template>
\ No newline at end of file
diff --git a/console/src/components/custom/EditRole.vue b/console/src/components/custom/EditRole.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4bd8f03e5db28fc6286b57321170826848394458
--- /dev/null
+++ b/console/src/components/custom/EditRole.vue
@@ -0,0 +1,127 @@
+<script lang="ts">
+  import { Button, Modal,  Form, FormItem, Input, Numeric } from '@opentiny/vue'
+  import { addRole, updateRole } from '../../request/request'
+
+  export default {
+    name: 'editRoleModal',
+    props: {
+      showAddRoleModal: Boolean,
+      showUpdateRoleModal: Boolean,
+    },
+    setup(props) {
+      props.showAddRoleModal,
+      props.showUpdateRoleModal
+    },
+    components: {
+      TinyButton: Button,
+      TinyModal: Modal,
+      TinyForm: Form,
+      TinyFormItem: FormItem,
+      TinyInput: Input,
+      TinyNumeric: Numeric
+    },
+    data() {
+      return {
+        showModal: false,
+        modalTitle: this.$t('role_add'),
+        levelMin: 90,
+        levelMax: 98,
+        levelStep: 1,
+        disabled: false,
+        editFormData: {
+          roleName: '',
+          remark: '',
+          authorityLevel: 90
+        },
+        updateRoleId: ''
+      }
+    },
+    mounted() {
+      if (this.showAddRoleModal) {
+        this.showModal = this.showAddRoleModal;
+      }
+      if (this.showUpdateRoleModal) {
+        this.showModal = this.showUpdateRoleModal;
+      }
+    },
+    methods: {
+      getSelectData(data: any) {
+        this.updateRoleId = data.id;
+        this.editFormData.roleName = data.role_name;
+        this.editFormData.remark = data.remark;
+        this.editFormData.authorityLevel = data.authority_level;
+
+        this.modalTitle = this.showAddRoleModal ? this.$t('role_add') : this.$t('role_update');
+        this.levelMax = data.authority_level === 99 ? 99 : 98;
+        this.disabled = data.authority_level === 99;
+      },
+      closeClick() {
+        this.showModal = false;
+        if (this.showAddRoleModal) {
+          (this.$parent as any).showAddRoleModal = false;
+        }
+        
+        if (this.showUpdateRoleModal) {
+          (this.$parent as any).showUpdateRoleModal = false;
+        }
+      },
+      confirmClick() {
+        const params = {
+          authority_level: this.editFormData.authorityLevel,
+          role_name: this.editFormData.roleName,
+          remark: this.editFormData.remark
+        };
+        if (this.showAddRoleModal) {
+          addRole(params).then(() => {
+            this.showModal = false;
+            (this.$parent as any).showAddRoleModal = false;
+            (this.$parent as any).getRoleData();
+          });
+        }
+
+        if (this.showUpdateRoleModal) {
+          (params as any).id = this.updateRoleId;
+          updateRole(params).then(() => {
+            this.showModal = false;
+            (this.$parent as any).showUpdateRoleModal = false;
+            (this.$parent as any).getRoleData();
+          });
+        }
+        
+      },
+      cancelClick() {
+        this.showModal = false;
+        if (this.showAddRoleModal) {
+          (this.$parent as any).showAddRoleModal = false;
+        }
+        
+        if (this.showUpdateRoleModal) {
+          (this.$parent as any).showUpdateRoleModal = false;
+        }
+      }
+    }
+  }
+</script>
+<template>
+  <tiny-modal v-model="showModal" :lock-scroll="false" show-footer
+    :title="modalTitle" @close="closeClick">
+    <template #default>
+      <tiny-form>
+        <tiny-form-item :label="$t('role_name')">
+          <tiny-input :placeholder="$t('role_name_placeholder')" v-model="editFormData.roleName"></tiny-input>
+        </tiny-form-item>
+        <tiny-form-item :label="$t('authority_number')">
+          <tiny-numeric :min="levelMin" v-model="editFormData.authorityLevel" :max="levelMax" :step="levelStep" :disabled="disabled"></tiny-numeric>
+          <div>{{$t('role_authority_alert')}}</div>
+        </tiny-form-item>
+        <tiny-form-item :label="$t('role_remark')">
+          <tiny-input  :placeholder="$t('role_remark_placeholder')" type="textarea" maxlength="15" v-model="editFormData.remark"> </tiny-input>
+        </tiny-form-item>
+      </tiny-form>
+    </template>
+    <template #footer>
+      <tiny-button type="danger" @click="confirmClick">{{$t('confirm_btn_text')}}</tiny-button>
+      <tiny-button @click="cancelClick">{{$t('cancel_btn_text')}}</tiny-button>
+    </template>
+  </tiny-modal>
+</template>
\ No newline at end of file
diff --git a/console/src/components/custom/UserAssignMenu.vue b/console/src/components/custom/UserAssignMenu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..14002b1bb5e280e55c798bd9540f31b21e7bb43c
--- /dev/null
+++ b/console/src/components/custom/UserAssignMenu.vue
@@ -0,0 +1,99 @@
+<script lang="ts">
+  import { Button, Modal,  Form, FileUpload, FormItem, Input, Numeric, Tree } from '@opentiny/vue'
+  import { getAllMenu, updateRoleMenu, getRoleMenu } from '../../request/request'
+
+  export default {
+    name: 'userAssignMenuModal',
+    props: {
+      showAssignMenuModal: Boolean,
+    },
+    setup(props) {
+      props.showAssignMenuModal
+    },
+    components: {
+      TinyButton: Button,
+      TinyModal: Modal,
+      TinyFileUpload: FileUpload,
+      TinyForm: Form,
+      TinyFormItem: FormItem,
+      TinyInput: Input,
+      TinyNumeric: Numeric,
+      TinyTree: Tree,
+    },
+    data() {
+      return {
+        showModal: false,
+        modalTitle: this.$t('role_connect_menu'),
+        menuMapFeild: {
+          label: 'menuName'
+        },
+        menuData: [],
+        selectMenuId: 0,
+        checkedMenuIds: []
+      }
+    },
+    mounted() {
+      this.showModal = this.showAssignMenuModal;
+      this.getAllMenuList();
+    },
+    methods: {
+      getAllMenuList() {
+        getAllMenu().then((res: any) => {
+          const data = res.data;
+          this.menuData = data;
+        });
+      },
+      getSelectData(data: any) {
+        this.selectMenuId = data.id;
+        const params = {
+          role_id: data.id
+        };
+        getRoleMenu(params).then((res: any) => {
+          const data = res.data;
+          (this.$refs.treeRef as any).setCheckedKeys(data)
+        })
+      },
+      closeClick() {
+        this.showModal = false;
+        (this.$parent as any).showAssignMenuModal = false;
+      },
+      confirmClick() {
+        const params = {
+          role_id: this.selectMenuId,
+          menu_array: this.checkedMenuIds,
+        };
+        updateRoleMenu(params).then(() => {
+          this.showModal = false;
+          (this.$parent as any).showAssignMenuModal = false;
+        });
+      },
+      cancelClick() {
+        this.showModal = false;
+        (this.$parent as any).showAssignMenuModal = false;
+      },
+      check(data: any, currentChecked: any) {
+        this.checkedMenuIds = currentChecked.checkedKeys;
+      }
+    }
+  }
+</script>
+<template>
+  <tiny-modal v-model="showModal" :lock-scroll="false" show-footer
+    :title="modalTitle" @close="closeClick">
+    <template #default>
+      <tiny-tree
+        ref="treeRef"
+        show-checkbox
+        :data="menuData"
+        :props="menuMapFeild"
+        node-key="id"
+        @check="check"
+        default-expand-all
+      ></tiny-tree>
+    </template>
+    <template #footer>
+      <tiny-button type="danger" @click="confirmClick">{{$t('confirm_btn_text')}}</tiny-button>
+      <tiny-button @click="cancelClick">{{$t('cancel_btn_text')}}</tiny-button>
+    </template>
+  </tiny-modal>
+</template>
\ No newline at end of file
diff --git a/console/src/i18n/index.ts b/console/src/i18n/index.ts
index 407edde779118b2cd3dcf4b579d11c4a9d4dbf41..adade4641015a055141668b942c9df8bcbc10638 100644
--- a/console/src/i18n/index.ts
+++ b/console/src/i18n/index.ts
@@ -16,6 +16,8 @@ export default (i18n: any) =>
                 left_menu_all_resource: '所有资源',
                 left_menu_phone_list: '手机列表',
                 left_menu_cloudphone_user: '用户列表',
+                left_menu_cloudphone_role: '角色列表',
+                left_menu_cloudphone_menu: '菜单列表',
                 left_menu_app_list: '应用列表',
                 left_menu_app_install_record: '安装卸载记录',
                 left_menu_task_list: '任务列表',
@@ -32,6 +34,7 @@ export default (i18n: any) =>
                 status_text: '状态',
                 connect_phone_btn: '接入云手机',
                 username: '用户名',
+                userRole: '用户角色',
                 refresh_table: '刷新表格',
                 phone_name_column:'云手机名称',
                 connect_status_column: '连接状态',
@@ -105,7 +108,41 @@ export default (i18n: any) =>
                 execute_state: '执行状态',
                 operate_time: '操作时间',
                 separator_text: '至',
-                delete_btn_text: '删除'
+                confirm_btn_text: '确定',
+                delete_btn_text: '删除',
+                cancel_btn_text: '取消',
+                role_id: '角色ID',
+                authority_number: '权限级别',
+                role_name: '角色名称',
+                role_remark: '角色描述',
+                role_connect_menu: '分配菜单',
+                role_edit: '编辑',
+                role_update: '更新角色',
+                role_delete: '删除',
+                role_delete_text: '删除角色',
+                role_add: '新增角色',
+                role_authority_alert: '注：权限级别范围为90~98。90为普通用户，98为管理员',
+                role_name_placeholder: '请输入角色名称',
+                role_remark_placeholder: '请输入角色描述',
+                menu_add: '新增菜单',
+                update_menu: '更新菜单',
+                menu_number: '菜单编号',
+                menu_name: '菜单名称',
+                menu_path: '路由地址',
+                menu_path_name: '路由名称',
+                parent_menu: '上级菜单',
+                menu_create_time: '创建日期',
+                delete_menu: '删除菜单',
+                delete_cloudphone: '删除云手机',
+                delete_modal_content: '您确定要删除吗?',
+                menu_name_placeholder: '请输入菜单名称',
+                menu_path_placeholder: '请输入路由地址',
+                menu_path_name_placeholder: '请输入路由名称',
+                add_user_account: '新增用户',
+                modify_password: '修改密码',
+                update_user_role: '修改用户角色',
+                add_cloudphone: '添加云手机',
+                table_empty_text: '暂无数据'
             },
             enUS: {
             }
diff --git a/console/src/request/request.ts b/console/src/request/request.ts
index 52aa5409fee51c3cf6dddbc01bbc46ac8addb9bc..b5d978481c1dff5c053c3059acf850f6cc901ff5 100644
--- a/console/src/request/request.ts
+++ b/console/src/request/request.ts
@@ -6,7 +6,7 @@ const userInfoStore = useUserInfoStore();
 // 登录接口
 export const login = (params: any) => {
   return instance({
-    url: '/user/login',
+    url: '/user/admin/login',
     method: 'post',
     data: params
   });
@@ -74,4 +74,158 @@ export const getAppList = (params?: any) => {
     method: 'post',
     params
   });
+}
+
+export const getRoleList = (params?: any) => {
+  return instance({
+    url: '/authority/role/list',
+    method: 'get',
+    headers: {
+      token: userInfoStore.token,
+      session_id: userInfoStore.sessionId
+    },
+    params
+  })
+}
+
+export const getMenuList = (params: any) => {
+  return instance({
+    url: '/authority/menu/list',
+    method: 'get',
+    headers: {
+      token: userInfoStore.token,
+      session_id: userInfoStore.sessionId
+    },
+    params
+  })
+}
+
+export const getMenuTreeList = (params?: any) => {
+  return instance({
+    url: '/authority/menu/tree',
+    method: 'get',
+    headers: {
+      token: userInfoStore.token,
+      session_id: userInfoStore.sessionId
+    },
+    params
+  })
+}
+
+export const addRole = (params?: any) => {
+  return instance({
+    url: '/authority/role',
+    method: 'post',
+    headers: {
+      token: userInfoStore.token,
+      session_id: userInfoStore.sessionId
+    },
+    data: params
+  })
+}
+
+export const updateRole = (params?: any) => {
+  return instance({
+    url: '/authority/role',
+    method: 'put',
+    headers: {
+      token: userInfoStore.token,
+      session_id: userInfoStore.sessionId
+    },
+    data: params
+  })
+}
+
+export const deleteRole = (params?: any) => {
+  return instance({
+    url: '/authority/role',
+    method: 'delete',
+    headers: {
+      token: userInfoStore.token,
+      session_id: userInfoStore.sessionId
+    },
+    params
+  })
+}
+
+export const getRoleMenu = (params?: any) => {
+  return instance({
+    url: '/authority/role-menu',
+    method: 'get',
+    headers: {
+      token: userInfoStore.token,
+      session_id: userInfoStore.sessionId
+    },
+    params
+  })
+}
+
+export const updateRoleMenu = (params?: any) => {
+  return instance({
+    url: '/authority/role-menu',
+    method: 'put',
+    headers: {
+      token: userInfoStore.token,
+      session_id: userInfoStore.sessionId
+    },
+    data: params
+  })
+}
+
+export const getRoleAuthorityMenu = () => {
+  return instance({
+    url: '/authority/menu/tree/role',
+    method: 'get',
+    headers: {
+      token: userInfoStore.token,
+      session_id: userInfoStore.sessionId
+    }
+  })
+}
+
+export const getAllMenu = () => {
+  return instance({
+    url: '/authority/menu/tree',
+    method: 'get',
+    headers: {
+      token: userInfoStore.token,
+      session_id: userInfoStore.sessionId
+    }
+  })
+}
+
+export const addMenu = (params?: any) => {
+  return instance({
+    url: '/authority/menu',
+    method: 'post',
+    headers: {
+      token: userInfoStore.token,
+      session_id: userInfoStore.sessionId
+    },
+    data: params
+  })
+}
+
+export const updateMenu = (params?: any) => {
+  return instance({
+    url: '/authority/menu',
+    method: 'put',
+    headers: {
+      token: userInfoStore.token,
+      session_id: userInfoStore.sessionId
+    },
+    data: params
+  })
+}
+
+export const deleteMenu = (params?: any) => {
+  return instance({
+    url: '/authority/menu',
+    method: 'delete',
+    headers: {
+      token: userInfoStore.token,
+      session_id: userInfoStore.sessionId
+    },
+    params
+  })
 }
\ No newline at end of file
diff --git a/console/src/router/index.ts b/console/src/router/index.ts
index 8f3c860563849d802e627732c8e07ceea267b67d..9b4701ffed136e120015a4a8a5212f83971c19dd 100644
--- a/console/src/router/index.ts
+++ b/console/src/router/index.ts
@@ -41,6 +41,24 @@ const router = createRouter({
               name: 'userList',
               meta: {parent: 'user', label: '用户列表'},
               component: () => import('../components/PhoneUserList.vue')
+            },
+            {
+              path: '/user/role',
+              name: 'roleList',
+              meta: {
+                parent: 'user',
+                label: '角色列表'
+              },
+              component: () => import('../components/RoleList.vue')
+            },
+            {
+              path: '/user/menu',
+              name: 'menuList',
+              meta: {
+                parent: 'user',
+                label: '菜单列表'
+              },
+              component: () => import('../components/MenuList.vue')
             }
           ]
         },
@@ -52,7 +70,10 @@ const router = createRouter({
             {
               path: '/app/list',
               name: 'appList',
-              meta: {parent: 'app', label: '应用列表'},
+              meta: {
+                parent: 'app',
+                label: '应用列表'
+              },
               component: () => import('../components/AppList.vue')
             }
           ]
diff --git a/console/src/views/Home.vue b/console/src/views/Home.vue
index 9620b394c77fe44342fc4cf4548d381eb37708b6..0524ac33f017cb7997a6331e8d3e41dd87b0f05e 100644
--- a/console/src/views/Home.vue
+++ b/console/src/views/Home.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Layout, Row, Col, TreeMenu, UserHead, Breadcrumb, BreadcrumbItem, UserContact, Form, Popover,
   FormItem, Input, Button } from '@opentiny/vue'
-  import { logout } from '../request/request'
+  import { logout, getRoleAuthorityMenu } from '../request/request'
   import { useUserInfoStore } from '../store/index'
 
   export default {
@@ -27,57 +27,12 @@
         positionLeft: '270px',
         currentRouter: '',
         isCollapse: false,
-        expandeArr: ['resource'],
-        treeData: [
-          {
-            id: 'cloudphone',
-            label: this.$t('left_menu_cloudphone_manage'),
-            children: [
-              {
-                id: 'cloudphoneList',
-                path: '/cloudphone/list',
-                label: this.$t('left_menu_phone_list'),
-                params: null
-              }
-            ]
-          },
-          {
-            id: 'user',
-            label: this.$t('left_menu_user_manage'),
-            children: [
-              {
-                id: 'userList',
-                path: '/user/list',
-                label: this.$t('left_menu_cloudphone_user'),
-                params: null
-              }
-            ]
-          },
-          {
-            id: 'app',
-            label: this.$t('left_menu_app_manage'),
-            children: [
-              {
-                id: 'appList',
-                path: '/app/list',
-                label: this.$t('left_menu_app_list'),
-                params: null
-              }
-            ]
-          },
-          {
-            id: 'job',
-            label: this.$t('left_menu_task_manage'),
-            children: [
-              {
-                id: 'jobList',
-                path: '/job/list',
-                label: this.$t('left_menu_task_list'),
-                params: null
-              }
-            ]
-          }
-        ],
+        expandeArr: [1],
+        menuMapField: {
+          label: 'menuName',
+          id: 'id'
+        },
+        treeData: [],
         breadcrumbOptions: <any>[],
         userInfoData: <any>{}
       }
@@ -85,8 +40,17 @@
     mounted() {
       const userInfoStore = useUserInfoStore();
       this.userInfoData = userInfoStore;
+      if (this.userInfoData.token) {
+        // 获取当前用户的菜单列表
+        getRoleAuthorityMenu().then((res: any) => {
+          const userMenuList = res.data;
+          this.treeData = userMenuList;
+          
+          this.setCurrentNode();
+        });
+      }
+
       this.collapseChange(false);
-      this.setCurrentNode();
       window.onresize = () => {
         return (() => {
           this.windowWidth = document.body.clientWidth;
@@ -105,20 +69,20 @@
       },
       setCurrentNode() {
         let childrenId = '';
-        let parentNodeId = '';
+        let parentNodeId = 0;
         let childrenNode = null;
         const currentRouteName = this.$router.currentRoute.value.name;
         const currentRoutePath = this.$router.currentRoute.value.path;
         const currentRouteParams = this.$router.currentRoute.value.query;
         const metaParent = this.$router.currentRoute.value.meta.parent;
         
-        const targetNode = this.treeData.find(pItem => {
-          if (pItem.id === currentRouteName) {
+        const targetNode = this.treeData.find((pItem: any) => {
+          if (pItem.alias === currentRouteName) {
             return currentRouteName;
           }
 
-          if (pItem.id !== currentRouteName) {
-            const childrenItem = pItem.children?.find(item => item.id === currentRouteName);
+          if (pItem.alias !== currentRouteName) {
+            const childrenItem = pItem.children?.find((item: any) => item.alias === currentRouteName);
             if (childrenItem) {
               parentNodeId = pItem.id;
               childrenId = childrenItem.id;
@@ -127,27 +91,32 @@
             }
           }
         });
+
         if (childrenId) {
           this.expandeArr = [parentNodeId];
-          (this.$refs.treeMenu as any).setCurrentKey(childrenId);
           this.handleNodeClick(childrenNode);
+          setTimeout(() => {
+            (this.$refs.treeMenu as any).setCurrentKey(childrenId);
+          }, 200);
         } else if (targetNode) {
           (this.$refs.treeMenu as any).setCurrentNode(targetNode);
           this.handleNodeClick(targetNode);
         } else {
           if (metaParent) {
-            this.treeData.find(pItem => {
-              if (pItem.id === metaParent) {
+            this.treeData.find((pItem: any) => {
+              if (pItem.alias === metaParent) {
                 (this.$refs.treeMenu as any).setCurrentNode(pItem);
                 this.handleNodeClick(pItem, null, currentRoutePath, currentRouteParams);
                 return;
               }
-              if (pItem.id !== metaParent) {
-                const childrenItem = pItem.children?.find(item => item.id === metaParent);
+              if (pItem.alias !== metaParent) {
+                const childrenItem = pItem.children?.find((item: any) => item.alias === metaParent);
                 if (childrenItem) {
                   this.expandeArr = [pItem.id];
-                  (this.$refs.treeMenu as any).setCurrentKey(childrenItem.id);
                   this.handleNodeClick(childrenItem, null, currentRoutePath, currentRouteParams);
+                  setTimeout(() => {
+                    (this.$refs.treeMenu as any).setCurrentKey(childrenItem.id);
+                  }, 200);
                 }
               }
             });
@@ -164,7 +133,7 @@
           return;
         }
         this.breadcrumbOptions = <any>[];
-        if (data?.children) {
+        if (data?.children.length) {
           this.currentRouter = data.children[0].path;
         } else {
           this.currentRouter = data.path;
@@ -179,24 +148,24 @@
           this.$router.push(this.currentRouter);
         }
         
-        this.treeData.forEach(pItem => {
+        this.treeData.forEach((pItem: any) => {
           if (pItem.id === data.id) {
             this.breadcrumbOptions.push({
               id: pItem.id,
-              label: pItem.label,
+              label: pItem.menuName,
               to: { path: data.path }
             });
           } else {
-            pItem.children?.forEach(cItem => {
+            pItem.children?.forEach((cItem: any) => {
               if (cItem.id === data.id) {
                 this.breadcrumbOptions.push({
                   id: pItem.id,
-                  label: pItem.label,
+                  label: pItem.menuName,
                   to: { path: data.path }
                 });
                 this.breadcrumbOptions.push({
                   id: cItem.id,
-                  label: cItem.label,
+                  label: cItem.menuName,
                   to: { path: cItem.path }
                 });
               }
@@ -245,7 +214,6 @@
         <tiny-popover width="200" trigger="hover">
           <ul class="user-detail">
             <li>用户名：{{userInfoData.username}}</li>
-            <li>角色：{{userInfoData.role}}</li>
             <li><a href="javascript:void();" class="logout-btn" @click="logout()">{{$t('logout_btn')}}</a></li>
           </ul>
           <template #reference>
@@ -256,7 +224,7 @@
     </div>
     <div class="container-content">
       <tiny-tree-menu :data="treeData" ref="treeMenu" node-key="id" class="tree-menu" :default-expanded-keys="expandeArr"
-        @collapse-change="collapseChange" @node-click="handleNodeClick">
+        @collapse-change="collapseChange" @node-click="handleNodeClick" :props="menuMapField">
       </tiny-tree-menu>
       <div class="page-right">
         <tiny-breadcrumb :options="breadcrumbOptions" class="breadcrumb-content" @select="breadcrumbItemClick"></tiny-breadcrumb>
diff --git a/console/src/views/Login.vue b/console/src/views/Login.vue
index 804436fdcc7045be446b2db564b4f2aaf2b37aad..de801186bc3a57d4268528e10ce06a181b33abd1 100644
--- a/console/src/views/Login.vue
+++ b/console/src/views/Login.vue
@@ -31,7 +31,8 @@ export default {
         ]
       },
       alertDescription: '',
-      showAlert: false
+      showAlert: false,
+      isLoading: false
     }
   },
   methods: {
@@ -45,11 +46,13 @@ export default {
       })
     },
     getUserLogin() {
+      this.isLoading = true;
       const params = {
         username: this.createData.username,
         password: this.createData.password
       };
       login(params).then((res: any) => {
+        this.isLoading = false;
         const data = res.data;
         const userInfoStore = useUserInfoStore();
         userInfoStore.saveToken(data.token);
@@ -59,7 +62,7 @@ export default {
           this.$router.push('/home');
         }
       }, (error: any) => {
-        console.log(error);
+        this.isLoading = false;
       });
     }
   }
@@ -87,7 +90,7 @@ export default {
             <tiny-input :prefix-icon="IconLock" v-model="createData.password" type="password" show-password class="input-item" @keyup.enter="handleSubmit()"></tiny-input>
           </tiny-form-item>
           <tiny-form-item>
-            <tiny-button type="primary" class="login-btn input-item" @click="handleSubmit()">{{$t('login_btn')}}</tiny-button>
+            <tiny-button type="primary" class="login-btn input-item" @click="handleSubmit()" :loading="isLoading">{{$t('login_btn')}}</tiny-button>
           </tiny-form-item>
         </tiny-form>
       </div>