From 32ab4574dd5485f70a7660b79b934fdacb4de83a Mon Sep 17 00:00:00 2001 From: Astrian Zheng Date: Mon, 26 May 2025 14:50:53 +1000 Subject: [PATCH] =?UTF-8?q?feat(=E5=81=8F=E5=A5=BD=E8=AE=BE=E7=BD=AE):=20?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B5=8F=E8=A7=88=E5=99=A8=E6=89=A9=E5=B1=95?= =?UTF-8?q?=E5=AD=98=E5=82=A8=E6=94=AF=E6=8C=81=E5=8F=8A=E6=97=B6=E9=97=B4?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=81=8F=E5=A5=BD=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 添加 webextension-polyfill 依赖以支持浏览器扩展存储 API 创建 usePreferences store 管理用户偏好设置 将 Playroom 页面的时间显示切换功能迁移至偏好设置 store --- package-lock.json | 17 ++++++++++++- package.json | 4 ++- src/pages/Playroom.vue | 11 +++++---- src/stores/usePreferences.ts | 47 ++++++++++++++++++++++++++++++++++++ 4 files changed, 72 insertions(+), 7 deletions(-) create mode 100644 src/stores/usePreferences.ts diff --git a/package-lock.json b/package-lock.json index ad8e931..97da531 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,11 +14,13 @@ "pinia": "^3.0.2", "tailwindcss": "^4.1.7", "vue": "^3.5.13", - "vue-router": "^4.5.1" + "vue-router": "^4.5.1", + "webextension-polyfill": "^0.12.0" }, "devDependencies": { "@biomejs/biome": "1.9.4", "@types/node": "^22.15.21", + "@types/webextension-polyfill": "^0.12.3", "@vitejs/plugin-vue": "^5.2.1", "typescript": "~5.6.2", "vite": "^6.0.1", @@ -1246,6 +1248,13 @@ "undici-types": "~6.21.0" } }, + "node_modules/@types/webextension-polyfill": { + "version": "0.12.3", + "resolved": "https://registry.npmjs.org/@types/webextension-polyfill/-/webextension-polyfill-0.12.3.tgz", + "integrity": "sha512-F58aDVSeN/MjUGazXo/cPsmR76EvqQhQ1v4x23hFjUX0cfAJYE+JBWwiOGW36/VJGGxoH74sVlRIF3z7SJCKyg==", + "dev": true, + "license": "MIT" + }, "node_modules/@vitejs/plugin-vue": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz", @@ -2647,6 +2656,12 @@ "typescript": ">=5.0.0" } }, + "node_modules/webextension-polyfill": { + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/webextension-polyfill/-/webextension-polyfill-0.12.0.tgz", + "integrity": "sha512-97TBmpoWJEE+3nFBQ4VocyCdLKfw54rFaJ6EVQYLBCXqCIpLSZkwGgASpv4oPt9gdKCJ80RJlcmNzNn008Ag6Q==", + "license": "MPL-2.0" + }, "node_modules/yallist": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz", diff --git a/package.json b/package.json index e933d4e..ae3de31 100644 --- a/package.json +++ b/package.json @@ -19,11 +19,13 @@ "pinia": "^3.0.2", "tailwindcss": "^4.1.7", "vue": "^3.5.13", - "vue-router": "^4.5.1" + "vue-router": "^4.5.1", + "webextension-polyfill": "^0.12.0" }, "devDependencies": { "@biomejs/biome": "1.9.4", "@types/node": "^22.15.21", + "@types/webextension-polyfill": "^0.12.3", "@vitejs/plugin-vue": "^5.2.1", "typescript": "~5.6.2", "vite": "^6.0.1", diff --git a/src/pages/Playroom.vue b/src/pages/Playroom.vue index 2f471d8..c87be26 100644 --- a/src/pages/Playroom.vue +++ b/src/pages/Playroom.vue @@ -6,6 +6,7 @@ import { Draggable } from "gsap/Draggable" import { onMounted } from 'vue' import { useTemplateRef } from 'vue' import { ref, watch } from 'vue' +import { usePreferences } from '../stores/usePreferences' import RewindIcon from '../assets/icons/rewind.vue' import ForwardIcon from '../assets/icons/forward.vue' @@ -23,6 +24,7 @@ import CycleTwoArrowsWithNumOneIcon from '../assets/icons/cycletwoarrowswithnumo import SpeakerIcon from '../assets/icons/speaker.vue' const playQueueStore = usePlayQueueStore() +const preferences = usePreferences() gsap.registerPlugin(Draggable) const progressBarThumb = useTemplateRef('progressBarThumb') @@ -30,10 +32,9 @@ const progressBarContainer = useTemplateRef('progressBarContainer') const playQueueDialogContainer = useTemplateRef('playQueueDialogContainer') const playQueueDialog = useTemplateRef('playQueueDialog') -const displayTimeLeft = ref(false) const presentQueueListDialog = ref(false) -onMounted(() => { +onMounted(async () => { Draggable.create(progressBarThumb.value, { type: 'x', bounds: progressBarContainer.value, @@ -204,10 +205,10 @@ function getCurrentTrack() {
-
diff --git a/src/stores/usePreferences.ts b/src/stores/usePreferences.ts new file mode 100644 index 0000000..7dbde17 --- /dev/null +++ b/src/stores/usePreferences.ts @@ -0,0 +1,47 @@ +import { defineStore } from "pinia" +import { ref, watch } from "vue" +import browser from 'webextension-polyfill' + +export const usePreferences = defineStore('preferences', () => { + const displayTimeLeft = ref(false) // 设置默认值 + const isLoaded = ref(false) // 添加加载状态 + + // 异步初始化函数 + const initializePreferences = async () => { + try { + // 指定默认值对象 + const result = await browser.storage.local.get({ + displayTimeLeft: false // 如果键不存在，使用这个默认值 + }) + + displayTimeLeft.value = result.displayTimeLeft as boolean // 现在类型是安全的 + isLoaded.value = true + } catch (error) { + console.error('加载偏好设置失败:', error) + displayTimeLeft.value = false + isLoaded.value = true + } + } + + // 监听变化并保存 + watch(displayTimeLeft, async (val) => { + if (isLoaded.value) { // 只有在初始化完成后才保存 + try { + await browser.storage.local.set({ + displayTimeLeft: val + }) + } catch (error) { + console.error('保存偏好设置失败:', error) + } + } + }) + + // 立即初始化 + initializePreferences() + + return { + displayTimeLeft, + isLoaded, + initializePreferences + } +}) \ No newline at end of file