From be21304ef9641cee5349c6a48c5856d648ecfc52 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Thu, 14 May 2026 23:11:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=A4=E4=BB=98=E4=BB=BB=E5=8A=A1-ui?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96ok?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AdminPlatformCloudtentaclesSection.vue    |   2 +-
 .../AdminPlatformKuaishouEticketSection.vue   |   2 +-
 .../src/views/admin/AdminOrderDetailView.vue  |   4 +-
 .../src/views/admin/AdminTasksView.vue        | 110 ++++++++++++------
 .../admin/AdminWebhookEventDetailView.vue     |   4 +-
 5 files changed, 83 insertions(+), 39 deletions(-)

diff --git a/apps/frontend/src/components/admin/AdminPlatformCloudtentaclesSection.vue b/apps/frontend/src/components/admin/AdminPlatformCloudtentaclesSection.vue
index 5c43b4a4..19f23c73 100644
--- a/apps/frontend/src/components/admin/AdminPlatformCloudtentaclesSection.vue
+++ b/apps/frontend/src/components/admin/AdminPlatformCloudtentaclesSection.vue
@@ -323,7 +323,7 @@ defineProps<Props>()
   border-radius: var(--radius-lg);
   background: #0f172a;
   color: #e2e8f0;
-  overflow: auto;
+  overflow-y: auto;
   white-space: pre-wrap;
   word-break: break-word;
   font-size: var(--text-xs);
diff --git a/apps/frontend/src/components/admin/AdminPlatformKuaishouEticketSection.vue b/apps/frontend/src/components/admin/AdminPlatformKuaishouEticketSection.vue
index 32f0dfca..88826c08 100644
--- a/apps/frontend/src/components/admin/AdminPlatformKuaishouEticketSection.vue
+++ b/apps/frontend/src/components/admin/AdminPlatformKuaishouEticketSection.vue
@@ -493,7 +493,7 @@ defineProps<Props>()
   border-radius: var(--radius-lg);
   background: #0f172a;
   color: #e2e8f0;
-  overflow: auto;
+  overflow-y: auto;
   white-space: pre-wrap;
   word-break: break-word;
   font-size: var(--text-xs);
