Skip to content

Commit

Permalink
fix(web): subjects page
Browse files Browse the repository at this point in the history
  • Loading branch information
@yjl9903
yjl9903 committed Feb 5, 2025
1 parent 32349fd commit a811f16
Show file tree
Hide file tree
Showing 6 changed files with 194 additions and 179 deletions.
31 changes: 13 additions & 18 deletions apps/frontend/web/app/components/Resources/pagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,6 @@ export const Pagination = (props: PaginationProps) => {

return (
<div className="mt-4 flex lt-md:flex-col font-sm">
{/* {timestamp && (
<div className="text-base-400 py-1 pl3 lt-sm:pl1">
<span className="mr1 text-sm i-carbon-update-now op-80"></span>
<span className="select-none">数据更新于 </span>
<span>{formatChinaTime(timestamp)}</span>
</div>
)} */}
<div className="flex-auto"></div>
{(page !== 1 || !complete) && (
<div className="flex lt-md:(mt-4 justify-center) items-center gap-2 text-base-500">
Expand All @@ -53,17 +46,19 @@ export const Pagination = (props: PaginationProps) => {
</PageItem>
)}
{page > 2 && <span className="select-none i-ant-design:ellipsis-outlined"></span>}
{pages.map((p) => (
<PageItem
key={p}
page={p}
link={props.link}
navigate={props.navigate}
className={clsx('block', p === page && 'text-pink-600')}
>
<span>{p}</span>
</PageItem>
))}
{pages
.filter((p) => !complete || p <= page)
.map((p) => (
<PageItem
key={p}
page={p}
link={props.link}
navigate={props.navigate}
className={clsx('block', p === page && 'text-pink-600')}
>
<span>{p}</span>
</PageItem>
))}
{isNext && <span className="select-none i-ant-design:ellipsis-outlined"></span>}
<PageItem
page={page + 1}
Expand Down
237 changes: 116 additions & 121 deletions apps/frontend/web/app/components/Resources/table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ import { Pagination, PaginationProps } from './pagination';
export interface ResourcesTableProps extends Partial<PaginationProps> {
className?: string;

pathname?: string;

resources: Jsonify<Resource<{ tracker: true }>>[];
}

Expand All @@ -35,7 +37,7 @@ function followSearch(location: Location, params: Record<string, string>) {

export default function ResourcesTable(props: ResourcesTableProps) {
const location = useLocation();
const { resources, className } = props;
const { className, pathname, resources, link } = props;

return (
<div>
Expand Down Expand Up @@ -66,7 +68,11 @@ export default function ResourcesTable(props: ResourcesTableProps) {
</thead>
<tbody className="resources-table-body divide-y border-b text-base lt-lg:text-sm">
{resources.map((r) => (
<ResourceItem key={`${r.provider}/${r.providerId}`} resource={r}></ResourceItem>
<ResourceItem
key={`${r.provider}/${r.providerId}`}
pathname={pathname}
resource={r}
></ResourceItem>
))}
</tbody>
</table>
Expand All @@ -79,9 +85,9 @@ export default function ResourcesTable(props: ResourcesTableProps) {
</div>
<div className="flex items-center justify-center">
<span className="">返回&nbsp;</span>
{!location.pathname.endsWith('/1') && (
{!location.pathname.endsWith('/1') && link && (
<>
<NavLink to={`/resources/1${location.search}`} className="text-link">
<NavLink to={link(1)} className="text-link">
第 1 页
</NavLink>
<span>&nbsp;</span>
Expand All @@ -106,13 +112,14 @@ export default function ResourcesTable(props: ResourcesTableProps) {
);
}

export const ResourceItem = memo((props: { resource: Jsonify<Resource<{ tracker: true }>> }) => {
const location = useLocation();
const { resource: r } = props;
export const ResourceItem = memo(
(props: { pathname?: string; resource: Jsonify<Resource<{ tracker: true }>> }) => {
const location = useLocation();
const { pathname, resource: r } = props;

return (
<tr className="">
{/* <td className="py2 text-center">
return (
<tr className="">
{/* <td className="py2 text-center">
<a
href={getDetailHref(r)}
className="text-link-active"
Expand All @@ -121,127 +128,115 @@ export const ResourceItem = memo((props: { resource: Jsonify<Resource<{ tracker:
{formatInTimeZone(new Date(r.createdAt), 'Asia/Shanghai', 'yyyy-MM-dd HH:mm')}
</a>
</td> */}
<td className="py2 pl3 lt-md:pl1">
<div className="flex xl:min-w-[600px] lg:min-w-[480px] lt-lg:w-[calc(95vw-4px)]">
<div className="flex-shrink-0 mr3 flex justify-center items-center">
<NavLink
to={`/resources/1?${followSearch(location, { type: r.type })}`}
className={`flex items-center justify-center h-[32px] w-[32px] rounded-full bg-gray-100 hover:bg-gray-200 ${DisplayTypeColor[r.type]}`}
>
{DisplayTypeIcon[r.type]({})}
</NavLink>
</div>
<div>
<div className="flex items-center justify-start">
<div className="flex-1">
<span className="mr3">
{['动画', '合集', '日剧', '特摄'].includes(r.type) ? (
<>
<a
href={getPikPakUrlChecker(r.magnet)}
className="text-link mr1"
aria-label={`Go to download resource of ${r.title}`}
target="_blank"
<td className="py2 pl3 lt-md:pl1">
<div className="flex xl:min-w-[600px] lg:min-w-[480px] lt-lg:w-[calc(95vw-4px)]">
<div className="flex-shrink-0 mr3 flex justify-center items-center">
<NavLink
to={`${pathname ?? '/resources'}/1?${followSearch(location, { type: r.type })}`}
className={`flex items-center justify-center h-[32px] w-[32px] rounded-full bg-gray-100 hover:bg-gray-200 ${DisplayTypeColor[r.type]}`}
>
{DisplayTypeIcon[r.type]({})}
</NavLink>
</div>
<div>
<div className="flex items-center justify-start">
<div className="flex-1">
<span className="mr3">
{['动画', '合集', '日剧', '特摄'].includes(r.type) ? (
<>
<a
href={getPikPakUrlChecker(r.magnet)}
className="text-link mr1"
aria-label={`Go to download resource of ${r.title}`}
target="_blank"
>
{r.title}
</a>
</>
) : (
<NavLink
to={getDetailHref(r)}
className="text-link"
aria-label={`Go to resource detail of ${r.title}`}
>
{r.title}
</a>
</>
) : (
<NavLink
to={getDetailHref(r)}
className="text-link"
aria-label={`Go to resource detail of ${r.title}`}
>
{r.title}
</NavLink>
)}
</span>
</NavLink>
)}
</span>
</div>
</div>
<div className="mt1 flex items-center gap-4">
<NavLink
to={getDetailHref(r)}
className="text-link-secondary-hover-base text-xs text-zinc-400"
>
发布于 {formatChinaTime(new Date(r.createdAt))}
</NavLink>
<a
href={r.magnet + r.tracker}
data-resource-title={r.title}
className="text-link-secondary-hover-base text-xs text-zinc-400"
aria-label="Download resource"
>
大小 {parseSize(r.size)}
</a>
<NavLink
to={getDetailHref(r)}
className="text-link-secondary text-xs"
aria-label={`Go to resource detail of ${r.title}`}
>
<CarbonLaunch className="vertical-middle relative bottom-[1px] inline-block"></CarbonLaunch>
<span> </span>
<span className="more">更多</span>
</NavLink>
</div>
</div>
<div className="mt1 flex items-center gap-4">
{/* <a
href={`/resources/1?${followSearch({ type: r.type })}`}
className="inline-block select-none"
aria-label={`Go to resources list of type ${r.type}`}
>
<Tag
text={r.type in DisplayType ? DisplayType[r.type] : r.type}
color="bg-light-600 hover:bg-light-700"
className={`px2 py1 text-xs text-center text-base-600 ${DisplayTypeColor[r.type]} `}
/>
</a> */}
</div>
</td>
<td className="py2 px2 lt-sm:px0">
<div className="flex justify-center items-center">
{r.fansub ? (
<NavLink
to={getDetailHref(r)}
className="text-link-secondary-hover-base text-xs text-zinc-400"
to={`${pathname ?? '/resources'}/1?${followSearch(location, { fansub: r.fansub.name })}`}
className="block w-max"
aria-label={`Go to resources list of fansub ${r.fansub.name}`}
>
发布于 {formatChinaTime(new Date(r.createdAt))}
<Tag text={r.fansub.name} className={`text-xs hover:bg-gray-300`} />
</NavLink>
{/* <span className="text-xs text-zinc-400">上传者 {r.publisher.name}</span>
{r.fansub && <span className="text-xs text-zinc-400">字幕组 {r.fansub?.name}</span>} */}
<a
href={r.magnet + r.tracker}
data-resource-title={r.title}
className="text-link-secondary-hover-base text-xs text-zinc-400"
aria-label="Download resource"
>
大小 {parseSize(r.size)}
</a>
) : r.publisher ? (
<NavLink
to={getDetailHref(r)}
className="text-link-secondary text-xs"
aria-label={`Go to resource detail of ${r.title}`}
to={`${pathname ?? '/resources'}/1?${followSearch(location, { publisher: r.publisher.name })}`}
className="block w-max"
aria-label={`Go to resources list of publisher ${r.publisher.name}`}
>
<CarbonLaunch className="vertical-middle relative bottom-[1px] inline-block"></CarbonLaunch>
<span> </span>
<span className="more">更多</span>
<Tag text={r.publisher.name} className={`text-xs hover:bg-gray-300`} />
</NavLink>
</div>
) : null}
</div>
</div>
</td>
<td className="py2 px2 lt-sm:px0">
<div className="flex justify-center items-center">
{r.fansub ? (
<NavLink
to={`/resources/1?${followSearch(location, { fansub: r.fansub.name })}`}
className="block w-max"
aria-label={`Go to resources list of fansub ${r.fansub.name}`}
</td>
<td className="py2 px2">
<div className="flex gap1 items-center justify-start">
<a
href={getPikPakUrlChecker(r.magnet)}
data-resource-title={r.title}
className="play text-xl text-base-500 hover:text-base-900"
aria-label="Play resource"
target="_blank"
>
<Tag text={r.fansub.name} className={`text-xs hover:bg-gray-300`} />
</NavLink>
) : r.publisher ? (
<NavLink
to={`/resources/1?${followSearch(location, { publisher: r.publisher.name })}`}
className="block w-max"
aria-label={`Go to resources list of publisher ${r.publisher.name}`}
<CarbonPlay />
</a>
<a
href={r.magnet + r.tracker}
data-resource-title={r.title}
className="download text-xl text-base-500 hover:text-base-900"
aria-label="Download resource"
>
<Tag text={r.publisher.name} className={`text-xs hover:bg-gray-300`} />
</NavLink>
) : null}
</div>
</td>
<td className="py2 px2">
<div className="flex gap1 items-center justify-start">
<a
href={getPikPakUrlChecker(r.magnet)}
data-resource-title={r.title}
className="play text-xl text-base-500 hover:text-base-900"
aria-label="Play resource"
target="_blank"
>
<CarbonPlay />
</a>
<a
href={r.magnet + r.tracker}
data-resource-title={r.title}
className="download text-xl text-base-500 hover:text-base-900"
aria-label="Download resource"
>
<CarbonDownload />
</a>
{/* <span className="text-xs text-base-400 whitespace-nowrap">{r.size}</span> */}
</div>
</td>
</tr>
);
});
<CarbonDownload />
</a>
{/* <span className="text-xs text-base-400 whitespace-nowrap">{r.size}</span> */}
</div>
</td>
</tr>
);
}
);
Loading

0 comments on commit a811f16

Please sign in to comment.