diff --git a/src/api/system/menu.ts b/src/api/system/menu.ts
index 91861c91..291f57ae 100644
--- a/src/api/system/menu.ts
+++ b/src/api/system/menu.ts
@@ -1,7 +1,7 @@
 import {
   MenuFormData,
   MenuItem,
-  MenuQueryParam,
+  MenuQueryParam
 } from '@/types/api/system/menu';
 import { Option } from '@/types/common';
 import request from '@/utils/request';
@@ -12,8 +12,8 @@ import { AxiosPromise } from 'axios';
  */
 export function listRoutes() {
   return request({
-    url: '/youlai-admin/api/v1/menus/route_list',
-    method: 'get',
+    url: '/youlai-admin/api/v1/menus/routes',
+    method: 'get'
   });
 }
 
@@ -28,17 +28,17 @@ export function listMenus(
   return request({
     url: '/youlai-admin/api/v1/menus',
     method: 'get',
-    params: queryParams,
+    params: queryParams
   });
 }
 
 /**
  * 获取菜单下拉树形列表
  */
-export function listSelectMenus(): AxiosPromise<Option[]> {
+export function listMenuOptions(): AxiosPromise<Option[]> {
   return request({
-    url: '/youlai-admin/api/v1/menus/select_list',
-    method: 'get',
+    url: '/youlai-admin/api/v1/menus/options',
+    method: 'get'
   });
 }
 
@@ -48,7 +48,7 @@ export function listSelectMenus(): AxiosPromise<Option[]> {
 export function getResource(): AxiosPromise<any> {
   return request({
     url: '/youlai-admin/api/v1/menus/resources',
-    method: 'get',
+    method: 'get'
   });
 }
 
@@ -59,7 +59,7 @@ export function getResource(): AxiosPromise<any> {
 export function getMenuDetail(id: number): AxiosPromise<MenuFormData> {
   return request({
     url: '/youlai-admin/api/v1/menus/' + id,
-    method: 'get',
+    method: 'get'
   });
 }
 
@@ -72,7 +72,7 @@ export function addMenu(data: MenuFormData) {
   return request({
     url: '/youlai-admin/api/v1/menus',
     method: 'post',
-    data: data,
+    data: data
   });
 }
 
@@ -86,7 +86,7 @@ export function updateMenu(id: string, data: MenuFormData) {
   return request({
     url: '/youlai-admin/api/v1/menus/' + id,
     method: 'put',
-    data: data,
+    data: data
   });
 }
 
@@ -98,6 +98,6 @@ export function updateMenu(id: string, data: MenuFormData) {
 export function deleteMenus(ids: string) {
   return request({
     url: '/youlai-admin/api/v1/menus/' + ids,
-    method: 'delete',
+    method: 'delete'
   });
 }
diff --git a/src/api/system/role.ts b/src/api/system/role.ts
index 4bb3809d..6bd21291 100644
--- a/src/api/system/role.ts
+++ b/src/api/system/role.ts
@@ -2,7 +2,7 @@ import {
   RoleFormData,
   RolePageResult,
   RoleQueryParam,
-  RoleResourceData,
+  RoleResourceData
 } from '@/types/api/system/role';
 
 import { Option } from '@/types/common';
@@ -14,13 +14,13 @@ import { AxiosPromise } from 'axios';
  *
  * @param queryParams
  */
-export function listPageRoles(
+export function listRolePages(
   queryParams?: RoleQueryParam
 ): AxiosPromise<RolePageResult> {
   return request({
     url: '/youlai-admin/api/v1/roles',
     method: 'get',
-    params: queryParams,
+    params: queryParams
   });
 }
 
@@ -29,13 +29,13 @@ export function listPageRoles(
  *
  * @param queryParams
  */
-export function listSelectRoles(
+export function listRoleOptions(
   queryParams?: RoleQueryParam
 ): AxiosPromise<Option[]> {
   return request({
-    url: '/youlai-admin/api/v1/roles/select_list',
+    url: '/youlai-admin/api/v1/roles/options',
     method: 'get',
-    params: queryParams,
+    params: queryParams
   });
 }
 
@@ -47,7 +47,7 @@ export function listSelectRoles(
 export function getRoleResourceIds(roleId: string): AxiosPromise<any> {
   return request({
     url: '/youlai-admin/api/v1/roles/' + roleId + '/resource_ids',
-    method: 'get',
+    method: 'get'
   });
 }
 
@@ -63,7 +63,7 @@ export function updateRoleResource(
   return request({
     url: '/youlai-admin/api/v1/roles/' + roleId + '/resources',
     method: 'put',
-    data: data,
+    data: data
   });
 }
 
@@ -75,7 +75,7 @@ export function updateRoleResource(
 export function getRoleFormDetail(id: number): AxiosPromise<RoleFormData> {
   return request({
     url: '/youlai-admin/api/v1/roles/' + id,
-    method: 'get',
+    method: 'get'
   });
 }
 
@@ -88,7 +88,7 @@ export function addRole(data: RoleFormData) {
   return request({
     url: '/youlai-admin/api/v1/roles',
     method: 'post',
-    data: data,
+    data: data
   });
 }
 
@@ -102,7 +102,7 @@ export function updateRole(id: number, data: RoleFormData) {
   return request({
     url: '/youlai-admin/api/v1/roles/' + id,
     method: 'put',
-    data: data,
+    data: data
   });
 }
 
@@ -114,6 +114,6 @@ export function updateRole(id: number, data: RoleFormData) {
 export function deleteRoles(ids: string) {
   return request({
     url: '/youlai-admin/api/v1/roles/' + ids,
-    method: 'delete',
+    method: 'delete'
   });
 }
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index 1b832d5c..4cc23ceb 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -4,7 +4,7 @@ import {
   UserFormData,
   UserInfo,
   UserPageResult,
-  UserQueryParam,
+  UserQueryParam
 } from '@/types/api/system/user';
 
 /**
@@ -13,7 +13,7 @@ import {
 export function getUserInfo(): AxiosPromise<UserInfo> {
   return request({
     url: '/youlai-admin/api/v1/users/me',
-    method: 'get',
+    method: 'get'
   });
 }
 
@@ -22,13 +22,13 @@ export function getUserInfo(): AxiosPromise<UserInfo> {
  *
  * @param queryParams
  */
-export function listUsersPage(
+export function listUserPages(
   queryParams: UserQueryParam
 ): AxiosPromise<UserPageResult> {
   return request({
-    url: '/youlai-admin/api/v1/users',
+    url: '/youlai-admin/api/v1/users/pages',
     method: 'get',
-    params: queryParams,
+    params: queryParams
   });
 }
 
@@ -40,7 +40,7 @@ export function listUsersPage(
 export function getUserFormData(userId: number): AxiosPromise<UserFormData> {
   return request({
     url: '/youlai-admin/api/v1/users/' + userId + '/form_data',
-    method: 'get',
+    method: 'get'
   });
 }
 
@@ -53,7 +53,7 @@ export function addUser(data: any) {
   return request({
     url: '/youlai-admin/api/v1/users',
     method: 'post',
-    data: data,
+    data: data
   });
 }
 
@@ -67,7 +67,7 @@ export function updateUser(id: number, data: UserFormData) {
   return request({
     url: '/youlai-admin/api/v1/users/' + id,
     method: 'put',
-    data: data,
+    data: data
   });
 }
 
@@ -81,7 +81,7 @@ export function updateUserPart(id: number, data: any) {
   return request({
     url: '/youlai-admin/api/v1/users/' + id,
     method: 'patch',
-    data: data,
+    data: data
   });
 }
 
@@ -93,7 +93,7 @@ export function updateUserPart(id: number, data: any) {
 export function deleteUsers(ids: string) {
   return request({
     url: '/youlai-admin/api/v1/users/' + ids,
-    method: 'delete',
+    method: 'delete'
   });
 }
 
@@ -106,7 +106,7 @@ export function downloadTemplate() {
   return request({
     url: '/youlai-admin/api/v1/users/template',
     method: 'get',
-    responseType: 'arraybuffer',
+    responseType: 'arraybuffer'
   });
 }
 
@@ -121,7 +121,7 @@ export function exportUser(queryParams: UserQueryParam) {
     url: '/youlai-admin/api/v1/users/_export',
     method: 'get',
     params: queryParams,
-    responseType: 'arraybuffer',
+    responseType: 'arraybuffer'
   });
 }
 
@@ -140,7 +140,7 @@ export function importUser(deptId: number, roleIds: string, file: File) {
     method: 'post',
     data: formData,
     headers: {
-      'Content-Type': 'multipart/form-data',
-    },
+      'Content-Type': 'multipart/form-data'
+    }
   });
 }
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
index 8b5f4f3c..5dacdbeb 100644
--- a/src/components/RightPanel/index.vue
+++ b/src/components/RightPanel/index.vue
@@ -117,7 +117,8 @@ onBeforeUnmount(() => {
   transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
   transform: translate(100%);
   background: #fff;
-  z-index: 40000;
+  z-index: 199;
+
   .icon {
     width: 1em;
     height: 1em;
@@ -129,7 +130,7 @@ onBeforeUnmount(() => {
   transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
 
   .right-panel-background {
-    z-index: 20000;
+    z-index: 99;
     opacity: 1;
     width: 100%;
     height: 100%;
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index cb224a90..f2c24af3 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -26,20 +26,20 @@
     <el-divider>导航栏模式</el-divider>
 
     <ul class="navbar">
-      <el-tooltip class="item" content="左侧模式" placement="bottom">
-        <li>
+      <el-tooltip content="左侧模式" placement="bottom">
+        <li class="navbar__item navbar__item--left">
           <div />
           <div />
         </li>
       </el-tooltip>
-      <el-tooltip class="item" content="左侧模式" placement="bottom">
-        <li>
+      <el-tooltip content="顶部模式" placement="bottom">
+        <li class="navbar__item navbar__item--top">
           <div />
           <div />
         </li>
       </el-tooltip>
-      <el-tooltip class="item" content="左侧模式" placement="bottom">
-        <li>
+      <el-tooltip content="混合模式" placement="bottom">
+        <li class="navbar__item navbar__item--mix">
           <div />
           <div />
         </li>
@@ -132,7 +132,7 @@ watch(
   height: 50px;
   padding: 0;
 
-  li {
+  &__item {
     width: 18%;
     height: 45px;
     background: #f0f2f5;
@@ -142,7 +142,7 @@ watch(
     border-radius: 4px;
     box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
 
-    &:nth-child(1) {
+    &--left {
       div {
         &:nth-child(1) {
           width: 30%;
@@ -161,6 +161,38 @@ watch(
         }
       }
     }
+
+    &--top {
+      div {
+        &:nth-child(1) {
+          width: 100%;
+          height: 30%;
+          background: #1b2a47;
+          box-shadow: 0 0 1px #888;
+        }
+      }
+    }
+
+    &--mix {
+      div {
+        &:nth-child(1) {
+          width: 100%;
+          height: 30%;
+          background: #1b2a47;
+          box-shadow: 0 0 1px #888;
+        }
+
+        &:nth-child(2) {
+          width: 30%;
+          height: 70%;
+          bottom: 0;
+          left: 0;
+          background: #fff;
+          box-shadow: 0 0 1px #888;
+          position: absolute;
+        }
+      }
+    }
   }
 }
 </style>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 1bfc829f..b7c9c37a 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="{ 'has-logo': showLogo }">
     <logo v-if="showLogo" :collapse="isCollapse" />
-    <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-scrollbar>
       <el-menu
         :default-active="activeMenu"
         :collapse="isCollapse"
diff --git a/src/layout/index.vue b/src/layout/index.vue
index bf310c08..5517b74f 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -11,7 +11,11 @@
         <navbar />
         <tags-view v-if="needTagsView" />
       </div>
+
+      <!--主页面-->
       <app-main />
+
+      <!-- 设置面板 -->
       <RightPanel v-if="showSettings">
         <settings />
       </RightPanel>
diff --git a/src/views/system/menu/components/Menu.vue b/src/views/system/menu/components/Menu.vue
index 13e2f649..4196d2f0 100644
--- a/src/views/system/menu/components/Menu.vue
+++ b/src/views/system/menu/components/Menu.vue
@@ -225,16 +225,16 @@ import { Dialog, Option } from '@/types/common';
 import {
   MenuFormData,
   MenuItem,
-  MenuQueryParam,
+  MenuQueryParam
 } from '@/types/api/system/menu';
 // API 依赖
 import {
   listMenus,
   getMenuDetail,
-  listSelectMenus,
+  listMenuOptions,
   addMenu,
   deleteMenus,
-  updateMenu,
+  updateMenu
 } from '@/api/system/menu';
 
 import SvgIcon from '@/components/SvgIcon/index.vue';
@@ -262,7 +262,7 @@ const state = reactive({
     visible: 1,
     sort: 1,
     component: 'Layout',
-    type: 'MENU',
+    type: 'MENU'
   } as MenuFormData,
   rules: {
     parentId: [{ required: true, message: '请选择顶级菜单', trigger: 'blur' }],
@@ -270,8 +270,8 @@ const state = reactive({
     type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
     path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
     component: [
-      { required: true, message: '请输入组件完整路径', trigger: 'blur' },
-    ],
+      { required: true, message: '请输入组件完整路径', trigger: 'blur' }
+    ]
   },
   menuOptions: [] as Option[],
   currentRow: undefined,
@@ -279,8 +279,8 @@ const state = reactive({
   iconSelectVisible: false,
   cacheData: {
     menuType: '',
-    menuPath: '',
-  },
+    menuPath: ''
+  }
 });
 
 const {
@@ -292,7 +292,7 @@ const {
   rules,
   menuOptions,
   iconSelectVisible,
-  cacheData,
+  cacheData
 } = toRefs(state);
 
 /**
@@ -313,7 +313,7 @@ function handleQuery() {
  */
 async function loadMenuData() {
   const menuOptions: any[] = [];
-  await listSelectMenus().then(({ data }) => {
+  await listMenuOptions().then(({ data }) => {
     const menuOption = { value: '0', label: '顶级菜单', children: data };
     menuOptions.push(menuOption);
     state.menuOptions = menuOptions;
@@ -338,7 +338,7 @@ async function handleAdd(row: any) {
   await loadMenuData();
   state.dialog = {
     title: '添加菜单',
-    visible: true,
+    visible: true
   };
   if (row.id) {
     // 行点击新增
@@ -368,7 +368,7 @@ async function handleUpdate(row: any) {
   await loadMenuData();
   state.dialog = {
     title: '修改菜单',
-    visible: true,
+    visible: true
   };
   const id = row.id || state.ids;
   getMenuDetail(id).then(({ data }) => {
@@ -417,7 +417,7 @@ function handleDelete(row: any) {
   ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
-    type: 'warning',
+    type: 'warning'
   })
     .then(() => {
       deleteMenus(ids).then(() => {
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index a44f8e13..654a4aac 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,19 +1,19 @@
 <script lang="ts">
 export default {
-  name: 'role',
+  name: 'role'
 };
 </script>
 
 <script setup lang="ts">
 import { nextTick, onMounted, reactive, ref, toRefs } from 'vue';
 import {
-  listPageRoles,
+  listRolePages,
   updateRole,
   getRoleFormDetail,
   addRole,
   deleteRoles,
   getRoleResourceIds,
-  updateRoleResource,
+  updateRoleResource
 } from '@/api/system/role';
 import { getResource } from '@/api/system/menu';
 
@@ -22,7 +22,7 @@ import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
 import {
   RoleFormData,
   RoleItem,
-  RoleQueryParam,
+  RoleQueryParam
 } from '@/types/api/system/role';
 import SvgIcon from '@/components/SvgIcon/index.vue';
 
@@ -41,18 +41,18 @@ const state = reactive({
   multiple: true,
   queryParams: {
     pageNum: 1,
-    pageSize: 10,
+    pageSize: 10
   } as RoleQueryParam,
   roleList: [] as RoleItem[],
   total: 0,
   dialog: {
     title: '',
-    visible: false,
+    visible: false
   },
   formData: {} as RoleFormData,
   rules: {
     name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
-    code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
+    code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }]
   },
   resourceDialogVisible: false,
   menuOptions: [] as any[],
@@ -61,8 +61,8 @@ const state = reactive({
   permGroupList: [],
   checkedRole: {
     id: '',
-    name: '',
-  }, // 选中的角色
+    name: ''
+  } // 选中的角色
 });
 
 const {
@@ -78,13 +78,13 @@ const {
   menuOptions,
   permOptions,
   checkedRole,
-  checkStrictly,
+  checkStrictly
 } = toRefs(state);
 
 function handleQuery() {
   emit('roleClick', {});
   state.loading = true;
-  listPageRoles(state.queryParams).then(({ data }) => {
+  listRolePages(state.queryParams).then(({ data }) => {
     state.roleList = data.list;
     state.total = data.total;
     state.loading = false;
@@ -109,14 +109,14 @@ function handleRowClick(row: any) {
 function handleAdd() {
   state.dialog = {
     title: '添加角色',
-    visible: true,
+    visible: true
   };
 }
 
 function handleUpdate(row: any) {
   state.dialog = {
     title: '修改角色',
-    visible: true,
+    visible: true
   };
   const roleId = row.id || state.ids;
   getRoleFormDetail(roleId).then(({ data }) => {
@@ -160,7 +160,7 @@ function handleDelete(row: any) {
   ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
-    type: 'warning',
+    type: 'warning'
   })
     .then(() => {
       deleteRoles(ids).then(() => {
@@ -176,27 +176,27 @@ function handleDelete(row: any) {
  */
 function handleResourceAssign(row: RoleItem) {
   resourceDialogVisible.value = true;
-  permOptions.value.map((item) => (item.checked = false));
+  permOptions.value.map(item => (item.checked = false));
 
   const roleId: any = row.id;
   checkedRole.value = {
     id: roleId,
-    name: row.name,
+    name: row.name
   };
   //资源下拉数据
-  getResource().then((response) => {
+  getResource().then(response => {
     checkStrictly.value = true; // 父子节点不互相关联
     state.menuOptions = response.data.menus;
     state.permOptions = response.data.perms;
 
     // 获取角色拥有的资源数据进行勾选
-    getRoleResourceIds(roleId).then((res) => {
+    getRoleResourceIds(roleId).then(res => {
       const checkedMenuIds = res.data.menuIds;
       const checkedPermIds = res.data.permIds;
 
       nextTick(() => {
         resourceRef.value.setCheckedKeys(checkedMenuIds);
-        permOptions.value.forEach((perm) => {
+        permOptions.value.forEach(perm => {
           if (checkedPermIds.includes(perm.value)) {
             perm.checked = true;
           } else {
@@ -218,15 +218,15 @@ function handleRoleResourceSubmit() {
     .map((node: any) => node.value);
 
   const checkedPermIds = state.permOptions
-    .filter((item) => item.checked)
-    .map((item) => item.value);
+    .filter(item => item.checked)
+    .map(item => item.value);
 
   const roleResourceData = {
     menuIds: checkedMenuIds,
-    permIds: checkedPermIds,
+    permIds: checkedPermIds
   };
 
-  updateRoleResource(checkedRole.value.id, roleResourceData).then((res) => {
+  updateRoleResource(checkedRole.value.id, roleResourceData).then(res => {
     ElMessage.success('修改成功');
     state.resourceDialogVisible = false;
     handleQuery();
@@ -392,7 +392,7 @@ onMounted(() => {
               <div class="resource-tree-node__content">
                 <el-checkbox
                   v-for="perm in permOptions.filter(
-                    (perm) => perm.parentId == data.permPid
+                    perm => perm.parentId == data.permPid
                   )"
                   :key="perm.value"
                   :label="perm.value"
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 6af5d65f..ddc4856c 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 export default {
-  name: 'user',
+  name: 'user'
 };
 </script>
 
@@ -12,12 +12,12 @@ import {
   watchEffect,
   onMounted,
   getCurrentInstance,
-  toRefs,
+  toRefs
 } from 'vue';
 
 // 导入API
 import {
-  listUsersPage,
+  listUserPages,
   getUserFormData,
   deleteUsers,
   addUser,
@@ -25,10 +25,10 @@ import {
   updateUserPart,
   downloadTemplate,
   exportUser,
-  importUser,
+  importUser
 } from '@/api/system/user';
 import { listSelectDepartments } from '@/api/system/dept';
-import { listSelectRoles } from '@/api/system/role';
+import { listRoleOptions } from '@/api/system/role';
 
 // 组件依赖
 import {
@@ -36,7 +36,7 @@ import {
   ElMessageBox,
   ElTree,
   ElForm,
-  UploadFile,
+  UploadFile
 } from 'element-plus';
 import {
   Search,
@@ -47,13 +47,13 @@ import {
   Lock,
   Download,
   Top,
-  UploadFilled,
+  UploadFilled
 } from '@element-plus/icons-vue';
 import {
   UserItem,
   UserQueryParam,
   UserFormData,
-  UserImportFormData,
+  UserImportFormData
 } from '@/types/api/system/user';
 
 import { Option, Dialog } from '@/types/common';
@@ -81,7 +81,7 @@ const state = reactive({
   userList: [] as UserItem[],
   // 弹窗属性
   dialog: {
-    visible: false,
+    visible: false
   } as Dialog,
   deptName: undefined,
   // 部门树选项
@@ -93,18 +93,18 @@ const state = reactive({
   roleOptions: [] as Option[],
   // 表单参数
   formData: {
-    status: 1,
+    status: 1
   } as UserFormData,
   // 查询参数
   queryParams: {
     pageNum: 1,
-    pageSize: 10,
+    pageSize: 10
   } as UserQueryParam,
   // 表单校验
   rules: {
     username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
     nickname: [
-      { required: true, message: '用户昵称不能为空', trigger: 'blur' },
+      { required: true, message: '用户昵称不能为空', trigger: 'blur' }
     ],
     deptId: [{ required: true, message: '所属部门不能为空', trigger: 'blur' }],
     roleIds: [{ required: true, message: '用户角色不能为空', trigger: 'blur' }],
@@ -112,25 +112,25 @@ const state = reactive({
       {
         pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
         message: '请输入正确的邮箱地址',
-        trigger: 'blur',
-      },
+        trigger: 'blur'
+      }
     ],
     mobile: [
       {
         pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
         message: '请输入正确的手机号码',
-        trigger: 'blur',
-      },
-    ],
+        trigger: 'blur'
+      }
+    ]
   },
 
   importDialog: {
     title: '用户导出',
-    visible: false,
+    visible: false
   } as Dialog,
   importFormData: {} as UserImportFormData,
   excelFile: undefined as any,
-  excelFilelist: [] as File[],
+  excelFilelist: [] as File[]
 });
 
 const {
@@ -147,7 +147,7 @@ const {
   roleOptions,
   importDialog,
   importFormData,
-  excelFilelist,
+  excelFilelist
 } = toRefs(state);
 
 /**
@@ -158,7 +158,7 @@ watchEffect(
     deptTreeRef.value.filter(state.deptName);
   },
   {
-    flush: 'post', // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
+    flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
   }
 );
 
@@ -184,7 +184,7 @@ function handleDeptNodeClick(data: { [key: string]: any }) {
  * 加载角色数据
  */
 async function loadRoleOptions() {
-  listSelectRoles().then((response) => {
+  listRoleOptions().then(response => {
     state.roleOptions = response.data;
   });
 }
@@ -200,7 +200,7 @@ function handleStatusChange(row: { [key: string]: any }) {
     {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
-      type: 'warning',
+      type: 'warning'
     }
   )
     .then(() => {
@@ -219,7 +219,7 @@ function handleStatusChange(row: { [key: string]: any }) {
  **/
 function handleQuery() {
   state.loading = true;
-  listUsersPage(state.queryParams).then(({ data }) => {
+  listUserPages(state.queryParams).then(({ data }) => {
     state.userList = data.list;
     state.total = data.total;
     state.loading = false;
@@ -252,7 +252,7 @@ function resetPassword(row: { [key: string]: any }) {
     '重置密码',
     {
       confirmButtonText: '确定',
-      cancelButtonText: '取消',
+      cancelButtonText: '取消'
     }
   )
     .then(({ value }) => {
@@ -261,7 +261,7 @@ function resetPassword(row: { [key: string]: any }) {
         return false;
       }
       updateUserPart(row.id, {
-        password: value,
+        password: value
       }).then(() => {
         ElMessage.success('修改成功，新密码是：' + value);
       });
@@ -277,7 +277,7 @@ async function handleAdd() {
   await loadRoleOptions();
   state.dialog = {
     title: '添加用户',
-    visible: true,
+    visible: true
   };
 }
 
@@ -290,7 +290,7 @@ async function handleUpdate(row: { [key: string]: any }) {
   await loadRoleOptions();
   state.dialog = {
     title: '修改用户',
-    visible: true,
+    visible: true
   };
   getUserFormData(userId).then(({ data }) => {
     state.formData = data;
@@ -332,7 +332,7 @@ function handleDelete(row: { [key: string]: any }) {
     {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
-      type: 'warning',
+      type: 'warning'
     }
   )
     .then(function () {
@@ -357,7 +357,7 @@ function cancel() {
  * 加载部门
  */
 async function loadDeptOptions() {
-  listSelectDepartments().then((response) => {
+  listSelectDepartments().then(response => {
     state.deptOptions = response.data;
   });
 }
@@ -377,7 +377,7 @@ function loadGenderOptions() {
 function handleDownloadTemplate() {
   downloadTemplate().then((response: any) => {
     const blob = new Blob([response.data], {
-      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
     });
     const a = document.createElement('a');
     const href = window.URL.createObjectURL(blob); // 下载链接
@@ -429,7 +429,7 @@ function submitImportForm() {
 
       const deptId = state.importFormData.deptId;
       const roleIds = state.importFormData.roleIds.join(',');
-      importUser(deptId, roleIds, state.excelFile).then((response) => {
+      importUser(deptId, roleIds, state.excelFile).then(response => {
         ElMessage.success(response.data);
         closeImportDialog();
         handleQuery();
@@ -454,7 +454,7 @@ function closeImportDialog() {
 function handleExport() {
   exportUser(queryParams.value).then((response: any) => {
     const blob = new Blob([response.data], {
-      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
     });
     const a = document.createElement('a');
     const href = window.URL.createObjectURL(blob); // 下载的链接