这篇主要记录控制中心的进度

目前主要参考洪哥的控制台，后面会参考更多人的博客设计，争取能实现更多的功能。

构想

洪哥的控制台颜值很高，是我喜欢的简约风格，目前已上线5个设置按钮，分别是：

  • 显示模式切换
  • 边栏显示控制
  • 快捷键开关
  • 无障碍工具栏
  • 帧率显示开关（最近更新）

控制台主体是全屏显示的，背景是毛玻璃效果，按钮整体居中排列，随着屏幕宽度缩小会隐藏部分按钮，关闭控制台可以通过点击右上角的 X 或者mask区域。整个交互看起来是非常舒适的。

计划

打勾的是已实现的，没打勾的还在努力。

主体界面

深色模式

简繁切换

歌词显示

音频控制器（Aplayer其他功能迁入，如下一曲、上一曲、暂停/播放、进度条、音量条、歌单等）

设置界面

计算器

皮肤控制器（color、blur、image等替换）

控制中心

pug

新建console.pug文件，文件路径：themes\butterfly\layout\includes\console.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
div#console
    div.console-head
        span 控制中心
    div.close-btn(onclick="ctrl.hideConsole()" href="javascript:void(0);")
        i.fas.fa-circle-xmark
    div.console-btn-group

        div.console-btn-item#darkItem
            a.switchButton#darkSwitchBtn(onclick="ctrl.switchDarkMode()" title="深色模式" href="javascript:void(0);" rel="external nofollow" data-pjax-state="external")
                i#iconDarkMode.fas.fa-moon

        div.console-btn-item#charItem
            a.switchButton#charSwitchBtn(type="button" title="簡/繁" href="javascript:void(0);" rel="external nofollow" data-pjax-state="external")
                i#iconCharMode.fas(style="font-size:1.5rem;") 繁

        div.console-btn-item#ircItem
            a.switchButton#ircSwitchBtn(onclick="ctrl.ircShowHide()" title="歌词显示" href="javascript:void(0);" rel="external nofollow" data-pjax-state="external")
                i#iconIrcMode.fas(style="font-size:1.5rem;") 词

        div.console-btn-item#asideItem
            a.switchButton#asideSwitchBtn(onclick="ctrl.hideAsideBtn()" title="单栏/双栏" href="javascript:void(0);" rel="external nofollow" data-pjax-state="external")
                i#iconAside.fas.fa-arrows-alt-h
    div.console-mask(onclick="ctrl.hideConsole()" href="javascript:void(0);" rel="external nofollow")

然后在themes\butterfly\layout\includes\layout.pug文件中最后一段引入。

1
2
3
4
    include ./rightside.pug
+    include ./console.pug
    !=partial('includes/third-party/search/index', {}, {cache: true})
    include ./additional-js.pug

CSS

在自有的css文件中加入控制中心的样式。

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
/* 导航栏中控制中心按钮样式 */
#console-switch {
  display: flex;
  width: 35px;
  height: 35px;
  padding: 0;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  margin-left: 0.5em;
  font-size: 1.4rem;
}

#console-switch:hover {
  background: var(--anzhiyu-main);
  color: var(--anzhiyu-white) !important;
}

/* 控制中心界面功能按钮样式 */
#console {
  display: flex;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 9999;
  justify-content: center;
  opacity: 0;
  transition: 0.3s ease-out;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

#console.show {
  opacity: 1;
  pointer-events: all;
}

#console .close-btn {
  width: 35px;
  height: 35px;
  position: fixed;
  right: 5%;
  top: 5%;
  font-size: 35px;
  color: var(--font-color);
  cursor: pointer;
  transition: 0.3s;
  display: flex;
}

#console .console-btn-group {
  display: flex;
  margin: 1rem auto 0 auto;
  justify-content: center;
  width: fit-content;
}

#console .console-btn-group .console-btn-item:not(:last-child) {
  margin-right: 0.5rem;
}

