cayden/auto-virtual-tryon-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: tighten dashboard shell density

Browse Source
This commit is contained in:
afei A
2026-03-28 00:14:00 +08:00
parent ded6555dbc
commit 4ca3ef96b9
4 changed files with 30 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/globals.css
View File

@@ -1,6 +1,7 @@
@import "tailwindcss";
:root {
--app-bg: #f6f1e8;
--bg-canvas: #f6f1e8;
--bg-canvas-strong: #efe5d7;
--bg-elevated: rgba(255, 250, 243, 0.86);
@@ -23,6 +24,9 @@
--border-strong: rgba(82, 71, 57, 0.24);
--shadow-shell: 0 28px 80px rgba(47, 38, 28, 0.12);
--shadow-card: 0 18px 40px rgba(62, 46, 27, 0.08);
--page-gap: 16px;
--panel-radius: 14px;
--control-height: 38px;
--font-sans:
"Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
sans-serif;

20
src/components/layout/dashboard-shell.tsx
View File

@@ -9,38 +9,38 @@ type DashboardShellProps = {
export function DashboardShell({ children }: DashboardShellProps) {
return (
<div className="min-h-screen bg-transparent px-4 py-5 text-[var(--ink)] md:h-screen md:overflow-hidden md:px-6 md:py-6">
<div className="mx-auto grid max-w-7xl gap-4 rounded-[32px] border border-[var(--border-soft)] bg-[var(--bg-elevated)] p-3 shadow-[var(--shadow-shell)] backdrop-blur md:h-full md:grid-cols-[280px_minmax(0,1fr)] md:p-4">
<div className="min-h-screen bg-transparent px-3 py-3 text-[var(--ink)] md:h-screen md:overflow-hidden md:px-4 md:py-4">
<div className="grid min-h-[calc(100vh-1.5rem)] gap-3 rounded-[18px] border border-[var(--border-soft)] bg-[var(--bg-elevated)] p-2 shadow-[var(--shadow-shell)] backdrop-blur md:h-full md:min-h-0 md:grid-cols-[228px_minmax(0,1fr)] md:p-3">
<aside
aria-label="Dashboard rail"
className="flex rounded-[28px] border border-[var(--shell-border)] bg-[var(--shell)] p-6 text-white md:h-full"
className="flex rounded-[16px] border border-[var(--shell-border)] bg-[var(--shell)] p-4 text-white md:h-full md:w-[228px]"
>
<div className="flex min-h-full w-full flex-col">
<div>
<p className="font-[var(--font-mono)] text-[11px] uppercase tracking-[0.3em] text-white/48">
Auto Tryon Ops
</p>
<h1 className="mt-4 text-2xl font-semibold tracking-[-0.03em] text-white">
<h1 className="mt-3 text-xl font-semibold tracking-[-0.03em] text-white">
运营控制台
</h1>
<p className="mt-3 max-w-[18rem] text-sm leading-6 text-white/66">
<p className="mt-2 max-w-[15rem] text-sm leading-6 text-white/66">
保持订单、审核与流程追踪在同一套高密度暖色界面里完成。
</p>
</div>
<nav className="mt-8 space-y-1" aria-label="Primary Navigation">
<nav className="mt-6 space-y-1" aria-label="Primary Navigation">
{primaryNavItems.map((item) => (
<Link
key={item.href}
href={item.href}
className="flex items-center justify-between rounded-[18px] border border-transparent px-3.5 py-3 text-sm text-white/80 transition hover:border-white/8 hover:bg-white/7 hover:text-white"
className="flex items-center justify-between rounded-[12px] border border-transparent px-3 py-2.5 text-sm text-white/80 transition hover:border-white/8 hover:bg-white/7 hover:text-white"
>
<span>{item.label}</span>
</Link>
))}
</nav>
<div className="mt-auto rounded-[24px] border border-white/8 bg-white/6 p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]">
<div className="mt-auto rounded-[14px] border border-white/8 bg-white/6 p-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]">
<p className="font-[var(--font-mono)] text-[11px] uppercase tracking-[0.24em] text-white/44">
Shared shell
</p>
@@ -52,9 +52,9 @@ export function DashboardShell({ children }: DashboardShellProps) {
</aside>
<main
aria-label="Dashboard content"
className="overflow-hidden rounded-[28px] border border-[var(--border-soft)] bg-[var(--surface)] shadow-[inset_0_1px_0_rgba(255,255,255,0.32)] md:h-full md:min-h-0 md:overflow-y-auto"
className="overflow-hidden rounded-[16px] border border-[var(--border-soft)] bg-[var(--surface)] shadow-[inset_0_1px_0_rgba(255,255,255,0.32)] md:h-full md:min-h-0 md:overflow-y-auto"
>
<div className="px-5 py-6 md:px-8 md:py-8">{children}</div>
<div className="px-4 py-5 md:px-6 md:py-6">{children}</div>
</main>
</div>
</div>

14
src/components/ui/page-header.tsx
View File

@@ -16,24 +16,24 @@ export function PageHeader({
title,
}: PageHeaderProps) {
return (
<div className="flex flex-col gap-5 border-b border-[var(--border-soft)] pb-6 md:flex-row md:items-end md:justify-between">
<div className="space-y-3">
<p className="font-[var(--font-mono)] text-[11px] uppercase tracking-[0.26em] text-[var(--ink-faint)]">
<div className="flex flex-col gap-4 border-b border-[var(--border-soft)] pb-4 md:flex-row md:items-start md:justify-between">
<div className="space-y-2">
<p className="font-[var(--font-mono)] text-[11px] uppercase tracking-[0.24em] text-[var(--ink-faint)]">
{eyebrow}
</p>
<div className="space-y-2">
<h1 className="text-3xl font-semibold tracking-[-0.03em] text-[var(--ink-strong)]">
<div className="space-y-1">
<h1 className="text-2xl font-semibold tracking-[-0.03em] text-[var(--ink-strong)]">
{title}
</h1>
{description ? (
<div className="max-w-3xl text-sm leading-7 text-[var(--ink-muted)]">
<div className="max-w-3xl text-sm leading-6 text-[var(--ink-muted)]">
{description}
</div>
) : null}
</div>
</div>
{actions || meta ? (
<div className="flex flex-col gap-3 md:items-end">
<div className="flex flex-col gap-2 md:items-end">
{meta ? (
<div className="font-[var(--font-mono)] text-xs uppercase tracking-[0.18em] text-[var(--ink-faint)]">
{meta}

9
tests/ui/dashboard-shell.test.tsx
View File

@@ -68,6 +68,15 @@ test("locks the rail to the viewport and makes the content pane independently sc
expect(main).toHaveClass("md:h-full", "md:overflow-y-auto");
});
test("uses a narrow desktop rail and removes the max-width shell cap", () => {
const { container } = render(<DashboardShell>dashboard body</DashboardShell>);
const shellFrame = container.firstElementChild;
const rail = screen.getByRole("complementary", { name: "Dashboard rail" });
expect(shellFrame).not.toHaveClass("max-w-7xl");
expect(rail.className).toContain("md:w-[228px]");
});
test("redirects the root page to orders", () => {
HomePage();