Alist增加退出按钮

特别鸣谢

QQ昵称:ZZZ

自定义头部

增加到上方菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 延迟 1 秒执行
    setTimeout(function() {
      // 创建一个新的按钮元素
      var newButton = document.createElement('button');
      // 设置按钮的类名
      newButton.className = 'custom-header-button';
      // 设置按钮背景透明
      newButton.style.backgroundColor = 'transparent';
      newButton.style.border = 'none'; // 移除边框，如果需要的话
      newButton.style.borderRadius = '50%'; // 使背景色呈现圆形
      newButton.style.padding = '4px'; // 增加一些内边距，使圆形背景更大一些
      newButton.style.display = 'flex'; // 使用 Flexbox 布局
      newButton.style.justifyContent = 'center'; // 水平居中
      newButton.style.alignItems = 'center'; // 垂直居中
      newButton.style.width = '32px'; // 确保按钮有足够的宽度
      newButton.style.height = '32px'; // 确保按钮有足够的高度
      newButton.style.backgroundColor = '#cbe3fb'; // 设置背景颜色

      // 创建SVG图标
      var svgNS = "http://www.w3.org/2000/svg"; // SVG命名空间
      var svgIcon = document.createElementNS(svgNS, "svg");
      svgIcon.setAttribute("viewBox", "0 0 1042 1024");
      svgIcon.setAttribute("height", "24");
      svgIcon.setAttribute("width", "24");

      // 创建SVG路径（使用你提供的图标代码）
      var path = document.createElementNS(svgNS, "path");
      path.setAttribute("d", "M581.632 697.344l126.976 0 0 194.56q0 33.792-10.24 58.88t-27.136 40.96-39.424 23.552-48.128 7.68l-452.608 0q-24.576 0-48.128-9.728t-41.472-27.136-29.184-40.96-11.264-52.224l0-706.56q0-24.576 11.776-47.104t30.208-39.936 40.96-28.16 45.056-10.752l449.536 0q26.624 0 50.176 11.776t41.472 29.696 28.16 40.448 10.24 44.032l0 188.416-126.976 0 1.024-195.584-452.608 0-1.024 713.728 452.608 0 0-195.584zM1021.952 505.856q37.888 30.72 2.048 60.416-20.48 15.36-44.544 37.888t-50.176 46.592-51.712 47.616-47.104 40.96q-23.552 18.432-40.448 18.432t-16.896-24.576q2.048-14.336 0.512-35.84t-1.536-36.864q0-17.408-12.288-21.504t-29.696-4.096l-40.96 0-62.464 0q-34.816 0-73.216-0.512t-73.216-0.512l-62.464 0-41.984 0q-8.192 0-17.92-1.536t-17.408-6.656-12.288-14.336-4.608-23.552q0-19.456-0.512-46.08t0.512-47.104q0-27.648 13.312-37.888t43.008-9.216l33.792 0 59.392 0q32.768 0 70.144 0.512t71.168 0.512l61.44 0 38.912 0q25.6 1.024 43.52-4.096t17.92-22.528q0-14.336 1.024-32.256t1.024-32.256q0-23.552 12.8-29.696t32.256 9.216q19.456 16.384 45.568 38.4t52.736 45.056 52.736 45.568 47.616 39.936z");
      path.setAttribute("fill", "#1296db"); // 设置填充颜色
      svgIcon.appendChild(path);

      // 将SVG图标添加到按钮中
      newButton.appendChild(svgIcon);

      // 设置按钮的点击事件处理函数
      newButton.onclick = function() {
        localStorage.removeItem('token');
        // 跳转到指定的URL
        window.location.href = '/';
      };


      // 设置鼠标悬停时的提示
      newButton.title = '退出登录';

      // 尝试获取目标<div>元素
      var targetDiv = document.querySelector('.header-right');

      // 如果目标元素存在，则直接添加按钮
      if (targetDiv) {
        targetDiv.appendChild(newButton);
      } else {
        // 如果目标元素不存在，则使用MutationObserver来监听DOM变化
        var observer = new MutationObserver(function(mutations) {
          mutations.forEach(function(mutation) {
            if (mutation.addedNodes.length) {
              targetDiv = document.querySelector('.header-right');
              if (targetDiv) {
                targetDiv.appendChild(newButton);
                observer.disconnect(); // 停止观察
              }
            }
          });
        });

        // 配置观察选项
        var config = { childList: true, subtree: true };

        // 选择目标节点
        var targetNode = document.body;

        // 调用观察者的observe()方法
        observer.observe(targetNode, config);
      }
    }, 2000); // 2000 毫秒 = 2 秒  延迟是为了让按钮出现时现在在最后面
  });
</script>

增加到右侧菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 创建一个新的按钮元素
    var newButton = document.createElement('button');
    // 设置按钮的类名
    newButton.className = 'custom-header-button';

    // 创建SVG图标
    var svgNS = "http://www.w3.org/2000/svg"; // SVG命名空间
    var svgIcon = document.createElementNS(svgNS, "svg");
    svgIcon.setAttribute("viewBox", "0 0 24 24");
    svgIcon.setAttribute("height", "24");
    svgIcon.setAttribute("width", "24");

    // 创建SVG路径（这里只是一个示例路径，应根据实际图标进行修改）
    var path = document.createElementNS(svgNS, "path");
    path.setAttribute("d", "M10 3H6a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h4v-2H6V5h4v2h2V5a2 2 0 0 0-2-2zm4 8v10c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V11c0-.6.4-1 1-1h6c.6 0 1 .4 1 1zm-2 5v-1h2v1h-2z");
    svgIcon.appendChild(path);

    // 将SVG图标添加到按钮中
    newButton.appendChild(svgIcon);

    // 设置按钮的点击事件处理函数
    newButton.onclick = function() {
    localStorage.clear()
    // 跳转到指定的URL
    window.location.href = 'http://127.0.0.1:5244/@login?redirect=%2Flogin';
  };


    // 设置鼠标悬停时的提示
    newButton.title = '退出登录';

    // 尝试获取目标<div>元素
    var targetDiv = document.querySelector('.left-toolbar-in');

    // 如果目标元素存在，则直接添加按钮
    if (targetDiv) {
      targetDiv.appendChild(newButton);
    } else {
      // 如果目标元素不存在，则使用MutationObserver来监听DOM变化
      var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
          if (mutation.addedNodes.length) {
            targetDiv = document.querySelector('.left-toolbar-in');
            if (targetDiv) {
              targetDiv.appendChild(newButton);
              observer.disconnect(); // 停止观察
            }
          }
        });
      });

      // 配置观察选项
      var config = { childList: true, subtree: true };

      // 选择目标节点
      var targetNode = document.body;

      // 调用观察者的observe()方法
      observer.observe(targetNode, config);
    }
  });
</script>