xinyin025/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2025-09-29 22:56:41 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add subpackage @sa/alova, refactor all example pages with @sa/alova

Browse Source
This commit is contained in:
胡镇 2024-10-10 10:24:44 +08:00
parent 3fbf2e2a5f
commit 77e17b9bd0
27 changed files with 378 additions and 566 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

66
packages/hooks/src/use-table.ts
View File

@ -1,12 +1,13 @@
import { computed, reactive, ref } from 'vue';
import type { Ref } from 'vue';
import { jsonClone } from '@sa/utils';
import { usePagination } from '@sa/alova/client';
import type { AlovaGenerics, Method } from '@sa/alova';
import useBoolean from './use-boolean';
import useLoading from './use-loading';
export type MaybePromise<T> = T | Promise<T>;
export type ApiFn = (args: any) => Promise<unknown>;
export type ApiFn = (args: any) => Method<AlovaGenerics>;
export type TableColumnCheck = {
key: string;
@ -16,14 +17,7 @@ export type TableColumnCheck = {
export type TableDataWithIndex<T> = T & { index: number };
export type TransformedData<T> = {
data: TableDataWithIndex<T>[];
pageNum: number;
pageSize: number;
total: number;
};
export type Transformer<T, Response> = (response: Response) => TransformedData<T>;
export type Transformer<T, Response> = (response: Response) => TableDataWithIndex<T>[];
export type TableConfig<A extends ApiFn, T, C> = {
/** api function to get table data */
@ -31,7 +25,7 @@ export type TableConfig<A extends ApiFn, T, C> = {
/** api params */
apiParams?: Parameters<A>[0];
/** transform api response to table data */
transformer: Transformer<T, Awaited<ReturnType<A>>>;
transformer: Transformer<T, Awaited<ReturnType<ReturnType<A>['send']>>>;
/** columns factory */
columns: () => C[];
/**
@ -46,12 +40,6 @@ export type TableConfig<A extends ApiFn, T, C> = {
* @param columns
*/
getColumns: (columns: C[], checks: TableColumnCheck[]) => C[];
/**
* callback when response fetched
*
* @param transformed transformed data
*/
onFetched?: (transformed: TransformedData<T>) => MaybePromise<void>;
/**
* whether to get data immediately
*
@ -61,7 +49,6 @@ export type TableConfig<A extends ApiFn, T, C> = {
};
export default function useHookTable<A extends ApiFn, T, C>(config: TableConfig<A, T, C>) {
const { loading, startLoading, endLoading } = useLoading();
const { bool: empty, setBool: setEmpty } = useBoolean();
const { apiFn, apiParams, transformer, immediate = true, getColumnChecks, getColumns } = config;
@ -70,12 +57,22 @@ export default function useHookTable<A extends ApiFn, T, C>(config: TableConfig<
const allColumns = ref(config.columns()) as Ref<C[]>;
const data: Ref<TableDataWithIndex<T>[]> = ref([]);
const columnChecks: Ref<TableColumnCheck[]> = ref(getColumnChecks(config.columns()));
const columns = computed(() => getColumns(allColumns.value, columnChecks.value));
const states = usePagination<ReturnType<A> extends Method<infer AG> ? AG : never, ReturnType<typeof transformer>>(
(page, size) => apiFn({ ...formatSearchParams(searchParams), page, size }) as any,
{
immediate,
data: transformer,
total: res => res.total
}
).onSuccess(({ data }) => {
setEmpty(data.length === 0);
});
Reflect.deleteProperty(states, 'uploading');
function reloadColumns() {
allColumns.value = config.columns();
@ -89,33 +86,13 @@ export default function useHookTable<A extends ApiFn, T, C>(config: TableConfig<
}));
}
async function getData() {
startLoading();
const formattedParams = formatSearchParams(searchParams);
const response = await apiFn(formattedParams);
const transformed = transformer(response as Awaited<ReturnType<A>>);
data.value = transformed.data;
setEmpty(transformed.data.length === 0);
await config.onFetched?.(transformed);
endLoading();
}
function formatSearchParams(params: Record<string, unknown>) {
const formattedParams: Record<string, unknown> = {};
Object.entries(params).forEach(([key, value]) => {
if (value !== null && value !== undefined) {
formattedParams[key] = value;
}
});
return formattedParams;
}
@ -133,18 +110,13 @@ export default function useHookTable<A extends ApiFn, T, C>(config: TableConfig<
Object.assign(searchParams, jsonClone(apiParams));
}
if (immediate) {
getData();
}
return {
loading,
...states,
empty,
data,
columns,
columnChecks,
reloadColumns,
getData,
getData: states.send,
searchParams,
updateSearchParams,
resetSearchParams

4
pnpm-lock.yaml
View File

@ -20,9 +20,9 @@ importers:
'@iconify/vue':
specifier: 4.1.2
version: 4.1.2(vue@3.5.11(typescript@5.6.3))
'@sa/axios':
'@sa/alova':
specifier: workspace:*
version: link:packages/axios
version: link:packages/alova
'@sa/color':
specifier: workspace:*
version: link:packages/color

134
src/hooks/common/table.ts
View File

@ -7,10 +7,10 @@ import { useAppStore } from '@/store/modules/app';
import { $t } from '@/locales';
type TableData = NaiveUI.TableData;
type GetTableData<A extends NaiveUI.TableApiFn> = NaiveUI.GetTableData<A>;
type GetTableData<A extends NaiveUI.TableAlovaApiFn> = NaiveUI.GetTableData<A>;
type TableColumn<T> = NaiveUI.TableColumn<T>;
export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTableConfig<A>) {
export function useTable<A extends NaiveUI.TableAlovaApiFn>(config: NaiveUI.NaiveTableConfig<A>) {
const scope = effectScope();
const appStore = useAppStore();
@ -21,41 +21,24 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
const SELECTION_KEY = '__selection__';
const EXPAND_KEY = '__expand__';
const {
loading,
empty,
data,
columns,
columnChecks,
reloadColumns,
getData,
searchParams,
updateSearchParams,
resetSearchParams
} = useHookTable<A, GetTableData<A>, TableColumn<NaiveUI.TableDataWithIndex<GetTableData<A>>>>({
const { reloadColumns, page, pageSize, total, getData, update, ...rest } = useHookTable<
A,
GetTableData<A>,
TableColumn<NaiveUI.TableDataWithIndex<GetTableData<A>>>
>({
apiFn,
apiParams,
columns: config.columns,
transformer: res => {
const { records = [], current = 1, size = 10, total = 0 } = res.data || {};
const { records = [], current = 1, size = 10 } = res || {};
// Ensure that the size is greater than 0, If it is less than 0, it will cause paging calculation errors.
const pageSize = size <= 0 ? 10 : size;
const pageSizeValue = size <= 0 ? 10 : size;
const recordsWithIndex = records.map((item, index) => {
return {
...item,
index: (current - 1) * pageSize + index + 1
};
});
return {
data: recordsWithIndex,
pageNum: current,
pageSize,
total
};
return records.map((item, index) => ({
...item,
index: (current - 1) * pageSizeValue + index + 1
}));
},
getColumnChecks: cols => {
const checks: NaiveUI.TableColumnCheck[] = [];
@ -103,64 +86,56 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
return filteredColumns;
},
onFetched: async transformed => {
const { pageNum, pageSize, total } = transformed;
updatePagination({
page: pageNum,
pageSize,
itemCount: total
});
},
immediate
});
const pagination: PaginationProps = reactive({
page: 1,
pageSize: 10,
const paginationBase: PaginationProps = reactive({
showSizePicker: true,
pageSizes: [10, 15, 20, 25, 30],
onUpdatePage: async (page: number) => {
pagination.page = page;
updateSearchParams({
current: page,
size: pagination.pageSize!
});
getData();
onUpdatePage: async pageValue => {
page.value = pageValue;
},
onUpdatePageSize: async (pageSize: number) => {
pagination.pageSize = pageSize;
pagination.page = 1;
updateSearchParams({
current: pagination.page,
size: pageSize
});
getData();
onUpdatePageSize: async pageSizeValue => {
pageSize.value = pageSizeValue;
},
...(showTotal
? {
prefix: page => $t('datatable.itemCount', { total: page.itemCount })
prefix: pageProps => $t('datatable.itemCount', { total: pageProps.itemCount })
}
: {})
});
const pagination = computed(
() =>
<PaginationProps>{
...paginationBase,
page: page.value,
pageSize: pageSize.value,
itemCount: total.value
}
);
// this is for mobile, if the system does not support mobile, you can use `pagination` directly
const mobilePagination = computed(() => {
const p: PaginationProps = {
...pagination,
...pagination.value,
pageSlot: isMobile.value ? 3 : 9,
prefix: !isMobile.value && showTotal ? pagination.prefix : undefined
prefix: !isMobile.value && showTotal ? pagination.value.prefix : undefined
};
return p;
});
function updatePagination(update: Partial<PaginationProps>) {
Object.assign(pagination, update);
function updatePagination(updateProps: Partial<PaginationProps>) {
const innerPageStates = ['page', 'pageSize', 'itemCount'] as const;
innerPageStates.forEach(key => {
if (updateProps[key]) {
update({
[key]: updateProps[key]
});
}
});
Object.assign(paginationBase, updateProps);
}
/**
@ -169,16 +144,8 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
* @param pageNum the page number. default is 1
*/
async function getDataByPage(pageNum: number = 1) {
updatePagination({
page: pageNum
});
updateSearchParams({
current: pageNum,
size: pagination.pageSize!
});
await getData();
page.value = pageNum;
return getData();
}
scope.run(() => {
@ -195,24 +162,17 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
});
return {
loading,
empty,
data,
columns,
columnChecks,
...rest,
getData,
reloadColumns,
pagination,
mobilePagination,
updatePagination,
getData,
getDataByPage,
searchParams,
updateSearchParams,
resetSearchParams
getDataByPage
};
}
export function useTableOperate<T extends TableData = TableData>(data: Ref<T[]>, getData: () => Promise<void>) {
export function useTableOperate<T extends TableData = TableData>(data: Ref<T[]>, getData: () => Promise<void> | void) {
const { bool: drawerVisible, setTrue: openDrawer, setFalse: closeDrawer } = useBoolean();
const operateType = ref<NaiveUI.TableOperateType>('add');

2
src/layouts/modules/global-menu/modules/vertical-mix-menu.vue
View File

@ -14,7 +14,7 @@ import FirstLevelMenu from '../components/first-level-menu.vue';
import GlobalLogo from '../../global-logo/index.vue';
defineOptions({
name: 'VerticalMixMenu'
name: 'VerticalMenuMix'
});
const route = useRoute();

32
src/service/api/auth.ts
View File

@ -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,8 @@ 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 },
shareRequest: false
});
}

8
src/service/api/route.ts
View File

@ -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 } });
}

