gooneyryan/hermes-web-ui
1
0
Fork 0
mirror of https://github.com/EKKOLearnAI/hermes-web-ui.git synced 2026-07-16 13:40:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

unify frontend visual styles (#2014)

Browse Source
This commit is contained in:
ekko
2026-07-10 11:23:27 +08:00
committed by GitHub
parent 1dbc0aac2a
commit ff206cecc4
11 changed files with 54 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/client/src/styles/global.scss
+12 -1
View File
@@ -219,17 +219,28 @@ a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 21px 20px;
gap: 12px;
min-height: 64px;
padding: 14px 20px;
border-bottom: 1px solid $border-color;
flex-shrink: 0;
}
.header-title {
margin: 0;
font-size: 16px;
font-weight: 600;
line-height: 1.4;
color: $text-primary;
}
.page-header > .header-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
// Responsive utility classes for inline width replacement
.input-sm { width: 90px; }
.input-md { width: 200px; }
packages/client/src/styles/variables.scss
+7 -7
View File
@@ -61,7 +61,7 @@
--bg-primary: #1a1a1a;
--bg-secondary: #252525;
--bg-sidebar: #202020;
--bg-card: #333333;
--bg-card: #2a2a2a;
--bg-card-hover: #333333;
--bg-input: #2a2a2a;
@@ -75,8 +75,8 @@
--accent-muted: #888888;
// Text
--text-primary: #f0f0f0;
--text-secondary: #c0c0c0;
--text-primary: #e0e0e0;
--text-secondary: #a0a0a0;
--text-muted: #888888;
// Status
@@ -98,9 +98,9 @@
--accent-info: #6ba3d6;
// RGB components
--accent-primary-rgb: 240, 240, 240;
--accent-primary-rgb: 224, 224, 224;
--accent-hover-rgb: 245, 245, 245;
--text-primary-rgb: 240, 240, 240;
--text-primary-rgb: 224, 224, 224;
--text-muted-rgb: 136, 136, 136;
--success-rgb: 102, 187, 106;
--error-rgb: 239, 83, 80;
@@ -179,8 +179,8 @@ $breakpoint-mobile: 768px;
// Radius
$radius-sm: 6px;
$radius-md: 10px;
$radius-lg: 14px;
$radius-md: 8px;
$radius-lg: 8px;
// Transition
$transition-fast: 0.15s ease;
packages/client/src/views/hermes/DevicesView.vue
-17
View File
@@ -472,16 +472,6 @@ onMounted(() => {
flex-direction: column;
}
.page-header {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 21px 20px;
border-bottom: 1px solid $border-color;
}
.header-actions {
display: flex;
align-items: center;
@@ -495,13 +485,6 @@ onMounted(() => {
max-width: min(280px, 100%);
}
.header-title {
margin: 0;
color: $text-primary;
font-size: 16px;
font-weight: 600;
}
.header-meta {
display: flex;
flex-wrap: wrap;
packages/client/src/views/hermes/JourneyView.vue
-17
View File
@@ -760,23 +760,6 @@ watch(sceneNodes, () => {
flex-direction: column;
}
.page-header {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 21px 20px;
border-bottom: 1px solid $border-color;
}
.header-title {
margin: 0;
color: $text-primary;
font-size: 16px;
font-weight: 600;
}
.header-actions {
display: flex;
align-items: center;
packages/client/src/views/hermes/KanbanView.vue
-9
View File
@@ -379,15 +379,6 @@ async function handleDispatch() {
flex-direction: column;
}
.page-header {
padding: 21px 20px;
border-bottom: 1px solid $border-color;
}
.header-title {
font-size: 16px;
}
.header-actions {
display: flex;
align-items: center;
packages/client/src/views/hermes/McpManagerView.vue
+2 -19
View File
@@ -675,23 +675,6 @@ async function saveToolsVisibility() {
place-items: center;
}
.page-header {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 21px 20px;
border-bottom: 1px solid $border-color;
}
.header-title {
margin: 0;
color: $text-primary;
font-size: 16px;
font-weight: 600;
}
.header-actions {
display: flex;
align-items: center;
@@ -714,8 +697,8 @@ async function saveToolsVisibility() {
.summary-card {
padding: 14px;
border: 1px solid $border-color;
border-radius: 12px;
background: $bg-secondary;
border-radius: $radius-md;
background: $bg-card;
display: flex;
flex-direction: column;
gap: 6px;
packages/client/src/views/hermes/PerformanceView.vue
-17
View File
@@ -215,23 +215,6 @@ onBeforeUnmount(() => {
flex-direction: column;
}
.page-header {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 21px 20px;
border-bottom: 1px solid $border-color;
}
.header-title {
margin: 0;
color: $text-primary;
font-size: 16px;
font-weight: 600;
}
.header-actions {
display: flex;
align-items: center;
packages/client/src/views/hermes/PluginsView.vue
+4 -4
View File
@@ -296,8 +296,8 @@ watch(() => profilesStore.activeProfileName || 'default', () => {
.summary-card {
padding: 14px;
border: 1px solid $border-color;
border-radius: 12px;
background: $bg-secondary;
border-radius: $radius-md;
background: $bg-card;
display: flex;
flex-direction: column;
gap: 6px;
@@ -330,8 +330,8 @@ watch(() => profilesStore.activeProfileName || 'default', () => {
.plugins-table-wrap {
overflow-x: auto;
border: 1px solid $border-color;
border-radius: 12px;
background: $bg-secondary;
border-radius: $radius-md;
background: $bg-card;
}
.plugins-table {
packages/client/src/views/hermes/SkillsUsageView.vue
+2 -12
View File
@@ -313,16 +313,6 @@ onMounted(() => {
flex-direction: column;
}
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-shrink: 0;
padding: 21px 20px;
border-bottom: 1px solid $border-color;
}
.header-text {
display: flex;
align-items: baseline;
@@ -379,9 +369,9 @@ onMounted(() => {
.summary-card,
.usage-panel {
background: $bg-secondary;
background: $bg-card;
border: 1px solid $border-color;
border-radius: 12px;
border-radius: $radius-md;
}
.summary-card {
packages/client/src/views/hermes/UsageView.vue
-17
View File
@@ -91,23 +91,6 @@ onMounted(() => {
flex-direction: column;
}
.page-header {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 21px 20px;
border-bottom: 1px solid $border-color;
}
.header-title {
margin: 0;
color: $text-primary;
font-size: 16px;
font-weight: 600;
}
.usage-toolbar,
.period-selector {
display: flex;
tests/client/style-system.test.ts
+27
View File
@@ -0,0 +1,27 @@
import { readFileSync } from 'fs'
import { describe, expect, it } from 'vitest'
const readClientFile = (path: string) => readFileSync(`packages/client/src/${path}`, 'utf8')
describe('client style system', () => {
it('keeps shared page headers on one layout baseline', () => {
const globalStyles = readClientFile('styles/global.scss')
expect(globalStyles).toContain('min-height: 64px;')
expect(globalStyles).toContain('padding: 14px 20px;')
expect(globalStyles).toContain('.page-header > .header-actions')
})
it('aligns SCSS surfaces and radii with the Naive UI theme', () => {
const variables = readClientFile('styles/variables.scss')
const theme = readClientFile('styles/theme.ts')
expect(variables).toContain('--bg-card: #2a2a2a;')
expect(theme).toContain("cardColor: '#2a2a2a'")
expect(variables).toContain('$radius-sm: 6px;')
expect(variables).toContain('$radius-md: 8px;')
expect(variables).toContain('$radius-lg: 8px;')
expect(theme).toContain("borderRadius: '8px'")
expect(theme).toContain("borderRadiusSmall: '6px'")
})
})