ssy/lan-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: color-code machine cards by OS type and fade offline cards

Browse Source
This commit is contained in:
shirainbown
2026-04-15 00:59:13 +08:00
parent d28aae585f
commit 80d21f68e4
1 changed files with 20 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/views/MachineList.vue
View File

@@ -20,7 +20,7 @@
<!-- Cards --> <!-- Cards -->
<div class="cards-grid"> <div class="cards-grid">
<div v-for="m in machines" :key="m.id" class="server-card" :class="{ 'guest-card': !isAdmin }" @click="isAdmin && goDetail(m.id)"> <div v-for="m in machines" :key="m.id" class="server-card" :class="[osClass(m.os_type), { 'guest-card': !isAdmin, 'offline-card': !m.is_online }]" @click="isAdmin && goDetail(m.id)">
<div class="card-header"> <div class="card-header">
<div class="title-row"> <div class="title-row">
<span class="status-dot" :class="m.is_online ? 'online' : 'offline'"></span> <span class="status-dot" :class="m.is_online ? 'online' : 'offline'"></span>
@@ -281,6 +281,11 @@ function getMainDisk(str) {
return root || null return root || null
} }
function osClass(os) {
const map = { Linux: 'os-linux', Windows: 'os-windows', macOS: 'os-macos' }
return map[os] || 'os-other'
}
function formatTime(t) { function formatTime(t) {
if (!t) return '-' if (!t) return '-'
const d = new Date(t) const d = new Date(t)
@@ -338,8 +343,21 @@ function formatTime(t) {
padding: 18px; padding: 18px;
box-shadow: var(--shadow); box-shadow: var(--shadow);
border: 1px solid var(--border); border: 1px solid var(--border);
border-left-width: 4px;
cursor: pointer; cursor: pointer;
transition: transform .12s ease, box-shadow .2s ease; transition: transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}
.server-card.os-linux { border-left-color: #3b82f6; background: linear-gradient(90deg, rgba(59,130,246,0.04) 0%, var(--surface) 20px); }
.server-card.os-windows { border-left-color: #22c55e; background: linear-gradient(90deg, rgba(34,197,94,0.04) 0%, var(--surface) 20px); }
.server-card.os-macos { border-left-color: #a855f7; background: linear-gradient(90deg, rgba(168,85,247,0.04) 0%, var(--surface) 20px); }
.server-card.os-other { border-left-color: #6b7280; background: linear-gradient(90deg, rgba(107,114,128,0.04) 0%, var(--surface) 20px); }
.server-card.offline-card {
opacity: 0.72;
filter: grayscale(0.45);
}
.server-card.offline-card .hostname {
color: var(--text-secondary);
} }
.server-card:hover { .server-card:hover {
transform: translateY(-2px); transform: translateY(-2px);