init

src/components/TxtPreview.tsx

@@ -0,0 +1,40 @@
+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>
+  );
+}