From 93cb47deafec4e100fbad117a1e523cd207900d7 Mon Sep 17 00:00:00 2001
From: 2910410219 <2910410219@qq.com>
Date: Wed, 8 Apr 2026 17:36:56 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E5=88=86=E6=9E=90=E6=A8=A1=E5=9D=97):?=
 =?UTF-8?q?=20=E4=BC=98=E5=8C=96=E7=BB=84=E4=BB=B6=E7=BB=93=E6=9E=84?=
 =?UTF-8?q?=E5=92=8C=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 合并和简化模板中的header部分，提升代码可读性
- 统一搜索条件的布局，增强用户体验
- 更新数据绑定逻辑，确保搜索参数的正确处理
- 精简和优化表格及分页组件的实现，提升性能和可维护性
---
 .../operation/analysis/product/index.vue      | 288 ++------
 .../trade/operation/analysis/region/index.vue | 254 ++-----
 .../trade/operation/analysis/shop/index.vue   | 439 ++++++------
 .../operation/distribution/effect/index.vue   | 299 ++-------
 .../operation/distribution/order/index.vue    | 341 ++--------
 src/views/trade/operation/order/index.vue     | 418 ++++--------
 .../trade/operation/stats/anchor/index.vue    | 350 +++++-----
 .../trade/operation/stats/shop/index.vue      | 632 +++++++++---------
 8 files changed, 1104 insertions(+), 1917 deletions(-)

diff --git a/src/views/trade/operation/analysis/product/index.vue b/src/views/trade/operation/analysis/product/index.vue
index 30e6e73..73d8f41 100644
--- a/src/views/trade/operation/analysis/product/index.vue
+++ b/src/views/trade/operation/analysis/product/index.vue
@@ -1,76 +1,34 @@
 <template>
 	<div class="trade-operation-analysis-product">
 		<el-card shadow="hover">
-			<template #header>
-				<div class="card-header">
-					<span>商品数据统计</span>
-				</div>
-			</template>
-			<!-- 商品类目分布 -->
+			<template #header><div class="card-header"><span>商品数据统计</span></div></template>
 			<div class="chart-container">
 				<el-card>
-					<template #header>
-						<div class="card-header">商品类目分布</div>
-					</template>
+					<template #header><div class="card-header">商品类目分布</div></template>
 					<div ref="categoryChartRef" class="chart"></div>
 				</el-card>
 			</div>
-			<!-- 搜索条件 -->
-			<div class="search-container">
-				<el-form :model="searchParams" :inline="true" class="search-form">
-					<el-form-item label="时间范围">
-						<el-date-picker
-							v-model="searchParams.dateRange"
-							type="daterange"
-							range-separator="至"
-							start-placeholder="开始日期"
-							end-placeholder="结束日期"
-							value-format="YYYY-MM-DD"
-						/>
-					</el-form-item>
-					<el-form-item label="商品类目">
-						<el-select v-model="searchParams.categoryId" placeholder="选择商品类目">
-							<el-option label="全部" value="" />
-							<el-option v-for="category in categories" :key="category.id" :label="category.name" :value="category.id" />
-						</el-select>
-					</el-form-item>
-					<el-form-item>
-						<el-button type="primary" @click="handleSearch">查询</el-button>
-						<el-button @click="handleReset">重置</el-button>
-					</el-form-item>
-				</el-form>
-			</div>
-			<!-- SKU销售排行 -->
 			<div class="sku-ranking">
 				<el-card>
-					<template #header>
-						<div class="card-header">SKU销售排行</div>
-					</template>
-					<el-table :data="skuList" style="width: 100%">
+					<template #header><div class="card-header">SKU销售排行</div></template>
+					<div class="search-container">
+						<el-form :model="searchParams" :inline="true" class="search-form">
+							<el-form-item label="时间范围"><el-date-picker v-model="searchParams.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" /></el-form-item>
+							<el-form-item label="商品类目"><el-select v-model="selectedCategoryId" placeholder="选择商品类目"><el-option label="全部" value="" /><el-option v-for="category in categories" :key="category.id" :label="category.name" :value="String(category.id)" /></el-select></el-form-item>
+							<el-form-item><el-button type="primary" @click="handleSearch">查询</el-button><el-button @click="handleReset">重置</el-button></el-form-item>
+						</el-form>
+					</div>
+					<el-table :data="pagedSkuList" style="width: 100%">
 						<el-table-column prop="rank" label="排名" width="80" />
 						<el-table-column prop="productName" label="商品名称" />
 						<el-table-column prop="sku" label="SKU" />
 						<el-table-column prop="category" label="类目" />
 						<el-table-column prop="sales" label="销售额" />
 						<el-table-column prop="salesVolume" label="销量" />
-						<el-table-column prop="status" label="状态">
-							<template #default="scope">
-								<el-tag :type="scope.row.status === 'hot' ? 'success' : 'warning'" size="small">{{
-									scope.row.status === 'hot' ? '热销' : '滞销'
-								}}</el-tag>
-							</template>
-						</el-table-column>
+						<el-table-column prop="status" label="状态"><template #default="scope"><el-tag :type="scope.row.status === 'hot' ? 'success' : 'warning'" size="small">{{ scope.row.status === 'hot' ? '热销' : '滞销' }}</el-tag></template></el-table-column>
 					</el-table>
 					<div class="pagination-container">
-						<el-pagination
-							v-model:current-page="pagination.currentPage"
-							v-model:page-size="pagination.pageSize"
-							:page-sizes="[10, 20, 50, 100]"
-							layout="total, sizes, prev, pager, next, jumper"
-							:total="pagination.total"
-							@size-change="handleSizeChange"
-							@current-change="handleCurrentChange"
-						/>
+						<el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
 					</div>
 				</el-card>
 			</div>
@@ -79,191 +37,71 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue';
+import { computed, onMounted, reactive, ref } from 'vue';
 import * as echarts from 'echarts';
 
-const searchParams = reactive({
-	dateRange: [],
-	categoryId: '',
-});
-
-interface Category {
-	id: number;
-	name: string;
-}
-
-interface SkuItem {
-	rank: number;
-	productName: string;
-	sku: string;
-	category: string;
-	sales: number;
-	salesVolume: number;
-	status: string;
-}
-
+const searchParams = reactive({ dateRange: [], categoryId: '' });
+interface Category { id: string; name: string }
+interface SkuItem { rank: number; productName: string; sku: string; category: string; sales: number; salesVolume: number; status: string }
 const categories = ref<Category[]>([]);
-const skuList = ref<SkuItem[]>([]);
-
-const pagination = reactive({
-	currentPage: 1,
-	pageSize: 10,
-	total: 0,
+const selectedCategoryId = computed({
+	get: () => searchParams.categoryId,
+	set: (value: string) => {
+		searchParams.categoryId = value;
+	},
 });
-
+const skuList = ref<SkuItem[]>([]);
+const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 });
+const pagedSkuList = computed(() => skuList.value.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize));
 const categoryChartRef = ref();
 let categoryChart: echarts.ECharts | null = null;
 
-// 模拟商品类目数据
-const getMockCategories = () => {
-	return [
-		{ id: 1, name: '电子产品' },
-		{ id: 2, name: '服装鞋帽' },
-		{ id: 3, name: '食品饮料' },
-		{ id: 4, name: '家居用品' },
-		{ id: 5, name: '美妆护肤' },
-	];
-};
+const getMockCategories = () => [{ id: '1', name: '电子产品' }, { id: '2', name: '服装鞋帽' }, { id: '3', name: '食品饮料' }, { id: '4', name: '家居用品' }, { id: '5', name: '美妆护肤' }];
+const getMockSkuList = () => [
+	{ rank: 1, productName: '智能手机', sku: 'SKU001', category: '电子产品', sales: 890000, salesVolume: 2500, status: 'hot' },
+	{ rank: 2, productName: '运动跑鞋', sku: 'SKU002', category: '服装鞋帽', sales: 650000, salesVolume: 3200, status: 'hot' },
+	{ rank: 3, productName: '高端耳机', sku: 'SKU003', category: '电子产品', sales: 420000, salesVolume: 1800, status: 'hot' },
+	{ rank: 4, productName: '有机蔬菜', sku: 'SKU004', category: '食品饮料', sales: 380000, salesVolume: 5000, status: 'hot' },
+	{ rank: 5, productName: '护肤套装', sku: 'SKU005', category: '美妆护肤', sales: 320000, salesVolume: 1200, status: 'hot' },
+	{ rank: 6, productName: '办公椅', sku: 'SKU006', category: '家居用品', sales: 280000, salesVolume: 800, status: 'hot' },
+	{ rank: 7, productName: 'T恤衫', sku: 'SKU007', category: '服装鞋帽', sales: 250000, salesVolume: 4500, status: 'hot' },
+	{ rank: 8, productName: '厨房电器', sku: 'SKU008', category: '家居用品', sales: 180000, salesVolume: 600, status: 'warning' },
+	{ rank: 9, productName: '零食礼包', sku: 'SKU009', category: '食品饮料', sales: 150000, salesVolume: 3000, status: 'warning' },
+	{ rank: 10, productName: '化妆品', sku: 'SKU010', category: '美妆护肤', sales: 120000, salesVolume: 900, status: 'warning' },
+];
+const getMockCategoryDistribution = () => (searchParams.categoryId ? [{ categoryName: '电子产品', sales: 1310000 }] : [{ categoryName: '电子产品', sales: 1310000 }, { categoryName: '服装鞋帽', sales: 900000 }, { categoryName: '食品饮料', sales: 530000 }, { categoryName: '家居用品', sales: 460000 }, { categoryName: '美妆护肤', sales: 440000 }]);
 
-// 模拟SKU销售排行数据
-const getMockSkuList = () => {
-	const skus: SkuItem[] = [
-		{ rank: 1, productName: '智能手机', sku: 'SKU001', category: '电子产品', sales: 890000, salesVolume: 2500, status: 'hot' },
-		{ rank: 2, productName: '运动跑鞋', sku: 'SKU002', category: '服装鞋帽', sales: 650000, salesVolume: 3200, status: 'hot' },
-		{ rank: 3, productName: '高端耳机', sku: 'SKU003', category: '电子产品', sales: 420000, salesVolume: 1800, status: 'hot' },
-		{ rank: 4, productName: '有机蔬菜', sku: 'SKU004', category: '食品饮料', sales: 380000, salesVolume: 5000, status: 'hot' },
-		{ rank: 5, productName: '护肤套装', sku: 'SKU005', category: '美妆护肤', sales: 320000, salesVolume: 1200, status: 'hot' },
-		{ rank: 6, productName: '办公椅', sku: 'SKU006', category: '家居用品', sales: 280000, salesVolume: 800, status: 'hot' },
-		{ rank: 7, productName: 'T恤衫', sku: 'SKU007', category: '服装鞋帽', sales: 250000, salesVolume: 4500, status: 'hot' },
-		{ rank: 8, productName: '厨房电器', sku: 'SKU008', category: '家居用品', sales: 180000, salesVolume: 600, status: 'warning' },
-		{ rank: 9, productName: '零食礼包', sku: 'SKU009', category: '食品饮料', sales: 150000, salesVolume: 3000, status: 'warning' },
-		{ rank: 10, productName: '化妆品', sku: 'SKU010', category: '美妆护肤', sales: 120000, salesVolume: 900, status: 'warning' },
-	];
-	return skus;
-};
-
-// 模拟类目分布数据
-const getMockCategoryDistribution = () => {
-	return [
-		{ categoryName: '电子产品', sales: 1310000 },
-		{ categoryName: '服装鞋帽', sales: 900000 },
-		{ categoryName: '食品饮料', sales: 530000 },
-		{ categoryName: '家居用品', sales: 460000 },
-		{ categoryName: '美妆护肤', sales: 440000 },
-	];
-};
-
-const handleSearch = () => {
-	// 使用模拟数据
-	categories.value = getMockCategories();
-	skuList.value = getMockSkuList();
-	pagination.total = 50;
-	initCategoryChart(getMockCategoryDistribution());
-};
-
-const handleReset = () => {
-	searchParams.dateRange = [];
-	searchParams.categoryId = '';
-	pagination.currentPage = 1;
-	pagination.pageSize = 10;
-};
-
-const handleSizeChange = (size: number) => {
-	pagination.pageSize = size;
-	handleSearch();
-};
-
-const handleCurrentChange = (current: number) => {
-	pagination.currentPage = current;
-	handleSearch();
-};
+const handleSearch = () => { categories.value = getMockCategories(); skuList.value = getMockSkuList(); pagination.total = skuList.value.length; pagination.currentPage = 1; initCategoryChart(getMockCategoryDistribution()); };
+const handleReset = () => { searchParams.dateRange = []; searchParams.categoryId = ''; pagination.currentPage = 1; pagination.pageSize = 10; handleSearch(); };
+const handleSizeChange = (size: number) => { pagination.pageSize = size; pagination.currentPage = 1; };
+const handleCurrentChange = (current: number) => { pagination.currentPage = current; };
 
 const initCategoryChart = (categoryDistribution: any[]) => {
 	if (!categoryChartRef.value) return;
-
-	if (categoryChart) {
-		categoryChart.dispose();
-	}
-
+	if (categoryChart) categoryChart.dispose();
 	categoryChart = echarts.init(categoryChartRef.value);
-
-	const option = {
-		tooltip: {
-			trigger: 'item',
-			formatter: '{a} <br/>{b}: {c} ({d}%)',
-		},
-		legend: {
-			orient: 'vertical',
-			left: 'left',
-			data: categoryDistribution.map((item) => item.categoryName),
-		},
-		series: [
-			{
-				name: '商品类目',
-				type: 'pie',
-				radius: '50%',
-				data: categoryDistribution.map((item) => ({
-					value: item.sales,
-					name: item.categoryName,
-				})),
-				emphasis: {
-					itemStyle: {
-						shadowBlur: 10,
-						shadowOffsetX: 0,
-						shadowColor: 'rgba(0, 0, 0, 0.5)',
-					},
-				},
-			},
-		],
-	};
-
-	categoryChart.setOption(option);
+	categoryChart.setOption({
+		tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
+		legend: { orient: 'vertical', left: 'left', data: categoryDistribution.map((item) => item.categoryName) },
+		series: [{ name: '商品类目', type: 'pie', radius: categoryDistribution.length <= 1 ? '35%' : '50%', data: categoryDistribution.map((item) => ({ value: item.sales, name: item.categoryName })), emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }],
+	});
 };
 
-onMounted(() => {
-	handleSearch();
-
-	window.addEventListener('resize', () => {
-		categoryChart?.resize();
-	});
-});
+onMounted(() => { handleSearch(); window.addEventListener('resize', () => categoryChart?.resize()); });
 </script>
 
 <style scoped>
-.trade-operation-analysis-product {
-	padding: 20px;
-}
-
-.card-header {
-	font-size: 16px;
-	font-weight: bold;
-}
-
-.search-container {
-	margin-bottom: 20px;
-}
-
-.search-form {
-	display: flex;
-	align-items: center;
-}
-
-.chart-container {
-	margin: 20px 0;
-}
-
-.chart {
-	width: 100%;
-	height: 400px;
-}
-
-.sku-ranking {
-	margin-top: 20px;
-}
-
-.pagination-container {
-	margin-top: 20px;
-	display: flex;
-	justify-content: flex-end;
-}
+.trade-operation-analysis-product { padding: 20px; }
+.card-header { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 600; }
+.search-container { margin-bottom: 16px; }
+.search-form { display: flex; align-items: center; flex-wrap: wrap; }
+.search-form :deep(.el-form-item) { margin-right: 12px; margin-bottom: 12px; }
+.trade-operation-analysis-product :deep(.el-select) { width: 180px; }
+.trade-operation-analysis-product :deep(.el-select__wrapper),
+.trade-operation-analysis-product :deep(.el-select__selected-item),
+.trade-operation-analysis-product :deep(.el-select__placeholder) { color: #303133; }
+.chart-container { margin: 0 0 20px; }
+.chart { width: 100%; height: 400px; }
+.sku-ranking { margin-top: 20px; }
+.pagination-container { margin-top: 16px; display: flex; justify-content: flex-end; }
 </style>
diff --git a/src/views/trade/operation/analysis/region/index.vue b/src/views/trade/operation/analysis/region/index.vue
index ed6ba53..94f4272 100644
--- a/src/views/trade/operation/analysis/region/index.vue
+++ b/src/views/trade/operation/analysis/region/index.vue
@@ -1,52 +1,24 @@
 <template>
 	<div class="trade-operation-analysis-region">
 		<el-card shadow="hover">
-			<template #header>
-				<div class="card-header">
-					<span>地域分布分析</span>
-				</div>
-			</template>
-			<!-- 地域分布图表 -->
+			<template #header><div class="card-header"><span>地域分布分析</span></div></template>
 			<div class="chart-container">
 				<el-card>
-					<template #header>
-						<div class="card-header">地域销售分布</div>
-					</template>
+					<template #header><div class="card-header">地域销售分布</div></template>
 					<div ref="regionChartRef" class="chart"></div>
 				</el-card>
 			</div>
-			<!-- 搜索条件 -->
-			<div class="search-container">
-				<el-form :model="searchParams" :inline="true" class="search-form">
-					<el-form-item label="时间范围">
-						<el-date-picker
-							v-model="searchParams.dateRange"
-							type="daterange"
-							range-separator="至"
-							start-placeholder="开始日期"
-							end-placeholder="结束日期"
-							value-format="YYYY-MM-DD"
-						/>
-					</el-form-item>
-					<el-form-item label="区域级别">
-						<el-select v-model="searchParams.regionLevel" placeholder="选择区域级别">
-							<el-option label="省份" value="province" />
-							<el-option label="城市" value="city" />
-						</el-select>
-					</el-form-item>
-					<el-form-item>
-						<el-button type="primary" @click="handleSearch">查询</el-button>
-						<el-button @click="handleReset">重置</el-button>
-					</el-form-item>
-				</el-form>
-			</div>
-			<!-- 地域销售排行 -->
 			<div class="region-ranking">
 				<el-card>
-					<template #header>
-						<div class="card-header">地域销售排行</div>
-					</template>
-					<el-table :data="regionList" style="width: 100%">
+					<template #header><div class="card-header">地域销售排行</div></template>
+					<div class="search-container">
+						<el-form :model="searchParams" :inline="true" class="search-form">
+							<el-form-item label="时间范围"><el-date-picker v-model="searchParams.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" /></el-form-item>
+							<el-form-item label="区域级别"><el-select v-model="selectedRegionLevel" placeholder="选择区域级别"><el-option v-for="option in regionLevelOptions" :key="option.value" :label="option.label" :value="option.value" /></el-select></el-form-item>
+							<el-form-item><el-button type="primary" @click="handleSearch">查询</el-button><el-button @click="handleReset">重置</el-button></el-form-item>
+						</el-form>
+					</div>
+					<el-table :data="pagedRegionList" style="width: 100%">
 						<el-table-column prop="rank" label="排名" width="80" />
 						<el-table-column prop="regionName" label="地区名称" />
 						<el-table-column prop="sales" label="销售额" />
@@ -55,15 +27,7 @@
 						<el-table-column prop="poiCount" label="店铺数量" />
 					</el-table>
 					<div class="pagination-container">
-						<el-pagination
-							v-model:current-page="pagination.currentPage"
-							v-model:page-size="pagination.pageSize"
-							:page-sizes="[10, 20, 50, 100]"
-							layout="total, sizes, prev, pager, next, jumper"
-							:total="pagination.total"
-							@size-change="handleSizeChange"
-							@current-change="handleCurrentChange"
-						/>
+						<el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
 					</div>
 				</el-card>
 			</div>
@@ -72,167 +36,67 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue';
+import { computed, onMounted, reactive, ref } from 'vue';
 import * as echarts from 'echarts';
 
-const searchParams = reactive({
-	dateRange: [],
-	regionLevel: 'province',
+const searchParams = reactive({ dateRange: [], regionLevel: 'province' });
+const regionLevelOptions = [
+	{ label: '省份', value: 'province' },
+	{ label: '城市', value: 'city' },
+];
+const selectedRegionLevel = computed({
+	get: () => searchParams.regionLevel,
+	set: (value: string) => {
+		searchParams.regionLevel = value;
+	},
 });
-
-const regionList = ref([]);
-
-const pagination = reactive({
-	currentPage: 1,
-	pageSize: 10,
-	total: 0,
-});
-
+const regionList = ref<any[]>([]);
+const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 });
+const pagedRegionList = computed(() => regionList.value.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize));
 const regionChartRef = ref();
 let regionChart: echarts.ECharts | null = null;
 
