vue/jingrowtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加背景页面右边栏图片标签页更新为一行显示3张图片

Browse Source
This commit is contained in:
jingrow 2026-01-21 21:49:58 +08:00
parent 9ca7b644cf
commit 887f4efcb1
2 changed files with 61 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/locales/zh-CN.json
View File

@ -1220,6 +1220,7 @@
"Close": "关闭",
"Clear Background": "清除背景",
"Failed to clear background": "清除背景失败",
"Show More": "显示更多",
"Sign up successful, but auto login failed. Please login manually": "注册成功，但自动登录失败，请手动登录",
"WeChat": "微信",
"Weibo": "微博",

68
src/views/tools/add_background/add_background.vue
View File

@ -540,7 +540,7 @@ favorite-colors-grid<template>
<n-spin :show="pexelsLoading">
<div v-if="pexelsImages.length > 0" class="background-images-grid">
<div
v-for="image in pexelsImages"
v-for="image in displayedPexelsImages"
:key="image.id"
class="background-image-item"
@click="applyBackgroundImage(image.src.medium)"
@ -548,7 +548,16 @@ favorite-colors-grid<template>
<img :src="image.src.tiny" :alt="image.alt" />
</div>
</div>
<n-empty v-else :description="t('No images found')" />
<div v-if="showLoadMoreButton" class="load-more-container">
<button
type="button"
class="load-more-btn"
@click="showAllPexelsImages = true"
>
{{ t('Show More') }}
</button>
</div>
<n-empty v-else-if="pexelsImages.length === 0" :description="t('No images found')" />
</n-spin>
</div>
</div>
@ -1035,10 +1044,25 @@ const pexelsLoading = ref(false)
const pexelsPage = ref(1)
const pexelsQuery = ref('nature background')
const PEXELS_API_KEY = __PEXELS_API_KEY__ || ''
const showAllPexelsImages = ref(false)
const PEXELS_INITIAL_DISPLAY = 12
// Custom background images
const customBackgrounds = ref<string[]>([])
// Computed: Display limited or all Pexels images
const displayedPexelsImages = computed(() => {
if (showAllPexelsImages.value || pexelsImages.value.length <= PEXELS_INITIAL_DISPLAY) {
return pexelsImages.value
}
return pexelsImages.value.slice(0, PEXELS_INITIAL_DISPLAY)
})
// Show "Load More" button condition
const showLoadMoreButton = computed(() => {
return !showAllPexelsImages.value && pexelsImages.value.length > PEXELS_INITIAL_DISPLAY
})
// Load custom backgrounds from localStorage
const loadCustomBackgrounds = () => {
try {
@ -2597,10 +2621,10 @@ const removeHistoryItem = (index: number) => {
margin: auto;
/* Checkerboard pattern for transparent background */
background-image:
linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
background-color: #ffffff;
@ -3039,12 +3063,12 @@ const removeHistoryItem = (index: number) => {
.background-images-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.background-image-item {
aspect-ratio: 16 / 9;
aspect-ratio: 1 / 1;
border-radius: 8px;
cursor: pointer;
border: 2px solid #e5e7eb;
@ -3117,6 +3141,34 @@ const removeHistoryItem = (index: number) => {
}
}
.load-more-container {
display: flex;
justify-content: center;
margin-top: 16px;
}
.load-more-btn {
padding: 10px 24px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
color: #64748b;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
border-color: #1fc76f;
color: #1fc76f;
background: #f0fdf4;
}
&:active {
transform: scale(0.98);
}
}
.canvas-processing-overlay {
position: absolute;
top: 0;