feat: WebUI 重构与更新

2025-10-12 13:06:05 +08:00
parent fc7eeb3696
commit 7ac4b99a9e
37 changed files with 2779 additions and 2874 deletions
--- a/webui/static/js/components/App.js
+++ b/webui/static/js/components/App.js
@@ -0,0 +1,148 @@
+import { html } from 'htm/preact';
+import { useState, useEffect } from 'preact/hooks';
+import { Sidebar } from './Sidebar.js';
+import { TableView } from './TableView.js';
+
+export function App() {
+    const [theme, setTheme] = useState('dark');
+    const [tables, setTables] = useState([]);
+    const [selectedTable, setSelectedTable] = useState(null);
+    const [loading, setLoading] = useState(true);
+
+    // 初始化主题
+    useEffect(() => {
+        const savedTheme = localStorage.getItem('srdb_theme') || 'dark';
+        setTheme(savedTheme);
+        if (savedTheme === 'light') {
+            document.documentElement.setAttribute('data-theme', 'light');
+        }
+    }, []);
+
+    // 加载表列表
+    useEffect(() => {
+        fetchTables();
+    }, []);
+
+    const fetchTables = async () => {
+        try {
+            setLoading(true);
+            const response = await fetch('/api/tables');
+            if (response.ok) {
+                const data = await response.json();
+                setTables(data.tables || []);
+                if (data.tables && data.tables.length > 0) {
+                    setSelectedTable(data.tables[0].name);
+                }
+            }
+        } catch (error) {
+            console.error('Failed to fetch tables:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const toggleTheme = () => {
+        const newTheme = theme === 'dark' ? 'light' : 'dark';
+        setTheme(newTheme);
+        localStorage.setItem('srdb_theme', newTheme);
+
+        if (newTheme === 'light') {
+            document.documentElement.setAttribute('data-theme', 'light');
+        } else {
+            document.documentElement.removeAttribute('data-theme');
+        }
+    };
+
+    const styles = {
+        container: {
+            display: 'flex',
+            height: '100vh',
+            overflow: 'hidden'
+        },
+        sidebar: {
+            width: '280px',
+            background: 'var(--bg-surface)',
+            borderRight: '1px solid var(--border-color)',
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            padding: '16px 12px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '8px'
+        },
+        sidebarHeader: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginBottom: '4px'
+        },
+        sidebarTitle: {
+            fontSize: '18px',
+            fontWeight: 700,
+            letterSpacing: '-0.02em',
+            background: 'linear-gradient(135deg, #667eea, #764ba2)',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+            margin: 0
+        },
+        themeToggle: {
+            width: '32px',
+            height: '32px',
+            background: 'var(--bg-elevated)',
+            border: '1px solid var(--border-color)',
+            borderRadius: 'var(--radius-md)',
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: '16px',
+            transition: 'var(--transition)'
+        },
+        main: {
+            flex: 1,
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            background: 'var(--bg-main)',
+            padding: '24px'
+        }
+    };
+
+    return html`
+        <div style=${styles.container}>
+            <!-- 左侧侧边栏 -->
+            <div style=${styles.sidebar}>
+                <div style=${styles.sidebarHeader}>
+                    <h1 style=${styles.sidebarTitle}>SRDB Tables</h1>
+                    <button
+                        style=${styles.themeToggle}
+                        onClick=${toggleTheme}
+                        onMouseEnter=${(e) => e.target.style.background = 'var(--bg-hover)'}
+                        onMouseLeave=${(e) => e.target.style.background = 'var(--bg-elevated)'}
+                        title=${theme === 'dark' ? '切换到浅色主题' : '切换到深色主题'}
+                    >
+                        ${theme === 'dark' ? '☀️' : '🌙'}
+                    </button>
+                </div>
+                <${Sidebar}
+                    tables=${tables}
+                    selectedTable=${selectedTable}
+                    onSelectTable=${setSelectedTable}
+                    loading=${loading}
+                />
+            </div>
+
+            <!-- 右侧主内容区 -->
+            <div style=${styles.main}>
+                ${!selectedTable && html`
+                    <div class="empty">
+                        <p>Select a table from the sidebar</p>
+                    </div>
+                `}
+
+                ${selectedTable && html`
+                    <${TableView} tableName=${selectedTable} key=${selectedTable} />
+                `}
+            </div>
+        </div>
+    `;
+}