#console .console-btn-group .console-btn-item {
  width: 60px;
  height: 60px;
  transition: 0.3s;
  cursor: pointer;
}

#console .console-btn-group .console-btn-item a {
  width: 100%;
  height: 100%;
  background: var(--card-bg);
  border: var(--style-border);
  border-radius: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--font-color);
}

[data-theme = dark] a#darkSwitchBtn {
  background: rgba(50, 150, 255, 0.9) !important;
  color: var(--anzhiyu-white) !important;
}

/* hover变色开关 */
/* #console .console-btn-group .console-btn-item a:hover {
  background: var(--gavin-op-dis-3) !important;
} */

#console .console-btn-group .console-btn-item.on a {
  background: rgba(50, 150, 255, 0.9);
  color: var(--anzhiyu-white);
  transition: 0.3s;
}

#console .console-btn-group i {
  font-size: 1.8rem; /*图标大小*/
}

#console.show .console-mask {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#console .console-mask {
  background: var(--anzhiyu-maskbgdeep);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  position: absolute;
  z-index: -1;
  transition: 0.3s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.console-head {
  position: fixed;
  display: flex;
  top: 3.5%;
  left: 5%;
  font-size: 1.5rem;
  font-weight: 900;
}

.fas {
  font-weight: 900;
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  line-height: 1;
}

JS

在自有的js文件中加入功能函数。

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
var ctrl = {

  // 深色模式开关
  switchDarkMode: function() {
    const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
    if (nowMode === 'light') {
      activateDarkMode()
      saveToLocal.set('theme', 'dark', 2)
      GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
      // document.querySelector("#iconDarkMode").classList.remove("fa-sun")
      // document.querySelector("#iconDarkMode").classList.add("fa-moon")
    } else {
      activateLightMode()
      saveToLocal.set('theme', 'light', 2)
      GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
      // document.querySelector("#iconDarkMode").classList.remove("fa-moon")
      // document.querySelector("#iconDarkMode").classList.add("fa-sun")
    }
    typeof utterancesTheme === 'function' && utterancesTheme()
    typeof changeGiscusTheme === 'function' && changeGiscusTheme()
    typeof FB === 'object' && window.loadFBComment()
    typeof runMermaid === 'function' && window.runMermaid()  
  },

  //显示中控台
  showConsole: function() {
    document.querySelector("#console").classList.add("show");
    cjw.initConsoleState();
  },

  //隐藏中控台
  hideConsole: function() {
    document.querySelector("#console").classList.remove("show");
  },

  // 歌词显示开关
  ircShowHide: function() {
    const irc = document.querySelector(".aplayer-lrc-hide")
    if(irc === null) {
      document.querySelector(".aplayer-lrc").classList.add("aplayer-lrc-hide")
      document.querySelector("#ircItem").classList.remove("on")
    } else {
      document.querySelector(".aplayer-lrc").classList.remove("aplayer-lrc-hide")
      document.querySelector("#ircItem").classList.add("on")
    }
  },

  // 单栏显示开关
  hideAsideBtn: () => {
    const $htmlDom = document.documentElement.classList
    if ($htmlDom.contains('hide-aside')){
      saveToLocal.set('aside-status', 'show', 2)
      document.querySelector("#asideItem").classList.remove("on")
    } else {
      saveToLocal.set('aside-status', 'hide', 2)
      document.querySelector("#asideItem").classList.add("on")
    }
    $htmlDom.toggle('hide-aside')
  },

  //初始化console图标
  initConsoleState: function() {
    const irc = document.querySelector(".aplayer-lrc-hide")
    irc === null
      ? document.querySelector("#ircItem").classList.add("on")
      : document.querySelector("#ircItem").classList.remove("on")
    saveToLocal.get('aside-status') === 'hide'
      ? document.querySelector("#asideItem").classList.add("on")
      : document.querySelector("#asideItem").classList.remove("on")
  }
  
}