set-admin-role.html 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>设置管理员角色</title>
  7. <style>
  8. body {
  9. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  10. display: flex;
  11. justify-content: center;
  12. align-items: center;
  13. min-height: 100vh;
  14. margin: 0;
  15. background-color: #f5f5f5;
  16. }
  17. .container {
  18. background: white;
  19. padding: 40px;
  20. border-radius: 8px;
  21. box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  22. text-align: center;
  23. }
  24. h1 {
  25. color: #333;
  26. margin-bottom: 20px;
  27. }
  28. p {
  29. color: #666;
  30. margin-bottom: 30px;
  31. }
  32. button {
  33. background-color: #165DFF;
  34. color: white;
  35. border: none;
  36. padding: 12px 24px;
  37. border-radius: 4px;
  38. font-size: 16px;
  39. cursor: pointer;
  40. transition: background-color 0.3s;
  41. }
  42. button:hover {
  43. background-color: #0E4BD9;
  44. }
  45. .message {
  46. margin-top: 20px;
  47. padding: 10px;
  48. border-radius: 4px;
  49. display: none;
  50. }
  51. .success {
  52. background-color: #E8F5E9;
  53. color: #2E7D32;
  54. display: block;
  55. }
  56. .admin-link {
  57. display: block;
  58. margin-top: 20px;
  59. color: #165DFF;
  60. text-decoration: none;
  61. font-weight: 500;
  62. }
  63. .admin-link:hover {
  64. text-decoration: underline;
  65. }
  66. </style>
  67. </head>
  68. <body>
  69. <div class="container">
  70. <h1>设置管理员角色</h1>
  71. <p>点击下方按钮,将您的用户角色设置为管理员,以便访问管理员页面。</p>
  72. <button onclick="setAdminRole()">设置为管理员</button>
  73. <div id="message" class="message"></div>
  74. <a href="/admin/dashboard" class="admin-link" style="display: none;">前往管理员页面</a>
  75. </div>
  76. <script>
  77. function setAdminRole() {
  78. // 创建管理员用户对象
  79. const adminUser = {
  80. id: '1',
  81. name: '超级管理员',
  82. avatar: '<div style=\'width: 40px; height: 40px; background-color: #CCFFCC; color: #555555; display: flex; align-items: center; justify-content: center; font-size: 13.333333333333334px; font-weight: bold;\'>ADMIN</div>',
  83. roles: ['admin', 'user'],
  84. permissions: ['view-all', 'edit-all', 'delete-all'],
  85. lastLogin: new Date().toISOString()
  86. };
  87. // 存储到本地存储
  88. localStorage.setItem('currentUser', JSON.stringify(adminUser));
  89. // 显示成功消息
  90. const message = document.getElementById('message');
  91. message.textContent = '管理员角色设置成功!';
  92. message.classList.add('success');
  93. // 显示前往管理员页面的链接
  94. document.querySelector('.admin-link').style.display = 'block';
  95. }
  96. // 检查是否已经是管理员
  97. window.onload = function() {
  98. const currentUser = localStorage.getItem('currentUser');
  99. if (currentUser) {
  100. try {
  101. const user = JSON.parse(currentUser);
  102. if (user.roles && user.roles.includes('admin')) {
  103. document.querySelector('.admin-link').style.display = 'block';
  104. document.querySelector('button').textContent = '已是管理员';
  105. document.querySelector('button').disabled = true;
  106. }
  107. } catch (e) {
  108. // JSON解析错误,忽略
  109. }
  110. }
  111. };
  112. </script>
  113. </body>
  114. </html>