From b293cbd04f202a4da08f5ea990ccc15a1854a8b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Fri, 5 Sep 2025 14:05:07 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E5=8F=AF=E8=A7=86=E5=8C=96?=
 =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gear-ui3/src/components/AllApplications.vue   |   3 +-
 .../components/RecentOrdersTable.vue          | 214 ++++++++
 .../components/SalesByCustomerChart.vue       |   2 +
 .../dashboard/components/SalesMetricsCard.vue | 119 ++++
 gear-ui3/src/views/dashboard/grid/index.vue   | 191 +++----
 gear-ui3/src/views/dashboard/grid/setting.vue | 518 +++++++++++-------
 gear-ui3/src/views/dashboard/index.vue        |  18 +-
 gear-ui3/src/views/dashboard/layout/index.vue |   2 +-
 8 files changed, 752 insertions(+), 315 deletions(-)
 create mode 100644 gear-ui3/src/views/dashboard/components/RecentOrdersTable.vue
 create mode 100644 gear-ui3/src/views/dashboard/components/SalesMetricsCard.vue

diff --git a/gear-ui3/src/components/AllApplications.vue b/gear-ui3/src/components/AllApplications.vue
index 6be0684..dd8f1f5 100644
--- a/gear-ui3/src/components/AllApplications.vue
+++ b/gear-ui3/src/components/AllApplications.vue
@@ -63,9 +63,8 @@ export default {
   computed: {
     filteredMenus() {
       const filterHidden = (menus) => {
-        console.log(menus)
         return menus
-          .filter(menu => menu.hidden !== true)
+          .filter(menu => menu.hidden !== true && menu?.meta?.title != '综合大屏')
           .map(menu => {
             if (menu.children) {
               menu.children = filterHidden(menu.children)
diff --git a/gear-ui3/src/views/dashboard/components/RecentOrdersTable.vue b/gear-ui3/src/views/dashboard/components/RecentOrdersTable.vue
new file mode 100644
index 0000000..f5cfbd5
--- /dev/null
+++ b/gear-ui3/src/views/dashboard/components/RecentOrdersTable.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="orders-table-card">
+    <div class="card-header">
+      <h3 class="card-title">最近订单列表</h3>
+      <el-input 
+        v-model="searchKeyword" 
+        placeholder="搜索订单编号/客户名称" 
+        size="small" 
+        :prefix-icon="Search"
+        style="width: 200px;"
+      />
+    </div>
+    <el-table 
+      :data="paginatedOrders" 
+      border 
+      style="width: 100%"
+      :header-cell-style="{ background: '#0a0f1a', color: '#e0e7ff' }"
+      :row-style="{ background: '#0a0f1a' }"
+      :row-class-name="stripeRowClassName"
+      :show-header="false"
+    >
+      <el-table-column prop="orderCode" label="订单编号" />
+      <el-table-column prop="customerId" label="客户"  />
+      <el-table-column prop="salesManager" label="销售经理" />
+      <el-table-column 
+        prop="taxAmount" 
+        label="订单金额" 
+        align="right"
+        :formatter="(row) => `¥${Number(row.taxAmount).toFixed(2)}`"
+      />
+      <el-table-column 
+        prop="orderStatus" 
+        label="订单状态" 
+        align="center"
+      >
+        <template #default="scope">
+          <dict-tag :value="scope.row.orderStatus" :options="order_status" />
+        </template>
+      </el-table-column>
+      <!-- <el-table-column label="操作" width="120" align="center">
+        <template #default="scope">
+          <el-button 
+            size="small" 
+            type="text" 
+            @click="viewOrderDetail(scope.row)"
+          >
+            查看详情
+          </el-button>
+        </template>
+      </el-table-column> -->
+    </el-table>
+    <!-- <el-pagination
+      v-model:current-page="currentPage"
+      v-model:page-size="pageSize"
+      :page-sizes="[10, 20, 50]"
+      :total="totalOrders"
+      layout="total, prev, pager, next, jumper"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      class="mt-4 flex justify-end"
+    /> -->
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { Search } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+
+const { proxy } = getCurrentInstance();
+const { order_status } = proxy.useDict('order_status');
+
+const props = defineProps({
+  orders: { type: Array, default: () => [] },
+});
+
+// 表格状态
+const searchKeyword = ref('');
+const currentPage = ref(1);
+const pageSize = ref(10);
+
+// 计算属性：筛选与分页
+const totalOrders = computed(() => props.orders.length);
+const filteredOrders = computed(() => {
+  return props.orders.filter(order => 
+    order.orderCode.includes(searchKeyword.value) || 
+    (order.customerName || '').includes(searchKeyword.value)
+  );
+});
+const paginatedOrders = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value;
+  return filteredOrders.value.slice(start, start + pageSize.value);
+});
+
+// 斑马纹行类名（增强可读性）
+const stripeRowClassName = ({ rowIndex }) => {
+  return rowIndex % 2 === 1 ? 'stripe-row' : '';
+};
+
+// 分页事件
+const handleSizeChange = (val) => {
+  pageSize.value = val;
+};
+const handleCurrentChange = (val) => {
+  currentPage.value = val;
+};
+
+// 查看订单详情
+const viewOrderDetail = (row) => {
+  ElMessage.info(`查看订单 ${row.orderCode} 详情`);
+};
+</script>
+
+<style scoped>
+/* 卡片容器：深黑色背景 + 立体阴影 */
+.orders-table-card {
+  background: #0a0f1a; /* 纯黑底色，可根据需求调深/浅 */
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); /* 增强阴影，突出层次 */
+  margin-top: 20px;
+}
+
+/* 卡片头部：标题 + 搜索框布局 */
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #f8fafc; /* 亮白色文字 */
+  margin: 0;
+}
+
+/* 🔵 输入框样式覆盖（黑色主题） */
+.el-input {
+  --el-input-bg-color: #0a0f1a;         /* 输入框背景 */
+  --el-input-border-color: #1e293b;     /* 边框色 */
+  --el-input-hover-border-color: #3b82f6; /* hover 时边框变蓝，增强交互 */
+  --el-input-text-color: #f8fafc;       /* 文字色 */
+  --el-input-placeholder-color: #94a3b8;/* 占位符色 */
+}
+
+/* 🔵 表格样式覆盖（黑色主题） */
+.el-table {
+  --el-table-bg-color: #0a0f1a;         /* 表格整体背景 */
+  --el-table-text-color: #f8fafc;       /* 单元格文字色 */
+  --el-table-header-text-color: #e0e7ff;/* 表头文字色（更亮，突出表头） */
+  --el-table-border-color: #1e293b;     /* 边框色 */
+  --el-table-row-hover-bg-color: #1e293b; /*  hover 行背景（浅一级黑色） */
+}
+
+/* 表头单元格：强化背景与边框 */
+.el-table th {
+  border-bottom: 1px solid #1e293b !important;
+  background-color: #0a0f1a !important;
+}
+
+/* 内容单元格：边框样式 */
+.el-table td {
+  border-bottom: 1px solid #1e293b !important;
+}
+
+/* 斑马纹行：交替行背景（更浅的黑色，增强可读性） */
+.stripe-row {
+  background-color: #0f172a !important;
+}
+
+/* 选中行：背景色（ hover 同色，保持统一） */
+.el-table__body tr.current-row > td {
+  background-color: #1e293b !important;
+}
+
+/* 🔵 Tag 组件样式覆盖（黑色主题） */
+.el-tag {
+  --el-tag-bg-color: #0a0f1a;
+  --el-tag-border-color: #1e293b;
+  --el-tag-text-color: #f8fafc;
+  --el-tag-hover-bg-color: #1e293b;
+}
+
+/* 🔵 分页组件样式覆盖（黑色主题） */
+.el-pagination {
+  --el-pagination-font-size: 14px;
+  --el-pagination-text-color: #f8fafc;
+  --el-pagination-disabled-color: #64748b;
+  --el-pagination-item-bg-color: #0a0f1a;
+  --el-pagination-item-border-color: #1e293b;
+  --el-pagination-item-hover-bg-color: #1e293b;
+  --el-pagination-item-hover-border-color: #3b82f6;
+  --el-pagination-item-active-bg-color: #3b82f6; /* 激活页签用蓝色突出 */
+  --el-pagination-item-active-border-color: #3b82f6;
+}
+
+/* 🔵 滚动条美化（可选） */
+.el-table__body-wrapper::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.el-table__body-wrapper::-webkit-scrollbar-track {
+  background: #0a0f1a;
+}
+.el-table__body-wrapper::-webkit-scrollbar-thumb {
+  background: #1e293b;
+  border-radius: 4px;
+}
+.el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
+  background: #334155;
+}
+</style>
\ No newline at end of file
diff --git a/gear-ui3/src/views/dashboard/components/SalesByCustomerChart.vue b/gear-ui3/src/views/dashboard/components/SalesByCustomerChart.vue
index d9324b5..db09fe3 100644
--- a/gear-ui3/src/views/dashboard/components/SalesByCustomerChart.vue
+++ b/gear-ui3/src/views/dashboard/components/SalesByCustomerChart.vue
@@ -20,6 +20,8 @@ const props = defineProps({
   isRefreshing: { type: Boolean, default: false }
 });
 
+console.log(props.orders, '客户订单汇总')
+
 // 图表容器引用
 const barChartRef = ref(null);
 const radarChartRef = ref(null);
diff --git a/gear-ui3/src/views/dashboard/components/SalesMetricsCard.vue b/gear-ui3/src/views/dashboard/components/SalesMetricsCard.vue
new file mode 100644
index 0000000..084f8e0
--- /dev/null
+++ b/gear-ui3/src/views/dashboard/components/SalesMetricsCard.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="metrics-card">
+    <div class="metrics-grid">
+      <!-- 总客户数 -->
+      <div class="metric-item">
+        <div class="metric-value">{{ totalCustomers }}</div>
+        <div class="metric-label">总客户数</div>
+        <div class="metric-trend" :class="customerTrendClass">
+          <el-icon :size="14"><ArrowUp /></el-icon> {{ customerTrend }}%
+        </div>
+      </div>
+      <!-- 总订单数 -->
+      <div class="metric-item">
+        <div class="metric-value">{{ totalOrders }}</div>
+        <div class="metric-label">总订单数</div>
+        <div class="metric-trend" :class="orderTrendClass">
+          <el-icon :size="14"><ArrowUp /></el-icon> {{ orderTrend }}%
+        </div>
+      </div>
+      <!-- 总销售额 -->
+      <div class="metric-item">
+        <div class="metric-value">¥{{ totalSales.toFixed(2) }}</div>
+        <div class="metric-label">总销售额</div>
+        <div class="metric-trend" :class="salesTrendClass">
+          <el-icon :size="14"><ArrowUp /></el-icon> {{ salesTrend }}%
+        </div>
+      </div>
+      <!-- 退换货率 -->
+      <div class="metric-item">
+        <div class="metric-value">{{ returnRate.toFixed(2) }}%</div>
+        <div class="metric-label">退换货率</div>
+        <div class="metric-trend" :class="returnRateTrendClass">
+          <el-icon :size="14"><ArrowDown /></el-icon> {{ returnRateTrend }}%
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';
+
+const props = defineProps({
+  customers: { type: Array, default: () => [] },
+  orders: { type: Array, default: () => [] },
+  returnExchanges: { type: Array, default: () => [] },
+  // 趋势数据（模拟，可从接口扩展）
+  customerTrend: { type: Number, default: 5.2 },
+  orderTrend: { type: Number, default: 8.7 },
+  salesTrend: { type: Number, default: 12.3 },
+  returnRateTrend: { type: Number, default: -2.1 }
+});
+
+// 计算核心指标
+const totalCustomers = computed(() => props.customers.length);
+const totalOrders = computed(() => props.orders.length);
+const totalSales = computed(() => {
+  return props.orders.reduce((sum, order) => sum + Number(order.taxAmount || 0), 0);
+});
+const returnRate = computed(() => {
+  if (totalOrders.value === 0) return 0;
+  return (props.returnExchanges.length / totalOrders.value) * 100;
+});
+
+// 趋势样式（升序绿色，降序红色）
+const customerTrendClass = computed(() => props.customerTrend > 0 ? 'up-trend' : 'down-trend');
+const orderTrendClass = computed(() => props.orderTrend > 0 ? 'up-trend' : 'down-trend');
+const salesTrendClass = computed(() => props.salesTrend > 0 ? 'up-trend' : 'down-trend');
+const returnRateTrendClass = computed(() => props.returnRateTrend > 0 ? 'up-trend' : 'down-trend');
+</script>
+
+<style scoped>
+.metrics-card {
+  background: rgba(15, 23, 42, 0.8);
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+}
+
+.metric-item {
+  text-align: center;
+  padding: 12px;
+  background: rgba(30, 41, 59, 0.5);
+  border-radius: 6px;
+}
+
+.metric-value {
+  font-size: 24px;
+  font-weight: 600;
+  color: #f8fafc;
+  margin-bottom: 6px;
+}
+
+.metric-label {
+  font-size: 14px;
+  color: #94a3b8;
+  margin-bottom: 8px;
+}
+
+.metric-trend {
+  font-size: 12px;
+}
+
+.up-trend {
+  color: #10b981; /* 绿色：上升趋势 */
+}
+
+.down-trend {
+  color: #ef4444; /* 红色：下降趋势 */
+}
+</style>
\ No newline at end of file
diff --git a/gear-ui3/src/views/dashboard/grid/index.vue b/gear-ui3/src/views/dashboard/grid/index.vue
index 2d71a28..7aefd4a 100644
--- a/gear-ui3/src/views/dashboard/grid/index.vue
+++ b/gear-ui3/src/views/dashboard/grid/index.vue
@@ -1,13 +1,13 @@
 <template>
   <!-- 图表容器（含滚动） -->
   <div class="charts-container">
-    <!-- Element 布局：el-row 为行容器，gutter 控制间距 -->
+    <!-- Element 布局：行容器（不变） -->
     <el-row 
       class="charts-row" 
       :gutter="20"
       :style="{ height: `calc(100% - 40px)` }"
     >
-      <!-- 动态渲染图表：遍历持久化后的配置数组 -->
+      <!-- 动态渲染图表：应用高度配置（核心修改） -->
       <el-col
         v-for="(chartConfig, index) in persistedChartConfigs"
         :key="chartConfig.id" 
@@ -17,14 +17,15 @@
         :md="chartConfig.layout.md"
         :lg="chartConfig.layout.lg"
         :xl="chartConfig.layout.xl"
-        :style="{ height: `calc(${100 / Math.ceil(persistedChartConfigs.length / 2)}% - 10px)` }"
+        :style="{ height: `${chartConfig.height || 400}px`, marginBottom: '20px' }"
       >
-        <!-- 动态加载图表组件 -->
+        <!-- 动态加载图表组件：确保组件高度100% -->
         <component
           :is="chartComponentMap[chartConfig.componentName]"
           class="chart-item"
           v-bind="getChartProps(chartConfig)"
           :is-refreshing="isRefreshing"
+          :chart-height="chartConfig.height || 400"
         />
       </el-col>
     </el-row>
@@ -32,150 +33,118 @@
 </template>
 
 <script setup>
-import { useStorage } from '@vueuse/core'; // 导入持久化工具
-import { ElRow, ElCol } from 'element-plus'; // 导入Element布局组件
+import { useStorage } from '@vueuse/core';
+import { ElRow, ElCol } from 'element-plus';
 
-// 1. 导入所有图表子组件
+// 1. 导入所有图表子组件（不变）
 import OrderTrendChart from '../components/OrderTrendChart.vue';  
 import ProductSalesRank from '../components/ProductSalesRank.vue';
 import CustomerFollowStatus from '../components/CustomerFollowStatus.vue';
 import ReturnExchangeAnalysis from '../components/ReturnExchangeAnalysis.vue';
 import SalesByManagerChart from '../components/SalesByManagerChart.vue';
 import SalesByCustomerChart from '../components/SalesByCustomerChart.vue';
+import SalesMetricsCard from '../components/SalesMetricsCard.vue';
+import RecentOrdersTable from '../components/RecentOrdersTable.vue';
 
-// 2. 图表组件映射表：用于动态匹配组件（组件名 → 组件实例）
+// 2. 图表组件映射表（不变）
 const chartComponentMap = {
   OrderTrendChart,
   ProductSalesRank,
   CustomerFollowStatus,
   ReturnExchangeAnalysis,
   SalesByManagerChart,
-  SalesByCustomerChart
+  SalesByCustomerChart,
+  SalesMetricsCard,
+  RecentOrdersTable
 };
 
-// 3. 图表默认配置数组：定义每个图表的基础信息、布局、数据源
+// 3. 图表默认配置数组：新增height默认值（核心修改）
 const DEFAULT_CHART_CONFIGS = [
   {
-    id: 'order-trend', // 唯一标识（不可重复）
-    componentName: 'OrderTrendChart', // 对应组件名（与chartComponentMap匹配）
-    title: '订单趋势图表', // 图表标题（可用于组件内部或表头）
-    dataKey: 'orders', // 数据源key（对应props中的数据字段）
-    layout: { // Element Col 布局配置（span范围：1-24，24为整行）
-      xs: 24,   // 超小屏：独占1行
-      sm: 24,   // 小屏：独占1行
-      md: 12,   // 中屏：占1/2行
-      lg: 12,   // 大屏：占1/2行
-      xl: 12    // 超大屏：占1/2行
-    }
+    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', // 依赖orderDetails数据
-    layout: {
-      xs: 24,
-      sm: 24,
-      md: 12,
-      lg: 12,
-      xl: 12
-    }
+    dataKey: 'orderDetails',
+    height: 400, // 新增：默认高度400px
+    layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
   },
   {
     id: 'sales-manager',
     componentName: 'SalesByManagerChart',
     title: '负责人订单汇总',
-    dataKey: 'orders', // 依赖orders数据
-    layout: {
-      xs: 24,
-      sm: 24,
-      md: 12,
-      lg: 12,
-      xl: 12
-    }
+    dataKey: 'orders',
+    height: 400, // 新增：默认高度400px
+    layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
   },
   {
     id: 'customer-follow',
     componentName: 'CustomerFollowStatus',
     title: '客户跟进状态图表',
-    dataKey: 'customers', // 依赖customers数据
-    layout: {
-      xs: 24,
-      sm: 24,
-      md: 12,
-      lg: 12,
-      xl: 12
-    }
+    dataKey: 'customers',
+    height: 400, // 新增：默认高度400px
+    layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
   },
   {
     id: 'return-exchange',
     componentName: 'ReturnExchangeAnalysis',
     title: '退换货分析图表',
-    dataKey: 'returnExchanges', // 依赖returnExchanges数据
-    layout: {
-      xs: 24,
-      sm: 24,
-      md: 12,
-      lg: 12,
-      xl: 12
-    }
+    dataKey: 'returnExchanges',
+    height: 400, // 新增：默认高度400px
+    layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
   },
   {
     id: 'sales-customer',
     componentName: 'SalesByCustomerChart',
     title: '客户订单汇总',
-    dataKey: 'orders', // 依赖orders数据
-    layout: {
-      xs: 24,
-      sm: 24,
-      md: 12,
-      lg: 12,
-      xl: 12
-    }
+    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'],
+    height: 200, // 新增：指标卡高度较小，默认200px
+    layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
+  },
+  {
+    id: 'recent-orders',
+    componentName: 'RecentOrdersTable',
+    title: '最近订单',
+    dataKey: 'orders',
+    height: 500, // 新增：表格高度较大，默认500px
+    layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
   }
 ];
 
-// 4. 持久化图表配置：用useStorage存入localStorage，key为"saleDashboardChartConfigs"
-// 逻辑：优先读取localStorage中的配置，若无则使用默认配置
+// 4. 持久化图表配置（不变，但默认值包含height）
 const persistedChartConfigs = useStorage(
-  'saleDashboardChartConfigs', // 存储key（自定义，确保唯一）
-  DEFAULT_CHART_CONFIGS,       // 默认值
-  localStorage,                // 存储介质（localStorage/sessionStorage）
-  { mergeDefaults: true }      // 合并默认值与存储值（避免字段缺失）
+  'saleDashboardChartConfigs',
+  DEFAULT_CHART_CONFIGS,
+  localStorage,
+  { mergeDefaults: true }
 );
 
-// 5. 接收父组件传入的数据源与状态
+// 5. 接收父组件传入的数据源与状态（不变）
 const props = defineProps({
-  orders: {
-    type: Array,
-    required: true,
-    default: () => []
-  },
-  orderDetails: {
-    type: Array,
-    required: true,
-    default: () => []
-  },
-  customers: {
-    type: Array,
-    required: true,
-    default: () => []
-  },
-  returnExchanges: {
-    type: Array,
-    required: true,
-    default: () => []
-  },
-  isRefreshing: {
-    type: Boolean,
-    required: true,
-    default: false
-  }
+  orders: { type: Array, required: true, default: () => [] },
+  orderDetails: { type: Array, required: true, default: () => [] },
+  customers: { type: Array, required: true, default: () => [] },
+  returnExchanges: { type: Array, required: true, default: () => [] },
+  isRefreshing: { type: Boolean, required: true, default: false }
 });
 
-// 6. 工具函数：根据图表配置，动态生成组件所需的props
+// 6. 工具函数：传递props（不变）
 const getChartProps = (chartConfig) => {
-  // 映射数据源：根据chartConfig.dataKey匹配props中的数据
   const dataMap = {
     orders: props.orders,
     orderDetails: props.orderDetails,
@@ -183,45 +152,50 @@ const getChartProps = (chartConfig) => {
     returnExchanges: props.returnExchanges
   };
 
-  // 返回该图表需要的props（如OrderTrendChart需要:orders，ProductSalesRank需要:order-details）
+  if (Array.isArray(chartConfig.dataKey)) {
+    const o = { title: chartConfig.title };
+    chartConfig.dataKey.forEach(key => {
+      o[key.replace(/([A-Z])/g, '-$1').toLowerCase()] = dataMap[key];
+    });
+    return o;
+  } 
   return {
-    // 驼峰转连字符（如orderDetails → order-details，匹配组件props定义）
     [chartConfig.dataKey.replace(/([A-Z])/g, '-$1').toLowerCase()]: dataMap[chartConfig.dataKey],
-    title: chartConfig.title // 可选：传递标题给图表组件
+    title: chartConfig.title
   };
 };
 </script>
 
 <style scoped>
-/* 图表容器（含滚动） */
+/* 图表容器（不变） */
 .charts-container {
   width: 100%;
   height: 100%;
   padding: 20px;
   overflow: auto;
   box-sizing: border-box;
-  background-color: #0f172a; /* 继承父组件深色背景 */
+  background-color: #0f172a;
 }
 
-/* Element Row 容器：清除默认margin，确保高度自适应 */
+/* 行容器（不变） */
 .charts-row {
   width: 100%;
   margin: 0;
   display: flex;
   flex-wrap: wrap;
-  align-content: flex-start; /* 顶部对齐，避免空白 */
+  align-content: flex-start;
 }
 
-/* Element Col 容器：控制列的高度与间距 */
+/* 列容器：移除固定高度，由配置动态控制（核心修改） */
 .chart-col {
-  margin-bottom: 20px; /* 行间距，与gutter配合 */
   box-sizing: border-box;
+  /* 高度由父组件style动态设置，此处不固定 */
 }
 
-/* 图表项样式：保持原有设计，适配弹性布局 */
+/* 图表项：100%高度继承列容器（核心修改） */
 .chart-item {
   width: 100%;
-  height: 100%;
+  height: 100%; /* 关键：让组件填满列容器高度 */
   background-color: #1e293b;
   border-radius: 8px;
   padding: 16px;
@@ -231,7 +205,7 @@ const getChartProps = (chartConfig) => {
   flex-direction: column;
 }
 
-/* 小屏幕下优化：减少内边距 */
+/* 小屏幕优化（不变） */
 @media (max-width: 768px) {
   .charts-container {
     padding: 10px;
@@ -239,8 +213,5 @@ const getChartProps = (chartConfig) => {
   .chart-item {
     padding: 12px;
   }
-  .chart-col {
-    margin-bottom: 10px;
-  }
 }
 </style>
\ No newline at end of file
diff --git a/gear-ui3/src/views/dashboard/grid/setting.vue b/gear-ui3/src/views/dashboard/grid/setting.vue
index 83346f3..0edd8e9 100644
--- a/gear-ui3/src/views/dashboard/grid/setting.vue
+++ b/gear-ui3/src/views/dashboard/grid/setting.vue
@@ -3,21 +3,12 @@
     <!-- 面板标题与操作区 -->
     <div class="panel-header">
       <h2 class="panel-title">图表布局设置</h2>
-      <div class="header-actions">
-        <el-button 
-          size="small" 
-          type="primary" 
-          @click="applySettings"
-          :loading="saving"
-        >
+      <div class="header-actions">   
+        <el-button size="small" type="primary" @click="applySettings" :loading="saving">
           <el-icon v-if="saving"><Loading /></el-icon>
           <span>应用设置</span>
         </el-button>
-        <el-button 
-          size="small" 
-          @click="resetToSession"
-          :disabled="saving"
-        >
+        <el-button size="small" @click="resetToSession" :disabled="saving">
           取消修改
         </el-button>
       </div>
@@ -25,106 +16,132 @@
 
     <!-- 配置内容区 -->
     <div class="settings-content">
-      <!-- 布局预览 -->
-      <div class="layout-preview">
-        <h3 class="section-title">布局预览</h3>
-        <div class="preview-container">
-          <el-row :gutter="10" class="preview-row">
-            <el-col
-              v-for="(chart, index) in tempChartConfigs"
-              :key="chart.id"
-              :span="getPreviewSpan(chart)"
-              class="preview-col"
-              :class="{ 'preview-col-hidden': !chart.visible }"
-            >
-              <div class="preview-chart">
-                <div class="chart-header">
-                  <span class="chart-name">{{ chart.title }}</span>
-                  <el-switch
-                    v-model="chart.visible"
-                    size="small"
-                    active-color="#1677ff"
-                  />
-                </div>
-                <div class="chart-placeholder">
-                  <span class="chart-id">{{ chart.id }}</span>
-                </div>
-              </div>
-            </el-col>
-          </el-row>
-        </div>
-      </div>
-
-      <!-- 图表配置列表 -->
       <div class="charts-config">
-        <h3 class="section-title">图表配置</h3>
-        <el-table
-          :data="tempChartConfigs"
-          border
-          size="small"
-          :height="tableHeight"
-        >
-          <el-table-column
-            prop="title"
-            label="图表名称"
-            width="200"
-          />
-          <el-table-column
-            prop="id"
-            label="标识"
-            width="160"
-          />
-          <el-table-column label="显示状态">
+        <h3 class="section-title">
+          图表配置
+        </h3>
+
+        <!-- 直接保留表格，移除draggable包裹 -->
+        <el-table 
+          border 
+          size="small" 
+          :height="tableHeight" 
+          row-key="id"
+          :data="tempChartConfigs">
+          <el-table-column prop="title" label="图表名称" min-width="120" />
+          <el-table-column prop="id" label="标识" min-width="100" />
+
+          <!-- 图表高度配置列 -->
+          <el-table-column label="图表高度" min-width="120">
             <template #default="scope">
-              <el-switch
-                v-model="scope.row.visible"
-                size="small"
-                active-color="#1677ff"
-              />
+              <el-input 
+                v-model.number="scope.row.height" 
+                size="small" 
+                type="number" 
+                :min="100" 
+                :max="1000"
+                placeholder="px (100-1000)" 
+                @input="validateHeight(scope.row, scope.$index)"
+                :disabled="saving" />
+              <div v-if="heightErrorIndex === scope.$index" class="height-error">
+                请输入100-1000之间的有效数字
+              </div>
             </template>
           </el-table-column>
-          <!-- 布局尺寸配置 -->
-          <el-table-column label="超小屏 (≤768px)">
+
+          <!-- 布局配置列 -->
+          <el-table-column label="超小屏 (≤768px)" min-width="120">
             <template #default="scope">
-              <el-select
-                v-model="scope.row.layout.xs"
-                size="small"
-                :disabled="!scope.row.visible"
-              >
+              <el-select 
+                v-model="scope.row.layout.xs" 
+                size="small" 
+                append-to="#full-dashboard-container"
+                :disabled="saving">
                 <el-option :value="24">独占一行</el-option>
                 <el-option :value="12">半行宽度</el-option>
+                <el-option :value="8">三分之一</el-option>
+                <el-option :value="6">四分之一</el-option>
               </el-select>
             </template>
           </el-table-column>
-          <el-table-column label="中大屏 (≥992px)">
+          
+          <el-table-column label="小屏 (≥768px)" min-width="120">
             <template #default="scope">
-              <el-select
-                v-model="scope.row.layout.md"
-                size="small"
-                :disabled="!scope.row.visible"
-              >
+              <el-select 
+                v-model="scope.row.layout.sm" 
+                size="small" 
+                append-to="#full-dashboard-container"
+                :disabled="saving">
                 <el-option :value="24">独占一行</el-option>
                 <el-option :value="12">半行宽度</el-option>
+                <el-option :value="8">三分之一</el-option>
+                <el-option :value="6">四分之一</el-option>
               </el-select>
             </template>
           </el-table-column>
-          <el-table-column label="操作">
+          
+          <el-table-column label="中屏 (≥992px)" min-width="120">
             <template #default="scope">
-              <el-button
-                size="small"
-                text
+              <el-select 
+                v-model="scope.row.layout.md" 
+                size="small" 
+                append-to="#full-dashboard-container"
+                :disabled="saving">
+                <el-option :value="24">独占一行</el-option>
+                <el-option :value="12">半行宽度</el-option>
+                <el-option :value="8">三分之一</el-option>
+                <el-option :value="6">四分之一</el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          
+          <el-table-column label="大屏 (≥1200px)" min-width="120">
+            <template #default="scope">
+              <el-select 
+                v-model="scope.row.layout.lg" 
+                size="small" 
+                append-to="#full-dashboard-container"
+                :disabled="saving">
+                <el-option value="24">独占一行</el-option>
+                <el-option value="12">半行宽度</el-option>
+                <el-option value="8">三分之一</el-option>
+                <el-option value="6">四分之一</el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          
+          <el-table-column label="超大屏 (≥1920px)" min-width="120">
+            <template #default="scope">
+              <el-select 
+                v-model="scope.row.layout.xl" 
+                size="small" 
+                append-to="#full-dashboard-container"
+                :disabled="saving">
+                <el-option value="24">独占一行</el-option>
+                <el-option value="12">半行宽度</el-option>
+                <el-option value="8">三分之一</el-option>
+                <el-option value="6">四分之一</el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          
+          <el-table-column label="操作" width="120" align="center">
+            <template #default="scope">
+              <el-button 
+                size="small" 
+                type="primary" 
+                text 
                 @click="moveChart(scope.$index, 'up')"
-                :disabled="scope.$index === 0"
-              >
-                上移
+                :disabled="scope.$index === 0 || saving"
+                icon="ArrowUp">
               </el-button>
-              <el-button
-                size="small"
-                text
+              <el-button 
+                size="small" 
+                type="primary" 
+                text 
                 @click="moveChart(scope.$index, 'down')"
-                :disabled="scope.$index === tempChartConfigs.length - 1"
-              >
-                下移
+                :disabled="scope.$index === tempChartConfigs.length - 1 || saving"
+                icon="ArrowDown">
               </el-button>
             </template>
           </el-table-column>
@@ -134,22 +151,22 @@
 
     <!-- 提示信息 -->
     <div class="settings-footer">
-      <el-alert
-        title="提示：取消修改将恢复到打开设置时的状态"
-        type="info"
-        size="small"
-        :closable="false"
-      />
+      <el-alert 
+        title="提示：可通过上下按钮调整图表顺序，取消修改将恢复到打开设置时的状态" 
+        type="info" 
+        size="small" 
+        :closable="false" />
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, reactive } from 'vue';
 import { useStorage } from '@vueuse/core';
 import { useEventListener } from '@vueuse/core';
-import { ElMessage } from 'element-plus';
-import { Loading } from '@element-plus/icons-vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { Loading, ArrowUp, ArrowDown, Grid } from '@element-plus/icons-vue';
+// 移除draggable组件导入
 
 // 接收存储键名props
 const props = defineProps({
@@ -160,10 +177,10 @@ const props = defineProps({
   }
 });
 
-// 从storage读取配置，不设置预设默认值
+// 从storage读取配置
 const persistedChartConfigs = useStorage(
   props.storageKey,
-  [],  // 空数组作为初始值，不预设默认配置
+  [],
   localStorage,
   {
     serializer: {
@@ -175,7 +192,7 @@ const persistedChartConfigs = useStorage(
           if (Array.isArray(v)) {
             return v;
           }
-          return [];  // 解析失败时返回空数组
+          return [];
         } catch (e) {
           console.error('解析存储的图表配置失败，使用空配置:', e);
           return [];
@@ -183,19 +200,37 @@ const persistedChartConfigs = useStorage(
       },
       write: (v) => JSON.stringify(v)
     },
-    mergeDefaults: false  // 关闭默认值合并
+    mergeDefaults: false
   }
 );
 
-// 临时配置（用于编辑）
+// 临时配置
 const tempChartConfigs = ref([]);
-// 保存弹窗打开时的初始配置快照（直接来自storage）
+// 初始配置快照
 const initialChartConfigs = ref([]);
 // 保存状态
 const saving = ref(false);
+// 移除拖拽状态变量：isDragging
+
 // 窗口尺寸响应
 const windowWidth = ref(window.innerWidth);
 const tableHeight = ref(300);
+// 高度输入错误标记
+const heightErrorIndex = ref(-1);
+// 批量设置弹窗
+const showBatchSettings = ref(false);
+// 批量设置数据
+const batchSettings = reactive({
+  applyRange: 'all', // 'all' 或 'visible'
+  height: null,
+  layout: {
+    xs: null,
+    sm: null,
+    md: null,
+    lg: null,
+    xl: null
+  }
+});
 
 // 监听窗口尺寸变化
 useEventListener('resize', () => {
@@ -203,35 +238,45 @@ useEventListener('resize', () => {
   calculateTableHeight();
 });
 
-// 初始化：从storage读取数据，并保存初始快照
+// 初始化：补充height默认值
 onMounted(() => {
-  // 确保初始数据是数组
   if (!Array.isArray(persistedChartConfigs.value)) {
     persistedChartConfigs.value = [];
   }
-  // 初始化临时配置和初始快照
   resetToSession();
   calculateTableHeight();
 });
 
 // 计算表格高度
 const calculateTableHeight = () => {
-  tableHeight.value = Math.max(300, window.innerHeight - 500);
+  // 根据屏幕高度动态计算表格高度，确保整体布局合理
+  const panelHeight = window.innerHeight - 220;
+  tableHeight.value = Math.max(300, Math.min(600, panelHeight));
 };
 
-// 重置临时配置为打开弹窗时的状态
+// 重置临时配置：补充height默认值
 const resetToSession = () => {
   try {
-    // 从storage数据读取
-    const source = Array.isArray(persistedChartConfigs.value) 
-      ? persistedChartConfigs.value 
+    const source = Array.isArray(persistedChartConfigs.value)
+      ? persistedChartConfigs.value
       : [];
-    
-    // 深拷贝保存到临时配置和初始快照
-    const configCopy = JSON.parse(JSON.stringify(source));
+
+    // 深拷贝 + 补充height默认值和visible属性
+    const configCopy = JSON.parse(JSON.stringify(source)).map(config => ({
+      ...config,
+      height: config.height || 400,
+      visible: config.visible !== undefined ? config.visible : true,
+      layout: {
+        xs: config.layout?.xs || 24,
+        sm: config.layout?.sm || 24,
+        md: config.layout?.md || 12,
+        lg: config.layout?.lg || 12,
+        xl: config.layout?.xl || 6
+      }
+    }));
+
     tempChartConfigs.value = configCopy;
     initialChartConfigs.value = JSON.parse(JSON.stringify(configCopy));
-    
     ElMessage.info('已恢复到打开设置时的状态');
   } catch (e) {
     console.error('重置配置失败:', e);
@@ -239,39 +284,127 @@ const resetToSession = () => {
   }
 };
 
-// 计算预览区域的span值
-const getPreviewSpan = (chart) => {
-  return Math.floor(chart.layout.md / 4);
+// 高度输入验证
+const validateHeight = (row, index) => {
+  heightErrorIndex.value = -1;
+  if (isNaN(row.height) || row.height < 100 || row.height > 1000) {
+    heightErrorIndex.value = index;
+    return false;
+  }
+  return true;
 };
 
-// 移动图表位置
+// 移动图表位置（按钮控制）- 保留按钮功能，移除拖拽相关逻辑
 const moveChart = (index, direction) => {
+  let newIndex;
   if (direction === 'up' && index > 0) {
-    [tempChartConfigs.value[index], tempChartConfigs.value[index - 1]] = 
-    [tempChartConfigs.value[index - 1], tempChartConfigs.value[index]];
+    newIndex = index - 1;
+    // 交换位置
+    [tempChartConfigs.value[index], tempChartConfigs.value[newIndex]] =
+      [tempChartConfigs.value[newIndex], tempChartConfigs.value[index]];
+    // 触发重绘
+    tempChartConfigs.value = [...tempChartConfigs.value];
+    // 添加动画效果
+    highlightRow(index);
+    highlightRow(newIndex);
   } else if (direction === 'down' && index < tempChartConfigs.value.length - 1) {
-    [tempChartConfigs.value[index], tempChartConfigs.value[index + 1]] = 
-    [tempChartConfigs.value[index + 1], tempChartConfigs.value[index]];
+    newIndex = index + 1;
+    // 交换位置
+    [tempChartConfigs.value[index], tempChartConfigs.value[newIndex]] =
+      [tempChartConfigs.value[newIndex], tempChartConfigs.value[index]];
+    // 触发重绘
+    tempChartConfigs.value = [...tempChartConfigs.value];
+    // 添加动画效果
+    highlightRow(index);
+    highlightRow(newIndex);
   }
 };
 
+// 高亮行（动画效果）- 保留按钮移动后的高亮效果
+const highlightRow = (index) => {
+  const rowEl = document.querySelector(`.el-table__row:nth-child(${index + 1})`);
+  if (rowEl) {
+    rowEl.classList.add('row-highlight');
+    setTimeout(() => {
+      rowEl.classList.remove('row-highlight');
+    }, 600);
+  }
+};
+
+// 应用批量设置
+const applyBatchSettings = () => {
+  // 过滤需要应用设置的图表
+  const targetCharts = batchSettings.applyRange === 'visible'
+    ? tempChartConfigs.value.filter(chart => chart.visible)
+    : tempChartConfigs.value;
+
+  if (targetCharts.length === 0) {
+    ElMessage.warning('没有符合条件的图表可应用设置');
+    return;
+  }
+
+  // 应用设置
+  targetCharts.forEach(chart => {
+    // 应用高度设置
+    if (batchSettings.height !== null && !isNaN(batchSettings.height) && 
+        batchSettings.height >= 100 && batchSettings.height <= 1000) {
+      chart.height = batchSettings.height;
+    }
+    
+    // 应用布局设置
+    Object.keys(batchSettings.layout).forEach(key => {
+      if (batchSettings.layout[key] !== null) {
+        chart.layout[key] = batchSettings.layout[key];
+      }
+    });
+  });
+
+  // 刷新表格
+  tempChartConfigs.value = [...tempChartConfigs.value];
+  showBatchSettings.value = false;
+  ElMessage.success(`已对 ${targetCharts.length} 个图表应用批量设置`);
+};
+
 // 应用设置
 const applySettings = async () => {
   try {
+    // 验证所有高度输入
+    const hasInvalidHeight = tempChartConfigs.value.some((row, index) =>
+      !validateHeight(row, index)
+    );
+    if (hasInvalidHeight) {
+      ElMessage.error('存在无效的高度配置，请修正后重试');
+      return;
+    }
+
+    // 检查是否有可见图表
+    const visibleCharts = tempChartConfigs.value.filter(chart => chart.visible);
+    if (visibleCharts.length === 0) {
+      await ElMessageBox.confirm(
+        '所有图表都处于隐藏状态，确定要应用设置吗？',
+        '确认提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      );
+    }
+
     saving.value = true;
-    
     if (Array.isArray(tempChartConfigs.value)) {
       persistedChartConfigs.value = JSON.parse(JSON.stringify(tempChartConfigs.value));
       emits('config-updated', persistedChartConfigs.value);
-      // 更新初始快照为当前已应用的配置
       initialChartConfigs.value = JSON.parse(JSON.stringify(tempChartConfigs.value));
       ElMessage.success('配置已保存并生效');
     } else {
       throw new Error('配置数据格式错误，必须为数组');
     }
   } catch (error) {
-    console.error('保存配置失败:', error);
-    ElMessage.error('保存配置失败，请重试');
+    if (error !== 'cancel') { // 忽略取消操作的错误
+      console.error('保存配置失败:', error);
+      ElMessage.error('保存配置失败，请重试');
+    }
   } finally {
     saving.value = false;
   }
@@ -288,15 +421,47 @@ defineExpose({
 </script>
 
 <style scoped>
-/* 保持原有样式不变 */
+/* 基础样式 */
 .chart-settings-panel {
   display: flex;
   flex-direction: column;
   height: 100%;
-  min-width: 600px;
+  min-width: 900px;
   padding: 10px;
 }
 
+/* 移除所有拖拽相关样式 */
+
+/* 表格行动画效果 */
+.el-table__body .el-table-row {
+  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
+}
+
+/* 行高亮动画 - 保留按钮移动后的高亮效果 */
+.row-highlight {
+  animation: rowHighlight 0.6s ease;
+}
+
+@keyframes rowHighlight {
+  0% { background-color: rgba(22, 119, 255, 0.2); }
+  100% { background-color: transparent; }
+}
+
+/* 高度错误提示 */
+.height-error {
+  font-size: 12px;
+  color: #ef4444;
+  margin-top: 4px;
+  animation: shake 0.5s;
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
+  20%, 40%, 60%, 80% { transform: translateX(2px); }
+}
+
+/* 其他样式 */
 .panel-header {
   display: flex;
   justify-content: space-between;
@@ -330,65 +495,9 @@ defineExpose({
   font-size: 16px;
   font-weight: 500;
   color: #333;
-}
-
-.layout-preview {
-  padding: 12px;
-  background-color: #f5f7fa;
-  border-radius: 6px;
-}
-
-.preview-container {
-  width: 100%;
-  overflow: hidden;
-}
-
-.preview-row {
-  width: 100%;
-  margin-bottom: 10px !important;
-}
-
-.preview-col {
-  padding: 5px !important;
-}
-
-.preview-col-hidden {
-  opacity: 0.3;
-}
-
-.preview-chart {
-  background-color: white;
-  border: 1px dashed #ccc;
-  border-radius: 4px;
-  height: 80px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.chart-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 4px 8px;
-  background-color: #f0f2f5;
-  font-size: 12px;
-  border-bottom: 1px dashed #ccc;
-}
-
-.chart-name {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.chart-placeholder {
-  flex: 1;
   display: flex;
   align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  color: #888;
+  gap: 8px;
 }
 
 .charts-config {
@@ -403,14 +512,37 @@ defineExpose({
   border-top: 1px solid #eee;
 }
 
+/* 响应式调整 */
+@media (max-width: 1200px) {
+  .chart-settings-panel {
+    min-width: 800px;
+  }
+}
+
+@media (max-width: 992px) {
+  .chart-settings-panel {
+    min-width: 700px;
+    padding: 5px;
+  }
+  
+  .settings-content {
+    gap: 10px;
+  }
+}
+
 @media (max-width: 768px) {
   .chart-settings-panel {
     min-width: auto;
     width: 100%;
+    overflow-x: auto;
   }
   
-  .settings-content {
-    gap: 12px;
+  .panel-title {
+    font-size: 16px;
+  }
+  
+  .section-title {
+    font-size: 14px;
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/gear-ui3/src/views/dashboard/index.vue b/gear-ui3/src/views/dashboard/index.vue
index a063549..67e783b 100644
--- a/gear-ui3/src/views/dashboard/index.vue
+++ b/gear-ui3/src/views/dashboard/index.vue
@@ -85,17 +85,17 @@ const resizeFn = debounce(function () {
 }, 200);
 
 // 组件挂载后自动全屏
-// onMounted(() => {
-//   const documentWidth = document.body.offsetWidth;
-//   const ratio = documentWidth / 1920;
-//   if (documentWidth > 1920) {
-//     document.body.style.transform = `scale(${ratio}, ${ratio})`;
-//   }
+onMounted(() => {
+  const documentWidth = document.body.offsetWidth;
+  const ratio = documentWidth / 1920;
+  if (documentWidth > 1920) {
+    document.body.style.transform = `scale(${ratio}, ${ratio})`;
+  }
   
-//   window.addEventListener('resize', resizeFn);
+  window.addEventListener('resize', resizeFn);
   
-//   setTimeout(handleEnterFullscreen, 100);
-// });
+  setTimeout(handleEnterFullscreen, 100);
+});
 
 // 路由离开前退出全屏
 onBeforeRouteLeave((to, from, next) => {
diff --git a/gear-ui3/src/views/dashboard/layout/index.vue b/gear-ui3/src/views/dashboard/layout/index.vue
index 1f8b308..bc6f62e 100644
--- a/gear-ui3/src/views/dashboard/layout/index.vue
+++ b/gear-ui3/src/views/dashboard/layout/index.vue
@@ -36,7 +36,7 @@
       <slot></slot>
     </main>
 
-    <el-dialog v-model="settingVisible" title="图表设置" width="50%">
+    <el-dialog v-model="settingVisible" title="图表设置" width="70%">
       <ChartSetting />
     </el-dialog>
   </div>