重构代码结构并添加完整功能

主要改动：
- 重构目录结构：合并子目录到根目录，简化项目结构
- 添加完整的查询 API：支持复杂条件查询、字段选择、游标模式
- 实现 LSM-Tree Compaction：7层结构、Score-based策略、后台异步合并
- 添加 Web UI：基于 Lit 的现代化管理界面，支持数据浏览和 Manifest 查看
- 完善文档：添加 README.md 和 examples/webui/README.md

新增功能：
- Query Builder：链式查询 API，支持 Eq/Lt/Gt/In/Between/Contains 等操作符
- Web UI 组件：srdb-app、srdb-table-list、srdb-data-view、srdb-manifest-view 等
- 列选择持久化：自动保存到 localStorage
- 刷新按钮：一键刷新当前视图
- 主题切换：深色/浅色主题支持

代码优化：
- 使用 Go 1.24 新特性：range 7、min()、maps.Copy()、slices.Sort()
- 统一组件命名：所有 Web Components 使用 srdb-* 前缀
- CSS 优化：提取共享样式，减少重复代码
- 清理遗留代码：删除未使用的方法和样式

webui/static/js/app.js

@@ -1,199 +1,110 @@
-// SRDB WebUI - htmx 版本
+import './components/app.js';
+import './components/table-list.js';
+import './components/table-view.js';
+import './components/modal-dialog.js';
+import './components/theme-toggle.js';
+import './components/badge.js';
+import './components/field-icon.js';
+import './components/data-view.js';
+import './components/manifest-view.js';
+import './components/page-header.js';
 
