提供了几个选项的可视化设置页面

configs.js

@@ -34,7 +34,8 @@ const CONFIGS = {
     },
     autoHideMenuBar: true,
     useContentSize: true,
-    icon: getIcon()
+    icon: getIcon(),
+    enableLargerThanScreen: true
   },
   MANAGER_WINDOW_CONFIG: {
     width: 1280, // + 16,

index.js

@@ -322,7 +322,7 @@ const windowControl = {
               'file://' + path.join(toolInfo.filesDir, indexPage)
             )
           case 'update-user-config':
-            userConfigs = require('configs-user.json')
+            userConfigs = require('./configs-user.json')
             break
           default:
             break

manager/index.html

@@ -74,7 +74,23 @@ <h3>强制开启语音报番型</h3>
         <button id="editTool" class="big-btn edit-btn"></button>
         <div id="toolInfos" class="info-cards"></div>
       </section>
-      <section data-name="settingPage"></section>
+      <section data-name="settingPage">
+        <button id="saveConfigs" class="big-btn save-btn"></button>
+        <div id="settingInner" class="setting-innner">
+          <h3>窗口</h3>
+          <input
+            type="checkbox"
+            name="windowSettings1"
+            id="windowSettings1"
+          /><label for="windowSettings1">使用原生全屏幕模式(Kiosk)</label>
+          <h3>更新</h3>
+          <input
+            type="checkbox"
+            name="updateSettings1"
+            id="updateSettings1"
+          /><label for="updateSettings1">获取浏览版(Pre-release)</label>
+        </div>
+      </section>
       <div class="bottom-pannel">
         <span id="serverInfo" data-server-index="0"
           >服务器: <span id="serverText">加载中</span></span

manager/manager.js

@@ -1099,3 +1099,51 @@ fs.readFile(path.join(__dirname, '../configs-user.json'), (err, data) => {
   )
 })
 /* 检查更新业务逻辑 End */
+
+/* 设置项业务逻辑 Start */
+const getKeyText = key => {
+  const lang = {
+    window: '窗口',
+    isKioskModeOn: '使用原生全屏幕模式(Kiosk)',
+    update: '更新',
+    prerelease: '获取浏览版(Pre-release)',
+    chromium: '核心（需要重启软件）',
+    isHardwareAccelerationDisable: '关闭硬件加速(Hardware Acceleration)'
+  }
+  return lang[key] ? lang[key] : false
+}
+const userConfig = require('../configs-user.json')
+const settingInner = document.getElementById('settingInner')
+settingInner.innerHTML = ''
+Object.entries(userConfig).forEach(([keyGroup, value]) => {
+  const groupName = getKeyText(keyGroup)
+  const h3 = document.createElement('h3')
+  h3.innerText = groupName
+  settingInner.append(h3)
+  Object.entries(value).forEach(([keyConfig, value], index) => {
+    const selectName = getKeyText(keyConfig)
+    const input = document.createElement('input')
+    input.type = 'checkbox'
+    const label = document.createElement('label')
+    input.id = 'config' + keyGroup + keyConfig + index
+    label.setAttribute('for', input.id)
+    label.innerText = selectName
+    input.checked = value
+    input.addEventListener('change', e => {
+      userConfig[keyGroup][keyConfig] = input.checked
+    })
+    settingInner.append(input)
+    settingInner.append(label)
+  })
+})
+const saveConfigsBtn = document.getElementById('saveConfigs')
+saveConfigsBtn.addEventListener('click', e => {
+  try {
+    fs.writeSync('../configs-user.json', JSON.stringify(userConfig))
+    alert('保存成功')
+  } catch (error) {
+    alert('保存失败\n' + error)
+  }
+})
+
+/* 设置项业务逻辑 End */

manager/style.css

@@ -83,6 +83,41 @@
           user-select: none;
   font-family: '思源黑体 CN', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
