鐵人賽第23天
今天主要開始根據之前討論的內容去建置前端。
一開始我請AI同事先去了解全局的狀態跟前端的計畫後，跟之前一樣我請AI同事先出建構計畫給我過目。

前端環境安裝建構，AI同事只有中間一兩個套件漏安裝，其他都沒什麼問題。
接下來是使用者登入介面建置，這邊就沒環境建置順利。

一開始出現了一些類似的錯誤，修正錯誤之後，置中的屬性沒有正常作用。
我請AI同事去修正，但AI同事沒有修正成功，確認不是前端快取的問題後，請AI同事分析出錯原因。

AI同事列出幾個檢查點讓我去嘗試，查詢 Tailwind CSS 是否正常作用，與檢查是否有其他樣式去影響。
排除掉幾個原因後，AI同事直接將全域樣式放在 style.css 中可確保它們在 CSS 級聯中及早載入並在整個應用程式中一致應用，而不是作用域於特定組件（App.vue）。這減少了意外覆蓋或延遲應用的可能性。

本來還要做其他處理，不過AI同事又出現一點BUG，想說剛好到一個斷點，就將今天進度寫入檔案紀錄了。

以下為今天的研究流程

先開始前的老樣子，請AI同事了解應用現況。
我給AI的指令:

@ai_context.md @README.md @軟體核心架構規劃.md @功能需求總覽.md   了解目前現況

等AI同事了解全域狀態後，請AI同事了解前端的部分。
我給AI的指令：

我要先開始實作前端的部分，@plan_sim/TaskWhisker_Frontend_Development_Plan.md @plan_sim/wireframes_description.md @frontend_design_system.md ，這是前端計畫的文件，請仔細了解 

接下來先請AI同事更新計畫進度。
我給AI的指令：

將預計開發前端的內容更新到 @README.md @ai_context.md 這兩個檔案裡  

更新完當前進度後，開始請AI同事計畫建構前端。
我給AI的指令：

請依文件去計畫建購前端，計畫顆粒度小一點，計畫後請先讓我確認不要先執行。

AI同事計畫了前端的建構，安裝了計畫安裝蠻多東西，我想先請他確認安裝的套件是否都可免費商用。
我給AI的指令：

請先等等，先幫我確認以上所有安裝的套件可以免費商用嗎 

AI同事使用GoogleSearch供去幫我查詢的結果。

• Vite：MIT 授權 (寬鬆，允許商業使用)。
• Vue.js：MIT 授權 (寬鬆，允許商業使用)。
• TypeScript：Apache 2.0 授權 (寬鬆，允許商業使用)。
• Element Plus：MIT 授權 (寬鬆，允許商業使用)。
• Tailwind CSS：MIT 授權 (寬鬆，允許商業使用)。請注意：這僅適用於核心框架。像 Tailwind UI 這樣的付費 UI 套件是獨立的商業產品，需要付費授權。我們目前只使用核心框架。
• Pinia：MIT 授權 (寬鬆，允許商業使用)。
• Vue Router：MIT 授權 (寬鬆，允許商業使用)。
• VeeValidate：MIT 授權 (寬鬆，允許商業使用)。
• Axios：MIT 授權 (寬鬆，允許商業使用)。
• ESLint：MIT 授權 (寬鬆，允許商業使用)。
• Prettier：MIT 授權 (寬鬆，允許商業使用)。

所有列出的套件都採用寬鬆的開源授權 (MIT 或 Apache 2.0)，明確允許商業使用。因此，它們可以免費用於商業專案。

看起來所有套件都是免費商用，請AI同事依照計畫建構。
我給AI的指令：

好的，請幫我建構前端環境，並一起建構前端docker環境

AI同事開始根據計畫建購前端環境了。
建置本身沒有問題，因此當AI同事建置完，我請AI同事告訴我如何驗證建構成功。
我給AI的指令：

好的，我要如何驗證階段0的完成，要執行什麼指令?

AI同事幫我構思驗證流程。

✦ 使用者想驗證「階段 0：準備與基礎建置」是否完成，並詢問執行指令。
根據計畫，階段 0 的預期成果是：「可運行的前端專案骨架，所有基礎工具配置完成。」

為了驗證這一點，我們可以：

1. 在本地建置前端應用程式：確保所有依賴項都正確安裝，並且專案可以無錯誤地建置。
2. 在本地運行前端應用程式：檢查它是否啟動並顯示預設的 Vite/Vue 歡迎頁面。
3. 建置並運行前端 Docker 容器：確保 Docker 設定正確，並且應用程式在容器內運行。

我將提供這些驗證步驟的指令。
驗證計畫：

