diff --git a/src/layouts/README.md b/src/layouts/README.md
index f31eb7b5..9d36e764 100644
--- a/src/layouts/README.md
+++ b/src/layouts/README.md
@@ -1,34 +1,71 @@
 # 布局系统
 
-本项目的布局系统采用模块化、可组合式API的架构，支持三种不同的布局模式:
-
-1. **左侧菜单布局 (LeftSideLayout)**: 传统的管理系统布局，左侧为菜单栏，顶部为导航栏
-2. **顶部菜单布局 (TopMenuLayout)**: 顶部为主菜单栏，适合菜单项较少的应用
-3. **混合菜单布局 (MixMenuLayout)**: 顶部为一级菜单，左侧为对应的子菜单，适合菜单层级较多的复杂应用
-
 ## 目录结构
 
 ```
 layouts/
-├── README.md                    # 文档说明
-├── index.vue                    # 布局入口，根据设置选择对应的布局组件
-├── composables/                 # 可组合式API
-│   ├── useLayout.ts             # 布局通用逻辑
-│   ├── useLayoutResponsive.ts   # 响应式布局逻辑
-│   └── useLayoutMenu.ts         # 菜单处理逻辑
-└── components/                  # 布局组件
-    ├── LayoutBase.vue           # 基础布局组件
-    ├── SidebarMenu.vue          # 菜单组件
-    ├── common/                  # 公共组件
-    │   └── LayoutSidebar.vue    # 侧边栏公共组件
-    ├── LeftSideLayout/          # 左侧菜单布局
-    │   └── index.vue
-    ├── TopMenuLayout/           # 顶部菜单布局
-    │   └── index.vue
-    └── MixMenuLayout/           # 混合菜单布局
-        └── index.vue
+├── index.vue              # 布局系统入口，根据设置动态加载布局
+├── BaseLayout.vue         # 基础布局容器，提供通用功能
+├── LeftLayout.vue         # 左侧菜单布局
+├── TopLayout.vue          # 顶部菜单布局
+├── MixLayout.vue          # 混合布局（顶部+左侧）
+├── components/            # 布局相关组件
+│   ├── AppMain.vue        # 主内容区域
+│   ├── NavBar.vue         # 导航栏
+│   ├── NavbarActions.vue  # 导航栏右侧操作区
+│   ├── TagsView.vue       # 标签页视图
+│   ├── LayoutMenu.vue     # 菜单组件
+│   ├── Sidebar/           # 侧边栏相关组件
+│   │   ├── SidebarLogo.vue         # Logo 组件
+│   │   ├── SidebarMenu.vue         # 菜单主体（未使用）
+│   │   ├── SidebarMenuItem.vue     # 菜单项
+│   │   ├── SidebarMenuItemTitle.vue # 菜单项标题
+│   │   └── SidebarMixTopMenu.vue   # 混合布局顶部菜单
+│   ├── Settings/          # 设置面板
+│   │   └── index.vue      # 设置面板主组件（包含布局选择）
+│   └── common/            # 通用组件
+│       └── LayoutSidebar.vue # 侧边栏容器
+└── composables/           # 组合式函数
+    ├── useLayout.ts       # 布局相关逻辑
+    ├── useLayoutMenu.ts   # 菜单相关逻辑
+    └── useLayoutResponsive.ts # 响应式处理
 ```
 
+## 布局说明
+
+### 1. LeftLayout（左侧布局）
+- 传统的左侧固定菜单布局
+- 支持菜单折叠/展开
+- 适合大多数管理系统
+
+### 2. TopLayout（顶部布局）
+- 菜单位于顶部横向排列
+- 适合一级菜单较少的系统
+- 节省横向空间
+
+### 3. MixLayout（混合布局）
+- 一级菜单在顶部，二级菜单在左侧
+- 适合菜单层级较多的大型系统
+- 提供更好的菜单组织方式
+
+## 使用方式
+
+布局系统会根据 `settings store` 中的 `layout` 配置自动切换：
+
+```typescript
+// 在设置面板中切换布局
+// 或通过代码：
+settingsStore.layout = LayoutMode.LEFT; // 'left' | 'top' | 'mix'
+```
+
+## 自定义布局
+
+如需添加新布局：
+
+1. 在 `layouts/` 目录下创建新的布局组件（如 `CustomLayout.vue`）
+2. 在 `index.vue` 中导入并添加到切换逻辑
+3. 在 `enums/settings/layout.enum.ts` 中添加新的布局类型
+
 ## 主要功能
 
 1. **响应式适配**: 自动适配桌面端和移动端，移动端下自动收起侧边栏
