style(tui): polish panels, menu list and content body

src/tju/tui/app.tcss

@@ -1,6 +1,8 @@
-/* ──────────────────────────────────────────────────────────────────────────
-   TJU TUI — lazygit / nvim-inspired stylesheet
-   ────────────────────────────────────────────────────────────────────────── */
+/* ─────────────────────────────────────────────────────────────────────────
+   TJU TUI — lazygit / Claude Code style dark stylesheet
+   ───────────────────────────────────────────────────────────────────────── */
+
+/* ══════ Base ══════════════════════════════════════════════════════════════ */
 
 Screen {
     background: $background;
@@ -67,9 +69,8 @@ LoginScreen Input:focus {
     display: block;
 }
 
-/* ════════════════════════════════════════════════════════════════════════
-   Main screen — two bordered panels
-   ════════════════════════════════════════════════════════════════════════ */
+/* ══════ Main layout ════════════════════════════════════════════════════════ */
+
 MainScreen {
     layout: vertical;
 }
@@ -79,9 +80,10 @@ MainScreen {
     height: 1fr;
 }
 
-/* ── Panels: dim by default, accent border when focused (lazygit style) ─── */
+/* ══════ Panels ═════════════════════════════════════════════════════════════ */
+
 #menu-panel {
-    width: 24;
+    width: 22;
     height: 1fr;
     border: round $primary-darken-2;
     border-title-color: $text-muted;
@@ -99,6 +101,7 @@ MainScreen {
     padding: 0;
 }
 
+/* Active panel: bright accent border, like lazygit */
 #menu-panel:focus-within {
     border: round $accent;
     border-title-color: $accent;
@@ -109,43 +112,61 @@ MainScreen {
     border-title-color: $accent;
 }
 
-/* ── Menu list ──────────────────────────────────────────────────────────── */
+/* ══════ Menu list ══════════════════════════════════════════════════════════ */
+
 #menu {
     background: transparent;
     height: 1fr;
+    scrollbar-size: 0 0;
 }
 
+/* Default items: muted, indented 2 chars */
 #menu > ListItem {
-    padding: 0 1;
+    padding: 0 1 0 2;
     background: transparent;
-    color: $text;
+    color: $text-muted;
+    height: 1;
 }
 
+/* Highlighted but panel not focused: subtle surface highlight */
 #menu > ListItem.-highlight {
-    background: $accent 20%;
-    color: $accent;
-    text-style: bold;
+    background: $surface;
+    color: $text;
+    border-left: tall $primary;
+    padding-left: 1;
 }
 
+/* Highlighted and panel focused: bright accent highlight */
 #menu:focus > ListItem.-highlight {
-    background: $accent;
-    color: $background;
+    background: $accent 22%;
+    color: $accent;
     text-style: bold;
+    border-left: tall $accent;
+    padding-left: 1;
 }
 
-/* ── Content body ───────────────────────────────────────────────────────── */
+/* ══════ Content body ═══════════════════════════════════════════════════════ */
+
 #content-body {
     height: 1fr;
     padding: 1 2;
     background: transparent;
 }
 
+/* Prevent VerticalScroll from showing a bright focus background */
+VerticalScroll:focus {
+    background: transparent;
+}
+
 .hint {
     color: $text-muted;
+    padding: 2 0;
+    text-align: center;
+    width: 100%;
 }
 
 .result-header {
-    color: $accent;
+    color: $text-muted;
     text-style: bold;
     margin-bottom: 1;
 }
@@ -168,7 +189,8 @@ DataTable > .datatable--cursor {
     color: $background;
 }
 
-/* ── Parameter bar (semester) ───────────────────────────────────────────── */
+/* ══════ Parameter bar ══════════════════════════════════════════════════════ */
+
 .param-bar {
     height: auto;
     margin-bottom: 1;
@@ -178,12 +200,13 @@ DataTable > .datatable--cursor {
 .param-label {
     width: auto;
     color: $text-muted;
-    padding: 1 1 0 0;
+    padding: 0 1 0 0;
 }
 
 .param-input {
     width: 18;
     border: tall $primary-darken-2;
+    background: $background;
 }
 
 .param-input:focus {
@@ -193,33 +216,39 @@ DataTable > .datatable--cursor {
 .param-hint {
     width: auto;
     color: $text-muted;
-    padding: 1 0 0 2;
+    padding: 0 0 0 2;
 }
 
-/* ── Forms (settings / classroom) ───────────────────────────────────────── */
+/* ══════ Forms ══════════════════════════════════════════════════════════════ */
+
 .form {
     height: auto;
+    padding: 0;
 }
 
 .form-label {
     color: $text-muted;
     margin-top: 1;
+    margin-bottom: 0;
 }
 
 .form .param-input {
     width: 36;
 }
 
-/* ── Error box ──────────────────────────────────────────────────────────── */
+/* ══════ Error box ══════════════════════════════════════════════════════════ */
+
 .error-box {
     color: $error;
     border: round $error;
     padding: 1 2;
-    margin-top: 1;
+    margin: 1 0;
 }
 
-/* ── Loading ────────────────────────────────────────────────────────────── */
+/* ══════ Loading ════════════════════════════════════════════════════════════ */
+
 LoadingIndicator {
     height: 3;
     background: transparent;
+    color: $accent;
 }

src/tju/tui/screens/main.py

@@ -94,7 +94,7 @@ def compose(self) -> ComposeResult:
             content.border_title = "TJU"
             with content:
                 yield VerticalScroll(
-                    Static("\n  ← 从左侧选择功能\n", classes="hint"),
+                    Static("← 选择左侧功能", classes="hint"),
                     id="content-body",
                 )
         yield Footer()