diff --git a/package.json b/package.json index cfa82147..cccbf53c 100644 --- a/package.json +++ b/package.json @@ -81,6 +81,7 @@ "overlayscrollbars": "^2.0.0", "overlayscrollbars-vue": "^0.5.5", "qrcode.vue": "^3.4.1", - "vue-i18n": "^9.2.2" + "vue-i18n": "^9.2.2", + "vue-toastification": "^2.0.0-rc.5" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f71db224..1bc82baa 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -48,6 +48,7 @@ specifiers: vue: ^3.3.4 vue-demi: ^0.13.11 vue-i18n: ^9.2.2 + vue-toastification: ^2.0.0-rc.5 web-ext: ^7.6.2 webext-bridge: ^5.0.5 webextension-polyfill: ^0.10.0 @@ -61,6 +62,7 @@ dependencies: overlayscrollbars-vue: 0.5.5_b1fafd02612d7393176cab8eb5f579d8 qrcode.vue: 3.4.1_vue@3.3.4 vue-i18n: 9.2.2_vue@3.3.4 + vue-toastification: 2.0.0-rc.5_vue@3.3.4 devDependencies: '@antfu/eslint-config': 0.39.8_eslint@8.46.0+typescript@4.9.5 @@ -7264,6 +7266,14 @@ packages: vue: 3.3.4 dev: false + /vue-toastification/2.0.0-rc.5_vue@3.3.4: + resolution: {integrity: sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==} + peerDependencies: + vue: ^3.0.2 + dependencies: + vue: 3.3.4 + dev: false + /vue/3.3.4: resolution: {integrity: sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==} dependencies: diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml index 3d579914..3cec499f 100644 --- a/src/_locales/cmn-CN.yml +++ b/src/_locales/cmn-CN.yml @@ -21,6 +21,7 @@ common: performance_impact_warn: 这个功能可能会影响性能 enable: 启用 disable: 禁用 + refresh: 刷新 settings: title: 设置 @@ -115,6 +116,7 @@ settings: authorize_app_desc: | 授权使用后能在首页推送 bilibili App 端算法的推荐视频，授权 key 有效期约为一个月，过后记得重新授权获取 access key。 authorize_app_more_info_access_key: 关于 access key + scan_qrcode_desc: 使用 Bilibili 移动应用程序扫描此二维码，以授权访问 access key。 use_search_page_mode: 首页使用搜索页模式 settings_shared_with_the_search_page: 与搜索页共用的配置 settings_shared_with_the_search_page_desc: 这些设置都与搜索页共用 @@ -221,7 +223,7 @@ home: for_you: 个性推荐 following: 正在关注 trending: 热门视频 - ranking: 排行榜 + ranking: 排行 ranking: all: 全部 chinese_anime_related: 中国动画相关 diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml index c21671e5..a5dcfc35 100644 --- a/src/_locales/cmn-TW.yml +++ b/src/_locales/cmn-TW.yml @@ -21,6 +21,7 @@ common: performance_impact_warn: 這個功能可能會降低效能 enable: 啓用 disable: 停用 + refresh: 重新整理 settings: title: 設定 @@ -115,6 +116,7 @@ settings: authorize_app_desc: | 授權使用後能在首頁推送 bilibili 手機端推介演算法的影片，授權 key 的有效期約爲一個月，過了有效期後，請記得重新取得授權以取得 access key。 authorize_app_more_info_access_key: 關於 access key + scan_qrcode_desc: 使用 Bilibili 手機應用程式掃描這個QR碼，以授權訪問 access key。 use_search_page_mode: 首頁使用搜尋頁模式 settings_shared_with_the_search_page: 與搜尋頁共用的設定 settings_shared_with_the_search_page_desc: 這些設定都與搜尋頁共用 diff --git a/src/_locales/en.yml b/src/_locales/en.yml index 9bf092d6..eda1e51d 100644 --- a/src/_locales/en.yml +++ b/src/_locales/en.yml @@ -21,6 +21,7 @@ common: performance_impact_warn: This feature may cause performance *DECREASE* enable: Enable disable: Disable + refresh: Refresh settings: title: Settings @@ -117,6 +118,7 @@ settings: After authentication, you will receive the video recommendations based on the bilibili app recommendation algorithm. The access key is valid for about one month. After that, remember to re-authorize the BewlyBewly to use the access key. authorize_app_more_info_access_key: More information about the access key + scan_qrcode_desc: Use the Bilibili mobile app to scan this QR code in order to authorize the access key. use_search_page_mode: Use search page mode on homepage settings_shared_with_the_search_page: Settings shared with the search page settings_shared_with_the_search_page_desc: Those settings are used in common with the search page diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml index 4f974a43..035f6990 100644 --- a/src/_locales/jyut.yml +++ b/src/_locales/jyut.yml @@ -21,6 +21,7 @@ common: performance_impact_warn: 呢個功能可能會降低效能 enable: 打開 disable: 閂埋 + refresh: 重新整理 settings: title: 設定 @@ -115,6 +116,7 @@ settings: authorize_app_desc: | 授咗權嘅話，你就會收到基於 bilibili 手機版推介演算法所推介嘅內容，兼且授權 key 只有約一個月有效期，到期後記得要重新授權嚟取得存取 access key。 authorize_app_more_info_access_key: 關於 access key + scan_qrcode_desc: 用 Bilibili 流動應用程式去 scan 呢個 QR code 愛嚟授權訪問 access key。 use_search_page_mode: 主頁使用搵嘢頁模式 settings_shared_with_the_search_page: 同搵嘢頁共用嘅設定 settings_shared_with_the_search_page_desc: 呢啲設定都同搵嘢頁共用 @@ -188,7 +190,7 @@ topbar: noti_dropdown: replys: 覆我 mentions: 提我 - likes: 撳 like + likes: 畀我 like messages: 系统通知 chats: 傾偈室 moments_dropdown: diff --git a/src/components/Settings/components/ChildSettingsDialog.vue b/src/components/Settings/components/ChildSettingsDialog.vue index 7cff26b6..9ba917e2 100644 --- a/src/components/Settings/components/ChildSettingsDialog.vue +++ b/src/components/Settings/components/ChildSettingsDialog.vue @@ -2,6 +2,7 @@ defineProps<{ title: string desc?: string + center?: boolean }>() const emit = defineEmits(['close']) @@ -12,48 +13,57 @@ function handleClose() { + + diff --git a/src/components/Settings/components/Home.vue b/src/components/Settings/components/Home.vue index 90bdc506..25f01a75 100644 --- a/src/components/Settings/components/Home.vue +++ b/src/components/Settings/components/Home.vue @@ -2,18 +2,20 @@ import type { Ref } from 'vue' import { useI18n } from 'vue-i18n' import QRCodeVue from 'qrcode.vue' +import { useToast } from 'vue-toastification' import SearchPage from './SearchPage.vue' -import { getTVLoginQRCode, grantAccessKey, pollTVLoginQRCode, revokeAccessKey } from '~/utils/authProvider' +import { getTVLoginQRCode, pollTVLoginQRCode, revokeAccessKey } from '~/utils/authProvider' import { accessKey, settings } from '~/logic' const { t } = useI18n() +const toast = useToast() -const authorizeBtn = ref() as Ref const showSearchPageModeSharedSettings = ref(false) const showQRCodeDialog = ref(false) const loginQRCodeUrl = ref() const pollLoginQRCodeInterval = ref(null) const authCode = ref('') +const qrcodeMsg = ref('') const preventCloseSettings = inject('preventCloseSettings') as Ref @@ -25,15 +27,9 @@ onBeforeUnmount(() => { clearInterval(pollLoginQRCodeInterval.value) }) -function handleAuthorize() { - grantAccessKey(t, authorizeBtn.value) -} - -function handleRevoke() { - revokeAccessKey() -} - -async function handleOpenLoginQRCode() { +async function handleAuthorize() { + showQRCodeDialog.value = true + preventCloseSettings.value = true try { await setLoginQRCode() pollLoginQRCode() @@ -43,6 +39,10 @@ async function handleOpenLoginQRCode() { } } +function handleRevoke() { + revokeAccessKey() +} + async function setLoginQRCode() { const res = await getTVLoginQRCode() if (res.code === 0) { @@ -64,19 +64,27 @@ function pollLoginQRCode() { // 86038：二维码已失效 // 86039：二维码尚未确认 // 86090：二维码已扫码未确认 - + if (pollRes.code !== 0) + qrcodeMsg.value = pollRes.message if (pollRes.code === 0) { + showQRCodeDialog.value = false + preventCloseSettings.value = false accessKey.value = pollRes.data.access_token clearInterval(pollLoginQRCodeInterval.value) + toast.success('授权成功') } else if (pollRes.code === 86038) { await setLoginQRCode() } else if (pollRes.code === -3 || pollRes.code === -400 || pollRes.code === -404) { - // eslint-disable-next-line no-alert - alert(pollRes.message) + toast.error(pollRes.message) } - }, 5000) + }, 3000) +} + +function handleCloseQRCodeDialog() { + clearInterval(pollLoginQRCodeInterval.value) + showQRCodeDialog.value = false } function handleOpenSearchPageModeSharedSettings() { @@ -96,9 +104,6 @@ function handleCloseSearchPageModeSharedSettings() {
- + -
- -
-
- -
-
- -
+
+

{{ $t('settings.scan_qrcode_desc') }}

+ +
+
- + +

{{ qrcodeMsg }}

+ + +
@@ -190,6 +190,7 @@ function handleCloseSearchPageModeSharedSettings() {