-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Soybean
committed
Jan 10, 2022
1 parent
6d132c5
commit a090d39
Showing
15 changed files
with
543 additions
and
391 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
<template> | ||
<div v-if="showTooltip"> | ||
<n-tooltip :placement="placement" trigger="hover"> | ||
<template #trigger> | ||
<div class="flex-center h-full cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]" :class="contentClass"> | ||
<slot></slot> | ||
</div> | ||
</template> | ||
{{ tooltipContent }} | ||
</n-tooltip> | ||
</div> | ||
<div v-else class="flex-center cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]" :class="contentClass"> | ||
<slot></slot> | ||
</div> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import { computed } from 'vue'; | ||
import { NTooltip } from 'naive-ui'; | ||
import type { FollowerPlacement } from 'vueuc'; | ||
interface Props { | ||
/** tooltip显示文本 */ | ||
tooltipContent?: string; | ||
/** tooltip的位置 */ | ||
placement?: FollowerPlacement; | ||
/** class类 */ | ||
contentClass?: string; | ||
} | ||
const props = withDefaults(defineProps<Props>(), { | ||
tooltipContent: '', | ||
placement: 'bottom', | ||
contentClass: '' | ||
}); | ||
const showTooltip = computed(() => Boolean(props.tooltipContent)); | ||
</script> | ||
<style scoped></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,3 @@ | ||
export * from './system'; | ||
export * from './router'; | ||
export * from './layout'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
import { computed } from 'vue'; | ||
import { useAppStore, useThemeStore } from '@/store'; | ||
import type { ThemeLayoutMode, GlobalHeaderProps } from '@/interface'; | ||
|
||
type LayoutHeaderProps = Record<ThemeLayoutMode, GlobalHeaderProps>; | ||
|
||
export function useBasicLayout() { | ||
const app = useAppStore(); | ||
const theme = useThemeStore(); | ||
|
||
type LayoutMode = 'vertical' | 'horizontal'; | ||
const mode = computed(() => { | ||
const vertical: LayoutMode = 'vertical'; | ||
const horizontal: LayoutMode = 'horizontal'; | ||
return theme.layout.mode.includes(vertical) ? vertical : horizontal; | ||
}); | ||
|
||
const layoutHeaderProps: LayoutHeaderProps = { | ||
vertical: { | ||
showLogo: false, | ||
showHeaderMenu: false, | ||
showMenuCollape: true | ||
}, | ||
'vertical-mix': { | ||
showLogo: false, | ||
showHeaderMenu: false, | ||
showMenuCollape: false | ||
}, | ||
horizontal: { | ||
showLogo: true, | ||
showHeaderMenu: true, | ||
showMenuCollape: false | ||
}, | ||
'horizontal-mix': { | ||
showLogo: true, | ||
showHeaderMenu: false, | ||
showMenuCollape: true | ||
} | ||
}; | ||
|
||
const headerProps = computed(() => layoutHeaderProps[theme.layout.mode]); | ||
|
||
const siderVisible = computed(() => theme.layout.mode !== 'horizontal'); | ||
const siderWidth = computed(() => { | ||
const { width, mixWidth, mixChildMenuWidth } = theme.sider; | ||
const isVerticalMix = theme.layout.mode === 'vertical-mix'; | ||
let w = isVerticalMix ? mixWidth : width; | ||
if (isVerticalMix && app.mixSiderFixed) { | ||
w += mixChildMenuWidth; | ||
} | ||
return w; | ||
}); | ||
const siderCollapsedWidth = computed(() => { | ||
const { collapsedWidth, mixCollapsedWidth, mixChildMenuWidth } = theme.sider; | ||
const isVerticalMix = theme.layout.mode === 'vertical-mix'; | ||
let w = isVerticalMix ? mixCollapsedWidth : collapsedWidth; | ||
if (isVerticalMix && app.mixSiderFixed) { | ||
w += mixChildMenuWidth; | ||
} | ||
return w; | ||
}); | ||
|
||
return { | ||
mode, | ||
headerProps, | ||
siderVisible, | ||
siderWidth, | ||
siderCollapsedWidth | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,4 @@ | ||
export * from './enum'; | ||
export * from './theme'; | ||
export * from './system'; | ||
export * from './layout'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
/** 全局头部属性 */ | ||
export interface GlobalHeaderProps { | ||
/** 显示logo */ | ||
showLogo: boolean; | ||
/** 显示头部菜单 */ | ||
showHeaderMenu: boolean; | ||
/** 显示菜单折叠按钮 */ | ||
showMenuCollape: boolean; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
14 changes: 14 additions & 0 deletions
14
src/layouts/common/GlobalHeader/components/MenuCollapse.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
<template> | ||
<hover-container class="w-40px h-full" @click="app.toggleSiderCollapse"> | ||
<icon-line-md-menu-unfold-left v-if="app.siderCollapse" class="text-16px" /> | ||
<icon-line-md-menu-fold-left v-else class="text-16px" /> | ||
</hover-container> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import { HoverContainer } from '@/components'; | ||
import { useAppStore } from '@/store'; | ||
const app = useAppStore(); | ||
</script> | ||
<style scoped></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import MenuCollapse from './MenuCollapse.vue'; | ||
|
||
export { MenuCollapse }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
<template> | ||
<router-link :to="routeHomePath" class="flex-center w-full nowrap-hidden"> | ||
<system-logo class="w-32px h-32px text-primary" /> | ||
<h2 v-if="showTitle" class="pl-8px text-16px font-bold text-primary">{{ title }}</h2> | ||
</router-link> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { SystemLogo } from '@/components'; | ||
import { routePath } from '@/router'; | ||
import { useAppInfo } from '@/composables'; | ||
interface Props { | ||
/** 显示名字 */ | ||
showTitle: boolean; | ||
} | ||
defineProps<Props>(); | ||
const { title } = useAppInfo(); | ||
const routeHomePath = routePath('root'); | ||
</script> | ||
<style scoped></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters