From 08646c07602a069bbd2ad69607e2e8122d408bae Mon Sep 17 00:00:00 2001 From: Haitao Pan Date: Fri, 20 Mar 2026 21:07:57 +0800 Subject: [PATCH] feat(ui): align shared console chrome with calm compact workspace system --- src/app/globals.css | 146 +++++++++++--------- src/app/panel/components/Header.tsx | 26 ++-- src/app/panel/components/Sidebar.tsx | 2 +- src/app/panel/layout.tsx | 18 +-- src/components/Footer.tsx | 14 +- src/components/UnifiedNavigation.tsx | 12 +- src/components/download/DownloadSummary.tsx | 22 +-- src/components/public/PublicPageShell.tsx | 14 +- src/components/theme/dark.ts | 94 ++++++------- src/components/theme/designTokens.ts | 48 ++++--- src/components/theme/light.ts | 86 ++++++------ 11 files changed, 248 insertions(+), 234 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 28dd959..f873d6f 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -6,82 +6,92 @@ @tailwind utilities; :root { - --font-geist-sans: "Geist", sans-serif; - --font-geist-mono: "Geist Mono", monospace; + --font-geist-sans: + -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", + "Segoe UI", sans-serif; + --font-geist-mono: + "SFMono-Regular", "SF Mono", ui-monospace, "Cascadia Code", Consolas, + monospace; --font-editorial-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif; - --app-shell-nav-offset: 5.5rem; + --app-shell-nav-offset: 4.75rem; /* Light theme defaults */ - --color-background: #f5f5f7; - --color-background-muted: #ececef; + --color-background: #f8f9fa; + --color-background-muted: #f2f5f8; --color-surface: #ffffff; - --color-surface-elevated: rgba(255, 255, 255, 0.96); - --color-surface-translucent: rgba(255, 255, 255, 0.92); - --color-surface-muted: #f3f4f6; - --color-surface-hover: #f7f8fb; - --color-surface-border: #e5e7eb; - --color-surface-border-strong: #d1d5db; - --color-text: #0d0d0d; - --color-heading: #111827; - --color-text-muted: #4b5563; - --color-text-subtle: #6b7280; + --color-surface-elevated: rgba(255, 255, 255, 0.94); + --color-surface-translucent: rgba(255, 255, 255, 0.88); + --color-surface-muted: #f2f5f8; + --color-surface-hover: #edf2f7; + --color-surface-border: rgba(166, 180, 200, 0.18); + --color-surface-border-strong: rgba(166, 180, 200, 0.28); + --color-text: #1c1b1f; + --color-heading: #1c1b1f; + --color-text-muted: #667085; + --color-text-subtle: #98a1b2; --color-text-inverse: #f8fbff; - --color-primary: #4c8bf5; - --color-primary-hover: #5d97f6; - --color-primary-muted: #edf3ff; - --color-primary-border: #d7e5ff; + --color-primary: #0058bd; + --color-primary-hover: #0b4f9a; + --color-primary-muted: #e8f0fb; + --color-primary-border: #d7e4f7; --color-primary-foreground: #ffffff; - --color-accent: #335fd4; - --color-accent-muted: #e7edff; - --color-accent-foreground: #1b3477; + --color-accent: #5b8def; + --color-accent-muted: #e8f0fb; + --color-accent-foreground: #23446c; --color-success: #16a34a; --color-success-muted: #dcfce7; --color-success-foreground: #166534; - --color-warning: #f59e0b; - --color-warning-muted: #fef3c7; - --color-warning-foreground: #92400e; - --color-danger: #ef4444; + --color-warning: #8f4a00; + --color-warning-muted: #fff3cd; + --color-warning-foreground: #664d03; + --color-danger: #c3655c; --color-danger-muted: #fee2e2; --color-danger-foreground: #7f1d1d; - --color-info: #3366ff; - --color-info-muted: #f0f4ff; - --color-info-foreground: #254edb; - --color-overlay: rgba(17, 24, 39, 0.42); - --color-ring: #d6e0ff; - --color-focus: rgba(51, 102, 255, 0.35); - --color-divider: rgba(17, 24, 39, 0.08); - --color-badge-surface: #e5e7eb; - --color-badge-muted: #f3f4f6; - --color-badge-foreground: #1f2937; + --color-info: #5b8def; + --color-info-muted: #e8f0fb; + --color-info-foreground: #23446c; + --color-overlay: rgba(28, 27, 31, 0.28); + --color-ring: #d7e4f7; + --color-focus: rgba(0, 88, 189, 0.18); + --color-divider: rgba(28, 27, 31, 0.08); + --color-badge-surface: #e9eef4; + --color-badge-muted: #f2f5f8; + --color-badge-foreground: #49454f; - --gradient-app-from: #fafafa; - --gradient-app-via: #f4f5f7; - --gradient-app-to: #f7f7f8; - --gradient-primary-from: #4c8bf5; - --gradient-primary-to: #335fd4; + --gradient-app-from: #f8f9fa; + --gradient-app-via: #f3f6f9; + --gradient-app-to: #eef2f6; + --gradient-primary-from: #0058bd; + --gradient-primary-to: #5b8def; --shadow-sm: - 0 1px 2px rgba(17, 24, 39, 0.05), 0 3px 10px rgba(17, 24, 39, 0.04); - --shadow-md: 0 8px 24px rgba(17, 24, 39, 0.08), 0 2px 6px rgba(17, 24, 39, 0.06); + 0 1px 2px rgba(90, 108, 132, 0.06), + 0 6px 18px rgba(90, 108, 132, 0.05); + --shadow-md: + 0 12px 30px rgba(90, 108, 132, 0.08), + 0 2px 6px rgba(90, 108, 132, 0.05); --shadow-soft: - 0 1px 2px rgba(17, 24, 39, 0.04), 0 8px 20px rgba(17, 24, 39, 0.05); - --shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.10), 0 4px 12px rgba(17, 24, 39, 0.08); + 0 1px 2px rgba(90, 108, 132, 0.04), + 0 10px 26px rgba(90, 108, 132, 0.05); + --shadow-lg: + 0 18px 44px rgba(90, 108, 132, 0.1), + 0 4px 12px rgba(90, 108, 132, 0.06); - --radius-lg: 0.75rem; - --radius-xl: 1rem; + --radius-lg: 0.375rem; + --radius-xl: 0.5rem; --radius-pill: 999px; - --type-body-size: 1rem; - --type-body-line-height: 1.5; - --type-sidebar-size: 0.875rem; - --type-sidebar-line-height: 1.5; + --type-body-size: 0.8125rem; + --type-body-line-height: 1.1538; + --type-sidebar-size: 0.8125rem; + --type-sidebar-line-height: 1.1538; --type-meta-size: 0.75rem; - --type-meta-line-height: 1.4; - --type-heading-1-size: 1.75rem; - --type-heading-2-size: 1.5rem; - --type-heading-3-size: 1.25rem; - --type-heading-line-height: 1.25; + --type-meta-line-height: 1.3334; + --type-heading-1-size: 1.5rem; + --type-heading-2-size: 1.25rem; + --type-heading-3-size: 0.8125rem; + --type-heading-line-height: 1.1667; } html { @@ -97,10 +107,10 @@ body { background-image: radial-gradient( circle at top left, - rgba(76, 139, 245, 0.08), - transparent 26% + rgba(91, 141, 239, 0.08), + transparent 24% ), - linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0)); + linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); color: var(--color-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; @@ -136,7 +146,7 @@ button { color: var(--color-heading); font-weight: 600; line-height: var(--type-heading-line-height); - letter-spacing: -0.02em; + letter-spacing: -0.03em; } h1 { @@ -164,14 +174,14 @@ button { @layer components { .tactile-button { display: inline-flex; - min-height: 40px; + min-height: 32px; align-items: center; justify-content: center; gap: 0.5rem; - border-radius: 12px; + border-radius: 8px; border: 1px solid transparent; - padding: 0.625rem 1rem; - font-size: 0.875rem; + padding: 0.45rem 0.8rem; + font-size: 0.8125rem; font-weight: 600; line-height: 1; transition: @@ -197,13 +207,13 @@ button { .tactile-button-soft { border-color: var(--color-surface-border); - background: #f1f1f3; + background: rgba(255, 255, 255, 0.88); color: var(--color-text); box-shadow: var(--shadow-soft); } .tactile-button-soft:hover { - background: #e5e5ea; + background: var(--color-surface-hover); } .tactile-button-primary { @@ -218,12 +228,12 @@ button { .tactile-button-subtle { border-color: var(--color-surface-border); - background: rgba(255, 255, 255, 0.84); + background: rgba(255, 255, 255, 0.72); color: var(--color-text-subtle); } .tactile-control { - border-radius: 12px; + border-radius: 8px; border: 1px solid var(--color-surface-border); background: rgba(255, 255, 255, 0.88); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); diff --git a/src/app/panel/components/Header.tsx b/src/app/panel/components/Header.tsx index 7986c63..9a996e7 100644 --- a/src/app/panel/components/Header.tsx +++ b/src/app/panel/components/Header.tsx @@ -155,10 +155,10 @@ export default function Header({ }; return ( -
+
{assumeStatus.isAssuming ? ( -
-
+
+
{language === "zh" ? `当前处于 Assume: ${assumeStatus.target || "sandbox@svc.plus"}（只读视角）` : `Assuming: ${assumeStatus.target || "sandbox@svc.plus"} (read-only view)`} @@ -167,7 +167,7 @@ export default function Header({ type="button" onClick={() => void handleRevertAssume()} disabled={assumeBusy} - className="tactile-button tactile-button-subtle min-h-9 px-3 text-[var(--color-warning-foreground)] disabled:opacity-60" + className="tactile-button tactile-button-subtle min-h-8 px-3 text-[var(--color-warning-foreground)] disabled:opacity-60" > {assumeBusy ? language === "zh" @@ -179,13 +179,13 @@ export default function Header({
) : ( -
+
{isRoot ? (
)} -
+
@@ -132,26 +132,26 @@ export default function PanelLayout({ href={copy.actions.docsUrl} target="_blank" rel="noreferrer" - className="tactile-button tactile-button-soft border border-[color:var(--color-primary-border)] px-3 text-sm text-[var(--color-primary)]" + className="tactile-button tactile-button-soft border border-[color:var(--color-primary-border)] px-3 text-[13px] text-[var(--color-primary)]" > {copy.actions.docs} {isLoading ? ( - + … ) : null}
) : null} -
+
{children}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 4ee84b5..a9600b8 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -36,8 +36,8 @@ export default function Footer() { }; const footerClassName = isDark - ? "border-white/10 bg-[linear-gradient(135deg,rgba(15,23,42,0.95),rgba(30,41,59,0.92))] text-slate-300 shadow-[0_24px_60px_rgba(15,23,42,0.16)]" - : "border-slate-200/90 bg-[linear-gradient(135deg,rgba(255,255,255,0.96),rgba(244,247,252,0.95))] text-slate-600 shadow-[0_24px_60px_rgba(148,163,184,0.18)]"; + ? "border-[color:var(--color-surface-border)] bg-[linear-gradient(135deg,rgba(23,28,40,0.96),rgba(30,36,51,0.94))] text-[var(--color-text-muted)] shadow-[var(--shadow-md)]" + : "border-[color:var(--color-surface-border)] bg-[linear-gradient(135deg,rgba(255,255,255,0.96),rgba(242,245,248,0.95))] text-[var(--color-text-muted)] shadow-[var(--shadow-md)]"; const linkClassName = isDark ? "transition-colors hover:text-white" : "transition-colors hover:text-slate-950"; @@ -54,7 +54,7 @@ export default function Footer() { return (