u

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

@@ -0,0 +1,141 @@
+# 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. 预览区域是否正常显示测试内容
+