GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(projects): 头部添加菜单折叠按钮和github地址

Browse Source
This commit is contained in:
Soybean 2021-09-15 08:14:17 +08:00
parent 3226a724be
commit 3ec1fc8f0c
10 changed files with 73 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/layouts/BasicLayout/components/GlobalHeader/components/FullScreen.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<header-item class="w-40px h-full" @click="toggle">
<icon-gridicons-fullscreen-exit v-if="isFullscreen" class="text-16px" />
<icon-gridicons-fullscreen v-else class="text-16px" />
</header-item>
</template>
<script lang="ts" setup>
import { useFullscreen } from '@vueuse/core';
import HeaderItem from './HeaderItem.vue';
const { isFullscreen, toggle } = useFullscreen();
</script>
<style scoped></style>

12
src/layouts/BasicLayout/components/GlobalHeader/components/GihubSite.vue Normal file
View File

@ -0,0 +1,12 @@
<template>
<header-item class="w-40px h-full">
<a href="https://github.com/honghuangdc/soybean-admin" target="_blank" class="flex-center">
<icon-mdi-github class="text-20px text-[#666]" />
</a>
</header-item>
</template>
<script lang="ts" setup>
import HeaderItem from './HeaderItem.vue';
</script>
<style scoped></style>

15
src/layouts/BasicLayout/components/GlobalHeader/components/MenuCollapse.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<header-item class="w-40px h-full" @click="toggleMenu">
<icon-line-md-menu-unfold-left v-if="app.menu.collapsed" class="text-16px" />
<icon-line-md-menu-fold-left v-else class="text-16px" />
</header-item>
</template>
<script lang="ts" setup>
import { useAppStore } from '@/store';
import HeaderItem from './HeaderItem.vue';
const app = useAppStore();
const { toggleMenu } = useAppStore();
</script>
<style scoped></style>

13
src/layouts/BasicLayout/components/GlobalHeader/components/SettingDrawerButton.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<header-item class="w-40px h-full" @click="openSettingDrawer">
<icon-mdi-light-cog class="text-16px" />
</header-item>
</template>
<script lang="ts" setup>
import { useAppStore } from '@/store';
import HeaderItem from './HeaderItem.vue';
const { openSettingDrawer } = useAppStore();
</script>
<style scoped></style>

2
src/layouts/BasicLayout/components/GlobalHeader/components/UserAvatar.vue
View File

@ -1,7 +1,7 @@
<template>
<n-dropdown :options="options" @select="handleDropdown">
<header-item class="px-12px">
<n-avatar :src="avatar" :round="true" />
<n-avatar :src="avatar" size="small" :round="true" />
<span class="pl-8px text-16px font-medium">Soybean</span>
</header-item>
</n-dropdown>

6
src/layouts/BasicLayout/components/GlobalHeader/components/index.ts
View File

@ -1,4 +1,8 @@
import UserAvatar from './UserAvatar.vue';
import MenuCollapse from './MenuCollapse.vue';
import FullScreen from './FullScreen.vue';
import SettingDrawerButton from './SettingDrawerButton.vue';
import GihubSite from './GihubSite.vue';
import HeaderItem from './HeaderItem.vue';
export { UserAvatar, HeaderItem };
export { UserAvatar, MenuCollapse, FullScreen, SettingDrawerButton, GihubSite, HeaderItem };

18
src/layouts/BasicLayout/components/GlobalHeader/index.vue
View File

@ -5,15 +5,12 @@
<div v-if="!theme.isVerticalNav" class="menu-width h-full">
<global-logo />
</div>
<menu-collapse />
<div class="flex-1 flex justify-end h-full">
<header-item class="w-40px h-full" @click="toggle">
<icon-gridicons-fullscreen-exit v-if="isFullscreen" class="text-16px" />
<icon-gridicons-fullscreen v-else class="text-16px" />
</header-item>
<gihub-site />
<full-screen />
<user-avatar />
<header-item class="w-40px h-full" @click="openSettingDrawer">
<icon-mdi-light-cog class="text-16px" />
</header-item>
<setting-drawer-button />
</div>
</div>
</n-layout-header>
@ -22,9 +19,8 @@
<script lang="ts" setup>
import { computed } from 'vue';
import { NLayoutHeader } from 'naive-ui';
import { useFullscreen } from '@vueuse/core';
import { useAppStore, useThemeStore } from '@/store';
import { UserAvatar, HeaderItem } from './components';
import { useThemeStore } from '@/store';
import { UserAvatar, MenuCollapse, FullScreen, GihubSite, SettingDrawerButton } from './components';
import { GlobalLogo } from '../common';
defineProps({
@ -34,9 +30,7 @@ defineProps({
}
});
const { openSettingDrawer } = useAppStore();
const theme = useThemeStore();
const { isFullscreen, toggle } = useFullscreen();
const inverted = computed(() => {
return theme.navStyle.theme !== 'light';

5
src/layouts/BasicLayout/components/GlobalSider/index.vue
View File

@ -1,6 +1,6 @@
<template>
<n-layout-sider
class="sider-shadow h-full"
class="global-sider h-full"
:style="{ zIndex }"
:native-scrollbar="false"
:inverted="inverted"
@ -46,7 +46,8 @@ const menuWidth = computed(() => {
});
</script>
<style scoped>
.sider-shadow {
.global-sider {
transition: all 0.2s ease-in-out;
box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
}
</style>

5
src/router/routes.ts
View File

@ -141,6 +141,7 @@ export const customRoutes: CustomRoute[] = [
component: () => import('@/views/system/exception/403.vue'),
meta: {
title: EnumRouteTitle['exception-403'],
fullPage: true,
asMenu: true
}
},
@ -150,6 +151,7 @@ export const customRoutes: CustomRoute[] = [
component: () => import('@/views/system/exception/404.vue'),
meta: {
title: EnumRouteTitle['exception-404'],
fullPage: true,
asMenu: true
}
},
@ -159,7 +161,8 @@ export const customRoutes: CustomRoute[] = [
component: () => import('@/views/system/exception/500.vue'),
meta: {
title: EnumRouteTitle['exception-500'],
asMenu: false
fullPage: true,
asMenu: true
}
}
]

2
src/views/dashboard/analysis/index.vue
View File

@ -2,14 +2,12 @@
<div class="p-10px">
<data-card :loading="loading" />
<nav-card :loading="loading" />
<router-link :to="EnumRoutePath['dashboard-workbench']">workbench</router-link>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { DataCard, NavCard } from './components';
import { EnumRoutePath } from '@/enum';
const loading = ref(true);