mirror of
https://github.com/BewlyBewly/BewlyBewly.git
synced 2025-04-14 13:15:29 +00:00
fix(Settings): two wallpaper group in search page settings
This commit is contained in:
Hakadao
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user