polish(frontend): 侧栏与徽章可读性,智能悬停提示

降权全站字重;优化右栏公告/数据块;类型状态徽章用固定浅色区分;TipHost 仅在文案不一致、非文字或省略时显示。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-09-16 03:54:14 +08:00
parent b9ba8cb8c9
commit 5507552ca5
28 changed files with 482 additions and 268 deletions

View File

@@ -101,7 +101,7 @@ export default function AppearanceAdmin({ initialAccent }: { initialAccent: stri
{/* 预设色板 */}
<section className="j13-module p-5 sm:p-6 mb-5">
<h2 className="text-[15px] font-extrabold mb-1" style={{ color: "var(--ink)" }}>
<h2 className="text-[15px] font-semibold mb-1" style={{ color: "var(--ink)" }}>
预设主题色
</h2>
<p className="meta text-[12.5px] mb-4">浅/暗两套色板均已调校,保证文字对比度达标</p>
@@ -139,7 +139,7 @@ export default function AppearanceAdmin({ initialAccent }: { initialAccent: stri
)}
</span>
<span
className="text-[12px] font-bold leading-none"
className="text-[12px] leading-none"
style={{ color: active ? "var(--accent)" : "var(--ink-2)" }}
>
{p.name}
@@ -152,7 +152,7 @@ export default function AppearanceAdmin({ initialAccent }: { initialAccent: stri
{/* 自定义颜色 */}
<section className="j13-module p-5 sm:p-6 mb-5">
<h2 className="text-[15px] font-extrabold mb-1 flex items-center gap-1.5" style={{ color: "var(--ink)" }}>
<h2 className="text-[15px] font-semibold mb-1 flex items-center gap-1.5" style={{ color: "var(--ink)" }}>
<Pipette size={15} /> 自定义颜色
</h2>
<p className="meta text-[12.5px] mb-4">
@@ -220,14 +220,14 @@ export default function AppearanceAdmin({ initialAccent }: { initialAccent: stri
{/* 实时预览(整页已实时换肤,此处展示典型组件) */}
<section className="j13-module p-5 sm:p-6 mb-6">
<h2 className="text-[15px] font-extrabold mb-4" style={{ color: "var(--ink)" }}>实时预览</h2>
<h2 className="text-[15px] font-semibold mb-4" style={{ color: "var(--ink)" }}>实时预览</h2>
<div className="rounded-[var(--r-sm)] border p-4 space-y-4" 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">
<Save size={14} /> 主按钮
</button>
<button type="button" className="btn btn-line btn-sm">次要按钮</button>
<a className="text-[13px] font-bold" style={{ color: "var(--accent)" }} href="#preview" onClick={(e) => e.preventDefault()}>
<a className="text-[13px]" style={{ color: "var(--accent)" }} href="#preview" onClick={(e) => e.preventDefault()}>
文字链接示例
</a>
</div>
@@ -235,7 +235,7 @@ export default function AppearanceAdmin({ initialAccent }: { initialAccent: stri
<span className="j13-tab" aria-selected="false">未选中</span>
<span className="j13-tab" aria-selected="true">选中标签</span>
<span
className="inline-flex items-center rounded-full px-3.5 py-2 text-[13.5px] font-semibold"
className="inline-flex items-center rounded-full px-3.5 py-2 text-[13.5px]"
style={{ background: "var(--nav-active-bg)", color: "var(--nav-active-ink)" }}
>
导航选中态
@@ -246,7 +246,7 @@ export default function AppearanceAdmin({ initialAccent }: { initialAccent: stri
<span className="j13-bcard-ico" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}>
<Palette size={16} />
</span>
<span className="j13-bcard-name text-[13px] font-bold flex-1">选中的板块卡片</span>
<span className="j13-bcard-name text-[13px] flex-1">选中的板块卡片</span>
</div>
</div>
</div>