列表骨架屏

src/pages/list/index.tsx

@@ -1,4 +1,5 @@
-import ListItem from "../../components/ListItem";
+import ListCard from "../../components/ListCard";
+import ListCardSkeleton from "../../components/ListCardSkeleton";
 import List from "../../components/List";
 import Menu from "../../components/Menu";
 import CityFilter from "../../components/CityFilter";
@@ -9,7 +10,6 @@ import { useEffect } from "react";
 import Taro from "@tarojs/taro";
 import { useListStore } from "../../store/listStore";
 import { View } from "@tarojs/components";
-import "./index.scss";
 
 const ListPage = () => {
   // 从 store 获取数据和方法
@@ -82,21 +82,6 @@ const ListPage = () => {
     }
   }, [error, clearError]);
 
-  // 格式化时间显示
-  const formatRefreshTime = (timeString: string | null) => {
-    if (!timeString) return "";
-    const date = new Date(timeString);
-    const now = new Date();
-    const diff = now.getTime() - date.getTime();
-    const minutes = Math.floor(diff / 60000);
-
-    if (minutes < 1) return "刚刚";
-    if (minutes < 60) return `${minutes}分钟前`;
-    const hours = Math.floor(minutes / 60);
-    if (hours < 24) return `${hours}小时前`;
-    return date.toLocaleDateString();
-  };
-
   // 加载状态显示
   if (loading && matches.length === 0) {
     return (
@@ -230,40 +215,18 @@ const ListPage = () => {
       <View className={styles.listContentWrapper}>
         {/* 列表内容 */}
         <List>
-          {matches.map((match, index) => (
-            <ListItem key={match.id || index} {...match} />
-          ))}
+          {!loading &&
+            matches.length > 0 &&
+            matches.map((match, index) => (
+              <ListCard key={match.id || index} {...match} />
+            ))}
         </List>
 
         {/* 空状态 */}
-        {!loading && matches.length === 0 && (
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "center",
-              alignItems: "center",
-              height: "200px",
-              fontSize: "14px",
-              color: "#999",
-            }}
-          >
-            <div style={{ marginBottom: "10px" }}>暂无比赛数据</div>
-            <button
-              onClick={() => fetchMatches()}
-              style={{
-                padding: "8px 16px",
-                fontSize: "12px",
-                color: "#fff",
-                backgroundColor: "#007aff",
-                border: "none",
-                borderRadius: "4px",
-              }}
-            >
-              重新加载
-            </button>
-          </div>
-        )}
+        {loading &&
+          new Array(10).fill(0).map(() => {
+            return <ListCardSkeleton />;
+          })}
       </View>
     </View>
   );