feat: 代码片段功能与 Markdown 内嵌片段渲染、文档截图等
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { ArrowDown, ArrowUp, BookOpen, ExternalLink, Home, Plus, Trash2, Trophy } from "lucide-react";
|
||||
import { ArrowDown, ArrowUp, BookOpen, CodeXml, ExternalLink, Home, Plus, Trash2, Trophy } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { AdminSettingsActions, AdminSettingsGroup, AdminSwitch } from "@/components/admin";
|
||||
import { apiUpdateSiteSettings, type PublicSettings } from "@/lib/api";
|
||||
@@ -19,6 +19,7 @@ const BUILTIN_ICONS: Record<HeaderNavBuiltinKey, React.ReactNode> = {
|
||||
home: <Home size={14} />,
|
||||
leaderboard: <Trophy size={14} />,
|
||||
library: <BookOpen size={14} />,
|
||||
snippets: <CodeXml size={14} />,
|
||||
};
|
||||
|
||||
/** 内置项目标页说明（实际地址随伪静态风格变化，不允许改地址） */
|
||||
@@ -26,6 +27,7 @@ const BUILTIN_HINTS: Record<HeaderNavBuiltinKey, string> = {
|
||||
home: "站点首页 /",
|
||||
leaderboard: "排行榜页（地址随伪静态风格变化）",
|
||||
library: "书库页（地址随伪静态风格变化）",
|
||||
snippets: "片段广场页（地址随伪静态风格变化）",
|
||||
};
|
||||
|
||||
type BuiltinSwitches = Record<HeaderNavBuiltinKey, boolean>;
|
||||
@@ -42,6 +44,7 @@ function switchesOf(items: HeaderNavItem[]): BuiltinSwitches {
|
||||
home: present.has("home"),
|
||||
leaderboard: present.has("leaderboard"),
|
||||
library: present.has("library"),
|
||||
snippets: present.has("snippets"),
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
277
frontend/app/admin/snippets/SnippetsAdmin.tsx
Normal file
277
frontend/app/admin/snippets/SnippetsAdmin.tsx
Normal file
@@ -0,0 +1,277 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { CodeXml, Copy, Eye, EyeOff, GitFork, Loader2, MessagesSquare, Trash2 } from "lucide-react";
|
||||
import {
|
||||
AdminEmpty,
|
||||
AdminPageHeader,
|
||||
AdminPager,
|
||||
AdminSearchField,
|
||||
AdminSegmented,
|
||||
} from "@/components/admin";
|
||||
import ConfirmDialog from "@/components/ConfirmDialog";
|
||||
import Avatar from "@/components/Avatar";
|
||||
import {
|
||||
apiAdminDeleteSnippet,
|
||||
apiAdminSetSnippetVisibility,
|
||||
apiAdminSnippets,
|
||||
type SnippetListItem,
|
||||
} from "@/lib/api";
|
||||
import { formatRelative } from "@/lib/format";
|
||||
import { toast } from "@/lib/toast";
|
||||
import { snippetPath } from "@/lib/urlStyle";
|
||||
import { useUrlStyle } from "@/components/SiteBrandProvider";
|
||||
|
||||
type VisibilityFilter = "all" | "public" | "private";
|
||||
|
||||
const PAGE_SIZE = 20;
|
||||
|
||||
/** 片段管理：全量列表（含私有），支持搜索、可见性筛选、下架/上架与删除。 */
|
||||
export default function SnippetsAdmin() {
|
||||
const urlStyle = useUrlStyle();
|
||||
const [items, setItems] = useState<SnippetListItem[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [page, setPage] = useState(1);
|
||||
const [vis, setVis] = useState<VisibilityFilter>("all");
|
||||
const [keyword, setKeyword] = useState("");
|
||||
const [q, setQ] = useState("");
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [confirm, setConfirm] = useState<
|
||||
| { kind: "delete"; item: SnippetListItem }
|
||||
| { kind: "hide" | "show"; item: SnippetListItem }
|
||||
| null
|
||||
>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const load = useCallback(async (p: number, v: VisibilityFilter, kw: string) => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const res = await apiAdminSnippets({
|
||||
q: kw || undefined,
|
||||
visibility: v === "all" ? undefined : v,
|
||||
page: p,
|
||||
size: PAGE_SIZE,
|
||||
});
|
||||
setItems(res.items);
|
||||
setTotal(res.total);
|
||||
setPage(p);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "加载失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void load(1, "all", "");
|
||||
}, [load]);
|
||||
|
||||
const runConfirm = async () => {
|
||||
if (!confirm) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
if (confirm.kind === "delete") {
|
||||
await apiAdminDeleteSnippet(confirm.item.id);
|
||||
toast("片段已删除", "ok");
|
||||
} else {
|
||||
const next = confirm.kind === "hide" ? "private" : "public";
|
||||
await apiAdminSetSnippetVisibility(confirm.item.id, next);
|
||||
toast(next === "private" ? "已下架为私有" : "已恢复为公开", "ok");
|
||||
}
|
||||
setConfirm(null);
|
||||
await load(page, vis, q);
|
||||
} catch (e) {
|
||||
toast(e instanceof Error ? e.message : "操作失败");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<AdminPageHeader
|
||||
icon={CodeXml}
|
||||
title="片段管理"
|
||||
description="查看全站代码片段（含私有），可下架违规公开片段或删除。"
|
||||
/>
|
||||
|
||||
<div
|
||||
className="rounded-2xl overflow-hidden"
|
||||
style={{ border: "1px solid var(--line)", background: "var(--panel)" }}
|
||||
>
|
||||
<div
|
||||
className="flex items-center justify-between gap-2 flex-wrap px-4 sm:px-5 py-3"
|
||||
style={{ borderBottom: "1px solid var(--line)" }}
|
||||
>
|
||||
<AdminSegmented<VisibilityFilter>
|
||||
ariaLabel="可见性筛选"
|
||||
size="sm"
|
||||
value={vis}
|
||||
onChange={(v) => void load(1, v, q)}
|
||||
options={[
|
||||
{ key: "all", label: "全部" },
|
||||
{ key: "public", label: "公开" },
|
||||
{ key: "private", label: "私有" },
|
||||
]}
|
||||
/>
|
||||
<AdminSearchField
|
||||
value={keyword}
|
||||
onChange={setKeyword}
|
||||
onSubmit={() => {
|
||||
setQ(keyword.trim());
|
||||
void load(1, vis, keyword.trim());
|
||||
}}
|
||||
onClear={() => {
|
||||
setKeyword("");
|
||||
setQ("");
|
||||
void load(1, vis, "");
|
||||
}}
|
||||
placeholder="搜索标题或描述…"
|
||||
ariaLabel="搜索片段"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error ? <p className="alert-error m-3 text-[12.5px]">{error}</p> : null}
|
||||
|
||||
{loading && items.length === 0 ? (
|
||||
<div className="flex justify-center py-14">
|
||||
<Loader2 size={20} className="animate-spin" style={{ color: "var(--ink-3)" }} />
|
||||
</div>
|
||||
) : items.length === 0 ? (
|
||||
<AdminEmpty
|
||||
icon={<CodeXml size={20} />}
|
||||
title="暂无片段"
|
||||
description={q ? "没有匹配搜索条件的片段。" : "还没有用户发布代码片段。"}
|
||||
/>
|
||||
) : (
|
||||
<ul className="divide-y" style={{ borderColor: "var(--line)" }}>
|
||||
{items.map((it) => (
|
||||
<li key={it.id} className="px-4 sm:px-5 py-3 flex items-center gap-3 flex-wrap">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2 min-w-0 flex-wrap">
|
||||
<Link
|
||||
href={snippetPath(urlStyle, it.id)}
|
||||
target="_blank"
|
||||
className="truncate text-[14px] font-semibold hover:underline"
|
||||
style={{ color: "var(--ink)" }}
|
||||
>
|
||||
{it.title}
|
||||
</Link>
|
||||
<span
|
||||
className="shrink-0 rounded-full px-1.5 py-px text-[10.5px] font-semibold"
|
||||
style={{ background: "var(--panel-2)", color: "var(--ink-3)" }}
|
||||
>
|
||||
{it.language}
|
||||
</span>
|
||||
{it.visibility === "private" ? (
|
||||
<span
|
||||
className="shrink-0 inline-flex items-center gap-1 rounded-full px-1.5 py-px text-[10.5px]"
|
||||
style={{ background: "var(--panel-2)", color: "var(--ink-3)" }}
|
||||
>
|
||||
<EyeOff size={10} /> 私有
|
||||
</span>
|
||||
) : (
|
||||
<span
|
||||
className="shrink-0 inline-flex items-center gap-1 rounded-full px-1.5 py-px text-[10.5px]"
|
||||
style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
|
||||
>
|
||||
<Eye size={10} /> 公开
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-1 flex items-center gap-2.5 text-[11.5px] flex-wrap" style={{ color: "var(--ink-3)" }}>
|
||||
{it.user ? (
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<Avatar name={it.user.nickname} src={it.user.avatar} size={14} />
|
||||
{it.user.nickname}
|
||||
</span>
|
||||
) : (
|
||||
<span>用户 #{it.user_id}</span>
|
||||
)}
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<Copy size={11} /> {it.copy_count}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<Eye size={11} /> {it.view_count}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<MessagesSquare size={11} /> {it.comment_count}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<GitFork size={11} /> {it.fork_count}
|
||||
</span>
|
||||
<span>{formatRelative(it.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{it.visibility === "public" ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-line btn-sm inline-flex items-center gap-1"
|
||||
onClick={() => setConfirm({ kind: "hide", item: it })}
|
||||
>
|
||||
<EyeOff size={13} /> 下架
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-line btn-sm inline-flex items-center gap-1"
|
||||
onClick={() => setConfirm({ kind: "show", item: it })}
|
||||
>
|
||||
<Eye size={13} /> 上架
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-line btn-sm inline-flex items-center gap-1"
|
||||
style={{ color: "var(--danger)" }}
|
||||
onClick={() => setConfirm({ kind: "delete", item: it })}
|
||||
>
|
||||
<Trash2 size={13} /> 删除
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
<AdminPager
|
||||
page={page}
|
||||
total={total}
|
||||
pageSize={PAGE_SIZE}
|
||||
loading={loading}
|
||||
onChange={(p) => void load(p, vis, q)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ConfirmDialog
|
||||
open={!!confirm}
|
||||
title={
|
||||
confirm?.kind === "delete"
|
||||
? "删除片段"
|
||||
: confirm?.kind === "hide"
|
||||
? "下架片段"
|
||||
: "上架片段"
|
||||
}
|
||||
message={
|
||||
confirm?.kind === "delete"
|
||||
? `确定删除片段「${confirm.item.title}」吗？删除后前台不可见。`
|
||||
: confirm?.kind === "hide"
|
||||
? `确定将「${confirm?.item.title}」下架为私有吗？仅作者本人可见。`
|
||||
: `确定将「${confirm?.item.title ?? ""}」恢复为公开吗？`
|
||||
}
|
||||
danger={confirm?.kind !== "show"}
|
||||
busy={busy}
|
||||
confirmLabel={
|
||||
confirm?.kind === "delete" ? "确认删除" : confirm?.kind === "hide" ? "确认下架" : "确认上架"
|
||||
}
|
||||
onCancel={() => !busy && setConfirm(null)}
|
||||
onConfirm={() => void runConfirm()}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
20
frontend/app/admin/snippets/page.tsx
Normal file
20
frontend/app/admin/snippets/page.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import type { Metadata } from "next";
|
||||
import { cookies } from "next/headers";
|
||||
import { authCookieHeader } from "@/lib/cookies";
|
||||
import { getMeCached } from "@/lib/serverData";
|
||||
import { isStaff } from "@/lib/roles";
|
||||
import Forbidden from "../Forbidden";
|
||||
import SnippetsAdmin from "./SnippetsAdmin";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "片段管理",
|
||||
};
|
||||
|
||||
export default async function AdminSnippetsPage() {
|
||||
const cookie = authCookieHeader(await cookies());
|
||||
const me = await getMeCached(cookie || undefined);
|
||||
if (!me.user || !isStaff(me.user.role)) {
|
||||
return <Forbidden text="片段管理仅管理员及以上角色可操作。" />;
|
||||
}
|
||||
return <SnippetsAdmin />;
|
||||
}
|
||||
@@ -874,6 +874,10 @@ export default function ChatRoomClient({
|
||||
router.refresh();
|
||||
return;
|
||||
}
|
||||
if (data.status === "joined") {
|
||||
void refreshMembers();
|
||||
return;
|
||||
}
|
||||
if (data.status === "kicked") {
|
||||
toast("你已被移出该群");
|
||||
} else {
|
||||
@@ -883,7 +887,7 @@ export default function ChatRoomClient({
|
||||
}
|
||||
);
|
||||
return off;
|
||||
}, [roomId, router]);
|
||||
}, [roomId, router, refreshMembers]);
|
||||
|
||||
// 禁言/解禁实时通知：更新成员列表 + 插入系统提示
|
||||
useEffect(() => {
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
--ink: #161a22;
|
||||
--ink-2: #4b5260;
|
||||
--ink-3: #5b6270;
|
||||
--ink-4: #949aab; /* 比 --ink-3 更浅：首页帖子列表 meta 文字（作者/时间/统计） */
|
||||
--line: #e4e7ec; /* 装饰性分隔/卡片边（非交互，配合阴影与底色高差） */
|
||||
--line-2: #7c8698; /* 功能性边界：输入框/按钮/分页等可交互控件，满足 1.4.11 ≥3:1 */
|
||||
|
||||
@@ -139,6 +140,7 @@
|
||||
--ink: #eef1f6;
|
||||
--ink-2: #b6bdc9;
|
||||
--ink-3: #98a1b2;
|
||||
--ink-4: #71798a; /* 比 --ink-3 更淡：首页帖子列表 meta 文字（作者/时间/统计） */
|
||||
--line: rgba(238, 241, 246, 0.08); /* 装饰性分隔/卡片边 */
|
||||
--line-2: rgba(238, 241, 246, 0.38); /* 功能性控件边界，1.4.11 ≥3:1 */
|
||||
|
||||
@@ -4006,6 +4008,35 @@ a.j13-mention-token:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* 验证码发送按钮：与输入框同圆角，主色浅底强调可点；hover 实心浮起 */
|
||||
.btn-code {
|
||||
background: var(--accent-soft);
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
border-radius: var(--r-sm);
|
||||
padding: 10px 16px;
|
||||
}
|
||||
.btn-code:hover:not(:disabled) {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: var(--accent-on);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 6px rgba(16, 24, 40, 0.1),
|
||||
0 8px 20px color-mix(in srgb, var(--accent) 34%, transparent);
|
||||
}
|
||||
.btn-code:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
box-shadow: none;
|
||||
}
|
||||
.btn-code:disabled {
|
||||
background: transparent;
|
||||
border-color: var(--line-2);
|
||||
color: var(--ink-3);
|
||||
font-weight: 500;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
@@ -6425,8 +6456,10 @@ a.j13-mention-token:hover {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* ----- 点赞按钮：未赞描边态，hover 同色系填充；已赞为浅底实心态 ----- */
|
||||
.j13-like {
|
||||
/* ----- 点赞/收藏按钮：未激活描边态，hover 主色浅底轻浮起；激活态浅底主色描边 ----- */
|
||||
.j13-like,
|
||||
.j13-fav {
|
||||
border-radius: 999px;
|
||||
border-color: var(--line-2);
|
||||
color: var(--ink-2);
|
||||
background: var(--panel);
|
||||
@@ -6434,41 +6467,82 @@ a.j13-mention-token:hover {
|
||||
border-color 0.15s ease,
|
||||
color 0.15s ease,
|
||||
background-color 0.15s ease,
|
||||
box-shadow 0.15s ease;
|
||||
box-shadow 0.15s ease,
|
||||
transform 0.15s ease;
|
||||
}
|
||||
.j13-like svg {
|
||||
.j13-like svg,
|
||||
.j13-fav svg {
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
.j13-like:hover:not(:disabled),
|
||||
.j13-like.is-liked {
|
||||
.j13-fav:hover:not(:disabled),
|
||||
.j13-like.is-liked,
|
||||
.j13-fav.is-favorited {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
/* 已赞态 hover 再加深一档，并给同色系投影；心形轻微放大（不改变布局） */
|
||||
.j13-like:hover:not(:disabled) {
|
||||
/* hover 浮起 + 同色系投影；心形/书签轻微放大（不改变布局） */
|
||||
.j13-like:hover:not(:disabled),
|
||||
.j13-fav:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 22%, transparent);
|
||||
}
|
||||
.j13-like.is-liked:hover:not(:disabled) {
|
||||
background: color-mix(in srgb, var(--accent) 17%, transparent);
|
||||
.j13-like:active:not(:disabled),
|
||||
.j13-fav:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
box-shadow: none;
|
||||
}
|
||||
.j13-like:hover:not(:disabled) svg {
|
||||
/* 文章页大按钮：12px 圆角矩形 + 幽灵底，弱化存在感；激活态浅底主色描边（文字恒为主色，保证可读） */
|
||||
.j13-like-article {
|
||||
border-radius: var(--r-sm);
|
||||
border-color: transparent;
|
||||
background: color-mix(in srgb, var(--ink) 5%, transparent);
|
||||
}
|
||||
.j13-like-article:hover:not(:disabled) {
|
||||
border-color: color-mix(in srgb, var(--accent) 25%, transparent);
|
||||
}
|
||||
.j13-like-article.is-liked,
|
||||
.j13-like-article.is-favorited {
|
||||
color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
|
||||
box-shadow: none;
|
||||
}
|
||||
.j13-like-article.is-liked:hover:not(:disabled),
|
||||
.j13-like-article.is-favorited:hover:not(:disabled) {
|
||||
color: var(--accent);
|
||||
background: color-mix(in srgb, var(--accent) 18%, transparent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.j13-like:hover:not(:disabled) svg,
|
||||
.j13-fav:hover:not(:disabled) svg {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
.j13-like:active:not(:disabled) svg {
|
||||
.j13-like:active:not(:disabled) svg,
|
||||
.j13-fav:active:not(:disabled) svg {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
.j13-like:focus-visible {
|
||||
.j13-like:focus-visible,
|
||||
.j13-fav:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.j13-like,
|
||||
.j13-like svg {
|
||||
.j13-fav,
|
||||
.j13-like svg,
|
||||
.j13-fav svg {
|
||||
transition: none;
|
||||
}
|
||||
.j13-like:hover:not(:disabled),
|
||||
.j13-fav:hover:not(:disabled),
|
||||
.j13-like:active:not(:disabled),
|
||||
.j13-fav:active:not(:disabled),
|
||||
.j13-like:hover:not(:disabled) svg,
|
||||
.j13-like:active:not(:disabled) svg {
|
||||
.j13-fav:hover:not(:disabled) svg,
|
||||
.j13-like:active:not(:disabled) svg,
|
||||
.j13-fav:active:not(:disabled) svg {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@@ -7134,6 +7208,10 @@ a.j13-mention-token:hover {
|
||||
color: var(--ink-3);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
/* 帖子列表行：除标题外的 meta 文字（作者/时间/回复/评论数/浏览数/板块胶囊）调浅一档，
|
||||
让标题（var(--ink)）更突出；hover 仍可被 above-link 的 accent 覆盖。 */
|
||||
.j13-post-row .meta { color: var(--ink-4); }
|
||||
.j13-post-row .j13-board-tag { color: var(--ink-4); }
|
||||
.link-accent { color: var(--accent); }
|
||||
.link-accent:hover { color: var(--accent-hi); }
|
||||
|
||||
@@ -9074,12 +9152,13 @@ html.dark .prose-content pre[data-theme] span {
|
||||
|
||||
/* ============================================================
|
||||
前台 main 纸面 + 首页三栏「白纸一体」
|
||||
main 铺 --main-bg（浅色纯白 / 暗色比画布略亮一档），左右外缘
|
||||
1px --line 描边与页头下边线围合成框；站长配置了自定义站点
|
||||
背景图时让位（保持透出画布）。左栏无框化，内容直接坐在纸面上；
|
||||
右栏保留卡片板块感（j13-module 原样）。
|
||||
main 恒定铺 --main-bg（浅色纯白 / 暗色比画布略亮一档），左右外缘
|
||||
1px --line 描边与页头下边线围合成框；即使站长配置了自定义站点
|
||||
背景图也不让位——header/main/footer 连成一张白纸保证内容可读，
|
||||
背景图只在页缘（1440px 画布之外）露出。左栏无框化，内容直接坐
|
||||
在纸面上；右栏保留卡片板块感（j13-module 原样）。
|
||||
============================================================ */
|
||||
html:not(.j13-has-site-bg) #main {
|
||||
#main {
|
||||
background: var(--main-bg);
|
||||
border-left: 1px solid var(--line);
|
||||
border-right: 1px solid var(--line);
|
||||
@@ -10399,3 +10478,209 @@ html.j13-reduce-chrome .j13-att-card.is-fresh {
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
/* ===== 片段广场：编辑器窗格卡片 ===== */
|
||||
/* 卡片内 shiki 双主题着色（独立作用域，不依赖 .prose-content）。
|
||||
新版 shiki 的 token span 只声明 --shiki-light/--shiki-dark 变量，color 由这里应用 */
|
||||
.j13-sn-code {
|
||||
color: var(--shiki-light, var(--ink-2));
|
||||
}
|
||||
.j13-sn-code span[style*="--shiki-light"] {
|
||||
color: var(--shiki-light);
|
||||
background: transparent;
|
||||
}
|
||||
html.dark .j13-sn-code {
|
||||
color: var(--shiki-dark, var(--ink-2));
|
||||
}
|
||||
html.dark .j13-sn-code span[style*="--shiki-dark"] {
|
||||
color: var(--shiki-dark) !important;
|
||||
font-style: var(--shiki-dark-font-style) !important;
|
||||
font-weight: var(--shiki-dark-font-weight) !important;
|
||||
}
|
||||
/* 语言下拉弹层 */
|
||||
.j13-sn-lang-menu {
|
||||
animation: j13-sn-pop 140ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
transform-origin: top left;
|
||||
}
|
||||
@keyframes j13-sn-pop {
|
||||
from { opacity: 0; transform: translateY(-4px) scale(0.98); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
/* 搜索软聚焦：光晕替代硬边框 */
|
||||
.j13-sn-search {
|
||||
transition: box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
|
||||
}
|
||||
.j13-sn-search:focus {
|
||||
outline: none;
|
||||
border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
|
||||
}
|
||||
|
||||
/* ===== 片段广场：赛博控制台 Hero（明暗双主题自适应） ===== */
|
||||
.j13-hero {
|
||||
/* 浅色：白玻璃底 + 墨色文字，辉光收敛 */
|
||||
--hero-bg: #f7f9fc;
|
||||
--hero-ink: #0f172a;
|
||||
--hero-ink-2: #475569;
|
||||
--hero-ink-3: #8593ab;
|
||||
--hero-line: rgba(15, 23, 42, 0.10);
|
||||
--hero-chip-bg: rgba(15, 23, 42, 0.035);
|
||||
--hero-chip-icon: rgba(15, 23, 42, 0.06);
|
||||
--hero-track: rgba(15, 23, 42, 0.07);
|
||||
background:
|
||||
radial-gradient(ellipse 60% 80% at 12% -20%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 65%),
|
||||
radial-gradient(ellipse 45% 70% at 88% 115%, rgba(13, 148, 136, 0.08), transparent 70%),
|
||||
radial-gradient(ellipse 35% 45% at 60% 40%, rgba(124, 58, 237, 0.06), transparent 70%),
|
||||
var(--hero-bg);
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
html.dark .j13-hero {
|
||||
/* 深色：深夜底 + 霓虹文字，辉光拉满 */
|
||||
--hero-bg: #0a0e16;
|
||||
--hero-ink: #e8edf7;
|
||||
--hero-ink-2: #9aa7c2;
|
||||
--hero-ink-3: #5f6b88;
|
||||
--hero-line: rgba(148, 163, 205, 0.16);
|
||||
--hero-chip-bg: rgba(148, 163, 205, 0.07);
|
||||
--hero-chip-icon: rgba(148, 163, 205, 0.11);
|
||||
--hero-track: rgba(148, 163, 205, 0.10);
|
||||
background:
|
||||
radial-gradient(ellipse 60% 80% at 12% -20%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 65%),
|
||||
radial-gradient(ellipse 45% 70% at 88% 115%, rgba(94, 234, 212, 0.14), transparent 70%),
|
||||
radial-gradient(ellipse 35% 45% at 60% 40%, rgba(167, 139, 250, 0.10), transparent 70%),
|
||||
var(--hero-bg);
|
||||
border: 1px solid rgba(148, 163, 205, 0.22);
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(10, 14, 22, 0.6),
|
||||
0 18px 50px -18px color-mix(in srgb, var(--accent) 28%, transparent),
|
||||
inset 0 1px 0 rgba(232, 237, 247, 0.06);
|
||||
}
|
||||
/* 网格底纹（铺满整个面板，仅底部极淡渐出避免压文字） */
|
||||
.j13-hero-grid {
|
||||
background-image:
|
||||
linear-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
|
||||
background-size: 30px 30px;
|
||||
mask-image: linear-gradient(to bottom, black 82%, rgba(0, 0, 0, 0.35) 100%);
|
||||
-webkit-mask-image: linear-gradient(to bottom, black 82%, rgba(0, 0, 0, 0.35) 100%);
|
||||
}
|
||||
html.dark .j13-hero-grid {
|
||||
background-image:
|
||||
linear-gradient(rgba(148, 163, 205, 0.09) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(148, 163, 205, 0.09) 1px, transparent 1px);
|
||||
}
|
||||
/* 水平扫描光束（自上而下巡航） */
|
||||
.j13-hero-scan {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 72px;
|
||||
top: -72px;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
color-mix(in srgb, var(--accent) 8%, transparent) 60%,
|
||||
color-mix(in srgb, var(--accent) 30%, transparent)
|
||||
);
|
||||
filter: blur(0.5px);
|
||||
animation: j13-hero-scan 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes j13-hero-scan {
|
||||
0% { transform: translateY(0); opacity: 0; }
|
||||
8% { opacity: 1; }
|
||||
60% { opacity: 1; }
|
||||
68%, 100% { transform: translateY(140%); opacity: 0; }
|
||||
}
|
||||
/* 大标题霓虹渐变 */
|
||||
.j13-hero-title {
|
||||
background: linear-gradient(100deg, var(--hero-ink) 20%, var(--accent) 55%, #5eead4 85%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
text-shadow: 0 0 34px color-mix(in srgb, var(--accent) 32%, transparent);
|
||||
}
|
||||
/* 统计数字进入 */
|
||||
.j13-hero-stat {
|
||||
animation: j13-hero-rise 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
@keyframes j13-hero-rise {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
/* 语言均衡条：加载展开 */
|
||||
.j13-hero-langbar {
|
||||
transform-origin: left center;
|
||||
animation: j13-hero-bar 800ms cubic-bezier(0.22, 1, 0.36, 1) 260ms both;
|
||||
}
|
||||
@keyframes j13-hero-bar {
|
||||
from { transform: scaleX(0); }
|
||||
to { transform: scaleX(1); }
|
||||
}
|
||||
/* 呼吸状态灯 */
|
||||
.j13-hero-pulse {
|
||||
animation: j13-hero-pulse 2.2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes j13-hero-pulse {
|
||||
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
|
||||
50% { opacity: 0.6; box-shadow: 0 0 0 6px transparent; }
|
||||
}
|
||||
/* 光标闪烁 */
|
||||
.j13-hero-caret {
|
||||
animation: j13-hero-caret 1.1s steps(2, start) infinite;
|
||||
}
|
||||
@keyframes j13-hero-caret {
|
||||
to { visibility: hidden; }
|
||||
}
|
||||
/* 语言跑马灯 */
|
||||
.j13-hero-ticker {
|
||||
overflow: hidden;
|
||||
mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
|
||||
}
|
||||
.j13-hero-ticker-track {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2.25rem;
|
||||
white-space: nowrap;
|
||||
animation: j13-hero-ticker 36s linear infinite;
|
||||
}
|
||||
.j13-hero-ticker:hover .j13-hero-ticker-track {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
@keyframes j13-hero-ticker {
|
||||
to { transform: translateX(-50%); }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.j13-hero-scan, .j13-hero-pulse, .j13-hero-caret, .j13-hero-ticker-track { animation: none; }
|
||||
.j13-hero-stat, .j13-hero-langbar { animation-duration: 1ms; }
|
||||
}
|
||||
|
||||
/* ===== 片段卡片：语言霓虹 ===== */
|
||||
.j13-snc {
|
||||
position: relative;
|
||||
}
|
||||
/* 顶部霓虹语言条 */
|
||||
.j13-snc::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 14px;
|
||||
right: 14px;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(90deg, var(--sn-lang, var(--accent)), transparent 75%);
|
||||
opacity: 0.75;
|
||||
transition: opacity 200ms ease, left 200ms ease, right 200ms ease;
|
||||
}
|
||||
.j13-snc:hover::before {
|
||||
opacity: 1;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
.j13-snc:hover {
|
||||
box-shadow:
|
||||
0 10px 34px -14px color-mix(in srgb, var(--sn-lang, var(--accent)) 45%, transparent),
|
||||
var(--shadow-lg) !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -190,7 +190,7 @@ export default function RegisterClient({
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-line shrink-0"
|
||||
className="btn btn-code shrink-0"
|
||||
disabled={sending || countdown > 0 || !email}
|
||||
onClick={async () => {
|
||||
// 点击即锁定，防止重复发送
|
||||
@@ -201,7 +201,7 @@ export default function RegisterClient({
|
||||
email,
|
||||
purpose: "register",
|
||||
});
|
||||
setSentMessage(r.message);
|
||||
setSentMessage("验证码已发送，请查收邮箱");
|
||||
startCountdown();
|
||||
} catch (err) {
|
||||
setError((err as Error).message);
|
||||
@@ -211,7 +211,7 @@ export default function RegisterClient({
|
||||
}}
|
||||
>
|
||||
{sending
|
||||
? "正在排队…"
|
||||
? "发送中…"
|
||||
: countdown > 0
|
||||
? `${countdown}s 后可重发`
|
||||
: "发送验证码"}
|
||||
|
||||
@@ -118,7 +118,7 @@ export default function ResetPasswordPage() {
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-line shrink-0"
|
||||
className="btn btn-code shrink-0"
|
||||
disabled={sending || busy || !email}
|
||||
onClick={() => void sendCode()}
|
||||
>
|
||||
|
||||
@@ -5,9 +5,10 @@ import {
|
||||
fetchAnnouncementsPage,
|
||||
fetchPublishedSitePages,
|
||||
fetchLibraryList,
|
||||
fetchSnippets,
|
||||
} from "@/lib/api";
|
||||
import { canonicalPath, resolveSiteOrigin } from "@/lib/siteUrl";
|
||||
import { announcementPath, postPath, pagePath, leaderboardPath, libraryPath, libraryDocPath } from "@/lib/urlStyle";
|
||||
import { announcementPath, postPath, pagePath, leaderboardPath, libraryPath, libraryDocPath, snippetsPath, snippetPath } from "@/lib/urlStyle";
|
||||
import { getPublicSettingsCached } from "@/lib/serverData";
|
||||
|
||||
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
|
||||
@@ -40,6 +41,12 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
|
||||
changeFrequency: "daily",
|
||||
priority: 0.5,
|
||||
},
|
||||
{
|
||||
url: url(snippetsPath(style)),
|
||||
lastModified: new Date(),
|
||||
changeFrequency: "daily",
|
||||
priority: 0.5,
|
||||
},
|
||||
{
|
||||
url: url("/about"),
|
||||
lastModified: new Date(),
|
||||
@@ -104,5 +111,20 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
|
||||
/* 忽略 */
|
||||
}
|
||||
|
||||
try {
|
||||
const { items } = await fetchSnippets({ page: 1, size: 200 });
|
||||
for (const it of items) {
|
||||
if (it.visibility !== "public") continue;
|
||||
entries.push({
|
||||
url: url(snippetPath(style, it.id)),
|
||||
lastModified: new Date(it.updated_at || it.created_at),
|
||||
changeFrequency: "weekly",
|
||||
priority: 0.4,
|
||||
});
|
||||
}
|
||||
} catch {
|
||||
/* 忽略 */
|
||||
}
|
||||
|
||||
return entries;
|
||||
}
|
||||
|
||||
111
frontend/app/snippets/[id]/edit/page.tsx
Normal file
111
frontend/app/snippets/[id]/edit/page.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
"use client";
|
||||
|
||||
import { Suspense, useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { apiMe, apiGetSnippet } from "@/lib/api";
|
||||
import SnippetEditor from "@/components/SnippetEditor";
|
||||
|
||||
function EditSnippetInner({ id }: { id: number }) {
|
||||
const router = useRouter();
|
||||
const [ready, setReady] = useState(false);
|
||||
const [snippet, setSnippet] = useState<{
|
||||
title: string;
|
||||
language: string;
|
||||
description: string;
|
||||
code: string;
|
||||
visibility: "public" | "private";
|
||||
user_id: number;
|
||||
} | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
const me = await apiMe().catch(() => null);
|
||||
if (cancelled) return;
|
||||
if (!me?.user) {
|
||||
router.push(`/login?redirect=/snippets/${id}/edit`);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const data = await apiGetSnippet(id);
|
||||
if (cancelled) return;
|
||||
if (!data) {
|
||||
router.push("/snippets");
|
||||
return;
|
||||
}
|
||||
// 仅 owner 或 staff 可编辑（后端会再次校验）
|
||||
setSnippet({
|
||||
title: data.snippet.title,
|
||||
language: data.snippet.language,
|
||||
description: data.snippet.description,
|
||||
code: data.snippet.code,
|
||||
visibility: data.snippet.visibility,
|
||||
user_id: data.snippet.user_id,
|
||||
});
|
||||
setReady(true);
|
||||
} catch {
|
||||
if (!cancelled) router.push("/snippets");
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [router, id]);
|
||||
|
||||
if (!ready || !snippet) {
|
||||
return (
|
||||
<div className="j13-compose-stage is-studio px-8 py-16 text-center">
|
||||
<p className="meta">正在加载片段…</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SnippetEditor
|
||||
mode="edit"
|
||||
snippetId={id}
|
||||
initialTitle={snippet.title}
|
||||
initialLanguage={snippet.language}
|
||||
initialDescription={snippet.description}
|
||||
initialCode={snippet.code}
|
||||
initialVisibility={snippet.visibility}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default function EditSnippetPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
}) {
|
||||
const [id, setId] = useState<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
params.then((p) => {
|
||||
const numId = Number(p.id);
|
||||
if (Number.isInteger(numId) && numId > 0) setId(numId);
|
||||
});
|
||||
}, [params]);
|
||||
|
||||
if (id === null) {
|
||||
return (
|
||||
<div className="j13-compose-stage is-studio px-8 py-16 text-center">
|
||||
<p className="meta">正在加载…</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="j13-compose-page">
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="j13-compose-stage is-studio px-8 py-16 text-center">
|
||||
<p className="meta">正在加载片段…</p>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<EditSnippetInner id={id} />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
253
frontend/app/snippets/[id]/page.tsx
Normal file
253
frontend/app/snippets/[id]/page.tsx
Normal file
@@ -0,0 +1,253 @@
|
||||
import type { Metadata } from "next";
|
||||
import { notFound } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { cookies } from "next/headers";
|
||||
import { GitFork, Copy, Eye, MessageSquare } from "lucide-react";
|
||||
import {
|
||||
fetchSnippetById,
|
||||
fetchSnippetComments,
|
||||
fetchSnippetForks,
|
||||
} from "@/lib/api";
|
||||
import { getPublicSettingsCached } from "@/lib/serverData";
|
||||
import { requestCanonical } from "@/lib/canonicalMeta";
|
||||
import { snippetPath, userPath, snippetsPath } from "@/lib/urlStyle";
|
||||
import { postViewerCookieHeader } from "@/lib/cookies";
|
||||
import { formatRelative } from "@/lib/format";
|
||||
import MarkdownBody from "@/components/MarkdownBody";
|
||||
import Avatar from "@/components/Avatar";
|
||||
import SnippetCodeView from "@/components/SnippetCodeView";
|
||||
import SnippetCommentSection from "@/components/SnippetCommentSection";
|
||||
import SnippetCommentCountChip from "@/components/SnippetCommentCountChip";
|
||||
import SnippetActions from "@/components/SnippetActions";
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ id: string }>;
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
|
||||
const { id } = await params;
|
||||
const numId = Number(id);
|
||||
if (!Number.isInteger(numId) || numId <= 0) return { title: "片段不存在" };
|
||||
const cookieHeader = postViewerCookieHeader(await cookies());
|
||||
const data = await fetchSnippetById(numId, cookieHeader).catch(() => null);
|
||||
if (!data) return { title: "片段不存在" };
|
||||
const s = data.snippet;
|
||||
return {
|
||||
title: s.title,
|
||||
description: s.description ? s.description.slice(0, 150) : `${s.language} 代码片段`,
|
||||
...(await requestCanonical(snippetPath((await getPublicSettingsCached()).url_style, s.id))),
|
||||
};
|
||||
}
|
||||
|
||||
export default async function SnippetDetailPage({ params }: PageProps) {
|
||||
const { id } = await params;
|
||||
const numId = Number(id);
|
||||
if (!Number.isInteger(numId) || numId <= 0) notFound();
|
||||
|
||||
const cookieHeader = postViewerCookieHeader(await cookies());
|
||||
const [detailRes, commentsRes, forksRes, settings] = await Promise.all([
|
||||
fetchSnippetById(numId, cookieHeader).catch(() => null),
|
||||
fetchSnippetComments(numId, 1, 20, cookieHeader).catch(() => ({ items: [], total: 0 })),
|
||||
fetchSnippetForks(numId, 1, 6).catch(() => ({ items: [], total: 0 })),
|
||||
getPublicSettingsCached(),
|
||||
]);
|
||||
if (!detailRes) notFound();
|
||||
|
||||
const snippet = detailRes.snippet;
|
||||
const urlStyle = settings.url_style;
|
||||
const isOwner = false; // 客户端组件中通过 apiMe 校正
|
||||
const isStaff = false;
|
||||
|
||||
return (
|
||||
<div className="max-w-[1440px] mx-auto min-w-0">
|
||||
<div className="mb-4 flex items-center gap-2 text-[12.5px] meta">
|
||||
<Link
|
||||
href={snippetsPath(urlStyle)}
|
||||
className="hover:underline inline-flex items-center gap-1.5"
|
||||
>
|
||||
← 片段广场
|
||||
</Link>
|
||||
{snippet.forked_from && (
|
||||
<>
|
||||
<span style={{ color: "var(--ink-3)" }}>·</span>
|
||||
<Link
|
||||
href={snippetPath(urlStyle, snippet.forked_from.id)}
|
||||
className="inline-flex items-center gap-1 hover:underline"
|
||||
>
|
||||
<GitFork size={11} /> Fork 自：{snippet.forked_from.title}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<article className="panel px-4 py-6 sm:p-8">
|
||||
{/* 头部 */}
|
||||
<header>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span
|
||||
className="text-[10.5px] font-semibold px-1.5 py-0.5 rounded-md uppercase tracking-wide"
|
||||
style={{
|
||||
color: "var(--accent)",
|
||||
background: "var(--accent-soft)",
|
||||
border: "1px solid color-mix(in srgb, var(--accent) 30%, transparent)",
|
||||
}}
|
||||
>
|
||||
{snippet.language}
|
||||
</span>
|
||||
{snippet.visibility === "private" && (
|
||||
<span
|
||||
className="text-[10px] font-medium px-1.5 py-0.5 rounded-md"
|
||||
style={{
|
||||
background: "var(--panel-2)",
|
||||
color: "var(--ink-3)",
|
||||
border: "1px solid var(--line)",
|
||||
}}
|
||||
>
|
||||
私有
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h1
|
||||
className="mt-2.5 text-[23px] sm:text-[28px] leading-tight font-bold"
|
||||
style={{ color: "var(--ink)" }}
|
||||
>
|
||||
{snippet.title}
|
||||
</h1>
|
||||
|
||||
{/* 作者 + 统计 */}
|
||||
<div className="mt-4 flex items-center gap-x-4 gap-y-2.5 flex-wrap">
|
||||
{snippet.user && (
|
||||
<Link href={userPath(urlStyle, snippet.user.id)} className="flex items-center gap-2 group min-w-0">
|
||||
<Avatar
|
||||
size={30}
|
||||
name={snippet.user.nickname || snippet.user.username}
|
||||
src={snippet.user.avatar}
|
||||
/>
|
||||
<span className="min-w-0">
|
||||
<span
|
||||
className="block text-[13.5px] font-semibold leading-tight truncate group-hover:text-[var(--accent)] transition-colors"
|
||||
style={{ color: "var(--ink)" }}
|
||||
>
|
||||
{snippet.user.nickname || snippet.user.username}
|
||||
</span>
|
||||
<span className="block text-[11px] leading-tight meta truncate">
|
||||
@{snippet.user.username}
|
||||
</span>
|
||||
</span>
|
||||
</Link>
|
||||
)}
|
||||
<span className="meta text-[12px]">{formatRelative(snippet.created_at)}</span>
|
||||
{snippet.updated_at !== snippet.created_at && (
|
||||
<span className="meta text-[12px]">（编辑于 {formatRelative(snippet.updated_at)}）</span>
|
||||
)}
|
||||
|
||||
<span className="flex items-center gap-1.5 flex-wrap sm:ml-auto">
|
||||
<StatChip icon={<Copy size={12} />} value={snippet.copy_count} label="复制" />
|
||||
<StatChip icon={<Eye size={12} />} value={snippet.view_count} label="查看" />
|
||||
<SnippetCommentCountChip
|
||||
snippetId={snippet.id}
|
||||
initial={snippet.comment_count}
|
||||
icon={<MessageSquare size={12} />}
|
||||
label="评论"
|
||||
/>
|
||||
<a
|
||||
href={snippet.fork_count > 0 ? "#snippet-forks" : undefined}
|
||||
className="inline-flex rounded-full"
|
||||
style={{ cursor: snippet.fork_count > 0 ? "pointer" : "default" }}
|
||||
title={snippet.fork_count > 0 ? "查看 Fork 演化" : "还没有人 Fork"}
|
||||
>
|
||||
<StatChip icon={<GitFork size={12} />} value={snippet.fork_count} label="Fork" />
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 操作 */}
|
||||
<div className="mt-4 pt-4" style={{ borderTop: "1px solid var(--line)" }}>
|
||||
<SnippetActions
|
||||
snippet={snippet}
|
||||
urlStyle={urlStyle}
|
||||
isOwner={isOwner}
|
||||
isStaff={isStaff}
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* 代码窗格 */}
|
||||
<section className="mt-6">
|
||||
<SnippetCodeView
|
||||
code={snippet.code}
|
||||
language={snippet.language}
|
||||
snippetId={snippet.id}
|
||||
defaultFold={true}
|
||||
foldLines={25}
|
||||
/>
|
||||
</section>
|
||||
|
||||
{snippet.description && (
|
||||
<section className="mt-7">
|
||||
<h2 className="text-[13px] font-bold mb-2.5 flex items-center gap-2" style={{ color: "var(--ink)" }}>
|
||||
<span
|
||||
className="w-1 h-1 rounded-full"
|
||||
style={{ background: "var(--accent)" }}
|
||||
aria-hidden
|
||||
/>
|
||||
说明
|
||||
</h2>
|
||||
<MarkdownBody content={snippet.description} />
|
||||
</section>
|
||||
)}
|
||||
|
||||
{forksRes.total > 0 && (
|
||||
<section id="snippet-forks" className="mt-7 scroll-mt-24">
|
||||
<h2 className="text-[13px] font-bold mb-2.5 flex items-center gap-2" style={{ color: "var(--ink)" }}>
|
||||
<span
|
||||
className="w-1 h-1 rounded-full"
|
||||
style={{ background: "var(--accent)" }}
|
||||
aria-hidden
|
||||
/>
|
||||
Fork（{forksRes.total}）
|
||||
</h2>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{forksRes.items.slice(0, 5).map((f) => (
|
||||
<Link
|
||||
key={f.id}
|
||||
href={snippetPath(urlStyle, f.id)}
|
||||
className="inline-flex items-center gap-2 self-start max-w-full rounded-lg px-2.5 py-1.5 text-[12.5px] transition-colors hover:bg-[var(--panel-2)]"
|
||||
style={{ color: "var(--ink-2)", border: "1px solid var(--line)" }}
|
||||
>
|
||||
<GitFork size={12} style={{ color: "var(--ink-3)" }} />
|
||||
<span className="truncate">{f.title}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 评论 */}
|
||||
<section className="mt-8 pt-7" style={{ borderTop: "1px solid var(--line)" }}>
|
||||
<SnippetCommentSection
|
||||
snippetId={snippet.id}
|
||||
initialItems={commentsRes.items}
|
||||
initialTotal={commentsRes.total}
|
||||
urlStyle={urlStyle}
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatChip({ icon, value, label }: { icon: React.ReactNode; value: number; label: string }) {
|
||||
return (
|
||||
<span
|
||||
className="inline-flex items-center gap-1.5 h-7 px-2.5 rounded-full text-[11.5px] tabular-nums"
|
||||
style={{ background: "var(--panel-2)", color: "var(--ink-3)", border: "1px solid var(--line)" }}
|
||||
title={`${value} ${label}`}
|
||||
>
|
||||
<span style={{ color: "var(--ink-3)" }}>{icon}</span>
|
||||
{value}
|
||||
<span className="hidden sm:inline">{label}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
52
frontend/app/snippets/new/page.tsx
Normal file
52
frontend/app/snippets/new/page.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
"use client";
|
||||
|
||||
import { Suspense } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { apiMe } from "@/lib/api";
|
||||
import SnippetEditor from "@/components/SnippetEditor";
|
||||
|
||||
function NewSnippetInner() {
|
||||
const router = useRouter();
|
||||
const [ready, setReady] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
apiMe()
|
||||
.then((res) => {
|
||||
if (!res.user) {
|
||||
router.push("/login?redirect=/snippets/new");
|
||||
return;
|
||||
}
|
||||
setReady(true);
|
||||
})
|
||||
.catch(() => {
|
||||
router.push("/login?redirect=/snippets/new");
|
||||
});
|
||||
}, [router]);
|
||||
|
||||
if (!ready) {
|
||||
return (
|
||||
<div className="j13-compose-stage is-studio px-8 py-16 text-center">
|
||||
<p className="meta">正在准备编辑器…</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <SnippetEditor mode="create" />;
|
||||
}
|
||||
|
||||
export default function NewSnippetPage() {
|
||||
return (
|
||||
<div className="j13-compose-page">
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="j13-compose-stage is-studio px-8 py-16 text-center">
|
||||
<p className="meta">正在准备编辑器…</p>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<NewSnippetInner />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
49
frontend/app/snippets/page.tsx
Normal file
49
frontend/app/snippets/page.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import type { Metadata } from "next";
|
||||
import { fetchSnippets, fetchSnippetLanguages, fetchSnippetStats, type SnippetStats } from "@/lib/api";
|
||||
import { getPublicSettingsCached } from "@/lib/serverData";
|
||||
import { requestCanonical } from "@/lib/canonicalMeta";
|
||||
import { snippetsPath } from "@/lib/urlStyle";
|
||||
import SnippetExplorer from "@/components/SnippetExplorer";
|
||||
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const settings = await getPublicSettingsCached();
|
||||
return {
|
||||
title: "代码片段",
|
||||
description: settings.site_description,
|
||||
...(await requestCanonical(snippetsPath(settings.url_style))),
|
||||
};
|
||||
}
|
||||
|
||||
export default async function SnippetsPage() {
|
||||
const settings = await getPublicSettingsCached();
|
||||
|
||||
let initialItems: Awaited<ReturnType<typeof fetchSnippets>>["items"] = [];
|
||||
let initialTotal = 0;
|
||||
let languages: string[] = [];
|
||||
let stats: SnippetStats | null = null;
|
||||
try {
|
||||
const [listRes, langRes, statsRes] = await Promise.all([
|
||||
fetchSnippets({ size: 12 }),
|
||||
fetchSnippetLanguages(),
|
||||
fetchSnippetStats(),
|
||||
]);
|
||||
initialItems = listRes.items;
|
||||
initialTotal = listRes.total;
|
||||
languages = langRes.languages;
|
||||
stats = statsRes;
|
||||
} catch {
|
||||
/* 降级空态 */
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-w-0 pt-5 sm:pt-7">
|
||||
<SnippetExplorer
|
||||
initialItems={initialItems}
|
||||
initialTotal={initialTotal}
|
||||
languages={languages}
|
||||
urlStyle={settings.url_style}
|
||||
stats={stats}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -55,9 +55,9 @@ export default function FavoriteButton({
|
||||
variant === "compact"
|
||||
? "px-2.5 py-1.5 gap-1 text-[12.5px]"
|
||||
: variant === "article"
|
||||
? "px-7 py-3 gap-2 text-[15px] min-w-[132px]"
|
||||
? "px-5 py-2.5 gap-1.5 text-[14px]"
|
||||
: "px-4 py-2 gap-1.5 text-sm";
|
||||
const iconSize = variant === "compact" ? 13 : variant === "article" ? 18 : 15;
|
||||
const iconSize = variant === "compact" ? 13 : variant === "article" ? 16 : 15;
|
||||
|
||||
return (
|
||||
<button
|
||||
@@ -66,12 +66,7 @@ export default function FavoriteButton({
|
||||
data-tip={favorited ? "取消收藏" : "收藏"}
|
||||
aria-label={favorited ? "取消收藏" : "收藏"}
|
||||
aria-pressed={favorited}
|
||||
className={`inline-flex items-center justify-center tabular-nums rounded-full border transition-colors duration-150 disabled:opacity-50 ${
|
||||
favorited
|
||||
? "border-[var(--accent)] text-[var(--accent)] bg-[color-mix(in_srgb,var(--accent)_10%,var(--panel))]"
|
||||
: "border-[var(--line-2)] text-[var(--ink-2)] hover:border-[var(--accent)] hover:text-[var(--accent)]"
|
||||
} ${sizeCls}`}
|
||||
style={!favorited ? { background: "var(--panel)" } : undefined}
|
||||
className={`j13-fav inline-flex items-center justify-center tabular-nums border disabled:opacity-50 ${variant === "article" ? "j13-like-article" : ""} ${favorited ? "is-favorited" : ""} ${sizeCls}`}
|
||||
>
|
||||
<Bookmark size={iconSize} fill={favorited ? "currentColor" : "none"} />
|
||||
{variant === "article" && <span>{favorited ? "已收藏" : "收藏"}</span>}
|
||||
|
||||
@@ -20,6 +20,7 @@ import {
|
||||
MessageSquare,
|
||||
X,
|
||||
ExternalLink,
|
||||
CodeXml,
|
||||
} from "lucide-react";
|
||||
import { apiLogout, apiMe, apiChatUnreadSummary, type User } from "@/lib/api";
|
||||
import { hasAuthCookieHint } from "@/lib/cookies";
|
||||
@@ -37,7 +38,7 @@ import BadgeChip from "./BadgeChip";
|
||||
import BrandLockup from "./BrandLockup";
|
||||
import { useAllowMessages } from "./MessagesPolicyProvider";
|
||||
import { useSiteBrand, useUrlStyle } from "./SiteBrandProvider";
|
||||
import { leaderboardPath, libraryPath } from "@/lib/urlStyle";
|
||||
import { leaderboardPath, libraryPath, snippetsPath } from "@/lib/urlStyle";
|
||||
import {
|
||||
HEADER_NAV_BUILTIN_LABELS,
|
||||
isHeaderNavExternal,
|
||||
@@ -84,6 +85,7 @@ export default function Header({
|
||||
const urlStyle = useUrlStyle();
|
||||
const lbHref = leaderboardPath(urlStyle);
|
||||
const libHref = libraryPath(urlStyle);
|
||||
const snipHref = snippetsPath(urlStyle);
|
||||
// 顶部主导航由后台「基本信息 → 顶部导航」配置（顺序/显隐/自定义链接），
|
||||
// 配置为空时整个 nav 不渲染（含左侧分隔线）；移动端导航走底部公共菜单
|
||||
const headerNav = useSiteBrand().header_nav;
|
||||
@@ -91,16 +93,22 @@ export default function Header({
|
||||
home: <Home size={15} />,
|
||||
leaderboard: <Trophy size={15} />,
|
||||
library: <BookOpen size={15} />,
|
||||
snippets: <CodeXml size={15} />,
|
||||
};
|
||||
const builtinNavHref: Record<HeaderNavBuiltinKey, string> = {
|
||||
home: "/",
|
||||
leaderboard: lbHref,
|
||||
library: libHref,
|
||||
snippets: snipHref,
|
||||
};
|
||||
const isBuiltinNavActive = (key: HeaderNavBuiltinKey): boolean => {
|
||||
if (!pathname) return false;
|
||||
if (key === "home") return pathname === "/";
|
||||
if (key === "leaderboard") return pathname === lbHref || pathname.startsWith(`${lbHref}/`);
|
||||
if (key === "snippets") {
|
||||
// 片段详情标准路径与伪静态（/snippet-*.html）统一按前缀高亮
|
||||
return pathname.startsWith("/snippets") || pathname.startsWith("/snippet-");
|
||||
}
|
||||
// 书库详情/阅读页标准路径与伪静态（/library-*.html）统一按 /library 前缀高亮
|
||||
return pathname.startsWith("/library");
|
||||
};
|
||||
|
||||
@@ -64,9 +64,9 @@ export default function LikeButton({
|
||||
variant === "compact"
|
||||
? "px-2.5 py-1.5 gap-1 text-[12.5px]"
|
||||
: variant === "article"
|
||||
? "px-7 py-3 gap-2 text-[15px] min-w-[148px]"
|
||||
? "px-5 py-2.5 gap-1.5 text-[14px]"
|
||||
: "px-4 py-2 gap-1.5 text-sm";
|
||||
const iconSize = variant === "compact" ? 13 : variant === "article" ? 18 : 15;
|
||||
const iconSize = variant === "compact" ? 13 : variant === "article" ? 16 : 15;
|
||||
|
||||
return (
|
||||
<button
|
||||
@@ -75,7 +75,7 @@ export default function LikeButton({
|
||||
data-tip={liked ? "取消点赞" : "点赞"}
|
||||
aria-label={liked ? "取消点赞" : "点赞"}
|
||||
aria-pressed={liked}
|
||||
className={`j13-like inline-flex items-center justify-center tabular-nums rounded-full border disabled:opacity-50 ${liked ? "is-liked" : ""} ${sizeCls}`}
|
||||
className={`j13-like inline-flex items-center justify-center tabular-nums border disabled:opacity-50 ${variant === "article" ? "j13-like-article" : ""} ${liked ? "is-liked" : ""} ${sizeCls}`}
|
||||
>
|
||||
<span key={String(liked)} className={liked ? "j13-heart-pop inline-flex" : "inline-flex"}>
|
||||
<IconHeart size={iconSize} filled={liked} />
|
||||
|
||||
@@ -9,6 +9,7 @@ import MdTimeline from "@/components/markdown/MdTimeline";
|
||||
import MdEntries from "@/components/markdown/MdEntries";
|
||||
import MdDetails from "@/components/markdown/MdDetails";
|
||||
import MdVideo from "@/components/markdown/MdVideo";
|
||||
import MdSnippet from "@/components/markdown/MdSnippet";
|
||||
|
||||
type MarkdownBodyProps = {
|
||||
content: string;
|
||||
@@ -92,6 +93,10 @@ export default async function MarkdownBody({
|
||||
nodes.push(<MdVideo key={`video-${i}`} provider={seg.provider} id={seg.id} />);
|
||||
continue;
|
||||
}
|
||||
if (seg.type === "snippet") {
|
||||
nodes.push(<MdSnippet key={`snippet-${i}`} id={seg.id} />);
|
||||
continue;
|
||||
}
|
||||
const kind = seg.kind as HideKind;
|
||||
if (seg.locked) {
|
||||
nodes.push(
|
||||
|
||||
@@ -113,6 +113,18 @@ export default function MarkdownBodyClient({
|
||||
if (seg.type === "video") {
|
||||
return <MdVideo key={`video-${i}`} provider={seg.provider} id={seg.id} />;
|
||||
}
|
||||
if (seg.type === "snippet") {
|
||||
// 客户端预览（发帖/评论草稿）无法 SSR 取数，渲染占位卡提示
|
||||
return (
|
||||
<div
|
||||
key={`snippet-${i}`}
|
||||
className="my-3 flex items-center gap-2 rounded-xl px-3 py-2.5 text-[13px]"
|
||||
style={{ border: "1px dashed var(--line-2)", color: "var(--ink-3)" }}
|
||||
>
|
||||
代码片段 #{seg.id}（发布后可见）
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const kind = seg.kind as HideKind;
|
||||
if (seg.locked) {
|
||||
return (
|
||||
|
||||
@@ -45,6 +45,7 @@ import { toast } from "@/lib/toast";
|
||||
import MarkdownBodyClient from "@/components/MarkdownBodyClient";
|
||||
import ImageInsertModal from "@/components/ImageInsertModal";
|
||||
import TimelineEditor from "@/components/TimelineEditor";
|
||||
import SnippetPickerModal from "@/components/SnippetPickerModal";
|
||||
import { ENTRIES_TEMPLATE, ENTRIES_TEMPLATE_AUTO } from "@/lib/entryBlocks";
|
||||
import EmojiPicker from "@/components/EmojiPicker";
|
||||
import { resolveTimelineBlockForEdit, parseVideoInput } from "@/lib/directiveBlocks";
|
||||
@@ -260,6 +261,7 @@ export default function MarkdownEditor({
|
||||
const [activeWheel, setActiveWheel] = useState<"fg" | "bg" | null>(null);
|
||||
const [colorHsv, setColorHsv] = useState<HSV>({ h: 0, s: 1, v: 1 });
|
||||
const [videoInput, setVideoInput] = useState("");
|
||||
const [snippetPickerOpen, setSnippetPickerOpen] = useState(false);
|
||||
const [toolNarrow, setToolNarrow] = useState(false);
|
||||
const [uploadError, setUploadError] = useState("");
|
||||
const [modKey, setModKey] = useState("Ctrl");
|
||||
@@ -1670,6 +1672,7 @@ export default function MarkdownEditor({
|
||||
{!isComment && (
|
||||
<button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => openPopover("video")}>视频…</button>
|
||||
)}
|
||||
<button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { setPopover(null); setSnippetPickerOpen(true); }}>代码片段…</button>
|
||||
{toolNarrow && (
|
||||
<button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { setPopover(null); toggleFullscreen(); }}>{fullscreen ? "退出全屏" : "全屏写作"}</button>
|
||||
)}
|
||||
@@ -1712,6 +1715,13 @@ export default function MarkdownEditor({
|
||||
{popover === "video" && videoPopover}
|
||||
</div>
|
||||
)}
|
||||
{!isComment && !toolNarrow && (
|
||||
<ToolBtn
|
||||
label="代码片段"
|
||||
icon={<Code2 size={15} />}
|
||||
onClick={() => setSnippetPickerOpen(true)}
|
||||
/>
|
||||
)}
|
||||
{allowHide && !toolNarrow ? (
|
||||
<div className="j13-md-popover-anchor relative">
|
||||
<ToolBtn
|
||||
@@ -1897,6 +1907,12 @@ export default function MarkdownEditor({
|
||||
onInsertUrl={insertImageUrl}
|
||||
onPickMedia={(item) => insertAtCursor(``)}
|
||||
/>
|
||||
|
||||
<SnippetPickerModal
|
||||
open={snippetPickerOpen}
|
||||
onClose={() => setSnippetPickerOpen(false)}
|
||||
onPick={(id) => insertAtCursor(`[snippet id=${id}]`)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -50,7 +50,7 @@ export default async function PostRow({
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`group relative flex items-center px-4 sm:px-5 border-t cursor-pointer transition-colors hover:bg-[var(--item-hover-bg)] focus-within:bg-[var(--item-hover-bg)] j13-fade-up ${
|
||||
className={`group relative flex items-center px-4 sm:px-5 border-t cursor-pointer transition-colors hover:bg-[var(--item-hover-bg)] focus-within:bg-[var(--item-hover-bg)] j13-post-row j13-fade-up ${
|
||||
compact ? "gap-2.5 sm:gap-3" : "gap-3.5 sm:gap-4"
|
||||
}`}
|
||||
style={{
|
||||
|
||||
197
frontend/components/SnippetActions.tsx
Normal file
197
frontend/components/SnippetActions.tsx
Normal file
@@ -0,0 +1,197 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { GitFork, History, Pencil, Trash2, Copy, Check } from "lucide-react";
|
||||
import { apiForkSnippet, apiDeleteSnippet, apiMe } from "@/lib/api";
|
||||
import type { SnippetDetail } from "@/lib/api";
|
||||
import { toast } from "@/lib/toast";
|
||||
import { snippetPath, snippetsPath, type UrlStyle } from "@/lib/urlStyle";
|
||||
import Modal from "@/components/Modal";
|
||||
import SnippetVersionModal from "@/components/SnippetVersionModal";
|
||||
|
||||
export default function SnippetActions({
|
||||
snippet,
|
||||
urlStyle,
|
||||
isOwner: initialIsOwner,
|
||||
isStaff: initialIsStaff,
|
||||
}: {
|
||||
snippet: SnippetDetail;
|
||||
urlStyle: UrlStyle;
|
||||
isOwner: boolean;
|
||||
isStaff: boolean;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [isOwner, setIsOwner] = useState(initialIsOwner);
|
||||
const [isStaff, setIsStaff] = useState(initialIsStaff);
|
||||
const [forking, setForking] = useState(false);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
const [historyOpen, setHistoryOpen] = useState(false);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
apiMe()
|
||||
.then((res) => {
|
||||
if (res.user) {
|
||||
setIsOwner(res.user.id === snippet.user_id);
|
||||
setIsStaff(["admin", "moderator"].includes(res.user.role));
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}, [snippet.user_id]);
|
||||
|
||||
const onFork = async () => {
|
||||
if (forking) return;
|
||||
setForking(true);
|
||||
try {
|
||||
const res = await apiForkSnippet(snippet.id);
|
||||
toast("已复制为你的私有副本，随便改改吧", "ok");
|
||||
// 直接进入编辑页，让"Fork 后可以演化"这件事立刻可见
|
||||
router.push(`/snippets/${res.snippet.id}/edit`);
|
||||
} catch (e) {
|
||||
toast(e instanceof Error ? e.message : "Fork 失败");
|
||||
} finally {
|
||||
setForking(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onDelete = async () => {
|
||||
if (deleting) return;
|
||||
setDeleting(true);
|
||||
try {
|
||||
await apiDeleteSnippet(snippet.id);
|
||||
toast("已删除", "ok");
|
||||
router.push(snippetsPath(urlStyle));
|
||||
} catch (e) {
|
||||
toast(e instanceof Error ? e.message : "删除失败");
|
||||
} finally {
|
||||
setDeleting(false);
|
||||
setDeleteOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onCopyLink = async () => {
|
||||
try {
|
||||
const url = `${window.location.origin}${snippetPath(urlStyle, snippet.id)}`;
|
||||
await navigator.clipboard.writeText(url);
|
||||
setCopied(true);
|
||||
toast("链接已复制", "ok");
|
||||
window.setTimeout(() => setCopied(false), 1600);
|
||||
} catch {
|
||||
toast("复制失败");
|
||||
}
|
||||
};
|
||||
|
||||
const btnBase =
|
||||
"h-8 px-3 inline-flex items-center gap-1.5 rounded-full text-[12.5px] font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed";
|
||||
const btnNormal = {
|
||||
background: "var(--panel)",
|
||||
border: "1px solid var(--line)",
|
||||
color: "var(--ink-2)",
|
||||
} as const;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCopyLink}
|
||||
className={btnBase}
|
||||
style={btnNormal}
|
||||
title="复制片段链接"
|
||||
>
|
||||
{copied ? <Check size={13.5} /> : <Copy size={13.5} />}
|
||||
{copied ? "已复制" : "复制链接"}
|
||||
</button>
|
||||
|
||||
{snippet.visibility === "public" && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onFork}
|
||||
disabled={forking}
|
||||
className={btnBase}
|
||||
style={btnNormal}
|
||||
title="把这份代码复制为你的私有副本，可任意修改，互不影响"
|
||||
>
|
||||
<GitFork size={13.5} />
|
||||
{forking ? "创建副本中…" : "Fork 副本"}
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setHistoryOpen(true)}
|
||||
className={btnBase}
|
||||
style={btnNormal}
|
||||
title="查看版本历史"
|
||||
>
|
||||
<History size={13.5} /> 版本历史
|
||||
</button>
|
||||
|
||||
{isOwner && (
|
||||
<Link
|
||||
href={`/snippets/${snippet.id}/edit`}
|
||||
className={btnBase}
|
||||
style={btnNormal}
|
||||
title="编辑片段"
|
||||
>
|
||||
<Pencil size={13.5} /> 编辑
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{(isOwner || isStaff) && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setDeleteOpen(true)}
|
||||
className={btnBase}
|
||||
style={{ ...btnNormal, color: "var(--danger)" }}
|
||||
title="删除片段"
|
||||
>
|
||||
<Trash2 size={13.5} /> 删除
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
open={deleteOpen}
|
||||
title="删除片段"
|
||||
description="删除后不可恢复，确定要删除这个代码片段吗？"
|
||||
onClose={() => setDeleteOpen(false)}
|
||||
dismissOnOverlay
|
||||
maxWidthClass="max-w-sm"
|
||||
footer={
|
||||
<>
|
||||
<button type="button" className="btn btn-line btn-sm" onClick={() => setDeleteOpen(false)}>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm"
|
||||
style={{ background: "var(--danger)", borderColor: "var(--danger)" }}
|
||||
onClick={onDelete}
|
||||
disabled={deleting}
|
||||
>
|
||||
{deleting ? "删除中…" : "确认删除"}
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<p className="text-[13.5px]" style={{ color: "var(--ink-2)" }}>
|
||||
此操作不可撤销。
|
||||
</p>
|
||||
</Modal>
|
||||
|
||||
<SnippetVersionModal
|
||||
open={historyOpen}
|
||||
onClose={() => setHistoryOpen(false)}
|
||||
snippetId={snippet.id}
|
||||
currentCode={snippet.code}
|
||||
currentTitle={snippet.title}
|
||||
currentLanguage={snippet.language}
|
||||
currentDescription={snippet.description}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
217
frontend/components/SnippetCodeView.tsx
Normal file
217
frontend/components/SnippetCodeView.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useRef, useLayoutEffect } from "react";
|
||||
import { Check, Copy, ChevronDown, ChevronUp } from "lucide-react";
|
||||
import { toast } from "@/lib/toast";
|
||||
import { apiRecordSnippetCopy } from "@/lib/api";
|
||||
import { siteCodeToHtml } from "@/components/markdown/shikiHighlighter";
|
||||
|
||||
const MONO = "var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)";
|
||||
const LINE_H = 22; // px，与下方 leading 严格对齐
|
||||
const PAD_Y = 14;
|
||||
|
||||
/** 从 shiki 双主题输出提取 pre 上的 CSS 变量与 code 内逐行 HTML */
|
||||
function extractShiki(html: string): { vars: Record<string, string>; lines: string[] } | null {
|
||||
const codeM = /<code[^>]*>([\s\S]*?)<\/code>/i.exec(html);
|
||||
if (!codeM) return null;
|
||||
const vars: Record<string, string> = {};
|
||||
const preM = /<pre[^>]*\sstyle="([^"]*)"[^>]*>/i.exec(html);
|
||||
if (preM) {
|
||||
for (const m of preM[1].matchAll(/(--[\w-]+)\s*:\s*([^;]+)/g)) {
|
||||
vars[m[1]] = m[2].trim();
|
||||
}
|
||||
}
|
||||
return { vars, lines: codeM[1].split("\n") };
|
||||
}
|
||||
|
||||
function WindowDots() {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1.5 shrink-0" aria-hidden>
|
||||
<span className="w-2.5 h-2.5 rounded-full" style={{ background: "#ff5f57" }} />
|
||||
<span className="w-2.5 h-2.5 rounded-full" style={{ background: "#febc2e" }} />
|
||||
<span className="w-2.5 h-2.5 rounded-full" style={{ background: "#28c840" }} />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/** 片段代码视图：编辑器窗格 + shiki 高亮 + 行号 + 复制 + 超长折叠 */
|
||||
export default function SnippetCodeView({
|
||||
code,
|
||||
language,
|
||||
snippetId,
|
||||
defaultFold = true,
|
||||
foldLines = 25,
|
||||
}: {
|
||||
code: string;
|
||||
language: string;
|
||||
snippetId: number;
|
||||
defaultFold?: boolean;
|
||||
foldLines?: number;
|
||||
}) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [expanded, setExpanded] = useState(!defaultFold);
|
||||
const [hl, setHl] = useState<{ vars: Record<string, string>; lines: string[] } | null>(null);
|
||||
const [maxH, setMaxH] = useState<number | undefined>(undefined);
|
||||
const bodyRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const plainLines = code.split("\n");
|
||||
const lineCount = plainLines.length;
|
||||
const canCollapse = defaultFold && lineCount > foldLines;
|
||||
const collapsedH = PAD_Y + foldLines * LINE_H;
|
||||
const rows = hl?.lines ?? plainLines;
|
||||
const highlighted = hl !== null;
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
siteCodeToHtml(code, language)
|
||||
.then((html) => {
|
||||
if (cancelled) return;
|
||||
const parsed = extractShiki(html);
|
||||
if (parsed && parsed.lines.length > 0) {
|
||||
setHl({ vars: parsed.vars, lines: parsed.lines.slice(0, lineCount) });
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [code, language, lineCount]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!canCollapse || !bodyRef.current) return;
|
||||
setMaxH(expanded ? bodyRef.current.scrollHeight : collapsedH);
|
||||
}, [expanded, canCollapse, collapsedH, hl]);
|
||||
|
||||
const onCopy = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(code);
|
||||
setCopied(true);
|
||||
toast("已复制到剪贴板", "ok");
|
||||
apiRecordSnippetCopy(snippetId).catch(() => {});
|
||||
window.setTimeout(() => setCopied(false), 1600);
|
||||
} catch {
|
||||
toast("复制失败，请手动选择文本");
|
||||
}
|
||||
};
|
||||
|
||||
const fileName = `snippet.${language === "plaintext" ? "txt" : language}`;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="rounded-xl overflow-hidden"
|
||||
style={{ background: "var(--panel-2)", border: "1px solid var(--line)" }}
|
||||
>
|
||||
{/* 窗格标题栏 */}
|
||||
<div
|
||||
className="flex items-center gap-2.5 px-3.5 h-10"
|
||||
style={{ borderBottom: "1px solid var(--line)" }}
|
||||
>
|
||||
<WindowDots />
|
||||
<span className="text-[11px] truncate" style={{ fontFamily: MONO, color: "var(--ink-3)" }}>
|
||||
{fileName}
|
||||
</span>
|
||||
<span className="text-[10.5px] tabular-nums hidden sm:inline" style={{ color: "var(--ink-3)" }}>
|
||||
{lineCount} 行
|
||||
</span>
|
||||
<span
|
||||
className="ml-auto shrink-0 text-[9.5px] font-semibold uppercase tracking-[0.1em] px-1.5 py-0.5 rounded"
|
||||
style={{ fontFamily: MONO, color: "var(--ink-3)", background: "var(--panel)" }}
|
||||
>
|
||||
{language || "text"}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCopy}
|
||||
aria-label={copied ? "已复制" : "复制代码"}
|
||||
title="复制代码"
|
||||
className="shrink-0 h-7 px-2.5 inline-flex items-center gap-1.5 rounded-md text-[11.5px] font-medium transition-colors"
|
||||
style={{
|
||||
color: copied ? "var(--accent)" : "var(--ink-3)",
|
||||
background: "var(--panel)",
|
||||
border: "1px solid var(--line)",
|
||||
}}
|
||||
>
|
||||
{copied ? <Check size={12.5} /> : <Copy size={12.5} />}
|
||||
<span className="hidden sm:inline">{copied ? "已复制" : "复制"}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 代码主体 */}
|
||||
<div
|
||||
ref={bodyRef}
|
||||
className="relative overflow-hidden"
|
||||
style={{
|
||||
maxHeight: canCollapse ? maxH ?? collapsedH : undefined,
|
||||
transition: "max-height 360ms cubic-bezier(0.22, 1, 0.36, 1)",
|
||||
}}
|
||||
>
|
||||
<pre
|
||||
className={`j13-sn-code m-0 text-[13px] overflow-x-auto ${highlighted ? "" : "whitespace-pre"}`}
|
||||
style={{
|
||||
fontFamily: MONO,
|
||||
lineHeight: `${LINE_H}px`,
|
||||
padding: `${PAD_Y}px 0`,
|
||||
color: "var(--ink-2)",
|
||||
...(hl?.vars ?? {}),
|
||||
} as React.CSSProperties}
|
||||
>
|
||||
{rows.map((ln, i) => (
|
||||
<div key={i} className="flex min-w-max">
|
||||
<span
|
||||
className="shrink-0 w-10 pr-3 text-right select-none tabular-nums text-[11.5px]"
|
||||
style={{
|
||||
color: "var(--ink-3)",
|
||||
opacity: 0.55,
|
||||
marginRight: 12,
|
||||
borderRight: "1px solid var(--line)",
|
||||
lineHeight: `${LINE_H}px`,
|
||||
}}
|
||||
>
|
||||
{i + 1}
|
||||
</span>
|
||||
{highlighted ? (
|
||||
<span
|
||||
className="pr-5"
|
||||
style={{ lineHeight: `${LINE_H}px` }}
|
||||
dangerouslySetInnerHTML={{ __html: ln || " " }}
|
||||
/>
|
||||
) : (
|
||||
<span className="pr-5" style={{ lineHeight: `${LINE_H}px` }}>
|
||||
{ln || " "}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</pre>
|
||||
{canCollapse && !expanded && (
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 h-10 pointer-events-none"
|
||||
style={{ background: "linear-gradient(to top, var(--panel-2), transparent)" }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{canCollapse && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setExpanded((v) => !v)}
|
||||
className="w-full h-9 flex items-center justify-center gap-1.5 text-[12px] font-medium transition-colors hover:bg-[var(--accent-soft)]"
|
||||
style={{
|
||||
color: expanded ? "var(--ink-3)" : "var(--accent)",
|
||||
borderTop: "1px solid var(--line)",
|
||||
}}
|
||||
>
|
||||
{expanded ? (
|
||||
<>
|
||||
<ChevronUp size={14} /> 收起
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ChevronDown size={14} /> 展开全部（{lineCount} 行）
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
48
frontend/components/SnippetCommentCountChip.tsx
Normal file
48
frontend/components/SnippetCommentCountChip.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
export function snippetCommentCountEvent(snippetId: number) {
|
||||
return `j13:snippet:${snippetId}:comment-count`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 片段详情顶部的评论计数 chip：
|
||||
* 初始值来自 SSR，评论区增删后通过 window CustomEvent 同步。
|
||||
*/
|
||||
export default function SnippetCommentCountChip({
|
||||
snippetId,
|
||||
initial,
|
||||
icon,
|
||||
label,
|
||||
}: {
|
||||
snippetId: number;
|
||||
initial: number;
|
||||
icon: ReactNode;
|
||||
label: string;
|
||||
}) {
|
||||
const [count, setCount] = useState(initial);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: Event) => {
|
||||
const next = (e as CustomEvent<number>).detail;
|
||||
if (typeof next === "number") setCount(next);
|
||||
};
|
||||
const name = snippetCommentCountEvent(snippetId);
|
||||
window.addEventListener(name, handler);
|
||||
return () => window.removeEventListener(name, handler);
|
||||
}, [snippetId]);
|
||||
|
||||
return (
|
||||
<span
|
||||
className="inline-flex items-center gap-1.5 h-7 px-2.5 rounded-full text-[11.5px] tabular-nums"
|
||||
style={{ background: "var(--panel-2)", color: "var(--ink-3)", border: "1px solid var(--line)" }}
|
||||
title={`${count} ${label}`}
|
||||
>
|
||||
<span style={{ color: "var(--ink-3)" }}>{icon}</span>
|
||||
{count}
|
||||
<span className="hidden sm:inline">{label}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
702
frontend/components/SnippetCommentSection.tsx
Normal file
702
frontend/components/SnippetCommentSection.tsx
Normal file
@@ -0,0 +1,702 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback, useRef } from "react";
|
||||
import { MessageSquare, Send } from "lucide-react";
|
||||
import {
|
||||
apiCreateSnippetComment,
|
||||
apiUpdateSnippetComment,
|
||||
apiDeleteSnippetComment,
|
||||
apiSnippetCommentHistory,
|
||||
apiMe,
|
||||
type SnippetCommentItem,
|
||||
} from "@/lib/api";
|
||||
import { toast } from "@/lib/toast";
|
||||
import { formatRelative, formatDateTime } from "@/lib/format";
|
||||
import Avatar from "@/components/Avatar";
|
||||
import { useUrlStyle } from "@/components/SiteBrandProvider";
|
||||
import { userPath } from "@/lib/urlStyle";
|
||||
import Link from "next/link";
|
||||
import MarkdownEditor from "@/components/MarkdownEditor";
|
||||
import MarkdownBodyClient from "@/components/MarkdownBodyClient";
|
||||
import EditHistoryModal, { type EditHistoryItem } from "@/components/EditHistoryModal";
|
||||
import ConfirmDialog from "@/components/ConfirmDialog";
|
||||
import { snippetCommentCountEvent } from "@/components/SnippetCommentCountChip";
|
||||
|
||||
const COMMENT_MAX = 2000; // 与后端 snippetCommentMaxLen 一致
|
||||
|
||||
type MoreItem = {
|
||||
key: string;
|
||||
label: string;
|
||||
danger?: boolean;
|
||||
disabled?: boolean;
|
||||
onSelect: () => void;
|
||||
};
|
||||
|
||||
/** 低频操作：编辑、历史、删除。Escape 关闭并回到触发按钮。 */
|
||||
function CommentMoreMenu({ items }: { items: MoreItem[] }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const btnRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const onDown = (e: MouseEvent) => {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
|
||||
};
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key !== "Escape") return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setOpen(false);
|
||||
btnRef.current?.focus();
|
||||
};
|
||||
document.addEventListener("mousedown", onDown);
|
||||
document.addEventListener("keydown", onKey);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", onDown);
|
||||
document.removeEventListener("keydown", onKey);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
if (items.length === 0) return null;
|
||||
const normal = items.filter((item) => !item.danger);
|
||||
const danger = items.filter((item) => item.danger);
|
||||
|
||||
return (
|
||||
<div className="cmt-more" ref={ref}>
|
||||
<button
|
||||
ref={btnRef}
|
||||
type="button"
|
||||
className="cmt-more-btn"
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={open}
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
>
|
||||
更多
|
||||
</button>
|
||||
{open && (
|
||||
<div role="menu" className="cmt-more-menu" aria-label="评论操作">
|
||||
{normal.map((item) => (
|
||||
<button
|
||||
key={item.key}
|
||||
type="button"
|
||||
role="menuitem"
|
||||
disabled={item.disabled}
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
item.onSelect();
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</button>
|
||||
))}
|
||||
{normal.length > 0 && danger.length > 0 ? <div className="cmt-more-sep" role="separator" /> : null}
|
||||
{danger.map((item) => (
|
||||
<button
|
||||
key={item.key}
|
||||
type="button"
|
||||
role="menuitem"
|
||||
className="is-danger"
|
||||
disabled={item.disabled}
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
item.onSelect();
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CommentNode({
|
||||
item,
|
||||
depth,
|
||||
snippetId,
|
||||
onUpdate,
|
||||
onDelete,
|
||||
onOpenHistory,
|
||||
loggedIn,
|
||||
}: {
|
||||
item: SnippetCommentItem;
|
||||
depth: number;
|
||||
snippetId: number;
|
||||
onUpdate: (id: number, content: string) => Promise<void>;
|
||||
onDelete: (id: number) => Promise<void>;
|
||||
onOpenHistory: (id: number, content: string) => void;
|
||||
loggedIn: boolean;
|
||||
}) {
|
||||
const urlStyle = useUrlStyle();
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [editContent, setEditContent] = useState(item.content);
|
||||
const [editUploading, setEditUploading] = useState(false);
|
||||
const [replyOpen, setReplyOpen] = useState(false);
|
||||
const [replyContent, setReplyContent] = useState("");
|
||||
const [replyUploading, setReplyUploading] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [currentUserId, setCurrentUserId] = useState<number | null>(null);
|
||||
const [isStaff, setIsStaff] = useState(false);
|
||||
const [deleteTarget, setDeleteTarget] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
apiMe()
|
||||
.then((res) => {
|
||||
if (res.user) {
|
||||
setCurrentUserId(res.user.id);
|
||||
setIsStaff(["admin", "moderator"].includes(res.user.role));
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}, []);
|
||||
|
||||
const canEdit = currentUserId === item.user_id;
|
||||
const canDelete = canEdit || isStaff;
|
||||
const canViewHistory = loggedIn;
|
||||
const userName = item.user ? item.user.nickname || item.user.username : "已注销";
|
||||
const isFloor = depth === 0;
|
||||
|
||||
const handleEdit = async () => {
|
||||
const next = editContent.trim();
|
||||
if (!next || submitting) return;
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await onUpdate(item.id, next);
|
||||
setEditing(false);
|
||||
toast("已保存", "ok");
|
||||
} catch (e) {
|
||||
toast(e instanceof Error ? e.message : "保存失败");
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
setDeleteTarget(false);
|
||||
if (submitting) return;
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await onDelete(item.id);
|
||||
toast("已删除", "ok");
|
||||
} catch (e) {
|
||||
toast(e instanceof Error ? e.message : "删除失败");
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReply = async () => {
|
||||
const next = replyContent.trim();
|
||||
if (!next || submitting) return;
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await apiCreateSnippetComment(snippetId, next, item.id);
|
||||
setReplyContent("");
|
||||
setReplyOpen(false);
|
||||
toast("已回复", "ok");
|
||||
window.dispatchEvent(new CustomEvent("j13-snippet-comment-refresh"));
|
||||
} catch (e) {
|
||||
toast(e instanceof Error ? e.message : "回复失败");
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const moreItems: MoreItem[] = [];
|
||||
if (canEdit && !editing) {
|
||||
moreItems.push({
|
||||
key: "edit",
|
||||
label: "编辑",
|
||||
disabled: submitting,
|
||||
onSelect: () => setEditing(true),
|
||||
});
|
||||
}
|
||||
if (canViewHistory && item.edited && !editing) {
|
||||
moreItems.push({
|
||||
key: "history",
|
||||
label: "编辑历史",
|
||||
onSelect: () => onOpenHistory(item.id, item.content),
|
||||
});
|
||||
}
|
||||
if (canDelete && !editing) {
|
||||
moreItems.push({
|
||||
key: "delete",
|
||||
label: "删除",
|
||||
danger: true,
|
||||
disabled: submitting,
|
||||
onSelect: () => setDeleteTarget(true),
|
||||
});
|
||||
}
|
||||
|
||||
const editedMark = item.edited ? (
|
||||
canViewHistory ? (
|
||||
<button
|
||||
type="button"
|
||||
className="cmt-edited"
|
||||
onClick={() => onOpenHistory(item.id, item.content)}
|
||||
>
|
||||
已编辑
|
||||
</button>
|
||||
) : (
|
||||
<span className="cmt-edited" data-tip="此评论曾被编辑">
|
||||
已编辑
|
||||
</span>
|
||||
)
|
||||
) : null;
|
||||
|
||||
if (item.deleted) {
|
||||
return (
|
||||
<div
|
||||
id={item.floor ? `comment-${item.floor}` : undefined}
|
||||
data-comment-id={item.id}
|
||||
className={`cmt-item scroll-mt-24 ${isFloor ? "" : "cmt-reply-row"}`}
|
||||
>
|
||||
<div className="flex gap-3">
|
||||
<Avatar size={isFloor ? 34 : 32} name={userName} src={item.user?.avatar} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="cmt-meta">
|
||||
<div className="cmt-meta-lead">
|
||||
<span className="cmt-name" style={{ color: "var(--ink)" }}>
|
||||
{userName}
|
||||
</span>
|
||||
{item.floor && item.floor > 0 && (
|
||||
<a href={`#comment-${item.floor}`} className="cmt-floor-label">
|
||||
#{item.floor}
|
||||
</a>
|
||||
)}
|
||||
<span className="cmt-time">{formatRelative(item.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="cmt-tombstone">
|
||||
<p className="cmt-tombstone-title">该评论已删除</p>
|
||||
</div>
|
||||
<div className="cmt-actions">
|
||||
<CommentMoreMenu items={moreItems} />
|
||||
</div>
|
||||
{item.replies && item.replies.length > 0 && (
|
||||
<div className="cmt-children">
|
||||
{item.replies.map((r) => (
|
||||
<CommentNode
|
||||
key={r.id}
|
||||
item={r}
|
||||
depth={depth + 1}
|
||||
snippetId={snippetId}
|
||||
onUpdate={onUpdate}
|
||||
onDelete={onDelete}
|
||||
onOpenHistory={onOpenHistory}
|
||||
loggedIn={loggedIn}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<ConfirmDialog
|
||||
open={deleteTarget}
|
||||
title="删除评论"
|
||||
message="确定删除这条评论吗？删除后将显示占位，回复仍保留。"
|
||||
confirmLabel="删除"
|
||||
danger
|
||||
onConfirm={handleDelete}
|
||||
onCancel={() => setDeleteTarget(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
id={item.floor ? `comment-${item.floor}` : undefined}
|
||||
data-comment-id={item.id}
|
||||
className={`cmt-item scroll-mt-24 ${isFloor ? "" : "cmt-reply-row"}`}
|
||||
>
|
||||
<div className="flex gap-3">
|
||||
<Link
|
||||
href={userPath(urlStyle, item.user_id)}
|
||||
className="shrink-0"
|
||||
aria-label={userName}
|
||||
>
|
||||
<Avatar size={isFloor ? 34 : 32} name={userName} src={item.user?.avatar} />
|
||||
</Link>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="cmt-meta">
|
||||
<div className="cmt-meta-lead">
|
||||
<Link href={userPath(urlStyle, item.user_id)} className="cmt-name-link group">
|
||||
<span className="cmt-name group-hover:text-[var(--accent)] transition-colors">
|
||||
{userName}
|
||||
</span>
|
||||
</Link>
|
||||
{item.floor && item.floor > 0 && (
|
||||
<a href={`#comment-${item.floor}`} className="cmt-floor-label">
|
||||
#{item.floor}
|
||||
</a>
|
||||
)}
|
||||
<time className="cmt-time" dateTime={item.created_at} data-tip={formatDateTime(item.created_at)}>
|
||||
{formatRelative(item.created_at)}
|
||||
</time>
|
||||
{editedMark}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{editing ? (
|
||||
<div className="cmt-md-editor mt-1">
|
||||
<MarkdownEditor
|
||||
density="comment"
|
||||
value={editContent}
|
||||
onChange={(v) => setEditContent(v.slice(0, COMMENT_MAX))}
|
||||
maxChars={COMMENT_MAX}
|
||||
disabled={submitting}
|
||||
autoFocus
|
||||
allowHide={false}
|
||||
ariaLabel="编辑评论"
|
||||
placeholder="编辑评论…"
|
||||
shortcutName="保存"
|
||||
onUploadingChange={setEditUploading}
|
||||
onSubmitShortcut={() => {
|
||||
void handleEdit();
|
||||
}}
|
||||
footer={
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-line btn-sm"
|
||||
disabled={submitting}
|
||||
onClick={() => {
|
||||
setEditing(false);
|
||||
setEditContent(item.content);
|
||||
}}
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleEdit}
|
||||
disabled={submitting || editUploading || !editContent.trim()}
|
||||
className="btn btn-primary cmt-submit"
|
||||
>
|
||||
{submitting ? "保存中…" : "保存修改"}
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<MarkdownBodyClient content={item.content} className="prose-content prose-comment" />
|
||||
)}
|
||||
|
||||
<div className="cmt-actions">
|
||||
{!editing && loggedIn && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setReplyOpen(!replyOpen)}
|
||||
className={`cmt-reply-btn${replyOpen ? " !text-[var(--accent)]" : ""}`}
|
||||
aria-label={`回复 ${userName}`}
|
||||
>
|
||||
回复
|
||||
</button>
|
||||
)}
|
||||
<CommentMoreMenu items={moreItems} />
|
||||
</div>
|
||||
|
||||
{replyOpen && !editing && (
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
void handleReply();
|
||||
}}
|
||||
className="cmt-reply-form"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2 mb-2 text-[13px]" style={{ color: "var(--ink-2)" }}>
|
||||
<span>
|
||||
回复 <span style={{ color: "var(--accent)", fontWeight: 600 }}>@{userName}</span>
|
||||
</span>
|
||||
<button type="button" className="cmt-reply-btn" onClick={() => setReplyOpen(false)}>
|
||||
取消
|
||||
</button>
|
||||
</div>
|
||||
<div className="cmt-md-editor">
|
||||
<MarkdownEditor
|
||||
density="comment"
|
||||
value={replyContent}
|
||||
onChange={(v) => setReplyContent(v.slice(0, COMMENT_MAX))}
|
||||
maxChars={COMMENT_MAX}
|
||||
disabled={submitting}
|
||||
autoFocus
|
||||
allowHide={false}
|
||||
ariaLabel={`回复 ${userName}`}
|
||||
placeholder="写下你的回复…"
|
||||
shortcutName="回复"
|
||||
onUploadingChange={setReplyUploading}
|
||||
onSubmitShortcut={() => {
|
||||
void handleReply();
|
||||
}}
|
||||
footer={
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting || replyUploading || !replyContent.trim()}
|
||||
aria-busy={submitting}
|
||||
className="btn btn-primary cmt-submit"
|
||||
>
|
||||
{submitting ? "回复中…" : "回复"}
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{item.replies && item.replies.length > 0 && (
|
||||
<div className="cmt-children">
|
||||
{item.replies.map((r) => (
|
||||
<CommentNode
|
||||
key={r.id}
|
||||
item={r}
|
||||
depth={depth + 1}
|
||||
snippetId={snippetId}
|
||||
onUpdate={onUpdate}
|
||||
onDelete={onDelete}
|
||||
onOpenHistory={onOpenHistory}
|
||||
loggedIn={loggedIn}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ConfirmDialog
|
||||
open={deleteTarget}
|
||||
title="删除评论"
|
||||
message="确定删除这条评论吗？删除后将显示占位，回复仍保留。"
|
||||
confirmLabel="删除"
|
||||
danger
|
||||
onConfirm={handleDelete}
|
||||
onCancel={() => setDeleteTarget(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SnippetCommentSection({
|
||||
snippetId,
|
||||
initialItems,
|
||||
initialTotal,
|
||||
urlStyle: _urlStyle,
|
||||
}: {
|
||||
snippetId: number;
|
||||
initialItems: SnippetCommentItem[];
|
||||
initialTotal: number;
|
||||
urlStyle: string;
|
||||
}) {
|
||||
const [items, setItems] = useState(initialItems);
|
||||
const [total, setTotal] = useState(initialTotal);
|
||||
const [content, setContent] = useState("");
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [page, setPage] = useState(1);
|
||||
const [loggedIn, setLoggedIn] = useState(false);
|
||||
const [historyCommentId, setHistoryCommentId] = useState<number | null>(null);
|
||||
const [historyCommentContent, setHistoryCommentContent] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
window.dispatchEvent(new CustomEvent(snippetCommentCountEvent(snippetId), { detail: total }));
|
||||
}, [total, snippetId]);
|
||||
|
||||
useEffect(() => {
|
||||
apiMe()
|
||||
.then((res) => setLoggedIn(!!res.user))
|
||||
.catch(() => {});
|
||||
}, []);
|
||||
|
||||
const loadComments = useCallback(
|
||||
async (p: number) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const { fetchSnippetComments } = await import("@/lib/api");
|
||||
const res = await fetchSnippetComments(snippetId, p, 20);
|
||||
setItems(res.items);
|
||||
setTotal(res.total);
|
||||
setPage(p);
|
||||
} catch {
|
||||
toast("加载评论失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
},
|
||||
[snippetId]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const onRefresh = () => loadComments(page);
|
||||
window.addEventListener("j13-snippet-comment-refresh", onRefresh);
|
||||
return () => window.removeEventListener("j13-snippet-comment-refresh", onRefresh);
|
||||
}, [loadComments, page]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const next = content.trim();
|
||||
if (!next || submitting) return;
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await apiCreateSnippetComment(snippetId, next);
|
||||
setContent("");
|
||||
toast("评论成功", "ok");
|
||||
loadComments(1);
|
||||
} catch (e) {
|
||||
toast(e instanceof Error ? e.message : "评论失败");
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdate = async (cid: number, newContent: string) => {
|
||||
await apiUpdateSnippetComment(snippetId, cid, newContent);
|
||||
loadComments(page);
|
||||
};
|
||||
|
||||
const handleDelete = async (cid: number) => {
|
||||
await apiDeleteSnippetComment(snippetId, cid);
|
||||
loadComments(page);
|
||||
};
|
||||
|
||||
const openHistory = (cid: number, currentContent: string) => {
|
||||
setHistoryCommentContent(currentContent);
|
||||
setHistoryCommentId(cid);
|
||||
};
|
||||
|
||||
const fetchHistoryPage = async (p: number, size: number) => {
|
||||
if (!historyCommentId) return { items: [], total: 0, page: p, size };
|
||||
const res = await apiSnippetCommentHistory(snippetId, historyCommentId, p, size);
|
||||
const items: EditHistoryItem[] = res.items.map((it) => ({
|
||||
id: it.id,
|
||||
editor: it.editor
|
||||
? {
|
||||
id: it.editor.id,
|
||||
username: it.editor.username,
|
||||
nickname: it.editor.nickname,
|
||||
avatar: it.editor.avatar,
|
||||
}
|
||||
: { id: 0, username: "已注销", nickname: "已注销", avatar: "" },
|
||||
old_content: it.old_content,
|
||||
created_at: it.created_at,
|
||||
}));
|
||||
return { items, total: res.total, page: res.page, size: res.size };
|
||||
};
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil(total / 20));
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2 className="text-[15px] font-bold mb-4 inline-flex items-center gap-2" style={{ color: "var(--ink)" }}>
|
||||
<MessageSquare size={15} style={{ color: "var(--accent)" }} />
|
||||
评论（{total}）
|
||||
</h2>
|
||||
|
||||
{loggedIn ? (
|
||||
<div className="mb-6 cmt-md-editor">
|
||||
<MarkdownEditor
|
||||
id={`snippet-comment-input-${snippetId}`}
|
||||
density="comment"
|
||||
value={content}
|
||||
onChange={(v) => setContent(v.slice(0, COMMENT_MAX))}
|
||||
maxChars={COMMENT_MAX}
|
||||
disabled={submitting}
|
||||
allowHide={false}
|
||||
ariaLabel="发表评论"
|
||||
placeholder="写下你的看法，支持 Markdown…"
|
||||
onUploadingChange={setUploading}
|
||||
onSubmitShortcut={() => {
|
||||
void handleSubmit();
|
||||
}}
|
||||
footer={
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSubmit}
|
||||
disabled={submitting || uploading || !content.trim()}
|
||||
className="btn btn-primary cmt-submit inline-flex items-center gap-1.5"
|
||||
>
|
||||
<Send size={13} />
|
||||
{submitting ? "发送中…" : "发表评论"}
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="mb-6 rounded-xl px-4 py-6 text-center"
|
||||
style={{ background: "var(--panel-2)", border: "1px solid var(--line)" }}
|
||||
>
|
||||
<p className="text-[13px]" style={{ color: "var(--ink-3)" }}>
|
||||
<Link href="/login" className="hover:underline" style={{ color: "var(--accent)" }}>
|
||||
登录
|
||||
</Link>{" "}
|
||||
后参与评论
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<p className="meta text-[13px] text-center py-8">加载中…</p>
|
||||
) : items.length === 0 ? (
|
||||
<div
|
||||
className="rounded-xl py-10 text-center"
|
||||
style={{ background: "var(--panel-2)", border: "1px dashed var(--line-2)" }}
|
||||
>
|
||||
<MessageSquare size={20} className="mx-auto mb-2" style={{ color: "var(--ink-3)" }} />
|
||||
<p className="text-[13px]" style={{ color: "var(--ink-3)" }}>
|
||||
还没有评论，来抢沙发吧
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col divide-y" style={{ borderColor: "var(--line)" }}>
|
||||
{items.map((item) => (
|
||||
<CommentNode
|
||||
key={item.id}
|
||||
item={item}
|
||||
depth={0}
|
||||
snippetId={snippetId}
|
||||
onUpdate={handleUpdate}
|
||||
onDelete={handleDelete}
|
||||
onOpenHistory={openHistory}
|
||||
loggedIn={loggedIn}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{totalPages > 1 && (
|
||||
<div className="mt-4 flex items-center justify-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
disabled={page <= 1 || loading}
|
||||
onClick={() => loadComments(page - 1)}
|
||||
className="btn btn-line btn-sm"
|
||||
>
|
||||
上一页
|
||||
</button>
|
||||
<span className="meta text-[12.5px] tabular-nums">
|
||||
{page} / {totalPages}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
disabled={page >= totalPages || loading}
|
||||
onClick={() => loadComments(page + 1)}
|
||||
className="btn btn-line btn-sm"
|
||||
>
|
||||
下一页
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<EditHistoryModal
|
||||
open={historyCommentId !== null}
|
||||
title="评论编辑历史"
|
||||
currentContent={historyCommentContent}
|
||||
fetchPage={fetchHistoryPage}
|
||||
onClose={() => setHistoryCommentId(null)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
331
frontend/components/SnippetEditor.tsx
Normal file
331
frontend/components/SnippetEditor.tsx
Normal file
@@ -0,0 +1,331 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { ArrowLeft, CodeXml, Eye, EyeOff, Trash2 } from "lucide-react";
|
||||
import { apiCreateSnippet, apiUpdateSnippet, apiDeleteSnippet, fetchSnippetLanguages, type SnippetInput, type SnippetVisibility } from "@/lib/api";
|
||||
import { toast } from "@/lib/toast";
|
||||
import { snippetPath, snippetsPath, type UrlStyle } from "@/lib/urlStyle";
|
||||
import Modal from "@/components/Modal";
|
||||
import SnippetLangSelect from "@/components/SnippetLangSelect";
|
||||
import { hasAuthCookieHint } from "@/lib/cookies";
|
||||
import { useSiteBrand } from "@/components/SiteBrandProvider";
|
||||
|
||||
const TITLE_MAX = 120;
|
||||
const CODE_MAX = 64 * 1024; // 64KB
|
||||
const DESC_MAX = 8 * 1024; // 8KB
|
||||
|
||||
const VISIBILITY_OPTIONS: { value: SnippetVisibility; label: string; desc: string }[] = [
|
||||
{ value: "private", label: "私有", desc: "仅自己可见" },
|
||||
{ value: "public", label: "公开", desc: "所有人可见，出现在广场" },
|
||||
];
|
||||
|
||||
export default function SnippetEditor({
|
||||
mode,
|
||||
snippetId,
|
||||
initialTitle = "",
|
||||
initialLanguage = "plaintext",
|
||||
initialDescription = "",
|
||||
initialCode = "",
|
||||
initialVisibility = "private",
|
||||
}: {
|
||||
mode: "create" | "edit";
|
||||
snippetId?: number;
|
||||
initialTitle?: string;
|
||||
initialLanguage?: string;
|
||||
initialDescription?: string;
|
||||
initialCode?: string;
|
||||
initialVisibility?: SnippetVisibility;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const { url_style: urlStyle } = useSiteBrand();
|
||||
const [title, setTitle] = useState(initialTitle);
|
||||
const [language, setLanguage] = useState(initialLanguage);
|
||||
const [description, setDescription] = useState(initialDescription);
|
||||
const [code, setCode] = useState(initialCode);
|
||||
const [visibility, setVisibility] = useState<SnippetVisibility>(initialVisibility);
|
||||
const [languages, setLanguages] = useState<string[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const codeRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasAuthCookieHint()) {
|
||||
router.push("/login?redirect=/snippets/new");
|
||||
return;
|
||||
}
|
||||
fetchSnippetLanguages()
|
||||
.then((res) => setLanguages(res.languages))
|
||||
.catch(() => {});
|
||||
}, [router]);
|
||||
|
||||
// Tab 键缩进
|
||||
const handleCodeKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (e.key === "Tab") {
|
||||
e.preventDefault();
|
||||
const el = e.currentTarget;
|
||||
const start = el.selectionStart;
|
||||
const end = el.selectionEnd;
|
||||
const newValue = code.substring(0, start) + " " + code.substring(end);
|
||||
setCode(newValue);
|
||||
requestAnimationFrame(() => {
|
||||
el.selectionStart = el.selectionEnd = start + 2;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const codeBytes = new TextEncoder().encode(code).length;
|
||||
const descBytes = new TextEncoder().encode(description).length;
|
||||
|
||||
const canSubmit =
|
||||
!loading &&
|
||||
title.trim().length > 0 &&
|
||||
code.trim().length > 0 &&
|
||||
codeBytes <= CODE_MAX &&
|
||||
descBytes <= DESC_MAX;
|
||||
|
||||
const handleSubmit = async (e?: React.FormEvent) => {
|
||||
e?.preventDefault();
|
||||
if (!canSubmit) return;
|
||||
setLoading(true);
|
||||
const input: SnippetInput = {
|
||||
title: title.trim(),
|
||||
language,
|
||||
description: description.trim(),
|
||||
code: code.trim(),
|
||||
visibility,
|
||||
};
|
||||
try {
|
||||
if (mode === "create") {
|
||||
const res = await apiCreateSnippet(input);
|
||||
toast("创建成功", "ok");
|
||||
router.push(snippetPath(urlStyle, res.snippet.id));
|
||||
} else if (snippetId) {
|
||||
const res = await apiUpdateSnippet(snippetId, input);
|
||||
toast("已保存", "ok");
|
||||
router.push(snippetPath(urlStyle, res.snippet.id));
|
||||
}
|
||||
} catch (err) {
|
||||
toast(err instanceof Error ? err.message : "操作失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!snippetId || deleting) return;
|
||||
setDeleting(true);
|
||||
try {
|
||||
await apiDeleteSnippet(snippetId);
|
||||
toast("已删除", "ok");
|
||||
router.push(snippetsPath(urlStyle));
|
||||
} catch (err) {
|
||||
toast(err instanceof Error ? err.message : "删除失败");
|
||||
} finally {
|
||||
setDeleting(false);
|
||||
setDeleteOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="j13-compose-stage is-studio">
|
||||
<header className="j13-compose-toolbar">
|
||||
<div className="j13-compose-toolbar-lead">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.back()}
|
||||
className="j13-compose-back"
|
||||
aria-label="返回"
|
||||
data-tip="返回"
|
||||
>
|
||||
<ArrowLeft size={18} strokeWidth={2.2} />
|
||||
</button>
|
||||
<div className="j13-compose-toolbar-copy min-w-0">
|
||||
<h1 className="j13-compose-toolbar-title">
|
||||
{mode === "create" ? "新建片段" : "编辑片段"}
|
||||
</h1>
|
||||
<p className="j13-compose-toolbar-sub">
|
||||
{mode === "create" ? "保存一段可复用的代码" : "修改片段内容"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="j13-compose-toolbar-actions">
|
||||
{mode === "edit" && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setDeleteOpen(true)}
|
||||
className="btn btn-line btn-sm"
|
||||
style={{ color: "var(--danger)" }}
|
||||
>
|
||||
<Trash2 size={14} /> 删除
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!canSubmit}
|
||||
className="btn btn-primary min-w-[5.5rem] h-9 px-4 text-[13.5px] font-semibold"
|
||||
>
|
||||
{loading ? "保存中…" : mode === "create" ? "创建" : "保存"}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="j13-compose-studio">
|
||||
<div className="j13-compose-studio-canvas">
|
||||
{/* 标题 */}
|
||||
<div className="j13-compose-title-row">
|
||||
<label className="sr-only" htmlFor="snippet-title">
|
||||
标题
|
||||
</label>
|
||||
<input
|
||||
id="snippet-title"
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value.slice(0, TITLE_MAX))}
|
||||
required
|
||||
maxLength={TITLE_MAX}
|
||||
placeholder="片段标题"
|
||||
className="j13-compose-title"
|
||||
disabled={loading}
|
||||
/>
|
||||
<span className="j13-compose-title-count tabular-nums">
|
||||
{title.length}/{TITLE_MAX}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 语言 + 可见性 */}
|
||||
<div className="flex flex-wrap items-center gap-3 px-4 sm:px-6 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<CodeXml size={14} style={{ color: "var(--ink-3)" }} />
|
||||
<SnippetLangSelect
|
||||
value={language}
|
||||
onChange={setLanguage}
|
||||
languages={languages}
|
||||
allowAll={false}
|
||||
variant="editor"
|
||||
ariaLabel="编程语言"
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 rounded-full p-0.5" style={{ background: "var(--panel-2)" }}>
|
||||
{VISIBILITY_OPTIONS.map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
type="button"
|
||||
onClick={() => setVisibility(opt.value)}
|
||||
className={`px-3 py-1 rounded-full text-[12px] font-medium transition-colors ${
|
||||
visibility === opt.value ? "" : "hover:bg-[var(--panel)]"
|
||||
}`}
|
||||
style={
|
||||
visibility === opt.value
|
||||
? { background: "var(--accent-soft)", color: "var(--accent)" }
|
||||
: { color: "var(--ink-2)" }
|
||||
}
|
||||
disabled={loading}
|
||||
>
|
||||
{opt.value === "public" ? <Eye size={12} className="inline mr-1" /> : <EyeOff size={12} className="inline mr-1" />}
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<span className="meta text-[11.5px]">
|
||||
{VISIBILITY_OPTIONS.find((o) => o.value === visibility)?.desc}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 代码编辑区 */}
|
||||
<div className="j13-compose-canvas">
|
||||
<label className="sr-only" htmlFor="snippet-code">
|
||||
代码
|
||||
</label>
|
||||
<textarea
|
||||
ref={codeRef}
|
||||
id="snippet-code"
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
onKeyDown={handleCodeKeyDown}
|
||||
placeholder="粘贴或输入代码…"
|
||||
className="w-full min-h-[320px] px-4 py-3 text-[13.5px] font-mono resize-y"
|
||||
style={{
|
||||
background: "var(--bg)",
|
||||
border: "1px solid var(--line)",
|
||||
color: "var(--ink)",
|
||||
borderRadius: "var(--r)",
|
||||
tabSize: 2,
|
||||
}}
|
||||
disabled={loading}
|
||||
/>
|
||||
<div className="mt-1 flex justify-end">
|
||||
<span
|
||||
className="meta text-[11px] tabular-nums"
|
||||
style={codeBytes > CODE_MAX ? { color: "var(--danger)", fontWeight: 600 } : undefined}
|
||||
>
|
||||
{codeBytes > 1024 ? `${(codeBytes / 1024).toFixed(1)} KB` : `${codeBytes} B`} / 64 KB
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 描述 */}
|
||||
<div className="px-4 sm:px-6 pb-6">
|
||||
<label className="field-label" htmlFor="snippet-desc">
|
||||
描述（可选）
|
||||
</label>
|
||||
<textarea
|
||||
id="snippet-desc"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="用 Markdown 描述这段代码的用途、用法或注意事项…"
|
||||
rows={4}
|
||||
className="w-full rounded-lg px-4 py-3 text-[13.5px]"
|
||||
style={{
|
||||
background: "var(--bg)",
|
||||
border: "1px solid var(--line)",
|
||||
color: "var(--ink)",
|
||||
}}
|
||||
disabled={loading}
|
||||
/>
|
||||
<div className="mt-1 flex justify-end">
|
||||
<span
|
||||
className="meta text-[11px] tabular-nums"
|
||||
style={descBytes > DESC_MAX ? { color: "var(--danger)", fontWeight: 600 } : undefined}
|
||||
>
|
||||
{descBytes > 1024 ? `${(descBytes / 1024).toFixed(1)} KB` : `${descBytes} B`} / 8 KB
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
open={deleteOpen}
|
||||
title="删除片段"
|
||||
description="删除后不可恢复，确定要删除这个代码片段吗？"
|
||||
onClose={() => setDeleteOpen(false)}
|
||||
dismissOnOverlay
|
||||
maxWidthClass="max-w-sm"
|
||||
footer={
|
||||
<>
|
||||
<button type="button" className="btn btn-line btn-sm" onClick={() => setDeleteOpen(false)}>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm"
|
||||
style={{ background: "var(--danger)", borderColor: "var(--danger)" }}
|
||||
onClick={handleDelete}
|
||||
disabled={deleting}
|
||||
>
|
||||
{deleting ? "删除中…" : "确认删除"}
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<p className="text-[13.5px]" style={{ color: "var(--ink-2)" }}>
|
||||
此操作不可撤销。
|
||||
</p>
|
||||
</Modal>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
612
frontend/components/SnippetExplorer.tsx
Normal file
612
frontend/components/SnippetExplorer.tsx
Normal file
@@ -0,0 +1,612 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo, useState, useEffect, useCallback } from "react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Search,
|
||||
X,
|
||||
Copy,
|
||||
Eye,
|
||||
MessageSquare,
|
||||
GitFork,
|
||||
Plus,
|
||||
Lock,
|
||||
Loader2,
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
RotateCcw,
|
||||
} from "lucide-react";
|
||||
import type { SnippetListItem, SnippetSort, SnippetStats } from "@/lib/api";
|
||||
import { fetchSnippets, apiMySnippets } from "@/lib/api";
|
||||
import { snippetPath, type UrlStyle } from "@/lib/urlStyle";
|
||||
import { formatRelative } from "@/lib/format";
|
||||
import Avatar from "@/components/Avatar";
|
||||
import { toast } from "@/lib/toast";
|
||||
import { hasAuthCookieHint } from "@/lib/cookies";
|
||||
import { siteCodeToHtml } from "@/components/markdown/shikiHighlighter";
|
||||
import SnippetLangSelect from "@/components/SnippetLangSelect";
|
||||
import SnippetHero from "@/components/SnippetHero";
|
||||
import { snippetLangColor } from "@/lib/snippetLangColors";
|
||||
|
||||
const MONO = "var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)";
|
||||
|
||||
function plainExcerpt(md: string): string {
|
||||
return md
|
||||
.replace(/!\[[^\]]*\]\([^)]*\)/g, "")
|
||||
.replace(/\[([^\]]*)\]\([^)]*\)/g, "$1")
|
||||
.replace(/[*_~`#>]+/g, "")
|
||||
.replace(/\s+/g, " ")
|
||||
.trim();
|
||||
}
|
||||
|
||||
/** 编辑器窗格的三色圆点（灰阶令牌，明暗主题都不穿帮） */
|
||||
function WindowDots() {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-[5px] shrink-0" aria-hidden>
|
||||
<span className="w-[7px] h-[7px] rounded-full" style={{ background: "var(--ink-3)", opacity: 0.55 }} />
|
||||
<span className="w-[7px] h-[7px] rounded-full" style={{ background: "var(--ink-3)", opacity: 0.35 }} />
|
||||
<span className="w-[7px] h-[7px] rounded-full" style={{ background: "var(--ink-3)", opacity: 0.2 }} />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/** 语言标识：小圆点 + 等宽语言名 */
|
||||
function LangTag({ lang }: { lang: string }) {
|
||||
const c = snippetLangColor(lang);
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1.5 min-w-0">
|
||||
<span
|
||||
className="w-[6px] h-[6px] rounded-full shrink-0"
|
||||
style={{ background: c, boxShadow: `0 0 0 2px color-mix(in srgb, ${c} 22%, transparent)` }}
|
||||
/>
|
||||
<span
|
||||
className="text-[10.5px] font-semibold uppercase tracking-[0.08em] truncate"
|
||||
style={{ fontFamily: MONO, color: c }}
|
||||
>
|
||||
{lang}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 从 shiki 输出提取高亮信息：
|
||||
* - 双主题 CSS 变量定义在 <pre style> 上（--shiki-light/--shiki-dark …），必须保留
|
||||
* - <code> 内部按行拆分自绘 gutter
|
||||
*/
|
||||
function extractShiki(html: string): { vars: Record<string, string>; lines: string[] } | null {
|
||||
const codeM = /<code[^>]*>([\s\S]*?)<\/code>/i.exec(html);
|
||||
if (!codeM) return null;
|
||||
const vars: Record<string, string> = {};
|
||||
const preM = /<pre[^>]*\sstyle="([^"]*)"[^>]*>/i.exec(html);
|
||||
if (preM) {
|
||||
for (const m of preM[1].matchAll(/(--[\w-]+)\s*:\s*([^;]+)/g)) {
|
||||
vars[m[1]] = m[2].trim();
|
||||
}
|
||||
}
|
||||
return { vars, lines: codeM[1].split("\n") };
|
||||
}
|
||||
|
||||
const PREVIEW_LINES = 5;
|
||||
|
||||
/** 代码预览：shiki 客户端高亮 + 自绘行号 gutter；未着色前回退纯文本 */
|
||||
function SnippetPreview({ code, language }: { code: string; language: string }) {
|
||||
const [hl, setHl] = useState<{ vars: Record<string, string>; lines: string[] } | null>(null);
|
||||
const plainLines = useMemo(() => code.split("\n").slice(0, PREVIEW_LINES), [code]);
|
||||
const longPreview = code.split("\n").length > PREVIEW_LINES;
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
const head = code.split("\n").slice(0, PREVIEW_LINES).join("\n");
|
||||
siteCodeToHtml(head, language)
|
||||
.then((html) => {
|
||||
if (cancelled) return;
|
||||
const parsed = extractShiki(html);
|
||||
// shiki 末行通常带尾换行产生空串，截到预览行数
|
||||
if (parsed && parsed.lines.length > 0) {
|
||||
setHl({ vars: parsed.vars, lines: parsed.lines.slice(0, PREVIEW_LINES) });
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
/* 保持纯文本 */
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [code, language]);
|
||||
|
||||
const rows = hl?.lines ?? plainLines;
|
||||
const highlighted = hl !== null;
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<pre
|
||||
className={`j13-sn-code m-0 text-[11.5px] leading-[1.7] overflow-hidden max-h-[98px] ${
|
||||
highlighted ? "" : "whitespace-pre"
|
||||
}`}
|
||||
style={{
|
||||
fontFamily: MONO,
|
||||
color: "var(--ink-2)",
|
||||
// 继承 shiki 双主题变量，token span 的 var(--shiki-*) 才能解析
|
||||
...(hl?.vars ?? {}),
|
||||
} as React.CSSProperties}
|
||||
>
|
||||
{rows.map((ln, i) => (
|
||||
<div key={i} className="flex min-w-0">
|
||||
<span
|
||||
className="shrink-0 w-6 pr-2 text-right select-none tabular-nums"
|
||||
style={{ color: "var(--ink-3)", opacity: 0.45, borderRight: "1px solid var(--line)", marginRight: 9 }}
|
||||
>
|
||||
{i + 1}
|
||||
</span>
|
||||
{highlighted ? (
|
||||
<span className="truncate min-w-0" dangerouslySetInnerHTML={{ __html: ln || " " }} />
|
||||
) : (
|
||||
<span className="truncate">{ln || " "}</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</pre>
|
||||
{longPreview ? (
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 h-7 pointer-events-none"
|
||||
style={{ background: "linear-gradient(to top, var(--panel-2), transparent)" }}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** 自定义语言下拉：见共享组件 SnippetLangSelect */
|
||||
|
||||
function Stat({ icon, value, label }: { icon: React.ReactNode; value: number; label: string }) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1" title={label}>
|
||||
<span style={{ color: "var(--ink-3)" }}>{icon}</span>
|
||||
<span className="tabular-nums" style={{ color: "var(--ink-2)" }}>
|
||||
{value}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function SnippetCard({ item, urlStyle }: { item: SnippetListItem; urlStyle: UrlStyle }) {
|
||||
const ownerName = item.user ? item.user.nickname || item.user.username : "";
|
||||
const excerpt = plainExcerpt(item.description ?? "");
|
||||
const href = snippetPath(urlStyle, item.id);
|
||||
const langColor = snippetLangColor(item.language);
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
className="j13-snc group flex flex-col h-full min-w-0 rounded-xl overflow-hidden transition-[transform,box-shadow,border-color] duration-200 hover:-translate-y-0.5 hover:shadow-[var(--shadow-lg)] hover:border-[color-mix(in_srgb,var(--accent)_45%,var(--line))]"
|
||||
style={{ background: "var(--panel)", border: "1px solid var(--line)", ["--sn-lang" as string]: langColor }}
|
||||
>
|
||||
{/* 卡头：语言 + 标题 + 徽标 */}
|
||||
<div className="px-3.5 pt-3.5 pb-2.5">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<LangTag lang={item.language} />
|
||||
<span className="ml-auto inline-flex items-center gap-1 shrink-0">
|
||||
{item.visibility === "private" && (
|
||||
<span
|
||||
className="inline-flex items-center gap-0.5 text-[10px] font-medium px-1.5 py-0.5 rounded-md"
|
||||
style={{ background: "var(--panel-2)", color: "var(--ink-3)" }}
|
||||
>
|
||||
<Lock size={9} /> 私有
|
||||
</span>
|
||||
)}
|
||||
{item.forked_from_id ? (
|
||||
<span
|
||||
className="inline-flex items-center gap-0.5 text-[10px] font-medium px-1.5 py-0.5 rounded-md"
|
||||
style={{ background: "var(--panel-2)", color: "var(--ink-3)" }}
|
||||
>
|
||||
<GitFork size={9} /> Fork
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
</div>
|
||||
<h2
|
||||
className="mt-2 text-[14px] font-bold leading-snug line-clamp-2 group-hover:text-[var(--accent)] transition-colors"
|
||||
style={{ color: "var(--ink)" }}
|
||||
>
|
||||
{item.title}
|
||||
</h2>
|
||||
{excerpt ? (
|
||||
<p className="mt-1 text-[12px] leading-relaxed line-clamp-1" style={{ color: "var(--ink-3)" }}>
|
||||
{excerpt}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/* 代码窗格：标题栏 + gutter + shiki 高亮 */}
|
||||
<div
|
||||
className="mx-3.5 rounded-lg overflow-hidden"
|
||||
style={{ border: "1px solid var(--line)", background: "var(--panel-2)" }}
|
||||
>
|
||||
<div
|
||||
className="flex items-center gap-2 px-2.5 py-1.5"
|
||||
style={{ borderBottom: "1px solid var(--line)" }}
|
||||
>
|
||||
<WindowDots />
|
||||
<span className="text-[10px] truncate" style={{ fontFamily: MONO, color: "var(--ink-3)" }}>
|
||||
snippet.{item.language === "plaintext" ? "txt" : item.language}
|
||||
</span>
|
||||
<span
|
||||
className="ml-auto shrink-0 text-[9px] font-semibold uppercase tracking-[0.1em] px-1.5 py-px rounded"
|
||||
style={{ fontFamily: MONO, color: langColor, background: `color-mix(in srgb, ${langColor} 12%, transparent)` }}
|
||||
>
|
||||
{item.language}
|
||||
</span>
|
||||
</div>
|
||||
<div className="px-0 pt-1.5 pb-2">
|
||||
<SnippetPreview code={item.preview ?? ""} language={item.language} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 卡脚：统计 + 作者 */}
|
||||
<div
|
||||
className="mt-auto px-3.5 py-2.5 flex items-center gap-3 text-[11px]"
|
||||
style={{ borderTop: "1px solid var(--line)" }}
|
||||
>
|
||||
<Stat icon={<Copy size={11} />} value={item.copy_count} label="复制数" />
|
||||
<Stat icon={<Eye size={11} />} value={item.view_count} label="浏览数" />
|
||||
<Stat icon={<MessageSquare size={11} />} value={item.comment_count} label="评论数" />
|
||||
<Stat icon={<GitFork size={11} />} value={item.fork_count} label="Fork 数" />
|
||||
<span className="ml-auto inline-flex items-center gap-1.5 min-w-0 shrink-0">
|
||||
{item.user ? (
|
||||
<>
|
||||
<Avatar size={15} name={ownerName} src={item.user.avatar} />
|
||||
<span className="truncate max-w-[4.5rem]" style={{ color: "var(--ink-3)" }} title={ownerName}>
|
||||
{ownerName}
|
||||
</span>
|
||||
<span style={{ color: "var(--ink-3)" }}>·</span>
|
||||
</>
|
||||
) : null}
|
||||
<span className="shrink-0" style={{ color: "var(--ink-3)" }}>
|
||||
{formatRelative(item.created_at)}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
const SORT_OPTIONS: { value: SnippetSort; label: string }[] = [
|
||||
{ value: "latest", label: "最新" },
|
||||
{ value: "copy", label: "复制" },
|
||||
{ value: "comment", label: "评论" },
|
||||
{ value: "fork", label: "Fork" },
|
||||
];
|
||||
|
||||
function CardSkeleton() {
|
||||
return (
|
||||
<div
|
||||
className="rounded-xl overflow-hidden animate-pulse"
|
||||
style={{ background: "var(--panel)", border: "1px solid var(--line)" }}
|
||||
>
|
||||
<div className="px-3.5 pt-3.5 pb-2.5">
|
||||
<div className="h-2.5 w-16 rounded" style={{ background: "var(--panel-2)" }} />
|
||||
<div className="mt-2.5 h-3.5 w-3/4 rounded" style={{ background: "var(--panel-2)" }} />
|
||||
</div>
|
||||
<div className="mx-3.5 rounded-lg h-[128px]" style={{ background: "var(--panel-2)" }} />
|
||||
<div className="px-3.5 py-3 mt-1">
|
||||
<div className="h-2.5 w-2/3 rounded" style={{ background: "var(--panel-2)" }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SnippetExplorer({
|
||||
initialItems,
|
||||
initialTotal,
|
||||
languages,
|
||||
urlStyle,
|
||||
stats,
|
||||
}: {
|
||||
initialItems: SnippetListItem[];
|
||||
initialTotal: number;
|
||||
languages: string[];
|
||||
urlStyle: UrlStyle;
|
||||
stats: SnippetStats | null;
|
||||
}) {
|
||||
const [items, setItems] = useState(initialItems);
|
||||
const [total, setTotal] = useState(initialTotal);
|
||||
const [page, setPage] = useState(1);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [query, setQuery] = useState("");
|
||||
const [lang, setLang] = useState("");
|
||||
const [sort, setSort] = useState<SnippetSort>("latest");
|
||||
const [scope, setScope] = useState<"public" | "mine">("public");
|
||||
const isLoggedIn = typeof window !== "undefined" ? hasAuthCookieHint() : false;
|
||||
|
||||
const pageSize = 12;
|
||||
const totalPages = Math.max(1, Math.ceil(total / pageSize));
|
||||
const filtering = !!query || (scope === "public" && !!lang);
|
||||
|
||||
const load = useCallback(
|
||||
async (p: number) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res =
|
||||
scope === "mine"
|
||||
? await apiMySnippets(query, p, pageSize)
|
||||
: await fetchSnippets({ q: query, lang, sort, page: p, size: pageSize });
|
||||
setItems(res.items);
|
||||
setTotal(res.total);
|
||||
setPage(p);
|
||||
} catch (e) {
|
||||
toast(e instanceof Error ? e.message : "加载失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
},
|
||||
[scope, query, lang, sort]
|
||||
);
|
||||
|
||||
// 筛选条件变化时回到第一页
|
||||
useEffect(() => {
|
||||
const t = setTimeout(() => load(1), 300);
|
||||
return () => clearTimeout(t);
|
||||
}, [load]);
|
||||
|
||||
const switchScope = (next: "public" | "mine") => {
|
||||
if (next === scope) return;
|
||||
setScope(next);
|
||||
setQuery("");
|
||||
setLang("");
|
||||
setSort("latest");
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* 未来科技感 Hero：网格 + 扫描线 + 统计矩阵 */}
|
||||
<SnippetHero stats={stats} />
|
||||
|
||||
{/* 工具台：IDE 风格软底工具条，控件浮于其上（无框中框） */}
|
||||
<div
|
||||
className="rounded-xl p-1.5 flex flex-col sm:flex-row sm:items-center gap-1.5"
|
||||
style={{ background: "var(--panel-2)", border: "1px solid var(--line)" }}
|
||||
>
|
||||
{isLoggedIn && (
|
||||
<div
|
||||
className="flex items-center gap-0.5 rounded-lg p-0.5 shrink-0"
|
||||
style={{ background: "var(--panel)" }}
|
||||
role="group"
|
||||
aria-label="片段范围"
|
||||
>
|
||||
{(
|
||||
[
|
||||
{ value: "public", label: "广场" },
|
||||
{ value: "mine", label: "我的" },
|
||||
] as const
|
||||
).map((opt) => {
|
||||
const active = scope === opt.value;
|
||||
return (
|
||||
<button
|
||||
key={opt.value}
|
||||
type="button"
|
||||
onClick={() => switchScope(opt.value)}
|
||||
aria-pressed={active}
|
||||
className="whitespace-nowrap px-3 h-8 rounded-md text-[12px] font-medium transition-colors"
|
||||
style={
|
||||
active
|
||||
? {
|
||||
background: "var(--accent-soft)",
|
||||
color: "var(--accent)",
|
||||
boxShadow: "inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent)",
|
||||
}
|
||||
: { color: "var(--ink-3)" }
|
||||
}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="relative flex-1 min-w-0">
|
||||
<Search
|
||||
size={14}
|
||||
className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none"
|
||||
style={{ color: "var(--ink-3)" }}
|
||||
aria-hidden
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder={scope === "mine" ? "搜索我的片段…" : "搜索标题、描述或代码…"}
|
||||
aria-label="搜索片段"
|
||||
className="j13-sn-search w-full h-9 rounded-lg pr-8 text-[13px]"
|
||||
style={{ background: "var(--panel)", border: "1px solid transparent", color: "var(--ink)", paddingLeft: 34 }}
|
||||
/>
|
||||
{query ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setQuery("")}
|
||||
aria-label="清除搜索"
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 w-6 h-6 flex items-center justify-center rounded-md hover:bg-[var(--panel-2)] transition-colors"
|
||||
style={{ color: "var(--ink-3)" }}
|
||||
>
|
||||
<X size={13} />
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{scope === "public" && (
|
||||
<SnippetLangSelect value={lang} onChange={setLang} languages={languages} />
|
||||
)}
|
||||
|
||||
{scope === "public" && (
|
||||
<div
|
||||
className="flex items-center gap-0.5 rounded-lg p-0.5 shrink-0 overflow-x-auto"
|
||||
style={{ background: "var(--panel)" }}
|
||||
role="group"
|
||||
aria-label="排序方式"
|
||||
>
|
||||
{SORT_OPTIONS.map((opt) => {
|
||||
const active = sort === opt.value;
|
||||
return (
|
||||
<button
|
||||
key={opt.value}
|
||||
type="button"
|
||||
onClick={() => setSort(opt.value)}
|
||||
aria-pressed={active}
|
||||
className="whitespace-nowrap px-2.5 h-8 rounded-md text-[12px] font-medium transition-colors"
|
||||
style={
|
||||
active
|
||||
? {
|
||||
background: "var(--accent-soft)",
|
||||
color: "var(--accent)",
|
||||
boxShadow: "inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent)",
|
||||
}
|
||||
: { color: "var(--ink-3)" }
|
||||
}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 结果统计 */}
|
||||
<div className="mt-3 flex items-center gap-2 text-[12px]" style={{ color: "var(--ink-3)" }}>
|
||||
{loading ? (
|
||||
<Loader2 size={12} className="animate-spin" />
|
||||
) : (
|
||||
<span className="tabular-nums" style={{ fontFamily: MONO }}>
|
||||
<span style={{ color: "var(--accent)" }}>$</span>{" "}
|
||||
{scope === "mine" ? "ls ~/snippets --count" : "ls --count"}
|
||||
</span>
|
||||
)}
|
||||
<span>
|
||||
共 <b className="tabular-nums" style={{ color: "var(--ink-2)" }}>{total}</b> 个片段
|
||||
{loading ? "，加载中…" : ""}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 列表 / 空态 */}
|
||||
{loading && items.length === 0 ? (
|
||||
<div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{Array.from({ length: 8 }).map((_, i) => (
|
||||
<CardSkeleton key={i} />
|
||||
))}
|
||||
</div>
|
||||
) : items.length === 0 && !loading ? (
|
||||
filtering ? (
|
||||
<div
|
||||
className="mt-4 rounded-xl px-6 py-12 text-center"
|
||||
style={{ background: "var(--panel)", border: "1px solid var(--line)" }}
|
||||
>
|
||||
<RotateCcw size={22} className="mx-auto mb-3" style={{ color: "var(--ink-3)" }} />
|
||||
<p className="text-[14px] font-semibold" style={{ color: "var(--ink-2)" }}>
|
||||
没有找到匹配的片段
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-line btn-sm mt-4"
|
||||
onClick={() => {
|
||||
setQuery("");
|
||||
setLang("");
|
||||
}}
|
||||
>
|
||||
清除筛选条件
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="mt-4 max-w-lg mx-auto rounded-xl overflow-hidden"
|
||||
style={{ background: "var(--panel)", border: "1px solid var(--line)", boxShadow: "var(--shadow-sm)" }}
|
||||
>
|
||||
<div
|
||||
className="flex items-center gap-2 px-3.5 py-2"
|
||||
style={{ borderBottom: "1px solid var(--line)", background: "var(--panel-2)" }}
|
||||
>
|
||||
<WindowDots />
|
||||
<span className="text-[10.5px]" style={{ fontFamily: MONO, color: "var(--ink-3)" }}>
|
||||
snippets — zsh
|
||||
</span>
|
||||
</div>
|
||||
<div className="px-6 py-10 text-center">
|
||||
<p
|
||||
className="inline-block text-left text-[12.5px] leading-[1.9]"
|
||||
style={{ fontFamily: MONO, color: "var(--ink-2)" }}
|
||||
>
|
||||
<span style={{ color: "var(--accent)" }}>$</span>{" "}
|
||||
{scope === "mine" ? "ls ~/snippets" : "snippets list --public"}
|
||||
<br />
|
||||
<span style={{ color: "var(--ink-3)" }}>
|
||||
# {scope === "mine" ? "你还没有片段，新建一个或从广场 Fork" : "还没有公开片段"}
|
||||
</span>
|
||||
<span className="animate-pulse" style={{ color: "var(--accent)" }}>
|
||||
▍
|
||||
</span>
|
||||
</p>
|
||||
<p className="mt-5 text-[13.5px]" style={{ color: "var(--ink-2)" }}>
|
||||
{scope === "mine" ? "Fork 的副本会默认设为私有，只在这里可见" : "成为第一个分享代码片段的人"}
|
||||
</p>
|
||||
<div className="mt-4 flex items-center justify-center gap-2">
|
||||
{scope === "mine" ? (
|
||||
<>
|
||||
<Link href="/snippets/new" className="btn btn-primary btn-sm inline-flex items-center gap-1.5">
|
||||
<Plus size={14} /> 新建片段
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => switchScope("public")}
|
||||
className="btn btn-line btn-sm"
|
||||
>
|
||||
去广场逛逛
|
||||
</button>
|
||||
</>
|
||||
) : isLoggedIn ? (
|
||||
<Link href="/snippets/new" className="btn btn-primary btn-sm inline-flex items-center gap-1.5">
|
||||
<Plus size={14} /> 新建片段
|
||||
</Link>
|
||||
) : (
|
||||
<Link href="/login?redirect=/snippets/new" className="btn btn-primary btn-sm">
|
||||
登录后分享
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{items.map((item) => (
|
||||
<SnippetCard key={item.id} item={item} urlStyle={urlStyle} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 分页 */}
|
||||
{totalPages > 1 && (
|
||||
<div className="mt-7 flex items-center justify-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
disabled={page <= 1 || loading}
|
||||
onClick={() => load(page - 1)}
|
||||
className="btn btn-line btn-sm inline-flex items-center gap-1"
|
||||
>
|
||||
<ArrowLeft size={13} /> 上一页
|
||||
</button>
|
||||
<span className="text-[12px] tabular-nums" style={{ fontFamily: MONO, color: "var(--ink-3)" }}>
|
||||
{page} / {totalPages}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
disabled={page >= totalPages || loading}
|
||||
onClick={() => load(page + 1)}
|
||||
className="btn btn-line btn-sm inline-flex items-center gap-1"
|
||||
>
|
||||
下一页 <ArrowRight size={13} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
254
frontend/components/SnippetHero.tsx
Normal file
254
frontend/components/SnippetHero.tsx
Normal file
@@ -0,0 +1,254 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
CodeXml, Copy, Eye, MessageSquare, GitFork, Users,
|
||||
Plus, Zap, ShieldCheck, Binary,
|
||||
} from "lucide-react";
|
||||
import type { SnippetStats } from "@/lib/api";
|
||||
import { snippetLangColor } from "@/lib/snippetLangColors";
|
||||
import { hasAuthCookieHint } from "@/lib/cookies";
|
||||
|
||||
const MONO = "var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)";
|
||||
|
||||
function useRollIn(target: number, duration = 1000) {
|
||||
const [value, setValue] = useState(0);
|
||||
useEffect(() => {
|
||||
const start = performance.now();
|
||||
let raf = 0;
|
||||
const tick = (t: number) => {
|
||||
const p = Math.min((t - start) / duration, 1);
|
||||
const ease = 1 - Math.pow(1 - p, 3);
|
||||
setValue(Math.round(target * ease));
|
||||
if (p < 1) raf = requestAnimationFrame(tick);
|
||||
};
|
||||
raf = requestAnimationFrame(tick);
|
||||
return () => cancelAnimationFrame(raf);
|
||||
}, [target, duration]);
|
||||
return value;
|
||||
}
|
||||
|
||||
function formatK(n: number) {
|
||||
if (n >= 100_000) return `${(n / 1000).toFixed(0)}k`;
|
||||
if (n >= 10_000) return `${(n / 1000).toFixed(0)}k`;
|
||||
if (n >= 1000) return `${(n / 1000).toFixed(1).replace(/\.0$/, "")}k`;
|
||||
return `${n}`;
|
||||
}
|
||||
|
||||
function StatBlock({
|
||||
icon,
|
||||
label,
|
||||
value,
|
||||
delay,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
value: string;
|
||||
delay: number;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="j13-hero-stat flex items-center gap-2.5 px-3 py-2 rounded-md"
|
||||
style={{
|
||||
animationDelay: `${delay}ms`,
|
||||
background: "var(--hero-chip-bg)",
|
||||
border: "1px solid var(--hero-line)",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="w-7 h-7 flex items-center justify-center rounded-md shrink-0"
|
||||
style={{ background: "var(--hero-chip-icon)" }}
|
||||
>
|
||||
<span style={{ color: "var(--accent)" }}>{icon}</span>
|
||||
</span>
|
||||
<div className="flex flex-col leading-none">
|
||||
<span
|
||||
className="text-[10px] font-medium tracking-wide uppercase"
|
||||
style={{ color: "var(--hero-ink-3)", fontFamily: MONO }}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
<span
|
||||
className="text-[17px] font-extrabold tabular-nums mt-0.5"
|
||||
style={{ color: "var(--hero-ink)", fontFamily: MONO }}
|
||||
>
|
||||
{value}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function LangMatrix({
|
||||
topLanguages,
|
||||
total,
|
||||
}: {
|
||||
topLanguages: SnippetStats["top_languages"];
|
||||
total: number;
|
||||
}) {
|
||||
const max = Math.max(1, ...topLanguages.map((l) => l.count));
|
||||
return (
|
||||
<div className="mt-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-[10px] font-medium tracking-wide uppercase" style={{ color: "var(--hero-ink-3)", fontFamily: MONO }}>
|
||||
Language Matrix
|
||||
</span>
|
||||
<div className="flex items-center gap-1" style={{ color: "var(--hero-ink-3)" }}>
|
||||
<ShieldCheck size={9} />
|
||||
<span className="text-[9px]" style={{ fontFamily: MONO }}>
|
||||
SECURE
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
{topLanguages.map((l, i) => {
|
||||
const c = snippetLangColor(l.language);
|
||||
const pct = total > 0 ? Math.round((l.count / total) * 100) : 0;
|
||||
return (
|
||||
<div key={l.language} className="flex items-center gap-2.5">
|
||||
<span
|
||||
className="w-[72px] shrink-0 text-[10px] font-semibold text-right tabular-nums truncate"
|
||||
style={{ color: c, fontFamily: MONO }}
|
||||
>
|
||||
{l.language}
|
||||
</span>
|
||||
<div className="flex-1 h-[5px] rounded-full overflow-hidden" style={{ background: "var(--hero-track)" }}>
|
||||
<div
|
||||
className="j13-hero-langbar h-full rounded-full"
|
||||
style={{
|
||||
width: `${Math.max(3, (l.count / max) * 100)}%`,
|
||||
background: `linear-gradient(90deg, ${c}, color-mix(in srgb, ${c}, transparent 40%))`,
|
||||
animationDelay: `${300 + i * 80}ms`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="w-7 shrink-0 text-[10px] tabular-nums text-right" style={{ color: "var(--hero-ink-3)", fontFamily: MONO }}>
|
||||
{pct}%
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** 语言跑马灯：10 种热门语言 ×2 循环 */
|
||||
function LangTicker({ langs }: { langs: string[] }) {
|
||||
const doubled = [...langs, ...langs];
|
||||
return (
|
||||
<div className="j13-hero-ticker py-2" style={{ borderTop: "1px solid var(--hero-track)", borderBottom: "1px solid var(--hero-track)" }}>
|
||||
<div className="j13-hero-ticker-track">
|
||||
{doubled.map((l, i) => (
|
||||
<span key={`${l}-${i}`} className="flex items-center gap-1.5 text-[11px] font-medium shrink-0" style={{ fontFamily: MONO, color: "var(--hero-ink-2)" }}>
|
||||
<span className="inline-block w-[5px] h-[5px] rounded-full" style={{ background: snippetLangColor(l) }} />
|
||||
{l}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SnippetHero({ stats }: { stats: SnippetStats | null }) {
|
||||
const isLoggedIn = typeof window !== "undefined" ? hasAuthCookieHint() : false;
|
||||
const s = stats;
|
||||
const total = useRollIn(s?.total_snippets ?? 0);
|
||||
const copies = useRollIn(s?.total_copies ?? 0);
|
||||
const views = useRollIn(s?.total_views ?? 0);
|
||||
const comments = useRollIn(s?.total_comments ?? 0);
|
||||
const forks = useRollIn(s?.total_forks ?? 0);
|
||||
const contributors = useRollIn(s?.contributors ?? 0);
|
||||
|
||||
// 跑马灯展示的热门语言（去重后取前 10，兜底硬编码）
|
||||
const tickerLangs = Array.from(new Set([
|
||||
...topLangNames(s?.top_languages),
|
||||
"go", "rust", "typescript", "python", "javascript", "bash", "dockerfile", "kotlin", "yaml", "sql",
|
||||
])).slice(0, 10);
|
||||
|
||||
return (
|
||||
<section className="j13-hero relative mb-6 rounded-2xl overflow-hidden">
|
||||
{/* 网格底纹 */}
|
||||
<div className="absolute inset-0 j13-hero-grid pointer-events-none" />
|
||||
|
||||
{/* 扫描光束 */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none" style={{ opacity: 0.5 }}>
|
||||
<div className="j13-hero-scan" />
|
||||
</div>
|
||||
|
||||
{/* 内容层 */}
|
||||
<div className="relative px-5 pt-5 pb-5 sm:px-7 sm:pt-6 sm:pb-6">
|
||||
{/* 顶部栏 */}
|
||||
<div className="flex items-start justify-between gap-3 mb-5">
|
||||
<div className="flex items-start gap-3 min-w-0">
|
||||
<span
|
||||
className="inline-flex items-center justify-center w-10 h-10 rounded-xl shrink-0"
|
||||
style={{ background: "rgba(148,163,205,0.09)", border: "1px solid var(--hero-line)" }}
|
||||
>
|
||||
<CodeXml size={19} style={{ color: "var(--accent)" }} />
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-1.5 flex-wrap">
|
||||
<span className="text-[11px]" style={{ color: "var(--hero-ink-3)", fontFamily: MONO }}>
|
||||
$ jiang13/snippets
|
||||
</span>
|
||||
<span className="text-[11px]" style={{ color: "var(--hero-ink-3)", fontFamily: MONO }}>
|
||||
--public --summary
|
||||
</span>
|
||||
<span className="j13-hero-caret inline-block w-[6px] h-[3px] rounded-sm" style={{ background: "var(--accent)" }} />
|
||||
</div>
|
||||
<h1 className="j13-hero-title text-[22px] sm:text-[26px] font-extrabold tracking-tight leading-none mt-0.5">
|
||||
代码片段广场
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="shrink-0 flex items-center gap-2">
|
||||
<span className="flex items-center gap-1.5 text-[10px] px-2 py-1 rounded-full" style={{ color: "var(--hero-ink-3)", fontFamily: MONO, background: "var(--hero-chip-bg)", border: "1px solid var(--hero-line)" }}>
|
||||
<span className="inline-block w-2 h-2 rounded-full j13-hero-pulse" style={{ background: "#22c55e" }} />
|
||||
ONLINE
|
||||
</span>
|
||||
{isLoggedIn && (
|
||||
<Link href="/snippets/new" className="btn btn-primary btn-sm inline-flex items-center gap-1.5 shrink-0">
|
||||
<Plus size={14} /> 新建
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 统计区 */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2">
|
||||
<StatBlock icon={<Binary size={12} />} label="Snippets" value={formatK(total)} delay={0} />
|
||||
<StatBlock icon={<Eye size={12} />} label="Views" value={formatK(views)} delay={60} />
|
||||
<StatBlock icon={<Copy size={12} />} label="Copies" value={formatK(copies)} delay={120} />
|
||||
<StatBlock icon={<GitFork size={12} />} label="Forks" value={formatK(forks)} delay={180} />
|
||||
<StatBlock icon={<MessageSquare size={12} />} label="Comments" value={formatK(comments)} delay={240} />
|
||||
<StatBlock icon={<Users size={12} />} label="Devs" value={formatK(contributors)} delay={300} />
|
||||
</div>
|
||||
|
||||
{/* 语言矩阵 */}
|
||||
{s && s.top_languages.length > 0 && <LangMatrix topLanguages={s.top_languages} total={s.total_snippets} />}
|
||||
|
||||
{/* 底栏 */}
|
||||
<div className="mt-4 flex items-center justify-between">
|
||||
<span className="flex items-center gap-1.5 text-[10px]" style={{ color: "var(--hero-ink-3)", fontFamily: MONO }}>
|
||||
<Zap size={9} />
|
||||
{s ? "DATA_SYNCED" : "OFFLINE"}
|
||||
</span>
|
||||
<span className="text-[10px] tabular-nums" style={{ color: "var(--hero-ink-3)", fontFamily: MONO }}>
|
||||
LAT<span style={{ color: "var(--accent)" }}> 37.7749°N</span> LNG<span style={{ color: "var(--accent)" }}> 122.4194°W</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 语言跑马灯 */}
|
||||
<LangTicker langs={tickerLangs} />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function topLangNames(arr?: { language: string; count: number }[]) {
|
||||
if (!arr) return [];
|
||||
return arr.map((a) => a.language).filter(Boolean);
|
||||
}
|
||||
236
frontend/components/SnippetLangSelect.tsx
Normal file
236
frontend/components/SnippetLangSelect.tsx
Normal file
@@ -0,0 +1,236 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Check, Search, X } from "lucide-react";
|
||||
|
||||
const MONO = "var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)";
|
||||
|
||||
/**
|
||||
* 语言选择自定义下拉（统一站点样式）：
|
||||
* - variant="toolbar"：广场工具台（含"全部语言"与清除）
|
||||
* - variant="editor"：新建/编辑片段表单（药丸形，语言必选）
|
||||
*/
|
||||
export default function SnippetLangSelect({
|
||||
value,
|
||||
onChange,
|
||||
languages,
|
||||
allowAll = true,
|
||||
variant = "toolbar",
|
||||
ariaLabel = "选择语言",
|
||||
allLabel = "全部语言",
|
||||
disabled = false,
|
||||
}: {
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
languages: string[];
|
||||
allowAll?: boolean;
|
||||
variant?: "toolbar" | "editor";
|
||||
ariaLabel?: string;
|
||||
allLabel?: string;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [q, setQ] = useState("");
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
setQ("");
|
||||
const t = window.setTimeout(() => inputRef.current?.focus(), 30);
|
||||
const onDown = (e: MouseEvent) => {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
|
||||
};
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") setOpen(false);
|
||||
};
|
||||
document.addEventListener("mousedown", onDown);
|
||||
document.addEventListener("keydown", onKey);
|
||||
return () => {
|
||||
window.clearTimeout(t);
|
||||
document.removeEventListener("mousedown", onDown);
|
||||
document.removeEventListener("keydown", onKey);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const kw = q.trim().toLowerCase();
|
||||
return kw ? languages.filter((l) => l.includes(kw)) : languages;
|
||||
}, [q, languages]);
|
||||
|
||||
const triggerCls =
|
||||
variant === "editor"
|
||||
? "j13-sn-search h-8 rounded-full pl-3 pr-2.5 text-[12.5px] gap-1.5"
|
||||
: "j13-sn-search w-full h-9 rounded-lg px-3 text-[12.5px] gap-2";
|
||||
const wrapCls = variant === "editor" ? "relative shrink-0" : "relative shrink-0 sm:w-44 w-full";
|
||||
const menuCls =
|
||||
variant === "editor"
|
||||
? "j13-sn-lang-menu absolute z-30 mt-1.5 left-0 w-56 rounded-xl overflow-hidden"
|
||||
: "j13-sn-lang-menu absolute z-30 mt-1.5 left-0 right-0 sm:right-auto sm:w-60 rounded-xl overflow-hidden";
|
||||
|
||||
return (
|
||||
<div ref={ref} className={wrapCls}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => !disabled && setOpen((v) => !v)}
|
||||
aria-haspopup="listbox"
|
||||
aria-expanded={open}
|
||||
aria-label={ariaLabel}
|
||||
disabled={disabled}
|
||||
className={`${triggerCls} flex items-center disabled:opacity-60 disabled:cursor-not-allowed`}
|
||||
style={{ background: "var(--panel)", border: "1px solid transparent", color: "var(--ink)" }}
|
||||
>
|
||||
<span
|
||||
className="w-[6px] h-[6px] rounded-full shrink-0"
|
||||
style={{ background: value ? "var(--accent)" : "var(--ink-3)", opacity: value ? 1 : 0.5 }}
|
||||
/>
|
||||
<span
|
||||
className="truncate text-left flex-1"
|
||||
style={{ fontFamily: MONO, color: value ? "var(--ink)" : "var(--ink-3)" }}
|
||||
>
|
||||
{value || allLabel}
|
||||
</span>
|
||||
{allowAll && value ? (
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
aria-label="清除语言筛选"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onChange("");
|
||||
}}
|
||||
className="w-5 h-5 -mr-1 flex items-center justify-center rounded-md hover:bg-[var(--panel-2)] transition-colors"
|
||||
style={{ color: "var(--ink-3)" }}
|
||||
>
|
||||
<X size={11} />
|
||||
</span>
|
||||
) : (
|
||||
<ArrowDownIcon className="shrink-0" rotated={open} />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div
|
||||
className={menuCls}
|
||||
style={{
|
||||
background: "var(--panel)",
|
||||
border: "1px solid var(--line-2)",
|
||||
boxShadow: "var(--shadow-lg)",
|
||||
}}
|
||||
role="listbox"
|
||||
>
|
||||
<div className="p-2" style={{ borderBottom: "1px solid var(--line)" }}>
|
||||
<div className="relative">
|
||||
<Search
|
||||
size={12}
|
||||
className="absolute left-2.5 top-1/2 -translate-y-1/2 pointer-events-none"
|
||||
style={{ color: "var(--ink-3)" }}
|
||||
/>
|
||||
<input
|
||||
ref={inputRef}
|
||||
value={q}
|
||||
onChange={(e) => setQ(e.target.value)}
|
||||
placeholder="筛选语言…"
|
||||
aria-label="筛选语言"
|
||||
className="w-full h-8 rounded-md pl-7 pr-2 text-[12px] outline-none"
|
||||
style={{ background: "var(--panel-2)", border: "1px solid transparent", color: "var(--ink)" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="max-h-56 overflow-y-auto py-1">
|
||||
{allowAll ? (
|
||||
<LangOption
|
||||
active={value === ""}
|
||||
onClick={() => {
|
||||
onChange("");
|
||||
setOpen(false);
|
||||
}}
|
||||
label={allLabel}
|
||||
dotDim
|
||||
/>
|
||||
) : null}
|
||||
{filtered.length === 0 ? (
|
||||
<li className="px-3 py-3 text-center text-[12px]" style={{ color: "var(--ink-3)" }}>
|
||||
没有匹配的语言
|
||||
</li>
|
||||
) : (
|
||||
filtered.map((l) => (
|
||||
<LangOption
|
||||
key={l}
|
||||
active={value === l}
|
||||
onClick={() => {
|
||||
onChange(l);
|
||||
setOpen(false);
|
||||
}}
|
||||
label={l}
|
||||
mono
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ArrowDownIcon({ className = "", rotated }: { className?: string; rotated: boolean }) {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={`${className} ${rotated ? "rotate-180" : ""}`}
|
||||
style={{ color: "var(--ink-3)", transition: "transform 160ms ease" }}
|
||||
aria-hidden
|
||||
>
|
||||
<path d="m6 9 6 6 6-6" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function LangOption({
|
||||
active,
|
||||
onClick,
|
||||
label,
|
||||
mono,
|
||||
dotDim,
|
||||
}: {
|
||||
active: boolean;
|
||||
onClick: () => void;
|
||||
label: string;
|
||||
mono?: boolean;
|
||||
dotDim?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
role="option"
|
||||
aria-selected={active}
|
||||
onClick={onClick}
|
||||
className="w-full flex items-center gap-2 px-2.5 py-1.5 text-left text-[12.5px] transition-colors hover:bg-[var(--panel-2)]"
|
||||
style={{
|
||||
color: active ? "var(--accent)" : "var(--ink-2)",
|
||||
background: active ? "var(--accent-soft)" : undefined,
|
||||
fontFamily: mono ? MONO : undefined,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="w-[5px] h-[5px] rounded-full shrink-0"
|
||||
style={{
|
||||
background: active ? "var(--accent)" : "var(--ink-3)",
|
||||
opacity: active ? 1 : dotDim ? 0.5 : 0.3,
|
||||
}}
|
||||
/>
|
||||
<span className="flex-1 truncate">{label}</span>
|
||||
{active ? <Check size={12} className="shrink-0" /> : null}
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
185
frontend/components/SnippetPickerModal.tsx
Normal file
185
frontend/components/SnippetPickerModal.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { CodeXml, Eye, GitFork, Copy, Search } from "lucide-react";
|
||||
import Modal from "@/components/Modal";
|
||||
import {
|
||||
apiMySnippets,
|
||||
apiSearchSnippets,
|
||||
type SnippetListItem,
|
||||
} from "@/lib/api";
|
||||
import { formatRelative } from "@/lib/format";
|
||||
import { toast } from "@/lib/toast";
|
||||
|
||||
type Tab = "public" | "mine";
|
||||
|
||||
/**
|
||||
* 「插入片段」选择器：搜索公开广场 / 我的片段，点击插入 [snippet id=N] 指令。
|
||||
*/
|
||||
export default function SnippetPickerModal({
|
||||
open,
|
||||
onClose,
|
||||
onPick,
|
||||
}: {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onPick: (id: number) => void;
|
||||
}) {
|
||||
const [tab, setTab] = useState<Tab>("public");
|
||||
const [q, setQ] = useState("");
|
||||
const [items, setItems] = useState<SnippetListItem[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const seq = useRef(0);
|
||||
|
||||
// 打开时重置
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setTab("public");
|
||||
setQ("");
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const mySeq = ++seq.current;
|
||||
setLoading(true);
|
||||
const timer = setTimeout(() => {
|
||||
const req =
|
||||
tab === "mine" ? apiMySnippets(q.trim(), 1, 20) : apiSearchSnippets({ q: q.trim(), size: 20 });
|
||||
req
|
||||
.then((res) => {
|
||||
if (seq.current !== mySeq) return;
|
||||
setItems(res.items);
|
||||
setLoaded(true);
|
||||
})
|
||||
.catch((e) => {
|
||||
if (seq.current !== mySeq) return;
|
||||
toast(e instanceof Error ? e.message : "加载失败");
|
||||
})
|
||||
.finally(() => {
|
||||
if (seq.current === mySeq) setLoading(false);
|
||||
});
|
||||
}, 300);
|
||||
return () => clearTimeout(timer);
|
||||
}, [open, tab, q]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
title="插入代码片段"
|
||||
description="选择要嵌入的片段，正文中将插入 [snippet id=N] 指令"
|
||||
onClose={onClose}
|
||||
dismissOnOverlay
|
||||
maxWidthClass="max-w-lg"
|
||||
panelClassName="p-0 flex flex-col max-h-[80vh]"
|
||||
bodyClassName="flex flex-col min-h-0"
|
||||
>
|
||||
<div className="px-5 pt-4 pb-3 flex items-center gap-2" style={{ borderBottom: "1px solid var(--line)" }}>
|
||||
<div
|
||||
className="flex rounded-lg p-0.5 text-[12.5px] font-semibold shrink-0"
|
||||
style={{ background: "var(--panel-2)" }}
|
||||
role="tablist"
|
||||
aria-label="片段来源"
|
||||
>
|
||||
{(
|
||||
[
|
||||
["public", "公开广场"],
|
||||
["mine", "我的片段"],
|
||||
] as [Tab, string][]
|
||||
).map(([key, label]) => (
|
||||
<button
|
||||
key={key}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={tab === key}
|
||||
className="px-3 py-1 rounded-md transition-colors"
|
||||
style={
|
||||
tab === key
|
||||
? { background: "var(--panel)", color: "var(--ink)", boxShadow: "0 1px 2px rgba(0,0,0,0.08)" }
|
||||
: { color: "var(--ink-3)" }
|
||||
}
|
||||
onClick={() => setTab(key)}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="relative flex-1 min-w-0">
|
||||
<Search
|
||||
size={13}
|
||||
className="absolute left-2.5 top-1/2 -translate-y-1/2 pointer-events-none"
|
||||
style={{ color: "var(--ink-3)" }}
|
||||
/>
|
||||
<input
|
||||
autoFocus
|
||||
value={q}
|
||||
onChange={(e) => setQ(e.target.value)}
|
||||
placeholder="搜索标题或描述…"
|
||||
aria-label="搜索片段"
|
||||
className="w-full rounded-lg pl-7 pr-3 py-1.5 text-[13px]"
|
||||
style={{ background: "var(--bg)", border: "1px solid var(--line)", color: "var(--ink)" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-h-0 overflow-y-auto px-3 py-2">
|
||||
{loading && !loaded ? (
|
||||
<p className="meta text-center py-10 text-[12.5px]">加载中…</p>
|
||||
) : items.length === 0 ? (
|
||||
<p className="meta text-center py-10 text-[12.5px]">
|
||||
{tab === "mine" ? "还没有自己的片段，去片段广场新建一个吧" : "没有匹配的片段"}
|
||||
</p>
|
||||
) : (
|
||||
<ul className="flex flex-col gap-1">
|
||||
{items.map((it) => (
|
||||
<li key={it.id}>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full text-left rounded-xl px-3 py-2.5 transition-colors hover:bg-[var(--panel-2)]"
|
||||
onClick={() => {
|
||||
onPick(it.id);
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
<span className="flex items-center gap-2 min-w-0">
|
||||
<CodeXml size={14} className="shrink-0" style={{ color: "var(--accent)" }} />
|
||||
<span className="truncate text-[13.5px] font-semibold" style={{ color: "var(--ink)" }}>
|
||||
{it.title}
|
||||
</span>
|
||||
<span
|
||||
className="shrink-0 rounded-full px-1.5 py-px text-[10.5px] font-semibold"
|
||||
style={{ background: "var(--panel-2)", color: "var(--ink-3)" }}
|
||||
>
|
||||
{it.language}
|
||||
</span>
|
||||
{it.visibility === "private" && (
|
||||
<span
|
||||
className="shrink-0 rounded-full px-1.5 py-px text-[10.5px]"
|
||||
style={{ background: "var(--panel-2)", color: "var(--ink-3)" }}
|
||||
>
|
||||
私有
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="mt-1 flex items-center gap-3 text-[11.5px]" style={{ color: "var(--ink-3)" }}>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<Copy size={11} /> {it.copy_count}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<Eye size={11} /> {it.view_count}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<GitFork size={11} /> {it.fork_count}
|
||||
</span>
|
||||
<span className="ml-auto shrink-0">{formatRelative(it.created_at)}</span>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
239
frontend/components/SnippetVersionModal.tsx
Normal file
239
frontend/components/SnippetVersionModal.tsx
Normal file
@@ -0,0 +1,239 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { History, X } from "lucide-react";
|
||||
import { apiSnippetHistory } from "@/lib/api";
|
||||
import type { SnippetVersionItem } from "@/lib/api";
|
||||
import { toast } from "@/lib/toast";
|
||||
import { formatRelative } from "@/lib/format";
|
||||
import { smartDiff, toFoldedRows, type FoldedRow } from "@/lib/smartDiff";
|
||||
import Modal from "@/components/Modal";
|
||||
|
||||
function DiffLineRow({ row }: { row: FoldedRow }) {
|
||||
if (row.kind === "fold") {
|
||||
return (
|
||||
<div
|
||||
className="text-center py-1 text-[11px] select-none"
|
||||
style={{ color: "var(--ink-3)", background: "var(--panel-2)" }}
|
||||
>
|
||||
⋯ 折叠 {row.count} 行 ⋯
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const bg =
|
||||
row.op === "del"
|
||||
? "color-mix(in srgb, var(--danger) 8%, transparent)"
|
||||
: row.op === "ins"
|
||||
? "color-mix(in srgb, var(--ok) 8%, transparent)"
|
||||
: "transparent";
|
||||
const color =
|
||||
row.op === "del"
|
||||
? "var(--danger)"
|
||||
: row.op === "ins"
|
||||
? "var(--ok)"
|
||||
: "var(--ink)";
|
||||
const prefix = row.op === "del" ? "- " : row.op === "ins" ? "+ " : " ";
|
||||
|
||||
if (row.segments && row.segments.length > 0) {
|
||||
// 行内细分高亮
|
||||
const parts: Array<{ text: string; changed: boolean }> = [];
|
||||
let last = 0;
|
||||
for (const seg of row.segments) {
|
||||
if (seg.start > last) parts.push({ text: row.text.slice(last, seg.start), changed: false });
|
||||
parts.push({ text: row.text.slice(seg.start, seg.end), changed: true });
|
||||
last = seg.end;
|
||||
}
|
||||
if (last < row.text.length) parts.push({ text: row.text.slice(last), changed: false });
|
||||
return (
|
||||
<div
|
||||
className="flex gap-2 px-3 py-0.5 text-[12.5px] font-mono whitespace-pre-wrap break-all"
|
||||
style={{ background: bg, color }}
|
||||
>
|
||||
<span className="shrink-0 w-4 select-none" style={{ color: "var(--ink-3)" }}>
|
||||
{prefix}
|
||||
</span>
|
||||
<span>
|
||||
{parts.map((p, i) =>
|
||||
p.changed ? (
|
||||
<mark
|
||||
key={i}
|
||||
style={{
|
||||
background:
|
||||
row.op === "del"
|
||||
? "color-mix(in srgb, var(--danger) 25%, transparent)"
|
||||
: "color-mix(in srgb, var(--ok) 25%, transparent)",
|
||||
color: "inherit",
|
||||
}}
|
||||
>
|
||||
{p.text}
|
||||
</mark>
|
||||
) : (
|
||||
<span key={i}>{p.text}</span>
|
||||
)
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex gap-2 px-3 py-0.5 text-[12.5px] font-mono whitespace-pre-wrap break-all"
|
||||
style={{ background: bg, color }}
|
||||
>
|
||||
<span className="shrink-0 w-4 select-none" style={{ color: "var(--ink-3)" }}>
|
||||
{prefix}
|
||||
</span>
|
||||
<span>{row.text || " "}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function VersionDiff({ oldText, newText }: { oldText: string; newText: string }) {
|
||||
const result = smartDiff(oldText, newText);
|
||||
const rows = toFoldedRows(result.blocks, 3);
|
||||
return (
|
||||
<div
|
||||
className="rounded-lg overflow-hidden"
|
||||
style={{ border: "1px solid var(--line)", background: "var(--bg)" }}
|
||||
>
|
||||
<div
|
||||
className="px-3 py-1.5 text-[11px] font-medium flex items-center gap-3"
|
||||
style={{ background: "var(--panel-2)", borderBottom: "1px solid var(--line)", color: "var(--ink-3)" }}
|
||||
>
|
||||
<span style={{ color: "var(--ok)" }}>+{result.stats.adds}</span>
|
||||
<span style={{ color: "var(--danger)" }}>-{result.stats.dels}</span>
|
||||
</div>
|
||||
<div className="max-h-[320px] overflow-y-auto">
|
||||
{rows.map((row, i) => (
|
||||
<DiffLineRow key={i} row={row} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SnippetVersionModal({
|
||||
open,
|
||||
onClose,
|
||||
snippetId,
|
||||
currentCode,
|
||||
currentTitle,
|
||||
currentLanguage,
|
||||
currentDescription,
|
||||
}: {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
snippetId: number;
|
||||
currentCode: string;
|
||||
currentTitle: string;
|
||||
currentLanguage: string;
|
||||
currentDescription: string;
|
||||
}) {
|
||||
const [items, setItems] = useState<SnippetVersionItem[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [expandedId, setExpandedId] = useState<number | null>(null);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await apiSnippetHistory(snippetId, 1, 50);
|
||||
setItems(res.items);
|
||||
} catch (e) {
|
||||
toast(e instanceof Error ? e.message : "加载历史失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [snippetId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) load();
|
||||
}, [open, load]);
|
||||
|
||||
const toggleExpand = (id: number) => {
|
||||
setExpandedId((prev) => (prev === id ? null : id));
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
title="版本历史"
|
||||
description="每次编辑前的旧值快照"
|
||||
onClose={onClose}
|
||||
dismissOnOverlay
|
||||
maxWidthClass="max-w-3xl"
|
||||
panelClassName="p-5 sm:p-6"
|
||||
>
|
||||
<div className="max-h-[60vh] overflow-y-auto">
|
||||
{loading ? (
|
||||
<p className="meta text-[13px] text-center py-8">加载中…</p>
|
||||
) : items.length === 0 ? (
|
||||
<p className="meta text-[13px] text-center py-8">暂无编辑历史</p>
|
||||
) : (
|
||||
<div className="flex flex-col gap-3">
|
||||
{items.map((v) => {
|
||||
const isExpanded = expandedId === v.id;
|
||||
const diffRows = isExpanded
|
||||
? toFoldedRows(smartDiff(v.old_code, currentCode).blocks, 3)
|
||||
: null;
|
||||
return (
|
||||
<div
|
||||
key={v.id}
|
||||
className="rounded-lg overflow-hidden"
|
||||
style={{ border: "1px solid var(--line)", background: "var(--panel)" }}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleExpand(v.id)}
|
||||
className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-[var(--panel-2)] transition-colors"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<p className="text-[13px] font-medium truncate" style={{ color: "var(--ink)" }}>
|
||||
{v.old_title || currentTitle}
|
||||
</p>
|
||||
<p className="meta text-[11px] mt-0.5">
|
||||
{formatRelative(v.created_at)} · {v.old_language || currentLanguage}
|
||||
</p>
|
||||
</div>
|
||||
<span className="meta text-[11px] shrink-0 ml-3">
|
||||
{isExpanded ? "收起" : "查看差异"}
|
||||
</span>
|
||||
</button>
|
||||
{isExpanded && diffRows && (
|
||||
<div className="px-4 pb-4">
|
||||
<div
|
||||
className="rounded-lg overflow-hidden"
|
||||
style={{ border: "1px solid var(--line)", background: "var(--bg)" }}
|
||||
>
|
||||
<div
|
||||
className="px-3 py-1.5 text-[11px] font-medium flex items-center gap-3"
|
||||
style={{
|
||||
background: "var(--panel-2)",
|
||||
borderBottom: "1px solid var(--line)",
|
||||
color: "var(--ink-3)",
|
||||
}}
|
||||
>
|
||||
<span style={{ color: "var(--ok)" }}>
|
||||
+{smartDiff(v.old_code, currentCode).stats.adds}
|
||||
</span>
|
||||
<span style={{ color: "var(--danger)" }}>
|
||||
-{smartDiff(v.old_code, currentCode).stats.dels}
|
||||
</span>
|
||||
</div>
|
||||
<div className="max-h-[320px] overflow-y-auto">
|
||||
{diffRows.map((row, i) => (
|
||||
<DiffLineRow key={i} row={row} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -31,6 +31,7 @@ import {
|
||||
Layers,
|
||||
Images,
|
||||
Link2,
|
||||
CodeXml,
|
||||
} from "lucide-react";
|
||||
import type { User } from "@/lib/api";
|
||||
import { apiAdminPendingCounts, apiLogout } from "@/lib/api";
|
||||
@@ -118,6 +119,12 @@ const NAV_GROUPS: NavGroup[] = [
|
||||
icon: BookOpen,
|
||||
visible: (u) => hasPerm(u, PERMS.LIBRARY),
|
||||
},
|
||||
{
|
||||
href: "/admin/snippets",
|
||||
label: "片段管理",
|
||||
icon: CodeXml,
|
||||
visible: (u) => isStaff(u.role),
|
||||
},
|
||||
{
|
||||
href: "/admin/friend-links",
|
||||
label: "友情链接",
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { CalendarDays, CalendarCheck, LogIn, Loader2 } from "lucide-react";
|
||||
import { apiDoCheckin, type CheckinStatus } from "@/lib/api";
|
||||
import { apiDoCheckin, apiGetCheckin, type CheckinStatus } from "@/lib/api";
|
||||
|
||||
/**
|
||||
* 每日签到紧凑条，内嵌在右栏「站点数据」卡底部。
|
||||
@@ -24,7 +24,17 @@ export function PulseCheckin({ initial }: { initial?: CheckinStatus | null }) {
|
||||
try {
|
||||
setStatus(await apiDoCheckin());
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "签到失败");
|
||||
const msg = e instanceof Error ? e.message : "签到失败";
|
||||
// 本地状态滞后（缓存/多标签页）导致后端判重时，回拉真实状态，避免按钮仍显示「签到」
|
||||
if (msg.includes("已签到")) {
|
||||
try {
|
||||
setStatus(await apiGetCheckin());
|
||||
return;
|
||||
} catch {
|
||||
// 回拉失败，回落为错误提示
|
||||
}
|
||||
}
|
||||
setError(msg);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
124
frontend/components/markdown/MdSnippet.tsx
Normal file
124
frontend/components/markdown/MdSnippet.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
import Link from "next/link";
|
||||
import { CodeXml, Lock, Copy, Eye, MessageSquare, GitFork } from "lucide-react";
|
||||
import { fetchSnippetById } from "@/lib/api";
|
||||
import { postViewerCookieHeader } from "@/lib/cookies";
|
||||
import { getPublicSettingsCached } from "@/lib/serverData";
|
||||
import { cookies } from "next/headers";
|
||||
import { snippetPath } from "@/lib/urlStyle";
|
||||
import Avatar from "@/components/Avatar";
|
||||
|
||||
/**
|
||||
* [snippet id=N] 嵌入卡片（SSR）。
|
||||
* 私有/已删除/不存在时渲染降级占位，不暴露内容。
|
||||
*/
|
||||
export default async function MdSnippet({ id }: { id: number }) {
|
||||
const cookieHeader = postViewerCookieHeader(await cookies());
|
||||
const [data, settings] = await Promise.all([
|
||||
fetchSnippetById(id, cookieHeader).catch(() => null),
|
||||
getPublicSettingsCached(),
|
||||
]);
|
||||
const urlStyle = settings.url_style;
|
||||
|
||||
// 降级占位：不存在 / 私有且无权限 / 已删除
|
||||
if (!data) {
|
||||
return (
|
||||
<div
|
||||
className="my-4 rounded-xl px-4 py-4 flex items-center gap-3"
|
||||
style={{ background: "var(--panel-2)", border: "1px solid var(--line)" }}
|
||||
>
|
||||
<span
|
||||
className="w-9 h-9 flex items-center justify-center rounded-lg shrink-0"
|
||||
style={{ background: "var(--panel)", color: "var(--ink-3)" }}
|
||||
>
|
||||
<Lock size={16} />
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<p className="text-[13px] font-medium" style={{ color: "var(--ink-2)" }}>
|
||||
代码片段 #{id}
|
||||
</p>
|
||||
<p className="meta text-[11.5px]">片段不存在或无权查看</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const s = data.snippet;
|
||||
const ownerName = s.user ? s.user.nickname || s.user.username : "";
|
||||
const previewLines = s.code.split("\n").slice(0, 5);
|
||||
const href = snippetPath(urlStyle, s.id);
|
||||
|
||||
return (
|
||||
<Link href={href} className="group block my-4">
|
||||
<div
|
||||
className="rounded-xl overflow-hidden transition-[box-shadow,transform] duration-200 group-hover:-translate-y-0.5 group-hover:shadow-[var(--shadow-md)]"
|
||||
style={{ border: "1px solid var(--line)", background: "var(--panel)" }}
|
||||
>
|
||||
{/* 头部：语言 + 标题 + 作者 */}
|
||||
<div className="flex items-center gap-2.5 px-4 py-3" style={{ borderBottom: "1px solid var(--line)" }}>
|
||||
<span
|
||||
className="w-8 h-8 flex items-center justify-center rounded-lg shrink-0"
|
||||
style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
|
||||
>
|
||||
<CodeXml size={15} />
|
||||
</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className="text-[10px] font-semibold px-1.5 py-0.5 rounded uppercase tracking-wide shrink-0"
|
||||
style={{
|
||||
color: "var(--accent)",
|
||||
background: "var(--accent-soft)",
|
||||
border: "1px solid color-mix(in srgb, var(--accent) 30%, transparent)",
|
||||
}}
|
||||
>
|
||||
{s.language}
|
||||
</span>
|
||||
<p className="text-[14px] font-semibold truncate" style={{ color: "var(--ink)" }}>
|
||||
{s.title}
|
||||
</p>
|
||||
</div>
|
||||
{s.user && (
|
||||
<span className="flex items-center gap-1.5 mt-0.5">
|
||||
<Avatar size={14} name={ownerName} src={s.user.avatar} />
|
||||
<span className="meta text-[11px] truncate">{ownerName}</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 代码预览 */}
|
||||
<div className="px-4 py-3" style={{ background: "var(--panel-2)" }}>
|
||||
<pre
|
||||
className="text-[12px] leading-[1.6] overflow-hidden"
|
||||
style={{ color: "var(--ink-2)", fontFamily: "var(--font-mono, ui-monospace, monospace)" }}
|
||||
>
|
||||
{previewLines.map((line, i) => (
|
||||
<div key={i} className="flex gap-2 min-w-0">
|
||||
<span className="shrink-0 w-4 text-right select-none" style={{ color: "var(--ink-3)", opacity: 0.5 }}>
|
||||
{i + 1}
|
||||
</span>
|
||||
<span className="truncate">{line || " "}</span>
|
||||
</div>
|
||||
))}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
{/* 底部统计 */}
|
||||
<div className="flex items-center gap-3 px-4 py-2.5 meta text-[11px]">
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<Copy size={11} /> {s.copy_count}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<Eye size={11} /> {s.view_count}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<MessageSquare size={11} /> {s.comment_count}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<GitFork size={11} /> {s.fork_count}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@@ -14,14 +14,36 @@ export const SHIKI_LANG_IDS = [
|
||||
"tsx",
|
||||
"jsx",
|
||||
"json",
|
||||
"jsonc",
|
||||
"yaml",
|
||||
"toml",
|
||||
"ini",
|
||||
"bash",
|
||||
"sql",
|
||||
"html",
|
||||
"css",
|
||||
"scss",
|
||||
"diff",
|
||||
"rust",
|
||||
"ruby",
|
||||
"powershell",
|
||||
"nginx",
|
||||
"dockerfile",
|
||||
"kotlin",
|
||||
"java",
|
||||
"c",
|
||||
"cpp",
|
||||
"csharp",
|
||||
"php",
|
||||
"swift",
|
||||
"dart",
|
||||
"lua",
|
||||
"vue",
|
||||
"graphql",
|
||||
"xml",
|
||||
"regex",
|
||||
"makefile",
|
||||
"prisma",
|
||||
"plaintext",
|
||||
] as const;
|
||||
|
||||
@@ -38,8 +60,44 @@ export const SHIKI_LANG_ALIAS: Record<string, string> = {
|
||||
yml: "yaml",
|
||||
text: "plaintext",
|
||||
txt: "plaintext",
|
||||
golang: "go",
|
||||
rb: "ruby",
|
||||
ps1: "powershell",
|
||||
pwsh: "powershell",
|
||||
"c++": "cpp",
|
||||
cs: "csharp",
|
||||
"c#": "csharp",
|
||||
regexp: "regex",
|
||||
docker: "dockerfile",
|
||||
};
|
||||
|
||||
/**
|
||||
* 白名单 id → @shikijs/langs grammar 内部注册名。
|
||||
* 部分语言的 dist 文件只是别名重导出（如 bash.mjs = shellscript.mjs），
|
||||
* HighlighterCore 按内部名注册，codeToHtml(lang:"bash") 会静默降级 plaintext。
|
||||
*/
|
||||
const INTERNAL_LANG_ALIAS: Record<string, string> = {
|
||||
bash: "shellscript",
|
||||
sh: "shellscript",
|
||||
shell: "shellscript",
|
||||
zsh: "shellscript",
|
||||
dockerfile: "docker",
|
||||
regex: "regexp",
|
||||
makefile: "make",
|
||||
};
|
||||
|
||||
/**
|
||||
* createHighlighterCore 的 langAlias：输入别名 + 白名单 id 都要能落到 grammar 内部名。
|
||||
* 注意 core 会校验别名链无环，且 docker/regexp 本身就是内部注册名，
|
||||
* 不能再作为 alias 键（会与 dockerfile→docker、regex→regexp 互指成环）。
|
||||
*/
|
||||
function buildCoreLangAlias(): Record<string, string> {
|
||||
const merged = { ...SHIKI_LANG_ALIAS, ...INTERNAL_LANG_ALIAS };
|
||||
delete merged["docker"];
|
||||
delete merged["regexp"];
|
||||
return merged;
|
||||
}
|
||||
|
||||
export const SHIKI_THEMES = {
|
||||
light: "github-light",
|
||||
dark: "github-dark-dimmed",
|
||||
@@ -84,10 +142,30 @@ export function getSiteHighlighter(): Promise<HighlighterCore> {
|
||||
import("@shikijs/langs/css"),
|
||||
import("@shikijs/langs/scss"),
|
||||
import("@shikijs/langs/diff"),
|
||||
import("@shikijs/langs/rust"),
|
||||
import("@shikijs/langs/ruby"),
|
||||
import("@shikijs/langs/powershell"),
|
||||
import("@shikijs/langs/nginx"),
|
||||
import("@shikijs/langs/dockerfile"),
|
||||
import("@shikijs/langs/kotlin"),
|
||||
import("@shikijs/langs/java"),
|
||||
import("@shikijs/langs/c"),
|
||||
import("@shikijs/langs/cpp"),
|
||||
import("@shikijs/langs/csharp"),
|
||||
import("@shikijs/langs/php"),
|
||||
import("@shikijs/langs/swift"),
|
||||
import("@shikijs/langs/dart"),
|
||||
import("@shikijs/langs/lua"),
|
||||
import("@shikijs/langs/vue"),
|
||||
import("@shikijs/langs/graphql"),
|
||||
import("@shikijs/langs/xml"),
|
||||
import("@shikijs/langs/regex"),
|
||||
import("@shikijs/langs/makefile"),
|
||||
import("@shikijs/langs/prisma"),
|
||||
// plaintext / text / txt 为 Shiki 特殊语言，无需 grammar
|
||||
aardioGrammar,
|
||||
],
|
||||
langAlias: SHIKI_LANG_ALIAS,
|
||||
langAlias: buildCoreLangAlias(),
|
||||
engine: createOnigurumaEngine(import("shiki/wasm")),
|
||||
});
|
||||
}
|
||||
|
||||
@@ -4987,3 +4987,403 @@ export async function apiAdminSetFriendLinkStatus(
|
||||
export async function apiAdminDeleteFriendLink(id: number): Promise<{ ok: boolean }> {
|
||||
return apiOperations(`/api/admin/friend-links/${id}`, "DELETE");
|
||||
}
|
||||
|
||||
// ===== 代码片段（广场 + 我的 + 管理） =====
|
||||
|
||||
/** 片段可见性 */
|
||||
export type SnippetVisibility = "public" | "private";
|
||||
|
||||
/** 片段广场/列表条目（不含代码全文，preview 为代码前缀） */
|
||||
export interface SnippetListItem {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
language: string;
|
||||
visibility: SnippetVisibility;
|
||||
user_id: number;
|
||||
forked_from_id?: number | null;
|
||||
copy_count: number;
|
||||
view_count: number;
|
||||
comment_count: number;
|
||||
fork_count: number;
|
||||
preview: string;
|
||||
user?: LibraryCreator | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
/** 片段详情（含代码全文与作者/Fork 来源摘要） */
|
||||
export interface SnippetDetail {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
language: string;
|
||||
code: string;
|
||||
visibility: SnippetVisibility;
|
||||
user_id: number;
|
||||
forked_from_id?: number | null;
|
||||
copy_count: number;
|
||||
view_count: number;
|
||||
comment_count: number;
|
||||
fork_count: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
user?: LibraryCreator | null;
|
||||
forked_from?: { id: number; title: string } | null;
|
||||
}
|
||||
|
||||
/** 片段版本历史条目（编辑前旧值快照） */
|
||||
export interface SnippetVersionItem {
|
||||
id: number;
|
||||
snippet_id: number;
|
||||
editor_id: number;
|
||||
old_title: string;
|
||||
old_language: string;
|
||||
old_description: string;
|
||||
old_code: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
/** 片段评论（楼层树：parent_id 空=主评） */
|
||||
export interface SnippetCommentItem {
|
||||
id: number;
|
||||
snippet_id: number;
|
||||
user_id: number;
|
||||
parent_id?: number | null;
|
||||
root_id?: number | null;
|
||||
depth: number;
|
||||
content: string;
|
||||
floor?: number;
|
||||
deleted?: boolean;
|
||||
user?: LibraryCreator | null;
|
||||
replies?: SnippetCommentItem[];
|
||||
edited?: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface SnippetInput {
|
||||
title: string;
|
||||
language: string;
|
||||
description?: string;
|
||||
code: string;
|
||||
visibility: SnippetVisibility;
|
||||
}
|
||||
|
||||
export type SnippetSort = "latest" | "copy" | "comment" | "fork";
|
||||
|
||||
/** SSR / 公开：片段广场列表 */
|
||||
export async function fetchSnippets(opts: {
|
||||
q?: string;
|
||||
lang?: string;
|
||||
sort?: SnippetSort;
|
||||
page?: number;
|
||||
size?: number;
|
||||
cookieHeader?: string;
|
||||
}): Promise<{ items: SnippetListItem[]; total: number }> {
|
||||
const params = new URLSearchParams();
|
||||
if (opts.q) params.set("q", opts.q);
|
||||
if (opts.lang) params.set("lang", opts.lang);
|
||||
if (opts.sort) params.set("sort", opts.sort);
|
||||
params.set("page", String(opts.page ?? 1));
|
||||
params.set("size", String(opts.size ?? 12));
|
||||
const res = await fetch(
|
||||
`${API_BASE}/api/snippets?${params}`,
|
||||
ssrInit(cookieHeaders(opts.cookieHeader))
|
||||
);
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data.error || "获取片段列表失败");
|
||||
return { items: data.items ?? [], total: data.total ?? 0 };
|
||||
}
|
||||
|
||||
/** SSR / 公开：语言白名单 */
|
||||
export async function fetchSnippetLanguages(): Promise<{ languages: string[] }> {
|
||||
const res = await fetch(`${API_BASE}/api/snippets/languages`, ssrInit());
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data.error || "获取语言列表失败");
|
||||
return { languages: data.languages ?? [] };
|
||||
}
|
||||
|
||||
export interface SnippetLangStat {
|
||||
language: string;
|
||||
count: number;
|
||||
}
|
||||
|
||||
export interface SnippetStats {
|
||||
total_snippets: number;
|
||||
total_copies: number;
|
||||
total_views: number;
|
||||
total_comments: number;
|
||||
total_forks: number;
|
||||
contributors: number;
|
||||
top_languages: SnippetLangStat[];
|
||||
}
|
||||
|
||||
/** SSR / 公开：片段广场聚合统计 */
|
||||
export async function fetchSnippetStats(): Promise<SnippetStats> {
|
||||
const res = await fetch(`${API_BASE}/api/snippets/stats`, ssrInit());
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data.error || "获取片段统计失败");
|
||||
return (data.stats ?? {
|
||||
total_snippets: 0,
|
||||
total_copies: 0,
|
||||
total_views: 0,
|
||||
total_comments: 0,
|
||||
total_forks: 0,
|
||||
contributors: 0,
|
||||
top_languages: [],
|
||||
}) as SnippetStats;
|
||||
}
|
||||
|
||||
/** SSR：片段详情（公开或本人/管理可见私有；404/403 返回 null） */
|
||||
export async function fetchSnippetById(
|
||||
id: number,
|
||||
cookieHeader?: string
|
||||
): Promise<{ snippet: SnippetDetail } | null> {
|
||||
const res = await fetch(`${API_BASE}/api/snippets/${id}`, ssrInit(cookieHeaders(cookieHeader)));
|
||||
if (res.status === 404 || res.status === 403) return null;
|
||||
if (!res.ok) throw new Error("获取片段失败");
|
||||
return res.json();
|
||||
}
|
||||
|
||||
/** 客户端：片段详情（带登录凭证，私有片段仅 owner/staff 可见） */
|
||||
export async function apiGetSnippet(id: number): Promise<{ snippet: SnippetDetail } | null> {
|
||||
const res = await fetchWithRefresh(`/api/snippets/${id}`, { headers: clientHeaders() });
|
||||
if (res.status === 404 || res.status === 403) return null;
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data.error || "获取片段失败");
|
||||
return data as { snippet: SnippetDetail };
|
||||
}
|
||||
|
||||
/** SSR / 公开：片段评论（主评分页 + 回复） */
|
||||
export async function fetchSnippetComments(
|
||||
id: number,
|
||||
page = 1,
|
||||
size = 20,
|
||||
cookieHeader?: string
|
||||
): Promise<{ items: SnippetCommentItem[]; total: number }> {
|
||||
const res = await fetch(
|
||||
`${API_BASE}/api/snippets/${id}/comments?page=${page}&size=${size}`,
|
||||
ssrInit(cookieHeaders(cookieHeader))
|
||||
);
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data.error || "获取评论失败");
|
||||
return { items: data.items ?? [], total: data.total ?? 0 };
|
||||
}
|
||||
|
||||
/** SSR / 公开：片段的公开 Fork 列表 */
|
||||
export async function fetchSnippetForks(
|
||||
id: number,
|
||||
page = 1,
|
||||
size = 20
|
||||
): Promise<{ items: SnippetListItem[]; total: number }> {
|
||||
const res = await fetch(`${API_BASE}/api/snippets/${id}/forks?page=${page}&size=${size}`, ssrInit());
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data.error || "获取 Fork 列表失败");
|
||||
return { items: data.items ?? [], total: data.total ?? 0 };
|
||||
}
|
||||
|
||||
/** 客户端：我的片段（含私有） */
|
||||
export async function apiMySnippets(
|
||||
q = "",
|
||||
page = 1,
|
||||
size = 12
|
||||
): Promise<{ items: SnippetListItem[]; total: number }> {
|
||||
const params = new URLSearchParams({ page: String(page), size: String(size) });
|
||||
if (q) params.set("q", q);
|
||||
const res = await fetchWithRefresh(`/api/snippets/mine?${params}`, { headers: clientHeaders() });
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data.error || "获取我的片段失败");
|
||||
return { items: data.items ?? [], total: data.total ?? 0 };
|
||||
}
|
||||
|
||||
/** 客户端：创建片段 */
|
||||
export async function apiCreateSnippet(input: SnippetInput): Promise<{ snippet: SnippetDetail }> {
|
||||
const res = await fetchWithRefresh("/api/snippets", {
|
||||
method: "POST",
|
||||
headers: clientHeaders({ "Content-Type": "application/json" }),
|
||||
body: JSON.stringify(input),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data.error || "创建片段失败");
|
||||
return data as { snippet: SnippetDetail };
|
||||
}
|
||||
|
||||
/** 客户端：编辑片段（owner/staff；服务端落版本快照） */
|
||||
export async function apiUpdateSnippet(
|
||||
id: number,
|
||||
input: SnippetInput
|
||||
): Promise<{ snippet: SnippetDetail }> {
|
||||
const res = await fetchWithRefresh(`/api/snippets/${id}`, {
|
||||
method: "PUT",
|
||||
headers: clientHeaders({ "Content-Type": "application/json" }),
|
||||
body: JSON.stringify(input),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data.error || "保存片段失败");
|
||||
return data as { snippet: SnippetDetail };
|
||||
}
|
||||
|
||||
/** 客户端：删除片段（owner/staff） */
|
||||
export async function apiDeleteSnippet(id: number): Promise<void> {
|
||||
const res = await fetchWithRefresh(`/api/snippets/${id}`, {
|
||||
method: "DELETE",
|
||||
headers: clientHeaders(),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error || "删除片段失败");
|
||||
}
|
||||
}
|
||||
|
||||
/** 客户端：Fork 公开片段为自己的私有副本 */
|
||||
export async function apiForkSnippet(id: number): Promise<{ snippet: SnippetDetail }> {
|
||||
const res = await fetchWithRefresh(`/api/snippets/${id}/fork`, {
|
||||
method: "POST",
|
||||
headers: clientHeaders({ "Content-Type": "application/json" }),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data.error || "Fork 失败");
|
||||
return data as { snippet: SnippetDetail };
|
||||
}
|
||||
|
||||
/** 客户端：复制计数（节流由服务端按用户/IP 控制；失败静默） */
|
||||
export async function apiRecordSnippetCopy(id: number): Promise<void> {
|
||||
try {
|
||||
await fetchWithRefresh(`/api/snippets/${id}/copy`, {
|
||||
method: "POST",
|
||||
headers: clientHeaders({ "Content-Type": "application/json" }),
|
||||
});
|
||||
} catch {
|
||||
/* 计数失败不影响复制本身 */
|
||||
}
|
||||
}
|
||||
|
||||
/** 客户端：版本历史（登录可见） */
|
||||
export async function apiSnippetHistory(
|
||||
id: number,
|
||||
page = 1,
|
||||
size = 20
|
||||
): Promise<{ items: SnippetVersionItem[]; total: number }> {
|
||||
const res = await fetchWithRefresh(`/api/snippets/${id}/history?page=${page}&size=${size}`, {
|
||||
headers: clientHeaders(),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data.error || "获取版本历史失败");
|
||||
return { items: data.items ?? [], total: data.total ?? 0 };
|
||||
}
|
||||
|
||||
/** 客户端：发表片段评论（parent_id 非空为回复） */
|
||||
export async function apiCreateSnippetComment(
|
||||
id: number,
|
||||
content: string,
|
||||
parentId?: number
|
||||
): Promise<{ comment: SnippetCommentItem }> {
|
||||
const res = await fetchWithRefresh(`/api/snippets/${id}/comments`, {
|
||||
method: "POST",
|
||||
headers: clientHeaders({ "Content-Type": "application/json" }),
|
||||
body: JSON.stringify({ content, parent_id: parentId || undefined }),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data.error || "评论失败");
|
||||
return data as { comment: SnippetCommentItem };
|
||||
}
|
||||
|
||||
/** 客户端：编辑片段评论（仅本人） */
|
||||
export async function apiUpdateSnippetComment(
|
||||
id: number,
|
||||
cid: number,
|
||||
content: string
|
||||
): Promise<{ comment: SnippetCommentItem }> {
|
||||
const res = await fetchWithRefresh(`/api/snippets/${id}/comments/${cid}`, {
|
||||
method: "PUT",
|
||||
headers: clientHeaders({ "Content-Type": "application/json" }),
|
||||
body: JSON.stringify({ content }),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data.error || "保存评论失败");
|
||||
return data as { comment: SnippetCommentItem };
|
||||
}
|
||||
|
||||
/** 客户端：删除片段评论（本人/staff） */
|
||||
export async function apiDeleteSnippetComment(id: number, cid: number): Promise<void> {
|
||||
const res = await fetchWithRefresh(`/api/snippets/${id}/comments/${cid}`, {
|
||||
method: "DELETE",
|
||||
headers: clientHeaders(),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error || "删除评论失败");
|
||||
}
|
||||
}
|
||||
|
||||
export interface SnippetCommentHistoryItem {
|
||||
id: number;
|
||||
editor: { id: number; username: string; nickname: string; avatar: string } | null;
|
||||
old_content: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
/** 客户端：片段评论编辑历史（登录可见） */
|
||||
export async function apiSnippetCommentHistory(
|
||||
id: number,
|
||||
cid: number,
|
||||
page = 1,
|
||||
size = 10
|
||||
): Promise<{ items: SnippetCommentHistoryItem[]; total: number; page: number; size: number }> {
|
||||
const params = new URLSearchParams({ page: String(page), size: String(size) });
|
||||
const res = await fetchWithRefresh(`/api/snippets/${id}/comments/${cid}/history?${params}`, {
|
||||
headers: clientHeaders(),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data.error || "获取编辑历史失败");
|
||||
return {
|
||||
items: data.items ?? [],
|
||||
total: data.total ?? 0,
|
||||
page: data.page ?? page,
|
||||
size: data.size ?? size,
|
||||
};
|
||||
}
|
||||
|
||||
/** 客户端：片段搜索（嵌入弹窗等场景；公开广场 + 可含我的） */
|
||||
export async function apiSearchSnippets(opts: {
|
||||
q?: string;
|
||||
page?: number;
|
||||
size?: number;
|
||||
}): Promise<{ items: SnippetListItem[]; total: number }> {
|
||||
const params = new URLSearchParams();
|
||||
if (opts.q) params.set("q", opts.q);
|
||||
params.set("page", String(opts.page ?? 1));
|
||||
params.set("size", String(opts.size ?? 10));
|
||||
const res = await fetchWithRefresh(`/api/snippets?${params}`, { headers: clientHeaders() });
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data.error || "搜索片段失败");
|
||||
return { items: data.items ?? [], total: data.total ?? 0 };
|
||||
}
|
||||
|
||||
/** 管理端：片段全量列表 */
|
||||
export async function apiAdminSnippets(opts: {
|
||||
q?: string;
|
||||
visibility?: string;
|
||||
page?: number;
|
||||
size?: number;
|
||||
}): Promise<{ items: SnippetListItem[]; total: number }> {
|
||||
const params = new URLSearchParams({ page: String(opts.page ?? 1), size: String(opts.size ?? 30) });
|
||||
if (opts.q) params.set("q", opts.q);
|
||||
if (opts.visibility) params.set("visibility", opts.visibility);
|
||||
return apiOperations(`/api/admin/snippets?${params}`);
|
||||
}
|
||||
|
||||
/** 管理端：删除片段（软删 + 原因） */
|
||||
export async function apiAdminDeleteSnippet(id: number, reason = ""): Promise<{ ok: boolean }> {
|
||||
return apiOperations(`/api/admin/snippets/${id}`, "DELETE", reason ? { reason } : undefined);
|
||||
}
|
||||
|
||||
/** 管理端：强制修改片段可见性（下架为 private / 恢复 public） */
|
||||
export async function apiAdminSetSnippetVisibility(
|
||||
id: number,
|
||||
visibility: SnippetVisibility
|
||||
): Promise<{ ok: boolean }> {
|
||||
return apiOperations(`/api/admin/snippets/${id}/visibility`, "PUT", { visibility });
|
||||
}
|
||||
|
||||
|
||||
@@ -27,7 +27,8 @@ export type ContentSegment =
|
||||
| { type: "timeline"; items: TimelineItem[]; rawBody: string }
|
||||
| { type: "entries"; items: EntryItem[]; rawBody: string }
|
||||
| { type: "details"; title: string; body: string }
|
||||
| { type: "video"; provider: "bilibili" | "youtube"; id: string };
|
||||
| { type: "video"; provider: "bilibili" | "youtube"; id: string }
|
||||
| { type: "snippet"; id: number };
|
||||
|
||||
function isTimelineClose(line: string): boolean {
|
||||
return line.trim().toLowerCase() === "[/timeline]";
|
||||
@@ -57,6 +58,18 @@ export function parseDetailsOpen(trimmed: string): string {
|
||||
return title || DETAILS_DEFAULT_TITLE;
|
||||
}
|
||||
|
||||
/* ---------- [snippet id=N] 代码片段嵌入（整行单标记） ---------- */
|
||||
|
||||
const SNIPPET_LINE_RE = /^\[snippet\s+id=(\d+)\]$/i;
|
||||
|
||||
/** 整行 `[snippet id=N]`。解析失败返回 null（该行按普通 Markdown 处理）。 */
|
||||
export function parseSnippetLine(trimmed: string): number | null {
|
||||
const m = trimmed.match(SNIPPET_LINE_RE);
|
||||
if (!m) return null;
|
||||
const id = Number(m[1]);
|
||||
return Number.isInteger(id) && id > 0 ? id : null;
|
||||
}
|
||||
|
||||
/* ---------- [bilibili] / [youtube] 视频嵌入（整行单标记） ---------- */
|
||||
|
||||
const VIDEO_LINE_RE = /^\[(bilibili|youtube)\]([^\[\]]+)\[\/\1\]$/i;
|
||||
@@ -122,6 +135,7 @@ export function splitContentSegments(
|
||||
| { type: "entries"; body: string }
|
||||
| { type: "details"; title: string; body: string }
|
||||
| { type: "video"; provider: "bilibili" | "youtube"; id: string }
|
||||
| { type: "snippet"; id: number }
|
||||
> = [];
|
||||
let buf: string[] = [];
|
||||
let inCode = false;
|
||||
@@ -228,6 +242,15 @@ export function splitContentSegments(
|
||||
continue;
|
||||
}
|
||||
|
||||
// [snippet id=N] 整行片段嵌入
|
||||
const snippetId = parseSnippetLine(trimmed);
|
||||
if (snippetId != null) {
|
||||
flushMd();
|
||||
raw.push({ type: "snippet", id: snippetId });
|
||||
i++;
|
||||
continue;
|
||||
}
|
||||
|
||||
// [entries:off] 例外块：body 原样进 md 缓冲（标记行丢弃），
|
||||
// 不再参与 entries/timeline 拆分；未闭合时整块当普通 Markdown
|
||||
if (isEntriesOffOpen(trimmed)) {
|
||||
@@ -273,6 +296,10 @@ export function splitContentSegments(
|
||||
out.push({ type: "video", provider: part.provider, id: part.id });
|
||||
continue;
|
||||
}
|
||||
if (part.type === "snippet") {
|
||||
out.push({ type: "snippet", id: part.id });
|
||||
continue;
|
||||
}
|
||||
const hideSegs = splitHideSegments(part.text) as HideSegment[];
|
||||
for (const s of hideSegs) {
|
||||
if (s.type === "md") {
|
||||
|
||||
@@ -15,8 +15,8 @@ describe("normalizeHeaderNav", () => {
|
||||
assert.deepEqual(normalizeHeaderNav("home"), DEFAULT_HEADER_NAV);
|
||||
});
|
||||
|
||||
it("默认三项顺序与注册表一致", () => {
|
||||
assert.equal(DEFAULT_HEADER_NAV.length, 3);
|
||||
it("默认内置项顺序与注册表一致", () => {
|
||||
assert.equal(DEFAULT_HEADER_NAV.length, HEADER_NAV_BUILTIN_KEYS.length);
|
||||
assert.deepEqual(
|
||||
DEFAULT_HEADER_NAV.map((i) => (i.type === "builtin" ? i.key : "")),
|
||||
[...HEADER_NAV_BUILTIN_KEYS],
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
import { footerURLAllowed, isExternalFooterURL, runeCount } from "./brand.ts";
|
||||
|
||||
export const HEADER_NAV_BUILTIN_KEYS = ["home", "leaderboard", "library"] as const;
|
||||
export const HEADER_NAV_BUILTIN_KEYS = ["home", "leaderboard", "library", "snippets"] as const;
|
||||
|
||||
export type HeaderNavBuiltinKey = (typeof HEADER_NAV_BUILTIN_KEYS)[number];
|
||||
|
||||
@@ -20,6 +20,7 @@ export const HEADER_NAV_BUILTIN_LABELS: Record<HeaderNavBuiltinKey, string> = {
|
||||
home: "首页",
|
||||
leaderboard: "排行榜",
|
||||
library: "书库",
|
||||
snippets: "片段",
|
||||
};
|
||||
|
||||
export type HeaderNavBuiltinItem = { type: "builtin"; key: HeaderNavBuiltinKey };
|
||||
|
||||
@@ -105,10 +105,11 @@ export interface RtChatMessageData {
|
||||
};
|
||||
}
|
||||
|
||||
// 群成员关系变更：被踢/群解散/被邀请
|
||||
// 群成员关系变更：被踢/群解散/被邀请/新成员加入
|
||||
export interface RtChatMembershipData {
|
||||
room_id: number;
|
||||
status: "kicked" | "dissolved" | "invited";
|
||||
status: "kicked" | "dissolved" | "invited" | "joined";
|
||||
user_id?: number;
|
||||
}
|
||||
|
||||
// 消息撤回
|
||||
|
||||
48
frontend/lib/snippetLangColors.ts
Normal file
48
frontend/lib/snippetLangColors.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
/** 片段语言霓虹色：Hero 分布条 / 卡片顶条共用，未收录语言回落主题色 */
|
||||
const LANG_COLORS: Record<string, string> = {
|
||||
go: "#00d8ff",
|
||||
css: "#c792ea",
|
||||
scss: "#e879c6",
|
||||
html: "#ff6d4d",
|
||||
javascript: "#f7df1e",
|
||||
jsx: "#61dafb",
|
||||
typescript: "#4e9cff",
|
||||
tsx: "#4e9cff",
|
||||
vue: "#41d1a6",
|
||||
python: "#ffd43b",
|
||||
rust: "#ff7a59",
|
||||
java: "#ffb86c",
|
||||
kotlin: "#c87bff",
|
||||
swift: "#ff9e64",
|
||||
dart: "#54c5f8",
|
||||
c: "#7fd4ff",
|
||||
cpp: "#7fd4ff",
|
||||
csharp: "#b78bff",
|
||||
php: "#a6b1ff",
|
||||
ruby: "#ff5f56",
|
||||
lua: "#9c9cff",
|
||||
r: "#7ea6ff",
|
||||
sql: "#ff9e64",
|
||||
graphql: "#ff6bd6",
|
||||
bash: "#89e051",
|
||||
shell: "#89e051",
|
||||
powershell: "#6ea8ff",
|
||||
dockerfile: "#3ab0ff",
|
||||
nginx: "#5fd08a",
|
||||
yaml: "#ff6b81",
|
||||
toml: "#ffd166",
|
||||
ini: "#ffd166",
|
||||
json: "#8bc34a",
|
||||
jsonc: "#8bc34a",
|
||||
xml: "#ffab70",
|
||||
markdown: "#9aa7ff",
|
||||
regex: "#f78c6c",
|
||||
diff: "#b0bec5",
|
||||
makefile: "#ffd166",
|
||||
prisma: "#5eead4",
|
||||
plaintext: "#94a3b8",
|
||||
};
|
||||
|
||||
export function snippetLangColor(lang: string): string {
|
||||
return LANG_COLORS[lang.toLowerCase()] ?? "var(--accent)";
|
||||
}
|
||||
@@ -14,6 +14,8 @@ import {
|
||||
pagePath,
|
||||
parseEntityPath,
|
||||
postPath,
|
||||
snippetPath,
|
||||
snippetsPath,
|
||||
userPath,
|
||||
} from "./urlStyle.ts";
|
||||
|
||||
@@ -89,6 +91,16 @@ describe("路径构造器", () => {
|
||||
assert.equal(entityPath("default", "user", 9), "/u/9");
|
||||
assert.equal(entityPath("html", "announcement", 9), "/announcement-9.html");
|
||||
});
|
||||
it("代码片段三风格（html/discuz 同模板）", () => {
|
||||
assert.equal(snippetsPath("default"), "/snippets");
|
||||
assert.equal(snippetsPath("html"), "/snippets.html");
|
||||
assert.equal(snippetsPath("discuz"), "/snippets.html");
|
||||
assert.equal(snippetPath("default", 12), "/snippets/12");
|
||||
assert.equal(snippetPath("html", 12), "/snippet-12.html");
|
||||
assert.equal(snippetPath("discuz", 12), "/snippet-12.html");
|
||||
assert.equal(snippetPath("default", 0), "");
|
||||
assert.equal(snippetPath("html", -1), "");
|
||||
});
|
||||
it("评论锚点使用帖内相对楼层号", () => {
|
||||
assert.equal(commentAnchor(1, true, 147), "#comment-1");
|
||||
assert.equal(commentAnchor(3, false, 147), "#comment-3-r147");
|
||||
@@ -111,6 +123,14 @@ describe("matchPrettyPath", () => {
|
||||
assert.deepEqual(matchPrettyPath("/p-about.html"), { style: "html", kind: "page", slug: "about" });
|
||||
assert.deepEqual(matchPrettyPath("/leaderboard.html"), { style: "html", kind: "leaderboard" });
|
||||
assert.deepEqual(matchPrettyPath("/rank.html"), { style: "discuz", kind: "leaderboard" });
|
||||
assert.deepEqual(matchPrettyPath("/snippets.html", "html"), { style: "html", kind: "snippets" });
|
||||
assert.deepEqual(matchPrettyPath("/snippets.html", "discuz"), { style: "discuz", kind: "snippets" });
|
||||
assert.deepEqual(matchPrettyPath("/snippet-12.html", "discuz"), { style: "discuz", kind: "snippet", id: 12 });
|
||||
assert.deepEqual(matchPrettyPath("/snippet-12.html"), { style: "html", kind: "snippet", id: 12 });
|
||||
assert.equal(matchPrettyPath("/snippet-abc.html"), null);
|
||||
assert.equal(matchPrettyPath("/snippet-.html"), null);
|
||||
assert.equal(matchPrettyPath("/snippets-.html"), null);
|
||||
assert.equal(matchPrettyPath("/snippet-12.htmlx"), null);
|
||||
});
|
||||
it("书库两风格同模板：prefer 优先当前风格，缺省首条兜底", () => {
|
||||
assert.equal(matchPrettyPath("/library.html", "html")?.style, "html");
|
||||
@@ -187,6 +207,13 @@ describe("matchStandardPath / parseEntityPath", () => {
|
||||
assert.deepEqual(matchStandardPath("/library/abc/read"), { kind: "libraryRead", slug: "abc" });
|
||||
assert.equal(matchStandardPath("/library/a/b"), null);
|
||||
assert.equal(matchStandardPath("/libraryx"), null);
|
||||
// 片段：列表与详情；new/edit 子路径不得命中详情
|
||||
assert.deepEqual(matchStandardPath("/snippets"), { kind: "snippets" });
|
||||
assert.deepEqual(matchStandardPath("/snippets/"), { kind: "snippets" });
|
||||
assert.deepEqual(matchStandardPath("/snippets/12"), { kind: "snippet", id: 12 });
|
||||
assert.equal(matchStandardPath("/snippets/new"), null);
|
||||
assert.equal(matchStandardPath("/snippets/12/edit"), null);
|
||||
assert.equal(matchStandardPath("/snippetsx"), null);
|
||||
});
|
||||
it("parseEntityPath 兼容标准与全部模板", () => {
|
||||
assert.deepEqual(parseEntityPath("/post/12"), { kind: "post", id: 12 });
|
||||
@@ -211,4 +238,10 @@ describe("matchStandardPath / parseEntityPath", () => {
|
||||
assert.deepEqual(parseEntityPath("/library/abc/read"), { kind: "libraryRead", slug: "abc" });
|
||||
assert.deepEqual(parseEntityPath("/library-abc-read-2.html"), { kind: "libraryRead", slug: "abc" });
|
||||
});
|
||||
it("parseEntityPath 兼容片段路径", () => {
|
||||
assert.deepEqual(parseEntityPath("/snippets"), { kind: "snippets" });
|
||||
assert.deepEqual(parseEntityPath("/snippets/12"), { kind: "snippet", id: 12 });
|
||||
assert.deepEqual(parseEntityPath("/snippets.html"), { kind: "snippets" });
|
||||
assert.deepEqual(parseEntityPath("/snippet-12.html"), { kind: "snippet", id: 12 });
|
||||
});
|
||||
});
|
||||
|
||||
@@ -7,14 +7,21 @@
|
||||
* default: /post/123 /u/5 /announcement/1 /p/about /leaderboard /library /library/{slug} /library/{slug}/read?c={书内章号}
|
||||
* html: /post-123.html /user-5.html /announcement-1.html /p-about.html /leaderboard.html /library.html /library-{slug}.html （章节：/library-{slug}.html?sec={书内章号}）
|
||||
* discuz: /thread-123.html /space-uid-5.html /notice-1.html /page-about.html /rank.html （书库两风格同 html 模板）
|
||||
* 书库章节走详情路径 + ?sec= 查询参数（章内子目录锚点 #e-{sec}-{章内序号}）；旧版 -read-{n} 路径
|
||||
* 不再生成，但正则保留可解析（middleware 改写回标准读页），旧链接不失效。
|
||||
* 代码片段：default /snippets /snippets/{id}；html/discuz 两风格统一 /snippets.html /snippet-{id}.html
|
||||
*/
|
||||
|
||||
export type UrlStyle = "default" | "html" | "discuz";
|
||||
export type EntityKind = "post" | "user" | "announcement";
|
||||
/** 全部可反解的实体类型；page/libraryDoc/libraryRead 的 id 是 slug（字符串），leaderboard/library 是固定单页无 id */
|
||||
export type PageKind = EntityKind | "page" | "leaderboard" | "library" | "libraryDoc" | "libraryRead";
|
||||
/** 全部可反解的实体类型；page/libraryDoc/libraryRead 的 id 是 slug（字符串），leaderboard/library/snippets 是固定单页无 id */
|
||||
export type PageKind =
|
||||
| EntityKind
|
||||
| "page"
|
||||
| "leaderboard"
|
||||
| "library"
|
||||
| "libraryDoc"
|
||||
| "libraryRead"
|
||||
| "snippets"
|
||||
| "snippet";
|
||||
|
||||
export const URL_STYLES: readonly UrlStyle[] = ["default", "html", "discuz"];
|
||||
|
||||
@@ -64,6 +71,18 @@ const LIBRARY_TEMPLATES: Record<Exclude<UrlStyle, "default">, { list: string; do
|
||||
},
|
||||
};
|
||||
|
||||
/** 代码片段伪静态模板：两风格统一（同书库，非 Discuz 原生概念） */
|
||||
const SNIPPET_TEMPLATES: Record<Exclude<UrlStyle, "default">, { list: string; detail: (id: number) => string }> = {
|
||||
html: {
|
||||
list: "/snippets.html",
|
||||
detail: (id) => `/snippet-${id}.html`,
|
||||
},
|
||||
discuz: {
|
||||
list: "/snippets.html",
|
||||
detail: (id) => `/snippet-${id}.html`,
|
||||
},
|
||||
};
|
||||
|
||||
/** id 非法（≤0/非有限数）时返回空串，调用方按异常路径处理 */
|
||||
function guardId(id: number): number | null {
|
||||
return Number.isFinite(id) && id > 0 ? id : null;
|
||||
@@ -155,6 +174,19 @@ export function libraryDocReadPath(style: UrlStyle, slug: string, chapterNo?: nu
|
||||
return no ? `${base}?c=${no}` : base;
|
||||
}
|
||||
|
||||
/** 片段列表路径：default 标准路径，html/discuz 伪静态（两风格统一模板） */
|
||||
export function snippetsPath(style: UrlStyle): string {
|
||||
return style === "default" ? "/snippets" : SNIPPET_TEMPLATES[style].list;
|
||||
}
|
||||
|
||||
/** 片段详情路径；id 非法（≤0/非有限数）时返回空串 */
|
||||
export function snippetPath(style: UrlStyle, id: number): string {
|
||||
const n = guardId(id);
|
||||
if (n == null) return "";
|
||||
if (style === "default") return `/snippets/${n}`;
|
||||
return SNIPPET_TEMPLATES[style].detail(n);
|
||||
}
|
||||
|
||||
/** 实体对应风格下的标准/pretty 路径（内部与 middleware 共用） */
|
||||
export function entityPath(style: UrlStyle, kind: EntityKind, id: number): string {
|
||||
if (kind === "post") return postPath(style, id);
|
||||
@@ -173,7 +205,9 @@ export type PrettyMatch =
|
||||
| { style: Exclude<UrlStyle, "default">; kind: "libraryDoc"; slug: string }
|
||||
| { style: Exclude<UrlStyle, "default">; kind: "libraryRead"; slug: string; id: number }
|
||||
| { style: Exclude<UrlStyle, "default">; kind: "library" }
|
||||
| { style: Exclude<UrlStyle, "default">; kind: "leaderboard" };
|
||||
| { style: Exclude<UrlStyle, "default">; kind: "leaderboard" }
|
||||
| { style: Exclude<UrlStyle, "default">; kind: "snippets" }
|
||||
| { style: Exclude<UrlStyle, "default">; kind: "snippet"; id: number };
|
||||
|
||||
// 精确锚定：id 仅纯数字，天然排除 /post/123/edit 这类子路径与伪造路径；
|
||||
// page/libraryDoc 的 slug 捕获保持 URL 原样（encoded），rewrite 落点直接复用。
|
||||
@@ -188,6 +222,8 @@ const PRETTY_PATTERNS: { re: RegExp; style: Exclude<UrlStyle, "default">; kind:
|
||||
{ re: /^\/library\.html$/, style: "html", kind: "library" },
|
||||
{ re: /^\/library-(.+)-read-(\d+)\.html$/, style: "html", kind: "libraryRead" },
|
||||
{ re: /^\/library-([^/]+)\.html$/, style: "html", kind: "libraryDoc" },
|
||||
{ re: /^\/snippets\.html$/, style: "html", kind: "snippets" },
|
||||
{ re: /^\/snippet-(\d+)\.html$/, style: "html", kind: "snippet" },
|
||||
{ re: /^\/thread-(\d+)\.html$/, style: "discuz", kind: "post" },
|
||||
{ re: /^\/space-uid-(\d+)\.html$/, style: "discuz", kind: "user" },
|
||||
{ re: /^\/notice-(\d+)\.html$/, style: "discuz", kind: "announcement" },
|
||||
@@ -196,6 +232,8 @@ const PRETTY_PATTERNS: { re: RegExp; style: Exclude<UrlStyle, "default">; kind:
|
||||
{ re: /^\/library\.html$/, style: "discuz", kind: "library" },
|
||||
{ re: /^\/library-(.+)-read-(\d+)\.html$/, style: "discuz", kind: "libraryRead" },
|
||||
{ re: /^\/library-([^/]+)\.html$/, style: "discuz", kind: "libraryDoc" },
|
||||
{ re: /^\/snippets\.html$/, style: "discuz", kind: "snippets" },
|
||||
{ re: /^\/snippet-(\d+)\.html$/, style: "discuz", kind: "snippet" },
|
||||
];
|
||||
|
||||
const STANDARD_PATTERNS: { re: RegExp; kind: PageKind }[] = [
|
||||
@@ -208,6 +246,9 @@ const STANDARD_PATTERNS: { re: RegExp; kind: PageKind }[] = [
|
||||
{ re: /^\/library\/?$/, kind: "library" },
|
||||
{ re: /^\/library\/([^/]+)\/read$/, kind: "libraryRead" },
|
||||
{ re: /^\/library\/([^/]+)$/, kind: "libraryDoc" },
|
||||
// (\d+)$ 纯数字锚定：/snippets/new 与 /snippets/123/edit 不会命中详情模式
|
||||
{ re: /^\/snippets\/?$/, kind: "snippets" },
|
||||
{ re: /^\/snippets\/(\d+)$/, kind: "snippet" },
|
||||
];
|
||||
|
||||
/**
|
||||
@@ -230,7 +271,7 @@ export function matchPrettyPath(
|
||||
hit = { style: p.style, kind: p.kind, slug: m[1] };
|
||||
} else if (p.kind === "libraryRead") {
|
||||
hit = { style: p.style, kind: p.kind, slug: m[1], id: Number(m[2]) };
|
||||
} else if (p.kind === "library" || p.kind === "leaderboard") {
|
||||
} else if (p.kind === "library" || p.kind === "leaderboard" || p.kind === "snippets") {
|
||||
hit = { style: p.style, kind: p.kind };
|
||||
} else {
|
||||
hit = { style: p.style, kind: p.kind, id: Number(m[1]) };
|
||||
@@ -249,7 +290,7 @@ export function matchStandardPath(pathname: string): StandardMatch | null {
|
||||
if (p.kind === "page" || p.kind === "libraryDoc" || p.kind === "libraryRead") {
|
||||
return { kind: p.kind, slug: m[1] };
|
||||
}
|
||||
if (p.kind === "library" || p.kind === "leaderboard") return { kind: p.kind };
|
||||
if (p.kind === "library" || p.kind === "leaderboard" || p.kind === "snippets") return { kind: p.kind };
|
||||
return { kind: p.kind, id: Number(m[1]) };
|
||||
}
|
||||
return null;
|
||||
@@ -261,7 +302,9 @@ export type StandardMatch =
|
||||
| { kind: "libraryDoc"; slug: string }
|
||||
| { kind: "libraryRead"; slug: string }
|
||||
| { kind: "library" }
|
||||
| { kind: "leaderboard" };
|
||||
| { kind: "leaderboard" }
|
||||
| { kind: "snippets" }
|
||||
| { kind: "snippet"; id: number };
|
||||
|
||||
/**
|
||||
* 反解任意实体路径（标准 + 全部伪静态风格），供 isActive 前缀判断、面包屑等
|
||||
@@ -281,6 +324,7 @@ export function parseEntityPath(pathname: string): StandardMatch | null {
|
||||
if (pretty.kind === "libraryRead") return { kind: "libraryRead", slug: decodeSlug(pretty.slug) };
|
||||
if (pretty.kind === "leaderboard") return { kind: "leaderboard" };
|
||||
if (pretty.kind === "library") return { kind: "library" };
|
||||
if (pretty.kind === "snippets") return { kind: "snippets" };
|
||||
return { kind: pretty.kind, id: pretty.id };
|
||||
}
|
||||
|
||||
|
||||
@@ -10,6 +10,8 @@ import {
|
||||
matchStandardPath,
|
||||
normalizeUrlStyle,
|
||||
pagePathFromSlug,
|
||||
snippetPath,
|
||||
snippetsPath,
|
||||
standardEntityPath,
|
||||
type PageKind,
|
||||
type UrlStyle,
|
||||
@@ -185,6 +187,7 @@ function couldBeEntityPath(pathname: string): boolean {
|
||||
pathname.startsWith("/announcement/") ||
|
||||
pathname.startsWith("/p/") ||
|
||||
pathname.startsWith("/library") ||
|
||||
pathname.startsWith("/snippets") ||
|
||||
pathname.startsWith("/leaderboard") ||
|
||||
pathname.endsWith(".html")
|
||||
);
|
||||
@@ -199,6 +202,8 @@ function standardTarget(m: { kind: PageKind; id?: number; slug?: string }): stri
|
||||
if (m.kind === "libraryDoc") return `/library/${m.slug ?? ""}`;
|
||||
if (m.kind === "libraryRead") return `/library/${m.slug ?? ""}/read?c=${m.id ?? 0}`;
|
||||
if (m.kind === "library") return "/library";
|
||||
if (m.kind === "snippets") return "/snippets";
|
||||
if (m.kind === "snippet") return `/snippets/${m.id ?? 0}`;
|
||||
if (m.kind === "leaderboard") return "/leaderboard";
|
||||
return standardEntityPath(m.kind, m.id ?? 0);
|
||||
}
|
||||
@@ -216,6 +221,8 @@ function styledPath(
|
||||
return libraryDocReadPath(style, m.slug ?? "", chapterNo ?? m.id ?? 1);
|
||||
}
|
||||
if (m.kind === "library") return libraryPath(style);
|
||||
if (m.kind === "snippets") return snippetsPath(style);
|
||||
if (m.kind === "snippet") return snippetPath(style, m.id ?? 0);
|
||||
if (m.kind === "leaderboard") return leaderboardPath(style);
|
||||
return entityPath(style, m.kind, m.id ?? 0);
|
||||
}
|
||||
|
||||
4
frontend/next-env.d.ts
vendored
4
frontend/next-env.d.ts
vendored
@@ -1,7 +1,7 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
import "./.next/types/routes.d.ts";
|
||||
import "./.next/types/root-params.d.ts";
|
||||
import "./.next/dev/types/routes.d.ts";
|
||||
import "./.next/dev/types/root-params.d.ts";
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
||||
|
||||
Reference in New Issue
Block a user