feat: ✨ 部署&优化

.eslintrc.json

@@ -25,7 +25,8 @@
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
     "jsx-a11y/click-events-have-key-events": "off",
-    "jsx-a11y/no-static-element-interactions": "off"
+    "jsx-a11y/no-static-element-interactions": "off",
+    "jsx-a11y/anchor-is-valid": "off"
   },
   "settings": {
     "import/parsers": {

package.json

@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "description": "",
   "license": "MIT",
+  "homepage": "https://zhuba-ahhh.github.io/jianlai/",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -33,7 +34,7 @@
     "@commitlint/cli": "^19.1.0",
     "@commitlint/config-conventional": "^19.1.0",
     "@commitlint/prompt-cli": "^19.1.0",
-    "@types/node": "^18.11.18",
+    "@types/node": "^18.19.39",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "@typescript-eslint/eslint-plugin": "^7.16.0",

src/components/DictumList.tsx

@@ -31,7 +31,7 @@ const DictumList = () => {
   return (
     <div className="grid gap-8 p-8 md:grid-cols-2 lg:grid-cols-3" id="container">
       {dictums.map((dictum, index) => (
-        <div key={uuid()} data-swapy-slot={index} className="h-full">
+        <div key={uuid()} data-swapy-slot={index} className="h-full cursor-pointer">
           <div
             className="p-8 bg-white rounded-xl shadow-md hover:shadow-2xl transition-shadow duration-300 border border-gray-300 transform hover:-translate-y-1 hover:scale-105"
             data-swapy-item={dictum}

src/router/index.tsx

@@ -1,57 +1,64 @@
-import { createBrowserRouter } from 'react-router-dom';
+import { createBrowserRouter, Navigate } from 'react-router-dom';
 import App from '../App';
 import BookList from '../views/BookListView';
 import SearchPage from '../views/SearchView';
 import BookView from '../views/BookView';
 import BookChapter from '../views/BookChapter';
 import Navbar from '../components/Navbar';
 
-const router = createBrowserRouter([
-  {
-    path: '/',
-    element: (
-      <>
-        <Navbar />
-        <App />
-      </>
-    ),
-  },
-  {
-    path: '/list',
-    element: (
-      <>
-        <Navbar />
-        <BookList />
-      </>
-    ),
-  },
-  {
-    path: '/search',
-    element: (
-      <>
-        <Navbar />
-        <SearchPage />
-      </>
-    ),
-  },
-  {
-    path: '/book/:name',
-    element: (
-      <>
-        <Navbar />
-        <BookView />
-      </>
-    ),
-  },
-  {
-    path: '/chapter/:url',
-    element: (
-      <>
-        <Navbar />
-        <BookChapter />
-      </>
-    ),
-  },
-]);
+const router = createBrowserRouter(
+  [
+    {
+      path: '/',
+      element: (
+        <>
+          <Navbar />
+          <App />
+        </>
+      ),
+    },
+    {
+      path: '/list',
+      element: (
+        <>
+          <Navbar />
+          <BookList />
+        </>
+      ),
+    },
+    {
+      path: '/search',
+      element: (
+        <>
+          <Navbar />
+          <SearchPage />
+        </>
+      ),
+    },
+    {
+      path: '/book/:name',
+      element: (
+        <>
+          <Navbar />
+          <BookView />
+        </>
+      ),
+    },
+    {
+      path: '/chapter/:url',
+      element: (
+        <>
+          <Navbar />
+          <BookChapter />
+        </>
+      ),
+    },
+    {
+      path: '*', // 匹配所有未定义的路径
+      element: <Navigate to="/" />, // 重定向到首页
+    },
+  ],
+  { basename: process.env.NODE_ENV === 'production' ? '/jianlai' : '' }
+);
 
 export default router;

src/utils/request.ts

@@ -16,7 +16,7 @@ export interface Result<T = unknown> {
 
 const service: AxiosInstance = axios.create({
   baseURL: '/api',
-  timeout: 6000,
+  timeout: 0,
 });
 
 /* 请求拦截器 */

src/views/BookView.tsx

@@ -11,33 +11,76 @@ type BookDetail = {
   newurl: string;
 };
 
+interface listItem {
+  name: string;
+  url: string;
+}
+
 interface BookDetails {
   img: string;
   desc: string;
   name: string;
   type: string;
   author: string;
-  list: { name: string; url: string }[];
+  list: Array<listItem>;
 }
 
+const SkeletonLoader = () => (
+  <div className="max-w-4xl mx-auto px-4 py-8">
+    <div className="card card-side bg-base-100 shadow-xl">
+      <figure className="ml-6 w-48 h-64 mb-4 rounded-lg skeleton"></figure>
+      <div className="card-body">
+        <h1 className="skeleton h-8 mb-2"> </h1>
+        <p className="skeleton h-6 mb-2"></p>
+        <p className="skeleton h-6 mb-4"></p>
+        <p className="skeleton h-4"></p>
+      </div>
+    </div>
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-8">
+      {Array.from({ length: 24 }).map(
+        (
+          _,
+          index // 假设有6个章节
+        ) => (
+          <div key={index} className="card bg-base-100 shadow-md skeleton">
+            <div className="card-body">
+              <h3 className="skeleton h-6 mb-2"> </h3>
+            </div>
+          </div>
+        )
+      )}
+    </div>
+  </div>
+);
+
 const BookView = () => {
   const navigate = useNavigate();
   const { name } = useParams<{ name: string }>();
   const [book, setBook] = useState<BookDetails | null>(null);
   const [loading, setLoading] = useState(true);
   const [options, setOptions] = useState<{ label: string; value: string }[]>([]);
+  const [defaultSelect, setDefalutSelect] = useState('');
 
   const getBookDetails = useCallback(async (url: string) => {
+    setLoading(true); // 开始加载
     try {
       const response = await http.get<BookDetails>(url);
+      setDefalutSelect(url);
       setBook(response);
     } catch (error) {
       console.error('获取书籍详情失败:', error);
     } finally {
-      setLoading(false);
+      setLoading(false); // 结束加载
     }
   }, []);
 
+  const handleSourceChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedUrl = e.target.value;
+    if (selectedUrl) {
+      getBookDetails(selectedUrl);
+    }
+  };
+
   useEffect(() => {
     const fetchBookDetails = async () => {
       try {
@@ -46,10 +89,10 @@ const BookView = () => {
         setOptions(
           origins.map((origin) => ({ value: origin?.url, label: `${origin?.name}-${origin?.new}` }))
         );
+        setDefalutSelect(origins?.[0].url);
         getBookDetails(origins[0].url);
       } catch (error) {
         console.error('获取书籍详情失败:', error);
-      } finally {
         setLoading(false);
       }
     };
@@ -67,18 +110,10 @@ const BookView = () => {
   );
 
   if (loading) {
-    return <Loading />;
+    return <SkeletonLoader />; // 使用封装的骨架屏组件
   }
 
-  if (!book) {
-    return (
-      <div className="mx-auto">
-        <p className="text-center">未找到书籍信息</p>
-      </div>
-    );
-  }
-
-  return (
+  return book ? (
     <div className="max-w-4xl mx-auto px-4 py-8">
       <div className="card card-side bg-base-100 shadow-xl transition-transform transform hover:scale-105">
         <figure className="ml-6 w-48 h-64 mb-4 rounded-lg shadow-md">
@@ -98,35 +133,48 @@ const BookView = () => {
       <div className="flex items-center justify-between">
         <h2 className="text-2xl font-semibold mt-4 mb-4 text-gray-800">章节列表</h2>
         <div className="flex items-center">
-          <span>源:</span>
+          <span className="font-medium">源:</span>
           <select
             className="select select-bordered select-sm w-full max-w-xs ml-4"
+            value={defaultSelect}
             style={{ outlineOffset: 0 }}
-            onChange={(e) => getBookDetails(e.target.value)}
+            onChange={handleSourceChange}
           >
             {options.map((option) => (
               <option key={option.value} value={option.value}>
                 {option.label}
               </option>
             ))}
           </select>
+          {loading && <Loading />}
         </div>
       </div>
-      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {book.list.map((chapter, index) => (
-          // eslint-disable-next-line jsx-a11y/anchor-is-valid
-          <a
-            className="link link-hover truncate hover:underline"
+          <div
             key={index}
-            onClick={() => {
-              JumpToBookChapter(getLastNumbersFromUrl(chapter.url).join('-'));
-            }}
+            className="card bg-base-100 shadow-md hover:shadow-lg transition-shadow transform hover:scale-105"
           >
-            {chapter.name}
-          </a>
+            <div className="card-body">
+              <h3 className="text-lg font-semibold cursor-pointer">
+                <a
+                  className="link link-hover text-blue-600 hover:text-blue-800 transition-colors no-underline hover:no-underline"
+                  onClick={() => {
+                    JumpToBookChapter(getLastNumbersFromUrl(chapter.url).join('-'));
+                  }}
+                >
+                  {chapter.name}
+                </a>
+              </h3>
+            </div>
+          </div>
         ))}
       </div>
     </div>
+  ) : (
+    <div className="mx-auto height-full">
+      <p className="text-center">未找到书籍信息</p>
+    </div>
   );
 };
 

tsconfig.json

@@ -19,7 +19,7 @@
     "paths": {
       "@/*": ["src/*"]
     },
-    "types": [""]
+    "types": ["node"]
   },
   "include": ["./src"]
 }