[优化] 改名

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