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>

assets/admin/src/components/form/AksGalleryField.vue

@@ -173,12 +173,17 @@ watch(attachmentIds, hydratePreviews, { immediate: true })
 
 <style scoped>
 .aksrt-gallery-field__grid {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
+  flex-wrap: wrap;
-  gap: 10px;
+  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%;
+  width: auto;
-  aspect-ratio: 4 / 3;
+  height: auto;
-  object-fit: contain;
+  max-width: 100%;
+  max-height: 90px;
+  border-radius: 4px;
 }
 
 .aksrt-gallery-field__placeholder {
   display: flex;
-  width: 100%;
+  flex-direction: column;
-  aspect-ratio: 4 / 3;
+  width: 90px;
+  height: 90px;
   align-items: center;
   justify-content: center;
-}
-
-.aksrt-gallery-field__placeholder {
-  flex-direction: column;
   gap: 4px;
   color: var(--aksrt-color-muted);
 }

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">
+        <n-button size="tiny" secondary circle title="更换" @click="openMediaLibrary">
-          <FaIcon icon="fa fas fa-exchange-alt" /> 更换
+          <FaIcon icon="fa fas fa-exchange-alt" />
         </n-button>
-        <n-button size="tiny" quaternary type="error" @click="clearMedia">
+        <n-button size="tiny" secondary circle type="error" title="移除" @click="clearMedia">
-          <FaIcon icon="fa fas fa-trash-alt" /> 移除
+          <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;
+  display: inline-flex;
-  align-items: center;
+  max-width: 100%;
-  justify-content: center;
+  min-width: 72px;
-  min-height: 80px;
+  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;
+  max-height: 120px;
-  object-fit: contain;
+  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;
 }

assets/css/admin/pay-meta-box.css

@@ -97,8 +97,9 @@
 }
 
 .aksrt-pay-meta__gallery {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(6, minmax(0, 1fr));
+  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%;
+  width: auto;
-  aspect-ratio: 1;
+  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;
   }

assets/css/admin/post-extension.css

@@ -74,8 +74,9 @@
 }
 
 .aksrt-post-extension__gallery {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  flex-wrap: wrap;
+  align-items: flex-start;
   gap: 5px;
 }
 
@@ -85,10 +86,13 @@
 
 .aksrt-post-extension__gallery img {
   display: block;
-  width: 100%;
+  width: auto;
-  aspect-ratio: 1;
+  height: auto;
+  max-width: 100%;
+  max-height: 60px;
+  padding: 3px;
+  border: 1px solid #dcdcde;
   border-radius: 3px;
-  object-fit: contain;
   background: #f6f7f7;
 }