From ee9dc677088eb7a44bd2389a8fb10a73f8cb722c Mon Sep 17 00:00:00 2001
From: gaoziman <2942894660@qq.com>
Date: Wed, 17 Dec 2025 22:53:52 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E6=B7=BB=E5=8A=A0=E5=9F=BA?=
 =?UTF-8?q?=E7=A1=80=20UI=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Avatar: 用户头像组件，支持图片和文字头像
- Toggle: 开关切换组件，用于设置项
- AILogo: AI 助手 Logo 组件，品牌标识
---
 src/components/ui/AILogo.tsx | 26 ++++++++++++++++++++++++++
 src/components/ui/Avatar.tsx | 31 +++++++++++++++++++++++++++++++
 src/components/ui/Toggle.tsx | 32 ++++++++++++++++++++++++++++++++
 3 files changed, 89 insertions(+)
 create mode 100644 src/components/ui/AILogo.tsx
 create mode 100644 src/components/ui/Avatar.tsx
 create mode 100644 src/components/ui/Toggle.tsx

diff --git a/src/components/ui/AILogo.tsx b/src/components/ui/AILogo.tsx
new file mode 100644
index 0000000..053f1c4
--- /dev/null
+++ b/src/components/ui/AILogo.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+
+interface AILogoProps {
+  size?: number;
+  className?: string;
+}
+
+export function AILogo({ size = 48, className }: AILogoProps) {
+  return (
+    <svg
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      className={cn('text-[var(--color-primary)]', className)}
+    >
+      <path
+        d="M24 4L26.5 18.5L41 16L29.5 24L41 32L26.5 29.5L24 44L21.5 29.5L7 32L18.5 24L7 16L21.5 18.5L24 4Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/ui/Avatar.tsx b/src/components/ui/Avatar.tsx
new file mode 100644
index 0000000..2c972e5
--- /dev/null
+++ b/src/components/ui/Avatar.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+
+interface AvatarProps {
+  name: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export function Avatar({ name, size = 'md', className }: AvatarProps) {
+  const initial = name.charAt(0).toUpperCase();
+
+  const sizeClasses = {
+    sm: 'w-6 h-6 text-xs',
+    md: 'w-8 h-8 text-sm',
+    lg: 'w-10 h-10 text-base',
+  };
+
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center rounded-full bg-[var(--color-primary)] text-white font-semibold',
+        sizeClasses[size],
+        className
+      )}
+    >
+      {initial}
+    </div>
+  );
+}
diff --git a/src/components/ui/Toggle.tsx b/src/components/ui/Toggle.tsx
new file mode 100644
index 0000000..c9a6c02
--- /dev/null
+++ b/src/components/ui/Toggle.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+
+interface ToggleProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  className?: string;
+}
+
+export function Toggle({ checked, onChange, className }: ToggleProps) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      onClick={() => onChange(!checked)}
+      className={cn(
+        'relative w-11 h-6 rounded-full transition-colors duration-150 ease-in-out',
+        checked ? 'bg-[var(--color-primary)]' : 'bg-[var(--color-border)]',
+        className
+      )}
+    >
+      <span
+        className={cn(
+          'absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow-sm transition-transform duration-150 ease-in-out',
+          checked && 'translate-x-5'
+        )}
+      />
+    </button>
+  );
+}