feat: 增强布局组件（同步GI-DEMO），支持更多布局选项并优化布局切换功能

Co-authored-by: kiki1373639299<zkai0106@163.com>



# message auto-generated for no-merge-commit merge:
!11 merge dev into dev

feat: 增强布局组件（同步GI-DEMO），支持更多布局选项并优化布局切换功能

Created-by: kiki1373639299
Commit-by: kiki1373639299
Merged-by: Charles_7c
Description: <!--
  非常感谢您的 PR！在提交之前，请务必确保您 PR 的代码经过了完整测试，并且通过了代码规范检查。
-->

<!-- 在 [] 中输入 x 来勾选) -->

## PR 类型

<!-- 您的 PR 引入了哪种类型的变更？ -->
<!-- 只支持选择一种类型，如果有多种类型，可以在更新日志中增加 “类型” 列。 -->

- [X] 新 feature
- [ ] Bug 修复
- [ ] 功能增强
- [ ] 文档变更
- [ ] 代码样式变更
- [ ] 重构
- [ ] 性能改进
- [ ] 单元测试
- [ ] CI/CD
- [ ] 其他

## PR 目的
同步GI-DEMO系统布局，并自定义样式增强
<!-- 描述一下您的 PR 解决了什么问题。如果可以，请链接到相关 issues。 -->

## 解决方案

<!-- 详细描述您是如何解决的问题 -->

## PR 测试

<!-- 如果可以，请为您的 PR 添加或更新单元测试。 -->
<!-- 请描述一下您是如何测试 PR 的。例如：创建/更新单元测试或添加相关的截图。 -->

## Changelog

| 模块  | Changelog | Related issues |
|-----|-----------| -------------- |
|     |           |                |

<!-- 如果有多种类型的变更，可以在变更日志表中增加 “类型” 列，该列的值与上方 “PR 类型” 相同。 -->
<!-- Related issues 格式为 Closes #<issue号>，或者 Fixes #<issue号>，或者 Resolves #<issue号>。 -->

## 其他信息

<!-- 请描述一下还有哪些注意事项。例如：如果引入了一个不向下兼容的变更，请描述其影响。 -->

## 提交前确认

- [X] PR 代码经过了完整测试，并且通过了代码规范检查
- [ ] 已经完整填写 Changelog，并链接到了相关 issues
- [X] PR 代码将要提交到 dev 分支

See merge request: continew/continew-admin-ui!11

src/layout/index.vue

@@ -1,15 +1,36 @@
+<!--
+  @file Layout 组件
+  @description 布局根组件，支持默认布局、混合布局和顶部布局三种模式
+-->
 <template>
-  <LayoutMix v-if="appStore.layout === 'mix'"></LayoutMix>
-  <LayoutDefault v-else></LayoutDefault>
+  <component :is="currentLayout" />
 </template>
 
 <script setup lang="ts">
-import LayoutDefault from './LayoutDefault.vue'
-import LayoutMix from './LayoutMix.vue'
 import { useAppStore } from '@/stores'
 
+/** 组件名称 */
 defineOptions({ name: 'Layout' })
+const LayoutDefault = defineAsyncComponent(() => import('./LayoutDefault.vue'))
+const LayoutColumns = defineAsyncComponent(() => import('./LayoutColumns.vue'))
+const LayoutMix = defineAsyncComponent(() => import('./LayoutMix.vue'))
+const LayoutTop = defineAsyncComponent(() => import('./LayoutTop.vue'))
+
+/** 状态管理 */
 const appStore = useAppStore()
+
+/** 布局组件映射 */
+const layoutMap = {
+  mix: LayoutMix,
+  top: LayoutTop,
+  default: LayoutDefault,
+  columns: LayoutColumns,
+} as const
+
+/** 当前布局组件 */
+const currentLayout = computed(() =>
+  layoutMap[appStore.layout as keyof typeof layoutMap] || layoutMap.default,
+)
 </script>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>