Merge branch 'hakadao:main' into code

src/components/Settings/Settings.vue

@@ -5,6 +5,7 @@ import General from './components/General.vue'
 import Appearance from './components/Appearance.vue'
 import SearchPage from './components/SearchPage.vue'
 import Home from './components/Home.vue'
+import Compatibility from './components/Compatibility.vue'
 import About from './components/About.vue'
 import type { MenuItem } from './types'
 import { MenuType } from './types'
@@ -14,7 +15,7 @@ const emit = defineEmits(['close'])
 
 const { t } = useI18n()
 
-const settingsMenu = { General, Appearance, SearchPage, Home, About }
+const settingsMenu = { General, Appearance, SearchPage, Home, Compatibility, About }
 const activatedMenuItem = ref<MenuType>(MenuType.General)
 const title = ref<string>(t('settings.title'))
 const preventCloseSettings = ref<boolean>(false)
@@ -56,6 +57,12 @@ const settingsMenuItems = computed((): MenuItem[] => {
       iconActivated: 'mingcute:home-5-fill',
       title: t('settings.menu_home'),
     },
+    {
+      value: MenuType.Compatibility,
+      icon: 'mingcute:polygon-line',
+      iconActivated: 'mingcute:polygon-fill',
+      title: 'Compatibility',
+    },
     {
       value: MenuType.About,
       icon: 'mingcute:information-line',

src/components/Settings/components/Compatibility.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { settings } from '~/logic'
+
+const bilibiliEvolvedThemeColor = computed(() => {
+  return getComputedStyle(document.querySelector('html') as HTMLElement).getPropertyValue('--theme-color').trim() ?? '#00a1d6'
+})
+
+function changeThemeColor(color: string) {
+  settings.value.themeColor = color
+}
+</script>
+
+<template>
+  <div>
+    <SettingsItemGroup :title="$t('settings.group_common')">
+      <SettingsItemGroup :title="$t('settings.group_color')">
+        <SettingsItem :title="$t('settings.adapt_to_other_page_styles')" :desc="$t('settings.adapt_to_other_page_styles_desc')">
+          <Radio v-model="settings.adaptToOtherPageStyles" />
+        </SettingsItem>
+      </SettingsItemGroup>
+    </SettingsItemGroup>
+
+    <SettingsItemGroup title="Bilibili Evolved">
+      <SettingsItemGroup :title="$t('settings.group_color')">
+        <SettingsItem :title="$t('settings.follow_bilibili_evolved_color')" :desc="$t('settings.follow_bilibili_evolved_color_desc')">
+          <div
+            w-20px h-20px rounded-8 cursor-pointer transition
+            duration-300 box-border
+            :style="{
+              background: bilibiliEvolvedThemeColor,
+              transform: bilibiliEvolvedThemeColor === settings.themeColor ? 'scale(1.3)' : 'scale(1)',
+              border: bilibiliEvolvedThemeColor === settings.themeColor ? '2px solid white' : '2px solid transparent',
+              boxShadow: bilibiliEvolvedThemeColor === settings.themeColor ? '0 0 0 1px var(--bew-border-color), var(--bew-shadow-1)' : 'none',
+            }"
+            @click="changeThemeColor(bilibiliEvolvedThemeColor)"
+          />
+        </SettingsItem>
+      </SettingsItemGroup>
+
+      <SettingsItemGroup :title="$t('settings.group_topbar')">
+        <SettingsItem :title="$t('settings.topbar_visibility')" :desc="$t('settings.topbar_visibility_desc')">
+          <Radio v-model="settings.isShowTopbar" :label="settings.isShowTopbar ? $t('settings.chk_box.show') : $t('settings.chk_box.hidden')" />
+        </SettingsItem>
+      </SettingsItemGroup>
+    </SettingsItemGroup>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

src/components/Settings/types.ts

@@ -3,6 +3,7 @@ export enum MenuType {
   Appearance = 'Appearance',
   SearchPage = 'SearchPage',
   Home = 'Home',
+  Compatibility = 'Compatibility',
   About = 'About',
 }
 

src/components/Topbar/components/MomentsPop.vue

@@ -246,13 +246,6 @@ function pushItemIntoMoments(item: any) {
 
 function toggleWatchLater(aid: number) {
   const isInWatchLater = addedWatchLaterList.includes(aid)
-  console.log(isInWatchLater)
-
-  // if (isInWatchLater)
-  //   Object.assign(addedWatchLaterList, addedWatchLaterList.filter(item => item !== aid))
-
-  // else
-  //   addedWatchLaterList.push(aid)
 
   if (!isInWatchLater) {
     browser.runtime.sendMessage({
@@ -272,8 +265,10 @@ function toggleWatchLater(aid: number) {
       csrf: getCSRF(),
     })
       .then((res) => {
-        if (res.code === 0)
+        if (res.code === 0) {
+          addedWatchLaterList.length = 0
           Object.assign(addedWatchLaterList, addedWatchLaterList.filter(item => item !== aid))
+        }
       })
   }
 }
@@ -440,7 +435,7 @@ function toggleWatchLater(aid: number) {
                   pos="absolute" duration-300 bg="black opacity-60"
                   rounded="$bew-radius-half" p-1
                   z-1
-                  @click.prevent="toggleWatchLater(addedWatchLaterList.includes(moment.aid ?? 0), moment.aid ?? 0)"
+                  @click.prevent="toggleWatchLater(moment.aid ?? 0)"
                 >
                   <Tooltip v-if="!addedWatchLaterList.includes(moment.aid ?? 0)" :content="$t('common.save_to_watch_later')" placement="bottom" type="dark">
                     <mingcute:carplay-line />