fix(frontend): 修复提示不可见导致"保存没反应"

useToast 曾是只写局部 state 的 stub,返回的 toasts 数组无任何页面渲染,
而全局仅挂载 sonner 的 <Toaster />,导致 31 个组件的操作提示全部隐形
(用户表现为"点击保存没反应",实际请求已成功到达后端)。

- use-toast.tsx: useToast 统一转发到 sonner,保持返回值结构兼容
- ProfilePage.tsx: 密码修改去掉静默 return,校验失败给出明确提示;
  保存按钮改为始终可点,保证点击必有反馈

// Logan.Li
This commit is contained in:
Logan.Li committed 2026-09-14 02:13:34 +00:00
1 parent 4658812876
commit 52e93316a7
2 files changed
+33 -21

No files matched your search

+22 -18
View File
@@ -1,33 +1,37 @@
import { useState, useCallback } from 'react';
// useToast — 统一委托到全局 sonner <Toaster />,确保提示真实可见。// Logan.Li
//
// 历史问题:早期版本把 toast 存在 hook 内的局部 state 并返回 toasts 数组,
// 但没有任何页面渲染该数组(全局只挂载了 sonner 的 <Toaster />),
// 导致所有 useToast() 调用产生的提示都是隐形的(表现为"保存没反应")。
// 现统一转发到 sonner,保持返回值结构兼容既有调用方。// Logan.Li
interface Toast {
id: string;
import { useCallback } from 'react';
import { toast as sonnerToast } from 'sonner';
export interface ToastOptions {
title: string;
description?: string;
variant?: 'default' | 'destructive';
}
interface UseToastReturn {
toast: (opts: { title: string; description?: string; variant?: 'default' | 'destructive' }) => void;
toasts: Toast[];
toast: (opts: ToastOptions) => void;
toasts: never[];
dismiss: (id: string) => void;
}
export function useToast(): UseToastReturn {
const [toasts, setToasts] = useState<Toast[]>([]);
const toast = useCallback((opts: { title: string; description?: string; variant?: 'default' | 'destructive' }) => {
const id = Math.random().toString(36).slice(2);
const t: Toast = { id, ...opts };
setToasts((prev) => [...prev, t]);
setTimeout(() => {
setToasts((prev) => prev.filter((x) => x.id !== id));
}, 4000);
const toast = useCallback((opts: ToastOptions) => {
const { title, description, variant } = opts;
if (variant === 'destructive') {
sonnerToast.error(title, { description });
} else {
sonnerToast.success(title, { description });
}
}, []);
const dismiss = useCallback((id: string) => {
setToasts((prev) => prev.filter((t) => t.id !== id));
}, []);
// sonner 自带 dismiss 能力,此处保留空实现以兼容既有解构。// Logan.Li
const dismiss = useCallback(() => {}, []);
return { toast, toasts, dismiss };
return { toast, toasts: [], dismiss };
}