34
src/service/api/system-manage.ts
View File

@ -1,12 +1,8 @@
import { 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,41 +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');
}

158
src/service/request/index.ts
View File

@ -1,67 +1,86 @@
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, handleRefreshToken, showErrorMsg } from './shared';
import type { RequestInstanceState } from './type';
const isHttpProxy = import.meta.env.DEV && import.meta.env.VITE_HTTP_PROXY === 'Y';
const { baseURL, otherBaseURL } = getServiceBaseURL(import.meta.env, isHttpProxy);
const { baseURL } = getServiceBaseURL(import.meta.env, isHttpProxy);
export const request = createFlatRequest<App.Service.Response, RequestInstanceState>(
const state: RequestInstanceState = {
errMsgStack: []
};
export const alova = createAlovaRequest(
{
baseURL,
headers: {
apifoxToken: 'XL299LiMEDZ0H5h3A29PxwQXdMJqWyY2'
}
baseURL
},
{
async onRequest(config) {
onRequest({ config }) {
const Authorization = getAuthorization();
Object.assign(config.headers, { Authorization });
return config;
config.headers.Authorization = Authorization;
config.headers.apifoxToken = 'XL299LiMEDZ0H5h3A29PxwQXdMJqWyY2';
},
isBackendSuccess(response) {
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
return String(response.data.code) === import.meta.env.VITE_SERVICE_SUCCESS_CODE;
const resp = response.clone();
const data = await resp.json();
return String(data.code) === import.meta.env.VITE_SERVICE_SUCCESS_CODE;
},
async onBackendFail(response, instance) {
async transformBackendResponse(response) {
return (await response.clone().json()).data;
},
async onError(error, response) {
const authStore = useAuthStore();
const responseCode = String(response.data.code);
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);
request.state.errMsgStack = request.state.errMsgStack.filter(msg => msg !== response.data.msg);
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();
return null;
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) && !request.state.errMsgStack?.includes(response.data.msg)) {
request.state.errMsgStack = [...(request.state.errMsgStack || []), response.data.msg];
if (modalLogoutCodes.includes(responseCode) && !state.errMsgStack?.includes(message)) {
state.errMsgStack = [...(state.errMsgStack || []), message];
// prevent the user from refreshing the page
window.addEventListener('beforeunload', handleLogout);
window.$dialog?.error({
title: $t('common.error'),
content: response.data.msg,
content: message,
positiveText: $t('common.confirm'),
maskClosable: false,
closeOnEsc: false,
@ -72,95 +91,10 @@ export const request = createFlatRequest<App.Service.Response, RequestInstanceSt
logoutAndCleanup();
}
});
return null;
throw error;
}
// when the backend response code is in `expiredTokenCodes`, it means the token is expired, and refresh token
// the api `refreshToken` can not return error code in `expiredTokenCodes`, otherwise it will be a dead loop, should return `logoutCodes` or `modalLogoutCodes`
const expiredTokenCodes = import.meta.env.VITE_SERVICE_EXPIRED_TOKEN_CODES?.split(',') || [];
if (expiredTokenCodes.includes(responseCode)) {
const success = await handleExpiredRequest(request.state);
if (success) {
const Authorization = getAuthorization();
Object.assign(response.config.headers, { Authorization });
return instance.request(response.config) as Promise<AxiosResponse>;
}
}
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);
}
}
);
export const demoRequest = createRequest<App.Service.DemoResponse>(
{
baseURL: otherBaseURL.demo
},
{
async onRequest(config) {
const { headers } = config;
// set token
const token = localStg.get('token');
const Authorization = token ? `Bearer ${token}` : null;
Object.assign(headers, { Authorization });
return config;
},
isBackendSuccess(response) {
// when the backend response code is "200", it means the request is success
// you can change this logic by yourself
return response.data.status === '200';
},
async onBackendFail(_response) {
// when the backend response code is not "200", it means the request is fail
// for example: the token is expired, refresh token and retry request
},
transformBackendResponse(response) {
return response.data.result;
},
onError(error) {
// when the request is fail, you can show error message
let message = error.message;
// show backend error message
if (error.code === BACKEND_ERROR_CODE) {
message = error.response?.data?.message || message;
}
window.$message?.error(message);
showErrorMsg(state, message);
throw error;
}
}
);

