admin/meijiaka-zy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(MyWorks): 去掉本地数据假分页，直接全部展示

Browse Source 
本地数据一次性加载到内存，slice 分页无任何性能收益，
反而增加用户操作成本。参考剪映/必剪/快影等同类产品，
本地作品/草稿直接全部展示，自然滚动即可。
This commit is contained in:
小鱼开发
2026-05-16 10:19:21 +08:00
parent 9ac792db7d
commit c158fc2afd
1 changed files with 10 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tauri-app/src/pages/ContentManagement/MyWorks.tsx
+10 -30
View File
@@ -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} />
</>
)}
</>