Add configurable homepage social links

app/admin/page.tsx

@@ -2,9 +2,11 @@ import { cookies } from "next/headers";
 import { AdminPostList } from "@/components/AdminPostList";
 import { AdminUserManager } from "@/components/AdminUserManager";
 import { CreatePostForm } from "@/components/CreatePostForm";
+import { SocialLinksManager } from "@/components/SocialLinksManager";
 import { cookieName, isAdminSession, verifySession } from "@/lib/auth";
 import { getDb } from "@/lib/mongo";
 import { buildOwnedPostFilter, buildPinnedSort, serializePost } from "@/lib/posts";
+import { getDefaultSocialLinks, getSiteSettings } from "@/lib/site-settings";
 import { findUserById, getEffectiveDailyPostLimit, getShanghaiDayRange } from "@/lib/users";
 import { Post } from "@/types/post";
 
@@ -203,13 +205,15 @@ export default async function AdminPage() {
   const adminView = isAdminSession(session);
   const roleLabel = ROLE_LABELS[(session?.role as ManagedUser["role"]) || "user"];
 
-  const [recentPosts, favoritePosts, availableTags, publishQuota, managedUsers] = await Promise.all([
+  const [recentPosts, favoritePosts, availableTags, publishQuota, managedUsers, siteSettings] =
-    fetchRecentPosts(session),
+    await Promise.all([
-    fetchFavoritePosts(session),
+      fetchRecentPosts(session),
-    fetchAvailableTags(session),
+      fetchFavoritePosts(session),
-    fetchPublishQuota(session),
+      fetchAvailableTags(session),
-    adminView ? fetchManagedUsers() : Promise.resolve([] as ManagedUser[])
+      fetchPublishQuota(session),
-  ]);
+      adminView ? fetchManagedUsers() : Promise.resolve([] as ManagedUser[]),
+      adminView ? getSiteSettings() : Promise.resolve({ socialLinks: getDefaultSocialLinks() })
+    ]);
 
   return (
     <div className="space-y-6">
@@ -218,7 +222,7 @@ export default async function AdminPage() {
           <div className="space-y-2">
             <h1 className="text-2xl font-semibold text-slate-900">内容后台</h1>
             <p className="text-sm text-slate-500">
-              登录用户可以发布、编辑自己的内容和管理自己的收藏；管理员额外拥有置顶、删帖、删用户和调整用户等级/额度的全部权限。
+              登录用户可以发布、编辑自己的内容和管理自己的收藏；管理员额外拥有置顶、删帖、删用户、调整用户等级/额度，以及维护首页社交链接的全部权限。
             </p>
           </div>
           <div className="flex items-center gap-3">
@@ -235,6 +239,8 @@ export default async function AdminPage() {
         </div>
       </section>
 
+      {adminView ? <SocialLinksManager initialLinks={siteSettings.socialLinks} /> : null}
+
       <CreatePostForm
         availableTags={availableTags}
         publishLimit={publishQuota.limit}

app/api/admin/settings/route.ts

@@ -0,0 +1,53 @@
+import { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+import { cookieName, isAdminSession, verifySession } from "@/lib/auth";
+import { getSiteSettings, updateSiteSettings } from "@/lib/site-settings";
+
+const socialLinkSchema = z.object({
+  id: z.string().trim().min(1).max(80),
+  label: z.string().trim().min(1).max(30),
+  url: z.string().trim().url(),
+  iconUrl: z.string().trim().url().optional().or(z.literal(""))
+});
+
+const siteSettingsSchema = z.object({
+  socialLinks: z.array(socialLinkSchema).max(20)
+});
+
+async function requireAdmin(req: NextRequest) {
+  const token = req.cookies.get(cookieName)?.value;
+  const session = await verifySession(token);
+  if (!isAdminSession(session)) {
+    return null;
+  }
+  return session;
+}
+
+export async function GET(req: NextRequest) {
+  const session = await requireAdmin(req);
+  if (!session) {
+    return NextResponse.json({ error: "未授权" }, { status: 401 });
+  }
+
+  const settings = await getSiteSettings();
+  return NextResponse.json(settings);
+}
+
+export async function PATCH(req: NextRequest) {
+  const session = await requireAdmin(req);
+  if (!session) {
+    return NextResponse.json({ error: "未授权" }, { status: 401 });
+  }
+
+  const body = await req.json().catch(() => ({}));
+  const parsed = siteSettingsSchema.safeParse(body);
+  if (!parsed.success) {
+    return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
+  }
+
+  await updateSiteSettings({
+    socialLinks: parsed.data.socialLinks
+  });
+
+  return NextResponse.json({ ok: true, socialLinks: parsed.data.socialLinks });
+}

app/page.tsx

@@ -1,7 +1,9 @@
 import { PostCard } from "@/components/PostCard";
+import { SocialLinksBar } from "@/components/SocialLinksBar";
 import { getDb } from "@/lib/mongo";
 import { buildPinnedSort, serializePost } from "@/lib/posts";
 import { buildSearchFilter } from "@/lib/search";
+import { getSiteSettings } from "@/lib/site-settings";
 import { Post } from "@/types/post";
 
 export const dynamic = "force-dynamic";
@@ -53,7 +55,11 @@ export default async function HomePage({
   const tag = searchParams?.tag?.trim();
   const q = searchParams?.q?.trim();
   const page = Number.parseInt(searchParams?.page || "1", 10) || 1;
-  const { posts, total, totalPages, page: currentPage } = await fetchPosts({ tag, q, page });
+
+  const [{ posts, total, totalPages, page: currentPage }, siteSettings] = await Promise.all([
+    fetchPosts({ tag, q, page }),
+    getSiteSettings()
+  ]);
 
   const buildHref = (targetPage: number) => {
     const params = new URLSearchParams();
@@ -85,8 +91,13 @@ export default async function HomePage({
         <p className="mt-2 text-sm text-white/80">
           未登录用户可以浏览全部内容；登录用户可以发布并修改自己的内容；置顶内容会优先展示。
         </p>
+
+        <div className="mt-4">
+          <SocialLinksBar links={siteSettings.socialLinks} title="社交链接" />
+        </div>
+
         {tag ? (
-          <div className="mt-3 inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-xs font-medium">
+          <div className="mt-4 inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-xs font-medium">
             <span>当前标签 #{tag}</span>
             <a
               href={clearTagHref}

components/SocialLinksBar.tsx

@@ -0,0 +1,60 @@
+import { SocialLink } from "@/types/site";
+
+function normalizeLinks(links: SocialLink[]) {
+  return links.filter((item) => item.url && item.label);
+}
+
+export function SocialLinksBar({
+  links,
+  title = "社交链接",
+  compact = false
+}: {
+  links: SocialLink[];
+  title?: string;
+  compact?: boolean;
+}) {
+  const visibleLinks = normalizeLinks(links);
+  if (visibleLinks.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={compact ? "flex flex-wrap items-center gap-2" : "space-y-3"}>
+      {!compact ? <p className="text-xs font-medium uppercase tracking-[0.2em] text-white/70">{title}</p> : null}
+      <div className="flex flex-wrap items-center gap-3">
+        {visibleLinks.map((link) => (
+          <a
+            key={link.id}
+            href={link.url}
+            target="_blank"
+            rel="noreferrer"
+            className={`group inline-flex items-center gap-2 rounded-full transition ${
+              compact
+                ? "bg-white/70 px-3 py-2 text-sm text-slate-700 ring-1 ring-slate-200 hover:bg-white"
+                : "bg-white/12 px-3 py-2 text-sm text-white ring-1 ring-white/15 hover:bg-white/20"
+            }`}
+          >
+            {link.iconUrl ? (
+              <img
+                src={link.iconUrl}
+                alt=""
+                className="h-5 w-5 rounded-full object-cover"
+                loading="lazy"
+                referrerPolicy="no-referrer"
+              />
+            ) : (
+              <span
+                className={`flex h-5 w-5 items-center justify-center rounded-full text-[11px] font-semibold ${
+                  compact ? "bg-slate-900 text-white" : "bg-white text-brand-700"
+                }`}
+              >
+                {link.label.slice(0, 1)}
+              </span>
+            )}
+            <span>{link.label}</span>
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}

components/SocialLinksManager.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { useState } from "react";
+import { SocialLink } from "@/types/site";
+
+function createDraftLink(index: number): SocialLink {
+  return {
+    id: `social-link-${Date.now()}-${index}`,
+    label: "",
+    url: "",
+    iconUrl: ""
+  };
+}
+
+export function SocialLinksManager({ initialLinks }: { initialLinks: SocialLink[] }) {
+  const [links, setLinks] = useState<SocialLink[]>(initialLinks);
+  const [saving, setSaving] = useState(false);
+
+  function updateLink(id: string, key: keyof SocialLink, value: string) {
+    setLinks((prev) => prev.map((item) => (item.id === id ? { ...item, [key]: value } : item)));
+  }
+
+  function addLink() {
+    setLinks((prev) => [...prev, createDraftLink(prev.length + 1)]);
+  }
+
+  function removeLink(id: string) {
+    setLinks((prev) => prev.filter((item) => item.id !== id));
+  }
+
+  async function handleSave() {
+    const sanitized = links
+      .map((item) => ({
+        ...item,
+        label: item.label.trim(),
+        url: item.url.trim(),
+        iconUrl: item.iconUrl?.trim() || ""
+      }))
+      .filter((item) => item.label || item.url || item.iconUrl);
+
+    if (sanitized.some((item) => !item.label || !item.url)) {
+      alert("每条社交链接都需要填写名称和地址。");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const res = await fetch("/api/admin/settings", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ socialLinks: sanitized })
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        alert(data.error || "保存社交链接失败");
+        return;
+      }
+
+      setLinks(data.socialLinks || sanitized);
+      alert("社交链接已保存。");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <section className="space-y-4 rounded-2xl bg-white/80 p-5 shadow-sm ring-1 ring-slate-100">
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold text-slate-900">首页社交链接</h3>
+        <p className="text-sm text-slate-500">
+          可配置首页顶部的 GitHub、B站等入口，也可以新增其他链接，并为每个入口自定义图标地址。
+        </p>
+      </div>
+
+      <div className="space-y-3">
+        {links.map((link, index) => (
+          <div key={link.id} className="rounded-2xl border border-slate-100 bg-white/70 p-4">
+            <div className="mb-3 flex items-center justify-between gap-3">
+              <p className="text-sm font-medium text-slate-700">链接 {index + 1}</p>
+              <button
+                type="button"
+                onClick={() => removeLink(link.id)}
+                className="rounded-full bg-red-50 px-3 py-1 text-xs font-medium text-red-600 ring-1 ring-red-100 hover:bg-red-100"
+              >
+                删除
+              </button>
+            </div>
+            <div className="grid gap-3 md:grid-cols-3">
+              <label className="block space-y-1">
+                <span className="text-xs font-medium text-slate-500">名称</span>
+                <input
+                  value={link.label}
+                  onChange={(e) => updateLink(link.id, "label", e.target.value)}
+                  placeholder="例如：GitHub"
+                  className="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm shadow-inner focus:border-brand-500 focus:outline-none"
+                />
+              </label>
+              <label className="block space-y-1">
+                <span className="text-xs font-medium text-slate-500">链接地址</span>
+                <input
+                  value={link.url}
+                  onChange={(e) => updateLink(link.id, "url", e.target.value)}
+                  placeholder="https://github.com/..."
+                  className="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm shadow-inner focus:border-brand-500 focus:outline-none"
+                />
+              </label>
+              <label className="block space-y-1">
+                <span className="text-xs font-medium text-slate-500">图标地址</span>
+                <input
+                  value={link.iconUrl || ""}
+                  onChange={(e) => updateLink(link.id, "iconUrl", e.target.value)}
+                  placeholder="https://example.com/icon.png"
+                  className="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm shadow-inner focus:border-brand-500 focus:outline-none"
+                />
+              </label>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="flex flex-wrap items-center gap-3">
+        <button
+          type="button"
+          onClick={addLink}
+          className="rounded-full bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 ring-1 ring-slate-200 hover:text-brand-600"
+        >
+          添加链接
+        </button>
+        <button
+          type="button"
+          disabled={saving}
+          onClick={handleSave}
+          className="rounded-full bg-brand-600 px-4 py-2 text-sm font-medium text-white shadow hover:bg-brand-700 disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          {saving ? "保存中..." : "保存社交链接"}
+        </button>
+      </div>
+    </section>
+  );
+}

lib/site-settings.ts

@@ -0,0 +1,89 @@
+import { getDb } from "@/lib/mongo";
+import { SiteSettings, SocialLink } from "@/types/site";
+
+const SETTINGS_COLLECTION = "settings";
+const SITE_SETTINGS_ID = "site";
+
+type SiteSettingsDocument = {
+  _id: string;
+  socialLinks?: SocialLink[];
+};
+
+const DEFAULT_SOCIAL_LINKS: SocialLink[] = [
+  {
+    id: "github",
+    label: "GitHub",
+    url: "",
+    iconUrl: ""
+  },
+  {
+    id: "bilibili",
+    label: "B站",
+    url: "",
+    iconUrl: ""
+  }
+];
+
+function normalizeSocialLink(link: any, index: number): SocialLink | null {
+  if (!link || typeof link !== "object") {
+    return null;
+  }
+
+  const label = typeof link.label === "string" ? link.label.trim() : "";
+  const url = typeof link.url === "string" ? link.url.trim() : "";
+  const iconUrl = typeof link.iconUrl === "string" ? link.iconUrl.trim() : "";
+  const id =
+    typeof link.id === "string" && link.id.trim()
+      ? link.id.trim()
+      : `social-link-${index + 1}`;
+
+  if (!label && !url && !iconUrl) {
+    return null;
+  }
+
+  return {
+    id,
+    label: label || `链接 ${index + 1}`,
+    url,
+    iconUrl
+  };
+}
+
+function getSettingsCollection() {
+  return getDb().then((db) => db.collection<SiteSettingsDocument>(SETTINGS_COLLECTION));
+}
+
+export function getDefaultSocialLinks() {
+  return DEFAULT_SOCIAL_LINKS.map((item) => ({ ...item }));
+}
+
+export function normalizeSiteSettings(doc?: Partial<SiteSettingsDocument> | null): SiteSettings {
+  const socialLinks = Array.isArray(doc?.socialLinks)
+    ? doc.socialLinks
+        .map((item: any, index: number) => normalizeSocialLink(item, index))
+        .filter(Boolean)
+    : [];
+
+  return {
+    socialLinks: socialLinks.length > 0 ? (socialLinks as SocialLink[]) : getDefaultSocialLinks()
+  };
+}
+
+export async function getSiteSettings(): Promise<SiteSettings> {
+  const collection = await getSettingsCollection();
+  const doc = await collection.findOne({ _id: SITE_SETTINGS_ID });
+  return normalizeSiteSettings(doc);
+}
+
+export async function updateSiteSettings(settings: SiteSettings) {
+  const collection = await getSettingsCollection();
+  await collection.updateOne(
+    { _id: SITE_SETTINGS_ID },
+    {
+      $set: {
+        socialLinks: settings.socialLinks
+      }
+    },
+    { upsert: true }
+  );
+}

types/site.ts

@@ -0,0 +1,10 @@
+export type SocialLink = {
+  id: string;
+  label: string;
+  url: string;
+  iconUrl?: string;
+};
+
+export type SiteSettings = {
+  socialLinks: SocialLink[];
+};