feat: 模块7 - 多行输入支持 (textarea替换textinput)

2026-04-06 05:39:21 +08:00
parent 59f9c6de18
commit 5fb0d5c58b
4 changed files with 167 additions and 31 deletions
--- a/changelog.md
+++ b/changelog.md
@@ -36,17 +36,47 @@
 | 步骤 | 模块 | 内容 | 状态 |
 |------|------|------|------|
 | 1 | TUI框架搭建 | bubbletea基础App结构、运行循环 | ✅ 已完成 |
-| 2 | 输入组件 | 文本输入框、光标、基础编辑 | ✅ 已完成 |
+| 2 | 输入组件 | 文本输入框，光标、基础编辑 | ✅ 已完成 |
 | 3 | 翻译显示区 | 结果展示、格式化、滚动 | ✅ 已完成 |
 | 4 | 状态栏/主题 | 底部状态栏、语言选择、主题配色 | ✅ 已完成 |
 | 5 | 快捷键系统 | 退出、清空、切换语言等 | ✅ 已完成 |
 | 6 | 集成翻译 | 对接现有Translator、加载动画 | ✅ 已完成 |

+## TUI界面改进计划 (v0.7.0)
+| 步骤 | 模块 | 内容 | 状态 |
+|------|------|------|------|
+| 7 | 多行输入 | textarea组件替换textinput | ✅ 已完成 |
+| 8 | 弹出框组件 | 通用modal组件 | ⏳ 待实现 |
+| 9 | 斜杠命令菜单 | / 触发命令选择器，模糊匹配 | ⏳ 待实现 |
+| 10 | 翻译结果滚动 | viewport组件支持长文本 | ⏳ 待实现 |
+| 11 | 复制功能 | clipboard集成 | ⏳ 待实现 |
+| 12 | 状态栏扩展 | 显示耗时、token用量 | ⏳ 待实现 |
+
 ## 待修复BUG
 - 无

 ## 版本历史

