在前面幾天的實作中,我們專注於功能面的完善。然而,將醫學資訊的專業思維轉化為實際的照護工具時,我們不能只在乎冷冰冰的數據,更要考量到使用者(可能是長輩或病患)的心理感受與操作體驗。
今天,我們要在系統的最上方加入一段「動態問候語」。系統會自動抓取使用者當下的時間,根據早、中、晚顯示不同的問候與提醒,讓這套 AI 智慧用藥系統多一份人情味。
Step 1:建立問候語元件
在 src/components 資料夾下,新增一個名為 Greeting.jsx 的檔案。
我們將利用 JavaScript 內建的 Date 物件來取得現在的小時 (0~23),並用簡單的 if/else 判斷式來決定要顯示的文字與圖示。

Step 2:將元件整合進主畫面
接著,打開 src/App.jsx,將我們剛寫好的 Greeting 元件匯入,並把它放置在最主要的(main)區塊的最上方(表單的上面)。

成功如下圖,上方會依照你現在的時間給你相對應的話語,我的時間是晚上所以會是晚安!今天辛苦了