新增连板页面

src/App.vue

@@ -3,7 +3,7 @@
     <aside :class="['sidebar', { collapsed: isSidebarCollapsed }]">
       <div class="sidebar-top">
         <button class="sidebar-toggle" type="button" @click="toggleSidebar">
-          <el-icon><component :is="isSidebarCollapsed ? Expand : Fold" /></el-icon>
+          <el-icon><component :is="isSidebarCollapsed ? ArrowRightBold : ArrowLeftBold" /></el-icon>
         </button>
         <div v-if="!isSidebarCollapsed" class="brand-block">
           <span class="brand-title">Stock Lab</span>
@@ -24,8 +24,10 @@
           :index="item.path"
           @click="navigateTo(item.path)"
         >
-          <el-icon><DataAnalysis /></el-icon>
-          <template #title>{{ item.title }}</template>
+          <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>
@@ -39,18 +41,28 @@
 <script setup>
 import { computed, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { DataAnalysis, Expand, Fold } from '@element-plus/icons-vue'
+import { ArrowLeftBold, ArrowRightBold, Histogram, TrendCharts } from '@element-plus/icons-vue'
+import { fetchTradeCalendar } from '@/composables/useTradeCalendar'
 
 const route = useRoute()
 const router = useRouter()
 const isSidebarCollapsed = ref(false)
+const iconMap = {
+  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
+      title: item.meta.title,
+      icon: iconMap[item.meta.icon] || TrendCharts
     }))
 )
 
@@ -94,6 +106,7 @@ const navigateTo = (path) => {
 .sidebar-top {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 12px;
   min-height: 52px;
   margin-bottom: 18px;
@@ -139,6 +152,20 @@ const navigateTo = (path) => {
   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;
@@ -149,6 +176,8 @@ const navigateTo = (path) => {
   margin-bottom: 8px;
   border-radius: 12px;
   color: #41536d;
+  justify-content: center;
+  padding: 0 12px;
 }
 
 :deep(.nav-menu .el-menu-item .el-icon) {
@@ -170,6 +199,10 @@ const navigateTo = (path) => {
   justify-content: center;
 }
 
+.sidebar.collapsed .menu-title {
+  display: none;
+}
+
 @media (max-width: 820px) {
   .sidebar {
     width: 88px;