fix: 回到 grid 布局 + 顶部留空行 — 5行: 空/标题/状态栏/主区/输入

grid-rows: 1 1 auto 1fr 3
- Row 1: 空白行
- Row 2: 标题栏 (Static, bold)
- Row 3: 状态栏 (auto 高度)
- Row 4: 主显示区 (1fr 填满剩余)
- Row 5: 输入栏 (固定3行)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
qinglong
2026-06-13 12:17:30 +08:00
parent ae8586bc4a
commit feca81842b
+18 -18
View File
@@ -552,11 +552,15 @@ class TUIFramework(App):
def _generate_css(self):
"""动态生成 CSS — dock 布局:标题 + 状态栏 + 主内容 + 底部输入"""
"""动态生成 CSS — grid 布局:空行 + 标题 + 状态栏 + 主内容 + 底部输入"""
return """
Screen {
layout: grid;
grid-size: 1 5;
grid-rows: 1 1 auto 1fr 3;
}
#title-bar {
dock: top;
height: 1;
padding: 0 1;
background: $panel;
color: $text;
@@ -564,18 +568,9 @@ class TUIFramework(App):
}
#monitor-area {
dock: top;
padding: 1 1 0 1;
padding: 0 1;
background: $panel;
color: $text;
height: auto;
}
#input-area {
dock: bottom;
padding: 0 1;
height: 3;
align: center bottom;
}
#main-area {
@@ -584,6 +579,10 @@ class TUIFramework(App):
border: solid $primary;
}
#input-area {
padding: 0 1;
}
ScrollableContainer {
scrollbar-color: #666 #222;
scrollbar-color-hover: #888 #333;
@@ -596,14 +595,15 @@ class TUIFramework(App):
"""
def compose(self):
"""组合界面 — 标题 + 状态栏 / 主显示区 / 底部输入"""
yield self.title_bar
yield Container(
"""组合界面 — 空行 + 标题 + 状态栏 + 主显示区 + 底部输入"""
yield Static("") # Row 1: blank
yield self.title_bar # Row 2: title
yield Container( # Row 3: monitor
self.system_monitor,
self.plugin_panel,
id="monitor-area",
)
yield ScrollableContainer(
yield ScrollableContainer( # Row 4: main (1fr)
self.log_display,
id="main-area",
)
@@ -613,7 +613,7 @@ class TUIFramework(App):
suggester=self.command_suggester,
id="command-input",
)
yield Container(
yield Container( # Row 5: input (3 rows)
self.command_input,
id="input-area",
)