重构

apps/admin/src/views/Contents.vue

@@ -670,6 +670,7 @@ void load();
             :required="form.status === 'ACTIVE'"
           >
             <div class="banner-upload-field">
+              <p class="banner-size-hint">{{ t('content.upload.recommended_size') }}</p>
               <!-- Image preview -->
               <div v-if="tr.imageUrl" class="banner-preview">
                 <img :src="tr.imageUrl" alt="" class="banner-preview-img" />
@@ -822,10 +823,18 @@ void load();
   width: 100%;
 }
 
+.banner-size-hint {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #777;
+}
+
 .banner-preview {
   position: relative;
   width: 100%;
   max-width: 320px;
+  aspect-ratio: 43 / 18;
   border-radius: 8px;
   overflow: hidden;
   border: 1px solid #252525;
@@ -834,8 +843,8 @@ void load();
 
 .banner-preview-img {
   width: 100%;
-  height: 120px;
-  object-fit: cover;
+  height: 100%;
+  object-fit: contain;
   display: block;
 }
 
@@ -980,4 +989,106 @@ void load();
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.contents-page {
+  color: var(--text);
+}
+
+.type-hint,
+.batch-hint,
+.banner-size-hint,
+.schedule-line,
+.schedule-sep,
+.media-picker-loading,
+.media-picker-empty,
+.media-picker-name,
+.thumb-empty,
+.locale-head {
+  color: var(--text-muted);
+}
+
+.preview-title {
+  color: var(--text);
+  font-weight: 700;
+}
+
+.hidden-tip {
+  color: var(--warning-text);
+}
+
+.thumb,
+.banner-preview,
+.media-picker-thumb {
+  background: #f4f0e8;
+}
+
+.banner-preview,
+.locale-block {
+  border-color: var(--border);
+  background: #fbfaf7;
+}
+
+.banner-preview-remove {
+  border-color: rgba(255, 255, 255, 0.36);
+  background: rgba(31, 35, 32, 0.78);
+}
+
+.banner-preview-remove:hover {
+  background: rgba(159, 47, 45, 0.92);
+}
+
+.banner-upload-btn,
+.banner-pick-btn {
+  border-radius: 7px;
+  font-weight: 700;
+}
+
+.banner-upload-btn {
+  border-color: var(--primary);
+  background: var(--primary);
+  color: #ffffff;
+}
+
+.banner-upload-btn:hover {
+  background: var(--primary-light);
+}
+
+.banner-pick-btn {
+  border-color: var(--border);
+  background: #ffffff;
+  color: var(--text);
+}
+
+.banner-pick-btn:hover {
+  border-color: #d5cfc3;
+  background: var(--accent-hover);
+  color: var(--text);
+}
+
+.media-picker-card {
+  border-color: var(--border);
+  background: #ffffff;
+}
+
+.media-picker-card:hover {
+  border-color: #d5cfc3;
+  box-shadow: 0 8px 22px rgba(56, 49, 37, 0.08);
+}
+
+.media-picker-svg {
+  color: var(--text-muted);
+}
+
+@media (max-width: 700px) {
+  .filter-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .banner-preview,
+  .banner-url-input {
+    max-width: 100%;
+  }
+}
 </style>