[优化] 改名

openflare_server/web/.eslintrc.json

@@ -0,0 +1,12 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"],
+  "ignorePatterns": [
+    ".next",
+    "build",
+    "out",
+    "coverage",
+    "playwright-report",
+    "test-results",
+    "src"
+  ]
+}

openflare_server/web/.gitignore

@@ -0,0 +1,31 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# build outputs
+/.next
+/out
+/build
+/coverage
+/playwright-report
+/test-results
+
+# local env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# misc
+.DS_Store
+.idea
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+package-lock.json
+yarn.lock
+
+*.db
+/tsconfig.tsbuildinfo

openflare_server/web/README.md

@@ -0,0 +1,45 @@
+# OpenFlare Web
+
+OpenFlare 管理端新版前端已切换为 Next.js App Router + TypeScript + Tailwind CSS 工程。
+
+## 常用命令
+
+```shell
+corepack enable
+pnpm install
+
+# 本地开发（3001 前端同源代理后端 HTTP/WS）
+pnpm dev
+
+# 生产模式启动
+pnpm start
+
+# 类型检查
+pnpm typecheck
+
+# 代码检查
+pnpm lint
+
+# 单元测试
+pnpm test
+
+# 生成静态构建产物到 build/
+pnpm build
+```
+
+## 构建说明
+
+* 构建采用 Next.js 静态导出模式。
+* `pnpm build` 会先生成 `out/`，随后自动复制为 Go Server 兼容的 `build/` 目录。
+* 默认 API Base URL 为 `/api`，如需覆盖可在构建时设置 `NEXT_PUBLIC_API_BASE_URL`。
+* 构建版本号可通过 `NEXT_PUBLIC_APP_VERSION` 注入，例如 `NEXT_PUBLIC_APP_VERSION=v0.4.0 pnpm build`。
+* `pnpm dev` 会以开发模式启动 `http://127.0.0.1:3001`，并通过同源代理把 `/api/*` 的 HTTP 与 WebSocket 请求统一转发到 `NEXT_DEV_BACKEND_URL`，默认是 `http://127.0.0.1:3000`。
+* `pnpm start` 用于启动已构建产物，对应 Next 生产模式。
+
+## 目录约定
+
+* `app/`：路由与布局
+* `features/`：业务模块
+* `components/`：复用组件
+* `lib/`：请求、环境变量、工具与常量
+* `tests/`：测试代码

openflare_server/web/app/(dashboard)/access-log/page.tsx

@@ -0,0 +1,5 @@
+import { AccessLogsPage } from '@/features/access-logs/components/access-logs-page';
+
+export default function AccessLogsRoute() {
+  return <AccessLogsPage />;
+}

openflare_server/web/app/(dashboard)/apply-log/page.tsx

@@ -0,0 +1,5 @@
+import { ApplyLogsPage as ApplyLogsFeaturePage } from '@/features/apply-logs/components/apply-logs-page';
+
+export default function ApplyLogsPage() {
+  return <ApplyLogsFeaturePage />;
+}

openflare_server/web/app/(dashboard)/config-version/page.tsx

@@ -0,0 +1,5 @@
+import { ConfigVersionsPage } from '@/features/config-versions/components/config-versions-page';
+
+export default function ConfigVersionsRoute() {
+  return <ConfigVersionsPage />;
+}

openflare_server/web/app/(dashboard)/layout.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+
+import { DashboardShell } from '@/components/layout/dashboard-shell';
+import { DashboardAuthGuard } from '@/features/auth/components/dashboard-auth-guard';
+
+interface DashboardLayoutProps {
+  children: ReactNode;
+}
+
+export default function DashboardLayout({ children }: DashboardLayoutProps) {
+  return (
+    <DashboardAuthGuard>
+      <DashboardShell>{children}</DashboardShell>
+    </DashboardAuthGuard>
+  );
+}

openflare_server/web/app/(dashboard)/node/detail/page.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+
+import { NodeDetailPage } from '@/features/nodes/components/node-detail-page';
+
+export default function NodeDetailRoute() {
+  const searchParams = useSearchParams();
+
+  return <NodeDetailPage nodeId={searchParams.get('id') ?? ''} />;
+}

openflare_server/web/app/(dashboard)/node/page.tsx

@@ -0,0 +1,5 @@
+import { NodesPage } from '@/features/nodes/components/nodes-page';
+
+export default function NodesRoute() {
+  return <NodesPage />;
+}

openflare_server/web/app/(dashboard)/page.tsx

@@ -0,0 +1,9 @@
+import { DashboardOverview } from '@/features/dashboard/components/dashboard-overview';
+
+export default function DashboardPage() {
+  return (
+    <div className='space-y-6'>
+      <DashboardOverview />
+    </div>
+  );
+}

openflare_server/web/app/(dashboard)/performance/page.tsx

@@ -0,0 +1,5 @@
+import { PerformancePage } from '@/features/performance/components/performance-page';
+
+export default function PerformanceRoute() {
+  return <PerformancePage />;
+}

openflare_server/web/app/(dashboard)/proxy-route/page.tsx

@@ -0,0 +1,5 @@
+import { ProxyRoutesPage } from '@/features/proxy-routes/components/proxy-routes-page';
+
+export default function ProxyRoutesRoute() {
+  return <ProxyRoutesPage />;
+}

openflare_server/web/app/(dashboard)/setting/page.tsx

@@ -0,0 +1,5 @@
+import { SettingsPage } from '@/features/settings/components/settings-page';
+
+export default function SettingsRoute() {
+  return <SettingsPage />;
+}

openflare_server/web/app/(dashboard)/user/page.tsx

@@ -0,0 +1,5 @@
+import { UsersPage } from '@/features/users/components/users-page';
+
+export default function UsersRoute() {
+  return <UsersPage />;
+}

openflare_server/web/app/(dashboard)/website/certificate/page.tsx

@@ -0,0 +1,5 @@
+import { TlsCertificatesPage } from '@/features/tls-certificates/components/tls-certificates-page';
+
+export default function WebsiteCertificateRoute() {
+  return <TlsCertificatesPage />;
+}

openflare_server/web/app/(dashboard)/website/detail/page.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+
+import { WebsiteDetailPage } from '@/features/websites/components/website-detail-page';
+
+export default function WebsiteDetailRoute() {
+  const searchParams = useSearchParams();
+
+  return <WebsiteDetailPage websiteId={searchParams.get('id') ?? ''} />;
+}

openflare_server/web/app/(dashboard)/website/page.tsx

@@ -0,0 +1,5 @@
+import { WebsitesPage } from '@/features/websites/components/websites-page';
+
+export default function WebsiteRoute() {
+  return <WebsitesPage />;
+}

openflare_server/web/app/(public)/about/page.tsx

@@ -0,0 +1,5 @@
+import { AboutPage } from '@/features/about/components/about-page';
+
+export default function AboutRoute() {
+  return <AboutPage />;
+}

openflare_server/web/app/(public)/layout.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+
+import { PublicShell } from '@/components/layout/public-shell';
+
+interface PublicLayoutProps {
+  children: ReactNode;
+}
+
+export default function PublicLayout({ children }: PublicLayoutProps) {
+  return <PublicShell>{children}</PublicShell>;
+}

openflare_server/web/app/(public)/login/page.tsx

@@ -0,0 +1,12 @@
+import { Suspense } from 'react';
+
+import { LoadingState } from '@/components/feedback/loading-state';
+import { LoginForm } from '@/features/auth/components/login-form';
+
+export default function LoginPage() {
+  return (
+    <Suspense fallback={<LoadingState />}>
+      <LoginForm />
+    </Suspense>
+  );
+}

openflare_server/web/app/(public)/oauth/github/page.tsx

@@ -0,0 +1,12 @@
+import { Suspense } from 'react';
+
+import { LoadingState } from '@/components/feedback/loading-state';
+import { GitHubOAuthCallback } from '@/features/auth/components/github-oauth-callback';
+
+export default function GithubOAuthPage() {
+  return (
+    <Suspense fallback={<LoadingState />}>
+      <GitHubOAuthCallback />
+    </Suspense>
+  );
+}

openflare_server/web/app/(public)/register/page.tsx

@@ -0,0 +1,12 @@
+import { Suspense } from 'react';
+
+import { LoadingState } from '@/components/feedback/loading-state';
+import { RegisterForm } from '@/features/auth/components/register-form';
+
+export default function RegisterPage() {
+  return (
+    <Suspense fallback={<LoadingState />}>
+      <RegisterForm />
+    </Suspense>
+  );
+}

openflare_server/web/app/(public)/reset/page.tsx

@@ -0,0 +1,12 @@
+import { Suspense } from 'react';
+
+import { LoadingState } from '@/components/feedback/loading-state';
+import { PasswordResetFlow } from '@/features/auth/components/password-reset-flow';
+
+export default function ResetPasswordPage() {
+  return (
+    <Suspense fallback={<LoadingState />}>
+      <PasswordResetFlow />
+    </Suspense>
+  );
+}

openflare_server/web/app/(public)/user/reset/page.tsx

@@ -0,0 +1,12 @@
+import { Suspense } from 'react';
+
+import { LoadingState } from '@/components/feedback/loading-state';
+import { PasswordResetFlow } from '@/features/auth/components/password-reset-flow';
+
+export default function LegacyResetPasswordPage() {
+  return (
+    <Suspense fallback={<LoadingState />}>
+      <PasswordResetFlow />
+    </Suspense>
+  );
+}

openflare_server/web/app/globals.css

@@ -0,0 +1,44 @@
+@import '../styles/tokens.css';
+@import 'tailwindcss';
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  background: var(--surface-canvas);
+}
+
+html[data-theme='light'] {
+  color-scheme: light;
+}
+
+html[data-theme='dark'] {
+  color-scheme: dark;
+}
+
+body {
+  min-height: 100vh;
+  background: var(--body-background);
+  color: var(--foreground-primary);
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    sans-serif;
+  transition:
+    background 0.2s ease,
+    color 0.2s ease;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button {
+  cursor: pointer;
+}
+
+::selection {
+  background: var(--selection-background);
+  color: var(--selection-foreground);
+}

openflare_server/web/app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from 'next';
+import Script from 'next/script';
+import type { ReactNode } from 'react';
+
+import { AppProviders } from '@/components/providers/app-providers';
+import { getThemeInitScript } from '@/lib/theme/theme';
+
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: {
+    default: 'OpenFlare 控制台',
+    template: '%s | OpenFlare',
+  },
+  description: 'OpenFlare 管理端新版工程骨架',
+  applicationName: 'OpenFlare',
+};
+
+interface RootLayoutProps {
+  children: ReactNode;
+}
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  return (
+    <html lang='zh-CN' suppressHydrationWarning>
+      <body>
+        <Script id='theme-init' strategy='beforeInteractive'>
+          {getThemeInitScript()}
+        </Script>
+        <AppProviders>{children}</AppProviders>
+      </body>
+    </html>
+  );
+}

openflare_server/web/app/not-found.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link';
+
+import { AppCard } from '@/components/ui/app-card';
+
+export default function NotFound() {
+  return (
+    <main className='flex min-h-screen items-center justify-center px-4'>
+      <AppCard title='页面不存在' description='当前请求的页面尚未接入新版管理端路由。'>
+        <div className='space-y-4 text-sm leading-6 text-[var(--foreground-secondary)]'>
+          <p>请返回总览页，或继续通过侧边导航访问已初始化的模块入口。</p>
+          <Link href='/' className='inline-flex rounded-full bg-[var(--brand-primary)] px-4 py-2 font-medium text-[var(--foreground-inverse)] transition hover:opacity-90'>
+            返回总览
+          </Link>
+        </div>
+      </AppCard>
+    </main>
+  );
+}

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

@@ -0,0 +1,13 @@
+interface EmptyStateProps {
+  title: string;
+  description: string;
+}
+
+export function EmptyState({ title, description }: EmptyStateProps) {
+  return (
+    <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>
+  );
+}

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

@@ -0,0 +1,13 @@
+interface ErrorStateProps {
+  title: string;
+  description: string;
+}
+
+export function ErrorState({ title, description }: ErrorStateProps) {
+  return (
+    <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>
+  );
+}

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

@@ -0,0 +1,31 @@
+import { AppCard } from '@/components/ui/app-card';
+import { StatusBadge } from '@/components/ui/status-badge';
+
+interface FeaturePlaceholderProps {
+  title: string;
+  description: string;
+  milestones: string[];
+}
+
+export function FeaturePlaceholder({
+  title,
+  description,
+  milestones,
+}: FeaturePlaceholderProps) {
+  return (
+    <AppCard
+      title={title}
+      description={description}
+      action={<StatusBadge label='阶段 1 骨架完成' variant='success' />}
+    >
+      <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-[var(--brand-primary)]' />
+            <span>{item}</span>
+          </li>
+        ))}
+      </ul>
+    </AppCard>
+  );
+}

openflare_server/web/components/feedback/inline-message.tsx

@@ -0,0 +1,35 @@
+import { cn } from '@/lib/utils/cn';
+
+type InlineMessageTone = 'info' | 'success' | 'danger';
+
+const toneClasses: Record<InlineMessageTone, string> = {
+  info: 'border-[var(--status-info-border)] bg-[var(--status-info-soft)] text-[var(--status-info-foreground)]',
+  success:
+    'border-[var(--status-success-border)] bg-[var(--status-success-soft)] text-[var(--status-success-foreground)]',
+  danger:
+    'border-[var(--status-danger-border)] bg-[var(--status-danger-soft)] text-[var(--status-danger-foreground)]',
+};
+
+interface InlineMessageProps {
+  tone?: InlineMessageTone;
+  message: string;
+  className?: string;
+}
+
+export function InlineMessage({
+  tone = 'info',
+  message,
+  className,
+}: InlineMessageProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl border px-4 py-3 text-sm leading-6',
+        toneClasses[tone],
+        className,
+      )}
+    >
+      {message}
+    </div>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { cn } from '@/lib/utils/cn';
+
+interface LoadingStateProps {
+  className?: string;
+}
+
+export function LoadingState({ className }: LoadingStateProps) {
+  return (
+    <div className={cn('space-y-3', className)}>
+      <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>
+  );
+}

openflare_server/web/components/forms/turnstile-widget.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { useEffect, useId, useRef } from 'react';
+
+declare global {
+  interface Window {
+    turnstile?: {
+      render: (
+        container: string | HTMLElement,
+        options: {
+          sitekey: string;
+          callback: (token: string) => void;
+          'expired-callback'?: () => void;
+          'error-callback'?: () => void;
+          theme?: 'auto' | 'light' | 'dark';
+        },
+      ) => string;
+      remove: (widgetId: string) => void;
+      reset: (widgetId?: string) => void;
+    };
+  }
+}
+
+const TURNSTILE_SCRIPT_ID = 'cloudflare-turnstile-script';
+const TURNSTILE_SCRIPT_SRC = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
+
+interface TurnstileWidgetProps {
+  siteKey: string;
+  onVerify: (token: string) => void;
+  onExpire?: () => void;
+  onError?: () => void;
+}
+
+export function TurnstileWidget({
+  siteKey,
+  onVerify,
+  onExpire,
+  onError,
+}: TurnstileWidgetProps) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const widgetIdRef = useRef<string | null>(null);
+  const elementId = useId().replace(/:/g, '-');
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const mountWidget = () => {
+      if (cancelled || !containerRef.current || !window.turnstile) {
+        return;
+      }
+
+      if (widgetIdRef.current) {
+        window.turnstile.remove(widgetIdRef.current);
+        widgetIdRef.current = null;
+      }
+
+      widgetIdRef.current = window.turnstile.render(containerRef.current, {
+        sitekey: siteKey,
+        callback: onVerify,
+        'expired-callback': onExpire,
+        'error-callback': onError,
+        theme: 'auto',
+      });
+    };
+
+    const existingScript = document.getElementById(TURNSTILE_SCRIPT_ID) as HTMLScriptElement | null;
+
+    if (window.turnstile) {
+      mountWidget();
+    } else if (existingScript) {
+      existingScript.addEventListener('load', mountWidget);
+    } else {
+      const script = document.createElement('script');
+      script.id = TURNSTILE_SCRIPT_ID;
+      script.src = TURNSTILE_SCRIPT_SRC;
+      script.async = true;
+      script.defer = true;
+      script.addEventListener('load', mountWidget);
+      document.head.appendChild(script);
+    }
+
+    return () => {
+      cancelled = true;
+      const script = document.getElementById(TURNSTILE_SCRIPT_ID) as HTMLScriptElement | null;
+      if (script) {
+        script.removeEventListener('load', mountWidget);
+      }
+      if (widgetIdRef.current && window.turnstile) {
+        window.turnstile.remove(widgetIdRef.current);
+        widgetIdRef.current = null;
+      }
+    };
+  }, [onError, onExpire, onVerify, siteKey]);
+
+  return <div id={elementId} ref={containerRef} className='min-h-16' />;
+}

openflare_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>
+  );
+}

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

@@ -0,0 +1,279 @@
+'use client';
+
+import { useEffect } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import { dashboardNavigation } from '@/lib/constants/navigation';
+import { cn } from '@/lib/utils/cn';
+import { isNavigationItemActive } from '@/lib/utils/navigation';
+import { useAppShellStore } from '@/store/app-shell';
+import type { NavigationIconKey, NavigationItem } from '@/types/navigation';
+
+function SidebarIcon({ icon }: { icon: NavigationIconKey }) {
+  const commonProps = {
+    className: 'h-[18px] w-[18px]',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 1.8,
+    strokeLinecap: 'round' as const,
+    strokeLinejoin: 'round' as const,
+    viewBox: '0 0 24 24',
+  };
+
+  switch (icon) {
+    case 'home':
+      return (
+        <svg {...commonProps}>
+          <path d="M3 10.5 12 3l9 7.5" />
+          <path d="M5.5 9.5V21h13V9.5" />
+          <path d="M9.5 21v-6h5v6" />
+        </svg>
+      );
+    case 'node':
+      return (
+        <svg {...commonProps}>
+          <rect x="4" y="4" width="6" height="6" rx="1.5" />
+          <rect x="14" y="4" width="6" height="6" rx="1.5" />
+          <rect x="9" y="14" width="6" height="6" rx="1.5" />
+          <path d="M10 7h4M12 10v4" />
+        </svg>
+      );
+    case 'website':
+      return (
+        <svg {...commonProps}>
+          <circle cx="12" cy="12" r="8.5" />
+          <path d="M3.5 12h17" />
+          <path d="M12 3.5c2.4 2.2 3.8 5.2 3.8 8.5S14.4 18.3 12 20.5C9.6 18.3 8.2 15.3 8.2 12S9.6 5.7 12 3.5Z" />
+        </svg>
+      );
+    case 'domain':
+      return (
+        <svg {...commonProps}>
+          <path d="M4 8.5h16" />
+          <path d="M4 15.5h16" />
+          <rect x="3.5" y="5" width="17" height="14" rx="3" />
+        </svg>
+      );
+    case 'certificate':
+      return (
+        <svg {...commonProps}>
+          <path d="M7 4.5h10l2 2V14a7 7 0 1 1-14 0V4.5Z" />
+          <path d="M9 10h6" />
+          <path d="M10 14h4" />
+        </svg>
+      );
+    case 'proxy':
+      return (
+        <svg {...commonProps}>
+          <path d="M7 7h10" />
+          <path d="M7 12h10" />
+          <path d="M7 17h6" />
+          <path d="m14 15 3 2-3 2" />
+        </svg>
+      );
+    case 'release':
+      return (
+        <svg {...commonProps}>
+          <path d="M12 4v10" />
+          <path d="m8.5 7.5 3.5-3.5 3.5 3.5" />
+          <path d="M5 19.5h14" />
+        </svg>
+      );
+    case 'log':
+      return (
+        <svg {...commonProps}>
+          <rect x="5" y="4" width="14" height="16" rx="2.5" />
+          <path d="M8 8h8" />
+          <path d="M8 12h8" />
+          <path d="M8 16h5" />
+        </svg>
+      );
+    case 'performance':
+      return (
+        <svg {...commonProps}>
+          <path d="M4.5 19.5h15" />
+          <path d="M7 16l3-4 3 2 4-6" />
+          <path d="m15.5 8 1.5 0 0 1.5" />
+        </svg>
+      );
+    case 'user':
+      return (
+        <svg {...commonProps}>
+          <circle cx="12" cy="8" r="3.25" />
+          <path d="M5 19.5c1.7-3 4.1-4.5 7-4.5s5.3 1.5 7 4.5" />
+        </svg>
+      );
+    case 'setting':
+      return (
+        <svg {...commonProps}>
+          <circle cx="12" cy="12" r="3.5" />
+          <path d="M12 3.5v2.2M12 18.3v2.2M20.5 12h-2.2M5.7 12H3.5M18.1 5.9l-1.6 1.6M7.5 16.5l-1.6 1.6M18.1 18.1l-1.6-1.6M7.5 7.5 5.9 5.9" />
+        </svg>
+      );
+  }
+}
+
+function SidebarNavItem({
+  item,
+  currentPath,
+  isSidebarCollapsed,
+  forceExpanded,
+  onNavigate,
+  depth = 0,
+}: {
+  item: NavigationItem;
+  currentPath: string;
+  isSidebarCollapsed: boolean;
+  forceExpanded?: boolean;
+  onNavigate?: () => void;
+  depth?: number;
+}) {
+  const active = isNavigationItemActive(currentPath, item);
+  const hasChildren = Boolean(item.children?.length);
+  const showLabel = forceExpanded || !isSidebarCollapsed;
+
+  return (
+    <div className="space-y-2">
+      <Link
+        href={item.href}
+        onClick={onNavigate}
+        className={cn(
+          'flex min-h-[50px] items-center gap-3 rounded-2xl border px-3 py-2.5 transition-colors',
+          depth > 0 && 'ml-3 rounded-xl',
+          active
+            ? '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="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-[var(--control-background)] text-[var(--foreground-primary)]">
+          <SidebarIcon icon={item.icon} />
+        </span>
+        {showLabel ? (
+          <span className="min-w-0 flex-1 text-sm font-medium">
+            {item.label}
+          </span>
+        ) : null}
+      </Link>
+      {showLabel && hasChildren ? (
+        <div className="space-y-2">
+          {item.children?.map((child) => (
+            <SidebarNavItem
+              key={child.href}
+              item={child}
+              currentPath={currentPath}
+              isSidebarCollapsed={isSidebarCollapsed}
+              forceExpanded={forceExpanded}
+              onNavigate={onNavigate}
+              depth={depth + 1}
+            />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function SidebarContent({
+  currentPath,
+  isSidebarCollapsed,
+  forceExpanded = false,
+  onNavigate,
+}: {
+  currentPath: string;
+  isSidebarCollapsed: boolean;
+  forceExpanded?: boolean;
+  onNavigate?: () => void;
+}) {
+  const showLabel = forceExpanded || !isSidebarCollapsed;
+
+  return (
+    <div className="flex h-full flex-col gap-5">
+      <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-10 w-10 items-center justify-center rounded-2xl bg-[var(--brand-primary-soft)] text-sm font-semibold text-[var(--brand-primary)]">
+          AF
+        </div>
+        {showLabel ? (
+          <div>
+            <p className="text-sm font-semibold text-[var(--foreground-primary)]">
+              OpenFlare
+            </p>
+            <p className="text-xs text-[var(--foreground-secondary)]">控制面</p>
+          </div>
+        ) : null}
+      </div>
+
+      <nav className="flex-1 space-y-2">
+        <div className="flex max-h-full min-h-0 flex-col gap-2 overflow-y-auto pr-1">
+          {dashboardNavigation.map((item) => (
+            <SidebarNavItem
+              key={item.href}
+              item={item}
+              currentPath={currentPath}
+              isSidebarCollapsed={isSidebarCollapsed}
+              forceExpanded={forceExpanded}
+              onNavigate={onNavigate}
+            />
+          ))}
+        </div>
+      </nav>
+    </div>
+  );
+}
+
+export function DashboardSidebar() {
+  const pathname = usePathname();
+  const currentPath = pathname ?? '/';
+  const isSidebarCollapsed = useAppShellStore(
+    (state) => state.isSidebarCollapsed,
+  );
+  const isMobileSidebarOpen = useAppShellStore(
+    (state) => state.isMobileSidebarOpen,
+  );
+  const setMobileSidebarOpen = useAppShellStore(
+    (state) => state.setMobileSidebarOpen,
+  );
+
+  useEffect(() => {
+    setMobileSidebarOpen(false);
+  }, [currentPath, setMobileSidebarOpen]);
+
+  return (
+    <>
+      <div
+        className={cn(
+          'fixed inset-0 z-30 bg-black/35 transition-opacity duration-200 min-[1000px]:hidden',
+          isMobileSidebarOpen ? 'opacity-100' : 'pointer-events-none opacity-0',
+        )}
+        onClick={() => setMobileSidebarOpen(false)}
+        aria-hidden="true"
+      />
+
+      <aside
+        className={cn(
+          'fixed top-0 left-0 z-40 h-screen w-[200px] overflow-hidden border-r border-[var(--border-default)] bg-[var(--surface-panel)]/95 px-3 py-5 backdrop-blur transition-transform duration-200 min-[1000px]:hidden',
+          isMobileSidebarOpen ? 'translate-x-0' : '-translate-x-full',
+        )}
+      >
+        <SidebarContent
+          currentPath={currentPath}
+          isSidebarCollapsed={false}
+          forceExpanded
+          onNavigate={() => setMobileSidebarOpen(false)}
+        />
+      </aside>
+
+      <aside
+        className={cn(
+          'sticky top-0 z-10 hidden h-screen shrink-0 overflow-hidden border-r border-[var(--border-default)] bg-[var(--surface-panel)]/95 px-3 py-5 backdrop-blur min-[1000px]:block',
+          isSidebarCollapsed ? 'w-[76px]' : 'w-[200px]',
+        )}
+      >
+        <SidebarContent
+          currentPath={currentPath}
+          isSidebarCollapsed={isSidebarCollapsed}
+        />
+      </aside>
+    </>
+  );
+}

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

@@ -0,0 +1,449 @@
+'use client';
+
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { useEffect, useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+import { useAuth } from '@/components/providers/auth-provider';
+import { ThemeToggle } from '@/components/ui/theme-toggle';
+import { getPublicStatus } from '@/features/auth/api/public';
+import {
+  createUpgradeLogsWebSocket,
+  confirmManualServerUpgrade,
+  getLatestRelease,
+  parseUpgradeStreamSnapshot,
+  upgradeServer,
+  uploadServerBinary,
+} from '@/features/update/api/update';
+import { VersionUpgradeModal } from '@/features/update/components/version-upgrade-modal';
+import type {
+  LatestReleaseInfo,
+  ReleaseChannel,
+  UpgradeStreamSnapshot,
+  UploadedServerBinaryInfo,
+} from '@/features/update/types';
+import { publicEnv } from '@/lib/env/public-env';
+import { useAppShellStore } from '@/store/app-shell';
+
+export function DashboardTopbar() {
+  const router = useRouter();
+  const { logout, user } = useAuth();
+  const toggleSidebar = useAppShellStore((state) => state.toggleSidebar);
+  const isMobileSidebarOpen = useAppShellStore(
+    (state) => state.isMobileSidebarOpen,
+  );
+  const setMobileSidebarOpen = useAppShellStore(
+    (state) => state.setMobileSidebarOpen,
+  );
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
+  const [isVersionModalOpen, setIsVersionModalOpen] = useState(false);
+  const [selectedReleaseChannel, setSelectedReleaseChannel] =
+    useState<ReleaseChannel>('stable');
+  const [versionFeedback, setVersionFeedback] = useState<string | null>(null);
+  const [manualUpgradeStatus, setManualUpgradeStatus] = useState<string | null>(
+    null,
+  );
+  const [manualUpgradeError, setManualUpgradeError] = useState<string | null>(
+    null,
+  );
+  const [uploadedBinary, setUploadedBinary] =
+    useState<UploadedServerBinaryInfo | null>(null);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [upgradeStream, setUpgradeStream] =
+    useState<UpgradeStreamSnapshot | null>(null);
+  const menuRef = useRef<HTMLDivElement | null>(null);
+  const isRoot = (user?.role ?? 0) >= 100;
+  const upgradeStatusPollInterval = 3000;
+
+  const publicStatusQuery = useQuery({
+    queryKey: ['public-status'],
+    queryFn: getPublicStatus,
+  });
+
+  const stableReleaseQuery = useQuery({
+    queryKey: ['update', 'latest-release', 'stable'],
+    queryFn: () => getLatestRelease('stable'),
+    enabled: isRoot,
+    refetchInterval: (query) => {
+      const release = query.state.data;
+      if (isVersionModalOpen && release?.in_progress) {
+        return upgradeStatusPollInterval;
+      }
+      return 60 * 60 * 1000;
+    },
+  });
+
+  const previewReleaseQuery = useQuery({
+    queryKey: ['update', 'latest-release', 'preview'],
+    queryFn: () => getLatestRelease('preview'),
+    enabled: false,
+    refetchInterval: (query) => {
+      const release = query.state.data;
+      if (isVersionModalOpen && release?.in_progress) {
+        return upgradeStatusPollInterval;
+      }
+      return false;
+    },
+  });
+
+  const upgradeMutation = useMutation({
+    mutationFn: (channel: ReleaseChannel) => upgradeServer(channel),
+    onSuccess: (release) => {
+      setUploadedBinary(null);
+      setManualUpgradeStatus(null);
+      setManualUpgradeError(null);
+      setVersionFeedback(
+        `服务升级任务已启动，目标版本 ${release.tag_name}（${release.channel === 'preview' ? '预览版' : '正式版'}）。页面可能短暂不可用。`,
+      );
+      void stableReleaseQuery.refetch();
+      if (release.channel === 'preview') {
+        void previewReleaseQuery.refetch();
+      }
+    },
+    onError: (error) => {
+      setVersionFeedback(
+        error instanceof Error ? error.message : '升级失败，请稍后重试。',
+      );
+    },
+  });
+
+  const uploadBinaryMutation = useMutation({
+    mutationFn: (binary: File) =>
+      uploadServerBinary(binary, (progress) => {
+        setUploadProgress(progress);
+      }),
+    onSuccess: (candidate) => {
+      setUploadProgress(0);
+      setVersionFeedback(null);
+      setManualUpgradeError(null);
+      setUploadedBinary(candidate);
+      setManualUpgradeStatus(candidate.comparison_message);
+    },
+    onError: (error) => {
+      setUploadProgress(0);
+      setUploadedBinary(null);
+      setManualUpgradeStatus(null);
+      setManualUpgradeError(
+        error instanceof Error ? error.message : '上传升级包失败，请稍后重试。',
+      );
+    },
+  });
+
+  const confirmManualUpgradeMutation = useMutation({
+    mutationFn: confirmManualServerUpgrade,
+    onSuccess: (candidate) => {
+      setVersionFeedback(null);
+      setManualUpgradeError(null);
+      setUploadedBinary(candidate);
+      setManualUpgradeStatus(
+        `手动升级任务已启动，目标版本 ${candidate.detected_version}。页面可能短暂不可用。`,
+      );
+      void stableReleaseQuery.refetch();
+      void previewReleaseQuery.refetch();
+    },
+    onError: (error) => {
+      setManualUpgradeStatus(null);
+      setManualUpgradeError(
+        error instanceof Error
+          ? error.message
+          : '确认手动升级失败，请稍后重试。',
+      );
+    },
+  });
+
+  useEffect(() => {
+    if (!isVersionModalOpen || !isRoot) {
+      setUpgradeStream(null);
+      return;
+    }
+
+    let closed = false;
+    let reconnectTimer: number | null = null;
+    let socket: WebSocket | null = null;
+
+    const connect = () => {
+      if (closed) {
+        return;
+      }
+
+      socket = createUpgradeLogsWebSocket();
+      if (!socket) {
+        return;
+      }
+
+      socket.onmessage = (event) => {
+        const snapshot = parseUpgradeStreamSnapshot(String(event.data));
+        if (snapshot) {
+          setUpgradeStream(snapshot);
+        }
+      };
+
+      socket.onclose = () => {
+        if (!closed) {
+          reconnectTimer = window.setTimeout(connect, 1500);
+        }
+      };
+    };
+
+    connect();
+
+    return () => {
+      closed = true;
+      if (reconnectTimer !== null) {
+        window.clearTimeout(reconnectTimer);
+      }
+      socket?.close();
+    };
+  }, [isRoot, isVersionModalOpen]);
+
+  useEffect(() => {
+    if (!isUserMenuOpen) {
+      return;
+    }
+
+    const handlePointerDown = (event: MouseEvent) => {
+      if (!menuRef.current?.contains(event.target as Node)) {
+        setIsUserMenuOpen(false);
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsUserMenuOpen(false);
+      }
+    };
+
+    window.addEventListener('mousedown', handlePointerDown);
+    window.addEventListener('keydown', handleEscape);
+
+    return () => {
+      window.removeEventListener('mousedown', handlePointerDown);
+      window.removeEventListener('keydown', handleEscape);
+    };
+  }, [isUserMenuOpen]);
+
+  const handleLogout = async () => {
+    setIsLoggingOut(true);
+    setIsUserMenuOpen(false);
+    await logout();
+    router.replace('/login');
+  };
+
+  const handleSidebarToggle = () => {
+    if (window.innerWidth < 1000) {
+      setMobileSidebarOpen(!isMobileSidebarOpen);
+      return;
+    }
+
+    toggleSidebar();
+  };
+
+  const handleOpenVersionModal = () => {
+    setSelectedReleaseChannel('stable');
+    setVersionFeedback(null);
+    setManualUpgradeStatus(null);
+    setManualUpgradeError(null);
+    setIsVersionModalOpen(true);
+    if (isRoot) {
+      void stableReleaseQuery.refetch();
+    }
+  };
+
+  const handleUpgrade = () => {
+    setVersionFeedback(null);
+    setManualUpgradeStatus(null);
+    setManualUpgradeError(null);
+    upgradeMutation.mutate(selectedReleaseChannel);
+  };
+
+  const handleCheckRelease = () => {
+    setVersionFeedback(null);
+    if (isRoot) {
+      if (selectedReleaseChannel === 'preview') {
+        void previewReleaseQuery.refetch();
+      } else {
+        void stableReleaseQuery.refetch();
+      }
+    }
+  };
+
+  const handleReleaseChannelChange = (channel: ReleaseChannel) => {
+    setSelectedReleaseChannel(channel);
+    setVersionFeedback(null);
+  };
+
+  const handleUploadBinary = (binary: File) => {
+    setUploadProgress(0);
+    setManualUpgradeStatus(null);
+    setManualUpgradeError(null);
+    uploadBinaryMutation.mutate(binary);
+  };
+
+  const handleConfirmManualUpgrade = () => {
+    if (!uploadedBinary?.upload_token) {
+      setManualUpgradeStatus(null);
+      setManualUpgradeError('请先上传并检查升级包。');
+      return;
+    }
+    setVersionFeedback(null);
+    setManualUpgradeStatus(null);
+    setManualUpgradeError(null);
+    confirmManualUpgradeMutation.mutate(uploadedBinary.upload_token);
+  };
+
+  const selectedRelease =
+    selectedReleaseChannel === 'preview'
+      ? previewReleaseQuery.data
+      : stableReleaseQuery.data;
+  const releaseWithStream = mergeReleaseWithUpgradeStream(
+    selectedRelease,
+    upgradeStream,
+  );
+  const selectedReleaseError =
+    selectedReleaseChannel === 'preview'
+      ? previewReleaseQuery.error
+      : stableReleaseQuery.error;
+  const isSelectedReleaseError =
+    selectedReleaseChannel === 'preview'
+      ? previewReleaseQuery.isError
+      : stableReleaseQuery.isError;
+  const hasUpdate = Boolean(isRoot && stableReleaseQuery.data?.has_update);
+  const currentVersion = publicStatusQuery.data?.version || 'unknown';
+  const versionLabel = hasUpdate
+    ? `版本 ${publicEnv.appVersion} · 可升级`
+    : `版本 ${publicEnv.appVersion}`;
+  const versionButtonClassName = hasUpdate
+    ? 'border-[var(--status-warning-border)] bg-[var(--status-warning-soft)] text-[var(--status-warning-foreground)]'
+    : 'border-[var(--border-default)]';
+  const versionErrorMessage =
+    versionFeedback ||
+    (isSelectedReleaseError
+      ? selectedReleaseError instanceof Error
+        ? selectedReleaseError.message
+        : '版本检查失败，请稍后重试。'
+      : undefined);
+  const manualUpgradeErrorMessage = manualUpgradeError ?? undefined;
+
+  return (
+    <>
+      <header className="sticky top-0 z-20 border-b border-[var(--border-default)] bg-[var(--surface-panel)]/88 px-4 py-4 backdrop-blur md:px-8">
+        <div className="flex items-center justify-between gap-3">
+          <button
+            type="button"
+            onClick={handleSidebarToggle}
+            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 className="flex items-center gap-3 text-sm text-[var(--foreground-secondary)]">
+            <button
+              type="button"
+              onClick={handleOpenVersionModal}
+              className={[
+                'inline-flex rounded-full border px-3 py-1.5 transition',
+                versionButtonClassName,
+              ].join(' ')}
+            >
+              <span className="sm:hidden">版本</span>
+              <span className="hidden sm:inline">{versionLabel}</span>
+            </button>
+            <ThemeToggle />
+            <div className="relative" ref={menuRef}>
+              <button
+                type="button"
+                onClick={() => setIsUserMenuOpen((value) => !value)}
+                className="inline-flex h-11 items-center gap-2 rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-3 text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
+                aria-expanded={isUserMenuOpen}
+                aria-haspopup="menu"
+              >
+                <span className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-[var(--accent-soft)] text-xs font-semibold">
+                  {(user?.display_name || user?.username || 'U')
+                    .slice(0, 1)
+                    .toUpperCase()}
+                </span>
+                <span className="hidden sm:inline">
+                  {user?.display_name || user?.username || '用户'}
+                </span>
+              </button>
+
+              {isUserMenuOpen ? (
+                <div className="absolute top-[calc(100%+0.5rem)] right-0 w-52 rounded-2xl border border-[var(--border-default)] bg-[var(--surface-panel)] p-2 shadow-[var(--shadow-lg)]">
+                  <div className="rounded-xl px-3 py-2">
+                    <p className="text-sm font-semibold text-[var(--foreground-primary)]">
+                      {user?.display_name || user?.username || '用户'}
+                    </p>
+                    {user?.username ? (
+                      <p className="mt-1 text-xs text-[var(--foreground-secondary)]">
+                        @{user.username}
+                      </p>
+                    ) : null}
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => void handleLogout()}
+                    disabled={isLoggingOut}
+                    className="flex w-full items-center rounded-xl px-3 py-2 text-left text-sm text-[var(--status-danger-foreground)] transition hover:bg-[var(--status-danger-soft)] disabled:cursor-not-allowed disabled:opacity-60"
+                  >
+                    {isLoggingOut ? '退出中...' : '退出登录'}
+                  </button>
+                </div>
+              ) : null}
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <VersionUpgradeModal
+        isOpen={isVersionModalOpen}
+        onClose={() => setIsVersionModalOpen(false)}
+        currentVersion={currentVersion}
+        release={releaseWithStream}
+        selectedChannel={selectedReleaseChannel}
+        uploadedBinary={uploadedBinary}
+        isLoading={
+          (selectedReleaseChannel === 'preview'
+            ? previewReleaseQuery.isLoading && !previewReleaseQuery.data
+            : stableReleaseQuery.isLoading && !stableReleaseQuery.data) &&
+          isRoot
+        }
+        releaseErrorMessage={versionErrorMessage}
+        manualStatusMessage={manualUpgradeStatus ?? undefined}
+        manualErrorMessage={manualUpgradeErrorMessage}
+        canUpgrade={isRoot}
+        isChecking={
+          selectedReleaseChannel === 'preview'
+            ? previewReleaseQuery.isFetching
+            : stableReleaseQuery.isFetching
+        }
+        isUpgrading={upgradeMutation.isPending}
+        isUploadingBinary={uploadBinaryMutation.isPending}
+        uploadProgress={uploadProgress}
+        isConfirmingManualUpgrade={confirmManualUpgradeMutation.isPending}
+        onChannelChange={handleReleaseChannelChange}
+        onCheck={handleCheckRelease}
+        onUpgrade={handleUpgrade}
+        onUploadBinary={handleUploadBinary}
+        onConfirmManualUpgrade={handleConfirmManualUpgrade}
+      />
+    </>
+  );
+}
+
+function mergeReleaseWithUpgradeStream(
+  release: LatestReleaseInfo | null | undefined,
+  stream: UpgradeStreamSnapshot | null,
+) {
+  if (!release || !stream) {
+    return release;
+  }
+
+  return {
+    ...release,
+    in_progress: stream.in_progress,
+    upgrade_status: stream.upgrade_status,
+    upgrade_logs: stream.upgrade_logs,
+  };
+}

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

@@ -0,0 +1,26 @@
+import type {ReactNode} from 'react';
+
+interface PageHeaderProps {
+    title: string;
+    description?: string;
+    action?: ReactNode;
+}
+
+export function PageHeader({title, description, action}: PageHeaderProps) {
+    return (
+        <div className='flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between'>
+            <div className='space-y-3'>
+                <p className='text-sm font-medium uppercase tracking-[0.24em] text-[var(--brand-primary)]'>OpenFlare</p>
+                <div className='space-y-2'>
+                    <h1 className='text-3xl font-semibold tracking-tight text-[var(--foreground-primary)]'>{title}</h1>
+                    {description ? (
+                        <p className='max-w-3xl text-sm leading-7 text-[var(--foreground-secondary)]'>
+                            {description}
+                        </p>
+                    ) : null}
+                </div>
+            </div>
+            {action ? <div className='flex flex-wrap gap-3'>{action}</div> : null}
+        </div>
+    );
+}

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

@@ -0,0 +1,40 @@
+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-3xl font-medium text-[var(--brand-primary)]'>OpenFlare</p>
+          </div>
+          <div className='flex flex-col items-start gap-3 text-sm text-[var(--foreground-secondary)] md:items-end'>
+            <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)]'>
+          <div className='flex flex-wrap gap-4'>
+            <Link href='/' className='text-[var(--brand-primary)] transition hover:opacity-80'>
+              返回
+            </Link>
+            <Link href='/about' className='text-[var(--brand-primary)] transition hover:opacity-80'>
+              关于
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,37 @@
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { type ReactNode, useState } from 'react';
+
+import { AuthProvider } from '@/components/providers/auth-provider';
+import { ThemeProvider } from '@/components/providers/theme-provider';
+
+interface AppProvidersProps {
+  children: ReactNode;
+}
+
+export function AppProviders({ children }: AppProvidersProps) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            refetchOnWindowFocus: false,
+            retry: 1,
+            staleTime: 30_000,
+          },
+          mutations: {
+            retry: 0,
+          },
+        },
+      }),
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider>
+        <AuthProvider>{children}</AuthProvider>
+      </ThemeProvider>
+    </QueryClientProvider>
+  );
+}

openflare_server/web/components/providers/auth-provider.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+import { logout as logoutRequest, getCurrentUser } from '@/features/auth/api/auth';
+import type { AuthUser } from '@/types/auth';
+
+interface AuthContextValue {
+  user: AuthUser | null;
+  isLoading: boolean;
+  isAuthenticated: boolean;
+  refreshUser: () => Promise<AuthUser | null>;
+  setUser: (user: AuthUser | null) => void;
+  logout: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+interface AuthProviderProps {
+  children: ReactNode;
+}
+
+export function AuthProvider({ children }: AuthProviderProps) {
+  const [user, setUserState] = useState<AuthUser | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const refreshUser = useCallback(async () => {
+    try {
+      const nextUser = await getCurrentUser();
+      setUserState(nextUser);
+      return nextUser;
+    } catch {
+      setUserState(null);
+      return null;
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refreshUser();
+  }, [refreshUser]);
+
+  const setUser = useCallback((nextUser: AuthUser | null) => {
+    setUserState(nextUser);
+    setIsLoading(false);
+  }, []);
+
+  const logout = useCallback(async () => {
+    try {
+      await logoutRequest();
+    } finally {
+      setUserState(null);
+      setIsLoading(false);
+    }
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      user,
+      isLoading,
+      isAuthenticated: user !== null,
+      refreshUser,
+      setUser,
+      logout,
+    }),
+    [isLoading, logout, refreshUser, setUser, user],
+  );
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+
+  if (!context) {
+    throw new Error('useAuth must be used within AuthProvider');
+  }
+
+  return context;
+}

openflare_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;
+}

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

@@ -0,0 +1,41 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+import { cn } from '@/lib/utils/cn';
+
+interface AppCardProps extends HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  description?: string;
+  action?: ReactNode;
+}
+
+export function AppCard({
+  title,
+  description,
+  action,
+  className,
+  children,
+  ...props
+}: AppCardProps) {
+  return (
+    <section
+      className={cn(
+        'rounded-[var(--radius-xl)] border border-[var(--border-default)] bg-[var(--surface-card)]/90 shadow-[var(--shadow-soft)] backdrop-blur',
+        className,
+      )}
+      {...props}
+    >
+      {(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-[var(--foreground-primary)]'>{title}</h2> : null}
+            {description ? (
+              <p className='text-sm leading-6 text-[var(--foreground-secondary)]'>{description}</p>
+            ) : null}
+          </div>
+          {action ? <div className='shrink-0'>{action}</div> : null}
+        </header>
+      )}
+      <div className='px-6 py-5'>{children}</div>
+    </section>
+  );
+}

