fix: watch later pop invalid rounded corners (#505)

* fix: watch later pop invalid rounded corners

* chore: revert to attr mode

---------

Co-authored-by: Hakadao <a578457889743@gmail.com>

src/components/Settings/Settings.vue

@@ -16,6 +16,7 @@ const settingsMenu = {
   [MenuType.SearchPage]: defineAsyncComponent(() => import('./components/SearchPage.vue')),
   [MenuType.Home]: defineAsyncComponent(() => import('./components/Home.vue')),
   [MenuType.Compatibility]: defineAsyncComponent(() => import('./components/Compatibility.vue')),
+  // [MenuType.BilibiliSettings]: defineAsyncComponent(() => import('./components/BilibiliSettings.vue')),
   [MenuType.About]: defineAsyncComponent(() => import('./components/About.vue')),
 }
 const activatedMenuItem = ref<MenuType>(MenuType.General)
@@ -65,6 +66,12 @@ const settingsMenuItems = computed((): MenuItem[] => {
       iconActivated: 'mingcute:polygon-fill',
       title: t('settings.menu_compatibility'),
     },
+    // {
+    //   value: MenuType.BilibiliSettings,
+    //   icon: 'ant-design:bilibili-outlined',
+    //   iconActivated: 'ant-design:bilibili-outlined',
+    //   title: 'Bilibili',
+    // },
     {
       value: MenuType.About,
       icon: 'mingcute:information-line',

src/components/Settings/components/BilibiliSettings.vue

@@ -0,0 +1,20 @@
+<template>
+  <div flex="~ justify-between gap-4">
+    <aside>
+      <ul flex="~ col gap-1" ml--4>
+        <li p="x-4 y-2" bg="hover:$bew-fill-2" rounded="$bew-radius">
+          home page
+        </li>
+        <li p="x-4 y-2" bg="hover:$bew-fill-2" rounded="$bew-radius">
+          video page
+        </li>
+        <li p="x-4 y-2" bg="hover:$bew-fill-2" rounded="$bew-radius">
+          moments page
+        </li>
+      </ul>
+    </aside>
+    <main flex-1>
+      <span text="8xl">WIP...</span>
+    </main>
+  </div>
+</template>

src/components/Settings/types.ts

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

src/components/TopBar/components/WatchLaterPop.vue

@@ -49,11 +49,12 @@ function getAllWatchLaterList() {
 
 <template>
   <div
-    bg="$bew-elevated-solid-1"
     w="380px"
+    shadow="$bew-shadow-2"
+    bg="$bew-elevated-solid-1"
     rounded="$bew-radius"
     pos="relative"
-    style="box-shadow: var(--bew-shadow-2)"
+    of="hidden"
   >
     <!-- top bar -->
     <header