# 图片展示逻辑实现

基于设计稿规范实现的聊天中图片展示逻辑，支持大图、小图、超小图的智能展示。

## 核心功能

### 1. 智能图片分类

根据原图尺寸自动分类为：

- **A. 大图**：原图尺寸超过展示区域最大范围的图片
- **B. 小图**：原图在合理展示范围内的图片
- **C. 超小图**：原图至少有一边小于最小尺寸的图片

### 2. 动态尺寸计算

- **大图**：限制比例在 9:21 到 21:9 之间，撑满最大宽度或高度
- **小图**：保持原始比例，不超过最大展示范围
- **超小图**：短边放大至最小值，长边按比例计算但不超过最大值

### 3. 响应式支持

- 根据容器宽度动态调整最大展示尺寸
- 支持移动端和桌面端适配

### 4. 图片预览

- 点击图片可打开全屏预览
- 悬浮时显示预览提示

## 使用方法

### 基础使用

```tsx
import ChatImageContainer from '@/app/(main)/chat/[aiId]/components/ChatMessageItems/ChatCustomItem/ChatCustomImageItem/ChatImageContainer'
;<ChatImageContainer url="https://example.com/image.jpg" width={800} height={600} />
```

### 在聊天消息中使用

```tsx
import ChatCustomImageItem from '@/app/(main)/chat/[aiId]/components/ChatMessageItems/ChatCustomItem/ChatCustomImageItem'
;<ChatCustomImageItem
  message={message}
  customData={{
    type: 'image',
    url: 'https://example.com/image.jpg',
    width: 800,
    height: 600,
  }}
  isUser={false}
/>
```

### 测试页面

访问 `/test-image-display` 查看各种尺寸图片的展示效果。

## 技术实现

### 核心文件

1. **`src/utils/imageDisplayLogic.ts`** - 图片尺寸计算逻辑
2. **`src/app/(main)/chat/[aiId]/components/ChatMessageItems/ChatCustomItem/ChatCustomImageItem/ChatImageContainer.tsx`** - 图片容器组件
3. **`src/hooks/useContainerWidth.ts`** - 容器宽度监听Hook
4. **`src/utils/imageTestData.ts`** - 测试数据

### 算法逻辑

```typescript
// 1. 确定最大最小展示区域
const constants = adjustImageConstantsForContainer(containerWidth)

// 2. 确定图片类型
const imageType = getImageType(originalWidth, originalHeight, constants)

// 3. 确定图片展示区的比例
const displayRatio = calculateDisplayRatio(originalWidth, originalHeight, imageType, constants)

// 4. 确定图片展示区实际尺寸
const finalSize = calculateFinalSize(imageType, displayRatio, constants)

// 5. 图片在容器内使用 object-fit: cover 撑满
```

## 设计规范

### 常量定义

- **W_MAX / H_MAX**: 372px (50%聊天区域)
- **W_MIN / H_MIN**: 48px
- **RATIO_MIN**: 9/21 (最小比例)
- **RATIO_MAX**: 21/9 (最大比例)

### 移动端适配

移动端的具体数值需要根据实际设备屏幕尺寸调整，但逻辑保持一致。

## 开发调试

开发模式下，图片左上角会显示调试信息：

- 图片类型（large/small/tiny）
- 计算后的展示尺寸

## 扩展功能

### 自定义常量

```typescript
const customConstants = {
  W_MAX: 400,
  H_MAX: 400,
  W_MIN: 60,
  H_MIN: 60,
  RATIO_MIN: 1 / 3,
  RATIO_MAX: 3 / 1,
}

const size = calculateImageDisplaySize(width, height, customConstants)
```

### 获取图片类型

```typescript
const imageType = getImageType(width, height)
console.log(imageType) // 'large' | 'small' | 'tiny'
```

## 注意事项

1. 图片URL需要支持CORS，否则可能无法正常显示
2. 建议使用高质量图片以确保在各种尺寸下都有良好的显示效果
3. 响应式计算依赖容器宽度，确保父容器有正确的尺寸
4. 图片预览功能需要配合现有的 `useImageViewer` Hook使用
