mirror of
https://github.com/soybeanjs/soybean-admin.git
synced 2025-10-13 21:33:42 +08:00
86 lines
2.6 KiB
Vue
86 lines
2.6 KiB
Vue
<template>
|
|
<n-divider title-placement="center">界面功能</n-divider>
|
|
<n-space vertical size="large">
|
|
<setting-menu label="滚动模式">
|
|
<n-select
|
|
class="w-120px"
|
|
size="small"
|
|
:value="theme.scrollMode"
|
|
:options="theme.scrollModeList"
|
|
@update:value="theme.setScrollMode"
|
|
/>
|
|
</setting-menu>
|
|
<setting-menu label="固定头部和多页签">
|
|
<n-switch :value="theme.fixedHeaderAndTab" @update:value="theme.setIsFixedHeaderAndTab" />
|
|
</setting-menu>
|
|
<setting-menu label="顶部菜单位置">
|
|
<n-select
|
|
class="w-120px"
|
|
size="small"
|
|
:value="theme.menu.horizontalPosition"
|
|
:options="theme.menu.horizontalPositionList"
|
|
@update:value="theme.setHorizontalMenuPosition"
|
|
/>
|
|
</setting-menu>
|
|
<setting-menu label="头部高度">
|
|
<n-input-number
|
|
class="w-120px"
|
|
size="small"
|
|
:value="theme.header.height"
|
|
:step="1"
|
|
@update:value="theme.setHeaderHeight"
|
|
/>
|
|
</setting-menu>
|
|
<setting-menu label="多页签高度">
|
|
<n-input-number
|
|
class="w-120px"
|
|
size="small"
|
|
:value="theme.tab.height"
|
|
:step="1"
|
|
@update:value="theme.setTabHeight"
|
|
/>
|
|
</setting-menu>
|
|
<setting-menu label="多页签缓存">
|
|
<n-switch :value="theme.tab.isCache" @update:value="theme.setTabIsCache" />
|
|
</setting-menu>
|
|
<setting-menu label="侧边栏展开宽度">
|
|
<n-input-number
|
|
class="w-120px"
|
|
size="small"
|
|
:value="theme.sider.width"
|
|
:step="10"
|
|
@update:value="theme.setSiderWidth"
|
|
/>
|
|
</setting-menu>
|
|
<setting-menu label="左侧混合侧边栏展开宽度">
|
|
<n-input-number
|
|
class="w-120px"
|
|
size="small"
|
|
:value="theme.sider.mixWidth"
|
|
:step="5"
|
|
@update:value="theme.setMixSiderWidth"
|
|
/>
|
|
</setting-menu>
|
|
<setting-menu label="显示底部">
|
|
<n-switch :value="theme.footer.visible" @update:value="theme.setFooterVisible" />
|
|
</setting-menu>
|
|
<setting-menu label="固定底部">
|
|
<n-switch :value="theme.footer.fixed" @update:value="theme.setFooterIsFixed" />
|
|
</setting-menu>
|
|
<setting-menu label="底部居右">
|
|
<n-switch :value="theme.footer.right" @update:value="theme.setFooterIsRight" />
|
|
</setting-menu>
|
|
</n-space>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { useThemeStore } from '@/store';
|
|
import SettingMenu from '../setting-menu/index.vue';
|
|
|
|
defineOptions({ name: 'PageFunc' });
|
|
|
|
const theme = useThemeStore();
|
|
</script>
|
|
|
|
<style scoped></style>
|