feat(app and web): 将 electron 升级到 23.0.0 ， 删除 electron 原生窗口样式 frame: …

…false，自定义 titlebar ，并优化主题切换。

packages/app/index.ts

@@ -14,6 +14,7 @@ import { startupServer } from './src/tasks/startup.server';
 
 // 设置 webrtc 的影像帧率比例，最高100，太高会造成卡顿，默认50
 app.commandLine.appendSwitch('webrtc-max-cpu-consumption-percentage', '1');
+app.disableHardwareAcceleration();
 
 /** 获取单进程锁 */
 const gotTheLock = app.requestSingleInstanceLock();

packages/app/package.json

@@ -16,7 +16,7 @@
 		"@types/axios": "^0.14.0",
 		"@types/node-forge": "^1.0.0",
 		"@types/semver": "^7.3.9",
-		"electron": "17.0.0",
+		"electron": "23.0.0",
 		"electron-builder": "^23.1.0"
 	},
 	"dependencies": {

packages/app/src/window.ts

@@ -1,9 +1,7 @@
 // @ts-check
-import { BrowserWindow, app, shell } from 'electron';
+import { BrowserWindow, shell } from 'electron';
 import path from 'path';
 
-app.disableHardwareAcceleration();
-
 export function createWindow() {
 	const win = new BrowserWindow({
 		title: 'ocs',
@@ -12,10 +10,11 @@ export function createWindow() {
 		minWidth: 1000,
 		center: true,
 		show: false,
-
-		type: 'desktop',
 		hasShadow: true,
 		autoHideMenuBar: true,
+		titleBarStyle: 'hidden',
+		titleBarOverlay: true,
+		frame: false,
 		webPreferences: {
 			// 关闭拼写矫正
 			spellcheck: false,

packages/web/src/assets/css/common.css

@@ -10,6 +10,12 @@ html,
   min-width: 500px;
   min-height: 300px;
 }
+/** 兼容 win11 以下的软件不会自动带有阴影和边框 */
+html.window-frame {
+  border: 1px solid gray;
+  overflow: hidden;
+  box-shadow: 0px 0px 12px #d3d3d3;
+}
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -102,16 +108,21 @@ body .arco-tree li span.arco-tree-switcher {
   width: 18px;
 }
 body[arco-theme='dark'] {
-  color: #bfbbb3;
+  color: #cccccc;
   background-color: #2c2c2c;
+  /** browser-panel toc */
   /* 滚动槽 */
   /* 滚动条滑块 */
 }
+body[arco-theme='dark'] .bp-toc {
+  color: #cccccc;
+  background-color: #2c2c2c;
+}
 body[arco-theme='dark'] .text-secondary {
-  color: #9c9992 !important;
+  color: #aaaaaa !important;
 }
 body[arco-theme='dark'] #title ul li {
-  color: #bfbbb3;
+  color: #cccccc;
 }
 body[arco-theme='dark'] ::-webkit-scrollbar-track {
   background: #9693933a;
@@ -144,11 +155,15 @@ body[arco-theme='dark'] .breadcrumb {
   border: 1px solid #4b4848;
 }
 body[arco-theme='dark'] .path-item {
-  color: #bfbbb3;
+  color: #cccccc;
 }
 body[arco-theme='dark'] .entity {
   border-bottom: 1px solid #4b4848;
 }
+body[arco-theme='dark'] .entity-properties {
+  background-color: #4b4b4b;
+  color: #aaaaaa;
+}
 .arco-trigger-popup {
   animation-duration: 0s !important;
   animation: none !important;

packages/web/src/assets/less/common.less

@@ -11,6 +11,13 @@ html,
 	min-height: 300px;
 }
 
+/** 兼容 win11 以下的软件不会自动带有阴影和边框 */
+html.window-frame {
+	border: 1px solid gray;
+	overflow: hidden;
+	box-shadow: 0px 0px 12px #d3d3d3;
+}
+
 #app {
 	font-family: Avenir, Helvetica, Arial, sans-serif;
 	-webkit-font-smoothing: antialiased;
@@ -126,16 +133,23 @@ body {
 }
 
 @night-color-primary: #4898e2;
-@night-color: #bfbbb3;
-@night-color-secondary: #9c9992;
+@night-color: #cccccc;
+@night-color-secondary: #aaaaaa;
 @night-bg-color: #2c2c2c;
+@night-bg-color-secondary: #4b4b4b;
 @night-active: #61a5e4;
 @night-border-color: #4b4848;
 
 body[arco-theme='dark'] {
 	color: @night-color;
 	background-color: @night-bg-color;
 
+	/** browser-panel toc */
+	.bp-toc {
+		color: @night-color;
+		background-color: @night-bg-color;
+	}
+
 	.text-secondary {
 		color: @night-color-secondary !important;
 	}
@@ -198,6 +212,11 @@ body[arco-theme='dark'] {
 	.entity {
 		border-bottom: 1px solid @night-border-color;
 	}
+
+	.entity-properties {
+		background-color: @night-bg-color-secondary;
+		color: @night-color-secondary;
+	}
 }
 
 .arco-trigger-popup {

packages/web/src/components/Title.vue

@@ -236,14 +236,19 @@ function openDevTools() {
 
 <style scoped lang="less">
 .title {
+	-webkit-app-region: drag;
 	width: 100%;
 	display: flex;
 	align-items: center;
+	/** 系统自带控件高度为 32 */
+	height: 32px;
 	cursor: default;
 
 	.title-item {
+		-webkit-app-region: no-drag;
 		padding: 0px 8px;
 		font-size: 14px;
+		cursor: pointer;
 
 		&:hover {
 			background-color: #f0f0f0;

packages/web/src/pages/index.vue

@@ -18,7 +18,7 @@
 								<Icon
 									class="icon"
 									:type="item.meta.icon"
-									:theme="item.path === currentRoute.path ? 'filled' : 'outlined'"
+									:theme="item.name === currentRoute.name ? 'filled' : 'outlined'"
 								/>
 							</a-tooltip>
 						</div>
@@ -72,11 +72,11 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { RouteRecordRaw, useRouter } from 'vue-router';
 import Title from '../components/Title.vue';
 import { router, routes, CustomRouteType } from '../route';
-import { initTheme, setAlwaysOnTop, setAutoLaunch, store } from '../store';
+import { changeTheme, setAlwaysOnTop, setAutoLaunch, store } from '../store';
 import { about, fetchRemoteNotify, sleep } from '../utils';
 import { notify } from '../utils/notify';
 import { remote } from '../utils/remote';
@@ -88,6 +88,7 @@ import BrowserPanel from '../components/browsers/BrowserPanel.vue';
 import { currentBrowser } from '../fs';
 import { electron, inBrowser } from '../utils/node';
 import Setup from '../components/Setup.vue';
+import { getWindowsRelease } from '../utils/os';
 
 const { ipcRenderer } = electron;
 const version = ref('');
@@ -99,6 +100,16 @@ onUnmounted(() => closeAllBrowser(false));
 ipcRenderer.on('close', () => closeAllBrowser(true));
 
 onMounted(async () => {
+	/** 设置窗口边框 */
+	remote.os.call('platform').then(async (platform) => {
+		if (platform === 'win32') {
+			const release = await getWindowsRelease();
+			if (release !== 'win11') {
+				document.documentElement.classList.add('window-frame');
+			}
+		}
+	});
+
 	/** 检测环境 */
 	// @ts-ignore
 	if (inBrowser) {
@@ -127,36 +138,34 @@ onMounted(async () => {
 	remote.logger.call('info', 'render store init');
 	setAutoLaunch();
 	setAlwaysOnTop();
-	initTheme();
+	changeTheme();
 
-	nextTick(() => {
-		/** 打开关于软件 */
-		if (store.render.state.first) {
-			about();
-		}
+	/** 打开关于软件 */
+	if (store.render.state.first) {
+		about();
+	}
 
-		/** 监听屏幕变化 */
-		onResize();
-		window.addEventListener('resize', onResize);
-
-		/** 获取最新远程通知 */
-		fetchRemoteNotify(false);
-
-		/** 如果正在更新的话，获取更新进度 */
-		ipcRenderer.on('download', (e, channel, rate, totalLength, chunkLength) => {
-			if (channel === 'update') {
-				notify(
-					'OCS更新程序',
-					`更新中: ${(chunkLength / 1024 / 1024).toFixed(2)}MB/${(totalLength / 1024 / 1024).toFixed(2)}MB`,
-					'updater',
-					{
-						type: 'info',
-						duration: 5,
-						close: false
-					}
-				);
-			}
-		});
+	/** 监听屏幕变化 */
+	onResize();
+	window.addEventListener('resize', onResize);
+
+	/** 获取最新远程通知 */
+	fetchRemoteNotify(false);
+
+	/** 如果正在更新的话，获取更新进度 */
+	ipcRenderer.on('download', (e, channel, rate, totalLength, chunkLength) => {
+		if (channel === 'update') {
+			notify(
+				'OCS更新程序',
+				`更新中: ${(chunkLength / 1024 / 1024).toFixed(2)}MB/${(totalLength / 1024 / 1024).toFixed(2)}MB`,
+				'updater',
+				{
+					type: 'info',
+					duration: 5,
+					close: false
+				}
+			);
+		}
 	});
 });
 
@@ -178,21 +187,23 @@ async function closeAllBrowser(quit: boolean) {
 			onOk: async () => {
 				const m = Modal.info({ content: '正在关闭所有浏览器...', closable: false, maskClosable: false, footer: false });
 
-				// 最久5秒后关闭
-				setTimeout(() => {
+				const close = () => {
 					if (quit) {
 						remote.app.call('exit');
 					}
-
 					m.close();
-				}, 5000);
+				};
 
+				// 最久5秒后关闭
+				const timeout = setTimeout(close, 5000);
 				try {
 					for (const process of processes) {
 						await process.close();
 						await sleep(100);
 					}
 				} catch {}
+				clearTimeout(timeout);
+				close();
 			}
 		});
 	} else {
@@ -220,23 +231,25 @@ function onResize() {
 
 .main {
 	display: grid;
-	grid-template-rows: 24px calc(100vh - 24px);
+	grid-template-rows: 32px calc(100vh - 32px);
 	grid-template-areas:
 		'header'
 		'main ';
 }
 
 .sider {
 	-webkit-app-region: no-drag;
+	user-select: none;
 	width: 48px;
 	padding: 4px;
 	text-align: center;
 	display: flex;
 	justify-content: center;
 
 	.sider-items {
-		.sider-item {
-			margin-top: 8px;
+		padding-top: 12px;
+		.sider-item + .sider-item {
+			margin-top: 22px;
 		}
 
 		.icon {

packages/web/src/pages/setting/index.vue

@@ -19,6 +19,7 @@
 					<a-switch
 						v-model="store.render.setting.theme.dark"
 						size="small"
+						@click="changeTheme"
 					/>
 				</Description>
 			</Card>
@@ -109,7 +110,7 @@
 import Card from '../../components/Card.vue';
 import Description from '../../components/Description.vue';
 import Path from '../../components/Path.vue';
-import { store } from '../../store';
+import { changeTheme, store } from '../../store';
 import { remote } from '../../utils/remote';
 import BrowserPath from '../../components/setting/BrowserPath.vue';
 import OCSConfigs from '../../components/OCSConfigs.vue';

packages/web/src/store/index.ts

@@ -173,13 +173,21 @@ watch(
 watch(() => store.render.setting.window.autoLaunch, setAutoLaunch);
 watch(() => store.render.setting.window.alwaysOnTop, setAlwaysOnTop);
 
-export function initTheme() {
+export function changeTheme() {
 	if (store.render.setting.theme.dark) {
 		// 设置为暗黑主题
 		document.body.setAttribute('arco-theme', 'dark');
+		remote.win.call('setTitleBarOverlay', {
+			color: '#2C2C2C',
+			symbolColor: 'white'
+		});
 	} else {
 		// 恢复亮色主题
 		document.body.removeAttribute('arco-theme');
+		remote.win.call('setTitleBarOverlay', {
+			color: '#fff',
+			symbolColor: 'black'
+		});
 	}
 }
 

packages/web/src/utils/os.ts

@@ -0,0 +1,14 @@
+import { remote } from './remote';
+
+/** 获取 windows 版本号 */
+export async function getWindowsRelease() {
+	const release = await remote.os.call('release');
+
+	if (release.startsWith('6.1')) {
+		return 'win7';
+	} else if (parseInt(release.split('.').at(-1) || '0') > 22000) {
+		return 'win11';
+	} else {
+		return 'win10';
+	}
+}