refactor(MyWorks): 成品/草稿箱分页独立 + 抽取 Pagination 组件

- 成品和草稿箱各自拥有独立的 productPage / draftPage，互不干扰
- 抽取公共 Pagination 组件，消除分页 UI 代码重复
- 删除/重命名后若当前页超出范围自动回退到上一页

tauri-app/src/pages/ContentManagement/MyWorks.tsx

@@ -67,6 +67,21 @@ 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);
@@ -280,7 +295,8 @@ export default function MyWorks() {
   const [showDeleteDraftModal, setShowDeleteDraftModal] = useState(false);
   const [deletingDraft, setDeletingDraft] = useState<DraftItem | null>(null);
   const [isDeletingDraft, setIsDeletingDraft] = useState(false);
-  const [currentPage, setCurrentPage] = useState(1);
+  const [productPage, setProductPage] = useState(1);
+  const [draftPage, setDraftPage] = useState(1);
   const [editingDraftId, setEditingDraftId] = useState<string | null>(null);
   const [editDraftTitle, setEditDraftTitle] = useState('');
   const { navigate } = useNavigation();
@@ -371,11 +387,11 @@ export default function MyWorks() {
     setEditingDraftId(null);
   };
 
-  const totalPages = Math.ceil(products.length / PAGE_SIZE);
-  const paginatedProducts = products.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE);
+  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((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE);
+  const paginatedDrafts = drafts.slice((draftPage - 1) * PAGE_SIZE, draftPage * PAGE_SIZE);
 
   return (
     <div className="content-page content-page-compact">
@@ -388,7 +404,7 @@ export default function MyWorks() {
 
         <div className="works-tabs-bar">
           {tabs.map(tab => (
-            <button key={tab.id} className={`works-tab-pill ${activeTab === tab.id ? 'active' : ''}`} onClick={() => { setActiveTab(tab.id); setCurrentPage(1); }}>
+            <button key={tab.id} className={`works-tab-pill ${activeTab === tab.id ? 'active' : ''}`} onClick={() => { setActiveTab(tab.id); }}>
               {tab.label}<span className="works-tab-count">{tab.id === 'products' ? products.length : drafts.length}</span>
             </button>
           ))}
@@ -414,17 +430,7 @@ export default function MyWorks() {
                   <p className="empty-state-desc">完成压制成片后会保存在这里</p>
                 </div>
               )}
-              {totalPages > 1 && (
-                <div className="pagination-container">
-                  <div className="pagination">
-                    <button className="pagination-btn nav" disabled={currentPage === 1} onClick={() => setCurrentPage(p => Math.max(1, p - 1))}>上一页</button>
-                    {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => (
-                      <button key={page} className={`pagination-btn ${currentPage === page ? 'active' : ''}`} onClick={() => setCurrentPage(page)}>{page}</button>
-                    ))}
-                    <button className="pagination-btn nav" disabled={currentPage === totalPages} onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}>下一页</button>
-                  </div>
-                </div>
-              )}
+              <Pagination current={productPage} total={totalProductPages} onChange={setProductPage} />
             </>
           )}
           {activeTab === 'drafts' && (
@@ -454,17 +460,7 @@ export default function MyWorks() {
                   </div>
                 )}
               </div>
-              {totalDraftPages > 1 && (
-                <div className="pagination-container">
-                  <div className="pagination">
-                    <button className="pagination-btn nav" disabled={currentPage === 1} onClick={() => setCurrentPage(p => Math.max(1, p - 1))}>上一页</button>
-                    {Array.from({ length: totalDraftPages }, (_, i) => i + 1).map(page => (
-                      <button key={page} className={`pagination-btn ${currentPage === page ? 'active' : ''}`} onClick={() => setCurrentPage(page)}>{page}</button>
-                    ))}
-                    <button className="pagination-btn nav" disabled={currentPage === totalDraftPages} onClick={() => setCurrentPage(p => Math.min(totalDraftPages, p + 1))}>下一页</button>
-                  </div>
-                </div>
-              )}
+              <Pagination current={draftPage} total={totalDraftPages} onChange={setDraftPage} />
             </>
           )}
         </>