feat: 外观支持自定义 CSS/JS，并升级发帖工作台与积分存量看板
后台可注入全站 CSS/JS（SSR 生效，CSS 可热换）；发帖/编辑改为锁一屏工作室；经济看板增加存量健康度；主题令牌与弹层误关一并收紧。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -35,7 +35,7 @@ function PageRow({
|
||||
return (
|
||||
<Link
|
||||
href={`/p/${p.slug}`}
|
||||
className="block px-5 sm:px-6 py-4 sm:py-5 transition-colors hover:bg-[var(--accent-soft)] focus-visible:bg-[var(--accent-soft)]"
|
||||
className="block px-5 sm:px-6 py-4 sm:py-5 transition-colors hover:bg-[var(--panel-2)] focus-visible:bg-[var(--panel-2)]"
|
||||
style={showDivider ? { borderTop: "1px solid var(--line)" } : undefined}
|
||||
>
|
||||
<div className="flex items-start gap-3 min-w-0">
|
||||
|
||||
@@ -12,6 +12,7 @@ import {
|
||||
RotateCcw,
|
||||
Pipette,
|
||||
Sparkles,
|
||||
FileCode2,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
AdminPageHeader,
|
||||
@@ -20,7 +21,7 @@ import {
|
||||
AdminStepper,
|
||||
AdminSwitch,
|
||||
} from "@/components/admin";
|
||||
import { apiUpdateSiteSettings, type PublicSettings } from "@/lib/api";
|
||||
import { apiUpdateSiteSettings, type PublicSettings, type UpdateSiteSettingsBody } from "@/lib/api";
|
||||
import { toast } from "@/lib/toast";
|
||||
import {
|
||||
ACCENT_PRESETS,
|
||||
@@ -30,14 +31,27 @@ import {
|
||||
findPreset,
|
||||
normalizeHex,
|
||||
} from "@/lib/theme";
|
||||
import {
|
||||
MAX_CUSTOM_CSS_CHARS,
|
||||
MAX_CUSTOM_JS_CHARS,
|
||||
SAMPLE_CUSTOM_CSS,
|
||||
SAMPLE_CUSTOM_JS,
|
||||
applyCustomCSS,
|
||||
clipCustomSnippet,
|
||||
} from "@/lib/customCode";
|
||||
|
||||
// 后台「外观设置」：主题色、代码块折叠与界面动画。
|
||||
// 主题色修改时立即对整页实时预览（仅本地），保存后才写库并对所有用户生效。
|
||||
// 后台「外观设置」：主题色、自定义 CSS/JS、代码块折叠与界面动画。
|
||||
// 主题色 / 自定义 CSS 修改时立即对整页实时预览（仅本地），保存后才写库并对所有用户生效。
|
||||
// 自定义 JS 不在编辑时执行，保存后整页加载生效。
|
||||
export default function AppearanceAdmin({ initial }: { initial: PublicSettings }) {
|
||||
const router = useRouter();
|
||||
const initialAccent = initial.accent || "";
|
||||
const [savedHex, setSavedHex] = useState(initialAccent);
|
||||
const [draft, setDraft] = useState(initialAccent || DEFAULT_ACCENT);
|
||||
const [savedCustomCSS, setSavedCustomCSS] = useState(initial.custom_css || "");
|
||||
const [customCSS, setCustomCSS] = useState(initial.custom_css || SAMPLE_CUSTOM_CSS);
|
||||
const [savedCustomJS, setSavedCustomJS] = useState(initial.custom_js || "");
|
||||
const [customJS, setCustomJS] = useState(initial.custom_js || SAMPLE_CUSTOM_JS);
|
||||
const [codeAutoFold, setCodeAutoFold] = useState(initial.code_block_auto_fold !== false);
|
||||
const [foldLines, setFoldLines] = useState(
|
||||
Number.isFinite(initial.code_block_fold_lines) ? initial.code_block_fold_lines : 5
|
||||
@@ -54,6 +68,8 @@ export default function AppearanceAdmin({ initial }: { initial: PublicSettings }
|
||||
const [saving, setSaving] = useState(false);
|
||||
const savedRef = useRef(savedHex);
|
||||
savedRef.current = savedHex;
|
||||
const savedCSSRef = useRef(savedCustomCSS);
|
||||
savedCSSRef.current = savedCustomCSS;
|
||||
|
||||
const normalized = useMemo(() => normalizeHex(draft), [draft]);
|
||||
const pair = useMemo(
|
||||
@@ -62,7 +78,12 @@ export default function AppearanceAdmin({ initial }: { initial: PublicSettings }
|
||||
);
|
||||
const preset = useMemo(() => (normalized ? findPreset(normalized) : null), [normalized]);
|
||||
const submitHex = normalized && normalized !== DEFAULT_ACCENT ? normalized : "";
|
||||
const dirty = (savedHex || DEFAULT_ACCENT) !== (normalized || "");
|
||||
const accentDirty = (savedHex || DEFAULT_ACCENT) !== (normalized || "");
|
||||
const cssIsGuide = !savedCustomCSS && customCSS === SAMPLE_CUSTOM_CSS;
|
||||
const jsIsGuide = !savedCustomJS && customJS === SAMPLE_CUSTOM_JS;
|
||||
const cssDirty = customCSS !== savedCustomCSS && !cssIsGuide;
|
||||
const jsDirty = customJS !== savedCustomJS && !jsIsGuide;
|
||||
const dirty = accentDirty || cssDirty || jsDirty;
|
||||
const invalid = draft.trim() !== "" && !normalized;
|
||||
|
||||
useEffect(() => {
|
||||
@@ -72,19 +93,35 @@ export default function AppearanceAdmin({ initial }: { initial: PublicSettings }
|
||||
};
|
||||
}, [normalized]);
|
||||
|
||||
useEffect(() => {
|
||||
applyCustomCSS(customCSS, true);
|
||||
return () => {
|
||||
applyCustomCSS(savedCSSRef.current, false);
|
||||
};
|
||||
}, [customCSS]);
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!normalized || saving) return;
|
||||
const body: UpdateSiteSettingsBody = {};
|
||||
if (accentDirty) body.accent = submitHex;
|
||||
if (cssDirty) body.custom_css = customCSS;
|
||||
if (jsDirty) body.custom_js = customJS;
|
||||
if (Object.keys(body).length === 0) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
const res = await apiUpdateSiteSettings({ accent: submitHex });
|
||||
const res = await apiUpdateSiteSettings(body);
|
||||
const next = (res.accent || "").toLowerCase();
|
||||
setSavedHex(next);
|
||||
setSavedCustomCSS(res.custom_css || "");
|
||||
setSavedCustomJS(res.custom_js || "");
|
||||
applyAccentTheme(next || null);
|
||||
applyCustomCSS(res.custom_css || "", false);
|
||||
router.refresh();
|
||||
toast(next ? "主题色已保存并对全站生效" : "已恢复默认主题色");
|
||||
toast(jsDirty ? "外观已保存；自定义 JS 将在整页刷新后执行" : "外观已保存并对全站生效");
|
||||
} catch (e) {
|
||||
toast(e instanceof Error ? e.message : "保存失败", "error");
|
||||
applyAccentTheme(savedRef.current || null);
|
||||
applyCustomCSS(savedCSSRef.current, false);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
@@ -92,7 +129,10 @@ export default function AppearanceAdmin({ initial }: { initial: PublicSettings }
|
||||
|
||||
const discard = () => {
|
||||
setDraft(savedHex || DEFAULT_ACCENT);
|
||||
setCustomCSS(savedCustomCSS || SAMPLE_CUSTOM_CSS);
|
||||
setCustomJS(savedCustomJS || SAMPLE_CUSTOM_JS);
|
||||
applyAccentTheme(savedHex || null);
|
||||
applyCustomCSS(savedCustomCSS, true);
|
||||
};
|
||||
|
||||
const toggleCodeFold = async () => {
|
||||
@@ -167,7 +207,7 @@ export default function AppearanceAdmin({ initial }: { initial: PublicSettings }
|
||||
<AdminPageHeader
|
||||
icon={Palette}
|
||||
title="外观设置"
|
||||
description="配置站点主题色、代码块折叠与界面动画"
|
||||
description="配置站点主题色、自定义 CSS/JS、代码块折叠与界面动画"
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 xl:grid-cols-3 gap-4 mb-6">
|
||||
@@ -296,7 +336,10 @@ export default function AppearanceAdmin({ initial }: { initial: PublicSettings }
|
||||
<AdminSection title="实时预览">
|
||||
<div
|
||||
className="rounded-[var(--r-sm)] border p-4 space-y-4"
|
||||
style={{ borderColor: "var(--line)", background: "var(--bg)" }}
|
||||
style={{
|
||||
borderColor: "var(--line)",
|
||||
background: "var(--bg)",
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-wrap items-center gap-2.5">
|
||||
<button type="button" className="btn btn-primary btn-sm">
|
||||
@@ -327,14 +370,16 @@ export default function AppearanceAdmin({ initial }: { initial: PublicSettings }
|
||||
</span>
|
||||
</div>
|
||||
<div className="max-w-xs">
|
||||
<div className="j13-bcard" aria-current="page">
|
||||
<span
|
||||
className="j13-bcard-ico"
|
||||
style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
|
||||
>
|
||||
<Palette size={16} />
|
||||
</span>
|
||||
<span className="j13-bcard-name text-[13px] flex-1">选中的板块卡片</span>
|
||||
<div className="panel p-3">
|
||||
<div className="j13-bcard" aria-current="page">
|
||||
<span
|
||||
className="j13-bcard-ico"
|
||||
style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
|
||||
>
|
||||
<Palette size={16} />
|
||||
</span>
|
||||
<span className="j13-bcard-name text-[13px] flex-1">选中的板块卡片</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -470,6 +515,85 @@ export default function AppearanceAdmin({ initial }: { initial: PublicSettings }
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AdminSection
|
||||
title={
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<FileCode2 size={15} /> 自定义代码
|
||||
</span>
|
||||
}
|
||||
description="注入全站 HTML。空配置时先显示注释示例（不会自动写入）；保存后才对访客生效。勿包含 </style> 或 </script>。"
|
||||
className="mb-6"
|
||||
>
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div className="flex items-center justify-between gap-2 mb-1">
|
||||
<label className="field-label !mb-0" htmlFor="custom-css">
|
||||
自定义 CSS
|
||||
</label>
|
||||
{customCSS !== SAMPLE_CUSTOM_CSS && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-line btn-sm !h-7 !px-2.5 !text-[12px]"
|
||||
onClick={() => setCustomCSS(SAMPLE_CUSTOM_CSS)}
|
||||
>
|
||||
填入示例
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<p className="meta text-[12.5px] mb-2 leading-relaxed">
|
||||
覆盖令牌或组件类。本页即时预览；去掉注释后的规则才会改变外观。上限{" "}
|
||||
{MAX_CUSTOM_CSS_CHARS.toLocaleString()} 字。
|
||||
</p>
|
||||
<textarea
|
||||
id="custom-css"
|
||||
className="j13-compose-field w-full font-mono text-[12.5px] leading-relaxed"
|
||||
style={{ minHeight: 280 }}
|
||||
spellCheck={false}
|
||||
value={customCSS}
|
||||
onChange={(e) => setCustomCSS(clipCustomSnippet(e.target.value, MAX_CUSTOM_CSS_CHARS))}
|
||||
aria-label="自定义 CSS"
|
||||
/>
|
||||
<p className="meta text-[11.5px] mt-1.5 tabular-nums">
|
||||
{customCSS.length.toLocaleString()} / {MAX_CUSTOM_CSS_CHARS.toLocaleString()}
|
||||
{cssIsGuide ? " · 示例未保存" : ""}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center justify-between gap-2 mb-1">
|
||||
<label className="field-label !mb-0" htmlFor="custom-js">
|
||||
自定义 JS
|
||||
</label>
|
||||
{customJS !== SAMPLE_CUSTOM_JS && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-line btn-sm !h-7 !px-2.5 !text-[12px]"
|
||||
onClick={() => setCustomJS(SAMPLE_CUSTOM_JS)}
|
||||
>
|
||||
填入示例
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<p className="meta text-[12.5px] mb-2 leading-relaxed">
|
||||
仅站长/超管可写。不在编辑时运行，保存后需整页刷新。上限{" "}
|
||||
{MAX_CUSTOM_JS_CHARS.toLocaleString()} 字。
|
||||
</p>
|
||||
<textarea
|
||||
id="custom-js"
|
||||
className="j13-compose-field w-full font-mono text-[12.5px] leading-relaxed"
|
||||
style={{ minHeight: 280 }}
|
||||
spellCheck={false}
|
||||
value={customJS}
|
||||
onChange={(e) => setCustomJS(clipCustomSnippet(e.target.value, MAX_CUSTOM_JS_CHARS))}
|
||||
aria-label="自定义 JS"
|
||||
/>
|
||||
<p className="meta text-[11.5px] mt-1.5 tabular-nums">
|
||||
{customJS.length.toLocaleString()} / {MAX_CUSTOM_JS_CHARS.toLocaleString()}
|
||||
{jsIsGuide ? " · 示例未保存" : ""}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</AdminSection>
|
||||
|
||||
<div className="flex items-center justify-between gap-3 sticky bottom-5 panel !p-3.5 pl-5 z-10">
|
||||
<p className="text-[12.5px] meta hidden sm:block">
|
||||
{dirty ? "有未保存的改动，整页正处于实时预览状态" : "设置已是保存状态"}
|
||||
|
||||
@@ -157,6 +157,174 @@ function todayDelta(items: PointLedgerItem[]) {
|
||||
return { granted, spent };
|
||||
}
|
||||
|
||||
type FlowHealth = "low" | "ok" | "hot";
|
||||
|
||||
function stockFromStats(stats: EconomyStats) {
|
||||
let granted = 0;
|
||||
let spent = 0;
|
||||
const series = stats.delta_series || [];
|
||||
const seriesHas = series.some((d) => (Number(d.granted) || 0) > 0 || (Number(d.spent) || 0) > 0);
|
||||
if (seriesHas) {
|
||||
for (const d of series) {
|
||||
granted += Math.max(0, Number(d.granted) || 0);
|
||||
spent += Math.max(0, Number(d.spent) || 0);
|
||||
}
|
||||
} else {
|
||||
for (const it of stats.recent_ledger || []) {
|
||||
const n = Number(it.delta) || 0;
|
||||
if (n > 0) granted += n;
|
||||
else if (n < 0) spent += -n;
|
||||
}
|
||||
}
|
||||
let frozen = 0;
|
||||
for (const it of stats.recent_ledger || []) {
|
||||
if (it.reason === "bounty_escrow" && (Number(it.delta) || 0) < 0) {
|
||||
frozen += Math.abs(Number(it.delta));
|
||||
}
|
||||
}
|
||||
if ((stats.escrowed_points || 0) > frozen) {
|
||||
frozen = stats.escrowed_points;
|
||||
}
|
||||
const circulating = granted - spent;
|
||||
const empty = granted <= 0 && spent <= 0 && frozen <= 0;
|
||||
const rate = granted > 0 ? Math.round((spent / granted) * 100) : 0;
|
||||
let health: FlowHealth = "ok";
|
||||
if (rate < 20) health = "low";
|
||||
else if (rate > 60) health = "hot";
|
||||
return { granted, spent, circulating, frozen, empty, rate, health };
|
||||
}
|
||||
|
||||
const HEALTH_COPY: Record<FlowHealth, string> = {
|
||||
low: "积分消耗偏低，可考虑增加积分消耗场景",
|
||||
ok: "积分经济体健康",
|
||||
hot: "积分消耗较快，注意通胀",
|
||||
};
|
||||
|
||||
const HEALTH_LABEL: Record<FlowHealth, string> = {
|
||||
low: "偏低",
|
||||
ok: "健康",
|
||||
hot: "偏快",
|
||||
};
|
||||
|
||||
function StockOverviewCard({ stats }: { stats: EconomyStats }) {
|
||||
const stock = useMemo(() => stockFromStats(stats), [stats]);
|
||||
const { granted, spent, circulating, frozen, empty, rate, health } = stock;
|
||||
const tip = HEALTH_COPY[health];
|
||||
const showFrozen = frozen > 0;
|
||||
|
||||
let circBarPct = granted > 0 ? Math.max(0, (circulating / granted) * 100) : 0;
|
||||
const spentLabelPct = granted > 0 ? Math.min(100, (spent / granted) * 100) : 0;
|
||||
const circLabelPct = granted > 0 ? Math.max(0, Math.round((Math.max(0, circulating) / granted) * 100)) : 0;
|
||||
const netSpent = Math.max(0, spent - frozen);
|
||||
let netSpentPct = granted > 0 ? (netSpent / granted) * 100 : 0;
|
||||
let frozenPct = granted > 0 && showFrozen ? (frozen / granted) * 100 : 0;
|
||||
const segSum = circBarPct + netSpentPct + frozenPct;
|
||||
if (segSum > 100 && segSum > 0) {
|
||||
const scale = 100 / segSum;
|
||||
circBarPct *= scale;
|
||||
netSpentPct *= scale;
|
||||
frozenPct *= scale;
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="stock-card">
|
||||
<div className="flex items-start justify-between gap-3 mb-3">
|
||||
<div className="min-w-0">
|
||||
<h3 className="text-[14.5px] font-semibold" style={{ color: "var(--ink)" }}>
|
||||
积分存量概览
|
||||
</h3>
|
||||
<p className="meta text-[11.5px] mt-0.5 leading-relaxed">基于全站累计流水计算</p>
|
||||
</div>
|
||||
{!empty ? (
|
||||
<span
|
||||
className={`stock-badge is-${health} shrink-0`}
|
||||
title={tip}
|
||||
>
|
||||
流通率 {granted > 0 ? `${rate}%` : "—"} · {HEALTH_LABEL[health]}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{empty ? (
|
||||
<div className="stock-card-body items-center justify-center">
|
||||
<p className="meta text-center">暂无流水，无法计算存量</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="stock-card-body">
|
||||
<div>
|
||||
<p className="text-[13px]" style={{ color: "var(--ink-3)" }}>
|
||||
流通中积分
|
||||
</p>
|
||||
<p
|
||||
className="tabular-nums text-[32px] font-bold leading-none mt-1"
|
||||
style={{ color: "var(--stock-circ)", fontVariantNumeric: "tabular-nums" }}
|
||||
>
|
||||
{fmt(circulating)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div
|
||||
className="stock-bar"
|
||||
role="img"
|
||||
aria-label={`流通中 ${circLabelPct}%，消耗 ${Math.round(spentLabelPct)}%${
|
||||
showFrozen ? `，托管冻结 ${fmt(frozen)}` : ""
|
||||
}`}
|
||||
>
|
||||
{circBarPct > 0 ? (
|
||||
<span className="stock-bar-seg is-circ" style={{ width: `${circBarPct}%` }} />
|
||||
) : null}
|
||||
{netSpentPct > 0 ? (
|
||||
<span className="stock-bar-seg is-spent" style={{ width: `${netSpentPct}%` }} />
|
||||
) : null}
|
||||
{frozenPct > 0 ? (
|
||||
<span className="stock-bar-seg is-frozen" style={{ width: `${frozenPct}%` }} />
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-1 mt-1.5 text-[12px] tabular-nums">
|
||||
<span style={{ color: "var(--stock-circ)" }}>流通中 {circLabelPct}%</span>
|
||||
<span style={{ color: "var(--ink-3)" }}>消耗 {Math.round(spentLabelPct)}%</span>
|
||||
{showFrozen ? (
|
||||
<span style={{ color: "var(--stock-frozen)" }}>托管 {fmt(frozen)}</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-[13px] flex flex-wrap items-center gap-x-4 gap-y-1" style={{ color: "var(--ink-2)" }}>
|
||||
<span>
|
||||
累计发放{" "}
|
||||
<strong className="tabular-nums font-semibold" style={{ color: "var(--ink)" }}>
|
||||
{fmt(granted)}
|
||||
</strong>
|
||||
</span>
|
||||
<span>
|
||||
累计消耗{" "}
|
||||
<strong className="tabular-nums font-semibold" style={{ color: "var(--ink)" }}>
|
||||
{fmt(spent)}
|
||||
</strong>
|
||||
</span>
|
||||
{showFrozen ? (
|
||||
<span>
|
||||
托管冻结{" "}
|
||||
<strong className="tabular-nums font-semibold" style={{ color: "var(--ink)" }}>
|
||||
{fmt(frozen)}
|
||||
</strong>
|
||||
</span>
|
||||
) : null}
|
||||
</p>
|
||||
{showFrozen ? (
|
||||
<p className="text-[12px] mt-1.5" style={{ color: "var(--ink-3)" }}>
|
||||
托管的 {fmt(frozen)} 积分处于冻结态，悬赏采纳或退回后释放
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function LedgerUserLink({ user, compact }: { user: LedgerParty; compact?: boolean }) {
|
||||
const name = partyName(user);
|
||||
return (
|
||||
@@ -207,7 +375,7 @@ function RecentLedgerRow({ it }: { it: PointLedgerItem }) {
|
||||
)}
|
||||
|
||||
{payee ? (
|
||||
<span className="hidden md:flex items-center gap-1.5 min-w-0 shrink-0">
|
||||
<span className="hidden xl:flex items-center gap-1.5 min-w-0 shrink-0">
|
||||
<ArrowRight size={13} className="shrink-0" style={{ color: "var(--ink-3)" }} aria-hidden />
|
||||
<LedgerUserLink user={payee} compact />
|
||||
</span>
|
||||
@@ -306,7 +474,7 @@ export default function EconomyClient({ stats }: { stats: EconomyStats }) {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4 [&>*]:min-w-0">
|
||||
<AdminChartCard title="签到趋势" hint="近 14 日每日签到人数">
|
||||
{checkinSeries.length === 0 ? (
|
||||
<p className="meta text-center py-16">暂无签到数据</p>
|
||||
@@ -343,48 +511,52 @@ export default function EconomyClient({ stats }: { stats: EconomyStats }) {
|
||||
<NamedPieChart data={postsByType} />
|
||||
)}
|
||||
</AdminChartCard>
|
||||
</div>
|
||||
|
||||
<section className="panel overflow-hidden ledger-feed">
|
||||
<div
|
||||
className="px-5 py-3 flex items-start justify-between gap-3 flex-wrap"
|
||||
style={{ borderBottom: "1px solid var(--line)" }}
|
||||
>
|
||||
<p className="font-medium text-[15px] pt-0.5" style={{ color: "var(--ink)" }}>
|
||||
最近流水
|
||||
<StockOverviewCard stats={stats} />
|
||||
|
||||
<section className="panel overflow-hidden flex flex-col max-h-[420px]">
|
||||
<div
|
||||
className="px-4 py-3 flex items-start justify-between gap-2 flex-wrap"
|
||||
style={{ borderBottom: "1px solid var(--line)" }}
|
||||
>
|
||||
<p className="font-medium text-[15px] pt-0.5" style={{ color: "var(--ink)" }}>
|
||||
最近流水
|
||||
</p>
|
||||
<AdminSegmented
|
||||
size="sm"
|
||||
role="group"
|
||||
ariaLabel="按类型筛选最近流水"
|
||||
options={LEDGER_FILTERS}
|
||||
value={filter}
|
||||
onChange={setFilter}
|
||||
/>
|
||||
</div>
|
||||
<p className="px-4 py-2 text-[12.5px] shrink-0" style={{ borderBottom: "1px solid var(--line)", color: "var(--ink-2)" }}>
|
||||
今日 发放{" "}
|
||||
<span className="tabular-nums font-semibold" style={{ color: "var(--ledger-in)" }}>
|
||||
+{fmt(today.granted)}
|
||||
</span>
|
||||
{" · "}
|
||||
消耗{" "}
|
||||
<span className="tabular-nums font-semibold" style={{ color: "var(--ledger-out)" }}>
|
||||
-{fmt(today.spent)}
|
||||
</span>
|
||||
</p>
|
||||
<AdminSegmented
|
||||
size="sm"
|
||||
role="group"
|
||||
ariaLabel="按类型筛选最近流水"
|
||||
options={LEDGER_FILTERS}
|
||||
value={filter}
|
||||
onChange={setFilter}
|
||||
/>
|
||||
</div>
|
||||
<p className="px-5 py-2 text-[12.5px]" style={{ borderBottom: "1px solid var(--line)", color: "var(--ink-2)" }}>
|
||||
今日 发放{" "}
|
||||
<span className="tabular-nums font-semibold" style={{ color: "var(--ledger-in)" }}>
|
||||
+{fmt(today.granted)}
|
||||
</span>
|
||||
{" · "}
|
||||
消耗{" "}
|
||||
<span className="tabular-nums font-semibold" style={{ color: "var(--ledger-out)" }}>
|
||||
-{fmt(today.spent)}
|
||||
</span>
|
||||
</p>
|
||||
{ledger.length === 0 ? (
|
||||
<p className="meta text-center py-10">暂无流水</p>
|
||||
) : filtered.length === 0 ? (
|
||||
<p className="meta text-center py-10">该分类下暂无流水</p>
|
||||
) : (
|
||||
<ul>
|
||||
{filtered.map((it) => (
|
||||
<RecentLedgerRow key={it.id} it={it} />
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
<div className="flex-1 min-h-0 overflow-y-auto">
|
||||
{ledger.length === 0 ? (
|
||||
<p className="meta text-center py-10">暂无流水</p>
|
||||
) : filtered.length === 0 ? (
|
||||
<p className="meta text-center py-10">该分类下暂无流水</p>
|
||||
) : (
|
||||
<ul>
|
||||
{filtered.map((it) => (
|
||||
<RecentLedgerRow key={it.id} it={it} />
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<p className="meta text-[12.5px] mt-5">
|
||||
用户可在{" "}
|
||||
|
||||
@@ -41,7 +41,7 @@ function FeaturedAnnouncement({ a }: { a: Announcement }) {
|
||||
return (
|
||||
<Link
|
||||
href={`/announcement/${a.id}`}
|
||||
className="block px-5 sm:px-6 pt-5 sm:pt-6 pb-5 transition-colors hover:bg-[var(--accent-soft)] focus-visible:bg-[var(--accent-soft)]"
|
||||
className="block px-5 sm:px-6 pt-5 sm:pt-6 pb-5 transition-colors hover:bg-[var(--panel-2)] focus-visible:bg-[var(--panel-2)]"
|
||||
>
|
||||
<div className="flex items-center gap-2 flex-wrap mb-3">
|
||||
<span
|
||||
@@ -76,7 +76,7 @@ function AnnouncementRow({ a, showDivider }: { a: Announcement; showDivider: boo
|
||||
return (
|
||||
<Link
|
||||
href={`/announcement/${a.id}`}
|
||||
className="block px-5 sm:px-6 py-4 sm:py-5 transition-colors hover:bg-[var(--accent-soft)] focus-visible:bg-[var(--accent-soft)]"
|
||||
className="block px-5 sm:px-6 py-4 sm:py-5 transition-colors hover:bg-[var(--panel-2)] focus-visible:bg-[var(--panel-2)]"
|
||||
style={showDivider ? { borderTop: "1px solid var(--line)" } : undefined}
|
||||
>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
|
||||
@@ -419,7 +419,7 @@ export default function ChatShell({
|
||||
</h1>
|
||||
<button
|
||||
onClick={() => setShowCreate(true)}
|
||||
className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-[var(--accent-soft)] transition-colors"
|
||||
className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-[var(--panel-2)] transition-colors"
|
||||
style={{ color: "var(--accent)" }}
|
||||
aria-label="新建群聊"
|
||||
data-tip="新建群聊"
|
||||
@@ -452,7 +452,7 @@ export default function ChatShell({
|
||||
setQuery("");
|
||||
}}
|
||||
aria-label="清除搜索"
|
||||
className="w-5 h-5 flex items-center justify-center rounded-full hover:bg-[var(--accent-soft)] shrink-0"
|
||||
className="w-5 h-5 flex items-center justify-center rounded-full hover:bg-[var(--panel-2)] shrink-0"
|
||||
style={{ color: "var(--ink-3)" }}
|
||||
>
|
||||
<X size={12} />
|
||||
@@ -484,7 +484,7 @@ export default function ChatShell({
|
||||
<button
|
||||
key={u.id}
|
||||
onClick={() => openDM(u.id)}
|
||||
className="w-full flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-left hover:bg-[var(--accent-soft)] transition-colors"
|
||||
className="w-full flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-left hover:bg-[var(--panel-2)] transition-colors"
|
||||
>
|
||||
<Avatar name={u.nickname || u.username} src={u.avatar || undefined} size={36} />
|
||||
<div className="min-w-0">
|
||||
|
||||
@@ -970,7 +970,7 @@ export default function ChatRoomClient({
|
||||
{embedded && (
|
||||
<Link
|
||||
href="/chat"
|
||||
className="lg:hidden w-8 h-8 flex items-center justify-center rounded-full hover:bg-[var(--accent-soft)]"
|
||||
className="lg:hidden w-8 h-8 flex items-center justify-center rounded-full hover:bg-[var(--panel-2)]"
|
||||
style={{ color: "var(--ink-2)" }}
|
||||
aria-label="返回消息列表"
|
||||
>
|
||||
@@ -1017,7 +1017,7 @@ export default function ChatRoomClient({
|
||||
<button
|
||||
onClick={() => togglePanel("members")}
|
||||
aria-label="成员列表"
|
||||
className="w-9 h-9 flex items-center justify-center rounded-full transition-colors hover:bg-[var(--accent-soft)]"
|
||||
className="w-9 h-9 flex items-center justify-center rounded-full transition-colors hover:bg-[var(--panel-2)]"
|
||||
style={{
|
||||
color: rightPanel === "members" ? "var(--accent)" : "var(--ink-2)",
|
||||
background: rightPanel === "members" ? "var(--accent-soft)" : undefined,
|
||||
@@ -1031,7 +1031,7 @@ export default function ChatRoomClient({
|
||||
<button
|
||||
onClick={() => togglePanel("invite")}
|
||||
aria-label="邀请成员"
|
||||
className="w-9 h-9 flex items-center justify-center rounded-full transition-colors hover:bg-[var(--accent-soft)]"
|
||||
className="w-9 h-9 flex items-center justify-center rounded-full transition-colors hover:bg-[var(--panel-2)]"
|
||||
style={{
|
||||
color: rightPanel === "invite" ? "var(--accent)" : "var(--ink-2)",
|
||||
background: rightPanel === "invite" ? "var(--accent-soft)" : undefined,
|
||||
@@ -1045,7 +1045,7 @@ export default function ChatRoomClient({
|
||||
<button
|
||||
onClick={() => togglePanel("settings")}
|
||||
aria-label="群设置"
|
||||
className="w-9 h-9 flex items-center justify-center rounded-full transition-colors hover:bg-[var(--accent-soft)]"
|
||||
className="w-9 h-9 flex items-center justify-center rounded-full transition-colors hover:bg-[var(--panel-2)]"
|
||||
style={{
|
||||
color: rightPanel === "settings" ? "var(--accent)" : "var(--ink-2)",
|
||||
background: rightPanel === "settings" ? "var(--accent-soft)" : undefined,
|
||||
@@ -1351,7 +1351,7 @@ export default function ChatRoomClient({
|
||||
type="button"
|
||||
onClick={() => setReplyTo(null)}
|
||||
aria-label="取消回复"
|
||||
className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-[var(--accent-soft)]"
|
||||
className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-[var(--panel-2)]"
|
||||
style={{ color: "var(--ink-3)" }}
|
||||
>
|
||||
<X size={13} />
|
||||
@@ -1518,7 +1518,7 @@ export default function ChatRoomClient({
|
||||
type="button"
|
||||
onClick={() => setRightPanel(null)}
|
||||
aria-label="关闭面板"
|
||||
className="w-7 h-7 flex items-center justify-center rounded-full hover:bg-[var(--accent-soft)]"
|
||||
className="w-7 h-7 flex items-center justify-center rounded-full hover:bg-[var(--panel-2)]"
|
||||
style={{ color: "var(--ink-3)" }}
|
||||
>
|
||||
<X size={14} />
|
||||
|
||||
@@ -1,6 +1,13 @@
|
||||
import type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "写新帖",
|
||||
robots: { index: false, follow: false },
|
||||
};
|
||||
|
||||
/**
|
||||
* 发帖路由布局：标记 data-compose-viewport，配合 globals.css
|
||||
* 让舞台占满 main 剩余高度（对齐私信体量，保留页脚）。
|
||||
* 发帖工作台：标记 data-compose-viewport，锁一屏、隐藏页脚，
|
||||
* 把剩余高度全部留给编辑画布。
|
||||
*/
|
||||
export default function ComposeLayout({
|
||||
children,
|
||||
|
||||
@@ -2,8 +2,6 @@
|
||||
|
||||
import { useEffect, useState, Suspense } from "react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { apiMe } from "@/lib/api";
|
||||
import PostComposer from "@/components/PostComposer";
|
||||
|
||||
@@ -30,7 +28,7 @@ function ComposeInner() {
|
||||
|
||||
if (!ready) {
|
||||
return (
|
||||
<div className="j13-compose-stage px-8 py-16 text-center">
|
||||
<div className="j13-compose-stage is-studio px-8 py-16 text-center">
|
||||
<p className="meta">正在准备发帖…</p>
|
||||
</div>
|
||||
);
|
||||
@@ -42,17 +40,9 @@ function ComposeInner() {
|
||||
export default function ComposePage() {
|
||||
return (
|
||||
<div className="j13-compose-page">
|
||||
<nav className="meta -mt-4 sm:-mt-6 mb-1.5 flex items-center gap-1 text-[12.5px] leading-none shrink-0">
|
||||
<Link href="/" className="hover:text-[var(--accent)] transition-colors">
|
||||
首页
|
||||
</Link>
|
||||
<ChevronRight size={13} />
|
||||
<span style={{ color: "var(--ink-2)" }}>发布新帖</span>
|
||||
</nav>
|
||||
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="j13-compose-stage px-8 py-16 text-center">
|
||||
<div className="j13-compose-stage is-studio px-8 py-16 text-center">
|
||||
<p className="meta">正在准备发帖…</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
============================================================ */
|
||||
|
||||
:root {
|
||||
/* 浅色（默认）——冷调石墨：底色微蓝灰，面板纯白浮起，层次干净锐利 */
|
||||
--bg: #f6f7f9;
|
||||
/* 浅色（默认）——中性暖灰底 + 纯白卡片浮起 */
|
||||
--bg: #f7f7f5;
|
||||
--panel: #ffffff;
|
||||
--panel-2: #f2f4f7;
|
||||
--tint: #eceff3;
|
||||
@@ -44,18 +44,34 @@
|
||||
--ledger-typed-bg: #f3e8ff;
|
||||
--ledger-typed-fg: #7e22ce;
|
||||
|
||||
/* 工作台语义：导航选中态 / 榜单奖牌色 */
|
||||
--nav-active-bg: var(--accent-soft);
|
||||
/* 积分存量概览：分段条与健康徽章 */
|
||||
--stock-circ: #07c05f;
|
||||
--stock-spent: #d1d5db;
|
||||
--stock-frozen: #f59e0b;
|
||||
--stock-frozen-stripe: rgba(255, 255, 255, 0.35);
|
||||
--stock-badge-ok-bg: #07c05f;
|
||||
--stock-badge-ok-fg: #ffffff;
|
||||
--stock-badge-hot-bg: #f59e0b;
|
||||
--stock-badge-hot-fg: #ffffff;
|
||||
--stock-badge-low-bg: var(--tint);
|
||||
--stock-badge-low-fg: var(--ink-3);
|
||||
|
||||
/* 工作台语义：选中用描边+文字色指示，底保持面板色，避免品牌色铺底 */
|
||||
--nav-active-bg: var(--panel);
|
||||
--nav-active-ink: var(--accent);
|
||||
--nav-active-line: rgba(59, 91, 219, 0.22);
|
||||
--nav-active-line: rgba(59, 91, 219, 0.38);
|
||||
--rank-1: #96620f;
|
||||
--rank-2: #5d6676;
|
||||
--rank-3: #a05a2c;
|
||||
|
||||
--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
--shadow: 0 2px 8px rgba(16, 24, 40, 0.05), 0 10px 28px rgba(16, 24, 40, 0.06);
|
||||
--shadow-lg: 0 6px 16px rgba(16, 24, 40, 0.08), 0 20px 48px rgba(16, 24, 40, 0.12);
|
||||
|
||||
/* 页面画布：极淡品牌绿光晕 + SVG 噪点（色值集中于此） */
|
||||
--bg-halo: rgba(7, 192, 95, 0.04);
|
||||
--bg-noise-opacity: 0.03;
|
||||
|
||||
/* next/font 构建期自托管，变量由 layout.tsx 注入；
|
||||
本地系统字体仅作网络字体分片就绪前的回退（PingFang/雅黑与 Noto 观感接近） */
|
||||
--font-display: var(--font-jakarta), var(--font-noto-sc), -apple-system,
|
||||
@@ -65,7 +81,7 @@
|
||||
--font-mono: var(--font-jetbrains), var(--font-noto-sc), ui-monospace,
|
||||
"Cascadia Code", Consolas, monospace;
|
||||
|
||||
--r: 18px;
|
||||
--r: 12px;
|
||||
--r-sm: 12px;
|
||||
|
||||
/* 顶栏 68px 条 + 1px 底边；main 桌面 py-9。侧栏 sticky 必须等于
|
||||
@@ -80,8 +96,8 @@
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* 近黑锌灰：面板逐层浮起，靛蓝提亮为长春花蓝 */
|
||||
--bg: #0f1115;
|
||||
/* 近黑暖灰：面板逐层浮起，靛蓝提亮为长春花蓝 */
|
||||
--bg: #101211;
|
||||
--panel: #181b21;
|
||||
--panel-2: #20242c;
|
||||
--tint: #282d37;
|
||||
@@ -117,18 +133,32 @@
|
||||
--ledger-typed-bg: rgba(126, 34, 206, 0.28);
|
||||
--ledger-typed-fg: #e9d5ff;
|
||||
|
||||
/* 工作台语义 */
|
||||
--nav-active-bg: rgba(141, 163, 255, 0.14);
|
||||
--stock-circ: #34d399;
|
||||
--stock-spent: #4b5563;
|
||||
--stock-frozen: #fbbf24;
|
||||
--stock-frozen-stripe: rgba(0, 0, 0, 0.22);
|
||||
--stock-badge-ok-bg: #059669;
|
||||
--stock-badge-ok-fg: #ecfdf5;
|
||||
--stock-badge-hot-bg: #d97706;
|
||||
--stock-badge-hot-fg: #fffbeb;
|
||||
--stock-badge-low-bg: var(--tint);
|
||||
--stock-badge-low-fg: var(--ink-3);
|
||||
|
||||
/* 工作台语义：选中不铺品牌色底 */
|
||||
--nav-active-bg: var(--panel);
|
||||
--nav-active-ink: #a9b8ff;
|
||||
--nav-active-line: rgba(141, 163, 255, 0.3);
|
||||
--nav-active-line: rgba(141, 163, 255, 0.38);
|
||||
--rank-1: #e3bf74;
|
||||
--rank-2: #b9c1cd;
|
||||
--rank-3: #e0a06e;
|
||||
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
--shadow: 0 2px 8px rgba(0, 0, 0, 0.28), 0 12px 32px rgba(0, 0, 0, 0.22);
|
||||
--shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.35), 0 24px 56px rgba(0, 0, 0, 0.3);
|
||||
|
||||
--bg-halo: rgba(7, 192, 95, 0.03);
|
||||
--bg-noise-opacity: 0.04;
|
||||
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
@@ -148,19 +178,14 @@ body {
|
||||
isolation: isolate; /* 让 z-index:-1 的画布层停在内容之下、html 之上 */
|
||||
}
|
||||
|
||||
/* 浏览器最后一层画布：氛围光 + 石墨微粒。
|
||||
纯 CSS（令牌 + 内联 SVG），不跟位图——跟浅/暗/accent 换肤，无限缩放，无额外请求。 */
|
||||
/* 克制画布：fixed 伪元素（不用 background-attachment:fixed，避免移动端掉帧） */
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
radial-gradient(ellipse 80% 52% at 12% -18%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
|
||||
radial-gradient(ellipse 48% 36% at 100% 0%, color-mix(in srgb, var(--ink) 4%, transparent), transparent 58%),
|
||||
radial-gradient(ellipse 42% 28% at 78% 100%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%),
|
||||
linear-gradient(180deg, color-mix(in srgb, var(--panel) 40%, transparent) 0%, transparent 32%);
|
||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, var(--bg-halo), transparent 70%);
|
||||
}
|
||||
|
||||
body::after {
|
||||
@@ -169,23 +194,11 @@ body::after {
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
opacity: 0.032;
|
||||
opacity: var(--bg-noise-opacity);
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
background-size: 160px 160px;
|
||||
}
|
||||
|
||||
.dark body::before {
|
||||
background-image:
|
||||
radial-gradient(ellipse 80% 52% at 12% -18%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
|
||||
radial-gradient(ellipse 48% 36% at 100% 0%, color-mix(in srgb, var(--ink) 6%, transparent), transparent 58%),
|
||||
radial-gradient(ellipse 42% 28% at 78% 100%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
|
||||
linear-gradient(180deg, color-mix(in srgb, var(--panel) 22%, transparent) 0%, transparent 36%);
|
||||
}
|
||||
|
||||
.dark body::after {
|
||||
opacity: 0.05;
|
||||
}
|
||||
|
||||
@media print {
|
||||
body::before,
|
||||
body::after {
|
||||
@@ -399,8 +412,140 @@ body::after {
|
||||
|
||||
.j13-compose-typebar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.j13-compose-typeopt {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 3px 4px 3px 3px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
color: var(--ink);
|
||||
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
|
||||
}
|
||||
.j13-compose-typeopt:hover:not(:has(.j13-compose-typeopt-hit:disabled)) {
|
||||
border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
|
||||
}
|
||||
.j13-compose-typeopt.is-on {
|
||||
background: var(--accent-soft);
|
||||
border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
|
||||
}
|
||||
.j13-compose-typeopt.is-on.is-warn {
|
||||
background: color-mix(in srgb, var(--danger-soft) 70%, var(--panel));
|
||||
border-color: color-mix(in srgb, var(--danger) 36%, var(--line));
|
||||
}
|
||||
.j13-compose-typeopt:has(.j13-compose-typeopt-hit:disabled):not(.is-on) {
|
||||
opacity: 0.45;
|
||||
}
|
||||
.j13-compose-typeopt-hit {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 6px 4px 6px 7px;
|
||||
border: 0;
|
||||
border-radius: 9px;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
}
|
||||
.j13-compose-typeopt-hit:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.j13-compose-typeopt-hit:focus-visible,
|
||||
.j13-compose-typeopt-setup:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.j13-compose-typeopt-ico {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 9px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
background: var(--panel-2);
|
||||
color: var(--ink-2);
|
||||
}
|
||||
.j13-compose-typeopt.is-on .j13-compose-typeopt-ico {
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
}
|
||||
.j13-compose-typeopt.is-on.is-warn .j13-compose-typeopt-ico {
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
}
|
||||
.j13-compose-typeopt-copy {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
padding-top: 1px;
|
||||
}
|
||||
.j13-compose-typeopt-label {
|
||||
display: block;
|
||||
font-size: 13.5px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
color: var(--ink);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.j13-compose-typeopt-hint {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
.j13-compose-typeopt.is-on .j13-compose-typeopt-hint.is-status {
|
||||
color: color-mix(in srgb, var(--accent) 58%, var(--ink-2));
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.j13-compose-typeopt-hint.is-warn {
|
||||
color: var(--danger);
|
||||
font-weight: 650;
|
||||
}
|
||||
.j13-compose-typeopt-setup {
|
||||
flex-shrink: 0;
|
||||
height: 26px;
|
||||
padding: 0 9px;
|
||||
margin-right: 2px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
|
||||
background: color-mix(in srgb, var(--accent-soft) 80%, var(--panel));
|
||||
color: var(--accent);
|
||||
font-size: 11.5px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
.j13-compose-typeopt-setup:hover {
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.j13-compose-typeopt-setup.is-warn {
|
||||
border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
|
||||
background: color-mix(in srgb, var(--danger-soft) 85%, var(--panel));
|
||||
color: var(--danger);
|
||||
}
|
||||
.j13-compose-typeopt-setup.is-warn:hover {
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
border-color: var(--danger);
|
||||
}
|
||||
.dark .j13-compose-typeopt.is-on.is-warn .j13-compose-typeopt-ico,
|
||||
.dark .j13-compose-typeopt-setup.is-warn:hover {
|
||||
color: #1a0c0b;
|
||||
}
|
||||
.j13-compose-typechip {
|
||||
height: 34px;
|
||||
@@ -468,9 +613,15 @@ body::after {
|
||||
width: 6.5rem;
|
||||
}
|
||||
.j13-lottery-prize-table .col-actions {
|
||||
width: 4.5rem;
|
||||
width: 5.25rem;
|
||||
text-align: right;
|
||||
}
|
||||
.j13-lottery-prize-table .col-actions > span {
|
||||
display: inline-flex;
|
||||
}
|
||||
.j13-lottery-prize-table .col-actions .btn:disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
.j13-lottery-prize-table .j13-compose-field {
|
||||
width: 100%;
|
||||
padding: 7px 10px;
|
||||
@@ -1513,19 +1664,18 @@ body::after {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
height: 2.5rem;
|
||||
min-height: 2.5rem;
|
||||
padding: 0 12px;
|
||||
min-height: 3.25rem;
|
||||
padding: 8px 10px 8px 8px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
color: var(--ink);
|
||||
text-align: left;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.15s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.j13-board-trigger:hover:not(:disabled) {
|
||||
border-color: color-mix(in srgb, var(--line-2) 40%, var(--line));
|
||||
border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
|
||||
}
|
||||
.j13-board-trigger:focus { outline: none; }
|
||||
.j13-board-trigger:focus-visible,
|
||||
@@ -1538,17 +1688,62 @@ body::after {
|
||||
opacity: 0.65;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.j13-board-trigger.is-empty {
|
||||
border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
.j13-board-trigger.is-empty .j13-board-trigger-hint {
|
||||
color: var(--accent);
|
||||
font-weight: 650;
|
||||
}
|
||||
.j13-board-trigger-copy {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.j13-board-trigger-name {
|
||||
display: block;
|
||||
font-size: 13.5px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.j13-board-trigger-hint {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.35;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
.j13-board-trigger-ico {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 7px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 9px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.j13-board-trigger-ico.is-placeholder {
|
||||
background: var(--panel-2);
|
||||
color: var(--ink-3);
|
||||
}
|
||||
.j13-board-option .j13-board-trigger-ico {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 7px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.j13-compose-req {
|
||||
margin-left: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--accent);
|
||||
vertical-align: 0.05em;
|
||||
}
|
||||
.j13-board-menu {
|
||||
position: absolute;
|
||||
z-index: 40;
|
||||
@@ -1856,36 +2051,6 @@ body::after {
|
||||
min-height: 0;
|
||||
gap: 0;
|
||||
}
|
||||
.j13-md-panes.is-split {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@media (min-width: 960px) {
|
||||
.j13-md-panes.is-split {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
}
|
||||
.j13-md-panes.is-split .j13-md-write-wrap {
|
||||
border-right: 1px solid var(--line);
|
||||
padding-right: 1rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
.j13-md-panes.is-split .j13-md-preview {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
/* 窄屏双栏：上下分栏仍同时显示 */
|
||||
@media (max-width: 959px) {
|
||||
.j13-md-panes.is-split {
|
||||
grid-template-rows: minmax(220px, 1fr) minmax(220px, 1fr);
|
||||
gap: 0;
|
||||
}
|
||||
.j13-md-panes.is-split .j13-md-write-wrap {
|
||||
border-bottom: 1px solid var(--line);
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
.j13-md-panes.is-split .j13-md-preview {
|
||||
padding-top: 0.35rem;
|
||||
}
|
||||
}
|
||||
.j13-md-panes > [hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -2363,14 +2528,23 @@ a.j13-att-cta:hover {
|
||||
}
|
||||
|
||||
|
||||
/* 发帖/编辑：占满 main 剩余高度，减少卡片下方空余（保留页脚） */
|
||||
/* 发帖/编辑工作台：锁一屏、隐藏页脚，高度全部给编辑画布 */
|
||||
body:has([data-compose-viewport]) {
|
||||
height: 100dvh;
|
||||
max-height: 100dvh;
|
||||
overflow: hidden;
|
||||
}
|
||||
body:has([data-compose-viewport]) > footer {
|
||||
display: none;
|
||||
}
|
||||
body:has([data-compose-viewport]) #main {
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
/* 略收紧上下边距，把高度留给舞台 */
|
||||
padding-top: 1.15rem;
|
||||
padding-bottom: 1.15rem;
|
||||
padding-top: 0.55rem;
|
||||
padding-bottom: 0.55rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
body:has([data-compose-viewport]) #main > [data-compose-viewport] {
|
||||
flex: 1 1 auto;
|
||||
@@ -2379,6 +2553,283 @@ body:has([data-compose-viewport]) #main > [data-compose-viewport] {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* 发帖工作台：左画布 + 右设置栏（窄屏设置收入抽屉） */
|
||||
.j13-compose-stage.is-studio {
|
||||
overflow: hidden;
|
||||
}
|
||||
.j13-compose-stage.is-studio:not(:has(.j13-compose-studio)) {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.j13-compose-stage.is-studio .j13-compose-toolbar {
|
||||
position: relative;
|
||||
top: auto;
|
||||
z-index: 8;
|
||||
padding: 0.7rem 1rem 0.7rem 0.85rem;
|
||||
background: var(--panel);
|
||||
border-radius: var(--r) var(--r) 0 0;
|
||||
}
|
||||
.j13-compose-toolbar-lead {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.j13-compose-toolbar-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.j13-compose-toolbar-sub {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.3;
|
||||
color: var(--ink-3);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.j13-compose-back {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
color: var(--ink-2);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.12s ease, color 0.12s ease;
|
||||
}
|
||||
.j13-compose-back:hover,
|
||||
.j13-compose-back:focus-visible {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
}
|
||||
.j13-compose-toolbar-hint {
|
||||
font-size: 12px;
|
||||
color: var(--ink-3);
|
||||
max-width: 14rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.j13-compose-rail-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
.j13-compose-rail-toggle-count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 1.15rem;
|
||||
height: 1.15rem;
|
||||
padding: 0 0.3rem;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
.j13-compose-draft {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding: 0.7rem 1.1rem;
|
||||
font-size: 13px;
|
||||
color: var(--ink);
|
||||
background: var(--accent-soft);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
|
||||
}
|
||||
.j13-compose-banner-error {
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
.j13-compose-studio {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-rows: minmax(0, 1fr);
|
||||
position: relative;
|
||||
}
|
||||
.j13-compose-studio-canvas {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.2rem 1.15rem 0.7rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.j13-compose-title-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.j13-compose-title-count {
|
||||
font-size: 12px;
|
||||
color: var(--ink-3);
|
||||
padding-bottom: 0.8rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.j13-compose-stage.is-studio .j13-compose-canvas,
|
||||
.j13-compose-stage.is-studio .j13-md-editor {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.j13-compose-stage.is-studio .j13-md-textarea,
|
||||
.j13-compose-stage.is-studio .j13-md-preview {
|
||||
min-height: 0;
|
||||
}
|
||||
.j13-compose-rail-backdrop {
|
||||
display: none;
|
||||
}
|
||||
.j13-compose-studio-rail {
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.15rem;
|
||||
padding: 1rem 1.05rem 1.35rem;
|
||||
overflow-y: auto;
|
||||
background: color-mix(in srgb, var(--bg) 62%, var(--panel));
|
||||
border-left: 1px solid var(--line);
|
||||
}
|
||||
.j13-compose-rail-head {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
margin: -0.15rem 0 0.15rem;
|
||||
}
|
||||
.j13-compose-rail-head-title {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
}
|
||||
.j13-compose-rail-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.7rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.j13-compose-studio-rail .j13-compose-meta {
|
||||
flex-direction: column;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
.j13-compose-studio-rail .j13-compose-meta-board,
|
||||
.j13-compose-studio-rail .j13-compose-meta-tags {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
flex: none;
|
||||
}
|
||||
.j13-compose-studio-rail .j13-compose-typebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.j13-compose-studio-rail .j13-compose-section {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
.j13-compose-studio-rail .j13-compose-drop {
|
||||
min-height: 5.5rem;
|
||||
padding: 0.8rem 0.7rem;
|
||||
}
|
||||
.j13-compose-studio-rail .j13-compose-drop-lead {
|
||||
font-size: 13px;
|
||||
}
|
||||
.j13-compose-studio-rail .j13-compose-typepanel {
|
||||
padding: 0.85rem 0.9rem;
|
||||
}
|
||||
.j13-compose-typemodal-body {
|
||||
max-height: min(78vh, 42rem);
|
||||
overflow-y: auto;
|
||||
padding-right: 2px;
|
||||
}
|
||||
.j13-compose-typemodal-body .j13-compose-typepanel {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@media (max-width: 1279px) {
|
||||
.j13-compose-rail-backdrop {
|
||||
display: block;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 69;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: color-mix(in srgb, var(--ink) 28%, transparent);
|
||||
}
|
||||
.j13-compose-studio-rail {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
width: min(100%, 24.5rem);
|
||||
z-index: 70;
|
||||
border-left: 1px solid var(--line);
|
||||
box-shadow: var(--shadow-lg);
|
||||
transform: translateX(100%);
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition: transform 0.22s ease, visibility 0.22s ease;
|
||||
}
|
||||
.j13-compose-studio-rail.is-open {
|
||||
transform: translateX(0);
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.j13-compose-rail-head {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.j13-compose-studio {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(18.5rem, 21.5rem);
|
||||
}
|
||||
.j13-compose-studio-canvas {
|
||||
padding: 0.25rem 1.5rem 0.85rem 1.6rem;
|
||||
}
|
||||
.j13-compose-rail-toggle {
|
||||
display: none;
|
||||
}
|
||||
.j13-compose-rail-head {
|
||||
display: none;
|
||||
}
|
||||
.j13-compose-rail-backdrop {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.j13-compose-toolbar-hint {
|
||||
display: none;
|
||||
}
|
||||
.j13-compose-studio-canvas {
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 聊天页：整页锁在视口内，避免「页面滚动 + 对话区滚动」双滚动条 */
|
||||
body:has([data-chat-viewport]) {
|
||||
height: 100dvh;
|
||||
@@ -2717,6 +3168,15 @@ h1, h2, h3, h4 {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* skip-link / 点击主栏空白会聚焦 #main（tabIndex=-1）。
|
||||
本文件 :focus-visible 未分层，会压过 Tailwind .outline-none，画出整栏主题色描边。 */
|
||||
#main:focus,
|
||||
#main:focus-visible,
|
||||
.admin-canvas:focus,
|
||||
.admin-canvas:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 消息侧栏搜索：单层描边，避免外框 + focus-visible 双线 */
|
||||
.j13-chat-search:focus-within {
|
||||
border-color: var(--accent) !important;
|
||||
@@ -3135,9 +3595,6 @@ a.j13-mention-token:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.ledger-feed {
|
||||
max-width: 1000px;
|
||||
}
|
||||
.ledger-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -3204,6 +3661,71 @@ a.j13-mention-token:hover {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* 积分存量概览 */
|
||||
.stock-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 160px;
|
||||
padding: 20px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.stock-card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.stock-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.stock-badge.is-low {
|
||||
background: var(--stock-badge-low-bg);
|
||||
color: var(--stock-badge-low-fg);
|
||||
}
|
||||
.stock-badge.is-ok {
|
||||
background: var(--stock-badge-ok-bg);
|
||||
color: var(--stock-badge-ok-fg);
|
||||
}
|
||||
.stock-badge.is-hot {
|
||||
background: var(--stock-badge-hot-bg);
|
||||
color: var(--stock-badge-hot-fg);
|
||||
}
|
||||
.stock-bar {
|
||||
display: flex;
|
||||
height: 10px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: var(--tint);
|
||||
}
|
||||
.stock-bar-seg {
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.stock-bar-seg.is-circ {
|
||||
background: var(--stock-circ);
|
||||
}
|
||||
.stock-bar-seg.is-spent {
|
||||
background: var(--stock-spent);
|
||||
}
|
||||
.stock-bar-seg.is-frozen {
|
||||
background-color: var(--stock-frozen);
|
||||
background-image: repeating-linear-gradient(
|
||||
-45deg,
|
||||
var(--stock-frozen-stripe) 0 3px,
|
||||
transparent 3px 7px
|
||||
);
|
||||
}
|
||||
|
||||
.admin-toolbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -4303,9 +4825,9 @@ a.j13-mention-token:hover {
|
||||
background: var(--panel-2);
|
||||
}
|
||||
.j13-tab[aria-selected="true"] {
|
||||
background: var(--accent-soft);
|
||||
border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
|
||||
color: var(--accent);
|
||||
background: var(--nav-active-bg);
|
||||
border-color: var(--nav-active-line);
|
||||
color: var(--nav-active-ink);
|
||||
font-weight: 600;
|
||||
}
|
||||
.j13-tab:active {
|
||||
@@ -4341,7 +4863,7 @@ a.j13-mention-token:hover {
|
||||
}
|
||||
.j13-raillink:hover,
|
||||
.j13-raillink:focus-visible {
|
||||
background: var(--accent-soft);
|
||||
background: var(--panel-2);
|
||||
color: var(--ink);
|
||||
}
|
||||
.j13-raillink[aria-current="page"],
|
||||
@@ -4367,7 +4889,7 @@ a.j13-mention-token:hover {
|
||||
transition: border-color 0.16s ease, background 0.16s ease;
|
||||
}
|
||||
.j13-bcard:hover {
|
||||
border-color: var(--nav-active-line);
|
||||
border-color: var(--line-2);
|
||||
background: var(--panel-2);
|
||||
}
|
||||
.j13-bcard:focus-visible {
|
||||
@@ -4450,8 +4972,8 @@ a.j13-mention-token:hover {
|
||||
}
|
||||
.j13-about-item:hover,
|
||||
.j13-about-item:focus-visible {
|
||||
background: var(--accent-soft);
|
||||
border-color: var(--nav-active-line);
|
||||
background: var(--panel);
|
||||
border-color: var(--line-2);
|
||||
}
|
||||
.j13-about-ico {
|
||||
width: 30px;
|
||||
@@ -4741,9 +5263,9 @@ a.j13-mention-token:hover {
|
||||
}
|
||||
.j13-chip:hover,
|
||||
.j13-chip:focus-visible {
|
||||
background: var(--accent-soft);
|
||||
border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
|
||||
color: var(--accent);
|
||||
background: var(--panel-2);
|
||||
border-color: var(--line-2);
|
||||
color: var(--ink);
|
||||
}
|
||||
.j13-chip[aria-current="page"],
|
||||
.j13-chip[aria-current="page"]:hover,
|
||||
@@ -4791,7 +5313,7 @@ a.j13-mention-token:hover {
|
||||
.j13-toc-link:hover,
|
||||
.j13-toc-link:focus-visible {
|
||||
color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
background: var(--panel-2);
|
||||
}
|
||||
.j13-toc-link.is-active,
|
||||
.j13-toc-link.is-active:hover,
|
||||
@@ -4799,7 +5321,7 @@ a.j13-mention-token:hover {
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
border-left-color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -83,6 +83,8 @@ export default async function RootLayout({
|
||||
const settings = await getPublicSettingsCached();
|
||||
const accent = settings.accent;
|
||||
const accentCSS = accentStyleCSS(accent || "");
|
||||
const customCSS = (settings.custom_css || "").trim();
|
||||
const customJS = (settings.custom_js || "").trim();
|
||||
const motionCfg = motionConfigFromSettings(settings);
|
||||
const motionHtmlClass = [
|
||||
!motionCfg.ui_animations ? "j13-reduce-motion" : "",
|
||||
@@ -117,6 +119,13 @@ export default async function RootLayout({
|
||||
dangerouslySetInnerHTML={{ __html: accentCSS }}
|
||||
/>
|
||||
) : null}
|
||||
{customCSS ? (
|
||||
<style
|
||||
id="j13-custom-css"
|
||||
data-custom-css-source="ssr"
|
||||
dangerouslySetInnerHTML={{ __html: customCSS }}
|
||||
/>
|
||||
) : null}
|
||||
<a href="#main" className="skip-link">
|
||||
跳到主要内容
|
||||
</a>
|
||||
@@ -147,9 +156,12 @@ export default async function RootLayout({
|
||||
<Toaster />
|
||||
<TipHost />
|
||||
<AccountGuard />
|
||||
<ThemeSync initialAccent={accent || ""} />
|
||||
<ThemeSync initialAccent={accent || ""} initialCustomCSS={customCSS} />
|
||||
<VisitBeacon />
|
||||
<RealtimeProvider userId={user ? user.id : null} />
|
||||
{customJS ? (
|
||||
<script id="j13-custom-js" dangerouslySetInnerHTML={{ __html: customJS }} />
|
||||
) : null}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@@ -103,7 +103,7 @@ export default function NotificationsClient({ initialData }: { initialData: Noti
|
||||
<button
|
||||
key={n.id}
|
||||
onClick={() => handleClick(n)}
|
||||
className={`w-full text-left px-4 sm:px-5 py-4 flex items-start gap-3.5 transition-colors hover:bg-[var(--accent-soft)] focus-visible:bg-[var(--accent-soft)] ${
|
||||
className={`w-full text-left px-4 sm:px-5 py-4 flex items-start gap-3.5 transition-colors hover:bg-[var(--panel-2)] focus-visible:bg-[var(--panel-2)] ${
|
||||
n.is_read ? "" : "bg-[var(--panel-2)]"
|
||||
}`}
|
||||
style={{
|
||||
|
||||
22
frontend/app/post/[id]/edit/layout.tsx
Normal file
22
frontend/app/post/[id]/edit/layout.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "编辑帖子",
|
||||
robots: { index: false, follow: false },
|
||||
};
|
||||
|
||||
/** 编辑帖与发帖共用工作台视口（锁一屏、隐藏页脚） */
|
||||
export default function EditPostLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-compose-viewport
|
||||
className="flex flex-col flex-1 min-h-0 w-full"
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,5 @@
|
||||
import { cookies } from "next/headers";
|
||||
import { notFound, redirect } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { authCookieHeader } from "@/lib/cookies";
|
||||
import { getMeCached } from "@/lib/serverData";
|
||||
import { fetchPostDetail } from "@/lib/api";
|
||||
@@ -35,25 +33,7 @@ export default async function EditPostPage({ params }: PageProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
data-compose-viewport
|
||||
className="j13-compose-page w-full"
|
||||
>
|
||||
<nav className="meta -mt-4 sm:-mt-6 mb-1.5 flex items-center gap-1 flex-wrap text-[12.5px] leading-none shrink-0">
|
||||
<Link href="/" className="hover:text-[var(--accent)] transition-colors">
|
||||
首页
|
||||
</Link>
|
||||
<ChevronRight size={13} />
|
||||
<Link
|
||||
href={`/post/${post.id}`}
|
||||
className="hover:text-[var(--accent)] transition-colors truncate max-w-[12rem]"
|
||||
>
|
||||
帖子详情
|
||||
</Link>
|
||||
<ChevronRight size={13} />
|
||||
<span style={{ color: "var(--ink-2)" }}>编辑</span>
|
||||
</nav>
|
||||
|
||||
<div className="j13-compose-page w-full">
|
||||
<EditPostClient
|
||||
postId={post.id}
|
||||
initialTitle={post.title}
|
||||
|
||||
@@ -236,7 +236,7 @@ function AuthorPosts({ posts }: { posts: PostListItem[] }) {
|
||||
<Link
|
||||
href={`/post/${p.id}`}
|
||||
data-tip={p.title}
|
||||
className="block rounded-[10px] px-2 py-2 transition-colors hover:bg-[var(--accent-soft)] focus-visible:bg-[var(--accent-soft)]"
|
||||
className="block rounded-[10px] px-2 py-2 transition-colors hover:bg-[var(--panel-2)] focus-visible:bg-[var(--panel-2)]"
|
||||
>
|
||||
<span
|
||||
className="block text-[13px] leading-snug line-clamp-2"
|
||||
|
||||
Reference in New Issue
Block a user