@pisell/materials 1.8.38 → 1.8.41

package/es/components/hardwareErrorTip/index.js

@@ -0,0 +1,151 @@
+import { getText } from "../../locales/index.js";
+import Statistics from "./errorTipStatistics/index.js";
+import ErrorCard from "./errorCard/index.js";
+import LogCard from "./logCard/index.js";
+import React, { useEffect, useMemo, useState } from "react";
+import { Button, Card, Empty, Input, Segmented, Select, Spin, Tabs } from "antd";
+import { DownloadOutlined, SearchOutlined } from "@ant-design/icons";
+import "./index.less";
+//#region src/components/hardwareErrorTip/index.tsx
+const { TabPane } = Tabs;
+const { Option } = Select;
+const HardwareErrorTip = ({ statistics, errors = [], logs = [], onExportLogs, onCloseError, onTabChange, activeTab: externalActiveTab, isLoadingErrors = false, isLoadingLogs = false, style }) => {
+	useEffect(() => {
+		document.body.id = "body";
+	}, []);
+	const [internalActiveTab, setInternalActiveTab] = useState("errors");
+	const activeTab = externalActiveTab !== void 0 ? externalActiveTab : internalActiveTab;
+	const [deviceFilter, setDeviceFilter] = useState("all");
+	const [errorLevelFilter, setErrorLevelFilter] = useState("all");
+	const [logLevelFilter, setLogLevelFilter] = useState("all");
+	const [searchText, setSearchText] = useState("");
+	const getDeviceOptions = useMemo(() => {
+		const devices = /* @__PURE__ */ new Set();
+		errors.forEach((error) => {
+			var _error$device;
+			if ((_error$device = error.device) === null || _error$device === void 0 ? void 0 : _error$device.device_name) devices.add(error.device.device_name);
+		});
+		logs.forEach((log) => {
+			var _log$device;
+			if ((_log$device = log.device) === null || _log$device === void 0 ? void 0 : _log$device.device_name) devices.add(log.device.device_name);
+		});
+		return Array.from(devices);
+	}, [errors, logs]);
+	const filteredErrors = useMemo(() => {
+		let filtered = errors;
+		if (deviceFilter !== "all") filtered = filtered.filter((error) => {
+			var _error$device2;
+			return ((_error$device2 = error.device) === null || _error$device2 === void 0 ? void 0 : _error$device2.device_name) === deviceFilter;
+		});
+		if (errorLevelFilter !== "all") {
+			const targetLevel = {
+				fatal: 0,
+				critical: 1,
+				normal: 2,
+				info: 3
+			}[errorLevelFilter];
+			filtered = filtered.filter((error) => error.error_level === targetLevel);
+		}
+		return filtered;
+	}, [
+		errors,
+		deviceFilter,
+		errorLevelFilter
+	]);
+	const filteredLogs = useMemo(() => {
+		let filtered = logs;
+		if (deviceFilter !== "all") filtered = filtered.filter((log) => {
+			var _log$device2;
+			return ((_log$device2 = log.device) === null || _log$device2 === void 0 ? void 0 : _log$device2.device_name) === deviceFilter;
+		});
+		if (logLevelFilter !== "all") {
+			const targetLevel = {
+				DEBUG: 0,
+				INFO: 1,
+				ERROR: 2
+			}[logLevelFilter];
+			filtered = filtered.filter((log) => log.log_level === targetLevel);
+		}
+		if (searchText) filtered = filtered.filter((log) => log.message.toLowerCase().includes(searchText.toLowerCase()));
+		return filtered;
+	}, [
+		logs,
+		deviceFilter,
+		logLevelFilter,
+		searchText
+	]);
+	return /* @__PURE__ */ React.createElement("div", {
+		className: "hardware-error-tip",
+		style
+	}, /* @__PURE__ */ React.createElement("div", { className: "statistics-section" }, /* @__PURE__ */ React.createElement(Statistics, { data: statistics })), /* @__PURE__ */ React.createElement(Card, { className: "main-content" }, /* @__PURE__ */ React.createElement("div", { className: "header" }, /* @__PURE__ */ React.createElement("h3", null, getText("pisell2.text.hardware-error.error-center")), /* @__PURE__ */ React.createElement("div", { className: "controls" }, /* @__PURE__ */ React.createElement(Select, {
+		value: deviceFilter,
+		onChange: setDeviceFilter,
+		style: { marginRight: 8 },
+		placeholder: getText("pisell2.text.hardware-error.all-devices"),
+		popupMatchSelectWidth: false
+	}, /* @__PURE__ */ React.createElement(Option, { value: "all" }, getText("pisell2.text.hardware-error.all-devices")), getDeviceOptions.map((device) => /* @__PURE__ */ React.createElement(Option, {
+		key: device,
+		value: device
+	}, device))), activeTab === "errors" ? /* @__PURE__ */ React.createElement(Select, {
+		value: errorLevelFilter,
+		onChange: setErrorLevelFilter,
+		placeholder: getText("pisell2.text.hardware-error.all-levels"),
+		popupMatchSelectWidth: false
+	}, /* @__PURE__ */ React.createElement(Option, { value: "all" }, getText("pisell2.text.hardware-error.all-levels")), /* @__PURE__ */ React.createElement(Option, { value: "fatal" }, getText("pisell2.text.hardware-error.fatal")), /* @__PURE__ */ React.createElement(Option, { value: "critical" }, getText("pisell2.text.hardware-error.critical")), /* @__PURE__ */ React.createElement(Option, { value: "normal" }, getText("pisell2.text.hardware-error.normal")), /* @__PURE__ */ React.createElement(Option, { value: "info" }, getText("pisell2.text.hardware-error.info"))) : /* @__PURE__ */ React.createElement(Select, {
+		value: logLevelFilter,
+		onChange: setLogLevelFilter,
+		placeholder: getText("pisell2.text.hardware-error.all-levels"),
+		popupMatchSelectWidth: false
+	}, /* @__PURE__ */ React.createElement(Option, { value: "all" }, getText("pisell2.text.hardware-error.all-levels")), /* @__PURE__ */ React.createElement(Option, { value: "ERROR" }, getText("pisell2.text.hardware-error.error-info")), /* @__PURE__ */ React.createElement(Option, { value: "INFO" }, getText("pisell2.text.hardware-error.important-info")), /* @__PURE__ */ React.createElement(Option, { value: "DEBUG" }, getText("pisell2.text.hardware-error.debug-info"))))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Segmented, {
+		value: activeTab,
+		onChange: (value) => {
+			if (externalActiveTab !== void 0) onTabChange === null || onTabChange === void 0 || onTabChange(value);
+			else setInternalActiveTab(value);
+		},
+		options: [{
+			label: getText("pisell2.text.hardware-error.error-list"),
+			value: "errors"
+		}, {
+			label: getText("pisell2.text.hardware-error.error-logs"),
+			value: "logs"
+		}],
+		style: { fontWeight: "bold" }
+	}), activeTab === "logs" ? /* @__PURE__ */ React.createElement("div", { className: "logs-search-export-bar" }, /* @__PURE__ */ React.createElement(Input, {
+		placeholder: getText("pisell2.text.hardware-error.search-logs"),
+		value: searchText,
+		onChange: (e) => setSearchText(e.target.value),
+		style: {
+			width: 300,
+			marginRight: 8
+		},
+		allowClear: true,
+		prefix: /* @__PURE__ */ React.createElement(SearchOutlined, { style: { color: "#7e8490" } })
+	}), /* @__PURE__ */ React.createElement(Button, {
+		type: "text",
+		icon: /* @__PURE__ */ React.createElement(DownloadOutlined, null),
+		onClick: () => onExportLogs === null || onExportLogs === void 0 ? void 0 : onExportLogs(filteredLogs)
+	}, getText("pisell2.text.hardware-error.export-logs"))) : null), /* @__PURE__ */ React.createElement(Tabs, {
+		activeKey: activeTab,
+		onChange: (key) => {
+			if (externalActiveTab !== void 0) onTabChange === null || onTabChange === void 0 || onTabChange(key);
+			else setInternalActiveTab(key);
+		},
+		renderTabBar: () => null,
+		style: { marginTop: 16 }
+	}, /* @__PURE__ */ React.createElement(TabPane, {
+		tab: getText("pisell2.text.hardware-error.error-list"),
+		key: "errors"
+	}, /* @__PURE__ */ React.createElement("div", { className: "error-list" }, /* @__PURE__ */ React.createElement(Spin, { spinning: isLoadingErrors }, !isLoadingErrors && filteredErrors.length === 0 ? /* @__PURE__ */ React.createElement(Empty, { description: getText("pisell2.text.hardware-error.no-errors") }) : filteredErrors.map((error, index) => /* @__PURE__ */ React.createElement(ErrorCard, {
+		key: index,
+		data: error,
+		onClose: onCloseError ? () => onCloseError(error, index) : void 0
+	}))))), /* @__PURE__ */ React.createElement(TabPane, {
+		tab: getText("pisell2.text.hardware-error.error-logs"),
+		key: "logs"
+	}, /* @__PURE__ */ React.createElement("div", { className: "log-list" }, /* @__PURE__ */ React.createElement(Spin, { spinning: isLoadingLogs }, !isLoadingLogs && filteredLogs.length === 0 ? /* @__PURE__ */ React.createElement(Empty, { description: getText("pisell2.text.hardware-error.no-logs") }) : filteredLogs.map((log, index) => /* @__PURE__ */ React.createElement(LogCard, {
+		key: index,
+		data: log
+	}))))))));
+};
+//#endregion
+export { HardwareErrorTip as default };

