refactor(editor-app): 改进架构和类型安全 (#226)

* refactor(editor-app): 改进架构和类型安全 * refactor(editor-app): 开始拆分 Inspector.tsx - 创建基础架构 * refactor(editor-app): 完成 Inspector.tsx 拆分 * refactor(editor-app): 优化 Inspector 类型定义，消除所有 any 使用 * refactor(editor): 实现可扩展的属性渲染器系统 * Potential fix for code scanning alert no. 231: Unused variable, import, function or class Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> * fix(ci): 防止 Codecov 服务故障阻塞 CI 流程 --------- Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
2025-11-18 22:28:13 +08:00
parent bce3a6e253
commit caed5428d5
48 changed files with 2221 additions and 44 deletions
--- a/packages/editor-app/src/components/ErrorBoundary.tsx
+++ b/packages/editor-app/src/components/ErrorBoundary.tsx
@@ -0,0 +1,74 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { DomainError } from '../domain/errors';
+
+interface ErrorBoundaryProps {
+    children: ReactNode;
+    fallback?: (error: Error) => ReactNode;
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+        return { hasError: true, error };
+    }
+
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+        console.error('ErrorBoundary caught error:', error, errorInfo);
+        this.props.onError?.(error, errorInfo);
+    }
+
+    render(): ReactNode {
+        if (this.state.hasError && this.state.error) {
+            if (this.props.fallback) {
+                return this.props.fallback(this.state.error);
+            }
+
+            return <DefaultErrorFallback error={this.state.error} />;
+        }
+
+        return this.props.children;
+    }
+}
+
+function DefaultErrorFallback({ error }: { error: Error }): JSX.Element {
+    const message = error instanceof DomainError ? error.getUserMessage() : error.message;
+
+    return (
+        <div
+            style={{
+                padding: '20px',
+                backgroundColor: '#fee',
+                border: '1px solid #fcc',
+                borderRadius: '4px',
+                margin: '20px'
+            }}
+        >
+            <h2 style={{ color: '#c00', marginTop: 0 }}>出错了</h2>
+            <p>{message}</p>
+            <details style={{ marginTop: '10px' }}>
+                <summary style={{ cursor: 'pointer' }}>技术详情</summary>
+                <pre
+                    style={{
+                        marginTop: '10px',
+                        padding: '10px',
+                        backgroundColor: '#f5f5f5',
+                        borderRadius: '4px',
+                        overflow: 'auto'
+                    }}
+                >
+                    {error.stack}
+                </pre>
+            </details>
+        </div>
+    );
+}