# OG 图片生成模块

## 设计理念

新的 OG 图片设计采用**极简主义、照片为中心、响应式布局**的设计方案,确保在社交媒体分享时照片本身是绝对的视觉焦点,并且针对不同照片比例自动选择最佳布局。

## 响应式布局策略

### 四种布局模式

根据照片的宽高比,自动选择最合适的布局模式:

#### 1. **竖版照片** (比例 < 0.85,如 3:4)

```
┌──────────────────────────────────────┐
│              [品牌]                  │
│  ┌──────┐   标题文字      #tag1     │
│  │      │   📷 相机                  │
│  │ 照片 │   ⚫ f/2.8 | ⏱️ 1/250s    │
│  │      │   ━━━                     │
│  └──────┘                            │
└──────────────────────────────────────┘
   左右分栏布局 - 照片占满高度
```

#### 2. **方形照片** (比例 0.85~1.15,如 1:1)

```
┌──────────────────────────────────────┐
│              [品牌]                  │
│  ┌───────┐   标题文字      #tag1     │
│  │       │   📷 相机                 │
│  │ 照片  │   ⚫ f/2.8 | ⏱️ 1/250s   │
│  │       │   ━━━                    │
│  └───────┘                           │
└──────────────────────────────────────┘
   左右分栏布局 - 均衡布局
```

#### 3. **普通横版照片** (比例 1.15~2.2,如 4:3, 3:2)

```
┌──────────────────────────────────────┐
│           [品牌]                     │
│      ┌──────────────┐                │
│      │    照片      │                │
│      └──────────────┘                │
│      标题文字        #tag1           │
│      📷 相机 | ⚫ f/2.8 | ⏱️ 1/250s  │
│      ━━━                             │
└──────────────────────────────────────┘
   上下堆叠布局 - 照片占满宽度
```

#### 4. **超宽横版照片** (比例 > 2.2,如 16:9, 21:9)

```
┌──────────────────────────────────────┐
│           [品牌]                     │
│   ┌────────────────────────┐         │
│   │       照片             │         │
│   └────────────────────────┘         │
│   标题     #tag1                     │
│   📷 相机 | ⚫ f/2.8                 │
│   ━━━                                │
└──────────────────────────────────────┘
   紧凑堆叠布局 - 最大化照片展示
```

## 设计特点

### 1. 智能响应式布局

**自动布局选择**:

- ✅ 根据照片宽高比自动选择最佳布局
- ✅ 竖版/方形照片使用左右分栏,充分利用垂直空间
- ✅ 横版照片使用上下堆叠,充分展示宽度
- ✅ 超宽照片使用紧凑布局,避免过多留白
- ✅ 所有布局都保持照片原始比例,不变形裁剪

**空间利用率**:

- 竖版/方形: 照片高度占满 (510px),信息占据右侧剩余空间
- 普通横版: 照片宽度占满 (1080px),信息在底部
- 超宽横版: 照片占 70% 高度,信息栏紧凑排列

### 2. 核心改进

相比旧版设计,新版有以下改进:

#### ✅ 去除冗余装饰

- 移除了胶片孔装饰
- 移除了"FILM 400 | STUDIO CUT"等文字
- 移除了虚线框等多余视觉元素
- 移除了复杂的背景装饰图形

#### ✅ 照片为绝对主角

- 照片占据约 75% 的画布空间
- 照片保持原始比例,不强制裁剪
- 添加精致的阴影和高光效果,提升质感
- 圆角设计更现代

#### ✅ 信息层次优化

- **主要信息**: 照片标题 (42px, 粗体)
- **辅助信息**: EXIF 参数 (20px, 横排图标)
- **次要信息**: 日期 (18px, 半透明)
- **品牌元素**: 网站名称 (右上角,18px, 低透明度)

#### ✅ 智能响应式布局

- 四种布局模式自动切换(竖版分栏/方形分栏/横版堆叠/超宽紧凑)
- 根据照片比例选择最佳布局,最大化空间利用
- 所有模式都保持照片原始比例
- 信息栏根据布局自动调整尺寸和排列
- 消除不必要的留白

#### ✅ 品牌定制化

- 使用 `siteConfig.accentColor` 作为装饰条颜色
- 显示网站名称 `siteConfig.name`
- 可自定义强调色,增强品牌识别度

### 3. 技术优化

#### 简化数据结构

**旧版接口**:

```typescript
interface FrameDimensions {
  frameWidth: number
  frameHeight: number
  imageAreaWidth: number
  imageAreaHeight: number
  displayWidth: number
  displayHeight: number
}
```

**新版接口**:

