feat(log-center): 日志中心 v4 全量组件 — 统一查询面板/时间选择器/统计图表/聚类/数据源管理

2026-06-27 11:41:50 +08:00
1 parent 880cf050fe
commit bdf3c2daf4
@@ -0,0 +1,64 @@
+// QuickQueryHelper.tsx — 快捷查询语法助手 // Logan.Li
+import { useState } from 'react';
+import { ChevronDown, ChevronUp, Zap } from 'lucide-react';
+import type { LogEngine } from './types-v3';
+import { QUICK_TEMPLATES } from './types-v3';
+
+interface Props {
+  engine: LogEngine;
+  onSelect: (query: string) => void;
+}
+
+const ENGINE_NAMES: Record<LogEngine, string> = {
+  loki: 'LogQL',
+  elasticsearch: 'Lucene',
+  sls: 'SQL/SPL',
+};
+
+export function QuickQueryHelper({ engine, onSelect }: Props) {
+  const [open, setOpen] = useState(false);
+  const templates = QUICK_TEMPLATES[engine];
+
+  return (
+    <div>
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-1 text-[11px] px-2 py-1 rounded transition-colors"
+        style={{ color: 'var(--dg-blue)', background: open ? 'var(--dg-bg-tertiary)' : 'transparent' }}
+      >
+        <Zap className="h-3 w-3" />
+        快捷查询
+        {open ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
+      </button>
+
+      {open && (
+        <div
+          className="mt-2 p-3 rounded-lg border animate-fade-in"
+          style={{ background: 'var(--dg-bg-secondary)', borderColor: 'var(--dg-border)' }}
+        >
+          <p className="text-[10px] mb-2" style={{ color: 'var(--dg-text-muted)' }}>
+            {ENGINE_NAMES[engine]} 常用查询模板，点击快速填充
+          </p>
+          <div className="grid grid-cols-2 gap-1.5">
+            {templates.map((t, i) => (
+              <button
+                key={i}
+                onClick={() => { onSelect(t.query); setOpen(false); }}
+                className="text-left px-2 py-1.5 rounded border text-[11px] transition-all hover:border-blue-400"
+                style={{
+                  background: 'var(--dg-bg-tertiary)',
+                  borderColor: 'var(--dg-border)',
+                  color: 'var(--dg-text-secondary)',
+                }}
+                title={t.query}
+              >
+                <span className="font-medium block truncate" style={{ color: 'var(--dg-text-primary)' }}>{t.label}</span>
+                <span className="block truncate opacity-60 font-mono mt-0.5">{t.query}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}