feat: 实现模块4 - TUI状态栏和主题配色
This commit is contained in:
@@ -28,6 +28,7 @@
|
|||||||
- [x] 模块1: TUI框架搭建 ✅ 已完成
|
- [x] 模块1: TUI框架搭建 ✅ 已完成
|
||||||
- [x] 模块2: 输入组件 ✅ 已完成
|
- [x] 模块2: 输入组件 ✅ 已完成
|
||||||
- [x] 模块3: 翻译显示区 ✅ 已完成
|
- [x] 模块3: 翻译显示区 ✅ 已完成
|
||||||
|
- [x] 模块4: 状态栏/主题 ✅ 已完成
|
||||||
|
|
||||||
## TUI界面实现计划 (v0.6.0)
|
## TUI界面实现计划 (v0.6.0)
|
||||||
| 步骤 | 模块 | 内容 | 状态 |
|
| 步骤 | 模块 | 内容 | 状态 |
|
||||||
@@ -35,7 +36,7 @@
|
|||||||
| 1 | TUI框架搭建 | bubbletea基础App结构、运行循环 | ✅ 已完成 |
|
| 1 | TUI框架搭建 | bubbletea基础App结构、运行循环 | ✅ 已完成 |
|
||||||
| 2 | 输入组件 | 文本输入框、光标、基础编辑 | ✅ 已完成 |
|
| 2 | 输入组件 | 文本输入框、光标、基础编辑 | ✅ 已完成 |
|
||||||
| 3 | 翻译显示区 | 结果展示、格式化、滚动 | ✅ 已完成 |
|
| 3 | 翻译显示区 | 结果展示、格式化、滚动 | ✅ 已完成 |
|
||||||
| 4 | 状态栏/主题 | 底部状态栏、语言选择、主题配色 | ⏳ 待实现 |
|
| 4 | 状态栏/主题 | 底部状态栏、语言选择、主题配色 | ✅ 已完成 |
|
||||||
| 5 | 快捷键系统 | 退出、清空、切换语言等 | ⏳ 待实现 |
|
| 5 | 快捷键系统 | 退出、清空、切换语言等 | ⏳ 待实现 |
|
||||||
| 6 | 集成翻译 | 对接现有Translator、加载动画 | ⏳ 待实现 |
|
| 6 | 集成翻译 | 对接现有Translator、加载动画 | ⏳ 待实现 |
|
||||||
|
|
||||||
@@ -52,7 +53,7 @@
|
|||||||
- ✅ 模块1: TUI框架搭建 - 添加bubbletea依赖,实现基础App结构
|
- ✅ 模块1: TUI框架搭建 - 添加bubbletea依赖,实现基础App结构
|
||||||
- ✅ 模块2: 输入组件 - textinput组件、基础输入处理
|
- ✅ 模块2: 输入组件 - textinput组件、基础输入处理
|
||||||
- ✅ 模块3: 翻译显示区 - 结果显示区域、样式定义
|
- ✅ 模块3: 翻译显示区 - 结果显示区域、样式定义
|
||||||
- ⏳ 模块4: 状态栏/主题 - 待实现
|
- ✅ 模块4: 状态栏/主题 - 底部状态栏、语言显示、配色完善
|
||||||
- ⏳ 模块5: 快捷键系统 - 待实现
|
- ⏳ 模块5: 快捷键系统 - 待实现
|
||||||
- ⏳ 模块6: 集成翻译 - 待实现
|
- ⏳ 模块6: 集成翻译 - 待实现
|
||||||
|
|
||||||
@@ -66,7 +67,7 @@
|
|||||||
- [TUI界面模块拆分计划](taolun.md#2026-04-06-1000-版本-060---tui界面模块拆分计划)
|
- [TUI界面模块拆分计划](taolun.md#2026-04-06-1000-版本-060---tui界面模块拆分计划)
|
||||||
|
|
||||||
**下一步**:
|
**下一步**:
|
||||||
- 实现模块4: 状态栏/主题
|
- 实现模块5: 快捷键系统
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -13,12 +13,15 @@ type model struct {
|
|||||||
translator *translator.Translator
|
translator *translator.Translator
|
||||||
textInput textinput.Model
|
textInput textinput.Model
|
||||||
result string
|
result string
|
||||||
|
targetLang string
|
||||||
}
|
}
|
||||||
|
|
||||||
var (
|
var (
|
||||||
headerStyle = lipgloss.NewStyle().
|
headerStyle = lipgloss.NewStyle().
|
||||||
Foreground(lipgloss.Color("#00D9FF")).
|
Foreground(lipgloss.Color("#00D9FF")).
|
||||||
Bold(true)
|
Bold(true)
|
||||||
|
dividerStyle = lipgloss.NewStyle().
|
||||||
|
Foreground(lipgloss.Color("#00D9FF"))
|
||||||
inputStyle = lipgloss.NewStyle().
|
inputStyle = lipgloss.NewStyle().
|
||||||
Foreground(lipgloss.Color("#FAFAFA")).
|
Foreground(lipgloss.Color("#FAFAFA")).
|
||||||
Background(lipgloss.Color("#1A1A2E"))
|
Background(lipgloss.Color("#1A1A2E"))
|
||||||
@@ -27,9 +30,21 @@ var (
|
|||||||
Background(lipgloss.Color("#0D1B2A"))
|
Background(lipgloss.Color("#0D1B2A"))
|
||||||
helpStyle = lipgloss.NewStyle().
|
helpStyle = lipgloss.NewStyle().
|
||||||
Foreground(lipgloss.Color("#888888"))
|
Foreground(lipgloss.Color("#888888"))
|
||||||
|
statusBarStyle = lipgloss.NewStyle().
|
||||||
|
Foreground(lipgloss.Color("#FFFFFF")).
|
||||||
|
Background(lipgloss.Color("#1F2937")).
|
||||||
|
Width(60)
|
||||||
|
langStyle = lipgloss.NewStyle().
|
||||||
|
Foreground(lipgloss.Color("#FBBF24")).
|
||||||
|
Bold(true)
|
||||||
)
|
)
|
||||||
|
|
||||||
func NewApp(cfg *config.Config, t *translator.Translator) *tea.Program {
|
func NewApp(cfg *config.Config, t *translator.Translator) *tea.Program {
|
||||||
|
targetLang := "zh-CN"
|
||||||
|
if cfg != nil && cfg.DefaultTargetLang != "" {
|
||||||
|
targetLang = cfg.DefaultTargetLang
|
||||||
|
}
|
||||||
|
|
||||||
ti := textinput.New()
|
ti := textinput.New()
|
||||||
ti.Placeholder = "输入要翻译的文本..."
|
ti.Placeholder = "输入要翻译的文本..."
|
||||||
ti.Focus()
|
ti.Focus()
|
||||||
@@ -40,6 +55,7 @@ func NewApp(cfg *config.Config, t *translator.Translator) *tea.Program {
|
|||||||
config: cfg,
|
config: cfg,
|
||||||
translator: t,
|
translator: t,
|
||||||
textInput: ti,
|
textInput: ti,
|
||||||
|
targetLang: targetLang,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -66,14 +82,16 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
|
|||||||
|
|
||||||
func (m model) View() string {
|
func (m model) View() string {
|
||||||
resultBox := m.renderResult()
|
resultBox := m.renderResult()
|
||||||
helpText := helpStyle.Render("\n 按 Ctrl+C 退出 | Enter 翻译")
|
helpText := helpStyle.Render("\n Ctrl+C 退出 · Enter 翻译")
|
||||||
|
|
||||||
return "\n" +
|
return "\n" +
|
||||||
" " + headerStyle.Render("YOYO翻译") + "\n" +
|
" " + headerStyle.Render("YOYO翻译") + "\n" +
|
||||||
" " + lipgloss.NewStyle().Foreground(lipgloss.Color("#00D9FF")).Render("─────────────────────") + "\n\n" +
|
" " + dividerStyle.Render("─────────────────────") + "\n\n" +
|
||||||
" " + m.textInput.View() + "\n\n" +
|
" " + m.textInput.View() + "\n\n" +
|
||||||
resultBox +
|
resultBox +
|
||||||
helpText
|
helpText +
|
||||||
|
"\n" +
|
||||||
|
m.renderStatusBar()
|
||||||
}
|
}
|
||||||
|
|
||||||
func (m model) renderResult() string {
|
func (m model) renderResult() string {
|
||||||
@@ -82,3 +100,11 @@ func (m model) renderResult() string {
|
|||||||
}
|
}
|
||||||
return " " + resultStyle.Render(m.result) + "\n"
|
return " " + resultStyle.Render(m.result) + "\n"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
func (m model) renderStatusBar() string {
|
||||||
|
divider := dividerStyle.Render("─")
|
||||||
|
langInfo := langStyle.Render("目标: " + m.targetLang)
|
||||||
|
|
||||||
|
return "\n " + divider + "\n" +
|
||||||
|
" " + statusBarStyle.Render(" "+langInfo+" ")
|
||||||
|
}
|
||||||
|
|||||||
20
taolun.md
20
taolun.md
@@ -498,5 +498,25 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
|
|||||||
|
|
||||||
**下一步**: 实现模块4: 状态栏/主题
|
**下一步**: 实现模块4: 状态栏/主题
|
||||||
|
|
||||||
|
**关联文档**:
|
||||||
|
- [changelog.md#0.6.0](changelog.md#060)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### [2026-04-06 12:00] 版本 0.6.0 - 模块4: 状态栏/主题 (已完成)
|
||||||
|
**原因**: 添加底部状态栏和主题配色
|
||||||
|
**分析**:
|
||||||
|
- 需要显示当前目标语言
|
||||||
|
- 需要完善配色方案
|
||||||
|
- 需要定义状态栏样式
|
||||||
|
|
||||||
|
**解决方案**:
|
||||||
|
1. 添加targetLang字段到model
|
||||||
|
2. 定义statusBarStyle、langStyle等新样式
|
||||||
|
3. 实现renderStatusBar()方法
|
||||||
|
4. View中渲染状态栏
|
||||||
|
|
||||||
|
**下一步**: 实现模块5: 快捷键系统
|
||||||
|
|
||||||
**关联文档**:
|
**关联文档**:
|
||||||
- [changelog.md#0.6.0](changelog.md#060)
|
- [changelog.md#0.6.0](changelog.md#060)
|
||||||
Reference in New Issue
Block a user