update style

src/pages/salesOrder/FundRecordList.vue

@@ -41,7 +41,7 @@
 				<t-dropdown-item
 					v-if="!isSelfReceiveOnly"
 					v-model="operationType"
-					label="操作类型"
+					:label="operationFilterLabel"
 					:options="operationOptions"
 					@change="selectOperation"
 				/>
@@ -89,16 +89,14 @@
 					</template>
 					<template #title>
 						<div class="title">
-							<span class="customer" v-text="getCustomerText(item)" />
-							<div class="operation">
-								<span v-text="getFundOperationText(item.operationType)" />
-								<t-tag
-									size="small"
-									:content="getRecordStatusText(item)"
-									variant="light-outline"
-									:theme="getRecordStatusTheme(item)"
-								/>
-							</div>
+							<span class="customer clip-text" v-text="getCustomerText(item)" />
+							<span class="type" :class="getOperationClass(item.operationType)" v-text="getFundOperationText(item.operationType)" />
+							<t-tag
+								size="small"
+								:content="getRecordStatusText(item)"
+								variant="light-outline"
+								:theme="getRecordStatusTheme(item)"
+							/>
 						</div>
 					</template>
 					<template #description>
@@ -217,7 +215,7 @@ const dateOptions: Array<{ label: string; value: DateFilterType }> = [
 	{ label: "全部", value: "all" },
 	{ label: "自定义范围", value: "custom" }
 ];
-const dateFilterType = ref<DateFilterType>(parseDateFilterType(getQueryText(route.query.dateType), dateOptions, "thisWeek"));
+const dateFilterType = ref<DateFilterType>(parseDateFilterType(getQueryText(route.query.dateType), dateOptions, "all"));
 const dateRange = ref<[string, string]>(parseDateRange(dateFilterType.value));
 const startDraft = ref("");
 const endDraft = ref("");
@@ -233,6 +231,7 @@ const operationOptions = [
 	{ label: "确认无需退款", value: "CONFIRM_NO_REFUND" },
 	{ label: "资金冲正", value: "REVOKE" }
 ];
+const operationFilterLabel = computed(() => operationOptions.find(item => item.value === operationType.value)?.label || "操作类型");
 const statusOptions = [
 	{ label: "全部状态", value: "ALL" },
 	{ label: "待核销", value: "PENDING" },
@@ -462,6 +461,15 @@ function getCustomerText(item: FundRecord): string {
 	return item.customer?.name || item.customer?.code || item.customerId || "未知客户";
 }
 
+function getOperationClass(type?: FundOperationType): string {
+	return ({
+		RECEIVE: "receive",
+		REFUND: "refund",
+		CONFIRM_NO_REFUND: "confirm-no-refund",
+		REVOKE: "revoke"
+	} as Record<string, string>)[type || ""] || "unknown";
+}
+
 function getStatusTheme(statusValue?: FundRecordStatus): "success" | "warning" | "danger" | "default" {
 	return statusValue === "VERIFIED" ? "success" : statusValue === "PENDING" ? "warning" : statusValue === "REJECTED" ? "danger" : "default";
 }
@@ -561,25 +569,34 @@ onUnmounted(() => navBarStore.clearRight());
 		}
 
 		.title {
-			gap: .5rem;
+			gap: .25rem;
 			display: flex;
 			font-size: .75rem;
 			align-items: center;
 			justify-content: space-between;
 
 			.customer {
-				min-width: 0;
-				overflow: hidden;
 				font-weight: 600;
-				white-space: nowrap;
-				text-overflow: ellipsis;
 			}
 
-			.operation {
-				gap: .5rem;
-				display: flex;
-				flex-shrink: 0;
-				align-items: center;
+			.type {
+				font-weight: 700;
+
+				&.receive {
+					color: #15803d;
+				}
+
+				&.refund {
+					color: #dc2626;
+				}
+
+				&.confirm-no-refund {
+					color: #2563eb;
+				}
+
+				&.revoke {
+					color: #7c3aed;
+				}
 			}
 		}
 
@@ -647,5 +664,23 @@ onUnmounted(() => navBarStore.clearRight());
 	.fallback {
 		background: #115e59;
 	}
+
+	.operation-type {
+		&.receive {
+			color: #86efac;
+		}
+
+		&.refund {
+			color: #fca5a5;
+		}
+
+		&.confirm-no-refund {
+			color: #93c5fd;
+		}
+
+		&.revoke {
+			color: #c4b5fd;
+		}
+	}
 }
 </style>