前端: 添加错误边界组件,优化package.json

frontend/package.json

@@ -6,7 +6,9 @@
   "scripts": {
     "dev": "electron .",
     "build": "electron-builder",
-    "test": "jest"
+    "build:win": "electron-builder --win",
+    "build:mac": "electron-builder --mac",
+    "build:linux": "electron-builder --linux"
   },
   "dependencies": {
     "react": "^18.2.0",
@@ -18,5 +20,12 @@
     "electron": "^28.0.0",
     "electron-builder": "^24.9.0",
     "typescript": "^5.3.0"
+  },
+  "build": {
+    "appId": "com.clouddisk.app",
+    "productName": "CloudDisk",
+    "directories": {
+      "output": "release"
+    }
   }
 }

frontend/src/renderer/components/ErrorBoundary.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('Error:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ padding: 50, textAlign: 'center' }}>
+          <h1>出错了</h1>
+          <p>{this.state.error?.message}</p>
+          <button onClick={() => window.location.reload()}>刷新页面</button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;