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%;
+		}
 	}
 }
 

src/pages/customer/component/CustomerConsumptionDailyChart.vue

@@ -1,18 +1,17 @@
 <template>
-	<gao-chart-card
+	<date-range-chart-card
 		title="有效消费趋势"
 		caption="金额已换算为元"
 		:date-text-list="dateTextList"
 		:option="buildOption"
 		:loading="loading"
-		:has-data="list.length > 0"
-		height="18rem"
+		height="14rem"
 	/>
 </template>
 
 <script setup lang="ts">
 import type { EChartsOption } from "echarts";
-import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoSalesOrderConsumptionDailyStatView } from "@/types/GaoChart";
 import { buildAxisChartOption, formatChartYuan, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
 

src/pages/customer/component/CustomerOrderCalendarChart.vue

@@ -1,18 +1,17 @@
 <template>
-	<gao-chart-card
+	<date-range-chart-card
 		title="订单日历"
 		caption="按下单日期统计"
 		:date-text-list="dateTextList"
 		:option="buildOption"
 		:loading="loading"
-		:has-data="list.length > 0"
-		height="18rem"
+		height="14rem"
 	/>
 </template>
 
 <script setup lang="ts">
 import type { EChartsOption } from "echarts";
-import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoSalesOrderCalendarStatView } from "@/types/GaoChart";
 import { buildAxisChartOption, formatChartYuan, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
 

src/pages/customer/component/CustomerOrderCharts.vue

@@ -1,12 +1,5 @@
 <template>
 	<section class="order-charts">
-		<div class="section-heading">
-			<div>
-				<div class="eyebrow" v-text="'订单经营分析'" />
-				<h2 v-text="'客户订单看板'" />
-			</div>
-			<span v-text="'金额单位：元，数量单位：基础单位'" />
-		</div>
 		<order-daily-chart
 			:date-text-list="dateTextList"
 			:list="dailyList"

src/pages/customer/component/CustomerOrderProductRankChart.vue

@@ -1,17 +1,16 @@
 <template>
-	<gao-chart-card
-		title="客户产品购买排行"
+	<date-range-chart-card
+		title="产品购买排行"
 		caption="基础单位购买及履约进度，前 10"
 		:option="chartOption"
 		:loading="loading"
-		:has-data="list.length > 0"
-		height="20rem"
+		height="14rem"
 	/>
 </template>
 
 <script setup lang="ts">
 import type { EChartsOption } from "echarts";
-import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoCustomerOrderProductRankView } from "@/types/GaoChart";
 import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
 

src/pages/customer/component/CustomerOrderSkuRankChart.vue

@@ -1,17 +1,16 @@
 <template>
-	<gao-chart-card
-		title="客户 SKU 购买排行"
+	<date-range-chart-card
+		title="SKU 购买排行"
 		caption="基础单位购买及履约进度，前 10"
 		:option="chartOption"
 		:loading="loading"
-		:has-data="list.length > 0"
-		height="20rem"
+		height="14rem"
 	/>
 </template>
 
 <script setup lang="ts">
 import type { EChartsOption } from "echarts";
-import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoCustomerOrderSkuRankView } from "@/types/GaoChart";
 import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
 

src/pages/customer/component/CustomerRepeatDailyChart.vue

@@ -1,18 +1,17 @@
 <template>
-	<gao-chart-card
+	<date-range-chart-card
 		title="复购趋势"
 		caption="缺失日期按 0 展示"
 		:date-text-list="dateTextList"
 		:option="buildOption"
 		:loading="loading"
-		:has-data="list.length > 0"
-		height="18rem"
+		height="14rem"
 	/>
 </template>
 
 <script setup lang="ts">
 import type { EChartsOption } from "echarts";
-import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoCustomerRepeatDailyStatView } from "@/types/GaoChart";
 import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
 

src/pages/customer/component/CustomerRepeatIntervalChart.vue

@@ -1,17 +1,16 @@
 <template>
-	<gao-chart-card
+	<date-range-chart-card
 		title="复购间隔"
 		caption="按间隔天数统计订单数"
 		:option="chartOption"
 		:loading="loading"
-		:has-data="list.length > 0"
-		height="18rem"
+		height="14rem"
 	/>
 </template>
 
 <script setup lang="ts">
 import type { EChartsOption } from "echarts";
-import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoCustomerRepeatIntervalStatView } from "@/types/GaoChart";
 import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";