fix(frontend): 替换Logo、增大顶栏侧栏尺寸及全局字号

- 替换顶栏Logo为七牛logo图片(logo-qiniu.png)
- 顶栏高度 56→70px,侧栏宽度 226→282px
- 顶栏各元素字号增大约25%,头像26→32px,搜索框240→280px
- 侧栏导航项字号13→16px,分组标题10.5→13px,徽标10→12px
- 全局基础字号 14→16px
This commit is contained in:
2026-07-15 15:25:11 +08:00
parent 3144a50ef5
commit f3ca4a4217
5 changed files with 26 additions and 33 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

+17 -24
View File
@@ -1,7 +1,7 @@
<template>
<header class="topbar">
<div class="brand">
<div class="mark">xi</div>
<img src="/logo-qiniu.png" alt="logo" class="mark-img" />
xinfra <span class="sub">统一基础设施平台</span>
</div>
<span class="env-pill">● 生产环境</span>
@@ -61,27 +61,20 @@ const { theme, toggleTheme } = useTheme()
gap: 9px;
font-weight: 600;
letter-spacing: 0.3px;
font-size: 15px;
font-size: 18px;
}
.brand .mark {
width: 22px;
height: 22px;
border-radius: 5px;
background: linear-gradient(135deg, var(--accent), #1C8F69);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: var(--bg-deep);
.brand .mark-img {
width: 36px;
height: 36px;
border-radius: 6px;
object-fit: contain;
}
.brand .sub {
color: var(--text-dim);
font-weight: 400;
font-size: 12px;
font-size: 15px;
margin-left: 4px;
}
@@ -91,7 +84,7 @@ const { theme, toggleTheme } = useTheme()
.env-pill {
font-family: var(--mono);
font-size: 11px;
font-size: 14px;
color: var(--accent);
border: 1px solid var(--accent-dim);
background: var(--accent-dim);
@@ -109,14 +102,14 @@ const { theme, toggleTheme } = useTheme()
border-radius: 6px;
padding: 6px 10px;
color: var(--text-dim);
font-size: 12.5px;
width: 240px;
font-size: 15px;
width: 280px;
}
.search-box kbd {
margin-left: auto;
font-family: var(--mono);
font-size: 10px;
font-size: 12px;
background: var(--bg-panel);
padding: 1px 5px;
border-radius: 3px;
@@ -128,27 +121,27 @@ const { theme, toggleTheme } = useTheme()
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
font-size: 15px;
color: var(--text-mid);
}
.identity .avatar {
width: 26px;
height: 26px;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bg-panel-2);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 11px;
font-size: 14px;
color: var(--text-hi);
border: 1px solid var(--line);
}
.identity .ldap-tag {
font-family: var(--mono);
font-size: 10px;
font-size: 12px;
color: var(--text-dim);
}
@@ -81,7 +81,7 @@
}
.nav-label {
font-size: 10.5px;
font-size: 13px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 1px;
@@ -94,10 +94,10 @@
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
padding: 10px 10px;
border-radius: 6px;
color: var(--text-mid);
font-size: 13px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
margin-bottom: 2px;
@@ -108,7 +108,7 @@
.nav-item .ic {
width: 16px;
text-align: center;
font-size: 13px;
font-size: 16px;
opacity: 0.85;
}
@@ -126,7 +126,7 @@
.nav-item .badge {
margin-left: auto;
font-family: var(--mono);
font-size: 10px;
font-size: 12px;
background: var(--bg-panel-2);
color: var(--text-dim);
padding: 1px 6px;
@@ -144,7 +144,7 @@
margin-top: auto;
padding: 10px;
border-top: 1px solid var(--line-soft);
font-size: 11px;
font-size: 14px;
color: var(--text-dim);
line-height: 1.6;
}
+2 -2
View File
@@ -15,8 +15,8 @@ import AppMain from '@/components/Layout/AppMain.vue'
<style scoped>
.shell {
display: grid;
grid-template-columns: 226px 1fr;
grid-template-rows: 56px 1fr;
grid-template-columns: 282px 1fr;
grid-template-rows: 70px 1fr;
height: 100vh;
}
</style>
+1 -1
View File
@@ -10,7 +10,7 @@ html, body {
background: var(--bg-deep);
color: var(--text-hi);
font-family: var(--sans);
font-size: 14px;
font-size: 16px;
transition: background-color 0.3s ease, color 0.3s ease;
}