feat(projects): use @sa/alova & add demo.vue

package.json

@@ -51,12 +51,14 @@
     "@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:*",
     "@sa/materials": "workspace:*",
     "@sa/utils": "workspace:*",
     "@vueuse/core": "11.0.3",
+    "alova": "^3.0.16",
     "clipboard": "2.0.11",
     "dayjs": "1.11.13",
     "dhtmlx-gantt": "8.0.10",
@@ -118,8 +120,7 @@
     "vue-tsc": "2.1.6"
   },
   "simple-git-hooks": {
-    "commit-msg": "pnpm sa git-commit-verify",
+    "commit-msg": "pnpm sa git-commit-verify"
-    "pre-commit": "pnpm typecheck && pnpm lint-staged"
   },
   "lint-staged": {
     "*": "eslint --fix"

src/service/api/system-manage.ts

@@ -28,6 +28,7 @@ export function fetchGetUserList(params?: Api.SystemManage.UserSearchParams) {
     method: 'get',
     params
   });
+  // return alova.Get<Api.SystemManage.UserList>('/systemManage/getUserList', { params });
 }
 
 /** get menu list */

src/service/request/index.ts

@@ -1,10 +1,11 @@
 import type { AxiosResponse } from 'axios';
 import { BACKEND_ERROR_CODE, createFlatRequest, createRequest } from '@sa/axios';
+import { createAlovaRequest } from '@sa/alova';
 import { useAuthStore } from '@/store/modules/auth';
 import { $t } from '@/locales';
 import { localStg } from '@/utils/storage';
 import { getServiceBaseURL } from '@/utils/service';
-import { getAuthorization, handleExpiredRequest, showErrorMsg } from './shared';
+import { getAuthorization, handleExpiredRequest, handleRefreshToken, showErrorMsg } from './shared';
 import type { RequestInstanceState } from './type';
 
 const isHttpProxy = import.meta.env.DEV && import.meta.env.VITE_HTTP_PROXY === 'Y';
@@ -164,3 +165,107 @@ export const demoRequest = createRequest<App.Service.DemoResponse>(
     }
   }
 );
+
+export const alova = createAlovaRequest(
+  {
+    baseURL,
+    expiredTokenCodes: import.meta.env.VITE_SERVICE_EXPIRED_TOKEN_CODES?.split(',') || []
+  },
+  {
+    onRequest({ config }) {
+      const Authorization = getAuthorization();
+      config.headers.Authorization = Authorization;
+      config.headers.apifoxToken = 'XL299LiMEDZ0H5h3A29PxwQXdMJqWyY2';
+    },
+    async refreshTokenHandler() {
+      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 onBackendFail(response) {
+      const authStore = useAuthStore();
+      const resp = response.clone();
+      const data = await resp.json();
+
+      const responseCode = String(data.code);
+
+      function handleLogout() {
+        authStore.resetStore();
+      }
+
+      function logoutAndCleanup() {
+        handleLogout();
+        window.removeEventListener('beforeunload', handleLogout);
+
+        request.state.errMsgStack = request.state.errMsgStack.filter(msg => msg !== data.msg);
+      }
+
+      // 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();
+        return null;
+      }
+
+      // 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) && !request.state.errMsgStack?.includes(data.msg)) {
+        request.state.errMsgStack = [...(request.state.errMsgStack || []), data.msg];
+
+        // prevent the user from refreshing the page
+        window.addEventListener('beforeunload', handleLogout);
+
+        window.$dialog?.error({
+          title: $t('common.error'),
+          content: data.msg,
+          positiveText: $t('common.confirm'),
+          maskClosable: false,
+          closeOnEsc: false,
+          onPositiveClick() {
+            logoutAndCleanup();
+          },
+          onClose() {
+            logoutAndCleanup();
+          }
+        });
+
+        return null;
+      }
+      return null;
+    },
+    transformBackendResponse(response) {
+      return response.data.data;
+    },
+    onError(error) {
+      // when the request is fail, you can show error message
+
+      let message = error.message;
+      let backendErrorCode = '';
+
+      // get backend error message and code
+      if (error.code === BACKEND_ERROR_CODE) {
+        message = error.response?.data?.msg || message;
+        backendErrorCode = String(error.response?.data?.code || '');
+      }
+
+      // the error message is displayed in the modal
+      const modalLogoutCodes = import.meta.env.VITE_SERVICE_MODAL_LOGOUT_CODES?.split(',') || [];
+      if (modalLogoutCodes.includes(backendErrorCode)) {
+        return;
+      }
+
+      // when the token is expired, refresh token and retry request, so no need to show error message
+      const expiredTokenCodes = import.meta.env.VITE_SERVICE_EXPIRED_TOKEN_CODES?.split(',') || [];
+      if (expiredTokenCodes.includes(backendErrorCode)) {
+        return;
+      }
+
+      showErrorMsg(request.state, message);
+    }
+  }
+);

src/service/request/shared.ts

@@ -11,7 +11,7 @@ export function getAuthorization() {
 }
 
 /** refresh token */
-async function handleRefreshToken() {
+export async function handleRefreshToken() {
   const { resetStore } = useAuthStore();
 
   const rToken = localStg.get('refreshToken') || '';

src/views/manage/user/demo.vue

@@ -0,0 +1,211 @@
+<!-- <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> -->