Improve dashboard header layout (centered title, grid) and ignore .omo/

This commit is contained in:
qingjie.du
2026-08-23 22:13:17 +09:00
parent 388da1df29
commit 465cedb29b
2 changed files with 31 additions and 7 deletions

3
.gitignore vendored
View File

@@ -140,3 +140,6 @@ dist
# Deploy secrets # Deploy secrets
deploy/.env deploy/.env
# OpenCode agent session state
.omo/

View File

@@ -180,26 +180,42 @@ function inlineDashboard(passkeyEnabled: boolean): string {
/* ── Header ── */ /* ── Header ── */
.header { .header {
display: flex; align-items: center; gap: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center; gap: 14px;
padding: 20px 32px; padding: 20px 32px;
background: rgba(15,23,42,.85); background: rgba(15,23,42,.85);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(99,102,241,.25); border-bottom: 1px solid rgba(99,102,241,.25);
position: sticky; top: 0; z-index: 10; position: sticky; top: 0; z-index: 10;
} }
.header img { .header-side {
display: flex; align-items: center;
min-width: 0;
}
.header-side.right {
justify-content: flex-end;
}
.header-logo-placeholder {
visibility: hidden;
flex: 0 0 auto;
}
.header-logo-placeholder img {
height: 36px; width: auto; height: 36px; width: auto;
background: #fff; border-radius: 8px; padding: 3px; background: #fff; border-radius: 8px; padding: 3px;
} }
.header-title {
text-align: center;
min-width: 0;
}
.header h1 { .header h1 {
font-size: 22px; font-weight: 700; margin: 0; font-size: 22px; font-weight: 700; margin: 0;
background: linear-gradient(90deg, #818cf8, #a78bfa); background: linear-gradient(90deg, #818cf8, #a78bfa);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
} }
.header .spacer { flex: 1; }
.header .status { .header .status {
font-size: 12px; color: #94a3b8; font-size: 12px; color: #94a3b8;
display: flex; align-items: center; gap: 6px; display: flex; align-items: center; gap: 6px;
white-space: nowrap;
} }
.header .status .dot { .header .status .dot {
width: 8px; height: 8px; border-radius: 50%; width: 8px; height: 8px; border-radius: 50%;
@@ -322,10 +338,15 @@ function inlineDashboard(passkeyEnabled: boolean): string {
</head> </head>
<body> <body>
<div class="header"> <div class="header">
<img src="/favicon.ico" alt="MCPlet logo"> <div class="header-side">
<h1>MCPletA2A Dashboard</h1> <span class="header-logo-placeholder" aria-hidden="true"><img src="/favicon.ico" alt=""></span>
<div class="spacer"></div> </div>
<div class="status"><span class="dot"></span> Auto-refresh 10s</div> <div class="header-title">
<h1>MCPletA2A Dashboard</h1>
</div>
<div class="header-side right">
<div class="status"><span class="dot"></span> Auto-refresh 10s</div>
</div>
</div> </div>
<div class="container"> <div class="container">