From 73dc752dc7f5183706fcc4bbddd0ab487338bc93 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Fri, 21 Jun 2024 00:41:20 +0800
Subject: [PATCH] fix(Settings): two wallpaper group in search page settings

---
 .../Settings/components/ChangeWallpaper.vue   | 288 +++++++++---------
 .../Settings/components/SearchPage.vue        |  11 +-
 2 files changed, 150 insertions(+), 149 deletions(-)

diff --git a/src/components/Settings/components/ChangeWallpaper.vue b/src/components/Settings/components/ChangeWallpaper.vue
index 154c466b..abb2b560 100644
--- a/src/components/Settings/components/ChangeWallpaper.vue
+++ b/src/components/Settings/components/ChangeWallpaper.vue
@@ -80,159 +80,169 @@ function handleRemoveCustomWallpaper() {
 
 <template>
   <SettingsItemGroup :title="$t('settings.group_wallpaper')">
-    <SettingsItem :title="$t('settings.wallpaper_mode')" :desc="$t('settings.wallpaper_mode_desc')">
-      <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="{
-            background: isBuildInWallpaper ? 'var(--bew-theme-color)' : '',
-            color: isBuildInWallpaper ? 'white' : '',
-          }"
-          @click="changeWallpaperType('buildIn')"
-        >
-          {{ $t('settings.wallpaper_mode_opt.build_in') }}
-        </div>
-        <div
-          flex-1 py-1 cursor-pointer text-center rounded="$bew-radius"
-          :style="{
-            background: !isBuildInWallpaper ? 'var(--bew-theme-color)' : '',
-            color: !isBuildInWallpaper ? 'white' : '',
-          }"
-          @click="changeWallpaperType('byUrl')"
-        >
-          {{ $t('settings.wallpaper_mode_opt.by_url') }}
-        </div>
-      </div>
+    <SettingsItem v-if="!isGlobal" :title="$t('settings.individually_set_search_page_wallpaper')">
+      <template #desc>
+        <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
+      </template>
+
+      <Radio v-model="settings.individuallySetSearchPageWallpaper" />
     </SettingsItem>
 
-    <SettingsItem v-if="isBuildInWallpaper" :title="$t('settings.choose_ur_wallpaper')" next-line>
-      <div grid="~ xl:cols-5 lg:cols-4 cols-3 gap-4">
-        <picture
-          aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
-          un-border="4 transparent" cursor-pointer
-          grid place-items-center
-          :class="{ 'selected-wallpaper': isGlobal ? settings.wallpaper === '' : settings.searchPageWallpaper === '' }"
-          @click="changeWallpaper('')"
-        >
-          <div i-tabler:photo-off text="3xl $bew-text-3" />
-        </picture>
-
-        <!-- Upload wallpaper input -->
-        <input
-          ref="uploadWallpaperRef" type="file" accept="image/*" hidden
-          @change="handleUploadWallpaper"
-        >
-
-        <Tooltip placement="top" :content="settings.customizeWallpaper?.name || ''" aspect-video>
-          <picture
-            class="group"
-            :class="{ 'selected-wallpaper': isGlobal
-              ? settings.wallpaper === settings.customizeWallpaper?.url
-              : settings.searchPageWallpaper === settings.customizeWallpaper?.url }"
-            aspect-video bg="$bew-theme-color-20" rounded="$bew-radius" overflow-hidden
-            un-border="4 transparent" w-full
-            flex="~ items-center justify-center"
-            @click="changeWallpaper(settings.customizeWallpaper?.url || '')"
+    <template v-if="isGlobal || (settings.individuallySetSearchPageWallpaper && !isGlobal)">
+      <SettingsItem :title="$t('settings.wallpaper_mode')" :desc="$t('settings.wallpaper_mode_desc')">
+        <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="{
+              background: isBuildInWallpaper ? 'var(--bew-theme-color)' : '',
+              color: isBuildInWallpaper ? 'white' : '',
+            }"
+            @click="changeWallpaperType('buildIn')"
           >
