feat(projects): ✨ sync add alova examples (#8)

* feat(projects): ✨ sync add alova examples

* fix(projects): 🐛 NSpace to ElSpace

.vscode/extensions.json

@@ -4,9 +4,6 @@
     "dbaeumer.vscode-eslint",
     "editorconfig.editorconfig",
     "esbenp.prettier-vscode",
-    "formulahendry.auto-complete-tag",
-    "formulahendry.auto-close-tag",
-    "formulahendry.auto-rename-tag",
     "kisstkondoros.vscode-gutter-preview",
     "mariusalchimavicius.json-to-ts",
     "mhutchie.git-graph",

.vscode/settings.json

@@ -36,7 +36,7 @@
     "source.fixAll.eslint": "explicit"
   },
   "editor.fontLigatures": true,
-  "editor.formatOnSave": false,
+  "editor.formatOnSave": true,
   "editor.quickSuggestions": {
     "strings": true
   },

build/plugins/router.ts

@@ -19,7 +19,8 @@ export function setupElegantRouter() {
         'document_vite',
         'document_unocss',
         'document_naive',
-        'document_antd'
+        'document_antd',
+        'document_alova'
       ]
     },
     routePathTransformer(routeName, routePath) {

package.json

@@ -53,6 +53,7 @@
     "@antv/g2": "5.2.5",
     "@better-scroll/core": "2.5.1",
     "@iconify/vue": "4.1.2",
+    "@sa/alova": "workspace:*",
     "@sa/axios": "workspace:*",
     "@sa/color": "workspace:*",
     "@sa/hooks": "workspace:*",

packages/alova/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@sa/alova",
-  "version": "0.1.0",
+  "version": "1.3.9",
   "exports": {
     ".": "./src/index.ts",
-    "./client": "./src/client.ts"
+    "./fetch": "./src/fetch.ts",
+    "./client": "./src/client.ts",
+    "./mock": "./src/mock.ts"
   },
   "typesVersions": {
     "*": {
@@ -11,7 +13,8 @@
     }
   },
   "dependencies": {
+    "@alova/mock": "2.0.9",
     "@sa/utils": "workspace:*",
-    "alova": "3.0.20"
+    "alova": "3.2.3"
   }
 }

packages/alova/src/fetch.ts

@@ -0,0 +1,2 @@
+import adapterFetch from 'alova/fetch';
+export default adapterFetch;

packages/alova/src/mock.ts

@@ -0,0 +1 @@
+export * from '@alova/mock';

src/locales/langs/en-us.ts

