優化 NavbarBuilding 組件，調整選擇建築物的邏輯及樣式，新增總部與倉庫圖示；更新 Building 組件以使用 store 中的建築資料

src/components/navbar/NavbarBuilding.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted,watch } from "vue";
+import { onMounted, watch } from "vue";
 import useBuildingStore from "@/stores/useBuildingStore";
 import { useRouter } from "vue-router";
 
@@ -9,10 +9,10 @@ const selectBuilding = (bui) => {
   store.selectedBuilding = bui; // 改變 selectedBuilding，watch 會自動更新資料
 
   if (bui.is_headquarter == true) {
-     router.replace({ path: "/headquarters" });
+    router.replace({ path: "/headquarters" });
-    } else {
+  } else {
-      router.replace({ path: "/dashboard" });
+    router.replace({ path: "/dashboard" });
-    }
+  }
 };
 
 onMounted(() => {
@@ -33,15 +33,27 @@ onMounted(() => {
       </div>
       <ul
         tabindex="0"
-        class="dropdown-content w-48 left-8 translate-y-2 z-[1] menu py-3 shadow rounded bg-[#4c625e] border text-center"
+        class="dropdown-content w-56 left-8 translate-y-2 z-[1] menu py-3 shadow rounded bg-[#4c625e] border text-center"
       >
         <li
-          class="text-white my-1 text-base cursor-pointer"
+          class="text-white my-1 text-base cursor-pointer flex flex-row justify-between items-center"
           v-for="bui in store.buildings"
           :key="bui.building_tag"
           @click="selectBuilding(bui)"
         >
-          {{ bui.full_name }}
+          <span class="w-full flex justify-between"
+            >{{ bui.full_name }}
+            <font-awesome-icon
+              v-if="bui.is_headquarter"
+              :icon="['fas', 'synagogue']"
+              class="text-xs"
+            />
+            <font-awesome-icon
+              v-else
+              :icon="['fas', 'warehouse']"
+              class="text-xs"
+            />
+          </span>
         </li>
       </ul>
     </div>

src/fontawsomeIconRegister.js

@@ -63,7 +63,9 @@ import {
   faSave,
   faCrown,
   faClock,
-  faCheckCircle
+  faCheckCircle,
+  faSynagogue,
+  faWarehouse
 } from "@fortawesome/free-solid-svg-icons";
 import { faCircle,faPaperPlane } from "@fortawesome/free-regular-svg-icons";
 
@@ -131,7 +133,9 @@ library.add(
   faClock,
   faCheckCircle,
   faCircle,
-  faPaperPlane
+  faPaperPlane,
+  faSynagogue,
+  faWarehouse
 );
 
 export default library;

src/views/setting/components/Building.vue

@@ -31,9 +31,9 @@ const loading = ref(false);
 
 const getDataSource = async () => {
   loading.value = true;
-  const res = await getBuildings();
+  // const res = await getBuildings();
-  store.buildings = res.data;
+  // store.buildings = res.data;
-  dataSource.value = res.data.map((d) => ({ ...d, key: d.building_guid }));
+  dataSource.value = store.buildings.map((d) => ({ ...d, key: d.building_guid }));
   loading.value = false;
 };