[重构] 前端改造v1

atsf_server/web/components/layout/dashboard-shell.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+
+import { DashboardSidebar } from '@/components/layout/dashboard-sidebar';
+import { DashboardTopbar } from '@/components/layout/dashboard-topbar';
+
+interface DashboardShellProps {
+  children: ReactNode;
+}
+
+export function DashboardShell({ children }: DashboardShellProps) {
+  return (
+    <div className='flex min-h-screen bg-transparent text-[var(--foreground-primary)]'>
+      <DashboardSidebar />
+      <div className='flex min-w-0 flex-1 flex-col'>
+        <DashboardTopbar />
+        <main className='flex-1 px-4 py-6 md:px-8 md:py-8'>{children}</main>
+      </div>
+    </div>
+  );
+}

atsf_server/web/components/layout/dashboard-sidebar.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import { dashboardNavigation } from '@/lib/constants/navigation';
+import { cn } from '@/lib/utils/cn';
+import { isPathActive } from '@/lib/utils/navigation';
+import { useAppShellStore } from '@/store/app-shell';
+
+export function DashboardSidebar() {
+  const pathname = usePathname();
+  const currentPath = pathname ?? '/';
+  const isSidebarCollapsed = useAppShellStore((state) => state.isSidebarCollapsed);
+
+  return (
+    <aside
+      className={cn(
+        'sticky top-0 hidden h-screen shrink-0 border-r border-[var(--border-default)] bg-[var(--surface-panel)]/95 px-3 py-6 backdrop-blur lg:block',
+        isSidebarCollapsed ? 'w-24' : 'w-72',
+      )}
+    >
+      <div className='flex h-full flex-col gap-6'>
+        <div className='flex items-center gap-3 rounded-2xl border border-[var(--border-default)] bg-white/5 px-3 py-3'>
+          <div className='flex h-11 w-11 items-center justify-center rounded-2xl bg-sky-400/15 text-lg font-semibold text-sky-200'>
+            AF
+          </div>
+          {!isSidebarCollapsed ? (
+            <div>
+              <p className='text-sm font-semibold text-white'>ATSFlare</p>
+              <p className='text-xs text-[var(--foreground-secondary)]'>控制面新版工程</p>
+            </div>
+          ) : null}
+        </div>
+
+        <nav className='flex-1 space-y-2'>
+          {dashboardNavigation.map((item) => {
+          const active = isPathActive(currentPath, item.href);
+
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  'flex items-start gap-3 rounded-2xl border px-3 py-3 transition-colors',
+                  active
+                    ? 'border-sky-300/30 bg-sky-400/10 text-white'
+                    : 'border-transparent text-[var(--foreground-secondary)] hover:border-[var(--border-default)] hover:bg-white/5 hover:text-white',
+                )}
+              >
+                <span className='mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-white/5 text-xs font-semibold'>
+                  {item.shortLabel.slice(0, 1)}
+                </span>
+                {!isSidebarCollapsed ? (
+                  <span className='min-w-0'>
+                    <span className='block text-sm font-medium'>{item.label}</span>
+                    <span className='mt-1 block text-xs leading-5 text-inherit/80'>
+                      {item.description}
+                    </span>
+                  </span>
+                ) : null}
+              </Link>
+            );
+          })}
+        </nav>
+
+        {!isSidebarCollapsed ? (
+          <div className='rounded-2xl border border-emerald-400/15 bg-emerald-500/10 px-4 py-4 text-xs leading-6 text-emerald-100/90'>
+            阶段 1 已完成目录骨架、静态导出与基础布局初始化。
+          </div>
+        ) : null}
+      </div>
+    </aside>
+  );
+}

