<template>
  <div class="data-records">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="菜单管理" name="menu">
        <!-- 菜单管理已在manage/system中实现，这里可以引用或重新实现 -->
        <div class="redirect-info">
          <p>菜单管理功能已在系统管理模块中实现</p>
          <el-button type="primary" @click="goToMenuManage">前往菜单管理</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElTabs, ElTabPane, ElButton } from 'element-plus';

const router = useRouter();
const activeTab = ref('menu');

function goToMenuManage() {
  router.push('/admin/system/menu');
}
</script>

<style lang="scss" scoped>
.data-records {
  padding: 20px;
}

.redirect-info {
  padding: 40px;
  text-align: center;
  
  p {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
  }
}
</style>

