🐞 fix: 修复登录页样式异常

gear-ui3/src/layout/components/Navbar.vue

@@ -10,12 +10,12 @@
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
-        <!-- <el-tooltip content="主题模式" effect="dark" placement="bottom">
+        <el-tooltip content="主题模式" effect="dark" placement="bottom">
           <div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">
             <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />
             <svg-icon v-if="!settingsStore.isDark" icon-class="moon" />
           </div>
-        </el-tooltip> -->
+        </el-tooltip>
 
         <!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />

gear-ui3/src/settings.js

@@ -7,7 +7,7 @@ export default {
   /**
    * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
    */
-  sideTheme: 'theme-dark',
+  sideTheme: 'theme-light',
 
   /**
    * 是否系统布局配置

gear-ui3/src/views/dashboard/grid/index.vue

@@ -2,31 +2,14 @@
   <!-- 图表容器（含滚动） -->
   <div class="charts-container">
     <!-- Element 布局：行容器（不变） -->
-    <el-row 
+    <el-row class="charts-row" :gutter="20" :style="{ height: `calc(100% - 40px)` }">
-      class="charts-row" 
-      :gutter="20"
-      :style="{ height: `calc(100% - 40px)` }"
-    >
       <!-- 动态渲染图表：应用高度配置（核心修改） -->
-      <el-col
+      <el-col v-for="(chartConfig, index) in persistedChartConfigs" :key="chartConfig.id" class="chart-col"
-        v-for="(chartConfig, index) in persistedChartConfigs"
+        :xs="chartConfig.layout.xs" :sm="chartConfig.layout.sm" :md="chartConfig.layout.md" :lg="chartConfig.layout.lg"
-        :key="chartConfig.id" 
+        :xl="chartConfig.layout.xl" :style="{ height: `${chartConfig.height || 400}px`, marginBottom: '20px' }">
-        class="chart-col"
-        :xs="chartConfig.layout.xs"
-        :sm="chartConfig.layout.sm"
-        :md="chartConfig.layout.md"
-        :lg="chartConfig.layout.lg"
-        :xl="chartConfig.layout.xl"
-        :style="{ height: `${chartConfig.height || 400}px`, marginBottom: '20px' }"
-      >
         <!-- 动态加载图表组件：确保组件高度100% -->
-        <component
+        <component :is="chartComponentMap[chartConfig.componentName]" class="chart-item"
-          :is="chartComponentMap[chartConfig.componentName]"
+          v-bind="getChartProps(chartConfig)" :is-refreshing="isRefreshing" :chart-height="chartConfig.height || 400" />
-          class="chart-item"
-          v-bind="getChartProps(chartConfig)"
-          :is-refreshing="isRefreshing"
-          :chart-height="chartConfig.height || 400"
-        />
       </el-col>
     </el-row>
   </div>
@@ -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',
+    "id": "product-rank",
-    componentName: 'OrderTrendChart',
+    "componentName": "ProductSalesRank",
-    title: '订单趋势图表',
+    "title": "产品销售排行图表",
-    dataKey: 'orders',
+    "dataKey": "orderDetails",
-    height: 400, // 新增：默认高度400px
+    "layout": {
-    layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
+      "xs": 24,
+      "sm": 24,
+      "md": 8,
+      "lg": "8",
+      "xl": 12
+    },
+    "height": 400
   },
   {
-    id: 'product-rank',
+    "id": "customer-follow",
-    componentName: 'ProductSalesRank',
+    "componentName": "CustomerFollowStatus",
-    title: '产品销售排行图表',
+    "title": "客户跟进状态图表",
-    dataKey: 'orderDetails',
+    "dataKey": "customers",
-    height: 400, // 新增：默认高度400px
+    "layout": {
-    layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
+      "xs": 24,
+      "sm": 24,
+      "md": 8,
+      "lg": "8",
+      "xl": 12
+    },
+    "height": 400
   },
   {
-    id: 'sales-manager',
+    "id": "sales-metrics",
-    componentName: 'SalesByManagerChart',
+    "componentName": "SalesMetricsCard",
-    title: '负责人订单汇总',
+    "title": "销售指标图表",
-    dataKey: 'orders',
+    "dataKey": [
-    height: 400, // 新增：默认高度400px
+      "orders",
-    layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
+      "customers",
+      "returnExchanges"
+    ],
+    "layout": {
+      "xs": 24,
+      "sm": 24,
+      "md": 8,
+      "lg": "8",
+      "xl": 12
+    },
+    "height": 200
   },
   {
-    id: 'customer-follow',
+    "id": "order-trend",
-    componentName: 'CustomerFollowStatus',
+    "componentName": "OrderTrendChart",
-    title: '客户跟进状态图表',
+    "title": "订单趋势图表",
-    dataKey: 'customers',
+    "dataKey": "orders",
-    height: 400, // 新增：默认高度400px
+    "layout": {
-    layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
+      "xs": 24,
+      "sm": 24,
+      "md": 12,
+      "lg": 12,
+      "xl": 12
+    },
+    "height": 400
   },
   {
-    id: 'return-exchange',
+    "id": "sales-manager",
-    componentName: 'ReturnExchangeAnalysis',
+    "componentName": "SalesByManagerChart",
-    title: '退换货分析图表',
+    "title": "负责人订单汇总",
-    dataKey: 'returnExchanges',
+    "dataKey": "orders",
-    height: 400, // 新增：默认高度400px
+    "layout": {
-    layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
+      "xs": 24,
+      "sm": 24,
+      "md": 12,
+      "lg": 12,
+      "xl": 12
+    },
+    "height": 400
   },
   {
-    id: 'sales-customer',
+    "id": "return-exchange",
-    componentName: 'SalesByCustomerChart',
+    "componentName": "ReturnExchangeAnalysis",
-    title: '客户订单汇总',
+    "title": "退换货分析图表",
-    dataKey: 'orders',
+    "dataKey": "returnExchanges",
-    height: 400, // 新增：默认高度400px
+    "layout": {
-    layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
+      "xs": 24,
+      "sm": 24,
+      "md": 12,
+      "lg": 12,
+      "xl": 12
+    },
+    "height": 400
   },
   {
-    id: 'sales-metrics',
+    "id": "sales-customer",
-    componentName: 'SalesMetricsCard',
+    "componentName": "SalesByCustomerChart",
-    title: '销售指标图表',
+    "title": "客户订单汇总",
-    dataKey: ['orders', 'customers', 'returnExchanges'],
+    "dataKey": "orders",
-    height: 200, // 新增：指标卡高度较小，默认200px
+    "layout": {
-    layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
+      "xs": 24,
+      "sm": 24,
+      "md": 12,
+      "lg": 12,
+      "xl": 12
+    },
+    "height": 400
   },
   {
-    id: 'recent-orders',
+    "id": "recent-orders",
-    componentName: 'RecentOrdersTable',
+    "componentName": "RecentOrdersTable",
-    title: '最近订单',
+    "title": "最近订单",
-    dataKey: 'orders',
+    "dataKey": "orders",
-    height: 500, // 新增：表格高度较大，默认500px
+    "layout": {
-    layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
+      "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;
   }

gear-ui3/src/views/index.vue

@@ -145,7 +145,7 @@ const deleteModule = (index) => {
 <style scoped>
 .dashboard-root {
   min-height: 100vh;
-  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
+  /* background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%); */
   padding: 32px;
 }
 

gear-ui3/src/views/login.vue

@@ -195,6 +195,11 @@ getCookie()
   justify-content: center;
 }
 
+.right-img {
+  width: 100%;
+  height: 100%;
+}
+
 .logo-img {
   width: 100px;
   height: 100px;
@@ -204,7 +209,8 @@ getCookie()
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 60%;
+  box-sizing: border-box;
+  // height: 60%;
   border-radius: 6px;
   background: #ffffff;
   width: 60%;
@@ -213,6 +219,7 @@ getCookie()
 
 .login-form {
   z-index: 1;
+  flex: 3;
   .el-input {
     height: 40px;
     input {
@@ -225,6 +232,11 @@ getCookie()
     margin-left: 0px;
   }
 }
+
+.login-right {
+  flex: 4;
+}
+
 .login-tip {
   font-size: 13px;
   text-align: center;