dolphin-projects/dolphin-frontend
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(projects): 精简版+动态路由权限初步

Browse Source
This commit is contained in:
Soybean
2022-01-03 22:20:10 +08:00
parent 7a0648dba5
commit de2057f141
354 changed files with 2053 additions and 22117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/composables/common/layout.ts
View File

@ -1,82 +0,0 @@
import { ref, computed, watch } from 'vue';
import type { ScrollbarInst } from 'naive-ui';
import { useThemeStore, useAppStore } from '@/store';
import { useRouteProps } from './route';
export function useLayoutConfig() {
const theme = useThemeStore();
const app = useAppStore();
const { setScrollbarInstance } = useAppStore();
const routeProps = useRouteProps();
/** 反转sider */
const siderInverted = computed(() => theme.navStyle.theme !== 'light');
/** 侧边菜单宽度 */
const siderMenuWidth = computed(() => {
const { collapsed } = app.menu;
const { collapsedWidth, width } = theme.menuStyle;
return collapsed ? collapsedWidth : width;
});
/** 反转header */
const headerInverted = computed(() => (theme.navStyle.theme !== 'dark' ? siderInverted.value : !siderInverted.value));
/** 头部定位 */
const headerPosition = computed(() => (theme.fixedHeaderAndTab ? 'absolute' : 'static'));
/** 全局头部的高度(px) */
const headerHeight = computed(() => `${theme.headerStyle.height}px`);
/** 多页签Tab的高度(px) */
const multiTabHeight = computed(() => `${theme.multiTabStyle.height}px`);
/** 全局头部和多页签的总高度 */
const headerAndMultiTabHeight = computed(() => {
const {
multiTabStyle: { visible, height: tabHeight },
headerStyle: { height: headerHeight }
} = theme;
const height = visible ? headerHeight + tabHeight : headerHeight;
return `${height}px`;
});
/** 全局侧边栏的样式 */
const globalSiderClassAndStyle = {
class: 'transition-all duration-300 ease-in-out',
style: 'z-index:12;box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);'
};
/** 纵向flex布局样式 */
const flexColumnStyle = 'display:flex;flex-direction:column;height:100%;';
/** scrollbar的content的样式 */
const scrollbarContentStyle = computed(() => {
const { fullPage } = routeProps.value;
const height = fullPage ? '100%' : 'auto';
return `display:flex;flex-direction:column;height:${height};min-height:100%;`;
});
/** 滚动条实例 */
const scrollbar = ref<ScrollbarInst | null>(null);
watch(scrollbar, newValue => {
if (newValue) {
setScrollbarInstance(newValue);
}
});
return {
siderInverted,
siderMenuWidth,
headerInverted,
headerPosition,
headerHeight,
multiTabHeight,
headerAndMultiTabHeight,
globalSiderClassAndStyle,
flexColumnStyle,
scrollbarContentStyle,
scrollbar
};
}