MianyVue/src/components/layout/MainLayout.vue

<template>
  <div class="main-container">
    <!-- 顶部导航栏 -->
    <header class="app-header">
      <slot name="header">
        <AppHeader />
      </slot>
    </header>

    <!-- 主体内容区 -->
    <div class="app-body">
      <!-- 左侧功能面板 -->
      <aside class="app-sidebar">
        <slot name="sidebar" />
      </aside>

      <!-- 中央工作区 -->
      <main class="work-area">
        <div class="work-header">
          <h2 class="work-title">模型查看器</h2>
          <div class="work-toolbar">
            <button class="tool-btn" title="全屏">
              <i class="fas fa-expand"></i>
            </button>
            <button class="tool-btn" title="重置视角">
              <i class="fas fa-undo"></i>
            </button>
            <button class="tool-btn" title="截图">
              <i class="fas fa-camera"></i>
            </button>
            <button class="tool-btn" title="信息面板">
              <i class="fas fa-info-circle"></i>
            </button>
          </div>
        </div>

        <div class="work-content">
          <slot name="content">
            <!-- 默认内容 -->
            <div class="default-content">
              <div class="welcome-message">
                <i class="fas fa-cube"></i>
                <h3>欢迎使用工业模型软件管理统一平台</h3>
                <p>请先连接CAD软件并打开模型文件</p>
              </div>
            </div>
          </slot>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import AppHeader from './AppHeader.vue'

// 主布局组件 - 固定头部 + 左侧导航 + 右侧内容
</script>

<style scoped>
.main-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background: var(--color-bg-primary);
  overflow: hidden;
}

.app-header {
  height: 60px;
  flex-shrink: 0;
  z-index: var(--z-index-sidebar);
}

.app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.app-sidebar {
  width: 350px;
  background: var(--color-bg-primary);
  border-right: 1px solid var(--color-border-primary);
  overflow-y: auto;
  flex-shrink: 0;
}

.work-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-primary);
  overflow: hidden;
}

.work-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border-primary);
  flex-shrink: 0;
}

.work-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.work-toolbar {
  display: flex;
  gap: 8px;
}

.tool-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white-rgb-1);
  border: none;
  border-radius: 6px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
}

.tool-btn:hover {
  background: var(--color-white-rgb-15);
  color: var(--color-text-primary);
}

.tool-btn i {
  font-size: 14px;
}

.work-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background: var(--color-bg-primary);
}

.default-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-message {
  text-align: center;
  color: var(--color-text-secondary);
}

.welcome-message i {
  font-size: 48px;
  color: var(--color-primary);
  margin-bottom: 16px;
  display: block;
}

.welcome-message h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: var(--color-text-primary);
}

.welcome-message p {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app-sidebar {
    width: 300px;
  }

  .work-header {
    padding: 12px 16px;
  }

  .work-content {
    padding: 16px;
  }
}

@media (max-width: 640px) {
  .app-body {
    flex-direction: column;
  }

  .app-sidebar {
    width: 100%;
    height: 40vh;
    border-right: none;
    border-bottom: 1px solid var(--color-border-primary);
  }
}

/* 滚动条样式 */
.app-sidebar::-webkit-scrollbar,
.work-content::-webkit-scrollbar {
  width: 6px;
}

.app-sidebar::-webkit-scrollbar-track,
.work-content::-webkit-scrollbar-track {
  background: transparent;
}

.app-sidebar::-webkit-scrollbar-thumb,
.work-content::-webkit-scrollbar-thumb {
  background: var(--color-white-rgb-2);
  border-radius: 3px;
}

.app-sidebar::-webkit-scrollbar-thumb:hover,
.work-content::-webkit-scrollbar-thumb:hover {
  background: var(--color-white-rgb-3);
}
</style>