From 29f19ddb304304d5f4ce304fe4b1cfa9201a5f1c Mon Sep 17 00:00:00 2001
From: ekko <fqsy1416@gmail.com>
Date: Wed, 15 Apr 2026 08:50:10 +0800
Subject: [PATCH] fix: unify page header styles across all views

- 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>
---
 src/components/chat/ChatPanel.vue |  6 ++--
 src/styles/global.scss            | 16 +++++++++
 src/styles/variables.scss         |  2 +-
 src/views/ChannelsView.vue        | 16 +--------
 src/views/JobsView.vue            | 19 ++---------
 src/views/LogsView.vue            | 29 +++++-----------
 src/views/MemoryView.vue          | 17 +---------
 src/views/ModelsView.vue          | 19 ++---------
 src/views/SettingsView.vue        | 16 +--------
 src/views/SkillsView.vue          | 19 +----------
 src/views/UsageView.vue           | 55 ++++++++++++++++---------------
 11 files changed, 65 insertions(+), 149 deletions(-)

diff --git a/src/components/chat/ChatPanel.vue b/src/components/chat/ChatPanel.vue
index 66c908c..04a12e0 100644
--- a/src/components/chat/ChatPanel.vue
+++ b/src/components/chat/ChatPanel.vue
@@ -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;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 42bddee..1ac23d5 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -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;
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 81d3b39..36865ee 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -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;
diff --git a/src/views/ChannelsView.vue b/src/views/ChannelsView.vue
index ae52510..a0816f5 100644
--- a/src/views/ChannelsView.vue
+++ b/src/views/ChannelsView.vue
@@ -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;
diff --git a/src/views/JobsView.vue b/src/views/JobsView.vue
index caa1699..3b2f097 100644
--- a/src/views/JobsView.vue
+++ b/src/views/JobsView.vue
@@ -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;
diff --git a/src/views/LogsView.vue b/src/views/LogsView.vue
index ae27e5f..ff19fcd 100644
--- a/src/views/LogsView.vue
+++ b/src/views/LogsView.vue
@@ -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 {
diff --git a/src/views/MemoryView.vue b/src/views/MemoryView.vue
index 340e02e..6b339c0 100644
--- a/src/views/MemoryView.vue
+++ b/src/views/MemoryView.vue
@@ -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;
diff --git a/src/views/ModelsView.vue b/src/views/ModelsView.vue
index 0d4e625..cd4529e 100644
--- a/src/views/ModelsView.vue
+++ b/src/views/ModelsView.vue
@@ -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;
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index 788ac99..cfeac46 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -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;
diff --git a/src/views/SkillsView.vue b/src/views/SkillsView.vue
index e320638..db5352f 100644
--- a/src/views/SkillsView.vue
+++ b/src/views/SkillsView.vue
@@ -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;
 }
diff --git a/src/views/UsageView.vue b/src/views/UsageView.vue
index 4c629ca..5c0153f 100644
--- a/src/views/UsageView.vue
+++ b/src/views/UsageView.vue
@@ -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,