From 694d7fff40efb832a90eb77637bb0053808916b8 Mon Sep 17 00:00:00 2001 From: yml2213 Date: Sat, 12 Sep 2026 19:23:51 +0800 Subject: [PATCH] =?UTF-8?q?feat(worker):=20=E5=94=AE=E5=90=8E=E9=97=AE?= =?UTF-8?q?=E9=A2=98=E5=8D=95=E5=8E=BB=E9=99=A4=E4=BA=BA=E5=B7=A5=E5=B1=85?= =?UTF-8?q?=E4=B8=AD=E5=AE=BD=E5=BA=A6=E9=99=90=E5=88=B6=EF=BC=8C=E7=BB=9F?= =?UTF-8?q?=E4=B8=80Tabs=E5=88=87=E6=8D=A2=E5=B9=B6=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E5=B7=B2=E7=BB=93=E6=A1=88=E9=BB=98=E8=AE=A4=E6=8A=98=E5=8F=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/worker/WorkerAfterSalesPage.tsx | 945 ++++++++++-------- apps/frontend/src/styles/worker.css | 436 +++----- 2 files changed, 667 insertions(+), 714 deletions(-) diff --git a/apps/frontend/src/pages/worker/WorkerAfterSalesPage.tsx b/apps/frontend/src/pages/worker/WorkerAfterSalesPage.tsx index c9b1ba19..69e593e7 100644 --- a/apps/frontend/src/pages/worker/WorkerAfterSalesPage.tsx +++ b/apps/frontend/src/pages/worker/WorkerAfterSalesPage.tsx @@ -1,14 +1,15 @@ import { AlertOutlined, AuditOutlined, - CheckCircleFilled, CheckCircleOutlined, ClockCircleOutlined, CloseCircleOutlined, DollarCircleOutlined, + DownOutlined, FormOutlined, ReloadOutlined, SafetyCertificateOutlined, + UpOutlined, UserOutlined, } from '@ant-design/icons' import { useQuery, useQueryClient } from '@tanstack/react-query' @@ -16,12 +17,13 @@ import { App, Alert, Button, + Card, Empty, Form, Input, Modal, - Segmented, Space, + Tabs, Tag, Typography, } from 'antd' @@ -45,14 +47,6 @@ type StatusFilter = | 'recovery_pending' | 'closed' -const STATUS_FILTERS: Array<{ value: StatusFilter; label: string }> = [ - { value: 'all', label: '全部' }, - { value: 'awaiting_worker_response', label: '待说明' }, - { value: 'under_review', label: '处理中' }, - { value: 'recovery_pending', label: '追缴中' }, - { value: 'closed', label: '已关闭' }, -] - /** 待办优先：待说明 > 处理中 > 追缴中 > 已关闭，同状态按发起时间倒序。 */ const STATUS_WEIGHT: Record = { awaiting_worker_response: 0, @@ -68,7 +62,7 @@ export function formatWorkerAfterSalesStatus(status: string) { if (status === 'awaiting_worker_response') return '待说明' if (status === 'under_review') return '处理中' if (status === 'recovery_pending') return '追缴中' - return '已关闭' + return '已结案' } export function resolveWorkerAfterSalesStatusColor(status: string) { @@ -126,14 +120,17 @@ export default function WorkerAfterSalesPage() { }) const allCases = afterSalesCasesQuery.data?.data.items || [] const pendingCount = allCases.filter((item) => item.status === 'awaiting_worker_response').length - const countByFilter = useMemo(() => { - const counts: Record = { all: allCases.length } - for (const filter of STATUS_FILTERS) { - if (filter.value === 'all') continue - counts[filter.value] = allCases.filter((item) => matchesFilter(item, filter.value)).length - } - return counts - }, [allCases]) + const reviewCount = allCases.filter((item) => item.status === 'under_review').length + const recoveryCount = allCases.filter((item) => item.status === 'recovery_pending').length + const closedCount = allCases.filter((item) => isAfterSalesClosed(item.status)).length + + const countByFilter: Record = { + all: allCases.length, + awaiting_worker_response: pendingCount, + under_review: reviewCount, + recovery_pending: recoveryCount, + closed: closedCount, + } const afterSalesCases = useMemo( () => @@ -147,140 +144,90 @@ export default function WorkerAfterSalesPage() { [allCases, statusFilter], ) - return ( -
- {/* 待办紧急提醒横幅 */} - {pendingCount > 0 ? ( -
-
- - + const tabItems = [ + { + key: 'all', + label: ( + + 全部售后 + {countByFilter.all > 0 ? ( + {countByFilter.all} + ) : null} + + ), + }, + { + key: 'awaiting_worker_response', + label: ( + + 待我说明 + {countByFilter.awaiting_worker_response > 0 ? ( + + {countByFilter.awaiting_worker_response} -
-
- 您有 {pendingCount} 笔售后单待提交说明 -
-
- 买家已发起售后投诉，请尽快提交完成凭据或情况答辩，逾期可能影响您的资金与接单等级。 -
-
-
- -
- ) : null} + ) : null} + + ), + }, + { + key: 'under_review', + label: ( + + 平台处理中 + {countByFilter.under_review > 0 ? ( + {countByFilter.under_review} + ) : null} + + ), + }, + { + key: 'recovery_pending', + label: ( + + 待追缴/扣款 + {countByFilter.recovery_pending > 0 ? ( + + {countByFilter.recovery_pending} + + ) : null} + + ), + }, + { + key: 'closed', + label: ( + + 已结案 + {countByFilter.closed > 0 ? ( + {countByFilter.closed} + ) : null} + + ), + }, + ] - {/* 4卡片争议处理概览网格 */} -
-
- setStatusFilter( - statusFilter === 'awaiting_worker_response' ? 'all' : 'awaiting_worker_response', - ) - } - > -
- -
-
-
- 待我举证 - {pendingCount > 0 && } -
-
{countByFilter.awaiting_worker_response || 0}
-
- {pendingCount > 0 ? `${pendingCount} 笔需紧急说明` : '暂无待处理'} -
-
-
- -
setStatusFilter(statusFilter === 'under_review' ? 'all' : 'under_review')} - > -
- -
-
-
平台仲裁中
-
{countByFilter.under_review || 0}
-
客服公正审核中
-
-
- -
- setStatusFilter(statusFilter === 'recovery_pending' ? 'all' : 'recovery_pending') - } - > -
- -
-
-
待追缴/扣款
-
{countByFilter.recovery_pending || 0}
-
存在待追缴或抵扣款
-
-
- -
setStatusFilter(statusFilter === 'closed' ? 'all' : 'closed')} - > -
- -
-
-
已结案归档
-
{countByFilter.closed || 0}
-
历史完结记录
-
-
-
- - {/* 桌面端与移动端顶部筛选与控制栏 */} -
-
- - 售后维权与工单仲裁 + return ( +
+ {/* 桌面端标准整合头部 (与“我的订单”与“接单大厅”全局保持一致) */} +
+
+ + 售后问题单 - 共 {allCases.length} 笔工单记录 + {pendingCount > 0 ? ( + + + {pendingCount} 笔待提交说明 + + ) : ( + + + 工单售后与申诉仲裁 + + )}
-
- ({ - value: filter.value, - label: ( - - {filter.label} - {countByFilter[filter.value] > 0 ? ( - - {countByFilter[filter.value]} - - ) : null} - - ), - }))} - value={statusFilter} - onChange={(value) => setStatusFilter(value as StatusFilter)} - block={isMobile} - /> -
- -
+
- {afterSalesCasesQuery.isLoading ? ( -
- 正在加载售后问题单… + {/* 4 栏工单态势 KPI 仪表盘 (与接单平台全局 KPI 网格一致) */} +
+ {/* 卡片 1: 待我说明 */} +
+ setStatusFilter( + statusFilter === 'awaiting_worker_response' ? 'all' : 'awaiting_worker_response', + ) + } + > +
+
+ +
+
+ 待我举证说明 + + {pendingCount} + 单 + +
+
+
+ + {pendingCount > 0 ? '需尽快提交情况说明' : '暂无待处理'} + +
- ) : afterSalesCasesQuery.isError ? ( - - ) : afterSalesCases.length === 0 ? ( -
- setStatusFilter(statusFilter === 'under_review' ? 'all' : 'under_review')} + > +
+
+ +
+
+ 平台仲裁中 + + {reviewCount} + 单 + +
+
+
+ 客服公正审理审核中 +
+
+ + {/* 卡片 3: 待追缴/扣款 */} +
+ setStatusFilter(statusFilter === 'recovery_pending' ? 'all' : 'recovery_pending') + } + > +
+
+ +
+
+ 待追缴/扣款 + + {recoveryCount} + 单 + +
+
+
+ 存在待抵扣补缴资金 +
+
+ + {/* 卡片 4: 已完结/已结案 */} +
setStatusFilter(statusFilter === 'closed' ? 'all' : 'closed')} + > +
+
+ +
+
+ 已结案归档 + + {closedCount} + 单 + +
+
+
+ 历史完结记录 (默认折叠) +
+
+
+ + {/* 主卡片：统一 AntD Tabs 标签切换与售后单列表 */} + + + setStatusFilter(key as StatusFilter)} /> -
- ) : ( -
- {afterSalesCases.map((item) => ( - - ))} -
- )} + + {afterSalesCasesQuery.isLoading ? ( +
+ 正在加载售后问题单… +
+ ) : afterSalesCasesQuery.isError ? ( + + ) : afterSalesCases.length === 0 ? ( +
+ +
+ ) : ( +
+ {afterSalesCases.map((item) => ( + + ))} +
+ )} + +
) } @@ -333,6 +391,10 @@ function WorkerAfterSalesItem({ const [files, setFiles] = useState([]) const [form] = Form.useForm() + const isClosed = isAfterSalesClosed(item.status) + // 关闭完成的默认折叠，未关闭的默认展开 + const [collapsed, setCollapsed] = useState(isClosed) + async function submit(values: AfterSalesResponseFormValues) { const response = String(values.response || '').trim() if (!response && files.length === 0) { @@ -364,250 +426,329 @@ function WorkerAfterSalesItem({ return ( <> -
- {/* 卡片头部：状态、问题类型、工单标题、订单单号 */} -
-
- - - {formatWorkerAfterSalesStatus(item.status)} - - - {formatWorkerAfterSalesProblemType(item.problemType)} - - - {item.productName || item.caseNo} - - {item.shareQuantity ? ( - 拼单 {item.shareQuantity} 份 - ) : null} -
- -
- - - 发起 {formatDateTime(item.createdAt)} - - - 工单 {item.workOrderNo || item.caseNo} - - - 售后单 {item.caseNo} - -
-
- - {/* 主体对比区域：买家投诉诉求 vs 打手答辩举证 (并排双列) */} -
- {/* 左列：买家投诉诉求 */} -
-
-
- -
- 买家投诉诉求 -
-
-
- {item.complaintNote ? ( -

{item.complaintNote}

- ) : ( -

买家未填写文字描述

- )} -
- {item.complaintFiles.length > 0 && ( -
-
- 买家举证材料 ({item.complaintFiles.length})： -
- -
- )} -
-
- - {/* 右列：打手答辩与举证 */} -
-
-
- -
- 我的答辩与说明 - {item.respondedAt && ( - - 提交于 {formatDateTime(item.respondedAt)} +
+ {/* 折叠状态下的紧凑单行摘要 */} + {collapsed ? ( +
setCollapsed(false)}> +
+ + + {formatWorkerAfterSalesStatus(item.status)} + + + {formatWorkerAfterSalesProblemType(item.problemType)} + + + {item.productName || item.caseNo} + + {resolutionLabel ? ( + + {resolutionLabel} + + ) : null} + {Number(item.recoveryAmount || 0) > 0 ? ( + + 追缴 {formatMoney(item.recoveryAmount)} - )} + ) : null}
- {item.workerResponse || item.workerResponseFiles.length > 0 ? ( -
-
- {item.workerResponse ? ( -

{item.workerResponse}

- ) : null} -
- {item.workerResponseFiles.length > 0 && ( -
-
- 补救举证材料 ({item.workerResponseFiles.length})： -
- -
- )} +
e.stopPropagation()}> + 发起 {formatDateTime(item.createdAt)} + + 工单 {item.workOrderNo || item.caseNo} + + +
+
+ ) : ( + /* 展开状态下的完整详情视图 */ + <> + {/* 卡片头部：状态、问题类型、工单标题、订单单号、收起按钮 */} +
+
+ + + {formatWorkerAfterSalesStatus(item.status)} + + + {formatWorkerAfterSalesProblemType(item.problemType)} + + + {item.productName || item.caseNo} + + {item.shareQuantity ? ( + 拼单 {item.shareQuantity} 份 + ) : null}
- ) : item.status === 'awaiting_worker_response' ? ( -
-
-
- -
-
-

等待您提交说明材料

-

- 买家已发起售后申诉，请针对上述问题提交文字说明或补救凭据，以便平台客服公允判定。 -

-
-
-
- ) : item.status === 'under_review' ? ( -
- -

- 未补充文字材料，平台客服正在结合买家举证与订单原始验收凭据进行裁决审核。 -

-
- ) : ( -
- -

本工单已结案（未补充答辩记录）

-
- )} -
-
- - {/* 底部横幅：平台仲裁裁决与资金明细 */} - {resolutionLabel || - item.resolutionNote || - hasRecoveryDetail || - item.status === 'under_review' ? ( -
-
-
- - - - 平台仲裁判定 - {resolutionLabel ? ( - - {item.resolutionAction === 'upheld' && ( - - )} - {item.resolutionAction === 'not_upheld' && ( - - )} - {resolutionLabel} - - ) : item.status === 'under_review' ? ( - - 客服审核中 - - ) : null} - {item.resolvedAt ? ( - - 裁决时间：{formatDateTime(item.resolvedAt)} - - ) : null} -
- {item.resolutionNote && ( -
- 判定说明： - {item.resolutionNote} -
- )} - - {hasRecoveryDetail && ( -
- 资金处理明细： -
- {Number(item.recoveryAmount || 0) > 0 && ( - - 追缴金额 - {formatMoney(item.recoveryAmount)} - - )} - {Number(item.pendingDepositDeductionAmount || 0) > 0 && ( - - 待解冻资金抵扣 - - {formatMoney(item.pendingDepositDeductionAmount)} - - - )} - {Number(item.availableDeductionAmount || 0) > 0 && ( - - 余额抵扣 - - {formatMoney(item.availableDeductionAmount)} - - - )} - {Number(item.debtAmount || 0) > 0 && ( - - 待追缴欠款 - {formatMoney(item.debtAmount)} - （后续报酬自动抵扣） - - )} - {Number(item.refundedAmount || 0) > 0 && ( - - 退还追缴 - {formatMoney(item.refundedAmount)} - （已入可用余额） - + {/* 主体对比区域：买家投诉诉求 vs 打手答辩举证 (并排双列) */} +
+ {/* 左列：买家投诉诉求 */} +
+
+
+ +
+ 买家投诉诉求 +
+
+
+ {item.complaintNote ? ( +

{item.complaintNote}

+ ) : ( +

买家未填写文字描述

+ )} +
+ {item.complaintFiles.length > 0 && ( +
+
+ 买家举证材料 ({item.complaintFiles.length})： +
+ +
)}
- )} -
- ) : null} + + {/* 右列：打手答辩与举证 */} +
+
+
+ +
+ 我的答辩与说明 + {item.respondedAt && ( + + 提交于 {formatDateTime(item.respondedAt)} + + )} +
+ + {item.workerResponse || item.workerResponseFiles.length > 0 ? ( +
+
+ {item.workerResponse ? ( +

{item.workerResponse}

+ ) : null} +
+ {item.workerResponseFiles.length > 0 && ( +
+
+ 补救举证材料 ({item.workerResponseFiles.length})： +
+ +
+ )} +
+ ) : item.status === 'awaiting_worker_response' ? ( +
+
+
+ +
+
+

等待您提交说明材料

+

+ 买家已发起售后申诉，请针对上述问题提交文字说明或补救凭据，以便平台客服公允判定。 +

+
+
+ +
+ ) : item.status === 'under_review' ? ( +
+ +

+ 未补充文字材料，平台客服正在结合买家举证与订单原始验收凭据进行裁决审核。 +

+
+ ) : ( +
+ +

本工单已结案（未补充答辩记录）

+
+ )} +
+
+ + {/* 底部横幅：平台仲裁裁决与资金明细 */} + {resolutionLabel || + item.resolutionNote || + hasRecoveryDetail || + item.status === 'under_review' ? ( +
+
+
+ + + + 平台仲裁判定 + {resolutionLabel ? ( + + {item.resolutionAction === 'upheld' && ( + + )} + {item.resolutionAction === 'not_upheld' && ( + + )} + {resolutionLabel} + + ) : item.status === 'under_review' ? ( + + 客服审核中 + + ) : null} + {item.resolvedAt ? ( + + 裁决时间：{formatDateTime(item.resolvedAt)} + + ) : null} +
+
+ + {item.resolutionNote && ( +
+ 判定说明： + {item.resolutionNote} +
+ )} + + {hasRecoveryDetail && ( +
+ 资金处理明细： +
+ {Number(item.recoveryAmount || 0) > 0 && ( + + 追缴金额 + {formatMoney(item.recoveryAmount)} + + )} + {Number(item.pendingDepositDeductionAmount || 0) > 0 && ( + + 待解冻资金抵扣 + + {formatMoney(item.pendingDepositDeductionAmount)} + + + )} + {Number(item.availableDeductionAmount || 0) > 0 && ( + + 余额抵扣 + + {formatMoney(item.availableDeductionAmount)} + + + )} + {Number(item.debtAmount || 0) > 0 && ( + + 待追缴欠款 + {formatMoney(item.debtAmount)} + （后续报酬自动抵扣） + + )} + {Number(item.refundedAmount || 0) > 0 && ( + + 退还追缴 + {formatMoney(item.refundedAmount)} + （已入可用余额） + + )} +
+
+ )} +
+ ) : null} + + )}
{/* 提交说明材料弹窗 */} diff --git a/apps/frontend/src/styles/worker.css b/apps/frontend/src/styles/worker.css index 59f65d30..dcc32a5b 100644 --- a/apps/frontend/src/styles/worker.css +++ b/apps/frontend/src/styles/worker.css @@ -2794,312 +2794,154 @@ body { /* ===== 售后争议与工单仲裁中心 (打手端) ===== */ .worker-after-sales-page { - max-width: 1240px; - margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 16px; - padding-bottom: 32px; } -/* 待办紧急提醒横幅 */ -.worker-as-pending-alert { - display: flex; - align-items: center; - justify-content: space-between; - gap: 16px; - padding: 14px 20px; - background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); - border: 1px solid #fde68a; - border-radius: 14px; - box-shadow: 0 4px 14px -2px rgba(245, 158, 11, 0.12); -} - -.worker-as-alert-left { - display: flex; - align-items: center; - gap: 14px; -} - -.worker-as-alert-icon-wrap { - display: flex; - align-items: center; - justify-content: center; - width: 40px; - height: 40px; - border-radius: 10px; - background: #f59e0b; - color: #ffffff; - font-size: 20px; - flex-shrink: 0; - box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3); -} - -.worker-as-alert-title { - font-size: 15px; - font-weight: 700; - color: #92400e; - line-height: 1.4; -} - -.worker-as-alert-title strong { - font-size: 17px; - color: #b45309; -} - -.worker-as-alert-desc { - font-size: 13px; - color: #b45309; - margin-top: 2px; - line-height: 1.4; -} - -.worker-as-alert-btn { - background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; - border: none !important; - font-weight: 600 !important; - height: 38px !important; - padding: 0 18px !important; - border-radius: 8px !important; - box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25) !important; - flex-shrink: 0; -} - -/* 4卡片争议处理概览网格 */ -.worker-as-kpi-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 14px; -} - -.worker-as-kpi-card { - background: #ffffff; - border: 1px solid #e2e8f0; - border-radius: 14px; - padding: 16px 18px; - display: flex; - align-items: center; - gap: 14px; - cursor: pointer; - transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); - box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03); -} - -.worker-as-kpi-card:hover { - transform: translateY(-2px); - border-color: #cbd5e1; - box-shadow: 0 6px 16px -2px rgba(15, 23, 42, 0.08); -} - -.worker-as-kpi-card.is-active { - border-color: #2563eb; - background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%); - box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12); -} - -.worker-as-kpi-icon-wrap { - display: flex; - align-items: center; - justify-content: center; - width: 44px; - height: 44px; - border-radius: 12px; - font-size: 20px; - flex-shrink: 0; -} - -.worker-as-kpi-icon-wrap.amber { - background: #fffbeb; - color: #d97706; -} - -.worker-as-kpi-icon-wrap.blue { - background: #eff6ff; - color: #2563eb; -} - -.worker-as-kpi-icon-wrap.rose { - background: #fff1f2; - color: #e11d48; -} - -.worker-as-kpi-icon-wrap.emerald { - background: #ecfdf5; - color: #059669; -} - -.worker-as-kpi-info { - flex: 1; - min-width: 0; -} - -.worker-as-kpi-label { - display: flex; +.worker-after-sales-alert-pill { + display: inline-flex; align-items: center; gap: 6px; - font-size: 13px; - color: #64748b; - font-weight: 500; + font-size: 12px; + font-weight: 600; + color: #ea580c; + background: #fff7ed; + border: 1px solid #fed7aa; + padding: 2px 10px; + border-radius: 9999px; } -.worker-as-kpi-pulse-dot { +.worker-after-sales-pulse-dot { width: 7px; height: 7px; border-radius: 50%; - background: #ef4444; - box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); + background: #f97316; + box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7); animation: worker-after-sales-pulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1); } @keyframes worker-after-sales-pulse { 0% { transform: scale(0.95); - box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); + box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7); } 70% { transform: scale(1); - box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); + box-shadow: 0 0 0 6px rgba(249, 115, 22, 0); } 100% { transform: scale(0.95); - box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); + box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); } } -.worker-as-kpi-value { - font-size: 22px; - font-weight: 800; - color: #0f172a; - line-height: 1.2; - margin: 2px 0; - font-feature-settings: 'tnum'; -} - -.worker-as-kpi-sub { - font-size: 11px; - color: #94a3b8; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -/* 头部筛选工具栏 */ -.worker-after-sales-desktop-header { - display: flex; - align-items: center; - justify-content: space-between; - gap: 16px; - background: #ffffff; - padding: 14px 20px; - border-radius: 14px; - border: 1px solid #e2e8f0; - box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); -} - -.worker-after-sales-header-left { - display: flex; - align-items: center; - gap: 10px; - flex-shrink: 0; -} - -.worker-after-sales-heading.ant-typography { - margin: 0 !important; - font-size: 18px !important; - font-weight: 700 !important; - color: #0f172a !important; - letter-spacing: -0.02em; -} - -.worker-as-total-badge { - display: inline-flex; - align-items: center; - font-size: 12px; - font-weight: 500; - color: #64748b; - background: #f1f5f9; - padding: 2px 9px; - border-radius: 9999px; -} - -.worker-after-sales-header-center { - flex: 1; - max-width: 460px; -} - -.worker-after-sales-segmented { - background: #f1f5f9; - padding: 3px; - border-radius: 8px; -} - -.worker-after-sales-filter-count { - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 18px; - height: 18px; - padding: 0 5px; - border-radius: 9px; - background: #e6f4ff; - color: #1677ff; - font-size: 11px; - line-height: 1; - font-weight: 600; -} - -.worker-after-sales-header-right { - flex-shrink: 0; -} - .worker-as-loading-state, .worker-as-empty-card { background: #ffffff; border: 1px solid #e2e8f0; - border-radius: 14px; + border-radius: 12px; padding: 48px 20px; text-align: center; } -/* 售后列表与卡片 */ +/* 售后单列表 */ .worker-after-sales-list { display: flex; flex-direction: column; - gap: 16px; + gap: 12px; } +/* 售后卡片容器 */ .worker-as-case-card { background: #ffffff; border: 1px solid #e2e8f0; - border-radius: 16px; + border-radius: 12px; overflow: hidden; - box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.04); + box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .worker-as-case-card:hover { border-color: #cbd5e1; - box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08); + box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); } .worker-as-case-card.is-status-awaiting_worker_response { - border-left: 4px solid #f59e0b; + border-left: 3px solid #f59e0b; } .worker-as-case-card.is-status-under_review { - border-left: 4px solid #3b82f6; + border-left: 3px solid #3b82f6; } .worker-as-case-card.is-status-recovery_pending { - border-left: 4px solid #ef4444; + border-left: 3px solid #ef4444; } .worker-as-case-card.is-status-closed { - border-left: 4px solid #10b981; + border-left: 3px solid #10b981; } -/* 卡片顶部元数据条 */ +/* ===== 折叠单行紧凑视图 (已关闭案件默认折叠) ===== */ +.worker-as-case-card.is-collapsed { + border-radius: 10px; +} + +.worker-as-collapsed-row { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 16px; + gap: 12px; + cursor: pointer; + user-select: none; +} + +.worker-as-collapsed-left { + display: flex; + align-items: center; + gap: 10px; + flex-wrap: wrap; + flex: 1; + min-width: 0; +} + +.worker-as-product-title-collapsed { + font-size: 14px !important; + color: #0f172a !important; + font-weight: 600 !important; + max-width: 360px; +} + +.worker-as-recovery-brief { + font-size: 12px; + color: #dc2626; + font-weight: 700; + background: #fef2f2; + border: 1px solid #fecaca; + padding: 1px 8px; + border-radius: 6px; +} + +.worker-as-collapsed-right { + display: flex; + align-items: center; + gap: 14px; + flex-shrink: 0; +} + +.worker-as-toggle-btn { + font-size: 13px !important; + font-weight: 500 !important; + display: inline-flex !important; + align-items: center !important; + padding: 0 4px !important; +} + +/* ===== 展开详情完整视图 ===== */ +/* 卡片头部 */ .worker-as-card-header { display: flex; align-items: center; @@ -3169,7 +3011,7 @@ body { font-size: 15px !important; font-weight: 700 !important; color: #0f172a !important; - max-width: 340px; + max-width: 360px; } .worker-as-share-tag { @@ -3216,13 +3058,13 @@ body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; - padding: 18px 20px; + padding: 16px 18px; } .worker-as-col { display: flex; flex-direction: column; - gap: 10px; + gap: 8px; } .worker-as-col-header { @@ -3235,10 +3077,10 @@ body { display: flex; align-items: center; justify-content: center; - width: 24px; - height: 24px; + width: 22px; + height: 22px; border-radius: 50%; - font-size: 12px; + font-size: 11px; } .worker-as-avatar-pill.buyer { @@ -3266,13 +3108,13 @@ body { .worker-as-box { background: #f8fafc; border: 1px solid #e2e8f0; - border-radius: 12px; - padding: 14px 16px; - min-height: 120px; + border-radius: 10px; + padding: 12px 14px; + min-height: 100px; display: flex; flex-direction: column; justify-content: space-between; - gap: 12px; + gap: 10px; } .worker-as-box.buyer-box { @@ -3312,8 +3154,8 @@ body { .worker-as-box-files { border-top: 1px solid rgba(0, 0, 0, 0.05); - padding-top: 10px; - margin-top: 4px; + padding-top: 8px; + margin-top: 2px; } .worker-as-files-label { @@ -3332,8 +3174,8 @@ body { align-items: center; justify-content: center; text-align: center; - padding: 20px; - gap: 14px; + padding: 16px; + gap: 12px; } .worker-as-cta-content { @@ -3347,12 +3189,12 @@ body { display: flex; align-items: center; justify-content: center; - width: 40px; - height: 40px; + width: 38px; + height: 38px; border-radius: 10px; background: #fef3c7; color: #d97706; - font-size: 20px; + font-size: 18px; flex-shrink: 0; } @@ -3374,10 +3216,10 @@ body { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; border: none !important; font-weight: 600 !important; - height: 36px !important; - padding: 0 20px !important; + height: 34px !important; + padding: 0 18px !important; border-radius: 8px !important; - box-shadow: 0 2px 6px rgba(217, 119, 6, 0.25) !important; + box-shadow: 0 2px 6px rgba(217, 119, 6, 0.2) !important; align-self: center; } @@ -3389,7 +3231,7 @@ body { flex-direction: row; align-items: center; gap: 10px; - padding: 16px; + padding: 14px; } .worker-as-neutral-icon { @@ -3407,12 +3249,12 @@ body { /* 底部仲裁裁决横幅 */ .worker-as-resolution-banner { - background: #f8fafc; - border-top: 1px solid #e2e8f0; - padding: 14px 20px; + background: #fafbfc; + border-top: 1px solid #eef2f6; + padding: 12px 18px; display: flex; flex-direction: column; - gap: 10px; + gap: 8px; } .worker-as-resolution-banner.is-pending { @@ -3437,12 +3279,12 @@ body { display: flex; align-items: center; justify-content: center; - width: 22px; - height: 22px; - border-radius: 6px; + width: 20px; + height: 20px; + border-radius: 5px; background: #1e293b; color: #ffffff; - font-size: 12px; + font-size: 11px; } .worker-as-resolution-title { @@ -3507,8 +3349,8 @@ body { display: inline-flex; align-items: center; gap: 6px; - padding: 4px 10px; - border-radius: 8px; + padding: 3px 9px; + border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.2; @@ -3589,52 +3431,22 @@ body { } /* 响应式调整 */ -@media (max-width: 992px) { - .worker-as-kpi-grid { - grid-template-columns: repeat(2, 1fr); - } -} - @media (max-width: 768px) { - .worker-as-kpi-grid { - grid-template-columns: repeat(2, 1fr); - gap: 10px; - } - .worker-as-kpi-card { - padding: 12px 14px; - gap: 10px; - } - .worker-as-kpi-icon-wrap { - width: 38px; - height: 38px; - font-size: 18px; - } - .worker-as-kpi-value { - font-size: 18px; - } - .worker-as-pending-alert { - flex-direction: column; - align-items: flex-start; - } - .worker-as-alert-btn { - width: 100%; - } - .worker-after-sales-desktop-header { - flex-direction: column; - align-items: stretch; - } - .worker-after-sales-header-center { - max-width: 100%; - } .worker-as-card-body { grid-template-columns: 1fr; - padding: 14px; + padding: 12px; } .worker-as-card-header { padding: 10px 14px; } - .worker-as-product-title { - max-width: 100%; + .worker-as-collapsed-row { + flex-direction: column; + align-items: flex-start; + gap: 8px; + } + .worker-as-collapsed-right { + width: 100%; + justify-content: space-between; } }