diff --git a/src/api/GaoProductChartAPI.ts b/src/api/GaoProductChartAPI.ts
new file mode 100644
index 0000000..a0dc866
--- /dev/null
+++ b/src/api/GaoProductChartAPI.ts
@@ -0,0 +1,74 @@
+import { axios } from "timi-web-api";
+import type {
+	GaoProductCategoryStatView,
+	GaoProductChartReq,
+	GaoProductFulfillmentDailyStatView,
+	GaoProductFulfillmentRankView,
+	GaoProductSalesDailyStatView,
+	GaoProductSalesRankView,
+	GaoProductStockHealthView,
+	GaoProductStockMovementDailyStatView,
+	GaoProductTypeStatView,
+	GaoProductSkuUnitSalesRankView
+} from "@/types/GaoChart";
+import { getStoreChartCache } from "@/utils/storeChartCache";
+import { withCurrentStoreId } from "@/utils/store";
+
+const BASE_URI = "/gao/product/chart";
+
+async function salesDaily(req: GaoProductChartReq): Promise<GaoProductSalesDailyStatView[]> {
+	return await requestList("sales-daily", "/sales/daily", req);
+}
+
+async function salesRank(req: GaoProductChartReq): Promise<GaoProductSalesRankView[]> {
+	return await requestList("sales-rank", "/sales/rank", req);
+}
+
+async function unitSalesRank(req: GaoProductChartReq): Promise<GaoProductSkuUnitSalesRankView[]> {
+	const list = await requestList<GaoProductSkuUnitSalesRankView & Record<string, unknown>>("sales-unit-rank", "/sales/unit/rank", req);
+	return list.map(item => ({
+		...item,
+		skuUnitId: item.skuUnitId || (typeof item["productUnitId"] === "string" ? item["productUnitId"] : undefined)
+	}));
+}
+
+async function fulfillmentDaily(req: GaoProductChartReq): Promise<GaoProductFulfillmentDailyStatView[]> {
+	return await requestList("fulfillment-daily", "/fulfillment/daily", req);
+}
+
+async function fulfillmentRank(req: GaoProductChartReq): Promise<GaoProductFulfillmentRankView[]> {
+	return await requestList("fulfillment-rank", "/fulfillment/rank", req);
+}
+
+async function stockMovementDaily(req: GaoProductChartReq): Promise<GaoProductStockMovementDailyStatView[]> {
+	return await requestList("stock-movement-daily", "/stock/movement/daily", req);
+}
+
+async function stockHealth(req: GaoProductChartReq): Promise<GaoProductStockHealthView[]> {
+	return await requestList("stock-health", "/stock/health", req);
+}
+
+async function type(req: GaoProductChartReq): Promise<GaoProductTypeStatView[]> {
+	return await requestList("structure-type", "/structure/type", req);
+}
+
+async function category(req: GaoProductChartReq): Promise<GaoProductCategoryStatView[]> {
+	return await requestList("structure-category", "/structure/category", req);
+}
+
+async function requestList<T>(name: string, path: string, req: GaoProductChartReq): Promise<T[]> {
+	const request = withCurrentStoreId(req);
+	return await getStoreChartCache(`gao-product:${name}:${JSON.stringify(request)}`, async () => await axios.post(`${BASE_URI}${path}`, request));
+}
+
+export default {
+	salesDaily,
+	salesRank,
+	unitSalesRank,
+	fulfillmentDaily,
+	fulfillmentRank,
+	stockMovementDaily,
+	stockHealth,
+	type,
+	category
+};
diff --git a/src/api/GaoSalesOrderChartAPI.ts b/src/api/GaoSalesOrderChartAPI.ts
new file mode 100644
index 0000000..24100ab
--- /dev/null
+++ b/src/api/GaoSalesOrderChartAPI.ts
@@ -0,0 +1,83 @@
+import { axios } from "timi-web-api";
+import type {
+	GaoCustomerOrderProductRankView,
+	GaoCustomerOrderRankView,
+	GaoCustomerRepeatDailyStatView,
+	GaoCustomerRepeatIntervalStatView,
+	GaoSalesOrderCalendarStatView,
+	GaoSalesOrderChartReq,
+	GaoSalesOrderConsumptionDailyStatView,
+	GaoSalesOrderDailyStatView,
+	GaoSalesOrderPaymentStatView,
+	GaoSalesOrderReceivableStatView,
+	GaoSalesOrderStatusStatView,
+	GaoSalesOrderTypeStatView
+} from "@/types/GaoChart";
+import { getStoreChartCache } from "@/utils/storeChartCache";
+import { withCurrentStoreId } from "@/utils/store";
+
+const BASE_URI = "/gao/sales/order/chart";
+
+async function daily(req: GaoSalesOrderChartReq): Promise<GaoSalesOrderDailyStatView[]> {
+	return await requestList("daily", "/daily", req);
+}
+
+async function type(req: GaoSalesOrderChartReq): Promise<GaoSalesOrderTypeStatView[]> {
+	return await requestList("type", "/type", req);
+}
+
+async function payment(req: GaoSalesOrderChartReq): Promise<GaoSalesOrderPaymentStatView[]> {
+	return await requestList("payment", "/payment", req);
+}
+
+async function status(req: GaoSalesOrderChartReq): Promise<GaoSalesOrderStatusStatView[]> {
+	return await requestList("status", "/status", req);
+}
+
+async function receivable(req: GaoSalesOrderChartReq): Promise<GaoSalesOrderReceivableStatView> {
+	const request = withCurrentStoreId(req);
+	return await getStoreChartCache(`gao-order:receivable:${JSON.stringify(request)}`, async () => await axios.post(`${BASE_URI}/receivable`, request));
+}
+
+async function customerRank(req: GaoSalesOrderChartReq): Promise<GaoCustomerOrderRankView[]> {
+	return await requestList("customer-rank", "/customer/rank", req);
+}
+
+async function customerProductRank(req: GaoSalesOrderChartReq): Promise<GaoCustomerOrderProductRankView[]> {
+	return await requestList("customer-product-rank", "/customer/product/rank", req);
+}
+
+async function consumptionDaily(req: GaoSalesOrderChartReq): Promise<GaoSalesOrderConsumptionDailyStatView[]> {
+	return await requestList("customer-consumption-daily", "/customer/consumption/daily", req);
+}
+
+async function calendar(req: GaoSalesOrderChartReq): Promise<GaoSalesOrderCalendarStatView[]> {
+	return await requestList("customer-calendar", "/customer/calendar", req);
+}
+
+async function repeatDaily(req: GaoSalesOrderChartReq): Promise<GaoCustomerRepeatDailyStatView[]> {
+	return await requestList("customer-repeat-daily", "/customer/repeat/daily", req);
+}
+
+async function repeatInterval(req: GaoSalesOrderChartReq): Promise<GaoCustomerRepeatIntervalStatView[]> {
+	return await requestList("customer-repeat-interval", "/customer/repeat/interval", req);
+}
+
+async function requestList<T>(name: string, path: string, req: GaoSalesOrderChartReq): Promise<T[]> {
+	const request = withCurrentStoreId(req);
+	return await getStoreChartCache(`gao-order:${name}:${JSON.stringify(request)}`, async () => await axios.post(`${BASE_URI}${path}`, request));
+}
+
+export default {
+	daily,
+	type,
+	payment,
+	status,
+	receivable,
+	customerRank,
+	customerProductRank,
+	consumptionDaily,
+	calendar,
+	repeatDaily,
+	repeatInterval
+};
diff --git a/src/pages/product/OrderDataCharts.vue b/src/pages/product/OrderDataCharts.vue
new file mode 100644
index 0000000..9b987dd
--- /dev/null
+++ b/src/pages/product/OrderDataCharts.vue
@@ -0,0 +1,337 @@
+<template>
+	<div v-can="permissionCodes.stat.read" class="gao-chart-page order-data-charts">
+		<section class="hero">
+			<div class="eyebrow" v-text="'订单经营分析'" />
+			<h1 v-text="'客户经营看板'" />
+			<p v-text="`${currentStoreStore.currentStoreName} · 订单、收款与客户贡献 · 近 1 个月`" />
+		</section>
+		<div v-if="!storeId" class="no-store">
+			<t-empty description="暂无可统计的门店" />
+		</div>
+		<template v-else>
+			<section class="summary">
+				<div v-for="item in summaryList" :key="item.label" class="summary-item">
+					<span v-text="item.label" />
+					<strong v-text="item.value" />
+				</div>
+			</section>
+			<div class="chart-list">
+				<order-daily-chart
+					v-entrance-transition
+					:date-text-list="dateTextList"
+					:list="dailyList"
+					:loading="isLoading"
+				/>
+				<div class="two-columns">
+					<order-type-chart
+						v-entrance-transition="70"
+						:list="typeList"
+						:loading="isLoading"
+					/>
+					<order-payment-chart
+						v-entrance-transition="140"
+						:list="paymentList"
+						:loading="isLoading"
+					/>
+				</div>
+				<div class="two-columns">
+					<order-status-chart
+						v-entrance-transition="210"
+						:list="statusList"
+						:loading="isLoading"
+					/>
+					<customer-order-rank-chart
+						v-entrance-transition="280"
+						:list="customerRankList"
+						:loading="isLoading"
+					/>
+				</div>
+				<order-receivable-card
+					v-entrance-transition="350"
+					:receivable="receivable"
+				/>
+			</div>
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import GaoSalesOrderChartAPI from "@/api/GaoSalesOrderChartAPI";
+import CustomerOrderRankChart from "@/pages/product/component/CustomerOrderRankChart.vue";
+import OrderDailyChart from "@/pages/product/component/OrderDailyChart.vue";
+import OrderPaymentChart from "@/pages/product/component/OrderPaymentChart.vue";
+import OrderReceivableCard from "@/pages/product/component/OrderReceivableCard.vue";
+import OrderStatusChart from "@/pages/product/component/OrderStatusChart.vue";
+import OrderTypeChart from "@/pages/product/component/OrderTypeChart.vue";
+import type {
+	GaoCustomerOrderRankView,
+	GaoSalesOrderDailyStatView,
+	GaoSalesOrderPaymentStatView,
+	GaoSalesOrderReceivableStatView,
+	GaoSalesOrderStatusStatView,
+	GaoSalesOrderTypeStatView
+} from "@/types/GaoChart";
+import { useCurrentStoreStore } from "@/store/currentStoreStore";
+import { useNavBarStore } from "@/store/navBarStore";
+import { getCurrentStoreId } from "@/utils/store";
+import { clearStoreChartCache } from "@/utils/storeChartCache";
+import { getErrorMessage } from "@/utils/error";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+import { buildDateTextList, formatMoney, formatQuantity, toUnixRange } from "@/pages/product/component/chartUtils";
+
+interface SummaryItem {
+	label: string;
+	value: string;
+}
+
+defineOptions({
+	name: "OrderDataCharts"
+});
+
+const currentStoreStore = useCurrentStoreStore();
+const navBarStore = useNavBarStore();
+const dateRange = buildDefaultDateRange();
+const dateTextList = buildDateTextList(dateRange[0], dateRange[1]);
+const dailyList = ref<GaoSalesOrderDailyStatView[]>([]);
+const typeList = ref<GaoSalesOrderTypeStatView[]>([]);
+const paymentList = ref<GaoSalesOrderPaymentStatView[]>([]);
+const statusList = ref<GaoSalesOrderStatusStatView[]>([]);
+const customerRankList = ref<GaoCustomerOrderRankView[]>([]);
+const receivable = ref<GaoSalesOrderReceivableStatView>({});
+const isLoading = ref(false);
+let requestId = 0;
+
+const storeId = computed(() => currentStoreStore.currentStoreId || getCurrentStoreId());
+const summaryList = computed<SummaryItem[]>(() => [
+	{
+		label: "订单数",
+		value: `${formatQuantity(receivable.value.orderCount)} 单`
+	},
+	{
+		label: "成交金额",
+		value: formatMoney(receivable.value.saleAmount)
+	},
+	{
+		label: "有效收款",
+		value: formatMoney(receivable.value.paidAmount)
+	},
+	{
+		label: "未收金额",
+		value: formatMoney(receivable.value.unpaidAmount)
+	},
+	{
+		label: "净收款",
+		value: formatMoney(receivable.value.netPaidAmount)
+	}
+]);
+
+watch(storeId, async () => {
+	await loadCharts();
+}, { immediate: true });
+
+onMounted(async () => {
+	navBarStore.setRightIcon("refresh", reload);
+	if (!currentStoreStore.currentStoreId) {
+		await currentStoreStore.loadLoginStore();
+	}
+});
+
+onUnmounted(() => {
+	navBarStore.clearRight();
+});
+
+async function reload(): Promise<void> {
+	clearStoreChartCache();
+	await loadCharts();
+}
+
+async function loadCharts(): Promise<void> {
+	if (!storeId.value) {
+		clearData();
+		return;
+	}
+
+	const currentRequestId = ++requestId;
+	isLoading.value = true;
+	try {
+		const range = toUnixRange(dateRange);
+		const request = { storeId: storeId.value, ...range, topN: 10 };
+		const [daily, type, payment, status, receivableData, customerRank] = await Promise.all([
+			GaoSalesOrderChartAPI.daily(request),
+			GaoSalesOrderChartAPI.type(request),
+			GaoSalesOrderChartAPI.payment(request),
+			GaoSalesOrderChartAPI.status(request),
+			GaoSalesOrderChartAPI.receivable(request),
+			GaoSalesOrderChartAPI.customerRank(request)
+		]);
+		if (currentRequestId !== requestId) {
+			return;
+		}
+		dailyList.value = daily || [];
+		typeList.value = type || [];
+		paymentList.value = payment || [];
+		statusList.value = status || [];
+		receivable.value = receivableData || {};
+		customerRankList.value = customerRank || [];
+	} catch (error) {
+		if (currentRequestId === requestId) {
+			Message.error(getErrorMessage(error, "订单图表加载失败"));
+		}
+	} finally {
+		if (currentRequestId === requestId) {
+			isLoading.value = false;
+		}
+	}
+}
+
+function clearData(): void {
+	isLoading.value = false;
+	dailyList.value = [];
+	typeList.value = [];
+	paymentList.value = [];
+	statusList.value = [];
+	receivable.value = {};
+	customerRankList.value = [];
+}
+
+function buildDefaultDateRange(): [string, string] {
+	const end = getDateEnd(new Date());
+	const today = getDateStart(end);
+	const beginMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0, 0, 0, 0);
+	const lastDayOfBeginMonth = new Date(beginMonth.getFullYear(), beginMonth.getMonth() + 1, 0).getDate();
+	const begin = new Date(beginMonth);
+	begin.setDate(Math.min(today.getDate(), lastDayOfBeginMonth));
+	return [formatDateTime(begin), formatDateTime(end)];
+}
+
+function getDateStart(date: Date): Date {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
+}
+
+function getDateEnd(date: Date): Date {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
+}
+
+function formatDateTime(date: Date): string {
+	return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+
+function pad(value: number): string {
+	return String(value).padStart(2, "0");
+}
+</script>
+
+<style scoped lang="less">
+.gao-chart-page {
+	gap: 1rem;
+	padding: calc(var(--app-nav-height) + 1rem) 1rem 1rem;
+	display: flex;
+	flex-direction: column;
+
+	.hero {
+		padding: .25rem .25rem 0;
+
+		.eyebrow {
+			color: var(--td-brand-color);
+			font-size: .6875rem;
+			font-weight: 700;
+			letter-spacing: .12em;
+		}
+
+		h1 {
+			color: #0f172a;
+			margin: .25rem 0 0;
+			font-size: 1.5rem;
+			line-height: 1.3;
+		}
+
+		p {
+			color: #7b889d;
+			margin: .375rem 0 0;
+			font-size: .8125rem;
+		}
+	}
+
+	.summary {
+		gap: .625rem;
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	.summary-item {
+		padding: .75rem .625rem;
+		background: rgba(255, 255, 255, .92);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1rem;
+
+		span {
+			color: #52607a;
+			display: block;
+			font-size: .75rem;
+		}
+
+		strong {
+			color: #0f172a;
+			margin-top: .25rem;
+			display: block;
+			font-size: 1rem;
+			font-weight: 700;
+		}
+	}
+
+	.chart-list {
+		gap: 1rem;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.two-columns {
+		gap: 1rem;
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	.no-store {
+		padding: 1.5rem 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}
+
+:global(html.theme-dark) {
+	.gao-chart-page {
+		.hero {
+			h1 {
+				color: #e2e8f0;
+			}
+
+			p {
+				color: #94a3b8;
+			}
+		}
+
+		.summary-item {
+			background: rgba(15, 23, 42, .88);
+			box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
+
+			span {
+				color: #94a3b8;
+			}
+
+			strong {
+				color: #e2e8f0;
+			}
+		}
+	}
+}
+
+@media (max-width: 42rem) {
+	.gao-chart-page {
+		.two-columns {
+			grid-template-columns: 1fr;
+		}
+	}
+}
+</style>
diff --git a/src/pages/product/ProductDataCharts.vue b/src/pages/product/ProductDataCharts.vue
new file mode 100644
index 0000000..36980fa
--- /dev/null
+++ b/src/pages/product/ProductDataCharts.vue
@@ -0,0 +1,339 @@
+<template>
+	<div v-can="permissionCodes.stat.read" class="gao-chart-page product-data-charts">
+		<section class="hero">
+			<div class="eyebrow" v-text="'产品经营分析'" />
+			<h1 v-text="'产品经营看板'" />
+			<p v-text="`${currentStoreStore.currentStoreName} · 销售、履约与库存 · 近 1 个月`" />
+		</section>
+		<div v-if="!storeId" class="no-store">
+			<t-empty description="暂无可统计的门店" />
+		</div>
+		<template v-else>
+			<section class="summary">
+				<div v-for="item in summaryList" :key="item.label" class="summary-item">
+					<span v-text="item.label" />
+					<strong v-text="item.value" />
+				</div>
+			</section>
+			<div class="chart-list">
+				<product-sales-trend-chart
+					v-entrance-transition
+					:date-text-list="dateTextList"
+					:list="salesDailyList"
+					:loading="isLoading"
+				/>
+				<div class="two-columns">
+					<product-sales-rank-chart
+						v-entrance-transition="70"
+						:list="salesRankList"
+						:loading="isLoading"
+					/>
+					<product-fulfillment-rank-chart
+						v-entrance-transition="140"
+						:list="fulfillmentRankList"
+						:loading="isLoading"
+					/>
+				</div>
+				<product-fulfillment-trend-chart
+					v-entrance-transition="210"
+					:date-text-list="dateTextList"
+					:list="fulfillmentDailyList"
+					:loading="isLoading"
+				/>
+				<product-stock-movement-chart
+					v-entrance-transition="280"
+					:date-text-list="dateTextList"
+					:list="stockMovementList"
+					:loading="isLoading"
+				/>
+				<product-stock-health-table
+					v-entrance-transition="350"
+					:list="stockHealthList"
+					:loading="isLoading"
+				/>
+			</div>
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import GaoProductChartAPI from "@/api/GaoProductChartAPI";
+import ProductFulfillmentRankChart from "@/pages/product/component/ProductFulfillmentRankChart.vue";
+import ProductFulfillmentTrendChart from "@/pages/product/component/ProductFulfillmentTrendChart.vue";
+import ProductSalesRankChart from "@/pages/product/component/ProductSalesRankChart.vue";
+import ProductSalesTrendChart from "@/pages/product/component/ProductSalesTrendChart.vue";
+import ProductStockHealthTable from "@/pages/product/component/ProductStockHealthTable.vue";
+import ProductStockMovementChart from "@/pages/product/component/ProductStockMovementChart.vue";
+import type {
+	GaoProductFulfillmentDailyStatView,
+	GaoProductFulfillmentRankView,
+	GaoProductSalesDailyStatView,
+	GaoProductSalesRankView,
+	GaoProductStockHealthView,
+	GaoProductStockMovementDailyStatView
+} from "@/types/GaoChart";
+import { useCurrentStoreStore } from "@/store/currentStoreStore";
+import { useNavBarStore } from "@/store/navBarStore";
+import { getCurrentStoreId } from "@/utils/store";
+import { clearStoreChartCache } from "@/utils/storeChartCache";
+import { getErrorMessage } from "@/utils/error";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+import { buildDateTextList, formatMoney, formatQuantity, sumNumber, toUnixRange } from "@/pages/product/component/chartUtils";
+
+interface SummaryItem {
+	label: string;
+	value: string;
+}
+
+defineOptions({
+	name: "ProductDataCharts"
+});
+
+const currentStoreStore = useCurrentStoreStore();
+const navBarStore = useNavBarStore();
+const dateRange = buildDefaultDateRange();
+const dateTextList = buildDateTextList(dateRange[0], dateRange[1]);
+const salesDailyList = ref<GaoProductSalesDailyStatView[]>([]);
+const salesRankList = ref<GaoProductSalesRankView[]>([]);
+const fulfillmentDailyList = ref<GaoProductFulfillmentDailyStatView[]>([]);
+const fulfillmentRankList = ref<GaoProductFulfillmentRankView[]>([]);
+const stockMovementList = ref<GaoProductStockMovementDailyStatView[]>([]);
+const stockHealthList = ref<GaoProductStockHealthView[]>([]);
+const isLoading = ref(false);
+let requestId = 0;
+
+const storeId = computed(() => currentStoreStore.currentStoreId || getCurrentStoreId());
+const summaryList = computed<SummaryItem[]>(() => [
+	{
+		label: "订单数",
+		value: `${formatQuantity(sumNumber(salesDailyList.value, item => item.orderCount))} 单`
+	},
+	{
+		label: "直接销量",
+		value: formatQuantity(sumNumber(salesDailyList.value, item => item.directQuantity))
+	},
+	{
+		label: "套餐权益",
+		value: formatQuantity(sumNumber(salesDailyList.value, item => item.packageQuantity))
+	},
+	{
+		label: "直接销售额",
+		value: formatMoney(sumNumber(salesDailyList.value, item => item.directSaleAmount))
+	},
+	{
+		label: "低库存产品",
+		value: `${stockHealthList.value.filter(item => item.lowStock === 1).length} 个`
+	}
+]);
+
+watch(storeId, async () => {
+	await loadCharts();
+}, { immediate: true });
+
+onMounted(async () => {
+	navBarStore.setRightIcon("refresh", reload);
+	if (!currentStoreStore.currentStoreId) {
+		await currentStoreStore.loadLoginStore();
+	}
+});
+
+onUnmounted(() => {
+	navBarStore.clearRight();
+});
+
+async function reload(): Promise<void> {
+	clearStoreChartCache();
+	await loadCharts();
+}
+
+async function loadCharts(): Promise<void> {
+	if (!storeId.value) {
+		clearData();
+		return;
+	}
+
+	const currentRequestId = ++requestId;
+	isLoading.value = true;
+	try {
+		const range = toUnixRange(dateRange);
+		const rangeRequest = { storeId: storeId.value, ...range, topN: 10 };
+		const snapshotRequest = { storeId: storeId.value };
+		const [salesDaily, salesRank, fulfillmentDaily, fulfillmentRank, stockMovement, stockHealth] = await Promise.all([
+			GaoProductChartAPI.salesDaily(rangeRequest),
+			GaoProductChartAPI.salesRank(rangeRequest),
+			GaoProductChartAPI.fulfillmentDaily(rangeRequest),
+			GaoProductChartAPI.fulfillmentRank(rangeRequest),
+			GaoProductChartAPI.stockMovementDaily(rangeRequest),
+			GaoProductChartAPI.stockHealth(snapshotRequest)
+		]);
+		if (currentRequestId !== requestId) {
+			return;
+		}
+		salesDailyList.value = salesDaily || [];
+		salesRankList.value = salesRank || [];
+		fulfillmentDailyList.value = fulfillmentDaily || [];
+		fulfillmentRankList.value = fulfillmentRank || [];
+		stockMovementList.value = stockMovement || [];
+		stockHealthList.value = stockHealth || [];
+	} catch (error) {
+		if (currentRequestId === requestId) {
+			Message.error(getErrorMessage(error, "产品图表加载失败"));
+		}
+	} finally {
+		if (currentRequestId === requestId) {
+			isLoading.value = false;
+		}
+	}
+}
+
+function clearData(): void {
+	isLoading.value = false;
+	salesDailyList.value = [];
+	salesRankList.value = [];
+	fulfillmentDailyList.value = [];
+	fulfillmentRankList.value = [];
+	stockMovementList.value = [];
+	stockHealthList.value = [];
+}
+
+function buildDefaultDateRange(): [string, string] {
+	const end = getDateEnd(new Date());
+	const today = getDateStart(end);
+	const beginMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0, 0, 0, 0);
+	const lastDayOfBeginMonth = new Date(beginMonth.getFullYear(), beginMonth.getMonth() + 1, 0).getDate();
+	const begin = new Date(beginMonth);
+	begin.setDate(Math.min(today.getDate(), lastDayOfBeginMonth));
+	return [formatDateTime(begin), formatDateTime(end)];
+}
+
+function getDateStart(date: Date): Date {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
+}
+
+function getDateEnd(date: Date): Date {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
+}
+
+function formatDateTime(date: Date): string {
+	return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+
+function pad(value: number): string {
+	return String(value).padStart(2, "0");
+}
+</script>
+
+<style scoped lang="less">
+.gao-chart-page {
+	gap: 1rem;
+	padding: calc(var(--app-nav-height) + 1rem) 1rem 1rem;
+	display: flex;
+	flex-direction: column;
+
+	.hero {
+		padding: .25rem .25rem 0;
+
+		.eyebrow {
+			color: var(--td-brand-color);
+			font-size: .6875rem;
+			font-weight: 700;
+			letter-spacing: .12em;
+		}
+
+		h1 {
+			color: #0f172a;
+			margin: .25rem 0 0;
+			font-size: 1.5rem;
+			line-height: 1.3;
+		}
+
+		p {
+			color: #7b889d;
+			margin: .375rem 0 0;
+			font-size: .8125rem;
+		}
+	}
+
+	.summary {
+		gap: .625rem;
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	.summary-item {
+		padding: .75rem .625rem;
+		background: rgba(255, 255, 255, .92);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1rem;
+
+		span {
+			color: #52607a;
+			display: block;
+			font-size: .75rem;
+		}
+
+		strong {
+			color: #0f172a;
+			margin-top: .25rem;
+			display: block;
+			font-size: 1rem;
+			font-weight: 700;
+		}
+	}
+
+	.chart-list {
+		gap: 1rem;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.two-columns {
+		gap: 1rem;
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	.no-store {
+		padding: 1.5rem 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}
+
+:global(html.theme-dark) {
+	.gao-chart-page {
+		.hero {
+			h1 {
+				color: #e2e8f0;
+			}
+
+			p {
+				color: #94a3b8;
+			}
+		}
+
+		.summary-item {
+			background: rgba(15, 23, 42, .88);
+			box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
+
+			span {
+				color: #94a3b8;
+			}
+
+			strong {
+				color: #e2e8f0;
+			}
+		}
+	}
+}
+
+@media (max-width: 42rem) {
+	.gao-chart-page {
+		.two-columns {
+			grid-template-columns: 1fr;
+		}
+	}
+}
+</style>
diff --git a/src/pages/product/component/CustomerOrderRankChart.vue b/src/pages/product/component/CustomerOrderRankChart.vue
new file mode 100644
index 0000000..a9c6ab9
--- /dev/null
+++ b/src/pages/product/component/CustomerOrderRankChart.vue
@@ -0,0 +1,51 @@
+<template>
+	<gao-chart-card
+		title="客户净收款排行"
+		caption="排除已取消订单，前 10"
+		:option="chartOption"
+		:loading="loading"
+		:has-data="list.length > 0"
+		height="17rem"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { EChartsOption } from "echarts";
+import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import type { GaoCustomerOrderRankView } from "@/types/GaoChart";
+import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "CustomerOrderRankChart"
+});
+
+const props = defineProps<{
+	list: GaoCustomerOrderRankView[];
+	loading: boolean;
+}>();
+
+const chartOption = computed<EChartsOption>(() => {
+	const list = props.list.slice(0, 10);
+	return {
+		...buildHorizontalBarOption(list.map(getCustomerName)),
+		legend: { show: false },
+		xAxis: {
+			type: "value",
+			axisLabel: {
+				color: "#52607a",
+				formatter: (value: number) => `${value.toLocaleString("zh-CN")} 元`
+			},
+			splitLine: { lineStyle: { color: "rgba(148, 163, 184, .2)" } }
+		},
+		series: [{
+			name: "净收款",
+			type: "bar",
+			data: list.map(item => getNumber(item.netPaidAmount) / 100)
+		}]
+	};
+});
+
+function getCustomerName(item: GaoCustomerOrderRankView): string {
+	return item.customerName || item.customerCode || "未命名客户";
+}
+</script>
diff --git a/src/pages/product/component/GaoChartCard.vue b/src/pages/product/component/GaoChartCard.vue
new file mode 100644
index 0000000..d7f9b6e
--- /dev/null
+++ b/src/pages/product/component/GaoChartCard.vue
@@ -0,0 +1,113 @@
+<template>
+	<section class="chart-section">
+		<div class="title-row">
+			<h2 v-text="title" />
+			<span v-if="caption" class="caption" v-text="caption" />
+		</div>
+		<div ref="chartElement" class="chart" :style="{ height }" />
+		<div v-if="loading" class="state">
+			<t-loading size="1.5rem" text="加载中" />
+		</div>
+		<div v-else-if="!hasData" class="state">
+			<t-empty description="暂无数据" />
+		</div>
+		<chart-range-slider
+			v-if="chartShowSlider"
+			:model-value="sliderValue"
+			:max="maxSliderValue"
+			:min-range="5"
+			:label="rangeText"
+			@change="handleSliderChange"
+		/>
+	</section>
+</template>
+
+<script setup lang="ts">
+import type { EChartsOption } from "echarts";
+import ChartRangeSlider from "@/components/ChartRangeSlider.vue";
+import { useStoreChart, useStoreChartWindow } from "@/pages/store/component/useStoreChart";
+
+type ChartOptionBuilder = (visibleDateTextList: string[]) => EChartsOption;
+
+const props = withDefaults(defineProps<{
+	caption?: string;
+	dateTextList?: string[];
+	height?: string;
+	hasData?: boolean;
+	loading?: boolean;
+	option: EChartsOption | ChartOptionBuilder;
+	title: string;
+}>(), {
+	caption: "",
+	dateTextList: () => [],
+	height: "16rem",
+	hasData: true,
+	loading: false
+});
+
+const dateTextList = computed(() => props.dateTextList);
+const {
+	rangeText,
+	showSlider: chartShowSlider,
+	sliderValue,
+	maxSliderValue,
+	visibleDateTextList,
+	handleSliderChange
+} = useStoreChartWindow(dateTextList);
+const option = computed<EChartsOption>(() => typeof props.option === "function"
+	? props.option(visibleDateTextList.value)
+	: props.option);
+const { chartElement } = useStoreChart(option);
+</script>
+
+<style scoped lang="less">
+.chart-section {
+	padding: 1rem;
+	position: relative;
+	background: rgba(255, 255, 255, .92);
+	box-shadow: var(--td-shadow-1);
+	border-radius: 1.25rem;
+
+	.title-row {
+		gap: .5rem;
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+	}
+
+	h2 {
+		color: #0f172a;
+		margin: 0 0 .875rem 0;
+		font-size: 1rem;
+		font-weight: 700;
+	}
+
+	.caption {
+		color: #94a3b8;
+		font-size: .6875rem;
+	}
+
+	.chart {
+		width: 100%;
+	}
+
+	.state {
+		inset: 3.5rem 0 0 0;
+		display: flex;
+		position: absolute;
+		align-items: center;
+		justify-content: center;
+	}
+}
+
+:global(html.theme-dark) {
+	.chart-section {
+		background: rgba(15, 23, 42, .88);
+		box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
+
+		h2 {
+			color: #e2e8f0;
+		}
+	}
+}
+</style>
diff --git a/src/pages/product/component/OrderDailyChart.vue b/src/pages/product/component/OrderDailyChart.vue
new file mode 100644
index 0000000..79bb46e
--- /dev/null
+++ b/src/pages/product/component/OrderDailyChart.vue
@@ -0,0 +1,81 @@
+<template>
+	<gao-chart-card
+		title="订单每日趋势"
+		caption="金额已换算为元"
+		:date-text-list="dateTextList"
+		:option="buildOption"
+		:loading="loading"
+		:has-data="list.length > 0"
+		height="18rem"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { EChartsOption } from "echarts";
+import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import type { GaoSalesOrderDailyStatView } from "@/types/GaoChart";
+import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "OrderDailyChart"
+});
+
+const props = defineProps<{
+	dateTextList: string[];
+	list: GaoSalesOrderDailyStatView[];
+	loading: boolean;
+}>();
+
+function buildOption(visibleDateTextList: string[]): EChartsOption {
+	const labelList = visibleDateTextList.map(item => item.slice(5));
+	return {
+		...buildAxisChartOption(labelList),
+		xAxis: {
+			type: "category",
+			data: labelList,
+			axisTick: { show: false },
+			axisLabel: { color: "#52607a", interval: "auto", hideOverlap: true }
+		},
+		yAxis: [
+			{
+				type: "value",
+				name: "订单",
+				axisLabel: { color: "#52607a" },
+				splitLine: { lineStyle: { color: "rgba(148, 163, 184, .2)" } }
+			},
+			{
+				type: "value",
+				name: "元",
+				axisLabel: {
+					color: "#52607a",
+					formatter: (value: number) => value.toLocaleString("zh-CN")
+				},
+				splitLine: { show: false }
+			}
+		],
+		series: [
+			{
+				name: "订单数",
+				type: "bar",
+				yAxisIndex: 0,
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.orderCount))
+			},
+			{
+				name: "成交金额",
+				type: "line",
+				yAxisIndex: 1,
+				smooth: true,
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.saleAmount) / 100)
+			},
+			{
+				name: "净收款",
+				type: "line",
+				yAxisIndex: 1,
+				smooth: true,
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.netPaidAmount) / 100)
+			}
+		]
+	};
+}
+
+</script>
diff --git a/src/pages/product/component/OrderPaymentChart.vue b/src/pages/product/component/OrderPaymentChart.vue
new file mode 100644
index 0000000..67f8b74
--- /dev/null
+++ b/src/pages/product/component/OrderPaymentChart.vue
@@ -0,0 +1,43 @@
+<template>
+	<gao-chart-card
+		title="付款状态分布"
+		caption="当前订单快照"
+		:option="chartOption"
+		:loading="loading"
+		:has-data="list.length > 0"
+		height="17rem"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { EChartsOption } from "echarts";
+import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import type { GaoSalesOrderPaymentStatView } from "@/types/GaoChart";
+import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "OrderPaymentChart"
+});
+
+const props = defineProps<{
+	list: GaoSalesOrderPaymentStatView[];
+	loading: boolean;
+}>();
+
+const chartOption = computed<EChartsOption>(() => {
+	const list = props.list;
+	return {
+		...buildHorizontalBarOption(list.map(item => getPaymentStatusText(item.paymentStatus))),
+		legend: { show: false },
+		series: [{
+			name: "订单数",
+			type: "bar",
+			data: list.map(item => getNumber(item.orderCount))
+		}]
+	};
+});
+
+function getPaymentStatusText(value?: string): string {
+	return ({ UNPAID: "未付款", PARTIALLY_PAID: "部分付款", PAID: "已付款" } as Record<string, string>)[value || ""] || "未知状态";
+}
+</script>
diff --git a/src/pages/product/component/OrderReceivableCard.vue b/src/pages/product/component/OrderReceivableCard.vue
new file mode 100644
index 0000000..d73f200
--- /dev/null
+++ b/src/pages/product/component/OrderReceivableCard.vue
@@ -0,0 +1,123 @@
+<template>
+	<section class="receivable-section">
+		<div class="title-row">
+			<h2 v-text="'应收构成'" />
+			<span class="caption" v-text="'时间范围内创建订单的当前快照'" />
+		</div>
+		<div class="receivable-list">
+			<div v-for="item in detailList" :key="item.label" class="receivable-item">
+				<span v-text="item.label" />
+				<strong v-text="item.value" />
+			</div>
+		</div>
+	</section>
+</template>
+
+<script setup lang="ts">
+import type { GaoSalesOrderReceivableStatView } from "@/types/GaoChart";
+import { formatMoney } from "@/pages/product/component/chartUtils";
+
+type DetailItem = {
+	label: string;
+	value: string;
+};
+
+defineOptions({
+	name: "OrderReceivableCard"
+});
+
+const props = defineProps<{
+	receivable: GaoSalesOrderReceivableStatView;
+}>();
+
+const detailList = computed<DetailItem[]>(() => [
+	{ label: "有效收款", value: formatMoney(props.receivable.paidAmount) },
+	{ label: "待核销", value: formatMoney(props.receivable.pendingPaidAmount) },
+	{ label: "未收", value: formatMoney(props.receivable.unpaidAmount) },
+	{ label: "有效退款", value: formatMoney(props.receivable.refundedAmount) },
+	{ label: "净收款", value: formatMoney(props.receivable.netPaidAmount) }
+]);
+</script>
+
+<style scoped lang="less">
+.receivable-section {
+	padding: 1rem;
+	background: rgba(255, 255, 255, .92);
+	box-shadow: var(--td-shadow-1);
+	border-radius: 1.25rem;
+
+	.title-row {
+		gap: .5rem;
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+	}
+
+	h2 {
+		color: #0f172a;
+		margin: 0 0 .875rem;
+		font-size: 1rem;
+		font-weight: 700;
+	}
+
+	.caption {
+		color: #94a3b8;
+		font-size: .6875rem;
+	}
+
+	.receivable-list {
+		gap: .5rem;
+		display: grid;
+		grid-template-columns: repeat(5, minmax(0, 1fr));
+	}
+
+	.receivable-item {
+		padding: .625rem .5rem;
+		background: rgba(241, 245, 249, .8);
+		border-radius: .75rem;
+
+		span {
+			color: #64748b;
+			display: block;
+			font-size: .6875rem;
+		}
+
+		strong {
+			color: #0f172a;
+			margin-top: .25rem;
+			display: block;
+			font-size: .8125rem;
+			font-weight: 700;
+		}
+	}
+}
+
+:global(html.theme-dark) {
+	.receivable-section {
+		background: rgba(15, 23, 42, .88);
+		box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
+
+		h2 {
+			color: #e2e8f0;
+		}
+
+		.receivable-item {
+			background: rgba(30, 41, 59, .88);
+
+			span {
+				color: #94a3b8;
+			}
+
+			strong {
+				color: #e2e8f0;
+			}
+		}
+	}
+}
+
+@media (max-width: 42rem) {
+	.receivable-list {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+}
+</style>
diff --git a/src/pages/product/component/OrderStatusChart.vue b/src/pages/product/component/OrderStatusChart.vue
new file mode 100644
index 0000000..9829fbc
--- /dev/null
+++ b/src/pages/product/component/OrderStatusChart.vue
@@ -0,0 +1,43 @@
+<template>
+	<gao-chart-card
+		title="订单状态分布"
+		caption="当前订单快照"
+		:option="chartOption"
+		:loading="loading"
+		:has-data="list.length > 0"
+		height="17rem"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { EChartsOption } from "echarts";
+import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import type { GaoSalesOrderStatusStatView } from "@/types/GaoChart";
+import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "OrderStatusChart"
+});
+
+const props = defineProps<{
+	list: GaoSalesOrderStatusStatView[];
+	loading: boolean;
+}>();
+
+const chartOption = computed<EChartsOption>(() => {
+	const list = props.list;
+	return {
+		...buildHorizontalBarOption(list.map(item => getOrderStatusText(item.status))),
+		legend: { show: false },
+		series: [{
+			name: "订单数",
+			type: "bar",
+			data: list.map(item => getNumber(item.orderCount))
+		}]
+	};
+});
+
+function getOrderStatusText(value?: string): string {
+	return ({ ACTIVE: "进行中", FULFILLED: "已完成", CANCELLED: "已取消" } as Record<string, string>)[value || ""] || "未知状态";
+}
+</script>
diff --git a/src/pages/product/component/OrderTypeChart.vue b/src/pages/product/component/OrderTypeChart.vue
new file mode 100644
index 0000000..546d74e
--- /dev/null
+++ b/src/pages/product/component/OrderTypeChart.vue
@@ -0,0 +1,51 @@
+<template>
+	<gao-chart-card
+		title="订单类型分布"
+		caption="按订单数量"
+		:option="chartOption"
+		:loading="loading"
+		:has-data="list.length > 0"
+		height="17rem"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { EChartsOption } from "echarts";
+import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import type { GaoSalesOrderTypeStatView } from "@/types/GaoChart";
+import { buildPieChartOption, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "OrderTypeChart"
+});
+
+const props = defineProps<{
+	list: GaoSalesOrderTypeStatView[];
+	loading: boolean;
+}>();
+
+const chartOption = computed<EChartsOption>(() => ({
+	...buildPieChartOption(),
+	legend: {
+		bottom: 0,
+		icon: "circle",
+		textStyle: { color: "#52607a" }
+	},
+	series: [
+		{
+			type: "pie",
+			radius: ["0%", "58%"],
+			center: ["50%", "44%"],
+			label: { color: "#52607a", formatter: "{b} {c} 单" },
+			data: props.list.map(item => ({
+				name: getOrderTypeText(item.orderType),
+				value: getNumber(item.orderCount)
+			}))
+		}
+	]
+}));
+
+function getOrderTypeText(value?: string): string {
+	return ({ PACKAGE: "套餐订单", DIRECT_PRODUCT: "直接产品" } as Record<string, string>)[value || ""] || "未知类型";
+}
+</script>
diff --git a/src/pages/product/component/ProductFulfillmentRankChart.vue b/src/pages/product/component/ProductFulfillmentRankChart.vue
new file mode 100644
index 0000000..b0ed39b
--- /dev/null
+++ b/src/pages/product/component/ProductFulfillmentRankChart.vue
@@ -0,0 +1,57 @@
+<template>
+	<gao-chart-card
+		title="履约进度排行"
+		caption="购买数量的当前履约快照"
+		:option="chartOption"
+		:loading="loading"
+		:has-data="list.length > 0"
+		height="20rem"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { EChartsOption } from "echarts";
+import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import type { GaoProductFulfillmentRankView } from "@/types/GaoChart";
+import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "ProductFulfillmentRankChart"
+});
+
+const props = defineProps<{
+	list: GaoProductFulfillmentRankView[];
+	loading: boolean;
+}>();
+
+const chartOption = computed<EChartsOption>(() => {
+	const list = props.list.slice(0, 10);
+	return {
+		...buildHorizontalBarOption(list.map(getProductName)),
+		series: [
+			{
+				name: "待履约",
+				type: "bar",
+				stack: "progress",
+				data: list.map(item => getNumber(item.reservedQuantity))
+			},
+			{
+				name: "已履约",
+				type: "bar",
+				stack: "progress",
+				data: list.map(item => getNumber(item.fulfilledQuantity))
+			},
+			{
+				name: "可履约",
+				type: "bar",
+				stack: "progress",
+				data: list.map(item => getNumber(item.availableQuantity))
+			}
+		]
+	};
+});
+
+function getProductName(item: GaoProductFulfillmentRankView): string {
+	return item.productName || "未命名产品";
+}
+</script>
diff --git a/src/pages/product/component/ProductFulfillmentTrendChart.vue b/src/pages/product/component/ProductFulfillmentTrendChart.vue
new file mode 100644
index 0000000..f50dd60
--- /dev/null
+++ b/src/pages/product/component/ProductFulfillmentTrendChart.vue
@@ -0,0 +1,62 @@
+<template>
+	<gao-chart-card
+		title="每日履约趋势"
+		caption="冲正数量允许为负值"
+		:date-text-list="dateTextList"
+		:option="buildOption"
+		:loading="loading"
+		:has-data="list.length > 0"
+		height="17rem"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { EChartsOption } from "echarts";
+import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import type { GaoProductFulfillmentDailyStatView } from "@/types/GaoChart";
+import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "ProductFulfillmentTrendChart"
+});
+
+const props = defineProps<{
+	dateTextList: string[];
+	list: GaoProductFulfillmentDailyStatView[];
+	loading: boolean;
+}>();
+
+function buildOption(visibleDateTextList: string[]): EChartsOption {
+	const labelList = visibleDateTextList.map(item => item.slice(5));
+	return {
+		...buildAxisChartOption(labelList),
+		xAxis: {
+			type: "category",
+			data: labelList,
+			axisTick: { show: false },
+			axisLabel: { color: "#52607a", interval: "auto", hideOverlap: true }
+		},
+		series: [
+			{
+				name: "直接履约",
+				type: "bar",
+				stack: "fulfillment",
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.directQuantity))
+			},
+			{
+				name: "套餐履约",
+				type: "bar",
+				stack: "fulfillment",
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.packageQuantity))
+			},
+			{
+				name: "基础单位变化",
+				type: "line",
+				smooth: true,
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.baseQuantity))
+			}
+		]
+	};
+}
+
+</script>
diff --git a/src/pages/product/component/ProductSalesRankChart.vue b/src/pages/product/component/ProductSalesRankChart.vue
new file mode 100644
index 0000000..a7be842
--- /dev/null
+++ b/src/pages/product/component/ProductSalesRankChart.vue
@@ -0,0 +1,51 @@
+<template>
+	<gao-chart-card
+		title="产品销售排行"
+		caption="按销量取前 10"
+		:option="chartOption"
+		:loading="loading"
+		:has-data="list.length > 0"
+		height="20rem"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { EChartsOption } from "echarts";
+import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import type { GaoProductSalesRankView } from "@/types/GaoChart";
+import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "ProductSalesRankChart"
+});
+
+const props = defineProps<{
+	list: GaoProductSalesRankView[];
+	loading: boolean;
+}>();
+
+const chartOption = computed<EChartsOption>(() => {
+	const list = props.list.slice(0, 10);
+	return {
+		...buildHorizontalBarOption(list.map(getProductName)),
+		series: [
+			{
+				name: "直接销量",
+				type: "bar",
+				stack: "quantity",
+				data: list.map(item => getNumber(item.directQuantity))
+			},
+			{
+				name: "套餐权益",
+				type: "bar",
+				stack: "quantity",
+				data: list.map(item => getNumber(item.packageQuantity))
+			}
+		]
+	};
+});
+
+function getProductName(item: GaoProductSalesRankView): string {
+	return item.productName || "未命名产品";
+}
+</script>
diff --git a/src/pages/product/component/ProductSalesTrendChart.vue b/src/pages/product/component/ProductSalesTrendChart.vue
new file mode 100644
index 0000000..5cc8335
--- /dev/null
+++ b/src/pages/product/component/ProductSalesTrendChart.vue
@@ -0,0 +1,62 @@
+<template>
+	<gao-chart-card
+		title="产品销售趋势"
+		caption="直接产品与套餐权益分开展示"
+		:date-text-list="dateTextList"
+		:option="buildOption"
+		:loading="loading"
+		:has-data="list.length > 0"
+		height="17rem"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { EChartsOption } from "echarts";
+import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import type { GaoProductSalesDailyStatView } from "@/types/GaoChart";
+import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "ProductSalesTrendChart"
+});
+
+const props = defineProps<{
+	dateTextList: string[];
+	list: GaoProductSalesDailyStatView[];
+	loading: boolean;
+}>();
+
+function buildOption(visibleDateTextList: string[]): EChartsOption {
+	const labelList = visibleDateTextList.map(item => item.slice(5));
+	return {
+		...buildAxisChartOption(labelList),
+		xAxis: {
+			type: "category",
+			data: labelList,
+			axisTick: { show: false },
+			axisLabel: { color: "#52607a", interval: "auto", hideOverlap: true }
+		},
+		series: [
+			{
+				name: "直接销量",
+				type: "bar",
+				stack: "quantity",
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.directQuantity))
+			},
+			{
+				name: "套餐权益",
+				type: "bar",
+				stack: "quantity",
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.packageQuantity))
+			},
+			{
+				name: "订单数",
+				type: "line",
+				smooth: true,
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.orderCount))
+			}
+		]
+	};
+}
+
+</script>
diff --git a/src/pages/product/component/ProductStockHealthTable.vue b/src/pages/product/component/ProductStockHealthTable.vue
new file mode 100644
index 0000000..ee84c72
--- /dev/null
+++ b/src/pages/product/component/ProductStockHealthTable.vue
@@ -0,0 +1,153 @@
+<template>
+	<section class="table-section">
+		<div class="title-row">
+			<h2 v-text="'库存健康度'" />
+			<span class="caption" v-text="'低库存优先'" />
+		</div>
+		<div v-if="loading" class="table-state"><t-loading size="1.5rem" text="加载中" /></div>
+		<div v-else-if="!list.length" class="table-state"><t-empty description="暂无库存数据" /></div>
+		<div v-else class="table-wrap">
+			<table>
+				<thead>
+					<tr>
+						<th v-text="'产品'" />
+						<th v-text="'可用库存'" />
+						<th v-text="'预占'" />
+						<th v-text="'最低库存'" />
+						<th v-text="'状态'" />
+					</tr>
+				</thead>
+				<tbody>
+					<tr v-for="item in sortedList" :key="item.productId">
+						<td>
+							<div class="product-name" v-text="item.productName || '未命名产品'" />
+							<div class="product-type" v-text="getProductTypeText(item.productType)" />
+						</td>
+						<td class="number" v-text="formatQuantity(item.availableQuantity)" />
+						<td class="number" v-text="formatQuantity(item.reservedQuantity)" />
+						<td class="number" v-text="formatQuantity(item.minStockQuantity)" />
+						<td>
+							<t-tag v-if="item.lowStock === 1" theme="danger" variant="light" content="低库存" />
+							<t-tag v-else theme="success" variant="light" content="正常" />
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</section>
+</template>
+
+<script setup lang="ts">
+import type { GaoProductStockHealthView } from "@/types/GaoChart";
+import { formatQuantity, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "ProductStockHealthTable"
+});
+
+const props = defineProps<{
+	list: GaoProductStockHealthView[];
+	loading: boolean;
+}>();
+
+const sortedList = computed(() => [...props.list].sort((left, right) => {
+	const lowStockDiff = getNumber(right.lowStock) - getNumber(left.lowStock);
+	return lowStockDiff || getNumber(left.availableQuantity) - getNumber(right.availableQuantity);
+}));
+
+function getProductTypeText(value?: string): string {
+	return ({ SERVICE: "服务", GOODS: "商品", CONSUMABLE: "耗材" } as Record<string, string>)[value || ""] || "未分类";
+}
+</script>
+
+<style scoped lang="less">
+.table-section {
+	padding: 1rem;
+	background: rgba(255, 255, 255, .92);
+	box-shadow: var(--td-shadow-1);
+	border-radius: 1.25rem;
+
+	.title-row {
+		gap: .5rem;
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+	}
+
+	h2 {
+		color: #0f172a;
+		margin: 0 0 .875rem;
+		font-size: 1rem;
+		font-weight: 700;
+	}
+
+	.caption {
+		color: #94a3b8;
+		font-size: .6875rem;
+	}
+
+	.table-wrap {
+		overflow-x: auto;
+	}
+
+	table {
+		width: 100%;
+		border-collapse: collapse;
+		font-size: .75rem;
+		white-space: nowrap;
+	}
+
+	th {
+		color: #94a3b8;
+		padding: .5rem .375rem;
+		text-align: left;
+		font-weight: 500;
+	}
+
+	td {
+		color: #334155;
+		padding: .625rem .375rem;
+		border-top: 1px solid rgba(148, 163, 184, .16);
+	}
+
+	.number {
+		text-align: right;
+		font-variant-numeric: tabular-nums;
+	}
+
+	.product-name {
+		max-width: 7rem;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.product-type {
+		color: #94a3b8;
+		margin-top: .125rem;
+		font-size: .6875rem;
+	}
+
+	.table-state {
+		padding: 1.5rem 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}
+
+:global(html.theme-dark) {
+	.table-section {
+		background: rgba(15, 23, 42, .88);
+		box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
+
+		h2 {
+			color: #e2e8f0;
+		}
+
+		td {
+			color: #cbd5e1;
+			border-top-color: rgba(148, 163, 184, .2);
+		}
+	}
+}
+</style>
diff --git a/src/pages/product/component/ProductStockMovementChart.vue b/src/pages/product/component/ProductStockMovementChart.vue
new file mode 100644
index 0000000..3324070
--- /dev/null
+++ b/src/pages/product/component/ProductStockMovementChart.vue
@@ -0,0 +1,70 @@
+<template>
+	<gao-chart-card
+		title="库存变动"
+		caption="预占与释放不计入实际出入库"
+		:date-text-list="dateTextList"
+		:option="buildOption"
+		:loading="loading"
+		:has-data="list.length > 0"
+		height="17rem"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { EChartsOption } from "echarts";
+import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import type { GaoProductStockMovementDailyStatView } from "@/types/GaoChart";
+import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "ProductStockMovementChart"
+});
+
+const props = defineProps<{
+	dateTextList: string[];
+	list: GaoProductStockMovementDailyStatView[];
+	loading: boolean;
+}>();
+
+function buildOption(visibleDateTextList: string[]): EChartsOption {
+	const labelList = visibleDateTextList.map(item => item.slice(5));
+	return {
+		...buildAxisChartOption(labelList),
+		xAxis: {
+			type: "category",
+			data: labelList,
+			axisTick: { show: false },
+			axisLabel: { color: "#52607a", interval: "auto", hideOverlap: true }
+		},
+		series: [
+			{
+				name: "入库",
+				type: "bar",
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.inQuantity))
+			},
+			{
+				name: "出库",
+				type: "bar",
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.outQuantity))
+			},
+			{
+				name: "库存净变化",
+				type: "line",
+				smooth: true,
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.netOnHandQuantity))
+			},
+			{
+				name: "新增预占",
+				type: "line",
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.reserveQuantity))
+			},
+			{
+				name: "释放预占",
+				type: "line",
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.releaseQuantity))
+			}
+		]
+	};
+}
+
+</script>
diff --git a/src/pages/product/component/chartUtils.ts b/src/pages/product/component/chartUtils.ts
new file mode 100644
index 0000000..9c6fa88
--- /dev/null
+++ b/src/pages/product/component/chartUtils.ts
@@ -0,0 +1,215 @@
+import type { EChartsOption } from "echarts";
+
+export const chartColorList = ["#2563eb", "#0f766e", "#d97706", "#db2777", "#7c3aed", "#0891b2"];
+
+export function buildAxisChartOption(labelList: string[]): EChartsOption {
+	return {
+		color: chartColorList,
+		grid: {
+			top: 48,
+			left: 12,
+			right: 12,
+			bottom: 12,
+			containLabel: true
+		},
+		legend: {
+			top: 0,
+			icon: "roundRect",
+			textStyle: {
+				color: "#52607a"
+			}
+		},
+		tooltip: {
+			trigger: "axis",
+			confine: true
+		},
+		xAxis: {
+			type: "category",
+			data: labelList,
+			axisTick: {
+				show: false
+			},
+		axisLabel: {
+			color: "#52607a",
+			interval: "auto",
+			hideOverlap: true
+			}
+		},
+		yAxis: {
+			type: "value",
+		axisLabel: {
+			color: "#52607a",
+			interval: "auto",
+			hideOverlap: true
+			},
+			splitLine: {
+				lineStyle: {
+					color: "rgba(148, 163, 184, .2)"
+				}
+			}
+		}
+	};
+}
+
+export function buildHorizontalBarOption(categoryList: string[]): EChartsOption {
+	return {
+		color: chartColorList,
+		grid: {
+			top: 12,
+			left: 8,
+			right: 18,
+			bottom: 12,
+			containLabel: true
+		},
+		legend: {
+			top: 0,
+			icon: "roundRect",
+			textStyle: {
+				color: "#52607a"
+			}
+		},
+		tooltip: {
+			trigger: "axis",
+			axisPointer: {
+				type: "shadow"
+			},
+			confine: true
+		},
+		xAxis: {
+			type: "value",
+			axisLabel: {
+				color: "#52607a"
+			},
+			splitLine: {
+				lineStyle: {
+					color: "rgba(148, 163, 184, .2)"
+				}
+			}
+		},
+		yAxis: {
+			type: "category",
+			inverse: true,
+			data: categoryList,
+			axisTick: {
+				show: false
+			},
+			axisLabel: {
+				color: "#52607a",
+				width: 92,
+				overflow: "truncate"
+			}
+		}
+	};
+}
+
+export function buildPieChartOption(): EChartsOption {
+	return {
+		color: chartColorList,
+		legend: {
+			bottom: 0,
+			icon: "circle",
+			textStyle: {
+				color: "#52607a"
+			}
+		},
+		tooltip: {
+			trigger: "item",
+			confine: true
+		},
+		series: [
+			{
+				type: "pie",
+				radius: ["0%", "58%"],
+				center: ["50%", "45%"],
+				avoidLabelOverlap: true,
+				label: {
+					color: "#52607a",
+					formatter: "{b} {c}"
+				},
+				labelLine: {
+					length: 12,
+					length2: 8
+				}
+			}
+		]
+	};
+}
+
+export function buildDateTextList(beginText: string, endText: string): string[] {
+	const begin = getDateStart(parseDateTime(beginText));
+	const end = getDateStart(parseDateTime(endText));
+	const list: string[] = [];
+	for (let item = begin; item <= end; item = addDays(item, 1)) {
+		list.push(formatDate(item));
+	}
+	return list;
+}
+
+export function toUnixRange(dateRange: readonly [string, string]): { beginAt: number; endAt: number } {
+	const end = parseDateTime(dateRange[1]);
+	if (end.getHours() === 23 && end.getMinutes() === 59) {
+		end.setSeconds(59, 999);
+	}
+	return {
+		beginAt: parseDateTime(dateRange[0]).getTime(),
+		endAt: end.getTime()
+	};
+}
+
+export function getDailyItem<T extends { dateValue?: number }>(list: T[], dateText: string): T | undefined {
+	return list.find(item => item.dateValue === toDateValue(dateText));
+}
+
+export function getNumber(value?: number): number {
+	return typeof value === "number" && Number.isFinite(value) ? value : 0;
+}
+
+export function sumNumber<T>(list: T[], getter: (item: T) => number | undefined): number {
+	return list.reduce((sum, item) => sum + getNumber(getter(item)), 0);
+}
+
+export function formatQuantity(value?: number): string {
+	return getNumber(value).toLocaleString("zh-CN", {
+		maximumFractionDigits: 4
+	});
+}
+
+export function formatMoney(value?: number): string {
+	return `¥${(getNumber(value) / 100).toLocaleString("zh-CN", {
+		minimumFractionDigits: 2,
+		maximumFractionDigits: 2
+	})}`;
+}
+
+export function getDateStart(date: Date): Date {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
+}
+
+export function getDateEnd(date: Date): Date {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
+}
+
+function parseDateTime(value: string): Date {
+	const [dateText, timeText = "00:00"] = value.split(" ");
+	const [year, month, day] = dateText.split("-").map(Number);
+	const [hour, minute] = timeText.split(":").map(Number);
+	return new Date(year, month - 1, day, hour, minute, 0, 0);
+}
+
+function addDays(date: Date, days: number): Date {
+	const value = new Date(date);
+	value.setDate(value.getDate() + days);
+	return value;
+}
+
+function formatDate(date: Date): string {
+	return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+
+function toDateValue(dateText: string): number {
+	return Number(dateText.replaceAll("-", ""));
+}
+
+function pad(value: number): string {
+	return String(value).padStart(2, "0");
+}
diff --git a/src/router/routes/chartRoutes.ts b/src/router/routes/chartRoutes.ts
index cda6f80..a8644da 100644
--- a/src/router/routes/chartRoutes.ts
+++ b/src/router/routes/chartRoutes.ts
@@ -1,6 +1,34 @@
 import type { RouteRecordRaw } from "vue-router";
 
 const chartRoutes: RouteRecordRaw[] = [
+	{
+		path: "/management/product-data-charts",
+		name: "ProductDataCharts",
+		component: () => import("@/pages/product/ProductDataCharts.vue"),
+		meta: {
+			depth: 3,
+			navBarVisible: true,
+			navBarCanBack: true,
+			navBarTitle: "产品经营图表",
+			tabBarVisible: false,
+			bodyBackground: "#F5F5F8",
+			darkBodyBackground: "#10161f"
+		}
+	},
+	{
+		path: "/management/order-data-charts",
+		name: "OrderDataCharts",
+		component: () => import("@/pages/product/OrderDataCharts.vue"),
+		meta: {
+			depth: 3,
+			navBarVisible: true,
+			navBarCanBack: true,
+			navBarTitle: "客户经营图表",
+			tabBarVisible: false,
+			bodyBackground: "#F5F5F8",
+			darkBodyBackground: "#10161f"
+		}
+	},
 	{
 		path: "/management/data-charts",
 		name: "StoreDataCharts",
diff --git a/src/types/GaoChart.ts b/src/types/GaoChart.ts
new file mode 100644
index 0000000..7388999
--- /dev/null
+++ b/src/types/GaoChart.ts
@@ -0,0 +1,200 @@
+import type { ProductType } from "@/types/Product";
+
+export type GaoProductChartReq = {
+	storeId?: string;
+	productId?: string;
+	categoryId?: string;
+	productType?: ProductType;
+	beginAt?: number;
+	endAt?: number;
+	topN?: number;
+};
+
+export type GaoSalesOrderChartReq = {
+	storeId?: string;
+	customerId?: string;
+	orderType?: "PACKAGE" | "DIRECT_PRODUCT";
+	status?: "ACTIVE" | "FULFILLED" | "CANCELLED";
+	paymentStatus?: "UNPAID" | "PARTIALLY_PAID" | "PAID";
+	beginAt: number;
+	endAt: number;
+	topN?: number;
+};
+
+export type GaoProductSalesDailyStatView = {
+	dateValue?: number;
+	orderCount?: number;
+	directQuantity?: number;
+	packageQuantity?: number;
+	directSaleAmount?: number;
+};
+
+export type GaoProductSalesRankView = {
+	productId?: string;
+	productName?: string;
+	orderCount?: number;
+	directQuantity?: number;
+	packageQuantity?: number;
+	directSaleAmount?: number;
+};
+
+export type GaoProductSkuUnitSalesRankView = {
+	productId?: string;
+	productName?: string;
+	skuId?: string;
+	skuUnitId?: string;
+	skuName?: string;
+	specSummary?: string;
+	unitName?: string;
+	orderCount?: number;
+	quantity?: number;
+	saleAmount?: number;
+};
+
+export type GaoProductFulfillmentDailyStatView = {
+	dateValue?: number;
+	directQuantity?: number;
+	packageQuantity?: number;
+	baseQuantity?: number;
+};
+
+export type GaoProductFulfillmentRankView = {
+	productId?: string;
+	productName?: string;
+	orderCount?: number;
+	directQuantity?: number;
+	packageQuantity?: number;
+	reservedQuantity?: number;
+	fulfilledQuantity?: number;
+	availableQuantity?: number;
+};
+
+export type GaoProductStockMovementDailyStatView = {
+	dateValue?: number;
+	inQuantity?: number;
+	outQuantity?: number;
+	netOnHandQuantity?: number;
+	reserveQuantity?: number;
+	releaseQuantity?: number;
+};
+
+export type GaoProductStockHealthView = {
+	productId?: string;
+	productName?: string;
+	categoryId?: string | null;
+	categoryName?: string;
+	productType?: ProductType;
+	onHandQuantity?: number;
+	reservedQuantity?: number;
+	availableQuantity?: number;
+	minStockQuantity?: number;
+	lowStock?: number;
+};
+
+export type GaoProductTypeStatView = {
+	productType?: ProductType;
+	productCount?: number;
+};
+
+export type GaoProductCategoryStatView = {
+	categoryId?: string | null;
+	categoryName?: string;
+	productCount?: number;
+};
+
+export type GaoSalesOrderDailyStatView = {
+	dateValue?: number;
+	orderCount?: number;
+	saleAmount?: number;
+	paidAmount?: number;
+	pendingPaidAmount?: number;
+	refundedAmount?: number;
+	netPaidAmount?: number;
+};
+
+export type GaoSalesOrderTypeStatView = {
+	orderType?: "PACKAGE" | "DIRECT_PRODUCT";
+	orderCount?: number;
+	saleAmount?: number;
+	paidAmount?: number;
+	refundedAmount?: number;
+	netPaidAmount?: number;
+};
+
+export type GaoSalesOrderPaymentStatView = {
+	paymentStatus?: "UNPAID" | "PARTIALLY_PAID" | "PAID";
+	orderCount?: number;
+	saleAmount?: number;
+	paidAmount?: number;
+	pendingPaidAmount?: number;
+	unpaidAmount?: number;
+	refundedAmount?: number;
+};
+
+export type GaoSalesOrderStatusStatView = {
+	status?: "ACTIVE" | "FULFILLED" | "CANCELLED";
+	orderCount?: number;
+	saleAmount?: number;
+	paidAmount?: number;
+	refundedAmount?: number;
+};
+
+export type GaoSalesOrderReceivableStatView = {
+	orderCount?: number;
+	saleAmount?: number;
+	paidAmount?: number;
+	pendingPaidAmount?: number;
+	unpaidAmount?: number;
+	refundedAmount?: number;
+	netPaidAmount?: number;
+};
+
+export type GaoCustomerOrderRankView = {
+	customerId?: string;
+	customerCode?: string;
+	customerName?: string;
+	orderCount?: number;
+	saleAmount?: number;
+	paidAmount?: number;
+	refundedAmount?: number;
+	netPaidAmount?: number;
+};
+
+export type GaoCustomerOrderProductRankView = {
+	productId?: string;
+	productName?: string;
+	orderCount?: number;
+	directQuantity?: number;
+	packageQuantity?: number;
+	reservedQuantity?: number;
+	fulfilledQuantity?: number;
+	availableQuantity?: number;
+	directSaleAmount?: number;
+};
+
+export type GaoSalesOrderConsumptionDailyStatView = {
+	dateValue?: number;
+	recordCount?: number;
+	amount?: number;
+	cumulativeAmount?: number;
+};
+
+export type GaoSalesOrderCalendarStatView = {
+	dateValue?: number;
+	orderCount?: number;
+	saleAmount?: number;
+	netPaidAmount?: number;
+};
+
+export type GaoCustomerRepeatDailyStatView = {
+	dateValue?: number;
+	customerCount?: number;
+	repeatCustomerCount?: number;
+	repeatOrderCount?: number;
+};
+
+export type GaoCustomerRepeatIntervalStatView = {
+	intervalDays?: number;
+	customerCount?: number;
+	orderCount?: number;
+};