From 2436f50c1f26725c309ce99944bdcd1d9b062c67 Mon Sep 17 00:00:00 2001
From: liangxu <liangxu0920@qq.com>
Date: Fri, 1 May 2026 11:04:28 +0800
Subject: [PATCH] refactor(admin-web): tighten schedule cover picker layout

Replace the labeled cover button + meta column with a compact preview
tile and an overlaid remove button, dropping the now-unused cover-meta
typography rules.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/components/GenerateTaskDrawer.vue     | 132 +++++++++---------
 1 file changed, 67 insertions(+), 65 deletions(-)

diff --git a/apps/admin-web/src/components/GenerateTaskDrawer.vue b/apps/admin-web/src/components/GenerateTaskDrawer.vue
index 422678d..7d75d2d 100644
--- a/apps/admin-web/src/components/GenerateTaskDrawer.vue
+++ b/apps/admin-web/src/components/GenerateTaskDrawer.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { PlusOutlined } from "@ant-design/icons-vue";
+import { MinusCircleFilled, PlusOutlined } from "@ant-design/icons-vue";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
 import { message } from "ant-design-vue";
 import type { PromptRuleSimple, ScheduleTask } from "@geo/shared-types";
@@ -503,26 +503,28 @@ function padTime(value: string): string {
               {{ scheduleCoverRequired ? t("custom.task.scheduleCoverRequiredHint") : t("custom.task.scheduleCoverHint") }}
             </p>
 
-            <div v-if="effectiveScheduleCoverEnabled" class="generate-task-drawer__cover-row">
-              <button type="button" class="generate-task-drawer__cover" @click="coverPickerOpen = true">
-                <template v-if="form.coverAssetUrl">
-                  <img :src="form.coverAssetUrl" alt="cover preview" />
-                </template>
-                <template v-else>
-                  <span class="generate-task-drawer__cover-plus">+</span>
-                  <strong>{{ t("custom.task.coverUpload") }}</strong>
-                  <small>{{ t("custom.task.scheduleCoverUploadHint") }}</small>
-                </template>
-              </button>
+            <div v-if="effectiveScheduleCoverEnabled" class="generate-task-drawer__cover-body">
+              <div class="generate-task-drawer__cover-preview-wrap">
+                <button type="button" class="generate-task-drawer__cover-preview" @click="coverPickerOpen = true">
+                  <template v-if="form.coverAssetUrl">
+                    <img :src="form.coverAssetUrl" alt="cover preview" />
+                  </template>
+                  <template v-else>
+                    <span class="generate-task-drawer__cover-plus">+</span>
+                    <span>{{ t("custom.task.coverUpload") }}</span>
+                  </template>
+                </button>
 
-              <div v-if="form.coverAssetUrl" class="generate-task-drawer__cover-meta">
-                <strong>{{ form.coverFileName || t("custom.task.cover") }}</strong>
-                <a-button size="small" @click="coverPickerOpen = true">
-                  {{ t("article.editor.coverReplace") }}
-                </a-button>
-                <a-button size="small" danger @click="handleRemoveScheduleCover">
-                  {{ t("article.editor.coverRemove") }}
-                </a-button>
+                <button
+                  v-if="form.coverAssetUrl"
+                  type="button"
+                  class="generate-task-drawer__cover-remove"
+                  :aria-label="t('article.editor.coverRemove')"
+                  :title="t('article.editor.coverRemove')"
+                  @click.stop="handleRemoveScheduleCover"
+                >
+                  <MinusCircleFilled />
+                </button>
               </div>
             </div>
           </div>
@@ -806,8 +808,7 @@ function padTime(value: string): string {
   gap: 4px;
 }
 
-.generate-task-drawer__account-copy strong,
-.generate-task-drawer__cover-meta strong {
+.generate-task-drawer__account-copy strong {
   overflow: hidden;
   color: #1f2937;
   font-size: 14px;
@@ -846,7 +847,7 @@ function padTime(value: string): string {
 .generate-task-drawer__cover-head {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
   gap: 12px;
 }
 
@@ -875,71 +876,72 @@ function padTime(value: string): string {
   line-height: 1.7;
 }
 
-.generate-task-drawer__cover-row {
+.generate-task-drawer__cover-body {
   display: flex;
-  align-items: center;
-  gap: 16px;
-  flex-wrap: wrap;
+  margin-top: 12px;
 }
 
-.generate-task-drawer__cover {
+.generate-task-drawer__cover-preview-wrap {
+  position: relative;
+  width: 176px;
+  flex: 0 0 176px;
+}
+
+.generate-task-drawer__cover-preview {
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 8px;
-  width: 228px;
-  min-height: 172px;
+  width: 100%;
+  min-height: 124px;
   padding: 0;
-  border: 1px dashed #cfd9e8;
+  border: 1px dashed #d1d5db;
   border-radius: 8px;
-  background: #fbfcff;
-  color: #1f2937;
+  background: #f9fafb;
+  color: #6b7280;
+  font-size: 13px;
   cursor: pointer;
   overflow: hidden;
+  transition: all 0.2s ease;
 }
 
-.generate-task-drawer__cover:hover {
-  border-color: #9db7ff;
-  background: #f7faff;
+.generate-task-drawer__cover-preview:hover {
+  border-color: #6366f1;
+  background: #f5f3ff;
+  color: #6366f1;
 }
 
-.generate-task-drawer__cover img {
+.generate-task-drawer__cover-preview img {
+  display: block;
   width: 100%;
-  height: 172px;
+  height: 124px;
   object-fit: cover;
 }
 
-.generate-task-drawer__cover strong {
-  font-size: 16px;
-  font-weight: 700;
-}
-
-.generate-task-drawer__cover small {
-  color: #667085;
-  font-size: 13px;
-}
-
 .generate-task-drawer__cover-plus {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border-radius: 999px;
-  background: #eef4ff;
-  color: #355dff;
-  font-size: 28px;
+  font-size: 20px;
   line-height: 1;
 }
 
-.generate-task-drawer__cover-meta {
-  display: flex;
-  min-width: 220px;
-  max-width: 360px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
+.generate-task-drawer__cover-remove {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 999px;
+  background: rgba(17, 24, 39, 0.7);
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.generate-task-drawer__cover-remove:hover {
+  background: rgba(17, 24, 39, 0.9);
 }
 
 .generate-task-drawer__time-wrapper {