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

@@ -5,29 +5,10 @@
         「复制配置」按钮，并将配置粘贴到 src/config/settings.ts 文件中。
       </a-alert>
       <a-divider v-if="settingOpen" orientation="center">系统布局</a-divider>
-      <a-row v-if="settingOpen" justify="center">
-        <a-space>
-          <a-badge>
-            <template #content>
-              <icon-check-circle-fill
-                v-if="appStore.layout === 'left'" style="color: rgb(var(--success-6))"
-                :size="16"
-              ></icon-check-circle-fill>
-            </template>
-            <LayoutItem mode="left" @click="appStore.layout = 'left'"></LayoutItem>
-            <p class="layout-text">默认布局</p>
-          </a-badge>
-          <a-badge>
-            <template #content>
-              <icon-check-circle-fill
-                v-if="appStore.layout === 'mix'" :size="16"
-                style="color: rgb(var(--success-6))"
-              ></icon-check-circle-fill>
-            </template>
-            <LayoutItem mode="mix" @click="appStore.layout = 'mix'"></LayoutItem>
-            <p class="layout-text">混合布局</p>
-          </a-badge>
-        </a-space>
+      <a-row v-if="settingOpen" :gutter="[8, 8]">
+        <a-col v-for="item in LAYOUT_OPTIONS" :key="item.value" :span="8">
+          <LayoutItem :mode="item.value" :name="item.label" @click="toggleLayout(item.value)" />
+        </a-col>
       </a-row>
 
       <a-divider orientation="center">系统主题</a-divider>
@@ -111,6 +92,15 @@ defineOptions({ name: 'SettingDrawer' })
 const appStore = useAppStore()
 const visible = ref(false)
 const settingOpen = JSON.parse(import.meta.env.VITE_APP_SETTING)
+interface LayoutItemProps { label: string, value: App.AppSettings['layout'] }
+
+/** 布局选项 */
+const LAYOUT_OPTIONS: LayoutItemProps[] = [
+  { label: '默认布局', value: 'left' },
+  { label: '混合布局', value: 'mix' },
+  { label: '顶部布局', value: 'top' },
+  { label: '双列布局', value: 'columns' },
+]
 const tabModeList: App.TabItem[] = [
   { label: '卡片', value: 'card' },
   { label: '间隔卡片', value: 'card-gutter' },
@@ -190,6 +180,10 @@ const copySettings = () => {
     Message.error({ content: '请检查浏览器权限是否开启' })
   }
 }
+/** 切换布局 */
+const toggleLayout = (layout: App.AppSettings['layout']) => {
+  appStore.layout = layout
+}
 
 defineExpose({ open })
 </script>