goaf-monitoring-system/src/layouts/default/feature/SystemSelect.vue

<template>
  <a-select :class="prefixCls" v-model:value="text" :options="OPTIONS" @change="handleMenuClick"> </a-select>
</template>

<script lang="ts" setup>
  // import { Button, Dropdown, Menu, MenuItem } from 'ant-design-vue';
  // import { DownOutlined } from '@ant-design/icons-vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { ref } from 'vue';
  import { PageEnum } from '/@/enums/pageEnum';
  import { useRouter } from 'vue-router';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { prefixCls } = useDesign('system-select');
  const router = useRouter();
  const { t } = useI18n();

  // 由于BASE_HOME仅代表了一个页面，其他页面都隶属于SECONDARY_HOME，所以简单处理
  const isBaseHome = router.currentRoute.value.path === PageEnum.BASE_HOME;
  const text = ref(isBaseHome ? PageEnum.BASE_HOME : PageEnum.SECONDARY_HOME);

  function handleMenuClick(value) {
    router.push({ path: value });
  }

  // const OPTIONS = ref({
  //   [PageEnum.BASE_HOME]: t('routes.basic.baseHome'),
  //   [PageEnum.SECONDARY_HOME]: t('routes.basic.secondaryHome'),
  // });
  const OPTIONS = ref([
    {
      value: PageEnum.BASE_HOME,
      label: t('routes.basic.baseHome'),
    },
    {
      value: PageEnum.SECONDARY_HOME,
      label: t('routes.basic.secondaryHome'),
    },
  ]);

  defineExpose({ OPTIONS, prefixCls, handleMenuClick });
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-system-select';

  .@{prefix-cls} {
    max-width: 210px;
    width: 100%;
    min-width: 10px;
    margin-bottom: 10px;
    position: relative;
    z-index: @layout-basic-z-index;
  }

  .@{prefix-cls}.ant-select {
    :deep(.ant-select-selector) {
      background-color: @primary-color;

      .ant-select-selection-item {
        color: @white;
      }
    }

    :deep(.ant-select-arrow) {
      color: @white;
    }
  }
</style>