mirror of
https://wget.la/https://github.com/leookun/cursor-byok
synced 2026-10-03 18:23:51 +08:00
feat: enhance progress bar UI in PluginManagementPage
- Replaced the native progress element with a custom-styled progress bar for improved visual feedback during downloads. - Added new styles for progress bar and fill animations to enhance user experience. - Updated the component to use ARIA roles for better accessibility.
This commit is contained in:
@@ -143,6 +143,37 @@
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.progressBar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
overflow: hidden;
|
||||
background: color-mix(in srgb, var(--vscode-foreground) 10%, transparent);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
// 反向斜纹(-45°)+ 无限反向滚动;未知总量时以 100% 宽度作不确定态。
|
||||
.progressFill {
|
||||
height: 100%;
|
||||
background-color: var(--vscode-progressBar-background, #0e70c0);
|
||||
background-image: linear-gradient(
|
||||
-45deg,
|
||||
rgb(255 255 255 / 24%) 25%,
|
||||
transparent 25% 50%,
|
||||
rgb(255 255 255 / 24%) 50% 75%,
|
||||
transparent 75%
|
||||
);
|
||||
background-size: 24px 24px;
|
||||
border-radius: 999px;
|
||||
transition: width 160ms ease;
|
||||
animation: progress-stripes 0.7s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes progress-stripes {
|
||||
to {
|
||||
background-position: -24px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.progressContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -152,12 +183,6 @@
|
||||
font-size: type.$font-size-base;
|
||||
}
|
||||
|
||||
progress {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
accent-color: var(--vscode-progressBar-background);
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--vscode-descriptionForeground);
|
||||
font-size: type.$font-size-xs;
|
||||
|
||||
@@ -277,11 +277,19 @@ function RuntimeProgressModal({ open, status, starting, onClose }: { open: boole
|
||||
<div className={styles.progressContent} aria-live="polite">
|
||||
<strong>{stage}</strong>
|
||||
{status?.phase === "downloading" && <>
|
||||
<progress
|
||||
<div
|
||||
className={styles.progressBar}
|
||||
role="progressbar"
|
||||
aria-label={t("下载进度")}
|
||||
value={percent ?? undefined}
|
||||
max={100}
|
||||
/>
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
aria-valuenow={percent ?? undefined}
|
||||
>
|
||||
<div
|
||||
className={styles.progressFill}
|
||||
style={{ width: `${percent ?? 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span>
|
||||
{total ? t("已下载 {downloaded} / {total}", { downloaded: formatBytes(downloaded), total: formatBytes(total) }) : t("已下载 {downloaded}", { downloaded: formatBytes(downloaded) })}
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user