102 lines
2.9 KiB
Vue
102 lines
2.9 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-gray-100">
|
|
<div class="p-8">
|
|
<h1 class="text-3xl font-bold text-gray-900 mb-6">系统诊断页面</h1>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<!-- 布局测试 -->
|
|
<div class="bg-white p-6 rounded-lg shadow">
|
|
<h2 class="text-xl font-semibold mb-4">布局测试</h2>
|
|
<div class="space-y-2 text-sm">
|
|
<p><strong>当前页面:</strong> {{ $route.path }}</p>
|
|
<p><strong>Tailwind样式测试:</strong>
|
|
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded">蓝色徽章</span>
|
|
</p>
|
|
<p><strong>布局状态:</strong> {{ layoutStatus }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 组件测试 -->
|
|
<div class="bg-white p-6 rounded-lg shadow">
|
|
<h2 class="text-xl font-semibold mb-4">组件测试</h2>
|
|
<div class="space-y-2 text-sm">
|
|
<p><strong>Sidebar可见性:</strong> {{ sidebarVisible ? '可见' : '不可见' }}</p>
|
|
<p><strong>用户认证:</strong> {{ isAuthenticated ? '已认证' : '未认证' }}</p>
|
|
<p><strong>用户信息:</strong> {{ userInfo.name }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 手动Sidebar测试 -->
|
|
<div class="bg-white p-6 rounded-lg shadow lg:col-span-2">
|
|
<h2 class="text-xl font-semibold mb-4">手动Sidebar测试</h2>
|
|
<p class="text-sm text-gray-600 mb-4">以下是手动嵌入的Sidebar组件:</p>
|
|
<div class="border-2 border-dashed border-gray-300 p-4">
|
|
<Sidebar />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// 不使用布局，完全手动控制
|
|
definePageMeta({
|
|
layout: false
|
|
})
|
|
|
|
// 页面标题
|
|
useHead({
|
|
title: '系统诊断 - 翻译管理系统'
|
|
})
|
|
|
|
// 响应式数据
|
|
const layoutStatus = ref('手动控制')
|
|
const sidebarVisible = ref(false)
|
|
const isAuthenticated = ref(false)
|
|
const userInfo = ref({
|
|
name: '未知用户',
|
|
role: '未知'
|
|
})
|
|
|
|
// 检查Sidebar是否可见
|
|
const checkSidebarVisibility = () => {
|
|
if (process.client) {
|
|
const sidebar = document.querySelector('.w-64.bg-gray-800')
|
|
sidebarVisible.value = !!sidebar
|
|
}
|
|
}
|
|
|
|
// 加载用户信息
|
|
const loadUserInfo = () => {
|
|
if (process.client) {
|
|
const authStatus = localStorage.getItem('isAuthenticated')
|
|
const adminUser = localStorage.getItem('adminUser')
|
|
|
|
isAuthenticated.value = authStatus === 'true'
|
|
|
|
if (adminUser) {
|
|
try {
|
|
const user = JSON.parse(adminUser)
|
|
userInfo.value = {
|
|
name: user.name || '系统管理员',
|
|
role: user.role || 'admin'
|
|
}
|
|
} catch (error) {
|
|
console.error('解析用户信息失败:', error)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 页面挂载时检查
|
|
onMounted(() => {
|
|
loadUserInfo()
|
|
checkSidebarVisibility()
|
|
|
|
// 延迟检查，确保组件完全渲染
|
|
setTimeout(() => {
|
|
checkSidebarVisibility()
|
|
}, 1000)
|
|
})
|
|
</script> |