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
# 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;
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>
);

View File

@@ -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,

View File

@@ -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);

View File

@@ -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),
);