admin/Hermes-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: unify page header styles across all views

Browse Source 
- Extract shared .page-header and .header-title to global.scss
- Standardize padding to 21px 20px matching sidebar logo height
- Fix Usage page layout to flex column with standard header
- Fix Logs page header CSS selector after class rename
- Normalize button sizes to small across all headers

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
ekko
2026-04-15 08:50:10 +08:00
parent 66cc9a6f1e
commit 29f19ddb30
11 changed files with 65 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/chat/ChatPanel.vue
+3 -3
View File
@@ -556,7 +556,7 @@ async function handleRenameConfirm() {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
padding: 21px 20px;
border-bottom: 1px solid $border-color;
flex-shrink: 0;
}
@@ -571,8 +571,8 @@ async function handleRenameConfirm() {
}
.header-session-title {
font-size: 14px;
font-weight: 500;
font-size: 16px;
font-weight: 600;
color: $text-primary;
white-space: nowrap;
overflow: hidden;
src/styles/global.scss
+16
View File
@@ -58,3 +58,19 @@ a {
::selection {
background: rgba($accent-primary, 0.3);
}
// Shared page header
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 21px 20px;
border-bottom: 1px solid $border-color;
flex-shrink: 0;
}
.header-title {
font-size: 16px;
font-weight: 600;
color: $text-primary;
}
src/styles/variables.scss
+1 -1
View File
@@ -44,7 +44,7 @@ $font-code: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
// Layout
$sidebar-width: 240px;
$sidebar-collapsed-width: 64px;
$header-height: 56px;
$header-height: 60px;
// Radius
$radius-sm: 6px;
src/views/ChannelsView.vue
+1 -15
View File
@@ -15,7 +15,7 @@ onMounted(() => {
<template>
<div class="channels-view">
<header class="channels-header">
<header class="page-header">
<h2 class="header-title">{{ t('sidebar.channels') }}</h2>
</header>
@@ -36,20 +36,6 @@ onMounted(() => {
flex-direction: column;
}
.channels-header {
display: flex;
align-items: center;
padding: 12px 20px;
border-bottom: 1px solid $border-color;
flex-shrink: 0;
}
.header-title {
font-size: 16px;
font-weight: 600;
color: $text-primary;
}
.channels-content {
flex: 1;
overflow-y: auto;
src/views/JobsView.vue
+2 -17
View File
@@ -38,9 +38,9 @@ async function handleSave() {
<template>
<div class="jobs-view">
<header class="jobs-header">
<header class="page-header">
<h2 class="header-title">{{ t('jobs.title') }}</h2>
<NButton type="primary" @click="openCreateModal">
<NButton type="primary" size="small" @click="openCreateModal">
<template #icon>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
</template>
@@ -72,21 +72,6 @@ async function handleSave() {
flex-direction: column;
}
.jobs-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
border-bottom: 1px solid $border-color;
flex-shrink: 0;
}
.header-title {
font-size: 16px;
font-weight: 600;
color: $text-primary;
}
.jobs-content {
flex: 1;
overflow-y: auto;
src/views/LogsView.vue
+8 -21
View File
@@ -86,7 +86,7 @@ onMounted(async () => {
<template>
<div class="logs-view">
<header class="logs-header">
<header class="page-header">
<h2 class="header-title">{{ t('logs.title') }}</h2>
<div class="header-actions">
<NSelect
@@ -158,29 +158,16 @@ onMounted(async () => {
flex-direction: column;
}
.logs-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
border-bottom: 1px solid $border-color;
flex-shrink: 0;
.page-header {
gap: 12px;
flex-wrap: wrap;
}
.header-title {
font-size: 16px;
font-weight: 600;
color: $text-primary;
white-space: nowrap;
}
.header-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.header-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.search-input {
src/views/MemoryView.vue
+1 -16
View File
@@ -72,7 +72,7 @@ const displayUser = computed(() => (data.value?.user || '').replace(/§/g, '\n\n
<template>
<div class="memory-view">
<header class="memory-header">
<header class="page-header">
<h2 class="header-title">{{ t('memory.title') }}</h2>
<NButton size="small" quaternary @click="loadMemory">
<template #icon>
@@ -193,21 +193,6 @@ const displayUser = computed(() => (data.value?.user || '').replace(/§/g, '\n\n
flex-direction: column;
}
.memory-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
border-bottom: 1px solid $border-color;
flex-shrink: 0;
}
.header-title {
font-size: 16px;
font-weight: 600;
color: $text-primary;
}
.memory-content {
flex: 1;
overflow: hidden;
src/views/ModelsView.vue
+2 -17
View File
@@ -30,9 +30,9 @@ async function handleSaved() {
<template>
<div class="models-view">
<header class="models-header">
<header class="page-header">
<h2 class="header-title">{{ t('models.title') }}</h2>
<NButton type="primary" @click="openCreateModal">
<NButton type="primary" size="small" @click="openCreateModal">
<template #icon>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
</template>
@@ -63,21 +63,6 @@ async function handleSaved() {
flex-direction: column;
}
.models-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
border-bottom: 1px solid $border-color;
flex-shrink: 0;
}
.header-title {
font-size: 16px;
font-weight: 600;
color: $text-primary;
}
.models-content {
flex: 1;
overflow-y: auto;
src/views/SettingsView.vue
+1 -15
View File
@@ -30,7 +30,7 @@ async function saveApiServer(values: Record<string, any>) {
<template>
<div class="settings-view">
<header class="settings-header">
<header class="page-header">
<h2 class="header-title">{{ t('settings.title') }}</h2>
</header>
@@ -107,20 +107,6 @@ async function saveApiServer(values: Record<string, any>) {
flex-direction: column;
}
.settings-header {
display: flex;
align-items: center;
padding: 12px 20px;
border-bottom: 1px solid $border-color;
flex-shrink: 0;
}
.header-title {
font-size: 16px;
font-weight: 600;
color: $text-primary;
}
.settings-content {
flex: 1;
overflow-y: auto;
src/views/SkillsView.vue
+1 -18
View File
@@ -34,7 +34,7 @@ function handleSelect(category: string, skill: string) {
<template>
<div class="skills-view">
<header class="skills-header">
<header class="page-header">
<h2 class="header-title">{{ t('skills.title') }}</h2>
<NInput
v-model:value="searchQuery"
@@ -85,23 +85,6 @@ function handleSelect(category: string, skill: string) {
flex-direction: column;
}
.skills-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
border-bottom: 1px solid $border-color;
flex-shrink: 0;
gap: 12px;
}
.header-title {
font-size: 16px;
font-weight: 600;
color: $text-primary;
flex-shrink: 0;
}
.search-input {
width: 220px;
}
src/views/UsageView.vue
+29 -26
View File
@@ -17,25 +17,27 @@ onMounted(() => {
<template>
<div class="usage-view">
<header class="usage-header">
<h2 class="usage-title">{{ t('usage.title') }}</h2>
<header class="page-header">
<h2 class="header-title">{{ t('usage.title') }}</h2>
<NButton size="small" quaternary :loading="usageStore.isLoading" @click="usageStore.loadSessions()">
{{ t('usage.refresh') }}
</NButton>
</header>
<div v-if="usageStore.isLoading && usageStore.sessions.length === 0" class="usage-loading">
{{ t('common.loading') }}
</div>
<div class="usage-content">
<div v-if="usageStore.isLoading && usageStore.sessions.length === 0" class="usage-loading">
{{ t('common.loading') }}
</div>
<template v-else-if="usageStore.sessions.length > 0">
<StatCards />
<ModelBreakdown />
<DailyTrend />
</template>
<template v-else-if="usageStore.sessions.length > 0">
<StatCards />
<ModelBreakdown />
<DailyTrend />
</template>
<div v-else class="usage-empty">
{{ t('usage.noData') }}
<div v-else class="usage-empty">
{{ t('usage.noData') }}
</div>
</div>
</div>
</template>
@@ -44,23 +46,24 @@ onMounted(() => {
@use '@/styles/variables' as *;
.usage-view {
padding: 24px;
height: 100%;
display: flex;
flex-direction: column;
}
.usage-content {
flex: 1;
overflow-y: auto;
padding: 20px;
max-width: 960px;
margin: 0 auto;
}
width: 100%;
scrollbar-width: none;
-ms-overflow-style: none;
.usage-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.usage-title {
font-size: 18px;
font-weight: 600;
color: $text-primary;
margin: 0;
&::-webkit-scrollbar {
display: none;
}
}
.usage-loading,