diff --git a/gear-ui3/src/layout/components/Navbar.vue b/gear-ui3/src/layout/components/Navbar.vue index ba0a337..ab2db22 100644 --- a/gear-ui3/src/layout/components/Navbar.vue +++ b/gear-ui3/src/layout/components/Navbar.vue @@ -10,12 +10,12 @@ - +
- + - + - +
@@ -37,7 +20,7 @@ import { useStorage } from '@vueuse/core'; import { ElRow, ElCol } from 'element-plus'; // 1. 导入所有图表子组件(不变) -import OrderTrendChart from '../components/OrderTrendChart.vue'; +import OrderTrendChart from '../components/OrderTrendChart.vue'; import ProductSalesRank from '../components/ProductSalesRank.vue'; import CustomerFollowStatus from '../components/CustomerFollowStatus.vue'; import ReturnExchangeAnalysis from '../components/ReturnExchangeAnalysis.vue'; @@ -61,68 +44,120 @@ const chartComponentMap = { // 3. 图表默认配置数组:新增height默认值(核心修改) const DEFAULT_CHART_CONFIGS = [ { - id: 'order-trend', - componentName: 'OrderTrendChart', - title: '订单趋势图表', - dataKey: 'orders', - height: 400, // 新增:默认高度400px - layout: { xs:24, sm:24, md:12, lg:12, xl:12 } + "id": "product-rank", + "componentName": "ProductSalesRank", + "title": "产品销售排行图表", + "dataKey": "orderDetails", + "layout": { + "xs": 24, + "sm": 24, + "md": 8, + "lg": "8", + "xl": 12 + }, + "height": 400 }, { - id: 'product-rank', - componentName: 'ProductSalesRank', - title: '产品销售排行图表', - dataKey: 'orderDetails', - height: 400, // 新增:默认高度400px - layout: { xs:24, sm:24, md:12, lg:12, xl:12 } + "id": "customer-follow", + "componentName": "CustomerFollowStatus", + "title": "客户跟进状态图表", + "dataKey": "customers", + "layout": { + "xs": 24, + "sm": 24, + "md": 8, + "lg": "8", + "xl": 12 + }, + "height": 400 }, { - id: 'sales-manager', - componentName: 'SalesByManagerChart', - title: '负责人订单汇总', - dataKey: 'orders', - height: 400, // 新增:默认高度400px - layout: { xs:24, sm:24, md:12, lg:12, xl:12 } + "id": "sales-metrics", + "componentName": "SalesMetricsCard", + "title": "销售指标图表", + "dataKey": [ + "orders", + "customers", + "returnExchanges" + ], + "layout": { + "xs": 24, + "sm": 24, + "md": 8, + "lg": "8", + "xl": 12 + }, + "height": 200 }, { - id: 'customer-follow', - componentName: 'CustomerFollowStatus', - title: '客户跟进状态图表', - dataKey: 'customers', - height: 400, // 新增:默认高度400px - layout: { xs:24, sm:24, md:12, lg:12, xl:12 } + "id": "order-trend", + "componentName": "OrderTrendChart", + "title": "订单趋势图表", + "dataKey": "orders", + "layout": { + "xs": 24, + "sm": 24, + "md": 12, + "lg": 12, + "xl": 12 + }, + "height": 400 }, { - id: 'return-exchange', - componentName: 'ReturnExchangeAnalysis', - title: '退换货分析图表', - dataKey: 'returnExchanges', - height: 400, // 新增:默认高度400px - layout: { xs:24, sm:24, md:12, lg:12, xl:12 } + "id": "sales-manager", + "componentName": "SalesByManagerChart", + "title": "负责人订单汇总", + "dataKey": "orders", + "layout": { + "xs": 24, + "sm": 24, + "md": 12, + "lg": 12, + "xl": 12 + }, + "height": 400 }, { - id: 'sales-customer', - componentName: 'SalesByCustomerChart', - title: '客户订单汇总', - dataKey: 'orders', - height: 400, // 新增:默认高度400px - layout: { xs:24, sm:24, md:12, lg:12, xl:12 } + "id": "return-exchange", + "componentName": "ReturnExchangeAnalysis", + "title": "退换货分析图表", + "dataKey": "returnExchanges", + "layout": { + "xs": 24, + "sm": 24, + "md": 12, + "lg": 12, + "xl": 12 + }, + "height": 400 }, { - id: 'sales-metrics', - componentName: 'SalesMetricsCard', - title: '销售指标图表', - dataKey: ['orders', 'customers', 'returnExchanges'], - height: 200, // 新增:指标卡高度较小,默认200px - layout: { xs:24, sm:24, md:12, lg:12, xl:12 } + "id": "sales-customer", + "componentName": "SalesByCustomerChart", + "title": "客户订单汇总", + "dataKey": "orders", + "layout": { + "xs": 24, + "sm": 24, + "md": 12, + "lg": 12, + "xl": 12 + }, + "height": 400 }, { - id: 'recent-orders', - componentName: 'RecentOrdersTable', - title: '最近订单', - dataKey: 'orders', - height: 500, // 新增:表格高度较大,默认500px - layout: { xs:24, sm:24, md:12, lg:12, xl:12 } + "id": "recent-orders", + "componentName": "RecentOrdersTable", + "title": "最近订单", + "dataKey": "orders", + "layout": { + "xs": 24, + "sm": 24, + "md": "24", + "lg": "24", + "xl": "24" + }, + "height": 400 } ]; @@ -158,7 +193,7 @@ const getChartProps = (chartConfig) => { o[key.replace(/([A-Z])/g, '-$1').toLowerCase()] = dataMap[key]; }); return o; - } + } return { [chartConfig.dataKey.replace(/([A-Z])/g, '-$1').toLowerCase()]: dataMap[chartConfig.dataKey], title: chartConfig.title @@ -195,7 +230,8 @@ const getChartProps = (chartConfig) => { /* 图表项:100%高度继承列容器(核心修改) */ .chart-item { width: 100%; - height: 100%; /* 关键:让组件填满列容器高度 */ + height: 100%; + /* 关键:让组件填满列容器高度 */ background-color: #1e293b; border-radius: 8px; padding: 16px; @@ -210,6 +246,7 @@ const getChartProps = (chartConfig) => { .charts-container { padding: 10px; } + .chart-item { padding: 12px; } diff --git a/gear-ui3/src/views/index.vue b/gear-ui3/src/views/index.vue index cde14b1..59f540e 100644 --- a/gear-ui3/src/views/index.vue +++ b/gear-ui3/src/views/index.vue @@ -145,7 +145,7 @@ const deleteModule = (index) => {