feat:咖啡机优化

.gitignore

@@ -10,6 +10,7 @@
 # 临时文件
 *.tmp
 *.temp
+/tmp
 
 # 日志文件
 *.log

src/views/hard/hard-coffee-log/index.vue

@@ -40,57 +40,101 @@
 						style="float: right" @queryTable="getDataList(false)"></right-toolbar>
 				</div>
 			</el-row>
-			<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-				:header-cell-style="tableStyle.headerCellStyle">
+			<el-table :data="state.dataList" v-loading="state.loading" border :header-cell-style="tableStyle.headerCellStyle"
+				:row-class-name="rowClassName">
 				<el-table-column type="index" label="#" width="50" align="center" />
-				<el-table-column prop="startTime" label="发生时间" width="170" show-overflow-tooltip />
-				<el-table-column label="阶段" width="150">
+				<el-table-column width="260" label="事件">
 					<template #default="{ row }">
-						<el-tag :type="stageMeta(row.stage).tagType" size="small" effect="light">
-							{{ stageMeta(row.stage).label }}
-						</el-tag>
+						<div class="log-event__tags">
+							<el-tag :type="stageMeta(row.stage).tagType" size="small" effect="light">
+								{{ stageMeta(row.stage).label }}
+							</el-tag>
+							<el-tag :type="row.direction === '2' ? 'warning' : 'info'" size="small" effect="plain">
+								{{ row.direction === "2" ? "厂商调我方" : "我方调厂商" }}
+							</el-tag>
+						</div>
+						<div v-if="row.title" class="log-event__title" :title="row.title">{{ row.title }}</div>
+						<el-tooltip v-if="row.error" :content="row.error" placement="top-start">
+							<div class="log-event__error">{{ row.error }}</div>
+						</el-tooltip>
 					</template>
 				</el-table-column>
-				<el-table-column label="方向" width="100">
+				<el-table-column width="200" label="发生时间">
 					<template #default="{ row }">
-						<el-tag :type="row.direction === '2' ? 'warning' : 'info'" size="small" effect="plain">
-							{{ row.direction === "2" ? "厂商调我方" : "我方调厂商" }}
-						</el-tag>
+						<div class="status">
+							<span>发生时间</span>
+							<span>{{ row.startTime || "-" }}</span>
+						</div>
+						<div class="status">
+							<span>耗时</span>
+							<span :class="{ 'log-cost--slow': isSlowCost(row.cost) }">{{ formatCost(row.cost) }}</span>
+						</div>
 					</template>
 				</el-table-column>
-				<el-table-column prop="title" label="说明" min-width="150" show-overflow-tooltip />
-				<el-table-column prop="orderNo" label="厂商订单号" min-width="170" show-overflow-tooltip />
-				<el-table-column prop="uniqueCode" label="机器号" width="110" show-overflow-tooltip />
-				<el-table-column prop="orderId" label="本地订单ID" width="150" show-overflow-tooltip />
-				<el-table-column prop="cost" label="耗时" width="90">
-					<template #default="{ row }">{{ row.cost != null ? row.cost + "ms" : "-" }}</template>
-				</el-table-column>
-				<el-table-column prop="error" label="错误" min-width="150" show-overflow-tooltip>
+				<el-table-column min-width="230" label="订单信息">
 					<template #default="{ row }">
-						<span :class="{ 'text-[var(--el-color-danger)]': row.error }">{{ row.error || "-" }}</span>
+						<div class="log-order">
+							<div class="log-order__line">
+								<span class="log-order__label">厂商订单号</span>
+								<el-tooltip v-if="row.orderNo" :content="row.orderNo" placement="top-start">
+									<span class="log-order__value">{{ row.orderNo }}</span>
+								</el-tooltip>
+								<span v-else class="log-order__value">-</span>
+							</div>
+							<div class="log-order__line">
+								<span class="log-order__label">机器号</span>
+								<span class="log-order__value">{{ row.uniqueCode || "-" }}</span>
+								<span class="log-order__label log-order__label--gap">本地ID</span>
+								<el-tooltip v-if="row.orderId" :content="row.orderId" placement="top-start">
+									<span class="log-order__value">{{ row.orderId }}</span>
+								</el-tooltip>
+								<span v-else class="log-order__value">-</span>
+							</div>
+						</div>
 					</template>
 				</el-table-column>
-				<el-table-column prop="req" label="请求报文" width="100">
+				<el-table-column width="130" label="交互报文">
 					<template #default="{ row }">
-						<preview-json v-if="row.req" :json="row.req" />
-						<span v-else>-</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="res" label="响应报文" width="100">
-					<template #default="{ row }">
-						<preview-json v-if="row.res" :json="row.res" />
-						<span v-else>-</span>
+						<div v-if="row.req || row.res" class="log-payload">
+							<el-button v-if="row.req" link type="primary" size="small"
+								@click="openPayload('请求报文', row.req)">
+								请求
+							</el-button>
+							<el-button v-if="row.res" link type="primary" size="small"
+								@click="openPayload('响应报文', row.res)">
+								响应
+							</el-button>
+						</div>
+						<span v-else class="log-payload__empty">-</span>
 					</template>
 				</el-table-column>
 			</el-table>
 			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
 		</div>
