Develop with Vue3 + Element Plus + Vue-i18n

What are you most proud of, and what would you do differently next time?

I'm from Taiwan, so my English is not very good, I'm sorry. What I am most proud of is writing the picture display area. A picture display area has the following functions

• Users can view photos
• Users can click the left and right arrows to switch photos
• Users can click on the image to view it in the lightbox
• Users can switch to view images in lightbox

Writing this took me the longest time. Next time, I hope to extract it into a shared component. As long as an Array of image URLs is passed in, the image display component with the above functions can be started. Produced in Chinese and English.

我來自台灣，所以英文不太流利請見諒 最自豪的是寫出圖片展示區，一個圖片展示區含有以下功能 使用者可以查看照片 使用者可以點選左右的箭頭切換照片 使用者可以點選圖片進入lightbox查看 使用者可以在lightbox切換圖片查看

寫出這個是花了我最多時間的，我下次希望可以將它抽取成為一個共用組件，只要傳入圖片URL的Array，就可以啟動包含以上功能的圖片展示組件。 另外製作了中文與英文兩種版本

What challenges did you encounter, and how did you overcome them?

I'm from Taiwan, so my English is not very good, I'm sorry. When browsing on a mobile phone, users always double-click the screen to zoom in and out. Even double-click on an input box will cause the entire page to expand, and the screen will always shrink back to normal size. Fortunately, this problem can be solved by touch-action: manipulation; can be used, although it may not be an optimal solution.

我來自台灣，所以英文不太流利請見諒 手機瀏覽時使用者總是雙擊螢幕就會縮放，甚至點選輸入框的時候也會造成整個頁面拉大，畫面總得自己縮小回正常大小，所幸這個問題可以透過 touch-action: manipulation;處理，儘管它可能不是一個最優的解決方案。

What specific areas of your project would you like help with?

I'm from Taiwan, so my English is not very good, I'm sorry. Vue's responsive state management, the project uses localStorage to store shopping cart data, but localStorage is not responsive. If the data is changed, Vue will not be able to capture the change. To solve this problem, as long as the user has an "add to cart" or "remove from cart" operation, I will reorganize the screen and re-render with v-if, but I know this is not the best solution, and I hope there can be a better solution.

我來自台灣，所以英文不太流利請見諒 Vue的響應式狀態的管理，專案使用localStorage儲存購物車的資料，但是localStorage並不是響應式的，如果進行數據有更改，Vue將無法捕捉到變化，為了解決這個問題，只要使用者有「添加購物車」或「移除購物車」的操作，我將會畫面重整並配合v-if進行重新渲染，但是我知道這不是一個最好的解答方法，希望可以有更好的解決方法。