byy/qiming
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交qiming-dev-inject

Browse Source
This commit is contained in:
Codex
2026-06-01 12:53:19 +08:00
parent 96af3b324b
commit 9e9486b7c2
76 changed files with 6397 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
qiming-dev-inject/test-projects/vite-project/.gitignore vendored Normal file
View File

@@ -0,0 +1,25 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

32
qiming-dev-inject/test-projects/vite-project/README.md Normal file
View File

@@ -0,0 +1,32 @@
# Vite React 测试项目
这是一个用于测试 dev-inject 框架感知注入功能的 Vite + React 项目。
## 安装依赖
```bash
npm install
```
## 启动开发服务器
```bash
npm run dev
```
项目将在 http://localhost:3001 运行。
## 测试步骤
1. 启动项目：`npm run dev`
2. 使用 dev-inject 注入监控脚本
3. 点击页面上的按钮触发各种错误
4. 在浏览器控制台运行 DevMonitor 命令查看监控信息
## DevMonitor 命令
- `DevMonitor.showPanel()` - 显示监控面板
- `DevMonitor.getStats()` - 获取统计信息
- `DevMonitor.clearErrors()` - 清除错误记录
- `window.__DEV_INJECT__` - 检查注入状态

16
qiming-dev-inject/test-projects/vite-project/index.html Normal file
View File

@@ -0,0 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite Test - dev-inject</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

21
qiming-dev-inject/test-projects/vite-project/package.json Normal file
View File

@@ -0,0 +1,21 @@
{
"name": "vite-test-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@vitejs/plugin-react": "^4.2.1",
"vite": "^5.0.8"
}
}

12
qiming-dev-inject/test-projects/vite-project/postcss.config.js Normal file
View File

@@ -0,0 +1,12 @@
// PostCSS 配置文件
// 此文件用于防止 Vite 向上查找父目录的 PostCSS 配置
// 本项目使用普通 CSS，不需要 PostCSS 插件
export default {
plugins: {
// 如果需要 PostCSS 插件，可以在这里添加
// 例如：autoprefixer, tailwindcss 等
}
}

119
qiming-dev-inject/test-projects/vite-project/src/App.css Normal file
View File

@@ -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;
}

73
qiming-dev-inject/test-projects/vite-project/src/App.jsx Normal file
View File

@@ -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;

66
qiming-dev-inject/test-projects/vite-project/src/index.css Normal file
View File

@@ -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;
}
}

10
qiming-dev-inject/test-projects/vite-project/src/main.jsx Normal file
View File

@@ -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>,
)

40
qiming-dev-inject/test-projects/vite-project/vite.config.js Normal file
View File

@@ -0,0 +1,40 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [
// <!-- DEV-INJECT-START -->
{
name: 'dev-inject',
enforce: 'post', // 确保在 HTML 注入阶段最后执行
transformIndexHtml(html) {
if (!html.includes('data-id="dev-inject-monitor"')) {
return html.replace("</head>", `
<script data-id="dev-inject-monitor">
(function() {
const remote = "https://testagent.xspaceagi.com/sdk/dev-monitor.js";
const separator = remote.includes('?') ? '&' : '?';
const script = document.createElement('script');
script.src = remote + separator + 't=' + Date.now();
script.dataset.id = 'dev-inject-monitor-script';
script.defer = true;
// 防止重复注入
if (!document.querySelector('[data-id="dev-inject-monitor-script"]')) {
document.head.appendChild(script);
}
})();
</script>
\n</head>`);
}
return html;
}
},
// <!-- DEV-INJECT-END -->
react()
],
server: {
port: 3001
}
})