eiacloud-mcp-ui/src/pages/home/mcpIndex.vue

<template>
  <div class="mcp-index">
    <div class="mcp-index-top">
      <mcp-breadcrumb />
    </div>
    <div class="mcp-index-body">
      <mcp-sider-bar />
      <div class="mcp-index-content">
        <router-view />
      </div>
    </div>
  </div>
</template>
<script setup>
import McpSiderBar from "@/components/mcpSiderBar.vue";
import McpBreadcrumb from "@/components/mcpBreadcrumb.vue";
</script>
<style scoped lang="less">
.mcp-index {
  box-sizing: border-box;
  min-height: calc(100vh - 64px);
  padding: 0 0 24px;
  background: #F7F9FC;
}

.mcp-index-top {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 16px 20px 12px;
  background: #F7F9FC;
}

.mcp-index-body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0 20px;
}

.mcp-index-content {
  flex: 1;
  min-width: 0;
}
</style>