-            <div
-              v-if="settings.customizeWallpaper"
-              class="opacity-0 group-hover:opacity-100" duration-300
-              pos="absolute top-4px right-4px" z-1 text="14px" flex="~ gap-1"
-            >
-              <button
-                bg="$bew-content-1" rounded-full w-28px h-28px
-                grid place-items-center
-                @click="handleUploadWallpaper"
-              >
-                <i i-mingcute:edit-2-line />
-              </button>
-              <button
-                bg="$bew-content-1" rounded-full w-28px h-28px
-                grid place-items-center
-                @click="handleRemoveCustomWallpaper"
-              >
-                <i i-mingcute:delete-2-line />
-              </button>
-            </div>
-            <div
-              v-if="!settings.customizeWallpaper"
-              absolute w-full h-full grid place-items-center
-              @click="handleUploadWallpaper"
-            >
-              <div
-                i-tabler:photo-up
-                text="3xl $bew-theme-color"
-              />
-            </div>
-            <img
-              v-else
-              :src="settings.customizeWallpaper.thumbnail || settings.customizeWallpaper.url"
-              :alt="settings.customizeWallpaper.name"
-              w-full h-full object-cover
-            >
-          </picture>
-        </Tooltip>
+            {{ $t('settings.wallpaper_mode_opt.build_in') }}
+          </div>
+          <div
+            flex-1 py-1 cursor-pointer text-center rounded="$bew-radius"
+            :style="{
+              background: !isBuildInWallpaper ? 'var(--bew-theme-color)' : '',
+              color: !isBuildInWallpaper ? 'white' : '',
+            }"
+            @click="changeWallpaperType('byUrl')"
+          >
+            {{ $t('settings.wallpaper_mode_opt.by_url') }}
+          </div>
+        </div>
+      </SettingsItem>
 
-        <Tooltip v-for="item in WALLPAPERS" :key="item.url" placement="top" :content="item.name" aspect-video>
+      <SettingsItem v-if="isBuildInWallpaper" :title="$t('settings.choose_ur_wallpaper')" next-line>
+        <div grid="~ xl:cols-5 lg:cols-4 cols-3 gap-4">
           <picture
             aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