```typescript
interface PhotoDimensions {
  width: number
  height: number
}
```

新版在模板内部计算显示尺寸,逻辑更清晰,service 层更简洁。

#### 模板参数优化

```typescript
interface OgTemplateProps {
  photoTitle: string // 照片标题
  siteName: string // 网站名称 (新增)
  tags: string[] // 标签 (最多3个)
  formattedDate?: string // 格式化日期
  exifInfo?: ExifInfo // EXIF 信息
  thumbnailSrc?: string // 缩略图 data URL
  photoDimensions: PhotoDimensions // 照片原始尺寸
  accentColor?: string // 品牌强调色 (新增)
}
```

### 4. 布局尺寸规范

#### 画布尺寸

- **固定**: 1200×630px (标准 OG 尺寸)

#### 竖版/方形分栏布局

| 元素       | 尺寸/值             |
| ---------- | ------------------- |
| 外边距     | 60px                |
| 照片高度   | 510px (占满高度)    |
| 照片宽度   | 根据比例计算        |
| 信息栏宽度 | 剩余空间 - 50px间距 |
| 标题字体   | 42px, 粗体          |
| EXIF 字体  | 18px                |
| 标签字体   | 16px                |
| 强调色条   | 80×3px              |

#### 横版堆叠布局

| 元素       | 尺寸/值                 |
| ---------- | ----------------------- |
| 外边距     | 60px                    |
| 照片宽度   | 1080px (占满宽度)       |
| 照片高度   | 根据比例计算,最大 430px |
| 照片下边距 | 28px                    |
| 标题字体   | 42px, 粗体              |
| EXIF 字体  | 18px                    |
| 标签字体   | 16px                    |
| 强调色条   | 80×3px                  |

#### 超宽紧凑布局

| 元素       | 尺寸/值                 |
| ---------- | ----------------------- |
| 外边距     | 50px                    |
| 照片宽度   | 1100px (占满宽度)       |
| 照片高度   | 根据比例计算,最大 450px |
| 照片下边距 | 32px                    |
| 标题字体   | 32px, 粗体 (紧凑)       |
| EXIF 字体  | 16px (紧凑)             |
| 标签字体   | 14px (紧凑)             |
| 强调色条   | 60×3px                  |

### 5. 配色方案

```css
/* 背景渐变 */
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%)

/* 文字颜色 */
标题: #ffffff
相机信息: rgba(255,255,255,0.7)
EXIF 参数: rgba(255,255,255,0.8)
日期: rgba(255,255,255,0.5)
品牌标识: rgba(255,255,255,0.4)

/* 装饰元素 */
强调色条: siteConfig.accentColor (默认 #007bff)
照片阴影: 0 20px 60px rgba(0,0,0,0.5)
```

## 使用示例

OG 图片会自动为每张照片生成,访问路径:

```
GET /og/{photoId}
```

示例:

```
https://your-site.com/og/DSCF1234
```

## 性能特点

1. **缓存策略**:
   - `Cache-Control: public, max-age=31536000`
   - 永久缓存,适合静态内容

2. **字体加载**:
   - Geist Medium (英文)
   - PingFang SC (中文)
   - 字体数据内联,无需网络请求

3. **缩略图处理**:
   - 优先使用本地文件
   - 支持多种路径候选
   - 转换为 data URL 嵌入

## 布局决策逻辑

```typescript
照片宽高比 = 照片宽度 / 照片高度

if (比例 < 0.85) {
  → 竖版分栏布局 (portrait-split)
  → 照片左侧,信息右侧
  → 示例: 3:4 人像照片
} else if (0.85 <= 比例 <= 1.15) {
  → 方形分栏布局 (square-split)
  → 照片左侧,信息右侧
  → 示例: 1:1 Instagram 风格
} else if (比例 > 2.2) {
  → 超宽紧凑布局 (wide-full)
  → 照片上方,信息紧凑排列
  → 示例: 16:9, 21:9 超宽屏
} else {
  → 横版堆叠布局 (landscape-stacked)
  → 照片上方,信息下方
  → 示例: 4:3, 3:2 常规横版
}
```

## 设计原则总结

1. **Responsive First**: 没有一种布局适合所有照片,必须响应式适配
2. **Less is More**: 去除一切不必要的装饰元素
3. **Content First**: 照片永远是主角,最大化展示面积
4. **Information Hierarchy**: 清晰的信息层次,支持紧凑和常规两种模式
5. **No Wasted Space**: 消除留白,充分利用画布空间
6. **Brand Consistency**: 与网站设计风格一致
7. **Social Optimized**: 在各平台预览中都表现优秀
