fix(api): 修复 API 导入导致的 TypeScript 编译错误

- 将所有 API 文件中的 import request from '@/utils/request'替换为 import request from '@/utils/request-legacy' - 创建了 request-legacy.ts 兼容层，保持与现有 API 代码的完全兼容性 - 支持旧的 API 响应格式 {code, message, data} - 自动处理认证头和错误处理 - 批量更新了 30+ 个 API 文件的导入路径 - 修复了 TypeScript 编译错误，项目现在可以正常编译和运行
2025-08-14 19:22:02 +08:00
parent 745040d254
commit 6d9a6ef7e4
67 changed files with 2860 additions and 129 deletions
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -0,0 +1,124 @@
+import React, { Component, ReactNode } from 'react';
+import Taro from '@tarojs/taro';
+import { View, Text, Button } from '@tarojs/components';
+import './ErrorBoundary.scss';
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error?: Error;
+  errorInfo?: React.ErrorInfo;
+}
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+/**
+ * 全局错误边界组件
+ * 用于捕获React组件树中的JavaScript错误
+ */
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    // 更新state，下次渲染将显示错误UI
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    // 记录错误信息
+    this.setState({
+      error,
+      errorInfo
+    });
+
+    // 调用外部错误处理函数
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    }
+
+    // 上报错误到监控系统
+    this.reportError(error, errorInfo);
+  }
+
+  // 上报错误到监控系统
+  private reportError = (error: Error, errorInfo: React.ErrorInfo) => {
+    try {
+      // 这里可以集成错误监控服务，如Sentry、Bugsnag等
+      console.error('ErrorBoundary caught an error:', error, errorInfo);
+      
+      // 可以发送到后端日志系统
+      // this.sendErrorToServer(error, errorInfo);
+    } catch (reportError) {
+      console.error('Failed to report error:', reportError);
+    }
+  };
+
+  // 重置错误状态
+  private handleReset = () => {
+    this.setState({ hasError: false, error: undefined, errorInfo: undefined });
+  };
+
+  // 重新加载页面
+  private handleReload = () => {
+    Taro.reLaunch({ url: '/pages/index/index' });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      // 如果有自定义的fallback UI，使用它
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      // 默认的错误UI
+      return (
+        <View className="error-boundary">
+          <View className="error-boundary__container">
+            <View className="error-boundary__icon">😵</View>
+            <Text className="error-boundary__title">页面出现了问题</Text>
+            <Text className="error-boundary__message">
+              抱歉，页面遇到了一些技术问题，请尝试刷新页面或返回首页
+            </Text>
+            
+            {process.env.NODE_ENV === 'development' && (
+              <View className="error-boundary__details">
+                <Text className="error-boundary__error-title">错误详情：</Text>
+                <Text className="error-boundary__error-message">
+                  {this.state.error?.message}
+                </Text>
+                <Text className="error-boundary__error-stack">
+                  {this.state.error?.stack}
+                </Text>
+              </View>
+            )}
+            
+            <View className="error-boundary__actions">
+              <Button 
+                className="error-boundary__button error-boundary__button--primary"
+                onClick={this.handleReset}
+              >
+                重试
+              </Button>
+              <Button 
+                className="error-boundary__button error-boundary__button--secondary"
+                onClick={this.handleReload}
+              >
+                返回首页
+              </Button>
+            </View>
+          </View>
+        </View>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;