feat: 适配5.x后端，重构前端架构

主要变更：
1. 重构API目录结构，采用模块化设计，适配5.x后端接口规范
2. 优化布局组件，提升用户界面体验
3. 增强国际化支持，完善多语言配置
4. 新增权限控制功能，支持前端路由权限管理
5. 优化认证流程，支持JWT认证机制
6. 新增中间件和插件，提升系统扩展性
7. 优化状态管理，采用更清晰的模块化设计
8. 新增搜索框、广告等组件，丰富页面功能
9. 更改包管理工具从npm到pnpm，提升依赖管理效率
10. 完善配置系统，支持多环境配置

适配5.x后端特性：
- 采用新的API接口规范
- 支持JWT认证机制
- 适配后端权限控制体系
- 支持后端国际化接口
- 优化数据交互方式

app/layouts/member.vue

@@ -1,29 +1,46 @@
 <template>
     <div class="member-layout">
-        <el-container class="is-vertical">
-            <Header />
+        <el-container class="layout-container">
+            <el-header class="layout-header">
+                <Header />
+            </el-header>
             <el-scrollbar :style="calcHeight(60)" class="main-scrollbar" ref="mainScrollbarRef">
-                <el-row class="layouts-main" justify="center">
-                    <el-col class="user-layouts" :span="16" :xs="24">
-                        <Aside class="hidden-sm-and-down" />
-                        <el-main class="layout-main">
-                            <slot />
-                        </el-main>
-                    </el-col>
-                </el-row>
-                <Footer />
+                <div class="layout-main">
+                    <div class="layout-content">
+                        <el-row class="layouts-main" justify="center">
+                            <el-col class="user-layouts" :span="16" :xs="24">
+                                <client-only>
+                                    <Aside class="hidden-sm-and-down" />
+                                </client-only>
+                                <el-main class="layout-main-content">
+                                    <slot />
+                                </el-main>
+                            </el-col>
+                        </el-row>
+                    </div>
+                    <Footer />
+                </div>
             </el-scrollbar>
         </el-container>
     </div>
 </template>
 
 <script setup lang="ts">
+    import { useTemplateRef, watch, provide } from 'vue'
     import Header from './components/header.vue'
     import Aside from './components/aside.vue'
     import Footer from './components/footer.vue'
 const route = useRoute()
 const mainScrollbarRef = useTemplateRef('mainScrollbarRef')
 
+// 计算滚动区域高度
+const calcHeight = (headerHeight: number) => {
+    return {
+        height: `calc(100vh - ${headerHeight}px)`,
+        maxHeight: `calc(100vh - ${headerHeight}px)`
+    }
+}
+
 // 路由切换时滚动条滚动至顶部
 watch(
     () => route.fullPath,
@@ -39,13 +56,179 @@ provide('mainScrollbarRef', mainScrollbarRef)
 </script>
 
 <style scoped lang="scss">
+.layout-container {
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  
+  .layout-header {
+    position: relative;
+    z-index: 1000;
+    background-color: var(--ma-bg-color-overlay);
+    height: 60px;
+    flex-shrink: 0;
+  }
+  
+  .main-scrollbar {
+    flex: 1;
+    overflow: hidden;
+    
+    .layout-main {
+      width: 100%;
+      max-width: 100%;
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
+      
+      .layout-content {
+        flex: 1;
+        min-height: var(--content-min-height, 500px);
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        max-width: 100%;
+        overflow-x: hidden;
+        padding: 0;
+      }
+      
+      .layout-footer {
+        flex-shrink: 0;
+        margin-top: auto;
+        width: 100%;
+        max-width: 100%;
+      }
+    }
+  }
+}
+
 .user-layouts {
     display: flex;
     padding-top: 15px;
     align-items: flex-start;
 }
-.layout-main {
+.layout-main-content {
     padding: 0 !important;
     overflow-x: hidden;
+    background-color: var(--ma-bg-color-overlay);
+    margin-left: 20px;
+    margin-bottom: 20px;
+}
+
+@media screen and (max-width: 768px) {
+    .layout-main-content {
+        margin-left: 0;
+    }
+}
+
+.layout-main-content-mobile {
+    padding: 0 !important;
+    overflow-x: hidden;
+    background-color: var(--ma-bg-color-overlay);
+    margin-bottom: 20px;
+}
+
+/* 组件样式适配 */
+.layout-header {
+  position: fixed;
+  width: 100%;
+  z-index: 1000;
+  left: 0;
+  right: 0;
+  
+  :deep(.header-logo) {
+    span {
+      padding-left: 4px;
+    }
+  }
+  
+  :deep(.frontend-header-menu) {
+    background: transparent;
+    .el-menu-item,
+    .el-sub-menu .el-sub-menu__title {
+      &.is-active {
+        color: var(--el-color-primary) !important;
+      }
+      &:hover {
+        background-color: transparent !important;
+        color: var(--el-menu-hover-text-color) !important;
+      }
+    }
+  }
+}
+
+.layout-footer {
+  color: var(--el-text-color-secondary);
+  background-color: transparent !important;
+  position: relative;
+  bottom: auto;
+  width: 100%;
+  left: 0;
+  right: 0;
+}
+
+/* 响应式断点 */
+@media screen and (max-width: 768px) {
+  .layout-container {
+    .layout-main {
+      .layout-content {
+        --content-min-height: 300px;
+      }
+    }
+  }
+
+  .user-layouts-mobile {
+    padding-top: 15px;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .layout-container {
+    .layout-main {
+      .layout-content {
+        --content-min-height: 400px;
+      }
+    }
+  }
+}
+
+/* 响应式适配 */
+@media screen and (max-width: 1024px) {
+  .layout-container {
+    .main-scrollbar {
+      .layout-main {
+        .layout-content {
+          padding: 0 15px;
+          --content-min-height: 400px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .layout-container {
+    .main-scrollbar {
+      .layout-main {
+        .layout-content {
+          padding: 0 10px;
+          --content-min-height: 300px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-height: 650px) {
+  .layout-container {
+    .main-scrollbar {
+      .layout-main {
+        .layout-content {
+          --content-min-height: 200px;
+        }
+      }
+    }
+  }
 }
 </style>