# G3File 左右布局改造计划

## 需求分析

用户需要将 g3-file-container 的布局从原来的垂直布局改为左右布局：

**原布局：**

```
┌─────────────────────────────────────┐
│              header                 │
├─────────────────────────────────────┤
│               main                  │
├─────────────────────────────────────┤
│              footer                 │
└─────────────────────────────────────┘
```

**新布局：**

```
┌─────────────────────────────────────────────────────────────┐
│         左边区域                    │        右边区域        │
│  ┌─────────────────────────────┐   │  ┌─────────────────┐ │
│  │          header             │   │  │    toolbar      │ │ (10%)
│  ├─────────────────────────────┤   │  └─────────────────┘ │
│  │           main              │   │  ┌─────────────────┐ │
│  ├─────────────────────────────┤   │  │   preview       │ │ (90%)
│  │          footer             │   │  │    area         │ │
│  └─────────────────────────────┘   │  └─────────────────┘ │
└─────────────────────────────────────────────────────────────┘
```

**Toolbar 功能需求：**

* 上一个/下一个按钮（用于切换预览）

- 当前预览的文件名

- 顺序显示（当前索引/总数）

**预览区域：**

* 预览功能暂不实现，显示测试内容即可

## 修改方案

### 1. 修改 index.js

**需要修改的内容：**

* 在 `render()` 方法中添加右侧预览区域的 HTML 结构

* 添加预览相关的状态管理（当前预览索引、已上传文件列表）

* 添加预览区域的 DOM 引用

* 添加上下按钮的事件处理

**新增状态：**

```javascript
this.previewIndex = 0;  // 当前预览索引
```

**新增 DOM 引用：**

```javascript
this.$previewPanel = this.$container.find('.g3-file-preview-panel');
this.$previewToolbar = this.$container.find('.g3-preview-toolbar');
this.$previewContent = this.$container.find('.g3-preview-content');
this.$btnPrev = this.$container.find('.preview-prev');
this.$btnNext = this.$container.find('.preview-next');
this.$previewInfo = this.$container.find('.preview-info');
```

### 2. 修改 index.css

**需要修改的内容：**

* 修改 `.g3-file-container` 为横向 flex 布局

* 添加左侧区域样式 `.g3-file-left-panel`

* 添加右侧预览区域样式 `.g3-file-preview-panel`

* 添加 toolbar 样式 `.g3-preview-toolbar`

* 添加预览内容区域样式 `.g3-preview-content`

* 添加导航按钮样式

## 文件修改清单

| 文件                  | 修改内容                               |
| ------------------- | ---------------------------------- |
| `g3-file/index.js`  | 修改 render 方法添加预览区域HTML，添加预览相关状态和事件 |
| `g3-file/index.css` | 修改容器布局，添加左右区域样式、toolbar 样式、预览区域样式  |

## 实现步骤

1. **修改 CSS 布局**

   * 修改 `.g3-file-container` 为 `flex-direction: row`

   * 添加左侧面板样式（占50%宽度）

   * 添加右侧预览面板样式（占50%宽度）

   * 添加 toolbar 和预览内容区域样式

2. **修改 JS 渲染**

   * 在 render 方法中添加右侧预览区域 HTML

   * 添加预览相关状态

   * 添加上下按钮事件绑定

3. **添加辅助方法**

   * `getUploadedFiles()` - 获取已上传的文件列表

   * `updatePreview()` - 更新预览区域显示

## 风险评估

* 现有功能（文件上传、下载、删除）不受影响

* 预览功能暂不实现，仅显示测试内容

* 布局变化可能影响现有样式，需要仔细测试

## 测试要点

1. 布局是否正确显示为左右结构
2. 左侧原有功能是否正常工作
3. Toolbar 是否正确显示文件信息
4. 上下按钮是否可点击（即使预览功能未实现）
5. 预览区域是否正常显示测试内容