feat(ui): 添加编辑弹窗并优化字段切换逻辑

KercyDing · KercyDing · commit 98d6819fa502 · 2026-03-02T01:17:57.000+08:00
diff --git a/tui/src/state.rs b/tui/src/state.rs
@@ -180,16 +180,16 @@ impl AppState {
         match key.code {
             KeyCode::Esc => {
                 self.input_mode = InputMode::Normal;
-                // 中继 tab 退出编辑时自动保存
+                // 中继弹窗关闭时仅持久化 URL 文本，不切换中继（Enter 才应用）
                 if self.tab == ActiveTab::Relay {
-                    self.apply_relay();
+                    self.persist_relay_url();
                 }
             }
-            KeyCode::Tab => {
-                self.next_field();
+            KeyCode::Up => {
+                self.prev_field_clamped();
             }
-            KeyCode::BackTab => {
-                self.prev_field();
+            KeyCode::Down => {
+                self.next_field_clamped();
             }
             KeyCode::Backspace => {
                 self.active_input_mut().backspace();
@@ -264,7 +264,11 @@ impl AppState {
                 Step::Continue
             }
             KeyCode::Char('i') => {
-                if self.focus == FocusPane::Profile {
+                let can_edit = match self.tab {
+                    ActiveTab::Relay => self.relay_state.selected() == Some(1),
+                    _ => true,
+                };
+                if can_edit {
                     self.input_mode = InputMode::Editing;
                 }
                 Step::Continue
@@ -604,31 +608,71 @@ impl AppState {
             ActiveTab::Host => {
                 self.host_field = match self.host_field {
                     HostField::Port => HostField::Password,
-                    HostField::Password => HostField::Port,
+                    HostField::Password => HostField::Password,
                 };
             }
             ActiveTab::Join => {
                 self.join_field = match self.join_field {
                     JoinField::Ticket => JoinField::Port,
                     JoinField::Port => JoinField::Password,
-                    JoinField::Password => JoinField::Ticket,
+                    JoinField::Password => JoinField::Password,
                 };
             }
             ActiveTab::Relay => {}
         }
     }
 
     fn prev_field(&mut self) {
+        match self.tab {
+            ActiveTab::Host => {
+                self.host_field = match self.host_field {
+                    HostField::Port => HostField::Port,
+                    HostField::Password => HostField::Port,
+                };
+            }
+            ActiveTab::Join => {
+                self.join_field = match self.join_field {
+                    JoinField::Ticket => JoinField::Ticket,
+                    JoinField::Port => JoinField::Ticket,
+                    JoinField::Password => JoinField::Port,
+                };
+            }
+            ActiveTab::Relay => {}
+        }
+    }
+
+    /// 编辑模式下向后切换字段，到末尾停止。
+    fn next_field_clamped(&mut self) {
         match self.tab {
             ActiveTab::Host => {
                 self.host_field = match self.host_field {
                     HostField::Port => HostField::Password,
+                    HostField::Password => HostField::Password,
+                };
+            }
+            ActiveTab::Join => {
+                self.join_field = match self.join_field {
+                    JoinField::Ticket => JoinField::Port,
+                    JoinField::Port => JoinField::Password,
+                    JoinField::Password => JoinField::Password,
+                };
+            }
+            ActiveTab::Relay => {}
+        }
+    }
+
+    /// 编辑模式下向前切换字段，到首位停止。
+    fn prev_field_clamped(&mut self) {
+        match self.tab {
+            ActiveTab::Host => {
+                self.host_field = match self.host_field {
+                    HostField::Port => HostField::Port,
                     HostField::Password => HostField::Port,
                 };
             }
             ActiveTab::Join => {
                 self.join_field = match self.join_field {
-                    JoinField::Ticket => JoinField::Password,
+                    JoinField::Ticket => JoinField::Ticket,
                     JoinField::Port => JoinField::Ticket,
                     JoinField::Password => JoinField::Port,
                 };
@@ -637,6 +681,19 @@ impl AppState {
         }
     }
 
+    /// 弹窗关闭时将 relay URL 写入配置文件（仅持久化，不切换中继）。
+    /// URL 为空或格式无效时记录日志但不中断流程。
+    fn persist_relay_url(&mut self) {
+        let url = self.relay_url.value.trim().to_string();
+        if url.is_empty() {
+            return;
+        }
+        let conf_path = config::default_relay_conf_path();
+        if let Err(e) = config::save_relay_url(&conf_path, &url) {
+            self.add_log(&format!("URL 格式无效，未保存: {e}"));
+        }
+    }
+
     // ---- 日志与列表 ----
 
     pub fn clear_logs(&mut self) {
@@ -684,14 +741,15 @@ impl AppState {
     pub fn next_relay_selection(&mut self) {
         let next = match self.relay_state.selected() {
             Some(i) if i + 1 < RELAYS.len() => i + 1,
-            _ => 0,
+            Some(i) => i,
+            None => 0,
         };
         self.relay_state.select(Some(next));
     }
 
     pub fn prev_relay_selection(&mut self) {
         let prev = match self.relay_state.selected() {
-            Some(0) | None => RELAYS.len() - 1,
+            Some(0) | None => 0,
             Some(i) => i - 1,
         };
         self.relay_state.select(Some(prev));
diff --git a/tui/src/ui/mod.rs b/tui/src/ui/mod.rs
@@ -31,6 +31,7 @@ pub fn render(frame: &mut ratatui::Frame<'_>, state: &mut AppState) {
     render_main(frame, layout[1], state);
     footer::render_footer(frame, layout[2], state);
     popup::render_help_popup(frame, area, state);
+    popup::render_edit_popup(frame, area, state);
 }
 
 fn render_main(frame: &mut ratatui::Frame<'_>, area: ratatui::layout::Rect, state: &mut AppState) {
diff --git a/tui/src/ui/popup.rs b/tui/src/ui/popup.rs
@@ -1,12 +1,13 @@
-//! 帮助弹窗与 centered_rect 工具。
+//! 帮助弹窗、编辑弹窗与 centered_rect 工具。
 
 use ratatui::layout::{Constraint, Layout, Margin, Rect};
-use ratatui::style::{Modifier, Style};
+use ratatui::style::{Color, Modifier, Style};
 use ratatui::text::{Line, Span, Text};
 use ratatui::widgets::{Block, BorderType, Borders, Clear, Paragraph};
 
 use super::theme::{ACCENT, INFO, PANEL_ALT};
-use crate::state::AppState;
+use crate::input::InputField;
+use crate::state::{ActiveTab, AppState, HostField, InputMode, JoinField};
 
 pub fn render_help_popup(frame: &mut ratatui::Frame<'_>, area: Rect, state: &AppState) {
     if !state.show_help {
@@ -101,3 +102,162 @@ pub fn centered_rect(width_percent: u16, height_percent: u16, area: Rect) -> Rec
     ])
     .split(vertical[1])[1]
 }
+
+/// 编辑弹窗：InputMode::Editing 时覆盖主面板，lazyvim 风格。
+pub fn render_edit_popup(frame: &mut ratatui::Frame<'_>, area: Rect, state: &AppState) {
+    if state.input_mode != InputMode::Editing {
+        return;
+    }
+
+    let fields = edit_fields(state);
+    let popup_h = (fields.len() * 3 + 4) as u16;
+
+    // 垂直居中（绝对高度）
+    let vert = Layout::vertical([
+        Constraint::Fill(1),
+        Constraint::Length(popup_h),
+        Constraint::Fill(1),
+    ])
+    .split(area);
+
+    // 水平居中（60% 宽度）
+    let horiz = Layout::horizontal([
+        Constraint::Fill(1),
+        Constraint::Percentage(60),
+        Constraint::Fill(1),
+    ])
+    .split(vert[1]);
+
+    let popup = horiz[1];
+    frame.render_widget(Clear, popup);
+
+    let title = match state.tab {
+        ActiveTab::Host => "编辑 · 建房配置",
+        ActiveTab::Join => "编辑 · 加入配置",
+        ActiveTab::Relay => "编辑 · 中继 URL",
+    };
+
+    let block = Block::default()
+        .title(title)
+        .borders(Borders::ALL)
+        .border_type(BorderType::Rounded)
+        .style(Style::default().bg(PANEL_ALT))
+        .border_style(Style::default().fg(ACCENT));
+    frame.render_widget(block, popup);
+
+    // inner 减去边框后再加 2 列内边距
+    let inner = popup.inner(Margin::new(2, 1));
+
+    // 1 顶部空行 + 每字段 3 行（label/value/spacer）+ 1 hint 行
+    let mut constraints = vec![Constraint::Length(1)];
+    for _ in &fields {
+        constraints.push(Constraint::Length(1));
+        constraints.push(Constraint::Length(1));
+        constraints.push(Constraint::Length(1));
+    }
+    constraints.push(Constraint::Length(1));
+    let rows = Layout::vertical(constraints).split(inner);
+
+    for (i, (label, field, is_active)) in fields.iter().enumerate() {
+        let base = 1 + i * 3;
+        let label_row = rows[base];
+        let value_row = rows[base + 1];
+
+        let label_style = if *is_active {
+            Style::default().fg(ACCENT).add_modifier(Modifier::BOLD)
+        } else {
+            Style::default().fg(Color::DarkGray)
+        };
+        frame.render_widget(
+            Paragraph::new(Span::styled(*label, label_style)),
+            label_row,
+        );
+
+        let max_w = value_row.width as usize;
+        let chars: Vec<char> = field.value.chars().collect();
+        let char_count = chars.len();
+
+        let (display, cursor_offset) = if *is_active {
+            let cursor_char = field.value[..field.cursor].chars().count();
+            if char_count == 0 {
+                // 空值时显示单空格让光标有位置
+                (" ".to_string(), 0usize)
+            } else {
+                // 保持光标可见的滑动窗口
+                let start = if cursor_char >= max_w {
+                    cursor_char - max_w + 1
+                } else {
+                    0
+                };
+                let end = (start + max_w).min(char_count);
+                let s: String = chars[start..end].iter().collect();
+                (s, cursor_char - start)
+            }
+        } else if field.value.is_empty() {
+            ("(空)".to_string(), 0)
+        } else if char_count <= max_w {
+            (field.value.clone(), 0)
+        } else {
+            let mut s: String = chars[..max_w.saturating_sub(1)].iter().collect();
+            s.push('…');
+            (s, 0)
+        };
+
+        let value_style = if *is_active {
+            Style::default()
+                .fg(Color::White)
+                .add_modifier(Modifier::UNDERLINED)
+        } else {
+            Style::default().fg(Color::Gray)
+        };
+        frame.render_widget(
+            Paragraph::new(Span::styled(display, value_style)),
+            value_row,
+        );
+
+        if *is_active {
+            frame.set_cursor_position((value_row.x + cursor_offset as u16, value_row.y));
+        }
+    }
+
+    let hint_row = rows[1 + fields.len() * 3];
+    frame.render_widget(
+        Paragraph::new(Span::styled(
+            "[↑/↓] 切换字段  [Esc] 保存",
+            Style::default().fg(Color::DarkGray),
+        )),
+        hint_row,
+    );
+}
+
+/// 返回当前 tab 的可编辑字段列表：(标签, 字段引用, 是否活跃)。
+fn edit_fields<'a>(state: &'a AppState) -> Vec<(&'static str, &'a InputField, bool)> {
+    match state.tab {
+        ActiveTab::Host => vec![
+            ("端口", &state.host_port, state.host_field == HostField::Port),
+            (
+                "密码",
+                &state.host_password,
+                state.host_field == HostField::Password,
+            ),
+        ],
+        ActiveTab::Join => vec![
+            (
+                "票据",
+                &state.join_ticket,
+                state.join_field == JoinField::Ticket,
+            ),
+            (
+                "端口",
+                &state.join_port,
+                state.join_field == JoinField::Port,
+            ),
+            (
+                "密码",
+                &state.join_password,
+                state.join_field == JoinField::Password,
+            ),
+        ],
+        ActiveTab::Relay => vec![("中继 URL", &state.relay_url, true)],
+    }
+}
diff --git a/tui/src/ui/tabs.rs b/tui/src/ui/tabs.rs

Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,7 @@ pub fn render(frame: &mut ratatui::Frame<'_>, state: &mut AppState) {`
`31`	`31`	`render_main(frame, layout[1], state);`
`32`	`32`	`footer::render_footer(frame, layout[2], state);`
`33`	`33`	`popup::render_help_popup(frame, area, state);`
	`34`	`+ popup::render_edit_popup(frame, area, state);`
`34`	`35`	`}`
`35`	`36`
`36`	`37`	`fn render_main(frame: &mut ratatui::Frame<'_>, area: ratatui::layout::Rect, state: &mut AppState) {`