openflare_server/web/components/ui/app-modal.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { useEffect, type ReactNode } from 'react';
+
+import { cn } from '@/lib/utils/cn';
+
+interface AppModalProps {
+  isOpen: boolean;
+  title: string;
+  description?: string;
+  children: ReactNode;
+  footer?: ReactNode;
+  onClose: () => void;
+  size?: 'md' | 'lg' | 'xl';
+}
+
+const sizeClassNameMap = {
+  md: 'max-w-2xl',
+  lg: 'max-w-4xl',
+  xl: 'max-w-5xl',
+} satisfies Record<NonNullable<AppModalProps['size']>, string>;
+
+export function AppModal({
+  isOpen,
+  title,
+  description,
+  children,
+  footer,
+  onClose,
+  size = 'lg',
+}: AppModalProps) {
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className='fixed inset-0 z-50 flex items-center justify-center bg-slate-950/55 px-4 py-6' role='dialog' aria-modal='true' aria-label={title}>
+      <button type='button' className='absolute inset-0 cursor-default' onClick={onClose} aria-label='关闭弹窗' />
+      <div
+        className={cn(
+          'relative flex max-h-[calc(100vh-3rem)] w-full flex-col overflow-hidden rounded-[28px] border border-[var(--border-default)] bg-[var(--surface-panel)] shadow-2xl',
+          sizeClassNameMap[size],
+        )}
+      >
+        <div className='flex items-start justify-between gap-4 border-b border-[var(--border-default)] px-6 py-5'>
+          <div className='space-y-2'>
+            <h2 className='text-xl font-semibold text-[var(--foreground-primary)]'>{title}</h2>
+            {description ? (
+              <p className='max-w-2xl text-sm leading-6 text-[var(--foreground-secondary)]'>{description}</p>
+            ) : null}
+          </div>
+          <button
+            type='button'
+            onClick={onClose}
+            className='inline-flex h-10 w-10 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>
+        <div className='min-h-0 flex-1 overflow-y-auto px-6 py-6'>{children}</div>
+        {footer ? <div className='border-t border-[var(--border-default)] px-6 py-5'>{footer}</div> : null}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,51 @@
+import { cn } from '@/lib/utils/cn';
+
+const variantClasses = {
+  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 {
+  label: string;
+  variant?: keyof typeof variantClasses;
+  className?: string;
+  onClick?: () => void;
+  disabled?: boolean;
+}
+
+export function StatusBadge({
+  label,
+  variant = 'info',
+  className,
+  onClick,
+  disabled = false,
+}: StatusBadgeProps) {
+  const badgeClassName = cn(
+    'inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium tracking-wide',
+    variantClasses[variant],
+    onClick
+      ? 'cursor-pointer transition hover:opacity-85 disabled:cursor-not-allowed disabled:opacity-60'
+      : undefined,
+    className,
+  );
+
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        onClick={onClick}
+        disabled={disabled}
+        className={badgeClassName}
+      >
+        {label}
+      </button>
+    );
+  }
+
+  return <span className={badgeClassName}>{label}</span>;
+}

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

@@ -0,0 +1,74 @@
+'use client';
+
+import { cn } from '@/lib/utils/cn';
+import { themeModes, type ThemeMode } from '@/lib/theme/theme';
+import { useTheme } from '@/components/providers/theme-provider';
+
+interface ThemeToggleProps {
+  className?: string;
+}
+
+export function ThemeToggle({ className }: ThemeToggleProps) {
+  const { themeMode, resolvedTheme, setThemeMode } = useTheme();
+  const currentIndex = themeModes.indexOf(themeMode);
+  const nextTheme = themeModes[(currentIndex + 1) % themeModes.length] as ThemeMode;
+
+  const icon =
+    themeMode === 'light' ? (
+      <svg
+        className='h-5 w-5'
+        viewBox='0 0 24 24'
+        fill='none'
+        stroke='currentColor'
+        strokeWidth='1.8'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      >
+        <circle cx='12' cy='12' r='4' />
+        <path d='M12 2.5v2.2M12 19.3v2.2M21.5 12h-2.2M4.7 12H2.5M18.7 5.3l-1.6 1.6M6.9 17.1l-1.6 1.6M18.7 18.7l-1.6-1.6M6.9 6.9 5.3 5.3' />
+      </svg>
+    ) : themeMode === 'dark' ? (
+      <svg
+        className='h-5 w-5'
+        viewBox='0 0 24 24'
+        fill='none'
+        stroke='currentColor'
+        strokeWidth='1.8'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      >
+        <path d='M20 15.2A7.8 7.8 0 1 1 8.8 4 6.4 6.4 0 0 0 20 15.2Z' />
+      </svg>
+    ) : (
+      <svg
+        className='h-5 w-5'
+        viewBox='0 0 24 24'
+        fill='none'
+        stroke='currentColor'
+        strokeWidth='1.8'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      >
+        <rect x='3.5' y='4' width='17' height='12' rx='2.5' />
+        <path d='M8 20h8M12 16v4' />
+      </svg>
+    );
+
+  const label =
+    themeMode === 'light' ? '浅色模式' : themeMode === 'dark' ? '深色模式' : '跟随系统';
+
+  return (
+    <button
+      type='button'
+      onClick={() => setThemeMode(nextTheme)}
+      className={cn(
+        'inline-flex h-11 w-11 items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]',
+        className,
+      )}
+      aria-label={`当前${label}，点击切换到${nextTheme === 'light' ? '浅色模式' : nextTheme === 'dark' ? '深色模式' : '跟随系统'}`}
+      title={`${label}（当前生效：${resolvedTheme === 'dark' ? '深色' : '浅色'}），点击切换到${nextTheme === 'light' ? '浅色模式' : nextTheme === 'dark' ? '深色模式' : '跟随系统'}`}
+    >
+      {icon}
+    </button>
+  );
+}

openflare_server/web/features/about/components/about-page.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import Link from 'next/link';
+import { useQuery } from '@tanstack/react-query';
+import { marked } from 'marked';
+
+import { EmptyState } from '@/components/feedback/empty-state';
+import { ErrorState } from '@/components/feedback/error-state';
+import { LoadingState } from '@/components/feedback/loading-state';
+import { AppCard } from '@/components/ui/app-card';
+import { StatusBadge } from '@/components/ui/status-badge';
+import { getPublicStatus } from '@/features/auth/api/public';
+import { getAboutContent } from '@/features/settings/api/settings';
+import { formatDateTime } from '@/lib/utils/date';
+
+function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : '请求失败，请稍后重试。';
+}
+
+export function AboutPage() {
+  const aboutQuery = useQuery({
+    queryKey: ['about'],
+    queryFn: getAboutContent,
+  });
+
+  const statusQuery = useQuery({
+    queryKey: ['public-status'],
+    queryFn: getPublicStatus,
+  });
+
+  if (aboutQuery.isLoading || statusQuery.isLoading) {
+    return <LoadingState />;
+  }
+
+  if (aboutQuery.isError) {
+    return <ErrorState title='关于页加载失败' description={getErrorMessage(aboutQuery.error)} />;
+  }
+
+  if (statusQuery.isError) {
+    return <ErrorState title='系统状态加载失败' description={getErrorMessage(statusQuery.error)} />;
+  }
+
+  const aboutContent = aboutQuery.data?.trim() ?? '';
+  const status = statusQuery.data;
+
+  if (!status) {
+    return <EmptyState title='暂无系统信息' description='未能获取 OpenFlare 的公开状态信息。' />;
+  }
+
+  return (
+    <div className='space-y-6'>
+      <AppCard
+        title='关于 OpenFlare'
+        description='公开展示当前系统简介、版本信息与项目入口。'
+        action={<StatusBadge label={status.version || 'dev'} variant='info' />}
+      >
+        <div className='grid gap-4 md:grid-cols-3'>
+          <div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] px-4 py-4'>
+            <p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>系统名称</p>
+            <p className='mt-2 text-sm font-medium text-[var(--foreground-primary)]'>{status.system_name || 'OpenFlare'}</p>
+          </div>
+          <div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] px-4 py-4'>
+            <p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>Server 启动时间</p>
+            <p className='mt-2 text-sm font-medium text-[var(--foreground-primary)]'>
+              {formatDateTime(new Date(status.start_time * 1000))}
+            </p>
+          </div>
+          <div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] px-4 py-4'>
+            <p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>项目仓库</p>
+            <a
+              href='https://github.com/Rain-kl/OpenFlare'
+              target='_blank'
+              rel='noreferrer'
+              className='mt-2 block text-sm font-medium text-[var(--brand-primary)] transition hover:opacity-80'
+            >
+              github.com/Rain-kl/OpenFlare
+            </a>
+          </div>
+        </div>
+      </AppCard>
+
+      {aboutContent ? (
+        <AppCard title='项目介绍' description='以下内容由系统设置中的“关于内容”维护。'>
+          <div
+            className='prose prose-sm max-w-none text-[var(--foreground-primary)] [&_a]:text-[var(--brand-primary)]'
+            dangerouslySetInnerHTML={{ __html: marked.parse(aboutContent) as string }}
+          />
+        </AppCard>
+      ) : (
+        <EmptyState
+          title='尚未配置关于内容'
+          description='可在设置页的“其他设置”标签中编写 Markdown / HTML 内容，这里会自动同步展示。'
+        />
+      )}
+
+      <div className='flex flex-wrap gap-3 text-sm'>
+        <Link href='/login' className='text-[var(--brand-primary)] transition hover:opacity-80'>
+          前往登录
+        </Link>
+      </div>
+    </div>
+  );
+}

openflare_server/web/features/access-logs/api/access-logs.ts

@@ -0,0 +1,15 @@
+import { apiRequest } from '@/lib/api/client';
+
+import type { AccessLogList } from '@/features/access-logs/types';
+
+export function getAccessLogs(page: number, nodeId?: string, pageSize = 50) {
+  const normalizedNodeId = nodeId?.trim();
+  const searchParams = new URLSearchParams({
+    p: String(Math.max(page, 0)),
+    page_size: String(pageSize),
+  });
+  if (normalizedNodeId) {
+    searchParams.set('node_id', normalizedNodeId);
+  }
+  return apiRequest<AccessLogList>(`/access-logs/?${searchParams.toString()}`);
+}

openflare_server/web/features/access-logs/components/access-logs-page.tsx

