car-wash-java/admin-web/src/layout/navBars/breadcrumb/stationSwitcher.vue

<template>
  <div class="layout-navbars-breadcrumb-station"
       :class="{'is-open': state.open, 'is-empty': !state.loading && state.stationList.length === 0}"
       title="切换当前查看的站点，页面数据范围会跟随变化">
    <el-select-v2
        v-model="state.currentStationId"
        :options="state.options"
        :loading="state.loading"
        :loading-text="'正在加载站点…'"
        :no-data-text="'没有匹配的站点'"
        :disabled="!state.loading && state.stationList.length === 0"
        :placeholder="placeholder"
        filterable
        popper-class="station-select-popper"
        class="station-select"
        @change="handleStationChange"
        @visible-change="state.open = $event">
      <template #prefix>
        <SvgIcon name="ele-Location" :size="15"/>
      </template>
      <template #header>
        <span>站点范围</span>
        <span>共 {{ state.stationList.length }} 个站点</span>
      </template>
    </el-select-v2>
  </div>
</template>

<script setup lang="ts" name="layoutBreadcrumbStationSwitcher">
import {reactive, computed, onMounted} from 'vue';
import mittBus from '/@/utils/mitt';
import {Session} from '/@/utils/storage';
import {$body} from '/@/utils/request';

const state = reactive({
  stationList: [] as Array<any>,
  currentStationId: null as any,
  options: [] as Array<any>,
  loading: true,
  open: false
});

const placeholder = computed(() => {
  if (state.loading) return '加载站点中';
  if (state.stationList.length === 0) return '暂无站点';
  return '选择站点';
});

//站点切换
const handleStationChange = (stationId: string) => {
  let station = state.stationList.find((k: any) => k.stationId === stationId);
  if (station) {
    Session.set("currentStationId", stationId);
    mittBus.emit('stationChangeRefresh', stationId);
  }
}

const loadStationList = () => {
  $body(`/washStation/list`, {pageNum: 1, pageSize: 1024}).then((res: any) => {
    let {list} = res;
    state.stationList = list || [];
    state.options = state.stationList.map((k: any) => {
      return {value: k.stationId, label: k.stationName}
    });
    if (state.stationList.length > 0) {
      //优先恢复上次选择的站点，其次默认第一个
      let savedId = Session.get('currentStationId');
      let current = state.stationList.find((k: any) => k.stationId === savedId) || state.stationList[0];
      state.currentStationId = current.stationId;
      setTimeout(() => {
        Session.set("currentStationId", current.stationId);
        mittBus.emit('stationChangeRefresh', current.stationId);
      }, 200)
    }
  }).catch(e => {
    //console.error(e)
  }).finally(() => {
    state.loading = false;
  })
}

// 页面加载时
onMounted(() => {
  loadStationList();
});
</script>

<style scoped lang="scss">
.layout-navbars-breadcrumb-station {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 12px 0 4px;
  position: relative;

  //与面包屑之间的分隔：范围（哪个站）与位置（哪个页）是两个语境
  &::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: var(--el-border-color-lighter);
  }

  .station-select {
    width: 180px;

    //去框融入顶栏：静态时无边框无底色，悬停/聚焦时才浮起一层浅底
    :deep(.el-select__wrapper) {
      height: 34px;
      min-height: 34px;
      padding: 0 8px;
      border-radius: 8px;
      background: transparent;
      box-shadow: none;
      transition: background-color .2s cubic-bezier(.4, 0, .2, 1);

      &.is-hovering {
        background: var(--next-color-user-hover);
      }

      &.is-focused {
        background: var(--next-color-user-hover);
      }

      &.is-disabled {
        background: transparent;
      }
    }

    :deep(.el-select__prefix) {
      display: flex;
      align-items: center;
      margin-right: 6px;
      color: var(--next-bg-topBarColor);
      transition: color .2s cubic-bezier(.4, 0, .2, 1);
    }

    :deep(.el-select__placeholder),
    :deep(.el-select__input) {
      color: var(--next-bg-topBarColor);
      font-size: 14px;
      font-weight: 500;
      transition: color .2s cubic-bezier(.4, 0, .2, 1);
    }

    //未选中任何站点时的占位：退一档
    :deep(.el-select__placeholder.is-transparent) {
      color: var(--el-text-color-placeholder);
      font-weight: 400;
    }

    :deep(.el-select__caret) {
      color: var(--next-bg-topBarColor);
      opacity: 0.6;
      transform-origin: center;
      transition: transform .2s cubic-bezier(.4, 0, .2, 1), opacity .2s cubic-bezier(.4, 0, .2, 1), color .2s;
    }
  }

  //悬停时文字与图标转为品牌色，呼应 Ghost 按钮规则（禁用态除外）
  &:not(.is-empty) .station-select:hover {
    :deep(.el-select__wrapper .el-select__placeholder),
    :deep(.el-select__wrapper .el-select__input),
    :deep(.el-select__wrapper .el-select__prefix),
    :deep(.el-select__wrapper .el-select__caret) {
      color: var(--el-color-primary);
      opacity: 1;
    }
  }

  //展开时箭头翻转
  &.is-open .station-select {
    :deep(.el-select__caret) {
      transform: rotate(180deg);
      opacity: 1;
      color: var(--el-color-primary);
    }
  }

  //禁用态（无站点可用）
  &:deep(.el-select__wrapper.is-disabled .el-select__placeholder),
  &:deep(.el-select__wrapper.is-disabled .el-select__prefix),
  &:deep(.el-select__wrapper.is-disabled .el-select__caret) {
    color: var(--el-text-color-disabled);
    opacity: 1;
  }
}
</style>

<style lang="scss">
// 下拉面板（teleported，需全局样式）
.station-select-popper {
  .el-select-dropdown {
    padding: 6px;
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.06);
  }

  .el-select-dropdown__header {
    display: flex;
    justify-content: space-between;
    padding: 4px 10px 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--el-text-color-secondary);

    span:last-child {
      font-weight: 400;
      color: var(--el-text-color-placeholder);
    }
  }

  .el-select-dropdown__list {
    padding: 2px;
  }

  .el-select-dropdown__item {
    height: 34px;
    margin: 2px 0;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 14px;
  }

  .el-select-dropdown__item.is-hovering {
    background: var(--el-fill-color-light);
  }

  //当前站点：品牌色 + 加粗标记「你在这里」
  .el-select-dropdown__item.is-selected {
    color: var(--el-color-primary);
    font-weight: 600;
  }

  .el-select-dropdown__empty {
    padding: 14px 10px;
    font-size: 13px;
    color: var(--el-text-color-placeholder);
  }
}
</style>