diff --git a/apps/frontend/src/views/admin/AdminOrderDetailView.vue b/apps/frontend/src/views/admin/AdminOrderDetailView.vue
index e51f2cea..002d0403 100644
--- a/apps/frontend/src/views/admin/AdminOrderDetailView.vue
+++ b/apps/frontend/src/views/admin/AdminOrderDetailView.vue
@@ -386,12 +386,14 @@ function formatTaskAutoDeliveryReason(task: AdminOrderDetail['tasks'][number]) {
 .payload-box pre {
   margin: var(--space-3) 0 0;
   padding: 14px;
-  overflow: auto;
+  overflow-y: auto;
   border-radius: var(--radius-md);
   background: #0f172a;
   color: #dbeafe;
   font-size: var(--text-xs);
   line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
 }
 
 @media (max-width: 1200px) {
diff --git a/apps/frontend/src/views/admin/AdminTasksView.vue b/apps/frontend/src/views/admin/AdminTasksView.vue
index 75a1d40a..4f9064eb 100644
--- a/apps/frontend/src/views/admin/AdminTasksView.vue
+++ b/apps/frontend/src/views/admin/AdminTasksView.vue
@@ -133,8 +133,7 @@ function resetFilters() {
       </template>
     </AdminPageHeader>
 
-    <!-- 筛选 -->
-    <el-card shadow="never" class="filter-card">
+    <section class="filter-panel">
       <div class="filter-grid">
         <el-select v-model="status" placeholder="状态" clearable>
           <el-option v-for="opt in adminTaskStatusOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
@@ -145,21 +144,17 @@ function resetFilters() {
         <el-input v-model="skuCode" placeholder="商品 SKU" clearable @keyup.enter="loadTasks(1)" />
         <el-date-picker v-model="dateFrom" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" />
         <el-date-picker v-model="dateTo" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" />
-      </div>
-      <div class="filter-actions">
-        <span class="filter-hint">桌面端已改为自适应卡片列表，不再出现横向滚动。</span>
         <div class="filter-buttons">
           <el-button round @click="resetFilters">重置</el-button>
           <el-button round type="primary" @click="loadTasks(1)">查询</el-button>
         </div>
       </div>
-    </el-card>
+    </section>
 
     <el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
     <el-alert v-if="lastClaimUrl" :title="`最近生成的领取链接：${lastClaimUrl}`" type="info" show-icon :closable="false" style="margin-top: 16px" />
 
-    <!-- 列表 -->
-    <el-card shadow="never" class="table-card" v-loading="loading" element-loading-text="任务列表加载中">
+    <section class="tasks-section" v-loading="loading" element-loading-text="任务列表加载中">
       <template v-if="items.length === 0 && !loading">
         <el-empty description="当前筛选条件下暂无任务" :image-size="60" />
       </template>
@@ -235,7 +230,7 @@ function resetFilters() {
                 </div>
               </section>
 
-              <section class="task-section">
+              <section class="task-section task-section--actions">
                 <span class="section-label">异常 / 操作</span>
                 <div class="task-end">
                   <span class="cell-error" :title="item.lastError || '-'">{{ item.lastError || '当前无异常' }}</span>
@@ -290,7 +285,7 @@ function resetFilters() {
           @current-change="loadTasks"
         />
       </template>
-    </el-card>
+    </section>
   </div>
 </template>
 
@@ -310,26 +305,25 @@ function resetFilters() {
   align-items: center;
 }
 
-.filter-card { margin-top: var(--space-4); }
+.filter-panel { margin-top: var(--space-4); }
 
 .filter-grid {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: minmax(150px, 0.75fr) minmax(220px, 1fr) minmax(220px, 1fr) minmax(210px, 0.95fr);
   gap: var(--space-3);
-}
-
-.filter-actions {
-  display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-  margin-top: var(--space-3);
 }
 
-.filter-hint { color: var(--text-secondary); font-size: var(--text-xs); }
-.filter-buttons { display: flex; gap: 10px; flex-shrink: 0; }
+.filter-grid :deep(.el-date-editor) { width: 100%; }
 
-.table-card { margin-top: var(--space-4); overflow: visible; }
+.filter-buttons {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  min-width: 156px;
+}
+
+.tasks-section { margin-top: var(--space-4); overflow: visible; }
 
 .tasks-toolbar { margin-bottom: var(--space-3); }
 .tasks-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
@@ -341,9 +335,16 @@ function resetFilters() {
   display: grid;
   gap: 14px;
   padding: 14px;
-  border-radius: var(--radius-lg);
-  background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, #ffffff 100%);
+  border-radius: var(--radius-md);
+  background: rgba(247, 250, 255, 0.42);
   border: 1px solid var(--border-default);
+  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
+}
+
+.task-card:hover {
+  border-color: var(--border-hover);
+  background: rgba(247, 250, 255, 0.68);
+  box-shadow: 0 1px 4px rgba(30, 49, 78, 0.04);
 }
 
 .task-card-top {
@@ -389,19 +390,24 @@ function resetFilters() {
 
 .task-grid {
   display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
+  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1.15fr);
   gap: var(--space-3);
   min-width: 0;
 }
 
 .task-section {
   display: grid;
-  gap: var(--space-2);
+  gap: 6px;
   min-width: 0;
-  padding: var(--space-3);
-  border-radius: 14px;
-  background: rgba(255, 255, 255, 0.78);
-  border: 1px solid var(--border-default);
+  padding-top: 10px;
+  border-top: 1px solid rgba(86, 108, 138, 0.1);
+}
+
+.task-section--actions {
+  grid-column: 1 / -1;
+  grid-template-columns: 112px minmax(0, 1fr);
+  align-items: center;
+  gap: var(--space-3);
 }
 
 .section-label {
@@ -412,8 +418,18 @@ function resetFilters() {
   text-transform: uppercase;
 }
 
-.progress-cell { display: grid; gap: var(--space-2); }
-.progress-row { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; }
+.progress-cell { display: grid; gap: var(--space-2); min-width: 0; }
+.progress-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
+.progress-row :deep(.el-tag) {
+  min-width: 0;
+  max-width: calc(100% - 42px);
+}
+.progress-row :deep(.el-tag__content) {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .progress-label {
   display: inline-flex;
   align-items: center;
@@ -438,17 +454,41 @@ function resetFilters() {
 
 .cell-error { display: block; min-width: 0; line-height: 1.55; color: #475467; word-break: break-word; font-size: var(--text-xs); }
 
-.task-end { display: grid; gap: var(--space-3); min-width: 0; }
-.action-cell { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; }
+.task-end {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--space-3);
+  align-items: center;
+  min-width: 0;
+}
+.action-cell {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  align-items: center;
+  justify-content: flex-end;
+  max-width: 360px;
+}
+.action-cell :deep(.el-button) {
+  flex: 0 0 auto;
+  margin-left: 0;
+}
 
 @media (max-width: 1200px) {
   .task-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .task-section--actions {
+    grid-template-columns: 1fr;
+    align-items: start;
+  }
+  .task-end { grid-template-columns: 1fr; }
+  .action-cell { justify-content: flex-start; max-width: none; }
   .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .filter-buttons { justify-content: flex-start; }
 }
 @media (max-width: 900px) {
   .task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .filter-actions { flex-direction: column; align-items: flex-start; }
+  .filter-buttons { justify-content: flex-start; }
 }
 @media (max-width: 640px) {
   .task-grid,
diff --git a/apps/frontend/src/views/admin/AdminWebhookEventDetailView.vue b/apps/frontend/src/views/admin/AdminWebhookEventDetailView.vue
index 9910ed3c..1ccc4c27 100644
--- a/apps/frontend/src/views/admin/AdminWebhookEventDetailView.vue
+++ b/apps/frontend/src/views/admin/AdminWebhookEventDetailView.vue
@@ -337,9 +337,11 @@ onMounted(loadDetail)
   border-radius: 14px;
   background: #0f172a;
   color: #e2e8f0;
-  overflow: auto;
+  overflow-y: auto;
   font-size: var(--text-xs);
   line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
 }
 
 @media (max-width: 900px) {