优化快捷键

1. 当弹幕框或评论框聚焦时，按下 F11 将会触发视频全屏而不是网页全屏。
2. 修复因原快捷键占用导致“迷你颜文字浮窗”不能正常用快捷键弹出的问题。
3. 修复“迷你颜文字浮窗”左右方向键与视频进度条快捷键冲突的问题。
4. 修复“苹方”字体将全角逗号、冒号、分号等显示为半角的问题，但是句号、顿号却不显示为半角，不统一就很烦。

assets/styles/global.scss

@@ -10,7 +10,7 @@
 	font-family: $schinese-fonts;
 	// font-feature-settings: "ss02" on, "ss01" on, "liga" on, "rlig" on, "dlig" on, "hlig" on, "onum" on, "kern" on;
 	font-feature-settings: "ss03" on; // 圆形的逗号、引号。
-	font-variant-east-asian: proportional-width;
+	// font-variant-east-asian: proportional-width; // 苹方会将全角逗号、冒号、分号等错误变成半角，但句号和顿号却不变。
 	font-variant-ligatures: common-ligatures historical-ligatures contextual;
 	font-variant-numeric: proportional-nums;
 	font-kerning: normal;

components/Checkbox.vue

@@ -61,7 +61,7 @@
 	 * 当键盘按下空格键时不要下滑页面。
 	 * @param e - 键盘事件。
 	 */
-	function onKeyDown(e: KeyboardEvent) {
+	function onKeydown(e: KeyboardEvent) {
 		if (e.code === "Space") {
 			stopEvent(e);
 			return;
@@ -92,7 +92,7 @@
 		role="checkbox"
 		:aria-checked="isChecked"
 		@click="onChange"
-		@keydown="onKeyDown"
+		@keydown="onKeydown"
 		@keyup.space.prevent="onChange"
 	>
 		<input
@@ -153,7 +153,7 @@
 		border-radius: $roundness;
 		box-shadow: inset 0 0 0 $border-size c(icon-color);
 		animation: outer-border-change-back $duration-half $duration-half $ease-in-expo reverse backwards;
-		
+
 		@media (prefers-reduced-motion: reduce) {
 			animation: outer-border-change-back 0s $ease-in-expo reverse backwards;
 		}
@@ -185,7 +185,7 @@
 				check-symbol-resize $duration-half $duration-half $ease-out-max backwards,
 				cut-in $duration-half step-start;
 			translate: 0 -1px;
-			
+
 			@media (prefers-reduced-motion: reduce) {
 				animation: check-symbol-resize 0s $ease-out-max backwards;
 			}
@@ -199,7 +199,7 @@
 			animation:
 				indeterminate-symbol-resize $duration-half $duration-half $ease-out-max backwards,
 				cut-in $duration-half step-start;
-				
+
 			@media (prefers-reduced-motion: reduce) {
 				animation: indeterminate-symbol-resize 0s $ease-out-max backwards;
 			}

components/Flyout/FlyoutKaomoji/FlyoutKaomojiMini.vue

@@ -60,9 +60,11 @@
 				break;
 			case "ArrowRight":
 				moveSelectedPosition(1);
+				stopEvent(e);
 				break;
 			case "ArrowLeft":
 				moveSelectedPosition(-1);
+				stopEvent(e);
 				break;
 			// 我没有 case "Enter" 哦，它直接就可以用。
 			default:

components/Pagination.vue

@@ -137,11 +137,11 @@
 	});
 
 	onMounted(() => {
-		document.addEventListener("keydown", onArrowKeyDown);
+		document.addEventListener("keydown", onArrowKeydown);
 	});
 
 	onBeforeUnmount(() => {
-		document.removeEventListener("keydown", onArrowKeyDown);
+		document.removeEventListener("keydown", onArrowKeydown);
 	});
 
 	/**
@@ -167,7 +167,7 @@
 	 * 当按下键盘按键左右键时翻页。
 	 * @param e - 键盘按下事件。
 	 */
-	function onArrowKeyDown(e: KeyboardEvent) {
+	function onArrowKeydown(e: KeyboardEvent) {
 		if (!props.enableArrowKeyMove || document.activeElement === pageEdit.value) return;
 		const movement =
 			e.code === "ArrowLeft" ? -1 :

components/Player/PlayerVideo/PlayerVideoMenu.vue

@@ -159,6 +159,7 @@
 
 		&.fixed {
 			position: fixed;
+			z-index: 90;
 		}
 	}
 

components/TextBox.vue

@@ -288,8 +288,8 @@
 					:step="step"
 					:inputmode="inputMode"
 					@input="onInput"
-					@keydown.stop
-					@keyup.stop
+					@keydown="e => stopPropagationExceptKey(e, 'F11')"
+					@keyup="e => stopPropagationExceptKey(e, 'F11')"
 				/>
 				<span class="suffix">{{ suffix }}</span>
 				<label>{{ placeholder }}</label>

components/TextEditor/TextEditorRtf.vue

@@ -35,7 +35,7 @@
 		},
 		onCreate({ editor }) {
 			const proseMirror = editor.view.dom;
-			addEventListeners(proseMirror, "keydown", "keyup", e => e.stopPropagation());
+			addEventListeners(proseMirror, "keydown", "keyup", e => stopPropagationExceptKey(e, "F11", "Ctrl + KeyM"));
 		},
 	});
 

utils/element.ts

@@ -87,6 +87,24 @@ export function stopEvent(event: Event) {
 	event.stopPropagation();
 }
 
+/**
+ * 阻止键盘按下事件冒泡除非指定的按键。
+ * @param event - 键盘按下事件。
+ * @param keyCodes - 按键名称 `event.code`。
+ */
+export function stopPropagationExceptKey(event: KeyboardEvent, ...keyCodes: string[]) {
+	const code = event.code.toLowerCase();
+	for (let keyCode of keyCodes) {
+		keyCode = keyCode.toLowerCase();
+		if (keyCode.includes("ctrl") !== event.ctrlKey) continue;
+		if (keyCode.includes("alt") !== event.altKey) continue;
+		if (keyCode.includes("shift") !== event.shiftKey) continue;
+		keyCode = keyCode.replaceAll(/ctrl|alt|shift|[\s+]/gi, "");
+		if (code === keyCode) return;
+	}
+	event.stopPropagation();
+}
+
 /**
  * 控制元素的 display 是否为 none，来决定其是否可见。
  *