feat: Add base project structure with API and web components

2025-12-02 20:28:01 +08:00
parent f3de6d6cc9
commit c1adc62ec6
817 changed files with 111226 additions and 106 deletions
--- a/web/src/components/PageScrollList/index.tsx
+++ b/web/src/components/PageScrollList/index.tsx
@@ -0,0 +1,128 @@
+import React, { useEffect, useState, useRef, forwardRef, useImperativeHandle } from 'react';
+import { List, Skeleton} from 'antd';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import { request } from '@/utils/request';
+import Empty from '@/components/Empty';
+
+const PAGE_SIZE = 20;
+
+interface ApiResponse {
+  items?: Record<string, unknown>[];
+  page: {
+    page: number;
+    pagesize: number;
+    total: number;
+    hasnext: boolean;
+  };
+}
+export interface PageScrollListRef {
+  refresh: () => void;
+}
+
+interface PageScrollListProps {
+  url: string;
+  renderItem: (item: Record<string, unknown>) => React.ReactNode;
+  query?: Record<string, unknown>;
+  column?: number;
+  className?: string;
+}
+
+const PageScrollList = forwardRef<PageScrollListRef, PageScrollListProps>(({
+  renderItem, 
+  query = {}, 
+  url,
+  column = 4,
+  className = '',
+}, ref) => {
+  useImperativeHandle(ref, () => ({
+    refresh,
+  }));
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState<Record<string, unknown>[]>([]);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const loadMoreData = (flag?: boolean) => {
+    if (!flag && (loading || !hasMore)) {
+      return;
+    }
+    setLoading(true);
+    request.get(url, {
+      page: page,
+      pagesize: PAGE_SIZE,
+      ...query,
+    })
+      .then((res) => {
+        const response = res as ApiResponse;
+        const results = Array.isArray(response.items) ? response.items : Array.isArray(response.hosts) ? response.hosts : Array.isArray(response) ? response : [];
+        if (flag) {
+          setData(results);
+        } else {
+          setData(data.concat(results));
+        }
+        setPage(response.page.page + 1);
+        setHasMore(response.page?.hasnext);
+        setLoading(false);
+        console.log(`${results.length} more items loaded!`);
+      })
+      .catch(() => {
+        setLoading(false);
+        setHasMore(false);
+        console.error('Failed to load data');
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  // 刷新列表数据
+  const refresh = () => {
+    setPage(1);
+    setHasMore(true);
+    setData([]);
+  }
+
+  useEffect(() => {
+    refresh()
+  }, [query]);
+
+  useEffect(() => {
+    if (page === 1 && hasMore && data.length === 0) {
+      loadMoreData(true);
+    }
+  }, [page, hasMore, data])
+  
+  return (
+    <>
+      <div
+        ref={scrollRef}
+        id="scrollableDiv"
+        className={`rb:overflow-y-auto rb:overflow-x-hidden rb:h-[calc(100vh-148px)] ${className}`}
+      >
+        <InfiniteScroll
+          dataLength={data.length}
+          next={loadMoreData}
+          hasMore={hasMore}
+          loader={<Skeleton active />}
+          // endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
+          scrollableTarget="scrollableDiv"
+        >
+          {data.length > 0 ? (
+            <List
+              grid={{ gutter: 16, column: column }}
+              dataSource={data}
+              renderItem={(item) => (
+                <List.Item>
+                  {renderItem(item)}
+                </List.Item>
+              )}
+            />
+          ) : !loading ? <Empty /> : null}
+        </InfiniteScroll>
+      </div>
+    </>
+  );
+});
+
+export default PageScrollList;