1. 加入 axios 套件。

2. 為了在 JS 中能夠區別 protected 變數及方法而使用下底線命名，並在 ESLint 中加入不可隨意使用下底線變數的規則。
3. 將標籤的樣式獨立出來，不與 button 混在一起。
4. 將 dev 與 production 的環境設定分開。
5. 增加 JS 測試。
6. 調整專案程式分類及結構。

Author: GitHubPlayerZero

Diff for: .env

@@ -0,0 +1,5 @@
+## 圖片存放路徑
+VITE_IMG_BASIC_PATH = /src/assets/images/
+
+## API URL
+VITE_API_BASE_URL = http://localhost:3000/

Diff for: .env.development

@@ -0,0 +1,2 @@
+## API URL
+#VITE_API_BASE_URL = http://localhost:3000/

Diff for: .env.production

@@ -15,7 +15,17 @@ export default [
 
   {
     rules: {
-      semi: "error", // 必須要有分號
+      // 必須要有分號
+      semi: "error",
+      // 不允許使用以底線命名的變數及方法
+      "no-underscore-dangle": [
+        "error",
+        {
+          allowAfterThis: true, // 允許接在 this 之後
+          allowAfterSuper: true, // 允許接在 super 之後
+          allowAfterThisConstructor: true, // 允許接在 this.constructor 之後
+        },
+      ],
     },
   },
 

Diff for: eslint.config.js

@@ -14,6 +14,7 @@
   "dependencies": {
     "@vee-validate/i18n": "^4.15.0",
     "@vee-validate/rules": "^4.15.0",
+    "axios": "^1.8.1",
     "bootstrap": "^5.3.3",
     "pinia": "^2.3.0",
     "swiper": "^11.2.1",

Diff for: package-lock.json

@@ -65,7 +65,7 @@
 
 <script setup>
 import { RouterLink, RouterView } from "vue-router";
-import CollapseMenu from "./components/CollapseMenu.vue";
+import CollapseMenu from "./components/global/CollapseMenu.vue";
 </script>
 
 <style lang="scss" scoped>
@@ -91,6 +91,7 @@ import CollapseMenu from "./components/CollapseMenu.vue";
   background-color: var(--bs-body-bg);
   position: absolute;
   width: 100%;
+  z-index: 1;
 }
 
 // 搜尋功能

Diff for: package.json

@@ -0,0 +1,10 @@
+import axios from "axios";
+
+/**
+ * API 共用設定
+ */
+export class Api {
+  static _axios = axios.create({
+    baseURL: import.meta.env.VITE_API_BASE_URL,
+  });
+}

Diff for: src/App.vue

@@ -0,0 +1,75 @@
+import { Api } from "./api";
+import { DateUtils } from "@/utils";
+
+/**
+ * Event 相關資料處理
+ */
+export class EventApi extends Api {
+  static #eventUrl = "/events";
+
+  // 主分類標籤的 index，預設以第一個標籤為主要分類
+  static get mainTagIndex() {
+    return 0;
+  }
+
+  /**
+   * 取得所有未過期活動，預設以日期由近至遠排序。
+   * @returns {Promise} 由後端取回的資料。
+   */
+  static async fetchEvents() {
+    let result;
+
+    await this._axios
+      .get(`${this.#eventUrl}?date_gte=${DateUtils.getTomorrow()}&_sort=date`)
+      .then((res) => {
+        result = res.data;
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+
+    return result;
+  }
+
+  /**
+   * 取得 banner 活動，預設以日期由近至遠排序。
+   * @returns {Promise} 由後端取回的資料。
+   */
+  static async fetchBanners() {
+    let result;
+
+    await this._axios
+      .get(`${this.#eventUrl}?isBanner=true&_sort=date`)
+      .then((res) => {
+        result = res.data;
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+
+    return result;
+  }
+
+  /**
+   * 取得主分類標籤 ID。
+   * @param {Object} event 活動資料。
+   * @returns {number} 主分類標籤的 ID。
+   */
+  static getMainTagId(event) {
+    return event?.tags[this.mainTagIndex];
+  }
+
+  /**
+   * 取得主分類之外的其它分類標籤 ID。
+   * @param {Object} event 活動資料。
+   * @returns {Array} 其它分類標籤的 ID。
+   * @throws 沒有 tags 資料時拋出錯誤。
+   */
+  static getOtherTagId(event) {
+    const tags = event?.tags;
+    if (!tags) {
+      throw Error("必須要有 tags 資料！");
+    }
+    return tags.slice(this.mainTagIndex + 1);
+  }
+}

Diff for: src/api/api.js

@@ -0,0 +1,5 @@
+import { Api } from "./api";
+import { EventApi } from "./eventApi";
+import { TagApi } from "./tagApi";
+
+export { Api, EventApi, TagApi };

Diff for: src/api/eventApi.js

@@ -0,0 +1,63 @@
+import { Api } from "./api";
+
+/**
+ * Tag 相關資料處理
+ */
+export class TagApi extends Api {
+  static #tagUrl = "/tags";
+
+  /**
+   * 取得所有 tag 資料。
+   * @returns {Promise} 由後端取回的資料。
+   */
+  static async fetchTags() {
+    let result;
+
+    await this._axios
+      .get(`${this.#tagUrl}`)
+      .then((res) => {
+        result = res.data;
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+
+    return result;
+  }
+
+  /**
+   * 整理成以 tag ID 為鍵項的鍵值對應資料。
+   * @param {Array} tags 資料。
+   * @returns {Object} 以 tag ID 為鍵項的鍵值資料集合 {id: name}。
+   */
+  static getIdMap(tags) {
+    const idMap = tags.reduce((map, item) => {
+      map[item.id] = item.name;
+      return map;
+    }, {});
+
+    return idMap;
+  }
+
+  /**
+   * 以名稱搜尋資料，會先使用完全比對，若查無資料再使用模糊比對。
+   * @param {string} str 要比對名稱的字串。
+   * @returns {Object} 第一個找到的 tag 資料。
+   */
+  static searchByName(tags, str) {
+    // 完全比對
+    let result = tags.find((item) => {
+      return item.name === str;
+    });
+
+    // 若查無資料
+    if (!result) {
+      // 模糊比對
+      result = tags.find((item) => {
+        return item.name.includes(str);
+      });
+    }
+
+    return result;
+  }
+}

Diff for: src/api/index.js

@@ -5,6 +5,7 @@
 
 // Components
 @use "./components/button";
+@use "./components/tag";
 @use "./components/title";
 @use "./components/form";
 @use "./components/navbar";

Diff for: src/api/tagApi.js

@@ -2,14 +2,14 @@
 
 // TODO 整理
 $utilities: (
-  // 覆寫 font-size（RWD、values）
+  // 覆寫 font-size (RWD, values)
   "font-size": (
       responsive: true,
       property: font-size,
       class: fs,
       values: variables.$font-sizes,
     ),
-  // 覆寫 border-width（RWD）
+  // 覆寫 border-width (RWD)
   "border-width": (
       responsive: true,
       property: border-width,
@@ -22,22 +22,46 @@ $utilities: (
         5: 5px,
       ),
     ),
-  // 覆寫 line-height（values）
+  // 覆寫 line-height (values)
   "line-height": (
       responsive: true,
-      property: line-height,
       class: lh,
+      property: line-height,
       values: (
         1: 1,
         1d155: 1.155,
         1d25: 1.25,
         1d333: 1.333,
         1d437: 1.437,
+        1d438: 1.438,
+        1d444: 1.444,
         1d448: 1.448,
+        1d45: 1.45,
         1d5: 1.5,
       ),
     ),
-  // 覆寫 height（RWD、values）
+  // 覆寫 text-align (values)
+  "text-align": (
+      responsive: true,
+      class: text,
+      property: text-align,
+      values: (
+        start: left,
+        end: right,
+        center: center,
+        justify: justify,
+      ),
+    ),
+  "white-space": (
+    property: white-space,
+    values: (
+      nowrap: nowrap,
+      pre: pre,
+      pre-wrap: pre-wrap,
+      pre-line: pre-line,
+    ),
+  ),
+  // 覆寫 height (RWD, values)
   // "height": (
   //     responsive: true,
   //     property: height,

Diff for: src/assets/js/index.js

@@ -24,27 +24,3 @@
     opacity: 1;
   }
 }
-
-// 標籤按鈕
-.btn-tag {
-  color: var(--bs-primary);
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 1;
-  height: 28px;
-  border-width: 1px 1px 1px 4px;
-  background-color: transparent;
-  padding: 0 15px 0 12px;
-
-  &:hover {
-    border-left-color: var(--bs-secondary);
-    background-color: black;
-    color: white;
-  }
-
-  @include rwd.pad-up {
-    font-size: 16px;
-    height: 31px;
-    padding: 0 23px 0 20px;
-  }
-}