feat: 更新嵌入式文件系统逻辑，支持路径清理和静态资源请求处理，增强前端主题切换能力

atsf_server/web/components/feedback/empty-state.tsx

@@ -5,8 +5,8 @@ interface EmptyStateProps {
 
 export function EmptyState({ title, description }: EmptyStateProps) {
   return (
-    <div className='rounded-2xl border border-dashed border-white/10 bg-white/5 px-5 py-6 text-sm'>
-      <p className='text-base font-semibold text-white'>{title}</p>
+    <div className='rounded-2xl border border-dashed border-[var(--border-default)] bg-[var(--surface-muted)] px-5 py-6 text-sm'>
+      <p className='text-base font-semibold text-[var(--foreground-primary)]'>{title}</p>
       <p className='mt-2 leading-6 text-[var(--foreground-secondary)]'>{description}</p>
     </div>
   );

atsf_server/web/components/feedback/error-state.tsx

@@ -5,9 +5,9 @@ interface ErrorStateProps {
 
 export function ErrorState({ title, description }: ErrorStateProps) {
   return (
-    <div className='rounded-2xl border border-rose-400/20 bg-rose-500/10 px-5 py-6 text-sm'>
-      <p className='text-base font-semibold text-rose-100'>{title}</p>
-      <p className='mt-2 leading-6 text-rose-100/80'>{description}</p>
+    <div className='rounded-2xl border border-[var(--status-danger-border)] bg-[var(--status-danger-soft)] px-5 py-6 text-sm'>
+      <p className='text-base font-semibold text-[var(--status-danger-foreground)]'>{title}</p>
+      <p className='mt-2 leading-6 text-[var(--status-danger-foreground)]/80'>{description}</p>
     </div>
   );
 }

atsf_server/web/components/feedback/feature-placeholder.tsx

@@ -21,7 +21,7 @@ export function FeaturePlaceholder({
       <ul className='space-y-3 text-sm leading-6 text-[var(--foreground-secondary)]'>
         {milestones.map((item) => (
           <li key={item} className='flex gap-3'>
-            <span className='mt-2 h-2 w-2 shrink-0 rounded-full bg-sky-400' />
+            <span className='mt-2 h-2 w-2 shrink-0 rounded-full bg-[var(--brand-primary)]' />
             <span>{item}</span>
           </li>
         ))}

atsf_server/web/components/feedback/loading-state.tsx

@@ -7,9 +7,9 @@ interface LoadingStateProps {
 export function LoadingState({ className }: LoadingStateProps) {
   return (
     <div className={cn('space-y-3', className)}>
-      <div className='h-4 w-32 animate-pulse rounded bg-white/10' />
-      <div className='h-24 animate-pulse rounded-2xl bg-white/5' />
-      <div className='h-24 animate-pulse rounded-2xl bg-white/5' />
+      <div className='h-4 w-32 animate-pulse rounded bg-[var(--control-background-hover)]' />
+      <div className='h-24 animate-pulse rounded-2xl bg-[var(--surface-muted)]' />
+      <div className='h-24 animate-pulse rounded-2xl bg-[var(--surface-muted)]' />
     </div>
   );
 }

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

@@ -21,13 +21,13 @@ export function DashboardSidebar() {
       )}
     >
       <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'>
+        <div className='flex items-center gap-3 rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] px-3 py-3'>
+          <div className='flex h-11 w-11 items-center justify-center rounded-2xl bg-[var(--brand-primary-soft)] text-lg font-semibold text-[var(--brand-primary)]'>
             AF
           </div>
           {!isSidebarCollapsed ? (
             <div>
-              <p className='text-sm font-semibold text-white'>ATSFlare</p>
+              <p className='text-sm font-semibold text-[var(--foreground-primary)]'>ATSFlare</p>
               <p className='text-xs text-[var(--foreground-secondary)]'>控制面新版工程</p>
             </div>
           ) : null}
@@ -44,11 +44,11 @@ export function DashboardSidebar() {
                 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',
+                    ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                    : 'border-transparent text-[var(--foreground-secondary)] hover:border-[var(--border-default)] hover:bg-[var(--surface-muted)] hover:text-[var(--foreground-primary)]',
                 )}
               >
-                <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'>
+                <span className='mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-[var(--control-background)] text-xs font-semibold'>
                   {item.shortLabel.slice(0, 1)}
                 </span>
                 {!isSidebarCollapsed ? (
@@ -65,7 +65,7 @@ export function DashboardSidebar() {
         </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'>
+          <div className='rounded-2xl border border-[var(--status-success-border)] bg-[var(--status-success-soft)] px-4 py-4 text-xs leading-6 text-[var(--status-success-foreground)]'>
             阶段 1 已完成目录骨架、静态导出与基础布局初始化。
           </div>
         ) : null}

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { ThemeToggle } from '@/components/ui/theme-toggle';
 import { getCurrentNavigationItem } from '@/lib/utils/navigation';
 import { publicEnv } from '@/lib/env/public-env';
 import { useAppShellStore } from '@/store/app-shell';
@@ -18,20 +19,21 @@ export function DashboardTopbar() {
           <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'
+            className='inline-flex h-11 w-11 items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] text-lg text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]'
             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'>
+            <h2 className='text-lg font-semibold text-[var(--foreground-primary)]'>
               {currentItem?.label ?? 'ATSFlare 控制台'}
             </h2>
           </div>
         </div>
 
         <div className='flex items-center gap-3 text-sm text-[var(--foreground-secondary)]'>
+          <ThemeToggle />
           <span className='rounded-full border border-[var(--border-default)] px-3 py-1.5'>
             静态导出模式
           </span>

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

@@ -6,9 +6,9 @@ interface PageHeaderProps {
 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>
+      <p className='text-sm font-medium uppercase tracking-[0.24em] text-[var(--brand-primary)]'>ATSFlare</p>
       <div className='space-y-2'>
-        <h1 className='text-3xl font-semibold tracking-tight text-white'>{title}</h1>
+        <h1 className='text-3xl font-semibold tracking-tight text-[var(--foreground-primary)]'>{title}</h1>
         <p className='max-w-3xl text-sm leading-7 text-[var(--foreground-secondary)]'>
           {description}
         </p>

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

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import type { ReactNode } from 'react';
 
+import { ThemeToggle } from '@/components/ui/theme-toggle';
 import { publicEnv } from '@/lib/env/public-env';
 
 interface PublicShellProps {
@@ -13,13 +14,14 @@ export function PublicShell({ children }: PublicShellProps) {
       <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='text-sm font-medium uppercase tracking-[0.24em] text-[var(--brand-primary)]'>ATSFlare</p>
+            <h1 className='mt-2 text-3xl font-semibold text-[var(--foreground-primary)]'>管理端改造进行中</h1>
             <p className='mt-2 text-sm leading-6 text-[var(--foreground-secondary)]'>
               认证流程将在阶段 2 接入。当前页面用于承载入口骨架与路由占位。
             </p>
           </div>
-          <div className='text-sm text-[var(--foreground-secondary)]'>
+          <div className='flex flex-col items-start gap-3 text-sm text-[var(--foreground-secondary)] md:items-end'>
+            <ThemeToggle />
             <span className='rounded-full border border-[var(--border-default)] px-3 py-1.5'>
               {publicEnv.appVersion}
             </span>
@@ -29,7 +31,7 @@ export function PublicShell({ children }: PublicShellProps) {
         <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 href='/' className='text-[var(--brand-primary)] transition hover:opacity-80'>
             返回新版总览
           </Link>
         </div>

atsf_server/web/components/providers/app-providers.tsx

@@ -3,6 +3,8 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { type ReactNode, useState } from 'react';
 
+import { ThemeProvider } from '@/components/providers/theme-provider';
+
 interface AppProvidersProps {
   children: ReactNode;
 }
@@ -24,5 +26,9 @@ export function AppProviders({ children }: AppProvidersProps) {
       }),
   );
 
-  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+  return (
+    <ThemeProvider>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </ThemeProvider>
+  );
 }

atsf_server/web/components/providers/theme-provider.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+import {
+  isThemeMode,
+  resolveTheme,
+  THEME_MEDIA_QUERY,
+  THEME_STORAGE_KEY,
+  type ResolvedTheme,
+  type ThemeMode,
+} from '@/lib/theme/theme';
+
+interface ThemeContextValue {
+  themeMode: ThemeMode;
+  resolvedTheme: ResolvedTheme;
+  setThemeMode: (mode: ThemeMode) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+interface ThemeProviderProps {
+  children: ReactNode;
+}
+
+function getSystemPreference() {
+  return window.matchMedia(THEME_MEDIA_QUERY).matches;
+}
+
+function applyTheme(mode: ThemeMode) {
+  const resolvedTheme = resolveTheme(mode, getSystemPreference());
+  const root = document.documentElement;
+
+  root.dataset.themeMode = mode;
+  root.dataset.theme = resolvedTheme;
+  root.style.colorScheme = resolvedTheme;
+  window.localStorage.setItem(THEME_STORAGE_KEY, mode);
+
+  return resolvedTheme;
+}
+
+export function ThemeProvider({ children }: ThemeProviderProps) {
+  const [themeMode, setThemeModeState] = useState<ThemeMode>('system');
+  const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>('dark');
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const domThemeMode = root.dataset.themeMode;
+    const nextThemeMode = isThemeMode(domThemeMode) ? domThemeMode : 'system';
+    const nextResolvedTheme = applyTheme(nextThemeMode);
+
+    setThemeModeState(nextThemeMode);
+    setResolvedTheme(nextResolvedTheme);
+  }, []);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(THEME_MEDIA_QUERY);
+
+    const handleChange = () => {
+      if (themeMode !== 'system') {
+        return;
+      }
+
+      setResolvedTheme(applyTheme('system'));
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, [themeMode]);
+
+  const setThemeMode = useCallback((mode: ThemeMode) => {
+    setThemeModeState(mode);
+    setResolvedTheme(applyTheme(mode));
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      themeMode,
+      resolvedTheme,
+      setThemeMode,
+    }),
+    [resolvedTheme, setThemeMode, themeMode],
+  );
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+
+  if (!context) {
+    throw new Error('useTheme must be used within ThemeProvider');
+  }
+
+  return context;
+}

atsf_server/web/components/ui/app-card.tsx

@@ -27,7 +27,7 @@ export function AppCard({
       {(title || description || action) && (
         <header className='flex flex-col gap-3 border-b border-[var(--border-default)] px-6 py-5 md:flex-row md:items-start md:justify-between'>
           <div className='space-y-1'>
-            {title ? <h2 className='text-lg font-semibold text-white'>{title}</h2> : null}
+            {title ? <h2 className='text-lg font-semibold text-[var(--foreground-primary)]'>{title}</h2> : null}
             {description ? (
               <p className='text-sm leading-6 text-[var(--foreground-secondary)]'>{description}</p>
             ) : null}

atsf_server/web/components/ui/status-badge.tsx

@@ -1,10 +1,14 @@
 import { cn } from '@/lib/utils/cn';
 
 const variantClasses = {
-  success: 'border-emerald-400/25 bg-emerald-500/15 text-emerald-200',
-  warning: 'border-amber-400/25 bg-amber-500/15 text-amber-200',
-  danger: 'border-rose-400/25 bg-rose-500/15 text-rose-200',
-  info: 'border-sky-400/25 bg-sky-500/15 text-sky-200',
+  success:
+    'border-[var(--status-success-border)] bg-[var(--status-success-soft)] text-[var(--status-success-foreground)]',
+  warning:
+    'border-[var(--status-warning-border)] bg-[var(--status-warning-soft)] text-[var(--status-warning-foreground)]',
+  danger:
+    'border-[var(--status-danger-border)] bg-[var(--status-danger-soft)] text-[var(--status-danger-foreground)]',
+  info:
+    'border-[var(--status-info-border)] bg-[var(--status-info-soft)] text-[var(--status-info-foreground)]',
 } as const;
 
 interface StatusBadgeProps {

atsf_server/web/components/ui/theme-toggle.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { cn } from '@/lib/utils/cn';
+import type { ThemeMode } from '@/lib/theme/theme';
+import { useTheme } from '@/components/providers/theme-provider';
+
+const themeOptions: Array<{ value: ThemeMode; label: string }> = [
+  { value: 'light', label: '浅色' },
+  { value: 'system', label: '跟随系统' },
+  { value: 'dark', label: '深色' },
+];
+
+interface ThemeToggleProps {
+  className?: string;
+}
+
+export function ThemeToggle({ className }: ThemeToggleProps) {
+  const { themeMode, resolvedTheme, setThemeMode } = useTheme();
+
+  return (
+    <div
+      className={cn(
+        'inline-flex items-center gap-1 rounded-full border border-[var(--border-default)] bg-[var(--control-background)] p-1 text-xs text-[var(--foreground-secondary)]',
+        className,
+      )}
+      aria-label='主题切换'
+    >
+      {themeOptions.map((option) => {
+        const active = themeMode === option.value;
+
+        return (
+          <button
+            key={option.value}
+            type='button'
+            onClick={() => setThemeMode(option.value)}
+            className={cn(
+              'rounded-full px-3 py-1.5 transition-colors',
+              active
+                ? 'bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                : 'hover:bg-[var(--control-background-hover)] hover:text-[var(--foreground-primary)]',
+            )}
+            aria-pressed={active}
+            title={
+              option.value === 'system'
+                ? `当前跟随系统（${resolvedTheme === 'dark' ? '深色' : '浅色'}）`
+                : `切换到${option.label}`
+            }
+          >
+            {option.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}