Improve panel layout and per-user installer

.openclaw/settings.json

@@ -1,35 +0,0 @@
-{
-  "hooks": {
-    "pre-exec": [
-      {
-        "matcher": "",
-        "command": "scale gate pre-tool Bash --args-json \"$ARGS\" --session-id \"$SESSION_ID\""
-      },
-      {
-        "matcher": "edit|write",
-        "command": "scale gate pre-tool Edit --args-json \"$ARGS\" --session-id \"$SESSION_ID\""
-      }
-    ],
-    "post-exec": [
-      {
-        "matcher": "edit|write",
-        "command": "scale gate post-tool Edit --args-json \"$ARGS\" --exit-code \"$EXIT_CODE\" --session-id \"$SESSION_ID\""
-      },
-      {
-        "matcher": "",
-        "command": "scale gate post-tool Bash --args-json \"$ARGS\" --exit-code \"$EXIT_CODE\" --session-id \"$SESSION_ID\""
-      }
-    ],
-    "before-stop": [
-      {
-        "matcher": "",
-        "command": "scale gate before-stop --session-id \"$SESSION_ID\""
-      }
-    ]
-  },
-  "permissions": {
-    "allow": [
-      "scale:*"
-    ]
-  }
-}

Cargo.lock

@@ -1304,7 +1304,7 @@ checksum = "dea2df4cf52843e0452895c455a1a2cfbb842a1e7329671acf418fdc53ed4c59"
 
 [[package]]
 name = "eskin-model-player"
-version = "0.5.0"
+version = "5.0.0"
 dependencies = [
  "anyhow",
  "bytemuck",

Cargo.toml

@@ -1,9 +1,14 @@
 [package]
 name = "eskin-model-player"
-version = "0.5.0"
+version = "5.0.0"
 edition = "2024"
+authors = ["JOYSONQUIN"]
+description = "Desktop pressure sensor visualization and playback application."
 build = "build.rs"
 
+[package.metadata.wix]
+eula = false
+
 [dependencies]
 eframe = { version = "0.34.2", features = ["default", "wgpu", "__screenshot"] }
 env_logger = { version = "0.11.10", features = ["auto-color", "humantime"] }
@@ -22,3 +27,8 @@ gltf = "1.4.1"
 [build-dependencies]
 anyhow = "1.0.102"
 fs_extra = "1.3.0"
+
+
+[[bin]]
+name = "ESkinPlayer"
+path = "src/main.rs"

src/app.rs

@@ -13,14 +13,16 @@ use crate::{
     },
     ui::{
         ConfigPanelState, ConnectPanelState, FloatingPanelState, MatrixConfigState,
-        draw_config_panel, draw_export_panel, draw_matrix_config_panel, draw_stats_panel,
+        draw_config_panel, draw_export_panel, draw_hand_force_panels, draw_matrix_config_panel,
-        panel_restore_item,
+        draw_stats_panel, panel_restore_item,
     },
 };
 use eframe::{egui, egui_wgpu};
 use std::sync::Arc;
 
 const SUMMARY_POINTS_PER_SERIES: usize = 42;
