296 lines
10 KiB
HTML
296 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>强制清除缓存 - 部门管理修复</title>
|
||
<meta charset="UTF-8">
|
||
<style>
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
max-width: 800px;
|
||
margin: 50px auto;
|
||
padding: 20px;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
}
|
||
.container {
|
||
background: white;
|
||
padding: 40px;
|
||
border-radius: 16px;
|
||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||
}
|
||
h1 {
|
||
color: #22c55e;
|
||
margin-bottom: 10px;
|
||
font-size: 28px;
|
||
}
|
||
.subtitle {
|
||
color: #666;
|
||
margin-bottom: 30px;
|
||
font-size: 14px;
|
||
}
|
||
.error-box {
|
||
background: #fee;
|
||
border-left: 4px solid #ef4444;
|
||
padding: 15px;
|
||
margin: 20px 0;
|
||
border-radius: 4px;
|
||
}
|
||
.error-box h3 {
|
||
color: #dc2626;
|
||
margin: 0 0 10px 0;
|
||
font-size: 16px;
|
||
}
|
||
.error-box p {
|
||
margin: 5px 0;
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
.success-box {
|
||
background: #d1fae5;
|
||
border-left: 4px solid #10b981;
|
||
padding: 15px;
|
||
margin: 20px 0;
|
||
border-radius: 4px;
|
||
}
|
||
.success-box h3 {
|
||
color: #059669;
|
||
margin: 0 0 10px 0;
|
||
font-size: 16px;
|
||
}
|
||
.btn {
|
||
background: #22c55e;
|
||
color: white;
|
||
border: none;
|
||
padding: 14px 28px;
|
||
font-size: 16px;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
width: 100%;
|
||
margin: 10px 0;
|
||
transition: all 0.3s;
|
||
}
|
||
.btn:hover {
|
||
background: #16a34a;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
|
||
}
|
||
.btn-secondary {
|
||
background: #3b82f6;
|
||
}
|
||
.btn-secondary:hover {
|
||
background: #2563eb;
|
||
}
|
||
.steps {
|
||
background: #f9fafb;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin: 20px 0;
|
||
}
|
||
.steps h3 {
|
||
margin: 0 0 15px 0;
|
||
color: #374151;
|
||
font-size: 16px;
|
||
}
|
||
.steps ol {
|
||
margin: 0;
|
||
padding-left: 20px;
|
||
}
|
||
.steps li {
|
||
margin: 10px 0;
|
||
color: #4b5563;
|
||
line-height: 1.6;
|
||
}
|
||
.steps code {
|
||
background: #e5e7eb;
|
||
padding: 2px 6px;
|
||
border-radius: 3px;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 13px;
|
||
color: #dc2626;
|
||
}
|
||
.info {
|
||
background: #dbeafe;
|
||
border-left: 4px solid #3b82f6;
|
||
padding: 15px;
|
||
margin: 20px 0;
|
||
border-radius: 4px;
|
||
}
|
||
.info p {
|
||
margin: 5px 0;
|
||
color: #1e40af;
|
||
font-size: 14px;
|
||
}
|
||
#status {
|
||
margin-top: 20px;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
display: none;
|
||
font-weight: 600;
|
||
}
|
||
.loading {
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
border: 3px solid #f3f3f3;
|
||
border-top: 3px solid #22c55e;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
margin-right: 10px;
|
||
vertical-align: middle;
|
||
}
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
.highlight {
|
||
background: #fef3c7;
|
||
padding: 2px 4px;
|
||
border-radius: 3px;
|
||
font-weight: 600;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>🔧 部门管理功能修复</h1>
|
||
<p class="subtitle">解决 ERR_CONNECTION_REFUSED 错误</p>
|
||
|
||
<div class="error-box">
|
||
<h3>⚠️ 当前错误</h3>
|
||
<p><strong>错误信息：</strong>Failed to load resource: net::ERR_CONNECTION_REFUSED</p>
|
||
<p><strong>原因分析：</strong>浏览器缓存了旧版本的代码，导致新组件无法正常加载</p>
|
||
<p><strong>影响范围：</strong>无法访问部门管理页面</p>
|
||
</div>
|
||
|
||
<div class="info">
|
||
<p><strong>📋 问题定位：</strong></p>
|
||
<p>• 新增了部门管理组件 (DepartmentManagement.tsx)</p>
|
||
<p>• 修改了菜单配置，添加了部门管理入口</p>
|
||
<p>• 浏览器可能缓存了旧的路由配置</p>
|
||
</div>
|
||
|
||
<div class="steps">
|
||
<h3>🎯 解决方案（三步修复）</h3>
|
||
<ol>
|
||
<li><strong>第一步：</strong>点击下方<span class="highlight">清除所有缓存</span>按钮</li>
|
||
<li><strong>第二步：</strong>等待缓存清除完成的提示</li>
|
||
<li><strong>第三步：</strong>点击<span class="highlight">重新加载页面</span>按钮</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<button class="btn" onclick="clearAllCache()">
|
||
🗑️ 清除所有缓存
|
||
</button>
|
||
|
||
<button class="btn btn-secondary" onclick="location.reload(true)" style="display:none;" id="reloadBtn">
|
||
🔄 重新加载页面
|
||
</button>
|
||
|
||
<div id="status"></div>
|
||
|
||
<div class="success-box" style="margin-top: 30px;">
|
||
<h3>✅ 修复完成后的效果</h3>
|
||
<p>• 可以正常访问：<code>中心配置管理系统 → 用户管理 → 部门管理</code></p>
|
||
<p>• 菜单顺序：部门管理 → 员工管理 → 角色管理 → 菜单管理 → 权限配置管理</p>
|
||
<p>• 部门管理功能包括：树形结构、拖动排序、增删改查</p>
|
||
<p>• 员工管理中可以选择部门管理维护的部门数据</p>
|
||
</div>
|
||
|
||
<div class="steps" style="margin-top: 30px;">
|
||
<h3>🔍 手动清除缓存方法（备选方案）</h3>
|
||
<ol>
|
||
<li>按 <code>Ctrl + Shift + Delete</code> (Windows) 或 <code>Cmd + Shift + Delete</code> (Mac)</li>
|
||
<li>选择<strong>时间范围：全部时间</strong></li>
|
||
<li>勾选：
|
||
<ul style="margin: 5px 0;">
|
||
<li>✅ 缓存的图片和文件</li>
|
||
<li>✅ Cookie 和其他网站数据</li>
|
||
</ul>
|
||
</li>
|
||
<li>点击<strong>清除数据</strong>按钮</li>
|
||
<li>完全关闭浏览器后重新打开</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="info" style="margin-top: 30px;">
|
||
<p><strong>💡 温馨提示：</strong></p>
|
||
<p>• 清除缓存后，您需要重新登录系统</p>
|
||
<p>• 如果问题仍然存在，请尝试使用无痕/隐私模式打开应用</p>
|
||
<p>• 确保您的浏览器版本是最新的（Chrome 90+, Firefox 88+, Safari 14+）</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function clearAllCache() {
|
||
const statusDiv = document.getElementById('status');
|
||
const reloadBtn = document.getElementById('reloadBtn');
|
||
|
||
statusDiv.style.display = 'block';
|
||
statusDiv.style.background = '#dbeafe';
|
||
statusDiv.style.color = '#1e40af';
|
||
statusDiv.innerHTML = '<span class="loading"></span>正在清除缓存...';
|
||
|
||
try {
|
||
// 清除所有 localStorage
|
||
const keysToRemove = [];
|
||
for (let i = 0; i < localStorage.length; i++) {
|
||
const key = localStorage.key(i);
|
||
if (key) {
|
||
keysToRemove.push(key);
|
||
}
|
||
}
|
||
|
||
console.log('清除的 localStorage 项：', keysToRemove);
|
||
localStorage.clear();
|
||
|
||
// 清除所有 sessionStorage
|
||
sessionStorage.clear();
|
||
|
||
// 如果支持，清除 Cache Storage
|
||
if ('caches' in window) {
|
||
caches.keys().then(function(names) {
|
||
for (let name of names) {
|
||
caches.delete(name);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 显示成功消息
|
||
setTimeout(() => {
|
||
statusDiv.style.background = '#d1fae5';
|
||
statusDiv.style.color = '#059669';
|
||
statusDiv.innerHTML = `
|
||
✅ 缓存清除成功！<br>
|
||
<small style="display:block; margin-top:8px;">
|
||
• 已清除 ${keysToRemove.length} 个 localStorage 项<br>
|
||
• 已清除 sessionStorage<br>
|
||
• 已清除 Cache Storage<br>
|
||
<strong style="display:block; margin-top:8px;">现在请点击下方按钮重新加载页面</strong>
|
||
</small>
|
||
`;
|
||
reloadBtn.style.display = 'block';
|
||
}, 1000);
|
||
|
||
} catch (error) {
|
||
statusDiv.style.background = '#fee2e2';
|
||
statusDiv.style.color = '#dc2626';
|
||
statusDiv.innerHTML = '❌ 清除缓存时出错: ' + error.message + '<br><small>请尝试手动清除缓存</small>';
|
||
}
|
||
}
|
||
|
||
// 自动检测是否需要清除缓存
|
||
window.addEventListener('load', function() {
|
||
const hasDeptError = window.location.href.includes('/config/user/department');
|
||
if (hasDeptError) {
|
||
const statusDiv = document.getElementById('status');
|
||
statusDiv.style.display = 'block';
|
||
statusDiv.style.background = '#fef3c7';
|
||
statusDiv.style.color = '#92400e';
|
||
statusDiv.innerHTML = '⚠️ 检测到您可能遇到了部门管理访问问题，请点击上方按钮清除缓存';
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|