@pisell/core 0.0.2

package/es/routes/index.d.ts

@@ -0,0 +1,28 @@
+import App from '../app';
+import React from 'react';
+import type { ApplicationInterface } from '../applicationManager/application';
+export interface RouterOptions {
+    routes?: Record<string, RouteType>;
+    basename?: string;
+}
+export interface RouteType extends ApplicationInterface {
+}
+export declare class RouterManager {
+    routes: Record<string, RouteType>;
+    options: RouterOptions;
+    app: App;
+    constructor(options: RouterOptions | undefined, app: App);
+    init(): void;
+    getRoutes(): Record<string, RouteType>;
+    getBasename(): string | undefined;
+    setBasename(basename: string): void;
+    add(name: string, route: any): void;
+    get(name: string): RouteType;
+    has(name: string): boolean;
+    remove(name: string): void;
+    renderComponent(item: RouteType, children?: React.ReactNode): string | number | boolean | React.ReactFragment | JSX.Element | null | undefined;
+    getPageByRoute(route: string): ApplicationInterface | undefined;
+    getRouterComponent({ fallback }: {
+        fallback?: React.ReactNode;
+    }): JSX.Element[];
+}

package/es/routes/index.js

@@ -0,0 +1,151 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { Suspense } from 'react';
+import { Route } from 'react-router-dom';
+export var RouterManager = /*#__PURE__*/function () {
+  function RouterManager() {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var app = arguments.length > 1 ? arguments[1] : undefined;
+    _classCallCheck(this, RouterManager);
+    _defineProperty(this, "routes", {});
+    _defineProperty(this, "options", void 0);
+    _defineProperty(this, "app", void 0);
+    this.options = options;
+    this.app = app;
+    this.routes = options.routes || {};
+  }
+  _createClass(RouterManager, [{
+    key: "init",
+    value: function init() {}
+  }, {
+    key: "getRoutes",
+    value: function getRoutes() {
+      return this.routes;
+    }
+  }, {
+    key: "getBasename",
+    value: function getBasename() {
+      return this.options.basename;
+    }
+  }, {
+    key: "setBasename",
+    value: function setBasename(basename) {
+      this.options.basename = basename;
+    }
+  }, {
+    key: "add",
+    value: function add(name, route) {
+      this.routes[name] = route;
+    }
+  }, {
+    key: "get",
+    value: function get(name) {
+      return this.routes[name];
+    }
+  }, {
+    key: "has",
+    value: function has(name) {
+      return !!this.get(name);
+    }
+  }, {
+    key: "remove",
+    value: function remove(name) {
+      delete this.routes[name];
+    }
+  }, {
+    key: "renderComponent",
+    value: function renderComponent(item, children) {
+      var Component = item.Component;
+      if (!Component) {
+        return children;
+      }
+      return /*#__PURE__*/React.createElement(Component, item, children);
+    }
+  }, {
+    key: "getPageByRoute",
+    value: function getPageByRoute(route) {
+      if (this.routes[route]) {
+        return this.routes[route];
+      }
+
+      // 处理动态路由匹配
+      var routeParts = route.split('/');
+      for (var _i = 0, _Object$entries = Object.entries(this.routes); _i < _Object$entries.length; _i++) {
+        var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+          path = _Object$entries$_i[0],
+          item = _Object$entries$_i[1];
+        var pathParts = path.split('/');
+        if (routeParts.length !== pathParts.length) {
+          continue;
+        }
+        var isMatch = true;
+        for (var i = 0; i < pathParts.length; i++) {
+          // 如果是动态参数 (以:开头)，则跳过比较
+          if (pathParts[i].startsWith(':')) {
+            continue;
+          }
+          // 静态部分必须完全匹配
+          if (pathParts[i] !== routeParts[i]) {
+            isMatch = false;
+            break;
+          }
+        }
+        if (isMatch) {
+          return item;
+        }
+      }
+      return undefined;
+    }
+  }, {
+    key: "getRouterComponent",
+    value: function getRouterComponent(_ref) {
+      var fallback = _ref.fallback;
+      var routes = [];
+      var firstRoute = '';
+      for (var _i2 = 0, _Object$entries2 = Object.entries(this.routes); _i2 < _Object$entries2.length; _i2++) {
+        var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),
+          path = _Object$entries2$_i[0],
+          item = _Object$entries2$_i[1];
+        if (!firstRoute && path) {
+          firstRoute = path;
+        }
+        var component = this.renderComponent(item);
+        routes.push(
+        /*#__PURE__*/
+        //@ts-ignore
+        React.createElement(Route, {
+          path: path,
+          key: path,
+          exact: true
+        }, /*#__PURE__*/React.createElement(Suspense, {
+          fallback: fallback || /*#__PURE__*/React.createElement("div", null)
+        }, component)));
+      }
+
+      // let firstRoute = isProductRegistrationSystem
+      // 	? "/panel-registration"
+      // 	: "/booking";
+
+      // todo: 目前固定workspaces 这里应该取menu的第一个可用菜单
+      // firstRoute = "/printer-list";
+      // routes.push(
+      //   <Route exact path="/" key="default">
+      //     <Redirect to={firstRoute} />
+      //   </Route>
+      // );
+      return routes;
+    }
+  }]);
+  return RouterManager;
+}();

