Rename customs-tablet-frontend to public-frontend and add new features

- Rename customs-tablet-frontend/ to public-frontend/ for broader scope - Add new pages: customs, inspection with camera integration - Add new services: apiClient.ts, backendApi.ts, normalizers.ts - Add CameraFrame component for real-time video streaming - Add scan_fixer module with clock_publisher and timestamp fix utilities - Update startup scripts to support new frontend structure - Update arm_server configuration and service files Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-22 10:18:20 +08:00
parent 083d12016a
commit 1429442dbd
49 changed files with 2758 additions and 2141 deletions
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Tag } from 'antd';
+import {
+  CheckCircleOutlined,
+  ClockCircleOutlined,
+  CloseCircleOutlined,
+  MinusCircleOutlined,
+  PauseCircleOutlined,
+  QuestionCircleOutlined,
+  SyncOutlined,
+  WarningOutlined,
+} from '@ant-design/icons';
+
+type StatusType =
+  | 'pending'
+  | 'inspecting'
+  | 'released'
+  | 'abnormal'
+  | 'idle'
+  | 'running'
+  | 'paused'
+  | 'completed'
+  | 'online'
+  | 'offline';
+
+interface StatusBadgeProps {
+  status: StatusType;
+  type?: 'badge' | 'tag';
+}
+
+export const StatusBadge: React.FC<StatusBadgeProps> = ({ status, type = 'badge' }) => {
+  const config = (() => {
+    switch (status) {
+      case 'pending':
+        return { color: 'warning', text: '待查验', icon: <ClockCircleOutlined style={{ color: '#faad14' }} /> };
+      case 'inspecting':
+      case 'running':
+        return { color: 'processing', text: '查验中', icon: <SyncOutlined style={{ color: '#1890ff' }} /> };
+      case 'released':
+      case 'completed':
+        return { color: 'success', text: '已放行', icon: <CheckCircleOutlined style={{ color: '#52c41a' }} /> };
+      case 'abnormal':
+        return { color: 'error', text: '异常', icon: <WarningOutlined style={{ color: '#ff4d4f' }} /> };
+      case 'idle':
+        return { color: 'default', text: '空闲', icon: <MinusCircleOutlined style={{ color: '#d9d9d9' }} /> };
+      case 'paused':
+        return { color: 'warning', text: '已暂停', icon: <PauseCircleOutlined style={{ color: '#faad14' }} /> };
+      case 'online':
+        return { color: 'success', text: '在线', icon: <CheckCircleOutlined style={{ color: '#52c41a' }} /> };
+      case 'offline':
+        return { color: 'error', text: '离线', icon: <CloseCircleOutlined style={{ color: '#ff4d4f' }} /> };
+      default:
+        return { color: 'default', text: '未知', icon: <QuestionCircleOutlined style={{ color: '#d9d9d9' }} /> };
+    }
+  })();
+
+  if (type === 'tag') {
+    return <Tag color={config.color} icon={config.icon}>{config.text}</Tag>;
+  }
+
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+      {config.icon}
+      <span>{config.text}</span>
+    </span>
+  );
+};