feat(HUD): 添加HUD界面资产与组件

- 新增HUD图标、面板和状态指示器资产 - 实现HUD图标组件和错误边界组件 - 重构顶部状态栏和底部导航栏 - 更新路线面板样式和交互 - 添加HUD资产清单和切片脚本 - 移除未使用的资产文件 - 调整API安全配置和生产环境设置
2026-04-29 01:24:37 +08:00
parent 6234a50bdb
commit 5c41eb410b
71 changed files with 2492 additions and 1028 deletions
@@ -0,0 +1,82 @@
+import { Component, type ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    console.error('[ErrorBoundary]', error, info.componentStack);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) return this.props.fallback;
+
+      return (
+        <div
+          style={{
+            display: 'grid',
+            placeItems: 'center',
+            minHeight: '100dvh',
+            padding: '2rem',
+            color: '#efe2ce',
+            background: '#070604',
+            fontFamily: "'Chakra Petch', sans-serif",
+          }}
+        >
+          <div
+            style={{
+              maxWidth: 480,
+              textAlign: 'center',
+              padding: '2rem',
+              borderRadius: 20,
+              border: '1px solid rgba(225, 109, 76, 0.3)',
+              background: 'rgba(16, 13, 10, 0.94)',
+            }}
+          >
+            <h2 style={{ margin: '0 0 0.75rem', fontSize: '1.3rem', letterSpacing: '0.08em' }}>
+              界面发生异常
+            </h2>
+            <p style={{ margin: '0 0 1.25rem', color: '#a38f73', lineHeight: 1.5 }}>
+              {this.state.error?.message ?? '渲染过程中出现未知错误，请尝试刷新页面。'}
+            </p>
+            <button
+              onClick={() => window.location.reload()}
+              style={{
+                minHeight: 48,
+                padding: '0 2rem',
+                borderRadius: 14,
+                border: '1px solid rgba(228, 158, 75, 0.42)',
+                background: 'linear-gradient(135deg, #eeab52, #c86d22)',
+                color: '#160f08',
+                fontWeight: 700,
+                cursor: 'pointer',
+                fontSize: '0.9rem',
+              }}
+            >
+              刷新页面
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}