DianZhanDemo/app/components/PowerStation/HeaderNavigation.vue

<template>
  <!-- 头部导航栏 -->
  <header
    class="bg-[#0b1120] p-2 text-gray-300 flex items-center justify-between px-4 border-b border-cyan-500/30 shadow-[0_0_15px_rgba(6,182,212,0.15)] backdrop-blur-md"
  >
    <div class="flex items-center gap-4">
      <!-- 返回按钮 -->
      <button
        class="flex items-center gap-1 text-cyan-500 hover:text-cyan-300 transition-colors group"
        @click="goBack"
      >
        <el-icon class="group-hover:-translate-x-1 transition-transform"><Back /></el-icon>
        <span class="font-mono text-sm">BACK</span>
      </button>

      <div class="w-[1px] h-6 bg-cyan-500/30 mx-2" />

      <!-- 系统标题 -->
      <div class="flex items-center gap-2">
        <el-icon class="text-cyan-400 text-xl animate-pulse"><Monitor /></el-icon>
        <h1
          class="text-xl font-bold tracking-wider font-mono text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500"
        >
          电站设备管理系统 <span class="text-xs text-cyan-500/50 font-normal">/// SYSTEM V4.0</span>
        </h1>
      </div>

      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/" class="ml-6 !text-gray-500 hidden md:block tech-breadcrumb">
        <template v-for="(item, index) in breadcrumbs" :key="index">
          <el-breadcrumb-item
            v-if="item.to"
            :to="{
              path: '/PowerStation',
              query: { currentNodeId: item.to.replace('?currentNodeId=', '') },
            }"
          >
            <span
              class="text-gray-500 hover:text-cyan-400 cursor-pointer font-mono transition-colors"
              >{{ item.text }}</span
            >
          </el-breadcrumb-item>
          <el-breadcrumb-item v-else>
            <span class="text-cyan-400 font-mono font-bold">{{ item.text }}</span>
          </el-breadcrumb-item>
        </template>
      </el-breadcrumb>
    </div>

    <div class="flex items-center gap-6">
      <!-- 功能图标区 -->
      <div class="flex items-center gap-4">
        <!-- 模式切换开关 -->
        <el-tooltip content="切换精简/完整模式" effect="dark">
          <div
            class="flex items-center gap-2 bg-[#0f172a] border border-cyan-500/20 px-3 py-1 rounded-sm"
          >
            <el-switch
              v-model="isFullMode"
              class="tech-switch"
              size="small"
              @change="toggleMode"
              style="--el-switch-on-color: #06b6d4; --el-switch-off-color: #334155"
            />
            <span class="text-xs font-mono text-cyan-500/80">{{
              isFullMode ? '完整加载' : '分批加载'
            }}</span>
          </div>
        </el-tooltip>

        <!-- 模型缓存开关 -->
        <el-tooltip content="切换模型缓存机制" effect="dark">
          <div
            class="flex items-center gap-2 bg-[#0f172a] border border-cyan-500/20 px-3 py-1 rounded-sm"
          >
            <el-switch
              v-model="modelCacheEnabled"
              class="tech-switch"
              size="small"
              @change="toggleModelCache"
              style="--el-switch-on-color: #06b6d4; --el-switch-off-color: #334155"
            />
            <span class="text-xs font-mono text-cyan-500/80">{{
              modelCacheEnabled ? '缓存开启' : '缓存关闭'
            }}</span>
          </div>
        </el-tooltip>

        <div class="flex items-center gap-3">
          <el-tooltip content="通知中心" effect="dark">
            <button class="tech-icon-btn">
              <el-badge is-dot type="primary" class="tech-badge">
                <el-icon :size="18"><Bell /></el-icon>
              </el-badge>
            </button>
          </el-tooltip>
          <el-tooltip content="系统设置" effect="dark">
            <button class="tech-icon-btn">
              <el-icon :size="18"><Setting /></el-icon>
            </button>
          </el-tooltip>
        </div>
      </div>

      <!-- 用户信息区 -->
      <div class="flex items-center gap-3 pl-4 border-l border-cyan-500/30">
        <div class="relative">
          <el-avatar
            :size="32"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            class="border border-cyan-500/50"
          />
          <div
            class="absolute bottom-0 right-0 w-2 h-2 bg-green-500 rounded-full border border-[#0b1120]"
          ></div>
        </div>
        <div class="text-sm">
          <div class="font-medium text-cyan-100 font-mono">Administrator</div>
          <div class="text-xs text-cyan-500/60 font-mono">ROOT_ACCESS</div>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
