eric/gitlab-instance-0a899031_nomadvip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: clean commit without .next

Browse Source
This commit is contained in:
eric
2026-03-26 02:45:15 -05:00
parent 939db40d5c
commit 7193187dd8
418 changed files with 805 additions and 26119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

490
app/components/NetdiskDownloadsSection.module.css Normal file
View File

@@ -0,0 +1,490 @@
.section {
margin: 0 auto;
max-width: 76rem;
padding: 0 1rem;
}
.wrap {
position: relative;
overflow: hidden;
border-radius: 1.1rem;
border: 1px solid var(--border);
background: linear-gradient(180deg, color-mix(in oklab, var(--card), transparent 0%) 0%, color-mix(in oklab, var(--card), transparent 6%) 100%);
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08);
}
.wrap::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(1200px 420px at 20% -10%, color-mix(in oklab, var(--accent), transparent 75%) 0%, transparent 60%),
radial-gradient(900px 380px at 95% 10%, color-mix(in oklab, #7c3aed, transparent 78%) 0%, transparent 55%);
pointer-events: none;
opacity: 0.65;
}
.header {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem 1.1rem 0.7rem;
}
.title {
display: flex;
align-items: center;
gap: 0.6rem;
font-weight: 800;
letter-spacing: -0.02em;
font-size: 1.05rem;
}
.subtitle {
margin-top: 0.25rem;
color: var(--muted-foreground);
font-size: 0.88rem;
}
.badgeRow {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.75rem;
}
.gridWrap {
padding: 0.55rem 1.1rem 1.05rem;
}
.badge {
border: 1px solid var(--border);
background: color-mix(in oklab, var(--card), transparent 25%);
color: var(--foreground);
padding: 0.3rem 0.55rem;
border-radius: 999px;
font-size: 0.8rem;
line-height: 1;
}
.vipChip {
border: 1px solid color-mix(in oklab, var(--accent), transparent 55%);
background: color-mix(in oklab, var(--accent), transparent 85%);
color: var(--foreground);
}
.guestChip {
border: 1px solid color-mix(in oklab, var(--muted-foreground), transparent 55%);
background: color-mix(in oklab, var(--card), transparent 40%);
color: var(--muted-foreground);
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.65rem;
}
.tag {
font-size: 0.72rem;
border: 1px solid var(--border);
color: var(--muted-foreground);
border-radius: 999px;
padding: 0.2rem 0.45rem;
}
.toggleBtn {
border: 1px solid var(--border);
background: color-mix(in oklab, var(--card), transparent 10%);
color: var(--foreground);
border-radius: 999px;
padding: 0.35rem 0.6rem;
font-size: 0.82rem;
line-height: 1;
display: inline-flex;
align-items: center;
gap: 0.4rem;
transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.toggleBtn:hover {
border-color: color-mix(in oklab, var(--accent), transparent 55%);
background: color-mix(in oklab, var(--accent), transparent 88%);
}
.toggleBtn:active {
transform: scale(0.98);
}
.chev {
transition: transform 160ms ease;
}
.chevOpen {
transform: rotate(180deg);
}
.panel {
border-top: 1px solid var(--border);
padding: 0.55rem 0.55rem 0.65rem;
width: 100%;
align-self: stretch;
text-align: center;
}
.panelHint {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.4rem;
}
.hintText {
font-size: 0.8rem;
color: var(--muted-foreground);
}
.links {
display: grid;
gap: 0.45rem;
}
.linkRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
border: 1px solid var(--border);
border-radius: 0.9rem;
padding: 0.45rem 0.6rem;
background: color-mix(in oklab, var(--card), transparent 0%);
}
.provider {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-width: 6rem;
font-weight: 650;
}
.providerDot {
width: 0.55rem;
height: 0.55rem;
border-radius: 999px;
}
.dotBaidu {
background: #3b82f6;
}
.dotQuark {
background: #f59e0b;
}
.linkTextWrap {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.79rem;
color: var(--foreground);
opacity: 0.95;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mutedMono {
color: var(--muted-foreground);
opacity: 0.95;
}
.actions {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.pillBtn {
border: 1px solid var(--border);
background: color-mix(in oklab, var(--card), transparent 10%);
color: var(--foreground);
border-radius: 999px;
padding: 0.35rem 0.55rem;
font-size: 0.79rem;
line-height: 1;
display: inline-flex;
align-items: center;
gap: 0.35rem;
transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.pillBtn:hover {
border-color: color-mix(in oklab, var(--accent), transparent 55%);
background: color-mix(in oklab, var(--accent), transparent 88%);
}
.pillBtn:active {
transform: scale(0.98);
}
.pillBtnDisabled,
.pillBtnDisabled:hover,
.pillBtnDisabled:active {
opacity: 0.45;
cursor: not-allowed;
transform: none;
border-color: var(--border);
background: color-mix(in oklab, var(--card), transparent 25%);
}
.guestCta {
margin-top: 0.7rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid color-mix(in oklab, var(--accent), transparent 58%);
background: color-mix(in oklab, var(--accent), transparent 90%);
color: var(--accent);
border-radius: 999px;
padding: 0.35rem 0.6rem;
font-size: 0.82rem;
}
.guestBlur {
filter: blur(6px);
opacity: 0.6;
user-select: none;
pointer-events: none;
}
.footerNote {
position: relative;
border-top: 1px solid var(--border);
padding: 0.75rem 1.1rem 1.05rem;
color: var(--muted-foreground);
font-size: 0.85rem;
line-height: 1.55;
}
.iconRow {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding-top: 0.25rem;
}
.netdiskIconBtn {
appearance: none;
border: 1px solid var(--border);
background: color-mix(in oklab, var(--card), transparent 0%);
color: var(--foreground);
width: 46px;
height: 38px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, opacity 160ms ease;
cursor: pointer;
}
.netdiskIconBtn:hover {
border-color: color-mix(in oklab, var(--accent), transparent 55%);
background: color-mix(in oklab, var(--accent), transparent 92%);
transform: translateY(-1px);
}
.netdiskIconBtn:active {
transform: translateY(0px) scale(0.98);
}
.netdiskIconBtnDisabled,
.netdiskIconBtnDisabled:hover,
.netdiskIconBtnDisabled:active {
opacity: 0.45;
cursor: not-allowed;
transform: none;
border-color: var(--border);
background: color-mix(in oklab, var(--card), transparent 25%);
}
.iconColorBaidu {
color: #3b82f6;
}
.iconColorQuark {
color: #f59e0b;
}
.modalOverlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
z-index: 50;
}
.modal {
width: min(560px, 100%);
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25);
overflow: hidden;
}
.modalHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.9rem 1rem 0.7rem;
border-bottom: 1px solid var(--border);
}
.modalTitleRow {
display: flex;
align-items: center;
gap: 0.7rem;
min-width: 0;
}
.modalIcon {
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
}
.modalTitle {
font-weight: 700;
letter-spacing: -0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.modalCloseBtn {
border: 1px solid var(--border);
background: color-mix(in oklab, var(--card), transparent 0%);
width: 36px;
height: 34px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--foreground);
}
.modalCloseBtn:hover {
border-color: color-mix(in oklab, var(--accent), transparent 55%);
background: color-mix(in oklab, var(--accent), transparent 92%);
}
.modalBody {
padding: 0.9rem 1rem 1rem;
}
.modalRow {
display: flex;
gap: 1rem;
align-items: flex-start;
justify-content: space-between;
padding: 0.55rem 0;
border-bottom: 1px solid color-mix(in oklab, var(--border), transparent 0%);
}
.modalRow:last-child {
border-bottom: none;
}
.modalLabel {
flex: 0 0 auto;
width: 72px;
color: var(--muted-foreground);
font-size: 0.86rem;
padding-top: 0.1rem;
}
.modalMono {
flex: 1;
min-width: 0;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.86rem;
color: var(--foreground);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.modalActions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.65rem;
padding: 0.9rem 1rem 1rem;
border-top: 1px solid var(--border);
}
.modalCopyBtn {
border: 1px solid var(--border);
background: color-mix(in oklab, var(--card), transparent 0%);
color: var(--foreground);
border-radius: 14px;
padding: 0.55rem 0.85rem;
font-size: 0.9rem;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
}
.modalCopyBtn:hover {
border-color: color-mix(in oklab, var(--accent), transparent 55%);
}
.modalOpenBtn {
border: 1px solid var(--border);
background: var(--accent);
color: var(--accent-foreground);
border-radius: 14px;
padding: 0.55rem 0.85rem;
font-size: 0.9rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
text-decoration: none;
}
.modalOpenBtn:hover {
opacity: 0.95;
}
.modalOpenBtnDisabled,
.modalOpenBtnDisabled:hover {
border: 1px solid var(--border);
background: color-mix(in oklab, var(--card), transparent 15%);
color: var(--muted-foreground);
cursor: not-allowed;
opacity: 0.65;
text-decoration: none;
}

240
app/components/NetdiskDownloadsSection.tsx Normal file
View File

@@ -0,0 +1,240 @@
"use client";
import Link from "next/link";
import { useEffect, useState } from "react";
import vipStyles from "@/app/vip/components/vip.module.css";
import styles from "./NetdiskDownloadsSection.module.css";
import { Copyable } from "@/app/vip/components/Copyable";
import { NETDISK_RESOURCES, type NetdiskLink, type NetdiskResource } from "@/app/config/netdisk-downloads";
type Variant = "vip" | "guest";
type ModalState = {
resource: NetdiskResource;
link: NetdiskLink;
} | null;
function BaiduDownloadIcon() {
return (
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<path d="M12 3v12" />
<path d="m7 10 5 5 5-5" />
<path d="M21 21H3" />
</svg>
);
}
function QuarkDownloadIcon() {
return (
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<path d="M12 3v12" />
<path d="m17 10-5 5-5-5" />
<path d="M21 21H3" />
</svg>
);
}
function buildCopyText(resource: NetdiskResource, link: NetdiskLink) {
const url = link.url?.trim() || "";
const code = link.code?.trim() || "";
const codeLabel = link.codeLabel || "提取码";
// 复制内容尽量“无歧义”，不写百度/夸克字样（避免用户认为需要转发“带品牌”）
return [resource.title, url, code ? `${codeLabel}: ${code}` : ""].filter(Boolean).join("\n");
}
function getResourceEmoji(resource: NetdiskResource) {
if (resource.id === "system-firmware") return "🧱";
if (resource.id === "software-tools") return "🛠️";
return "📦";
}
export function NetdiskDownloadsSection({ variant, onRequireVip }: { variant: Variant; onRequireVip?: () => void }) {
const [open, setOpen] = useState<Record<string, boolean>>({});
const [modal, setModal] = useState<ModalState>(null);
const locked = variant === "guest";
useEffect(() => {
if (!modal) return;
const onKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape") setModal(null);
};
window.addEventListener("keydown", onKeyDown);
return () => window.removeEventListener("keydown", onKeyDown);
}, [modal]);
const getLinkByProvider = (resource: NetdiskResource, provider: NetdiskLink["provider"]) => {
return resource.links.find((l) => l.provider === provider) || null;
};
return (
<div className={vipStyles.section} aria-label="网盘下载">
<h2 className={vipStyles.sectionTitle}>网盘下载</h2>
<div className={`${vipStyles.topicGrid} animate__animated animate__fadeInUp`} style={{ animationDelay: "0.2s", animationFillMode: "both" }}>
{NETDISK_RESOURCES.map((r) => {
const isOpen = !!open[r.id];
const emoji = getResourceEmoji(r);
return (
<div
key={r.id}
className={vipStyles.topicCard}
role="button"
tabIndex={0}
onClick={() => {
if (locked) {
onRequireVip?.();
return;
}
setOpen((m) => ({ ...m, [r.id]: !m[r.id] }));
}}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
if (locked) onRequireVip?.();
else setOpen((m) => ({ ...m, [r.id]: !m[r.id] }));
}
}}
aria-expanded={variant === "vip" ? isOpen : undefined}
style={{ textAlign: "center", cursor: "pointer", opacity: locked ? 0.98 : 1 }}
>
{locked && <span className={vipStyles.topicLock} title="会员专享">🔒</span>}
<span className={vipStyles.topicCardInner}>
<span className={vipStyles.topicIcon} aria-hidden="true">
{emoji}
</span>
<span className={vipStyles.topicTitle}>{r.title}</span>
</span>
{variant === "vip" && isOpen && (
<div id={`netdisk-panel-${r.id}`} className={styles.panel} role="region" aria-label={`${r.title} 链接`}>
{(() => {
const baidu = getLinkByProvider(r, "baidu");
const quark = getLinkByProvider(r, "quark");
const baiduUrl = baidu?.url?.trim() || "";
const quarkUrl = quark?.url?.trim() || "";
return (
<div className={styles.iconRow} aria-label="下载图标">
<button
type="button"
className={`${styles.netdiskIconBtn} ${!baiduUrl ? styles.netdiskIconBtnDisabled : ""}`}
onClick={() => {
if (!baidu || !baiduUrl) return;
setModal({ resource: r, link: baidu });
}}
disabled={!baiduUrl}
aria-disabled={!baiduUrl}
title={baiduUrl ? "打开分享链接" : "链接待补充"}
>
<span className={styles.iconColorBaidu} aria-hidden="true">
<BaiduDownloadIcon />
</span>
</button>
<button
type="button"
className={`${styles.netdiskIconBtn} ${!quarkUrl ? styles.netdiskIconBtnDisabled : ""}`}
onClick={() => {
if (!quark || !quarkUrl) return;
setModal({ resource: r, link: quark });
}}
disabled={!quarkUrl}
aria-disabled={!quarkUrl}
title={quarkUrl ? "打开分享链接" : "链接待补充"}
>
<span className={styles.iconColorQuark} aria-hidden="true">
<QuarkDownloadIcon />
</span>
</button>
</div>
);
})()}
</div>
)}
</div>
);
})}
</div>
{modal && (
<div
className={styles.modalOverlay}
role="dialog"
aria-modal="true"
aria-label="分享链接弹窗"
onMouseDown={(e) => {
if (e.target === e.currentTarget) setModal(null);
}}
>
<div className={styles.modal}>
<div className={styles.modalHeader}>
<div className={styles.modalTitleRow}>
<span className={styles.modalIcon} aria-hidden="true">
{modal.link.provider === "baidu" ? <BaiduDownloadIcon /> : <QuarkDownloadIcon />}
</span>
<div className={styles.modalTitle}>{modal.resource.title}</div>
</div>
<button type="button" className={styles.modalCloseBtn} onClick={() => setModal(null)} aria-label="关闭">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<path d="M18 6 6 18" />
<path d="M6 6l12 12" />
</svg>
</button>
</div>
<div className={styles.modalBody}>
<div className={styles.modalRow}>
<div className={styles.modalLabel}>分享链接</div>
<div className={styles.modalMono} title={modal.link.url || ""}>
{modal.link.url || "链接待补充"}
</div>
</div>
<div className={styles.modalRow}>
<div className={styles.modalLabel}>{modal.link.codeLabel || "提取码"}</div>
<div className={styles.modalMono}>{modal.link.code?.trim() || "——"}</div>
</div>
</div>
<div className={styles.modalActions}>
<Copyable
text={buildCopyText(modal.resource, modal.link)}
className={styles.modalCopyBtn}
>
复制
</Copyable>
{modal.link.url ? (
<Link
className={styles.modalOpenBtn}
href={modal.link.url}
target="_blank"
rel="noopener noreferrer"
title="打开分享链接"
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<path d="M14 3h7v7" />
<path d="M10 14L21 3" />
<path d="M21 14v7H3V3h7" />
</svg>
</Link>
) : (
<span className={`${styles.modalOpenBtn} ${styles.modalOpenBtnDisabled}`} aria-disabled="true">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<path d="M14 3h7v7" />
<path d="M10 14L21 3" />
<path d="M21 14v7H3V3h7" />
</svg>
</span>
)}
</div>
</div>
</div>
)}
</div>
);
}