refactor(layouts): 将博客组件移动到layouts目录并重构导航菜单

将BlogMenu和BlogFooter组件从components目录移动到layouts目录，更符合其布局组件的定位。重构BlogMenu组件，添加响应式设计和交互效果：
- 添加路由高亮显示功能
- 实现移动端适配
- 优化悬停和激活状态样式

src/App.vue

@@ -2,8 +2,8 @@
 
 import { RouterView } from 'vue-router';
 
-import SideMenu from './components/BlogMenu.vue';
-import Footer from './components/BlogFooter.vue';
+import SideMenu from './layouts/BlogMenu.vue';
+import Footer from './layouts/BlogFooter.vue';
 
 </script>
 

src/components/BlogMenu.vue → src/layouts/BlogMenu.vue

@@ -11,7 +11,7 @@ const currentRouteName = computed(() => router.currentRoute.value.name);
 
 <div class="nav" >
     <div class="module-wrapper" v-for="m of blogModules" :key="m.routeName" @click="router.push(m.routeUrl)">
-        <div :class="(currentRouteName == m.routeName) ? ['module-active-icon-wrapper'] : ['icon-wrapper']">
+        <div :class="(currentRouteName == m.routeName) ? ['active-icon-wrapper'] : ['icon-wrapper']">
             <div v-html="m.iconTemplate" class="module-icon-svg"/>
         </div>
         <div class="module-item">{{ m.title }}</div>
@@ -85,7 +85,7 @@ const currentRouteName = computed(() => router.currentRoute.value.name);
     transition: .3s all;
 }
 
-.module-active-icon-wrapper {
+.active-icon-wrapper {
     background: var(--secondary-background-color);
     border-radius: 12px;
     width: 32px;