diff --git a/src/layouts/components/AppMain/index.vue b/src/layouts/components/AppMain.vue
similarity index 100%
rename from src/layouts/components/AppMain/index.vue
rename to src/layouts/components/AppMain.vue
diff --git a/src/layouts/components/Settings/index.vue b/src/layouts/components/Settings.vue
similarity index 63%
rename from src/layouts/components/Settings/index.vue
rename to src/layouts/components/Settings.vue
index 06554be0..925e04ac 100644
--- a/src/layouts/components/Settings/index.vue
+++ b/src/layouts/components/Settings.vue
@@ -61,7 +61,31 @@
     <!-- 布局设置 -->
     <section class="config-section">
       <el-divider>{{ t("settings.navigation") }}</el-divider>
-      <LayoutSelect v-model="settingsStore.layout" @update:model-value="handleLayoutChange" />
+
+      <!-- 整合的布局选择器 -->
+      <div class="layout-select">
+        <el-tooltip
+          v-for="item in layoutOptions"
+          :key="item.value"
+          :content="item.label"
+          placement="bottom"
+        >
+          <div
+            role="button"
+            tabindex="0"
+            :class="[
+              'layout-item',
+              item.className,
+              { 'is-active': settingsStore.layout === item.value },
+            ]"
+            @click="handleLayoutChange(item.value)"
+            @keydown.enter.space="handleLayoutChange(item.value)"
+          >
+            <div class="layout-item-part" />
+            <div class="layout-item-part" />
+          </div>
+        </el-tooltip>
+      </div>
     </section>
   </el-drawer>
 </template>
@@ -72,6 +96,20 @@ import { LayoutMode } from "@/enums/settings/layout.enum";
 import { ThemeMode } from "@/enums/settings/theme.enum";
 import { SidebarColor } from "@/enums/settings/theme.enum";
 import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
+
+// 布局选项配置
+interface LayoutOption {
+  value: LayoutMode;
+  label: string;
+  className: string;
+}
+
+const layoutOptions: LayoutOption[] = [
+  { value: LayoutMode.LEFT, label: "左侧模式", className: "left" },
+  { value: LayoutMode.TOP, label: "顶部模式", className: "top" },
+  { value: LayoutMode.MIX, label: "混合模式", className: "mix" },
+];
+
 // 颜色预设
 const colorPresets = [
   "#4080FF",
@@ -190,4 +228,97 @@ const handleCloseDrawer = () => {
     }
   }
 }