-            un-border="4 transparent" w-full
-            :class="{ 'selected-wallpaper': isGlobal ? settings.wallpaper === item.url : settings.searchPageWallpaper === item.url }"
-            @click="changeWallpaper(item.url)"
+            un-border="4 transparent" cursor-pointer
+            grid place-items-center
+            :class="{ 'selected-wallpaper': isGlobal ? settings.wallpaper === '' : settings.searchPageWallpaper === '' }"
+            @click="changeWallpaper('')"
+          >
+            <div i-tabler:photo-off text="3xl $bew-text-3" />
+          </picture>
+
+          <!-- Upload wallpaper input -->
+          <input
+            ref="uploadWallpaperRef" type="file" accept="image/*" hidden
+            @change="handleUploadWallpaper"
+          >
+
+          <Tooltip placement="top" :content="settings.customizeWallpaper?.name || ''" aspect-video>
+            <picture
+              class="group"
+              :class="{ 'selected-wallpaper': isGlobal
+                ? settings.wallpaper === settings.customizeWallpaper?.url
+                : settings.searchPageWallpaper === settings.customizeWallpaper?.url }"
+              aspect-video bg="$bew-theme-color-20" rounded="$bew-radius" overflow-hidden
+              un-border="4 transparent" w-full
+              flex="~ items-center justify-center"
+              @click="changeWallpaper(settings.customizeWallpaper?.url || '')"
+            >
+              <div
+                v-if="settings.customizeWallpaper"
+                class="opacity-0 group-hover:opacity-100" duration-300
+                pos="absolute top-4px right-4px" z-1 text="14px" flex="~ gap-1"
+              >
+                <button
+                  bg="$bew-content-1" rounded-full w-28px h-28px
+                  grid place-items-center
+                  @click="handleUploadWallpaper"
+                >
+                  <i i-mingcute:edit-2-line />
+                </button>
+                <button
+                  bg="$bew-content-1" rounded-full w-28px h-28px
+                  grid place-items-center
+                  @click="handleRemoveCustomWallpaper"
+                >
+                  <i i-mingcute:delete-2-line />
+                </button>
+              </div>
+              <div
+                v-if="!settings.customizeWallpaper"
+                absolute w-full h-full grid place-items-center
+                @click="handleUploadWallpaper"
+              >
+                <div
+                  i-tabler:photo-up
+                  text="3xl $bew-theme-color"
+                />
+              </div>
+              <img
+                v-else
+                :src="settings.customizeWallpaper.thumbnail || settings.customizeWallpaper.url"
+                :alt="settings.customizeWallpaper.name"
+                w-full h-full object-cover
+              >
+            </picture>
+          </Tooltip>
+
+          <Tooltip v-for="item in WALLPAPERS" :key="item.url" placement="top" :content="item.name" aspect-video>
+            <picture
+              aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
+              un-border="4 transparent" w-full
+              :class="{ 'selected-wallpaper': isGlobal ? settings.wallpaper === item.url : settings.searchPageWallpaper === item.url }"
+              @click="changeWallpaper(item.url)"
+            >
+              <img
+                :src="item.thumbnail || item.url"
+                :alt="item.name"
+                w-full h-full object-cover
+                class="img-no-error"
+              >
+            </picture>
+          </Tooltip>
+        </div>
+      </SettingsItem>
+      <SettingsItem v-else :title="$t('settings.image_url')" next-line>
+        <div flex items-center gap-4>
+          <picture
+            aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
+            un-border="4 transparent" cursor-pointer shrink-0
+            w="xl:1/5 lg:1/4 md:1/3"
           >
             <img
-              :src="item.thumbnail || item.url"
-              :alt="item.name"
+              v-if="isGlobal ? settings.wallpaper : settings.searchPageWallpaper"
+              :src="isGlobal ? settings.wallpaper : settings.searchPageWallpaper" alt="" loading="lazy"
               w-full h-full object-cover
-              class="img-no-error"
+              onerror="this.style.display='none'; this.onerror=null;"
             >
           </picture>
-        </Tooltip>
-      </div>
-    </SettingsItem>
-    <SettingsItem v-else :title="$t('settings.image_url')" next-line>
-      <div flex items-center gap-4>
-        <picture
-          aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
-          un-border="4 transparent" cursor-pointer shrink-0
-          w="xl:1/5 lg:1/4 md:1/3"
-        >
-          <img
-            v-if="isGlobal ? settings.wallpaper : settings.searchPageWallpaper"
-            :src="isGlobal ? settings.wallpaper : settings.searchPageWallpaper" alt="" loading="lazy"
-            w-full h-full object-cover
-            onerror="this.style.display='none'; this.onerror=null;"
-          >
-        </picture>
-        <div>
-          <Input v-if="isGlobal" v-model="settings.wallpaper" w-full />
-          <Input v-else v-model="settings.searchPageWallpaper" w-full />
-          <p color="sm $bew-text-3" mt-2>
-            {{ $t('settings.image_url_hint') }}
-          </p>
+          <div>
+            <Input v-if="isGlobal" v-model="settings.wallpaper" w-full />
+            <Input v-else v-model="settings.searchPageWallpaper" w-full />
+            <p color="sm $bew-text-3" mt-2>
+              {{ $t('settings.image_url_hint') }}
+            </p>
+          </div>
         </div>
-      </div>
-    </SettingsItem>
+      </SettingsItem>
 
-    <SettingsItem :title="$t('settings.enable_wallpaper_masking')">
-      <template #desc>
-        <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
-      </template>
+      <SettingsItem :title="$t('settings.enable_wallpaper_masking')">
+        <template #desc>
+          <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
+        </template>
 
