<script setup lang="ts">
import { computed } from 'vue'
import { useAppStore } from '@/stores/app'
import AppSidebar from '@/components/layout/AppSidebar.vue'
import AppTopbar from '@/components/layout/AppTopbar.vue'

const appStore = useAppStore()

// 服务管理侧边栏菜单
const manageMenus = computed(() => [
  { key: 'authorization', icon: '🔑', label: '服务授权', path: '/service-manage/authorization' },
  { key: 'targets', icon: '🎯', label: '目标配置', path: '/service-manage/targets' },
  { key: 'upgrade', icon: '🚀', label: '服务升级', path: '/service-manage/upgrade' },
  { key: 'info', icon: 'ℹ️', label: '服务信息', path: '/service-manage/info' },
  { key: 'logs', icon: '📝', label: '操作日志', path: '/service-manage/logs' },
])
</script>

<template>
  <div class="layout-manage">
    <AppSidebar
      :menus="manageMenus"
      brand-icon="🛠️"
      brand-title="服务管理"
      v-model:mobile-open="appStore.sidebarMobileOpen"
    />
    <AppTopbar :show-home="true" :show-hamburger="true" />
    <main class="main-content">
      <router-view />
    </main>
  </div>
</template>

<style scoped lang="scss">
.layout-manage {
  min-height: 100vh;
}
</style>
