feat: 添加仪表盘背景图片,优化主题切换按钮和样式,调整统计卡片暗模式背景

This commit is contained in:
wood911010 committed 2025-12-07 10:43:39 +08:00
1 parent 0ca39951a8
commit 0678fe248c
4 files changed
+45 -10

No files matched your search

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

@@ -158,8 +158,12 @@
</template>
</el-dropdown>
<!-- 主题切换按钮 -->
<el-tooltip :content="t('navigation.tooltip.theme')" placement="bottom">
<!-- 主题切换按钮(暂时禁用) -->
<el-tooltip
v-if="showThemeToggle"
:content="t('navigation.tooltip.theme')"
placement="bottom"
>
<button class="action-btn" @click="handleThemeClick">
<NavIcon name="dark-mode" />
</button>
@@ -191,6 +195,9 @@ const { notificationCount = 24 } = defineProps<Props>()
// 功能暂未启用,隐藏通知入口
const showNotification = false
// 主题功能暂未开发完成,禁用主题切换
const showThemeToggle = false
type ExternalLinkKey = 'docs' | 'github'
interface ExternalLink {
key: ExternalLinkKey
@@ -144,7 +144,7 @@ const handleNavClick = (item: NavItem, event: Event) => {
.sidebar__header {
height: 80px;
@include flex-between;
border-bottom: 1px solid var(--app-border-light);
border-bottom: none;
}
.sidebar__logo {
@@ -418,7 +418,7 @@ const handleNavClick = (item: NavItem, event: Event) => {
/* 侧边栏头部分割线 */
[data-theme="dark"] .sidebar__header {
border-bottom-color: rgba(255, 255, 255, 0.12) !important;
border-bottom: none !important;
}
/* Logo文字颜色 */
+34 -6
View File
@@ -185,9 +185,15 @@ const fetchDashboardStats = async () => {
if (data[item.key] !== undefined && typeof data[item.key] !== 'object') {
item.value = data[item.key]
}
// 处理嵌套在 growth_rate 中的字段
// 处理嵌套在 growth_rate 中的字段(授权码增长率和许可证增长率)
if (data.growth_rate && data.growth_rate[item.key] !== undefined) {
item.value = data.growth_rate[item.key]
const rateValue = data.growth_rate[item.key]
// 如果是数字类型,格式化为保留两位小数的百分比
if (typeof rateValue === 'number') {
item.value = `${rateValue.toFixed(2)}%`
} else {
item.value = rateValue
}
}
})
} catch (e) {
@@ -228,10 +234,26 @@ onMounted(() => {
gap: 1.04vw; /* 20px/1920 = 1.04vw */
margin-bottom: 2.08vw; /* 40px/1920 = 2.08vw */
padding: 1.25vw; /* 24px/1920 = 1.25vw */
background: linear-gradient(135deg, #1db584 0%, #5ad8a6 100%);
background: linear-gradient(135deg, #019C7C 0%, #1db584 100%);
border-radius: 0.42vw; /* 8px/1920 = 0.42vw */
position: relative;
overflow: hidden; /* 确保背景图片不溢出 */
// 背景图片层
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('@/assets/images/dashboard-bg.png') lightgray 50% / cover no-repeat;
mix-blend-mode: soft-light;
border-radius: 0.42vw; /* 8px/1920 = 0.42vw */
z-index: 0;
}
// 网格纹理层
&::before {
content: '';
position: absolute;
@@ -252,6 +274,7 @@ onMounted(() => {
-0.52vw 0vw; /* 10px/1920 = 0.52vw */
opacity: 0.15;
border-radius: 0.42vw; /* 8px/1920 = 0.42vw */
z-index: 1;
}
}
@@ -260,7 +283,7 @@ onMounted(() => {
align-items: stretch;
gap: 0.83vw; /* 16px/1920 = 0.83vw */
position: relative;
z-index: 1;
z-index: 2; /* 确保内容显示在背景图片和网格纹理之上 */
min-width: 0;
&:not(:last-child)::after {
@@ -634,9 +657,14 @@ onMounted(() => {
/* 统计卡片区域暗模式优化 */
[data-theme='dark'] .stats-section {
// background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
background: rgba(1, 156, 124, 1) !important;
background: linear-gradient(135deg, #019C7C 0%, #10b981 100%) !important;
box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15) !important;
// 暗色模式下的背景图片
&::after {
background: url('@/assets/images/dashboard-bg.png') lightgray 50% / cover no-repeat;
mix-blend-mode: soft-light;
}
}
/* 表格卡片暗模式 */