diff --git a/apps/desktop/src/features/plugins/PluginManagementPage.module.scss b/apps/desktop/src/features/plugins/PluginManagementPage.module.scss index 8e2cf0f..10a3e0b 100644 --- a/apps/desktop/src/features/plugins/PluginManagementPage.module.scss +++ b/apps/desktop/src/features/plugins/PluginManagementPage.module.scss @@ -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; diff --git a/apps/desktop/src/features/plugins/PluginManagementPage.tsx b/apps/desktop/src/features/plugins/PluginManagementPage.tsx index 2965aa2..a1ca992 100644 --- a/apps/desktop/src/features/plugins/PluginManagementPage.tsx +++ b/apps/desktop/src/features/plugins/PluginManagementPage.tsx @@ -277,11 +277,19 @@ function RuntimeProgressModal({ open, status, starting, onClose }: { open: boole
{stage} {status?.phase === "downloading" && <> - + aria-valuemin={0} + aria-valuemax={100} + aria-valuenow={percent ?? undefined} + > +
+
{total ? t("已下载 {downloaded} / {total}", { downloaded: formatBytes(downloaded), total: formatBytes(total) }) : t("已下载 {downloaded}", { downloaded: formatBytes(downloaded) })}