workspace/code/file-preview/.trae/documents/g3-file-layout-plan.md

G3File 左右布局改造计划

需求分析

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

原布局：

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

新布局：

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

Toolbar 功能需求：

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

• 当前预览的文件名

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

预览区域：

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

修改方案

1. 修改 index.js

需要修改的内容：

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

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

• 添加预览区域的 DOM 引用

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

新增状态：

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

新增 DOM 引用：

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. 预览区域是否正常显示测试内容