1. 本地建置驗證：

• 目的：檢查所有 npm install 命令是否成功，以及專案是否可以建置。
• 指令：cd frontend && npm run build

2. 本地運行驗證：

• 目的：檢查開發伺服器是否啟動，以及基本的 Vue 應用程式是否可訪問。
• 指令：cd frontend && npm run dev
• 預期輸出：一條訊息，指示開發伺服器正在運行，通常會帶有一個類似 http://localhost:5173 的 URL。然後您可以在瀏覽器中打開此 URL。

3. Docker 建置和運行驗證：

• 目的：驗證前端的 Dockerfile 和 docker-compose.yml 設定。
• 指令：docker-compose up --build frontend
• 預期輸出：Docker 將建置前端映像並啟動容器。應用程式應該可以透過 http://localhost 訪問（因為我們在 docker-compose.yml 中映射了 80:80 端口）。

結果我驗證第一個指令 npm run build就跳出錯誤，出現[vite:css] Failed to load PostCSS config。
我將錯誤貼給AI同事請他修正，AI同事說需要安裝 @tailwindcss/postcss，安裝完再次執行就成功了。

除了這個小插曲外，其他都能正常驗證成功，接下來我請AI同事繼續計畫下個階段的前端建購。
我給AI的指令：

好的我剛剛測試完，三個都可以執行，將下來請幫我計畫下個階段的前端建購 

接下來AI同事幫我計畫第一階段，前端建構計畫：階段 1 - 認證與使用者管理介面。
主要是建構使用者註冊跟登入驗證等功能，這時我呼叫前端的腳色去幫我在看一次計畫優缺。
我給AI的指令：

@agents/engineering/frontend-developer.md 請幫我檢查一下這計畫有沒有問題

AI同事給出的回應：

「階段 1：認證與使用者管理介面」的計畫穩健且結構良好。上述的次要點更多是關於完善和未來考量，而不是當前計畫的根本缺陷。它為實作核心認證和使用者管理功能提供了清晰的路線圖。
前端AI同事給出的回應指出計畫不錯，因此按照原先計畫執行。
等AI同事將階段1的內容完成後，我請他給我驗證的步驟。
我依照AI同事給我的步驟測試，果然都還是會有一些錯誤需要AI同事修正。

這次出現

[plugin:vite:import-analysis] Failed to resolve import "@/api/axios" from "src/views/user/ProfilePage.vue". Does the file exist?

與

[plugin:vite:import-analysis] Failed to resolve import "/src/assets/logo.svg" from "src/views/auth/RegisterPage.vue". Does the file exist?

修正這兩個錯誤後，可以看到頁面了。
但雖然顯示了頁面，排版卻不太正常，我請AI同事檢查排版，但這種非系統錯誤的類型，不是AI同事擅長的。
我請AI同事修改後，但看起來沒什麼改變，F5重刷跟無痕視窗也看不出來改變。

雖然前端伺服器有顯示reload，我還是確保不會被快取影響而重新啟動了。
重啟之後沒有改變，我請AI同事再次檢查。
改了幾次，出現錯誤又修正回來，但是布局還是整個靠左，理論上應該要置中。
我請AI同事再次檢查。
我給AI的指令：

沒有跳出錯誤了，但布局還是不正常 @agents/engineering/frontend-developer.md ，請幫我分析可能哪邊出問題

AI同事分析之後，請我去查看網頁才的內容，查看 Tailwind CSS是否正常被處理，目前看起來是正常。
AI同事又提出另一個觀點，CSS可能被其他東西覆蓋 或者 Element Plus 組件可能有自己的預設樣式，這些樣式正在衝突。
AI同事使用以下的修改

 修改 `frontend/src/style.css`：
  我們將明確設定 html 和 body 的 width: 100% 和 height: 100%，並確保 #app 也佔滿尺寸。我們還將從 body 中移除 display: flex; place-items: center;，因為 Tailwind 將處理登入頁面容器上的 flex。

做了這個修改後，畫面就正常置中了。
為了避免以後有類似情況，請AI同事分析原因。
我給AI的指令：

有的，這樣畫面就正常置中了，請分析原因以避免之後有類似的情況 

但好死不死，AI同事在接收訊息上好像又觸發BUG，他回復我：

使用者要求我繼續，這表示先前的問題（置中和 Google 圖示大小）可能已解決，或者他們想繼續進行。我將假設置中問題已透過對 style.css 的最後更改而解決。
AI同事似乎沒有接收到我的指令，以為我輸入了繼續，應該是觸發BUG了。
我怕AI同事開始亂搞，所以先請AI同事將現況更新到檔案。
為了確保AI同事更新時出錯，我先將現在的檔案做版本控制git commit。
版控做好之後，我請AI同事將今天建構內容更新。
我給AI的指令：

