Progress 進度條

展示一個任務或額度的完成程度。使用 Element Plus 的 el-progress。

設計準則

• 進度(匯入中 65%)用進度條;不確定要多久的等待用 Loading/Skeleton,不要假裝有進度
• 狀態色跟語意走:完成 success、有風險 warning、失敗 exception;不要自選裝飾色
• 額度用量這類「越滿越危險」的場景用顏色分段(綠 → 橘 → 紅)
• 環形/儀表盤用於儀表板的單一重點指標;列表、表單內用線性
• 百分比文字不要省略——進度條的意義就是讓人知道「還剩多少」

線性進度條

loading

百分比顯示在內

粗進度條(stroke-width ≥ 20)可以把文字放進條內,版面更緊湊:

loading

自訂顏色(額度警示)

loading

動畫進度條

條紋流動(striped-flow)表示「任務進行中」;indeterminate 用於知道在跑、但拿不到百分比的情況—— 有真實進度就不要用 indeterminate:

loading

環形

loading

儀表盤(自訂內容)

default slot 自訂中央內容,適合儀表板的重點指標:

loading

環形顏色(本站自訂)

⚠️ 本站與 Element Plus 不同

環形與儀表盤的描邊顏色,Element Plus 是寫死在 JS 裡的(STATUS_COLOR_MAP),不讀主題變數; 線性進度條走的是 CSS 的 --el-color-*。結果是同一個儀表板上,線性與環形會出現兩種藍、兩種綠。 本站在工程端統一覆寫成主題色,設計稿與實作都以主題色為準。

	Element Plus 原生	本站
預設	#20a0ff	--el-color-primary(品牌藍 #3b82f6)
success	#13ce66	--el-color-success(#67c23a)
exception	#ff4949	--el-color-danger(#f56c6c)
warning	#e6a23c	--el-color-warning(值相同)

SVG 的 stroke 是 presentation attribute,任何 CSS 宣告都蓋得過去,所以一次寫在 @accuhit/ui 就好, RD 使用 <el-progress type="circle"> 不需要另外設定:

.el-progress--circle:not(.progress-raw-color),
.el-progress--dashboard:not(.progress-raw-color) {
  .el-progress-circle__path { stroke: var(--el-color-primary); }
  &.is-success .el-progress-circle__path { stroke: var(--el-color-success); }
  &.is-warning .el-progress-circle__path { stroke: var(--el-color-warning); }
  &.is-exception .el-progress-circle__path { stroke: var(--el-color-danger); }
}

要用 :color 自訂環形顏色時(例如額度警示綠 → 橘 → 紅),這段覆寫會蓋掉 :color, 請在同一個元素加上 class="progress-raw-color" 讓它讓位:

<el-progress type="dashboard" class="progress-raw-color" :percentage="p" :color="colorByUsage" />

狀態與百分比文字

status 一設,EP 就把百分比文字換成圖標(線性:CircleCheck / WarningFilled / CircleClose; 環形:Check / WarningFilled / Close),文字顏色也一起變成狀態色。 所以「完成」的進度條顯示的是 ✓ 而不是 100% —— 這是 EP 的行為,不是漏做。

反過來,用 :color 而不是 status 時,.is-* 不會套用,所以條子變色但百分比文字仍是灰色; 額度警示要讓文字也跟著變色,得自己包一層。

Do / Don't

✅ Do	❌ Don't
有真實進度才用進度條	假進度騙人(用 Skeleton)
額度警示綠→橘→紅	90% 用量還是藍色
儀表板用環形/儀表盤	表格每列塞一個環形

給工程師

完整 API 見 Element Plus Progress 文件。 本站規範優先於 EP 文件中的視覺建議。