bf1942/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2025-12-28 00:10:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(projects): new layout,tab and add update theme settings

Browse Source
This commit is contained in:
Soybean
2023-03-13 20:49:33 +08:00
parent 488e6e3204
commit 912c3531c5
30 changed files with 386 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/layouts/common/setting-drawer/components/layout-mode/index.vue
View File

@@ -1,24 +1,57 @@
<template>
<n-divider title-placement="center">布局模式</n-divider>
<n-space justify="space-between">
<layout-checkbox
<n-space justify="space-around" :wrap="true" :size="24" class="px-12px">
<layout-card
v-for="item in theme.layout.modeList"
:key="item.value"
:mode="item.value"
:label="item.label"
:checked="item.value === theme.layout.mode"
@click="theme.setLayoutMode(item.value)"
/>
>
<template v-if="item.value === 'vertical'">
<div class="w-18px h-full bg-primary:50 rd-4px"></div>
<div class="flex-1 flex-col gap-6px">
<div class="h-16px bg-primary rd-4px"></div>
<div class="flex-1 bg-primary:25 rd-4px"></div>
</div>
</template>
<template v-if="item.value === 'vertical-mix'">
<div class="w-8px h-full bg-primary:50 rd-4px"></div>
<div class="w-16px h-full bg-primary:50 rd-4px"></div>
<div class="flex-1 flex-col gap-6px">
<div class="h-16px bg-primary rd-4px"></div>
<div class="flex-1 bg-primary:25 rd-4px"></div>
</div>
</template>
<template v-if="item.value === 'horizontal'">
<div class="h-16px bg-primary rd-4px"></div>
<div class="flex-1 flex gap-6px">
<div class="flex-1 bg-primary:25 rd-4px"></div>
</div>
</template>
<template v-if="item.value === 'horizontal-mix'">
<div class="h-16px bg-primary rd-4px"></div>
<div class="flex-1 flex gap-6px">
<div class="w-18px bg-primary:50 rd-4px"></div>
<div class="flex-1 bg-primary:25 rd-4px"></div>
</div>
</template>
</layout-card>
</n-space>
</template>
<script setup lang="ts">
import { useThemeStore } from '@/store';
import { LayoutCheckbox } from './components';
import { LayoutCard } from './components';
defineOptions({ name: 'LayoutMode' });
const theme = useThemeStore();
</script>
<style scoped></style>
<style scoped>
.layout-card__shadow {
box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.18);
}
</style>