catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-02-11 02:33:51 +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

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>