From ca8599450a9f85cebc3e69594c6044f6cf62a0fd Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Sat, 5 Sep 2026 01:38:03 +0800
Subject: [PATCH] fix SalesOrderDetail.vue style

---
 src/components/CustomerProfileCard.vue        |   1 -
 .../fulfillment/OrderFulfillmentList.vue      |  19 +-
 src/pages/package/FundRecordList.vue          |  16 +-
 src/pages/salesOrder/SalesOrderDetail.vue     | 401 +++++++++++++++---
 src/pages/salesOrder/SalesOrderList.vue       |   2 +
 .../components/SalesOrderFinancePanel.vue     |  54 ---
 .../components/SalesOrderListCell.vue         |   6 +-
 7 files changed, 382 insertions(+), 117 deletions(-)
 delete mode 100644 src/pages/salesOrder/components/SalesOrderFinancePanel.vue

diff --git a/src/components/CustomerProfileCard.vue b/src/components/CustomerProfileCard.vue
index 6836275..bab4349 100644
--- a/src/components/CustomerProfileCard.vue
+++ b/src/components/CustomerProfileCard.vue
@@ -97,7 +97,6 @@ function openPhotoViewer(): void {
 		.header {
 			display: flex;
 			align-items: center;
-			padding-right: .5rem;
 			justify-content: space-between;
 
 			.name {
diff --git a/src/pages/fulfillment/OrderFulfillmentList.vue b/src/pages/fulfillment/OrderFulfillmentList.vue
index b17222b..f65f0cf 100644
--- a/src/pages/fulfillment/OrderFulfillmentList.vue
+++ b/src/pages/fulfillment/OrderFulfillmentList.vue
@@ -94,8 +94,25 @@ async function refresh(): Promise<void> { try { await fetchList(true); } catch (
 async function loadMore(): Promise<void> { try { await fetchList(false); } catch (error) { Message.error(getErrorMessage(error, "履约单加载失败")); } }
 async function selectType(value: DropdownValue): Promise<void> { if (!Array.isArray(value)) { type.value = String(value); await fetchList(true); } }
 async function selectStatus(value: DropdownValue): Promise<void> { if (!Array.isArray(value)) { status.value = String(value); await fetchList(true); } }
-async function toDetail(item: OrderFulfillment): Promise<void> { if (item.id) await router.push(`/management/order-fulfillments/${item.id}`); }
+async function toDetail(item: OrderFulfillment): Promise<void> {
+	if (item.id) await router.push({
+		path: `/management/order-fulfillments/${item.id}`,
+		query: { transitionDepth: String(getCurrentRouteDepth() + 1) }
+	});
+}
 async function toCreate(): Promise<void> { await router.push("/management/order-fulfillments/create"); }
+
+function getCurrentRouteDepth(): number {
+	const transitionDepth = Array.isArray(route.query.transitionDepth)
+		? route.query.transitionDepth[0]
+		: route.query.transitionDepth;
+	const depth = Number(transitionDepth);
+	if (transitionDepth && Number.isInteger(depth) && 0 <= depth && depth <= 20) {
+		return depth;
+	}
+	return Number(route.meta.depth ?? 0);
+}
+
 onMounted(async () => { navBarStore.clearRight(); navBarStore.setCustomRightVisible(canCreate.value); try { await fetchList(true); } catch (error) { Message.error(getErrorMessage(error, "履约单加载失败")); } });
 onUnmounted(() => navBarStore.clearRight());
 </script>
diff --git a/src/pages/package/FundRecordList.vue b/src/pages/package/FundRecordList.vue
index eb65d6b..5617675 100644
--- a/src/pages/package/FundRecordList.vue
+++ b/src/pages/package/FundRecordList.vue
@@ -132,10 +132,24 @@ function getStatusTheme(statusValue?: FundRecordStatus): "success" | "warning" |
 
 async function toDetail(item: FundRecord): Promise<void> {
 	if (item.id) {
-		await router.push(`/management/fund-records/${item.id}`);
+		await router.push({
+			path: `/management/fund-records/${item.id}`,
+			query: { transitionDepth: String(getCurrentRouteDepth() + 1) }
+		});
 	}
 }
 
+function getCurrentRouteDepth(): number {
+	const transitionDepth = Array.isArray(route.query.transitionDepth)
+		? route.query.transitionDepth[0]
+		: route.query.transitionDepth;
+	const depth = Number(transitionDepth);
+	if (transitionDepth && Number.isInteger(depth) && 0 <= depth && depth <= 20) {
+		return depth;
+	}
+	return Number(route.meta.depth ?? 0);
+}
+
 onMounted(async () => {
 	navBarStore.clearRight();
 	try {
diff --git a/src/pages/salesOrder/SalesOrderDetail.vue b/src/pages/salesOrder/SalesOrderDetail.vue
index 97ce8a6..b99814a 100644
--- a/src/pages/salesOrder/SalesOrderDetail.vue
+++ b/src/pages/salesOrder/SalesOrderDetail.vue
@@ -3,45 +3,121 @@
 		<template v-if="order">
 			<customer-profile-card v-if="order.customer" class="customer" :customer="order.customer" v-entrance-transition />
 			<section class="hero" v-entrance-transition="35">
-				<span class="eyebrow" v-text="'销售订单'" />
-				<div class="hero-title">
-					<h1 v-text="order.orderNo || order.id || '未命名订单'" />
+				<div class="header">
+					<span class="eyebrow">销售订单</span>
 					<t-tag :content="getSalesOrderStatusText(order.status)" variant="light-outline" :theme="getStatusTheme(order.status)" />
 				</div>
-				<div class="hero-meta">
-					<span v-text="getSalesOrderTypeText(order.orderType)" />
-					<strong v-text="formatPackageAmount(order.saleAmount)" />
+				<h1 class="no" v-text="order.orderNo" />
+				<div class="meta">
+					<pass-time-label class="time" :timestamp="order.purchasedAt" underline />
+					<div class="amount" :class="getPaymentAmountClass(order.paymentStatus)">
+						<span>￥</span>
+						<strong class="value" v-text="formatPackageAmount(order.saleAmount)" />
+					</div>
 				</div>
 			</section>
-			<t-cell-group title="订单信息" theme="card" v-entrance-transition="70">
-				<t-cell title="订单号" :note="order.orderNo || order.id" />
-				<t-cell title="订单类型" :note="getSalesOrderTypeText(order.orderType)" />
-				<t-cell title="订单状态">
-					<template #note><t-tag :content="getSalesOrderStatusText(order.status)" variant="light-outline" :theme="getStatusTheme(order.status)" /></template>
-				</t-cell>
-				<t-cell title="下单时间" :note="order.purchasedAt ? Time.toDateTime(order.purchasedAt) : '未知'" />
+			<t-cell-group title="订单信息" class="info" theme="card" v-entrance-transition="70">
 				<t-cell v-if="order.sourceEventRecord?.id" title="来源登记记录" arrow @click="toEventRecord" />
-				<t-cell v-if="order.remark" title="备注" :note="order.remark" />
+				<t-cell title="备注" :note="Text.display(order.remark)" />
+				<div class="photo-wrap bg-white">
+					<photo-scroller
+						:model-value="photoURLList"
+						:photo-items="photoItems"
+						title="订单照片"
+						:show-add="false"
+						:show-remove="false"
+						:show-viewer-actions="false"
+						v-entrance-transition="105"
+					/>
+				</div>
 			</t-cell-group>
-			<t-cell-group v-if="order.itemList?.length" title="订单明细" theme="card" v-entrance-transition="140">
+			<t-cell-group
+				v-if="order.itemList?.length"
+				class="product"
+				title="订单明细"
+				theme="card"
+				v-entrance-transition="140"
+			>
 				<t-cell
 					v-for="item in order.itemList"
 					:key="item.id"
-					:title="item.productNameSnapshot || '未命名产品'"
-					:description="getItemDescription(item)"
-					:note="formatPackageAmount(item.lineAmount)"
-				/>
-			</t-cell-group>
-			<sales-order-finance-panel :order="order" :can-read-fund="canReadFund" @fund="toFundRecords" @record="toFundDetail" />
-			<t-cell-group title="统一履约" theme="card" v-entrance-transition="210">
+					:title="getItemTitle(item)"
+				>
+					<template #description>
+						<div class="description">
+							<span>
+								<span>￥</span>
+								<strong class="red" v-text="formatPackageAmount(item.lineAmount)" />
+							</span>
+							<span>
+								<span>已履约</span>
+								<strong :class="getFulfilledQuantityClass(item)" v-text="getPackageQuantityText(item.fulfilledQuantity)" />
+							</span>
+							<span>
+								<span>剩余履约</span>
+								<strong :class="getRemainingQuantityClass(item)" v-text="getRemainingQuantityText(item)" />
+							</span>
+						</div>
+					</template>
+					<template #note>
+						<t-tag
+							:content="getItemFulfillmentStatus(item).text"
+							:theme="getItemFulfillmentStatus(item).theme"
+							variant="light-outline"
+						/>
+					</template>
+				</t-cell>
 				<t-cell title="履约记录" note="查看本单所有履约单" arrow @click="toFulfillmentList" />
-				<t-cell v-if="canCreateFulfillment && order.orderType === 'DIRECT_PRODUCT' && order.status === 'ACTIVE'" title="创建履约单" note="直接产品订单统一履约" arrow @click="toCreateFulfillment" />
+			</t-cell-group>
+			<t-button
+				v-if="canCreateFulfillment && canFulfillByPayment && order.orderType === 'DIRECT_PRODUCT' && order.status === 'ACTIVE'"
+				class="cell-button"
+				theme="primary"
+				content="履约产品"
+				@click="toCreateFulfillment"
+			/>
+			<t-cell-group class="finance-panel" title="资金摘要" theme="card">
+				<t-cell title="成交金额">
+					<template #note><span :class="getPaymentAmountClass(order.paymentStatus)" v-text="formatPackageAmount(order.saleAmount)" /></template>
+				</t-cell>
+				<t-cell title="已生效收款">
+					<template #note><span :class="getAmountClass(order.paidAmount, 'green')" v-text="formatPackageAmount(order.paidAmount)" /></template>
+				</t-cell>
+				<t-cell title="待核销收款">
+					<template #note><span :class="getAmountClass(order.pendingPaidAmount, 'orange')" v-text="formatPackageAmount(order.pendingPaidAmount)" /></template>
+				</t-cell>
+				<t-cell title="剩余待收款">
+					<template #note><span :class="getRemainingAmountClass(order.unpaidAmount)" v-text="formatPackageAmount(order.unpaidAmount)" /></template>
+				</t-cell>
+				<t-cell title="有效退款">
+					<template #note><span :class="getAmountClass(order.refundedAmount, 'red')" v-text="formatPackageAmount(order.refundedAmount)" /></template>
+				</t-cell>
+				<t-cell title="收款状态" :note="getSalesPaymentStatusText(order.paymentStatus)" />
+				<t-cell v-if="order.paymentStatus === 'PAID'" title="全额实收时间" :note="getPaidAtText(order.paidAt)" />
+				<t-cell title="退款状态" :note="getSalesRefundStatusText(order.refundStatus)" />
+				<t-cell v-if="canReadFund" title="查看全部资金流水" arrow @click="toFundRecords" />
 			</t-cell-group>
 			<section class="actions" v-entrance-transition="280">
-				<t-button v-if="canReceive" theme="primary" @click="toPayment">登记收款</t-button>
-				<t-button v-if="canRefund" theme="danger" variant="outline" @click="toRefund">登记退款</t-button>
-				<t-button v-if="canConfirmNoRefund" theme="default" variant="outline" @click="toNoRefund">确认无需退款</t-button>
-				<t-button v-if="canCancel" theme="danger" variant="outline" @click="toCancel">取消订单</t-button>
+				<t-button
+					v-if="canReceive"
+					theme="primary"
+					@click="toPayment"
+				>登记收款</t-button>
+				<t-button
+					v-if="canRefund"
+					theme="danger"
+					@click="toRefund"
+				>登记退款</t-button>
+				<t-button
+					v-if="canConfirmNoRefund"
+					theme="default"
+					@click="toNoRefund"
+				>确认无需退款</t-button>
+				<t-button
+					v-if="canCancel"
+					theme="danger"
+					@click="toCancel"
+				>取消订单</t-button>
 			</section>
 		</template>
 		<t-empty v-else :description="loading ? '正在加载订单' : '订单不存在'" />
@@ -49,16 +125,23 @@
 </template>
 
 <script setup lang="ts">
-import { Time } from "timi-web";
+import { PassTimeLabel, Text, Time } from "timi-web";
 import { useUserStore } from "timi-web-api";
 import SalesOrderAPI from "@/api/SalesOrderAPI";
 import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
-import SalesOrderFinancePanel from "@/pages/salesOrder/components/SalesOrderFinancePanel.vue";
+import PhotoScroller from "@/components/PhotoScroller.vue";
 import { useNavBarStore } from "@/store/navBarStore";
-import type { SalesOrder, SalesOrderItem } from "@/types/SalesOrder";
+import type { SalesOrder, SalesOrderItem, SalesPaymentStatus } from "@/types/SalesOrder";
+import type { PhotoItem } from "@/types/Photo";
 import { formatPackageAmount, getPackageQuantityText } from "@/utils/package";
+import { getAttachmentReadURL } from "@/utils/attachment";
 import { getErrorMessage } from "@/utils/error";
-import { getSalesOrderStatusText, getSalesOrderTypeText, getStatusTheme } from "@/utils/salesOrder";
+import {
+	getSalesOrderStatusText,
+	getSalesPaymentStatusText,
+	getSalesRefundStatusText,
+	getStatusTheme
+} from "@/utils/salesOrder";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 
@@ -71,53 +154,255 @@ const order = ref<SalesOrder>();
 const loading = ref(false);
 const canReadFund = computed(() => userStore.hasPermissions(permissionCodes.fundRecord.read));
 const canCreateFulfillment = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.create));
+const canOperateStock = computed(() => userStore.hasPermissions(permissionCodes.productStock.create));
 const canReceive = computed(() => !!order.value && order.value.status !== "CANCELLED" && order.value.paymentStatus !== "PAID" && userStore.hasPermissions(permissionCodes.fundReceive.create));
 const canRefund = computed(() => !!order.value && order.value.status === "CANCELLED" && order.value.refundStatus === "PENDING" && userStore.hasPermissions(permissionCodes.fund.refund));
 const canConfirmNoRefund = computed(() => !!order.value && order.value.status === "CANCELLED" && order.value.refundStatus === "PENDING" && userStore.hasPermissions(permissionCodes.fund.refund));
 const canCancel = computed(() => !!order.value && order.value.status === "ACTIVE" && userStore.hasPermissions(permissionCodes.salesOrder.cancel));
-function getItemDescription(item: SalesOrderItem): string {
+const canFulfillByPayment = computed(() => order.value?.paymentStatus === "PAID" || (order.value?.paymentStatus === "PARTIALLY_PAID" && canOperateStock.value));
+const photoItems = computed<PhotoItem[]>(() => (order.value?.attachmentList || [])
+	.filter(item => !!item.id)
+	.map(item => ({
+		attachment: item,
+		attachType: item.attachType || "PHOTO",
+		previewUrl: getAttachmentReadURL(item.id || ""),
+		url: getAttachmentReadURL(item.id || "", 90)
+	})));
+const photoURLList = computed(() => photoItems.value.map(item => item.url));
+
+function getPaidAtText(paidAt?: number | null): string {
+	return paidAt ? Time.toDateTime(paidAt) : "待后端回填";
+}
+
+function getPaymentAmountClass(status?: SalesPaymentStatus): "green" | "orange" | "red" | "gray" {
+	if (status === "PAID") return "green";
+	if (status === "PARTIALLY_PAID") return "orange";
+	if (status === "UNPAID") return "red";
+	return "gray";
+}
+
+function getAmountClass(amount?: number | null, activeClass: "green" | "orange" | "red" = "green"): "green" | "orange" | "red" | "gray" {
+	if (amount === undefined || amount === null || amount === 0) return "gray";
+	return activeClass;
+}
+
+function getRemainingAmountClass(amount?: number | null): "green" | "red" | "gray" {
+	if (amount === undefined || amount === null) return "gray";
+	return amount === 0 ? "green" : "red";
+}
+
+function getItemTitle(item: SalesOrderItem): string {
+	const productName = item.productNameSnapshot || "未命名产品";
+	const quantity = getPackageQuantityText(item.quantity);
+	const unit = item.unitSnapshot ? ` ${item.unitSnapshot}` : "";
+	return `${productName} ${quantity}${unit}`;
+}
+
+function getRemainingQuantity(item: SalesOrderItem): number {
 	const quantity = Number(item.quantity || 0);
 	const fulfilledQuantity = Number(item.fulfilledQuantity || 0);
-	const remainingQuantity = Math.max(0, quantity - fulfilledQuantity);
-	return `${getPackageQuantityText(item.quantity)} ${item.unitSnapshot || ""} · 已履约 ${getPackageQuantityText(item.fulfilledQuantity)} · 剩余待履约 ${getPackageQuantityText(remainingQuantity.toFixed(3))}`;
+	return Math.max(0, quantity - fulfilledQuantity);
+}
+
+function getRemainingQuantityText(item: SalesOrderItem): string {
+	return getPackageQuantityText(getRemainingQuantity(item).toFixed(3));
+}
+
+function getFulfilledQuantityClass(item: SalesOrderItem): "green" | "orange" {
+	const quantity = Number(item.quantity || 0);
+	const fulfilledQuantity = Number(item.fulfilledQuantity || 0);
+	return fulfilledQuantity < quantity ? "orange" : "green";
+}
+
+function getRemainingQuantityClass(item: SalesOrderItem): "green" | "orange" {
+	return getRemainingQuantity(item) === 0 ? "green" : "orange";
+}
+
+function getItemFulfillmentStatus(item: SalesOrderItem): { text: string; theme: "success" | "warning" | "danger" } {
+	const quantity = Number(item.quantity || 0);
+	const fulfilledQuantity = Number(item.fulfilledQuantity || 0);
+	if (0 < quantity && (fulfilledQuantity === quantity || quantity < fulfilledQuantity)) {
+		return { text: "已完成", theme: "success" };
+	}
+	if (0 < fulfilledQuantity) {
+		return { text: "部分履约", theme: "warning" };
+	}
+	return { text: "未履约", theme: "danger" };
 }
 
 async function loadData(): Promise<void> {
 	const id = String(route.params.id || "");
 	if (!id) return;
 	loading.value = true;
-	try { order.value = await SalesOrderAPI.detail(id); }
-	catch (error) { Message.error(getErrorMessage(error, "订单加载失败")); }
-	finally { loading.value = false; }
+	try {
+		order.value = await SalesOrderAPI.detail(id);
+	} catch (error) {
+		Message.error(getErrorMessage(error, "订单加载失败"));
+	} finally {
+		loading.value = false;
+	}
 }
-async function toEventRecord(): Promise<void> { if (order.value?.sourceEventRecord?.id) await router.push(`/management/registration-event-records/${order.value.sourceEventRecord.id}`); }
-async function toFundRecords(): Promise<void> { if (order.value?.id) await router.push({ path: "/management/fund-records", query: { salesOrderId: order.value.id } }); }
-async function toFundDetail(id: string): Promise<void> { await router.push(`/management/fund-records/${id}`); }
-async function toFulfillmentList(): Promise<void> { if (order.value?.id) await router.push({ path: "/management/order-fulfillments", query: { salesOrderId: order.value.id } }); }
-async function toCreateFulfillment(): Promise<void> { if (order.value?.id) await router.push({ path: "/management/order-fulfillments/create", query: { salesOrderId: order.value.id } }); }
-async function toPayment(): Promise<void> { if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}/payment`); }
-async function toRefund(): Promise<void> { if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}/refund`); }
-async function toNoRefund(): Promise<void> { if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}/no-refund`); }
-async function toCancel(): Promise<void> { if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}/cancel`); }
+
+async function toEventRecord(): Promise<void> {
+	if (order.value?.sourceEventRecord?.id) await router.push(`/management/registration-event-records/${order.value.sourceEventRecord.id}`);
+}
+
+async function toFundRecords(): Promise<void> {
+	if (order.value?.id) await router.push({
+		path: "/management/fund-records",
+		query: {
+			salesOrderId: order.value.id,
+			transitionDepth: String(getCurrentRouteDepth() + 1)
+		}
+	});
+}
+
+async function toFulfillmentList(): Promise<void> {
+	if (order.value?.id) await router.push({
+		path: "/management/order-fulfillments",
+		query: {
+			salesOrderId: order.value.id,
+			transitionDepth: String(getCurrentRouteDepth() + 1)
+		}
+	});
+}
+
+async function toCreateFulfillment(): Promise<void> {
+	if (order.value?.id) await router.push({
+		path: "/management/order-fulfillments/create",
+		query: { salesOrderId: order.value.id }
+	});
+}
+
+async function toPayment(): Promise<void> {
+	if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}/payment`);
+}
+
+async function toRefund(): Promise<void> {
+	if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}/refund`);
+}
+
+async function toNoRefund(): Promise<void> {
+	if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}/no-refund`);
+}
+
+async function toCancel(): Promise<void> {
+	if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}/cancel`);
+}
+
+function getCurrentRouteDepth(): number {
+	const transitionDepth = Array.isArray(route.query.transitionDepth)
+		? route.query.transitionDepth[0]
+		: route.query.transitionDepth;
+	const depth = Number(transitionDepth);
+	if (transitionDepth && Number.isInteger(depth) && 0 <= depth && depth <= 20) {
+		return depth;
+	}
+	return Number(route.meta.depth ?? 0);
+}
+
 onMounted(loadData);
 onUnmounted(() => navBarStore.clearRight());
 </script>
 
 <style scoped lang="less">