atsf_server/web/components/layout/dashboard-topbar.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { getCurrentNavigationItem } from '@/lib/utils/navigation';
+import { publicEnv } from '@/lib/env/public-env';
+import { useAppShellStore } from '@/store/app-shell';
+import { usePathname } from 'next/navigation';
+
+export function DashboardTopbar() {
+  const pathname = usePathname();
+  const currentPath = pathname ?? '/';
+  const toggleSidebar = useAppShellStore((state) => state.toggleSidebar);
+  const currentItem = getCurrentNavigationItem(currentPath);
+
+  return (
+    <header className='sticky top-0 z-10 border-b border-[var(--border-default)] bg-[var(--surface-panel)]/75 px-4 py-4 backdrop-blur md:px-8'>
+      <div className='flex flex-col gap-4 md:flex-row md:items-center md:justify-between'>
+        <div className='flex items-center gap-3'>
+          <button
+            type='button'
+            onClick={toggleSidebar}
+            className='inline-flex h-11 w-11 items-center justify-center rounded-2xl border border-[var(--border-default)] bg-white/5 text-lg text-white transition hover:bg-white/10'
+            aria-label='切换侧边栏'
+          >
+            ≡
+          </button>
+          <div>
+            <p className='text-xs uppercase tracking-[0.24em] text-[var(--foreground-secondary)]'>当前模块</p>
+            <h2 className='text-lg font-semibold text-white'>
+              {currentItem?.label ?? 'ATSFlare 控制台'}
+            </h2>
+          </div>
+        </div>
+
+        <div className='flex items-center gap-3 text-sm text-[var(--foreground-secondary)]'>
+          <span className='rounded-full border border-[var(--border-default)] px-3 py-1.5'>
+            静态导出模式
+          </span>
+          <span className='rounded-full border border-[var(--border-default)] px-3 py-1.5'>
+            版本 {publicEnv.appVersion}
+          </span>
+        </div>
+      </div>
+    </header>
+  );
+}

atsf_server/web/components/layout/page-header.tsx

@@ -0,0 +1,18 @@
+interface PageHeaderProps {
+  title: string;
+  description: string;
+}
+
+export function PageHeader({ title, description }: PageHeaderProps) {
+  return (
+    <div className='space-y-3'>
+      <p className='text-sm font-medium uppercase tracking-[0.24em] text-sky-300'>ATSFlare</p>
+      <div className='space-y-2'>
+        <h1 className='text-3xl font-semibold tracking-tight text-white'>{title}</h1>
+        <p className='max-w-3xl text-sm leading-7 text-[var(--foreground-secondary)]'>
+          {description}
+        </p>
+      </div>
+    </div>
+  );
+}

atsf_server/web/components/layout/public-shell.tsx

@@ -0,0 +1,39 @@
+import Link from 'next/link';
+import type { ReactNode } from 'react';
+
+import { publicEnv } from '@/lib/env/public-env';
+
+interface PublicShellProps {
+  children: ReactNode;
+}
+
+export function PublicShell({ children }: PublicShellProps) {
+  return (
+    <div className='flex min-h-screen items-center justify-center px-4 py-12'>
+      <div className='w-full max-w-3xl rounded-[var(--radius-xl)] border border-[var(--border-default)] bg-[var(--surface-panel)]/85 p-8 shadow-[var(--shadow-soft)] backdrop-blur'>
+        <div className='mb-8 flex flex-col gap-4 border-b border-[var(--border-default)] pb-6 md:flex-row md:items-end md:justify-between'>
+          <div>
+            <p className='text-sm font-medium uppercase tracking-[0.24em] text-sky-300'>ATSFlare</p>
+            <h1 className='mt-2 text-3xl font-semibold text-white'>管理端改造进行中</h1>
+            <p className='mt-2 text-sm leading-6 text-[var(--foreground-secondary)]'>
+              认证流程将在阶段 2 接入。当前页面用于承载入口骨架与路由占位。
+            </p>
+          </div>
+          <div className='text-sm text-[var(--foreground-secondary)]'>
+            <span className='rounded-full border border-[var(--border-default)] px-3 py-1.5'>
+              {publicEnv.appVersion}
+            </span>
+          </div>
+        </div>
+
+        <div className='space-y-6'>{children}</div>
+
+        <div className='mt-8 border-t border-[var(--border-default)] pt-6 text-sm text-[var(--foreground-secondary)]'>
+          <Link href='/' className='text-sky-300 transition hover:text-sky-200'>
+            返回新版总览
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}