catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-02-05 01:50:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 更新检查更新按钮的加载状态和通知功能，增加工具提示

Browse Source
This commit is contained in:
catlog22
2026-01-21 13:00:25 +08:00
parent 572c103fbf
commit cac0566627
2 changed files with 107 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
ccw/src/templates/dashboard-js/components/version-check.js
View File

@@ -55,26 +55,74 @@ function toggleAutoUpdate() {
async function checkForUpdatesNow() {
const btn = document.getElementById('checkUpdateNow');
if (btn) {
// Add loading animation
btn.classList.add('animate-spin');
// Add loading state - change button color and animate icon
btn.classList.add('checking');
btn.disabled = true;
}
// Show checking notification
console.log('[Version Check] Starting update check...');
if (typeof addGlobalNotification === 'function') {
addGlobalNotification('info', 'Checking for updates...', 'Please wait', 'version-check');
} else {
console.warn('[Version Check] addGlobalNotification is not available');
}
// Force check regardless of toggle state
const originalState = autoUpdateEnabled;
autoUpdateEnabled = true;
try {
await checkForUpdates();
addGlobalNotification('success', 'Update check complete', 'Checked for latest version', 'version-check');
const res = await fetch('/api/version-check');
if (!res.ok) {
throw new Error('Failed to fetch version information');
}
const data = await res.json();
versionCheckData = data;
console.log('[Version Check] Result:', data);
if (data.hasUpdate) {
// New version available
console.log('[Version Check] Update available:', data.latestVersion);
showUpdateBanner(data);
if (typeof addGlobalNotification === 'function') {
addGlobalNotification(
'success',
'Update Available!',
`New version ${data.latestVersion} is available (current: ${data.currentVersion})`,
'version-check'
);
}
} else {
// Already up to date
console.log('[Version Check] Already up to date:', data.currentVersion);
if (typeof addGlobalNotification === 'function') {
addGlobalNotification(
'success',
'You\'re up to date!',
`Current version ${data.currentVersion} is the latest`,
'version-check'
);
}
}
} catch (err) {
addGlobalNotification('error', 'Update check failed', err.message, 'version-check');
console.error('[Version Check] Error:', err);
if (typeof addGlobalNotification === 'function') {
addGlobalNotification(
'error',
'Update check failed',
err.message || 'Unable to check for updates',
'version-check'
);
}
} finally {
// Restore original state
autoUpdateEnabled = originalState;
if (btn) {
btn.classList.remove('animate-spin');
btn.classList.remove('checking');
btn.disabled = false;
}
}

56
ccw/src/templates/dashboard.html
View File

@@ -234,6 +234,51 @@
animation: spin 1s linear infinite;
}
/* Custom Tooltip (bottom position) */
.tooltip-bottom {
position: relative;
}
.tooltip-bottom:hover::after {
content: attr(data-tooltip);
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
padding: 6px 10px;
background-color: hsl(var(--foreground));
color: hsl(var(--background));
font-size: 12px;
white-space: nowrap;
border-radius: 4px;
z-index: 1000;
pointer-events: none;
}
.tooltip-bottom:hover::before {
content: "";
position: absolute;
top: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-bottom-color: hsl(var(--foreground));
z-index: 1001;
pointer-events: none;
}
/* Check Update Button Loading State */
#checkUpdateNow.checking {
background-color: hsl(var(--primary));
color: hsl(var(--primary-foreground));
pointer-events: none;
}
#checkUpdateNow.checking .check-icon-default {
display: none;
}
#checkUpdateNow.checking .check-icon-loading {
display: block;
animation: spin 1s linear infinite;
}
/* Auto-Update Toggle Switch */
.auto-update-switch {
position: relative;
@@ -345,15 +390,20 @@
<!-- Auto-Update Controls -->
<div class="flex items-center gap-2 border-l border-border pl-2">
<!-- Check Now Button -->
<button class="p-1.5 text-muted-foreground hover:text-foreground hover:bg-hover rounded" id="checkUpdateNow" data-i18n-title="header.checkUpdateNow" title="Check for updates now" onclick="checkForUpdatesNow()">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<button class="tooltip-bottom p-1.5 text-muted-foreground hover:text-foreground hover:bg-hover rounded" id="checkUpdateNow" data-tooltip="Check for updates now" onclick="checkForUpdatesNow()">
<!-- Download Icon (default) -->
<svg class="check-icon-default" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
<!-- Loading Icon (checking state) -->
<svg class="check-icon-loading hidden" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg>
</button>
<!-- Auto-Update Toggle Switch -->
<label class="auto-update-switch" data-i18n-title="header.autoUpdate" title="Auto-update check">
<label class="tooltip-bottom auto-update-switch" data-tooltip="Auto-update">
<input type="checkbox" id="autoUpdateToggle" onchange="toggleAutoUpdate()" checked>
<span class="auto-update-slider"></span>
</label>