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 契约文档说明实现现状
57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { Button, Result, Typography } from 'antd';
|
|
|
|
export interface QueryErrorStateProps {
|
|
/** 错误标题，默认「数据加载失败」 */
|
|
title?: string;
|
|
/** 错误描述，默认「请检查网络后重试」 */
|
|
description?: string;
|
|
/** 点击重试回调；不传则不显示重试按钮 */
|
|
onRetry?: () => void;
|
|
/** 紧凑模式：用于表格内部、弹窗等空间受限场景 */
|
|
compact?: boolean;
|
|
}
|
|
|
|
/**
|
|
* 统一查询错误态：任何数据加载失败都应渲染本组件（而非伪装成空状态），
|
|
* 并提供重试入口，让用户明确知道「加载失败」而非「没有数据」。
|
|
*/
|
|
export const QueryErrorState: React.FC<QueryErrorStateProps> = ({
|
|
title = '数据加载失败',
|
|
description = '请检查网络后重试。',
|
|
onRetry,
|
|
compact = false,
|
|
}) => {
|
|
if (compact) {
|
|
return (
|
|
<div style={{ padding: '32px 16px', textAlign: 'center' }}>
|
|
<Typography.Text type="secondary">{title}</Typography.Text>
|
|
{description ? (
|
|
<div>
|
|
<Typography.Text type="secondary" style={{ fontSize: 12 }}>
|
|
{description}
|
|
</Typography.Text>
|
|
</div>
|
|
) : null}
|
|
{onRetry ? (
|
|
<div style={{ marginTop: 12 }}>
|
|
<Button size="small" onClick={onRetry}>
|
|
重试
|
|
</Button>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<Result
|
|
status="warning"
|
|
title={title}
|
|
subTitle={description}
|
|
extra={onRetry ? <Button type="primary" onClick={onRetry}>重试</Button> : undefined}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default QueryErrorState;
|