add product

src/api/FulfillmentAPI.ts

@@ -0,0 +1,31 @@
+import { axios } from "timi-web-api";
+import { withCurrentStoreId } from "@/utils/store";
+import type { FulfillmentActionRequest, FulfillmentPage, FulfillmentPageResult, FulfillmentPrepareStockRequest, FulfillmentRevokeRequest, OrderFulfillment, OrderFulfillmentCreateRequest } from "@/types/Fulfillment";
+
+const URI = "/gao/order/fulfillment";
+async function list(page: FulfillmentPage): Promise<FulfillmentPageResult<OrderFulfillment>> {
+	return await axios.post(`${URI}/list`, withCurrentStoreId(page));
+}
+async function detail(id: string): Promise<OrderFulfillment> {
+	return await axios.post(`${URI}/detail`, undefined, { params: { id } });
+}
+async function create(request: OrderFulfillmentCreateRequest): Promise<OrderFulfillment> {
+	return await axios.post(`${URI}/create`, request);
+}
+async function prepareStock(request: FulfillmentPrepareStockRequest): Promise<OrderFulfillment> {
+	return await axios.post(`${URI}/prepare-stock`, request);
+}
+async function verify(request: FulfillmentActionRequest): Promise<OrderFulfillment> {
+	return await axios.post(`${URI}/verify`, request);
+}
+async function reject(request: FulfillmentActionRequest): Promise<OrderFulfillment> {
+	return await axios.post(`${URI}/reject`, request);
+}
+async function cancel(request: FulfillmentActionRequest): Promise<OrderFulfillment> {
+	return await axios.post(`${URI}/cancel`, request);
+}
+async function revoke(request: FulfillmentRevokeRequest): Promise<OrderFulfillment> {
+	return await axios.post(`${URI}/revoke`, request);
+}
+
+export default { list, detail, create, prepareStock, verify, reject, cancel, revoke };

src/api/PackageAPI.ts

@@ -1,190 +1,39 @@
 import { axios } from "timi-web-api";
-import { getCurrentStoreId } from "@/utils/store";
+import { getCurrentStoreId, withCurrentStoreId } from "@/utils/store";
-import type {
+import type { CustomerPackagePage, GaoCustomerPackage, GaoPackageConfig, PackageConfigPage, PackagePageResult, PackagePurchaseRequest } from "@/types/Package";
-	CustomerPackagePage,
-	DeliveryPage,
-	FundRecordPage,
-	GaoCustomerPackage,
-	GaoFundRecord,
-	GaoPackageConfig,
-	GaoPackageDelivery,
-	PackageConfigPage,
-	PackagePageResult,
-	PackagePaymentReceiveRequest,
-	PackagePurchaseRequest,
-	PackageDeliveryCreateRequest,
-	PackageAttachment
-} from "@/types/Package";
 
 const CONFIG_URI = "/gao/package/config";
 const CUSTOMER_PACKAGE_URI = "/gao/customer/package";
-const DELIVERY_URI = "/gao/package/delivery";
-const FUND_URI = "/gao/fund/record";
-
-function withStore<T extends { storeId?: string }>(request: T): T {
-	const storeId = request.storeId || getCurrentStoreId();
-	return storeId ? { ...request, storeId } : request;
-}
 
 async function configList(page: PackageConfigPage): Promise<PackagePageResult<GaoPackageConfig>> {
-	return await axios.post(`${CONFIG_URI}/list`, withStore(page));
+	return await axios.post(`${CONFIG_URI}/list`, withCurrentStoreId(page));
 }
-
 async function configListValid(storeId?: string): Promise<GaoPackageConfig[]> {
-	return await axios.post(`${CONFIG_URI}/list/valid`, undefined, {
+	return await axios.post(`${CONFIG_URI}/list/valid`, undefined, { params: { storeId: storeId || getCurrentStoreId() } });
-		params: { storeId: storeId || getCurrentStoreId() }
-	});
 }
-
 async function configDetail(id: string): Promise<GaoPackageConfig> {
 	return await axios.post(`${CONFIG_URI}/detail`, undefined, { params: { id } });
 }
-
 async function configCreate(config: GaoPackageConfig): Promise<string> {
-	return await axios.post(`${CONFIG_URI}/create`, withStore(config));
+	return await axios.post(`${CONFIG_URI}/create`, withCurrentStoreId(config));
 }
-
 async function configUpdate(config: GaoPackageConfig): Promise<void> {
-	await axios.post(`${CONFIG_URI}/update`, withStore(config));
+	await axios.post(`${CONFIG_URI}/update`, withCurrentStoreId(config));
 }
-
 async function configRemove(id: string): Promise<void> {
 	await axios.post(`${CONFIG_URI}/delete`, undefined, { params: { id } });
 }
-
 async function customerPackageList(page: CustomerPackagePage): Promise<PackagePageResult<GaoCustomerPackage>> {
-	return await axios.post(`${CUSTOMER_PACKAGE_URI}/list`, withStore(page));
+	return await axios.post(`${CUSTOMER_PACKAGE_URI}/list`, withCurrentStoreId(page));
 }
-
 async function customerPackageDetail(id: string): Promise<GaoCustomerPackage> {
 	return await axios.post(`${CUSTOMER_PACKAGE_URI}/detail`, undefined, { params: { id } });
 }
-
 async function purchase(request: PackagePurchaseRequest): Promise<GaoCustomerPackage> {
 	return await axios.post(`${CUSTOMER_PACKAGE_URI}/purchase`, request);
 }
-
 async function cancel(customerPackageId: string, reason: string): Promise<GaoCustomerPackage> {
 	return await axios.post(`${CUSTOMER_PACKAGE_URI}/cancel`, { customerPackageId, reason });
 }
 
-async function receivePayment(request: PackagePaymentReceiveRequest): Promise<GaoCustomerPackage> {
+export default { configList, configListValid, configDetail, configCreate, configUpdate, configRemove, customerPackageList, customerPackageDetail, purchase, cancel };
-	return await axios.post(`${CUSTOMER_PACKAGE_URI}/payment/receive`, request);
-}
-
-async function verifyPayment(fundRecordId: string): Promise<GaoCustomerPackage> {
-	return await axios.post(`${CUSTOMER_PACKAGE_URI}/payment/verify`, undefined, { params: { id: fundRecordId } });
-}
-
-async function rejectPayment(fundRecordId: string, reason: string): Promise<GaoCustomerPackage> {
-	return await axios.post(`${CUSTOMER_PACKAGE_URI}/payment/reject`, { fundRecordId, reason });
-}
-
-async function cancelPayment(fundRecordId: string, reason: string): Promise<GaoCustomerPackage> {
-	return await axios.post(`${CUSTOMER_PACKAGE_URI}/payment/cancel`, { fundRecordId, reason });
-}
-
-async function refund(request: {
-	requestNo: string;
-	customerPackageId: string;
-	amount: number;
-	occurredAt?: number;
-	reason: string;
-	attachmentList: PackageAttachment[];
-	remark?: string | null;
-}): Promise<GaoCustomerPackage> {
-	return await axios.post(`${CUSTOMER_PACKAGE_URI}/refund`, request);
-}
-
-async function confirmNoRefund(request: {
-	requestNo: string;
-	customerPackageId: string;
-	occurredAt?: number;
-	reason: string;
-	remark?: string | null;
-}): Promise<GaoCustomerPackage> {
-	return await axios.post(`${CUSTOMER_PACKAGE_URI}/refund/confirm-none`, request);
-}
-
-async function deliveryList(page: DeliveryPage): Promise<PackagePageResult<GaoPackageDelivery>> {
-	return await axios.post(`${DELIVERY_URI}/list`, withStore(page));
-}
-
-async function deliveryDetail(id: string): Promise<GaoPackageDelivery> {
-	return await axios.post(`${DELIVERY_URI}/detail`, undefined, { params: { id } });
-}
-
-async function createDelivery(request: PackageDeliveryCreateRequest): Promise<GaoPackageDelivery> {
-	return await axios.post(`${DELIVERY_URI}/create`, request);
-}
-
-async function verifyDelivery(id: string): Promise<GaoPackageDelivery> {
-	return await axios.post(`${DELIVERY_URI}/verify`, undefined, { params: { id } });
-}
-
-async function rejectDelivery(deliveryId: string, reason: string): Promise<GaoPackageDelivery> {
-	return await axios.post(`${DELIVERY_URI}/reject`, { deliveryId, reason });
-}
-
-async function cancelDelivery(deliveryId: string, reason: string): Promise<GaoPackageDelivery> {
-	return await axios.post(`${DELIVERY_URI}/cancel`, { deliveryId, reason });
-}
-
-async function revokeDelivery(request: {
-	requestNo: string;
-	deliveryId: string;
-	deliveredAt?: number;
-	reason: string;
-	attachmentList: PackageAttachment[];
-	remark?: string | null;
-}): Promise<GaoPackageDelivery> {
-	return await axios.post(`${DELIVERY_URI}/revoke`, request);
-}
-
-async function fundRecordList(page: FundRecordPage): Promise<PackagePageResult<GaoFundRecord>> {
-	return await axios.post(`${FUND_URI}/list`, withStore(page));
-}
-
-async function fundRecordDetail(id: string): Promise<GaoFundRecord> {
-	return await axios.post(`${FUND_URI}/detail`, undefined, { params: { id } });
-}
-
-async function revokeFundRecord(request: {
-	requestNo: string;
-	fundRecordId: string;
-	occurredAt?: number;
-	reason: string;
-	attachmentList: PackageAttachment[];
-	remark?: string | null;
-}): Promise<GaoFundRecord> {
-	return await axios.post(`${FUND_URI}/revoke`, request);
-}
-
-export default {
-	configList,
-	configListValid,
-	configDetail,
-	configCreate,
-	configUpdate,
-	configRemove,
-	customerPackageList,
-	customerPackageDetail,
-	purchase,
-	cancel,
-	receivePayment,
-	verifyPayment,
-	rejectPayment,
-	cancelPayment,
-	refund,
-	confirmNoRefund,
-	deliveryList,
-	deliveryDetail,
-	createDelivery,
-	verifyDelivery,
-	rejectDelivery,
-	cancelDelivery,
-	revokeDelivery,
-	fundRecordList,
-	fundRecordDetail,
-	revokeFundRecord
-};

src/api/ProductAPI.ts

@@ -0,0 +1,106 @@
+import { axios } from "timi-web-api";
+import type { Product, ProductCategory, ProductCategoryPage, ProductPage, ProductPageResult, ProductStock, ProductStockChangeRequest, ProductStockPage, StockRecord, StockRecordPage } from "@/types/Product";
+import { getCurrentStoreId, withCurrentStoreId } from "@/utils/store";
+
+const PRODUCT_URI = "/gao/product";
+const STOCK_URI = "/gao/product/stock";
+
+async function categoryList(page: ProductCategoryPage): Promise<ProductPageResult<ProductCategory>> {
+	return await axios.post(`${PRODUCT_URI}/category/list`, withCurrentStoreId(page));
+}
+
+async function categoryCreate(category: ProductCategory): Promise<string> {
+	return await axios.post(`${PRODUCT_URI}/category/create`, withCurrentStoreId(category));
+}
+
+async function categoryUpdate(category: ProductCategory): Promise<void> {
+	await axios.post(`${PRODUCT_URI}/category/update`, withCurrentStoreId(category));
+}
+
+async function categorySort(idList: string[]): Promise<void> {
+	return await axios.post(`${PRODUCT_URI}/category/sort`, idList);
+}
+
+async function categoryDisable(id: string): Promise<void> {
+	await axios.post(`${PRODUCT_URI}/category/disable`, undefined, { params: { id } });
+}
+
+async function list(page: ProductPage): Promise<ProductPageResult<Product>> {
+	return await axios.post(`${PRODUCT_URI}/list`, withCurrentStoreId(page));
+}
+
+async function detail(id: string): Promise<Product> {
+	return await axios.post(`${PRODUCT_URI}/detail`, undefined, { params: { id } });
+}
+
+async function create(product: Product): Promise<string> {
+	return await axios.post(`${PRODUCT_URI}/create`, withCurrentStoreId(product));
+}
+
+async function update(product: Product): Promise<void> {
+	await axios.post(`${PRODUCT_URI}/update`, withCurrentStoreId(product));
+}
+
+async function disable(id: string): Promise<void> {
+	await axios.post(`${PRODUCT_URI}/disable`, undefined, { params: { id } });
+}
+
+async function sellableList(page: ProductPage): Promise<Product[]> {
+	return await axios.post(`${PRODUCT_URI}/sellable/list`, withCurrentStoreId(page));
+}
+
+async function stockList(page: ProductStockPage): Promise<ProductPageResult<ProductStock>> {
+	return await axios.post(`${STOCK_URI}/list`, withCurrentStoreId(page));
+}
+
+async function stockDetail(productId: string, storeId?: string): Promise<ProductStock> {
+	return await axios.post(`${STOCK_URI}/detail`, undefined, {
+		params: { productId, storeId: storeId || getCurrentStoreId() }
+	});
+}
+
+async function initialIn(request: ProductStockChangeRequest): Promise<ProductStock> {
+	return await axios.post(`${STOCK_URI}/initial-in`, withCurrentStoreId(request));
+}
+
+async function manualIn(request: ProductStockChangeRequest): Promise<ProductStock> {
+	return await axios.post(`${STOCK_URI}/manual-in`, withCurrentStoreId(request));
+}
+
+async function manualOut(request: ProductStockChangeRequest): Promise<ProductStock> {
+	return await axios.post(`${STOCK_URI}/manual-out`, withCurrentStoreId(request));
+}
+
+async function stocktakeGain(request: ProductStockChangeRequest): Promise<ProductStock> {
+	return await axios.post(`${STOCK_URI}/stocktake-gain`, withCurrentStoreId(request));
+}
+
+async function stocktakeLoss(request: ProductStockChangeRequest): Promise<ProductStock> {
+	return await axios.post(`${STOCK_URI}/stocktake-loss`, withCurrentStoreId(request));
+}
+
+async function recordList(page: StockRecordPage): Promise<ProductPageResult<StockRecord>> {
+	return await axios.post(`${STOCK_URI}/record/list`, withCurrentStoreId(page));
+}
+
+export default {
+	categoryList,
+	categoryCreate,
+	categoryUpdate,
+	categorySort,
+	categoryDisable,
+	list,
+	detail,
+	create,
+	update,
+	disable,
+	sellableList,
+	stockList,
+	stockDetail,
+	initialIn,
+	manualIn,
+	manualOut,
+	stocktakeGain,
+	stocktakeLoss,
+	recordList
+};

src/api/SalesOrderAPI.ts

@@ -0,0 +1,64 @@
+import { axios } from "timi-web-api";
+import { withCurrentStoreId } from "@/utils/store";
+import type {
+	DirectProductOrderCreateRequest,
+	FundRecord,
+	FundRecordPage,
+	OrderPaymentActionRequest,
+	OrderPaymentNoRefundRequest,
+	OrderPaymentReceiveRequest,
+	OrderPaymentRefundRequest,
+	OrderPaymentRevokeRequest,
+	SalesOrder,
+	SalesOrderCancelRequest,
+	SalesOrderPage,
+	SalesOrderPageResult
+} from "@/types/SalesOrder";
+
+const ORDER_URI = "/gao/sales/order";
+const FUND_URI = "/gao/fund/record";
+
+async function list(page: SalesOrderPage): Promise<SalesOrderPageResult<SalesOrder>> {
+	return await axios.post(`${ORDER_URI}/list`, withCurrentStoreId(page));
+}
+async function detail(id: string): Promise<SalesOrder> {
+	return await axios.post(`${ORDER_URI}/detail`, undefined, { params: { id } });
+}
+async function createDirectProduct(request: DirectProductOrderCreateRequest): Promise<SalesOrder> {
+	return await axios.post(`${ORDER_URI}/direct-product/create`, request);
+}
+async function cancel(request: SalesOrderCancelRequest): Promise<SalesOrder> {
+	return await axios.post(`${ORDER_URI}/cancel`, request);
+}
+async function receivePayment(request: OrderPaymentReceiveRequest): Promise<FundRecord> {
+	return await axios.post(`${ORDER_URI}/payment/receive`, request);
+}
+async function verifyPayment(id: string): Promise<FundRecord> {
+	return await axios.post(`${ORDER_URI}/payment/verify`, undefined, { params: { id } });
+}
+async function rejectPayment(request: OrderPaymentActionRequest): Promise<FundRecord> {
+	return await axios.post(`${ORDER_URI}/payment/reject`, request);
+}
+async function cancelPayment(request: OrderPaymentActionRequest): Promise<FundRecord> {
+	return await axios.post(`${ORDER_URI}/payment/cancel`, request);
+}
+async function refund(request: OrderPaymentRefundRequest): Promise<FundRecord> {
+	return await axios.post(`${ORDER_URI}/refund`, request);
+}
+async function confirmNoRefund(request: OrderPaymentNoRefundRequest): Promise<FundRecord> {
+	return await axios.post(`${ORDER_URI}/refund/confirm-none`, request);
+}
+async function revokeFund(request: OrderPaymentRevokeRequest): Promise<FundRecord> {
+	return await axios.post(`${ORDER_URI}/fund/revoke`, request);
+}
+async function fundRecordList(page: FundRecordPage): Promise<SalesOrderPageResult<FundRecord>> {
+	return await axios.post(`${FUND_URI}/list`, withCurrentStoreId(page));
+}
+async function fundRecordDetail(id: string): Promise<FundRecord> {
+	return await axios.post(`${FUND_URI}/detail`, undefined, { params: { id } });
+}
+async function fundRecordRevoke(request: OrderPaymentRevokeRequest): Promise<FundRecord> {
+	return await axios.post(`${FUND_URI}/revoke`, request);
+}
+
+export default { list, detail, createDirectProduct, cancel, receivePayment, verifyPayment, rejectPayment, cancelPayment, refund, confirmNoRefund, revokeFund, fundRecordList, fundRecordDetail, fundRecordRevoke };

src/api/StoreAPI.ts

@@ -1,5 +1,6 @@
 import { axios } from "timi-web-api";
 import type { Page, PageResult } from "timi-web-api";
+import type { EventItem } from "@/types/EventItem";
 import type { Store, StoreBusinessDay } from "@/types/Store";
 
 const STORE_BASE_URI = "/gao/store";
@@ -15,6 +16,12 @@ async function detail(id: string): Promise<Store> {
 	});
 }
 
+async function directProductSaleEventList(storeId: string): Promise<EventItem[]> {
+	return await axios.post(`${STORE_BASE_URI}/direct-product-sale-event/list`, undefined, {
+		params: { storeId }
+	});
+}
+
 async function loginStore(): Promise<Store | undefined> {
 	return await axios.post(`${STORE_BASE_URI}/user`);
 }
@@ -80,6 +87,7 @@ async function removeBusinessDay(id: string): Promise<void> {
 export default {
 	list,
 	detail,
+	directProductSaleEventList,
 	loginStore,
 	create,
 	update,

src/assets/styles/global.less

@@ -59,6 +59,10 @@ html.theme-dark body {
 	line-height: 1.5;
 }
 
+.empty-cell-title-margin {
+	--td-spacer-2: .25rem;
+}
+
 .t-input--password {
 	letter-spacing: 0;
 }

src/components/CustomerSelector.vue

@@ -239,7 +239,7 @@ onUnmounted(() => {
 		box-shadow: 0 4px 4px rgba(0, 0, 0, .05);
 
 		.search {
-			--td-input-vertical-padding: 8px;
+			--td-input-vertical-padding: 8px 14px;
 
 			flex: 0;
 			margin: 0 1rem;

src/components/NavBarActionMenu.vue

@@ -4,6 +4,7 @@
 			<t-popover
 				v-model:visible="actionVisible"
 				placement="bottom-right"
+				:show-arrow="false"
 				theme="light"
 			>
 				<t-button

src/components/ProductSelector.vue

@@ -0,0 +1,166 @@
+<template>
+	<div class="product-selector">
+		<t-form-item :label="props.label" :required-mark="props.requiredMark" arrow @click="open">
+			<span class="picker-text" v-text="selectedText || props.placeholder" />
+		</t-form-item>
+		<t-popup v-model="visible" placement="bottom" :style="{height: '80vh'}">
+			<div class="popup">
+				<div class="header">
+					<t-button variant="text" size="small" @click="visible = false">取消</t-button>
+					<strong>选择产品单位</strong>
+					<t-button theme="primary" variant="text" size="small" @click="confirm">确定</t-button>
+				</div>
+				<t-input v-model.trim="keyword" class="search" borderless clearable placeholder="搜索产品名称或编码" />
+				<div class="list">
+					<t-cell-group v-if="filteredProductList.length" theme="card">
+						<t-cell v-for="product in filteredProductList" :key="product.id" class="product" :title="product.name" :description="`${product.code || '-'} · ${product.baseUnit || '-'}`">
+							<template #rightIcon>
+								<div class="units">
+									<t-button
+										v-for="unit in getSaleableUnits(product)"
+										:key="unit.id"
+										:theme="isSelected(product, unit) ? 'primary' : 'default'"
+										:variant="isSelected(product, unit) ? 'base' : 'outline'"
+										size="small"
+										@click.stop="select(product, unit)"
+									>
+										<span class="unit-name" v-text="unit.name" />
+										<span v-if="unit.salePrice !== undefined && unit.salePrice !== null" class="unit-price" v-text="formatProductAmount(unit.salePrice)" />
+									</t-button>
+								</div>
+							</template>
+						</t-cell>
+					</t-cell-group>
+					<div v-else class="empty" v-text="loading ? '正在加载可售产品' : '暂无可售产品'" />
+				</div>
+			</div>
+		</t-popup>
+	</div>
+</template>
+
+<script setup lang="ts">
+import ProductAPI from "@/api/ProductAPI";
+import type { Product, ProductUnit } from "@/types/Product";
+import { getErrorMessage } from "@/utils/error";
+import { Message } from "@/utils/message";
+import { formatProductAmount } from "@/utils/product";
+
+interface Props {
+	modelValue: { productId: string; productUnitId: string } | undefined;
+	label?: string;
+	requiredMark?: boolean;
+	placeholder?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), { label: "产品", requiredMark: false, placeholder: "请选择产品单位" });
+const emit = defineEmits<{ "update:modelValue": [value: Props["modelValue"]] }>();
+const visible = ref(false);
+const loading = ref(false);
+const keyword = ref("");
+const productList = ref<Product[]>([]);
+const draft = ref<Props["modelValue"]>();
+const selectedText = computed(() => {
+	if (!props.modelValue) {
+		return "";
+	}
+	const product = productList.value.find(item => item.id === props.modelValue?.productId);
+	const unit = product ? product.unitList?.find(item => item.id === props.modelValue?.productUnitId) : undefined;
+	return product && unit ? `${product.name} · ${unit.name}` : "已选择产品单位";
+});
+const filteredProductList = computed(() => {
+	const text = keyword.value.toLocaleLowerCase();
+	return productList.value.filter(item => !text || `${item.name}${item.code}`.toLocaleLowerCase().includes(text));
+});
+
+async function open(): Promise<void> {
+	visible.value = true;
+	draft.value = props.modelValue ? { ...props.modelValue } : undefined;
+	if (productList.value.length) {
+		return;
+	}
+	loading.value = true;
+	try {
+		productList.value = await ProductAPI.sellableList({ index: 0, size: 1000 });
+	} catch (error) {
+		Message.error(getErrorMessage(error, "可售产品加载失败"));
+	} finally {
+		loading.value = false;
+	}
+}
+
+function getSaleableUnits(product: Product): ProductUnit[] {
+	return (product.unitList || []).filter(item => item.allowSale !== false && item.id);
+}
+function isSelected(product: Product, unit: ProductUnit): boolean {
+	return draft.value?.productId === product.id && draft.value?.productUnitId === unit.id;
+}
+function select(product: Product, unit: ProductUnit): void {
+	if (product.id && unit.id) {
+		draft.value = { productId: product.id, productUnitId: unit.id };
+	}
+}
+function confirm(): void {
+	if (draft.value) {
+		emit("update:modelValue", draft.value);
+		visible.value = false;
+	}
+}
+</script>
+
+<style scoped lang="less">
+.product-selector {
+	.picker-text {
+		color: var(--td-text-color-primary);
+	}
+
+	.popup {
+		height: 100%;
+		padding: 1rem 0;
+		display: flex;
+		flex-direction: column;
+
+		.header {
+			display: flex;
+			padding: 0 1rem .75rem;
+			align-items: center;
+			justify-content: space-between;
+		}
+
+		.search {
+			margin: 0 1rem .75rem;
+			border: 1px solid var(--td-component-border);
+			border-radius: 1rem;
+		}
+
+		.list {
+			flex: 1;
+			overflow: auto;
+		}
+
+		.product {
+			.units {
+				gap: .35rem;
+				display: flex;
+				flex-wrap: wrap;
+					justify-content: flex-end;
+
+					.t-button {
+						gap: .125rem;
+						display: flex;
+						flex-direction: column;
+					}
+
+					.unit-price {
+						font-size: .6875rem;
+					}
+				}
+		}
+
+		.empty {
+			color: var(--td-text-color-secondary);
+			padding: 2rem 1rem;
+			text-align: center;
+		}
+	}
+}
+</style>

src/layout/MainLayout.vue

@@ -12,10 +12,16 @@
 			theme="tag"
 			:split="false"
 			:z-index="999"
+			:bordered="false"
 			:disabled="!tabBarStore.isShowing"
 			@change="onChangeTab"
 		>
-			<t-tab-bar-item v-for="item in list" :key="item.value" class="bg-transparent" :value="item.value">
+			<t-tab-bar-item
+				v-for="item in list"
+				:key="item.value"
+				class="item bg-transparent"
+				:value="item.value"
+			>
 				<span v-text="item.text"></span>
 				<template #icon>
 					<t-icon :name="item.icon" />
@@ -175,6 +181,11 @@ const tabBarHeight = computed(() => {
 			pointer-events: none;
 			transform: translateY(calc(100% + 1rem));
 		}
+
+		.item {
+			margin: 4px 0;
+			padding: 0 4px;
+		}
 	}
 }
 </style>

src/pages/event/EventRecordEdit.vue

@@ -274,6 +274,9 @@ const customerDisplayText = computed(() => {
 
 async function handleCustomerChange(value: string | string[]): Promise<void> {
 	selectedCustomerIdList.value = Array.isArray(value) ? value : [value];
+	if (isPackagePurchaseSelected.value) {
+		resetPackageRequestNo();
+	}
 	await loadSelectedCustomerList();
 	await loadRecentRecordList();
 }
@@ -601,6 +604,7 @@ const {
 	handleEventSelectionChange,
 	applySelectedPackageEvent,
 	resetPackagePurchaseForm,
+	resetPackageRequestNo,
 	submitPackagePurchase,
 	validatePackagePurchaseForm
 } = usePackagePurchaseRecord({
@@ -635,8 +639,9 @@ async function submitRecord(): Promise<void> {
 			return;
 		}
 
+		const packageResult = isPackagePurchaseSelected.value ? await submitPackagePurchase() : undefined;
 		const success = isPackagePurchaseSelected.value
-			? await submitPackagePurchase()
+			? !!packageResult?.id
 			: await submitEventRecords();
 		if (!success) {
 			return;
@@ -645,6 +650,10 @@ async function submitRecord(): Promise<void> {
 		await loadRecentRecordList();
 		await settingStore.playRegisterSuccessSound();
 		Message.success(isPackagePurchaseSelected.value ? "套餐购买已提交" : "登记已提交");
+		if (packageResult?.id) {
+			await router.replace(`/management/customer-packages/${packageResult.id}`);
+			return;
+		}
 		await router.replace("/customers");
 	} finally {
 		isSaving.value = false;

src/pages/event/EventRecordList.vue

@@ -718,7 +718,7 @@ onUnmounted(() => {
 		flex-direction: column;
 
 		.search-input {
-			--td-input-vertical-padding: 8px;
+			--td-input-vertical-padding: 8px 14px;
 
 			border: 1px solid rgba(148, 163, 184, .28);
 			z-index: 1;

src/pages/event/component/PackagePurchaseForm.vue

@@ -29,9 +29,9 @@
 				</div>
 				<t-form-item
 					v-for="(item, index) in itemList"
-					:key="`${index}-${item.productName}-${item.unit}`"
+					:key="`${index}-${item.productId}-${item.productUnitId}`"
 					class="item"
-					:label="item.productName"
+					:label="getItemLabel(item)"
 				>
 					<t-input
 						:model-value="item.totalQuantity"
@@ -43,7 +43,7 @@
 						@update:model-value="updateItemQuantity(index, $event)"
 					>
 						<template #suffix-icon>
-							<span class="unit" v-text="item.unit" />
+							<span class="unit" v-text="getItemUnit(item)" />
 						</template>
 					</t-input>
 				</t-form-item>
@@ -68,6 +68,15 @@ const props = defineProps<Props>();
 const saleAmount = defineModel<string>("saleAmount", { required: true });
 const itemList = defineModel<PackagePurchaseItem[]>("itemList", { required: true });
 
+function getItemLabel(item: PackagePurchaseItem): string {
+	const configItem = props.packageConfig?.itemList?.find(config => config.productId === item.productId && config.productUnitId === item.productUnitId);
+	return configItem ? `${configItem.productNameSnapshot || "未命名产品"} · ${configItem.unitSnapshot || "未设置单位"}` : "产品权益";
+}
+
+function getItemUnit(item: PackagePurchaseItem): string {
+	return props.packageConfig?.itemList?.find(config => config.productId === item.productId && config.productUnitId === item.productUnitId)?.unitSnapshot || "";
+}
+
 function updateItemQuantity(index: number, value: string | number): void {
 	itemList.value = itemList.value.map((item, itemIndex) => itemIndex === index ? {
 		...item,

src/pages/event/component/usePackagePurchaseRecord.ts

@@ -2,7 +2,7 @@ import { computed, ref, type Ref } from "vue";
 import PackageAPI from "@/api/PackageAPI";
 import type { Customer } from "@/types/Customer";
 import type { EventItem } from "@/types/EventItem";
-import type { PackagePurchaseItem } from "@/types/Package";
+import type { GaoCustomerPackage, PackagePurchaseItem } from "@/types/Package";
 import { isPackagePurchaseEvent } from "@/utils/event";
 import { createPackageRequestNo, formatPackageAmountInput, normalizePackageQuantity, parsePackageAmount } from "@/utils/package";
 import { permissionCodes } from "@/utils/permission";
@@ -37,6 +37,7 @@ export function usePackagePurchaseRecord(options: UsePackagePurchaseRecordOption
 	const canPriceOverride = computed(() => options.hasPermission(permissionCodes.customerPackage.priceOverride));
 	const saleAmountText = ref("");
 	const packagePurchaseItemList = ref<PackagePurchaseItem[]>([]);
+	const packageRequestNo = ref("");
 
 	function handleEventSelectionChange(eventIdList: string[]): void {
 		const packageEvent = eventIdList
@@ -65,8 +66,8 @@ export function usePackagePurchaseRecord(options: UsePackagePurchaseRecordOption
 
 		saleAmountText.value = formatPackageAmountInput(config.standardAmount);
 		packagePurchaseItemList.value = (config.itemList || []).map((item, index) => ({
-			productName: item.productName,
+			productId: item.productId,
-			unit: item.unit,
+			productUnitId: item.productUnitId,
 			totalQuantity: normalizePackageQuantity(item.defaultQuantity) || "",
 			sort: item.sort ?? index,
 			remark: item.remark ?? null
@@ -76,25 +77,33 @@ export function usePackagePurchaseRecord(options: UsePackagePurchaseRecordOption
 	function resetPackagePurchaseForm(): void {
 		saleAmountText.value = "";
 		packagePurchaseItemList.value = [];
+		packageRequestNo.value = "";
 	}
 
-	async function submitPackagePurchase(): Promise<boolean> {
+	function resetPackageRequestNo(): void {
+		packageRequestNo.value = "";
+	}
+
+	async function submitPackagePurchase(): Promise<GaoCustomerPackage | undefined> {
 		const eventId = selectedPackageEvent.value?.id;
 		const customerId = options.selectedCustomerList.value[0]?.id;
 		const saleAmount = parsePackageAmount(saleAmountText.value);
 		if (!eventId || !customerId || saleAmount === undefined) {
-			return false;
+			return undefined;
 		}
 
-		await PackageAPI.purchase({
+		if (!packageRequestNo.value) {
-			requestNo: createPackageRequestNo(),
+			packageRequestNo.value = createPackageRequestNo();
+		}
+		const result = await PackageAPI.purchase({
+			requestNo: packageRequestNo.value,
 			eventId,
 			customerId,
 			saleAmount,
 			purchasedAt: options.buildRegisteredAt(),
 			itemList: packagePurchaseItemList.value.map((item, index) => ({
-				productName: item.productName.trim(),
+				productId: item.productId,
-				unit: item.unit.trim(),
+				productUnitId: item.productUnitId,
 				totalQuantity: normalizePackageQuantity(item.totalQuantity)!,
 				sort: item.sort ?? index,
 				remark: item.remark ?? null
@@ -105,7 +114,7 @@ export function usePackagePurchaseRecord(options: UsePackagePurchaseRecordOption
 			})),
 			remark: options.note.value.trim() || null
 		});
-		return true;
+		return result;
 	}
 
 	function validatePackagePurchaseForm(): boolean {
@@ -135,8 +144,8 @@ export function usePackagePurchaseRecord(options: UsePackagePurchaseRecordOption
 		}
 		for (const item of packagePurchaseItemList.value) {
 			const quantity = normalizePackageQuantity(item.totalQuantity);
-			if (!item.productName.trim() || !item.unit.trim() || !quantity || quantity === "0") {
+			if (!item.productId || !item.productUnitId || !quantity || quantity === "0") {
-				Message.warning("产品名称、单位和正数量不能为空");
+				Message.warning("产品单位和正数量不能为空");
 				return false;
 			}
 		}
@@ -159,6 +168,7 @@ export function usePackagePurchaseRecord(options: UsePackagePurchaseRecordOption
 		handleEventSelectionChange,
 		applySelectedPackageEvent,
 		resetPackagePurchaseForm,
+		resetPackageRequestNo,
 		submitPackagePurchase,
 		validatePackagePurchaseForm
 	};

src/pages/fulfillment/OrderFulfillmentCreate.vue

@@ -0,0 +1,167 @@
+<template>
+	<div v-can="permissionCodes.orderFulfillment.create" class="fulfillment-create">
+		<t-cell-group title="履约来源" theme="card">
+			<t-cell title="销售订单" :note="order?.orderNo || order?.id || '请选择直接产品订单'" arrow @click="openOrderPicker" />
+			<t-cell title="客户" :note="order?.customer?.name || order?.customerId || '未选择'" />
+			<t-cell title="来源类型" :note="isPackage ? '套餐权益' : '直接产品'" />
+		</t-cell-group>
+		<t-cell-group v-if="sourceItems.length" title="本次履约明细" theme="card">
+			<t-cell v-for="item in sourceItems" :key="item.id" class="item">
+				<template #title><strong v-text="getItemTitle(item)" /></template>
+				<template #description><span v-text="getItemDescription(item)" /></template>
+				<template #note><t-input v-model.trim="quantityMap[item.id || '']" class="quantity" type="number" borderless align="right" placeholder="数量" /></template>
+			</t-cell>
+		</t-cell-group>
+		<div v-else class="empty" v-text="order ? '该订单暂无可履约明细，请从客户套餐或订单详情进入' : '请先选择销售订单'" />
+		<t-form class="form" label-align="left" label-width="6rem">
+			<t-form-item label="履约时间" content-align="right"><t-button theme="primary" variant="outline" size="small" :content="deliveredAtText || '此刻'" @click="pickerVisible = true" /></t-form-item>
+			<t-form-item label="备注"><t-textarea v-model.trim="remark" borderless autosize maxlength="500" /></t-form-item>
+		</t-form>
+		<package-photo-field v-if="order" v-model="photoItems" required title="履约凭证照片" />
+		<t-popup v-model="pickerVisible" placement="bottom">
+			<t-date-time-picker v-model="draftTime" format="YYYY-MM-DD HH:mm" :mode="['date', 'minute']" title="履约时间" @cancel="pickerVisible = false" @confirm="confirmTime" />
+		</t-popup>
+		<t-popup v-model="orderPickerVisible" placement="bottom" :style="{height: '75vh'}">
+			<div class="order-picker">
+				<div class="picker-title" v-text="'选择进行中的直接产品订单'" />
+				<t-cell-group v-if="orderOptions.length" theme="card">
+					<t-cell
+						v-for="item in orderOptions"
+						:key="item.id"
+						:title="item.orderNo || item.id"
+						:description="item.customer?.name || item.customerId || '未知客户'"
+						:note="formatPackageAmount(item.saleAmount)"
+						arrow
+						@click="selectOrder(item)"
+					/>
+				</t-cell-group>
+				<div v-else class="empty" v-text="orderLoading ? '正在加载订单' : '暂无可履约的直接产品订单'" />
+			</div>
+		</t-popup>
+	</div>
+</template>
+
+<script setup lang="ts">
+import PackageAPI from "@/api/PackageAPI";
+import SalesOrderAPI from "@/api/SalesOrderAPI";
+import FulfillmentAPI from "@/api/FulfillmentAPI";
+import PackagePhotoField from "@/components/PackagePhotoField.vue";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { CustomerPackageItem, GaoCustomerPackage } from "@/types/Package";
+import type { OrderFulfillmentItemRequest } from "@/types/Fulfillment";
+import type { SalesOrder, SalesOrderItem } from "@/types/SalesOrder";
+import type { PhotoItem } from "@/types/Photo";
+import type { Attachment } from "timi-web-api";
+import { createPackageRequestNo, formatPackageAmount, getPackageQuantityText, normalizePackageQuantity } from "@/utils/package";
+import { getErrorMessage } from "@/utils/error";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+
+type SourceItem = SalesOrderItem | CustomerPackageItem;
+defineOptions({ name: "OrderFulfillmentCreate" });
+const route = useRoute();
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const order = ref<SalesOrder>();
+const customerPackage = ref<GaoCustomerPackage>();
+const quantityMap = reactive<Record<string, string>>({});
+const deliveredAtText = ref("");
+const draftTime = ref("");
+const pickerVisible = ref(false);
+const remark = ref("");
+const requestNo = ref("");
+const isSaving = ref(false);
+const photoItems = ref<PhotoItem[]>([]);
+const orderPickerVisible = ref(false);
+const orderLoading = ref(false);
+const orderOptions = ref<SalesOrder[]>([]);
+const isPackage = computed(() => !!customerPackage.value);
+const sourceItems = computed<SourceItem[]>(() => customerPackage.value?.itemList || order.value?.itemList || []);
+async function loadData(): Promise<void> {
+	const salesOrderId = String(route.query.salesOrderId || "");
+	const customerPackageId = String(route.query.customerPackageId || "");
+	if (!salesOrderId) return;
+	try {
+		order.value = await SalesOrderAPI.detail(salesOrderId);
+		if (customerPackageId) customerPackage.value = await PackageAPI.customerPackageDetail(customerPackageId);
+	} catch (error) { Message.error(getErrorMessage(error, "履约来源加载失败")); }
+}
+function getItemTitle(item: SourceItem): string { return `${item.productNameSnapshot || "未命名产品"} · ${item.unitSnapshot || "未设置单位"}`; }
+function getItemDescription(item: SourceItem): string {
+	return isPackage.value
+		? `可履约 ${getPackageQuantityText((item as CustomerPackageItem).availableQuantity)}`
+		: `待履约 ${getPackageQuantityText((item as SalesOrderItem).reservedQuantity)}`;
+}
+function confirmTime(value: string | number): void { deliveredAtText.value = String(value); pickerVisible.value = false; }
+function resolveTimestamp(value: string): number | undefined {
+	if (!value) return undefined;
+	const timestamp = new Date(value.replace(" ", "T")).getTime();
+	return Number.isFinite(timestamp) ? timestamp : undefined;
+}
+function buildAttachments(): Partial<Attachment>[] {
+	return photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: "PHOTO" }] : []);
+}
+function validate(): boolean {
+	if (!order.value?.id) { Message.warning("请先从订单详情进入履约创建"); return false; }
+	if (!buildAttachments().length) { Message.warning("履约必须上传至少一张照片"); return false; }
+	const selected = sourceItems.value.filter(item => !!item.id && quantityMap[item.id]);
+	if (!selected.length) { Message.warning("请填写至少一项履约数量"); return false; }
+	for (const item of selected) { if (!normalizePackageQuantity(quantityMap[item.id || ""])) { Message.warning("履约数量必须是正数，最多三位小数"); return false; } }
+	return true;
+}
+async function save(): Promise<void> {
+	if (isSaving.value || !validate()) return;
+	if (!requestNo.value) requestNo.value = createPackageRequestNo();
+	isSaving.value = true;
+	try {
+		const itemList: OrderFulfillmentItemRequest[] = sourceItems.value
+			.filter(item => !!item.id && quantityMap[item.id])
+			.map(item => ({
+				...(isPackage.value ? { sourceCustomerPackageItemId: item.id } : { sourceOrderItemId: item.id }),
+				quantity: normalizePackageQuantity(quantityMap[item.id || ""])!
+			}));
+		const result = await FulfillmentAPI.create({
+			salesOrderId: order.value!.id!,
+			requestNo: requestNo.value,
+			deliveredAt: resolveTimestamp(deliveredAtText.value),
+			itemList,
+			attachmentList: buildAttachments(),
+			remark: remark.value.trim() || null
+		});
+		Message.success("履约单已提交"); await router.replace(`/management/order-fulfillments/${result.id}`);
+	} catch (error) { Message.error(getErrorMessage(error, "履约单创建失败，重试会复用同一请求号")); } finally { isSaving.value = false; }
+}
+async function openOrderPicker(): Promise<void> {
+	if (order.value?.id) {
+		await router.push(`/management/sales-orders/${order.value.id}`);
+		return;
+	}
+	orderPickerVisible.value = true;
+	if (orderOptions.value.length) return;
+	orderLoading.value = true;
+	try {
+		const result = await SalesOrderAPI.list({ index: 0, size: 100, orderType: "DIRECT_PRODUCT", status: "ACTIVE" });
+		orderOptions.value = result.list || [];
+	} catch (error) { Message.error(getErrorMessage(error, "可履约订单加载失败")); }
+	finally { orderLoading.value = false; }
+}
+async function selectOrder(item: SalesOrder): Promise<void> {
+	if (!item.id) return;
+	order.value = item;
+	orderPickerVisible.value = false;
+	for (const key of Object.keys(quantityMap)) delete quantityMap[key];
+	await router.replace({ query: { salesOrderId: item.id } });
+}
+onMounted(async () => { navBarStore.setRightText("提交履约", "var(--td-brand-color)", save); await loadData(); });
+onUnmounted(() => navBarStore.clearRight());
+</script>
+
+<style scoped lang="less">
+.fulfillment-create { gap: 1rem; padding: calc(var(--app-nav-height) + 1rem) 0 2rem; display: flex; flex-direction: column;
+	.item .quantity { width: 7rem; }
+	.form { padding: 0 1rem; }
+	.empty { color: var(--td-text-color-secondary); padding: 2rem 1rem; text-align: center; }
+	.order-picker { height: 100%; overflow: auto; padding: 1rem 0; }
+	.picker-title { padding: 0 1rem 1rem; font-weight: 700; }
+}
+</style>

src/pages/fulfillment/OrderFulfillmentDetail.vue

@@ -0,0 +1,176 @@
+<template>
+	<div v-can="permissionCodes.orderFulfillment.read" class="fulfillment-detail">
+		<template v-if="fulfillment">
+			<t-cell-group title="履约单信息" theme="card" v-entrance-transition>
+				<t-cell title="履约单号" :note="fulfillment.id" />
+				<t-cell title="销售订单" :note="fulfillment.salesOrderId || '未知'" arrow @click="toOrder" />
+				<t-cell title="履约类型" :note="getFulfillmentTypeText(fulfillment.fulfillmentType)" />
+				<t-cell title="状态"><template #note><t-tag :content="getFulfillmentStatusText(fulfillment.status)" variant="light-outline" :theme="getStatusTheme(fulfillment.status)" /></template></t-cell>
+				<t-cell title="履约时间" :note="fulfillment.deliveredAt ? Time.toDateTime(fulfillment.deliveredAt) : '未知'" />
+				<t-cell title="提交人" :note="fulfillment.operator?.name || fulfillment.operatorUserId || '未知'" />
+				<t-cell title="处理人" :note="fulfillment.verifier?.name || fulfillment.verifierUserId || '未处理'" />
+				<t-cell v-if="fulfillment.reason" title="原因" :note="fulfillment.reason" />
+				<t-cell v-if="fulfillment.remark" title="备注" :note="fulfillment.remark" />
+			</t-cell-group>
+			<t-cell-group title="履约明细" theme="card" v-entrance-transition="70">
+				<t-cell
+					v-for="item in fulfillment.itemList || []"
+					:key="item.id"
+					:title="`${item.productNameSnapshot || '未命名产品'} · ${item.unitSnapshot || ''}`"
+					:description="`本次 ${item.quantity || 0} · 基础单位 ${item.baseQuantity || 0}`"
+					:note="`待履约 ${item.reservedBefore || 0} → ${item.reservedAfter || 0}`"
+				/>
+				<t-cell v-if="!fulfillment.itemList?.length" title="暂无履约明细" />
+			</t-cell-group>
+			<section class="actions" v-entrance-transition="140">
+				<t-button v-if="isWaitingStock && canVerify" theme="primary" @click="prepareStock">准备库存</t-button>
+				<t-button v-if="isPending && canVerify" theme="primary" @click="verify">核销履约</t-button>
+				<t-button v-if="isPending && canVerify" theme="default" variant="outline" @click="openReason('reject')">拒绝履约</t-button>
+				<t-button v-if="isPending && canCreate" theme="default" variant="outline" @click="openReason('cancel')">撤销履约</t-button>
+				<t-button v-if="isVerified && canRevoke" theme="danger" variant="outline" @click="openRevoke">履约冲正</t-button>
+			</section>
+		</template>
+		<t-empty v-else :description="loading ? '正在加载履约单' : '履约单不存在'" />
+		<t-dialog
+			v-model:visible="reasonVisible"
+			:title="reasonAction === 'reject' ? '拒绝履约' : '撤销履约'"
+			:confirm-btn="reasonAction === 'reject' ? '拒绝' : '撤销'"
+			@confirm="submitReason"
+		>
+			<t-textarea v-model.trim="reason" borderless autosize placeholder="请输入原因" />
+		</t-dialog>
+		<bottom-popup
+			v-model="revokeVisible"
+			title="履约冲正"
+			height="min(55vh, 32rem)"
+			left-button-text="取消"
+			right-button-text="提交"
+			@left-button-click="revokeVisible = false"
+			@right-button-click="submitRevoke"
+		>
+			<t-form label-align="top">
+				<t-form-item label="冲正原因" required-mark><t-textarea v-model.trim="revokeReason" borderless autosize /></t-form-item>
+				<t-form-item label="库存是否退回门店"><t-switch v-model="returnedToStore" /></t-form-item>
+			</t-form>
+			<package-photo-field v-model="photoItems" required title="冲正凭证照片" />
+		</bottom-popup>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { BottomPopup } from "timi-tdesign-mobile";
+import { Time } from "timi-web";
+import { useUserStore } from "timi-web-api";
+import FulfillmentAPI from "@/api/FulfillmentAPI";
+import PackagePhotoField from "@/components/PackagePhotoField.vue";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { OrderFulfillment } from "@/types/Fulfillment";
+import type { PhotoItem } from "@/types/Photo";
+import type { Attachment } from "timi-web-api";
+import { createPackageRequestNo } from "@/utils/package";
+import { getErrorMessage } from "@/utils/error";
+import { getFulfillmentStatusText, getFulfillmentTypeText, getStatusTheme } from "@/utils/salesOrder";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+
+type ReasonAction = "reject" | "cancel";
+defineOptions({ name: "OrderFulfillmentDetail" });
+const route = useRoute();
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const fulfillment = ref<OrderFulfillment>();
+const loading = ref(false);
+const operating = ref(false);
+const reasonVisible = ref(false);
+const reasonAction = ref<ReasonAction>("reject");
+const reason = ref("");
+const revokeVisible = ref(false);
+const revokeReason = ref("");
+const returnedToStore = ref(true);
+const revokeRequestNo = ref("");
+const photoItems = ref<PhotoItem[]>([]);
+const isWaitingStock = computed(() => fulfillment.value?.status === "WAITING_STOCK");
+const isPending = computed(() => fulfillment.value?.status === "PENDING");
+const isVerified = computed(() => fulfillment.value?.status === "VERIFIED");
+const canVerify = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.verify));
+const canCreate = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.create));
+const canRevoke = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.revoke));
+async function loadData(): Promise<void> {
+	const id = String(route.params.id || "");
+	if (!id) return;
+	loading.value = true;
+	try { fulfillment.value = await FulfillmentAPI.detail(id); }
+	catch (error) { Message.error(getErrorMessage(error, "履约单加载失败")); }
+	finally { loading.value = false; }
+}
+async function toOrder(): Promise<void> {
+	if (fulfillment.value?.salesOrderId) await router.push(`/management/sales-orders/${fulfillment.value.salesOrderId}`);
+}
+async function prepareStock(): Promise<void> {
+	if (!fulfillment.value?.id || operating.value) return;
+	operating.value = true;
+	try {
+		await FulfillmentAPI.prepareStock({ fulfillmentId: fulfillment.value.id });
+		Message.success("库存准备已提交");
+		await loadData();
+	} catch (error) { Message.error(getErrorMessage(error, "库存准备失败")); }
+	finally { operating.value = false; }
+}
+async function verify(): Promise<void> {
+	if (!fulfillment.value?.id || operating.value) return;
+	operating.value = true;
+	try {
+		await FulfillmentAPI.verify({ fulfillmentId: fulfillment.value.id, reason: "" });
+		Message.success("履约已核销");
+		await loadData();
+	} catch (error) { Message.error(getErrorMessage(error, "履约核销失败")); }
+	finally { operating.value = false; }
+}
+function openReason(action: ReasonAction): void { reasonAction.value = action; reason.value = ""; reasonVisible.value = true; }
+async function submitReason(): Promise<void> {
+	if (!fulfillment.value?.id || !reason.value || operating.value) return;
+	operating.value = true;
+	try {
+		const payload = { fulfillmentId: fulfillment.value.id, reason: reason.value.trim() };
+		if (reasonAction.value === "reject") await FulfillmentAPI.reject(payload);
+		else await FulfillmentAPI.cancel(payload);
+		reasonVisible.value = false;
+		Message.success(reasonAction.value === "reject" ? "履约已拒绝" : "履约已撤销");
+		await loadData();
+	} catch (error) { Message.error(getErrorMessage(error, "履约状态操作失败")); }
+	finally { operating.value = false; }
+}
+function openRevoke(): void { revokeReason.value = ""; returnedToStore.value = true; revokeRequestNo.value = ""; photoItems.value = []; revokeVisible.value = true; }
+function buildAttachments(): Partial<Attachment>[] {
+	return photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: "PHOTO" }] : []);
+}
+async function submitRevoke(): Promise<void> {
+	if (!fulfillment.value?.id || !revokeReason.value || operating.value) return;
+	if (fulfillment.value.stockRecordList?.length && !buildAttachments().length) { Message.warning("实物履约冲正必须上传退回照片"); return; }
+	if (!revokeRequestNo.value) revokeRequestNo.value = createPackageRequestNo();
+	operating.value = true;
+	try {
+		await FulfillmentAPI.revoke({
+			fulfillmentId: fulfillment.value.id,
+			requestNo: revokeRequestNo.value,
+			reason: revokeReason.value.trim(),
+			returnedToStore: returnedToStore.value,
+			attachmentList: buildAttachments()
+		});
+		revokeVisible.value = false;
+		Message.success("履约单已冲正");
+		await loadData();
+	} catch (error) { Message.error(getErrorMessage(error, "履约冲正失败，重试会复用同一请求号")); }
+	finally { operating.value = false; }
+}
+onMounted(loadData);
+onUnmounted(() => navBarStore.clearRight());
+</script>
+
+<style scoped lang="less">
+.fulfillment-detail { gap: 1rem; padding: calc(var(--app-nav-height) + 1rem) 0 2rem; display: flex; flex-direction: column;
+	.actions { gap: .5rem; padding: 0 1rem; display: flex; flex-wrap: wrap; }
+	.actions .t-button { flex: 1 1 8rem; }
+}
+</style>

src/pages/fulfillment/OrderFulfillmentList.vue

@@ -0,0 +1,110 @@
+<template>
+	<div v-can="permissionCodes.orderFulfillment.read" class="fulfillment-list">
+		<div class="filters">
+			<t-dropdown-menu>
+				<t-dropdown-item v-model="type" label="履约类型" :options="typeOptions" @change="selectType" />
+				<t-dropdown-item v-model="status" label="履约状态" :options="statusOptions" @change="selectStatus" />
+			</t-dropdown-menu>
+		</div>
+		<t-pull-down-refresh v-model="refreshing" :refresh-timeout="30000" @refresh="refresh" @scrolltolower="loadMore">
+			<t-cell-group v-if="list.length" theme="card">
+				<t-cell v-for="(item, index) in list" :key="item.id" arrow hover v-entrance-transition="index * 30" @click="toDetail(item)">
+					<template #title>
+						<div class="title">
+							<strong v-text="item.id || '履约单'" />
+							<t-tag :content="getFulfillmentStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" />
+						</div>
+					</template>
+					<template #description>
+						<div class="description">
+							<span v-text="getFulfillmentTypeText(item.fulfillmentType)" />
+							<span v-text="`订单：${item.salesOrderId || '未知'}`" />
+							<span v-text="`${(item.itemList || []).length} 项`" />
+						</div>
+					</template>
+					<template #note><span v-text="item.deliveredAt ? Time.toDateTime(item.deliveredAt) : '时间未知'" /></template>
+				</t-cell>
+			</t-cell-group>
+			<div v-else class="empty" v-text="loading ? '正在加载履约单' : '暂无履约单'" />
+			<div class="center-tips" v-text="loading ? '正在加载' : noMore ? '已经到底了' : '上拉加载更多'" />
+		</t-pull-down-refresh>
+	</div>
+	<nav-bar-action-menu v-if="canCreate" :actions="actions" />
+</template>
+
+<script setup lang="ts">
+import { type DropdownValue } from "tdesign-mobile-vue";
+import { Time } from "timi-web";
+import { useUserStore } from "timi-web-api";
+import FulfillmentAPI from "@/api/FulfillmentAPI";
+import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { FulfillmentStatus, FulfillmentType, OrderFulfillment } from "@/types/Fulfillment";
+import { getErrorMessage } from "@/utils/error";
+import { getFulfillmentStatusText, getFulfillmentTypeText, getStatusTheme } from "@/utils/salesOrder";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+
+defineOptions({ name: "OrderFulfillmentList" });
+const route = useRoute();
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const canCreate = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.create));
+const actions = computed(() => canCreate.value ? [{ key: "create", text: "创建履约单", icon: "add", theme: "primary" as const, action: toCreate }] : []);
+const type = ref("ALL");
+const status = ref(String(route.query.status || "ALL"));
+const list = ref<OrderFulfillment[]>([]);
+const pageIndex = ref(0);
+const total = ref(0);
+const loading = ref(false);
+const refreshing = ref(false);
+const noMore = ref(false);
+const pageSize = 15;
+const typeOptions = [{ label: "全部类型", value: "ALL" }, { label: "套餐权益", value: "PACKAGE_ENTITLEMENT" }, { label: "直接产品", value: "DIRECT_PRODUCT" }];
+const statusOptions = [
+	{ label: "全部状态", value: "ALL" },
+	{ label: "等待库存", value: "WAITING_STOCK" },
+	{ label: "待核销", value: "PENDING" },
+	{ label: "已核销", value: "VERIFIED" },
+	{ label: "已拒绝", value: "REJECTED" },
+	{ label: "已撤销", value: "CANCELLED" },
+	{ label: "已冲正", value: "REVOKED" }
+];
+async function fetchList(reset: boolean): Promise<void> {
+	if (loading.value || (!reset && noMore.value)) return;
+	if (reset) { pageIndex.value = 0; total.value = 0; noMore.value = false; list.value = []; }
+	loading.value = true;
+	try {
+		const result = await FulfillmentAPI.list({
+			index: pageIndex.value,
+			size: pageSize,
+			salesOrderId: String(route.query.salesOrderId || "") || undefined,
+			fulfillmentType: type.value === "ALL" ? undefined : type.value as FulfillmentType,
+			status: status.value === "ALL" ? undefined : status.value as FulfillmentStatus
+		});
+		const rows = result.list || [];
+		list.value = reset ? rows : list.value.concat(rows);
+		total.value = result.total || 0;
+		pageIndex.value += 1;
+		noMore.value = rows.length < pageSize || total.value <= list.value.length;
+	} finally { loading.value = false; }
+}
+async function refresh(): Promise<void> { try { await fetchList(true); } catch (error) { Message.error(getErrorMessage(error, "履约单加载失败")); } finally { refreshing.value = false; } }
+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 toCreate(): Promise<void> { await router.push("/management/order-fulfillments/create"); }
+onMounted(async () => { navBarStore.clearRight(); navBarStore.setCustomRightVisible(canCreate.value); try { await fetchList(true); } catch (error) { Message.error(getErrorMessage(error, "履约单加载失败")); } });
+onUnmounted(() => navBarStore.clearRight());
+</script>
+
+<style scoped lang="less">
+.fulfillment-list { padding: var(--app-nav-height) 0 1rem;
+	.filters { top: var(--app-nav-height); z-index: 10; padding: .75rem 1rem; position: sticky; background: #f5f5f8; box-shadow: var(--td-shadow-1); }
+	.title, .description { gap: .5rem; display: flex; align-items: center; }
+	.description { color: var(--td-text-color-secondary); flex-wrap: wrap; }
+	.empty { color: var(--td-text-color-secondary); padding: 3rem 1rem; text-align: center; }
+}
+</style>

src/pages/package/CustomerPackageDelivery.vue

@@ -1,242 +0,0 @@
-<template>
-	<div v-can="permissionCodes.packageDelivery.create" class="package-operation-edit">
-		<t-cell-group v-if="customerPackage" title="发放前状态（以提交时后端校验为准）" theme="card" v-entrance-transition>
-			<t-cell title="客户套餐" :note="customerPackage.packageNameSnapshot || '未命名套餐'" />
-			<t-cell title="收款状态" :note="getPaymentStatusText(customerPackage.paymentStatus)" />
-		</t-cell-group>
-		<section v-if="customerPackage" class="items" v-entrance-transition="70">
-			<div class="section-title"><strong>本次发放权益</strong><span>只能提交不超过可发数量的产品</span></div>
-			<div v-for="item in customerPackage.itemList || []" :key="item.id" class="item">
-				<div class="item-title"><strong v-text="`${item.productNameSnapshot}（${item.unitSnapshot}）`" /><span v-text="`可发 ${getPackageQuantityText(item.availableQuantity)}`" /></div>
-				<t-input v-model.trim="quantityMap[item.id || '']" type="number" borderless placeholder="本次发放数量，不填表示不发放" />
-			</div>
-		</section>
-		<t-form v-if="customerPackage" class="form" label-align="left" label-width="6rem" v-entrance-transition="140">
-			<t-form-item label="发放时间" arrow @click="deliveredPickerVisible = true">
-				<span class="picker-text" v-text="deliveredAtText || '使用当前时间'" />
-			</t-form-item>
-			<t-form-item label="备注">
-				<t-textarea v-model.trim="remark" borderless autosize maxlength="500" placeholder="发放备注" />
-			</t-form-item>
-		</t-form>
-		<package-photo-field v-if="customerPackage" v-model="photoItems" required title="发放照片" />
-		<t-empty v-if="!customerPackage" :description="isLoading ? '正在加载套餐' : '套餐不存在'" />
-		<t-popup v-model="deliveredPickerVisible" placement="bottom">
-			<t-date-time-picker v-model="deliveredDraft" format="YYYY-MM-DD HH:mm" :mode="['date', 'minute']" title="发放时间" @cancel="deliveredPickerVisible = false" @confirm="confirmDeliveredAt" />
-		</t-popup>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { useUserStore } from "timi-web-api";
-import PackageAPI from "@/api/PackageAPI";
-import PackagePhotoField from "@/components/PackagePhotoField.vue";
-import { useNavBarStore } from "@/store/navBarStore";
-import type { GaoCustomerPackage, PackageAttachment } from "@/types/Package";
-import type { PhotoItem } from "@/types/Photo";
-import {
-	canCreatePackageDelivery,
-	comparePackageQuantity,
-	createPackageRequestNo,
-	getPackageQuantityText,
-	getPaymentStatusText,
-	isStoreManagerRequiredForPackageDelivery,
-	normalizePackageQuantity
-} from "@/utils/package";
-import { getErrorMessage } from "@/utils/error";
-import { Message } from "@/utils/message";
-import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
-
-defineOptions({ name: "CustomerPackageDelivery" });
-
-const route = useRoute();
-const router = useRouter();
-const userStore = useUserStore();
-const navBarStore = useNavBarStore();
-const customerPackage = ref<GaoCustomerPackage>();
-const quantityMap = reactive<Record<string, string>>({});
-const photoItems = ref<PhotoItem[]>([]);
-const remark = ref("");
-const deliveredAtText = ref("");
-const deliveredDraft = ref("");
-const deliveredPickerVisible = ref(false);
-const isLoading = ref(false);
-const isSaving = ref(false);
-const isStoreManager = computed(() => userStore.hasRoles(gaoRoleCodes.storeManager) && !userStore.hasRoles(gaoRoleCodes.globalManager));
-const canCreateDelivery = computed(() => canCreatePackageDelivery(customerPackage.value)
-	&& (!isStoreManagerRequiredForPackageDelivery(customerPackage.value) || isStoreManager.value)
-	&& userStore.hasPermissions(permissionCodes.packageDelivery.create));
-
-function confirmDeliveredAt(value: string | number): void {
-	deliveredAtText.value = String(value);
-	deliveredPickerVisible.value = false;
-}
-
-function resolveTimestamp(value: string): number | undefined {
-	if (!value) {
-		return undefined;
-	}
-	const timestamp = new Date(value.replace(" ", "T")).getTime();
-	return Number.isFinite(timestamp) ? timestamp : undefined;
-}
-
-function buildAttachments(): PackageAttachment[] {
-	return photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: "PHOTO", name: item.attachment?.name }] : []);
-}
-
-async function loadData(): Promise<void> {
-	const id = String(route.params.id || "");
-	if (!id) {
-		return;
-	}
-	isLoading.value = true;
-	try {
-		customerPackage.value = await PackageAPI.customerPackageDetail(id);
-		for (const item of customerPackage.value.itemList || []) {
-			if (item.id) {
-				quantityMap[item.id] = "";
-			}
-		}
-	} catch (error) {
-		Message.error(getErrorMessage(error, "套餐加载失败"));
-	} finally {
-		isLoading.value = false;
-	}
-}
-
-function validateItems(): Array<{ customerPackageItemId: string; quantity: string }> | undefined {
-	const result: Array<{ customerPackageItemId: string; quantity: string }> = [];
-	for (const item of customerPackage.value?.itemList || []) {
-		if (!item.id) {
-			continue;
-		}
-		const text = quantityMap[item.id] || "";
-		if (!text.trim()) {
-			continue;
-		}
-		const quantity = normalizePackageQuantity(text);
-		if (!quantity || quantity === "0") {
-			Message.warning(`${item.productNameSnapshot} 的数量必须是正数，最多三位小数`);
-			return undefined;
-		}
-		if (comparePackageQuantity(quantity, item.availableQuantity) > 0) {
-			Message.warning(`${item.productNameSnapshot} 的发放数量超过当前可发数量，请刷新后重新确认`);
-			return undefined;
-		}
-		result.push({ customerPackageItemId: item.id, quantity });
-	}
-	if (!result.length) {
-		Message.warning("请至少填写一项本次发放数量");
-		return undefined;
-	}
-	return result;
-}
-
-async function save(): Promise<void> {
-	if (isSaving.value) {
-		return;
-	}
-	const customerPackageId = customerPackage.value?.id;
-	const itemList = validateItems();
-	if (!customerPackageId || !itemList) {
-		return;
-	}
-	if (!canCreatePackageDelivery(customerPackage.value)) {
-		Message.warning("套餐未有已核销收款，不能提交发放");
-		return;
-	}
-	if (isStoreManagerRequiredForPackageDelivery(customerPackage.value) && !isStoreManager.value) {
-		Message.warning("部分收款套餐仅店长可发放");
-		return;
-	}
-	if (!photoItems.value.some(item => item.tempFileId)) {
-		Message.warning("发放必须上传至少一张照片");
-		return;
-	}
-	isSaving.value = true;
-	try {
-		const result = await PackageAPI.createDelivery({
-			requestNo: createPackageRequestNo(),
-			customerPackageId,
-			deliveredAt: resolveTimestamp(deliveredAtText.value),
-			itemList,
-			attachmentList: buildAttachments(),
-			remark: remark.value.trim() || null
-		});
-		Message.success("发放单已提交，等待核销");
-		await PackageAPI.customerPackageDetail(customerPackageId);
-		if (result.id) {
-			await router.replace(`/management/package-deliveries/${result.id}`);
-			return;
-		}
-		await router.replace(`/management/customer-packages/${customerPackageId}`);
-	} catch (error) {
-		Message.error(getErrorMessage(error, "发放单提交失败，请刷新后确认状态"));
-	} finally {
-		isSaving.value = false;
-	}
-}
-
-onMounted(async () => {
-	await loadData();
-	if (canCreateDelivery.value) {
-		navBarStore.setRightText("提交发放", "var(--td-brand-color)", save);
-	}
-});
-
-onUnmounted(() => navBarStore.clearRight());
-</script>
-
-<style scoped lang="less">
-.package-operation-edit {
-	gap: 1rem;
-	padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
-	display: flex;
-	flex-direction: column;
-
-	.form {
-		border-radius: .75rem;
-	}
-
-	.picker-text {
-		width: 100%;
-		text-align: right;
-	}
-
-	.items,
-	.package-photo-field {
-		padding: 0 1rem;
-	}
-
-	.section-title {
-		color: var(--td-text-color-secondary);
-		margin-bottom: .5rem;
-		font-size: .8125rem;
-	}
-
-	.section-title span {
-		margin-left: .5rem;
-	}
-
-	.item {
-		gap: .5rem;
-		padding: .75rem;
-		margin-bottom: .75rem;
-		display: grid;
-		background: var(--td-bg-color-container);
-		box-shadow: var(--td-shadow-1);
-		border-radius: .75rem;
-	}
-
-	.item-title {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-
-	.item-title span {
-		color: var(--td-brand-color);
-		font-size: .75rem;
-	}
-}
-</style>

src/pages/package/CustomerPackageDetail.vue

@@ -1,238 +1,112 @@
 <template>
 	<div v-can="permissionCodes.customerPackage.read" class="customer-package-detail">
 		<template v-if="customerPackage">
-			<customer-profile-card
+			<customer-profile-card class="customer" :customer="customerPackage.customer" v-entrance-transition />
-				class="customer"
+			<t-cell-group class="summary" theme="card" v-entrance-transition="70">
-				:customer="customerPackage.customer"
-				v-entrance-transition
-			/>
-			<t-cell-group
-				class="package"
-				theme="card"
-				v-entrance-transition="70"
-			>
 				<t-cell>
 					<template #title>
 						<div class="title">
-							<h3 class="value" v-text="customerPackage.packageNameSnapshot || '未命名套餐'" />
+							<strong v-text="customerPackage.packageNameSnapshot || '未命名套餐'" />
 							<t-tag :content="getCustomerPackageStatusText(customerPackage.status)" variant="light-outline" :theme="getStatusTheme(customerPackage.status)" />
 						</div>
 					</template>
-					<template #description>
+					<template #description><span>购买于 </span><pass-time-label :timestamp="order?.purchasedAt" underline /></template>
-						<span>购买于</span>
-						<pass-time-label class="word-space" :timestamp="customerPackage.purchasedAt" underline />
-					</template>
 				</t-cell>
-				<t-cell
+				<t-cell v-if="customerPackage.salesOrderId && canReadOrder" title="销售订单" :note="order?.orderNo || customerPackage.salesOrderId" arrow @click="toOrder" />
-					v-if="canReadPackageConfig && customerPackage.packageConfigId"
+				<t-cell v-if="canReadPackageConfig && customerPackage.packageConfigId" title="套餐方案详情" arrow @click="toPackageConfig" />
-					title="套餐方案详情"
+				<t-cell v-if="canReadEventRecord && customerPackage.purchaseEventRecord?.id" title="购买登记记录" arrow @click="toEventRecord" />
-					arrow
-					hover
-					@click="toPackageConfigDetail"
-				/>
-				<t-cell
-					v-if="canReadEventRecord && customerPackage.purchaseEventRecord?.id"
-					title="购买登记记录"
-					note="查看关联的事件登记记录"
-					arrow
-					@click="toPurchaseEventRecord"
-				/>
 			</t-cell-group>
-			<t-cell-group title="金额" theme="card" v-entrance-transition="140">
+			<t-cell-group v-if="order" title="订单资金" theme="card" v-entrance-transition="140">
-				<t-cell class="amount standard" title="标准价快照" :note="formatPackageAmount(customerPackage.standardAmountSnapshot)" />
+				<t-cell title="成交金额" :note="formatPackageAmount(order.saleAmount)" />
-				<t-cell class="amount sale" title="成交价" :note="formatPackageAmount(customerPackage.saleAmount)" />
+				<t-cell title="已生效收款" :note="formatPackageAmount(order.paidAmount)" />
-				<t-cell class="amount paid" title="已核销收款" :note="formatPackageAmount(customerPackage.paidAmount)" />
+				<t-cell title="待核销收款" :note="formatPackageAmount(order.pendingPaidAmount)" />
-				<t-cell class="amount pending" title="待核销收款" :note="formatPackageAmount(customerPackage.pendingPaidAmount)" />
+				<t-cell title="剩余待收款" :note="formatPackageAmount(order.unpaidAmount)" />
-				<t-cell class="amount remaining" title="剩余待收款" :note="formatPackageAmount(getRemainingReceivableAmount(customerPackage))" />
+				<t-cell title="有效退款" :note="formatPackageAmount(order.refundedAmount)" />
-				<t-cell class="amount refunded" title="有效退款" :note="formatPackageAmount(customerPackage.refundedAmount)" />
+				<t-cell title="收款状态" :note="getSalesPaymentStatusText(order.paymentStatus)" />
-				<t-cell
+				<t-cell title="退款状态" :note="getSalesRefundStatusText(order.refundStatus)" />
-					v-if="canReadFund && 0 < (customerPackage.pendingPaidAmount || 0)"
+				<t-cell v-if="canReadFund" title="资金流水" arrow @click="toFundRecords" />
-					title="去核销收款"
-					note="查看待核销的登记收款"
-					arrow
-					hover
-					@click="toPendingFundList"
-				/>
-				<t-cell v-if="canReadFund" title="资金历史" arrow @click="toFundList" />
 			</t-cell-group>
-			<t-button
+			<card-container title="套餐权益" description="权益数量来自客户套餐快照，履约状态来自统一履约单" v-entrance-transition="210">
-				v-if="canReceivePayment"
-				class="cell-button"
-				theme="primary"
-				@click="toPayment"
-				v-entrance-transition="210"
-			>登记收款</t-button>
-			<t-cell-group title="状态" theme="card" v-entrance-transition="280">
-				<t-cell title="收款状态" :note="getPaymentStatusText(customerPackage.paymentStatus)" />
-				<t-cell title="退款状态" :note="getRefundStatusText(customerPackage.refundStatus)" />
-			</t-cell-group>
-			<card-container description="产品权益" v-entrance-transition="350">
 				<t-cell-group>
-					<t-cell
+					<t-cell v-for="item in customerPackage.itemList || []" :key="item.id" class="benefit">
-						v-for="item in customerPackage.itemList || []"
+						<template #title><div class="title"><strong v-text="item.productNameSnapshot || '未命名产品'" /><t-tag theme="primary" variant="light" :content="item.unitSnapshot || '未设置单位'" /></div></template>
-						:key="item.id"
-						class="benefit"
-					>
-						<template #title>
-							<div class="title">
-								<strong v-text="item.productNameSnapshot || '未命名产品'" />
-								<t-tag theme="primary" variant="light" :content="item.unitSnapshot || '未设置单位'" />
-							</div>
-						</template>
 						<template #description>
 							<div class="stats">
-								<div class="stat">
+								<span>总数 <strong v-text="getPackageQuantityText(item.totalQuantity)" /></span>
-									<span>总数</span>
+								<span>可履约 <strong v-text="getPackageQuantityText(item.availableQuantity)" /></span>
-									<strong v-text="getPackageQuantityText(item.totalQuantity)" />
+								<span>待核销 <strong v-text="getPackageQuantityText(item.pendingQuantity)" /></span>
-								</div>
+								<span>已履约 <strong v-text="getPackageQuantityText(item.fulfilledQuantity)" /></span>
-								<div class="stat available">
-									<span>可发</span>
-									<strong v-text="getPackageQuantityText(item.availableQuantity)" />
-								</div>
-								<div class="stat pending">
-									<span>待核销</span>
-									<strong v-text="getPackageQuantityText(item.pendingQuantity)" />
-								</div>
-								<div class="stat delivered">
-									<span>已核销</span>
-									<strong v-text="getPackageQuantityText(item.deliveredQuantity)" />
-								</div>
 							</div>
 						</template>
 					</t-cell>
-					<t-cell
-						v-if="canReadDelivery && hasPendingDelivery"
-						title="去核销发放"
-						note="查看待核销的发放记录"
-						arrow
-						@click="toPendingDeliveryList"
-					/>
-					<t-cell v-if="canReadDelivery" title="发放历史" arrow @click="toDeliveryList" />
 					<div v-if="!customerPackage.itemList?.length" class="empty" v-text="'暂无产品权益'" />
 				</t-cell-group>
 			</card-container>
-			<t-button
+			<t-cell-group title="统一履约" theme="card" v-entrance-transition="280">
-				v-if="canCreateDelivery"
+				<t-cell
-				class="cell-button"
+					v-for="item in customerPackage.fulfillmentList || []"
-				theme="primary"
+					:key="item.id"
-				@click="toDelivery"
+					:title="`${getFulfillmentTypeText(item.fulfillmentType)} · ${getFulfillmentStatusText(item.status)}`"
-				v-entrance-transition="420"
+					:note="getFulfillmentSummary(item)"
-			>创建发放单</t-button>
+					arrow
-			<t-button
+					@click="toFulfillment(item.id)"
-				v-if="canCancelPackage"
+				/>
-				class="cell-button"
+				<t-cell v-if="!customerPackage.fulfillmentList?.length" title="暂无履约记录" />
-				theme="danger"
+				<t-cell v-if="canCreateFulfillment && hasAvailableItem" title="创建统一履约单" note="选择本次履约的权益数量" arrow @click="toCreateFulfillment" />
-				@click="toCancel"
+			</t-cell-group>
-			>取消套餐</t-button>
+			<t-button v-if="canCancel" class="cell-button" theme="danger" @click="openCancel">取消客户套餐</t-button>
-			<t-button
-				v-if="canRefund"
-				class="cell-button bg-orange white"
-				variant="text"
-				@click="toRefund"
-			>处理退款</t-button>
 		</template>
 		<t-empty v-else :description="isLoading ? '正在加载客户套餐' : '客户套餐不存在'" />
-		<bottom-popup
+		<bottom-popup v-model="cancelVisible" title="取消客户套餐" height="min(35vh, 20rem)" left-button-text="取消" right-button-text="确认取消" @left-button-click="cancelVisible = false" @right-button-click="confirmCancel">
-			v-model="cancelPopupVisible"
+			<t-form label-align="top"><t-form-item label="取消原因" required-mark><t-textarea v-model.trim="cancelReason" borderless autosize maxlength="500" placeholder="请输入取消原因" /></t-form-item></t-form>
-			title="取消客户套餐"
-			height="min(35vh, 20rem)"
-			left-button-text="取消"
-			right-button-text="确认取消"
-			@left-button-click="closeCancelPopup"
-			@right-button-click="confirmCancel"
-		>
-			<template #rightButton="{ onClick }">
-				<t-button
-					variant="text"
-					size="small"
-					theme="danger"
-					:loading="isCancelling"
-					:disabled="!canConfirmCancel || isCancelling"
-					@click="onClick"
-				>确认取消</t-button>
-			</template>
-			<t-form class="cancel-form" label-align="top">
-				<t-form-item label="取消原因" required-mark>
-					<t-textarea v-model.trim="cancelReason" borderless autosize maxlength="500" placeholder="请输入取消原因" />
-				</t-form-item>
-			</t-form>
 		</bottom-popup>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { BottomPopup } from "timi-tdesign-mobile";
+import { PassTimeLabel, Time } from "timi-web";
-import { PassTimeLabel } from "timi-web";
 import { useUserStore } from "timi-web-api";
 import PackageAPI from "@/api/PackageAPI";
+import SalesOrderAPI from "@/api/SalesOrderAPI";
 import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
-import { useCurrentStoreStore } from "@/store/currentStoreStore";
+import { useNavBarStore } from "@/store/navBarStore";
-import type { CustomerPackageStatus, GaoCustomerPackage } from "@/types/Package";
+import type { GaoCustomerPackage } from "@/types/Package";
+import type { OrderFulfillment } from "@/types/Fulfillment";
+import type { SalesOrder } from "@/types/SalesOrder";
 import { getErrorMessage } from "@/utils/error";
-import {
+import { formatPackageAmount, getCustomerPackageStatusText, getPackageQuantityText } from "@/utils/package";
-	canCreatePackageDelivery,
+import { getFulfillmentStatusText, getFulfillmentTypeText, getSalesPaymentStatusText, getSalesRefundStatusText } from "@/utils/salesOrder";
-	formatPackageAmount,
-	getCustomerPackageStatusText,
-	getPackageQuantityText,
-	getPaymentStatusText,
-	getRefundStatusText,
-	isStoreManagerRequiredForPackageDelivery
-} from "@/utils/package";
 import { Message } from "@/utils/message";
-import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
+import { permissionCodes } from "@/utils/permission";
 
 defineOptions({ name: "CustomerPackageDetail" });
-
 const route = useRoute();
 const router = useRouter();
+const navBarStore = useNavBarStore();
 const userStore = useUserStore();
-const currentStoreStore = useCurrentStoreStore();
 const customerPackage = ref<GaoCustomerPackage>();
+const order = ref<SalesOrder>();
 const isLoading = ref(false);
-const canReceivePayment = computed(() => customerPackage.value?.status === "ACTIVE" && customerPackage.value.paymentStatus !== "PAID" && userStore.hasPermissions(permissionCodes.fundReceive.create));
+const cancelVisible = ref(false);
-const isStoreManager = computed(() => userStore.hasRoles(gaoRoleCodes.storeManager) && !userStore.hasRoles(gaoRoleCodes.globalManager));
-const canCreateDelivery = computed(() => customerPackage.value?.status === "ACTIVE"
-	&& canCreatePackageDelivery(customerPackage.value)
-	&& (!isStoreManagerRequiredForPackageDelivery(customerPackage.value) || isStoreManager.value)
-	&& userStore.hasPermissions(permissionCodes.packageDelivery.create));
-const canCancelPackage = computed(() => customerPackage.value?.status === "ACTIVE" && userStore.hasPermissions(permissionCodes.customerPackage.cancel));
-const canRefund = computed(() => customerPackage.value?.status === "CANCELLED" && customerPackage.value.refundStatus === "PENDING" && userStore.hasPermissions(permissionCodes.fund.refund));
-const canReadEventRecord = computed(() => userStore.hasPermissions(permissionCodes.eventRecord.read));
-const canReadPackageConfig = computed(() => userStore.hasPermissions(permissionCodes.packageConfig.read));
-const canReadDelivery = computed(() => userStore.hasPermissions(permissionCodes.packageDelivery.read));
-const hasPendingDelivery = computed(() => customerPackage.value?.itemList?.some(item => 0 < Number(item.pendingQuantity)) ?? false);
-const canReadFund = computed(() => userStore.hasPermissions(permissionCodes.fundRecord.read));
-const cancelPopupVisible = ref(false);
 const cancelReason = ref("");
 const isCancelling = ref(false);
-const canConfirmCancel = computed(() => !!cancelReason.value.trim());
+const canCancel = computed(() => customerPackage.value?.status === "ACTIVE" && userStore.hasPermissions(permissionCodes.customerPackage.cancel));
-
+const canCreateFulfillment = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.create));
-/** 计算扣除已核销和待核销收款后的剩余待收款金额。 */
+const canReadOrder = computed(() => userStore.hasPermissions(permissionCodes.salesOrder.read));
-function getRemainingReceivableAmount(packageEntity: GaoCustomerPackage): number | undefined {
+const canReadFund = computed(() => userStore.hasPermissions(permissionCodes.fundRecord.read));
-	if (packageEntity.saleAmount === undefined) {
+const canReadPackageConfig = computed(() => userStore.hasPermissions(permissionCodes.packageConfig.read));
-		return undefined;
+const canReadEventRecord = computed(() => userStore.hasPermissions(permissionCodes.eventRecord.read));
-	}
+const hasAvailableItem = computed(() => customerPackage.value?.itemList?.some(item => 0 < Number(item.availableQuantity)) ?? false);
-	const remainingAmount = packageEntity.saleAmount - (packageEntity.paidAmount || 0) - (packageEntity.pendingPaidAmount || 0);
-	return 0 < remainingAmount ? remainingAmount : 0;
-}
-
-function getStatusTheme(status?: CustomerPackageStatus): "success" | "default" {
-	return status === "ACTIVE" ? "success" : "default";
-}
 
 async function loadData(): Promise<void> {
 	const id = String(route.params.id || "");
-	if (!id) {
+	if (!id) return;
-		return;
-	}
 	isLoading.value = true;
 	try {
-		if (userStore.hasRoles(gaoRoleCodes.globalManager)) {
-			await currentStoreStore.loadStoreList();
-		} else {
-			await currentStoreStore.loadLoginStore();
-		}
 		customerPackage.value = await PackageAPI.customerPackageDetail(id);
+		order.value = customerPackage.value.salesOrderId && canReadOrder.value
+			? await SalesOrderAPI.detail(customerPackage.value.salesOrderId)
+			: undefined;
 	} catch (error) {
 		customerPackage.value = undefined;
 		Message.error(getErrorMessage(error, "客户套餐加载失败"));
@@ -240,266 +114,39 @@ async function loadData(): Promise<void> {
 		isLoading.value = false;
 	}
 }
-
+function getStatusTheme(status?: string): "success" | "warning" | "danger" | "default" { return status === "ACTIVE" ? "success" : status === "CANCELLED" ? "danger" : "default"; }
-async function toPayment(): Promise<void> {
+function getFulfillmentSummary(item: OrderFulfillment): string { return `${item.deliveredAt ? Time.toDateTime(item.deliveredAt) : "时间未知"} · ${(item.itemList || []).length} 项`; }
-	if (customerPackage.value?.id) {
+async function toOrder(): Promise<void> { if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}`); }
-		await router.push(`/management/customer-packages/${customerPackage.value.id}/payment`);
+async function toPackageConfig(): Promise<void> { if (customerPackage.value?.packageConfigId) await router.push(`/management/package-configs/${customerPackage.value.packageConfigId}`); }
-	}
+async function toEventRecord(): Promise<void> { if (customerPackage.value?.purchaseEventRecord?.id) await router.push(`/management/registration-event-records/${customerPackage.value.purchaseEventRecord.id}`); }
-}
+async function toFundRecords(): Promise<void> { if (order.value?.id) await router.push({ path: "/management/fund-records", query: { salesOrderId: order.value.id } }); }
-
+async function toFulfillment(id?: string): Promise<void> { if (id) await router.push(`/management/order-fulfillments/${id}`); }
-async function toPackageConfigDetail(): Promise<void> {
+async function toCreateFulfillment(): Promise<void> {
-	const id = customerPackage.value?.packageConfigId;
+	if (order.value?.id && customerPackage.value?.id) {
-	if (id && canReadPackageConfig.value) {
 		await router.push({
-			name: "PackageConfigDetail",
+			path: "/management/order-fulfillments/create",
-			params: { id },
+			query: { salesOrderId: order.value.id, customerPackageId: customerPackage.value.id }
-			query: { transitionDepth: String(getCurrentRouteDepth() + 1) }
 		});
 	}
 }
-
+function openCancel(): void { cancelReason.value = ""; cancelVisible.value = true; }
-async function toPurchaseEventRecord(): Promise<void> {
-	const id = customerPackage.value?.purchaseEventRecord?.id;
-	if (id && canReadEventRecord.value) {
-		await router.push({
-			name: "EventRecordDetail",
-			params: { id },
-			query: { transitionDepth: String(getCurrentRouteDepth() + 1) }
-		});
-	}
-}
-
-async function toDelivery(): Promise<void> {
-	if (customerPackage.value?.id) {
-		await router.push(`/management/customer-packages/${customerPackage.value.id}/delivery/create`);
-	}
-}
-
-async function toCancel(): Promise<void> {
-	if (!customerPackage.value?.id || !canCancelPackage.value) {
-		return;
-	}
-	cancelReason.value = "";
-	cancelPopupVisible.value = true;
-}
-
-function closeCancelPopup(): void {
-	if (isCancelling.value) {
-		return;
-	}
-	cancelPopupVisible.value = false;
-}
-
 async function confirmCancel(): Promise<void> {
-	const id = customerPackage.value?.id;
+	if (!customerPackage.value?.id || !cancelReason.value || isCancelling.value) return;
-	const reason = cancelReason.value.trim();
-	if (!id || !canCancelPackage.value || !reason || isCancelling.value) {
-		return;
-	}
 	isCancelling.value = true;
-	try {
+	try { await PackageAPI.cancel(customerPackage.value.id, cancelReason.value); cancelVisible.value = false; Message.success("客户套餐已取消"); await loadData(); }
-		await PackageAPI.cancel(id, reason);
+	catch (error) { Message.error(getErrorMessage(error, "套餐取消失败")); }
-		cancelPopupVisible.value = false;
+	finally { isCancelling.value = false; }
-		Message.success("客户套餐已取消");
-		await loadData();
-	} catch (error) {
-		Message.error(getErrorMessage(error, "套餐取消失败，请刷新后确认状态"));
-	} finally {
-		isCancelling.value = false;
 }
-}
-
-async function toRefund(): Promise<void> {
-	if (customerPackage.value?.id) {
-		await router.push(`/management/customer-packages/${customerPackage.value.id}/refund`);
-	}
-}
-
-async function toDeliveryList(): Promise<void> {
-	await navigateToDeliveryList();
-}
-
-async function toPendingDeliveryList(): Promise<void> {
-	await navigateToDeliveryList(true);
-}
-
-async function navigateToDeliveryList(showPending = false): Promise<void> {
-	if (customerPackage.value?.id) {
-		const query = {
-			customerPackageId: customerPackage.value.id,
-			transitionDepth: String(getCurrentRouteDepth() + 1),
-			...(showPending ? { status: "PENDING" } : {})
-		};
-		await router.push({
-			path: "/management/package-deliveries",
-			query
-		});
-	}
-}
-
-async function toFundList(): Promise<void> {
-	await navigateToFundList();
-}
-
-async function toPendingFundList(): Promise<void> {
-	await navigateToFundList(true);
-}
-
-async function navigateToFundList(showPendingReceive = false): Promise<void> {
-	if (customerPackage.value?.id) {
-		const query = {
-			customerPackageId: customerPackage.value.id,
-			transitionDepth: String(getCurrentRouteDepth() + 1),
-			...(showPendingReceive ? { operationType: "RECEIVE", status: "PENDING" } : {})
-		};
-		await router.push({ path: "/management/fund-records", query });
-	}
-}
-
-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);
-watch(() => route.params.id, loadData);
+onUnmounted(() => navBarStore.clearRight());
 </script>
 
 <style scoped lang="less">
-.customer-package-detail {
+.customer-package-detail { gap: 1rem; padding: calc(var(--app-nav-height) + 1rem) 0 2rem; display: flex; flex-direction: column;
-	gap: 1rem;
+	.customer { margin: 0 1rem; }
-	padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
+	.summary .title, .benefit .title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
-	display: flex;
+	.stats { gap: .75rem; display: flex; flex-wrap: wrap; color: var(--td-text-color-secondary); }
-	flex-direction: column;
+	.stats strong { color: var(--td-text-color-primary); }
-
+	.empty { color: var(--td-text-color-secondary); padding: 1rem; text-align: center; }
-	.customer {
-		margin: 0 1rem;
-	}
-
-	.package {
-
-		:deep(.t-cell__title) {
-			margin: 0;
-		}
-
-		.title {
-			flex: 1;
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-
-			.value {
-				margin: 0;
-			}
-		}
-	}
-
-	.amount {
-
-		:deep(.t-cell__note) {
-			font-weight: bold;
-		}
-
-		:deep(.t-cell__title-text),
-		:deep(.t-cell__note) {
-			color: var(--td-text-color-secondary);
-		}
-
-		&.sale :deep(.t-cell__title-text),
-		&.sale :deep(.t-cell__note) {
-			color: var(--td-brand-color);
-		}
-
-		&.paid :deep(.t-cell__title-text),
-		&.paid :deep(.t-cell__note) {
-			color: var(--td-success-color);
-		}
-
-		&.pending :deep(.t-cell__title-text),
-		&.pending :deep(.t-cell__note),
-		&.remaining :deep(.t-cell__title-text),
-		&.remaining :deep(.t-cell__note) {
-			color: var(--td-warning-color);
-		}
-
-		&.refunded :deep(.t-cell__title-text),
-		&.refunded :deep(.t-cell__note) {
-			color: var(--td-error-color);
-		}
-	}
-
-	.benefit {
-		padding: .875rem 1rem;
-
-		:deep(.t-cell__title) {
-			margin: 0;
-		}
-
-		.title {
-			flex: 1;
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-
-			strong {
-				font-size: .9375rem;
-			}
-		}
-
-		.stats {
-			gap: .5rem;
-			margin-top: .75rem;
-			display: grid;
-			grid-template-columns: repeat(4, minmax(0, 1fr));
-
-			.stat {
-				gap: .25rem;
-				min-width: 0;
-				display: flex;
-				align-items: center;
-				flex-direction: column;
-
-				span {
-					color: var(--td-text-color-secondary);
-					font-size: .6875rem;
-				}
-
-				strong {
-					max-width: 100%;
-					overflow: hidden;
-					font-size: 1.5rem;
-					text-overflow: ellipsis;
-				}
-			}
-
-			.available strong {
-				color: var(--td-brand-color);
-			}
-
-			.pending strong {
-				color: var(--td-warning-color);
-			}
-
-			.delivered strong {
-				color: var(--td-success-color);
-			}
-		}
-	}
-
-	:deep(.photo-scroller) {
-		padding: 1rem;
-	}
-
-	.empty {
-		color: var(--td-text-color-secondary);
-		padding: 1rem;
-		text-align: center;
-	}
 }
 </style>

src/pages/package/CustomerPackageList.vue

@@ -17,12 +17,6 @@
 						:options="statusOptions"
 						@change="selectStatus"
 					/>
-					<t-dropdown-item
-						v-model="paymentStatus"
-						label="收款状态"
-						:options="paymentOptions"
-						@change="selectPaymentStatus"
-					/>
 				</t-dropdown-menu>
 			</div>
 		</div>
@@ -67,13 +61,7 @@
 					</template>
 					<template #description>
 						<div class="description">
-							<t-tag
+							<div class="line" v-text="`订单：${item.salesOrderId || '未关联'}`" />
-								class="line"
-								theme="primary"
-								variant="outline"
-								:content="getPaymentStatusText(item.paymentStatus)"
-							/>
-							<div class="line" v-text="`成交价：${formatPackageAmount(item.saleAmount)}`" />
 						</div>
 					</template>
 				</t-cell>
@@ -89,10 +77,10 @@ import { type DropdownValue } from "tdesign-mobile-vue";
 import { Text, Toolkit } from "timi-web";
 import PackageAPI from "@/api/PackageAPI";
 import { useNavBarStore } from "@/store/navBarStore";
-import type { CustomerPackageStatus, GaoCustomerPackage, PaymentStatus } from "@/types/Package";
+import type { CustomerPackageStatus, GaoCustomerPackage } from "@/types/Package";
 import { getCustomerPhotoURL } from "@/utils/customer";
 import { getErrorMessage } from "@/utils/error";
-import { formatPackageAmount, getCustomerPackageStatusText, getPaymentStatusText } from "@/utils/package";
+import { getCustomerPackageStatusText } from "@/utils/package";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 
@@ -102,7 +90,6 @@ const router = useRouter();
 const navBarStore = useNavBarStore();
 const keyword = ref("");
 const status = ref("ALL");
-const paymentStatus = ref("ALL");
 const packageList = ref<GaoCustomerPackage[]>([]);
 const pageIndex = ref(0);
 const total = ref(0);
@@ -115,12 +102,6 @@ const statusOptions = [
 	{ label: "已履约", value: "FULFILLED" },
 	{ label: "已取消", value: "CANCELLED" }
 ];
-const paymentOptions = [
-	{ label: "全部收款", value: "ALL" },
-	{ label: "未收款", value: "UNPAID" },
-	{ label: "部分收款", value: "PARTIALLY_PAID" },
-	{ label: "已收款", value: "PAID" }
-];
 const loadStateText = computed(() => loading.value ? "正在加载" : noMore.value ? "已经到底了" : "上拉加载更多");
 
 async function loadMore(): Promise<void> {
@@ -133,8 +114,7 @@ async function loadMore(): Promise<void> {
 			index: pageIndex.value,
 			size: 15,
 			keyword: keyword.value || undefined,
-			status: status.value === "ALL" ? undefined : status.value as CustomerPackageStatus,
+			status: status.value === "ALL" ? undefined : status.value as CustomerPackageStatus
-			paymentStatus: paymentStatus.value === "ALL" ? undefined : paymentStatus.value as PaymentStatus
 		});
 		const list = result.list || [];
 		packageList.value = packageList.value.concat(list);
@@ -165,13 +145,6 @@ async function selectStatus(value: DropdownValue): Promise<void> {
 	await reload();
 }
 
-async function selectPaymentStatus(value: DropdownValue): Promise<void> {
-	if (Array.isArray(value)) {
-		return;
-	}
-	paymentStatus.value = String(value);
-	await reload();
-}
 
 const reloadByKeyword = Toolkit.debounce(async () => {
 	try {
@@ -223,16 +196,16 @@ onUnmounted(() => {
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #F5F5F8;
+		background: var(--td-bg-color-page);
 		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.search-input {
-			--td-input-vertical-padding: 8px;
+			--td-input-vertical-padding: 8px 14px;
 
 			border: 1px solid rgba(148, 163, 184, .28);
 			z-index: 1;
-			background: #f8fbff;
+			background: var(--td-bg-color-container);
 			border-radius: 1rem;
 		}
 
@@ -243,7 +216,7 @@ onUnmounted(() => {
 			overflow: hidden;
 			margin-top: -1.5rem;
 			padding-top: .8rem;
-			background: #fff;
+			background: var(--td-bg-color-container);
 			border: 1px solid rgba(148, 163, 184, .18);
 			border-radius: 0 0 1rem 1rem;
 
@@ -264,7 +237,7 @@ onUnmounted(() => {
 	}
 
 	.list {
-		margin-top: 1rem;
+		margin-top: .75rem;
 
 		.item {
 			padding: 10px;

src/pages/package/CustomerPackagePayment.vue

@@ -1,237 +0,0 @@
-<template>
-	<div v-can="permissionCodes.fundReceive.create" class="package-operation-edit">
-		<customer-profile-card
-			v-if="customerPackage"
-			class="customer"
-			:customer="customerPackage.customer"
-			v-entrance-transition
-		/>
-		<t-cell-group v-if="customerPackage" title="收款信息" theme="card" v-entrance-transition>
-			<t-cell title="客户套餐" :note="customerPackage.packageNameSnapshot || '未命名套餐'" />
-			<t-cell class="amount sale" title="成交价" :note="formatPackageAmount(customerPackage.saleAmount)" />
-			<t-cell class="amount paid" title="已核销收款" :note="formatPackageAmount(customerPackage.paidAmount)" />
-			<t-cell class="amount pending" title="待核销收款" :note="formatPackageAmount(customerPackage.pendingPaidAmount)" />
-			<t-cell class="amount remaining" title="剩余待收款" :note="formatPackageAmount(getRemainingReceivableAmount(customerPackage))" />
-		</t-cell-group>
-		<t-form v-if="customerPackage" class="form" label-align="left" label-width="7rem" v-entrance-transition="70">
-			<t-form-item label="本次收款（元）" required-mark>
-				<t-input v-model.trim="amountText" type="number" align="right" borderless placeholder="本次实际收款金额" />
-			</t-form-item>
-			<t-form-item label="发生时间" content-align="right">
-				<div class="time-actions">
-					<t-button
-						theme="primary"
-						variant="outline"
-						size="extra-small"
-						:content="occurredAtText || '此刻'"
-						@click="openOccurredAtPicker"
-					/>
-					<t-button
-						v-if="occurredAtText"
-						theme="primary"
-						variant="text"
-						size="extra-small"
-						content="此刻"
-						@click="resetOccurredAt"
-					/>
-				</div>
-			</t-form-item>
-			<t-form-item label="备注">
-				<t-textarea v-model.trim="remark" borderless autosize maxlength="500" placeholder="收款备注" />
-			</t-form-item>
-		</t-form>
-		<package-photo-field v-if="customerPackage" v-model="photoItems" required title="收款凭证照片" />
-		<t-empty v-if="!customerPackage" :description="isLoading ? '正在加载套餐' : '套餐不存在'" />
-		<t-popup v-model="occurredPickerVisible" placement="bottom">
-			<t-date-time-picker
-				v-model="occurredDraft"
-				format="YYYY-MM-DD HH:mm"
-				:mode="['date', 'minute']"
-				title="发生时间"
-				@cancel="occurredPickerVisible = false"
-				@confirm="confirmOccurredAt"
-			/>
-		</t-popup>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { Time } from "timi-web";
-import { useUserStore } from "timi-web-api";
-import PackageAPI from "@/api/PackageAPI";
-import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
-import PackagePhotoField from "@/components/PackagePhotoField.vue";
-import { useNavBarStore } from "@/store/navBarStore";
-import type { GaoCustomerPackage, PackageAttachment } from "@/types/Package";
-import type { PhotoItem } from "@/types/Photo";
-import { createPackageRequestNo, formatPackageAmount, parsePackageAmount } from "@/utils/package";
-import { getErrorMessage } from "@/utils/error";
-import { Message } from "@/utils/message";
-import { permissionCodes } from "@/utils/permission";
-
-defineOptions({ name: "CustomerPackagePayment" });
-
-const route = useRoute();
-const router = useRouter();
-const userStore = useUserStore();
-const navBarStore = useNavBarStore();
-const customerPackage = ref<GaoCustomerPackage>();
-const isLoading = ref(false);
-const isSaving = ref(false);
-const amountText = ref("");
-const occurredAtText = ref("");
-const occurredDraft = ref("");
-const occurredPickerVisible = ref(false);
-const remark = ref("");
-const photoItems = ref<PhotoItem[]>([]);
-
-/** 计算扣除已核销和待核销收款后的剩余待收款金额。 */
-function getRemainingReceivableAmount(packageEntity: GaoCustomerPackage): number | undefined {
-	if (packageEntity.saleAmount === undefined) {
-		return undefined;
-	}
-	const remainingAmount = packageEntity.saleAmount - (packageEntity.paidAmount || 0) - (packageEntity.pendingPaidAmount || 0);
-	return 0 < remainingAmount ? remainingAmount : 0;
-}
-
-function resolveTimestamp(value: string): number | undefined {
-	if (!value) {
-		return undefined;
-	}
-	const timestamp = new Date(value.replace(" ", "T")).getTime();
-	return Number.isFinite(timestamp) ? timestamp : undefined;
-}
-
-function openOccurredAtPicker(): void {
-	occurredDraft.value = occurredAtText.value || Time.formatDateTime(new Date());
-	occurredPickerVisible.value = true;
-}
-
-function confirmOccurredAt(value?: string | number): void {
-	occurredAtText.value = String(value || occurredDraft.value);
-	occurredPickerVisible.value = false;
-}
-
-function resetOccurredAt(): void {
-	occurredAtText.value = "";
-	occurredDraft.value = "";
-}
-
-function buildAttachments(): PackageAttachment[] {
-	return photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: "PHOTO", name: item.attachment?.name }] : []);
-}
-
-async function loadData(): Promise<void> {
-	const id = String(route.params.id || "");
-	if (!id) {
-		return;
-	}
-	isLoading.value = true;
-	try {
-		customerPackage.value = await PackageAPI.customerPackageDetail(id);
-	} catch (error) {
-		Message.error(getErrorMessage(error, "套餐加载失败"));
-	} finally {
-		isLoading.value = false;
-	}
-}
-
-async function save(): Promise<void> {
-	if (isSaving.value) {
-		return;
-	}
-	const customerPackageId = customerPackage.value?.id;
-	const amount = parsePackageAmount(amountText.value);
-	if (!customerPackageId || amount === undefined || 0 >= amount) {
-		Message.warning("请输入大于 0 的合法收款金额");
-		return;
-	}
-	if (!photoItems.value.some(item => item.tempFileId)) {
-		Message.warning("收款必须上传至少一张凭证照片");
-		return;
-	}
-	isSaving.value = true;
-	try {
-		await PackageAPI.receivePayment({
-			requestNo: createPackageRequestNo(),
-			customerPackageId,
-			amount,
-			occurredAt: resolveTimestamp(occurredAtText.value),
-			attachmentList: buildAttachments(),
-			remark: remark.value.trim() || null
-		});
-		Message.success("收款已提交，等待核销");
-		await router.replace(`/management/customer-packages/${customerPackageId}`);
-	} catch (error) {
-		Message.error(getErrorMessage(error, "收款提交失败，请刷新后确认状态"));
-	} finally {
-		isSaving.value = false;
-	}
-}
-
-onMounted(async () => {
-	if (userStore.hasPermissions(permissionCodes.fundReceive.create)) {
-		navBarStore.setRightText("提交", "var(--td-brand-color)", save);
-	}
-	await loadData();
-});
-
-onUnmounted(() => navBarStore.clearRight());
-</script>
-
-<style scoped lang="less">
-.package-operation-edit {
-	gap: 1rem;
-	padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
-	display: flex;
-	flex-direction: column;
-
-	.customer {
-		margin: 0 1rem;
-	}
-
-	.amount {
-
-		:deep(.t-cell__note) {
-			font-weight: bold;
-		}
-
-		:deep(.t-cell__title-text),
-		:deep(.t-cell__note) {
-			color: var(--td-text-color-secondary);
-		}
-
-		&.sale :deep(.t-cell__title-text),
-		&.sale :deep(.t-cell__note) {
-			color: var(--td-brand-color);
-		}
-
-		&.paid :deep(.t-cell__title-text),
-		&.paid :deep(.t-cell__note) {
-			color: var(--td-success-color);
-		}
-
-		&.pending :deep(.t-cell__title-text),
-		&.pending :deep(.t-cell__note),
-		&.remaining :deep(.t-cell__title-text),
-		&.remaining :deep(.t-cell__note) {
-			color: var(--td-warning-color);
-		}
-	}
-
-	.form {
-		border-radius: .75rem;
-	}
-
-	.time-actions {
-		gap: .5rem;
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
-	}
-
-	.package-photo-field {
-		padding: 0 1rem;
-	}
-}
-</style>

src/pages/package/CustomerPackageRefund.vue

@@ -1,173 +0,0 @@
-<template>
-	<div v-can="permissionCodes.fund.refund" class="package-operation-edit">
-		<t-cell-group v-if="customerPackage" title="退款信息" theme="card" v-entrance-transition>
-			<t-cell title="客户套餐" :note="customerPackage.packageNameSnapshot || '未命名套餐'" />
-			<t-cell title="已核销收款" :note="formatPackageAmount(customerPackage.paidAmount)" />
-			<t-cell title="当前退款状态" :note="getRefundStatusText(customerPackage.refundStatus)" />
-		</t-cell-group>
-		<t-form v-if="customerPackage" class="form" label-align="left" label-width="6rem" v-entrance-transition="70">
-			<t-form-item label="确认无需退款" content-align="right">
-				<t-switch v-model="confirmNone" />
-			</t-form-item>
-			<t-form-item v-if="!confirmNone" label="退款金额（元）" required-mark>
-				<t-input v-model.trim="amountText" type="number" align="right" borderless placeholder="请输入实际退款金额，不自动填充" />
-			</t-form-item>
-			<t-form-item label="退款原因" required-mark>
-				<t-textarea v-model.trim="reason" borderless autosize maxlength="500" placeholder="请输入原因" />
-			</t-form-item>
-			<t-form-item label="发生时间" arrow @click="occurredPickerVisible = true">
-				<span class="picker-text" v-text="occurredAtText || '使用当前时间'" />
-			</t-form-item>
-			<t-form-item label="备注">
-				<t-textarea v-model.trim="remark" borderless autosize maxlength="500" placeholder="备注（可选）" />
-			</t-form-item>
-		</t-form>
-		<package-photo-field v-if="customerPackage && !confirmNone" v-model="photoItems" required title="退款凭证照片" />
-		<t-empty v-if="!customerPackage" :description="isLoading ? '正在加载套餐' : '套餐不存在'" />
-		<t-popup v-model="occurredPickerVisible" placement="bottom">
-			<t-date-time-picker v-model="occurredDraft" format="YYYY-MM-DD HH:mm" :mode="['date', 'minute']" title="发生时间" @cancel="occurredPickerVisible = false" @confirm="confirmOccurredAt" />
-		</t-popup>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { useUserStore } from "timi-web-api";
-import PackageAPI from "@/api/PackageAPI";
-import PackagePhotoField from "@/components/PackagePhotoField.vue";
-import { useNavBarStore } from "@/store/navBarStore";
-import type { GaoCustomerPackage, PackageAttachment } from "@/types/Package";
-import type { PhotoItem } from "@/types/Photo";
-import { createPackageRequestNo, formatPackageAmount, parsePackageAmount, getRefundStatusText } from "@/utils/package";
-import { getErrorMessage } from "@/utils/error";
-import { Message } from "@/utils/message";
-import { permissionCodes } from "@/utils/permission";
-
-defineOptions({ name: "CustomerPackageRefund" });
-
-const route = useRoute();
-const router = useRouter();
-const userStore = useUserStore();
-const navBarStore = useNavBarStore();
-const customerPackage = ref<GaoCustomerPackage>();
-const confirmNone = ref(false);
-const amountText = ref("");
-const reason = ref("");
-const remark = ref("");
-const occurredAtText = ref("");
-const occurredDraft = ref("");
-const occurredPickerVisible = ref(false);
-const photoItems = ref<PhotoItem[]>([]);
-const isLoading = ref(false);
-const isSaving = ref(false);
-
-function confirmOccurredAt(value: string | number): void {
-	occurredAtText.value = String(value);
-	occurredPickerVisible.value = false;
-}
-
-function resolveTimestamp(value: string): number | undefined {
-	if (!value) {
-		return undefined;
-	}
-	const timestamp = new Date(value.replace(" ", "T")).getTime();
-	return Number.isFinite(timestamp) ? timestamp : undefined;
-}
-
-function buildAttachments(): PackageAttachment[] {
-	return photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: "PHOTO", name: item.attachment?.name }] : []);
-}
-
-async function loadData(): Promise<void> {
-	const id = String(route.params.id || "");
-	if (!id) {
-		return;
-	}
-	isLoading.value = true;
-	try {
-		customerPackage.value = await PackageAPI.customerPackageDetail(id);
-	} catch (error) {
-		Message.error(getErrorMessage(error, "套餐加载失败"));
-	} finally {
-		isLoading.value = false;
-	}
-}
-
-async function save(): Promise<void> {
-	if (isSaving.value) {
-		return;
-	}
-	const customerPackageId = customerPackage.value?.id;
-	if (!customerPackageId || !reason.value.trim()) {
-		Message.warning("请输入退款原因");
-		return;
-	}
-	const amount = confirmNone.value ? undefined : parsePackageAmount(amountText.value);
-	if (!confirmNone.value && (amount === undefined || 0 >= amount)) {
-		Message.warning("请输入大于 0 的合法退款金额");
-		return;
-	}
-	if (!confirmNone.value && !photoItems.value.some(item => item.tempFileId)) {
-		Message.warning("退款必须上传至少一张凭证照片");
-		return;
-	}
-	isSaving.value = true;
-	try {
-		if (confirmNone.value) {
-			await PackageAPI.confirmNoRefund({
-				requestNo: createPackageRequestNo(),
-				customerPackageId,
-				occurredAt: resolveTimestamp(occurredAtText.value),
-				reason: reason.value.trim(),
-				remark: remark.value.trim() || null
-			});
-		} else {
-			await PackageAPI.refund({
-				requestNo: createPackageRequestNo(),
-				customerPackageId,
-				amount: amount!,
-				occurredAt: resolveTimestamp(occurredAtText.value),
-				reason: reason.value.trim(),
-				attachmentList: buildAttachments(),
-				remark: remark.value.trim() || null
-			});
-		}
-		Message.success(confirmNone.value ? "已确认无需退款" : "退款已登记");
-		await router.replace(`/management/customer-packages/${customerPackageId}`);
-	} catch (error) {
-		Message.error(getErrorMessage(error, "退款操作失败，请刷新后确认状态"));
-	} finally {
-		isSaving.value = false;
-	}
-}
-
-onMounted(async () => {
-	if (userStore.hasPermissions(permissionCodes.fund.refund)) {
-		navBarStore.setRightText("提交处理", "var(--td-brand-color)", save);
-	}
-	await loadData();
-});
-
-onUnmounted(() => navBarStore.clearRight());
-</script>
-
-<style scoped lang="less">
-.package-operation-edit {
-	gap: 1rem;
-	padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
-	display: flex;
-	flex-direction: column;
-
-	.form {
-		border-radius: .75rem;
-	}
-
-	.picker-text {
-		width: 100%;
-		text-align: right;
-	}
-
-	.package-photo-field {
-		padding: 0 1rem;
-	}
-}
-</style>

src/pages/package/FundRecordDetail.vue

@@ -1,11 +1,19 @@
 <template>
 	<div v-can="permissionCodes.fundRecord.read" class="package-record-detail">
 		<template v-if="record">
+			<section class="hero" v-entrance-transition>
+				<span class="eyebrow" v-text="'资金流水'" />
+				<div class="hero-title">
+					<h1 v-text="getFundOperationText(record.operationType)" />
+					<t-tag :content="getFundStatusText(record.status)" :theme="getStatusTheme(record.status)" variant="light-outline" />
+				</div>
+				<strong class="amount" v-text="formatPackageAmount(record.amount)" />
+			</section>
 			<t-cell-group title="资金记录" theme="card" v-entrance-transition>
 				<t-cell title="操作类型" :note="getFundOperationText(record.operationType)" />
 				<t-cell title="状态"><template #note><t-tag :content="getFundStatusText(record.status)" :theme="getStatusTheme(record.status)" variant="light-outline" /></template></t-cell>
 				<t-cell title="金额" :note="formatPackageAmount(record.amount)" />
-				<t-cell title="客户套餐" :note="record.customerPackageId || record.bizId || '未知'" />
+				<t-cell title="销售订单" :note="record.bizId || '未知'" />
 				<t-cell title="发生时间" :note="record.occurredAt ? Time.toDateTime(record.occurredAt) : '未知'" />
 				<t-cell title="提交人" :note="record.operator?.name || record.operator?.nick || record.operatorUserId || '未知'" />
 				<t-cell title="处理人" :note="record.verifier?.name || record.verifier?.nick || record.verifierUserId || '未处理'" />
@@ -32,14 +40,15 @@
 import { DialogPlugin } from "tdesign-mobile-vue";
 import { Time } from "timi-web";
 import { useUserStore } from "timi-web-api";
-import PackageAPI from "@/api/PackageAPI";
+import SalesOrderAPI from "@/api/SalesOrderAPI";
 import PhotoScroller from "@/components/PhotoScroller.vue";
 import { useNavBarStore } from "@/store/navBarStore";
-import type { FundRecordStatus, GaoFundRecord } from "@/types/Package";
+import type { FundRecord, FundRecordStatus } from "@/types/SalesOrder";
 import type { PhotoItem } from "@/types/Photo";
 import { getAttachmentReadURL } from "@/utils/attachment";
 import { getErrorMessage } from "@/utils/error";
-import { formatPackageAmount, getFundOperationText, getFundStatusText } from "@/utils/package";
+import { formatPackageAmount } from "@/utils/package";
+import { getFundOperationText, getFundStatusText } from "@/utils/salesOrder";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 
@@ -51,7 +60,7 @@ const route = useRoute();
 const router = useRouter();
 const userStore = useUserStore();
 const navBarStore = useNavBarStore();
-const record = ref<GaoFundRecord>();
+const record = ref<FundRecord>();
 const isLoading = ref(false);
 const isOperating = ref(false);
 const reasonDialogVisible = ref(false);
@@ -72,8 +81,8 @@ const photoItems = computed<PhotoItem[]>(() => (record.value?.attachmentList ||
 	})));
 const photoURLList = computed(() => photoItems.value.map(item => item.url));
 
-function getStatusTheme(status?: FundRecordStatus): "success" | "danger" | "default" {
+function getStatusTheme(status?: FundRecordStatus): "success" | "warning" | "danger" | "default" {
-	return status === "VERIFIED" ? "success" : status === "REJECTED" ? "danger" : "default";
+	return status === "VERIFIED" ? "success" : status === "PENDING" ? "warning" : status === "REJECTED" ? "danger" : "default";
 }
 
 async function loadData(): Promise<void> {
@@ -83,7 +92,7 @@ async function loadData(): Promise<void> {
 	}
 	isLoading.value = true;
 	try {
-		record.value = await PackageAPI.fundRecordDetail(id);
+		record.value = await SalesOrderAPI.fundRecordDetail(id);
 	} catch (error) {
 		Message.error(getErrorMessage(error, "资金记录加载失败"));
 	} finally {
@@ -92,9 +101,8 @@ async function loadData(): Promise<void> {
 }
 
 async function refreshRelatedPackage(): Promise<void> {
-	const customerPackageId = record.value?.customerPackageId || record.value?.bizId;
+	if (record.value?.bizId) {
-	if (customerPackageId) {
+		await SalesOrderAPI.detail(record.value.bizId);
-		await PackageAPI.customerPackageDetail(customerPackageId);
 	}
 }
 
@@ -109,7 +117,7 @@ async function verifyReceive(): Promise<void> {
 		onConfirm: async () => {
 			isOperating.value = true;
 			try {
-				await PackageAPI.verifyPayment(record.value!.id!);
+				await SalesOrderAPI.verifyPayment(record.value!.id!);
 				await refreshRelatedPackage();
 				Message.success("收款已核销");
 				await loadData();
@@ -140,9 +148,9 @@ async function submitReason(): Promise<void> {
 	isOperating.value = true;
 	try {
 		if (reasonAction.value === "reject") {
-			await PackageAPI.rejectPayment(record.value.id, reasonText.value.trim());
+			await SalesOrderAPI.rejectPayment({ fundRecordId: record.value.id, reason: reasonText.value.trim() });
 		} else {
-			await PackageAPI.cancelPayment(record.value.id, reasonText.value.trim());
+			await SalesOrderAPI.cancelPayment({ fundRecordId: record.value.id, reason: reasonText.value.trim() });
 		}
 		reasonDialogVisible.value = false;
 		await refreshRelatedPackage();
@@ -172,6 +180,44 @@ onUnmounted(() => navBarStore.clearRight());
 	display: flex;
 	flex-direction: column;
 
+	.hero {
+		margin: 0 1rem;
+		padding: 1rem;
+		background: linear-gradient(135deg, #eff6ff, #f0fdf4);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1.25rem;
+
+		.eyebrow {
+			color: #2563eb;
+			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;
+			font-size: 1.2rem;
+			line-height: 1.35;
+		}
+
+		.amount {
+			color: #0f766e;
+			display: block;
+			margin-top: .75rem;
+			font-size: 1.5rem;
+			line-height: 1.2;
+		}
+	}
+
 	:deep(.photo-scroller) {
 		padding: 0 1rem;
 	}
@@ -187,4 +233,16 @@ onUnmounted(() => navBarStore.clearRight());
 		}
 	}
 }
+
+:global(html.theme-dark) .package-record-detail .hero {
+	background: linear-gradient(135deg, rgba(37, 99, 235, .2), rgba(15, 118, 110, .18));
+
+	.eyebrow {
+		color: #93c5fd;
+	}
+
+	.amount {
+		color: #99f6e4;
+	}
+}
 </style>

src/pages/package/FundRecordList.vue

@@ -1,9 +1,11 @@
 <template>
 	<div v-can="permissionCodes.fundRecord.read" class="package-record-list">
+		<div class="filters">
 			<t-dropdown-menu>
 				<t-dropdown-item v-model="operationType" label="操作类型" :options="operationOptions" @change="selectOperation" />
 				<t-dropdown-item v-model="status" label="状态" :options="statusOptions" @change="selectStatus" />
 			</t-dropdown-menu>
+		</div>
 		<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="reload" @scrolltolower="loadMore">
 			<t-cell-group v-if="recordList.length" theme="card">
 				<t-cell
@@ -34,11 +36,12 @@
 <script setup lang="ts">
 import { type DropdownValue } from "tdesign-mobile-vue";
 import { Time } from "timi-web";
-import PackageAPI from "@/api/PackageAPI";
+import SalesOrderAPI from "@/api/SalesOrderAPI";
 import { useNavBarStore } from "@/store/navBarStore";
-import type { FundOperationType, FundRecordStatus, GaoFundRecord } from "@/types/Package";
+import type { FundOperationType, FundRecord, FundRecordStatus } from "@/types/SalesOrder";
 import { getErrorMessage } from "@/utils/error";
-import { formatPackageAmount, getFundOperationText, getFundStatusText } from "@/utils/package";
+import { formatPackageAmount } from "@/utils/package";
+import { getFundOperationText, getFundStatusText } from "@/utils/salesOrder";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 
@@ -47,7 +50,7 @@ defineOptions({ name: "FundRecordList" });
 const route = useRoute();
 const router = useRouter();
 const navBarStore = useNavBarStore();
-const recordList = ref<GaoFundRecord[]>([]);
+const recordList = ref<FundRecord[]>([]);
 const operationType = ref(route.query.operationType === "RECEIVE" ? "RECEIVE" : "ALL");
 const status = ref(route.query.status === "PENDING" ? "PENDING" : "ALL");
 const pageIndex = ref(0);
@@ -77,10 +80,10 @@ async function loadMore(): Promise<void> {
 	}
 	loading.value = true;
 	try {
-		const result = await PackageAPI.fundRecordList({
+		const result = await SalesOrderAPI.fundRecordList({
 			index: pageIndex.value,
 			size: 15,
-			customerPackageId: String(route.query.customerPackageId || "") || undefined,
+			salesOrderId: String(route.query.salesOrderId || "") || undefined,
 			operationType: operationType.value === "ALL" ? undefined : operationType.value as FundOperationType,
 			status: status.value === "ALL" ? undefined : status.value as FundRecordStatus
 		});
@@ -119,15 +122,15 @@ async function selectStatus(value: DropdownValue): Promise<void> {
 	}
 }
 
-function getDescription(item: GaoFundRecord): string {
+function getDescription(item: FundRecord): string {
-	return `${item.customer?.name || item.customerId || "未知客户"}｜${item.occurredAt ? Time.toDateTime(item.occurredAt) : "时间未知"}`;
+	return `${item.customer?.name || item.customerId || "未知客户"}｜订单 ${item.bizId || "未知"}｜${item.occurredAt ? Time.toDateTime(item.occurredAt) : "时间未知"}`;
 }
 
 function getStatusTheme(statusValue?: FundRecordStatus): "success" | "warning" | "danger" | "default" {
 	return statusValue === "VERIFIED" ? "success" : statusValue === "PENDING" ? "warning" : statusValue === "REJECTED" ? "danger" : "default";
 }
 
-async function toDetail(item: GaoFundRecord): Promise<void> {
+async function toDetail(item: FundRecord): Promise<void> {
 	if (item.id) {
 		await router.push(`/management/fund-records/${item.id}`);
 	}
@@ -147,7 +150,24 @@ onUnmounted(() => navBarStore.clearRight());
 
 <style scoped lang="less">
 .package-record-list {
-	padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
+	padding: var(--app-nav-height) 0 1rem;
+
+	.filters {
+		top: var(--app-nav-height);
+		z-index: 10;
+		padding: .75rem 1rem .5rem;
+		position: sticky;
+		background: var(--td-bg-color-page);
+		box-shadow: var(--td-shadow-1);
+
+		:deep(.t-dropdown-menu) {
+			border-radius: .875rem;
+		}
+	}
+
+	:deep(.t-pull-down-refresh) {
+		padding-top: .75rem;
+	}
 
 	.title-row {
 		gap: .5rem;

src/pages/package/FundRecordRevoke.vue

@@ -4,7 +4,7 @@
 			<t-cell title="操作类型" :note="getFundOperationText(record.operationType)" />
 			<t-cell title="金额" :note="formatPackageAmount(record.amount)" />
 			<t-cell title="原状态" :note="getFundStatusText(record.status)" />
-			<t-cell title="客户套餐" :note="record.customerPackageId || record.bizId || '未知'" />
+			<t-cell title="销售订单" :note="record.bizId || '未知'" />
 		</t-cell-group>
 		<t-form v-if="record" class="form" label-align="left" label-width="6rem" v-entrance-transition="70">
 			<t-form-item label="冲正原因" required-mark><t-textarea v-model.trim="reason" borderless autosize maxlength="500" placeholder="请输入冲正原因" /></t-form-item>
@@ -20,13 +20,14 @@
 </template>
 
 <script setup lang="ts">
-import { useUserStore } from "timi-web-api";
+import { useUserStore, type Attachment } from "timi-web-api";
-import PackageAPI from "@/api/PackageAPI";
+import SalesOrderAPI from "@/api/SalesOrderAPI";
 import PackagePhotoField from "@/components/PackagePhotoField.vue";
 import { useNavBarStore } from "@/store/navBarStore";
-import type { GaoFundRecord, PackageAttachment } from "@/types/Package";
+import type { FundRecord } from "@/types/SalesOrder";
 import type { PhotoItem } from "@/types/Photo";
-import { createPackageRequestNo, formatPackageAmount, getFundOperationText, getFundStatusText } from "@/utils/package";
+import { createPackageRequestNo, formatPackageAmount } from "@/utils/package";
+import { getFundOperationText, getFundStatusText } from "@/utils/salesOrder";
 import { getErrorMessage } from "@/utils/error";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
@@ -37,7 +38,7 @@ const route = useRoute();
 const router = useRouter();
 const userStore = useUserStore();
 const navBarStore = useNavBarStore();
-const record = ref<GaoFundRecord>();
+const record = ref<FundRecord>();
 const reason = ref("");
 const remark = ref("");
 const occurredAtText = ref("");
@@ -46,6 +47,7 @@ const pickerVisible = ref(false);
 const photoItems = ref<PhotoItem[]>([]);
 const isLoading = ref(false);
 const isSaving = ref(false);
+const requestNo = ref("");
 
 function confirmTime(value: string | number): void {
 	occurredAtText.value = String(value);
@@ -60,7 +62,7 @@ function resolveTimestamp(value: string): number | undefined {
 	return Number.isFinite(timestamp) ? timestamp : undefined;
 }
 
-function buildAttachments(): PackageAttachment[] {
+function buildAttachments(): Partial<Attachment>[] {
 	return photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: "PHOTO" }] : []);
 }
 
@@ -71,7 +73,7 @@ async function loadData(): Promise<void> {
 	}
 	isLoading.value = true;
 	try {
-		record.value = await PackageAPI.fundRecordDetail(id);
+		record.value = await SalesOrderAPI.fundRecordDetail(id);
 	} catch (error) {
 		Message.error(getErrorMessage(error, "资金记录加载失败"));
 	} finally {
@@ -97,8 +99,11 @@ async function save(): Promise<void> {
 	}
 	isSaving.value = true;
 	try {
-		const result = await PackageAPI.revokeFundRecord({
+		if (!requestNo.value) {
-			requestNo: createPackageRequestNo(),
+			requestNo.value = createPackageRequestNo();
+		}
+		const result = await SalesOrderAPI.fundRecordRevoke({
+			requestNo: requestNo.value,
 			fundRecordId: record.value.id,
 			occurredAt: resolveTimestamp(occurredAtText.value),
 			reason: reason.value.trim(),
@@ -106,9 +111,8 @@ async function save(): Promise<void> {
 			remark: remark.value.trim() || null
 		});
 		Message.success("资金记录已冲正");
-		const customerPackageId = record.value.customerPackageId || record.value.bizId;
+		if (record.value.bizId) {
-		if (customerPackageId) {
+			await router.replace(`/management/sales-orders/${record.value.bizId}`);
-			await router.replace(`/management/customer-packages/${customerPackageId}`);
 			return;
 		}
 		await router.replace(`/management/fund-records/${result.id || record.value.id}`);
@@ -137,7 +141,12 @@ onUnmounted(() => navBarStore.clearRight());
 	flex-direction: column;
 
 	.form {
-		border-radius: .75rem;
+		margin: 0 1rem;
+		padding: 0 .5rem;
+		background: var(--td-bg-color-container);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1rem;
+		overflow: hidden;
 	}
 
 	.picker-text {

src/pages/package/PackageConfigDetail.vue

@@ -2,8 +2,10 @@
 	<div v-can="permissionCodes.packageConfig.read" class="package-config-detail">
 		<template v-if="config">
 			<section class="hero" v-entrance-transition>
-				<div class="title"><h2 v-text="config.name || '未命名套餐'" /><t-tag :content="getPackageConfigStatusText(config.status)" variant="light-outline" :theme="getStatusTheme(config.status)" /></div>
+				<span class="eyebrow" v-text="'套餐管理'" />
+				<div class="title"><h1 v-text="config.name || '未命名套餐'" /><t-tag :content="getPackageConfigStatusText(config.status)" variant="light-outline" :theme="getStatusTheme(config.status)" /></div>
 				<p v-text="config.description || '暂无套餐说明'" />
+				<div class="hero-meta"><span v-text="`${config.itemList?.length || 0} 项产品权益`" /><strong v-text="formatPackageAmount(config.standardAmount)" /></div>
 			</section>
 			<t-cell-group title="基本信息" theme="card" v-entrance-transition="70">
 				<t-cell title="标准价" :note="formatPackageAmount(config.standardAmount)" />
@@ -14,9 +16,9 @@
 			<t-cell-group title="产品权益" theme="card" v-entrance-transition="140">
 				<t-cell
 					v-for="item in config.itemList || []"
-					:key="item.id || `${item.productName}-${item.unit}`"
+					:key="item.id || `${item.productId}-${item.productUnitId}`"
-					:title="item.productName"
+					:title="item.productNameSnapshot || '未命名产品'"
-					:note="`${item.defaultQuantity} ${item.unit}${item.remark ? `｜${item.remark}` : ''}`"
+					:note="`${item.defaultQuantity} ${item.unitSnapshot || ''}${item.remark ? `｜${item.remark}` : ''}`"
 				/>
 				<div v-if="!config.itemList?.length" class="empty" v-text="'暂无产品权益'" />
 			</t-cell-group>
@@ -148,9 +150,18 @@ onUnmounted(() => navBarStore.clearRight());
 			justify-content: space-between;
 		}
 
-		h2 {
+		.eyebrow {
+			color: var(--td-brand-color);
+			display: block;
+			font-size: .6875rem;
+			font-weight: 700;
+			letter-spacing: .08em;
+		}
+
+		h1 {
 			margin: 0;
-			font-size: 1.125rem;
+			font-size: 1.25rem;
+			line-height: 1.35;
 		}
 
 		p {
@@ -158,6 +169,31 @@ onUnmounted(() => navBarStore.clearRight());
 			margin: .5rem 0 0;
 			line-height: 1.5;
 		}
+
+		.hero-meta {
+			gap: .75rem;
+			display: flex;
+			margin-top: .75rem;
+			color: var(--td-text-color-secondary);
+			align-items: center;
+			justify-content: space-between;
+		}
+
+		strong {
+			color: #c2410c;
+			font-size: 1.2rem;
+			white-space: nowrap;
+		}
+	}
+}
+
+:global(html.theme-dark) .package-config-detail .hero {
+	.eyebrow {
+		color: #99f6e4;
+	}
+
+	strong {
+		color: #fdba74;
 	}
 }
 </style>

src/pages/package/PackageConfigEdit.vue

@@ -36,12 +36,15 @@
 					label-width="6rem"
 				>
 					<div class="header">
-						<t-input v-model="item.productName" borderless placeholder="产品名称" />
+						<strong v-text="item.productNameSnapshot || '未选择产品'" />
 						<t-button theme="danger" variant="text" size="small" @click="removeItem(index)">删除</t-button>
 					</div>
-					<t-form-item label="单位" required-mark>
+					<product-selector
-						<t-input v-model.trim="item.unit" borderless placeholder="例如 盒、次" />
+						:model-value="item.productId && item.productUnitId ? {productId: item.productId, productUnitId: item.productUnitId} : undefined"
-					</t-form-item>
+						label="产品单位"
+						required-mark
+						@update:model-value="applyProduct(index, $event)"
+					/>
 					<t-form-item label="默认配额" required-mark>
 						<t-input v-model.trim="item.defaultQuantity" type="number" borderless />
 					</t-form-item>
@@ -79,13 +82,15 @@ import PackageAPI from "@/api/PackageAPI";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { GaoPackageConfig, PackageConfigItem, PackageConfigStatus } from "@/types/Package";
+import ProductAPI from "@/api/ProductAPI";
+import type { Product } from "@/types/Product";
 import { getErrorMessage } from "@/utils/error";
 import { formatPackageAmountInput, getPackageConfigStatusText, normalizePackageQuantity, parsePackageAmount } from "@/utils/package";
 import { Message } from "@/utils/message";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
 
 type PickerValue = string | number;
-type PackageConfigFormItem = PackageConfigItem & { clientKey: string };
+type PackageConfigFormItem = Partial<PackageConfigItem> & { clientKey: string };
 
 defineOptions({ name: "PackageConfigEdit" });
 
@@ -132,13 +137,29 @@ function createItem(item?: Partial<PackageConfigItem>): PackageConfigFormItem {
 	return {
 		...item,
 		clientKey: window.crypto.randomUUID(),
-		productName: item?.productName || "",
-		unit: item?.unit || "",
 		defaultQuantity: item?.defaultQuantity ?? "",
 		remark: item?.remark || ""
 	};
 }
 
+const productCache = new Map<string, Product>();
+
+async function applyProduct(index: number, value?: { productId: string; productUnitId: string }): Promise<void> {
+	if (!value) {
+		return;
+	}
+	const product = productCache.get(value.productId) || await ProductAPI.detail(value.productId);
+	productCache.set(value.productId, product);
+	const unit = product.unitList?.find(item => item.id === value.productUnitId);
+	Object.assign(form.itemList[index], {
+		productId: value.productId,
+		productUnitId: value.productUnitId,
+		productNameSnapshot: product.name,
+		unitSnapshot: unit?.name || "",
+		baseQuantityPerUnitSnapshot: unit?.baseQuantityPerUnit
+	});
+}
+
 function addItem(): void {
 	form.itemList.push(createItem());
 }
@@ -224,10 +245,10 @@ function validateForm(): boolean {
 	}
 	const keySet = new Set<string>();
 	for (const item of form.itemList) {
-		const quantity = normalizePackageQuantity(item.defaultQuantity);
+		const quantity = normalizePackageQuantity(item.defaultQuantity ?? "");
-		const key = `${item.productName.trim()}\u0000${item.unit.trim()}`;
+		const key = `${item.productId}\u0000${item.productUnitId}`;
-		if (!item.productName.trim() || !item.unit.trim() || !quantity || quantity === "0") {
+		if (!item.productId || !item.productUnitId || !quantity || quantity === "0") {
-			Message.warning("产品名称、单位和正数量不能为空");
+			Message.warning("产品单位和正数量不能为空");
 			return false;
 		}
 		if (keySet.has(key)) {
@@ -261,9 +282,9 @@ async function save(): Promise<void> {
 			beginAt: form.beginAt ?? null,
 			endAt: form.endAt ?? null,
 			itemList: form.itemList.map((item, index) => ({
-				productName: item.productName.trim(),
+				productId: item.productId!,
-				unit: item.unit.trim(),
+				productUnitId: item.productUnitId!,
-				defaultQuantity: normalizePackageQuantity(item.defaultQuantity)!,
+				defaultQuantity: normalizePackageQuantity(item.defaultQuantity ?? "")!,
 				sort: index,
 				remark: item.remark?.trim() || null
 			}))
@@ -337,6 +358,14 @@ onUnmounted(() => navBarStore.clearRight());
 	padding: calc(var(--app-nav-height) + 1rem) 0 calc(1rem + env(safe-area-inset-bottom, 0));
 	flex-direction: column;
 
+	.form {
+		margin: 0 1rem;
+		background: var(--td-bg-color-container);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1rem;
+		overflow: hidden;
+	}
+
 	.items {
 		padding: 1rem 0;
 

src/pages/package/PackageConfigList.vue

@@ -224,7 +224,7 @@ onUnmounted(() => {
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #F5F5F8;
+		background: var(--td-bg-color-page);
 		box-shadow: var(--td-shadow-1);
 
 		.keyword {
@@ -232,7 +232,7 @@ onUnmounted(() => {
 			border: 1px solid var(--td-component-border);
 			z-index: 1;
 			padding: .5rem 1rem;
-			background: #f8fbff;
+			background: var(--td-bg-color-container);
 			border-radius: 1rem;
 		}
 

src/pages/package/PackageDeliveryDetail.vue

@@ -1,208 +0,0 @@
-<template>
-	<div v-can="permissionCodes.packageDelivery.read" class="package-record-detail">
-		<template v-if="delivery">
-			<t-cell-group title="发放单信息" theme="card" v-entrance-transition>
-				<t-cell title="操作类型" :note="getDeliveryOperationText(delivery.operationType)" />
-				<t-cell title="状态"><template #note><t-tag :content="getDeliveryStatusText(delivery.status)" :theme="getStatusTheme(delivery.status)" variant="light-outline" /></template></t-cell>
-				<t-cell title="客户套餐" :note="delivery.customerPackageId || '未知'" />
-				<t-cell title="发放时间" :note="delivery.deliveredAt ? Time.toDateTime(delivery.deliveredAt) : '未知'" />
-				<t-cell title="提交人" :note="delivery.operator?.name || delivery.operator?.nick || delivery.operatorUserId || '未知'" />
-				<t-cell title="处理人" :note="delivery.verifier?.name || delivery.verifier?.nick || delivery.verifierUserId || '未处理'" />
-				<t-cell v-if="delivery.sourceDeliveryId" title="原发放单" :note="delivery.sourceDeliveryId" />
-				<t-cell v-if="delivery.reason" title="原因" :note="delivery.reason" />
-			</t-cell-group>
-			<t-cell-group title="本单明细" theme="card" v-entrance-transition="70">
-				<t-cell
-					v-for="item in delivery.itemList || []"
-					:key="item.customerPackageItemId || item.productNameSnapshot"
-					:title="item.productNameSnapshot || '产品'"
-					:note="`${getPackageQuantityText(item.quantity)} ${item.unitSnapshot || ''}`"
-				/>
-				<div v-if="!delivery.itemList?.length" class="empty" v-text="'暂无明细'" />
-			</t-cell-group>
-			<photo-scroller :model-value="photoURLList" :photo-items="photoItems" title="业务照片" :show-add="false" :show-remove="false" :show-viewer-actions="false" />
-			<section class="actions" v-if="canVerify || canCancel || canRevoke" v-entrance-transition="140">
-				<t-button v-if="canVerify && isPending" theme="primary" @click="verify">核销发放</t-button>
-				<t-button v-if="canVerify && isPending" theme="default" variant="outline" @click="openReasonDialog('reject')">拒绝发放</t-button>
-				<t-button v-if="canCancel && isPending" theme="default" variant="outline" @click="openReasonDialog('cancel')">撤销发放</t-button>
-				<t-button v-if="canRevoke && isVerifiedDelivery" theme="danger" variant="outline" @click="toRevoke">整单冲正</t-button>
-			</section>
-		</template>
-		<t-empty v-else :description="isLoading ? '正在加载发放单' : '发放单不存在'" />
-		<t-dialog v-model:visible="reasonDialogVisible" :title="reasonTitle" :confirm-btn="reasonActionText" @confirm="submitReason">
-			<t-textarea v-model.trim="reasonText" borderless autosize placeholder="请输入原因" />
-		</t-dialog>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { DialogPlugin } from "tdesign-mobile-vue";
-import { Time } from "timi-web";
-import { useUserStore } from "timi-web-api";
-import PackageAPI from "@/api/PackageAPI";
-import PhotoScroller from "@/components/PhotoScroller.vue";
-import { useNavBarStore } from "@/store/navBarStore";
-import type { DeliveryStatus, GaoCustomerPackage, GaoPackageDelivery } from "@/types/Package";
-import type { PhotoItem } from "@/types/Photo";
-import { getAttachmentReadURL } from "@/utils/attachment";
-import { getDeliveryOperationText, getDeliveryStatusText, getPackageQuantityText, isStoreManagerRequiredForPackageDelivery } from "@/utils/package";
-import { getErrorMessage } from "@/utils/error";
-import { Message } from "@/utils/message";
-import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
-
-type ReasonAction = "reject" | "cancel";
-
-defineOptions({ name: "PackageDeliveryDetail" });
-
-const route = useRoute();
-const router = useRouter();
-const userStore = useUserStore();
-const navBarStore = useNavBarStore();
-const delivery = ref<GaoPackageDelivery>();
-const customerPackage = ref<GaoCustomerPackage>();
-const isLoading = ref(false);
-const isOperating = ref(false);
-const reasonDialogVisible = ref(false);
-const reasonText = ref("");
-const reasonAction = ref<ReasonAction>("reject");
-const isPending = computed(() => delivery.value?.operationType === "DELIVER" && delivery.value.status === "PENDING");
-const isVerifiedDelivery = computed(() => delivery.value?.operationType === "DELIVER" && delivery.value.status === "VERIFIED");
-const isStoreManager = computed(() => userStore.hasRoles(gaoRoleCodes.storeManager) && !userStore.hasRoles(gaoRoleCodes.globalManager));
-const canVerify = computed(() => userStore.hasPermissions(permissionCodes.packageDelivery.verify)
-	&& (!isStoreManagerRequiredForPackageDelivery(customerPackage.value) || isStoreManager.value));
-const canCancel = computed(() => userStore.hasPermissions(permissionCodes.packageDelivery.create));
-const canRevoke = computed(() => userStore.hasPermissions(permissionCodes.packageDelivery.revoke));
-const reasonTitle = computed(() => reasonAction.value === "reject" ? "拒绝发放" : "撤销发放");
-const reasonActionText = computed(() => reasonAction.value === "reject" ? "拒绝" : "撤销");
-const photoItems = computed<PhotoItem[]>(() => (delivery.value?.attachmentList || [])
-	.filter(item => !!item.id)
-	.map(item => ({
-		attachment: item,
-		attachType: item.attachType || "PHOTO",
-		url: getAttachmentReadURL(item.id || "")
-	})));
-const photoURLList = computed(() => photoItems.value.map(item => item.url));
-
-function getStatusTheme(status?: DeliveryStatus): "success" | "danger" | "default" {
-	return status === "VERIFIED" ? "success" : status === "REJECTED" ? "danger" : "default";
-}
-
-async function loadData(): Promise<void> {
-	const id = String(route.params.id || "");
-	if (!id) {
-		return;
-	}
-	isLoading.value = true;
-	try {
-		delivery.value = await PackageAPI.deliveryDetail(id);
-		customerPackage.value = delivery.value.customerPackageId ? await PackageAPI.customerPackageDetail(delivery.value.customerPackageId) : undefined;
-	} catch (error) {
-		customerPackage.value = undefined;
-		Message.error(getErrorMessage(error, "发放单加载失败"));
-	} finally {
-		isLoading.value = false;
-	}
-}
-
-async function refreshRelatedPackage(): Promise<void> {
-	if (delivery.value?.customerPackageId) {
-		await PackageAPI.customerPackageDetail(delivery.value.customerPackageId);
-	}
-}
-
-async function verify(): Promise<void> {
-	if (!delivery.value?.id || !isPending.value || !canVerify.value || isOperating.value) {
-		return;
-	}
-	const dialog = DialogPlugin.confirm({
-		title: "核销发放",
-		content: "核销后会增加已发数量，所有权益完成核销后套餐可能变为已履约。确定继续？",
-		confirmBtn: "核销",
-		onConfirm: async () => {
-			isOperating.value = true;
-			try {
-				await PackageAPI.verifyDelivery(delivery.value!.id!);
-				await refreshRelatedPackage();
-				Message.success("发放单已核销");
-				await loadData();
-			} catch (error) {
-				Message.error(getErrorMessage(error, "发放核销失败，请刷新后确认状态"));
-			} finally {
-				isOperating.value = false;
-				dialog.destroy();
-			}
-		}
-	});
-}
-
-function openReasonDialog(action: ReasonAction): void {
-	if (isOperating.value || !isPending.value) {
-		return;
-	}
-	reasonAction.value = action;
-	reasonText.value = "";
-	reasonDialogVisible.value = true;
-}
-
-async function submitReason(): Promise<void> {
-	if (!delivery.value?.id || !reasonText.value.trim() || isOperating.value) {
-		Message.warning("请输入原因");
-		return;
-	}
-	isOperating.value = true;
-	try {
-		if (reasonAction.value === "reject") {
-			await PackageAPI.rejectDelivery(delivery.value.id, reasonText.value.trim());
-		} else {
-			await PackageAPI.cancelDelivery(delivery.value.id, reasonText.value.trim());
-		}
-		await refreshRelatedPackage();
-		reasonDialogVisible.value = false;
-		Message.success(reasonAction.value === "reject" ? "发放单已拒绝" : "发放单已撤销");
-		await loadData();
-	} catch (error) {
-		Message.error(getErrorMessage(error, "发放状态操作失败，请刷新后确认状态"));
-	} finally {
-		isOperating.value = false;
-	}
-}
-
-async function toRevoke(): Promise<void> {
-	if (delivery.value?.id && isVerifiedDelivery.value && canRevoke.value) {
-		await router.push(`/management/package-deliveries/${delivery.value.id}/revoke`);
-	}
-}
-
-onMounted(loadData);
-onUnmounted(() => navBarStore.clearRight());
-</script>
-
-<style scoped lang="less">
-.package-record-detail {
-	gap: 1rem;
-	padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
-	display: flex;
-	flex-direction: column;
-
-	:deep(.photo-scroller) {
-		padding: 0 1rem;
-	}
-
-	.actions {
-		gap: .5rem;
-		padding: 0 1rem;
-		display: flex;
-		flex-wrap: wrap;
-
-		.t-button {
-			flex: 1 1 8rem;
-		}
-	}
-
-	.empty {
-		color: var(--td-text-color-secondary);
-		padding: 1rem;
-		text-align: center;
-	}
-}
-</style>

src/pages/package/PackageDeliveryList.vue

@@ -1,157 +0,0 @@
-<template>
-	<div v-can="permissionCodes.packageDelivery.read" class="package-record-list">
-		<div class="filters">
-			<t-dropdown-menu>
-				<t-dropdown-item v-model="status" label="状态" :options="statusOptions" @change="selectStatus" />
-				<t-dropdown-item v-model="operationType" label="操作类型" :options="operationOptions" @change="selectOperation" />
-			</t-dropdown-menu>
-		</div>
-		<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="reload" @scrolltolower="loadMore">
-			<t-cell-group v-if="deliveryList.length" theme="card">
-				<t-cell
-					v-for="(item, index) in deliveryList"
-					:key="item.id"
-					:title="`${getDeliveryOperationText(item.operationType)} · ${getDeliveryStatusText(item.status)}`"
-					:description="getDescription(item)"
-					arrow
-					hover
-					v-entrance-transition="index * 30"
-					@click="toDetail(item)"
-				>
-					<template #note><span v-text="getItemSummary(item)" /></template>
-				</t-cell>
-			</t-cell-group>
-			<div v-else class="empty" v-text="loading ? '正在加载发放记录' : '暂无发放记录'" />
-			<div class="center-tips" v-text="loadStateText" />
-		</t-pull-down-refresh>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { type DropdownValue } from "tdesign-mobile-vue";
-import { Time } from "timi-web";
-import PackageAPI from "@/api/PackageAPI";
-import { useNavBarStore } from "@/store/navBarStore";
-import type { DeliveryOperationType, DeliveryStatus, GaoPackageDelivery } from "@/types/Package";
-import { getDeliveryOperationText, getDeliveryStatusText, getPackageQuantityText } from "@/utils/package";
-import { getErrorMessage } from "@/utils/error";
-import { Message } from "@/utils/message";
-import { permissionCodes } from "@/utils/permission";
-
-defineOptions({ name: "PackageDeliveryList" });
-
-const route = useRoute();
-const router = useRouter();
-const navBarStore = useNavBarStore();
-const deliveryList = ref<GaoPackageDelivery[]>([]);
-const pageIndex = ref(0);
-const total = ref(0);
-const loading = ref(false);
-const isRefreshing = ref(false);
-const noMore = ref(false);
-const status = ref("ALL");
-const operationType = ref("ALL");
-const statusOptions = [
-	{ label: "全部状态", value: "ALL" },
-	{ label: "待核销", value: "PENDING" },
-	{ label: "已核销", value: "VERIFIED" },
-	{ label: "已拒绝", value: "REJECTED" },
-	{ label: "已撤销", value: "CANCELLED" },
-	{ label: "已冲正", value: "REVOKED" }
-];
-const operationOptions = [
-	{ label: "全部类型", value: "ALL" },
-	{ label: "正常发放", value: "DELIVER" },
-	{ label: "发放冲正", value: "REVOKE" }
-];
-const loadStateText = computed(() => loading.value ? "正在加载" : noMore.value ? "已经到底了" : "上拉加载更多");
-
-async function loadMore(): Promise<void> {
-	if (loading.value || noMore.value) {
-		return;
-	}
-	loading.value = true;
-	try {
-		const result = await PackageAPI.deliveryList({
-			index: pageIndex.value,
-			size: 15,
-			customerPackageId: String(route.query.customerPackageId || "") || undefined,
-			status: status.value === "ALL" ? undefined : status.value as DeliveryStatus,
-			operationType: operationType.value === "ALL" ? undefined : operationType.value as DeliveryOperationType
-		});
-		const list = result.list || [];
-		deliveryList.value = deliveryList.value.concat(list);
-		total.value = result.total || 0;
-		pageIndex.value += 1;
-		noMore.value = list.length < 15 || total.value <= deliveryList.value.length;
-	} finally {
-		loading.value = false;
-	}
-}
-
-async function reload(): Promise<void> {
-	if (loading.value) {
-		return;
-	}
-	pageIndex.value = 0;
-	deliveryList.value = [];
-	total.value = 0;
-	noMore.value = false;
-	await loadMore();
-}
-
-async function selectStatus(value: DropdownValue): Promise<void> {
-	if (!Array.isArray(value)) {
-		status.value = String(value);
-		await reload();
-	}
-}
-
-async function selectOperation(value: DropdownValue): Promise<void> {
-	if (!Array.isArray(value)) {
-		operationType.value = String(value);
-		await reload();
-	}
-}
-
-function getDescription(item: GaoPackageDelivery): string {
-	return `${item.customerPackageId || "未知客户套餐"}｜${item.deliveredAt ? Time.toDateTime(item.deliveredAt) : "时间未知"}`;
-}
-
-function getItemSummary(item: GaoPackageDelivery): string {
-	return (item.itemList || []).map(detail => `${detail.productNameSnapshot || "产品"} ${getPackageQuantityText(detail.quantity)} ${detail.unitSnapshot || ""}`).join("、") || "无明细";
-}
-
-async function toDetail(item: GaoPackageDelivery): Promise<void> {
-	if (item.id) {
-		await router.push(`/management/package-deliveries/${item.id}`);
-	}
-}
-
-onMounted(async () => {
-	navBarStore.clearRight();
-	try {
-		await reload();
-	} catch (error) {
-		Message.error(getErrorMessage(error, "发放记录加载失败"));
-	}
-});
-
-onUnmounted(() => navBarStore.clearRight());
-</script>
-
-<style scoped lang="less">
-.package-record-list {
-	padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
-
-	.filters {
-		margin-bottom: .75rem;
-	}
-
-	.empty {
-		color: var(--td-text-color-secondary);
-		padding: 2rem 1rem;
-		text-align: center;
-	}
-}
-</style>

src/pages/package/PackageDeliveryRevoke.vue

@@ -1,152 +0,0 @@
-<template>
-	<div v-can="permissionCodes.packageDelivery.revoke" class="package-operation-edit">
-		<t-cell-group v-if="delivery" title="原发放单" theme="card" v-entrance-transition>
-			<t-cell title="发放单号" :note="delivery.id" />
-			<t-cell title="客户套餐" :note="delivery.customerPackageId || '未知'" />
-			<t-cell title="原状态" :note="getDeliveryStatusText(delivery.status)" />
-			<t-cell title="原明细" :note="getItemSummary" />
-		</t-cell-group>
-		<t-form v-if="delivery" class="form" label-align="left" label-width="6rem" v-entrance-transition="70">
-			<t-form-item label="冲正原因" required-mark><t-textarea v-model.trim="reason" borderless autosize maxlength="500" placeholder="请输入冲正原因" /></t-form-item>
-			<t-form-item label="冲正时间" arrow @click="pickerVisible = true"><span class="picker-text" v-text="occurredAtText || '使用当前时间'" /></t-form-item>
-			<t-form-item label="备注"><t-textarea v-model.trim="remark" borderless autosize maxlength="500" placeholder="备注（可选）" /></t-form-item>
-		</t-form>
-		<package-photo-field v-if="delivery" v-model="photoItems" required title="冲正凭证照片" />
-		<t-empty v-if="!delivery" :description="isLoading ? '正在加载发放单' : '发放单不存在'" />
-		<t-popup v-model="pickerVisible" placement="bottom">
-			<t-date-time-picker v-model="draftTime" format="YYYY-MM-DD HH:mm" :mode="['date', 'minute']" title="冲正时间" @cancel="pickerVisible = false" @confirm="confirmTime" />
-		</t-popup>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { useUserStore } from "timi-web-api";
-import PackageAPI from "@/api/PackageAPI";
-import PackagePhotoField from "@/components/PackagePhotoField.vue";
-import { useNavBarStore } from "@/store/navBarStore";
-import type { GaoPackageDelivery, PackageAttachment } from "@/types/Package";
-import type { PhotoItem } from "@/types/Photo";
-import { createPackageRequestNo, getDeliveryStatusText, getPackageQuantityText } from "@/utils/package";
-import { getErrorMessage } from "@/utils/error";
-import { Message } from "@/utils/message";
-import { permissionCodes } from "@/utils/permission";
-
-defineOptions({ name: "PackageDeliveryRevoke" });
-
-const route = useRoute();
-const router = useRouter();
-const userStore = useUserStore();
-const navBarStore = useNavBarStore();
-const delivery = ref<GaoPackageDelivery>();
-const reason = ref("");
-const remark = ref("");
-const occurredAtText = ref("");
-const draftTime = ref("");
-const pickerVisible = ref(false);
-const photoItems = ref<PhotoItem[]>([]);
-const isLoading = ref(false);
-const isSaving = ref(false);
-const getItemSummary = computed(() => (delivery.value?.itemList || []).map(item => `${item.productNameSnapshot || "产品"} ${getPackageQuantityText(item.quantity)} ${item.unitSnapshot || ""}`).join("、") || "无明细");
-
-function confirmTime(value: string | number): void {
-	occurredAtText.value = String(value);
-	pickerVisible.value = false;
-}
-
-function resolveTimestamp(value: string): number | undefined {
-	if (!value) {
-		return undefined;
-	}
-	const timestamp = new Date(value.replace(" ", "T")).getTime();
-	return Number.isFinite(timestamp) ? timestamp : undefined;
-}
-
-function buildAttachments(): PackageAttachment[] {
-	return photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: "PHOTO" }] : []);
-}
-
-async function loadData(): Promise<void> {
-	const id = String(route.params.id || "");
-	if (!id) {
-		return;
-	}
-	isLoading.value = true;
-	try {
-		delivery.value = await PackageAPI.deliveryDetail(id);
-	} catch (error) {
-		Message.error(getErrorMessage(error, "发放单加载失败"));
-	} finally {
-		isLoading.value = false;
-	}
-}
-
-async function save(): Promise<void> {
-	if (isSaving.value) {
-		return;
-	}
-	if (!delivery.value?.id || delivery.value.status !== "VERIFIED" || delivery.value.operationType !== "DELIVER") {
-		Message.warning("只有已核销的正常发放单可以冲正");
-		return;
-	}
-	if (!reason.value.trim()) {
-		Message.warning("请输入冲正原因");
-		return;
-	}
-	if (!photoItems.value.some(item => item.tempFileId)) {
-		Message.warning("冲正必须上传至少一张照片");
-		return;
-	}
-	isSaving.value = true;
-	try {
-		const result = await PackageAPI.revokeDelivery({
-			requestNo: createPackageRequestNo(),
-			deliveryId: delivery.value.id,
-			deliveredAt: resolveTimestamp(occurredAtText.value),
-			reason: reason.value.trim(),
-			attachmentList: buildAttachments(),
-			remark: remark.value.trim() || null
-		});
-		Message.success("发放单已冲正");
-		if (result.customerPackageId) {
-			await router.replace(`/management/customer-packages/${result.customerPackageId}`);
-			return;
-		}
-		await router.replace(`/management/package-deliveries/${delivery.value.id}`);
-	} catch (error) {
-		Message.error(getErrorMessage(error, "发放冲正失败，请刷新后确认状态"));
-	} finally {
-		isSaving.value = false;
-	}
-}
-
-onMounted(async () => {
-	if (userStore.hasPermissions(permissionCodes.packageDelivery.revoke)) {
-		navBarStore.setRightText("提交冲正", "var(--td-danger-color)", save);
-	}
-	await loadData();
-});
-
-onUnmounted(() => navBarStore.clearRight());
-</script>
-
-<style scoped lang="less">
-.package-operation-edit {
-	gap: 1rem;
-	padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
-	display: flex;
-	flex-direction: column;
-
-	.form {
-		border-radius: .75rem;
-	}
-
-	.picker-text {
-		width: 100%;
-		text-align: right;
-	}
-
-	.package-photo-field {
-		padding: 0 1rem;
-	}
-}
-</style>

src/pages/product/ProductCategoryList.vue

@@ -0,0 +1,418 @@
+<template>
+	<div v-can="permissionCodes.productCategory.read" class="product-category-list">
+		<div class="filters bg-white">
+			<t-input
+				v-model="keyword"
+				class="keyword"
+				type="search"
+				borderless
+				placeholder="搜索分类名称"
+			/>
+			<t-dropdown-menu class="status">
+				<t-dropdown-item
+					v-model="status"
+					label="状态"
+					:options="statusOptions"
+					@change="selectStatus"
+				/>
+			</t-dropdown-menu>
+		</div>
+		<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="refresh" @scrolltolower="loadMore">
+			<t-cell-group v-if="categoryList.length" theme="card" class="list fix-last-cell-line">
+				<t-swipe-cell v-for="(item, index) in categoryList" :key="item.id" class="item" v-entrance-transition="index * 30">
+					<t-cell arrow hover @click="openEditDialog(item)">
+						<template #title>
+							<div class="title">
+								<strong v-text="item.name || '未命名分类'" />
+							</div>
+						</template>
+						<template #note>
+							<t-tag size="small" variant="outline" :theme="getProductCategoryStatusTheme(item.status)" :content="getProductCategoryStatusText(item.status)" />
+						</template>
+					</t-cell>
+					<template v-if="canUpdate && item.status === 'ACTIVE' && item.id" #right>
+						<t-button class="disable" theme="danger" :loading="disablingId === item.id" @click.stop="disable(item)">停用</t-button>
+					</template>
+				</t-swipe-cell>
+			</t-cell-group>
+			<div v-else class="center-tips" v-text="emptyText" />
+			<div v-if="categoryList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
+		</t-pull-down-refresh>
+	</div>
+	<t-dialog
+		v-model:visible="editDialogVisible"
+		:title="isCreateMode ? '新增产品分类' : '编辑产品分类'"
+		cancel-btn="取消"
+		:confirm-btn="isSaving ? { content: '保存中', loading: true } : '保存'"
+		:close-on-overlay-click="!isSaving"
+		@cancel="closeEditDialog"
+		@confirm="saveCategory"
+	>
+		<t-form class="edit-form" label-align="left" label-width="5rem">
+			<t-form-item label="分类名称" required-mark>
+				<t-input
+					v-model="formModel.name"
+					borderless
+					maxlength="64"
+					placeholder="请输入分类名称"
+				/>
+			</t-form-item>
+			<t-form-item v-if="!isCreateMode" label="状态" arrow content-align="right" @click="openStatusPicker">
+				<span v-text="getProductCategoryStatusText(formModel.status)" />
+			</t-form-item>
+		</t-form>
+	</t-dialog>
+	<t-popup v-model="statusPickerVisible" placement="bottom">
+		<t-picker v-model="statusDraft" :columns="statusPickerOptions" title="分类状态" @cancel="statusPickerVisible = false" @confirm="confirmStatus" />
+	</t-popup>
+	<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
+</template>
+
+<script setup lang="ts">
+import { DialogPlugin, type DropdownValue } from "tdesign-mobile-vue";
+import { useUserStore } from "timi-web-api";
+import ProductAPI from "@/api/ProductAPI";
+import type { NavBarAction } from "@/types/NavBarAction";
+import type { ProductCategory, ProductCategoryStatus } from "@/types/Product";
+import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
+import { useNavBarStore } from "@/store/navBarStore";
+import { getErrorMessage } from "@/utils/error";
+import { getProductCategoryStatusText, getProductCategoryStatusTheme } from "@/utils/product";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+
+defineOptions({ name: "ProductCategoryList" });
+
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const canCreate = computed(() => userStore.hasPermissions(permissionCodes.productCategory.create));
+const canUpdate = computed(() => userStore.hasPermissions(permissionCodes.productCategory.update));
+const canShowActionMenu = computed(() => canCreate.value || canUpdate.value);
+const actionList = computed<NavBarAction[]>(() => {
+	const list: NavBarAction[] = [];
+	if (canCreate.value) {
+		list.push({
+			key: "create",
+			text: "新增分类",
+			icon: "add",
+			theme: "primary",
+			action: openCreateDialog
+		});
+	}
+	if (canUpdate.value) {
+		list.push({
+			key: "rank",
+			text: "排序",
+			icon: "order",
+			action: toRank
+		});
+	}
+	return list;
+});
+
+const keyword = ref("");
+const status = ref("ALL");
+const categoryList = ref<ProductCategory[]>([]);
+const pageIndex = ref(0);
+const total = ref(0);
+const isLoading = ref(false);
+const isRefreshing = ref(false);
+const isNoMore = ref(false);
+const disablingId = ref("");
+const isSaving = ref(false);
+const editDialogVisible = ref(false);
+const statusPickerVisible = ref(false);
+const statusDraft = ref<Array<string | number>>([]);
+const formModel = reactive<ProductCategory>({
+	id: undefined,
+	name: "",
+	sort: 0,
+	status: "ACTIVE"
+});
+const isCreateMode = computed(() => !formModel.id);
+let keywordTimer: number | undefined;
+let requestToken = 0;
+
+const statusOptions = [
+	{ label: "全部状态", value: "ALL" },
+	{ label: "启用", value: "ACTIVE" },
+	{ label: "停用", value: "INACTIVE" }
+];
+const statusPickerOptions = [
+	{ label: "启用", value: "ACTIVE" },
+	{ label: "停用", value: "INACTIVE" }
+];
+const emptyText = computed(() => isLoading.value ? "正在加载产品分类" : keyword.value ? "未找到匹配分类" : "暂无产品分类");
+
+async function fetch(reset = false): Promise<void> {
+	if (!reset && (isLoading.value || isNoMore.value)) {
+		return;
+	}
+	if (reset) {
+		pageIndex.value = 0;
+		categoryList.value = [];
+		total.value = 0;
+		isNoMore.value = false;
+	}
+	const token = ++requestToken;
+	isLoading.value = true;
+	try {
+		const pageSize = 20;
+		const result = await ProductAPI.categoryList({
+			index: pageIndex.value,
+			size: pageSize,
+			keyword: keyword.value || undefined,
+			status: status.value === "ALL" ? undefined : status.value as ProductCategoryStatus
+		});
+		if (token !== requestToken) {
+			return;
+		}
+		const list = result.list || [];
+		categoryList.value = reset ? list : categoryList.value.concat(list);
+		total.value = result.total || 0;
+		pageIndex.value += 1;
+		isNoMore.value = list.length < pageSize || total.value === categoryList.value.length || total.value < categoryList.value.length;
+	} finally {
+		if (token === requestToken) {
+			isLoading.value = false;
+		}
+	}
+}
+
+async function refresh(): Promise<void> {
+	try {
+		await fetch(true);
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品分类加载失败"));
+	} finally {
+		isRefreshing.value = false;
+	}
+}
+
+async function loadMore(): Promise<void> {
+	try {
+		await fetch();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品分类加载失败"));
+	}
+}
+
+async function selectStatus(value: DropdownValue): Promise<void> {
+	if (Array.isArray(value)) {
+		return;
+	}
+	status.value = String(value);
+	await fetch(true);
+}
+
+function openCreateDialog(): void {
+	if (!canCreate.value) {
+		return;
+	}
+	Object.assign(formModel, {
+		id: undefined,
+		name: "",
+		sort: 0,
+		status: "ACTIVE"
+	});
+	statusPickerVisible.value = false;
+	editDialogVisible.value = true;
+}
+
+function openEditDialog(item: ProductCategory): void {
+	if (!item.id || !canUpdate.value) {
+		return;
+	}
+	Object.assign(formModel, {
+		id: item.id,
+		name: item.name || "",
+		sort: item.sort ?? 0,
+		status: item.status || "ACTIVE",
+		storeId: item.storeId
+	});
+	statusPickerVisible.value = false;
+	editDialogVisible.value = true;
+}
+
+function closeEditDialog(): void {
+	if (isSaving.value) {
+		return;
+	}
+	statusPickerVisible.value = false;
+	editDialogVisible.value = false;
+}
+
+function openStatusPicker(): void {
+	statusDraft.value = [formModel.status || "ACTIVE"];
+	statusPickerVisible.value = true;
+}
+
+function confirmStatus(value: Array<string | number>): void {
+	const nextStatus = String(value[0] || "");
+	if (nextStatus === "ACTIVE" || nextStatus === "INACTIVE") {
+		formModel.status = nextStatus;
+	}
+	statusPickerVisible.value = false;
+}
+
+function validateForm(): boolean {
+	if (!formModel.name.trim()) {
+		Message.warning("请输入分类名称");
+		return false;
+	}
+	return true;
+}
+
+async function saveCategory(): Promise<void> {
+	if (isSaving.value) {
+		return;
+	}
+	const isCreating = !formModel.id;
+	if (isCreating ? !canCreate.value : !canUpdate.value) {
+		return;
+	}
+	if (!validateForm()) {
+		return;
+	}
+	isSaving.value = true;
+	try {
+		const payload: ProductCategory = {
+			id: formModel.id,
+			name: formModel.name.trim(),
+			sort: formModel.sort ?? 0,
+			status: formModel.status
+		};
+		if (isCreating) {
+			await ProductAPI.categoryCreate(payload);
+		} else {
+			await ProductAPI.categoryUpdate(payload);
+		}
+		editDialogVisible.value = false;
+		await fetch(true);
+		Message.success(isCreating ? "产品分类已创建" : "产品分类已保存");
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品分类保存失败"));
+	} finally {
+		isSaving.value = false;
+	}
+}
+
+async function toRank(): Promise<void> {
+	await router.push({ name: "ProductCategoryRank" });
+}
+
+function disable(item: ProductCategory): void {
+	if (!item.id || disablingId.value) {
+		return;
+	}
+	const dialog = DialogPlugin.confirm({
+		title: "停用产品分类",
+		content: `确定停用“${item.name || "未命名分类"}”？停用后不能用于新产品。`,
+		confirmBtn: { content: "停用", theme: "danger" },
+		onConfirm: async () => {
+			disablingId.value = item.id || "";
+			try {
+				await ProductAPI.categoryDisable(item.id || "");
+				await fetch(true);
+				Message.success("产品分类已停用");
+			} catch (error) {
+				Message.error(getErrorMessage(error, "产品分类停用失败"));
+			} finally {
+				disablingId.value = "";
+				dialog.destroy();
+			}
+		}
+	});
+}
+
+onMounted(async () => {
+	navBarStore.clearRight();
+	navBarStore.setCustomRightVisible(canShowActionMenu.value);
+	try {
+		await fetch(true);
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品分类加载失败"));
+	}
+});
+
+watch(keyword, () => {
+	window.clearTimeout(keywordTimer);
+	keywordTimer = window.setTimeout(async () => {
+		try {
+			await fetch(true);
+		} catch (error) {
+			Message.error(getErrorMessage(error, "产品分类加载失败"));
+		}
+	}, 300);
+});
+
+onUnmounted(() => {
+	navBarStore.clearRight();
+	statusPickerVisible.value = false;
+	window.clearTimeout(keywordTimer);
+	requestToken += 1;
+});
+</script>
+
+<style scoped lang="less">
+.product-category-list {
+	padding: var(--app-nav-height) 0 1rem;
+
+	.filters {
+		top: var(--app-nav-height);
+		left: 0;
+		right: 0;
+		z-index: 10;
+		gap: .5rem;
+		display: flex;
+		padding: .75rem 1rem;
+		position: sticky;
+		background: var(--td-bg-color-page);
+		box-shadow: var(--td-shadow-1);
+
+		.keyword {
+			flex: 1;
+			border: 1px solid var(--td-component-border);
+			z-index: 1;
+			padding: .5rem 1rem;
+			background: var(--td-bg-color-container);
+			border-radius: 1rem;
+		}
+
+		.status {
+			margin-left: -2rem;
+			padding-left: 1.5rem;
+			border-radius: 1rem;
+
+			&:after {
+				display: none;
+			}
+		}
+	}
+
+	.list {
+		padding-top: .75rem;
+
+		.item {
+
+			.title {
+				gap: .5rem;
+				display: flex;
+				align-items: center;
+			}
+
+			.disable {
+				height: 100%;
+				padding: 0 1rem;
+				border-radius: 0;
+			}
+		}
+	}
+}
+
+.edit-form {
+	margin: 0;
+	padding: 0;
+}
+</style>

src/pages/product/ProductCategoryRank.vue

@@ -0,0 +1,189 @@
+<template>
+	<div v-can="permissionCodes.productCategory.update" class="product-category-rank">
+		<div class="tip" v-text="'按住右侧拖动手柄调整分类顺序，保存后生效'" />
+		<div class="items">
+			<t-cell-group v-if="categoryList.length" theme="card">
+				<vue-draggable-next
+					v-model="categoryList"
+					class="draggable"
+					item-key="id"
+					handle=".handle"
+					ghost-class="ghost"
+					chosen-class="chosen"
+					drag-class="dragging"
+					:animation="180"
+					:disabled="isLoading || isSaving"
+					@change="handleSortChange"
+				>
+					<t-cell
+						v-for="(item, index) in categoryList"
+						:key="item.id"
+						class="cell"
+						:title="item.name || '未命名分类'"
+						v-entrance-transition="index * 30"
+					>
+						<template #note>
+							<t-tag
+								:theme="getStatusTheme(item.status)"
+								variant="outline"
+								:content="getStatusText(item.status)"
+							/>
+						</template>
+						<template #rightIcon>
+							<t-icon class="handle" role="button" name="move" aria-label="拖动排序" />
+						</template>
+					</t-cell>
+				</vue-draggable-next>
+			</t-cell-group>
+			<div v-else class="empty-block" v-text="isLoading ? '正在加载产品分类' : '暂无产品分类'" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { TagProps } from "tdesign-mobile-vue";
+import { VueDraggableNext } from "vue-draggable-next";
+import ProductAPI from "@/api/ProductAPI";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { ProductCategory, ProductCategoryStatus } from "@/types/Product";
+import { getErrorMessage } from "@/utils/error";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+import { useUserStore } from "timi-web-api";
+
+defineOptions({ name: "ProductCategoryRank" });
+
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const router = useRouter();
+
+const categoryList = ref<ProductCategory[]>([]);
+const isLoading = ref(false);
+const isSaving = ref(false);
+const sortDirty = ref(false);
+
+function getStatusText(status?: ProductCategoryStatus): string {
+	return status === "ACTIVE" ? "启用" : "停用";
+}
+
+function getStatusTheme(status?: ProductCategoryStatus): TagProps["theme"] {
+	return status === "ACTIVE" ? "primary" : "default";
+}
+
+function handleSortChange(): void {
+	sortDirty.value = true;
+}
+
+async function saveSort(): Promise<void> {
+	if (!sortDirty.value || isSaving.value || !userStore.hasPermissions(permissionCodes.productCategory.update)) {
+		return;
+	}
+	isSaving.value = true;
+	try {
+		const idList = categoryList.value
+			.map(item => item.id)
+			.filter((id): id is string => Boolean(id));
+		await ProductAPI.categorySort(idList);
+		categoryList.value.forEach((item, index) => {
+			item.sort = index;
+		});
+		sortDirty.value = false;
+		Message.success("产品分类排序已保存");
+		await router.back();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品分类排序保存失败"));
+	} finally {
+		isSaving.value = false;
+	}
+}
+
+async function loadData(): Promise<void> {
+	isLoading.value = true;
+	try {
+		const result = await ProductAPI.categoryList({ index: 0, size: 1000 });
+		categoryList.value = result.list || [];
+		sortDirty.value = false;
+	} finally {
+		isLoading.value = false;
+	}
+}
+
+onMounted(async () => {
+	navBarStore.clearRight();
+	if (userStore.hasPermissions(permissionCodes.productCategory.update)) {
+		navBarStore.setRightText("保存", "var(--td-brand-color)", saveSort);
+	}
+	try {
+		await loadData();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品分类加载失败"));
+	}
+});
+
+onUnmounted(() => {
+	navBarStore.clearRight();
+});
+</script>
+
+<style scoped lang="less">
+.product-category-rank {
+	padding: calc(var(--app-nav-height) + 1rem) 0 6rem;
+
+	.tip {
+		color: #52607a;
+		padding: 0 1rem .75rem;
+		font-size: .8125rem;
+	}
+
+	.items {
+		.draggable {
+			.cell {
+				position: relative;
+
+				.handle {
+					color: #52607a;
+					cursor: grab;
+					touch-action: none;
+				}
+			}
+
+			.ghost {
+				opacity: .4;
+			}
+
+			.chosen,
+			.dragging {
+				z-index: 1;
+				box-shadow: 0 .5rem 1rem rgba(15, 23, 42, .16);
+			}
+		}
+	}
+
+	.empty-block {
+		color: #52607a;
+		padding: 2rem 1rem;
+		text-align: center;
+	}
+}
+
+:global(html.theme-dark) {
+	.product-category-rank {
+		.tip,
+		.empty-block,
+		.handle {
+			color: #94a3b8;
+		}
+
+		.draggable {
+			.cell {
+				background: rgba(15, 23, 42, .88);
+				box-shadow: 0 .5rem 1rem rgba(2, 6, 23, .28);
+			}
+
+			.ghost {
+				background: rgba(15, 23, 42, .6);
+			}
+		}
+	}
+}
+</style>

src/pages/product/ProductDetail.vue

@@ -0,0 +1,269 @@
+<template>
+	<div v-can="permissionCodes.product.read" class="product-detail">
+		<t-loading v-if="isLoading" class="loading" size="32px" />
+		<template v-else-if="product">
+			<section class="hero" v-entrance-transition>
+				<span class="eyebrow" v-text="'产品库'" />
+				<div class="hero-title">
+					<h1 v-text="product.name || '未命名产品'" />
+					<t-tag :content="getProductStatusText(product.status)" variant="light-outline" :theme="getProductStatusTheme(product.status)" />
+				</div>
+				<div class="hero-meta">
+					<span v-text="`${product.code || '-'} · ${getProductTypeText(product.productType)}`" />
+					<span v-text="`${product.unitList?.length || 0} 个业务单位`" />
+				</div>
+			</section>
+			<card-container v-if="product.attachmentList?.length" title="产品附件">
+				<photo-scroller
+					:model-value="attachmentUrlList"
+					:photo-items="attachmentItemList"
+					title="附件列表"
+					:show-add="false"
+					:show-remove="false"
+					:show-viewer-actions="false"
+				/>
+			</card-container>
+			<card-container title="基本信息">
+				<t-cell-group theme="card" class="info">
+					<t-cell title="产品名称" :note="product.name || '未命名产品'" />
+					<t-cell title="产品编码" :note="product.code || '-'" />
+					<t-cell title="产品类型" :note="getProductTypeText(product.productType)" />
+					<t-cell title="产品分类" :note="product.category?.name || '未分类'" />
+					<t-cell title="基础单位" :note="product.baseUnit || '-'" />
+					<t-cell title="参考成本" :note="formatProductAmount(product.referenceCost)" />
+					<t-cell title="库存管理" :note="product.stockEnabled ? '已开启' : '未开启'" />
+					<t-cell title="状态" :note="getProductStatusText(product.status)" />
+				</t-cell-group>
+			</card-container>
+			<card-container title="业务单位" :description="product.unitList?.length ? '名称、基础单位数量、售价和可用范围由产品库统一维护' : '暂无业务单位'">
+				<t-cell-group theme="card" class="units">
+					<t-cell v-for="unit in product.unitList || []" :key="unit.id || unit.name">
+						<template #title>
+							<div class="unit-title">
+								<strong v-text="unit.name || '未命名单位'" />
+								<t-tag v-if="unit.isBase" size="small" theme="primary" variant="light-outline" content="基础单位" />
+							</div>
+						</template>
+						<template #note>
+							<span v-text="`1 ${unit.name || '单位'} = ${unit.baseQuantityPerUnit} ${product.baseUnit || '基础单位'}`" />
+						</template>
+						<template #description>
+							<div class="unit-description">
+								<span v-text="`建议售价：${formatProductAmount(unit.salePrice)}`" />
+								<span v-text="getUnitUsageText(unit)" />
+							</div>
+						</template>
+					</t-cell>
+				</t-cell-group>
+			</card-container>
+			<card-container v-if="product.remark" title="备注">
+				<div class="remark" v-text="product.remark" />
+			</card-container>
+		</template>
+		<t-empty v-else description="产品不存在或已被删除" />
+	</div>
+	<nav-bar-action-menu v-if="actionList.length" :actions="actionList" />
+</template>
+
+<script setup lang="ts">
+import { DialogPlugin } from "tdesign-mobile-vue";
+import { useUserStore } from "timi-web-api";
+import ProductAPI from "@/api/ProductAPI";
+import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
+import PhotoScroller from "@/components/PhotoScroller.vue";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { NavBarAction } from "@/types/NavBarAction";
+import type { PhotoItem } from "@/types/Photo";
+import type { Product, ProductUnit } from "@/types/Product";
+import { getAttachmentReadURL } from "@/utils/attachment";
+import { getErrorMessage } from "@/utils/error";
+import { formatProductAmount, getProductStatusText, getProductStatusTheme, getProductTypeText } from "@/utils/product";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+
+defineOptions({ name: "ProductDetail" });
+
+const route = useRoute();
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const product = ref<Product>();
+const isLoading = ref(false);
+const attachmentItemList = computed<PhotoItem[]>(() => (product.value?.attachmentList || [])
+	.filter(item => !!item.id)
+	.map(item => ({
+		attachment: item,
+		attachType: item.attachType || "PHOTO",
+		previewUrl: getAttachmentReadURL(item.id || ""),
+		url: getAttachmentReadURL(item.id || "", 90)
+	})));
+const attachmentUrlList = computed(() => attachmentItemList.value.map(item => item.url));
+const actionList = computed<NavBarAction[]>(() => {
+	const list: NavBarAction[] = [];
+	if (userStore.hasPermissions(permissionCodes.product.update)) {
+		list.push({ key: "edit", text: "编辑产品", icon: "edit-1", theme: "primary", action: edit });
+		if (product.value?.status === "ACTIVE") {
+			list.push({ key: "disable", text: "停用产品", icon: "close", theme: "danger", action: disable });
+		}
+	}
+	if (product.value?.stockEnabled && userStore.hasPermissions(permissionCodes.productStock.read)) {
+		list.push({ key: "stock", text: "查看库存", icon: "wallet", theme: "default", action: viewStock });
+	}
+	return list;
+});
+
+function getUnitUsageText(unit: ProductUnit): string {
+	const usage: string[] = [];
+	if (unit.allowSale) {
+		usage.push("可销售");
+	}
+	if (unit.allowPurchase) {
+		usage.push("可采购");
+	}
+	return usage.length ? usage.join("、") : "暂无业务用途";
+}
+
+async function load(): Promise<void> {
+	const id = String(route.params.id || "");
+	if (!id) {
+		return;
+	}
+	isLoading.value = true;
+	try {
+		product.value = await ProductAPI.detail(id);
+	} finally {
+		isLoading.value = false;
+	}
+}
+
+async function edit(): Promise<void> {
+	if (product.value?.id) {
+		await router.push(`/management/products/${product.value.id}/edit`);
+	}
+}
+
+async function viewStock(): Promise<void> {
+	if (product.value?.id) {
+		await router.push(`/management/product-stocks/${product.value.id}`);
+	}
+}
+
+function disable(): void {
+	const id = product.value?.id;
+	if (!id) {
+		return;
+	}
+	const dialog = DialogPlugin.confirm({
+		title: "停用产品",
+		content: "停用后不能用于新订单、套餐或库存操作，历史记录仍会保留。确定停用？",
+		confirmBtn: { content: "停用", theme: "danger" },
+		onConfirm: async () => {
+			try {
+				await ProductAPI.disable(id);
+				await load();
+				Message.success("产品已停用");
+			} catch (error) {
+				Message.error(getErrorMessage(error, "产品停用失败"));
+			} finally {
+				dialog.destroy();
+			}
+		}
+	});
+}
+
+onMounted(async () => {
+	navBarStore.clearRight();
+	navBarStore.setCustomRightVisible(actionList.value.length > 0);
+	try {
+		await load();
+		navBarStore.setCustomRightVisible(actionList.value.length > 0);
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品详情加载失败"));
+	}
+});
+
+onUnmounted(() => navBarStore.clearRight());
+</script>
+
+<style scoped lang="less">
+.product-detail {
+	gap: 1rem;
+	display: grid;
+	padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
+
+	.hero {
+		margin: 0 1rem;
+		padding: 1rem;
+		background: linear-gradient(135deg, #e8fffa, #eff6ff);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1.25rem;
+
+		.eyebrow {
+			color: #0f766e;
+			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.25rem;
+			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;
+		}
+
+	}
+
+	.loading {
+		margin: 3rem auto;
+	}
+
+	.info,
+	.units {
+		margin: 0;
+	}
+
+	.unit-title {
+		gap: .5rem;
+		display: flex;
+		align-items: center;
+	}
+
+	.unit-description {
+		gap: .125rem;
+		display: grid;
+	}
+
+	.remark {
+		padding: 1rem;
+		white-space: pre-wrap;
+	}
+}
+
+:global(html.theme-dark) .product-detail .hero {
+	background: linear-gradient(135deg, rgba(15, 118, 110, .2), rgba(37, 99, 235, .18));
+
+	.eyebrow {
+		color: #99f6e4;
+	}
+
+}
+</style>

src/pages/product/ProductEdit.vue

@@ -0,0 +1,539 @@
+<template>
+	<div v-can="savePermissionCode" class="product-edit">
+		<t-form class="form" label-align="left" label-width="6rem">
+			<t-form-item label="产品编码" required-mark>
+				<t-input v-model.trim="form.code" borderless maxlength="64" placeholder="门店内唯一编码" />
+			</t-form-item>
+			<t-form-item label="产品名称" required-mark>
+				<t-input v-model.trim="form.name" borderless maxlength="128" placeholder="请输入产品名称" />
+			</t-form-item>
+			<t-form-item label="产品类型" arrow content-align="right" @click="openTypePicker">
+				<span class="picker-text" v-text="getProductTypeText(form.productType)" />
+			</t-form-item>
+			<t-form-item label="产品分类" arrow content-align="right" @click="openCategoryPicker">
+				<span class="picker-text" v-text="selectedCategoryName" />
+			</t-form-item>
+			<t-form-item label="基础单位" required-mark>
+				<t-input v-model.trim="form.baseUnit" borderless maxlength="32" placeholder="例如 次、瓶" />
+			</t-form-item>
+			<t-form-item label="参考成本（元）">
+				<t-input v-model.trim="referenceCostText" type="number" align="right" borderless placeholder="非负金额" />
+			</t-form-item>
+			<t-form-item label="库存管理">
+				<t-checkbox v-model="form.stockEnabled" :disabled="form.productType === 'SERVICE'">管理库存</t-checkbox>
+			</t-form-item>
+			<t-form-item label="允许小数">
+				<t-checkbox v-model="form.allowDecimalQuantity">业务数量允许小数</t-checkbox>
+			</t-form-item>
+			<t-form-item v-if="form.stockEnabled" label="最低库存">
+				<t-input v-model.trim="minStockQuantityText" type="number" align="right" borderless placeholder="基础单位数量，最多三位小数" />
+			</t-form-item>
+			<t-form-item label="状态" arrow content-align="right" @click="openStatusPicker">
+				<span class="picker-text" v-text="getProductStatusText(form.status)" />
+			</t-form-item>
+			<t-form-item label="备注">
+				<t-textarea v-model.trim="form.remark" borderless maxlength="255" autosize placeholder="可填写产品说明" />
+			</t-form-item>
+		</t-form>
+
+		<card-container title="产品附件" description="可上传产品图片或其他产品文件" v-entrance-transition="70">
+			<photo-scroller
+				v-model="attachmentUrlList"
+				v-model:photo-items="attachmentItemList"
+				title="附件列表"
+				:edit-mode="true"
+				:loading="isAttachmentUploading"
+				:show-viewer-actions="false"
+				:add-actions="attachmentAddActions"
+				@add-photo="openAttachmentPicker('PHOTO')"
+				@add-other="openAttachmentPicker('OTHER')"
+			/>
+			<input ref="attachmentInputRef" class="file-input" type="file" accept="image/*" @change="handleAttachmentSelected" />
+		</card-container>
+
+		<card-container title="产品单位" description="必须保留一个基础单位；销售和库存业务只能选择允许的单位" v-entrance-transition="70">
+			<div class="unit-list">
+				<div v-for="(unit, index) in form.unitList" :key="unit.clientKey" class="unit-item">
+					<div class="unit-header">
+						<strong v-text="`单位 ${index + 1}`" />
+						<t-button v-if="1 < form.unitList.length" theme="danger" variant="text" size="small" @click="removeUnit(index)">删除</t-button>
+					</div>
+					<t-form label-width="6rem">
+						<t-form-item label="单位名称" required-mark>
+							<t-input v-model.trim="unit.name" borderless maxlength="32" placeholder="例如 瓶、盒、次" />
+						</t-form-item>
+						<t-form-item label="基础单位数量" required-mark>
+							<t-input v-model.trim="unit.baseQuantityPerUnit" type="number" align="right" borderless placeholder="每个单位对应的基础单位数量" />
+						</t-form-item>
+						<t-form-item label="建议售价（元）">
+							<t-input v-model.trim="unit.salePriceText" type="number" align="right" borderless placeholder="非负金额" />
+						</t-form-item>
+						<t-form-item label="基础单位">
+							<t-checkbox v-model="unit.isBase" @change="setBaseUnit(index)">基础单位</t-checkbox>
+						</t-form-item>
+						<t-form-item label="允许采购">
+							<t-checkbox v-model="unit.allowPurchase">入库可用</t-checkbox>
+						</t-form-item>
+						<t-form-item label="允许销售">
+							<t-checkbox v-model="unit.allowSale">销售和套餐可用</t-checkbox>
+						</t-form-item>
+					</t-form>
+				</div>
+				<t-button class="add-unit" theme="primary" variant="dashed" block @click="addUnit">添加业务单位</t-button>
+			</div>
+		</card-container>
+
+		<t-popup v-model="typePickerVisible" placement="bottom">
+			<t-picker v-model="typeDraft" :columns="productTypeOptions" title="产品类型" @cancel="typePickerVisible = false" @confirm="confirmType" />
+		</t-popup>
+		<t-popup v-model="categoryPickerVisible" placement="bottom">
+			<t-picker v-model="categoryDraft" :columns="categoryOptions" title="产品分类" @cancel="categoryPickerVisible = false" @confirm="confirmCategory" />
+		</t-popup>
+		<t-popup v-model="statusPickerVisible" placement="bottom">
+			<t-picker v-model="statusDraft" :columns="statusOptions" title="产品状态" @cancel="statusPickerVisible = false" @confirm="confirmStatus" />
+		</t-popup>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { type Attachment, AttachmentAPI, useUserStore } from "timi-web-api";
+import ProductAPI from "@/api/ProductAPI";
+import PhotoScroller from "@/components/PhotoScroller.vue";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { PhotoItem } from "@/types/Photo";
+import type { Product, ProductAttachmentType, ProductCategory, ProductUnit } from "@/types/Product";
+import { compressUploadImage } from "@/utils/imageCompression";
+import { getAttachmentReadURL } from "@/utils/attachment";
+import { getErrorMessage } from "@/utils/error";
+import { formatProductAmount, getProductStatusText, getProductTypeText, normalizeProductQuantity, parseProductAmount } from "@/utils/product";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+
+type PickerValue = string | number;
+type ProductUnitForm = ProductUnit & { clientKey: string; salePriceText: string };
+type ProductAttachmentItem = PhotoItem & {
+	attachment?: Attachment;
+	attachType: ProductAttachmentType;
+};
+
+defineOptions({ name: "ProductEdit" });
+
+const route = useRoute();
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const routeId = computed(() => String(route.params.id || ""));
+const isCreateMode = computed(() => !routeId.value);
+const savePermissionCode = computed(() => isCreateMode.value ? permissionCodes.product.create : permissionCodes.product.update);
+const isSaving = ref(false);
+const form = reactive<Product & { unitList: ProductUnitForm[] }>({
+	id: undefined,
+	code: "",
+	name: "",
+	productType: "GOODS",
+	baseUnit: "",
+	stockEnabled: true,
+	allowDecimalQuantity: false,
+	status: "ACTIVE",
+	unitList: []
+});
+const referenceCostText = ref("");
+const minStockQuantityText = ref("");
+const categoryList = ref<ProductCategory[]>([]);
+const typePickerVisible = ref(false);
+const categoryPickerVisible = ref(false);
+const statusPickerVisible = ref(false);
+const attachmentInputRef = ref<HTMLInputElement>();
+const attachmentPickerTarget = ref<ProductAttachmentType>("PHOTO");
+const isAttachmentUploading = ref(false);
+const typeDraft = ref<PickerValue[]>([]);
+const categoryDraft = ref<PickerValue[]>([]);
+const statusDraft = ref<PickerValue[]>([]);
+const productTypeOptions = [
+	{ label: "服务", value: "SERVICE" },
+	{ label: "实物", value: "GOODS" },
+	{ label: "消耗品", value: "CONSUMABLE" }
+];
+const categoryOptions = computed(() => [{ label: "不设置分类", value: "" }, ...categoryList.value.map(item => ({ label: item.name || "未命名分类", value: item.id || "" }))]);
+const statusOptions = [
+	{ label: "启用", value: "ACTIVE" },
+	{ label: "停用", value: "INACTIVE" }
+];
+const selectedCategoryName = computed(() => categoryList.value.find(item => item.id === form.categoryId)?.name || "不设置分类");
+const attachmentAddActions = [
+	{
+		icon: "camera",
+		text: "产品图片",
+		emit: "add-photo",
+		theme: "primary"
+	},
+	{
+		icon: "file-attachment",
+		text: "其他文件",
+		emit: "add-other",
+		theme: "default"
+	}
+] as const;
+const attachmentItemList = ref<ProductAttachmentItem[]>([]);
+const attachmentUrlList = computed<string[]>({
+	get() {
+		return attachmentItemList.value.map(item => item.url);
+	},
+	set(value) {
+		const urlSet = new Set(value);
+		attachmentItemList.value = attachmentItemList.value.filter(item => urlSet.has(item.url));
+	}
+});
+
+function createUnit(unit?: Partial<ProductUnit>): ProductUnitForm {
+	return {
+		...unit,
+		clientKey: window.crypto.randomUUID(),
+		name: unit?.name || "",
+		baseQuantityPerUnit: unit?.baseQuantityPerUnit ?? "1",
+		salePriceText: unit?.salePrice === null || unit?.salePrice === undefined ? "" : formatProductAmount(unit.salePrice),
+		isBase: unit?.isBase ?? false,
+		allowPurchase: unit?.allowPurchase ?? form.productType !== "SERVICE",
+		allowSale: unit?.allowSale ?? true,
+		sort: unit?.sort ?? 0
+	};
+}
+
+function addUnit(): void {
+	form.unitList.push(createUnit({
+		isBase: !form.unitList.length,
+		baseQuantityPerUnit: !form.unitList.length ? "1" : ""
+	}));
+}
+
+function removeUnit(index: number): void {
+	if (form.unitList.length < 2) {
+		Message.warning("产品至少需要一个单位");
+		return;
+	}
+	const wasBase = form.unitList[index]?.isBase;
+	form.unitList.splice(index, 1);
+	if (wasBase && form.unitList[0]) {
+		form.unitList[0].isBase = true;
+		form.unitList[0].baseQuantityPerUnit = "1";
+	}
+}
+
+function setBaseUnit(index: number): void {
+	form.unitList.forEach((unit, unitIndex) => {
+		unit.isBase = unitIndex === index;
+	});
+	const unit = form.unitList[index];
+	if (unit) {
+		unit.baseQuantityPerUnit = "1";
+	}
+}
+
+function openTypePicker(): void {
+	typeDraft.value = [form.productType];
+	typePickerVisible.value = true;
+}
+
+function confirmType(value: Array<string | number>): void {
+	const type = String(value[0] || "");
+	if (type === "SERVICE" || type === "GOODS" || type === "CONSUMABLE") {
+		form.productType = type;
+		if (type === "SERVICE") {
+			form.stockEnabled = false;
+			form.unitList.forEach(unit => {
+				unit.allowPurchase = false;
+			});
+		} else if (form.stockEnabled) {
+			form.unitList.forEach(unit => {
+				unit.allowPurchase = true;
+			});
+		}
+	}
+	typePickerVisible.value = false;
+}
+
+function openCategoryPicker(): void {
+	categoryDraft.value = [form.categoryId || ""];
+	categoryPickerVisible.value = true;
+}
+
+function confirmCategory(value: Array<string | number>): void {
+	form.categoryId = String(value[0] || "") || undefined;
+	categoryPickerVisible.value = false;
+}
+
+function openStatusPicker(): void {
+	statusDraft.value = [form.status || "ACTIVE"];
+	statusPickerVisible.value = true;
+}
+
+function confirmStatus(value: Array<string | number>): void {
+	const status = String(value[0] || "");
+	if (status === "ACTIVE" || status === "INACTIVE") {
+		form.status = status;
+	}
+	statusPickerVisible.value = false;
+}
+
+function openAttachmentPicker(target: ProductAttachmentType): void {
+	attachmentPickerTarget.value = target;
+	attachmentInputRef.value?.click();
+}
+
+async function handleAttachmentSelected(event: Event): Promise<void> {
+	const input = event.target as HTMLInputElement;
+	const file = input.files?.[0];
+	if (!file) {
+		return;
+	}
+
+	isAttachmentUploading.value = true;
+	try {
+		const tempFile = (await AttachmentAPI.upload(await compressUploadImage(file)))[0];
+		if (tempFile?.id) {
+			attachmentItemList.value.push({
+				attachType: attachmentPickerTarget.value,
+				tempFileId: tempFile.id,
+				url: AttachmentAPI.getTempReadURL(tempFile.id)
+			});
+		}
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品附件上传失败"));
+	} finally {
+		isAttachmentUploading.value = false;
+		input.value = "";
+	}
+}
+
+function buildAttachmentList(): Attachment[] {
+	return attachmentItemList.value.flatMap(item => {
+		if (item.attachment) {
+			return [{
+				...item.attachment,
+				attachType: item.attachType || item.attachment.attachType || "PHOTO"
+			}];
+		}
+		if (item.tempFileId) {
+			return [{
+				attachType: item.attachType,
+				tempFileId: item.tempFileId
+			}];
+		}
+		return [];
+	});
+}
+
+function parseOptionalAmount(value: string): number | null | undefined {
+	if (!value.trim()) {
+		return null;
+	}
+	return parseProductAmount(value);
+}
+
+function validate(): boolean {
+	if (!form.code.trim() || !form.name.trim() || !form.baseUnit.trim()) {
+		Message.warning("产品编码、名称和基础单位不能为空");
+		return false;
+	}
+	if (form.productType === "SERVICE" && form.stockEnabled) {
+		Message.warning("服务产品不能管理库存");
+		return false;
+	}
+	const referenceCost = parseOptionalAmount(referenceCostText.value);
+	if (referenceCost === undefined) {
+		Message.warning("价格必须是合法的非负元金额，最多两位小数");
+		return false;
+	}
+	if (form.stockEnabled && !normalizeProductQuantity(minStockQuantityText.value || "0")) {
+		Message.warning("最低库存必须是非负数量，最多三位小数");
+		return false;
+	}
+	if (!form.unitList.length) {
+		Message.warning("至少配置一个产品单位");
+		return false;
+	}
+	const unitNameSet = new Set<string>();
+	let baseCount = 0;
+	for (const unit of form.unitList) {
+		const name = unit.name.trim();
+		const baseQuantityPerUnit = String(unit.baseQuantityPerUnit).trim();
+		const salePrice = parseOptionalAmount(unit.salePriceText);
+		if (!name || unitNameSet.has(name)) {
+			Message.warning("单位名称不能为空且不能重复");
+			return false;
+		}
+		if (!/^\d+(?:\.\d{1,6})?$/.test(baseQuantityPerUnit) || !(0 < Number(baseQuantityPerUnit))) {
+			Message.warning("基础单位数量必须是大于 0 的数字，最多六位小数");
+			return false;
+		}
+		if (salePrice === undefined) {
+			Message.warning("单位售价必须是合法的非负元金额，最多两位小数");
+			return false;
+		}
+		unitNameSet.add(name);
+		if (unit.isBase) {
+			baseCount += 1;
+			if (baseQuantityPerUnit !== "1" && Number(baseQuantityPerUnit) !== 1) {
+				Message.warning("基础单位数量必须为 1");
+				return false;
+			}
+			if (name !== form.baseUnit.trim()) {
+				Message.warning("基础单位名称必须与产品基础单位一致");
+				return false;
+			}
+		}
+	}
+	if (baseCount !== 1) {
+		Message.warning("产品必须且只能有一个基础单位");
+		return false;
+	}
+	return true;
+}
+
+async function save(): Promise<void> {
+	if (isSaving.value || !userStore.hasPermissions(savePermissionCode.value) || !validate()) {
+		return;
+	}
+	isSaving.value = true;
+	try {
+		const minStockQuantity = form.stockEnabled ? normalizeProductQuantity(minStockQuantityText.value || "0") : undefined;
+		const unitList = form.unitList as ProductUnitForm[];
+		const payload: Product = {
+			id: form.id,
+			categoryId: form.categoryId,
+			code: form.code.trim(),
+			name: form.name.trim(),
+			productType: form.productType,
+			baseUnit: form.baseUnit.trim(),
+			stockEnabled: form.stockEnabled,
+			allowDecimalQuantity: form.allowDecimalQuantity,
+			status: form.status,
+			referenceCost: parseOptionalAmount(referenceCostText.value)!,
+			minStockQuantity: form.stockEnabled ? minStockQuantity : null,
+			remark: form.remark?.trim() || null,
+			attachmentList: buildAttachmentList(),
+			unitList: unitList.map((unit, index) => ({
+				id: unit.id,
+				name: unit.name.trim(),
+				baseQuantityPerUnit: String(unit.baseQuantityPerUnit).trim(),
+				salePrice: parseOptionalAmount(unit.salePriceText)!,
+				isBase: !!unit.isBase,
+				allowPurchase: form.productType === "SERVICE" ? false : !!unit.allowPurchase,
+				allowSale: !!unit.allowSale,
+				sort: index
+			}))
+		};
+		if (isCreateMode.value) {
+			const id = await ProductAPI.create(payload);
+			Message.success("产品已创建");
+			await router.replace(`/management/products/${id}`);
+		} else {
+			await ProductAPI.update(payload);
+			Message.success("产品已保存");
+			await router.replace(`/management/products/${routeId.value}`);
+		}
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品保存失败"));
+	} finally {
+		isSaving.value = false;
+	}
+}
+
+async function load(): Promise<void> {
+	const categoryResult = await ProductAPI.categoryList({ index: 0, size: 1000, status: "ACTIVE" });
+	categoryList.value = categoryResult.list || [];
+	if (isCreateMode.value) {
+		addUnit();
+		return;
+	}
+	const result = await ProductAPI.detail(routeId.value);
+	if (result.category && !categoryList.value.some(item => item.id === result.category?.id)) {
+		categoryList.value.push(result.category);
+	}
+	Object.assign(form, {
+		id: result.id,
+		categoryId: result.categoryId,
+		code: result.code || "",
+		name: result.name || "",
+		productType: result.productType || "GOODS",
+		baseUnit: result.baseUnit || "",
+		stockEnabled: !!result.stockEnabled,
+		allowDecimalQuantity: !!result.allowDecimalQuantity,
+		status: result.status || "ACTIVE",
+		remark: result.remark || "",
+		unitList: (result.unitList || []).map(createUnit)
+	});
+	attachmentItemList.value = (result.attachmentList || [])
+		.filter(item => !!item.id)
+		.map(item => ({
+			attachment: item,
+			attachType: item.attachType === "OTHER" ? "OTHER" : "PHOTO",
+			previewUrl: getAttachmentReadURL(item.id || ""),
+			url: getAttachmentReadURL(item.id || "", 90)
+		}));
+	referenceCostText.value = result.referenceCost === null || result.referenceCost === undefined ? "" : `${Math.floor(result.referenceCost / 100)}.${String(result.referenceCost % 100).padStart(2, "0")}`;
+	minStockQuantityText.value = result.minStockQuantity === null || result.minStockQuantity === undefined ? "" : String(result.minStockQuantity);
+	if (!form.unitList.length) {
+		addUnit();
+	}
+}
+
+onMounted(async () => {
+	navBarStore.clearRight();
+	if (userStore.hasPermissions(savePermissionCode.value)) {
+		navBarStore.setRightText("保存", "var(--td-brand-color)", save);
+	}
+	try {
+		await load();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品加载失败"));
+	}
+});
+
+onUnmounted(() => navBarStore.clearRight());
+</script>
+
+<style scoped lang="less">
+.product-edit {
+	gap: 1rem;
+	display: flex;
+	padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
+	flex-direction: column;
+
+	.form {
+		margin: 0 1rem;
+		background: var(--td-bg-color-container);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1rem;
+		overflow: hidden;
+	}
+
+	.unit-list {
+		padding: 1rem;
+
+		.unit-item {
+			padding: .75rem 0;
+			border-bottom: 1px dashed var(--td-component-border);
+
+			.unit-header {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+			}
+
+			:deep(.t-form__item) {
+				padding: .25rem 0;
+			}
+		}
+
+		.add-unit {
+			margin-top: 1rem;
+			border-radius: .75rem;
+		}
+	}
+
+	.file-input {
+		display: none;
+	}
+}
+</style>

src/pages/product/ProductList.vue

@@ -0,0 +1,359 @@
+<template>
+	<div v-can="permissionCodes.product.read" class="product-list">
+		<div class="filters bg-white">
+			<t-input v-model.trim="keyword" class="keyword" type="search" borderless clearable placeholder="搜索产品名称或编码" />
+			<t-dropdown-menu class="menus">
+				<t-dropdown-item v-model="status" label="状态" :options="statusOptions" @change="selectStatus" />
+				<t-dropdown-item v-model="productType" label="类型" :options="productTypeOptions" @change="selectProductType" />
+				<t-dropdown-item
+					:model-value="categoryIdList"
+					label="分类"
+					:options="categoryOptions"
+					multiple
+					:options-columns="2"
+					@change="selectCategory"
+					@confirm="confirmCategory"
+					@reset="resetCategory"
+					@update:model-value="updateCategory"
+				/>
+			</t-dropdown-menu>
+		</div>
+		<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="refresh" @scrolltolower="loadMore">
+			<t-cell-group
+				v-if="productList.length"
+				class="list fix-last-cell-line empty-cell-title-margin"
+				theme="card"
+			>
+				<t-cell v-for="(item, index) in productList" :key="item.id" class="item" arrow hover v-entrance-transition="index * 30" @click="toDetail(item)">
+					<template #leftIcon>
+						<t-image
+							v-if="getProductPhotoURL(item)"
+							:src="getProductPhotoURL(item)"
+							:alt="item.name || '产品图片'"
+							fit="cover"
+							class="avatar"
+						/>
+						<div v-else class="avatar placeholder" v-text="(item.name || item.code || '产').slice(0, 1)" />
+					</template>
+					<template #title>
+						<div class="text-bold" v-text="item.name || '未命名产品'" />
+					</template>
+					<template #note>
+						<t-tag
+							size="small"
+							variant="outline"
+							:theme="getProductStatusTheme(item.status)"
+							:content="getProductStatusText(item.status)"
+						/>
+					</template>
+					<template #description>
+						<div class="description">
+							<t-tag
+								size="small"
+								variant="outline"
+								:content="item.code"
+							/>
+							<t-tag
+								size="small"
+								variant="outline"
+								:content="getProductTypeText(item.productType)"
+							/>
+						</div>
+					</template>
+				</t-cell>
+			</t-cell-group>
+			<div v-else class="center-tips" v-text="emptyText" />
+			<div v-if="productList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
+		</t-pull-down-refresh>
+	</div>
+	<nav-bar-action-menu v-if="canCreate" :actions="actionList" />
+</template>
+
+<script setup lang="ts">
+import { type DropdownValue } from "tdesign-mobile-vue";
+import { useUserStore } from "timi-web-api";
+import ProductAPI from "@/api/ProductAPI";
+import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { NavBarAction } from "@/types/NavBarAction";
+import type { Product, ProductCategory, ProductStatus, ProductType } from "@/types/Product";
+import { getAttachmentReadURL } from "@/utils/attachment";
+import { getErrorMessage } from "@/utils/error";
+import { getProductStatusText, getProductStatusTheme, getProductTypeText } from "@/utils/product";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+
+defineOptions({ name: "ProductList" });
+
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const canCreate = computed(() => userStore.hasPermissions(permissionCodes.product.create));
+const actionList = computed<NavBarAction[]>(() => canCreate.value ? [{
+	key: "create",
+	text: "新增产品",
+	icon: "add",
+	theme: "primary",
+	action: toCreate
+}] : []);
+
+const keyword = ref("");
+const status = ref("ALL");
+const productType = ref("ALL");
+const categoryIdList = ref<string[]>(["ALL"]);
+const categoryList = ref<ProductCategory[]>([]);
+const productList = ref<Product[]>([]);
+const pageIndex = ref(0);
+const total = ref(0);
+const isLoading = ref(false);
+const isRefreshing = ref(false);
+const isNoMore = ref(false);
+let keywordTimer: number | undefined;
+let requestToken = 0;
+
+const statusOptions = [
+	{ label: "全部状态", value: "ALL" },
+	{ label: "启用", value: "ACTIVE" },
+	{ label: "停用", value: "INACTIVE" }
+];
+const productTypeOptions = [
+	{ label: "全部类型", value: "ALL" },
+	{ label: "服务", value: "SERVICE" },
+	{ label: "实物", value: "GOODS" },
+	{ label: "消耗品", value: "CONSUMABLE" }
+];
+const categoryOptions = computed(() => [{ label: "全部分类", value: "ALL" }, ...categoryList.value.map(item => ({
+	label: item.name || "未命名分类",
+	value: item.id || ""
+}))]);
+const emptyText = computed(() => isLoading.value ? "正在加载产品" : keyword.value ? "未找到匹配产品" : "暂无产品");
+
+function getProductPhotoURL(item: Product): string {
+	const attachment = item.attachmentList?.find(item => item.attachType === "PHOTO" && !!item.id);
+	return attachment?.id ? getAttachmentReadURL(attachment.id, 128) : "";
+}
+
+async function loadCategories(): Promise<void> {
+	const result = await ProductAPI.categoryList({ index: 0, size: 1000, status: "ACTIVE" });
+	categoryList.value = result.list || [];
+}
+
+async function fetch(reset = false): Promise<void> {
+	if (!reset && (isLoading.value || isNoMore.value)) {
+		return;
+	}
+	if (reset) {
+		pageIndex.value = 0;
+		productList.value = [];
+		total.value = 0;
+		isNoMore.value = false;
+	}
+	const token = ++requestToken;
+	isLoading.value = true;
+	try {
+		const pageSize = 15;
+		const result = await ProductAPI.list({
+			index: pageIndex.value,
+			size: pageSize,
+			keyword: keyword.value || undefined,
+			status: status.value === "ALL" ? undefined : status.value as ProductStatus,
+			productType: productType.value === "ALL" ? undefined : productType.value as ProductType,
+			categoryIdList: categoryIdList.value.includes("ALL") ? undefined : categoryIdList.value
+		});
+		if (token !== requestToken) {
+			return;
+		}
+		const list = result.list || [];
+		productList.value = reset ? list : productList.value.concat(list);
+		total.value = result.total || 0;
+		pageIndex.value += 1;
+		isNoMore.value = list.length < pageSize || productList.value.length === total.value || total.value < productList.value.length;
+	} finally {
+		if (token === requestToken) {
+			isLoading.value = false;
+		}
+	}
+}
+
+async function refresh(): Promise<void> {
+	try {
+		await fetch(true);
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品列表加载失败"));
+	} finally {
+		isRefreshing.value = false;
+	}
+}
+
+async function loadMore(): Promise<void> {
+	try {
+		await fetch();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品列表加载失败"));
+	}
+}
+
+async function selectStatus(value: DropdownValue): Promise<void> {
+	if (!Array.isArray(value)) {
+		status.value = String(value);
+		await fetch(true);
+	}
+}
+
+async function selectProductType(value: DropdownValue): Promise<void> {
+	if (!Array.isArray(value)) {
+		productType.value = String(value);
+		await fetch(true);
+	}
+}
+
+function getDropdownStringList(value: DropdownValue): string[] {
+	const valueList = Array.isArray(value) ? value : [value];
+	return valueList
+		.filter((item): item is string | number => !Array.isArray(item))
+		.map(item => String(item));
+}
+
+function normalizeCategoryIdList(value: DropdownValue): string[] {
+	const idList = getDropdownStringList(value).filter(Boolean);
+	if (!idList.length) {
+		return ["ALL"];
+	}
+	return idList.includes("ALL") && idList.length > 1 ? idList.filter(item => item !== "ALL") : idList;
+}
+
+function selectCategory(value: DropdownValue): void {
+	categoryIdList.value = normalizeCategoryIdList(value);
+}
+
+async function confirmCategory(value: DropdownValue): Promise<void> {
+	categoryIdList.value = normalizeCategoryIdList(value);
+	await fetch(true);
+}
+
+async function resetCategory(): Promise<void> {
+	categoryIdList.value = ["ALL"];
+	await fetch(true);
+}
+
+function updateCategory(value: DropdownValue): void {
+	categoryIdList.value = normalizeCategoryIdList(value);
+}
+
+async function toCreate(): Promise<void> {
+	await router.push("/management/products/create");
+}
+
+async function toDetail(item: Product): Promise<void> {
+	if (item.id) {
+		await router.push(`/management/products/${item.id}`);
+	}
+}
+
+onMounted(async () => {
+	navBarStore.clearRight();
+	navBarStore.setCustomRightVisible(canCreate.value);
+	try {
+		await Promise.all([loadCategories(), fetch(true)]);
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品列表加载失败"));
+	}
+});
+
+watch(keyword, () => {
+	window.clearTimeout(keywordTimer);
+	keywordTimer = window.setTimeout(async () => {
+		try {
+			await fetch(true);
+		} catch (error) {
+			Message.error(getErrorMessage(error, "产品列表加载失败"));
+		}
+	}, 300);
+});
+
+onUnmounted(() => {
+	navBarStore.clearRight();
+	window.clearTimeout(keywordTimer);
+	requestToken += 1;
+});
+</script>
+
+<style scoped lang="less">
+.product-list {
+	padding: var(--app-nav-height) 0 1rem;
+
+	.filters {
+		z-index: 10;
+		position: sticky;
+		box-shadow: var(--td-shadow-1);
+		background: var(--td-bg-color-page);
+	}
+
+	.filters {
+		top: var(--app-nav-height);
+		left: 0;
+		right: 0;
+		z-index: 10;
+		display: flex;
+		padding: .75rem 1rem;
+		position: sticky;
+		background: #F5F5F8;
+		box-shadow: var(--td-shadow-1);
+		flex-direction: column;
+
+		.keyword {
+			--td-input-vertical-padding: 8px 14px;
+
+			border: 1px solid var(--td-component-border);
+			z-index: 1;
+			background: var(--td-bg-color-container);
+			border-radius: 1rem;
+		}
+
+		.menus {
+			--td-spacer-1: 6px;
+
+			width: 100%;
+			overflow: hidden;
+			margin-top: -1rem;
+			padding-top: .8rem;
+			background: #fff;
+			border: 1px solid rgba(148, 163, 184, .18);
+			border-radius: 0 0 1rem 1rem;
+
+			&:after {
+				display: none;
+			}
+
+			:deep(.t-dropdown-menu__item) {
+				min-width: 0;
+			}
+
+			:deep(.t-dropdown-menu__title) {
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
+		}
+	}
+
+	.list {
+		padding-top: .75rem;
+
+		.item {
+			padding: 10px;
+
+			.avatar {
+				width: 3.5rem;
+				height: 3.5rem;
+			}
+
+			.description {
+				gap: .5rem;
+				display: flex;
+				align-items: center;
+			}
+		}
+	}
+}
+</style>

src/pages/product/ProductStockDetail.vue

@@ -0,0 +1,268 @@
+<template>
+	<div v-can="permissionCodes.productStock.read" class="product-stock-detail">
+		<t-loading v-if="isLoading" class="loading" size="32px" />
+		<template v-else-if="product && stock">
+			<section class="hero" v-entrance-transition>
+				<span class="eyebrow" v-text="'库存中心'" />
+				<div class="hero-title">
+					<h1 v-text="product.name || '未命名产品'" />
+					<t-tag :content="getStockStatusText(stock)" variant="light-outline" :theme="getStockTheme(stock)" />
+				</div>
+				<div class="hero-meta">
+					<span v-text="product.code || '无产品编码'" />
+					<strong v-text="`${getProductQuantityText(stock.availableQuantity)} ${product.baseUnit || ''}`" />
+				</div>
+			</section>
+			<card-container title="库存余额">
+				<t-cell-group theme="card" class="summary">
+					<t-cell title="产品" :note="product.name || '未命名产品'" />
+					<t-cell title="基础单位" :note="product.baseUnit || '-'" />
+					<t-cell title="实际库存" :note="getProductQuantityText(stock.onHandQuantity)" />
+					<t-cell title="预占库存" :note="getProductQuantityText(stock.reservedQuantity)" />
+					<t-cell title="可用库存" :note="getProductQuantityText(stock.availableQuantity)" />
+				</t-cell-group>
+			</card-container>
+			<card-container v-if="canOperate && product.stockEnabled" title="人工库存操作" description="所有操作必须选择业务单位、上传照片并填写原因或备注">
+				<div class="operation-list">
+					<t-button v-for="item in operationList" :key="item.type" :theme="item.theme" variant="outline" @click="openOperation(item.type)">
+						<span v-text="item.text" />
+					</t-button>
+				</div>
+			</card-container>
+			<card-container title="库存流水" description="履约产生的预占、释放、出库和冲正流水仅展示，不提供人工修改">
+				<t-cell-group v-if="recordList.length" theme="card" class="records">
+					<t-cell v-for="record in recordList" :key="record.id || `${record.occurredAt}-${record.requestNo}`">
+						<template #title>
+							<div class="record-title">
+								<strong v-text="getStockOperationText(record.operationType)" />
+								<span :class="getDeltaClass(record.onHandDelta)" v-text="getDeltaText(record.onHandDelta)" />
+							</div>
+						</template>
+						<template #note>
+							<span v-text="record.occurredAt ? Time.toDateTime(record.occurredAt) : '时间未知'" />
+						</template>
+						<template #description>
+							<div class="record-description">
+								<span v-text="`${record.quantity || 0} ${record.unitSnapshot || product.baseUnit || ''} · 基础单位 ${record.baseQuantity || 0}`" />
+								<span class="gray" v-text="record.reason || record.remark || '无备注'" />
+							</div>
+						</template>
+					</t-cell>
+				</t-cell-group>
+				<div v-else class="center-tips" v-text="'暂无库存流水'" />
+			</card-container>
+		</template>
+		<t-empty v-else description="库存或产品不存在" />
+		<product-stock-operation-dialog
+			v-if="product && stock"
+			v-model:visible="operationVisible"
+			:product="product"
+			:stock="stock"
+			:operation="operationType"
+			@success="loadAll"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Time } from "timi-web";
+import { useUserStore } from "timi-web-api";
+import ProductAPI from "@/api/ProductAPI";
+import ProductStockOperationDialog from "@/pages/product/ProductStockOperationDialog.vue";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { Product, ProductStock, StockOperationType, StockRecord } from "@/types/Product";
+import { getErrorMessage } from "@/utils/error";
+import { getProductQuantityText, getStockOperationText } from "@/utils/product";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+
+type ManualStockOperation = Extract<StockOperationType, "INITIAL_IN" | "MANUAL_IN" | "MANUAL_OUT" | "STOCKTAKE_GAIN" | "STOCKTAKE_LOSS">;
+
+defineOptions({ name: "ProductStockDetail" });
+
+const route = useRoute();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const product = ref<Product>();
+const stock = ref<ProductStock>();
+const recordList = ref<StockRecord[]>([]);
+const isLoading = ref(false);
+const operationVisible = ref(false);
+const operationType = ref<ManualStockOperation>("MANUAL_IN");
+const canOperate = computed(() => userStore.hasPermissions(permissionCodes.productStock.create));
+const operationList: Array<{ text: string; type: ManualStockOperation; theme: "primary" | "danger" }> = [
+	{ text: "期初入库", type: "INITIAL_IN", theme: "primary" },
+	{ text: "手工入库", type: "MANUAL_IN", theme: "primary" },
+	{ text: "手工出库", type: "MANUAL_OUT", theme: "danger" },
+	{ text: "盘盈", type: "STOCKTAKE_GAIN", theme: "primary" },
+	{ text: "盘亏", type: "STOCKTAKE_LOSS", theme: "danger" }
+];
+
+function getDeltaText(value?: number | string): string {
+	const amount = Number(value || 0);
+	const text = String(value || "0");
+	return `${0 < amount ? "+" : ""}${amount < 0 ? getProductQuantityText(text.slice(1)) : getProductQuantityText(text)}`;
+}
+
+function getDeltaClass(value?: number | string): string {
+	return 0 < Number(value || 0) ? "positive" : Number(value || 0) < 0 ? "negative" : "gray";
+}
+
+function getStockStatusText(item: ProductStock): string {
+	if (!item.product?.stockEnabled) {
+		return "不管理库存";
+	}
+	const available = Number(item.availableQuantity || 0);
+	const min = Number(item.product.minStockQuantity || 0);
+	return 0 < min && available < min ? "库存不足" : "库存正常";
+}
+
+function getStockTheme(item: ProductStock): "danger" | "success" | "default" {
+	if (!item.product?.stockEnabled) {
+		return "default";
+	}
+	const available = Number(item.availableQuantity || 0);
+	const min = Number(item.product.minStockQuantity || 0);
+	return 0 < min && available < min ? "danger" : "success";
+}
+
+async function loadAll(): Promise<void> {
+	const productId = String(route.params.productId || "");
+	if (!productId) {
+		return;
+	}
+	isLoading.value = true;
+	try {
+		const [productResult, stockResult, recordResult] = await Promise.all([
+			ProductAPI.detail(productId),
+			ProductAPI.stockDetail(productId),
+			ProductAPI.recordList({ productId, index: 0, size: 100 })
+		]);
+		product.value = productResult;
+		stock.value = { ...stockResult, product: productResult };
+		recordList.value = recordResult.list || [];
+	} finally {
+		isLoading.value = false;
+	}
+}
+
+function openOperation(type: ManualStockOperation): void {
+	operationType.value = type;
+	operationVisible.value = true;
+}
+
+onMounted(async () => {
+	navBarStore.clearRight();
+	try {
+		await loadAll();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "库存详情加载失败"));
+	}
+});
+
+onUnmounted(() => navBarStore.clearRight());
+</script>
+
+<style scoped lang="less">
+.product-stock-detail {
+	gap: 1rem;
+	display: grid;
+	padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
+
+	.hero {
+		margin: 0 1rem;
+		padding: 1rem;
+		background: linear-gradient(135deg, #eff6ff, #f0fdf4);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1.25rem;
+
+		.eyebrow {
+			color: #2563eb;
+			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;
+			font-size: 1.25rem;
+			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: #0f766e;
+			font-size: 1.2rem;
+			white-space: nowrap;
+		}
+	}
+
+	.loading {
+		margin: 3rem auto;
+	}
+
+	.summary,
+	.records {
+		margin: 0;
+	}
+
+	.operation-list {
+		gap: .75rem;
+		display: grid;
+		padding: 1rem;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+
+		.t-button {
+			border-radius: .75rem;
+		}
+	}
+
+	.record-title {
+		gap: .5rem;
+		display: flex;
+		align-items: center;
+	}
+
+	.record-description {
+		gap: .125rem;
+		display: grid;
+	}
+
+	.positive {
+		color: var(--td-success-color);
+	}
+
+	.negative {
+		color: var(--td-error-color);
+	}
+}
+
+:global(html.theme-dark) .product-stock-detail .hero {
+	background: linear-gradient(135deg, rgba(37, 99, 235, .2), rgba(15, 118, 110, .18));
+
+	.eyebrow {
+		color: #93c5fd;
+	}
+
+	strong {
+		color: #99f6e4;
+	}
+}
+</style>

src/pages/product/ProductStockList.vue

@@ -0,0 +1,198 @@
+<template>
+	<div v-can="permissionCodes.productStock.read" class="product-stock-list">
+		<div class="search bg-white">
+			<t-input v-model.trim="keyword" class="keyword" type="search" borderless clearable placeholder="搜索产品名称或编码" />
+		</div>
+		<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="refresh" @scrolltolower="loadMore">
+			<t-cell-group v-if="stockList.length" theme="card" class="list fix-last-cell-line">
+				<t-cell v-for="(item, index) in stockList" :key="item.productId || item.id" arrow hover class="item" v-entrance-transition="index * 30" @click="toDetail(item)">
+					<template #title>
+						<div class="title">
+							<strong v-text="item.product?.name || '未命名产品'" />
+							<t-tag size="small" variant="outline" :theme="getStockTheme(item)" :content="getStockStatusText(item)" />
+						</div>
+					</template>
+					<template #note>
+						<span v-text="`${getProductQuantityText(item.availableQuantity)} ${item.product?.baseUnit || ''}`" />
+					</template>
+					<template #description>
+						<div class="description">
+							<span class="gray" v-text="item.product?.code || '无产品编码'" />
+							<span v-text="`实际 ${getProductQuantityText(item.onHandQuantity)} · 预占 ${getProductQuantityText(item.reservedQuantity)} · 可用 ${getProductQuantityText(item.availableQuantity)}`" />
+						</div>
+					</template>
+				</t-cell>
+			</t-cell-group>
+			<div v-else class="center-tips" v-text="emptyText" />
+			<div v-if="stockList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
+		</t-pull-down-refresh>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useUserStore } from "timi-web-api";
+import ProductAPI from "@/api/ProductAPI";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { ProductStock } from "@/types/Product";
+import { getErrorMessage } from "@/utils/error";
+import { getProductQuantityText } from "@/utils/product";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+
+defineOptions({ name: "ProductStockList" });
+
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const keyword = ref("");
+const stockList = ref<ProductStock[]>([]);
+const pageIndex = ref(0);
+const total = ref(0);
+const isLoading = ref(false);
+const isRefreshing = ref(false);
+const isNoMore = ref(false);
+let keywordTimer: number | undefined;
+let requestToken = 0;
+
+const emptyText = computed(() => isLoading.value ? "正在加载库存" : keyword.value ? "未找到匹配库存" : "暂无库存记录");
+
+function getStockStatusText(item: ProductStock): string {
+	if (!item.product?.stockEnabled) {
+		return "不管理库存";
+	}
+	const available = Number(item.availableQuantity || 0);
+	const min = Number(item.product.minStockQuantity || 0);
+	return 0 < min && available < min ? "库存不足" : "库存正常";
+}
+
+function getStockTheme(item: ProductStock): "danger" | "success" | "default" {
+	if (!item.product?.stockEnabled) {
+		return "default";
+	}
+	const available = Number(item.availableQuantity || 0);
+	const min = Number(item.product.minStockQuantity || 0);
+	return 0 < min && available < min ? "danger" : "success";
+}
+
+async function fetch(reset = false): Promise<void> {
+	if (!reset && (isLoading.value || isNoMore.value)) {
+		return;
+	}
+	if (reset) {
+		pageIndex.value = 0;
+		stockList.value = [];
+		total.value = 0;
+		isNoMore.value = false;
+	}
+	const token = ++requestToken;
+	isLoading.value = true;
+	try {
+		const pageSize = 15;
+		const result = await ProductAPI.stockList({ index: pageIndex.value, size: pageSize, keyword: keyword.value || undefined });
+		if (token !== requestToken) {
+			return;
+		}
+		const list = result.list || [];
+		stockList.value = reset ? list : stockList.value.concat(list);
+		total.value = result.total || 0;
+		pageIndex.value += 1;
+		isNoMore.value = list.length < pageSize || stockList.value.length === total.value || total.value < stockList.value.length;
+	} finally {
+		if (token === requestToken) {
+			isLoading.value = false;
+		}
+	}
+}
+
+async function refresh(): Promise<void> {
+	try {
+		await fetch(true);
+	} catch (error) {
+		Message.error(getErrorMessage(error, "库存列表加载失败"));
+	} finally {
+		isRefreshing.value = false;
+	}
+}
+
+async function loadMore(): Promise<void> {
+	try {
+		await fetch();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "库存列表加载失败"));
+	}
+}
+
+async function toDetail(item: ProductStock): Promise<void> {
+	if (item.productId) {
+		await router.push(`/management/product-stocks/${item.productId}`);
+	}
+}
+
+onMounted(async () => {
+	navBarStore.clearRight();
+	if (!userStore.hasPermissions(permissionCodes.productStock.read)) {
+		return;
+	}
+	try {
+		await fetch(true);
+	} catch (error) {
+		Message.error(getErrorMessage(error, "库存列表加载失败"));
+	}
+});
+
+watch(keyword, () => {
+	window.clearTimeout(keywordTimer);
+	keywordTimer = window.setTimeout(async () => {
+		try {
+			await fetch(true);
+		} catch (error) {
+			Message.error(getErrorMessage(error, "库存列表加载失败"));
+		}
+	}, 300);
+});
+
+onUnmounted(() => {
+	navBarStore.clearRight();
+	window.clearTimeout(keywordTimer);
+	requestToken += 1;
+});
+</script>
+
+<style scoped lang="less">
+.product-stock-list {
+	padding: var(--app-nav-height) 0 1rem;
+
+	.search {
+		top: var(--app-nav-height);
+		z-index: 10;
+		padding: .75rem 1rem;
+		position: sticky;
+		background: var(--td-bg-color-page);
+		box-shadow: var(--td-shadow-1);
+
+		.keyword {
+			border: 1px solid var(--td-component-border);
+			padding: .5rem 1rem;
+			background: var(--td-bg-color-container);
+			border-radius: 1rem;
+		}
+	}
+
+	.list {
+		padding-top: .75rem;
+
+		.item {
+			.title {
+				gap: .5rem;
+				display: flex;
+				align-items: center;
+			}
+
+			.description {
+				display: grid;
+				gap: .125rem;
+			}
+		}
+	}
+}
+</style>

src/pages/product/ProductStockOperationDialog.vue

@@ -0,0 +1,185 @@
+<template>
+	<t-dialog
+		v-model:visible="visible"
+		:title="getStockOperationText(operation)"
+		cancel-btn="取消"
+		:confirm-btn="isSaving ? { content: '提交中', loading: true } : '提交'"
+		@cancel="visible = false"
+		@confirm="submit"
+	>
+		<div class="operation-dialog">
+			<div class="summary">
+				<strong v-text="props.product.name || '未命名产品'" />
+				<span class="gray" v-text="`当前可用库存：${getProductQuantityText(props.stock?.availableQuantity)} ${props.product.baseUnit || ''}`" />
+			</div>
+			<t-form label-align="left" label-width="5rem">
+				<t-form-item label="业务单位" required-mark @click="openUnitPicker">
+					<span class="picker-text" v-text="selectedUnitName" />
+				</t-form-item>
+				<t-form-item label="数量" required-mark>
+					<t-input v-model.trim="quantity" type="number" align="right" borderless placeholder="必须大于 0" />
+				</t-form-item>
+				<t-form-item label="原因">
+					<t-input v-model.trim="reason" borderless maxlength="255" placeholder="原因或备注至少填写一项" />
+				</t-form-item>
+				<t-form-item label="备注">
+					<t-textarea v-model.trim="remark" borderless maxlength="500" autosize placeholder="可补充说明" />
+				</t-form-item>
+				<package-photo-field v-model="photoItems" title="操作照片" :required="true" />
+			</t-form>
+		</div>
+	</t-dialog>
+	<t-popup v-model="unitPickerVisible" placement="bottom">
+		<t-picker v-model="unitDraft" :columns="unitOptions" title="选择业务单位" @cancel="unitPickerVisible = false" @confirm="confirmUnit" />
+	</t-popup>
+</template>
+
+<script setup lang="ts">
+import { watch } from "vue";
+import ProductAPI from "@/api/ProductAPI";
+import type { Product, ProductStock, ProductUnit, ProductStockChangeRequest, StockOperationType } from "@/types/Product";
+import { getErrorMessage } from "@/utils/error";
+import { createProductRequestNo, getProductQuantityText, getStockOperationText } from "@/utils/product";
+import { Message } from "@/utils/message";
+import type { PhotoItem } from "@/types/Photo";
+
+type ManualStockOperation = Extract<StockOperationType, "INITIAL_IN" | "MANUAL_IN" | "MANUAL_OUT" | "STOCKTAKE_GAIN" | "STOCKTAKE_LOSS">;
+type PickerValue = string | number;
+
+interface Props {
+	product: Product;
+	stock?: ProductStock;
+	operation: ManualStockOperation;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+	success: [];
+}>();
+const visible = defineModel<boolean>("visible", { default: false });
+const isSaving = ref(false);
+const quantity = ref("");
+const reason = ref("");
+const remark = ref("");
+const requestNo = ref("");
+const photoItems = ref<PhotoItem[]>([]);
+const selectedUnitId = ref("");
+const unitPickerVisible = ref(false);
+const unitDraft = ref<PickerValue[]>([]);
+
+const isInbound = computed(() => props.operation === "INITIAL_IN" || props.operation === "MANUAL_IN" || props.operation === "STOCKTAKE_GAIN");
+const selectableUnits = computed<ProductUnit[]>(() => (props.product.unitList || []).filter(unit => isInbound.value ? unit.allowPurchase : unit.allowSale));
+const unitOptions = computed(() => [selectableUnits.value.map(unit => ({ label: unit.name || "未命名单位", value: unit.id || "" }))]);
+const selectedUnitName = computed(() => selectableUnits.value.find(unit => unit.id === selectedUnitId.value)?.name || "请选择业务单位");
+
+function resetForm(): void {
+	quantity.value = "";
+	reason.value = "";
+	remark.value = "";
+	requestNo.value = "";
+	photoItems.value = [];
+	selectedUnitId.value = selectableUnits.value[0]?.id || "";
+}
+
+function openUnitPicker(): void {
+	if (selectableUnits.value.length) {
+		unitDraft.value = [selectedUnitId.value];
+		unitPickerVisible.value = true;
+	}
+}
+
+function confirmUnit(value: Array<string | number>): void {
+	selectedUnitId.value = String(value[0] || "");
+	unitPickerVisible.value = false;
+}
+
+function validate(): boolean {
+	if (!selectedUnitId.value) {
+		Message.warning("请选择业务单位");
+		return false;
+	}
+	if (!/^\d+(?:\.\d{1,3})?$/.test(quantity.value) || !(0 < Number(quantity.value))) {
+		Message.warning("数量必须是大于 0 的数字，最多三位小数");
+		return false;
+	}
+	if (!props.product.allowDecimalQuantity && !/^\d+$/.test(quantity.value)) {
+		Message.warning("该产品不允许输入小数数量");
+		return false;
+	}
+	if (!reason.value.trim() && !remark.value.trim()) {
+		Message.warning("原因或备注至少填写一项");
+		return false;
+	}
+	if (!photoItems.value.some(item => !!item.tempFileId)) {
+		Message.warning("请上传至少一张操作照片");
+		return false;
+	}
+	return true;
+}
+
+function buildRequest(): ProductStockChangeRequest {
+	return {
+		requestNo: requestNo.value || (requestNo.value = createProductRequestNo()),
+		productId: props.product.id || "",
+		productUnitId: selectedUnitId.value,
+		quantity: quantity.value,
+		reason: reason.value.trim() || undefined,
+		remark: remark.value.trim() || null,
+		attachmentList: photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: item.attachType || "PHOTO" }] : [])
+	};
+}
+
+async function submit(): Promise<void> {
+	if (isSaving.value || !validate()) {
+		return;
+	}
+	isSaving.value = true;
+	try {
+		const request = buildRequest();
+		switch (props.operation) {
+			case "INITIAL_IN":
+				await ProductAPI.initialIn(request);
+				break;
+			case "MANUAL_IN":
+				await ProductAPI.manualIn(request);
+				break;
+			case "MANUAL_OUT":
+				await ProductAPI.manualOut(request);
+				break;
+			case "STOCKTAKE_GAIN":
+				await ProductAPI.stocktakeGain(request);
+				break;
+			case "STOCKTAKE_LOSS":
+				await ProductAPI.stocktakeLoss(request);
+				break;
+		}
+		visible.value = false;
+		Message.success("库存操作已提交");
+		emit("success");
+	} catch (error) {
+		Message.error(getErrorMessage(error, "库存操作失败，请确认请求号后重试"));
+	} finally {
+		isSaving.value = false;
+	}
+}
+
+watch(() => [visible.value, props.operation] as const, ([isVisible]) => {
+	if (isVisible) {
+		resetForm();
+	}
+});
+</script>
+
+<style scoped lang="less">
+.operation-dialog {
+	.summary {
+		gap: .25rem;
+		display: grid;
+		padding: .5rem 0 1rem;
+	}
+
+	:deep(.t-form__item) {
+		padding: .25rem 0;
+	}
+}
+</style>

src/pages/salesOrder/SalesOrderCancel.vue

@@ -0,0 +1,53 @@
+<template>
+	<div v-can="permissionCodes.salesOrder.cancel" class="sales-order-operation">
+		<t-cell-group v-if="order" title="销售订单" theme="card"><t-cell title="订单号" :note="order.orderNo || order.id" /><t-cell title="当前状态" :note="order.status || '未知'" /></t-cell-group>
+		<t-form v-if="order" class="form" label-align="left" label-width="6rem">
+			<t-form-item label="取消原因" required-mark><t-textarea v-model.trim="reason" borderless autosize maxlength="500" placeholder="请输入取消原因" /></t-form-item>
+		</t-form>
+		<t-empty v-if="!order" :description="loading ? '正在加载订单' : '订单不存在'" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useUserStore } from "timi-web-api";
+import SalesOrderAPI from "@/api/SalesOrderAPI";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { SalesOrder } from "@/types/SalesOrder";
+import { getErrorMessage } from "@/utils/error";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+
+defineOptions({ name: "SalesOrderCancel" });
+const route = useRoute(); const router = useRouter(); const navBarStore = useNavBarStore(); const userStore = useUserStore();
+const order = ref<SalesOrder>(); const loading = ref(false); const saving = ref(false); const reason = ref("");
+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; }
+}
+async function save(): Promise<void> {
+	if (!order.value?.id || !reason.value || saving.value) return;
+	saving.value = true;
+	try {
+		await SalesOrderAPI.cancel({ salesOrderId: order.value.id, reason: reason.value.trim() });
+		Message.success("订单已取消");
+		await router.replace(`/management/sales-orders/${order.value.id}`);
+	} catch (error) { Message.error(getErrorMessage(error, "订单取消失败")); }
+	finally { saving.value = false; }
+}
+onMounted(async () => {
+	if (!userStore.hasPermissions(permissionCodes.salesOrder.cancel)) return;
+	navBarStore.setRightText("确认取消", "var(--td-danger-color)", save);
+	await loadData();
+});
+onUnmounted(() => navBarStore.clearRight());
+</script>
+
+<style scoped lang="less">
+.sales-order-operation { gap: 1rem; padding: calc(var(--app-nav-height) + 1rem) 1rem 2rem; display: flex; flex-direction: column;
+	.form { padding: 0 .5rem; background: var(--td-bg-color-container); box-shadow: var(--td-shadow-1); border-radius: 1rem; overflow: hidden; }
+}
+</style>

src/pages/salesOrder/SalesOrderCreate.vue

@@ -0,0 +1,596 @@
+<template>
+	<div v-can="permissionCodes.salesOrder.create" class="sales-order-create">
+		<header class="intro">
+			<span class="eyebrow">销售订单</span>
+			<h1>创建直接产品订单</h1>
+			<p>选择客户并添加本次购买的产品，提交后即可继续处理收款。</p>
+		</header>
+
+		<section class="section customer-section">
+			<div class="section-head">
+				<div>
+					<span class="step" v-text="'01 / 客户'" />
+					<h2>选择客户</h2>
+					<p>订单将归档到所选客户名下</p>
+				</div>
+				<span class="required" v-text="'必填'" />
+			</div>
+			<button class="customer-picker" type="button" @click="customerSelectorVisible = true">
+				<span class="customer-avatar" :class="{selected: !!customer}" v-text="customer?.name?.slice(0, 1) || '客'" />
+				<span class="customer-copy">
+					<strong v-if="customer" v-text="customer.name || customer.code" />
+					<strong v-else class="placeholder">请选择客户</strong>
+					<span v-if="customer?.telephone" v-text="customer.telephone" />
+					<span v-else class="hint" v-text="customer ? customer.code : '支持按姓名、编码或电话搜索'" />
+				</span>
+				<t-icon name="chevron-right" size="1.25rem" />
+			</button>
+		</section>
+
+		<section class="section product-section">
+			<div class="section-head">
+				<div>
+					<span class="step" v-text="'02 / 产品'" />
+					<h2>添加产品</h2>
+					<p>同一产品单位不能重复，数量最多三位小数</p>
+				</div>
+				<span class="item-count" v-text="`${items.length} 项`" />
+			</div>
+			<div class="items">
+				<article v-for="(item, index) in items" :key="item.clientKey" class="order-item">
+					<div class="item-head">
+						<span class="item-number" v-text="String(index + 1).padStart(2, '0')" />
+						<div class="item-title">
+							<span class="item-label" v-text="`产品 ${index + 1}`" />
+							<strong v-text="item.productName || '未选择产品'" />
+						</div>
+						<t-button theme="danger" variant="text" size="small" @click="removeItem(index)">删除</t-button>
+					</div>
+					<t-form class="item-form" label-align="left" label-width="5.25rem">
+						<product-selector
+							:model-value="item.productId && item.productUnitId ? {productId: item.productId, productUnitId: item.productUnitId} : undefined"
+							label="产品单位"
+							placeholder="请选择产品及单位"
+							required-mark
+							@update:model-value="applyProduct(index, $event)"
+						/>
+						<div class="number-fields">
+							<t-form-item label="数量" required-mark>
+								<t-input v-model.trim="item.quantity" type="number" align="right" borderless placeholder="请输入数量" />
+							</t-form-item>
+							<t-form-item v-if="canPriceOverride" label="成交单价">
+								<t-input v-model.trim="item.unitPriceText" type="number" align="right" borderless placeholder="产品价" />
+							</t-form-item>
+						</div>
+						<t-form-item label="产品备注">
+							<t-input v-model.trim="item.remark" borderless placeholder="选填" />
+						</t-form-item>
+					</t-form>
+				</article>
+			</div>
+			<button class="add-item" type="button" @click="addItem">
+				<t-icon name="add" size="1.125rem" />
+				<span>继续添加产品</span>
+			</button>
+		</section>
+
+		<section class="section setting-section">
+			<div class="section-head">
+				<div>
+					<span class="step" v-text="'03 / 设置'" />
+					<h2>订单设置</h2>
+					<p>时间不填则默认使用提交时刻</p>
+				</div>
+			</div>
+			<button class="setting-row" type="button" @click="pickerVisible = true">
+				<span class="setting-icon"><t-icon name="time" size="1.25rem" /></span>
+				<span class="setting-copy">
+					<strong>下单时间</strong>
+					<span v-text="purchasedAtText || '此刻'" />
+				</span>
+				<span class="setting-action" v-text="purchasedAtText ? '已设置' : '修改'" />
+				<t-icon name="chevron-right" size="1.125rem" />
+			</button>
+			<div class="remark-field">
+				<div class="remark-head">
+					<strong>订单备注</strong>
+					<span v-text="'选填'" />
+				</div>
+				<t-textarea v-model.trim="remark" borderless autosize maxlength="500" placeholder="记录本单需要注意的内容" />
+			</div>
+			<package-photo-field v-model="photoItems" title="购买照片（消费事件要求时必填）" />
+		</section>
+
+		<div class="submit-bar">
+			<span>确认信息无误后提交订单</span>
+			<t-button theme="primary" block :loading="isSaving" :disabled="isSaving" @click="save">提交订单</t-button>
+		</div>
+		<customer-selector v-model="customerIdList" v-model:visible="customerSelectorVisible" selection-mode="single" @change="loadCustomer" />
+		<t-popup v-model="pickerVisible" placement="bottom">
+			<t-date-time-picker v-model="draftTime" format="YYYY-MM-DD HH:mm" :mode="['date', 'minute']" title="下单时间" @cancel="pickerVisible = false" @confirm="confirmTime" />
+		</t-popup>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useUserStore, type Attachment } from "timi-web-api";
+import CustomerAPI from "@/api/CustomerAPI";
+import ProductAPI from "@/api/ProductAPI";
+import SalesOrderAPI from "@/api/SalesOrderAPI";
+import CustomerSelector from "@/components/CustomerSelector.vue";
+import PackagePhotoField from "@/components/PackagePhotoField.vue";
+import type { Customer } from "@/types/Customer";
+import type { Product } from "@/types/Product";
+import type { PhotoItem } from "@/types/Photo";
+import type { DirectProductOrderItemRequest } from "@/types/SalesOrder";
+import { createPackageRequestNo, normalizePackageQuantity, parsePackageAmount } from "@/utils/package";
+import { getErrorMessage } from "@/utils/error";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+import { useCurrentStoreStore } from "@/store/currentStoreStore";
+import { useNavBarStore } from "@/store/navBarStore";
+
+type FormItem = Partial<DirectProductOrderItemRequest> & { clientKey: string; productName: string; unitPriceText: string };
+defineOptions({ name: "SalesOrderCreate" });
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const currentStoreStore = useCurrentStoreStore();
+const userStore = useUserStore();
+const canPriceOverride = computed(() => userStore.hasPermissions(permissionCodes.salesOrder.priceOverride));
+const customerIdList = ref<string[]>([]);
+const customer = ref<Customer>();
+const customerSelectorVisible = ref(false);
+const items = ref<FormItem[]>([]);
+const remark = ref("");
+const purchasedAtText = ref("");
+const draftTime = ref("");
+const pickerVisible = ref(false);
+const isSaving = ref(false);
+const photoItems = ref<PhotoItem[]>([]);
+const productCache = new Map<string, Product>();
+const requestNo = ref("");
+function createItem(): FormItem { return { clientKey: window.crypto.randomUUID(), quantity: "", productName: "", unitPriceText: "", remark: "" }; }
+function addItem(): void { items.value.push(createItem()); }
+function removeItem(index: number): void { if (1 < items.value.length) items.value.splice(index, 1); else Message.warning("订单至少需要一项产品"); }
+async function applyProduct(index: number, value?: { productId: string; productUnitId: string }): Promise<void> {
+	if (!value) return;
+	const product = productCache.get(value.productId) || await ProductAPI.detail(value.productId);
+	productCache.set(value.productId, product);
+	items.value[index].productId = value.productId;
+	items.value[index].productUnitId = value.productUnitId;
+	items.value[index].productName = `${product.name} · ${product.unitList?.find(unit => unit.id === value.productUnitId)?.name || "单位"}`;
+}
+async function loadCustomer(value: string | string[]): Promise<void> { const id = Array.isArray(value) ? value[0] : value; customer.value = id ? await CustomerAPI.detail(id) : undefined; }
+function confirmTime(value: string | number): void { purchasedAtText.value = String(value); pickerVisible.value = false; }
+function resolveTimestamp(value: string): number | undefined {
+	if (!value) return undefined;
+	const timestamp = new Date(value.replace(" ", "T")).getTime();
+	return Number.isFinite(timestamp) ? timestamp : undefined;
+}
+function buildAttachments(): Partial<Attachment>[] {
+	return photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: "PHOTO" }] : []);
+}
+function validate(): boolean {
+	if (!customer.value?.id) { Message.warning("请选择客户"); return false; }
+	if (!items.value.length) { Message.warning("请至少添加一项产品"); return false; }
+	const keys = new Set<string>();
+	for (const item of items.value) {
+		const quantity = normalizePackageQuantity(item.quantity ?? "");
+		const key = `${item.productId}\u0000${item.productUnitId}`;
+		if (!item.productId || !item.productUnitId || !quantity || quantity === "0") { Message.warning("产品单位和正数量不能为空"); return false; }
+		if (keys.has(key)) { Message.warning("产品单位不能重复"); return false; }
+		keys.add(key);
+		if (canPriceOverride.value && item.unitPriceText && parsePackageAmount(item.unitPriceText) === undefined) { Message.warning("成交单价必须是合法金额"); return false; }
+	}
+	return true;
+}
+async function save(): Promise<void> {
+	if (isSaving.value || !validate()) return;
+	if (!requestNo.value) requestNo.value = createPackageRequestNo();
+	isSaving.value = true;
+	try {
+		const itemList = items.value.map((item, index) => ({
+			productId: item.productId!,
+			productUnitId: item.productUnitId!,
+			quantity: normalizePackageQuantity(item.quantity ?? "")!,
+			unitPrice: canPriceOverride.value && item.unitPriceText ? parsePackageAmount(item.unitPriceText) : undefined,
+			sort: index,
+			remark: item.remark?.trim() || null
+		}));
+		const result = await SalesOrderAPI.createDirectProduct({
+			requestNo: requestNo.value,
+			customerId: customer.value!.id!,
+			purchasedAt: resolveTimestamp(purchasedAtText.value),
+			itemList,
+			attachmentList: buildAttachments(),
+			remark: remark.value.trim() || null
+		});
+		Message.success("销售订单已创建");
+		await router.replace(`/management/sales-orders/${result.id}`);
+	} catch (error) {
+		const message = getErrorMessage(error, "销售订单创建失败，重试会复用同一请求号");
+		if (message.includes("直接产品消费事件")) {
+			Message.warning("请先在门店配置中选择直接产品消费事件");
+			const storeId = currentStoreStore.currentStoreId;
+			if (storeId) {
+				await router.replace(`/management/stores/${storeId}`);
+			}
+		} else {
+			Message.error(message);
+		}
+	}
+	finally { isSaving.value = false; }
+}
+onMounted(() => { addItem(); navBarStore.setRightText("提交订单", "var(--td-brand-color)", save); });
+onUnmounted(() => navBarStore.clearRight());
+</script>
+
+<style scoped lang="less">
+.sales-order-create {
+	gap: 1rem;
+	display: flex;
+	padding: calc(var(--app-nav-height) + 1rem) 1rem calc(7.5rem + env(safe-area-inset-bottom, 0));
+	flex-direction: column;
+
+	.intro {
+		padding: .25rem .25rem .5rem;
+
+		.eyebrow {
+			color: var(--td-brand-color);
+			font-size: .6875rem;
+			font-weight: 700;
+			letter-spacing: .12em;
+		}
+
+		h1 {
+			margin: .5rem 0 .35rem;
+			color: var(--td-text-color-primary);
+			font-size: 1.5rem;
+			line-height: 1.25;
+		}
+
+		p {
+			margin: 0;
+			color: var(--td-text-color-secondary);
+			font-size: .8125rem;
+			line-height: 1.5;
+		}
+	}
+
+	.section {
+		padding: 1rem;
+		background: var(--td-bg-color-container);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1rem;
+	}
+
+	.section-head {
+		gap: .75rem;
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+
+		.step {
+			color: var(--td-brand-color);
+			display: block;
+			font-size: .6875rem;
+			font-weight: 700;
+			letter-spacing: .08em;
+		}
+
+		h2 {
+			margin: .3rem 0 .25rem;
+			font-size: 1.0625rem;
+			line-height: 1.35;
+		}
+
+		p {
+			margin: 0;
+			color: var(--td-text-color-secondary);
+			font-size: .75rem;
+			line-height: 1.5;
+		}
+
+		.required,
+		.item-count {
+			color: var(--td-brand-color);
+			padding: .25rem .5rem;
+			background: var(--td-brand-color-1);
+			border-radius: .75rem;
+			font-size: .6875rem;
+			white-space: nowrap;
+		}
+	}
+
+	.customer-picker,
+	.setting-row {
+		width: 100%;
+		border: 0;
+		display: flex;
+		align-items: center;
+		text-align: left;
+		background: transparent;
+	}
+
+	.customer-picker {
+		gap: .75rem;
+		margin-top: 1rem;
+		padding: .75rem;
+		border: 1px solid var(--td-component-border);
+		border-radius: .875rem;
+
+		&:active {
+			background: var(--td-bg-color-secondarycontainer);
+		}
+
+		.customer-avatar {
+			width: 2.75rem;
+			height: 2.75rem;
+			color: var(--td-brand-color);
+			flex: none;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background: var(--td-brand-color-1);
+			border-radius: .875rem;
+			font-size: 1.125rem;
+			font-weight: 700;
+
+			&.selected {
+				color: var(--td-text-color-anti);
+				background: var(--td-brand-color);
+			}
+		}
+
+		.customer-copy {
+			gap: .2rem;
+			min-width: 0;
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+
+			strong,
+			span {
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
+
+			strong {
+				color: var(--td-text-color-primary);
+				font-size: .9375rem;
+			}
+
+			span {
+				color: var(--td-text-color-secondary);
+				font-size: .75rem;
+			}
+
+			.placeholder,
+			.hint {
+				color: var(--td-text-color-placeholder);
+			}
+		}
+	}
+
+	.items {
+		gap: .75rem;
+		display: flex;
+		margin-top: 1rem;
+		flex-direction: column;
+	}
+
+	.order-item {
+		padding: .875rem;
+		background: var(--td-bg-color-secondarycontainer);
+		border: 1px solid var(--td-border-level-1-color);
+		border-radius: .875rem;
+	}
+
+	.item-head {
+		gap: .625rem;
+		display: flex;
+		align-items: center;
+		margin-bottom: .5rem;
+	}
+
+	.item-number {
+		width: 1.75rem;
+		height: 1.75rem;
+		color: var(--td-brand-color);
+		flex: none;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: var(--td-brand-color-1);
+		border-radius: .625rem;
+		font-size: .6875rem;
+		font-weight: 700;
+	}
+
+	.item-title {
+		gap: .1rem;
+		min-width: 0;
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+
+		.item-label {
+			color: var(--td-text-color-secondary);
+			font-size: .6875rem;
+		}
+
+		strong {
+			overflow: hidden;
+			color: var(--td-text-color-primary);
+			font-size: .875rem;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+	}
+
+	.item-form {
+		:deep(.t-form__item) {
+			min-height: 2.75rem;
+			padding: .125rem 0;
+			border-bottom: 1px solid var(--td-border-level-1-color);
+		}
+
+		:deep(.t-form__item:last-child) {
+			border-bottom: 0;
+		}
+
+		:deep(.t-form__label) {
+			color: var(--td-text-color-secondary);
+			font-size: .8125rem;
+		}
+
+		:deep(.t-input) {
+			padding-right: 0;
+		}
+
+		:deep(.t-form__controls) {
+			min-width: 0;
+		}
+	}
+
+	.number-fields {
+		gap: .75rem;
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+
+		:deep(.t-form__item) {
+			min-width: 0;
+		}
+	}
+
+	.add-item {
+		gap: .375rem;
+		width: 100%;
+		margin-top: .75rem;
+		padding: .75rem;
+		color: var(--td-brand-color);
+		border: 1px dashed var(--td-brand-color-4);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: var(--td-brand-color-1);
+		border-radius: .75rem;
+		font-size: .8125rem;
+		font-weight: 600;
+
+		&:active {
+			background: var(--td-brand-color-2);
+		}
+	}
+
+	.setting-row {
+		gap: .75rem;
+		margin-top: 1rem;
+		padding: .75rem 0;
+		border-top: 1px solid var(--td-border-level-1-color);
+		border-bottom: 1px solid var(--td-border-level-1-color);
+
+		&:active {
+			background: var(--td-bg-color-secondarycontainer);
+		}
+
+		.setting-icon {
+			width: 2.25rem;
+			height: 2.25rem;
+			color: var(--td-brand-color);
+			flex: none;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background: var(--td-brand-color-1);
+			border-radius: .75rem;
+		}
+
+		.setting-copy {
+			gap: .2rem;
+			min-width: 0;
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+
+			strong {
+				color: var(--td-text-color-primary);
+				font-size: .875rem;
+			}
+
+			span {
+				color: var(--td-text-color-secondary);
+				font-size: .75rem;
+			}
+		}
+
+		.setting-action {
+			color: var(--td-brand-color);
+			font-size: .75rem;
+		}
+	}
+
+	.remark-field {
+		padding-top: 1rem;
+
+		.remark-head {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			strong {
+				color: var(--td-text-color-primary);
+				font-size: .875rem;
+			}
+
+			span {
+				color: var(--td-text-color-placeholder);
+				font-size: .75rem;
+			}
+		}
+
+		:deep(.t-textarea) {
+			margin-top: .5rem;
+			padding: .75rem;
+			background: var(--td-bg-color-secondarycontainer);
+			border-radius: .75rem;
+		}
+	}
+
+	.submit-bar {
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 12;
+		gap: .75rem;
+		padding: .625rem 1rem calc(.625rem + env(safe-area-inset-bottom, 0));
+		position: fixed;
+		box-shadow: 0 -.25rem 1rem rgba(15, 23, 42, .08);
+		display: flex;
+		align-items: center;
+			background: var(--td-bg-color-container);
+		backdrop-filter: blur(1rem);
+
+		span {
+			color: var(--td-text-color-secondary);
+			font-size: .6875rem;
+			white-space: nowrap;
+		}
+
+		:deep(.t-button) {
+			width: 9rem;
+			flex: none;
+			border-radius: .75rem;
+		}
+	}
+}
+
+:global(html.theme-dark) {
+	.sales-order-create {
+		.submit-bar {
+			box-shadow: 0 -.25rem 1rem rgba(0, 0, 0, .2);
+		}
+	}
+}
+</style>

src/pages/salesOrder/SalesOrderDetail.vue

@@ -0,0 +1,117 @@
+<template>
+	<div v-can="permissionCodes.salesOrder.read" class="sales-order-detail">
+		<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 || '未命名订单'" />
+					<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)" />
+				</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 v-if="order.sourceEventRecord?.id" title="来源登记记录" arrow @click="toEventRecord" />
+				<t-cell v-if="order.remark" title="备注" :note="order.remark" />
+			</t-cell-group>
+			<t-cell-group v-if="order.itemList?.length" title="订单明细" theme="card" v-entrance-transition="140">
+				<t-cell
+					v-for="item in order.itemList"
+					:key="item.id"
+					:title="item.productNameSnapshot || '未命名产品'"
+					:description="`${item.quantity || 0} ${item.unitSnapshot || ''} · 已履约 ${item.fulfilledQuantity || 0} · 待履约 ${item.reservedQuantity || 0}`"
+					: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">
+				<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>
+			<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>
+			</section>
+		</template>
+		<t-empty v-else :description="loading ? '正在加载订单' : '订单不存在'" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { 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 { useNavBarStore } from "@/store/navBarStore";
+import type { SalesOrder } from "@/types/SalesOrder";
+import { formatPackageAmount } from "@/utils/package";
+import { getErrorMessage } from "@/utils/error";
+import { getSalesOrderStatusText, getSalesOrderTypeText, getStatusTheme } from "@/utils/salesOrder";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+
+defineOptions({ name: "SalesOrderDetail" });
+const route = useRoute();
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+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 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));
+
+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; }
+}
+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`); }
+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; }
+	}
+	.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; }
+}
+</style>

src/pages/salesOrder/SalesOrderList.vue

@@ -0,0 +1,133 @@
+<template>
+	<div v-can="permissionCodes.salesOrder.read" class="sales-order-list">
+		<div class="filters">
+			<t-input v-model.trim="keyword" class="keyword" type="search" borderless clearable placeholder="搜索订单号、客户" />
+		<t-dropdown-menu class="menus">
+				<t-dropdown-item v-model="orderType" label="订单类型" :options="orderTypeOptions" @change="selectOrderType" />
+				<t-dropdown-item v-model="status" label="订单状态" :options="statusOptions" @change="selectStatus" />
+				<t-dropdown-item v-model="paymentStatus" label="收款状态" :options="paymentOptions" @change="selectPaymentStatus" />
+			</t-dropdown-menu>
+		</div>
+		<t-pull-down-refresh v-model="refreshing" :refresh-timeout="30000" @refresh="refresh" @scrolltolower="loadMore">
+			<div v-if="viewMode" class="view-tip" v-text="viewMode === 'pending-receive' ? '当前显示未收清订单' : '当前显示待处理退款订单'" />
+			<t-cell-group v-if="displayList.length" theme="card">
+				<t-cell v-for="(item, index) in displayList" :key="item.id" arrow hover v-entrance-transition="index * 30" @click="toDetail(item)">
+					<template #title>
+						<div class="title">
+							<strong v-text="item.orderNo || item.id || '未命名订单'" />
+							<t-tag :content="getSalesOrderStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" />
+						</div>
+					</template>
+					<template #note><span class="amount" v-text="formatPackageAmount(item.saleAmount)" /></template>
+					<template #description>
+						<div class="description">
+							<span v-text="getSalesOrderTypeText(item.orderType)" />
+							<span v-text="item.customer?.name || item.customerId || '未知客户'" />
+							<t-tag :content="getSalesPaymentStatusText(item.paymentStatus)" theme="primary" variant="outline" />
+						</div>
+					</template>
+				</t-cell>
+			</t-cell-group>
+			<div v-else class="empty" v-text="loading ? '正在加载销售订单' : '暂无销售订单'" />
+			<div class="center-tips" v-text="loading ? '正在加载' : noMore ? '已经到底了' : '上拉加载更多'" />
+		</t-pull-down-refresh>
+	</div>
+	<nav-bar-action-menu v-if="canCreate" :actions="actions" />
+</template>
+
+<script setup lang="ts">
+import { type DropdownValue } from "tdesign-mobile-vue";
+import { Toolkit } from "timi-web";
+import { useUserStore } from "timi-web-api";
+import SalesOrderAPI from "@/api/SalesOrderAPI";
+import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { SalesOrder, SalesOrderStatus, SalesOrderType, SalesPaymentStatus } from "@/types/SalesOrder";
+import { getErrorMessage } from "@/utils/error";
+import { formatPackageAmount } from "@/utils/package";
+import { getSalesOrderStatusText, getSalesOrderTypeText, getSalesPaymentStatusText, getStatusTheme } from "@/utils/salesOrder";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+
+defineOptions({ name: "SalesOrderList" });
+const route = useRoute();
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const canCreate = computed(() => userStore.hasPermissions(permissionCodes.salesOrder.create));
+const actions = computed(() => canCreate.value ? [{ key: "create", text: "直接产品下单", icon: "add", theme: "primary" as const, action: toCreate }] : []);
+const keyword = ref("");
+const orderType = ref("ALL");
+const viewMode = computed(() => route.query.view === "pending-receive" || route.query.view === "pending-refund" ? String(route.query.view) : "");
+const status = ref(viewMode.value === "pending-refund" ? "CANCELLED" : "ALL");
+const paymentStatus = ref("ALL");
+const list = ref<SalesOrder[]>([]);
+const pageIndex = ref(0);
+const total = ref(0);
+const loading = ref(false);
+const refreshing = ref(false);
+const noMore = ref(false);
+const pageSize = 15;
+const orderTypeOptions = [{ label: "全部类型", value: "ALL" }, { label: "套餐订单", value: "PACKAGE" }, { label: "直接产品", value: "DIRECT_PRODUCT" }];
+const statusOptions = [{ label: "全部状态", value: "ALL" }, { label: "进行中", value: "ACTIVE" }, { label: "已履约", value: "FULFILLED" }, { label: "已取消", value: "CANCELLED" }];
+const paymentOptions = [{ label: "全部收款", value: "ALL" }, { label: "未收款", value: "UNPAID" }, { label: "部分收款", value: "PARTIALLY_PAID" }, { label: "已收款", value: "PAID" }];
+const displayList = computed(() => list.value.filter(item => {
+	if (viewMode.value === "pending-receive") return item.paymentStatus !== "PAID";
+	if (viewMode.value === "pending-refund") return item.status === "CANCELLED" && item.refundStatus === "PENDING";
+	return true;
+}));
+
+async function fetchList(reset: boolean): Promise<void> {
+	if (loading.value || (!reset && noMore.value)) return;
+	if (reset) { pageIndex.value = 0; total.value = 0; noMore.value = false; list.value = []; }
+	loading.value = true;
+	try {
+		const result = await SalesOrderAPI.list({
+			index: pageIndex.value,
+			size: pageSize,
+			keyword: keyword.value || undefined,
+			orderType: orderType.value === "ALL" ? undefined : orderType.value as SalesOrderType,
+			status: status.value === "ALL" ? undefined : status.value as SalesOrderStatus,
+			paymentStatus: paymentStatus.value === "ALL" ? undefined : paymentStatus.value as SalesPaymentStatus
+		});
+		const rows = result.list || [];
+		list.value = reset ? rows : list.value.concat(rows);
+		total.value = result.total || 0;
+		pageIndex.value += 1;
+		noMore.value = rows.length < pageSize || total.value <= list.value.length;
+	} finally { loading.value = false; }
+}
+async function refresh(): Promise<void> { try { await fetchList(true); } catch (error) { Message.error(getErrorMessage(error, "销售订单加载失败")); } finally { refreshing.value = false; } }
+async function loadMore(): Promise<void> { try { await fetchList(false); } catch (error) { Message.error(getErrorMessage(error, "销售订单加载失败")); } }
+async function selectOrderType(value: DropdownValue): Promise<void> { if (!Array.isArray(value)) { orderType.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 selectPaymentStatus(value: DropdownValue): Promise<void> { if (!Array.isArray(value)) { paymentStatus.value = String(value); await fetchList(true); } }
+async function toDetail(item: SalesOrder): Promise<void> { if (item.id) await router.push(`/management/sales-orders/${item.id}`); }
+async function toCreate(): Promise<void> { await router.push("/management/sales-orders/create"); }
+const search = Toolkit.debounce(async () => { try { await fetchList(true); } catch (error) { Message.error(getErrorMessage(error, "销售订单加载失败")); } }, false);
+watch(keyword, () => search());
+watch(viewMode, async value => {
+	status.value = value === "pending-refund" ? "CANCELLED" : "ALL";
+	paymentStatus.value = "ALL";
+	await fetchList(true);
+});
+onMounted(async () => { navBarStore.clearRight(); navBarStore.setCustomRightVisible(canCreate.value); try { await fetchList(true); } catch (error) { Message.error(getErrorMessage(error, "销售订单加载失败")); } });
+onUnmounted(() => { navBarStore.clearRight(); search.cancel(); });
+</script>
+
+<style scoped lang="less">
+.sales-order-list { padding: var(--app-nav-height) 0 1rem;
+	.filters { top: var(--app-nav-height); z-index: 10; padding: .75rem 1rem .5rem; position: sticky; background: var(--td-bg-color-page); box-shadow: var(--td-shadow-1);
+		.keyword { border: 1px solid var(--td-component-border); background: var(--td-bg-color-container); border-radius: 1rem; }
+		.menus { margin-top: .5rem; border-radius: .875rem;
+			:deep(.t-dropdown-menu__item) { min-width: 0; }
+			:deep(.t-dropdown-menu__title) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+		}
+	}
+	.title, .description { gap: .5rem; display: flex; align-items: center; }
+	.description { color: var(--td-text-color-secondary); flex-wrap: wrap; }
+	.amount { color: var(--td-brand-color); font-weight: 700; }
+	.view-tip { color: var(--td-text-color-secondary); padding: .75rem 1rem 0; font-size: .8125rem; }
+	.empty { color: var(--td-text-color-secondary); padding: 3rem 1rem; text-align: center; }
+}
+</style>

src/pages/salesOrder/SalesOrderNoRefund.vue

@@ -0,0 +1,55 @@
+<template>
+	<div v-can="permissionCodes.fund.refund" class="sales-order-operation">
+		<t-cell-group v-if="order" title="销售订单" theme="card"><t-cell title="订单号" :note="order.orderNo || order.id" /><t-cell title="当前退款状态" :note="order.refundStatus || '未知'" /></t-cell-group>
+		<t-form v-if="order" class="form" label-align="left" label-width="6rem">
+			<t-form-item label="确认原因" required-mark><t-textarea v-model.trim="reason" borderless autosize maxlength="500" placeholder="请说明无需退款的原因" /></t-form-item>
+		</t-form>
+		<t-empty v-if="!order" :description="loading ? '正在加载订单' : '订单不存在'" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useUserStore } from "timi-web-api";
+import SalesOrderAPI from "@/api/SalesOrderAPI";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { SalesOrder } from "@/types/SalesOrder";
+import { createPackageRequestNo } from "@/utils/package";
+import { getErrorMessage } from "@/utils/error";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+
+defineOptions({ name: "SalesOrderNoRefund" });
+const route = useRoute(); const router = useRouter(); const navBarStore = useNavBarStore(); const userStore = useUserStore();
+const order = ref<SalesOrder>(); const loading = ref(false); const saving = ref(false); const reason = ref(""); const requestNo = ref("");
+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; }
+}
+async function save(): Promise<void> {
+	if (!order.value?.id || !reason.value || saving.value) return;
+	if (!requestNo.value) requestNo.value = createPackageRequestNo();
+	saving.value = true;
+	try {
+		await SalesOrderAPI.confirmNoRefund({ salesOrderId: order.value.id, requestNo: requestNo.value, reason: reason.value.trim() });
+		Message.success("已确认无需退款");
+		await router.replace(`/management/sales-orders/${order.value.id}`);
+	} catch (error) { Message.error(getErrorMessage(error, "确认失败，重试会复用同一请求号")); }
+	finally { saving.value = false; }
+}
+onMounted(async () => {
+	if (!userStore.hasPermissions(permissionCodes.fund.refund)) return;
+	navBarStore.setRightText("确认提交", "var(--td-brand-color)", save);
+	await loadData();
+});
+onUnmounted(() => navBarStore.clearRight());
+</script>
+
+<style scoped lang="less">
+.sales-order-operation { gap: 1rem; padding: calc(var(--app-nav-height) + 1rem) 1rem 2rem; display: flex; flex-direction: column;
+	.form { padding: 0 .5rem; background: var(--td-bg-color-container); box-shadow: var(--td-shadow-1); border-radius: 1rem; overflow: hidden; }
+}
+</style>

src/pages/salesOrder/SalesOrderPayment.vue

@@ -0,0 +1,86 @@
+<template>
+	<div v-can="permissionCodes.fundReceive.create" class="sales-order-operation">
+		<t-cell-group v-if="order" title="销售订单" theme="card"><t-cell title="订单号" :note="order.orderNo || order.id" /><t-cell title="剩余待收款" :note="formatPackageAmount(order.unpaidAmount)" /></t-cell-group>
+		<t-form v-if="order" class="form" label-align="left" label-width="6rem">
+			<t-form-item label="收款金额（元）" required-mark><t-input v-model.trim="amountText" type="number" align="right" borderless placeholder="请输入本次收款金额" /></t-form-item>
+			<t-form-item label="收款时间" arrow @click="pickerVisible = true"><span class="picker-text" v-text="occurredAtText || '使用当前时间'" /></t-form-item>
+			<t-form-item label="备注"><t-textarea v-model.trim="remark" borderless autosize maxlength="500" /></t-form-item>
+		</t-form>
+		<package-photo-field v-if="order" v-model="photoItems" required title="收款凭证照片" />
+		<t-empty v-if="!order" :description="loading ? '正在加载订单' : '订单不存在'" />
+		<t-popup v-model="pickerVisible" placement="bottom">
+			<t-date-time-picker v-model="draftTime" format="YYYY-MM-DD HH:mm" :mode="['date', 'minute']" title="收款时间" @cancel="pickerVisible = false" @confirm="confirmTime" />
+		</t-popup>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useUserStore, type Attachment } from "timi-web-api";
+import PackagePhotoField from "@/components/PackagePhotoField.vue";
+import SalesOrderAPI from "@/api/SalesOrderAPI";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { SalesOrder } from "@/types/SalesOrder";
+import type { PhotoItem } from "@/types/Photo";
+import { createPackageRequestNo, formatPackageAmount, parsePackageAmount } from "@/utils/package";
+import { getErrorMessage } from "@/utils/error";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+
+defineOptions({ name: "SalesOrderPayment" });
+const route = useRoute();
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const order = ref<SalesOrder>();
+const loading = ref(false);
+const saving = ref(false);
+const amountText = ref("");
+const occurredAtText = ref("");
+const draftTime = ref("");
+const pickerVisible = ref(false);
+const remark = ref("");
+const photoItems = ref<PhotoItem[]>([]);
+const requestNo = ref("");
+function confirmTime(value: string | number): void { occurredAtText.value = String(value); pickerVisible.value = false; }
+function resolveTimestamp(value: string): number | undefined { if (!value) return undefined; const timestamp = new Date(value.replace(" ", "T")).getTime(); return Number.isFinite(timestamp) ? timestamp : undefined; }
+function buildAttachments(): Partial<Attachment>[] { return photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: "PHOTO" }] : []); }
+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; }
+}
+async function save(): Promise<void> {
+	if (saving.value || !order.value?.id) return;
+	const amount = parsePackageAmount(amountText.value);
+	const attachmentList = buildAttachments();
+	if (amount === undefined || amount === 0) { Message.warning("请输入合法的正金额"); return; }
+	if (!attachmentList.length) { Message.warning("收款必须上传至少一张照片"); return; }
+	if (!requestNo.value) requestNo.value = createPackageRequestNo(); saving.value = true;
+	try {
+		await SalesOrderAPI.receivePayment({
+			salesOrderId: order.value.id,
+			requestNo: requestNo.value,
+			amount,
+			occurredAt: resolveTimestamp(occurredAtText.value),
+			attachmentList,
+			remark: remark.value.trim() || null
+		});
+		Message.success("收款登记已提交");
+		await router.replace(`/management/sales-orders/${order.value.id}`);
+	} catch (error) { Message.error(getErrorMessage(error, "收款登记失败，重试会复用同一请求号")); }
+	finally { saving.value = false; }
+}
+onMounted(async () => { if (!userStore.hasPermissions(permissionCodes.fundReceive.create)) return; navBarStore.setRightText("提交收款", "var(--td-brand-color)", save); await loadData(); });
+onUnmounted(() => navBarStore.clearRight());
+</script>
+
+<style scoped lang="less">
+.sales-order-operation { gap: 1rem; padding: calc(var(--app-nav-height) + 1rem) 0 2rem; display: flex; flex-direction: column;
+	.form { margin: 0 1rem; padding: 0 .5rem; background: var(--td-bg-color-container); box-shadow: var(--td-shadow-1); border-radius: 1rem; overflow: hidden; }
+	.picker-text { width: 100%; text-align: right; }
+	.package-photo-field { padding: 0 1rem; }
+}
+</style>

src/pages/salesOrder/SalesOrderRefund.vue

@@ -0,0 +1,91 @@
+<template>
+	<div v-can="permissionCodes.fund.refund" class="sales-order-operation">
+		<t-cell-group v-if="order" title="销售订单" theme="card">
+			<t-cell title="订单号" :note="order.orderNo || order.id" />
+			<t-cell title="可退款金额" :note="formatPackageAmount((order.paidAmount || 0) - (order.refundedAmount || 0))" />
+		</t-cell-group>
+		<t-form v-if="order" class="form" label-align="left" label-width="6rem">
+			<t-form-item label="退款金额（元）" required-mark><t-input v-model.trim="amountText" type="number" align="right" borderless placeholder="请输入退款金额" /></t-form-item>
+			<t-form-item label="退款原因" required-mark><t-textarea v-model.trim="reason" borderless autosize maxlength="500" /></t-form-item>
+			<t-form-item label="退款时间" arrow @click="pickerVisible = true"><span class="picker-text" v-text="occurredAtText || '使用当前时间'" /></t-form-item>
+			<t-form-item label="备注"><t-textarea v-model.trim="remark" borderless autosize maxlength="500" /></t-form-item>
+		</t-form>
+		<package-photo-field v-if="order" v-model="photoItems" required title="退款凭证照片" />
+		<t-empty v-if="!order" :description="loading ? '正在加载订单' : '订单不存在'" />
+		<t-popup v-model="pickerVisible" placement="bottom">
+			<t-date-time-picker v-model="draftTime" format="YYYY-MM-DD HH:mm" :mode="['date', 'minute']" title="退款时间" @cancel="pickerVisible = false" @confirm="confirmTime" />
+		</t-popup>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useUserStore, type Attachment } from "timi-web-api";
+import PackagePhotoField from "@/components/PackagePhotoField.vue";
+import SalesOrderAPI from "@/api/SalesOrderAPI";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { SalesOrder } from "@/types/SalesOrder";
+import type { PhotoItem } from "@/types/Photo";
+import { createPackageRequestNo, formatPackageAmount, parsePackageAmount } from "@/utils/package";
+import { getErrorMessage } from "@/utils/error";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+
+defineOptions({ name: "SalesOrderRefund" });
+const route = useRoute();
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const order = ref<SalesOrder>();
+const loading = ref(false);
+const saving = ref(false);
+const amountText = ref("");
+const reason = ref("");
+const occurredAtText = ref("");
+const draftTime = ref("");
+const pickerVisible = ref(false);
+const remark = ref("");
+const photoItems = ref<PhotoItem[]>([]);
+const requestNo = ref("");
+function confirmTime(value: string | number): void { occurredAtText.value = String(value); pickerVisible.value = false; }
+function resolveTimestamp(value: string): number | undefined { if (!value) return undefined; const timestamp = new Date(value.replace(" ", "T")).getTime(); return Number.isFinite(timestamp) ? timestamp : undefined; }
+function buildAttachments(): Partial<Attachment>[] { return photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: "PHOTO" }] : []); }
+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; }
+}
+async function save(): Promise<void> {
+	if (saving.value || !order.value?.id) return;
+	const amount = parsePackageAmount(amountText.value); const attachmentList = buildAttachments();
+	if (amount === undefined || amount === 0 || !reason.value) { Message.warning("退款金额和原因不能为空"); return; }
+	if (!attachmentList.length) { Message.warning("退款必须上传至少一张照片"); return; }
+	if (!requestNo.value) requestNo.value = createPackageRequestNo(); saving.value = true;
+	try {
+		await SalesOrderAPI.refund({
+			salesOrderId: order.value.id,
+			requestNo: requestNo.value,
+			amount,
+			occurredAt: resolveTimestamp(occurredAtText.value),
+			reason: reason.value.trim(),
+			attachmentList,
+			remark: remark.value.trim() || null
+		});
+		Message.success("退款登记已提交");
+		await router.replace(`/management/sales-orders/${order.value.id}`);
+	} catch (error) { Message.error(getErrorMessage(error, "退款登记失败，重试会复用同一请求号")); }
+	finally { saving.value = false; }
+}
+onMounted(async () => { if (!userStore.hasPermissions(permissionCodes.fund.refund)) return; navBarStore.setRightText("提交退款", "var(--td-danger-color)", save); await loadData(); });
+onUnmounted(() => navBarStore.clearRight());
+</script>
+
+<style scoped lang="less">
+.sales-order-operation { gap: 1rem; padding: calc(var(--app-nav-height) + 1rem) 0 2rem; display: flex; flex-direction: column;
+	.form { margin: 0 1rem; padding: 0 .5rem; background: var(--td-bg-color-container); box-shadow: var(--td-shadow-1); border-radius: 1rem; overflow: hidden; }
+	.picker-text { width: 100%; text-align: right; }
+	.package-photo-field { padding: 0 1rem; }
+}
+</style>

src/pages/salesOrder/components/SalesOrderFinancePanel.vue

@@ -0,0 +1,48 @@
+<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 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";
+
+const props = defineProps<{ order: SalesOrder; canReadFund: boolean }>();
+const emit = defineEmits<{ fund: []; record: [id: string] }>();
+</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>

src/pages/store/StoreEdit.vue

@@ -35,6 +35,13 @@
 					<t-switch v-model="formData.autoClosedDay" />
 				</template>
 			</t-cell>
+			<t-cell
+				title="直接产品消费事件"
+				:note="directProductSaleEventName"
+				description="直接产品订单使用该事件记录消费金额并触发积分"
+				arrow
+				@click="openDirectProductSaleEventPicker"
+			/>
 		</t-cell-group>
 		<div v-if="!isCreateMode && !isStoreManagerScope" class="actions" v-entrance-transition="140">
 			<t-button
@@ -52,11 +59,21 @@
 			@confirm="removeConfirmedStore"
 		/>
 	</div>
+	<t-popup v-model="directProductSaleEventPickerVisible" placement="bottom">
+		<t-picker
+			v-model="directProductSaleEventPickerDraft"
+			:columns="directProductSaleEventPickerColumns"
+			title="选择直接产品消费事件"
+			@cancel="directProductSaleEventPickerVisible = false"
+			@confirm="confirmDirectProductSaleEvent"
+		/>
+	</t-popup>
 </template>
 
 <script setup lang="ts">
 import { useUserStore } from "timi-web-api";
 import StoreAPI from "@/api/StoreAPI";
+import type { EventItem } from "@/types/EventItem";
 import StoreRemoveDialog from "@/components/StoreRemoveDialog.vue";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useNavBarStore } from "@/store/navBarStore";
@@ -68,6 +85,8 @@ defineOptions({
 	name: "StoreEdit"
 });
 
+type PickerValue = string | number;
+
 const route = useRoute();
 const router = useRouter();
 const navBarStore = useNavBarStore();
@@ -95,9 +114,75 @@ const formData = reactive({
 	telephone: "",
 	address: "",
 	remark: "",
-	autoClosedDay: true
+	autoClosedDay: true,
+	directProductSaleEventId: ""
 });
 
+// ---------- 直接产品消费事件 ----------
+
+const directProductSaleEventList = ref<EventItem[]>([]);
+const directProductSaleEventLoaded = ref(false);
+const directProductSaleEventPickerVisible = ref(false);
+const directProductSaleEventPickerDraft = ref<PickerValue[]>([]);
+const directProductSaleEventPickerColumns = computed(() => [
+	directProductSaleEventList.value
+		.map(item => ({
+			label: `${item.name || "未命名事件"}${item.requirePhoto ? "（需照片）" : ""}`,
+			value: item.id || ""
+		}))
+		.filter(item => item.value)
+]);
+const selectedDirectProductSaleEvent = computed(() => directProductSaleEventList.value.find(item => item.id === formData.directProductSaleEventId));
+const directProductSaleEventName = computed(() => {
+	if (selectedDirectProductSaleEvent.value) {
+		return selectedDirectProductSaleEvent.value.name || "未命名事件";
+	}
+	if (formData.directProductSaleEventId && !directProductSaleEventLoaded.value) {
+		return "已配置，点击查看";
+	}
+	return formData.directProductSaleEventId ? "当前配置事件不可用" : "未配置，直接产品订单不可提交";
+});
+
+async function loadDirectProductSaleEvents(): Promise<boolean> {
+	if (!formData.id) {
+		return false;
+	}
+	try {
+		directProductSaleEventList.value = await StoreAPI.directProductSaleEventList(formData.id);
+		directProductSaleEventLoaded.value = true;
+		return true;
+	} catch {
+		directProductSaleEventList.value = [];
+		directProductSaleEventLoaded.value = false;
+		Message.error("直接产品消费事件加载失败");
+		return false;
+	}
+}
+
+async function openDirectProductSaleEventPicker(): Promise<void> {
+	if (!formData.id) {
+		Message.warning("请先保存门店，再配置直接产品消费事件");
+		return;
+	}
+	if (!await loadDirectProductSaleEvents()) {
+		return;
+	}
+	if (!directProductSaleEventPickerColumns.value[0]?.length) {
+		Message.warning("暂无可选事件，请先创建并启用 GENERAL / NUMBER / CENT 消费事件");
+		return;
+	}
+	directProductSaleEventPickerDraft.value = [formData.directProductSaleEventId];
+	directProductSaleEventPickerVisible.value = true;
+}
+
+function confirmDirectProductSaleEvent(value: Array<string | number>): void {
+	const eventId = String(value[0] || "");
+	if (eventId) {
+		formData.directProductSaleEventId = eventId;
+	}
+	directProductSaleEventPickerVisible.value = false;
+}
+
 async function doSave(): Promise<void> {
 	if (!validateForm()) {
 		return;

src/pages/tabs/ProductTab.vue

@@ -8,6 +8,7 @@
 		<t-cell-group
 			v-for="(group, index) in visibleMenuGroupList"
 			:key="group.title"
+			class="menu-group"
 			:title="group.title"
 			theme="card"
 			v-entrance-transition="index * 70"
@@ -15,17 +16,18 @@
 			<t-cell
 				v-for="item in group.items"
 				:key="item.path"
-				class="item"
+				class="menu-item"
 				:title="item.title"
 				arrow
 				hover
 				@click="go(item.path)"
 			>
 				<template #leftIcon>
-					<t-icon :name="item.icon" size="1.75rem" />
+					<span class="icon-wrap" :class="`tone-${index}`"><t-icon :name="item.icon" size="1.35rem" /></span>
 				</template>
 			</t-cell>
 		</t-cell-group>
+		<div v-if="!visibleMenuGroupList.length" class="empty" v-text="'当前账号暂无产品管理权限'" />
 	</div>
 </template>
 
@@ -54,33 +56,45 @@ const userStore = useUserStore();
 
 const menuGroupList = computed<MenuGroup[]>(() => [
 		{
-		title: "套餐",
+			title: "产品管理",
 		items: [
+			{
+				icon: "catalog",
+				path: "/management/product-categories",
+				title: "产品分类",
+				visible: userStore.hasPermissions(permissionCodes.productCategory.read)
+			},
 			{
 				icon: "layers",
-				path: "/management/package-configs",
+				path: "/management/products",
-				title: "套餐配置",
+				title: "产品库",
-				visible: userStore.hasPermissions(permissionCodes.packageConfig.read)
+				visible: userStore.hasPermissions(permissionCodes.product.read)
 			},
 			{
-				icon: "order-list",
+				icon: "wallet",
-				path: "/management/customer-packages",
+				path: "/management/product-stocks",
-				title: "客户套餐",
+				title: "库存与库存流水",
-				visible: userStore.hasPermissions(permissionCodes.customerPackage.read)
+				visible: userStore.hasPermissions(permissionCodes.productStock.read)
-			},
-			{
-				icon: "upload",
-				path: "/management/package-deliveries",
-				title: "发放记录",
-				visible: userStore.hasPermissions(permissionCodes.packageDelivery.read)
-			},
-			{
-				icon: "money",
-				path: "/management/fund-records",
-				title: "资金流水",
-				visible: userStore.hasPermissions(permissionCodes.fundRecord.read)
 			}
 			]
+		},
+		{
+			title: "交易管理",
+			items: [
+				{ icon: "order", path: "/management/sales-orders", title: "销售订单", visible: userStore.hasPermissions(permissionCodes.salesOrder.read) },
+				{ icon: "wallet", path: "/management/sales-orders?view=pending-receive", title: "待收款", visible: userStore.hasPermissions(permissionCodes.salesOrder.read) },
+				{ icon: "discount", path: "/management/sales-orders?view=pending-refund", title: "待退款", visible: userStore.hasPermissions(permissionCodes.salesOrder.read) },
+				{ icon: "wallet", path: "/management/fund-records", title: "资金流水", visible: userStore.hasPermissions(permissionCodes.fundRecord.read) },
+				{ icon: "task", path: "/management/order-fulfillments", title: "统一履约", visible: userStore.hasPermissions(permissionCodes.orderFulfillment.read) }
+			]
+		},
+		{
+			title: "套餐管理",
+			items: [
+				{ icon: "layers", path: "/management/package-configs", title: "套餐配置", visible: userStore.hasPermissions(permissionCodes.packageConfig.read) },
+				{ icon: "calendar", path: "/management/registration-events", title: "套餐购买事件绑定", visible: userStore.hasPermissions([permissionCodes.event.read, permissionCodes.packageConfig.read], "and") },
+				{ icon: "usergroup", path: "/management/customer-packages", title: "客户套餐", visible: userStore.hasPermissions(permissionCodes.customerPackage.read) }
+			]
 		}
 ]);
 

src/router/index.ts

@@ -13,6 +13,9 @@ import registrationRoutes from "@/router/routes/registrationRoutes";
 import tabRoutes from "@/router/routes/tabRoutes";
 import userRoutes from "@/router/routes/userRoutes";
 import notifyRoutes from "@/router/routes/notifyRoutes";
+import productRoutes from "@/router/routes/productRoutes";
+import salesOrderRoutes from "@/router/routes/salesOrderRoutes";
+import fulfillmentRoutes from "@/router/routes/fulfillmentRoutes";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useGlobalUIStore } from "@/store/globalUI";
 import { gaoRoleCodes } from "@/utils/permission";
@@ -29,7 +32,10 @@ const detailRoutes = [
 	...packageRoutes,
 	...chartRoutes,
 	...managementAccountRoutes,
-	...notifyRoutes
+	...notifyRoutes,
+	...productRoutes,
+	...salesOrderRoutes,
+	...fulfillmentRoutes
 ];
 
 const router = createRouter({

src/router/routes/fulfillmentRoutes.ts

@@ -0,0 +1,14 @@
+import type { RouteRecordRaw } from "vue-router";
+import OrderFulfillmentList from "@/pages/fulfillment/OrderFulfillmentList.vue";
+import OrderFulfillmentCreate from "@/pages/fulfillment/OrderFulfillmentCreate.vue";
+import OrderFulfillmentDetail from "@/pages/fulfillment/OrderFulfillmentDetail.vue";
+
+function meta(title: string, depth = 3): RouteRecordRaw["meta"] {
+	return { depth, navBarVisible: true, navBarCanBack: true, navBarTitle: title, tabBarVisible: false, bodyBackground: "#F5F5F8", darkBodyBackground: "#10161f" };
+}
+
+export default [
+	{ path: "/management/order-fulfillments", name: "OrderFulfillmentList", component: OrderFulfillmentList, meta: meta("统一履约") },
+	{ path: "/management/order-fulfillments/create", name: "OrderFulfillmentCreate", component: OrderFulfillmentCreate, meta: meta("创建履约单", 4) },
+	{ path: "/management/order-fulfillments/:id", name: "OrderFulfillmentDetail", component: OrderFulfillmentDetail, meta: meta("履约单详情", 4) }
+] as RouteRecordRaw[];

src/router/routes/packageRoutes.ts

@@ -4,115 +4,22 @@ import PackageConfigEdit from "@/pages/package/PackageConfigEdit.vue";
 import PackageConfigDetail from "@/pages/package/PackageConfigDetail.vue";
 import CustomerPackageList from "@/pages/package/CustomerPackageList.vue";
 import CustomerPackageDetail from "@/pages/package/CustomerPackageDetail.vue";
-import CustomerPackagePayment from "@/pages/package/CustomerPackagePayment.vue";
-import CustomerPackageDelivery from "@/pages/package/CustomerPackageDelivery.vue";
-import CustomerPackageRefund from "@/pages/package/CustomerPackageRefund.vue";
-import PackageDeliveryList from "@/pages/package/PackageDeliveryList.vue";
-import PackageDeliveryDetail from "@/pages/package/PackageDeliveryDetail.vue";
-import PackageDeliveryRevoke from "@/pages/package/PackageDeliveryRevoke.vue";
 import FundRecordList from "@/pages/package/FundRecordList.vue";
 import FundRecordDetail from "@/pages/package/FundRecordDetail.vue";
 import FundRecordRevoke from "@/pages/package/FundRecordRevoke.vue";
 
 function pageMeta(title: string, depth = 3, background = "#F5F5F8"): RouteRecordRaw["meta"] {
-	return {
+	return { depth, navBarVisible: true, navBarCanBack: true, navBarTitle: title, tabBarVisible: false, bodyBackground: background, darkBodyBackground: "#10161f" };
-		depth,
-		navBarVisible: true,
-		navBarCanBack: true,
-		navBarTitle: title,
-		tabBarVisible: false,
-		bodyBackground: background,
-		darkBodyBackground: "#10161f"
-	};
 }
 
-const packageRoutes: RouteRecordRaw[] = [
+export default [
-	{
+	{ path: "/management/package-configs", name: "PackageConfigList", component: PackageConfigList, meta: pageMeta("套餐配置") },
-		path: "/management/package-configs",
+	{ path: "/management/package-configs/create", name: "PackageConfigCreate", component: PackageConfigEdit, meta: pageMeta("新增套餐配置", 4) },
-		name: "PackageConfigList",
+	{ path: "/management/package-configs/:id", name: "PackageConfigDetail", component: PackageConfigDetail, meta: pageMeta("套餐配置详情", 4) },
-		component: PackageConfigList,
+	{ path: "/management/package-configs/:id/edit", name: "PackageConfigEdit", component: PackageConfigEdit, meta: pageMeta("编辑套餐配置", 5) },
-		meta: pageMeta("套餐配置")
+	{ path: "/management/customer-packages", name: "CustomerPackageList", component: CustomerPackageList, meta: pageMeta("客户套餐") },
-	},
+	{ path: "/management/customer-packages/:id", name: "CustomerPackageDetail", component: CustomerPackageDetail, meta: pageMeta("客户套餐详情", 4) },
-	{
-		path: "/management/package-configs/create",
-		name: "PackageConfigCreate",
-		component: PackageConfigEdit,
-		meta: pageMeta("新增套餐配置", 4)
-	},
-	{
-		path: "/management/package-configs/:id",
-		name: "PackageConfigDetail",
-		component: PackageConfigDetail,
-		meta: pageMeta("套餐配置详情", 4)
-	},
-	{
-		path: "/management/package-configs/:id/edit",
-		name: "PackageConfigEdit",
-		component: PackageConfigEdit,
-		meta: pageMeta("编辑套餐配置", 5)
-	},
-	{
-		path: "/management/customer-packages",
-		name: "CustomerPackageList",
-		component: CustomerPackageList,
-		meta: pageMeta("客户套餐")
-	},
-	{ path: "/management/customer-packages/purchase", redirect: "/management/registration-event-records/create" },
-	{
-		path: "/management/customer-packages/:id",
-		name: "CustomerPackageDetail",
-		component: CustomerPackageDetail,
-		meta: pageMeta("客户套餐详情", 4)
-	},
-	{
-		path: "/management/customer-packages/:id/payment",
-		name: "CustomerPackagePayment",
-		component: CustomerPackagePayment,
-		meta: pageMeta("登记收款", 5)
-	},
-	{
-		path: "/management/customer-packages/:id/delivery/create",
-		name: "CustomerPackageDelivery",
-		component: CustomerPackageDelivery,
-		meta: pageMeta("创建发放单", 5)
-	},
-	{
-		path: "/management/customer-packages/:id/refund",
-		name: "CustomerPackageRefund",
-		component: CustomerPackageRefund,
-		meta: pageMeta("处理退款", 5)
-	},
-	{
-		path: "/management/package-deliveries",
-		name: "PackageDeliveryList",
-		component: PackageDeliveryList,
-		meta: pageMeta("发放记录")
-	},
-	{
-		path: "/management/package-deliveries/:id",
-		name: "PackageDeliveryDetail",
-		component: PackageDeliveryDetail,
-		meta: pageMeta("发放单详情", 4, "#FFF")
-	},
-	{
-		path: "/management/package-deliveries/:id/revoke",
-		name: "PackageDeliveryRevoke",
-		component: PackageDeliveryRevoke,
-		meta: pageMeta("发放冲正", 5)
-	},
 	{ path: "/management/fund-records", name: "FundRecordList", component: FundRecordList, meta: pageMeta("资金流水") },
-	{
+	{ path: "/management/fund-records/:id", name: "FundRecordDetail", component: FundRecordDetail, meta: pageMeta("资金记录详情", 4, "#FFF") },
-		path: "/management/fund-records/:id",
+	{ path: "/management/fund-records/:id/revoke", name: "FundRecordRevoke", component: FundRecordRevoke, meta: pageMeta("资金冲正", 5) }
-		name: "FundRecordDetail",
+] as RouteRecordRaw[];
-		component: FundRecordDetail,
-		meta: pageMeta("资金记录详情", 4, "#FFF")
-	},
-	{
-		path: "/management/fund-records/:id/revoke",
-		name: "FundRecordRevoke",
-		component: FundRecordRevoke,
-		meta: pageMeta("资金冲正", 5)
-	}
-];
-
-export default packageRoutes;

src/router/routes/productRoutes.ts

@@ -0,0 +1,73 @@
+import type { RouteRecordRaw } from "vue-router";
+import ProductCategoryList from "@/pages/product/ProductCategoryList.vue";
+import ProductCategoryRank from "@/pages/product/ProductCategoryRank.vue";
+import ProductDetail from "@/pages/product/ProductDetail.vue";
+import ProductEdit from "@/pages/product/ProductEdit.vue";
+import ProductList from "@/pages/product/ProductList.vue";
+import ProductStockDetail from "@/pages/product/ProductStockDetail.vue";
+import ProductStockList from "@/pages/product/ProductStockList.vue";
+
+function pageMeta(title: string, depth = 3, background = "#F5F5F8"): RouteRecordRaw["meta"] {
+	return {
+		depth,
+		navBarVisible: true,
+		navBarCanBack: true,
+		navBarTitle: title,
+		tabBarVisible: false,
+		bodyBackground: background,
+		darkBodyBackground: "#10161f"
+	};
+}
+
+const productRoutes: RouteRecordRaw[] = [
+	{
+		path: "/management/product-categories",
+		name: "ProductCategoryList",
+		component: ProductCategoryList,
+		meta: pageMeta("产品分类")
+	},
+	{
+		path: "/management/product-categories/rank",
+		name: "ProductCategoryRank",
+		component: ProductCategoryRank,
+		meta: pageMeta("产品分类排序", 4)
+	},
+	{
+		path: "/management/products",
+		name: "ProductList",
+		component: ProductList,
+		meta: pageMeta("产品库")
+	},
+	{
+		path: "/management/products/create",
+		name: "ProductCreate",
+		component: ProductEdit,
+		meta: pageMeta("新增产品", 4)
+	},
+	{
+		path: "/management/products/:id",
+		name: "ProductDetail",
+		component: ProductDetail,
+		meta: pageMeta("产品详情", 4)
+	},
+	{
+		path: "/management/products/:id/edit",
+		name: "ProductEdit",
+		component: ProductEdit,
+		meta: pageMeta("编辑产品", 5)
+	},
+	{
+		path: "/management/product-stocks",
+		name: "ProductStockList",
+		component: ProductStockList,
+		meta: pageMeta("库存与流水")
+	},
+	{
+		path: "/management/product-stocks/:productId",
+		name: "ProductStockDetail",
+		component: ProductStockDetail,
+		meta: pageMeta("库存详情")
+	}
+];
+
+export default productRoutes;

src/router/routes/salesOrderRoutes.ts

@@ -0,0 +1,22 @@
+import type { RouteRecordRaw } from "vue-router";
+import SalesOrderList from "@/pages/salesOrder/SalesOrderList.vue";
+import SalesOrderCreate from "@/pages/salesOrder/SalesOrderCreate.vue";
+import SalesOrderDetail from "@/pages/salesOrder/SalesOrderDetail.vue";
+import SalesOrderPayment from "@/pages/salesOrder/SalesOrderPayment.vue";
+import SalesOrderRefund from "@/pages/salesOrder/SalesOrderRefund.vue";
+import SalesOrderNoRefund from "@/pages/salesOrder/SalesOrderNoRefund.vue";
+import SalesOrderCancel from "@/pages/salesOrder/SalesOrderCancel.vue";
+
+function meta(title: string, depth = 3): RouteRecordRaw["meta"] {
+	return { depth, navBarVisible: true, navBarCanBack: true, navBarTitle: title, tabBarVisible: false, bodyBackground: "#F5F5F8", darkBodyBackground: "#10161f" };
+}
+
+export default [
+	{ path: "/management/sales-orders", name: "SalesOrderList", component: SalesOrderList, meta: meta("销售订单") },
+	{ path: "/management/sales-orders/create", name: "SalesOrderCreate", component: SalesOrderCreate, meta: meta("直接产品下单", 4) },
+	{ path: "/management/sales-orders/:id", name: "SalesOrderDetail", component: SalesOrderDetail, meta: meta("销售订单详情", 4) },
+	{ path: "/management/sales-orders/:id/payment", name: "SalesOrderPayment", component: SalesOrderPayment, meta: meta("登记收款", 5) },
+	{ path: "/management/sales-orders/:id/refund", name: "SalesOrderRefund", component: SalesOrderRefund, meta: meta("登记退款", 5) },
+	{ path: "/management/sales-orders/:id/no-refund", name: "SalesOrderNoRefund", component: SalesOrderNoRefund, meta: meta("确认无需退款", 5) },
+	{ path: "/management/sales-orders/:id/cancel", name: "SalesOrderCancel", component: SalesOrderCancel, meta: meta("取消销售订单", 5) }
+] as RouteRecordRaw[];

src/types/Fulfillment.ts

@@ -0,0 +1,91 @@
+import type { Attachment, Model, PageResult, User } from "timi-web-api";
+
+export type FulfillmentType = "PACKAGE_ENTITLEMENT" | "DIRECT_PRODUCT";
+export type FulfillmentStatus = "WAITING_STOCK" | "PENDING" | "VERIFIED" | "REJECTED" | "CANCELLED" | "REVOKED";
+
+export type OrderFulfillmentItem = {
+	fulfillmentId?: string;
+	productId?: string;
+	productUnitId?: string;
+	sourceOrderItemId?: string;
+	sourceCustomerPackageItemId?: string;
+	quantity?: number | string;
+	baseQuantity?: number | string;
+	reservedBefore?: number | string;
+	reservedAfter?: number | string;
+	fulfilledBefore?: number | string;
+	fulfilledAfter?: number | string;
+	productNameSnapshot?: string;
+	unitSnapshot?: string;
+	baseQuantityPerUnitSnapshot?: number | string;
+} & Model;
+
+export type OrderFulfillment = {
+	salesOrderId?: string;
+	storeId?: string;
+	customerId?: string;
+	fulfillmentType?: FulfillmentType;
+	status?: FulfillmentStatus;
+	requestNo?: string;
+	operatorUserId?: string;
+	deliveredAt?: number;
+	verifierUserId?: string;
+	verifiedAt?: number;
+	sourceFulfillmentId?: string;
+	reason?: string | null;
+	remark?: string | null;
+	operator?: Partial<User>;
+	verifier?: Partial<User>;
+	sourceFulfillment?: OrderFulfillment;
+	itemList?: OrderFulfillmentItem[];
+	stockRecordList?: Record<string, unknown>[];
+	attachmentList?: Partial<Attachment>[];
+} & Model;
+
+export type FulfillmentPage = {
+	storeId?: string;
+	salesOrderId?: string;
+	customerId?: string;
+	fulfillmentType?: FulfillmentType;
+	status?: FulfillmentStatus;
+	beginAt?: number;
+	endAt?: number;
+	index: number;
+	size: number;
+};
+
+export type OrderFulfillmentCreateRequest = {
+	salesOrderId: string;
+	requestNo: string;
+	deliveredAt?: number;
+	itemList: OrderFulfillmentItemRequest[];
+	attachmentList?: Partial<Attachment>[];
+	remark?: string | null;
+};
+
+export type OrderFulfillmentItemRequest = {
+	sourceOrderItemId?: string;
+	sourceCustomerPackageItemId?: string;
+	quantity: number | string;
+};
+
+export type FulfillmentActionRequest = { fulfillmentId: string; reason: string };
+
+export type FulfillmentPrepareStockRequest = {
+	fulfillmentId: string;
+	reason?: string;
+	remark?: string | null;
+	attachmentList?: Partial<Attachment>[];
+};
+
+export type FulfillmentRevokeRequest = {
+	fulfillmentId: string;
+	requestNo: string;
+	deliveredAt?: number;
+	reason: string;
+	returnedToStore: boolean;
+	attachmentList?: Partial<Attachment>[];
+	remark?: string | null;
+};
+
+export type FulfillmentPageResult<T> = PageResult<T> & { pages?: number };

src/types/Package.ts

@@ -1,19 +1,18 @@
 import type { Attachment, Model, PageResult, User } from "timi-web-api";
 import type { Customer } from "@/types/Customer";
 import type { EventRecord } from "@/types/EventRecord";
+import type { OrderFulfillment } from "@/types/Fulfillment";
 
 export type PackageConfigStatus = "DRAFT" | "ACTIVE" | "INACTIVE";
 export type CustomerPackageStatus = "ACTIVE" | "FULFILLED" | "CANCELLED";
-export type PaymentStatus = "UNPAID" | "PARTIALLY_PAID" | "PAID";
-export type RefundStatus = "NOT_REQUIRED" | "PENDING" | "REFUNDED";
-export type DeliveryStatus = "PENDING" | "VERIFIED" | "REJECTED" | "CANCELLED" | "REVOKED";
-export type DeliveryOperationType = "DELIVER" | "REVOKE";
-export type FundOperationType = "RECEIVE" | "REFUND" | "CONFIRM_NO_REFUND" | "REVOKE";
-export type FundRecordStatus = "PENDING" | "VERIFIED" | "REJECTED" | "CANCELLED";
 
 export type PackageConfigItem = {
-	productName: string;
+	packageConfigId?: string;
-	unit: string;
+	productId: string;
+	productUnitId: string;
+	productNameSnapshot?: string;
+	unitSnapshot?: string;
+	baseQuantityPerUnitSnapshot?: number | string;
 	defaultQuantity: number | string;
 	sort?: number;
 	remark?: string | null;
@@ -32,181 +31,65 @@ export type GaoPackageConfig = {
 	updater?: Partial<User>;
 } & Model;
 
-export type PackageConfigPage = {
+export type PackageConfigPage = { storeId?: string; keyword?: string; status?: PackageConfigStatus; index: number; size: number };
-	storeId?: string;
-	keyword?: string;
-	status?: PackageConfigStatus;
-	index: number;
-	size: number;
-};
 
 export type CustomerPackageItem = {
-	productNameSnapshot: string;
+	customerPackageId?: string;
-	unitSnapshot: string;
+	productId?: string;
+	productUnitId?: string;
+	productNameSnapshot?: string;
+	unitSnapshot?: string;
+	baseQuantityPerUnitSnapshot?: number | string;
 	totalQuantity: number | string;
 	reservedQuantity: number | string;
-	deliveredQuantity: number | string;
+	fulfilledQuantity: number | string;
 	pendingQuantity: number | string;
 	availableQuantity: number | string;
 	remainingQuantity: number | string;
+	sort?: number;
+	remark?: string | null;
 } & Model;
 
 export type GaoCustomerPackage = {
 	storeId?: string;
+	salesOrderId?: string;
 	customerId?: string;
 	packageConfigId?: string;
 	packageNameSnapshot?: string;
 	standardAmountSnapshot?: number;
-	saleAmount?: number;
-	pendingPaidAmount?: number;
-	paidAmount?: number;
-	refundedAmount?: number;
 	status?: CustomerPackageStatus;
-	paymentStatus?: PaymentStatus;
-	refundStatus?: RefundStatus;
-	purchasedAt?: number;
 	cancelledAt?: number | null;
+	cancelOperatorUserId?: string;
+	cancelReason?: string | null;
+	remark?: string | null;
 	customer?: Customer;
+	cancelOperator?: Partial<User>;
 	purchaseEventRecord?: EventRecord;
 	itemList?: CustomerPackageItem[];
-	deliveryList?: GaoPackageDelivery[];
+	fulfillmentList?: OrderFulfillment[];
-	fundRecordList?: GaoFundRecord[];
 } & Model;
 
-export type CustomerPackagePage = {
+export type CustomerPackagePage = { storeId?: string; customerId?: string; keyword?: string; status?: CustomerPackageStatus; beginAt?: number; endAt?: number; index: number; size: number };
-	storeId?: string;
-	customerId?: string;
-	keyword?: string;
-	status?: CustomerPackageStatus;
-	paymentStatus?: PaymentStatus;
-	refundStatus?: RefundStatus;
-	beginAt?: number;
-	endAt?: number;
-	index: number;
-	size: number;
-};
 
 export type PackagePurchaseItem = {
-	productName: string;
+	productId: string;
-	unit: string;
+	productUnitId: string;
-	totalQuantity: string;
+	totalQuantity: number | string;
 	sort?: number;
 	remark?: string | null;
 };
 
-export type PackageAttachment = Partial<Attachment> & {
+export type PackageAttachment = Partial<Attachment> & { tempFileId?: string; attachType?: string; name?: string };
-	tempFileId?: string;
-	attachType?: string;
-	name?: string;
-};
 
 export type PackagePurchaseRequest = {
 	requestNo: string;
 	eventId: string;
 	customerId: string;
-	saleAmount?: number;
+	saleAmount: number;
 	purchasedAt?: number;
-	itemList?: PackagePurchaseItem[];
+	itemList: PackagePurchaseItem[];
 	attachmentList?: PackageAttachment[];
 	remark?: string | null;
 };
 
-export type PackagePaymentReceiveRequest = {
+export type PackagePageResult<T> = PageResult<T> & { pages?: number };
-	requestNo: string;
-	customerPackageId: string;
-	amount: number;
-	occurredAt?: number;
-	attachmentList: PackageAttachment[];
-	remark?: string | null;
-};
-
-export type PackageDeliveryItem = {
-	customerPackageItemId: string;
-	quantity: string;
-};
-
-export type PackageDeliveryCreateRequest = {
-	requestNo: string;
-	customerPackageId: string;
-	deliveredAt?: number;
-	itemList: PackageDeliveryItem[];
-	attachmentList: PackageAttachment[];
-	remark?: string | null;
-};
-
-export type GaoPackageDeliveryItem = {
-	customerPackageItemId?: string;
-	productNameSnapshot?: string;
-	unitSnapshot?: string;
-	quantity?: number | string;
-	reservedBefore?: number | string;
-	reservedAfter?: number | string;
-	deliveredBefore?: number | string;
-	deliveredAfter?: number | string;
-};
-
-export type GaoPackageDelivery = {
-	customerPackageId?: string;
-	customerId?: string;
-	operationType?: DeliveryOperationType;
-	status?: DeliveryStatus;
-	requestNo?: string;
-	operatorUserId?: string;
-	operator?: Partial<User>;
-	verifierUserId?: string;
-	verifier?: Partial<User>;
-	deliveredAt?: number;
-	sourceDeliveryId?: string;
-	reason?: string | null;
-	itemList?: GaoPackageDeliveryItem[];
-	attachmentList?: PackageAttachment[];
-} & Model;
-
-export type DeliveryPage = {
-	storeId?: string;
-	customerPackageId?: string;
-	customerId?: string;
-	status?: DeliveryStatus;
-	operationType?: DeliveryOperationType;
-	beginAt?: number;
-	endAt?: number;
-	index: number;
-	size: number;
-};
-
-export type GaoFundRecord = {
-	bizId?: string;
-	customerPackageId?: string;
-	customerId?: string;
-	customer?: Customer;
-	customerPackage?: GaoCustomerPackage;
-	operationType?: FundOperationType;
-	status?: FundRecordStatus;
-	amount?: number;
-	sourceRecordId?: string;
-	requestNo?: string;
-	occurredAt?: number;
-	reason?: string | null;
-	remark?: string | null;
-	operatorUserId?: string;
-	operator?: Partial<User>;
-	verifierUserId?: string;
-	verifier?: Partial<User>;
-	attachmentList?: PackageAttachment[];
-} & Model;
-
-export type FundRecordPage = {
-	storeId?: string;
-	customerPackageId?: string;
-	customerId?: string;
-	operationType?: FundOperationType;
-	status?: FundRecordStatus;
-	beginAt?: number;
-	endAt?: number;
-	index: number;
-	size: number;
-};
-
-export type PackagePageResult<T> = PageResult<T> & {
-	pages?: number;
-};

src/types/Product.ts

@@ -0,0 +1,147 @@
+import type { Attachment, Model, PageResult, User } from "timi-web-api";
+
+export type ProductType = "SERVICE" | "GOODS" | "CONSUMABLE";
+export type ProductAttachmentType = "PHOTO" | "OTHER";
+export type ProductStatus = "ACTIVE" | "INACTIVE";
+export type ProductCategoryStatus = "ACTIVE" | "INACTIVE";
+export type StockBizType = "PRODUCT_STOCK" | "ORDER_FULFILLMENT";
+export type StockOperationType =
+	| "INITIAL_IN"
+	| "MANUAL_IN"
+	| "MANUAL_OUT"
+	| "ORDER_RESERVE"
+	| "ORDER_RELEASE"
+	| "ORDER_OUT"
+	| "ORDER_REVOKE"
+	| "STOCKTAKE_GAIN"
+	| "STOCKTAKE_LOSS";
+
+export type ProductCategory = {
+	storeId?: string;
+	name: string;
+	sort?: number;
+	status?: ProductCategoryStatus;
+} & Model;
+
+export type ProductUnit = {
+	productId?: string;
+	name: string;
+	baseQuantityPerUnit: number | string;
+	salePrice?: number | null;
+	isBase?: boolean;
+	allowPurchase?: boolean;
+	allowSale?: boolean;
+	sort?: number;
+} & Model;
+
+export type Product = {
+	storeId?: string;
+	categoryId?: string;
+	code: string;
+	name: string;
+	productType: ProductType;
+	baseUnit: string;
+	stockEnabled: boolean;
+	allowDecimalQuantity: boolean;
+	status?: ProductStatus;
+	referenceCost?: number | null;
+	minStockQuantity?: number | string | null;
+	sort?: number;
+	remark?: string | null;
+	updatedBy?: string;
+	category?: ProductCategory;
+	unitList?: ProductUnit[];
+	attachmentList?: Attachment[];
+} & Model;
+
+export type ProductCategoryPage = {
+	storeId?: string;
+	status?: ProductCategoryStatus;
+	keyword?: string;
+	index: number;
+	size: number;
+};
+
+export type ProductPage = {
+	storeId?: string;
+	categoryId?: string;
+	categoryIdList?: string[];
+	status?: ProductStatus;
+	productType?: ProductType;
+	keyword?: string;
+	index: number;
+	size: number;
+};
+
+export type ProductStock = {
+	storeId?: string;
+	productId?: string;
+	onHandQuantity?: number | string;
+	reservedQuantity?: number | string;
+	updatedBy?: string;
+	product?: Product;
+	availableQuantity?: number | string;
+} & Model;
+
+export type ProductStockPage = {
+	storeId?: string;
+	productId?: string;
+	keyword?: string;
+	index: number;
+	size: number;
+};
+
+export type StockRecord = {
+	storeId?: string;
+	productId?: string;
+	productUnitId?: string;
+	productNameSnapshot?: string;
+	unitSnapshot?: string;
+	baseQuantityPerUnitSnapshot?: number | string;
+	quantity?: number | string;
+	baseQuantity?: number | string;
+	operationType?: StockOperationType;
+	onHandDelta?: number | string;
+	reservedDelta?: number | string;
+	onHandBefore?: number | string;
+	onHandAfter?: number | string;
+	reservedBefore?: number | string;
+	reservedAfter?: number | string;
+	bizType?: StockBizType;
+	bizId?: string;
+	sourceRecordId?: string;
+	requestNo?: string;
+	operatorUserId?: string;
+	occurredAt?: number;
+	reason?: string | null;
+	remark?: string | null;
+	operator?: Partial<User>;
+	attachmentList?: Partial<Attachment>[];
+} & Model;
+
+export type StockRecordPage = {
+	storeId?: string;
+	productId?: string;
+	bizType?: StockBizType;
+	bizId?: string;
+	operationType?: StockOperationType;
+	beginAt?: number;
+	endAt?: number;
+	index: number;
+	size: number;
+};
+
+export type ProductStockChangeRequest = {
+	requestNo: string;
+	storeId?: string;
+	productId: string;
+	productUnitId: string;
+	quantity: number | string;
+	reason?: string;
+	remark?: string | null;
+	attachmentList: Partial<Attachment>[];
+};
+
+export type ProductPageResult<T> = PageResult<T> & {
+	pages?: number;
+};

src/types/SalesOrder.ts

@@ -0,0 +1,167 @@
+import type { Attachment, Model, PageResult, User } from "timi-web-api";
+import type { Customer } from "@/types/Customer";
+import type { EventRecord } from "@/types/EventRecord";
+
+export type SalesOrderType = "PACKAGE" | "DIRECT_PRODUCT";
+export type SalesOrderStatus = "ACTIVE" | "FULFILLED" | "CANCELLED";
+export type SalesPaymentStatus = "UNPAID" | "PARTIALLY_PAID" | "PAID";
+export type SalesRefundStatus = "NOT_REQUIRED" | "PENDING" | "REFUNDED";
+export type FundBizType = "SALES_ORDER";
+export type FundOperationType = "RECEIVE" | "REFUND" | "CONFIRM_NO_REFUND" | "REVOKE";
+export type FundRecordStatus = "PENDING" | "VERIFIED" | "REJECTED" | "CANCELLED";
+
+export type SalesOrderItem = {
+	salesOrderId?: string;
+	productId?: string;
+	productUnitId?: string;
+	productNameSnapshot?: string;
+	unitSnapshot?: string;
+	baseQuantityPerUnitSnapshot?: number | string;
+	quantity?: number | string;
+	reservedQuantity?: number | string;
+	fulfilledQuantity?: number | string;
+	unitPrice?: number;
+	lineAmount?: number;
+	sort?: number;
+	remark?: string | null;
+} & Model;
+
+export type SalesOrder = {
+	storeId?: string;
+	customerId?: string;
+	orderNo?: string;
+	orderType?: SalesOrderType;
+	status?: SalesOrderStatus;
+	paymentStatus?: SalesPaymentStatus;
+	refundStatus?: SalesRefundStatus;
+	saleAmount?: number;
+	pendingPaidAmount?: number;
+	paidAmount?: number;
+	refundedAmount?: number;
+	unpaidAmount?: number;
+	sourceEventRecordId?: string;
+	requestNo?: string;
+	purchasedAt?: number;
+	operatorUserId?: string;
+	cancelledAt?: number;
+	cancelOperatorUserId?: string;
+	cancelReason?: string | null;
+	remark?: string | null;
+	customer?: Customer;
+	operator?: Partial<User>;
+	cancelOperator?: Partial<User>;
+	itemList?: SalesOrderItem[];
+	fundRecordList?: FundRecord[];
+	sourceEventRecord?: EventRecord;
+	attachmentList?: Partial<Attachment>[];
+} & Model;
+
+export type SalesOrderPage = {
+	storeId?: string;
+	customerId?: string;
+	orderType?: SalesOrderType;
+	status?: SalesOrderStatus;
+	paymentStatus?: SalesPaymentStatus;
+	fulfilledButUnpaid?: boolean;
+	keyword?: string;
+	beginAt?: number;
+	endAt?: number;
+	index: number;
+	size: number;
+};
+
+export type DirectProductOrderItemRequest = {
+	productId: string;
+	productUnitId: string;
+	quantity: number | string;
+	unitPrice?: number;
+	sort?: number;
+	remark?: string | null;
+};
+
+export type DirectProductOrderCreateRequest = {
+	requestNo: string;
+	storeId?: string;
+	customerId: string;
+	purchasedAt?: number;
+	itemList: DirectProductOrderItemRequest[];
+	attachmentList?: Partial<Attachment>[];
+	remark?: string | null;
+};
+
+export type OrderPaymentReceiveRequest = {
+	salesOrderId: string;
+	requestNo: string;
+	amount: number;
+	occurredAt?: number;
+	attachmentList?: Partial<Attachment>[];
+	remark?: string | null;
+};
+
+export type OrderPaymentActionRequest = { fundRecordId: string; reason: string };
+
+export type OrderPaymentRefundRequest = {
+	salesOrderId: string;
+	requestNo: string;
+	amount: number;
+	occurredAt?: number;
+	reason: string;
+	attachmentList?: Partial<Attachment>[];
+	remark?: string | null;
+};
+
+export type OrderPaymentNoRefundRequest = {
+	salesOrderId: string;
+	requestNo: string;
+	occurredAt?: number;
+	reason: string;
+	remark?: string | null;
+};
+
+export type OrderPaymentRevokeRequest = {
+	requestNo: string;
+	fundRecordId: string;
+	occurredAt?: number;
+	reason: string;
+	attachmentList?: Partial<Attachment>[];
+	remark?: string | null;
+};
+
+export type SalesOrderCancelRequest = { salesOrderId: string; reason: string };
+
+export type FundRecord = {
+	storeId?: string;
+	customerId?: string;
+	bizType?: FundBizType;
+	bizId?: string;
+	operationType?: FundOperationType;
+	status?: FundRecordStatus;
+	amount?: number;
+	sourceRecordId?: string;
+	requestNo?: string;
+	operatorUserId?: string;
+	verifierUserId?: string;
+	verifiedAt?: number;
+	occurredAt?: number;
+	reason?: string | null;
+	remark?: string | null;
+	operator?: Partial<User>;
+	verifier?: Partial<User>;
+	customer?: Customer;
+	attachmentList?: Partial<Attachment>[];
+} & Model;
+
+export type FundRecordPage = {
+	storeId?: string;
+	salesOrderId?: string;
+	bizType?: FundBizType;
+	customerId?: string;
+	operationType?: FundOperationType;
+	status?: FundRecordStatus;
+	beginAt?: number;
+	endAt?: number;
+	index: number;
+	size: number;
+};
+
+export type SalesOrderPageResult<T> = PageResult<T> & { pages?: number };

src/types/Store.ts

@@ -11,6 +11,7 @@ export type Store = {
 	address?: string;
 	remark?: string;
 	autoClosedDay?: boolean;
+	directProductSaleEventId?: string;
 	sort?: number;
 } & Model;
 

src/utils/package.ts

@@ -1,15 +1,9 @@
 import type {
 	CustomerPackageItem,
 	CustomerPackageStatus,
-	DeliveryOperationType,
+	PackageConfigStatus
-	DeliveryStatus,
-	FundOperationType,
-	FundRecordStatus,
-	GaoCustomerPackage,
-	PackageConfigStatus,
-	PaymentStatus,
-	RefundStatus
 } from "@/types/Package";
+import type { FundOperationType, FundRecordStatus } from "@/types/SalesOrder";
 
 /** 生成套餐业务幂等请求号。每次新操作必须重新生成。 */
 export function createPackageRequestNo(): string {
@@ -90,22 +84,6 @@ export function getCustomerPackageStatusText(status?: CustomerPackageStatus): st
 	return ({ ACTIVE: "进行中", FULFILLED: "已履约", CANCELLED: "已取消" } as Record<string, string>)[status || ""] || "未知";
 }
 
-export function getPaymentStatusText(status?: PaymentStatus): string {
-	return ({ UNPAID: "未收款", PARTIALLY_PAID: "部分收款", PAID: "已收款" } as Record<string, string>)[status || ""] || "未知";
-}
-
-export function getRefundStatusText(status?: RefundStatus): string {
-	return ({ NOT_REQUIRED: "无需退款", PENDING: "待退款", REFUNDED: "已退款" } as Record<string, string>)[status || ""] || "未知";
-}
-
-export function getDeliveryStatusText(status?: DeliveryStatus): string {
-	return ({ PENDING: "待核销", VERIFIED: "已核销", REJECTED: "已拒绝", CANCELLED: "已撤销", REVOKED: "已冲正" } as Record<string, string>)[status || ""] || "未知";
-}
-
-export function getDeliveryOperationText(type?: DeliveryOperationType): string {
-	return type === "REVOKE" ? "发放冲正" : "正常发放";
-}
-
 export function getFundOperationText(type?: FundOperationType): string {
 	return ({ RECEIVE: "线下收款", REFUND: "退款", CONFIRM_NO_REFUND: "确认无需退款", REVOKE: "资金冲正" } as Record<string, string>)[type || ""] || "未知";
 }
@@ -118,20 +96,6 @@ export function getPackageItemAvailableQuantity(item: CustomerPackageItem): stri
 	return getPackageQuantityText(item.availableQuantity);
 }
 
-/** 判断套餐是否存在可用于发放的已核销收款。免费套餐可直接发放。 */
-export function canCreatePackageDelivery(customerPackage?: Pick<GaoCustomerPackage, "saleAmount" | "paidAmount">): boolean {
-	const saleAmount = customerPackage?.saleAmount || 0;
-	const paidAmount = customerPackage?.paidAmount || 0;
-	return saleAmount === 0 || 0 < paidAmount;
-}
-
-/** 判断未付清套餐的发放操作是否必须由店长执行。 */
-export function isStoreManagerRequiredForPackageDelivery(customerPackage?: Pick<GaoCustomerPackage, "saleAmount" | "paidAmount">): boolean {
-	const saleAmount = customerPackage?.saleAmount || 0;
-	const paidAmount = customerPackage?.paidAmount || 0;
-	return 0 < paidAmount && paidAmount < saleAmount;
-}
-
 function toQuantityParts(value: number | string): { value: bigint; scale: number } | undefined {
 	const normalized = normalizePackageQuantity(value);
 	if (!normalized) {

src/utils/permission.ts

@@ -45,6 +45,20 @@ export const permissionCodes = {
 		update: "GAO:POINT_RULE:UPDATE",
 		delete: "GAO:POINT_RULE:DELETE"
 	},
+	productCategory: {
+		create: "GAO:PRODUCT_CATEGORY:CREATE",
+		read: "GAO:PRODUCT_CATEGORY:READ",
+		update: "GAO:PRODUCT_CATEGORY:UPDATE"
+	},
+	product: {
+		create: "GAO:PRODUCT:CREATE",
+		read: "GAO:PRODUCT:READ",
+		update: "GAO:PRODUCT:UPDATE"
+	},
+	productStock: {
+		create: "GAO:PRODUCT_STOCK:CREATE",
+		read: "GAO:PRODUCT_STOCK:READ"
+	},
 	packageConfig: {
 		create: "GAO:PACKAGE_CONFIG:CREATE",
 		read: "GAO:PACKAGE_CONFIG:READ",
@@ -57,11 +71,17 @@ export const permissionCodes = {
 		cancel: "GAO:CUSTOMER_PACKAGE:CANCEL",
 		priceOverride: "GAO:CUSTOMER_PACKAGE:PRICE_OVERRIDE"
 	},
-	packageDelivery: {
+	salesOrder: {
-		create: "GAO:PACKAGE_DELIVERY:CREATE",
+		create: "GAO:SALES_ORDER:CREATE",
-		read: "GAO:PACKAGE_DELIVERY:READ",
+		read: "GAO:SALES_ORDER:READ",
-		verify: "GAO:PACKAGE_DELIVERY:VERIFY",
+		cancel: "GAO:SALES_ORDER:CANCEL",
-		revoke: "GAO:PACKAGE_DELIVERY:REVOKE"
+		priceOverride: "GAO:SALES_ORDER:PRICE_OVERRIDE"
+	},
+	orderFulfillment: {
+		create: "GAO:ORDER_FULFILLMENT:CREATE",
+		read: "GAO:ORDER_FULFILLMENT:READ",
+		verify: "GAO:ORDER_FULFILLMENT:VERIFY",
+		revoke: "GAO:ORDER_FULFILLMENT:REVOKE"
 	},
 	fundReceive: {
 		create: "GAO:FUND_RECEIVE:CREATE",
@@ -169,6 +189,14 @@ export const gaoStoreScopePermissionCodes = [
 	permissionCodes.pointRule.read,
 	permissionCodes.pointRule.update,
 	permissionCodes.pointRule.delete,
+	permissionCodes.productCategory.create,
+	permissionCodes.productCategory.read,
+	permissionCodes.productCategory.update,
+	permissionCodes.product.create,
+	permissionCodes.product.read,
+	permissionCodes.product.update,
+	permissionCodes.productStock.create,
+	permissionCodes.productStock.read,
 	permissionCodes.packageConfig.create,
 	permissionCodes.packageConfig.read,
 	permissionCodes.packageConfig.update,
@@ -177,10 +205,14 @@ export const gaoStoreScopePermissionCodes = [
 	permissionCodes.customerPackage.read,
 	permissionCodes.customerPackage.cancel,
 	permissionCodes.customerPackage.priceOverride,
-	permissionCodes.packageDelivery.create,
+	permissionCodes.salesOrder.create,
-	permissionCodes.packageDelivery.read,
+	permissionCodes.salesOrder.read,
-	permissionCodes.packageDelivery.verify,
+	permissionCodes.salesOrder.cancel,
-	permissionCodes.packageDelivery.revoke,
+	permissionCodes.salesOrder.priceOverride,
+	permissionCodes.orderFulfillment.create,
+	permissionCodes.orderFulfillment.read,
+	permissionCodes.orderFulfillment.verify,
+	permissionCodes.orderFulfillment.revoke,
 	permissionCodes.fundReceive.create,
 	permissionCodes.fundReceive.verify,
 	permissionCodes.fundRecord.read,

src/utils/product.ts

@@ -0,0 +1,85 @@
+import type { ProductCategoryStatus, ProductStatus, ProductType, StockOperationType } from "@/types/Product";
+
+/** 生成产品域写操作的幂等请求号。一次失败重试应复用调用方已经生成的请求号。 */
+export function createProductRequestNo(): string {
+	return window.crypto.randomUUID();
+}
+
+/** 将分转换成金额展示文本。金额不使用浮点数格式化。 */
+export function formatProductAmount(cents?: number | null): string {
+	if (cents === undefined || cents === null) {
+		return "未设置";
+	}
+
+	const negative = cents < 0;
+	const absolute = Math.abs(Math.trunc(cents));
+	return `${negative ? "-" : ""}${Math.floor(absolute / 100)}.${String(absolute % 100).padStart(2, "0")}`;
+}
+
+/** 将元金额输入精确转换为分。 */
+export function parseProductAmount(value: string): number | undefined {
+	const text = value.trim();
+	if (!/^\d+(?:\.\d{1,2})?$/.test(text)) {
+		return undefined;
+	}
+
+	const [yuanText, fenText = ""] = text.split(".");
+	const cents = BigInt(yuanText) * 100n + BigInt(fenText.padEnd(2, "0") || "0");
+	const result = Number(cents);
+	return Number.isSafeInteger(result) ? result : undefined;
+}
+
+/** 规范化最多三位小数的非负数量。 */
+export function normalizeProductQuantity(value: number | string): string | undefined {
+	const text = String(value).trim();
+	if (!/^\d+(?:\.\d{1,3})?$/.test(text)) {
+		return undefined;
+	}
+
+	const [integerText, fractionText = ""] = text.split(".");
+	const integer = integerText.replace(/^0+(?=\d)/, "") || "0";
+	const fraction = fractionText.replace(/0+$/, "");
+	return fraction ? `${integer}.${fraction}` : integer;
+}
+
+export function getProductTypeText(type?: ProductType): string {
+	return ({ SERVICE: "服务", GOODS: "实物", CONSUMABLE: "消耗品" } as Record<string, string>)[type || ""] || "未知";
+}
+
+export function getProductStatusText(status?: ProductStatus): string {
+	return ({ ACTIVE: "启用", INACTIVE: "停用" } as Record<string, string>)[status || ""] || "未知";
+}
+
+export function getProductStatusTheme(status?: ProductStatus): "success" | "warning" | "default" {
+	return status === "ACTIVE" ? "success" : status === "INACTIVE" ? "warning" : "default";
+}
+
+export function getProductCategoryStatusText(status?: ProductCategoryStatus): string {
+	return ({ ACTIVE: "启用", INACTIVE: "停用" } as Record<string, string>)[status || ""] || "未知";
+}
+
+export function getProductCategoryStatusTheme(status?: ProductCategoryStatus): "success" | "warning" | "default" {
+	return status === "ACTIVE" ? "success" : status === "INACTIVE" ? "warning" : "default";
+}
+
+export function getStockOperationText(type?: StockOperationType): string {
+	return ({
+		INITIAL_IN: "期初入库",
+		MANUAL_IN: "手工入库",
+		MANUAL_OUT: "手工出库",
+		ORDER_RESERVE: "履约预占",
+		ORDER_RELEASE: "履约释放预占",
+		ORDER_OUT: "履约出库",
+		ORDER_REVOKE: "履约冲正入库",
+		STOCKTAKE_GAIN: "盘盈",
+		STOCKTAKE_LOSS: "盘亏"
+	} as Record<string, string>)[type || ""] || "未知操作";
+}
+
+/** 将数量转换成稳定的展示文本，兼容后端 BigDecimal 字符串。 */
+export function getProductQuantityText(value?: number | string | null): string {
+	if (value === undefined || value === null || value === "") {
+		return "0";
+	}
+	return normalizeProductQuantity(value) || "0";
+}

src/utils/salesOrder.ts

@@ -0,0 +1,33 @@
+import type { FulfillmentStatus, FulfillmentType } from "@/types/Fulfillment";
+import type { FundOperationType, FundRecordStatus, SalesOrderStatus, SalesOrderType, SalesPaymentStatus, SalesRefundStatus } from "@/types/SalesOrder";
+
+export function getSalesOrderTypeText(type?: SalesOrderType): string {
+	return type === "PACKAGE" ? "套餐订单" : type === "DIRECT_PRODUCT" ? "直接产品订单" : "未知订单";
+}
+export function getSalesOrderStatusText(status?: SalesOrderStatus): string {
+	return ({ ACTIVE: "进行中", FULFILLED: "已履约", CANCELLED: "已取消" } as Record<string, string>)[status || ""] || "未知";
+}
+export function getSalesPaymentStatusText(status?: SalesPaymentStatus): string {
+	return ({ UNPAID: "未收款", PARTIALLY_PAID: "部分收款", PAID: "已收款" } as Record<string, string>)[status || ""] || "未知";
+}
+export function getSalesRefundStatusText(status?: SalesRefundStatus): string {
+	return ({ NOT_REQUIRED: "无需退款", PENDING: "待处理退款", REFUNDED: "已退款" } as Record<string, string>)[status || ""] || "未知";
+}
+export function getFundOperationText(type?: FundOperationType): string {
+	return ({ RECEIVE: "线下收款", REFUND: "退款", CONFIRM_NO_REFUND: "确认无需退款", REVOKE: "资金冲正" } as Record<string, string>)[type || ""] || "未知";
+}
+export function getFundStatusText(status?: FundRecordStatus): string {
+	return ({ PENDING: "待核销", VERIFIED: "已生效", REJECTED: "已拒绝", CANCELLED: "已撤销" } as Record<string, string>)[status || ""] || "未知";
+}
+export function getFulfillmentTypeText(type?: FulfillmentType): string {
+	return type === "PACKAGE_ENTITLEMENT" ? "套餐权益" : type === "DIRECT_PRODUCT" ? "直接产品" : "未知来源";
+}
+export function getFulfillmentStatusText(status?: FulfillmentStatus): string {
+	return ({ WAITING_STOCK: "等待库存", PENDING: "待核销", VERIFIED: "已核销", REJECTED: "已拒绝", CANCELLED: "已撤销", REVOKED: "已冲正" } as Record<string, string>)[status || ""] || "未知";
+}
+export function getStatusTheme(status?: string): "success" | "warning" | "danger" | "default" {
+	if (["VERIFIED", "PAID", "FULFILLED"].includes(status || "")) return "success";
+	if (["PENDING", "ACTIVE", "WAITING_STOCK"].includes(status || "")) return "warning";
+	if (["REJECTED", "CANCELLED"].includes(status || "")) return "danger";
+	return "default";
+}