style: 代码格式化与统一样式变量
This commit is contained in:
Ray.Hao
@@ -1,4 +1,4 @@
|
||||
import { ref, computed } from "vue"
|
||||
import { ref, computed } from "vue";
|
||||
|
||||
/**
|
||||
* 加载状态管理
|
||||
@@ -26,63 +26,63 @@ import { ref, computed } from "vue"
|
||||
|
||||
export interface UseLoadingOptions {
|
||||
/** 是否使用全局单例，默认 true */
|
||||
singleton?: boolean
|
||||
singleton?: boolean;
|
||||
/** 初始加载状态，默认 false */
|
||||
initial?: boolean
|
||||
initial?: boolean;
|
||||
/** 加载提示消息 */
|
||||
message?: string
|
||||
message?: string;
|
||||
}
|
||||
|
||||
export interface UseLoadingReturn {
|
||||
/** 是否处于加载状态 */
|
||||
isLoading: ReturnType<typeof computed<boolean>>
|
||||
isLoading: ReturnType<typeof computed<boolean>>;
|
||||
/** 加载计数（支持并发） */
|
||||
loadingCount: ReturnType<typeof ref<number>>
|
||||
loadingCount: ReturnType<typeof ref<number>>;
|
||||
/** 当前加载消息 */
|
||||
message: ReturnType<typeof ref<string>>
|
||||
message: ReturnType<typeof ref<string>>;
|
||||
/** 开始加载 */
|
||||
start: (msg?: string) => void
|
||||
start: (msg?: string) => void;
|
||||
/** 结束加载 */
|
||||
stop: () => void
|
||||
stop: () => void;
|
||||
/** 包装异步函数，自动管理加载状态 */
|
||||
wrap: <T>(promise: Promise<T>) => Promise<T>
|
||||
wrap: <T>(promise: Promise<T>) => Promise<T>;
|
||||
/** 设置加载消息 */
|
||||
setMessage: (msg: string) => void
|
||||
setMessage: (msg: string) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建加载状态实例
|
||||
*/
|
||||
function createLoadingState(options: UseLoadingOptions = {}) {
|
||||
const { initial = false, message: initialMessage = "" } = options
|
||||
const { message: initialMessage = "" } = options;
|
||||
|
||||
const loadingCount = ref(0)
|
||||
const message = ref(initialMessage)
|
||||
const loadingCount = ref(0);
|
||||
const message = ref(initialMessage);
|
||||
|
||||
const isLoading = computed(() => loadingCount.value > 0)
|
||||
const isLoading = computed(() => loadingCount.value > 0);
|
||||
|
||||
/**
|
||||
* 开始加载
|
||||
* @param msg 加载提示消息
|
||||
*/
|
||||
const start = (msg?: string): void => {
|
||||
loadingCount.value++
|
||||
loadingCount.value++;
|
||||
if (msg) {
|
||||
message.value = msg
|
||||
message.value = msg;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 结束加载
|
||||
*/
|
||||
const stop = (): void => {
|
||||
if (loadingCount.value > 0) {
|
||||
loadingCount.value--
|
||||
loadingCount.value--;
|
||||
}
|
||||
if (loadingCount.value === 0) {
|
||||
message.value = ""
|
||||
message.value = "";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 包装异步函数，自动管理加载状态
|
||||
@@ -90,20 +90,20 @@ function createLoadingState(options: UseLoadingOptions = {}) {
|
||||
*/
|
||||
const wrap = async <T>(promise: Promise<T>): Promise<T> => {
|
||||
try {
|
||||
start()
|
||||
return await promise
|
||||
start();
|
||||
return await promise;
|
||||
} finally {
|
||||
stop()
|
||||
stop();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置加载消息
|
||||
* @param msg 消息内容
|
||||
*/
|
||||
const setMessage = (msg: string): void => {
|
||||
message.value = msg
|
||||
}
|
||||
message.value = msg;
|
||||
};
|
||||
|
||||
return {
|
||||
isLoading,
|
||||
@@ -113,11 +113,11 @@ function createLoadingState(options: UseLoadingOptions = {}) {
|
||||
stop,
|
||||
wrap,
|
||||
setMessage,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/** 全局单例实例 */
|
||||
let loadingInstance: UseLoadingReturn | null = null
|
||||
let loadingInstance: UseLoadingReturn | null = null;
|
||||
|
||||
/**
|
||||
* 加载状态管理 Hook
|
||||
@@ -128,14 +128,14 @@ let loadingInstance: UseLoadingReturn | null = null
|
||||
* @param options 配置选项
|
||||
*/
|
||||
export function useLoading(options?: UseLoadingOptions): UseLoadingReturn {
|
||||
const { singleton = true } = options ?? {}
|
||||
const { singleton = true } = options ?? {};
|
||||
|
||||
if (singleton) {
|
||||
if (!loadingInstance) {
|
||||
loadingInstance = createLoadingState(options)
|
||||
loadingInstance = createLoadingState(options);
|
||||
}
|
||||
return loadingInstance
|
||||
return loadingInstance;
|
||||
}
|
||||
|
||||
return createLoadingState(options)
|
||||
return createLoadingState(options);
|
||||
}
|
||||
|
||||
@@ -72,7 +72,7 @@ export interface UseNavbarReturn {
|
||||
* @param options 配置选项
|
||||
*/
|
||||
export function useNavbar(options: UseNavbarOptions = {}): UseNavbarReturn {
|
||||
const { navBarHeight = 44, hasTabbar = false } = options;
|
||||
const { navBarHeight = 44 } = options;
|
||||
|
||||
// 状态栏高度
|
||||
const statusBarHeight = ref(0);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ref, computed, shallowRef, type Ref, type ComputedRef } from "vue"
|
||||
import { ref, computed, shallowRef, type Ref, type ComputedRef } from "vue";
|
||||
|
||||
/**
|
||||
* 请求状态管理
|
||||
@@ -24,36 +24,36 @@ import { ref, computed, shallowRef, type Ref, type ComputedRef } from "vue"
|
||||
|
||||
export interface UseRequestOptions<T> {
|
||||
/** 是否立即执行，默认 false */
|
||||
immediate?: boolean
|
||||
immediate?: boolean;
|
||||
/** 初始数据 */
|
||||
initialData?: T | null
|
||||
initialData?: T | null;
|
||||
/** 请求前的回调 */
|
||||
onBefore?: () => void
|
||||
onBefore?: () => void;
|
||||
/** 请求成功的回调 */
|
||||
onSuccess?: (data: T) => void
|
||||
onSuccess?: (data: T) => void;
|
||||
/** 请求失败的回调 */
|
||||
onError?: (error: Error) => void
|
||||
onError?: (error: Error) => void;
|
||||
/** 请求完成的回调（无论成功失败） */
|
||||
onFinally?: () => void
|
||||
onFinally?: () => void;
|
||||
/** 是否重置数据在重新请求时，默认 false */
|
||||
resetOnExecute?: boolean
|
||||
resetOnExecute?: boolean;
|
||||
}
|
||||
|
||||
export interface UseRequestReturn<T> {
|
||||
/** 响应数据 */
|
||||
data: Ref<T | null>
|
||||
data: Ref<T | null>;
|
||||
/** 是否正在加载 */
|
||||
loading: ComputedRef<boolean>
|
||||
loading: ComputedRef<boolean>;
|
||||
/** 错误信息 */
|
||||
error: Ref<Error | null>
|
||||
error: Ref<Error | null>;
|
||||
/** 是否已请求过（用于区分初始状态和请求后状态） */
|
||||
hasExecuted: Ref<boolean>
|
||||
hasExecuted: Ref<boolean>;
|
||||
/** 执行请求 */
|
||||
execute: () => Promise<T | null>
|
||||
execute: () => Promise<T | null>;
|
||||
/** 刷新数据（重新执行请求） */
|
||||
refresh: () => Promise<T | null>
|
||||
refresh: () => Promise<T | null>;
|
||||
/** 重置状态 */
|
||||
reset: () => void
|
||||
reset: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -74,15 +74,15 @@ export function useRequest<T>(
|
||||
onError,
|
||||
onFinally,
|
||||
resetOnExecute = false,
|
||||
} = options
|
||||
} = options;
|
||||
|
||||
// 使用 shallowRef 避免深层响应式，提升性能
|
||||
const data = shallowRef<T | null>(initialData) as Ref<T | null>
|
||||
const error = ref<Error | null>(null)
|
||||
const loadingCount = ref(0)
|
||||
const hasExecuted = ref(false)
|
||||
const data = shallowRef<T | null>(initialData) as Ref<T | null>;
|
||||
const error = ref<Error | null>(null);
|
||||
const loadingCount = ref(0);
|
||||
const hasExecuted = ref(false);
|
||||
|
||||
const loading = computed(() => loadingCount.value > 0)
|
||||
const loading = computed(() => loadingCount.value > 0);
|
||||
|
||||
/**
|
||||
* 执行请求
|
||||
@@ -90,51 +90,51 @@ export function useRequest<T>(
|
||||
const execute = async (): Promise<T | null> => {
|
||||
// 重置状态
|
||||
if (resetOnExecute) {
|
||||
data.value = initialData
|
||||
error.value = null
|
||||
data.value = initialData;
|
||||
error.value = null;
|
||||
}
|
||||
|
||||
loadingCount.value++
|
||||
hasExecuted.value = true
|
||||
loadingCount.value++;
|
||||
hasExecuted.value = true;
|
||||
|
||||
try {
|
||||
onBefore?.()
|
||||
const result = await requestFn()
|
||||
data.value = result
|
||||
error.value = null
|
||||
onSuccess?.(result)
|
||||
return result
|
||||
onBefore?.();
|
||||
const result = await requestFn();
|
||||
data.value = result;
|
||||
error.value = null;
|
||||
onSuccess?.(result);
|
||||
return result;
|
||||
} catch (e) {
|
||||
const err = e instanceof Error ? e : new Error(String(e))
|
||||
error.value = err
|
||||
onError?.(err)
|
||||
return null
|
||||
const err = e instanceof Error ? e : new Error(String(e));
|
||||
error.value = err;
|
||||
onError?.(err);
|
||||
return null;
|
||||
} finally {
|
||||
loadingCount.value--
|
||||
onFinally?.()
|
||||
loadingCount.value--;
|
||||
onFinally?.();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 刷新数据
|
||||
*/
|
||||
const refresh = async (): Promise<T | null> => {
|
||||
return execute()
|
||||
}
|
||||
return execute();
|
||||
};
|
||||
|
||||
/**
|
||||
* 重置状态
|
||||
*/
|
||||
const reset = (): void => {
|
||||
data.value = initialData
|
||||
error.value = null
|
||||
loadingCount.value = 0
|
||||
hasExecuted.value = false
|
||||
}
|
||||
data.value = initialData;
|
||||
error.value = null;
|
||||
loadingCount.value = 0;
|
||||
hasExecuted.value = false;
|
||||
};
|
||||
|
||||
// 立即执行
|
||||
if (immediate) {
|
||||
execute()
|
||||
execute();
|
||||
}
|
||||
|
||||
return {
|
||||
@@ -145,7 +145,7 @@ export function useRequest<T>(
|
||||
execute,
|
||||
refresh,
|
||||
reset,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -167,42 +167,42 @@ export function useRequest<T>(
|
||||
*/
|
||||
|
||||
export interface PaginationParams {
|
||||
pageNum: number
|
||||
pageSize: number
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
}
|
||||
|
||||
export interface UsePaginationOptions<T> {
|
||||
/** 每页条数，默认 10 */
|
||||
pageSize?: number
|
||||
pageSize?: number;
|
||||
/** 初始数据 */
|
||||
initialData?: T[]
|
||||
initialData?: T[];
|
||||
/** 请求成功的回调 */
|
||||
onSuccess?: (list: T[], total: number) => void
|
||||
onSuccess?: (list: T[], total: number) => void;
|
||||
/** 请求失败的回调 */
|
||||
onError?: (error: Error) => void
|
||||
onError?: (error: Error) => void;
|
||||
}
|
||||
|
||||
export interface UsePaginationReturn<T> {
|
||||
/** 数据列表 */
|
||||
list: Ref<T[]>
|
||||
list: Ref<T[]>;
|
||||
/** 是否正在加载 */
|
||||
loading: ComputedRef<boolean>
|
||||
loading: ComputedRef<boolean>;
|
||||
/** 错误信息 */
|
||||
error: Ref<Error | null>
|
||||
error: Ref<Error | null>;
|
||||
/** 是否还有更多数据 */
|
||||
hasMore: ComputedRef<boolean>
|
||||
hasMore: ComputedRef<boolean>;
|
||||
/** 当前页码 */
|
||||
pageNum: Ref<number>
|
||||
pageNum: Ref<number>;
|
||||
/** 总条数 */
|
||||
total: Ref<number>
|
||||
total: Ref<number>;
|
||||
/** 是否为空 */
|
||||
isEmpty: ComputedRef<boolean>
|
||||
isEmpty: ComputedRef<boolean>;
|
||||
/** 加载更多 */
|
||||
loadMore: () => Promise<T[]>
|
||||
loadMore: () => Promise<T[]>;
|
||||
/** 刷新（从第一页开始） */
|
||||
refresh: () => Promise<T[]>
|
||||
refresh: () => Promise<T[]>;
|
||||
/** 重置 */
|
||||
reset: () => void
|
||||
reset: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -215,17 +215,17 @@ export function usePagination<T>(
|
||||
requestFn: (params: PaginationParams) => Promise<PageResult<T[]>>,
|
||||
options: UsePaginationOptions<T> = {}
|
||||
): UsePaginationReturn<T> {
|
||||
const { pageSize = 10, initialData = [], onSuccess, onError } = options
|
||||
const { pageSize = 10, initialData = [], onSuccess, onError } = options;
|
||||
|
||||
const list = ref<T[]>(initialData) as Ref<T[]>
|
||||
const loadingCount = ref(0)
|
||||
const error = ref<Error | null>(null)
|
||||
const pageNum = ref(1)
|
||||
const total = ref(0)
|
||||
const list = ref<T[]>(initialData) as Ref<T[]>;
|
||||
const loadingCount = ref(0);
|
||||
const error = ref<Error | null>(null);
|
||||
const pageNum = ref(1);
|
||||
const total = ref(0);
|
||||
|
||||
const loading = computed(() => loadingCount.value > 0)
|
||||
const hasMore = computed(() => list.value.length < total.value)
|
||||
const isEmpty = computed(() => list.value.length === 0 && !loading.value)
|
||||
const loading = computed(() => loadingCount.value > 0);
|
||||
const hasMore = computed(() => list.value.length < total.value);
|
||||
const isEmpty = computed(() => list.value.length === 0 && !loading.value);
|
||||
|
||||
/**
|
||||
* 加载更多
|
||||
@@ -233,59 +233,59 @@ export function usePagination<T>(
|
||||
const loadMore = async (): Promise<T[]> => {
|
||||
// 如果正在加载或没有更多数据，直接返回
|
||||
if (loading.value || !hasMore.value) {
|
||||
return list.value
|
||||
return list.value;
|
||||
}
|
||||
|
||||
loadingCount.value++
|
||||
loadingCount.value++;
|
||||
|
||||
try {
|
||||
const result = await requestFn({
|
||||
pageNum: pageNum.value,
|
||||
pageSize,
|
||||
})
|
||||
});
|
||||
|
||||
// 如果是第一页，替换数据；否则追加数据
|
||||
if (pageNum.value === 1) {
|
||||
list.value = result.list
|
||||
list.value = result.list;
|
||||
} else {
|
||||
list.value = [...list.value, ...result.list]
|
||||
list.value = [...list.value, ...result.list];
|
||||
}
|
||||
|
||||
total.value = result.total
|
||||
pageNum.value++
|
||||
onSuccess?.(result.list, result.total)
|
||||
total.value = result.total;
|
||||
pageNum.value++;
|
||||
onSuccess?.(result.list, result.total);
|
||||
|
||||
return result.list
|
||||
return result.list;
|
||||
} catch (e) {
|
||||
const err = e instanceof Error ? e : new Error(String(e))
|
||||
error.value = err
|
||||
onError?.(err)
|
||||
return []
|
||||
const err = e instanceof Error ? e : new Error(String(e));
|
||||
error.value = err;
|
||||
onError?.(err);
|
||||
return [];
|
||||
} finally {
|
||||
loadingCount.value--
|
||||
loadingCount.value--;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 刷新（从第一页开始）
|
||||
*/
|
||||
const refresh = async (): Promise<T[]> => {
|
||||
pageNum.value = 1
|
||||
total.value = 0
|
||||
list.value = []
|
||||
return loadMore()
|
||||
}
|
||||
pageNum.value = 1;
|
||||
total.value = 0;
|
||||
list.value = [];
|
||||
return loadMore();
|
||||
};
|
||||
|
||||
/**
|
||||
* 重置
|
||||
*/
|
||||
const reset = (): void => {
|
||||
list.value = initialData
|
||||
loadingCount.value = 0
|
||||
error.value = null
|
||||
pageNum.value = 1
|
||||
total.value = 0
|
||||
}
|
||||
list.value = initialData;
|
||||
loadingCount.value = 0;
|
||||
error.value = null;
|
||||
pageNum.value = 1;
|
||||
total.value = 0;
|
||||
};
|
||||
|
||||
return {
|
||||
list,
|
||||
@@ -298,5 +298,5 @@ export function usePagination<T>(
|
||||
loadMore,
|
||||
refresh,
|
||||
reset,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ref, computed } from "vue"
|
||||
import { ref, computed } from "vue";
|
||||
|
||||
/**
|
||||
* TabBar 状态管理
|
||||
@@ -19,15 +19,15 @@
|
||||
|
||||
export interface TabbarItem {
|
||||
/** 唯一标识 */
|
||||
name: string
|
||||
name: string;
|
||||
/** 徽标数字，null 表示不显示 */
|
||||
value: number | null
|
||||
value: number | null;
|
||||
/** 是否激活 */
|
||||
active: boolean
|
||||
active: boolean;
|
||||
/** 显示标题 */
|
||||
title: string
|
||||
title: string;
|
||||
/** 图标名称 */
|
||||
icon: string
|
||||
icon: string;
|
||||
}
|
||||
|
||||
/** 默认 TabBar 配置 */
|
||||
@@ -35,7 +35,7 @@ const DEFAULT_TABBAR_ITEMS: Omit<TabbarItem, "active">[] = [
|
||||
{ name: "home", value: null, title: "首页", icon: "home" },
|
||||
{ name: "work", value: null, title: "工作台", icon: "laptop" },
|
||||
{ name: "mine", value: null, title: "我的", icon: "user" },
|
||||
]
|
||||
];
|
||||
|
||||
/**
|
||||
* 创建 TabBar 状态实例
|
||||
@@ -49,24 +49,24 @@ function createTabbarState() {
|
||||
...item,
|
||||
active: index === 0,
|
||||
}))
|
||||
)
|
||||
);
|
||||
|
||||
/** TabBar 列表 */
|
||||
const tabbarList = computed(() => items.value)
|
||||
const tabbarList = computed(() => items.value);
|
||||
|
||||
/** 当前激活的 TabBar 项 */
|
||||
const activeTabbar = computed(() => {
|
||||
return items.value.find((item) => item.active) || items.value[0]
|
||||
})
|
||||
return items.value.find((item) => item.active) || items.value[0];
|
||||
});
|
||||
|
||||
/**
|
||||
* 获取指定 TabBar 项的徽标数字
|
||||
* @param name TabBar 项名称
|
||||
*/
|
||||
const getTabbarItemValue = (name: string): number | null => {
|
||||
const item = items.value.find((item) => item.name === name)
|
||||
return item?.value ?? null
|
||||
}
|
||||
const item = items.value.find((item) => item.name === name);
|
||||
return item?.value ?? null;
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置 TabBar 项的徽标数字
|
||||
@@ -74,11 +74,11 @@ function createTabbarState() {
|
||||
* @param value 徽标数字
|
||||
*/
|
||||
const setTabbarItem = (name: string, value: number): void => {
|
||||
const item = items.value.find((item) => item.name === name)
|
||||
const item = items.value.find((item) => item.name === name);
|
||||
if (item) {
|
||||
item.value = value
|
||||
item.value = value;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置激活的 TabBar 项
|
||||
@@ -86,9 +86,9 @@ function createTabbarState() {
|
||||
*/
|
||||
const setTabbarItemActive = (name: string): void => {
|
||||
items.value.forEach((item) => {
|
||||
item.active = item.name === name
|
||||
})
|
||||
}
|
||||
item.active = item.name === name;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 重置 TabBar 状态
|
||||
@@ -97,8 +97,8 @@ function createTabbarState() {
|
||||
items.value = DEFAULT_TABBAR_ITEMS.map((item, index) => ({
|
||||
...item,
|
||||
active: index === 0,
|
||||
}))
|
||||
}
|
||||
}));
|
||||
};
|
||||
|
||||
return {
|
||||
tabbarList,
|
||||
@@ -107,11 +107,11 @@ function createTabbarState() {
|
||||
setTabbarItem,
|
||||
setTabbarItemActive,
|
||||
resetTabbar,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/** 全局单例实例 */
|
||||
let tabbarInstance: ReturnType<typeof createTabbarState> | null = null
|
||||
let tabbarInstance: ReturnType<typeof createTabbarState> | null = null;
|
||||
|
||||
/**
|
||||
* TabBar 状态管理 Hook
|
||||
@@ -123,14 +123,14 @@ let tabbarInstance: ReturnType<typeof createTabbarState> | null = null
|
||||
* @param options.singleton 是否使用单例模式，默认 true
|
||||
*/
|
||||
export function useTabbar(options?: { singleton?: boolean }) {
|
||||
const { singleton = true } = options ?? {}
|
||||
const { singleton = true } = options ?? {};
|
||||
|
||||
if (singleton) {
|
||||
if (!tabbarInstance) {
|
||||
tabbarInstance = createTabbarState()
|
||||
tabbarInstance = createTabbarState();
|
||||
}
|
||||
return tabbarInstance
|
||||
return tabbarInstance;
|
||||
}
|
||||
|
||||
return createTabbarState()
|
||||
return createTabbarState();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user