package/es/socket/components/SocketMonitorPage.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+/**
+ * Socket监控页面组件
+ */
+declare const SocketMonitorPage: React.FC;
+export default SocketMonitorPage;

package/es/socket/components/SocketMonitorPage.js

@@ -0,0 +1,485 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState, useEffect, useCallback } from "react";
+import socket from "../index";
+import { SocketStatus } from "../index";
+
+/**
+ * 时间格式化函数
+ * @param timestamp 时间戳
+ */
+var formatTime = function formatTime(timestamp) {
+  if (timestamp === null) return "无";
+  var date = new Date(timestamp);
+  return date.toLocaleString();
+};
+
+/**
+ * 格式化持续时间
+ * @param ms 毫秒数
+ */
+var formatDuration = function formatDuration(ms) {
+  if (ms === null) return "无";
+  var seconds = Math.floor(ms / 1000);
+  var minutes = Math.floor(seconds / 60);
+  var hours = Math.floor(minutes / 60);
+  var remainingMinutes = minutes % 60;
+  var remainingSeconds = seconds % 60;
+  return "".concat(hours, "\u5C0F\u65F6 ").concat(remainingMinutes, "\u5206\u949F ").concat(remainingSeconds, "\u79D2");
+};
+
+/**
+ * 格式化字节
+ * @param bytes 字节数
+ */
+var formatBytes = function formatBytes(bytes) {
+  if (bytes === 0) return "0 B";
+  var units = ["B", "KB", "MB", "GB", "TB"];
+  var i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return "".concat((bytes / Math.pow(1024, i)).toFixed(2), " ").concat(units[i]);
+};
+
+/**
+ * 获取连接状态描述
+ * @param status 连接状态码
+ */
+var getStatusText = function getStatusText(status) {
+  switch (status) {
+    case SocketStatus.CONNECTING:
+      return "连接中";
+    case SocketStatus.OPEN:
+      return "已连接";
+    case SocketStatus.CLOSING:
+      return "关闭中";
+    case SocketStatus.CLOSED:
+      return "已关闭";
+    case SocketStatus.RECONNECTING:
+      return "重连中";
+    default:
+      return "未知状态";
+  }
+};
+
+/**
+ * Socket监控页面组件
+ */
+var SocketMonitorPage = function SocketMonitorPage() {
+  // 所有Socket实例的键
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    socketKeys = _useState2[0],
+    setSocketKeys = _useState2[1];
+  // 当前选中的Socket键
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedKey = _useState4[0],
+    setSelectedKey = _useState4[1];
+  // 当前Socket实例
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentSocket = _useState6[0],
+    setCurrentSocket = _useState6[1];
+
+  // 统计信息
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    stats = _useState8[0],
+    setStats = _useState8[1];
+  // 消息历史
+  var _useState9 = useState([]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    messageHistory = _useState10[0],
+    setMessageHistory = _useState10[1];
+  // 状态历史
+  var _useState11 = useState([]),
+    _useState12 = _slicedToArray(_useState11, 2),
+    statusHistory = _useState12[0],
+    setStatusHistory = _useState12[1];
+
+  // 自动刷新标志
+  var _useState13 = useState(true),
+    _useState14 = _slicedToArray(_useState13, 2),
+    autoRefresh = _useState14[0],
+    setAutoRefresh = _useState14[1];
+  // 消息过滤方向
+  var _useState15 = useState("all"),
+    _useState16 = _slicedToArray(_useState15, 2),
+    messageFilter = _useState16[0],
+    setMessageFilter = _useState16[1];
+
+  // 加载Socket列表
+  var loadSocketList = useCallback(function () {
+    var keys = socket.getKeys();
+    setSocketKeys(keys);
+    if (keys.length > 0 && !selectedKey) {
+      setSelectedKey(keys[0]);
+    }
+  }, [selectedKey]);
+
+  // 加载Socket数据
+  var loadSocketData = useCallback(function () {
+    if (!selectedKey) return;
+    var socketInstance = socket.get(selectedKey);
+    if (!socketInstance) return;
+    setCurrentSocket(socketInstance);
+
+    // 确保Socket已启用监控
+    var monitor = socketInstance.getMonitor() || socketInstance.enableMonitoring();
+    if (!monitor) return;
+
+    // 获取统计信息
+    setStats(monitor.getStats());
+
+    // 获取消息历史
+    var direction = messageFilter === "all" ? undefined : messageFilter === "in" ? "in" : "out";
+    setMessageHistory(monitor.getMessageHistory(50, direction));
+
+    // 获取状态历史
+    setStatusHistory(monitor.getStatusHistory(20));
+  }, [selectedKey, messageFilter]);
+
+  // 初始加载
+  useEffect(function () {
+    loadSocketList();
+  }, [loadSocketList]);
+
+  // 选中Socket变化时加载数据
+  useEffect(function () {
+    if (selectedKey) {
+      loadSocketData();
+    }
+  }, [selectedKey, loadSocketData]);
+
+  // 自动刷新
+  useEffect(function () {
+    var intervalId;
+    if (autoRefresh && selectedKey) {
+      intervalId = window.setInterval(function () {
+        loadSocketData();
+      }, 1000);
+    }
+    return function () {
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+    };
+  }, [autoRefresh, selectedKey, loadSocketData]);
+
+  // 手动连接
+  var handleConnect = function handleConnect() {
+    if (currentSocket) {
+      currentSocket.connect().catch(console.error);
+    }
+  };
+
+  // 手动断开
+  var handleDisconnect = function handleDisconnect() {
+    if (currentSocket) {
+      currentSocket.disconnect();
+    }
+  };
+
+  // 清除历史记录
+  var handleClearHistory = function handleClearHistory() {
+    if (currentSocket) {
+      var monitor = currentSocket.getMonitor();
+      if (monitor) {
+        monitor.clearHistory();
+        loadSocketData();
+      }
+    }
+  };
+
+  // 重置统计数据
+  var handleResetStats = function handleResetStats() {
+    if (currentSocket) {
+      var monitor = currentSocket.getMonitor();
+      if (monitor) {
+        monitor.resetStats();
+        loadSocketData();
+      }
+    }
+  };
+
+  // 发送测试消息
+  var handleSendTestMessage = function handleSendTestMessage() {
+    if (currentSocket && currentSocket.isConnected()) {
+      try {
+        currentSocket.send("test_message", {
+          content: "这是一条测试消息",
+          timestamp: Date.now()
+        });
+        loadSocketData();
+      } catch (error) {
+        console.error("发送测试消息失败:", error);
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "socket-monitor-container",
+    style: {
+      padding: "20px"
+    }
+  }, /*#__PURE__*/React.createElement("h1", null, "Socket\u8FDE\u63A5\u76D1\u63A7"), /*#__PURE__*/React.createElement("div", {
+    className: "socket-selector",
+    style: {
+      marginBottom: "20px"
+    }
+  }, /*#__PURE__*/React.createElement("label", null, "\u9009\u62E9Socket: "), /*#__PURE__*/React.createElement("select", {
+    value: selectedKey || "",
+    onChange: function onChange(e) {
+      return setSelectedKey(e.target.value || null);
+    },
+    style: {
+      marginRight: "10px"
+    }
+  }, /*#__PURE__*/React.createElement("option", {
+    value: ""
+  }, "-- \u8BF7\u9009\u62E9 --"), socketKeys.map(function (key) {
+    return /*#__PURE__*/React.createElement("option", {
+      key: key,
+      value: key
+    }, key);
+  })), /*#__PURE__*/React.createElement("button", {
+    onClick: loadSocketList,
+    style: {
+      marginRight: "10px"
+    }
+  }, "\u5237\u65B0\u5217\u8868"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    checked: autoRefresh,
+    onChange: function onChange(e) {
+      return setAutoRefresh(e.target.checked);
+    }
+  }), "\u81EA\u52A8\u5237\u65B0")), currentSocket && /*#__PURE__*/React.createElement("div", {
+    className: "socket-actions",
+    style: {
+      marginBottom: "20px"
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: handleConnect,
+    disabled: currentSocket.isConnected(),
+    style: {
+      marginRight: "10px"
+    }
+  }, "\u8FDE\u63A5"), /*#__PURE__*/React.createElement("button", {
+    onClick: handleDisconnect,
+    disabled: !currentSocket.isConnected(),
+    style: {
+      marginRight: "10px"
+    }
+  }, "\u65AD\u5F00"), /*#__PURE__*/React.createElement("button", {
+    onClick: handleSendTestMessage,
+    disabled: !currentSocket.isConnected(),
+    style: {
+      marginRight: "10px"
+    }
+  }, "\u53D1\u9001\u6D4B\u8BD5\u6D88\u606F"), /*#__PURE__*/React.createElement("button", {
+    onClick: handleClearHistory,
+    style: {
+      marginRight: "10px"
+    }
+  }, "\u6E05\u9664\u5386\u53F2\u8BB0\u5F55"), /*#__PURE__*/React.createElement("button", {
+    onClick: handleResetStats
+  }, "\u91CD\u7F6E\u7EDF\u8BA1")), currentSocket && stats && /*#__PURE__*/React.createElement("div", {
+    className: "socket-stats",
+    style: {
+      marginBottom: "20px"
+    }
+  }, /*#__PURE__*/React.createElement("h2", null, "Socket\u72B6\u6001\u548C\u7EDF\u8BA1"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexWrap: "wrap"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: "1 1 300px",
+      margin: "0 20px 20px 0"
+    }
+  }, /*#__PURE__*/React.createElement("h3", null, "\u8FDE\u63A5\u4FE1\u606F"), /*#__PURE__*/React.createElement("table", {
+    style: {
+      width: "100%",
+      borderCollapse: "collapse"
+    }
+  }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("strong", null, "URL:")), /*#__PURE__*/React.createElement("td", null, currentSocket["url"])), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("strong", null, "\u5F53\u524D\u72B6\u6001:")), /*#__PURE__*/React.createElement("td", null, getStatusText(currentSocket.getStatus()))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("strong", null, "\u9996\u6B21\u8FDE\u63A5\u65F6\u95F4:")), /*#__PURE__*/React.createElement("td", null, formatTime(stats.firstConnectTime))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("strong", null, "\u6700\u540E\u8FDE\u63A5\u65F6\u95F4:")), /*#__PURE__*/React.createElement("td", null, formatTime(stats.lastConnectTime))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("strong", null, "\u5F53\u524D\u8FDE\u63A5\u6301\u7EED\u65F6\u95F4:")), /*#__PURE__*/React.createElement("td", null, formatDuration(stats.currentConnectionDuration)))))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: "1 1 300px",
+      margin: "0 20px 20px 0"
+    }
+  }, /*#__PURE__*/React.createElement("h3", null, "\u7EDF\u8BA1\u6570\u636E"), /*#__PURE__*/React.createElement("table", {
+    style: {
+      width: "100%",
+      borderCollapse: "collapse"
+    }
+  }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("strong", null, "\u8FDE\u63A5\u6B21\u6570:")), /*#__PURE__*/React.createElement("td", null, stats.connectionCount)), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("strong", null, "\u91CD\u8FDE\u6B21\u6570:")), /*#__PURE__*/React.createElement("td", null, stats.reconnectionCount)), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("strong", null, "\u9519\u8BEF\u6B21\u6570:")), /*#__PURE__*/React.createElement("td", null, stats.errorCount)), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("strong", null, "\u5FC3\u8DF3\u53D1\u9001\u6B21\u6570:")), /*#__PURE__*/React.createElement("td", null, stats.heartbeatCount)), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("strong", null, "\u5FC3\u8DF3\u8D85\u65F6\u6B21\u6570:")), /*#__PURE__*/React.createElement("td", null, stats.heartbeatTimeoutCount))))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: "1 1 300px",
+      margin: "0 0 20px 0"
+    }
+  }, /*#__PURE__*/React.createElement("h3", null, "\u6D88\u606F\u7EDF\u8BA1"), /*#__PURE__*/React.createElement("table", {
+    style: {
+      width: "100%",
+      borderCollapse: "collapse"
+    }
+  }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("strong", null, "\u53D1\u9001\u6D88\u606F\u6570:")), /*#__PURE__*/React.createElement("td", null, stats.totalSent)), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("strong", null, "\u63A5\u6536\u6D88\u606F\u6570:")), /*#__PURE__*/React.createElement("td", null, stats.totalReceived)), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("strong", null, "\u53D1\u9001\u6570\u636E\u91CF:")), /*#__PURE__*/React.createElement("td", null, formatBytes(stats.bytesSent))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("strong", null, "\u63A5\u6536\u6570\u636E\u91CF:")), /*#__PURE__*/React.createElement("td", null, formatBytes(stats.bytesReceived))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("strong", null, "\u5E73\u5747\u6D88\u606F\u5927\u5C0F:")), /*#__PURE__*/React.createElement("td", null, formatBytes(stats.averageMessageSize)))))))), currentSocket && statusHistory.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "socket-status-history",
+    style: {
+      marginBottom: "20px"
+    }
+  }, /*#__PURE__*/React.createElement("h2", null, "\u72B6\u6001\u53D8\u66F4\u5386\u53F2"), /*#__PURE__*/React.createElement("table", {
+    style: {
+      width: "100%",
+      borderCollapse: "collapse",
+      border: "1px solid #ddd"
+    }
+  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", {
+    style: {
+      backgroundColor: "#f2f2f2"
+    }
+  }, /*#__PURE__*/React.createElement("th", {
+    style: {
+      padding: "8px",
+      borderBottom: "1px solid #ddd",
+      textAlign: "left"
+    }
+  }, "\u65F6\u95F4"), /*#__PURE__*/React.createElement("th", {
+    style: {
+      padding: "8px",
+      borderBottom: "1px solid #ddd",
+      textAlign: "left"
+    }
+  }, "\u53D8\u66F4\u524D\u72B6\u6001"), /*#__PURE__*/React.createElement("th", {
+    style: {
+      padding: "8px",
+      borderBottom: "1px solid #ddd",
+      textAlign: "left"
+    }
+  }, "\u53D8\u66F4\u540E\u72B6\u6001"), /*#__PURE__*/React.createElement("th", {
+    style: {
+      padding: "8px",
+      borderBottom: "1px solid #ddd",
+      textAlign: "left"
+    }
+  }, "\u89E6\u53D1\u4E8B\u4EF6"))), /*#__PURE__*/React.createElement("tbody", null, statusHistory.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("tr", {
+      key: index,
+      style: {
+        borderBottom: "1px solid #ddd"
+      }
+    }, /*#__PURE__*/React.createElement("td", {
+      style: {
+        padding: "8px"
+      }
+    }, formatTime(item.timestamp)), /*#__PURE__*/React.createElement("td", {
+      style: {
+        padding: "8px"
+      }
+    }, getStatusText(item.from)), /*#__PURE__*/React.createElement("td", {
+      style: {
+        padding: "8px"
+      }
+    }, getStatusText(item.to)), /*#__PURE__*/React.createElement("td", {
+      style: {
+        padding: "8px"
+      }
+    }, item.event || "-"));
+  })))), currentSocket && /*#__PURE__*/React.createElement("div", {
+    className: "socket-message-history"
+  }, /*#__PURE__*/React.createElement("h2", null, "\u6D88\u606F\u5386\u53F2\u8BB0\u5F55"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "10px"
+    }
+  }, /*#__PURE__*/React.createElement("label", null, "\u8FC7\u6EE4: "), /*#__PURE__*/React.createElement("select", {
+    value: messageFilter,
+    onChange: function onChange(e) {
+      return setMessageFilter(e.target.value);
+    },
+    style: {
+      marginRight: "10px"
+    }
+  }, /*#__PURE__*/React.createElement("option", {
+    value: "all"
+  }, "\u5168\u90E8\u6D88\u606F"), /*#__PURE__*/React.createElement("option", {
+    value: "in"
+  }, "\u63A5\u6536\u7684\u6D88\u606F"), /*#__PURE__*/React.createElement("option", {
+    value: "out"
+  }, "\u53D1\u9001\u7684\u6D88\u606F"))), messageHistory.length > 0 ? /*#__PURE__*/React.createElement("table", {
+    style: {
+      width: "100%",
+      borderCollapse: "collapse",
+      border: "1px solid #ddd"
+    }
+  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", {
+    style: {
+      backgroundColor: "#f2f2f2"
+    }
+  }, /*#__PURE__*/React.createElement("th", {
+    style: {
+      padding: "8px",
+      borderBottom: "1px solid #ddd",
+      textAlign: "left"
+    }
+  }, "\u65F6\u95F4"), /*#__PURE__*/React.createElement("th", {
+    style: {
+      padding: "8px",
+      borderBottom: "1px solid #ddd",
+      textAlign: "left"
+    }
+  }, "\u65B9\u5411"), /*#__PURE__*/React.createElement("th", {
+    style: {
+      padding: "8px",
+      borderBottom: "1px solid #ddd",
+      textAlign: "left"
+    }
+  }, "\u4E8B\u4EF6\u7C7B\u578B"), /*#__PURE__*/React.createElement("th", {
+    style: {
+      padding: "8px",
+      borderBottom: "1px solid #ddd",
+      textAlign: "left"
+    }
+  }, "\u5927\u5C0F"), /*#__PURE__*/React.createElement("th", {
+    style: {
+      padding: "8px",
+      borderBottom: "1px solid #ddd",
+      textAlign: "left"
+    }
+  }, "\u5185\u5BB9"))), /*#__PURE__*/React.createElement("tbody", null, messageHistory.map(function (item) {
+    return /*#__PURE__*/React.createElement("tr", {
+      key: item.id,
+      style: {
+        borderBottom: "1px solid #ddd"
+      }
+    }, /*#__PURE__*/React.createElement("td", {
+      style: {
+        padding: "8px"
+      }
+    }, formatTime(item.timestamp)), /*#__PURE__*/React.createElement("td", {
+      style: {
+        padding: "8px"
+      }
+    }, item.direction === "in" ? "接收" : "发送"), /*#__PURE__*/React.createElement("td", {
+      style: {
+        padding: "8px"
+      }
+    }, item.message.event), /*#__PURE__*/React.createElement("td", {
+      style: {
+        padding: "8px"
+      }
+    }, formatBytes(item.size || 0)), /*#__PURE__*/React.createElement("td", {
+      style: {
+        padding: "8px"
+      }
+    }, /*#__PURE__*/React.createElement("pre", {
+      style: {
+        margin: 0,
+        maxWidth: "400px",
+        overflow: "auto"
+      }
+    }, JSON.stringify(item.message.data, null, 2))));
+  }))) : /*#__PURE__*/React.createElement("p", null, "\u6682\u65E0\u6D88\u606F\u8BB0\u5F55")));
+};
+export default SocketMonitorPage;

package/es/socket/components/index.d.ts

@@ -0,0 +1,2 @@
+import SocketMonitorPage from './SocketMonitorPage';
+export { SocketMonitorPage };

package/es/socket/components/index.js

@@ -0,0 +1,2 @@
+import SocketMonitorPage from "./SocketMonitorPage";
+export { SocketMonitorPage };