+const HAND_FORCE_PANEL_COUNT: usize = 7;
+const HAND_FORCE_SEGMENT_COUNTS: [usize; HAND_FORCE_PANEL_COUNT] = [84, 84, 84, 84, 84, 70, 44];
 
 pub struct EskinDesktopApp {
     connect_panel: FloatingPanelState,
@@ -39,6 +41,7 @@ pub struct EskinDesktopApp {
     matrix_config_panel: FloatingPanelState,
     matrix_config: MatrixConfigState,
     signal_history: Vec<f32>,
+    hand_signal_histories: [Vec<f32>; HAND_FORCE_PANEL_COUNT],
     force_estimator: ForceEstimatorState,
     latest_spatial_force: Option<HudSpatialForce>,
     latest_raw_matrix: Vec<u32>,
@@ -104,6 +107,7 @@ impl EskinDesktopApp {
             ),
             matrix_config: MatrixConfigState::default(),
             signal_history: Vec::with_capacity(128),
+            hand_signal_histories: std::array::from_fn(|_| Vec::with_capacity(128)),
             force_estimator: ForceEstimatorState::new(),
             latest_spatial_force: None,
             latest_raw_matrix: Vec::new(),
@@ -226,9 +230,6 @@ impl EskinDesktopApp {
             self.latest_matrix_rows = sample.rows;
             self.latest_matrix_cols = sample.cols;
 
-            // Feed data to recorder
-            self.recorder.add_frame(&sample.matrix);
-
             self.latest_spatial_force = self.force_estimator.analyze(&sample.matrix);
 
             // Keep JE-Skin's summary path separate from the optional spatial-force vector.
@@ -243,6 +244,10 @@ impl EskinDesktopApp {
             if self.signal_history.len() > SUMMARY_POINTS_PER_SERIES {
                 self.signal_history.remove(0);
             }
+
+            if self.config_state.mode == SerialMode::Hand {
+                update_hand_signal_histories(&mut self.hand_signal_histories, &sample.matrix);
+            }
         }
     }
 
@@ -359,20 +364,34 @@ impl EskinDesktopApp {
 
     fn draw_floating_panels(&mut self, ctx: &egui::Context) {
         // draw_scene_panel(ctx, &mut self.scene_panel);
+        // if self.config_state.mode == SerialMode::Hand && self.stats_panel.visible {
+        //     self.config_panel.visible = false;
+        //     self.export_panel.visible = false;
+        //     self.matrix_config_panel.visible = false;
+        // }
+
         if let Some(next_mode) = draw_config_panel(
             ctx,
             &mut self.config_panel,
             &mut self.config_state,
             &self.connection,
+            &self.recorder,
         ) {
             self.switch_mode(next_mode);
         }
-        draw_stats_panel(
+        match self.config_state.mode {
-            ctx,
+            SerialMode::Finger => {
-            &mut self.stats_panel,
+                draw_stats_panel(
-            &self.signal_history,
+                    ctx,
-            self.latest_spatial_force,
+                    &mut self.stats_panel,
-        );
+                    &self.signal_history,
+                    self.latest_spatial_force,
+                );
+            }
+            SerialMode::Hand => {
+                draw_hand_force_panels(ctx, self.stats_panel.visible, &self.hand_signal_histories);
+            }
+        }
         draw_export_panel(
             ctx,
             &mut self.export_panel,
@@ -415,15 +434,40 @@ impl EskinDesktopApp {
                     panel_restore_item(ui, "配置", &mut self.config_panel);
                     panel_restore_item(ui, "录制", &mut self.export_panel);
                     panel_restore_item(ui, "矩阵", &mut self.matrix_config_panel);
-                    panel_restore_item(ui, "统计", &mut self.stats_panel);
+                    if self.stats_panel.visible {
-                    if ui.button("打砖块").clicked() {
+                        if ui
+                            .add_sized(
+                                egui::vec2(ui.available_width(), 0.0),
+                                egui::Button::new("隐藏 统计"),
+                            )
+                            .clicked()
+                        {
+                            self.stats_panel.visible = false;
+                            close_menu = true;
+                        }
+                    } else {
+                        panel_restore_item(ui, "统计", &mut self.stats_panel);
+                    }
+                    if ui
+                        .add_sized(
+                            egui::vec2(ui.available_width(), 0.0),
+                            egui::Button::new("打砖块"),
+                        )
+                        .clicked()
+                    {
                         self.breakout_visible = true;
                         close_menu = true;
                     }
 
                     ui.separator();
 
-                    if ui.button("全部显示").clicked() {
+                    if ui
+                        .add_sized(
+                            egui::vec2(ui.available_width(), 0.0),
+                            egui::Button::new("全部显示"),
+                        )
+                        .clicked()
+                    {
                         self.config_panel.visible = true;
                         self.export_panel.visible = true;
                         self.matrix_config_panel.visible = true;
@@ -456,6 +500,9 @@ impl EskinDesktopApp {
         self.force_estimator.reset();
         self.latest_spatial_force = None;
         self.signal_history.clear();
+        self.hand_signal_histories
+            .iter_mut()
+            .for_each(|history| history.clear());
 
         self.active_mode = match next {
             SerialMode::Finger => ActiveMode::Finger(FingerMode {
@@ -469,6 +516,30 @@ impl EskinDesktopApp {
     }
 }
 
+fn update_hand_signal_histories(
+    histories: &mut [Vec<f32>; HAND_FORCE_PANEL_COUNT],
+    raw_values: &[u32],
+) {
+    let mut offset = 0usize;
+    for (history, sample_count) in histories.iter_mut().zip(HAND_FORCE_SEGMENT_COUNTS) {
+        let raw_total = raw_values
+            .get(offset..offset + sample_count)
+            .unwrap_or(&[])
+            .iter()
+            .fold(0_u64, |sum, value| sum + *value as u64)
+            .min(u32::MAX as u64) as u32;
+        let force = raw_to_g1(raw_total).min(25.6);
+        let force = if force <= 0.1 { 0.0 } else { force };
+
+        history.push(force);
+        if history.len() > SUMMARY_POINTS_PER_SERIES {
+            history.remove(0);
+        }
+
+        offset += sample_count;
+    }
+}
+
 fn raw_to_g1(raw: u32) -> f32 {
     const RAW: [u32; 12] = [
         0, 21382, 108507, 123183, 147405, 171105, 192395, 250443, 231423, 350560, 396616, 429444,

src/connection.rs

@@ -4,6 +4,7 @@ use std::time::Duration;
 
 use crossbeam_channel::{self, Receiver, Sender, TryRecvError};
 
+use crate::recording::Recorder;
 use crate::serial_core::serial::{
     SerialIoStats, SerialPortReadWrite, SerialProtocol, run_serial_loop,
 };
@@ -83,6 +84,7 @@ impl ConnectionManager {
         cols: u32,
         baud_rate: u32,
         protocol: SerialProtocol,
+        recorder: Recorder,
     ) {
         self.disconnect();
         self.set_state(ConnectionState::Connecting);
@@ -108,6 +110,7 @@ impl ConnectionManager {
                 &sample_tx,
                 &stats_tx,
                 &latest_sample,
+                recorder,
             );
             if let Err(e) = result {
                 eprintln!("[connection] device loop error: {e}");
@@ -187,9 +190,10 @@ fn run_device_loop(
     sample_tx: &Sender<Vec<i32>>,
     stats_tx: &Sender<SerialIoStats>,
     latest_sample: &Arc<Mutex<Option<PressureSample>>>,
+    recorder: Recorder,
 ) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
     let port = serialport::new(port_name, baud_rate)
-        .timeout(Duration::from_millis(100))
+        .timeout(Duration::from_millis(1))
         .open()?;
 
     *state.lock().unwrap() = ConnectionState::Connected;
@@ -205,6 +209,7 @@ fn run_device_loop(
         cancel_rx,
         sample_tx,
         Some(stats_tx),
+        Some(&recorder),
     );
 
     if let Ok(mut latest) = latest_sample.lock() {

src/main.rs

@@ -1,5 +1,5 @@
 #![allow(dead_code)]
-
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 mod app;
 mod breakout;
 mod connection;

src/serial_core/serial.rs

@@ -1,3 +1,4 @@
+use crate::recording::Recorder;
 use crate::serial_core::codec::Codec;
 use crate::serial_core::codecs::hand_gateway::{HandGatewayCodec, HandGatewayFrame};
 use crate::serial_core::codecs::tactile_a::TactileACodec;
@@ -6,7 +7,7 @@ use crossbeam_channel::{Receiver, Sender};
 use std::io::{Read, Write};
 use std::time::{Duration, Instant};
 
-const POLL_INTERVAL_MS: u64 = 10;
+const POLL_INTERVAL_MS: u64 = 5;
 const DEFAULT_HAND_GATEWAY_NODE_SAMPLE_COUNTS: &[u16] = &[84, 84, 84, 84, 84, 70, 44];
 
 #[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
@@ -31,12 +32,15 @@ pub fn run_serial_loop(
     cancel_rx: &Receiver<()>,
     sample_tx: &Sender<Vec<i32>>,
     stats_tx: Option<&Sender<SerialIoStats>>,
+    recorder: Option<&Recorder>,
 ) {
     match protocol {
         SerialProtocol::TactileA => {
-            run_tactile_a_loop(port, rows, cols, cancel_rx, sample_tx, stats_tx)
+            run_tactile_a_loop(port, rows, cols, cancel_rx, sample_tx, stats_tx, recorder)
+        }
+        SerialProtocol::HandGateway => {
+            run_hand_gateway_loop(port, cancel_rx, sample_tx, stats_tx, recorder)
         }
-        SerialProtocol::HandGateway => run_hand_gateway_loop(port, cancel_rx, sample_tx, stats_tx),
     }
 }
 
@@ -47,6 +51,7 @@ fn run_tactile_a_loop(
     cancel_rx: &Receiver<()>,
     sample_tx: &Sender<Vec<i32>>,
     stats_tx: Option<&Sender<SerialIoStats>>,
+    recorder: Option<&Recorder>,
 ) {
     let session_started_at = Instant::now();
     let mut codec = TactileACodec::new(cols, rows);
@@ -90,6 +95,11 @@ fn run_tactile_a_loop(
                         for frame in frames {
                             if let TactileAFrame::Rep(rep) = frame {
                                 if let Ok(vals) = TactileACodec::parse_data_frame(&rep.payload) {
+                                    if let Some(recorder) = recorder {
+                                        let pressures: Vec<u32> =
+                                            vals.iter().map(|v| (*v).max(0) as u32).collect();
+                                        recorder.add_frame(&pressures);
+                                    }
                                     let _ = sample_tx.try_send(vals);
                                 }
                             }
@@ -116,6 +126,7 @@ fn run_hand_gateway_loop(
     cancel_rx: &Receiver<()>,
     sample_tx: &Sender<Vec<i32>>,
     stats_tx: Option<&Sender<SerialIoStats>>,
+    recorder: Option<&Recorder>,
 ) {
     let session_started_at = Instant::now();
     let mut codec = HandGatewayCodec::new(DEFAULT_HAND_GATEWAY_NODE_SAMPLE_COUNTS);
@@ -174,6 +185,11 @@ fn run_hand_gateway_loop(
 
                             if parse_ok {
                                 // println!("[hand-packet-values] samples={}", vals.len());
+                                if let Some(recorder) = recorder {
+                                    let pressures: Vec<u32> =
+                                        vals.iter().map(|v| (*v).max(0) as u32).collect();
+                                    recorder.add_frame(&pressures);
+                                }
                                 let _ = sample_tx.try_send(vals);
                             }
                         }

src/style.rs

@@ -1,4 +1,4 @@
-use eframe::egui;
+use eframe::egui::{self, Color32};
 
 #[derive(Clone, Copy)]
 pub struct AppTheme {
@@ -29,7 +29,7 @@ pub struct DesignMetrics {
 }
 
 pub const ONE_DARK_PRO: AppTheme = AppTheme {
-    bg: egui::Color32::from_rgb(30, 40, 50),
+    bg: egui::Color32::BLACK,
     panel: egui::Color32::from_rgb(22, 28, 35),
     panel_strong: egui::Color32::from_rgb(34, 43, 54),
     panel_deep: egui::Color32::from_rgb(15, 20, 27),
@@ -213,6 +213,19 @@ pub fn tag_button(label: impl Into<egui::WidgetText>) -> egui::Button<'static> {
         .min_size(egui::vec2(0.0, METRICS.button_height))
 }
 
+pub fn rich_tag_button(
+    label: impl Into<String>,
+    color: impl Into<Color32>,
+) -> egui::Button<'static> {
+    let text = egui::RichText::new(label.into()).color(color);
+
+    egui::Button::new(text)
+        .fill(ONE_DARK_PRO.panel_strong)
+        .stroke(egui::Stroke::new(1.0, ONE_DARK_PRO.border))
+        .corner_radius(egui::CornerRadius::same(4))
+        .min_size(egui::vec2(0.0, METRICS.button_height))
+}
+
 pub fn primary_button(label: impl Into<egui::WidgetText>) -> egui::Button<'static> {
     egui::Button::new(label)
         .fill(ONE_DARK_PRO.accent)

src/ui.rs

@@ -7,7 +7,7 @@ use crate::{
     serial_core::serial::{SerialIoStats, SerialProtocol},
     style::{
         self, ACCENT_BLUE, ACCENT_GREEN, ACCENT_ORANGE, ACCENT_RED, METRICS, ONE_DARK_PRO,
-        dim_text, group_frame, layout, panel_frame, tag_button,
+        dim_text, group_frame, layout, panel_frame, rich_tag_button, tag_button,
     },
     utils::serial_enum,
 };
@@ -138,8 +138,60 @@ impl Default for ConnectPanelState {
     }
 }
 
+const PANEL_VIEWPORT_MARGIN: f32 = 12.0;
+
+fn viewport_panel_rect(ctx: &egui::Context) -> egui::Rect {
+    ctx.content_rect().shrink(PANEL_VIEWPORT_MARGIN)
+}
+
+fn responsive_panel_width(ctx: &egui::Context, preferred: f32, min_width: f32) -> f32 {
+    let screen = ctx.content_rect();
+    let available = (screen.width() - PANEL_VIEWPORT_MARGIN * 2.0).max(240.0);
+    let side_cap = (screen.width() * 0.44).max(min_width.min(available));
+
+    preferred
+        .min(side_cap)
+        .min(available)
+        .max(min_width.min(available))
+}
+
+fn responsive_panel_height(ctx: &egui::Context, preferred: f32, min_height: f32) -> f32 {
+    let screen = ctx.content_rect();
+    let available = (screen.height() - layout::TITLE_BAR_HEIGHT - PANEL_VIEWPORT_MARGIN * 2.0)
+        .max(min_height.min(screen.height()));
+    let height_cap = (screen.height() * 0.72).max(min_height.min(available));
+
+    preferred
+        .min(height_cap)
+        .min(available)
+        .max(min_height.min(available))
+}
+
+fn responsive_panel_pos(
+    ctx: &egui::Context,
+    preferred: egui::Pos2,
+    panel_width: f32,
+) -> egui::Pos2 {
+    let rect = viewport_panel_rect(ctx);
+    let min_y = rect.top() + layout::TITLE_BAR_HEIGHT + PANEL_VIEWPORT_MARGIN;
+    let max_x = (rect.right() - panel_width).max(rect.left());
+    let preferred_right_side = preferred.x > rect.center().x;
+    let x = if preferred_right_side {
+        max_x
+    } else {
+        preferred.x.clamp(rect.left(), max_x)
+    };
+    let y = preferred.y.clamp(min_y, rect.bottom());
+
+    egui::pos2(x, y)
+}
+
+fn narrow_panel(ui: &egui::Ui) -> bool {
+    ui.available_width() < 420.0
+}
+
 pub fn draw_scene_panel(ctx: &egui::Context, panel: &mut FloatingPanelState) {
-    draw_floating_panel(ctx, panel, "场景", "scene_panel", |ui| {
+    draw_floating_panel(ctx, panel, "场景", "scene_panel", 320.0, 260.0, |ui| {
         ui.horizontal(|ui| {
             ui.colored_label(dim_text(), "视图");
             let _ = ui.selectable_label(true, "簇");
@@ -196,7 +248,7 @@ pub fn draw_connect_panel(
                 });
 
                 ui.add_space(METRICS.row_gap);
-                draw_connect_action_row(ui, conn_state, is_connected, config, connection);
+                draw_connect_action_row(ui, conn_state, is_connected, config, connection, recorder);
 
                 if is_connected {
                     draw_recording_toolbar(ui, recorder, export_path);
@@ -223,7 +275,7 @@ pub fn draw_connect_panel(
 // }
 
 fn draw_connect_port_row(ui: &mut egui::Ui, config: &mut ConnectPanelState) {
-    ui.horizontal(|ui| {
+    ui.horizontal_wrapped(|ui| {
         ui.label(style::field_label("串口"));
         egui::ComboBox::from_id_salt("connect_ports")
             .width(150.0)
@@ -264,7 +316,7 @@ fn draw_connect_port_row(ui: &mut egui::Ui, config: &mut ConnectPanelState) {
 }
 
 fn draw_connect_matrix_row(ui: &mut egui::Ui, config: &mut ConnectPanelState) {
-    ui.horizontal(|ui| {
+    ui.horizontal_wrapped(|ui| {
         ui.checkbox(&mut config.manual, "手动矩阵");
 
         ui.add_enabled_ui(config.manual, |ui| {
@@ -289,8 +341,9 @@ fn draw_connect_action_row(
     is_connected: bool,
     config: &ConnectPanelState,
     connection: &ConnectionManager,
+    recorder: &Recorder,
 ) {
-    ui.horizontal(|ui| {
+    ui.horizontal_wrapped(|ui| {
         let status_text = match conn_state {
             ConnectionState::Disconnected => "未连接",
             ConnectionState::Connecting => "连接中...",
@@ -324,6 +377,7 @@ fn draw_connect_action_row(
                         config.cols as u32,
                         config.mode.baud_rate(),
                         config.mode.protocol(),
+                        recorder.clone(),
                     );
                 }
             }
@@ -336,17 +390,20 @@ pub fn draw_config_panel(
     panel: &mut FloatingPanelState,
     config: &mut ConfigPanelState,
     connection: &ConnectionManager,
+    recorder: &Recorder,
 ) -> Option<SerialMode> {
     let mut changed_mode = None;
     let conn_state = connection.state();
     let stats = connection.stats();
+    let panel_width = responsive_panel_width(ctx, 560.0, 340.0);
     config.connected = matches!(
         conn_state,
         ConnectionState::Connected | ConnectionState::Streaming
     );
 
-    draw_floating_panel(ctx, panel, "配置", "config_panel", |ui| {
+    draw_floating_panel(ctx, panel, "配置", "config_panel", 560.0, 340.0, |ui| {
-        ui.set_min_width(560.0);
+        ui.set_min_width(panel_width);
+        ui.set_max_width(panel_width);
 
         if let Some(mode) = draw_mode_row(ui, config) {
             changed_mode = Some(mode);
@@ -354,7 +411,7 @@ pub fn draw_config_panel(
 
         // draw_mode_row(ui, config);
         ui.separator();
-        draw_connection_row(ui, config, connection, conn_state);
+        draw_connection_row(ui, config, connection, recorder, conn_state);
         ui.add_space(8.0);
         // Legacy serial parameter grid is intentionally kept commented for future hardware:
         // draw_serial_grid(ui, config);
@@ -366,7 +423,7 @@ pub fn draw_config_panel(
 
 fn draw_mode_row(ui: &mut egui::Ui, config: &mut ConfigPanelState) -> Option<SerialMode> {
     let mut changed_to = None;
-    ui.horizontal(|ui| {
+    ui.horizontal_wrapped(|ui| {
         ui.colored_label(dim_text(), "模式");
         ui.add_space(12.0);
 
@@ -392,52 +449,45 @@ fn draw_connection_row(
     ui: &mut egui::Ui,
     config: &mut ConfigPanelState,
     connection: &ConnectionManager,
+    recorder: &Recorder,
     conn_state: ConnectionState,
 ) {
-    ui.horizontal(|ui| {
+    let is_narrow = narrow_panel(ui);
-        ui.add(
+    let draw_port_status = |ui: &mut egui::Ui, config: &mut ConfigPanelState| {
-            egui::Image::new(egui::include_image!("../static/cpu.png"))
+        ui.horizontal_wrapped(|ui| {
-                .fit_to_exact_size(egui::vec2(72.0, 72.0)),
+            ui.label(style::field_label("端口"));
-        );
+            egui::ComboBox::from_id_salt("config_ports")
+                .width(ui.available_width().min(150.0).max(104.0))
+                .selected_text(if config.port.is_empty() {
+                    "无可用串口".to_owned()
+                } else {
+                    config.port.clone()
+                })
+                .show_ui(ui, |ui| {
+                    for port in &config.available_ports {
+                        ui.selectable_value(&mut config.port, port.clone(), port.as_str());
+                    }
+                });
 
-        ui.add_space(METRICS.item_gap);
+            if ui
-
+                .add(style::icon_button(
-        ui.vertical(|ui| {
+                    egui::RichText::new("⟳").color(ONE_DARK_PRO.text).size(16.0),
-            ui.horizontal(|ui| {
+                    METRICS.icon_button,
-                ui.label(style::field_label("端口"));
+                ))
-                egui::ComboBox::from_id_salt("config_ports")
+                .on_hover_text("刷新串口")
-                    .width(126.0)
+                .clicked()
-                    .selected_text(if config.port.is_empty() {
+            {
-                        "无可用串口".to_owned()
+                refresh_config_ports(config);
-                    } else {
+            }
-                        config.port.clone()
-                    })
-                    .show_ui(ui, |ui| {
-                        for port in &config.available_ports {
-                            ui.selectable_value(&mut config.port, port.clone(), port.as_str());
-                        }
-                    });
-
-                if ui
-                    .add(style::icon_button(
-                        egui::RichText::new("⟳").color(ONE_DARK_PRO.text).size(16.0),
-                        METRICS.icon_button,
-                    ))
-                    .on_hover_text("刷新串口")
-                    .clicked()
-                {
-                    refresh_config_ports(config);
-                }
-            });
-            ui.label(style::value_text(format!("波特率  {}", config.baud_rate)));
-            ui.colored_label(
-                connection_status_color(conn_state),
-                connection_status_text(conn_state),
-            );
         });
+        ui.label(style::value_text(format!("波特率  {}", config.baud_rate)));
+        ui.colored_label(
+            connection_status_color(conn_state),
+            connection_status_text(conn_state),
+        );
+    };
 
-        ui.add_space(22.0);
+    let draw_connect_button = |ui: &mut egui::Ui, config: &ConfigPanelState| {
-
         let is_connected = matches!(
             conn_state,
             ConnectionState::Connected | ConnectionState::Streaming
@@ -460,25 +510,50 @@ fn draw_connection_row(
                     7,
                     config.mode.baud_rate(),
                     config.mode.protocol(),
+                    recorder.clone(),
                 );
             }
         }
+    };
 
-        // Legacy reconnect/link-protection indicator:
+    if is_narrow {
-        // ui.add_space(18.0);
+        ui.vertical(|ui| {
-        // ui.colored_label(
+            draw_port_status(ui, config);
-        //     if config.auto_reconnect {
+            ui.add_space(METRICS.item_gap);
-        //         style::status_color_ok()
+            draw_connect_button(ui, config);
-        //     } else {
+        });
-        //         ONE_DARK_PRO.text_dim
+    } else {
-        //     },
+        ui.horizontal(|ui| {
-        //     if config.auto_reconnect {
+            ui.add(
-        //         "链路保护 开"
+                egui::Image::new(egui::include_image!("../static/cpu.png"))
-        //     } else {
+                    .fit_to_exact_size(egui::vec2(72.0, 72.0)),
-        //         "链路保护 关"
+            );
-        //     },
+
-        // );
+            ui.add_space(METRICS.item_gap);
-    });
+
+            ui.vertical(|ui| {
+                draw_port_status(ui, config);
+            });
+
+            ui.add_space(22.0);
+            draw_connect_button(ui, config);
+        });
+    }
+
+    // Legacy reconnect/link-protection indicator:
+    // ui.add_space(18.0);
+    // ui.colored_label(
+    //     if config.auto_reconnect {
+    //         style::status_color_ok()
+    //     } else {
+    //         ONE_DARK_PRO.text_dim
+    //     },
+    //     if config.auto_reconnect {
+    //         "链路保护 开"
+    //     } else {
+    //         "链路保护 关"
+    //     },
+    // );
 }
 
 fn draw_serial_grid(ui: &mut egui::Ui, config: &mut ConfigPanelState) {
@@ -579,7 +654,7 @@ fn draw_mode_body(
 }
 
 fn draw_status_bytes_row(ui: &mut egui::Ui, conn_state: ConnectionState, stats: SerialIoStats) {
-    ui.horizontal(|ui| {
+    ui.horizontal_wrapped(|ui| {
         ui.colored_label(dim_text(), "状态");
         ui.label(connection_status_text(conn_state));
         ui.colored_label(dim_text(), "接收");
@@ -697,84 +772,216 @@ pub fn draw_stats_panel(
     ctx: &egui::Context,
     panel: &mut FloatingPanelState,
     force_history: &[f32],
-    spatial_force: Option<HudSpatialForce>,
+    _spatial_force: Option<HudSpatialForce>,
 ) {
-    draw_floating_panel(ctx, panel, "统计", "stats_panel", |ui| {
+    const PREFERRED_PANEL_WIDTH: f32 = 380.0;
-        ui.set_min_width(320.0);
+    const PREFERRED_PANEL_HEIGHT: f32 = 340.0;
-        draw_resultant_force_chart(ui, force_history, spatial_force);
+    const PANEL_OUTSIDE_GAP: f32 = 18.0;
-    });
+
+    let force_active = has_recent_resultant_force(force_history);
+    let target_visible = panel.visible && force_active;
+    let anim = ctx.animate_bool(egui::Id::new("stats_panel_force_enter"), target_visible);
+
+    if anim <= 0.01 {
+        return;
+    }
+
+    let target_anim = if target_visible { 1.0 } else { 0.0 };
+    if (anim - target_anim).abs() > 0.001 {
+        ctx.request_repaint();
+    }
+
+    let eased = ease_in_out(anim);
+    let screen = ctx.content_rect();
+    let panel_width = responsive_panel_width(ctx, PREFERRED_PANEL_WIDTH, 260.0);
+    let panel_height = responsive_panel_height(ctx, PREFERRED_PANEL_HEIGHT, 220.0);
+    let viewport = viewport_panel_rect(ctx);
+    let target_pos = egui::pos2(
+        viewport.left(),
+        (viewport.bottom() - panel_height - PANEL_VIEWPORT_MARGIN * 2.0)
+            .max(viewport.top() + layout::TITLE_BAR_HEIGHT + PANEL_VIEWPORT_MARGIN),
+    );
+    let target_x = target_pos.x;
+    let hidden_x = if target_x < screen.center().x {
+        screen.left() - panel_width - PANEL_OUTSIDE_GAP
+    } else {
+        screen.right() + PANEL_OUTSIDE_GAP
+    };
+    let x = egui::lerp(hidden_x..=target_x, eased);
+    let y = target_pos.y;
+
+    egui::Area::new(egui::Id::new("stats_panel"))
+        .fixed_pos(egui::pos2(x, y))
+        .constrain_to(viewport_panel_rect(ctx))
+        .order(egui::Order::Foreground)
+        .show(ctx, |ui| {
+            panel_frame(ctx).show(ui, |ui| {
+                ui.spacing_mut().item_spacing = egui::vec2(METRICS.item_gap, 6.0);
+                ui.set_min_width(panel_width);
+                ui.set_max_width(panel_width);
+                ui.set_min_height(panel_height);
+                draw_force_chart_panel_contents(ui, "RF", "合力", force_history, panel_height);
+            });
+        });
 }
 
 const FORCE_CHART_MAX_N: f32 = 25.6;
+const FORCE_CHART_SAMPLE_SECONDS: f32 = 0.1;
+const FORCE_PANEL_ACTIVE_TAIL: usize = 8;
 
-fn draw_resultant_force_chart(
+const HAND_FORCE_PANEL_MIN_WIDTH: f32 = 220.0;
-    ui: &mut egui::Ui,
+const HAND_FORCE_PANEL_MAX_WIDTH: f32 = 500.0;
+const HAND_FORCE_PANEL_MIN_HEIGHT: f32 = 104.0;
+const HAND_FORCE_PANEL_MAX_HEIGHT: f32 = 190.0;
+const HAND_FORCE_PANEL_GAP: f32 = 12.0;
+const HAND_FORCE_PANEL_SIDE_MARGIN: f32 = 24.0;
+const HAND_FORCE_PANEL_VERTICAL_MARGIN: f32 = 28.0;
+const HAND_FORCE_PANEL_TITLES: [(&str, &str); 7] = [
+    ("T1", "拇指"),
+    ("T2", "食指"),
+    ("T3", "中指"),
+    ("T4", "无名指"),
+    ("T5", "小指"),
+    ("P1", "掌心横区"),
+    ("P2", "掌心纵区"),
+];
+
+fn has_recent_resultant_force(values: &[f32]) -> bool {
+    values
+        .iter()
+        .rev()
+        .take(FORCE_PANEL_ACTIVE_TAIL)
+        .any(|value| *value > 0.0)
+}
+
+pub fn draw_hand_force_panels(ctx: &egui::Context, visible: bool, histories: &[Vec<f32>]) {
+    let hand_active = histories
+        .iter()
+        .any(|history| has_recent_resultant_force(history));
+    let target_visible = visible && hand_active;
+    let screen = ctx.content_rect();
+    let side_margin = HAND_FORCE_PANEL_SIDE_MARGIN.min((screen.width() * 0.025).max(10.0));
+    let vertical_margin = HAND_FORCE_PANEL_VERTICAL_MARGIN.min((screen.height() * 0.04).max(10.0));
+    let gap = HAND_FORCE_PANEL_GAP.min((screen.height() * 0.018).max(6.0));
+    let side_width = ((screen.width() - side_margin * 4.0) * 0.25).max(0.0);
+    let panel_width = side_width
+        .min(HAND_FORCE_PANEL_MAX_WIDTH)
+        .max(HAND_FORCE_PANEL_MIN_WIDTH.min(side_width));
+    let left_x = screen.left() + side_margin;
+    let right_x = screen.right() - side_margin - panel_width;
+    let left_count = 4usize;
+    let right_count = HAND_FORCE_PANEL_TITLES.len() - left_count;
+    let available_height =
+        (screen.height() - layout::TITLE_BAR_HEIGHT - vertical_margin * 2.0).max(0.0);
+    let panel_height = ((available_height - (left_count - 1) as f32 * gap) / left_count as f32)
+        .clamp(
+            HAND_FORCE_PANEL_MIN_HEIGHT.min(available_height),
+            HAND_FORCE_PANEL_MAX_HEIGHT,
+        );
+    let left_height = left_count as f32 * panel_height + (left_count - 1) as f32 * gap;
+    let right_height =
+        right_count as f32 * panel_height + (right_count.saturating_sub(1)) as f32 * gap;
+    let min_top = screen.top() + layout::TITLE_BAR_HEIGHT + vertical_margin;
+    let left_top = (screen.center().y - left_height * 0.5).max(min_top);
+    let right_top = (screen.center().y - right_height * 0.5).max(min_top);
+
+    for index in 0..HAND_FORCE_PANEL_TITLES.len() {
+        let history = histories.get(index).map(Vec::as_slice).unwrap_or(&[]);
+        let (code, title) = HAND_FORCE_PANEL_TITLES[index];
+        let (target_x, target_y) = if index < left_count {
+            (left_x, left_top + index as f32 * (panel_height + gap))
+        } else {
+            let right_index = index - left_count;
+            (
+                right_x,
+                right_top + right_index as f32 * (panel_height + gap),
+            )
+        };
+
+        draw_force_chart_area(
+            ctx,
+            egui::Id::new(format!("hand_force_panel_{index}")),
+            egui::pos2(target_x, target_y),
+            egui::vec2(panel_width, panel_height),
+            target_visible,
+            code,
+            title,
+            history,
+        );
+    }
+}
+
+fn draw_force_chart_area(
+    ctx: &egui::Context,
+    id: egui::Id,
+    target_pos: egui::Pos2,
+    size: egui::Vec2,
+    target_visible: bool,
+    code: &'static str,
+    title: &'static str,
     values: &[f32],
-    spatial_force: Option<HudSpatialForce>,
 ) {
-    let latest = values.last().copied().unwrap_or(0.0);
+    let anim = ctx.animate_bool(id.with("enter"), target_visible);
-    let max = values.iter().copied().fold(0.0_f32, f32::max);
-    let active_values = values.iter().copied().filter(|value| *value > 0.0);
-    let min = active_values.fold(None, |best: Option<f32>, value| {
-        Some(best.map_or(value, |current| current.min(value)))
-    });
 
-    group_frame().show(ui, |ui| {
+    if anim <= 0.01 {
-        ui.horizontal(|ui| {
+        return;
-            ui.colored_label(ACCENT_BLUE, "RF");
+    }
-            ui.label(style::panel_title("合力"));
+
-            ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
+    let target_anim = if target_visible { 1.0 } else { 0.0 };
-                ui.colored_label(ACCENT_GREEN, format!("{latest:.1} N"));
+    if (anim - target_anim).abs() > 0.001 {
+        ctx.request_repaint();
+    }
+
+    let eased = ease_in_out(anim);
+    let hidden_y = ctx.content_rect().bottom() + HAND_FORCE_PANEL_GAP;
+    let y = egui::lerp(hidden_y..=target_pos.y, eased);
+
+    egui::Area::new(id)
+        .fixed_pos(egui::pos2(target_pos.x, y))
+        .constrain_to(viewport_panel_rect(ctx))
+        .order(egui::Order::Foreground)
+        .show(ctx, |ui| {
+            panel_frame(ctx).show(ui, |ui| {
+                ui.spacing_mut().item_spacing = egui::vec2(METRICS.item_gap, 6.0);
+                ui.set_min_width(size.x);
+                ui.set_max_width(size.x);
+                ui.set_min_height(size.y);
+                draw_force_chart_panel_contents(ui, code, title, values, size.y);
             });
         });
+}
 
-        ui.add_space(4.0);
+fn draw_force_chart_panel_contents(
-        ui.horizontal(|ui| {
+    ui: &mut egui::Ui,
-            force_metric(ui, "峰值", max);
+    code: &'static str,
-            ui.separator();
+    title: &'static str,
-            force_metric(ui, "低值", min.unwrap_or(0.0));
+    values: &[f32],
-            ui.separator();
+    content_height: f32,
-            ui.colored_label(dim_text(), format!("{} 点", values.len()));
+) {
+    let latest = values.last().copied().unwrap_or(0.0);
+
+    ui.horizontal(|ui| {
+        ui.colored_label(ACCENT_BLUE, code);
+        ui.label(style::panel_title(title));
+        ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
+            ui.colored_label(ACCENT_GREEN, format!("{latest:.1} N"));
         });
-
-        ui.add_space(6.0);
-        paint_resultant_force_chart(ui, values);
-
-        ui.add_space(8.0);
-        draw_spatial_force_readout(ui, spatial_force);
     });
+
+    ui.add_space(6.0);
+    let chart_height = (content_height - 32.0).max(90.0);
+    paint_resultant_force_chart(ui, values, chart_height);
 }
 
-fn draw_spatial_force_readout(ui: &mut egui::Ui, spatial_force: Option<HudSpatialForce>) {
+fn paint_resultant_force_chart(ui: &mut egui::Ui, values: &[f32], chart_height: f32) {
-    let Some(force) = spatial_force else {
-        ui.horizontal(|ui| {
-            ui.colored_label(dim_text(), "3D");
-            ui.label(style::subtle_text("等待三维力数据"));
-        });
-        return;
-    };
-
-    ui.horizontal_wrapped(|ui| {
-        ui.colored_label(ACCENT_BLUE, "3D");
-        ui.label(style::value_text(format!("angle {:.0}°", force.angle_deg)));
-        ui.separator();
-        ui.label(style::value_text(format!("mag {:.2}", force.magnitude)));
-    });
-}
-
-fn force_metric(ui: &mut egui::Ui, label: &'static str, value: f32) {
-    ui.colored_label(dim_text(), label);
-    ui.label(style::value_text(format!("{value:.1} N")));
-}
-
-fn paint_resultant_force_chart(ui: &mut egui::Ui, values: &[f32]) {
-    const CHART_HEIGHT: f32 = 138.0;
     const CHART_POINTS: usize = 42;
+    const CHART_WINDOW_SECONDS: f32 = CHART_POINTS as f32 * FORCE_CHART_SAMPLE_SECONDS;
 
-    let width = ui.available_width().max(280.0);
+    let width = ui.available_width().max(180.0);
-    let (rect, _) = ui.allocate_exact_size(egui::vec2(width, CHART_HEIGHT), egui::Sense::hover());
+    let (rect, _) = ui.allocate_exact_size(egui::vec2(width, chart_height), egui::Sense::hover());
     let painter = ui.painter_at(rect);
     let radius = egui::CornerRadius::same(5);
+    let time = ui.ctx().input(|input| input.time) as f32;
 
     painter.rect_filled(rect, radius, egui::Color32::from_rgb(10, 18, 22));
     painter.rect_stroke(
@@ -789,7 +996,7 @@ fn paint_resultant_force_chart(ui: &mut egui::Ui, values: &[f32]) {
         rect.right_bottom() - egui::vec2(10.0, 24.0),
     );
 
-    paint_force_grid(&painter, rect, chart_rect);
+    paint_force_grid(&painter, rect, chart_rect, time, CHART_WINDOW_SECONDS);
 
     if values.is_empty() {
         painter.text(
@@ -804,12 +1011,13 @@ fn paint_resultant_force_chart(ui: &mut egui::Ui, values: &[f32]) {
 
     ui.ctx().request_repaint();
 
-    let time = ui.ctx().input(|input| input.time) as f32;
     let enter = ui
         .ctx()
         .animate_bool(egui::Id::new("resultant_force_chart_enter"), true);
     let slide_offset = (1.0 - enter) * -chart_rect.width() * 0.65;
-    let plot_rect = chart_rect.translate(egui::vec2(slide_offset, 0.0));
+    let tick_phase = (time / FORCE_CHART_SAMPLE_SECONDS).fract();
+    let scroll_offset = -tick_phase * chart_rect.width() / CHART_POINTS.max(1) as f32;
+    let plot_rect = chart_rect.translate(egui::vec2(slide_offset + scroll_offset, 0.0));
 
     let mut points = Vec::with_capacity(values.len());
     let start_slot = CHART_POINTS.saturating_sub(values.len());
@@ -823,7 +1031,6 @@ fn paint_resultant_force_chart(ui: &mut egui::Ui, values: &[f32]) {
     }
 
     let plot_painter = painter.with_clip_rect(chart_rect.expand2(egui::vec2(1.0, 1.0)));
-    paint_force_sweep(&plot_painter, chart_rect, time);
     paint_force_area(&plot_painter, &points, plot_rect);
 
     if points.len() >= 2 {
@@ -852,7 +1059,13 @@ fn paint_resultant_force_chart(ui: &mut egui::Ui, values: &[f32]) {
     }
 }
 
-fn paint_force_grid(painter: &egui::Painter, rect: egui::Rect, chart_rect: egui::Rect) {
+fn paint_force_grid(
+    painter: &egui::Painter,
+    rect: egui::Rect,
+    chart_rect: egui::Rect,
+    time: f32,
+    window_seconds: f32,
+) {
     for tick in [25.0, 20.0, 15.0, 10.0, 5.0, 0.0] {
         let normalized = (tick / FORCE_CHART_MAX_N).clamp(0.0, 1.0);
         let y = chart_rect.bottom() - normalized * chart_rect.height();
@@ -883,42 +1096,25 @@ fn paint_force_grid(painter: &egui::Painter, rect: egui::Rect, chart_rect: egui:
         );
     }
 
-    painter.text(
+    let start_time = (time - window_seconds).max(0.0);
-        egui::pos2(chart_rect.left(), rect.bottom() - 11.0),
+    for index in 0..=5 {
-        egui::Align2::LEFT_CENTER,
+        let fraction = index as f32 / 5.0;
-        "-4.2s",
+        let x = chart_rect.left() + fraction * chart_rect.width();
-        egui::FontId::monospace(9.0),
+        let label_time = start_time + fraction * (time - start_time);
-        ONE_DARK_PRO.text_subtle,
+        let align = match index {
-    );
+            0 => egui::Align2::LEFT_CENTER,
-    painter.text(
+            5 => egui::Align2::RIGHT_CENTER,
-        egui::pos2(chart_rect.right(), rect.bottom() - 11.0),
+            _ => egui::Align2::CENTER_CENTER,
-        egui::Align2::RIGHT_CENTER,
+        };
-        "now",
-        egui::FontId::monospace(9.0),
-        ONE_DARK_PRO.text_subtle,
-    );
-}
 
-fn paint_force_sweep(painter: &egui::Painter, chart_rect: egui::Rect, time: f32) {
+        painter.text(
-    let sweep = (time * 0.55).fract();
+            egui::pos2(x, rect.bottom() - 11.0),
-    let x = chart_rect.left() + sweep * chart_rect.width();
+            align,
-    let sweep_rect = egui::Rect::from_min_max(
+            format!("{label_time:.1}s"),
-        egui::pos2(x - 8.0, chart_rect.top()),
+            egui::FontId::monospace(9.0),
-        egui::pos2(x + 8.0, chart_rect.bottom()),
+            ONE_DARK_PRO.text_subtle,
-    );
+        );
-
+    }
-    painter.rect_filled(
-        sweep_rect,
-        egui::CornerRadius::ZERO,
-        color_alpha(ONE_DARK_PRO.accent, 20),
-    );
-    painter.line_segment(
-        [
-            egui::pos2(x, chart_rect.top()),
-            egui::pos2(x, chart_rect.bottom()),
-        ],
-        egui::Stroke::new(1.0, color_alpha(ACCENT_GREEN, 95)),
-    );
 }
 
 fn paint_force_area(painter: &egui::Painter, points: &[egui::Pos2], plot_rect: egui::Rect) {
@@ -953,31 +1149,52 @@ fn draw_floating_panel(
     panel: &mut FloatingPanelState,
     title: &'static str,
     id: &'static str,
+    preferred_width: f32,
+    min_width: f32,
     add_contents: impl FnOnce(&mut egui::Ui),
 ) {
     if panel.visible {
         let mut open = true;
         let mut hide_requested = false;
         let mut window_rect = None;
+        let panel_width = responsive_panel_width(ctx, preferred_width, min_width);
+        let max_height = responsive_panel_height(ctx, ctx.content_rect().height(), 180.0);
+        let default_pos = responsive_panel_pos(ctx, panel.default_pos, panel_width);
 
         let window_response = egui::Window::new(title)
             .id(egui::Id::new(id))
             .open(&mut open)
-            .default_pos(panel.default_pos)
+            .default_pos(default_pos)
+            .max_width(panel_width)
+            .max_height(max_height)
+            .constrain_to(viewport_panel_rect(ctx))
             .title_bar(false)
             .resizable(true)
             .frame(panel_frame(ctx))
             .show(ctx, |ui| {
                 ui.spacing_mut().item_spacing = egui::vec2(METRICS.item_gap, 6.0);
+                ui.set_min_width(panel_width);
+                ui.set_max_width(panel_width);
                 ui.horizontal(|ui| {
-                    if ui.add(tag_button("隐藏")).clicked() {
+                    if ui
+                        .add(rich_tag_button("隐藏", style::ONE_DARK_PRO.text_dim))
+                        .clicked()
+                    {
                         hide_requested = true;
                     }
                     ui.add_space(6.0);
                     ui.label(style::panel_title(title));
                 });
                 ui.separator();
-                add_contents(ui);
+                let content_max_height = (max_height - 60.0).max(120.0);
+                egui::ScrollArea::vertical()
+                    .max_height(content_max_height)
+                    .auto_shrink([false, true])
+                    .show(ui, |ui| {
+                        ui.set_min_width(panel_width);
+                        ui.set_max_width(panel_width);
+                        add_contents(ui);
+                    });
             });
 
         if let Some(response) = window_response {
@@ -1032,9 +1249,10 @@ fn draw_center_floating_panel(
     collapsed_label: &'static str,
     add_contents: impl FnOnce(&mut egui::Ui),
 ) {
-    const PANEL_WIDTH: f32 = 520.0;
+    const PREFERRED_PANEL_WIDTH: f32 = 520.0;
     const SLIDE_DISTANCE: f32 = 18.0;
 
+    let panel_width = responsive_panel_width(ctx, PREFERRED_PANEL_WIDTH, 320.0);
     let anim = advance_center_panel_anim(ctx, panel);
     let eased = ease_in_out(anim);
 
@@ -1066,8 +1284,8 @@ fn draw_center_floating_panel(
         )
         .order(egui::Order::Tooltip)
         .show(ctx, |ui| {
-            let response = center_panel_shell(ui, PANEL_WIDTH, |ui| {
+            let response = center_panel_shell(ui, panel_width, |ui| {
-                ui.set_width(PANEL_WIDTH);
+                ui.set_width(panel_width);
                 add_contents(ui);
                 ui.add_space(6.0);
                 let handle_rect = allocate_center_panel_handle(ui);
@@ -1400,7 +1618,7 @@ pub fn draw_recording_toolbar(ui: &mut egui::Ui, recorder: &Recorder, export_pat
     let duration_ms = recorder.duration_ms();
 
     ui.separator();
-    ui.horizontal(|ui| {
+    ui.horizontal_wrapped(|ui| {
         ui.colored_label(ACCENT_RED, "● REC");
         ui.colored_label(
             ONE_DARK_PRO.text,
@@ -1408,7 +1626,7 @@ pub fn draw_recording_toolbar(ui: &mut egui::Ui, recorder: &Recorder, export_pat
         );
     });
 
-    ui.horizontal(|ui| {
+    ui.horizontal_wrapped(|ui| {
         // Full recording
         let rec_btn = if is_recording {
             tag_button("⏹ 停止")
@@ -1494,16 +1712,26 @@ pub fn draw_recording_toolbar(ui: &mut egui::Ui, recorder: &Recorder, export_pat
     });
 
     // Export path
-    ui.horizontal(|ui| {
+    if narrow_panel(ui) {
-        ui.colored_label(dim_text(), "导出路径");
+        ui.vertical(|ui| {
-        ui.add_sized(
+            ui.colored_label(dim_text(), "导出路径");
-            egui::vec2(
+            ui.add_sized(
-                (ui.available_width() - 80.0).max(160.0),
+                egui::vec2(ui.available_width().max(180.0), METRICS.field_height),
-                METRICS.field_height,
+                egui::TextEdit::singleline(export_path).hint_text("eskin_export_*.csv"),
-            ),
+            );
-            egui::TextEdit::singleline(export_path).hint_text("eskin_export_*.csv"),
+        });
-        );
+    } else {
-    });
+        ui.horizontal(|ui| {
+            ui.colored_label(dim_text(), "导出路径");
+            ui.add_sized(
+                egui::vec2(
+                    (ui.available_width() - 80.0).max(160.0),
+                    METRICS.field_height,
+                ),
+                egui::TextEdit::singleline(export_path).hint_text("eskin_export_*.csv"),
+            );
+        });
+    }
 }
 
 // ── Export Panel (floating) ────────────────────────────────────────────
@@ -1515,10 +1743,20 @@ pub fn draw_export_panel(
     recorder: &Recorder,
     export_path: &mut String,
 ) {
-    draw_floating_panel(ctx, panel, "录制导出", "export_panel", |ui| {
+    let panel_width = responsive_panel_width(ctx, 340.0, 280.0);
-        ui.set_min_width(300.0);
+    draw_floating_panel(
-        draw_recording_toolbar(ui, recorder, export_path);
+        ctx,
-    });
+        panel,
+        "录制导出",
+        "export_panel",
+        340.0,
+        280.0,
+        |ui| {
+            ui.set_min_width(panel_width);
+            ui.set_max_width(panel_width);
+            draw_recording_toolbar(ui, recorder, export_path);
+        },
+    );
 }
 
 // ── Matrix Config Panel ────────────────────────────────────────────────
@@ -1547,75 +1785,97 @@ pub fn draw_matrix_config_panel(
     panel: &mut FloatingPanelState,
     config: &mut MatrixConfigState,
 ) {
-    draw_floating_panel(ctx, panel, "矩阵配置", "matrix_config_panel", |ui| {
+    let panel_width = responsive_panel_width(ctx, 380.0, 280.0);
-        ui.set_min_width(280.0);
+    draw_floating_panel(
+        ctx,
+        panel,
+        "矩阵配置",
+        "matrix_config_panel",
+        380.0,
+        280.0,
+        |ui| {
+            ui.set_min_width(panel_width);
+            ui.set_max_width(panel_width);
+
+            ui.horizontal_wrapped(|ui| {
+                ui.label(style::field_label("矩阵尺寸"));
+                ui.add_space(METRICS.item_gap);
+                ui.label(style::value_text("行"));
+                ui.add_sized(
+                    egui::vec2(56.0, METRICS.field_height),
+                    egui::DragValue::new(&mut config.rows).range(1..=128),
+                );
+                ui.label(style::value_text("列"));
+                ui.add_sized(
+                    egui::vec2(56.0, METRICS.field_height),
+                    egui::DragValue::new(&mut config.cols).range(1..=128),
+                );
+            });
 
-        ui.horizontal(|ui| {
-            ui.label(style::field_label("矩阵尺寸"));
             ui.add_space(METRICS.item_gap);
-            ui.label(style::value_text("行"));
-            ui.add_sized(
-                egui::vec2(56.0, METRICS.field_height),
-                egui::DragValue::new(&mut config.rows).range(1..=128),
-            );
-            ui.label(style::value_text("列"));
-            ui.add_sized(
-                egui::vec2(56.0, METRICS.field_height),
-                egui::DragValue::new(&mut config.cols).range(1..=128),
-            );
-        });
 
-        ui.add_space(METRICS.item_gap);
+            ui.horizontal_wrapped(|ui| {
-
+                ui.label(style::field_label("预设"));
-        ui.horizontal(|ui| {
+                for (r, c, name) in &[
-            ui.label(style::field_label("预设"));
+                    (12, 7, "12×7"),
-            for (r, c, name) in &[
+                    (24, 12, "24×12"),
-                (12, 7, "12×7"),
+                    (32, 16, "32×16"),
-                (24, 12, "24×12"),
+                    (48, 24, "48×24"),
-                (32, 16, "32×16"),
+                    (64, 32, "64×32"),
-                (48, 24, "48×24"),
+                ] {
-                (64, 32, "64×32"),
+                    if ui
-            ] {
+                        .add(rich_tag_button(*name, style::ONE_DARK_PRO.text_dim))
-                if ui.add(tag_button(*name)).clicked() {
+                        .clicked()
-                    config.rows = *r;
+                    {
-                    config.cols = *c;
+                        config.rows = *r;
+                        config.cols = *c;
+                    }
                 }
-            }
+            });
-        });
 
-        ui.add_space(METRICS.item_gap);
-
-        ui.horizontal(|ui| {
-            ui.label(style::field_label("色域范围"));
             ui.add_space(METRICS.item_gap);
-            ui.label(style::value_text("最小"));
-            ui.add_sized(
-                egui::vec2(72.0, METRICS.field_height),
-                egui::DragValue::new(&mut config.color_min)
-                    .range(0.0..=10000.0)
-                    .speed(100.0),
-            );
-            ui.label(style::value_text("最大"));
-            ui.add_sized(
-                egui::vec2(72.0, METRICS.field_height),
-                egui::DragValue::new(&mut config.color_max)
-                    .range(1.0..=10000.0)
-                    .speed(100.0),
-            );
-        });
 
-        ui.add_space(METRICS.row_gap);
+            ui.horizontal_wrapped(|ui| {
+                ui.label(style::field_label("色域范围"));
+                ui.add_space(METRICS.item_gap);
+                ui.label(style::value_text("最小"));
+                ui.add_sized(
+                    egui::vec2(72.0, METRICS.field_height),
+                    egui::DragValue::new(&mut config.color_min)
+                        .range(0.0..=10000.0)
+                        .speed(100.0),
+                );
+                ui.label(style::value_text("最大"));
+                ui.add_sized(
+                    egui::vec2(72.0, METRICS.field_height),
+                    egui::DragValue::new(&mut config.color_max)
+                        .range(1.0..=10000.0)
+                        .speed(100.0),
+                );
+            });
 
-        if ui.add(tag_button("重置默认")).clicked() {
+            ui.add_space(METRICS.row_gap);
-            *config = MatrixConfigState::default();
+
-        }
+            if ui
-    });
+                .add(rich_tag_button("重置默认", style::ONE_DARK_PRO.text_dim))
+                .clicked()
+            {
+                *config = MatrixConfigState::default();
+            }
+        },
+    );
 }
 
 pub fn panel_restore_item(ui: &mut egui::Ui, title: &'static str, panel: &mut FloatingPanelState) {
+    let button_size = egui::vec2(ui.available_width(), 0.0);
     if panel.visible {
-        ui.add_enabled(false, egui::Button::new(format!("{title} 已显示")));
+        ui.add_enabled_ui(false, |ui| {
-    } else if ui.button(format!("显示 {title}")).clicked() {
+            ui.add_sized(button_size, egui::Button::new(format!("{title} 已显示")));
+        });
+    } else if ui
+        .add_sized(button_size, egui::Button::new(format!("显示 {title}")))
+        .clicked()
+    {
         panel.visible = true;
         ui.close();
     }

static/wgsl/shader.wgsl

@@ -126,15 +126,7 @@ fn vs_background(@builtin(vertex_index) vertex_index: u32) -> BackgroundVertexOu
 
 @fragment
 fn fs_background(@builtin(position) frag_coord: vec4f) -> @location(0) vec4f {
-    let pixel = frag_coord.xy;
+    return output_color(vec3f(0.0, 0.0, 0.0), 1.0);
-    let viewport = u.viewport.xy;
-    let uv = pixel / max(viewport, vec2f(1.0, 1.0));
-    var color = mix(vec3f(0.018, 0.019, 0.022), vec3f(0.038, 0.040, 0.046), 1.0 - uv.y);
-    let vignette = smoothstep(0.18, 0.92, length((uv - vec2f(0.52, 0.48)) * vec2f(viewport.x / viewport.y, 1.0)));
-    color *= 1.0 - vignette * 0.22;
-    color += vec3f(0.010, 0.010, 0.012) * (1.0 - smoothstep(0.0, 0.85, abs(uv.y - 0.50)));
-
-    return output_color(color, 1.0);
 }
 
 

wix/main.wxs

@@ -0,0 +1,254 @@
+<?xml version='1.0' encoding='windows-1252'?>
+<!--
+  Copyright (C) 2017 Christopher R. Field.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+
+<!--
+  The "cargo wix" subcommand provides a variety of predefined variables available
+  for customization of this template. The values for each variable are set at
+  installer creation time. The following variables are available:
+
+  TargetTriple      = The rustc target triple name.
+  TargetEnv         = The rustc target environment. This is typically either
+                      "msvc" or "gnu" depending on the toolchain downloaded and
+                      installed.
+  TargetVendor      = The rustc target vendor. This is typically "pc", but Rust
+                      does support other vendors, like "uwp".
+  CargoTargetBinDir = The complete path to the directory containing the
+                      binaries (exes) to include. The default would be
+                      "target\release\". If an explicit rustc target triple is
+                      used, i.e. cross-compiling, then the default path would
+                      be "target\<CARGO_TARGET>\<CARGO_PROFILE>",
+                      where "<CARGO_TARGET>" is replaced with the "CargoTarget"
+                      variable value and "<CARGO_PROFILE>" is replaced with the
+                      value from the "CargoProfile" variable. This can also
+                      be overridden manually with the "target-bin-dir" flag.
+  CargoTargetDir    = The path to the directory for the build artifacts, i.e.
+                      "target".
+  CargoProfile      = The cargo profile used to build the binaries
+                      (usually "debug" or "release").
+  Version           = The version for the installer. The default is the
+                      "Major.Minor.Fix" semantic versioning number of the Rust
+                      package.
+-->
+
+<!--
+  Please do not remove these pre-processor If-Else blocks. These are used with
+  the `cargo wix` subcommand to automatically determine the installation
+  destination for 32-bit versus 64-bit installers. Removal of these lines will
+  cause installation errors.
+-->
+<?if $(sys.BUILDARCH) = x64 or $(sys.BUILDARCH) = arm64 ?>
+    <?define PlatformProgramFilesFolder = "ProgramFiles64Folder" ?>
+<?else ?>
+    <?define PlatformProgramFilesFolder = "ProgramFilesFolder" ?>
+<?endif ?>
+
+<Wix xmlns='http://schemas.microsoft.com/wix/2006/wi'>
+
+    <Product
+        Id='*'
+        Name='eskin-model-player'
+        UpgradeCode='7CEF316B-BE23-4533-B4B2-87D06D2230B5'
+        Manufacturer='JOYSONQUIN'
+        Language='1033'
+        Codepage='1252'
+        Version='$(var.Version)'>
+
+        <Package Id='*'
+            Keywords='Installer'
+            Description='Desktop pressure sensor visualization and playback application.'
+            Manufacturer='JOYSONQUIN'
+            InstallerVersion='450'
+            Languages='1033'
+            Compressed='yes'
+            InstallScope='perUser'
+            InstallPrivileges='limited'
+            SummaryCodepage='1252'
+            />
+
+        <MajorUpgrade
+            Schedule='afterInstallInitialize'
+            DowngradeErrorMessage='A newer version of [ProductName] is already installed. Setup will now exit.'/>
+
+        <Media Id='1' Cabinet='media1.cab' EmbedCab='yes' DiskPrompt='CD-ROM #1'/>
+        <Property Id='DiskPrompt' Value='eskin-model-player Installation'/>
+
+        <Directory Id='TARGETDIR' Name='SourceDir'>
+            <Directory Id='LocalAppDataFolder'>
+                <Directory Id='APPLICATIONFOLDER' Name='eskin-model-player'>
+                    
+                    <!--
+                      Enabling the license sidecar file in the installer is a four step process:
+
+                      1. Uncomment the `Component` tag and its contents.
+                      2. Change the value for the `Source` attribute in the `File` tag to a path
+                         to the file that should be included as the license sidecar file. The path
+                         can, and probably should be, relative to this file.
+                      3. Change the value for the `Name` attribute in the `File` tag to the
+                         desired name for the file when it is installed alongside the `bin` folder
+                         in the installation directory. This can be omitted if the desired name is
+                         the same as the file name.
+                      4. Uncomment the `ComponentRef` tag with the Id attribute value of "License"
+                         further down in this file.
+                    -->
+                    <!--
+                    <Component Id='License' Guid='*'>
+                        <File Id='LicenseFile' Name='ChangeMe' DiskId='1' Source='C:\Path\To\File' KeyPath='yes'/>
+                    </Component>
+                    -->
+
+                    <Directory Id='Bin' Name='bin'>
+                        <Component Id='Path' Guid='FD230ABD-75B9-47D4-870B-CF2EA72B76BE'>
+                            <RegistryValue
+                                Root='HKCU'
+                                Key='Software\JOYSONQUIN\eskin-model-player'
+                                Name='PathComponent'
+                                Type='integer'
+                                Value='1'
+                                KeyPath='yes'/>
+                            <RemoveFolder Id='RemoveBinFolder' Directory='Bin' On='uninstall'/>
+                            <RemoveFolder Id='RemoveApplicationFolder' Directory='APPLICATIONFOLDER' On='uninstall'/>
+                            <Environment
+                                Id='PATH'
+                                Name='PATH'
+                                Value='[Bin]'
+                                Permanent='no'
+                                Part='last'
+                                Action='set'
+                                System='no'/>
+                        </Component>
+                        <Component Id='binary0' Guid='302CAFB5-6951-426B-BC5A-988C351A2CF2'>
+                            <RegistryValue
+                                Root='HKCU'
+                                Key='Software\JOYSONQUIN\eskin-model-player'
+                                Name='BinaryComponent'
+                                Type='integer'
+                                Value='1'
+                                KeyPath='yes'/>
+                            <File
+                                Id='exe0'
+                                Name='ESkinPlayer.exe'
+                                DiskId='1'
+                                Source='$(var.CargoTargetBinDir)\ESkinPlayer.exe'/>
+                        </Component>
+                    </Directory>
+                </Directory>
+            </Directory>
+        </Directory>
+
+        <Feature
+            Id='Binaries'
+            Title='Application'
+            Description='Installs all binaries and the license.'
+            Level='1'
+            ConfigurableDirectory='APPLICATIONFOLDER'
+            AllowAdvertise='no'
+            Display='expand'
+            Absent='disallow'>
+            
+            <!--
+              Uncomment the following `ComponentRef` tag to add the license
+              sidecar file to the installer.
+            -->
+            <!--<ComponentRef Id='License'/>-->
+
+            <ComponentRef Id='binary0'/>
+
+            <Feature
+                Id='Environment'
+                Title='PATH Environment Variable'
+                Description='Add the install location of the [ProductName] executable to the PATH system environment variable. This allows the [ProductName] executable to be called from any location.'
+                Level='1'
+                Absent='allow'>
+                <ComponentRef Id='Path'/>
+            </Feature>
+        </Feature>
+
+        <SetProperty Id='ARPINSTALLLOCATION' Value='[APPLICATIONFOLDER]' After='CostFinalize'/>
+
+        
+        <!--
+          Uncomment the following `Icon` and `Property` tags to change the product icon.
+
+          The product icon is the graphic that appears in the Add/Remove
+          Programs control panel for the application.
+        -->
+        <!--<Icon Id='ProductICO' SourceFile='wix\Product.ico'/>-->
+        <!--<Property Id='ARPPRODUCTICON' Value='ProductICO' />-->
+
+        
+        <!--
+          Adding a URL to Add/Remove Programs control panel listing for the
+          application is a two step process:
+
+          1. Uncomment the following `Property` tag with the "ARPHELPLINK" Id
+             attribute value.
+          2. Change the value for `Value` attribute of the following
+             `Property` tag to a valid URL.
+        -->
+        <!--<Property Id='ARPHELPLINK' Value='ChangeMe'/>-->
+
+        <UI>
+            <UIRef Id='WixUI_FeatureTree'/>
+            
+            <!--
+              Enabling the EULA dialog in the installer is a three step process:
+
+                1. Comment out or remove the two `Publish` tags that follow the
+                   `WixVariable` tag.
+                2. Uncomment the `<WixVariable Id='WixUILicenseRtf' Value='Path\to\Eula.rft'>` tag further down
+                3. Replace the `Value` attribute of the `WixVariable` tag with
+                   the path to a RTF file that will be used as the EULA and
+                   displayed in the license agreement dialog.
+            -->
+            <Publish Dialog='WelcomeDlg' Control='Next' Event='NewDialog' Value='CustomizeDlg' Order='99'>1</Publish>
+            <Publish Dialog='CustomizeDlg' Control='Back' Event='NewDialog' Value='WelcomeDlg' Order='99'>1</Publish>
+
+        </UI>
+
+        
+        <!--
+          Enabling the EULA dialog in the installer requires uncommenting
+          the following `WixUILicenseRTF` tag and changing the `Value`
+          attribute.
+        -->
+        <!-- <WixVariable Id='WixUILicenseRtf' Value='Relative\Path\to\Eula.rtf'/> -->
+
+        
+        <!--
+          Uncomment the next `WixVariable` tag to customize the installer's
+          Graphical User Interface (GUI) and add a custom banner image across
+          the top of each screen. See the WiX Toolset documentation for details
+          about customization.
+
+          The banner BMP dimensions are 493 x 58 pixels.
+        -->
+        <!--<WixVariable Id='WixUIBannerBmp' Value='wix\Banner.bmp'/>-->
+
+        
+        <!--
+          Uncomment the next `WixVariable` tag to customize the installer's
+          Graphical User Interface (GUI) and add a custom image to the first
+          dialog, or screen. See the WiX Toolset documentation for details about
+          customization.
+
+          The dialog BMP dimensions are 493 x 312 pixels.
+        -->
+        <!--<WixVariable Id='WixUIDialogBmp' Value='wix\Dialog.bmp'/>-->
+
+    </Product>
+
+</Wix>