今天的目標很單純：讓使用者可以打字、送出、看到對話。
介面組成
我做了輸入框、送出按鈕與訊息列表，並用不同顏色區分使用者與 AI 的對話泡泡，另外預留一塊區域顯示文法修正與更自然的說法。
先用假資料
為了不被後端卡住，我先用假資料測試版面，確認排版與捲動都正常，再接上真實 API。還加了「載入中」提示，讓使用者知道 AI 正在思考。
踩雷紀錄：資料變了，畫面卻沒變
送出訊息後，AI 的修正結果要補在使用者那則訊息底下，但畫面一直沒有更新。原因是 Vue 3 追蹤的是陣列裡的「代理（proxy）物件」，而我是先建立一個物件、放進陣列，再去修改那個原始物件，Vue 完全沒有察覺。
解法是放進陣列之後，從陣列裡把那一筆取回來再修改。這種問題很難從程式碼表面看出來：資料其實有變，只是畫面不知道。
小結
前後端分開開發，可以降低一次處理太多問題的壓力，也更容易定位錯誤。
iThome鐵人賽
看影片追技術