From d783cf2591202c1798637fb674939a5db626696c Mon Sep 17 00:00:00 2001
From: imxyy_soope_ <imxyy1soope1@gmail.com>
Date: Mon, 1 Dec 2025 18:48:22 +0800
Subject: [PATCH] chore(frontend): overflow-x-auto for RulesList

---
 .env.example                          |   2 +-
 frontend/src/components/RulesList.tsx | 165 ++++++++++++--------------
 src/jsonrpc/tactics.rs                |   3 -
 src/main.rs                           |  10 +-
 src/middleware.rs                     |   6 +-
 5 files changed, 84 insertions(+), 102 deletions(-)

diff --git a/.env.example b/.env.example
index 96998ca..38665a1 100644
--- a/.env.example
+++ b/.env.example
@@ -1,4 +1,4 @@
-# Example .env file for Linspirer MITM Server
+# Example .env file for My Linspirer MITM Server
 # Copy this to .env and fill in your values
 
 # Required: AES-128 encryption key (16 characters)
diff --git a/frontend/src/components/RulesList.tsx b/frontend/src/components/RulesList.tsx
index 00ce596..f576159 100644
--- a/frontend/src/components/RulesList.tsx
+++ b/frontend/src/components/RulesList.tsx
@@ -26,6 +26,9 @@ const RulesList: Component = () => {
     if (!confirm('Are you sure you want to delete this rule?')) return;
 
     try {
+      if (id === editingId()) {
+        setShowEditor(false);
+      }
       await rulesApi.delete(id);
       refetch();
     } catch (err) {
@@ -126,28 +129,13 @@ const RulesList: Component = () => {
               <label class="block text-sm font-medium text-gray-700 mb-1">
                 Method Name
               </label>
-              <Show
-                when={editingId() === null}
-                fallback={
-                  <input
-                    type="text"
-                    value={editingMethod()}
-                    onInput={(e) => setEditingMethod(e.currentTarget.value)}
-                    class="w-full border border-gray-300 rounded-md px-3 py-2"
-                    placeholder="com.linspirer.method.name"
-                  />
-                }
-              >
-                <select
-                  value={editingMethod()}
-                  onChange={(e) => setEditingMethod(e.currentTarget.value)}
-                  class="w-full border border-gray-300 rounded-md px-3 py-2"
-                >
-                  <option value="">-- Select Method --</option>
-                  <option value="com.linspirer.tactics.gettactics">Get Tactics</option>
-                  <option value="com.linspirer.device.getcommand">Get Command</option>
-                </select>
-              </Show>
+              <input
+                type="text"
+                value={editingMethod()}
+                onInput={(e) => setEditingMethod(e.currentTarget.value)}
+                class="w-full border border-gray-300 rounded-md px-3 py-2"
+                placeholder="com.linspirer.method.name"
+              />
             </div>
 
             <div>
@@ -190,74 +178,71 @@ const RulesList: Component = () => {
       </Show>
 
       <div class="bg-white shadow rounded-lg overflow-hidden">
-        <table class="min-w-full divide-y divide-gray-200">
-          <thead class="bg-gray-50">
-            <tr>
-              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
-                Method Name
-              </th>
-              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
-                Action
-              </th>
-              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
-                Status
-              </th>
-              <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tbody class="bg-white divide-y divide-gray-200">
-            <Show when={!rules.loading} fallback={
-              <tr><td colspan="4" class="text-center py-4">Loading...</td></tr>
-            }>
-              <For each={rules()}>
-                {(rule) => (
-                  <tr>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
-                      {rule.method_name}
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                      <span class={`px-2 py-1 rounded-full text-xs ${
-                        rule.action === 'replace' ? 'bg-purple-100 text-purple-800' :
-                        rule.action === 'modify' ? 'bg-blue-100 text-blue-800' :
-                        'bg-gray-100 text-gray-800'
-                      }`}>
-                        {rule.action}
-                      </span>
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                      <button
-                        onClick={() => toggleRule(rule)}
-                        class={`px-3 py-1 rounded-md text-sm font-medium ${
-                          rule.is_enabled
-                            ? 'bg-green-100 text-green-800'
-                            : 'bg-gray-100 text-gray-800'
-                        }`}
-                      >
-                        {rule.is_enabled ? '✓ Enabled' : '✗ Disabled'}
-                      </button>
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                      <button
-                        onClick={() => startEdit(rule)}
-                        class="text-indigo-600 hover:text-indigo-900 mr-4"
-                      >
-                        Edit
-                      </button>
-                      <button
-                        onClick={() => deleteRule(rule.id)}
-                        class="text-red-600 hover:text-red-900"
-                      >
-                        Delete
-                      </button>
-                    </td>
-                  </tr>
-                )}
-              </For>
-            </Show>
-          </tbody>
-        </table>
+        <div class="overflow-x-auto">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                  Method Name
+                </th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                  Action
+                </th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                  Status
+                </th>
+                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+              <Show when={!rules.loading} fallback={
+                <tr><td colspan="4" class="text-center py-4">Loading...</td></tr>
+              }>
+                <For each={rules()}>
+                  {(rule) => (
+                    <tr>
+                      <td class="px-6 py-4 text-sm font-medium text-gray-900">
+                        {rule.method_name}
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        <span class={`px-2 py-1 rounded-full text-xs ${rule.action === 'replace' ? 'bg-purple-100 text-purple-800' :
+                            rule.action === 'modify' ? 'bg-blue-100 text-blue-800' :
+                              'bg-gray-100 text-gray-800'
+                          }`}>
+                          {rule.action}
+                        </span>
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        <button
+                          onClick={() => toggleRule(rule)}
+                          class={`px-3 py-1 rounded-md text-sm font-medium ${rule.is_enabled
+                              ? 'bg-green-100 text-green-800'
+                              : 'bg-gray-100 text-gray-800'
+                            }`}>
+                          {rule.is_enabled ? '✓ Enabled' : '✗ Disabled'}
+                        </button>
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                        <button
+                          onClick={() => startEdit(rule)}
+                          class="text-indigo-600 hover:text-indigo-900 mr-4">
+                          Edit
+                        </button>
+                        <button
+                          onClick={() => deleteRule(rule.id)}
+                          class="text-red-600 hover:text-red-900">
+                          Delete
+                        </button>
+                      </td>
+                    </tr>
+                  )}
+                </For>
+              </Show>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   );
diff --git a/src/jsonrpc/tactics.rs b/src/jsonrpc/tactics.rs
index 164921b..c52279d 100644
--- a/src/jsonrpc/tactics.rs
+++ b/src/jsonrpc/tactics.rs
@@ -21,7 +21,6 @@ pub struct Tactics {
     pub name: String,
     #[serde_as(as = "BoolFromInt")]
     pub release_control: bool,
-    // TODO: std::time::Instant
     pub updated_at: String,
     #[serde(rename = "usergroup")]
     pub user_group: u32,
@@ -42,7 +41,6 @@ pub struct AppTactics {
 pub struct App {
     #[serde(rename = "canuninstall")]
     can_uninstall: bool,
-    // TODO: std::time::Instant
     created_at: String,
     #[serde(rename = "devicetype")]
     device_type: String,
@@ -67,7 +65,6 @@ pub struct App {
     sort_weight: i32,
     status: i32,
     target_sdk_version: i32,
-    // TODO: std::time::Instant
     updated_at: String,
     #[serde(rename = "versioncode")]
     version_code: i32,
diff --git a/src/main.rs b/src/main.rs
index 472a9e9..9aea8ec 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -1,7 +1,7 @@
 use std::{net::SocketAddr, sync::Arc};
 
 use anyhow::Context;
-use axum::Router;
+use axum::{Router, routing::any};
 use axum::handler::Handler;
 use dotenvy::dotenv;
 use tower_http::compression::CompressionLayer;
@@ -80,15 +80,15 @@ async fn main() -> anyhow::Result<()> {
         commands: Default::default(),
     });
 
-    let log_middleware =
-        axum::middleware::from_fn_with_state(state.clone(), middleware::log_middleware);
+    let proxy_middleware =
+        axum::middleware::from_fn_with_state(state.clone(), middleware::middleware);
 
     // Build our application
     let app = Router::new()
         // Admin routes
         .nest("/admin", admin::routes::admin_routes(state.clone()))
-        // Proxy all other routes (fallback)
-        .fallback(proxy::proxy_handler.layer(log_middleware))
+        // Proxy Linspirer APIs
+        .route("/public-interface.php", any(proxy::proxy_handler.layer(proxy_middleware)))
         .layer(CompressionLayer::new().gzip(true))
         .with_state(state);
 
diff --git a/src/middleware.rs b/src/middleware.rs
index c0e5380..7802e1e 100644
--- a/src/middleware.rs
+++ b/src/middleware.rs
@@ -18,7 +18,7 @@ enum ResponseBody {
     Modified(Value),
 }
 
-pub async fn log_middleware(
+pub async fn middleware(
     State(state): State<Arc<AppState>>,
     OriginalUri(uri): OriginalUri,
     req: Request<axum::body::Body>,
@@ -39,7 +39,7 @@ pub async fn log_middleware(
 
     let path = uri.path();
 
-    let (decrypted_request_log, method) = match str::from_utf8(&body_bytes)
+    let (decrypted_request_for_log, method) = match str::from_utf8(&body_bytes)
         .map_err(anyhow::Error::from)
         .and_then(|body| process_and_log_request(body, &state.key, &state.iv))
     {
@@ -125,7 +125,7 @@ pub async fn log_middleware(
     debug!(
         "{}\nRequest:\n{}\nResponse:\n{}\n{}",
         path,
-        serde_json::to_string_pretty(&decrypted_request_log).unwrap_or_default(),
+        serde_json::to_string_pretty(&decrypted_request_for_log).unwrap_or_default(),
         decrypted_response_for_log,
         "-".repeat(80),
     );