+*::-webkit-scrollbar {
+  width: 8px;
+}
+*::-webkit-scrollbar-button {
+  height: 0;
+  display: none;
+  background-color: transparent;
+}
+*::-webkit-scrollbar-track-piece {
+  background-color: transparent;
+  padding-right: 8px;
+}
+*::-webkit-scrollbar-thumb {
+  width: 8px;
+  border-radius: 4px;
+  min-height: 64px;
+  max-height: 128px;
+  height: auto;
+  background-color: rgba(0, 0, 0, 0);
+  -webkit-transition: background-color var(--animation-time) var(--ease-in-out);
+  transition: background-color var(--animation-time) var(--ease-in-out);
+}
+*:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+*:hover::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.15);
+  -webkit-transition: background-color 0;
+  transition: background-color 0;
+}
+*:hover::-webkit-scrollbar-thumb:active {
+  background-color: rgba(0, 0, 0, 0.2);
+  -webkit-transition: background-color 0;
+  transition: background-color 0;
+}
 
 button {
   outline: none !important;
@@ -208,41 +243,6 @@ h1 {
   overflow-y: auto;
   padding-left: 102px;
 }
-.main-context > section > div.info-cards::-webkit-scrollbar {
-  width: 8px;
-}
-.main-context > section > div.info-cards::-webkit-scrollbar-button {
-  height: 0;
-  display: none;
-  background-color: transparent;
-}
-.main-context > section > div.info-cards::-webkit-scrollbar-track-piece {
-  background-color: transparent;
-  padding-right: 8px;
-}
-.main-context > section > div.info-cards::-webkit-scrollbar-thumb {
-  width: 8px;
-  border-radius: 4px;
-  min-height: 64px;
-  max-height: 128px;
-  height: auto;
-  background-color: rgba(0, 0, 0, 0);
-  -webkit-transition: background-color var(--animation-time) var(--ease-in-out);
-  transition: background-color var(--animation-time) var(--ease-in-out);
-}
-.main-context > section > div.info-cards:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-.main-context > section > div.info-cards:hover::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(0, 0, 0, 0.15);
-  -webkit-transition: background-color 0;
-  transition: background-color 0;
-}
-.main-context > section > div.info-cards:hover::-webkit-scrollbar-thumb:active {
-  background-color: rgba(0, 0, 0, 0.2);
-  -webkit-transition: background-color 0;
-  transition: background-color 0;
-}
 .main-context > section > div.info-cards > article {
   width: 400px;
   height: 144px;
@@ -398,8 +398,67 @@ h1 {
   display: none;
 }
 .main-context > section[data-name='settingPage'] {
-  padding-left: 102px;
-  padding-top: 16px;
+  padding: 40px 0 20px 102px;
+}
+.main-context > section[data-name='settingPage'] > .save-btn {
+  left: 102px;
+}
+.main-context > section[data-name='settingPage'] > .save-btn::before {
+  content: '';
+}
+.main-context > section[data-name='settingPage'] > .setting-innner {
+  height: 100%;
+  width: calc(100% - 16px);
+  overflow-y: auto;
+}
+.main-context > section[data-name='settingPage'] > .setting-innner > h3 {
+  cursor: default;
+}
+.main-context > section[data-name='settingPage'] > .setting-innner > input {
+  display: none;
+}
+.main-context > section[data-name='settingPage'] > .setting-innner > input[type='checkbox'] + label {
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  line-height: 20px;
+  font-size: 14px;
+  cursor: pointer;
+  outline: none !important;
+  display: block;
+  padding-left: 16px;
+}
+.main-context > section[data-name='settingPage'] > .setting-innner > input[type='checkbox'] + label::before {
+  content: ' ';
+  display: inline-block;
+  width: 32px;
+  height: 16px;
+  border-radius: 8px;
+  position: relative;
+  top: 3px;
+  right: 12px;
+  background-color: var(--switch-disable-color);
+  -webkit-transition: background-color var(--animation-time) var(--ease-in-out);
+  transition: background-color var(--animation-time) var(--ease-in-out);
+}
+.main-context > section[data-name='settingPage'] > .setting-innner > input[type='checkbox'] + label::after {
+  content: ' ';
+  display: block;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  position: relative;
+  left: -10px;
+  bottom: 16px;
+  background-color: var(--switch-ball-color);
+  -webkit-transition: left var(--animation-time) var(--ease-in-out);
+  transition: left var(--animation-time) var(--ease-in-out);
+}
+.main-context > section[data-name='settingPage'] > .setting-innner > input[type='checkbox']:checked + label::before {
+  background-color: var(--switch-able-color);
+}
+.main-context > section[data-name='settingPage'] > .setting-innner > input[type='checkbox']:checked + label::after {
+  left: calc(-12px - 2px + 20px);
 }
 .main-context > .left-pannel {
   height: var(--main-height);