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

2025-09-05 14:47:32 +08:00
parent b293cbd04f
commit 5cf7fad689
7 changed files with 128 additions and 79 deletions
--- a/gear-ui3/src/layout/components/Navbar.vue
+++ b/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" />
--- a/gear-ui3/src/settings.js
+++ b/gear-ui3/src/settings.js
@@ -7,7 +7,7 @@ export default {
  /**
   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
   */
-  sideTheme: 'theme-dark',
+  sideTheme: 'theme-light',

  /**
   * 是否系统布局配置
--- a/gear-ui3/src/views/dashboard/common/ChartRenderer.vue
+++ b/gear-ui3/src/views/dashboard/common/ChartRenderer.vue
--- a/gear-ui3/src/views/dashboard/common/ChartWrapper.vue
+++ b/gear-ui3/src/views/dashboard/common/ChartWrapper.vue
--- a/gear-ui3/src/views/dashboard/grid/index.vue
+++ b/gear-ui3/src/views/dashboard/grid/index.vue
@@ -2,31 +2,14 @@
  <!-- 图表容器（含滚动） -->
  <div class="charts-container">
    <!-- Element 布局：行容器（不变） -->
-    <el-row 
-      class="charts-row" 
-      :gutter="20"
-      :style="{ height: `calc(100% - 40px)` }"
-    >
+    <el-row class="charts-row" :gutter="20" :style="{ height: `calc(100% - 40px)` }">
      <!-- 动态渲染图表：应用高度配置（核心修改） -->
-      <el-col
-        v-for="(chartConfig, index) in persistedChartConfigs"
-        :key="chartConfig.id" 
-        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' }"
-      >
+      <el-col v-for="(chartConfig, index) in persistedChartConfigs" :key="chartConfig.id" 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
-          :is="chartComponentMap[chartConfig.componentName]"
-          class="chart-item"
-          v-bind="getChartProps(chartConfig)"
-          :is-refreshing="isRefreshing"
-          :chart-height="chartConfig.height || 400"
-        />
+        <component :is="chartComponentMap[chartConfig.componentName]" 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',
-    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;
  }
--- a/gear-ui3/src/views/index.vue
+++ b/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;
 }

--- a/gear-ui3/src/views/login.vue
+++ b/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;