-.sales-order-detail { gap: 1rem; padding: calc(var(--app-nav-height) + 1rem) 0 2rem; display: flex; flex-direction: column;
-	.customer { margin: 0 1rem; }
-	.hero { margin: 0 1rem; padding: 1rem; background: linear-gradient(135deg, #fff7ed, #eff6ff); box-shadow: var(--td-shadow-1); border-radius: 1.25rem;
-		.eyebrow { color: #c2410c; display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; }
-		.hero-title { gap: .5rem; display: flex; margin-top: .35rem; align-items: center; justify-content: space-between; }
-		h1 { margin: 0; min-width: 0; font-size: 1.2rem; line-height: 1.35; }
-		.hero-meta { gap: .75rem; display: flex; margin-top: .6rem; color: var(--td-text-color-secondary); align-items: center; justify-content: space-between; }
-		strong { color: #c2410c; font-size: 1.2rem; white-space: nowrap; }
+.sales-order-detail {
+	gap: 1rem;
+	padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
+	display: flex;
+	flex-direction: column;
+
+	.customer {
+		margin: 0 1rem;
+	}
+
+	.hero {
+		margin: 0 1rem;
+		padding: 1rem;
+		background: linear-gradient(135deg, #fff7ed, #eff6ff);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1.25rem;
+
+		.header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.eyebrow {
+				color: #c2410c;
+				display: block;
+				font-weight: 700;
+				letter-spacing: .08em;
+			}
+		}
+
+		.no {
+			margin: 1rem 0;
+			min-width: 0;
+			font-size: 1.2rem;
+			line-height: 1.35;
+		}
+
+		.meta {
+			gap: .75rem;
+			display: flex;
+			margin-top: .6rem;
+			color: var(--td-text-color-secondary);
+			align-items: end;
+			justify-content: space-between;
+
+			.time {
+				font-size: .875rem;
+			}
+
+			.amount {
+
+				.value {
+					font-size: 1.5rem;
+				}
+			}
+		}
+	}
+
+	.info {
+
+		.photo-wrap {
+			padding: .75rem;
+		}
+	}
+
+	.product {
+
+		.description {
+			gap: .75rem;
+			display: flex;
+
+			> span {
+				gap: .25rem;
+				display: flex;
+			}
+		}
+	}
+
+	.actions {
+		--td-button-border-radius: 1rem;
+
+		gap: .5rem;
+		padding: 0 1rem;
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.actions .t-button {
+		flex: 1 1 8rem;
 	}
-	.actions { gap: .5rem; padding: 0 1rem; display: flex; flex-wrap: wrap; }
-	.actions .t-button { flex: 1 1 8rem; }
 }
 
-:global(html.theme-dark) .sales-order-detail .hero { background: linear-gradient(135deg, rgba(194, 65, 12, .2), rgba(37, 99, 235, .18));
-	.eyebrow, strong { color: #fdba74; }
+:global(html.theme-dark) .sales-order-detail .hero {
+	background: linear-gradient(135deg, rgba(194, 65, 12, .2), rgba(37, 99, 235, .18));
+
+	.eyebrow, strong {
+		color: #fdba74;
+	}
 }
 </style>
diff --git a/src/pages/salesOrder/SalesOrderList.vue b/src/pages/salesOrder/SalesOrderList.vue
index 32765a5..b4930df 100644
--- a/src/pages/salesOrder/SalesOrderList.vue
+++ b/src/pages/salesOrder/SalesOrderList.vue
@@ -43,6 +43,7 @@
 					:order="item"
 					:can-receive="canReceive"
 					:can-fulfill="canCreateFulfillment"
+					:can-operate-stock="canOperateStock"
 					v-entrance-transition="index * 30"
 					@click="toDetail(item)"
 					@receive="toPayment(item)"
@@ -77,6 +78,7 @@ const userStore = useUserStore();
 const canCreate = computed(() => userStore.hasPermissions(permissionCodes.salesOrder.create));
 const canReceive = computed(() => userStore.hasPermissions(permissionCodes.fundReceive.create));
 const canCreateFulfillment = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.create));
+const canOperateStock = computed(() => userStore.hasPermissions(permissionCodes.productStock.create));
 const actions = computed(() => canCreate.value ? [{
 	key: "create",
 	text: "直接产品下单",
diff --git a/src/pages/salesOrder/components/SalesOrderFinancePanel.vue b/src/pages/salesOrder/components/SalesOrderFinancePanel.vue
deleted file mode 100644
index 7e81b45..0000000
--- a/src/pages/salesOrder/components/SalesOrderFinancePanel.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-	<div class="finance-panel">
-		<t-cell-group title="资金摘要" theme="card">
-			<t-cell title="成交金额" :note="formatPackageAmount(props.order.saleAmount)" />
-			<t-cell title="已生效收款" :note="formatPackageAmount(props.order.paidAmount)" />
-			<t-cell title="待核销收款" :note="formatPackageAmount(props.order.pendingPaidAmount)" />
-			<t-cell title="剩余待收款" :note="formatPackageAmount(props.order.unpaidAmount)" />
-			<t-cell title="有效退款" :note="formatPackageAmount(props.order.refundedAmount)" />
-			<t-cell title="收款状态" :note="getSalesPaymentStatusText(props.order.paymentStatus)" />
-			<t-cell v-if="props.order.paymentStatus === 'PAID'" title="全额实收时间" :note="getPaidAtText(props.order.paidAt)" />
-			<t-cell title="退款状态" :note="getSalesRefundStatusText(props.order.refundStatus)" />
-			<t-cell v-if="props.canReadFund" title="查看全部资金流水" arrow @click="emit('fund')" />
-		</t-cell-group>
-		<t-cell-group title="本单资金操作" theme="card">
-			<t-cell
-				v-for="item in props.order.fundRecordList || []"
-				:key="item.id"
-				:title="getFundOperationText(item.operationType)"
-				:note="`${getFundStatusText(item.status)} · ${item.id || ''}`"
-				arrow
-				@click="item.id && emit('record', item.id)"
-			>
-				<template #note>
-					<span class="record-note">
-						<t-tag :content="getFundStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" />
-						<span class="amount" v-text="formatPackageAmount(item.amount)" />
-					</span>
-				</template>
-			</t-cell>
-			<t-cell v-if="!props.order.fundRecordList?.length" title="暂无资金流水" />
-		</t-cell-group>
-	</div>
-</template>
-
-<script setup lang="ts">
-import type { SalesOrder } from "@/types/SalesOrder";
-import { formatPackageAmount } from "@/utils/package";
-import { getFundOperationText, getFundStatusText, getSalesPaymentStatusText, getSalesRefundStatusText, getStatusTheme } from "@/utils/salesOrder";
-import { Time } from "timi-web";
-
-const props = defineProps<{ order: SalesOrder; canReadFund: boolean }>();
-const emit = defineEmits<{ fund: []; record: [id: string] }>();
-
-function getPaidAtText(paidAt?: number | null): string {
-	return paidAt ? Time.toDateTime(paidAt) : "待后端回填";
-}
-</script>
-
-<style scoped lang="less">
-.finance-panel { display: grid; gap: 1rem;
-	.record-note { gap: .5rem; display: flex; align-items: center; }
-	.amount { color: var(--td-brand-color); font-weight: 700; }
-}
-</style>
diff --git a/src/pages/salesOrder/components/SalesOrderListCell.vue b/src/pages/salesOrder/components/SalesOrderListCell.vue
index ca767d5..dee8dca 100644
--- a/src/pages/salesOrder/components/SalesOrderListCell.vue
+++ b/src/pages/salesOrder/components/SalesOrderListCell.vue
@@ -81,7 +81,7 @@
 </template>
 
 <script setup lang="ts">
-import { PassTimeLabel, Time } from "timi-web";
+import { PassTimeLabel } from "timi-web";
 import type { SalesOrder, SalesPaymentStatus } from "@/types/SalesOrder";
 import { getCustomerPhotoURL } from "@/utils/customer";
 import { formatPackageAmount, getPackageQuantityText } from "@/utils/package";
@@ -93,6 +93,7 @@ const props = defineProps<{
 	order: SalesOrder;
 	canReceive: boolean;
 	canFulfill: boolean;
+	canOperateStock: boolean;
 }>();
 const emit = defineEmits<{
 	click: [];
@@ -108,7 +109,8 @@ const totalProductQuantity = computed(() => sumProductQuantity("quantity"));
 const fulfilledProductQuantity = computed(() => sumProductQuantity("fulfilledQuantity"));
 const productSummaryText = computed(() => `共 ${itemList.value.length} 项 · 总数量 ${totalProductQuantity.value} · 已履约 ${fulfilledProductQuantity.value}`);
 const showReceiveAction = computed(() => props.canReceive && props.order.status !== "CANCELLED" && props.order.paymentStatus !== "PAID");
-const showFulfillAction = computed(() => props.canFulfill && props.order.orderType === "DIRECT_PRODUCT" && props.order.status === "ACTIVE");
+const canFulfillByPayment = computed(() => props.order.paymentStatus === "PAID" || (props.order.paymentStatus === "PARTIALLY_PAID" && props.canOperateStock));
+const showFulfillAction = computed(() => props.canFulfill && canFulfillByPayment.value && props.order.orderType === "DIRECT_PRODUCT" && props.order.status === "ACTIVE");
 const showActions = computed(() => showReceiveAction.value || showFulfillAction.value);
 
 function getPaymentStatusTheme(status?: SalesPaymentStatus): "success" | "warning" | "danger" | "default" {