From 5c11a334cafda2ba37e18c277170490c32d22eac Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Fri, 11 Aug 2023 00:40:41 +0800
Subject: [PATCH] feat: add more focus character options * style: adjust
 alignment of content on the right side of setting items

---
 src/components/Radio.vue                      |  2 +-
 src/components/SearchBar/SearchBar.vue        |  2 +-
 .../Settings/components/Appearance.vue        |  6 ++--
 src/components/Settings/components/Home.vue   |  4 +--
 .../Settings/components/SearchPage.vue        | 36 +++++++++++++++----
 .../Settings/components/SettingItem.vue       |  7 ++--
 src/components/Topbar/Topbar.vue              | 29 +++++++++------
 7 files changed, 59 insertions(+), 27 deletions(-)

diff --git a/src/components/Radio.vue b/src/components/Radio.vue
index 784dd59a..a2d50dec 100644
--- a/src/components/Radio.vue
+++ b/src/components/Radio.vue
@@ -19,6 +19,7 @@ onMounted(() => {
 
 <template>
   <label cursor="pointer" pointer="auto" flex items-center gap-3>
+    <span>{{ label }}</span>
     <input v-model="modelValue" type="checkbox" hidden>
     <span
       inline-block w="$b-button-width" h="$b-button-height" bg="$bew-fill-1" rounded="[calc(var(--b-button-height)/2)]"
@@ -28,7 +29,6 @@ onMounted(() => {
       after:border="size-$b-border-width color-$bew-border-color"
       after:pos="absolute top-[calc(0px-var(--b-border-width)/2)]"
     />
-    <span>{{ label }}</span>
   </label>
 </template>
 
diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index 64d39a51..3e88c3e1 100644
--- a/src/components/SearchBar/SearchBar.vue
+++ b/src/components/SearchBar/SearchBar.vue
@@ -236,7 +236,7 @@ function handleKeyDown() {
 <style lang="scss" scoped>
 .result-list-enter-active,
 .result-list-leave-active {
-  --at-apply: transition-all duration-300
+  --at-apply: transition-all duration-300 ease-in-out;
 }
 
 .result-list-enter-from,
diff --git a/src/components/Settings/components/Appearance.vue b/src/components/Settings/components/Appearance.vue
index 8fd578f9..ce26d697 100644
--- a/src/components/Settings/components/Appearance.vue
+++ b/src/components/Settings/components/Appearance.vue
@@ -86,7 +86,7 @@ function changeWallpaper(url: string) {
     />
   </SettingItem>
   <SettingItem :title="$t('settings.wallpaper_mode')" :desc="$t('settings.wallpaper_mode_desc')">
-    <div flex rounded="$bew-radius" bg="$bew-fill-1" p-1>
+    <div w-full flex rounded="$bew-radius" bg="$bew-fill-1" p-1>
       <div
         flex-1 py-1 cursor-pointer text-center rounded="$bew-radius"
         :style="{
@@ -114,7 +114,7 @@ function changeWallpaper(url: string) {
     <div grid="~ xl:cols-4 lg:cols-3 cols-2  gap-4">
       <picture
         aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
-        un-border="4 transparent" pointer-cursor
+        un-border="4 transparent" cursor-pointer
         grid place-items-center
         :class="{ 'selected-wallpaper': settings.wallpaper === '' }"
         @click="changeWallpaper('')"
@@ -137,7 +137,7 @@ function changeWallpaper(url: string) {
     <div flex items-center gap-4>
       <picture
         aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
-        un-border="4 transparent" pointer-cursor shrink-0
+        un-border="4 transparent" cursor-pointer shrink-0
         w="xl:1/4 lg:1/3 md:1/2"
       >
         <img v-if="settings.wallpaper" :src="settings.wallpaper" alt="" w-full h-full object-cover onerror="this.style.display='none'; this.onerror=null;">
diff --git a/src/components/Settings/components/Home.vue b/src/components/Settings/components/Home.vue
index a83e2ecd..b4aae12a 100644
--- a/src/components/Settings/components/Home.vue
+++ b/src/components/Settings/components/Home.vue
@@ -19,7 +19,7 @@ function handleRevoke() {
 
 <template>
   <SettingItem :title="$t('settings.recommendation_mode')" :desc="$t('settings.recommendation_mode_desc')">
-    <div flex rounded="$bew-radius" bg="$bew-fill-1" p-1>
+    <div w-full flex rounded="$bew-radius" bg="$bew-fill-1" p-1>
       <div
         flex-1 py-1 cursor-pointer text-center rounded="$bew-radius"
         :style="{
@@ -52,7 +52,7 @@ function handleRevoke() {
       >{{ $t('settings.authorize_app_more_info_access_key') }}</a>
     </template>
 
-    <div>
+    <div w-full>
       <button
         v-if="!accessKey"
         ref="authorizeBtn"
diff --git a/src/components/Settings/components/SearchPage.vue b/src/components/Settings/components/SearchPage.vue
index 11d0307c..bf9db78f 100644
--- a/src/components/Settings/components/SearchPage.vue
+++ b/src/components/Settings/components/SearchPage.vue
@@ -3,8 +3,10 @@ import { settings } from '~/logic'
 
 const searchBarFocusCharacters = computed<{ name: string; url: string }[]>(() => {
   return [
+    { name: '22 娘', url: 'https://pic.imgdb.cn/item/64d4f8891ddac507cc772ce5.png' },
     { name: '33 娘', url: 'https://cdn.jsdelivr.net/gh/hakadao/bilibili-simple-home@master/img/searchBar_33_2.png' },
-    { name: '33 娘', url: 'https://cdn.jsdelivr.net/gh/hakadao/bilibili-simple-home@master/img/searchBar_33.png' },
+    { name: '22 娘', url: 'https://pic.imgdb.cn/item/64d4fb391ddac507cc7ec5ae.png' },
+    { name: '33 娘', url: 'https://pic.imgdb.cn/item/64d4fd251ddac507cc8458fa.png' },
   ]
 })
 const wallpapers = computed<Array<{ name: string; url: string; thumbnail: string }>>(() => {
@@ -50,7 +52,7 @@ function changeWallpaper(url: string) {
 
 <template>
   <SettingItem :title="$t('settings.logo_color')">
-    <div flex rounded="$bew-radius" bg="$bew-fill-1" p-1>
+    <div w-full flex rounded="$bew-radius" bg="$bew-fill-1" p-1>
       <div
         flex="1 ~" items-center justify-center py-1 cursor-pointer text-center rounded="$bew-radius"
         :style="{
@@ -83,10 +85,10 @@ function changeWallpaper(url: string) {
   </SettingItem>
 
   <SettingItem title="Choose the character displayed when the search bar is focused" next-line>
-    <div grid="~ xl:cols-8 lg:cols-6 cols-4 gap-4">
+    <div grid="~ xl:cols-8 lg:cols-6 cols-5 gap-4">
       <picture
         aspect-square bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
-        un-border="4 transparent" pointer-cursor
+        un-border="4 transparent" cursor-pointer
         grid place-items-center
         :class="{ 'selected-wallpaper': settings.searchPageSearchBarFocusCharacter === '' }"
         @click="changeSearchBarFocusCharacter('')"
@@ -104,6 +106,26 @@ function changeWallpaper(url: string) {
         </picture>
       </Tooltip>
     </div>
+    <!-- <div flex items-center gap-4>
+      <div>
+        <picture
+          aspect-square bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
+          un-border="4 transparent" cursor-pointer shrink-0
+          w="xl:1/8 lg:1/6 md:1/5" p--4
+        >
+          <img
+            v-if="settings.searchPageSearchBarFocusCharacter" :src="settings.searchPageSearchBarFocusCharacter" alt="" w-full h-full object-contain
+            onerror="this.style.display='none'; this.onerror=null;"
+          >
+        </picture>
+      </div>
+      <div>
+        <Input v-model:value="settings.searchPageSearchBarFocusCharacter" w-full />
+        <p color="sm $bew-text-3" mt-2>
+          {{ $t('settings.image_url_hint') }}
+        </p>
+      </div>
+    </div> -->
   </SettingItem>
 
   <SettingItem :title="$t('settings.individually_set_search_page_wallpaper')">
@@ -115,7 +137,7 @@ function changeWallpaper(url: string) {
   </SettingItem>
   <template v-if="settings.individuallySetSearchPageWallpaper">
     <SettingItem :title="$t('settings.wallpaper_mode')" :desc="$t('settings.wallpaper_mode_desc')">
-      <div flex rounded="$bew-radius" bg="$bew-fill-1" p-1>
+      <div w-full flex rounded="$bew-radius" bg="$bew-fill-1" p-1>
         <div
           flex-1 py-1 cursor-pointer text-center rounded="$bew-radius"
           :style="{
@@ -143,7 +165,7 @@ function changeWallpaper(url: string) {
       <div grid="~ xl:cols-4 lg:cols-3 cols-2  gap-4">
         <picture
           aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
-          un-border="4 transparent" pointer-cursor
+          un-border="4 transparent" cursor-pointer
           grid place-items-center
           :class="{ 'selected-wallpaper': settings.searchPageWallpaper === '' }"
           @click="changeWallpaper('')"
@@ -166,7 +188,7 @@ function changeWallpaper(url: string) {
       <div flex items-center gap-4>
         <picture
           aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
-          un-border="4 transparent" pointer-cursor shrink-0
+          un-border="4 transparent" cursor-pointer shrink-0
           w="xl:1/4 lg:1/3 md:1/2"
         >
           <img v-if="settings.searchPageWallpaper" :src="settings.searchPageWallpaper" alt="" w-full h-full object-cover onerror="this.style.display='none'; this.onerror=null;">
diff --git a/src/components/Settings/components/SettingItem.vue b/src/components/Settings/components/SettingItem.vue
index 46e7121e..bb0bda77 100644
--- a/src/components/Settings/components/SettingItem.vue
+++ b/src/components/Settings/components/SettingItem.vue
@@ -9,7 +9,7 @@ defineProps<{
 <template>
   <div>
     <div flex="~ gap-4" justify-betwee items-center py-2 text-base>
-      <div w="5/7">
+      <div :w="nextLine ? 'full' : '5/7'">
         {{ title }}
         <br>
         <span text="sm $bew-text-3">
@@ -19,7 +19,7 @@ defineProps<{
         </span>
       </div>
 
-      <div v-if="!nextLine" w="2/7">
+      <div v-if="!nextLine" w="2/7" class="right-content">
         <slot />
       </div>
     </div>
@@ -28,4 +28,7 @@ defineProps<{
 </template>
 
 <style lang="scss" scoped>
+:deep(.right-content > *) {
+  --at-apply: float-right clear-both;
+}
 </style>
diff --git a/src/components/Topbar/Topbar.vue b/src/components/Topbar/Topbar.vue
index 9a119310..4a219d1c 100644
--- a/src/components/Topbar/Topbar.vue
+++ b/src/components/Topbar/Topbar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Ref, UnwrapNestedRefs } from 'vue'
-import { Transition, onMounted, watch } from 'vue'
+import { onMounted, watch } from 'vue'
 import type { UnReadDm, UnReadMessage, UserInfo } from './types'
 import { updateInterval } from './notify'
 import { getUserID } from '~/utils/main'
@@ -127,24 +127,31 @@ async function getUnreadMessageCount() {
     res = await browser.runtime.sendMessage({
       contentScriptQuery: 'getUnreadMsg',
     })
-    Object.assign(unReadMessage, res.data)
+    if (res.code === 0)
+      Object.assign(unReadMessage, res.data)
 
     res = await browser.runtime.sendMessage({
       contentScriptQuery: 'getUnreadDm',
     })
-    Object.assign(unReadDm, res.data)
+    if (res.code === 0)
+      Object.assign(unReadDm, res.data)
 
     unReadMessageCount.value = 0
 
-    Object.keys(unReadMessage).forEach((key) => {
-      if (key !== 'up') {
-        unReadMessageCount.value
+    if (Object.keys(unReadMessage).length > 0) {
+      Object.keys(unReadMessage).forEach((key) => {
+        if (key !== 'up') {
+          unReadMessageCount.value
           += typeof unReadMessage[key as keyof typeof unReadMessage] === 'number' ? unReadMessage[key as keyof typeof unReadMessage] : 0
-      }
-    })
-    Object.keys(unReadDm).forEach((key) => {
-      unReadMessageCount.value += typeof unReadDm[key as keyof typeof unReadDm] === 'number' ? unReadDm[key as keyof typeof unReadDm] : 0
-    })
+        }
+      })
+    }
+
+    if (Object.keys(unReadDm).length > 0) {
+      Object.keys(unReadDm).forEach((key) => {
+        unReadMessageCount.value += typeof unReadDm[key as keyof typeof unReadDm] === 'number' ? unReadDm[key as keyof typeof unReadDm] : 0
+      })
+    }
   }
   catch (error) {
     unReadMessageCount.value = 0