From c158fc2afdfcebc5fc80828671bc5c4053d931da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E9=B1=BC=E5=BC=80=E5=8F=91?= <git@xiaoyu.com>
Date: Sat, 16 May 2026 10:19:21 +0800
Subject: [PATCH] =?UTF-8?q?refactor(MyWorks):=20=E5=8E=BB=E6=8E=89?=
 =?UTF-8?q?=E6=9C=AC=E5=9C=B0=E6=95=B0=E6=8D=AE=E5=81=87=E5=88=86=E9=A1=B5?=
 =?UTF-8?q?=EF=BC=8C=E7=9B=B4=E6=8E=A5=E5=85=A8=E9=83=A8=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

本地数据一次性加载到内存，slice 分页无任何性能收益，
反而增加用户操作成本。参考剪映/必剪/快影等同类产品，
本地作品/草稿直接全部展示，自然滚动即可。
---
 .../src/pages/ContentManagement/MyWorks.tsx   | 40 +++++--------------
 1 file changed, 10 insertions(+), 30 deletions(-)

diff --git a/tauri-app/src/pages/ContentManagement/MyWorks.tsx b/tauri-app/src/pages/ContentManagement/MyWorks.tsx
index a1c8262..99ab562 100644
--- a/tauri-app/src/pages/ContentManagement/MyWorks.tsx
+++ b/tauri-app/src/pages/ContentManagement/MyWorks.tsx
@@ -46,7 +46,7 @@ const tabs = [
   { id: 'drafts' as TabType, label: '草稿箱' },
 ];
 
-const PAGE_SIZE = 8;
+
 
 function formatDateFriendly(timestamp: number): string {
   const date = new Date(timestamp);
@@ -67,21 +67,6 @@ function formatFileSize(bytes: number): string {
   return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
 }
 
-function Pagination({ current, total, onChange }: { current: number; total: number; onChange: (page: number) => void }) {
-  if (total <= 1) {return null;}
-  return (
-    <div className="pagination-container">
-      <div className="pagination">
-        <button className="pagination-btn nav" disabled={current === 1} onClick={() => onChange(Math.max(1, current - 1))}>上一页</button>
-        {Array.from({ length: total }, (_, i) => i + 1).map(page => (
-          <button key={page} className={`pagination-btn ${current === page ? 'active' : ''}`} onClick={() => onChange(page)}>{page}</button>
-        ))}
-        <button className="pagination-btn nav" disabled={current === total} onClick={() => onChange(Math.min(total, current + 1))}>下一页</button>
-      </div>
-    </div>
-  );
-}
-
 function formatDuration(seconds: number): string {
   if (seconds <= 0) {return '';}
   const mins = Math.floor(seconds / 60);
@@ -295,8 +280,7 @@ export default function MyWorks() {
   const [showDeleteDraftModal, setShowDeleteDraftModal] = useState(false);
   const [deletingDraft, setDeletingDraft] = useState<DraftItem | null>(null);
   const [isDeletingDraft, setIsDeletingDraft] = useState(false);
-  const [productPage, setProductPage] = useState(1);
-  const [draftPage, setDraftPage] = useState(1);
+
   const [editingDraftId, setEditingDraftId] = useState<string | null>(null);
   const [editDraftTitle, setEditDraftTitle] = useState('');
   const { navigate } = useNavigation();
@@ -387,11 +371,7 @@ export default function MyWorks() {
     setEditingDraftId(null);
   };
 
-  const totalProductPages = Math.ceil(products.length / PAGE_SIZE);
-  const paginatedProducts = products.slice((productPage - 1) * PAGE_SIZE, productPage * PAGE_SIZE);
 
-  const totalDraftPages = Math.ceil(drafts.length / PAGE_SIZE);
-  const paginatedDrafts = drafts.slice((draftPage - 1) * PAGE_SIZE, draftPage * PAGE_SIZE);
 
   return (
     <div className="content-page content-page-compact">
@@ -417,9 +397,9 @@ export default function MyWorks() {
         <>
           {activeTab === 'products' && (
             <>
-              {paginatedProducts.length > 0 ? (
-                <div className="works-grid" key={`products-${productPage}`}>
-                  {paginatedProducts.map(product => (
+              {products.length > 0 ? (
+                <div className="works-grid">
+                  {products.map(product => (
                     <ProductCard key={product.path} product={product} onDelete={openDeleteModal} onRename={handleRenameProduct} />
                   ))}
                 </div>
@@ -430,15 +410,15 @@ export default function MyWorks() {
                   <p className="empty-state-desc">完成压制成片后会保存在这里</p>
                 </div>
               )}
-              <Pagination current={productPage} total={totalProductPages} onChange={setProductPage} />
+
             </>
           )}
           {activeTab === 'drafts' && (
             <>
               <div className="drafts-list-container">
-                {paginatedDrafts.length > 0 ? (
-                  <div className="drafts-list" key={`drafts-${draftPage}`}>
-                    {paginatedDrafts.map(draft => (
+                {drafts.length > 0 ? (
+                  <div className="drafts-list">
+                    {drafts.map(draft => (
                       <DraftListItem
                         key={draft.id}
                         draft={draft}
@@ -460,7 +440,7 @@ export default function MyWorks() {
                   </div>
                 )}
               </div>
-              <Pagination current={draftPage} total={totalDraftPages} onChange={setDraftPage} />
+
             </>
           )}
         </>