:::info
本工程筆記資訊

時間：2023/6/12 ~ 2023/6/??
任務：讓 dashboard 中的畫面可以切換分頁
所屬組別與部門：平台開發部前端組
執行本任務的成員：
- 菘菘 @SiongSng
- 蕉哥 @LAZPbanahaker
- HACO @HACO
:::

## 重新整理架構
由於一些先前留下的技術債，導致要製作分頁的時候會遇到一些困難，感謝 @LAZPbanahaker 蕉哥的幫助，把部份的架構重新整理了一下。

## CSS 架構
*Author: @LAZPbanahaker*
*Final Edit: 2023/06/13 (uncompleted)*

這次修改架構的時候遇到非常多之前的遺留問題(類似於技術債)，最主要的問題就是 CSS 語法和 HTML 架構的問題，之前的HTML 架構並沒有考慮到未來調動的可改動性，僅僅只是將畫面給刻出來，當然，目的是將設計稿畫面呈現出來但是對於一個開源且必須要長期維護的專案來說，好的 HTML 結構可以增加程式碼的可讀性和維護性。這次改動當中最常與道的問題主要有以下幾點

- Margin 與 Padding 的正確用法
- Flex 的排版

#### Margin 與 Padding
希望大家在使用這兩個屬性時，都能先理解他們的正確使用時間，而不是隨意使用，Margin 是所謂的外距，是元素向外擴張的方式；Padding 則是內距，是讓元素的 border 與內容有隔開的空間。舉個例子：
相關檔案路徑: Lipoic-Frontend `src/components/Mobile/Overview/OverviewContent.vue`

**預期效果:**

<img src="https://hackmd.io/_uploads/Sk5kJG8P3.png" height="500px"></img><br/>
**說明:**
需要在`OverviewContent`區塊內增加一個內縮區域，也就是「內距」，此時應該使用 padding 較為恰當。

**原程式碼:**
***此部分原始碼是由 Haco 所編撰，希望能夠注意此區的說明。***

 <div class="mx-[30px] text-center">
    <div class="mt-[30px] text-[#3f4759] dark:text-[#c4c6d0]">
      <svg
        class="m-auto block"

**說明:**
這邊可以看到原本使用了 Tailwindcss 的 `mx-[30px]`，相當於 css 當中的 `margin-left: 30px; margin-right: 30px`，也就是左右新增了 margin，但很顯然是不符合當前情況的，應修改為 padding

**修改後程式碼:**

<div class="max-h-[calc(100svh-149px)] overflow-y-auto px-[6%] text-center">
    <div class="mt-[30px] text-[#3f4759] dark:text-[#c4c6d0]">
      <svg
        class="m-auto block"

**說明:**
這邊最重要的點在於 `px-[6%]`，這邊以 padding 替代掉了 margin，符合當前情況，接著使用百分比的方式來創造更好的 rwd 體驗。

**小節:**
從這裡可以看到正確使用 css property 對於整體程式碼可維護性質有極大的影響，必須慎重使用，若還不熟之 css property 請好好閱讀網路上的文檔或教學如 MDN 等。

## 單元測試
*Author: @SiongSng*

這次是我第一次在前端專為組件寫完整的測試，其中有項測試是要驗證切換分頁的功能，這時候出現了一則錯誤：`TypeError: Cannot read properties of undefined (reading 'currentRoute')`，因為

### Vue-Router

---

<small>Copyright © 2022-2023 Lipoic. All rights reserved.</small>

{%hackmd @lumynou5/dark-theme %}
<!-- the theme made by lumynou5 -->