vue/src/App.vue

<template>
  <div class="app-shell">
    <aside :class="['sidebar', { collapsed: isSidebarCollapsed }]">
      <div class="sidebar-top">
        <button class="sidebar-toggle" type="button" @click="toggleSidebar">
          <el-icon><component :is="isSidebarCollapsed ? ArrowRightBold : ArrowLeftBold" /></el-icon>
        </button>
        <div v-if="!isSidebarCollapsed" class="brand-block">
          <span class="brand-title">Stock Lab</span>
          <span class="brand-subtitle">页面导航</span>
        </div>
      </div>

      <el-menu
        :default-active="activeMenu"
        :collapse="isSidebarCollapsed"
        :collapse-transition="false"
        class="nav-menu"
        router
      >
        <el-menu-item
          v-for="item in menuItems"
          :key="item.path"
          :index="item.path"
          @click="navigateTo(item.path)"
        >
          <div class="menu-item-inner">
            <el-icon><component :is="item.icon" /></el-icon>
            <span class="menu-title">{{ item.title }}</span>
          </div>
        </el-menu-item>
      </el-menu>
    </aside>

    <main class="page-main">
      <router-view />
    </main>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeftBold, ArrowRightBold, Download, Histogram, TrendCharts } from '@element-plus/icons-vue'
import { fetchTradeCalendar } from '@/composables/useTradeCalendar'

const route = useRoute()
const router = useRouter()
const isSidebarCollapsed = ref(false)
const iconMap = {
  Download,
  Histogram,
  TrendCharts
}

fetchTradeCalendar().catch((err) => {
  console.error('预加载交易日历失败', err)
})

const menuItems = computed(() =>
  router.options.routes
    .filter((item) => item.path && item.meta?.title && !item.redirect)
    .map((item) => ({
      path: item.path,
      title: item.meta.title,
      icon: iconMap[item.meta.icon] || TrendCharts
    }))
)

const activeMenu = computed(() => route.path)

const toggleSidebar = () => {
  isSidebarCollapsed.value = !isSidebarCollapsed.value
}

const navigateTo = (path) => {
  if (route.path === path) return
  router.push(path)
}
</script>

<style scoped>
.app-shell {
  display: flex;
  min-height: 100vh;
  background:
    linear-gradient(180deg, #f8fbff 0%, #f2f6fb 100%);
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: 236px;
  height: 100vh;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  box-sizing: border-box;
  background: #ffffff;
  border-right: 1px solid #e5edf5;
  overflow-y: auto;
  transition: width 0.25s ease, padding 0.25s ease;
}

.sidebar.collapsed {
  width: 76px;
  padding-inline: 10px;
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  margin-bottom: 18px;
}

.sidebar-toggle {
  width: 40px;
  height: 40px;
  border: 1px solid #dbe5f0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f7fbff;
  color: #245d9c;
  cursor: pointer;
}

.sidebar-toggle:hover {
  background: #eef6ff;
}

.brand-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand-title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: #1f2a37;
}

.brand-subtitle {
  font-size: 12px;
  color: #7c8aa5;
}

.nav-menu {
  border-right: none;
  background: transparent;
}

.menu-item-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

.menu-title {
  line-height: 1.2;
  text-align: center;
}

.page-main {
  flex: 1;
  min-width: 0;
  margin-left: 236px;
  transition: margin-left 0.25s ease;
}

.sidebar.collapsed + .page-main {
  margin-left: 76px;
}

:deep(.nav-menu .el-menu-item) {
  height: 46px;
  margin-bottom: 8px;
  border-radius: 12px;
  color: #41536d;
  justify-content: center;
  padding: 0 12px;
}

:deep(.nav-menu .el-menu-item .el-icon) {
  color: #5f7ea5;
}

:deep(.nav-menu .el-menu-item:hover) {
  background: #eef6ff;
  color: #1f5fa8;
}

:deep(.nav-menu .el-menu-item.is-active) {
  background: #e3f0ff;
  color: #13559d;
}

:deep(.nav-menu.el-menu--collapse .el-menu-item) {
  padding: 0;
  justify-content: center;
}

.sidebar.collapsed .menu-title {
  display: none;
}

@media (max-width: 820px) {
  .sidebar {
    width: 88px;
    padding-inline: 10px;
  }

  .page-main {
    margin-left: 88px;
  }

  .sidebar.collapsed + .page-main {
    margin-left: 76px;
  }

  .brand-block {
    display: none;
  }
}
</style>