414 lines
15 KiB
HTML
414 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>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 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%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.header {
|
||
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
|
||
color: white;
|
||
padding: 40px;
|
||
text-align: center;
|
||
}
|
||
|
||
.header h1 {
|
||
font-size: 2em;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.header p {
|
||
opacity: 0.9;
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
.content {
|
||
padding: 40px;
|
||
}
|
||
|
||
.step {
|
||
background: #f8f9fa;
|
||
border-left: 5px solid #22c55e;
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.step h3 {
|
||
color: #16a34a;
|
||
margin-bottom: 10px;
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
.big-button {
|
||
display: block;
|
||
width: 100%;
|
||
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
|
||
color: white;
|
||
padding: 20px;
|
||
border: none;
|
||
border-radius: 12px;
|
||
font-size: 1.3em;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
margin: 20px 0;
|
||
box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
|
||
}
|
||
|
||
.big-button:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
|
||
}
|
||
|
||
.big-button:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.warning {
|
||
background: #fef3c7;
|
||
border-left: 5px solid #f59e0b;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.success {
|
||
background: #d1fae5;
|
||
border-left: 5px solid #10b981;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.info-box {
|
||
background: #e0f2fe;
|
||
border: 2px solid #3b82f6;
|
||
padding: 20px;
|
||
border-radius: 12px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.info-box h4 {
|
||
color: #1e40af;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.code {
|
||
background: #1e293b;
|
||
color: #e2e8f0;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 0.9em;
|
||
overflow-x: auto;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.status-indicator {
|
||
display: inline-block;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.status-indicator.green {
|
||
background: #22c55e;
|
||
box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
|
||
}
|
||
|
||
.status-indicator.red {
|
||
background: #ef4444;
|
||
box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
|
||
}
|
||
|
||
.preview-box {
|
||
border: 2px dashed #d1d5db;
|
||
padding: 20px;
|
||
border-radius: 12px;
|
||
background: #f9fafb;
|
||
margin: 15px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.preview-box img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
ul li {
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
}
|
||
|
||
ul li:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.check {
|
||
color: #22c55e;
|
||
margin-right: 10px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<h1>🔄 角色切换功能</h1>
|
||
<p>一键启用多角色切换</p>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<div class="info-box">
|
||
<h4>📍 当前状态</h4>
|
||
<p id="currentStatus">
|
||
<span class="status-indicator red"></span>
|
||
正在检测角色数据...
|
||
</p>
|
||
</div>
|
||
|
||
<div class="success" style="background: #fef3c7; border-left-color: #f59e0b;">
|
||
<h4 style="color: #d97706;">⚡ 重要提示</h4>
|
||
<p><strong>现在已经自动初始化了！</strong></p>
|
||
<p style="margin-top: 10px;">系统已经在App.tsx中添加了自动初始化代码。<br>您只需要：</p>
|
||
<ol style="margin: 10px 0 0 20px;">
|
||
<li><strong>刷新页面</strong>（按F5）</li>
|
||
<li><strong>点击右上角用户头像</strong> 👤</li>
|
||
<li><strong>查看角色切换器</strong></li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<h3>第 1 步：添加测试角色</h3>
|
||
<p>点击下面的按钮，自动为当前用户添加5个测试角色。</p>
|
||
|
||
<button class="big-button" onclick="addRolesAndRefresh()">
|
||
🚀 立即添加角色数据
|
||
</button>
|
||
|
||
<div class="warning">
|
||
<strong>⚠️ 提示：</strong>点击按钮后，页面会自动刷新。这是正常的！
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<h3>第 2 步：查看角色切换器</h3>
|
||
<p>页面刷新后，按照以下步骤操作：</p>
|
||
<ul>
|
||
<li><span class="check">✓</span> 点击右上角的 <strong>用户头像</strong> 👤</li>
|
||
<li><span class="check">✓</span> 查看是否有 <strong>"当前角色"</strong> 部分</li>
|
||
<li><span class="check">✓</span> 点击下拉框，选择其他角色</li>
|
||
<li><span class="check">✓</span> 观察角色切换成功提示</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="preview-box">
|
||
<p style="color: #6b7280; margin-bottom: 15px;">👆 点击这里查看位置</p>
|
||
<div style="background: white; padding: 15px; border-radius: 8px; display: inline-flex; align-items: center; gap: 10px; border: 2px solid #22c55e;">
|
||
<span style="font-size: 1.5em;">👤</span>
|
||
<span style="font-weight: bold;">系统管理员</span>
|
||
<span style="color: #6b7280;">← 点击这里</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<h3>第 3 步：测试切换功能</h3>
|
||
<p>在角色下拉列表中，您会看到：</p>
|
||
<div class="code">● 超级管理员 ← 绿色圆点 = 当前角色
|
||
○ 企业管理员
|
||
○ 操作员
|
||
○ 查看者
|
||
○ 技术员</div>
|
||
<p style="margin-top: 10px;">选择任意角色进行切换测试。</p>
|
||
</div>
|
||
|
||
<div class="success">
|
||
<h4>✅ 预期效果</h4>
|
||
<ul style="margin-top: 10px;">
|
||
<li><span class="check">✓</span> 用户头像下方显示当前角色名称</li>
|
||
<li><span class="check">✓</span> 菜单中出现"当前角色"选择器</li>
|
||
<li><span class="check">✓</span> 切换后显示成功提示</li>
|
||
<li><span class="check">✓</span> 角色名称实时更新</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<button class="big-button" onclick="checkCurrentRoles()" style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);">
|
||
👁️ 检查当前角色数据
|
||
</button>
|
||
|
||
<button class="big-button" onclick="resetToSingleRole()" style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);">
|
||
🔄 恢复为单角色（测试完成后）
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 页面加载时检测状态
|
||
window.addEventListener('load', function() {
|
||
checkStatus();
|
||
});
|
||
|
||
function checkStatus() {
|
||
const statusEl = document.getElementById('currentStatus');
|
||
|
||
try {
|
||
const profile = JSON.parse(localStorage.getItem('smart_agriculture_user_profile') || '{}');
|
||
const roleCount = (profile.roleIds || []).length;
|
||
|
||
if (roleCount > 1) {
|
||
statusEl.innerHTML = `
|
||
<span class="status-indicator green"></span>
|
||
已检测到 ${roleCount} 个角色 - 角色切换功能应该可见！
|
||
`;
|
||
} else if (roleCount === 1) {
|
||
statusEl.innerHTML = `
|
||
<span class="status-indicator red"></span>
|
||
当前只有 1 个角色 - 需要添加更多角色才能看到切换器
|
||
`;
|
||
} else {
|
||
statusEl.innerHTML = `
|
||
<span class="status-indicator red"></span>
|
||
未检测到角色数据 - 请点击按钮添加测试角色
|
||
`;
|
||
}
|
||
} catch (e) {
|
||
statusEl.innerHTML = `
|
||
<span class="status-indicator red"></span>
|
||
数据读取失败 - ${e.message}
|
||
`;
|
||
}
|
||
}
|
||
|
||
function addRolesAndRefresh() {
|
||
try {
|
||
// 获取或创建用户资料
|
||
let profile;
|
||
try {
|
||
profile = JSON.parse(localStorage.getItem('smart_agriculture_user_profile') || '{}');
|
||
} catch {
|
||
profile = {};
|
||
}
|
||
|
||
// 确保基本字段存在
|
||
if (!profile.id) profile.id = 'user-1';
|
||
if (!profile.username) profile.username = 'admin';
|
||
if (!profile.name) profile.name = '系统管理员';
|
||
|
||
// 添加多个角色
|
||
profile.roleIds = ['role-1', 'role-2', 'role-3', 'role-4', 'role-5'];
|
||
profile.roleNames = ['超级管理员', '企业管理员', '操作员', '查看者', '技术员'];
|
||
|
||
// 保存
|
||
localStorage.setItem('smart_agriculture_user_profile', JSON.stringify(profile));
|
||
|
||
// 提示并刷新
|
||
alert('✅ 成功添加5个角色！\n\n角色列表：\n• 超级管理员\n• 企业管理员\n• 操作员\n• 查看者\n• 技术员\n\n点击"确定"后页面将自动刷新。\n刷新后请点击右上角用户头像查看！');
|
||
|
||
// 延迟刷新
|
||
setTimeout(function() {
|
||
window.location.reload();
|
||
}, 300);
|
||
|
||
} catch (e) {
|
||
alert('❌ 添加失败：' + e.message);
|
||
}
|
||
}
|
||
|
||
function checkCurrentRoles() {
|
||
try {
|
||
const profile = JSON.parse(localStorage.getItem('smart_agriculture_user_profile') || '{}');
|
||
const currentRole = localStorage.getItem('smart_agriculture_current_role');
|
||
|
||
const roleIds = profile.roleIds || [];
|
||
const roleNames = profile.roleNames || [];
|
||
|
||
let message = '📊 当前角色数据\n\n';
|
||
message += `角色数量: ${roleIds.length} 个\n`;
|
||
message += `当前角色ID: ${currentRole || '未设置'}\n\n`;
|
||
message += `详细列表：\n`;
|
||
|
||
if (roleIds.length === 0) {
|
||
message += ' ❌ 暂无角色数据\n';
|
||
message += '\n请点击"立即添加角色数据"按钮！';
|
||
} else {
|
||
roleIds.forEach(function(id, index) {
|
||
const isCurrent = id === currentRole;
|
||
const name = roleNames[index] || id;
|
||
message += ` ${isCurrent ? '● ' : '○ '}${name} (${id})${isCurrent ? ' ← 当前' : ''}\n`;
|
||
});
|
||
|
||
if (roleIds.length > 1) {
|
||
message += '\n✅ 角色切换功能应该已经可见！';
|
||
message += '\n👉 请点击右上角用户头像查看。';
|
||
} else {
|
||
message += '\n⚠️ 只有1个角色，切换器不会显示。';
|
||
message += '\n👉 请点击"立即添加角色数据"按钮。';
|
||
}
|
||
}
|
||
|
||
alert(message);
|
||
|
||
} catch (e) {
|
||
alert('❌ 检查失败：' + e.message);
|
||
}
|
||
}
|
||
|
||
function resetToSingleRole() {
|
||
if (confirm('⚠️ 确定要恢复为单角色吗？\n\n这将清除所有测试角色，只保留"系统管理员"一个角色。')) {
|
||
try {
|
||
const profile = JSON.parse(localStorage.getItem('smart_agriculture_user_profile') || '{}');
|
||
|
||
// 重置为单角色
|
||
profile.roleIds = ['role-1'];
|
||
profile.roleNames = ['系统管理员'];
|
||
|
||
localStorage.setItem('smart_agriculture_user_profile', JSON.stringify(profile));
|
||
localStorage.removeItem('smart_agriculture_current_role');
|
||
|
||
alert('✅ 已恢复为单角色！\n\n当前角色：系统管理员\n\n点击"确定"后页面将刷新。');
|
||
|
||
setTimeout(function() {
|
||
window.location.reload();
|
||
}, 300);
|
||
|
||
} catch (e) {
|
||
alert('❌ 重置失败：' + e.message);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|