今日學習目標：步驟條（Stepper），是一個常用於引導用戶完成多步驟流程的組件。
步驟條可以清晰地指示當前的進度，讓用戶了解自己處於哪一個步驟，提升用戶體驗。

The greatest test of courage on earth is to bear defeat without losing heart.
世界上對勇氣的最大考驗是忍受失敗而不喪失信心。

設置 Stepper　組件

nuxt.config.ts

 primevue: {
    components: {
      prefix: "p-",
      include: [
        "stepper",
        "stepperPanel",
      ],
    },
  },

導入 icons & PrimeFlex

為了讓步驟條的外觀更具吸引力，需要導入一些圖標與 PrimeFlex

在 ~/plugins/primevue.js 中添加以下代碼：

import "primeicons/primeicons.css"; 
import "primeflex/primeflex.css"; //

構建一個三步驟的多步流程

1. p-stepper

<p-stepper v-model:activeStep="active">

p-stepper 是 PrimeVue 的步驟條元件，v-model:activeStep 綁定到 active，用來追蹤當前處於第幾步。

2. 每個步驟的結構
   每個步驟使用 p-stepperPanel 組件來定義。

<template #header="{ index, clickCallback }">
  <p-button
    class="bg-transparent border-none inline-flex flex-column gap-2"
    @click="clickCallback"
  >
    <span
      :class="[
        'border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center',
        {
          'bg-primary border-primary': index <= active,
          'surface-border': index > active,
        },
      ]"
    >
      <i class="pi pi-user" />
    </span>
  </p-button>
</template>

• header 是步驟條中的標題區塊，
  • 使用 p-button 元件來顯示按鈕，點擊時會觸發 clickCallback，跳轉到對應的步驟。
• index 表示這個步驟在所有步驟中的索引，active 是當前的步驟索引。
• index <= active 用來決定這個步驟是否已完成。

3. 整體流程
   第一步填寫基本資料後，點擊「Next」進入選擇興趣的步驟。
   第二步用戶選擇興趣後，可以返回上一步或進入下一步。
   最後一步顯示帳號創建成功的訊息，並允許用戶返回。

完整範例，請詳看官網

小結

stepper透過 p-stepperPanel 元件，自定義每個步驟的標題和內容，
並透過按鈕讓用戶在步驟之間切換。
這個功能適用於需要多步驟輸入的場景，如帳號創建、表單填寫、或者購物流程等。

參考資料:
https://v3.primevue.org/stepper/