GithubBackup/PicList
1
0
Fork 0
mirror of https://github.com/Kuingsmile/PicList.git synced 2026-05-06 20:42:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ Feature(custom): matched url is shown in gallery edit dialog

Browse Source
This commit is contained in:
Kuingsmile
2026-01-16 15:32:26 +08:00
parent f5babad7ec
commit 851e5c75a2
2 changed files with 82 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/renderer/pages/Gallery.vue
View File

@@ -401,7 +401,17 @@
type="text"
class="form-input"
:placeholder="t('pages.gallery.regexPatternPlaceholder')"
@focus="showMatchedUrls = true"
@blur="showMatchedUrls = false"
/>
<div v-if="showMatchedUrls && matchedUrls.length > 0" class="matched-urls-tooltip">
<div class="tooltip-header">Matched URLs ({{ matchedUrls.length }}):</div>
<div class="tooltip-content">
<div v-for="(url, index) in matchedUrls" :key="index" class="url-item">
{{ url }}
</div>
</div>
</div>
</div>
<div class="form-group">
@@ -593,6 +603,7 @@ const dateRangeEnd = ref('')
const picBedDropdownOpen = ref(false)
const sortDropdownOpen = ref(false)
const showFormatInfo = ref(false)
const showMatchedUrls = ref(false)
const enableAdvancedAnimation = ref(false)
const viewMode = useStorage<'list' | 'grid'>('galleryViewMode', 'grid')
const componentKey = ref(0)
@@ -654,9 +665,17 @@ const advancedRenameList = {
}
const matchedCount = computed(() => {
return filterList.value.filter((item: any) => {
const matches = filterList.value.filter((item: any) => {
return customStrMatch(item.imgUrl, batchRenameMatch.value)
}).length
})
return matches.length
})
const matchedUrls = computed(() => {
const matches = filterList.value.filter((item: any) => {
return customStrMatch(item.imgUrl, batchRenameMatch.value)
})
return matches.map((item: any) => item.imgUrl || '').filter(Boolean)
})
const dateRange = computed({

61
src/renderer/pages/css/Gallery.css
View File

@@ -1526,4 +1526,65 @@ input:checked + .switch-slider::before {
background: rgb(var(--color-accent-rgb), 0.08);
}
.matched-urls-tooltip {
position: absolute;
z-index: 1000;
margin-top: 0.5rem;
border: 1px solid var(--color-border-secondary);
border-radius: var(--radius-md);
padding: 0;
max-width: 100%;
max-height: 300px;
background: var(--color-background-tertiary);
box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
overflow: hidden;
}
.matched-urls-tooltip .tooltip-header {
border-bottom: 1px solid var(--color-border-secondary);
padding: 0.75rem 1rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-primary);
background: var(--color-background-secondary);
}
.matched-urls-tooltip .tooltip-content {
padding: 0.5rem;
max-height: 240px;
overflow-y: auto;
}
.matched-urls-tooltip .url-item {
padding: 0.5rem 0.75rem;
font-family: var(--font-mono, 'Courier New', monospace);
font-size: 0.813rem;
color: var(--color-text-secondary);
word-break: break-all;
border-radius: var(--radius-sm);
transition: var(--transition-fast);
}
.matched-urls-tooltip .url-item:hover {
background: var(--color-surface-elevated);
}
.matched-urls-tooltip .tooltip-content::-webkit-scrollbar {
width: 6px;
}
.matched-urls-tooltip .tooltip-content::-webkit-scrollbar-track {
border-radius: var(--radius-sm);
background: var(--color-surface-elevated);
}
.matched-urls-tooltip .tooltip-content::-webkit-scrollbar-thumb {
border-radius: var(--radius-sm);
background: var(--color-border);
}
.matched-urls-tooltip .tooltip-content::-webkit-scrollbar-thumb:hover {
background: var(--color-text-secondary);
}