mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-10-02 16:37:53 +00:00
78 lines
1.8 KiB
Vue
78 lines
1.8 KiB
Vue
<template>
|
||
<div class="layout" :class="layoutClass">
|
||
<!-- 移动端遮罩层 -->
|
||
<div v-if="isMobile && isSidebarOpen" class="layout__overlay" @click="closeSidebar" />
|
||
|
||
<!-- 布局内容插槽 -->
|
||
<slot></slot>
|
||
|
||
<!-- 返回顶部按钮 -->
|
||
<el-backtop target=".app-main">
|
||
<div class="i-svg:backtop w-6 h-6" />
|
||
</el-backtop>
|
||
|
||
<!-- 新增：悬浮的系统设置按钮 -->
|
||
<el-button
|
||
v-if="defaultSettings.showSettings"
|
||
class="floating-settings-button"
|
||
type="primary"
|
||
@click="handleSettingsClick"
|
||
>
|
||
<el-icon>
|
||
<Setting />
|
||
</el-icon>
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { useLayout } from "../composables/useLayout";
|
||
import { useLayoutResponsive } from "../composables/useLayoutResponsive";
|
||
import { defaultSettings } from "@/settings";
|
||
import { useSettingsStore } from "@/store";
|
||
|
||
const settingStore = useSettingsStore();
|
||
|
||
/**
|
||
* 打开系统设置页面
|
||
*/
|
||
function handleSettingsClick() {
|
||
settingStore.settingsVisible = true;
|
||
}
|
||
|
||
// 布局相关
|
||
const { layoutClass, isSidebarOpen, closeSidebar } = useLayout();
|
||
|
||
// 响应式处理
|
||
const { isMobile } = useLayoutResponsive();
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.layout {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
&__overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 999;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
// 新增：悬浮按钮样式
|
||
.floating-settings-button {
|
||
position: fixed; // 固定在页面上
|
||
top: 50%; // 距离顶部20px
|
||
right: 0px; // 距离右侧8px
|
||
z-index: 999; // 层叠顺序
|
||
width: 40px;
|
||
height: 40px;
|
||
border-top-right-radius: 0; // 右侧顶部无圆角
|
||
border-bottom-right-radius: 0; // 右侧底部无圆角
|
||
}
|
||
}
|
||
</style>
|