diff --git a/src/service/api/auth.ts b/src/service/api/auth.ts
index 1ffcf2bf..a27059cf 100644
--- a/src/service/api/auth.ts
+++ b/src/service/api/auth.ts
@@ -1,4 +1,4 @@
-import { request } from '../request';
+import { alova } from '../request';
 
 /**
  * Login
@@ -7,19 +7,12 @@ import { request } from '../request';
  * @param password Password
  */
 export function fetchLogin(userName: string, password: string) {
-  return request<Api.Auth.LoginToken>({
-    url: '/auth/login',
-    method: 'post',
-    data: {
-      userName,
-      password
-    }
-  });
+  return alova.Post<Api.Auth.LoginToken>('/auth/login', { userName, password });
 }
 
 /** Get user info */
 export function fetchGetUserInfo() {
-  return request<Api.Auth.UserInfo>({ url: '/auth/getUserInfo' });
+  return alova.Get<Api.Auth.UserInfo>('/auth/getUserInfo');
 }
 
 /**
@@ -28,13 +21,15 @@ export function fetchGetUserInfo() {
  * @param refreshToken Refresh token
  */
 export function fetchRefreshToken(refreshToken: string) {
-  return request<Api.Auth.LoginToken>({
-    url: '/auth/refreshToken',
-    method: 'post',
-    data: {
-      refreshToken
+  return alova.Post<Api.Auth.LoginToken>(
+    '/auth/refreshToken',
+    { refreshToken },
+    {
+      meta: {
+        authRole: 'refreshToken'
+      }
     }
-  });
+  );
 }
 
 /**
@@ -44,5 +39,5 @@ export function fetchRefreshToken(refreshToken: string) {
  * @param msg error message
  */
 export function fetchCustomBackendError(code: string, msg: string) {
-  return request({ url: '/auth/error', params: { code, msg } });
+  return alova.Get('/auth/error', { params: { code, msg } });
 }
diff --git a/src/service/api/route.ts b/src/service/api/route.ts
index 0956a7a8..94f1c983 100644
--- a/src/service/api/route.ts
+++ b/src/service/api/route.ts
@@ -1,13 +1,13 @@
-import { request } from '../request';
+import { alova } from '../request';
 
 /** get constant routes */
 export function fetchGetConstantRoutes() {
-  return request<Api.Route.MenuRoute[]>({ url: '/route/getConstantRoutes' });
+  return alova.Get<Api.Route.MenuRoute[]>('/route/getConstantRoutes');
 }
 
 /** get user routes */
 export function fetchGetUserRoutes() {
-  return request<Api.Route.UserRoute>({ url: '/route/getUserRoutes' });
+  return alova.Get<Api.Route.UserRoute>('/route/getUserRoutes');
 }
 
 /**
@@ -16,5 +16,5 @@ export function fetchGetUserRoutes() {
  * @param routeName route name
  */
 export function fetchIsRouteExist(routeName: string) {
-  return request<boolean>({ url: '/route/isRouteExist', params: { routeName } });
+  return alova.Get<boolean>('/route/isRouteExist', { params: { routeName } });
 }
diff --git a/src/service/api/system-manage.ts b/src/service/api/system-manage.ts
index d25f978b..c06c54b5 100644
--- a/src/service/api/system-manage.ts
+++ b/src/service/api/system-manage.ts
@@ -1,12 +1,8 @@
-import { alova, request } from '../request';
+import { alova } from '../request';
 
 /** get role list */
 export function fetchGetRoleList(params?: Api.SystemManage.RoleSearchParams) {
-  return request<Api.SystemManage.RoleList>({
-    url: '/systemManage/getRoleList',
-    method: 'get',
-    params
-  });
+  return alova.Get<Api.SystemManage.RoleList>('/systemManage/getRoleList', { params });
 }
 
 /**
@@ -15,42 +11,25 @@ export function fetchGetRoleList(params?: Api.SystemManage.RoleSearchParams) {
  * these roles are all enabled
  */
 export function fetchGetAllRoles() {
-  return request<Api.SystemManage.AllRole[]>({
-    url: '/systemManage/getAllRoles',
-    method: 'get'
-  });
+  return alova.Get<Api.SystemManage.AllRole[]>('/systemManage/getAllRoles');
 }
 
 /** get user list */
 export function fetchGetUserList(params?: Api.SystemManage.UserSearchParams) {
-  // return request<Api.SystemManage.UserList>({
-  //   url: '/systemManage/getUserList',
-  //   method: 'get',
-  //   params
-  // });
   return alova.Get<Api.SystemManage.UserList>('/systemManage/getUserList', { params });
 }
 
 /** get menu list */
 export function fetchGetMenuList() {
-  return request<Api.SystemManage.MenuList>({
-    url: '/systemManage/getMenuList/v2',
-    method: 'get'
-  });
+  return alova.Get<Api.SystemManage.MenuList>('/systemManage/getMenuList/v2');
 }
 
 /** get all pages */
 export function fetchGetAllPages() {
-  return request<string[]>({
-    url: '/systemManage/getAllPages',
-    method: 'get'
-  });
+  return alova.Get<string[]>('/systemManage/getAllPages');
 }
 
 /** get menu tree */
 export function fetchGetMenuTree() {
-  return request<Api.SystemManage.MenuTree[]>({
-    url: '/systemManage/getMenuTree',
-    method: 'get'
-  });
+  return alova.Get<Api.SystemManage.MenuTree[]>('/systemManage/getMenuTree');
 }
diff --git a/src/views/manage/user/demo.vue b/src/views/manage/user/demo.vue
deleted file mode 100644
index c938b52d..00000000
--- a/src/views/manage/user/demo.vue
+++ /dev/null
@@ -1,211 +0,0 @@
-<!-- <script setup lang="tsx">
-import { NButton, NPopconfirm, NTag } from 'naive-ui';
-import { usePagination } from 'alova/client';
-import { reactive } from 'vue';
-import { fetchGetUserList } from '@/service/api';
-import { $t } from '@/locales';
-import { useAppStore } from '@/store/modules/app';
-import { enableStatusRecord, userGenderRecord } from '@/constants/business';
-import {  useTableOperate } from '@/hooks/common/table';
-import UserOperateDrawer from './modules/user-operate-drawer.vue';
-import UserSearch from './modules/user-search.vue';
-
-const appStore = useAppStore();
-
-const searchParams = reactive<Api.SystemManage.UserSearchParams>({
-  status: null,
-  userName: null,
-  userGender: null,
-  nickName: null,
-  userPhone: null,
-  userEmail: null
-});
-
-const { loading, data, page, pageSize, pageCount, total, refresh, reload } = usePagination(
-  (page, pageSize) => fetchGetUserList({ current: page, size: pageSize }),
-  {
-    initialData: {
-      total: 0,
-      data: []
-    },
-    initialPage: 1,
-    initialPageSize: 10,
-    watchingStates: [searchParams],
-    data: res => res.data,
-    total: res => res.total
-  }
-);
-
-const columns = [
-  {
-    type: 'selection',
-    align: 'center',
-    width: 48
-  },
-  {
-    key: 'index',
-    title: $t('common.index'),
-    align: 'center',
-    width: 64
-  },
-  {
-    key: 'userName',
-    title: $t('page.manage.user.userName'),
-    align: 'center',
-    minWidth: 100
-  },
-  {
-    key: 'userGender',
-    title: $t('page.manage.user.userGender'),
-    align: 'center',
-    width: 100,
-    render: row => {
-      if (row.userGender === null) {
-        return null;
-      }
-
-      const tagMap: Record<Api.SystemManage.UserGender, NaiveUI.ThemeColor> = {
-        1: 'primary',
-        2: 'error'
-      };
-
-      const label = $t(userGenderRecord[row.userGender]);
-
-      return <NTag type={tagMap[row.userGender]}>{label}</NTag>;
-    }
-  },
-  {
-    key: 'nickName',
-    title: $t('page.manage.user.nickName'),
-    align: 'center',
-    minWidth: 100
-  },
-  {
-    key: 'userPhone',
-    title: $t('page.manage.user.userPhone'),
-    align: 'center',
-    width: 120
-  },
-  {
-    key: 'userEmail',
-    title: $t('page.manage.user.userEmail'),
-    align: 'center',
-    minWidth: 200
-  },
-  {
-    key: 'status',
-    title: $t('page.manage.user.userStatus'),
-    align: 'center',
-    width: 100,
-    render: row => {
-      if (row.status === null) {
-        return null;
-      }
-
-      const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
-        1: 'success',
-        2: 'warning'
-      };
-
-      const label = $t(enableStatusRecord[row.status]);
-
-      return <NTag type={tagMap[row.status]}>{label}</NTag>;
-    }
-  },
-  {
-    key: 'operate',
-    title: $t('common.operate'),
-    align: 'center',
-    width: 130,
-    render: row => (
-      <div class="flex-center gap-8px">
-        <NButton type="primary" ghost size="small" onClick={() => edit(row.id)}>
-          {$t('common.edit')}
-        </NButton>
-        <NPopconfirm onPositiveClick={() => handleDelete(row.id)}>
-          {{
-            default: () => $t('common.confirmDelete'),
-            trigger: () => (
-              <NButton type="error" ghost size="small">
-                {$t('common.delete')}
-              </NButton>
-            )
-          }}
-        </NPopconfirm>
-      </div>
-    )
-  }
-];
-const getData = async () => {
-  reload();
-};
-
-const {
-  drawerVisible,
-  operateType,
-  editingData,
-  handleAdd,
-  handleEdit,
-  checkedRowKeys,
-  onBatchDeleted,
-  onDeleted
-  // closeDrawer
-} = useTableOperate(data, getData);
-
-async function handleBatchDelete() {
-  // request
-  console.log(checkedRowKeys.value);
-
-  onBatchDeleted();
-}
-
-function handleDelete(id: number) {
-  // request
-  console.log(id);
-
-  onDeleted();
-}
-
-function edit(id: number) {
-  handleEdit(id);
-}
-</script>
-
-<template>
-  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
-    <UserSearch v-model:model="searchParams" @reset="resetSearchParams" @search="refresh" />
-    <NCard :title="$t('page.manage.user.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
-      <template #header-extra>
-        <TableHeaderOperation
-          v-model:columns="columnChecks"
-          :disabled-delete="checkedRowKeys.length === 0"
-          :loading="loading"
-          @add="handleAdd"
-          @delete="handleBatchDelete"
-          @refresh="refresh"
-        />
-      </template>
-      <NDataTable
-        v-model:checked-row-keys="checkedRowKeys"
-        :columns="columns"
-        :data="data"
-        size="small"
-        :flex-height="!appStore.isMobile"
-        :scroll-x="962"
-        :loading="loading"
-        remote
-        :row-key="row => row.id"
-        :pagination="mobilePagination"
-        class="sm:h-full"
-      />
-      <UserOperateDrawer
-        v-model:visible="drawerVisible"
-        :operate-type="operateType"
-        :row-data="editingData"
-        @submitted="refresh"
-      />
-    </NCard>
-  </div>
-</template>
-
-<style scoped></style> -->