From 851e5c75a278c31f404c40d8468fd318d62e6315 Mon Sep 17 00:00:00 2001
From: Kuingsmile <96409857+Kuingsmile@users.noreply.github.com>
Date: Fri, 16 Jan 2026 15:32:26 +0800
Subject: [PATCH] :sparkles: Feature(custom): matched url is shown in gallery
 edit dialog

---
 src/renderer/pages/Gallery.vue     | 23 ++++++++++-
 src/renderer/pages/css/Gallery.css | 61 ++++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+), 2 deletions(-)

diff --git a/src/renderer/pages/Gallery.vue b/src/renderer/pages/Gallery.vue
index 0ff4e5fd..39280bf5 100644
--- a/src/renderer/pages/Gallery.vue
+++ b/src/renderer/pages/Gallery.vue
@@ -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({
diff --git a/src/renderer/pages/css/Gallery.css b/src/renderer/pages/css/Gallery.css
index 57613c51..67bf2bcc 100644
--- a/src/renderer/pages/css/Gallery.css
+++ b/src/renderer/pages/css/Gallery.css
@@ -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);
+}
+