@qhr123/sa2kit 0.7.1 → 0.8.0

package/dist/analytics/index.mjs

@@ -1,5 +1,5 @@
 import '../chunk-BJTO5JO5.mjs';
-import { useEffect, useCallback, useRef } from 'react';
+import React5, { useEffect, useCallback, useRef, useState } from 'react';
 
 // src/analytics/types.ts
 var EventType = /* @__PURE__ */ ((EventType2) => {
@@ -1840,10 +1840,686 @@ var DesktopDeviceAdapter = class {
     return navigator.userAgent;
   }
 };
+var StatCard = ({
+  title,
+  value,
+  subtitle,
+  icon,
+  trend,
+  className = ""
+}) => {
+  return /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      className: `bg-white rounded-lg shadow-sm p-6 border border-gray-200 hover:shadow-md transition-shadow ${className}`
+    },
+    /* @__PURE__ */ React5.createElement("div", { className: "flex items-start justify-between" }, /* @__PURE__ */ React5.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React5.createElement("p", { className: "text-sm font-medium text-gray-600 mb-1" }, title), /* @__PURE__ */ React5.createElement("p", { className: "text-3xl font-bold text-gray-900" }, value.toLocaleString()), subtitle && /* @__PURE__ */ React5.createElement("p", { className: "text-sm text-gray-500 mt-2" }, subtitle), trend && /* @__PURE__ */ React5.createElement("div", { className: "flex items-center mt-2" }, /* @__PURE__ */ React5.createElement(
+      "span",
+      {
+        className: `text-sm font-medium ${trend.isPositive ? "text-green-600" : "text-red-600"}`
+      },
+      trend.isPositive ? "\u2191" : "\u2193",
+      " ",
+      Math.abs(trend.value),
+      "%"
+    ), /* @__PURE__ */ React5.createElement("span", { className: "text-sm text-gray-500 ml-2" }, "vs \u4E0A\u5468"))), icon && /* @__PURE__ */ React5.createElement("div", { className: "flex-shrink-0 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-lg p-3" }, /* @__PURE__ */ React5.createElement("div", { className: "text-white text-2xl" }, icon)))
+  );
+};
+var EventList = ({
+  events,
+  loading = false,
+  onEventClick,
+  className = ""
+}) => {
+  if (loading) {
+    return /* @__PURE__ */ React5.createElement("div", { className: `bg-white rounded-lg shadow-sm p-6 ${className}` }, /* @__PURE__ */ React5.createElement("div", { className: "animate-pulse space-y-4" }, [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ React5.createElement("div", { key: i, className: "h-16 bg-gray-200 rounded" }))));
+  }
+  if (events.length === 0) {
+    return /* @__PURE__ */ React5.createElement("div", { className: `bg-white rounded-lg shadow-sm p-12 text-center ${className}` }, /* @__PURE__ */ React5.createElement("div", { className: "text-gray-400 text-5xl mb-4" }, "\u{1F4CA}"), /* @__PURE__ */ React5.createElement("p", { className: "text-gray-600 text-lg font-medium" }, "\u6682\u65E0\u6570\u636E"), /* @__PURE__ */ React5.createElement("p", { className: "text-gray-500 text-sm mt-2" }, "\u5C1D\u8BD5\u8C03\u6574\u7B5B\u9009\u6761\u4EF6"));
+  }
+  const getPlatformColor = (platform) => {
+    const colors = {
+      web: "bg-blue-100 text-blue-800",
+      mobile: "bg-green-100 text-green-800",
+      miniapp: "bg-purple-100 text-purple-800",
+      desktop: "bg-gray-100 text-gray-800"
+    };
+    return colors[platform] || "bg-gray-100 text-gray-800";
+  };
+  const getEventTypeColor = (eventType) => {
+    const colors = {
+      page_view: "bg-indigo-100 text-indigo-800",
+      click: "bg-amber-100 text-amber-800",
+      error: "bg-red-100 text-red-800",
+      performance: "bg-cyan-100 text-cyan-800",
+      api_call: "bg-emerald-100 text-emerald-800"
+    };
+    return colors[eventType] || "bg-gray-100 text-gray-800";
+  };
+  const formatTimestamp2 = (timestamp) => {
+    const date = new Date(timestamp);
+    const now = /* @__PURE__ */ new Date();
+    const diff = now.getTime() - date.getTime();
+    const minutes = Math.floor(diff / 6e4);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+    if (minutes < 1) return "\u521A\u521A";
+    if (minutes < 60) return `${minutes}\u5206\u949F\u524D`;
+    if (hours < 24) return `${hours}\u5C0F\u65F6\u524D`;
+    if (days < 7) return `${days}\u5929\u524D`;
+    return date.toLocaleDateString("zh-CN");
+  };
+  return /* @__PURE__ */ React5.createElement("div", { className: `bg-white rounded-lg shadow-sm overflow-hidden ${className}` }, /* @__PURE__ */ React5.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ React5.createElement("table", { className: "min-w-full divide-y divide-gray-200" }, /* @__PURE__ */ React5.createElement("thead", { className: "bg-gray-50" }, /* @__PURE__ */ React5.createElement("tr", null, /* @__PURE__ */ React5.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" }, "\u4E8B\u4EF6"), /* @__PURE__ */ React5.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" }, "\u5E73\u53F0"), /* @__PURE__ */ React5.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" }, "\u9875\u9762"), /* @__PURE__ */ React5.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" }, "\u7528\u6237"), /* @__PURE__ */ React5.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" }, "\u65F6\u95F4"), /* @__PURE__ */ React5.createElement("th", { className: "px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider" }, "\u64CD\u4F5C"))), /* @__PURE__ */ React5.createElement("tbody", { className: "bg-white divide-y divide-gray-200" }, events.map((event) => /* @__PURE__ */ React5.createElement(
+    "tr",
+    {
+      key: event.id,
+      className: "hover:bg-gray-50 cursor-pointer transition-colors",
+      onClick: () => onEventClick?.(event)
+    },
+    /* @__PURE__ */ React5.createElement("td", { className: "px-6 py-4 whitespace-nowrap" }, /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React5.createElement(
+      "span",
+      {
+        className: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getEventTypeColor(
+          event.eventType
+        )} w-fit mb-1`
+      },
+      event.eventType
+    ), /* @__PURE__ */ React5.createElement("span", { className: "text-sm text-gray-900" }, event.eventName))),
+    /* @__PURE__ */ React5.createElement("td", { className: "px-6 py-4 whitespace-nowrap" }, /* @__PURE__ */ React5.createElement(
+      "span",
+      {
+        className: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getPlatformColor(
+          event.platform
+        )}`
+      },
+      event.platform
+    )),
+    /* @__PURE__ */ React5.createElement("td", { className: "px-6 py-4" }, /* @__PURE__ */ React5.createElement("div", { className: "text-sm text-gray-900 max-w-xs truncate" }, event.pageUrl || "-"), event.pageTitle && /* @__PURE__ */ React5.createElement("div", { className: "text-xs text-gray-500 max-w-xs truncate" }, event.pageTitle)),
+    /* @__PURE__ */ React5.createElement("td", { className: "px-6 py-4 whitespace-nowrap" }, /* @__PURE__ */ React5.createElement("div", { className: "text-sm text-gray-900" }, event.userId || "\u6E38\u5BA2"), /* @__PURE__ */ React5.createElement("div", { className: "text-xs text-gray-500" }, event.deviceId.slice(0, 8), "...")),
+    /* @__PURE__ */ React5.createElement("td", { className: "px-6 py-4 whitespace-nowrap" }, /* @__PURE__ */ React5.createElement("div", { className: "text-sm text-gray-900" }, formatTimestamp2(event.timestamp)), /* @__PURE__ */ React5.createElement("div", { className: "text-xs text-gray-500" }, new Date(event.timestamp).toLocaleTimeString("zh-CN"))),
+    /* @__PURE__ */ React5.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm font-medium" }, /* @__PURE__ */ React5.createElement(
+      "button",
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          onEventClick?.(event);
+        },
+        className: "text-indigo-600 hover:text-indigo-900"
+      },
+      "\u8BE6\u60C5"
+    ))
+  ))))));
+};
+var FilterPanel = ({
+  onFilterChange,
+  initialFilters = {},
+  className = ""
+}) => {
+  const [filters, setFilters] = useState(initialFilters);
+  const handleDatePreset = (preset) => {
+    const now = /* @__PURE__ */ new Date();
+    let startDate = /* @__PURE__ */ new Date();
+    switch (preset) {
+      case "today":
+        startDate.setHours(0, 0, 0, 0);
+        break;
+      case "yesterday":
+        startDate.setDate(now.getDate() - 1);
+        startDate.setHours(0, 0, 0, 0);
+        now.setDate(now.getDate() - 1);
+        now.setHours(23, 59, 59, 999);
+        break;
+      case "week":
+        startDate.setDate(now.getDate() - 7);
+        break;
+      case "month":
+        startDate.setMonth(now.getMonth() - 1);
+        break;
+      default:
+        return;
+    }
+    const newFilters = {
+      ...filters,
+      dateRange: {
+        startDate: startDate.toISOString(),
+        endDate: now.toISOString()
+      }
+    };
+    setFilters(newFilters);
+    onFilterChange(newFilters);
+  };
+  const handleFilterChange = (key, value) => {
+    const newFilters = {
+      ...filters,
+      [key]: value || void 0
+    };
+    setFilters(newFilters);
+    onFilterChange(newFilters);
+  };
+  const handleReset = () => {
+    const emptyFilters = {};
+    setFilters(emptyFilters);
+    onFilterChange(emptyFilters);
+  };
+  return /* @__PURE__ */ React5.createElement("div", { className: `bg-white rounded-xl shadow-sm border border-gray-200 ${className}` }, /* @__PURE__ */ React5.createElement("div", { className: "flex items-center justify-between mb-4 p-4 bg-gradient-to-r from-gray-50 to-gray-100 -m-6 mb-4 rounded-t-xl border-b border-gray-200" }, /* @__PURE__ */ React5.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React5.createElement(
+    "svg",
+    {
+      className: "w-5 h-5 text-indigo-600",
+      fill: "none",
+      stroke: "currentColor",
+      viewBox: "0 0 24 24"
+    },
+    /* @__PURE__ */ React5.createElement(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+      }
+    )
+  ), /* @__PURE__ */ React5.createElement("h3", { className: "text-sm font-semibold text-gray-900" }, "\u7B5B\u9009\u6761\u4EF6")), /* @__PURE__ */ React5.createElement(
+    "button",
+    {
+      onClick: handleReset,
+      className: "text-xs px-3 py-1 text-gray-600 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors"
+    },
+    "\u91CD\u7F6E"
+  )), /* @__PURE__ */ React5.createElement("div", { className: "p-4 space-y-4" }, /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement("label", { className: "block text-xs font-semibold text-gray-700 mb-2" }, "\u65F6\u95F4\u8303\u56F4"), /* @__PURE__ */ React5.createElement("div", { className: "grid grid-cols-2 gap-2" }, [
+    { label: "\u4ECA\u5929", value: "today" },
+    { label: "\u6628\u5929", value: "yesterday" },
+    { label: "7\u5929", value: "week" },
+    { label: "30\u5929", value: "month" }
+  ].map((preset) => /* @__PURE__ */ React5.createElement(
+    "button",
+    {
+      key: preset.value,
+      onClick: () => handleDatePreset(preset.value),
+      className: "px-3 py-1.5 text-xs font-medium border border-gray-300 rounded-lg hover:bg-indigo-50 hover:border-indigo-500 hover:text-indigo-700 transition-colors"
+    },
+    preset.label
+  )))), /* @__PURE__ */ React5.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement("label", { className: "block text-xs font-medium text-gray-700 mb-1.5" }, "\u5F00\u59CB\u65F6\u95F4"), /* @__PURE__ */ React5.createElement(
+    "input",
+    {
+      type: "datetime-local",
+      value: filters.dateRange?.startDate ? new Date(filters.dateRange.startDate).toISOString().slice(0, 16) : "",
+      onChange: (e) => handleFilterChange("dateRange", {
+        ...filters.dateRange,
+        startDate: e.target.value ? new Date(e.target.value).toISOString() : void 0
+      }),
+      className: "w-full px-2 py-1.5 text-xs border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
+    }
+  )), /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement("label", { className: "block text-xs font-medium text-gray-700 mb-1.5" }, "\u7ED3\u675F\u65F6\u95F4"), /* @__PURE__ */ React5.createElement(
+    "input",
+    {
+      type: "datetime-local",
+      value: filters.dateRange?.endDate ? new Date(filters.dateRange.endDate).toISOString().slice(0, 16) : "",
+      onChange: (e) => handleFilterChange("dateRange", {
+        ...filters.dateRange,
+        endDate: e.target.value ? new Date(e.target.value).toISOString() : void 0
+      }),
+      className: "w-full px-2 py-1.5 text-xs border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
+    }
+  ))), /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement("label", { className: "block text-xs font-semibold text-gray-700 mb-2" }, "\u4E8B\u4EF6\u7C7B\u578B"), /* @__PURE__ */ React5.createElement(
+    "select",
+    {
+      value: filters.eventType || "",
+      onChange: (e) => handleFilterChange("eventType", e.target.value),
+      className: "w-full px-2 py-1.5 text-xs border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
+    },
+    /* @__PURE__ */ React5.createElement("option", { value: "" }, "\u5168\u90E8"),
+    /* @__PURE__ */ React5.createElement("option", { value: "page_view" }, "\u9875\u9762\u6D4F\u89C8"),
+    /* @__PURE__ */ React5.createElement("option", { value: "click" }, "\u70B9\u51FB"),
+    /* @__PURE__ */ React5.createElement("option", { value: "search" }, "\u641C\u7D22"),
+    /* @__PURE__ */ React5.createElement("option", { value: "login" }, "\u767B\u5F55"),
+    /* @__PURE__ */ React5.createElement("option", { value: "logout" }, "\u767B\u51FA"),
+    /* @__PURE__ */ React5.createElement("option", { value: "error" }, "\u9519\u8BEF"),
+    /* @__PURE__ */ React5.createElement("option", { value: "performance" }, "\u6027\u80FD"),
+    /* @__PURE__ */ React5.createElement("option", { value: "api_call" }, "API \u8C03\u7528"),
+    /* @__PURE__ */ React5.createElement("option", { value: "custom" }, "\u81EA\u5B9A\u4E49")
+  )), /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement("label", { className: "block text-xs font-semibold text-gray-700 mb-2" }, "\u5E73\u53F0"), /* @__PURE__ */ React5.createElement(
+    "select",
+    {
+      value: filters.platform || "",
+      onChange: (e) => handleFilterChange("platform", e.target.value),
+      className: "w-full px-2 py-1.5 text-xs border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
+    },
+    /* @__PURE__ */ React5.createElement("option", { value: "" }, "\u5168\u90E8"),
+    /* @__PURE__ */ React5.createElement("option", { value: "web" }, "Web"),
+    /* @__PURE__ */ React5.createElement("option", { value: "mobile" }, "Mobile"),
+    /* @__PURE__ */ React5.createElement("option", { value: "miniapp" }, "\u5C0F\u7A0B\u5E8F"),
+    /* @__PURE__ */ React5.createElement("option", { value: "desktop" }, "Desktop")
+  )), /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement("label", { className: "block text-xs font-semibold text-gray-700 mb-2" }, "\u7528\u6237ID"), /* @__PURE__ */ React5.createElement(
+    "input",
+    {
+      type: "text",
+      value: filters.userId || "",
+      onChange: (e) => handleFilterChange("userId", e.target.value),
+      placeholder: "\u8F93\u5165\u7528\u6237ID",
+      className: "w-full px-2 py-1.5 text-xs border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 placeholder:text-gray-400"
+    }
+  ))), /* @__PURE__ */ React5.createElement("div", { className: "px-4 py-3 bg-gray-50 -mx-6 -mb-6 mt-4 rounded-b-xl border-t border-gray-200" }, /* @__PURE__ */ React5.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      className: `w-2 h-2 rounded-full ${Object.keys(filters).length > 0 ? "bg-green-500" : "bg-gray-300"}`
+    }
+  ), /* @__PURE__ */ React5.createElement("p", { className: "text-xs text-gray-600" }, Object.keys(filters).length === 0 ? "\u672A\u5E94\u7528\u7B5B\u9009" : `${Object.keys(filters).length} \u4E2A\u7B5B\u9009`))));
+};
+var PieChart = ({ data, title, className = "" }) => {
+  const total = data.reduce((sum, item) => sum + item.value, 0);
+  const colors = [
+    "bg-blue-500",
+    "bg-green-500",
+    "bg-purple-500",
+    "bg-yellow-500",
+    "bg-pink-500",
+    "bg-indigo-500",
+    "bg-red-500",
+    "bg-cyan-500"
+  ];
+  return /* @__PURE__ */ React5.createElement("div", { className: `bg-white rounded-lg shadow-sm p-6 ${className}` }, title && /* @__PURE__ */ React5.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-4" }, title), /* @__PURE__ */ React5.createElement("div", { className: "space-y-3" }, data.map((item, index) => {
+    const percentage = total > 0 ? (item.value / total * 100).toFixed(1) : 0;
+    return /* @__PURE__ */ React5.createElement("div", { key: index }, /* @__PURE__ */ React5.createElement("div", { className: "flex items-center justify-between text-sm mb-1" }, /* @__PURE__ */ React5.createElement("span", { className: "text-gray-700 font-medium" }, item.name), /* @__PURE__ */ React5.createElement("span", { className: "text-gray-600" }, item.value.toLocaleString(), " (", percentage, "%)")), /* @__PURE__ */ React5.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2" }, /* @__PURE__ */ React5.createElement(
+      "div",
+      {
+        className: `h-2 rounded-full ${colors[index % colors.length]}`,
+        style: { width: `${percentage}%` }
+      }
+    )));
+  })));
+};
+var BarChart = ({ data, title, className = "" }) => {
+  const maxValue = Math.max(...data.map((item) => item.value), 1);
+  return /* @__PURE__ */ React5.createElement("div", { className: `bg-white rounded-lg shadow-sm p-6 ${className}` }, title && /* @__PURE__ */ React5.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-4" }, title), /* @__PURE__ */ React5.createElement("div", { className: "space-y-4" }, data.map((item, index) => {
+    const percentage = item.value / maxValue * 100;
+    return /* @__PURE__ */ React5.createElement("div", { key: index, className: "flex items-center gap-4" }, /* @__PURE__ */ React5.createElement("div", { className: "w-32 text-sm text-gray-700 font-medium truncate" }, item.name), /* @__PURE__ */ React5.createElement("div", { className: "flex-1 flex items-center gap-2" }, /* @__PURE__ */ React5.createElement("div", { className: "flex-1 bg-gray-200 rounded-full h-8 relative overflow-hidden" }, /* @__PURE__ */ React5.createElement(
+      "div",
+      {
+        className: "h-full bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-end px-3",
+        style: { width: `${percentage}%`, minWidth: "40px" }
+      },
+      /* @__PURE__ */ React5.createElement("span", { className: "text-xs text-white font-semibold" }, item.value.toLocaleString())
+    ))));
+  })));
+};
+var AnalyticsDashboard = ({
+  apiBaseUrl = "/api/analytics",
+  className = ""
+}) => {
+  const [stats, setStats] = useState(null);
+  const [events, setEvents] = useState([]);
+  const [filters, setFilters] = useState({});
+  const [loading, setLoading] = useState(true);
+  const [selectedEvent, setSelectedEvent] = useState(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalEvents, setTotalEvents] = useState(0);
+  const pageSize = 20;
+  const loadStats = async () => {
+    try {
+      const params = new URLSearchParams();
+      if (filters.dateRange?.startDate) {
+        params.append("startDate", filters.dateRange.startDate);
+      }
+      if (filters.dateRange?.endDate) {
+        params.append("endDate", filters.dateRange.endDate);
+      }
+      if (filters.platform) {
+        params.append("platform", filters.platform);
+      }
+      const response = await fetch(`${apiBaseUrl}/stats?${params}`);
+      const data = await response.json();
+      if (data.success) {
+        setStats(data.data);
+      }
+    } catch (error) {
+      console.error("Failed to load stats:", error);
+    }
+  };
+  const loadEvents = async () => {
+    try {
+      setLoading(true);
+      const params = new URLSearchParams();
+      if (filters.dateRange?.startDate) {
+        params.append("startDate", filters.dateRange.startDate);
+      }
+      if (filters.dateRange?.endDate) {
+        params.append("endDate", filters.dateRange.endDate);
+      }
+      if (filters.eventType) {
+        params.append("eventType", filters.eventType);
+      }
+      if (filters.platform) {
+        params.append("platform", filters.platform);
+      }
+      if (filters.userId) {
+        params.append("userId", filters.userId);
+      }
+      params.append("limit", pageSize.toString());
+      params.append("offset", ((currentPage - 1) * pageSize).toString());
+      params.append("orderBy", "timestamp");
+      params.append("orderDirection", "desc");
+      const response = await fetch(`${apiBaseUrl}/query?${params}`);
+      const data = await response.json();
+      if (data.success) {
+        setEvents(data.data);
+        setTotalEvents(data.total);
+      }
+    } catch (error) {
+      console.error("Failed to load events:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    loadStats();
+    loadEvents();
+  }, [filters, currentPage]);
+  const handleFilterChange = (newFilters) => {
+    setFilters(newFilters);
+    setCurrentPage(1);
+  };
+  const handleEventClick = (event) => {
+    setSelectedEvent(event);
+  };
+  const closeEventDetail = () => {
+    setSelectedEvent(null);
+  };
+  const totalPages = Math.ceil(totalEvents / pageSize);
+  return /* @__PURE__ */ React5.createElement("div", { className: `space-y-6 ${className}` }, /* @__PURE__ */ React5.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React5.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React5.createElement("div", { className: "flex items-center gap-2 text-sm text-gray-600" }, /* @__PURE__ */ React5.createElement(
+    "svg",
+    {
+      className: "w-5 h-5 text-indigo-600",
+      fill: "none",
+      stroke: "currentColor",
+      viewBox: "0 0 24 24"
+    },
+    /* @__PURE__ */ React5.createElement(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+      }
+    )
+  ), /* @__PURE__ */ React5.createElement("span", { className: "font-medium" }, "\u5B9E\u65F6\u6570\u636E\u76D1\u63A7")), totalEvents > 0 && /* @__PURE__ */ React5.createElement("span", { className: "text-xs px-2 py-1 bg-indigo-100 text-indigo-700 rounded-full font-medium" }, totalEvents.toLocaleString(), " \u6761\u8BB0\u5F55")), /* @__PURE__ */ React5.createElement(
+    "button",
+    {
+      onClick: () => {
+        loadStats();
+        loadEvents();
+      },
+      className: "flex items-center gap-2 px-4 py-2 text-sm bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-all duration-200 shadow-sm hover:shadow-md"
+    },
+    /* @__PURE__ */ React5.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React5.createElement(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+      }
+    )),
+    /* @__PURE__ */ React5.createElement("span", null, "\u5237\u65B0\u6570\u636E")
+  )), /* @__PURE__ */ React5.createElement("div", { className: "grid grid-cols-12 gap-6" }, /* @__PURE__ */ React5.createElement("div", { className: "col-span-12 xl:col-span-3" }, /* @__PURE__ */ React5.createElement(FilterPanel, { onFilterChange: handleFilterChange, initialFilters: filters })), /* @__PURE__ */ React5.createElement("div", { className: "col-span-12 xl:col-span-9 space-y-6" }, loading && !stats ? /* @__PURE__ */ React5.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4" }, [1, 2, 3, 4].map((i) => /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      key: i,
+      className: "bg-white rounded-xl shadow-sm border border-gray-200 p-6 animate-pulse"
+    },
+    /* @__PURE__ */ React5.createElement("div", { className: "h-4 bg-gray-200 rounded w-20 mb-3" }),
+    /* @__PURE__ */ React5.createElement("div", { className: "h-8 bg-gray-200 rounded w-24 mb-2" }),
+    /* @__PURE__ */ React5.createElement("div", { className: "h-3 bg-gray-200 rounded w-16" })
+  ))) : stats ? /* @__PURE__ */ React5.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 animate-fade-in" }, /* @__PURE__ */ React5.createElement(
+    StatCard,
+    {
+      title: "\u603B\u4E8B\u4EF6\u6570",
+      value: stats.totalEvents,
+      subtitle: "\u6240\u6709\u5E73\u53F0",
+      icon: "\u{1F4C8}",
+      className: "hover:scale-105 transition-transform duration-200"
+    }
+  ), /* @__PURE__ */ React5.createElement(
+    StatCard,
+    {
+      title: "\u72EC\u7ACB\u7528\u6237",
+      value: stats.uniqueUsers,
+      subtitle: "\u53BB\u91CD\u7EDF\u8BA1",
+      icon: "\u{1F465}",
+      className: "hover:scale-105 transition-transform duration-200"
+    }
+  ), /* @__PURE__ */ React5.createElement(
+    StatCard,
+    {
+      title: "\u4F1A\u8BDD\u6570",
+      value: stats.uniqueSessions,
+      subtitle: "\u7528\u6237\u4F1A\u8BDD",
+      icon: "\u{1F517}",
+      className: "hover:scale-105 transition-transform duration-200"
+    }
+  ), /* @__PURE__ */ React5.createElement(
+    StatCard,
+    {
+      title: "\u8BBE\u5907\u6570",
+      value: stats.uniqueDevices,
+      subtitle: "\u72EC\u7ACB\u8BBE\u5907",
+      icon: "\u{1F4F1}",
+      className: "hover:scale-105 transition-transform duration-200"
+    }
+  )) : null, stats && /* @__PURE__ */ React5.createElement("div", { className: "space-y-6 animate-fade-in" }, /* @__PURE__ */ React5.createElement("div", { className: "grid grid-cols-1 xl:grid-cols-2 gap-6" }, /* @__PURE__ */ React5.createElement("div", { className: "transform hover:scale-[1.02] transition-transform duration-200" }, /* @__PURE__ */ React5.createElement(
+    PieChart,
+    {
+      title: "\u5E73\u53F0\u5206\u5E03",
+      data: stats.eventsByPlatform.map((item) => ({
+        name: item.platform,
+        value: item.count
+      }))
+    }
+  )), /* @__PURE__ */ React5.createElement("div", { className: "transform hover:scale-[1.02] transition-transform duration-200" }, /* @__PURE__ */ React5.createElement(
+    BarChart,
+    {
+      title: "\u4E8B\u4EF6\u7C7B\u578B Top 10",
+      data: stats.eventsByType.slice(0, 10).map((item) => ({
+        name: item.eventType,
+        value: item.count
+      }))
+    }
+  ))), stats.topPages.length > 0 && /* @__PURE__ */ React5.createElement("div", { className: "transform hover:scale-[1.02] transition-transform duration-200" }, /* @__PURE__ */ React5.createElement(
+    BarChart,
+    {
+      title: "\u70ED\u95E8\u9875\u9762 Top 10",
+      data: stats.topPages.slice(0, 10).map((item) => ({
+        name: item.pageUrl,
+        value: item.count
+      }))
+    }
+  ))), /* @__PURE__ */ React5.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React5.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React5.createElement("h3", { className: "text-lg font-semibold text-gray-900 flex items-center gap-2" }, /* @__PURE__ */ React5.createElement(
+    "svg",
+    {
+      className: "w-5 h-5 text-indigo-600",
+      fill: "none",
+      stroke: "currentColor",
+      viewBox: "0 0 24 24"
+    },
+    /* @__PURE__ */ React5.createElement(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+      }
+    )
+  ), "\u4E8B\u4EF6\u8BB0\u5F55"), totalEvents > 0 && !loading && /* @__PURE__ */ React5.createElement("span", { className: "text-sm text-gray-500" }, "\u663E\u793A ", (currentPage - 1) * pageSize + 1, "-", Math.min(currentPage * pageSize, totalEvents), " / ", totalEvents.toLocaleString())), /* @__PURE__ */ React5.createElement("div", { className: "animate-fade-in" }, /* @__PURE__ */ React5.createElement(EventList, { events, loading, onEventClick: handleEventClick })), totalPages > 1 && /* @__PURE__ */ React5.createElement("div", { className: "flex items-center justify-between bg-gradient-to-r from-gray-50 to-gray-100 px-6 py-4 rounded-xl border border-gray-200" }, /* @__PURE__ */ React5.createElement("div", { className: "hidden sm:block text-sm text-gray-600" }, "\u7B2C ", /* @__PURE__ */ React5.createElement("span", { className: "font-semibold text-gray-900" }, currentPage), " \u9875\uFF0C\u5171", " ", /* @__PURE__ */ React5.createElement("span", { className: "font-semibold text-gray-900" }, totalPages), " \u9875"), /* @__PURE__ */ React5.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React5.createElement(
+    "button",
+    {
+      onClick: () => setCurrentPage((p) => Math.max(1, p - 1)),
+      disabled: currentPage === 1,
+      className: "flex items-center gap-1 px-4 py-2 text-sm font-medium bg-white border border-gray-300 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 hover:border-indigo-500 transition-all duration-200"
+    },
+    /* @__PURE__ */ React5.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React5.createElement(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "M15 19l-7-7 7-7"
+      }
+    )),
+    /* @__PURE__ */ React5.createElement("span", { className: "hidden sm:inline" }, "\u4E0A\u4E00\u9875")
+  ), /* @__PURE__ */ React5.createElement("div", { className: "sm:hidden px-4 py-2 text-sm text-gray-600" }, currentPage, " / ", totalPages), /* @__PURE__ */ React5.createElement(
+    "button",
+    {
+      onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1)),
+      disabled: currentPage === totalPages,
+      className: "flex items-center gap-1 px-4 py-2 text-sm font-medium bg-white border border-gray-300 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 hover:border-indigo-500 transition-all duration-200"
+    },
+    /* @__PURE__ */ React5.createElement("span", { className: "hidden sm:inline" }, "\u4E0B\u4E00\u9875"),
+    /* @__PURE__ */ React5.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React5.createElement(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "M9 5l7 7-7 7"
+      }
+    ))
+  )))))), selectedEvent && /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      className: "fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fade-in",
+      onClick: closeEventDetail
+    },
+    /* @__PURE__ */ React5.createElement(
+      "div",
+      {
+        className: "bg-white rounded-2xl shadow-2xl max-w-3xl w-full max-h-[85vh] overflow-hidden animate-slide-up",
+        onClick: (e) => e.stopPropagation()
+      },
+      /* @__PURE__ */ React5.createElement("div", { className: "bg-gradient-to-r from-indigo-600 to-purple-600 px-6 py-4 flex items-center justify-between" }, /* @__PURE__ */ React5.createElement("div", { className: "flex items-center gap-3 text-white" }, /* @__PURE__ */ React5.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React5.createElement(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+        }
+      )), /* @__PURE__ */ React5.createElement("h3", { className: "text-xl font-semibold" }, "\u4E8B\u4EF6\u8BE6\u60C5")), /* @__PURE__ */ React5.createElement(
+        "button",
+        {
+          onClick: closeEventDetail,
+          className: "text-white hover:bg-white hover:bg-opacity-20 rounded-full p-2 transition-all duration-200"
+        },
+        /* @__PURE__ */ React5.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React5.createElement(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M6 18L18 6M6 6l12 12"
+          }
+        ))
+      )),
+      /* @__PURE__ */ React5.createElement("div", { className: "p-6 overflow-auto max-h-[calc(85vh-80px)]" }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-5" }, /* @__PURE__ */ React5.createElement("div", { className: "bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-4 border border-blue-200" }, /* @__PURE__ */ React5.createElement("div", { className: "flex items-center gap-2 mb-3" }, /* @__PURE__ */ React5.createElement(
+        "svg",
+        {
+          className: "w-5 h-5 text-indigo-600",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24"
+        },
+        /* @__PURE__ */ React5.createElement(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
+          }
+        )
+      ), /* @__PURE__ */ React5.createElement("h4", { className: "font-semibold text-gray-900" }, "\u57FA\u7840\u4FE1\u606F")), /* @__PURE__ */ React5.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React5.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React5.createElement("span", { className: "text-xs font-medium text-gray-600" }, "\u4E8B\u4EF6ID"), /* @__PURE__ */ React5.createElement("code", { className: "text-xs bg-white px-2 py-1 rounded border border-blue-200 font-mono text-gray-800" }, selectedEvent.id.slice(0, 16), "...")), /* @__PURE__ */ React5.createElement("div", { className: "grid grid-cols-2 gap-3 pt-2" }, /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement("span", { className: "text-xs font-medium text-gray-600 block mb-1" }, "\u4E8B\u4EF6\u7C7B\u578B"), /* @__PURE__ */ React5.createElement("span", { className: "inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800" }, selectedEvent.eventType)), /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement("span", { className: "text-xs font-medium text-gray-600 block mb-1" }, "\u4E8B\u4EF6\u540D\u79F0"), /* @__PURE__ */ React5.createElement("p", { className: "text-sm font-medium text-gray-900 truncate" }, selectedEvent.eventName))))), /* @__PURE__ */ React5.createElement("div", { className: "grid grid-cols-2 gap-4" }, /* @__PURE__ */ React5.createElement("div", { className: "bg-gray-50 rounded-lg p-3 border border-gray-200" }, /* @__PURE__ */ React5.createElement("span", { className: "text-xs font-medium text-gray-600 block mb-1" }, "\u5E73\u53F0"), /* @__PURE__ */ React5.createElement("p", { className: "text-sm font-semibold text-gray-900" }, selectedEvent.platform)), /* @__PURE__ */ React5.createElement("div", { className: "bg-gray-50 rounded-lg p-3 border border-gray-200" }, /* @__PURE__ */ React5.createElement("span", { className: "text-xs font-medium text-gray-600 block mb-1" }, "\u5E94\u7528\u7248\u672C"), /* @__PURE__ */ React5.createElement("p", { className: "text-sm font-semibold text-gray-900" }, selectedEvent.appVersion))), /* @__PURE__ */ React5.createElement("div", { className: "bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-4 border border-purple-200" }, /* @__PURE__ */ React5.createElement("div", { className: "flex items-center gap-2 mb-3" }, /* @__PURE__ */ React5.createElement(
+        "svg",
+        {
+          className: "w-5 h-5 text-purple-600",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24"
+        },
+        /* @__PURE__ */ React5.createElement(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+          }
+        )
+      ), /* @__PURE__ */ React5.createElement("h4", { className: "font-semibold text-gray-900" }, "\u7528\u6237\u4FE1\u606F")), /* @__PURE__ */ React5.createElement("div", { className: "grid grid-cols-2 gap-3" }, /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement("span", { className: "text-xs font-medium text-gray-600 block mb-1" }, "\u7528\u6237ID"), /* @__PURE__ */ React5.createElement("p", { className: "text-sm font-medium text-gray-900" }, selectedEvent.userId || /* @__PURE__ */ React5.createElement("span", { className: "text-gray-400" }, "\u6E38\u5BA2"))), /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement("span", { className: "text-xs font-medium text-gray-600 block mb-1" }, "\u4F1A\u8BDDID"), /* @__PURE__ */ React5.createElement("code", { className: "text-xs bg-white px-2 py-1 rounded border border-purple-200 font-mono text-gray-800 block truncate" }, selectedEvent.sessionId.slice(0, 12), "..."))), /* @__PURE__ */ React5.createElement("div", { className: "mt-3 pt-3 border-t border-purple-200" }, /* @__PURE__ */ React5.createElement("span", { className: "text-xs font-medium text-gray-600 block mb-1" }, "\u8BBE\u5907ID"), /* @__PURE__ */ React5.createElement("code", { className: "text-xs bg-white px-2 py-1 rounded border border-purple-200 font-mono text-gray-800 block truncate" }, selectedEvent.deviceId))), (selectedEvent.pageUrl || selectedEvent.pageTitle) && /* @__PURE__ */ React5.createElement("div", { className: "bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl p-4 border border-green-200" }, /* @__PURE__ */ React5.createElement("div", { className: "flex items-center gap-2 mb-3" }, /* @__PURE__ */ React5.createElement(
+        "svg",
+        {
+          className: "w-5 h-5 text-green-600",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24"
+        },
+        /* @__PURE__ */ React5.createElement(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
+          }
+        )
+      ), /* @__PURE__ */ React5.createElement("h4", { className: "font-semibold text-gray-900" }, "\u9875\u9762\u4FE1\u606F")), selectedEvent.pageTitle && /* @__PURE__ */ React5.createElement("div", { className: "mb-2" }, /* @__PURE__ */ React5.createElement("span", { className: "text-xs font-medium text-gray-600 block mb-1" }, "\u9875\u9762\u6807\u9898"), /* @__PURE__ */ React5.createElement("p", { className: "text-sm font-medium text-gray-900" }, selectedEvent.pageTitle)), selectedEvent.pageUrl && /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement("span", { className: "text-xs font-medium text-gray-600 block mb-1" }, "\u9875\u9762URL"), /* @__PURE__ */ React5.createElement("code", { className: "text-xs bg-white px-2 py-1 rounded border border-green-200 font-mono text-gray-800 block break-all" }, selectedEvent.pageUrl))), /* @__PURE__ */ React5.createElement("div", { className: "bg-gradient-to-br from-amber-50 to-yellow-50 rounded-xl p-4 border border-amber-200" }, /* @__PURE__ */ React5.createElement("div", { className: "flex items-center gap-2 mb-2" }, /* @__PURE__ */ React5.createElement(
+        "svg",
+        {
+          className: "w-5 h-5 text-amber-600",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24"
+        },
+        /* @__PURE__ */ React5.createElement(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+          }
+        )
+      ), /* @__PURE__ */ React5.createElement("h4", { className: "font-semibold text-gray-900" }, "\u65F6\u95F4\u4FE1\u606F")), /* @__PURE__ */ React5.createElement("p", { className: "text-sm font-medium text-gray-900" }, new Date(selectedEvent.timestamp).toLocaleString("zh-CN", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit"
+      }))), selectedEvent.properties && Object.keys(selectedEvent.properties).length > 0 && /* @__PURE__ */ React5.createElement("div", { className: "bg-gradient-to-br from-gray-50 to-slate-50 rounded-xl p-4 border border-gray-300" }, /* @__PURE__ */ React5.createElement("div", { className: "flex items-center gap-2 mb-3" }, /* @__PURE__ */ React5.createElement(
+        "svg",
+        {
+          className: "w-5 h-5 text-gray-600",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24"
+        },
+        /* @__PURE__ */ React5.createElement(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
+          }
+        )
+      ), /* @__PURE__ */ React5.createElement("h4", { className: "font-semibold text-gray-900" }, "\u81EA\u5B9A\u4E49\u5C5E\u6027")), /* @__PURE__ */ React5.createElement("pre", { className: "text-xs bg-white p-4 rounded-lg border border-gray-200 overflow-auto max-h-48 font-mono text-gray-800" }, JSON.stringify(selectedEvent.properties, null, 2)))))
+    )
+  ));
+};
 
 // src/analytics/index.ts
 var ANALYTICS_VERSION = "1.0.0";
 
