cavin/smart-crop-ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

生产管理系统前端 - 瓦力0.73原型图提交

Browse Source
This commit is contained in:
peng
2025-10-28 19:51:17 +08:00
parent 58f5ca7f22
commit e3829d2fcc
154 changed files with 24913 additions and 9377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

413
src/添加角色数据并查看.html Normal file
View File

@@ -0,0 +1,413 @@
<!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>