feat: web frontend; middleware; serde (WIP?)

2025-11-30 09:41:37 +08:00
parent be35040e26
commit 531ac029af
45 changed files with 6806 additions and 82 deletions
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -0,0 +1,96 @@
+import { Component, createSignal, onMount, Show } from 'solid-js';
+import RulesList from './components/RulesList';
+import CommandQueue from './components/CommandQueue';
+import Login from './components/Login';
+import ChangePassword from './components/ChangePassword';
+import { authStore } from './api/auth';
+
+const App: Component = () => {
+  const [activeTab, setActiveTab] = createSignal<'rules' | 'commands'>('rules');
+  const [isAuthenticated, setIsAuthenticated] = createSignal(false);
+  const [showChangePassword, setShowChangePassword] = createSignal(false);
+
+  onMount(() => {
+    // Check if user is already authenticated
+    setIsAuthenticated(authStore.isAuthenticated());
+  });
+
+  const handleLoginSuccess = (token: string) => {
+    authStore.setToken(token);
+    setIsAuthenticated(true);
+  };
+
+  const handleLogout = () => {
+    authStore.clearToken();
+    setIsAuthenticated(false);
+  };
+
+  return (
+    <Show when={isAuthenticated()} fallback={<Login onLoginSuccess={handleLoginSuccess} />}>
+      <div class="min-h-screen bg-gray-100">
+        <header class="bg-white shadow">
+          <div class="max-w-7xl mx-auto px-4 py-6 flex justify-between items-center">
+            <h1 class="text-3xl font-bold text-gray-900">
+              My Linspirer Control Panel
+            </h1>
+            <div class="flex space-x-3">
+              <button
+                onClick={() => setShowChangePassword(true)}
+                class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              >
+                Change Password
+              </button>
+              <button
+                onClick={handleLogout}
+                class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              >
+                Logout
+              </button>
+            </div>
+          </div>
+        </header>
+
+        <nav class="bg-white border-b">
+          <div class="max-w-7xl mx-auto px-4">
+            <div class="flex space-x-8">
+              <button
+                onClick={() => setActiveTab('rules')}
+                class={`py-4 px-1 border-b-2 font-medium text-sm ${
+                  activeTab() === 'rules'
+                    ? 'border-indigo-500 text-indigo-600'
+                    : 'border-transparent text-gray-500 hover:text-gray-700'
+                }`}
+              >
+                Interception Rules
+              </button>
+              <button
+                onClick={() => setActiveTab('commands')}
+                class={`py-4 px-1 border-b-2 font-medium text-sm ${
+                  activeTab() === 'commands'
+                    ? 'border-indigo-500 text-indigo-600'
+                    : 'border-transparent text-gray-500 hover:text-gray-700'
+                }`}
+              >
+                Command Queue
+              </button>
+            </div>
+          </div>
+        </nav>
+
+        <main class="max-w-7xl mx-auto px-4 py-6">
+          {activeTab() === 'rules' && <RulesList />}
+          {activeTab() === 'commands' && <CommandQueue />}
+        </main>
+
+        <Show when={showChangePassword()}>
+          <ChangePassword
+            onClose={() => setShowChangePassword(false)}
+            onLogout={handleLogout}
+          />
+        </Show>
+      </div>
+    </Show>
+  );
+};
+
+export default App;