feat: 收件箱功能新增按回车查看详情面板
- 添加邮件详情面板显示（主题、发件人、收件人、抄送、账户、时间、正文） - 优化邮件列表卡片样式，增加选中高亮效果 - 窗口宽度 >= 80 时启用双面板布局，左侧列表右侧详情 - 简化依赖包，从 charm.land 使用统一导入路径 - 删除未使用的 golangci/goreleaser 配置文件
This commit is contained in:
135
doc/003-inbox-ui-redesign.md
Normal file
135
doc/003-inbox-ui-redesign.md
Normal file
@@ -0,0 +1,135 @@
|
||||
# 第3次：收件箱界面改版讨论
|
||||
|
||||
## 日期
|
||||
2026-04-10
|
||||
|
||||
## 背景
|
||||
参考 charmbracelet/glow 的 TUI 设计，将 inbox 界面改为更现代化的双栏布局。
|
||||
|
||||
## 最终实现效果
|
||||
|
||||
### 双栏布局（终端宽度 ≥ 80）
|
||||
```
|
||||
┌───────────────────────────────────────────────────────────────────────┐
|
||||
│ 收件箱 (5 封新邮件) │ 邮件详情 │
|
||||
├─────────────────────────────────────────┴────────────────────────────────┤
|
||||
│ 新设备登录提醒 │ 主题：新设备登录提醒 │
|
||||
│ ▣ 163 · 11小时前 │ 发件人: xxx@163.com │
|
||||
│─────────────────────────────────────────│ 账户: 163 │
|
||||
│ 您的账号正在一台新设备上登录 │ 时间: 2026-04-10 10:30 │
|
||||
│ ▣ 163 · 11小时前 │ │
|
||||
│─────────────────────────────────────────│ 预览: 您的账号正在一台新设备上登录... │
|
||||
│ 项目进度更新 │ │
|
||||
│ ▣ work · 昨天 │ │
|
||||
├─────────────────────────────────────────┴────────────────────────────────┤
|
||||
│ ↑ 上移 · ↓ 下移 · enter 查看详情 · / 搜索 · q 退出 │
|
||||
└───────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 布局说明
|
||||
- **整体布局**：全屏 TTY 模式，清屏后占满整个终端窗口
|
||||
- **列表区域**：占窗口宽度的 45%，高度的 80%
|
||||
- **详情区域**：占窗口宽度的 55%
|
||||
- **帮助栏**：固定在窗口最底部，使用系统内置帮助组件
|
||||
|
||||
## 卡片样式
|
||||
|
||||
### 卡片结构（每封邮件两行）
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ 主题：邮件标题内容... │ ← 第一行：白色主题，Bold
|
||||
│ ▣ 账户 · 11小时前 │ ← 第二行：灰色账户+时间，有▣标记
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 样式细节
|
||||
- **未选中卡片**：
|
||||
- 主题行：白色前景，无背景，上内边距1，左右内边距1，下内边距0
|
||||
- 元信息行：灰色前景（#241），无背景，上内边距0，左右内边距1，下内边距1
|
||||
- **选中卡片**：
|
||||
- 主题行：白色前景，浅紫色背景（#99），上内边距1，左右内边距1，下内边距0
|
||||
- 元信息行：浅紫色前景（#186），浅紫色背景（#99），上内边距0，左右内边距1，下内边距1
|
||||
|
||||
### 主题色
|
||||
- 背景色：`#99`（浅紫色）
|
||||
- 选中背景：`#99`
|
||||
- 标题前景：`#219`（粉色紫）
|
||||
|
||||
## 功能需求
|
||||
|
||||
| 功能 | 状态 | 说明 |
|
||||
|------|------|------|
|
||||
| 双栏布局（列表 + 详情） | ✅ | 列表45%，详情55% |
|
||||
| 全屏 TTY 模式 | ✅ | 使用 AltScreen，清屏 |
|
||||
| 卡片式邮件列表 | ✅ | 两行结构：主题 + 元信息 |
|
||||
| 选中高亮 | ✅ | 浅紫色背景 |
|
||||
| 帮助栏固定底部 | ✅ | 使用系统内置帮助组件 |
|
||||
| 列表高度80% | ✅ | 根据窗口高度动态计算 |
|
||||
| 搜索过滤功能 | ⏳ | 待实现 |
|
||||
| 详情面板显示完整邮件 | ⏳ | 待实现（需要按需获取） |
|
||||
|
||||
## 功能需求
|
||||
|
||||
| 功能 | 状态 | 说明 |
|
||||
|------|------|------|
|
||||
| 双栏布局（列表 + 详情） | ✅ | 列表45%，详情55% |
|
||||
| 全屏 TTY 模式 | ✅ | 使用 AltScreen，清屏 |
|
||||
| 卡片式邮件列表 | ✅ | 两行结构：主题 + 元信息 |
|
||||
| 选中高亮 | ✅ | 浅紫色背景 |
|
||||
| 帮助栏固定底部 | ✅ | 使用系统内置帮助组件 |
|
||||
| 列表高度80% | ✅ | 根据窗口高度动态计算 |
|
||||
| 搜索过滤功能 | ⏳ | 待实现 |
|
||||
| 详情面板显示完整邮件 | ✅ | 按回车获取完整邮件内容 |
|
||||
|
||||
## 技术要点
|
||||
|
||||
### 关键实现
|
||||
1. **TTY 模式**：`v.AltScreen = true` 在 View() 方法中设置
|
||||
2. **宽度计算**：`int(float64(totalWidth) * 0.45)` 计算列表宽度
|
||||
3. **高度计算**：`int(float64(msg.Height) * 0.8)` 设置列表高度为窗口的80%
|
||||
4. **帮助栏**：
|
||||
- `l.SetShowHelp(true)` 启用内置帮助
|
||||
- 自定义 `inboxHelpKeyMap` 实现 `ShortHelp()` 和 `FullHelp()` 接口
|
||||
5. **卡片渲染**：
|
||||
- `emailDelegate.Height()` 返回 2（每卡片2行）
|
||||
- `emailDelegate.Spacing()` 返回 0（卡片间无间距）
|
||||
- 使用 `lipgloss.NewStyle().Width(width)` 固定宽度
|
||||
- 使用 `truncateString()` 函数实现超出截断
|
||||
|
||||
### 按回车获取详情实现
|
||||
1. **InboxModel 新增字段**：
|
||||
- `loadingDetail bool` - 是否正在加载详情
|
||||
- `selectedDetail *EmailDetail` - 已获取的详情数据
|
||||
- `detailFetcher DetailFetcher` - 详情获取回调函数
|
||||
2. **DetailFetcher 模式**：通过回调函数解耦获取逻辑，便于测试和扩展
|
||||
3. **DetailResultMsg 消息**：异步获取完成后通过消息传递结果
|
||||
4. **Spinner 加载动画**：使用 bubbles spinner 组件显示加载状态
|
||||
5. **IMAP ID 命令**：QQ 邮箱需要发送 ID 命令通过 "Unsafe Login" 检查
|
||||
|
||||
### 文件修改
|
||||
- `inbox/model.go`：主要实现文件
|
||||
- `inbox.go`：使用 `tea.NewProgram()` 创建程序
|
||||
- `imap.go`：新增 `FetchEmailDetailByUID` 函数获取完整邮件内容
|
||||
|
||||
## 实施步骤
|
||||
|
||||
| 步骤 | 描述 | 状态 |
|
||||
|------|------|------|
|
||||
| 1 | 创建讨论文档 | ✅ |
|
||||
| 2 | 升级 charm.land v2 依赖 | ✅ |
|
||||
| 3 | 实现双栏布局基础结构 | ✅ |
|
||||
| 4 | 实现 View() 全屏渲染 | ✅ |
|
||||
| 5 | 实现卡片样式（两行结构） | ✅ |
|
||||
| 6 | 实现选中高亮效果 | ✅ |
|
||||
| 7 | 添加帮助栏（系统内置） | ✅ |
|
||||
| 8 | 调整列表高度为80% | ✅ |
|
||||
| 9 | 移除边框，优化间距 | ✅ |
|
||||
| 10 | 实现右侧详情面板 | ✅ |
|
||||
| 11 | 添加搜索过滤功能 | ⏳ |
|
||||
| 12 | 实现按需获取完整邮件内容 | ✅ |
|
||||
|
||||
## 待优化项
|
||||
|
||||
1. **搜索功能**：启用 `list.SetFilteringEnabled(true)` 后需要实现过滤逻辑
|
||||
2. **邮件数量**：当前只显示未读邮件，可扩展为支持所有邮件
|
||||
3. **邮件操作**：查看、删除、标记已读等操作待实现
|
||||
Reference in New Issue
Block a user