feat: add more focus character options

* style: adjust alignment of content on the right side of setting items
2025-04-14 13:15:29 +00:00 · 2023-08-11 00:40:41 +08:00
parent de681dfb85
commit 5c11a334ca
7 changed files with 59 additions and 27 deletions
--- 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>

--- 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,
--- 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;">
--- 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"
--- 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;">
--- 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>
--- 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