docs(claude): restructure documentation management and add feedback system

- Restructure §8 from "文档沉淀规则" to "文档管理规则" with 4 subsections - Add docs/ structure with features/ and knowledge-base/ directories - Add feature documentation template with 7 sections (概述/设计初衷/技术设计/预期作用/实际效果/演化路线/头脑风暴) - Add feature update trigger matrix (新增/修改/完成/问题/反馈) - Add documentation quality checklist - Add §16
2026-03-16 13:54:03 +08:00
parent 8e630882c7
commit adfd7024df
44 changed files with 10491 additions and 248 deletions
--- a/desktop/src/components/ui/ErrorBoundary.tsx
+++ b/desktop/src/components/ui/ErrorBoundary.tsx
@@ -0,0 +1,179 @@
+import { Component, ReactNode, ErrorInfo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { AlertTriangle, RefreshCcw, Bug, Home } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { Button } from './Button';
+import { reportError } from '../../lib/error-handling';
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+  onReset?: () => void;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+}
+
+/**
+ * ErrorBoundary Component
+ *
+ * Catches React rendering errors and displays a friendly error screen
+ * with recovery options and error reporting.
+ */
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorInfo {
+    return {
+      componentStack: error.stack || 'No stack trace available',
+      errorName: error.name || 'Unknown Error',
+      errorMessage: error.message || 'An unexpected error occurred',
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    const { onError } = this.props;
+
+    // Call optional error handler
+    if (onError) {
+      onError(error, errorInfo);
+    }
+
+    // Update state to show error UI
+    this.setState({
+      hasError: true,
+      error,
+      errorInfo: {
+        componentStack: errorInfo.componentStack,
+        errorName: errorInfo.errorName || error.name || 'Unknown Error',
+        errorMessage: errorInfo.errorMessage || error.message || 'An unexpected error occurred',
+      },
+    });
+
+  }
+
+  handleReset = () => {
+    const { onReset } = this.props;
+
+    // Reset error state
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    });
+
+    // Call optional reset handler
+    if (onReset) {
+      onReset();
+    }
+  };
+
+  handleReport = () => {
+    const { error, errorInfo } = this.state;
+    if (error && errorInfo) {
+      reportError(error, {
+        componentStack: errorInfo.componentStack,
+        errorName: errorInfo.errorName,
+        errorMessage: errorInfo.errorMessage,
+      });
+    }
+  };
+
+  handleGoHome = () => {
+    // Navigate to home/main view
+    window.location.href = '/';
+  };
+
+  render() {
+    const { children, fallback } = this.props;
+    const { hasError, error, errorInfo } = this.state;
+
+    if (hasError && error) {
+      // Use custom fallback if provided
+      if (fallback) {
+        return fallback;
+      }
+
+      // Default error UI
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            className="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden"
+          >
+            {/* Error Icon */}
+            <div className="flex items-center justify-center w-16 h-16 bg-red-100 dark:bg-red-900/20 rounded-full mx-4">
+              <AlertTriangle className="w-8 h-8 text-red-500" />
+            </div>
+
+            {/* Content */}
+            <div className="p-6 text-center">
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+                Something went wrong
+              </h2>
+              <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                {errorInfo?.errorMessage || error.message || 'An unexpected error occurred'}
+              </p>
+
+              {/* Error Details */}
+              <div className="mt-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg text-left">
+                <p className="text-xs text-gray-500 dark:text-gray-400 font-mono">
+                  {errorInfo?.errorName || 'Unknown Error'}
+                </p>
+              </div>
+
+              {/* Actions */}
+              <div className="flex flex-col gap-2 mt-6">
+                <Button
+                  variant="primary"
+                  size="sm"
+                  onClick={this.handleReset}
+                  className="w-full"
+                >
+                  <RefreshC className="w-4 h-4 mr-2" />
+                  Try Again
+                </Button>
+
+                <div className="flex gap-2">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={this.handleReport}
+                    className="flex-1"
+                  >
+                    <Bug className="w-4 h-4 mr-2" />
+                    Report Issue
+                  </Button>
+
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={this.handleGoHome}
+                    className="flex-1"
+                  >
+                    <Home className="w-4 h-4 mr-2" />
+                    Go Home
+                  </Button>
+                </div>
+              </div>
+            </motion.div>
+          </div>
+        );
+      }
+
+      return children;
+    }
+  }
+}