-// 全局状态
-window.srdbState = {
-  selectedTable: null,
-  currentPage: 1,
-  pageSize: 20,
-  selectedColumns: [],
-  expandedTables: new Set(),
-  expandedLevels: new Set([0, 1]),
-};
+class App {
+  constructor() {
+    // 等待 srdb-app 组件渲染完成
+    this.appContainer = document.querySelector('srdb-app');
+    this.modal = document.querySelector('srdb-modal-dialog');
+    
+    // 等待组件初始化
+    if (this.appContainer) {
+      // 使用 updateComplete 等待组件渲染完成
+      this.appContainer.updateComplete.then(() => {
+        this.tableList = this.appContainer.shadowRoot.querySelector('srdb-table-list');
+        this.tableView = this.appContainer.shadowRoot.querySelector('srdb-table-view');
+        this.pageHeader = this.appContainer.shadowRoot.querySelector('srdb-page-header');
+        this.setupEventListeners();
+      });
+    } else {
+      // 如果组件还未定义，等待它被定义
+      customElements.whenDefined('srdb-app').then(() => {
+        this.appContainer = document.querySelector('srdb-app');
+        this.appContainer.updateComplete.then(() => {
+          this.tableList = this.appContainer.shadowRoot.querySelector('srdb-table-list');
+          this.tableView = this.appContainer.shadowRoot.querySelector('srdb-table-view');
+          this.pageHeader = this.appContainer.shadowRoot.querySelector('srdb-page-header');
+          this.setupEventListeners();
+        });
+      });
+    }
+  }
 
-// 选择表格
-function selectTable(tableName) {
-  window.srdbState.selectedTable = tableName;
-  window.srdbState.currentPage = 1;
-
-  // 高亮选中的表
-  document.querySelectorAll(".table-item").forEach((el) => {
-    el.classList.toggle("selected", el.dataset.table === tableName);
-  });
-
-  // 加载表数据
-  loadTableData(tableName);
-}
-
-// 加载表数据
-function loadTableData(tableName) {
-  const mainContent = document.getElementById("main-content");
-  mainContent.innerHTML = '<div class="loading">Loading...</div>';
-
-  fetch(
-    `/api/tables-view/${tableName}?page=${window.srdbState.currentPage}&pageSize=${window.srdbState.pageSize}`,
-  )
-    .then((res) => res.text())
-    .then((html) => {
-      mainContent.innerHTML = html;
-    })
-    .catch((err) => {
-      console.error("Failed to load table data:", err);
-      mainContent.innerHTML =
-        '<div class="error">Failed to load table data</div>';
+  setupEventListeners() {
+    // Listen for table selection
+    document.addEventListener('table-selected', (e) => {
+      const tableName = e.detail.tableName;
+      this.pageHeader.tableName = tableName;
+      this.pageHeader.view = 'data';
+      this.tableView.tableName = tableName;
+      this.tableView.view = 'data';
+      this.tableView.page = 1;
     });
-}
 
-// 切换视图 (Data / Manifest)
-function switchView(tableName, mode) {
-  const mainContent = document.getElementById("main-content");
-  mainContent.innerHTML = '<div class="loading">Loading...</div>';
-
-  const endpoint =
-    mode === "manifest"
-      ? `/api/tables-view/${tableName}/manifest`
-      : `/api/tables-view/${tableName}?page=${window.srdbState.currentPage}&pageSize=${window.srdbState.pageSize}`;
-
-  fetch(endpoint)
-    .then((res) => res.text())
-    .then((html) => {
-      mainContent.innerHTML = html;
+    // Listen for view change from page-header
+    document.addEventListener('view-changed', (e) => {
+      this.tableView.view = e.detail.view;
     });
-}
 
-// 分页
-function changePage(delta) {
-  window.srdbState.currentPage += delta;
-  if (window.srdbState.selectedTable) {
-    loadTableData(window.srdbState.selectedTable);
-  }
-}
-
-function jumpToPage(page) {
-  window.srdbState.currentPage = parseInt(page);
-  if (window.srdbState.selectedTable) {
-    loadTableData(window.srdbState.selectedTable);
-  }
-}
-
-function changePageSize(newSize) {
-  window.srdbState.pageSize = parseInt(newSize);
-  window.srdbState.currentPage = 1;
-  if (window.srdbState.selectedTable) {
-    loadTableData(window.srdbState.selectedTable);
-  }
-}
-
-// Modal 相关
-function showModal(title, content) {
-  document.getElementById("modal-title").textContent = title;
-  document.getElementById("modal-body-content").textContent = content;
-  document.getElementById("modal").style.display = "flex";
-}
-
-function closeModal() {
-  document.getElementById("modal").style.display = "none";
-}
-
-function showCellContent(content) {
-  showModal("Cell Content", content);
-}
-
-function showRowDetail(tableName, seq) {
-  fetch(`/api/tables/${tableName}/data/${seq}`)
-    .then((res) => res.json())
-    .then((data) => {
-      const formatted = JSON.stringify(data, null, 2);
-      showModal(`Row Detail (Seq: ${seq})`, formatted);
-    })
-    .catch((err) => {
-      console.error("Failed to load row detail:", err);
-      alert("Failed to load row detail");
+    // Listen for refresh request from page-header
+    document.addEventListener('refresh-view', (e) => {
+      this.tableView.loadData();
     });
-}
 
-// 折叠展开
-function toggleExpand(tableName) {
-  const item = document.querySelector(`[data-table="${tableName}"]`);
-  const fieldsDiv = item.querySelector(".schema-fields");
-  const icon = item.querySelector(".expand-icon");
+    // Listen for row detail request
+    document.addEventListener('show-row-detail', async (e) => {
+      const { tableName, seq } = e.detail;
+      await this.showRowDetail(tableName, seq);
+    });
 
-  if (window.srdbState.expandedTables.has(tableName)) {
-    window.srdbState.expandedTables.delete(tableName);
-    fieldsDiv.style.display = "none";
-    icon.classList.remove("expanded");
-  } else {
-    window.srdbState.expandedTables.add(tableName);
-    fieldsDiv.style.display = "block";
-    icon.classList.add("expanded");
+    // Listen for cell content request
+    document.addEventListener('show-cell-content', (e) => {
+      this.showCellContent(e.detail.content);
+    });
+
+    // Close modal on backdrop click
+    this.modal.addEventListener('click', () => {
+      this.modal.open = false;
+    });
+  }
+
+  async showRowDetail(tableName, seq) {
+    try {
+      const response = await fetch(`/api/tables/${tableName}/data/${seq}`);
+      if (!response.ok) throw new Error('Failed to load row detail');
+      
+      const data = await response.json();
+      const content = JSON.stringify(data, null, 2);
+      
+      this.modal.title = `Row Detail - Seq: ${seq}`;
+      this.modal.content = content;
+      this.modal.open = true;
+    } catch (error) {
+      console.error('Error loading row detail:', error);
+      this.modal.title = 'Error';
+      this.modal.content = `Failed to load row detail: ${error.message}`;
+      this.modal.open = true;
+    }
+  }
+
+  showCellContent(content) {
+    this.modal.title = 'Cell Content';
+    this.modal.content = String(content);
+    this.modal.open = true;
   }
 }
 
-function toggleLevel(level) {
-  const levelCard = document.querySelector(`[data-level="${level}"]`);
-  const fileList = levelCard.querySelector(".file-list");
-  const icon = levelCard.querySelector(".expand-icon");
-
-  if (window.srdbState.expandedLevels.has(level)) {
-    window.srdbState.expandedLevels.delete(level);
-    fileList.style.display = "none";
-    icon.classList.remove("expanded");
-  } else {
-    window.srdbState.expandedLevels.add(level);
-    fileList.style.display = "grid";
-    icon.classList.add("expanded");
-  }
-}
-
-// 格式化工具
-function formatBytes(bytes) {
-  if (bytes === 0) return "0 B";
-  const k = 1024;
-  const sizes = ["B", "KB", "MB", "GB"];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return (bytes / Math.pow(k, i)).toFixed(2) + " " + sizes[i];
-}
-
-function formatCount(count) {
-  if (count >= 1000000) return (count / 1000000).toFixed(1) + "M";
-  if (count >= 1000) return (count / 1000).toFixed(1) + "K";
-  return count.toString();
-}
-
-// 点击 modal 外部关闭
-document.addEventListener("click", (e) => {
-  const modal = document.getElementById("modal");
-  if (e.target === modal) {
-    closeModal();
-  }
-});
-
-// ESC 键关闭 modal
-document.addEventListener("keydown", (e) => {
-  if (e.key === "Escape") {
-    closeModal();
-  }
-});
-
-// 切换列显示
-function toggleColumn(columnName) {
-  // 切换 schema-field-card 的选中状态
-  const card = document.querySelector(
-    `.schema-field-card[data-column="${columnName}"]`,
-  );
-  if (!card) return;
-
-  card.classList.toggle("selected");
-  const isSelected = card.classList.contains("selected");
-
-  // 切换表格列的显示/隐藏
-  const headers = document.querySelectorAll(`th[data-column="${columnName}"]`);
-  const cells = document.querySelectorAll(`td[data-column="${columnName}"]`);
-
-  headers.forEach((header) => {
-    header.style.display = isSelected ? "" : "none";
-  });
-
-  cells.forEach((cell) => {
-    cell.style.display = isSelected ? "" : "none";
-  });
+// Initialize app when DOM is ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => new App());
+} else {
+  new App();
 }