142 lines
4.8 KiB
Markdown
142 lines
4.8 KiB
Markdown
# 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. 预览区域是否正常显示测试内容
|
|
|