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/components/header.vue

@@ -9,8 +9,8 @@
         <!-- 中间菜单区域（靠右显示） -->
         <div class="header-center">
             <client-only>
-                <el-scrollbar class="hidden-sm-and-down">
-                    <Menu class="frontend-header-menu" :ellipsis="false" mode="horizontal" />
+                <el-scrollbar class="hidden-sm-and-down" style="height: var(--el-header-height);">
+                    <Menu class="frontend-header-menu" :ellipsis="false" mode="horizontal" :show-icon="true" />
                 </el-scrollbar>
             </client-only>
         </div>
@@ -18,16 +18,18 @@
         <!-- 右侧功能区域 -->
         <div class="header-right">
             <client-only>
-             <el-scrollbar class="hidden-sm-and-down" >
-                <HeaderActions class="frontend-header-menu" :ellipsis="false" mode="horizontal" v-if="!isMobile"/>
-                <div
-                    v-if="isMobile && !personalCenter.state.menu_expand"
-                    @click="personalCenter.toggleMenuExpand(true)"
-                    class="mobile-menu-toggle mr-2"
-                >
-                    <Icon name="el-icon-Expand" color="var(--el-color-primary)" size="20" />
+                <div v-if="isMobile" class="mobile-menu-wrapper">
+                    <div
+                        v-if="!systemStore.$state.site.menu_expand"
+                        @click="systemStore.toggleMenuExpand(true)"
+                        class="mobile-menu-toggle mr-2"
+                    >
+                        <Icon icon="ant-design:menu-outlined" color="var(--el-color-primary)" size="20" />
+                    </div>
                 </div>
-            </el-scrollbar>
+                <el-scrollbar class="hidden-sm-and-down" style="height: var(--el-header-height);">
+                    <HeaderActions class="frontend-header-menu" :ellipsis="false" mode="horizontal" v-if="!isMobile"/>
+                </el-scrollbar>
             </client-only>
         </div>
     </div>
@@ -35,7 +37,7 @@
     <!-- 移动端抽屉菜单（仅在移动端显示） -->
     <MobileDrawer 
         v-if="isMobile"
-        v-model="personalCenterStore.state.menu_expand"
+        v-model="systemStore.$state.site.menu_expand"
         @language-changed="handleLanguageChange"
         @logged-out="handleLogout"
     />
@@ -47,12 +49,13 @@ import Menu from './menu.vue'
 import Logo from './logo.vue'
 import MobileDrawer from './mobile-drawer.vue'
 import HeaderActions from './header-actions.vue'
+import { Icon } from '~/components/icon'
+import { useSystemStore } from '~/stores/system'
 
-const personalCenterStore = usePersonalCenterStore()
 
 // 判断是否为移动端
 const isMobile = ref(false)
-
+const systemStore = useSystemStore()
 const checkMobile = () => {
     isMobile.value = window.innerWidth <= 768
 }
@@ -68,7 +71,7 @@ onUnmounted(() => {
 
 const handleLanguageChange = (languageName: string) => {
     if (isMobile.value) {
-        personalCenter.toggleMenuExpand(false)
+        useSystemStore().toggleMenuExpand(false)
     }
 }
 
@@ -83,10 +86,12 @@ const toggleDarkMode = () => {
 
 <style scoped lang="scss">
 .ma-header {
-    background-color: var(--ba-bg-color-overlay);
-    box-shadow: 0 0 8px rgba(0 0 0 / 8%);
+    background-color: var(--ma-bg-color-overlay);
+    /* 暂时注释掉阴影，避免左右两边出现阴影线条 */
+    /* box-shadow: 0 2px 4px rgba(0 0 0 / 8%); */
     position: relative;
     z-index: 1000;
+    width: 100%;
 }
 
 .header-container {
@@ -113,6 +118,17 @@ const toggleDarkMode = () => {
     
     .frontend-header-menu {
         height: var(--el-header-height);
+        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;
+            }
+        }
     }
     
     :deep(.el-menu--horizontal) {
@@ -126,6 +142,21 @@ const toggleDarkMode = () => {
     align-items: center;
     justify-content: flex-end;
     gap: 0;
+    
+    .frontend-header-menu {
+        height: var(--el-header-height);
+        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;
+            }
+        }
+    }
 }
 
 .header-actions {
@@ -156,12 +187,20 @@ const toggleDarkMode = () => {
     padding: 8px;
     cursor: pointer;
     border-radius: 6px;
+    height: 40px;
+    width: 40px;
     
     &:hover {
         background-color: var(--el-fill-color-light);
     }
 }
 
+.mobile-menu-wrapper {
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+
 // 响应式设计
 @media screen and (max-width: 768px) {
     .header-container {
@@ -171,6 +210,10 @@ const toggleDarkMode = () => {
     .header-center {
         display: none;
     }
+    
+    .header-right {
+        justify-content: flex-start;
+    }
 }
 
 @media screen and (max-width: 414px) {