+
+/* 布局选择器样式 */
+.layout-select {
+  display: flex;
+  gap: 10px;
+  justify-content: space-evenly;
+  padding: 10px 0;
+  --layout-primary: #1b2a47;
+  --layout-background: #f0f2f5;
+  --layout-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+  --layout-hover: #e3f1f9;
+}
+
+.layout-item {
+  position: relative;
+  width: 18%;
+  height: 50px;
+  cursor: pointer;
+  background: var(--layout-background);
+  border-radius: 8px;
+  box-shadow: var(--layout-shadow);
+
+  transition:
+    transform 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:hover {
+    background-color: var(--layout-hover);
+    transform: scale(1.02);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--el-color-primary);
+  }
+
+  &-part {
+    position: absolute;
+    background: var(--layout-primary);
+    border-radius: 4px;
+    box-shadow: var(--layout-shadow);
+    transition: all 0.3s ease;
+  }
+
+  &.left {
+    .layout-item-part {
+      &:first-child {
+        width: 30%;
+        height: 100%;
+        border-radius: 4px 0 0 4px;
+      }
+      &:last-child {
+        top: 0;
+        right: 0;
+        width: 70%;
+        height: 30%;
+        background: #fff;
+        border-radius: 0 4px 4px 0;
+      }
+    }
+  }
+
+  &.top {
+    .layout-item-part:first-child {
+      width: 100%;
+      height: 30%;
+      border-radius: 4px 4px 0 0;
+    }
+  }
+
+  &.mix {
+    .layout-item-part {
+      &:first-child {
+        width: 100%;
+        height: 30%;
+        border-radius: 4px 4px 0 0;
+      }
+      &:last-child {
+        bottom: 0;
+        left: 0;
+        width: 30%;
+        height: 70%;
+        border-radius: 0 0 4px 4px;
+      }
+    }
+  }
+}
+
+.is-active {
+  background-color: var(--layout-hover);
+  border: 2px solid var(--el-color-primary);
+  transform: scale(1.05);
+}
 </style>
