feat: 升级到 lipgloss/bubbletea v2，实现翻译卡片组件

- 升级 charm.land/lipgloss/v2 v1.1.0 -> v2.0.2
- 升级 charm.land/bubbletea/v2 v1.3.10 -> v2.0.2
- 升级 charm.land/bubbles/v2 -> v2.1.0
- 新增翻译卡片组件：元信息行(Tokens/耗时/模型)、用户输入(碳黑背景)、翻译结果
- 卡片组件间距 5px
- 重构 model.go 适配 v2 API
- 更新 keys.go, messages.go, styles.go

taolun.md

@@ -649,4 +649,113 @@ func (m model) doTranslate(text, toLang string) tea.Cmd {
 **下一步**: 实现模块8: 弹出框组件
 
 **关联文档**: 
-- [changelog.md#0.7.0](changelog.md#070)
+- [changelog.md#0.7.0](changelog.md#070)
+
+---
+
+### [2026-04-06 15:00] 版本 0.8.0 - TUI重构: 聊天风格界面
+**原因**: 用户希望使用类似 charmbracelet/crush 的聊天风格界面
+**分析**: 
+- 当前界面：标题在上 → 输入框在中 → 结果在下
+- 期望界面：标题在上 → 聊天消息区域（可滚动历史）→ 输入框固定底部 → 状态栏最底部
+- 原文+译文成对显示，类似聊天软件
+
+**解决方案**:
+1. 界面布局重构：
+   ```
+   ┌─────────────────────────────────────────┐
+   │  ✦ YOYO 翻译              [Ctrl+C退出] │
+   ├─────────────────────────────────────────┤
+   │  (聊天消息区域，可滚动查看历史)         │
+   │  ── 用户输入 ──                          │
+   │  Hello world                            │
+   │  ── 翻译结果 ──                          │
+   │  你好世界                                │
+   │  ...                                    │
+   ├─────────────────────────────────────────┤
+   │  输入框...                        [回车] │
+   ├─────────────────────────────────────────┤
+   │  目标:zh-CN │ 模型:gpt-3.5 │ Tokens:125  │
+   └─────────────────────────────────────────┘
+   ```
+
+2. 技术方案：
+   - 消息结构：原文+译文成对显示
+   - 底部固定输入框（textarea）
+   - 状态栏显示完整信息
+   - Ctrl+J 换行，Enter 发送
+   - 自动调整输入框高度
+
+**下一步**: 模块1: 创建TUI模块结构
+
+**关联文档**: 
+- [changelog.md#0.8.0](changelog.md#080)
+
+---
+
+### [2026-04-06 16:00] 版本 0.8.0 - 输入框踩坑与修复
+**原因**: Ctrl+J换行后第一行被遮住，显示错乱
+**分析**: 
+- 换行后 textarea 内部渲染3行但只显示2行
+- 第一行内容往上滚动被遮住，光标在第2行，第3行是空行
+- 尝试多种方案均无效：移除Width限制、设置SetWidth/SetHeight顺序、动态调整高度
+
+**解决方案**:
+1. 放弃动态调整高度方案，固定高度为5行
+2. 超过5行时textarea内部自动滚动，光标始终可见
+
+**技术细节**:
+- textarea内部使用viewport组件，频繁SetHeight导致滚动位置错乱
+- 使用 FocusedStyle/BlurredStyle + Style.Base 设置背景色
+
+**代码变更**:
+```go
+ta.SetWidth(60)
+ta.SetHeight(5)  // 固定高度，不动态调整
+```
+
+**下一步**: 完善其他UI功能
+
+**关联文档**: 
+- [memory.md#TUI输入框踩坑记录](memory.md#tui输入框踩坑记录)
+- [changelog.md#0.8.0](changelog.md#080)
+
+---
+
+### [2026-04-07 10:00] 版本 0.8.1 - 翻译结果卡片组件设计
+**原因**: 用户希望改进翻译结果显示样式，使用lipgloss构建更美观的组件
+**分析**: 
+- 当前翻译结果显示比较简单，只有标签和内容
+- 需要设计一个结构化的翻译卡片组件
+- 组件需要显示Tokens、翻译时间、模型名称等元信息
+
+**解决方案**:
+1. **卡片组件结构**:
+   ```
+   ┌─ 标题栏 ─────────────────────────────────────────┐
+   │ Tokens: 150  │  耗时: 1.2s  │  模型: gpt-4        │
+   └─────────────────────────────────────────────────┘
+   ┌─ 用户输入 ───────────────────────────────────────┐
+   │ ██████████ 碳黑背景 ████████████████████████████  │
+   └─────────────────────────────────────────────────┘
+   ┌─ 翻译结果 ───────────────────────────────────────┐
+   │ AI 翻译的文本内容...                              │
+   └─────────────────────────────────────────────────┘
+   ```
+
+2. **技术实现**:
+   - 使用 lipgloss.Div() 和 lipgloss.JoinVertical() 构建组件
+   - 背景色: #1A1A1A (碳黑色)
+   - 用户输入区域: 纯背景色，无边框
+   - 组件间距: 5px marginBottom
+
+3. **样式定义**:
+   - CardStyle: 卡片容器，marginBottom(5)
+   - CardMetaStyle: 元信息行样式，#6B7280 灰色
+   - CardInputStyle: 用户输入，#1A1A1A 背景 + #E5E7EB 文字
+   - CardOutputStyle: 翻译结果，白色文字
+
+**下一步**: 实现组件代码
+
+**关联文档**: 
+- [changelog.md#0.8.1](changelog.md#081)