From 91567b21da1fbb66b5b2435d3ac6ecc18e78732c Mon Sep 17 00:00:00 2001 From: Hakadao Date: Mon, 2 Oct 2023 04:24:01 +0800 Subject: [PATCH] feat: redesign settings panel --- src/_locales/cmn-CN.yml | 32 +- src/_locales/cmn-TW.yml | 31 +- src/_locales/en.yml | 39 ++- src/_locales/jyut.yml | 40 ++- src/components/Settings/Settings.vue | 6 +- .../Settings/components/Appearance.vue | 207 +++++++------ .../Settings/components/General.vue | 62 ++-- src/components/Settings/components/Home.vue | 126 ++++---- .../Settings/components/SearchPage.vue | 290 +++++++++--------- .../Settings/components/SettingsItem.vue | 13 +- .../Settings/components/SettingsItemGroup.vue | 2 +- .../Home/components/RecommendContent.vue | 4 +- 12 files changed, 461 insertions(+), 391 deletions(-) diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml index 05ca5ea5..bdc9a92f 100644 --- a/src/_locales/cmn-CN.yml +++ b/src/_locales/cmn-CN.yml @@ -30,6 +30,15 @@ settings: menu_home: 首页 menu_about: 关于 + # Settings group + group_common: 通用 + group_color: 颜色 + group_wallpaper: 背景图片 + group_logo: LOGO + group_search_bar: 搜索栏 + group_recommendation_mode: 推荐模式 + group_search_page_mode: 搜索页模式 + # General settings select_language: 界面语文 select_language_opt: @@ -38,18 +47,8 @@ settings: mandarin_tw: 官話 jyut: 廣東話 startup_page: 启动页 - recommendation_mode: 推荐模式 - recommendation_mode_desc: > - 如果您想使用 app 端的推荐算法，请先授权 BewlyBewly 使用 access key。 - authorize_app: 授权 BewlyBewly 使用 access key - authorize_app_desc: | - 授权使用后能在首页推送 bilibili App 端算法的推荐视频，授权 key 有效期约为一个月，过后记得重新授权获取 access key。 - authorize_app_more_info_access_key: 关于 access key topbar_visibility: 顶栏可见性 topbar_visibility_desc: 用于兼容 Bilibili Evolved 自定义顶栏 - btn: - authorize: 授权 - revoke: 取消授权 chk_box: show: 显示 hidden: 隐藏 @@ -98,6 +97,19 @@ settings: bg_blurs_when_the_search_bar_is_focused: 当搜索栏聚焦时背景模糊 choose_search_bar_focused_character: 选择搜索栏聚焦时出现的人物 individually_set_search_page_wallpaper: 单独设置搜索页背景 + + # Home settings + recommendation_mode: 推荐模式 + recommendation_mode_desc: > + 如果您想使用 app 端的推荐算法，请先授权 BewlyBewly 使用 access key。 + authorize_app: 授权 BewlyBewly 使用 access key + authorize_app_desc: | + 授权使用后能在首页推送 bilibili App 端算法的推荐视频，授权 key 有效期约为一个月，过后记得重新授权获取 access key。 + authorize_app_more_info_access_key: 关于 access key + btn: + authorize: 授权 + revoke: 取消授权 + auth: err_tip: 授权 access key 失败 plz_login_first: 请先登录 bilibili diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml index c71b0ae7..f414139c 100644 --- a/src/_locales/cmn-TW.yml +++ b/src/_locales/cmn-TW.yml @@ -30,6 +30,15 @@ settings: menu_search_page: 搜尋頁 menu_about: 關於 + # Settings group + group_common: 通用 + group_color: 顏色 + group_wallpaper: 背景圖片 + group_logo: LOGO + group_search_bar: 搜尋欄 + group_recommendation_mode: 推薦模式 + group_search_page_mode: 搜尋頁模式 + # General settings select_language: 介面語文 select_language_opt: @@ -38,18 +47,8 @@ settings: mandarin_tw: 官話 jyut: 廣東話 startup_page: 起始頁面 - recommendation_mode: 推薦模式 - recommendation_mode_desc: > - 如果您想要使用手機端的推薦演算法，請先授權 BewlyBewly 使用 access key。 - authorize_app: 授權 BewlyBewly 使用 access key - authorize_app_desc: | - 授權使用後能在首頁推送 bilibili 手機端推介演算法的影片，授權 key 的有效期約爲一個月，過了有效期後，請記得重新取得授權以取得 access key。 - authorize_app_more_info_access_key: 關於 access key topbar_visibility: 頂欄可視性 topbar_visibility_desc: 用於相容 Bilibili Evolved 自訂頂欄 - btn: - authorize: 授權 - revoke: 解除授權 chk_box: show: 顯示 hidden: 隱藏 @@ -99,6 +98,18 @@ settings: choose_search_bar_focused_character: 選擇搜尋欄聚焦時出現的人物 individually_set_search_page_wallpaper: 單獨設定搜尋頁背景 + # Home settings + recommendation_mode: 推薦模式 + recommendation_mode_desc: > + 如果您想要使用手機端的推薦演算法，請先授權 BewlyBewly 使用 access key。 + authorize_app: 授權 BewlyBewly 使用 access key + authorize_app_desc: | + 授權使用後能在首頁推送 bilibili 手機端推介演算法的影片，授權 key 的有效期約爲一個月，過了有效期後，請記得重新取得授權以取得 access key。 + authorize_app_more_info_access_key: 關於 access key + btn: + authorize: 授權 + revoke: 解除授權 + auth: err_tip: 無法授權 access key plz_login_first: 請先登入 bilibili diff --git a/src/_locales/en.yml b/src/_locales/en.yml index ce3c3f7e..8c752a13 100644 --- a/src/_locales/en.yml +++ b/src/_locales/en.yml @@ -30,6 +30,15 @@ settings: menu_home: Home menu_about: About + # Settings group + group_common: Common + group_color: Color + group_wallpaper: Wallpaper + group_logo: LOGO + group_search_bar: Search Bar + group_recommendation_mode: Recommendation Mode + group_search_page_mode: Search Page Mode + # General settings select_language: Language select_language_opt: @@ -38,19 +47,8 @@ settings: mandarin_tw: Mandarin - Traditional Chinese jyut: Cantonese startup_page: Startup page - recommendation_mode: Recommendation mode - recommendation_mode_desc: > - If you want to use the recommendation algorithm on the app, please ensure that you authorize the BewlyBewly to use the access key first. - authorize_app: Authorize the BewlyBewly to use the access key - authorize_app_desc: > - 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 topbar_visibility: Topbar visibility topbar_visibility_desc: Compatible with Bilibili Evolved customize topbar - btn: - authorize: Authorize - revoke: Revoke chk_box: show: Show hidden: Hidden @@ -82,8 +80,8 @@ settings: choose_ur_wallpaper: Choose your wallpaper image_url: Image URL image_url_hint: |- - URL examples: https://pic.imgdb.cn/item/638e1d63b1fccdcd36103811.jpg - https://pic.imgdb.cn/item/638e1d7ab1fccdcd36106346.jpg + URL examples: https://pic.imgdb.cn/item/638e1d63b1fccdcd36103811.jpg + https://pic.imgdb.cn/item/638e1d7ab1fccdcd36106346.jpg enable_wallpaper_masking: Enable wallpaper masking wallpaper_mask_opacity: Wallpaper masking opacity wallpaper_blur_intensity: Wallpaper blur intensity @@ -99,6 +97,20 @@ settings: bg_blurs_when_the_search_bar_is_focused: Background blurs when the search bar is focused choose_search_bar_focused_character: Choose the character that appears when the search bar is focused individually_set_search_page_wallpaper: Individually set search page wallpaper + + # Home settings + recommendation_mode: Recommendation mode + recommendation_mode_desc: > + If you want to use the recommendation algorithm on the app, please ensure that you authorize the BewlyBewly to use the access key first. + authorize_app: Authorize the BewlyBewly to use the access key + authorize_app_desc: > + 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 + btn: + authorize: Authorize + revoke: Revoke + auth: err_tip: Failed to grant access key plz_login_first: Please login to bilibili first @@ -236,4 +248,3 @@ watch_later: remove_watched_videos_confirm: |- Remove watched videos? This operation cannot be reversed. Are you sure you want to remove watched videos? - diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml index c4b66e41..b4bd3b37 100644 --- a/src/_locales/jyut.yml +++ b/src/_locales/jyut.yml @@ -30,6 +30,15 @@ settings: menu_search_page: 搵嘢頁 menu_about: 關於 + # Settings group + group_common: 通用 + group_color: 顏色 + group_wallpaper: 背景圖片 + group_logo: LOGO + group_search_bar: 搜尋欄 + group_recommendation_mode: 推介模式 + group_search_page_mode: 搵嘢頁模式 + # General settings select_language: 介面語文 select_language_opt: @@ -38,18 +47,8 @@ settings: mandarin_tw: 官話 jyut: 廣東話 startup_page: 開始頁面 - recommendation_mode: 推介模式 - recommendation_mode_desc: > - 若然你想用手機版嘅推介演算法，就要俾 BewlyBewly 批准使用存取 access key。 - authorize_app: 授權 BewlyBewly 使用 access key - authorize_app_desc: | - 授咗權嘅話，你就會收到基於 bilibili 手機版推介演算法所推介嘅內容，兼且授權 key 只有約一個月有效期，到期後記得要重新授權嚟取得存取 access key。 - authorize_app_more_info_access_key: 關於 access key topbar_visibility: 頂欄可視性 topbar_visibility_desc: 用於兼容 Bilibili Evolved 客製化頂欄 - btn: - authorize: 授權 - revoke: 解除授權 chk_box: show: 擺出嚟 hidden: 收埋 @@ -81,8 +80,8 @@ settings: choose_ur_wallpaper: 揀張背景 image_url: 圖片 URL image_url_hint: |- - URL 示例: https://pic.imgdb.cn/item/638e1d63b1fccdcd36103811.jpg - https://pic.imgdb.cn/item/638e1d7ab1fccdcd36106346.jpg + URL 示例: https://pic.imgdb.cn/item/638e1d63b1fccdcd36103811.jpg + https://pic.imgdb.cn/item/638e1d7ab1fccdcd36106346.jpg enable_wallpaper_masking: 使用背景遮蔽效果 wallpaper_mask_opacity: 背景遮蔽透明度調節 wallpaper_blur_intensity: 背景模糊強度調節 @@ -98,10 +97,23 @@ settings: bg_blurs_when_the_search_bar_is_focused: 搜尋欄聚焦嗰陣校矇背景 choose_search_bar_focused_character: 揀個喺搜尋欄聚焦嗰陣出現嘅人物 individually_set_search_page_wallpaper: 單獨設定搵嘢頁背景 + + # Home settings + recommendation_mode: 推介模式 + recommendation_mode_desc: > + 若然你想用手機版嘅推介演算法，就要俾 BewlyBewly 批准使用存取 access key。 + authorize_app: 授權 BewlyBewly 使用 access key + authorize_app_desc: | + 授咗權嘅話，你就會收到基於 bilibili 手機版推介演算法所推介嘅內容，兼且授權 key 只有約一個月有效期，到期後記得要重新授權嚟取得存取 access key。 + authorize_app_more_info_access_key: 關於 access key + btn: + authorize: 授權 + revoke: 解除授權 + auth: err_tip: 無法授權 access key plz_login_first: 唔該登入 bilibili 先 - receive_verified_url_err: 好似神神哋，試吓 refresh 個 page 之後試多次 + receive_verified_url_err: 好似神神哋，試吓 refresh 個 page 之後試多次 failed_to_get_accesskey: 攞唔度 access key topbar: sign_in: 登入 @@ -236,4 +248,4 @@ watch_later: remove_watched_videos: 剷走睇過啲片 remove_watched_videos_confirm: |- 係咪要剷走你睇過啲片呀？ - 噉做冇得返轉頭噃，你確定要剷走你睇過啲片？ \ No newline at end of file + 噉做冇得返轉頭噃，你確定要剷走你睇過啲片？ diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue index 5745f74a..44dd257a 100644 --- a/src/components/Settings/Settings.vue +++ b/src/components/Settings/Settings.vue @@ -84,7 +84,7 @@ function setCurrentTitle() {
@@ -140,7 +140,7 @@ function setCurrentTitle() {
-
+
-
+
diff --git a/src/components/Settings/components/Appearance.vue b/src/components/Settings/components/Appearance.vue index 84bc1a25..fa1c9bd7 100644 --- a/src/components/Settings/components/Appearance.vue +++ b/src/components/Settings/components/Appearance.vue @@ -79,119 +79,124 @@ function changeWallpaper(url: string) { diff --git a/src/components/Settings/components/SettingsItemGroup.vue b/src/components/Settings/components/SettingsItemGroup.vue index a85d8034..03000c26 100644 --- a/src/components/Settings/components/SettingsItemGroup.vue +++ b/src/components/Settings/components/SettingsItemGroup.vue @@ -7,7 +7,7 @@ defineProps<{