+
+		<!-- 报文查看弹窗:格式化高亮展示厂商交互 JSON,便于排查签名与参数问题 -->
+		<el-dialog v-model="payloadDialog.visible" :title="payloadDialog.title" width="640px" append-to-body>
+			<div v-loading="false" class="log-payload-dialog">
+				<vue-json-pretty v-if="payloadDialog.parsed !== undefined" :data="payloadDialog.parsed" showLength
+					showLineNumber showIcon :collapsedOnClickBrackets="false" />
+				<pre v-else class="log-payload-dialog__raw">{{ payloadDialog.raw }}</pre>
+			</div>
+			<template #footer>
+				<el-button @click="copyPayload">复制原文</el-button>
+				<el-button type="primary" @click="payloadDialog.visible = false">关闭</el-button>
+			</template>
+		</el-dialog>
 	</div>
 </template>
 
 <script setup lang="ts" name="hardCoffeeLog">
 import { BasicTableProps, useTable } from "/@/hooks/table"
 import * as hardCoffeeApi from "/@/api/hard/hard-coffee"
+import { useMessage } from "/@/hooks/message"
+import VueJsonPretty from "vue-json-pretty"
+import "vue-json-pretty/lib/styles.css"
+
+const message = useMessage()
 
 /** 阶段筛选与展示选项,编码与后端 HardCoffeeLogStageEnum 保持一致。 */
 const STAGE_OPTIONS: Record<string, { label: string; tagType: "primary" | "success" | "warning" | "danger" | "info" }> = {
@@ -107,6 +151,51 @@ function stageMeta(stage?: string) {
 	return STAGE_OPTIONS[String(stage || "")] || { label: stage || "未知阶段", tagType: "info" as const }
 }
 
+/** 慢于该阈值(毫秒)的调用以警示色提示,文字仍带 ms 单位不单靠颜色传达。 */
+const SLOW_COST_MS = 1000
+
+function formatCost(cost?: number | null): string {
+	return cost != null ? `${cost}ms` : "-"
+}
+
+function isSlowCost(cost?: number | null): boolean {
+	return cost != null && cost > SLOW_COST_MS
+}
+
+/** 出错日志整行淡红底色,与时间线卡片的错误样式保持一致。 */
+function rowClassName({ row }: any): string {
+	return row.error ? "coffee-log-row--error" : ""
+}
+
+/** 报文查看弹窗状态;parsed 为 undefined 表示原文不是合法 JSON,回退为纯文本展示。 */
+const payloadDialog = reactive<{ visible: boolean; title: string; raw: string; parsed?: unknown }>({
+	visible: false,
+	title: "",
+	raw: "",
+})
+
+function openPayload(title: string, raw?: string | null) {
+	if (!raw) return
+	payloadDialog.title = title
+	payloadDialog.raw = raw
+	try {
+		payloadDialog.parsed = JSON.parse(raw)
+	} catch {
+		payloadDialog.parsed = undefined
+	}
+	payloadDialog.visible = true
+}
+
+/** 复制原始报文文本,便于在联调工具或工单中直接粘贴。 */
+async function copyPayload() {
+	try {
+		await navigator.clipboard.writeText(payloadDialog.raw)
+		message.success("报文已复制到剪贴板")
+	} catch {
+		message.error("复制失败，请手动选择文本复制")
+	}
+}
+
 // 搜索变量
 const queryRef = ref()
 const showSearch = ref(true)
@@ -129,3 +218,124 @@ onMounted(() => {
 	getDataList()
 })
 </script>
+
+<style scoped lang="scss">
+.log-event__tags {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+
+.log-event__title {
+	margin-top: 4px;
+	overflow: hidden;
+	font-size: 13px;
+	color: var(--el-text-color-primary);
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.log-event__error {
+	margin-top: 2px;
+	overflow: hidden;
+	font-size: 12px;
+	color: var(--el-color-danger);
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.log-cost--slow {
+	color: var(--el-color-warning);
+}
+
+.log-order {
+	.log-order__line {
+		display: flex;
+		align-items: center;
+		min-width: 0;
+		gap: 6px;
+
+		& + .log-order__line {
+			margin-top: 2px;
+		}
+	}
+
+	.log-order__label {
+		flex-shrink: 0;
+		font-size: 12px;
+		color: var(--el-text-color-secondary);
+	}
+
+	.log-order__label--gap {
+		margin-left: 8px;
+	}
+
+	.log-order__value {
+		min-width: 0;
+		overflow: hidden;
+		font-size: 13px;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+
+.log-payload {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+
+	:deep(.el-button + .el-button) {
+		margin-left: 0;
+	}
+}
+
+.log-payload__empty {
+	color: var(--el-text-color-placeholder);
+}
+
+.log-payload-dialog {
+	max-height: 60vh;
+	overflow: auto;
+
+	.log-payload-dialog__raw {
+		margin: 0;
+		padding: 12px;
+		font-size: 12px;
+		line-height: 1.6;
+		word-break: break-all;
+		white-space: pre-wrap;
+		background-color: var(--el-fill-color-light);
+		border-radius: 4px;
+	}
+}
+
+.status {
+	display: flex;
+	align-items: center;
+	margin-bottom: 2px;
+
+	span {
+		display: inline-block;
+		font-size: 13px;
+	}
+
+	span:nth-child(1) {
+		min-width: 60px;
+		max-width: 100px;
+		text-align: left;
+		color: var(--el-text-color-secondary);
+	}
+
+	span:nth-child(2) {
+		flex: 1;
+		min-width: 50px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+
+:deep(.coffee-log-row--error) {
+	background-color: var(--el-color-danger-light-9);
+}
+</style>

src/views/hard/hard-coffee-order/index.vue

@@ -3,8 +3,8 @@
 		<div class="layout-padding-auto layout-padding-view">
 			<el-row>
 				<SearchPanel v-show="showSearch" ref="queryRef" :model="state.queryForm"
-					:loading="Boolean(state.loading)" :search-text="$t('common.queryBtn')" :reset-text="$t('common.resetBtn')"
-					@search="getDataList(false)" @reset="resetQuery">
+					:loading="Boolean(state.loading)" :search-text="$t('common.queryBtn')"
+					:reset-text="$t('common.resetBtn')" @search="getDataList(false)" @reset="resetQuery">
 					<el-form-item style="width: 300px" label="厂商订单号" prop="orderNo">
 						<el-input v-model="state.queryForm.orderNo" placeholder="19位数字" clearable />
 					</el-form-item>
@@ -35,90 +35,260 @@
 						style="float: right" @queryTable="getDataList(false)"></right-toolbar>
 				</div>
 			</el-row>
-			<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-				:header-cell-style="tableStyle.headerCellStyle">
-				<el-table-column type="index" label="#" width="50" align="center" />
-				<el-table-column prop="createTime" label="下单时间" width="170" show-overflow-tooltip />
-				<el-table-column prop="orderNo" label="厂商订单号" min-width="170" show-overflow-tooltip />
-				<el-table-column prop="machineName" label="机器号" width="120" show-overflow-tooltip />
-				<el-table-column prop="product" label="商品" min-width="130" show-overflow-tooltip />
-				<el-table-column label="金额(元)" width="100" align="right">
-					<template #default="{ row }">{{ formatPrice(row.price) }}</template>
-				</el-table-column>
-				<el-table-column prop="userName" label="支付人" width="100" show-overflow-tooltip>
-					<template #default="{ row }">{{ row.userName || "-" }}</template>
-				</el-table-column>
-				<el-table-column prop="phoneNo" label="手机号" width="120" show-overflow-tooltip>
-					<template #default="{ row }">{{ row.phoneNo || "-" }}</template>
-				</el-table-column>
-				<el-table-column label="订单状态" width="100">
+			<el-table :data="state.dataList" v-loading="state.loading" border :header-cell-style="tableStyle.headerCellStyle">
+				<el-table-column type="index" label="#" width="50" align="center" />				<el-table-column width="240" label="用户信息">
 					<template #default="{ row }">
-						<dict-tag :options="hard_order_status" :value="row.orderStatus" />
+						<user-info-cell v-if="hasOrderUser(row)" :user="row" :show-gender="false"
+							:show-account="false" />
+						<div v-else class="flex min-w-0 items-center gap-2">
+							<el-tag size="small" effect="plain" type="info">散客</el-tag>
+							<span class="truncate text-sm text-[var(--el-text-color-regular)]" :title="row.phoneNo">
+								{{ row.phoneNo || "-" }}
+							</span>
+						</div>
 					</template>
 				</el-table-column>
-				<el-table-column label="通知厂商" width="110">
+				<el-table-column width="290" label="身份信息">
 					<template #default="{ row }">
-						<el-tag v-if="row.wuliNotifyStatus === '1'" type="success" size="small" effect="light">成功</el-tag>
-						<el-tag v-else-if="row.wuliNotifyStatus === '2'" type="danger" size="small" effect="light">
-							失败({{ row.wuliNotifyCount || 0 }}次)
-						</el-tag>
-						<el-tag v-else type="info" size="small" effect="plain">未通知</el-tag>
+						<user-identity-info v-if="hasOrderUser(row)" :user="row" />
+						<span v-else class="text-[var(--el-text-color-placeholder)]">-</span>
 					</template>
 				</el-table-column>
-				<el-table-column label="退款同步(元)" width="110" align="right">
+				<el-table-column width="220" label="商品">
 					<template #default="{ row }">
-						<span v-if="row.refundSyncAmount > 0">{{ formatPrice(row.refundSyncAmount) }} /
-							{{ formatPrice(row.refundPrice) }}</span>
-						<span v-else>-</span>
+						<div class="flex items-center gap-2">
+							<el-image v-if="row.img" :src="row.img" :preview-src-list="[row.img]" :z-index="3000"
+								preview-teleported fit="cover"
+								class="h-11 w-11 shrink-0 rounded border border-[var(--el-border-color-lighter)]" />
+							<div class="min-w-0 flex-1">
+								<el-tooltip v-if="row.product" :content="row.product" placement="top-start">
+									<span class="text-line text-sm text-[var(--el-text-color-primary)]">{{ row.product
+									}}</span>
+								</el-tooltip>
+								<span v-else class="text-sm text-[var(--el-text-color-placeholder)]">-</span>
+								<div class="mt-1">
+									<el-tag v-if="row.isCold === '1'" size="small" type="info"
+										effect="plain">冷饮</el-tag>
+									<el-tag v-else-if="row.isCold === '0'" size="small" type="danger"
+										effect="plain">热饮</el-tag>
+								</div>
+							</div>
+						</div>
 					</template>
 				</el-table-column>
-				<el-table-column label="操作" width="90" fixed="right">
+				<el-table-column width="140" label="金额(元)">
 					<template #default="{ row }">
-						<el-button v-auth="'hard_hardCoffeeOrder_view'" icon="View" text type="primary" style="margin: 0"
-							@click="openDetail(row)">
-							详情
-						</el-button>
+						<div class="status">
+							<span>厂商价格</span>
+							<span class="color-primary">{{ formatPrice(row.price) }}</span>
+						</div>
+						<div v-if="row.refundPrice > 0" class="status">
+							<span>本地退款</span>
+							<span class="color-success">{{ formatPrice(row.refundPrice) }}</span>
+						</div>
+						<div v-if="row.refundSyncAmount > 0" class="status">
+							<span>已同步厂商</span>
+							<span class="color-success">{{ formatPrice(row.refundSyncAmount) }}</span>
+						</div>
+					</template>
+				</el-table-column>
+				<el-table-column width="210" label="订单信息">
+					<template #default="{ row }">
+						<div class="status">
+							<span>厂商订单号</span>
+							<el-tooltip v-if="row.orderNo" :content="row.orderNo" placement="top-start">
+								<span class="text-line">{{ row.orderNo }}</span>
+							</el-tooltip>
+							<span v-else>-</span>
+						</div>
+						<div class="status">
+							<span>机器号</span>
+							<span>{{ row.machineName || "-" }}</span>
+						</div>
+						<div class="status">
+							<span>设备名称</span>
+							<span>{{ row.hardName || "-" }}</span>
+						</div>
+					</template>
+				</el-table-column>
+				<el-table-column width="200" label="订单状态">
+					<template #default="{ row }">
+						<div class="status">
+							<span>订单状态</span>
+							<span><dict-tag :options="hard_order_status" :value="row.orderStatus" /></span>
+						</div>
+						<div class="status">
+							<span>支付方式</span>
+							<span><dict-tag :options="hard_pay_type" :value="row.payType" /></span>
+						</div>
+					</template>
+				</el-table-column>
+				<el-table-column width="170" label="厂商通知">
+					<template #default="{ row }">
+						<div>
+							<el-tag v-if="row.wuliNotifyStatus === '1'" type="success" size="small"
+								effect="light">通知成功</el-tag>
+							<el-tag v-else-if="row.wuliNotifyStatus === '2'" type="danger" size="small" effect="light">
+								失败({{ row.wuliNotifyCount || 0 }}次)
+							</el-tag>
+							<el-tag v-else type="info" size="small" effect="plain">未通知</el-tag>
+						</div>
+						<div v-if="row.wuliNotifyTime" class="mt-1 text-xs text-[var(--el-text-color-secondary)]">
+							{{ row.wuliNotifyTime }}
+						</div>
+					</template>
+				</el-table-column>
+				<el-table-column width="170" label="时间">
+					<template #default="{ row }">
+						<div class="status">
+							<span>下单时间</span>
+							<span>{{ row.createTime || "-" }}</span>
+						</div>
+						<div class="status">
+							<span>支付时间</span>
+							<span>{{ row.payTime || "-" }}</span>
+						</div>
+					</template>
+				</el-table-column>
+				<el-table-column label="操作" width="160" fixed="right">
+					<template #default="{ row }">
+						<div class="flex flex-wrap items-start -mx-1">
+							<div class="w-1/2 h-[30px] flex justify-start items-center"
+								v-auth="'hard_hardCoffeeOrder_view'">
+								<el-button icon="View" text type="primary" style="margin: 0" @click="openDetail(row)">
+									详情
+								</el-button>
+							</div>
+							<div v-if="canRefund(row)" class="w-1/2 h-[30px] flex justify-start items-center"
+								v-auth="'hard_hardAfterSale_adminRefund'">
+								<el-button icon="stamp" text type="primary" style="margin: 0" @click="openRefund(row)">
+									退款
+								</el-button>
+							</div>
+						</div>
 					</template>
 				</el-table-column>
 			</el-table>
-			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
+				v-bind="state.pagination" />
 		</div>
 
 		<el-drawer v-model="detailVisible" title="咖啡机订单详情" size="620px" destroy-on-close>
-			<div v-loading="detailLoading">
+			<div v-loading="detailLoading" class="flex flex-col gap-5">
 				<template v-if="coffeeDetail.order">
-					<el-descriptions :column="2" border>
-						<el-descriptions-item label="厂商订单号" :span="2">{{ coffeeDetail.order.orderNo || "-" }}</el-descriptions-item>
-						<el-descriptions-item label="本地订单ID">{{ coffeeDetail.order.orderId || "-" }}</el-descriptions-item>
-						<el-descriptions-item label="机器号">{{ coffeeDetail.order.machineName || "-" }}</el-descriptions-item>
-						<el-descriptions-item label="商品">
-							{{ coffeeDetail.order.product || "-" }}
-							<el-tag v-if="coffeeDetail.order.isCold === '1'" size="small" type="info" effect="plain"
-								class="ml-1">冷饮</el-tag>
-							<el-tag v-else-if="coffeeDetail.order.isCold === '0'" size="small" type="danger"
-								effect="plain" class="ml-1">热饮</el-tag>
-						</el-descriptions-item>
-						<el-descriptions-item label="金额">{{ formatPrice(coffeeDetail.order.price) }} 元</el-descriptions-item>
-						<el-descriptions-item label="支付人">{{ coffeeDetail.order.userName || "-" }}</el-descriptions-item>
-						<el-descriptions-item label="手机号">{{ coffeeDetail.order.phoneNo || "-" }}</el-descriptions-item>
-						<el-descriptions-item label="下单时间">{{ coffeeDetail.order.createTime || "-" }}</el-descriptions-item>
-						<el-descriptions-item label="支付时间">{{ coffeeDetail.order.payTime || "-" }}</el-descriptions-item>
-						<el-descriptions-item label="订单状态">
-							<dict-tag :options="hard_order_status" :value="coffeeDetail.order.orderStatus" />
-						</el-descriptions-item>
-						<el-descriptions-item label="退款">
-							{{ formatPrice(coffeeDetail.order.refundPrice || 0) }} 元（已同步厂商
-							{{ formatPrice(coffeeDetail.order.refundSyncAmount || 0) }} 元）
-						</el-descriptions-item>
-					</el-descriptions>
-					<el-image v-if="coffeeDetail.order.img" :src="coffeeDetail.order.img" :preview-src-list="[coffeeDetail.order.img]"
-						:z-index="3000" fit="contain"
-						class="mt-3 h-[160px] w-full rounded border border-[var(--el-border-color-lighter)]" />
-					<h3 class="mb-1 mt-6 text-sm font-semibold">生命周期时间线</h3>
-					<hard-coffee-log v-auth="'hard_hardCoffeeLog_view'" :order-id="String(coffeeDetail.order.orderId)" />
+					<section>
+						<h3 class="section-title">用户信息</h3>
+						<template v-if="hasDetailUser">
+							<user-info-cell :user="coffeeDetail.order" :avatar-size="44" :show-gender="false"
+								:show-account="false" />
+							<user-identity-info :user="coffeeDetail.order" class="mt-3" />
+						</template>
+						<div v-else class="flex items-center gap-2">
+							<el-tag size="small" effect="plain" type="info">散客</el-tag>
+							<span class="text-sm text-[var(--el-text-color-secondary)]">无平台账号，仅记录支付手机号</span>
+						</div>
+						<div v-if="coffeeDetail.order.phoneNo"
+							class="mt-2 text-xs text-[var(--el-text-color-secondary)]">
+							支付手机号（厂商侧快照）：<span class="text-[var(--el-text-color-regular)]">{{ coffeeDetail.order.phoneNo
+							}}</span>
+						</div>
+					</section>
+
+					<section>
+						<h3 class="section-title">商品</h3>
+						<div class="flex items-center gap-3">
+							<el-image v-if="coffeeDetail.order.img" :src="coffeeDetail.order.img"
+								:preview-src-list="[coffeeDetail.order.img]" :z-index="3000" preview-teleported
+								fit="contain"
+								class="h-[88px] w-[88px] shrink-0 rounded border border-[var(--el-border-color-lighter)]" />
+							<div class="min-w-0 flex-1">
+								<div class="flex items-center gap-1.5">
+									<span class="truncate text-sm font-semibold text-[var(--el-text-color-primary)]">
+										{{ coffeeDetail.order.product || "-" }}
+									</span>
+									<el-tag v-if="coffeeDetail.order.isCold === '1'" size="small" type="info"
+										effect="plain">冷饮</el-tag>
+									<el-tag v-else-if="coffeeDetail.order.isCold === '0'" size="small" type="danger"
+										effect="plain">热饮</el-tag>
+								</div>
+								<div class="mt-1.5 text-lg font-semibold text-[var(--el-color-primary)]">
+									{{ formatPrice(coffeeDetail.order.price) }}
+									<span class="text-xs font-normal text-[var(--el-text-color-secondary)]">元</span>
+								</div>
+							</div>
+						</div>
+					</section>
+
+					<section>
+						<h3 class="section-title">订单信息</h3>
+						<el-descriptions :column="2" border>
+							<el-descriptions-item label="厂商订单号" :span="2">{{ coffeeDetail.order.orderNo || "-"
+							}}</el-descriptions-item>
+							<el-descriptions-item label="本地订单ID">{{ coffeeDetail.order.orderId || "-"
+							}}</el-descriptions-item>
+							<el-descriptions-item label="设备名称">{{ coffeeDetail.order.hardName || "-"
+							}}</el-descriptions-item>
+							<el-descriptions-item label="机器号">{{ coffeeDetail.order.machineName || "-"
+							}}</el-descriptions-item>
+							<el-descriptions-item label="订单状态">
+								<dict-tag :options="hard_order_status" :value="coffeeDetail.order.orderStatus" />
+							</el-descriptions-item>
+							<el-descriptions-item label="支付方式">
+								<dict-tag :options="hard_pay_type" :value="coffeeDetail.order.payType" />
+							</el-descriptions-item>
+							<el-descriptions-item label="下单时间">{{ coffeeDetail.order.createTime || "-"
+							}}</el-descriptions-item>
+							<el-descriptions-item label="支付时间">{{ coffeeDetail.order.payTime || "-"
+							}}</el-descriptions-item>
+						</el-descriptions>
+					</section>
+
+					<section>
+						<div class="flex items-center justify-between">
+							<h3 class="section-title">厂商交互</h3>
+							<el-button v-if="canRefund(coffeeDetail.order)" v-auth="'hard_hardAfterSale_adminRefund'"
+								icon="stamp" text type="danger" @click="openRefund(coffeeDetail.order)">
+								退款
+							</el-button>
+						</div>
+						<el-descriptions :column="2" border>
+							<el-descriptions-item label="通知厂商">
+								<el-tag v-if="coffeeDetail.order.wuliNotifyStatus === '1'" type="success" size="small"
+									effect="light">成功</el-tag>
+								<el-tag v-else-if="coffeeDetail.order.wuliNotifyStatus === '2'" type="danger"
+									size="small" effect="light">失败({{ coffeeDetail.order.wuliNotifyCount || 0
+									}}次)</el-tag>
+								<el-tag v-else type="info" size="small" effect="plain">未通知</el-tag>
+							</el-descriptions-item>
+							<el-descriptions-item label="最近通知时间">{{ coffeeDetail.order.wuliNotifyTime || "-"
+							}}</el-descriptions-item>
+							<el-descriptions-item label="本地退款">
+								{{ coffeeDetail.order.refundPrice > 0 ? formatPrice(coffeeDetail.order.refundPrice) +
+									"元" : " - " }}
+							</el-descriptions-item>
+							<el-descriptions-item label="已同步厂商退款">
+								{{ coffeeDetail.order.refundSyncAmount > 0 ?
+									formatPrice(coffeeDetail.order.refundSyncAmount) + " 元"
+									: "-" }}
+							</el-descriptions-item>
+							<el-descriptions-item label="最近退款同步" :span="2">
+								{{ coffeeDetail.order.refundSyncTime || "-" }}
+							</el-descriptions-item>
+						</el-descriptions>
+					</section>
+
+					<section>
+						<h3 class="section-title">生命周期时间线</h3>
+						<hard-coffee-log v-auth="'hard_hardCoffeeLog_view'"
+							:order-id="String(coffeeDetail.order.orderId)" />
+					</section>
 				</template>
+				<el-empty v-else-if="!detailLoading" :image-size="60" description="未找到订单信息" />
 			</div>
 		</el-drawer>
+
+		<!-- 后台退款弹窗,复用硬件订单页售后退款流程,按本地订单id操作 -->
+		<admin-refund-dialog ref="adminRefundDialogRef" @refresh="handleRefundRefresh" />
 	</div>
 </template>
 
@@ -130,8 +300,12 @@ import { useDict } from "/@/hooks/dict"
 /** 咖啡机生命周期时间线组件,详情抽屉内复用。 */
 const HardCoffeeLog = defineAsyncComponent(() => import("../components/hard-coffee-log.vue"))
 
+/** 后台退款弹窗,复用硬件订单页的售后退款流程,按本地订单id操作。 */
+const AdminRefundDialog = defineAsyncComponent(() => import("../hard-order/components/admin-refund-dialog/index.vue"))
+const adminRefundDialogRef = ref()
+
 // 定义查询字典
-const { hard_order_status } = useDict("hard_order_status")
+const { hard_order_status, hard_pay_type } = useDict("hard_order_status", "hard_pay_type")
 
 const route = useRoute()
 
@@ -153,6 +327,13 @@ const detailVisible = ref(false)
 const detailLoading = ref(false)
 const coffeeDetail = reactive<{ order?: Record<string, any> }>({})
 
+/** 无平台账号的支付用户(userId 为空或 -1)按散客展示。 */
+function hasOrderUser(row?: Record<string, any> | null) {
+	return Boolean(row) && row!.userId && row!.userId != -1
+}
+
+const hasDetailUser = computed(() => hasOrderUser(coffeeDetail.order))
+
 /** 金额单位为分,换算为两位小数元展示。 */
 function formatPrice(price: unknown): string {
 	if (price === null || price === undefined || price === "") return "-"
@@ -161,18 +342,50 @@ function formatPrice(price: unknown): string {
 	return (fen / 100).toFixed(2)
 }
 
+async function loadDetail(id: string) {
+	const { data } = await hardCoffeeApi.fetchOrderDetail(id)
+	coffeeDetail.order = data?.order || {}
+}
+
 async function openDetail(row: any) {
 	detailVisible.value = true
 	detailLoading.value = true
 	coffeeDetail.order = undefined
 	try {
-		const { data } = await hardCoffeeApi.fetchOrderDetail(String(row.id))
-		coffeeDetail.order = data?.order || {}
+		await loadDetail(String(row.id))
 	} finally {
 		detailLoading.value = false
 	}
 }
 
+/** 与硬件订单页退款入口保持一致的前置条件:已实际支付、未退完且支付方式支持原路退款。 */
+function canRefund(row?: Record<string, any> | null) {
+	if (!row || !row.orderId) return false
+	// 未支付订单的 payPrice 是创建时预填的应付金额,必须以支付时间存在为已支付依据
+	if (!row.payTime) return false
+	const payPrice = Number(row.payPrice)
+	const refundPrice = Number(row.refundPrice ?? 0)
+	return Number.isFinite(payPrice) && payPrice > 0
+		&& refundPrice < payPrice
+		&& !["5", "6", "8"].includes(String(row.payType ?? ""))
+}
+
+function openRefund(row: any) {
+	adminRefundDialogRef.value?.openDialog(String(row.orderId))
+}
+
+/** 退款成功后刷新列表;详情抽屉打开时同步重取详情。 */
+async function handleRefundRefresh() {
+	getDataList(false)
+	if (detailVisible.value && coffeeDetail.order?.id) {
+		try {
+			await loadDetail(String(coffeeDetail.order.id))
+		} catch (e) {
+			console.error(e)
+		}
+	}
+}
+
 // 清空搜索条件
 const resetQuery = () => {
 	// 保留从设备详情带入的设备过滤
@@ -186,3 +399,57 @@ onMounted(() => {
 	getDataList()
 })
 </script>
+
+<style scoped lang="scss">
+.section-title {
+	margin-bottom: 8px;
+	font-size: 14px;
+	font-weight: 600;
+	color: var(--el-text-color-primary);
+
+	&::before {
+		display: inline-block;
+		width: 3px;
+		height: 12px;
+		margin-right: 6px;
+		content: "";
+		background-color: var(--el-color-primary);
+		border-radius: 2px;
+		vertical-align: -1px;
+	}
+}
+
+.text-line {
+	display: inline-block;
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.status {
+	display: flex;
+	align-items: center;
+	margin-bottom: 2px;
+
+	span {
+		display: inline-block;
+		font-size: 13px;
+	}
+
+	span:nth-child(1) {
+		min-width: 60px;
+		max-width: 100px;
+		text-align: left;
+		color: var(--el-text-color-secondary);
+	}
+
+	span:nth-child(2) {
+		flex: 1;
+		min-width: 50px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+</style>

src/views/hard/hard-manager/coffee-machine-section.vue

@@ -1,7 +1,6 @@
 <template>
 	<div>
-		<el-alert type="info" show-icon :closable="false"
-			title="唯一编号必须与屋里咖啡机器号(machine_name)一致，否则扫码支付会提示设备未接入。" />
+		<el-alert type="info" show-icon :closable="false" title="唯一编号必须与屋里咖啡机器号(machine_name)一致，否则扫码支付会提示设备未接入。" />
 		<el-descriptions class="mt-4" :column="2" border>
 			<el-descriptions-item label="厂商机器号">
 				<span class="break-all">{{ displayValue(uniqueCode, "尚未绑定") }}</span>
@@ -16,27 +15,56 @@
 				<el-button size="small" icon="DataLine" @click="goOrderList">查看全部订单</el-button>
 			</div>
 			<el-table v-loading="orderLoading" :data="orderList" border size="small">
-				<el-table-column prop="createTime" label="下单时间" width="170" show-overflow-tooltip />
-				<el-table-column prop="orderNo" label="厂商订单号" min-width="160" show-overflow-tooltip />
-				<el-table-column prop="product" label="商品" min-width="120" show-overflow-tooltip />
-				<el-table-column label="金额(元)" width="100" align="right">
-					<template #default="{ row }">{{ formatPrice(row.price) }}</template>
-				</el-table-column>
-				<el-table-column prop="userName" label="支付人" width="100" show-overflow-tooltip>
-					<template #default="{ row }">{{ displayValue(row.userName, "-") }}</template>
-				</el-table-column>
-				<el-table-column label="订单状态" width="100">
+				<el-table-column min-width="160" label="商品">
 					<template #default="{ row }">
-						<dict-tag :options="hard_order_status" :value="row.orderStatus" />
+						<div class="coffee-order-preview__product">
+							<span class="coffee-order-preview__name" :title="row.product">{{ displayValue(row.product, "-") }}</span>
+							<el-tag v-if="row.isCold === '1'" size="small" type="info" effect="plain">冷饮</el-tag>
+							<el-tag v-else-if="row.isCold === '0'" size="small" type="danger" effect="plain">热饮</el-tag>
+						</div>
 					</template>
 				</el-table-column>
-				<el-table-column label="通知厂商" width="110">
+				<el-table-column label="金额(元)" width="90" align="right">
+					<template #default="{ row }">{{ formatPrice(row.price) }}</template>
+				</el-table-column>
+				<el-table-column min-width="200" label="支付人">
 					<template #default="{ row }">
-						<el-tag v-if="row.wuliNotifyStatus === '1'" type="success" size="small" effect="light">成功</el-tag>
-						<el-tag v-else-if="row.wuliNotifyStatus === '2'" type="danger" size="small" effect="light">
-							失败({{ row.wuliNotifyCount || 0 }}次)
-						</el-tag>
-						<el-tag v-else type="info" size="small" effect="plain">未通知</el-tag>
+						<user-info-cell v-if="hasOrderUser(row)" :user="row" :avatar-size="28" :show-gender="false"
+							:show-account="false" :show-department="false" />
+						<div v-else class="coffee-order-preview__guest">
+							<el-tag size="small" effect="plain" type="info">散客</el-tag>
+							<span class="coffee-order-preview__name">{{ row.phoneNo || "-" }}</span>
+						</div>
+					</template>
+				</el-table-column>
+				<el-table-column min-width="210" label="订单信息">
+					<template #default="{ row }">
+						<div class="coffee-order-preview__line">
+							<span class="coffee-order-preview__label">厂商订单号</span>
+							<el-tooltip v-if="row.orderNo" :content="row.orderNo" placement="top-start">
+								<span class="coffee-order-preview__value">{{ row.orderNo }}</span>
+							</el-tooltip>
+							<span v-else class="coffee-order-preview__value">-</span>
+						</div>
+						<div class="coffee-order-preview__line">
+							<span class="coffee-order-preview__label">下单时间</span>
+							<span class="coffee-order-preview__value">{{ row.createTime || "-" }}</span>
+						</div>
+					</template>
+				</el-table-column>
+				<el-table-column width="140" label="状态">
+					<template #default="{ row }">
+						<div class="coffee-order-preview__status">
+							<dict-tag :options="hard_order_status" :value="row.orderStatus" />
+						</div>
+						<div class="coffee-order-preview__status">
+							<el-tag v-if="row.wuliNotifyStatus === '1'" type="success" size="small"
+								effect="light">通知成功</el-tag>
+							<el-tag v-else-if="row.wuliNotifyStatus === '2'" type="danger" size="small" effect="light">
+								失败({{ row.wuliNotifyCount || 0 }}次)
+							</el-tag>
+							<el-tag v-else type="info" size="small" effect="plain">未通知</el-tag>
+						</div>
 					</template>
 				</el-table-column>
 				<template #empty>
@@ -83,6 +111,11 @@ function displayValue(value: unknown, emptyText = "--"): string {
 	return value === null || value === undefined || value === "" ? emptyText : String(value)
 }
 
+/** 无平台账号的支付用户(userId 为空或 -1)按散客展示。 */
+function hasOrderUser(row: Record<string, any>): boolean {
+	return Boolean(row.userId) && row.userId != -1
+}
+
 /** 咖啡机订单金额单位为分,展示时换算为两位小数的元。 */
 function formatPrice(price: unknown): string {
 	if (price === null || price === undefined || price === "") return "-"
@@ -112,7 +145,7 @@ async function loadOrders(): Promise<void> {
 
 /** 跳转咖啡机订单列表并按当前设备过滤。 */
 function goOrderList() {
-	router.push({ path: "/hard/coffee-order", query: { hardId: props.deviceId } })
+	router.push({ path: "/hard/hard-coffee-order/index", query: { hardId: props.deviceId } })
 }
 
 watch(
@@ -126,3 +159,55 @@ onMounted(() => {
 	loadOrders()
 })
 </script>
+
+<style scoped lang="scss">
+.coffee-order-preview__product,
+.coffee-order-preview__guest {
+	display: flex;
+	align-items: center;
+	min-width: 0;
+	gap: 6px;
+}
+
+.coffee-order-preview__name {
+	min-width: 0;
+	overflow: hidden;
+	font-size: 13px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.coffee-order-preview__line {
+	display: flex;
+	align-items: center;
+	min-width: 0;
+	gap: 6px;
+
+	& + .coffee-order-preview__line {
+		margin-top: 2px;
+	}
+}
+
+.coffee-order-preview__label {
+	flex-shrink: 0;
+	font-size: 12px;
+	color: var(--el-text-color-secondary);
+}
+
+.coffee-order-preview__value {
+	min-width: 0;
+	overflow: hidden;
+	font-size: 13px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.coffee-order-preview__status {
+	display: flex;
+	align-items: center;
+
+	& + .coffee-order-preview__status {
+		margin-top: 4px;
+	}
+}
+</style>

src/views/hard/hard-manager/form.vue

@@ -1,6 +1,7 @@
 <template>
 	<el-dialog :title="form.id ? '编辑' : '新增'" width="40%" v-model="visible" :close-on-click-modal="false" draggable>
-		<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="120px" v-loading="loading">
+		<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="120px"
+			v-loading="loading">
 			<el-row :gutter="24">
 				<el-col :span="24" class="mb20">
 					<el-form-item label="设备名" prop="name">
@@ -14,7 +15,7 @@
 					</el-form-item>
 				</el-col>
 
-				<el-col v-if="['9', '10', '11'].includes(form.type)" :span="24" class="mb20">
+				<el-col v-if="['9', '10', '11', '13'].includes(form.type)" :span="24" class="mb20">
 					<el-form-item label="设备唯一编号" prop="uniqueCode">
 						<el-input v-model="form.uniqueCode" placeholder="请输入设备唯一编号" />
 					</el-form-item>
@@ -33,12 +34,8 @@
 				</el-col>
 
 				<el-col v-if="form.type === '12'" :span="24" class="mb20">
-					<el-alert
-						type="info"
-						show-icon
-						:closable="false"
-						title="尔印打印机是无屏 USB 外设，不需要设备唯一编号、账号或独立心跳；新增后请将它绑定到同商户、同部门的食堂或超市终端。"
-					/>
+					<el-alert type="info" show-icon :closable="false"
+						title="尔印打印机是无屏 USB 外设，不需要设备唯一编号、账号或独立心跳；新增后请将它绑定到同商户、同部门的食堂或超市终端。" />
 				</el-col>
 			</el-row>
 		</el-form>
@@ -101,13 +98,13 @@ const openDialog = (id: string) => {
 
 // 提交
 const onSubmit = async () => {
-	const valid = await dataFormRef.value.validate().catch(() => {})
+	const valid = await dataFormRef.value.validate().catch(() => { })
 	if (!valid) return false
 
 	try {
 		loading.value = true
 		const _params = { ...form }
-		if (!["9", "10", "11"].includes(_params.type)) {
+		if (!["9", "10", "11", "13"].includes(_params.type)) {
 			_params.uniqueCode = null
 		}
 		form.id ? await putObj(_params) : await addObj(_params)