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/TableItem.js
+++ b/webui/static/js/components/TableItem.js
@@ -0,0 +1,130 @@
+import { html } from 'htm/preact';
+import { useState } from 'preact/hooks';
+import { FieldList } from './FieldList.js';
+
+const styles = {
+    tableItem: (isSelected, isExpanded) => ({
+        background: 'var(--bg-elevated)',
+        border: isSelected ? '1px solid var(--primary)' : '1px solid var(--border-color)',
+        borderRadius: 'var(--radius-md)',
+        overflow: 'hidden',
+        transition: 'var(--transition)',
+        boxShadow: isSelected ? '0 0 0 1px var(--primary)' : 'none'
+    }),
+    tableHeader: (isSelected) => ({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingLeft: '4px',
+        paddingRight: '12px',
+        cursor: 'pointer',
+        transition: 'var(--transition)',
+        background: isSelected ? 'var(--primary-bg)' : 'transparent'
+    }),
+    tableHeaderLeft: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        flex: 1,
+        minWidth: 0
+    },
+    expandIcon: (isExpanded) => ({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '32px',
+        height: '32px',
+        fontSize: '12px',
+        transition: 'var(--transition)',
+        flexShrink: 0,
+        borderRadius: 'var(--radius-sm)',
+        cursor: 'pointer',
+        color: isExpanded ? 'var(--primary)' : 'var(--text-secondary)',
+        transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+        marginLeft: '-4px'
+    }),
+    tableName: {
+        fontWeight: 500,
+        color: 'var(--text-primary)',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+    },
+    tableCount: {
+        fontSize: '12px',
+        color: 'var(--text-tertiary)',
+        whiteSpace: 'nowrap',
+        flexShrink: 0
+    }
+};
+
+export function TableItem({ table, isSelected, onSelect }) {
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    const toggleExpand = (e) => {
+        e.stopPropagation();
+        setIsExpanded(!isExpanded);
+    };
+
+    return html`
+        <div
+            style=${styles.tableItem(isSelected, isExpanded)}
+            onMouseEnter=${(e) => {
+                if (!isSelected) {
+                    e.currentTarget.style.borderColor = 'var(--border-hover)';
+                }
+            }}
+            onMouseLeave=${(e) => {
+                if (!isSelected) {
+                    e.currentTarget.style.borderColor = 'var(--border-color)';
+                }
+            }}
+        >
+            <!-- 表头 -->
+            <div
+                style=${styles.tableHeader(isSelected)}
+                onClick=${onSelect}
+                onMouseEnter=${(e) => {
+                    if (!isSelected) {
+                        e.currentTarget.style.background = 'var(--bg-hover)';
+                    }
+                }}
+                onMouseLeave=${(e) => {
+                    if (!isSelected) {
+                        e.currentTarget.style.background = 'transparent';
+                    }
+                }}
+            >
+                <div style=${styles.tableHeaderLeft}>
+                    <span
+                        style=${styles.expandIcon(isExpanded)}
+                        onClick=${toggleExpand}
+                        onMouseEnter=${(e) => {
+                            e.currentTarget.style.background = 'var(--bg-hover)';
+                            if (!isExpanded) {
+                                e.currentTarget.style.color = 'var(--text-primary)';
+                            }
+                        }}
+                        onMouseLeave=${(e) => {
+                            e.currentTarget.style.background = 'transparent';
+                            if (!isExpanded) {
+                                e.currentTarget.style.color = 'var(--text-secondary)';
+                            }
+                        }}
+                    >
+                        ▶
+                    </span>
+                    <span style=${styles.tableName}>${table.name}</span>
+                </div>
+                <span style=${styles.tableCount}>
+                    ${table.fields?.length || 0} fields
+                </span>
+            </div>
+
+            <!-- 字段列表 -->
+            ${isExpanded && html`
+                <${FieldList} fields=${table.fields} />
+            `}
+        </div>
+    `;
+}