From 3727bbc1bab94d5651c219cadcf3f069a3aa9907 Mon Sep 17 00:00:00 2001 From: Hakadao Date: Mon, 18 Dec 2023 00:41:48 +0800 Subject: [PATCH] refactor: use pinia && move app.use() to common-setup --- package.json | 1 + pnpm-lock.yaml | 21 +++++++++++++++- src/contentScripts/index.ts | 17 ++----------- src/logic/common-setup.ts | 18 ++++++++++++++ src/logic/storage.ts | 2 ++ src/store/index.ts | 48 +++++++++++++++++++++++++++++++++++++ 6 files changed, 91 insertions(+), 16 deletions(-) create mode 100644 src/store/index.ts diff --git a/package.json b/package.json index b5a0200b..7f9544bf 100644 --- a/package.json +++ b/package.json @@ -80,6 +80,7 @@ "mitt": "^3.0.1", "overlayscrollbars": "^2.4.5", "overlayscrollbars-vue": "^0.5.6", + "pinia": "^2.1.7", "qrcode.vue": "^3.4.1", "vue-i18n": "^9.7.0", "vue-toastification": "2.0.0-rc.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 615d849b..5805fcce 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -33,6 +33,7 @@ specifiers: npm-run-all: ^4.1.5 overlayscrollbars: ^2.4.5 overlayscrollbars-vue: ^0.5.6 + pinia: ^2.1.7 qrcode.vue: ^3.4.1 rimraf: ^3.0.2 sass: ^1.69.5 @@ -61,6 +62,7 @@ dependencies: mitt: 3.0.1 overlayscrollbars: 2.4.5 overlayscrollbars-vue: 0.5.6_f436029b4f07853148f09db59670b476 + pinia: 2.1.7_typescript@4.9.5+vue@3.3.8 qrcode.vue: 3.4.1_vue@3.3.8 vue-i18n: 9.7.0_vue@3.3.8 vue-toastification: 2.0.0-rc.5_vue@3.3.8 @@ -5634,6 +5636,24 @@ packages: engines: {node: '>=4'} dev: true + /pinia/2.1.7_typescript@4.9.5+vue@3.3.8: + resolution: {integrity: sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==} + peerDependencies: + '@vue/composition-api': ^1.4.0 + typescript: '>=4.4.4' + vue: ^2.6.14 || ^3.3.0 + peerDependenciesMeta: + '@vue/composition-api': + optional: true + typescript: + optional: true + dependencies: + '@vue/devtools-api': 6.5.1 + typescript: 4.9.5 + vue: 3.3.8_typescript@4.9.5 + vue-demi: 0.14.6_vue@3.3.8 + dev: false + /pino-abstract-transport/1.0.0: resolution: {integrity: sha512-c7vo5OpW4wIS42hUVcT5REsL8ZljsUfBjqV/e2sFxmFEFZiq1XLUp5EYLtuDH6PEHq9W1egWqRbnLUP5FuZmOA==} dependencies: @@ -7227,7 +7247,6 @@ packages: optional: true dependencies: vue: 3.3.8_typescript@4.9.5 - dev: true /vue-eslint-parser/9.3.1_eslint@8.54.0: resolution: {integrity: sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==} diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts index e1f4f201..57a39417 100644 --- a/src/contentScripts/index.ts +++ b/src/contentScripts/index.ts @@ -1,16 +1,12 @@ // import { onMessage } from 'webext-bridge' import { createApp } from 'vue' -import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue' -import 'overlayscrollbars/overlayscrollbars.css' + import 'uno.css' import '~/styles/index.ts' -import Toast, { POSITION } from 'vue-toastification' import App from './views/App.vue' import { setupApp } from '~/logic/common-setup' -import { i18n } from '~/utils/i18n' import { SVG_ICONS } from '~/utils/svgIcons' import { injectCSS } from '~/utils/main' -import 'vue-toastification/dist/index.css' import { settings } from '~/logic' const isFirefox: boolean = /Firefox/i.test(navigator.userAgent) @@ -156,15 +152,6 @@ function injectApp() { const app = createApp(App) setupApp(app) - app - .use(i18n) - .use(Toast, { - transition: 'Vue-Toastification__fade', - maxToasts: 20, - newestOnTop: true, - position: POSITION.TOP_CENTER, - }) - .component('OverlayScrollbarsComponent', OverlayScrollbarsComponent) - .mount(root) + app.mount(root) } } diff --git a/src/logic/common-setup.ts b/src/logic/common-setup.ts index 11361264..1c760522 100644 --- a/src/logic/common-setup.ts +++ b/src/logic/common-setup.ts @@ -1,5 +1,13 @@ import type { App } from 'vue' import { getCurrentContext } from 'webext-bridge' +import Toast, { POSITION } from 'vue-toastification' +import { createPinia } from 'pinia' +import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue' +import { i18n } from '~/utils/i18n' +import 'vue-toastification/dist/index.css' +import 'overlayscrollbars/overlayscrollbars.css' + +const pinia = createPinia() export function setupApp(app: App) { const context = getCurrentContext() @@ -13,4 +21,14 @@ export function setupApp(app: App) { // Here you can install additional plugins for all contexts: popup, options page and content-script. // example: app.use(i18n) // example excluding content-script context: if (context !== 'content-script') app.use(i18n) + app.use(i18n) + app + .use(Toast, { + transition: 'Vue-Toastification__fade', + maxToasts: 20, + newestOnTop: true, + position: POSITION.TOP_CENTER, + }) + app.use(pinia) + app.component('OverlayScrollbarsComponent', OverlayScrollbarsComponent) } diff --git a/src/logic/storage.ts b/src/logic/storage.ts index af96d4ae..583cfd17 100644 --- a/src/logic/storage.ts +++ b/src/logic/storage.ts @@ -42,3 +42,5 @@ export const settings = useStorageLocal('settings', ref({ useSearchPageModeOnHomePage: false, searchPageModeWallpaperFixed: false, }), { mergeDefaults: true }) + +// export const dockItems = useStorageLocal('dockItems', reactive<{order}>) diff --git a/src/store/index.ts b/src/store/index.ts new file mode 100644 index 00000000..25458e9d --- /dev/null +++ b/src/store/index.ts @@ -0,0 +1,48 @@ +import { defineStore } from 'pinia' +import { useStorageLocal } from '~/composables/useStorageLocal' +import { AppPage } from '~/enums/appEnums' +import type { Settings } from '~/models/settings' + +export const useSettingsStore = defineStore('settings', () => { + const settings = useStorageLocal('settings', reactive({ + language: '', + startupPage: AppPage.Home, + enableHorizontalScrolling: false, + openLinkInCurrentTab: false, + enableVideoCtrlBarOnVideoCard: false, + isShowTopbar: true, + autoHideTopbar: false, + dockPosition: 'right', + autoHideDock: false, + + theme: 'auto', + themeColor: '#00a1d6', + adaptToOtherPageStyles: true, + wallpaperMode: 'buildIn', + wallpaper: '', + enableWallpaperMasking: false, + wallpaperMaskOpacity: 0, + wallpaperBlurIntensity: 0, + + searchPageDarkenOnSearchFocus: true, + searchPageBlurredOnSearchFocus: false, + searchPageLogoColor: 'themeColor', + searchPageLogoGlow: true, + searchPageShowLogo: true, + searchPageSearchBarFocusCharacter: '', + individuallySetSearchPageWallpaper: false, + searchPageWallpaperMode: 'buildIn', + searchPageWallpaper: '', + searchPageEnableWallpaperMasking: false, + searchPageWallpaperMaskOpacity: 0, + searchPageWallpaperBlurIntensity: 0, + + recommendationMode: 'web', + useSearchPageModeOnHomePage: false, + searchPageModeWallpaperFixed: false, + }), { mergeDefaults: true }) + + function updateSettingsItem(key: string, value: any) { + (settings as any)[key] = value + } +})