提交qiming-dev-inject
This commit is contained in:
Codex
36
qiming-dev-inject/test-projects/next-app-project/.gitignore
vendored
Normal file
36
qiming-dev-inject/test-projects/next-app-project/.gitignore
vendored
Normal file
@@ -0,0 +1,36 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
|
||||
32
qiming-dev-inject/test-projects/next-app-project/README.md
Normal file
32
qiming-dev-inject/test-projects/next-app-project/README.md
Normal file
@@ -0,0 +1,32 @@
|
||||
# Next.js App Router 测试项目
|
||||
|
||||
这是一个用于测试 dev-inject 框架感知注入功能的 Next.js App Router 项目。
|
||||
|
||||
## 安装依赖
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
## 启动开发服务器
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
项目将在 http://localhost:3000 运行。
|
||||
|
||||
## 测试步骤
|
||||
|
||||
1. 启动项目：`npm run dev`
|
||||
2. 使用 dev-inject 注入监控脚本
|
||||
3. 点击页面上的按钮触发各种错误
|
||||
4. 在浏览器控制台运行 DevMonitor 命令查看监控信息
|
||||
|
||||
## DevMonitor 命令
|
||||
|
||||
- `DevMonitor.showPanel()` - 显示监控面板
|
||||
- `DevMonitor.getStats()` - 获取统计信息
|
||||
- `DevMonitor.clearErrors()` - 清除错误记录
|
||||
- `window.__DEV_INJECT__` - 检查注入状态
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@@ -0,0 +1,32 @@
|
||||
import type { Metadata } from 'next'
|
||||
import { Inter } from 'next/font/google'
|
||||
import './globals.css'
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] })
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Next.js App Test - dev-inject',
|
||||
description: '测试 dev-inject 框架感知注入功能',
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
{/* DEV-INJECT-START */}
|
||||
{process.env.NODE_ENV === 'development' && (
|
||||
<script dangerouslySetInnerHTML={{
|
||||
__html: "(function() {\n const remote = \"https://testagent.xspaceagi.com/sdk/dev-monitor.js\";\n const separator = remote.includes('?') ? '&' : '?';\n const script = document.createElement('script');\n script.src = remote + separator + 't=' + Date.now();\n script.dataset.id = 'dev-inject-monitor-script';\n script.defer = true;\n // 防止重复注入\n if (!document.querySelector('[data-id=\"dev-inject-monitor-script\"]')) {\n document.head.appendChild(script);\n }\n })();"
|
||||
}} />
|
||||
)}
|
||||
{/* DEV-INJECT-END */}
|
||||
</head>
|
||||
|
||||
<body className={inter.className}>{children}</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function Home() {
|
||||
const [errors, setErrors] = useState<string[]>([]);
|
||||
|
||||
const triggerError = () => {
|
||||
try {
|
||||
throw new Error('测试错误 - Next.js App Router');
|
||||
} catch (error) {
|
||||
setErrors(prev => [...prev, (error as Error).message]);
|
||||
}
|
||||
};
|
||||
|
||||
const triggerAsyncError = () => {
|
||||
Promise.reject(new Error('异步错误测试 - Next.js App'));
|
||||
};
|
||||
|
||||
const clearErrors = () => {
|
||||
setErrors([]);
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 text-white">
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<header className="text-center mb-12">
|
||||
<h1 className="text-4xl font-bold mb-4">🟢 Next.js App Router Test</h1>
|
||||
<p className="text-xl opacity-90">测试 dev-inject 框架感知注入功能</p>
|
||||
</header>
|
||||
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="bg-white/10 backdrop-blur-md rounded-xl p-6 mb-6">
|
||||
<h2 className="text-2xl font-semibold mb-4">🚀 测试功能</h2>
|
||||
<div className="flex flex-wrap gap-3 justify-center">
|
||||
<button
|
||||
onClick={triggerError}
|
||||
className="px-6 py-3 bg-red-500 hover:bg-red-600 rounded-lg font-medium transition-colors"
|
||||
>
|
||||
触发同步错误
|
||||
</button>
|
||||
<button
|
||||
onClick={triggerAsyncError}
|
||||
className="px-6 py-3 bg-red-500 hover:bg-red-600 rounded-lg font-medium transition-colors"
|
||||
>
|
||||
触发异步错误
|
||||
</button>
|
||||
<button
|
||||
onClick={clearErrors}
|
||||
className="px-6 py-3 bg-gray-600 hover:bg-gray-700 rounded-lg font-medium transition-colors"
|
||||
>
|
||||
清除错误
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/10 backdrop-blur-md rounded-xl p-6 mb-6">
|
||||
<h2 className="text-2xl font-semibold mb-4">📊 错误记录</h2>
|
||||
{errors.length === 0 ? (
|
||||
<p className="text-gray-300 italic">暂无错误</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{errors.map((error, index) => (
|
||||
<div key={index} className="bg-red-500/20 border-l-4 border-red-500 p-3 rounded font-mono text-sm">
|
||||
{error}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-white/10 backdrop-blur-md rounded-xl p-6">
|
||||
<h2 className="text-2xl font-semibold mb-4">🔧 DevMonitor 检查</h2>
|
||||
<p className="mb-3">在浏览器控制台中检查：</p>
|
||||
<ul className="space-y-1 text-left max-w-md mx-auto">
|
||||
<li><code className="bg-black/20 px-2 py-1 rounded">DevMonitor.showPanel()</code> - 显示监控面板</li>
|
||||
<li><code className="bg-black/20 px-2 py-1 rounded">DevMonitor.getStats()</code> - 获取统计信息</li>
|
||||
<li><code className="bg-black/20 px-2 py-1 rounded">window.__DEV_INJECT__</code> - 检查注入状态</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {}
|
||||
|
||||
module.exports = nextConfig
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "next-app-test",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"next": "14.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^18",
|
||||
"@types/react-dom": "^18",
|
||||
"autoprefixer": "^10.0.1",
|
||||
"postcss": "^8",
|
||||
"tailwindcss": "^3.3.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user