wangziqi
67435e46ca
UX 缺陷修复: - 校验失败不再卡死弹窗按钮(Users/Roles/Bills) - 押金收取/批量收取/添加分期防重复提交;切换房型重置勾选 - AI 表单/批量确认不再出现"假成功" - Dashboard 各数据模块独立加载,单接口失败不再整页清零 - 房间可视化加载失败显示错误态而非永久转圈 - 学生编辑表单回填前重置,避免字段残留污染 - 覆盖式导入增加二次确认;恢复默认考勤时段确认并同步表单 - 金数据匹配关闭前确认,同步中禁止误关 体验提升: - 新增统一 QueryErrorState/QueryEmpty,20+ 页面加载失败显示错误态与重试 - 全局 ErrorBoundary + RouteKeeper 逐页兜底 - 新增 usePageVisible/useVisibleRefetch,保活页面切回自动刷新数据 - 新增首次登录角色引导 RoleTour 与业务闭环 NextStepHint 引导卡 - 重构 A2UI:useSubmissionState/useXCardSurface 收敛状态与命令生命周期, ArtifactErrorBoundary 渲染降级,图表空数据占位 - AI 助手欢迎语与建议话术按角色定制,会话列表空态引导 - 更新 a2ui-contract.md 契约文档说明实现现状
38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import { useEffect, useRef } from 'react';
|
||
import { useLocation } from 'react-router';
|
||
import { useQueryClient, type QueryKey } from '@tanstack/react-query';
|
||
import { useActivePage } from '../components/routeKeeperContext';
|
||
|
||
/**
|
||
* 当前页面是否处于激活（可见）状态。
|
||
* RouteKeeper 保活页面始终挂载，只有激活页可见；配合
|
||
* `useVisibleRefetch` 可在切回页面时刷新数据。
|
||
*/
|
||
export function usePageVisible(): boolean {
|
||
const activePage = useActivePage();
|
||
const location = useLocation();
|
||
return activePage === location.pathname;
|
||
}
|
||
|
||
/**
|
||
* 页面重新变为可见时刷新指定 queryKey 的数据。
|
||
* 解决 RouteKeeper 保活导致的「切回列表页看不到新增/删除数据」问题。
|
||
*
|
||
* 用法：`useVisibleRefetch(['students']);`
|
||
*
|
||
* 注意：queryKey 通过 ref 持有，effect 只依赖 visible，
|
||
* 避免调用方每次渲染传入新数组字面量导致频繁重复请求。
|
||
*/
|
||
export function useVisibleRefetch(queryKey: QueryKey | undefined): void {
|
||
const visible = usePageVisible();
|
||
const queryClient = useQueryClient();
|
||
const keyRef = useRef(queryKey);
|
||
keyRef.current = queryKey;
|
||
|
||
useEffect(() => {
|
||
if (visible && keyRef.current) {
|
||
void queryClient.refetchQueries({ queryKey: keyRef.current });
|
||
}
|
||
}, [visible, queryClient]);
|
||
}
|