test

src/pages/api/get_file_list.ts

@@ -1,19 +1,14 @@
-import process from "node:process";
 import { NextApiRequest, NextApiResponse } from "next";
 
-import cheerio from 'cheerio';
+import { load } from 'cheerio';
 import axios from 'axios';
-import { SocksProxyAgent } from 'socks-proxy-agent';
 import { HFRes } from "@/types";
 
-const socksProxyUrl = 'socks5h://localhost:9909';
-const agent = new SocksProxyAgent(socksProxyUrl);
-
 async function get_file_list(base: string, dir: string) {
   const html = (
     await axios.get(base + "/" + dir)
   ).data;
-  const $ = cheerio.load(html);
+  const $ = load(html);
   const res = $("[data-target=ViewerIndexTreeList]").attr(
     "data-props"
   ) as string;
@@ -24,8 +19,10 @@ export default async function handler(
   request: NextApiRequest,
   response: NextApiResponse
 ) {
+  const repo = request.query['repo'] as string;
+  const path = request.query['path'] as string;
   return response.status(200).json(await get_file_list(
-    'https://huggingface.co/datasets/banned-historical-archives/wenhuibao_disk/tree/main',
-    '1'
+    repo,
+    path,
   ));
 }

src/pages/index.tsx

@@ -7,15 +7,16 @@ import { HF_FileEntry, HFRes } from "@/types";
 import { basename } from "path";
 
 export default function Home() {
-  const [repo, setRepo] = useState('https://huggingface.co/datasets/banned-historical-archives/wenhuibao_disk/tree/main');
+  const [repo, setRepo] = useState('https://huggingface.co/datasets/banned-historical-archives/cankaoxiaoxi/tree/main');
+  const [path, setPath] = useState('1990');
   const [entries, setEntries] = useState<HF_FileEntry[]>([])
   const [next, setNext] = useState('')
   const update = useCallback(
     (async () => {
-      const res = (await ((await fetch('/api/get_file_list')).json())) as HFRes;
+      const res = (await ((await fetch(`/api/get_file_list?repo=${encodeURIComponent(repo)}&path=${encodeURIComponent(path)}`)).json())) as HFRes;
       setEntries(res.entries);
       setNext(res.nextURL!);
-    }), []
+    }), [repo, path]
   )
   useEffect(() => {
     update()
@@ -31,11 +32,20 @@ export default function Home() {
       <Container component="main" sx={{ minHeight: "90vh" }}>
         <Stack spacing={4} useFlexGap>
           <input value={repo} onChange={e => setRepo(e.target.value)}/>
-          {entries.map(i => <div key={i.path}>
-            {basename(i.path)}
+          <input value={path} onChange={e => setPath(e.target.value)}/>
+          {entries.map(i => <div key={i.path} style={{display: 'flex'}}>
+            <div style={{flex: 1}} onClick={() => {
+              if (i.type =='directory') {
+                setPath(i.path);
+                setTimeout(update, 100);
+              }
+            }}>{basename(i.path)}</div>
+            <div style={{flex: 1}}>{i.size}</div>
+            <div style={{flex: 1}}>{i.type}</div>
           </div>)}
+          {next ? 
           <button onClick={() => {
-          }}>more</button>
+          }}>more</button> : null}
         </Stack>
       </Container>