feat: ✨ 骨架屏

zhuba-Ahhh · Sep 22, 2024 · ede0b55 · ede0b55
1 parent 3e4119b
commit ede0b55
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 14 deletions.
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -9,13 +9,13 @@ const Navbar = () => {
         </Link>
       </li>
       <div className="navbar-end flex-grow flex justify-end items-center space-x-4">
-        <li className="hover:text-gray-400">
+        <li className="hover:text-black transition duration-200 ease-in-out">
           <Link to="/">首页</Link>
         </li>
-        <li className="hover:text-gray-400">
+        <li className="hover:text-black transition duration-200 ease-in-out">
           <Link to="/list">小说列表</Link>
         </li>
-        <li className="hover:text-gray-400">
+        <li className="hover:text-black transition duration-200 ease-in-out">
           <Link to="/search">搜索</Link>
         </li>
       </div>

diff --git a/src/utils/request.ts b/src/utils/request.ts
@@ -15,7 +15,7 @@ export interface Result<T = unknown> {
 }
 
 const service: AxiosInstance = axios.create({
-  baseURL: '/api',
+  baseURL: process.env.NODE_ENV === 'production' ? 'https://api.book.bbdaxia.com/api' : '/api',
   timeout: 0,
 });
 

diff --git a/src/views/BookListView.tsx b/src/views/BookListView.tsx
@@ -3,7 +3,6 @@ import { http } from '../utils/request';
 
 import { useNavigate } from 'react-router-dom';
 
-import Loading from '../components/Loading';
 import Tabs from '../components/Tabs';
 import { Author } from 'assets/svg';
 
@@ -70,7 +69,21 @@ const BookList = ({ initialCategory = '全部类型' }: BookListProps) => {
       />
       <div className="h-8" />
       {loading ? (
-        <Loading />
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+          {Array.from({ length: 16 }).map((_, index) => (
+            <div key={index} className="card card-compact bg-base-200 animate-pulse">
+              <div className="h-64 bg-gray-300" /> {/* 骨架屏占位 */}
+              <div className="card-body flex flex-col items-start">
+                <h2 className="h-6 bg-gray-300 rounded mb-2 w-full"> </h2> {/* 骨架屏占位 */}
+                <p className="h-4 bg-gray-300 rounded mb-3 w-full" /> {/* 骨架屏占位 */}
+                <div className="flex justify-between items-center w-full">
+                  <span className="h-4 bg-gray-300 rounded w-1/3" /> {/* 骨架屏占位 */}
+                  <span className="h-4 bg-gray-300 rounded w-1/3" /> {/* 骨架屏占位 */}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
       ) : books?.length > 0 ? (
         <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
           {books.map((book) => (

diff --git a/src/views/SearchView.tsx b/src/views/SearchView.tsx
@@ -1,8 +1,11 @@
 import { useState } from 'react';
 import { http } from '../utils/request';
 import { uuid } from 'zhuba-tools';
+import { Author } from 'assets/svg';
 
 interface SearchResult {
+  img: string;
+  type: string;
   name: string;
   url: string;
   new: string;
@@ -57,24 +60,34 @@ const SearchPage = () => {
       {loading ? (
         <p className="text-center">正在搜索...</p>
       ) : searchResults?.length > 0 ? (
-        <div className="space-y-4">
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
           {searchResults.map((result) => (
-            <div key={uuid()} className="card w-full shadow-xl">
-              <div className="card-body">
+            <div
+              key={uuid()}
+              className="card card-compact hover:shadow-lg hover:rounded-lg transition-shadow duration-300 cursor-pointer"
+            >
+              <img
+                src={`https://api.book.bbdaxia.com${result.img}`}
+                alt={result.name}
+                className="w-full h-64 object-contain mt-4" // 增加上边距
+              />
+              <div className="card-body flex-col items-start p-4">
                 <h2 className="text-xl font-semibold mb-2">
                   {result.name} {result.author}
                 </h2>
-                <p className="text-sm text-gray-600">{result.new}</p>
-                <div>
+                <p className="text-sm text-gray-600 line-clamp-4 mb-3">{result.desc}</p>
+                <div className="flex justify-between items-center w-full">
+                  <span className="text-sm font-medium text-orange-500">热度: {result.new}</span>
                   <a
                     href={`/book/${encodeURIComponent(result.book[0].url)}`}
                     className="text-blue-600 hover:underline mr-4 cursor-pointer"
                   >
                     查看详情
                   </a>
-                  <a href={result.newurl} className="text-green-600 hover:underline cursor-pointer">
-                    阅读最新章节
-                  </a>
+                </div>
+                <div className="flex items-center space-x-1 mt-3 text-gray-500">
+                  <Author />
+                  <p className="text-sm truncate">{result.author}</p>
                 </div>
               </div>
             </div>