[优化] go 引用调整

openflare-server/web/components/ui/app-card.tsx

@@ -0,0 +1,47 @@
+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,107 @@
+'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/drawer.tsx

@@ -0,0 +1,336 @@
+'use client';
+
+import {
+    cloneElement,
+    createContext,
+    type HTMLAttributes,
+    isValidElement,
+    type ReactElement,
+    type ReactNode,
+    useContext,
+    useEffect,
+    useId,
+    useMemo,
+    useState,
+} from 'react';
+import {createPortal} from 'react-dom';
+
+import {cn} from '@/lib/utils/cn';
+
+type DrawerDirection = 'top' | 'right' | 'bottom' | 'left';
+
+type DrawerContextValue = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  direction: DrawerDirection;
+};
+
+const DrawerContext = createContext<DrawerContextValue | null>(null);
+
+function useDrawerContext() {
+  const context = useContext(DrawerContext);
+
+  if (!context) {
+    throw new Error('Drawer components must be used within Drawer.');
+  }
+
+  return context;
+}
+
+function renderWithOptionalChild(
+  child: ReactNode,
+  props: Record<string, unknown>,
+  fallback: ReactNode,
+) {
+  if (isValidElement(child)) {
+    return cloneElement(child as ReactElement, props);
+  }
+
+  return fallback;
+}
+
+export function Drawer({
+  children,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  direction = 'bottom',
+  title,
+  description,
+  footer,
+}: {
+  children: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  direction?: DrawerDirection;
+  title?: string;
+  description?: string;
+  footer?: ReactNode;
+  size?: 'md' | 'lg' | 'xl';
+}) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = open !== undefined;
+  const resolvedOpen = isControlled ? open : internalOpen;
+
+  const value = useMemo<DrawerContextValue>(
+    () => ({
+      open: resolvedOpen,
+      direction,
+      setOpen: (nextOpen) => {
+        if (!isControlled) {
+          setInternalOpen(nextOpen);
+        }
+        onOpenChange?.(nextOpen);
+      },
+    }),
+    [direction, isControlled, onOpenChange, resolvedOpen],
+  );
+
+  return (
+    <DrawerContext.Provider value={value}>
+      {title || description || footer ? (
+        <DrawerContent
+          aria-label={title}
+          className={cn(
+            'w-full md:w-[50vw] md:max-w-none',
+            direction === 'right' || direction === 'left' ? '' : 'max-h-[85vh]',
+          )}
+        >
+          <DrawerHeader className="flex items-start justify-between gap-4">
+            <div className="min-w-0">
+              {title ? <DrawerTitle>{title}</DrawerTitle> : null}
+              {description ? (
+                <DrawerDescription>{description}</DrawerDescription>
+              ) : null}
+            </div>
+            <button
+              type="button"
+              onClick={() => value.setOpen(false)}
+              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>
+          </DrawerHeader>
+          <div className="min-h-0 flex-1 overflow-y-auto px-6 py-6">
+            {children}
+          </div>
+          {footer ? <DrawerFooter>{footer}</DrawerFooter> : null}
+        </DrawerContent>
+      ) : (
+        children
+      )}
+    </DrawerContext.Provider>
+  );
+}
+
+export function DrawerTrigger({
+  children,
+  asChild = false,
+}: {
+  children: ReactNode;
+  asChild?: boolean;
+}) {
+  const { setOpen } = useDrawerContext();
+
+  if (asChild) {
+    return renderWithOptionalChild(
+      children,
+      {
+        onClick: () => setOpen(true),
+      },
+      children,
+    );
+  }
+
+  return (
+    <button type="button" onClick={() => setOpen(true)}>
+      {children}
+    </button>
+  );
+}
+
+export function DrawerClose({
+  children,
+  asChild = false,
+}: {
+  children: ReactNode;
+  asChild?: boolean;
+}) {
+  const { setOpen } = useDrawerContext();
+
+  if (asChild) {
+    return renderWithOptionalChild(
+      children,
+      {
+        onClick: () => setOpen(false),
+      },
+      children,
+    );
+  }
+
+  return (
+    <button type="button" onClick={() => setOpen(false)}>
+      {children}
+    </button>
+  );
+}
+
+export function DrawerContent({
+  children,
+  className,
+  'aria-label': ariaLabel,
+}: HTMLAttributes<HTMLDivElement>) {
+  const { open, setOpen, direction } = useDrawerContext();
+  const titleId = useId();
+  const descriptionId = useId();
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setOpen(false);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open, setOpen]);
+
+  if (!open || typeof document === 'undefined') {
+    return null;
+  }
+
+  const positionClassName =
+    direction === 'right'
+      ? 'inset-y-0 right-0 h-full border-l'
+      : direction === 'left'
+        ? 'inset-y-0 left-0 h-full border-r'
+        : direction === 'top'
+          ? 'inset-x-0 top-0 border-b'
+          : 'inset-x-0 bottom-0 border-t';
+
+  return createPortal(
+    <div className="fixed inset-0 z-50">
+      <button
+        type="button"
+        className="absolute inset-0 bg-slate-950/45 backdrop-blur-[2px]"
+        onClick={() => setOpen(false)}
+        aria-label="关闭抽屉"
+      />
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabel ? undefined : titleId}
+        aria-describedby={descriptionId}
+        className={cn(
+          'absolute flex w-full flex-col overflow-hidden border-[var(--border-default)] bg-[var(--surface-panel)] shadow-2xl',
+          positionClassName,
+          className,
+        )}
+      >
+        <DrawerMetaContext.Provider value={{ titleId, descriptionId }}>
+          {children}
+        </DrawerMetaContext.Provider>
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+type DrawerMetaContextValue = {
+  titleId: string;
+  descriptionId: string;
+};
+
+const DrawerMetaContext = createContext<DrawerMetaContextValue | null>(null);
+
+function useDrawerMetaContext() {
+  const context = useContext(DrawerMetaContext);
+
+  if (!context) {
+    throw new Error(
+      'Drawer title and description must be used within DrawerContent.',
+    );
+  }
+
+  return context;
+}
+
+export function DrawerHeader({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'border-b border-[var(--border-default)] px-6 py-5',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function DrawerFooter({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'border-t border-[var(--border-default)] px-6 py-4',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function DrawerTitle({
+  className,
+  ...props
+}: HTMLAttributes<HTMLHeadingElement>) {
+  const { titleId } = useDrawerMetaContext();
+
+  return (
+    <h2
+      id={titleId}
+      className={cn(
+        'text-xl font-semibold text-[var(--foreground-primary)]',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function DrawerDescription({
+  className,
+  ...props
+}: HTMLAttributes<HTMLParagraphElement>) {
+  const { descriptionId } = useDrawerMetaContext();
+
+  return (
+    <p
+      id={descriptionId}
+      className={cn(
+        'mt-2 text-sm leading-6 text-[var(--foreground-secondary)]',
+        className,
+      )}
+      {...props}
+    />
+  );
+}

openflare-server/web/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import {cn} from '@/lib/utils/cn';
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-3 py-2 text-sm text-[var(--foreground-primary)] shadow-none transition outline-none placeholder:text-[var(--foreground-muted)] focus-visible:border-[var(--border-strong)] focus-visible:ring-2 focus-visible:ring-[var(--accent-soft)] disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = 'Input';
+
+export { Input };

openflare-server/web/components/ui/label.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+import {cn} from '@/lib/utils/cn';
+
+const Label = React.forwardRef<HTMLLabelElement, React.ComponentProps<'label'>>(
+  ({ className, ...props }, ref) => (
+    <label
+      ref={ref}
+      className={cn(
+        'text-sm leading-none font-medium text-[var(--foreground-primary)] peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+
+Label.displayName = 'Label';
+
+export { Label };

openflare-server/web/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import * as React from 'react';
+import {Separator as SeparatorPrimitive} from 'radix-ui';
+
+import {cn} from '@/lib/utils';
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

openflare-server/web/components/ui/sonner.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useTheme } from '@/components/providers/theme-provider';
+import { Toaster as Sonner } from 'sonner';
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+export function Toaster({ ...props }: ToasterProps) {
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <Sonner
+      position="bottom-right"
+      theme={resolvedTheme as ToasterProps['theme']}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            'group toast group-[.toaster]:bg-[var(--surface-elevated)] group-[.toaster]:text-[var(--foreground-primary)] group-[.toaster]:border-[var(--border-default)] group-[.toaster]:shadow-lg group-[.toaster]:rounded-2xl group-[.toaster]:font-sans',
+          description: 'group-[.toast]:text-[var(--foreground-secondary)]',
+          actionButton:
+            'group-[.toast]:bg-[var(--primary)] group-[.toast]:text-[var(--primary-foreground)]',
+          cancelButton:
+            'group-[.toast]:bg-[var(--muted)] group-[.toast]:text-[var(--muted-foreground)]',
+        },
+      }}
+      {...props}
+    />
+  );
+}

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/switch.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils/cn';
+
+type SwitchProps = Omit<React.ComponentProps<'button'>, 'onChange'> & {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+};
+
+const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+  (
+    {
+      className,
+      checked,
+      defaultChecked = false,
+      disabled,
+      onCheckedChange,
+      ...props
+    },
+    ref,
+  ) => {
+    const [internalChecked, setInternalChecked] =
+      React.useState(defaultChecked);
+    const isControlled = checked !== undefined;
+    const isChecked = isControlled ? checked : internalChecked;
+
+    const updateChecked = React.useCallback(
+      (nextChecked: boolean) => {
+        if (!isControlled) {
+          setInternalChecked(nextChecked);
+        }
+        onCheckedChange?.(nextChecked);
+      },
+      [isControlled, onCheckedChange],
+    );
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="switch"
+        aria-checked={isChecked}
+        data-state={isChecked ? 'checked' : 'unchecked'}
+        disabled={disabled}
+        className={cn(
+          'peer inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-transparent bg-[var(--control-background-hover)] transition-colors outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent-soft)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[var(--brand-primary)]',
+          className,
+        )}
+        onClick={() => updateChecked(!isChecked)}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            updateChecked(!isChecked);
+          }
+        }}
+        {...props}
+      >
+        <span
+          data-state={isChecked ? 'checked' : 'unchecked'}
+          className="pointer-events-none block h-5 w-5 translate-x-0.5 rounded-full bg-white shadow-sm transition-transform data-[state=checked]:translate-x-5"
+        />
+      </button>
+    );
+  },
+);
+
+Switch.displayName = 'Switch';
+
+export { Switch };

openflare-server/web/components/ui/textarea.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils/cn';
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<'textarea'>
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        'flex min-h-28 w-full rounded-xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-3 py-2 text-sm text-[var(--foreground-primary)] shadow-none transition outline-none placeholder:text-[var(--foreground-muted)] focus-visible:border-[var(--border-strong)] focus-visible:ring-2 focus-visible:ring-[var(--accent-soft)] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

openflare-server/web/components/ui/theme-toggle.tsx

@@ -0,0 +1,80 @@
+'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>
+  );
+}