@@ -0,0 +1,250 @@
+'use client';
+
+import Link from 'next/link';
+import { useMemo, useState } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { EmptyState } from '@/components/feedback/empty-state';
+import { ErrorState } from '@/components/feedback/error-state';
+import { LoadingState } from '@/components/feedback/loading-state';
+import { PageHeader } from '@/components/layout/page-header';
+import { AppCard } from '@/components/ui/app-card';
+import { StatusBadge } from '@/components/ui/status-badge';
+import { getAccessLogs } from '@/features/access-logs/api/access-logs';
+import type { AccessLogItem } from '@/features/access-logs/types';
+import {
+  PrimaryButton,
+  ResourceInput,
+  SecondaryButton,
+} from '@/features/shared/components/resource-primitives';
+import { formatDateTime, formatRelativeTime } from '@/lib/utils/date';
+
+const accessLogsQueryKey = (nodeId: string) => ['access-logs', nodeId] as const;
+
+function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : '请求失败，请稍后重试。';
+}
+
+function buildSummary(totalRecord = 0, totalIP = 0) {
+  return [
+    { label: '访问记录', value: totalRecord },
+    { label: '来源 IP', value: totalIP },
+  ];
+}
+
+function getStatusMeta(statusCode: number) {
+  if (statusCode >= 500) {
+    return { label: String(statusCode), variant: 'danger' as const };
+  }
+  if (statusCode >= 400) {
+    return { label: String(statusCode), variant: 'warning' as const };
+  }
+  return { label: String(statusCode), variant: 'success' as const };
+}
+
+export function AccessLogsPage() {
+  const queryClient = useQueryClient();
+  const [nodeFilterInput, setNodeFilterInput] = useState('');
+  const [nodeFilter, setNodeFilter] = useState('');
+  const [page, setPage] = useState(0);
+
+  const logsQuery = useQuery({
+    queryKey: [...accessLogsQueryKey(nodeFilter), page],
+    queryFn: () => getAccessLogs(page, nodeFilter),
+  });
+
+  const logs = useMemo(() => logsQuery.data?.items ?? [], [logsQuery.data]);
+  const hasMore = logsQuery.data?.has_more ?? false;
+  const pageSize = logsQuery.data?.page_size ?? 50;
+  const summary = useMemo(
+    () =>
+      buildSummary(
+        logsQuery.data?.total_record ?? 0,
+        logsQuery.data?.total_ip ?? 0,
+      ),
+    [logsQuery.data?.total_ip, logsQuery.data?.total_record],
+  );
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="日志"
+        description="查看最近时间窗口内的访问记录，包含来源 IP、归属地、访问域名、路径、命中节点与响应状态码。"
+        action={
+          <Link
+            href="/node"
+            className="inline-flex items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-3 text-sm font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
+          >
+            返回节点页
+          </Link>
+        }
+      />
+
+      <AppCard
+        title="日志摘要"
+        description="基于当前筛选条件汇总最近时间窗口内的访问记录与来源 IP 规模。"
+      >
+        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-2">
+          {summary.map((item) => (
+            <div
+              key={item.label}
+              className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4"
+            >
+              <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
+                {item.label}
+              </p>
+              <p className="mt-2 text-lg font-semibold text-[var(--foreground-primary)]">
+                {item.value}
+              </p>
+            </div>
+          ))}
+        </div>
+      </AppCard>
+
+      <AppCard
+        title="访问记录"
+        description="默认展示全部节点的最近访问日志，可按 node_id 快速过滤。"
+        action={
+          <SecondaryButton
+            type="button"
+            onClick={() =>
+              void queryClient.invalidateQueries({
+                queryKey: accessLogsQueryKey(nodeFilter),
+              })
+            }
+          >
+            刷新
+          </SecondaryButton>
+        }
+      >
+        <div className="space-y-5">
+          <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
+            <ResourceInput
+              value={nodeFilterInput}
+              onChange={(event) => setNodeFilterInput(event.target.value)}
+              placeholder="输入 node_id 过滤访问日志"
+              className="lg:max-w-md"
+            />
+            <div className="flex flex-wrap gap-2">
+              <PrimaryButton
+                type="button"
+                onClick={() => {
+                  setNodeFilter(nodeFilterInput.trim());
+                  setPage(0);
+                }}
+              >
+                筛选
+              </PrimaryButton>
+              <SecondaryButton
+                type="button"
+                onClick={() => {
+                  setNodeFilter('');
+                  setNodeFilterInput('');
+                  setPage(0);
+                }}
+              >
+                清空
+              </SecondaryButton>
+            </div>
+          </div>
+
+          {logsQuery.isLoading ? (
+            <LoadingState />
+          ) : logsQuery.isError ? (
+            <ErrorState
+              title="访问日志加载失败"
+              description={getErrorMessage(logsQuery.error)}
+            />
+          ) : logs.length === 0 ? (
+            <EmptyState
+              title="暂无访问日志"
+              description="当前时间窗口内还没有可展示的访问记录。"
+            />
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="min-w-full divide-y divide-[var(--border-default)] text-left text-sm">
+                <thead>
+                  <tr className="text-[var(--foreground-secondary)]">
+                    <th className="px-3 py-3 font-medium">时间</th>
+                    <th className="px-3 py-3 font-medium">原 IP</th>
+                    <th className="px-3 py-3 font-medium">访问域名</th>
+                    <th className="px-3 py-3 font-medium">路径</th>
+                    <th className="px-3 py-3 font-medium">节点</th>
+                    <th className="px-3 py-3 font-medium">状态码</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-[var(--border-default)]">
+                  {logs.map((item) => {
+                    const statusMeta = getStatusMeta(item.status_code);
+                    return (
+                      <tr key={item.id} className="align-top">
+                        <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                          <div>{formatDateTime(item.logged_at)}</div>
+                          <div className="mt-1 text-xs text-[var(--foreground-muted)]">
+                            {formatRelativeTime(item.logged_at)}
+                          </div>
+                        </td>
+                        <td className="px-3 py-4 font-medium text-[var(--foreground-primary)]">
+                          <div>{item.remote_addr || '—'}</div>
+                          {item.region ? (
+                            <div className="mt-2">
+                              <span className="inline-flex rounded-full border border-[var(--border-default)] bg-[var(--surface-elevated)] px-2.5 py-1 text-[11px] font-medium text-[var(--foreground-secondary)]">
+                                {item.region}
+                              </span>
+                            </div>
+                          ) : null}
+                        </td>
+                        <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                          {item.host || '—'}
+                        </td>
+                        <td
+                          className="max-w-[360px] px-3 py-4 text-[var(--foreground-secondary)]"
+                          title={item.path}
+                        >
+                          <span className="break-all">{item.path || '—'}</span>
+                        </td>
+                        <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                          <div>{item.node_name || item.node_id}</div>
+                          <div className="mt-1 text-xs text-[var(--foreground-muted)]">
+                            {item.node_id}
+                          </div>
+                        </td>
+                        <td className="px-3 py-4">
+                          <StatusBadge
+                            label={statusMeta.label}
+                            variant={statusMeta.variant}
+                          />
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+          <div className="flex flex-col gap-3 border-t border-[var(--border-default)] pt-4 sm:flex-row sm:items-center sm:justify-between">
+            <p className="text-sm text-[var(--foreground-secondary)]">
+              第 {page + 1} 页，每页 {pageSize} 条。
+            </p>
+            <div className="flex gap-2">
+              <SecondaryButton
+                type="button"
+                disabled={page === 0 || logsQuery.isLoading}
+                onClick={() => setPage((value) => Math.max(value - 1, 0))}
+              >
+                上一页
+              </SecondaryButton>
+              <SecondaryButton
+                type="button"
+                disabled={!hasMore || logsQuery.isLoading}
+                onClick={() => setPage((value) => value + 1)}
+              >
+                下一页
+              </SecondaryButton>
+            </div>
+          </div>
+        </div>
+      </AppCard>
+    </div>
+  );
+}

openflare_server/web/features/access-logs/types.ts

@@ -0,0 +1,20 @@
+export interface AccessLogItem {
+  id: number;
+  node_id: string;
+  node_name: string;
+  logged_at: string;
+  remote_addr: string;
+  region: string;
+  host: string;
+  path: string;
+  status_code: number;
+}
+
+export interface AccessLogList {
+  items: AccessLogItem[];
+  page: number;
+  page_size: number;
+  has_more: boolean;
+  total_record: number;
+  total_ip: number;
+}

openflare_server/web/features/apply-logs/api/apply-logs.ts

@@ -0,0 +1,9 @@
+import { apiRequest } from '@/lib/api/client';
+
+import type { ApplyLogItem } from '@/features/apply-logs/types';
+
+export function getApplyLogs(nodeId?: string) {
+  const normalizedNodeId = nodeId?.trim();
+  const query = normalizedNodeId ? `?node_id=${encodeURIComponent(normalizedNodeId)}` : '';
+  return apiRequest<ApplyLogItem[]>(`/apply-logs/${query}`);
+}

openflare_server/web/features/apply-logs/components/apply-logs-page.tsx

@@ -0,0 +1,345 @@
+'use client';
+
+import Link from 'next/link';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useMemo, useState } from 'react';
+
+import { EmptyState } from '@/components/feedback/empty-state';
+import { ErrorState } from '@/components/feedback/error-state';
+import { InlineMessage } from '@/components/feedback/inline-message';
+import { LoadingState } from '@/components/feedback/loading-state';
+import { PageHeader } from '@/components/layout/page-header';
+import { AppCard } from '@/components/ui/app-card';
+import { StatusBadge } from '@/components/ui/status-badge';
+import { getApplyLogs } from '@/features/apply-logs/api/apply-logs';
+import type { ApplyLogItem } from '@/features/apply-logs/types';
+import {
+  PrimaryButton,
+  ResourceInput,
+  SecondaryButton,
+} from '@/features/shared/components/resource-primitives';
+import { formatDateTime, formatRelativeTime } from '@/lib/utils/date';
+
+const applyLogsQueryKey = (nodeId: string) => ['apply-logs', nodeId] as const;
+
+function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : '请求失败，请稍后重试。';
+}
+
+function getResultMeta(result: string) {
+  if (result === 'success') {
+    return { label: '成功', variant: 'success' as const };
+  }
+
+  return { label: '失败', variant: 'danger' as const };
+}
+
+function buildSummary(logs: ApplyLogItem[]) {
+  const nodeIds = new Set(logs.map((item) => item.node_id));
+
+  return [
+    { label: '记录总数', value: logs.length },
+    {
+      label: '成功',
+      value: logs.filter((item) => item.result === 'success').length,
+    },
+    {
+      label: '失败',
+      value: logs.filter((item) => item.result !== 'success').length,
+    },
+    { label: '节点数', value: nodeIds.size },
+  ];
+}
+
+function truncateHash(value: string) {
+  if (!value) {
+    return '—';
+  }
+
+  return value.length > 12 ? `${value.slice(0, 12)}...` : value;
+}
+
+export function ApplyLogsPage() {
+  const queryClient = useQueryClient();
+  const [nodeFilterInput, setNodeFilterInput] = useState('');
+  const [nodeFilter, setNodeFilter] = useState('');
+  const [selectedLogId, setSelectedLogId] = useState<number | null>(null);
+  const [feedback, setFeedback] = useState<string | null>(null);
+
+  const logsQuery = useQuery({
+    queryKey: applyLogsQueryKey(nodeFilter),
+    queryFn: () => getApplyLogs(nodeFilter),
+  });
+
+  const logs = useMemo(() => logsQuery.data ?? [], [logsQuery.data]);
+  const summary = useMemo(() => buildSummary(logs), [logs]);
+
+  useEffect(() => {
+    if (logs.length === 0) {
+      setSelectedLogId(null);
+      return;
+    }
+
+    if (!logs.some((item) => item.id === selectedLogId)) {
+      setSelectedLogId(logs[0].id);
+    }
+  }, [logs, selectedLogId]);
+
+  const selectedLog = logs.find((item) => item.id === selectedLogId) ?? null;
+
+  const handleSearch = () => {
+    setFeedback(null);
+    setNodeFilter(nodeFilterInput.trim());
+  };
+
+  const handleReset = () => {
+    setFeedback(null);
+    setNodeFilter('');
+    setNodeFilterInput('');
+  };
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="应用记录"
+        description="查看节点应用版本的成功或失败记录，支持按 node_id 过滤并查看单条详情。"
+        action={
+          <Link
+            href="/node"
+            className="inline-flex items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-3 text-sm font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
+          >
+            返回节点页
+          </Link>
+        }
+      />
+
+      {feedback ? <InlineMessage tone="info" message={feedback} /> : null}
+
+      <AppCard
+        title="记录摘要"
+        description="帮助快速识别失败趋势和受影响节点范围。"
+      >
+        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+          {summary.map((item) => (
+            <div
+              key={item.label}
+              className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4"
+            >
+              <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
+                {item.label}
+              </p>
+              <p className="mt-2 text-lg font-semibold text-[var(--foreground-primary)]">
+                {item.value}
+              </p>
+            </div>
+          ))}
+        </div>
+      </AppCard>
+
+      <div className="grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
+        <AppCard
+          title="过滤与列表"
+          description="默认展示全部记录，可按 node_id 快速筛选单节点应用结果。"
+          action={
+            <SecondaryButton
+              type="button"
+              onClick={() =>
+                void queryClient.invalidateQueries({
+                  queryKey: applyLogsQueryKey(nodeFilter),
+                })
+              }
+            >
+              刷新
+            </SecondaryButton>
+          }
+        >
+          <div className="space-y-5">
+            <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
+              <ResourceInput
+                value={nodeFilterInput}
+                onChange={(event) => setNodeFilterInput(event.target.value)}
+                placeholder="输入 node_id 过滤应用记录"
+                className="lg:max-w-md"
+              />
+              <div className="flex flex-wrap gap-2">
+                <PrimaryButton type="button" onClick={handleSearch}>
+                  筛选
+                </PrimaryButton>
+                <SecondaryButton type="button" onClick={handleReset}>
+                  清空
+                </SecondaryButton>
+              </div>
+            </div>
+
+            {logsQuery.isLoading ? (
+              <LoadingState />
+            ) : logsQuery.isError ? (
+              <ErrorState
+                title="应用记录加载失败"
+                description={getErrorMessage(logsQuery.error)}
+              />
+            ) : logs.length === 0 ? (
+              <EmptyState
+                title="暂无应用记录"
+                description="当前筛选条件下没有可展示的应用结果。"
+              />
+            ) : (
+              <div className="overflow-x-auto">
+                <table className="min-w-full divide-y divide-[var(--border-default)] text-left text-sm">
+                  <thead>
+                    <tr className="text-[var(--foreground-secondary)]">
+                      <th className="px-3 py-3 font-medium">Node ID</th>
+                      <th className="px-3 py-3 font-medium">版本</th>
+                      <th className="px-3 py-3 font-medium">结果</th>
+                      <th className="px-3 py-3 font-medium">Checksum</th>
+                      <th className="px-3 py-3 font-medium">时间</th>
+                      <th className="px-3 py-3 font-medium">详情</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-[var(--border-default)]">
+                    {logs.map((log) => {
+                      const resultMeta = getResultMeta(log.result);
+                      return (
+                        <tr key={log.id} className="align-top">
+                          <td className="px-3 py-4 font-medium text-[var(--foreground-primary)]">
+                            {log.node_id}
+                          </td>
+                          <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                            {log.version}
+                          </td>
+                          <td className="px-3 py-4">
+                            <StatusBadge
+                              label={resultMeta.label}
+                              variant={resultMeta.variant}
+                            />
+                          </td>
+                          <td
+                            className="px-3 py-4 text-[var(--foreground-secondary)]"
+                            title={log.checksum}
+                          >
+                            {truncateHash(log.checksum)}
+                          </td>
+                          <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                            <div className="space-y-1">
+                              <p>{formatDateTime(log.created_at)}</p>
+                              <p className="text-xs">
+                                {formatRelativeTime(log.created_at)}
+                              </p>
+                            </div>
+                          </td>
+                          <td className="px-3 py-4">
+                            <SecondaryButton
+                              type="button"
+                              onClick={() => {
+                                setSelectedLogId(log.id);
+                                setFeedback(
+                                  `已选中节点 ${log.node_id} 的版本 ${log.version} 记录。`,
+                                );
+                              }}
+                              className="px-3 py-2 text-xs"
+                            >
+                              查看详情
+                            </SecondaryButton>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+        </AppCard>
+
+        <AppCard
+          title="记录详情"
+          description="展示所选应用记录的完整结果与错误信息。"
+        >
+          {selectedLog ? (
+            <div className="space-y-4">
+              <div className="flex flex-wrap gap-2">
+                <StatusBadge {...getResultMeta(selectedLog.result)} />
+                <StatusBadge
+                  label={`Node：${selectedLog.node_id}`}
+                  variant="info"
+                />
+                <StatusBadge
+                  label={`版本：${selectedLog.version}`}
+                  variant="warning"
+                />
+              </div>
+
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+                  <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
+                    创建时间
+                  </p>
+                  <p className="mt-2 text-sm text-[var(--foreground-primary)]">
+                    {formatDateTime(selectedLog.created_at)}
+                  </p>
+                </div>
+                <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+                  <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
+                    相对时间
+                  </p>
+                  <p className="mt-2 text-sm text-[var(--foreground-primary)]">
+                    {formatRelativeTime(selectedLog.created_at)}
+                  </p>
+                </div>
+                <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+                  <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
+                    目标 Checksum
+                  </p>
+                  <p className="mt-2 text-sm break-all text-[var(--foreground-primary)]">
+                    {selectedLog.checksum || '无'}
+                  </p>
+                </div>
+                <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+                  <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
+                    支持文件数
+                  </p>
+                  <p className="mt-2 text-sm text-[var(--foreground-primary)]">
+                    {selectedLog.support_file_count}
+                  </p>
+                </div>
+              </div>
+
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+                  <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
+                    主配置摘要
+                  </p>
+                  <p className="mt-2 text-sm break-all text-[var(--foreground-primary)]">
+                    {selectedLog.main_config_checksum || '无'}
+                  </p>
+                </div>
+                <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+                  <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
+                    路由配置摘要
+                  </p>
+                  <p className="mt-2 text-sm break-all text-[var(--foreground-primary)]">
+                    {selectedLog.route_config_checksum || '无'}
+                  </p>
+                </div>
+              </div>
+
+              <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+                <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
+                  应用信息
+                </p>
+                <p className="mt-3 text-sm leading-6 break-words whitespace-pre-wrap text-[var(--foreground-primary)]">
+                  {selectedLog.message || '无附加信息'}
+                </p>
+              </div>
+            </div>
+          ) : (
+            <EmptyState
+              title="未选择记录"
+              description="请先从左侧列表中选择一条应用记录查看详情。"
+            />
+          )}
+        </AppCard>
+      </div>
+    </div>
+  );
+}

openflare_server/web/features/apply-logs/types.ts

@@ -0,0 +1,12 @@
+export interface ApplyLogItem {
+  id: number;
+  node_id: string;
+  version: string;
+  result: 'success' | 'failed' | string;
+  message: string;
+  checksum: string;
+  main_config_checksum: string;
+  route_config_checksum: string;
+  support_file_count: number;
+  created_at: string;
+}

openflare_server/web/features/auth/api/auth.ts

@@ -0,0 +1,60 @@
+import { apiRequest } from '@/lib/api/client';
+import type {
+  AuthUser,
+  LoginPayload,
+  PasswordResetRequestPayload,
+  RegisterPayload,
+} from '@/types/auth';
+
+export function getCurrentUser() {
+  return apiRequest<AuthUser>('/user/self');
+}
+
+export function login(payload: LoginPayload) {
+  return apiRequest<AuthUser>('/user/login', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+}
+
+export function logout() {
+  return apiRequest<void>('/user/logout');
+}
+
+export function register(payload: RegisterPayload, turnstileToken?: string) {
+  const query = turnstileToken ? `?turnstile=${encodeURIComponent(turnstileToken)}` : '';
+
+  return apiRequest<void>(`/user/register${query}`, {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+}
+
+export function sendEmailVerification(email: string, turnstileToken?: string) {
+  const searchParams = new URLSearchParams({ email });
+  if (turnstileToken) {
+    searchParams.set('turnstile', turnstileToken);
+  }
+
+  return apiRequest<void>(`/verification?${searchParams.toString()}`);
+}
+
+export function sendPasswordResetEmail(email: string, turnstileToken?: string) {
+  const searchParams = new URLSearchParams({ email });
+  if (turnstileToken) {
+    searchParams.set('turnstile', turnstileToken);
+  }
+
+  return apiRequest<void>(`/reset_password?${searchParams.toString()}`);
+}
+
+export function resetPassword(payload: PasswordResetRequestPayload) {
+  return apiRequest<string>('/user/reset', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+}
+
+export function exchangeGitHubCode(code: string) {
+  return apiRequest<AuthUser>(`/oauth/github?code=${encodeURIComponent(code)}`);
+}

openflare_server/web/features/auth/api/public.ts

@@ -0,0 +1,6 @@
+import { apiRequest } from '@/lib/api/client';
+import type { PublicStatus } from '@/types/public-status';
+
+export function getPublicStatus() {
+  return apiRequest<PublicStatus>('/status');
+}

openflare_server/web/features/auth/components/auth-form-primitives.tsx

@@ -0,0 +1,63 @@
+import type { ButtonHTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
+
+import { cn } from '@/lib/utils/cn';
+
+export function AuthFormField({
+  label,
+  hint,
+  children,
+}: {
+  label: string;
+  hint?: string;
+  children: ReactNode;
+}) {
+  return (
+    <label className='block space-y-2'>
+      <span className='text-sm font-medium text-[var(--foreground-primary)]'>{label}</span>
+      {children}
+      {hint ? <span className='block text-xs text-[var(--foreground-secondary)]'>{hint}</span> : null}
+    </label>
+  );
+}
+
+export function AuthInput(props: InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <input
+      {...props}
+      className={cn(
+        'w-full rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-3 text-sm text-[var(--foreground-primary)] outline-none transition placeholder:text-[var(--foreground-muted)] focus:border-[var(--border-strong)] focus:ring-2 focus:ring-[var(--accent-soft)]',
+        props.className,
+      )}
+    />
+  );
+}
+
+export function AuthButton({
+  className,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      {...props}
+      className={cn(
+        'inline-flex w-full items-center justify-center rounded-2xl bg-[var(--brand-primary)] px-4 py-3 text-sm font-medium text-[var(--foreground-inverse)] transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60',
+        className,
+      )}
+    />
+  );
+}
+
+export function SecondaryButton({
+  className,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      {...props}
+      className={cn(
+        'inline-flex items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-3 text-sm font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)] disabled:cursor-not-allowed disabled:opacity-60',
+        className,
+      )}
+    />
+  );
+}

openflare_server/web/features/auth/components/dashboard-auth-guard.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { useEffect } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+
+import { LoadingState } from '@/components/feedback/loading-state';
+import { useAuth } from '@/components/providers/auth-provider';
+
+interface DashboardAuthGuardProps {
+  children: ReactNode;
+}
+
+export function DashboardAuthGuard({ children }: DashboardAuthGuardProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { isAuthenticated, isLoading } = useAuth();
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      const redirect = pathname && pathname !== '/' ? `?redirect=${encodeURIComponent(pathname)}` : '';
+      router.replace(`/login${redirect}`);
+    }
+  }, [isAuthenticated, isLoading, pathname, router]);
+
+  if (isLoading || !isAuthenticated) {
+    return (
+      <main className='flex min-h-screen items-center justify-center px-4 py-8'>
+        <LoadingState className='w-full max-w-md' />
+      </main>
+    );
+  }
+
+  return <>{children}</>;
+}

openflare_server/web/features/auth/components/github-oauth-callback.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { useMutation } from '@tanstack/react-query';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+import { InlineMessage } from '@/components/feedback/inline-message';
+import { LoadingState } from '@/components/feedback/loading-state';
+import { useAuth } from '@/components/providers/auth-provider';
+import { AppCard } from '@/components/ui/app-card';
+import { exchangeGitHubCode } from '@/features/auth/api/auth';
+
+export function GitHubOAuthCallback() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { setUser } = useAuth();
+  const [prompt, setPrompt] = useState('正在处理 GitHub 授权结果...');
+  const [message, setMessage] = useState<{ tone: 'danger' | 'success'; text: string } | null>(null);
+
+  const mutation = useMutation({
+    mutationFn: exchangeGitHubCode,
+    onSuccess: (user) => {
+      setUser(user);
+      setMessage({ tone: 'success', text: '登录成功，正在跳转...' });
+      router.replace('/');
+    },
+    onError: (error: Error) => {
+      setPrompt('授权处理失败');
+      setMessage({ tone: 'danger', text: error.message || 'GitHub 授权失败，请稍后重试。' });
+    },
+  });
+
+  useEffect(() => {
+    const code = searchParams?.get('code');
+    if (!code) {
+      setPrompt('缺少授权 code');
+      setMessage({ tone: 'danger', text: '未收到 GitHub 授权参数，请返回登录页重试。' });
+      return;
+    }
+
+    mutation.mutate(code);
+  }, [mutation, searchParams]);
+
+  return (
+    <AppCard title='GitHub OAuth 回调' description={prompt}>
+      <div className='space-y-4'>
+        {mutation.isPending ? <LoadingState /> : null}
+        {message ? <InlineMessage tone={message.tone} message={message.text} /> : null}
+      </div>
+    </AppCard>
+  );
+}

openflare_server/web/features/auth/components/login-form.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { InlineMessage } from '@/components/feedback/inline-message';
+import { useAuth } from '@/components/providers/auth-provider';
+import { AppCard } from '@/components/ui/app-card';
+import { login } from '@/features/auth/api/auth';
+import { getPublicStatus } from '@/features/auth/api/public';
+import {
+  AuthButton,
+  AuthFormField,
+  AuthInput,
+  SecondaryButton,
+} from '@/features/auth/components/auth-form-primitives';
+import { PublicAuthGuard } from '@/features/auth/components/public-auth-guard';
+
+const loginSchema = z.object({
+  username: z.string().min(1, '请输入用户名'),
+  password: z.string().min(1, '请输入密码'),
+});
+
+type LoginFormValues = z.infer<typeof loginSchema>;
+
+export function LoginForm() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { setUser } = useAuth();
+  const [errorMessage, setErrorMessage] = useState('');
+  const redirect = searchParams?.get('redirect') || '/';
+
+  const form = useForm<LoginFormValues>({
+    resolver: zodResolver(loginSchema),
+    defaultValues: {
+      username: '',
+      password: '',
+    },
+  });
+
+  const statusQuery = useQuery({
+    queryKey: ['public-status'],
+    queryFn: getPublicStatus,
+  });
+
+  const loginMutation = useMutation({
+    mutationFn: login,
+    onSuccess: (user) => {
+      setUser(user);
+      router.replace(redirect);
+    },
+    onError: (error: Error) => {
+      setErrorMessage(error.message || '登录失败，请稍后重试。');
+    },
+  });
+
+  const handleSubmit = form.handleSubmit((values) => {
+    setErrorMessage('');
+    loginMutation.mutate(values);
+  });
+
+  const handleGitHubLogin = () => {
+    const clientId = statusQuery.data?.github_client_id;
+    if (!clientId) {
+      setErrorMessage('GitHub 登录当前不可用。');
+      return;
+    }
+
+    const authorizeUrl = new URL('https://github.com/login/oauth/authorize');
+    authorizeUrl.searchParams.set('client_id', clientId);
+    authorizeUrl.searchParams.set('scope', 'user:email');
+    window.location.href = authorizeUrl.toString();
+  };
+
+  return (
+    <PublicAuthGuard>
+      <AppCard title='用户登录'>
+        <form className='space-y-4' onSubmit={handleSubmit}>
+          <AuthFormField label='用户名'>
+            <AuthInput placeholder='请输入用户名' {...form.register('username')} />
+            {form.formState.errors.username ? (
+              <span className='text-xs text-[var(--status-danger-foreground)]'>
+                {form.formState.errors.username.message}
+              </span>
+            ) : null}
+          </AuthFormField>
+
+          <AuthFormField label='密码'>
+            <AuthInput type='password' placeholder='请输入密码' {...form.register('password')} />
+            {form.formState.errors.password ? (
+              <span className='text-xs text-[var(--status-danger-foreground)]'>
+                {form.formState.errors.password.message}
+              </span>
+            ) : null}
+          </AuthFormField>
+
+          {errorMessage ? <InlineMessage tone='danger' message={errorMessage} /> : null}
+
+          <div className='flex flex-col gap-3 sm:flex-row'>
+            <AuthButton type='submit' disabled={loginMutation.isPending}>
+              {loginMutation.isPending ? '登录中...' : '登录'}
+            </AuthButton>
+            {statusQuery.data?.github_oauth ? (
+              <SecondaryButton type='button' onClick={handleGitHubLogin} className='w-full sm:w-auto'>
+                GitHub 登录
+              </SecondaryButton>
+            ) : null}
+          </div>
+        </form>
+
+        <div className='mt-6 flex flex-wrap gap-3 text-sm text-[var(--foreground-secondary)]'>
+          <Link href='/reset' className='text-[var(--brand-primary)] transition hover:opacity-80'>
+            忘记密码？
+          </Link>
+          <span>·</span>
+          <Link href='/register' className='text-[var(--brand-primary)] transition hover:opacity-80'>
+            注册
+          </Link>
+        </div>
+      </AppCard>
+    </PublicAuthGuard>
+  );
+}

openflare_server/web/features/auth/components/password-reset-confirm-form.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { useMutation } from '@tanstack/react-query';
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+
+import { InlineMessage } from '@/components/feedback/inline-message';
+import { AppCard } from '@/components/ui/app-card';
+import { resetPassword } from '@/features/auth/api/auth';
+import {
+  AuthButton,
+  AuthFormField,
+  AuthInput,
+  SecondaryButton,
+} from '@/features/auth/components/auth-form-primitives';
+
+export function PasswordResetConfirmForm() {
+  const searchParams = useSearchParams();
+  const email = searchParams?.get('email') || '';
+  const token = searchParams?.get('token') || '';
+  const [message, setMessage] = useState<{ tone: 'success' | 'danger'; text: string } | null>(null);
+
+  const mutation = useMutation({
+    mutationFn: () => resetPassword({ email, token }),
+    onSuccess: async (password) => {
+      try {
+        await navigator.clipboard.writeText(password);
+        setMessage({ tone: 'success', text: `密码已重置，新密码已复制到剪贴板：${password}` });
+      } catch {
+        setMessage({ tone: 'success', text: `密码已重置：${password}` });
+      }
+    },
+    onError: (error: Error) => {
+      setMessage({ tone: 'danger', text: error.message || '密码重置失败，请重新获取链接。' });
+    },
+  });
+
+  const missingParams = !email || !token;
+
+  return (
+    <AppCard title='密码重置确认' description='确认后，系统会生成新的随机密码。'>
+      <div className='space-y-4'>
+        <AuthFormField label='邮箱地址'>
+          <AuthInput value={email} readOnly />
+        </AuthFormField>
+
+        {missingParams ? (
+          <InlineMessage tone='danger' message='重置链接缺少必要参数，请重新发起密码重置。' />
+        ) : null}
+
+        {message ? <InlineMessage tone={message.tone} message={message.text} /> : null}
+
+        <div className='flex flex-col gap-3 sm:flex-row'>
+          <AuthButton type='button' disabled={missingParams || mutation.isPending} onClick={() => mutation.mutate()}>
+            {mutation.isPending ? '处理中...' : '确认重置密码'}
+          </AuthButton>
+          {message?.tone === 'success' ? (
+            <SecondaryButton
+              type='button'
+              onClick={async () => {
+                const password = message.text.split('：').pop() || '';
+                if (password) {
+                  await navigator.clipboard.writeText(password);
+                }
+              }}
+            >
+              再次复制密码
+            </SecondaryButton>
+          ) : null}
+        </div>
+
+        <div className='text-sm text-[var(--foreground-secondary)]'>
+          处理完成后可返回
+          <Link href='/login' className='ml-2 text-[var(--brand-primary)] transition hover:opacity-80'>
+            登录页
+          </Link>
+        </div>
+      </div>
+    </AppCard>
+  );
+}

openflare_server/web/features/auth/components/password-reset-flow.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+
+import { PasswordResetConfirmForm } from '@/features/auth/components/password-reset-confirm-form';
+import { PasswordResetRequestForm } from '@/features/auth/components/password-reset-request-form';
+
+export function PasswordResetFlow() {
+  const searchParams = useSearchParams();
+  const hasConfirmationParams = Boolean(searchParams?.get('email') && searchParams?.get('token'));
+
+  return hasConfirmationParams ? <PasswordResetConfirmForm /> : <PasswordResetRequestForm />;
+}

openflare_server/web/features/auth/components/password-reset-request-form.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import Link from 'next/link';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { InlineMessage } from '@/components/feedback/inline-message';
+import { TurnstileWidget } from '@/components/forms/turnstile-widget';
+import { AppCard } from '@/components/ui/app-card';
+import { sendPasswordResetEmail } from '@/features/auth/api/auth';
+import { getPublicStatus } from '@/features/auth/api/public';
+import {
+  AuthButton,
+  AuthFormField,
+  AuthInput,
+} from '@/features/auth/components/auth-form-primitives';
+import { PublicAuthGuard } from '@/features/auth/components/public-auth-guard';
+
+const resetRequestSchema = z.object({
+  email: z.string().email('请输入有效邮箱地址'),
+});
+
+type ResetRequestFormValues = z.infer<typeof resetRequestSchema>;
+
+export function PasswordResetRequestForm() {
+  const [turnstileToken, setTurnstileToken] = useState('');
+  const [message, setMessage] = useState<{ tone: 'success' | 'danger' | 'info'; text: string } | null>(null);
+
+  const form = useForm<ResetRequestFormValues>({
+    resolver: zodResolver(resetRequestSchema),
+    defaultValues: { email: '' },
+  });
+
+  const statusQuery = useQuery({
+    queryKey: ['public-status'],
+    queryFn: getPublicStatus,
+  });
+
+  const mutation = useMutation({
+    mutationFn: (values: ResetRequestFormValues) =>
+      sendPasswordResetEmail(values.email, turnstileToken || undefined),
+    onSuccess: () => {
+      setMessage({ tone: 'success', text: '重置邮件发送成功，请检查邮箱。' });
+      form.reset();
+    },
+    onError: (error: Error) => {
+      setMessage({ tone: 'danger', text: error.message || '重置邮件发送失败，请稍后重试。' });
+    },
+  });
+
+  const handleSubmit = form.handleSubmit((values) => {
+    setMessage(null);
+    if (statusQuery.data?.turnstile_check && !turnstileToken) {
+      setMessage({ tone: 'info', text: '请先完成人机验证。' });
+      return;
+    }
+    mutation.mutate(values);
+  });
+
+  return (
+    <PublicAuthGuard>
+      <AppCard title='密码重置' description='提交后，系统会向你的注册邮箱发送重置链接。'>
+        <form className='space-y-4' onSubmit={handleSubmit}>
+          <AuthFormField label='邮箱地址'>
+            <AuthInput type='email' placeholder='请输入邮箱地址' {...form.register('email')} />
+            {form.formState.errors.email ? (
+              <span className='text-xs text-[var(--status-danger-foreground)]'>
+                {form.formState.errors.email.message}
+              </span>
+            ) : null}
+          </AuthFormField>
+
+          {statusQuery.data?.turnstile_check && statusQuery.data.turnstile_site_key ? (
+            <TurnstileWidget
+              siteKey={statusQuery.data.turnstile_site_key}
+              onVerify={(token) => setTurnstileToken(token)}
+              onExpire={() => setTurnstileToken('')}
+              onError={() => setTurnstileToken('')}
+            />
+          ) : null}
+
+          {message ? <InlineMessage tone={message.tone} message={message.text} /> : null}
+
+          <AuthButton type='submit' disabled={mutation.isPending}>
+            {mutation.isPending ? '提交中...' : '发送重置邮件'}
+          </AuthButton>
+        </form>
+
+        <div className='mt-6 text-sm text-[var(--foreground-secondary)]'>
+          想起密码了？
+          <Link href='/login' className='ml-2 text-[var(--brand-primary)] transition hover:opacity-80'>
+            返回登录
+          </Link>
+        </div>
+      </AppCard>
+    </PublicAuthGuard>
+  );
+}

openflare_server/web/features/auth/components/public-auth-guard.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { useEffect } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+
+import { LoadingState } from '@/components/feedback/loading-state';
+import { useAuth } from '@/components/providers/auth-provider';
+
+interface PublicAuthGuardProps {
+  children: ReactNode;
+}
+
+export function PublicAuthGuard({ children }: PublicAuthGuardProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { isAuthenticated, isLoading } = useAuth();
+
+  useEffect(() => {
+    if (!isLoading && isAuthenticated) {
+      const redirect = searchParams?.get('redirect');
+      router.replace(redirect || '/');
+    }
+  }, [isAuthenticated, isLoading, router, searchParams]);
+
+  if (isLoading) {
+    return <LoadingState />;
+  }
+
+  if (isAuthenticated) {
+    return null;
+  }
+
+  return <>{children}</>;
+}

openflare_server/web/features/auth/components/public-route-placeholder.tsx

@@ -0,0 +1,23 @@
+import { FeaturePlaceholder } from '@/components/feedback/feature-placeholder';
+
+interface PublicRoutePlaceholderProps {
+  title: string;
+  description: string;
+}
+
+export function PublicRoutePlaceholder({
+  title,
+  description,
+}: PublicRoutePlaceholderProps) {
+  return (
+    <FeaturePlaceholder
+      title={title}
+      description={description}
+      milestones={[
+        '认证页路由入口已建立，便于阶段 2 接入真实表单。',
+        '公共布局已统一，可复用品牌区、说明区与回跳入口。',
+        '后续将在此处补齐表单校验、Session 兼容与 OAuth 回调处理。',
+      ]}
+    />
+  );
+}

openflare_server/web/features/auth/components/register-form.tsx

@@ -0,0 +1,225 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { InlineMessage } from '@/components/feedback/inline-message';
+import { TurnstileWidget } from '@/components/forms/turnstile-widget';
+import { AppCard } from '@/components/ui/app-card';
+import {
+  register as registerUser,
+  sendEmailVerification,
+} from '@/features/auth/api/auth';
+import { getPublicStatus } from '@/features/auth/api/public';
+import {
+  AuthButton,
+  AuthFormField,
+  AuthInput,
+  SecondaryButton,
+} from '@/features/auth/components/auth-form-primitives';
+import { PublicAuthGuard } from '@/features/auth/components/public-auth-guard';
+
+const baseSchemaObject = z.object({
+  username: z.string().min(1, '请输入用户名').max(12, '用户名最长 12 位'),
+  password: z.string().min(8, '密码至少 8 位').max(20, '密码最长 20 位'),
+  password2: z.string().min(8, '请再次输入密码'),
+  email: z.string().optional(),
+  verification_code: z.string().optional(),
+});
+
+const baseSchema = baseSchemaObject.refine((data) => data.password === data.password2, {
+  message: '两次输入的密码不一致',
+  path: ['password2'],
+});
+
+type RegisterFormValues = z.infer<typeof baseSchema>;
+
+export function RegisterForm() {
+  const router = useRouter();
+  const [turnstileToken, setTurnstileToken] = useState('');
+  const [message, setMessage] = useState<{ tone: 'success' | 'danger' | 'info'; text: string } | null>(null);
+
+  const statusQuery = useQuery({
+    queryKey: ['public-status'],
+    queryFn: getPublicStatus,
+  });
+
+  const needsEmailVerification = statusQuery.data?.email_verification ?? false;
+  const needsTurnstile = statusQuery.data?.turnstile_check ?? false;
+
+  const schema = useMemo(() => {
+    if (!needsEmailVerification) {
+      return baseSchema;
+    }
+
+    return baseSchemaObject
+      .extend({
+        email: z.string().email('请输入有效邮箱地址'),
+        verification_code: z.string().min(1, '请输入验证码'),
+      })
+      .refine((data) => data.password === data.password2, {
+        message: '两次输入的密码不一致',
+        path: ['password2'],
+      });
+  }, [needsEmailVerification]);
+
+  const form = useForm<RegisterFormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      username: '',
+      password: '',
+      password2: '',
+      email: '',
+      verification_code: '',
+    },
+  });
+
+  const registerMutation = useMutation({
+    mutationFn: (values: RegisterFormValues) =>
+      registerUser(
+        {
+          username: values.username,
+          password: values.password,
+          email: values.email,
+          verification_code: values.verification_code,
+        },
+        turnstileToken || undefined,
+      ),
+    onSuccess: () => {
+      router.replace('/login');
+    },
+    onError: (error: Error) => {
+      setMessage({ tone: 'danger', text: error.message || '注册失败，请稍后重试。' });
+    },
+  });
+
+  const verificationMutation = useMutation({
+    mutationFn: async () => {
+      const email = form.getValues('email');
+      if (!email) {
+        form.setError('email', { message: '请输入邮箱地址' });
+        return;
+      }
+      await sendEmailVerification(email, turnstileToken || undefined);
+    },
+    onSuccess: () => {
+      setMessage({ tone: 'success', text: '验证码发送成功，请检查邮箱。' });
+    },
+    onError: (error: Error) => {
+      setMessage({ tone: 'danger', text: error.message || '验证码发送失败，请稍后重试。' });
+    },
+  });
+
+  const handleSubmit = form.handleSubmit((values) => {
+    setMessage(null);
+    if (needsTurnstile && !turnstileToken) {
+      setMessage({ tone: 'info', text: '请先完成人机验证。' });
+      return;
+    }
+    registerMutation.mutate(values);
+  });
+
+  return (
+    <PublicAuthGuard>
+      <AppCard title='新用户注册' description='兼容现有密码注册链路，后续可继续扩展第三方注册。'>
+        <form className='space-y-4' onSubmit={handleSubmit}>
+          <AuthFormField label='用户名' hint='最长 12 位'>
+            <AuthInput placeholder='请输入用户名' {...form.register('username')} />
+            {form.formState.errors.username ? (
+              <span className='text-xs text-[var(--status-danger-foreground)]'>
+                {form.formState.errors.username.message}
+              </span>
+            ) : null}
+          </AuthFormField>
+
+          <AuthFormField label='密码' hint='最短 8 位，最长 20 位'>
+            <AuthInput type='password' placeholder='请输入密码' {...form.register('password')} />
+            {form.formState.errors.password ? (
+              <span className='text-xs text-[var(--status-danger-foreground)]'>
+                {form.formState.errors.password.message}
+              </span>
+            ) : null}
+          </AuthFormField>
+
+          <AuthFormField label='确认密码'>
+            <AuthInput type='password' placeholder='请再次输入密码' {...form.register('password2')} />
+            {form.formState.errors.password2 ? (
+              <span className='text-xs text-[var(--status-danger-foreground)]'>
+                {form.formState.errors.password2.message}
+              </span>
+            ) : null}
+          </AuthFormField>
+
+          {needsEmailVerification ? (
+            <>
+              <AuthFormField label='邮箱地址'>
+                <AuthInput type='email' placeholder='请输入邮箱地址' {...form.register('email')} />
+                {form.formState.errors.email ? (
+                  <span className='text-xs text-[var(--status-danger-foreground)]'>
+                    {form.formState.errors.email.message}
+                  </span>
+                ) : null}
+              </AuthFormField>
+
+              <AuthFormField label='邮箱验证码'>
+                <div className='flex flex-col gap-3 sm:flex-row'>
+                  <AuthInput
+                    placeholder='请输入验证码'
+                    className='flex-1'
+                    {...form.register('verification_code')}
+                  />
+                  <SecondaryButton
+                    type='button'
+                    onClick={() => {
+                      if (needsTurnstile && !turnstileToken) {
+                        setMessage({ tone: 'info', text: '请先完成人机验证。' });
+                        return;
+                      }
+                      setMessage(null);
+                      verificationMutation.mutate();
+                    }}
+                    disabled={verificationMutation.isPending}
+                  >
+                    {verificationMutation.isPending ? '发送中...' : '获取验证码'}
+                  </SecondaryButton>
+                </div>
+                {form.formState.errors.verification_code ? (
+                  <span className='text-xs text-[var(--status-danger-foreground)]'>
+                    {form.formState.errors.verification_code.message}
+                  </span>
+                ) : null}
+              </AuthFormField>
+            </>
+          ) : null}
+
+          {needsTurnstile && statusQuery.data?.turnstile_site_key ? (
+            <TurnstileWidget
+              siteKey={statusQuery.data.turnstile_site_key}
+              onVerify={(token) => setTurnstileToken(token)}
+              onExpire={() => setTurnstileToken('')}
+              onError={() => setTurnstileToken('')}
+            />
+          ) : null}
+
+          {message ? <InlineMessage tone={message.tone} message={message.text} /> : null}
+
+          <AuthButton type='submit' disabled={registerMutation.isPending}>
+            {registerMutation.isPending ? '注册中...' : '注册'}
+          </AuthButton>
+        </form>
+
+        <div className='mt-6 text-sm text-[var(--foreground-secondary)]'>
+          已有账户？
+          <Link href='/login' className='ml-2 text-[var(--brand-primary)] transition hover:opacity-80'>
+            点击登录
+          </Link>
+        </div>
+      </AppCard>
+    </PublicAuthGuard>
+  );
+}

openflare_server/web/features/config-versions/api/config-versions.ts

@@ -0,0 +1,31 @@
+import { apiRequest } from '@/lib/api/client';
+
+import type {
+  ConfigDiffResult,
+  ConfigPreviewResult,
+  ConfigVersionItem,
+} from '@/features/config-versions/types';
+
+export function getConfigVersions() {
+  return apiRequest<ConfigVersionItem[]>('/config-versions/');
+}
+
+export function getConfigVersionPreview() {
+  return apiRequest<ConfigPreviewResult>('/config-versions/preview');
+}
+
+export function getConfigVersionDiff() {
+  return apiRequest<ConfigDiffResult>('/config-versions/diff');
+}
+
+export function publishConfigVersion() {
+  return apiRequest<ConfigVersionItem>('/config-versions/publish', {
+    method: 'POST',
+  });
+}
+
+export function activateConfigVersion(id: number) {
+  return apiRequest<ConfigVersionItem>(`/config-versions/${id}/activate`, {
+    method: 'PUT',
+  });
+}

openflare_server/web/features/config-versions/components/config-version-snapshot-modal.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { AppModal } from '@/components/ui/app-modal';
+import type { ConfigVersionItem } from '@/features/config-versions/types';
+import {
+  CodeBlock,
+  SecondaryButton,
+} from '@/features/shared/components/resource-primitives';
+import { formatDateTime } from '@/lib/utils/date';
+
+export function ConfigVersionSnapshotModal({
+  version,
+  onClose,
+}: {
+  version: ConfigVersionItem | null;
+  onClose: () => void;
+}) {
+  return (
+    <AppModal
+      isOpen={Boolean(version)}
+      onClose={onClose}
+      title={version ? `版本 ${version.version}` : '查看快照'}
+      description="在弹窗中查看快照 JSON 与渲染结果，避免把页面主视图撑长。"
+      size="xl"
+      footer={
+        <div className="flex justify-end">
+          <SecondaryButton type="button" onClick={onClose}>
+            关闭
+          </SecondaryButton>
+        </div>
+      }
+    >
+      {version ? (
+        <div className="space-y-5">
+          <div className="grid gap-4 md:grid-cols-3">
+            <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+              <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
+                Checksum
+              </p>
+              <p className="mt-2 text-sm break-all text-[var(--foreground-primary)]">
+                {version.checksum}
+              </p>
+            </div>
+            <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+              <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
+                创建人
+              </p>
+              <p className="mt-2 text-sm text-[var(--foreground-primary)]">
+                {version.created_by || '系统'}
+              </p>
+            </div>
+            <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+              <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
+                创建时间
+              </p>
+              <p className="mt-2 text-sm text-[var(--foreground-primary)]">
+                {formatDateTime(version.created_at)}
+              </p>
+            </div>
+          </div>
+
+          <div>
+            <p className="mb-2 text-sm font-semibold text-[var(--foreground-primary)]">
+              快照 JSON
+            </p>
+            <CodeBlock className="max-h-96 whitespace-pre-wrap">
+              {version.snapshot_json}
+            </CodeBlock>
+          </div>
+          <div>
+            <p className="mb-2 text-sm font-semibold text-[var(--foreground-primary)]">
+              主配置
+            </p>
+            <CodeBlock className="max-h-96 whitespace-pre-wrap">
+              {version.main_config}
+            </CodeBlock>
+          </div>
+          <div>
+            <p className="mb-2 text-sm font-semibold text-[var(--foreground-primary)]">
+              路由配置
+            </p>
+            <CodeBlock className="max-h-[32rem] whitespace-pre-wrap">
+              {version.rendered_config}
+            </CodeBlock>
+          </div>
+        </div>
+      ) : null}
+    </AppModal>
+  );
+}

openflare_server/web/features/config-versions/components/config-versions-page.tsx

@@ -0,0 +1,604 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { EmptyState } from '@/components/feedback/empty-state';
+import { ErrorState } from '@/components/feedback/error-state';
+import { InlineMessage } from '@/components/feedback/inline-message';
+import { LoadingState } from '@/components/feedback/loading-state';
+import { PageHeader } from '@/components/layout/page-header';
+import { AppCard } from '@/components/ui/app-card';
+import { StatusBadge } from '@/components/ui/status-badge';
+import {
+  activateConfigVersion,
+  getConfigVersionDiff,
+  getConfigVersionPreview,
+  getConfigVersions,
+  publishConfigVersion,
+} from '@/features/config-versions/api/config-versions';
+import { ConfigVersionSnapshotModal } from '@/features/config-versions/components/config-version-snapshot-modal';
+import type {
+  ConfigOptionDiffItem,
+  ConfigDiffResult,
+  ConfigPreviewResult,
+  ConfigVersionItem,
+  SupportFile,
+} from '@/features/config-versions/types';
+import {
+  CodeBlock,
+  PrimaryButton,
+  SecondaryButton,
+} from '@/features/shared/components/resource-primitives';
+import { formatDateTime } from '@/lib/utils/date';
+
+const versionsQueryKey = ['config-versions'];
+
+type FeedbackState = {
+  tone: 'info' | 'success' | 'danger';
+  message: string;
+};
+
+function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : '请求失败，请稍后重试。';
+}
+
+function truncateChecksum(checksum: string) {
+  if (!checksum) {
+    return '—';
+  }
+
+  return checksum.length > 16 ? `${checksum.slice(0, 16)}...` : checksum;
+}
+
+function hasConfigDiff(diff: ConfigDiffResult) {
+  return (
+    diff.added_domains.length > 0 ||
+    diff.removed_domains.length > 0 ||
+    diff.modified_domains.length > 0 ||
+    diff.main_config_changed ||
+    diff.changed_option_keys.length > 0 ||
+    !diff.active_version
+  );
+}
+
+function DiffList({ title, items }: { title: string; items: string[] }) {
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between gap-3">
+        <p className="text-sm font-semibold text-[var(--foreground-primary)]">
+          {title}
+        </p>
+        <StatusBadge
+          label={`${items.length} 项`}
+          variant={items.length > 0 ? 'info' : 'warning'}
+        />
+      </div>
+      {items.length > 0 ? (
+        <div className="flex flex-wrap gap-2">
+          {items.map((item) => (
+            <span
+              key={item}
+              className="rounded-full border border-[var(--border-default)] bg-[var(--surface-elevated)] px-3 py-1 text-xs text-[var(--foreground-secondary)]"
+            >
+              {item}
+            </span>
+          ))}
+        </div>
+      ) : (
+        <p className="text-sm text-[var(--foreground-secondary)]">
+          当前无相关变更。
+        </p>
+      )}
+    </div>
+  );
+}
+
+function SupportFilesList({ files }: { files: SupportFile[] }) {
+  if (files.length === 0) {
+    return (
+      <p className="text-sm text-[var(--foreground-secondary)]">
+        当前发布不需要额外支持文件。
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {files.map((file) => (
+        <details
+          key={file.path}
+          className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-3"
+        >
+          <summary className="cursor-pointer text-sm font-medium text-[var(--foreground-primary)]">
+            {file.path}
+          </summary>
+          <CodeBlock className="mt-3 max-h-72 whitespace-pre-wrap">
+            {file.content}
+          </CodeBlock>
+        </details>
+      ))}
+    </div>
+  );
+}
+
+function renderOptionValue(value: string) {
+  return value === '' ? '空' : value;
+}
+
+function OptionDiffTable({ items }: { items: ConfigOptionDiffItem[] }) {
+  if (items.length === 0) {
+    return (
+      <p className="text-sm text-[var(--foreground-secondary)]">
+        当前无 OpenResty 性能参数变化。
+      </p>
+    );
+  }
+
+  return (
+    <div className="overflow-x-auto rounded-2xl border border-[var(--border-default)]">
+      <table className="min-w-full divide-y divide-[var(--border-default)] text-left text-sm">
+        <thead>
+          <tr className="bg-[var(--surface-elevated)] text-[var(--foreground-secondary)]">
+            <th className="px-3 py-3 font-medium">参数</th>
+            <th className="px-3 py-3 font-medium">当前激活值</th>
+            <th className="px-3 py-3 font-medium">待发布值</th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-[var(--border-default)]">
+          {items.map((item) => (
+            <tr key={item.key} className="align-top">
+              <td className="px-3 py-3 font-medium text-[var(--foreground-primary)]">
+                {item.key}
+              </td>
+              <td className="px-3 py-3 text-[var(--foreground-secondary)]">
+                <code>{renderOptionValue(item.previous_value)}</code>
+              </td>
+              <td className="px-3 py-3 text-[var(--foreground-secondary)]">
+                <code>{renderOptionValue(item.current_value)}</code>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function PublishPreviewCard({
+  preview,
+  diff,
+  activeVersion,
+  isPublishing,
+  onConfirm,
+  onCancel,
+}: {
+  preview: ConfigPreviewResult;
+  diff: ConfigDiffResult;
+  activeVersion: ConfigVersionItem | null;
+  isPublishing: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  const canPublish = preview.route_count > 0 && hasConfigDiff(diff);
+
+  return (
+    <AppCard
+      title="发布前预览"
+      description="先核对增删改域名、渲染结果与支持文件，再决定是否发布为新激活版本。"
+      action={
+        <StatusBadge
+          label={`启用规则 ${preview.route_count} 条`}
+          variant="info"
+        />
+      }
+    >
+      <div className="space-y-5">
+        <div className="grid gap-4 md:grid-cols-4">
+          <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+            <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
+              当前激活版本
+            </p>
+            <p className="mt-2 text-sm text-[var(--foreground-primary)]">
+              {diff.active_version || '无'}
+            </p>
+          </div>
+          <div className="rounded-2xl border border-[var(--status-success-border)] bg-[var(--status-success-soft)] px-4 py-4">
+            <p className="text-xs tracking-[0.2em] text-[var(--status-success-foreground)] uppercase">
+              新增域名
+            </p>
+            <p className="mt-2 text-lg font-semibold text-[var(--status-success-foreground)]">
+              {diff.added_domains.length}
+            </p>
+          </div>
+          <div className="rounded-2xl border border-[var(--status-warning-border)] bg-[var(--status-warning-soft)] px-4 py-4">
+            <p className="text-xs tracking-[0.2em] text-[var(--status-warning-foreground)] uppercase">
+              删除域名
+            </p>
+            <p className="mt-2 text-lg font-semibold text-[var(--status-warning-foreground)]">
+              {diff.removed_domains.length}
+            </p>
+          </div>
+          <div className="rounded-2xl border border-[var(--status-info-border)] bg-[var(--status-info-soft)] px-4 py-4">
+            <p className="text-xs tracking-[0.2em] text-[var(--status-info-foreground)] uppercase">
+              修改域名
+            </p>
+            <p className="mt-2 text-lg font-semibold text-[var(--status-info-foreground)]">
+              {diff.modified_domains.length}
+            </p>
+          </div>
+          <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+            <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
+              主配置变化
+            </p>
+            <p className="mt-2 text-lg font-semibold text-[var(--foreground-primary)]">
+              {diff.main_config_changed ? '已变化' : '无变化'}
+            </p>
+          </div>
+        </div>
+
+        {!canPublish ? (
+          <InlineMessage
+            tone="info"
+            message="当前规则与已激活版本一致，已阻止重复发布。"
+          />
+        ) : null}
+
+        <div className="grid gap-5 xl:grid-cols-3">
+          <DiffList title="新增域名" items={diff.added_domains} />
+          <DiffList title="删除域名" items={diff.removed_domains} />
+          <DiffList title="修改域名" items={diff.modified_domains} />
+        </div>
+
+        <div className="space-y-3">
+          <div className="flex items-center justify-between gap-3">
+            <p className="text-sm font-semibold text-[var(--foreground-primary)]">
+              OpenResty 参数变化
+            </p>
+            <StatusBadge
+              label={`${diff.changed_option_keys.length} 项`}
+              variant={diff.changed_option_keys.length > 0 ? 'info' : 'warning'}
+            />
+          </div>
+          <OptionDiffTable items={diff.changed_option_details} />
+        </div>
+
+        {diff.main_config_changed && activeVersion ? (
+          <div className="grid gap-5 xl:grid-cols-2">
+            <div>
+              <div className="mb-2 flex flex-wrap items-center justify-between gap-3">
+                <p className="text-sm font-semibold text-[var(--foreground-primary)]">
+                  Current Active Main Config
+                </p>
+                <StatusBadge label={activeVersion.version} variant="info" />
+              </div>
+              <CodeBlock className="max-h-[32rem] whitespace-pre-wrap">
+                {activeVersion.main_config}
+              </CodeBlock>
+            </div>
+            <div>
+              <div className="mb-2 flex flex-wrap items-center justify-between gap-3">
+                <p className="text-sm font-semibold text-[var(--foreground-primary)]">
+                  Pending Main Config
+                </p>
+                <p className="text-xs text-[var(--foreground-secondary)]">
+                  {`Checksum: ${preview.checksum}`}
+                </p>
+              </div>
+              <CodeBlock className="max-h-[32rem] whitespace-pre-wrap">
+                {preview.main_config}
+              </CodeBlock>
+            </div>
+          </div>
+        ) : null}
+
+        {/* Legacy duplicated main config preview block kept commented out while
+            we replace it with an explicit active-vs-pending comparison above.
+        {diff.main_config_changed && activeVersion ? (
+          <div className="grid gap-5 xl:grid-cols-2">
+            <div>
+              <div className="mb-2 flex flex-wrap items-center justify-between gap-3">
+                <p className="text-sm font-semibold text-[var(--foreground-primary)]">
+                  褰撳墠婵€娲讳富閰嶇疆
+                </p>
+                <StatusBadge label={activeVersion.version} variant="info" />
+              </div>
+              <CodeBlock className="max-h-[32rem] whitespace-pre-wrap">
+                {activeVersion.main_config}
+              </CodeBlock>
+            </div>
+            <div>
+              <div className="mb-2 flex flex-wrap items-center justify-between gap-3">
+                <p className="text-sm font-semibold text-[var(--foreground-primary)]">
+                  寰呭彂甯冧富閰嶇疆
+                </p>
+                <p className="text-xs text-[var(--foreground-secondary)]">
+                  Checksum锛歿preview.checksum}
+                </p>
+              </div>
+              <CodeBlock className="max-h-[32rem] whitespace-pre-wrap">
+                {preview.main_config}
+              </CodeBlock>
+            </div>
+          </div>
+        ) : null}
+        */}
+
+        <div>
+          <div className="mb-2 flex flex-wrap items-center justify-between gap-3">
+            <p className="text-sm font-semibold text-[var(--foreground-primary)]">
+              主配置
+            </p>
+            <p className="text-xs text-[var(--foreground-secondary)]">
+              Checksum：{preview.checksum}
+            </p>
+          </div>
+          <CodeBlock className="max-h-[32rem] whitespace-pre-wrap">
+            {preview.main_config}
+          </CodeBlock>
+        </div>
+
+        <div>
+          <div className="mb-2 flex flex-wrap items-center justify-between gap-3">
+            <p className="text-sm font-semibold text-[var(--foreground-primary)]">
+              路由配置
+            </p>
+          </div>
+          <CodeBlock className="max-h-[32rem] whitespace-pre-wrap">
+            {preview.rendered_config}
+          </CodeBlock>
+        </div>
+
+        <div>
+          <p className="mb-2 text-sm font-semibold text-[var(--foreground-primary)]">
+            支持文件
+          </p>
+          <SupportFilesList files={preview.support_files} />
+        </div>
+
+        <div className="flex flex-wrap gap-3">
+          <PrimaryButton
+            type="button"
+            onClick={onConfirm}
+            disabled={isPublishing || !canPublish}
+          >
+            {isPublishing ? '发布中...' : '确认发布'}
+          </PrimaryButton>
+          <SecondaryButton
+            type="button"
+            onClick={onCancel}
+            disabled={isPublishing}
+          >
+            取消预览
+          </SecondaryButton>
+        </div>
+      </div>
+    </AppCard>
+  );
+}
+
+export function ConfigVersionsPage() {
+  const queryClient = useQueryClient();
+  const [feedback, setFeedback] = useState<FeedbackState | null>(null);
+  const [selectedVersionId, setSelectedVersionId] = useState<number | null>(
+    null,
+  );
+  const [publishPreview, setPublishPreview] = useState<{
+    preview: ConfigPreviewResult;
+    diff: ConfigDiffResult;
+  } | null>(null);
+  const [isPreviewLoading, setIsPreviewLoading] = useState(false);
+
+  const versionsQuery = useQuery({
+    queryKey: versionsQueryKey,
+    queryFn: getConfigVersions,
+  });
+
+  const versions = useMemo(
+    () => versionsQuery.data ?? [],
+    [versionsQuery.data],
+  );
+  const activeVersion = useMemo(
+    () => versions.find((item) => item.is_active) ?? null,
+    [versions],
+  );
+  const selectedVersion = useMemo(
+    () => versions.find((item) => item.id === selectedVersionId) ?? null,
+    [selectedVersionId, versions],
+  );
+
+  const publishMutation = useMutation({
+    mutationFn: publishConfigVersion,
+    onSuccess: async (version) => {
+      setFeedback({
+        tone: 'success',
+        message: `发布成功，版本 ${version.version}`,
+      });
+      setPublishPreview(null);
+      setSelectedVersionId(version.id);
+      await queryClient.invalidateQueries({ queryKey: versionsQueryKey });
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const activateMutation = useMutation({
+    mutationFn: activateConfigVersion,
+    onSuccess: async (version) => {
+      setFeedback({
+        tone: 'success',
+        message: `已激活版本 ${version.version}`,
+      });
+      setSelectedVersionId(version.id);
+      await queryClient.invalidateQueries({ queryKey: versionsQueryKey });
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const handleOpenPublishPreview = async () => {
+    setFeedback(null);
+    setIsPreviewLoading(true);
+
+    try {
+      const [preview, diff] = await Promise.all([
+        getConfigVersionPreview(),
+        getConfigVersionDiff(),
+      ]);
+      setPublishPreview({ preview, diff });
+    } catch (error) {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    } finally {
+      setIsPreviewLoading(false);
+    }
+  };
+
+  const handleActivate = (version: ConfigVersionItem) => {
+    if (version.is_active) {
+      return;
+    }
+
+    if (!window.confirm(`确认激活版本 ${version.version} 吗？`)) {
+      return;
+    }
+
+    setFeedback(null);
+    activateMutation.mutate(version.id);
+  };
+
+  return (
+    <>
+      <div className="space-y-6">
+        <PageHeader
+          title="配置版本"
+          description="查看历史快照、预览待发布配置差异，并在需要时重新激活旧版本。"
+          action={
+            <PrimaryButton
+              type="button"
+              onClick={handleOpenPublishPreview}
+              disabled={isPreviewLoading}
+            >
+              {isPreviewLoading ? '加载预览中...' : '预览并发布'}
+            </PrimaryButton>
+          }
+        />
+
+        {feedback ? (
+          <InlineMessage tone={feedback.tone} message={feedback.message} />
+        ) : null}
+
+        {publishPreview ? (
+          <PublishPreviewCard
+            preview={publishPreview.preview}
+            diff={publishPreview.diff}
+            activeVersion={activeVersion}
+            isPublishing={publishMutation.isPending}
+            onConfirm={() => publishMutation.mutate()}
+            onCancel={() => setPublishPreview(null)}
+          />
+        ) : null}
+
+        <AppCard
+          title="历史版本"
+          description="发布成功后会立即刷新列表，不再需要手动刷新页面。"
+          action={
+            <SecondaryButton
+              type="button"
+              onClick={() =>
+                void queryClient.invalidateQueries({
+                  queryKey: versionsQueryKey,
+                })
+              }
+            >
+              刷新列表
+            </SecondaryButton>
+          }
+        >
+          {versionsQuery.isLoading ? (
+            <LoadingState />
+          ) : versionsQuery.isError ? (
+            <ErrorState
+              title="版本列表加载失败"
+              description={getErrorMessage(versionsQuery.error)}
+            />
+          ) : versions.length === 0 ? (
+            <EmptyState
+              title="暂无历史版本"
+              description="当前还没有可查看的发布记录，请先从反代规则页触发一次发布。"
+            />
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="min-w-full divide-y divide-[var(--border-default)] text-left text-sm">
+                <thead>
+                  <tr className="text-[var(--foreground-secondary)]">
+                    <th className="px-3 py-3 font-medium">版本号</th>
+                    <th className="px-3 py-3 font-medium">状态</th>
+                    <th className="px-3 py-3 font-medium">创建人</th>
+                    <th className="px-3 py-3 font-medium">Checksum</th>
+                    <th className="px-3 py-3 font-medium">创建时间</th>
+                    <th className="px-3 py-3 font-medium">操作</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-[var(--border-default)]">
+                  {versions.map((version) => (
+                    <tr key={version.id} className="align-top">
+                      <td className="px-3 py-4 font-medium text-[var(--foreground-primary)]">
+                        {version.version}
+                      </td>
+                      <td className="px-3 py-4">
+                        <StatusBadge
+                          label={version.is_active ? '当前激活' : '历史版本'}
+                          variant={version.is_active ? 'success' : 'info'}
+                        />
+                      </td>
+                      <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                        {version.created_by || '系统'}
+                      </td>
+                      <td
+                        className="px-3 py-4 text-[var(--foreground-secondary)]"
+                        title={version.checksum}
+                      >
+                        {truncateChecksum(version.checksum)}
+                      </td>
+                      <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                        {formatDateTime(version.created_at)}
+                      </td>
+                      <td className="px-3 py-4">
+                        <div className="flex flex-wrap gap-2">
+                          <SecondaryButton
+                            type="button"
+                            onClick={() => setSelectedVersionId(version.id)}
+                            className="px-3 py-2 text-xs"
+                          >
+                            查看快照
+                          </SecondaryButton>
+                          {!version.is_active ? (
+                            <PrimaryButton
+                              type="button"
+                              onClick={() => handleActivate(version)}
+                              disabled={activateMutation.isPending}
+                              className="px-3 py-2 text-xs"
+                            >
+                              重新激活
+                            </PrimaryButton>
+                          ) : null}
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </AppCard>
+      </div>
+
+      <ConfigVersionSnapshotModal
+        version={selectedVersion}
+        onClose={() => setSelectedVersionId(null)}
+      />
+    </>
+  );
+}

openflare_server/web/features/config-versions/types.ts

@@ -0,0 +1,43 @@
+export interface ConfigVersionItem {
+  id: number;
+  version: string;
+  snapshot_json: string;
+  main_config: string;
+  rendered_config: string;
+  support_files_json: string;
+  checksum: string;
+  is_active: boolean;
+  created_by: string;
+  created_at: string;
+}
+
+export interface SupportFile {
+  path: string;
+  content: string;
+}
+
+export interface ConfigPreviewResult {
+  snapshot_json: string;
+  main_config: string;
+  route_config: string;
+  rendered_config: string;
+  support_files: SupportFile[];
+  checksum: string;
+  route_count: number;
+}
+
+export interface ConfigDiffResult {
+  active_version?: string;
+  added_domains: string[];
+  removed_domains: string[];
+  modified_domains: string[];
+  main_config_changed: boolean;
+  changed_option_keys: string[];
+  changed_option_details: ConfigOptionDiffItem[];
+}
+
+export interface ConfigOptionDiffItem {
+  key: string;
+  previous_value: string;
+  current_value: string;
+}

openflare_server/web/features/dashboard/api/overview.ts

@@ -0,0 +1,38 @@
+import { apiRequest } from '@/lib/api/client';
+
+import type { DashboardOverview } from '@/features/dashboard/types';
+
+function arrayOrEmpty<T>(value: T[] | null | undefined) {
+  return Array.isArray(value) ? value : [];
+}
+
+function normalizeDashboardOverview(
+  overview: DashboardOverview | null | undefined,
+): DashboardOverview | null {
+  if (!overview) {
+    return null;
+  }
+
+  return {
+    ...overview,
+    nodes: arrayOrEmpty(overview.nodes),
+    distributions: {
+      ...overview.distributions,
+      source_countries: arrayOrEmpty(overview.distributions?.source_countries),
+      status_codes: arrayOrEmpty(overview.distributions?.status_codes),
+      top_domains: arrayOrEmpty(overview.distributions?.top_domains),
+    },
+    trends: {
+      ...overview.trends,
+      traffic_24h: arrayOrEmpty(overview.trends?.traffic_24h),
+      capacity_24h: arrayOrEmpty(overview.trends?.capacity_24h),
+      network_24h: arrayOrEmpty(overview.trends?.network_24h),
+      disk_io_24h: arrayOrEmpty(overview.trends?.disk_io_24h),
+    },
+  };
+}
+
+export async function getDashboardOverview() {
+  const overview = await apiRequest<DashboardOverview>('/dashboard/overview');
+  return normalizeDashboardOverview(overview);
+}

openflare_server/web/features/dashboard/components/dashboard-overview.tsx

@@ -0,0 +1,424 @@
+'use client';
+
+import Link from 'next/link';
+import { useQuery } from '@tanstack/react-query';
+
+import { RankChart } from '@/components/data/rank-chart';
+import { TrendChart } from '@/components/data/trend-chart';
+import { EmptyState } from '@/components/feedback/empty-state';
+import { ErrorState } from '@/components/feedback/error-state';
+import { LoadingState } from '@/components/feedback/loading-state';
+import { AppCard } from '@/components/ui/app-card';
+import { StatusBadge } from '@/components/ui/status-badge';
+import { getDashboardOverview } from '@/features/dashboard/api/overview';
+import type { DashboardNodeHealth } from '@/features/dashboard/types';
+import { WorldStage } from '@/features/dashboard/components/world-stage';
+import {
+  getNodeStatusLabel,
+  getNodeStatusVariant,
+  getOpenrestyStatusLabel,
+  getOpenrestyStatusVariant,
+} from '@/features/nodes/utils';
+import { formatDateTime, formatRelativeTime } from '@/lib/utils/date';
+import {
+  formatBytes,
+  formatBytesPerSecond,
+  formatPercent,
+} from '@/lib/utils/metrics';
+
+function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : '请求失败，请稍后重试。';
+}
+
+function formatTrendHour(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return '—';
+  }
+  return `${date.getHours().toString().padStart(2, '0')}:00`;
+}
+
+function buildNodeDetailHref(id?: number | null) {
+  if (!id) {
+    return '/node';
+  }
+  return `/node/detail?id=${id}`;
+}
+
+function buildNodeRankItems(
+  nodes: DashboardNodeHealth[],
+  selector: (node: DashboardNodeHealth) => number,
+  limit = 5,
+) {
+  return [...nodes]
+    .sort((left, right) => {
+      const leftValue = selector(left);
+      const rightValue = selector(right);
+      if (leftValue === rightValue) {
+        return left.name.localeCompare(right.name, 'zh-CN');
+      }
+      return rightValue - leftValue;
+    })
+    .slice(0, limit)
+    .filter((node) => selector(node) > 0)
+    .map((node) => ({
+      label: node.name,
+      value: selector(node),
+    }));
+}
+
+function NodeHealthRow({ node }: { node: DashboardNodeHealth }) {
+  return (
+    <Link
+      href={buildNodeDetailHref(node.id)}
+      className="block rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4 transition hover:border-[var(--border-strong)] hover:bg-[var(--surface-muted)]"
+    >
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div>
+          <p className="text-sm font-semibold text-[var(--foreground-primary)]">
+            {node.name}
+          </p>
+          <p className="mt-1 text-xs text-[var(--foreground-muted)]">
+            {node.node_id}
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <StatusBadge
+            label={getNodeStatusLabel(node.status)}
+            variant={getNodeStatusVariant(node.status)}
+          />
+          <StatusBadge
+            label={getOpenrestyStatusLabel(node.openresty_status)}
+            variant={getOpenrestyStatusVariant(node.openresty_status)}
+          />
+        </div>
+      </div>
+
+      <div className="mt-4 grid gap-3 md:grid-cols-4">
+        <div>
+          <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
+            CPU
+          </p>
+          <p className="mt-2 text-sm text-[var(--foreground-primary)]">
+            {formatPercent(node.cpu_usage_percent)}
+          </p>
+        </div>
+        <div>
+          <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
+            内存
+          </p>
+          <p className="mt-2 text-sm text-[var(--foreground-primary)]">
+            {formatPercent(node.memory_usage_percent)}
+          </p>
+        </div>
+        <div>
+          <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
+            最近窗口请求
+          </p>
+          <p className="mt-2 text-sm text-[var(--foreground-primary)]">
+            {node.request_count.toLocaleString('zh-CN')}
+          </p>
+        </div>
+        <div>
+          <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
+            活动异常
+          </p>
+          <p className="mt-2 text-sm text-[var(--foreground-primary)]">
+            {node.active_event_count}
+          </p>
+        </div>
+      </div>
+
+      <div className="mt-4 flex flex-wrap items-center justify-between gap-3 text-sm text-[var(--foreground-secondary)]">
+        <p>当前版本：{node.current_version || '未应用'}</p>
+        <p>
+          最近心跳：
+          {node.last_seen_at
+            ? ` ${formatRelativeTime(node.last_seen_at)} · ${formatDateTime(node.last_seen_at)}`
+            : ' 暂无'}
+        </p>
+      </div>
+    </Link>
+  );
+}
+
+export function DashboardOverview() {
+  const overviewQuery = useQuery({
+    queryKey: ['dashboard', 'overview'],
+    queryFn: getDashboardOverview,
+    refetchInterval: 10000,
+  });
+
+  if (overviewQuery.isLoading) {
+    return <LoadingState />;
+  }
+
+  if (overviewQuery.isError) {
+    return (
+      <ErrorState
+        title="总览看板加载失败"
+        description={getErrorMessage(overviewQuery.error)}
+      />
+    );
+  }
+
+  const overview = overviewQuery.data;
+  if (!overview) {
+    return (
+      <EmptyState
+        title="暂无总览数据"
+        description="系统已经启动，但还没有可展示的总览聚合结果。"
+      />
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <WorldStage
+        summary={overview.summary}
+        traffic={overview.traffic}
+        capacity={overview.capacity}
+        nodes={overview.nodes}
+        sourceCountries={overview.distributions.source_countries}
+      />
+
+      <div className="grid gap-6 xl:grid-cols-2">
+        <AppCard
+          title="24 小时请求趋势"
+          description="观察整体请求量和错误量是否出现异常抬升。"
+        >
+          <TrendChart
+            labels={overview.trends.traffic_24h.map((point) =>
+              formatTrendHour(point.bucket_started_at),
+            )}
+            series={[
+              {
+                label: '请求量',
+                color: '#f59e0b',
+                fillColor: 'rgba(245, 158, 11, 0.18)',
+                variant: 'area',
+                values: overview.trends.traffic_24h.map(
+                  (point) => point.request_count,
+                ),
+              },
+              {
+                label: '错误量',
+                color: '#ef4444',
+                values: overview.trends.traffic_24h.map(
+                  (point) => point.error_count,
+                ),
+              },
+            ]}
+          />
+        </AppCard>
+
+        <AppCard
+          title="24 小时容量趋势"
+          description="按小时聚合 CPU 与内存使用率，判断整体容量是否持续紧张。"
+        >
+          <TrendChart
+            labels={overview.trends.capacity_24h.map((point) =>
+              formatTrendHour(point.bucket_started_at),
+            )}
+            yAxisValueFormatter={formatPercent}
+            series={[
+              {
+                label: '平均 CPU',
+                color: '#0f766e',
+                fillColor: 'rgba(15, 118, 110, 0.15)',
+                variant: 'area',
+                values: overview.trends.capacity_24h.map(
+                  (point) => point.average_cpu_usage_percent,
+                ),
+                valueFormatter: formatPercent,
+              },
+              {
+                label: '平均内存',
+                color: '#2563eb',
+                values: overview.trends.capacity_24h.map(
+                  (point) => point.average_memory_usage_percent,
+                ),
+                valueFormatter: formatPercent,
+              },
+            ]}
+          />
+        </AppCard>
+      </div>
+
+      <div className="grid gap-6 xl:grid-cols-[1.1fr_0.9fr]">
+        <AppCard
+          title="24 小时网络与磁盘趋势"
+          description="把 OpenResty 吞吐和磁盘读写放到同一屏，方便判断是流量拉升还是资源抖动。"
+        >
+          <div className="space-y-6">
+            <TrendChart
+              labels={overview.trends.network_24h.map((point) =>
+                formatTrendHour(point.bucket_started_at),
+              )}
+              height={180}
+              yAxisValueFormatter={(value) => formatBytesPerSecond(value, 3600)}
+              series={[
+                {
+                  label: 'OpenResty 入站',
+                  color: '#22c55e',
+                  fillColor: 'rgba(34, 197, 94, 0.14)',
+                  variant: 'area',
+                  values: overview.trends.network_24h.map(
+                    (point) => point.openresty_rx_bytes,
+                  ),
+                  valueFormatter: (value) => formatBytesPerSecond(value, 3600),
+                },
+                {
+                  label: 'OpenResty 出站',
+                  color: '#38bdf8',
+                  values: overview.trends.network_24h.map(
+                    (point) => point.openresty_tx_bytes,
+                  ),
+                  valueFormatter: (value) => formatBytesPerSecond(value, 3600),
+                },
+              ]}
+            />
+
+            <TrendChart
+              labels={overview.trends.disk_io_24h.map((point) =>
+                formatTrendHour(point.bucket_started_at),
+              )}
+              height={180}
+              yAxisValueFormatter={formatBytes}
+              series={[
+                {
+                  label: '磁盘读',
+                  color: '#a78bfa',
+                  fillColor: 'rgba(167, 139, 250, 0.14)',
+                  variant: 'area',
+                  values: overview.trends.disk_io_24h.map(
+                    (point) => point.disk_read_bytes,
+                  ),
+                  valueFormatter: formatBytes,
+                },
+                {
+                  label: '磁盘写',
+                  color: '#fb7185',
+                  values: overview.trends.disk_io_24h.map(
+                    (point) => point.disk_write_bytes,
+                  ),
+                  valueFormatter: formatBytes,
+                },
+              ]}
+            />
+          </div>
+        </AppCard>
+
+        <AppCard
+          title="Top 节点榜单"
+          description="把流量、错误与容量压力节点并排展示，保留快速定位热点与瓶颈的入口。"
+        >
+          <div className="grid gap-6 xl:grid-cols-1">
+            <div>
+              <p className="mb-3 text-xs tracking-[0.22em] text-[var(--foreground-muted)] uppercase">
+                流量最高节点
+              </p>
+              <RankChart
+                items={buildNodeRankItems(
+                  overview.nodes,
+                  (node) => node.request_count,
+                )}
+                color="#38bdf8"
+                emptyMessage="暂无流量榜单"
+              />
+            </div>
+            <div>
+              <p className="mb-3 text-xs tracking-[0.22em] text-[var(--foreground-muted)] uppercase">
+                容量压力节点
+              </p>
+              <RankChart
+                items={buildNodeRankItems(overview.nodes, (node) =>
+                  Math.round(
+                    Math.max(
+                      node.cpu_usage_percent,
+                      node.memory_usage_percent,
+                      node.storage_usage_percent,
+                    ),
+                  ),
+                )}
+                color="#ef4444"
+                valueFormatter={(value) => `${value}%`}
+                emptyMessage="暂无容量压力数据"
+              />
+            </div>
+          </div>
+        </AppCard>
+      </div>
+
+      <div className="grid gap-6 xl:grid-cols-3">
+        <AppCard
+          title="来源分布"
+          description="聚合最近 24 小时主要来源国家，优先识别流量重心变化。"
+        >
+          <RankChart
+            items={overview.distributions.source_countries.map((item) => ({
+              label: item.key,
+              value: item.value,
+            }))}
+            color="#38bdf8"
+            emptyMessage="暂无来源分布数据"
+          />
+        </AppCard>
+
+        <AppCard
+          title="状态码分布"
+          description="快速判断成功响应是否仍是主流，以及错误码是否有抬升。"
+        >
+          <RankChart
+            items={overview.distributions.status_codes.map((item) => ({
+              label: `HTTP ${item.key}`,
+              value: item.value,
+            }))}
+            color="#f59e0b"
+            emptyMessage="暂无状态码分布"
+          />
+        </AppCard>
+
+        <AppCard
+          title="Top Domain"
+          description="观察主要流量集中在哪些域名，方便判断业务热度与异常集中点。"
+        >
+          <RankChart
+            items={overview.distributions.top_domains.map((item) => ({
+              label: item.key,
+              value: item.value,
+            }))}
+            color="#34d399"
+            emptyMessage="暂无域名分布"
+          />
+        </AppCard>
+      </div>
+
+      <AppCard
+        title="节点健康列表"
+        description="按异常数量和资源压力排序，优先显示最需要关注的节点。"
+        action={
+          <Link
+            href="/node"
+            className="inline-flex items-center rounded-full border border-[var(--border-default)] px-3 py-1.5 text-xs text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
+          >
+            进入节点页
+          </Link>
+        }
+      >
+        {overview.nodes.length === 0 ? (
+          <EmptyState
+            title="暂无节点"
+            description="节点接入后，这里会展示系统健康与容量摘要。"
+          />
+        ) : (
+          <div className="space-y-4">
+            {overview.nodes.slice(0, 8).map((node) => (
+              <NodeHealthRow key={node.node_id} node={node} />
+            ))}
+          </div>
+        )}
+      </AppCard>
+    </div>
+  );
+}

openflare_server/web/features/dashboard/components/world-stage-map.tsx

@@ -0,0 +1,565 @@
+'use client';
+
+import ReactEChartsCore from 'echarts-for-react/lib/core';
+import type { EChartsCoreOption } from 'echarts/core';
+import * as echarts from 'echarts/core';
+import { ScatterChart } from 'echarts/charts';
+import { GeoComponent, TooltipComponent } from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import { useRouter } from 'next/navigation';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { EmptyState } from '@/components/feedback/empty-state';
+import worldGeoJson from '@/features/dashboard/data/world-geo.json';
+import type {
+  DashboardNodeHealth,
+  DistributionItem,
+} from '@/features/dashboard/types';
+import {
+  getNodeStatusLabel,
+  getOpenrestyStatusLabel,
+} from '@/features/nodes/utils';
+
+echarts.use([GeoComponent, TooltipComponent, ScatterChart, CanvasRenderer]);
+
+const fallbackCoordinates = [
+  [-122.4194, 37.7749],
+  [-46.6333, -23.5505],
+  [-0.1276, 51.5072],
+  [2.3522, 48.8566],
+  [77.209, 28.6139],
+  [121.4737, 31.2304],
+  [103.8198, 1.3521],
+  [151.2093, -33.8688],
+  [28.0473, -26.2041],
+  [139.6917, 35.6895],
+] as const;
+
+type Tone = 'healthy' | 'warning' | 'danger';
+
+type WorldGeoJson = {
+  type: string;
+  features?: WorldFeature[];
+};
+
+type WorldFeature = {
+  properties?: {
+    name?: string;
+  };
+  geometry?: {
+    type?: 'Polygon' | 'MultiPolygon';
+    coordinates?: number[][][] | number[][][][];
+  };
+};
+
+type MapNodeDatum = {
+  id: number;
+  name: string;
+  geoName: string;
+  route: string;
+  derivedFromGeo: boolean;
+  requestCount: number;
+  errorCount: number;
+  activeEventCount: number;
+  status: DashboardNodeHealth['status'];
+  openrestyStatus: DashboardNodeHealth['openresty_status'];
+  value: [number, number, number];
+  itemStyle: {
+    color: string;
+    borderColor: string;
+    borderWidth: number;
+  };
+  emphasis: {
+    itemStyle: {
+      borderColor: string;
+      borderWidth: number;
+    };
+  };
+};
+
+type CountryRegionDatum = {
+  name: string;
+  value: number;
+  itemStyle: {
+    areaColor: string;
+    borderColor: string;
+  };
+  emphasis: {
+    itemStyle: {
+      areaColor: string;
+      borderColor: string;
+    };
+  };
+};
+
+let worldMapRegistrationAttempted = false;
+let worldMapRegistrationSucceeded = false;
+
+const baseWorldMapLayoutSizePercent = 168;
+const baseWorldMapZoom = 1;
+
+function buildNodeDetailHref(id?: number | null) {
+  if (!id) {
+    return '/node';
+  }
+  return `/node/detail?id=${id}`;
+}
+
+function getNodeTone(node: DashboardNodeHealth): Tone {
+  if (
+    node.status === 'offline' ||
+    node.openresty_status === 'unhealthy' ||
+    node.active_event_count > 0
+  ) {
+    return 'danger';
+  }
+
+  if (
+    node.cpu_usage_percent >= 80 ||
+    node.memory_usage_percent >= 85 ||
+    node.storage_usage_percent >= 85
+  ) {
+    return 'warning';
+  }
+
+  return 'healthy';
+}
+
+function getNodeCoordinates(node: DashboardNodeHealth, index: number) {
+  if (
+    typeof node.geo_latitude === 'number' &&
+    typeof node.geo_longitude === 'number'
+  ) {
+    return {
+      coordinates: [node.geo_longitude, node.geo_latitude] as [number, number],
+      derivedFromGeo: true,
+    };
+  }
+
+  return {
+    coordinates: [
+      ...fallbackCoordinates[index % fallbackCoordinates.length],
+    ] as [number, number],
+    derivedFromGeo: false,
+  };
+}
+
+function ensureWorldMapRegistered() {
+  if (worldMapRegistrationSucceeded || echarts.getMap('world')) {
+    worldMapRegistrationSucceeded = true;
+    return true;
+  }
+
+  if (worldMapRegistrationAttempted) {
+    return false;
+  }
+
+  worldMapRegistrationAttempted = true;
+
+  try {
+    const geoJson = worldGeoJson as WorldGeoJson;
+
+    if (
+      geoJson.type !== 'FeatureCollection' ||
+      !Array.isArray(geoJson.features)
+    ) {
+      throw new Error('invalid world geojson payload');
+    }
+
+    echarts.registerMap(
+      'world',
+      geoJson as unknown as Parameters<typeof echarts.registerMap>[1],
+    );
+
+    if (!echarts.getMap('world')) {
+      throw new Error('world map registration failed');
+    }
+
+    worldMapRegistrationSucceeded = true;
+    return true;
+  } catch (error) {
+    const registrationError =
+      error instanceof Error
+        ? error
+        : new Error('unknown world map registration error');
+    console.error('Failed to register ECharts world map', registrationError);
+    return false;
+  }
+}
+
+export function WorldStageMap({
+  isDark,
+  nodes,
+  sourceCountries,
+}: {
+  isDark: boolean;
+  nodes: DashboardNodeHealth[];
+  sourceCountries: DistributionItem[];
+}) {
+  const router = useRouter();
+  const chartContainerRef = useRef<HTMLDivElement | null>(null);
+  const [mapReady, setMapReady] = useState(false);
+  const [mapFailed, setMapFailed] = useState(false);
+  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    const ready = ensureWorldMapRegistered();
+    setMapReady(ready);
+    setMapFailed(!ready);
+  }, []);
+
+  useEffect(() => {
+    const container = chartContainerRef.current;
+    if (!container) {
+      return;
+    }
+
+    const updateSize = () => {
+      const nextWidth = container.clientWidth;
+      const nextHeight = container.clientHeight;
+      setContainerSize((previous) =>
+        previous.width === nextWidth && previous.height === nextHeight
+          ? previous
+          : { width: nextWidth, height: nextHeight },
+      );
+    };
+
+    updateSize();
+
+    if (typeof ResizeObserver === 'undefined') {
+      window.addEventListener('resize', updateSize);
+      return () => {
+        window.removeEventListener('resize', updateSize);
+      };
+    }
+
+    const observer = new ResizeObserver(() => {
+      updateSize();
+    });
+    observer.observe(container);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  const mapPalette = useMemo(
+    () =>
+      isDark
+        ? {
+            areaColor: '#13233b',
+            borderColor: 'rgba(125,211,252,0.14)',
+            labelColor: '#e2e8f0',
+            sourceAreaColor: 'rgba(56, 189, 248, 0.18)',
+            sourceAreaBorder: 'rgba(125, 211, 252, 0.45)',
+            healthyColor: '#34d399',
+            warningColor: '#fbbf24',
+            dangerColor: '#fb7185',
+            healthyBorder: '#bbf7d0',
+            warningBorder: '#fde68a',
+            dangerBorder: '#fecdd3',
+          }
+        : {
+            areaColor: '#eaf2ff',
+            borderColor: 'rgba(71,85,105,0.12)',
+            labelColor: '#0f172a',
+            sourceAreaColor: 'rgba(14, 165, 233, 0.22)',
+            sourceAreaBorder: 'rgba(14, 165, 233, 0.46)',
+            healthyColor: '#10b981',
+            warningColor: '#f59e0b',
+            dangerColor: '#f43f5e',
+            healthyBorder: '#d1fae5',
+            warningBorder: '#fde68a',
+            dangerBorder: '#fecdd3',
+          },
+    [isDark],
+  );
+
+  const mapNodes = useMemo<MapNodeDatum[]>(
+    () =>
+      nodes.map((node, index) => {
+        const { coordinates, derivedFromGeo } = getNodeCoordinates(node, index);
+        const tone = getNodeTone(node);
+        const toneColor =
+          tone === 'healthy'
+            ? mapPalette.healthyColor
+            : tone === 'warning'
+              ? mapPalette.warningColor
+              : mapPalette.dangerColor;
+        const toneBorder =
+          tone === 'healthy'
+            ? mapPalette.healthyBorder
+            : tone === 'warning'
+              ? mapPalette.warningBorder
+              : mapPalette.dangerBorder;
+
+        return {
+          id: node.id,
+          name: node.name,
+          geoName: node.geo_name || node.name,
+          route: buildNodeDetailHref(node.id),
+          derivedFromGeo,
+          requestCount: node.request_count,
+          errorCount: node.error_count,
+          activeEventCount: node.active_event_count,
+          status: node.status,
+          openrestyStatus: node.openresty_status,
+          value: [
+            coordinates[0],
+            coordinates[1],
+            Math.max(node.request_count, 1),
+          ],
+          itemStyle: {
+            color: toneColor,
+            borderColor: toneBorder,
+            borderWidth: 1.5,
+          },
+          emphasis: {
+            itemStyle: {
+              borderColor: toneBorder,
+              borderWidth: 2,
+            },
+          },
+        };
+      }),
+    [mapPalette, nodes],
+  );
+
+  const countryRegions = useMemo<CountryRegionDatum[]>(() => {
+    const maxRequests = Math.max(
+      1,
+      ...sourceCountries.map((item) => item.value || 0),
+    );
+
+    return sourceCountries
+      .filter((item) => item.key && item.value > 0)
+      .map((item) => {
+        const intensity = Math.max(0.18, item.value / maxRequests);
+        const areaOpacity = Number((0.14 + intensity * 0.58).toFixed(3));
+        const borderOpacity = Number((0.22 + intensity * 0.48).toFixed(3));
+        const areaColor = isDark
+          ? `rgba(56, 189, 248, ${areaOpacity})`
+          : `rgba(14, 165, 233, ${areaOpacity})`;
+        const borderColor = isDark
+          ? `rgba(125, 211, 252, ${borderOpacity})`
+          : `rgba(14, 165, 233, ${borderOpacity})`;
+
+        return {
+          name: item.key,
+          value: item.value,
+          itemStyle: {
+            areaColor,
+            borderColor,
+          },
+          emphasis: {
+            itemStyle: {
+              areaColor,
+              borderColor,
+            },
+          },
+        };
+      });
+  }, [isDark, sourceCountries]);
+
+  const responsiveMapScale = useMemo(() => {
+    const { width, height } = containerSize;
+    if (width <= 0 || height <= 0) {
+      return 1;
+    }
+
+    const widthScale = Math.min(Math.max(width / 960, 0.52), 1.08);
+    const heightScale = Math.min(Math.max(height / 520, 0.72), 1.1);
+    const compactViewportScale = width < 640 ? 0.9 : 1;
+
+    return Number(
+      (Math.min(widthScale, heightScale) * compactViewportScale).toFixed(3),
+    );
+  }, [containerSize]);
+
+  const computedLayoutSize = useMemo(
+    () => `${Math.round(baseWorldMapLayoutSizePercent * responsiveMapScale)}%`,
+    [responsiveMapScale],
+  );
+  const computedZoom = useMemo(
+    () => Number((baseWorldMapZoom * responsiveMapScale).toFixed(3)),
+    [responsiveMapScale],
+  );
+
+  const mapOption = useMemo<EChartsCoreOption>(
+    () => ({
+      animation: false,
+      backgroundColor: 'transparent',
+      tooltip: {
+        trigger: 'item',
+        transitionDuration: 0,
+        backgroundColor: isDark
+          ? 'rgba(15,23,42,0.96)'
+          : 'rgba(255,255,255,0.96)',
+        borderColor: isDark
+          ? 'rgba(148,163,184,0.2)'
+          : 'rgba(148,163,184,0.24)',
+        borderWidth: 1,
+        textStyle: {
+          color: isDark ? '#e2e8f0' : '#0f172a',
+          fontSize: 12,
+        },
+        formatter: (params: unknown) => {
+          const payload = params as {
+            data?: MapNodeDatum | CountryRegionDatum;
+            seriesType?: string;
+            name?: string;
+          };
+          const data = payload.data;
+          if (
+            payload.seriesType !== 'scatter' &&
+            data &&
+            'value' in data &&
+            typeof data.value === 'number'
+          ) {
+            return [
+              `<div style="font-weight:600;margin-bottom:6px;">${payload.name ?? data.name}</div>`,
+              `<div>最近 24 小时来源请求 ${data.value.toLocaleString('zh-CN')}</div>`,
+            ].join('');
+          }
+
+          if (!data || !('requestCount' in data)) {
+            return '';
+          }
+
+          const locationLine = data.derivedFromGeo
+            ? data.geoName
+            : `${data.geoName} · 预设落点`;
+
+          return [
+            `<div style="font-weight:600;margin-bottom:6px;">${data.name}</div>`,
+            `<div>${locationLine}</div>`,
+            `<div>请求量 ${data.requestCount.toLocaleString('zh-CN')} · 错误数 ${data.errorCount.toLocaleString('zh-CN')}</div>`,
+            `<div>活动事件 ${data.activeEventCount} · 节点状态 ${getNodeStatusLabel(data.status)}</div>`,
+            `<div>OpenResty 状态 ${getOpenrestyStatusLabel(data.openrestyStatus)}</div>`,
+          ].join('');
+        },
+      },
+      geo: {
+        map: 'world',
+        roam: true,
+        silent: true,
+        layoutCenter: ['50%', '50%'],
+        layoutSize: computedLayoutSize,
+        zoom: computedZoom,
+        scaleLimit: {
+          min: Math.max(Number((computedZoom * 0.78).toFixed(3)), 0.35),
+          max: Math.max(Number((computedZoom * 2.2).toFixed(3)), 1.4),
+        },
+        regions: countryRegions,
+        itemStyle: {
+          areaColor: mapPalette.areaColor,
+          borderColor: mapPalette.borderColor,
+          borderWidth: 0.7,
+        },
+        emphasis: {
+          disabled: true,
+        },
+      },
+      series: [
+        {
+          type: 'map',
+          map: 'world',
+          geoIndex: 0,
+          data: countryRegions,
+          silent: true,
+          z: 1,
+          emphasis: {
+            disabled: true,
+          },
+        },
+        {
+          type: 'scatter',
+          coordinateSystem: 'geo',
+          data: mapNodes,
+          z: 3,
+          progressive: 64,
+          large: true,
+          largeThreshold: 24,
+          symbolSize: (value: unknown) => {
+            const size =
+              Array.isArray(value) && typeof value[2] === 'number'
+                ? value[2]
+                : 1;
+            const responsiveBase = 8 + Math.log10(size + 1) * 3.6;
+            return Math.max(
+              7,
+              Math.min(18, responsiveBase * Math.max(responsiveMapScale, 0.88)),
+            );
+          },
+          label: {
+            show: false,
+            color: mapPalette.labelColor,
+            fontSize: 11,
+          },
+          emphasis: {
+            scale: 1.12,
+            label: {
+              show: mapNodes.length > 0 && mapNodes.length <= 5,
+              position: 'right',
+              distance: 8,
+              formatter: '{b}',
+              backgroundColor: isDark
+                ? 'rgba(8,15,31,0.7)'
+                : 'rgba(255,255,255,0.88)',
+              borderColor: isDark
+                ? 'rgba(148,163,184,0.16)'
+                : 'rgba(148,163,184,0.2)',
+              borderWidth: 1,
+              borderRadius: 999,
+              padding: [4, 8],
+            },
+          },
+        },
+      ],
+    }),
+    [
+      computedLayoutSize,
+      computedZoom,
+      countryRegions,
+      isDark,
+      mapNodes,
+      mapPalette,
+      responsiveMapScale,
+    ],
+  );
+
+  if (!mapReady) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <EmptyState
+          title={mapFailed ? '全球地图加载失败' : '全球地图加载中'}
+          description={
+            mapFailed
+              ? 'ECharts 世界地图资源未能成功注册，请稍后刷新重试。'
+              : '正在按需初始化全球地图，这一步会延后到首屏内容稳定后执行。'
+          }
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div ref={chartContainerRef} className="h-full w-full">
+      <ReactEChartsCore
+        echarts={echarts}
+        option={mapOption}
+        notMerge
+        lazyUpdate
+        opts={{ renderer: 'canvas' }}
+        onEvents={{
+          click: (params: { data?: MapNodeDatum }) => {
+            if (params.data?.route) {
+              router.push(params.data.route);
+            }
+          },
+        }}
+        style={{ height: '100%', width: '100%' }}
+      />
+    </div>
+  );
+}

openflare_server/web/features/dashboard/components/world-stage.tsx

@@ -0,0 +1,355 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { useEffect, useRef, useState } from 'react';
+
+import { EmptyState } from '@/components/feedback/empty-state';
+import { useTheme } from '@/components/providers/theme-provider';
+import type {
+  DashboardCapacity,
+  DashboardNodeHealth,
+  DashboardSummary,
+  DashboardTraffic,
+  DistributionItem,
+} from '@/features/dashboard/types';
+import { cn } from '@/lib/utils/cn';
+
+type Tone = 'healthy' | 'warning' | 'danger' | 'source';
+
+const WorldStageMap = dynamic(
+  () =>
+    import('@/features/dashboard/components/world-stage-map').then(
+      (module) => module.WorldStageMap,
+    ),
+  { ssr: false },
+);
+
+function formatPercent(value: number) {
+  if (!Number.isFinite(value)) {
+    return '0%';
+  }
+  return `${value.toFixed(value >= 100 ? 0 : 1)}%`;
+}
+
+function HeroMetric({
+  label,
+  value,
+  hint,
+  isDark,
+}: {
+  label: string;
+  value: string;
+  hint: string;
+  isDark: boolean;
+}) {
+  return (
+    <div
+      className={cn(
+        'rounded-[24px] border px-5 py-5 backdrop-blur',
+        isDark
+          ? 'border-white/10 bg-white/6'
+          : 'border-sky-100/90 bg-white/80 shadow-[0_18px_40px_rgba(148,163,184,0.12)]',
+      )}
+    >
+      <p
+        className={cn(
+          'text-[11px] tracking-[0.26em] uppercase',
+          isDark ? 'text-slate-300' : 'text-slate-500',
+        )}
+      >
+        {label}
+      </p>
+      <p
+        className={cn(
+          'mt-3 text-[30px] leading-none font-semibold',
+          isDark ? 'text-white' : 'text-slate-950',
+        )}
+      >
+        {value}
+      </p>
+      <p
+        className={cn(
+          'mt-2 text-sm',
+          isDark ? 'text-slate-300' : 'text-slate-600',
+        )}
+      >
+        {hint}
+      </p>
+    </div>
+  );
+}
+
+function LegendPill({
+  label,
+  tone,
+  isDark,
+}: {
+  label: string;
+  tone: Tone;
+  isDark: boolean;
+}) {
+  const toneClass =
+    tone === 'healthy'
+      ? isDark
+        ? 'border-emerald-300/20 bg-emerald-400/10 text-emerald-100'
+        : 'border-emerald-200 bg-emerald-50 text-emerald-700'
+      : tone === 'warning'
+        ? isDark
+          ? 'border-amber-300/20 bg-amber-400/10 text-amber-100'
+          : 'border-amber-200 bg-amber-50 text-amber-700'
+        : tone === 'source'
+          ? isDark
+            ? 'border-sky-300/20 bg-sky-400/10 text-sky-100'
+            : 'border-sky-200 bg-sky-50 text-sky-700'
+          : isDark
+            ? 'border-rose-300/20 bg-rose-400/10 text-rose-100'
+            : 'border-rose-200 bg-rose-50 text-rose-700';
+
+  return (
+    <div className={cn('rounded-full border px-3 py-1 text-[11px]', toneClass)}>
+      {label}
+    </div>
+  );
+}
+
+export function WorldStage({
+  summary,
+  traffic,
+  capacity,
+  nodes,
+  sourceCountries,
+}: {
+  summary: DashboardSummary;
+  traffic: DashboardTraffic;
+  capacity: DashboardCapacity;
+  nodes: DashboardNodeHealth[];
+  sourceCountries: DistributionItem[];
+}) {
+  const { resolvedTheme } = useTheme();
+  const isDark = resolvedTheme === 'dark';
+  const mapViewportRef = useRef<HTMLDivElement | null>(null);
+  const [shouldRenderMap, setShouldRenderMap] = useState(false);
+
+  useEffect(() => {
+    if (shouldRenderMap) {
+      return;
+    }
+
+    const mapViewport = mapViewportRef.current;
+    if (!mapViewport || typeof IntersectionObserver === 'undefined') {
+      setShouldRenderMap(true);
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          setShouldRenderMap(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: '180px 0px' },
+    );
+
+    observer.observe(mapViewport);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [shouldRenderMap]);
+
+  const onlineRate =
+    summary.total_nodes > 0
+      ? (summary.online_nodes / summary.total_nodes) * 100
+      : 0;
+  const healthyNodes = Math.max(
+    0,
+    summary.online_nodes - summary.unhealthy_nodes,
+  );
+  const healthyRate =
+    summary.total_nodes > 0 ? (healthyNodes / summary.total_nodes) * 100 : 0;
+  const geoConfiguredNodes = nodes.filter(
+    (node) =>
+      typeof node.geo_latitude === 'number' &&
+      typeof node.geo_longitude === 'number',
+  ).length;
+
+  return (
+    <section
+      className={cn(
+        'overflow-hidden rounded-[32px] border transition-colors',
+        isDark
+          ? 'border-slate-800/70 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.18),transparent_28%),radial-gradient(circle_at_82%_18%,rgba(56,189,248,0.10),transparent_18%),linear-gradient(135deg,#08111f,#0f172a_45%,#111827)] shadow-[0_32px_80px_rgba(2,6,23,0.35)]'
+          : 'border-sky-100/90 bg-[radial-gradient(circle_at_top_left,rgba(14,165,233,0.18),transparent_28%),radial-gradient(circle_at_82%_18%,rgba(59,130,246,0.12),transparent_20%),linear-gradient(135deg,#f8fbff,#edf5ff_45%,#ffffff)] shadow-[0_32px_80px_rgba(148,163,184,0.18)]',
+      )}
+    >
+      <div
+        className={cn(
+          'border-b px-6 py-6 md:px-7 md:py-7',
+          isDark ? 'border-white/8' : 'border-slate-200/70',
+        )}
+      >
+        <div className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
+          <div className="space-y-2">
+            <p
+              className={cn(
+                'text-[11px] tracking-[0.34em] uppercase',
+                isDark ? 'text-sky-200/80' : 'text-sky-700/80',
+              )}
+            >
+              Global Stage
+            </p>
+            <h2
+              className={cn(
+                'text-2xl font-semibold',
+                isDark ? 'text-white' : 'text-slate-950',
+              )}
+            >
+              全球态势板
+            </h2>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid gap-6 px-6 py-7 md:px-7 md:py-8 xl:grid-cols-[1.32fr_0.88fr]">
+        <div className="space-y-5">
+          <div
+            className={cn(
+              'relative min-h-[540px] overflow-hidden rounded-[28px] border py-6 lg:min-h-[600px]',
+              isDark
+                ? 'border-white/10 bg-[linear-gradient(180deg,rgba(15,23,42,0.16),rgba(15,23,42,0.42))]'
+                : 'border-slate-200/80 bg-[linear-gradient(180deg,rgba(255,255,255,0.88),rgba(239,246,255,0.92))]',
+            )}
+          >
+            <div
+              className={cn(
+                'absolute top-6 left-6 z-10 rounded-full px-3 py-1 text-[11px] tracking-[0.22em] uppercase backdrop-blur',
+                isDark
+                  ? 'bg-sky-400/20 text-sky-100'
+                  : 'bg-sky-100/90 text-sky-700',
+              )}
+            >
+              {sourceCountries.length > 0
+                ? '访客来源热度'
+                : geoConfiguredNodes > 0
+                  ? '节点地理坐标'
+                  : '节点覆盖信号'}
+            </div>
+
+            <div
+              className={cn(
+                'absolute top-16 left-6 z-10 rounded-full px-3 py-1 text-[11px] backdrop-blur',
+                isDark
+                  ? 'bg-slate-900/45 text-slate-200'
+                  : 'bg-white/85 text-slate-600 shadow-[0_10px_24px_rgba(148,163,184,0.16)]',
+              )}
+            >
+              拖动平移，滚轮缩放
+            </div>
+
+            <div className="absolute top-4 right-4 z-10 flex flex-wrap gap-2">
+              <LegendPill
+                label="国家底色: 来源热度"
+                tone="source"
+                isDark={isDark}
+              />
+              <LegendPill
+                label="绿色: 运行正常"
+                tone="healthy"
+                isDark={isDark}
+              />
+              <LegendPill
+                label="黄色: 资源承压"
+                tone="warning"
+                isDark={isDark}
+              />
+              <LegendPill
+                label="红色: 异常待处理"
+                tone="danger"
+                isDark={isDark}
+              />
+            </div>
+
+            <div
+              ref={mapViewportRef}
+              className="absolute inset-x-3 top-16 bottom-6 flex items-center justify-center md:inset-x-4 md:top-18 md:bottom-8"
+            >
+              <div className="h-full w-full min-w-0 overflow-hidden">
+                {shouldRenderMap ? (
+                  <WorldStageMap
+                    isDark={isDark}
+                    nodes={nodes}
+                    sourceCountries={sourceCountries}
+                  />
+                ) : (
+                  <div className="flex h-full items-center justify-center">
+                    <EmptyState
+                      title="全球地图准备中"
+                      description="地图会在进入可视区域后再加载，避免首页滚动和交互被首屏图表拖慢。"
+                    />
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {shouldRenderMap && nodes.length === 0 ? (
+              <div className="pointer-events-none absolute inset-x-6 bottom-10 z-10">
+                <div
+                  className={cn(
+                    'rounded-2xl border border-dashed px-4 py-4 text-sm backdrop-blur',
+                    isDark
+                      ? 'border-white/15 bg-white/5 text-slate-300'
+                      : 'border-slate-300/70 bg-white/78 text-slate-600',
+                  )}
+                >
+                  当前暂无节点接入。地图已完成初始化，后续会在这里展示节点位置与健康状态。
+                </div>
+              </div>
+            ) : null}
+          </div>
+        </div>
+
+        <div className="space-y-5">
+          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-2">
+            <HeroMetric
+              label="在线覆盖"
+              value={formatPercent(onlineRate)}
+              hint={`${summary.online_nodes}/${summary.total_nodes} 个节点在线`}
+              isDark={isDark}
+            />
+            <HeroMetric
+              label="运行健康"
+              value={formatPercent(healthyRate)}
+              hint={`${summary.unhealthy_nodes} 个节点存在 OpenResty 异常`}
+              isDark={isDark}
+            />
+            <HeroMetric
+              label="最近窗口请求"
+              value={traffic.request_count.toLocaleString('zh-CN')}
+              hint={`QPS ${traffic.estimated_qps.toFixed(1)} · ${traffic.reported_nodes} 个节点已上报`}
+              isDark={isDark}
+            />
+            <HeroMetric
+              label="平均 CPU"
+              value={formatPercent(capacity.average_cpu_usage_percent)}
+              hint={`${capacity.high_cpu_nodes} 个节点 CPU 偏高`}
+              isDark={isDark}
+            />
+            <HeroMetric
+              label="平均内存"
+              value={formatPercent(capacity.average_memory_usage_percent)}
+              hint={`${capacity.high_memory_nodes} 个高内存节点`}
+              isDark={isDark}
+            />
+            <HeroMetric
+              label="高存储节点"
+              value={capacity.high_storage_nodes.toLocaleString('zh-CN')}
+              hint={`${summary.offline_nodes} 离线 · ${summary.pending_nodes} 待接入`}
+              isDark={isDark}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

openflare_server/web/features/dashboard/types.ts

@@ -0,0 +1,101 @@
+export interface DashboardSummary {
+  total_nodes: number;
+  online_nodes: number;
+  offline_nodes: number;
+  pending_nodes: number;
+  unhealthy_nodes: number;
+}
+
+export interface DashboardTraffic {
+  request_count: number;
+  unique_visitors: number;
+  error_count: number;
+  estimated_qps: number;
+  reported_nodes: number;
+}
+
+export interface DashboardCapacity {
+  average_cpu_usage_percent: number;
+  average_memory_usage_percent: number;
+  high_cpu_nodes: number;
+  high_memory_nodes: number;
+  high_storage_nodes: number;
+}
+
+export interface DistributionItem {
+  key: string;
+  value: number;
+}
+
+export interface TrafficTrendPoint {
+  bucket_started_at: string;
+  request_count: number;
+  error_count: number;
+  unique_visitor_count: number;
+}
+
+export interface CapacityTrendPoint {
+  bucket_started_at: string;
+  average_cpu_usage_percent: number;
+  average_memory_usage_percent: number;
+  reported_nodes: number;
+}
+
+export interface NetworkTrendPoint {
+  bucket_started_at: string;
+  network_rx_bytes: number;
+  network_tx_bytes: number;
+  openresty_rx_bytes: number;
+  openresty_tx_bytes: number;
+  reported_nodes: number;
+}
+
+export interface DiskIOTrendPoint {
+  bucket_started_at: string;
+  disk_read_bytes: number;
+  disk_write_bytes: number;
+  reported_nodes: number;
+}
+
+export interface TrafficDistributions {
+  status_codes: DistributionItem[];
+  top_domains: DistributionItem[];
+  source_countries: DistributionItem[];
+}
+
+export interface DashboardTrends {
+  traffic_24h: TrafficTrendPoint[];
+  capacity_24h: CapacityTrendPoint[];
+  network_24h: NetworkTrendPoint[];
+  disk_io_24h: DiskIOTrendPoint[];
+}
+
+export interface DashboardNodeHealth {
+  id: number;
+  node_id: string;
+  name: string;
+  geo_name: string;
+  geo_latitude?: number | null;
+  geo_longitude?: number | null;
+  status: 'online' | 'offline' | 'pending';
+  openresty_status: 'healthy' | 'unhealthy' | 'unknown';
+  current_version: string;
+  last_seen_at: string;
+  active_event_count: number;
+  cpu_usage_percent: number;
+  memory_usage_percent: number;
+  storage_usage_percent: number;
+  request_count: number;
+  error_count: number;
+  unique_visitor_count: number;
+}
+
+export interface DashboardOverview {
+  generated_at: string;
+  summary: DashboardSummary;
+  traffic: DashboardTraffic;
+  capacity: DashboardCapacity;
+  distributions: TrafficDistributions;
+  trends: DashboardTrends;
+  nodes: DashboardNodeHealth[];
+}

openflare_server/web/features/managed-domains/api/managed-domains.ts

@@ -0,0 +1,35 @@
+import { apiRequest } from '@/lib/api/client';
+
+import type {
+  ManagedDomainCertificateOption,
+  ManagedDomainItem,
+  ManagedDomainMutationPayload,
+} from '@/features/managed-domains/types';
+
+export function getManagedDomains() {
+  return apiRequest<ManagedDomainItem[]>('/managed-domains/');
+}
+
+export function createManagedDomain(payload: ManagedDomainMutationPayload) {
+  return apiRequest<ManagedDomainItem>('/managed-domains/', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+}
+
+export function updateManagedDomain(id: number, payload: ManagedDomainMutationPayload) {
+  return apiRequest<ManagedDomainItem>(`/managed-domains/${id}`, {
+    method: 'PUT',
+    body: JSON.stringify(payload),
+  });
+}
+
+export function deleteManagedDomain(id: number) {
+  return apiRequest<void>(`/managed-domains/${id}`, {
+    method: 'DELETE',
+  });
+}
+
+export function getManagedDomainCertificates() {
+  return apiRequest<ManagedDomainCertificateOption[]>('/tls-certificates/');
+}

openflare_server/web/features/managed-domains/types.ts

@@ -0,0 +1,22 @@
+export interface ManagedDomainItem {
+  id: number;
+  domain: string;
+  cert_id: number | null;
+  enabled: boolean;
+  remark: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ManagedDomainMutationPayload {
+  domain: string;
+  cert_id: number | null;
+  enabled: boolean;
+  remark: string;
+}
+
+export interface ManagedDomainCertificateOption {
+  id: number;
+  name: string;
+  not_after: string | null;
+}

openflare_server/web/features/nodes/api/nodes.ts

@@ -0,0 +1,87 @@
+import { apiRequest } from '@/lib/api/client';
+
+import type {
+  NodeAgentReleaseInfo,
+  NodeAgentUpdatePayload,
+  NodeBootstrapToken,
+  NodeItem,
+  NodeMutationPayload,
+  NodeObservability,
+} from '@/features/nodes/types';
+import type { ReleaseChannel } from '@/features/update/types';
+
+export function getNodes() {
+  return apiRequest<NodeItem[]>('/nodes/');
+}
+
+export function createNode(payload: NodeMutationPayload) {
+  return apiRequest<NodeItem>('/nodes/', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+}
+
+export function updateNode(id: number, payload: NodeMutationPayload) {
+  return apiRequest<NodeItem>(`/nodes/${id}`, {
+    method: 'PUT',
+    body: JSON.stringify(payload),
+  });
+}
+
+export function deleteNode(id: number) {
+  return apiRequest<void>(`/nodes/${id}`, {
+    method: 'DELETE',
+  });
+}
+
+export function getNodeBootstrapToken() {
+  return apiRequest<NodeBootstrapToken>('/nodes/bootstrap-token');
+}
+
+export function rotateNodeBootstrapToken() {
+  return apiRequest<NodeBootstrapToken>('/nodes/bootstrap-token/rotate', {
+    method: 'POST',
+  });
+}
+
+export function getNodeAgentRelease(
+  id: number,
+  channel: ReleaseChannel = 'stable',
+) {
+  return apiRequest<NodeAgentReleaseInfo>(
+    `/nodes/${id}/agent-release?channel=${channel}`,
+  );
+}
+
+export function requestNodeAgentUpdate(
+  id: number,
+  payload?: NodeAgentUpdatePayload,
+) {
+  return apiRequest<NodeItem>(`/nodes/${id}/agent-update`, {
+    method: 'POST',
+    body: JSON.stringify(payload ?? {}),
+  });
+}
+
+export function requestNodeOpenrestyRestart(id: number) {
+  return apiRequest<NodeItem>(`/nodes/${id}/openresty-restart`, {
+    method: 'POST',
+  });
+}
+
+export function getNodeObservability(
+  id: number,
+  options?: { hours?: number; limit?: number },
+) {
+  const params = new URLSearchParams();
+  if (options?.hours) {
+    params.set('hours', String(options.hours));
+  }
+  if (options?.limit) {
+    params.set('limit', String(options.limit));
+  }
+  const query = params.toString();
+  return apiRequest<NodeObservability>(
+    `/nodes/${id}/observability${query ? `?${query}` : ''}`,
+  );
+}

openflare_server/web/features/nodes/components/node-editor-modal.tsx

@@ -0,0 +1,438 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMemo, useEffect } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { z } from 'zod';
+
+import { AppModal } from '@/components/ui/app-modal';
+import worldGeoJson from '@/features/dashboard/data/world-geo.json';
+import type { NodeItem, NodeMutationPayload } from '@/features/nodes/types';
+import {
+  PrimaryButton,
+  ResourceField,
+  ResourceInput,
+  ResourceSelect,
+  SecondaryButton,
+  ToggleField,
+} from '@/features/shared/components/resource-primitives';
+
+type GeoJsonGeometry = {
+  type: string;
+  coordinates: unknown;
+};
+
+type GeoJsonFeature = {
+  geometry?: GeoJsonGeometry;
+  properties?: {
+    name?: string;
+  };
+};
+
+type RegionOption = {
+  label: string;
+  latitude: number;
+  longitude: number;
+};
+
+const nodeEditorSchema = z
+  .object({
+    name: z
+      .string()
+      .trim()
+      .min(1, '请输入节点名')
+      .max(128, '节点名不能超过 128 个字符'),
+    ip: z.string().trim().max(64, '节点 IP 不能超过 64 个字符'),
+    auto_update_enabled: z.boolean(),
+    geo_manual_override: z.boolean(),
+    geo_region: z.string(),
+    geo_name: z.string().trim().max(128, '位置名不能超过 128 个字符'),
+    geo_latitude: z.string().trim(),
+    geo_longitude: z.string().trim(),
+  })
+  .superRefine((values, ctx) => {
+    if (!values.geo_manual_override) {
+      return;
+    }
+
+    const hasLatitude = values.geo_latitude !== '';
+    const hasLongitude = values.geo_longitude !== '';
+
+    if (hasLatitude !== hasLongitude) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ['geo_latitude'],
+        message: '纬度和经度需要同时填写',
+      });
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ['geo_longitude'],
+        message: '纬度和经度需要同时填写',
+      });
+      return;
+    }
+
+    if (hasLatitude) {
+      const latitude = Number(values.geo_latitude);
+      if (Number.isNaN(latitude) || latitude < -90 || latitude > 90) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['geo_latitude'],
+          message: '纬度必须在 -90 到 90 之间',
+        });
+      }
+    }
+
+    if (hasLongitude) {
+      const longitude = Number(values.geo_longitude);
+      if (Number.isNaN(longitude) || longitude < -180 || longitude > 180) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['geo_longitude'],
+          message: '经度必须在 -180 到 180 之间',
+        });
+      }
+    }
+  });
+
+type NodeEditorValues = z.infer<typeof nodeEditorSchema>;
+
+const defaultValues: NodeEditorValues = {
+  name: '',
+  ip: '',
+  auto_update_enabled: false,
+  geo_manual_override: false,
+  geo_region: '',
+  geo_name: '',
+  geo_latitude: '',
+  geo_longitude: '',
+};
+
+function collectPoints(value: unknown, points: Array<[number, number]>) {
+  if (!Array.isArray(value)) {
+    return;
+  }
+  if (
+    value.length >= 2 &&
+    typeof value[0] === 'number' &&
+    typeof value[1] === 'number'
+  ) {
+    points.push([value[0], value[1]]);
+    return;
+  }
+  for (const item of value) {
+    collectPoints(item, points);
+  }
+}
+
+function getRegionCenter(feature: GeoJsonFeature) {
+  const points: Array<[number, number]> = [];
+  collectPoints(feature.geometry?.coordinates, points);
+  if (points.length === 0) {
+    return null;
+  }
+
+  let minLongitude = Number.POSITIVE_INFINITY;
+  let maxLongitude = Number.NEGATIVE_INFINITY;
+  let minLatitude = Number.POSITIVE_INFINITY;
+  let maxLatitude = Number.NEGATIVE_INFINITY;
+
+  for (const [longitude, latitude] of points) {
+    minLongitude = Math.min(minLongitude, longitude);
+    maxLongitude = Math.max(maxLongitude, longitude);
+    minLatitude = Math.min(minLatitude, latitude);
+    maxLatitude = Math.max(maxLatitude, latitude);
+  }
+
+  return {
+    longitude: Number(((minLongitude + maxLongitude) / 2).toFixed(4)),
+    latitude: Number(((minLatitude + maxLatitude) / 2).toFixed(4)),
+  };
+}
+
+function buildRegionOptions() {
+  const features = ((worldGeoJson as { features?: GeoJsonFeature[] }).features ??
+    []) as GeoJsonFeature[];
+  const options = new Map<string, RegionOption>();
+
+  for (const feature of features) {
+    const label = feature.properties?.name?.trim();
+    if (!label || options.has(label)) {
+      continue;
+    }
+    const center = getRegionCenter(feature);
+    if (!center) {
+      continue;
+    }
+    options.set(label, {
+      label,
+      latitude: center.latitude,
+      longitude: center.longitude,
+    });
+  }
+
+  return Array.from(options.values()).sort((a, b) =>
+    a.label.localeCompare(b.label),
+  );
+}
+
+function buildFormValues(node?: Partial<NodeItem> | null): NodeEditorValues {
+  if (!node) {
+    return defaultValues;
+  }
+
+  return {
+    name: node.name ?? '',
+    ip: node.ip ?? '',
+    auto_update_enabled: node.auto_update_enabled ?? false,
+    geo_manual_override: node.geo_manual_override ?? false,
+    geo_region: node.geo_manual_override ? node.geo_name ?? '' : '',
+    geo_name: node.geo_name ?? '',
+    geo_latitude:
+      node.geo_latitude === undefined || node.geo_latitude === null
+        ? ''
+        : String(node.geo_latitude),
+    geo_longitude:
+      node.geo_longitude === undefined || node.geo_longitude === null
+        ? ''
+        : String(node.geo_longitude),
+  };
+}
+
+function toPayload(values: NodeEditorValues): NodeMutationPayload {
+  if (!values.geo_manual_override) {
+    return {
+      name: values.name.trim(),
+      ip: values.ip.trim(),
+      auto_update_enabled: values.auto_update_enabled,
+      geo_manual_override: false,
+      geo_name: '',
+      geo_latitude: null,
+      geo_longitude: null,
+    };
+  }
+
+  return {
+    name: values.name.trim(),
+    ip: values.ip.trim(),
+    auto_update_enabled: values.auto_update_enabled,
+    geo_manual_override: true,
+    geo_name: values.geo_name.trim(),
+    geo_latitude:
+      values.geo_latitude.trim() === '' ? null : Number(values.geo_latitude),
+    geo_longitude:
+      values.geo_longitude.trim() === '' ? null : Number(values.geo_longitude),
+  };
+}
+
+export function NodeEditorModal({
+  isOpen,
+  node,
+  isSubmitting,
+  title,
+  description,
+  submitLabel,
+  onClose,
+  onSubmit,
+}: {
+  isOpen: boolean;
+  node?: Partial<NodeItem> | null;
+  isSubmitting: boolean;
+  title: string;
+  description: string;
+  submitLabel: string;
+  onClose: () => void;
+  onSubmit: (payload: NodeMutationPayload) => void;
+}) {
+  const form = useForm<NodeEditorValues>({
+    resolver: zodResolver(nodeEditorSchema),
+    defaultValues,
+  });
+
+  const watchedAutoUpdate = useWatch({
+    control: form.control,
+    name: 'auto_update_enabled',
+  });
+  const watchedGeoManualOverride = useWatch({
+    control: form.control,
+    name: 'geo_manual_override',
+  });
+  const regionOptions = useMemo(() => buildRegionOptions(), []);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    form.reset(buildFormValues(node));
+  }, [form, isOpen, node]);
+
+  const handleSubmit = form.handleSubmit((values) => {
+    onSubmit(toPayload(values));
+  });
+
+  return (
+    <AppModal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={title}
+      description={description}
+      footer={
+        <div className="flex flex-wrap justify-end gap-3">
+          <SecondaryButton
+            type="button"
+            onClick={onClose}
+            disabled={isSubmitting}
+          >
+            取消
+          </SecondaryButton>
+          <PrimaryButton
+            type="submit"
+            form="node-editor-form"
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? '保存中...' : submitLabel}
+          </PrimaryButton>
+        </div>
+      }
+    >
+      <form id="node-editor-form" className="space-y-5" onSubmit={handleSubmit}>
+        <ResourceField
+          label="节点名"
+          hint="示例：shanghai-edge-1"
+          error={form.formState.errors.name?.message}
+        >
+          <ResourceInput
+            placeholder="shanghai-edge-1"
+            {...form.register('name')}
+          />
+        </ResourceField>
+
+        <ResourceField
+          label="节点 IP"
+          hint="可手动维护节点当前对外 IP；留空则等待 Agent 注册或心跳自动回填。"
+          error={form.formState.errors.ip?.message}
+        >
+          <ResourceInput placeholder="203.0.113.10" {...form.register('ip')} />
+        </ResourceField>
+
+        <ToggleField
+          label="启用自动更新"
+          description="开启后 Agent 心跳返回会提示节点自动执行自更新。"
+          checked={watchedAutoUpdate}
+          onChange={(checked) =>
+            form.setValue('auto_update_enabled', checked, {
+              shouldDirty: true,
+              shouldValidate: true,
+            })
+          }
+        />
+
+        <ToggleField
+          label="手动指定地图地区"
+          description="关闭时，节点会根据当前 IP 自动解析归属地；开启后使用你手动选择的地区与坐标。"
+          checked={watchedGeoManualOverride}
+          onChange={(checked) => {
+            form.setValue('geo_manual_override', checked, {
+              shouldDirty: true,
+              shouldValidate: true,
+            });
+            if (!checked) {
+              form.setValue('geo_region', '', { shouldDirty: true });
+              form.setValue('geo_name', '', { shouldDirty: true });
+              form.setValue('geo_latitude', '', { shouldDirty: true });
+              form.setValue('geo_longitude', '', { shouldDirty: true });
+            }
+          }}
+        />
+
+        {watchedGeoManualOverride ? (
+          <ResourceField
+            label="地区选择"
+            hint="选择后会自动填充位置名与地图坐标，你也可以继续微调。"
+          >
+            <ResourceSelect
+              value={form.watch('geo_region')}
+              onChange={(event) => {
+                const regionName = event.target.value;
+                form.setValue('geo_region', regionName, {
+                  shouldDirty: true,
+                });
+                const selectedRegion = regionOptions.find(
+                  (item) => item.label === regionName,
+                );
+                if (!selectedRegion) {
+                  return;
+                }
+                form.setValue('geo_name', selectedRegion.label, {
+                  shouldDirty: true,
+                  shouldValidate: true,
+                });
+                form.setValue('geo_latitude', String(selectedRegion.latitude), {
+                  shouldDirty: true,
+                  shouldValidate: true,
+                });
+                form.setValue(
+                  'geo_longitude',
+                  String(selectedRegion.longitude),
+                  {
+                    shouldDirty: true,
+                    shouldValidate: true,
+                  },
+                );
+              }}
+            >
+              <option value="">请选择地区</option>
+              {regionOptions.map((option) => (
+                <option key={option.label} value={option.label}>
+                  {option.label}
+                </option>
+              ))}
+            </ResourceSelect>
+          </ResourceField>
+        ) : null}
+
+        <ResourceField
+          label="地图位置名"
+          hint={
+            watchedGeoManualOverride
+              ? '可在自动填充后继续修改，例如使用更贴近业务的展示名称。'
+              : '自动解析模式下，该字段会由系统根据节点 IP 回填。'
+          }
+          error={form.formState.errors.geo_name?.message}
+        >
+          <ResourceInput
+            placeholder="Shanghai"
+            disabled={!watchedGeoManualOverride}
+            {...form.register('geo_name')}
+          />
+        </ResourceField>
+
+        <div className="grid gap-5 md:grid-cols-2">
+          <ResourceField
+            label="纬度"
+            hint="范围 -90 到 90，例如上海约为 31.2304"
+            error={form.formState.errors.geo_latitude?.message}
+          >
+            <ResourceInput
+              placeholder="31.2304"
+              disabled={!watchedGeoManualOverride}
+              {...form.register('geo_latitude')}
+            />
+          </ResourceField>
+
+          <ResourceField
+            label="经度"
+            hint="范围 -180 到 180，例如上海约为 121.4737"
+            error={form.formState.errors.geo_longitude?.message}
+          >
+            <ResourceInput
+              placeholder="121.4737"
+              disabled={!watchedGeoManualOverride}
+              {...form.register('geo_longitude')}
+            />
+          </ResourceField>
+        </div>
+      </form>
+    </AppModal>
+  );
+}

openflare_server/web/features/nodes/components/nodes-page.tsx

@@ -0,0 +1,408 @@
+'use client';
+
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+
+import { EmptyState } from '@/components/feedback/empty-state';
+import { ErrorState } from '@/components/feedback/error-state';
+import { InlineMessage } from '@/components/feedback/inline-message';
+import { LoadingState } from '@/components/feedback/loading-state';
+import { PageHeader } from '@/components/layout/page-header';
+import { AppCard } from '@/components/ui/app-card';
+import { StatusBadge } from '@/components/ui/status-badge';
+import { getConfigVersions } from '@/features/config-versions/api/config-versions';
+import {
+  createNode,
+  deleteNode,
+  getNodes,
+  updateNode,
+} from '@/features/nodes/api/nodes';
+import { NodeEditorModal } from '@/features/nodes/components/node-editor-modal';
+import type { NodeItem, NodeMutationPayload } from '@/features/nodes/types';
+import {
+  DangerButton,
+  SecondaryButton,
+} from '@/features/shared/components/resource-primitives';
+import { formatDateTime, formatRelativeTime } from '@/lib/utils/date';
+import {
+  getApplyLabel,
+  getApplyVariant,
+  getNodeStatusLabel,
+  getNodeStatusVariant,
+  getOpenrestyStatusLabel,
+  getOpenrestyStatusVariant,
+  isMeaningfulTime,
+} from '@/features/nodes/utils';
+
+const nodesQueryKey = ['nodes'];
+const supportedRiskFilters = [
+  'all',
+  'offline',
+  'unhealthy',
+  'lagging',
+] as const;
+
+type NodeRiskFilter = (typeof supportedRiskFilters)[number];
+
+type FeedbackState = {
+  tone: 'info' | 'success' | 'danger';
+  message: string;
+};
+
+function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : '请求失败，请稍后重试。';
+}
+
+export function NodesPage() {
+  const searchParams = useSearchParams();
+  const queryClient = useQueryClient();
+  const [feedback, setFeedback] = useState<FeedbackState | null>(null);
+  const [editingNode, setEditingNode] = useState<NodeItem | null>(null);
+  const [isEditorOpen, setIsEditorOpen] = useState(false);
+
+  const nodesQuery = useQuery({
+    queryKey: nodesQueryKey,
+    queryFn: getNodes,
+    refetchInterval: 5000,
+  });
+
+  const configVersionsQuery = useQuery({
+    queryKey: ['config-versions'],
+    queryFn: getConfigVersions,
+    refetchInterval: 5000,
+  });
+
+  const saveMutation = useMutation({
+    mutationFn: async (payload: NodeMutationPayload) => {
+      return editingNode
+        ? updateNode(editingNode.id, payload)
+        : createNode(payload);
+    },
+    onSuccess: async () => {
+      setFeedback({
+        tone: 'success',
+        message: editingNode ? '节点已更新。' : '节点已创建。',
+      });
+      setEditingNode(null);
+      setIsEditorOpen(false);
+      await queryClient.invalidateQueries({ queryKey: nodesQueryKey });
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: deleteNode,
+    onSuccess: async () => {
+      setFeedback({ tone: 'success', message: '节点已删除。' });
+      setEditingNode(null);
+      await queryClient.invalidateQueries({ queryKey: nodesQueryKey });
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const nodes = useMemo(() => nodesQuery.data ?? [], [nodesQuery.data]);
+  const activeVersion = useMemo(
+    () =>
+      (configVersionsQuery.data ?? []).find((item) => item.is_active)
+        ?.version ?? '',
+    [configVersionsQuery.data],
+  );
+  const riskFilter = useMemo<NodeRiskFilter>(() => {
+    const current = searchParams.get('risk')?.trim().toLowerCase() ?? 'all';
+    return supportedRiskFilters.includes(current as NodeRiskFilter)
+      ? (current as NodeRiskFilter)
+      : 'all';
+  }, [searchParams]);
+  const filteredNodes = useMemo(() => {
+    switch (riskFilter) {
+      case 'offline':
+        return nodes.filter((node) => node.status === 'offline');
+      case 'unhealthy':
+        return nodes.filter((node) => node.openresty_status === 'unhealthy');
+      case 'lagging':
+        return nodes.filter((node) => {
+          if (!activeVersion) {
+            return false;
+          }
+          return node.current_version !== activeVersion;
+        });
+      default:
+        return nodes;
+    }
+  }, [activeVersion, nodes, riskFilter]);
+
+  const filterDescription = useMemo(() => {
+    switch (riskFilter) {
+      case 'offline':
+        return '当前仅展示离线节点。';
+      case 'unhealthy':
+        return '当前仅展示 OpenResty 异常节点。';
+      case 'lagging':
+        return activeVersion
+          ? `当前仅展示未追平激活版本 ${activeVersion} 的节点。`
+          : '当前没有激活版本，无法筛选配置落后节点。';
+      default:
+        return '列表每 5 秒自动刷新一次。';
+    }
+  }, [activeVersion, riskFilter]);
+
+  const handleReset = () => {
+    setFeedback(null);
+    setEditingNode(null);
+    setIsEditorOpen(false);
+  };
+
+  const handleCreate = () => {
+    setFeedback(null);
+    setEditingNode(null);
+    setIsEditorOpen(true);
+  };
+
+  const handleEdit = (node: NodeItem) => {
+    setFeedback(null);
+    setEditingNode(node);
+    setIsEditorOpen(true);
+  };
+
+  const handleDelete = (nodeId: number, nodeName: string) => {
+    if (
+      !window.confirm(
+        `确认删除节点“${nodeName}”吗？删除后该节点需要重新创建并重新接入。`,
+      )
+    ) {
+      return;
+    }
+
+    setFeedback(null);
+    deleteMutation.mutate(nodeId);
+  };
+  return (
+    <>
+      <div className="space-y-6">
+        <PageHeader
+          title="节点管理"
+          description="节点列表只保留状态、版本与最近活动等关键内容。节点部署、Token、更新模式与手动升级入口统一收敛到详情页。"
+          action={
+            <>
+              <SecondaryButton type="button" onClick={handleCreate}>
+                新增节点
+              </SecondaryButton>
+              <Link
+                href="/apply-log"
+                className="inline-flex items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-3 text-sm font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
+              >
+                应用记录
+              </Link>
+            </>
+          }
+        />
+
+        {feedback ? (
+          <InlineMessage tone={feedback.tone} message={feedback.message} />
+        ) : null}
+
+        <AppCard
+          title="节点列表"
+          description={filterDescription}
+          action={
+            <SecondaryButton
+              type="button"
+              onClick={() =>
+                void queryClient.invalidateQueries({ queryKey: nodesQueryKey })
+              }
+            >
+              立即刷新
+            </SecondaryButton>
+          }
+        >
+          {nodesQuery.isLoading ? (
+            <LoadingState />
+          ) : nodesQuery.isError ? (
+            <ErrorState
+              title="节点列表加载失败"
+              description={getErrorMessage(nodesQuery.error)}
+            />
+          ) : filteredNodes.length === 0 ? (
+            <EmptyState
+              title={riskFilter === 'all' ? '暂无节点' : '当前筛选无结果'}
+              description={
+                riskFilter === 'all'
+                  ? '请先创建一个节点，然后进入详情页查看专属部署命令。'
+                  : '可以返回总览继续排查，或切换到全部节点查看完整列表。'
+              }
+            />
+          ) : (
+            <div className="space-y-4">
+              <div className="flex flex-wrap gap-2">
+                <Link
+                  href="/node"
+                  className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
+                    riskFilter === 'all'
+                      ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                      : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
+                  }`}
+                >
+                  全部节点
+                </Link>
+                <Link
+                  href="/node?risk=offline"
+                  className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
+                    riskFilter === 'offline'
+                      ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                      : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
+                  }`}
+                >
+                  离线节点
+                </Link>
+                <Link
+                  href="/node?risk=unhealthy"
+                  className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
+                    riskFilter === 'unhealthy'
+                      ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                      : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
+                  }`}
+                >
+                  OpenResty 异常
+                </Link>
+                <Link
+                  href="/node?risk=lagging"
+                  className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
+                    riskFilter === 'lagging'
+                      ? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
+                      : 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
+                  }`}
+                >
+                  配置落后
+                </Link>
+              </div>
+
+              <div className="overflow-x-auto">
+                <table className="min-w-full divide-y divide-[var(--border-default)] text-left text-sm">
+                  <thead>
+                    <tr className="text-[var(--foreground-secondary)]">
+                      <th className="px-3 py-3 font-medium">节点</th>
+                      <th className="px-3 py-3 font-medium">状态</th>
+                      <th className="px-3 py-3 font-medium">
+                        Agent / OpenResty
+                      </th>
+                      <th className="px-3 py-3 font-medium">运行健康</th>
+                      <th className="px-3 py-3 font-medium">当前版本</th>
+                      <th className="px-3 py-3 font-medium">最近应用</th>
+                      <th className="px-3 py-3 font-medium">最近心跳</th>
+                      <th className="px-3 py-3 font-medium">操作</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-[var(--border-default)]">
+                    {filteredNodes.map((node) => (
+                      <tr key={node.id} className="align-top">
+                        <td className="px-3 py-4">
+                          <div className="space-y-1">
+                            <p className="font-medium text-[var(--foreground-primary)]">
+                              {node.name}
+                            </p>
+                            <p className="text-xs text-[var(--foreground-secondary)]">
+                              IP：{node.ip || 'null'}
+                            </p>
+                            <p className="text-xs text-[var(--foreground-secondary)]">
+                              位置：{node.geo_name || '未配置地图点位'}
+                            </p>
+                          </div>
+                        </td>
+                        <td className="px-3 py-4">
+                          <StatusBadge
+                            label={getNodeStatusLabel(node.status)}
+                            variant={getNodeStatusVariant(node.status)}
+                          />
+                        </td>
+                        <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                          {node.agent_version || 'unknown'} /{' '}
+                          {node.nginx_version || 'unknown'}
+                        </td>
+                        <td className="px-3 py-4">
+                          <div className="space-y-2">
+                            <StatusBadge
+                              label={getOpenrestyStatusLabel(
+                                node.openresty_status,
+                              )}
+                              variant={getOpenrestyStatusVariant(
+                                node.openresty_status,
+                              )}
+                            />
+                          </div>
+                        </td>
+                        <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                          {node.current_version || '未应用'}
+                        </td>
+                        <td className="px-3 py-4">
+                          <div className="space-y-2">
+                            <StatusBadge
+                              label={getApplyLabel(node.latest_apply_result)}
+                              variant={getApplyVariant(
+                                node.latest_apply_result,
+                              )}
+                            />
+                          </div>
+                        </td>
+                        <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                          {isMeaningfulTime(node.last_seen_at)
+                            ? `${formatRelativeTime(
+                                node.last_seen_at,
+                              )} · ${formatDateTime(node.last_seen_at)}`
+                            : '暂无'}
+                        </td>
+                        <td className="px-3 py-4">
+                          <div className="flex flex-wrap gap-2">
+                            <Link
+                              href={`/node/detail?id=${node.id}`}
+                              className="inline-flex items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-3 py-2 text-xs font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
+                            >
+                              详情
+                            </Link>
+                            <SecondaryButton
+                              type="button"
+                              onClick={() => handleEdit(node)}
+                              className="px-3 py-2 text-xs"
+                            >
+                              编辑
+                            </SecondaryButton>
+                            <DangerButton
+                              type="button"
+                              onClick={() => handleDelete(node.id, node.name)}
+                              disabled={deleteMutation.isPending}
+                              className="px-3 py-2 text-xs"
+                            >
+                              删除
+                            </DangerButton>
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+        </AppCard>
+      </div>
+      <NodeEditorModal
+        isOpen={isEditorOpen}
+        node={editingNode}
+        isSubmitting={saveMutation.isPending}
+        title={editingNode ? '编辑节点' : '新增节点'}
+        onClose={handleReset}
+        description="预创建节点后可在详情页查看专属 Token、部署命令与更新控制。"
+        submitLabel={editingNode ? '保存修改' : '新增节点'}
+        onSubmit={(payload) => {
+          setFeedback(null);
+          saveMutation.mutate(payload);
+        }}
+      />
+    </>
+  );
+}

openflare_server/web/features/nodes/types.ts

@@ -0,0 +1,205 @@
+import type { ReleaseChannel } from '@/features/update/types';
+
+export interface NodeItem {
+  id: number;
+  node_id: string;
+  name: string;
+  ip: string;
+  geo_name: string;
+  geo_latitude?: number | null;
+  geo_longitude?: number | null;
+  geo_manual_override: boolean;
+  agent_token: string;
+  auto_update_enabled: boolean;
+  update_requested: boolean;
+  update_channel: ReleaseChannel;
+  update_tag: string;
+  restart_openresty_requested: boolean;
+  agent_version: string;
+  nginx_version: string;
+  openresty_status: 'healthy' | 'unhealthy' | 'unknown';
+  openresty_message: string;
+  status: 'online' | 'offline' | 'pending';
+  current_version: string;
+  last_seen_at: string;
+  last_error: string;
+  latest_apply_result: 'success' | 'failed' | '';
+  latest_apply_message: string;
+  latest_apply_checksum: string;
+  latest_main_config_checksum: string;
+  latest_route_config_checksum: string;
+  latest_support_file_count: number;
+  latest_apply_at?: string | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface NodeBootstrapToken {
+  discovery_token: string;
+}
+
+export interface NodeMutationPayload {
+  name: string;
+  ip: string;
+  auto_update_enabled: boolean;
+  geo_name: string;
+  geo_latitude?: number | null;
+  geo_longitude?: number | null;
+  geo_manual_override: boolean;
+}
+
+export interface NodeAgentReleaseInfo {
+  tag_name: string;
+  body: string;
+  html_url: string;
+  published_at: string;
+  current_version: string;
+  has_update: boolean;
+  channel: ReleaseChannel;
+  prerelease: boolean;
+  update_requested: boolean;
+  requested_channel: ReleaseChannel;
+  requested_tag: string;
+}
+
+export interface NodeAgentUpdatePayload {
+  channel?: ReleaseChannel;
+  tag_name?: string;
+}
+
+export interface NodeSystemProfile {
+  hostname: string;
+  os_name: string;
+  os_version: string;
+  kernel_version: string;
+  architecture: string;
+  cpu_model: string;
+  cpu_cores: number;
+  total_memory_bytes: number;
+  total_disk_bytes: number;
+  uptime_seconds: number;
+  reported_at: string;
+}
+
+export interface NodeMetricSnapshot {
+  captured_at: string;
+  cpu_usage_percent: number;
+  memory_used_bytes: number;
+  memory_total_bytes: number;
+  storage_used_bytes: number;
+  storage_total_bytes: number;
+  disk_read_bytes: number;
+  disk_write_bytes: number;
+  network_rx_bytes: number;
+  network_tx_bytes: number;
+  openresty_rx_bytes: number;
+  openresty_tx_bytes: number;
+  openresty_connections: number;
+}
+
+export interface NodeTrafficReport {
+  window_started_at: string;
+  window_ended_at: string;
+  request_count: number;
+  error_count: number;
+  unique_visitor_count: number;
+  status_codes_json: string;
+  top_domains_json: string;
+  source_countries_json: string;
+}
+
+export interface NodeTrafficTrendPoint {
+  bucket_started_at: string;
+  request_count: number;
+  error_count: number;
+  unique_visitor_count: number;
+}
+
+export interface NodeCapacityTrendPoint {
+  bucket_started_at: string;
+  average_cpu_usage_percent: number;
+  average_memory_usage_percent: number;
+  reported_nodes: number;
+}
+
+export interface NodeNetworkTrendPoint {
+  bucket_started_at: string;
+  network_rx_bytes: number;
+  network_tx_bytes: number;
+  openresty_rx_bytes: number;
+  openresty_tx_bytes: number;
+  reported_nodes: number;
+}
+
+export interface NodeDiskIOTrendPoint {
+  bucket_started_at: string;
+  disk_read_bytes: number;
+  disk_write_bytes: number;
+  reported_nodes: number;
+}
+
+export interface NodeDistributionItem {
+  key: string;
+  value: number;
+}
+
+export interface NodeTrafficDistributions {
+  status_codes: NodeDistributionItem[];
+  top_domains: NodeDistributionItem[];
+  source_countries: NodeDistributionItem[];
+}
+
+export interface NodeTrafficSummary {
+  window_started_at: string;
+  window_ended_at: string;
+  request_count: number;
+  unique_visitor_count: number;
+  error_count: number;
+  estimated_qps: number;
+  error_rate_percent: number;
+}
+
+export interface NodeHealthSummary {
+  active_alerts: number;
+  critical_alerts: number;
+  warning_alerts: number;
+  info_alerts: number;
+  resolved_alerts: number;
+  has_capacity_risk: boolean;
+  has_traffic_risk: boolean;
+  has_runtime_risk: boolean;
+}
+
+export interface NodeObservabilityAnalytics {
+  traffic: NodeTrafficSummary;
+  distributions: NodeTrafficDistributions;
+  health: NodeHealthSummary;
+}
+
+export interface NodeObservabilityTrends {
+  traffic_24h: NodeTrafficTrendPoint[];
+  capacity_24h: NodeCapacityTrendPoint[];
+  network_24h: NodeNetworkTrendPoint[];
+  disk_io_24h: NodeDiskIOTrendPoint[];
+}
+
+export interface NodeHealthEvent {
+  event_type: string;
+  severity: string;
+  status: string;
+  message: string;
+  first_triggered_at: string;
+  last_triggered_at: string;
+  reported_at: string;
+  resolved_at?: string | null;
+}
+
+export interface NodeObservability {
+  node_id: string;
+  profile: NodeSystemProfile | null;
+  metric_snapshots: NodeMetricSnapshot[];
+  traffic_reports: NodeTrafficReport[];
+  health_events: NodeHealthEvent[];
+  analytics: NodeObservabilityAnalytics;
+  trends: NodeObservabilityTrends;
+}

openflare_server/web/features/nodes/utils.ts

@@ -0,0 +1,161 @@
+import type { NodeItem } from '@/features/nodes/types';
+
+export function isMeaningfulTime(value: string | null | undefined) {
+  return Boolean(value) && !String(value).startsWith('0001-01-01');
+}
+
+export function getNodeStatusVariant(status: NodeItem['status']) {
+  if (status === 'online') {
+    return 'success';
+  }
+
+  if (status === 'pending') {
+    return 'warning';
+  }
+
+  return 'danger';
+}
+
+export function getNodeStatusLabel(status: NodeItem['status']) {
+  if (status === 'online') {
+    return '在线';
+  }
+
+  if (status === 'pending') {
+    return '待接入';
+  }
+
+  return '离线';
+}
+
+export function getApplyVariant(result: NodeItem['latest_apply_result']) {
+  if (result === 'success') {
+    return 'success';
+  }
+
+  if (result === 'failed') {
+    return 'danger';
+  }
+
+  return 'warning';
+}
+
+export function getApplyLabel(result: NodeItem['latest_apply_result']) {
+  if (result === 'success') {
+    return '成功';
+  }
+
+  if (result === 'failed') {
+    return '失败';
+  }
+
+  return '暂无';
+}
+
+export function getUpdateMode(node: NodeItem) {
+  if (node.update_requested) {
+    if (node.update_channel === 'preview') {
+      return { label: '等待预览更新', variant: 'warning' as const };
+    }
+
+    return { label: '等待更新', variant: 'warning' as const };
+  }
+
+  if (node.auto_update_enabled) {
+    return { label: '自动', variant: 'success' as const };
+  }
+
+  return { label: '手动', variant: 'info' as const };
+}
+
+export function getOpenrestyStatusVariant(status: NodeItem['openresty_status']) {
+  if (status === 'healthy') {
+    return 'success';
+  }
+
+  if (status === 'unhealthy') {
+    return 'danger';
+  }
+
+  return 'warning';
+}
+
+export function getOpenrestyStatusLabel(status: NodeItem['openresty_status']) {
+  if (status === 'healthy') {
+    return '健康';
+  }
+
+  if (status === 'unhealthy') {
+    return '异常';
+  }
+
+  return '未知';
+}
+
+function parseVersionParts(version: string) {
+  const normalized = version.trim().replace(/^v/i, '');
+  if (!normalized || normalized.toLowerCase() === 'unknown') {
+    return null;
+  }
+
+  return normalized.split('.').map((segment) => {
+    const matched = segment.trim().match(/^\d+/);
+    return matched ? Number.parseInt(matched[0], 10) : 0;
+  });
+}
+
+function isOlderVersion(current: string, target: string) {
+  const currentParts = parseVersionParts(current);
+  const targetParts = parseVersionParts(target);
+  if (!currentParts || !targetParts) {
+    return false;
+  }
+
+  const maxLength = Math.max(currentParts.length, targetParts.length);
+  for (let index = 0; index < maxLength; index += 1) {
+    const currentPart = currentParts[index] ?? 0;
+    const targetPart = targetParts[index] ?? 0;
+    if (currentPart < targetPart) {
+      return true;
+    }
+    if (currentPart > targetPart) {
+      return false;
+    }
+  }
+
+  return false;
+}
+
+export function shouldShowManualUpdate(
+  agentVersion: string,
+  serverVersion: string,
+) {
+  const normalizedServerVersion = serverVersion.trim();
+  const normalizedAgentVersion = agentVersion.trim();
+
+  if (
+    !normalizedServerVersion ||
+    normalizedServerVersion.toLowerCase() === 'dev' ||
+    !normalizedAgentVersion ||
+    normalizedAgentVersion.toLowerCase() === 'unknown'
+  ) {
+    return false;
+  }
+
+  return isOlderVersion(normalizedAgentVersion, normalizedServerVersion);
+}
+
+export function getServerUrl(value: string) {
+  return value.trim().replace(/\/+$/, '');
+}
+
+const installerScriptUrl =
+  'https://raw.githubusercontent.com/Rain-kl/OpenFlare/main/scripts/install-agent.sh';
+
+export function buildNodeInstallCommand(serverUrl: string, agentToken: string) {
+  return [
+    `curl -fsSL ${installerScriptUrl} | bash -s -- \\`,
+    `  --server-url ${serverUrl} \\`,
+    `  --agent-token ${agentToken}`,
+  ].join('\n');
+}

openflare_server/web/features/proxy-routes/api/proxy-routes.ts

@@ -0,0 +1,41 @@
+import { apiRequest } from '@/lib/api/client';
+
+import type {
+  ManagedDomainMatchResult,
+  ProxyRouteItem,
+  ProxyRouteMutationPayload,
+  TlsCertificateItem,
+} from '@/features/proxy-routes/types';
+
+export function getProxyRoutes() {
+  return apiRequest<ProxyRouteItem[]>('/proxy-routes/');
+}
+
+export function createProxyRoute(payload: ProxyRouteMutationPayload) {
+  return apiRequest<ProxyRouteItem>('/proxy-routes/', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+}
+
+export function updateProxyRoute(id: number, payload: ProxyRouteMutationPayload) {
+  return apiRequest<ProxyRouteItem>(`/proxy-routes/${id}`, {
+    method: 'PUT',
+    body: JSON.stringify(payload),
+  });
+}
+
+export function deleteProxyRoute(id: number) {
+  return apiRequest<void>(`/proxy-routes/${id}`, {
+    method: 'DELETE',
+  });
+}
+
+export function getTlsCertificates() {
+  return apiRequest<TlsCertificateItem[]>('/tls-certificates/');
+}
+
+export function matchManagedDomainCertificate(domain: string) {
+  const searchParams = new URLSearchParams({ domain });
+  return apiRequest<ManagedDomainMatchResult>(`/managed-domains/match?${searchParams.toString()}`);
+}

openflare_server/web/features/proxy-routes/components/proxy-routes-page.tsx

@@ -0,0 +1,820 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useMemo, useState } from 'react';
+import { useFieldArray, useForm, useWatch } from 'react-hook-form';
+import { z } from 'zod';
+
+import { EmptyState } from '@/components/feedback/empty-state';
+import { ErrorState } from '@/components/feedback/error-state';
+import { InlineMessage } from '@/components/feedback/inline-message';
+import { LoadingState } from '@/components/feedback/loading-state';
+import { PageHeader } from '@/components/layout/page-header';
+import { AppModal } from '@/components/ui/app-modal';
+import { AppCard } from '@/components/ui/app-card';
+import { StatusBadge } from '@/components/ui/status-badge';
+import {
+  getConfigVersionDiff,
+  publishConfigVersion,
+} from '@/features/config-versions/api/config-versions';
+import {
+  createProxyRoute,
+  deleteProxyRoute,
+  getProxyRoutes,
+  getTlsCertificates,
+  matchManagedDomainCertificate,
+  updateProxyRoute,
+} from '@/features/proxy-routes/api/proxy-routes';
+import type {
+  ManagedDomainMatchResult,
+  ProxyRouteCustomHeader,
+  ProxyRouteItem,
+  ProxyRouteMutationPayload,
+  TlsCertificateItem,
+} from '@/features/proxy-routes/types';
+import {
+  DangerButton,
+  PrimaryButton,
+  ResourceField,
+  ResourceInput,
+  ResourceSelect,
+  ResourceTextarea,
+  SecondaryButton,
+  ToggleField,
+} from '@/features/shared/components/resource-primitives';
+import { formatDateTime } from '@/lib/utils/date';
+
+const customHeaderSchema = z.object({
+  key: z.string(),
+  value: z.string(),
+});
+
+const proxyRouteSchema = z
+  .object({
+    domain: z.string().trim().min(1, '请输入域名'),
+    origin_url: z
+      .string()
+      .trim()
+      .min(1, '请输入源站地址')
+      .refine(
+        (value) => /^https?:\/\//.test(value),
+        '源站地址必须以 http:// 或 https:// 开头',
+      )
+      .refine((value) => {
+        try {
+          new URL(value);
+          return true;
+        } catch {
+          return false;
+        }
+      }, '请输入合法的源站地址'),
+    enabled: z.boolean(),
+    enable_https: z.boolean(),
+    cert_id: z.string(),
+    redirect_http: z.boolean(),
+    custom_headers: z.array(customHeaderSchema).min(1),
+    remark: z.string().max(255, '备注不能超过 255 个字符'),
+  })
+  .superRefine((value, context) => {
+    if (value.enable_https && !value.cert_id) {
+      context.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ['cert_id'],
+        message: '启用 HTTPS 时必须选择证书',
+      });
+    }
+
+    value.custom_headers.forEach((header, index) => {
+      const key = header.key.trim();
+      const headerValue = header.value.trim();
+
+      if (!key && !headerValue) {
+        return;
+      }
+
+      if (!key) {
+        context.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['custom_headers', index, 'key'],
+          message: '请求头名称不能为空',
+        });
+      }
+
+      if (key && !/^[A-Za-z0-9_-]+$/.test(key)) {
+        context.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['custom_headers', index, 'key'],
+          message: '请求头名称仅支持字母、数字、下划线和中划线',
+        });
+      }
+
+      if (/\r|\n/.test(key) || /\r|\n/.test(headerValue)) {
+        context.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['custom_headers', index, 'value'],
+          message: '请求头不能包含换行',
+        });
+      }
+    });
+  });
+
+type ProxyRouteFormValues = z.infer<typeof proxyRouteSchema>;
+
+type FeedbackState = {
+  tone: 'info' | 'success' | 'danger';
+  message: string;
+};
+
+const defaultValues: ProxyRouteFormValues = {
+  domain: '',
+  origin_url: '',
+  enabled: true,
+  enable_https: false,
+  cert_id: '',
+  redirect_http: false,
+  custom_headers: [{ key: '', value: '' }],
+  remark: '',
+};
+
+const routesQueryKey = ['proxy-routes'];
+const certificatesQueryKey = ['tls-certificates'];
+const versionsQueryKey = ['config-versions'];
+
+function hasConfigChanges(diff: {
+  active_version?: string;
+  added_domains: string[];
+  removed_domains: string[];
+  modified_domains: string[];
+  main_config_changed: boolean;
+  changed_option_keys: string[];
+}) {
+  return (
+    diff.added_domains.length > 0 ||
+    diff.removed_domains.length > 0 ||
+    diff.modified_domains.length > 0 ||
+    diff.main_config_changed ||
+    diff.changed_option_keys.length > 0 ||
+    !diff.active_version
+  );
+}
+
+function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : '请求失败，请稍后重试。';
+}
+
+function parseCustomHeaders(rawValue: string) {
+  if (!rawValue) {
+    return [] as ProxyRouteCustomHeader[];
+  }
+
+  try {
+    const parsed = JSON.parse(rawValue) as ProxyRouteCustomHeader[];
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+
+function buildCertificateLabel(certificate: TlsCertificateItem) {
+  return certificate.not_after
+    ? `${certificate.name}（到期：${formatDateTime(certificate.not_after)}）`
+    : certificate.name;
+}
+
+function toPayload(values: ProxyRouteFormValues): ProxyRouteMutationPayload {
+  return {
+    domain: values.domain.trim(),
+    origin_url: values.origin_url.trim(),
+    enabled: values.enabled,
+    enable_https: values.enable_https,
+    cert_id:
+      values.enable_https && values.cert_id ? Number(values.cert_id) : null,
+    redirect_http: values.enable_https ? values.redirect_http : false,
+    custom_headers: values.custom_headers
+      .map((item) => ({ key: item.key.trim(), value: item.value.trim() }))
+      .filter((item) => item.key || item.value),
+    remark: values.remark.trim(),
+  };
+}
+
+function toFormValues(route: ProxyRouteItem): ProxyRouteFormValues {
+  const headers = parseCustomHeaders(route.custom_headers);
+
+  return {
+    domain: route.domain,
+    origin_url: route.origin_url,
+    enabled: route.enabled,
+    enable_https: route.enable_https,
+    cert_id: route.cert_id ? String(route.cert_id) : '',
+    redirect_http: route.redirect_http,
+    custom_headers: headers.length > 0 ? headers : [{ key: '', value: '' }],
+    remark: route.remark || '',
+  };
+}
+
+function getMatchMessage(
+  matchResult: ManagedDomainMatchResult | null,
+  isMatching: boolean,
+  domain: string,
+  enabled: boolean,
+) {
+  if (!enabled) {
+    return '启用 HTTPS 后，系统会根据输入域名尝试自动匹配托管证书。';
+  }
+
+  if (isMatching) {
+    return '正在按域名自动匹配托管证书...';
+  }
+
+  if (!domain.trim()) {
+    return '输入域名后会自动匹配证书，并优先推荐精确匹配规则。';
+  }
+
+  if (matchResult?.matched && matchResult.candidate) {
+    return `已匹配${matchResult.candidate.match_type === 'exact' ? '精确' : '通配符'}规则 ${matchResult.candidate.domain}，推荐证书：${matchResult.candidate.certificate_name}`;
+  }
+
+  return '未找到匹配证书，可继续手动选择。';
+}
+
+export function ProxyRoutesPage() {
+  const queryClient = useQueryClient();
+  const [feedback, setFeedback] = useState<FeedbackState | null>(null);
+  const [editingRouteId, setEditingRouteId] = useState<number | null>(null);
+  const [isEditorOpen, setIsEditorOpen] = useState(false);
+  const [matchResult, setMatchResult] =
+    useState<ManagedDomainMatchResult | null>(null);
+  const [isMatching, setIsMatching] = useState(false);
+
+  const form = useForm<ProxyRouteFormValues>({
+    resolver: zodResolver(proxyRouteSchema),
+    defaultValues,
+  });
+
+  const { fields, append, remove, replace } = useFieldArray({
+    control: form.control,
+    name: 'custom_headers',
+  });
+
+  const watchedDomain = useWatch({ control: form.control, name: 'domain' });
+  const watchedEnabled = useWatch({ control: form.control, name: 'enabled' });
+  const watchedEnableHttps = useWatch({
+    control: form.control,
+    name: 'enable_https',
+  });
+  const watchedRedirectHttp = useWatch({
+    control: form.control,
+    name: 'redirect_http',
+  });
+  const watchedCertId = useWatch({ control: form.control, name: 'cert_id' });
+
+  const routesQuery = useQuery({
+    queryKey: routesQueryKey,
+    queryFn: getProxyRoutes,
+  });
+
+  const certificatesQuery = useQuery({
+    queryKey: certificatesQueryKey,
+    queryFn: getTlsCertificates,
+  });
+
+  const saveMutation = useMutation({
+    mutationFn: async (values: ProxyRouteFormValues) => {
+      const payload = toPayload(values);
+      return editingRouteId
+        ? updateProxyRoute(editingRouteId, payload)
+        : createProxyRoute(payload);
+    },
+    onSuccess: async () => {
+      setFeedback({
+        tone: 'success',
+        message: editingRouteId ? '规则已更新。' : '规则已创建。',
+      });
+      setEditingRouteId(null);
+      setIsEditorOpen(false);
+      setMatchResult(null);
+      form.reset(defaultValues);
+      await queryClient.invalidateQueries({ queryKey: routesQueryKey });
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: deleteProxyRoute,
+    onSuccess: async () => {
+      setFeedback({ tone: 'success', message: '规则已删除。' });
+      await queryClient.invalidateQueries({ queryKey: routesQueryKey });
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const publishMutation = useMutation({
+    mutationFn: publishConfigVersion,
+    onSuccess: async (version) => {
+      setFeedback({
+        tone: 'success',
+        message: `发布成功，版本 ${version.version}`,
+      });
+      await queryClient.invalidateQueries({ queryKey: versionsQueryKey });
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const handlePublish = async () => {
+    setFeedback(null);
+
+    try {
+      const diff = await getConfigVersionDiff();
+      if (!hasConfigChanges(diff)) {
+        setFeedback({
+          tone: 'info',
+          message: '当前规则没有变更，已阻止重复发布。',
+        });
+        return;
+      }
+
+      publishMutation.mutate();
+    } catch (error) {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    }
+  };
+
+  useEffect(() => {
+    if (!watchedEnableHttps) {
+      setMatchResult(null);
+      setIsMatching(false);
+      return;
+    }
+
+    const normalizedDomain = watchedDomain.trim().toLowerCase();
+    if (!normalizedDomain) {
+      setMatchResult(null);
+      return;
+    }
+
+    let cancelled = false;
+    const timer = window.setTimeout(async () => {
+      try {
+        setIsMatching(true);
+        const result = await matchManagedDomainCertificate(normalizedDomain);
+        if (cancelled) {
+          return;
+        }
+        setMatchResult(result);
+        if (result.candidate?.certificate_id && !form.getValues('cert_id')) {
+          form.setValue('cert_id', String(result.candidate.certificate_id), {
+            shouldDirty: true,
+            shouldValidate: true,
+          });
+        }
+      } catch (error) {
+        if (!cancelled) {
+          setMatchResult(null);
+          setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+        }
+      } finally {
+        if (!cancelled) {
+          setIsMatching(false);
+        }
+      }
+    }, 400);
+
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timer);
+    };
+  }, [watchedDomain, watchedEnableHttps, form]);
+
+  const certificates = useMemo(
+    () => certificatesQuery.data ?? [],
+    [certificatesQuery.data],
+  );
+
+  const handleReset = () => {
+    setFeedback(null);
+    setEditingRouteId(null);
+    setIsEditorOpen(false);
+    setMatchResult(null);
+    form.reset(defaultValues);
+  };
+
+  const handleCreate = () => {
+    setFeedback(null);
+    setEditingRouteId(null);
+    setMatchResult(null);
+    form.reset(defaultValues);
+    setIsEditorOpen(true);
+  };
+
+  const handleSubmit = form.handleSubmit((values) => {
+    setFeedback(null);
+    saveMutation.mutate(values);
+  });
+
+  const handleEdit = (route: ProxyRouteItem) => {
+    setFeedback(null);
+    setEditingRouteId(route.id);
+    setMatchResult(null);
+    form.reset(toFormValues(route));
+    setIsEditorOpen(true);
+  };
+
+  const handleDelete = (route: ProxyRouteItem) => {
+    if (!window.confirm(`确认删除规则 ${route.domain} 吗？`)) {
+      return;
+    }
+
+    setFeedback(null);
+    deleteMutation.mutate(route.id);
+  };
+
+  const handleRemoveHeader = (index: number) => {
+    if (fields.length === 1) {
+      replace([{ key: '', value: '' }]);
+      return;
+    }
+
+    remove(index);
+  };
+
+  const routes = routesQuery.data || [];
+
+  return (
+    <>
+      <div className="space-y-6">
+        <PageHeader
+          title="反代规则"
+          description="维护域名到源站的映射、HTTPS 证书绑定与自定义请求头，并可直接触发配置发布。"
+          action={
+            <>
+              <PrimaryButton
+                type="button"
+                onClick={() => void handlePublish()}
+                disabled={publishMutation.isPending}
+              >
+                {publishMutation.isPending ? '发布中...' : '发布当前规则'}
+              </PrimaryButton>
+              <SecondaryButton type="button" onClick={handleCreate}>
+                新增规则
+              </SecondaryButton>
+            </>
+          }
+        />
+
+        {feedback ? (
+          <InlineMessage tone={feedback.tone} message={feedback.message} />
+        ) : null}
+
+        <AppCard title="规则列表">
+          {routesQuery.isLoading ? (
+            <LoadingState />
+          ) : routesQuery.isError ? (
+            <ErrorState
+              title="规则列表加载失败"
+              description={getErrorMessage(routesQuery.error)}
+            />
+          ) : routes.length === 0 ? (
+            <EmptyState
+              title="暂无反代规则"
+              description="请先创建至少一条规则，然后再进行发布。"
+            />
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="min-w-full divide-y divide-[var(--border-default)] text-left text-sm">
+                <thead>
+                  <tr className="text-[var(--foreground-secondary)]">
+                    <th className="px-3 py-3 font-medium">域名</th>
+                    <th className="px-3 py-3 font-medium">源站地址</th>
+                    <th className="px-3 py-3 font-medium">HTTPS</th>
+                    <th className="px-3 py-3 font-medium">请求头</th>
+                    <th className="px-3 py-3 font-medium">状态</th>
+                    <th className="px-3 py-3 font-medium">备注</th>
+                    <th className="px-3 py-3 font-medium">更新时间</th>
+                    <th className="px-3 py-3 font-medium">操作</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-[var(--border-default)]">
+                  {routes.map((route) => {
+                    const headers = parseCustomHeaders(route.custom_headers);
+
+                    return (
+                      <tr key={route.id} className="align-top">
+                        <td className="px-3 py-4 font-medium text-[var(--foreground-primary)]">
+                          {route.domain}
+                        </td>
+                        <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                          {route.origin_url}
+                        </td>
+                        <td className="px-3 py-4">
+                          {route.enable_https ? (
+                            <div className="space-y-2">
+                              <StatusBadge
+                                label={
+                                  route.redirect_http
+                                    ? 'HTTPS + 重定向'
+                                    : 'HTTPS'
+                                }
+                                variant="info"
+                              />
+                            </div>
+                          ) : (
+                            <StatusBadge label="HTTP" variant="warning" />
+                          )}
+                        </td>
+                        <td className="px-3 py-4">
+                          <StatusBadge
+                            label={
+                              headers.length > 0 ? `${headers.length} 条` : '无'
+                            }
+                            variant={headers.length > 0 ? 'success' : 'warning'}
+                          />
+                        </td>
+                        <td className="px-3 py-4">
+                          <StatusBadge
+                            label={route.enabled ? '启用' : '停用'}
+                            variant={route.enabled ? 'success' : 'warning'}
+                          />
+                        </td>
+                        <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                          {route.remark || '—'}
+                        </td>
+                        <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                          {formatDateTime(route.updated_at)}
+                        </td>
+                        <td className="px-3 py-4">
+                          <div className="flex flex-wrap gap-2">
+                            <SecondaryButton
+                              type="button"
+                              onClick={() => handleEdit(route)}
+                              className="px-3 py-2 text-xs"
+                            >
+                              编辑
+                            </SecondaryButton>
+                            <DangerButton
+                              type="button"
+                              onClick={() => handleDelete(route)}
+                              disabled={deleteMutation.isPending}
+                              className="px-3 py-2 text-xs"
+                            >
+                              删除
+                            </DangerButton>
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </AppCard>
+      </div>
+      <AppModal
+        isOpen={isEditorOpen}
+        onClose={handleReset}
+        title={editingRouteId ? '编辑规则' : '新增规则'}
+        description="新增或修改反代规则后，可直接回到列表页继续发布。"
+        size="xl"
+        footer={
+          <div className="flex flex-wrap justify-end gap-3">
+            <SecondaryButton
+              type="button"
+              onClick={handleReset}
+              disabled={saveMutation.isPending}
+            >
+              取消
+            </SecondaryButton>
+            <PrimaryButton
+              type="submit"
+              form="proxy-route-editor-form"
+              disabled={saveMutation.isPending}
+            >
+              {saveMutation.isPending
+                ? '保存中...'
+                : editingRouteId
+                  ? '保存修改'
+                  : '新增规则'}
+            </PrimaryButton>
+          </div>
+        }
+      >
+        <form
+          id="proxy-route-editor-form"
+          className="space-y-5"
+          onSubmit={handleSubmit}
+        >
+          <div className="grid gap-4 md:grid-cols-2">
+            <ResourceField
+              label="域名"
+              hint="示例：example.com"
+              error={form.formState.errors.domain?.message}
+            >
+              <ResourceInput
+                placeholder="example.com"
+                {...form.register('domain')}
+              />
+            </ResourceField>
+            <ResourceField
+              label="源站地址"
+              hint="示例：https://origin.internal"
+              error={form.formState.errors.origin_url?.message}
+            >
+              <ResourceInput
+                placeholder="https://origin.internal"
+                {...form.register('origin_url')}
+              />
+            </ResourceField>
+          </div>
+
+          <div className="grid gap-4 lg:grid-cols-2">
+            <ToggleField
+              label="启用规则"
+              description="关闭后该规则不会参与配置渲染与发布。"
+              checked={watchedEnabled}
+              onChange={(checked) =>
+                form.setValue('enabled', checked, { shouldDirty: true })
+              }
+            />
+            <ToggleField
+              label="启用 HTTPS"
+              description="启用后必须关联 TLS 证书，可选择是否将 HTTP 自动重定向到 HTTPS。"
+              checked={watchedEnableHttps}
+              onChange={(checked) => {
+                form.setValue('enable_https', checked, {
+                  shouldDirty: true,
+                  shouldValidate: true,
+                });
+                if (!checked) {
+                  form.setValue('cert_id', '', {
+                    shouldDirty: true,
+                    shouldValidate: true,
+                  });
+                  form.setValue('redirect_http', false, {
+                    shouldDirty: true,
+                    shouldValidate: true,
+                  });
+                }
+              }}
+            />
+          </div>
+
+          <div className="grid gap-4 lg:grid-cols-[1.2fr_0.8fr]">
+            <ResourceField
+              label="TLS 证书"
+              hint="启用 HTTPS 后可自动推荐匹配证书，也支持手动选择。"
+              error={form.formState.errors.cert_id?.message}
+            >
+              <ResourceSelect
+                value={watchedCertId}
+                disabled={!watchedEnableHttps || certificatesQuery.isLoading}
+                onChange={(event) =>
+                  form.setValue('cert_id', event.target.value, {
+                    shouldDirty: true,
+                    shouldValidate: true,
+                  })
+                }
+              >
+                <option value="">请选择证书</option>
+                {certificates.map((certificate) => (
+                  <option key={certificate.id} value={certificate.id}>
+                    {buildCertificateLabel(certificate)}
+                  </option>
+                ))}
+              </ResourceSelect>
+            </ResourceField>
+            <ToggleField
+              label="HTTP 跳转 HTTPS"
+              description="仅在启用 HTTPS 后可开启。开启后会将 HTTP 请求重定向到 HTTPS。"
+              checked={watchedRedirectHttp}
+              disabled={!watchedEnableHttps}
+              onChange={(checked) =>
+                form.setValue('redirect_http', checked, {
+                  shouldDirty: true,
+                  shouldValidate: true,
+                })
+              }
+            />
+          </div>
+
+          <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+            <div className="flex flex-wrap items-center justify-between gap-3">
+              <div>
+                <p className="text-sm font-semibold text-[var(--foreground-primary)]">
+                  自定义请求头
+                </p>
+                <p className="mt-1 text-xs leading-5 text-[var(--foreground-secondary)]">
+                  可为空。若填写，请保证 Header 名称合法且不包含换行。
+                </p>
+              </div>
+              <SecondaryButton
+                type="button"
+                onClick={() => append({ key: '', value: '' })}
+                className="px-3 py-2 text-xs"
+              >
+                添加请求头
+              </SecondaryButton>
+            </div>
+
+            <div className="mt-4 space-y-4">
+              {fields.map((field, index) => (
+                <div
+                  key={field.id}
+                  className="grid gap-3 md:grid-cols-[1fr_1fr_auto]"
+                >
+                  <ResourceField
+                    label={
+                      index === 0 ? 'Header 名称' : `Header 名称 ${index + 1}`
+                    }
+                    error={
+                      form.formState.errors.custom_headers?.[index]?.key
+                        ?.message
+                    }
+                  >
+                    <ResourceInput
+                      placeholder="X-Trace-Id"
+                      {...form.register(`custom_headers.${index}.key`)}
+                    />
+                  </ResourceField>
+                  <ResourceField
+                    label={index === 0 ? 'Header 值' : `Header 值 ${index + 1}`}
+                    error={
+                      form.formState.errors.custom_headers?.[index]?.value
+                        ?.message
+                    }
+                  >
+                    <ResourceInput
+                      placeholder="$request_id"
+                      {...form.register(`custom_headers.${index}.value`)}
+                    />
+                  </ResourceField>
+                  <div className="flex items-end">
+                    <DangerButton
+                      type="button"
+                      onClick={() => handleRemoveHeader(index)}
+                      className="w-full px-3 py-3 text-xs md:w-auto"
+                    >
+                      删除
+                    </DangerButton>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <AppCard
+            title="证书匹配提示"
+            description="根据域名自动匹配托管证书，优先使用精确匹配规则。"
+          >
+            <div className="space-y-3">
+              <p className="text-sm leading-6 text-[var(--foreground-secondary)]">
+                {getMatchMessage(
+                  matchResult,
+                  isMatching,
+                  watchedDomain,
+                  watchedEnableHttps,
+                )}
+              </p>
+              {matchResult?.matched && matchResult.candidates.length > 1 ? (
+                <div className="flex flex-wrap gap-2">
+                  {matchResult.candidates.map((candidate) => (
+                    <StatusBadge
+                      key={`${candidate.managed_domain_id}-${candidate.certificate_id}`}
+                      label={`${candidate.domain} → ${candidate.certificate_name}`}
+                      variant={
+                        candidate.match_type === 'exact' ? 'success' : 'info'
+                      }
+                    />
+                  ))}
+                </div>
+              ) : null}
+              <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4 text-sm text-[var(--foreground-secondary)]">
+                当前可选证书：
+                {certificatesQuery.isLoading
+                  ? '加载中...'
+                  : `${certificates.length} 张`}
+              </div>
+            </div>
+          </AppCard>
+
+          <ResourceField
+            label="备注"
+            hint="可选，便于标记用途、责任人或特殊说明。"
+            error={form.formState.errors.remark?.message}
+          >
+            <ResourceTextarea
+              placeholder="例如：主站生产流量入口"
+              {...form.register('remark')}
+            />
+          </ResourceField>
+        </form>
+      </AppModal>
+    </>
+  );
+}

openflare_server/web/features/proxy-routes/types.ts

@@ -0,0 +1,50 @@
+export interface ProxyRouteCustomHeader {
+  key: string;
+  value: string;
+}
+
+export interface ProxyRouteItem {
+  id: number;
+  domain: string;
+  origin_url: string;
+  enabled: boolean;
+  enable_https: boolean;
+  cert_id: number | null;
+  redirect_http: boolean;
+  custom_headers: string;
+  remark: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ProxyRouteMutationPayload {
+  domain: string;
+  origin_url: string;
+  enabled: boolean;
+  enable_https: boolean;
+  cert_id: number | null;
+  redirect_http: boolean;
+  custom_headers: ProxyRouteCustomHeader[];
+  remark: string;
+}
+
+export interface TlsCertificateItem {
+  id: number;
+  name: string;
+  not_after?: string | null;
+}
+
+export interface ManagedDomainMatchCandidate {
+  managed_domain_id: number;
+  domain: string;
+  match_type: 'exact' | 'wildcard';
+  certificate_id: number;
+  certificate_name: string;
+}
+
+export interface ManagedDomainMatchResult {
+  domain: string;
+  matched: boolean;
+  candidate?: ManagedDomainMatchCandidate;
+  candidates: ManagedDomainMatchCandidate[];
+}

openflare_server/web/features/settings/api/settings.ts

@@ -0,0 +1,67 @@
+import { apiRequest } from '@/lib/api/client';
+
+import type {
+  BootstrapTokenPayload,
+  GeoIPLookupResult,
+  OptionItem,
+  SettingsProfile,
+  UpdateSelfPayload,
+} from '@/features/settings/types';
+
+export function getOptions() {
+  return apiRequest<OptionItem[]>('/option/');
+}
+
+export function updateOption(key: string, value: string) {
+  return apiRequest<void>('/option/', {
+    method: 'PUT',
+    body: JSON.stringify({ key, value }),
+  });
+}
+
+export function lookupGeoIP(provider: string, ip: string) {
+  return apiRequest<GeoIPLookupResult>('/option/geoip/lookup', {
+    method: 'POST',
+    body: JSON.stringify({ provider, ip }),
+  });
+}
+
+export function getBootstrapToken() {
+  return apiRequest<BootstrapTokenPayload>('/nodes/bootstrap-token');
+}
+
+export function rotateBootstrapToken() {
+  return apiRequest<BootstrapTokenPayload>('/nodes/bootstrap-token/rotate', {
+    method: 'POST',
+  });
+}
+
+export function getSettingsProfile() {
+  return apiRequest<SettingsProfile>('/user/self');
+}
+
+export function updateSelf(payload: UpdateSelfPayload) {
+  return apiRequest<void>('/user/self', {
+    method: 'PUT',
+    body: JSON.stringify(payload),
+  });
+}
+
+export function generateAccessToken() {
+  return apiRequest<string>('/user/token');
+}
+
+export function bindWeChat(code: string) {
+  return apiRequest<void>(
+    `/oauth/wechat/bind?code=${encodeURIComponent(code)}`,
+  );
+}
+
+export function bindEmail(email: string, code: string) {
+  const searchParams = new URLSearchParams({ email, code });
+  return apiRequest<void>(`/oauth/email/bind?${searchParams.toString()}`);
+}
+
+export function getAboutContent() {
+  return apiRequest<string>('/about');
+}

openflare_server/web/features/settings/types.ts

@@ -0,0 +1,27 @@
+import type { AuthUser } from '@/types/auth';
+
+export interface OptionItem {
+  key: string;
+  value: string;
+}
+
+export interface BootstrapTokenPayload {
+  discovery_token: string;
+}
+
+export interface GeoIPLookupResult {
+  provider: string;
+  ip: string;
+  iso_code: string;
+  name: string;
+  latitude?: number | null;
+  longitude?: number | null;
+}
+
+export interface UpdateSelfPayload {
+  username: string;
+  display_name: string;
+  password: string;
+}
+
+export type SettingsProfile = AuthUser;

openflare_server/web/features/shared/components/module-page-skeleton.tsx

@@ -0,0 +1,37 @@
+import { EmptyState } from '@/components/feedback/empty-state';
+import { ErrorState } from '@/components/feedback/error-state';
+import { FeaturePlaceholder } from '@/components/feedback/feature-placeholder';
+import { LoadingState } from '@/components/feedback/loading-state';
+import { PageHeader } from '@/components/layout/page-header';
+
+interface ModulePageSkeletonProps {
+  title: string;
+  description: string;
+}
+
+export function ModulePageSkeleton({
+  title,
+  description,
+}: ModulePageSkeletonProps) {
+  return (
+    <div className='space-y-6'>
+      <PageHeader title={title} description={description} />
+
+      <FeaturePlaceholder
+        title={`${title} 页面骨架`}
+        description='当前阶段先完成页面入口、统一头部和反馈组件接线，真实列表、表单与联动能力将在后续业务迁移阶段接入。'
+        milestones={[
+          '路由入口已创建，可纳入统一导航。',
+          '页面标题区、说明区与内容容器已统一。',
+          '加载态、空态、错误态组件已建立，可在真实查询接入后直接复用。',
+        ]}
+      />
+
+      <div className='grid gap-4 xl:grid-cols-3'>
+        <LoadingState />
+        <EmptyState title='空态骨架' description='后续接入查询后，可将资源为空时的提示统一沉淀为此组件。' />
+        <ErrorState title='错误态骨架' description='后续请求失败、鉴权失效与重试提示可在此基础上扩展。' />
+      </div>
+    </div>
+  );
+}

openflare_server/web/features/shared/components/resource-primitives.tsx

@@ -0,0 +1,215 @@
+import type {
+  ButtonHTMLAttributes,
+  InputHTMLAttributes,
+  ReactNode,
+  SelectHTMLAttributes,
+  TextareaHTMLAttributes,
+} from 'react';
+
+import { cn } from '@/lib/utils/cn';
+
+interface ResourceFieldProps {
+  label: string;
+  hint?: string;
+  error?: string;
+  className?: string;
+  tooltip?: string;
+  children: ReactNode;
+}
+
+function FieldTooltip({ content }: { content: string }) {
+  return (
+    <span className="group/tooltip relative inline-flex">
+      <span className="inline-flex h-5 w-5 items-center justify-center rounded-full border border-[var(--border-default)] bg-[var(--surface-elevated)] text-[11px] font-semibold text-[var(--foreground-secondary)] transition group-hover/tooltip:border-[var(--border-strong)] group-hover/tooltip:text-[var(--foreground-primary)]">
+        ?
+      </span>
+      <span className="pointer-events-none absolute top-full left-1/2 z-20 mt-2 w-64 -translate-x-1/2 rounded-2xl border border-[var(--border-default)] bg-[var(--surface-panel)] px-3 py-2 text-xs leading-5 text-[var(--foreground-secondary)] opacity-0 shadow-[var(--shadow-soft)] transition-opacity delay-700 duration-200 group-hover/tooltip:opacity-100">
+        {content}
+      </span>
+    </span>
+  );
+}
+
+export function ResourceField({
+  label,
+  hint,
+  error,
+  className,
+  tooltip,
+  children,
+}: ResourceFieldProps) {
+  return (
+    <label className={cn('block space-y-2', className)}>
+      <span className="flex items-center gap-2 text-sm font-medium text-[var(--foreground-primary)]">
+        <span>{label}</span>
+        {tooltip ? <FieldTooltip content={tooltip} /> : null}
+      </span>
+      {children}
+      {error ? (
+        <span className="block text-xs text-[var(--status-danger-foreground)]">
+          {error}
+        </span>
+      ) : hint ? (
+        <span className="block text-xs text-[var(--foreground-secondary)]">
+          {hint}
+        </span>
+      ) : null}
+    </label>
+  );
+}
+
+export function ResourceInput(props: InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <input
+      {...props}
+      className={cn(
+        'w-full rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-3 text-sm text-[var(--foreground-primary)] transition outline-none placeholder:text-[var(--foreground-muted)] focus:border-[var(--border-strong)] focus:ring-2 focus:ring-[var(--accent-soft)] disabled:cursor-not-allowed disabled:opacity-60',
+        props.className,
+      )}
+    />
+  );
+}
+
+export function ResourceTextarea(
+  props: TextareaHTMLAttributes<HTMLTextAreaElement>,
+) {
+  return (
+    <textarea
+      {...props}
+      className={cn(
+        'min-h-28 w-full rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-3 text-sm text-[var(--foreground-primary)] transition outline-none placeholder:text-[var(--foreground-muted)] focus:border-[var(--border-strong)] focus:ring-2 focus:ring-[var(--accent-soft)] disabled:cursor-not-allowed disabled:opacity-60',
+        props.className,
+      )}
+    />
+  );
+}
+
+export function ResourceSelect(props: SelectHTMLAttributes<HTMLSelectElement>) {
+  return (
+    <select
+      {...props}
+      className={cn(
+        'w-full rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-3 text-sm text-[var(--foreground-primary)] transition outline-none focus:border-[var(--border-strong)] focus:ring-2 focus:ring-[var(--accent-soft)] disabled:cursor-not-allowed disabled:opacity-60',
+        props.className,
+      )}
+    />
+  );
+}
+
+function baseButtonClassName(className?: string) {
+  return cn(
+    'inline-flex items-center justify-center rounded-2xl px-4 py-3 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-60',
+    className,
+  );
+}
+
+export function PrimaryButton({
+  className,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      {...props}
+      className={baseButtonClassName(
+        cn(
+          'bg-[var(--brand-primary)] text-[var(--foreground-inverse)] hover:opacity-90',
+          className,
+        ),
+      )}
+    />
+  );
+}
+
+export function SecondaryButton({
+  className,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      {...props}
+      className={baseButtonClassName(
+        cn(
+          'border border-[var(--border-default)] bg-[var(--control-background)] text-[var(--foreground-primary)] hover:bg-[var(--control-background-hover)]',
+          className,
+        ),
+      )}
+    />
+  );
+}
+
+export function DangerButton({
+  className,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      {...props}
+      className={baseButtonClassName(
+        cn(
+          'border border-[var(--status-danger-border)] bg-[var(--status-danger-soft)] text-[var(--status-danger-foreground)] hover:opacity-90',
+          className,
+        ),
+      )}
+    />
+  );
+}
+
+interface ToggleFieldProps {
+  label: string;
+  description?: string;
+  checked: boolean;
+  disabled?: boolean;
+  tooltip?: string;
+  onChange: (checked: boolean) => void;
+}
+
+export function ToggleField({
+  label,
+  description,
+  checked,
+  disabled,
+  tooltip,
+  onChange,
+}: ToggleFieldProps) {
+  return (
+    <label className="flex self-start cursor-pointer items-start gap-3 rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-3">
+      <input
+        type="checkbox"
+        checked={checked}
+        disabled={disabled}
+        onChange={(event) => onChange(event.target.checked)}
+        className="mt-1 h-4 w-4 rounded border-[var(--border-default)] accent-[var(--brand-primary)]"
+      />
+      <span className="flex flex-col">
+        <span className="flex items-center gap-2 text-sm font-medium text-[var(--foreground-primary)]">
+          <span>{label}</span>
+          {tooltip ? <FieldTooltip content={tooltip} /> : null}
+        </span>
+        {description ? (
+          <span className="mt-1 block text-xs leading-5 text-[var(--foreground-secondary)]">
+            {description}
+          </span>
+        ) : null}
+      </span>
+    </label>
+  );
+}
+
+export function CodeBlock({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <pre
+      className={cn(
+        'overflow-x-auto rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4 text-xs leading-6 text-[var(--foreground-primary)]',
+        className,
+      )}
+    >
+      {children}
+    </pre>
+  );
+}

openflare_server/web/features/tls-certificates/api/tls-certificates.ts

@@ -0,0 +1,57 @@
+import { apiRequest } from '@/lib/api/client';
+
+import type {
+  TlsCertificateContentItem,
+  TlsCertificateDetailItem,
+  TlsCertificateFileImportPayload,
+  TlsCertificateItem,
+  TlsCertificateMutationPayload,
+} from '@/features/tls-certificates/types';
+
+export function getTlsCertificates() {
+  return apiRequest<TlsCertificateItem[]>('/tls-certificates/');
+}
+
+export function createTlsCertificate(payload: TlsCertificateMutationPayload) {
+  return apiRequest<TlsCertificateItem>('/tls-certificates/', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+}
+
+export function getTlsCertificate(id: number) {
+  return apiRequest<TlsCertificateDetailItem>(`/tls-certificates/${id}`);
+}
+
+export function getTlsCertificateContent(id: number) {
+  return apiRequest<TlsCertificateContentItem>(`/tls-certificates/${id}/content`);
+}
+
+export function updateTlsCertificate(
+  id: number,
+  payload: TlsCertificateMutationPayload,
+) {
+  return apiRequest<TlsCertificateItem>(`/tls-certificates/${id}`, {
+    method: 'PUT',
+    body: JSON.stringify(payload),
+  });
+}
+
+export function importTlsCertificateFiles(payload: TlsCertificateFileImportPayload) {
+  const formData = new FormData();
+  formData.append('name', payload.name);
+  formData.append('remark', payload.remark);
+  formData.append('cert_file', payload.certFile);
+  formData.append('key_file', payload.keyFile);
+
+  return apiRequest<TlsCertificateItem>('/tls-certificates/import-file', {
+    method: 'POST',
+    body: formData,
+  });
+}
+
+export function deleteTlsCertificate(id: number) {
+  return apiRequest<void>(`/tls-certificates/${id}`, {
+    method: 'DELETE',
+  });
+}

openflare_server/web/features/tls-certificates/components/tls-certificates-page.tsx

@@ -0,0 +1,249 @@
+'use client';
+
+import Link from 'next/link';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+
+import { EmptyState } from '@/components/feedback/empty-state';
+import { ErrorState } from '@/components/feedback/error-state';
+import { InlineMessage } from '@/components/feedback/inline-message';
+import { LoadingState } from '@/components/feedback/loading-state';
+import { PageHeader } from '@/components/layout/page-header';
+import { AppCard } from '@/components/ui/app-card';
+import { StatusBadge } from '@/components/ui/status-badge';
+import {
+  deleteTlsCertificate,
+  getTlsCertificates,
+} from '@/features/tls-certificates/api/tls-certificates';
+import type { TlsCertificateItem } from '@/features/tls-certificates/types';
+import { CertificateDetailModal } from '@/features/websites/components/certificate-detail-modal';
+import { CertificateEditorModal } from '@/features/websites/components/certificate-editor-modal';
+import { CertificateImportModal } from '@/features/websites/components/certificate-import-modal';
+import { getCertificateStatus, getErrorMessage } from '@/features/websites/utils';
+import {
+  DangerButton,
+  PrimaryButton,
+  SecondaryButton,
+} from '@/features/shared/components/resource-primitives';
+import { formatDateTime } from '@/lib/utils/date';
+
+type FeedbackState = {
+  tone: 'info' | 'success' | 'danger';
+  message: string;
+};
+
+const certificatesQueryKey = ['tls-certificates', 'list'] as const;
+
+export function TlsCertificatesPage() {
+  const queryClient = useQueryClient();
+  const [feedback, setFeedback] = useState<FeedbackState | null>(null);
+  const [isImportOpen, setIsImportOpen] = useState(false);
+  const [selectedCertificateId, setSelectedCertificateId] = useState<
+    number | null
+  >(null);
+  const [isDetailOpen, setIsDetailOpen] = useState(false);
+  const [isEditorOpen, setIsEditorOpen] = useState(false);
+
+  const certificatesQuery = useQuery({
+    queryKey: certificatesQueryKey,
+    queryFn: getTlsCertificates,
+  });
+
+  const deleteCertificateMutation = useMutation({
+    mutationFn: deleteTlsCertificate,
+    onSuccess: async () => {
+      setFeedback({ tone: 'success', message: '证书已删除。' });
+      await queryClient.invalidateQueries({ queryKey: ['tls-certificates'] });
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const certificates = useMemo(
+    () => certificatesQuery.data ?? [],
+    [certificatesQuery.data],
+  );
+
+  const handleDeleteCertificate = (certificate: TlsCertificateItem) => {
+    if (!window.confirm(`确认删除证书 ${certificate.name} 吗？`)) {
+      return;
+    }
+
+    setFeedback(null);
+    deleteCertificateMutation.mutate(certificate.id);
+  };
+
+  const handleOpenCertificateDetail = (certificate: TlsCertificateItem) => {
+    setSelectedCertificateId(certificate.id);
+    setIsDetailOpen(true);
+  };
+
+  const handleOpenCertificateEditor = (certificate: TlsCertificateItem) => {
+    setSelectedCertificateId(certificate.id);
+    setIsEditorOpen(true);
+  };
+
+  return (
+    <>
+      <div className="space-y-6">
+        <PageHeader
+          title="证书"
+          description="统一查看、导入、编辑和删除已添加的 TLS 证书。"
+          action={
+            <div className="flex flex-wrap gap-3">
+              <Link
+                href="/website"
+                className="inline-flex min-h-[46px] items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-3 text-sm font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
+              >
+                返回网站
+              </Link>
+              <SecondaryButton
+                type="button"
+                onClick={() =>
+                  void queryClient.invalidateQueries({
+                    queryKey: ['tls-certificates'],
+                  })
+                }
+              >
+                刷新证书
+              </SecondaryButton>
+              <PrimaryButton type="button" onClick={() => setIsImportOpen(true)}>
+                添加证书
+              </PrimaryButton>
+            </div>
+          }
+        />
+
+        {feedback ? (
+          <InlineMessage tone={feedback.tone} message={feedback.message} />
+        ) : null}
+
+        <AppCard
+          title="证书列表"
+          description="展示证书有效期、备注和状态，支持直接查看详情、编辑内容或删除证书。"
+        >
+          {certificatesQuery.isLoading ? (
+            <LoadingState />
+          ) : certificatesQuery.isError ? (
+            <ErrorState
+              title="证书列表加载失败"
+              description={getErrorMessage(certificatesQuery.error)}
+            />
+          ) : certificates.length === 0 ? (
+            <EmptyState
+              title="暂无证书"
+              description="点击右上角“添加证书”开始录入。"
+            />
+          ) : (
+            <div className="space-y-3">
+              {certificates.map((certificate) => {
+                const status = getCertificateStatus(certificate);
+
+                return (
+                  <div
+                    key={certificate.id}
+                    className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4"
+                  >
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="space-y-2">
+                        <div className="flex flex-wrap items-center gap-2">
+                          <p className="text-sm font-semibold text-[var(--foreground-primary)]">
+                            {certificate.name}
+                          </p>
+                          <StatusBadge
+                            label={status.label}
+                            variant={status.variant}
+                          />
+                        </div>
+                        <div className="text-xs leading-5 text-[var(--foreground-secondary)]">
+                          <p>生效：{formatDateTime(certificate.not_before)}</p>
+                          <p>到期：{formatDateTime(certificate.not_after)}</p>
+                          <p>备注：{certificate.remark || '暂无备注'}</p>
+                        </div>
+                      </div>
+
+                      <div className="flex flex-wrap gap-2">
+                        <SecondaryButton
+                          type="button"
+                          onClick={() => handleOpenCertificateDetail(certificate)}
+                          className="px-3 py-2 text-xs"
+                        >
+                          查看
+                        </SecondaryButton>
+                        <SecondaryButton
+                          type="button"
+                          onClick={() => handleOpenCertificateEditor(certificate)}
+                          className="px-3 py-2 text-xs"
+                        >
+                          编辑
+                        </SecondaryButton>
+                        <DangerButton
+                          type="button"
+                          onClick={() => handleDeleteCertificate(certificate)}
+                          disabled={deleteCertificateMutation.isPending}
+                          className="px-3 py-2 text-xs"
+                        >
+                          删除
+                        </DangerButton>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </AppCard>
+      </div>
+
+      {isImportOpen ? (
+        <CertificateImportModal
+          isOpen={isImportOpen}
+          onClose={() => setIsImportOpen(false)}
+          onImported={(certificate) => {
+            setFeedback({
+              tone: 'success',
+              message: `证书 ${certificate.name} 已导入。`,
+            });
+          }}
+        />
+      ) : null}
+
+      {isDetailOpen ? (
+        <CertificateDetailModal
+          certificateId={selectedCertificateId}
+          isOpen={isDetailOpen}
+          onClose={() => setIsDetailOpen(false)}
+          onEdit={() => {
+            setIsDetailOpen(false);
+            setIsEditorOpen(true);
+          }}
+          onDelete={() => {
+            const certificate = certificates.find(
+              (item) => item.id === selectedCertificateId,
+            );
+            if (certificate) {
+              setIsDetailOpen(false);
+              handleDeleteCertificate(certificate);
+            }
+          }}
+          deleting={deleteCertificateMutation.isPending}
+        />
+      ) : null}
+
+      {isEditorOpen ? (
+        <CertificateEditorModal
+          certificateId={selectedCertificateId}
+          isOpen={isEditorOpen}
+          onClose={() => setIsEditorOpen(false)}
+          onSaved={(certificate) => {
+            setFeedback({
+              tone: 'success',
+              message: `证书 ${certificate.name} 已更新。`,
+            });
+          }}
+        />
+      ) : null}
+    </>
+  );
+}

openflare_server/web/features/tls-certificates/types.ts

@@ -0,0 +1,35 @@
+export interface TlsCertificateItem {
+  id: number;
+  name: string;
+  cert_pem?: string;
+  key_pem?: string;
+  not_before: string;
+  not_after: string;
+  remark: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface TlsCertificateDetailItem extends TlsCertificateItem {
+  cert_pem?: never;
+  key_pem?: never;
+}
+
+export interface TlsCertificateContentItem extends TlsCertificateItem {
+  cert_pem: string;
+  key_pem: string;
+}
+
+export interface TlsCertificateMutationPayload {
+  name: string;
+  cert_pem: string;
+  key_pem: string;
+  remark: string;
+}
+
+export interface TlsCertificateFileImportPayload {
+  name: string;
+  remark: string;
+  certFile: File;
+  keyFile: File;
+}

openflare_server/web/features/update/api/update.ts

@@ -0,0 +1,128 @@
+import { ApiError, apiRequest, getApiUrl } from '@/lib/api/client';
+import type { ApiEnvelope } from '@/types/api';
+
+import type {
+  LatestReleaseInfo,
+  ReleaseChannel,
+  UpgradeStreamSnapshot,
+  UploadedServerBinaryInfo,
+} from '@/features/update/types';
+
+export function getLatestRelease(channel: ReleaseChannel = 'stable') {
+  return apiRequest<LatestReleaseInfo>(
+    `/update/latest-release?channel=${channel}`,
+  );
+}
+
+export function upgradeServer(channel: ReleaseChannel = 'stable') {
+  return apiRequest<LatestReleaseInfo>('/update/upgrade', {
+    method: 'POST',
+    body: JSON.stringify({ channel }),
+  });
+}
+
+export function uploadServerBinary(
+  binary: File,
+  onProgress?: (progress: number) => void,
+): Promise<UploadedServerBinaryInfo> {
+  const formData = new FormData();
+  formData.append('binary', binary);
+
+  if (!onProgress) {
+    return apiRequest<UploadedServerBinaryInfo>('/update/manual-upload', {
+      method: 'POST',
+      body: formData,
+    });
+  }
+
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open('POST', getApiUrl('/update/manual-upload'));
+    xhr.withCredentials = true;
+
+    xhr.upload.addEventListener('progress', (event) => {
+      if (event.lengthComputable) {
+        onProgress(Math.round((event.loaded / event.total) * 100));
+      }
+    });
+
+    xhr.addEventListener('load', () => {
+      let payload: ApiEnvelope<UploadedServerBinaryInfo> | null = null;
+      try {
+        payload = JSON.parse(
+          xhr.responseText,
+        ) as ApiEnvelope<UploadedServerBinaryInfo>;
+      } catch {
+        payload = null;
+      }
+      if (xhr.status < 200 || xhr.status >= 300) {
+        reject(
+          new ApiError(
+            payload?.message || `请求失败（${xhr.status}）`,
+            xhr.status,
+          ),
+        );
+        return;
+      }
+      if (!payload) {
+        reject(new ApiError('响应格式无效', xhr.status));
+        return;
+      }
+      if (!payload.success) {
+        reject(new ApiError(payload.message || '请求失败', xhr.status));
+        return;
+      }
+      resolve(payload.data);
+    });
+
+    xhr.addEventListener('error', () => {
+      reject(new ApiError('上传过程中网络连接中断，请检查网络后重试', 0));
+    });
+
+    xhr.send(formData);
+  });
+}
+
+export function confirmManualServerUpgrade(uploadToken: string) {
+  return apiRequest<UploadedServerBinaryInfo>('/update/manual-upgrade', {
+    method: 'POST',
+    body: JSON.stringify({ upload_token: uploadToken }),
+  });
+}
+
+export function createUpgradeLogsWebSocket() {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  const apiUrl = getApiUrl('/update/logs/ws');
+  const resolvedUrl = apiUrl.startsWith('http://')
+    ? `ws://${apiUrl.slice('http://'.length)}`
+    : apiUrl.startsWith('https://')
+      ? `wss://${apiUrl.slice('https://'.length)}`
+      : `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}${apiUrl}`;
+
+  return new WebSocket(resolvedUrl);
+}
+
+export function parseUpgradeStreamSnapshot(
+  rawMessage: string,
+): UpgradeStreamSnapshot | null {
+  try {
+    const parsed = JSON.parse(rawMessage) as Partial<UpgradeStreamSnapshot>;
+    if (
+      typeof parsed.in_progress !== 'boolean' ||
+      typeof parsed.upgrade_status !== 'string' ||
+      !Array.isArray(parsed.upgrade_logs)
+    ) {
+      return null;
+    }
+    return {
+      in_progress: parsed.in_progress,
+      upgrade_status: parsed.upgrade_status,
+      upgrade_logs: parsed.upgrade_logs,
+    };
+  } catch {
+    return null;
+  }
+}

openflare_server/web/features/update/components/version-upgrade-modal.tsx

@@ -0,0 +1,493 @@
+'use client';
+
+import {marked} from 'marked';
+import {useEffect, useState} from 'react';
+
+import {EmptyState} from '@/components/feedback/empty-state';
+import {ErrorState} from '@/components/feedback/error-state';
+import {LoadingState} from '@/components/feedback/loading-state';
+import {AppCard} from '@/components/ui/app-card';
+import {AppModal} from '@/components/ui/app-modal';
+import {StatusBadge} from '@/components/ui/status-badge';
+import type {
+    LatestReleaseInfo,
+    ReleaseChannel,
+    UploadedServerBinaryInfo,
+} from '@/features/update/types';
+import {
+    PrimaryButton,
+    ResourceField,
+    ResourceInput,
+    SecondaryButton,
+} from '@/features/shared/components/resource-primitives';
+import {formatDateTime, formatRelativeTime} from '@/lib/utils/date';
+
+interface VersionUpgradeModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    currentVersion: string;
+    release: LatestReleaseInfo | null | undefined;
+    selectedChannel: ReleaseChannel;
+    uploadedBinary: UploadedServerBinaryInfo | null;
+    isLoading: boolean;
+    releaseErrorMessage?: string;
+    manualStatusMessage?: string;
+    manualErrorMessage?: string;
+    canUpgrade: boolean;
+    isChecking: boolean;
+    isUpgrading: boolean;
+    isUploadingBinary: boolean;
+    uploadProgress: number;
+    isConfirmingManualUpgrade: boolean;
+    onChannelChange: (channel: ReleaseChannel) => void;
+    onCheck: () => void;
+    onUpgrade: () => void;
+    onUploadBinary: (file: File) => void;
+    onConfirmManualUpgrade: () => void;
+}
+
+function getUpgradeBadge(release: LatestReleaseInfo | null | undefined) {
+    if (!release) {
+        return {label: '未检查', variant: 'info' as const};
+    }
+    if (release.in_progress) {
+        return {label: '升级中', variant: 'warning' as const};
+    }
+    if (release.has_update) {
+        return {label: '可升级', variant: 'warning' as const};
+    }
+    return {label: '最新', variant: 'success' as const};
+}
+
+function formatLogTimestamp(value: string) {
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) {
+        return '0000-00-00 00:00:00.000';
+    }
+
+    const year = date.getFullYear();
+    const month = `${date.getMonth() + 1}`.padStart(2, '0');
+    const day = `${date.getDate()}`.padStart(2, '0');
+    const hour = `${date.getHours()}`.padStart(2, '0');
+    const minute = `${date.getMinutes()}`.padStart(2, '0');
+    const second = `${date.getSeconds()}`.padStart(2, '0');
+    const millisecond = `${date.getMilliseconds()}`.padStart(3, '0');
+
+    return `${year}-${month}-${day} ${hour}:${minute}:${second}.${millisecond}`;
+}
+
+function formatLogLevel(level: string) {
+    const normalized = (level || 'info').toUpperCase();
+    return normalized.padEnd(8, ' ');
+}
+
+export function VersionUpgradeModal({
+                                        isOpen,
+                                        onClose,
+                                        currentVersion,
+                                        release,
+                                        selectedChannel,
+                                        uploadedBinary,
+                                        isLoading,
+                                        releaseErrorMessage,
+                                        manualStatusMessage,
+                                        manualErrorMessage,
+                                        canUpgrade,
+                                        isChecking,
+                                        isUpgrading,
+                                        isUploadingBinary,
+                                        uploadProgress,
+                                        isConfirmingManualUpgrade,
+                                        onChannelChange,
+                                        onCheck,
+                                        onUpgrade,
+                                        onUploadBinary,
+                                        onConfirmManualUpgrade,
+                                    }: VersionUpgradeModalProps) {
+    const upgradeBadge = getUpgradeBadge(release);
+    const [selectedBinary, setSelectedBinary] = useState<File | null>(null);
+    const uploadPhaseLabel =
+        uploadProgress >= 100
+            ? '已上传，正在服务端校验版本...'
+            : '上传中...';
+    const selectedChannelLabel =
+        selectedChannel === 'preview' ? '预览版' : '正式版';
+    const toggleChannel = () => {
+        onChannelChange(selectedChannel === 'preview' ? 'stable' : 'preview');
+    };
+    const canConfirmManualUpgrade = Boolean(
+        uploadedBinary?.ready_to_upgrade && uploadedBinary.upload_token,
+    );
+    const showConfirmManualUpgradeAction = canConfirmManualUpgrade;
+    const upgradeLogs = release?.upgrade_logs ?? [];
+
+    useEffect(() => {
+        if (!isOpen) {
+            setSelectedBinary(null);
+        }
+    }, [isOpen]);
+
+    return (
+        <AppModal
+            isOpen={isOpen}
+            onClose={onClose}
+            title="版本"
+            description="默认检查正式版更新；你也可以手动检查 preview 发布并选择升级，或上传 Server 二进制确认升级。升级开始后服务会短暂重启。"
+            size="lg"
+        >
+            <div className="space-y-6">
+                <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-2">
+
+                    <AppCard title="服务端版本">
+                        <div className="flex flex-wrap items-center gap-3">
+                            <p className="text-sm font-medium text-[var(--foreground-primary)]">
+                                {currentVersion || 'unknown'}
+                            </p>
+                            <StatusBadge
+                                label={upgradeBadge.label}
+                                variant={upgradeBadge.variant}
+                            />
+                        </div>
+                    </AppCard>
+
+                    <AppCard title="最新版本">
+                        <div className="space-y-4">
+                            <div className="flex flex-wrap items-center gap-3">
+                                <p className="text-sm font-medium text-[var(--foreground-primary)]">
+                                    {release?.tag_name || '未检查'}
+                                </p>
+                            {canUpgrade ? (
+                                <div className="flex flex-wrap items-center justify-between gap-3">
+                                    <div className="flex flex-wrap items-center gap-2">
+                                        <StatusBadge
+                                            label={selectedChannelLabel}
+                                            variant={
+                                                selectedChannel === 'preview' ? 'warning' : 'info'
+                                            }
+                                            onClick={toggleChannel}
+                                            disabled={isChecking || isUpgrading || isUploadingBinary}
+                                        />
+                                    </div>
+                                </div>
+                            ) : null}
+                            </div>
+                            <SecondaryButton
+                                type="button"
+                                onClick={onCheck}
+                                disabled={isChecking || isUpgrading || isUploadingBinary}
+                                className="w-full md:w-auto"
+                            >
+                                {isChecking ? '检查中...' : '检查'}
+                            </SecondaryButton>
+                        </div>
+                    </AppCard>
+                </div>
+
+                {isLoading ? <LoadingState/> : null}
+                {!isLoading && releaseErrorMessage ? (
+                    <ErrorState title="版本检查失败" description={releaseErrorMessage}/>
+                ) : null}
+                {!isLoading && !releaseErrorMessage && !release ? (
+                    <EmptyState
+                        title={`尚未检查${selectedChannelLabel}`}
+                        description={`点击“检查${selectedChannelLabel}”后会在这里展示对应 GitHub Release 信息。`}
+                    />
+                ) : null}
+                {!isLoading && !releaseErrorMessage && release ? (
+                    <AppCard
+                        title={`GitHub ${selectedChannelLabel} · ${release.tag_name}`}
+                        description={
+                            release.published_at
+                                ? `发布时间：${formatRelativeTime(release.published_at)} · ${formatDateTime(release.published_at)}`
+                                : '未提供发布时间'
+                        }
+                    >
+                        <div className="space-y-4">
+                            <div className="flex flex-wrap items-center gap-3">
+                                <StatusBadge
+                                    label={release.has_update ? '发现新版本' : '已经是最新版本'}
+                                    variant={release.has_update ? 'warning' : 'success'}
+                                />
+                                {release.prerelease ? (
+                                    <StatusBadge label="Preview 发布" variant="warning"/>
+                                ) : (
+                                    <StatusBadge label="正式发布" variant="info"/>
+                                )}
+                                {!release.upgrade_supported ? (
+                                    <StatusBadge
+                                        label="当前平台不支持自动升级"
+                                        variant="danger"
+                                    />
+                                ) : null}
+                                {release.in_progress ? (
+                                    <StatusBadge label="升级任务执行中" variant="warning"/>
+                                ) : null}
+                            </div>
+                            <div
+                                className="prose prose-sm max-w-none text-[var(--foreground-primary)] [&_a]:text-[var(--brand-primary)]"
+                                dangerouslySetInnerHTML={{
+                                    __html: marked.parse(
+                                        release.body || '暂无更新说明',
+                                    ) as string,
+                                }}
+                            />
+                            <a
+                                href={release.html_url}
+                                target="_blank"
+                                rel="noreferrer"
+                                className="text-sm font-medium text-[var(--brand-primary)] transition hover:opacity-80"
+                            >
+                                查看发布详情
+                            </a>
+                            {canUpgrade ? (
+                                <div className="flex justify-end">
+
+                                    <PrimaryButton
+                                        type="button"
+                                        onClick={onUpgrade}
+                                        disabled={
+                                            !release.has_update ||
+                                            release.in_progress ||
+                                            isUpgrading ||
+                                            !release.upgrade_supported ||
+                                            isUploadingBinary ||
+                                            isConfirmingManualUpgrade
+                                        }
+                                    >
+                                        {isUpgrading
+                                            ? '升级中...'
+                                            : release.in_progress
+                                                ? '升级中...'
+                                                : selectedChannel === 'preview'
+                                                    ? '升级到预览版'
+                                                    : '升级到正式版'}
+                                    </PrimaryButton>
+                                </div>
+                            ) : null}
+                        </div>
+                    </AppCard>
+                ) : null}
+
+                {release ? (
+                    <AppCard
+                        title="升级日志"
+                        description="展示当前自动升级任务的下载、校验与替换进度。"
+                    >
+                        {upgradeLogs.length > 0 ? (
+                            <div className="space-y-3">
+                                <div className="flex flex-wrap items-center gap-3">
+                                    <StatusBadge
+                                        label={
+                                            release.upgrade_status === 'failed'
+                                                ? '升级失败'
+                                                : release.upgrade_status === 'succeeded'
+                                                    ? '准备重启'
+                                                    : release.in_progress
+                                                        ? '升级中'
+                                                        : '空闲'
+                                        }
+                                        variant={
+                                            release.upgrade_status === 'failed'
+                                                ? 'danger'
+                                                : release.in_progress
+                                                    ? 'warning'
+                                                    : release.upgrade_status === 'succeeded'
+                                                        ? 'success'
+                                                        : 'info'
+                                        }
+                                    />
+                                </div>
+                                <div className="max-h-72 overflow-y-auto rounded-2xl border border-[var(--border-default)] bg-[#0f172a] px-4 py-3">
+                                    {upgradeLogs.map((log, index) => (
+                                        <pre
+                                            key={`${log.created_at}-${index}`}
+                                            className="overflow-x-auto border-b border-white/8 py-2 font-mono text-[12px] leading-6 text-slate-200 last:border-b-0"
+                                        >
+                                            <span className="text-slate-400">
+                                                {formatLogTimestamp(log.created_at)}
+                                            </span>
+                                            <span className="text-slate-500"> | </span>
+                                            <span className="text-cyan-300">
+                                                {formatLogLevel(log.level)}
+                                            </span>
+                                            <span className="text-slate-500"> | </span>
+                                            <span className="whitespace-pre-wrap break-all text-slate-100">
+                                                {log.message}
+                                            </span>
+                                        </pre>
+                                    ))}
+                                </div>
+                            </div>
+                        ) : (
+                            <EmptyState
+                                title="暂无升级日志"
+                                description="开始自动升级后，这里会滚动展示后端返回的执行日志。"
+                            />
+                        )}
+                    </AppCard>
+                ) : null}
+
+                {canUpgrade ? (
+                    <AppCard
+                        title="手动升级"
+                        description="上传服务端二进制后，服务端会先检查版本，再由你确认是否执行升级。"
+                    >
+                        <div className="space-y-4">
+                            <ResourceField
+                                label="服务端二进制"
+                                hint="支持上传已编译好的当前平台 Server 可执行文件。"
+                            >
+                                <ResourceInput
+                                    type="file"
+                                    onChange={(event) => {
+                                        const file = event.target.files?.[0] ?? null;
+                                        setSelectedBinary(file);
+                                    }}
+                                    disabled={isUploadingBinary || isConfirmingManualUpgrade}
+                                />
+                            </ResourceField>
+
+                            <div className="flex justify-end">
+                                {showConfirmManualUpgradeAction ? (
+                                    <PrimaryButton
+                                        type="button"
+                                        onClick={onConfirmManualUpgrade}
+                                        disabled={
+                                            !canConfirmManualUpgrade ||
+                                            isConfirmingManualUpgrade ||
+                                            isUploadingBinary ||
+                                            isUpgrading
+                                        }
+                                    >
+                                        {isConfirmingManualUpgrade ? '升级中...' : '升级'}
+                                    </PrimaryButton>
+                                ) : (
+                                    <PrimaryButton
+                                        type="button"
+                                        onClick={() => {
+                                            if (selectedBinary) {
+                                                onUploadBinary(selectedBinary);
+                                            }
+                                        }}
+                                        disabled={
+                                            !selectedBinary ||
+                                            isUploadingBinary ||
+                                            isConfirmingManualUpgrade
+                                        }
+                                    >
+                                        {isUploadingBinary
+                                            ? uploadProgress >= 100
+                                                ? '服务端校验中...'
+                                                : '上传中...'
+                                            : '上传并检查'}
+                                    </PrimaryButton>
+                                )}
+                            </div>
+
+                            {isUploadingBinary ? (
+                                <div className="space-y-1">
+                                    <div className="flex items-center justify-between text-xs text-[var(--foreground-secondary)]">
+                                        <span>{uploadPhaseLabel}</span>
+                                        <span>{uploadProgress}%</span>
+                                    </div>
+                                    <div className="h-2 w-full overflow-hidden rounded-full bg-[var(--border-default)]">
+                                        <div
+                                            className="h-full rounded-full bg-[var(--brand-primary)] transition-all duration-200"
+                                            style={{width: `${uploadProgress}%`}}
+                                        />
+                                    </div>
+                                </div>
+                            ) : null}
+
+                            {manualErrorMessage ? (
+                                <ErrorState
+                                    title="手动升级检查失败"
+                                    description={manualErrorMessage}
+                                />
+                            ) : null}
+
+                            {!manualErrorMessage && manualStatusMessage ? (
+                                <div
+                                    className="rounded-2xl border border-[var(--status-warning-border)] bg-[var(--status-warning-soft)] px-4 py-3 text-sm text-[var(--status-warning-foreground)]">
+                                    {manualStatusMessage}
+                                </div>
+                            ) : null}
+
+                            {uploadedBinary ? (
+                                <div
+                                    className="space-y-4 rounded-3xl border border-[var(--border-default)] bg-[var(--surface-elevated)] p-4">
+                                    <div className="flex flex-wrap items-center gap-3">
+                                        <StatusBadge
+                                            label={
+                                                uploadedBinary.ready_to_upgrade
+                                                    ? '可确认升级'
+                                                    : uploadedBinary.has_update
+                                                        ? '待确认'
+                                                        : '不可升级'
+                                            }
+                                            variant={
+                                                uploadedBinary.ready_to_upgrade ? 'warning' : 'info'
+                                            }
+                                        />
+                                        {!uploadedBinary.upgrade_supported ? (
+                                            <StatusBadge
+                                                label="当前版本不支持手动升级"
+                                                variant="danger"
+                                            />
+                                        ) : null}
+                                    </div>
+
+                                    <div className="grid gap-4 md:grid-cols-2">
+                                        <div>
+                                            <p className="text-xs text-[var(--foreground-secondary)]">
+                                                文件名
+                                            </p>
+                                            <p className="mt-1 text-sm font-medium text-[var(--foreground-primary)]">
+                                                {uploadedBinary.file_name}
+                                            </p>
+                                        </div>
+                                        <div>
+                                            <p className="text-xs text-[var(--foreground-secondary)]">
+                                                上传时间
+                                            </p>
+                                            <p className="mt-1 text-sm font-medium text-[var(--foreground-primary)]">
+                                                {uploadedBinary.uploaded_at
+                                                    ? formatDateTime(uploadedBinary.uploaded_at)
+                                                    : '未知'}
+                                            </p>
+                                        </div>
+                                        <div>
+                                            <p className="text-xs text-[var(--foreground-secondary)]">
+                                                当前版本
+                                            </p>
+                                            <p className="mt-1 text-sm font-medium text-[var(--foreground-primary)]">
+                                                {uploadedBinary.current_version}
+                                            </p>
+                                        </div>
+                                        <div>
+                                            <p className="text-xs text-[var(--foreground-secondary)]">
+                                                上传版本
+                                            </p>
+                                            <p className="mt-1 text-sm font-medium text-[var(--foreground-primary)]">
+                                                {uploadedBinary.detected_version}
+                                            </p>
+                                        </div>
+                                    </div>
+
+                                    <p className="text-sm text-[var(--foreground-secondary)]">
+                                        {uploadedBinary.comparison_message}
+                                    </p>
+                                </div>
+                            ) : (
+                                <EmptyState
+                                    title="尚未上传升级包"
+                                    description="上传后会在这里展示识别出的版本信息，并允许你确认升级。"
+                                />
+                            )}
+                        </div>
+                    </AppCard>
+                ) : null}
+            </div>
+        </AppModal>
+    );
+}

openflare_server/web/features/update/types.ts

@@ -0,0 +1,40 @@
+export type ReleaseChannel = 'stable' | 'preview';
+
+export interface UpgradeLogItem {
+  level: string;
+  message: string;
+  created_at: string;
+}
+
+export interface LatestReleaseInfo {
+  tag_name: string;
+  body: string;
+  html_url: string;
+  published_at: string;
+  channel: ReleaseChannel;
+  prerelease: boolean;
+  current_version: string;
+  has_update: boolean;
+  upgrade_supported: boolean;
+  in_progress: boolean;
+  upgrade_status: 'idle' | 'running' | 'succeeded' | 'failed' | string;
+  upgrade_logs: UpgradeLogItem[];
+}
+
+export interface UpgradeStreamSnapshot {
+  in_progress: boolean;
+  upgrade_status: 'idle' | 'running' | 'succeeded' | 'failed' | string;
+  upgrade_logs: UpgradeLogItem[];
+}
+
+export interface UploadedServerBinaryInfo {
+  upload_token: string;
+  file_name: string;
+  detected_version: string;
+  current_version: string;
+  has_update: boolean;
+  upgrade_supported: boolean;
+  ready_to_upgrade: boolean;
+  comparison_message: string;
+  uploaded_at: string;
+}

openflare_server/web/features/users/api/users.ts

@@ -0,0 +1,41 @@
+import { apiRequest } from '@/lib/api/client';
+
+import type {
+  ManageUserAction,
+  ManageUserResult,
+  UserItem,
+  UserMutationPayload,
+} from '@/features/users/types';
+
+export function getUsers(page: number) {
+  return apiRequest<UserItem[]>(`/user/?p=${page}`);
+}
+
+export function searchUsers(keyword: string) {
+  return apiRequest<UserItem[]>(`/user/search?keyword=${encodeURIComponent(keyword)}`);
+}
+
+export function getUser(id: number) {
+  return apiRequest<UserItem>(`/user/${id}`);
+}
+
+export function createUser(payload: UserMutationPayload) {
+  return apiRequest<void>('/user/', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+}
+
+export function updateUser(payload: UserMutationPayload & { id: number }) {
+  return apiRequest<void>('/user/', {
+    method: 'PUT',
+    body: JSON.stringify(payload),
+  });
+}
+
+export function manageUser(username: string, action: ManageUserAction) {
+  return apiRequest<ManageUserResult>('/user/manage', {
+    method: 'POST',
+    body: JSON.stringify({ username, action }),
+  });
+}

openflare_server/web/features/users/components/users-page.tsx

@@ -0,0 +1,485 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { EmptyState } from '@/components/feedback/empty-state';
+import { ErrorState } from '@/components/feedback/error-state';
+import { InlineMessage } from '@/components/feedback/inline-message';
+import { LoadingState } from '@/components/feedback/loading-state';
+import { useAuth } from '@/components/providers/auth-provider';
+import { PageHeader } from '@/components/layout/page-header';
+import { AppModal } from '@/components/ui/app-modal';
+import { AppCard } from '@/components/ui/app-card';
+import { StatusBadge } from '@/components/ui/status-badge';
+import {
+  createUser,
+  getUser,
+  getUsers,
+  manageUser,
+  searchUsers,
+  updateUser,
+} from '@/features/users/api/users';
+import type {
+  ManageUserAction,
+  UserItem,
+  UserMutationPayload,
+} from '@/features/users/types';
+import {
+  DangerButton,
+  PrimaryButton,
+  ResourceField,
+  ResourceInput,
+  SecondaryButton,
+} from '@/features/shared/components/resource-primitives';
+
+const ITEMS_PER_PAGE = 10;
+const usersListQueryKey = ['users', 'list'] as const;
+
+const userSchema = z.object({
+  username: z.string().trim().min(1, '请输入用户名').max(12, '用户名不能超过 12 个字符'),
+  display_name: z.string().trim().max(20, '显示名称不能超过 20 个字符'),
+  password: z
+    .string()
+    .max(20, '密码不能超过 20 个字符')
+    .refine((value) => value.length === 0 || value.length >= 8, '密码至少需要 8 个字符'),
+});
+
+type UserFormValues = z.infer<typeof userSchema>;
+
+type FeedbackState = {
+  tone: 'info' | 'success' | 'danger';
+  message: string;
+};
+
+const defaultValues: UserFormValues = {
+  username: '',
+  display_name: '',
+  password: '',
+};
+
+function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : '请求失败，请稍后重试。';
+}
+
+function getRoleMeta(role: number) {
+  if (role >= 100) {
+    return { label: '超级管理员', variant: 'warning' as const };
+  }
+
+  if (role >= 10) {
+    return { label: '管理员', variant: 'info' as const };
+  }
+
+  return { label: '普通用户', variant: 'success' as const };
+}
+
+function getStatusMeta(status: number) {
+  if (status === 1) {
+    return { label: '已激活', variant: 'success' as const };
+  }
+
+  return { label: '已封禁', variant: 'danger' as const };
+}
+
+function toPayload(values: UserFormValues): UserMutationPayload {
+  return {
+    username: values.username.trim(),
+    display_name: values.display_name.trim(),
+    password: values.password,
+  };
+}
+
+export function UsersPage() {
+  const queryClient = useQueryClient();
+  const { user: currentUser } = useAuth();
+  const [page, setPage] = useState(0);
+  const [searchInput, setSearchInput] = useState('');
+  const [searchKeyword, setSearchKeyword] = useState('');
+  const [editingUserId, setEditingUserId] = useState<number | null>(null);
+  const [isEditorOpen, setIsEditorOpen] = useState(false);
+  const [feedback, setFeedback] = useState<FeedbackState | null>(null);
+
+  const form = useForm<UserFormValues>({
+    resolver: zodResolver(userSchema),
+    defaultValues,
+  });
+
+  const isAdmin = (currentUser?.role ?? 0) >= 10;
+  const isRoot = (currentUser?.role ?? 0) >= 100;
+
+  const usersQuery = useQuery({
+    queryKey: [...usersListQueryKey, page],
+    queryFn: () => getUsers(page),
+    enabled: isAdmin && searchKeyword.length === 0,
+  });
+
+  const searchQuery = useQuery({
+    queryKey: [...usersListQueryKey, 'search', searchKeyword],
+    queryFn: () => searchUsers(searchKeyword),
+    enabled: isAdmin && searchKeyword.length > 0,
+  });
+
+  const editingUserQuery = useQuery({
+    queryKey: ['users', 'detail', editingUserId],
+    queryFn: () => getUser(editingUserId as number),
+    enabled: isAdmin && editingUserId !== null,
+  });
+
+  useEffect(() => {
+    if (editingUserQuery.data) {
+      form.reset({
+        username: editingUserQuery.data.username,
+        display_name: editingUserQuery.data.display_name || '',
+        password: '',
+      });
+    }
+  }, [editingUserQuery.data, form]);
+
+  const saveMutation = useMutation({
+    mutationFn: async (values: UserFormValues) => {
+      if (!editingUserId && values.password.length === 0) {
+        throw new Error('创建用户时必须填写密码。');
+      }
+
+      const payload = toPayload(values);
+
+      if (editingUserId) {
+        await updateUser({ id: editingUserId, ...payload });
+        return '用户信息已更新。';
+      }
+
+      await createUser(payload);
+      return '用户已创建。';
+    },
+    onSuccess: async (message) => {
+      setFeedback({ tone: 'success', message });
+      setEditingUserId(null);
+      setIsEditorOpen(false);
+      form.reset(defaultValues);
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: usersListQueryKey }),
+        queryClient.invalidateQueries({ queryKey: ['users', 'detail'] }),
+      ]);
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const manageMutation = useMutation({
+    mutationFn: async ({ username, action }: { username: string; action: ManageUserAction }) => {
+      await manageUser(username, action);
+      return action;
+    },
+    onSuccess: async (action) => {
+      const actionLabel = {
+        promote: '提升权限',
+        demote: '降级权限',
+        delete: '删除用户',
+        disable: '禁用用户',
+        enable: '启用用户',
+      }[action];
+
+      setFeedback({ tone: 'success', message: `${actionLabel}操作已完成。` });
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: usersListQueryKey }),
+        queryClient.invalidateQueries({ queryKey: ['users', 'detail'] }),
+      ]);
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const activeQuery = searchKeyword.length > 0 ? searchQuery : usersQuery;
+  const users = useMemo(() => activeQuery.data ?? [], [activeQuery.data]);
+
+  const handleSearchSubmit = () => {
+    setFeedback(null);
+    setPage(0);
+    setSearchKeyword(searchInput.trim());
+  };
+
+  const handleResetSearch = () => {
+    setSearchInput('');
+    setSearchKeyword('');
+    setPage(0);
+    setFeedback(null);
+  };
+
+  const handleResetForm = () => {
+    setEditingUserId(null);
+    setIsEditorOpen(false);
+    setFeedback(null);
+    form.reset(defaultValues);
+  };
+
+  const handleCreate = () => {
+    setEditingUserId(null);
+    setFeedback(null);
+    form.reset(defaultValues);
+    setIsEditorOpen(true);
+  };
+
+  const handleEdit = (targetUser: UserItem) => {
+    setFeedback(null);
+    setEditingUserId(targetUser.id);
+    setIsEditorOpen(true);
+  };
+
+  const handleManage = (targetUser: UserItem, action: ManageUserAction) => {
+    const actionText = {
+      promote: '提升',
+      demote: '降级',
+      delete: '删除',
+      disable: '禁用',
+      enable: '启用',
+    }[action];
+
+    if (action === 'delete' && !window.confirm(`确认删除用户“${targetUser.username}”吗？`)) {
+      return;
+    }
+
+    if ((action === 'disable' || action === 'enable') && !window.confirm(`确认${actionText}用户“${targetUser.username}”吗？`)) {
+      return;
+    }
+
+    setFeedback(null);
+    manageMutation.mutate({ username: targetUser.username, action });
+  };
+
+  const handleSubmit = form.handleSubmit((values) => {
+    setFeedback(null);
+    saveMutation.mutate(values);
+  });
+
+  if (!isAdmin) {
+    return (
+      <div className='space-y-6'>
+        <PageHeader
+          title='用户管理'
+          description='阶段 4 已迁移用户管理页面，但当前账户没有管理员权限。'
+        />
+        <EmptyState
+          title='权限不足'
+          description='用户列表、编辑与账户管理动作仅对管理员开放，请使用管理员账号登录后继续。'
+        />
+      </div>
+    );
+  }
+
+  return (
+    <>
+    <div className='space-y-6'>
+      <PageHeader
+        title='用户管理'
+        description='支持搜索、分页、创建、编辑以及启用、封禁、权限调整等常见账户管理动作。'
+        action={
+          <PrimaryButton type='button' onClick={handleCreate}>
+            新建用户
+          </PrimaryButton>
+        }
+      />
+
+      {feedback ? <InlineMessage tone={feedback.tone} message={feedback.message} /> : null}
+
+      <AppCard
+        title='用户列表'
+        action={
+          <div className='flex flex-wrap gap-2'>
+            <SecondaryButton
+              type='button'
+              onClick={() => void queryClient.invalidateQueries({ queryKey: usersListQueryKey })}
+            >
+              刷新
+            </SecondaryButton>
+          </div>
+        }
+      >
+        <div className='space-y-5'>
+          <div className='flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between'>
+            <div className='flex w-full flex-col gap-3 md:flex-row'>
+              <ResourceInput
+                value={searchInput}
+                onChange={(event) => setSearchInput(event.target.value)}
+                placeholder='搜索用户 ID、用户名、显示名称或邮箱地址'
+                className='md:max-w-xl'
+              />
+              <div className='flex flex-wrap gap-2'>
+                <PrimaryButton type='button' onClick={handleSearchSubmit}>
+                  搜索
+                </PrimaryButton>
+                <SecondaryButton type='button' onClick={handleResetSearch}>
+                  清空
+                </SecondaryButton>
+              </div>
+            </div>
+
+            {searchKeyword.length === 0 ? (
+              <div className='flex flex-wrap gap-2'>
+                <SecondaryButton type='button' onClick={() => setPage((value) => Math.max(value - 1, 0))} disabled={page === 0 || activeQuery.isLoading}>
+                  上一页
+                </SecondaryButton>
+                <SecondaryButton
+                  type='button'
+                  onClick={() => setPage((value) => value + 1)}
+                  disabled={activeQuery.isLoading || users.length < ITEMS_PER_PAGE}
+                >
+                  下一页
+                </SecondaryButton>
+              </div>
+            ) : null}
+          </div>
+
+          {activeQuery.isLoading ? (
+            <LoadingState />
+          ) : activeQuery.isError ? (
+            <ErrorState title='用户列表加载失败' description={getErrorMessage(activeQuery.error)} />
+          ) : users.length === 0 ? (
+            <EmptyState title='暂无用户' description='当前条件下没有可展示的用户记录。' />
+          ) : (
+            <div className='overflow-x-auto'>
+              <table className='min-w-full divide-y divide-[var(--border-default)] text-left text-sm'>
+                <thead>
+                  <tr className='text-[var(--foreground-secondary)]'>
+                    <th className='px-3 py-3 font-medium'>用户</th>
+                    <th className='px-3 py-3 font-medium'>邮箱</th>
+                    <th className='px-3 py-3 font-medium'>角色</th>
+                    <th className='px-3 py-3 font-medium'>状态</th>
+                    <th className='px-3 py-3 font-medium'>操作</th>
+                  </tr>
+                </thead>
+                <tbody className='divide-y divide-[var(--border-default)]'>
+                  {users.map((targetUser) => {
+                    const roleMeta = getRoleMeta(targetUser.role);
+                    const statusMeta = getStatusMeta(targetUser.status);
+                    const canManage = (currentUser?.role ?? 0) > targetUser.role;
+
+                    return (
+                      <tr key={targetUser.id} className='align-top'>
+                        <td className='px-3 py-4'>
+                          <div className='space-y-1'>
+                            <p className='font-medium text-[var(--foreground-primary)]'>{targetUser.username}</p>
+                            <p className='text-xs text-[var(--foreground-secondary)]'>
+                              显示名称：{targetUser.display_name || '未设置'}
+                            </p>
+                            <p className='text-xs text-[var(--foreground-secondary)]'>ID：{targetUser.id}</p>
+                          </div>
+                        </td>
+                        <td className='px-3 py-4 text-[var(--foreground-secondary)]'>
+                          {targetUser.email || '未绑定'}
+                        </td>
+                        <td className='px-3 py-4'>
+                          <StatusBadge label={roleMeta.label} variant={roleMeta.variant} />
+                        </td>
+                        <td className='px-3 py-4'>
+                          <StatusBadge label={statusMeta.label} variant={statusMeta.variant} />
+                        </td>
+                        <td className='px-3 py-4'>
+                          <div className='flex flex-wrap gap-2'>
+                            <SecondaryButton type='button' onClick={() => handleEdit(targetUser)} className='px-3 py-2 text-xs' disabled={!canManage}>
+                              编辑
+                            </SecondaryButton>
+                            <SecondaryButton
+                              type='button'
+                              onClick={() => handleManage(targetUser, targetUser.status === 1 ? 'disable' : 'enable')}
+                              className='px-3 py-2 text-xs'
+                              disabled={!canManage || manageMutation.isPending}
+                            >
+                              {targetUser.status === 1 ? '禁用' : '启用'}
+                            </SecondaryButton>
+                            <SecondaryButton
+                              type='button'
+                              onClick={() => handleManage(targetUser, targetUser.role >= 10 ? 'demote' : 'promote')}
+                              className='px-3 py-2 text-xs'
+                              disabled={!canManage || manageMutation.isPending || (!isRoot && targetUser.role < 10)}
+                            >
+                              {targetUser.role >= 10 ? '降级' : '提升'}
+                            </SecondaryButton>
+                            <DangerButton
+                              type='button'
+                              onClick={() => handleManage(targetUser, 'delete')}
+                              className='px-3 py-2 text-xs'
+                              disabled={!canManage || manageMutation.isPending}
+                            >
+                              删除
+                            </DangerButton>
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </AppCard>
+    </div>
+    <AppModal
+      isOpen={isEditorOpen}
+      onClose={handleResetForm}
+      title={editingUserId ? '编辑用户' : '创建新用户'}
+      description={editingUserId ? '可更新用户名、显示名称与密码。留空密码表示不修改。' : '新建用户默认创建为普通用户。'}
+      footer={
+        <div className='flex flex-wrap justify-end gap-3'>
+          <SecondaryButton type='button' onClick={handleResetForm} disabled={saveMutation.isPending}>
+            取消
+          </SecondaryButton>
+          <PrimaryButton type='submit' form='user-editor-form' disabled={saveMutation.isPending}>
+            {saveMutation.isPending ? '保存中...' : editingUserId ? '保存修改' : '创建用户'}
+          </PrimaryButton>
+        </div>
+      }
+    >
+      {editingUserId && editingUserQuery.isLoading ? (
+        <LoadingState />
+      ) : editingUserId && editingUserQuery.isError ? (
+        <ErrorState title='用户详情加载失败' description={getErrorMessage(editingUserQuery.error)} />
+      ) : (
+        <form id='user-editor-form' className='space-y-5' onSubmit={handleSubmit}>
+          <ResourceField label='用户名' error={form.formState.errors.username?.message}>
+            <ResourceInput placeholder='请输入用户名' {...form.register('username')} />
+          </ResourceField>
+
+          <ResourceField label='显示名称' error={form.formState.errors.display_name?.message}>
+            <ResourceInput placeholder='请输入显示名称' {...form.register('display_name')} />
+          </ResourceField>
+
+          <ResourceField
+            label={editingUserId ? '新密码' : '密码'}
+            hint={editingUserId ? '留空表示保持原密码不变。' : '密码长度需为 8 到 20 个字符。'}
+            error={form.formState.errors.password?.message}
+          >
+            <ResourceInput type='password' placeholder='请输入密码' {...form.register('password')} />
+          </ResourceField>
+
+          {editingUserId && editingUserQuery.data ? (
+            <div className='grid gap-4 md:grid-cols-2'>
+              <div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4'>
+                <p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>绑定邮箱</p>
+                <p className='mt-2 break-all text-sm text-[var(--foreground-primary)]'>
+                  {editingUserQuery.data.email || '未绑定'}
+                </p>
+              </div>
+              <div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4'>
+                <p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>第三方账号</p>
+                <p className='mt-2 text-sm text-[var(--foreground-primary)]'>
+                  GitHub：{editingUserQuery.data.github_id || '未绑定'}
+                </p>
+                <p className='mt-1 text-sm text-[var(--foreground-primary)]'>
+                  微信：{editingUserQuery.data.wechat_id || '未绑定'}
+                </p>
+              </div>
+            </div>
+          ) : null}
+        </form>
+      )}
+    </AppModal>
+    </>
+  );
+}

openflare_server/web/features/users/types.ts

@@ -0,0 +1,24 @@
+export interface UserItem {
+  id: number;
+  username: string;
+  display_name: string;
+  role: number;
+  status: number;
+  email?: string;
+  github_id?: string;
+  wechat_id?: string;
+}
+
+export interface UserMutationPayload {
+  id?: number;
+  username: string;
+  display_name: string;
+  password: string;
+}
+
+export type ManageUserAction = 'promote' | 'demote' | 'delete' | 'disable' | 'enable';
+
+export interface ManageUserResult {
+  role: number;
+  status: number;
+}

openflare_server/web/features/websites/components/certificate-detail-modal.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
+
+import { EmptyState } from '@/components/feedback/empty-state';
+import { ErrorState } from '@/components/feedback/error-state';
+import { InlineMessage } from '@/components/feedback/inline-message';
+import { LoadingState } from '@/components/feedback/loading-state';
+import { AppModal } from '@/components/ui/app-modal';
+import { StatusBadge } from '@/components/ui/status-badge';
+import {
+  getTlsCertificate,
+  getTlsCertificateContent,
+} from '@/features/tls-certificates/api/tls-certificates';
+import { getCertificateStatus, getErrorMessage } from '@/features/websites/utils';
+import {
+  CodeBlock,
+  DangerButton,
+  PrimaryButton,
+  SecondaryButton,
+} from '@/features/shared/components/resource-primitives';
+import { formatDateTime } from '@/lib/utils/date';
+
+interface CertificateDetailModalProps {
+  certificateId: number | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+  deleting?: boolean;
+}
+
+export function CertificateDetailModal({
+  certificateId,
+  isOpen,
+  onClose,
+  onEdit,
+  onDelete,
+  deleting = false,
+}: CertificateDetailModalProps) {
+  const [copyMessage, setCopyMessage] = useState<string | null>(null);
+
+  const certificateQuery = useQuery({
+    queryKey: ['tls-certificates', 'detail', certificateId],
+    queryFn: () => getTlsCertificate(certificateId as number),
+    enabled: isOpen && certificateId !== null,
+  });
+
+  const contentQuery = useQuery({
+    queryKey: ['tls-certificates', 'content', certificateId],
+    queryFn: () => getTlsCertificateContent(certificateId as number),
+    enabled: isOpen && certificateId !== null,
+  });
+
+  const certificate = certificateQuery.data;
+  const content = contentQuery.data;
+  const status = certificate ? getCertificateStatus(certificate) : null;
+
+  const handleCopy = async (value: string, message: string) => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopyMessage(message);
+    } catch (error) {
+      setCopyMessage(getErrorMessage(error));
+    }
+  };
+
+  return (
+    <AppModal
+      isOpen={isOpen}
+      onClose={() => {
+        setCopyMessage(null);
+        onClose();
+      }}
+      title="证书详情"
+      description="查看证书元信息、备注以及当前保存的 PEM 内容。"
+      size="xl"
+      footer={
+        <div className="flex flex-wrap justify-end gap-3">
+          <SecondaryButton type="button" onClick={onClose}>
+            关闭
+          </SecondaryButton>
+          <PrimaryButton
+            type="button"
+            onClick={onEdit}
+            disabled={!certificate}
+          >
+            编辑证书
+          </PrimaryButton>
+          <DangerButton
+            type="button"
+            onClick={onDelete}
+            disabled={!certificate || deleting}
+          >
+            {deleting ? '删除中...' : '删除证书'}
+          </DangerButton>
+        </div>
+      }
+    >
+      {copyMessage ? (
+        <InlineMessage tone="success" message={copyMessage} />
+      ) : null}
+
+      {certificateQuery.isLoading || contentQuery.isLoading ? (
+        <LoadingState />
+      ) : certificateQuery.isError || contentQuery.isError ? (
+        <ErrorState
+          title="证书详情加载失败"
+          description={getErrorMessage(
+            certificateQuery.error ?? contentQuery.error,
+          )}
+        />
+      ) : !certificate || !content ? (
+        <EmptyState
+          title="证书不存在"
+          description="当前证书可能已被删除。"
+        />
+      ) : (
+        <div className="space-y-6">
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+              <p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
+                证书名称
+              </p>
+              <p className="mt-2 text-sm text-[var(--foreground-primary)]">
+                {certificate.name}
+              </p>
+            </div>
+            <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+              <p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
+                状态
+              </p>
+              <div className="mt-2">
+                {status ? (
+                  <StatusBadge label={status.label} variant={status.variant} />
+                ) : null}
+              </div>
+            </div>
+            <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+              <p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
+                生效时间
+              </p>
+              <p className="mt-2 text-sm text-[var(--foreground-primary)]">
+                {formatDateTime(certificate.not_before)}
+              </p>
+            </div>
+            <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+              <p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
+                到期时间
+              </p>
+              <p className="mt-2 text-sm text-[var(--foreground-primary)]">
+                {formatDateTime(certificate.not_after)}
+              </p>
+            </div>
+          </div>
+
+          <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+            <p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
+              备注
+            </p>
+            <p className="mt-2 text-sm leading-6 text-[var(--foreground-primary)]">
+              {certificate.remark || '暂无备注'}
+            </p>
+          </div>
+
+          <div className="space-y-4">
+            <div>
+              <div className="mb-2 flex items-center justify-between gap-3">
+                <p className="text-sm font-medium text-[var(--foreground-primary)]">
+                  证书 PEM
+                </p>
+                <SecondaryButton
+                  type="button"
+                  className="px-3 py-2 text-xs"
+                  onClick={() =>
+                    void handleCopy(content.cert_pem, '证书 PEM 已复制。')
+                  }
+                >
+                  复制
+                </SecondaryButton>
+              </div>
+              <CodeBlock className="max-h-56 overflow-y-auto whitespace-pre-wrap break-all">
+                {content.cert_pem}
+              </CodeBlock>
+            </div>
+            <div>
+              <div className="mb-2 flex items-center justify-between gap-3">
+                <p className="text-sm font-medium text-[var(--foreground-primary)]">
+                  私钥 PEM
+                </p>
+                <SecondaryButton
+                  type="button"
+                  className="px-3 py-2 text-xs"
+                  onClick={() =>
+                    void handleCopy(content.key_pem, '私钥 PEM 已复制。')
+                  }
+                >
+                  复制
+                </SecondaryButton>
+              </div>
+              <CodeBlock className="max-h-56 overflow-y-auto whitespace-pre-wrap break-all">
+                {content.key_pem}
+              </CodeBlock>
+            </div>
+          </div>
+        </div>
+      )}
+    </AppModal>
+  );
+}