From e092008dc5768cb57b9eeb2ff70e5b831e0dfa24 Mon Sep 17 00:00:00 2001 From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Fri, 1 Aug 2025 17:20:40 +0900 Subject: feat(frontend): セーフモード (#16245) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(frontend): セーフモード * Update Changelog * Update Changelog * fix * fix * Update Changelog * Update Changelog * PWAのショートカット経由でもセーフモードで起動できるように * Update ClientServerService.ts --------- Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com> --- packages/frontend/src/boot/common.ts | 65 ++++++++++++---------- packages/frontend/src/boot/main-boot.ts | 22 +++++++- packages/frontend/src/local-storage.ts | 1 + .../frontend/src/pages/settings/custom-css.vue | 3 + packages/frontend/src/pages/settings/plugin.vue | 6 +- packages/frontend/src/pages/settings/theme.vue | 6 +- packages/frontend/src/plugin.ts | 2 + packages/frontend/src/ui/_common_/common.vue | 22 +++++++- 8 files changed, 95 insertions(+), 32 deletions(-) (limited to 'packages/frontend/src') diff --git a/packages/frontend/src/boot/common.ts b/packages/frontend/src/boot/common.ts index 992bde9bd1..ea41155ab0 100644 --- a/packages/frontend/src/boot/common.ts +++ b/packages/frontend/src/boot/common.ts @@ -5,7 +5,7 @@ import { computed, watch, version as vueVersion } from 'vue'; import { compareVersions } from 'compare-versions'; -import { version, lang, updateLocale, locale, apiUrl } from '@@/js/config.js'; +import { version, lang, updateLocale, locale, apiUrl, isSafeMode } from '@@/js/config.js'; import defaultLightTheme from '@@/themes/l-light.json5'; import defaultDarkTheme from '@@/themes/d-green-lime.json5'; import type { App } from 'vue'; @@ -168,28 +168,35 @@ export async function common(createVue: () => Promise>) { // NOTE: この処理は必ずクライアント更新チェック処理より後に来ること(テーマ再構築のため) watch(store.r.darkMode, (darkMode) => { - applyTheme(darkMode - ? (prefer.s.darkTheme ?? defaultDarkTheme) - : (prefer.s.lightTheme ?? defaultLightTheme), - ); - }, { immediate: miLocalStorage.getItem('theme') == null }); + const theme = (() => { + if (darkMode) { + return isSafeMode ? defaultDarkTheme : (prefer.s.darkTheme ?? defaultDarkTheme); + } else { + return isSafeMode ? defaultLightTheme : (prefer.s.lightTheme ?? defaultLightTheme); + } + })(); + + applyTheme(theme); + }, { immediate: isSafeMode || miLocalStorage.getItem('theme') == null }); window.document.documentElement.dataset.colorScheme = store.s.darkMode ? 'dark' : 'light'; - const darkTheme = prefer.model('darkTheme'); - const lightTheme = prefer.model('lightTheme'); + if (!isSafeMode) { + const darkTheme = prefer.model('darkTheme'); + const lightTheme = prefer.model('lightTheme'); - watch(darkTheme, (theme) => { - if (store.s.darkMode) { - applyTheme(theme ?? defaultDarkTheme); - } - }); + watch(darkTheme, (theme) => { + if (store.s.darkMode) { + applyTheme(theme ?? defaultDarkTheme); + } + }); - watch(lightTheme, (theme) => { - if (!store.s.darkMode) { - applyTheme(theme ?? defaultLightTheme); - } - }); + watch(lightTheme, (theme) => { + if (!store.s.darkMode) { + applyTheme(theme ?? defaultLightTheme); + } + }); + } //#region Sync dark mode if (prefer.s.syncDeviceDarkMode) { @@ -203,17 +210,19 @@ export async function common(createVue: () => Promise>) { }); //#endregion - if (prefer.s.darkTheme && store.s.darkMode) { - if (miLocalStorage.getItem('themeId') !== prefer.s.darkTheme.id) applyTheme(prefer.s.darkTheme); - } else if (prefer.s.lightTheme && !store.s.darkMode) { - if (miLocalStorage.getItem('themeId') !== prefer.s.lightTheme.id) applyTheme(prefer.s.lightTheme); - } + if (!isSafeMode) { + if (prefer.s.darkTheme && store.s.darkMode) { + if (miLocalStorage.getItem('themeId') !== prefer.s.darkTheme.id) applyTheme(prefer.s.darkTheme); + } else if (prefer.s.lightTheme && !store.s.darkMode) { + if (miLocalStorage.getItem('themeId') !== prefer.s.lightTheme.id) applyTheme(prefer.s.lightTheme); + } - fetchInstanceMetaPromise.then(() => { - // TODO: instance.defaultLightTheme/instance.defaultDarkThemeが不正な形式だった場合のケア - if (prefer.s.lightTheme == null && instance.defaultLightTheme != null) prefer.commit('lightTheme', JSON.parse(instance.defaultLightTheme)); - if (prefer.s.darkTheme == null && instance.defaultDarkTheme != null) prefer.commit('darkTheme', JSON.parse(instance.defaultDarkTheme)); - }); + fetchInstanceMetaPromise.then(() => { + // TODO: instance.defaultLightTheme/instance.defaultDarkThemeが不正な形式だった場合のケア + if (prefer.s.lightTheme == null && instance.defaultLightTheme != null) prefer.commit('lightTheme', JSON.parse(instance.defaultLightTheme)); + if (prefer.s.darkTheme == null && instance.defaultDarkTheme != null) prefer.commit('darkTheme', JSON.parse(instance.defaultDarkTheme)); + }); + } watch(prefer.r.overridedDeviceKind, (kind) => { updateDeviceKind(kind); diff --git a/packages/frontend/src/boot/main-boot.ts b/packages/frontend/src/boot/main-boot.ts index ae4e0445db..46e690a55f 100644 --- a/packages/frontend/src/boot/main-boot.ts +++ b/packages/frontend/src/boot/main-boot.ts @@ -28,8 +28,8 @@ import { addCustomEmoji, removeCustomEmojis, updateCustomEmojis } from '@/custom import { prefer } from '@/preferences.js'; import { launchPlugins } from '@/plugin.js'; import { updateCurrentAccountPartial } from '@/accounts.js'; -import { signout } from '@/signout.js'; import { migrateOldSettings } from '@/pref-migrate.js'; +import { unisonReload } from '@/utility/unison-reload.js'; export async function mainBoot() { const { isClientUpdated, lastVersion } = await common(async () => { @@ -391,6 +391,8 @@ export async function mainBoot() { } // shortcut + let safemodeRequestCount = 0; + let safemodeRequestTimer: number | null = null; const keymap = { 'p|n': () => { if ($i == null) return; @@ -402,6 +404,24 @@ export async function mainBoot() { 's': () => { mainRouter.push('/search'); }, + 'g': { + callback: () => { + // mを5回押すとセーフモードに入る + safemodeRequestCount++; + if (safemodeRequestCount >= 5) { + miLocalStorage.setItem('isSafeMode', 'true'); + unisonReload(); + } else { + if (safemodeRequestTimer != null) { + window.clearTimeout(safemodeRequestTimer); + } + safemodeRequestTimer = window.setTimeout(() => { + safemodeRequestCount = 0; + }, 300); + } + }, + allowRepeat: true, + } } as const satisfies Keymap; window.document.addEventListener('keydown', makeHotkey(keymap), { passive: false }); diff --git a/packages/frontend/src/local-storage.ts b/packages/frontend/src/local-storage.ts index 78fba9f7b4..b64a8c5dd5 100644 --- a/packages/frontend/src/local-storage.ts +++ b/packages/frontend/src/local-storage.ts @@ -33,6 +33,7 @@ export type Keys = ( 'preferences' | 'latestPreferencesUpdate' | 'hidePreferencesRestoreSuggestion' | + 'isSafeMode' | `miux:${string}` | `ui:folder:${string}` | `themes:${string}` | // DEPRECATED diff --git a/packages/frontend/src/pages/settings/custom-css.vue b/packages/frontend/src/pages/settings/custom-css.vue index 9b0e04860e..83a188b2cb 100644 --- a/packages/frontend/src/pages/settings/custom-css.vue +++ b/packages/frontend/src/pages/settings/custom-css.vue @@ -7,6 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ i18n.ts.customCssWarn }} + {{ i18n.ts.customCssIsDisabledBecauseSafeMode }} + @@ -17,6 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only import { ref, watch, computed } from 'vue'; import MkCodeEditor from '@/components/MkCodeEditor.vue'; import FormInfo from '@/components/MkInfo.vue'; +import { isSafeMode } from '@@/js/config.js'; import * as os from '@/os.js'; import { unisonReload } from '@/utility/unison-reload.js'; import { i18n } from '@/i18n.js'; diff --git a/packages/frontend/src/pages/settings/plugin.vue b/packages/frontend/src/pages/settings/plugin.vue index 16d5947ad2..bff307ab7d 100644 --- a/packages/frontend/src/pages/settings/plugin.vue +++ b/packages/frontend/src/pages/settings/plugin.vue @@ -10,7 +10,9 @@ SPDX-License-Identifier: AGPL-3.0-only {{ i18n.ts._settings.pluginBanner }} - {{ i18n.ts._plugin.install }} + {{ i18n.ts.pluginsAreDisabledBecauseSafeMode }} + + {{ i18n.ts._plugin.install }} @@ -103,10 +105,12 @@ import MkCode from '@/components/MkCode.vue'; import MkFolder from '@/components/MkFolder.vue'; import MkKeyValue from '@/components/MkKeyValue.vue'; import MkFeatureBanner from '@/components/MkFeatureBanner.vue'; +import MkInfo from '@/components/MkInfo.vue'; import { i18n } from '@/i18n.js'; import { definePage } from '@/page.js'; import { changePluginActive, configPlugin, pluginLogs, uninstallPlugin, reloadPlugin } from '@/plugin.js'; import { prefer } from '@/preferences.js'; +import { isSafeMode } from '@@/js/config.js'; import * as os from '@/os.js'; const plugins = prefer.r.plugins; diff --git a/packages/frontend/src/pages/settings/theme.vue b/packages/frontend/src/pages/settings/theme.vue index accb1ccc55..d8ae356f6b 100644 --- a/packages/frontend/src/pages/settings/theme.vue +++ b/packages/frontend/src/pages/settings/theme.vue @@ -35,7 +35,9 @@ SPDX-License-Identifier: AGPL-3.0-only
-
+ {{ i18n.ts.themeIsDefaultBecauseSafeMode }} + +