From 95895619888f83917ed0e9c6bcf0c60c1db75791 Mon Sep 17 00:00:00 2001 From: yml2213 Date: Fri, 10 Jul 2026 16:17:13 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=BB=E5=8A=A1=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E8=A1=A8=E6=A0=BC=20UI=EF=BC=9A=E6=94=B6=E6=95=9B?= =?UTF-8?q?=E5=88=97=E4=BF=A1=E6=81=AF=E5=B9=B6=E4=BF=AE=E5=A4=8D=20Tag=20?= =?UTF-8?q?=E6=92=91=E6=BB=A1=E5=BA=95=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 拆分渠道与卡点职责，卡点文案运营化 - 状态列收敛为主状态 + 三层 Tooltip - 操作列仅展示可用动作，异常行浅红高亮 - 修复 cell-stack grid 下 Tag 被横向拉满的样式问题 --- .../src/pages/admin/AdminTasksPage.tsx | 198 ++++++++++++------ apps/frontend/src/styles/main.css | 42 +++- 2 files changed, 174 insertions(+), 66 deletions(-) diff --git a/apps/frontend/src/pages/admin/AdminTasksPage.tsx b/apps/frontend/src/pages/admin/AdminTasksPage.tsx index c02425af..98cb5d97 100644 --- a/apps/frontend/src/pages/admin/AdminTasksPage.tsx +++ b/apps/frontend/src/pages/admin/AdminTasksPage.tsx @@ -5,7 +5,20 @@ import { SwapOutlined, UserSwitchOutlined, } from '@ant-design/icons' -import { Alert, App, Button, Card, Form, Input, Select, Space, Table, Tag, Typography } from 'antd' +import { + Alert, + App, + Button, + Card, + Form, + Input, + Select, + Space, + Table, + Tag, + Tooltip, + Typography, +} from 'antd' import type { TableColumnsType } from 'antd' import { useQuery } from '@tanstack/react-query' import { useMemo, useState } from 'react' @@ -45,8 +58,10 @@ type TaskListAction = 'retry' | 'rebind_role' | 'manual_review' | 'close' type TaskListBlocker = { label: string color: string - level: 'normal' | 'error' + level: 'normal' | 'error' | 'done' detail: string + /** 列表副文案：完成态默认隐藏，异常/进行中显示 */ + showDetail: boolean } export default function AdminTasksPage() { @@ -92,7 +107,7 @@ export default function AdminTasksPage() { const columns: TableColumnsType = [ { title: '任务 / 订单', - minWidth: 230, + minWidth: 210, render: (_, row) => (
navigate(`/admin/tasks/${row.taskId}`)}> @@ -104,74 +119,103 @@ export default function AdminTasksPage() { }, { title: '商品', - minWidth: 210, - render: (_, row) => ( -
- {row.skuName || '-'} - {row.skuCode || row.executorKey} -
- ), - }, - { - title: '履约 / 卡点', - minWidth: 260, + minWidth: 200, render: (_, row) => { const executor = resolveTaskExecutorDisplay(row.executorKey) + + return ( +
+ {row.skuName || '-'} + {row.skuCode || '-'} + + {executor.label} + +
+ ) + }, + }, + { + title: '当前卡点', + minWidth: 200, + render: (_, row) => { const blocker = resolveTaskListBlocker(row) return (
- - {executor.label} - {blocker.label} - - - {blocker.detail} - + {blocker.label} + + {blocker.showDetail ? ( + + {blocker.detail} + + ) : null}
) }, }, { title: '状态', - minWidth: 280, + minWidth: 120, render: (_, row) => ( - - - - - - + +
+ 交付 + +
+
+ 资源 + +
+
+ 客户 + +
+
+ } + > + + + + ), }, { title: '角色', - minWidth: 180, + minWidth: 140, render: (_, row) => (
{row.roleName || '-'} - {row.roleId || row.loginType || '-'} + {row.roleId || row.loginType ? ( + {row.roleId || row.loginType} + ) : null}
), }, { - title: '时间', - minWidth: 220, + title: '更新时间', + minWidth: 160, render: (_, row) => ( -
- {formatAdminDateTime(row.updatedAt)} - 创建 {formatAdminDateTime(row.createdAt)} -
+ + {formatAdminDateTime(row.updatedAt)} + ), }, { - title: '异常 / 操作', - minWidth: 260, + title: '操作', + minWidth: 200, fixed: 'right', render: (_, row) => { const rowLoading = actionLoadingId === row.taskId @@ -181,23 +225,28 @@ export default function AdminTasksPage() { row.executorKey !== 'manual_dispatch' && ['retry_pending', 'manual_review'].includes(row.status) const canRebind = canRebindListTask(row, canManageTaskLifecycle) + const canManualReview = + canManageTaskLifecycle && + !['redeemed', 'closed', 'completed', 'manual_review'].includes(row.status) const canClose = canCloseTasks && !['redeemed', 'closed'].includes(row.status) - const hasActions = canManageTaskLifecycle || canRebind || canClose + const hasActions = canRetry || canRebind || canManualReview || canClose return (
- - {row.lastError || '当前无异常'} - + {row.lastError ? ( + + {row.lastError} + + ) : null} {hasActions ? ( - {canManageTaskLifecycle ? ( + {canRetry ? ( ) : null} - {canManageTaskLifecycle ? ( + {canManualReview ? ( ) : null} - ) : null} + ) : ( + — + )}
) }, @@ -402,7 +453,11 @@ export default function AdminTasksPage() { loading={query.isLoading || query.isFetching} columns={columns} dataSource={data?.items || []} - scroll={{ x: 1500 }} + scroll={{ x: 1280 }} + size="middle" + rowClassName={(row) => + resolveTaskListBlocker(row).level === 'error' ? 'task-list-row-error' : '' + } pagination={buildAdminTablePagination({ current: data?.pagination.page || page, pageSize: data?.pagination.pageSize || pageSize, @@ -428,18 +483,22 @@ function canRebindListTask(item: AdminTaskListItem, canManageTaskLifecycle: bool function resolveTaskExecutorDisplay(value: unknown) { const executorKey = String(value || '').trim() if (executorKey === 'kuaishou_ct_assisted') { - return { label: 'kuaishou-lewan', color: 'blue' } + return { key: executorKey, label: '乐玩云', color: 'blue' } } if (executorKey === 'kuaishou-industry') { - return { label: '行业电子凭证', color: 'cyan' } + return { key: executorKey, label: '行业凭证', color: 'cyan' } } if (executorKey === 'kuaishou_feifei') { - return { label: 'kuaishou-feifei', color: 'purple' } + return { key: executorKey, label: '飞飞', color: 'purple' } } if (executorKey === 'manual_dispatch') { - return { label: '人工履约', color: 'orange' } + return { key: executorKey, label: '人工履约', color: 'orange' } + } + return { + key: executorKey, + label: executorKey || '未分配', + color: 'default', } - return { label: executorKey || '未分配执行器', color: 'default' } } function resolveTaskListBlocker(item: AdminTaskListItem): TaskListBlocker { @@ -454,10 +513,11 @@ function resolveTaskListBlocker(item: AdminTaskListItem): TaskListBlocker { ['delivered', 'completed', 'success', 'consumed'].includes(deliveryStatus) ) { return { - label: '已收口', + label: '已完成', color: 'green', - level: 'normal', + level: 'done', detail: item.resultMessage || '履约链路已完成。', + showDetail: false, } } @@ -465,8 +525,9 @@ function resolveTaskListBlocker(item: AdminTaskListItem): TaskListBlocker { return { label: '已关闭', color: 'default', - level: 'normal', + level: 'done', detail: item.resultMessage || item.lastError || '任务已关闭，不会继续自动推进。', + showDetail: false, } } @@ -478,10 +539,11 @@ function resolveTaskListBlocker(item: AdminTaskListItem): TaskListBlocker { ['failed'].includes(deliveryStatus) ) { return { - label: '异常处理', + label: '需处理', color: 'red', level: 'error', detail: errorText || '需要进入详情页按履约层级检查并重试。', + showDetail: true, } } @@ -491,6 +553,7 @@ function resolveTaskListBlocker(item: AdminTaskListItem): TaskListBlocker { color: 'orange', level: 'normal', detail: item.resultMessage || '等待人工回写履约结果。', + showDetail: true, } } @@ -500,6 +563,7 @@ function resolveTaskListBlocker(item: AdminTaskListItem): TaskListBlocker { color: 'gold', level: 'normal', detail: item.resultMessage || '商品还没有命中明确的履约配置。', + showDetail: true, } } @@ -509,10 +573,11 @@ function resolveTaskListBlocker(item: AdminTaskListItem): TaskListBlocker { ) ) { return { - label: '资源层', + label: '等资源', color: 'gold', level: 'normal', - detail: item.resultMessage || '等待准备履约资源，可在详情页触发对应执行器动作。', + detail: item.resultMessage || '等待准备履约资源，可在详情页触发对应动作。', + showDetail: true, } } @@ -522,29 +587,32 @@ function resolveTaskListBlocker(item: AdminTaskListItem): TaskListBlocker { ) ) { return { - label: '客户层', + label: '等客户', color: 'blue', level: 'normal', detail: item.roleConfirmedAt ? '客户已提交角色信息，等待平台履约收口。' : '等待客户打开链接、绑定或提交信息。', + showDetail: true, } } if (deliveryStatus && !['pending', 'not_started'].includes(deliveryStatus)) { return { - label: '平台层', + label: '平台处理中', color: 'cyan', level: 'normal', - detail: item.resultMessage || '平台履约执行中，后续可在详情页按层查看。', + detail: item.resultMessage || '平台履约执行中，可在详情页查看各层进度。', + showDetail: true, } } return { - label: '推进中', + label: '进行中', color: 'blue', level: 'normal', detail: item.resultMessage || '当前没有明确异常，等待任务自动推进。', + showDetail: Boolean(item.resultMessage), } } diff --git a/apps/frontend/src/styles/main.css b/apps/frontend/src/styles/main.css index a22863f5..983ef714 100644 --- a/apps/frontend/src/styles/main.css +++ b/apps/frontend/src/styles/main.css @@ -354,7 +354,47 @@ select { } .task-list-blocker-detail { - max-width: 240px; + max-width: 220px; + display: block; +} + +.task-list-blocker-tag, +.task-list-executor-tag { + width: fit-content; + max-width: 100%; + margin-inline-end: 0 !important; + justify-self: start; + line-height: 18px; + font-size: 12px; +} + +.task-list-status-main { + display: inline-flex; + cursor: help; +} + +.task-list-status-tooltip { + display: grid; + gap: 6px; +} + +.task-list-status-tooltip-row { + display: flex; + align-items: center; + gap: 8px; +} + +.task-list-status-tooltip-row > span:first-child { + min-width: 2em; + color: rgba(255, 255, 255, 0.75); +} + +.task-list-row-error > td { + background: #fff7f7 !important; +} + +.task-list-row-error:hover > td { + background: #ffefef !important; } .fulfillment-overview-grid {