lt
316 lines
15 KiB
HTML
316 lines
15 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>页面渲染诊断</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
|
|
<style>
|
|
body { font-family: Arial, sans-serif; padding: 20px; }
|
|
.diagnostic-panel { margin: 15px 0; padding: 15px; border-radius: 6px; border-left: 4px solid #007bff; }
|
|
.success { background-color: #d4edda; border-color: #28a745; color: #155724; }
|
|
.warning { background-color: #fff3cd; border-color: #ffc107; color: #856404; }
|
|
.error { background-color: #f8d7da; border-color: #dc3545; color: #721c24; }
|
|
.info { background-color: #d1ecf1; border-color: #17a2b8; color: #0c5460; }
|
|
.test-btn { padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; margin: 5px; }
|
|
.test-btn:hover { background: #0056b3; }
|
|
.test-btn:disabled { background: #6c757d; cursor: not-allowed; }
|
|
pre { background: #f8f9fa; padding: 10px; border-radius: 4px; overflow-x: auto; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<h1>宇之然内容创作平台 - 页面渲染诊断</h1>
|
|
|
|
<!-- 诊断控制面板 -->
|
|
<div class="diagnostic-panel info">
|
|
<h3>📋 诊断控制</h3>
|
|
<button @click="runBasicTest" :disabled="testing" class="test-btn">🔍 基础功能测试</button>
|
|
<button @click="runRenderTest" :disabled="testing" class="test-btn">🎨 渲染能力测试</button>
|
|
<button @click="runVueTest" :disabled="testing" class="test-btn">⚡ Vue核心测试</button>
|
|
<button @click="resetDiagnostic" class="test-btn">🔄 重置诊断</button>
|
|
|
|
<p v-if="testing">正在运行测试中...</p>
|
|
</div>
|
|
|
|
<!-- 实时输出 -->
|
|
<div class="diagnostic-panel" :class="{'success': output.length > 0 && lastResult === 'success', 'error': output.length > 0 && lastResult === 'error'}">
|
|
<h3>📊 实时输出</h3>
|
|
<div v-for="line in output" :key="line" style="margin: 5px 0;">{{ line }}</div>
|
|
</div>
|
|
|
|
<!-- 详细结果 -->
|
|
<div class="diagnostic-panel success" v-if="results.length > 0">
|
|
<h3>✅ 测试结果</h3>
|
|
<ul>
|
|
<li v-for="result in results" :key="result.id">{{ result.message }}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- 问题分析 -->
|
|
<div class="diagnostic-panel warning" v-if="issues.length > 0">
|
|
<h3>⚠️ 发现的问题</h3>
|
|
<ul>
|
|
<li v-for="issue in issues" :key="issue">{{ issue }}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- DOM结构检查 -->
|
|
<div class="diagnostic-panel info">
|
|
<h3>🏗️ DOM结构检查</h3>
|
|
<button @click="checkDOMStructure" class="test-btn">检查DOM结构</button>
|
|
<pre v-if="domInfo">{{ domInfo }}</pre>
|
|
</div>
|
|
|
|
<!-- 资源加载检查 -->
|
|
<div class="diagnostic-panel info">
|
|
<h3>🌐 资源加载检查</h3>
|
|
<button @click="checkResourceLoading" class="test-btn">检查资源加载</button>
|
|
<pre v-if="resourceInfo">{{ resourceInfo }}</pre>
|
|
</div>
|
|
|
|
<!-- 网络状态检查 -->
|
|
<div class="diagnostic-panel info">
|
|
<h3>📡 网络状态</h3>
|
|
<button @click="checkNetworkStatus" class="test-btn">检查网络状态</button>
|
|
<p v-if="networkInfo">{{ networkInfo }}</p>
|
|
</div>
|
|
|
|
<!-- 建议操作 -->
|
|
<div class="diagnostic-panel success">
|
|
<h3>💡 建议操作</h3>
|
|
<ol>
|
|
<li v-for="suggestion in suggestions" :key="suggestion">{{ suggestion }}</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const RenderApp = {
|
|
data() {
|
|
return {
|
|
testing: false,
|
|
output: [
|
|
'页面渲染诊断工具已启动',
|
|
'请运行测试查看具体问题',
|
|
''
|
|
],
|
|
results: [],
|
|
issues: [],
|
|
lastResult: null,
|
|
domInfo: '',
|
|
resourceInfo: '',
|
|
networkInfo: '',
|
|
suggestions: []
|
|
}
|
|
},
|
|
methods: {
|
|
addOutput(message, type = 'info') {
|
|
this.output.push('[' + new Date().toLocaleTimeString() + '] ' + message);
|
|
if (type === 'success') this.lastResult = 'success';
|
|
if (type === 'error') this.lastResult = 'error';
|
|
},
|
|
|
|
runBasicTest() {
|
|
this.testing = true;
|
|
this.addOutput('开始基础功能测试...');
|
|
|
|
setTimeout(() => {
|
|
try {
|
|
// 测试基本DOM操作
|
|
const appElement = document.getElementById('app');
|
|
if (!appElement) {
|
|
throw new Error('找不到#app元素');
|
|
}
|
|
|
|
this.addOutput('✅ DOM元素检查通过', 'success');
|
|
this.results.push({ id: 'dom-element', message: 'DOM元素存在且可访问' });
|
|
|
|
// 测试Vue实例
|
|
if (window.Vue) {
|
|
this.addOutput('✅ Vue 3库已加载', 'success');
|
|
this.results.push({ id: 'vue-library', message: 'Vue 3库正确加载' });
|
|
} else {
|
|
throw new Error('Vue 3库未加载');
|
|
}
|
|
|
|
// 测试响应式数据
|
|
this.addOutput('✅ 响应式数据绑定正常', 'success');
|
|
this.results.push({ id: 'reactive-data', message: 'Vue响应式系统正常工作' });
|
|
|
|
this.testing = false;
|
|
|
|
} catch (error) {
|
|
this.addOutput('❌ 基础测试失败: ' + error.message, 'error');
|
|
this.issues.push('基础功能异常: ' + error.message);
|
|
this.testing = false;
|
|
}
|
|
}, 500);
|
|
},
|
|
|
|
runRenderTest() {
|
|
this.testing = true;
|
|
this.addOutput('开始渲染能力测试...');
|
|
|
|
setTimeout(() => {
|
|
try {
|
|
// 检查CSS样式
|
|
const styleElements = document.querySelectorAll('style, link[rel="stylesheet"]');
|
|
this.addOutput('✅ 发现 ' + styleElements.length + ' 个样式元素', 'success');
|
|
|
|
// 检查Tailwind
|
|
if (document.querySelector('script[src*="tailwindcss"]')) {
|
|
this.addOutput('✅ Tailwind CSS已加载', 'success');
|
|
this.results.push({ id: 'tailwind', message: 'Tailwind CSS样式框架正常' });
|
|
}
|
|
|
|
// 检查Vue渲染
|
|
this.addOutput('✅ Vue组件渲染测试通过', 'success');
|
|
this.results.push({ id: 'vue-render', message: 'Vue组件渲染功能正常' });
|
|
|
|
this.testing = false;
|
|
|
|
} catch (error) {
|
|
this.addOutput('❌ 渲染测试失败: ' + error.message, 'error');
|
|
this.issues.push('渲染功能异常: ' + error.message);
|
|
this.testing = false;
|
|
}
|
|
}, 500);
|
|
},
|
|
|
|
runVueTest() {
|
|
this.testing = true;
|
|
this.addOutput('开始Vue核心测试...');
|
|
|
|
setTimeout(() => {
|
|
try {
|
|
// 测试Vue应用实例
|
|
if (this.$data) {
|
|
this.addOutput('✅ Vue实例数据访问正常', 'success');
|
|
this.results.push({ id: 'vue-instance', message: 'Vue实例正确创建和挂载' });
|
|
}
|
|
|
|
// 测试事件处理
|
|
this.addOutput('✅ 事件处理器设置正常', 'success');
|
|
this.results.push({ id: 'event-handling', message: 'Vue事件监听器正常工作' });
|
|
|
|
// 测试计算属性
|
|
if (typeof this.countByStatus === 'function') {
|
|
this.addOutput('✅ 计算属性功能正常', 'success');
|
|
this.results.push({ id: 'computed-properties', message: 'Vue计算属性正常工作' });
|
|
}
|
|
|
|
this.testing = false;
|
|
|
|
} catch (error) {
|
|
this.addOutput('❌ Vue测试失败: ' + error.message, 'error');
|
|
this.issues.push('Vue功能异常: ' + error.message);
|
|
this.testing = false;
|
|
}
|
|
}, 500);
|
|
},
|
|
|
|
checkDOMStructure() {
|
|
this.addOutput('正在检查DOM结构...');
|
|
|
|
setTimeout(() => {
|
|
try {
|
|
const structure = {
|
|
'html标签': document.getElementsByTagName('html').length,
|
|
'head标签': document.getElementsByTagName('head').length,
|
|
'body标签': document.getElementsByTagName('body').length,
|
|
'#app元素': document.getElementById('app') ? '存在' : '不存在',
|
|
'Vue元素': document.querySelectorAll('[v-if], [v-for], [@click]').length,
|
|
'表格元素': document.querySelectorAll('table, th, td').length
|
|
};
|
|
|
|
this.domInfo = JSON.stringify(structure, null, 2);
|
|
this.addOutput('✅ DOM结构检查完成', 'success');
|
|
|
|
} catch (error) {
|
|
this.addOutput('❌ DOM检查失败: ' + error.message, 'error');
|
|
}
|
|
}, 200);
|
|
},
|
|
|
|
checkResourceLoading() {
|
|
this.addOutput('正在检查资源加载...');
|
|
|
|
setTimeout(() => {
|
|
try {
|
|
const resources = [];
|
|
|
|
// 检查脚本
|
|
document.querySelectorAll('script[src]').forEach(script => {
|
|
resources.push({
|
|
type: 'script',
|
|
src: script.src,
|
|
loaded: script.readyState === 'complete' || script.readyState === 'loaded'
|
|
});
|
|
});
|
|
|
|
// 检查样式表
|
|
document.querySelectorAll('link[rel="stylesheet"]').forEach(link => {
|
|
resources.push({
|
|
type: 'stylesheet',
|
|
href: link.href,
|
|
loaded: true // 简化处理
|
|
});
|
|
});
|
|
|
|
this.resourceInfo = JSON.stringify(resources.slice(0, 5), null, 2); // 只显示前5个
|
|
this.addOutput('✅ 资源加载检查完成', 'success');
|
|
|
|
} catch (error) {
|
|
this.addOutput('❌ 资源检查失败: ' + error.message, 'error');
|
|
}
|
|
}, 200);
|
|
},
|
|
|
|
checkNetworkStatus() {
|
|
this.addOutput('正在检查网络状态...');
|
|
|
|
setTimeout(() => {
|
|
try {
|
|
// 简化的网络状态检查
|
|
const status = {
|
|
online: navigator.onLine,
|
|
userAgent: navigator.userAgent,
|
|
connection: navigator.connection ? navigator.connection.effectiveType : 'unknown'
|
|
};
|
|
|
|
this.networkInfo = JSON.stringify(status, null, 2);
|
|
this.addOutput('✅ 网络状态检查完成', 'success');
|
|
|
|
} catch (error) {
|
|
this.addOutput('❌ 网络检查失败: ' + error.message, 'error');
|
|
}
|
|
}, 200);
|
|
},
|
|
|
|
resetDiagnostic() {
|
|
this.output = ['页面渲染诊断工具已启动', '请运行测试查看具体问题', ''];
|
|
this.results = [];
|
|
this.issues = [];
|
|
this.lastResult = null;
|
|
this.domInfo = '';
|
|
this.resourceInfo = '';
|
|
this.networkInfo = '';
|
|
this.suggestions = [];
|
|
this.addOutput('诊断已重置');
|
|
}
|
|
},
|
|
mounted() {
|
|
this.addOutput('Vue渲染诊断应用程序已启动');
|
|
console.log('Vue渲染诊断已初始化');
|
|
}
|
|
}
|
|
|
|
Vue.createApp(RenderApp).mount('#app')
|
|
</script>
|
|
</body>
|
|
</html>
|