diff --git a/src/layouts/components/Settings/components/LayoutSelect.vue b/src/layouts/components/Settings/components/LayoutSelect.vue
deleted file mode 100644
index 488341cc..00000000
--- a/src/layouts/components/Settings/components/LayoutSelect.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<template>
-  <div class="layout-select">
-    <el-tooltip
-      v-for="item in layoutOptions"
-      :key="item.value"
-      :content="item.label"
-      placement="bottom"
-    >
-      <div
-        role="button"
-        tabindex="0"
-        :class="['layout-item', item.className, { 'is-active': modelValue === item.value }]"
-        @click="handleLayoutChange(item.value)"
-        @keydown.enter.space="handleLayoutChange(item.value)"
-      >
-        <div class="layout-item-part" />
-        <div class="layout-item-part" />
-      </div>
-    </el-tooltip>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { LayoutMode } from "@/enums/settings/layout.enum";
-
-interface LayoutOption {
-  value: LayoutMode;
-  label: string;
-  className: string;
-}
-
-const layoutOptions: LayoutOption[] = [
-  { value: LayoutMode.LEFT, label: "左侧模式", className: "left" },
-  { value: LayoutMode.TOP, label: "顶部模式", className: "top" },
-  { value: LayoutMode.MIX, label: "混合模式", className: "mix" },
-];
-
-const modelValue = defineModel<LayoutMode>("modelValue", {
-  required: true,
-  default: () => LayoutMode.LEFT,
-});
-
-function handleLayoutChange(layout: LayoutMode) {
-  modelValue.value = layout;
-}
-</script>
-
-<style scoped lang="scss">
-.layout-select {
-  display: flex;
-  gap: 10px;
-  justify-content: space-evenly;
-  padding: 10px 0;
-  --layout-primary: #1b2a47;
-  --layout-background: #f0f2f5;
-  --layout-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
-  --layout-hover: #e3f1f9;
-}
-
-.layout-item {
-  position: relative;
-  width: 18%;
-  height: 50px;
-  cursor: pointer;
-  background: var(--layout-background);
-  border-radius: 8px;
-  box-shadow: var(--layout-shadow);
-
-  transition:
-    transform 0.2s ease,
-    border-color 0.2s ease,
-    box-shadow 0.2s ease;
-
-  &:hover {
-    background-color: var(--layout-hover);
-    transform: scale(1.02); /* 稍微放大，避免过于夸张 */
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--el-color-primary);
-  }
-
-  &-part {
-    position: absolute;
-    background: var(--layout-primary);
-    border-radius: 4px; /* 保持和父容器一致的圆角 */
-    box-shadow: var(--layout-shadow);
-    transition: all 0.3s ease;
-  }
-
-  &.left {
-    .layout-item-part {
-      &:first-child {
-        width: 30%;
-        height: 100%;
-        border-radius: 4px 0 0 4px; /* 左边部分圆角 */
-      }
-      &:last-child {
-        top: 0;
-        right: 0;
-        width: 70%;
-        height: 30%;
-        background: #fff;
-        border-radius: 0 4px 4px 0; /* 右边部分圆角 */
-      }
-    }
-  }
-
-  &.top {
-    .layout-item-part:first-child {
-      width: 100%;
-      height: 30%;
-      border-radius: 4px 4px 0 0; /* 顶部部分圆角 */
-    }
-  }
-
-  &.mix {
-    .layout-item-part {
-      &:first-child {
-        width: 100%;
-        height: 30%;
-        border-radius: 4px 4px 0 0; /* 顶部部分圆角 */
-      }
-      &:last-child {
-        bottom: 0;
-        left: 0;
-        width: 30%;
-        height: 70%;
-        border-radius: 0 0 4px 4px; /* 底部部分圆角 */
-      }
-    }
-  }
-}
-
-.is-active {
-  background-color: var(--layout-hover);
-  border: 2px solid var(--el-color-primary);
-  transform: scale(1.05); /* 轻微放大 */
-}
-</style>
diff --git a/src/layouts/components/Sidebar/components/SidebarMenu.vue b/src/layouts/components/Sidebar/components/SidebarMenu.vue
deleted file mode 100644
index 4c8b36f5..00000000
--- a/src/layouts/components/Sidebar/components/SidebarMenu.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<!-- 菜单组件 -->
-<template>
-  <el-menu
-    ref="menuRef"
-    :default-active="currentRoute.path"
-    :collapse="!appStore.sidebar.opened"
-    :background-color="
-      theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
-        ? variables['menu-background']
-        : undefined
-    "
-    :text-color="
-      theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
-        ? variables['menu-text']
-        : undefined
-    "
-    :active-text-color="
-      theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
-        ? variables['menu-active-text']
-        : undefined
-    "
-    :popper-effect="theme"
-    :unique-opened="false"
-    :collapse-transition="false"
-    :mode="menuMode"
-    @open="onMenuOpen"
-    @close="onMenuClose"
-  >
-    <!-- 菜单项 -->
-    <SidebarMenuItem
-      v-for="route in data"
-      :key="route.path"
-      :item="route"
-      :base-path="resolveFullPath(route.path)"
-    />
-  </el-menu>
-</template>
-
-<script lang="ts" setup>
-import path from "path-browserify";
-import type { MenuInstance } from "element-plus";
-import type { RouteRecordRaw } from "vue-router";
-
-import { LayoutMode } from "@/enums/settings/layout.enum";
-import { SidebarColor } from "@/enums/settings/theme.enum";
-import { useSettingsStore, useAppStore } from "@/store";
-import { isExternal } from "@/utils/index";
-
-import variables from "@/styles/variables.module.scss";
-
-const props = defineProps({
-  data: {
-    type: Array<RouteRecordRaw>,
-    default: () => [],
-  },
-  basePath: {
-    type: String,
-    required: true,
-    example: "/system",
-  },
-});
-
-const menuRef = ref<MenuInstance>();
-const settingsStore = useSettingsStore();
-const appStore = useAppStore();
-const currentRoute = useRoute();
-
-// 存储已展开的菜单项索引
-const expandedMenuIndexes = ref<string[]>([]);
-
-// 根据布局模式设置菜单的显示方式：顶部布局使用水平模式，其他使用垂直模式
-const menuMode = computed(() => {
-  return settingsStore.layout === LayoutMode.TOP ? "horizontal" : "vertical";
-});
-
-// 获取主题
-const theme = computed(() => settingsStore.theme);
-
-// 获取浅色主题下的侧边栏配色方案
-const sidebarColorScheme = computed(() => settingsStore.sidebarColorScheme);
-
-/**
- * 获取完整路径
- *
- * @param routePath 当前路由的相对路径  /user
- * @returns 完整的绝对路径 D://vue3-element-admin/system/user
- */
-function resolveFullPath(routePath: string) {
-  if (isExternal(routePath)) {
-    return routePath;
-  }
-  if (isExternal(props.basePath)) {
-    return props.basePath;
-  }
-
-  // 解析路径，生成完整的绝对路径
-  return path.resolve(props.basePath, routePath);
-}
-
-/**
- * 打开菜单
- *
- * @param index 当前展开的菜单项索引
- */
-const onMenuOpen = (index: string) => {
-  expandedMenuIndexes.value.push(index);
-};
-
-/**
- * 关闭菜单
- *
- * @param index 当前收起的菜单项索引
- */
-const onMenuClose = (index: string) => {
-  expandedMenuIndexes.value = expandedMenuIndexes.value.filter((item) => item !== index);
-};
-
-/**
- * 监听菜单模式变化：当菜单模式切换为水平模式时，关闭所有展开的菜单项，
- * 避免在水平模式下菜单项显示错位。
- *
- * @see https://gitee.com/youlaiorg/vue3-element-admin/issues/IAJ1DR
- */
-watch(
-  () => menuMode.value,
-  () => {
-    if (menuMode.value === "horizontal") {
-      expandedMenuIndexes.value.forEach((item) => menuRef.value!.close(item));
-    }
-  }
-);
-</script>
diff --git a/src/layouts/components/common/LayoutSidebar.vue b/src/layouts/components/Sidebar/index.vue
similarity index 92%
rename from src/layouts/components/common/LayoutSidebar.vue
rename to src/layouts/components/Sidebar/index.vue
index 6933bd30..a022aeef 100644
--- a/src/layouts/components/common/LayoutSidebar.vue
+++ b/src/layouts/components/Sidebar/index.vue
@@ -8,6 +8,8 @@
 </template>
 
 <script setup lang="ts">