-// 模拟地域分布数据
-const getMockRegionDistribution = () => {
-	const regions = [
-		{ regionName: '北京', sales: 1200000 },
-		{ regionName: '上海', sales: 1500000 },
-		{ regionName: '广州', sales: 980000 },
-		{ regionName: '深圳', sales: 1100000 },
-		{ regionName: '杭州', sales: 850000 },
-		{ regionName: '成都', sales: 780000 },
-		{ regionName: '武汉', sales: 650000 },
-		{ regionName: '西安', sales: 520000 },
-	];
-	return regions;
-};
+const getMockRegionDistribution = () => (searchParams.regionLevel === 'city' ? [{ regionName: '上海', sales: 1500000 }] : [{ regionName: '北京', sales: 1200000 }, { regionName: '上海', sales: 1500000 }, { regionName: '广州', sales: 980000 }, { regionName: '深圳', sales: 1100000 }]);
+const getMockRegionList = () => [
+	{ rank: 1, regionName: '上海', sales: 1500000, orderCount: 3200, avgOrderValue: 468.75, poiCount: 25 },
+	{ rank: 2, regionName: '北京', sales: 1200000, orderCount: 2800, avgOrderValue: 428.57, poiCount: 20 },
+	{ rank: 3, regionName: '深圳', sales: 1100000, orderCount: 2600, avgOrderValue: 423.08, poiCount: 18 },
+	{ rank: 4, regionName: '广州', sales: 980000, orderCount: 2300, avgOrderValue: 426.09, poiCount: 15 },
+	{ rank: 5, regionName: '杭州', sales: 850000, orderCount: 2100, avgOrderValue: 404.76, poiCount: 12 },
+	{ rank: 6, regionName: '成都', sales: 780000, orderCount: 1900, avgOrderValue: 410.53, poiCount: 10 },
+];
 
-// 模拟地域销售排行数据
-const getMockRegionList = () => {
-	const regions = [
-		{ rank: 1, regionName: '上海', sales: 1500000, orderCount: 3200, avgOrderValue: 468.75, poiCount: 25 },
-		{ rank: 2, regionName: '北京', sales: 1200000, orderCount: 2800, avgOrderValue: 428.57, poiCount: 20 },
-		{ rank: 3, regionName: '深圳', sales: 1100000, orderCount: 2600, avgOrderValue: 423.08, poiCount: 18 },
-		{ rank: 4, regionName: '广州', sales: 980000, orderCount: 2300, avgOrderValue: 426.09, poiCount: 15 },
-		{ rank: 5, regionName: '杭州', sales: 850000, orderCount: 2100, avgOrderValue: 404.76, poiCount: 12 },
-		{ rank: 6, regionName: '成都', sales: 780000, orderCount: 1900, avgOrderValue: 410.53, poiCount: 10 },
-		{ rank: 7, regionName: '武汉', sales: 650000, orderCount: 1600, avgOrderValue: 406.25, poiCount: 8 },
-		{ rank: 8, regionName: '西安', sales: 520000, orderCount: 1300, avgOrderValue: 400.0, poiCount: 6 },
-		{ rank: 9, regionName: '南京', sales: 480000, orderCount: 1200, avgOrderValue: 400.0, poiCount: 5 },
-		{ rank: 10, regionName: '重庆', sales: 450000, orderCount: 1100, avgOrderValue: 409.09, poiCount: 7 },
-	];
-	return regions;
-};
-
-const handleSearch = () => {
-	// 使用模拟数据
-	regionList.value = getMockRegionList();
-	pagination.total = 50;
-	initRegionChart(getMockRegionDistribution());
-};
-
-const handleReset = () => {
-	searchParams.dateRange = [];
-	searchParams.regionLevel = 'province';
-	pagination.currentPage = 1;
-	pagination.pageSize = 10;
-};
-
-const handleSizeChange = (size: number) => {
-	pagination.pageSize = size;
-	handleSearch();
-};
-
-const handleCurrentChange = (current: number) => {
-	pagination.currentPage = current;
-	handleSearch();
-};
+const handleSearch = () => { regionList.value = getMockRegionList(); pagination.total = regionList.value.length; pagination.currentPage = 1; initRegionChart(getMockRegionDistribution()); };
+const handleReset = () => { searchParams.dateRange = []; searchParams.regionLevel = 'province'; pagination.currentPage = 1; pagination.pageSize = 10; handleSearch(); };
+const handleSizeChange = (size: number) => { pagination.pageSize = size; pagination.currentPage = 1; };
+const handleCurrentChange = (current: number) => { pagination.currentPage = current; };
 
 const initRegionChart = (regionDistribution: any[]) => {
 	if (!regionChartRef.value) return;
-
-	if (regionChart) {
-		regionChart.dispose();
-	}
-
+	if (regionChart) regionChart.dispose();
 	regionChart = echarts.init(regionChartRef.value);
-
-	const option = {
-		tooltip: {
-			trigger: 'item',
-			formatter: '{a} <br/>{b}: {c} ({d}%)',
-		},
-		legend: {
-			orient: 'vertical',
-			left: 'left',
-			data: regionDistribution.map((item) => item.regionName),
-		},
-		series: [
-			{
-				name: '地域销售',
-				type: 'pie',
-				radius: '50%',
-				data: regionDistribution.map((item) => ({
-					value: item.sales,
-					name: item.regionName,
-				})),
-				emphasis: {
-					itemStyle: {
-						shadowBlur: 10,
-						shadowOffsetX: 0,
-						shadowColor: 'rgba(0, 0, 0, 0.5)',
-					},
-				},
-			},
-		],
-	};
-
-	regionChart.setOption(option);
+	regionChart.setOption({
+		tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
+		legend: { orient: 'vertical', left: 'left', data: regionDistribution.map((item) => item.regionName) },
+		series: [{ name: '地域销售', type: 'pie', radius: regionDistribution.length <= 1 ? '35%' : '50%', data: regionDistribution.map((item) => ({ value: item.sales, name: item.regionName })), emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }],
+	});
 };
 
-onMounted(() => {
-	handleSearch();
-
-	window.addEventListener('resize', () => {
-		regionChart?.resize();
-	});
-});
+onMounted(() => { handleSearch(); window.addEventListener('resize', () => regionChart?.resize()); });
 </script>
 
 <style scoped>
-.trade-operation-analysis-region {
-	padding: 20px;
-}
-
-.card-header {
-	font-size: 16px;
-	font-weight: bold;
-}
-
-.search-container {
-	margin-bottom: 20px;
-}
-
-.search-form {
-	display: flex;
-	align-items: center;
-}
-
-.chart-container {
-	margin: 20px 0;
-}
-
-.chart {
-	width: 100%;
-	height: 400px;
-}
-
-.region-ranking {
-	margin-top: 20px;
-}
-
-.pagination-container {
-	margin-top: 20px;
-	display: flex;
-	justify-content: flex-end;
-}
+.trade-operation-analysis-region { padding: 20px; }
+.card-header { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 600; }
+.search-container { margin-bottom: 16px; }
+.search-form { display: flex; align-items: center; flex-wrap: wrap; }
+.search-form :deep(.el-form-item) { margin-right: 12px; margin-bottom: 12px; }
+.trade-operation-analysis-region :deep(.el-select) { width: 180px; }
+.trade-operation-analysis-region :deep(.el-select__wrapper),
+.trade-operation-analysis-region :deep(.el-select__selected-item),
+.trade-operation-analysis-region :deep(.el-select__placeholder) { color: #303133; }
+.chart-container { margin: 0 0 20px; }
+.chart { width: 100%; height: 400px; }
+.region-ranking { margin-top: 20px; }
+.pagination-container { margin-top: 16px; display: flex; justify-content: flex-end; }
 </style>
diff --git a/src/views/trade/operation/analysis/shop/index.vue b/src/views/trade/operation/analysis/shop/index.vue
index 3433cb3..e850064 100644
--- a/src/views/trade/operation/analysis/shop/index.vue
+++ b/src/views/trade/operation/analysis/shop/index.vue
@@ -1,89 +1,58 @@
 <template>
 	<div class="trade-operation-analysis-shop">
 		<el-card shadow="hover">
-			<template #header>
-				<div class="card-header">
-					<span>店铺评分监控</span>
-				</div>
-			</template>
-			<!-- 评分趋势 -->
+			<template #header><div class="card-header"><span>店铺评分监控</span></div></template>
 			<div class="chart-container">
 				<el-card>
-					<template #header>
-						<div class="card-header">评分趋势</div>
-					</template>
+					<template #header><div class="card-header">评分趋势 - {{ selectedShopName }}</div></template>
 					<div ref="scoreChartRef" class="chart"></div>
 				</el-card>
 			</div>
-			<!-- 搜索条件 -->
-			<div class="search-container">
-				<el-form :model="searchParams" :inline="true" class="search-form">
-					<el-form-item label="时间范围">
-						<el-date-picker
-							v-model="searchParams.dateRange"
-							type="daterange"
-							range-separator="至"
-							start-placeholder="开始日期"
-							end-placeholder="结束日期"
-							value-format="YYYY-MM-DD"
-						/>
-					</el-form-item>
-					<el-form-item label="时间粒度">
-						<el-select v-model="searchParams.granularity" placeholder="选择时间粒度">
-							<el-option label="日" value="day" />
-							<el-option label="周" value="week" />
-							<el-option label="月" value="month" />
-						</el-select>
-					</el-form-item>
-					<el-form-item>
-						<el-button type="primary" @click="handleSearch">查询</el-button>
-						<el-button @click="handleReset">重置</el-button>
-					</el-form-item>
-				</el-form>
-			</div>
-			<!-- 评分设置 -->
-			<div class="score-setting">
+			<div class="shop-list">
 				<el-card>
-					<template #header>
-						<div class="card-header">评分预警设置</div>
-					</template>
-					<el-form :model="scoreSettings" label-width="120px">
-						<el-form-item label="口碑分预警阈值">
-							<el-input-number v-model="scoreSettings.reputationThreshold" :min="0" :max="5" :step="0.1" />
-						</el-form-item>
-						<el-form-item label="体验分预警阈值">
-							<el-input-number v-model="scoreSettings.experienceThreshold" :min="0" :max="5" :step="0.1" />
-						</el-form-item>
-						<el-form-item>
-							<el-button type="primary" @click="handleSaveSettings">保存设置</el-button>
-						</el-form-item>
-					</el-form>
+					<template #header><div class="card-header">店铺列表</div></template>
+					<div class="search-container">
+						<el-form :model="searchParams" :inline="true" class="search-form">
+							<el-form-item label="店铺搜索">
+								<el-input
+									v-model="searchParams.shopKeyword"
+									placeholder="请输入店铺名称或店铺ID"
+									clearable
+									@keyup.enter="handleSearch"
+								/>
+							</el-form-item>
+							<el-form-item label="时间范围"><el-date-picker v-model="searchParams.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" :shortcuts="dateShortcuts" /></el-form-item>
+							<el-form-item label="时间粒度">
+								<el-radio-group v-model="searchParams.granularity" class="granularity-group">
+									<el-radio-button v-for="option in granularityOptions" :key="option.value" :label="option.value">
+										{{ option.label }}
+									</el-radio-button>
+								</el-radio-group>
+							</el-form-item>
+							<el-form-item><el-button type="primary" @click="handleSearch">查询</el-button><el-button @click="handleReset">重置</el-button></el-form-item>
+						</el-form>
+					</div>
+					<el-table :data="pagedShopList" style="width: 100%" highlight-current-row @row-click="handleShopClick">
+						<el-table-column prop="id" label="店铺ID" width="100" />
+						<el-table-column prop="name" label="店铺名称" />
+						<el-table-column prop="type" label="店铺类型"><template #default="scope"><el-tag size="small">{{ scope.row.type === 'physical' ? '线下店铺' : '线上店铺' }}</el-tag></template></el-table-column>
+						<el-table-column prop="status" label="状态"><template #default="scope"><el-tag size="small" :type="scope.row.status === 'active' ? 'success' : 'danger'">{{ scope.row.status === 'active' ? '营业中' : '已关闭' }}</el-tag></template></el-table-column>
+						<el-table-column label="操作" width="120"><template #default="scope"><el-button type="primary" size="small" @click.stop="handleShopSelect(scope.row.id)">查看监控</el-button></template></el-table-column>
+					</el-table>
+					<div class="pagination-container"><el-pagination v-model:current-page="shopPagination.currentPage" v-model:page-size="shopPagination.pageSize" :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="shopPagination.total" @size-change="handleShopPageSizeChange" @current-change="handleShopPageChange" /></div>
 				</el-card>
 			</div>
-			<!-- 评分详情 -->
+			<div class="score-setting"><el-card><template #header><div class="card-header">评分预警设置 - {{ selectedShopName }}</div></template><el-form :model="scoreSettings" label-width="120px"><el-form-item label="口碑分预警阈值"><el-input-number v-model="scoreSettings.reputationThreshold" :min="0" :max="5" :step="0.1" /></el-form-item><el-form-item label="体验分预警阈值"><el-input-number v-model="scoreSettings.experienceThreshold" :min="0" :max="5" :step="0.1" /></el-form-item><el-form-item><el-button type="primary" @click="handleSaveSettings">保存设置</el-button></el-form-item></el-form></el-card></div>
 			<div class="score-detail">
 				<el-card>
-					<template #header>
-						<div class="card-header">评分详情</div>
-					</template>
-					<el-table :data="scoreDetail" style="width: 100%">
+					<template #header><div class="card-header">评分详情 - {{ selectedShopName }}</div></template>
+					<el-table :data="pagedScoreDetail" style="width: 100%">
 						<el-table-column prop="date" label="日期" />
-						<el-table-column prop="reputationScore" label="口碑分">
-							<template #default="scope">
-								<div class="score-item" :class="{ warning: scope.row.reputationScore < scoreSettings.reputationThreshold }">
-									{{ scope.row.reputationScore }}
-								</div>
-							</template>
-						</el-table-column>
-						<el-table-column prop="experienceScore" label="体验分">
-							<template #default="scope">
-								<div class="score-item" :class="{ warning: scope.row.experienceScore < scoreSettings.experienceThreshold }">
-									{{ scope.row.experienceScore }}
-								</div>
-							</template>
-						</el-table-column>
+						<el-table-column prop="reputationScore" label="口碑分"><template #default="scope"><div class="score-item" :class="{ warning: scope.row.reputationScore < scoreSettings.reputationThreshold }">{{ scope.row.reputationScore }}</div></template></el-table-column>
+						<el-table-column prop="experienceScore" label="体验分"><template #default="scope"><div class="score-item" :class="{ warning: scope.row.experienceScore < scoreSettings.experienceThreshold }">{{ scope.row.experienceScore }}</div></template></el-table-column>
 						<el-table-column prop="commentCount" label="评价数量" />
 					</el-table>
+					<div class="pagination-container"><el-pagination v-model:current-page="detailPagination.currentPage" v-model:page-size="detailPagination.pageSize" :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="detailPagination.total" @size-change="handleDetailPageSizeChange" @current-change="handleDetailPageChange" /></div>
 				</el-card>
 			</div>
 		</el-card>
@@ -91,179 +60,195 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue';
+import { computed, onMounted, reactive, ref, watch } from 'vue';
 import * as echarts from 'echarts';
-
-const searchParams = reactive({
-	dateRange: [],
-	granularity: 'day',
-});
-
-const scoreSettings = reactive({
-	reputationThreshold: 4.0,
-	experienceThreshold: 4.2,
-});
-
-interface ScoreDetail {
-	date: string;
-	reputationScore: string;
-	experienceScore: string;
-	commentCount: number;
-}
-
+interface Shop { id: string; name: string; type: string; status: string }
+interface ScoreDetail { date: string; reputationScore: number; experienceScore: number; commentCount: number }
+const granularityOptions = [
+	{ label: '小时', value: 'hour' },
+	{ label: '日', value: 'day' },
+	{ label: '周', value: 'week' },
+	{ label: '月', value: 'month' },
+	{ label: '季度', value: 'quarter' },
+	{ label: '年', value: 'year' },
+];
+const searchParams = reactive({ shopId: 'all', shopKeyword: '', dateRange: [], granularity: 'day' });
+const dateShortcuts = [{ text: '最近7天', value: () => { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); return [start, end]; } }, { text: '最近30天', value: () => { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); return [start, end]; } }, { text: '最近90天', value: () => { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); return [start, end]; } }, { text: '今年', value: () => { const end = new Date(); const start = new Date(new Date().getFullYear(), 0, 1); return [start, end]; } }, { text: '去年', value: () => { const end = new Date(new Date().getFullYear() - 1, 11, 31); const start = new Date(new Date().getFullYear() - 1, 0, 1); return [start, end]; } }];
+const scoreSettings = reactive({ reputationThreshold: 4.0, experienceThreshold: 4.2 });
+const shopList = ref<Shop[]>([]);
 const scoreDetail = ref<ScoreDetail[]>([]);
