Files
rustfs-console/composables/useFormValidation.ts
T
overtrue 0598f8065f refactor: 修复 API 客户端 composables 滥用和硬编码路径问题
- 修复 lib/api-client.ts 中在类方法中直接调用 composables 的问题
- 添加 ApiErrorHandler 错误处理器,通过依赖注入方式处理 401 错误
- 创建路由工具函数 utils/routes.ts,统一管理路由路径
- 修复 composables/useAuth.ts 中的硬编码路径,使用工具函数
- 修复 components/copy-input.vue 的生命周期问题,在 onMounted 中创建 ClipboardJS 实例
- 修复 plugins/03.s3.ts 中的错误处理,使用 navigateTo 替代直接操作 window.location
- 修复 pages/config.vue 中的硬编码路径
- 添加 composables/useFormValidation.ts、useAsyncOperation.ts、useErrorHandler.ts 工具函数(供后续使用)
- 添加 types/api.ts 类型定义
2025-10-31 22:50:59 +08:00

103 lines
2.3 KiB
TypeScript

/**
* 统一的表单验证 Composable
* 基于 Zod schema 提供类型安全的表单验证
*/
import { z } from 'zod';
import { useMessage } from '~/lib/ui/message';
import { useI18n } from 'vue-i18n';
export interface ValidationResult<T> {
success: boolean;
data?: T;
errors?: z.ZodError;
}
/**
* 使用 Zod schema 进行表单验证
* @param schema Zod schema 定义
* @returns 验证函数和错误处理工具
*/
export function useFormValidation<T extends z.ZodTypeAny>(schema: T) {
const { t } = useI18n();
const message = useMessage();
/**
* 验证数据是否符合 schema
* @param data 待验证的数据
* @returns 验证结果
*/
const validate = (data: unknown): ValidationResult<z.infer<T>> => {
const result = schema.safeParse(data);
if (!result.success) {
return {
success: false,
errors: result.error,
};
}
return {
success: true,
data: result.data,
};
};
/**
* 验证数据,失败时显示错误消息
* @param data 待验证的数据
* @param showMessage 是否显示错误消息
* @returns 验证是否通过
*/
const validateWithMessage = (
data: unknown,
showMessage = true
): data is z.infer<T> => {
const result = validate(data);
if (!result.success && showMessage) {
const firstError = result.errors?.errors[0];
if (firstError) {
const fieldName = firstError.path.join('.');
const errorMessage = firstError.message || t('Validation failed');
message.error(
fieldName ? `${fieldName}: ${errorMessage}` : errorMessage
);
} else {
message.error(t('Validation failed'));
}
}
return result.success;
};
/**
* 获取字段错误消息
* @param errors ZodError 实例
* @param fieldPath 字段路径
* @returns 错误消息或 undefined
*/
const getFieldError = (
errors: z.ZodError | undefined,
fieldPath: (string | number)[]
): string | undefined => {
if (!errors) return undefined;
const error = errors.errors.find((e) => {
return (
e.path.length === fieldPath.length &&
e.path.every((p, i) => p === fieldPath[i])
);
});
return error?.message;
};
return {
validate,
validateWithMessage,
getFieldError,
schema,
};
}