update customer chart

src/pages/customer/CustomerDataCharts.vue

@@ -2,10 +2,10 @@
 	<div v-can="permissionCodes.stat.read" class="customer-data-charts-page">
 		<div class="header bg-white">
 			<t-input
-				v-model.trim="customerCode"
+				v-model="customerCode"
 				class="customer-search"
+				type="search"
 				borderless
-				clearable
 				placeholder="输入客户编码或姓名"
 				@clear="applyCustomerSearch"
 				@enter="applyCustomerSearch"
@@ -23,44 +23,50 @@
 		</div>
 		<customer-profile-card v-entrance-transition class="customer" :customer="selectedCustomer" />
 		<div class="charts">
+			<t-segmented
+				v-if="selectedCustomer"
+				v-model="chartMode"
+				class="chart-mode"
+				block
+				:options="chartModeOptions"
+				v-entrance-transition="20"
+			/>
 			<customer-order-charts
 				v-entrance-transition="35"
-				v-if="selectedCustomer"
+				v-if="selectedCustomer && chartMode === 'order'"
 				:customer-id="selectedCustomer.id || ''"
 				:date-text-list="chartDateTextList"
 				:store-id="selectedCustomer.storeId"
 			/>
-			<customer-chart-summary
-				v-entrance-transition="70"
-				v-if="selectedCustomer"
-				:customer="selectedCustomer"
-				:month-cursor="monthCursor"
-				:selected-event-id-list="selectedEventIdList"
-			/>
-			<customer-event-record-calendar-section
-				v-entrance-transition="140"
-				v-if="selectedCustomer"
-				v-model="monthCursor"
-				v-model:selected-event-id-list="selectedEventIdList"
-				:customer-id="selectedCustomer.id || ''"
-				:customer-name="selectedCustomer.name"
-				:store-id="selectedCustomer.storeId"
-				@list="toEventRecordList"
-			/>
-			<customer-record-trend-chart
-				v-entrance-transition="210"
-				v-if="selectedCustomer"
-				:customer-id="selectedCustomer.id || ''"
-				:date-text-list="chartDateTextList"
-				:selected-event-id-list="selectedEventIdList"
-			/>
-			<customer-event-structure-chart
-				v-entrance-transition="280"
-				v-if="selectedCustomer"
-				:customer-id="selectedCustomer.id || ''"
-				:date-text-list="monthDateTextList"
-				:selected-event-id-list="selectedEventIdList"
-			/>
+			<template v-else-if="selectedCustomer">
+				<customer-chart-summary
+					v-entrance-transition="70"
+					:customer="selectedCustomer"
+					:month-cursor="monthCursor"
+					:selected-event-id-list="selectedEventIdList"
+				/>
+				<customer-event-record-calendar-section
+					v-entrance-transition="140"
+					v-model="monthCursor"
+					v-model:selected-event-id-list="selectedEventIdList"
+					:customer-id="selectedCustomer.id || ''"
+					:customer-name="selectedCustomer.name"
+					:store-id="selectedCustomer.storeId"
+					@list="toEventRecordList"
+				/>
+				<customer-record-trend-chart
+					v-entrance-transition="210"
+					:customer-id="selectedCustomer.id || ''"
+					:date-text-list="chartDateTextList"
+					:selected-event-id-list="selectedEventIdList"
+				/>
+				<customer-event-structure-chart
+					v-entrance-transition="280"
+					:customer-id="selectedCustomer.id || ''"
+					:date-text-list="monthDateTextList"
+					:selected-event-id-list="selectedEventIdList"
+				/>
+			</template>
 			<customer-selector
 				v-entrance-transition="350"
 				v-model="selectedCustomerId"
@@ -123,6 +129,16 @@ const selectorVisible = ref(false);
 const selectedCustomer = ref<Customer>();
 const selectedEventIdList = ref<string[]>([]);
 
+// ---------- 图表切换 ----------
+
+type ChartMode = "order" | "customer";
+
+const chartMode = ref<ChartMode>("customer");
+const chartModeOptions = [
+	{ value: "customer" as ChartMode, label: "客户分析" },
+	{ value: "order" as ChartMode, label: "订单分析" }
+];
+
 async function loadCustomer(code: string): Promise<void> {
 	const keyword = code.trim();
 	if (!keyword) {
@@ -284,6 +300,10 @@ function getDateEnd(date: Date): Date {
 		padding: 0 1rem;
 		display: flex;
 		flex-direction: column;
+
+		.chart-mode {
+			width: 100%;
+		}
 	}
 }