root/geo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(admin-web): tighten schedule cover picker layout

Browse Source 
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>
This commit is contained in:
liangxu
2026-05-01 11:04:28 +08:00
parent b18a562b32
commit 2436f50c1f
1 changed files with 67 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/admin-web/src/components/GenerateTaskDrawer.vue
+67 -65
View File
@@ -1,5 +1,5 @@
<script setup lang="ts"> <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 { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
import { message } from "ant-design-vue"; import { message } from "ant-design-vue";
import type { PromptRuleSimple, ScheduleTask } from "@geo/shared-types"; 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") }} {{ scheduleCoverRequired ? t("custom.task.scheduleCoverRequiredHint") : t("custom.task.scheduleCoverHint") }}
</p> </p>
<div v-if="effectiveScheduleCoverEnabled" class="generate-task-drawer__cover-row"> <div v-if="effectiveScheduleCoverEnabled" class="generate-task-drawer__cover-body">
<button type="button" class="generate-task-drawer__cover" @click="coverPickerOpen = true"> <div class="generate-task-drawer__cover-preview-wrap">
<template v-if="form.coverAssetUrl"> <button type="button" class="generate-task-drawer__cover-preview" @click="coverPickerOpen = true">
<img :src="form.coverAssetUrl" alt="cover preview" /> <template v-if="form.coverAssetUrl">
</template> <img :src="form.coverAssetUrl" alt="cover preview" />
<template v-else> </template>
<span class="generate-task-drawer__cover-plus">+</span> <template v-else>
<strong>{{ t("custom.task.coverUpload") }}</strong> <span class="generate-task-drawer__cover-plus">+</span>
<small>{{ t("custom.task.scheduleCoverUploadHint") }}</small> <span>{{ t("custom.task.coverUpload") }}</span>
</template> </template>
</button> </button>
<div v-if="form.coverAssetUrl" class="generate-task-drawer__cover-meta"> <button
<strong>{{ form.coverFileName || t("custom.task.cover") }}</strong> v-if="form.coverAssetUrl"
<a-button size="small" @click="coverPickerOpen = true"> type="button"
{{ t("article.editor.coverReplace") }} class="generate-task-drawer__cover-remove"
</a-button> :aria-label="t('article.editor.coverRemove')"
<a-button size="small" danger @click="handleRemoveScheduleCover"> :title="t('article.editor.coverRemove')"
{{ t("article.editor.coverRemove") }} @click.stop="handleRemoveScheduleCover"
</a-button> >
<MinusCircleFilled />
</button>
</div> </div>
</div> </div>
</div> </div>
@@ -806,8 +808,7 @@ function padTime(value: string): string {
gap: 4px; gap: 4px;
} }
.generate-task-drawer__account-copy strong, .generate-task-drawer__account-copy strong {
.generate-task-drawer__cover-meta strong {
overflow: hidden; overflow: hidden;
color: #1f2937; color: #1f2937;
font-size: 14px; font-size: 14px;
@@ -846,7 +847,7 @@ function padTime(value: string): string {
.generate-task-drawer__cover-head { .generate-task-drawer__cover-head {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: flex-start;
gap: 12px; gap: 12px;
} }
@@ -875,71 +876,72 @@ function padTime(value: string): string {
line-height: 1.7; line-height: 1.7;
} }
.generate-task-drawer__cover-row { .generate-task-drawer__cover-body {
display: flex; display: flex;
align-items: center; margin-top: 12px;
gap: 16px;
flex-wrap: wrap;
} }
.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; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
width: 228px; width: 100%;
min-height: 172px; min-height: 124px;
padding: 0; padding: 0;
border: 1px dashed #cfd9e8; border: 1px dashed #d1d5db;
border-radius: 8px; border-radius: 8px;
background: #fbfcff; background: #f9fafb;
color: #1f2937; color: #6b7280;
font-size: 13px;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
transition: all 0.2s ease;
} }
.generate-task-drawer__cover:hover { .generate-task-drawer__cover-preview:hover {
border-color: #9db7ff; border-color: #6366f1;
background: #f7faff; background: #f5f3ff;
color: #6366f1;
} }
.generate-task-drawer__cover img { .generate-task-drawer__cover-preview img {
display: block;
width: 100%; width: 100%;
height: 172px; height: 124px;
object-fit: cover; 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 { .generate-task-drawer__cover-plus {
display: inline-flex; font-size: 20px;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 999px;
background: #eef4ff;
color: #355dff;
font-size: 28px;
line-height: 1; line-height: 1;
} }
.generate-task-drawer__cover-meta { .generate-task-drawer__cover-remove {
display: flex; position: absolute;
min-width: 220px; top: 8px;
max-width: 360px; right: 8px;
flex-direction: column; display: inline-flex;
align-items: flex-start; align-items: center;
gap: 8px; 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 { .generate-task-drawer__time-wrapper {