DeXun/GEAR-OA
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
砂糖
2025-09-05 14:47:32 +08:00
parent b293cbd04f
commit 5cf7fad689
7 changed files with 128 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
gear-ui3/src/layout/components/Navbar.vue
View File

@@ -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" />

2
gear-ui3/src/settings.js
View File

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

0
gear-ui3/src/views/dashboard/common/ChartRenderer.vue
View File

0
gear-ui3/src/views/dashboard/common/ChartWrapper.vue
View File

181
gear-ui3/src/views/dashboard/grid/index.vue
View File

@@ -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>
@@ -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
}
];
@@ -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;
}

2
gear-ui3/src/views/index.vue
View File

@@ -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;
}

14
gear-ui3/src/views/login.vue
View File

@@ -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;