提交qiming-dev-inject

qiming-dev-inject/test-projects/vite-project/src/App.jsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react'
+import './App.css'
+
+function App() {
+  const [errors, setErrors] = useState([]);
+
+  const triggerError = () => {
+    try {
+      throw new Error('测试错误 - Vite 项目');
+    } catch (error) {
+      setErrors(prev => [...prev, error.message]);
+    }
+  };
+
+  const triggerAsyncError = () => {
+    Promise.reject(new Error('异步错误测试 - Vite'));
+  };
+
+  const clearErrors = () => {
+    setErrors([]);
+  };
+
+  return (
+    <div className="app">
+      <div className="container">
+        <header>
+          <h1>🟣 Vite Test Project</h1>
+          <p>测试 dev-inject 框架感知注入功能</p>
+        </header>
+
+        <div className="section">
+          <h2>🚀 测试功能</h2>
+          <div className="buttons">
+            <button onClick={triggerError} className="danger">
+              触发同步错误
+            </button>
+            <button onClick={triggerAsyncError} className="danger">
+              触发异步错误
+            </button>
+            <button onClick={clearErrors} className="secondary">
+              清除错误
+            </button>
+          </div>
+        </div>
+
+        <div className="section">
+          <h2>📊 错误记录</h2>
+          {errors.length === 0 ? (
+            <p className="no-errors">暂无错误</p>
+          ) : (
+            <ul className="error-list">
+              {errors.map((error, index) => (
+                <li key={index} className="error-item">{error}</li>
+              ))}
+            </ul>
+          )}
+        </div>
+
+        <div className="section">
+          <h2>🔧 DevMonitor 检查</h2>
+          <p>在浏览器控制台中检查：</p>
+          <ul>
+            <li><code>DevMonitor.showPanel()</code> - 显示监控面板</li>
+            <li><code>DevMonitor.getStats()</code> - 获取统计信息</li>
+            <li><code>window.__DEV_INJECT__</code> - 检查注入状态</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;