概述
只从 shared-ui 导入 PullToRefresh。父级需限制高度（h-full overflow-hidden）。
- refreshing — 加载旋转标志
- onRefresh — 异步 refetch
- success — 完成勾选动画
- 配合 LoadingState / ErrorState / EmptyState
标准模式
见英文代码示例。
TSXpage
1import { useState } from "react";
2import {
3 Page,
4 PageContent,
5 PullToRefresh,
6 LoadingState,
7 ErrorState,
8 EmptyState,
9} from "@quan-erp/shared-ui";
10import { toast } from "sonner";
11import metadata from "../../module.metadata.json" with { type: "json" };
12import { useItemsQuery } from "./api/items.api";
13
14export function MyPage() {
15 const [refreshing, setRefreshing] = useState(false);
16 const { data: items, refetch, isLoading, isError } = useItemsQuery();
17
18 async function handleRefresh() {
19 setRefreshing(true);
20 const result = await refetch();
21 if (result.isError) {
22 toast.error(result.error?.message || "Failed to refetch");
23 }
24 setRefreshing(false);
25 }
26
27 return (
28 <Page pluginName={metadata.name}>
29 <PageContent>
30 <div className="h-full overflow-hidden flex flex-col">
31 <PullToRefresh
32 className="flex-1 flex flex-col relative h-full"
33 refreshing={refreshing}
34 success={!isError}
35 onRefresh={handleRefresh}
36 >
37 {isLoading ? <LoadingState /> : null}
38 {isError ? <ErrorState /> : null}
39 {!isLoading && !items?.length ? <EmptyState /> : null}
40 {/* list / table */}
41 </PullToRefresh>
42 </div>
43 </PageContent>
44 </Page>
45 );
46}