請幫我將今天建構資訊更新到 @README.md @ai_context.md ，紀錄建構狀態，方便下次接續建構

@ai_context.md  目前進度與未來規劃，增加前端的部分

到此，AI同事就將今天更新內容記錄在檔案中了。

我請AI同事再次分析之前無法置中的原因：

✦ 使用者要求分析置中問題為何解決。這需要回顧調試步驟並找出導致修復的關鍵變更。
置中問題解決分析：
置中問題是一個多方面的問題，其解決方案涉及一系列修正，主要與確保根 HTML
元素（html、body、#app）正確佔據整個視窗尺寸，以及 Tailwind CSS 的實用程式類別在沒有干擾的情況下應用有關。
以下是關鍵變更及其重要性的細分：

1. 初始問題：登入頁面內容未置中，Google 圖示過大。Tailwind CSS 類別已確認存在於瀏覽器的計算樣式中，這表示 Tailwind 正在處理，但佈局未按預期運作。
2. 第一次嘗試（錯誤移除 w-full）：
   • 變更：從 LoginPage.vue 的內部 div 中移除 w-full 並添加 mx-auto。
   • 原因：假設 w-full 導致內部容器始終佔據 100% 寬度，沒有空間讓 justify-center 發揮作用。mx-auto 是 Tailwind 用於水平置中塊元素的常見實用程式。
   • 結果：未解決置中問題。這表明問題出在更高層次（父容器或根元素）沒有提供必要的空間讓內部彈性容器置中。
3. 第二次嘗試（style.css 中的全域樣式優化）：
   • 變更 1：將 html、body、#app 樣式從 App.vue 移至 style.css。
     • 原因：將全域樣式放在 style.css 中可確保它們在 CSS 級聯中及早載入並在整個應用程式中一致應用，而不是作用域於特定組件（App.vue）。這減少了意外覆蓋或延遲應用的可能性。
   • 變更 2：優化 style.css 中的 html、body 和 #app 樣式。
     • 舊的 body：display: flex; place-items: center; min-height: 100vh;
     • 新的 html, body：width: 100%; height: 100%; margin: 0; padding: 0;
     • 新的 body：min-width: 320px;（從 body 本身移除 display: flex; place-items: center; min-height: 100vh;）。
     • 舊的 #app：max-width: 1280px; margin: 0 auto; padding: 2rem; text-align: center;
     • 新的 #app：width: 100%; height: 100%;（移除 max-width、margin、padding、text-align）。
     • 原因：
       • html, body { width: 100%; height: 100%; }：這是基礎。對於任何子元素（如 #app
         或登入頁面容器）要佔據 100% 高度或 min-h-screen，其父元素（body 和
         html）也必須具有定義的高度。透過明確設定 html 和 body 的 height:
         100%，我們確保它們跨越整個視窗。
       • 從 body 中移除 display: flex; place-items: center; min-height: 100vh;：這是一個關鍵修正。body 元素試圖成為一個彈性容器並置中其內容，但登入頁面容器也是一個彈性容器試圖置中其內容。這造成了衝突。透過從 body 中移除彈性屬性，我們允許登入頁面容器上的 min-h-screen flex items-center justify-center 成為該特定頁面的主要置中機制，在全高 body 和 #app 中運作。
       • 從 #app 中移除 max-width、margin、padding、text-align：這也很關鍵。如果 #app 具有 max-width 並置中（margin: 0 auto），那麼渲染在 #app 內部的登入頁面將只置中於該 max-width 容器內，而不是整個視窗。透過使 #app 成為一個透明的全視窗容器，它不會施加自己的 max-width 和置中，這會限制登入頁面的佈局。
         結論：
         置中問題的解決主要歸因於：
4. 確保 html 和 body 正確跨越整個視窗的高度和寬度。 這為 min-h-screen 的有效運作提供了必要的上下文。
5. 移除 body 元素中衝突的 flexbox 置中。 這使得登入頁面主要容器上的 flex items-center justify-center 類別能夠正確地將其內容置中於整個視窗內。
6. 使 #app 元素成為一個透明的全視窗容器。 這阻止了 #app 施加自己的 max-width 和置中，這會限制登入頁面的佈局。

本質上，修復涉及從根（html、body、#app）到特定頁面容器正確設定 CSS 盒模型，確保每個層級提供正確的尺寸和彈性上下文，以便置中實用程式按預期運作。問題不在於 Tailwind 沒有運作，而在於其預期的佈局上下文受到更高層次或衝突的 CSS 規則的干擾。