feat: WebUI 重构与更新

webui/static/js/components/FieldList.js

@@ -0,0 +1,105 @@
+import { html } from 'htm/preact';
+
+const styles = {
+    schemaFields: {
+        borderTop: '1px solid var(--border-color)',
+        position: 'relative',
+        transition: 'var(--transition)'
+    },
+    verticalLine: {
+        content: '""',
+        position: 'absolute',
+        left: '16px',
+        top: 0,
+        bottom: '14px',
+        width: '1px',
+        background: 'var(--border-color)',
+        zIndex: 2
+    },
+    fieldItem: {
+        zIndex: 1,
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        padding: '4px 12px 4px 16px',
+        fontSize: '12px',
+        transition: 'var(--transition)',
+        position: 'relative'
+    },
+    horizontalLine: {
+        width: '8px',
+        height: '1px',
+        background: 'var(--border-color)'
+    },
+    fieldIndexIcon: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: '12px',
+        flexShrink: 0
+    },
+    fieldName: {
+        fontWeight: 500,
+        color: 'var(--text-secondary)',
+        flex: 1,
+        display: 'flex',
+        alignItems: 'center',
+        gap: '4px'
+    },
+    fieldType: {
+        fontFamily: '"Courier New", monospace',
+        fontSize: '11px',
+        padding: '2px 6px',
+        background: 'var(--primary-bg)',
+        color: 'var(--primary)',
+        borderRadius: 'var(--radius-sm)',
+        fontWeight: 600
+    }
+};
+
+export function FieldList({ fields }) {
+    if (!fields || fields.length === 0) {
+        return null;
+    }
+
+    return html`
+        <div style=${styles.schemaFields}>
+            <!-- 垂直连接线 -->
+            <div style=${styles.verticalLine}></div>
+
+            ${fields.map((field) => {
+                return html`
+                    <div
+                        key=${field.name}
+                        style=${styles.fieldItem}
+                        onMouseEnter=${(e) => {
+                            e.currentTarget.style.background = 'var(--bg-hover)';
+                        }}
+                        onMouseLeave=${(e) => {
+                            e.currentTarget.style.background = 'transparent';
+                        }}
+                    >
+                        <!-- 水平连接线 -->
+                        <div style=${styles.horizontalLine}></div>
+
+                        <!-- 字段名称和索引图标 -->
+                        <span style=${styles.fieldName}>
+                            ${field.name}
+                            ${field.indexed && html`
+                                <span
+                                    style=${styles.fieldIndexIcon}
+                                    title="Indexed field"
+                                >
+                                    🔍
+                                </span>
+                            `}
+                        </span>
+
+                        <!-- 字段类型 -->
+                        <span style=${styles.fieldType}>${field.type}</span>
+                    </div>
+                `;
+            })}
+        </div>
+    `;
+}