osolit-research/system-monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

소스 수정

Browse Source
This commit is contained in:
Hyoseong Jo
2025-12-28 17:56:09 +09:00
parent fb43bf6d07
commit e6370601d4
2 changed files with 28 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/components/LocationStatsPortlet.vue
View File

@@ -70,8 +70,8 @@ function formatBytes(bytes: number): string {
.location-stats-card { .location-stats-card {
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 10px; border-radius: 8px;
padding: 10px; padding: 6px;
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -80,25 +80,25 @@ function formatBytes(bytes: number): string {
} }
.card-header { .card-header {
margin-bottom: 8px; margin-bottom: 4px;
padding-bottom: 6px; padding-bottom: 4px;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }
.card-title { font-size: 12px; font-weight: 600; color: var(--text-primary); } .card-title { font-size: 11px; font-weight: 600; color: var(--text-primary); }
.location-list { .location-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 4px;
overflow-y: auto; overflow-y: auto;
flex: 1; flex: 1;
} }
.location-item { .location-item {
background: var(--bg-tertiary, #f8fafc); background: var(--bg-tertiary, #f8fafc);
border-radius: 8px; border-radius: 6px;
padding: 8px 10px; padding: 5px 6px;
border-left: 3px solid #22c55e; border-left: 3px solid #22c55e;
} }
@@ -109,11 +109,11 @@ function formatBytes(bytes: number): string {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 6px; margin-bottom: 3px;
} }
.loc-name { .loc-name {
font-size: 11px; font-size: 10px;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
white-space: nowrap; white-space: nowrap;
@@ -122,15 +122,16 @@ function formatBytes(bytes: number): string {
} }
.loc-servers { .loc-servers {
font-size: 10px; font-size: 9px;
color: var(--text-muted); color: var(--text-muted);
flex-shrink: 0; flex-shrink: 0;
margin-left: 4px;
} }
.loc-stats { .loc-stats {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 6px;
} }
.stat-temp { .stat-temp {
@@ -138,7 +139,7 @@ function formatBytes(bytes: number): string {
} }
.temp-value { .temp-value {
font-size: 20px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: var(--text-primary); color: var(--text-primary);
font-family: monospace; font-family: monospace;
@@ -151,34 +152,40 @@ function formatBytes(bytes: number): string {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2px; gap: 1px;
min-width: 0;
overflow: hidden;
} }
.traffic-row { .traffic-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 2px;
} }
.traffic-label { .traffic-label {
font-size: 12px; font-size: 11px;
color: var(--text-muted); color: var(--text-muted);
width: 12px; width: 10px;
flex-shrink: 0;
} }
.traffic-value { .traffic-value {
font-size: 13px; font-size: 12px;
font-weight: 600; font-weight: 600;
font-family: monospace; font-family: monospace;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.traffic-value.rx { color: #06b6d4; } .traffic-value.rx { color: #06b6d4; }
.traffic-value.tx { color: #f59e0b; } .traffic-value.tx { color: #f59e0b; }
.no-data { .no-data {
font-size: 11px; font-size: 10px;
color: var(--text-muted); color: var(--text-muted);
text-align: center; text-align: center;
padding: 16px 0; padding: 12px 0;
} }
</style> </style>

2
frontend/index.vue
View File

@@ -254,7 +254,7 @@ onUnmounted(() => {
.dashboard-layout { display: flex; gap: 16px; height: 100%; } .dashboard-layout { display: flex; gap: 16px; height: 100%; }
.server-section { flex: 9; min-width: 0; } .server-section { flex: 9; min-width: 0; }
.network-section { flex: 1; min-width: 140px; max-width: 180px; display: flex; flex-direction: column; gap: 10px; } .network-section { flex: 1; min-width: 150px; max-width: 200px; display: flex; flex-direction: column; gap: 8px; }
.connection-status { position: fixed; bottom: 16px; right: 16px; padding: 8px 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; font-size: 12px; color: var(--text-muted); } .connection-status { position: fixed; bottom: 16px; right: 16px; padding: 8px 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; font-size: 12px; color: var(--text-muted); }
.connection-status.connected { color: #16a34a; } .connection-status.connected { color: #16a34a; }