-      <Radio v-if="isGlobal" v-model="settings.enableWallpaperMasking" />
-      <Radio v-else v-model="settings.searchPageEnableWallpaperMasking" />
-    </SettingsItem>
-    <SettingsItem v-if="isGlobal ? settings.enableWallpaperMasking : settings.searchPageEnableWallpaperMasking" :title="$t('settings.wallpaper_mask_opacity')">
-      <Slider v-if="isGlobal" v-model="settings.wallpaperMaskOpacity" :label="`${settings.wallpaperMaskOpacity}%`" />
-      <Slider v-else v-model="settings.searchPageWallpaperMaskOpacity" :label="`${settings.searchPageWallpaperMaskOpacity}%`" />
-    </SettingsItem>
-    <SettingsItem v-if="isGlobal ? settings.enableWallpaperMasking : settings.searchPageEnableWallpaperMasking" :title="$t('settings.wallpaper_blur_intensity')">
-      <template #desc>
-        <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
-      </template>
-      <Slider v-if="isGlobal" v-model="settings.wallpaperBlurIntensity" :min="0" :max="60" :label="`${settings.wallpaperBlurIntensity}px`" />
-      <Slider v-else v-model="settings.searchPageWallpaperBlurIntensity" :min="0" :max="60" :label="`${settings.searchPageWallpaperBlurIntensity}px`" />
-    </SettingsItem>
+        <Radio v-if="isGlobal" v-model="settings.enableWallpaperMasking" />
+        <Radio v-else v-model="settings.searchPageEnableWallpaperMasking" />
+      </SettingsItem>
+      <SettingsItem v-if="isGlobal ? settings.enableWallpaperMasking : settings.searchPageEnableWallpaperMasking" :title="$t('settings.wallpaper_mask_opacity')">
+        <Slider v-if="isGlobal" v-model="settings.wallpaperMaskOpacity" :label="`${settings.wallpaperMaskOpacity}%`" />
+        <Slider v-else v-model="settings.searchPageWallpaperMaskOpacity" :label="`${settings.searchPageWallpaperMaskOpacity}%`" />
+      </SettingsItem>
+      <SettingsItem v-if="isGlobal ? settings.enableWallpaperMasking : settings.searchPageEnableWallpaperMasking" :title="$t('settings.wallpaper_blur_intensity')">
+        <template #desc>
+          <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
+        </template>
+        <Slider v-if="isGlobal" v-model="settings.wallpaperBlurIntensity" :min="0" :max="60" :label="`${settings.wallpaperBlurIntensity}px`" />
+        <Slider v-else v-model="settings.searchPageWallpaperBlurIntensity" :min="0" :max="60" :label="`${settings.searchPageWallpaperBlurIntensity}px`" />
+      </SettingsItem>
+    </template>
   </SettingsItemGroup>
 </template>
 
diff --git a/src/components/Settings/components/SearchPage.vue b/src/components/Settings/components/SearchPage.vue
index ab0248c6..73221374 100644
--- a/src/components/Settings/components/SearchPage.vue
+++ b/src/components/Settings/components/SearchPage.vue
@@ -100,16 +100,7 @@ function changeSearchBarFocusCharacter(url: string) {
       </SettingsItem>
     </SettingsItemGroup>
 
-    <SettingsItemGroup :title="$t('settings.group_wallpaper')">
-      <SettingsItem :title="$t('settings.individually_set_search_page_wallpaper')">
-        <template #desc>
-          <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
-        </template>
-
-        <Radio v-model="settings.individuallySetSearchPageWallpaper" />
-      </SettingsItem>
-      <ChangeWallpaper v-if="settings.individuallySetSearchPageWallpaper" type="searchPage" />
-    </SettingsItemGroup>
+    <ChangeWallpaper type="searchPage" />
   </div>
 </template>