提交qiming-dev-inject

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

@@ -0,0 +1,119 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.app {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+header {
+  margin-bottom: 40px;
+}
+
+header h1 {
+  margin: 0;
+  font-size: 2.5rem;
+  margin-bottom: 10px;
+}
+
+header p {
+  margin: 0;
+  opacity: 0.8;
+  font-size: 1.2rem;
+}
+
+.section {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 20px;
+  backdrop-filter: blur(10px);
+}
+
+.section h2 {
+  margin-top: 0;
+  margin-bottom: 15px;
+}
+
+.buttons {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+button:hover {
+  transform: translateY(-2px);
+}
+
+button.danger {
+  background: #f56565;
+  color: white;
+}
+
+button.danger:hover {
+  background: #e53e3e;
+}
+
+button.secondary {
+  background: #718096;
+  color: white;
+}
+
+button.secondary:hover {
+  background: #4a5568;
+}
+
+.error-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.error-item {
+  background: rgba(245, 101, 101, 0.2);
+  border-left: 3px solid #f56565;
+  padding: 10px;
+  margin: 5px 0;
+  border-radius: 4px;
+  text-align: left;
+  font-family: monospace;
+  font-size: 14px;
+}
+
+.no-errors {
+  color: #a0aec0;
+  font-style: italic;
+}
+
+ul {
+  text-align: left;
+}
+
+code {
+  background: rgba(0, 0, 0, 0.2);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: monospace;
+}

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;

qiming-dev-inject/test-projects/vite-project/src/index.css

@@ -0,0 +1,66 @@
+:root {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
+
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+#root {
+    width: 100%;
+    margin: 0 auto;
+    text-align: center;
+}
+
+button {
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #1a1a1a;
+    cursor: pointer;
+    transition: border-color 0.25s;
+}
+
+button:hover {
+    border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
+}

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

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)