bourdon
23843493b8
主要改动： - 重构目录结构：合并子目录到根目录，简化项目结构 - 添加完整的查询 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 优化：提取共享样式，减少重复代码 - 清理遗留代码：删除未使用的方法和样式
90 lines
2.6 KiB
JavaScript
90 lines
2.6 KiB
JavaScript
import { css } from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js';
|
|
|
|
// 共享的基础样式
|
|
export const sharedStyles = css`
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* 自定义滚动条样式 */
|
|
*::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
/* 通用状态样式 */
|
|
.empty {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: var(--text-secondary);
|
|
}
|
|
`;
|
|
|
|
// CSS 变量（可以在组件中使用，优先使用外部定义的变量）
|
|
export const cssVariables = css`
|
|
:host {
|
|
/* 主色调 - 优雅的紫蓝色 */
|
|
--primary: var(--srdb-primary, #6366f1);
|
|
--primary-dark: var(--srdb-primary-dark, #4f46e5);
|
|
--primary-light: var(--srdb-primary-light, #818cf8);
|
|
--primary-bg: var(--srdb-primary-bg, rgba(99, 102, 241, 0.1));
|
|
|
|
/* 背景色 */
|
|
--bg-main: var(--srdb-bg-main, #0f0f1a);
|
|
--bg-surface: var(--srdb-bg-surface, #1a1a2e);
|
|
--bg-elevated: var(--srdb-bg-elevated, #222236);
|
|
--bg-hover: var(--srdb-bg-hover, #2a2a3e);
|
|
|
|
/* 文字颜色 */
|
|
--text-primary: var(--srdb-text-primary, #ffffff);
|
|
--text-secondary: var(--srdb-text-secondary, #a0a0b0);
|
|
--text-tertiary: var(--srdb-text-tertiary, #6b6b7b);
|
|
|
|
/* 边框和分隔线 */
|
|
--border-color: var(--srdb-border-color, rgba(255, 255, 255, 0.1));
|
|
--border-hover: var(--srdb-border-hover, rgba(255, 255, 255, 0.2));
|
|
|
|
/* 状态颜色 */
|
|
--success: var(--srdb-success, #10b981);
|
|
--warning: var(--srdb-warning, #f59e0b);
|
|
--danger: var(--srdb-danger, #ef4444);
|
|
--info: var(--srdb-info, #3b82f6);
|
|
|
|
/* 阴影 */
|
|
--shadow-sm: var(--srdb-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.3));
|
|
--shadow-md: var(--srdb-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3));
|
|
--shadow-lg: var(--srdb-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3));
|
|
--shadow-xl: var(--srdb-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3));
|
|
|
|
/* 圆角 */
|
|
--radius-sm: var(--srdb-radius-sm, 6px);
|
|
--radius-md: var(--srdb-radius-md, 8px);
|
|
--radius-lg: var(--srdb-radius-lg, 12px);
|
|
--radius-xl: var(--srdb-radius-xl, 16px);
|
|
|
|
/* 过渡 */
|
|
--transition: var(--srdb-transition, all 0.2s cubic-bezier(0.4, 0, 0.2, 1));
|
|
}
|
|
`;
|