From 32172582ff5883982f0aab3e566ecd23524f166c Mon Sep 17 00:00:00 2001
From: unknown <kate522@88.com>
Date: Wed, 28 Oct 2026 18:30:34 +0800
Subject: [PATCH] fix(admin): shrink image previews to natural size like
 reference theme

Media and gallery previews now hug the image (inline box, capped height)
instead of stretching across fixed grid cells, removing empty letterbox space.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../src/components/form/AksGalleryField.vue   | 28 +++++++++++--------
 .../src/components/form/AksMediaField.vue     | 26 ++++++++---------
 assets/css/admin/pay-meta-box.css             | 18 ++++++------
 assets/css/admin/post-extension.css           | 14 ++++++----
 4 files changed, 47 insertions(+), 39 deletions(-)

diff --git a/assets/admin/src/components/form/AksGalleryField.vue b/assets/admin/src/components/form/AksGalleryField.vue
index 63272619..3827cf5e 100644
--- a/assets/admin/src/components/form/AksGalleryField.vue
+++ b/assets/admin/src/components/form/AksGalleryField.vue
@@ -173,12 +173,17 @@ watch(attachmentIds, hydratePreviews, { immediate: true })
 
 <style scoped>
 .aksrt-gallery-field__grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
-  gap: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 8px;
 }
 
 .aksrt-gallery-field__item {
+  display: inline-flex;
+  flex-direction: column;
+  max-width: 100%;
+  padding: 4px 4px 0;
   overflow: hidden;
   border: 1px solid var(--aksrt-color-border);
   border-radius: 8px;
@@ -187,21 +192,20 @@ watch(attachmentIds, hydratePreviews, { immediate: true })
 
 .aksrt-gallery-field__image {
   display: block;
-  width: 100%;
-  aspect-ratio: 4 / 3;
-  object-fit: contain;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 90px;
+  border-radius: 4px;
 }
 
 .aksrt-gallery-field__placeholder {
   display: flex;
-  width: 100%;
-  aspect-ratio: 4 / 3;
+  flex-direction: column;
+  width: 90px;
+  height: 90px;
   align-items: center;
   justify-content: center;
-}
-
-.aksrt-gallery-field__placeholder {
-  flex-direction: column;
   gap: 4px;
   color: var(--aksrt-color-muted);
 }
diff --git a/assets/admin/src/components/form/AksMediaField.vue b/assets/admin/src/components/form/AksMediaField.vue
index 673f44d6..68710aaa 100644
--- a/assets/admin/src/components/form/AksMediaField.vue
+++ b/assets/admin/src/components/form/AksMediaField.vue
@@ -12,11 +12,11 @@
         <span class="aksrt-media-field__filename">{{ fileName }}</span>
       </div>
       <div class="aksrt-media-field__overlay">
-        <n-button size="tiny" quaternary @click="openMediaLibrary">
-          <FaIcon icon="fa fas fa-exchange-alt" /> 更换
+        <n-button size="tiny" secondary circle title="更换" @click="openMediaLibrary">
+          <FaIcon icon="fa fas fa-exchange-alt" />
         </n-button>
-        <n-button size="tiny" quaternary type="error" @click="clearMedia">
-          <FaIcon icon="fa fas fa-trash-alt" /> 移除
+        <n-button size="tiny" secondary circle type="error" title="移除" @click="clearMedia">
+          <FaIcon icon="fa fas fa-trash-alt" />
         </n-button>
       </div>
     </div>
@@ -97,15 +97,17 @@ function clearMedia() {
 <style scoped>
 .aksrt-media-field__preview {
   position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 80px;
+  display: inline-flex;
+  max-width: 100%;
+  min-width: 72px;
+  min-height: 44px;
+  padding: 4px;
   border-radius: 8px;
   overflow: hidden;
   border: 1px solid var(--aksrt-color-border);
   background: var(--aksrt-color-canvas);
   margin-bottom: 8px;
+  vertical-align: top;
 }
 
 .aksrt-media-field__image {
@@ -113,13 +115,11 @@ function clearMedia() {
   width: auto;
   height: auto;
   max-width: 100%;
-  max-height: 200px;
-  object-fit: contain;
+  max-height: 120px;
+  border-radius: 4px;
 }
 
 .aksrt-media-field__file {
-  flex: 1;
-  align-self: stretch;
   display: flex;
   align-items: center;
   gap: 8px;
@@ -139,7 +139,7 @@ function clearMedia() {
   right: 0;
   display: flex;
   gap: 4px;
-  padding: 6px;
+  padding: 4px;
   opacity: 0;
   transition: opacity 0.2s;
 }
diff --git a/assets/css/admin/pay-meta-box.css b/assets/css/admin/pay-meta-box.css
index 15ca7069..27b908fc 100644
--- a/assets/css/admin/pay-meta-box.css
+++ b/assets/css/admin/pay-meta-box.css
@@ -97,8 +97,9 @@
 }
 
 .aksrt-pay-meta__gallery {
-  display: grid;
-  grid-template-columns: repeat(6, minmax(0, 1fr));
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
   gap: 7px;
   margin-bottom: 8px;
 }
@@ -109,10 +110,13 @@
 
 .aksrt-pay-meta__gallery img {
   display: block;
-  width: 100%;
-  aspect-ratio: 1;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 60px;
+  padding: 3px;
+  border: 1px solid #dcdcde;
   border-radius: 4px;
-  object-fit: contain;
   background: #f6f7f7;
 }
 
@@ -334,10 +338,6 @@
     text-align: left;
   }
 
-  .aksrt-pay-meta__gallery {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
   .aksrt-pay-meta__group--inline {
     flex-wrap: wrap;
   }
diff --git a/assets/css/admin/post-extension.css b/assets/css/admin/post-extension.css
index 84defb47..8c74a1dc 100644
--- a/assets/css/admin/post-extension.css
+++ b/assets/css/admin/post-extension.css
@@ -74,8 +74,9 @@
 }
 
 .aksrt-post-extension__gallery {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
   gap: 5px;
 }
 
@@ -85,10 +86,13 @@
 
 .aksrt-post-extension__gallery img {
   display: block;
-  width: 100%;
-  aspect-ratio: 1;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 60px;
+  padding: 3px;
+  border: 1px solid #dcdcde;
   border-radius: 3px;
-  object-fit: contain;
   background: #f6f7f7;
 }