feat: WebUI 重构与更新

webui/static/js/components/TableCell.js

@@ -0,0 +1,72 @@
+import { html } from 'htm/preact';
+
+const styles = {
+    td: {
+        padding: '10px 12px',
+        borderBottom: '1px solid var(--border-color)',
+        color: 'var(--text-primary)',
+        maxWidth: '300px',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        cursor: 'pointer'
+    }
+};
+
+function formatValue(value, col) {
+    if (col === '_time') {
+        return formatTime(value);
+    }
+
+    if (value === null) return 'null';
+    if (value === undefined) return 'undefined';
+
+    if (typeof value === 'object') {
+        try {
+            return JSON.stringify(value, null, 2);
+        } catch (e) {
+            return '[Object]';
+        }
+    }
+
+    return String(value);
+}
+
+function formatTime(nanoTime) {
+    if (!nanoTime) return '';
+    const date = new Date(nanoTime / 1000000);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+
+export function TableCell({ value, column, isTruncated, onShowPopover, onHidePopover }) {
+    const formattedValue = formatValue(value, column);
+
+    const handleMouseEnter = (e) => {
+        if (onShowPopover) {
+            onShowPopover(e, formattedValue);
+        }
+    };
+
+    const handleMouseLeave = () => {
+        if (onHidePopover) {
+            onHidePopover();
+        }
+    };
+
+    return html`
+        <td
+            style=${styles.td}
+            onMouseEnter=${handleMouseEnter}
+            onMouseLeave=${handleMouseLeave}
+        >
+            ${formattedValue}
+            ${isTruncated && html`<span style=${{ marginLeft: '4px', fontSize: '10px' }}>✂️</span>`}
+        </td>
+    `;
+}