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 优化：提取共享样式，减少重复代码 - 清理遗留代码：删除未使用的方法和样式
107 lines
2.5 KiB
JavaScript
107 lines
2.5 KiB
JavaScript
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);
|