purovps/jshERP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化登录后Dashboard界面和导航组件

Browse Source 
- Dashboard: 添加欢迎横幅、数据分区展示、当日利润预估
- Logo: 品牌化设计(渐变背景+图标)
- UserMenu: 现代化胶囊样式+头像
- 卡片悬浮动效、彩色分类边框
This commit is contained in:
root
2026-02-16 09:03:29 +01:00
parent 96249e0833
commit 12bbd523bb
20 changed files with 610 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
jshERP-web/src/components/chart/DashChartDemo.vue
View File

@@ -17,7 +17,7 @@
gemo="point"
position="value*1"
shape="pointer"
color="#1890FF"
color="#00458a"
:active="false"
></v-series>
<v-guide
@@ -171,7 +171,7 @@
},
arcGuide2Start: [0, 0.945],
arcGuide2Style: {
stroke: '#1890FF',
stroke: '#00458a',
lineWidth: 18,
},
htmlGuidePosition: ['50%', '100%'],

2
jshERP-web/src/components/chart/MiniProgress.vue
View File

@@ -66,7 +66,7 @@
.progress {
transition: all .4s cubic-bezier(.08, .82, .17, 1) 0s;
border-radius: 1px 0 0 1px;
background-color: #1890ff;
background-color: #00458a;
width: 0;
height: 100%;
}

4
jshERP-web/src/components/layouts/UserLayout.vue
View File

