CviLux_fe/src/components/navbar/NavbarItem.vue

<script setup>
import { onMounted, ref, watch, computed } from "vue";
import { AUTHPAGES } from "@/constant";
import { getAuth, getAllSysSidebar } from "@/apis/building";
import useBuildingStore from "@/stores/useBuildingStore";
import useUserInfoStore from "@/stores/useUserInfoStore";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const store = useUserInfoStore();
const buildingStore = useBuildingStore();

const openKeys = ref([]); // 追蹤當前打開的子菜單

const iniFroList = async () => {
  const res = await getAuth(locale.value);

  store.updateAuthPage(
    res.data.map((d) =>
      AUTHPAGES.find(({ authCode }) => authCode === d.authCode)
        ? {
            ...d,
            ...AUTHPAGES.find(({ authCode }) => authCode === d.authCode),
          }
        : d
    )
  );
};

const authPages = computed(() =>
  store.auth_page.filter(({ showView }) => showView)
);

const open = ref(false);
const getSubMonitorPage = async (building) => {
  const res = await getAllSysSidebar();
  buildingStore.mainSubSys = res.data.history_Main_Systems;
};
const showDrawer = () => {
  getSubMonitorPage();
  open.value = true;
};
const onClose = () => {
  open.value = false;
};

const handleOpenChange = (keys) => {
  if (keys.length > 0) {
    openKeys.value = [keys[keys.length - 1]]; // 只保留最後一個打開的子菜單
  } else {
    openKeys.value = [];
  }
};

watch(
  () => buildingStore.selectedBuilding,
  (newVal) => {
    if (newVal !== null) {
      getSubMonitorPage(newVal.building_tag);
    }
  }
);

watch(locale, () => {
  iniFroList();
});

onMounted(() => {
  iniFroList();
});
</script>
<template>
  <ul class="px-1 menu-box my-2">
    <li class="flex flex-col items-center justify-center">
      <router-link
        :to="{ name: 'dashboard' }"
        class="flex flex-col justify-center items-center btn-group text-white"
      >
        <font-awesome-icon
          :icon="['fas', 'home']"
          size="2x"
          class="w-10 m-auto"
        />
        {{ $t("home") }}
      </router-link>
    </li>
    <li
      v-for="page in authPages"
      class="flex flex-col items-center justify-center"
    >
      <a
        v-if="page.authCode === 'PF1'"
        @click="showDrawer"
        class="flex flex-col justify-center items-center btn-group text-white cursor-pointer"
      >
        <font-awesome-icon
          :icon="['fas', page.icon]"
          size="2x"
          class="w-10 m-auto"
        />
        {{ page.subName }}
      </a>
      <router-link
        v-else
        :to="page.navigate"
        type="link"
        class="flex flex-col justify-center items-center btn-group text-white"
      >
        <font-awesome-icon
          :icon="['fas', page.icon]"
          size="2x"
          class="w-10 m-auto"
        />
        {{ page.subName }}
      </router-link>
    </li>
  </ul>
  <a-drawer
    :width="250"
    placement="left"
    :open="open"
    :closable="false"
    @close="onClose"
    class="sub-drawer"
    :maskStyle="{ opacity: 0 }"
    :bodyStyle="{ paddingLeft: 0, paddingRight: 0 }"
  >
    <a-menu
      mode="inline"
      theme="dark"
      class="text-lg bg-transparent"
      :openKeys="openKeys"
      @openChange="handleOpenChange"
    >
      <a-sub-menu
        v-for="main in buildingStore.mainSubSys"
        :key="main.main_system_tag"
        :title="main.full_name"
      >
        <a-menu-item
          v-for="sub in main.history_Sub_systems"
          :key="sub.sub_system_tag"
          @click="() => onClose()"
        >
          <router-link
            :to="{
              name: 'sub_system',
              params: {
                main_system_id: main.main_system_tag,
                sub_system_id: sub.sub_system_tag,
              },
            }"
          >
            {{ sub.full_name }}
          </router-link>
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
  </a-drawer>
</template>
<style lang="scss" scoped>
.router-link-active.router-link-exact-active {
  color: #93c0dc;
}

::v-deep .ant-menu-submenu-title:active {
  color: #35759d !important;
  background-color: transparent !important;
}
::v-deep .ant-menu-item:not(.ant-menu-item-selected) {
  &::before {
    @apply absolute w-[15px] h-[15px] bottom-3.5 left-7 bg-no-repeat z-10 grayscale;
    content: "";
    background: url(@ASSET/img/chart-data-background03.svg) center center;
  }
  &:active {
    background-color: transparent !important;
  }
}
::v-deep .ant-menu-item-selected {
  @apply bg-transparent relative;

  &::before {
    @apply absolute w-[15px] h-[15px] bottom-3.5 left-7 bg-no-repeat z-10;
    content: "";
    background: url(@ASSET/img/chart-data-background03.svg) center center;
  }
  &:active {
    background-color: transparent !important;
  }
  a {
    color: #89d2ff !important;
    text-shadow: 0px 0px 1px #fff;
  }
}
</style>