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

This commit is contained in:
koko 2025-10-27 11:05:47 +08:00
parent b89057b3bd
commit 59132a9810
3 changed files with 29 additions and 13 deletions

View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { onMounted,watch } from "vue"; import { onMounted, watch } from "vue";
import useBuildingStore from "@/stores/useBuildingStore"; import useBuildingStore from "@/stores/useBuildingStore";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
@ -33,15 +33,27 @@ onMounted(() => {
</div> </div>
<ul <ul
tabindex="0" 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 <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" v-for="bui in store.buildings"
:key="bui.building_tag" :key="bui.building_tag"
@click="selectBuilding(bui)" @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> </li>
</ul> </ul>
</div> </div>

View File

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

View File

@ -31,9 +31,9 @@ const loading = ref(false);
const getDataSource = async () => { const getDataSource = async () => {
loading.value = true; 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; loading.value = false;
}; };