重构代码结构并添加完整功能
主要改动: - 重构目录结构:合并子目录到根目录,简化项目结构 - 添加完整的查询 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 优化:提取共享样式,减少重复代码 - 清理遗留代码:删除未使用的方法和样式
This commit is contained in:
106
webui/static/js/components/badge.js
Normal file
106
webui/static/js/components/badge.js
Normal file
@@ -0,0 +1,106 @@
|
||||
import { LitElement, html, css } from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js';
|
||||
import { sharedStyles, cssVariables } from '../styles/shared-styles.js';
|
||||
|
||||
export class Badge extends LitElement {
|
||||
static properties = {
|
||||
variant: { type: String }, // 'primary', 'success', 'warning', 'danger', 'info'
|
||||
icon: { type: String },
|
||||
size: { type: String } // 'sm', 'md'
|
||||
};
|
||||
|
||||
static styles = [
|
||||
sharedStyles,
|
||||
cssVariables,
|
||||
css`
|
||||
:host {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-sm);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.badge.size-md {
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Primary variant */
|
||||
.badge.variant-primary {
|
||||
--badge-border-color: rgba(99, 102, 241, 0.2);
|
||||
background: rgba(99, 102, 241, 0.15);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* Success variant */
|
||||
.badge.variant-success {
|
||||
--badge-border-color: rgba(16, 185, 129, 0.2);
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
/* Warning variant */
|
||||
.badge.variant-warning {
|
||||
--badge-border-color: rgba(245, 158, 11, 0.2);
|
||||
background: rgba(245, 158, 11, 0.15);
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
/* Danger variant */
|
||||
.badge.variant-danger {
|
||||
--badge-border-color: rgba(239, 68, 68, 0.2);
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
/* Info variant */
|
||||
.badge.variant-info {
|
||||
--badge-border-color: rgba(59, 130, 246, 0.2);
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
color: var(--info);
|
||||
}
|
||||
|
||||
/* Secondary variant */
|
||||
.badge.variant-secondary {
|
||||
--badge-border-color: rgba(160, 160, 176, 0.2);
|
||||
background: rgba(160, 160, 176, 0.15);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.badge.size-md .icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
`
|
||||
];
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.variant = 'primary';
|
||||
this.icon = '';
|
||||
this.size = 'sm';
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<span class="badge variant-${this.variant} size-${this.size}">
|
||||
${this.icon ? html`<span class="icon">${this.icon}</span>` : ''}
|
||||
<slot></slot>
|
||||
</span>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('srdb-badge', Badge);
|
||||
Reference in New Issue
Block a user