@@ -113,7 +113,7 @@ const local: App.I18n.Schema = {
     },
     tab: {
       visible: 'Tab Visible',
-      cache: 'Tab Cache',
+      cache: 'Tag Bar Info Cache',
       height: 'Tab Height',
       mode: {
         title: 'Tab Mode',
@@ -141,6 +141,11 @@ const local: App.I18n.Schema = {
     },
     themeDrawerTitle: 'Theme Configuration',
     pageFunTitle: 'Page Function',
+    resetCacheStrategy: {
+      title: 'Reset Cache Strategy',
+      close: 'Close Page',
+      refresh: 'Refresh Page'
+    },
     configOperation: {
       copyConfig: 'Copy Config',
       copySuccessMsg: 'Copy Success, Please replace the variable "themeSettings" in "src/theme/settings.ts"',
@@ -163,9 +168,14 @@ const local: App.I18n.Schema = {
     document_unocss: 'UnoCSS Document',
     document_naive: 'Naive UI Document',
     document_antd: 'Ant Design Vue Document',
+    document_alova: 'Alova Document',
     'user-center': 'User Center',
     about: 'About',
     function: 'System Function',
+    alova: 'Alova Example',
+    alova_request: 'Alova Request',
+    alova_user: 'User List',
+    alova_scenes: 'Scenario Request',
     function_tab: 'Tab',
     'function_multi-tab': 'Multi Tab',
     'function_hide-child': 'Hide Child',
@@ -337,6 +347,20 @@ const local: App.I18n.Schema = {
         repeatedErrorMsg2: 'Custom Request Error 2'
       }
     },
+    alova: {
+      scenes: {
+        captchaSend: 'Captcha Send',
+        autoRequest: 'Auto Request',
+        visibilityRequestTips: 'Automatically request when switching browser window',
+        pollingRequestTips: 'It will request every 3 seconds',
+        networkRequestTips: 'Automatically request after network reconnecting',
+        refreshTime: 'Refresh Time',
+        startRequest: 'Start Request',
+        stopRequest: 'Stop Request',
+        requestCrossComponent: 'Request Cross Component',
+        triggerAllRequest: 'Manually Trigger All Automated Requests'
+      }
+    },
     manage: {
       common: {
         status: {

src/locales/langs/zh-cn.ts

@@ -113,7 +113,7 @@ const local: App.I18n.Schema = {
     },
     tab: {
       visible: '显示标签栏',
-      cache: '缓存标签页',
+      cache: '标签栏信息缓存',
       height: '标签栏高度',
       mode: {
         title: '标签栏风格',
@@ -141,6 +141,11 @@ const local: App.I18n.Schema = {
     },
     themeDrawerTitle: '主题配置',
     pageFunTitle: '页面功能',
+    resetCacheStrategy: {
+      title: '重置缓存策略',
+      close: '关闭页面',
+      refresh: '刷新页面'
+    },
     configOperation: {
       copyConfig: '复制配置',
       copySuccessMsg: '复制成功，请替换 src/theme/settings.ts 中的变量 themeSettings',
@@ -163,9 +168,14 @@ const local: App.I18n.Schema = {
     document_unocss: 'UnoCSS文档',
     document_naive: 'Naive UI文档',
     document_antd: 'Ant Design Vue文档',
+    document_alova: 'Alova文档',
     'user-center': '个人中心',
     about: '关于',
     function: '系统功能',
+    alova: 'alova示例',
+    alova_request: 'alova请求',
+    alova_user: '用户列表',
+    alova_scenes: '场景化请求',
     function_tab: '标签页',
     'function_multi-tab': '多标签页',
     'function_hide-child': '隐藏子菜单',
@@ -337,6 +347,20 @@ const local: App.I18n.Schema = {
         repeatedErrorMsg2: '自定义请求错误 2'
       }
     },
+    alova: {
+      scenes: {
+        captchaSend: '发送验证码',
+        autoRequest: '自动请求',
+        visibilityRequestTips: '浏览器窗口切换自动请求数据',
+        pollingRequestTips: '每3秒自动请求一次',
+        networkRequestTips: '网络重连后自动请求',
+        refreshTime: '更新时间',
+        startRequest: '开始请求',
+        stopRequest: '停止请求',
+        requestCrossComponent: '跨组件触发请求',
+        triggerAllRequest: '手动触发所有自动请求'
+      }
+    },
     manage: {
       common: {
         status: {

src/router/elegant/imports.ts

@@ -21,6 +21,9 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   "iframe-page": () => import("@/views/_builtin/iframe-page/[url].vue"),
   login: () => import("@/views/_builtin/login/index.vue"),
   about: () => import("@/views/about/index.vue"),
+  alova_request: () => import("@/views/alova/request/index.vue"),
+  alova_scenes: () => import("@/views/alova/scenes/index.vue"),
+  alova_user: () => import("@/views/alova/user/index.vue"),
   "function_hide-child_one": () => import("@/views/function/hide-child/one/index.vue"),
   "function_hide-child_three": () => import("@/views/function/hide-child/three/index.vue"),
   "function_hide-child_two": () => import("@/views/function/hide-child/two/index.vue"),

src/router/elegant/routes.ts

@@ -50,6 +50,51 @@ export const generatedRoutes: GeneratedRoute[] = [
       order: 10
     }
   },
+  {
+    name: 'alova',
+    path: '/alova',
+    component: 'layout.base',
+    meta: {
+      title: 'alova',
+      i18nKey: 'route.alova',
+      icon: 'carbon:http',
+      order: 7
+    },
+    children: [
+      {
+        name: 'alova_request',
+        path: '/alova/request',
+        component: 'view.alova_request',
+        meta: {
+          title: 'alova_request',
+          i18nKey: 'route.alova_request',
+          order: 1
+        }
+      },
+      {
+        name: 'alova_scenes',
+        path: '/alova/scenes',
+        component: 'view.alova_scenes',
+        meta: {
+          title: 'alova_scenes',
+          i18nKey: 'route.alova_scenes',
+          icon: 'cbi:scene-dynamic',
+          order: 3
+        }
+      },
+      {
+        name: 'alova_user',
+        path: '/alova/user',
+        component: 'view.alova_user',
+        meta: {
+          title: 'alova_user',
+          i18nKey: 'route.alova_user',
+          icon: 'carbon:user-multiple',
+          order: 2
+        }
+      }
+    ]
+  },
   {
     name: 'function',
     path: '/function',

src/router/elegant/transform.ts

@@ -175,10 +175,15 @@ const routeMap: RouteMap = {
   "document_unocss": "/document/unocss",
   "document_naive": "/document/naive",
   "document_antd": "/document/antd",
+  "document_alova": "/document/alova",
   "403": "/403",
   "404": "/404",
   "500": "/500",
   "about": "/about",
+  "alova": "/alova",
+  "alova_request": "/alova/request",
+  "alova_scenes": "/alova/scenes",
+  "alova_user": "/alova/user",
   "function": "/function",
   "function_hide-child": "/function/hide-child",
   "function_hide-child_one": "/function/hide-child/one",

src/router/routes/index.ts

@@ -91,6 +91,20 @@ const customRoutes: CustomRoute[] = [
           icon: 'logos:NativeUI'
         }
       },
+      {
+        name: 'document_alova',
+        path: '/document/alova',
+        component: 'view.iframe-page',
+        props: {
+          url: 'https://alova.js.org'
+        },
+        meta: {
+          title: 'document_alova',
+          i18nKey: 'route.document_alova',
+          order: 7,
+          localIcon: 'alova'
+        }
+      },
       {
         name: 'document_project',
         path: '/document/project',

src/service-alova/api/auth.ts

@@ -0,0 +1,56 @@
+import { alova } from '../request';
+
+/**
+ * Login
+ *
+ * @param userName User name
+ * @param password Password
+ */
+export function fetchLogin(userName: string, password: string) {
+  return alova.Post<Api.Auth.LoginToken>('/auth/login', { userName, password });
+}
+
+/** Get user info */
+export function fetchGetUserInfo() {
+  return alova.Get<Api.Auth.UserInfo>('/auth/getUserInfo');
+}
+
+/** Send captcha to target phone */
+export function sendCaptcha(phone: string) {
+  return alova.Post<null>('/auth/sendCaptcha', { phone });
+}
+
+/** Verify captcha */
+export function verifyCaptcha(phone: string, code: string) {
+  return alova.Post<null>('/auth/verifyCaptcha', { phone, code });
+}
+
+/**
+ * Refresh token
+ *
+ * @param refreshToken Refresh token
+ */
+export function fetchRefreshToken(refreshToken: string) {
+  return alova.Post<Api.Auth.LoginToken>(
+    '/auth/refreshToken',
+    { refreshToken },
+    {
+      meta: {
+        authRole: 'refreshToken'
+      }
+    }
+  );
+}
+
+/**
+ * return custom backend error
+ *
+ * @param code error code
+ * @param msg error message
+ */
+export function fetchCustomBackendError(code: string, msg: string) {
+  return alova.Get('/auth/error', {
+    params: { code, msg },
+    shareRequest: false
+  });
+}

src/service-alova/api/index.ts

@@ -0,0 +1,3 @@
+export * from './auth';
+export * from './route';
+export * from './system-manage';

src/service-alova/api/route.ts

@@ -0,0 +1,20 @@
+import { alova } from '../request';
+
+/** get constant routes */
+export function fetchGetConstantRoutes() {
+  return alova.Get<Api.Route.MenuRoute[]>('/route/getConstantRoutes');
+}
+
+/** get user routes */
+export function fetchGetUserRoutes() {
+  return alova.Get<Api.Route.UserRoute>('/route/getUserRoutes');
+}
+
+/**
+ * whether the route is exist
+ *
+ * @param routeName route name
+ */
+export function fetchIsRouteExist(routeName: string) {
+  return alova.Get<boolean>('/route/isRouteExist', { params: { routeName } });
+}

src/service-alova/api/system-manage.ts

@@ -0,0 +1,59 @@
+import { alova } from '../request';
+
+/** get role list */
+export function fetchGetRoleList(params?: Api.SystemManage.RoleSearchParams) {
+  return alova.Get<Api.SystemManage.RoleList>('/systemManage/getRoleList', { params });
+}
+
+/**
+ * get all roles
+ *
+ * these roles are all enabled
+ */
+export function fetchGetAllRoles() {
+  return alova.Get<Api.SystemManage.AllRole[]>('/systemManage/getAllRoles');
+}
+
+/** get user list */
+export function fetchGetUserList(params?: Api.SystemManage.UserSearchParams) {
+  return alova.Get<Api.SystemManage.UserList>('/systemManage/getUserList', { params });
+}
+
+export type UserModel = Pick<
+  Api.SystemManage.User,
+  'userName' | 'userGender' | 'nickName' | 'userPhone' | 'userEmail' | 'userRoles' | 'status'
+>;
+/** add user */
+export function addUser(data: UserModel) {
+  return alova.Post<null>('/systemManage/addUser', data);
+}
+
+/** update user */
+export function updateUser(data: UserModel) {
+  return alova.Post<null>('/systemManage/updateUser', data);
+}
+
+/** delete user */
+export function deleteUser(id: number) {
+  return alova.Delete<null>('/systemManage/deleteUser', { id });
+}
+
+/** batch delete user */
+export function batchDeleteUser(ids: number[]) {
+  return alova.Delete<null>('/systemManage/batchDeleteUser', { ids });
+}
+
+/** get menu list */
+export function fetchGetMenuList() {
+  return alova.Get<Api.SystemManage.MenuList>('/systemManage/getMenuList/v2');
+}
+
+/** get all pages */
+export function fetchGetAllPages() {
+  return alova.Get<string[]>('/systemManage/getAllPages');
+}
+
+/** get menu tree */
+export function fetchGetMenuTree() {
+  return alova.Get<Api.SystemManage.MenuTree[]>('/systemManage/getMenuTree');
+}

src/service-alova/mocks/feature-users-20241014.ts

@@ -0,0 +1,56 @@
+import { defineMock } from '@sa/alova/mock';
+
+// you can separate the mock data into multiple files dependent on your project versions
+export default defineMock({
+  '[POST]/systemManage/addUser': () => {
+    return {
+      code: '0000',
+      msg: 'success',
+      data: null
+    };
+  },
+  '[POST]/systemManage/updateUser': () => {
+    return {
+      code: '0000',
+      msg: 'success',
+      data: null
+    };
+  },
+  '[DELETE]/systemManage/deleteUser': () => {
+    return {
+      code: '0000',
+      msg: 'success',
+      data: null
+    };
+  },
+  '[DELETE]/systemManage/batchDeleteUser': () => {
+    return {
+      code: '0000',
+      msg: 'success',
+      data: null
+    };
+  },
+  '[POST]/auth/sendCaptcha': () => {
+    return {
+      code: '0000',
+      msg: 'success',
+      data: null
+    };
+  },
+  '[POST]/auth/verifyCaptcha': () => {
+    return {
+      code: '0000',
+      msg: 'success',
+      data: null
+    };
+  },
+  '/mock/getLastTime': () => {
+    return {
+      code: '0000',
+      msg: 'success',
+      data: {
+        time: new Date().toLocaleTimeString()
+      }
+    };
+  }
+});

src/service-alova/request/index.ts

@@ -0,0 +1,115 @@
+import { createAlovaRequest } from '@sa/alova';
+import { createAlovaMockAdapter } from '@sa/alova/mock';
+import adapterFetch from '@sa/alova/fetch';
+import { useAuthStore } from '@/store/modules/auth';
+import { $t } from '@/locales';
+import { getServiceBaseURL } from '@/utils/service';
+import featureUsers20241014 from '../mocks/feature-users-20241014';
+import { getAuthorization, handleRefreshToken, showErrorMsg } from './shared';
+import type { RequestInstanceState } from './type';
+
+const isHttpProxy = import.meta.env.DEV && import.meta.env.VITE_HTTP_PROXY === 'Y';
+const { baseURL } = getServiceBaseURL(import.meta.env, isHttpProxy);
+
+const state: RequestInstanceState = {
+  errMsgStack: []
+};
+const mockAdapter = createAlovaMockAdapter([featureUsers20241014], {
+  // using requestAdapter if not match mock request
+  httpAdapter: adapterFetch(),
+
+  // response delay time
+  delay: 1000,
+
+  // global mock toggle
+  enable: true,
+  matchMode: 'methodurl'
+});
+export const alova = createAlovaRequest(
+  {
+    baseURL,
+    requestAdapter: import.meta.env.DEV ? mockAdapter : adapterFetch()
+  },
+  {
+    onRequest({ config }) {
+      const Authorization = getAuthorization();
+      config.headers.Authorization = Authorization;
+      config.headers.apifoxToken = 'XL299LiMEDZ0H5h3A29PxwQXdMJqWyY2';
+    },
+    tokenRefresher: {
+      async isExpired(response) {
+        const expiredTokenCodes = import.meta.env.VITE_SERVICE_EXPIRED_TOKEN_CODES?.split(',') || [];
+        const { code } = await response.clone().json();
+        return expiredTokenCodes.includes(String(code));
+      },
+      async handler() {
+        await handleRefreshToken();
+      }
+    },
+    async isBackendSuccess(response) {
+      // when the backend response code is "0000"(default), it means the request is success
+      // to change this logic by yourself, you can modify the `VITE_SERVICE_SUCCESS_CODE` in `.env` file
+      const resp = response.clone();
+      const data = await resp.json();
+      return String(data.code) === import.meta.env.VITE_SERVICE_SUCCESS_CODE;
+    },
+    async transformBackendResponse(response) {
+      return (await response.clone().json()).data;
+    },
+    async onError(error, response) {
+      const authStore = useAuthStore();
+
+      let message = error.message;
+      let responseCode = '';
+      if (response) {
+        const data = await response?.clone().json();
+        message = data.msg;
+        responseCode = String(data.code);
+      }
+
+      function handleLogout() {
+        showErrorMsg(state, message);
+        authStore.resetStore();
+      }
+
+      function logoutAndCleanup() {
+        handleLogout();
+        window.removeEventListener('beforeunload', handleLogout);
+        state.errMsgStack = state.errMsgStack.filter(msg => msg !== message);
+      }
+
+      // when the backend response code is in `logoutCodes`, it means the user will be logged out and redirected to login page
+      const logoutCodes = import.meta.env.VITE_SERVICE_LOGOUT_CODES?.split(',') || [];
+      if (logoutCodes.includes(responseCode)) {
+        handleLogout();
+        throw error;
+      }
+
+      // when the backend response code is in `modalLogoutCodes`, it means the user will be logged out by displaying a modal
+      const modalLogoutCodes = import.meta.env.VITE_SERVICE_MODAL_LOGOUT_CODES?.split(',') || [];
+      if (modalLogoutCodes.includes(responseCode) && !state.errMsgStack?.includes(message)) {
+        state.errMsgStack = [...(state.errMsgStack || []), message];
+
+        // prevent the user from refreshing the page
+        window.addEventListener('beforeunload', handleLogout);
+
+        if (window.$messageBox) {
+          window.$messageBox({
+            type: 'error',
+            title: $t('common.error'),
+            message,
+            confirmButtonText: $t('common.confirm'),
+            closeOnClickModal: false,
+            closeOnPressEscape: false,
+            callback() {
+              logoutAndCleanup();
+            }
+          });
+        }
+        throw error;
+      }
+      showErrorMsg(state, message);
+      throw error;
+    }
+  }
+);

src/service-alova/request/shared.ts

@@ -0,0 +1,57 @@
+import { useAuthStore } from '@/store/modules/auth';
+import { localStg } from '@/utils/storage';
+import { fetchRefreshToken } from '../api';
+import type { RequestInstanceState } from './type';
+
+export function getAuthorization() {
+  const token = localStg.get('token');
+  const Authorization = token ? `Bearer ${token}` : null;
+
+  return Authorization;
+}
+
+/** refresh token */
+export async function handleRefreshToken() {
+  const { resetStore } = useAuthStore();
+
+  const rToken = localStg.get('refreshToken') || '';
+  const refreshTokenMethod = fetchRefreshToken(rToken);
+
+  // set the refreshToken role, so that the request will not be intercepted
+  refreshTokenMethod.meta.authRole = 'refreshToken';
+
+  try {
+    const data = await refreshTokenMethod;
+    localStg.set('token', data.token);
+    localStg.set('refreshToken', data.refreshToken);
+  } catch (error) {
+    resetStore();
+    throw error;
+  }
+}
+
+export function showErrorMsg(state: RequestInstanceState, message: string) {
+  if (!state.errMsgStack?.length) {
+    state.errMsgStack = [];
+  }
+
+  const isExist = state.errMsgStack.includes(message);
+
+  if (!isExist) {
+    state.errMsgStack.push(message);
+
+    if (window.$message) {
+      window.$message({
+        type: 'error',
+        message,
+        onClose: () => {
+          state.errMsgStack = state.errMsgStack.filter(msg => msg !== message);
+
+          setTimeout(() => {
+            state.errMsgStack = [];
+          }, 5000);
+        }
+      });
+    }
+  }
+}

src/service-alova/request/type.ts

@@ -0,0 +1,4 @@
+export interface RequestInstanceState {
+  /** the request error message stack */
+  errMsgStack: string[];
+}

src/typings/app.d.ts

@@ -20,6 +20,8 @@ declare namespace App {
       otherColor: OtherColor;
       /** Whether info color is followed by the primary color */
       isInfoFollowPrimary: boolean;
+      /** Reset cache strategy */
+      resetCacheStrategy?: UnionKey.ResetCacheStrategy;
       /** Layout */
       layout: {
         /** Layout mode */
@@ -388,6 +390,7 @@ declare namespace App {
         };
         themeDrawerTitle: string;
         pageFunTitle: string;
+        resetCacheStrategy: { title: string } & Record<UnionKey.ResetCacheStrategy, string>;
         configOperation: {
           copyConfig: string;
           copySuccessMsg: string;
@@ -523,6 +526,20 @@ declare namespace App {
             repeatedErrorMsg2: string;
           };
         };
+        alova: {
+          scenes: {
+            captchaSend: string;
+            autoRequest: string;
+            visibilityRequestTips: string;
+            pollingRequestTips: string;
+            networkRequestTips: string;
+            refreshTime: string;
+            startRequest: string;
+            stopRequest: string;
+            requestCrossComponent: string;
+            triggerAllRequest: string;
+          };
+        };
         manage: {
           common: {
             status: {

src/typings/components.d.ts

@@ -69,6 +69,8 @@ declare module 'vue' {
     IconAntDesignReloadOutlined: typeof import('~icons/ant-design/reload-outlined')['default']
     IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default']
     IconCarbonAdd: typeof import('~icons/carbon/add')['default']
+    IconCarbonPlay: typeof import('~icons/carbon/play')['default']
+    IconCarbonStop: typeof import('~icons/carbon/stop')['default']
     'IconCharm:download': typeof import('~icons/charm/download')['default']
     'IconFileIcons:microsoftExcel': typeof import('~icons/file-icons/microsoft-excel')['default']
     IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
@@ -79,7 +81,9 @@ declare module 'vue' {
     IconIcRoundRefresh: typeof import('~icons/ic/round-refresh')['default']
     IconIcRoundRemove: typeof import('~icons/ic/round-remove')['default']
     IconIcRoundSearch: typeof import('~icons/ic/round-search')['default']
+    IconLocalActivity: typeof import('~icons/local/activity')['default']
     IconLocalBanner: typeof import('~icons/local/banner')['default']
+    IconLocalCast: typeof import('~icons/local/cast')['default']
     IconLocalLogo: typeof import('~icons/local/logo')['default']
     'IconMaterialSymbolsLight:rotate90DegreesCcwOutlineRounded': typeof import('~icons/material-symbols-light/rotate90-degrees-ccw-outline-rounded')['default']
     'IconMdi:printer': typeof import('~icons/mdi/printer')['default']

src/typings/elegant-router.d.ts

@@ -29,10 +29,15 @@ declare module "@elegant-router/types" {
     "document_unocss": "/document/unocss";
     "document_naive": "/document/naive";
     "document_antd": "/document/antd";
+    "document_alova": "/document/alova";
     "403": "/403";
     "404": "/404";
     "500": "/500";
     "about": "/about";
+    "alova": "/alova";
+    "alova_request": "/alova/request";
+    "alova_scenes": "/alova/scenes";
+    "alova_user": "/alova/user";
     "function": "/function";
     "function_hide-child": "/function/hide-child";
     "function_hide-child_one": "/function/hide-child/one";
@@ -107,6 +112,7 @@ declare module "@elegant-router/types" {
     | "document_unocss"
     | "document_naive"
     | "document_antd"
+    | "document_alova"
   >;
 
   /**
@@ -123,6 +129,7 @@ declare module "@elegant-router/types" {
     | "404"
     | "500"
     | "about"
+    | "alova"
     | "function"
     | "home"
     | "iframe-page"
@@ -155,6 +162,9 @@ declare module "@elegant-router/types" {
     | "iframe-page"
     | "login"
     | "about"
+    | "alova_request"
+    | "alova_scenes"
+    | "alova_user"
     | "function_hide-child_one"
     | "function_hide-child_three"
     | "function_hide-child_two"
@@ -205,6 +215,7 @@ declare module "@elegant-router/types" {
     | "document_unocss"
     | "document_naive"
     | "document_antd"
+    | "document_alova"
   >;
 
   /**

src/typings/naive-ui.d.ts

@@ -2,11 +2,6 @@ declare namespace UI {
   type ThemeColor = 'danger' | 'primary' | 'info' | 'success' | 'warning';
   type Align = 'stretch' | 'baseline' | 'start' | 'end' | 'center' | 'flex-end' | 'flex-start';
 
-  type DataTableBaseColumn<T> = import('naive-ui').DataTableBaseColumn<T>;
-  type DataTableExpandColumn<T> = import('naive-ui').DataTableExpandColumn<T>;
-  type DataTableSelectionColumn<T> = import('naive-ui').DataTableSelectionColumn<T>;
-  type TableColumnGroup<T> = import('naive-ui/es/data-table/src/interface').TableColumnGroup<T>;
-  type PaginationProps = import('naive-ui').PaginationProps;
   type TableColumnCheck = import('@sa/hooks').TableColumnCheck;
   type TableDataWithIndex<T> = import('@sa/hooks').TableDataWithIndex<T>;
   type FlatResponseData<T> = import('@sa/axios').FlatResponseData<T>;
@@ -18,14 +13,12 @@ declare namespace UI {
    */
   type CustomColumnKey = 'operate';
 
-  type SetTableColumnKey<C, T> = Omit<C, 'key'> & { key: keyof T | CustomColumnKey };
+  type SetTableColumnKey<C, T> = Omit<C, 'key'> & { key: keyof T | `CustomColumnKey` };
 
   type TableData = Api.Common.CommonRecord<object>;
 
   type TableColumnWithKey<T> = Partial<import('element-plus').TableColumnCtx<T>>;
 
-  // type TableColumn<T> = TableColumnWithKey<T> | DataTableSelectionColumn<T> | DataTableExpandColumn<T>;
-
   type TableColumn<T> = TableColumnWithKey<T>;
 
   type TableApiFn<T = any, R = Api.Common.CommonSearchParams> = (

src/typings/union-key.d.ts

@@ -14,6 +14,14 @@ declare namespace UnionKey {
   /** Theme scheme */
   type ThemeScheme = 'light' | 'dark' | 'auto';
 
+  /**
+   * Reset cache strategy
+   *
+   * - close: re-cache when close page
+   * - refresh: re-cache when refresh page
+   */
+  type ResetCacheStrategy = 'close' | 'refresh';
+
   /**
    * The layout mode
    *

src/utils/agent.ts

@@ -1,5 +1,6 @@
 export function isPC() {
   const agents = ['Android', 'iPhone', 'webOS', 'BlackBerry', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
 
-  return !agents.includes(window.navigator.userAgent);
+  const isMobile = agents.some(agent => window.navigator.userAgent.includes(agent));
+  return !isMobile;
 }

src/views/alova/request/index.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+import { fetchCustomBackendError } from '@/service-alova/api';
+
+async function logout() {
+  await fetchCustomBackendError('8888', $t('request.logoutMsg'));
+}
+
+async function logoutWithModal() {
+  await fetchCustomBackendError('7777', $t('request.logoutWithModalMsg'));
+}
+
+async function refreshToken() {
+  await fetchCustomBackendError('9999', $t('request.tokenExpired'));
+}
+
+async function handleRepeatedMessageError() {
+  await Promise.all([
+    fetchCustomBackendError('2222', $t('page.function.request.repeatedErrorMsg1')),
+    fetchCustomBackendError('2222', $t('page.function.request.repeatedErrorMsg1')),
+    fetchCustomBackendError('2222', $t('page.function.request.repeatedErrorMsg1')),
+    fetchCustomBackendError('3333', $t('page.function.request.repeatedErrorMsg2')),
+    fetchCustomBackendError('3333', $t('page.function.request.repeatedErrorMsg2')),
+    fetchCustomBackendError('3333', $t('page.function.request.repeatedErrorMsg2'))
+  ]);
+}
+
+async function handleRepeatedModalError() {
+  await Promise.all([
+    fetchCustomBackendError('7777', $t('request.logoutWithModalMsg')),
+    fetchCustomBackendError('7777', $t('request.logoutWithModalMsg')),
+    fetchCustomBackendError('7777', $t('request.logoutWithModalMsg'))
+  ]);
+}
+</script>
+
+<template>
+  <ElSpace direction="vertical" fill :size="16">
+    <ElCard :header="$t('request.logout')" shadow="never" size="small" class="card-wrapper">
+      <ElButton @click="logout">{{ $t('common.trigger') }}</ElButton>
+    </ElCard>
+    <ElCard :header="$t('request.logoutWithModal')" shadow="never" size="small" class="card-wrapper">
+      <ElButton @click="logoutWithModal">{{ $t('common.trigger') }}</ElButton>
+    </ElCard>
+    <ElCard :header="$t('request.refreshToken')" shadow="never" size="small" class="card-wrapper">
+      <ElButton @click="refreshToken">{{ $t('common.trigger') }}</ElButton>
+    </ElCard>
+    <ElCard
+      :header="$t('page.function.request.repeatedErrorOccurOnce')"
+      shadow="never"
+      size="small"
+      class="card-wrapper"
+    >
+      <ElButton @click="handleRepeatedMessageError">{{ $t('page.function.request.repeatedError') }}(Message)</ElButton>
+      <ElButton class="ml-12px" @click="handleRepeatedModalError">
+        {{ $t('page.function.request.repeatedError') }}(Modal)
+      </ElButton>
+    </ElCard>
+  </ElSpace>
+</template>
+
+<style scoped></style>

src/views/alova/scenes/index.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+import CaptchaVerification from './modules/captcha-verification.vue';
+import BrowserVisibilityRequest from './modules/browser-visibility-request.vue';
+import PollingRequest from './modules/polling-request.vue';
+import NetworkToggleRequest from './modules/network-toggle-request.vue';
+import CrossComponentRequest from './modules/cross-component-request.vue';
+</script>
+
+<template>
+  <ElSpace direction="vertical" fill :size="16">
+    <ElCard :header="$t('page.alova.scenes.captchaSend')" shadow="never" class="card-wrapper">
+      <CaptchaVerification class="w-1/3" />
+    </ElCard>
+    <ElCard :header="$t('page.alova.scenes.autoRequest')" shadow="never" class="card-wrapper">
+      <ElSpace :wrap="false">
+        <BrowserVisibilityRequest />
+        <PollingRequest />
+        <NetworkToggleRequest />
+      </ElSpace>
+    </ElCard>
+    <ElCard :header="$t('page.alova.scenes.requestCrossComponent')" shadow="never" class="card-wrapper">
+      <CrossComponentRequest />
+    </ElCard>
+  </ElSpace>
+</template>
+
+<style scoped></style>

src/views/alova/scenes/modules/browser-visibility-request.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { actionDelegationMiddleware, useAutoRequest } from '@sa/alova/client';
+import { ref } from 'vue';
+import { alova } from '@/service-alova/request';
+
+const getLastTime = alova.Get<{ time: string }>('/mock/getLastTime', { cacheFor: null });
+const isStop = ref(false);
+const { loading, data } = useAutoRequest(getLastTime, {
+  enableVisibility: true,
+  enableNetwork: false,
+  enableFocus: false,
+  initialData: { time: '' },
+  async middleware(_, next) {
+    await actionDelegationMiddleware('autoRequest:1')(_, () => Promise.resolve());
+    if (!isStop.value) {
+      next();
+    }
+  }
+});
+
+const toggleStop = () => {
+  isStop.value = !isStop.value;
+};
+</script>
+
+<template>
+  <ElSpace direction="vertical" fill>
+    <ElAlert type="info" show-icon>{{ $t('page.alova.scenes.visibilityRequestTips') }}</ElAlert>
+    <ElButton type="primary" @click="toggleStop">
+      <icon-carbon-play v-if="isStop" class="mr-2" />
+      <icon-carbon-stop v-else class="mr-2" />
+      {{ isStop ? $t('page.alova.scenes.startRequest') : $t('page.alova.scenes.stopRequest') }}
+    </ElButton>
+    <ElSpace class="justify-center">
+      <span>{{ $t('page.alova.scenes.refreshTime') }}: {{ data.time || '--' }}</span>
+      <SvgIcon v-if="loading" icon="line-md:loading-twotone-loop" class="text-20px" />
+    </ElSpace>
+  </ElSpace>
+</template>

src/views/alova/scenes/modules/captcha-verification.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { actionDelegationMiddleware, useCaptcha, useForm } from '@sa/alova/client';
+import { $t } from '@/locales';
+import { useFormRules, useForm as useUIForm } from '@/hooks/common/form';
+import { sendCaptcha, verifyCaptcha } from '@/service-alova/api';
+
+defineOptions({ name: 'CaptchaVerification' });
+
+const { loading, send, countdown } = useCaptcha(sendCaptcha, {
+  middleware: actionDelegationMiddleware('captcha:send')
+});
+const label = computed(() => {
+  return countdown.value > 0
+    ? $t('page.login.codeLogin.reGetCode', { time: countdown.value })
+    : $t('page.login.codeLogin.getCode');
+});
+const {
+  form,
+  loading: submiting,
+  send: submit
+} = useForm(formData => verifyCaptcha(formData.phone, formData.code), {
+  initialForm: {
+    phone: '',
+    code: ''
+  }
+});
+
+const { formRef, validate } = useUIForm();
+
+const rules = computed<Record<keyof typeof form.value, App.Global.FormRule[]>>(() => {
+  const { formRules } = useFormRules();
+
+  return {
+    phone: formRules.phone,
+    code: formRules.code
+  };
+});
+
+async function handleSubmit() {
+  await validate();
+  await submit();
+  // request
+  window.$message?.success($t('page.login.common.validateSuccess'));
+}
+</script>
+
+<template>
+  <ElForm ref="formRef" :model="form" :rules="rules" size="large" :show-label="false" @keyup.enter="handleSubmit">
+    <ElFormItem path="phone">
+      <ElInput v-model="form.phone" :placeholder="$t('page.login.common.phonePlaceholder')" :maxlength="11" />
+    </ElFormItem>
+    <ElFormItem path="code">
+      <div class="w-full flex-y-center gap-16px">
+        <ElInput v-model="form.code" :placeholder="$t('page.login.common.codePlaceholder')" />
+        <ElButton size="large" :disabled="countdown > 0" :loading="loading" @click="send(form.phone)">
+          {{ label }}
+        </ElButton>
+      </div>
+    </ElFormItem>
+    <ElSpace vertical :size="18" class="w-full">
+      <ElButton type="primary" size="large" round block :loading="submiting" @click="handleSubmit">
+        {{ $t('common.confirm') }}
+      </ElButton>
+    </ElSpace>
+  </ElForm>
+</template>
+
+<style scoped></style>

src/views/alova/scenes/modules/cross-component-request.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { accessAction } from '@sa/alova/client';
+
+const handleAutoRequestSend = async () => {
+  accessAction(/^autoRequest/, async ({ send }) => {
+    await send();
+  });
+};
+</script>
+
+<template>
+  <ElButton @click="handleAutoRequestSend">{{ $t('page.alova.scenes.triggerAllRequest') }}</ElButton>
+</template>

src/views/alova/scenes/modules/network-toggle-request.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { actionDelegationMiddleware, useAutoRequest } from '@sa/alova/client';
+import { ref } from 'vue';
+import { alova } from '@/service-alova/request';
+
+defineOptions({ name: 'NetworkToggleRequest' });
+
+const getLastTime = alova.Get<{ time: string }>('/mock/getLastTime', { cacheFor: null });
+const isStop = ref(false);
+const { loading, data } = useAutoRequest(getLastTime, {
+  enableVisibility: false,
+  enableNetwork: true,
+  enableFocus: false,
+  initialData: {
+    time: ''
+  },
+  async middleware(_, next) {
+    await actionDelegationMiddleware('autoRequest:2')(_, () => Promise.resolve());
+    if (!isStop.value) {
+      next();
+    }
+  }
+});
+
+const toggleStop = () => {
+  isStop.value = !isStop.value;
+};
+</script>
+
+<template>
+  <ElSpace direction="vertical" fill>
+    <ElAlert type="info" show-icon>
+      {{ $t('page.alova.scenes.networkRequestTips') }}
+    </ElAlert>
+    <ElButton type="primary" @click="toggleStop">
+      <icon-carbon-play v-if="isStop" class="mr-2" />
+      <icon-carbon-stop v-else class="mr-2" />
+      {{ isStop ? $t('page.alova.scenes.startRequest') : $t('page.alova.scenes.stopRequest') }}
+    </ElButton>
+    <ElSpace class="justify-center">
+      <span>{{ $t('page.alova.scenes.refreshTime') }}: {{ data.time || '--' }}</span>
+      <SvgIcon v-if="loading" icon="line-md:loading-twotone-loop" class="text-20px" />
+    </ElSpace>
+  </ElSpace>
+</template>

src/views/alova/scenes/modules/polling-request.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { actionDelegationMiddleware, useAutoRequest } from '@sa/alova/client';
+import { ref } from 'vue';
+import { alova } from '@/service-alova/request';
+
+defineOptions({ name: 'PollingRequest' });
+
+const getLastTime = alova.Get<{ time: string }>('/mock/getLastTime', { cacheFor: null });
+const isStop = ref(false);
+const { loading, data } = useAutoRequest(getLastTime, {
+  pollingTime: 3000,
+  initialData: {
+    time: ''
+  },
+  async middleware(_, next) {
+    await actionDelegationMiddleware('autoRequest:3')(_, () => Promise.resolve());
+    if (!isStop.value) {
+      next();
+    }
+  }
+});
+
+const toggleStop = () => {
+  isStop.value = !isStop.value;
+};
+</script>
+
+<template>
+  <ElSpace direction="vertical" fill>
+    <ElAlert type="info" show-icon>
+      {{ $t('page.alova.scenes.pollingRequestTips') }}
+    </ElAlert>
+    <ElButton type="primary" @click="toggleStop">
+      <icon-carbon-play v-if="isStop" class="mr-2" />
+      <icon-carbon-stop v-else class="mr-2" />
+      {{ isStop ? $t('page.alova.scenes.startRequest') : $t('page.alova.scenes.stopRequest') }}
+    </ElButton>
+    <ElSpace class="justify-center">
+      <span>{{ $t('page.alova.scenes.refreshTime') }}: {{ data.time || '--' }}</span>
+      <SvgIcon v-if="loading" icon="line-md:loading-twotone-loop" class="text-20px" />
+    </ElSpace>
+  </ElSpace>
+</template>

src/views/alova/user/hooks/use-checked-columns.ts

@@ -0,0 +1,85 @@
+import type { TableColumnCheck } from '@sa/hooks';
+import { computed, ref } from 'vue';
+import type { TableColumnCtx } from 'element-plus';
+import { $t } from '@/locales';
+import type { AlovaGenerics, Method } from '~/packages/alova/src';
+
+type TableAlovaApiFn<T = any, R = Api.Common.CommonSearchParams> = (
+  params: R
+) => Method<AlovaGenerics<Api.Common.PaginatingQueryRecord<T>>>;
+
+type PartialColumnCtx<T> = Partial<TableColumnCtx<T>>;
+// this hook is used to manage table columns
+// if you choose alova, you can move this hook to the `src/hooks` to handle all list page in your project
+export default function useCheckedColumns<A extends TableAlovaApiFn, T = Awaited<ReturnType<A>>['records'][number]>(
+  getColumns: () => PartialColumnCtx<T>[]
+) {
+  const SELECTION_KEY = '__selection__';
+
+  const EXPAND_KEY = '__expand__';
+
+  const INDEX_KEY = '__index__';
+
+  const getColumnChecks = (cols: PartialColumnCtx<T>[]) => {
+    const checks: UI.TableColumnCheck[] = [];
+    cols.forEach(column => {
+      if (column.type === 'selection') {
+        checks.push({
+          prop: SELECTION_KEY,
+          label: $t('common.check'),
+          checked: true
+        });
+      } else if (column.type === 'expand') {
+        checks.push({
+          prop: EXPAND_KEY,
+          label: $t('common.expandColumn'),
+          checked: true
+        });
+      } else if (column.type === 'index') {
+        checks.push({
+          prop: INDEX_KEY,
+          label: $t('common.index'),
+          checked: true
+        });
+      } else {
+        checks.push({
+          prop: column.prop as string,
+          label: column.label as string,
+          checked: true
+        });
+      }
+    });
+
+    return checks;
+  };
+
+  const columnChecks = ref<TableColumnCheck[]>(getColumnChecks(getColumns()));
+
+  const columns = computed(() => {
+    const cols = getColumns();
+    const columnMap = new Map<string, PartialColumnCtx<T>>();
+
+    cols.forEach(column => {
+      if (column.type === 'selection') {
+        columnMap.set(SELECTION_KEY, column);
+      } else if (column.type === 'expand') {
+        columnMap.set(EXPAND_KEY, column);
+      } else if (column.type === 'index') {
+        columnMap.set(INDEX_KEY, column);
+      } else {
+        columnMap.set(column.prop as string, column);
+      }
+    });
+
+    const filteredColumns = columnChecks.value
+      .filter(item => item.checked)
+      .map(check => columnMap.get(check.prop) as UI.TableColumn<T>);
+
+    return filteredColumns;
+  });
+
+  return {
+    columnChecks,
+    columns
+  };
+}

src/views/alova/user/hooks/use-table-operate.ts

@@ -0,0 +1,83 @@
+import { useBoolean } from '@sa/hooks';
+import type { Ref } from 'vue';
+import { ref } from 'vue';
+import { jsonClone } from '@sa/utils';
+import { $t } from '@/locales';
+
+type TableData = UI.TableData;
+interface Operations<T> {
+  delete?: (row: T) => Promise<void>;
+  batchDelete?: (rows: T[]) => Promise<void>;
+}
+
+// this hook is used to handle the table operations
+// if you choose alova, you can move this hook to the `src/hooks` to handle all list page in your project
+export default function useTableOperate<T extends TableData = TableData>(data: Ref<T[]>, operations: Operations<T>) {
+  const { bool: drawerVisible, setTrue: openDrawer, setFalse: closeDrawer } = useBoolean();
+  const { bool: deleting, setTrue: deletify, setFalse: antiDelete } = useBoolean();
+  const { bool: batchDeleting, setTrue: batchDeletify, setFalse: antiBatchDelete } = useBoolean();
+
+  const operateType = ref<UI.TableOperateType>('add');
+
+  const getRowByDataId = (id: T['id']) => data.value.find(item => item.id === id) || null;
+
+  function handleAdd() {
+    operateType.value = 'add';
+    openDrawer();
+  }
+
+  /** the editing row data */
+  const editingData: Ref<T | null> = ref(null);
+
+  function handleEdit(id: T['id']) {
+    operateType.value = 'edit';
+    editingData.value = jsonClone(getRowByDataId(id));
+
+    openDrawer();
+  }
+
+  /** the checked row keys of table */
+  const checkedRowKeys = ref<T['id'][]>([]);
+
+  /** handler to batch delete rows */
+  async function handleBatchDelete() {
+    batchDeletify();
+    try {
+      const rows = checkedRowKeys.value.map(id => getRowByDataId(id)).filter(Boolean);
+      await operations.batchDelete?.(rows as T[]);
+      window.$message?.success($t('common.deleteSuccess'));
+      checkedRowKeys.value = [];
+    } finally {
+      antiBatchDelete();
+    }
+  }
+
+  /** handler to delete row */
+  async function handleDelete(id: T['id']) {
+    deletify();
+    const row = getRowByDataId(id);
+    if (!row) return;
+    try {
+      await operations.delete?.(row);
+      window.$message?.success($t('common.deleteSuccess'));
+      checkedRowKeys.value = [];
+    } finally {
+      antiDelete();
+    }
+  }
+
+  return {
+    drawerVisible,
+    openDrawer,
+    closeDrawer,
+    operateType,
+    handleAdd,
+    editingData,
+    handleEdit,
+    checkedRowKeys,
+    deleting,
+    handleDelete,
+    batchDeleting,
+    handleBatchDelete
+  };
+}

src/views/alova/user/index.vue

@@ -0,0 +1,192 @@
+<script setup lang="tsx">
+import { ElButton, ElPopconfirm, ElTag } from 'element-plus';
+import { usePagination } from '@sa/alova/client';
+import { reactive } from 'vue';
+import { batchDeleteUser, deleteUser, fetchGetUserList } from '@/service-alova/api';
+import { $t } from '@/locales';
+import { enableStatusRecord, userGenderRecord } from '@/constants/business';
+import useCheckedColumns from './hooks/use-checked-columns';
+import useTableOperate from './hooks/use-table-operate';
+import UserOperateDrawer from './modules/user-operate-drawer.vue';
+import UserSearch from './modules/user-search.vue';
+
+const searchParams = reactive({
+  status: undefined,
+  userName: undefined,
+  userGender: undefined,
+  nickName: undefined,
+  userPhone: undefined,
+  userEmail: undefined
+});
+const { loading, data, refresh, reload, page, pageSize, pageCount, send, remove, total } = usePagination(
+  (pageNum, size) =>
+    fetchGetUserList({
+      ...searchParams,
+      current: pageNum,
+      size
+    }),
+  {
+    data: ({ records }) => records,
+
+    // trigger reload when states in `searchParams` changed
+    watchingStates: [searchParams],
+
+    // debounce of `searchParams`
+    debounce: [1000]
+  }
+);
+const getDataByPage = (newPage = 1) => {
+  page.value = newPage;
+  send(page.value, pageSize.value);
+};
+
+const handleSizeChange = (newSize: number) => {
+  pageSize.value = newSize;
+  send(page.value, newSize);
+};
+
+const {
+  drawerVisible,
+  operateType,
+  editingData,
+  handleAdd,
+  handleEdit,
+  handleDelete,
+  handleBatchDelete,
+  checkedRowKeys
+  // batchDeleting
+  // closeDrawer
+} = useTableOperate(data, {
+  async delete(row) {
+    await deleteUser(row.id);
+    remove(row);
+  },
+  async batchDelete(rows) {
+    await batchDeleteUser(rows.map(({ id }) => id));
+    remove(...rows);
+  }
+});
+
+function edit(id: number) {
+  handleEdit(id);
+}
+
+const { columnChecks, columns } = useCheckedColumns<typeof fetchGetUserList>(() => [
+  { type: 'selection', width: 48 },
+  { prop: 'userName', label: $t('page.manage.user.userName'), minWidth: 100 },
+  {
+    prop: 'userGender',
+    label: $t('page.manage.user.userGender'),
+    width: 100,
+    formatter: row => {
+      if (row.userGender === undefined) {
+        return '';
+      }
+
+      const tagMap: Record<Api.SystemManage.UserGender, UI.ThemeColor> = {
+        1: 'primary',
+        2: 'danger'
+      };
+
+      const label = $t(userGenderRecord[row.userGender]);
+
+      return <ElTag type={tagMap[row.userGender]}>{label}</ElTag>;
+    }
+  },
+  { prop: 'nickName', label: $t('page.manage.user.nickName'), minWidth: 100 },
+  { prop: 'userPhone', label: $t('page.manage.user.userPhone'), width: 120 },
+  { prop: 'userEmail', label: $t('page.manage.user.userEmail'), minWidth: 200 },
+  {
+    prop: 'status',
+    label: $t('page.manage.user.userStatus'),
+    width: 100,
+    formatter: row => {
+      if (row.status === undefined) {
+        return '';
+      }
+
+      const tagMap: Record<Api.Common.EnableStatus, UI.ThemeColor> = {
+        1: 'success',
+        2: 'warning'
+      };
+
+      const label = $t(enableStatusRecord[row.status]);
+
+      return <ElTag type={tagMap[row.status]}>{label}</ElTag>;
+    }
+  },
+  {
+    prop: 'operate',
+    label: $t('common.operate'),
+    width: 130,
+    formatter: row => (
+      <div class="flex-center gap-8px">
+        <ElButton type="primary" plain size="small" onClick={() => edit(row.id)}>
+          {$t('common.edit')}
+        </ElButton>
+        <ElPopconfirm title={$t('common.confirmDelete')} onConfirm={() => handleDelete(row.id)}>
+          {{
+            reference: () => (
+              <ElButton type="danger" plain size="small">
+                {$t('common.delete')}
+              </ElButton>
+            )
+          }}
+        </ElPopconfirm>
+      </div>
+    )
+  }
+]);
+</script>
+
+<template>
+  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+    <UserSearch v-model:model="searchParams" @search="getDataByPage" />
+    <ElCard shadow="never" :header="$t('page.manage.user.title')" 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>
+      <div class="h-[calc(100%-48px)]">
+        <ElTable
+          v-loading="loading"
+          height="100%"
+          border
+          class="sm:h-full"
+          :data="data"
+          row-key="id"
+          @selection-change="checkedRowKeys = $event"
+        >
+          <ElTableColumn v-for="col in columns" :key="col.prop" v-bind="col" />
+        </ElTable>
+        <div class="mt-20px flex justify-end">
+          <ElPagination
+            v-if="total"
+            layout="sizes,prev,pager,next"
+            :current-page="page"
+            :total="total"
+            :page-size="pageSize"
+            :page-sizes="[10, 15, 20, 25, 30]"
+            :page-count="pageCount"
+            @current-change="getDataByPage"
+            @size-change="handleSizeChange"
+          />
+        </div>
+      </div>
+      <UserOperateDrawer
+        v-model:visible="drawerVisible"
+        :operate-type="operateType"
+        :row-data="editingData"
+        @submitted="reload"
+      />
+    </ElCard>
+  </div>
+</template>
+
+<style scoped></style>

src/views/alova/user/modules/user-operate-drawer.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { computed, watch } from 'vue';
+import { useForm, useWatcher } from '@sa/alova/client';
+import { useFormRules, useForm as useUIForm } from '@/hooks/common/form';
+import type { UserModel } from '@/service-alova/api';
+import { addUser, fetchGetAllRoles, updateUser } from '@/service-alova/api';
+import { $t } from '@/locales';
+import { enableStatusOptions, userGenderOptions } from '@/constants/business';
+
+defineOptions({ name: 'UserOperateDrawer' });
+
+interface Props {
+  /** the type of operation */
+  operateType: UI.TableOperateType;
+  /** the edit row data */
+  rowData?: Api.SystemManage.User | null;
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'submitted'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const { formRef, validate, restoreValidation } = useUIForm();
+const { defaultRequiredRule } = useFormRules();
+
+const title = computed(() => {
+  const titles: Record<UI.TableOperateType, string> = {
+    add: $t('page.manage.user.addUser'),
+    edit: $t('page.manage.user.editUser')
+  };
+  return titles[props.operateType];
+});
+
+const {
+  loading: submiting,
+  reset,
+  send: submit,
+  form,
+  updateForm
+} = useForm(formData => (props.operateType === 'add' ? addUser(formData) : updateUser(formData)), {
+  initialForm: {
+    userName: '',
+    userGender: undefined,
+    nickName: '',
+    userPhone: '',
+    userEmail: '',
+    userRoles: [],
+    status: undefined
+  } as UserModel,
+  resetAfterSubmiting: true
+});
+
+type RuleKey = Extract<keyof UserModel, 'userName' | 'status'>;
+
+const rules: Record<RuleKey, App.Global.FormRule> = {
+  userName: defaultRequiredRule,
+  status: defaultRequiredRule
+};
+
+/** the enabled role options */
+const { data: roleOptionsRaw, loading } = useWatcher(fetchGetAllRoles, [visible], {
+  initialData: [],
+  middleware(_, next) {
+    return visible.value ? next() : undefined;
+  }
+});
+const roleOptions = computed<CommonType.Option<string>[]>(() => {
+  const options = roleOptionsRaw.value.map(item => ({
+    label: item.roleName,
+    value: item.roleCode
+  }));
+
+  // the mock data does not have the roleCode, so fill it
+  // if the real request, remove the following code
+  const userRoleOptions = form.value.userRoles.map(item => ({
+    label: item,
+    value: item
+  }));
+  // end
+
+  return [...userRoleOptions, ...options];
+});
+
+function handleInitModel() {
+  if (props.operateType === 'edit' && props.rowData) {
+    updateForm(props.rowData);
+  } else if (props.operateType === 'add') {
+    reset();
+  }
+}
+
+function closeDrawer() {
+  visible.value = false;
+}
+
+async function handleSubmit() {
+  await validate();
+  // request
+  await submit();
+  window.$message?.success($t('common.updateSuccess'));
+  closeDrawer();
+  emit('submitted');
+}
+
+watch(visible, () => {
+  if (visible.value) {
+    restoreValidation();
+    handleInitModel();
+  }
+});
+</script>
+
+<template>
+  <ElDrawer v-model="visible" :title="title" display-directive="show" :size="360">
+    <ElForm ref="formRef" :model="form" :rules="rules" label-position="top">
+      <ElFormItem :label="$t('page.manage.user.userName')" prop="userName">
+        <ElInput v-model="form.userName" :placeholder="$t('page.manage.user.form.userName')" />
+      </ElFormItem>
+      <ElFormItem :label="$t('page.manage.user.userGender')" prop="userGender">
+        <ElRadioGroup v-model="form.userGender">
+          <ElRadio v-for="item in userGenderOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
+        </ElRadioGroup>
+      </ElFormItem>
+      <ElFormItem :label="$t('page.manage.user.nickName')" prop="nickName">
+        <ElInput v-model="form.nickName" :placeholder="$t('page.manage.user.form.nickName')" />
+      </ElFormItem>
+      <ElFormItem :label="$t('page.manage.user.userPhone')" prop="userPhone">
+        <ElInput v-model="form.userPhone" :placeholder="$t('page.manage.user.form.userPhone')" />
+      </ElFormItem>
+      <ElFormItem :label="$t('page.manage.user.userEmail')" prop="email">
+        <ElInput v-model="form.userEmail" :placeholder="$t('page.manage.user.form.userEmail')" />
+      </ElFormItem>
+      <ElFormItem :label="$t('page.manage.user.userStatus')" prop="status">
+        <ElRadioGroup v-model="form.status">
+          <ElRadio v-for="item in enableStatusOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
+        </ElRadioGroup>
+      </ElFormItem>
+      <ElFormItem :label="$t('page.manage.user.userRole')" prop="roles">
+        <ElSelect
+          v-model="form.userRoles"
+          multiple
+          :loading="loading"
+          :placeholder="$t('page.manage.user.form.userRole')"
+        >
+          <ElOption v-for="{ label, value } in roleOptions" :key="value" :label="label" :value="value"></ElOption>
+        </ElSelect>
+      </ElFormItem>
+    </ElForm>
+    <template #footer>
+      <ElSpace :size="16">
+        <ElButton @click="closeDrawer">{{ $t('common.cancel') }}</ElButton>
+        <ElButton type="primary" :loading="submiting" @click="handleSubmit">{{ $t('common.confirm') }}</ElButton>
+      </ElSpace>
+    </template>
+  </ElDrawer>
+</template>
+
+<style scoped></style>

src/views/alova/user/modules/user-search.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { $t } from '@/locales';
+import { useForm, useFormRules } from '@/hooks/common/form';
+import { enableStatusOptions, userGenderOptions } from '@/constants/business';
+import { translateOptions } from '@/utils/common';
+
+defineOptions({ name: 'UserSearch' });
+
+interface Emits {
+  (e: 'search'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const { formRef, validate, restoreValidation } = useForm();
+
+const model = defineModel<Api.SystemManage.UserSearchParams>('model', { required: true });
+
+const initialParams = { ...model.value };
+
+type RuleKey = Extract<keyof Api.SystemManage.UserSearchParams, 'userEmail' | 'userPhone'>;
+
+const rules = computed<Record<RuleKey, App.Global.FormRule>>(() => {
+  const { patternRules } = useFormRules(); // inside computed to make locale reactive
+
+  return {
+    userEmail: patternRules.email,
+    userPhone: patternRules.phone
+  };
+});
+
+async function reset() {
+  await restoreValidation();
+  Object.assign(model.value, initialParams);
+}
+
+async function search() {
+  await validate();
+  emit('search');
+}
+</script>
+
+<template>
+  <ElCard shadow="never" size="small" class="card-wrapper">
+    <ElCollapse :default-expanded-names="['user-search']">
+      <ElCollapseItem :title="$t('common.search')" name="user-search">
+        <ElForm ref="formRef" :model="model" :rules="rules" label-position="right" :label-width="80">
+          <ElRow :gutter="24">
+            <ElCol :lg="6" :md="8" :sm="12">
+              <ElFormItem :label="$t('page.manage.user.userName')" prop="userName">
+                <ElInput v-model="model.userName" :placeholder="$t('page.manage.user.form.userName')" />
+              </ElFormItem>
+            </ElCol>
+            <ElCol :lg="6" :md="8" :sm="12">
+              <ElFormItem :label="$t('page.manage.user.userGender')" prop="userGender">
+                <ElSelect v-model="model.userGender" :placeholder="$t('page.manage.user.form.userGender')" clearable>
+                  <ElOption
+                    v-for="{ label, value } in translateOptions(userGenderOptions)"
+                    :key="value"
+                    :label="label"
+                    :value="value"
+                  ></ElOption>
+                </ElSelect>
+              </ElFormItem>
+            </ElCol>
+            <ElCol :lg="6" :md="8" :sm="12">
+              <ElFormItem :label="$t('page.manage.user.nickName')" prop="nickName">
+                <ElInput v-model="model.nickName" :placeholder="$t('page.manage.user.form.nickName')" />
+              </ElFormItem>
+            </ElCol>
+            <ElCol :lg="6" :md="8" :sm="12">
+              <ElFormItem :label="$t('page.manage.user.userPhone')" prop="userPhone">
+                <ElInput v-model="model.userPhone" :placeholder="$t('page.manage.user.form.userPhone')" />
+              </ElFormItem>
+            </ElCol>
+            <ElCol :lg="6" :md="8" :sm="12">
+              <ElFormItem :label="$t('page.manage.user.userEmail')" prop="userEmail">
+                <ElInput v-model="model.userEmail" :placeholder="$t('page.manage.user.form.userEmail')" />
+              </ElFormItem>
+            </ElCol>
+            <ElCol :lg="6" :md="8" :sm="12">
+              <ElFormItem :label="$t('page.manage.user.userGender')" prop="userStatus">
+                <ElSelect v-model="model.status" :placeholder="$t('page.manage.user.form.userStatus')" clearable>
+                  <ElOption
+                    v-for="{ label, value } in translateOptions(enableStatusOptions)"
+                    :key="value"
+                    :label="label"
+                    :value="value"
+                  ></ElOption>
+                </ElSelect>
+              </ElFormItem>
+            </ElCol>
+            <ElCol :lg="12" :md="24" :sm="24">
+              <ElSpace class="w-full justify-end" alignment="end">
+                <ElButton @click="reset">
+                  <template #icon>
+                    <icon-ic-round-refresh class="text-icon" />
+                  </template>
+                  {{ $t('common.reset') }}
+                </ElButton>
+                <ElButton type="primary" plain @click="search">
+                  <template #icon>
+                    <icon-ic-round-search class="text-icon" />
+                  </template>
+                  {{ $t('common.search') }}
+                </ElButton>
+              </ElSpace>
+            </ElCol>
+          </ElRow>
+        </ElForm>
+      </ElCollapseItem>
+    </ElCollapse>
+  </ElCard>
+</template>
+
+<style scoped></style>

src/views/manage/role/modules/role-search.vue

@@ -3,9 +3,7 @@ import { $t } from '@/locales';
 import { enableStatusOptions } from '@/constants/business';
 import { translateOptions } from '@/utils/common';
 
-defineOptions({
-  name: 'RoleSearch'
-});
+defineOptions({ name: 'RoleSearch' });
 
 interface Emits {
   (e: 'reset'): void;
@@ -29,7 +27,7 @@ function search() {
   <ElCard shadow="never" class="card-wrapper">
     <ElCollapse :default-expanded-names="['role-search']">
       <ElCollapseItem :title="$t('common.search')" name="role-search">
-        <ElForm :model="model" label-placement="left" :label-width="80">
+        <ElForm :model="model" label-position="right" :label-width="80">
           <ElRow :gutter="24">
             <ElCol :lg="6" :md="8" :sm="12">
               <ElFormItem :label="$t('page.manage.role.roleName')" prop="roleName">

src/views/manage/user/index.vue

@@ -127,6 +127,10 @@ function handleDelete(id: number) {
   onDeleted();
 }
 
+setTimeout(() => {
+  console.log(130, mobilePagination);
+});
+
 function edit(id: number) {
   handleEdit(id);
 }

src/views/manage/user/modules/user-search.vue

@@ -44,7 +44,7 @@ async function search() {
   <ElCard shadow="never" :bordered="false" size="small" class="card-wrapper">
     <ElCollapse>
       <ElCollapseItem :title="$t('common.search')" name="user-search">
-        <ElForm ref="formRef" :model="model" :rules="rules" label-placement="left" :label-width="80">
+        <ElForm ref="formRef" :model="model" :rules="rules" label-position="right" :label-width="80">
           <ElRow :gutter="24">
             <ElCol :lg="6" :md="8" :sm="12">
               <ElFormItem :label="$t('page.manage.user.userName')" prop="userName">