下載現成套件
此專案追求的是在最短的時間開發出成果，因此直接找到並使用：
由於本專案是用 typescript 開發，因此還需額外下載開發階段包含 TypeScript 型別定義的版本
1
2
3
| npm i react-vertical-timeline-component
npm i --save-dev @types/react-vertical-timeline-component
|
此套件自帶動畫，就不需要額外自行撰寫 GSAP 動畫了
加入下拉選單顯示不同 Timeline 方案
先定義好多組流程陣列，每一組都是一個陣列 ProcessItem[]，包含
- step (步驟編號)
- title (標題)
- description (描述)
- icon (對應的圖示)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
const standardProcess: ProcessItem[] = [
{
step: "Step 1",
title: "需求洽談",
description: "了解客戶需求，確定產品定位與市場目標。",
icon: <ClipboardCheck />,
},
{
step: "Step 2",
title: "配方研發",
description: "根據客戶需求研發獨特配方，並提供樣品測試。",
icon: <FlaskConical />,
},
...
];
const brandOEMProcess: ProcessItem[] = [
...
];
const LiveCommerceOEMProcess: ProcessItem[] = [
...
];
|
以上三組流程陣列會作為 processPlanOptions 陣列的元素(items)，在我的合作流程(CooperationProcess)元件內動態調用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
const processPlanOptions: ProcessPlan[] = [
{
id: "standard",
name: "標準製造流程",
items: standardProcess,
},
{
id: "brand-oem",
name: "品牌代工流程",
items: brandOEMProcess,
},
{
id: "LiveCommerce-oem",
name: "帶貨分潤代工流程",
items: LiveCommerceOEMProcess,
},
];
|
透過狀態管理(useState)，selectedPlan 用來儲存當前選擇的流程方案，當使用者改變選擇時，handlePlanChange 會更新 selectedPlan。
1
2
3
4
5
6
7
|
const [selectedPlan, setSelectedPlan] = useState<string>("");
const handlePlanChange = (value: string) => {
setSelectedPlan(value);
};
|
程式碼邏輯為：
- 在
processPlanOptions 陣列中，尋找 id 符合 selectedPlan 的流程方案，如果找到了，就把這個方案存到變數 plan。
- 如果有找到 (plan 存在)，就回傳這個方案的流程步驟 (plan.items)。如果沒有找到 (例如 selectedPlan 為空或沒有對應方案)，就預設回傳第一個流程方案 (processPlanOptions[0].items)，確保 UI 至少會顯示一組流程。
1
2
3
4
5
|
const getCurrentProcessItems = (): ProcessItem[] => {
const plan = processPlanOptions.find((plan) => plan.id === selectedPlan);
return plan ? plan.items : processPlanOptions[0].items;
};
|
Select 元件則使用 shadcn/ui 提供的下拉選單，SelectContent 透過迭代 processPlanOptions 來動態渲染可選的流程：
1
2
3
4
5
6
7
| <SelectContent>
{processPlanOptions.map((plan) => (
<SelectItem key={plan.id} value={plan.id}>
{plan.name}
</SelectItem>
))}
</SelectContent>
|
動態顯示對應的流程時間軸
- 找出 processPlanOptions 陣列中符合 selectedPlan 的流程。
- 如果
selectedPlan 為空，則預設顯示 processPlanOptions[0] (即第一個流程)。
1
2
3
4
5
|
const getCurrentProcessItems = (): ProcessItem[] => {
const plan = processPlanOptions.find((plan) => plan.id === selectedPlan);
return plan ? plan.items : processPlanOptions[0].items;
};
|
時間軸元件顯示
每個 VerticalTimelineElement 代表一個流程步驟：
date={milestone.step} → 顯示步驟號碼，如「Step 1」。icon={milestone.icon} → 顯示對應的圖示，如 ClipboardCheck、FlaskConical。h3 和 p 內嵌標題與描述。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <VerticalTimeline>
{getCurrentProcessItems().map((milestone, index) => (
<VerticalTimelineElement
key={index}
className='vertical-timeline-element'
contentArrowStyle={{ borderRight: "7px solid #4F46E5" }}
date={milestone.step}
iconStyle={{ background: "#4F46E5", color: "#fff" }}
icon={milestone.icon}
>
<h3 className='text-lg font-bold'>{milestone.title}</h3>
<p className='text-sm'>{milestone.description}</p>
</VerticalTimelineElement>
))}
</VerticalTimeline>
|
若您覺得這篇文章對您有幫助，歡迎分享出去讓更多人看到⊂◉‿◉つ~
留言版