add download, upload
Change-Id: I8830fe9f86608b5c3df6d3720b625db797f3069a
diff --git a/src/app/user/purchased-resources/page.tsx b/src/app/user/purchased-resources/page.tsx
index c48b626..11284ff 100644
--- a/src/app/user/purchased-resources/page.tsx
+++ b/src/app/user/purchased-resources/page.tsx
@@ -1,12 +1,169 @@
'use client';
-import React from 'react';
+import React, { useEffect, useState, useRef } from "react";
+import { Card } from 'primereact/card';
+import { Image } from 'primereact/image';
-const EmptyPage: React.FC = () => {
+import { Dialog } from 'primereact/dialog';
+// 页面跳转
+import { useRouter } from 'next/navigation';
+// 消息提醒
+import { Toast } from 'primereact/toast';
+// 分页
+import { Paginator, type PaginatorPageChangeEvent } from 'primereact/paginator';
+
+import { Button } from 'primereact/button';
+// 接口传输
+import axios from 'axios';
+// 标签
+import { Tag } from 'primereact/tag';
+
+
+import { useLocalStorage } from '../../hook/useLocalStorage';
+
+import "./purchased-resource.scss"
+interface User {
+ Id: number;
+}
+// 热门资源数据
+interface Torrent {
+ torrentRecordId: number;
+ torrentUrl: string;
+ infoHash: string;
+ uploadTime: string;
+ uploaderUserId: number;
+}
+
+interface ResourceVersion {
+ resourceVersionId: number;
+ resourceVersionName: string;
+ compatibleVersions: string[];
+ torrentList: Torrent[];
+ seeds: number;
+}
+
+interface Resource {
+ resourceId: number;
+ resourceName: string;
+ resourcePicture: string;
+ resourceSummary: string;
+ lastUpdateTime: string;
+ hot: number;
+ gameplayList: string[];
+ resourceVersionList: ResourceVersion[];
+}
+interface ResourceList {
+ records: Resource[];
+ total: number;
+}
+
+export default function PurchasedResource() {
+ const user = useLocalStorage<User>('user');
+ const userId: number = user?.Id ?? -1;
+ // 热门资源列表
+ const [resources, setResources] = useState<Resource[]>([]);
+ const [totalResource, setTotalResource] = useState(0);
+ const [visible, setVisible] = useState<boolean>(false);
+ const [selectedResource, setSelectedResource] = useState<Resource | null>(null);
+ // 消息提醒
+ const toast = useRef<Toast>(null);
+ const router = useRouter();
+
+ // 分页
+ const [first, setFirst] = useState(0);
+ const [rows, setRows] = useState(5);
+ const onPageChange = (event: PaginatorPageChangeEvent) => {
+ setFirst(event.first);
+ setRows(event.rows);
+ };
+ // 获取帖子列表
+ useEffect(() => {
+ handleSearch();
+ }, [first, rows]);
+
+ const handleSearch = async () => {
+
+ try {
+ const pageNumber = first / rows + 1;
+ const response = await axios.get<ResourceList>(process.env.PUBLIC_URL + `/user/purchase`, {
+ params: {
+ userId,
+ pageNumber,
+ rows
+ }
+ });
+ console.log(response.data.records);
+ setResources(response.data.records);
+ setTotalResource(response.data.total);
+ } catch (err) {
+ console.error('搜索资源失败', err);
+ toast.current?.show({ severity: 'error', summary: 'error', detail: '搜索资源失败' });
+ }
+ };
+
+
return (
- <div className="p-d-flex p-jc-center p-ai-center" style={{ height: '100vh' }}>
- {"一个空页面"}
+ <div className="PurchasedResource">
+ <div className="header">
+ <h1>我的资源库</h1>
+ </div>
+ {/* 全部社区 */}
+ <div className="all-resources-list">
+ {resources.map((resource) => (
+ <Card key={resource.resourceId} className="all-resources-card">
+ <Image alt="avatar" src={process.env.NEXT_PUBLIC_NGINX_URL + "Resource/" + resource.resourcePicture} className="resource-avatar" width="250" height="140" onClick={() => router.push(`/resource/resource-detail/${resource.resourceId}`)} />
+ <div className="resource-header">
+ <div className="resource-content">
+ <h3>{resource.resourceName}</h3>
+ <div className="tags">
+ {resource.gameplayList.map((tag, index) => (
+ <Tag key={index} value={tag} />
+ ))}
+ </div>
+ </div>
+ <div className="resources-states">
+ <Button
+ label="下载"
+ className="classificationButton"
+ onClick={() => {
+ setSelectedResource(resource);
+ setVisible(true);
+ }}
+ />
+ </div>
+ </div>
+ </Card>
+ ))}
+ </div>
+ {totalResource > 5 && (<Paginator className="Paginator" first={first} rows={rows} totalRecords={totalResource} rowsPerPageOptions={[5, 10]} onPageChange={onPageChange} />)}
+ <Dialog
+ header="选择版本并下载"
+ visible={visible}
+ style={{ width: '50vw' }}
+ onHide={() => {
+ setVisible(false);
+ setSelectedResource(null);
+ }}
+ >
+ {selectedResource?.resourceVersionList.map((version) => (
+ <div key={version.resourceVersionId} style={{ marginBottom: '1.5rem' }}>
+ <h4>{version.resourceVersionName}</h4>
+ <p>兼容版本: {version.compatibleVersions.join(', ')}</p>
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+ {version.torrentList.map((torrent) => (
+ <Button
+ key={torrent.torrentRecordId}
+ label={`种子：${torrent.torrentUrl}`}
+ onClick={() => {
+ window.open(torrent.torrentUrl, '_blank');
+ }}
+ className="p-button-sm"
+ />
+ ))}
+ </div>
+ </div>
+ ))}
+ </Dialog>
</div>
);
};
-export default EmptyPage;