feat(dashboard): add npm version update notification

- Add /api/version-check endpoint to check npm registry for updates
- Create version-check.js component with update banner UI
- Add CSS styles for version update banner
- Fix hook manager button event handling (use e.currentTarget)
- Bump version to 6.1.2

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
catlog22
2025-12-09 14:36:34 +08:00
parent eb1093128e
commit 1267c8d0f4
6 changed files with 425 additions and 10 deletions

View File

@@ -159,3 +159,133 @@ body {
display: block;
}
/* ===================================
Version Update Banner
=================================== */
.version-update-banner {
position: sticky;
top: 0;
z-index: 100;
background: linear-gradient(135deg, hsl(var(--primary) / 0.1), hsl(var(--accent) / 0.1));
border-bottom: 1px solid hsl(var(--primary) / 0.3);
padding: 0.75rem 1rem;
transform: translateY(-100%);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.version-update-banner.show {
transform: translateY(0);
opacity: 1;
}
.version-banner-content {
display: flex;
align-items: center;
gap: 0.75rem;
max-width: 1400px;
margin: 0 auto;
flex-wrap: wrap;
}
.version-banner-icon {
font-size: 1.25rem;
}
.version-banner-text {
flex: 1;
font-size: 0.875rem;
color: hsl(var(--foreground));
}
.version-banner-text code {
background: hsl(var(--muted));
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
font-family: var(--font-mono);
font-size: 0.8125rem;
}
.version-banner-btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
font-size: 0.8125rem;
font-weight: 500;
color: hsl(var(--primary-foreground));
background: hsl(var(--primary));
border: none;
border-radius: 0.375rem;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}
.version-banner-btn:hover {
background: hsl(var(--primary) / 0.9);
transform: translateY(-1px);
}
.version-banner-btn:active {
transform: translateY(0);
}
.version-banner-btn.secondary {
background: hsl(var(--secondary));
color: hsl(var(--secondary-foreground));
}
.version-banner-btn.secondary:hover {
background: hsl(var(--secondary) / 0.8);
}
.version-banner-close {
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
color: hsl(var(--muted-foreground));
background: transparent;
border: none;
border-radius: 0.25rem;
cursor: pointer;
transition: background 0.2s, color 0.2s;
margin-left: auto;
}
.version-banner-close:hover {
background: hsl(var(--destructive) / 0.1);
color: hsl(var(--destructive));
}
/* Mobile responsiveness for banner */
@media (max-width: 640px) {
.version-banner-content {
gap: 0.5rem;
}
.version-banner-text {
width: 100%;
order: -1;
}
.version-banner-btn {
flex: 1;
justify-content: center;
}
.version-banner-close {
position: absolute;
top: 0.5rem;
right: 0.5rem;
}
.version-update-banner {
position: relative;
padding-right: 2.5rem;
}
}