41 lines
853 B
TypeScript
41 lines
853 B
TypeScript
import { useQuery } from "@tanstack/react-query";
|
|
import axios from "axios";
|
|
|
|
type Props = {
|
|
url?: string;
|
|
};
|
|
|
|
export function TxtPreview({ url }: Props) {
|
|
const { data, isLoading, error, isError } = useQuery({
|
|
queryKey: ["file", url],
|
|
queryFn: () => axios.get(url!, { responseType: "text" }),
|
|
enabled: !!url,
|
|
});
|
|
|
|
if (!url) {
|
|
return null;
|
|
}
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-full">
|
|
<div>加载中...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (isError) {
|
|
return (
|
|
<div className="flex items-center justify-center h-full text-red-500">
|
|
{error?.message || "加载失败"}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="h-full overflow-auto p-4">
|
|
<pre className="whitespace-pre-wrap font-mono text-sm">{data?.data}</pre>
|
|
</div>
|
|
);
|
|
}
|