package/es/components/hardwareErrorTip/index.less

@@ -0,0 +1,95 @@
+.hardware-error-tip {
+  display: flex;
+  flex-direction: column;
+
+  .main-content {
+    margin-top: 16px;
+    flex: 1;
+    overflow: hidden;
+
+    .pisell-lowcode-card-body {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .pisell-lowcode-tabs {
+      flex: 1;
+      overflow: hidden;
+    }
+
+    .pisell-lowcode-tabs-content,
+    .pisell-lowcode-tabs-tabpane {
+      height: 100%;
+    }
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+      padding-bottom: 12px;
+
+      h3 {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 600;
+        color: #262626;
+      }
+
+      .controls {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .logs-search-export-bar {
+      margin-top: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .error-list,
+    .log-list {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      overflow-y: auto;
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .hardware-error-tip {
+    .error-tip-details {
+      > header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 12px;
+
+        .right-area {
+          width: 100%;
+          justify-content: flex-start;
+        }
+      }
+    }
+
+    .log-controls {
+      flex-direction: column;
+      align-items: stretch;
+
+      .ant-input {
+        margin-right: 0 !important;
+        margin-bottom: 8px;
+      }
+    }
+
+    .content-area {
+      padding: 12px;
+    }
+  }
+}

package/es/components/hardwareErrorTip/logCard/index.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+//#region src/components/hardwareErrorTip/logCard/index.d.ts
+declare const DEVICE_TYPE_MAP: {
+  readonly printer: any;
+  readonly barcode_scanner: any;
+  readonly cds: any;
+  readonly kds: any;
+  readonly display: any;
+  readonly card_reader: any;
+  readonly till: any;
+  readonly scale: any;
+};
+interface LogCardData {
+  log_level: 0 | 1 | 2;
+  message: string;
+  time: string;
+  device: {
+    device_type: keyof typeof DEVICE_TYPE_MAP;
+    device_name: string;
+    device_idfa: string;
+  };
+  data?: string;
+}
+//#endregion
+export { LogCardData };

package/es/components/hardwareErrorTip/logCard/index.js

@@ -0,0 +1,72 @@
+import { getText } from "../../../locales/index.js";
+import { prefix } from "../types.js";
+import React from "react";
+import classNames from "classnames";
+import "./index.less";
+//#region src/components/hardwareErrorTip/logCard/index.tsx
+const LOG_LEVEL_MAP = {
+	0: "debug",
+	1: "info",
+	2: "error"
+};
+const LOG_LEVEL_COLORS = {
+	debug: "#666",
+	info: "#1890ff",
+	error: "#ff4d4f"
+};
+const DEVICE_TYPE_MAP = {
+	printer: getText("pisell2.text.hardware-error.device.printer"),
+	barcode_scanner: getText("pisell2.text.hardware-error.device.barcode-scanner"),
+	cds: getText("pisell2.text.hardware-error.device.cds"),
+	kds: getText("pisell2.text.hardware-error.device.kds"),
+	display: getText("pisell2.text.hardware-error.device.display"),
+	card_reader: getText("pisell2.text.hardware-error.device.card-reader"),
+	till: getText("pisell2.text.hardware-error.device.till"),
+	scale: getText("pisell2.text.hardware-error.device.scale")
+};
+const LogCard = (props) => {
+	const { data } = props;
+	const logLevel = LOG_LEVEL_MAP[data.log_level];
+	const logLevelColor = LOG_LEVEL_COLORS[logLevel];
+	const deviceTypeName = DEVICE_TYPE_MAP[data.device.device_type] || data.device.device_type;
+	const formatTime = (timeStr) => {
+		try {
+			return new Date(timeStr).toLocaleString("zh-CN", {
+				year: "numeric",
+				month: "2-digit",
+				day: "2-digit",
+				hour: "2-digit",
+				minute: "2-digit",
+				second: "2-digit",
+				fractionalSecondDigits: 3
+			});
+		} catch (_unused) {
+			return timeStr;
+		}
+	};
+	const formatLogLevel = (level) => {
+		return {
+			0: "DEBUG",
+			1: "INFO",
+			2: "ERROR"
+		}[level];
+	};
+	const formatData = (dataStr) => {
+		if (!dataStr) return null;
+		try {
+			const parsed = JSON.parse(dataStr);
+			return JSON.stringify(parsed, null, 2);
+		} catch (_unused2) {
+			return dataStr;
+		}
+	};
+	return /* @__PURE__ */ React.createElement("div", {
+		className: classNames(`${prefix}-log-card`, logLevel),
+		style: { borderLeftColor: logLevelColor }
+	}, /* @__PURE__ */ React.createElement("div", { className: `${prefix}-log-card-header` }, /* @__PURE__ */ React.createElement("div", { className: `${prefix}-log-card-time` }, formatTime(data.time)), /* @__PURE__ */ React.createElement("div", {
+		className: `${prefix}-log-card-level`,
+		style: { color: logLevelColor }
+	}, formatLogLevel(data.log_level)), /* @__PURE__ */ React.createElement("div", { className: `${prefix}-log-card-device-id` }, data.device.device_idfa)), /* @__PURE__ */ React.createElement("div", { className: `${prefix}-log-card-content` }, /* @__PURE__ */ React.createElement("div", { className: `${prefix}-log-card-service` }, "[", deviceTypeName, "] ", data.message), data.data && /* @__PURE__ */ React.createElement("div", { className: `pisell-lowcode-log-card-data` }, /* @__PURE__ */ React.createElement("pre", null, formatData(data.data)))));
+};
+//#endregion
+export { LogCard as default };

package/es/components/hardwareErrorTip/logCard/index.less

@@ -0,0 +1,121 @@
+.pisell-lowcode-log-card {
+  position: relative;
+  padding: 12px 16px;
+  margin-bottom: 8px;
+  border-radius: 4px;
+  border-left: 4px solid #ddd;
+  background-color: #fafafa;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
+
+  // 头部信息
+  &-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+    font-size: 12px;
+    color: #666;
+  }
+
+  &-time {
+    font-weight: 500;
+    color: #6b7280;
+  }
+
+  &-level {
+    font-weight: bold;
+    padding: 2px 6px;
+    border-radius: 3px;
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  &-device-id {
+    color: #6b7280;
+    font-weight: bold;
+  }
+
+  // 内容区域
+  &-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &-service {
+    color: #333;
+    line-height: 1.4;
+    font-weight: 500;
+  }
+
+  &-data {
+    background-color: #f8f8f8;
+    border-radius: 4px;
+    padding: 8px;
+    
+    pre {
+      margin: 0;
+      font-size: 12px;
+      color: #6b7280;
+      line-height: 1.3;
+      white-space: pre-wrap;
+      word-break: break-all;
+      font-family: unset;
+    }
+  }
+
+  // 不同日志级别的样式
+  &.debug {
+    border-left-color: #666;
+    
+    .pisell-lowcode-log-card-level {
+      background-color: rgba(102, 102, 102, 0.1);
+    }
+  }
+
+  &.info {
+    border-left-color: #1890ff;
+    
+    .pisell-lowcode-log-card-level {
+      background-color: rgba(24, 144, 255, 0.1);
+    }
+  }
+
+  &.error {
+    border-left-color: #ff4d4f;
+    background-color: #fff2f0;
+    
+    .pisell-lowcode-log-card-level {
+      background-color: rgba(255, 77, 79, 0.1);
+    }
+    
+    &:hover {
+      background-color: #ffebe8;
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .pisell-lowcode-log-card {
+    padding: 8px 12px;
+    margin-bottom: 6px;
+
+    &-header {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 4px;
+    }
+
+    &-service {
+      font-size: 12px;
+    }
+
+    &-data pre {
+      font-size: 10px;
+    }
+  }
+}