-export { ANALYTICS_VERSION, Analytics, CatchError, DesktopDeviceAdapter, DesktopNetworkAdapter, DesktopStorageAdapter, EventPriority, EventQueue, EventType, MiniappDeviceAdapter, MiniappNetworkAdapter, MiniappStorageAdapter, MobileDeviceAdapter, MobileNetworkAdapter, MobileStorageAdapter, Track, TrackClick, TrackPerformance, Uploader, WebDeviceAdapter, WebNetworkAdapter, WebStorageAdapter, createAnalytics, createDesktopConfig, createMiniappConfig, createMobileConfig, createWebConfig, debounce, deepClone, formatEvent, formatTimestamp, generateUniqueId, getAllInstanceKeys, getAnalyticsInstance, getBatchSize, getCurrentPageTitle, getCurrentPageUrl, getEventSize, getGlobalAnalytics, getPageDuration, getReferrer, isAnalyticsInitialized, isDevelopment, isMobile, mergeEventProperties, resetAllAnalytics, resetAnalytics, safeParse, safeStringify, sanitizeEvent, setGlobalAnalytics, throttle, useAnalytics, useAutoTracking, useErrorTracking, usePageDuration, usePageView, usePerformanceTracking, useTrackClick, useTrackEvent, validateEvent, validateEvents, webAdapter };
+export { ANALYTICS_VERSION, Analytics, AnalyticsDashboard, BarChart, CatchError, DesktopDeviceAdapter, DesktopNetworkAdapter, DesktopStorageAdapter, EventList, EventPriority, EventQueue, EventType, FilterPanel, MiniappDeviceAdapter, MiniappNetworkAdapter, MiniappStorageAdapter, MobileDeviceAdapter, MobileNetworkAdapter, MobileStorageAdapter, PieChart, StatCard, Track, TrackClick, TrackPerformance, Uploader, WebDeviceAdapter, WebNetworkAdapter, WebStorageAdapter, createAnalytics, createDesktopConfig, createMiniappConfig, createMobileConfig, createWebConfig, debounce, deepClone, formatEvent, formatTimestamp, generateUniqueId, getAllInstanceKeys, getAnalyticsInstance, getBatchSize, getCurrentPageTitle, getCurrentPageUrl, getEventSize, getGlobalAnalytics, getPageDuration, getReferrer, isAnalyticsInitialized, isDevelopment, isMobile, mergeEventProperties, resetAllAnalytics, resetAnalytics, safeParse, safeStringify, sanitizeEvent, setGlobalAnalytics, throttle, useAnalytics, useAutoTracking, useErrorTracking, usePageDuration, usePageView, usePerformanceTracking, useTrackClick, useTrackEvent, validateEvent, validateEvents, webAdapter };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map