+import SidebarLogo from "./components/SidebarLogo.vue";
+
 defineProps({
   /**
    * 是否显示Logo
diff --git a/src/layouts/components/TagsView/index.vue b/src/layouts/components/TagsView.vue
similarity index 100%
rename from src/layouts/components/TagsView/index.vue
rename to src/layouts/components/TagsView.vue
diff --git a/src/layouts/components/Sidebar/components/SidebarMenuItem.vue b/src/layouts/components/menu/components/MenuItem.vue
similarity index 95%
rename from src/layouts/components/Sidebar/components/SidebarMenuItem.vue
rename to src/layouts/components/menu/components/MenuItem.vue
index ede0ef3c..0be3c3b3 100644
--- a/src/layouts/components/Sidebar/components/SidebarMenuItem.vue
+++ b/src/layouts/components/menu/components/MenuItem.vue
@@ -22,7 +22,7 @@
           :index="resolvePath(onlyOneChild.path)"
           :class="{ 'submenu-title-noDropdown': !isNest }"
         >
-          <SidebarMenuItemTitle
+          <MenuItemTitle
             :icon="onlyOneChild.meta.icon || item.meta?.icon"
             :title="onlyOneChild.meta.title"
           />
@@ -33,10 +33,10 @@
     <!--【非叶子节点】显示含多个子节点的父菜单，或始终显示的单子节点 -->
     <el-sub-menu v-else :index="resolvePath(item.path)" teleported>
       <template #title>
-        <SidebarMenuItemTitle v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+        <MenuItemTitle v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
       </template>
 
-      <SidebarMenuItem
+      <MenuItem
         v-for="child in item.children"
         :key="child.path"
         :is-nest="true"
@@ -48,8 +48,10 @@
 </template>
 
 <script setup lang="ts">
+import MenuItemTitle from "./MenuItemTitle.vue";
+
 defineOptions({
-  name: "SidebarMenuItem",
+  name: "MenuItem",
   inheritAttrs: false,
 });
 
diff --git a/src/layouts/components/Sidebar/components/SidebarMenuItemTitle.vue b/src/layouts/components/menu/components/MenuItemTitle.vue
similarity index 100%
rename from src/layouts/components/Sidebar/components/SidebarMenuItemTitle.vue
rename to src/layouts/components/menu/components/MenuItemTitle.vue
diff --git a/src/layouts/components/Sidebar/components/SidebarMixTopMenu.vue b/src/layouts/components/menu/components/MixTopMenu.vue
similarity index 82%
rename from src/layouts/components/Sidebar/components/SidebarMixTopMenu.vue
rename to src/layouts/components/menu/components/MixTopMenu.vue
index 643d719e..76bb342c 100644
--- a/src/layouts/components/Sidebar/components/SidebarMixTopMenu.vue
+++ b/src/layouts/components/menu/components/MixTopMenu.vue
@@ -2,7 +2,7 @@
 <template>
   <el-menu
     mode="horizontal"
-    :default-active="activePath"
+    :default-active="activeTopMenuPath"
     :background-color="
       theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
         ? variables['menu-background']
@@ -21,26 +21,20 @@
     @select="handleMenuSelect"
   >
     <el-menu-item v-for="route in topMenus" :key="route.path" :index="route.path">
-      <template #title>
-        <template v-if="route.meta && route.meta.icon">
-          <el-icon v-if="route.meta.icon.startsWith('el-icon')" class="sub-el-icon">
-            <component :is="route.meta.icon.replace('el-icon-', '')" />
-          </el-icon>
-          <div v-else :class="`i-svg:${route.meta.icon}`" />
-        </template>
-        <span v-if="route.path === '/'">首页</span>
-        <span v-else-if="route.meta && route.meta.title" class="ml-1">
-          {{ translateRouteTitle(route.meta.title) }}
-        </span>
-      </template>
+      <MenuItemTitle v-if="route.meta" :icon="route.meta.icon" :title="route.meta.title" />
     </el-menu-item>
   </el-menu>
 </template>
 
 <script lang="ts" setup>
+import MenuItemTitle from "./MenuItemTitle.vue";
+
+defineOptions({
+  name: "MixTopMenu",
+});
+
 import { LocationQueryRaw, RouteRecordRaw } from "vue-router";
 import { usePermissionStore, useAppStore, useSettingsStore } from "@/store";
-import { translateRouteTitle } from "@/utils/i18n";
 import variables from "@/styles/variables.module.scss";
 import { SidebarColor } from "@/enums/settings/theme.enum";
 
@@ -49,9 +43,6 @@ const appStore = useAppStore();
 const permissionStore = usePermissionStore();
 const settingsStore = useSettingsStore();
 
-// 当前激活的顶部菜单路径
-const activePath = computed(() => appStore.activeTopMenuPath);
-
 // 获取主题
 const theme = computed(() => settingsStore.theme);
 
diff --git a/src/layouts/components/LayoutMenu.vue b/src/layouts/components/menu/index.vue
similarity index 96%
rename from src/layouts/components/LayoutMenu.vue
rename to src/layouts/components/menu/index.vue
index 7ec2074b..9787e4ef 100644
--- a/src/layouts/components/LayoutMenu.vue
+++ b/src/layouts/components/menu/index.vue
@@ -27,7 +27,7 @@
     @close="onMenuClose"
   >
     <!-- 菜单项 -->
-    <SidebarMenuItem
+    <MenuItem
       v-for="route in data"
       :key="route.path"
       :item="route"
@@ -45,7 +45,7 @@ import type { RouteRecordRaw } from "vue-router";
 import { SidebarColor } from "@/enums/settings/theme.enum";
 import { useSettingsStore, useAppStore } from "@/store";
 import { isExternal } from "@/utils/index";
-import SidebarMenuItem from "@/layouts/components/Sidebar/components/SidebarMenuItem.vue";
+import MenuItem from "./components/MenuItem.vue";
 import variables from "@/styles/variables.module.scss";
 
 const props = defineProps({
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 97d31741..2c382e7b 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -5,9 +5,9 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useLayout } from "./composables/useLayout";
-import LeftLayout from "./components/LeftLayout/index.vue";
-import TopLayout from "./components/TopLayout/index.vue";
-import MixLayout from "./components/MixLayout/index.vue";
+import LeftLayout from "./views/LeftLayout.vue";
+import TopLayout from "./views/TopLayout.vue";
+import MixLayout from "./views/MixLayout.vue";
 import { LayoutMode } from "@/enums/settings/layout.enum";
 
 const { currentLayout } = useLayout();
diff --git a/src/layouts/components/BaseLayout.vue b/src/layouts/views/BaseLayout.vue
similarity index 94%
rename from src/layouts/components/BaseLayout.vue
rename to src/layouts/views/BaseLayout.vue
index 501b1d70..d8680eeb 100644
--- a/src/layouts/components/BaseLayout.vue
+++ b/src/layouts/views/BaseLayout.vue
@@ -19,7 +19,7 @@
 <script setup lang="ts">
 import { useLayout } from "../composables/useLayout";
 import { useLayoutResponsive } from "../composables/useLayoutResponsive";
-import Settings from "@/layouts/components/Settings/index.vue";
+import Settings from "../components/Settings.vue";
 
 // 布局相关
 const { layoutClass, isShowSettings, isSidebarOpen, closeSidebar } = useLayout();
diff --git a/src/layouts/components/LeftLayout/index.vue b/src/layouts/views/LeftLayout.vue
similarity index 77%
rename from src/layouts/components/LeftLayout/index.vue
rename to src/layouts/views/LeftLayout.vue
index 66afabac..d8660efa 100644
--- a/src/layouts/components/LeftLayout/index.vue
+++ b/src/layouts/views/LeftLayout.vue
@@ -2,11 +2,11 @@
   <BaseLayout>
     <!-- 左侧菜单栏 -->
     <div class="layout__sidebar" :class="{ 'layout__sidebar--collapsed': !isSidebarOpen }">
-      <LayoutSidebar :show-logo="isShowLogo" :is-collapsed="!isSidebarOpen">
+      <Sidebar :show-logo="isShowLogo" :is-collapsed="!isSidebarOpen">
         <el-scrollbar>
-          <SidebarMenu :data="routes" base-path="" />
+          <Menu :data="routes" base-path="" />
         </el-scrollbar>
-      </LayoutSidebar>
+      </Sidebar>
     </div>
 
     <!-- 主内容区 -->
@@ -25,14 +25,14 @@
 </template>
 
 <script setup lang="ts">
-import { useLayout } from "../../composables/useLayout";
-import { useLayoutMenu } from "../../composables/useLayoutMenu";
-import BaseLayout from "../BaseLayout.vue";
-import LayoutSidebar from "../common/LayoutSidebar.vue";
-import NavBar from "@/layouts/components/NavBar/index.vue";
-import TagsView from "@/layouts/components/TagsView/index.vue";
-import AppMain from "@/layouts/components/AppMain/index.vue";
-import SidebarMenu from "../LayoutMenu.vue";
+import { useLayout } from "../composables/useLayout";
+import { useLayoutMenu } from "../composables/useLayoutMenu";
+import BaseLayout from "./BaseLayout.vue";
+import Sidebar from "../components/Sidebar/index.vue";
+import NavBar from "../components/navbar/index.vue";
+import TagsView from "../components/TagsView.vue";
+import AppMain from "../components/AppMain.vue";
+import Menu from "../components/menu/index.vue";
 
 // 布局相关参数
 const { isShowTagsView, isShowLogo, isSidebarOpen, isMobile } = useLayout();
diff --git a/src/layouts/components/MixLayout/index.vue b/src/layouts/views/MixLayout.vue
similarity index 89%
rename from src/layouts/components/MixLayout/index.vue
rename to src/layouts/views/MixLayout.vue
index 46fac677..a8002033 100644
--- a/src/layouts/components/MixLayout/index.vue
+++ b/src/layouts/views/MixLayout.vue
@@ -10,7 +10,7 @@
 
         <!-- 顶部菜单区域 -->
         <div class="layout__header-menu">
-          <SidebarMixTopMenu />
+          <MixTopMenu />
         </div>
 
         <!-- 右侧操作区域 -->
@@ -34,7 +34,7 @@
             :text-color="variables['menu-text']"
             :active-text-color="variables['menu-active-text']"
           >
-            <SidebarMenuItem
+            <MenuItem
               v-for="route in sideMenuRoutes"
               :key="route.path"
               :item="route"
@@ -60,15 +60,15 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useRoute } from "vue-router";
-import { useLayout } from "../../composables/useLayout";
-import { useLayoutMenu } from "../../composables/useLayoutMenu";
-import BaseLayout from "../BaseLayout.vue";
-import SidebarLogo from "@/layouts/components/Sidebar/components/SidebarLogo.vue";
-import SidebarMixTopMenu from "@/layouts/components/Sidebar/components/SidebarMixTopMenu.vue";
-import NavbarActions from "@/layouts/components/NavBar/components/NavbarActions.vue";
-import TagsView from "@/layouts/components/TagsView/index.vue";
-import AppMain from "@/layouts/components/AppMain/index.vue";
-import SidebarMenuItem from "@/layouts/components/Sidebar/components/SidebarMenuItem.vue";
+import { useLayout } from "../composables/useLayout";
+import { useLayoutMenu } from "../composables/useLayoutMenu";
+import BaseLayout from "./BaseLayout.vue";
+import SidebarLogo from "../components/Sidebar/components/SidebarLogo.vue";
+import MixTopMenu from "../components/menu/components/MixTopMenu.vue";
+import NavbarActions from "../components/navbar/components/NavbarActions.vue";
+import TagsView from "../components/TagsView.vue";
+import AppMain from "../components/AppMain.vue";
+import MenuItem from "../components/menu/components/MenuItem.vue";
 import Hamburger from "@/components/Hamburger/index.vue";
 import variables from "@/styles/variables.module.scss";
 
diff --git a/src/layouts/components/TopLayout/index.vue b/src/layouts/views/TopLayout.vue
similarity index 60%
rename from src/layouts/components/TopLayout/index.vue
rename to src/layouts/views/TopLayout.vue
index a3be577a..d92c66a9 100644
--- a/src/layouts/components/TopLayout/index.vue
+++ b/src/layouts/views/TopLayout.vue
@@ -2,10 +2,10 @@
   <BaseLayout>
     <!-- 顶部菜单栏 -->
     <div class="layout__header">
-      <LayoutSidebar :show-logo="isShowLogo" :is-collapsed="false">
-        <LayoutMenu :data="routes" menu-mode="horizontal" base-path="" />
+      <Sidebar :show-logo="isShowLogo" :is-collapsed="false">
+        <Menu :data="routes" menu-mode="horizontal" base-path="" />
         <NavbarActions />
-      </LayoutSidebar>
+      </Sidebar>
     </div>
 
     <!-- 主内容区 -->
@@ -17,14 +17,14 @@
 </template>
 
 <script setup lang="ts">
-import { useLayout } from "../../composables/useLayout";
-import { useLayoutMenu } from "../../composables/useLayoutMenu";
-import BaseLayout from "../BaseLayout.vue";
-import LayoutSidebar from "../common/LayoutSidebar.vue";
-import LayoutMenu from "../LayoutMenu.vue";
-import NavbarActions from "@/layouts/components/NavBar/components/NavbarActions.vue";
-import TagsView from "@/layouts/components/TagsView/index.vue";
-import AppMain from "@/layouts/components/AppMain/index.vue";
+import { useLayout } from "../composables/useLayout";
+import { useLayoutMenu } from "../composables/useLayoutMenu";
+import BaseLayout from "./BaseLayout.vue";
+import Sidebar from "../components/Sidebar/index.vue";
+import Menu from "../components/menu/index.vue";
+import NavbarActions from "../components/navbar/components/NavbarActions.vue";
+import TagsView from "../components/TagsView.vue";
+import AppMain from "../components/AppMain.vue";
 
 // 布局相关参数
 const { isShowTagsView, isShowLogo } = useLayout();