jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 新增菜单管理页面

Browse Source
This commit is contained in:
xlsea
2024-09-03 12:19:57 +08:00
parent 89f5e8577e
commit 8ab7ee2268
130 changed files with 1797 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/components/advanced/table-sider-layout.vue Normal file
View File

@ -0,0 +1,108 @@
<script setup lang="ts">
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
defineOptions({
name: 'TableSiderLayout'
});
interface Props {
defaultExpanded?: boolean;
}
withDefaults(defineProps<Props>(), {
defaultExpanded: false
});
const time = new Date().getTime();
const breakpoints = useBreakpoints(breakpointsTailwind);
const isCollapse = breakpoints.smaller('lg');
const title = defineModel<string>('title');
</script>
<template>
<NGrid
v-if="isCollapse"
class="min-h-500px flex-col-stretch gap-16px overflow-auto"
:x-gap="12"
:y-gap="12"
item-responsive
responsive="screen"
>
<NGridItem span="24 s:24 1034:10 m:8 l:7 xl:6 xxl:5">
<NCard
:bordered="false"
size="small"
class="sider-layout-card h-full card-wrapper"
content-class="sider-layout-card-content"
>
<NCollapse v-if="isCollapse" :default-expanded-names="defaultExpanded ? [`table-sider-layout${time}`] : []">
<NCollapseItem :title="title" :name="`table-sider-layout${time}`" display-directive="show">
<slot name="sider" />
<template #header>
<slot name="header">
<span>{{ title }}</span>
</slot>
</template>
<template #header-extra>
<slot name="header-extra" />
</template>
</NCollapseItem>
</NCollapse>
</NCard>
</NGridItem>
<NGridItem class="content" span="24 s:24 m:16 l:17 xl:18 xxl:19">
<slot />
</NGridItem>
</NGrid>
<NLayout v-else has-sider>
<NLayoutSider collapse-mode="transform" :collapsed-width="0" :width="320" show-trigger="bar">
<NCard
:bordered="false"
size="small"
class="sider-layout-card h-full card-wrapper"
content-class="sider-layout-card-content"
>
<slot name="sider" />
<template #header>
<slot name="header">
<span>{{ title }}</span>
</slot>
</template>
<template #header-extra>
<slot name="header-extra" />
</template>
</NCard>
</NLayoutSider>
<NLayoutContent content-class="bg-transparent">
<slot />
</NLayoutContent>
</NLayout>
</template>
<style scoped>
.title {
font-weight: 500;
font-size: 16px;
transition: color 0.3s var(--n-bezier);
flex: 1;
min-width: 0;
color: var(--n-title-text-color);
}
.content {
min-height: calc(100vh - 196px - var(--calc-footer-height, 0px));
}
:deep(.n-collapse-item__header) {
padding-top: 0 !important;
}
:deep(.n-layout-content) {
background-color: transparent;
padding-left: 25px;
}
:deep(.n-layout-sider) {
background-color: transparent;
}
</style>