diff --git a/.env.development b/.env.development
index 61ac088..5da1377 100644
--- a/.env.development
+++ b/.env.development
@@ -11,15 +11,15 @@ ENV = 'development'
 # VITE_ADMIN_PROXY_PATH = http://123.157.250.162:8089/api/ # 测试线上
 # VITE_ADMIN_PROXY_PATH = http://123.156.230.15:8089/api/ # 测试线上-过期
 # VITE_ADMIN_PROXY_PATH = http://localhost:9999/
-# VITE_ADMIN_PROXY_PATH = https://dzc-test-1.fy.takin.cc # 邓-本地
-VITE_ADMIN_PROXY_PATH = https://www.pjzhhq.cn/api # 正式环境线上
+VITE_ADMIN_PROXY_PATH = https://dzc-test-1.fy.takin.cc # 邓-本地
+# VITE_ADMIN_PROXY_PATH = https://www.pjzhhq.cn/api # 正式环境线上
 
 # 图片访问基础地址
 # VITE_IMAGE_BASE_PATH = http://123.157.250.162:8089/api/ # 测试线上
 # VITE_IMAGE_BASE_PATH = http://123.156.230.15:8089/api/ # 测试线上-过期
 # VITE_IMAGE_BASE_PATH = http://localhost:9999
-# VITE_IMAGE_BASE_PATH = https://dzc-test-1.fy.takin.cc # 邓-本地
-VITE_IMAGE_BASE_PATH = https://www.pjzhhq.cn/api # 正式环境线上
+VITE_IMAGE_BASE_PATH = https://dzc-test-1.fy.takin.cc # 邓-本地
+# VITE_IMAGE_BASE_PATH = https://www.pjzhhq.cn/api # 正式环境线上
 
 # 代码生成服务地址
 VITE_GEN_PROXY_PATH = http://192.168.110.156:5003
diff --git a/.gitignore b/.gitignore
index 30119dd..66c5276 100644
--- a/.gitignore
+++ b/.gitignore
@@ -45,4 +45,10 @@ coverage/
 
 # 缓存文件
 .cache/
-.parcel-cache/
\ No newline at end of file
+.parcel-cache/
+
+# AI 工具辅助目录
+.v2c/
+.video_agent/
+.mimosa/
+.zcode/
\ No newline at end of file
diff --git a/src/api/hard/hard-invoice.ts b/src/api/hard/hard-invoice.ts
index 7a9b8dc..1891790 100644
--- a/src/api/hard/hard-invoice.ts
+++ b/src/api/hard/hard-invoice.ts
@@ -1,10 +1,28 @@
 import request from "/@/utils/request"
 
-export function print(query?: Object) {
+export function print(data?: Object) {
 	return request({
 		url: "/hard/hard-invoice/print",
-		method: "get",
-		params: query,
+		method: "post",
+		data,
+	})
+}
+
+/** 失败任务按原打印序号重试。 */
+export function retry(data?: Object) {
+	return request({
+		url: "/hard/hard-invoice/retry",
+		method: "post",
+		data,
+	})
+}
+
+/** 已打印兑换券创建下一打印序号并记录人工原因。 */
+export function reprint(data?: Object) {
+	return request({
+		url: "/hard/hard-invoice/reprint",
+		method: "post",
+		data,
 	})
 }
 
diff --git a/src/api/hard/hard-order.ts b/src/api/hard/hard-order.ts
index df3be9b..2f627a8 100644
--- a/src/api/hard/hard-order.ts
+++ b/src/api/hard/hard-order.ts
@@ -1,5 +1,111 @@
 import request from "/@/utils/request"
 
+/** 订单详情中的单张识别证据，字段来自 HardOrderEvidenceImageVo。 */
+export interface HardOrderEvidenceImage {
+	/** 服务端证据主键。 */
+	id: string | number
+	/** 证据类型稳定编码。 */
+	evidenceType: "FACE_RECOGNITION" | "MENU_RECOGNITION" | string
+	/** 图片角色稳定编码。 */
+	evidenceRole: "FACE_REFERENCE" | "FACE_LIVE" | "MENU_LIVE" | string
+	/** 图片角色中文名称。 */
+	evidenceRoleName?: string
+	/** 同一角色下从零开始的图片序号。 */
+	sequenceNo: number
+	/** 终端采集时间。 */
+	capturedAt?: string
+	/** 人脸识别相似度快照。 */
+	similarity?: number | string
+	/** 产生证据的设备主键。 */
+	hardId?: string | number
+	/** 证据文件访问地址。 */
+	imageUrl?: string
+	/** 证据状态稳定编码。 */
+	status: "PENDING" | "AVAILABLE" | "UNAVAILABLE" | string
+	/** 永久缺失或复制失败原因。 */
+	failureReason?: string
+}
+
+/** 外卖订单的期望送达配置；非外卖或历史订单未记录时为空。 */
+export interface HardTakeOutAppointment {
+	/** 送达方式稳定编码：IMMEDIATE 表示立即送，SCHEDULED 表示预约时段。 */
+	expectDeliveryType?: "IMMEDIATE" | "SCHEDULED" | string
+	/** 预约送达日期，仅预约时段模式使用。 */
+	expectDeliveryDate?: string
+	/** 预约时段开始时间。 */
+	expectDeliveryStart?: string
+	/** 预约时段结束时间。 */
+	expectDeliveryEnd?: string
+	/** 立即送模式下计算出的预计送达时间点。 */
+	expectArriveTime?: string
+}
+
+/** 当前页面使用的订单详情扩展字段。 */
+export interface HardOrderDetail {
+	/** 订单主键。 */
+	id: string | number
+	/** 设备名称。 */
+	hardName?: string
+	/** 订单详情才返回的长期识别证据。 */
+	evidenceImages?: HardOrderEvidenceImage[]
+	/** 外卖订单详情关联的期望送达配置。 */
+	takeOutAppt?: HardTakeOutAppointment
+	/** 兼容订单详情其余历史字段。 */
+	[key: string]: unknown
+}
+
+/** 订单列表统计查询条件；字段与订单分页筛选保持一致。 */
+export type HardOrderStatisticsQuery = Record<string, any>
+
+/** 订单按餐段汇总的统计，金额单位均为分。 */
+export interface HardOrderMealStatistics {
+	/** 餐段字典编码；历史订单未记录时为空。 */
+	hourType?: string | null
+	/** 订单数。 */
+	orderCount?: number
+	/** 购物车商品份数。 */
+	productCount?: number
+	/** 商品总价。 */
+	totalPrice?: number
+	/** 额外支付。 */
+	extraPrice?: number
+	/** 配送费。 */
+	deliveryPrice?: number
+	/** 实际支付。 */
+	payPrice?: number
+	/** 已退款金额。 */
+	refundPrice?: number
+	/** 订单实际金额，即实际支付减已退款。 */
+	actualPrice?: number
+}
+
+/** 订单统计通用汇总，金额单位均为分。 */
+export interface HardOrderStatisticsSummary {
+	orderCount?: number
+	productCount?: number
+	totalPrice?: number
+	extraPrice?: number
+	deliveryPrice?: number
+	payPrice?: number
+	refundPrice?: number
+	actualPrice?: number
+	meals?: HardOrderMealStatistics[]
+}
+
+/** 订单按预计使用日期拆分的统计。 */
+export interface HardOrderDailyStatistics extends HardOrderStatisticsSummary {
+	date?: string
+}
+
+/** 订单统计接口统一响应。 */
+export interface HardOrderStatisticsResponse {
+	data: {
+		total?: HardOrderStatisticsSummary
+		daily?: HardOrderDailyStatistics[]
+	}
+	msg?: string
+}
+
 /**
  * 离线订单手动支付
  */
diff --git a/src/api/hard/hard-printer.ts b/src/api/hard/hard-printer.ts
new file mode 100644
index 0000000..626babd
--- /dev/null
+++ b/src/api/hard/hard-printer.ts
@@ -0,0 +1,62 @@
+import request from "/@/utils/request"
+
+/** 后端 Long/雪花主键在浏览器中必须以字符串传递，避免 Number 精度丢失。 */
+export type HardwareId = string
+
+/** 业务终端与无屏 USB 打印机资产的绑定详情。 */
+export interface HardPrinterBinding {
+	id?: HardwareId
+	sourceHardId: HardwareId
+	printerHardId: HardwareId
+	sourceHardName?: string
+	sourceHardType?: string
+	printerHardName?: string
+	printerConfig?: HardPrinterConfig
+}
+
+/** 尔印 USB 打印机配置。VID/PID 尚未由业务终端回填时允许为空。 */
+export interface HardPrinterConfig {
+	id?: HardwareId
+	printerHardId: HardwareId
+	printerModel?: string
+	usbVendorId?: number
+	usbProductId?: number
+	paperWidth?: number
+	autoCut?: string
+	imageMode?: string
+}
+
+/** 查询来源业务终端当前绑定的打印机资产。 */
+export function getBinding(hardId: HardwareId) {
+	return request({ url: `/hard/hard-printer/binding/${hardId}`, method: "get" })
+}
+
+/** 查询同商户同部门可绑定的空闲打印机资产。 */
+export function listAvailable(sourceHardId: HardwareId) {
+	return request({ url: "/hard/hard-printer/available", method: "get", params: { sourceHardId } })
+}
+
+/** 查询指定商户下已完成打印机绑定的业务终端。 */
+export function listBoundSources(merchantId: HardwareId) {
+	return request({ url: "/hard/hard-printer/sources", method: "get", params: { merchantId } })
+}
+
+/** 建立来源业务终端与 EY_PRINT 的一对一绑定。 */
+export function bind(data: { sourceHardId: HardwareId; printerHardId: HardwareId }) {
+	return request({ url: "/hard/hard-printer/binding", method: "post", data })
+}
+
+/** 解除来源业务终端绑定。 */
+export function unbind(sourceHardId: HardwareId) {
+	return request({ url: `/hard/hard-printer/binding/${sourceHardId}`, method: "delete" })
+}
+
+/** 查询无屏 USB 打印机资产配置。 */
+export function getConfig(printerHardId: HardwareId) {
+	return request({ url: `/hard/hard-printer/config/${printerHardId}`, method: "get" })
+}
+
+/** 保存无屏 USB 打印机资产配置。 */
+export function saveConfig(data: HardPrinterConfig) {
+	return request({ url: "/hard/hard-printer/config", method: "put", data })
+}
diff --git a/src/api/hard/hard-terminal-log-file.ts b/src/api/hard/hard-terminal-log-file.ts
new file mode 100644
index 0000000..caeea97
--- /dev/null
+++ b/src/api/hard/hard-terminal-log-file.ts
@@ -0,0 +1,98 @@
+import request from "/@/utils/request"
+
+export interface TerminalLogQuery {
+	current?: number
+	size?: number
+	hardId?: string | number
+	hardName?: string
+	uniqueCode?: string
+	merchantId?: string | number
+	deptId?: string | number
+	logDateStart?: string
+	logDateEnd?: string
+	uploadTimeStart?: string
+	uploadTimeEnd?: string
+}
+
+export interface TerminalLogDevice {
+	hardId: string | number
+	hardName: string
+	uniqueCode: string
+	hardType?: string
+	merchantId?: string | number
+	deptId?: string | number
+	fileCount: number
+	latestUploadTime?: string
+}
+
+export interface TerminalLogTreeNode {
+	key: string
+	label: string
+	relativePath: string
+	directory: boolean
+	fileId?: string | number
+	fileSize?: number
+	logDate?: string
+	uploadTime?: string
+	children?: TerminalLogTreeNode[]
+}
+
+export interface TerminalLogPreview {
+	id: string | number
+	originalName: string
+	relativePath: string
+	content: string
+	lineCount: number
+	fileSize: number
+	truncated: boolean
+}
+
+export function fetchList(query?: Object) {
+	return request({
+		url: "/hard/hardTerminalLogFile/page",
+		method: "get",
+		params: query,
+	})
+}
+
+export function fetchDevicePage(query?: TerminalLogQuery) {
+	return request({
+		url: "/hard/hardTerminalLogFile/device-page",
+		method: "get",
+		params: query,
+	})
+}
+
+export function fetchFileTree(query: TerminalLogQuery) {
+	return request({
+		url: "/hard/hardTerminalLogFile/file-tree",
+		method: "get",
+		params: query,
+	})
+}
+
+export function fetchPreview(id: string | number) {
+	return request({
+		url: `/hard/hardTerminalLogFile/${id}/preview`,
+		method: "get",
+	})
+}
+
+export function pullTerminalLog(hardId: string | number) {
+	return request({
+		url: `/hard/hardTerminalLogFile/pull/${hardId}`,
+		method: "post",
+	})
+}
+
+export function downloadUrl(id: string | number) {
+	return `/hard/hardTerminalLogFile/${id}/download`
+}
+
+export function downloadFile(id: string | number) {
+	return request({
+		url: downloadUrl(id),
+		method: "get",
+		responseType: "blob",
+	})
+}
diff --git a/src/api/hard/hard-xfj-log.ts b/src/api/hard/hard-xfj-log.ts
new file mode 100644
index 0000000..a2e772e
--- /dev/null
+++ b/src/api/hard/hard-xfj-log.ts
@@ -0,0 +1,40 @@
+import request from "/@/utils/request"
+
+export function fetchList(query?: Object) {
+	return request({
+		url: "/hard/xfj-log/page",
+		method: "get",
+		params: query,
+	})
+}
+
+export function addObj(obj?: Object) {
+	return request({
+		url: "/hard/xfj-log",
+		method: "post",
+		data: obj,
+	})
+}
+
+export function getObj(id?: string) {
+	return request({
+		url: "/hard/xfj-log/" + id,
+		method: "get",
+	})
+}
+
+export function delObjs(ids?: Object) {
+	return request({
+		url: "/hard/xfj-log",
+		method: "delete",
+		data: ids,
+	})
+}
+
+export function putObj(obj?: Object) {
+	return request({
+		url: "/hard/xfj-log",
+		method: "put",
+		data: obj,
+	})
+}
diff --git a/src/api/wallet/wallet-transaction.ts b/src/api/wallet/wallet-transaction.ts
index 007514c..08a8859 100644
--- a/src/api/wallet/wallet-transaction.ts
+++ b/src/api/wallet/wallet-transaction.ts
@@ -1,5 +1,54 @@
 import request from "/@/utils/request"
 
+/**
+ * 流水备注的前后端统一字符上限，与 wallet_transaction.remark 字段长度保持一致。
+ */
+export const WALLET_TRANSACTION_REMARK_MAX_LENGTH = 256
+
+/**
+ * 钱包流水备注修改参数，只允许提交流水编号和备注。
+ */
+export interface WalletTransactionRemarkParams {
+	/** 需要修改的钱包流水编号。 */
+	id: string | number
+	/** 新备注；空字符串表示清除原备注。 */
+	remark?: string
+}
+
+/**
+ * 钱包流水信息修改参数，只允许提交流水编号、触发部门和创建时间。
+ */
+export interface WalletTransactionUpdateInfoParams {
+	/** 需要修改的钱包流水编号。 */
+	id: string | number
+	/** 流水触发事件归属的新部门编号。 */
+	deptId: string | number
+	/** 流水新的创建时间，格式为 yyyy-MM-dd HH:mm:ss；用于更正流水归属统计周期。 */
+	createTime: string
+}
+
+/**
+ * 修改单笔钱包流水备注
+ */
+export function updateRemark(data: WalletTransactionRemarkParams) {
+	return request({
+		url: "/wallet/wallet-transaction/update-remark",
+		method: "put",
+		data,
+	})
+}
+
+/**
+ * 修改单笔钱包流水的归属部门和创建时间
+ */
+export function updateInfo(data: WalletTransactionUpdateInfoParams) {
+	return request({
+		url: "/wallet/wallet-transaction/update-info",
+		method: "put",
+		data,
+	})
+}
+
 /**
  * 各自食堂退还记录
  */
diff --git a/src/components/DraggableDepTree/index.vue b/src/components/DraggableDepTree/index.vue
index c406799..ae0e629 100644
--- a/src/components/DraggableDepTree/index.vue
+++ b/src/components/DraggableDepTree/index.vue
@@ -1,25 +1,24 @@
 <template>
-	<Splitpanes @resize="state.treeWidth = $event[0].size">
-		<pane :size="state.treeWidth">
+	<Splitpanes class="draggable-dep-tree" @resize="state.treeWidth = $event[0].size">
+		<pane :size="state.treeWidth" class="draggable-dep-tree__tree-pane">
 			<!-- 树 -->
-			<div v-loading="state.loading" class="h-full flex flex-col m-1">
+			<div v-loading="state.loading" class="dep-tree-panel">
 				<!-- 头部区域 -->
-				<div class="flex items-center pb-2 shadow-gray-400 z-10"
-					style="box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.1)">
-					<div class="w-4/5">
-						<el-input v-model="state.searchName" suffix-icon="search" :placeholder="placeholder" clearable
-							@change="handleSearchInputChange" />
-					</div>
-					<div class="flex-1 ml-[5%] leading-none" v-if="showExpand">
+				<div class="dep-tree-panel__header">
+					<el-input v-model="state.searchName" class="dep-tree-panel__search" suffix-icon="search"
+						:placeholder="placeholder" :aria-label="placeholder || '搜索树节点'" size="small" clearable
+						@change="handleSearchInputChange" />
+					<div v-if="showExpand" class="dep-tree-panel__operations">
 						<el-dropdown :hide-on-click="false">
-							<el-icon style="transform: rotate(90deg)">
-								<MoreFilled />
-							</el-icon>
+							<button type="button" class="dep-tree-panel__more" title="树操作" aria-label="树操作">
+								<el-icon>
+									<MoreFilled />
+								</el-icon>
+							</button>
 							<template #dropdown>
 								<el-dropdown-menu>
 									<el-dropdown-item>
-										<el-button
-											class="!h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
+										<el-button class="!h-5 !text-gray-500 dark:!text-white dark:hover:!text-primary"
 											link :icon="state.isExpand ? 'expand' : 'fold'"
 											@click="toggleRowExpansionAll(state.isExpand ? false : true)">
 											{{ state.isExpand ? "折叠" : "展开" }}
@@ -32,14 +31,14 @@
 				</div>
 
 				<!-- 树形结构 -->
-				<div class="flex-1 overflow-hidden hover:overflow-auto">
-					<el-tree ref="treeRef" :props="props.props" :data="state.treeDataList" :expand-on-click-node="false"
-						node-key="id" :highlight-current="nodeClickable ? true : false" default-expand-all show-checkbox
-						@node-click="handleNodeClick" @check="handleCheck">
+				<div class="dep-tree-panel__body">
+					<el-tree ref="treeRef" class="dep-tree-panel__tree" :props="props.props" :data="state.treeDataList"
+						:expand-on-click-node="false" node-key="id" :highlight-current="nodeClickable ? true : false"
+						default-expand-all show-checkbox @node-click="handleNodeClick" @check="handleCheck">
 						<template #default="{ node, data }">
 							<el-tooltip v-if="data.isLock" effect="dark" :content="$t('sysuser.noDataScopeTip')"
 								placement="right">
-								<span>
+								<span class="dep-tree-panel__locked-node">
 									{{ node.label }}
 									<SvgIcon name="ele-Lock" />
 								</span>
@@ -49,28 +48,25 @@
 				</div>
 
 				<!-- 底部区域 -->
-				<div class="flex justify-center items-center pt-2 z-50 sticky bottom-0 overflow-hidden"
-					style="box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.1)">
-					<el-switch v-model="state.switch" @change="handleSwitchChange" :inactive-text="switchInactiveText"
-						:active-text="switchActiveText"
+				<div class="dep-tree-panel__footer">
+					<el-switch v-model="state.switch" size="small" :inactive-text="switchInactiveText"
+						:active-text="switchActiveText" @change="handleSwitchChange"
 						:disabled="nodeClickable && state.checkedTreeNodes.length > 0" />
 				</div>
 			</div>
 		</pane>
 
-		<pane :size="100 - state.treeWidth" class="pl-1 relative">
+		<pane :size="100 - state.treeWidth" class="draggable-dep-tree__content-pane">
 			<!-- 折叠按钮 -->
-			<div class="w-[12px] h-[56px] bg-gray-200 absolute left-0 top-[44vh] translate-y-[-50%] transition-all cursor-pointer rounded-tr-2xl rounded-br-2xl"
-				@click="handleClickTreeFold()">
-				<i class="text-gray-400 inline-block text-center leading-[62px] hover:opacity-50">
-					<el-icon>
-						<ArrowLeftBold v-if="state.treeWidth > 0" />
-						<ArrowRightBold v-else />
-					</el-icon>
-				</i>
-			</div>
+			<button type="button" class="draggable-dep-tree__fold" :title="treeVisible ? '收起部门树' : '展开部门树'"
+				:aria-label="treeVisible ? '收起部门树' : '展开部门树'" @click="handleClickTreeFold()">
+				<el-icon>
+					<ArrowLeftBold v-if="treeVisible" />
+					<ArrowRightBold v-else />
+				</el-icon>
+			</button>
 
-			<div class="w-full h-full p-3 overflow-auto">
+			<div class="draggable-dep-tree__content">
 				<slot name="default" />
 			</div>
 		</pane>
@@ -213,21 +209,257 @@ defineExpose({
 })
 </script>
 
-<style>
-.splitpanes--vertical>.splitpanes__splitter {
-	background: var(--el-color-primary);
-	/* min-width: 2px; */
+<style lang="scss">
+.draggable-dep-tree {
+	min-width: 0;
+	background: var(--el-bg-color);
+}
+
+.draggable-dep-tree__tree-pane,
+.draggable-dep-tree__content-pane {
+	min-width: 0;
+}
+
+.dep-tree-panel {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	min-width: 0;
+	margin-right: 8px;
+	padding: 8px 6px 6px 8px;
+	background: var(--el-bg-color);
+}
+
+.dep-tree-panel__header {
+	z-index: 2;
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding-bottom: 6px;
+	border-bottom: 1px solid var(--el-border-color-extra-light);
+}
+
+.dep-tree-panel__search {
+	flex: 1;
+	min-width: 0;
+}
+
+.dep-tree-panel__operations {
+	display: flex;
+	flex: 0 0 auto;
+	align-items: center;
+}
+
+.dep-tree-panel__more {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	padding: 0;
+	font: inherit;
+	color: var(--el-text-color-secondary);
+	cursor: pointer;
+	background: transparent;
+	border: 0;
+	border-radius: var(--el-border-radius-base);
+	outline: none;
+	transition: color 180ms ease, background-color 180ms ease;
+}
+
+.dep-tree-panel__more .el-icon {
+	transform: rotate(90deg);
+}
+
+.dep-tree-panel__more:hover {
+	color: var(--el-color-primary);
+	background: var(--el-color-primary-light-9);
+}
+
+.dep-tree-panel__more:focus-visible {
+	color: var(--el-color-primary);
+	outline: 2px solid var(--el-color-primary-light-5);
+	outline-offset: 1px;
+}
+
+.dep-tree-panel__body {
+	flex: 1;
+	min-height: 0;
+	padding: 4px 2px 4px 0;
+	overflow: auto;
+}
+
+.dep-tree-panel__tree {
+	--el-tree-node-content-height: 26px;
+	width: 100%;
+	min-width: 0;
+	font-size: var(--el-font-size-extra-small);
+	background: transparent;
+}
+
+.dep-tree-panel__tree .el-tree-node {
+	min-width: 0;
+}
+
+.dep-tree-panel__tree .el-tree-node__content {
+	min-width: 0;
+	padding-right: 4px;
+	overflow: hidden;
+	border-radius: var(--el-border-radius-small);
+	transition: color 180ms ease, background-color 180ms ease;
+}
+
+.dep-tree-panel__tree .el-tree-node__content>.el-tree-node__expand-icon {
+	padding: 3px;
+	font-size: 11px;
+}
+
+.dep-tree-panel__tree .el-tree-node__content>label.el-checkbox {
+	--el-checkbox-input-height: 12px;
+	--el-checkbox-input-width: 12px;
+	margin-right: 3px;
+}
+
+.dep-tree-panel__tree .el-tree-node__label,
+.dep-tree-panel__locked-node {
+	display: inline-flex;
+	flex: 1;
+	align-items: center;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.dep-tree-panel__locked-node .svg-icon {
+	flex: 0 0 auto;
+	margin-left: 4px;
+}
+
+.dep-tree-panel__footer {
+	z-index: 2;
+	display: flex;
+	flex: 0 0 auto;
+	align-items: center;
+	justify-content: center;
+	min-height: 30px;
+	padding-top: 5px;
+	overflow: hidden;
+	background: var(--el-bg-color);
+	border-top: 1px solid var(--el-border-color-extra-light);
+}
+
+.dep-tree-panel__footer .el-switch {
+	--el-switch-on-color: var(--el-color-primary);
+	font-size: var(--el-font-size-extra-small);
+}
+
+.draggable-dep-tree__content-pane {
+	position: relative;
+	/* 分隔线与折叠按钮使用同一定位容器，避免跨 pane 定位后被裁剪或覆盖。 */
+}
+
+.draggable-dep-tree__content-pane::before {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 1;
+	width: 1px;
+	content: "";
+	background: var(--el-border-color-lighter);
+	transition: background-color 180ms ease, width 180ms ease;
+}
+
+.draggable-dep-tree__content {
+	width: 100%;
+	height: 100%;
+	padding: 8px 8px 8px 16px;
+	overflow: auto;
+}
+
+.draggable-dep-tree__fold {
+	position: absolute;
+	top: 50%;
+	left: 0;
+	z-index: 3;
+	display: inline-flex;
+	align-items: center;
+	justify-content: flex-start;
+	width: 20px;
+	height: 56px;
+	padding: 0;
+	font: inherit;
+	font-size: 12px;
+	color: var(--el-text-color-secondary);
+	cursor: pointer;
+	background: transparent;
+	border: 0;
+	border-radius: 0;
+	outline: none;
+	transform: translateY(-50%);
+	transition: color 180ms ease;
+}
+
+.draggable-dep-tree__fold::before {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	width: 12px;
+	content: "";
+	background: var(--el-fill-color-dark);
+	border-radius: 0 var(--el-border-radius-round) var(--el-border-radius-round) 0;
+	transition: background-color 180ms ease;
+}
+
+.draggable-dep-tree__fold .el-icon {
+	position: relative;
+	z-index: 1;
+	width: 12px;
+	color: inherit;
+}
+
+.draggable-dep-tree__fold:hover {
+	color: var(--el-color-primary);
+}
+
+.draggable-dep-tree__fold:hover::before,
+.draggable-dep-tree__fold:focus-visible::before {
+	background: var(--el-color-primary-light-8);
+}
+
+.draggable-dep-tree__fold:focus-visible {
+	color: var(--el-color-primary);
+	outline: 2px solid var(--el-color-primary-light-5);
+	outline-offset: 1px;
+}
+
+.draggable-dep-tree.splitpanes--vertical>.splitpanes__splitter {
+	position: relative;
+	flex: 0 0 6px;
+	width: 6px;
+	background: transparent;
+}
+
+.draggable-dep-tree.splitpanes--vertical>.splitpanes__splitter:hover+.draggable-dep-tree__content-pane::before,
+.draggable-dep-tree.splitpanes--vertical>.splitpanes__splitter:active+.draggable-dep-tree__content-pane::before {
 	width: 2px;
-	transition: all 0.3s ease;
+	background: var(--el-color-primary);
 }
 
-.splitpanes--vertical>.splitpanes__splitter:active {
-	background: var(--el-color-primary);
-	opacity: 0.6;
-}
+@media (prefers-reduced-motion: reduce) {
 
-.splitpanes--vertical>.splitpanes__splitter:hover {
-	background: var(--el-color-primary);
-	opacity: 0.6;
+	.dep-tree-panel__more,
+	.dep-tree-panel__tree .el-tree-node__content,
+	.draggable-dep-tree__fold,
+	.draggable-dep-tree__fold::before,
+	.draggable-dep-tree__content-pane::before {
+		transition: none;
+	}
+
+	.draggable-dep-tree.splitpanes--vertical>.splitpanes__pane {
+		transition: none;
+	}
 }
 </style>
diff --git a/src/components/SearchPanel/index.vue b/src/components/SearchPanel/index.vue
new file mode 100644
index 0000000..28a81b3
--- /dev/null
+++ b/src/components/SearchPanel/index.vue
@@ -0,0 +1,270 @@
+<template>
+	<section class="search-panel" :aria-labelledby="titleId">
+		<header class="search-panel__header">
+			<div class="search-panel__title-wrap">
+				<h2 :id="titleId" class="search-panel__title">{{ title }}</h2>
+				<el-tag v-if="!expanded && hiddenActiveCount > 0" size="small" effect="plain" round>
+					更多条件 {{ hiddenActiveCount }}
+				</el-tag>
+			</div>
+
+			<button v-if="hasMoreFields" type="button" class="search-panel__toggle" :aria-controls="contentId"
+				:aria-expanded="expanded" @click="toggleExpanded">
+				{{ expanded ? collapseText : expandText }}
+				<el-icon class="search-panel__toggle-icon">
+					<ArrowUp v-if="expanded" />
+					<ArrowDown v-else />
+				</el-icon>
+			</button>
+		</header>
+
+		<el-form ref="formRef" :model="model" inline class="search-panel__form" @keyup.enter="handleSearch">
+			<div class="search-panel__row">
+				<slot />
+				<div v-if="!expanded || !hasMoreFields" class="search-panel__actions">
+					<el-button type="primary" :icon="Search" :loading="loading" @click="handleSearch">
+						{{ searchText }}
+					</el-button>
+					<el-button :icon="Refresh" :disabled="loading" @click="handleReset">
+						{{ resetText }}
+					</el-button>
+				</div>
+			</div>
+
+			<div v-show="expanded && hasMoreFields" :id="contentId" class="search-panel__row search-panel__more">
+				<slot name="more" />
+				<div class="search-panel__actions">
+					<el-button type="primary" :icon="Search" :loading="loading" @click="handleSearch">
+						{{ searchText }}
+					</el-button>
+					<el-button :icon="Refresh" :disabled="loading" @click="handleReset">
+						{{ resetText }}
+					</el-button>
+				</div>
+			</div>
+		</el-form>
+	</section>
+</template>
+
+<script setup lang="ts" name="search-panel">
+import { ArrowDown, ArrowUp, Refresh, Search } from "@element-plus/icons-vue"
+import type { FormInstance } from "element-plus"
+import { getCurrentInstance, useSlots } from "vue"
+
+/** 全局搜索面板属性。 */
+interface SearchPanelProps {
+	/** 查询表单模型，由业务页面持有并提交，组件不修改字段语义。 */
+	model: Record<string, any>
+	/** 面板标题。 */
+	title?: string
+	/** 查询按钮文案。 */
+	searchText?: string
+	/** 重置按钮文案。 */
+	resetText?: string
+	/** 查询请求是否进行中，用于禁用重复提交。 */
+	loading?: boolean
+	/** 折叠时仍在生效的隐藏条件数量，帮助用户识别隐含筛选。 */
+	hiddenActiveCount?: number
+	/** 展开按钮文案。 */
+	expandText?: string
+	/** 收起按钮文案。 */
+	collapseText?: string
+}
+
+/** 全局搜索面板事件。 */
+interface SearchPanelEmits {
+	/** 用户点击查询或在表单中按回车时触发。 */
+	(event: "search"): void
+	/** 用户点击重置时触发，字段清理由业务页面按原有规则完成。 */
+	(event: "reset"): void
+}
+
+const props = withDefaults(defineProps<SearchPanelProps>(), {
+	title: "搜索",
+	searchText: "查询",
+	resetText: "重置",
+	loading: false,
+	hiddenActiveCount: 0,
+	expandText: "展开",
+	collapseText: "收起",
+})
+const emit = defineEmits<SearchPanelEmits>()
+const slots = useSlots()
+
+/** 更多条件的展开状态，支持业务页面按需双向控制。 */
+const expanded = defineModel<boolean>("expanded", { default: false })
+/** Element Plus 表单实例，用于向业务页面提供标准表单能力。 */
+const formRef = ref<FormInstance>()
+/** 当前组件实例标识，用于关联折叠按钮与可展开区域。 */
+const instanceUid = getCurrentInstance()?.uid ?? 0
+/** 面板标题元素 ID。 */
+const titleId = `search-panel-title-${instanceUid}`
+/** 更多条件区域 ID。 */
+const contentId = `search-panel-content-${instanceUid}`
+/** 是否提供了更多条件插槽。 */
+const hasMoreFields = computed(() => Boolean(slots.more))
+
+/** 切换更多查询条件的展开状态。 */
+const toggleExpanded = () => {
+	expanded.value = !expanded.value
+}
+
+/** 触发业务页面查询，加载期间忽略重复提交。 */
+const handleSearch = () => {
+	if (props.loading) return
+	emit("search")
+}
+
+/** 将重置操作交给业务页面，保留部门树等关联状态的既有清理规则。 */
+const handleReset = () => {
+	if (props.loading) return
+	emit("reset")
+}
+
+/** 清除表单字段及校验状态，供业务页面的重置方法调用。 */
+const resetFields = () => {
+	formRef.value?.resetFields()
+}
+
+/** 清除表单校验状态，不修改查询模型。 */
+const clearValidate = () => {
+	formRef.value?.clearValidate()
+}
+
+defineExpose({ resetFields, clearValidate })
+</script>
+
+<style scoped lang="scss">
+.search-panel {
+	width: 100%;
+	padding: 8px 12px 0;
+	margin-bottom: 8px;
+	background: var(--el-bg-color);
+	border: 1px solid var(--el-border-color-lighter);
+	border-radius: var(--el-border-radius-base);
+}
+
+.search-panel__header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	min-height: 24px;
+	margin-bottom: 6px;
+}
+
+.search-panel__title-wrap,
+.search-panel__actions {
+	display: flex;
+	align-items: center;
+}
+
+.search-panel__title-wrap {
+	gap: 6px;
+	min-width: 0;
+}
+
+.search-panel__title {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	margin: 0;
+	font-size: var(--el-font-size-small);
+	font-weight: 600;
+	line-height: 20px;
+	color: var(--el-text-color-primary);
+}
+
+.search-panel__title::before {
+	width: 2px;
+	height: 14px;
+	content: "";
+	background: var(--el-color-primary);
+	border-radius: 1px;
+}
+
+.search-panel__toggle {
+	display: inline-flex;
+	align-items: center;
+	min-height: 24px;
+	padding: 0;
+	margin-left: 12px;
+	font: inherit;
+	font-size: var(--el-font-size-small);
+	line-height: 20px;
+	color: var(--el-text-color-secondary);
+	cursor: pointer;
+	background: transparent;
+	border: 0;
+	outline: none;
+	transition: color 180ms ease;
+}
+
+.search-panel__toggle:hover {
+	color: var(--el-color-primary);
+}
+
+.search-panel__toggle:focus-visible {
+	color: var(--el-color-primary);
+	outline: 2px solid var(--el-color-primary-light-5);
+	outline-offset: 2px;
+	border-radius: 2px;
+}
+
+.search-panel__toggle-icon {
+	margin-left: 4px;
+	transition: transform 180ms ease;
+}
+
+.search-panel__row {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-start;
+}
+
+.search-panel__more {
+	padding-top: 8px;
+	border-top: 1px solid var(--el-border-color-extra-light);
+}
+
+.search-panel__actions {
+	gap: 6px;
+	min-height: 32px;
+	margin-bottom: 8px;
+}
+
+.search-panel__actions :deep(.el-button + .el-button) {
+	margin-left: 0;
+}
+
+.search-panel__form :deep(.el-form-item) {
+	margin-bottom: 8px;
+}
+
+@media (max-width: 767px) {
+	.search-panel {
+		padding-right: 12px;
+		padding-left: 12px;
+	}
+
+	.search-panel__row {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.search-panel__form :deep(.el-form-item) {
+		width: 100% !important;
+		margin-right: 0;
+	}
+
+	.search-panel__actions {
+		width: 100%;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.search-panel__toggle-icon {
+		transition: none;
+	}
+}
+</style>
diff --git a/src/components/UserIdentityInfo/identity-options.ts b/src/components/UserIdentityInfo/identity-options.ts
new file mode 100644
index 0000000..2d31e25
--- /dev/null
+++ b/src/components/UserIdentityInfo/identity-options.ts
@@ -0,0 +1,30 @@
+import { useDict } from "/@/hooks/dict"
+import type { Ref } from "vue"
+
+/** 用户身份字典中的单个展示选项。 */
+export interface UserIdentityTypeOption {
+	/** 面向管理人员展示的身份名称。 */
+	label: string
+	/** 前后端共同使用的用户身份协议编码。 */
+	value: string | number
+}
+
+/**
+ * 所有用户身份信息组件共享的字典引用。
+ *
+ * 表格会同时创建多行组件实例，复用同一引用可避免字典尚未缓存时重复发起请求。
+ */
+let sharedIdentityTypeOptions: Ref<UserIdentityTypeOption[]> | undefined
+
+/**
+ * 获取用户身份字典的共享响应式引用，首次调用时沿用项目统一字典 Hook 初始化。
+ *
+ * @returns 所有用户身份信息组件共同读取的身份字典引用
+ */
+export const useUserIdentityTypeOptions = (): Ref<UserIdentityTypeOption[]> => {
+	if (!sharedIdentityTypeOptions) {
+		const { user_identity_type } = useDict("user_identity_type")
+		sharedIdentityTypeOptions = user_identity_type
+	}
+	return sharedIdentityTypeOptions
+}
diff --git a/src/components/UserIdentityInfo/index.vue b/src/components/UserIdentityInfo/index.vue
new file mode 100644
index 0000000..6915c37
--- /dev/null
+++ b/src/components/UserIdentityInfo/index.vue
@@ -0,0 +1,162 @@
+<template>
+	<div v-if="identityItems.length" class="min-w-0 text-left">
+		<div v-for="identity in identityItems" :key="identity.type" class="user-identity-info__item min-w-0">
+			<div class="flex min-w-0 items-center gap-1.5 leading-4">
+				<span class="h-3 w-0.5 shrink-0 rounded-sm bg-primary" aria-hidden="true"></span>
+				<span class="truncate text-xs font-semibold text-[var(--el-text-color-primary)]" :title="identity.label">
+					{{ identity.label }}
+				</span>
+			</div>
+			<dl class="m-0 mt-0.5 grid gap-0 text-xs leading-4">
+				<div v-for="detail in identity.details" :key="detail.label" class="flex min-w-0 gap-2">
+					<dt class="w-20 shrink-0 text-[var(--el-text-color-secondary)]">{{ detail.label }}</dt>
+					<dd class="m-0 truncate text-[var(--el-text-color-primary)]" :title="detail.value">
+						{{ detail.value }}
+					</dd>
+				</div>
+			</dl>
+		</div>
+	</div>
+	<span v-else class="text-xs leading-4 text-[var(--el-text-color-placeholder)]">{{ props.emptyText }}</span>
+</template>
+
+<script setup lang="ts" name="UserIdentityInfo">
+import { DEFAULT_USER_IDENTITY, STUDENT_USER_IDENTITY, TEACHER_USER_IDENTITY } from "/@/constants/userIdentity"
+import { useUserIdentityTypeOptions } from "./identity-options"
+
+/** 学生身份对应的扩展资料摘要。 */
+interface UserStudentIdentityInfo {
+	/** 学生学号；为空时组件显示未填写。 */
+	studentNo?: string | number | null
+	/** 学校名称；为空时组件显示未填写。 */
+	schoolName?: string | null
+	/** 班级名称；为空时组件显示未填写。 */
+	className?: string | null
+	/** 监护人手机号集合，多个手机号由英文逗号分隔。 */
+	guardianPhones?: string | null
+}
+
+/** 老师身份对应的扩展资料摘要。 */
+interface UserTeacherIdentityInfo {
+	/** 老师学号；为空时组件显示未填写。 */
+	teacherNo?: string | number | null
+}
+
+/** 可复用身份信息组件需要的最小用户摘要。 */
+interface UserIdentityInfoUser {
+	/** 用户拥有的身份协议编码列表；为空数组或缺失时展示空状态。 */
+	identityTypes?: Array<string | number> | null
+	/** 默认用户身份使用的绑定手机号。 */
+	phone?: string | number | null
+	/** 学生身份使用的扩展资料。 */
+	studentInfo?: UserStudentIdentityInfo | null
+	/** 老师身份使用的扩展资料。 */
+	teacherInfo?: UserTeacherIdentityInfo | null
+}
+
+/** 用户身份信息组件的展示配置。 */
+interface UserIdentityInfoProps {
+	/** 后端接口或上层列表传入的用户身份摘要。 */
+	user: UserIdentityInfoUser
+	/** 用户没有任何身份时展示的占位文案。 */
+	emptyText?: string
+}
+
+/** 当前组件输入及其空状态默认文案。 */
+const props = withDefaults(defineProps<UserIdentityInfoProps>(), {
+	emptyText: "暂无身份信息",
+})
+
+/** 用户身份字典的共享响应式引用，用于将协议编码转换为展示名称。 */
+const identityTypeOptions = useUserIdentityTypeOptions()
+
+/** 用户身份区中的单项资料。 */
+interface UserIdentityDetailItem {
+	/** 面向管理人员展示的资料字段名称。 */
+	label: string
+	/** 接口值经过空值规范化后的展示文本。 */
+	value: string
+}
+
+/** 用户身份区中的一个身份及其全部资料。 */
+interface UserIdentityDisplayItem {
+	/** 前后端共同使用的身份协议编码，同时作为稳定渲染键。 */
+	type: string
+	/** 字典映射后的身份名称，未知编码回退为原始编码。 */
+	label: string
+	/** 当前身份需要展示的资料列表。 */
+	details: UserIdentityDetailItem[]
+}
+
+/**
+ * 将接口值规范为表格展示文本，避免 null、空字符串或纯空白形成无法识别的留白。
+ *
+ * @param value 用户身份接口返回的原始资料值
+ * @param emptyText 资料缺失时展示的业务占位文案
+ * @returns 去除首尾空白后的资料文本，或指定占位文案
+ */
+const formatIdentityValue = (value: unknown, emptyText = "未填写") => {
+	if (value === undefined || value === null) return emptyText
+	const text = String(value).trim()
+	return text || emptyText
+}
+
+/**
+ * 按身份协议编码提取该身份对应的资料，未知编码保留原始值以便排查历史数据。
+ *
+ * @param identityType 前后端共同使用的身份协议编码
+ * @returns 当前身份需要展示的字段名称和值
+ */
+const getIdentityDetails = (identityType: string): UserIdentityDetailItem[] => {
+	if (identityType === DEFAULT_USER_IDENTITY) {
+		return [{ label: "手机号", value: formatIdentityValue(props.user.phone, "未绑定") }]
+	}
+	if (identityType === STUDENT_USER_IDENTITY) {
+		// 学校与班级共同描述学生的学籍归属，合并展示可减少列表行高。
+		return [
+			{ label: "学号", value: formatIdentityValue(props.user.studentInfo?.studentNo) },
+			{
+				label: "学校 / 班级",
+				value: `${formatIdentityValue(props.user.studentInfo?.schoolName)} / ${formatIdentityValue(props.user.studentInfo?.className)}`,
+			},
+			{ label: "监护人手机号", value: formatIdentityValue(props.user.studentInfo?.guardianPhones) },
+		]
+	}
+	if (identityType === TEACHER_USER_IDENTITY) {
+		return [{ label: "老师学号", value: formatIdentityValue(props.user.teacherInfo?.teacherNo) }]
+	}
+	return [{ label: "身份编码", value: identityType }]
+}
+
+/**
+ * 从共享字典取得身份名称，字典尚未加载或遇到未知编码时回退为协议编码。
+ *
+ * @param identityType 前后端共同使用的身份协议编码
+ * @returns 字典中的身份名称或原始编码
+ */
+const getIdentityLabel = (identityType: string) => {
+	const option = identityTypeOptions.value?.find((item) => String(item.value) === identityType)
+	return option?.label || identityType
+}
+
+/**
+ * 规范并组装用户的全部身份展示项；去除空编码和重复编码，保持接口返回的原始顺序。
+ */
+const identityItems = computed<UserIdentityDisplayItem[]>(() => {
+	if (!Array.isArray(props.user.identityTypes)) return []
+	const identityTypes = props.user.identityTypes.map((item) => String(item).trim()).filter(Boolean)
+	return Array.from(new Set(identityTypes)).map((type) => ({
+		type,
+		label: getIdentityLabel(type),
+		details: getIdentityDetails(type),
+	}))
+})
+</script>
+
+<style scoped lang="scss">
+.user-identity-info__item + .user-identity-info__item {
+	padding-top: 4px;
+	margin-top: 4px;
+	border-top: 1px solid var(--el-border-color-extra-light);
+}
+</style>
diff --git a/src/components/UserIdentityQuery/index.vue b/src/components/UserIdentityQuery/index.vue
new file mode 100644
index 0000000..bd11ab1
--- /dev/null
+++ b/src/components/UserIdentityQuery/index.vue
@@ -0,0 +1,152 @@
+<template>
+	<el-form-item class="w-[250px] max-md:w-full" label="用户身份" prop="identityTypes">
+		<dict-select v-model="identityTypes" dict-code="user_identity_type" multiple placeholder="请选择用户身份" />
+	</el-form-item>
+
+	<el-form-item v-for="fieldConfig in activeFieldConfigs" :key="`${fieldConfig.modelName}.${fieldConfig.field}`"
+		class="w-[250px] max-md:w-full" :label="fieldConfig.label"
+		:prop="`${fieldConfig.modelName}.${fieldConfig.field}`">
+		<dict-select v-if="fieldConfig.control === 'dict-select'" :model-value="getQueryFieldValue(fieldConfig)"
+			:dict-code="fieldConfig.dictCode || ''" :placeholder="fieldConfig.placeholder"
+			@update:model-value="updateQueryFieldValue(fieldConfig, $event)" />
+		<el-input v-else :model-value="getQueryFieldValue(fieldConfig)" clearable :placeholder="fieldConfig.placeholder"
+			@update:model-value="updateQueryFieldValue(fieldConfig, $event)" />
+	</el-form-item>
+
+	<el-form-item class="w-[180px] max-md:w-full" label="人脸录入" prop="hasFace">
+		<el-select v-model="hasFace" clearable placeholder="全部">
+			<el-option label="已录入" value="1" />
+			<el-option label="未录入" value="0" />
+		</el-select>
+	</el-form-item>
+</template>
+
+<script setup lang="ts" name="UserIdentityQuery">
+import { STUDENT_USER_IDENTITY, TEACHER_USER_IDENTITY } from "/@/constants/userIdentity"
+import {
+	createEmptyUserIdentityStudentQuery,
+	createEmptyUserIdentityTeacherQuery,
+	type UserIdentityStudentQuery,
+	type UserIdentityTeacherQuery,
+	type UserIdentityQueryFieldConfig,
+	type UserIdentityQueryModelName,
+} from "./types"
+
+/** 用户身份扩展查询字段配置；新增身份字段时在此扩展对应协议编码、模型和控件。 */
+const identityQueryFieldConfigs: UserIdentityQueryFieldConfig[] = [
+	// 学生学号使用文本输入，兼容学校已有的字母数字混合编号规则，后端按完整编号匹配。
+	{
+		identityType: STUDENT_USER_IDENTITY,
+		modelName: "studentInfo",
+		field: "studentNo",
+		label: "学号",
+		placeholder: "请输入学生学号",
+		control: "input",
+	},
+	// 学校名称沿用用户编辑表单的统一字典，避免自由输入产生无效学校值。
+	{
+		identityType: STUDENT_USER_IDENTITY,
+		modelName: "studentInfo",
+		field: "schoolName",
+		label: "学校",
+		placeholder: "请选择学校",
+		control: "dict-select",
+		dictCode: "user_student_school",
+	},
+	// 班级名称当前没有公共字典，继续按后端扩展资料原值查询。
+	{
+		identityType: STUDENT_USER_IDENTITY,
+		modelName: "studentInfo",
+		field: "className",
+		label: "班级",
+		placeholder: "请输入班级名称",
+		control: "input",
+	},
+	// 监护人资料存储为逗号分隔手机号集合，输入单个手机号即可包含匹配。
+	{
+		identityType: STUDENT_USER_IDENTITY,
+		modelName: "studentInfo",
+		field: "guardianPhones",
+		label: "监护人",
+		placeholder: "请输入监护人手机号",
+		control: "input",
+	},
+	// 老师身份使用独立扩展表和独立学号字段，不复用学生学号协议。
+	{
+		identityType: TEACHER_USER_IDENTITY,
+		modelName: "teacherInfo",
+		field: "teacherNo",
+		label: "老师学号",
+		placeholder: "请输入老师学号",
+		control: "input",
+	},
+]
+
+/** 用户身份类型协议编码集合，由字典值与后端身份表共同约束。 */
+const identityTypes = defineModel<Array<string | number>>("identityTypes", { default: () => [] })
+/** 学生身份扩展查询条件，由页面查询模型持有并提交给用户接口。 */
+const studentInfo = defineModel<UserIdentityStudentQuery>("studentInfo", {
+	default: createEmptyUserIdentityStudentQuery,
+})
+/** 老师身份扩展查询条件，由页面查询模型持有并提交给用户接口。 */
+const teacherInfo = defineModel<UserIdentityTeacherQuery>("teacherInfo", {
+	default: createEmptyUserIdentityTeacherQuery,
+})
+/** 人脸录入状态查询条件：1 已录入，0 未录入，空值表示全部。 */
+const hasFace = defineModel<string>("hasFace", { default: "" })
+
+/** 当前选中身份对应的扩展查询字段配置，驱动字段控件渲染。 */
+const activeFieldConfigs = computed(() => {
+	const selected = new Set(identityTypes.value.map((value) => String(value)))
+	return identityQueryFieldConfigs.filter((fieldConfig) => selected.has(fieldConfig.identityType))
+})
+
+/**
+ * 获取指定身份扩展查询模型，供配置化字段统一读写。
+ *
+ * @param modelName 字段所属的学生或老师查询模型名称
+ * @returns 当前页面持有的对应身份查询模型
+ */
+const getQueryModel = (modelName: UserIdentityQueryModelName): Record<string, string | undefined> => {
+	return (modelName === "studentInfo" ? studentInfo.value : teacherInfo.value) as Record<string, string | undefined>
+}
+
+/**
+ * 读取配置字段的当前查询值。
+ *
+ * @param fieldConfig 当前身份扩展字段配置
+ * @returns 当前字段值，未填写时返回空字符串
+ */
+const getQueryFieldValue = (fieldConfig: UserIdentityQueryFieldConfig) => {
+	return getQueryModel(fieldConfig.modelName)[fieldConfig.field] || ""
+}
+
+/**
+ * 更新配置字段的查询值，普通输入会去除首尾空格，字典值保持协议原值。
+ *
+ * @param fieldConfig 当前身份扩展字段配置
+ * @param value Element Plus 控件返回的字段值
+ */
+const updateQueryFieldValue = (fieldConfig: UserIdentityQueryFieldConfig, value: unknown) => {
+	const nextValue = typeof value === "string" ? value.trim() : String(value || "")
+	if (fieldConfig.modelName === "studentInfo") {
+		studentInfo.value = { ...studentInfo.value, [fieldConfig.field]: nextValue }
+		return
+	}
+	teacherInfo.value = { ...teacherInfo.value, [fieldConfig.field]: nextValue }
+}
+
+/**
+ * 切换身份时同步清理未选身份的查询条件，避免用户看不到的条件继续提交。
+ * 默认身份的手机号继续使用用户主查询字段，不在此重复生成同义条件。
+ */
+watch(
+	identityTypes,
+	(values) => {
+		const selected = new Set(values.map((value) => String(value)))
+		if (!selected.has(STUDENT_USER_IDENTITY)) studentInfo.value = createEmptyUserIdentityStudentQuery()
+		if (!selected.has(TEACHER_USER_IDENTITY)) teacherInfo.value = createEmptyUserIdentityTeacherQuery()
+	},
+	{ deep: true },
+)
+</script>
diff --git a/src/components/UserIdentityQuery/types.ts b/src/components/UserIdentityQuery/types.ts
new file mode 100644
index 0000000..8aa8d65
--- /dev/null
+++ b/src/components/UserIdentityQuery/types.ts
@@ -0,0 +1,62 @@
+/** 用户身份扩展查询字段所属的前端模型。 */
+export type UserIdentityQueryModelName = "studentInfo" | "teacherInfo"
+
+/** 用户身份扩展查询字段使用的表单控件。 */
+export type UserIdentityQueryControl = "input" | "dict-select"
+
+/** 单个用户身份扩展查询字段的渲染配置。 */
+export interface UserIdentityQueryFieldConfig {
+	/** 显示该字段所需的身份协议编码。 */
+	identityType: string
+	/** 字段所属的查询模型名称。 */
+	modelName: UserIdentityQueryModelName
+	/** 前后端 DTO 共同使用的字段名称。 */
+	field: string
+	/** 查询表单展示的字段名称。 */
+	label: string
+	/** 字段未填写时展示的输入提示。 */
+	placeholder: string
+	/** 字段使用的表单控件类型。 */
+	control: UserIdentityQueryControl
+	/** 字典选择控件的数据字典编码；普通输入框不设置。 */
+	dictCode?: string
+}
+
+/** 学生身份扩展查询条件；学号和学校使用精确匹配，其余文本字段使用包含匹配。 */
+export interface UserIdentityStudentQuery {
+	/** 学生学号，来源于学生身份扩展表，按完整学号精确匹配。 */
+	studentNo?: string
+	/** 学校名称，来源于学生身份扩展表，按学校字典值精确匹配。 */
+	schoolName?: string
+	/** 班级名称，来源于学生身份扩展表。 */
+	className?: string
+	/** 监护人手机号，来源于学生身份扩展表中逗号分隔的手机号集合。 */
+	guardianPhones?: string
+}
+
+/** 老师身份扩展查询条件。 */
+export interface UserIdentityTeacherQuery {
+	/** 老师学号，来源于老师身份扩展表，按完整学号精确匹配。 */
+	teacherNo?: string
+}
+
+/**
+ * 创建用户身份通用查询组件的学生扩展字段初始值。
+ *
+ * @returns 所有学生身份查询字段均为空的独立对象
+ */
+export const createEmptyUserIdentityStudentQuery = (): UserIdentityStudentQuery => ({
+	studentNo: "",
+	schoolName: "",
+	className: "",
+	guardianPhones: "",
+})
+
+/**
+ * 创建用户身份通用查询组件的老师扩展字段初始值。
+ *
+ * @returns 老师学号为空的独立对象
+ */
+export const createEmptyUserIdentityTeacherQuery = (): UserIdentityTeacherQuery => ({
+	teacherNo: "",
+})
diff --git a/src/components/UserInfoCell/index.vue b/src/components/UserInfoCell/index.vue
new file mode 100644
index 0000000..7f39879
--- /dev/null
+++ b/src/components/UserInfoCell/index.vue
@@ -0,0 +1,135 @@
+<template>
+	<div class="flex min-w-0 items-center gap-3 text-left">
+		<el-avatar :size="props.avatarSize" :src="props.user.avatar || undefined" :alt="displayName" class="user-info-cell__avatar shrink-0">
+			{{ avatarFallback }}
+		</el-avatar>
+		<div class="min-w-0 flex-1">
+			<div class="flex min-w-0 items-center gap-1.5 leading-4">
+				<span class="truncate font-medium text-[var(--el-text-color-primary)]" :title="displayName">
+					{{ displayName }}
+				</span>
+				<span v-if="props.showGender" class="shrink-0 text-xs text-[var(--el-text-color-secondary)]">
+					{{ genderLabel }}
+				</span>
+			</div>
+			<dl v-if="props.showAccount || props.showPhone || props.showDepartment" class="m-0 mt-0.5 grid gap-0 text-xs leading-4">
+				<div v-if="props.showAccount" class="flex min-w-0 gap-1.5">
+					<dt class="w-10 shrink-0 text-[var(--el-text-color-secondary)]">账号：</dt>
+					<dd class="m-0 truncate text-[var(--el-text-color-regular)]" :title="accountTitle">
+						{{ accountText }}
+					</dd>
+				</div>
+				<div v-if="props.showPhone" class="flex min-w-0 gap-1.5">
+					<dt class="w-10 shrink-0 text-[var(--el-text-color-secondary)]">手机：</dt>
+					<dd class="m-0 truncate text-[var(--el-text-color-regular)]" :title="phoneTitle">
+						{{ phoneText }}
+					</dd>
+				</div>
+				<div v-if="props.showDepartment" class="flex min-w-0 gap-1.5">
+					<dt class="w-10 shrink-0 text-[var(--el-text-color-secondary)]">部门：</dt>
+					<dd class="m-0 truncate text-[var(--el-text-color-regular)]" :title="departmentTitle">
+						{{ departmentText }}
+					</dd>
+				</div>
+			</dl>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="UserInfoCell">
+/** 可复用用户信息单元格需要的最小用户摘要。 */
+interface UserInfoCellUser {
+	/** 用户头像地址；为空时组件展示姓名或账号首字。 */
+	avatar?: string | null
+	/** 用户姓名；为空时显示明确的缺失占位。 */
+	name?: string | null
+	/** 用户登录账号；为空时显示未分配。 */
+	username?: string | null
+	/** 用户绑定手机号；为空时显示未绑定。 */
+	phone?: string | null
+	/** 用户性别编码，1 为男、2 为女，其他值统一显示未知。 */
+	gender?: string | number | null
+	/** 用户所属部门名称；为空时显示未分配。 */
+	deptName?: string | null
+}
+
+/** 用户信息单元格的展示配置。 */
+interface UserInfoCellProps {
+	/** 后端接口或上层列表传入的用户摘要。 */
+	user: UserInfoCellUser
+	/** 头像直径，单位为像素。 */
+	avatarSize?: number
+	/** 是否展示性别文本。 */
+	showGender?: boolean
+	/** 是否展示登录账号。 */
+	showAccount?: boolean
+	/** 是否展示绑定手机号。 */
+	showPhone?: boolean
+	/** 是否展示所属部门。 */
+	showDepartment?: boolean
+}
+
+/** 当前组件的输入与默认展示策略。 */
+const props = withDefaults(defineProps<UserInfoCellProps>(), {
+	avatarSize: 38,
+	showGender: true,
+	showAccount: true,
+	showPhone: true,
+	showDepartment: true,
+})
+
+/**
+ * 规范接口文本，避免 null、空字符串或纯空白在复合单元格中形成无法识别的留白。
+ *
+ * @param value 上层用户摘要中的原始字段值
+ * @param emptyText 字段缺失时面向管理人员展示的占位文案
+ * @returns 去除首尾空白后的展示文本，或指定占位文案
+ */
+const formatText = (value: string | null | undefined, emptyText: string) => {
+	const text = value?.trim()
+	return text || emptyText
+}
+
+/** 用户姓名展示文本。 */
+const displayName = computed(() => formatText(props.user.name, "未填写姓名"))
+
+/** 头像图片不可用时展示的姓名或账号首字。 */
+const avatarFallback = computed(() => {
+	const source = props.user.name?.trim() || props.user.username?.trim() || "用户"
+	return source.slice(0, 1)
+})
+
+/** 与后端性别编码对应的展示文本。 */
+const genderLabel = computed(() => {
+	if (Number(props.user.gender) === 1) return "男"
+	if (Number(props.user.gender) === 2) return "女"
+	return "未知"
+})
+
+/** 登录账号展示文本。 */
+const accountText = computed(() => formatText(props.user.username, "未分配"))
+
+/** 登录账号完整提示文案。 */
+const accountTitle = computed(() => formatText(props.user.username, "未分配账号"))
+
+/** 手机号展示文本。 */
+const phoneText = computed(() => formatText(props.user.phone, "未绑定"))
+
+/** 手机号完整提示文案。 */
+const phoneTitle = computed(() => formatText(props.user.phone, "未绑定手机号"))
+
+/** 所属部门展示文本。 */
+const departmentText = computed(() => formatText(props.user.deptName, "未分配"))
+
+/** 所属部门完整提示文案。 */
+const departmentTitle = computed(() => formatText(props.user.deptName, "未分配部门"))
+</script>
+
+<style scoped lang="scss">
+.user-info-cell__avatar {
+	font-weight: 600;
+	color: var(--el-color-primary);
+	background: var(--el-color-primary-light-9);
+	border: 1px solid var(--el-color-primary-light-7);
+}
+</style>
diff --git a/src/components/index.ts b/src/components/index.ts
index fd5761b..2a7064b 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -18,6 +18,10 @@ import PreviewJson from "/@/components/PreviewJson/index.vue"
 import PreviewText from "/@/components/PreviewText/index.vue"
 import PreviewXml from "/@/components/PreviewXml/index.vue"
 import DraggableDepTree from "/@/components/DraggableDepTree/index.vue"
+import SearchPanel from "/@/components/SearchPanel/index.vue"
+import UserInfoCell from "/@/components/UserInfoCell/index.vue"
+import UserIdentityInfo from "/@/components/UserIdentityInfo/index.vue"
+import UserIdentityQuery from "/@/components/UserIdentityQuery/index.vue"
 
 // 业务组件
 import TreeMultipleSelect from "/@/components/TreeMultipleSelect/index.vue"
@@ -84,6 +88,10 @@ export default {
 		app.component("PreviewText", PreviewText)
 		app.component("PreviewXml", PreviewXml)
 		app.component("DraggableDepTree", DraggableDepTree)
+		app.component("SearchPanel", SearchPanel)
+		app.component("UserInfoCell", UserInfoCell)
+		app.component("UserIdentityInfo", UserIdentityInfo)
+		app.component("UserIdentityQuery", UserIdentityQuery)
 		app.component("TreeMultipleSelect", TreeMultipleSelect)
 		app.component("SelectHard", SelectHard)
 		app.component("SelectHardSpuCategory", SelectHardSpuCategory)
diff --git a/src/constants/autoRefund.ts b/src/constants/autoRefund.ts
new file mode 100644
index 0000000..bd5c33d
--- /dev/null
+++ b/src/constants/autoRefund.ts
@@ -0,0 +1,98 @@
+/** 自动退款规则名称，持久化后由 Wallet、Hardware 和前端共同使用。 */
+export const AUTO_REFUND_RULE = {
+	/** 以订单实际支付时间加配置小时数作为免审截止。 */
+	PAY_TIME_LIMIT: "PAY_TIME_LIMIT",
+	/** 以当前周期预约批次截止时刻作为免审截止。 */
+	APPT_CYCLE_CLOSE: "APPT_CYCLE_CLOSE",
+} as const
+
+/** 自动退款规则名称联合类型。 */
+export type AutoRefundRule = (typeof AUTO_REFUND_RULE)[keyof typeof AUTO_REFUND_RULE]
+
+/** 自动退款规则的管理端选择项。 */
+export const AUTO_REFUND_RULE_OPTIONS: Array<{ label: string; value: AutoRefundRule }> = [
+	{ label: "支付后限时", value: AUTO_REFUND_RULE.PAY_TIME_LIMIT },
+	{ label: "周期预约截止", value: AUTO_REFUND_RULE.APPT_CYCLE_CLOSE },
+]
+
+/** 自动退款任务场景编码，与 Hardware 任务表中的 task_type 保持一致。 */
+export const AUTO_REFUND_TASK_TYPE = {
+	/** 规定时间内用户申请的免审核退款。 */
+	AFTER_SALE: "10",
+	/** 预约订单超过使用期限后的系统自动退款。 */
+	EXPIRED_RESERVE: "20",
+} as const
+
+/** 自动退款任务场景的管理端展示配置。 */
+export const AUTO_REFUND_TASK_TYPE_META: Record<string, { label: string; type: "info" | "primary" | "warning" | "danger" | "success" }> = {
+	/** 管理端标识在商户规定时限内由用户发起且无需人工审核的退款。 */
+	[AUTO_REFUND_TASK_TYPE.AFTER_SALE]: { label: "规定时间内用户免审核退款", type: "success" },
+	/** 管理端标识订单超过预约使用期限后由系统创建的退款。 */
+	[AUTO_REFUND_TASK_TYPE.EXPIRED_RESERVE]: { label: "过期订单自动退款", type: "warning" },
+}
+
+/** 自动退款任务状态展示配置。 */
+export const AUTO_REFUND_TASK_STATUS: Record<string, { label: string; type: "info" | "primary" | "warning" | "danger" | "success" }> = {
+	/** 售后事务已创建任务，等待首次同步执行。 */
+	"10": { label: "待执行", type: "primary" },
+	/** 资金调用失败，等待固定退避时间到期。 */
+	"20": { label: "等待重试", type: "warning" },
+	/** 当前商户开关关闭，暂停且不消耗自动尝试额度。 */
+	"30": { label: "开关关闭暂停", type: "info" },
+	/** 配置缺失、变更或查询异常，等待配置恢复。 */
+	"31": { label: "配置不可用暂停", type: "warning" },
+	/** 首次执行和七次自动重试均失败，只允许技术重试。 */
+	"40": { label: "重试耗尽", type: "danger" },
+	/** 钱包到账及 Hardware 业务状态均已完成。 */
+	"50": { label: "成功", type: "success" },
+}
+
+/** 自动退款尝试触发来源展示名称。 */
+export const AUTO_REFUND_TRIGGER_TYPE: Record<string, string> = {
+	/** 售后申请事务提交后的首次同步尝试。 */
+	"10": "首次同步执行",
+	/** 三十秒调度器扫描到期任务后触发。 */
+	"20": "定时重试",
+	/** 管理端技术人员对耗尽任务额外触发一次。 */
+	"30": "人工技术重试",
+	/** 管理端具备业务退款权限的逐单过期预约退款。 */
+	"40": "后台逐单过期退款",
+	/** 管理端按当前商户配置重新扫描历史订单。 */
+	"50": "后台立即重新扫描",
+}
+
+/** 自动退款尝试结果展示配置。 */
+export const AUTO_REFUND_ATTEMPT_RESULT: Record<string, { label: string; type: "info" | "primary" | "warning" | "danger" | "success" }> = {
+	/** 尝试日志已创建但资金调用尚未完成。 */
+	"10": { label: "执行中", type: "primary" },
+	/** 钱包退款和 Hardware 状态更新均已提交。 */
+	"20": { label: "成功", type: "success" },
+	/** 本次实际资金调用失败。 */
+	"30": { label: "失败", type: "danger" },
+	/** 执行前发现开关关闭，未调用资金接口。 */
+	"40": { label: "开关关闭跳过", type: "info" },
+}
+
+/**
+ * 获取任务状态展示配置，兼容后端未来新增但前端尚未识别的状态。
+ *
+ * @param status 任务状态编码。
+ */
+export const getAutoRefundTaskStatus = (status?: string) =>
+	AUTO_REFUND_TASK_STATUS[status || ""] || { label: status || "-", type: "info" as const }
+
+/**
+ * 获取自动退款任务场景展示配置，未知编码保留原值便于排查协议兼容问题。
+ *
+ * @param taskType 自动退款任务场景编码。
+ */
+export const getAutoRefundTaskType = (taskType?: string) =>
+	AUTO_REFUND_TASK_TYPE_META[taskType || ""] || { label: taskType || "-", type: "info" as const }
+
+/**
+ * 获取尝试结果展示配置，未知状态保留原编码便于技术排查。
+ *
+ * @param status 尝试结果编码。
+ */
+export const getAutoRefundAttemptResult = (status?: string) =>
+	AUTO_REFUND_ATTEMPT_RESULT[status || ""] || { label: status || "-", type: "info" as const }
diff --git a/src/constants/userIdentity.ts b/src/constants/userIdentity.ts
new file mode 100644
index 0000000..cadd2e4
--- /dev/null
+++ b/src/constants/userIdentity.ts
@@ -0,0 +1,8 @@
+/** 默认用户身份在前后端接口与用户身份表中使用的固定编码。 */
+export const DEFAULT_USER_IDENTITY = "DEFAULT"
+
+/** 学生身份在前后端接口与学生扩展资料中使用的固定编码。 */
+export const STUDENT_USER_IDENTITY = "STUDENT"
+
+/** 老师身份在前后端接口与老师扩展资料中使用的固定编码。 */
+export const TEACHER_USER_IDENTITY = "TEACHER"
diff --git a/src/hooks/table.ts b/src/hooks/table.ts
index 1fe3749..3337a1e 100644
--- a/src/hooks/table.ts
+++ b/src/hooks/table.ts
@@ -132,13 +132,13 @@ export function useTable(options?: BasicTableProps) {
 					ascs: state.ascs?.join(","),
 				})
 
-				// 设置表格展示的数据数组
-				state.dataList = state.isPage ? res.data[state.props.item] : res.data
+				// 设置表格展示的数据数组；后端对无数据场景可能返回 data:null，统一兜底避免 TypeError
+				state.dataList = state.isPage ? (res.data?.[state.props.item] ?? []) : (res.data ?? [])
 				// 设置分页信息中的总数据条数
-				state.pagination!.total = state.isPage ? res.data[state.props.totalCount] : 0
+				state.pagination!.total = state.isPage ? (res.data?.[state.props.totalCount] ?? 0) : 0
 			} catch (err: any) {
 				// 捕获异常并显示错误提示
-				ElMessage.error(err.msg || err.data.msg)
+				ElMessage.error(err.msg || err.data?.msg || "查询失败")
 			} finally {
 				// 结束加载数据，设置state.loading为false
 				state.loading = false
diff --git a/src/router/route.ts b/src/router/route.ts
index a04053d..e73a4c7 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -57,6 +57,15 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 			isHide: true,
 		},
 	},
+	{
+		path: "/hard/hard-manager/details",
+		name: "router.hardManagerDetails",
+		component: () => import("/@/views/hard/hard-manager/details.vue"),
+		meta: {
+			isHide: true,
+			isKeepAlive: false,
+		},
+	},
 ]
 
 /**
diff --git a/src/views/admin/audit/index.vue b/src/views/admin/audit/index.vue
index 2f97d9f..26b3fbc 100644
--- a/src/views/admin/audit/index.vue
+++ b/src/views/admin/audit/index.vue
@@ -2,7 +2,16 @@
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
 			<el-row v-show="showSearch">
-				<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+				<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"
+					@reset="resetQuery"
+				>
 					<el-form-item :label="$t('audit.auditName')" prop="auditName">
 						<el-input :placeholder="t('audit.inputAuditNameTip')" v-model="state.queryForm.auditName" style="max-width: 180px" />
 					</el-form-item>
@@ -12,13 +21,7 @@
 					<el-form-item :label="$t('audit.createBy')" prop="createBy">
 						<el-input :placeholder="t('audit.inputCreateByTip')" v-model="state.queryForm.createBy" style="max-width: 180px" />
 					</el-form-item>
-					<el-form-item>
-						<el-button formDialogRef icon="search" type="primary" @click="getDataList">
-							{{ $t("common.queryBtn") }}
-						</el-button>
-						<el-button icon="Refresh" formDialogRef @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
-					</el-form-item>
-				</el-form>
+				</SearchPanel>
 			</el-row>
 			<el-row>
 				<div class="mb8" style="width: 100%">
diff --git a/src/views/admin/client/index.vue b/src/views/admin/client/index.vue
index 1768db4..4ad9da0 100644
--- a/src/views/admin/client/index.vue
+++ b/src/views/admin/client/index.vue
@@ -2,20 +2,23 @@
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
 			<el-row class="ml10" v-show="showSearch">
-				<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
+				<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"
+					@reset="resetQuery"
+				>
 					<el-form-item :label="$t('client.clientId')" prop="clientId">
 						<el-input :placeholder="$t('client.clientId')" style="max-width: 180px" v-model="state.queryForm.clientId" />
 					</el-form-item>
 					<el-form-item :label="$t('client.clientSecret')" prop="clientSecret">
 						<el-input :placeholder="$t('client.clientSecret')" style="max-width: 180px" v-model="state.queryForm.clientSecret" />
 					</el-form-item>
-					<el-form-item>
-						<el-button @click="getDataList" icon="search" type="primary">
-							{{ $t("common.queryBtn") }}
-						</el-button>
-						<el-button @click="resetQuery" icon="Refresh">{{ $t("common.resetBtn") }}</el-button>
-					</el-form-item>
-				</el-form>
+				</SearchPanel>
 			</el-row>
 			<el-row>
 				<div class="mb8" style="width: 100%">
diff --git a/src/views/admin/i18n/index.vue b/src/views/admin/i18n/index.vue
index be7434a..b36f8a1 100644
--- a/src/views/admin/i18n/index.vue
+++ b/src/views/admin/i18n/index.vue
@@ -2,7 +2,16 @@
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
 			<el-row class="ml10" v-show="showSearch">
-				<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
+				<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"
+					@reset="resetQuery"
+				>
 					<el-form-item :label="$t('i18n.name')" prop="name">
 						<el-input :placeholder="t('i18n.inputKeyTip')" style="max-width: 180px" v-model="state.queryForm.name" />
 					</el-form-item>
@@ -12,21 +21,22 @@
 					<el-form-item :label="$t('i18n.en')" prop="en">
 						<el-input :placeholder="t('i18n.inputEnTip')" style="max-width: 180px" v-model="state.queryForm.en" />
 					</el-form-item>
-					<el-form-item>
-						<el-button @click="getDataList" formDialogRef icon="search" type="primary">
-							{{ $t('common.queryBtn') }}
-						</el-button>
-						<el-button @click="resetQuery" icon="Refresh">{{ $t('common.resetBtn') }} </el-button>
-					</el-form-item>
-				</el-form>
+				</SearchPanel>
 			</el-row>
 			<el-row>
 				<div class="mb8" style="width: 100%">
-					<el-button @click="formDialogRef.openDialog()" class="ml10" formDialogRef icon="folder-add" type="primary" v-auth="'sys_i18n_add'">
-						{{ $t('common.addBtn') }}
+					<el-button
+						@click="formDialogRef.openDialog()"
+						class="ml10"
+						formDialogRef
+						icon="folder-add"
+						type="primary"
+						v-auth="'sys_i18n_add'"
+					>
+						{{ $t("common.addBtn") }}
 					</el-button>
 					<el-button plain @click="handleRefreshCache()" class="ml10" icon="refresh-left" type="primary">
-						{{ $t('common.refreshCacheBtn') }}
+						{{ $t("common.refreshCacheBtn") }}
 					</el-button>
 					<el-button
 						:disabled="multiple"
@@ -37,7 +47,7 @@
 						type="primary"
 						v-auth="'sys_i18n_del'"
 					>
-						{{ $t('common.delBtn') }}
+						{{ $t("common.delBtn") }}
 					</el-button>
 
 					<right-toolbar
@@ -55,7 +65,7 @@
 				@selection-change="handleSelectionChange"
 				@sort-change="sortChangeHandle"
 				style="width: 100%"
-        row-key="id"
+				row-key="id"
 				v-loading="state.loading"
 				border
 				:cell-style="tableStyle.cellStyle"
@@ -71,10 +81,10 @@
 				<el-table-column :label="$t('common.action')" width="150">
 					<template #default="scope">
 						<el-button icon="edit-pen" @click="formDialogRef.openDialog(scope.row.id)" text type="primary" v-auth="'sys_i18n_edit'"
-							>{{ $t('common.editBtn') }}
+							>{{ $t("common.editBtn") }}
 						</el-button>
 						<el-button icon="delete" @click="handleDelete([scope.row.id])" text type="primary" v-auth="'sys_i18n_del'">
-							{{ $t('common.delBtn') }}
+							{{ $t("common.delBtn") }}
 						</el-button>
 					</template>
 				</el-table-column>
@@ -88,80 +98,80 @@
 </template>
 
 <script lang="ts" name="systemSysI18n" setup>
-import { BasicTableProps, useTable } from '/@/hooks/table';
-import { delObj, fetchList, refreshCache } from '/@/api/admin/i18n';
-import { useMessage, useMessageBox } from '/@/hooks/message';
-import { useI18n } from 'vue-i18n';
+import { BasicTableProps, useTable } from "/@/hooks/table"
+import { delObj, fetchList, refreshCache } from "/@/api/admin/i18n"
+import { useMessage, useMessageBox } from "/@/hooks/message"
+import { useI18n } from "vue-i18n"
 
 // 引入组件
-const FormDialog = defineAsyncComponent(() => import('./form.vue'));
-const { t } = useI18n();
+const FormDialog = defineAsyncComponent(() => import("./form.vue"))
+const { t } = useI18n()
 // 定义查询字典
 
 // 定义变量内容
-const formDialogRef = ref();
+const formDialogRef = ref()
 // 搜索变量
-const queryRef = ref();
-const showSearch = ref(true);
+const queryRef = ref()
+const showSearch = ref(true)
 // 多选变量
-const selectObjs = ref([]) as any;
-const multiple = ref(true);
+const selectObjs = ref([]) as any
+const multiple = ref(true)
 
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {
-		name: '',
-		zhCn: '',
-		en: '',
+		name: "",
+		zhCn: "",
+		en: "",
 	},
 	pageList: fetchList,
-	descs: ['create_time'],
-});
+	descs: ["create_time"],
+})
 
 //  table hook
-const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state);
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
 
 // 清空搜索条件
 const resetQuery = () => {
 	// 清空搜索条件
-	queryRef.value.resetFields();
+	queryRef.value.resetFields()
 	// 清空排序规则
-	state.queryForm!.descs = [];
-	state.queryForm!.ascs = [];
+	state.queryForm!.descs = []
+	state.queryForm!.ascs = []
 	// 清空多选
-	selectObjs.value = [];
-	getDataList();
-};
+	selectObjs.value = []
+	getDataList()
+}
 const handleRefreshCache = () => {
 	refreshCache().then(() => {
-		useMessage().success('同步成功');
-	});
-};
+		useMessage().success("同步成功")
+	})
+}
 
 // 导出excel
 const exportExcel = () => {
-	downBlobFile('/admin/i18n/export', Object.assign(state.queryForm,{ids:selectObjs}), 'i18n.xlsx');
-};
+	downBlobFile("/admin/i18n/export", Object.assign(state.queryForm, { ids: selectObjs }), "i18n.xlsx")
+}
 
 // 多选事件
 const handleSelectionChange = (objs: { id: string }[]) => {
-	selectObjs.value = objs.map(({ id }) => id);
-	multiple.value = !objs.length;
-};
+	selectObjs.value = objs.map(({ id }) => id)
+	multiple.value = !objs.length
+}
 
 // 删除操作
 const handleDelete = async (ids: string[]) => {
 	try {
-		await useMessageBox().confirm(t('common.delConfirmText'));
+		await useMessageBox().confirm(t("common.delConfirmText"))
 	} catch {
-		return;
+		return
 	}
 
 	try {
-		await delObj(ids);
-		getDataList();
-		useMessage().success(t('common.delSuccessText'));
+		await delObj(ids)
+		getDataList()
+		useMessage().success(t("common.delSuccessText"))
 	} catch (err: any) {
-		useMessage().error(err.msg);
+		useMessage().error(err.msg)
 	}
-};
+}
 </script>
diff --git a/src/views/admin/log/index.vue b/src/views/admin/log/index.vue
index bf153f2..3df8b39 100644
--- a/src/views/admin/log/index.vue
+++ b/src/views/admin/log/index.vue
@@ -5,7 +5,16 @@
 			<log-line-chart />
 
 			<el-row class="mt-4 ml10" v-show="showSearch">
-				<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
+				<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"
+					@reset="resetQuery"
+				>
 					<el-form-item :label="$t('syslog.logType')" prop="logType">
 						<el-select :placeholder="$t('syslog.inputLogTypeTip')" clearable v-model="state.queryForm.logType">
 							<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in log_type" />
@@ -21,11 +30,7 @@
 							value-format="YYYY-MM-DD HH:mm:ss"
 						/>
 					</el-form-item>
-					<el-form-item>
-						<el-button @click="getDataList" icon="Search" type="primary">{{ $t("common.queryBtn") }}</el-button>
-						<el-button @click="resetQuery" icon="Refresh">{{ $t("common.resetBtn") }}</el-button>
-					</el-form-item>
-				</el-form>
+				</SearchPanel>
 			</el-row>
 
 			<el-row>
diff --git a/src/views/admin/param/index.vue b/src/views/admin/param/index.vue
index 4c55b44..435f9b2 100644
--- a/src/views/admin/param/index.vue
+++ b/src/views/admin/param/index.vue
@@ -2,7 +2,16 @@
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
 			<el-row class="ml10" v-show="showSearch">
-				<el-form :inline="true" :model="state.queryForm" ref="queryRef">
+				<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"
+					@reset="resetQuery"
+				>
 					<el-form-item :label="$t('param.publicName')" prop="publicName">
 						<el-input :placeholder="$t('param.inputpublicNameTip')" style="max-width: 180px" v-model="state.queryForm.publicName" />
 					</el-form-item>
@@ -14,13 +23,7 @@
 							<el-option :key="index" :label="item.label" :value="item.value" v-for="(item, index) in dict_type"></el-option>
 						</el-select>
 					</el-form-item>
-					<el-form-item>
-						<el-button @click="getDataList" formDialogRef icon="search" type="primary">
-							{{ $t("common.queryBtn") }}
-						</el-button>
-						<el-button @click="resetQuery" formDialogRef icon="Refresh">{{ $t("common.resetBtn") }} </el-button>
-					</el-form-item>
-				</el-form>
+				</SearchPanel>
 			</el-row>
 			<el-row>
 				<div class="mb8" style="width: 100%">
diff --git a/src/views/admin/sensitive/index.vue b/src/views/admin/sensitive/index.vue
index a321f91..e96ec49 100644
--- a/src/views/admin/sensitive/index.vue
+++ b/src/views/admin/sensitive/index.vue
@@ -2,7 +2,16 @@
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
 			<el-row v-show="showSearch">
-				<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+				<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"
+					@reset="resetQuery"
+				>
 					<el-form-item label="敏感词" prop="sensitiveWord">
 						<el-input placeholder="请输入敏感词" v-model="state.queryForm.sensitiveWord" />
 					</el-form-item>
@@ -11,11 +20,7 @@
 							<el-radio :label="item.value" v-for="(item, index) in sensitive_type" border :key="index">{{ item.label }} </el-radio>
 						</el-radio-group>
 					</el-form-item>
-					<el-form-item>
-						<el-button icon="search" type="primary" @click="getDataList"> 查询 </el-button>
-						<el-button icon="Refresh" @click="resetQuery">重置</el-button>
-					</el-form-item>
-				</el-form>
+				</SearchPanel>
 			</el-row>
 			<el-row>
 				<div class="mb8" style="width: 100%">
diff --git a/src/views/admin/social/index.vue b/src/views/admin/social/index.vue
index 8923c95..d5ed1f4 100644
--- a/src/views/admin/social/index.vue
+++ b/src/views/admin/social/index.vue
@@ -2,19 +2,22 @@
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
 			<el-row v-show="showSearch">
-				<el-form ref="queryRef" :inline="true" :model="state.queryForm">
+				<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"
+					@reset="resetQuery"
+				>
 					<el-form-item :label="t('social.type')" class="ml2" prop="type">
 						<el-select v-model="state.queryForm.type" :placeholder="t('social.inputTypeTip')">
 							<el-option v-for="(item, index) in social_type" :key="index" :label="item.label" :value="item.value"></el-option>
 						</el-select>
 					</el-form-item>
-					<el-form-item>
-						<el-button formDialogRef icon="search" type="primary" @click="getDataList">
-							{{ $t("common.queryBtn") }}
-						</el-button>
-						<el-button formDialogRef icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
-					</el-form-item>
-				</el-form>
+				</SearchPanel>
 			</el-row>
 			<el-row>
 				<div class="mb8" style="width: 100%">
diff --git a/src/views/admin/sysArea/index.vue b/src/views/admin/sysArea/index.vue
index 1ebfd63..10f71af 100644
--- a/src/views/admin/sysArea/index.vue
+++ b/src/views/admin/sysArea/index.vue
@@ -2,20 +2,23 @@
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
 			<el-row v-show="showSearch">
-				<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+				<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"
+					@reset="resetQuery"
+				>
 					<el-form-item :label="t('area.pid')" prop="adcode">
 						<china-area :type="3" :placeholder="t('area.inputPidByTip')" v-model="pid" :plus="true" @change="handleChange" />
 					</el-form-item>
 					<el-form-item :label="t('area.name')" prop="name">
 						<el-input :placeholder="t('area.inputNameByTip')" v-model="state.queryForm.name" />
 					</el-form-item>
-					<el-form-item>
-						<el-button icon="search" type="primary" @click="getDataList">
-							{{ $t("common.queryBtn") }}
-						</el-button>
-						<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
-					</el-form-item>
-				</el-form>
+				</SearchPanel>
 			</el-row>
 			<el-row>
 				<div class="mb8" style="width: 100%">
diff --git a/src/views/admin/sysUserCar/index.vue b/src/views/admin/sysUserCar/index.vue
index 8f8b231..dd24a7f 100644
--- a/src/views/admin/sysUserCar/index.vue
+++ b/src/views/admin/sysUserCar/index.vue
@@ -1,90 +1,111 @@
 <template>
-  <div class="layout-padding">
-    <div class="layout-padding-auto layout-padding-view">
-      <el-row v-show="showSearch">
-        <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-          <el-form-item style="width: 250px" label="用户" prop="userId">
-            <select-user v-model="state.queryForm.userId" clearable />
-          </el-form-item>
-          <el-form-item style="width: 250px" label="车牌号" prop="carNumber">
-            <el-input v-model="state.queryForm.carNumber" placeholder="请输入车牌号" />
-          </el-form-item>
-          <el-form-item style="width: 250px" label="车辆类型" prop="carType">
-            <dict-select v-model="state.queryForm.carType" dict-code="car_type" />
-          </el-form-item>
-          <el-form-item style="width: 250px" label="是否启用" prop="enableStatus">
-            <dict-select v-model="state.queryForm.enableStatus" dict-code="yes_no_type" />
-          </el-form-item>
-          <el-form-item>
-            <el-button icon="Search" type="primary" @click="getDataList">查询</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-          </el-form-item>
-        </el-form>
-      </el-row>
-      <el-row>
-        <div class="mb8" style="width: 100%">
-          <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
-            v-auth="'admin_sysUserCar_add'">
-            新 增
-          </el-button>
-          <el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'admin_sysUserCar_del'"
-            @click="handleDelete(selectObjs)">
-            删除
-          </el-button>
-          <right-toolbar v-model:showSearch="showSearch" :export="'admin_sysUserCar_export'" @exportExcel="exportExcel"
-            class="ml10 mr20" style="float: right;" @queryTable="getDataList"></right-toolbar>
-        </div>
-      </el-row>
-      <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-        :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
-        @sort-change="sortChangeHandle">
-        <el-table-column type="selection" width="40" align="center" />
-        <el-table-column type="index" label="#" width="80" />
-        <el-table-column prop="username" label="用户名" />
-        <el-table-column prop="userDeptName" label="部门" />
-        <el-table-column prop="carNumber" label="车牌号">
-          <template #default="{ row }">
-            <el-tag type="primary">{{ row.carNumber }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="carType" label="车辆类型">
-          <template #default="{ row }">
-            <dict-tag :options="car_type" :value="row.carType" />
-          </template>
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<el-row v-show="showSearch">
+				<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"
+					@reset="resetQuery"
+				>
+					<el-form-item style="width: 250px" label="用户" prop="userId">
+						<select-user v-model="state.queryForm.userId" clearable />
+					</el-form-item>
+					<el-form-item style="width: 250px" label="车牌号" prop="carNumber">
+						<el-input v-model="state.queryForm.carNumber" placeholder="请输入车牌号" />
+					</el-form-item>
+					<el-form-item style="width: 250px" label="车辆类型" prop="carType">
+						<dict-select v-model="state.queryForm.carType" dict-code="car_type" />
+					</el-form-item>
+					<el-form-item style="width: 250px" label="是否启用" prop="enableStatus">
+						<dict-select v-model="state.queryForm.enableStatus" dict-code="yes_no_type" />
+					</el-form-item>
+				</SearchPanel>
+			</el-row>
+			<el-row>
+				<div class="mb8" style="width: 100%">
+					<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()" v-auth="'admin_sysUserCar_add'">
+						新 增
+					</el-button>
+					<el-button
+						plain
+						:disabled="multiple"
+						icon="Delete"
+						type="primary"
+						v-auth="'admin_sysUserCar_del'"
+						@click="handleDelete(selectObjs)"
+					>
+						删除
+					</el-button>
+					<right-toolbar
+						v-model:showSearch="showSearch"
+						:export="'admin_sysUserCar_export'"
+						@exportExcel="exportExcel"
+						class="ml10 mr20"
+						style="float: right"
+						@queryTable="getDataList"
+					></right-toolbar>
+				</div>
+			</el-row>
+			<el-table
+				:data="state.dataList"
+				v-loading="state.loading"
+				border
+				:cell-style="tableStyle.cellStyle"
+				:header-cell-style="tableStyle.headerCellStyle"
+				@selection-change="selectionChangHandle"
+				@sort-change="sortChangeHandle"
+			>
+				<el-table-column type="selection" width="40" align="center" />
+				<el-table-column type="index" label="#" width="80" />
+				<el-table-column prop="username" label="用户名" />
+				<el-table-column prop="userDeptName" label="部门" />
+				<el-table-column prop="carNumber" label="车牌号">
+					<template #default="{ row }">
+						<el-tag type="primary">{{ row.carNumber }}</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column prop="carType" label="车辆类型">
+					<template #default="{ row }">
+						<dict-tag :options="car_type" :value="row.carType" />
+					</template>
+				</el-table-column>
+				<el-table-column prop="enableStatus" label="是否启用">
+					<template #default="{ row }">
+						<el-switch active-value="1" inactive-value="0" v-model="row.enableStatus" @change="enableStatusChange(row)" />
+					</template>
+				</el-table-column>
+				<el-table-column label="操作" width="150">
+					<template #default="scope">
+						<el-button icon="edit-pen" text type="primary" v-auth="'admin_sysUserCar_edit'" @click="formDialogRef.openDialog(scope.row.id)"
+							>编辑</el-button
+						>
+						<el-button icon="delete" text type="primary" v-auth="'admin_sysUserCar_del'" @click="handleDelete([scope.row.id])"
+							>删除</el-button
+						>
+					</template>
+				</el-table-column>
+			</el-table>
+			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+		</div>
 
-        </el-table-column>
-        <el-table-column prop="enableStatus" label="是否启用">
-          <template #default="{ row }">
-            <el-switch active-value="1" inactive-value="0" v-model="row.enableStatus"
-              @change="enableStatusChange(row)" />
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="150">
-          <template #default="scope">
-            <el-button icon="edit-pen" text type="primary" v-auth="'admin_sysUserCar_edit'"
-              @click="formDialogRef.openDialog(scope.row.id)">编辑</el-button>
-            <el-button icon="delete" text type="primary" v-auth="'admin_sysUserCar_del'"
-              @click="handleDelete([scope.row.id])">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
-    </div>
-
-    <!-- 编辑、新增  -->
-    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
-
-  </div>
+		<!-- 编辑、新增  -->
+		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+	</div>
 </template>
 
 <script setup lang="ts" name="systemSysUserCar">
-import { BasicTableProps, useTable } from "/@/hooks/table";
-import * as  sysUserCarApi from "/@/api/admin/sysUserCar";
-import { useMessage, useMessageBox } from "/@/hooks/message";
-import { useDict } from '/@/hooks/dict';
+import { BasicTableProps, useTable } from "/@/hooks/table"
+import * as sysUserCarApi from "/@/api/admin/sysUserCar"
+import { useMessage, useMessageBox } from "/@/hooks/message"
+import { useDict } from "/@/hooks/dict"
 
 // 引入组件
-const FormDialog = defineAsyncComponent(() => import('./form.vue'));
+const FormDialog = defineAsyncComponent(() => import("./form.vue"))
 // 定义查询字典
 const { car_type } = useDict("car_type")
 // 定义变量内容
@@ -97,65 +118,58 @@ const selectObjs = ref([]) as any
 const multiple = ref(true)
 
 const state: BasicTableProps = reactive<BasicTableProps>({
-  queryForm: {},
-  pageList: sysUserCarApi.fetchList
+	queryForm: {},
+	pageList: sysUserCarApi.fetchList,
 })
 
 //  table hook
-const {
-  getDataList,
-  currentChangeHandle,
-  sizeChangeHandle,
-  sortChangeHandle,
-  downBlobFile,
-  tableStyle
-} = useTable(state)
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
 
 // 清空搜索条件
 const resetQuery = () => {
-  // 清空搜索条件
-  queryRef.value?.resetFields()
-  // 清空多选
-  selectObjs.value = []
-  getDataList()
+	// 清空搜索条件
+	queryRef.value?.resetFields()
+	// 清空多选
+	selectObjs.value = []
+	getDataList()
 }
 
 // 导出excel
 const exportExcel = () => {
-  downBlobFile('/admin/sysUserCar/export', Object.assign(state.queryForm, { ids: selectObjs }), 'sysUserCar.xlsx')
+	downBlobFile("/admin/sysUserCar/export", Object.assign(state.queryForm, { ids: selectObjs }), "sysUserCar.xlsx")
 }
 
 // 多选事件
 const selectionChangHandle = (objs: { id: string }[]) => {
-  selectObjs.value = objs.map(({ id }) => id);
-  multiple.value = !objs.length;
-};
+	selectObjs.value = objs.map(({ id }) => id)
+	multiple.value = !objs.length
+}
 
 // 删除操作
 const handleDelete = async (ids: string[]) => {
-  try {
-    await useMessageBox().confirm('此操作将永久删除');
-  } catch {
-    return;
-  }
+	try {
+		await useMessageBox().confirm("此操作将永久删除")
+	} catch {
+		return
+	}
 
-  try {
-    await sysUserCarApi.delObjs(ids);
-    getDataList();
-    useMessage().success('删除成功');
-  } catch (err: any) {
-    useMessage().error(err.msg);
-  }
-};
+	try {
+		await sysUserCarApi.delObjs(ids)
+		getDataList()
+		useMessage().success("删除成功")
+	} catch (err: any) {
+		useMessage().error(err.msg)
+	}
+}
 
 // 修改启用状态
 async function enableStatusChange(row: any) {
-  try {
-    await sysUserCarApi.putObj(row)
-    getDataList()
-    useMessage().success("操作成功")
-  } catch (e) {
-    useMessage().error("操作错误")
-  }
+	try {
+		await sysUserCarApi.putObj(row)
+		getDataList()
+		useMessage().success("操作成功")
+	} catch (e) {
+		useMessage().error("操作错误")
+	}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/admin/sysUserStaffingTotal/cmp/staffing-total-table.vue b/src/views/admin/sysUserStaffingTotal/cmp/staffing-total-table.vue
index 404a26d..6709fa9 100644
--- a/src/views/admin/sysUserStaffingTotal/cmp/staffing-total-table.vue
+++ b/src/views/admin/sysUserStaffingTotal/cmp/staffing-total-table.vue
@@ -1,35 +1,46 @@
 <template>
-    <el-dialog title="菜品统计" width="70%" v-model="visible" :close-on-click-modal="false" draggable>
-        <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-            <el-form-item label="姓名" prop="name">
-                <el-input v-model="state.queryForm.name" placeholder="请输入姓名" clearable />
-            </el-form-item>
-            <el-form-item label=" 手机号" prop="phone">
-                <el-input v-model="state.queryForm.phone" placeholder="请输入手机号" clearable />
-            </el-form-item>
-            <el-form-item>
-                <el-button icon="Search" type="primary" @click="getDataList">查询</el-button>
-                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-            </el-form-item>
-        </el-form>
-        <el-table height="450px" :data="state.dataList" v-loading="state.loading" border
-            :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
-            :summary-method="getSummaries" :show-summary="true" @selection-change="selectionChangHandle"
-            @sort-change="sortChangeHandle">
-            <el-table-column type="selection" width="60" align="center" />
-            <el-table-column label="用户名" prop="username" fixed="left" show-overflow-tooltip />
-            <el-table-column label="姓名" prop="name" show-overflow-tooltip min-width="150" />
-            <el-table-column label="手机号" prop="phone" show-overflow-tooltip min-width="150" />
-            <el-table-column label="部门" prop="deptName" show-overflow-tooltip min-width="150" />
-            <el-table-column label="编制" min-width="80">
-                <template #default="{ row }">
-                    <dict-tag :options="user_staffing_type" :value="row.staffingType" />
-                </template>
-            </el-table-column>
-        </el-table>
-        <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
-    </el-dialog>
-
+	<el-dialog title="菜品统计" width="70%" v-model="visible" :close-on-click-modal="false" draggable>
+		<SearchPanel
+			ref="queryRef"
+			:model="state.queryForm"
+			:loading="Boolean(state.loading)"
+			:search-text="$t('common.queryBtn')"
+			:reset-text="$t('common.resetBtn')"
+			@search="getDataList"
+			@reset="resetQuery"
+		>
+			<el-form-item label="姓名" prop="name">
+				<el-input v-model="state.queryForm.name" placeholder="请输入姓名" clearable />
+			</el-form-item>
+			<el-form-item label=" 手机号" prop="phone">
+				<el-input v-model="state.queryForm.phone" placeholder="请输入手机号" clearable />
+			</el-form-item>
+		</SearchPanel>
+		<el-table
+			height="450px"
+			:data="state.dataList"
+			v-loading="state.loading"
+			border
+			:cell-style="tableStyle.cellStyle"
+			:header-cell-style="tableStyle.headerCellStyle"
+			:summary-method="getSummaries"
+			:show-summary="true"
+			@selection-change="selectionChangHandle"
+			@sort-change="sortChangeHandle"
+		>
+			<el-table-column type="selection" width="60" align="center" />
+			<el-table-column label="用户名" prop="username" fixed="left" show-overflow-tooltip />
+			<el-table-column label="姓名" prop="name" show-overflow-tooltip min-width="150" />
+			<el-table-column label="手机号" prop="phone" show-overflow-tooltip min-width="150" />
+			<el-table-column label="部门" prop="deptName" show-overflow-tooltip min-width="150" />
+			<el-table-column label="编制" min-width="80">
+				<template #default="{ row }">
+					<dict-tag :options="user_staffing_type" :value="row.staffingType" />
+				</template>
+			</el-table-column>
+		</el-table>
+		<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+	</el-dialog>
 </template>
 
 <script setup lang="ts" name="staffing-total-table">
@@ -50,11 +61,11 @@ const selectObjs = ref([]) as any
 const multiple = ref(true)
 
 const state: BasicTableProps = reactive<BasicTableProps>({
-    createdIsNeed: false,
-    queryForm: {
-        deptId: null
-    },
-    pageList: userApi.pageList,
+	createdIsNeed: false,
+	queryForm: {
+		deptId: null,
+	},
+	pageList: userApi.pageList,
 })
 
 //  table hook
@@ -62,53 +73,51 @@ const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, ta
 
 // 多选事件
 const selectionChangHandle = (objs: { id: string }[]) => {
-    selectObjs.value = objs.map(({ id }) => id)
-    multiple.value = !objs.length
+	selectObjs.value = objs.map(({ id }) => id)
+	multiple.value = !objs.length
 }
 
-
 // 清空搜索条件
 const resetQuery = () => {
-    queryRef.value?.resetFields()
-    getDataList()
+	queryRef.value?.resetFields()
+	getDataList()
 }
 
-
 const openDialog = (row: any, query: any) => {
-    console.log("row:", row);
-    console.log("query:", query);
-    state.queryForm.deptId = null
+	console.log("row:", row)
+	console.log("query:", query)
+	state.queryForm.deptId = null
 
-    if (row && row.deptId) {
-        state.queryForm.deptId = row.deptId
-    }
+	if (row && row.deptId) {
+		state.queryForm.deptId = row.deptId
+	}
 
-    getDataList()
-    visible.value = true
+	getDataList()
+	visible.value = true
 }
 
 const getSummaries = (param: any) => {
-    const { columns, data } = param
-    const totalColumns = ["count", "totalPrice"]
-    const totalRow = Array.from({ length: columns.length })
-    totalRow[0] = "合计"
-    columns.forEach((i: any, index: number) => {
-        if (totalColumns.includes(i.property)) {
-            const total = data
-                .filter((v: any) => v[i.property] != null)
-                .map((v: any) => Number(v[i.property]))
-                .reduce((pren: number, next: number) => pren + next, 0)
-            if (i.property.includes("Price")) {
-                totalRow[index] = displayPrice(total)
-            } else {
-                totalRow[index] = total
-            }
-        }
-    })
-    return totalRow
+	const { columns, data } = param
+	const totalColumns = ["count", "totalPrice"]
+	const totalRow = Array.from({ length: columns.length })
+	totalRow[0] = "合计"
+	columns.forEach((i: any, index: number) => {
+		if (totalColumns.includes(i.property)) {
+			const total = data
+				.filter((v: any) => v[i.property] != null)
+				.map((v: any) => Number(v[i.property]))
+				.reduce((pren: number, next: number) => pren + next, 0)
+			if (i.property.includes("Price")) {
+				totalRow[index] = displayPrice(total)
+			} else {
+				totalRow[index] = total
+			}
+		}
+	})
+	return totalRow
 }
 
 defineExpose({
-    openDialog,
+	openDialog,
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/admin/system/dept/index.vue b/src/views/admin/system/dept/index.vue
index 6e65a6b..3b02370 100644
--- a/src/views/admin/system/dept/index.vue
+++ b/src/views/admin/system/dept/index.vue
@@ -2,35 +2,46 @@
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
 			<el-row shadow="hover" v-show="showSearch" class="ml10">
-				<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="filter">
+				<SearchPanel
+					v-show="showSearch"
+					ref="queryRef"
+					:model="state.queryForm"
+					:search-text="$t('common.queryBtn')"
+					:reset-text="$t('common.resetBtn')"
+					@search="filter"
+					@reset="resetQuery"
+				>
 					<el-form-item prop="deptName" :label="$t('sysdept.name')">
-						<el-input :placeholder="$t('sysdept.inputdeptNameTip')" style="max-width: 180px"
-							v-model="state.queryForm.deptName"></el-input>
+						<el-input :placeholder="$t('sysdept.inputdeptNameTip')" style="max-width: 180px" v-model="state.queryForm.deptName"></el-input>
 					</el-form-item>
-					<el-form-item>
-						<el-button icon="search" type="primary" @click="filter">
-							{{ $t("common.queryBtn") }}
-						</el-button>
-						<el-button @click="resetQuery" icon="Refresh">{{ $t("common.resetBtn") }}</el-button>
-					</el-form-item>
-				</el-form>
+				</SearchPanel>
 			</el-row>
 			<el-row>
 				<div class="mb8" style="width: 100%">
-					<el-button icon="folder-add" type="primary" class="top-right-btn" v-if="!defaultTreeViewRef"
-						v-auth="'sys_dept_add'" @click="handleAdd">
+					<el-button
+						icon="folder-add"
+						type="primary"
+						class="top-right-btn"
+						v-if="!defaultTreeViewRef"
+						v-auth="'sys_dept_add'"
+						@click="handleAdd"
+					>
 						{{ $t("common.addBtn") }}
 					</el-button>
-					<el-button v-if="false" plain icon="upload-filled" type="primary" class="ml10"
-						@click="excelUploadRef.show()">
+					<el-button v-if="false" plain icon="upload-filled" type="primary" class="ml10" @click="excelUploadRef.show()">
 						{{ $t("common.importBtn") }}
 					</el-button>
 					<el-button @click="handleExpand"> {{ $t("common.expandBtn") }}</el-button>
-					<right-toolbar v-model:showSearch="showSearch" :export="'sys_dept_add'" @exportExcel="exportExcel"
-						class="ml10" style="float: right; margin-right: 20px" @queryTable="getDataList">
+					<right-toolbar
+						v-model:showSearch="showSearch"
+						:export="'sys_dept_add'"
+						@exportExcel="exportExcel"
+						class="ml10"
+						style="float: right; margin-right: 20px"
+						@queryTable="getDataList"
+					>
 						<el-tooltip class="item" effect="dark" :content="$t('queryTree.view')" placement="top">
-							<el-button v-if="!stores.userInfos.roleCodes.includes('DEPT_ADMIN')" circle icon="Grid"
-								@click="handleView" />
+							<el-button v-if="!stores.userInfos.roleCodes.includes('DEPT_ADMIN')" circle icon="Grid" @click="handleView" />
 						</el-tooltip>
 					</right-toolbar>
 				</div>
@@ -39,8 +50,13 @@
 			<tree-view ref="treeViewRef" v-if="defaultTreeViewRef" />
 			<table-view ref="tableViewRef" v-if="!defaultTreeViewRef" />
 
-			<upload-excel ref="excelUploadRef" :title="$t('sysdept.importTip')" url="/admin/dept/import"
-				temp-url="/admin/sys-file/local/file/dept.xlsx" @refreshDataList="getDataList" />
+			<upload-excel
+				ref="excelUploadRef"
+				:title="$t('sysdept.importTip')"
+				url="/admin/dept/import"
+				temp-url="/admin/sys-file/local/file/dept.xlsx"
+				@refreshDataList="getDataList"
+			/>
 		</div>
 	</div>
 </template>
@@ -54,7 +70,7 @@ const TreeView = defineAsyncComponent(() => import("./tree-view.vue"))
 const TableView = defineAsyncComponent(() => import("./table-view.vue"))
 
 const { t } = useI18n()
-const stores = useUserInfo();
+const stores = useUserInfo()
 
 // 默认树视图展示
 const defaultTreeViewRef = ref(true)
diff --git a/src/views/admin/system/menu/index.vue b/src/views/admin/system/menu/index.vue
index 7d0ff0f..ccdd81d 100644
--- a/src/views/admin/system/menu/index.vue
+++ b/src/views/admin/system/menu/index.vue
@@ -2,37 +2,51 @@
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
 			<el-row v-show="showSearch" class="ml10">
-				<el-form :inline="true" :model="state.queryForm" ref="queryRef">
+				<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"
+					@reset="resetQuery"
+				>
 					<el-form-item :label="$t('sysmenu.name')" prop="menuName">
-						<el-input :placeholder="$t('sysmenu.inputNameTip')" clearable style="max-width: 180px"
-							v-model="state.queryForm.menuName" />
+						<el-input :placeholder="$t('sysmenu.inputNameTip')" clearable style="max-width: 180px" v-model="state.queryForm.menuName" />
 					</el-form-item>
-					<el-form-item>
-						<el-button @click="query" class="ml10" icon="search" type="primary">
-							{{ $t("common.queryBtn") }}
-						</el-button>
-						<el-button @click="resetQuery" icon="Refresh">{{ $t("common.resetBtn") }}</el-button>
-					</el-form-item>
-				</el-form>
+				</SearchPanel>
 			</el-row>
 			<el-row>
 				<div class="mb8" style="width: 100%">
-					<el-button @click="onOpenAddMenu" class="ml10" icon="folder-add" type="primary"
-						v-auth="'sys_menu_add'">
+					<el-button @click="onOpenAddMenu" class="ml10" icon="folder-add" type="primary" v-auth="'sys_menu_add'">
 						{{ $t("common.addBtn") }}
 					</el-button>
-					<right-toolbar v-model:showSearch="showSearch" class="ml10" style="float: right; margin-right: 20px"
-						@queryTable="query"></right-toolbar>
+					<right-toolbar
+						v-model:showSearch="showSearch"
+						class="ml10"
+						style="float: right; margin-right: 20px"
+						@queryTable="query"
+					></right-toolbar>
 				</div>
 			</el-row>
-			<el-table class="el-table" ref="tableRef" :data="tableList" row-key="id" style="width: 100%"
-				v-loading="state.loading" border :header-cell-style="tableStyle?.headerCellStyle"
-				:expand-row-keys="expandRowKeys" lazy :load="load"
-				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @expand-change="handleExpandChange">
-				<el-table-column :label="$t('sysmenu.name')" fixed prop="name" align="left" show-overflow-tooltip
-					min-width="200" />
-				<el-table-column :label="$t('sysmenu.sortOrder')" prop="sortOrder" align="center"
-					show-overflow-tooltip />
+			<el-table
+				class="el-table"
+				ref="tableRef"
+				:data="tableList"
+				row-key="id"
+				style="width: 100%"
+				v-loading="state.loading"
+				border
+				:header-cell-style="tableStyle?.headerCellStyle"
+				:expand-row-keys="expandRowKeys"
+				lazy
+				:load="load"
+				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+				@expand-change="handleExpandChange"
+			>
+				<el-table-column :label="$t('sysmenu.name')" fixed prop="name" align="left" show-overflow-tooltip min-width="200" />
+				<el-table-column :label="$t('sysmenu.sortOrder')" prop="sortOrder" align="center" show-overflow-tooltip />
 				<el-table-column :label="$t('sysmenu.icon')" prop="icon" show-overflow-tooltip align="center">
 					<template #default="scope">
 						<SvgIcon :name="scope.row.meta.icon" />
@@ -52,23 +66,26 @@
 						<el-tag type="info" v-else>关闭</el-tag>
 					</template>
 				</el-table-column>
-				<el-table-column :label="$t('sysmenu.permission')" :show-overflow-tooltip="true" prop="permission"
-					align="center" />
+				<el-table-column :label="$t('sysmenu.permission')" :show-overflow-tooltip="true" prop="permission" align="center" />
 				<el-table-column :label="$t('common.action')" show-overflow-tooltip width="250" align="center">
 					<template #default="scope">
-						<el-button icon="folder-add" @click="onOpenAddMenu('add', scope.row)" text type="primary"
-							v-auth="'sys_menu_add'">
+						<el-button icon="folder-add" @click="onOpenAddMenu('add', scope.row)" text type="primary" v-auth="'sys_menu_add'">
 							{{ $t("common.addBtn") }}
 						</el-button>
-						<el-button icon="edit-pen" @click="onOpenEditMenu('edit', scope.row)" text type="primary"
-							v-auth="'sys_menu_edit'">{{ $t("common.editBtn") }}
+						<el-button icon="edit-pen" @click="onOpenEditMenu('edit', scope.row)" text type="primary" v-auth="'sys_menu_edit'"
+							>{{ $t("common.editBtn") }}
 						</el-button>
 
-						<el-tooltip icon="delete" :content="$t('sysmenu.deleteDisabledTip')"
-							:disabled="!deleteMenuDisabled(scope.row)" placement="top">
+						<el-tooltip icon="delete" :content="$t('sysmenu.deleteDisabledTip')" :disabled="!deleteMenuDisabled(scope.row)" placement="top">
 							<span style="margin-left: 12px">
-								<el-button icon="delete" :disabled="deleteMenuDisabled(scope.row)"
-									@click="handleDelete(scope.row)" text type="primary" v-auth="'sys_menu_del'">
+								<el-button
+									icon="delete"
+									:disabled="deleteMenuDisabled(scope.row)"
+									@click="handleDelete(scope.row)"
+									text
+									type="primary"
+									v-auth="'sys_menu_del'"
+								>
 									{{ $t("common.delBtn") }}
 								</el-button>
 							</span>
@@ -211,7 +228,7 @@ const restoreExpandedRows = async () => {
 							row.children = childrenList
 						}
 					} catch (error) {
-						console.error('加载子节点失败:', error)
+						console.error("加载子节点失败:", error)
 					}
 				}
 
@@ -221,7 +238,7 @@ const restoreExpandedRows = async () => {
 					// 等待 DOM 更新，确保子节点渲染完成
 					await nextTick()
 				} catch (error) {
-					console.error('展开节点失败:', error)
+					console.error("展开节点失败:", error)
 				}
 
 				// 如果有子节点，递归处理
diff --git a/src/views/admin/system/post/index.vue b/src/views/admin/system/post/index.vue
index f15823a..904a2f1 100644
--- a/src/views/admin/system/post/index.vue
+++ b/src/views/admin/system/post/index.vue
@@ -2,17 +2,20 @@
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
 			<el-row class="ml10" v-show="showSearch">
-				<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
+				<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"
+					@reset="resetQuery"
+				>
 					<el-form-item :label="$t('post.postName')" prop="postName">
 						<el-input :placeholder="$t('post.inputpostNameTip')" style="max-width: 180px" v-model="state.queryForm.postName" />
 					</el-form-item>
-					<el-form-item>
-						<el-button @click="getDataList" icon="search" type="primary">
-							{{ $t("common.queryBtn") }}
-						</el-button>
-						<el-button @click="resetQuery" icon="Refresh">{{ $t("common.resetBtn") }}</el-button>
-					</el-form-item>
-				</el-form>
+				</SearchPanel>
 			</el-row>
 			<el-row>
 				<div class="mb8" style="width: 100%">
diff --git a/src/views/admin/system/role/index.vue b/src/views/admin/system/role/index.vue
index 3889480..bed766d 100644
--- a/src/views/admin/system/role/index.vue
+++ b/src/views/admin/system/role/index.vue
@@ -2,17 +2,20 @@
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
 			<el-row shadow="hover" v-show="showSearch" class="ml10">
-				<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+				<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"
+					@reset="resetQuery"
+				>
 					<el-form-item :label="$t('sysrole.roleName')" prop="roleName">
 						<el-input :placeholder="$t('sysrole.inputRoleNameTip')" v-model="state.queryForm.roleName" />
 					</el-form-item>
-					<el-form-item>
-						<el-button icon="search" type="primary" @click="getDataList">
-							{{ $t("common.queryBtn") }}
-						</el-button>
-						<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
-					</el-form-item>
-				</el-form>
+				</SearchPanel>
 			</el-row>
 			<el-row>
 				<div class="mb8" style="width: 100%">
diff --git a/src/views/admin/system/sys-user-transaction/index.vue b/src/views/admin/system/sys-user-transaction/index.vue
index 07b0ccb..0f39139 100644
--- a/src/views/admin/system/sys-user-transaction/index.vue
+++ b/src/views/admin/system/sys-user-transaction/index.vue
@@ -2,7 +2,16 @@
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
 			<el-row>
-				<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
+				<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"
+					@reset="resetQuery"
+				>
 					<el-form-item style="width: 250px" label="调动用户" prop="userId">
 						<select-user v-model="state.queryForm.userId" />
 					</el-form-item>
@@ -13,48 +22,61 @@
 						<dict-select v-model="state.queryForm.isWalletTransaction" dict-code="yes_no_type" />
 					</el-form-item>
 					<el-form-item style="width: 450px" label="申请时间" prop="createTimeList">
-						<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD HH:mm:ss"
-							type="datetimerange" />
+						<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
 					</el-form-item>
 					<el-form-item style="width: 450px" label="审核时间" prop="processTimeList">
-						<el-date-picker v-model="state.queryForm.processTimeList" value-format="YYYY-MM-DD HH:mm:ss"
-							type="datetimerange" />
+						<el-date-picker v-model="state.queryForm.processTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
 					</el-form-item>
 					<el-form-item style="width: 450px" label="自动转账时间" prop="walletTransactionTimeList">
-						<el-date-picker v-model="state.queryForm.walletTransactionTimeList"
-							value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
+						<el-date-picker v-model="state.queryForm.walletTransactionTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
 					</el-form-item>
-					<el-form-item>
-						<el-button icon="Search" type="primary" @click="getDataList">
-							{{ $t("common.queryBtn") }}
-						</el-button>
-						<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
-					</el-form-item>
-				</el-form>
+				</SearchPanel>
 			</el-row>
 			<el-row>
 				<div class="mb8" style="width: 100%">
-					<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
-						v-auth="'admin_sysUserTransaction_add'">
+					<el-button
+						icon="folder-add"
+						type="primary"
+						class="ml10"
+						@click="formDialogRef.openDialog()"
+						v-auth="'admin_sysUserTransaction_add'"
+					>
 						新 增
 					</el-button>
-					<el-button plain :disabled="multiple" icon="Delete" type="primary"
-						v-auth="'admin_sysUserTransaction_del'" @click="handleDelete(selectObjs)">
+					<el-button
+						plain
+						:disabled="multiple"
+						icon="Delete"
+						type="primary"
+						v-auth="'admin_sysUserTransaction_del'"
+						@click="handleDelete(selectObjs)"
+					>
 						删除
 					</el-button>
 					<div class="flex justify-between items-center">
 						<el-tabs class="flex-1" v-model="activeName" @tab-click="handleClickTabItem">
 							<el-tab-pane v-for="v in tabItems" :key="v.id" :label="v.label" :name="v.value" />
 						</el-tabs>
-						<right-toolbar v-model:showSearch="showSearch" :export="'admin_sysUserTransaction_export'"
-							@exportExcel="exportExcel" class="ml10 mr20" style="float: right"
-							@queryTable="getDataList" />
+						<right-toolbar
+							v-model:showSearch="showSearch"
+							:export="'admin_sysUserTransaction_export'"
+							@exportExcel="exportExcel"
+							class="ml10 mr20"
+							style="float: right"
+							@queryTable="getDataList"
+						/>
 					</div>
 				</div>
 			</el-row>
-			<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-				:header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
-				@sort-change="sortChangeHandle">
+			<el-table
+				:data="state.dataList"
+				v-loading="state.loading"
+				border
+				:cell-style="tableStyle.cellStyle"
+				:header-cell-style="tableStyle.headerCellStyle"
+				@selection-change="selectionChangHandle"
+				@sort-change="sortChangeHandle"
+			>
 				<el-table-column type="selection" width="40" align="center" />
 				<el-table-column type="index" label="#" width="80" />
 				<el-table-column prop="applyUsername" label="申请人" />
@@ -89,26 +111,47 @@
 						<span v-else class="color-danger">未审核</span>
 					</template>
 				</el-table-column>
-				<el-table-column label="操作" fixed="right" width="250"
-					v-auths="['admin_sysUserTransaction_edit', 'admin_sysUserTransaction_check', 'admin_sysUserTransaction_del']">
+				<el-table-column
+					label="操作"
+					fixed="right"
+					width="250"
+					v-auths="['admin_sysUserTransaction_edit', 'admin_sysUserTransaction_check', 'admin_sysUserTransaction_del']"
+				>
 					<template #default="{ row }">
-						<el-button icon="edit-pen" v-if="row.processStatus == 1" text type="primary"
-							v-auth="'admin_sysUserTransaction_edit'" @click="formDialogRef.openDialog(row.id)">
+						<el-button
+							icon="edit-pen"
+							v-if="row.processStatus == 1"
+							text
+							type="primary"
+							v-auth="'admin_sysUserTransaction_edit'"
+							@click="formDialogRef.openDialog(row.id)"
+						>
 							编辑
 						</el-button>
-						<el-button icon="VideoPlay" v-if="row.processStatus == 1" text type="primary"
-							v-auth="'admin_sysUserTransaction_check'" @click="deal(row)">
+						<el-button
+							icon="VideoPlay"
+							v-if="row.processStatus == 1"
+							text
+							type="primary"
+							v-auth="'admin_sysUserTransaction_check'"
+							@click="deal(row)"
+						>
 							开始处理
 						</el-button>
-						<el-button icon="delete" v-if="row.processStatus == 1" text type="primary"
-							v-auth="'admin_sysUserTransaction_del'" @click="handleDelete([row.id])">
+						<el-button
+							icon="delete"
+							v-if="row.processStatus == 1"
+							text
+							type="primary"
+							v-auth="'admin_sysUserTransaction_del'"
+							@click="handleDelete([row.id])"
+						>
 							删除
 						</el-button>
 					</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>
 		<!-- 审批抽屉 -->
 		<process-drawer ref="processDrawerRef" @task-submit-event="taskSubmitEvent" />
diff --git a/src/views/admin/system/user/index.vue b/src/views/admin/system/user/index.vue
index 9d3b6e0..5f5cb4b 100644
--- a/src/views/admin/system/user/index.vue
+++ b/src/views/admin/system/user/index.vue
@@ -1,12 +1,28 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<DraggableDepTree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
-				@getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含"
-				:defaultTreeWidth="20" :nodeClickable="false">
+			<DraggableDepTree
+				ref="draggableDepTreeRef"
+				placeholder="请输入部门名称"
+				:show-expand="true"
+				@getSelectNode="handleGetSelectNode"
+				switch-inactive-text="包含"
+				switch-active-text="不包含"
+				:defaultTreeWidth="20"
+				:nodeClickable="false"
+			>
 				<template #default>
 					<el-row v-show="showSearch">
-						<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
+						<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"
+							@reset="resetQuery"
+						>
 							<el-form-item style="width: 250px" label="用户" prop="userId">
 								<select-user v-model="state.queryForm.userId" clearable />
 							</el-form-item>
@@ -25,26 +41,35 @@
 							<el-form-item style="width: 250px" label="编制情况" prop="staffingType">
 								<dict-select v-model="state.queryForm.staffingType" dict-code="user_staffing_type" />
 							</el-form-item>
-							<el-form-item>
-								<el-button icon="Search" type="primary" @click="getDataList">查询</el-button>
-								<el-button icon="Refresh" @click="resetQuery">重置</el-button>
-							</el-form-item>
-						</el-form>
+						</SearchPanel>
 					</el-row>
 					<el-row>
 						<div class="mb8" style="width: 100%">
-							<el-button v-auth="'sys_user_add'" icon="folder-add" type="primary"
-								@click="userDialogRef.openDialog()">新增</el-button>
-							<el-button plain v-auth="'sys_user_export'" class="ml10" icon="upload-filled" type="primary"
-								@click="excelUploadRef.show()">
+							<el-button v-auth="'sys_user_add'" icon="folder-add" type="primary" @click="userDialogRef.openDialog()">新增</el-button>
+							<el-button plain v-auth="'sys_user_export'" class="ml10" icon="upload-filled" type="primary" @click="excelUploadRef.show()">
 								导入
 							</el-button>
-							<el-button plain v-auth="'sys_user_del'" :disabled="multiple" class="ml10" icon="Delete"
-								type="primary" @click="handleDelete(selectObjs)">
+							<el-button
+								plain
+								v-auth="'sys_user_del'"
+								:disabled="multiple"
+								class="ml10"
+								icon="Delete"
+								type="primary"
+								@click="handleDelete(selectObjs)"
+							>
 								删除
 							</el-button>
-							<el-button plain v-auth="'sys_user_del'" v-if="activeName == '1'" :disabled="multiple"
-								class="ml10" icon="VideoPlay" type="primary" @click="doBatchDeal">
+							<el-button
+								plain
+								v-auth="'sys_user_del'"
+								v-if="activeName == '1'"
+								:disabled="multiple"
+								class="ml10"
+								icon="VideoPlay"
+								type="primary"
+								@click="doBatchDeal"
+							>
 								审批
 							</el-button>
 							<div class="flex justify-between items-center">
@@ -52,15 +77,26 @@
 									<el-tab-pane v-for="v in tabItems" :key="v.id" :label="v.label" :name="v.value" />
 								</el-tabs>
 
-								<right-toolbar v-model:showSearch="showSearch" :export="'sys_user_export'"
-									@exportExcel="exportExcel" @queryTable="getDataList" class="ml10"
-									style="float: right" />
+								<right-toolbar
+									v-model:showSearch="showSearch"
+									:export="'sys_user_export'"
+									@exportExcel="exportExcel"
+									@queryTable="getDataList"
+									class="ml10"
+									style="float: right"
+								/>
 							</div>
 						</div>
 					</el-row>
-					<el-table v-loading="state.loading" :data="state.dataList" @selection-change="handleSelectionChange"
-						row-key="userId" border :cell-style="tableStyle.cellStyle"
-						:header-cell-style="tableStyle.headerCellStyle">
+					<el-table
+						v-loading="state.loading"
+						:data="state.dataList"
+						@selection-change="handleSelectionChange"
+						row-key="userId"
+						border
+						:cell-style="tableStyle.cellStyle"
+						:header-cell-style="tableStyle.headerCellStyle"
+					>
 						<el-table-column :selectable="handleSelectable" type="selection" width="40" />
 						<el-table-column label="#" type="index" width="60" fixed="left" />
 						<el-table-column label="用户名" prop="username" fixed="left" show-overflow-tooltip />
@@ -69,9 +105,13 @@
 						<el-table-column label="部门" prop="deptName" show-overflow-tooltip min-width="150" />
 						<el-table-column label="启用" show-overflow-tooltip min-width="150">
 							<template #default="{ row }">
-								<el-switch :disabled="!auth('sys_user_edit') || row.processStatus != '2'"
-									v-model="row.lockFlag" @change="changeSwitch(row)" active-value="0"
-									inactive-value="9"></el-switch>
+								<el-switch
+									:disabled="!auth('sys_user_edit') || row.processStatus != '2'"
+									v-model="row.lockFlag"
+									@change="changeSwitch(row)"
+									active-value="0"
+									inactive-value="9"
+								></el-switch>
 							</template>
 						</el-table-column>
 						<el-table-column label="编制" min-width="80">
@@ -81,8 +121,7 @@
 						</el-table-column>
 						<el-table-column label="角色" show-overflow-tooltip min-width="150">
 							<template #default="scope">
-								<el-tag v-for="(item, index) in scope.row.roleList" :key="index">
-									{{ item.roleName }}</el-tag>
+								<el-tag v-for="(item, index) in scope.row.roleList" :key="index"> {{ item.roleName }}</el-tag>
 							</template>
 						</el-table-column>
 						<el-table-column label="人脸">
@@ -92,44 +131,68 @@
 						</el-table-column>
 						<el-table-column v-if="false" label="全局人脸" show-overflow-tooltip>
 							<template #default="{ row }">
-								<el-switch :disabled="!auth('userFace_sysUserFace_global_face')" v-if="row.isGlobalFace"
-									v-model="row.isGlobalFace" @change="changeGlobalFaceSwitch(row)" active-value="1"
-									inactive-value="0" />
+								<el-switch
+									:disabled="!auth('userFace_sysUserFace_global_face')"
+									v-if="row.isGlobalFace"
+									v-model="row.isGlobalFace"
+									@change="changeGlobalFaceSwitch(row)"
+									active-value="1"
+									inactive-value="0"
+								/>
 							</template>
 						</el-table-column>
 						<el-table-column label="所属商户" prop="merchantName" show-overflow-tooltip min-width="150" />
-						<el-table-column v-auths="['sys_user_edit', 'userFace_sysUserFace_view', 'sys_user_del']"
-							label="操作" min-width="300" width="300" fixed="right">
+						<el-table-column
+							v-auths="['sys_user_edit', 'userFace_sysUserFace_view', 'sys_user_del']"
+							label="操作"
+							min-width="300"
+							width="300"
+							fixed="right"
+						>
 							<template #default="{ row }">
 								<div style="display: flex; justify-content: center">
 									<!-- 重置密码 -->
-									<popover-input v-if="row.processStatus == '2'" v-model="inputPassword"
-										@confirm="changePassword(row)">
+									<popover-input v-if="row.processStatus == '2'" v-model="inputPassword" @confirm="changePassword(row)">
 										<template #default>
-											<el-button v-auth="'sys_user_edit'" icon="RefreshLeft" text type="primary"
-												class="mr-4">密码</el-button>
+											<el-button v-auth="'sys_user_edit'" icon="RefreshLeft" text type="primary" class="mr-4">密码</el-button>
 										</template>
 									</popover-input>
 									<!-- 修改信息 -->
-									<el-button v-if="row.processStatus == '2'" v-auth="'sys_user_edit'" icon="edit-pen"
-										text type="primary" @click="userDialogRef.openDialog(row.userId)">
+									<el-button
+										v-if="row.processStatus == '2'"
+										v-auth="'sys_user_edit'"
+										icon="edit-pen"
+										text
+										type="primary"
+										@click="userDialogRef.openDialog(row.userId)"
+									>
 										修改
 									</el-button>
 									<!-- 人脸管理 -->
-									<el-button v-if="row.processStatus == '2'" v-auth="'userFace_sysUserFace_view'"
-										icon="User" text type="primary" @click="faceManageRef.openDialog(row.userId)">
+									<el-button
+										v-if="row.processStatus == '2'"
+										v-auth="'userFace_sysUserFace_view'"
+										icon="User"
+										text
+										type="primary"
+										@click="faceManageRef.openDialog(row.userId)"
+									>
 										人脸管理
 									</el-button>
-									<el-button v-if="row.processStatus == 1" type="primary" size="small" link
-										icon="VideoPlay" @click="deal(row)">
+									<el-button v-if="row.processStatus == 1" type="primary" size="small" link icon="VideoPlay" @click="deal(row)">
 										开始处理
 									</el-button>
 									<!-- 删除用户 -->
 									<el-tooltip content="admin 不允许被删除" :disabled="row.userId !== '1'" placement="top">
 										<span style="margin-left: 12px">
-											<el-button icon="delete" v-auth="'sys_user_del'"
-												:disabled="row.username === 'admin'" text type="primary"
-												@click="handleDelete([row.userId])">
+											<el-button
+												icon="delete"
+												v-auth="'sys_user_del'"
+												:disabled="row.username === 'admin'"
+												text
+												type="primary"
+												@click="handleDelete([row.userId])"
+											>
 												删除
 											</el-button>
 										</span>
@@ -138,16 +201,20 @@
 							</template>
 						</el-table-column>
 					</el-table>
-					<pagination v-bind="state.pagination" @current-change="currentChangeHandle"
-						@size-change="sizeChangeHandle" />
+					<pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle" />
 				</template>
 			</DraggableDepTree>
 		</div>
 
 		<user-form ref="userDialogRef" @refresh="getDataList(false)" :deptId="state.queryForm.deptId" />
 		<face-manage ref="faceManageRef" @refresh="getDataList(false)" />
-		<upload-excel ref="excelUploadRef" title="用户导入" temp-url="/admin/sys-file/local/file/user.xlsx"
-			url="/admin/user/import-face" @refreshDataList="getDataList" />
+		<upload-excel
+			ref="excelUploadRef"
+			title="用户导入"
+			temp-url="/admin/sys-file/local/file/user.xlsx"
+			url="/admin/user/import-face"
+			@refreshDataList="getDataList"
+		/>
 
 		<!-- 审批抽屉 -->
 		<process-drawer ref="processDrawerRef" @task-submit-event="taskSubmitEvent" />
diff --git a/src/views/admin/system/userFaceApprove/index.vue b/src/views/admin/system/userFaceApprove/index.vue
index 9f1ff92..11eea50 100644
--- a/src/views/admin/system/userFaceApprove/index.vue
+++ b/src/views/admin/system/userFaceApprove/index.vue
@@ -1,12 +1,28 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<DraggableDepTree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
-				@getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含"
-				:defaultTreeWidth="20" :nodeClickable="false">
+			<DraggableDepTree
+				ref="draggableDepTreeRef"
+				placeholder="请输入部门名称"
+				:show-expand="true"
+				@getSelectNode="handleGetSelectNode"
+				switch-inactive-text="包含"
+				switch-active-text="不包含"
+				:defaultTreeWidth="20"
+				:nodeClickable="false"
+			>
 				<template #default>
 					<el-row v-show="showSearch">
-						<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
+						<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"
+							@reset="resetQuery"
+						>
 							<el-form-item style="width: 250px" label="用户" prop="userId">
 								<select-user v-model="state.queryForm.userId" clearable />
 							</el-form-item>
@@ -16,20 +32,31 @@
 							<el-form-item label="手机号" prop="phone">
 								<el-input v-model="state.queryForm.phone" placeholder="请输入手机号" clearable />
 							</el-form-item>
-							<el-form-item>
-								<el-button icon="Search" type="primary" @click="getDataList">查询</el-button>
-								<el-button icon="Refresh" @click="resetQuery">重置</el-button>
-							</el-form-item>
-						</el-form>
+						</SearchPanel>
 					</el-row>
 					<el-row>
 						<div class="mb8" style="width: 100%">
-							<el-button plain v-auth="'userFace_sysUserFace_del'" :disabled="multiple" class="ml10"
-								icon="Delete" type="primary" @click="handleDelete(selectIds)">
+							<el-button
+								plain
+								v-auth="'userFace_sysUserFace_del'"
+								:disabled="multiple"
+								class="ml10"
+								icon="Delete"
+								type="primary"
+								@click="handleDelete(selectIds)"
+							>
 								删除
 							</el-button>
-							<el-button plain v-auth="'sys_user_del'" v-if="activeName == '1'" :disabled="multiple"
-								class="ml10" icon="VideoPlay" type="primary" @click="doBatchDeal">
+							<el-button
+								plain
+								v-auth="'sys_user_del'"
+								v-if="activeName == '1'"
+								:disabled="multiple"
+								class="ml10"
+								icon="VideoPlay"
+								type="primary"
+								@click="doBatchDeal"
+							>
 								审批
 							</el-button>
 						</div>
@@ -37,9 +64,15 @@
 					<el-tabs class="flex-1" v-model="activeName" @tab-click="handleClickTabItem">
 						<el-tab-pane v-for="v in tabItems" :key="v.id" :label="v.label" :name="v.value" />
 					</el-tabs>
-					<el-table v-loading="state.loading" :data="state.dataList" row-key="userId"
-						@selection-change="handleSelectionChange" border :cell-style="tableStyle.cellStyle"
-						:header-cell-style="tableStyle.headerCellStyle">
+					<el-table
+						v-loading="state.loading"
+						:data="state.dataList"
+						row-key="userId"
+						@selection-change="handleSelectionChange"
+						border
+						:cell-style="tableStyle.cellStyle"
+						:header-cell-style="tableStyle.headerCellStyle"
+					>
 						<el-table-column :selectable="handleSelectable" type="selection" width="40" />
 						<el-table-column label="#" type="index" width="60" fixed="left" />
 						<el-table-column label="姓名" prop="username" fixed="left" show-overflow-tooltip />
@@ -59,17 +92,21 @@
 						<el-table-column label="审核时间" prop="processTime" show-overflow-tooltip min-width="160" />
 						<el-table-column label="操作" min-width="160" fixed="right">
 							<template #default="{ row }">
-								<el-button type="primary" v-if="row.isCheckUser && row.processStatus != '2'"
-									size="small" link icon="VideoPlay" @click="deal(row)">
+								<el-button
+									type="primary"
+									v-if="row.isCheckUser && row.processStatus != '2'"
+									size="small"
+									link
+									icon="VideoPlay"
+									@click="deal(row)"
+								>
 									开始处理
 								</el-button>
-								<el-button v-auth="'userFace_sysUserFace_del'" link type="danger" icon="Delete"
-									@click="delFace(row)">删除</el-button>
+								<el-button v-auth="'userFace_sysUserFace_del'" link type="danger" icon="Delete" @click="delFace(row)">删除</el-button>
 							</template>
 						</el-table-column>
 					</el-table>
-					<pagination v-bind="state.pagination" @current-change="currentChangeHandle"
-						@size-change="sizeChangeHandle" />
+					<pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle" />
 				</template>
 			</DraggableDepTree>
 		</div>
diff --git a/src/views/admin/token/index.vue b/src/views/admin/token/index.vue
index 9b87857..3d64775 100644
--- a/src/views/admin/token/index.vue
+++ b/src/views/admin/token/index.vue
@@ -2,23 +2,35 @@
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
 			<el-row class="ml10" v-show="showSearch">
-				<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
+				<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"
+					@reset="resetQuery"
+				>
 					<el-form-item :label="$t('systoken.username')" prop="username">
 						<el-input :placeholder="$t('systoken.inputUsernameTip')" v-model="state.queryForm.username"></el-input>
 					</el-form-item>
-          <el-form-item label="用户id" prop="username">
-            <el-input :placeholder="$t('systoken.inputUsernameTip')" v-model="state.queryForm.userId"></el-input>
-          </el-form-item>
-					<el-form-item>
-						<el-button @click="getDataList" icon="Search" type="primary">{{ $t('common.queryBtn') }} </el-button>
-						<el-button @click="resetQuery" icon="Refresh">{{ $t('common.resetBtn') }}</el-button>
+					<el-form-item label="用户id" prop="username">
+						<el-input :placeholder="$t('systoken.inputUsernameTip')" v-model="state.queryForm.userId"></el-input>
 					</el-form-item>
-				</el-form>
+				</SearchPanel>
 			</el-row>
 			<el-row>
 				<div class="mb8" style="width: 100%">
-					<el-button :disabled="multiple" @click="handleDelete(selectObjs)" class="ml10" icon="Delete" type="primary" v-auth="'sys_user_del'">
-						{{ $t('systoken.offlineBtn') }}
+					<el-button
+						:disabled="multiple"
+						@click="handleDelete(selectObjs)"
+						class="ml10"
+						icon="Delete"
+						type="primary"
+						v-auth="'sys_user_del'"
+					>
+						{{ $t("systoken.offlineBtn") }}
 					</el-button>
 					<right-toolbar
 						@queryTable="getDataList"
@@ -52,8 +64,15 @@
 				<el-table-column :label="$t('systoken.expiresAt')" prop="expiresAt" show-overflow-tooltip></el-table-column>
 				<el-table-column :label="$t('common.action')" width="100">
 					<template #default="scope">
-						<el-button icon="delete" @click="handleDelete([scope.row.accessToken])" size="small" text type="primary" v-auth="'sys_user_del'">
-							{{ $t('systoken.offlineBtn') }}
+						<el-button
+							icon="delete"
+							@click="handleDelete([scope.row.accessToken])"
+							size="small"
+							text
+							type="primary"
+							v-auth="'sys_user_del'"
+						>
+							{{ $t("systoken.offlineBtn") }}
 						</el-button>
 					</template>
 				</el-table-column>
@@ -65,62 +84,62 @@
 </template>
 
 <script lang="ts" setup>
-import { BasicTableProps, useTable } from '/@/hooks/table';
-import { delObj, fetchList } from '/@/api/admin/token';
-import { useI18n } from 'vue-i18n';
-import { useMessage, useMessageBox } from '/@/hooks/message';
-import { Session } from '/@/utils/storage';
+import { BasicTableProps, useTable } from "/@/hooks/table"
+import { delObj, fetchList } from "/@/api/admin/token"
+import { useI18n } from "vue-i18n"
+import { useMessage, useMessageBox } from "/@/hooks/message"
+import { Session } from "/@/utils/storage"
 
-const { t } = useI18n();
+const { t } = useI18n()
 // 定义变量内容
-const queryRef = ref();
-const showSearch = ref(true);
+const queryRef = ref()
+const showSearch = ref(true)
 // 多选rows
-const selectObjs = ref([]) as any;
+const selectObjs = ref([]) as any
 // 是否可以多选
-const multiple = ref(true);
+const multiple = ref(true)
 
 //  table hook
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {
-		username: '',
-    userId: '',
+		username: "",
+		userId: "",
 	},
 	pageList: fetchList,
-});
-const { getDataList, currentChangeHandle, sortChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
+})
+const { getDataList, currentChangeHandle, sortChangeHandle, sizeChangeHandle, tableStyle } = useTable(state)
 
 // 清空搜索条件
 const resetQuery = () => {
-	queryRef.value?.resetFields();
-	getDataList();
-};
+	queryRef.value?.resetFields()
+	getDataList()
+}
 
 // 多选事件
 const handleSelectionChange = (objs: { accessToken: string }[]) => {
-	selectObjs.value = objs.map(({ accessToken }) => accessToken);
-	multiple.value = !objs.length;
-};
+	selectObjs.value = objs.map(({ accessToken }) => accessToken)
+	multiple.value = !objs.length
+}
 
 // 删除操作
 const handleDelete = async (accessTokens: string[]) => {
 	try {
-		await useMessageBox().confirm(t('systoken.offlineConfirmText'));
+		await useMessageBox().confirm(t("systoken.offlineConfirmText"))
 	} catch {
-		return; // 取消删除则直接跳过此方法
+		return // 取消删除则直接跳过此方法
 	}
 
 	try {
-		await delObj(accessTokens);
-		getDataList();
-		useMessage().success(t('systoken.offlineSuccessText'));
+		await delObj(accessTokens)
+		getDataList()
+		useMessage().success(t("systoken.offlineSuccessText"))
 	} catch (err: any) {
-		useMessage().error(err.msg);
+		useMessage().error(err.msg)
 	}
-};
+}
 
 // 判断当前token 是否和登录token一致
 const filterOwnToken = (row: any) => {
-	return Session.getToken() === row.accessToken;
-};
+	return Session.getToken() === row.accessToken
+}
 </script>
diff --git a/src/views/admin/userTrustedDevice/index.vue b/src/views/admin/userTrustedDevice/index.vue
index 9068060..4484955 100644
--- a/src/views/admin/userTrustedDevice/index.vue
+++ b/src/views/admin/userTrustedDevice/index.vue
@@ -2,15 +2,20 @@
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
 			<el-row>
-				<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+				<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"
+					@reset="resetQuery"
+				>
 					<el-form-item label="手机号" prop="mobilePhone">
 						<el-input placeholder="请输入手机号" v-model="state.queryForm.mobilePhone" />
 					</el-form-item>
-					<el-form-item>
-						<el-button icon="search" type="primary" @click="getDataList">查询</el-button>
-						<el-button icon="Refresh" @click="resetQuery">重置</el-button>
-					</el-form-item>
-				</el-form>
+				</SearchPanel>
 			</el-row>
 			<el-row>
 				<div class="mb8" style="width: 100%">
diff --git a/src/views/hard/components/hard-door-log.vue b/src/views/hard/components/hard-door-log.vue
index 1a9d031..f07aa7d 100644
--- a/src/views/hard/components/hard-door-log.vue
+++ b/src/views/hard/components/hard-door-log.vue
@@ -135,6 +135,7 @@
 <script setup lang="ts" name="hard-door-log">
 import * as hardFlowManager from "/@/api/hard/hard-door-flow"
 import { useMessage } from "/@/hooks/message"
+import { auth, auths, authAll } from '/@/utils/authFunction';
 
 type Props = {
 	orderId?: string
@@ -170,6 +171,10 @@ watch(
 
 const getFlow = async () => {
 	if (!props.orderId) return
+	// 判断是否有"dzc_hardDoorFlow_view"权限
+	if (!auth("dzc_hardDoorFlow_view")) {
+		return
+	}
 	loading.value = true
 	try {
 		const _pa = { orderId: props.orderId }
diff --git a/src/views/hard/components/print-task-dialog.vue b/src/views/hard/components/print-task-dialog.vue
new file mode 100644
index 0000000..d2fb3fe
--- /dev/null
+++ b/src/views/hard/components/print-task-dialog.vue
@@ -0,0 +1,147 @@
+<template>
+	<el-dialog v-model="visible" :title="title" width="520px" draggable :close-on-click-modal="false">
+		<el-form ref="formRef" :model="form" :rules="rules" label-width="110px" v-loading="loading">
+			<el-form-item label="订单号">
+				<el-input :model-value="orderLabel" disabled />
+			</el-form-item>
+			<el-form-item label="凭证类型">
+				<el-tag :type="options.printType === '2' ? 'warning' : 'primary'">
+					{{ options.printType === "2" ? "兑换券" : "发票" }}
+				</el-tag>
+			</el-form-item>
+			<el-form-item v-if="showSourceSelection" label="来源终端" prop="sourceHardId">
+				<el-select v-model="form.sourceHardId" class="w-full" filterable placeholder="请选择已绑定尔印打印机的业务终端">
+					<el-option v-for="source in sources" :key="source.id" :label="source.name" :value="String(source.id)" />
+				</el-select>
+				<div v-if="sources.length === 0" class="mt-1 text-xs text-[var(--el-color-danger)]">
+					该商户没有已绑定尔印打印机的业务终端，请先在设备管理完成绑定。
+				</div>
+			</el-form-item>
+			<el-form-item v-if="requiresReason" label="重打原因" prop="reprintReason">
+				<el-input v-model="form.reprintReason" type="textarea" :rows="3" maxlength="200" show-word-limit
+					placeholder="请填写本次人工重打原因" />
+			</el-form-item>
+			<el-alert v-if="options.action === 'retry'" type="info" :closable="false" show-icon
+				title="重试原任务不会增加打印序号；终端只处理新的重试版本。" />
+		</el-form>
+		<template #footer>
+			<el-button @click="visible = false">取消</el-button>
+			<el-button type="primary" :loading="submitting" :disabled="sourceUnavailable" @click="submit">
+				提交打印任务
+			</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup lang="ts" name="HardPrintTaskDialog">
+import * as hardInvoiceApi from "/@/api/hard/hard-invoice"
+import * as printerApi from "/@/api/hard/hard-printer"
+import { useMessage, useMessageBox } from "/@/hooks/message"
+
+type PrintAction = "create" | "retry" | "reprint"
+
+interface PrintDialogOptions {
+	action: PrintAction
+	printType: "1" | "2"
+	orderId: string | number
+	merchantId?: string | number
+	taskId?: string | number
+	sourceHardId?: string | number | null
+	orderNo?: string
+	printNo?: string | number | null
+}
+
+const emit = defineEmits(["submitted"])
+const visible = ref(false)
+const loading = ref(false)
+const submitting = ref(false)
+const formRef = ref()
+const sources = ref<any[]>([])
+const options = reactive<PrintDialogOptions>({ action: "create", printType: "1", orderId: "" })
+/** 来源设备使用字符串保存，避免选择或自动回填时破坏后端 Long 主键精度。 */
+const form = reactive<{ sourceHardId: printerApi.HardwareId | null; reprintReason: string }>({
+	sourceHardId: null,
+	reprintReason: "",
+})
+
+/** 已打印任务再次出纸必须记录原因；失败任务重试不改变打印次数。 */
+const requiresReason = computed(() => options.action === "reprint" || Boolean(options.printNo && options.action === "create"))
+const showSourceSelection = computed(() => options.action !== "reprint" && !(options.action === "retry" && options.sourceHardId))
+const sourceUnavailable = computed(() => showSourceSelection.value && !loading.value && sources.value.length === 0)
+const orderLabel = computed(() => options.orderNo || String(options.orderId || "--"))
+const title = computed(() => {
+	if (options.action === "retry") return "重试失败打印任务"
+	if (options.action === "reprint") return `重打${options.printType === "2" ? "兑换券" : "发票"}`
+	return `${requiresReason.value ? "再次打印" : "打印"}${options.printType === "2" ? "兑换券" : "发票"}`
+})
+const rules = computed(() => ({
+	sourceHardId: showSourceSelection.value ? [{ required: true, message: "请选择来源业务终端", trigger: "change" }] : [],
+	reprintReason: requiresReason.value ? [{ required: true, message: "请填写重打原因", trigger: "blur" }] : [],
+}))
+
+/** 打开任务弹窗，并根据商户的有效绑定自动选择唯一来源终端。 */
+const open = async (input: PrintDialogOptions) => {
+	Object.assign(options, input)
+	form.sourceHardId = null
+	form.reprintReason = ""
+	sources.value = []
+	visible.value = true
+	await nextTick()
+	formRef.value?.clearValidate?.()
+	if (!showSourceSelection.value) return
+	if (!input.merchantId) {
+		useMessage().error("订单缺少商户信息，无法选择打印终端")
+		return
+	}
+	loading.value = true
+	try {
+		const response: any = await printerApi.listBoundSources(String(input.merchantId))
+		sources.value = response.data || []
+		const preferred = sources.value.find((source) => input.sourceHardId != null
+			&& String(source.id) === String(input.sourceHardId))
+		if (preferred) form.sourceHardId = String(preferred.id)
+		else if (sources.value.length === 1) form.sourceHardId = String(sources.value[0].id)
+	} catch (error: any) {
+		useMessage().error(error?.msg || "读取可用打印终端失败")
+	} finally {
+		loading.value = false
+	}
+}
+
+/** 校验、二次确认并提交任务；响应只代表任务受理，不代表打印机已经出纸。 */
+const submit = async () => {
+	const valid = await formRef.value?.validate?.().catch(() => false)
+	if (valid === false) return
+	if (requiresReason.value) {
+		try {
+			await useMessageBox().confirm(`确认提交第 ${Number(options.printNo || 0) + 1} 次打印？提交后将保留操作原因。`)
+		} catch {
+			return
+		}
+	}
+	submitting.value = true
+	try {
+		if (options.action === "retry") {
+			await hardInvoiceApi.retry({ historyId: options.taskId, sourceHardId: form.sourceHardId || undefined })
+		} else if (options.action === "reprint") {
+			await hardInvoiceApi.reprint({ historyId: options.taskId, reprintReason: form.reprintReason.trim() })
+		} else {
+			await hardInvoiceApi.print({
+				orderId: options.orderId,
+				printType: options.printType,
+				sourceHardId: form.sourceHardId || undefined,
+				reprintReason: form.reprintReason.trim() || undefined,
+			})
+		}
+		visible.value = false
+		useMessage().success("打印任务已提交")
+		emit("submitted")
+	} catch (error: any) {
+		useMessage().error(error?.msg || "打印任务提交失败")
+	} finally {
+		submitting.value = false
+	}
+}
+
+defineExpose({ open })
+</script>
diff --git a/src/views/hard/components/sale-table.vue b/src/views/hard/components/sale-table.vue
index 06c67d0..eb5dc0f 100644
--- a/src/views/hard/components/sale-table.vue
+++ b/src/views/hard/components/sale-table.vue
@@ -72,6 +72,9 @@ const state: BasicTableProps = reactive<BasicTableProps>({
 	pageList: hardAfterSaleApi.pageJoin,
 })
 
+//  table hook
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, tableStyle } = useTable(state)
+
 watch(
 	() => props.orderId,
 	(newVal, oldVal) => {
@@ -82,9 +85,6 @@ watch(
 	{ immediate: true, deep: true },
 )
 
-//  table hook
-const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, tableStyle } = useTable(state)
-
 // 定义查询字典
 const { hard_after_sale_type, hard_after_sale_way } = useDict("hard_after_sale_type", "hard_after_sale_way")
 
diff --git a/src/views/hard/hard-after-sale/index.vue b/src/views/hard/hard-after-sale/index.vue
index 90cd47f..d2d6cde 100644
--- a/src/views/hard/hard-after-sale/index.vue
+++ b/src/views/hard/hard-after-sale/index.vue
@@ -1,78 +1,128 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-				<el-row>
-					<el-form-item style="width: 250px" label="用户" prop="userIds">
-						<select-user v-model="state.queryForm.userIds" />
-					</el-form-item>
-					<el-form-item style="width: 200px" label="退款状态" prop="status">
-						<dict-select v-model="state.queryForm.status" dict-code="hard_sale_status" />
-					</el-form-item>
-					<el-form-item style="width: 300px" label="申请时间" prop="createTimeList">
-						<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD"
-							type="daterange" />
-					</el-form-item>
-					<el-form-item>
-						<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn")
-						}}</el-button>
-						<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
-					</el-form-item>
-				</el-row>
-			</el-form>
-			<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-				:header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
-				@sort-change="sortChangeHandle">
-				<el-table-column type="selection" width="40" align="center" />
-				<el-table-column type="index" label="#" width="40" />
-				<el-table-column prop="username" label="用户" />
-				<el-table-column prop="userAvatar" label="头像">
-					<template #default="{ row }">
-						<preview-image :src="row.userAvatar" />
-					</template>
-				</el-table-column>
-				<el-table-column prop="userMobile" width="120" label="手机号" />
-				<el-table-column label="支付金额" align="center" prop="practicalTotalPrice">
-					<template #default="{ row }">
-						<span class="color-primary">
-							{{ displayPrice(row.orderPayPrice) }}
-						</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="退款金额" align="center">
-					<template #default="{ row }">
-						<span class="color-success">
-							{{ displayPrice(row.refundPrice) }}
-						</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="退款状态" align="center" min-width="120px">
-					<template #default="{ row }">
-						<dict-tag :options="hard_sale_status" :value="row.status" />
-					</template>
-				</el-table-column>
-				<el-table-column label="申请时间" align="center" width="180px" prop="createTime" />
-				<el-table-column label="操作" width="200">
-					<template #default="{ row }">
-						<el-button icon="ShoppingCartFull" text type="primary"
-							@click="shopCarDialogRef.openDialog(row.orderId)">购物车</el-button>
-						<el-button icon="WalletFilled" v-auth="'hard_hardAfterSale_detail_view'" link type="primary"
-							@click="doRefund(row)">
-							退款
-						</el-button>
-						<el-button v-if="false" icon="edit-pen" text type="primary" v-auth="'hard_hardAfterSale_edit'"
-							@click="formDialogRef.openDialog(row.id)">
-							编辑
-						</el-button>
-						<el-button v-if="false" icon="delete" text type="primary" v-auth="'hard_hardAfterSale_del'"
-							@click="handleDelete([row.id])">
-							删除
-						</el-button>
-					</template>
-				</el-table-column>
-			</el-table>
-			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
-				v-bind="state.pagination" />
+			<el-tabs class="after-sale-tabs">
+				<el-tab-pane label="售后订单" name="AFTER_SALE">
+					<div class="flex h-full min-h-0 flex-col">
+						<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" @reset="resetQuery">
+							<el-form-item style="width: 250px" label="退款订单人" prop="orderUserIds">
+								<select-user v-model="state.queryForm.orderUserIds" />
+							</el-form-item>
+							<el-form-item style="width: 250px" label="发起退款人" prop="userIds">
+								<select-user v-model="state.queryForm.userIds" />
+							</el-form-item>
+							<el-form-item style="width: 200px" label="退款状态" prop="status">
+								<dict-select v-model="state.queryForm.status" dict-code="hard_sale_status" />
+							</el-form-item>
+							<el-form-item style="width: 300px" label="订单状态" prop="orderStatusCodes">
+								<dict-select v-model="state.queryForm.orderStatusCodes" dict-code="hard_order_status"
+									multiple />
+							</el-form-item>
+							<el-form-item style="width: 300px" label="申请时间" prop="createTimeList">
+								<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD"
+									type="daterange" />
+							</el-form-item>
+							<template #more>
+								<el-form-item style="width: 250px" label="用餐时间段" prop="hourTypeCodes">
+									<dict-select v-model="state.queryForm.hourTypeCodes" dict-code="daily_menu"
+										multiple />
+								</el-form-item>
+								<el-form-item style="width: 450px" label="预约时间" prop="apptUseDateTimeList">
+									<el-date-picker v-model="state.queryForm.apptUseDateTimeList"
+										value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
+										:default-time="dateRangeDefaultTime" />
+								</el-form-item>
+								<user-identity-query v-model:identity-types="state.queryForm.identityTypes"
+									v-model:student-info="state.queryForm.studentInfo"
+									v-model:teacher-info="state.queryForm.teacherInfo"
+									v-model:has-face="state.queryForm.hasFace" />
+							</template>
+						</SearchPanel>
+						<el-tabs v-if="orderTypeTabs.length" v-model="activeOrderType" class="order-type-tabs shrink-0"
+							@tab-click="handleOrderTypeClick">
+							<el-tab-pane v-for="item in orderTypeTabs" :key="String(item.value)" :label="item.label"
+								:name="item.value" />
+						</el-tabs>
+						<el-table class="min-h-0 flex-1" height="100%" :data="state.dataList" v-loading="state.loading"
+							border :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
+							@selection-change="selectionChangHandle" @sort-change="sortChangeHandle">
+							<el-table-column type="index" label="#" width="60" />
+							<el-table-column label="用户信息" min-width="280">
+								<template #default="{ row }"><user-info-cell :user="row"
+										:show-gender="false" /></template>
+							</el-table-column>
+							<el-table-column label="身份信息" min-width="300">
+								<template #default="{ row }"><user-identity-info :user="row" /></template>
+							</el-table-column>
+							<el-table-column label="支付金额" min-width="120" align="center" prop="practicalTotalPrice">
+								<template #default="{ row }">
+									<span class="color-primary">
+										{{ displayPrice(row.orderPayPrice) }}
+									</span>
+								</template>
+							</el-table-column>
+							<el-table-column min-width="120" label="退款金额" align="center">
+								<template #default="{ row }">
+									<span class="color-success">
+										{{ displayPrice(row.refundPrice) }}
+									</span>
+								</template>
+							</el-table-column>
+							<el-table-column min-width="120" label="退款状态" align="center">
+								<template #default="{ row }">
+									<dict-tag :options="hard_sale_status" :value="row.status" />
+								</template>
+							</el-table-column>
+							<el-table-column label="退款类型" align="center" min-width="240">
+								<template #default>
+									<span>人工审核退款</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="处理方式" align="center" min-width="150">
+								<template #default>
+									<span>人工审核</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="支付时间" align="center" width="250px" prop="orderPayTime">
+								<template #default="{ row }">
+									<div class="status">
+										<span>支付时间</span>
+										<span>{{ row.orderPayTime || "-" }}</span>
+									</div>
+									<div class="status">
+										<span>申请时间</span>
+										<span>{{ row.createTime || "-" }}</span>
+									</div>
+									<div v-if="row.orderApptUseDate" class="status">
+										<span>预约时间</span>
+										<span>{{ row.orderApptUseDate }}</span>
+									</div>
+								</template>
+							</el-table-column>
+							<el-table-column label="操作" fixed="right" width="220">
+								<template #default="{ row }">
+									<div class="flex flex-wrap items-start -mx-1">
+										<div class="w-1/2 h-[30px] flex justify-start items-center">
+											<el-button icon="ShoppingCartFull" text type="primary"
+												@click="shopCarDialogRef.openDialog(row.orderId)">购物车</el-button>
+										</div>
+										<div class="w-1/2 h-[30px] flex justify-start items-center"
+											v-auth="'hard_hardAfterSale_detail_view'">
+											<el-button icon="WalletFilled" link type="primary" @click="doRefund(row)">
+												退款
+											</el-button>
+										</div>
+									</div>
+								</template>
+							</el-table-column>
+						</el-table>
+						<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
+							v-bind="state.pagination" />
+					</div>
+				</el-tab-pane>
+			</el-tabs>
 		</div>
 
 		<!-- 编辑、新增  -->
@@ -86,7 +136,12 @@ import { BasicTableProps, useTable } from "/@/hooks/table"
 import { pageJoin, delObjs } from "/@/api/hard/hard-after-sale"
 import { useMessage, useMessageBox } from "/@/hooks/message"
 import { useDict } from "/@/hooks/dict"
+import { getDicts } from "/@/api/admin/dict"
 import { displayPrice } from "/@/utils/formatMoney"
+import {
+	createEmptyUserIdentityStudentQuery,
+	createEmptyUserIdentityTeacherQuery,
+} from "/@/components/UserIdentityQuery/types"
 
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import("./form.vue"))
@@ -99,6 +154,17 @@ const shopCarDialogRef = ref()
 // 搜索变量
 const queryRef = ref()
 const showSearch = ref(true)
+/** 订单类型页签数据结构，value 为空时表示不限制订单类型。 */
+interface OrderTypeTab {
+	/** 后台订单类型字典展示名称。 */
+	label: string
+	/** 后台订单类型字典编码；null 专用于“全部”页签。 */
+	value: string | null
+}
+/** 当前选中的订单类型字典编码；null 表示查询全部订单类型。 */
+const activeOrderType = ref<string | null>(null)
+/** 表格上方的订单类型页签，字典加载前仍保留“全部”入口。 */
+const orderTypeTabs = ref<OrderTypeTab[]>([{ label: "全部", value: null }])
 // 多选变量
 const selectObjs = ref([]) as any
 const multiple = ref(true)
@@ -106,14 +172,52 @@ const draggableDepTreeRef = ref() // 树组件ref引用
 
 const { push } = useRouter()
 
+/** 日期范围默认覆盖开始日零点至结束日最后一秒，避免遗漏结束日期内的预约订单。 */
+const dateRangeDefaultTime = [new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)]
+
 const state: BasicTableProps = reactive<BasicTableProps>({
-	queryForm: {},
+	queryForm: {
+		orderStatusCodes: [],
+		hourTypeCodes: [],
+		identityTypes: [],
+		studentInfo: createEmptyUserIdentityStudentQuery(),
+		teacherInfo: createEmptyUserIdentityTeacherQuery(),
+		hasFace: "",
+	},
 	pageList: pageJoin,
 })
 
 //  table hook
 const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
 
+/**
+ * 加载订单类型字典并组装表格次级页签。
+ * 请求失败时保留默认“全部”页签，页面仍可继续查询售后订单。
+ */
+const loadOrderTypeTabs = async () => {
+	try {
+		const { data = [] } = await getDicts("hard_order_type")
+		orderTypeTabs.value = [
+			{ label: "全部", value: null },
+			...data.map((item: any) => ({ label: item.label, value: item.value })),
+		]
+	} catch {
+		orderTypeTabs.value = [{ label: "全部", value: null }]
+	}
+}
+
+onMounted(loadOrderTypeTabs)
+
+/**
+ * 切换订单类型后从第一页重新查询售后列表。
+ *
+ * @param pane Element Plus 当前点击的订单类型页签上下文
+ */
+const handleOrderTypeClick = (pane: any) => {
+	state.queryForm.orderType = orderTypeTabs.value[Number(pane.index)]?.value ?? null
+	getDataList()
+}
+
 // 清空搜索条件
 const resetQuery = () => {
 	// 清空搜索条件
@@ -122,7 +226,7 @@ const resetQuery = () => {
 	selectObjs.value = []
 	state.queryForm.deptId = ""
 	state.queryForm.deptIds = []
-	draggableDepTreeRef.value.resetData()
+	draggableDepTreeRef.value?.resetData()
 	getDataList()
 }
 
@@ -146,7 +250,10 @@ const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepT
 }
 
 const doRefund = (row: any) => {
-	push({ path: "/hard/hard-after-sale/order-refund", query: { id: row.orderId, type: "apply" } })
+	push({
+		path: "/hard/hard-after-sale/order-refund",
+		query: { id: row.orderId, type: "apply" },
+	})
 }
 
 // 删除操作
@@ -166,3 +273,56 @@ const handleDelete = async (ids: string[]) => {
 	}
 }
 </script>
+
+<style scoped lang="scss">
+.after-sale-tabs {
+	display: flex;
+	height: 100%;
+	min-height: 0;
+	flex-direction: column;
+
+	:deep(.el-tabs__content),
+	:deep(.el-tab-pane) {
+		display: flex;
+		flex: 1;
+		min-height: 0;
+		flex-direction: column;
+		overflow: hidden;
+	}
+}
+
+.order-type-tabs {
+	:deep(.el-tabs__header) {
+		margin-bottom: 8px;
+	}
+
+	:deep(.el-tabs__content) {
+		display: none;
+	}
+}
+
+.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;
+	}
+
+	span:nth-child(2) {
+		flex: 1;
+		min-width: 50px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+</style>
diff --git a/src/views/hard/hard-after-sale/order-refund.vue b/src/views/hard/hard-after-sale/order-refund.vue
index 6aa3efd..0e1cc63 100644
--- a/src/views/hard/hard-after-sale/order-refund.vue
+++ b/src/views/hard/hard-after-sale/order-refund.vue
@@ -1,115 +1,791 @@
 <template>
 	<div class="layout-padding">
-		<div v-loading="loading" class="layout-padding-auto layout-padding-view" style="overflow: scroll !important">
-			<el-descriptions :column="3" border title="订单信息">
-				<el-descriptions-item :span="3" label="订单号: ">
-					{{ globalData.detail.id }}
-				</el-descriptions-item>
-				<el-descriptions-item label="订单类型: ">
-					<dict-tag :options="hard_order_type" :value="globalData.detail.orderType" />
-				</el-descriptions-item>
-				<el-descriptions-item label="付款方式: ">
-					<dict-tag :options="hard_pay_type" :value="globalData.detail.payType" />
-				</el-descriptions-item>
-				<el-descriptions-item label="订单状态: ">
-					<dict-tag :options="hard_order_status" :value="globalData.detail.orderStatus" />
-				</el-descriptions-item>
-				<el-descriptions-item label="商户: ">
-					<span> {{ globalData.detail.merchantName }}</span>
-				</el-descriptions-item>
-				<el-descriptions-item label="设备名: ">
-					<span> {{ globalData.detail.hardName }}</span>
-				</el-descriptions-item>
-				<el-descriptions-item label="设备类型: ">
-					<dict-tag :options="hard_type" :value="globalData.detail.hardType" />
-				</el-descriptions-item>
-				<el-descriptions-item label="商品总价: ">
-					<span class="color-success">
-						{{ displayPrice(globalData.detail.totalPrice) }}
-					</span>
-				</el-descriptions-item>
-				<el-descriptions-item label="额外支付: ">
-					<span class="color-danger">
-						{{ displayPrice(globalData.detail.extraPrice) }}
-					</span>
-				</el-descriptions-item>
-				<el-descriptions-item label="实际支付: ">
-					<span class="color-primary">
-						{{ displayPrice(globalData.detail.payPrice) }}
-					</span>
-				</el-descriptions-item>
-			</el-descriptions>
-			<el-descriptions :column="1" title="商品信息">
-				<el-descriptions-item labelClassName="no-colon">
-					<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-						:header-cell-style="tableStyle.headerCellStyle" @sort-change="sortChangeHandle">
-						<el-table-column label="商品名" align="center" prop="productName" />
-						<el-table-column label="商品图片" align="center" prop="code">
-							<template #default="{ row }">
-								<preview-image v-if="row.productPic" :src="row.productPic" />
-							</template>
-						</el-table-column>
-						<el-table-column label="商品价格" align="center" prop="ticketId">
-							<template #default="{ row }">
-								<span>{{ displayPrice(row.productPrice) }}</span>
-							</template>
-						</el-table-column>
-						<el-table-column label="商品数量" align="center" prop="productCount" />
-						<el-table-column label="商品总额" align="center" prop="totalPrice">
-							<template #default="{ row }">
-								<span>{{ displayPrice(row.totalPrice) }}</span>
-							</template>
-						</el-table-column>
-					</el-table>
-				</el-descriptions-item>
-			</el-descriptions>
-
-			<!-- 退款状态 -->
-			<el-descriptions v-if="globalData.afterSaleData.id" :column="2" border title="退款状态">
-				<el-descriptions-item :column="1" label="退款状态: ">
-					<dict-tag :options="hard_sale_status" :value="globalData.afterSaleData.status" />
-				</el-descriptions-item>
-				<el-descriptions-item :column="1"
-					v-if="globalData.type == 'apply' && globalData.afterSaleData.status == 10"
-					v-auth="'hard_hardAfterSale_change'" label="操作: " label-class-name="no-colon">
-					<div class="flex justify-evenly">
-						<el-button type="primary" @click="agree"> 同意售后 </el-button>
-						<el-button type="danger" @click="refundRejectRef.openDialog(globalData.detail.id)"> 拒绝售后
-						</el-button>
+		<div ref="detailContainerRef" v-loading="loading"
+			class="layout-padding-auto layout-padding-view order-refund-detail" @scroll.passive="handleDetailScroll">
+			<template v-if="globalData.detail.id">
+				<header class="detail-header">
+					<div class="min-w-0">
+						<div class="mb-2 flex flex-wrap items-center gap-2">
+							<span class="text-sm font-medium text-[var(--el-text-color-secondary)]">订单售后详情</span>
+							<dict-tag :options="hard_order_type" :value="globalData.detail.orderType" />
+							<dict-tag :options="hard_order_status" :value="globalData.detail.orderStatus" />
+							<dict-tag :options="hard_pay_type" :value="globalData.detail.payType" />
+						</div>
+						<div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+							<h1
+								class="m-0 break-all text-xl font-semibold leading-7 text-[var(--el-text-color-primary)]">
+								订单 {{ displayValue(globalData.detail.id) }}
+							</h1>
+							<span v-if="globalData.detail.orderNo"
+								class="break-all text-sm text-[var(--el-text-color-secondary)]">
+								业务单号 {{ globalData.detail.orderNo }}
+							</span>
+						</div>
+						<p class="mb-0 mt-2 text-sm leading-5 text-[var(--el-text-color-secondary)]">
+							{{ orderScenarioLabel }}
+						</p>
 					</div>
-				</el-descriptions-item>
-			</el-descriptions>
+					<div class="flex flex-none flex-wrap items-center justify-end gap-2">
+						<el-button v-if="canReviewAfterSale" type="success" icon="Check" :loading="actionLoading"
+							@click="agree" v-auth="'hard_hardAfterSale_change'">
+							同意售后
+						</el-button>
+						<el-button v-if="canReviewAfterSale" type="danger" icon="Close" :disabled="actionLoading"
+							@click="refundRejectRef?.openDialog(globalData.detail.id)"
+							v-auth="'hard_hardAfterSale_change'">
+							拒绝售后
+						</el-button>
+						<el-tooltip content="刷新详情" placement="top">
+							<el-button circle icon="Refresh" aria-label="刷新订单详情" :loading="loading"
+								@click="getDetail" />
+						</el-tooltip>
+					</div>
+				</header>
 
-			<el-descriptions :column="1" title="售后信息">
-				<el-descriptions-item labelClassName="no-colon">
-					<sale-table :orderId="globalData.detail?.id" />
-				</el-descriptions-item>
-			</el-descriptions>
+				<div class="money-strip">
+					<div class="money-item">
+						<span>商品总价</span>
+						<strong>{{ displayPrice(globalData.detail.totalPrice) }}</strong>
+					</div>
+					<div class="money-item">
+						<span>额外支付</span>
+						<strong>{{ displayPrice(globalData.detail.extraPrice) }}</strong>
+					</div>
+					<div v-if="showDeliveryPrice" class="money-item">
+						<span>配送费</span>
+						<strong>{{ displayPrice(globalData.detail.deliveryPrice) }}</strong>
+					</div>
+					<div class="money-item is-primary">
+						<span>实际支付</span>
+						<strong>{{ displayPrice(globalData.detail.payPrice) }}</strong>
+					</div>
+					<div class="money-item is-danger">
+						<span>累计已退款</span>
+						<strong>{{ displayPrice(globalData.detail.refundPrice) }}</strong>
+					</div>
+					<div class="money-item">
+						<span>订单实际</span>
+						<strong>{{ displayPrice(orderActualPrice) }}</strong>
+					</div>
+				</div>
 
-			<el-descriptions v-if="globalData.afterSaleData.id && false" border title="售后信息">
-				<el-descriptions-item :span="3" label="退款编号: ">
-					{{ globalData.afterSaleData.no }}
-				</el-descriptions-item>
-				<el-descriptions-item label="售后类型: ">
-					<dict-tag :options="hard_after_sale_type" :value="globalData.afterSaleData.type" />
-				</el-descriptions-item>
-				<el-descriptions-item label="售后方式: ">
-					<dict-tag :options="hard_after_sale_way" :value="globalData.afterSaleData.way" />
-				</el-descriptions-item>
-				<el-descriptions-item label="退款金额: ">
-					{{ displayPrice(globalData.afterSaleData.refundPrice) }}
-				</el-descriptions-item>
-				<el-descriptions-item label="退款原因: ">
-					{{ globalData.afterSaleData.applyReason }}
-				</el-descriptions-item>
-				<el-descriptions-item :span="2" label="补充描述: ">
-					{{ globalData.afterSaleData.applyDescription }}
-				</el-descriptions-item>
-				<el-descriptions-item :span="3" label="补充凭证图片: ">
-					<preview-image :src="globalData.afterSaleData.applyPicUrls" />
-				</el-descriptions-item>
-			</el-descriptions>
-			<hard-door-log :orderId="globalData.detail.id" />
+				<div class="detail-body">
+					<aside class="section-nav" aria-label="订单详情分区导航">
+						<div class="section-nav__panel">
+							<div class="section-nav__title">详情导航</div>
+							<nav class="section-nav__list">
+								<button v-for="item in sectionNavItems" :key="item.key" type="button"
+									class="section-nav__item" :class="{ 'is-active': activeSectionKey === item.key }"
+									:aria-current="activeSectionKey === item.key ? 'location' : undefined"
+									@click="scrollToSection(item)">
+									<el-icon aria-hidden="true">
+										<component :is="item.icon" />
+									</el-icon>
+									<span>{{ item.label }}</span>
+								</button>
+							</nav>
+						</div>
+					</aside>
+
+					<main class="detail-main">
+						<section id="section-progress" class="detail-section detail-anchor">
+							<div class="section-heading">
+								<div>
+									<h2>履约进度</h2>
+									<p>按当前订单类型展示支付、核销或配送阶段</p>
+								</div>
+							</div>
+							<div class="workflow-scroll">
+								<div class="workflow-track" :style="workflowTrackStyle" role="list" aria-label="订单履约进度">
+									<div v-for="(stage, index) in lifecycleStages" :key="stage.key"
+										class="workflow-stage" :class="`is-${stage.status}`" role="listitem"
+										:aria-current="stage.status === 'process' ? 'step' : undefined">
+										<div class="workflow-stage__marker" aria-hidden="true">
+											<span class="workflow-stage__line is-before"></span>
+											<span class="workflow-stage__node">
+												<el-icon v-if="stage.status === 'finish' || stage.status === 'success'">
+													<Check />
+												</el-icon>
+												<span v-else>{{ index + 1 }}</span>
+											</span>
+											<span class="workflow-stage__line is-after"></span>
+										</div>
+										<div class="workflow-stage__content">
+											<div class="workflow-stage__title">{{ stage.title }}</div>
+											<div class="workflow-stage__description">{{ stage.description }}</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<el-alert v-if="terminalEvent" class="mt-4" :type="terminalEvent.type"
+								:title="terminalEvent.title" :description="terminalEvent.description" :closable="false"
+								show-icon />
+						</section>
+
+						<section id="section-order" class="detail-section detail-anchor">
+							<div class="section-heading">
+								<div>
+									<h2>订单上下文</h2>
+									<p>下单用户、退款发起人、商户、设备及业务标识</p>
+								</div>
+							</div>
+							<div class="context-grid">
+								<div class="context-group">
+									<h3>人员与归属</h3>
+									<dl class="detail-list">
+										<div class="detail-row">
+											<dt>订单用户</dt>
+											<dd>{{ orderUserLabel }}</dd>
+										</div>
+										<div class="detail-row">
+											<dt>用户 ID</dt>
+											<dd>{{ displayValue(globalData.detail.userId) }}</dd>
+										</div>
+										<div class="detail-row">
+											<dt>用户部门</dt>
+											<dd>{{ displayValue(globalData.detail.userDeptName ||
+												globalData.detail.deptName) }}</dd>
+										</div>
+										<div v-if="globalData.detail.payerUserId" class="detail-row">
+											<dt>付款人 ID</dt>
+											<dd>{{ displayValue(globalData.detail.payerUserId) }}</dd>
+										</div>
+										<div v-if="globalData.detail.isProxyOrder !== undefined && globalData.detail.isProxyOrder !== null"
+											class="detail-row">
+											<dt>是否代订</dt>
+											<dd>{{ formatBoolean(globalData.detail.isProxyOrder) }}</dd>
+										</div>
+										<div v-if="globalData.afterSaleData.id" class="detail-row">
+											<dt>退款发起人</dt>
+											<dd>{{ refundApplicantLabel }}</dd>
+										</div>
+										<div class="detail-row">
+											<dt>商户</dt>
+											<dd>{{ displayNameWithId(globalData.detail.merchantName,
+												globalData.detail.merchantId) }}</dd>
+										</div>
+									</dl>
+								</div>
+
+								<div class="context-group">
+									<h3>设备与标识</h3>
+									<dl class="detail-list">
+										<div class="detail-row">
+											<dt>设备</dt>
+											<dd>{{ displayNameWithId(globalData.detail.hardName,
+												globalData.detail.hardId) }}</dd>
+										</div>
+										<div class="detail-row">
+											<dt>设备类型</dt>
+											<dd>
+												<dict-tag v-if="globalData.detail.hardType || globalData.detail.sysType"
+													:options="hard_type"
+													:value="globalData.detail.hardType || globalData.detail.sysType" />
+												<span v-else>--</span>
+											</dd>
+										</div>
+										<div v-if="globalData.detail.orderNo" class="detail-row">
+											<dt>业务订单号</dt>
+											<dd class="break-all">{{ displayValue(globalData.detail.orderNo) }}</dd>
+										</div>
+										<div v-if="globalData.detail.androidOrderCode" class="detail-row">
+											<dt>终端订单号</dt>
+											<dd class="break-all">{{ displayValue(globalData.detail.androidOrderCode) }}
+											</dd>
+										</div>
+										<div v-if="globalData.detail.orderSourceTypeId" class="detail-row">
+											<dt>来源业务 ID</dt>
+											<dd>{{ displayValue(globalData.detail.orderSourceTypeId) }}</dd>
+										</div>
+										<div v-if="globalData.detail.walletId" class="detail-row">
+											<dt>钱包 ID</dt>
+											<dd>{{ displayValue(globalData.detail.walletId) }}</dd>
+										</div>
+										<div v-if="globalData.detail.walletTypeUniqueCode" class="detail-row">
+											<dt>钱包类型</dt>
+											<dd><dict-tag :options="wallet_type"
+													:value="globalData.detail.walletTypeUniqueCode" /></dd>
+										</div>
+									</dl>
+								</div>
+							</div>
+						</section>
+
+						<section id="section-payment" class="detail-section detail-anchor">
+							<div class="section-heading">
+								<div>
+									<h2>时间与支付</h2>
+									<p>订单关键时间分别记录，支付完成不等于核销完成</p>
+								</div>
+							</div>
+							<div class="context-grid">
+								<div class="context-group">
+									<h3>关键时间</h3>
+									<dl class="detail-list">
+										<div class="detail-row">
+											<dt>创建时间</dt>
+											<dd>{{ formatDateTime(globalData.detail.createTime) }}</dd>
+										</div>
+										<div v-if="globalData.detail.payTime || !['3', '4'].includes(orderTypeCode)"
+											class="detail-row">
+											<dt>支付时间</dt>
+											<dd>{{ formatDateTime(globalData.detail.payTime) }}</dd>
+										</div>
+										<div v-if="globalData.detail.verificationTime || ['2', '3', '4'].includes(orderTypeCode)"
+											class="detail-row">
+											<dt>核销 / 完成时间</dt>
+											<dd>{{ formatDateTime(globalData.detail.verificationTime) }}</dd>
+										</div>
+										<div v-if="globalData.detail.shippedTime" class="detail-row">
+											<dt>发货时间</dt>
+											<dd>{{ formatDateTime(globalData.detail.shippedTime) }}</dd>
+										</div>
+										<div v-if="globalData.detail.deliveredTime" class="detail-row">
+											<dt>收货 / 送达时间</dt>
+											<dd>{{ formatDateTime(globalData.detail.deliveredTime) }}</dd>
+										</div>
+										<div v-if="globalData.detail.refundTime" class="detail-row">
+											<dt>退款时间</dt>
+											<dd>{{ formatDateTime(globalData.detail.refundTime) }}</dd>
+										</div>
+										<div v-if="globalData.detail.applyCancelTime || globalData.detail.unfollowTime"
+											class="detail-row">
+											<dt>取消时间</dt>
+											<dd>{{ formatDateTime(globalData.detail.applyCancelTime ||
+												globalData.detail.unfollowTime) }}</dd>
+										</div>
+									</dl>
+								</div>
+
+								<div class="context-group">
+									<h3>支付与退款</h3>
+									<dl class="detail-list">
+										<div class="detail-row">
+											<dt>支付方式</dt>
+											<dd><dict-tag :options="hard_pay_type" :value="globalData.detail.payType" />
+											</dd>
+										</div>
+										<div v-if="globalData.detail.isOfflineOrder !== undefined && globalData.detail.isOfflineOrder !== null"
+											class="detail-row">
+											<dt>离线订单</dt>
+											<dd>{{ formatYesNo(globalData.detail.isOfflineOrder) }}</dd>
+										</div>
+										<div v-if="globalData.detail.isOfflineOrder === '1' || globalData.detail.isOfflineOrder === 1"
+											class="detail-row">
+											<dt>离线支付结果</dt>
+											<dd>{{ formatYesNo(globalData.detail.offlinePaySuccess) }}</dd>
+										</div>
+										<div v-if="globalData.detail.payRefundId" class="detail-row">
+											<dt>支付退款编号</dt>
+											<dd>{{ displayValue(globalData.detail.payRefundId) }}</dd>
+										</div>
+										<div v-if="globalData.detail.refundStatus !== undefined && globalData.detail.refundStatus !== null"
+											class="detail-row">
+											<dt>支付退款状态</dt>
+											<dd>
+												<dict-tag :options="hard_refund_status"
+													:value="globalData.detail.refundStatus" />
+											</dd>
+										</div>
+										<div v-if="globalData.detail.autoRefundConfigId" class="detail-row">
+											<dt>免审配置 ID</dt>
+											<dd>{{ globalData.detail.autoRefundConfigId }}</dd>
+										</div>
+										<div v-if="globalData.detail.autoRefundRuleType" class="detail-row">
+											<dt>自动退款规则</dt>
+											<dd>{{ displayValue(globalData.detail.autoRefundRuleType) }}</dd>
+										</div>
+										<div v-if="globalData.detail.autoRefundDeadline" class="detail-row">
+											<dt>免审截止时间</dt>
+											<dd>{{ formatDateTime(globalData.detail.autoRefundDeadline) }}</dd>
+										</div>
+									</dl>
+								</div>
+							</div>
+						</section>
+
+						<section v-if="showBusinessScenarioSection" id="section-scenario"
+							class="detail-section detail-anchor">
+							<div class="section-heading">
+								<div>
+									<h2>{{ businessScenarioTitle }}</h2>
+									<p>{{ businessScenarioDescription }}</p>
+								</div>
+							</div>
+							<div class="context-grid">
+								<div v-if="showMealOrReservationContext" class="context-group">
+									<h3>用餐与预约</h3>
+									<dl class="detail-list">
+										<div class="detail-row">
+											<dt>餐段</dt>
+											<dd>
+												<dict-tag
+													v-if="globalData.detail.hourType || globalData.detail.apptHourType"
+													:options="daily_menu"
+													:value="globalData.detail.hourType || globalData.detail.apptHourType" />
+												<span v-else>--</span>
+											</dd>
+										</div>
+										<div class="detail-row">
+											<dt>预约项目</dt>
+											<dd>{{ displayValue(globalData.detail.apptTitle) }}</dd>
+										</div>
+										<div class="detail-row">
+											<dt>预约日期</dt>
+											<dd>{{ displayValue(globalData.detail.apptUseDate) }}</dd>
+										</div>
+										<div class="detail-row">
+											<dt>预约时段</dt>
+											<dd>{{ reservationTimeRange }}</dd>
+										</div>
+										<div v-if="globalData.detail.apptReserveMode" class="detail-row">
+											<dt>预约模式</dt>
+											<dd><dict-tag :options="hard_appt_reserve_mode"
+													:value="globalData.detail.apptReserveMode" /></dd>
+										</div>
+										<div v-if="globalData.detail.reserveCode" class="detail-row">
+											<dt>核销码</dt>
+											<dd class="break-all">{{ globalData.detail.reserveCode }}</dd>
+										</div>
+										<div v-if="globalData.detail.apptId || globalData.detail.apptRuleId"
+											class="detail-row">
+											<dt>预约配置 ID</dt>
+											<dd>
+												{{ displayValue(globalData.detail.apptId) }}
+												<span v-if="globalData.detail.apptRuleId"> / 周期 {{
+													globalData.detail.apptRuleId }}</span>
+											</dd>
+										</div>
+										<div v-if="globalData.detail.expiredRefundUsageEndTime" class="detail-row">
+											<dt>核销有效期至</dt>
+											<dd>{{ formatDateTime(globalData.detail.expiredRefundUsageEndTime) }}</dd>
+										</div>
+										<div v-if="globalData.detail.expiredRefundDeadline" class="detail-row">
+											<dt>过期退款触发</dt>
+											<dd>{{ formatDateTime(globalData.detail.expiredRefundDeadline) }}</dd>
+										</div>
+										<div v-if="globalData.detail.expiredRefundConfigId" class="detail-row">
+											<dt>过期退款配置</dt>
+											<dd>
+												{{ globalData.detail.expiredRefundConfigId }} · 恢复库存
+												{{ formatYesNo(globalData.detail.expiredRefundRestoreInventory) }}
+											</dd>
+										</div>
+									</dl>
+								</div>
+
+								<div v-if="isTakeOutOrder" class="context-group">
+									<h3>外卖履约</h3>
+									<dl class="detail-list">
+										<div class="detail-row">
+											<dt>送达方式</dt>
+											<dd>{{ takeOutDeliveryTypeLabel }}</dd>
+										</div>
+										<div class="detail-row">
+											<dt>期望送达</dt>
+											<dd>{{ expectedDeliveryLabel }}</dd>
+										</div>
+										<div class="detail-row">
+											<dt>配送状态</dt>
+											<dd><dict-tag :options="hard_order_status"
+													:value="globalData.detail.orderStatus" /></dd>
+										</div>
+										<div class="detail-row">
+											<dt>配送费</dt>
+											<dd>{{ displayPrice(globalData.detail.deliveryPrice) }}</dd>
+										</div>
+									</dl>
+								</div>
+
+								<div v-if="isMarketplaceOrder" class="context-group">
+									<h3>商城履约</h3>
+									<dl class="detail-list">
+										<div class="detail-row">
+											<dt>发货时间</dt>
+											<dd>{{ formatDateTime(globalData.detail.shippedTime) }}</dd>
+										</div>
+										<div class="detail-row">
+											<dt>收货时间</dt>
+											<dd>{{ formatDateTime(globalData.detail.deliveredTime) }}</dd>
+										</div>
+									</dl>
+								</div>
+							</div>
+						</section>
+
+						<section v-if="showDeliverySection" id="section-delivery" class="detail-section detail-anchor">
+							<div class="section-heading">
+								<div>
+									<h2>收货与配送</h2>
+									<p>商城和外卖订单的联系人、门牌及物流信息</p>
+								</div>
+							</div>
+							<div class="context-grid">
+								<div class="context-group">
+									<h3>收货信息</h3>
+									<dl class="detail-list">
+										<div class="detail-row">
+											<dt>联系人</dt>
+											<dd>{{ deliveryContactLabel }}</dd>
+										</div>
+										<div class="detail-row">
+											<dt>完整地址</dt>
+											<dd>{{ deliveryAddressLabel }}</dd>
+										</div>
+										<div v-if="globalData.address.inputAddress" class="detail-row">
+											<dt>补充地址</dt>
+											<dd>{{ globalData.address.inputAddress }}</dd>
+										</div>
+										<div v-if="deliveryRoomLabel !== '--'" class="detail-row">
+											<dt>楼栋门牌</dt>
+											<dd>{{ deliveryRoomLabel }}</dd>
+										</div>
+									</dl>
+								</div>
+								<div class="context-group">
+									<h3>配送信息</h3>
+									<dl class="detail-list">
+										<div class="detail-row">
+											<dt>地址快照</dt>
+											<dd>{{ displayValue(globalData.detail.addressName) }}</dd>
+										</div>
+										<div class="detail-row">
+											<dt>发货时间</dt>
+											<dd>{{ formatDateTime(globalData.detail.shippedTime) }}</dd>
+										</div>
+										<div class="detail-row">
+											<dt>收货 / 送达时间</dt>
+											<dd>{{ formatDateTime(globalData.detail.deliveredTime) }}</dd>
+										</div>
+									</dl>
+								</div>
+							</div>
+						</section>
+
+						<section id="section-products" class="detail-section detail-anchor">
+							<div class="section-heading">
+								<div>
+									<h2>商品与退款数量</h2>
+									<p>原购、历史已退款、本次申请及处理后剩余数量对照</p>
+								</div>
+							</div>
+							<el-table :data="refundProductRows" v-loading="state.loading" border
+								:cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle">
+								<el-table-column label="商品" min-width="180" prop="productName" show-overflow-tooltip />
+								<el-table-column label="图片" width="90" align="center">
+									<template #default="{ row }">
+										<preview-image v-if="row.productPic" :src="row.productPic" />
+										<span v-else class="text-[var(--el-text-color-placeholder)]">--</span>
+									</template>
+								</el-table-column>
+								<el-table-column label="单价" width="110" align="center" prop="productPrice">
+									<template #default="{ row }">{{ displayPrice(row.productPrice) }}</template>
+								</el-table-column>
+								<el-table-column label="原购数量" width="110" align="center"
+									prop="displayOriginalProductCount">
+									<template #default="{ row }">{{ formatProductCount(row.displayOriginalProductCount)
+									}}</template>
+								</el-table-column>
+								<el-table-column label="累计已退款" width="120" align="center"
+									prop="displayRefundedProductCount">
+									<template #default="{ row }">
+										<span :class="row.displayRefundedProductCount > 0 ? 'text-[var(--el-color-danger)]' : 'text-[var(--el-text-color-placeholder)]'
+											">
+											{{ formatProductCount(row.displayRefundedProductCount) }}
+										</span>
+									</template>
+								</el-table-column>
+								<el-table-column :label="currentRefundCountColumnLabel" min-width="130" align="center"
+									prop="displayCurrentRefundProductCount">
+									<template #default="{ row }">
+										<span :class="row.displayCurrentRefundProductCount > 0
+											? 'text-[var(--el-color-warning)]'
+											: 'text-[var(--el-text-color-placeholder)]'
+											">
+											{{ formatProductCount(row.displayCurrentRefundProductCount) }}
+										</span>
+									</template>
+								</el-table-column>
+								<el-table-column :label="remainingProductCountColumnLabel" min-width="125"
+									align="center" prop="displayRemainingProductCount">
+									<template #default="{ row }">
+										<span :class="row.displayRemainingProductCount === 0
+											? 'text-[var(--el-text-color-placeholder)]'
+											: 'text-[var(--el-color-success)]'
+											">
+											{{ formatProductCount(row.displayRemainingProductCount) }}
+										</span>
+									</template>
+								</el-table-column>
+								<el-table-column label="原购总额" width="120" align="center" prop="totalPrice">
+									<template #default="{ row }">{{ displayPrice(row.totalPrice) }}</template>
+								</el-table-column>
+								<template #empty>
+									<el-empty :image-size="72" :description="productEmptyDescription" />
+								</template>
+							</el-table>
+						</section>
+
+						<section v-if="showPrintRecordSection" id="section-print-records"
+							class="detail-section detail-anchor">
+							<div class="section-heading">
+								<div>
+									<h2>打印与核销凭证</h2>
+									<p>该订单关联的发票、核销兑换券及终端打印结果</p>
+								</div>
+								<div class="flex flex-wrap items-center gap-2">
+									<el-tag type="info" effect="plain">共 {{ invoiceRecords.length }} 条</el-tag>
+									<el-button link type="primary" icon="Refresh" :loading="invoiceLoading"
+										@click="reloadInvoiceRecords">
+										刷新记录
+									</el-button>
+								</div>
+							</div>
+							<el-alert v-if="invoiceLoadError" type="error" title="打印记录加载失败"
+								:description="invoiceLoadError" :closable="false" show-icon />
+							<el-table v-else v-loading="invoiceLoading" :data="invoiceRecords" row-key="id" border stripe
+								:cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle">
+								<el-table-column label="凭证" min-width="150">
+									<template #default="{ row }">
+										<div class="space-y-1">
+											<dict-tag :options="hard_print_type" :value="row.printType || '1'" />
+											<div class="text-xs leading-5 text-[var(--el-text-color-secondary)]">
+												第 {{ row.printNo || 1 }} 次打印
+											</div>
+										</div>
+									</template>
+								</el-table-column>
+								<el-table-column label="凭证图片" width="100" align="center">
+									<template #default="{ row }">
+										<preview-image v-if="row.pic" :src="row.pic" />
+										<span v-else class="text-xs text-[var(--el-text-color-placeholder)]">尚未生成</span>
+									</template>
+								</el-table-column>
+								<el-table-column label="任务状态" min-width="170">
+									<template #default="{ row }">
+										<div class="space-y-1 text-xs leading-5">
+											<div><dict-tag :options="hard_print_status" :value="row.status" /></div>
+											<div class="text-[var(--el-text-color-secondary)]">
+												终端尝试 {{ row.attemptCount || 0 }} 次 · 重试版本 {{ row.retryVersion || 0 }}
+											</div>
+										</div>
+									</template>
+								</el-table-column>
+								<el-table-column label="设备" min-width="230">
+									<template #default="{ row }">
+										<dl class="m-0 space-y-1 text-xs leading-5">
+											<div class="grid grid-cols-[68px_minmax(0,1fr)] gap-2">
+												<dt class="text-[var(--el-text-color-secondary)]">来源终端</dt>
+												<dd class="m-0 break-words text-[var(--el-text-color-primary)]">
+													{{ displayNameWithId(row.hardName, row.hardId) }}
+												</dd>
+											</div>
+											<div class="grid grid-cols-[68px_minmax(0,1fr)] gap-2">
+												<dt class="text-[var(--el-text-color-secondary)]">目标打印机</dt>
+												<dd class="m-0 break-words text-[var(--el-text-color-primary)]">
+													{{ displayNameWithId(row.printerHardName, row.printerHardId) }}
+												</dd>
+											</div>
+										</dl>
+									</template>
+								</el-table-column>
+								<el-table-column label="任务时间" min-width="190">
+									<template #default="{ row }">
+										<dl class="m-0 space-y-1 text-xs leading-5">
+											<div class="grid grid-cols-[36px_minmax(0,1fr)] gap-2">
+												<dt class="text-[var(--el-text-color-secondary)]">创建</dt>
+												<dd class="m-0 text-[var(--el-text-color-primary)]">{{ formatDateTime(row.createTime) }}</dd>
+											</div>
+											<div class="grid grid-cols-[36px_minmax(0,1fr)] gap-2">
+												<dt class="text-[var(--el-text-color-secondary)]">完成</dt>
+												<dd class="m-0 text-[var(--el-text-color-primary)]">{{ formatDateTime(row.printedAt) }}</dd>
+											</div>
+										</dl>
+									</template>
+								</el-table-column>
+								<el-table-column label="异常与重打" min-width="260">
+									<template #default="{ row }">
+										<dl class="m-0 space-y-1 text-xs leading-5">
+											<div class="grid grid-cols-[60px_minmax(0,1fr)] gap-2">
+												<dt class="text-[var(--el-text-color-secondary)]">失败阶段</dt>
+												<dd class="m-0 break-words text-[var(--el-text-color-primary)]">
+													{{ getFailureStageName(row.failureStage) }}
+												</dd>
+											</div>
+											<div class="grid grid-cols-[60px_minmax(0,1fr)] gap-2">
+												<dt class="text-[var(--el-text-color-secondary)]">错误原因</dt>
+												<dd class="m-0 break-words text-[var(--el-color-danger)]">
+													{{ displayValue(row.lastError) }}
+												</dd>
+											</div>
+											<div class="grid grid-cols-[60px_minmax(0,1fr)] gap-2">
+												<dt class="text-[var(--el-text-color-secondary)]">重打原因</dt>
+												<dd class="m-0 break-words text-[var(--el-text-color-primary)]">
+													{{ displayValue(row.reprintReason) }}
+												</dd>
+											</div>
+										</dl>
+									</template>
+								</el-table-column>
+								<template #empty>
+									<el-empty :image-size="72" description="该订单暂无发票或核销兑换券打印记录" />
+								</template>
+							</el-table>
+						</section>
+
+						<section v-if="globalData.afterSaleData.id" id="section-refund"
+							class="detail-section detail-anchor">
+							<div class="section-heading">
+								<div>
+									<h2>当前售后申请</h2>
+									<p>退款发起信息、审核状态与退款处理结果</p>
+								</div>
+								<div class="flex flex-wrap items-center gap-2">
+									<dict-tag :options="hard_sale_status" :value="globalData.afterSaleData.status" />
+									<el-tag v-if="globalData.afterSaleData.autoRefundTaskStatus"
+										:type="getAutoRefundTaskStatus(globalData.afterSaleData.autoRefundTaskStatus).type">
+										自动退款{{
+											getAutoRefundTaskStatus(globalData.afterSaleData.autoRefundTaskStatus).label }}
+									</el-tag>
+								</div>
+							</div>
+							<div class="context-grid">
+								<div class="context-group">
+									<h3>申请信息</h3>
+									<dl class="detail-list">
+										<div class="detail-row">
+											<dt>售后编号</dt>
+											<dd>{{ displayValue(globalData.afterSaleData.no ||
+												globalData.afterSaleData.id) }}</dd>
+										</div>
+										<div class="detail-row">
+											<dt>发起人</dt>
+											<dd>{{ refundApplicantLabel }}</dd>
+										</div>
+										<div class="detail-row">
+											<dt>售后类型</dt>
+											<dd><dict-tag :options="hard_after_sale_type"
+													:value="globalData.afterSaleData.type" /></dd>
+										</div>
+										<div class="detail-row">
+											<dt>售后方式</dt>
+											<dd><dict-tag :options="hard_after_sale_way"
+													:value="globalData.afterSaleData.way" /></dd>
+										</div>
+										<div class="detail-row">
+											<dt>申请退款金额</dt>
+											<dd class="font-semibold text-[var(--el-color-danger)]">
+												{{ displayPrice(globalData.afterSaleData.refundPrice) }}
+											</dd>
+										</div>
+										<div class="detail-row">
+											<dt>申请时间</dt>
+											<dd>{{ formatDateTime(globalData.afterSaleData.createTime) }}</dd>
+										</div>
+									</dl>
+								</div>
+								<div class="context-group">
+									<h3>原因与审核</h3>
+									<dl class="detail-list">
+										<div class="detail-row">
+											<dt>退款原因</dt>
+											<dd>{{ displayValue(globalData.afterSaleData.applyReason) }}</dd>
+										</div>
+										<div class="detail-row">
+											<dt>补充描述</dt>
+											<dd>{{ displayValue(globalData.afterSaleData.applyDescription) }}</dd>
+										</div>
+										<div class="detail-row">
+											<dt>审核时间</dt>
+											<dd>{{ formatDateTime(globalData.afterSaleData.auditTime) }}</dd>
+										</div>
+										<div class="detail-row">
+											<dt>审批备注</dt>
+											<dd>{{ displayValue(globalData.afterSaleData.auditReason) }}</dd>
+										</div>
+										<div v-if="globalData.afterSaleData.refundTime" class="detail-row">
+											<dt>退款完成时间</dt>
+											<dd>{{ formatDateTime(globalData.afterSaleData.refundTime) }}</dd>
+										</div>
+										<div v-if="globalData.afterSaleData.payRefundId" class="detail-row">
+											<dt>支付退款编号</dt>
+											<dd>{{ globalData.afterSaleData.payRefundId }}</dd>
+										</div>
+									</dl>
+								</div>
+							</div>
+							<div v-if="globalData.afterSaleData.applyPicUrls"
+								class="mt-4 border-t border-[var(--el-border-color-lighter)] pt-4">
+								<div class="mb-3 text-sm font-medium text-[var(--el-text-color-regular)]">补充凭证</div>
+								<preview-image :src="globalData.afterSaleData.applyPicUrls" />
+							</div>
+						</section>
+
+						<section v-if="hasFaceEvidence" id="section-evidence" class="detail-section detail-anchor">
+							<div class="section-heading">
+								<div>
+									<h2>识别凭证</h2>
+									<p>订单采集的人脸参考图、现场图及识别结果</p>
+								</div>
+							</div>
+							<div class="grid w-full grid-cols-[repeat(auto-fit,minmax(min(320px,100%),1fr))] gap-4">
+								<div v-for="evidence in faceEvidence" :key="evidence.id"
+									class="flex min-h-[180px] gap-4 rounded-[6px] border border-[var(--el-border-color-light)] bg-[var(--el-fill-color-blank)] p-3">
+									<div
+										class="flex h-[156px] w-40 flex-none items-center justify-center overflow-hidden rounded bg-[var(--el-fill-color-light)]">
+										<el-image
+											v-if="evidence.status === 'AVAILABLE' && evidence.imageUrl && !failedEvidenceImages.has(evidence.id)"
+											class="h-full w-full" :src="evidenceImageUrl(evidence.imageUrl)"
+											:preview-src-list="[evidenceImageUrl(evidence.imageUrl)]" fit="contain"
+											preview-teleported loading="lazy"
+											@error="markEvidenceImageFailed(evidence.id)" />
+										<span v-else-if="evidence.status === 'PENDING'"
+											class="p-3 text-center text-sm text-[var(--el-text-color-secondary)]">等待补传</span>
+										<span v-else-if="evidence.status === 'UNAVAILABLE'"
+											class="p-3 text-center text-sm text-[var(--el-color-danger)]">图片永久缺失</span>
+										<span
+											v-else-if="evidence.status === 'AVAILABLE' && failedEvidenceImages.has(evidence.id)"
+											class="p-3 text-center text-sm text-[var(--el-color-danger)]">图片加载失败</span>
+										<span v-else-if="evidence.status === 'AVAILABLE'"
+											class="p-3 text-center text-sm text-[var(--el-color-danger)]">图片地址缺失</span>
+										<span v-else
+											class="p-3 text-center text-sm text-[var(--el-color-danger)]">证据状态异常</span>
+									</div>
+									<div
+										class="flex min-w-0 flex-col gap-1.5 text-sm leading-5 text-[var(--el-text-color-secondary)]">
+										<div class="mb-0.5 font-semibold text-[var(--el-text-color-primary)]">{{
+											evidenceRoleLabel(evidence) }}
+										</div>
+										<div>状态：{{ evidenceStatusLabel(evidence.status) }}</div>
+										<div>采集时间：{{ formatDateTime(evidence.capturedAt) }}</div>
+										<div>相似度：{{ formatSimilarity(evidence.similarity) }}</div>
+										<div>设备：{{ globalData.detail.hardName || evidence.hardId || "--" }}</div>
+										<div v-if="evidence.failureReason"
+											class="break-words text-[var(--el-color-danger)]">{{
+												evidence.failureReason }}</div>
+									</div>
+								</div>
+							</div>
+						</section>
+
+						<section id="section-history" class="detail-section detail-anchor">
+							<div class="section-heading">
+								<div>
+									<h2>售后记录</h2>
+									<p>同一订单下的全部售后单与处理日志</p>
+								</div>
+							</div>
+							<sale-table :order-id="globalData.detail.id" />
+						</section>
+
+						<section v-if="isSmartCabinetOrder" id="section-cabinet" class="detail-section detail-anchor">
+							<hard-door-log v-auth="'dzc_hardDoorFlow_view'" :order-id="String(globalData.detail.id)" />
+						</section>
+					</main>
+				</div>
+			</template>
+
+			<el-empty v-else-if="!loading" description="未找到订单详情" />
 		</div>
 
 		<refund-reject-form ref="refundRejectRef" @refresh="getDetail" />
@@ -123,36 +799,401 @@ import { useDict } from "/@/hooks/dict"
 import * as hardOrder from "/@/api/hard/hard-order"
 import * as hardCar from "/@/api/hard/hard-car"
 import * as hardAfterSaleApi from "/@/api/hard/hard-after-sale"
+import * as hardInvoiceApi from "/@/api/hard/hard-invoice"
 import { displayPrice } from "/@/utils/formatMoney"
-import { ElLoading } from "element-plus"
+import { getAutoRefundTaskStatus } from "/@/constants/autoRefund"
+import { Box, Calendar, Check, CreditCard, Document, List, Location, Money, Picture, Printer, ShoppingCart, Timer } from "@element-plus/icons-vue"
+import type { Component } from "vue"
+import dayjs from "dayjs"
 
-// 引入组件
+/** 拒绝售后弹窗，保留原有审核备注与权限流程。 */
 const RefundRejectForm = defineAsyncComponent(() => import("./refund-reject.vue"))
+/** 智能柜订单流程日志，仅设备类型为生鲜柜时加载。 */
 const HardDoorLog = defineAsyncComponent(() => import("../components/hard-door-log.vue"))
+/** 当前订单的全部售后记录与日志入口。 */
 const SaleTable = defineAsyncComponent(() => import("../components/sale-table.vue"))
 
-// 定义查询字典
-const { hard_pay_type, hard_order_type, hard_order_status, hard_after_sale_way, hard_after_sale_type, hard_sale_status, hard_type } =
-	useDict(
-		"hard_pay_type",
-		"hard_order_type",
-		"hard_order_status",
-		"hard_after_sale_way",
-		"hard_after_sale_type",
-		"hard_sale_status",
-		"hard_type",
-	)
+/** 售后状态 10 表示当前申请仍等待人工审核，属于既有前后端协议编码。 */
+const AFTER_SALE_APPLY_STATUS = "10"
+/** 设备类型 4 表示生鲜智能柜，只有该类型存在开门与识别流程日志。 */
+const SMART_CABINET_HARD_TYPE = "4"
+/** 消费机支付订单类型编码，后端允许该类型没有购物车明细。 */
+const SIMPLE_PAYMENT_ORDER_TYPE = "9"
+/** 商城订单类型编码，使用发货、收货履约状态。 */
+const MARKETPLACE_ORDER_TYPE = "7"
+/** 外卖订单类型编码，使用接单、配送履约状态。 */
+const TAKE_OUT_ORDER_TYPE = "10"
+/** 线上预定订单类型编码，支付后仍需单独核销。 */
+const RESERVATION_ORDER_TYPE = "2"
+/** 订单创建或离线创建但尚未完成支付的状态编码。 */
+const UNPAID_STATUS_CODES = ["1", "2"]
+/** 已进入支付后流程的状态编码，用于在历史时间缺失时按真实状态表达进度。 */
+const PAID_STATUS_CODES = ["5", "6", "10", "20", "100", "110", "200", "210", "220"]
 
-const { query } = useRoute()
-const refundRejectRef = ref()
-const loading = ref(false)
-const globalData = reactive<any>({
+/** 页面涉及的订单字段；所有时间均来自订单详情接口，金额单位均为分。 */
+interface OrderDetailView extends hardOrder.HardOrderDetail {
+	/** 业务订单号；部分线下历史订单为空。 */
+	orderNo?: string
+	/** 实际订餐或购买用户主键；不记名用户常为 -1。 */
+	userId?: string | number
+	/** 用户名称。 */
+	username?: string
+	/** 用户历史手机号字段。 */
+	userMobile?: string
+	/** 用户标准手机号字段。 */
+	phone?: string
+	/** 用户下单时所属部门名称。 */
+	userDeptName?: string
+	/** 订单归属部门名称。 */
+	deptName?: string
+	/** 付款人主键；代订时可能与 userId 不同。 */
+	payerUserId?: string | number
+	/** 是否由他人代订。 */
+	isProxyOrder?: boolean | string | number
+	/** 商户主键。 */
+	merchantId?: string | number
+	/** 商户名称。 */
+	merchantName?: string
+	/** 设备主键。 */
+	hardId?: string | number
+	/** 设备名称。 */
+	hardName?: string
+	/** 当前设备类型编码。 */
+	hardType?: string
+	/** 下单时记录的设备系统类型编码。 */
+	sysType?: string
+	/** 钱包主键。 */
+	walletId?: string | number
+	/** 钱包类型稳定编码。 */
+	walletTypeUniqueCode?: string
+	/** 订单类型稳定编码。 */
+	orderType?: string
+	/** 订单状态稳定编码。 */
+	orderStatus?: string
+	/** 支付方式稳定编码。 */
+	payType?: string
+	/** 订单餐段字典编码。 */
+	hourType?: string
+	/** 预约配置主键。 */
+	apptId?: string | number
+	/** 周期预约规则主键。 */
+	apptRuleId?: string | number
+	/** 预约使用日期。 */
+	apptUseDate?: string
+	/** 预约标题。 */
+	apptTitle?: string
+	/** 预约配置餐段编码。 */
+	apptHourType?: string
+	/** 预约模式稳定编码，例如固定时段或周期预约。 */
+	apptReserveMode?: string
+	/** 预约开始时间。 */
+	apptStartTime?: string
+	/** 预约结束时间。 */
+	apptEndTime?: string
+	/** 预约核销码。 */
+	reserveCode?: string
+	/** 商品总价，单位为分。 */
+	totalPrice?: number
+	/** 额外支付金额，单位为分。 */
+	extraPrice?: number
+	/** 配送费，单位为分。 */
+	deliveryPrice?: number
+	/** 实际支付金额，单位为分。 */
+	payPrice?: number
+	/** 累计退款金额，单位为分。 */
+	refundPrice?: number
+	/** 订单创建时间。 */
+	createTime?: string
+	/** 支付完成时间。 */
+	payTime?: string
+	/** 核销完成时间。 */
+	verificationTime?: string
+	/** 退款完成时间。 */
+	refundTime?: string
+	/** 退款订单取消时间。 */
+	applyCancelTime?: string
+	/** 智能柜订单取消时间。 */
+	unfollowTime?: string
+	/** 商城发货时间。 */
+	shippedTime?: string
+	/** 商城收货或外卖送达时间。 */
+	deliveredTime?: string
+	/** 终端侧唯一订单号。 */
+	androidOrderCode?: string
+	/** 外部订单或渠道来源主键。 */
+	orderSourceTypeId?: string | number
+	/** 是否为离线订单，1 是、0 否。 */
+	isOfflineOrder?: string | number
+	/** 离线订单自动支付是否成功，1 是、0 否。 */
+	offlinePaySuccess?: string | number
+	/** 支付系统退款单主键。 */
+	payRefundId?: string | number
+	/** 支付退款状态编码。 */
+	refundStatus?: string
+	/** 收货地址主键。 */
+	addressId?: string | number
+	/** 下单时保存的收货地址快照。 */
+	addressName?: string
+	/** 自动退款规则快照。 */
+	autoRefundRuleType?: string
+	/** 下单时命中的自动退款配置主键快照。 */
+	autoRefundConfigId?: string | number
+	/** 自动退款免审截止时间。 */
+	autoRefundDeadline?: string
+	/** 过期预约退款配置主键快照。 */
+	expiredRefundConfigId?: string | number
+	/** 预约订单核销有效期结束时间快照。 */
+	expiredRefundUsageEndTime?: string
+	/** 过期预约自动退款触发时间快照。 */
+	expiredRefundDeadline?: string
+	/** 过期自动退款是否恢复库存，1 是、0 否。 */
+	expiredRefundRestoreInventory?: string | number
+	/** 外卖期望送达配置；非外卖或历史未记录时为空。 */
+	takeOutAppt?: hardOrder.HardTakeOutAppointment
+	/** 订单详情中的长期识别证据。 */
+	evidenceImages?: hardOrder.HardOrderEvidenceImage[]
+}
+
+/** 当前订单最近一笔售后详情，金额单位为分。 */
+interface AfterSaleDetail {
+	/** 售后主键。 */
+	id?: string | number
+	/** 售后业务编号。 */
+	no?: string
+	/** 售后类型编码。 */
+	type?: string
+	/** 售后状态编码。 */
+	status?: string
+	/** 售后处理方式编码。 */
+	way?: string
+	/** 发起退款的用户主键。 */
+	userId?: string | number
+	/** 发起退款的用户名称。 */
+	username?: string
+	/** 发起退款用户的历史手机号字段。 */
+	userMobile?: string
+	/** 发起退款用户的标准手机号字段。 */
+	phone?: string
+	/** 退款原因。 */
+	applyReason?: string
+	/** 退款补充说明。 */
+	applyDescription?: string
+	/** 退款补充凭证地址。 */
+	applyPicUrls?: string
+	/** 申请退款金额，单位为分。 */
+	refundPrice?: number
+	/** 申请时间。 */
+	createTime?: string
+	/** 审核时间。 */
+	auditTime?: string
+	/** 审批备注。 */
+	auditReason?: string
+	/** 支付退款单主键。 */
+	payRefundId?: string | number
+	/** 退款完成时间。 */
+	refundTime?: string
+	/** 自动退款任务状态；为空表示人工审核。 */
+	autoRefundTaskStatus?: string
+	/** 当前售后申请保存的商品快照。 */
+	carList?: any[]
+}
+
+/** 订单收货地址详情；userMoblie 为后端当前保留的历史拼写。 */
+interface OrderAddressDetail {
+	/** 地址主键。 */
+	id?: string | number
+	/** 省级名称。 */
+	province?: string
+	/** 市级名称。 */
+	city?: string
+	/** 区县名称。 */
+	district?: string
+	/** 街道名称。 */
+	street?: string
+	/** 地图解析后的完整地址。 */
+	fullAddress?: string
+	/** 用户手工补充的详细地址。 */
+	inputAddress?: string
+	/** 楼栋名称。 */
+	buildingName?: string
+	/** 单元名称。 */
+	unitName?: string
+	/** 楼层。 */
+	floorNo?: string
+	/** 房间名称或门牌。 */
+	roomName?: string
+	/** 收货联系人。 */
+	username?: string
+	/** 收货联系电话，字段名沿用后端历史契约。 */
+	userMoblie?: string
+}
+
+/** 售后详情页展示的打印任务；字段来自 hard_invoice 分页复杂查询。 */
+interface HardInvoiceRecord {
+	/** 打印任务主键。 */
+	id?: string | number
+	/** 关联订单主键，用于防止分页接口异常返回其他订单记录。 */
+	orderId?: string | number
+	/** 来源食堂或超市终端主键；历史记录可能为空。 */
+	hardId?: string | number
+	/** 来源食堂或超市终端名称。 */
+	hardName?: string
+	/** 绑定的尔印打印机资产主键；历史记录或绑定失败任务可能为空。 */
+	printerHardId?: string | number
+	/** 绑定的尔印打印机资产名称。 */
+	printerHardName?: string
+	/** 凭证类型编码：1 为发票，2 为核销兑换券。 */
+	printType?: string
+	/** 同一订单、同一凭证类型下的打印序号。 */
+	printNo?: number
+	/** 当前人工重试版本，MQTT 和终端使用该值识别过期消息。 */
+	retryVersion?: number
+	/** 终端已执行的 USB 打印尝试次数。 */
+	attemptCount?: number
+	/** 打印任务状态编码，沿用 hard_print_status 字典。 */
+	status?: string
+	/** 失败阶段稳定编码，例如绑定、图片生成、MQTT 下发或终端打印。 */
+	failureStage?: string
+	/** 最近一次失败原因。 */
+	lastError?: string
+	/** 打印完成时间。 */
+	printedAt?: string
+	/** 人工重打原因；首次打印和失败重试为空。 */
+	reprintReason?: string
+	/** 后端生成的打印凭证图片地址。 */
+	pic?: string
+	/** 打印任务创建时间。 */
+	createTime?: string
+}
+
+/** 页面聚合状态，分别保存订单、当前售后和收货地址。 */
+interface OrderRefundPageData {
+	/** 路由场景：apply 表示审核入口，view 表示只读详情。 */
+	type: string
+	/** 订单详情接口返回数据。 */
+	detail: OrderDetailView
+	/** 最近一笔售后详情。 */
+	afterSaleData: AfterSaleDetail
+	/** 订单收货地址详情。 */
+	address: OrderAddressDetail
+}
+
+/** 履约步骤的 Element Plus 展示状态。 */
+type LifecycleStageStatus = "wait" | "process" | "finish" | "error" | "success"
+
+/** 单个订单履约步骤。 */
+interface LifecycleStage {
+	/** 当前页面内稳定的步骤键。 */
+	key: string
+	/** 步骤名称。 */
+	title: string
+	/** 时间或当前状态说明。 */
+	description: string
+	/** Element Plus 步骤状态。 */
+	status: LifecycleStageStatus
+}
+
+/** 右侧详情导航项；目标区仅在当前订单确实存在时加入。 */
+interface SectionNavItem {
+	/** 页面内稳定键，同时用于记录当前高亮项。 */
+	key: string
+	/** 分区标题。 */
+	label: string
+	/** 对应 section 元素 ID。 */
+	targetId: string
+	/** Element Plus 图标组件。 */
+	icon: Component
+}
+
+/** 退款或取消等终止事件提示。 */
+interface TerminalEvent {
+	/** Element Plus 提示类型。 */
+	type: "success" | "warning" | "info" | "error"
+	/** 事件标题。 */
+	title: string
+	/** 事件金额及时间说明。 */
+	description: string
+}
+
+/** 退款拒绝弹窗公开能力。 */
+interface RefundRejectExpose {
+	/**
+	 * 按订单主键打开拒绝售后弹窗。
+	 *
+	 * @param orderId Hardware 订单主键
+	 */
+	openDialog(orderId: string | number): void
+}
+
+/** 页面所需字典，统一沿用现有后台字典配置和多语言标签。 */
+const {
+	hard_pay_type,
+	hard_order_type,
+	hard_order_status,
+	hard_after_sale_way,
+	hard_after_sale_type,
+	hard_sale_status,
+	hard_type,
+	hard_refund_status,
+	hard_print_status,
+	hard_print_type,
+	daily_menu,
+	wallet_type,
+	hard_appt_reserve_mode,
+} = useDict(
+	"hard_pay_type",
+	"hard_order_type",
+	"hard_order_status",
+	"hard_after_sale_way",
+	"hard_after_sale_type",
+	"hard_sale_status",
+	"hard_type",
+	"hard_refund_status",
+	"hard_print_status",
+	"hard_print_type",
+	"daily_menu",
+	"wallet_type",
+	"hard_appt_reserve_mode",
+)
+
+/** 当前路由提供订单主键和审核/查看场景。 */
+const route = useRoute()
+/** 统一消息与确认框能力。 */
+const message = useMessage()
+/** 拒绝售后弹窗引用。 */
+const refundRejectRef = ref<RefundRejectExpose>()
+/** 详情页自身是滚动容器，导航定位和高亮均相对此元素计算。 */
+const detailContainerRef = ref<HTMLElement>()
+/** 整页订单详情加载状态；首次渲染即开启，避免详情请求前短暂闪现空状态。 */
+const loading = ref(true)
+/** 同意售后提交互斥状态。 */
+const actionLoading = ref(false)
+/** 当前会话中加载失败的人脸凭证主键集合。 */
+const failedEvidenceImages = ref(new Set<string | number>())
+/** 当前订单关联的发票与核销兑换券打印任务。 */
+const invoiceRecords = ref<HardInvoiceRecord[]>([])
+/** 打印记录独立加载状态，不阻断售后详情中的其他数据。 */
+const invoiceLoading = ref(false)
+/** 打印记录加载失败的可恢复提示；空字符串表示最近一次查询成功。 */
+const invoiceLoadError = ref("")
+/** 当前滚动位置对应的详情分区。 */
+const activeSectionKey = ref("progress")
+/** 滚动事件使用动画帧节流，避免长页面滚动时重复触发布局读取。 */
+let sectionScrollFrame: number | null = null
+/** 点击锚点的平滑滚动期间保留用户选择，避免页面底部的短分区抢走高亮。 */
+let navSelectionLockUntil = 0
+/** 打印记录请求版本；路由快速切换时阻止旧订单结果覆盖新订单。 */
+let invoiceRequestVersion = 0
+
+/** 页面订单、售后与地址聚合数据。 */
+const globalData = reactive<OrderRefundPageData>({
 	type: "",
-	detail: {},
+	detail: {} as OrderDetailView,
 	afterSaleData: {},
-	log: [],
+	address: {},
 })
 
+/** 原订单购物车表格状态，由通用表格 Hook 负责请求与加载状态。 */
 const state: BasicTableProps = reactive<BasicTableProps>({
 	createdIsNeed: false,
 	queryForm: {},
@@ -162,127 +1203,1220 @@ const state: BasicTableProps = reactive<BasicTableProps>({
 	pageList: hardCar.getCarByOrderId,
 })
 
-//  table hook
-const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
+/** 商品查询和项目统一表格样式。 */
+const { getDataList, tableStyle } = useTable(state)
 
-onMounted(async () => {
-	const type = query.type as unknown as any
-	if (type) {
-		globalData.type = type
-	}
-	await getDetail()
+/** 当前订单类型协议编码。 */
+const orderTypeCode = computed(() => String(globalData.detail.orderType || ""))
+/** 当前订单状态协议编码。 */
+const orderStatusCode = computed(() => String(globalData.detail.orderStatus || ""))
+/** 是否为商城订单。 */
+const isMarketplaceOrder = computed(() => orderTypeCode.value === MARKETPLACE_ORDER_TYPE)
+/** 是否为外卖订单。 */
+const isTakeOutOrder = computed(() => orderTypeCode.value === TAKE_OUT_ORDER_TYPE)
+/** 是否为线上预约订单。 */
+const isReservationOrder = computed(() => orderTypeCode.value === RESERVATION_ORDER_TYPE)
+/** 预约订单始终展示凭证区；其他订单存在打印记录或查询错误时展示，以保留故障恢复入口。 */
+const showPrintRecordSection = computed(() => isReservationOrder.value || invoiceRecords.value.length > 0 || Boolean(invoiceLoadError.value))
+/** 是否为没有购物车明细的消费机简单支付订单。 */
+const isSimplePaymentOrder = computed(() => orderTypeCode.value === SIMPLE_PAYMENT_ORDER_TYPE)
+/** 是否为存在智能柜开门日志的生鲜柜设备订单。 */
+const isSmartCabinetOrder = computed(
+	() => String(globalData.detail.hardType || globalData.detail.sysType || "") === SMART_CABINET_HARD_TYPE,
+)
+
+/** 当前订单在管理端的业务流程摘要。 */
+const orderScenarioLabel = computed(() => getOrderScenarioLabel(orderTypeCode.value))
+
+/** 只有外卖订单或实际存在配送费时才展示配送金额。 */
+const showDeliveryPrice = computed(() => isTakeOutOrder.value || Number(globalData.detail.deliveryPrice || 0) !== 0)
+
+/** 实际支付扣除累计退款后的订单实际金额，异常负值按零展示。 */
+const orderActualPrice = computed(() => Math.max(0, Number(globalData.detail.payPrice || 0) - Number(globalData.detail.refundPrice || 0)))
+
+/** 当前场景是否存在用餐、预约、商城或外卖扩展信息。 */
+const showBusinessScenarioSection = computed(() => showMealOrReservationContext.value || isMarketplaceOrder.value || isTakeOutOrder.value)
+
+/** 订单是否具备用餐或预约上下文。 */
+const showMealOrReservationContext = computed(
+	() =>
+		isReservationOrder.value ||
+		Boolean(globalData.detail.hourType || globalData.detail.apptHourType || globalData.detail.apptUseDate || globalData.detail.apptTitle),
+)
+
+/** 场景详情区标题。 */
+const businessScenarioTitle = computed(() => {
+	if (isTakeOutOrder.value) return "外卖与用餐信息"
+	if (isMarketplaceOrder.value) return "商城履约信息"
+	return isReservationOrder.value ? "预约与核销信息" : "用餐信息"
 })
 
-const agree = async () => {
-	let loading: any = null
-	try {
-		await useMessage().delConfirm("是否同意售后？")
-		loading = ElLoading.service({
-			lock: true,
-			text: "提交中",
-			background: "rgba(0, 0, 0, 0.7)",
-		})
-		await hardAfterSaleApi.agree({ id: globalData.afterSaleData.id })
-		useMessage().success("操作成功")
-		await getDetail()
-	} finally {
-		setTimeout(() => loading.close(), 500)
+/** 场景详情区说明。 */
+const businessScenarioDescription = computed(() => {
+	if (isTakeOutOrder.value) return "展示餐段、期望送达配置和当前配送状态"
+	if (isMarketplaceOrder.value) return "展示支付后的发货、收货和物流状态"
+	return isReservationOrder.value ? "预约支付与到店核销分别记录" : "订单关联的餐段与使用日期"
+})
+
+/** 商城与外卖订单，或任何实际带地址主键的历史订单均展示配送区。 */
+const showDeliverySection = computed(() => isMarketplaceOrder.value || isTakeOutOrder.value || Boolean(globalData.detail.addressId))
+
+/** 仅人工审核入口且待审核状态时展示同意/拒绝操作。 */
+const canReviewAfterSale = computed(
+	() =>
+		globalData.type === "apply" &&
+		String(globalData.afterSaleData.status || "") === AFTER_SALE_APPLY_STATUS &&
+		!globalData.afterSaleData.autoRefundTaskStatus,
+)
+
+/** 预约配置的开始和结束时间；历史记录不完整时保留已有一侧。 */
+const reservationTimeRange = computed(() => {
+	const start = globalData.detail.apptStartTime
+	const end = globalData.detail.apptEndTime
+	if (!start && !end) return "--"
+	return [start, end].filter(Boolean).join(" - ")
+})
+
+/** 外卖送达方式中文文案。 */
+const takeOutDeliveryTypeLabel = computed(() => {
+	const type = globalData.detail.takeOutAppt?.expectDeliveryType
+	if (type === "IMMEDIATE") return "立即送"
+	if (type === "SCHEDULED") return "预约时段"
+	return displayValue(type)
+})
+
+/** 外卖期望送达时间，按立即送和预约时段使用各自后端字段。 */
+const expectedDeliveryLabel = computed(() => {
+	const appointment = globalData.detail.takeOutAppt
+	if (!appointment) return "--"
+	if (appointment.expectDeliveryType === "IMMEDIATE") {
+		return formatDateTime(appointment.expectArriveTime)
+	}
+	const date = displayValue(appointment.expectDeliveryDate)
+	const timeRange = [appointment.expectDeliveryStart, appointment.expectDeliveryEnd].filter(Boolean).join(" - ")
+	return timeRange ? date + " " + timeRange : date
+})
+
+/** 订单用户名称、手机号和匿名语义。 */
+const orderUserLabel = computed(() => {
+	const detail = globalData.detail
+	if (String(detail.userId) === "-1") return "不记名用户"
+	const name = detail.username || (detail.userId ? "用户 " + detail.userId : "")
+	const mobile = detail.phone || detail.userMobile
+	return [name, mobile].filter(Boolean).join(" · ") || "--"
+})
+
+/** 售后申请人与订单用户分开展示，避免代申请场景产生误解。 */
+const refundApplicantLabel = computed(() => {
+	const afterSale = globalData.afterSaleData
+	const name = afterSale.username || (afterSale.userId ? "用户 " + afterSale.userId : "")
+	const mobile = afterSale.phone || afterSale.userMobile
+	return [name, mobile].filter(Boolean).join(" · ") || "--"
+})
+
+/** 收货联系人与联系电话。 */
+const deliveryContactLabel = computed(
+	() => [globalData.address.username, globalData.address.userMoblie].filter(Boolean).join(" · ") || "--",
+)
+
+/** 优先使用后端完整地址，历史记录缺失时拼接行政区划。 */
+const deliveryAddressLabel = computed(() => {
+	if (globalData.address.fullAddress) return globalData.address.fullAddress
+	return (
+		[globalData.address.province, globalData.address.city, globalData.address.district, globalData.address.street]
+			.filter(Boolean)
+			.join("") || displayValue(globalData.detail.addressName)
+	)
+})
+
+/** 楼栋、单元、楼层和门牌的紧凑展示。 */
+const deliveryRoomLabel = computed(
+	() =>
+		[globalData.address.buildingName, globalData.address.unitName, globalData.address.floorNo, globalData.address.roomName]
+			.filter(Boolean)
+			.join(" · ") || "--",
+)
+
+/** 当前售后单申请时保存的商品快照；历史售后没有快照时保留空数组语义。 */
+const currentRefundProducts = computed<any[]>(() =>
+	Array.isArray(globalData.afterSaleData.carList) ? globalData.afterSaleData.carList : [],
+)
+
+/** 当前售后商品数量列文案，待审核时突出这是尚未完成的申请数量。 */
+const currentRefundCountColumnLabel = computed(() =>
+	globalData.afterSaleData.status === AFTER_SALE_APPLY_STATUS ? "本次申请退款" : "本次退款数量",
+)
+
+/** 剩余数量列文案，待审核时明确展示同意申请后的预期结果。 */
+const remainingProductCountColumnLabel = computed(() =>
+	globalData.afterSaleData.status === AFTER_SALE_APPLY_STATUS ? "同意后剩余" : "当前剩余数量",
+)
+
+/** 消费机简单支付没有购物车时使用业务化空状态，其他订单使用通用文案。 */
+const productEmptyDescription = computed(() => (isSimplePaymentOrder.value ? "消费机支付订单没有商品明细" : "暂无商品明细"))
+
+/**
+ * 将接口可空或异常商品数量收敛为非负整数，避免历史脏值产生负数剩余。
+ *
+ * @param value 接口返回的商品份数
+ * @returns 可参与退款数量计算的非负整数
+ */
+function normalizeProductCount(value: unknown): number {
+	const count = Number(value)
+	return Number.isFinite(count) ? Math.max(0, Math.trunc(count)) : 0
+}
+
+/**
+ * 生成订单商品与售后商品快照的匹配键；历史商品缺少主键时使用名称和价格兜底。
+ *
+ * @param product 订单购物车或售后商品快照
+ * @returns 当前订单范围内稳定的商品匹配键
+ */
+function getProductQuantityKey(product: any): string {
+	if (product?.productId !== null && product?.productId !== undefined) return "id:" + product.productId
+	return "snapshot:" + (product?.productName || "") + ":" + (product?.productPrice || 0)
+}
+
+/**
+ * 商品表统一展示原购、累计完成退款、本次售后和处理后剩余数量。
+ *
+ * 同一商品存在多行购物车快照时，本次售后数量按原行顺序逐份分配，避免商品级汇总在每一行重复展示。
+ * 申请中售后仅在“同意后剩余”中预扣；已拒绝或取消的申请不会减少当前剩余数量。
+ */
+const refundProductRows = computed<any[]>(() => {
+	const currentRefundCounts = new Map<string, number>()
+	currentRefundProducts.value.forEach((product) => {
+		const key = getProductQuantityKey(product)
+		currentRefundCounts.set(key, (currentRefundCounts.get(key) || 0) + normalizeProductCount(product.productCount))
+	})
+	const hasCurrentRefundSnapshot = currentRefundProducts.value.length > 0
+	const isApplying = globalData.afterSaleData.status === AFTER_SALE_APPLY_STATUS
+	return (state.dataList || []).map((product: any) => {
+		const originalCount = normalizeProductCount(product.originalProductCount ?? product.productCount)
+		const refundedCount = normalizeProductCount(product.refundedProductCount)
+		const effectiveCount = normalizeProductCount(product.effectiveProductCount ?? originalCount - refundedCount)
+		let currentRefundCount: number | null = null
+		if (hasCurrentRefundSnapshot) {
+			const key = getProductQuantityKey(product)
+			const unallocatedCount = currentRefundCounts.get(key) || 0
+			currentRefundCount = Math.min(originalCount, unallocatedCount)
+			currentRefundCounts.set(key, Math.max(0, unallocatedCount - currentRefundCount))
+		}
+		let remainingCount: number | null = effectiveCount
+		if (isApplying) {
+			remainingCount = currentRefundCount === null ? null : Math.max(0, effectiveCount - currentRefundCount)
+		}
+		return {
+			...product,
+			displayOriginalProductCount: originalCount,
+			displayRefundedProductCount: refundedCount,
+			displayCurrentRefundProductCount: currentRefundCount,
+			displayRemainingProductCount: remainingCount,
+		}
+	})
+})
+
+/** 订单详情中的人脸证据；菜谱识别预留数据不会误入本期展示。 */
+const faceEvidence = computed<hardOrder.HardOrderEvidenceImage[]>(() =>
+	(globalData.detail.evidenceImages || []).filter((item) => item.evidenceType === "FACE_RECOGNITION"),
+)
+
+/** 仅真实存在人脸证据位置时展示整块区域，普通订单保持紧凑。 */
+const hasFaceEvidence = computed(() => faceEvidence.value.length > 0)
+
+/** 按当前订单实际展示区域生成导航，避免出现无法到达的空入口。 */
+const sectionNavItems = computed<SectionNavItem[]>(() => {
+	const items: SectionNavItem[] = [
+		{ key: "progress", label: "履约进度", targetId: "section-progress", icon: Timer },
+		{ key: "order", label: "订单信息", targetId: "section-order", icon: Document },
+		{ key: "payment", label: "时间支付", targetId: "section-payment", icon: CreditCard },
+	]
+	if (showBusinessScenarioSection.value) {
+		items.push({ key: "scenario", label: "业务履约", targetId: "section-scenario", icon: Calendar })
+	}
+	if (showDeliverySection.value) {
+		items.push({ key: "delivery", label: "收货配送", targetId: "section-delivery", icon: Location })
+	}
+	items.push({ key: "products", label: "购物车", targetId: "section-products", icon: ShoppingCart })
+	if (showPrintRecordSection.value) {
+		items.push({ key: "print-records", label: "打印凭证", targetId: "section-print-records", icon: Printer })
+	}
+	if (globalData.afterSaleData.id) {
+		items.push({ key: "refund", label: "退款申请", targetId: "section-refund", icon: Money })
+	}
+	if (hasFaceEvidence.value) {
+		items.push({ key: "evidence", label: "识别凭证", targetId: "section-evidence", icon: Picture })
+	}
+	items.push({ key: "history", label: "售后记录", targetId: "section-history", icon: List })
+	if (isSmartCabinetOrder.value) {
+		items.push({ key: "cabinet", label: "智能柜日志", targetId: "section-cabinet", icon: Box })
+	}
+	return items
+})
+
+/** 在当前详情实例中查找锚点，避免后台多标签缓存时命中其他页面同名 ID。 */
+function getSectionElement(targetId: string): HTMLElement | null {
+	return detailContainerRef.value?.querySelector<HTMLElement>("#" + targetId) || null
+}
+
+/** 点击右侧导航后平滑定位，并立即反馈所选分区。 */
+function scrollToSection(item: SectionNavItem): void {
+	const target = getSectionElement(item.targetId)
+	if (!target) return
+	activeSectionKey.value = item.key
+	navSelectionLockUntil = window.performance.now() + 900
+	const behavior = window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth"
+	target.scrollIntoView({ behavior, block: "start" })
+}
+
+/** 根据分区标题经过视口上部的位置更新导航高亮，滚到底部时确保最后一项可选中。 */
+function updateActiveSection(): void {
+	const container = detailContainerRef.value
+	const items = sectionNavItems.value
+	if (!container || items.length === 0) return
+	if (container.scrollTop + container.clientHeight >= container.scrollHeight - 4) {
+		activeSectionKey.value = items[items.length - 1].key
+		return
+	}
+	const activationLine = container.getBoundingClientRect().top + Math.min(128, container.clientHeight * 0.2)
+	let currentKey = items[0].key
+	for (const item of items) {
+		const target = getSectionElement(item.targetId)
+		if (!target || target.getBoundingClientRect().top > activationLine) break
+		currentKey = item.key
+	}
+	activeSectionKey.value = currentKey
+}
+
+/** 页面滚动时每帧最多计算一次当前分区。 */
+function handleDetailScroll(): void {
+	if (window.performance.now() < navSelectionLockUntil) return
+	if (sectionScrollFrame !== null) return
+	sectionScrollFrame = window.requestAnimationFrame(() => {
+		sectionScrollFrame = null
+		updateActiveSection()
+	})
+}
+
+/**
+ * 格式化商品份数，历史售后缺少本次商品快照时使用占位符，避免误显示为零份。
+ *
+ * @param count 商品份数；null 表示接口没有可确认的本次售后明细
+ * @returns 带“份”单位的数量或占位符
+ */
+function formatProductCount(count: number | null): string {
+	return count === null ? "--" : count + " 份"
+}
+
+/**
+ * 判断字段是否具备可展示值，数字零属于有效值。
+ *
+ * @param value 接口字段值
+ * @returns 是否应展示原值
+ */
+function hasDisplayValue(value: unknown): boolean {
+	return value !== null && value !== undefined && value !== ""
+}
+
+/**
+ * 将空字段统一显示为占位符。
+ *
+ * @param value 接口字段值
+ * @returns 原值字符串或占位符
+ */
+function displayValue(value: unknown): string {
+	return hasDisplayValue(value) ? String(value) : "--"
+}
+
+/**
+ * 格式化日期时间，兼容日期、LocalTime 和完整时间字符串。
+ *
+ * @param value 后端日期或时间值
+ * @returns 可识别时格式化为秒级时间，否则保留原值
+ */
+function formatDateTime(value?: string): string {
+	if (!value) return "--"
+	const parsed = dayjs(value)
+	return parsed.isValid() ? parsed.format(value.length <= 10 ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm:ss") : value
+}
+
+/**
+ * 格式化接口 1/0 是否编码。
+ *
+ * @param value 后端是否编码
+ * @returns 是、否或历史异常原值
+ */
+function formatYesNo(value: unknown): string {
+	if (!hasDisplayValue(value)) return "--"
+	if (String(value) === "1") return "是"
+	if (String(value) === "0") return "否"
+	return String(value)
+}
+
+/**
+ * 格式化布尔或 1/0 代订标识。
+ *
+ * @param value 接口布尔值或编码
+ * @returns 是、否或占位符
+ */
+function formatBoolean(value: unknown): string {
+	if (!hasDisplayValue(value)) return "--"
+	return value === true || String(value) === "1" ? "是" : "否"
+}
+
+/**
+ * 名称存在时追加主键，缺少名称时仅显示主键。
+ *
+ * @param name 业务对象名称
+ * @param id 业务对象主键
+ * @returns 名称与主键组合
+ */
+function displayNameWithId(name: unknown, id: unknown): string {
+	if (hasDisplayValue(name) && hasDisplayValue(id)) return String(name) + "（" + String(id) + "）"
+	return displayValue(name || id)
+}
+
+/**
+ * 按订单类型返回当前订单业务流程摘要。
+ *
+ * @param orderType HardOrderTypeEnum 持久化编码
+ * @returns 面向运营人员的流程名称
+ */
+function getOrderScenarioLabel(orderType: string): string {
+	switch (orderType) {
+		case "1":
+			return "线下购买 · 终端下单与支付"
+		case "2":
+			return "线上预定 · 支付完成后等待到店核销"
+		case "3":
+			return "外来人员 · 外部凭证核销"
+		case "4":
+			return "跨单位 · 跨单位凭证核销"
+		case "5":
+			return "正元公务餐 · 公务餐渠道结算"
+		case "6":
+			return "宁波银行 · 美好生活渠道结算"
+		case "7":
+			return "商城订单 · 支付后发货、收货"
+		case "8":
+			return "TOC 访客 · 不记名用户购买"
+		case "9":
+			return "消费机支付 · 单笔支付订单"
+		case "10":
+			return "外卖订单 · 商户接单、配送与送达"
+		default:
+			return "历史或未知订单类型 · 按实际字段展示"
 	}
 }
 
-const getDetail = async () => {
-	const id = query.id as unknown as any
-	if (!id) return
-	state.queryForm.orderId = id
-	const { data: orderData } = await hardOrder.getObj(id)
-	globalData.detail = orderData
-	getDataList()
-	const { data: afterSaleData } = await hardAfterSaleApi.detailByOrderId({ orderId: id })
-	if (afterSaleData && afterSaleData.id) {
-		globalData.afterSaleData = afterSaleData
+/**
+ * 构造单个履约步骤，优先展示实际时间；仅在状态已明确推进时使用无时间说明。
+ *
+ * @param key 页面内稳定键
+ * @param title 步骤标题
+ * @param time 实际业务时间
+ * @param completed 当前状态是否已越过该步骤
+ * @param current 当前是否处于该步骤
+ * @param currentText 当前状态说明
+ * @returns Element Plus 步骤数据
+ */
+function createLifecycleStage(
+	key: string,
+	title: string,
+	time: string | undefined,
+	completed: boolean,
+	current: boolean,
+	currentText: string,
+): LifecycleStage {
+	return {
+		key,
+		title,
+		description: time ? formatDateTime(time) : completed ? "状态已完成，时间未记录" : current ? currentText : "尚未发生",
+		status: completed ? "finish" : current ? "process" : "wait",
 	}
 }
+
+/** 当前订单按类型生成的履约步骤，支付、核销、物流和外卖状态不再混为一个完成状态。 */
+const lifecycleStages = computed<LifecycleStage[]>(() => {
+	const detail = globalData.detail
+	const type = orderTypeCode.value
+	const status = orderStatusCode.value
+	const isUnpaid = UNPAID_STATUS_CODES.includes(status)
+	const paidByStatus = PAID_STATUS_CODES.includes(status)
+	const stages: LifecycleStage[] = [
+		createLifecycleStage(
+			"created",
+			"创建订单",
+			detail.createTime,
+			Boolean(detail.createTime),
+			!detail.createTime,
+			"订单已存在，时间未记录",
+		),
+	]
+
+	const shouldShowPayment = !["3", "4"].includes(type) || Boolean(detail.payTime)
+	if (shouldShowPayment) {
+		stages.push(createLifecycleStage("paid", "支付完成", detail.payTime, Boolean(detail.payTime) || paidByStatus, isUnpaid, "等待用户支付"))
+	}
+
+	if (["2", "3", "4"].includes(type)) {
+		stages.push(
+			createLifecycleStage(
+				"verified",
+				"核销完成",
+				detail.verificationTime,
+				Boolean(detail.verificationTime) || status === "20",
+				["5", "6"].includes(status),
+				"已支付，等待核销",
+			),
+		)
+		return stages
+	}
+
+	if (type === MARKETPLACE_ORDER_TYPE) {
+		stages.push(
+			createLifecycleStage(
+				"shipped",
+				"商户发货",
+				detail.shippedTime,
+				Boolean(detail.shippedTime) || ["210", "220"].includes(status),
+				status === "200",
+				"等待填写物流单号",
+			),
+			createLifecycleStage(
+				"delivered",
+				"用户收货",
+				detail.deliveredTime,
+				Boolean(detail.deliveredTime) || status === "220",
+				status === "210",
+				"商品配送中",
+			),
+		)
+		return stages
+	}
+
+	if (type === TAKE_OUT_ORDER_TYPE) {
+		stages.push(
+			createLifecycleStage("accepted", "商户接单", undefined, ["110", "20"].includes(status), status === "100", "等待商户接单"),
+			createLifecycleStage("delivering", "配送中", undefined, status === "20", status === "110", "订单正在配送"),
+			createLifecycleStage(
+				"delivered",
+				"订单完成",
+				detail.deliveredTime,
+				Boolean(detail.deliveredTime) || status === "20",
+				false,
+				"等待送达",
+			),
+		)
+		return stages
+	}
+
+	if (type !== SIMPLE_PAYMENT_ORDER_TYPE) {
+		stages.push(
+			createLifecycleStage(
+				"completed",
+				"订单完成",
+				detail.verificationTime || detail.deliveredTime,
+				Boolean(detail.verificationTime || detail.deliveredTime) || status === "20",
+				["5", "6"].includes(status),
+				"等待履约完成",
+			),
+		)
+	}
+	return stages
+})
+
+/** 轨道仅占实际节点需要的宽度；窄屏允许横向滚动，宽屏不再把连接线拉满整页。 */
+const workflowTrackStyle = computed(() => ({
+	width: Math.max(320, lifecycleStages.value.length * 180) + "px",
+}))
+
+/** 退款和取消作为终止事件单独展示，不伪装成正常履约步骤。 */
+const terminalEvent = computed<TerminalEvent | null>(() => {
+	const detail = globalData.detail
+	if (orderStatusCode.value === "10" || detail.refundTime) {
+		return {
+			type: "warning",
+			title: "订单已进入退款结果",
+			description: "退款金额 " + displayPrice(detail.refundPrice) + "，完成时间 " + formatDateTime(detail.refundTime),
+		}
+	}
+	if (orderStatusCode.value === "30" || detail.applyCancelTime || detail.unfollowTime) {
+		return {
+			type: "info",
+			title: "订单已取消",
+			description: "取消时间 " + formatDateTime(detail.applyCancelTime || detail.unfollowTime),
+		}
+	}
+	return null
+})
+
+/**
+ * 复用项目图片域名规则。
+ *
+ * @param url 后端证据图片地址
+ * @returns 绝对地址保持原值，相对地址补齐文件服务前缀
+ */
+function evidenceImageUrl(url: string): string {
+	return url.includes("http") ? url : String(import.meta.env.VITE_IMAGE_BASE_PATH || "") + url
+}
+
+/**
+ * 记录本页图片加载失败状态，避免再次渲染成貌似可用的空白图片。
+ *
+ * @param id 证据图片主键
+ */
+function markEvidenceImageFailed(id: string | number): void {
+	failedEvidenceImages.value = new Set(failedEvidenceImages.value).add(id)
+}
+
+/**
+ * 把 0 到 1 的相似度快照转为百分比。
+ *
+ * @param value 相似度数值或字符串
+ * @returns 百分比或占位符
+ */
+function formatSimilarity(value?: number | string): string {
+	if (!hasDisplayValue(value)) return "--"
+	const numeric = Number(value)
+	return Number.isFinite(numeric) ? (numeric * 100).toFixed(2) + "%" : "--"
+}
+
+/**
+ * 优先使用服务端中文名称，未知历史角色回退稳定编码。
+ *
+ * @param evidence 单张识别证据
+ * @returns 证据角色名称
+ */
+function evidenceRoleLabel(evidence: hardOrder.HardOrderEvidenceImage): string {
+	const names: Record<string, string> = {
+		FACE_REFERENCE: "后台参考人脸",
+		FACE_LIVE: "现场识别人脸",
+	}
+	return evidence.evidenceRoleName || names[evidence.evidenceRole] || evidence.evidenceRole || "识别图片"
+}
+
+/**
+ * 将三种服务端证据状态转换为详情页明确文案。
+ *
+ * @param status 证据状态编码
+ * @returns 中文状态
+ */
+function evidenceStatusLabel(status?: string): string {
+	const names: Record<string, string> = {
+		PENDING: "待补传",
+		AVAILABLE: "已保存",
+		UNAVAILABLE: "永久缺失",
+	}
+	return names[status || ""] || status || "未知状态"
+}
+
+/**
+ * 将打印任务失败阶段编码转为可读中文；未知编码原样保留便于排查历史数据。
+ *
+ * @param stage hard_invoice.failure_stage 稳定编码
+ * @returns 失败阶段中文名称或占位符
+ */
+function getFailureStageName(stage?: string): string {
+	const names: Record<string, string> = {
+		BINDING: "设备绑定",
+		IMAGE_GENERATION: "图片生成",
+		MQTT_DISPATCH: "MQTT 下发",
+		TERMINAL_PRINT: "终端打印",
+	}
+	return names[stage || ""] || stage || "--"
+}
+
+/**
+ * 按订单主键查询全部打印任务，失败时保留在当前分区内提示，不影响售后主体。
+ *
+ * @param orderId Hardware 订单主键
+ */
+async function loadInvoiceRecords(orderId: string | number): Promise<void> {
+	const requestVersion = ++invoiceRequestVersion
+	invoiceLoading.value = true
+	invoiceLoadError.value = ""
+	try {
+		const { data } = await hardInvoiceApi.pageJoin({ orderId, current: 1, size: 100 })
+		if (requestVersion !== invoiceRequestVersion) return
+		const records: HardInvoiceRecord[] = Array.isArray(data) ? data : Array.isArray(data?.records) ? data.records : []
+		invoiceRecords.value = records.filter((record) => String(record.orderId) === String(orderId))
+	} catch (error: any) {
+		if (requestVersion !== invoiceRequestVersion) return
+		invoiceRecords.value = []
+		invoiceLoadError.value = error?.msg || "未能取得该订单的打印记录，请点击“刷新记录”重试。"
+	} finally {
+		if (requestVersion === invoiceRequestVersion) invoiceLoading.value = false
+	}
+}
+
+/** 重新加载当前详情订单的打印任务；订单尚未加载时不发起请求。 */
+function reloadInvoiceRecords(): void {
+	if (!globalData.detail.id) return
+	loadInvoiceRecords(globalData.detail.id)
+}
+
+/**
+ * 查询当前订单最近一笔售后详情。
+ *
+ * 请求失败时清空旧路由残留数据，并保留订单主体供工作人员继续查看。
+ *
+ * @param orderId Hardware 订单主键
+ */
+async function loadAfterSaleDetail(orderId: string | number): Promise<void> {
+	try {
+		const { data } = await hardAfterSaleApi.detailByOrderId({ orderId })
+		globalData.afterSaleData = data && data.id ? data : {}
+	} catch (error: any) {
+		globalData.afterSaleData = {}
+		message.error(error?.msg || "售后详情加载失败")
+	}
+}
+
+/**
+ * 加载订单、原购物车商品与最近售后，组成完整售后详情；收货地址数据保持为空。
+ *
+ * @returns 所有详情请求结束后的 Promise；路由缺少订单主键时直接显示空状态
+ */
+async function getDetail(): Promise<void> {
+	const orderId = route.query.id
+	invoiceRequestVersion += 1
+	invoiceRecords.value = []
+	invoiceLoadError.value = ""
+	invoiceLoading.value = false
+	if (!hasDisplayValue(orderId)) {
+		globalData.detail = {} as OrderDetailView
+		loading.value = false
+		return
+	}
+	loading.value = true
+	globalData.address = {}
+	globalData.afterSaleData = {}
+	try {
+		const { data } = await hardOrder.getObj(String(orderId))
+		globalData.detail = data || ({} as OrderDetailView)
+		globalData.type = String(route.query.type || "view")
+		failedEvidenceImages.value = new Set()
+		state.queryForm.orderId = orderId
+		// 打印记录独立加载，慢请求或权限异常不能延迟订单与售后主体展示。
+		void loadInvoiceRecords(orderId as string | number)
+		const tasks: Array<Promise<unknown>> = [getDataList(), loadAfterSaleDetail(orderId as string | number)]
+		await Promise.all(tasks)
+	} catch (error: any) {
+		globalData.detail = {} as OrderDetailView
+		message.error(error?.msg || "订单详情加载失败")
+	} finally {
+		loading.value = false
+		await nextTick()
+		updateActiveSection()
+	}
+}
+
+/**
+ * 确认并提交人工同意售后。
+ *
+ * 用户取消确认时仅结束流程，不再访问未创建的全屏 Loading 实例。
+ */
+async function agree(): Promise<void> {
+	try {
+		await message.delConfirm("是否同意售后？")
+	} catch {
+		return
+	}
+	try {
+		actionLoading.value = true
+		await hardAfterSaleApi.agree({ id: globalData.afterSaleData.id })
+		message.success("操作成功")
+		await getDetail()
+	} finally {
+		actionLoading.value = false
+	}
+}
+
+/**
+ * 监听订单主键和入口场景，兼容后台标签页复用同一组件查看不同订单。
+ * immediate 保证首次进入直接加载，不依赖额外生命周期回调。
+ */
+watch(
+	[() => route.query.id, () => route.query.type],
+	() => {
+		activeSectionKey.value = "progress"
+		detailContainerRef.value?.scrollTo({ top: 0 })
+		getDetail()
+	},
+	{ immediate: true },
+)
+
+onBeforeUnmount(() => {
+	if (sectionScrollFrame !== null) window.cancelAnimationFrame(sectionScrollFrame)
+})
 </script>
 
 <style lang="scss" scoped>
-:deep(.el-descriptions) {
-	&:not(:nth-child(1)) {
-		margin-top: 20px;
+.order-refund-detail {
+	overflow-x: hidden;
+	overflow-y: auto;
+}
+
+.detail-header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 20px;
+	padding: 20px;
+	border-bottom: 1px solid var(--el-border-color-light);
+	background: var(--el-fill-color-blank);
+}
+
+.money-strip {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+	border-bottom: 1px solid var(--el-border-color-light);
+	background: var(--el-fill-color-light);
+}
+
+.money-item {
+	display: flex;
+	min-width: 0;
+	flex-direction: column;
+	gap: 6px;
+	padding: 14px 20px;
+	border-right: 1px solid var(--el-border-color-lighter);
+	color: var(--el-text-color-secondary);
+
+	strong {
+		overflow-wrap: anywhere;
+		color: var(--el-text-color-primary);
+		font-size: 18px;
+		line-height: 24px;
 	}
 
-	.el-descriptions__title {
-		display: flex;
-		align-items: center;
+	&.is-primary strong {
+		color: var(--el-color-primary);
+	}
+
+	&.is-danger strong {
+		color: var(--el-color-danger);
+	}
+}
+
+.detail-body {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) 172px;
+	align-items: start;
+	background: var(--el-fill-color-blank);
+}
+
+.detail-main {
+	grid-row: 1;
+	grid-column: 1;
+	min-width: 0;
+	border-right: 1px solid var(--el-border-color-light);
+}
+
+.section-nav {
+	position: sticky;
+	z-index: 3;
+	top: 12px;
+	grid-row: 1;
+	grid-column: 2;
+	align-self: start;
+	padding: 20px 12px;
+}
+
+.section-nav__panel {
+	min-width: 0;
+}
+
+.section-nav__title {
+	padding: 0 10px 8px;
+	color: var(--el-text-color-placeholder);
+	font-size: 12px;
+	font-weight: 500;
+	line-height: 20px;
+}
+
+.section-nav__list {
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+}
+
+.section-nav__item {
+	position: relative;
+	display: flex;
+	width: 100%;
+	height: 38px;
+	align-items: center;
+	gap: 8px;
+	padding: 0 10px;
+	border: 0;
+	border-radius: 4px;
+	background: transparent;
+	color: var(--el-text-color-secondary);
+	font-size: 13px;
+	line-height: 20px;
+	text-align: left;
+	cursor: pointer;
+	transition: background-color 0.18s ease, color 0.18s ease;
+
+	.el-icon {
+		width: 16px;
+		flex: none;
+		font-size: 16px;
+	}
+
+	&::before {
+		position: absolute;
+		top: 8px;
+		bottom: 8px;
+		left: 0;
+		width: 3px;
+		border-radius: 0 2px 2px 0;
+		background: transparent;
+		content: "";
+	}
+
+	&:hover {
+		background: var(--el-fill-color-light);
+		color: var(--el-text-color-primary);
+	}
+
+	&:focus-visible {
+		outline: 2px solid var(--el-color-primary-light-5);
+		outline-offset: 1px;
+	}
+
+	&.is-active {
+		background: var(--el-color-primary-light-9);
+		color: var(--el-color-primary);
+		font-weight: 600;
 
 		&::before {
-			display: inline-block;
-			width: 3px;
-			height: 20px;
-			margin-right: 10px;
-			background-color: #409eff;
-			content: "";
-		}
-	}
-
-	.el-descriptions-item__container {
-		margin: 0 10px;
-
-		.no-colon {
-			margin: 0;
-
-			&::after {
-				content: "";
-			}
+			background: var(--el-color-primary);
 		}
 	}
 }
 
-// 时间线样式调整
-:deep(.el-timeline) {
-	margin: 10px 0 0 160px;
+.detail-section {
+	padding: 20px;
+	border-bottom: 1px solid var(--el-border-color-light);
+	background: var(--el-fill-color-blank);
 
-	.el-timeline-item__wrapper {
-		position: relative;
-		top: -20px;
+	&:last-child {
+		border-bottom: 0;
+	}
+}
 
-		.el-timeline-item__timestamp {
-			position: absolute !important;
-			top: 10px;
-			left: -150px;
-		}
+.detail-anchor {
+	scroll-margin-top: 12px;
+}
+
+.section-heading {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 16px;
+	margin-bottom: 16px;
+
+	h2 {
+		margin: 0;
+		color: var(--el-text-color-primary);
+		font-size: 16px;
+		font-weight: 600;
+		line-height: 24px;
 	}
 
-	.el-timeline-right-content {
-		display: flex;
-		align-items: center;
-		min-height: 30px;
-		padding: 10px;
-		background-color: #409eff;
+	p {
+		margin: 3px 0 0;
+		color: var(--el-text-color-secondary);
+		font-size: 13px;
+		line-height: 20px;
+	}
+}
+
+.workflow-scroll {
+	display: flex;
+	justify-content: center;
+	overflow-x: auto;
+	padding: 6px 0 8px;
+	overscroll-behavior-x: contain;
+}
+
+.workflow-track {
+	width: 100%;
+	display: flex;
+	max-width: none;
+	padding: 2px 0 4px;
+}
+
+.workflow-stage {
+	min-width: 0;
+	flex: 1;
+}
+
+.workflow-stage__marker {
+	display: flex;
+	height: 30px;
+	align-items: center;
+}
+
+.workflow-stage__line {
+	height: 2px;
+	min-width: 12px;
+	flex: 1;
+	background: var(--el-border-color);
+
+	.workflow-stage:first-child &.is-before,
+	.workflow-stage:last-child &.is-after {
+		visibility: hidden;
+	}
+}
+
+.workflow-stage__node {
+	display: inline-flex;
+	width: 28px;
+	height: 28px;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	border: 2px solid var(--el-border-color);
+	border-radius: 50%;
+	background: var(--el-fill-color-blank);
+	color: var(--el-text-color-placeholder);
+	font-size: 12px;
+	font-weight: 600;
+	line-height: 1;
+
+	.el-icon {
+		font-size: 16px;
+	}
+}
+
+.workflow-stage__content {
+	padding: 7px 10px 0;
+	text-align: center;
+}
+
+.workflow-stage__title {
+	color: var(--el-text-color-regular);
+	font-size: 14px;
+	font-weight: 600;
+	line-height: 22px;
+}
+
+.workflow-stage__description {
+	min-height: 36px;
+	margin-top: 2px;
+	color: var(--el-text-color-placeholder);
+	font-size: 12px;
+	line-height: 18px;
+	overflow-wrap: anywhere;
+}
+
+.workflow-stage.is-finish,
+.workflow-stage.is-success {
+	.workflow-stage__node {
+		border-color: var(--el-color-primary);
+		background: var(--el-color-primary);
+		color: var(--el-color-white);
+	}
+
+	.workflow-stage__line {
+		background: var(--el-color-primary);
+	}
+
+	.workflow-stage__title {
+		color: var(--el-color-primary);
+	}
+}
+
+.workflow-stage.is-process {
+	.workflow-stage__line.is-before {
+		background: var(--el-color-primary);
+	}
+
+	.workflow-stage__node {
+		border-color: var(--el-color-primary);
+		color: var(--el-color-primary);
+		box-shadow: 0 0 0 4px var(--el-color-primary-light-9);
+	}
+
+	.workflow-stage__title {
+		color: var(--el-color-primary);
+	}
+
+	.workflow-stage__description {
+		color: var(--el-text-color-secondary);
+	}
+}
+
+.workflow-stage.is-error {
+	.workflow-stage__node {
+		border-color: var(--el-color-danger);
+		color: var(--el-color-danger);
+	}
+
+	.workflow-stage__title {
+		color: var(--el-color-danger);
+	}
+}
+
+.context-grid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	border-top: 1px solid var(--el-border-color-lighter);
+}
+
+.context-group {
+	min-width: 0;
+	padding: 16px 20px 4px 0;
+
+	&:nth-child(even) {
+		padding-right: 0;
+		padding-left: 20px;
+		border-left: 1px solid var(--el-border-color-lighter);
+	}
+
+	h3 {
+		margin: 0 0 10px;
+		color: var(--el-text-color-regular);
+		font-size: 14px;
+		font-weight: 600;
+		line-height: 22px;
+	}
+}
+
+.detail-list {
+	margin: 0;
+}
+
+.detail-row {
+	display: grid;
+	grid-template-columns: minmax(88px, 116px) minmax(0, 1fr);
+	gap: 12px;
+	padding: 7px 0;
+	font-size: 14px;
+	line-height: 20px;
+
+	dt {
+		color: var(--el-text-color-secondary);
+	}
+
+	dd {
+		min-width: 0;
+		margin: 0;
+		overflow-wrap: anywhere;
+		color: var(--el-text-color-primary);
+	}
+}
+
+@media (max-width: 1100px) {
+	.detail-body {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	.detail-main {
+		grid-row: 2;
+		grid-column: 1;
+		border-right: 0;
+	}
+
+	.section-nav {
+		top: 0;
+		grid-row: 1;
+		grid-column: 1;
+		padding: 8px 12px;
+		border-bottom: 1px solid var(--el-border-color-light);
+		background: var(--el-bg-color-overlay);
+		box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
+	}
+
+	.section-nav__title {
+		display: none;
+	}
+
+	.section-nav__list {
+		flex-direction: row;
+		gap: 4px;
+		overflow-x: auto;
+		scrollbar-width: thin;
+	}
+
+	.section-nav__item {
+		width: auto;
+		min-width: max-content;
+		flex: none;
+		padding: 0 11px;
 
 		&::before {
-			position: absolute;
-			top: 10px;
-			left: 13px;
-			border-color: transparent #409eff transparent transparent;
-			border-style: solid;
-			border-width: 8px;
-			content: "";
+			top: auto;
+			right: 10px;
+			bottom: 0;
+			left: 10px;
+			width: auto;
+			height: 2px;
+			border-radius: 2px 2px 0 0;
 		}
 	}
 
-	.el-timeline-item__node {
-		position: absolute;
-		left: -5px;
-		top: -50%;
-		transform: translateY(100%);
-		display: flex;
-		width: 20px;
-		height: 20px;
-		font-size: 10px;
-		background: #409eff;
-		border-radius: 50%;
-		justify-content: center;
-		align-items: center;
+	.detail-anchor {
+		scroll-margin-top: 56px;
+	}
+}
+
+@media (max-width: 900px) {
+
+	.detail-header,
+	.section-heading {
+		flex-direction: column;
+	}
+
+	.detail-header> :last-child,
+	.section-heading> :last-child {
+		justify-content: flex-start;
+	}
+
+	.context-grid {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	.context-group,
+	.context-group:nth-child(even) {
+		padding: 16px 0 4px;
+		border-left: 0;
+	}
+
+	.context-group+.context-group {
+		border-top: 1px solid var(--el-border-color-lighter);
+	}
+
+	.money-item {
+		border-bottom: 1px solid var(--el-border-color-lighter);
+	}
+}
+
+@media (max-width: 520px) {
+
+	.detail-header,
+	.detail-section {
+		padding: 16px;
+	}
+
+	.money-strip {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	.money-item {
+		padding: 12px 16px;
+	}
+
+	.detail-row {
+		grid-template-columns: minmax(84px, 104px) minmax(0, 1fr);
+	}
+
+	:deep(.el-table) {
+		font-size: 13px;
 	}
 }
 </style>
diff --git a/src/views/hard/hard-door-manager/goods-putaway.vue b/src/views/hard/hard-door-manager/goods-putaway.vue
index 17967ce..9c6def3 100644
--- a/src/views/hard/hard-door-manager/goods-putaway.vue
+++ b/src/views/hard/hard-door-manager/goods-putaway.vue
@@ -1,22 +1,16 @@
 <template>
 	<el-dialog title="智能柜设置" v-model="visible" width="80%" :close-on-click-modal="true" draggable>
-		<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-			<el-row>
-				<el-form-item style="width: 300px" label="商品名" prop="name">
-					<el-input v-model="state.queryForm.name" placeholder="商品名" />
-				</el-form-item>
-				<el-form-item style="width: 300px" label="商品类型" prop="skuType">
-					<dict-select v-model="state.queryForm.skuType" dict-code="hard_ks_sku_type" />
-				</el-form-item>
-				<el-form-item style="width: 300px" label="商品分类" prop="spuCategoryId">
-					<select-hard-spu-category v-model="state.queryForm.spuCategoryId" placeholder="请输入商品分类" />
-				</el-form-item>
-				<el-form-item>
-					<el-button icon="Search" type="primary" @click="getDataList">查询</el-button>
-					<el-button icon="Refresh" @click="resetQuery">重置</el-button>
-				</el-form-item>
-			</el-row>
-		</el-form>
+		<SearchPanel ref="queryRef" :model="state.queryForm" :loading="Boolean(state.loading)" @search="getDataList" @reset="resetQuery">
+			<el-form-item style="width: 300px" label="商品名" prop="name">
+				<el-input v-model="state.queryForm.name" placeholder="商品名" />
+			</el-form-item>
+			<el-form-item style="width: 300px" label="商品类型" prop="skuType">
+				<dict-select v-model="state.queryForm.skuType" dict-code="hard_ks_sku_type" />
+			</el-form-item>
+			<el-form-item style="width: 300px" label="商品分类" prop="spuCategoryId">
+				<select-hard-spu-category v-model="state.queryForm.spuCategoryId" placeholder="请输入商品分类" />
+			</el-form-item>
+		</SearchPanel>
 
 		<el-table
 			:data="state.dataList"
diff --git a/src/views/hard/hard-door-manager/index.vue b/src/views/hard/hard-door-manager/index.vue
index eb4ffc1..bb69611 100644
--- a/src/views/hard/hard-door-manager/index.vue
+++ b/src/views/hard/hard-door-manager/index.vue
@@ -287,7 +287,7 @@ const refreshInfo = () => {
 // 音量设置
 const doVolumeSetting = async () => {
 	if (volumeSettingRef.value) {
-		volumeSettingRef.value.openDialog(state.deviceDetail.id, state.deviceDetail.mediaVolume, state.deviceDetail.systemVolume)
+		volumeSettingRef.value.openDialog(state.deviceDetail.hardId, state.deviceDetail.mediaVolume, state.deviceDetail.systemVolume)
 	}
 }
 const refreshVolume = (data: { hardId: string; mediaVolume: number; systemVolume: number }) => {
diff --git a/src/views/hard/hard-manager/details.vue b/src/views/hard/hard-manager/details.vue
new file mode 100644
index 0000000..ff9435a
--- /dev/null
+++ b/src/views/hard/hard-manager/details.vue
@@ -0,0 +1,2382 @@
+<template>
+	<div class="layout-padding">
+		<div ref="detailContainerRef" v-loading="loading"
+			class="layout-padding-auto layout-padding-view device-detail-page" @scroll.passive="handleDetailScroll">
+			<template v-if="detail.id">
+				<header class="detail-header">
+					<div class="detail-header__identity">
+						<el-button class="back-button" text icon="ArrowLeft" @click="goBack">返回设备列表</el-button>
+						<div class="flex min-w-0 flex-wrap items-center gap-2">
+							<h1>{{ displayValue(detail.name, "未命名设备") }}</h1>
+							<dict-tag :options="hard_type" :value="detail.type" />
+							<el-tag v-if="isRuntimeSupported" :type="detail.online ? 'success' : 'danger'"
+								effect="light">
+								{{ detail.online ? "在线" : "离线" }}
+							</el-tag>
+							<el-tag v-else-if="isPrinterAsset" type="info" effect="plain">无屏 USB 外设</el-tag>
+							<el-tag v-else type="info" effect="plain">状态暂不支持</el-tag>
+						</div>
+						<p>
+							<span>设备 ID {{ displayValue(detail.id) }}</span>
+							<span class="detail-header__separator">·</span>
+							<span v-if="isPrinterAsset">不使用独立设备编号</span>
+							<span v-else>唯一编号 {{ displayValue(detail.uniqueCode, "尚未绑定") }}</span>
+						</p>
+					</div>
+					<div class="detail-header__actions">
+						<el-button v-auth="'hard_hardManager_edit'" type="primary" icon="EditPen"
+							@click="formDialogRef?.openDialog(String(detail.id))">
+							编辑设备
+						</el-button>
+						<el-tooltip content="刷新全部设备信息" placement="top">
+							<el-button circle icon="Refresh" aria-label="刷新全部设备信息" :loading="loading"
+								@click="loadPage" />
+						</el-tooltip>
+					</div>
+				</header>
+
+				<div class="status-strip" :class="{ 'has-terminal-logs': supportsTerminalLogs }">
+					<div class="status-item">
+						<span>{{ isPrinterAsset ? "运行方式" : "连接状态" }}</span>
+						<strong
+							:class="{ 'is-success': detail.online, 'is-danger': isRuntimeSupported && !detail.online }">
+							{{ runtimeStatusText }}
+						</strong>
+						<small>{{ isPrinterAsset ? printerProxyTargetText : detail.lastOnlineTime || "暂无心跳时间" }}</small>
+					</div>
+					<div class="status-item">
+						<span>{{ isPrinterAsset ? "客户端归属" : "客户端版本" }}</span>
+						<strong>{{ isPrinterAsset ? "业务终端" : apkVersionText }}</strong>
+						<small>{{
+							isPrinterAsset ? "不单独安装 APK" : detail.apkVersionCode ? "Build " + detail.apkVersionCode :
+								"暂无内部版本码"
+							}}</small>
+					</div>
+					<div class="status-item">
+						<span>配置完成度</span>
+						<strong>{{ configuredCapabilityCount }} / {{ availableCapabilityCount }}</strong>
+						<small>按当前设备类型统计适用能力</small>
+					</div>
+					<div v-if="supportsTerminalLogs" class="status-item">
+						<span>终端日志</span>
+						<strong>{{ canViewLogs ? logFileCount + " 个文件" : "无查看权限" }}</strong>
+						<small>{{ canViewLogs ? logSummary?.latestUploadTime || "尚未上传" : "权限受限" }}</small>
+					</div>
+				</div>
+
+				<div class="detail-body">
+					<aside class="section-nav" aria-label="设备详情分区导航">
+						<div class="section-nav__title">设备导航</div>
+						<nav class="section-nav__list">
+							<button v-for="item in sectionNavItems" :key="item.key" type="button"
+								class="section-nav__item" :class="{ 'is-active': activeSectionKey === item.key }"
+								:aria-current="activeSectionKey === item.key ? 'location' : undefined"
+								@click="scrollToSection(item)">
+								<el-icon aria-hidden="true">
+									<component :is="item.icon" />
+								</el-icon>
+								<span>{{ item.label }}</span>
+							</button>
+						</nav>
+					</aside>
+
+					<main class="detail-main">
+						<section id="section-overview" class="detail-section detail-anchor">
+							<div class="section-heading">
+								<div>
+									<h2>设备概览</h2>
+									<p>基础标识、业务归属和硬件分组</p>
+								</div>
+							</div>
+							<div class="information-grid">
+								<div class="information-group">
+									<h3>设备标识</h3>
+									<dl class="detail-list">
+										<div class="detail-row">
+											<dt>设备名称</dt>
+											<dd>{{ displayValue(detail.name) }}</dd>
+										</div>
+										<div class="detail-row">
+											<dt>设备类型</dt>
+											<dd><dict-tag :options="hard_type" :value="detail.type" /></dd>
+										</div>
+										<div class="detail-row">
+											<dt>设备 ID</dt>
+											<dd class="numeric-value">{{ displayValue(detail.id) }}</dd>
+										</div>
+										<div class="detail-row">
+											<dt>{{ isPrinterAsset ? "设备编号" : "唯一编号" }}</dt>
+											<dd class="break-all">
+												{{ isPrinterAsset ? "不适用（无屏 USB 外设）" : displayValue(detail.uniqueCode,
+												"尚未绑定") }}
+											</dd>
+										</div>
+									</dl>
+								</div>
+								<div class="information-group">
+									<h3>业务归属</h3>
+									<dl class="detail-list">
+										<div class="detail-row">
+											<dt>所属商户</dt>
+											<dd>{{ displayNameWithId(detail.merchantName, detail.merchantId) }}</dd>
+										</div>
+										<div class="detail-row">
+											<dt>所属部门</dt>
+											<dd>{{ displayNameWithId(detail.deptName, detail.deptId) }}</dd>
+										</div>
+										<div class="detail-row">
+											<dt>硬件分组</dt>
+											<dd>{{ displayNameWithId(detail.hardGroupName, detail.hardGroupId) }}</dd>
+										</div>
+										<div class="detail-row">
+											<dt>取餐设备</dt>
+											<dd>
+												<el-switch v-if="!isPrinterAsset" v-model="takeFoodValue"
+													:disabled="!isRoleAdmin || takeFoodLoading"
+													:loading="takeFoodLoading" active-value="1" inactive-value="0"
+													inline-prompt active-text="是" inactive-text="否"
+													@change="changeTakeFood" />
+												<span v-else>不适用</span>
+												<span v-if="!isRoleAdmin && !isPrinterAsset"
+													class="ml-2 text-xs text-[var(--el-text-color-placeholder)]">
+													仅平台管理员可修改
+												</span>
+											</dd>
+										</div>
+									</dl>
+								</div>
+							</div>
+						</section>
+
+						<section id="section-runtime" class="detail-section detail-anchor">
+							<div class="section-heading">
+								<div>
+									<h2>运行状态</h2>
+									<p>在线状态来源于服务端心跳，不支持心跳的设备不会误判为离线</p>
+								</div>
+							</div>
+							<el-alert v-if="isPrinterAsset" type="info" show-icon :closable="false"
+								title="打印机不单独上报在线状态、心跳或 APK 版本" :description="printerProxyDescription" />
+							<el-alert v-else-if="!isRuntimeSupported" type="info" show-icon :closable="false"
+								title="当前设备类型暂未接入终端心跳和 APK 版本上报。" />
+							<div v-else class="runtime-overview">
+								<div class="runtime-primary">
+									<span class="runtime-indicator" :class="detail.online ? 'is-online' : 'is-offline'"
+										aria-hidden="true"></span>
+									<div>
+										<strong>{{ detail.online ? "设备在线" : "设备离线" }}</strong>
+										<p>{{ detail.online ? "终端心跳处于有效时间窗内" : "服务端未在有效时间窗内收到心跳" }}</p>
+									</div>
+								</div>
+								<dl class="runtime-facts">
+									<div>
+										<dt>最后在线时间</dt>
+										<dd>{{ displayValue(detail.lastOnlineTime, "尚未上报") }}</dd>
+									</div>
+									<div>
+										<dt>APK 版本</dt>
+										<dd>{{ apkVersionText }}</dd>
+									</div>
+									<div>
+										<dt>内部版本码</dt>
+										<dd>{{ displayValue(detail.apkVersionCode, "尚未上报") }}</dd>
+									</div>
+								</dl>
+							</div>
+							<el-alert v-if="isRuntimeSupported && !detail.online" class="mt-4" type="warning" show-icon
+								:closable="false" title="断线诊断" :description="runtimeDisconnectDescription" />
+						</section>
+
+						<section v-if="supportsMq" id="section-mq" class="detail-section detail-anchor">
+							<div class="section-heading">
+								<div>
+									<h2>MQ 通信配置</h2>
+									<p>终端连接地址、客户端标识和主题均来自设备主记录</p>
+								</div>
+								<el-button v-auth="'hard_hardManager_edit'" icon="Setting"
+									@click="mqFormDialogRef?.openDialog(String(detail.id))">
+									编辑 MQ 配置
+								</el-button>
+							</div>
+							<div class="configuration-status" :class="mqConfigured ? 'is-complete' : 'is-incomplete'">
+								<el-icon aria-hidden="true">
+									<CircleCheck v-if="mqConfigured" />
+									<Warning v-else />
+								</el-icon>
+								<div>
+									<strong>{{ mqConfigured ? "关键连接项已配置" : "MQ 配置缺少关键项" }}</strong>
+									<span>{{ mqConfigured ? "地址、端口、主题与账号可供终端连接" : "请检查地址、端口、主题和账号" }}</span>
+								</div>
+							</div>
+							<dl class="configuration-grid">
+								<div>
+									<dt>客户端 ID</dt>
+									<dd>{{ displayValue(detail.mqClientId, "尚未生成") }}</dd>
+								</div>
+								<div>
+									<dt>MQ 地址</dt>
+									<dd>{{ displayValue(detail.mqSocketAddress, "未配置") }}</dd>
+								</div>
+								<div>
+									<dt>MQ 端口</dt>
+									<dd>{{ displayValue(detail.mqSocketPort, "未配置") }}</dd>
+								</div>
+								<div>
+									<dt>MQ 用户名</dt>
+									<dd>{{ displayValue(detail.mqUsername, "尚未生成") }}</dd>
+								</div>
+								<div class="configuration-grid__wide">
+									<dt>主订阅 Topic</dt>
+									<dd class="break-all">{{ displayValue(detail.mainTopic, "尚未生成") }}</dd>
+								</div>
+								<div>
+									<dt>连接密码</dt>
+									<dd>{{ secretState(detail.mqPassword) }}</dd>
+								</div>
+							</dl>
+						</section>
+
+						<section v-if="supportsFace" id="section-face" class="detail-section detail-anchor">
+							<div class="section-heading">
+								<div>
+									<h2>人脸识别配置</h2>
+									<p>仅展示配置完整度，SDK 密钥和激活密钥不会在详情页明文显示</p>
+								</div>
+								<el-button v-auth="'hard_hardManager_edit'" icon="SetUp"
+									@click="faceFormDialogRef?.openDialog(String(detail.id))">
+									编辑人脸配置
+								</el-button>
+							</div>
+							<div class="configuration-status" :class="faceConfigured ? 'is-complete' : 'is-incomplete'">
+								<el-icon aria-hidden="true">
+									<CircleCheck v-if="faceConfigured" />
+									<Warning v-else />
+								</el-icon>
+								<div>
+									<strong>{{ faceConfigured ? "人脸 SDK 授权已配置" : "人脸 SDK 配置不完整" }}</strong>
+									<span>{{ faceConfigured ? "App ID、SDK Key 和 Active Key 均已维护" : "请补齐三项授权信息后再进行终端识别"
+										}}</span>
+								</div>
+							</div>
+							<dl class="configuration-grid">
+								<div>
+									<dt>人脸 App ID</dt>
+									<dd>{{ displayValue(detail.faceAppId, "未配置") }}</dd>
+								</div>
+								<div>
+									<dt>SDK Key</dt>
+									<dd>{{ secretState(detail.faceSdkKey) }}</dd>
+								</div>
+								<div>
+									<dt>Active Key</dt>
+									<dd>{{ secretState(detail.faceActiveKey) }}</dd>
+								</div>
+							</dl>
+						</section>
+
+						<section v-if="supportsPrinter" id="section-printer" class="detail-section detail-anchor">
+							<div class="section-heading">
+								<div>
+									<h2>打印配置</h2>
+									<p>{{ isPrinterAsset ? "无屏打印机资产的代理终端与 USB 参数" : "业务终端代理的尔印 USB 打印机" }}</p>
+								</div>
+								<div class="section-actions" v-auth="'hard_hardManager_printer_bind'">
+									<template v-if="isBusinessTerminal">
+										<el-button v-if="!detail.boundPrinterHardId" type="primary" icon="Link"
+											@click="printerDialogRef?.openBind(detail)">
+											绑定打印机
+										</el-button>
+										<el-button v-else type="danger" plain icon="SwitchButton"
+											:loading="printerActionLoading" @click="unbindPrinter">
+											解除绑定
+										</el-button>
+									</template>
+									<el-button v-if="isPrinterAsset" type="primary" icon="Setting"
+										@click="printerDialogRef?.openConfig(detail)">
+										编辑打印参数
+									</el-button>
+								</div>
+							</div>
+							<template v-if="isBusinessTerminal">
+								<div class="binding-panel" :class="{ 'is-bound': detail.boundPrinterHardId }">
+									<div class="binding-node">
+										<el-icon>
+											<Monitor />
+										</el-icon>
+										<div>
+											<span>业务终端</span>
+											<strong>{{ displayValue(detail.name) }}</strong>
+										</div>
+									</div>
+									<div class="binding-connection">
+										<span></span>
+										<el-icon>
+											<Right />
+										</el-icon>
+									</div>
+									<div class="binding-node">
+										<el-icon>
+											<Printer />
+										</el-icon>
+										<div>
+											<span>尔印打印机</span>
+											<strong>{{ displayNameWithId(detail.boundPrinterHardName,
+												detail.boundPrinterHardId) }}</strong>
+										</div>
+									</div>
+								</div>
+								<dl v-if="detail.boundPrinterHardId" class="configuration-grid mt-4">
+									<div>
+										<dt>打印机型号</dt>
+										<dd>{{ displayValue(detail.printerModel, "等待终端上报") }}</dd>
+									</div>
+									<div>
+										<dt>USB VID / PID</dt>
+										<dd>{{ formatUsbId(detail.usbVendorId) }} / {{ formatUsbId(detail.usbProductId)
+											}}</dd>
+									</div>
+									<div>
+										<dt>纸张与切刀</dt>
+										<dd>{{ detail.paperWidth || 80 }} mm / {{ detail.autoCut === "0" ? "不自动切刀" :
+											"自动切刀" }}</dd>
+									</div>
+									<div>
+										<dt>图片指令模式</dt>
+										<dd>{{ displayValue(detail.imageMode, "GS_V0") }}</dd>
+									</div>
+								</dl>
+							</template>
+							<dl v-else class="configuration-grid">
+								<div>
+									<dt>来源业务终端</dt>
+									<dd>{{ displayNameWithId(detail.boundSourceHardName, detail.boundSourceHardId) }}
+									</dd>
+								</div>
+								<div>
+									<dt>打印机型号</dt>
+									<dd>{{ displayValue(detail.printerModel, "未填写") }}</dd>
+								</div>
+								<div>
+									<dt>USB VID / PID</dt>
+									<dd>{{ formatUsbId(detail.usbVendorId) }} / {{ formatUsbId(detail.usbProductId) }}
+									</dd>
+								</div>
+								<div>
+									<dt>纸张与切刀</dt>
+									<dd>{{ detail.paperWidth || 80 }} mm / {{ detail.autoCut === "0" ? "不自动切刀" : "自动切刀"
+										}}</dd>
+								</div>
+								<div>
+									<dt>图片指令模式</dt>
+									<dd>{{ displayValue(detail.imageMode, "GS_V0") }}</dd>
+								</div>
+							</dl>
+						</section>
+
+						<section v-if="showLogSection" id="section-logs" class="detail-section detail-anchor">
+							<div class="section-heading">
+								<div>
+									<h2>终端日志</h2>
+									<p>按设备查看已上传日志文件，拉取指令会等待终端侧支付和识别任务完成</p>
+								</div>
+								<div class="section-actions">
+									<el-button icon="Refresh" :loading="logLoading" @click="loadLogs">刷新文件</el-button>
+									<el-button v-if="canPullLogs" type="primary" icon="Promotion" :loading="pullingLog"
+										@click="pullCurrentLog">
+										拉取当前日志
+									</el-button>
+								</div>
+							</div>
+							<div class="log-summary">
+								<div>
+									<span>已上传文件</span>
+									<strong>{{ logFileCount }}</strong>
+								</div>
+								<div>
+									<span>最近上传</span>
+									<strong>{{ logSummary?.latestUploadTime || "尚未上传" }}</strong>
+								</div>
+								<div>
+									<span>终端编号</span>
+									<strong>{{ logSummary?.uniqueCode || detail.uniqueCode || "--" }}</strong>
+								</div>
+							</div>
+							<div class="log-workspace" v-loading="logLoading">
+								<div class="log-tree">
+									<div class="log-workspace__header">日志文件</div>
+									<el-tree v-if="logTree.length" :data="logTree" node-key="key"
+										:props="{ label: 'label', children: 'children' }" :highlight-current="true"
+										@node-click="selectLogFile">
+										<template #default="{ data }">
+											<span class="log-tree-node">
+												<el-icon aria-hidden="true">
+													<FolderOpened v-if="data.directory" />
+													<Document v-else />
+												</el-icon>
+												<span :title="data.label">{{ data.label }}</span>
+											</span>
+										</template>
+									</el-tree>
+									<el-empty v-else :image-size="54" description="该设备尚未上传日志" />
+								</div>
+								<div class="log-preview">
+									<div class="log-workspace__header">
+										<span>{{ selectedLogFile?.label || "日志预览" }}</span>
+										<el-button v-if="selectedLogFile && canDownloadLogs" link type="primary"
+											icon="Download" @click="downloadSelectedLog">
+											下载
+										</el-button>
+									</div>
+									<div v-loading="logPreviewLoading" class="log-preview__body">
+										<pre v-if="logPreview?.content">{{ logPreview.content }}</pre>
+										<el-empty v-else :image-size="64"
+											:description="selectedLogFile ? (canPreviewLogs ? '暂无可预览内容' : '暂无日志预览权限') : '请选择日志文件'" />
+									</div>
+								</div>
+							</div>
+						</section>
+
+						<section v-if="isSmartCabinet" id="section-cabinet" class="detail-section detail-anchor">
+							<div class="section-heading">
+								<div>
+									<h2>智能柜管理</h2>
+									<p>设备状态、SIM 信号、音量和各货柜门锁信息</p>
+								</div>
+								<div class="section-actions">
+									<el-button icon="Refresh" :loading="cabinetLoading" @click="loadCabinetDetail"> 刷新柜体
+									</el-button>
+									<el-button v-auth="'hard_hardManager_edit'" icon="Edit"
+										@click="infoSettingRef?.openDialog(String(detail.id))">
+										柜体设置
+									</el-button>
+									<el-button v-auth="'hard_hardManager_edit'" icon="Operation"
+										:disabled="!hardDoorDetail?.hardId" @click="openVolumeSetting">
+										音量设置
+									</el-button>
+									<el-button type="primary" plain icon="Goods" @click="openCabinetGoods"> 货柜商品管理
+									</el-button>
+								</div>
+							</div>
+
+							<el-alert v-if="cabinetError" type="warning" show-icon :closable="false"
+								:title="cabinetError" />
+							<template v-else-if="hardDoorDetail?.id">
+								<div class="cabinet-runtime">
+									<div>
+										<span>网络</span>
+										<el-tag :type="hardDoorDetail.netStatus === 1 ? 'success' : 'danger'">
+											{{ hardDoorDetail.netStatus === 1 ? "在线" : "离线" }}
+										</el-tag>
+									</div>
+									<div>
+										<span>电源</span>
+										<el-tag :type="hardDoorDetail.powerStatus === 1 ? 'success' : 'danger'">
+											{{ hardDoorDetail.powerStatus === 1 ? "通电" : "断电" }}
+										</el-tag>
+									</div>
+									<div>
+										<span>售卖</span>
+										<el-tag :type="hardDoorDetail.saleStatus === 1 ? 'success' : 'warning'">
+											{{ hardDoorDetail.saleStatus === 1 ? "在售" : "停售" }}
+										</el-tag>
+									</div>
+									<div>
+										<span>SIM 信号</span>
+										<el-tag :type="signalQuality.type">{{ signalQuality.label }}</el-tag>
+									</div>
+								</div>
+								<dl class="configuration-grid cabinet-device-grid">
+									<div>
+										<dt>内置设备编号</dt>
+										<dd>{{ displayValue(hardDoorDetail.deviceCode) }}</dd>
+									</div>
+									<div>
+										<dt>IMEI</dt>
+										<dd>{{ displayValue(hardDoorDetail.imei) }}</dd>
+									</div>
+									<div>
+										<dt>SIM 卡号</dt>
+										<dd>{{ displayValue(hardDoorDetail.simSn) }}</dd>
+									</div>
+									<div>
+										<dt>柜体规格</dt>
+										<dd>{{ hardDoorDetail.cabinetNum || 0 }} 柜 / {{ hardDoorDetail.doorCount || 0 }}
+											层</dd>
+									</div>
+									<div>
+										<dt>摄像头 / 称重单元</dt>
+										<dd>{{ hardDoorDetail.cabinetCameraNum ?? "--" }} / {{
+											hardDoorDetail.cabinetWeightUnitNum ?? "--" }}</dd>
+									</div>
+									<div>
+										<dt>系统 / 媒体音量</dt>
+										<dd>{{ hardDoorDetail.systemVolume ?? "--" }} / {{ hardDoorDetail.mediaVolume ??
+											"--" }}</dd>
+									</div>
+									<div>
+										<dt>信号强度 / 信噪比</dt>
+										<dd>{{ hardDoorDetail.signalIntensity ?? "--" }} dBm / {{
+											hardDoorDetail.signalRatio ?? "--" }} dB</dd>
+									</div>
+									<div>
+										<dt>信号更新时间</dt>
+										<dd>{{ displayValue(hardDoorDetail.signalTime) }}</dd>
+									</div>
+									<div>
+										<dt>上次重启</dt>
+										<dd>{{ displayValue(hardDoorDetail.restartTime) }}</dd>
+									</div>
+								</dl>
+
+								<div class="cabinet-heading">
+									<div>
+										<h3>货柜状态</h3>
+										<p>选择货柜后可刷新收款码或执行检修开关门</p>
+									</div>
+									<div class="section-actions">
+										<el-button icon="RefreshRight" :disabled="!activeCabinet"
+											:loading="cabinetAction === 'qr'" @click="refreshCabinetQr">
+											刷新二维码
+										</el-button>
+										<el-button icon="Unlock" :disabled="!activeCabinet || cabinetAction !== ''"
+											:loading="cabinetAction === 'open'" @click="operateCabinetDoor('open')">
+											检修开门
+										</el-button>
+										<el-button icon="Lock" :disabled="!activeCabinet || cabinetAction !== ''"
+											:loading="cabinetAction === 'close'" @click="operateCabinetDoor('close')">
+											检修关门
+										</el-button>
+									</div>
+								</div>
+								<el-tabs v-if="hardDoorDetail.cabinetList?.length" v-model="activeCabinetId"
+									class="cabinet-tabs">
+									<el-tab-pane v-for="cabinet in hardDoorDetail.cabinetList" :key="String(cabinet.id)"
+										:name="String(cabinet.id)" :label="cabinetTabLabel(cabinet)">
+										<div class="cabinet-detail-grid">
+											<dl class="detail-list">
+												<div class="detail-row">
+													<dt>货柜编号</dt>
+													<dd>{{ cabinet.cabinetNo }}</dd>
+												</div>
+												<div class="detail-row">
+													<dt>锁连接</dt>
+													<dd>
+														<el-tag
+															:type="isCabinetLockOnline(cabinet) ? 'success' : 'danger'">
+															{{ isCabinetLockOnline(cabinet) ? "在线" : "离线" }}
+														</el-tag>
+													</dd>
+												</div>
+												<div class="detail-row">
+													<dt>锁状态</dt>
+													<dd>{{ cabinet.lockStatus === 1 ? "已开锁" : cabinet.lockStatus === 2 ?
+														"已关锁" : "--" }}</dd>
+												</div>
+												<div class="detail-row">
+													<dt>柜门状态</dt>
+													<dd>{{ cabinet.doorStatus === 1 ? "门已关闭" : cabinet.doorStatus === 2
+														? "门已打开" : "--" }}</dd>
+												</div>
+												<div class="detail-row">
+													<dt>售卖状态</dt>
+													<dd>{{ cabinet.saleStatus === 1 ? "在售" : cabinet.saleStatus === 2 ?
+														"停售" : "--" }}</dd>
+												</div>
+											</dl>
+											<div class="cabinet-qr-grid">
+												<div>
+													<span>收款二维码</span>
+													<preview-image :src="cabinet.qrCode" download
+														:downloadName="cabinetQrName(cabinet, '收款二维码')" />
+												</div>
+												<div>
+													<span>网页收款码</span>
+													<preview-image :src="cabinet.urlQrCode" download
+														:downloadName="cabinetQrName(cabinet, '网页收款码')" />
+												</div>
+												<div>
+													<span>支付宝码</span>
+													<preview-image :src="cabinet.urlAlipayQrCode" download
+														:downloadName="cabinetQrName(cabinet, '支付宝码')" />
+												</div>
+												<div>
+													<span>微信码</span>
+													<preview-image :src="cabinet.urlWechatQrCode" download
+														:downloadName="cabinetQrName(cabinet, '微信码')" />
+												</div>
+											</div>
+										</div>
+									</el-tab-pane>
+								</el-tabs>
+								<el-empty v-else description="该设备尚未上报货柜信息" />
+							</template>
+							<el-empty v-else description="尚未绑定智能柜配置">
+								<el-button v-auth="'hard_hardManager_edit'" type="primary"
+									@click="infoSettingRef?.openDialog(String(detail.id))">
+									绑定智能柜
+								</el-button>
+							</el-empty>
+						</section>
+
+						<section id="section-maintenance" class="detail-section detail-anchor">
+							<div class="section-heading">
+								<div>
+									<h2>维护信息</h2>
+									<p>设备记录的创建与最近修改信息</p>
+								</div>
+							</div>
+							<dl class="configuration-grid">
+								<div>
+									<dt>创建人</dt>
+									<dd>{{ displayValue(detail.createBy) }}</dd>
+								</div>
+								<div>
+									<dt>创建时间</dt>
+									<dd>{{ displayValue(detail.createTime) }}</dd>
+								</div>
+								<div>
+									<dt>最后修改人</dt>
+									<dd>{{ displayValue(detail.updateBy) }}</dd>
+								</div>
+								<div>
+									<dt>最后修改时间</dt>
+									<dd>{{ displayValue(detail.updateTime) }}</dd>
+								</div>
+							</dl>
+						</section>
+					</main>
+				</div>
+			</template>
+
+			<el-result v-else-if="!loading" icon="warning" title="无法打开设备详情" :sub-title="loadError || '未找到对应设备'">
+				<template #extra>
+					<el-button type="primary" @click="goBack">返回设备列表</el-button>
+					<el-button icon="Refresh" @click="loadPage">重新加载</el-button>
+				</template>
+			</el-result>
+		</div>
+
+		<form-dialog ref="formDialogRef" @refresh="loadPage" />
+		<face-form-dialog ref="faceFormDialogRef" @refresh="loadDeviceDetail" />
+		<mq-form-dialog ref="mqFormDialogRef" @refresh="loadDeviceDetail" />
+		<printer-dialog ref="printerDialogRef" @refresh="loadDeviceDetail" />
+		<info-setting ref="infoSettingRef" @refreshInfo="loadCabinetDetail" />
+		<volume-setting ref="volumeSettingRef" @refreshVolume="applyVolumeUpdate" />
+	</div>
+</template>
+
+<script setup lang="ts" name="systemHardManagerDetails">
+import {
+	Box,
+	CircleCheck,
+	Connection,
+	DataLine,
+	Document,
+	FolderOpened,
+	Monitor,
+	Printer,
+	Right,
+	Setting,
+	User,
+	Warning,
+} from "@element-plus/icons-vue"
+import type { Component } from "vue"
+import * as hardManageApi from "/@/api/hard/hard-manager"
+import * as hardDoorApi from "/@/api/hard/hard-door-manager"
+import * as printerApi from "/@/api/hard/hard-printer"
+import * as terminalLogApi from "/@/api/hard/hard-terminal-log-file"
+import type { TerminalLogDevice, TerminalLogPreview, TerminalLogTreeNode } from "/@/api/hard/hard-terminal-log-file"
+import { auth } from "/@/utils/authFunction"
+import { useDict } from "/@/hooks/dict"
+import { useMessage, useMessageBox } from "/@/hooks/message"
+import { useUserInfo } from "/@/stores/userInfo"
+
+/** 设备详情接口返回的基础、关联、心跳和打印机绑定字段。 */
+interface HardManagerDetail {
+	/** 设备雪花主键。 */
+	id?: string | number
+	/** 硬件分组主键。 */
+	hardGroupId?: string | number
+	/** 所属商户主键。 */
+	merchantId?: string | number
+	/** 所属部门主键。 */
+	deptId?: string | number
+	/** 设备展示名称。 */
+	name?: string
+	/** hard_type 字典设备类型编码。 */
+	type?: string
+	/** MQTT 客户端标识。 */
+	mqClientId?: string
+	/** 终端绑定或上报的唯一编号。 */
+	uniqueCode?: string
+	/** MQTT 主订阅主题。 */
+	mainTopic?: string
+	/** MQTT 服务地址。 */
+	mqSocketAddress?: string
+	/** MQTT 服务端口。 */
+	mqSocketPort?: string
+	/** MQTT 用户名。 */
+	mqUsername?: string
+	/** MQTT 密码，仅参与完整度判断。 */
+	mqPassword?: string
+	/** 是否作为商户取餐设备，1 是、0 否。 */
+	isTakeFood?: string
+	/** 人脸 SDK 应用编号。 */
+	faceAppId?: string
+	/** 人脸 SDK 授权密钥，仅参与完整度判断。 */
+	faceSdkKey?: string
+	/** 人脸 SDK 激活密钥，仅参与完整度判断。 */
+	faceActiveKey?: string
+	/** 设备创建人。 */
+	createBy?: string
+	/** 设备创建时间。 */
+	createTime?: string
+	/** 设备最近修改人。 */
+	updateBy?: string
+	/** 设备最近修改时间。 */
+	updateTime?: string
+	/** 所属部门名称。 */
+	deptName?: string
+	/** 所属商户名称。 */
+	merchantName?: string
+	/** 所属硬件分组名称。 */
+	hardGroupName?: string
+	/** 支持心跳设备的在线状态，不支持时为空。 */
+	online?: boolean | null
+	/** 服务端最近收到终端心跳的时间。 */
+	lastOnlineTime?: string
+	/** 最近上报的 APK 展示版本。 */
+	apkVersionName?: string
+	/** 最近上报的 APK 内部版本码。 */
+	apkVersionCode?: string | number
+	/** 服务端记录或推断的断线原因。 */
+	disconnectReason?: string
+	/** 业务终端绑定的尔印打印机主键。 */
+	boundPrinterHardId?: string | number
+	/** 业务终端绑定的尔印打印机名称。 */
+	boundPrinterHardName?: string
+	/** 打印机资产反向绑定的来源设备主键。 */
+	boundSourceHardId?: string | number
+	/** 打印机资产反向绑定的来源设备名称。 */
+	boundSourceHardName?: string
+	/** USB 打印机型号。 */
+	printerModel?: string
+	/** USB 厂商编号。 */
+	usbVendorId?: number
+	/** USB 产品编号。 */
+	usbProductId?: number
+	/** 热敏纸宽，单位毫米。 */
+	paperWidth?: number
+	/** 自动切刀开关，1 开启、0 关闭。 */
+	autoCut?: string
+	/** 图片打印指令模式。 */
+	imageMode?: string
+}
+
+/** 智能柜单个货柜的门锁、售卖和二维码信息。 */
+interface HardDoorCabinet {
+	/** 货柜雪花主键。 */
+	id?: string | number
+	/** 所属智能柜配置主键。 */
+	hardDoorId?: string | number
+	/** 设备内部货柜序号。 */
+	cabinetNo?: string | number
+	/** 锁连接状态，兼容历史 Y/N 与当前 1/2 协议。 */
+	isLockOnline?: string | number
+	/** 锁状态，1 开锁、2 关锁。 */
+	lockStatus?: number
+	/** 门状态，1 门关、2 门开。 */
+	doorStatus?: number
+	/** 售卖状态，1 在售、2 停售。 */
+	saleStatus?: number
+	/** 设备上报的原始收款二维码。 */
+	qrCode?: string
+	/** 网页收款二维码。 */
+	urlQrCode?: string
+	/** 支付宝小程序二维码。 */
+	urlAlipayQrCode?: string
+	/** 微信小程序二维码。 */
+	urlWechatQrCode?: string
+}
+
+/** 智能柜设备运行信息及其货柜列表。 */
+interface HardDoorDetail {
+	/** 智能柜配置雪花主键。 */
+	id?: string | number
+	/** 对应设备管理主键。 */
+	hardId?: string | number
+	/** 柜体层数。 */
+	doorCount?: number
+	/** 柜体内置设备编号。 */
+	deviceCode?: string
+	/** 设备 IMEI。 */
+	imei?: string
+	/** 货柜数量。 */
+	cabinetNum?: number
+	/** 单柜摄像头数量。 */
+	cabinetCameraNum?: number
+	/** 单柜称重单元数量。 */
+	cabinetWeightUnitNum?: number
+	/** 电源状态，1 通电、2 断电。 */
+	powerStatus?: number
+	/** 网络状态，1 在线、2 离线。 */
+	netStatus?: number
+	/** 售卖状态，1 在售、2 停售。 */
+	saleStatus?: number
+	/** SIM 卡序列号。 */
+	simSn?: string
+	/** SIM 信号强度，单位 dBm。 */
+	signalIntensity?: number
+	/** 信噪比，单位 dB。 */
+	signalRatio?: number
+	/** 信号数据更新时间。 */
+	signalTime?: string
+	/** 设备上次重启时间。 */
+	restartTime?: string
+	/** 系统音量。 */
+	systemVolume?: number
+	/** 媒体音量。 */
+	mediaVolume?: number
+	/** 当前设备上报的货柜集合。 */
+	cabinetList?: HardDoorCabinet[]
+}
+
+/** 右侧设备详情分区导航项。 */
+interface SectionNavItem {
+	/** 导航稳定键。 */
+	key: string
+	/** 导航显示名称。 */
+	label: string
+	/** 页面分区元素 ID。 */
+	targetId: string
+	/** Element Plus 线性图标组件。 */
+	icon: Component
+}
+
+/** 状态标签文本与 Element Plus 语义色。 */
+interface StatusDescriptor {
+	/** 面向运维人员的状态文本。 */
+	label: string
+	/** Element Plus 标签语义类型。 */
+	type: "success" | "warning" | "danger" | "info"
+}
+
+/** 设备类型字典。 */
+const { hard_type } = useDict("hard_type")
+/** 当前路由用于读取设备主键。 */
+const route = useRoute()
+/** 路由实例用于返回列表或打开货柜商品管理。 */
+const router = useRouter()
+/** 当前用户信息用于兼容原有取餐机开关的平台管理员限制。 */
+const userStore = useUserInfo()
+/** 支持终端心跳与 APK 状态上报的设备类型编码。 */
+const runtimeSupportedTypes = ["1", "2"]
+/** 超市和食堂业务终端，目前也是唯一会上传文件日志的设备类型。 */
+const businessTerminalTypes = ["1", "2"]
+/** 不适用 MQTT 和人脸配置的云设备类型编码。 */
+const terminalConfigurationExcludedTypes = ["9", "10", "11", "12"]
+/** 终端日志查看权限。 */
+const LOG_VIEW_PERMISSION = "hard_hardTerminalLogFile_view"
+/** 终端日志预览权限。 */
+const LOG_PREVIEW_PERMISSION = "hard_hardTerminalLogFile_preview"
+/** 终端日志下载权限。 */
+const LOG_DOWNLOAD_PERMISSION = "hard_hardTerminalLogFile_down"
+/** 终端日志拉取权限。 */
+const LOG_PULL_PERMISSION = "hard_hardTerminalLogFile_pull"
+
+/** 新增和编辑设备弹窗。 */
+const FormDialog = defineAsyncComponent(() => import("./form.vue"))
+/** 人脸 SDK 配置弹窗。 */
+const FaceFormDialog = defineAsyncComponent(() => import("./face-form.vue"))
+/** MQTT 配置弹窗。 */
+const MqFormDialog = defineAsyncComponent(() => import("./mq-form.vue"))
+/** 打印机绑定与配置弹窗。 */
+const PrinterDialog = defineAsyncComponent(() => import("./printer-dialog.vue"))
+/** 智能柜基础信息设置弹窗。 */
+const InfoSetting = defineAsyncComponent(() => import("../hard-door-manager/info-setting.vue"))
+/** 智能柜音量设置弹窗。 */
+const VolumeSetting = defineAsyncComponent(() => import("../hard-door-manager/volume-setting.vue"))
+
+/** 页面内部滚动容器。 */
+const detailContainerRef = ref<HTMLElement>()
+/** 设备编辑弹窗实例。 */
+const formDialogRef = ref<any>()
+/** 人脸配置弹窗实例。 */
+const faceFormDialogRef = ref<any>()
+/** MQTT 配置弹窗实例。 */
+const mqFormDialogRef = ref<any>()
+/** 打印机弹窗实例。 */
+const printerDialogRef = ref<any>()
+/** 智能柜基础设置弹窗实例。 */
+const infoSettingRef = ref<any>()
+/** 智能柜音量设置弹窗实例。 */
+const volumeSettingRef = ref<any>()
+/** 页面首屏与全量刷新加载状态。 */
+const loading = ref(false)
+/** 页面无法展示设备时的可恢复错误信息。 */
+const loadError = ref("")
+/** 单设备详情数据。 */
+const detail = reactive<HardManagerDetail>({})
+/** 取餐机开关的独立表单值，失败时可恢复。 */
+const takeFoodValue = ref("0")
+/** 取餐机开关提交状态。 */
+const takeFoodLoading = ref(false)
+/** 打印机解绑提交状态。 */
+const printerActionLoading = ref(false)
+/** 当前设备的日志聚合信息。 */
+const logSummary = ref<TerminalLogDevice>()
+/** 当前设备的日志目录树。 */
+const logTree = ref<TerminalLogTreeNode[]>([])
+/** 当前选择的日志文件。 */
+const selectedLogFile = ref<TerminalLogTreeNode>()
+/** 当前日志文件预览。 */
+const logPreview = ref<TerminalLogPreview>()
+/** 日志目录加载状态。 */
+const logLoading = ref(false)
+/** 日志内容预览加载状态。 */
+const logPreviewLoading = ref(false)
+/** 终端日志拉取指令提交状态。 */
+const pullingLog = ref(false)
+/** 智能柜运行与货柜详情。 */
+const hardDoorDetail = ref<HardDoorDetail>()
+/** 智能柜详情加载状态。 */
+const cabinetLoading = ref(false)
+/** 智能柜独立加载失败信息。 */
+const cabinetError = ref("")
+/** 当前选中的货柜主键。 */
+const activeCabinetId = ref("")
+/** 当前智能柜动作，空字符串表示空闲。 */
+const cabinetAction = ref<"" | "qr" | "open" | "close">("")
+/** 当前右侧导航高亮分区。 */
+const activeSectionKey = ref("overview")
+/** 导航点击后的短时高亮锁，避免平滑滚动过程反复跳项。 */
+let navSelectionLockUntil = 0
+/** 滚动事件合并到动画帧的句柄。 */
+let sectionScrollFrame: number | null = null
+
+/** 当前路由中的设备主键。 */
+const deviceId = computed(() => String(route.query.id || ""))
+/** 当前设备是否支持心跳和 APK 状态能力。 */
+const isRuntimeSupported = computed(() => runtimeSupportedTypes.includes(String(detail.type)))
+/** 当前设备是否支持自动上传和后台拉取终端日志。 */
+const supportsTerminalLogs = computed(() => businessTerminalTypes.includes(String(detail.type)))
+/** 当前设备是否适用 MQTT 配置。 */
+const supportsMq = computed(() => !terminalConfigurationExcludedTypes.includes(String(detail.type)))
+/** 当前设备是否适用人脸 SDK 配置。 */
+const supportsFace = computed(() => !terminalConfigurationExcludedTypes.includes(String(detail.type)))
+/** 当前设备是否为超市或食堂业务终端。 */
+const isBusinessTerminal = computed(() => businessTerminalTypes.includes(String(detail.type)))
+/** 当前设备是否为无屏 EY_PRINT 打印机资产。 */
+const isPrinterAsset = computed(() => String(detail.type) === "12")
+/** 当前设备是否提供打印绑定或参数配置。 */
+const supportsPrinter = computed(() => isBusinessTerminal.value || isPrinterAsset.value)
+/** 当前设备是否为生鲜智能柜。 */
+const isSmartCabinet = computed(() => String(detail.type) === "4")
+/** 当前账号是否为沿用原逻辑的平台管理员。 */
+const isRoleAdmin = computed(() => userStore.userInfos.roleCodes?.includes("ROLE_ADMIN"))
+/** 当前账号是否可查看终端日志。 */
+const canViewLogs = computed(() => auth(LOG_VIEW_PERMISSION))
+/** 当前账号是否可预览终端日志。 */
+const canPreviewLogs = computed(() => auth(LOG_PREVIEW_PERMISSION))
+/** 当前账号是否可下载终端日志。 */
+const canDownloadLogs = computed(() => auth(LOG_DOWNLOAD_PERMISSION))
+/** 当前账号是否可向终端发送日志拉取指令。 */
+const canPullLogs = computed(() => auth(LOG_PULL_PERMISSION))
+/** 日志区仅对超市、食堂终端及有查看权限的账号展示。 */
+const showLogSection = computed(() => supportsTerminalLogs.value && canViewLogs.value)
+/** MQTT 地址、端口、主题和账号均存在时视为关键连接项完整。 */
+const mqConfigured = computed(() =>
+	Boolean(detail.mqSocketAddress && detail.mqSocketPort && detail.mainTopic && detail.mqUsername && detail.mqPassword),
+)
+/** 人脸 SDK 三项授权信息均存在时视为配置完整。 */
+const faceConfigured = computed(() => Boolean(detail.faceAppId && detail.faceSdkKey && detail.faceActiveKey))
+/** 打印能力按业务终端绑定或打印机资产参数维护情况判断。 */
+const printerConfigured = computed(() =>
+	isBusinessTerminal.value ? Boolean(detail.boundPrinterHardId) : Boolean(detail.boundSourceHardId && detail.printerModel),
+)
+/** 当前设备类型适用的可配置能力数量。 */
+const availableCapabilityCount = computed(
+	() => Number(supportsMq.value) + Number(supportsFace.value) + Number(supportsPrinter.value) + Number(isSmartCabinet.value),
+)
+/** 当前设备已完成关键项的能力数量。 */
+const configuredCapabilityCount = computed(
+	() =>
+		Number(supportsMq.value && mqConfigured.value) +
+		Number(supportsFace.value && faceConfigured.value) +
+		Number(supportsPrinter.value && printerConfigured.value) +
+		Number(isSmartCabinet.value && Boolean(hardDoorDetail.value?.id)),
+)
+/** 当前设备日志文件总数。 */
+const logFileCount = computed(() => Number(logSummary.value?.fileCount || 0))
+/** APK 展示版本，未上报与不适用有不同语义。 */
+const apkVersionText = computed(() => {
+	if (!isRuntimeSupported.value) return "不适用"
+	return detail.apkVersionName ? "v" + detail.apkVersionName : "尚未上报"
+})
+/** 当前运行状态文案。 */
+const runtimeStatusText = computed(() => {
+	if (isPrinterAsset.value) return "由业务终端代理"
+	if (!isRuntimeSupported.value) return "暂不支持"
+	return detail.online ? "在线" : "离线"
+})
+/** 打印机资产当前绑定的代理终端文案。 */
+const printerProxyTargetText = computed(() =>
+	detail.boundSourceHardId ? displayNameWithId(detail.boundSourceHardName, detail.boundSourceHardId) : "尚未绑定业务终端",
+)
+/** 无屏打印机资产的运行状态说明，避免把缺少独立心跳误判为离线。 */
+const printerProxyDescription = computed(() =>
+	detail.boundSourceHardId
+		? `${printerProxyTargetText.value} 负责 USB 发现、设备信息上报、MQTT 任务接收、打印和结果回执；请在该业务终端查看实际在线与 USB 状态。`
+		: "当前尚未绑定业务终端。请先绑定同商户、同部门的食堂或超市终端，再在该终端的“打印机信息”页面刷新并上报 USB 设备。",
+)
+/** 根据业务终端心跳信息生成恢复建议。 */
+const runtimeDisconnectDescription = computed(() => {
+	return detail.disconnectReason || "终端心跳已超出有效时间窗，请检查设备供电、应用运行状态、网络和后端服务。"
+})
+/** 当前选中的智能货柜。 */
+const activeCabinet = computed(() => hardDoorDetail.value?.cabinetList?.find((item) => String(item.id) === activeCabinetId.value))
+/** SIM 信号结合强度和信噪比阈值形成可操作的质量标签。 */
+const signalQuality = computed<StatusDescriptor>(() => {
+	const intensity = hardDoorDetail.value?.signalIntensity
+	const ratio = hardDoorDetail.value?.signalRatio
+	if (intensity == null && ratio == null) return { label: "尚未上报", type: "info" }
+	if ((intensity != null && intensity < -105) || (ratio != null && ratio <= 0)) {
+		return { label: "较差", type: "danger" }
+	}
+	if ((intensity != null && intensity <= -95) || (ratio != null && ratio <= 15)) {
+		return { label: "一般", type: "warning" }
+	}
+	return { label: "良好", type: "success" }
+})
+/** 按设备实际能力生成右侧导航，避免出现不可达或无权限入口。 */
+const sectionNavItems = computed<SectionNavItem[]>(() => {
+	const items: SectionNavItem[] = [
+		{ key: "overview", label: "设备概览", targetId: "section-overview", icon: Monitor },
+		{ key: "runtime", label: "运行状态", targetId: "section-runtime", icon: DataLine },
+	]
+	if (supportsMq.value) items.push({ key: "mq", label: "MQ 通信", targetId: "section-mq", icon: Connection })
+	if (supportsFace.value) items.push({ key: "face", label: "人脸配置", targetId: "section-face", icon: User })
+	if (supportsPrinter.value) items.push({ key: "printer", label: "打印配置", targetId: "section-printer", icon: Printer })
+	if (showLogSection.value) items.push({ key: "logs", label: "终端日志", targetId: "section-logs", icon: Document })
+	if (isSmartCabinet.value) items.push({ key: "cabinet", label: "智能柜", targetId: "section-cabinet", icon: Box })
+	items.push({ key: "maintenance", label: "维护信息", targetId: "section-maintenance", icon: Setting })
+	return items
+})
+
+/** 将空值统一格式化为明确占位文案，数字零保留。 */
+function displayValue(value: unknown, emptyText = "--"): string {
+	return value === null || value === undefined || value === "" ? emptyText : String(value)
+}
+
+/** 将关联名称和主键组合展示，名称缺失时仍保留可排查的主键。 */
+function displayNameWithId(name: unknown, id: unknown): string {
+	if (name && id) return String(name) + "（" + String(id) + "）"
+	return displayValue(name || id)
+}
+
+/** 敏感字段只返回配置状态，避免运维详情页泄露密钥。 */
+function secretState(value: unknown): string {
+	return value ? "已配置（内容已隐藏）" : "未配置"
+}
+
+/** 将十进制 USB 标识格式化为四位十六进制。 */
+function formatUsbId(value: unknown): string {
+	if (value === null || value === undefined || value === "") return "未填"
+	const numberValue = Number(value)
+	return Number.isFinite(numberValue) ? "0x" + numberValue.toString(16).toUpperCase().padStart(4, "0") : String(value)
+}
+
+/** 返回设备列表并尽量保留浏览历史中的列表筛选状态。 */
+function goBack(): void {
+	if (window.history.length > 1) {
+		router.back()
+		return
+	}
+	router.push("/hard/hard-manager/index")
+}
+
+/** 加载页面所需设备、日志和智能柜数据，各扩展区失败不会抹掉基础详情。 */
+async function loadPage(): Promise<void> {
+	if (!deviceId.value) {
+		Object.keys(detail).forEach((key) => delete detail[key as keyof HardManagerDetail])
+		loadError.value = "链接中缺少设备 ID"
+		return
+	}
+	loading.value = true
+	loadError.value = ""
+	try {
+		await loadDeviceDetail()
+		await Promise.all([
+			showLogSection.value ? loadLogs() : Promise.resolve(),
+			isSmartCabinet.value ? loadCabinetDetail() : Promise.resolve(),
+		])
+		await nextTick()
+		updateActiveSection()
+	} catch (error: any) {
+		Object.keys(detail).forEach((key) => delete detail[key as keyof HardManagerDetail])
+		loadError.value = error?.msg || "设备详情加载失败，请稍后重试"
+		useMessage().error(loadError.value)
+	} finally {
+		loading.value = false
+	}
+}
+
+/** 从现有单设备接口读取完整设备视图并同步取餐机开关。 */
+async function loadDeviceDetail(): Promise<void> {
+	const response: any = await hardManageApi.getObj(deviceId.value)
+	if (!response?.data?.id) throw new Error("设备不存在或已被删除")
+	Object.assign(detail, response.data)
+	takeFoodValue.value = String(detail.isTakeFood ?? "0")
+}
+
+/** 提交取餐机开关，失败时回滚为服务端当前值。 */
+async function changeTakeFood(value: string | number | boolean): Promise<void> {
+	if (!detail.id || !detail.merchantId || !isRoleAdmin.value) return
+	const previousValue = String(detail.isTakeFood ?? "0")
+	takeFoodLoading.value = true
+	try {
+		await hardManageApi.putObj({
+			id: String(detail.id),
+			merchantId: String(detail.merchantId),
+			isTakeFood: String(value),
+		})
+		detail.isTakeFood = String(value)
+		useMessage().success("取餐设备设置已更新")
+	} catch (error: any) {
+		takeFoodValue.value = previousValue
+		useMessage().error(error?.msg || "取餐设备设置失败")
+	} finally {
+		takeFoodLoading.value = false
+	}
+}
+
+/** 解除业务终端的一对一打印机绑定，并刷新设备详情。 */
+async function unbindPrinter(): Promise<void> {
+	if (!detail.id) return
+	try {
+		await useMessageBox().confirm(
+			"确认解除“" + displayValue(detail.name) + "”与“" + displayValue(detail.boundPrinterHardName, "尔印打印机") + "”的绑定？",
+		)
+	} catch {
+		return
+	}
+	printerActionLoading.value = true
+	try {
+		await printerApi.unbind(String(detail.id))
+		useMessage().success("打印机绑定已解除")
+		await loadDeviceDetail()
+	} catch (error: any) {
+		useMessage().error(error?.msg || "解绑失败")
+	} finally {
+		printerActionLoading.value = false
+	}
+}
+
+/** 加载当前设备的日志汇总和文件树。 */
+async function loadLogs(): Promise<void> {
+	if (!deviceId.value || !supportsTerminalLogs.value || !canViewLogs.value) return
+	logLoading.value = true
+	try {
+		const [summaryResponse, treeResponse]: any[] = await Promise.all([
+			terminalLogApi.fetchDevicePage({ hardId: deviceId.value, current: 1, size: 1 }),
+			terminalLogApi.fetchFileTree({ hardId: deviceId.value }),
+		])
+		logSummary.value = summaryResponse.data?.records?.[0]
+		logTree.value = treeResponse.data || []
+		if (selectedLogFile.value && !findLogFile(logTree.value, selectedLogFile.value.key)) {
+			selectedLogFile.value = undefined
+			logPreview.value = undefined
+		}
+	} catch (error: any) {
+		logSummary.value = undefined
+		logTree.value = []
+		useMessage().error(error?.msg || "读取终端日志失败")
+	} finally {
+		logLoading.value = false
+	}
+}
+
+/** 在嵌套日志目录中定位指定文件。 */
+function findLogFile(nodes: TerminalLogTreeNode[], key: string): TerminalLogTreeNode | undefined {
+	for (const node of nodes) {
+		if (!node.directory && node.key === key) return node
+		const child = findLogFile(node.children || [], key)
+		if (child) return child
+	}
+	return undefined
+}
+
+/** 选择文件后按权限加载文本预览，目录节点仅负责展开收起。 */
+async function selectLogFile(node: TerminalLogTreeNode): Promise<void> {
+	if (node.directory) return
+	selectedLogFile.value = node
+	logPreview.value = undefined
+	if (!canPreviewLogs.value || node.fileId == null) return
+	logPreviewLoading.value = true
+	try {
+		const response: any = await terminalLogApi.fetchPreview(node.fileId)
+		logPreview.value = response.data
+	} catch (error: any) {
+		useMessage().error(error?.msg || "读取日志预览失败")
+	} finally {
+		logPreviewLoading.value = false
+	}
+}
+
+/** 向当前终端发送日志拉取指令，终端异步上传后可手动刷新文件树。 */
+async function pullCurrentLog(): Promise<void> {
+	if (!detail.id || !supportsTerminalLogs.value || !canPullLogs.value || pullingLog.value) return
+	pullingLog.value = true
+	try {
+		await terminalLogApi.pullTerminalLog(String(detail.id))
+		useMessage().success("拉取指令已发送，终端完成当前任务后会上传日志")
+	} catch (error: any) {
+		useMessage().error(error?.msg || "日志拉取指令发送失败")
+	} finally {
+		pullingLog.value = false
+	}
+}
+
+/** 下载当前选中的完整日志文件。 */
+async function downloadSelectedLog(): Promise<void> {
+	if (selectedLogFile.value?.fileId == null || !canDownloadLogs.value) return
+	try {
+		const blob = await terminalLogApi.downloadFile(selectedLogFile.value.fileId)
+		const link = document.createElement("a")
+		link.href = URL.createObjectURL(blob)
+		link.download = selectedLogFile.value.label.replace(/[<>:\"/\\|?*]/g, "_").substring(0, 255)
+		link.style.display = "none"
+		document.body.appendChild(link)
+		link.click()
+		setTimeout(() => {
+			URL.revokeObjectURL(link.href)
+			link.remove()
+		}, 0)
+	} catch (error: any) {
+		useMessage().error(error?.msg || "日志下载失败")
+	}
+}
+
+/** 加载智能柜运行和货柜数据，空配置与接口错误分别反馈。 */
+async function loadCabinetDetail(): Promise<void> {
+	if (!deviceId.value || !isSmartCabinet.value) return
+	cabinetLoading.value = true
+	cabinetError.value = ""
+	try {
+		const response: any = await hardDoorApi.getByHardId({ hardId: deviceId.value })
+		hardDoorDetail.value = response.data || undefined
+		const cabinets = hardDoorDetail.value?.cabinetList || []
+		if (!cabinets.some((item) => String(item.id) === activeCabinetId.value)) {
+			activeCabinetId.value = cabinets[0]?.id == null ? "" : String(cabinets[0].id)
+		}
+	} catch (error: any) {
+		hardDoorDetail.value = undefined
+		cabinetError.value = error?.msg || "智能柜信息加载失败，请稍后重试"
+	} finally {
+		cabinetLoading.value = false
+	}
+}
+
+/** 打开智能柜音量设置并传入当前服务端值。 */
+function openVolumeSetting(): void {
+	if (!hardDoorDetail.value?.hardId) {
+		useMessage().warning("智能柜尚未完成绑定")
+		return
+	}
+	volumeSettingRef.value?.openDialog(
+		String(hardDoorDetail.value.hardId),
+		Number(hardDoorDetail.value.mediaVolume || 0),
+		Number(hardDoorDetail.value.systemVolume || 0),
+	)
+}
+
+/** 将音量弹窗保存结果同步到当前详情，避免额外整页闪烁。 */
+function applyVolumeUpdate(data: { hardId: string; mediaVolume: number; systemVolume: number }): void {
+	if (!hardDoorDetail.value || String(hardDoorDetail.value.hardId) !== String(data.hardId)) return
+	hardDoorDetail.value.mediaVolume = data.mediaVolume
+	hardDoorDetail.value.systemVolume = data.systemVolume
+}
+
+/** 打开原有货柜商品管理页，保留完整上下架流程。 */
+function openCabinetGoods(): void {
+	router.push({ path: "/hard/hard-door-manager/index", query: { id: deviceId.value } })
+}
+
+/** 生成货柜页签名称并附带门状态，状态不只依赖颜色表达。 */
+function cabinetTabLabel(cabinet: HardDoorCabinet): string {
+	const prefix = hardDoorDetail.value?.deviceCode || "货柜"
+	const doorState = cabinet.doorStatus === 1 ? "门关" : cabinet.doorStatus === 2 ? "门开" : "未知"
+	return prefix + "-" + displayValue(cabinet.cabinetNo) + " · " + doorState
+}
+
+/** 兼容历史 Y/1 在线值与当前接口文档的 1/2 枚举。 */
+function isCabinetLockOnline(cabinet: HardDoorCabinet): boolean {
+	return ["Y", "1"].includes(String(cabinet.isLockOnline).toUpperCase())
+}
+
+/** 生成智能柜二维码下载文件名。 */
+function cabinetQrName(cabinet: HardDoorCabinet, suffix: string): string {
+	return "货柜 " + displayValue(hardDoorDetail.value?.deviceCode) + "-" + displayValue(cabinet.cabinetNo) + " " + suffix
+}
+
+/** 刷新当前货柜收款二维码并就地更新预览。 */
+async function refreshCabinetQr(): Promise<void> {
+	const cabinet = activeCabinet.value
+	if (!cabinet?.hardDoorId || cabinet.cabinetNo == null || cabinetAction.value) return
+	cabinetAction.value = "qr"
+	try {
+		const response: any = await hardDoorApi.refreshQrCode({
+			hardDoorId: String(cabinet.hardDoorId),
+			cabinetNo: cabinet.cabinetNo,
+		})
+		cabinet.qrCode = response.data
+		useMessage().success("货柜二维码已刷新")
+	} catch (error: any) {
+		useMessage().error(error?.msg || "二维码刷新失败")
+	} finally {
+		cabinetAction.value = ""
+	}
+}
+
+/** 检修开关门前确认目标货柜，避免误操作生产设备。 */
+async function operateCabinetDoor(action: "open" | "close"): Promise<void> {
+	const cabinet = activeCabinet.value
+	if (!cabinet?.hardDoorId || cabinet.cabinetNo == null || cabinetAction.value) return
+	const actionText = action === "open" ? "打开" : "关闭"
+	try {
+		await useMessageBox().confirm("确认" + actionText + "货柜 " + displayValue(cabinet.cabinetNo) + "？该操作将立即发送到设备。")
+	} catch {
+		return
+	}
+	cabinetAction.value = action
+	try {
+		const payload = { hardDoorId: String(cabinet.hardDoorId), cabinetNo: cabinet.cabinetNo }
+		if (action === "open") {
+			await hardDoorApi.openAccess(payload)
+		} else {
+			await hardDoorApi.closeAccess(payload)
+		}
+		useMessage().success("检修" + actionText + "指令已发送")
+		await loadCabinetDetail()
+	} catch (error: any) {
+		useMessage().error(error?.msg || "检修" + actionText + "失败")
+	} finally {
+		cabinetAction.value = ""
+	}
+}
+
+/** 在当前详情容器中查找分区锚点，避免多标签缓存命中其他页面。 */
+function getSectionElement(targetId: string): HTMLElement | null {
+	return detailContainerRef.value?.querySelector<HTMLElement>("#" + targetId) || null
+}
+
+/** 点击右侧导航后平滑定位，系统要求减少动效时改为立即定位。 */
+function scrollToSection(item: SectionNavItem): void {
+	const target = getSectionElement(item.targetId)
+	if (!target) return
+	activeSectionKey.value = item.key
+	navSelectionLockUntil = window.performance.now() + 900
+	const behavior = window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth"
+	target.scrollIntoView({ behavior, block: "start" })
+}
+
+/** 根据各分区相对容器的位置更新导航高亮，滚到底部时固定最后一项。 */
+function updateActiveSection(): void {
+	const container = detailContainerRef.value
+	const items = sectionNavItems.value
+	if (!container || !items.length) return
+	if (container.scrollTop + container.clientHeight >= container.scrollHeight - 4) {
+		activeSectionKey.value = items[items.length - 1].key
+		return
+	}
+	const activationLine = container.getBoundingClientRect().top + Math.min(128, container.clientHeight * 0.2)
+	let currentKey = items[0].key
+	for (const item of items) {
+		const target = getSectionElement(item.targetId)
+		if (!target || target.getBoundingClientRect().top > activationLine) break
+		currentKey = item.key
+	}
+	activeSectionKey.value = currentKey
+}
+
+/** 页面滚动时每个动画帧最多计算一次导航位置。 */
+function handleDetailScroll(): void {
+	if (window.performance.now() < navSelectionLockUntil || sectionScrollFrame !== null) return
+	sectionScrollFrame = window.requestAnimationFrame(() => {
+		sectionScrollFrame = null
+		updateActiveSection()
+	})
+}
+
+/** 监听设备主键，支持后台多标签复用组件查看不同设备。 */
+watch(
+	() => route.query.id,
+	() => {
+		activeSectionKey.value = "overview"
+		detailContainerRef.value?.scrollTo({ top: 0 })
+		logSummary.value = undefined
+		logTree.value = []
+		selectedLogFile.value = undefined
+		logPreview.value = undefined
+		hardDoorDetail.value = undefined
+		loadPage()
+	},
+	{ immediate: true },
+)
+
+/** 页面销毁时释放尚未执行的导航动画帧。 */
+onBeforeUnmount(() => {
+	if (sectionScrollFrame !== null) window.cancelAnimationFrame(sectionScrollFrame)
+})
+</script>
+
+<style lang="scss" scoped>
+.device-detail-page {
+	overflow-x: hidden;
+	overflow-y: auto;
+	background: var(--el-fill-color-blank);
+}
+
+.detail-header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 20px;
+	padding: 18px 20px;
+	border-bottom: 1px solid var(--el-border-color-light);
+	background: var(--el-fill-color-blank);
+}
+
+.detail-header__identity {
+	min-width: 0;
+
+	h1 {
+		max-width: 100%;
+		margin: 0;
+		overflow-wrap: anywhere;
+		color: var(--el-text-color-primary);
+		font-size: 20px;
+		font-weight: 600;
+		line-height: 30px;
+	}
+
+	p {
+		display: flex;
+		margin: 5px 0 0;
+		flex-wrap: wrap;
+		gap: 6px;
+		color: var(--el-text-color-secondary);
+		font-size: 13px;
+		line-height: 20px;
+	}
+}
+
+.back-button {
+	height: 30px;
+	margin: -4px 0 5px -8px;
+	color: var(--el-text-color-secondary);
+}
+
+.detail-header__separator {
+	color: var(--el-border-color);
+}
+
+.detail-header__actions,
+.section-actions {
+	display: flex;
+	flex: none;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 8px;
+}
+
+.status-strip {
+	display: grid;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	border-bottom: 1px solid var(--el-border-color-light);
+	background: var(--el-fill-color-light);
+
+	&.has-terminal-logs {
+		grid-template-columns: repeat(4, minmax(0, 1fr));
+	}
+}
+
+.status-item {
+	display: flex;
+	min-width: 0;
+	flex-direction: column;
+	gap: 4px;
+	padding: 13px 20px;
+	border-right: 1px solid var(--el-border-color-lighter);
+
+	>span,
+	small {
+		overflow: hidden;
+		color: var(--el-text-color-secondary);
+		font-size: 12px;
+		line-height: 18px;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	strong {
+		color: var(--el-text-color-primary);
+		font-size: 17px;
+		font-weight: 600;
+		line-height: 24px;
+	}
+
+	.is-success {
+		color: var(--el-color-success);
+	}
+
+	.is-danger {
+		color: var(--el-color-danger);
+	}
+}
+
+.detail-body {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) 176px;
+	align-items: start;
+}
+
+.detail-main {
+	grid-row: 1;
+	grid-column: 1;
+	min-width: 0;
+	border-right: 1px solid var(--el-border-color-light);
+}
+
+.section-nav {
+	position: sticky;
+	z-index: 3;
+	top: 12px;
+	grid-row: 1;
+	grid-column: 2;
+	align-self: start;
+	padding: 20px 12px;
+}
+
+.section-nav__title {
+	padding: 0 10px 8px;
+	color: var(--el-text-color-placeholder);
+	font-size: 12px;
+	font-weight: 500;
+	line-height: 20px;
+}
+
+.section-nav__list {
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+}
+
+.section-nav__item {
+	position: relative;
+	display: flex;
+	width: 100%;
+	height: 40px;
+	align-items: center;
+	gap: 8px;
+	padding: 0 10px;
+	border: 0;
+	border-radius: 4px;
+	background: transparent;
+	color: var(--el-text-color-secondary);
+	font-size: 13px;
+	line-height: 20px;
+	text-align: left;
+	cursor: pointer;
+	transition: background-color 0.18s ease, color 0.18s ease;
+
+	.el-icon {
+		width: 16px;
+		flex: none;
+		font-size: 16px;
+	}
+
+	&::before {
+		position: absolute;
+		top: 9px;
+		bottom: 9px;
+		left: 0;
+		width: 3px;
+		border-radius: 0 2px 2px 0;
+		background: transparent;
+		content: "";
+	}
+
+	&:hover {
+		background: var(--el-fill-color-light);
+		color: var(--el-text-color-primary);
+	}
+
+	&:focus-visible {
+		outline: 2px solid var(--el-color-primary-light-5);
+		outline-offset: 1px;
+	}
+
+	&.is-active {
+		background: var(--el-color-primary-light-9);
+		color: var(--el-color-primary);
+		font-weight: 600;
+
+		&::before {
+			background: var(--el-color-primary);
+		}
+	}
+}
+
+.detail-section {
+	padding: 20px;
+	border-bottom: 1px solid var(--el-border-color-light);
+	background: var(--el-fill-color-blank);
+
+	&:last-child {
+		border-bottom: 0;
+	}
+}
+
+.detail-anchor {
+	scroll-margin-top: 12px;
+}
+
+.section-heading,
+.cabinet-heading {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 16px;
+	margin-bottom: 16px;
+
+	h2,
+	h3 {
+		margin: 0;
+		color: var(--el-text-color-primary);
+		font-size: 16px;
+		font-weight: 600;
+		line-height: 24px;
+	}
+
+	p {
+		margin: 3px 0 0;
+		color: var(--el-text-color-secondary);
+		font-size: 13px;
+		line-height: 20px;
+	}
+}
+
+.information-grid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	border-top: 1px solid var(--el-border-color-lighter);
+}
+
+.information-group {
+	min-width: 0;
+	padding: 15px 18px 4px 0;
+
+	&:nth-child(even) {
+		padding-right: 0;
+		padding-left: 18px;
+		border-left: 1px solid var(--el-border-color-lighter);
+	}
+
+	h3 {
+		margin: 0 0 8px;
+		color: var(--el-text-color-regular);
+		font-size: 14px;
+		font-weight: 600;
+		line-height: 22px;
+	}
+}
+
+.detail-list {
+	margin: 0;
+}
+
+.detail-row {
+	display: grid;
+	grid-template-columns: minmax(88px, 116px) minmax(0, 1fr);
+	gap: 12px;
+	padding: 7px 0;
+	font-size: 14px;
+	line-height: 22px;
+
+	dt {
+		color: var(--el-text-color-secondary);
+	}
+
+	dd {
+		min-width: 0;
+		margin: 0;
+		overflow-wrap: anywhere;
+		color: var(--el-text-color-primary);
+	}
+}
+
+.numeric-value {
+	font-variant-numeric: tabular-nums;
+}
+
+.runtime-overview {
+	display: grid;
+	grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
+	border: 1px solid var(--el-border-color-lighter);
+	border-radius: 4px;
+}
+
+.runtime-primary {
+	display: flex;
+	align-items: center;
+	gap: 14px;
+	padding: 18px;
+	border-right: 1px solid var(--el-border-color-lighter);
+
+	strong {
+		display: block;
+		color: var(--el-text-color-primary);
+		font-size: 16px;
+		line-height: 24px;
+	}
+
+	p {
+		margin: 3px 0 0;
+		color: var(--el-text-color-secondary);
+		font-size: 13px;
+		line-height: 20px;
+	}
+}
+
+.runtime-indicator {
+	width: 14px;
+	height: 14px;
+	flex: none;
+	border-radius: 50%;
+
+	&.is-online {
+		background: var(--el-color-success);
+		box-shadow: 0 0 0 5px var(--el-color-success-light-9);
+	}
+
+	&.is-offline {
+		background: var(--el-color-danger);
+		box-shadow: 0 0 0 5px var(--el-color-danger-light-9);
+	}
+}
+
+.runtime-facts {
+	display: grid;
+	margin: 0;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+
+	div {
+		min-width: 0;
+		padding: 16px;
+		border-right: 1px solid var(--el-border-color-lighter);
+
+		&:last-child {
+			border-right: 0;
+		}
+	}
+
+	dt {
+		margin-bottom: 6px;
+		color: var(--el-text-color-secondary);
+		font-size: 12px;
+		line-height: 18px;
+	}
+
+	dd {
+		margin: 0;
+		overflow-wrap: anywhere;
+		color: var(--el-text-color-primary);
+		font-size: 14px;
+		line-height: 20px;
+	}
+}
+
+.configuration-status {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	margin-bottom: 14px;
+	padding: 12px 14px;
+	border: 1px solid var(--el-border-color-lighter);
+	border-radius: 4px;
+	background: var(--el-fill-color-light);
+
+	.el-icon {
+		flex: none;
+		font-size: 20px;
+	}
+
+	strong,
+	span {
+		display: block;
+		line-height: 20px;
+	}
+
+	strong {
+		color: var(--el-text-color-primary);
+		font-size: 14px;
+	}
+
+	span {
+		margin-top: 2px;
+		color: var(--el-text-color-secondary);
+		font-size: 12px;
+	}
+
+	&.is-complete {
+		border-color: var(--el-color-success-light-7);
+		background: var(--el-color-success-light-9);
+
+		.el-icon {
+			color: var(--el-color-success);
+		}
+	}
+
+	&.is-incomplete {
+		border-color: var(--el-color-warning-light-7);
+		background: var(--el-color-warning-light-9);
+
+		.el-icon {
+			color: var(--el-color-warning);
+		}
+	}
+}
+
+.configuration-grid {
+	display: grid;
+	margin: 0;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	border-top: 1px solid var(--el-border-color-lighter);
+	border-left: 1px solid var(--el-border-color-lighter);
+
+	>div {
+		min-width: 0;
+		padding: 12px 14px;
+		border-right: 1px solid var(--el-border-color-lighter);
+		border-bottom: 1px solid var(--el-border-color-lighter);
+	}
+
+	dt {
+		margin-bottom: 5px;
+		color: var(--el-text-color-secondary);
+		font-size: 12px;
+		line-height: 18px;
+	}
+
+	dd {
+		margin: 0;
+		overflow-wrap: anywhere;
+		color: var(--el-text-color-primary);
+		font-size: 14px;
+		line-height: 20px;
+	}
+
+	.configuration-grid__wide {
+		grid-column: span 2;
+	}
+}
+
+.binding-panel {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr);
+	align-items: center;
+	padding: 18px;
+	border: 1px dashed var(--el-border-color);
+	border-radius: 4px;
+	background: var(--el-fill-color-light);
+
+	&.is-bound {
+		border-style: solid;
+		border-color: var(--el-color-success-light-7);
+	}
+}
+
+.binding-node {
+	display: flex;
+	min-width: 0;
+	align-items: center;
+	gap: 12px;
+	padding: 13px 14px;
+	border: 1px solid var(--el-border-color-lighter);
+	border-radius: 4px;
+	background: var(--el-fill-color-blank);
+
+	>.el-icon {
+		flex: none;
+		color: var(--el-color-primary);
+		font-size: 24px;
+	}
+
+	span,
+	strong {
+		display: block;
+		overflow: hidden;
+		line-height: 20px;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	span {
+		color: var(--el-text-color-secondary);
+		font-size: 12px;
+	}
+
+	strong {
+		color: var(--el-text-color-primary);
+		font-size: 14px;
+	}
+}
+
+.binding-connection {
+	display: flex;
+	align-items: center;
+
+	span {
+		height: 1px;
+		flex: 1;
+		background: var(--el-border-color);
+	}
+
+	.el-icon {
+		color: var(--el-text-color-placeholder);
+	}
+}
+
+.log-summary {
+	display: grid;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	border: 1px solid var(--el-border-color-lighter);
+	border-bottom: 0;
+
+	div {
+		min-width: 0;
+		padding: 10px 14px;
+		border-right: 1px solid var(--el-border-color-lighter);
+
+		&:last-child {
+			border-right: 0;
+		}
+	}
+
+	span,
+	strong {
+		display: block;
+		overflow: hidden;
+		line-height: 20px;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	span {
+		color: var(--el-text-color-secondary);
+		font-size: 12px;
+	}
+
+	strong {
+		color: var(--el-text-color-primary);
+		font-size: 14px;
+	}
+}
+
+.log-workspace {
+	display: grid;
+	height: 480px;
+	min-height: 0;
+	grid-template-columns: minmax(220px, 30%) minmax(0, 1fr);
+	border: 1px solid var(--el-border-color-lighter);
+	overflow: hidden;
+}
+
+.log-tree {
+	min-width: 0;
+	min-height: 0;
+	border-right: 1px solid var(--el-border-color-lighter);
+	overflow: auto;
+	overscroll-behavior: contain;
+	scrollbar-gutter: stable;
+}
+
+.log-preview {
+	display: flex;
+	min-width: 0;
+	min-height: 0;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.log-workspace__header {
+	display: flex;
+	height: 42px;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	padding: 0 12px;
+	border-bottom: 1px solid var(--el-border-color-lighter);
+	background: var(--el-fill-color-light);
+	color: var(--el-text-color-primary);
+	font-size: 13px;
+	font-weight: 600;
+}
+
+.log-tree-node {
+	display: flex;
+	min-width: 0;
+	align-items: center;
+	gap: 6px;
+
+	>span {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+
+.log-preview__body {
+	min-height: 0;
+	flex: 1;
+	overflow: auto;
+	overscroll-behavior: contain;
+	scrollbar-gutter: stable;
+	background: var(--el-bg-color-page);
+
+	pre {
+		min-height: 100%;
+		margin: 0;
+		padding: 14px 16px;
+		color: var(--el-text-color-primary);
+		font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+		font-size: 12px;
+		line-height: 20px;
+		white-space: pre-wrap;
+		word-break: break-word;
+	}
+}
+
+.cabinet-runtime {
+	display: grid;
+	margin-bottom: 14px;
+	grid-template-columns: repeat(4, minmax(0, 1fr));
+	border: 1px solid var(--el-border-color-lighter);
+
+	div {
+		display: flex;
+		min-height: 50px;
+		align-items: center;
+		justify-content: space-between;
+		gap: 8px;
+		padding: 8px 12px;
+		border-right: 1px solid var(--el-border-color-lighter);
+
+		&:last-child {
+			border-right: 0;
+		}
+	}
+
+	span {
+		color: var(--el-text-color-secondary);
+		font-size: 13px;
+	}
+}
+
+.cabinet-device-grid {
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.cabinet-heading {
+	margin-top: 22px;
+
+	h3 {
+		font-size: 15px;
+	}
+
+	p {
+		margin: 2px 0 0;
+	}
+}
+
+.cabinet-tabs {
+	border: 1px solid var(--el-border-color-lighter);
+	border-radius: 4px;
+
+	:deep(.el-tabs__header) {
+		margin: 0;
+		padding: 0 14px;
+		background: var(--el-fill-color-light);
+	}
+
+	:deep(.el-tabs__content) {
+		padding: 16px;
+	}
+}
+
+.cabinet-detail-grid {
+	display: grid;
+	grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
+	gap: 20px;
+}
+
+.cabinet-qr-grid {
+	display: grid;
+	grid-template-columns: repeat(4, minmax(96px, 1fr));
+	gap: 10px;
+
+	>div {
+		min-width: 0;
+		padding: 10px;
+		border: 1px solid var(--el-border-color-lighter);
+		border-radius: 4px;
+		text-align: center;
+
+		>span {
+			display: block;
+			margin-bottom: 8px;
+			overflow: hidden;
+			color: var(--el-text-color-secondary);
+			font-size: 12px;
+			line-height: 18px;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+}
+
+@media (max-width: 1180px) {
+	.detail-body {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	.detail-main {
+		grid-row: 2;
+		grid-column: 1;
+		border-right: 0;
+	}
+
+	.section-nav {
+		top: 0;
+		grid-row: 1;
+		grid-column: 1;
+		padding: 8px 12px;
+		border-bottom: 1px solid var(--el-border-color-light);
+		background: var(--el-bg-color-overlay);
+		box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
+	}
+
+	.section-nav__title {
+		display: none;
+	}
+
+	.section-nav__list {
+		flex-direction: row;
+		gap: 4px;
+		overflow-x: auto;
+		scrollbar-width: thin;
+	}
+
+	.section-nav__item {
+		width: auto;
+		min-width: max-content;
+		flex: none;
+		padding: 0 11px;
+
+		&::before {
+			top: auto;
+			right: 10px;
+			bottom: 0;
+			left: 10px;
+			width: auto;
+			height: 2px;
+			border-radius: 2px 2px 0 0;
+		}
+	}
+
+	.detail-anchor {
+		scroll-margin-top: 58px;
+	}
+
+	.status-strip {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	.status-strip.has-terminal-logs {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	.status-strip:not(.has-terminal-logs) .status-item:last-child {
+		grid-column: 1 / -1;
+		border-right: 0;
+	}
+
+	.status-item:nth-child(2) {
+		border-right: 0;
+	}
+
+	.status-item:nth-child(-n + 2) {
+		border-bottom: 1px solid var(--el-border-color-lighter);
+	}
+
+	.configuration-grid,
+	.cabinet-device-grid {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	.configuration-grid .configuration-grid__wide {
+		grid-column: span 2;
+	}
+
+	.cabinet-qr-grid {
+		grid-template-columns: repeat(2, minmax(96px, 1fr));
+	}
+}
+
+@media (max-width: 820px) {
+
+	.detail-header,
+	.section-heading,
+	.cabinet-heading {
+		flex-direction: column;
+	}
+
+	.detail-header__actions,
+	.section-actions {
+		justify-content: flex-start;
+	}
+
+	.information-grid,
+	.runtime-overview,
+	.log-workspace,
+	.cabinet-detail-grid {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	.information-group,
+	.information-group:nth-child(even) {
+		padding: 14px 0 4px;
+		border-left: 0;
+	}
+
+	.information-group+.information-group {
+		border-top: 1px solid var(--el-border-color-lighter);
+	}
+
+	.runtime-primary,
+	.log-tree {
+		border-right: 0;
+		border-bottom: 1px solid var(--el-border-color-lighter);
+	}
+
+	.log-tree {
+		max-height: 260px;
+	}
+
+	.log-workspace {
+		height: auto;
+	}
+
+	.log-preview {
+		height: 420px;
+	}
+
+	.cabinet-runtime {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	.cabinet-runtime div:nth-child(2) {
+		border-right: 0;
+	}
+
+	.cabinet-runtime div:nth-child(-n + 2) {
+		border-bottom: 1px solid var(--el-border-color-lighter);
+	}
+}
+
+@media (max-width: 560px) {
+
+	.detail-header,
+	.detail-section {
+		padding: 16px;
+	}
+
+	.status-strip,
+	.status-strip.has-terminal-logs,
+	.configuration-grid,
+	.cabinet-device-grid,
+	.log-summary {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	.status-item,
+	.status-item:nth-child(2),
+	.log-summary div,
+	.log-summary div:last-child {
+		border-right: 0;
+		border-bottom: 1px solid var(--el-border-color-lighter);
+	}
+
+	.status-item:last-child,
+	.log-summary div:last-child {
+		border-bottom: 0;
+	}
+
+	.status-strip:not(.has-terminal-logs) .status-item:last-child {
+		grid-column: auto;
+	}
+
+	.configuration-grid .configuration-grid__wide {
+		grid-column: auto;
+	}
+
+	.log-preview {
+		height: 360px;
+	}
+
+	.runtime-facts {
+		grid-template-columns: minmax(0, 1fr);
+
+		div,
+		div:last-child {
+			border-right: 0;
+			border-bottom: 1px solid var(--el-border-color-lighter);
+		}
+
+		div:last-child {
+			border-bottom: 0;
+		}
+	}
+
+	.binding-panel {
+		grid-template-columns: minmax(0, 1fr);
+		gap: 8px;
+	}
+
+	.binding-connection {
+		height: 26px;
+		justify-content: center;
+		transform: rotate(90deg);
+
+		span {
+			max-width: 28px;
+		}
+	}
+
+	.cabinet-qr-grid {
+		grid-template-columns: minmax(96px, 1fr);
+	}
+
+	.detail-row {
+		grid-template-columns: minmax(82px, 102px) minmax(0, 1fr);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.section-nav__item {
+		transition: none;
+	}
+}
+</style>
diff --git a/src/views/hard/hard-manager/form.vue b/src/views/hard/hard-manager/form.vue
index 5f292d1..2b2f0dd 100644
--- a/src/views/hard/hard-manager/form.vue
+++ b/src/views/hard/hard-manager/form.vue
@@ -1,34 +1,44 @@
 <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">
 						<el-input v-model="form.name" placeholder="请输入设备名" />
 					</el-form-item>
 				</el-col>
+
 				<el-col :span="24" class="mb20">
 					<el-form-item label="商户" prop="merchantId">
-						<select-mch :apiParams="{
-							parentIsNull: false
-						}" v-model="form.merchantId" placeholder="请选择商户" />
+						<select-mch v-model="form.merchantId" placeholder="请选择商户" />
 					</el-form-item>
 				</el-col>
+
+				<el-col v-if="['9', '10', '11'].includes(form.type)" :span="24" class="mb20">
+					<el-form-item label="设备唯一编号" prop="uniqueCode">
+						<el-input v-model="form.uniqueCode" placeholder="请输入设备唯一编号" />
+					</el-form-item>
+				</el-col>
+
 				<el-col v-if="false" :span="24" class="mb20">
 					<el-form-item label="分组" prop="hardGroupId">
 						<select-hard-group v-model="form.hardGroupId" placeholder="分组" />
 					</el-form-item>
 				</el-col>
+
 				<el-col :span="24" class="mb20">
 					<el-form-item label="设备类型" prop="type">
 						<dict-select v-model="form.type" dict-code="hard_type" clearable />
 					</el-form-item>
 				</el-col>
-				<el-col v-if="['10', '11'].includes(form.type)" :span="24" class="mb20">
-					<el-form-item label="唯一编号" prop="uniqueCode">
-						<el-input v-model="form.uniqueCode" placeholder="设备唯一编号" />
-					</el-form-item>
+
+				<el-col v-if="form.type === '12'" :span="24" class="mb20">
+					<el-alert
+						type="info"
+						show-icon
+						:closable="false"
+						title="尔印打印机是无屏 USB 外设，不需要设备唯一编号、账号或独立心跳；新增后请将它绑定到同商户、同部门的食堂或超市终端。"
+					/>
 				</el-col>
 			</el-row>
 		</el-form>
@@ -42,10 +52,8 @@
 </template>
 
 <script setup lang="ts" name="HardManagerDialog">
-import { useDict } from "/@/hooks/dict"
 import { useMessage } from "/@/hooks/message"
 import { getObj, addObj, putObj } from "/@/api/hard/hard-manager"
-import { rule } from "/@/utils/validate"
 const emit = defineEmits(["refresh"])
 
 // 定义变量内容
@@ -55,11 +63,11 @@ const loading = ref(false)
 // 定义字典
 
 // 提交表单数据
-const form = reactive({
+const form = reactive<any>({
 	id: "",
-	uniqueCode: "",
 	merchantId: "",
 	deptId: "",
+	uniqueCode: "",
 	name: "",
 	hardGroupId: "",
 	type: "",
@@ -68,9 +76,9 @@ const form = reactive({
 // 定义校验规则
 const dataRules = ref({
 	name: [{ required: true, message: "设备名不能为空", trigger: "blur" }],
-	uniqueCode: [{ required: true, message: "设备唯一编号不能为空", trigger: "blur" }],
 	merchantId: [{ required: true, message: "商户不能为空", trigger: "change" }],
 	hardGroupId: [{ required: true, message: "分组不能为空", trigger: "change" }],
+	uniqueCode: [{ required: true, message: "设备唯一编号不能为空", trigger: "change" }],
 	type: [{ required: true, message: "设备类型不能为空", trigger: "change" }],
 })
 
@@ -93,12 +101,16 @@ 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
-		form.id ? await putObj(form) : await addObj(form)
+		const _params = { ...form }
+		if (!["9", "10", "11"].includes(_params.type)) {
+			_params.uniqueCode = null
+		}
+		form.id ? await putObj(_params) : await addObj(_params)
 		useMessage().success(form.id ? "修改成功" : "添加成功")
 		visible.value = false
 		emit("refresh")
diff --git a/src/views/hard/hard-manager/index.vue b/src/views/hard/hard-manager/index.vue
index add61eb..43f3fb4 100644
--- a/src/views/hard/hard-manager/index.vue
+++ b/src/views/hard/hard-manager/index.vue
@@ -1,94 +1,167 @@
 <template>
 	<div class="layout-padding">
-		<div class="layout-padding-auto layout-padding-view">
-			<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-				<el-row>
-					<el-form-item style="width: 200px" label="设备名" prop="name">
-						<el-input v-model="state.queryForm.name" placeholder="设备名" />
-					</el-form-item>
-					<el-form-item style="width: 200px" label="设备类型" prop="type">
-						<dict-select v-model="state.queryForm.type" dict-code="hard_type" />
-					</el-form-item>
-					<el-form-item style="width: 220px" label="商户" prop="merchantIds">
-						<select-mch v-model="state.queryForm.merchantIds" />
-					</el-form-item>
-					<el-form-item>
-						<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn")
-						}}</el-button>
-						<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
-					</el-form-item>
-				</el-row>
-			</el-form>
-			<el-row>
-				<div class="mb8" style="width: 100%">
-					<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
-						v-auth="'hard_hardManager_add'">
-						新 增
-					</el-button>
-					<el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'hard_hardManager_del'"
-						@click="handleDelete(selectObjs)">
-						删除
-					</el-button>
-					<right-toolbar v-model:showSearch="showSearch" :export="'hard_hardManager_export'"
-						@exportExcel="exportExcel" class="ml10 mr20" style="float: right"
-						@queryTable="getDataList"></right-toolbar>
+		<div class="layout-padding-auto layout-padding-view hard-manager-page">
+			<header class="page-header">
+				<div class="min-w-0">
+					<h1>设备管理</h1>
+					<p>
+						共 {{ Number(state.pagination?.total || 0) }} 台设备，当前页
+						<span class="font-medium text-[var(--el-color-success)]">{{ currentOnlineCount }} 台在线</span>
+						<span class="mx-1 text-[var(--el-border-color)]">/</span>
+						{{ currentOfflineCount }} 台离线
+					</p>
 				</div>
-			</el-row>
-			<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-				:header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
-				@sort-change="sortChangeHandle">
-				<el-table-column type="selection" width="40" align="center" />
-				<el-table-column type="index" label="#" width="80" />
-				<el-table-column prop="name" width="200" label="设备名" />
-				<el-table-column prop="type" width="100" label="设备类型">
+				<el-button type="primary" icon="Plus" @click="formDialogRef?.openDialog()" v-auth="'hard_hardManager_add'"> 新增设备 </el-button>
+			</header>
+
+			<SearchPanel
+				v-show="showSearch"
+				ref="queryRef"
+				class="hard-manager-search"
+				title="设备筛选"
+				:model="state.queryForm"
+				:loading="Boolean(state.loading)"
+				:search-text="$t('common.queryBtn')"
+				:reset-text="$t('common.resetBtn')"
+				@search="getDataList"
+				@reset="resetQuery"
+			>
+				<el-form-item style="width: 240px" label="设备名称" prop="name">
+					<el-input v-model="state.queryForm.name" clearable placeholder="请输入设备名称" />
+				</el-form-item>
+				<el-form-item style="width: 250px" label="唯一编号" prop="uniqueCode">
+					<el-input v-model="state.queryForm.uniqueCode" clearable placeholder="请输入设备唯一编号" />
+				</el-form-item>
+				<el-form-item style="width: 230px" label="设备类型" prop="type">
+					<dict-select v-model="state.queryForm.type" dict-code="hard_type" clearable />
+				</el-form-item>
+				<el-form-item style="width: 260px" label="所属商户" prop="merchantIds">
+					<select-mch v-model="state.queryForm.merchantIds" placeholder="请选择商户" />
+				</el-form-item>
+			</SearchPanel>
+
+			<div class="table-toolbar">
+				<div class="table-toolbar__title">
+					<span aria-hidden="true"></span>
+					<h2>设备列表</h2>
+					<small>共 {{ Number(state.pagination?.total || 0) }} 台</small>
+				</div>
+				<div class="table-toolbar__actions">
+					<el-button
+						plain
+						type="danger"
+						icon="Delete"
+						:disabled="multiple"
+						v-auth="'hard_hardManager_del'"
+						@click="handleDelete(selectObjs)"
+					>
+						批量删除
+					</el-button>
+					<span v-if="selectObjs.length" class="text-sm text-[var(--el-text-color-secondary)]">
+						已选择 {{ selectObjs.length }} 台设备
+					</span>
+					<right-toolbar
+						v-model:showSearch="showSearch"
+						:export="'hard_hardManager_export'"
+						@exportExcel="exportExcel"
+						@queryTable="getDataList"
+					/>
+				</div>
+			</div>
+
+			<el-table
+				:data="state.dataList"
+				v-loading="state.loading"
+				border
+				stripe
+				class="device-table"
+				:cell-style="tableStyle.cellStyle"
+				:header-cell-style="tableStyle.headerCellStyle"
+				row-key="id"
+				@selection-change="selectionChangHandle"
+				@sort-change="sortChangeHandle"
+				@row-dblclick="openDetails"
+			>
+				<el-table-column type="selection" width="42" align="center" />
+				<el-table-column label="设备" min-width="235">
 					<template #default="{ row }">
-						<dict-tag :options="hard_type" :value="row.type" />
+						<div class="device-identity">
+							<button type="button" class="device-name" @click="openDetails(row)">
+								{{ row.name || "未命名设备" }}
+							</button>
+							<div class="device-code" :title="isPrinterAsset(row) ? String(row.id) : row.uniqueCode || ''">
+								<span>{{ isPrinterAsset(row) ? "资产 ID" : "编号" }}</span>
+								<strong>{{ isPrinterAsset(row) ? row.id : row.uniqueCode || "尚未绑定" }}</strong>
+							</div>
+						</div>
 					</template>
 				</el-table-column>
-				<el-table-column prop="hardGroupName" width="200" label="分类" />
-				<el-table-column prop="merchantName" width="150" label="商户" />
-				<el-table-column prop="deptName" width="200" label="部门" />
-				<el-table-column prop="uniqueCode" width="200" label="设备唯一编号" />
-				<el-table-column prop="mainTopic" width="350" label="topic" />
-				<el-table-column prop="isTakeFood" width="200" label="是否为当前商户的取餐机器">
+				<el-table-column label="类型 / 分组" min-width="170">
 					<template #default="{ row }">
-						<el-switch :disabled="!useUserInfo().userInfos.roleCodes.includes('ROLE_ADMIN')"
-							:loading="switchTakeFoodLoading" active-text="是" inactive-text="否" active-value="1"
-							inactive-value="0" v-model="row.isTakeFood" @change="changeTakeFood($event, row)" />
+						<div class="cell-stack">
+							<dict-tag :options="hard_type" :value="row.type" />
+							<span>{{ row.hardGroupName || "未分组" }}</span>
+						</div>
 					</template>
 				</el-table-column>
-				<el-table-column prop="createTime" width="200" label="创建时间" />
-				<el-table-column v-auths="['hard_hardManager_edit', 'hard_hardManager_del']" label="操作" fixed="right"
-					width="400">
+				<el-table-column label="归属" min-width="220">
 					<template #default="{ row }">
-						<el-button v-if="row.type == '4'" icon="InfoFilled" text type="primary"
-							v-auth="'hard_hardManager_edit'" @click="doInfo(row)">
-							详情
-						</el-button>
-						<el-button icon="edit-pen" text type="primary" v-auth="'hard_hardManager_edit'"
-							@click="formDialogRef.openDialog(row.id)">
-							编辑
-						</el-button>
-						<el-button v-if="!['10', '11'].includes(row.type)" icon="TrendCharts" link type="primary"
-							v-auth="'hard_hardManager_edit'" @click="mqformDialogRef.openDialog(row.id)">
-							mq设置
-						</el-button>
-						<el-button v-if="!['10', '11'].includes(row.type)" icon="SetUp" link type="primary"
-							v-auth="'hard_hardManager_edit'" @click="faceFormDialogRef.openDialog(row.id)">
-							人脸sdk设置
-						</el-button>
-						<el-button icon="delete" text type="primary" v-auth="'hard_hardManager_del'"
-							@click="handleDelete([row.id])">删除</el-button>
+						<div class="cell-stack">
+							<strong>{{ row.merchantName || "未关联商户" }}</strong>
+							<span>{{ row.deptName || "未关联部门" }}</span>
+						</div>
 					</template>
 				</el-table-column>
+				<el-table-column label="运行状态" min-width="245" align="center">
+					<template #default="{ row }">
+						<div v-if="isTerminalStatusSupported(row)" class="runtime-cell">
+							<div class="runtime-cell__status">
+								<span class="status-dot" :class="row.online ? 'is-online' : 'is-offline'" aria-hidden="true"></span>
+								<strong>{{ row.online ? "在线" : "离线" }}</strong>
+								<span v-if="row.apkVersionName" class="runtime-version">v{{ row.apkVersionName }}</span>
+							</div>
+							<span>{{ row.lastOnlineTime || "尚未上报心跳" }}</span>
+						</div>
+						<div v-else-if="isPrinterAsset(row)" class="runtime-cell">
+							<strong>无屏 USB 外设</strong>
+							<span>由绑定的业务终端代理</span>
+						</div>
+						<span v-else class="text-sm text-[var(--el-text-color-secondary)]">该类型暂不支持状态上报</span>
+					</template>
+				</el-table-column>
+				<el-table-column label="能力" min-width="250">
+					<template #default="{ row }">
+						<div class="capability-list">
+							<span v-if="supportsMq(row)" class="capability-chip" :class="getConfigState(row, 'mq')">MQ</span>
+							<span v-if="supportsFace(row)" class="capability-chip" :class="getConfigState(row, 'face')">人脸</span>
+							<span v-if="supportsPrinter(row)" class="capability-chip" :class="getConfigState(row, 'printer')">打印</span>
+							<span v-if="isSmartCabinet(row)" class="capability-chip is-ready">智能柜</span>
+							<span v-if="row.isTakeFood === '1'" class="capability-chip is-info">取餐机</span>
+							<span v-if="!hasVisibleCapability(row)" class="text-sm text-[var(--el-text-color-placeholder)]">无扩展配置</span>
+						</div>
+					</template>
+				</el-table-column>
+				<el-table-column prop="createTime" label="创建时间" width="175" sortable="custom" />
+				<el-table-column label="操作" fixed="right" width="248" align="center">
+					<template #default="{ row }">
+						<div class="row-actions">
+							<el-button link type="primary" icon="View" @click="openDetails(row)">查看详情</el-button>
+							<el-button v-if="canEdit" link type="primary" icon="EditPen" @click="formDialogRef?.openDialog(String(row.id))"
+								>编辑</el-button
+							>
+							<el-button v-if="canDelete" link type="danger" icon="Delete" @click="handleDelete([String(row.id)])">删除</el-button>
+						</div>
+					</template>
+				</el-table-column>
+				<template #empty>
+					<el-empty description="暂无符合条件的设备" />
+				</template>
 			</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>
-		<!-- 编辑、新增  -->
+
 		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
-		<face-form-dialog ref="faceFormDialogRef" @refresh="getDataList(false)" />
-		<mq-form-dialog ref="mqformDialogRef" @refresh="getDataList(false)" />
 	</div>
 </template>
 
@@ -97,93 +170,457 @@ import { BasicTableProps, useTable } from "/@/hooks/table"
 import * as hardManageApi from "/@/api/hard/hard-manager"
 import { useMessage, useMessageBox } from "/@/hooks/message"
 import { useDict } from "/@/hooks/dict"
-import { useUserInfo } from "/@/stores/userInfo"
+import { auth } from "/@/utils/authFunction"
 
-const { push } = useRouter()
+/** 设备分页行，仅声明当前列表实际读取的后端字段。 */
+interface HardManagerRow {
+	/** 设备雪花主键，路由和接口传输时始终保持字符串形态。 */
+	id: string | number
+	/** 设备展示名称。 */
+	name?: string
+	/** hard_type 字典中的设备类型编码。 */
+	type?: string
+	/** 终端绑定或上报的唯一编号。 */
+	uniqueCode?: string
+	/** 所属硬件分组名称。 */
+	hardGroupName?: string
+	/** 所属商户名称。 */
+	merchantName?: string
+	/** 所属部门名称。 */
+	deptName?: string
+	/** 支持心跳的终端在线状态，不支持的类型返回空值。 */
+	online?: boolean | null
+	/** 服务端最近收到终端心跳的时间。 */
+	lastOnlineTime?: string
+	/** 终端最近上报的 APK 展示版本。 */
+	apkVersionName?: string
+	/** MQTT 服务地址。 */
+	mqSocketAddress?: string
+	/** MQTT 服务端口。 */
+	mqSocketPort?: string
+	/** MQTT 主订阅主题。 */
+	mainTopic?: string
+	/** 人脸 SDK 应用编号。 */
+	faceAppId?: string
+	/** 人脸 SDK 授权密钥。 */
+	faceSdkKey?: string
+	/** 人脸 SDK 激活密钥。 */
+	faceActiveKey?: string
+	/** 业务终端绑定的打印机主键。 */
+	boundPrinterHardId?: string | number
+	/** 打印机资产反向绑定的业务终端主键。 */
+	boundSourceHardId?: string | number
+	/** USB 打印机型号。 */
+	printerModel?: string
+	/** 当前设备是否为商户取餐机，1 是、0 否。 */
+	isTakeFood?: string
+	/** 设备创建时间。 */
+	createTime?: string
+}
 
-// 引入组件
+/** 列表中的配置能力类型，用于统一计算配置完整度。 */
+type ConfigurationCapability = "mq" | "face" | "printer"
+
+/** 新增和编辑设备沿用现有业务弹窗。 */
 const FormDialog = defineAsyncComponent(() => import("./form.vue"))
-const FaceFormDialog = defineAsyncComponent(() => import("./face-form.vue"))
-const MqFormDialog = defineAsyncComponent(() => import("./mq-form.vue"))
-// 定义查询字典
+/** 设备类型字典用于列表标签展示。 */
 const { hard_type } = useDict("hard_type")
-// 定义变量内容
-const formDialogRef = ref()
-const faceFormDialogRef = ref()
-const mqformDialogRef = ref()
-const switchTakeFoodLoading = ref(false)
-// 搜索变量
+/** 页面路由实例用于打开可深链访问的设备详情。 */
+const router = useRouter()
+/** 新增、编辑设备弹窗实例。 */
+const formDialogRef = ref<InstanceType<typeof FormDialog>>()
+/** 查询面板表单实例。 */
 const queryRef = ref()
+/** 查询区域是否展开。 */
 const showSearch = ref(true)
-// 多选变量
-const selectObjs = ref([]) as any
-const multiple = ref(true)
+/** 当前批量选中的设备主键，保持后端 Long 的原始字符串精度。 */
+const selectObjs = ref<string[]>([])
+/** 未选择设备时禁用批量删除按钮。 */
+const multiple = computed(() => selectObjs.value.length === 0)
+/** 支持终端心跳与 APK 状态上报的设备类型编码。 */
+const terminalStatusSupportedTypes = ["1", "2"]
+/** 不适用 MQTT 和人脸终端配置的设备类型编码。 */
+const terminalConfigurationExcludedTypes = ["9", "10", "11", "12"]
 
+/** 设备列表分页状态与查询函数。 */
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {},
 	pageList: hardManageApi.pageJoin,
 })
 
-//  table hook
+/** 列表通用分页、排序、导出和表格样式能力。 */
 const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
+/** 当前页在线且支持心跳的设备数量。 */
+const currentOnlineCount = computed(
+	() => ((state.dataList || []) as HardManagerRow[]).filter((row) => isTerminalStatusSupported(row) && row.online === true).length,
+)
+/** 当前页离线且支持心跳的设备数量。 */
+const currentOfflineCount = computed(
+	() => ((state.dataList || []) as HardManagerRow[]).filter((row) => isTerminalStatusSupported(row) && row.online === false).length,
+)
+/** 当前账号是否可以编辑设备。 */
+const canEdit = computed(() => auth("hard_hardManager_edit"))
+/** 当前账号是否可以删除设备。 */
+const canDelete = computed(() => auth("hard_hardManager_del"))
 
-// 清空搜索条件
-const resetQuery = () => {
-	// 清空搜索条件
+/** 判断当前设备是否支持在线、版本和终端日志状态展示。 */
+function isTerminalStatusSupported(row: HardManagerRow): boolean {
+	return terminalStatusSupportedTypes.includes(String(row.type))
+}
+
+/** 判断当前设备是否提供 MQTT 运维配置。 */
+function supportsMq(row: HardManagerRow): boolean {
+	return !terminalConfigurationExcludedTypes.includes(String(row.type))
+}
+
+/** 判断当前设备是否提供人脸 SDK 配置。 */
+function supportsFace(row: HardManagerRow): boolean {
+	return !terminalConfigurationExcludedTypes.includes(String(row.type))
+}
+
+/** 判断当前设备是否为无屏 EY_PRINT 打印机资产。 */
+function isPrinterAsset(row: HardManagerRow): boolean {
+	return String(row.type) === "12"
+}
+
+/** 判断设备是否属于可绑定打印机的业务终端或尔印打印机资产。 */
+function supportsPrinter(row: HardManagerRow): boolean {
+	return ["1", "2", "12"].includes(String(row.type))
+}
+
+/** 判断设备是否为生鲜智能柜。 */
+function isSmartCabinet(row: HardManagerRow): boolean {
+	return String(row.type) === "4"
+}
+
+/** 判断能力区是否至少有一个可见标记。 */
+function hasVisibleCapability(row: HardManagerRow): boolean {
+	return supportsMq(row) || supportsFace(row) || supportsPrinter(row) || isSmartCabinet(row) || row.isTakeFood === "1"
+}
+
+/**
+ * 计算能力标签的配置状态，仅判断后端已有字段是否完整，不展示任何密钥原文。
+ *
+ * @param row 当前设备分页行
+ * @param capability 待检查的配置能力
+ * @returns is-ready 表示关键项完整，is-pending 表示仍需配置
+ */
+function getConfigState(row: HardManagerRow, capability: ConfigurationCapability): "is-ready" | "is-pending" {
+	if (capability === "mq") {
+		return row.mqSocketAddress && row.mqSocketPort && row.mainTopic ? "is-ready" : "is-pending"
+	}
+	if (capability === "face") {
+		return row.faceAppId && row.faceSdkKey && row.faceActiveKey ? "is-ready" : "is-pending"
+	}
+	return row.boundPrinterHardId || row.boundSourceHardId || row.printerModel ? "is-ready" : "is-pending"
+}
+
+/** 重置查询条件、批量选择和当前分页。 */
+function resetQuery(): void {
 	queryRef.value?.resetFields()
-	// 清空多选
 	selectObjs.value = []
 	getDataList()
 }
 
-const changeTakeFood = async (e: any, row: any) => {
-	switchTakeFoodLoading.value = true
+/** 导出当前查询条件或已选择设备，避免修改响应式查询对象本身。 */
+function exportExcel(): void {
+	downBlobFile("/hard/hardManager/export", { ...state.queryForm, ids: selectObjs.value }, "设备列表.xlsx")
+}
+
+/** 同步表格选择的设备主键。 */
+function selectionChangHandle(rows: HardManagerRow[]): void {
+	selectObjs.value = rows.map((row) => String(row.id))
+}
+
+/** 打开设备详情页，双击表格行与“查看详情”按钮共用该入口。 */
+function openDetails(row: HardManagerRow): void {
+	router.push({ path: "/hard/hard-manager/details", query: { id: String(row.id) } })
+}
+
+/** 二次确认后删除设备，后端仍会执行打印机绑定保护校验。 */
+async function handleDelete(ids: string[]): Promise<void> {
 	try {
-		const pa = {
-			id: row.id,
-			merchantId: row.merchantId,
-			isTakeFood: e,
-		}
-		await hardManageApi.putObj(pa)
-	} catch (error: any) {
-		console.error(error)
-		useMessage().error(error.msg)
-	} finally {
-		switchTakeFoodLoading.value = false
-		getDataList()
-	}
-}
-
-// 导出excel
-const exportExcel = () => {
-	downBlobFile("/hard/hardManager/export", Object.assign(state.queryForm, { ids: selectObjs }), "设备列表.xlsx")
-}
-
-// 多选事件
-const selectionChangHandle = (objs: { id: string }[]) => {
-	selectObjs.value = objs.map(({ id }) => id)
-	multiple.value = !objs.length
-}
-
-// 硬件详情
-const doInfo = (row: any) => {
-	push({ path: "/hard/hard-door-manager/index", query: { id: row.id } })
-}
-
-// 删除操作
-const handleDelete = async (ids: string[]) => {
-	try {
-		await useMessageBox().confirm("此操作将永久删除")
+		await useMessageBox().confirm("确认删除选中的 " + ids.length + " 台设备？删除后无法恢复。")
 	} catch {
 		return
 	}
-
 	try {
 		await hardManageApi.delObjs(ids)
-		getDataList()
 		useMessage().success("删除成功")
-	} catch (err: any) {
-		useMessage().error(err.msg)
+		selectObjs.value = []
+		getDataList()
+	} catch (error: any) {
+		useMessage().error(error?.msg || "删除失败")
 	}
 }
 </script>
+
+<style lang="scss" scoped>
+.hard-manager-page {
+	overflow-x: hidden;
+	overflow-y: auto;
+}
+
+.page-header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 20px;
+	padding: 18px 20px;
+	border-bottom: 1px solid var(--el-border-color-light);
+	background: var(--el-fill-color-blank);
+
+	h1 {
+		margin: 0;
+		color: var(--el-text-color-primary);
+		font-size: 20px;
+		font-weight: 600;
+		line-height: 28px;
+	}
+
+	p {
+		margin: 4px 0 0;
+		color: var(--el-text-color-secondary);
+		font-size: 13px;
+		line-height: 20px;
+	}
+}
+
+.table-toolbar {
+	display: flex;
+	min-height: 52px;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	padding: 10px 12px;
+	border-bottom: 1px solid var(--el-border-color-lighter);
+	background: var(--el-fill-color-blank);
+}
+
+.table-toolbar__title,
+.table-toolbar__actions {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.table-toolbar__title {
+	min-width: 0;
+
+	> span {
+		width: 2px;
+		height: 14px;
+		flex: none;
+		border-radius: 1px;
+		background: var(--el-color-primary);
+	}
+
+	h2 {
+		margin: 0;
+		color: var(--el-text-color-primary);
+		font-size: 14px;
+		font-weight: 600;
+		line-height: 20px;
+	}
+
+	small {
+		color: var(--el-text-color-secondary);
+		font-size: 12px;
+		line-height: 20px;
+	}
+}
+
+:deep(.hard-manager-search.search-panel) {
+	margin-bottom: 0;
+	padding: 12px 20px 4px;
+	border: 0;
+	border-bottom: 1px solid var(--el-border-color-lighter);
+	border-radius: 0;
+}
+
+:deep(.hard-manager-search .search-panel__header) {
+	margin-bottom: 8px;
+}
+
+:deep(.hard-manager-search .search-panel__row) {
+	column-gap: 10px;
+}
+
+:deep(.hard-manager-search .el-form-item) {
+	margin-right: 0;
+}
+
+.device-identity,
+.cell-stack,
+.runtime-cell {
+	display: flex;
+	min-width: 0;
+	flex-direction: column;
+	gap: 4px;
+	line-height: 20px;
+
+	> span,
+	.runtime-version {
+		overflow: hidden;
+		color: var(--el-text-color-secondary);
+		font-size: 12px;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	strong {
+		overflow: hidden;
+		color: var(--el-text-color-primary);
+		font-size: 14px;
+		font-weight: 500;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+
+.device-name {
+	overflow: hidden;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: var(--el-color-primary);
+	font: inherit;
+	font-weight: 600;
+	line-height: 20px;
+	text-align: left;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	cursor: pointer;
+
+	&:hover {
+		color: var(--el-color-primary-light-3);
+	}
+
+	&:focus-visible {
+		border-radius: 2px;
+		outline: 2px solid var(--el-color-primary-light-5);
+		outline-offset: 2px;
+	}
+}
+
+.device-code {
+	display: flex;
+	min-width: 0;
+	align-items: center;
+	gap: 6px;
+	color: var(--el-text-color-placeholder);
+	font-size: 12px;
+	line-height: 18px;
+
+	> span {
+		flex: none;
+	}
+
+	strong {
+		overflow: hidden;
+		color: var(--el-text-color-secondary);
+		font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+		font-size: 12px;
+		font-weight: 400;
+		font-variant-numeric: tabular-nums;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+
+.runtime-cell {
+	align-items: center;
+	text-align: center;
+}
+
+.runtime-cell__status {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+}
+
+.status-dot {
+	width: 8px;
+	height: 8px;
+	flex: none;
+	border-radius: 50%;
+	background: var(--el-text-color-placeholder);
+
+	&.is-online {
+		background: var(--el-color-success);
+		box-shadow: 0 0 0 3px var(--el-color-success-light-9);
+	}
+
+	&.is-offline {
+		background: var(--el-color-danger);
+		box-shadow: 0 0 0 3px var(--el-color-danger-light-9);
+	}
+}
+
+.capability-list {
+	display: flex;
+	min-height: 26px;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 6px;
+}
+
+.capability-chip {
+	display: inline-flex;
+	height: 24px;
+	align-items: center;
+	padding: 0 8px;
+	border: 1px solid var(--el-border-color-light);
+	border-radius: 4px;
+	background: var(--el-fill-color-light);
+	color: var(--el-text-color-secondary);
+	font-size: 12px;
+	line-height: 22px;
+
+	&.is-ready {
+		border-color: var(--el-color-success-light-7);
+		background: var(--el-color-success-light-9);
+		color: var(--el-color-success-dark-2);
+	}
+
+	&.is-pending {
+		border-style: dashed;
+		color: var(--el-text-color-placeholder);
+	}
+
+	&.is-info {
+		border-color: var(--el-color-primary-light-7);
+		background: var(--el-color-primary-light-9);
+		color: var(--el-color-primary);
+	}
+}
+
+.row-actions {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+	white-space: nowrap;
+
+	:deep(.el-button + .el-button) {
+		margin-left: 0;
+	}
+}
+
+@media (max-width: 768px) {
+	.page-header,
+	.table-toolbar {
+		align-items: stretch;
+		flex-direction: column;
+	}
+
+	.page-header > .el-button {
+		align-self: flex-start;
+	}
+
+	.table-toolbar__actions {
+		flex-wrap: wrap;
+	}
+}
+</style>
diff --git a/src/views/hard/hard-manager/printer-dialog.vue b/src/views/hard/hard-manager/printer-dialog.vue
new file mode 100644
index 0000000..9b62173
--- /dev/null
+++ b/src/views/hard/hard-manager/printer-dialog.vue
@@ -0,0 +1,289 @@
+<template>
+	<el-dialog v-model="visible" :title="dialogTitle" width="560px" draggable :close-on-click-modal="false">
+		<el-form v-if="mode === 'bind'" ref="bindFormRef" :model="bindForm" label-width="120px">
+			<el-form-item label="业务终端">
+				<el-input :model-value="sourceName" disabled />
+			</el-form-item>
+			<el-alert class="mb-5" type="info" :closable="false" show-icon>
+				<template #title
+					>此处建立“业务终端 → 尔印 USB 打印机”的一对一关系。打印机没有独立屏幕、账号和心跳；绑定的食堂或超市终端负责发现 USB
+					设备、接收任务、打印并回传结果。</template
+				>
+			</el-alert>
+			<el-form-item label="尔印打印机" prop="printerHardId" :rules="[{ required: true, message: '请选择打印机' }]">
+				<el-select
+					v-model="bindForm.printerHardId"
+					class="w-full"
+					filterable
+					:loading="loading"
+					placeholder="请选择同商户同部门的空闲打印机"
+				>
+					<el-option
+						v-for="printer in availablePrinters"
+						:key="printer.id"
+						:label="`${printer.name || '未命名打印机'}（ID：${printer.id}）`"
+						:value="String(printer.id)"
+					/>
+				</el-select>
+			</el-form-item>
+			<p v-if="!loading && availablePrinters.length === 0" class="text-sm text-[var(--el-text-color-secondary)]">
+				当前部门没有可绑定的空闲尔印打印机资产，请先新增并分配商户部门。
+			</p>
+		</el-form>
+		<el-form v-else ref="configFormRef" :model="configForm" :rules="configRules" label-width="150px">
+			<el-alert class="mb-5" type="info" :closable="false" show-icon>
+				<template #title
+					>推荐在已绑定的食堂或超市终端打开“打印机信息”，点击“上报当前设备”自动回填型号、VID 和
+					PID；管理端手填仅用于现场无法上报时。</template
+				>
+			</el-alert>
+			<el-form-item prop="printerModel">
+				<template #label>
+					<span class="inline-flex items-center gap-1">
+						打印机型号
+						<el-tooltip
+							content="用于运维人员识别实际 USB 打印机。优先由绑定的食堂或超市终端自动上报；手工填写示例：GEZHI / micro-printer。"
+							placement="top"
+							popper-class="max-w-[360px] leading-5"
+						>
+							<el-icon class="cursor-help text-[var(--el-text-color-secondary)]" tabindex="0" aria-label="打印机型号填写说明"
+								><InfoFilled
+							/></el-icon>
+						</el-tooltip>
+					</span>
+				</template>
+				<el-input v-model="configForm.printerModel" placeholder="推荐由绑定的业务终端自动上报" />
+			</el-form-item>
+			<el-form-item prop="usbVendorId">
+				<template #label>
+					<span class="inline-flex items-center gap-1">
+						USB VID
+						<el-tooltip
+							content="USB 厂商编号，管理端填写十进制值，范围 0～65535。当前联调设备识别为 10473（十六进制 0x28E9）；不确定时请勿猜测，使用终端自动上报。"
+							placement="top"
+							popper-class="max-w-[360px] leading-5"
+						>
+							<el-icon class="cursor-help text-[var(--el-text-color-secondary)]" tabindex="0" aria-label="USB VID 填写说明"
+								><InfoFilled
+							/></el-icon>
+						</el-tooltip>
+					</span>
+				</template>
+				<el-input-number
+					v-model="configForm.usbVendorId"
+					:min="0"
+					:max="65535"
+					controls-position="right"
+					class="w-full"
+					placeholder="例如 10473"
+				/>
+			</el-form-item>
+			<el-form-item prop="usbProductId">
+				<template #label>
+					<span class="inline-flex items-center gap-1">
+						USB PID
+						<el-tooltip
+							content="USB 产品编号，管理端填写十进制值，必须与 VID 同时填写或同时留空。当前联调设备识别为 649（十六进制 0x0289）；推荐使用终端自动上报。"
+							placement="top"
+							popper-class="max-w-[360px] leading-5"
+						>
+							<el-icon class="cursor-help text-[var(--el-text-color-secondary)]" tabindex="0" aria-label="USB PID 填写说明"
+								><InfoFilled
+							/></el-icon>
+						</el-tooltip>
+					</span>
+				</template>
+				<el-input-number
+					v-model="configForm.usbProductId"
+					:min="0"
+					:max="65535"
+					controls-position="right"
+					class="w-full"
+					placeholder="例如 649"
+				/>
+			</el-form-item>
+			<el-form-item prop="paperWidth">
+				<template #label>
+					<span class="inline-flex items-center gap-1">
+						纸宽
+						<el-tooltip
+							content="首期只支持 80mm 热敏纸，对应后端图片宽度 576px。此项固定为 80，无需修改。"
+							placement="top"
+							popper-class="max-w-[360px] leading-5"
+						>
+							<el-icon class="cursor-help text-[var(--el-text-color-secondary)]" tabindex="0" aria-label="纸宽配置说明"
+								><InfoFilled
+							/></el-icon>
+						</el-tooltip>
+					</span>
+				</template>
+				<el-input-number v-model="configForm.paperWidth" :min="80" :max="80" controls-position="right" class="w-full" />
+				<span class="ml-2">mm（首期固定）</span>
+			</el-form-item>
+			<el-form-item>
+				<template #label>
+					<span class="inline-flex items-center gap-1">
+						自动切刀
+						<el-tooltip
+							content="打印完成后发送切纸命令。打印机带自动切刀时保持开启；若型号没有切刀，或测试打印在切纸阶段报错，再关闭此项。"
+							placement="top"
+							popper-class="max-w-[360px] leading-5"
+						>
+							<el-icon class="cursor-help text-[var(--el-text-color-secondary)]" tabindex="0" aria-label="自动切刀配置说明"
+								><InfoFilled
+							/></el-icon>
+						</el-tooltip>
+					</span>
+				</template>
+				<el-switch v-model="configForm.autoCut" active-value="1" inactive-value="0" />
+			</el-form-item>
+			<el-form-item>
+				<template #label>
+					<span class="inline-flex items-center gap-1">
+						图片指令模式
+						<el-tooltip
+							content="控制 PNG 图片转换成哪种 ESC/POS 指令。优先使用 GS v 0；只有真机测试出现白纸、缺行或图片不完整时，才切换 ESC * 兼容模式并重新测试。"
+							placement="top"
+							popper-class="max-w-[360px] leading-5"
+						>
+							<el-icon class="cursor-help text-[var(--el-text-color-secondary)]" tabindex="0" aria-label="图片指令模式说明"
+								><InfoFilled
+							/></el-icon>
+						</el-tooltip>
+					</span>
+				</template>
+				<el-radio-group v-model="configForm.imageMode"
+					><el-radio label="GS_V0">GS v 0（默认）</el-radio><el-radio label="ESC_STAR">ESC *（兼容回退）</el-radio></el-radio-group
+				>
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<el-button @click="visible = false">取消</el-button>
+			<el-button type="primary" :loading="loading" :disabled="mode === 'bind' && availablePrinters.length === 0" @click="submit"
+				>保存</el-button
+			>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup lang="ts" name="HardPrinterDialog">
+import { InfoFilled } from "@element-plus/icons-vue"
+import * as printerApi from "/@/api/hard/hard-printer"
+import { useMessage } from "/@/hooks/message"
+
+const emit = defineEmits(["refresh"])
+const visible = ref(false)
+const loading = ref(false)
+const mode = ref<"bind" | "config">("bind")
+const sourceName = ref("")
+/** 来源业务终端雪花 ID，始终按字符串传递以保留完整精度。 */
+const sourceHardId = ref<printerApi.HardwareId | null>(null)
+/** 目标打印机资产雪花 ID，始终按字符串传递以保留完整精度。 */
+const printerHardId = ref<printerApi.HardwareId | null>(null)
+const availablePrinters = ref<any[]>([])
+const bindFormRef = ref()
+const configFormRef = ref()
+/** 当前待提交的一对一打印机绑定。 */
+const bindForm = reactive<{ printerHardId: printerApi.HardwareId | null }>({ printerHardId: null })
+const configForm = reactive<printerApi.HardPrinterConfig>({
+	printerHardId: "",
+	printerModel: "",
+	usbVendorId: undefined,
+	usbProductId: undefined,
+	paperWidth: 80,
+	autoCut: "1",
+	imageMode: "GS_V0",
+})
+const validateUsbPair = (_rule: unknown, _value: unknown, callback: (error?: Error) => void) => {
+	const hasVid = configForm.usbVendorId !== undefined && configForm.usbVendorId !== null
+	const hasPid = configForm.usbProductId !== undefined && configForm.usbProductId !== null
+	callback(hasVid === hasPid ? undefined : new Error("USB VID 和 PID 必须同时填写或同时留空"))
+}
+const configRules = {
+	usbVendorId: [{ validator: validateUsbPair, trigger: "change" }],
+	usbProductId: [{ validator: validateUsbPair, trigger: "change" }],
+	paperWidth: [{ required: true, message: "纸宽必须为80mm", trigger: "change" }],
+}
+const dialogTitle = computed(() => (mode.value === "bind" ? "绑定尔印打印机" : "打印机配置"))
+
+/** 恢复打印配置默认值，避免连续打开不同设备时残留上一台打印机的参数。 */
+const resetConfig = (hardId: printerApi.HardwareId) => {
+	Object.assign(configForm, {
+		id: undefined,
+		printerHardId: hardId,
+		printerModel: "",
+		usbVendorId: undefined,
+		usbProductId: undefined,
+		paperWidth: 80,
+		autoCut: "1",
+		imageMode: "GS_V0",
+	})
+}
+
+/** 打开来源终端绑定弹窗，并使用未经过数值转换的雪花 ID 查询候选打印机。 */
+const openBind = async (row: any) => {
+	mode.value = "bind"
+	const hardId = String(row.id)
+	sourceHardId.value = hardId
+	sourceName.value = row.name || `设备 ${row.id}`
+	bindForm.printerHardId = null
+	visible.value = true
+	loading.value = true
+	try {
+		const response: any = await printerApi.listAvailable(hardId)
+		availablePrinters.value = response.data || []
+	} catch (error: any) {
+		availablePrinters.value = []
+		useMessage().error(error?.msg || "读取可绑定打印机失败")
+	} finally {
+		loading.value = false
+	}
+}
+
+/** 打开 EY_PRINT 参数弹窗，并保持目标设备雪花 ID 的字符串形态。 */
+const openConfig = async (row: any) => {
+	mode.value = "config"
+	const hardId = String(row.id)
+	printerHardId.value = hardId
+	resetConfig(hardId)
+	visible.value = true
+	loading.value = true
+	try {
+		const response: any = await printerApi.getConfig(hardId)
+		Object.assign(configForm, response.data || {}, { printerHardId: hardId })
+	} catch (error: any) {
+		useMessage().error(error?.msg || "读取打印机配置失败")
+	} finally {
+		loading.value = false
+	}
+}
+
+/** 校验并提交绑定或配置，设备主键保持字符串以便后端无损转换为 Long。 */
+const submit = async () => {
+	const formRef = mode.value === "bind" ? bindFormRef.value : configFormRef.value
+	const valid = await formRef?.validate?.().catch(() => false)
+	if (valid === false) return
+	loading.value = true
+	try {
+		if (mode.value === "bind") {
+			if (!sourceHardId.value || !bindForm.printerHardId) {
+				useMessage().warning("请选择尔印打印机")
+				return
+			}
+			await printerApi.bind({ sourceHardId: sourceHardId.value, printerHardId: bindForm.printerHardId })
+			useMessage().success("绑定成功，请在该业务终端的“打印机信息”页面刷新并上报 USB 设备")
+		} else {
+			await printerApi.saveConfig({ ...configForm, printerHardId: printerHardId.value || configForm.printerHardId })
+			useMessage().success("配置保存成功")
+		}
+		visible.value = false
+		emit("refresh")
+	} catch (error: any) {
+		useMessage().error(error?.msg || "保存失败")
+	} finally {
+		loading.value = false
+	}
+}
+
+defineExpose({ openBind, openConfig })
+</script>
diff --git a/src/views/hard/hard-terminal-log-file/device-panel.vue b/src/views/hard/hard-terminal-log-file/device-panel.vue
new file mode 100644
index 0000000..05cf4ad
--- /dev/null
+++ b/src/views/hard/hard-terminal-log-file/device-panel.vue
@@ -0,0 +1,88 @@
+<template>
+	<section class="flex h-full min-h-0 flex-col" aria-label="终端设备日志列表">
+		<header class="flex items-center justify-between border-b border-br-light px-3 py-2">
+			<div>
+				<div class="font-medium text-[var(--el-text-color-primary)]">终端设备</div>
+				<div class="mt-0.5 text-xs text-[var(--el-text-color-secondary)]">共 {{ total }} 台有日志设备</div>
+			</div>
+			<el-button text icon="Refresh" :loading="loading" aria-label="刷新设备列表" @click="$emit('refresh')" />
+		</header>
+
+		<el-scrollbar v-loading="loading" class="min-h-0 flex-1">
+			<div v-if="devices.length" class="space-y-2 p-2">
+				<button
+					v-for="device in devices"
+					:key="device.hardId"
+					type="button"
+					class="device-card w-full rounded border p-3 text-left transition-colors"
+					:class="{ 'is-active': String(device.hardId) === String(selectedHardId) }"
+					@click="$emit('select', device)"
+				>
+					<div class="flex items-start justify-between gap-2">
+						<span class="truncate font-medium text-[var(--el-text-color-primary)]">{{ device.hardName || "未命名设备" }}</span>
+						<el-tag size="small" effect="plain">{{ device.fileCount }} 个文件</el-tag>
+					</div>
+					<div class="mt-1 truncate text-xs text-[var(--el-text-color-regular)]">编号：{{ device.uniqueCode || "-" }}</div>
+					<div class="mt-2 text-xs text-[var(--el-text-color-secondary)]">最近上传：{{ formatTime(device.latestUploadTime) }}</div>
+				</button>
+			</div>
+			<el-empty v-else :image-size="72" description="暂无符合条件的终端日志" />
+		</el-scrollbar>
+
+		<footer v-if="total > size" class="flex justify-center border-t border-br-light px-2 py-2">
+			<el-pagination
+				small
+				background
+				layout="prev, pager, next"
+				:page-size="size"
+				:current-page="current"
+				:total="total"
+				@current-change="$emit('page-change', $event)"
+			/>
+		</footer>
+	</section>
+</template>
+
+<script setup lang="ts">
+import type { TerminalLogDevice } from "/@/api/hard/hard-terminal-log-file"
+import { formatDate } from "/@/utils/formatTime"
+
+defineProps<{
+	devices: TerminalLogDevice[]
+	loading: boolean
+	total: number
+	current: number
+	size: number
+	selectedHardId?: string | number
+}>()
+
+defineEmits<{
+	(event: "select", device: TerminalLogDevice): void
+	(event: "refresh"): void
+	(event: "page-change", page: number): void
+}>()
+
+function formatTime(value?: string) {
+	if (!value) return "暂无"
+	const date = new Date(value)
+	return Number.isNaN(date.getTime()) ? value : formatDate(date, "YYYY-mm-dd HH:MM:SS")
+}
+</script>
+
+<style scoped>
+.device-card {
+	border-color: var(--el-border-color-light);
+	background: var(--el-bg-color);
+}
+
+.device-card:hover {
+	border-color: var(--el-color-primary-light-5);
+	background: var(--el-color-primary-light-9);
+}
+
+.device-card.is-active {
+	border-color: var(--el-color-primary);
+	background: var(--el-color-primary-light-9);
+	box-shadow: 0 0 0 1px var(--el-color-primary-light-7);
+}
+</style>
diff --git a/src/views/hard/hard-terminal-log-file/file-tree-panel.vue b/src/views/hard/hard-terminal-log-file/file-tree-panel.vue
new file mode 100644
index 0000000..2f26338
--- /dev/null
+++ b/src/views/hard/hard-terminal-log-file/file-tree-panel.vue
@@ -0,0 +1,88 @@
+<template>
+	<section class="flex h-full min-h-0 flex-col" aria-label="终端日志文件树">
+		<header class="flex items-center justify-between border-b border-br-light px-3 py-2">
+			<div class="min-w-0">
+				<div class="truncate font-medium text-[var(--el-text-color-primary)]">日志文件</div>
+				<div class="mt-0.5 truncate text-xs text-[var(--el-text-color-secondary)]">{{ deviceName || "请先选择设备" }}</div>
+			</div>
+			<el-button text icon="Refresh" :disabled="!hardId" :loading="loading" aria-label="刷新日志文件树" @click="$emit('refresh')" />
+		</header>
+
+		<el-scrollbar v-loading="loading" class="min-h-0 flex-1">
+			<el-tree
+				v-if="hardId && tree.length"
+				class="terminal-log-tree px-2 py-2"
+				:data="tree"
+				node-key="key"
+				:current-node-key="selectedKey"
+				:expand-on-click-node="false"
+				:highlight-current="true"
+				:default-expand-all="true"
+				@node-click="handleNodeClick"
+			>
+				<template #default="{ data }">
+					<div class="flex min-w-0 flex-1 items-center gap-2 pr-2">
+						<el-icon class="shrink-0 text-[var(--el-text-color-secondary)]">
+							<Folder v-if="data.directory" />
+							<Document v-else />
+						</el-icon>
+						<div class="min-w-0 flex-1">
+							<div class="truncate">{{ data.label }}</div>
+							<div v-if="!data.directory" class="truncate text-xs text-[var(--el-text-color-secondary)]">
+								{{ formatSize(data.fileSize) }} · {{ formatTime(data.uploadTime) }}
+							</div>
+						</div>
+					</div>
+				</template>
+			</el-tree>
+			<el-empty v-else :image-size="72" :description="hardId ? '该设备暂无符合条件的日志' : '请先选择终端设备'" />
+		</el-scrollbar>
+	</section>
+</template>
+
+<script setup lang="ts">
+import type { TerminalLogTreeNode } from "/@/api/hard/hard-terminal-log-file"
+import { formatDate } from "/@/utils/formatTime"
+
+defineProps<{
+	tree: TerminalLogTreeNode[]
+	loading: boolean
+	hardId?: string | number
+	deviceName?: string
+	selectedKey?: string
+}>()
+
+const emit = defineEmits<{
+	(event: "select", node: TerminalLogTreeNode): void
+	(event: "refresh"): void
+}>()
+
+function handleNodeClick(node: TerminalLogTreeNode) {
+	if (!node.directory && node.fileId != null) emit("select", node)
+}
+
+function formatSize(bytes?: number) {
+	if (bytes == null) return "-"
+	if (bytes < 1024) return `${bytes} B`
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+	return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+}
+
+function formatTime(value?: string) {
+	if (!value) return "-"
+	const date = new Date(value)
+	return Number.isNaN(date.getTime()) ? value : formatDate(date, "YYYY-mm-dd HH:MM:SS")
+}
+</script>
+
+<style scoped>
+.terminal-log-tree {
+	background: transparent;
+}
+
+.terminal-log-tree:deep(.el-tree-node__content) {
+	height: auto;
+	min-height: 40px;
+	border-radius: 4px;
+}
+</style>
diff --git a/src/views/hard/hard-terminal-log-file/form.vue b/src/views/hard/hard-terminal-log-file/form.vue
new file mode 100644
index 0000000..c25f41c
--- /dev/null
+++ b/src/views/hard/hard-terminal-log-file/form.vue
@@ -0,0 +1,229 @@
+<template>
+  <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>
+    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
+      <el-row :gutter="24">
+        <el-col :span="24" class="mb20">
+          <el-form-item label="设备ID(hard_manager.id)" prop="hardId">
+            <el-input v-model="form.hardId" placeholder="请输入设备ID(hard_manager.id)" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="上传时设备名称快照" prop="hardName">
+            <el-input v-model="form.hardName" placeholder="请输入上传时设备名称快照" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="上传时设备唯一编号快照" prop="uniqueCode">
+            <el-input v-model="form.uniqueCode" placeholder="请输入上传时设备唯一编号快照" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="上传时设备类型快照" prop="hardType">
+            <el-input v-model="form.hardType" placeholder="请输入上传时设备类型快照" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="上传时商户ID快照" prop="merchantId">
+            <el-input v-model="form.merchantId" placeholder="请输入上传时商户ID快照" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="上传时部门ID快照" prop="deptId">
+            <el-input v-model="form.deptId" placeholder="请输入上传时部门ID快照" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="日志所属日期" prop="logDate">
+            <el-input v-model="form.logDate" placeholder="请输入日志所属日期" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="终端日志根目录下的相对路径" prop="relativePath">
+            <el-input v-model="form.relativePath" placeholder="请输入终端日志根目录下的相对路径" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="原日志文件名" prop="originalName">
+            <el-input v-model="form.originalName" placeholder="请输入原日志文件名" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="文件大小(字节)" prop="fileSize">
+            <el-input v-model="form.fileSize" placeholder="请输入文件大小(字节)" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="文件内容哈希(当前使用MD5)" prop="fileHash">
+            <el-input v-model="form.fileHash" placeholder="请输入文件内容哈希(当前使用MD5)" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="终端本地文件最后修改时间" prop="fileModifiedTime">
+            <el-input v-model="form.fileModifiedTime" placeholder="请输入终端本地文件最后修改时间" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="文件中心sys_file记录ID" prop="sysFileId">
+            <el-input v-model="form.sysFileId" placeholder="请输入文件中心sys_file记录ID" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="OSS对象文件名" prop="storageFileName">
+            <el-input v-model="form.storageFileName" placeholder="请输入OSS对象文件名" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="文件访问相对地址" prop="storageUrl">
+            <el-input v-model="form.storageUrl" placeholder="请输入文件访问相对地址" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="上传时应用版本" prop="appVersion">
+            <el-input v-model="form.appVersion" placeholder="请输入上传时应用版本" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="日志脱敏规则版本" prop="sanitizeVersion">
+            <el-input v-model="form.sanitizeVersion" placeholder="请输入日志脱敏规则版本" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="最近成功上传时间" prop="uploadTime">
+            <el-input v-model="form.uploadTime" placeholder="请输入最近成功上传时间" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="成功上传次数" prop="uploadCount">
+            <el-input v-model="form.uploadCount" placeholder="请输入成功上传次数" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="form.remark" placeholder="请输入备注" />
+          </el-form-item>
+        </el-col>
+
+      </el-row>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="visible = false">取消</el-button>
+        <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="HardTerminalLogFileDialog">
+import { useDict } from '/@/hooks/dict';
+import { useMessage } from "/@/hooks/message";
+import * as hardTerminalLogFile from "/@/api/hard/hard-terminal-log-file";
+import { rule } from '/@/utils/validate';
+const emit = defineEmits(['refresh']);
+
+// 定义变量内容
+const dataFormRef = ref();
+const visible = ref(false)
+const loading = ref(false)
+// 定义字典
+
+// 提交表单数据
+const form = reactive({
+  id: '',
+  hardId: '',
+  hardName: '',
+  uniqueCode: '',
+  hardType: '',
+  merchantId: '',
+  deptId: '',
+  logDate: '',
+  relativePath: '',
+  originalName: '',
+  fileSize: '',
+  fileHash: '',
+  fileModifiedTime: '',
+  sysFileId: '',
+  storageFileName: '',
+  storageUrl: '',
+  appVersion: '',
+  sanitizeVersion: '',
+  uploadTime: '',
+  uploadCount: '',
+  remark: '',
+});
+
+// 定义校验规则
+const dataRules = ref({
+})
+
+// 打开弹窗
+const openDialog = (id: string) => {
+  visible.value = true
+  form.id = ''
+
+  // 重置表单数据
+  nextTick(() => {
+    dataFormRef.value?.resetFields();
+  });
+
+  // 获取hardTerminalLogFile信息
+  if (id) {
+    form.id = id
+    gethardTerminalLogFileData(id)
+  }
+};
+
+// 提交
+const onSubmit = async () => {
+  const valid = await dataFormRef.value.validate().catch(() => { });
+  if (!valid) return false;
+
+  try {
+    loading.value = true;
+    form.id ? await hardTerminalLogFile.putObj(form) : await hardTerminalLogFile.addObj(form);
+    useMessage().success(form.id ? '修改成功' : '添加成功');
+    visible.value = false;
+    emit('refresh');
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  } finally {
+    loading.value = false;
+  }
+};
+
+
+// 初始化表单数据
+const gethardTerminalLogFileData = (id: string) => {
+  // 获取数据
+  loading.value = true
+  getObj(id).then((res: any) => {
+    Object.assign(form, res.data)
+  }).finally(() => {
+    loading.value = false
+  })
+};
+
+// 暴露变量
+defineExpose({
+  openDialog
+});
+</script>
\ No newline at end of file
diff --git a/src/views/hard/hard-terminal-log-file/index.vue b/src/views/hard/hard-terminal-log-file/index.vue
new file mode 100644
index 0000000..e0fd671
--- /dev/null
+++ b/src/views/hard/hard-terminal-log-file/index.vue
@@ -0,0 +1,521 @@
+<template>
+	<div class="layout-padding">
+		<div class="layout-padding-auto">
+			<div class="layout-padding-view flex min-h-0 flex-col">
+				<section class="border-b border-br-light px-3 py-3">
+					<el-form
+						ref="queryRef"
+						:model="queryForm"
+						label-width="72px"
+						class="terminal-log-query grid grid-cols-12 items-start gap-x-4 gap-y-2"
+					>
+						<el-form-item class="col-span-12 md:col-span-6 lg:col-span-3" label="设备名称" prop="hardName">
+							<el-input v-model="queryForm.hardName" clearable placeholder="请输入设备名称" @keyup.enter="handleQuery" />
+						</el-form-item>
+						<el-form-item class="col-span-12 md:col-span-6 lg:col-span-3" label="唯一编号" prop="uniqueCode">
+							<el-input v-model="queryForm.uniqueCode" clearable placeholder="请输入设备唯一编号" @keyup.enter="handleQuery" />
+						</el-form-item>
+						<el-form-item class="col-span-12 md:col-span-6 lg:col-span-3" label="商户" prop="merchantId">
+							<select-mch v-model="queryForm.merchantId" placeholder="请选择商户" />
+						</el-form-item>
+						<el-form-item class="col-span-12 md:col-span-6 lg:col-span-3" label="部门" prop="deptId">
+							<select-dept v-model="queryForm.deptId" placeholder="请选择部门" />
+						</el-form-item>
+						<el-form-item class="col-span-12 md:col-span-6 lg:col-span-4" label="日志日期" prop="logDateRange">
+							<el-date-picker
+								v-model="queryForm.logDateRange"
+								type="daterange"
+								value-format="YYYY-MM-DD"
+								range-separator="至"
+								start-placeholder="开始日期"
+								end-placeholder="结束日期"
+							/>
+						</el-form-item>
+						<el-form-item class="col-span-12 md:col-span-6 lg:col-span-5" label="上传时间" prop="uploadTimeRange">
+							<el-date-picker
+								v-model="queryForm.uploadTimeRange"
+								type="datetimerange"
+								value-format="YYYY-MM-DDTHH:mm:ss"
+								range-separator="至"
+								start-placeholder="开始时间"
+								end-placeholder="结束时间"
+							/>
+						</el-form-item>
+						<el-form-item class="terminal-log-query__actions col-span-12 lg:col-span-3">
+							<el-button type="primary" icon="Search" :loading="deviceLoading" @click="handleQuery">查询</el-button>
+							<el-button icon="Refresh" @click="resetQuery">重置</el-button>
+						</el-form-item>
+					</el-form>
+
+					<div class="mt-1 flex flex-wrap items-center justify-between gap-2">
+						<div class="flex items-center gap-2">
+							<el-button v-if="isNarrow" icon="Monitor" @click="deviceDrawerVisible = true">选择设备</el-button>
+							<el-button v-if="isNarrow" icon="Files" :disabled="!selectedDevice" @click="fileDrawerVisible = true">文件树</el-button>
+							<el-tag v-if="selectedDevice" type="info" effect="plain">
+								当前设备：{{ selectedDevice.hardName }}（{{ selectedDevice.uniqueCode }}）
+							</el-tag>
+						</div>
+						<div class="flex items-center gap-2">
+							<el-button v-auth="'hard_hardTerminalLogFile_pull'" icon="Aim" @click="openPullDialog">选择其他设备拉取</el-button>
+							<el-button
+								v-auth="'hard_hardTerminalLogFile_pull'"
+								type="primary"
+								icon="Promotion"
+								:disabled="!selectedDevice"
+								:loading="pulling"
+								@click="pullSelectedDevice"
+							>
+								立即拉取当前日志
+							</el-button>
+						</div>
+					</div>
+				</section>
+
+				<div class="min-h-0 flex-1">
+					<splitpanes v-if="!isNarrow" class="terminal-log-split">
+						<pane :size="17" :min-size="15" :max-size="22">
+							<device-panel
+								:devices="devices"
+								:loading="deviceLoading"
+								:total="deviceTotal"
+								:current="devicePage"
+								:size="devicePageSize"
+								:selected-hard-id="selectedDevice?.hardId"
+								@select="selectDevice"
+								@refresh="loadDevices(true)"
+								@page-change="changeDevicePage"
+							/>
+						</pane>
+						<pane :size="20" :min-size="17" :max-size="26">
+							<file-tree-panel
+								:tree="fileTree"
+								:loading="treeLoading"
+								:hard-id="selectedDevice?.hardId"
+								:device-name="selectedDevice?.hardName"
+								:selected-key="selectedFile?.key"
+								@select="selectFile"
+								@refresh="loadFileTree"
+							/>
+						</pane>
+						<pane :size="63" :min-size="48">
+							<preview-panel
+								v-model:keyword="keyword"
+								:preview="preview"
+								:loading="previewLoading"
+								:can-preview="canPreview"
+								:has-device="Boolean(selectedDevice)"
+								:has-file="Boolean(selectedFile)"
+								@copy="copyPreview"
+								@refresh="refreshPreview"
+								@download="downloadCurrent"
+							/>
+						</pane>
+					</splitpanes>
+					<preview-panel
+						v-else
+						v-model:keyword="keyword"
+						:preview="preview"
+						:loading="previewLoading"
+						:can-preview="canPreview"
+						:has-device="Boolean(selectedDevice)"
+						:has-file="Boolean(selectedFile)"
+						@copy="copyPreview"
+						@refresh="refreshPreview"
+						@download="downloadCurrent"
+					/>
+				</div>
+			</div>
+		</div>
+
+		<el-drawer v-model="deviceDrawerVisible" title="选择终端设备" direction="ltr" size="360px">
+			<device-panel
+				:devices="devices"
+				:loading="deviceLoading"
+				:total="deviceTotal"
+				:current="devicePage"
+				:size="devicePageSize"
+				:selected-hard-id="selectedDevice?.hardId"
+				@select="selectDeviceFromDrawer"
+				@refresh="loadDevices(true)"
+				@page-change="changeDevicePage"
+			/>
+		</el-drawer>
+
+		<el-drawer v-model="fileDrawerVisible" title="日志文件树" direction="ltr" size="420px">
+			<file-tree-panel
+				:tree="fileTree"
+				:loading="treeLoading"
+				:hard-id="selectedDevice?.hardId"
+				:device-name="selectedDevice?.hardName"
+				:selected-key="selectedFile?.key"
+				@select="selectFileFromDrawer"
+				@refresh="loadFileTree"
+			/>
+		</el-drawer>
+
+		<el-dialog v-model="pullDialogVisible" title="拉取无历史日志设备的当前日志" width="520px" destroy-on-close>
+			<el-alert
+				type="info"
+				:closable="false"
+				show-icon
+				title="指令发送后，客户端会等待支付和识别结束再上传；日志无变化时列表不会更新。"
+			/>
+			<el-form label-width="88px" class="mt-4">
+				<el-form-item label="终端设备">
+					<select-hard v-model="pullHardId" placeholder="请选择要拉取日志的终端" />
+				</el-form-item>
+			</el-form>
+			<template #footer>
+				<el-button @click="pullDialogVisible = false">取消</el-button>
+				<el-button type="primary" :disabled="!pullHardId" :loading="pulling" @click="pullOtherDevice">发送拉取指令</el-button>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script setup lang="ts" name="systemHardTerminalLogFile">
+import { useMediaQuery } from "@vueuse/core"
+import * as terminalLogApi from "/@/api/hard/hard-terminal-log-file"
+import type { TerminalLogDevice, TerminalLogPreview, TerminalLogQuery, TerminalLogTreeNode } from "/@/api/hard/hard-terminal-log-file"
+import { useMessage } from "/@/hooks/message"
+import { auth } from "/@/utils/authFunction"
+import commonFunction from "/@/utils/commonFunction"
+import DevicePanel from "./device-panel.vue"
+import FileTreePanel from "./file-tree-panel.vue"
+import PreviewPanel from "./preview-panel.vue"
+
+const PREVIEW_PERMISSION = "hard_hardTerminalLogFile_preview"
+const DOWNLOAD_PERMISSION = "hard_hardTerminalLogFile_down"
+const PULL_PERMISSION = "hard_hardTerminalLogFile_pull"
+const POLL_INTERVAL_MS = 3000
+const POLL_MAX_COUNT = 20
+
+const queryRef = ref()
+const queryForm = reactive({
+	hardName: "",
+	uniqueCode: "",
+	merchantId: undefined as string | number | undefined,
+	deptId: undefined as string | number | undefined,
+	logDateRange: [] as string[],
+	uploadTimeRange: [] as string[],
+})
+
+const isNarrow = useMediaQuery("(max-width: 1280px)")
+const devices = ref<TerminalLogDevice[]>([])
+const deviceLoading = ref(false)
+const deviceTotal = ref(0)
+const devicePage = ref(1)
+const devicePageSize = 12
+const selectedDevice = ref<TerminalLogDevice>()
+const fileTree = ref<TerminalLogTreeNode[]>([])
+const treeLoading = ref(false)
+const selectedFile = ref<TerminalLogTreeNode>()
+const preview = ref<TerminalLogPreview>()
+const previewLoading = ref(false)
+const keyword = ref("")
+const pulling = ref(false)
+const pullHardId = ref<string | number>()
+const pullDialogVisible = ref(false)
+const deviceDrawerVisible = ref(false)
+const fileDrawerVisible = ref(false)
+let pollTimer: ReturnType<typeof setTimeout> | undefined
+const canPreview = computed(() => auth(PREVIEW_PERMISSION))
+
+const { copyText } = commonFunction()
+
+function buildQuery(): TerminalLogQuery {
+	return {
+		hardName: queryForm.hardName || undefined,
+		uniqueCode: queryForm.uniqueCode || undefined,
+		merchantId: queryForm.merchantId,
+		deptId: queryForm.deptId,
+		logDateStart: queryForm.logDateRange?.[0],
+		logDateEnd: queryForm.logDateRange?.[1],
+		uploadTimeStart: queryForm.uploadTimeRange?.[0],
+		uploadTimeEnd: queryForm.uploadTimeRange?.[1],
+	}
+}
+
+async function loadDevices(keepSelection = false) {
+	deviceLoading.value = true
+	try {
+		const { data } = await terminalLogApi.fetchDevicePage({
+			...buildQuery(),
+			current: devicePage.value,
+			size: devicePageSize,
+		})
+		devices.value = data?.records ?? []
+		deviceTotal.value = Number(data?.total ?? 0)
+		if (keepSelection && selectedDevice.value) {
+			const refreshed = devices.value.find((item) => String(item.hardId) === String(selectedDevice.value?.hardId))
+			if (refreshed) {
+				selectedDevice.value = refreshed
+				return
+			}
+			await selectDevice(devices.value[0])
+			return
+		}
+		if (!devices.value.some((item) => String(item.hardId) === String(selectedDevice.value?.hardId))) {
+			await selectDevice(devices.value[0])
+		}
+	} catch (error: any) {
+		useMessage().error(error?.msg || "获取终端日志设备失败")
+	} finally {
+		deviceLoading.value = false
+	}
+}
+
+async function selectDevice(device?: TerminalLogDevice) {
+	selectedDevice.value = device
+	selectedFile.value = undefined
+	preview.value = undefined
+	keyword.value = ""
+	fileTree.value = []
+	if (device) await loadFileTree()
+}
+
+async function loadFileTree() {
+	if (!selectedDevice.value) return
+	treeLoading.value = true
+	try {
+		const { data } = await terminalLogApi.fetchFileTree({
+			...buildQuery(),
+			hardId: selectedDevice.value.hardId,
+		})
+		fileTree.value = data ?? []
+		const refreshedFile = selectedFile.value
+			? findTreeFile(fileTree.value, selectedFile.value.key)
+			: undefined
+		if (refreshedFile) {
+			selectedFile.value = refreshedFile
+		} else {
+			selectedFile.value = undefined
+			preview.value = undefined
+			keyword.value = ""
+		}
+	} catch (error: any) {
+		useMessage().error(error?.msg || "获取日志文件树失败")
+	} finally {
+		treeLoading.value = false
+	}
+}
+
+function findTreeFile(nodes: TerminalLogTreeNode[], key: string): TerminalLogTreeNode | undefined {
+	for (const node of nodes) {
+		if (node.key === key && !node.directory) return node
+		const child = findTreeFile(node.children ?? [], key)
+		if (child) return child
+	}
+	return undefined
+}
+
+async function selectFile(file: TerminalLogTreeNode) {
+	selectedFile.value = file
+	preview.value = undefined
+	keyword.value = ""
+	if (!canPreview.value) {
+		useMessage().warning(auth(DOWNLOAD_PERMISSION) ? "暂无日志预览权限，可使用完整下载" : "暂无日志预览权限")
+		return
+	}
+	await refreshPreview()
+}
+
+async function refreshPreview() {
+	if (selectedFile.value?.fileId == null || !canPreview.value) return
+	previewLoading.value = true
+	try {
+		const { data } = await terminalLogApi.fetchPreview(selectedFile.value.fileId)
+		preview.value = data
+	} catch (error: any) {
+		useMessage().error(error?.msg || "读取日志预览失败")
+	} finally {
+		previewLoading.value = false
+	}
+}
+
+function copyPreview() {
+	if (!preview.value?.content) return
+	const normalizedKeyword = keyword.value.trim().toLocaleLowerCase()
+	const content = normalizedKeyword
+		? preview.value.content
+				.split(/\r?\n/)
+				.filter((line) => line.toLocaleLowerCase().includes(normalizedKeyword))
+				.join("\n")
+		: preview.value.content
+	copyText(content)
+}
+
+async function downloadCurrent() {
+	if (selectedFile.value?.fileId == null || !auth(DOWNLOAD_PERMISSION)) return
+	try {
+		const blob = await terminalLogApi.downloadFile(selectedFile.value.fileId)
+		saveLogBlob(blob, preview.value?.originalName || selectedFile.value.label)
+	} catch (error: any) {
+		useMessage().error(error?.msg || "日志下载失败")
+	}
+}
+
+function saveLogBlob(blob: Blob, fileName: string) {
+	const link = document.createElement("a")
+	link.href = URL.createObjectURL(blob)
+	link.download = fileName.replace(/[<>:"/\\|?*]/g, "_").substring(0, 255)
+	link.style.display = "none"
+	document.body.appendChild(link)
+	link.click()
+	setTimeout(() => {
+		URL.revokeObjectURL(link.href)
+		link.remove()
+	}, 0)
+}
+
+function handleQuery() {
+	stopPolling()
+	devicePage.value = 1
+	selectDevice(undefined)
+	loadDevices()
+}
+
+function resetQuery() {
+	queryRef.value?.resetFields()
+	queryForm.logDateRange = []
+	queryForm.uploadTimeRange = []
+	handleQuery()
+}
+
+function changeDevicePage(page: number) {
+	stopPolling()
+	devicePage.value = page
+	selectDevice(undefined)
+	loadDevices()
+}
+
+function selectDeviceFromDrawer(device: TerminalLogDevice) {
+	deviceDrawerVisible.value = false
+	selectDevice(device)
+}
+
+function selectFileFromDrawer(file: TerminalLogTreeNode) {
+	fileDrawerVisible.value = false
+	selectFile(file)
+}
+
+function openPullDialog() {
+	if (!auth(PULL_PERMISSION)) return
+	pullHardId.value = undefined
+	pullDialogVisible.value = true
+}
+
+async function pullSelectedDevice() {
+	if (selectedDevice.value) await sendPullCommand(selectedDevice.value.hardId, selectedDevice.value.latestUploadTime)
+}
+
+async function pullOtherDevice() {
+	if (!pullHardId.value) return
+	pullDialogVisible.value = false
+	await sendPullCommand(pullHardId.value)
+}
+
+async function sendPullCommand(hardId: string | number, previousUploadTime?: string) {
+	if (!auth(PULL_PERMISSION) || pulling.value) return
+	stopPolling()
+	pulling.value = true
+	try {
+		let baselineTime = previousUploadTime
+		let hadHistory = previousUploadTime != null
+		if (!hadHistory) {
+			const { data } = await terminalLogApi.fetchDevicePage({ hardId, current: 1, size: 1 })
+			const baseline = data?.records?.[0] as TerminalLogDevice | undefined
+			hadHistory = Boolean(baseline)
+			baselineTime = baseline?.latestUploadTime
+		}
+		await terminalLogApi.pullTerminalLog(hardId)
+		useMessage().success("指令已发送，日志无变化时列表不会更新")
+		startPolling(hardId, baselineTime, hadHistory)
+	} catch (error: any) {
+		pulling.value = false
+		useMessage().error(error?.msg || "日志拉取指令发送失败")
+	}
+}
+
+// MQTT 只负责通知终端上传，管理端按固定窗口轮询，避免持续占用接口资源。
+function startPolling(hardId: string | number, previousUploadTime: string | undefined, hadHistory: boolean) {
+	let count = 0
+	const poll = async () => {
+		count += 1
+		try {
+			const { data } = await terminalLogApi.fetchDevicePage({ hardId, current: 1, size: 1 })
+			const current = data?.records?.[0] as TerminalLogDevice | undefined
+			const changed = current && (!hadHistory || current.latestUploadTime !== previousUploadTime)
+			if (changed) {
+				stopPolling()
+				devicePage.value = 1
+				await loadDevices()
+				const refreshed = devices.value.find((item) => String(item.hardId) === String(hardId)) ?? current
+				await selectDevice(refreshed)
+				useMessage().success("终端日志已更新")
+				return
+			}
+		} catch {
+			// 单次轮询失败不终止等待，网络恢复后仍可在剩余窗口内发现新日志。
+		}
+		if (count >= POLL_MAX_COUNT) {
+			stopPolling()
+			useMessage().info("等待结束，终端离线或日志内容无变化")
+			return
+		}
+		pollTimer = setTimeout(poll, POLL_INTERVAL_MS)
+	}
+	pollTimer = setTimeout(poll, POLL_INTERVAL_MS)
+}
+
+function stopPolling() {
+	if (pollTimer) clearTimeout(pollTimer)
+	pollTimer = undefined
+	pulling.value = false
+}
+
+onMounted(() => loadDevices())
+onBeforeUnmount(stopPolling)
+</script>
+
+<style scoped>
+.terminal-log-query:deep(.el-form-item) {
+	margin: 0;
+}
+
+/* 查询项由外层十二列栅格分配宽度，控件只负责填满网格，避免固定像素宽度造成随机换行。 */
+.terminal-log-query:deep(.el-input),
+.terminal-log-query:deep(.el-select),
+.terminal-log-query:deep(.el-tree-select),
+.terminal-log-query:deep(.el-date-editor) {
+	width: 100%;
+	min-width: 0;
+}
+
+.terminal-log-query:deep(.el-form-item__content) {
+	min-width: 0;
+}
+
+.terminal-log-query__actions:deep(.el-form-item__content) {
+	justify-content: flex-end;
+}
+
+.terminal-log-split,
+.terminal-log-split:deep(.splitpanes__pane) {
+	height: 100%;
+	min-height: 0;
+	background: var(--el-bg-color);
+}
+
+.terminal-log-split:deep(.splitpanes__splitter) {
+	width: 5px;
+	border-left: 1px solid var(--el-border-color-lighter);
+	border-right: 1px solid var(--el-border-color-lighter);
+	background: var(--el-fill-color-light);
+}
+
+:deep(.el-drawer__body) {
+	min-height: 0;
+	padding: 0;
+}
+</style>
diff --git a/src/views/hard/hard-terminal-log-file/log-viewer.vue b/src/views/hard/hard-terminal-log-file/log-viewer.vue
new file mode 100644
index 0000000..f6e2906
--- /dev/null
+++ b/src/views/hard/hard-terminal-log-file/log-viewer.vue
@@ -0,0 +1,140 @@
+<template>
+	<div ref="hostRef" class="terminal-log-viewer" aria-label="终端日志只读预览"></div>
+</template>
+
+<script setup lang="ts">
+import CodeMirror from "codemirror"
+import "codemirror/lib/codemirror.css"
+import "codemirror/addon/selection/active-line"
+
+const props = withDefaults(
+	defineProps<{
+		modelValue?: string
+		keyword?: string
+	}>(),
+	{
+		modelValue: "",
+		keyword: "",
+	},
+)
+
+const hostRef = ref<HTMLElement>()
+// 当前工程未引入 CodeMirror 5 类型包，运行时 API 保持由锁定版本提供。
+let editor: any
+let keywordMarks: any[] = []
+
+const displayValue = computed(() => {
+	const keyword = props.keyword.trim().toLocaleLowerCase()
+	if (!keyword) return props.modelValue
+	return props.modelValue
+		.split(/\r?\n/)
+		.filter((line) => line.toLocaleLowerCase().includes(keyword))
+		.join("\n")
+})
+
+const logLevelOverlay = {
+	token(stream: any) {
+		if (stream.match(/\b(ERROR|FATAL)\b/)) return "log-error"
+		if (stream.match(/\bWARN(?:ING)?\b/)) return "log-warn"
+		if (stream.match(/\bINFO\b/)) return "log-info"
+		while (stream.next() != null && !stream.match(/\b(ERROR|FATAL|WARN(?:ING)?|INFO)\b/, false)) {
+			// 连续消费普通字符，避免逐字符触发 overlay 解析。
+		}
+		return null
+	},
+}
+
+function refreshKeywordMarks() {
+	keywordMarks.forEach((mark) => mark.clear())
+	keywordMarks = []
+	const keyword = props.keyword.trim()
+	if (!editor || !keyword) return
+	const normalizedKeyword = keyword.toLocaleLowerCase()
+	for (let line = 0; line < editor.lineCount(); line += 1) {
+		const source = editor.getLine(line)
+		const normalizedSource = source.toLocaleLowerCase()
+		let start = normalizedSource.indexOf(normalizedKeyword)
+		while (start >= 0) {
+			keywordMarks.push(
+				editor.markText(
+					{ line, ch: start },
+					{ line, ch: start + keyword.length },
+					{ className: "terminal-log-keyword" },
+				),
+			)
+			start = normalizedSource.indexOf(normalizedKeyword, start + keyword.length)
+		}
+	}
+}
+
+watch([displayValue, () => props.keyword], ([value]) => {
+	if (!editor) return
+	if (editor.getValue() !== value) editor.setValue(value)
+	// 不同关键词可能筛出相同的行，仍需单独刷新高亮位置。
+	refreshKeywordMarks()
+})
+
+onMounted(() => {
+	if (!hostRef.value) return
+	editor = CodeMirror(hostRef.value, {
+		value: displayValue.value,
+		readOnly: "nocursor",
+		lineNumbers: true,
+		lineWrapping: false,
+		styleActiveLine: true,
+		viewportMargin: 50,
+	})
+	editor.addOverlay(logLevelOverlay)
+	refreshKeywordMarks()
+})
+
+onBeforeUnmount(() => {
+	keywordMarks.forEach((mark) => mark.clear())
+	keywordMarks = []
+	editor = undefined
+})
+</script>
+
+<style scoped>
+.terminal-log-viewer {
+	height: 100%;
+	min-height: 0;
+	border-top: 1px solid var(--el-border-color-lighter);
+	background: var(--el-bg-color);
+}
+
+.terminal-log-viewer:deep(.CodeMirror) {
+	height: 100%;
+	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+	font-size: 13px;
+	line-height: 1.65;
+	background: var(--el-bg-color);
+	color: var(--el-text-color-primary);
+}
+
+.terminal-log-viewer:deep(.CodeMirror-gutters) {
+	border-right-color: var(--el-border-color-lighter);
+	background: var(--el-fill-color-lighter);
+}
+
+.terminal-log-viewer:deep(.cm-log-error) {
+	color: var(--el-color-danger);
+	font-weight: 700;
+}
+
+.terminal-log-viewer:deep(.cm-log-warn) {
+	color: var(--el-color-warning);
+	font-weight: 700;
+}
+
+.terminal-log-viewer:deep(.cm-log-info) {
+	color: var(--el-color-primary);
+	font-weight: 600;
+}
+
+.terminal-log-viewer:deep(.terminal-log-keyword) {
+	border-radius: 2px;
+	background: var(--el-color-warning-light-7);
+	color: var(--el-text-color-primary);
+}
+</style>
diff --git a/src/views/hard/hard-terminal-log-file/preview-panel.vue b/src/views/hard/hard-terminal-log-file/preview-panel.vue
new file mode 100644
index 0000000..ffb0191
--- /dev/null
+++ b/src/views/hard/hard-terminal-log-file/preview-panel.vue
@@ -0,0 +1,74 @@
+<template>
+	<section class="flex h-full min-h-0 flex-col bg-[var(--el-bg-color)]" aria-label="终端日志预览">
+		<header class="flex min-h-[53px] flex-wrap items-center justify-between gap-2 border-b border-br-light px-3 py-2">
+			<div class="min-w-0">
+				<div class="truncate font-medium text-[var(--el-text-color-primary)]">{{ preview?.originalName || "日志预览" }}</div>
+				<div class="mt-0.5 truncate text-xs text-[var(--el-text-color-secondary)]">
+					{{ preview?.relativePath || "从文件树选择一个日志文件" }}
+				</div>
+			</div>
+			<div class="flex items-center gap-2">
+				<el-input v-model="keyword" clearable prefix-icon="Search" placeholder="筛选并高亮关键词" class="w-56" />
+				<el-button icon="CopyDocument" :disabled="!preview?.content" @click="$emit('copy')">复制</el-button>
+				<el-button
+					v-auth="'hard_hardTerminalLogFile_preview'"
+					icon="Refresh"
+					:disabled="!hasFile"
+					:loading="loading"
+					@click="$emit('refresh')"
+				>
+					刷新
+				</el-button>
+				<el-button
+					v-auth="'hard_hardTerminalLogFile_down'"
+					type="primary"
+					plain
+					icon="Download"
+					:disabled="!hasFile"
+					@click="$emit('download')"
+				>
+					完整下载
+				</el-button>
+			</div>
+		</header>
+		<el-alert
+			v-if="preview?.truncated"
+			class="rounded-none"
+			type="warning"
+			:closable="false"
+			show-icon
+			title="仅展示日志尾部最多 1MB / 5000 行，完整内容请下载查看。"
+		/>
+		<div v-loading="loading" class="min-h-0 flex-1">
+			<log-viewer v-if="preview" :model-value="preview.content" :keyword="keyword" />
+			<el-empty v-else :description="emptyDescription" />
+		</div>
+	</section>
+</template>
+
+<script setup lang="ts">
+import type { TerminalLogPreview } from "/@/api/hard/hard-terminal-log-file"
+import LogViewer from "./log-viewer.vue"
+
+const props = defineProps<{
+	preview?: TerminalLogPreview
+	loading: boolean
+	canPreview: boolean
+	hasDevice: boolean
+	hasFile: boolean
+}>()
+
+defineEmits<{
+	(event: "copy"): void
+	(event: "refresh"): void
+	(event: "download"): void
+}>()
+
+const keyword = defineModel<string>("keyword", { default: "" })
+
+const emptyDescription = computed(() => {
+	if (!props.hasDevice) return "请先选择终端设备"
+	if (props.hasFile && !props.canPreview) return "暂无日志预览权限，可使用完整下载"
+	return "请选择日志文件"
+})
+</script>
diff --git a/src/views/hard/xfj/xfj-log/index.vue b/src/views/hard/xfj/xfj-log/index.vue
new file mode 100644
index 0000000..a723b19
--- /dev/null
+++ b/src/views/hard/xfj/xfj-log/index.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="layout-padding">
+    <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"
+      		@reset="resetQuery"
+      	>
+      		<el-form-item style="width: 300px" label="设备名称" prop="hardName">
+      			<el-input v-model="state.queryForm.hardName" />
+      		</el-form-item>
+      		<el-form-item style="width: 300px" label="设备唯一编号" prop="uniqueCode">
+      			<el-input v-model="state.queryForm.uniqueCode" />
+      		</el-form-item>
+      		<el-form-item style="width: 450px" label="创建时间" prop="createTimeList">
+      			<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
+      		</el-form-item>
+
+      		<template #more>
+      			<el-form-item style="width: 300px" label="设备类型" prop="hardType">
+      				<dict-select v-model="state.queryForm.hardType" dict-code="hard_type" />
+      			</el-form-item>
+      			<el-form-item style="width: 300px" label="简介" prop="title">
+      				<el-input v-model="state.queryForm.title" />
+      			</el-form-item>
+      		</template>
+      	</SearchPanel>
+      </el-row>
+      <el-row>
+        <div class="mb8" style="width: 100%">
+          <right-toolbar v-model:showSearch="showSearch" :export="false" @exportExcel="exportExcel" class="ml10 mr20"
+            style="float: right;" @queryTable="getDataList"></right-toolbar>
+        </div>
+      </el-row>
+      <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+        :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
+        @sort-change="sortChangeHandle">
+        <el-table-column type="selection" width="40" align="center" />
+        <el-table-column type="index" label="#" width="40" />
+        <el-table-column prop="hardName" label="设备名称" width="180" show-overflow-tooltip />
+        <el-table-column prop="uniqueCode" label="设备唯一编号" width="120" />
+        <el-table-column prop="hardType" label="设备类型" width="120">
+          <template #default="{ row }">
+            <dict-tag :options="hard_type" :value="row.hardType" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="title" label="简介" width="250" show-overflow-tooltip />
+        <el-table-column prop="headers" label="headers" width="180">
+          <template #default="{ row }">
+            <preview-json :json="row.headers" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="res" label="res" width="180">
+          <template #default="{ row }">
+            <preview-json :json="row.res" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="req" label="req" width="180">
+          <template #default="{ row }">
+            <preview-json :json="row.req" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="startTime" label="请求时间">
+          <el-table-column prop="startTime" label="开始时间" width="180" />
+          <el-table-column prop="endTime" label="结束时间" width="180" />
+          <el-table-column prop="cost" label="耗时(秒)" width="100">
+            <template #default="{ row }">
+              <div>{{ row.cost }}毫秒</div>
+            </template>
+          </el-table-column>
+        </el-table-column>
+      </el-table>
+      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="systemHardXfjLog">
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import * as hardXfjLogApi from "/@/api/hard/hard-xfj-log";
+import { useMessage, useMessageBox } from "/@/hooks/message";
+import { useDict } from '/@/hooks/dict';
+
+// 定义查询字典
+const { hard_type } = useDict("hard_type")
+// 定义变量内容
+
+// 搜索变量
+const queryRef = ref()
+const showSearch = ref(true)
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: {},
+  pageList: hardXfjLogApi.fetchList
+})
+
+//  table hook
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  sortChangeHandle,
+  downBlobFile,
+  tableStyle
+} = useTable(state)
+
+// 清空搜索条件
+const resetQuery = () => {
+  // 清空搜索条件
+  queryRef.value?.resetFields()
+  // 清空多选
+  selectObjs.value = []
+  getDataList()
+}
+
+// 导出excel
+const exportExcel = () => {
+  downBlobFile('/hard/hardXfjLog/export', Object.assign(state.queryForm, { ids: selectObjs }), 'hardXfjLog.xlsx')
+}
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+  selectObjs.value = objs.map(({ id }) => id);
+  multiple.value = !objs.length;
+};
+
+// 删除操作
+const handleDelete = async (ids: string[]) => {
+  try {
+    await useMessageBox().confirm('此操作将永久删除');
+  } catch {
+    return;
+  }
+
+  try {
+    await hardXfjLogApi.delObjs(ids);
+    getDataList();
+    useMessage().success('删除成功');
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  }
+};
+</script>
\ No newline at end of file
diff --git a/src/views/thirdparty/third-key-manage/index.vue b/src/views/thirdparty/third-key-manage/index.vue
index 7754fd2..83320af 100644
--- a/src/views/thirdparty/third-key-manage/index.vue
+++ b/src/views/thirdparty/third-key-manage/index.vue
@@ -1,19 +1,20 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-				<el-row>
-					<el-form-item style="width: 250px" label="第三方名" prop="name">
-						<el-input v-model="state.queryForm.name" />
-					</el-form-item>
-					<el-form-item>
-						<el-button icon="Search" type="primary" @click="getDataList">
-							{{ $t("common.queryBtn") }}
-						</el-button>
-						<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
-					</el-form-item>
-				</el-row>
-			</el-form>
+			<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"
+				@reset="resetQuery"
+			>
+				<el-form-item style="width: 250px" label="第三方名" prop="name">
+					<el-input v-model="state.queryForm.name" />
+				</el-form-item>
+			</SearchPanel>
 			<el-row>
 				<div class="mb8" style="width: 100%">
 					<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()" v-auth="'third_thirdKeyManage_add'">
diff --git a/src/views/thirdparty/third-pay-log/index.vue b/src/views/thirdparty/third-pay-log/index.vue
index 5342b1a..42930a6 100644
--- a/src/views/thirdparty/third-pay-log/index.vue
+++ b/src/views/thirdparty/third-pay-log/index.vue
@@ -1,7 +1,16 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
+			<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"
+				@reset="resetQuery"
+			>
 				<el-form-item style="width: 250px" label="用户" prop="paySourceType">
 					<dict-select v-model="state.queryForm.apiType" dict-code="third_key_type" />
 				</el-form-item>
@@ -9,34 +18,43 @@
 					<dict-select v-model="state.queryForm.bizType" dict-code="third_pay_api_type" />
 				</el-form-item>
 				<el-form-item style="width: 400px" label="请求时间" prop="createTimeList">
-					<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD"
-						type="daterange" />
+					<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD" type="daterange" />
 				</el-form-item>
-				<el-form-item>
-					<el-button icon="Search" type="primary" @click="getDataList">
-						{{ $t("common.queryBtn") }}
-					</el-button>
-					<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
-				</el-form-item>
-			</el-form>
+			</SearchPanel>
 			<el-row>
 				<div class="mb8" style="width: 100%">
-					<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
-						v-auth="'third_thirdPayLog_add'">
+					<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()" v-auth="'third_thirdPayLog_add'">
 						新 增
 					</el-button>
-					<el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'third_thirdPayLog_del'"
-						@click="handleDelete(selectObjs)">
+					<el-button
+						plain
+						:disabled="multiple"
+						icon="Delete"
+						type="primary"
+						v-auth="'third_thirdPayLog_del'"
+						@click="handleDelete(selectObjs)"
+					>
 						删除
 					</el-button>
-					<right-toolbar v-model:showSearch="showSearch" :export="'third_thirdPayLog_export'"
-						@exportExcel="exportExcel" class="ml10 mr20" style="float: right"
-						@queryTable="getDataList"></right-toolbar>
+					<right-toolbar
+						v-model:showSearch="showSearch"
+						:export="'third_thirdPayLog_export'"
+						@exportExcel="exportExcel"
+						class="ml10 mr20"
+						style="float: right"
+						@queryTable="getDataList"
+					></right-toolbar>
 				</div>
 			</el-row>
-			<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-				:header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
-				@sort-change="sortChangeHandle">
+			<el-table
+				:data="state.dataList"
+				v-loading="state.loading"
+				border
+				:cell-style="tableStyle.cellStyle"
+				:header-cell-style="tableStyle.headerCellStyle"
+				@selection-change="selectionChangHandle"
+				@sort-change="sortChangeHandle"
+			>
 				<el-table-column type="index" label="#" width="80" />
 				<el-table-column prop="paySourceType" label="发起方" width="120">
 					<template #default="{ row }">
@@ -64,19 +82,30 @@
 				<el-table-column prop="createTime" label="调用时间" width="180" />
 				<el-table-column label="操作" fixed="right" width="80" v-if="false">
 					<template #default="scope">
-						<el-button v-if="false" icon="edit-pen" text type="primary" v-auth="'third_thirdPayLog_edit'"
-							@click="formDialogRef.openDialog(scope.row.id)">
+						<el-button
+							v-if="false"
+							icon="edit-pen"
+							text
+							type="primary"
+							v-auth="'third_thirdPayLog_edit'"
+							@click="formDialogRef.openDialog(scope.row.id)"
+						>
 							编辑
 						</el-button>
-						<el-button v-if="false" icon="delete" text type="primary" v-auth="'third_thirdPayLog_del'"
-							@click="handleDelete([scope.row.id])">
+						<el-button
+							v-if="false"
+							icon="delete"
+							text
+							type="primary"
+							v-auth="'third_thirdPayLog_del'"
+							@click="handleDelete([scope.row.id])"
+						>
 							删除
 						</el-button>
 					</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>
 
 		<!-- 编辑、新增  -->
diff --git a/src/views/thirdparty/third-pay-order/index.vue b/src/views/thirdparty/third-pay-order/index.vue
index fa1c1a3..569a07c 100644
--- a/src/views/thirdparty/third-pay-order/index.vue
+++ b/src/views/thirdparty/third-pay-order/index.vue
@@ -1,147 +1,158 @@
 <template>
-  <div class="layout-padding">
-    <div class="layout-padding-auto layout-padding-view">
-      <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-        <el-form-item style="width: 250px" label="订单号" prop="payNo">
-          <el-input v-model="state.queryForm.payNo" />
-        </el-form-item>
-        <el-form-item style="width: 250px" label="支付平台" prop="payPlatformType">
-          <dict-select v-model="state.queryForm.payPlatformType" dict-code="mini_platform_type" />
-        </el-form-item>
-        <el-form-item style="width: 250px" label="业务类型" prop="bizType">
-          <dict-select v-model="state.queryForm.bizType" dict-code="third_pay_order_biz_type" />
-        </el-form-item>
-        <el-form-item style="width: 250px" label="用户" prop="userId">
-          <select-user v-model="state.queryForm.userId" />
-        </el-form-item>
-        <el-form-item style="width: 450px" label="支付时间" prop="payTimeList">
-          <el-date-picker v-model="state.queryForm.payTimeList" value-format="YYYY-MM-DD HH:mm:ss"
-            type="datetimerange" />
-        </el-form-item>
-        <el-form-item style="width: 450px" label="退款时间" prop="refundTimeList">
-          <el-date-picker v-model="state.queryForm.refundTimeList" value-format="YYYY-MM-DD HH:mm:ss"
-            type="datetimerange" />
-        </el-form-item>
-        <el-form-item>
-          <el-button icon="Search" type="primary" @click="getDataList">
-            {{ $t("common.queryBtn") }}
-          </el-button>
-          <el-button icon="Refresh" @click="resetQuery">
-            {{ $t("common.resetBtn") }}
-          </el-button>
-        </el-form-item>
-      </el-form>
-      <el-row>
-        <div class="mb8" style="width: 100%">
-          <!-- :export="'third_thirdPayLog_export'" -->
-          <right-toolbar v-model:showSearch="showSearch" @exportExcel="exportExcel" class="ml10 mr20"
-            style="float: right" @queryTable="getDataList"></right-toolbar>
-        </div>
-      </el-row>
-      <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-        :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
-        @sort-change="sortChangeHandle">
-        <el-table-column type="index" label="#" width="40" />
-        <el-table-column prop="payPlatformType" width="150" label="支付平台类型">
-          <template #default="{ row }">
-            <dict-tag :options="mini_platform_type" :value="row.payPlatformType" />
-          </template>
-        </el-table-column>
-        <el-table-column prop="bizType" label="支付业务类型" width="150">
-          <template #default="{ row }">
-            <dict-tag :options="third_pay_order_biz_type" :value="row.bizType" />
-          </template>
-        </el-table-column>
-        <el-table-column prop="bizId" label="支付业务id" width="200" show-overflow-tooltip />
-        <el-table-column prop="payNo" label="支付订单号" width="200" show-overflow-tooltip />
-        <el-table-column prop="username" label="用户" width="100" show-overflow-tooltip />
-        <el-table-column prop="userPhone" label="用户手机号" width="150" show-overflow-tooltip />
-        <el-table-column prop="userCode" label="用户第三方平台唯一编码" width="280" />
-        <el-table-column prop="price" width="100" label="支付金额">
-          <template #default="{ row }">
-            <div class="color-success">{{ displayPrice(row.price) }}</div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="status" width="100" label="支付状态">
-          <template #default="{ row }">
-            <dict-tag :options="third_pay_order_status" :value="row.status" />
-          </template>
-        </el-table-column>
-        <el-table-column prop="payTime" label="支付时间" width="180" />
-        <el-table-column prop="payTime" label="支付" width="280">
-          <template #default="{ row }">
-            <div>
-              <div class="flex items-center">
-                <div class="w-[40%] text-left">支付参数:</div>
-                <preview-json v-if="row.payRep" :json="row.payRep" />
-                <div class="color-danger" v-else>暂无</div>
-              </div>
-              <div class="flex items-center">
-                <div class="w-[40%] text-left">支付返回:</div>
-                <preview-json v-if="row.payRes" :json="row.payRes" />
-                <div class="color-danger" v-else>暂无</div>
-              </div>
-              <div class="flex items-center">
-                <div class="w-[40%] text-left">支付回调返回:</div>
-                <preview-json v-if="row.payCallbackRes" :json="row.payCallbackRes" />
-                <div class="color-danger" v-else>暂无</div>
-              </div>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="refundNo" label="退款订单号" width="200" show-overflow-tooltip />
-        <el-table-column prop="refundTime" label="退款时间" width="180" />
-        <el-table-column prop="refundRes" label="退款" width="280">
-          <template #default="{ row }">
-            <div>
-              <div class="flex items-center">
-                <div class="w-[40%] text-left">退款参数:</div>
-                <preview-json v-if="row.refundRep" :json="row.refundRep" />
-                <div class="color-danger" v-else>暂无</div>
-              </div>
-              <div class="flex items-center">
-                <div class="w-[40%] text-left">退款返回:</div>
-                <preview-json v-if="row.refundRes" :json="row.refundRes" />
-                <div class="color-danger" v-else>暂无</div>
-              </div>
-              <div class="flex items-center">
-                <div class="w-[40%] text-left">退款回调返回:</div>
-                <preview-json v-if="row.refundCallbackRes" :json="row.refundCallbackRes" />
-                <div class="color-danger" v-else>暂无</div>
-              </div>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column fixed="right" align="center" label="操作" prop="createTime" width="100">
-          <template #default="{ row }">
-            <div class="flex items-center justify-center">
-              <el-button v-if="row.status == 20" icon="CloseBold" text type="primary" @click="refund(row)">
-                退款
-              </el-button>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
-    </div>
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<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"
+				@reset="resetQuery"
+			>
+				<el-form-item style="width: 250px" label="订单号" prop="payNo">
+					<el-input v-model="state.queryForm.payNo" />
+				</el-form-item>
+				<el-form-item style="width: 250px" label="支付平台" prop="payPlatformType">
+					<dict-select v-model="state.queryForm.payPlatformType" dict-code="mini_platform_type" />
+				</el-form-item>
+				<el-form-item style="width: 250px" label="业务类型" prop="bizType">
+					<dict-select v-model="state.queryForm.bizType" dict-code="third_pay_order_biz_type" />
+				</el-form-item>
+				<el-form-item style="width: 250px" label="用户" prop="userId">
+					<select-user v-model="state.queryForm.userId" />
+				</el-form-item>
+				<el-form-item style="width: 450px" label="支付时间" prop="payTimeList">
+					<el-date-picker v-model="state.queryForm.payTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
+				</el-form-item>
+				<el-form-item style="width: 450px" label="退款时间" prop="refundTimeList">
+					<el-date-picker v-model="state.queryForm.refundTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
+				</el-form-item>
+			</SearchPanel>
+			<el-row>
+				<div class="mb8" style="width: 100%">
+					<!-- :export="'third_thirdPayLog_export'" -->
+					<right-toolbar
+						v-model:showSearch="showSearch"
+						@exportExcel="exportExcel"
+						class="ml10 mr20"
+						style="float: right"
+						@queryTable="getDataList"
+					></right-toolbar>
+				</div>
+			</el-row>
+			<el-table
+				:data="state.dataList"
+				v-loading="state.loading"
+				border
+				:cell-style="tableStyle.cellStyle"
+				:header-cell-style="tableStyle.headerCellStyle"
+				@selection-change="selectionChangHandle"
+				@sort-change="sortChangeHandle"
+			>
+				<el-table-column type="index" label="#" width="40" />
+				<el-table-column prop="payPlatformType" width="150" label="支付平台类型">
+					<template #default="{ row }">
+						<dict-tag :options="mini_platform_type" :value="row.payPlatformType" />
+					</template>
+				</el-table-column>
+				<el-table-column prop="bizType" label="支付业务类型" width="150">
+					<template #default="{ row }">
+						<dict-tag :options="third_pay_order_biz_type" :value="row.bizType" />
+					</template>
+				</el-table-column>
+				<el-table-column prop="bizId" label="支付业务id" width="200" show-overflow-tooltip />
+				<el-table-column prop="payNo" label="支付订单号" width="200" show-overflow-tooltip />
+				<el-table-column prop="username" label="用户" width="100" show-overflow-tooltip />
+				<el-table-column prop="userPhone" label="用户手机号" width="150" show-overflow-tooltip />
+				<el-table-column prop="userCode" label="用户第三方平台唯一编码" width="280" />
+				<el-table-column prop="price" width="100" label="支付金额">
+					<template #default="{ row }">
+						<div class="color-success">{{ displayPrice(row.price) }}</div>
+					</template>
+				</el-table-column>
+				<el-table-column prop="status" width="100" label="支付状态">
+					<template #default="{ row }">
+						<dict-tag :options="third_pay_order_status" :value="row.status" />
+					</template>
+				</el-table-column>
+				<el-table-column prop="payTime" label="支付时间" width="180" />
+				<el-table-column prop="payTime" label="支付" width="280">
+					<template #default="{ row }">
+						<div>
+							<div class="flex items-center">
+								<div class="w-[40%] text-left">支付参数:</div>
+								<preview-json v-if="row.payRep" :json="row.payRep" />
+								<div class="color-danger" v-else>暂无</div>
+							</div>
+							<div class="flex items-center">
+								<div class="w-[40%] text-left">支付返回:</div>
+								<preview-json v-if="row.payRes" :json="row.payRes" />
+								<div class="color-danger" v-else>暂无</div>
+							</div>
+							<div class="flex items-center">
+								<div class="w-[40%] text-left">支付回调返回:</div>
+								<preview-json v-if="row.payCallbackRes" :json="row.payCallbackRes" />
+								<div class="color-danger" v-else>暂无</div>
+							</div>
+						</div>
+					</template>
+				</el-table-column>
+				<el-table-column prop="refundNo" label="退款订单号" width="200" show-overflow-tooltip />
+				<el-table-column prop="refundTime" label="退款时间" width="180" />
+				<el-table-column prop="refundRes" label="退款" width="280">
+					<template #default="{ row }">
+						<div>
+							<div class="flex items-center">
+								<div class="w-[40%] text-left">退款参数:</div>
+								<preview-json v-if="row.refundRep" :json="row.refundRep" />
+								<div class="color-danger" v-else>暂无</div>
+							</div>
+							<div class="flex items-center">
+								<div class="w-[40%] text-left">退款返回:</div>
+								<preview-json v-if="row.refundRes" :json="row.refundRes" />
+								<div class="color-danger" v-else>暂无</div>
+							</div>
+							<div class="flex items-center">
+								<div class="w-[40%] text-left">退款回调返回:</div>
+								<preview-json v-if="row.refundCallbackRes" :json="row.refundCallbackRes" />
+								<div class="color-danger" v-else>暂无</div>
+							</div>
+						</div>
+					</template>
+				</el-table-column>
+				<el-table-column fixed="right" align="center" label="操作" prop="createTime" width="100">
+					<template #default="{ row }">
+						<div class="flex items-center justify-center">
+							<el-button v-if="row.status == 20" icon="CloseBold" text type="primary" @click="refund(row)"> 退款 </el-button>
+						</div>
+					</template>
+				</el-table-column>
+			</el-table>
+			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+		</div>
 
-    <!-- 编辑、新增  -->
-    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
-
-  </div>
+		<!-- 编辑、新增  -->
+		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+	</div>
 </template>
 
 <script setup lang="ts" name="systemThirdPayOrder">
-import { BasicTableProps, useTable } from "/@/hooks/table";
-import * as thirdPayOrderApi from "/@/api/thirdparty/third-pay-order";
-import { useMessage, useMessageBox } from "/@/hooks/message";
-import { useDict } from '/@/hooks/dict';
+import { BasicTableProps, useTable } from "/@/hooks/table"
+import * as thirdPayOrderApi from "/@/api/thirdparty/third-pay-order"
+import { useMessage, useMessageBox } from "/@/hooks/message"
+import { useDict } from "/@/hooks/dict"
 import { displayPrice } from "/@/utils/formatMoney"
 
 // 引入组件
-const FormDialog = defineAsyncComponent(() => import('./form.vue'));
+const FormDialog = defineAsyncComponent(() => import("./form.vue"))
 // 定义查询字典
-const { third_pay_order_biz_type, mini_platform_type, third_pay_order_status } = useDict("third_pay_order_biz_type", "mini_platform_type", "third_pay_order_status")
+const { third_pay_order_biz_type, mini_platform_type, third_pay_order_status } = useDict(
+	"third_pay_order_biz_type",
+	"mini_platform_type",
+	"third_pay_order_status",
+)
 // 定义变量内容
 const formDialogRef = ref()
 // 搜索变量
@@ -152,81 +163,74 @@ const selectObjs = ref([]) as any
 const multiple = ref(true)
 
 const state: BasicTableProps = reactive<BasicTableProps>({
-  createdIsNeed: false,
-  queryForm: {},
-  pageList: thirdPayOrderApi.fetchList
+	createdIsNeed: false,
+	queryForm: {},
+	pageList: thirdPayOrderApi.fetchList,
 })
 
 //  table hook
-const {
-  getDataList,
-  currentChangeHandle,
-  sizeChangeHandle,
-  sortChangeHandle,
-  downBlobFile,
-  tableStyle
-} = useTable(state)
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
 
 onMounted(() => {
-  const { query } = useRoute()
-  if (query.payNo) {
-    state.queryForm.payNo = query.payNo
-  }
-  getDataList()
+	const { query } = useRoute()
+	if (query.payNo) {
+		state.queryForm.payNo = query.payNo
+	}
+	getDataList()
 })
 
 // 清空搜索条件
 const resetQuery = () => {
-  // 清空搜索条件
-  queryRef.value?.resetFields()
-  // 清空多选
-  selectObjs.value = []
-  getDataList()
+	// 清空搜索条件
+	queryRef.value?.resetFields()
+	// 清空多选
+	selectObjs.value = []
+	getDataList()
 }
 
 const refund = async (row: any) => {
-  try {
-    await useMessageBox().confirm(`此操作将退款${row.price}元`)
-  } catch {
-    return
-  }
-  try {
-    await thirdPayOrderApi.miniRefund({
-      payNo: row.payNo,
-      refundPrice: ''
-    })
-    getDataList()
-    useMessage().success("退款成功")
-  } catch (err: any) {
-    useMessage().error(err.msg)
-  }
+	try {
+		await useMessageBox().confirm(`此操作将退款${row.price}元`)
+	} catch {
+		return
+	}
+	try {
+		await thirdPayOrderApi.miniRefund({
+			payNo: row.payNo,
+			refundPrice: "",
+		})
+		getDataList()
+		useMessage().success("退款成功")
+	} catch (err: any) {
+		useMessage().error(err.msg)
+	}
 }
 
 // 导出excel
 const exportExcel = () => {
-  downBlobFile('/third/third-pay-order/export', Object.assign(state.queryForm, { ids: selectObjs }), 'thirdPayOrder.xlsx')
+	downBlobFile("/third/third-pay-order/export", Object.assign(state.queryForm, { ids: selectObjs }), "thirdPayOrder.xlsx")
 }
 
 // 多选事件
 const selectionChangHandle = (objs: { id: string }[]) => {
-  selectObjs.value = objs.map(({ id }) => id);
-  multiple.value = !objs.length;
-};
+	selectObjs.value = objs.map(({ id }) => id)
+	multiple.value = !objs.length
+}
 
 // 删除操作
 const handleDelete = async (ids: string[]) => {
-  try {
-    await useMessageBox().confirm('此操作将永久删除');
-  } catch {
-    return;
-  }
+	try {
+		await useMessageBox().confirm("此操作将永久删除")
+	} catch {
+		return
+	}
 
-  try {
-    await thirdPayOrderApi.delObjs(ids);
-    getDataList();
-    useMessage().success('删除成功');
-  } catch (err: any) {
-    useMessage().error(err.msg);
-  }
-};
-</script>
\ No newline at end of file
+	try {
+		await thirdPayOrderApi.delObjs(ids)
+		getDataList()
+		useMessage().success("删除成功")
+	} catch (err: any) {
+		useMessage().error(err.msg)
+	}
+}
+</script>
diff --git a/src/views/wallet/components/code-use-table.vue b/src/views/wallet/components/code-use-table.vue
index 305fb82..960a581 100644
--- a/src/views/wallet/components/code-use-table.vue
+++ b/src/views/wallet/components/code-use-table.vue
@@ -1,18 +1,20 @@
 <template>
 	<el-dialog title="使用情况" width="60%" v-model="visible" :close-on-click-modal="false" draggable>
-		<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-			<el-row :gutter="24">
-				<el-col :span="6">
-					<el-form-item class="w100" label="是否使用" prop="status">
-						<dict-select v-model="state.queryForm.status" dict-code="yes_no_type" placeholder="是否使用" clearable />
-					</el-form-item>
-				</el-col>
-				<el-form-item>
-					<el-button icon="Search" type="primary" @click="getDataList"> {{ $t("common.queryBtn") }}</el-button>
-					<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
+		<SearchPanel
+			ref="queryRef"
+			:model="state.queryForm"
+			:loading="Boolean(state.loading)"
+			:search-text="$t('common.queryBtn')"
+			:reset-text="$t('common.resetBtn')"
+			@search="getDataList"
+			@reset="resetQuery"
+		>
+			<el-col :span="6">
+				<el-form-item class="w100" label="是否使用" prop="status">
+					<dict-select v-model="state.queryForm.status" dict-code="yes_no_type" placeholder="是否使用" clearable />
 				</el-form-item>
-			</el-row>
-		</el-form>
+			</el-col>
+		</SearchPanel>
 		<el-table
 			:data="state.dataList"
 			v-loading="state.loading"
diff --git a/src/views/wallet/components/transaction-info-form.vue b/src/views/wallet/components/transaction-info-form.vue
new file mode 100644
index 0000000..9116cf5
--- /dev/null
+++ b/src/views/wallet/components/transaction-info-form.vue
@@ -0,0 +1,88 @@
+<template>
+	<el-dialog
+		v-model="visible"
+		title="修改流水信息"
+		width="520px"
+		:close-on-click-modal="false"
+		:close-on-press-escape="!loading"
+		:show-close="!loading"
+		draggable
+	>
+		<el-form ref="dataFormRef" :model="form" :rules="dataRules" label-width="80px" v-loading="loading">
+			<el-form-item label="部门" prop="deptId">
+				<select-dept v-model="form.deptId" placeholder="请选择流水触发部门" />
+			</el-form-item>
+			<el-form-item label="创建时间" prop="createTime">
+				<el-date-picker
+					v-model="form.createTime"
+					type="datetime"
+					value-format="YYYY-MM-DD HH:mm:ss"
+					placeholder="请选择流水创建时间"
+					class="w100"
+				/>
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<span class="dialog-footer">
+				<el-button :disabled="loading" @click="visible = false">取消</el-button>
+				<el-button type="primary" :loading="loading" @click="onSubmit">确认</el-button>
+			</span>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup lang="ts" name="WalletTransactionInfoForm">
+import type { FormInstance, FormRules } from "element-plus"
+import { useMessage } from "/@/hooks/message"
+import { updateInfo, type WalletTransactionUpdateInfoParams } from "/@/api/wallet/wallet-transaction"
+
+interface WalletTransactionInfoRow {
+	id: string | number
+	deptId?: string | number | null
+	createTime?: string | null
+}
+
+const emit = defineEmits<{
+	(event: "refresh"): void
+}>()
+
+const dataFormRef = ref<FormInstance>()
+const visible = ref(false)
+const loading = ref(false)
+const form = reactive<WalletTransactionUpdateInfoParams>({
+	id: "",
+	deptId: "",
+	createTime: "",
+})
+/** 部门与创建时间必填：两者任一未选择都不允许提交，防止误清空原有归属。 */
+const dataRules: FormRules<WalletTransactionUpdateInfoParams> = {
+	deptId: [{ required: true, message: "请选择流水触发部门", trigger: "change" }],
+	createTime: [{ required: true, message: "请选择流水创建时间", trigger: "change" }],
+}
+
+const openDialog = (row: WalletTransactionInfoRow) => {
+	form.id = row.id
+	form.deptId = row.deptId ?? ""
+	form.createTime = row.createTime ?? ""
+	visible.value = true
+	nextTick(() => dataFormRef.value?.clearValidate())
+}
+
+const onSubmit = async () => {
+	const valid = await dataFormRef.value?.validate().catch(() => false)
+	if (!valid) return
+	loading.value = true
+	try {
+		await updateInfo({ id: form.id, deptId: form.deptId, createTime: form.createTime })
+		useMessage().success("流水信息修改成功")
+		visible.value = false
+		emit("refresh")
+	} catch (error: any) {
+		useMessage().error(error?.msg || "流水信息修改失败")
+	} finally {
+		loading.value = false
+	}
+}
+
+defineExpose({ openDialog })
+</script>
diff --git a/src/views/wallet/components/transaction-list.vue b/src/views/wallet/components/transaction-list.vue
index 3f4057f..626c480 100644
--- a/src/views/wallet/components/transaction-list.vue
+++ b/src/views/wallet/components/transaction-list.vue
@@ -11,25 +11,30 @@
 				<template #default="{ row }"> {{ displayPrice(row.balance) }} </template>
 			</el-table-column>
 			<el-table-column align="center" width="80" label="版本号" prop="version" />
+			<el-table-column align="center" label="备注" prop="remark" min-width="180" show-overflow-tooltip />
 			<el-table-column align="center" label="交易时间" prop="createTime" width="180" />
-			<el-table-column align="center" label="操作" prop="createTime" width="100">
+			<el-table-column align="center" label="操作" width="240">
 				<template #default="{ row }">
-					<div v-if="row.walletTypeUniqueCode == '3'" class="flex items-center justify-center">
-						<el-button icon="CloseBold" text type="primary" @click="refund(row)">
+					<div class="row-actions">
+						<el-button v-if="row.walletTypeUniqueCode == '3'" icon="CloseBold" text type="primary"
+							@click="refund(row)">
 							退款
 						</el-button>
-					</div>
-					<div v-else>
-
+						<el-button icon="EditPen" link type="primary" v-auth="'wallet_walletTransaction_edit'"
+							@click="remarkFormRef?.openDialog(row)">修改备注</el-button>
+						<el-button icon="Edit" link type="primary" v-auth="'wallet_walletTransaction_update_info'"
+							@click="infoFormRef?.openDialog(row)">修改信息</el-button>
 					</div>
 				</template>
 			</el-table-column>
 		</el-table>
-		<template #footer>
-			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
-				v-bind="state.pagination" />
-		</template>
+	<template #footer>
+		<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
+			v-bind="state.pagination" />
+	</template>
 	</el-dialog>
+	<transaction-remark-form ref="remarkFormRef" @refresh="getDataList(false)" />
+	<transaction-info-form ref="infoFormRef" @refresh="getDataList(false)" />
 </template>
 
 <script setup lang="ts" name="WalletManageDialog">
@@ -37,12 +42,22 @@ import { BasicTableProps, useTable } from "/@/hooks/table"
 import * as walletTransactionApi from "/@/api/wallet/wallet-transaction"
 import { displayPrice } from "/@/utils/formatMoney"
 
+// 所有钱包流水列表共用的备注编辑表单。
+const TransactionRemarkForm = defineAsyncComponent(() => import("./transaction-remark-form.vue"))
+// 所有钱包流水列表共用的流水信息编辑表单（部门、创建时间）。
+const TransactionInfoForm = defineAsyncComponent(() => import("./transaction-info-form.vue"))
+
 const { push } = useRouter()
 
 // 定义变量内容
 const visible = ref(false)
 // 定义字典
 
+// 通用流水备注编辑弹窗引用。
+const remarkFormRef = ref()
+// 通用流水信息编辑弹窗引用。
+const infoFormRef = ref()
+
 // 提交表单数据
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {},
@@ -71,4 +86,19 @@ const openDialog = (id: string) => {
 defineExpose({
 	openDialog,
 })
-</script>
\ No newline at end of file
+</script>
+
+<style scoped lang="scss">
+/* 操作列按钮改为紧凑 flex 布局，避免按钮换行。 */
+.row-actions {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+	white-space: nowrap;
+
+	:deep(.el-button + .el-button) {
+		margin-left: 0;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/views/wallet/components/transaction-remark-form.vue b/src/views/wallet/components/transaction-remark-form.vue
new file mode 100644
index 0000000..6daf76b
--- /dev/null
+++ b/src/views/wallet/components/transaction-remark-form.vue
@@ -0,0 +1,93 @@
+<template>
+	<el-dialog
+		v-model="visible"
+		title="修改流水备注"
+		width="520px"
+		:close-on-click-modal="false"
+		:close-on-press-escape="!loading"
+		:show-close="!loading"
+		draggable
+	>
+		<el-form ref="dataFormRef" :model="form" :rules="dataRules" label-width="80px" v-loading="loading">
+			<el-form-item label="备注" prop="remark">
+				<el-input
+					v-model="form.remark"
+					type="textarea"
+					:rows="4"
+					:maxlength="WALLET_TRANSACTION_REMARK_MAX_LENGTH"
+					show-word-limit
+					placeholder="请输入流水备注"
+				/>
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<span class="dialog-footer">
+				<el-button :disabled="loading" @click="visible = false">取消</el-button>
+				<el-button type="primary" :loading="loading" @click="onSubmit">确认</el-button>
+			</span>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup lang="ts" name="WalletTransactionRemarkForm">
+import type { FormInstance, FormRules } from "element-plus"
+import { useMessage } from "/@/hooks/message"
+import { WALLET_TRANSACTION_REMARK_MAX_LENGTH, updateRemark, type WalletTransactionRemarkParams } from "/@/api/wallet/wallet-transaction"
+
+/** 列表行打开备注弹窗所需的最小数据，避免组件依赖各页面完整行结构。 */
+interface WalletTransactionRemarkRow {
+	/** 钱包流水编号。 */
+	id: string | number
+	/** 当前备注；历史数据未填写时允许为空。 */
+	remark?: string | null
+}
+
+/** 备注更新成功后通知所属列表刷新当前查询结果。 */
+const emit = defineEmits<{
+	(event: "refresh"): void
+}>()
+
+const dataFormRef = ref<FormInstance>()
+const visible = ref(false)
+const loading = ref(false)
+/** 当前正在编辑的流水编号和备注副本，取消时不会污染列表原数据。 */
+const form = reactive<WalletTransactionRemarkParams>({
+	id: "",
+	remark: "",
+})
+/** 备注长度校验作为输入框截断之外的表单级保护。 */
+const dataRules: FormRules<WalletTransactionRemarkParams> = {
+	remark: [
+		{
+			max: WALLET_TRANSACTION_REMARK_MAX_LENGTH,
+			message: `流水备注不能超过${WALLET_TRANSACTION_REMARK_MAX_LENGTH}个字符`,
+			trigger: "blur",
+		},
+	],
+}
+
+const openDialog = (row: WalletTransactionRemarkRow) => {
+	form.id = row.id
+	form.remark = row.remark ?? ""
+	visible.value = true
+	nextTick(() => dataFormRef.value?.clearValidate())
+}
+
+const onSubmit = async () => {
+	const valid = await dataFormRef.value?.validate().catch(() => false)
+	if (!valid) return
+	loading.value = true
+	try {
+		await updateRemark({ id: form.id, remark: form.remark?.trim() })
+		useMessage().success("流水备注修改成功")
+		visible.value = false
+		emit("refresh")
+	} catch (error: any) {
+		useMessage().error(error?.msg || "流水备注修改失败")
+	} finally {
+		loading.value = false
+	}
+}
+
+defineExpose({ openDialog })
+</script>
diff --git a/src/views/wallet/wallet-active/index.vue b/src/views/wallet/wallet-active/index.vue
index a4ffa7b..681a958 100644
--- a/src/views/wallet/wallet-active/index.vue
+++ b/src/views/wallet/wallet-active/index.vue
@@ -1,31 +1,32 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-				<el-row>
-					<el-form-item style="width: 250px" label="用户" prop="userIds">
-						<select-user v-model="state.queryForm.userIds" />
-					</el-form-item>
-					<el-form-item style="width: 250px" label="是否激活" prop="isActiveHardware">
-						<dict-select v-model="state.queryForm.isActiveHardware" dict-code="yes_no_type" placeholder="是否激活" />
-					</el-form-item>
-					<el-form-item style="width: 250px" label="卡号" prop="cardNumber">
-						<el-input v-model="state.queryForm.cardNumber" placeholder="饭卡卡号" clearable />
-					</el-form-item>
-					<el-form-item style="width: 250px" label="是否绑定用户" prop="isBindUser">
-						<dict-select v-model="state.queryForm.isBindUser" dict-code="yes_no_type" />
-					</el-form-item>
-					<el-form-item style="width: 250px" label="是否硬件激活" prop="isMchActive">
-						<dict-select v-model="state.queryForm.isMchActive" dict-code="yes_no_type" />
-					</el-form-item>
-					<el-form-item>
-						<el-button icon="Search" type="primary" @click="getDataList">
-							{{ $t("common.queryBtn") }}
-						</el-button>
-						<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
-					</el-form-item>
-				</el-row>
-			</el-form>
+			<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"
+				@reset="resetQuery"
+			>
+				<el-form-item style="width: 250px" label="用户" prop="userIds">
+					<select-user v-model="state.queryForm.userIds" />
+				</el-form-item>
+				<el-form-item style="width: 250px" label="是否激活" prop="isActiveHardware">
+					<dict-select v-model="state.queryForm.isActiveHardware" dict-code="yes_no_type" placeholder="是否激活" />
+				</el-form-item>
+				<el-form-item style="width: 250px" label="卡号" prop="cardNumber">
+					<el-input v-model="state.queryForm.cardNumber" placeholder="饭卡卡号" clearable />
+				</el-form-item>
+				<el-form-item style="width: 250px" label="是否绑定用户" prop="isBindUser">
+					<dict-select v-model="state.queryForm.isBindUser" dict-code="yes_no_type" />
+				</el-form-item>
+				<el-form-item style="width: 250px" label="是否硬件激活" prop="isMchActive">
+					<dict-select v-model="state.queryForm.isMchActive" dict-code="yes_no_type" />
+				</el-form-item>
+			</SearchPanel>
 
 			<el-row>
 				<div class="mb8" style="width: 100%">
diff --git a/src/views/wallet/wallet-cz-total/index.vue b/src/views/wallet/wallet-cz-total/index.vue
index aed0881..949f436 100644
--- a/src/views/wallet/wallet-cz-total/index.vue
+++ b/src/views/wallet/wallet-cz-total/index.vue
@@ -1,106 +1,137 @@
 <template>
-    <div class="layout-padding">
-        <div class="layout-padding-auto layout-padding-view">
-            <DraggableDepTree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
-                @getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含"
-                :defaultTreeWidth="20" :nodeClickable="false">
-                <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-                    <el-row>
-                        <el-form-item style="width: 300px" label="充值金额(元)" prop="priceList">
-                            <el-input v-if="false" v-model="state.queryForm.price" placeholder="请输入充值金额(元)" />
-                            <el-select v-model="state.queryForm.priceList" multiple filterable allow-create
-                                default-first-option :reserve-keyword="false" placeholder="请输入充值金额(元)"
-                                style="width: 240px">
-                                <el-option v-for="item in state.queryForm.priceList" :key="item" :label="item"
-                                    :value="item" />
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item style="width: 200px" label="充值方式" prop="bizType">
-                            <dict-select v-model="state.queryForm.bizType" dict-code="wallet_biz" />
-                        </el-form-item>
-                        <el-form-item v-if="false" style="width: 200px" label="充值类型" prop="type">
-                            <dict-select v-model="state.queryForm.type" dict-code="wallet_biz_recharge" />
-                        </el-form-item>
-                        <el-form-item style="width: 250px" label="钱包类型" prop="walletTypeIdList">
-                            <select-wallet-type multiple v-model="state.queryForm.walletTypeIdList" placeholder="饭卡类型"
-                                clearable />
-                        </el-form-item>
-                        <el-form-item style="width: 300px" label="充值时间" prop="createTimeList">
-                            <el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD"
-                                type="daterange" />
-                        </el-form-item>
-                        <el-form-item>
-                            <el-button icon="Search" type="primary" @click="getDataList">
-                                {{ $t("common.queryBtn") }}
-                            </el-button>
-                            <el-button icon="Refresh" @click="resetQuery">
-                                {{ $t("common.resetBtn") }}
-                            </el-button>
-                        </el-form-item>
-                    </el-row>
-                </el-form>
-                <el-row>
-                    <div class="mb8" style="width: 100%">
-                        <right-toolbar :search="false" v-model:showSearch="showSearch"
-                            :export="'wallet_walletTransaction_export'" @exportExcel="exportExcel" class="ml10 mr20"
-                            style="float: right" @queryTable="getDataList">
-                        </right-toolbar>
-                    </div>
-                </el-row>
-                <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-                    :header-cell-style="tableStyle.headerCellStyle" :summary-method="getSummaries" :show-summary="true"
-                    row-class-name="success-row" @selection-change="selectionChangHandle"
-                    @sort-change="sortChangeHandle" @expand-change="tableExpandChange">
-                    <el-table-column type="expand" width="60">
-                        <template #default="{ row }">
-                            <div class="ml-[60px] my-2">
-                                <el-table :data="getTableChildrenMap(row.mchId)" border
-                                    :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
-                                    row-class-name="warning-row">
-                                    <el-table-column type="index" label="#" width="60" />
-                                    <el-table-column label="部门" align="center" width="250" prop="deptName" />
-                                    <el-table-column label="充值金额" align="center" width="250" prop="price">
-                                        <template #default="{ row }">
-                                            <span>{{ displayPrice(row.price) }}</span>
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column label="充值人数" align="center" width="250" prop="personCount">
-                                        <template #default="{ row }">
-                                            <span class="color-primary">{{ row.personCount || 0 }}人</span>
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column label="充值次数" align="center" prop="timeCount">
-                                        <template #default="{ row }">
-                                            <span class="color-success">{{ row.timeCount || 0 }}次</span>
-                                        </template>
-                                    </el-table-column>
-                                </el-table>
-                            </div>
-                        </template>
-                    </el-table-column>
-                    <el-table-column type="index" label="#" width="60" />
-                    <el-table-column label="所属食堂" align="center" width="250" prop="mchName" />
-                    <el-table-column label="充值金额" align="center" width="250" prop="price">
-                        <template #default="{ row }">
-                            <span>{{ displayPrice(row.price) }}</span>
-                        </template>
-                    </el-table-column>
-                    <el-table-column label="充值人数" align="center" width="250" prop="personCount">
-                        <template #default="{ row }">
-                            <span class="color-primary">{{ row.personCount || 0 }}人</span>
-                        </template>
-                    </el-table-column>
-                    <el-table-column label="充值次数" align="center" prop="timeCount">
-                        <template #default="{ row }">
-                            <span class="color-success">{{ row.timeCount || 0 }}次</span>
-                        </template>
-                    </el-table-column>
-                </el-table>
-                <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
-                    v-bind="state.pagination" />
-            </DraggableDepTree>
-        </div>
-    </div>
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<DraggableDepTree
+				ref="draggableDepTreeRef"
+				placeholder="请输入部门名称"
+				:show-expand="true"
+				@getSelectNode="handleGetSelectNode"
+				switch-inactive-text="包含"
+				switch-active-text="不包含"
+				:defaultTreeWidth="20"
+				:nodeClickable="false"
+			>
+				<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"
+					@reset="resetQuery"
+				>
+					<el-form-item style="width: 300px" label="充值金额(元)" prop="priceList">
+						<el-input v-if="false" v-model="state.queryForm.price" placeholder="请输入充值金额(元)" />
+						<el-select
+							v-model="state.queryForm.priceList"
+							multiple
+							filterable
+							allow-create
+							default-first-option
+							:reserve-keyword="false"
+							placeholder="请输入充值金额(元)"
+							style="width: 240px"
+						>
+							<el-option v-for="item in state.queryForm.priceList" :key="item" :label="item" :value="item" />
+						</el-select>
+					</el-form-item>
+					<el-form-item style="width: 200px" label="充值方式" prop="bizType">
+						<dict-select v-model="state.queryForm.bizType" dict-code="wallet_biz" />
+					</el-form-item>
+					<el-form-item v-if="false" style="width: 200px" label="充值类型" prop="type">
+						<dict-select v-model="state.queryForm.type" dict-code="wallet_biz_recharge" />
+					</el-form-item>
+					<el-form-item style="width: 250px" label="钱包类型" prop="walletTypeIdList">
+						<select-wallet-type multiple v-model="state.queryForm.walletTypeIdList" placeholder="饭卡类型" clearable />
+					</el-form-item>
+					<el-form-item style="width: 300px" label="充值时间" prop="createTimeList">
+						<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD" type="daterange" />
+					</el-form-item>
+					<el-form-item style="width: 260px" label="操作标签" prop="tagList">
+						<dict-select v-model="state.queryForm.tagList" dict-code="wallet_transaction_tag" multiple />
+					</el-form-item>
+				</SearchPanel>
+				<el-row>
+					<div class="mb8" style="width: 100%">
+						<right-toolbar
+							:search="false"
+							v-model:showSearch="showSearch"
+							:export="'wallet_walletTransaction_export'"
+							@exportExcel="exportExcel"
+							class="ml10 mr20"
+							style="float: right"
+							@queryTable="getDataList"
+						>
+						</right-toolbar>
+					</div>
+				</el-row>
+				<el-table
+					:data="state.dataList"
+					v-loading="state.loading"
+					border
+					:cell-style="tableStyle.cellStyle"
+					:header-cell-style="tableStyle.headerCellStyle"
+					:summary-method="getSummaries"
+					:show-summary="true"
+					row-class-name="success-row"
+					@selection-change="selectionChangHandle"
+					@sort-change="sortChangeHandle"
+					@expand-change="tableExpandChange"
+				>
+					<el-table-column type="expand" width="60">
+						<template #default="{ row }">
+							<div class="ml-[60px] my-2">
+								<el-table
+									:data="getTableChildrenMap(row.mchId)"
+									border
+									:cell-style="tableStyle.cellStyle"
+									:header-cell-style="tableStyle.headerCellStyle"
+									row-class-name="warning-row"
+								>
+									<el-table-column type="index" label="#" width="60" />
+									<el-table-column label="部门" align="center" width="250" prop="deptName" />
+									<el-table-column label="充值金额" align="center" width="250" prop="price">
+										<template #default="{ row }">
+											<span>{{ displayPrice(row.price) }}</span>
+										</template>
+									</el-table-column>
+									<el-table-column label="充值人数" align="center" width="250" prop="personCount">
+										<template #default="{ row }">
+											<span class="color-primary">{{ row.personCount || 0 }}人</span>
+										</template>
+									</el-table-column>
+									<el-table-column label="充值次数" align="center" prop="timeCount">
+										<template #default="{ row }">
+											<span class="color-success">{{ row.timeCount || 0 }}次</span>
+										</template>
+									</el-table-column>
+								</el-table>
+							</div>
+						</template>
+					</el-table-column>
+					<el-table-column type="index" label="#" width="60" />
+					<el-table-column label="所属食堂" align="center" width="250" prop="mchName" />
+					<el-table-column label="充值金额" align="center" width="250" prop="price">
+						<template #default="{ row }">
+							<span>{{ displayPrice(row.price) }}</span>
+						</template>
+					</el-table-column>
+					<el-table-column label="充值人数" align="center" width="250" prop="personCount">
+						<template #default="{ row }">
+							<span class="color-primary">{{ row.personCount || 0 }}人</span>
+						</template>
+					</el-table-column>
+					<el-table-column label="充值次数" align="center" prop="timeCount">
+						<template #default="{ row }">
+							<span class="color-success">{{ row.timeCount || 0 }}次</span>
+						</template>
+					</el-table-column>
+				</el-table>
+				<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+			</DraggableDepTree>
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts" name="systemWalletRecharge">
@@ -111,15 +142,16 @@ import { useDict } from "/@/hooks/dict"
 import { displayPrice } from "/@/utils/formatMoney"
 
 const defaultCreateTimeList = [
-    dayjs().subtract(3, "month").startOf("day").format("YYYY-MM-DD"),
-    dayjs().hour(23).minute(23).second(23).format("YYYY-MM-DD"),
+	dayjs().subtract(3, "month").startOf("day").format("YYYY-MM-DD"),
+	dayjs().hour(23).minute(23).second(23).format("YYYY-MM-DD"),
 ]
 const state: BasicTableProps = reactive<BasicTableProps>({
-    isPage: false,
-    queryForm: {
-        createTimeList: defaultCreateTimeList
-    },
-    pageList: walletTransactionApi.pageCzTotal,
+	isPage: false,
+	queryForm: {
+		createTimeList: defaultCreateTimeList,
+		tagList: [],
+	},
+	pageList: walletTransactionApi.pageCzTotal,
 })
 
 // 搜索变量
@@ -137,84 +169,84 @@ const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, po
 
 // 清空搜索条件
 const resetQuery = () => {
-    queryRef.value?.resetFields()
-    // 清空多选
-    selectObjs.value = []
-    state.queryForm.deptId = ""
-    state.queryForm.deptIds = []
-    draggableDepTreeRef.value.resetData()
-    getDataList()
+	queryRef.value?.resetFields()
+	// 清空多选
+	selectObjs.value = []
+	state.queryForm.deptId = ""
+	state.queryForm.deptIds = []
+	draggableDepTreeRef.value.resetData()
+	getDataList()
 }
 
 // 点击table展开行
 const tableExpandChange = async (e: any) => {
-    try {
-        const { data } = await walletTransactionApi.listDeptCzTotal({
-            mchId: e.mchId,
-            ...state.queryForm
-        })
-        if (data && data.length) {
-            tableChildrenMap.value.set(e.mchId, data)
-        }
-    } catch (error: any) {
-        console.error(error);
-    }
+	try {
+		const { data } = await walletTransactionApi.listDeptCzTotal({
+			mchId: e.mchId,
+			...state.queryForm,
+		})
+		if (data && data.length) {
+			tableChildrenMap.value.set(e.mchId, data)
+		}
+	} catch (error: any) {
+		console.error(error)
+	}
 }
 
 const getTableChildrenMap = (key: string) => {
-    return tableChildrenMap.value.get(key)
+	return tableChildrenMap.value.get(key)
 }
 
 // 树节点选择时
 const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: any) => {
-    state.queryForm.deptId = curClickedNode.id
-    state.queryForm.deptIds = checkedTreeNodes.map((item: any) => item.id)
-    state.queryForm.isInclude = !isDeepTree
-    getDataList()
+	state.queryForm.deptId = curClickedNode.id
+	state.queryForm.deptIds = checkedTreeNodes.map((item: any) => item.id)
+	state.queryForm.isInclude = !isDeepTree
+	getDataList()
 }
 
 // 导出excel
 const exportExcel = () => {
-    postDownBlobFile(
-        "/wallet/wallet-transaction/export-cz-total-person",
-        Object.assign(state.queryForm, { current: state.pagination?.current, size: state.pagination?.size }),
-        "钱包充值统计.xlsx",
-    )
+	postDownBlobFile(
+		"/wallet/wallet-transaction/export-cz-total-person",
+		Object.assign(state.queryForm, { current: state.pagination?.current, size: state.pagination?.size }),
+		"钱包充值统计.xlsx",
+	)
 }
 
 // 多选事件
 const selectionChangHandle = (objs: { id: string }[]) => {
-    selectObjs.value = objs.map(({ id }) => id)
-    multiple.value = !objs.length
+	selectObjs.value = objs.map(({ id }) => id)
+	multiple.value = !objs.length
 }
 
 const getSummaries = (param: any) => {
-    const { columns, data } = param
-    const totalColumns = ["price", "personCount", "timeCount"]
-    const totalRow = Array.from({ length: columns.length })
-    columns.forEach((i: any, index: number) => {
-        if (totalColumns.includes(i.property)) {
-            const total = data
-                .filter((v: any) => v[i.property] != null)
-                .map((v: any) => v[i.property])
-                .reduce((pren: number, next: number) => Number(pren) + Number(next), 0)
-            if (i.property === "price") {
-                totalRow[index] = displayPrice(total)
-            } else {
-                totalRow[index] = total
-            }
-        }
-    })
-    return totalRow
+	const { columns, data } = param
+	const totalColumns = ["price", "personCount", "timeCount"]
+	const totalRow = Array.from({ length: columns.length })
+	columns.forEach((i: any, index: number) => {
+		if (totalColumns.includes(i.property)) {
+			const total = data
+				.filter((v: any) => v[i.property] != null)
+				.map((v: any) => v[i.property])
+				.reduce((pren: number, next: number) => Number(pren) + Number(next), 0)
+			if (i.property === "price") {
+				totalRow[index] = displayPrice(total)
+			} else {
+				totalRow[index] = total
+			}
+		}
+	})
+	return totalRow
 }
 </script>
 
 <style>
 .el-table .warning-row {
-    --el-table-tr-bg-color: var(--el-color-warning-light-9);
+	--el-table-tr-bg-color: var(--el-color-warning-light-9);
 }
 
 .el-table .success-row {
-    --el-table-tr-bg-color: var(--el-color-success-light-9);
+	--el-table-tr-bg-color: var(--el-color-success-light-9);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/wallet/wallet-cz/index.vue b/src/views/wallet/wallet-cz/index.vue
index 8d2bf44..ac6ccca 100644
--- a/src/views/wallet/wallet-cz/index.vue
+++ b/src/views/wallet/wallet-cz/index.vue
@@ -1,53 +1,74 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<DraggableDepTree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
-				@getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含"
-				:defaultTreeWidth="20" :nodeClickable="false">
+			<DraggableDepTree
+				ref="draggableDepTreeRef"
+				placeholder="请输入部门名称"
+				:show-expand="true"
+				@getSelectNode="handleGetSelectNode"
+				switch-inactive-text="包含"
+				switch-active-text="不包含"
+				:defaultTreeWidth="20"
+				:nodeClickable="false"
+			>
 				<template #default>
-					<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-						<el-row>
-							<el-form-item style="width: 300px" label="用户" prop="userId">
-								<select-user v-model="state.queryForm.userId" />
-							</el-form-item>
-							<el-form-item style="width: 200px" label="充值方式" prop="bizType">
-								<dict-select v-model="state.queryForm.bizType" dict-code="wallet_biz" />
-							</el-form-item>
-							<el-form-item v-if="false" style="width: 200px" label="充值类型" prop="type">
-								<dict-select v-model="state.queryForm.type" dict-code="wallet_biz_recharge" />
-							</el-form-item>
-							<el-form-item style="width: 250px" label="钱包类型" prop="walletTypeIdList">
-								<select-wallet-type multiple v-model="state.queryForm.walletTypeIdList"
-									placeholder="饭卡类型" clearable />
-							</el-form-item>
-							<el-form-item style="width: 300px" label="充值时间" prop="createTimeList">
-								<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD"
-									type="daterange" />
-							</el-form-item>
-							<el-form-item>
-								<el-button icon="Search" type="primary" @click="getDataList">
-									{{ $t("common.queryBtn") }}
-								</el-button>
-								<el-button icon="Refresh" @click="resetQuery">
-									{{ $t("common.resetBtn") }}
-								</el-button>
-							</el-form-item>
-						</el-row>
-					</el-form>
+					<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"
+						@reset="resetQuery"
+					>
+						<el-form-item style="width: 300px" label="用户" prop="userId">
+							<select-user v-model="state.queryForm.userId" />
+						</el-form-item>
+						<el-form-item style="width: 200px" label="充值方式" prop="bizType">
+							<dict-select v-model="state.queryForm.bizType" dict-code="wallet_biz" />
+						</el-form-item>
+						<el-form-item v-if="false" style="width: 200px" label="充值类型" prop="type">
+							<dict-select v-model="state.queryForm.type" dict-code="wallet_biz_recharge" />
+						</el-form-item>
+						<el-form-item style="width: 250px" label="钱包类型" prop="walletTypeIdList">
+							<select-wallet-type multiple v-model="state.queryForm.walletTypeIdList" placeholder="饭卡类型" clearable />
+						</el-form-item>
+						<el-form-item style="width: 300px" label="充值时间" prop="createTimeList">
+							<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD" type="daterange" />
+						</el-form-item>
+						<el-form-item style="width: 260px" label="操作标签" prop="tagList">
+							<dict-select v-model="state.queryForm.tagList" dict-code="wallet_transaction_tag" multiple />
+						</el-form-item>
+					</SearchPanel>
 					<el-row>
 						<div class="mb8" style="width: 100%">
-							<right-toolbar :search="false" v-model:showSearch="showSearch"
-								:export="'wallet_walletTransaction_export'" @exportExcel="exportExcel" class="ml10 mr20"
-								style="float: right" @queryTable="getDataList">
+							<right-toolbar
+								:search="false"
+								v-model:showSearch="showSearch"
+								:export="'wallet_walletTransaction_export'"
+								@exportExcel="exportExcel"
+								class="ml10 mr20"
+								style="float: right"
+								@queryTable="getDataList"
+							>
 								<el-tooltip class="item" effect="dark" content="统计" placement="top">
 									<el-button icon="DataLine" circle @click="viewBalanceStatistics" />
 								</el-tooltip>
 							</right-toolbar>
 						</div>
 					</el-row>
-					<el-table :data="state.dataList" v-loading="state.loading" border :summary-method="getSummaries"
-						show-summary :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
-						@selection-change="selectionChangHandle" @sort-change="sortChangeHandle">
+					<el-table
+						:data="state.dataList"
+						v-loading="state.loading"
+						border
+						:summary-method="getSummaries"
+						show-summary
+						:cell-style="tableStyle.cellStyle"
+						:header-cell-style="tableStyle.headerCellStyle"
+						@selection-change="selectionChangHandle"
+						@sort-change="sortChangeHandle"
+					>
 						<el-table-column type="index" label="#" width="60" />
 						<el-table-column width="120" prop="username" label="用户" />
 						<el-table-column prop="userAvatar" label="头像">
@@ -81,21 +102,50 @@
 								<div class="color-primary">{{ displayPrice(row.balance) }}</div>
 							</template>
 						</el-table-column>
+						<el-table-column prop="tags" width="200" align="center" label="操作标签">
+							<template #default="{ row }">
+								<dict-tag :options="wallet_transaction_tag" :value="row.tags?.split(',')" />
+							</template>
+						</el-table-column>
+						<el-table-column prop="remark" label="备注" min-width="180" show-overflow-tooltip />
 						<el-table-column prop="createTime" width="200" label="充值时间" />
-						<el-table-column v-if="false" label="操作" width="150">
-							<template #default="scope">
-								<el-button icon="delete" text type="primary" v-auth="'wallet_walletRecharge_del'"
-									@click="handleDelete([scope.row.id])">删除</el-button>
+						<el-table-column
+							label="操作"
+							width="175"
+							fixed="right"
+							class-name="wallet-tx-actions-col"
+							v-auths="['wallet_walletTransaction_edit', 'wallet_walletTransaction_update_info']"
+						>
+							<template #default="{ row }">
+								<div class="row-actions">
+									<el-button
+										icon="EditPen"
+										link
+										type="primary"
+										v-auth="'wallet_walletTransaction_edit'"
+										@click="remarkFormRef?.openDialog(row)"
+										>修改备注</el-button
+									>
+									<el-button
+										icon="Edit"
+										link
+										type="primary"
+										v-auth="'wallet_walletTransaction_update_info'"
+										@click="infoFormRef?.openDialog(row)"
+										>修改信息</el-button
+									>
+								</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" />
 				</template>
 			</DraggableDepTree>
 		</div>
 		<!-- 编辑、新增  -->
 		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+		<transaction-remark-form ref="remarkFormRef" @refresh="getDataList(false)" />
+		<transaction-info-form ref="infoFormRef" @refresh="getDataList(false)" />
 		<el-drawer v-model="showDrawer" @closed="drawerClose">
 			<el-table :data="[balanceStatistics]" style="width: 100%">
 				<el-table-column align="center" label="充值统计">
@@ -128,24 +178,30 @@
 <script setup lang="ts" name="systemWalletRecharge">
 import dayjs from "dayjs"
 import { BasicTableProps, useTable } from "/@/hooks/table"
-import { pageCz, czTotal, delObjs } from "/@/api/wallet/wallet-transaction"
-import { useMessage, useMessageBox } from "/@/hooks/message"
+import { pageCz, czTotal } from "/@/api/wallet/wallet-transaction"
+import { useMessage } from "/@/hooks/message"
 import { useDict } from "/@/hooks/dict"
 import { displayPrice } from "/@/utils/formatMoney"
 import { deptTree } from "/@/api/admin/dept"
 
 const showDrawer = ref(false)
 const balanceStatisticsLoading = ref(false)
-const balanceStatistics = reactive<any>({
-
-})
+const balanceStatistics = reactive<any>({})
 
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import("./form.vue"))
+// 所有钱包流水列表共用的备注编辑表单。
+const TransactionRemarkForm = defineAsyncComponent(() => import("../components/transaction-remark-form.vue"))
+// 所有钱包流水列表共用的流水信息编辑表单（部门、创建时间）。
+const TransactionInfoForm = defineAsyncComponent(() => import("../components/transaction-info-form.vue"))
 // 定义查询字典
-const { wallet_type, wallet_biz } = useDict("wallet_type", "wallet_biz")
+const { wallet_type, wallet_biz, wallet_transaction_tag } = useDict("wallet_type", "wallet_biz", "wallet_transaction_tag")
 // 定义变量内容
 const formDialogRef = ref()
+// 通用流水备注编辑弹窗引用。
+const remarkFormRef = ref()
+// 通用流水信息编辑弹窗引用。
+const infoFormRef = ref()
 // 搜索变量
 const queryRef = ref()
 const showSearch = ref(true)
@@ -160,7 +216,8 @@ const defaultCreateTimeList = [
 ]
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {
-		createTimeList: defaultCreateTimeList
+		createTimeList: defaultCreateTimeList,
+		tagList: [],
 	},
 	pageList: pageCz,
 })
@@ -236,23 +293,6 @@ const selectionChangHandle = (objs: { id: string }[]) => {
 	multiple.value = !objs.length
 }
 
-// 删除操作
-const handleDelete = async (ids: string[]) => {
-	try {
-		await useMessageBox().confirm("此操作将永久删除")
-	} catch {
-		return
-	}
-
-	try {
-		await delObjs(ids)
-		getDataList()
-		useMessage().success("删除成功")
-	} catch (err: any) {
-		useMessage().error(err.msg)
-	}
-}
-
 // 树节点选择时
 const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: any) => {
 	state.queryForm.deptId = curClickedNode.id
@@ -261,3 +301,22 @@ const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepT
 	getDataList()
 }
 </script>
+
+<style scoped lang="scss">
+/* 操作列按钮改为紧凑 flex 布局并收窄单元格内边距，避免按钮换行和两侧留白。 */
+.row-actions {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+	white-space: nowrap;
+
+	:deep(.el-button + .el-button) {
+		margin-left: 0;
+	}
+}
+
+:deep(.wallet-tx-actions-col .cell) {
+	padding: 0 6px;
+}
+</style>
diff --git a/src/views/wallet/wallet-foreign/index.vue b/src/views/wallet/wallet-foreign/index.vue
index 0bb46ec..0a390ab 100644
--- a/src/views/wallet/wallet-foreign/index.vue
+++ b/src/views/wallet/wallet-foreign/index.vue
@@ -1,17 +1,20 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-				<el-row>
-					<el-form-item style="width: 300px" label="用户" prop="userIds">
-						<select-user v-model="state.queryForm.userIds" />
-					</el-form-item>
-					<el-form-item>
-						<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
-						<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
-					</el-form-item>
-				</el-row>
-			</el-form>
+			<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"
+				@reset="resetQuery"
+			>
+				<el-form-item style="width: 300px" label="用户" prop="userIds">
+					<select-user v-model="state.queryForm.userIds" />
+				</el-form-item>
+			</SearchPanel>
 			<el-row>
 				<div class="mb8" style="width: 100%">
 					<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()" v-auth="'wallet_walletForeign_add'">
diff --git a/src/views/wallet/wallet-freeze/index.vue b/src/views/wallet/wallet-freeze/index.vue
index 49404f3..8e92cf9 100644
--- a/src/views/wallet/wallet-freeze/index.vue
+++ b/src/views/wallet/wallet-freeze/index.vue
@@ -1,20 +1,23 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-				<el-row>
-					<el-form-item style="width: 300px" label="申请人" prop="userIds">
-						<select-user v-model="state.queryForm.userIds" />
-					</el-form-item>
-					<el-form-item style="width: 300px" label="饭卡卡号" prop="cardNumber">
-						<el-input v-model="state.queryForm.cardNumber" placeholder="饭卡卡号" clearable />
-					</el-form-item>
-					<el-form-item>
-						<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
-						<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
-					</el-form-item>
-				</el-row>
-			</el-form>
+			<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"
+				@reset="resetQuery"
+			>
+				<el-form-item style="width: 300px" label="申请人" prop="userIds">
+					<select-user v-model="state.queryForm.userIds" />
+				</el-form-item>
+				<el-form-item style="width: 300px" label="饭卡卡号" prop="cardNumber">
+					<el-input v-model="state.queryForm.cardNumber" placeholder="饭卡卡号" clearable />
+				</el-form-item>
+			</SearchPanel>
 
 			<el-row>
 				<div class="mb8" style="width: 100%">
diff --git a/src/views/wallet/wallet-inactive/index.vue b/src/views/wallet/wallet-inactive/index.vue
index 654af84..08f5249 100644
--- a/src/views/wallet/wallet-inactive/index.vue
+++ b/src/views/wallet/wallet-inactive/index.vue
@@ -1,30 +1,44 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<DraggableDepTree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
-				@getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含"
-				:defaultTreeWidth="20" :nodeClickable="false">
+			<DraggableDepTree
+				ref="draggableDepTreeRef"
+				placeholder="请输入部门名称"
+				:show-expand="true"
+				@getSelectNode="handleGetSelectNode"
+				switch-inactive-text="包含"
+				switch-active-text="不包含"
+				:defaultTreeWidth="20"
+				:nodeClickable="false"
+			>
 				<template #default>
-					<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-						<el-row>
-							<el-form-item style="width: 300px" label="用户" prop="userId">
-								<select-user v-model="state.queryForm.userId" />
-							</el-form-item>
-							<el-form-item style="width: 300px" label="不活跃月数" prop="unactiveMonthsNumber">
-								<el-input v-model="state.queryForm.unactiveMonthsNumber" type="number"
-									placeholder="不活跃月数" />
-							</el-form-item>
-							<el-form-item>
-								<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn")
-								}}</el-button>
-								<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
-							</el-form-item>
-						</el-row>
-					</el-form>
+					<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"
+						@reset="resetQuery"
+					>
+						<el-form-item style="width: 300px" label="用户" prop="userId">
+							<select-user v-model="state.queryForm.userId" />
+						</el-form-item>
+						<el-form-item style="width: 300px" label="不活跃月数" prop="unactiveMonthsNumber">
+							<el-input v-model="state.queryForm.unactiveMonthsNumber" type="number" placeholder="不活跃月数" />
+						</el-form-item>
+					</SearchPanel>
 					<el-row>
 						<div class="mb8" style="width: 100%">
-							<el-button plain :disabled="multiple" icon="Delete" type="primary"
-								v-auth="'wallet_walletManage_del'" @click="handleDelete(selectObjs)">
+							<el-button
+								plain
+								:disabled="multiple"
+								icon="Delete"
+								type="primary"
+								v-auth="'wallet_walletManage_del'"
+								@click="handleDelete(selectObjs)"
+							>
 								删除
 							</el-button>
 							<!-- <right-toolbar
@@ -37,11 +51,22 @@
 							></right-toolbar> -->
 						</div>
 					</el-row>
-					<el-table :data="tableList" v-loading="state.loading" :row-key="(row: any) => row.id" lazy
-						:load="load" :indent="30" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-						:summary-method="getSummaries" show-summary :header-cell-style="tableStyle.headerCellStyle"
-						:cell-style="tableStyle.cellStyle" @selection-change="selectionChangHandle"
-						@sort-change="sortChangeHandle" :row-class-name="tableRowClassName">
+					<el-table
+						:data="tableList"
+						v-loading="state.loading"
+						:row-key="(row: any) => row.id"
+						lazy
+						:load="load"
+						:indent="30"
+						:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+						:summary-method="getSummaries"
+						show-summary
+						:header-cell-style="tableStyle.headerCellStyle"
+						:cell-style="tableStyle.cellStyle"
+						@selection-change="selectionChangHandle"
+						@sort-change="sortChangeHandle"
+						:row-class-name="tableRowClassName"
+					>
 						<el-table-column type="index" label="#" width="60" />
 						<el-table-column prop="username" label="用户" />
 						<el-table-column prop="userAvatar" label="头像">
@@ -57,8 +82,7 @@
 						</el-table-column>
 						<el-table-column prop="updateTime" label="最后充值时间" />
 					</el-table>
-					<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
-						v-bind="state.pagination" />
+					<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
 				</template>
 			</DraggableDepTree>
 		</div>
diff --git a/src/views/wallet/wallet-jz/index.vue b/src/views/wallet/wallet-jz/index.vue
index 549ec1a..5fa5650 100644
--- a/src/views/wallet/wallet-jz/index.vue
+++ b/src/views/wallet/wallet-jz/index.vue
@@ -1,48 +1,66 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<DraggableDepTree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
-				@getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含"
-				:defaultTreeWidth="20" :nodeClickable="false">
+			<DraggableDepTree
+				ref="draggableDepTreeRef"
+				placeholder="请输入部门名称"
+				:show-expand="true"
+				@getSelectNode="handleGetSelectNode"
+				switch-inactive-text="包含"
+				switch-active-text="不包含"
+				:defaultTreeWidth="20"
+				:nodeClickable="false"
+			>
 				<template #default>
-					<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-						<el-row>
-							<el-form-item style="width: 300px" label="用户" prop="userId">
-								<select-user v-model="state.queryForm.userId" />
-							</el-form-item>
-							<el-form-item style="width: 200px" label="充值方式" prop="bizType">
-								<dict-select v-model="state.queryForm.bizType" dict-code="wallet_biz" />
-							</el-form-item>
-							<el-form-item style="width: 250px" label="钱包类型" prop="walletTypeIdList">
-								<select-wallet-type multiple v-model="state.queryForm.walletTypeIdList"
-									placeholder="饭卡类型" clearable />
-							</el-form-item>
-							<el-form-item style="width: 300px" label="消费时间" prop="createTimeList">
-								<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD"
-									type="daterange" />
-							</el-form-item>
-							<el-form-item>
-								<el-button icon="Search" type="primary" @click="getDataList">
-									{{ $t("common.queryBtn") }}
-								</el-button>
-								<el-button icon="Refresh" @click="resetQuery">
-									{{ $t("common.resetBtn") }}
-								</el-button>
-							</el-form-item>
-						</el-row>
-					</el-form>
+					<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"
+						@reset="resetQuery"
+					>
+						<el-form-item style="width: 300px" label="用户" prop="userId">
+							<select-user v-model="state.queryForm.userId" />
+						</el-form-item>
+						<el-form-item style="width: 200px" label="充值方式" prop="bizType">
+							<dict-select v-model="state.queryForm.bizType" dict-code="wallet_biz" />
+						</el-form-item>
+						<el-form-item style="width: 250px" label="钱包类型" prop="walletTypeIdList">
+							<select-wallet-type multiple v-model="state.queryForm.walletTypeIdList" placeholder="饭卡类型" clearable />
+						</el-form-item>
+						<el-form-item style="width: 300px" label="消费时间" prop="createTimeList">
+							<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD" type="daterange" />
+						</el-form-item>
+					</SearchPanel>
 					<el-row>
 						<div class="mb8" style="width: 100%">
-							<right-toolbar :search="false" v-model:showSearch="showSearch"
-								:export="'wallet_walletTransaction_export'" @exportExcel="exportExcel" class="ml10 mr20"
-								style="float: right" @queryTable="getDataList">
+							<right-toolbar
+								:search="false"
+								v-model:showSearch="showSearch"
+								:export="'wallet_walletTransaction_export'"
+								@exportExcel="exportExcel"
+								class="ml10 mr20"
+								style="float: right"
+								@queryTable="getDataList"
+							>
 								<el-button icon="DataLine" circle @click="viewBalanceStatistics" />
 							</right-toolbar>
 						</div>
 					</el-row>
-					<el-table :data="state.dataList" v-loading="state.loading" border :summary-method="getSummaries"
-						show-summary :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
-						@selection-change="selectionChangHandle" @sort-change="sortChangeHandle">
+					<el-table
+						:data="state.dataList"
+						v-loading="state.loading"
+						border
+						:summary-method="getSummaries"
+						show-summary
+						:cell-style="tableStyle.cellStyle"
+						:header-cell-style="tableStyle.headerCellStyle"
+						@selection-change="selectionChangHandle"
+						@sort-change="sortChangeHandle"
+					>
 						<el-table-column type="index" label="#" width="40" />
 						<el-table-column width="120" prop="username" label="用户" show-overflow-tooltip />
 						<el-table-column prop="userAvatar" label="头像" show-overflow-tooltip>
@@ -71,10 +89,38 @@
 								<div class="color-danger">{{ displayPrice(row.price) }}</div>
 							</template>
 						</el-table-column>
+						<el-table-column prop="remark" label="备注" min-width="180" show-overflow-tooltip />
 						<el-table-column prop="createTime" width="200" label="记账扣款时间" />
+						<el-table-column
+							label="操作"
+							width="175"
+							fixed="right"
+							class-name="wallet-tx-actions-col"
+							v-auths="['wallet_walletTransaction_edit', 'wallet_walletTransaction_update_info']"
+						>
+							<template #default="{ row }">
+								<div class="row-actions">
+									<el-button
+										icon="EditPen"
+										link
+										type="primary"
+										v-auth="'wallet_walletTransaction_edit'"
+										@click="remarkFormRef?.openDialog(row)"
+										>修改备注</el-button
+									>
+									<el-button
+										icon="Edit"
+										link
+										type="primary"
+										v-auth="'wallet_walletTransaction_update_info'"
+										@click="infoFormRef?.openDialog(row)"
+										>修改信息</el-button
+									>
+								</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" />
 				</template>
 			</DraggableDepTree>
 		</div>
@@ -105,6 +151,8 @@
 				</el-table-column>
 			</el-table>
 		</el-drawer>
+		<transaction-remark-form ref="remarkFormRef" @refresh="getDataList(false)" />
+		<transaction-info-form ref="infoFormRef" @refresh="getDataList(false)" />
 	</div>
 </template>
 
@@ -120,12 +168,18 @@ const { push } = useRouter()
 
 const showDrawer = ref(false)
 const balanceStatisticsLoading = ref(false)
-const balanceStatistics = reactive<any>({
-
-})
+const balanceStatistics = reactive<any>({})
 
+// 所有钱包流水列表共用的备注编辑表单。
+const TransactionRemarkForm = defineAsyncComponent(() => import("../components/transaction-remark-form.vue"))
+// 所有钱包流水列表共用的流水信息编辑表单（部门、创建时间）。
+const TransactionInfoForm = defineAsyncComponent(() => import("../components/transaction-info-form.vue"))
 // 定义查询字典
 const { wallet_type, wallet_biz } = useDict("wallet_type", "wallet_biz")
+// 通用流水备注编辑弹窗引用。
+const remarkFormRef = ref()
+// 通用流水信息编辑弹窗引用。
+const infoFormRef = ref()
 // 搜索变量
 const queryRef = ref()
 const showSearch = ref(true)
@@ -139,7 +193,7 @@ const defaultCreateTimeList = [
 ]
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {
-		createTimeList: defaultCreateTimeList
+		createTimeList: defaultCreateTimeList,
 	},
 	pageList: pageJz,
 })
@@ -184,7 +238,6 @@ const viewBalanceStatistics = async () => {
 	}
 }
 
-
 // 导出excel
 const exportExcel = () => {
 	postDownBlobFile(
@@ -224,3 +277,22 @@ const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepT
 	getDataList()
 }
 </script>
+
+<style scoped lang="scss">
+/* 操作列按钮改为紧凑 flex 布局并收窄单元格内边距，避免按钮换行和两侧留白。 */
+.row-actions {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+	white-space: nowrap;
+
+	:deep(.el-button + .el-button) {
+		margin-left: 0;
+	}
+}
+
+:deep(.wallet-tx-actions-col .cell) {
+	padding: 0 6px;
+}
+</style>
diff --git a/src/views/wallet/wallet-manage/change-balance.vue b/src/views/wallet/wallet-manage/change-balance.vue
index 6b3d1f0..992eb5f 100644
--- a/src/views/wallet/wallet-manage/change-balance.vue
+++ b/src/views/wallet/wallet-manage/change-balance.vue
@@ -37,6 +37,18 @@
 						<el-input v-model="balanceResult" placeholder="" disabled />
 					</el-form-item>
 				</el-col>
+				<el-col :span="24" class="mb20">
+					<el-form-item label="操作标签" prop="tagList">
+						<dict-select v-model="form.tagList" dict-code="wallet_transaction_tag" multiple />
+					</el-form-item>
+				</el-col>
+				<el-col :span="24" class="mb20">
+					<el-form-item label="备注" prop="remark">
+						<el-input v-model="form.remark" type="textarea" :rows="3"
+							:maxlength="walletTransactionApi.WALLET_TRANSACTION_REMARK_MAX_LENGTH" show-word-limit
+							placeholder="请输入本次余额变动备注" />
+					</el-form-item>
+				</el-col>
 			</el-row>
 		</el-form>
 		<template #footer>
@@ -73,6 +85,10 @@ const form = reactive<any>({
 	balance: "0",
 	changeBalance: 0,
 	changeType: 1,
+	// 页面使用数组承载多选值，提交时再转换为后端约定的英文逗号分隔格式。
+	tagList: [],
+	// 备注会写入本次余额变动生成的 wallet_transaction 流水，取消弹窗不会影响历史数据。
+	remark: "",
 })
 
 /** 变动后的余额 */
@@ -81,6 +97,13 @@ const balanceResult = computed(() => displayPrice(convertToInteger(form.balance)
 // 定义校验规则
 const dataRules = ref({
 	changeBalance: [{ required: true, message: "变动余额不能为空", trigger: "blur" }],
+	remark: [
+		{
+			max: walletTransactionApi.WALLET_TRANSACTION_REMARK_MAX_LENGTH,
+			message: `备注不能超过${walletTransactionApi.WALLET_TRANSACTION_REMARK_MAX_LENGTH}个字符`,
+			trigger: "blur",
+		},
+	],
 })
 
 // 打开弹窗
@@ -117,6 +140,8 @@ const onSubmit = async () => {
 			userId: form.id,
 			walletId: form.walletId,
 			balance: form.changeBalance * 100,
+			tags: form.tagList?.join(",") || undefined,
+			remark: form.remark?.trim() || undefined,
 		}
 		if (pa.changeType == -1) {
 			pa.balance = -1 * pa.balance
@@ -145,6 +170,8 @@ const getwalletManageData = async (userId: string, id: string) => {
 		form.balance = displayPrice(wallet.balance, "")
 		form.changeType = 1
 		form.changeBalance = 0
+		form.tagList = []
+		form.remark = ""
 	} finally {
 		loading.value = false
 	}
diff --git a/src/views/wallet/wallet-manage/index.vue b/src/views/wallet/wallet-manage/index.vue
index 033c99a..54867db 100644
--- a/src/views/wallet/wallet-manage/index.vue
+++ b/src/views/wallet/wallet-manage/index.vue
@@ -1,11 +1,27 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<DraggableDepTree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
-				@getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含"
-				:defaultTreeWidth="20" :nodeClickable="false">
+			<DraggableDepTree
+				ref="draggableDepTreeRef"
+				placeholder="请输入部门名称"
+				:show-expand="true"
+				@getSelectNode="handleGetSelectNode"
+				switch-inactive-text="包含"
+				switch-active-text="不包含"
+				:defaultTreeWidth="20"
+				:nodeClickable="false"
+			>
 				<template #default>
-					<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
+					<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"
+						@reset="resetQuery"
+					>
 						<el-form-item style="width: 300px" label="用户" prop="userId">
 							<select-user v-model="state.queryForm.userId" />
 						</el-form-item>
@@ -20,29 +36,40 @@
 								<template #append>元</template>
 							</el-input>
 						</el-form-item>
-						<el-form-item>
-							<el-button icon="Search" type="primary" @click="getDataList">
-								{{ $t("common.queryBtn") }}
-							</el-button>
-							<el-button icon="Refresh" @click="resetQuery">
-								{{ $t("common.resetBtn") }}
-							</el-button>
-						</el-form-item>
-					</el-form>
+					</SearchPanel>
 					<el-row>
 						<div class="mb8" style="width: 100%">
-							<el-button plain :disabled="multiple" icon="Delete" type="primary"
-								v-auth="'wallet_walletManage_del'" @click="handleDelete(selectObjs)">
+							<el-button
+								plain
+								:disabled="multiple"
+								icon="Delete"
+								type="primary"
+								v-auth="'wallet_walletManage_del'"
+								@click="handleDelete(selectObjs)"
+							>
 								删除
 							</el-button>
-							<right-toolbar v-model:showSearch="showSearch" :export="'wallet_walletManage_export'"
-								@exportExcel="exportExcel" class="ml10 mr20" style="float: right"
-								@queryTable="getDataList"></right-toolbar>
+							<right-toolbar
+								v-model:showSearch="showSearch"
+								:export="'wallet_walletManage_export'"
+								@exportExcel="exportExcel"
+								class="ml10 mr20"
+								style="float: right"
+								@queryTable="getDataList"
+							></right-toolbar>
 						</div>
 					</el-row>
-					<el-table :data="state.dataList" v-loading="state.loading" border :summary-method="getSummaries"
-						show-summary :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
-						@selection-change="selectionChangHandle" @sort-change="sortChangeHandle">
+					<el-table
+						:data="state.dataList"
+						v-loading="state.loading"
+						border
+						:summary-method="getSummaries"
+						show-summary
+						:cell-style="tableStyle.cellStyle"
+						:header-cell-style="tableStyle.headerCellStyle"
+						@selection-change="selectionChangHandle"
+						@sort-change="sortChangeHandle"
+					>
 						<el-table-column type="index" label="#" width="60" />
 						<el-table-column prop="username" width="100" label="用户" />
 						<el-table-column prop="userAvatar" width="80" label="头像">
@@ -85,33 +112,51 @@
 						</el-table-column>
 						<el-table-column v-if="false" prop="activeBindStatus" width="120" label="饭卡绑定状态" />
 						<el-table-column prop="createTime" width="200" label="创建时间" />
-						<el-table-column label="操作" fixed="right" width="250" v-auths="[
-							'wallet_walletManage_edit',
-							'wallet_walletTransaction_update_balance',
-							'wallet_walletRuleTransaction_transfer_accounts',
-						]">
+						<el-table-column
+							label="操作"
+							fixed="right"
+							width="250"
+							v-auths="[
+								'wallet_walletManage_edit',
+								'wallet_walletTransaction_update_balance',
+								'wallet_walletRuleTransaction_transfer_accounts',
+							]"
+						>
 							<template #default="{ row }">
 								<div class="flex items-start">
-									<el-button icon="InfoFilled" text type="primary" v-auth="'wallet_walletManage_edit'"
-										@click="formDialogRef.openDialog(row.id)">
+									<el-button
+										icon="InfoFilled"
+										text
+										type="primary"
+										v-auth="'wallet_walletManage_edit'"
+										@click="formDialogRef.openDialog(row.id)"
+									>
 										详情
 									</el-button>
-									<el-button icon="Money" text type="primary"
+									<el-button
+										icon="Money"
+										text
+										type="primary"
 										v-auth="'wallet_walletTransaction_update_balance'"
-										@click="changeBalanceRef.openDialog(row.userId, row.id)">
+										@click="changeBalanceRef.openDialog(row.userId, row.id)"
+									>
 										充值/扣款
 									</el-button>
-									<el-button v-if="row.isRule == 1" icon="SwitchFilled" text type="primary"
+									<el-button
+										v-if="row.isRule == 1"
+										icon="SwitchFilled"
+										text
+										type="primary"
 										v-auth="'wallet_walletRuleTransaction_transfer'"
-										@click="doTransferAccounts(row)">
+										@click="doTransferAccounts(row)"
+									>
 										转账
 									</el-button>
 								</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" />
 				</template>
 			</DraggableDepTree>
 		</div>
diff --git a/src/views/wallet/wallet-qb/index.vue b/src/views/wallet/wallet-qb/index.vue
index ee6f79c..03f977c 100644
--- a/src/views/wallet/wallet-qb/index.vue
+++ b/src/views/wallet/wallet-qb/index.vue
@@ -1,40 +1,64 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<DraggableDepTree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
-				@getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含"
-				:defaultTreeWidth="20" :nodeClickable="false">
+			<DraggableDepTree
+				ref="draggableDepTreeRef"
+				placeholder="请输入部门名称"
+				:show-expand="true"
+				@getSelectNode="handleGetSelectNode"
+				switch-inactive-text="包含"
+				switch-active-text="不包含"
+				:defaultTreeWidth="20"
+				:nodeClickable="false"
+			>
 				<template #default>
-					<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-						<el-row>
-							<el-form-item style="width: 300px" label="用户" prop="userId">
-								<select-user v-model="state.queryForm.userId" />
-							</el-form-item>
-							<el-form-item style="width: 250px" label="钱包类型" prop="walletTypeIdList">
-								<select-wallet-type multiple v-model="state.queryForm.walletTypeIdList"
-									placeholder="饭卡类型" clearable />
-							</el-form-item>
-							<el-form-item style="width: 200px" label="月份" prop="walletRecordMonth">
-								<el-date-picker v-model="state.queryForm.walletRecordMonth" value-format="YYYY-MM"
-									type="month" :clearable="false" placeholder="选择月份" />
-							</el-form-item>
-							<el-form-item>
-								<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn")
-								}}</el-button>
-								<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
-							</el-form-item>
-						</el-row>
-					</el-form>
+					<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"
+						@reset="resetQuery"
+					>
+						<el-form-item style="width: 300px" label="用户" prop="userId">
+							<select-user v-model="state.queryForm.userId" />
+						</el-form-item>
+						<el-form-item style="width: 250px" label="钱包类型" prop="walletTypeIdList">
+							<select-wallet-type multiple v-model="state.queryForm.walletTypeIdList" placeholder="饭卡类型" clearable />
+						</el-form-item>
+						<el-form-item style="width: 200px" label="月份" prop="walletRecordMonth">
+							<el-date-picker
+								v-model="state.queryForm.walletRecordMonth"
+								value-format="YYYY-MM"
+								type="month"
+								:clearable="false"
+								placeholder="选择月份"
+							/>
+						</el-form-item>
+					</SearchPanel>
 					<el-row>
 						<div class="mb8 flex justify-between" style="width: 100%">
-							<el-button plain :disabled="multiple" icon="Delete" type="primary"
-								v-auth="'wallet_walletManage_del'" @click="handleDelete(selectObjs)">
+							<el-button
+								plain
+								:disabled="multiple"
+								icon="Delete"
+								type="primary"
+								v-auth="'wallet_walletManage_del'"
+								@click="handleDelete(selectObjs)"
+							>
 								删除
 							</el-button>
 							<div class="flex gap-5">
-								<right-toolbar v-model:showSearch="showSearch" :export="'wallet_walletRecord_export'"
-									@exportExcel="exportExcel" class="ml10 mr20" style="float: right"
-									@queryTable="getDataList">
+								<right-toolbar
+									v-model:showSearch="showSearch"
+									:export="'wallet_walletRecord_export'"
+									@exportExcel="exportExcel"
+									class="ml10 mr20"
+									style="float: right"
+									@queryTable="getDataList"
+								>
 									<el-tooltip class="item" effect="dark" content="统计" placement="top">
 										<el-button icon="DataLine" circle @click="viewBalanceStatistics" />
 									</el-tooltip>
@@ -42,9 +66,17 @@
 							</div>
 						</div>
 					</el-row>
-					<el-table :data="state.dataList" v-loading="state.loading" border :summary-method="getSummaries"
-						show-summary :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
-						@selection-change="selectionChangHandle" @sort-change="sortChangeHandle">
+					<el-table
+						:data="state.dataList"
+						v-loading="state.loading"
+						border
+						:summary-method="getSummaries"
+						show-summary
+						:cell-style="tableStyle.cellStyle"
+						:header-cell-style="tableStyle.headerCellStyle"
+						@selection-change="selectionChangHandle"
+						@sort-change="sortChangeHandle"
+					>
 						<el-table-column type="index" label="#" width="60" />
 						<el-table-column prop="username" width="120" label="用户" />
 						<el-table-column prop="userAvatar" width="80" label="头像">
@@ -83,8 +115,7 @@
 							</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" />
 				</template>
 			</DraggableDepTree>
 		</div>
@@ -137,9 +168,7 @@ const selectObjs = ref([]) as any
 const multiple = ref(true)
 const showDrawer = ref(false) // 余额统计抽屉开关
 const balanceStatisticsLoading = ref(false)
-const balanceStatistics = reactive<any>({
-
-})
+const balanceStatistics = reactive<any>({})
 
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {
diff --git a/src/views/wallet/wallet-recharge-apply/index.vue b/src/views/wallet/wallet-recharge-apply/index.vue
index dd174bd..e95bbc3 100644
--- a/src/views/wallet/wallet-recharge-apply/index.vue
+++ b/src/views/wallet/wallet-recharge-apply/index.vue
@@ -1,64 +1,84 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<el-form v-show="showSearch" ref="queryRef" :inline="true" :model="state.queryForm"
-				@keyup.enter="getDataList">
-				<el-row>
-					<el-form-item style="width: 300px" label="用户" prop="userIds">
-						<select-user v-model="state.queryForm.userIds" placeholder="用户" />
-					</el-form-item>
-					<el-form-item style="width: 200px" label="饭卡类型" prop="walletTypeId">
-						<select-wallet-type v-model="state.queryForm.walletTypeId" placeholder="饭卡类型" clearable />
-					</el-form-item>
-					<el-form-item style="width: 200px" label="充值类型" prop="bizType">
-						<dict-select v-model="state.queryForm.bizType" dict-code="wallet_biz_recharge"
-							placeholder="充值类型" />
-					</el-form-item>
-					<el-form-item style="width: 250px" label="发票号" prop="invoiceCode">
-						<el-input v-model="state.queryForm.invoiceCode" placeholder="发票号" />
-					</el-form-item>
-					<el-form-item style="width: 450px" label="创建时间" prop="createTimeList">
-						<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD HH:mm:ss"
-							type="datetimerange" />
-					</el-form-item>
-					<el-form-item style="width: 450px" label="审核时间" prop="processTimeList">
-						<el-date-picker v-model="state.queryForm.processTimeList" value-format="YYYY-MM-DD HH:mm:ss"
-							type="datetimerange" />
-					</el-form-item>
-					<el-form-item>
-						<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn")
-						}}</el-button>
-						<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
-					</el-form-item>
-				</el-row>
-			</el-form>
+			<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"
+				@reset="resetQuery"
+			>
+				<el-form-item style="width: 300px" label="用户" prop="userIds">
+					<select-user v-model="state.queryForm.userIds" placeholder="用户" />
+				</el-form-item>
+				<el-form-item style="width: 200px" label="饭卡类型" prop="walletTypeId">
+					<select-wallet-type v-model="state.queryForm.walletTypeId" placeholder="饭卡类型" clearable />
+				</el-form-item>
+				<el-form-item style="width: 200px" label="充值类型" prop="bizType">
+					<dict-select v-model="state.queryForm.bizType" dict-code="wallet_biz_recharge" placeholder="充值类型" />
+				</el-form-item>
+				<el-form-item style="width: 250px" label="发票号" prop="invoiceCode">
+					<el-input v-model="state.queryForm.invoiceCode" placeholder="发票号" />
+				</el-form-item>
+				<el-form-item style="width: 450px" label="创建时间" prop="createTimeList">
+					<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
+				</el-form-item>
+				<el-form-item style="width: 450px" label="审核时间" prop="processTimeList">
+					<el-date-picker v-model="state.queryForm.processTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
+				</el-form-item>
+			</SearchPanel>
 			<el-row>
 				<div class="mb8" style="width: 100%">
-					<el-button icon="folder-add" type="primary" class="ml10" @click="uploadExcelRef.show()"
-						v-auth="'wallet_walletRechargeApply_add'">
+					<el-button icon="folder-add" type="primary" class="ml10" @click="uploadExcelRef.show()" v-auth="'wallet_walletRechargeApply_add'">
 						导 入
 					</el-button>
-					<el-button icon="folder-add" type="primary" class="ml10" @click="uploadExcelUnbindRef.show()"
-						v-auth="'wallet_walletRechargeApply_unbind'">
+					<el-button
+						icon="folder-add"
+						type="primary"
+						class="ml10"
+						@click="uploadExcelUnbindRef.show()"
+						v-auth="'wallet_walletRechargeApply_unbind'"
+					>
 						导 入（不绑定发票）
 					</el-button>
-					<el-button v-if="false" plain :disabled="multiple" icon="Delete" type="primary"
-						v-auth="'wallet_walletRechargeApply_del'" @click="handleDelete(selectObjs)">
+					<el-button
+						v-if="false"
+						plain
+						:disabled="multiple"
+						icon="Delete"
+						type="primary"
+						v-auth="'wallet_walletRechargeApply_del'"
+						@click="handleDelete(selectObjs)"
+					>
 						删除
 					</el-button>
 					<div class="flex justify-between items-center">
 						<el-tabs class="flex-1" v-model="activeName" @tab-click="handleClickTabItem">
 							<el-tab-pane v-for="v in tabItems" :key="v.id" :label="v.label" :name="v.value" />
 						</el-tabs>
-						<right-toolbar v-model:showSearch="showSearch" :export="'wallet_walletRechargeApply_export'"
-							@exportExcel="exportExcel" class="ml10 mr20" style="float: right"
-							@queryTable="getDataList" />
+						<right-toolbar
+							v-model:showSearch="showSearch"
+							:export="'wallet_walletRechargeApply_export'"
+							@exportExcel="exportExcel"
+							class="ml10 mr20"
+							style="float: right"
+							@queryTable="getDataList"
+						/>
 					</div>
 				</div>
 			</el-row>
-			<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-				:header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
-				@sort-change="sortChangeHandle">
+			<el-table
+				:data="state.dataList"
+				v-loading="state.loading"
+				border
+				:cell-style="tableStyle.cellStyle"
+				:header-cell-style="tableStyle.headerCellStyle"
+				@selection-change="selectionChangHandle"
+				@sort-change="sortChangeHandle"
+			>
 				<el-table-column type="selection" width="40" align="center" />
 				<el-table-column type="index" label="#" width="80" />
 				<el-table-column prop="username" label="申请人" />
@@ -116,59 +136,111 @@
 						</div>
 					</template>
 				</el-table-column>
-				<el-table-column label="操作" v-auths="[
-					'wallet_walletRechargeApply_view',
-					'wallet_walletRechargeApply_apply',
-					'wallet_walletRechargeApply_edit',
-					'wallet_walletRechargeApply_del',
-					'wallet_walletRechargeApply_check',
-				]" width="300" fixed="right">
+				<el-table-column
+					label="操作"
+					v-auths="[
+						'wallet_walletRechargeApply_view',
+						'wallet_walletRechargeApply_apply',
+						'wallet_walletRechargeApply_edit',
+						'wallet_walletRechargeApply_del',
+						'wallet_walletRechargeApply_check',
+					]"
+					width="300"
+					fixed="right"
+				>
 					<template #default="{ row }">
-						<el-button v-if="row.importTime" icon="Document" text type="primary"
-							v-auth="'wallet_walletRechargeApply_view'" @click="doInfo(row)">
+						<el-button
+							v-if="row.importTime"
+							icon="Document"
+							text
+							type="primary"
+							v-auth="'wallet_walletRechargeApply_view'"
+							@click="doInfo(row)"
+						>
 							数据
 						</el-button>
-						<el-button v-if="row.importTime && !row.processId" icon="Connection" text type="primary"
-							v-auth="'wallet_walletRechargeApply_apply'" @click="doApply(row)">
+						<el-button
+							v-if="row.importTime && !row.processId"
+							icon="Connection"
+							text
+							type="primary"
+							v-auth="'wallet_walletRechargeApply_apply'"
+							@click="doApply(row)"
+						>
 							申请
 						</el-button>
-						<el-button v-if="!row.processId" icon="edit-pen" text type="primary"
-							v-auth="'wallet_walletRechargeApply_edit'" @click="formDialogRef.openDialog(row.id)">
+						<el-button
+							v-if="!row.processId"
+							icon="edit-pen"
+							text
+							type="primary"
+							v-auth="'wallet_walletRechargeApply_edit'"
+							@click="formDialogRef.openDialog(row.id)"
+						>
 							编辑
 						</el-button>
-						<el-button v-if="row.isCheckUser && row.processStatus == '1'" type="primary" size="small" link
-							icon="VideoPlay" @click="deal(row)" v-auth="'wallet_walletRechargeApply_check'">
+						<el-button
+							v-if="row.isCheckUser && row.processStatus == '1'"
+							type="primary"
+							size="small"
+							link
+							icon="VideoPlay"
+							@click="deal(row)"
+							v-auth="'wallet_walletRechargeApply_check'"
+						>
 							开始处理
 						</el-button>
 						<el-button
 							v-if="row.userId == userInfos?.user?.userId && [null, '1'].includes(row.processStatus)"
-							icon="delete" text type="primary" v-auth="'wallet_walletRechargeApply_del'"
-							@click="handleDelete([row.id])">
+							icon="delete"
+							text
+							type="primary"
+							v-auth="'wallet_walletRechargeApply_del'"
+							@click="handleDelete([row.id])"
+						>
 							删除
 						</el-button>
 					</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>
 
 		<!-- 编辑、新增  -->
 		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
 
-		<upload-excel ref="uploadExcelRef" title="充值导入" url="/wallet/wallet-recharge-apply/read-excel"
-			temp-url="/admin/sys-file/local/file/wallet_recharge.xlsx" @refreshDataList="getDataList(false)" />
-		<upload-excel-unbind ref="uploadExcelUnbindRef" title="充值导入" url="/wallet/wallet-recharge-apply/read-excel"
-			temp-url="/admin/sys-file/local/file/wallet_recharge.xlsx" @refreshDataList="getDataList(false)" />
+		<upload-excel
+			ref="uploadExcelRef"
+			title="充值导入"
+			url="/wallet/wallet-recharge-apply/read-excel"
+			temp-url="/admin/sys-file/local/file/wallet_recharge.xlsx"
+			@refreshDataList="getDataList(false)"
+		/>
+		<upload-excel-unbind
+			ref="uploadExcelUnbindRef"
+			title="充值导入"
+			url="/wallet/wallet-recharge-apply/read-excel"
+			temp-url="/admin/sys-file/local/file/wallet_recharge.xlsx"
+			@refreshDataList="getDataList(false)"
+		/>
 
 		<!-- 审批抽屉 -->
-		<process-drawer ref="processDrawerRef" :width="errorState.errorList?.length ? '55%' : '400px'"
-			:errorMessage="errorState.errorList?.length ? '当前还有错误信息，是否继续？' : ''" @task-submit-event="taskSubmitEvent">
+		<process-drawer
+			ref="processDrawerRef"
+			:width="errorState.errorList?.length ? '55%' : '400px'"
+			:errorMessage="errorState.errorList?.length ? '当前还有错误信息，是否继续？' : ''"
+			@task-submit-event="taskSubmitEvent"
+		>
 			<template #top>
 				<div v-if="errorState.errorList?.length" class="w-[100%]">
 					<div class="title">错误信息</div>
-					<el-table :data="errorState.errorList" v-loading="errorState.loading" border
-						:cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle">
+					<el-table
+						:data="errorState.errorList"
+						v-loading="errorState.loading"
+						border
+						:cell-style="tableStyle.cellStyle"
+						:header-cell-style="tableStyle.headerCellStyle"
+					>
 						<el-table-column prop="username" width="150" label="用户" align="center" />
 						<el-table-column prop="userMobile" width="120" label="手机号" align="center" />
 						<el-table-column prop="bizType" width="120" label="充值类型" align="center">
@@ -363,7 +435,7 @@ const deal = async (row: any) => {
 			errorState.errorList = []
 		}
 	} catch (error) {
-		console.log("查询是否有错误error:", error);
+		console.log("查询是否有错误error:", error)
 		errorState.errorList = []
 	} finally {
 		errorState.loading = false
diff --git a/src/views/wallet/wallet-recharge-invoice/index.vue b/src/views/wallet/wallet-recharge-invoice/index.vue
index 4775841..8790a5d 100644
--- a/src/views/wallet/wallet-recharge-invoice/index.vue
+++ b/src/views/wallet/wallet-recharge-invoice/index.vue
@@ -1,58 +1,67 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<el-form v-show="showSearch" ref="queryRef" :inline="true" :model="state.queryForm"
-				@keyup.enter="getDataList">
-				<el-row>
-					<el-form-item style="width: 350px" label="申请用户" prop="userIds">
-						<select-user v-model="state.queryForm.userIds" placeholder="申请用户" />
-					</el-form-item>
-					<el-form-item style="width: 350px" label="交款单位或个人" prop="deptOrUser">
-						<el-input v-model="state.queryForm.deptOrUser" clearable placeholder="交款单位或个人" />
-					</el-form-item>
-					<el-form-item style="width: 350px" label="发票状态" prop="userIds">
-						<dict-select v-model="state.queryForm.status" dict-code="recharge_invoice_status" />
-					</el-form-item>
-					<el-form-item style="width: 350px" label="发票号" prop="code">
-						<el-input v-model="state.queryForm.code" />
-					</el-form-item>
-					<el-form-item style="width: 350px" label="备注" prop="remark">
-						<el-input v-model="state.queryForm.remark" />
-					</el-form-item>
-					<el-form-item style="width: 450px" label="创建时间" prop="createTimeList">
-						<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD HH:mm:ss"
-							type="datetimerange" />
-					</el-form-item>
-					<el-form-item style="width: 450px" label="审核时间" prop="processTimeList">
-						<el-date-picker v-model="state.queryForm.processTimeList" value-format="YYYY-MM-DD HH:mm:ss"
-							type="datetimerange" />
-					</el-form-item>
-					<el-form-item>
-						<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn")
-						}}</el-button>
-						<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
-					</el-form-item>
-				</el-row>
-			</el-form>
+			<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"
+				@reset="resetQuery"
+			>
+				<el-form-item style="width: 350px" label="申请用户" prop="userIds">
+					<select-user v-model="state.queryForm.userIds" placeholder="申请用户" />
+				</el-form-item>
+				<el-form-item style="width: 350px" label="交款单位或个人" prop="deptOrUser">
+					<el-input v-model="state.queryForm.deptOrUser" clearable placeholder="交款单位或个人" />
+				</el-form-item>
+				<el-form-item style="width: 350px" label="发票状态" prop="userIds">
+					<dict-select v-model="state.queryForm.status" dict-code="recharge_invoice_status" />
+				</el-form-item>
+				<el-form-item style="width: 350px" label="发票号" prop="code">
+					<el-input v-model="state.queryForm.code" />
+				</el-form-item>
+				<el-form-item style="width: 350px" label="备注" prop="remark">
+					<el-input v-model="state.queryForm.remark" />
+				</el-form-item>
+				<el-form-item style="width: 450px" label="创建时间" prop="createTimeList">
+					<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
+				</el-form-item>
+				<el-form-item style="width: 450px" label="审核时间" prop="processTimeList">
+					<el-date-picker v-model="state.queryForm.processTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
+				</el-form-item>
+			</SearchPanel>
 			<el-row>
 				<div class="mb8" style="width: 100%">
-					<el-button icon="folder-add" type="primary" class="ml10" @click="uploadExcelRef.show()"
-						v-auth="'wallet_walletRechargeApply_add'">
+					<el-button icon="folder-add" type="primary" class="ml10" @click="uploadExcelRef.show()" v-auth="'wallet_walletRechargeApply_add'">
 						导 入
 					</el-button>
 					<div class="flex justify-between items-center">
 						<el-tabs class="flex-1" v-model="activeName" @tab-click="handleClickTabItem">
 							<el-tab-pane v-for="v in tabItems" :key="v.id" :label="v.label" :name="v.value" />
 						</el-tabs>
-						<right-toolbar v-model:showSearch="showSearch" :export="'wallet_walletRechargeInvoice_export'"
-							@exportExcel="exportExcel" class="ml10 mr20" style="float: right"
-							@queryTable="getDataList" />
+						<right-toolbar
+							v-model:showSearch="showSearch"
+							:export="'wallet_walletRechargeInvoice_export'"
+							@exportExcel="exportExcel"
+							class="ml10 mr20"
+							style="float: right"
+							@queryTable="getDataList"
+						/>
 					</div>
 				</div>
 			</el-row>
-			<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-				:header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
-				@sort-change="sortChangeHandle">
+			<el-table
+				:data="state.dataList"
+				v-loading="state.loading"
+				border
+				:cell-style="tableStyle.cellStyle"
+				:header-cell-style="tableStyle.headerCellStyle"
+				@selection-change="selectionChangHandle"
+				@sort-change="sortChangeHandle"
+			>
 				<el-table-column type="selection" width="40" align="center" />
 				<el-table-column type="index" label="#" width="50" />
 				<el-table-column prop="code" min-width="120" label="发票编号" sortable />
@@ -82,8 +91,11 @@
 				</el-table-column>
 				<el-table-column prop="stampPicUrl" min-width="120" label="发票图片">
 					<template #default="{ row }">
-						<preview-image :src="row.stampPicUrl" download
-							:downloadName="`${row.code}-${row.deptOrUser}-${row.payeeDept}-发票-${row.updateTime}`" />
+						<preview-image
+							:src="row.stampPicUrl"
+							download
+							:downloadName="`${row.code}-${row.deptOrUser}-${row.payeeDept}-发票-${row.updateTime}`"
+						/>
 					</template>
 				</el-table-column>
 				<el-table-column prop="remark" label="备注" show-overflow-tooltip />
@@ -106,32 +118,53 @@
 				<el-table-column label="操作" min-width="320" fixed="right">
 					<template #default="{ row }">
 						<div class="flex">
-							<el-button v-if="!['6'].includes(row.status)" icon="Document" text type="primary"
-								v-auth="'wallet_walletRechargeApply_view'" @click="doInfo(row)">
+							<el-button
+								v-if="!['6'].includes(row.status)"
+								icon="Document"
+								text
+								type="primary"
+								v-auth="'wallet_walletRechargeApply_view'"
+								@click="doInfo(row)"
+							>
 								数据
 							</el-button>
-							<el-button v-auth="'wallet_walletRechargeApply_print'" icon="printer" text type="primary"
-								:disabled="loading" @click="previewInvoice(row)">
+							<el-button
+								v-auth="'wallet_walletRechargeApply_print'"
+								icon="printer"
+								text
+								type="primary"
+								:disabled="loading"
+								@click="previewInvoice(row)"
+							>
 								查看发票
 							</el-button>
-							<el-button v-if="row.isCheckUser && row.processStatus == '1'" type="primary" link
-								icon="VideoPlay" :disabled="loading" @click="deal(row)">
+							<el-button
+								v-if="row.isCheckUser && row.processStatus == '1'"
+								type="primary"
+								link
+								icon="VideoPlay"
+								:disabled="loading"
+								@click="deal(row)"
+							>
 								开始处理
 							</el-button>
-							<el-button icon="delete" text type="primary" v-auth="'wallet_walletRechargeInvoice_del'"
-								@click="handleDelete([row.id])">
+							<el-button icon="delete" text type="primary" v-auth="'wallet_walletRechargeInvoice_del'" @click="handleDelete([row.id])">
 								删除
 							</el-button>
 						</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>
 
-		<upload-excel ref="uploadExcelRef" title="导入" url="/wallet/wallet-recharge-apply/read-topup-excel"
-			temp-url="/admin/sys-file/local/file/wallet_recharge.xlsx" @refreshDataList="getDataList(false)" />
+		<upload-excel
+			ref="uploadExcelRef"
+			title="导入"
+			url="/wallet/wallet-recharge-apply/read-topup-excel"
+			temp-url="/admin/sys-file/local/file/wallet_recharge.xlsx"
+			@refreshDataList="getDataList(false)"
+		/>
 
 		<!-- 编辑、新增  -->
 		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
@@ -197,20 +230,25 @@ const resetQuery = () => {
 
 const doInfo = (row: any) => {
 	push({
-		path: "/wallet/wallet-recharge-apply/preview-excel", query: {
+		path: "/wallet/wallet-recharge-apply/preview-excel",
+		query: {
 			id: null,
-			invoiceId: row.id
-		}
+			invoiceId: row.id,
+		},
 	})
 }
 
 // 导出excel
 const exportExcel = () => {
-	postDownBlobFile("/wallet/walletRechargeInvoice/export", {
-		...state.queryForm,
-		ascs: state.ascs,
-		descs: state.descs,
-	}, "充值扣款发票申请.xlsx")
+	postDownBlobFile(
+		"/wallet/walletRechargeInvoice/export",
+		{
+			...state.queryForm,
+			ascs: state.ascs,
+			descs: state.descs,
+		},
+		"充值扣款发票申请.xlsx",
+	)
 }
 
 // 多选事件
diff --git a/src/views/wallet/wallet-recharge-water/index.vue b/src/views/wallet/wallet-recharge-water/index.vue
index dbaa285..99982c9 100644
--- a/src/views/wallet/wallet-recharge-water/index.vue
+++ b/src/views/wallet/wallet-recharge-water/index.vue
@@ -1,54 +1,72 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<DraggableDepTree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
-				@getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含"
-				:defaultTreeWidth="20" :nodeClickable="false">
+			<DraggableDepTree
+				ref="draggableDepTreeRef"
+				placeholder="请输入部门名称"
+				:show-expand="true"
+				@getSelectNode="handleGetSelectNode"
+				switch-inactive-text="包含"
+				switch-active-text="不包含"
+				:defaultTreeWidth="20"
+				:nodeClickable="false"
+			>
 				<template #default>
-					<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-						<el-row>
-							<el-form-item style="width: 300px" label="用户" prop="userId">
-								<select-user v-model="state.queryForm.userId" placeholder="用户" />
-							</el-form-item>
-							<el-form-item style="width: 200px" label="充值类型" prop="bizType">
-								<dict-select v-model="state.queryForm.bizType" dict-code="wallet_biz_recharge" />
-							</el-form-item>
-							<el-form-item style="width: 200px" label="审核状态" prop="processStatus">
-								<dict-select v-model="state.queryForm.processStatus" dict-code="check_status" />
-							</el-form-item>
-							<el-form-item style="width: 200px" label="钱包类型" prop="walletTypeId">
-								<select-wallet-type v-model="state.queryForm.walletTypeId" placeholder="饭卡类型"
-									clearable />
-							</el-form-item>
-							<el-form-item style="width: 450px" label="审核时间" prop="processTimeList">
-								<el-date-picker v-model="state.queryForm.processTimeList"
-									value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
-							</el-form-item>
-							<el-form-item>
-								<el-button icon="Search" type="primary" @click="getDataList">
-									{{ $t("common.queryBtn") }}
-								</el-button>
-								<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
-							</el-form-item>
-						</el-row>
-					</el-form>
+					<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"
+						@reset="resetQuery"
+					>
+						<el-form-item style="width: 300px" label="用户" prop="userId">
+							<select-user v-model="state.queryForm.userId" placeholder="用户" />
+						</el-form-item>
+						<el-form-item style="width: 200px" label="充值类型" prop="bizType">
+							<dict-select v-model="state.queryForm.bizType" dict-code="wallet_biz_recharge" />
+						</el-form-item>
+						<el-form-item style="width: 200px" label="审核状态" prop="processStatus">
+							<dict-select v-model="state.queryForm.processStatus" dict-code="check_status" />
+						</el-form-item>
+						<el-form-item style="width: 200px" label="钱包类型" prop="walletTypeId">
+							<select-wallet-type v-model="state.queryForm.walletTypeId" placeholder="饭卡类型" clearable />
+						</el-form-item>
+						<el-form-item style="width: 450px" label="审核时间" prop="processTimeList">
+							<el-date-picker v-model="state.queryForm.processTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
+						</el-form-item>
+					</SearchPanel>
 					<el-row>
 						<div class="mb8" style="width: 100%">
-							<right-toolbar v-model:showSearch="showSearch" :export="'wallet_walletRechargeApply_export'"
-								@exportExcel="exportExcel" class="ml10 mr20" style="float: right"
-								@queryTable="getDataList"></right-toolbar>
+							<right-toolbar
+								v-model:showSearch="showSearch"
+								:export="'wallet_walletRechargeApply_export'"
+								@exportExcel="exportExcel"
+								class="ml10 mr20"
+								style="float: right"
+								@queryTable="getDataList"
+							></right-toolbar>
 						</div>
 					</el-row>
-					<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-						:header-cell-style="tableStyle.headerCellStyle" :summary-method="getSummaries" show-summary
-						@selection-change="selectionChangHandle" @sort-change="sortChangeHandle">
+					<el-table
+						:data="state.dataList"
+						v-loading="state.loading"
+						border
+						:cell-style="tableStyle.cellStyle"
+						:header-cell-style="tableStyle.headerCellStyle"
+						:summary-method="getSummaries"
+						show-summary
+						@selection-change="selectionChangHandle"
+						@sort-change="sortChangeHandle"
+					>
 						<el-table-column type="index" label="#" width="80" />
 						<el-table-column width="200" label="用户">
 							<template #default="{ row }">
 								<div class="flex flex-row items-center justify-center">
 									<preview-image width="50px" height="50px" :src="row.userAvatar" />
-									<div
-										class="flex flex-col ml-2 items-start cursor-pointer hover:underline hover:text-blue-500">
+									<div class="flex flex-col ml-2 items-start cursor-pointer hover:underline hover:text-blue-500">
 										<span> {{ row.username }} </span>
 										<span> {{ row.userMobile }} </span>
 										<span> {{ row.userDeptName }} </span>
@@ -90,15 +108,19 @@
 						</el-table-column>
 						<el-table-column v-auths="['wallet_walletRechargeImport_recover']" label="操作" width="100">
 							<template #default="{ row }">
-								<el-button v-auth="'wallet_walletRechargeImport_recover'" icon="RefreshRight" text
-									type="primary" @click="handleRecover(row.id)">
+								<el-button
+									v-auth="'wallet_walletRechargeImport_recover'"
+									icon="RefreshRight"
+									text
+									type="primary"
+									@click="handleRecover(row.id)"
+								>
 									恢复
 								</el-button>
 							</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" />
 				</template>
 			</DraggableDepTree>
 		</div>
diff --git a/src/views/wallet/wallet-rule-transaction/index.vue b/src/views/wallet/wallet-rule-transaction/index.vue
index 397b670..e2b1b6f 100644
--- a/src/views/wallet/wallet-rule-transaction/index.vue
+++ b/src/views/wallet/wallet-rule-transaction/index.vue
@@ -1,10 +1,26 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<DraggableDepTree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
-				@getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含"
-				:defaultTreeWidth="20" :nodeClickable="false">
-				<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
+			<DraggableDepTree
+				ref="draggableDepTreeRef"
+				placeholder="请输入部门名称"
+				:show-expand="true"
+				@getSelectNode="handleGetSelectNode"
+				switch-inactive-text="包含"
+				switch-active-text="不包含"
+				:defaultTreeWidth="20"
+				:nodeClickable="false"
+			>
+				<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"
+					@reset="resetQuery"
+				>
 					<el-form-item style="width: 250px" label="用户" prop="userId">
 						<select-user v-model="state.queryForm.userId" />
 					</el-form-item>
@@ -15,34 +31,34 @@
 						<dict-select v-model="state.queryForm.bizType" dict-code="wallet_rule_transation_type" />
 					</el-form-item>
 					<el-form-item style="width: 350px" label="转账时间" prop="createTimeList">
-						<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD"
-							type="daterange" />
+						<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD" type="daterange" />
 					</el-form-item>
 					<el-form-item style="width: 350px" label="退回时间" prop="refundTimeList">
-						<el-date-picker v-model="state.queryForm.refundTimeList" value-format="YYYY-MM-DD"
-							type="daterange" />
+						<el-date-picker v-model="state.queryForm.refundTimeList" value-format="YYYY-MM-DD" type="daterange" />
 					</el-form-item>
-					<el-row>
-						<el-form-item>
-							<el-button icon="Search" type="primary" @click="getDataList">
-								{{ $t("common.queryBtn") }}
-							</el-button>
-							<el-button icon="Refresh" @click="resetQuery">
-								{{ $t("common.resetBtn") }}
-							</el-button>
-						</el-form-item>
-					</el-row>
-				</el-form>
+					<el-row> </el-row>
+				</SearchPanel>
 				<el-row>
 					<div class="mb8" style="width: 100%">
 						<!-- :export="'wallet_walletRuleTransaction_export'" -->
-						<right-toolbar v-model:showSearch="showSearch" @exportExcel="exportExcel" class="ml10 mr20"
-							style="float: right" @queryTable="getDataList"></right-toolbar>
+						<right-toolbar
+							v-model:showSearch="showSearch"
+							@exportExcel="exportExcel"
+							class="ml10 mr20"
+							style="float: right"
+							@queryTable="getDataList"
+						></right-toolbar>
 					</div>
 				</el-row>
-				<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-					:header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
-					@sort-change="sortChangeHandle">
+				<el-table
+					:data="state.dataList"
+					v-loading="state.loading"
+					border
+					:cell-style="tableStyle.cellStyle"
+					:header-cell-style="tableStyle.headerCellStyle"
+					@selection-change="selectionChangHandle"
+					@sort-change="sortChangeHandle"
+				>
 					<el-table-column type="index" label="#" width="60" />
 					<el-table-column label="用户">
 						<el-table-column width="120" prop="username" label="姓名" />
@@ -109,18 +125,22 @@
 						<el-table-column prop="refundTime" width="170" label="退回时间" />
 					</el-table-column>
 					<el-table-column prop="createTime" width="170" label="创建时间" />
-					<el-table-column label="操作" fixed="right" width="80"
-						v-auths="['wallet_walletRuleTransaction_refund']">
+					<el-table-column label="操作" fixed="right" width="80" v-auths="['wallet_walletRuleTransaction_refund']">
 						<template #default="{ row }">
-							<el-button v-if="row.isRefund == '0'" icon="RefreshRight" text type="primary"
-								v-auth="'wallet_walletRuleTransaction_refund'" @click="doRefund(row)">
+							<el-button
+								v-if="row.isRefund == '0'"
+								icon="RefreshRight"
+								text
+								type="primary"
+								v-auth="'wallet_walletRuleTransaction_refund'"
+								@click="doRefund(row)"
+							>
 								退回
 							</el-button>
 						</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" />
 			</DraggableDepTree>
 		</div>
 
@@ -157,7 +177,7 @@ const defaultCreateTimeList = [
 ]
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {
-		createTimeList: defaultCreateTimeList
+		createTimeList: defaultCreateTimeList,
 	},
 	pageList: walletRuleTransactionApi.pageJoin,
 })
diff --git a/src/views/wallet/wallet-stride/index.vue b/src/views/wallet/wallet-stride/index.vue
index 6d407bf..4f81c23 100644
--- a/src/views/wallet/wallet-stride/index.vue
+++ b/src/views/wallet/wallet-stride/index.vue
@@ -1,17 +1,20 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-				<el-row>
-					<el-form-item style="width: 300px" label="用户" prop="userIds">
-						<select-user v-model="state.queryForm.userIds" />
-					</el-form-item>
-					<el-form-item>
-						<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
-						<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
-					</el-form-item>
-				</el-row>
-			</el-form>
+			<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"
+				@reset="resetQuery"
+			>
+				<el-form-item style="width: 300px" label="用户" prop="userIds">
+					<select-user v-model="state.queryForm.userIds" />
+				</el-form-item>
+			</SearchPanel>
 			<el-row>
 				<div class="mb8" style="width: 100%">
 					<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()" v-auth="'admin_walletStride_add'">
diff --git a/src/views/wallet/wallet-th/index.vue b/src/views/wallet/wallet-th/index.vue
index 7a1469d..decd34b 100644
--- a/src/views/wallet/wallet-th/index.vue
+++ b/src/views/wallet/wallet-th/index.vue
@@ -1,45 +1,63 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<DraggableDepTree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
-				@getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含"
-				:defaultTreeWidth="20" :nodeClickable="false">
+			<DraggableDepTree
+				ref="draggableDepTreeRef"
+				placeholder="请输入部门名称"
+				:show-expand="true"
+				@getSelectNode="handleGetSelectNode"
+				switch-inactive-text="包含"
+				switch-active-text="不包含"
+				:defaultTreeWidth="20"
+				:nodeClickable="false"
+			>
 				<template #default>
-					<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-						<el-row>
-							<el-form-item style="width: 300px" label="用户" prop="userId">
-								<select-user v-model="state.queryForm.userId" />
-							</el-form-item>
-							<el-form-item style="width: 250px" label="钱包类型" prop="walletTypeId">
-								<select-wallet-type multiple v-model="state.queryForm.walletTypeIdList"
-									placeholder="饭卡类型" clearable />
-							</el-form-item>
-							<el-form-item style="width: 300px" label="退款时间" prop="createTimeList">
-								<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD"
-									type="daterange" />
-							</el-form-item>
-							<el-form-item>
-								<el-button icon="Search" type="primary" @click="getDataList">
-									{{ $t("common.queryBtn") }}
-								</el-button>
-								<el-button icon="Refresh" @click="resetQuery">
-									{{ $t("common.resetBtn") }}
-								</el-button>
-							</el-form-item>
-						</el-row>
-					</el-form>
+					<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"
+						@reset="resetQuery"
+					>
+						<el-form-item style="width: 300px" label="用户" prop="userId">
+							<select-user v-model="state.queryForm.userId" />
+						</el-form-item>
+						<el-form-item style="width: 250px" label="钱包类型" prop="walletTypeId">
+							<select-wallet-type multiple v-model="state.queryForm.walletTypeIdList" placeholder="饭卡类型" clearable />
+						</el-form-item>
+						<el-form-item style="width: 300px" label="退款时间" prop="createTimeList">
+							<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD" type="daterange" />
+						</el-form-item>
+					</SearchPanel>
 					<el-row>
 						<div class="mb8" style="width: 100%">
-							<right-toolbar :search="false" v-model:showSearch="showSearch"
-								:export="'wallet_walletTransaction_export'" @exportExcel="exportExcel" class="ml10 mr20"
-								style="float: right" @queryTable="getDataList">
+							<right-toolbar
+								:search="false"
+								v-model:showSearch="showSearch"
+								:export="'wallet_walletTransaction_export'"
+								@exportExcel="exportExcel"
+								class="ml10 mr20"
+								style="float: right"
+								@queryTable="getDataList"
+							>
 								<el-button icon="DataLine" circle @click="viewBalanceStatistics" />
 							</right-toolbar>
 						</div>
 					</el-row>
-					<el-table :data="state.dataList" v-loading="state.loading" border :summary-method="getSummaries"
-						show-summary :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
-						@selection-change="selectionChangHandle" @sort-change="sortChangeHandle">
+					<el-table
+						:data="state.dataList"
+						v-loading="state.loading"
+						border
+						:summary-method="getSummaries"
+						show-summary
+						:cell-style="tableStyle.cellStyle"
+						:header-cell-style="tableStyle.headerCellStyle"
+						@selection-change="selectionChangHandle"
+						@sort-change="sortChangeHandle"
+					>
 						<el-table-column type="index" label="#" width="60" />
 						<el-table-column prop="username" width="120" label="用户" show-overflow-tooltip />
 						<el-table-column prop="userAvatar" label="头像" show-overflow-tooltip>
@@ -68,21 +86,38 @@
 								<div class="color-danger">{{ displayPrice(row.price) }}</div>
 							</template>
 						</el-table-column>
+						<el-table-column prop="remark" label="备注" min-width="180" show-overflow-tooltip />
 						<el-table-column prop="createTime" width="200" label="退款时间" />
-						<el-table-column label="操作" width="150">
+						<el-table-column label="操作" width="240" fixed="right" class-name="wallet-tx-actions-col">
 							<template #default="{ row }">
-								<el-button icon="InfoFilled" link type="primary" @click="doRefund(row)"> 详情 </el-button>
-								<el-button v-if="false" icon="edit-pen" text type="primary"
-									v-auth="'wallet_walletRecharge_edit'"
-									@click="formDialogRef.openDialog(row.id)">编辑</el-button>
+								<div class="row-actions">
+									<el-button icon="InfoFilled" link type="primary" @click="doRefund(row)"> 详情 </el-button>
+									<el-button
+										icon="EditPen"
+										link
+										type="primary"
+										v-auth="'wallet_walletTransaction_edit'"
+										@click="remarkFormRef?.openDialog(row)"
+										>修改备注</el-button
+									>
+									<el-button
+										icon="Edit"
+										link
+										type="primary"
+										v-auth="'wallet_walletTransaction_update_info'"
+										@click="infoFormRef?.openDialog(row)"
+										>修改信息</el-button
+									>
+								</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" />
 				</template>
 			</DraggableDepTree>
 		</div>
+		<transaction-remark-form ref="remarkFormRef" @refresh="getDataList(false)" />
+		<transaction-info-form ref="infoFormRef" @refresh="getDataList(false)" />
 		<el-drawer v-model="showDrawer" @closed="drawerClose">
 			<el-table :data="[balanceStatistics]" style="width: 100%">
 				<el-table-column align="center" label="退还各自食堂统计">
@@ -123,14 +158,20 @@ import { displayPrice } from "/@/utils/formatMoney"
 
 const showDrawer = ref(false)
 const balanceStatisticsLoading = ref(false)
-const balanceStatistics = reactive<any>({
-
-})
+const balanceStatistics = reactive<any>({})
 
+// 所有钱包流水列表共用的备注编辑表单。
+const TransactionRemarkForm = defineAsyncComponent(() => import("../components/transaction-remark-form.vue"))
+// 所有钱包流水列表共用的流水信息编辑表单（部门、创建时间）。
+const TransactionInfoForm = defineAsyncComponent(() => import("../components/transaction-info-form.vue"))
 // 定义查询字典
 const { wallet_type, wallet_biz } = useDict("wallet_type", "wallet_biz")
 // 定义变量内容
 const formDialogRef = ref()
+// 通用流水备注编辑弹窗引用。
+const remarkFormRef = ref()
+// 通用流水信息编辑弹窗引用。
+const infoFormRef = ref()
 // 搜索变量
 const queryRef = ref()
 const showSearch = ref(true)
@@ -147,7 +188,7 @@ const defaultCreateTimeList = [
 ]
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {
-		createTimeList: defaultCreateTimeList
+		createTimeList: defaultCreateTimeList,
 	},
 	pageList: pageTh,
 })
@@ -239,3 +280,22 @@ const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepT
 	getDataList()
 }
 </script>
+
+<style scoped lang="scss">
+/* 操作列按钮改为紧凑 flex 布局并收窄单元格内边距，避免按钮换行和两侧留白。 */
+.row-actions {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+	white-space: nowrap;
+
+	:deep(.el-button + .el-button) {
+		margin-left: 0;
+	}
+}
+
+:deep(.wallet-tx-actions-col .cell) {
+	padding: 0 6px;
+}
+</style>
diff --git a/src/views/wallet/wallet-tk/index.vue b/src/views/wallet/wallet-tk/index.vue
index 0c9679b..589ce66 100644
--- a/src/views/wallet/wallet-tk/index.vue
+++ b/src/views/wallet/wallet-tk/index.vue
@@ -1,45 +1,63 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<DraggableDepTree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
-				@getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含"
-				:defaultTreeWidth="20" :nodeClickable="false">
+			<DraggableDepTree
+				ref="draggableDepTreeRef"
+				placeholder="请输入部门名称"
+				:show-expand="true"
+				@getSelectNode="handleGetSelectNode"
+				switch-inactive-text="包含"
+				switch-active-text="不包含"
+				:defaultTreeWidth="20"
+				:nodeClickable="false"
+			>
 				<template #default>
-					<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-						<el-row>
-							<el-form-item style="width: 300px" label="用户" prop="userId">
-								<select-user v-model="state.queryForm.userId" />
-							</el-form-item>
-							<el-form-item style="width: 250px" label="钱包类型" prop="walletTypeIdList">
-								<select-wallet-type multiple v-model="state.queryForm.walletTypeIdList"
-									placeholder="饭卡类型" clearable />
-							</el-form-item>
-							<el-form-item style="width: 300px" label="退款时间" prop="createTimeList">
-								<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD"
-									type="daterange" />
-							</el-form-item>
-							<el-form-item>
-								<el-button icon="Search" type="primary" @click="getDataList">
-									{{ $t("common.queryBtn") }}
-								</el-button>
-								<el-button icon="Refresh" @click="resetQuery">
-									{{ $t("common.resetBtn") }}
-								</el-button>
-							</el-form-item>
-						</el-row>
-					</el-form>
+					<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"
+						@reset="resetQuery"
+					>
+						<el-form-item style="width: 300px" label="用户" prop="userId">
+							<select-user v-model="state.queryForm.userId" />
+						</el-form-item>
+						<el-form-item style="width: 250px" label="钱包类型" prop="walletTypeIdList">
+							<select-wallet-type multiple v-model="state.queryForm.walletTypeIdList" placeholder="饭卡类型" clearable />
+						</el-form-item>
+						<el-form-item style="width: 300px" label="退款时间" prop="createTimeList">
+							<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD" type="daterange" />
+						</el-form-item>
+					</SearchPanel>
 					<el-row>
 						<div class="mb8" style="width: 100%">
-							<right-toolbar :search="false" v-model:showSearch="showSearch"
-								:export="'wallet_walletTransaction_export'" @exportExcel="exportExcel" class="ml10 mr20"
-								style="float: right" @queryTable="getDataList">
+							<right-toolbar
+								:search="false"
+								v-model:showSearch="showSearch"
+								:export="'wallet_walletTransaction_export'"
+								@exportExcel="exportExcel"
+								class="ml10 mr20"
+								style="float: right"
+								@queryTable="getDataList"
+							>
 								<el-button icon="DataLine" circle @click="viewBalanceStatistics" />
 							</right-toolbar>
 						</div>
 					</el-row>
-					<el-table :data="state.dataList" v-loading="state.loading" border :summary-method="getSummaries"
-						show-summary :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
-						@selection-change="selectionChangHandle" @sort-change="sortChangeHandle">
+					<el-table
+						:data="state.dataList"
+						v-loading="state.loading"
+						border
+						:summary-method="getSummaries"
+						show-summary
+						:cell-style="tableStyle.cellStyle"
+						:header-cell-style="tableStyle.headerCellStyle"
+						@selection-change="selectionChangHandle"
+						@sort-change="sortChangeHandle"
+					>
 						<el-table-column type="index" label="#" width="60" />
 						<el-table-column width="120" prop="username" label="用户" show-overflow-tooltip />
 						<el-table-column prop="userAvatar" label="头像" show-overflow-tooltip>
@@ -68,23 +86,40 @@
 								<div class="color-success">{{ displayPrice(row.price) }}</div>
 							</template>
 						</el-table-column>
+						<el-table-column prop="remark" label="备注" min-width="180" show-overflow-tooltip />
 						<el-table-column prop="createTime" width="200" label="退款时间" />
-						<el-table-column label="操作" width="150">
+						<el-table-column label="操作" width="240" fixed="right" class-name="wallet-tx-actions-col">
 							<template #default="{ row }">
-								<el-button icon="InfoFilled" link type="primary" @click="doRefund(row)"> 详情 </el-button>
-								<el-button v-if="false" icon="edit-pen" text type="primary"
-									v-auth="'wallet_walletRecharge_edit'"
-									@click="formDialogRef.openDialog(row.id)">编辑</el-button>
+								<div class="row-actions">
+									<el-button icon="InfoFilled" link type="primary" @click="doRefund(row)"> 详情 </el-button>
+									<el-button
+										icon="EditPen"
+										link
+										type="primary"
+										v-auth="'wallet_walletTransaction_edit'"
+										@click="remarkFormRef?.openDialog(row)"
+										>修改备注</el-button
+									>
+									<el-button
+										icon="Edit"
+										link
+										type="primary"
+										v-auth="'wallet_walletTransaction_update_info'"
+										@click="infoFormRef?.openDialog(row)"
+										>修改信息</el-button
+									>
+								</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" />
 				</template>
 			</DraggableDepTree>
 		</div>
 		<!-- 编辑、新增  -->
 		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+		<transaction-remark-form ref="remarkFormRef" @refresh="getDataList(false)" />
+		<transaction-info-form ref="infoFormRef" @refresh="getDataList(false)" />
 		<el-drawer v-model="showDrawer" @closed="drawerClose">
 			<el-table :data="[balanceStatistics]" style="width: 100%">
 				<el-table-column align="center" label="充值统计">
@@ -125,16 +160,22 @@ import { displayPrice } from "/@/utils/formatMoney"
 
 const showDrawer = ref(false)
 const balanceStatisticsLoading = ref(false)
-const balanceStatistics = reactive<any>({
-
-})
+const balanceStatistics = reactive<any>({})
 
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import("./form.vue"))
+// 所有钱包流水列表共用的备注编辑表单。
+const TransactionRemarkForm = defineAsyncComponent(() => import("../components/transaction-remark-form.vue"))
+// 所有钱包流水列表共用的流水信息编辑表单（部门、创建时间）。
+const TransactionInfoForm = defineAsyncComponent(() => import("../components/transaction-info-form.vue"))
 // 定义查询字典
 const { wallet_type, wallet_biz } = useDict("wallet_type", "wallet_biz")
 // 定义变量内容
 const formDialogRef = ref()
+// 通用流水备注编辑弹窗引用。
+const remarkFormRef = ref()
+// 通用流水信息编辑弹窗引用。
+const infoFormRef = ref()
 // 搜索变量
 const queryRef = ref()
 const showSearch = ref(true)
@@ -151,7 +192,7 @@ const defaultCreateTimeList = [
 ]
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {
-		createTimeList: defaultCreateTimeList
+		createTimeList: defaultCreateTimeList,
 	},
 	pageList: pageTk,
 })
@@ -243,3 +284,22 @@ const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepT
 	getDataList()
 }
 </script>
+
+<style scoped lang="scss">
+/* 操作列按钮改为紧凑 flex 布局并收窄单元格内边距，避免按钮换行和两侧留白。 */
+.row-actions {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+	white-space: nowrap;
+
+	:deep(.el-button + .el-button) {
+		margin-left: 0;
+	}
+}
+
+:deep(.wallet-tx-actions-col .cell) {
+	padding: 0 6px;
+}
+</style>
diff --git a/src/views/wallet/wallet-type/components/wallet-rule-table-dialog.vue b/src/views/wallet/wallet-type/components/wallet-rule-table-dialog.vue
index 3230231..41d8c1a 100644
--- a/src/views/wallet/wallet-type/components/wallet-rule-table-dialog.vue
+++ b/src/views/wallet/wallet-type/components/wallet-rule-table-dialog.vue
@@ -1,32 +1,35 @@
 <template>
 	<el-dialog title="钱包规则" width="85%" v-model="visible" append-to-body :close-on-click-modal="false" draggable>
-		<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-			<el-row>
-				<el-form-item style="width: 300px" label="部门" prop="targetDeptId">
-					<select-dept v-model="state.queryForm.targetDeptId" />
-				</el-form-item>
-				<el-form-item style="width: 200px" label="是否启用" prop="status">
-					<dict-select v-model="state.queryForm.status" dict-code="yes_no_type" />
-				</el-form-item>
-				<el-form-item>
-					<el-button icon="Search" type="primary" @click="getDataList">
-						{{ $t("common.queryBtn") }}
-					</el-button>
-					<el-button icon="Refresh" @click="resetQuery">
-						{{ $t("common.resetBtn") }}
-					</el-button>
-				</el-form-item>
-			</el-row>
-		</el-form>
+		<SearchPanel
+			ref="queryRef"
+			:model="state.queryForm"
+			:loading="Boolean(state.loading)"
+			:search-text="$t('common.queryBtn')"
+			:reset-text="$t('common.resetBtn')"
+			@search="getDataList"
+			@reset="resetQuery"
+		>
+			<el-form-item style="width: 300px" label="部门" prop="targetDeptId">
+				<select-dept v-model="state.queryForm.targetDeptId" />
+			</el-form-item>
+			<el-form-item style="width: 200px" label="是否启用" prop="status">
+				<dict-select v-model="state.queryForm.status" dict-code="yes_no_type" />
+			</el-form-item>
+		</SearchPanel>
 		<el-row>
 			<div class="mb8" style="width: 100%">
-				<el-button icon="folder-add" type="primary" class="ml10" @click="doAdd"
-					v-auth="'dzc_walletRuleMchConfig_add'"> 新 增 </el-button>
+				<el-button icon="folder-add" type="primary" class="ml10" @click="doAdd" v-auth="'dzc_walletRuleMchConfig_add'"> 新 增 </el-button>
 			</div>
 		</el-row>
-		<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-			:header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
-			@sort-change="sortChangeHandle">
+		<el-table
+			:data="state.dataList"
+			v-loading="state.loading"
+			border
+			:cell-style="tableStyle.cellStyle"
+			:header-cell-style="tableStyle.headerCellStyle"
+			@selection-change="selectionChangHandle"
+			@sort-change="sortChangeHandle"
+		>
 			<el-table-column type="selection" width="40" align="center" />
 			<el-table-column type="index" label="#" width="80" />
 			<el-table-column min-width="120" label="源钱包类型">
@@ -62,8 +65,7 @@
 			</el-table-column>
 			<el-table-column prop="isReservePrice" min-width="100" label="是否保留100元用于跨单位">
 				<template #default="{ row }">
-					<el-switch active-value="1" inactive-value="0" v-model="row.isReservePrice"
-						@change="isReservePriceChange(row)" />
+					<el-switch active-value="1" inactive-value="0" v-model="row.isReservePrice" @change="isReservePriceChange(row)" />
 				</template>
 			</el-table-column>
 			<el-table-column min-width="300" label="描述">
@@ -73,10 +75,17 @@
 			</el-table-column>
 			<el-table-column label="操作" width="150" fixed="right">
 				<template #default="{ row }">
-					<el-button icon="edit-pen" text type="primary" v-auth="'dzc_walletRuleMchConfig_edit'"
-						@click="WalletRuleFormDialogRef.openDialog(row.id, row.sourceWalletTypeId)">编辑</el-button>
-					<el-button icon="delete" text type="primary" v-auth="'dzc_walletRuleMchConfig_del'"
-						@click="handleDelete([row.id])">删除</el-button>
+					<el-button
+						icon="edit-pen"
+						text
+						type="primary"
+						v-auth="'dzc_walletRuleMchConfig_edit'"
+						@click="WalletRuleFormDialogRef.openDialog(row.id, row.sourceWalletTypeId)"
+						>编辑</el-button
+					>
+					<el-button icon="delete" text type="primary" v-auth="'dzc_walletRuleMchConfig_del'" @click="handleDelete([row.id])"
+						>删除</el-button
+					>
 				</template>
 			</el-table-column>
 		</el-table>
diff --git a/src/views/wallet/wallet-xf/index.vue b/src/views/wallet/wallet-xf/index.vue
index f10469d..adc24df 100644
--- a/src/views/wallet/wallet-xf/index.vue
+++ b/src/views/wallet/wallet-xf/index.vue
@@ -1,48 +1,66 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<DraggableDepTree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
-				@getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含"
-				:defaultTreeWidth="20" :nodeClickable="false">
+			<DraggableDepTree
+				ref="draggableDepTreeRef"
+				placeholder="请输入部门名称"
+				:show-expand="true"
+				@getSelectNode="handleGetSelectNode"
+				switch-inactive-text="包含"
+				switch-active-text="不包含"
+				:defaultTreeWidth="20"
+				:nodeClickable="false"
+			>
 				<template #default>
-					<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-						<el-row>
-							<el-form-item style="width: 300px" label="用户" prop="userId">
-								<select-user v-model="state.queryForm.userId" />
-							</el-form-item>
-							<el-form-item style="width: 200px" label="充值方式" prop="bizType">
-								<dict-select v-model="state.queryForm.bizType" dict-code="wallet_biz" />
-							</el-form-item>
-							<el-form-item style="width: 250px" label="钱包类型" prop="walletTypeIdList">
-								<select-wallet-type multiple v-model="state.queryForm.walletTypeIdList"
-									placeholder="饭卡类型" clearable />
-							</el-form-item>
-							<el-form-item style="width: 300px" label="消费时间" prop="createTimeList">
-								<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD"
-									type="daterange" />
-							</el-form-item>
-							<el-form-item>
-								<el-button icon="Search" type="primary" @click="getDataList">
-									{{ $t("common.queryBtn") }}
-								</el-button>
-								<el-button icon="Refresh" @click="resetQuery">
-									{{ $t("common.resetBtn") }}
-								</el-button>
-							</el-form-item>
-						</el-row>
-					</el-form>
+					<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"
+						@reset="resetQuery"
+					>
+						<el-form-item style="width: 300px" label="用户" prop="userId">
+							<select-user v-model="state.queryForm.userId" />
+						</el-form-item>
+						<el-form-item style="width: 200px" label="充值方式" prop="bizType">
+							<dict-select v-model="state.queryForm.bizType" dict-code="wallet_biz" />
+						</el-form-item>
+						<el-form-item style="width: 250px" label="钱包类型" prop="walletTypeIdList">
+							<select-wallet-type multiple v-model="state.queryForm.walletTypeIdList" placeholder="饭卡类型" clearable />
+						</el-form-item>
+						<el-form-item style="width: 300px" label="消费时间" prop="createTimeList">
+							<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD" type="daterange" />
+						</el-form-item>
+					</SearchPanel>
 					<el-row>
 						<div class="mb8" style="width: 100%">
-							<right-toolbar :search="false" v-model:showSearch="showSearch"
-								:export="'wallet_walletTransaction_export'" @exportExcel="exportExcel" class="ml10 mr20"
-								style="float: right" @queryTable="getDataList">
+							<right-toolbar
+								:search="false"
+								v-model:showSearch="showSearch"
+								:export="'wallet_walletTransaction_export'"
+								@exportExcel="exportExcel"
+								class="ml10 mr20"
+								style="float: right"
+								@queryTable="getDataList"
+							>
 								<el-button icon="DataLine" circle @click="viewBalanceStatistics" />
 							</right-toolbar>
 						</div>
 					</el-row>
-					<el-table :data="state.dataList" v-loading="state.loading" border :summary-method="getSummaries"
-						show-summary :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
-						@selection-change="selectionChangHandle" @sort-change="sortChangeHandle">
+					<el-table
+						:data="state.dataList"
+						v-loading="state.loading"
+						border
+						:summary-method="getSummaries"
+						show-summary
+						:cell-style="tableStyle.cellStyle"
+						:header-cell-style="tableStyle.headerCellStyle"
+						@selection-change="selectionChangHandle"
+						@sort-change="sortChangeHandle"
+					>
 						<el-table-column type="index" label="#" width="60" />
 						<el-table-column width="120" prop="username" label="用户" show-overflow-tooltip />
 						<el-table-column prop="userAvatar" label="头像" show-overflow-tooltip>
@@ -71,26 +89,41 @@
 								<div class="color-danger">{{ displayPrice(row.price) }}</div>
 							</template>
 						</el-table-column>
+						<el-table-column prop="remark" label="备注" min-width="180" show-overflow-tooltip />
 						<el-table-column prop="createTime" width="200" label="消费时间" />
-						<el-table-column label="操作" width="150">
+						<el-table-column label="操作" width="240" fixed="right" class-name="wallet-tx-actions-col">
 							<template #default="{ row }">
-								<el-button icon="InfoFilled" link type="primary" @click="doRefund(row)"> 详情 </el-button>
-								<el-button v-if="false" icon="edit-pen" text type="primary"
-									v-auth="'wallet_walletRecharge_edit'"
-									@click="formDialogRef.openDialog(row.id)">编辑</el-button>
-								<el-button v-if="false" icon="delete" text type="primary"
-									v-auth="'wallet_walletRecharge_del'" @click="handleDelete([row.id])">删除</el-button>
+								<div class="row-actions">
+									<el-button icon="InfoFilled" link type="primary" @click="doRefund(row)"> 详情 </el-button>
+									<el-button
+										icon="EditPen"
+										link
+										type="primary"
+										v-auth="'wallet_walletTransaction_edit'"
+										@click="remarkFormRef?.openDialog(row)"
+										>修改备注</el-button
+									>
+									<el-button
+										icon="Edit"
+										link
+										type="primary"
+										v-auth="'wallet_walletTransaction_update_info'"
+										@click="infoFormRef?.openDialog(row)"
+										>修改信息</el-button
+									>
+								</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" />
 				</template>
 			</DraggableDepTree>
 		</div>
 
 		<!-- 编辑、新增  -->
 		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+		<transaction-remark-form ref="remarkFormRef" @refresh="getDataList(false)" />
+		<transaction-info-form ref="infoFormRef" @refresh="getDataList(false)" />
 		<el-drawer v-model="showDrawer" @closed="drawerClose">
 			<el-table :data="[balanceStatistics]" style="width: 100%">
 				<el-table-column align="center" label="充值统计">
@@ -124,7 +157,7 @@
 import dayjs from "dayjs"
 import { BasicTableProps, useTable } from "/@/hooks/table"
 import { pageXf, xfTotal } from "/@/api/wallet/wallet-transaction"
-import { useMessage, useMessageBox } from "/@/hooks/message"
+import { useMessage } from "/@/hooks/message"
 import { useDict } from "/@/hooks/dict"
 import { displayPrice } from "/@/utils/formatMoney"
 import { deptTree } from "/@/api/admin/dept"
@@ -133,17 +166,22 @@ const { push } = useRouter()
 
 const showDrawer = ref(false)
 const balanceStatisticsLoading = ref(false)
-const balanceStatistics = reactive<any>({
-
-})
-
+const balanceStatistics = reactive<any>({})
 
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import("./form.vue"))
+// 所有钱包流水列表共用的备注编辑表单。
+const TransactionRemarkForm = defineAsyncComponent(() => import("../components/transaction-remark-form.vue"))
+// 所有钱包流水列表共用的流水信息编辑表单（部门、创建时间）。
+const TransactionInfoForm = defineAsyncComponent(() => import("../components/transaction-info-form.vue"))
 // 定义查询字典
 const { wallet_type, wallet_biz } = useDict("wallet_type", "wallet_biz")
 // 定义变量内容
 const formDialogRef = ref()
+// 通用流水备注编辑弹窗引用。
+const remarkFormRef = ref()
+// 通用流水信息编辑弹窗引用。
+const infoFormRef = ref()
 // 搜索变量
 const queryRef = ref()
 const showSearch = ref(true)
@@ -158,7 +196,7 @@ const defaultCreateTimeList = [
 ]
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {
-		createTimeList: defaultCreateTimeList
+		createTimeList: defaultCreateTimeList,
 	},
 	pageList: pageXf,
 })
@@ -237,23 +275,6 @@ const getSummaries = (param: any) => {
 	return totalRow
 }
 
-// 删除操作
-const handleDelete = async (ids: string[]) => {
-	try {
-		await useMessageBox().confirm("此操作将永久删除")
-	} catch {
-		return
-	}
-
-	try {
-		await delObjs(ids)
-		getDataList()
-		useMessage().success("删除成功")
-	} catch (err: any) {
-		useMessage().error(err.msg)
-	}
-}
-
 // 树节点选择时
 const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: any) => {
 	state.queryForm.deptId = curClickedNode.id
@@ -262,3 +283,22 @@ const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepT
 	getDataList()
 }
 </script>
+
+<style scoped lang="scss">
+/* 操作列按钮改为紧凑 flex 布局并收窄单元格内边距，避免按钮换行和两侧留白。 */
+.row-actions {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+	white-space: nowrap;
+
+	:deep(.el-button + .el-button) {
+		margin-left: 0;
+	}
+}
+
+:deep(.wallet-tx-actions-col .cell) {
+	padding: 0 6px;
+}
+</style>
diff --git a/钱包流水标签备注-权限及字典配置.txt b/钱包流水标签备注-权限及字典配置.txt
new file mode 100644
index 0000000..76511ad
--- /dev/null
+++ b/钱包流水标签备注-权限及字典配置.txt
@@ -0,0 +1,56 @@
+====================================================================
+钱包流水（wallet_transaction）标签/备注/修改信息功能 —— 手动配置说明
+====================================================================
+涉及项目：pj_service_cloud（后端）、pj_admin_cloud（前端）
+
+一、数据库迁移（上线前执行）
+--------------------------------------------------------------------
+执行脚本：pj_service_cloud/db/20260908_add_wallet_transaction_tags_remark.sql
+
+作用：wallet_transaction 表新增两列
+  - tags    varchar(512)  财务统计标签（多个 wallet_transaction_tag 字典值英文逗号分隔）
+  - remark  varchar(256)  流水备注
+历史数据保持为空，无需回填。
+
+二、菜单按钮权限（系统管理 → 菜单管理，手动添加）
+--------------------------------------------------------------------
+在各个钱包流水菜单下新增按钮（涉及页面：充值记录、消费记录、记账扣款、
+退款记录、退还各自食堂记录、钱包管理-钱包余额明细弹窗）：
+
+1. 按钮名称：修改备注
+   权限标识：wallet_walletTransaction_edit
+   对应接口：PUT /wallet/wallet-transaction/update-remark
+   说明：后端通用编辑接口 PUT /wallet/wallet-transaction 也使用此权限码，
+        若菜单中已配置过该按钮可直接复用，无需重复添加。
+
+2. 按钮名称：修改信息
+   权限标识：wallet_walletTransaction_update_info
+   对应接口：PUT /wallet/wallet-transaction/update-info
+
+另外"修改余额"弹窗新增的操作标签/备注无需新权限，沿用已有的：
+   wallet_walletTransaction_update_balance
+
+三、字典配置（系统管理 → 字典管理，手动添加）
+--------------------------------------------------------------------
+新增字典类型：
+  类型编码：wallet_transaction_tag
+  类型名称：钱包流水操作标签
+
+字典项（与 hq 平台保持一致）：
+  值：1    标签：不记账充值
+  值：2    标签：测试充值
+
+说明：充值记录页/充值统计页的"操作标签"搜索、流水列表的操作标签列展示、
+修改余额弹窗的"操作标签"多选，均依赖该字典；未配置时标签无法显示和筛选。
+
+四、功能说明（本次移植自 hq-platform）
+--------------------------------------------------------------------
+1. 充值记录（wallet-cz）：新增操作标签多选搜索、操作标签列、备注列、
+   操作栏"修改备注/修改信息"按钮。
+2. 消费记录/记账扣款/退款记录/退还各自食堂记录：新增备注列和
+   "修改备注/修改信息"按钮。
+3. 钱包管理-钱包余额明细弹窗：新增备注列和"修改备注/修改信息"按钮。
+4. 修改余额弹窗：新增"操作标签"多选和"备注"输入，随余额变动写入流水。
+5. 充值统计（wallet-cz-total）：新增"操作标签"多选搜索。
+6. 修改备注：只改备注（256 字符上限，空提交=清除备注）。
+   修改信息：只改归属部门和创建时间（两者必填，用于更正统计口径）。