# 登录注册页面重写设计

## 日期
2026-05-25

## 目标
重写 `/auth/login` 和 `/auth/register` 页面为独立的极简居中卡片表单，不依赖其他页面信息。

## 设计风格
方案一：极简居中卡片

## 结构

### 页面结构
- 全屏 `{colors.canvas}` = #faf9f5 背景
- 居中单卡片，`{rounded.lg}`（12px），白底 + 微妙阴影
- 卡片最大宽度 420px，内边距 40px

### 背景装饰
- 32px 圆点网格纹理（`{colors.hairline}` 色，opacity 0.5）
- 右上角 + 左下角各一模糊光晕（coral + amber，opacity ~10-12%）

### 表单内容（login）
- 标题："欢迎回来"
- 副标题："继续您的探索之旅"
- 用户名/邮箱输入框（浮动 label）
- 密码输入框 + 忘记密码链接
- 验证码输入框 + 验证码图片
- 记住我复选框
- 提交按钮
- 分割线 + 社交登录按钮
- 底部链接："还没有账户？立即注册"

### 表单内容（register）
- 标题："创建账户"
- 副标题："加入我们开始策展"
- 用户名输入框
- 密码输入框
- 确认密码输入框
- 验证码输入框 + 验证码图片
- 提交按钮
- 分割线 + 社交登录按钮
- 底部链接："已有账户？立即登录"

## 交互细节
- 提交按钮 hover 光泽扫过动效
- 输入框 focus 边框变 coral + 外发光（4px coral 10% alpha）
- 验证码点击刷新

## 组件样式

### 卡片
```
background: {colors.canvas}
border-radius: 12px
box-shadow: 0 2px 12px rgba(20,20,19,0.06)
padding: 40px
max-width: 420px
```

### 输入框
```
background: {colors.canvas}
border: 1.5px solid {colors.hairline}
border-radius: 8px
padding: 20px 16px 8px
font-size: 16px
transition: border-color 0.2s ease, box-shadow 0.2s ease
focus: border-color = {colors.primary}, box-shadow = 0 0 0 4px rgba(204, 120, 92, 0.1)
```

### 提交按钮
```
background: {colors.primary}
color: {colors.on-primary}
border-radius: 8px
padding: 18px 24px
hover: {colors.primary-active}
active: scale(0.98)
```

### 背景光晕
```
光晕1（右上）: background: {colors.primary}, top: -150px, right: 10%, opacity: 0.12, blur: 80px, 尺寸: 500px
光晕2（左下）: background: {colors.accent-amber}, bottom: -100px, left: 20%, opacity: 0.08, blur: 80px, 尺寸: 400px
网格纹理: radial-gradient, 32px 间隔, opacity 0.5
```

## 实现文件
- `app/pages/auth/login.vue`
- `app/pages/auth/register.vue`