291 lines
8.8 KiB
Vue
291 lines
8.8 KiB
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>
|