chore(frontend): overflow-x-auto for RulesList

This commit is contained in:
2025-12-01 18:48:22 +08:00
parent f0c5af470e
commit d783cf2591
5 changed files with 84 additions and 102 deletions

View File

@@ -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 # Copy this to .env and fill in your values
# Required: AES-128 encryption key (16 characters) # Required: AES-128 encryption key (16 characters)

View File

@@ -26,6 +26,9 @@ const RulesList: Component = () => {
if (!confirm('Are you sure you want to delete this rule?')) return; if (!confirm('Are you sure you want to delete this rule?')) return;
try { try {
if (id === editingId()) {
setShowEditor(false);
}
await rulesApi.delete(id); await rulesApi.delete(id);
refetch(); refetch();
} catch (err) { } catch (err) {
@@ -126,28 +129,13 @@ const RulesList: Component = () => {
<label class="block text-sm font-medium text-gray-700 mb-1"> <label class="block text-sm font-medium text-gray-700 mb-1">
Method Name Method Name
</label> </label>
<Show <input
when={editingId() === null} type="text"
fallback={ value={editingMethod()}
<input onInput={(e) => setEditingMethod(e.currentTarget.value)}
type="text" class="w-full border border-gray-300 rounded-md px-3 py-2"
value={editingMethod()} placeholder="com.linspirer.method.name"
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>
</div> </div>
<div> <div>
@@ -190,74 +178,71 @@ const RulesList: Component = () => {
</Show> </Show>
<div class="bg-white shadow rounded-lg overflow-hidden"> <div class="bg-white shadow rounded-lg overflow-hidden">
<table class="min-w-full divide-y divide-gray-200"> <div class="overflow-x-auto">
<thead class="bg-gray-50"> <table class="min-w-full divide-y divide-gray-200">
<tr> <thead class="bg-gray-50">
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase"> <tr>
Method Name <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
</th> Method Name
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase"> </th>
Action <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
</th> Action
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase"> </th>
Status <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
</th> Status
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase"> </th>
Actions <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
</th> Actions
</tr> </th>
</thead> </tr>
<tbody class="bg-white divide-y divide-gray-200"> </thead>
<Show when={!rules.loading} fallback={ <tbody class="bg-white divide-y divide-gray-200">
<tr><td colspan="4" class="text-center py-4">Loading...</td></tr> <Show when={!rules.loading} fallback={
}> <tr><td colspan="4" class="text-center py-4">Loading...</td></tr>
<For each={rules()}> }>
{(rule) => ( <For each={rules()}>
<tr> {(rule) => (
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"> <tr>
{rule.method_name} <td class="px-6 py-4 text-sm font-medium text-gray-900">
</td> {rule.method_name}
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> </td>
<span class={`px-2 py-1 rounded-full text-xs ${ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
rule.action === 'replace' ? 'bg-purple-100 text-purple-800' : <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' : rule.action === 'modify' ? 'bg-blue-100 text-blue-800' :
'bg-gray-100 text-gray-800' 'bg-gray-100 text-gray-800'
}`}> }`}>
{rule.action} {rule.action}
</span> </span>
</td> </td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<button <button
onClick={() => toggleRule(rule)} onClick={() => toggleRule(rule)}
class={`px-3 py-1 rounded-md text-sm font-medium ${ class={`px-3 py-1 rounded-md text-sm font-medium ${rule.is_enabled
rule.is_enabled ? 'bg-green-100 text-green-800'
? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
: 'bg-gray-100 text-gray-800' }`}>
}`} {rule.is_enabled ? '✓ Enabled' : '✗ Disabled'}
> </button>
{rule.is_enabled ? '✓ Enabled' : '✗ Disabled'} </td>
</button> <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
</td> <button
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> onClick={() => startEdit(rule)}
<button class="text-indigo-600 hover:text-indigo-900 mr-4">
onClick={() => startEdit(rule)} Edit
class="text-indigo-600 hover:text-indigo-900 mr-4" </button>
> <button
Edit onClick={() => deleteRule(rule.id)}
</button> class="text-red-600 hover:text-red-900">
<button Delete
onClick={() => deleteRule(rule.id)} </button>
class="text-red-600 hover:text-red-900" </td>
> </tr>
Delete )}
</button> </For>
</td> </Show>
</tr> </tbody>
)} </table>
</For> </div>
</Show>
</tbody>
</table>
</div> </div>
</div> </div>
); );

View File

@@ -21,7 +21,6 @@ pub struct Tactics {
pub name: String, pub name: String,
#[serde_as(as = "BoolFromInt")] #[serde_as(as = "BoolFromInt")]
pub release_control: bool, pub release_control: bool,
// TODO: std::time::Instant
pub updated_at: String, pub updated_at: String,
#[serde(rename = "usergroup")] #[serde(rename = "usergroup")]
pub user_group: u32, pub user_group: u32,
@@ -42,7 +41,6 @@ pub struct AppTactics {
pub struct App { pub struct App {
#[serde(rename = "canuninstall")] #[serde(rename = "canuninstall")]
can_uninstall: bool, can_uninstall: bool,
// TODO: std::time::Instant
created_at: String, created_at: String,
#[serde(rename = "devicetype")] #[serde(rename = "devicetype")]
device_type: String, device_type: String,
@@ -67,7 +65,6 @@ pub struct App {
sort_weight: i32, sort_weight: i32,
status: i32, status: i32,
target_sdk_version: i32, target_sdk_version: i32,
// TODO: std::time::Instant
updated_at: String, updated_at: String,
#[serde(rename = "versioncode")] #[serde(rename = "versioncode")]
version_code: i32, version_code: i32,

View File

@@ -1,7 +1,7 @@
use std::{net::SocketAddr, sync::Arc}; use std::{net::SocketAddr, sync::Arc};
use anyhow::Context; use anyhow::Context;
use axum::Router; use axum::{Router, routing::any};
use axum::handler::Handler; use axum::handler::Handler;
use dotenvy::dotenv; use dotenvy::dotenv;
use tower_http::compression::CompressionLayer; use tower_http::compression::CompressionLayer;
@@ -80,15 +80,15 @@ async fn main() -> anyhow::Result<()> {
commands: Default::default(), commands: Default::default(),
}); });
let log_middleware = let proxy_middleware =
axum::middleware::from_fn_with_state(state.clone(), middleware::log_middleware); axum::middleware::from_fn_with_state(state.clone(), middleware::middleware);
// Build our application // Build our application
let app = Router::new() let app = Router::new()
// Admin routes // Admin routes
.nest("/admin", admin::routes::admin_routes(state.clone())) .nest("/admin", admin::routes::admin_routes(state.clone()))
// Proxy all other routes (fallback) // Proxy Linspirer APIs
.fallback(proxy::proxy_handler.layer(log_middleware)) .route("/public-interface.php", any(proxy::proxy_handler.layer(proxy_middleware)))
.layer(CompressionLayer::new().gzip(true)) .layer(CompressionLayer::new().gzip(true))
.with_state(state); .with_state(state);

View File

@@ -18,7 +18,7 @@ enum ResponseBody {
Modified(Value), Modified(Value),
} }
pub async fn log_middleware( pub async fn middleware(
State(state): State<Arc<AppState>>, State(state): State<Arc<AppState>>,
OriginalUri(uri): OriginalUri, OriginalUri(uri): OriginalUri,
req: Request<axum::body::Body>, req: Request<axum::body::Body>,
@@ -39,7 +39,7 @@ pub async fn log_middleware(
let path = uri.path(); 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) .map_err(anyhow::Error::from)
.and_then(|body| process_and_log_request(body, &state.key, &state.iv)) .and_then(|body| process_and_log_request(body, &state.key, &state.iv))
{ {
@@ -125,7 +125,7 @@ pub async fn log_middleware(
debug!( debug!(
"{}\nRequest:\n{}\nResponse:\n{}\n{}", "{}\nRequest:\n{}\nResponse:\n{}\n{}",
path, 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, decrypted_response_for_log,
"-".repeat(80), "-".repeat(80),
); );