feat: 友链/书库/移动端导航/排行榜等多模块功能
新增模块： - 友链（friendlink）后端处理 + 前端管理页与友链板 - 书库（library）：导入、章节、封面、阅读页、横竖版自适应 AdaptiveCoverSlot - 顶栏导航（header_nav）配置与 MobileTabBar/MobileRailDrawers 移动端抽屉 - 排行榜 service 测试、站点页面测试、时间线发布（timeline_release） 其它改动： - 后端 handlers/services 全量小幅调整 - 前端组件、库函数、URL/品牌/站点 URL 工具更新 - Lightbox 图片、MdEntries 条目卡、coverColor 派生色相等前端能力
This commit is contained in:
506
frontend/app/links/LinksBoard.tsx
Normal file
506
frontend/app/links/LinksBoard.tsx
Normal file
@@ -0,0 +1,506 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Info, Link2, Loader2, X } from "lucide-react";
|
||||
import {
|
||||
apiMyFriendLinks,
|
||||
apiUpdateMyFriendLink,
|
||||
type FriendLink,
|
||||
type FriendLinkStatus,
|
||||
} from "@/lib/api";
|
||||
import LinksClient from "./LinksClient";
|
||||
|
||||
interface Props {
|
||||
links: FriendLink[];
|
||||
isLoggedIn: boolean;
|
||||
canManage: boolean;
|
||||
/** 本站信息（申请弹窗展示，供对方添加回链） */
|
||||
siteName: string;
|
||||
siteUrl: string;
|
||||
siteLogo: string;
|
||||
}
|
||||
|
||||
/** 申请须知（站点政策，可按需修改） */
|
||||
const APPLY_NOTICE = "纯导链、无回链、带有营销类产品的网站申请将不予通过";
|
||||
|
||||
/** 弹窗内单条申请的可编辑字段 */
|
||||
interface MineEdit {
|
||||
name: string;
|
||||
url: string;
|
||||
reciprocal_url: string;
|
||||
logo_url: string;
|
||||
}
|
||||
|
||||
function toEdit(l: FriendLink): MineEdit {
|
||||
return {
|
||||
name: l.name,
|
||||
url: l.url,
|
||||
reciprocal_url: l.reciprocal_url || "",
|
||||
logo_url: l.logo_url || "",
|
||||
};
|
||||
}
|
||||
|
||||
/** 取 URL 域名用于搜索匹配（解析失败返回原文） */
|
||||
function domainOf(url: string): string {
|
||||
try {
|
||||
return new URL(url).hostname.toLowerCase();
|
||||
} catch {
|
||||
return url.toLowerCase();
|
||||
}
|
||||
}
|
||||
|
||||
const STATUS_META: Record<FriendLinkStatus, { label: string; color: string }> = {
|
||||
pending: { label: "待审核", color: "var(--accent)" },
|
||||
approved: { label: "已通过", color: "#16a34a" },
|
||||
rejected: { label: "已拒绝", color: "var(--danger)" },
|
||||
};
|
||||
|
||||
export default function LinksBoard({
|
||||
links,
|
||||
isLoggedIn,
|
||||
canManage,
|
||||
siteName,
|
||||
siteUrl,
|
||||
siteLogo,
|
||||
}: Props) {
|
||||
const router = useRouter();
|
||||
const [query, setQuery] = useState("");
|
||||
const [mineOpen, setMineOpen] = useState(false);
|
||||
const [applyOpen, setApplyOpen] = useState(false);
|
||||
const [mine, setMine] = useState<FriendLink[] | null>(null);
|
||||
const [mineLoading, setMineLoading] = useState(false);
|
||||
const [edits, setEdits] = useState<Record<number, MineEdit>>({});
|
||||
const [savingId, setSavingId] = useState<number | null>(null);
|
||||
const [editMsg, setEditMsg] = useState<{ id: number; ok: boolean; text: string } | null>(null);
|
||||
|
||||
// 从其他入口带 #apply 锚点跳转过来时（如首页侧栏「申请」），自动打开申请弹窗
|
||||
useEffect(() => {
|
||||
if (window.location.hash === "#apply") setApplyOpen(true);
|
||||
}, []);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const q = query.trim().toLowerCase();
|
||||
if (!q) return links;
|
||||
return links.filter(
|
||||
(l) => l.name.toLowerCase().includes(q) || domainOf(l.url).includes(q)
|
||||
);
|
||||
}, [links, query]);
|
||||
|
||||
const openMine = async () => {
|
||||
setMineOpen(true);
|
||||
if (mine == null) {
|
||||
setMineLoading(true);
|
||||
try {
|
||||
const res = await apiMyFriendLinks();
|
||||
const list = res.links ?? [];
|
||||
setMine(list);
|
||||
setEdits((e) => {
|
||||
const next = { ...e };
|
||||
for (const l of list) if (!next[l.id]) next[l.id] = toEdit(l);
|
||||
return next;
|
||||
});
|
||||
} catch {
|
||||
setMine([]);
|
||||
} finally {
|
||||
setMineLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const setEdit = (id: number, k: keyof MineEdit, v: string) =>
|
||||
setEdits((e) => ({ ...e, [id]: { ...e[id], [k]: v } }));
|
||||
|
||||
const saveMine = async (l: FriendLink) => {
|
||||
const edit = edits[l.id];
|
||||
if (!edit || savingId != null) return;
|
||||
setSavingId(l.id);
|
||||
setEditMsg(null);
|
||||
try {
|
||||
await apiUpdateMyFriendLink(l.id, {
|
||||
name: edit.name.trim(),
|
||||
url: edit.url.trim(),
|
||||
reciprocal_url: edit.reciprocal_url.trim() || undefined,
|
||||
logo_url: edit.logo_url.trim() || undefined,
|
||||
});
|
||||
// 重拉本人申请列表；已通过/已驳回的修改会回退待审，同时刷新 SSR 卡片墙
|
||||
const res = await apiMyFriendLinks();
|
||||
const list = res.links ?? [];
|
||||
setMine(list);
|
||||
setEdits((e) => {
|
||||
const next = { ...e };
|
||||
for (const nl of list) next[nl.id] = toEdit(nl);
|
||||
return next;
|
||||
});
|
||||
const updated = list.find((x) => x.id === l.id);
|
||||
setEditMsg({
|
||||
id: l.id,
|
||||
ok: true,
|
||||
text:
|
||||
updated && updated.status === "pending" && l.status !== "pending"
|
||||
? "已保存，链接重新进入审核队列"
|
||||
: "保存成功",
|
||||
});
|
||||
router.refresh();
|
||||
} catch (err) {
|
||||
setEditMsg({
|
||||
id: l.id,
|
||||
ok: false,
|
||||
text: err instanceof Error ? err.message : "保存失败，请重试",
|
||||
});
|
||||
} finally {
|
||||
setSavingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 搜索 */}
|
||||
<div className="mx-auto max-w-md">
|
||||
<input
|
||||
type="search"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="搜索友链（域名或名称）"
|
||||
className="w-full rounded-full px-4 py-2 text-[14px] outline-none transition-colors"
|
||||
style={{ background: "var(--panel)", color: "var(--ink)", border: "1px solid var(--line)" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div className="mt-4 flex items-center justify-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setApplyOpen(true)}
|
||||
className="inline-flex items-center rounded-lg px-4 py-2 text-[13.5px] font-semibold transition-opacity hover:opacity-90"
|
||||
style={{ background: "var(--accent)", color: "#fff" }}
|
||||
>
|
||||
申请友链
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={openMine}
|
||||
className="inline-flex items-center rounded-lg px-4 py-2 text-[13.5px] font-semibold transition-opacity hover:opacity-90"
|
||||
style={{ background: "var(--ink)", color: "var(--panel)" }}
|
||||
>
|
||||
我的申请
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 我的申请弹窗：列出本人提交的申请，可直接修改并保存 */}
|
||||
{mineOpen ? (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
style={{ background: "rgba(0,0,0,0.5)" }}
|
||||
onClick={() => setMineOpen(false)}
|
||||
>
|
||||
<div
|
||||
className="panel w-full max-w-2xl max-h-[85vh] overflow-y-auto rounded-2xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div
|
||||
className="flex items-center justify-between px-5 py-4"
|
||||
style={{ borderBottom: "1px solid var(--line)" }}
|
||||
>
|
||||
<h3 className="text-[16px] font-bold" style={{ color: "var(--ink)" }}>
|
||||
我的申请
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMineOpen(false)}
|
||||
className="rounded-full p-1 transition-colors hover:bg-[var(--panel-2)]"
|
||||
aria-label="关闭"
|
||||
>
|
||||
<X size={18} style={{ color: "var(--danger)" }} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-5">
|
||||
{!isLoggedIn ? (
|
||||
<p className="meta py-6 text-center text-[13px]">
|
||||
请先 <Link href="/login" className="underline hover:text-[var(--accent)]">登录</Link> 后查看申请记录
|
||||
</p>
|
||||
) : mineLoading ? (
|
||||
<p className="meta flex items-center justify-center gap-2 py-6 text-[13px]">
|
||||
<Loader2 size={14} className="animate-spin" /> 加载中…
|
||||
</p>
|
||||
) : mine == null || mine.length === 0 ? (
|
||||
<p className="meta py-6 text-center text-[13px]">暂无申请记录</p>
|
||||
) : (
|
||||
<ul className="space-y-4">
|
||||
{mine.map((l) => {
|
||||
const edit = edits[l.id] ?? toEdit(l);
|
||||
return (
|
||||
<li
|
||||
key={l.id}
|
||||
className="rounded-xl p-4"
|
||||
style={{ border: "1px solid var(--line)", background: "var(--panel-2)" }}
|
||||
>
|
||||
{/* 头部：LOGO + 名称 + 状态 */}
|
||||
<div className="flex items-center gap-3">
|
||||
{edit.logo_url ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={edit.logo_url}
|
||||
alt=""
|
||||
width={40}
|
||||
height={40}
|
||||
className="rounded-lg object-contain shrink-0"
|
||||
style={{ width: 40, height: 40, background: "var(--panel)" }}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
className="flex shrink-0 items-center justify-center rounded-lg"
|
||||
style={{ width: 40, height: 40, background: "var(--accent-soft)", color: "var(--accent)" }}
|
||||
aria-hidden
|
||||
>
|
||||
<Link2 size={16} />
|
||||
</span>
|
||||
)}
|
||||
<span className="min-w-0 flex-1 truncate text-[14.5px] font-semibold" style={{ color: "var(--ink)" }}>
|
||||
{l.name}
|
||||
</span>
|
||||
<span
|
||||
className="shrink-0 rounded-full px-2.5 py-1 text-[11.5px] font-medium"
|
||||
style={{
|
||||
color: STATUS_META[l.status]?.color ?? "var(--ink-3)",
|
||||
background: "var(--panel)",
|
||||
border: "1px solid var(--line)",
|
||||
}}
|
||||
>
|
||||
{STATUS_META[l.status]?.label ?? l.status}
|
||||
</span>
|
||||
</div>
|
||||
{l.status === "rejected" && l.reject_reason ? (
|
||||
<p className="mt-2 text-[12px]" style={{ color: "var(--danger)" }}>
|
||||
拒绝理由：{l.reject_reason}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{/* 可编辑字段 */}
|
||||
<div className="mt-3 grid gap-3 sm:grid-cols-2">
|
||||
<label className="block">
|
||||
<span className="meta block text-[12px]">名称</span>
|
||||
<input
|
||||
value={edit.name}
|
||||
maxLength={64}
|
||||
onChange={(e) => setEdit(l.id, "name", e.target.value)}
|
||||
className="mt-1 w-full rounded-lg px-3 py-2 text-[13.5px] outline-none"
|
||||
style={{ background: "var(--panel)", color: "var(--ink)", border: "1px solid var(--line)" }}
|
||||
/>
|
||||
</label>
|
||||
<label className="block">
|
||||
<span className="meta block text-[12px]">链接</span>
|
||||
<input
|
||||
type="url"
|
||||
value={edit.url}
|
||||
maxLength={512}
|
||||
onChange={(e) => setEdit(l.id, "url", e.target.value)}
|
||||
className="mt-1 w-full rounded-lg px-3 py-2 text-[13.5px] outline-none"
|
||||
style={{ background: "var(--panel)", color: "var(--ink)", border: "1px solid var(--line)" }}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<label className="mt-3 block">
|
||||
<span className="meta block text-[12px]">友链地址</span>
|
||||
<input
|
||||
type="url"
|
||||
value={edit.reciprocal_url}
|
||||
maxLength={512}
|
||||
onChange={(e) => setEdit(l.id, "reciprocal_url", e.target.value)}
|
||||
className="mt-1 w-full rounded-lg px-3 py-2 text-[13.5px] outline-none"
|
||||
style={{ background: "var(--panel)", color: "var(--ink)", border: "1px solid var(--line)" }}
|
||||
placeholder="添加本站链接的页面"
|
||||
/>
|
||||
</label>
|
||||
<label className="mt-3 block">
|
||||
<span className="meta block text-[12px]">图片</span>
|
||||
<input
|
||||
type="url"
|
||||
value={edit.logo_url}
|
||||
maxLength={512}
|
||||
onChange={(e) => setEdit(l.id, "logo_url", e.target.value)}
|
||||
className="mt-1 w-full rounded-lg px-3 py-2 text-[13.5px] outline-none"
|
||||
style={{ background: "var(--panel)", color: "var(--ink)", border: "1px solid var(--line)" }}
|
||||
placeholder="LOGO图片地址"
|
||||
/>
|
||||
</label>
|
||||
|
||||
{/* 底部：反馈 + 保存 */}
|
||||
<div className="mt-3 flex items-center justify-end gap-3">
|
||||
{editMsg?.id === l.id ? (
|
||||
<span
|
||||
className="mr-auto text-[12px]"
|
||||
style={{ color: editMsg.ok ? "var(--accent)" : "var(--danger)" }}
|
||||
>
|
||||
{editMsg.text}
|
||||
</span>
|
||||
) : l.status !== "pending" ? (
|
||||
<span className="meta mr-auto text-[11.5px]">修改后将重新进入审核</span>
|
||||
) : null}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => saveMine(l)}
|
||||
disabled={savingId === l.id}
|
||||
className="btn btn-primary btn-sm"
|
||||
>
|
||||
{savingId === l.id ? <Loader2 size={13} className="animate-spin" /> : null}
|
||||
保存修改
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* 申请友链弹窗：本站信息 + 申请表单 */}
|
||||
{applyOpen ? (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
style={{ background: "rgba(0,0,0,0.5)" }}
|
||||
onClick={() => setApplyOpen(false)}
|
||||
>
|
||||
<div
|
||||
className="panel w-full max-w-2xl max-h-[85vh] overflow-y-auto rounded-2xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div
|
||||
className="flex items-center justify-between px-5 py-4"
|
||||
style={{ borderBottom: "1px solid var(--line)" }}
|
||||
>
|
||||
<h3 className="text-[16px] font-bold" style={{ color: "var(--ink)" }}>
|
||||
申请友链
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setApplyOpen(false)}
|
||||
className="rounded-full p-1 transition-colors hover:bg-[var(--panel-2)]"
|
||||
aria-label="关闭"
|
||||
>
|
||||
<X size={18} style={{ color: "var(--danger)" }} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-5">
|
||||
{/* 本站信息：供对方先添加我方链接 */}
|
||||
<div
|
||||
className="rounded-xl p-4"
|
||||
style={{ background: "var(--accent-soft)", border: "1px solid var(--line)" }}
|
||||
>
|
||||
<h4 className="text-[14px] font-bold" style={{ color: "var(--ink)" }}>
|
||||
本站信息（请添加本站链接后再申请）
|
||||
</h4>
|
||||
<dl className="mt-2.5 space-y-1.5 text-[13px]" style={{ color: "var(--ink)" }}>
|
||||
<div className="flex gap-2">
|
||||
<dt className="shrink-0 font-semibold">名称：</dt>
|
||||
<dd className="min-w-0 break-all">{siteName}</dd>
|
||||
</div>
|
||||
{siteUrl ? (
|
||||
<div className="flex gap-2">
|
||||
<dt className="shrink-0 font-semibold">地址：</dt>
|
||||
<dd className="min-w-0 break-all">
|
||||
<a
|
||||
href={siteUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:text-[var(--accent)]"
|
||||
>
|
||||
{siteUrl}
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
) : null}
|
||||
{siteLogo ? (
|
||||
<div className="flex gap-2">
|
||||
<dt className="shrink-0 font-semibold">LOGO：</dt>
|
||||
<dd className="min-w-0 break-all">
|
||||
{siteLogo}
|
||||
<span className="ml-1 text-[12px]" style={{ color: "var(--ink-2)" }}>
|
||||
（固定地址，换图不失效）
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
) : null}
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
{/* 申请须知 */}
|
||||
<p
|
||||
className="mt-3 flex items-start gap-2 rounded-lg px-3.5 py-2.5 text-[12.5px] leading-relaxed"
|
||||
style={{
|
||||
background: "var(--panel-2)",
|
||||
borderLeft: "3px solid var(--accent)",
|
||||
color: "var(--ink-2)",
|
||||
}}
|
||||
>
|
||||
<Info size={15} style={{ color: "var(--accent)", flexShrink: 0, marginTop: 2 }} aria-hidden />
|
||||
<span>{APPLY_NOTICE}</span>
|
||||
</p>
|
||||
|
||||
<LinksClient
|
||||
isLoggedIn={isLoggedIn}
|
||||
canManage={canManage}
|
||||
onClose={() => setApplyOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* 卡片墙 */}
|
||||
{filtered.length === 0 ? (
|
||||
<p className="meta mt-8 text-center text-[13.5px]">
|
||||
{links.length === 0 ? "暂无友链，欢迎申请收录" : "没有匹配的友链"}
|
||||
</p>
|
||||
) : (
|
||||
<div className="mt-6 grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
|
||||
{filtered.map((l) => (
|
||||
<a
|
||||
key={l.id}
|
||||
href={l.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title={l.description || l.name}
|
||||
className="flex flex-col items-center justify-center gap-2.5 rounded-xl px-3 py-5 transition-all hover:-translate-y-0.5"
|
||||
style={{
|
||||
background: "var(--panel)",
|
||||
border: "1px solid var(--line)",
|
||||
minHeight: 116,
|
||||
}}
|
||||
>
|
||||
{l.logo_url ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={l.logo_url}
|
||||
alt=""
|
||||
loading="lazy"
|
||||
width={48}
|
||||
height={48}
|
||||
className="rounded-lg object-contain"
|
||||
style={{ width: 48, height: 48 }}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
className="flex items-center justify-center rounded-lg"
|
||||
style={{ width: 48, height: 48, background: "var(--accent-soft)", color: "var(--accent)" }}
|
||||
aria-hidden
|
||||
>
|
||||
<Link2 size={22} />
|
||||
</span>
|
||||
)}
|
||||
<span className="max-w-full truncate text-[13px] font-medium" style={{ color: "var(--ink)" }}>
|
||||
{l.name}
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
247
frontend/app/links/LinksClient.tsx
Normal file
247
frontend/app/links/LinksClient.tsx
Normal file
@@ -0,0 +1,247 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { Loader2, Upload } from "lucide-react";
|
||||
import { apiApplyFriendLink, apiUploadPostImage } from "@/lib/api";
|
||||
|
||||
interface Props {
|
||||
isLoggedIn: boolean;
|
||||
canManage: boolean;
|
||||
/** 关闭所在弹窗（取消按钮）；弹窗外渲染时可不传 */
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
interface FormState {
|
||||
name: string;
|
||||
url: string;
|
||||
reciprocal_url: string;
|
||||
logo_url: string;
|
||||
}
|
||||
|
||||
const EMPTY_FORM: FormState = {
|
||||
name: "",
|
||||
url: "",
|
||||
reciprocal_url: "",
|
||||
logo_url: "",
|
||||
};
|
||||
|
||||
const FIELD_CLASS =
|
||||
"w-full rounded-lg px-3 py-2 text-[14px] outline-none transition-colors";
|
||||
const FIELD_STYLE = {
|
||||
background: "var(--panel-2)",
|
||||
color: "var(--ink)",
|
||||
border: "1px solid var(--line)",
|
||||
};
|
||||
|
||||
export default function LinksClient({ isLoggedIn, canManage, onClose }: Props) {
|
||||
const [form, setForm] = useState<FormState>(EMPTY_FORM);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [msg, setMsg] = useState<{ ok: boolean; text: string } | null>(null);
|
||||
const fileRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
if (!isLoggedIn) {
|
||||
return (
|
||||
<p className="meta mt-3">
|
||||
请先 <Link href="/login" className="underline hover:text-[var(--accent)]">登录</Link> 后申请友情链接。
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
const set = (k: keyof FormState, v: string) =>
|
||||
setForm((f) => ({ ...f, [k]: v }));
|
||||
|
||||
const onPickFile = async (file: File | undefined) => {
|
||||
if (!file || uploading) return;
|
||||
setUploading(true);
|
||||
setMsg(null);
|
||||
try {
|
||||
const res = await apiUploadPostImage(file, file.name);
|
||||
if (res.url) {
|
||||
set("logo_url", res.url);
|
||||
} else {
|
||||
setMsg({ ok: false, text: res.error || "上传失败，请稍后重试" });
|
||||
}
|
||||
} catch {
|
||||
setMsg({ ok: false, text: "上传失败，请稍后重试" });
|
||||
} finally {
|
||||
setUploading(false);
|
||||
if (fileRef.current) fileRef.current.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (submitting) return;
|
||||
setMsg(null);
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await apiApplyFriendLink({
|
||||
name: form.name.trim(),
|
||||
url: form.url.trim(),
|
||||
reciprocal_url: form.reciprocal_url.trim() || undefined,
|
||||
logo_url: form.logo_url.trim() || undefined,
|
||||
});
|
||||
setMsg({ ok: true, text: "申请已提交，待管理员审核通过后展示。" });
|
||||
setForm(EMPTY_FORM);
|
||||
} catch (e) {
|
||||
setMsg({ ok: false, text: e instanceof Error ? e.message : "提交失败，请重试" });
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit} className="mt-5 space-y-4">
|
||||
<label className="block">
|
||||
<span className="block text-[13.5px] font-medium" style={{ color: "var(--ink)" }}>
|
||||
网站名称
|
||||
</span>
|
||||
<input
|
||||
required
|
||||
maxLength={64}
|
||||
value={form.name}
|
||||
onChange={(e) => set("name", e.target.value)}
|
||||
className={`${FIELD_CLASS} mt-1.5`}
|
||||
style={FIELD_STYLE}
|
||||
placeholder="请输入您的网站名称"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="block">
|
||||
<span className="block text-[13.5px] font-medium" style={{ color: "var(--ink)" }}>
|
||||
网站链接
|
||||
</span>
|
||||
<input
|
||||
required
|
||||
type="url"
|
||||
maxLength={512}
|
||||
value={form.url}
|
||||
onChange={(e) => set("url", e.target.value)}
|
||||
className={`${FIELD_CLASS} mt-1.5`}
|
||||
style={FIELD_STYLE}
|
||||
placeholder="请输入您的网站地址（以http开头）"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="block">
|
||||
<span className="block text-[13.5px] font-medium" style={{ color: "var(--ink)" }}>
|
||||
添加我方链接的页面地址
|
||||
</span>
|
||||
<input
|
||||
type="url"
|
||||
maxLength={512}
|
||||
value={form.reciprocal_url}
|
||||
onChange={(e) => set("reciprocal_url", e.target.value)}
|
||||
className={`${FIELD_CLASS} mt-1.5`}
|
||||
style={FIELD_STYLE}
|
||||
placeholder="如：https://您的域名/link.htm（非首页时必填）"
|
||||
/>
|
||||
<span className="meta mt-1.5 block text-[12px]">
|
||||
若友链不在首页，请填写此页面地址，方便管理员核对是否添加了我方链接
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<div className="block">
|
||||
<span className="block text-[13.5px] font-medium" style={{ color: "var(--ink)" }}>
|
||||
填写或上传本站LOGO
|
||||
</span>
|
||||
<div className="mt-1.5 flex items-stretch gap-2">
|
||||
{/* 预览 */}
|
||||
<span
|
||||
className="flex w-16 shrink-0 items-center justify-center rounded-lg text-[11px] meta overflow-hidden"
|
||||
style={{ border: "1px dashed var(--line)", background: "var(--panel-2)" }}
|
||||
aria-hidden
|
||||
>
|
||||
{form.logo_url ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={form.logo_url}
|
||||
alt=""
|
||||
className="h-full w-full object-contain"
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).style.display = "none";
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
"预览"
|
||||
)}
|
||||
</span>
|
||||
<input
|
||||
type="url"
|
||||
maxLength={512}
|
||||
value={form.logo_url}
|
||||
onChange={(e) => set("logo_url", e.target.value)}
|
||||
className={FIELD_CLASS}
|
||||
style={FIELD_STYLE}
|
||||
placeholder="LOGO图片地址"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fileRef.current?.click()}
|
||||
disabled={uploading}
|
||||
className="btn btn-line shrink-0 whitespace-nowrap"
|
||||
>
|
||||
{uploading ? <Loader2 size={14} className="animate-spin" /> : <Upload size={14} />}
|
||||
上传
|
||||
</button>
|
||||
<input
|
||||
ref={fileRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={(e) => onPickFile(e.target.files?.[0])}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{msg ? (
|
||||
<p
|
||||
className="text-[13px] rounded-lg px-3 py-2"
|
||||
style={{
|
||||
background: msg.ok ? "var(--accent-soft)" : "var(--panel-2)",
|
||||
color: msg.ok ? "var(--accent)" : "var(--ink)",
|
||||
border: "1px solid var(--line)",
|
||||
}}
|
||||
>
|
||||
{msg.text}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<div className="flex items-center gap-3 pt-1">
|
||||
<p className="meta flex-1 text-[12px]">
|
||||
提交后进入待审核状态，可在「我的申请」中查看进度或修改
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-line"
|
||||
onClick={() => {
|
||||
if (onClose) {
|
||||
onClose();
|
||||
} else {
|
||||
setForm(EMPTY_FORM);
|
||||
setMsg(null);
|
||||
}
|
||||
}}
|
||||
disabled={submitting}
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button type="submit" disabled={submitting} className="btn btn-primary">
|
||||
{submitting ? "提交中…" : "提交申请"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{canManage ? (
|
||||
<p className="meta text-[12px]">
|
||||
管理员可前往{" "}
|
||||
<Link href="/admin/friend-links" className="underline hover:text-[var(--accent)]">
|
||||
友情链接管理
|
||||
</Link>{" "}
|
||||
审批
|
||||
</p>
|
||||
) : null}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
86
frontend/app/links/page.tsx
Normal file
86
frontend/app/links/page.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
import type { Metadata } from "next";
|
||||
import { cookies } from "next/headers";
|
||||
import { fetchFriendLinks, fetchSiteState, type FriendLink } from "@/lib/api";
|
||||
import { authCookieHeader } from "@/lib/cookies";
|
||||
import { brandAliasPath } from "@/lib/brand";
|
||||
import { getMeCached, getPublicSettingsCached } from "@/lib/serverData";
|
||||
import { isAdminOrAbove } from "@/lib/roles";
|
||||
import { requestCanonical } from "@/lib/canonicalMeta";
|
||||
import { resolveSiteOrigin } from "@/lib/siteUrl";
|
||||
import LinksBoard from "./LinksBoard";
|
||||
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
return {
|
||||
title: "友情链接",
|
||||
description: "本站友情链接收录与申请",
|
||||
...(await requestCanonical("/links")),
|
||||
};
|
||||
}
|
||||
|
||||
export default async function FriendLinksPage() {
|
||||
const cookie = authCookieHeader(await cookies());
|
||||
let links: FriendLink[] = [];
|
||||
let error = "";
|
||||
try {
|
||||
const res = await fetchFriendLinks(cookie || undefined);
|
||||
links = res.links ?? [];
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : "加载友情链接失败";
|
||||
}
|
||||
|
||||
const [settings, siteState, me] = await Promise.all([
|
||||
getPublicSettingsCached(),
|
||||
fetchSiteState(),
|
||||
getMeCached(cookie || undefined),
|
||||
]);
|
||||
const isLoggedIn = !!me.user;
|
||||
const canManage = !!me.user && isAdminOrAbove(me.user.role);
|
||||
// 站点 LOGO 用固定对外地址（换图不变链，对方收藏的地址永不失效），补全为绝对地址供申请人直接复制
|
||||
const siteBase = siteState.site_url?.trim() || resolveSiteOrigin() || "";
|
||||
const logoAlias = settings.logo_light_url
|
||||
? brandAliasPath("logo_light")
|
||||
: settings.favicon_url
|
||||
? brandAliasPath("favicon")
|
||||
: "";
|
||||
const siteLogo = logoAlias && siteBase ? new URL(logoAlias, siteBase).toString() : "";
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-[1200px] px-4 sm:px-6 py-8">
|
||||
{/* 标题 + 申请须知 */}
|
||||
<header className="text-center">
|
||||
<h1
|
||||
className="text-[26px] sm:text-[30px] font-extrabold tracking-tight inline-flex flex-col items-center"
|
||||
style={{ color: "var(--ink)" }}
|
||||
>
|
||||
友情链接
|
||||
<span
|
||||
className="mt-1.5 h-[3px] w-10 rounded-full"
|
||||
style={{ background: "var(--accent)" }}
|
||||
aria-hidden
|
||||
/>
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
{/* 搜索 + 卡片墙 + 我的申请 + 申请弹窗 */}
|
||||
<div className="mt-5">
|
||||
{error ? (
|
||||
<p
|
||||
className="rounded-lg px-3 py-2 text-[13px] text-center"
|
||||
style={{ background: "var(--panel-2)", color: "var(--ink)", border: "1px solid var(--line)" }}
|
||||
>
|
||||
{error}
|
||||
</p>
|
||||
) : (
|
||||
<LinksBoard
|
||||
links={links}
|
||||
isLoggedIn={isLoggedIn}
|
||||
canManage={canManage}
|
||||
siteName={settings.site_name}
|
||||
siteUrl={siteState.site_url}
|
||||
siteLogo={siteLogo}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user