imxyy1soope1/mylinspirer
1
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): request logs; refactor frontend components

Browse Source
This commit is contained in:
imxyy_soope_
2025-12-01 18:48:22 +08:00
parent d783cf2591
commit a9cb9510c5
28 changed files with 649 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/components/RulesList.tsx
View File

@@ -1,6 +1,11 @@
import { Component, createSignal, createResource, For, Show } from 'solid-js';
import { rulesApi } from '../api/client';
import type { InterceptionRule } from '../types';
import { Button } from './ui/Button';
import { Card } from './ui/Card';
import { Input } from './ui/Input';
import { Select } from './ui/Select';
import { Textarea } from './ui/Textarea';
const RulesList: Component = () => {
const [rules, { refetch }] = createResource(rulesApi.list);
@@ -105,7 +110,7 @@ const RulesList: Component = () => {
<div class="space-y-4">
<div class="flex justify-between items-center">
<h2 class="text-2xl font-semibold">Interception Rules</h2>
<button
<Button
onClick={() => {
if (showEditor()) {
cancelEdit();
@@ -113,14 +118,13 @@ const RulesList: Component = () => {
setShowEditor(true);
}
}}
class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700"
>
{showEditor() ? 'Cancel' : '+ New Rule'}
</button>
</Button>
</div>
<Show when={showEditor()}>
<div class="bg-white shadow rounded-lg p-6 mb-4">
<Card class="p-6 mb-4">
<h3 class="text-lg font-semibold mb-4">
{editingId() !== null ? 'Edit Rule' : 'Create New Rule'}
</h3>
@@ -129,11 +133,10 @@ const RulesList: Component = () => {
<label class="block text-sm font-medium text-gray-700 mb-1">
Method Name
</label>
<input
<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>
@@ -142,14 +145,13 @@ const RulesList: Component = () => {
<label class="block text-sm font-medium text-gray-700 mb-1">
Action
</label>
<select
<Select
value={editingAction()}
onChange={(e) => setEditingAction(e.currentTarget.value as any)}
class="w-full border border-gray-300 rounded-md px-3 py-2"
>
<option value="passthrough">Passthrough (Forward to server)</option>
<option value="replace">Replace (Custom response)</option>
</select>
</Select>
</div>
<Show when={editingAction() === 'replace'}>
@@ -157,27 +159,25 @@ const RulesList: Component = () => {
<label class="block text-sm font-medium text-gray-700 mb-1">
Custom Response (JSON)
</label>
<textarea
<Textarea
value={editingResponse()}
onInput={(e) => setEditingResponse(e.currentTarget.value)}
rows={10}
class="w-full border border-gray-300 rounded-md px-3 py-2 font-mono text-sm"
placeholder='{"code": 0, "type": "object", "data": {...}}'
/>
</div>
</Show>
<button
<Button
onClick={saveEdit}
class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700"
>
{editingId() !== null ? 'Update Rule' : 'Create Rule'}
</button>
</Button>
</div>
</div>
</Card>
</Show>
<div class="bg-white shadow rounded-lg overflow-hidden">
<Card>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
@@ -225,16 +225,18 @@ const RulesList: Component = () => {
</button>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button
<Button
variant="ghost"
onClick={() => startEdit(rule)}
class="text-indigo-600 hover:text-indigo-900 mr-4">
class="mr-4">
Edit
</button>
<button
</Button>
<Button
variant="link"
onClick={() => deleteRule(rule.id)}
class="text-red-600 hover:text-red-900">
>
Delete
</button>
</Button>
</td>
</tr>
)}
@@ -243,7 +245,7 @@ const RulesList: Component = () => {
</tbody>
</table>
</div>
</div>
</Card>
</div>
);
};