33
src/service/request/shared.ts
View File

@ -11,34 +11,23 @@ export function getAuthorization() {
}
/** refresh token */
async function handleRefreshToken() {
export async function handleRefreshToken() {
const { resetStore } = useAuthStore();
const rToken = localStg.get('refreshToken') || '';
const { error, data } = await fetchRefreshToken(rToken);
if (!error) {
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);
return true;
} catch (error) {
resetStore();
throw error;
}
resetStore();
return false;
}
export async function handleExpiredRequest(state: RequestInstanceState) {
if (!state.refreshTokenFn) {
state.refreshTokenFn = handleRefreshToken();
}
const success = await state.refreshTokenFn;
setTimeout(() => {
state.refreshTokenFn = null;
}, 1000);
return success;
}
export function showErrorMsg(state: RequestInstanceState, message: string) {

2
src/service/request/type.ts
View File

@ -1,6 +1,4 @@
export interface RequestInstanceState {
/** whether the request is refreshing token */
refreshTokenFn: Promise<boolean> | null;
/** the request error message stack */
errMsgStack: string[];
}

16
src/store/modules/auth/index.ts
View File

@ -63,9 +63,8 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
async function login(userName: string, password: string, redirect = true) {
startLoading();
const { data: loginToken, error } = await fetchLogin(userName, password);
if (!error) {
try {
const loginToken = await fetchLogin(userName, password);
const pass = await loginByToken(loginToken);
if (pass) {
@ -81,7 +80,7 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
});
}
}
} else {
} catch {
resetStore();
}
@ -106,16 +105,15 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
}
async function getUserInfo() {
const { data: info, error } = await fetchGetUserInfo();
if (!error) {
try {
const info = await fetchGetUserInfo();
// update store
Object.assign(userInfo, info);
return true;
} catch {
return false;
}
return false;
}
async function initUserInfo() {

17
src/store/modules/route/index.ts
View File

@ -201,11 +201,10 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
if (authRouteMode.value === 'static') {
addConstantRoutes(staticRoute.constantRoutes);
} else {
const { data, error } = await fetchGetConstantRoutes();
if (!error) {
try {
const data = await fetchGetConstantRoutes();
addConstantRoutes(data);
} else {
} catch {
// if fetch constant routes failed, use static constant routes
addConstantRoutes(staticRoute.constantRoutes);
}
@ -246,9 +245,9 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
/** Init dynamic auth route */
async function initDynamicAuthRoute() {
const { data, error } = await fetchGetUserRoutes();
try {
const data = await fetchGetUserRoutes();
if (!error) {
const { routes, home } = data;
addAuthRoutes(routes);
@ -260,7 +259,7 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
handleUpdateRootRouteRedirect(home);
setIsInitAuthRoute(true);
} else {
} catch {
// if fetch user routes failed, reset store
authStore.resetStore();
}
@ -340,9 +339,7 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
return isRouteExistByRouteName(routeName, staticAuthRoutes);
}
const { data } = await fetchIsRouteExist(routeName);
return data;
return fetchIsRouteExist(routeName);
}
/**

10
src/store/modules/route/shared.ts
View File

@ -19,7 +19,7 @@ export function filterAuthRoutesByRoles(routes: ElegantConstRoute[], roles: stri
* @param route Auth route
* @param roles Roles
*/
function filterAuthRouteByRoles(route: ElegantConstRoute, roles: string[]): ElegantConstRoute[] {
function filterAuthRouteByRoles(route: ElegantConstRoute, roles: string[]) {
const routeRoles = (route.meta && route.meta.roles) || [];
// if the route's "roles" is empty, then it is allowed to access
@ -34,11 +34,6 @@ function filterAuthRouteByRoles(route: ElegantConstRoute, roles: string[]): Eleg
filterRoute.children = filterRoute.children.flatMap(item => filterAuthRouteByRoles(item, roles));
}
// Exclude the route if it has no children after filtering
if (filterRoute.children?.length === 0) {
return [];
}
return hasPermission || isEmptyRoles ? [filterRoute] : [];
}
@ -288,7 +283,8 @@ export function getBreadcrumbsByRoute(
for (const menu of menus) {
if (menu.key === key) {
return [transformMenuToBreadcrumb(menu)];
const breadcrumbMenu = menu;
return [transformMenuToBreadcrumb(breadcrumbMenu)];
}
if (menu.key === activeKey) {

1
src/typings/components.d.ts vendored
View File

@ -87,6 +87,7 @@ declare module 'vue' {
NSelect: typeof import('naive-ui')['NSelect']
NSkeleton: typeof import('naive-ui')['NSkeleton']
NSpace: typeof import('naive-ui')['NSpace']
NSpin: typeof import('naive-ui')['NSpin']
NStatistic: typeof import('naive-ui')['NStatistic']
NSwitch: typeof import('naive-ui')['NSwitch']
NTab: typeof import('naive-ui')['NTab']

8
src/typings/global.d.ts vendored
View File

@ -14,6 +14,14 @@ declare global {
$notification?: import('naive-ui').NotificationProviderInst;
}
interface ViewTransition {
ready: Promise<void>;
}
export interface Document {
startViewTransition?: (callback: () => Promise<void> | void) => ViewTransition;
}
/** Build time of the project */
export const BUILD_TIME: string;
}

9
src/typings/naive-ui.d.ts vendored
View File

@ -9,7 +9,6 @@ declare namespace NaiveUI {
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>;
/**
* the custom column key
@ -26,9 +25,9 @@ declare namespace NaiveUI {
type TableColumn<T> = TableColumnWithKey<T> | DataTableSelectionColumn<T> | DataTableExpandColumn<T>;
type TableApiFn<T = any, R = Api.Common.CommonSearchParams> = (
type TableAlovaApiFn<T = any, R = Api.Common.CommonSearchParams> = (
params: R
) => Promise<FlatResponseData<Api.Common.PaginatingQueryRecord<T>>>;
) => import('@sa/alova').Method<import('@sa/alova').AlovaGenerics<Api.Common.PaginatingQueryRecord<T>>>;
/**
* the type of table operation
@ -38,9 +37,9 @@ declare namespace NaiveUI {
*/
type TableOperateType = 'add' | 'edit';
type GetTableData<A extends TableApiFn> = A extends TableApiFn<infer T> ? T : never;
type GetTableData<A extends TableAlovaApiFn> = A extends TableAlovaApiFn<infer T> ? T : never;
type NaiveTableConfig<A extends TableApiFn> = Pick<
type NaiveTableConfig<A extends TableAlovaApiFn> = Pick<
import('@sa/hooks').TableConfig<A, GetTableData<A>, TableColumn<TableDataWithIndex<GetTableData<A>>>>,
'apiFn' | 'apiParams' | 'columns' | 'immediate'
> & {

2
src/views/_builtin/login/modules/code-login.vue
View File

@ -40,7 +40,7 @@ async function handleSubmit() {
</script>
<template>
<NForm ref="formRef" :model="model" :rules="rules" size="large" :show-label="false" @keyup.enter="handleSubmit">
<NForm ref="formRef" :model="model" :rules="rules" size="large" :show-label="false">
<NFormItem path="phone">
<NInput v-model:value="model.phone" :placeholder="$t('page.login.common.phonePlaceholder')" />
</NFormItem>

2
src/views/_builtin/login/modules/pwd-login.vue
View File

@ -75,7 +75,7 @@ async function handleAccountLogin(account: Account) {
</script>
<template>
<NForm ref="formRef" :model="model" :rules="rules" size="large" :show-label="false" @keyup.enter="handleSubmit">
<NForm ref="formRef" :model="model" :rules="rules" size="large" :show-label="false">
<NFormItem path="userName">
<NInput v-model:value="model.userName" :placeholder="$t('page.login.common.userNamePlaceholder')" />
</NFormItem>

2
src/views/_builtin/login/modules/register.vue
View File

@ -46,7 +46,7 @@ async function handleSubmit() {
</script>
<template>
<NForm ref="formRef" :model="model" :rules="rules" size="large" :show-label="false" @keyup.enter="handleSubmit">
<NForm ref="formRef" :model="model" :rules="rules" size="large" :show-label="false">
<NFormItem path="phone">
<NInput v-model:value="model.phone" :placeholder="$t('page.login.common.phonePlaceholder')" />
</NFormItem>

2
src/views/_builtin/login/modules/reset-pwd.vue
View File

@ -45,7 +45,7 @@ async function handleSubmit() {
</script>
<template>
<NForm ref="formRef" :model="model" :rules="rules" size="large" :show-label="false" @keyup.enter="handleSubmit">
<NForm ref="formRef" :model="model" :rules="rules" size="large" :show-label="false">
<NFormItem path="phone">
<NInput v-model:value="model.phone" :placeholder="$t('page.login.common.phonePlaceholder')" />
</NFormItem>

23
src/views/manage/menu/index.vue
View File

@ -3,7 +3,7 @@ import { ref } from 'vue';
import type { Ref } from 'vue';
import { NButton, NPopconfirm, NTag } from 'naive-ui';
import { useBoolean } from '@sa/hooks';
import { fetchGetAllPages, fetchGetMenuList } from '@/service/api';
import { fetchGetMenuList } from '@/service/api';
import { useAppStore } from '@/store/modules/app';
import { useTable, useTableOperate } from '@/hooks/common/table';
import { $t } from '@/locales';
@ -18,7 +18,7 @@ const { bool: visible, setTrue: openModal } = useBoolean();
const wrapperRef = ref<HTMLElement | null>(null);
const { columns, columnChecks, data, loading, pagination, getData, getDataByPage } = useTable({
const { columns, columnChecks, data, loading, pagination, refresh, reload, getDataByPage } = useTable({
apiFn: fetchGetMenuList,
columns: () => [
{
@ -170,7 +170,7 @@ const { columns, columnChecks, data, loading, pagination, getData, getDataByPage
]
});
const { checkedRowKeys, onBatchDeleted, onDeleted } = useTableOperate(data, getData);
const { checkedRowKeys, onBatchDeleted, onDeleted } = useTableOperate(data, reload);
const operateType = ref<OperateType>('add');
@ -210,20 +210,6 @@ function handleAddChildMenu(item: Api.SystemManage.Menu) {
openModal();
}
const allPages = ref<string[]>([]);
async function getAllPages() {
const { data: pages } = await fetchGetAllPages();
allPages.value = pages || [];
}
function init() {
getAllPages();
}
// init
init();
</script>
<template>
@ -236,7 +222,7 @@ init();
:loading="loading"
@add="handleAdd"
@delete="handleBatchDelete"
@refresh="getData"
@refresh="refresh"
/>
</template>
<NDataTable
@ -256,7 +242,6 @@ init();
v-model:visible="visible"
:operate-type="operateType"
:row-data="editingData"
:all-pages="allPages"
@submitted="getDataByPage"
/>
</NCard>

43
src/views/manage/menu/modules/menu-operate-modal.vue
View File

@ -1,12 +1,13 @@
<script setup lang="tsx">
import { computed, reactive, ref, watch } from 'vue';
import { computed, reactive, watch } from 'vue';
import type { SelectOption } from 'naive-ui';
import { useWatcher } from '@sa/alova/client';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { $t } from '@/locales';
import { enableStatusOptions, menuIconTypeOptions, menuTypeOptions } from '@/constants/business';
import SvgIcon from '@/components/custom/svg-icon.vue';
import { getLocalIcons } from '@/utils/icon';
import { fetchGetAllRoles } from '@/service/api';
import { fetchGetAllPages } from '@/service/api';
import {
getLayoutAndPage,
getPathParamFromRoutePath,
@ -26,8 +27,6 @@ interface Props {
operateType: OperateType;
/** the edit menu data or the parent menu data when adding a child menu */
rowData?: Api.SystemManage.Menu | null;
/** all pages */
allPages: string[];
}
const props = defineProps<Props>();
@ -138,8 +137,14 @@ const showLayout = computed(() => model.parentId === 0);
const showPage = computed(() => model.menuType === '2');
const { data: allPagesRaw, loading: loadingPages } = useWatcher(fetchGetAllPages, [visible], {
initialData: [],
middleware(_, next) {
return visible.value ? next() : undefined;
}
});
const pageOptions = computed(() => {
const allPages = [...props.allPages];
const allPages = [...allPagesRaw.value];
if (model.routeName && !allPages.includes(model.routeName)) {
allPages.unshift(model.routeName);
@ -165,20 +170,18 @@ const layoutOptions: CommonType.Option[] = [
];
/** the enabled role options */
const roleOptions = ref<CommonType.Option<string>[]>([]);
async function getRoleOptions() {
const { error, data } = await fetchGetAllRoles();
if (!error) {
const options = data.map(item => ({
label: item.roleName,
value: item.roleCode
}));
roleOptions.value = [...options];
}
}
// const { data: roleOptionsRaw, loading } = useWatcher(fetchGetAllRoles, [visible], {
// initialData: [],
// middleware(_, next) {
// return visible.value ? next() : undefined;
// }
// });
// const roleOptions = computed<CommonType.Option<string>[]>(() => {
// return roleOptionsRaw.value.map(item => ({
// label: item.roleName,
// value: item.roleCode
// }));
// });
function handleInitModel() {
Object.assign(model, createDefaultModel());
@ -266,7 +269,6 @@ watch(visible, () => {
if (visible.value) {
handleInitModel();
restoreValidation();
getRoleOptions();
}
});
@ -311,6 +313,7 @@ watch(
<NFormItemGi v-if="showPage" span="24 m:12" :label="$t('page.manage.menu.page')" path="page">
<NSelect
v-model:value="model.page"
:loading="loadingPages"
:options="pageOptions"
:placeholder="$t('page.manage.menu.form.page')"
/>

7
src/views/manage/role/index.vue
View File

@ -15,7 +15,8 @@ const {
columnChecks,
data,
loading,
getData,
reload,
refresh,
getDataByPage,
mobilePagination,
searchParams,
@ -116,7 +117,7 @@ const {
onBatchDeleted,
onDeleted
// closeDrawer
} = useTableOperate(data, getData);
} = useTableOperate(data, reload);
async function handleBatchDelete() {
// request
@ -148,7 +149,7 @@ function edit(id: number) {
:loading="loading"
@add="handleAdd"
@delete="handleBatchDelete"
@refresh="getData"
@refresh="refresh"
/>
</template>
<NDataTable

45
src/views/manage/role/modules/menu-auth-modal.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts">
import { computed, shallowRef, watch } from 'vue';
import { useWatcher } from '@sa/alova/client';
import { $t } from '@/locales';
import { fetchGetAllPages, fetchGetMenuTree } from '@/service/api';
@ -38,16 +39,12 @@ async function updateHome(val: string) {
home.value = val;
}
const pages = shallowRef<string[]>([]);
async function getPages() {
const { error, data } = await fetchGetAllPages();
if (!error) {
pages.value = data;
const { data: pages, loading: loadingPages } = useWatcher(fetchGetAllPages, [visible], {
initialData: [],
middleware(_, next) {
return visible.value ? next() : undefined;
}
}
});
const pageSelectOptions = computed(() => {
const opts: CommonType.Option[] = pages.value.map(page => ({
label: page,
@ -57,15 +54,12 @@ const pageSelectOptions = computed(() => {
return opts;
});
const tree = shallowRef<Api.SystemManage.MenuTree[]>([]);
async function getTree() {
const { error, data } = await fetchGetMenuTree();
if (!error) {
tree.value = data;
const { data: tree, loading: loadingTree } = useWatcher(fetchGetMenuTree, [visible], {
initialData: [],
middleware(_, next) {
return visible.value ? next() : undefined;
}
}
});
const checks = shallowRef<number[]>([]);
@ -86,8 +80,6 @@ function handleSubmit() {
function init() {
getHome();
getPages();
getTree();
getChecks();
}
@ -102,7 +94,14 @@ watch(visible, val => {
<NModal v-model:show="visible" :title="title" preset="card" class="w-480px">
<div class="flex-y-center gap-16px pb-12px">
<div>{{ $t('page.manage.menu.home') }}</div>
<NSelect :value="home" :options="pageSelectOptions" size="small" class="w-160px" @update:value="updateHome" />
<NSelect
:loading="loadingPages"
:value="home"
:options="pageSelectOptions"
size="small"
class="w-160px"
@update:value="updateHome"
/>
</div>
<NTree
v-model:checked-keys="checks"
@ -113,7 +112,11 @@ watch(visible, val => {
virtual-scroll
block-line
class="h-280px"
/>
>
<template v-if="loadingTree" #empty>
<NSpin size="small"></NSpin>
</template>
</NTree>
<template #footer>
<NSpace justify="end">
<NButton size="small" class="mt-16px" @click="closeModal">

235
src/views/manage/user/index.vue
View File

@ -10,132 +10,121 @@ import UserSearch from './modules/user-search.vue';
const appStore = useAppStore();
const {
columns,
columnChecks,
data,
getData,
getDataByPage,
loading,
mobilePagination,
searchParams,
resetSearchParams
} = useTable({
apiFn: fetchGetUserList,
showTotal: true,
apiParams: {
current: 1,
size: 10,
// if you want to use the searchParams in Form, you need to define the following properties, and the value is null
// the value can not be undefined, otherwise the property in Form will not be reactive
status: null,
userName: null,
userGender: null,
nickName: null,
userPhone: null,
userEmail: null
},
columns: () => [
{
type: 'selection',
align: 'center',
width: 48
const { columns, columnChecks, data, refresh, reload, loading, mobilePagination, searchParams, resetSearchParams } =
useTable({
apiFn: fetchGetUserList,
showTotal: true,
apiParams: {
// if you want to use the searchParams in Form, you need to define the following properties, and the value is null
// the value can not be undefined, otherwise the property in Form will not be reactive
status: null,
userName: null,
userGender: null,
nickName: null,
userPhone: null,
userEmail: null
},
{
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;
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.SystemManage.UserGender, NaiveUI.ThemeColor> = {
1: 'primary',
2: 'error'
};
const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
1: 'success',
2: 'warning'
};
const label = $t(userGenderRecord[row.userGender]);
const label = $t(enableStatusRecord[row.status]);
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;
return <NTag type={tagMap[row.status]}>{label}</NTag>;
}
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>
)
}
},
{
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 {
drawerVisible,
@ -147,7 +136,7 @@ const {
onBatchDeleted,
onDeleted
// closeDrawer
} = useTableOperate(data, getData);
} = useTableOperate(data, reload);
async function handleBatchDelete() {
// request
@ -170,7 +159,7 @@ function edit(id: number) {
<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="getDataByPage" />
<UserSearch v-model:model="searchParams" @reset="resetSearchParams" @search="reload" />
<NCard :title="$t('page.manage.user.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
<template #header-extra>
<TableHeaderOperation
@ -179,7 +168,7 @@ function edit(id: number) {
:loading="loading"
@add="handleAdd"
@delete="handleBatchDelete"
@refresh="getData"
@refresh="refresh"
/>
</template>
<NDataTable
@ -199,7 +188,7 @@ function edit(id: number) {
v-model:visible="drawerVisible"
:operate-type="operateType"
:row-data="editingData"
@submitted="getDataByPage"
@submitted="reload"
/>
</NCard>
</div>

47
src/views/manage/user/modules/user-operate-drawer.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue';
import { computed, reactive, watch } from 'vue';
import { useWatcher } from '@sa/alova/client';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { fetchGetAllRoles } from '@/service/api';
import { $t } from '@/locales';
@ -66,28 +67,28 @@ const rules: Record<RuleKey, App.Global.FormRule> = {
};
/** the enabled role options */
const roleOptions = ref<CommonType.Option<string>[]>([]);
async function getRoleOptions() {
const { error, data } = await fetchGetAllRoles();
if (!error) {
const options = data.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 = model.userRoles.map(item => ({
label: item,
value: item
}));
// end
roleOptions.value = [...userRoleOptions, ...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 = model.userRoles.map(item => ({
label: item,
value: item
}));
// end
return [...userRoleOptions, ...options];
});
function handleInitModel() {
Object.assign(model, createDefaultModel());
@ -113,7 +114,6 @@ watch(visible, () => {
if (visible.value) {
handleInitModel();
restoreValidation();
getRoleOptions();
}
});
</script>
@ -148,6 +148,7 @@ watch(visible, () => {
<NSelect
v-model:value="model.userRoles"
multiple
:loading="loading"
:options="roleOptions"
:placeholder="$t('page.manage.user.form.userRole')"
/>