feat: ✨ 参数

zhuba-Ahhh · Oct 4, 2024 · 5f5f6c7 · 5f5f6c7
1 parent 331f2a9
commit 5f5f6c7
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 18 deletions.
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1,2 +1,3 @@
 export * from './request';
 export * from './math';
+export * from './string';
diff --git a/src/utils/string.ts b/src/utils/string.ts
@@ -0,0 +1,6 @@
+// 解析链接
+export const resolveUrl = (url: string) => {
+  const match = url.match(/(\d+)\/(\d+)/);
+
+  return [match?.[1] || '', match?.[2] || ''];
+};
diff --git a/src/views/ChapterView.tsx b/src/views/ChapterView.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import Loading from '../components/Loading';
-import { http } from 'utils';
+import { http, resolveUrl } from 'utils';
 import { ChapterRes } from '../types';
 import './ChapterView.less';
 import { useSearchParams } from 'react-router-dom';
@@ -12,7 +12,9 @@ const ChapterView = () => {
   const [data, setData] = useState<ChapterRes | null>(null);
 
   useEffect(() => {
-    setUrl(searchParams.get('url') || '');
+    const id = searchParams.get('id') || '';
+    const chapterId = searchParams.get('chapterId') || '';
+    setUrl(`https://read.zongheng.com/chapter/${id}/${chapterId}.html`);
   }, [searchParams]);
   useEffect(() => {
     if (url) {
@@ -65,22 +67,23 @@ const ChapterView = () => {
     [data]
   );
 
-  const renderBtns = useCallback(
-    () => (
+  const renderBtns = useCallback(() => {
+    const [id, chapterId] = resolveUrl(data?.preUrl || '');
+    const [id1, chapterId1] = resolveUrl(data?.nextUrl || '');
+    return (
       <div className="flex mx-auto mt-6 w-full max-w-[960px] bg-[--modBgColor] justify-evenly items-center h-12">
         <div>
-          <a href={`/chapter?id=${encodeURIComponent(data?.preUrl || '')}`}>上一章</a>
+          <a href={`/chapter?id=${id}&chapterId=${chapterId}`}>上一章</a>
         </div>
         <div>
           <a href={`/directory?id=${bookId}`}>目录</a>
         </div>
         <div>
-          <a href={`/chapter?url=${encodeURIComponent(data?.nextUrl || '')}`}>下一章</a>
+          <a href={`/chapter?id=${id1}&chapterId=${chapterId1}`}>下一章</a>
         </div>
       </div>
-    ),
-    [data, bookId]
-  );
+    );
+  }, [data, bookId]);
 
   return (
     <main className="container mx-auto">

diff --git a/src/views/DirectoryView.tsx b/src/views/DirectoryView.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import Loading from '../components/Loading';
-import { http } from 'utils';
+import { http, resolveUrl } from 'utils';
 import { DirectoryRes } from 'types';
 import { useSearchParams } from 'react-router-dom';
 
@@ -72,14 +72,17 @@ const DirectoryView = () => {
             </span>
           </div>
           <div className="grid grid-cols-2 gap-4 md:grid-cols-3">
-            {volume?.chapters.map((chapter, index) => (
-              <div
-                key={JSON.stringify(chapter) + index}
-                className="col-span-1 cursor-pointer truncate"
-              >
-                <a href={`/chapter?url=${encodeURIComponent(chapter.url)}`}>{chapter.name}</a>
-              </div>
-            ))}
+            {volume?.chapters.map((chapter, index) => {
+              const [id, chapterId] = resolveUrl(chapter.url);
+              return (
+                <div
+                  key={JSON.stringify(chapter) + index}
+                  className="col-span-1 cursor-pointer truncate"
+                >
+                  <a href={`/chapter?id=${id}&chapterId=${chapterId}`}>{chapter.name}</a>
+                </div>
+              );
+            })}
           </div>
         </div>
       )),