在每次 PR 之前捕捉视觉回归问题

# 视觉回归检查

## 描述
在提交任何 PR（拉取请求）之前，请在本地启动应用程序，并对当前差异所影响的每个页面分别在桌面端和移动端宽度下截图。标记发现的任何布局问题。

## 前提条件
- Docker 正在运行（用于数据库）
- 端口 3000 可用

## 设置
1. 安装依赖项：`npm install`
2. 启动服务：`docker-compose up -d postgres redis`
3. 运行迁移：`npx prisma migrate dev`
4. 写入测试数据：`npm run db:seed`
5. 启动开发服务器：`npm run dev`
6. 等待终端中出现 "Ready on http://localhost:3000"

## 视觉检查
1. 读取当前 git diff，确定哪些页面受到影响
2. 对每个受影响的页面：
   a. 在浏览器中打开 http://localhost:3000/{route}
   b. 在 1280px 宽度（桌面端）下截图
   c. 将浏览器调整为 375px 宽度（移动端）
   d. 在移动端宽度下截图
   e. 检查以下问题：文字重叠、元素被其他元素遮挡、出现水平滚动条、按钮或链接无法点击、图片或图标缺失、控制台报错
3. 如发现任何问题，请记录页面 URL、视口宽度及问题描述

## 提交 PR 前
1. 运行 `npm run lint` 并修复所有问题
2. 运行 `npm test` 并确认所有测试通过
3. 在 PR 描述中附上所有截图
4. 如发现问题，请在 PR 正文顶部列出

## Route-Specific Checks

### Dashboard (`/dashboard`)
- The metric cards should display in a 3-column grid on desktop
- Cards should stack to a single column on mobile
- The chart should be fully visible without horizontal scroll

### Checkout (`/checkout`)
- The "Place Order" button must be visible without scrolling
  on both desktop and mobile
- The order summary sidebar should collapse into an accordion on mobile
- The price breakdown should show subtotal, tax, and total on separate lines

### Settings (`/settings`)
- All form labels should be left-aligned with their inputs
- The "Save" button must be reachable at the bottom of the form
- Tab navigation between sections should update the URL hash