-
+const filteredShopList = computed(() => {
+	const keyword = searchParams.shopKeyword.trim().toLowerCase();
+	if (!keyword) return shopList.value;
+	return shopList.value.filter((shop) => shop.name.toLowerCase().includes(keyword) || String(shop.id).toLowerCase().includes(keyword));
+});
+const shopPagination = reactive({ currentPage: 1, pageSize: 5, total: 0 });
+const detailPagination = reactive({ currentPage: 1, pageSize: 5, total: 0 });
+const pagedShopList = computed(() =>
+	filteredShopList.value.slice((shopPagination.currentPage - 1) * shopPagination.pageSize, shopPagination.currentPage * shopPagination.pageSize)
+);
+const pagedScoreDetail = computed(() => scoreDetail.value.slice((detailPagination.currentPage - 1) * detailPagination.pageSize, detailPagination.currentPage * detailPagination.pageSize));
 const scoreChartRef = ref();
 let scoreChart: echarts.ECharts | null = null;
-
-// 模拟评分趋势数据
-const getMockScoreTrend = () => {
-	const dates = ['1月', '2月', '3月', '4月', '5月', '6月'];
-	return dates.map((date) => ({
+const getMockShopList = () => [{ id: '1', name: '旗舰店', type: 'online', status: 'active' }, { id: '2', name: '华东直营网点', type: 'physical', status: 'active' }, { id: '3', name: '华南直营店', type: 'physical', status: 'active' }, { id: '4', name: '品牌商城', type: 'online', status: 'active' }, { id: '5', name: '北区体验店', type: 'physical', status: 'closed' }];
+const selectedShopName = computed(() => { if (searchParams.shopId === 'all') return '全部店铺'; const shop = shopList.value.find((item) => String(item.id) === searchParams.shopId); return shop?.name || '未知店铺'; });
+const DAY_IN_MS = 24 * 60 * 60 * 1000;
+const toDate = (value?: string | Date) => {
+	if (!value) return new Date();
+	return value instanceof Date ? new Date(value.getTime()) : new Date(`${value}T00:00:00`);
+};
+const formatDate = (date: Date) => {
+	const year = date.getFullYear();
+	const month = `${date.getMonth() + 1}`.padStart(2, '0');
+	const day = `${date.getDate()}`.padStart(2, '0');
+	return `${year}-${month}-${day}`;
+};
+const getDateRange = () => {
+	if (Array.isArray(searchParams.dateRange) && searchParams.dateRange.length === 2) {
+		const [start, end] = searchParams.dateRange as Array<string | Date>;
+		return { start: toDate(start), end: toDate(end) };
+	}
+	const end = new Date();
+	const start = new Date(end.getTime() - 6 * DAY_IN_MS);
+	return { start, end };
+};
+const getWeekLabel = (date: Date) => {
+	const firstDay = new Date(date.getFullYear(), 0, 1);
+	const dayOffset = Math.floor((date.getTime() - firstDay.getTime()) / DAY_IN_MS);
+	return `${date.getFullYear()}年第${Math.floor(dayOffset / 7) + 1}周`;
+};
+const getQuarterLabel = (date: Date) => `${date.getFullYear()}年Q${Math.floor(date.getMonth() / 3) + 1}`;
+const buildTrendLabels = () => {
+	const { start, end } = getDateRange();
+	const labels: string[] = [];
+	const cursor = new Date(start.getTime());
+	if (searchParams.granularity === 'hour') {
+		return Array.from({ length: 24 }, (_, index) => `${index}:00`);
+	}
+	if (searchParams.granularity === 'day') {
+		while (cursor <= end) {
+			labels.push(formatDate(cursor));
+			cursor.setDate(cursor.getDate() + 1);
+		}
+		return labels;
+	}
+	if (searchParams.granularity === 'week') {
+		while (cursor <= end) {
+			labels.push(getWeekLabel(cursor));
+			cursor.setDate(cursor.getDate() + 7);
+		}
+		return [...new Set(labels)];
+	}
+	if (searchParams.granularity === 'month') {
+		cursor.setDate(1);
+		while (cursor <= end) {
+			labels.push(`${cursor.getFullYear()}-${`${cursor.getMonth() + 1}`.padStart(2, '0')}`);
+			cursor.setMonth(cursor.getMonth() + 1);
+		}
+		return labels;
+	}
+	if (searchParams.granularity === 'quarter') {
+		cursor.setMonth(Math.floor(cursor.getMonth() / 3) * 3, 1);
+		while (cursor <= end) {
+			labels.push(getQuarterLabel(cursor));
+			cursor.setMonth(cursor.getMonth() + 3);
+		}
+		return [...new Set(labels)];
+	}
+	cursor.setMonth(0, 1);
+	while (cursor <= end) {
+		labels.push(`${cursor.getFullYear()}年`);
+		cursor.setFullYear(cursor.getFullYear() + 1);
+	}
+	return [...new Set(labels)];
+};
+const getShopSeed = (shopId: string) => (shopId && shopId !== 'all' ? Number(shopId) : 0);
+const getMockScoreTrend = (shopId: string) => {
+	const labels = buildTrendLabels();
+	const seed = getShopSeed(shopId);
+	const baseReputation = 4.55 - seed * 0.08;
+	const baseExperience = 4.62 - seed * 0.06;
+	return labels.map((date, index) => ({
 		date,
-		reputationScore: 3.8 + Math.random() * 0.7,
-		experienceScore: 4.0 + Math.random() * 0.5,
+		reputationScore: Number(Math.min(5, Math.max(3.2, baseReputation + Math.sin(index + seed) * 0.18 + index * 0.01)).toFixed(2)),
+		experienceScore: Number(Math.min(5, Math.max(3.3, baseExperience + Math.cos(index + seed) * 0.16 + index * 0.008)).toFixed(2)),
 	}));
 };
-
-// 模拟评分详情数据
-const getMockScoreDetail = () => {
-	const dates = ['2024-01-01', '2024-01-02', '2024-01-03', '2024-01-04', '2024-01-05'];
-	return dates.map((date) => ({
-		date,
-		reputationScore: (3.8 + Math.random() * 0.7).toFixed(1),
-		experienceScore: (4.0 + Math.random() * 0.5).toFixed(1),
-		commentCount: 100 + Math.floor(Math.random() * 200),
+const getMockScoreDetail = (shopId: string) => {
+	const trend = getMockScoreTrend(shopId);
+	return trend.map((item, index) => ({
+		date: item.date,
+		reputationScore: item.reputationScore,
+		experienceScore: item.experienceScore,
+		commentCount: 120 + getShopSeed(shopId) * 18 + index * 15,
 	}));
 };
-
+const syncSelectedShop = () => {
+	if (searchParams.shopId === 'all') return;
+	const hasSelectedShop = filteredShopList.value.some((shop) => String(shop.id) === searchParams.shopId);
+	if (!hasSelectedShop) {
+		searchParams.shopId = 'all';
+	}
+};
 const handleSearch = () => {
-	// 使用模拟数据
-	scoreDetail.value = getMockScoreDetail();
-	initScoreChart(getMockScoreTrend());
+	shopPagination.currentPage = 1;
+	detailPagination.currentPage = 1;
+	syncSelectedShop();
+	shopPagination.total = filteredShopList.value.length;
+	scoreDetail.value = getMockScoreDetail(searchParams.shopId);
+	detailPagination.total = scoreDetail.value.length;
+	initScoreChart(getMockScoreTrend(searchParams.shopId));
 };
-
 const handleReset = () => {
+	searchParams.shopId = 'all';
+	searchParams.shopKeyword = '';
 	searchParams.dateRange = [];
 	searchParams.granularity = 'day';
-};
-
-const handleSaveSettings = () => {
-	// 保存评分预警设置
-	// 这里可以调用API保存设置
-};
-
-const initScoreChart = (scoreTrend: any[]) => {
-	if (!scoreChartRef.value) return;
-
-	if (scoreChart) {
-		scoreChart.dispose();
-	}
-
-	scoreChart = echarts.init(scoreChartRef.value);
-
-	const option = {
-		tooltip: {
-			trigger: 'axis',
-			axisPointer: {
-				type: 'cross',
-				label: {
-					backgroundColor: '#6a7985',
-				},
-			},
-		},
-		legend: {
-			data: ['口碑分', '体验分'],
-		},
-		grid: {
-			left: '3%',
-			right: '4%',
-			bottom: '3%',
-			containLabel: true,
-		},
-		xAxis: {
-			type: 'category',
-			boundaryGap: false,
-			data: scoreTrend.map((item) => item.date),
-		},
-		yAxis: {
-			type: 'value',
-			name: '评分',
-			min: 0,
-			max: 5,
-		},
-		series: [
-			{
-				name: '口碑分',
-				type: 'line',
-				data: scoreTrend.map((item) => item.reputationScore),
-				smooth: true,
-			},
-			{
-				name: '体验分',
-				type: 'line',
-				data: scoreTrend.map((item) => item.experienceScore),
-				smooth: true,
-			},
-		],
-	};
-
-	scoreChart.setOption(option);
-};
-
-onMounted(() => {
+	shopPagination.currentPage = 1;
+	detailPagination.currentPage = 1;
 	handleSearch();
-
-	window.addEventListener('resize', () => {
-		scoreChart?.resize();
-	});
-});
+};
+const handleShopClick = (shop: Shop) => {
+	searchParams.shopId = String(shop.id);
+	handleSearch();
+};
+const handleShopSelect = (shopId: string) => {
+	searchParams.shopId = String(shopId);
+	handleSearch();
+};
+const handleShopPageSizeChange = (size: number) => { shopPagination.pageSize = size; shopPagination.currentPage = 1; };
+const handleShopPageChange = (page: number) => { shopPagination.currentPage = page; };
+const handleDetailPageSizeChange = (size: number) => { detailPagination.pageSize = size; detailPagination.currentPage = 1; };
+const handleDetailPageChange = (page: number) => { detailPagination.currentPage = page; };
+const handleSaveSettings = () => {};
+const initScoreChart = (scoreTrend: Array<{ date: string; reputationScore: number; experienceScore: number }>) => { if (!scoreChartRef.value) return; if (scoreChart) scoreChart.dispose(); scoreChart = echarts.init(scoreChartRef.value); const isSingle = scoreTrend.length <= 1; scoreChart.setOption({ tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, legend: { data: ['口碑分', '体验分'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', boundaryGap: isSingle, data: scoreTrend.map((item) => item.date) }, yAxis: { type: 'value', name: '评分', min: 0, max: 5 }, series: [{ name: '口碑分', type: 'line', data: scoreTrend.map((item) => item.reputationScore), smooth: true, showSymbol: true, symbolSize: isSingle ? 10 : 6 }, { name: '体验分', type: 'line', data: scoreTrend.map((item) => item.experienceScore), smooth: true, showSymbol: true, symbolSize: isSingle ? 10 : 6 }] }); };
+watch(
+	() => filteredShopList.value.length,
+	(length) => {
+		shopPagination.total = length;
+		const maxPage = Math.max(1, Math.ceil(length / shopPagination.pageSize));
+		if (shopPagination.currentPage > maxPage) {
+			shopPagination.currentPage = maxPage;
+		}
+	}
+);
+watch(() => searchParams.granularity, () => handleSearch());
+onMounted(() => { shopList.value = getMockShopList(); shopPagination.total = shopList.value.length; handleSearch(); window.addEventListener('resize', () => scoreChart?.resize()); });
 </script>
 
 <style scoped>
-.trade-operation-analysis-shop {
-	padding: 20px;
-}
-
-.card-header {
-	font-size: 16px;
-	font-weight: bold;
-}
-
-.search-container {
-	margin-bottom: 20px;
-}
-
-.search-form {
-	display: flex;
-	align-items: center;
-}
-
-.score-setting {
-	margin-bottom: 20px;
-}
-
-.chart-container {
-	margin: 20px 0;
-}
-
-.chart {
-	width: 100%;
-	height: 400px;
-}
-
-.score-detail {
-	margin-top: 20px;
-}
-
-.score-item {
-	padding: 2px 8px;
-	border-radius: 10px;
-	display: inline-block;
-}
-
-.score-item.warning {
-	background-color: #fde2e2;
-	color: #f56c6c;
-}
+.trade-operation-analysis-shop { padding: 20px; }
+.card-header { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 600; }
+.search-container { margin-bottom: 16px; }
+.search-form { display: flex; align-items: center; flex-wrap: wrap; }
+.search-form :deep(.el-form-item) { margin-right: 12px; margin-bottom: 12px; }
+.granularity-group { flex-wrap: wrap; }
+.shop-list { margin-bottom: 20px; }
+.score-setting { margin-bottom: 20px; }
+.chart-container { margin: 0 0 20px; }
+.chart { width: 100%; height: 400px; }
+.score-detail { margin-top: 20px; }
+.score-item { padding: 2px 8px; border-radius: 10px; display: inline-block; }
+.score-item.warning { background-color: #fde2e2; color: #f56c6c; }
+.pagination-container { margin-top: 16px; display: flex; justify-content: flex-end; }
 </style>
diff --git a/src/views/trade/operation/distribution/effect/index.vue b/src/views/trade/operation/distribution/effect/index.vue
index ea87ddb..0a60972 100644
--- a/src/views/trade/operation/distribution/effect/index.vue
+++ b/src/views/trade/operation/distribution/effect/index.vue
@@ -6,29 +6,6 @@
 					<span>分销效果核算</span>
 				</div>
 			</template>
-			<!-- 搜索条件 -->
-			<div class="search-container">
-				<el-form :model="searchParams" :inline="true" class="search-form">
-					<el-form-item label="时间范围">
-						<el-date-picker
-							v-model="searchParams.dateRange"
-							type="daterange"
-							range-separator="至"
-							start-placeholder="开始日期"
-							end-placeholder="结束日期"
-							value-format="YYYY-MM-DD"
-						/>
-					</el-form-item>
-					<el-form-item label="达人名称">
-						<el-input v-model="searchParams.anchorName" placeholder="请输入达人名称" clearable />
-					</el-form-item>
-					<el-form-item>
-						<el-button type="primary" @click="handleSearch">查询</el-button>
-						<el-button @click="handleReset">重置</el-button>
-					</el-form-item>
-				</el-form>
-			</div>
-			<!-- 分销效果趋势 -->
 			<div class="chart-container">
 				<el-card>
 					<template #header>
@@ -37,32 +14,25 @@
 					<div ref="effectChartRef" class="chart"></div>
 				</el-card>
 			</div>
-			<!-- 核心指标 -->
 			<div class="stats-cards">
-				<el-card class="stats-card">
-					<div class="stats-card-title">总销售额</div>
-					<div class="stats-card-value">{{ statsData.totalSales || 0 }}</div>
-				</el-card>
-				<el-card class="stats-card">
-					<div class="stats-card-title">总佣金金额</div>
-					<div class="stats-card-value">{{ statsData.totalCommission || 0 }}</div>
-				</el-card>
-				<el-card class="stats-card">
-					<div class="stats-card-title">平均佣金率</div>
-					<div class="stats-card-value">{{ statsData.avgCommissionRate || 0 }}%</div>
-				</el-card>
-				<el-card class="stats-card">
-					<div class="stats-card-title">达人数量</div>
-					<div class="stats-card-value">{{ statsData.anchorCount || 0 }}</div>
-				</el-card>
+				<el-card class="stats-card"><div class="stats-card-title">总销售额</div><div class="stats-card-value">{{ statsData.totalSales || 0 }}</div></el-card>
+				<el-card class="stats-card"><div class="stats-card-title">总佣金金额</div><div class="stats-card-value">{{ statsData.totalCommission || 0 }}</div></el-card>
+				<el-card class="stats-card"><div class="stats-card-title">平均佣金率</div><div class="stats-card-value">{{ statsData.avgCommissionRate || 0 }}%</div></el-card>
+				<el-card class="stats-card"><div class="stats-card-title">达人数量</div><div class="stats-card-value">{{ statsData.anchorCount || 0 }}</div></el-card>
 			</div>
-			<!-- 达人推广效果 -->
 			<div class="anchor-effect">
 				<el-card>
-					<template #header>
-						<div class="card-header">达人推广效果</div>
-					</template>
-					<el-table :data="anchorList" style="width: 100%">
+					<template #header><div class="card-header">达人推广效果</div></template>
+					<div class="search-container">
+						<el-form :model="searchParams" :inline="true" class="search-form">
+							<el-form-item label="时间范围">
+								<el-date-picker v-model="searchParams.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" />
+							</el-form-item>
+							<el-form-item label="达人名称"><el-input v-model="searchParams.anchorName" placeholder="请输入达人名称" clearable /></el-form-item>
+							<el-form-item><el-button type="primary" @click="handleSearch">查询</el-button><el-button @click="handleReset">重置</el-button></el-form-item>
+						</el-form>
+					</div>
+					<el-table :data="pagedAnchorList" style="width: 100%">
 						<el-table-column prop="rank" label="排名" width="80" />
 						<el-table-column prop="anchorName" label="达人名称" />
 						<el-table-column prop="sales" label="销售额" />
@@ -72,15 +42,7 @@
 						<el-table-column prop="conversionRate" label="转化率" />
 					</el-table>
 					<div class="pagination-container">
-						<el-pagination
-							v-model:current-page="pagination.currentPage"
-							v-model:page-size="pagination.pageSize"
-							:page-sizes="[10, 20, 50, 100]"
-							layout="total, sizes, prev, pager, next, jumper"
-							:total="pagination.total"
-							@size-change="handleSizeChange"
-							@current-change="handleCurrentChange"
-						/>
+						<el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
 					</div>
 				</el-card>
 			</div>
@@ -89,223 +51,74 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue';
+import { computed, onMounted, reactive, ref } from 'vue';
 import * as echarts from 'echarts';
 
-const searchParams = reactive({
-	dateRange: [],
-	anchorName: '',
-});
-
-const statsData = reactive({
-	totalSales: 0,
-	totalCommission: 0,
-	avgCommissionRate: 0,
-	anchorCount: 0,
-});
-
-interface AnchorItem {
-	rank: number;
-	anchorName: string;
-	sales: number;
-	commission: number;
-	commissionRate: number;
-	orderCount: number;
-	conversionRate: number;
-}
-
+const searchParams = reactive({ dateRange: [], anchorName: '' });
+const statsData = reactive({ totalSales: 0, totalCommission: 0, avgCommissionRate: 0, anchorCount: 0 });
+interface AnchorItem { rank: number; anchorName: string; sales: number; commission: number; commissionRate: number; orderCount: number; conversionRate: number }
 const anchorList = ref<AnchorItem[]>([]);
-
-const pagination = reactive({
-	currentPage: 1,
-	pageSize: 10,
-	total: 0,
-});
-
+const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 });
+const pagedAnchorList = computed(() => anchorList.value.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize));
 const effectChartRef = ref();
 let effectChart: echarts.ECharts | null = null;
 
-// 模拟分销效果趋势数据
 const getMockEffectTrend = () => {
-	const dates = ['1月', '2月', '3月', '4月', '5月', '6月'];
-	return dates.map((date) => ({
-		date,
-		sales: 500000 + Math.random() * 1000000,
-		commission: 50000 + Math.random() * 200000,
-	}));
-};
-
-// 模拟达人推广效果数据
-const getMockAnchorList = () => {
-	const anchors: AnchorItem[] = [];
-	for (let i = 1; i <= 20; i++) {
-		anchors.push({
-			rank: i,
-			anchorName: `达人${i}`,
-			sales: 100000 + Math.random() * 900000,
-			commission: 10000 + Math.random() * 180000,
-			commissionRate: 10 + Math.random() * 10,
-			orderCount: 100 + Math.floor(Math.random() * 900),
-			conversionRate: parseFloat((1 + Math.random() * 9).toFixed(2)),
-		});
-	}
-	return anchors;
+	const dates = searchParams.anchorName ? ['本期'] : ['1月', '2月', '3月', '4月', '5月', '6月'];
+	return dates.map((date) => ({ date, sales: 500000 + Math.random() * 1000000, commission: 50000 + Math.random() * 200000 }));
 };
+const getMockAnchorList = () => Array.from({ length: 24 }, (_, i) => ({ rank: i + 1, anchorName: `达人${i + 1}`, sales: 100000 + Math.random() * 900000, commission: 10000 + Math.random() * 180000, commissionRate: +(10 + Math.random() * 10).toFixed(2), orderCount: 100 + Math.floor(Math.random() * 900), conversionRate: +(1 + Math.random() * 9).toFixed(2) }));
 
 const handleSearch = () => {
-	// 使用模拟数据
 	statsData.totalSales = 5000000 + Math.random() * 5000000;
 	statsData.totalCommission = 500000 + Math.random() * 500000;
-	statsData.avgCommissionRate = 15 + Math.random() * 5;
+	statsData.avgCommissionRate = +(15 + Math.random() * 5).toFixed(2);
 	statsData.anchorCount = 50 + Math.floor(Math.random() * 50);
 	anchorList.value = getMockAnchorList();
-	pagination.total = 20;
+	pagination.total = anchorList.value.length;
+	pagination.currentPage = 1;
 	initEffectChart(getMockEffectTrend());
 };
-
-const handleReset = () => {
-	searchParams.dateRange = [];
-	searchParams.anchorName = '';
-	pagination.currentPage = 1;
-	pagination.pageSize = 10;
-};
-
-const handleSizeChange = (size: number) => {
-	pagination.pageSize = size;
-	handleSearch();
-};
-
-const handleCurrentChange = (current: number) => {
-	pagination.currentPage = current;
-	handleSearch();
-};
+const handleReset = () => { searchParams.dateRange = []; searchParams.anchorName = ''; pagination.currentPage = 1; pagination.pageSize = 10; handleSearch(); };
+const handleSizeChange = (size: number) => { pagination.pageSize = size; pagination.currentPage = 1; };
+const handleCurrentChange = (current: number) => { pagination.currentPage = current; };
 
 const initEffectChart = (effectTrend: any[]) => {
 	if (!effectChartRef.value) return;
-
-	if (effectChart) {
-		effectChart.dispose();
-	}
-
+	if (effectChart) effectChart.dispose();
 	effectChart = echarts.init(effectChartRef.value);
-
-	const option = {
-		tooltip: {
-			trigger: 'axis',
-			axisPointer: {
-				type: 'cross',
-				label: {
-					backgroundColor: '#6a7985',
-				},
-			},
-		},
-		legend: {
-			data: ['销售额', '佣金金额'],
-		},
-		grid: {
-			left: '3%',
-			right: '4%',
-			bottom: '3%',
-			containLabel: true,
-		},
-		xAxis: {
-			type: 'category',
-			boundaryGap: false,
-			data: effectTrend.map((item) => item.date),
-		},
-		yAxis: [
-			{
-				type: 'value',
-				name: '金额',
-				position: 'left',
-			},
-		],
+	const isSingle = effectTrend.length <= 1;
+	effectChart.setOption({
+		tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } },
+		legend: { data: ['销售额', '佣金金额'] },
+		grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+		xAxis: { type: 'category', boundaryGap: isSingle, data: effectTrend.map((item) => item.date) },
+		yAxis: [{ type: 'value', name: '金额', position: 'left' }],
 		series: [
-			{
-				name: '销售额',
-				type: 'line',
-				data: effectTrend.map((item) => item.sales),
-				smooth: true,
-			},
-			{
-				name: '佣金金额',
-				type: 'line',
-				data: effectTrend.map((item) => item.commission),
-				smooth: true,
-			},
+			{ name: '销售额', type: 'line', data: effectTrend.map((item) => item.sales), smooth: true, showSymbol: true, symbolSize: isSingle ? 10 : 6 },
+			{ name: '佣金金额', type: 'line', data: effectTrend.map((item) => item.commission), smooth: true, showSymbol: true, symbolSize: isSingle ? 10 : 6 },
 		],
-	};
-
-	effectChart.setOption(option);
+	});
 };
 
 onMounted(() => {
 	handleSearch();
-
-	window.addEventListener('resize', () => {
-		effectChart?.resize();
-	});
+	window.addEventListener('resize', () => effectChart?.resize());
 });
 </script>
 
 <style scoped>
-.trade-operation-distribution-effect {
-	padding: 20px;
-}
-
-.card-header {
-	font-size: 16px;
-	font-weight: bold;
-}
-
-.search-container {
-	margin-bottom: 20px;
-}
-
-.search-form {
-	display: flex;
-	align-items: center;
-}
-
-.stats-cards {
-	display: grid;
-	grid-template-columns: repeat(4, 1fr);
-	gap: 20px;
-	margin-bottom: 20px;
-}
-
-.stats-card {
-	text-align: center;
-	padding: 20px;
-}
-
-.stats-card-title {
-	font-size: 14px;
-	color: #606266;
-	margin-bottom: 10px;
-}
-
-.stats-card-value {
-	font-size: 24px;
-	font-weight: bold;
-}
-
-.anchor-effect {
-	margin-bottom: 20px;
-}
-
-.pagination-container {
-	margin-top: 20px;
-	display: flex;
-	justify-content: flex-end;
-}
-
-.chart-container {
-	margin: 20px 0;
-}
-
-.chart {
-	width: 100%;
-	height: 400px;
-}
+.trade-operation-distribution-effect { padding: 20px; }
+.card-header { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 600; }
+.search-container { margin-bottom: 16px; }
+.search-form { display: flex; align-items: center; flex-wrap: wrap; }
+.search-form :deep(.el-form-item) { margin-right: 12px; margin-bottom: 12px; }
+.stats-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; }
+.stats-card { text-align: center; padding: 20px; }
+.stats-card-title { font-size: 14px; color: #606266; margin-bottom: 10px; }
+.stats-card-value { font-size: 24px; font-weight: bold; }
+.anchor-effect { margin-bottom: 20px; }
+.pagination-container { margin-top: 16px; display: flex; justify-content: flex-end; }
+.chart-container { margin: 0 0 20px; }
+.chart { width: 100%; height: 400px; }
 </style>
diff --git a/src/views/trade/operation/distribution/order/index.vue b/src/views/trade/operation/distribution/order/index.vue
index c6ae71d..de7a775 100644
--- a/src/views/trade/operation/distribution/order/index.vue
+++ b/src/views/trade/operation/distribution/order/index.vue
@@ -1,85 +1,37 @@
 <template>
 	<div class="trade-operation-distribution-order">
 		<el-card shadow="hover">
-			<template #header>
-				<div class="card-header">
-					<span>分销订单查询</span>
-				</div>
-			</template>
-			<!-- 搜索条件 -->
-			<div class="search-container">
-				<el-form :model="searchParams" :inline="true" class="search-form">
-					<el-form-item label="订单类型">
-						<el-select v-model="searchParams.orderType" placeholder="选择订单类型">
-							<el-option label="全部" value="" />
-							<el-option label="快分销二创订单" value="quick_distribution" />
-							<el-option label="分销达人推广订单" value="anchor_promotion" />
-						</el-select>
-					</el-form-item>
-					<el-form-item label="订单号">
-						<el-input v-model="searchParams.orderNo" placeholder="请输入订单号" clearable />
-					</el-form-item>
-					<el-form-item label="达人名称">
-						<el-input v-model="searchParams.anchorName" placeholder="请输入达人名称" clearable />
-					</el-form-item>
-					<el-form-item label="时间范围">
-						<el-date-picker
-							v-model="searchParams.dateRange"
-							type="daterange"
-							range-separator="至"
-							start-placeholder="开始日期"
-							end-placeholder="结束日期"
-							value-format="YYYY-MM-DD"
-						/>
-					</el-form-item>
-					<el-form-item>
-						<el-button type="primary" @click="handleSearch">查询</el-button>
-						<el-button @click="handleReset">重置</el-button>
-					</el-form-item>
-				</el-form>
-			</div>
-			<!-- 订单列表 -->
+			<template #header><div class="card-header"><span>分销订单查询</span></div></template>
 			<div class="order-list">
-				<el-table :data="orderList" style="width: 100%">
-					<el-table-column prop="orderNo" label="订单号" />
-					<el-table-column prop="orderType" label="订单类型">
-						<template #default="scope">
-							<el-tag size="small">
-								{{ scope.row.orderType === 'quick_distribution' ? '快分销二创' : '达人推广' }}
-							</el-tag>
-						</template>
-					</el-table-column>
-					<el-table-column prop="anchorName" label="达人名称" />
-					<el-table-column prop="productName" label="商品名称" />
-					<el-table-column prop="amount" label="订单金额" />
-					<el-table-column prop="commission" label="佣金金额" />
-					<el-table-column prop="createTime" label="创建时间" />
-					<el-table-column label="操作">
-						<template #default="scope">
-							<el-button type="primary" size="small" @click="handleOrderDetail(scope.row.id)">查看详情</el-button>
-						</template>
-					</el-table-column>
-				</el-table>
-				<div class="pagination-container">
-					<el-pagination
-						v-model:current-page="pagination.currentPage"
-						v-model:page-size="pagination.pageSize"
-						:page-sizes="[10, 20, 50, 100]"
-						layout="total, sizes, prev, pager, next, jumper"
-						:total="pagination.total"
-						@size-change="handleSizeChange"
-						@current-change="handleCurrentChange"
-					/>
-				</div>
+				<el-card>
+					<template #header><div class="card-header">订单列表</div></template>
+					<div class="search-container">
+						<el-form :model="searchParams" :inline="true" class="search-form">
+							<el-form-item label="订单类型"><el-select v-model="selectedOrderType" placeholder="选择订单类型"><el-option v-for="option in orderTypeOptions" :key="option.value || 'all'" :label="option.label" :value="option.value" /></el-select></el-form-item>
+							<el-form-item label="订单号"><el-input v-model="searchParams.orderNo" placeholder="请输入订单号" clearable /></el-form-item>
+							<el-form-item label="达人名称"><el-input v-model="searchParams.anchorName" placeholder="请输入达人名称" clearable /></el-form-item>
+							<el-form-item label="时间范围"><el-date-picker v-model="searchParams.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" /></el-form-item>
+							<el-form-item><el-button type="primary" @click="handleSearch">查询</el-button><el-button @click="handleReset">重置</el-button></el-form-item>
+						</el-form>
+					</div>
+					<el-table :data="pagedOrderList" style="width: 100%">
+						<el-table-column prop="orderNo" label="订单号" />
+						<el-table-column prop="orderType" label="订单类型"><template #default="scope"><el-tag size="small">{{ scope.row.orderType === 'quick_distribution' ? '快分销二创' : '达人推广' }}</el-tag></template></el-table-column>
+						<el-table-column prop="anchorName" label="达人名称" />
+						<el-table-column prop="productName" label="商品名称" />
+						<el-table-column prop="amount" label="订单金额" />
+						<el-table-column prop="commission" label="佣金金额" />
+						<el-table-column prop="createTime" label="创建时间" />
+						<el-table-column label="操作"><template #default="scope"><el-button type="primary" size="small" @click="handleOrderDetail(scope.row.id)">查看详情</el-button></template></el-table-column>
+					</el-table>
+					<div class="pagination-container"><el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" /></div>
+				</el-card>
 			</div>
-			<!-- 订单详情对话框 -->
 			<el-dialog v-model="dialogVisible" title="订单详情" width="80%">
 				<div v-if="orderDetail" class="order-detail">
 					<el-descriptions :column="2" border>
 						<el-descriptions-item label="订单号">{{ orderDetail.orderNo }}</el-descriptions-item>
-						<el-descriptions-item label="订单类型">{{
-							orderDetail.orderType === 'quick_distribution' ? '快分销二创' : '达人推广'
-						}}</el-descriptions-item>
+						<el-descriptions-item label="订单类型">{{ orderDetail.orderType === 'quick_distribution' ? '快分销二创' : '达人推广' }}</el-descriptions-item>
 						<el-descriptions-item label="达人名称">{{ orderDetail.anchorName }}</el-descriptions-item>
 						<el-descriptions-item label="订单金额">{{ orderDetail.amount }}</el-descriptions-item>
 						<el-descriptions-item label="佣金金额">{{ orderDetail.commission }}</el-descriptions-item>
@@ -87,27 +39,8 @@
 						<el-descriptions-item label="创建时间">{{ orderDetail.createTime }}</el-descriptions-item>
 						<el-descriptions-item label="状态">{{ orderDetail.status }}</el-descriptions-item>
 					</el-descriptions>
-					<!-- 商品信息 -->
-					<div class="detail-section">
-						<h3>商品信息</h3>
-						<el-table :data="orderDetail.products" style="width: 100%">
-							<el-table-column prop="productName" label="商品名称" />
-							<el-table-column prop="sku" label="SKU" />
-							<el-table-column prop="quantity" label="数量" />
-							<el-table-column prop="price" label="单价" />
-							<el-table-column prop="commission" label="佣金" />
-						</el-table>
-					</div>
-					<!-- 推广信息 -->
-					<div class="detail-section">
-						<h3>推广信息</h3>
-						<el-descriptions :column="2" border>
-							<el-descriptions-item label="推广渠道">{{ orderDetail.promotion.channel }}</el-descriptions-item>
-							<el-descriptions-item label="推广时间">{{ orderDetail.promotion.time }}</el-descriptions-item>
-							<el-descriptions-item label="推广链接">{{ orderDetail.promotion.link }}</el-descriptions-item>
-							<el-descriptions-item label="推广效果">{{ orderDetail.promotion.effect }}</el-descriptions-item>
-						</el-descriptions>
-					</div>
+					<div class="detail-section"><h3>商品信息</h3><el-table :data="orderDetail.products" style="width: 100%"><el-table-column prop="productName" label="商品名称" /><el-table-column prop="sku" label="SKU" /><el-table-column prop="quantity" label="数量" /><el-table-column prop="price" label="单价" /><el-table-column prop="commission" label="佣金" /></el-table></div>
+					<div class="detail-section"><h3>推广信息</h3><el-descriptions :column="2" border><el-descriptions-item label="推广渠道">{{ orderDetail.promotion.channel }}</el-descriptions-item><el-descriptions-item label="推广时间">{{ orderDetail.promotion.time }}</el-descriptions-item><el-descriptions-item label="推广链接">{{ orderDetail.promotion.link }}</el-descriptions-item><el-descriptions-item label="推广效果">{{ orderDetail.promotion.effect }}</el-descriptions-item></el-descriptions></div>
 				</div>
 			</el-dialog>
 		</el-card>
@@ -115,193 +48,49 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue';
-
-const searchParams = reactive({
-	orderType: '',
-	orderNo: '',
-	anchorName: '',
-	dateRange: [],
+import { computed, onMounted, reactive, ref } from 'vue';
+const searchParams = reactive({ orderType: '', orderNo: '', anchorName: '', dateRange: [] });
+const orderTypeOptions = [
+	{ label: '全部', value: '' },
+	{ label: '快分销二创订单', value: 'quick_distribution' },
+	{ label: '分销达人推广订单', value: 'anchor_promotion' },
+];
+const selectedOrderType = computed({
+	get: () => searchParams.orderType,
+	set: (value: string) => {
+		searchParams.orderType = value;
+	},
 });
-
-interface OrderItem {
-	id: number;
-	orderNo: string;
-	orderType: string;
-	anchorName: string;
-	productName: string;
-	amount: number;
-	commission: number;
-	createTime: string;
-}
-
+interface OrderItem { id: number; orderNo: string; orderType: string; anchorName: string; productName: string; amount: number; commission: number; createTime: string }
 const orderList = ref<OrderItem[]>([]);
-
-const pagination = reactive({
-	currentPage: 1,
-	pageSize: 10,
-	total: 0,
-});
-
-interface OrderDetail {
-	orderNo: string;
-	orderType: string;
-	anchorName: string;
-	amount: number;
-	commission: number;
-	commissionRate: number;
-	createTime: string;
-	status: string;
-	products: {
-		productName: string;
-		sku: string;
-		quantity: number;
-		price: number;
-		commission: number;
-	}[];
-	promotion: {
-		channel: string;
-		time: string;
-		link: string;
-		effect: string;
-	};
-}
-
+const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 });
+const pagedOrderList = computed(() => orderList.value.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize));
+interface OrderDetail { orderNo: string; orderType: string; anchorName: string; amount: number; commission: number; commissionRate: number; createTime: string; status: string; products: { productName: string; sku: string; quantity: number; price: number; commission: number }[]; promotion: { channel: string; time: string; link: string; effect: string } }
 const dialogVisible = ref(false);
 const orderDetail = ref<OrderDetail | null>(null);
-
-// 模拟分销订单列表数据
-const getMockOrderList = () => {
-	const orderTypes = ['quick_distribution', 'anchor_promotion'];
-	const orders: OrderItem[] = [];
-	for (let i = 1; i <= 20; i++) {
-		orders.push({
-			id: i,
-			orderNo: `DO${Date.now() + i}`,
-			orderType: orderTypes[Math.floor(Math.random() * orderTypes.length)],
-			anchorName: `达人${i}`,
-			productName: `商品${i}`,
-			amount: 1000 + Math.random() * 9000,
-			commission: 100 + Math.random() * 900,
-			createTime: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toISOString(),
-		});
-	}
-	return orders;
-};
-
-// 模拟分销订单详情数据
-const getMockOrderDetail = (id: number) => {
-	return {
-		orderNo: `DO${Date.now() + id}`,
-		orderType: Math.random() > 0.5 ? 'quick_distribution' : 'anchor_promotion',
-		anchorName: `达人${id}`,
-		amount: 5000 + Math.random() * 5000,
-		commission: 500 + Math.random() * 500,
-		commissionRate: 10 + Math.random() * 10,
-		createTime: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(),
-		status: '已完成',
-		products: [
-			{
-				productName: '商品1',
-				sku: 'SKU001',
-				quantity: 2,
-				price: 1500,
-				commission: 300,
-			},
-			{
-				productName: '商品2',
-				sku: 'SKU002',
-				quantity: 1,
-				price: 2500,
-				commission: 500,
-			},
-		],
-		promotion: {
-			channel: '抖音',
-			time: new Date(Date.now() - 11 * 24 * 60 * 60 * 1000).toISOString(),
-			link: `https://example.com/promotion/${id}`,
-			effect: '良好',
-		},
-	};
-};
-
-const handleSearch = () => {
-	// 使用模拟数据
-	orderList.value = getMockOrderList();
-	pagination.total = 20;
-};
-
-const handleReset = () => {
-	searchParams.orderType = '';
-	searchParams.orderNo = '';
-	searchParams.anchorName = '';
-	searchParams.dateRange = [];
-	pagination.currentPage = 1;
-	pagination.pageSize = 10;
-};
-
-const handleSizeChange = (size: number) => {
-	pagination.pageSize = size;
-	handleSearch();
-};
-
-const handleCurrentChange = (current: number) => {
-	pagination.currentPage = current;
-	handleSearch();
-};
-
-const handleOrderDetail = (id: number) => {
-	// 使用模拟数据
-	orderDetail.value = getMockOrderDetail(id);
-	dialogVisible.value = true;
-};
-
-onMounted(() => {
-	handleSearch();
-});
+const getMockOrderList = () => Array.from({ length: 24 }, (_, i) => ({ id: i + 1, orderNo: `DO${Date.now() + i}`, orderType: Math.random() > 0.5 ? 'quick_distribution' : 'anchor_promotion', anchorName: `达人${i + 1}`, productName: `商品${i + 1}`, amount: 1000 + Math.random() * 9000, commission: 100 + Math.random() * 900, createTime: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toISOString() }));
+const getMockOrderDetail = (id: number) => ({ orderNo: `DO${Date.now() + id}`, orderType: Math.random() > 0.5 ? 'quick_distribution' : 'anchor_promotion', anchorName: `达人${id}`, amount: 5000 + Math.random() * 5000, commission: 500 + Math.random() * 500, commissionRate: +(10 + Math.random() * 10).toFixed(2), createTime: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(), status: '已完成', products: [{ productName: '商品1', sku: 'SKU001', quantity: 2, price: 1500, commission: 300 }, { productName: '商品2', sku: 'SKU002', quantity: 1, price: 2500, commission: 500 }], promotion: { channel: '抖音', time: new Date(Date.now() - 11 * 24 * 60 * 60 * 1000).toISOString(), link: `https://example.com/promotion/${id}`, effect: '良好' } });
+const handleSearch = () => { orderList.value = getMockOrderList(); pagination.total = orderList.value.length; pagination.currentPage = 1; };
+const handleReset = () => { searchParams.orderType = ''; searchParams.orderNo = ''; searchParams.anchorName = ''; searchParams.dateRange = []; pagination.currentPage = 1; pagination.pageSize = 10; handleSearch(); };
+const handleSizeChange = (size: number) => { pagination.pageSize = size; pagination.currentPage = 1; };
+const handleCurrentChange = (current: number) => { pagination.currentPage = current; };
+const handleOrderDetail = (id: number) => { orderDetail.value = getMockOrderDetail(id); dialogVisible.value = true; };
+onMounted(() => handleSearch());
 </script>
 
 <style scoped>
-.trade-operation-distribution-order {
-	padding: 20px;
-}
-
-.card-header {
-	font-size: 16px;
-	font-weight: bold;
-}
-
-.search-container {
-	margin-bottom: 20px;
-}
-
-.search-form {
-	display: flex;
-	align-items: center;
-}
-
-.order-list {
-	margin-top: 20px;
-}
-
-.pagination-container {
-	margin-top: 20px;
-	display: flex;
-	justify-content: flex-end;
-}
-
-.order-detail {
-	padding: 20px 0;
-}
-
-.detail-section {
-	margin-top: 30px;
-}
-
-.detail-section h3 {
-	font-size: 14px;
-	font-weight: bold;
-	margin-bottom: 15px;
-	color: #606266;
-}
+.trade-operation-distribution-order { padding: 20px; }
+.card-header { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 600; }
+.search-container { margin-bottom: 16px; }
+.search-form { display: flex; align-items: center; flex-wrap: wrap; }
+.search-form :deep(.el-form-item) { margin-right: 12px; margin-bottom: 12px; }
+.trade-operation-distribution-order :deep(.el-select) { width: 180px; }
+.trade-operation-distribution-order :deep(.el-select__wrapper),
+.trade-operation-distribution-order :deep(.el-select__selected-item),
+.trade-operation-distribution-order :deep(.el-select__placeholder) { color: #303133; }
+.order-list { margin-top: 20px; }
+.pagination-container { margin-top: 16px; display: flex; justify-content: flex-end; }
+.order-detail { padding: 20px 0; }
+.detail-section { margin-top: 30px; }
+.detail-section h3 { font-size: 14px; font-weight: bold; margin-bottom: 15px; color: #606266; }
 </style>
diff --git a/src/views/trade/operation/order/index.vue b/src/views/trade/operation/order/index.vue
index de4b821..f0b362d 100644
--- a/src/views/trade/operation/order/index.vue
+++ b/src/views/trade/operation/order/index.vue
@@ -1,76 +1,63 @@
 <template>
 	<div class="trade-operation-order">
 		<el-card shadow="hover">
-			<template #header>
-				<div class="card-header">
-					<span>订单管理</span>
-				</div>
-			</template>
-			<!-- 搜索条件 -->
-			<div class="search-container">
-				<el-form :model="searchParams" :inline="true" class="search-form">
-					<el-form-item label="订单号">
-						<el-input v-model="searchParams.orderNo" placeholder="请输入订单号" clearable />
-					</el-form-item>
-					<el-form-item label="商品名称">
-						<el-input v-model="searchParams.productName" placeholder="请输入商品名称" clearable />
-					</el-form-item>
-					<el-form-item label="订单状态">
-						<el-select v-model="searchParams.status" placeholder="选择订单状态">
-							<el-option label="全部" value="" />
-							<el-option label="待发货" value="pending_shipping" />
-							<el-option label="已发货" value="shipped" />
-							<el-option label="已签收" value="signed" />
-							<el-option label="已退款" value="refunded" />
-						</el-select>
-					</el-form-item>
-					<el-form-item label="时间范围">
-						<el-date-picker
-							v-model="searchParams.dateRange"
-							type="daterange"
-							range-separator="至"
-							start-placeholder="开始日期"
-							end-placeholder="结束日期"
-							value-format="YYYY-MM-DD"
-						/>
-					</el-form-item>
-					<el-form-item>
-						<el-button type="primary" @click="handleSearch">查询</el-button>
-						<el-button @click="handleReset">重置</el-button>
-					</el-form-item>
-				</el-form>
-			</div>
-			<!-- 订单列表 -->
+			<template #header
+				><div class="card-header"><span>订单管理</span></div></template
+			>
 			<div class="order-list">
-				<el-table :data="orderList" style="width: 100%">
-					<el-table-column prop="orderNo" label="订单号" />
-					<el-table-column prop="productName" label="商品名称" />
-					<el-table-column prop="amount" label="订单金额" />
-					<el-table-column prop="status" label="订单状态">
-						<template #default="scope">
-							<el-tag :type="getStatusTagType(scope.row.status)" size="small">{{ getStatusText(scope.row.status) }}</el-tag>
-						</template>
-					</el-table-column>
-					<el-table-column prop="createTime" label="创建时间" />
-					<el-table-column label="操作">
-						<template #default="scope">
-							<el-button type="primary" size="small" @click="handleOrderDetail(scope.row.id)">查看详情</el-button>
-						</template>
-					</el-table-column>
-				</el-table>
-				<div class="pagination-container">
-					<el-pagination
-						v-model:current-page="pagination.currentPage"
-						v-model:page-size="pagination.pageSize"
-						:page-sizes="[10, 20, 50, 100]"
-						layout="total, sizes, prev, pager, next, jumper"
-						:total="pagination.total"
-						@size-change="handleSizeChange"
-						@current-change="handleCurrentChange"
-					/>
-				</div>
+				<el-card>
+					<template #header><div class="card-header">订单列表</div></template>
+					<div class="search-container">
+						<el-form :model="searchParams" :inline="true" class="search-form">
+							<el-form-item label="订单号"><el-input v-model="searchParams.orderNo" placeholder="请输入订单号" clearable /></el-form-item>
+							<el-form-item label="商品名称"><el-input v-model="searchParams.productName" placeholder="请输入商品名称" clearable /></el-form-item>
+							<el-form-item label="订单状态"
+								><el-select v-model="searchParams.status" placeholder="选择订单状态"
+									><el-option v-for="option in statusOptions" :key="option.value || 'all'" :label="option.label" :value="option.value" /></el-select
+							></el-form-item>
+							<el-form-item label="时间范围"
+								><el-date-picker
+									v-model="searchParams.dateRange"
+									type="daterange"
+									range-separator="至"
+									start-placeholder="开始日期"
+									end-placeholder="结束日期"
+									value-format="YYYY-MM-DD"
+							/></el-form-item>
+							<el-form-item
+								><el-button type="primary" @click="handleSearch">查询</el-button><el-button @click="handleReset">重置</el-button></el-form-item
+							>
+						</el-form>
+					</div>
+					<el-table :data="pagedOrderList" style="width: 100%">
+						<el-table-column prop="orderNo" label="订单号" />
+						<el-table-column prop="productName" label="商品名称" />
+						<el-table-column prop="amount" label="订单金额" />
+						<el-table-column prop="status" label="订单状态"
+							><template #default="scope"
+								><el-tag :type="getStatusTagType(scope.row.status)" size="small">{{ getStatusText(scope.row.status) }}</el-tag></template
+							></el-table-column
+						>
+						<el-table-column prop="createTime" label="创建时间" />
+						<el-table-column label="操作"
+							><template #default="scope"
+								><el-button type="primary" size="small" @click="handleOrderDetail(scope.row.id)">查看详情</el-button></template
+							></el-table-column
+						>
+					</el-table>
+					<div class="pagination-container">
+						<el-pagination
+							v-model:current-page="pagination.currentPage"
+							v-model:page-size="pagination.pageSize"
+							:page-sizes="[10, 20, 50, 100]"
+							layout="total, sizes, prev, pager, next, jumper"
+							:total="pagination.total"
+							@size-change="handleSizeChange"
+							@current-change="handleCurrentChange"
+						/>
+					</div>
+				</el-card>
 			</div>
-			<!-- 订单详情对话框 -->
 			<el-dialog v-model="dialogVisible" title="订单详情" width="80%">
 				<div v-if="orderDetail" class="order-detail">
 					<el-descriptions :column="2" border>
@@ -83,51 +70,31 @@
 						<el-descriptions-item label="签收时间">{{ orderDetail.signTime || '-' }}</el-descriptions-item>
 						<el-descriptions-item label="退款时间">{{ orderDetail.refundTime || '-' }}</el-descriptions-item>
 					</el-descriptions>
-					<!-- 商品信息 -->
 					<div class="detail-section">
 						<h3>商品信息</h3>
-						<el-table :data="orderDetail.products" style="width: 100%">
-							<el-table-column prop="productName" label="商品名称" />
-							<el-table-column prop="sku" label="SKU" />
-							<el-table-column prop="quantity" label="数量" />
-							<el-table-column prop="price" label="单价" />
-							<el-table-column prop="subtotal" label="小计" />
-						</el-table>
+						<el-table :data="orderDetail.products" style="width: 100%"
+							><el-table-column prop="productName" label="商品名称" /><el-table-column prop="sku" label="SKU" /><el-table-column
+								prop="quantity"
+								label="数量" /><el-table-column prop="price" label="单价" /><el-table-column prop="subtotal" label="小计"
+						/></el-table>
 					</div>
-					<!-- 物流信息 -->
 					<div class="detail-section">
 						<h3>物流信息</h3>
-						<el-descriptions :column="2" border>
-							<el-descriptions-item label="快递公司">{{ orderDetail.logistics?.company || '-' }}</el-descriptions-item>
-							<el-descriptions-item label="物流单号">{{ orderDetail.logistics?.trackingNo || '-' }}</el-descriptions-item>
-							<el-descriptions-item label="发货地址">{{ orderDetail.logistics?.senderAddress || '-' }}</el-descriptions-item>
-							<el-descriptions-item label="收货地址">{{ orderDetail.logistics?.receiverAddress || '-' }}</el-descriptions-item>
-						</el-descriptions>
+						<el-descriptions :column="2" border
+							><el-descriptions-item label="快递公司">{{ orderDetail.logistics?.company || '-' }}</el-descriptions-item
+							><el-descriptions-item label="物流单号">{{ orderDetail.logistics?.trackingNo || '-' }}</el-descriptions-item
+							><el-descriptions-item label="发货地址">{{ orderDetail.logistics?.senderAddress || '-' }}</el-descriptions-item
+							><el-descriptions-item label="收货地址">{{ orderDetail.logistics?.receiverAddress || '-' }}</el-descriptions-item></el-descriptions
+						>
 					</div>
-					<!-- 分销信息 -->
 					<div class="detail-section" v-if="orderDetail.distribution">
 						<h3>分销信息</h3>
-						<el-descriptions :column="2" border>
-							<el-descriptions-item label="分销达人">{{ orderDetail.distribution.anchorName }}</el-descriptions-item>
-							<el-descriptions-item label="佣金金额">{{ orderDetail.distribution.commission }}</el-descriptions-item>
-							<el-descriptions-item label="分销类型">{{ orderDetail.distribution.type }}</el-descriptions-item>
-							<el-descriptions-item label="推广时间">{{ orderDetail.distribution.promotionTime }}</el-descriptions-item>
-						</el-descriptions>
-					</div>
-					<!-- 订单进度 -->
-					<div class="detail-section">
-						<h3>订单进度</h3>
-						<el-timeline>
-							<el-timeline-item
-								v-for="(item, index) in orderDetail.progress"
-								:key="index"
-								:timestamp="item.time"
-								:type="item.status === 'completed' ? 'success' : 'primary'"
-								:icon="item.status === 'completed' ? 'el-icon-check' : 'el-icon-loading'"
-							>
-								{{ item.description }}
-							</el-timeline-item>
-						</el-timeline>
+						<el-descriptions :column="2" border
+							><el-descriptions-item label="分销达人">{{ orderDetail.distribution.anchorName }}</el-descriptions-item
+							><el-descriptions-item label="佣金金额">{{ orderDetail.distribution.commission }}</el-descriptions-item
+							><el-descriptions-item label="分销类型">{{ orderDetail.distribution.type }}</el-descriptions-item
+							><el-descriptions-item label="推广时间">{{ orderDetail.distribution.promotionTime }}</el-descriptions-item></el-descriptions
+						>
 					</div>
 				</div>
 			</el-dialog>
@@ -136,15 +103,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue';
-
-const searchParams = reactive({
-	orderNo: '',
-	productName: '',
-	status: '',
-	dateRange: [],
-});
-
+import { computed, onMounted, reactive, ref } from 'vue';
+const searchParams = reactive({ orderNo: '', productName: '', status: '', dateRange: [] });
+const statusOptions = [
+	{ label: '全部', value: 'all' },
+	{ label: '待发货', value: 'pending_shipping' },
+	{ label: '已发货', value: 'shipped' },
+	{ label: '已签收', value: 'signed' },
+	{ label: '已退款', value: 'refunded' },
+];
 interface OrderItem {
 	id: number;
 	orderNo: string;
@@ -153,15 +120,11 @@ interface OrderItem {
 	status: string;
 	createTime: string;
 }
-
 const orderList = ref<OrderItem[]>([]);
-
-const pagination = reactive({
-	currentPage: 1,
-	pageSize: 10,
-	total: 0,
-});
-
+const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 });
+const pagedOrderList = computed(() =>
+	orderList.value.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize)
+);
 interface OrderDetail {
 	orderNo: string;
 	amount: number;
@@ -171,142 +134,50 @@ interface OrderDetail {
 	shipTime: string;
 	signTime: string;
 	refundTime: string;
-	products: {
-		productName: string;
-		sku: string;
-		quantity: number;
-		price: number;
-		subtotal: number;
-	}[];
-	logistics: {
-		company: string;
-		trackingNo: string;
-		senderAddress: string;
-		receiverAddress: string;
-	};
-	distribution: {
-		anchorName: string;
-		commission: number;
-		type: string;
-		promotionTime: string;
-	};
-	progress: {
-		time: string;
-		description: string;
-		status: string;
-	}[];
+	products: { productName: string; sku: string; quantity: number; price: number; subtotal: number }[];
+	logistics: { company: string; trackingNo: string; senderAddress: string; receiverAddress: string };
+	distribution: { anchorName: string; commission: number; type: string; promotionTime: string };
 }
-
 const dialogVisible = ref(false);
 const orderDetail = ref<OrderDetail | null>(null);
-
-// 模拟订单列表数据
-const getMockOrderList = () => {
-	const statuses = ['pending_shipping', 'shipped', 'signed', 'refunded'];
-	const orders: OrderItem[] = [];
-	for (let i = 1; i <= 20; i++) {
-		orders.push({
-			id: i,
-			orderNo: `ORDER${Date.now() + i}`,
-			productName: `商品${i}`,
-			amount: 1000 + Math.random() * 9000,
-			status: statuses[Math.floor(Math.random() * statuses.length)],
-			createTime: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toISOString(),
-		});
-	}
-	return orders;
-};
-
-// 模拟订单详情数据
-const getMockOrderDetail = (id: number) => {
-	return {
-		orderNo: `ORDER${Date.now() + id}`,
-		amount: 5000 + Math.random() * 5000,
-		status: 'signed',
-		createTime: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(),
-		payTime: new Date(Date.now() - 9.5 * 24 * 60 * 60 * 1000).toISOString(),
-		shipTime: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),
-		signTime: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
-		refundTime: '',
-		products: [
-			{
-				productName: '商品1',
-				sku: 'SKU001',
-				quantity: 2,
-				price: 1500,
-				subtotal: 3000,
-			},
-			{
-				productName: '商品2',
-				sku: 'SKU002',
-				quantity: 1,
-				price: 2500,
-				subtotal: 2500,
-			},
-		],
-		logistics: {
-			company: '顺丰速运',
-			trackingNo: `SF${Math.floor(Math.random() * 10000000000)}`,
-			senderAddress: '上海市浦东新区',
-			receiverAddress: '北京市朝阳区',
-		},
-		distribution: {
-			anchorName: '主播A',
-			commission: 500,
-			type: '二创',
-			promotionTime: new Date(Date.now() - 11 * 24 * 60 * 60 * 1000).toISOString(),
-		},
-		progress: [
-			{
-				time: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(),
-				description: '订单创建',
-				status: 'completed',
-			},
-			{
-				time: new Date(Date.now() - 9.5 * 24 * 60 * 60 * 1000).toISOString(),
-				description: '订单支付',
-				status: 'completed',
-			},
-			{
-				time: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),
-				description: '订单发货',
-				status: 'completed',
-			},
-			{
-				time: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
-				description: '订单签收',
-				status: 'completed',
-			},
-		],
-	};
-};
-
-const getStatusText = (status: string) => {
-	const statusMap: Record<string, string> = {
-		pending_shipping: '待发货',
-		shipped: '已发货',
-		signed: '已签收',
-		refunded: '已退款',
-	};
-	return statusMap[status] || status;
-};
-
-const getStatusTagType = (status: string) => {
-	const typeMap: Record<string, string> = {
-		pending_shipping: 'info',
-		shipped: 'primary',
-		signed: 'success',
-		refunded: 'warning',
-	};
-	return typeMap[status] || 'info';
-};
-
+const getMockOrderList = () =>
+	Array.from({ length: 24 }, (_, i) => ({
+		id: i + 1,
+		orderNo: `ORDER${Date.now() + i}`,
+		productName: `商品${i + 1}`,
+		amount: 1000 + Math.random() * 9000,
+		status: ['pending_shipping', 'shipped', 'signed', 'refunded'][Math.floor(Math.random() * 4)],
+		createTime: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toISOString(),
+	}));
+const getMockOrderDetail = (id: number) => ({
+	orderNo: `ORDER${Date.now() + id}`,
+	amount: 5000 + Math.random() * 5000,
+	status: 'signed',
+	createTime: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(),
+	payTime: new Date(Date.now() - 9.5 * 24 * 60 * 60 * 1000).toISOString(),
+	shipTime: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),
+	signTime: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
+	refundTime: '',
+	products: [
+		{ productName: '商品1', sku: 'SKU001', quantity: 2, price: 1500, subtotal: 3000 },
+		{ productName: '商品2', sku: 'SKU002', quantity: 1, price: 2500, subtotal: 2500 },
+	],
+	logistics: {
+		company: '顺丰速运',
+		trackingNo: `SF${Math.floor(Math.random() * 10000000000)}`,
+		senderAddress: '上海市浦东新区',
+		receiverAddress: '北京市朝阳区',
+	},
+	distribution: { anchorName: '主播A', commission: 500, type: '二创', promotionTime: new Date(Date.now() - 11 * 24 * 60 * 60 * 1000).toISOString() },
+});
+const getStatusText = (status: string) => ({ pending_shipping: '待发货', shipped: '已发货', signed: '已签收', refunded: '已退款' })[status] || status;
+const getStatusTagType = (status: string) =>
+	({ pending_shipping: 'info', shipped: 'primary', signed: 'success', refunded: 'warning' })[status] || 'info';
 const handleSearch = () => {
-	// 使用模拟数据
 	orderList.value = getMockOrderList();
-	pagination.total = 20;
+	pagination.total = orderList.value.length;
+	pagination.currentPage = 1;
 };
-
 const handleReset = () => {
 	searchParams.orderNo = '';
 	searchParams.productName = '';
@@ -314,66 +185,67 @@ const handleReset = () => {
 	searchParams.dateRange = [];
 	pagination.currentPage = 1;
 	pagination.pageSize = 10;
+	handleSearch();
 };
-
 const handleSizeChange = (size: number) => {
 	pagination.pageSize = size;
-	handleSearch();
+	pagination.currentPage = 1;
 };
-
 const handleCurrentChange = (current: number) => {
 	pagination.currentPage = current;
-	handleSearch();
 };
-
 const handleOrderDetail = (id: number) => {
-	// 使用模拟数据
 	orderDetail.value = getMockOrderDetail(id);
 	dialogVisible.value = true;
 };
-
-onMounted(() => {
-	handleSearch();
-});
+onMounted(() => handleSearch());
 </script>
 
 <style scoped>
 .trade-operation-order {
 	padding: 20px;
 }
-
 .card-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
 	font-size: 16px;
-	font-weight: bold;
+	font-weight: 600;
 }
-
 .search-container {
-	margin-bottom: 20px;
+	margin-bottom: 16px;
 }
-
 .search-form {
 	display: flex;
 	align-items: center;
+	flex-wrap: wrap;
+}
+.search-form :deep(.el-form-item) {
+	margin-right: 12px;
+	margin-bottom: 12px;
+}
+.trade-operation-order :deep(.el-select) {
+	width: 180px;
+}
+.trade-operation-order :deep(.el-select__wrapper),
+.trade-operation-order :deep(.el-select__selected-item),
+.trade-operation-order :deep(.el-select__placeholder) {
+	color: #303133;
 }
-
 .order-list {
 	margin-top: 20px;
 }
-
 .pagination-container {
-	margin-top: 20px;
+	margin-top: 16px;
 	display: flex;
 	justify-content: flex-end;
 }
-
 .order-detail {
 	padding: 20px 0;
 }
-
 .detail-section {
 	margin-top: 30px;
 }
-
 .detail-section h3 {
 	font-size: 14px;
 	font-weight: bold;
diff --git a/src/views/trade/operation/stats/anchor/index.vue b/src/views/trade/operation/stats/anchor/index.vue
index 914858d..be095a2 100644
--- a/src/views/trade/operation/stats/anchor/index.vue
+++ b/src/views/trade/operation/stats/anchor/index.vue
@@ -1,66 +1,38 @@
 <template>
 	<div class="trade-operation-stats-anchor">
 		<el-card shadow="hover">
-			<template #header>
-				<div class="card-header">
-					<span>主播维度统计</span>
-				</div>
-			</template>
-			<!-- 主播销售趋势 -->
+			<template #header><div class="card-header"><span>主播维度统计</span></div></template>
 			<div class="chart-container">
 				<el-card>
-					<template #header>
-						<div class="card-header">主播销售趋势</div>
-					</template>
+					<template #header><div class="card-header">主播销售趋势 - {{ currentAnchorName }}</div></template>
 					<div ref="salesChartRef" class="chart"></div>
 				</el-card>
 			</div>
-			<!-- 搜索条件 -->
-			<div class="search-container">
-				<el-form :model="searchParams" :inline="true" class="search-form">
-					<el-form-item label="时间范围">
-						<el-date-picker
-							v-model="searchParams.dateRange"
-							type="daterange"
-							range-separator="至"
-							start-placeholder="开始日期"
-							end-placeholder="结束日期"
-							value-format="YYYY-MM-DD"
-						/>
-					</el-form-item>
-					<el-form-item label="主播">
-						<el-input v-model="searchParams.anchorName" placeholder="请输入主播名称" clearable />
-					</el-form-item>
-					<el-form-item>
-						<el-button type="primary" @click="handleSearch">查询</el-button>
-						<el-button @click="handleReset">重置</el-button>
-					</el-form-item>
-				</el-form>
-			</div>
-			<!-- 主播业绩排行 -->
 			<div class="anchor-ranking">
 				<el-card>
-					<template #header>
-						<div class="card-header">主播业绩排行</div>
-					</template>
-					<el-table :data="anchorList" style="width: 100%">
+					<template #header><div class="card-header">主播业绩排行</div></template>
+					<div class="search-container">
+						<el-form :model="searchParams" :inline="true" class="search-form">
+							<el-form-item label="时间范围"><el-date-picker v-model="searchParams.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" /></el-form-item>
+							<el-form-item label="主播"><el-input v-model="searchParams.anchorName" placeholder="请输入主播名称" clearable @keyup.enter="handleSearch" /></el-form-item>
+							<el-form-item><el-button type="primary" @click="handleSearch">查询</el-button><el-button @click="handleReset">重置</el-button></el-form-item>
+						</el-form>
+					</div>
+					<el-table ref="anchorTableRef" :data="pagedAnchorList" style="width: 100%" row-key="anchorName" highlight-current-row @row-click="handleAnchorClick">
 						<el-table-column prop="rank" label="排名" width="80" />
 						<el-table-column prop="anchorName" label="主播名称" />
 						<el-table-column prop="sales" label="销售额" />
 						<el-table-column prop="orderCount" label="订单数" />
 						<el-table-column prop="signRate" label="签收率" />
 						<el-table-column prop="repurchaseRate" label="复购率" />
+						<el-table-column label="操作" width="120">
+							<template #default="scope">
+								<el-button type="primary" link @click.stop="handleAnchorSelect(scope.row.anchorName)">查看趋势</el-button>
+							</template>
+						</el-table-column>
 					</el-table>
 					<div class="pagination-container">
-						<el-pagination
-							v-model:current-page="pagination.currentPage"
-							v-model:page-size="pagination.pageSize"
-							:page-sizes="[10, 20, 50, 100]"
-							layout="total, sizes, prev, pager, next, jumper"
-							:total="pagination.total"
-							@size-change="handleSizeChange"
-							@current-change="handleCurrentChange"
-						/>
+						<el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
 					</div>
 				</el-card>
 			</div>
@@ -69,169 +41,195 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue';
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
 import * as echarts from 'echarts';
 
-const searchParams = reactive({
-	dateRange: [],
-	anchorName: '',
+interface AnchorItem {
+	rank: number;
+	anchorName: string;
+	sales: number;
+	orderCount: number;
+	signRate: string;
+	repurchaseRate: string;
+}
+
+interface AnchorTrend {
+	anchorName: string;
+	dates: string[];
+	sales: number[];
+	orders: number[];
+}
+
+const searchParams = reactive({ dateRange: [], anchorName: '' });
+const anchorList = ref<AnchorItem[]>([]);
+const anchorTableRef = ref();
+const selectedAnchorName = ref('');
+const filteredAnchorList = computed(() => {
+	const keyword = searchParams.anchorName.trim().toLowerCase();
+	if (!keyword) return anchorList.value;
+	return anchorList.value.filter((item) => item.anchorName.toLowerCase().includes(keyword));
 });
-
-const anchorList = ref([]);
-
-const pagination = reactive({
-	currentPage: 1,
-	pageSize: 10,
-	total: 0,
-});
-
+const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 });
+const pagedAnchorList = computed(() =>
+	filteredAnchorList.value.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize)
+);
+const currentAnchorName = computed(() => selectedAnchorName.value || filteredAnchorList.value[0]?.anchorName || '暂无主播');
 const salesChartRef = ref();
 let salesChart: echarts.ECharts | null = null;
 
-// 模拟主播列表数据
-const getMockAnchorList = () => {
-	const anchors = [
-		{ rank: 1, anchorName: '主播A', sales: 528000, orderCount: 1250, signRate: '98.5%', repurchaseRate: '32.8%' },
-		{ rank: 2, anchorName: '主播B', sales: 465000, orderCount: 1080, signRate: '97.2%', repurchaseRate: '28.5%' },
-		{ rank: 3, anchorName: '主播C', sales: 389000, orderCount: 920, signRate: '99.1%', repurchaseRate: '35.2%' },
-		{ rank: 4, anchorName: '主播D', sales: 320000, orderCount: 780, signRate: '96.8%', repurchaseRate: '25.3%' },
-		{ rank: 5, anchorName: '主播E', sales: 285000, orderCount: 690, signRate: '98.2%', repurchaseRate: '30.1%' },
-		{ rank: 6, anchorName: '主播F', sales: 256000, orderCount: 620, signRate: '97.5%', repurchaseRate: '27.8%' },
-		{ rank: 7, anchorName: '主播G', sales: 210000, orderCount: 510, signRate: '96.3%', repurchaseRate: '24.5%' },
-		{ rank: 8, anchorName: '主播H', sales: 185000, orderCount: 450, signRate: '98.8%', repurchaseRate: '31.2%' },
-		{ rank: 9, anchorName: '主播I', sales: 162000, orderCount: 390, signRate: '97.9%', repurchaseRate: '29.5%' },
-		{ rank: 10, anchorName: '主播J', sales: 145000, orderCount: 350, signRate: '96.7%', repurchaseRate: '26.8%' },
-	];
-	return anchors;
+const getMockAnchorList = () => [
+	{ rank: 1, anchorName: '主播A', sales: 528000, orderCount: 1250, signRate: '98.5%', repurchaseRate: '32.8%' },
+	{ rank: 2, anchorName: '主播B', sales: 465000, orderCount: 1080, signRate: '97.2%', repurchaseRate: '28.5%' },
+	{ rank: 3, anchorName: '主播C', sales: 389000, orderCount: 920, signRate: '99.1%', repurchaseRate: '35.2%' },
+	{ rank: 4, anchorName: '主播D', sales: 320000, orderCount: 780, signRate: '96.8%', repurchaseRate: '25.3%' },
+	{ rank: 5, anchorName: '主播E', sales: 285000, orderCount: 690, signRate: '98.2%', repurchaseRate: '30.1%' },
+	{ rank: 6, anchorName: '主播F', sales: 256000, orderCount: 620, signRate: '97.5%', repurchaseRate: '27.8%' },
+	{ rank: 7, anchorName: '主播G', sales: 210000, orderCount: 510, signRate: '96.3%', repurchaseRate: '24.5%' },
+	{ rank: 8, anchorName: '主播H', sales: 185000, orderCount: 450, signRate: '98.8%', repurchaseRate: '31.2%' },
+	{ rank: 9, anchorName: '主播I', sales: 162000, orderCount: 390, signRate: '97.9%', repurchaseRate: '29.5%' },
+	{ rank: 10, anchorName: '主播J', sales: 145000, orderCount: 350, signRate: '96.7%', repurchaseRate: '26.8%' },
+];
+const getTrendLabels = () => {
+	if (Array.isArray(searchParams.dateRange) && searchParams.dateRange.length === 2) {
+		const [startText, endText] = searchParams.dateRange as string[];
+		const start = new Date(`${startText}T00:00:00`);
+		const end = new Date(`${endText}T00:00:00`);
+		const labels: string[] = [];
+		const cursor = new Date(start.getTime());
+		while (cursor <= end && labels.length < 31) {
+			labels.push(`${cursor.getMonth() + 1}/${cursor.getDate()}`);
+			cursor.setDate(cursor.getDate() + 1);
+		}
+		return labels;
+	}
+	return ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
 };
-
-// 模拟主播销售趋势数据
-const getMockSalesTrend = () => {
-	const dates = ['1月', '2月', '3月', '4月', '5月', '6月'];
-	const anchors = ['主播A', '主播B', '主播C'];
-	return anchors.map((anchorName) => ({
+const getMockSalesTrend = (anchorName: string): AnchorTrend => {
+	const labels = getTrendLabels();
+	const anchorIndex = Math.max(anchorList.value.findIndex((item) => item.anchorName === anchorName), 0);
+	const baseSales = 120000 + anchorIndex * 26000;
+	const baseOrders = 260 + anchorIndex * 36;
+	return {
 		anchorName,
-		dates,
-		sales: dates.map(() => 100000 + Math.random() * 300000),
-	}));
+		dates: labels,
+		sales: labels.map((_, index) => {
+			const trendFactor = 1 + index * 0.06;
+			const fluctuation = 0.9 + ((index + anchorIndex) % 4) * 0.08;
+			return Math.round(baseSales * trendFactor * fluctuation);
+		}),
+		orders: labels.map((_, index) => {
+			const trendFactor = 1 + index * 0.045;
+			const fluctuation = 0.92 + ((index + anchorIndex + 1) % 5) * 0.05;
+			return Math.round(baseOrders * trendFactor * fluctuation);
+		}),
+	};
+};
+const setCurrentAnchorRow = async () => {
+	await nextTick();
+	const currentRow = pagedAnchorList.value.find((item) => item.anchorName === selectedAnchorName.value) || null;
+	anchorTableRef.value?.setCurrentRow(currentRow);
+};
+const syncSelectedAnchor = () => {
+	const hasSelectedAnchor = filteredAnchorList.value.some((item) => item.anchorName === selectedAnchorName.value);
+	if (!hasSelectedAnchor) {
+		selectedAnchorName.value = filteredAnchorList.value[0]?.anchorName || '';
+	}
+};
+const updateChartByAnchor = (anchorName: string) => {
+	selectedAnchorName.value = anchorName;
+	initSalesChart(getMockSalesTrend(anchorName));
+	setCurrentAnchorRow();
 };
-
 const handleSearch = () => {
-	// 使用模拟数据
-	anchorList.value = getMockAnchorList();
-	pagination.total = 100;
-	initSalesChart(getMockSalesTrend());
+	if (!anchorList.value.length) {
+		anchorList.value = getMockAnchorList();
+	}
+	pagination.currentPage = 1;
+	pagination.total = filteredAnchorList.value.length;
+	syncSelectedAnchor();
+	if (selectedAnchorName.value) {
+		updateChartByAnchor(selectedAnchorName.value);
+	} else {
+		initSalesChart(null);
+		setCurrentAnchorRow();
+	}
 };
-
 const handleReset = () => {
 	searchParams.dateRange = [];
 	searchParams.anchorName = '';
+	selectedAnchorName.value = anchorList.value[0]?.anchorName || '';
 	pagination.currentPage = 1;
 	pagination.pageSize = 10;
+	handleSearch();
+};
+const handleAnchorClick = (row: AnchorItem) => {
+	updateChartByAnchor(row.anchorName);
+};
+const handleAnchorSelect = (anchorName: string) => {
+	updateChartByAnchor(anchorName);
 };
-
 const handleSizeChange = (size: number) => {
 	pagination.pageSize = size;
-	handleSearch();
+	pagination.currentPage = 1;
+	setCurrentAnchorRow();
 };
-
 const handleCurrentChange = (current: number) => {
 	pagination.currentPage = current;
-	handleSearch();
+	setCurrentAnchorRow();
 };
 
-const initSalesChart = (salesTrend: any[]) => {
+const initSalesChart = (salesTrend: AnchorTrend | null) => {
 	if (!salesChartRef.value) return;
-
-	if (salesChart) {
-		salesChart.dispose();
-	}
-
+	if (salesChart) salesChart.dispose();
 	salesChart = echarts.init(salesChartRef.value);
-
-	const option = {
-		tooltip: {
-			trigger: 'axis',
-			axisPointer: {
-				type: 'cross',
-				label: {
-					backgroundColor: '#6a7985',
-				},
-			},
-		},
-		legend: {
-			data: salesTrend.map((item) => item.anchorName),
-		},
-		grid: {
-			left: '3%',
-			right: '4%',
-			bottom: '3%',
-			containLabel: true,
-		},
-		xAxis: {
-			type: 'category',
-			boundaryGap: false,
-			data: salesTrend[0]?.dates || [],
-		},
-		yAxis: {
-			type: 'value',
-			name: '销售额',
-		},
-		series: salesTrend.map((item) => ({
-			name: item.anchorName,
-			type: 'line',
-			data: item.sales,
-			smooth: true,
-		})),
-	};
-
-	salesChart.setOption(option);
+	const xAxisData = salesTrend?.dates || [];
+	const isSingle = xAxisData.length <= 1;
+	salesChart.setOption({
+		tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } },
+		legend: { data: salesTrend ? ['销售额', '订单数'] : [] },
+		grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+		xAxis: { type: 'category', boundaryGap: isSingle, data: xAxisData },
+		yAxis: [
+			{ type: 'value', name: '销售额', position: 'left' },
+			{ type: 'value', name: '订单数', position: 'right' },
+		],
+		series: salesTrend
+			? [
+					{ name: '销售额', type: 'line', data: salesTrend.sales, smooth: true, showSymbol: true, symbolSize: isSingle ? 10 : 6 },
+					{ name: '订单数', type: 'line', yAxisIndex: 1, data: salesTrend.orders, smooth: true, showSymbol: true, symbolSize: isSingle ? 10 : 6 },
+				]
+			: [],
+	});
 };
 
+watch(
+	() => filteredAnchorList.value.length,
+	(length) => {
+		pagination.total = length;
+		const maxPage = Math.max(1, Math.ceil(length / pagination.pageSize));
+		if (pagination.currentPage > maxPage) {
+			pagination.currentPage = maxPage;
+		}
+		setCurrentAnchorRow();
+	}
+);
+
 onMounted(() => {
+	anchorList.value = getMockAnchorList();
+	selectedAnchorName.value = anchorList.value[0]?.anchorName || '';
 	handleSearch();
-
-	window.addEventListener('resize', () => {
-		salesChart?.resize();
-	});
+	window.addEventListener('resize', () => salesChart?.resize());
 });
 </script>
 
 <style scoped>
-.trade-operation-stats-anchor {
-	padding: 20px;
-}
-
-.card-header {
-	font-size: 16px;
-	font-weight: bold;
-}
-
-.search-container {
-	margin-bottom: 20px;
-}
-
-.search-form {
-	display: flex;
-	align-items: center;
-}
-
-.anchor-ranking {
-	margin-bottom: 20px;
-}
-
-.pagination-container {
-	margin-top: 20px;
-	display: flex;
-	justify-content: flex-end;
-}
-
-.chart-container {
-	margin: 20px 0;
-}
-
-.chart {
-	width: 100%;
-	height: 400px;
-}
+.trade-operation-stats-anchor { padding: 20px; }
+.card-header { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 600; }
+.search-container { margin-bottom: 16px; }
+.search-form { display: flex; align-items: center; flex-wrap: wrap; }
+.search-form :deep(.el-form-item) { margin-right: 12px; margin-bottom: 12px; }
+.anchor-ranking { margin-bottom: 20px; }
+.pagination-container { margin-top: 16px; display: flex; justify-content: flex-end; }
+.chart-container { margin: 0 0 20px; }
+.chart { width: 100%; height: 400px; }
 </style>
diff --git a/src/views/trade/operation/stats/shop/index.vue b/src/views/trade/operation/stats/shop/index.vue
index 046bda4..1788a93 100644
--- a/src/views/trade/operation/stats/shop/index.vue
+++ b/src/views/trade/operation/stats/shop/index.vue
@@ -1,158 +1,114 @@
 <template>
 	<div class="trade-operation-stats-shop">
 		<el-card shadow="hover">
-			<template #header>
-				<div class="card-header">
-					<span>店铺维度统计</span>
-				</div>
-			</template>
-			<!-- 搜索条件 -->
-			<div class="search-container">
-				<el-form :model="searchParams" :inline="true" class="search-form">
-					<el-form-item label="店铺">
-						<el-select v-model="searchParams.shopId" placeholder="选择店铺">
-							<el-option label="全部店铺" value="" />
-							<el-option v-for="shop in shopList" :key="shop.id" :label="shop.name" :value="shop.id" />
-						</el-select>
-					</el-form-item>
-					<el-form-item label="时间范围">
-						<el-date-picker
-							v-model="searchParams.dateRange"
-							type="daterange"
-							range-separator="至"
-							start-placeholder="开始日期"
-							end-placeholder="结束日期"
-							value-format="YYYY-MM-DD"
-							:shortcuts="[
-								{
-									text: '最近7天',
-									value: () => {
-										const end = new Date();
-										const start = new Date();
-										start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-										return [start, end];
-									},
-								},
-								{
-									text: '最近30天',
-									value: () => {
-										const end = new Date();
-										const start = new Date();
-										start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-										return [start, end];
-									},
-								},
-								{
-									text: '最近90天',
-									value: () => {
-										const end = new Date();
-										const start = new Date();
-										start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-										return [start, end];
-									},
-								},
-								{
-									text: '今年',
-									value: () => {
-										const end = new Date();
-										const start = new Date(new Date().getFullYear(), 0, 1);
-										return [start, end];
-									},
-								},
-								{
-									text: '去年',
-									value: () => {
-										const end = new Date(new Date().getFullYear() - 1, 11, 31);
-										const start = new Date(new Date().getFullYear() - 1, 0, 1);
-										return [start, end];
-									},
-								},
-							]"
-						/>
-					</el-form-item>
-					<el-form-item label="时间粒度">
-						<el-select v-model="searchParams.granularity" placeholder="选择时间粒度">
-							<el-option label="小时" value="hour" />
-							<el-option label="日" value="day" />
-							<el-option label="周" value="week" />
-							<el-option label="月" value="month" />
-							<el-option label="季度" value="quarter" />
-							<el-option label="年" value="year" />
-						</el-select>
-					</el-form-item>
-					<el-form-item>
-						<el-button type="primary" @click="handleSearch">查询</el-button>
-						<el-button @click="handleReset">重置</el-button>
-					</el-form-item>
-				</el-form>
-			</div>
-			<!-- 销售趋势图表 -->
+			<template #header
+				><div class="card-header"><span>店铺维度统计</span></div></template
+			>
 			<div class="chart-container">
 				<el-card>
-					<template #header>
-						<div class="card-header">销售趋势 - {{ selectedShopName }}</div>
-					</template>
+					<template #header
+						><div class="card-header">销售趋势 - {{ selectedShopName }}</div></template
+					>
 					<div ref="salesChartRef" class="chart"></div>
 				</el-card>
 			</div>
-			<!-- 核心指标 -->
 			<div class="stats-cards">
-				<el-card class="stats-card">
-					<div class="stats-card-title">总销售额</div>
+				<el-card class="stats-card"
+					><div class="stats-card-title">总销售额</div>
 					<div class="stats-card-value">{{ statsData.totalSales || 0 }}</div>
 					<div class="stats-card-change" :class="{ positive: statsData.salesGrowth > 0, negative: statsData.salesGrowth < 0 }">
 						{{ statsData.salesGrowth > 0 ? '+' : '' }}{{ statsData.salesGrowth || 0 }}%
-					</div>
-				</el-card>
-				<el-card class="stats-card">
-					<div class="stats-card-title">订单量</div>
+					</div></el-card
+				>
+				<el-card class="stats-card"
+					><div class="stats-card-title">订单量</div>
 					<div class="stats-card-value">{{ statsData.orderCount || 0 }}</div>
 					<div class="stats-card-change" :class="{ positive: statsData.orderGrowth > 0, negative: statsData.orderGrowth < 0 }">
 						{{ statsData.orderGrowth > 0 ? '+' : '' }}{{ statsData.orderGrowth || 0 }}%
-					</div>
-				</el-card>
-				<el-card class="stats-card">
-					<div class="stats-card-title">退款率</div>
+					</div></el-card
+				>
+				<el-card class="stats-card"
+					><div class="stats-card-title">退款率</div>
 					<div class="stats-card-value">{{ statsData.refundRate || 0 }}%</div>
 					<div class="stats-card-change" :class="{ positive: statsData.refundRateChange < 0, negative: statsData.refundRateChange > 0 }">
 						{{ statsData.refundRateChange > 0 ? '+' : '' }}{{ statsData.refundRateChange || 0 }}%
-					</div>
-				</el-card>
-				<el-card class="stats-card">
-					<div class="stats-card-title">物流履约率</div>
+					</div></el-card
+				>
+				<el-card class="stats-card"
+					><div class="stats-card-title">物流履约率</div>
 					<div class="stats-card-value">{{ statsData.logisticsRate || 0 }}%</div>
 					<div class="stats-card-change" :class="{ positive: statsData.logisticsRateGrowth > 0, negative: statsData.logisticsRateGrowth < 0 }">
 						{{ statsData.logisticsRateGrowth > 0 ? '+' : '' }}{{ statsData.logisticsRateGrowth || 0 }}%
-					</div>
-				</el-card>
+					</div></el-card
+				>
 			</div>
-			<!-- 店铺列表 -->
 			<div class="shop-list">
 				<el-card>
-					<template #header>
-						<div class="card-header">店铺列表</div>
-					</template>
-					<el-table :data="shopList" style="width: 100%" @row-click="handleShopClick">
+					<template #header><div class="card-header">店铺列表</div></template>
+					<div class="search-container">
+						<el-form :model="searchParams" :inline="true" class="search-form">
+							<el-form-item label="店铺搜索">
+								<el-input
+									v-model="searchParams.shopKeyword"
+									placeholder="请输入店铺名称或店铺ID"
+									clearable
+									@keyup.enter="handleSearch"
+								/>
+							</el-form-item>
+							<el-form-item label="时间范围"
+								><el-date-picker
+									v-model="searchParams.dateRange"
+									type="daterange"
+									range-separator="至"
+									start-placeholder="开始日期"
+									end-placeholder="结束日期"
+									value-format="YYYY-MM-DD"
+									:shortcuts="dateShortcuts"
+							/></el-form-item>
+							<el-form-item label="时间粒度">
+								<el-radio-group v-model="searchParams.granularity" class="granularity-group">
+									<el-radio-button v-for="option in granularityOptions" :key="option.value" :label="option.value">
+										{{ option.label }}
+									</el-radio-button>
+								</el-radio-group>
+							</el-form-item>
+							<el-form-item
+								><el-button type="primary" @click="handleSearch">查询</el-button><el-button @click="handleReset">重置</el-button></el-form-item
+							>
+						</el-form>
+					</div>
+					<el-table :data="pagedShopList" style="width: 100%" @row-click="handleShopClick">
 						<el-table-column prop="id" label="店铺ID" width="100" />
 						<el-table-column prop="name" label="店铺名称" />
-						<el-table-column prop="type" label="店铺类型">
-							<template #default="scope">
-								<el-tag size="small">{{ scope.row.type === 'physical' ? '线下店铺' : '线上店铺' }}</el-tag>
-							</template>
-						</el-table-column>
-						<el-table-column prop="status" label="状态">
-							<template #default="scope">
-								<el-tag size="small" :type="scope.row.status === 'active' ? 'success' : 'danger'">
-									{{ scope.row.status === 'active' ? '营业中' : '已关闭' }}
-								</el-tag>
-							</template>
-						</el-table-column>
-						<el-table-column label="操作">
-							<template #default="scope">
-								<el-button type="primary" size="small" @click="handleShopSelect(scope.row.id)">查看详情</el-button>
-							</template>
-						</el-table-column>
+						<el-table-column prop="type" label="店铺类型"
+							><template #default="scope"
+								><el-tag size="small">{{ scope.row.type === 'physical' ? '线下店铺' : '线上店铺' }}</el-tag></template
+							></el-table-column
+						>
+						<el-table-column prop="status" label="状态"
+							><template #default="scope"
+								><el-tag size="small" :type="scope.row.status === 'active' ? 'success' : 'danger'">{{
+									scope.row.status === 'active' ? '营业中' : '已关闭'
+								}}</el-tag></template
+							></el-table-column
+						>
+						<el-table-column label="操作"
+							><template #default="scope"
+								><el-button type="primary" size="small" @click.stop="handleShopSelect(scope.row.id)">查看详情</el-button></template
+							></el-table-column
+						>
 					</el-table>
+					<div class="pagination-container">
+						<el-pagination
+							v-model:current-page="pagination.currentPage"
+							v-model:page-size="pagination.pageSize"
+							:page-sizes="[5, 10, 20, 50]"
+							layout="total, sizes, prev, pager, next, jumper"
+							:total="pagination.total"
+							@size-change="handleSizeChange"
+							@current-change="handleCurrentChange"
+						/>
+					</div>
 				</el-card>
 			</div>
 		</el-card>
@@ -160,51 +116,78 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed, watch } from 'vue';
+import { computed, onMounted, reactive, ref, watch } from 'vue';
 import * as echarts from 'echarts';
-
-const searchParams = reactive({
-	shopId: '',
-	dateRange: [],
-	granularity: 'day',
-});
-
-// 监听店铺选择变化，自动更新数据
-watch(
-	() => searchParams.shopId,
-	() => {
-		handleSearch();
-	}
-);
-
-// 监听时间粒度变化，自动更新数据
-watch(
-	() => searchParams.granularity,
-	() => {
-		handleSearch();
-	}
-);
-
+const granularityOptions = [
+	{ label: '小时', value: 'hour' },
+	{ label: '日', value: 'day' },
+	{ label: '周', value: 'week' },
+	{ label: '月', value: 'month' },
+	{ label: '季度', value: 'quarter' },
+	{ label: '年', value: 'year' },
+];
+const searchParams = reactive({ shopId: 'all', shopKeyword: '', dateRange: [], granularity: 'day' });
+const dateShortcuts = [
+	{
+		text: '最近7天',
+		value: () => {
+			const end = new Date();
+			const start = new Date();
+			start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+			return [start, end];
+		},
+	},
+	{
+		text: '最近30天',
+		value: () => {
+			const end = new Date();
+			const start = new Date();
+			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+			return [start, end];
+		},
+	},
+	{
+		text: '最近90天',
+		value: () => {
+			const end = new Date();
+			const start = new Date();
+			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+			return [start, end];
+		},
+	},
+	{
+		text: '今年',
+		value: () => {
+			const end = new Date();
+			const start = new Date(new Date().getFullYear(), 0, 1);
+			return [start, end];
+		},
+	},
+	{
+		text: '去年',
+		value: () => {
+			const end = new Date(new Date().getFullYear() - 1, 11, 31);
+			const start = new Date(new Date().getFullYear() - 1, 0, 1);
+			return [start, end];
+		},
+	},
+];
 interface Shop {
 	id: string;
 	name: string;
 	type: string;
 	status: string;
 }
-
 const shopList = ref<Shop[]>([]);
-
-// 模拟店铺列表数据
-const getMockShopList = () => {
-	return [
-		{ id: '1', name: '店铺A', type: 'physical', status: 'active' },
-		{ id: '2', name: '店铺B', type: 'online', status: 'active' },
-		{ id: '3', name: '店铺C', type: 'physical', status: 'active' },
-		{ id: '4', name: '店铺D', type: 'online', status: 'active' },
-		{ id: '5', name: '店铺E', type: 'physical', status: 'active' },
-	];
-};
-
+const filteredShopList = computed(() => {
+	const keyword = searchParams.shopKeyword.trim().toLowerCase();
+	if (!keyword) return shopList.value;
+	return shopList.value.filter((shop) => shop.name.toLowerCase().includes(keyword) || String(shop.id).toLowerCase().includes(keyword));
+});
+const pagination = reactive({ currentPage: 1, pageSize: 5, total: 0 });
+const pagedShopList = computed(() =>
+	filteredShopList.value.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize)
+);
 const statsData = reactive({
 	totalSales: 1258000,
 	orderCount: 5230,
@@ -215,161 +198,202 @@ const statsData = reactive({
 	refundRateChange: -0.5,
 	logisticsRateGrowth: 1.2,
 });
-
 const salesChartRef = ref();
 let salesChart: echarts.ECharts | null = null;
-
-// 计算选中的店铺名称
+const getMockShopList = () => [
+	{ id: '1', name: '店铺A', type: 'physical', status: 'active' },
+	{ id: '2', name: '店铺B', type: 'online', status: 'active' },
+	{ id: '3', name: '店铺C', type: 'physical', status: 'active' },
+	{ id: '4', name: '店铺D', type: 'online', status: 'active' },
+	{ id: '5', name: '店铺E', type: 'physical', status: 'active' },
+];
 const selectedShopName = computed(() => {
-	if (!searchParams.shopId) return '全部店铺';
-	const shop = shopList.value.find((s) => s.id === searchParams.shopId);
+	if (searchParams.shopId === 'all') return '全部店铺';
+	const shop = shopList.value.find((s) => String(s.id) === searchParams.shopId);
 	return shop ? shop.name : '未知店铺';
 });
-
-// 模拟销售趋势数据
-const getMockSalesTrend = (shopId: string) => {
-	let dates: string[] = [];
-	const baseSales = shopId ? 800000 + parseInt(shopId) * 100000 : 1000000;
-	const baseOrders = shopId ? 3000 + parseInt(shopId) * 500 : 4000;
-
-	// 根据时间粒度生成不同的时间标签
-	switch (searchParams.granularity) {
-		case 'hour':
-			dates = ['0时', '4时', '8时', '12时', '16时', '20时'];
-			break;
-		case 'day':
-			dates = ['1日', '5日', '10日', '15日', '20日', '25日'];
-			break;
-		case 'week':
-			dates = ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'];
-			break;
-		case 'month':
-			dates = ['1月', '2月', '3月', '4月', '5月', '6月'];
-			break;
-		case 'quarter':
-			dates = ['Q1', 'Q2', 'Q3', 'Q4'];
-			break;
-		case 'year':
-			dates = ['2022年', '2023年', '2024年', '2025年', '2026年'];
-			break;
-		default:
-			dates = ['1月', '2月', '3月', '4月', '5月', '6月'];
+const DAY_IN_MS = 24 * 60 * 60 * 1000;
+const toDate = (value?: string | Date) => {
+	if (!value) return new Date();
+	return value instanceof Date ? new Date(value.getTime()) : new Date(`${value}T00:00:00`);
+};
+const formatDate = (date: Date) => {
+	const year = date.getFullYear();
+	const month = `${date.getMonth() + 1}`.padStart(2, '0');
+	const day = `${date.getDate()}`.padStart(2, '0');
+	return `${year}-${month}-${day}`;
+};
+const getDateRange = () => {
+	if (Array.isArray(searchParams.dateRange) && searchParams.dateRange.length === 2) {
+		const [start, end] = searchParams.dateRange as Array<string | Date>;
+		return { start: toDate(start), end: toDate(end) };
+	}
+	const end = new Date();
+	const start = new Date(end.getTime() - 6 * DAY_IN_MS);
+	return { start, end };
+};
+const getWeekLabel = (date: Date) => {
+	const firstDay = new Date(date.getFullYear(), 0, 1);
+	const dayOffset = Math.floor((date.getTime() - firstDay.getTime()) / DAY_IN_MS);
+	return `${date.getFullYear()}年第${Math.floor(dayOffset / 7) + 1}周`;
+};
+const getQuarterLabel = (date: Date) => `${date.getFullYear()}年Q${Math.floor(date.getMonth() / 3) + 1}`;
+const buildTrendLabels = () => {
+	const { start, end } = getDateRange();
+	const labels: string[] = [];
+	const cursor = new Date(start.getTime());
+	if (searchParams.granularity === 'hour') {
+		return Array.from({ length: 24 }, (_, index) => `${index}:00`);
+	}
+	if (searchParams.granularity === 'day') {
+		while (cursor <= end) {
+			labels.push(formatDate(cursor));
+			cursor.setDate(cursor.getDate() + 1);
+		}
+		return labels;
+	}
+	if (searchParams.granularity === 'week') {
+		while (cursor <= end) {
+			labels.push(getWeekLabel(cursor));
+			cursor.setDate(cursor.getDate() + 7);
+		}
+		return [...new Set(labels)];
+	}
+	if (searchParams.granularity === 'month') {
+		cursor.setDate(1);
+		while (cursor <= end) {
+			labels.push(`${cursor.getFullYear()}-${`${cursor.getMonth() + 1}`.padStart(2, '0')}`);
+			cursor.setMonth(cursor.getMonth() + 1);
+		}
+		return labels;
+	}
+	if (searchParams.granularity === 'quarter') {
+		cursor.setMonth(Math.floor(cursor.getMonth() / 3) * 3, 1);
+		while (cursor <= end) {
+			labels.push(getQuarterLabel(cursor));
+			cursor.setMonth(cursor.getMonth() + 3);
+		}
+		return [...new Set(labels)];
+	}
+	cursor.setMonth(0, 1);
+	while (cursor <= end) {
+		labels.push(`${cursor.getFullYear()}年`);
+		cursor.setFullYear(cursor.getFullYear() + 1);
+	}
+	return [...new Set(labels)];
+};
+const getMockSalesTrend = (shopId: string) => {
+	const selectedShopId = shopId === 'all' ? 0 : parseInt(shopId, 10) || 0;
+	const labels = buildTrendLabels();
+	const baseSales = 880000 + selectedShopId * 120000;
+	const baseOrders = 3200 + selectedShopId * 380;
+	return labels.map((date, index) => {
+		const trendFactor = 1 + index * 0.035;
+		const seasonalFactor = 0.92 + ((index + selectedShopId) % 5) * 0.045;
+		return {
+			date,
+			sales: Math.round(baseSales * trendFactor * seasonalFactor),
+			orders: Math.round(baseOrders * trendFactor * (0.95 + (index % 4) * 0.03)),
+		};
+	});
+};
+const syncSelectedShop = () => {
+	if (searchParams.shopId === 'all') return;
+	const hasSelectedShop = filteredShopList.value.some((shop) => String(shop.id) === searchParams.shopId);
+	if (!hasSelectedShop) {
+		searchParams.shopId = 'all';
 	}
-
-	return dates.map((date) => ({
-		date,
-		sales: baseSales + Math.random() * 500000,
-		orders: baseOrders + Math.random() * 2000,
-	}));
 };
-
 const handleSearch = () => {
-	// 使用模拟数据
-	const mockData = {
-		totalSales: 1258000 + Math.random() * 100000,
-		orderCount: 5230 + Math.random() * 500,
-		refundRate: 2.5 + Math.random() * 1,
-		logisticsRate: 98.2 + Math.random() * 1,
-		salesGrowth: 15.8 + Math.random() * 5,
-		orderGrowth: 12.3 + Math.random() * 3,
-		refundRateChange: -0.5 + Math.random() * 1,
-		logisticsRateGrowth: 1.2 + Math.random() * 0.5,
-		salesTrend: getMockSalesTrend(searchParams.shopId),
-	};
-	Object.assign(statsData, mockData);
-	initSalesChart(mockData.salesTrend);
+	pagination.currentPage = 1;
+	syncSelectedShop();
+	pagination.total = filteredShopList.value.length;
+	const salesTrend = getMockSalesTrend(searchParams.shopId);
+	const totalSales = salesTrend.reduce((sum, item) => sum + item.sales, 0);
+	const totalOrders = salesTrend.reduce((sum, item) => sum + item.orders, 0);
+	const selectedShopId = searchParams.shopId === 'all' ? 0 : parseInt(searchParams.shopId, 10) || 0;
+	Object.assign(statsData, {
+		totalSales,
+		orderCount: totalOrders,
+		refundRate: Number((2.1 + selectedShopId * 0.18).toFixed(2)),
+		logisticsRate: Number((97.2 + selectedShopId * 0.25).toFixed(2)),
+		salesGrowth: Number((8 + salesTrend.length * 0.6 + selectedShopId).toFixed(1)),
+		orderGrowth: Number((6 + salesTrend.length * 0.45 + selectedShopId * 0.8).toFixed(1)),
+		refundRateChange: Number((-0.8 + selectedShopId * 0.12).toFixed(1)),
+		logisticsRateGrowth: Number((0.6 + salesTrend.length * 0.08).toFixed(1)),
+	});
+	initSalesChart(salesTrend);
 };
-
 const handleReset = () => {
-	searchParams.shopId = '';
+	searchParams.shopId = 'all';
+	searchParams.shopKeyword = '';
 	searchParams.dateRange = [];
 	searchParams.granularity = 'day';
+	pagination.currentPage = 1;
+	handleSearch();
 };
-
 const handleShopClick = (shop: Shop) => {
-	searchParams.shopId = shop.id;
+	searchParams.shopId = String(shop.id);
 	handleSearch();
 };
-
 const handleShopSelect = (shopId: string) => {
-	searchParams.shopId = shopId;
+	searchParams.shopId = String(shopId);
 	handleSearch();
 };
-
+const handleSizeChange = (size: number) => {
+	pagination.pageSize = size;
+	pagination.currentPage = 1;
+};
+const handleCurrentChange = (current: number) => {
+	pagination.currentPage = current;
+};
 const initSalesChart = (salesTrend: any[]) => {
 	if (!salesChartRef.value) return;
-
-	if (salesChart) {
-		salesChart.dispose();
-	}
-
+	if (salesChart) salesChart.dispose();
 	salesChart = echarts.init(salesChartRef.value);
-
-	const option = {
-		tooltip: {
-			trigger: 'axis',
-			axisPointer: {
-				type: 'cross',
-				label: {
-					backgroundColor: '#6a7985',
-				},
-			},
-		},
-		legend: {
-			data: ['销售额', '订单量'],
-		},
-		grid: {
-			left: '3%',
-			right: '4%',
-			bottom: '3%',
-			containLabel: true,
-		},
-		xAxis: {
-			type: 'category',
-			boundaryGap: false,
-			data: salesTrend.map((item) => item.date),
-		},
+	const isSingle = salesTrend.length <= 1;
+	salesChart.setOption({
+		tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } },
+		legend: { data: ['销售额', '订单量'] },
+		grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+		xAxis: { type: 'category', boundaryGap: isSingle, data: salesTrend.map((item) => item.date) },
 		yAxis: [
-			{
-				type: 'value',
-				name: '销售额',
-				position: 'left',
-			},
-			{
-				type: 'value',
-				name: '订单量',
-				position: 'right',
-			},
+			{ type: 'value', name: '销售额', position: 'left' },
+			{ type: 'value', name: '订单量', position: 'right' },
 		],
 		series: [
-			{
-				name: '销售额',
-				type: 'line',
-				data: salesTrend.map((item) => item.sales),
-				smooth: true,
-			},
+			{ name: '销售额', type: 'line', data: salesTrend.map((item) => item.sales), smooth: true, showSymbol: true, symbolSize: isSingle ? 10 : 6 },
 			{
 				name: '订单量',
 				type: 'line',
 				yAxisIndex: 1,
 				data: salesTrend.map((item) => item.orders),
 				smooth: true,
+				showSymbol: true,
+				symbolSize: isSingle ? 10 : 6,
 			},
 		],
-	};
-
-	salesChart.setOption(option);
-};
-
-onMounted(() => {
-	// 初始化店铺列表
-	shopList.value = getMockShopList();
-	// 初始化数据
-	handleSearch();
-
-	window.addEventListener('resize', () => {
-		salesChart?.resize();
 	});
+};
+watch(
+	() => filteredShopList.value.length,
+	(length) => {
+		pagination.total = length;
+		const maxPage = Math.max(1, Math.ceil(length / pagination.pageSize));
+		if (pagination.currentPage > maxPage) {
+			pagination.currentPage = maxPage;
+		}
+	}
+);
+watch(
+	() => searchParams.granularity,
+	() => handleSearch()
+);
+onMounted(() => {
+	shopList.value = getMockShopList();
+	pagination.total = shopList.value.length;
+	handleSearch();
+	window.addEventListener('resize', () => salesChart?.resize());
 });
 </script>
 
@@ -377,67 +401,71 @@ onMounted(() => {
 .trade-operation-stats-shop {
 	padding: 20px;
 }
-
 .card-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
 	font-size: 16px;
-	font-weight: bold;
+	font-weight: 600;
 }
-
 .search-container {
-	margin-bottom: 20px;
+	margin-bottom: 16px;
 }
-
 .search-form {
 	display: flex;
 	align-items: center;
+	flex-wrap: wrap;
+}
+.search-form :deep(.el-form-item) {
+	margin-right: 12px;
+	margin-bottom: 12px;
+}
+.granularity-group {
+	flex-wrap: wrap;
 }
-
 .stats-cards {
 	display: grid;
 	grid-template-columns: repeat(4, 1fr);
 	gap: 20px;
 	margin-bottom: 20px;
 }
-
 .stats-card {
 	text-align: center;
 	padding: 20px;
 }
-
 .stats-card-title {
 	font-size: 14px;
 	color: #606266;
 	margin-bottom: 10px;
 }
-
 .stats-card-value {
 	font-size: 24px;
 	font-weight: bold;
 	margin-bottom: 5px;
 }
-
 .stats-card-change {
 	font-size: 12px;
 }
-
 .positive {
 	color: #67c23a;
 }
-
 .negative {
 	color: #f56c6c;
 }
-
 .chart-container {
-	margin: 20px 0;
+	margin: 0 0 20px;
 }
-
 .chart {
 	width: 100%;
 	height: 400px;
 }
-
 .shop-list {
 	margin-top: 20px;
 }
+.pagination-container {
+	margin-top: 16px;
+	display: flex;
+	justify-content: flex-end;
+}
 </style>
+