// 导入图标
import { Back, Bell, Setting, Monitor } from '@element-plus/icons-vue'
import { computed, ref, watchEffect } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { usePowerStationStore } from '~/stores/powerStation'

// 使用路由和store
const router = useRouter()
const route = useRoute()
const store = usePowerStationStore()

// 根据currentNodeId生成面包屑数据
const breadcrumbs = computed(() => {
  const nodeId = store.currentNodeId
  if (!nodeId) return []

  const breadcrumbsList: { text: string; to?: string }[] = []
  const nodeIdParts = nodeId.split('~')

  if (nodeIdParts.length > 0) {
    let currentPath = ''
    for (let i = 0; i < nodeIdParts.length; i++) {
      const part = nodeIdParts[i]
      currentPath = i === 0 ? part : `${currentPath}~${part}`

      const displayText = part || `层级 ${i + 1}`

      const item: { text: string; to?: string } = {
        text: displayText,
      }

      if (currentPath !== nodeId) {
        item.to = `?currentNodeId=${currentPath}`
      }

      breadcrumbsList.push(item)
    }
  }

  // 使用当前节点ID的第一部分作为面包屑的第一个元素
  if (breadcrumbsList.length > 0 && store.currentNodeId) {
    const firstPart = store.currentNodeId.split('~')[0]
    breadcrumbsList[0].text = firstPart
  }

  return breadcrumbsList
})

// 计算当前模式状态
const isFullMode = computed(() => route.query.full !== undefined)

// 模型缓存状态
const modelCacheEnabled = ref(store.modelCacheEnabled)

// 同步loadMode到store
watchEffect(() => {
  store.loadMode = isFullMode.value
})

// 同步模型缓存状态到store
watchEffect(() => {
  store.modelCacheEnabled = modelCacheEnabled.value
})

// 返回上一页函数
const goBack = () => {
  router.back()
}

// 切换模式函数
const toggleMode = () => {
  const loadMode = !isFullMode.value
  const currentNodeId = route.query.currentNodeId || ''

  // 同步到store
  store.loadMode = loadMode

  // 构建新的URL
  let newUrl = window.location.origin + window.location.pathname + '?currentNodeId=' + currentNodeId

  if (loadMode) {
    newUrl += '&full=true'
  }

  // 刷新页面
  window.location.href = newUrl
}

// 切换模型缓存函数
const toggleModelCache = () => {
  // 这里可以添加缓存切换的逻辑，比如清除缓存等
  console.log('模型缓存状态:', modelCacheEnabled.value ? '开启' : '关闭')
}
</script>

<style scoped>
/* 自定义面包屑样式 */
:deep(.tech-breadcrumb .el-breadcrumb__inner) {
  color: #64748b !important;
  font-family: monospace;
}

:deep(.tech-breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #22d3ee !important;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
}

/* Tech Icon Button */
.tech-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(34, 211, 238, 0.2);
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.tech-icon-btn:hover {
  background: rgba(6, 182, 212, 0.1);
  border-color: #22d3ee;
  color: #22d3ee;
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.4);
  transform: translateY(-1px);
}

.tech-icon-btn:active {
  transform: translateY(1px);
}

/* Tech Badge */
:deep(.tech-badge .el-badge__content) {
  background-color: #ef4444;
  border: none;
  box-shadow: 0 0 5px #ef4444;
}

/* Tech Switch */
:deep(.tech-switch .el-switch__core) {
  background-color: #334155;
  border-color: #475569;
}

:deep(.tech-switch.is-checked .el-switch__core) {
  background-color: rgba(6, 182, 212, 0.2);
  border-color: #06b6d4;
}

:deep(.tech-switch .el-switch__action) {
  background-color: #94a3b8;
}

:deep(.tech-switch.is-checked .el-switch__action) {
  background-color: #22d3ee;
  box-shadow: 0 0 10px #22d3ee;
}
</style>