diff --git a/src/components/settings/cards/DisplaySettingsCard.vue b/src/components/settings/cards/DisplaySettingsCard.vue index caaf4d2..1dab30f 100644 --- a/src/components/settings/cards/DisplaySettingsCard.vue +++ b/src/components/settings/cards/DisplaySettingsCard.vue @@ -58,6 +58,23 @@ + + + + + 显示全屏按钮 + 在主页面显示全屏切换按钮 + + +
随机点名 + + {{ state.isFullscreen ? '退出全屏' : '全屏显示' }} + @@ -429,6 +439,7 @@ export default { { key: "地理", name: "地理" }, { key: "其他", name: "其他" }, ], + isFullscreen: false, }, loading: { download: false, @@ -561,6 +572,9 @@ export default { shouldBlockAutoSave() { return !this.isToday && this.autoSave && this.blockNonTodayAutoSave; }, + showFullscreenButton() { + return getSetting("display.showFullscreenButton"); + }, }, watch: { @@ -601,6 +615,12 @@ export default { this.unwatchSettings = watchSettings(() => { this.updateSettings(); }); + + // 监听全屏变化事件 + document.addEventListener('fullscreenchange', this.fullscreenChangeHandler); + document.addEventListener('webkitfullscreenchange', this.fullscreenChangeHandler); + document.addEventListener('mozfullscreenchange', this.fullscreenChangeHandler); + document.addEventListener('MSFullscreenChange', this.fullscreenChangeHandler); } catch (err) { console.error("初始化失败:", err); this.showError("初始化失败,请刷新页面重试"); @@ -615,6 +635,12 @@ export default { // 注意刷新间隔存放在 state 内 clearInterval(this.state.refreshInterval); } + + // 移除全屏变化事件监听 + document.removeEventListener('fullscreenchange', this.fullscreenChangeHandler); + document.removeEventListener('webkitfullscreenchange', this.fullscreenChangeHandler); + document.removeEventListener('mozfullscreenchange', this.fullscreenChangeHandler); + document.removeEventListener('MSFullscreenChange', this.fullscreenChangeHandler); }, methods: { @@ -1212,6 +1238,50 @@ export default { await this.trySave(true); } }, + + // 全屏相关方法 + toggleFullscreen() { + if (!this.state.isFullscreen) { + this.enterFullscreen(); + } else { + this.exitFullscreen(); + } + }, + + enterFullscreen() { + const docElm = document.documentElement; + + if (docElm.requestFullscreen) { + docElm.requestFullscreen(); + } else if (docElm.webkitRequestFullScreen) { + docElm.webkitRequestFullScreen(); + } else if (docElm.mozRequestFullScreen) { + docElm.mozRequestFullScreen(); + } else if (docElm.msRequestFullscreen) { + docElm.msRequestFullscreen(); + } + }, + + exitFullscreen() { + if (document.exitFullscreen) { + document.exitFullscreen(); + } else if (document.webkitExitFullscreen) { + document.webkitExitFullscreen(); + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } else if (document.msExitFullscreen) { + document.msExitFullscreen(); + } + }, + + fullscreenChangeHandler() { + this.state.isFullscreen = !!( + document.fullscreenElement || + document.webkitFullscreenElement || + document.mozFullScreenElement || + document.msFullscreenElement + ); + }, }, }; diff --git a/src/pages/settings.vue b/src/pages/settings.vue index 883a29d..d9ea62a 100644 --- a/src/pages/settings.vue +++ b/src/pages/settings.vue @@ -213,7 +213,8 @@ export default { display: { emptySubjectDisplay: getSetting('display.emptySubjectDisplay'), dynamicSort: getSetting('display.dynamicSort'), - showRandomButton: getSetting('display.showRandomButton') + showRandomButton: getSetting('display.showRandomButton'), + showFullscreenButton: getSetting('display.showFullscreenButton') }, developer: { enabled: getSetting('developer.enabled'), diff --git a/src/utils/settings.js b/src/utils/settings.js index 8ddda87..2b39744 100644 --- a/src/utils/settings.js +++ b/src/utils/settings.js @@ -97,6 +97,11 @@ const settingsDefinitions = { default: false, description: "是否显示随机按钮", }, + "display.showFullscreenButton": { + type: "boolean", + default: true, + description: "是否显示全屏按钮", + }, // 服务器设置(合并了数据提供者设置) "server.domain": {