393 lines
13 KiB
HTML
393 lines
13 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>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
background: white;
|
||
border-radius: 20px;
|
||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||
max-width: 600px;
|
||
width: 100%;
|
||
padding: 40px;
|
||
animation: slideIn 0.5s ease-out;
|
||
}
|
||
|
||
@keyframes slideIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
h1 {
|
||
color: #22c55e;
|
||
font-size: 32px;
|
||
margin-bottom: 10px;
|
||
text-align: center;
|
||
}
|
||
|
||
.subtitle {
|
||
text-align: center;
|
||
color: #666;
|
||
margin-bottom: 40px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.step {
|
||
background: #f9fafb;
|
||
border-left: 4px solid #22c55e;
|
||
padding: 20px;
|
||
margin: 20px 0;
|
||
border-radius: 8px;
|
||
position: relative;
|
||
}
|
||
|
||
.step-number {
|
||
position: absolute;
|
||
left: -12px;
|
||
top: 20px;
|
||
background: #22c55e;
|
||
color: white;
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.step-content {
|
||
margin-left: 30px;
|
||
}
|
||
|
||
.step h3 {
|
||
color: #1f2937;
|
||
font-size: 18px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.step p {
|
||
color: #4b5563;
|
||
line-height: 1.6;
|
||
margin: 8px 0;
|
||
}
|
||
|
||
.keyboard-key {
|
||
display: inline-block;
|
||
background: #e5e7eb;
|
||
border: 2px solid #d1d5db;
|
||
border-radius: 5px;
|
||
padding: 4px 10px;
|
||
font-family: 'Courier New', monospace;
|
||
font-weight: bold;
|
||
color: #1f2937;
|
||
margin: 0 2px;
|
||
box-shadow: 0 2px 0 #9ca3af;
|
||
}
|
||
|
||
.btn {
|
||
background: #22c55e;
|
||
color: white;
|
||
border: none;
|
||
padding: 16px 32px;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
border-radius: 12px;
|
||
cursor: pointer;
|
||
width: 100%;
|
||
margin: 20px 0;
|
||
transition: all 0.3s;
|
||
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
|
||
}
|
||
|
||
.btn:hover {
|
||
background: #16a34a;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
|
||
}
|
||
|
||
.btn:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.warning {
|
||
background: #fef3c7;
|
||
border-left: 4px solid #f59e0b;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.warning-title {
|
||
color: #92400e;
|
||
font-weight: bold;
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.warning p {
|
||
color: #78350f;
|
||
margin: 5px 0;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.success {
|
||
background: #d1fae5;
|
||
border-left: 4px solid #10b981;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
margin: 20px 0;
|
||
display: none;
|
||
}
|
||
|
||
.success-title {
|
||
color: #065f46;
|
||
font-weight: bold;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.success p {
|
||
color: #047857;
|
||
margin: 5px 0;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.spinner {
|
||
border: 3px solid #f3f4f6;
|
||
border-top: 3px solid #22c55e;
|
||
border-radius: 50%;
|
||
width: 20px;
|
||
height: 20px;
|
||
animation: spin 1s linear infinite;
|
||
display: inline-block;
|
||
margin-right: 10px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.browser-icons {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin: 30px 0;
|
||
padding: 20px;
|
||
background: #f9fafb;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.browser-icon {
|
||
text-align: center;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.browser-icon:hover {
|
||
background: white;
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.browser-icon img {
|
||
width: 48px;
|
||
height: 48px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.browser-icon span {
|
||
display: block;
|
||
font-size: 12px;
|
||
color: #6b7280;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>🔧 快速修复</h1>
|
||
<p class="subtitle">部门管理打不开？三步解决！</p>
|
||
|
||
<div class="warning">
|
||
<div class="warning-title">
|
||
<span>⚠️</span>
|
||
<span>错误提示</span>
|
||
</div>
|
||
<p><strong>Failed to load resource: net::ERR_CONNECTION_REFUSED</strong></p>
|
||
<p>这是浏览器缓存问题，按照下面步骤操作即可解决</p>
|
||
</div>
|
||
|
||
<!-- 方法一：一键清除 -->
|
||
<div class="step">
|
||
<div class="step-number">1</div>
|
||
<div class="step-content">
|
||
<h3>方法一：一键清除（最快）</h3>
|
||
<p>点击下面的按钮，自动清除所有缓存：</p>
|
||
<button class="btn" onclick="quickClear()">
|
||
🗑️ 一键清除缓存
|
||
</button>
|
||
<div id="clearStatus"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 方法二：键盘快捷键 -->
|
||
<div class="step">
|
||
<div class="step-number">2</div>
|
||
<div class="step-content">
|
||
<h3>方法二：键盘快捷键（推荐）</h3>
|
||
<p><strong>Windows/Linux:</strong></p>
|
||
<p>按住 <span class="keyboard-key">Ctrl</span> + <span class="keyboard-key">Shift</span> + <span class="keyboard-key">Delete</span></p>
|
||
<p style="margin-top: 15px;"><strong>Mac:</strong></p>
|
||
<p>按住 <span class="keyboard-key">Cmd</span> + <span class="keyboard-key">Shift</span> + <span class="keyboard-key">Delete</span></p>
|
||
<p style="margin-top: 15px;">然后：</p>
|
||
<p>✅ 选择"全部时间"</p>
|
||
<p>✅ 勾选"缓存的图片和文件"</p>
|
||
<p>✅ 点击"清除数据"</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 方法三：硬刷新 -->
|
||
<div class="step">
|
||
<div class="step-number">3</div>
|
||
<div class="step-content">
|
||
<h3>方法三：强制刷新（最简单）</h3>
|
||
<p><strong>Windows/Linux:</strong></p>
|
||
<p>按 <span class="keyboard-key">Ctrl</span> + <span class="keyboard-key">F5</span></p>
|
||
<p style="margin-top: 10px;">或</p>
|
||
<p>按 <span class="keyboard-key">Ctrl</span> + <span class="keyboard-key">Shift</span> + <span class="keyboard-key">R</span></p>
|
||
<p style="margin-top: 15px;"><strong>Mac:</strong></p>
|
||
<p>按 <span class="keyboard-key">Cmd</span> + <span class="keyboard-key">Shift</span> + <span class="keyboard-key">R</span></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="success" id="successMessage">
|
||
<div class="success-title">✅ 清除成功！</div>
|
||
<p>缓存已清除，请按照以下步骤操作：</p>
|
||
<p>1. 刷新页面（F5）</p>
|
||
<p>2. 访问：中心配置管理系统 → 用户管理 → 部门管理</p>
|
||
<p>3. 如果还是不行，请完全关闭浏览器后重新打开</p>
|
||
</div>
|
||
|
||
<div class="browser-icons">
|
||
<div class="browser-icon">
|
||
<div style="font-size: 32px;">🌐</div>
|
||
<span>Chrome</span>
|
||
</div>
|
||
<div class="browser-icon">
|
||
<div style="font-size: 32px;">🦊</div>
|
||
<span>Firefox</span>
|
||
</div>
|
||
<div class="browser-icon">
|
||
<div style="font-size: 32px;">🧭</div>
|
||
<span>Safari</span>
|
||
</div>
|
||
<div class="browser-icon">
|
||
<div style="font-size: 32px;">🔷</div>
|
||
<span>Edge</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function quickClear() {
|
||
const statusDiv = document.getElementById('clearStatus');
|
||
const successDiv = document.getElementById('successMessage');
|
||
const btn = event.target;
|
||
|
||
// 显示加载状态
|
||
btn.disabled = true;
|
||
btn.innerHTML = '<span class="spinner"></span>正在清除缓存...';
|
||
statusDiv.style.background = '#dbeafe';
|
||
statusDiv.style.padding = '15px';
|
||
statusDiv.style.borderRadius = '8px';
|
||
statusDiv.style.marginTop = '15px';
|
||
statusDiv.innerHTML = '<p style="color: #1e40af;">⏳ 正在清除缓存，请稍候...</p>';
|
||
|
||
try {
|
||
// 清除 localStorage
|
||
const localStorageKeys = Object.keys(localStorage);
|
||
localStorage.clear();
|
||
|
||
// 清除 sessionStorage
|
||
sessionStorage.clear();
|
||
|
||
// 清除 Cache Storage (如果支持)
|
||
if ('caches' in window) {
|
||
caches.keys().then(names => {
|
||
names.forEach(name => caches.delete(name));
|
||
});
|
||
}
|
||
|
||
// 显示成功消息
|
||
setTimeout(() => {
|
||
btn.innerHTML = '✅ 清除完成！';
|
||
btn.style.background = '#10b981';
|
||
statusDiv.style.display = 'none';
|
||
successDiv.style.display = 'block';
|
||
|
||
// 3秒后自动刷新
|
||
setTimeout(() => {
|
||
if (confirm('缓存已清除！是否立即刷新页面？')) {
|
||
location.reload(true);
|
||
}
|
||
}, 2000);
|
||
}, 1500);
|
||
|
||
} catch (error) {
|
||
statusDiv.style.background = '#fee2e2';
|
||
statusDiv.innerHTML = '<p style="color: #dc2626;">❌ 清除失败：' + error.message + '</p><p style="color: #dc2626; margin-top: 10px;">请尝试手动清除（方法二或方法三）</p>';
|
||
btn.disabled = false;
|
||
btn.innerHTML = '🔄 重试';
|
||
}
|
||
}
|
||
|
||
// 页面加载时自动检测
|
||
window.addEventListener('load', () => {
|
||
console.log('🔍 开始检测缓存问题...');
|
||
|
||
// 检查是否有部门管理相关的localStorage
|
||
const hasDeptData = localStorage.getItem('smart_agriculture_departments');
|
||
|
||
if (!hasDeptData) {
|
||
console.log('⚠️ 未找到部门数据，可能是首次访问或缓存问题');
|
||
} else {
|
||
console.log('✅ 找到部门数据');
|
||
try {
|
||
const data = JSON.parse(hasDeptData);
|
||
console.log('📊 部门数量:', data.length);
|
||
} catch (e) {
|
||
console.error('❌ 部门数据解析失败:', e);
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|