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.

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;

apps/desktop/src/features/plugins/PluginManagementPage.tsx

@@ -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}
+          aria-valuemin={0}
-          max={100}
+          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>