65 lines
2.6 KiB
Vue
65 lines
2.6 KiB
Vue
<template>
|
|
<aside class="w-[200px] h-screen flex-shrink-0 overflow-y-auto" style="background-color: #fff; border-right: 1px solid #e8e8e8">
|
|
<!-- Logo -->
|
|
<div class="px-4 py-4" style="border-bottom: 1px solid #f0f0f0">
|
|
<div class="text-lg font-semibold" style="color: #4a7c59">Geomative</div>
|
|
</div>
|
|
|
|
<!-- Homepage -->
|
|
<router-link to="/" class="flex items-center gap-2 px-4 py-3 text-sm transition-colors"
|
|
:style="{ color: isActive('/') ? '#4a7c59' : 'rgba(0,0,0,0.65)', backgroundColor: isActive('/') ? '#eef5f0' : 'transparent', borderLeft: isActive('/') ? '3px solid #4a7c59' : '3px solid transparent', fontWeight: isActive('/') ? 600 : 400 }">
|
|
首页
|
|
</router-link>
|
|
|
|
<!-- Menu Groups -->
|
|
<div v-for="group in menuGroups" :key="group.title">
|
|
<div class="px-4 py-2.5 text-xs font-semibold uppercase tracking-wider"
|
|
style="color: rgba(0,0,0,0.35)">
|
|
{{ group.title }}
|
|
</div>
|
|
<router-link
|
|
v-for="item in group.items" :key="item.path" :to="item.path"
|
|
class="flex items-center gap-2 px-4 py-2 text-sm transition-colors"
|
|
:style="{
|
|
color: isActive(item.path) ? '#4a7c59' : 'rgba(0,0,0,0.65)',
|
|
backgroundColor: isActive(item.path) ? '#eef5f0' : 'transparent',
|
|
borderLeft: isActive(item.path) ? '3px solid #4a7c59' : '3px solid transparent',
|
|
fontWeight: isActive(item.path) ? 600 : 400,
|
|
}">
|
|
<component :is="item.icon" :size="16" :style="{ color: isActive(item.path) ? '#4a7c59' : 'rgba(0,0,0,0.35)' }" />
|
|
{{ item.label }}
|
|
</router-link>
|
|
</div>
|
|
</aside>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useRoute } from 'vue-router'
|
|
import { Monitor, Settings2, Key, Cpu, FileCode, Gauge, Wrench, Recycle } from 'lucide-vue-next'
|
|
|
|
const route = useRoute()
|
|
const isActive = (path: string) =>
|
|
path === '/' ? route.path === '/' : route.path === path || route.path.startsWith(path + '/')
|
|
|
|
const menuGroups = [
|
|
{ title: '设备', items: [
|
|
{ path: '/devices', label: '设备列表', icon: Monitor },
|
|
{ path: '/models', label: '设备型号管理', icon: Settings2 },
|
|
{ path: '/boards', label: '板卡型号管理', icon: Cpu },
|
|
]},
|
|
{ title: '授权', items: [
|
|
{ path: '/licenses', label: '授权管理', icon: Key },
|
|
]},
|
|
{ title: '配置', items: [
|
|
{ path: '/config-files', label: '配置管理', icon: FileCode },
|
|
]},
|
|
{ title: '校准', items: [
|
|
{ path: '/calibration', label: '校准记录', icon: Gauge },
|
|
]},
|
|
{ title: '维修', items: [
|
|
{ path: '/repair', label: '维修工单', icon: Wrench },
|
|
{ path: '/scrap', label: '报废回收', icon: Recycle },
|
|
]},
|
|
]
|
|
</script>
|