@@ -150,7 +150,7 @@
flex-direction: column;
align-items: center;
cursor: pointer;
color:#1890ff
color:#00458a
}
.platform-modal {
padding:20px;
@@ -219,7 +219,7 @@
text-align: center;
.title {
font-size: 28px;
background: linear-gradient(135deg, #1890ff, #722ed1);
background: linear-gradient(135deg, #00458a, #722ed1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;

2
jshERP-web/src/components/page/GlobalLayout.vue
View File

@@ -334,7 +334,7 @@
.avatar {
margin: 20px 10px 20px 0;
color: #1890ff;
color: #00458a;
background: hsla(0, 0%, 100%, .85);
vertical-align: middle;
}

4
jshERP-web/src/components/setting/SettingDrawer.vue
View File

@@ -312,7 +312,7 @@
padding-top: 15px;
padding-left: 24px;
height: 100%;
color: #1890ff;
color: #00458a;
font-size: 14px;
font-weight: 700;
}
@@ -340,7 +340,7 @@
.setting-drawer-index-handle {
position: absolute;
top: 240px;
background: #1890ff;
background: #00458a;
width: 48px;
height: 48px;
right: 300px;

63
jshERP-web/src/components/tools/Logo.vue
View File

@@ -1,6 +1,9 @@
<template>
<div class="logo">
<h1 v-if="showTitle">{{ title }}</h1>
<div class="logo-content">
<div class="logo-icon">🏔️</div>
<h1 v-if="showTitle" class="logo-title">{{ title }}</h1>
</div>
</div>
</template>
@@ -28,30 +31,54 @@
/*缩小首页布 局顶部的高度*/
@height: 49px;
.sider {
.logo {
color: #ffffff;
height: @height !important;
line-height: @height !important;
box-shadow: none !important;
.logo {
color: #ffffff;
height: @height !important;
line-height: @height !important;
box-shadow: none !important;
transition: background 300ms;
background: #002140;
h1 {
transition: background 300ms;
background: linear-gradient(135deg, #001a3a 0%, #003d82 100%);
padding: 0 16px;
.logo-content {
display: flex;
align-items: center;
height: 100%;
.logo-icon {
font-size: 24px;
margin-right: 8px;
display: flex;
align-items: center;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.logo-title {
font-size: 18px;
color: #ffffff;
margin: 0;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
a {
color: white;
&:hover {
color: rgba(255, 255, 255, 0.8);
}
}
}
&:hover {
background: linear-gradient(135deg, #003d82 0%, #001a3a 100%);
}
a {
color: white;
&:hover {
color: rgba(255, 255, 255, 0.8);
}
}
}
.sider {
box-shadow: none !important;
&.light .logo {
background-color: @primary-color;
background: linear-gradient(135deg, @primary-color 0%, #096dd9 100%);
}
}
</style>

39
jshERP-web/src/components/tools/UserMenu.vue
View File

@@ -42,9 +42,12 @@
</span>
<header-notice class="action"/>
<a-dropdown>
<span v-if="isDesktop()" class="action ant-dropdown-link user-dropdown-menu">
<a-icon type="down-circle"/>
<span style="margin-left:4px">欢迎您，{{ nickname() }}</span>
<span v-if="isDesktop()" class="action ant-dropdown-link user-dropdown-menu modern-user-menu">
<a-avatar size="small" style="margin-right: 8px;">
<a-icon type="user" />
</a-avatar>
<span class="user-name">{{ nickname() }}</span>
<a-icon type="down" style="margin-left: 8px; font-size: 12px;" />
</span>
<a-menu slot="overlay" class="user-dropdown-menu-wrapper">
<a-menu-item key="3" @click="systemSetting">
@@ -254,4 +257,34 @@
color: inherit;
text-decoration: none;
}
.modern-user-menu {
display: flex !important;
align-items: center;
padding: 4px 12px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
&:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.user-name {
font-weight: 500;
font-size: 14px;
}
}
.user-wrapper.light .modern-user-menu {
background: rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.85);
&:hover {
background: rgba(0, 0, 0, 0.1);
}
}
</style>

2
jshERP-web/src/components/tools/setting.js
View File

@@ -20,7 +20,7 @@ const colorList = [
key: '极光绿', color: '#52C41A',
},
{
key: '拂晓蓝（默认）', color: '#1890FF',
key: '拂晓蓝（默认）', color: '#00458a',
},
{
key: '极客蓝', color: '#2F54EB',

2
jshERP-web/src/defaultSettings.js
View File

@@ -15,7 +15,7 @@
export default {
primaryColor: '#00458a', // primary color of ant design
navTheme: 'light', // theme for nav menu
navTheme: 'dark', // theme for nav menu
layout: 'sidemenu', // nav menu position: sidemenu or topmenu
contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu
fixedHeader: true, // sticky header

2
jshERP-web/src/main.js
View File

@@ -64,7 +64,7 @@ new Vue({
store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth))
store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader))
store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
store.commit('TOGGLE_COLOR', config.primaryColor)
store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
store.commit('SET_MULTI_PAGE',Vue.ls.get(DEFAULT_MULTI_PAGE,config.multipage))
},

382
jshERP-web/src/views/dashboard/IndexChart.vue
View File

@@ -1,103 +1,163 @@
<template>
<div class="page-header-index-wide">
<a-row :gutter="24">
<a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px',marginBottom: '12px' }">
<chart-card :loading="loading" title="今日销售" data-step="1" data-title="今日销售" data-intro="统计今日销售单据的总金额">
<a-tooltip title="统计今日销售单据的总金额" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="statistics.todaySale"></head-info>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px',marginBottom: '12px' }">
<chart-card :loading="loading" title="今日零售" data-step="2" data-title="今日零售" data-intro="统计今日零售单据的总金额">
<a-tooltip title="统计今日零售单据的总金额" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="statistics.todayRetailSale"></head-info>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px',marginBottom: '12px' }">
<chart-card :loading="loading" title="今日采购" data-step="3" data-title="今日采购" data-intro="统计今日采购单据的总金额">
<a-tooltip title="统计今日采购单据的总金额" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="statistics.todayBuy"></head-info>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px',marginBottom: '12px' }">
<chart-card :loading="loading" title="本月累计销售">
<a-tooltip title="统计本月销售单据的总金额" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="statistics.monthSale"></head-info>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px',marginBottom: '12px' }">
<chart-card :loading="loading" title="本月累计零售">
<a-tooltip title="统计本月零售单据的总金额" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="statistics.monthRetailSale"></head-info>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px',marginBottom: '12px' }">
<chart-card :loading="loading" title="本月累计采购">
<a-tooltip placement="left" title="统计本月采购单据的总金额" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="statistics.monthBuy"></head-info>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px',marginBottom: '12px' }">
<chart-card :loading="loading" title="昨日销售">
<a-tooltip title="统计昨日销售单据的总金额" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="statistics.yesterdaySale"></head-info>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px',marginBottom: '12px' }">
<chart-card :loading="loading" title="昨日零售">
<a-tooltip title="统计昨日零售单据的总金额" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="statistics.yesterdayRetailSale"></head-info>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px',marginBottom: '12px' }">
<chart-card :loading="loading" title="昨日采购">
<a-tooltip title="统计昨日采购单据的总金额" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="statistics.yesterdayBuy"></head-info>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px',marginBottom: '12px' }">
<chart-card :loading="loading" title="今年累计销售">
<a-tooltip title="统计今年销售单据的总金额" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="statistics.yearSale"></head-info>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px',marginBottom: '12px' }">
<chart-card :loading="loading" title="今年累计零售">
<a-tooltip title="统计今年零售单据的总金额" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="statistics.yearRetailSale"></head-info>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px',marginBottom: '12px' }">
<chart-card :loading="loading" title="今年累计采购">
<a-tooltip placement="left" title="统计今年采购单据的总金额" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="statistics.yearBuy"></head-info>
</chart-card>
</a-col>
</a-row>
<div class="page-header-index-wide dashboard-modern">
<!-- 添加欢迎区块 -->
<div class="welcome-banner" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white; padding: 24px; border-radius: 8px; margin-bottom: 24px;">
<h2 style="color: white; margin: 0;">欢迎回到 MileStone ERP 📊</h2>
<p style="margin: 8px 0 0 0; opacity: 0.9;">{{ getCurrentTimeGreeting() }}</p>
</div>
<!-- 核心指标卡片区域 - 增强视觉效果 -->
<div class="metrics-section">
<h3 style="margin-bottom: 16px; color: #1890ff;">📈 今日经营概况</h3>
<a-row :gutter="24">
<a-col :sm="24" :md="12" :xl="6" :style="{ paddingRight: '0px',marginBottom: '16px' }">
<chart-card :loading="loading" title="今日销售" data-step="1" data-title="今日销售" data-intro="统计今日销售单据的总金额"
class="metric-card sales-card">
<a-tooltip title="统计今日销售单据的总金额" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="statistics.todaySale">
<span slot="prefix">💰</span>
</head-info>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ paddingRight: '0px',marginBottom: '16px' }">
<chart-card :loading="loading" title="今日零售" data-step="2" data-title="今日零售" data-intro="统计今日零售单据的总金额"
class="metric-card retail-card">
<a-tooltip title="统计今日零售单据的总金额" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="statistics.todayRetailSale">
<span slot="prefix">🛒</span>
</head-info>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ paddingRight: '0px',marginBottom: '16px' }">
<chart-card :loading="loading" title="今日采购" data-step="3" data-title="今日采购" data-intro="统计今日采购单据的总金额"
class="metric-card purchase-card">
<a-tooltip title="统计今日采购单据的总金额" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="statistics.todayBuy">
<span slot="prefix">📦</span>
</head-info>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ paddingRight: '0px',marginBottom: '16px' }">
<chart-card :loading="loading" title="当日利润预估" class="metric-card profit-card">
<a-tooltip title="今日销售减去今日采购的简单估算" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="getTodayProfit()">
<span slot="prefix">💎</span>
</head-info>
</chart-card>
</a-col>
</a-row>
</div>
<!-- 月度数据区域 -->
<div class="monthly-section" style="margin-top: 32px;">
<h3 style="margin-bottom: 16px; color: #52c41a;">📅 本月累计数据</h3>
<a-row :gutter="24">
<a-col :sm="24" :md="8" :xl="8" :style="{ paddingRight: '0px',marginBottom: '16px' }">
<chart-card :loading="loading" title="本月累计销售" class="monthly-card">
<a-tooltip title="统计本月销售单据的总金额" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="statistics.monthSale">
<span slot="prefix">📊</span>
</head-info>
</chart-card>
</a-col>
<a-col :sm="24" :md="8" :xl="8" :style="{ paddingRight: '0px',marginBottom: '16px' }">
<chart-card :loading="loading" title="本月累计零售" class="monthly-card">
<a-tooltip title="统计本月零售单据的总金额" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="statistics.monthRetailSale">
<span slot="prefix">🛍️</span>
</head-info>
</chart-card>
</a-col>
<a-col :sm="24" :md="8" :xl="8" :style="{ paddingRight: '0px',marginBottom: '16px' }">
<chart-card :loading="loading" title="本月累计采购" class="monthly-card">
<a-tooltip placement="left" title="统计本月采购单据的总金额" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="statistics.monthBuy">
<span slot="prefix">📋</span>
</head-info>
</chart-card>
</a-col>
</a-row>
</div>
<!-- 历史对比区域 -->
<div class="comparison-section" style="margin-top: 32px;">
<a-row :gutter="24">
<a-col :span="12">
<h4 style="margin-bottom: 16px; color: #fa8c16;">📈 昨日数据</h4>
<a-row :gutter="16">
<a-col :span="8">
<chart-card :loading="loading" title="昨日销售" class="comparison-card yesterday-card">
<a-tooltip title="统计昨日销售单据的总金额" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="statistics.yesterdaySale"></head-info>
</chart-card>
</a-col>
<a-col :span="8">
<chart-card :loading="loading" title="昨日零售" class="comparison-card yesterday-card">
<a-tooltip title="统计昨日零售单据的总金额" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="statistics.yesterdayRetailSale"></head-info>
</chart-card>
</a-col>
<a-col :span="8">
<chart-card :loading="loading" title="昨日采购" class="comparison-card yesterday-card">
<a-tooltip title="统计昨日采购单据的总金额" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="statistics.yesterdayBuy"></head-info>
</chart-card>
</a-col>
</a-row>
</a-col>
<a-col :span="12">
<h4 style="margin-bottom: 16px; color: #722ed1;">🏆 年度累计</h4>
<a-row :gutter="16">
<a-col :span="8">
<chart-card :loading="loading" title="年度销售" class="comparison-card yearly-card">
<a-tooltip title="统计今年销售单据的总金额" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="statistics.yearSale"></head-info>
</chart-card>
</a-col>
<a-col :span="8">
<chart-card :loading="loading" title="年度零售" class="comparison-card yearly-card">
<a-tooltip title="统计今年零售单据的总金额" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="statistics.yearRetailSale"></head-info>
</chart-card>
</a-col>
<a-col :span="8">
<chart-card :loading="loading" title="年度采购" class="comparison-card yearly-card">
<a-tooltip placement="left" title="统计今年采购单据的总金额" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<head-info :content="statistics.yearBuy"></head-info>
</chart-card>
</a-col>
</a-row>
</a-col>
</a-row>
</div>
<a-row :gutter="24">
<a-col :sm="24" :md="12" :xl="8" :style="{ paddingRight: '0px',marginBottom: '12px' }">
<a-card :loading="loading" :bordered="false" :body-style="{paddingRight: '5'}" data-step="4" data-title="销售统计"
@@ -276,11 +336,135 @@
} else {
return false
}
},
getCurrentTimeGreeting() {
const now = new Date()
const hour = now.getHours()
const date = now.toLocaleDateString('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long'
})
let greeting = ''
if (hour < 6) {
greeting = '夜深了，注意休息 🌙'
} else if (hour < 12) {
greeting = '早上好，新的一天开始了 ☀️'
} else if (hour < 18) {
greeting = '下午好，继续加油 💪'
} else {
greeting = '晚上好，今天辛苦了 🌅'
}
return `${greeting} | ${date}`
},
getTodayProfit() {
// 简单计算当日利润预估（销售-采购）
const saleText = this.statistics.todaySale || '0'
const buyText = this.statistics.todayBuy || '0'
const sale = parseFloat(saleText.replace(/[,¥]/g, '') || '0')
const buy = parseFloat(buyText.replace(/[,¥]/g, '') || '0')
const profit = sale - buy
if (profit > 0) {
return '¥' + profit.toLocaleString()
} else if (profit < 0) {
return '-¥' + Math.abs(profit).toLocaleString()
}
return '¥0'
}
}
}
</script>
<style lang="less" scoped>
.dashboard-modern {
.welcome-banner {
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
transition: all 0.3s ease;
&:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.25);
}
}
.metrics-section, .monthly-section, .comparison-section {
.ant-card {
transition: all 0.3s ease;
border-radius: 8px;
overflow: hidden;
&:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
}
}
.metric-card {
position: relative;
&.sales-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, #f56565 0%, #e53e3e 100%);
}
&.retail-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, #48bb78 0%, #38a169 100%);
}
&.purchase-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, #4299e1 0%, #3182ce 100%);
}
&.profit-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, #ed8936 0%, #dd6b20 100%);
}
}
.monthly-card {
border-left: 4px solid #52c41a;
background: linear-gradient(135deg, #f6ffed 0%, #ffffff 100%);
}
.comparison-card {
&.yesterday-card {
border-left: 3px solid #fa8c16;
background: linear-gradient(135deg, #fff7e6 0%, #ffffff 100%);
}
&.yearly-card {
border-left: 3px solid #722ed1;
background: linear-gradient(135deg, #f9f0ff 0%, #ffffff 100%);
}
}
}
.circle-cust{
position: relative;
top: 28px;

2
jshERP-web/vue.config.js
View File

@@ -37,7 +37,7 @@ module.exports = {
modifyVars: {
/* less 变量覆盖，用于自定义 ant design 主题 */
'primary-color': '#00458a',
'link-color': '#1890FF',
'link-color': '#00458a',
'border-radius-base': '4px'
},
javascriptEnabled: true