界面交互

:root {
  --primary: oklch(0.7 0.15 200);
  --background: oklch(0.09 0 0);
  --foreground: oklch(0.98 0 0);
  --border: oklch(0.25 0 0);
  /* ... 更多颜色变量 */
}

// app/layout.tsx
import { ThemeProvider } from '@/components/theme-provider'

export default function RootLayout({ children }) {
  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
    >
      {children}
    </ThemeProvider>
  )
}

.dark {
  --background: oklch(0.09 0 0);
  --foreground: oklch(0.98 0 0);
  /* 暗色模式下的所有颜色变量 */
}

// 完整的表单组件示例
'use client'

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form'

const formSchema = z.object({
  username: z.string().min(2, '用户名至少 2 个字符'),
  email: z.string().email('无效的邮箱地址'),
})

export function UserForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: '',
      email: '',
    },
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values)
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        <FormField
          control={form.control}
          name="username"
          render={({ field }) => (
            <FormItem>
              <FormLabel>用户名</FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">提交</Button>
      </form>
    </Form>
  )
}

// 使用 tabIndex 控制 Tab 顺序
<button tabIndex={1}>第一个</button>
<button tabIndex={2}>第二个</button>

// 跳过不可交互元素
<div tabIndex={-1}>跳过此元素</div>

// 移除 Tab 顺序（不推荐，除非必要）
<button tabIndex={-1}>不可通过 Tab 访问</button>

// 焦点陷阱（Focus Trap）- 模态框中使用
import { FocusTrap } from '@radix-ui/react-focus-trap'

<FocusTrap>
  <Dialog>
    {/* 焦点被限制在对话框内 */}
  </Dialog>
</FocusTrap>

// 焦点可见样式
<button className="focus-visible:ring-2 focus-visible:ring-primary">
  {/* 键盘导航时显示焦点环 */}
</button>

// aria-label：为元素提供标签
<button aria-label="关闭对话框">
  <X />
</button>

// aria-labelledby：引用其他元素的 ID
<div aria-labelledby="dialog-title">
  <h2 id="dialog-title">对话框标题</h2>
</div>

// aria-describedby：提供额外描述
<input 
  aria-describedby="email-help"
  aria-invalid={hasError}
/>
<span id="email-help">请输入有效的邮箱地址</span>

// 使用语义化标签
<nav>导航</nav>
<main>主要内容</main>
<article>文章</article>
<section>章节</section>
<aside>侧边栏</aside>
<header>页头</header>
<footer>页脚</footer>

// 避免：使用 div 代替语义标签
<div className="nav"> {/* 不推荐 */}
<nav> {/* 推荐 */}

// 使用 role 属性（当语义标签不可用时）
<div role="button" tabIndex={0} onClick={handleClick}>
  自定义按钮
</div>

<div role="alert" aria-live="polite">
  重要通知
</div>

<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
  {/* 模态对话框 */}
</div>

// 错误：仅用颜色表示状态
<span className="text-red-500">错误</span>

// 正确：颜色 + 图标/文字
<span className="text-red-500 flex items-center gap-1">
  <AlertCircle />
  错误：请输入有效值
</span>

// 使用 memo 避免不必要的重渲染
const ExpensiveComponent = React.memo(({ data }) => {
  return <div>{/* 复杂渲染 */}</div>
})

// 使用 useMemo 缓存计算结果
const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b)
}, [a, b])

// 使用 useCallback 缓存函数
const handleClick = useCallback(() => {
  doSomething(id)
}, [id])

// 使用 react-window 或 react-virtualized
import { FixedSizeList } from 'react-window'

<FixedSizeList
  height={600}
  itemCount={10000}
  itemSize={50}
  width="100%"
>
  {Row}
</FixedSizeList>

// 动态导入组件
import dynamic from 'next/dynamic'

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <Skeleton />,
  ssr: false, // 如果需要禁用 SSR
})

// 路由级别的代码分割（Next.js 自动处理）
// app/dashboard/page.tsx 会自动分割

// Next.js Image 组件自动优化
import Image from 'next/image'

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority // 首屏图片
  loading="lazy" // 非首屏图片
  placeholder="blur" // 模糊占位符
/>

// 支持 WebP、AVIF 等现代格式
// 自动生成响应式图片

// 使用 next/font 优化字体
import { GeistSans } from 'next/font/google'

const geistSans = GeistSans({
  subsets: ['latin'],
  display: 'swap', // 字体加载策略
  preload: true,
})

// 字体子集化，只加载需要的字符

// 预连接第三方域名
<link rel="preconnect" href="https://fonts.googleapis.com" />

// 预加载关键资源
<link rel="preload" href="/fonts/geist.woff2" as="font" />

// 预获取下一页资源
<link rel="prefetch" href="/dashboard" />