+### 0.7.0 (2026-04-06) - TUI界面改进
+**类型**: 功能版本  
+**状态**: 开发中  
+
+**改进内容**:
+- ✅ 模块7: 多行输入 - textarea组件替换textinput
+- ⏳ 模块8: 弹出框组件 - 通用modal
+- ⏳ 模块9: 斜杠命令菜单 - / 命令选择器
+- ⏳ 模块10: 翻译结果滚动 - viewport
+- ⏳ 模块11: 复制功能 - clipboard
+- ⏳ 模块12: 状态栏扩展 - 耗时/token
+
+**讨论记录**:
+- [TUI界面改进计划](taolun.md#2026-04-06-1400-版本-070---tui界面改进计划)
+
+**下一步**:
+- 实现模块8: 弹出框组件
+
+---
+
 ### 0.6.0 (2026-04-06) - TUI交互界面
 **类型**: 功能版本  
 **状态**: 已完成  
@@ -69,9 +99,7 @@
 - [TUI界面模块拆分计划](taolun.md#2026-04-06-1000-版本-060---tui界面模块拆分计划)

 **下一步**:
- 测试TUI交互界面
- 优化用户体验
- 添加更多功能（如复制翻译结果）
+- 实现模块7: 多行输入

 ---

--- a/internal/tui/app.go
+++ b/internal/tui/app.go
@@ -3,7 +3,7 @@ package tui
 import (
 	"context"

-	"github.com/charmbracelet/bubbles/textinput"
+	"github.com/charmbracelet/bubbles/textarea"
 	"github.com/charmbracelet/bubbletea"
 	"github.com/charmbracelet/lipgloss"
 	"github.com/titor/fanyi/internal/config"
@@ -13,7 +13,7 @@ import (
 type model struct {
 	config     *config.Config
 	translator *translator.Translator
-	textInput  textinput.Model
+	textArea   textarea.Model
 	result     string
 	errMsg     string
 	targetLang string
@@ -34,7 +34,8 @@ var (
 			Foreground(lipgloss.Color("#00D9FF"))
 	inputStyle = lipgloss.NewStyle().
 			Foreground(lipgloss.Color("#FAFAFA")).
-			Background(lipgloss.Color("#1A1A2E"))
+			Background(lipgloss.Color("#1A1A2E")).
+			Width(50)
 	resultStyle = lipgloss.NewStyle().
 			Foreground(lipgloss.Color("#98FB98")).
 			Background(lipgloss.Color("#0D1B2A"))
@@ -64,16 +65,17 @@ func NewApp(cfg *config.Config, t *translator.Translator) *tea.Program {
 		targetLang = cfg.DefaultTargetLang
 	}

-	ti := textinput.New()
-	ti.Placeholder = "输入要翻译的文本..."
-	ti.Focus()
-	ti.Prompt = "> "
-	ti.TextStyle = inputStyle
+	ta := textarea.New()
+	ta.Placeholder = "输入要翻译的文本..."
+	ta.Focus()
+	ta.Prompt = "| "
+	ta.SetWidth(50)
+	ta.SetHeight(5)

 	return tea.NewProgram(model{
 		config:     cfg,
 		translator: t,
-		textInput:  ti,
+		textArea:   ta,
 		targetLang: targetLang,
 	})
 }
@@ -103,7 +105,7 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 			if m.loading {
 				return m, nil
 			}
-			text := m.textInput.Value()
+			text := m.textArea.Value()
 			if text == "" {
 				return m, nil
 			}
@@ -115,7 +117,7 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 			return m, tea.Quit

 		case tea.KeyCtrlL:
-			m.textInput.SetValue("")
+			m.textArea.SetValue("")
 			m.result = ""
 			m.errMsg = ""
 			return m, nil
@@ -130,7 +132,7 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		}
 	}

-	m.textInput, cmd = m.textInput.Update(msg)
+	m.textArea, cmd = m.textArea.Update(msg)
 	return m, cmd
 }

@@ -153,39 +155,33 @@ func (m model) doTranslate(text, toLang string) tea.Cmd {

 func (m model) View() string {
 	resultBox := m.renderResult()
-	helpText := helpStyle.Render("\n  " +
-		keyStyle.Render("Ctrl+L") + " 清空  " +
-		keyStyle.Render("Ctrl+T") + " 切换语言  " +
-		keyStyle.Render("Enter") + " 翻译  " +
-		keyStyle.Render("Ctrl+C") + " 退出")

 	return "\n" +
 		"  " + headerStyle.Render("YOYO翻译") + "\n" +
 		"  " + dividerStyle.Render("─────────────────────") + "\n\n" +
-		"  " + m.textInput.View() + "\n\n" +
+		m.textArea.View() + "\n\n" +
 		resultBox +
-		helpText +
-		"\n" +
 		m.renderStatusBar()
 }

 func (m model) renderResult() string {
 	if m.loading {
-		return "  " + loadingStyle.Render("正在翻译...") + "\n"
+		return "  " + loadingStyle.Render("正在翻译...") + "\n\n"
 	}
 	if m.errMsg != "" {
-		return "  " + errorStyle.Render("错误: "+m.errMsg) + "\n"
+		return "  " + errorStyle.Render("错误: "+m.errMsg) + "\n\n"
 	}
 	if m.result == "" {
-		return "  " + helpStyle.Render("翻译结果将显示在这里...") + "\n"
+		return "  " + helpStyle.Render("翻译结果将显示在这里...") + "\n\n"
 	}
-	return "  " + resultStyle.Render(m.result) + "\n"
+	return "  " + resultStyle.Render(m.result) + "\n\n"
 }

 func (m model) renderStatusBar() string {
 	divider := dividerStyle.Render("─")
 	langInfo := langStyle.Render("目标: " + m.targetLang)
+	hint := helpStyle.Render("按 / 显示命令")

-	return "\n  " + divider + "\n" +
-		"  " + statusBarStyle.Render("  "+langInfo+"  ")
+	return "  " + divider + "\n" +
+		"  " + statusBarStyle.Render("  "+langInfo+"  ") + "  " + hint
 }
--- a/memory.md
+++ b/memory.md
@@ -696,4 +696,53 @@ func (m model) View() string {
    return m.result
 }
 ```
+
+---
+
+## TUI界面改进知识
+
+### TextInput vs Textarea
+- **textinput**: 单行输入，适合短文本
+- **textarea**: 多行输入，适合长段落
+- 切换时需要调整布局和样式
+
+### Modal/弹出框设计
+```go
+type model struct {
+    showModal bool
+    modalType string  // "help", "command", "info"
+}
+
+// View中渲染modal
+func (m model) View() string {
+    s := "主界面..."
+    if m.showModal {
+        s += m.renderModal()
+    }
+    return s
+}
+```
+
+### 斜杠命令菜单
+```go
+type command struct {
+    name    string
+    desc    string
+    handler func()
+}
+
+var commands = []command{
+    {"help", "显示帮助", handleHelp},
+    {"clear", "清空内容", handleClear},
+    {"copy", "复制结果", handleCopy},
+}
+
+// 模糊匹配
+func matchCommand(input string) []command {
+    // 过滤匹配的命令
+}
+```
+
+### Viewport组件
+用于长文本滚动显示，配合scrollbar展示滚动位置。
 ```
--- a/taolun.md
+++ b/taolun.md
@@ -583,4 +583,67 @@ func (m model) doTranslate(text, toLang string) tea.Cmd {
 **下一步**: 测试TUI界面、优化体验

 **关联文档**: 
- [changelog.md#0.6.0](changelog.md#060)
+- [changelog.md#0.6.0](changelog.md#060)
+
+---
+
+### [2026-04-06 14:00] 版本 0.7.0 - TUI界面改进计划
+**原因**: TUI基础功能完成后，讨论改进方向和用户体验优化
+**分析**: 
+- 当前单行textinput无法输入多行文本
+- 快捷键固定显示在底部不够美观
+- 缺少命令菜单系统
+- 长翻译结果无法滚动
+
+**解决方案 - 新增模块**:
+
+| 步骤 | 模块 | 内容 |
+|------|------|------|
+| 7 | 多行输入 | textarea组件替换textinput |
+| 8 | 弹出框组件 | 通用modal，支持快捷键帮助 |
+| 9 | 斜杠命令菜单 | / 触发命令选择器，类似opencode |
+| 10 | 翻译结果滚动 | viewport组件 |
+| 11 | 复制功能 | clipboard集成 |
+| 12 | 状态栏扩展 | 耗时、token用量 |
+
+**斜杠命令设计**:
+| 命令 | 功能 |
+|------|------|
+| `/help` | 显示快捷键帮助 |
+| `/clear` | 清空内容 |
+| `/copy` | 复制翻译结果 |
+| `/lang` | 切换语言 |
+| `/history` | 翻译历史 |
+| `/quit` | 退出 |
+
+**设计亮点**:
+1. 隐藏底部快捷键提示，改为按 ? 或 F1 弹出帮助框
+2. 输入 / 触发命令菜单，上下键选择，回车执行
+3. 命令菜单支持模糊匹配
+4. modal组件通用化，可复用于其他弹窗场景
+
+**关联文档**: 
+- [changelog.md#0.7.0](changelog.md#070)
+
+---
+
+### [2026-04-06 14:30] 版本 0.7.0 - 模块7: 多行输入 (已完成)
+**原因**: 当前textinput只支持单行，需要支持多行文本输入
+**分析**: 
+- 长段落、多行文本无法输入
+- 需要换用bubbles的textarea组件
+
+**解决方案**:
+1. 将textinput替换为textarea
+2. 调整样式和布局（宽50，高5）
+3. 底部状态栏提示按 / 显示命令
+
+**技术实现**:
+- 使用 `github.com/charmbracelet/bubbles/textarea`
+- textarea.SetWidth(50)、SetHeight(5) 设置尺寸
+- 移除底部固定快捷键提示，改为按需显示
+
+**下一步**: 实现模块8: 弹出框组件
+
+**关联文档**: 
+- [changelog.md#0.7.0](changelog.md#070)