Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
JiangQiming
commit
c1adddbb3b
|
|
@ -2,6 +2,15 @@ export default {
|
||||||
theme: {
|
theme: {
|
||||||
'primary-color': '#1d39c4',
|
'primary-color': '#1d39c4',
|
||||||
},
|
},
|
||||||
logo: '/favicon.ico',
|
logo: '/favicon.ico', // 浏览器标签页logo
|
||||||
title: 'Jetlinks'
|
title: 'Jetlinks', // 浏览器标签页title
|
||||||
|
layout: {
|
||||||
|
title: '物联网平台', // 平台title
|
||||||
|
logo: '/icons/icon-192x192.png', // 平台logo
|
||||||
|
siderWidth: 208, // 左侧菜单栏宽度
|
||||||
|
headerHeight: 48, // 头部高度
|
||||||
|
collapsedWidth: 48,
|
||||||
|
mode: 'inline',
|
||||||
|
theme: 'light', // 'dark' 'light'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<script setup lang="ts">
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<router-view />
|
<router-view />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -23,3 +23,8 @@ export const getSearchHistory = (target:string) => server.get<SearchHistoryList[
|
||||||
* @param target
|
* @param target
|
||||||
*/
|
*/
|
||||||
export const deleteSearchHistory = (target:string, id:string) => server.remove<SearchHistoryList[]>(`/user/settings/${target}/${id}`)
|
export const deleteSearchHistory = (target:string, id:string) => server.remove<SearchHistoryList[]>(`/user/settings/${target}/${id}`)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取当前系统版本
|
||||||
|
*/
|
||||||
|
export const systemVersion = () => server.get<{edition?: string}>('/system/version')
|
||||||
|
|
@ -46,4 +46,9 @@ export const bindInfo = () => server.get(`/application/sso/_all`)
|
||||||
* 查询配置信息
|
* 查询配置信息
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
export const settingDetail = (scopes: string) => server.get(`/system/config/${scopes}`)
|
export const settingDetail = (scopes: string) => server.get(`/system/config/${scopes}`)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取当前登录用户信息
|
||||||
|
*/
|
||||||
|
export const userDetail = () => server.get<any>('/user/detail')
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import server from '@/utils/request'
|
||||||
|
|
||||||
|
export const queryOwnThree = (data: any) => server.post<any>('/menu/user-own/tree', data)
|
||||||
|
|
@ -39,6 +39,10 @@ const iconKeys = [
|
||||||
'ArrowDownOutlined',
|
'ArrowDownOutlined',
|
||||||
'SmallDashOutlined',
|
'SmallDashOutlined',
|
||||||
'TeamOutlined',
|
'TeamOutlined',
|
||||||
|
'MenuUnfoldOutlined',
|
||||||
|
'MenuFoldOutlined',
|
||||||
|
'QuestionCircleOutlined',
|
||||||
|
'InfoCircleOutlined',
|
||||||
'SearchOutlined',
|
'SearchOutlined',
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,226 @@
|
||||||
|
import {
|
||||||
|
computed,
|
||||||
|
reactive,
|
||||||
|
unref,
|
||||||
|
defineComponent,
|
||||||
|
toRefs,
|
||||||
|
provide
|
||||||
|
} from 'vue'
|
||||||
|
|
||||||
|
import type { DefineComponent, ExtractPropTypes, PropType, CSSProperties, Plugin, App } from 'vue'
|
||||||
|
import { Layout } from 'ant-design-vue'
|
||||||
|
import useConfigInject from 'ant-design-vue/es/_util/hooks/useConfigInject'
|
||||||
|
import { defaultSettingProps, defaultSettings } from './defaultSetting'
|
||||||
|
import type { PureSettings } from './defaultSetting'
|
||||||
|
import type { BreadcrumbProps, RouteContextProps } from './RouteContext'
|
||||||
|
import type {
|
||||||
|
BreadcrumbRender,
|
||||||
|
CollapsedButtonRender, CustomRender,
|
||||||
|
FooterRender,
|
||||||
|
HeaderContentRender,
|
||||||
|
HeaderRender,
|
||||||
|
MenuContentRender,
|
||||||
|
MenuExtraRender,
|
||||||
|
MenuFooterRender,
|
||||||
|
MenuHeaderRender,
|
||||||
|
MenuItemRender,
|
||||||
|
RightContentRender,
|
||||||
|
SubMenuItemRender
|
||||||
|
} from './typings'
|
||||||
|
import SiderMenuWrapper, { siderMenuProps } from 'components/Layout/components/SiderMenu/SiderMenu'
|
||||||
|
import { getSlot } from '@/utils/comm'
|
||||||
|
import { getMenuFirstChildren } from 'components/Layout/utils'
|
||||||
|
import { pick } from 'lodash-es'
|
||||||
|
import { routeContextInjectKey } from './RouteContext'
|
||||||
|
import { HeaderView, headerViewProps } from './components/Header'
|
||||||
|
|
||||||
|
export const basicLayoutProps = {
|
||||||
|
...defaultSettingProps,
|
||||||
|
...siderMenuProps,
|
||||||
|
...headerViewProps,
|
||||||
|
|
||||||
|
breadcrumb: {
|
||||||
|
type: [Object, Function] as PropType<BreadcrumbProps>,
|
||||||
|
default: () => null
|
||||||
|
},
|
||||||
|
breadcrumbRender: {
|
||||||
|
type: [Object, Function, Boolean] as PropType<BreadcrumbRender>,
|
||||||
|
default() {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
contentStyle: {
|
||||||
|
type: [String, Object] as PropType<CSSProperties>,
|
||||||
|
default: () => {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pure: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export type BasicLayoutProps = Partial<ExtractPropTypes<typeof basicLayoutProps>>;
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'ProLayout',
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: basicLayoutProps,
|
||||||
|
emits: [
|
||||||
|
'update:collapsed',
|
||||||
|
'update:open-keys',
|
||||||
|
'update:selected-keys',
|
||||||
|
'collapse',
|
||||||
|
'openKeys',
|
||||||
|
'select',
|
||||||
|
'menuHeaderClick',
|
||||||
|
'menuClick'
|
||||||
|
],
|
||||||
|
setup(props, { emit, attrs, slots }) {
|
||||||
|
const siderWidth = computed(() => (props.collapsed ? props.collapsedWidth : props.siderWidth))
|
||||||
|
|
||||||
|
const onCollapse = (collapsed: boolean) => {
|
||||||
|
emit('update:collapsed', collapsed)
|
||||||
|
emit('collapse', collapsed)
|
||||||
|
}
|
||||||
|
const onOpenKeys = (openKeys: string[] | false) => {
|
||||||
|
emit('update:open-keys', openKeys)
|
||||||
|
emit('openKeys', openKeys)
|
||||||
|
}
|
||||||
|
const onSelect = (selectedKeys: string[] | false) => {
|
||||||
|
emit('update:selected-keys', selectedKeys)
|
||||||
|
emit('select', selectedKeys)
|
||||||
|
}
|
||||||
|
const onMenuHeaderClick = (e: MouseEvent) => {
|
||||||
|
emit('menuHeaderClick', e)
|
||||||
|
}
|
||||||
|
const onMenuClick = (args: any) => {
|
||||||
|
emit('menuClick', args)
|
||||||
|
}
|
||||||
|
const headerRender = (
|
||||||
|
p: BasicLayoutProps & {
|
||||||
|
hasSiderMenu: boolean;
|
||||||
|
headerRender: HeaderRender;
|
||||||
|
rightContentRender: RightContentRender;
|
||||||
|
},
|
||||||
|
matchMenuKeys?: string[]
|
||||||
|
): CustomRender | null => {
|
||||||
|
if (p.headerRender === false) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
return <HeaderView {...p} />
|
||||||
|
}
|
||||||
|
|
||||||
|
const breadcrumb = computed<BreadcrumbProps>(() => ({
|
||||||
|
...props.breadcrumb,
|
||||||
|
itemRender: getSlot<BreadcrumbRender>(slots, props, 'breadcrumbRender') as BreadcrumbRender
|
||||||
|
}))
|
||||||
|
|
||||||
|
const flatMenuData = computed(
|
||||||
|
() => (props.selectedKeys && getMenuFirstChildren(props.menuData, props.selectedKeys[0])) || [])
|
||||||
|
|
||||||
|
const routeContext = reactive<RouteContextProps>({
|
||||||
|
...(pick(toRefs(props), [
|
||||||
|
'menuData',
|
||||||
|
'openKeys',
|
||||||
|
'selectedKeys',
|
||||||
|
'contentWidth',
|
||||||
|
'headerHeight'
|
||||||
|
]) as any),
|
||||||
|
siderWidth,
|
||||||
|
breadcrumb,
|
||||||
|
flatMenuData
|
||||||
|
})
|
||||||
|
|
||||||
|
provide(routeContextInjectKey, routeContext)
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
const {
|
||||||
|
pure,
|
||||||
|
onCollapse: propsOnCollapse,
|
||||||
|
onOpenKeys: propsOnOpenKeys,
|
||||||
|
onSelect: propsOnSelect,
|
||||||
|
onMenuClick: propsOnMenuClick,
|
||||||
|
...restProps
|
||||||
|
} = props
|
||||||
|
|
||||||
|
const collapsedButtonRender = getSlot<CollapsedButtonRender>(slots, props, 'collapsedButtonRender')
|
||||||
|
const rightContentRender = getSlot<RightContentRender>(slots, props, 'rightContentRender')
|
||||||
|
const customHeaderRender = getSlot<HeaderRender>(slots, props, 'headerRender')
|
||||||
|
|
||||||
|
// menu
|
||||||
|
const menuHeaderRender = getSlot<MenuHeaderRender>(slots, props, 'menuHeaderRender')
|
||||||
|
const menuExtraRender = getSlot<MenuExtraRender>(slots, props, 'menuExtraRender')
|
||||||
|
const menuContentRender = getSlot<MenuContentRender>(slots, props, 'menuContentRender')
|
||||||
|
const menuItemRender = getSlot<MenuItemRender>(slots, props, 'menuItemRender')
|
||||||
|
const subMenuItemRender = getSlot<SubMenuItemRender>(slots, props, 'subMenuItemRender')
|
||||||
|
|
||||||
|
const headerDom = computed(() =>
|
||||||
|
headerRender(
|
||||||
|
{
|
||||||
|
...props,
|
||||||
|
hasSiderMenu: true,
|
||||||
|
menuItemRender,
|
||||||
|
subMenuItemRender,
|
||||||
|
menuData: props.menuData,
|
||||||
|
onCollapse,
|
||||||
|
onOpenKeys,
|
||||||
|
onSelect,
|
||||||
|
onMenuHeaderClick,
|
||||||
|
rightContentRender,
|
||||||
|
collapsedButtonRender,
|
||||||
|
menuExtraRender,
|
||||||
|
menuContentRender,
|
||||||
|
headerRender: customHeaderRender,
|
||||||
|
theme: props.navTheme
|
||||||
|
},
|
||||||
|
[]
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{
|
||||||
|
pure ? (
|
||||||
|
slots.default?.()
|
||||||
|
) : (
|
||||||
|
<Layout
|
||||||
|
class={'pro-layout'}
|
||||||
|
style={{
|
||||||
|
minHeight: '100vh'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SiderMenuWrapper
|
||||||
|
{...restProps}
|
||||||
|
theme={props.navTheme}
|
||||||
|
menuHeaderRender={menuHeaderRender}
|
||||||
|
menuExtraRender={menuExtraRender}
|
||||||
|
menuContentRender={menuContentRender}
|
||||||
|
menuItemRender={menuItemRender}
|
||||||
|
subMenuItemRender={subMenuItemRender}
|
||||||
|
collapsedButtonRender={collapsedButtonRender}
|
||||||
|
onCollapse={onCollapse}
|
||||||
|
onSelect={onSelect}
|
||||||
|
onOpenKeys={onOpenKeys}
|
||||||
|
onMenuClick={onMenuClick}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Layout>
|
||||||
|
{headerDom.value}
|
||||||
|
<Layout>
|
||||||
|
{slots.default?.()}
|
||||||
|
</Layout>
|
||||||
|
</Layout>
|
||||||
|
</Layout>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
<template>
|
||||||
|
<ProLayout
|
||||||
|
v-bind='layoutConf'
|
||||||
|
v-model:openKeys="state.openKeys"
|
||||||
|
v-model:collapsed="state.collapsed"
|
||||||
|
v-model:selectedKeys="state.selectedKeys"
|
||||||
|
:pure='state.pure'
|
||||||
|
:breadcrumb='{ routes: breadcrumb }'
|
||||||
|
>
|
||||||
|
<template #breadcrumbRender='slotProps'>
|
||||||
|
<a v-if='slotProps.route.index !== 0'>{{slotProps.route.breadcrumbName}}</a>
|
||||||
|
<span v-else>{{slotProps.route.breadcrumbName}}</span>
|
||||||
|
</template>
|
||||||
|
<router-view v-slot='{ Component}'>
|
||||||
|
<component :is='Component' />
|
||||||
|
</router-view>
|
||||||
|
</ProLayout>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name='BasicLayoutPage'>
|
||||||
|
import { ProLayout } from '@/components/Layout'
|
||||||
|
import DefaultSetting from '../../../config/config'
|
||||||
|
import { useMenuStore } from '@/store/menu'
|
||||||
|
|
||||||
|
type StateType = {
|
||||||
|
collapsed: boolean
|
||||||
|
openKeys: string[]
|
||||||
|
selectedKeys: string[]
|
||||||
|
pure: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
const menu = useMenuStore()
|
||||||
|
|
||||||
|
const layoutConf = reactive({
|
||||||
|
navTheme: DefaultSetting.layout.theme,
|
||||||
|
siderWidth: DefaultSetting.layout.siderWidth,
|
||||||
|
logo: DefaultSetting.layout.logo,
|
||||||
|
title: DefaultSetting.layout.title,
|
||||||
|
menuData: menu.menus,
|
||||||
|
});
|
||||||
|
|
||||||
|
const state = reactive<StateType>({
|
||||||
|
pure: false,
|
||||||
|
collapsed: false, // default value
|
||||||
|
openKeys: [],
|
||||||
|
selectedKeys: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
const breadcrumb = computed(() =>
|
||||||
|
router.currentRoute.value.matched.concat().map((item, index) => {
|
||||||
|
return {
|
||||||
|
index,
|
||||||
|
path: item.path,
|
||||||
|
breadcrumbName: item.meta.title || ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
if (router.currentRoute) {
|
||||||
|
const matched = router.currentRoute.value.matched.concat()
|
||||||
|
state.selectedKeys = matched.map(r => r.path)
|
||||||
|
state.openKeys = matched.filter((r) => r.path !== router.currentRoute.value.path).map(r => r.path)
|
||||||
|
console.log(state.selectedKeys)
|
||||||
|
}
|
||||||
|
// TODO 获取当前路由中参数，用于控制pure
|
||||||
|
})
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
if (route.query && 'layout' in route.query && route.query.layout === 'false') {
|
||||||
|
state.pure = true
|
||||||
|
} else {
|
||||||
|
state.pure = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<router-view />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'BlankLayoutPage'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
import type { ComputedRef, VNodeChild, InjectionKey } from 'vue'
|
||||||
|
import type { PureSettings } from 'components/Layout/defaultSetting'
|
||||||
|
import type { MenuDataItem } from 'components/Layout/typings'
|
||||||
|
import { useContext } from 'components/Layout/hooks/context'
|
||||||
|
|
||||||
|
export interface Route {
|
||||||
|
path: string;
|
||||||
|
breadcrumbName: string;
|
||||||
|
children?: Omit<Route, 'children'>[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface BreadcrumbProps {
|
||||||
|
prefixCls?: string;
|
||||||
|
routes?: Route[];
|
||||||
|
params?: any;
|
||||||
|
separator?: VNodeChild;
|
||||||
|
itemRender?: (opts: { route: Route; params: any; routes: Array<Route>; paths: Array<string> }) => VNodeChild;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type BreadcrumbListReturn = Pick<BreadcrumbProps, Extract<keyof BreadcrumbProps, 'routes' | 'itemRender'>>;
|
||||||
|
|
||||||
|
export interface MenuState {
|
||||||
|
selectedKeys: string[];
|
||||||
|
openKeys: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RouteContextProps extends Partial<PureSettings>, MenuState {
|
||||||
|
menuData: MenuDataItem[];
|
||||||
|
flatMenuData?: MenuDataItem[];
|
||||||
|
|
||||||
|
getPrefixCls?: (suffixCls?: string, customizePrefixCls?: string) => string;
|
||||||
|
breadcrumb?: BreadcrumbListReturn | ComputedRef<BreadcrumbListReturn>;
|
||||||
|
collapsed?: boolean;
|
||||||
|
hasSideMenu?: boolean;
|
||||||
|
siderWidth?: number;
|
||||||
|
headerHeight?: number;
|
||||||
|
/* 附加属性 */
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const routeContextInjectKey: InjectionKey<RouteContextProps> = Symbol('route-context');
|
||||||
|
|
||||||
|
export const useRouteContext = () =>
|
||||||
|
useContext<Required<RouteContextProps>>(routeContextInjectKey, {});
|
||||||
|
|
||||||
|
|
@ -0,0 +1,128 @@
|
||||||
|
import type { ExtractPropTypes, FunctionalComponent } from 'vue'
|
||||||
|
import { defineComponent, PropType } from 'vue'
|
||||||
|
import { defaultRenderLogo, siderMenuProps } from 'components/Layout/components/SiderMenu/SiderMenu'
|
||||||
|
import BaseMenu from '../SiderMenu/BaseMenu'
|
||||||
|
import { useRouteContext } from 'components/Layout/RouteContext'
|
||||||
|
import { default as ResizeObserver } from 'ant-design-vue/es/vc-resize-observer';
|
||||||
|
import { defaultSettingProps } from 'components/Layout/defaultSetting'
|
||||||
|
import PropTypes from 'ant-design-vue/es/_util/vue-types'
|
||||||
|
import { CustomRender, MenuDataItem, ProProps, RightContentRender, WithFalse } from 'components/Layout/typings'
|
||||||
|
import './index.less'
|
||||||
|
import { omit } from 'lodash-es'
|
||||||
|
import { RouteRecordRaw } from 'vue-router'
|
||||||
|
import { clearMenuItem } from 'components/Layout/utils'
|
||||||
|
|
||||||
|
export const headerProps = {
|
||||||
|
...defaultSettingProps,
|
||||||
|
collapsed: PropTypes.looseBool,
|
||||||
|
menuData: {
|
||||||
|
type: Array as PropType<MenuDataItem[]>,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
logo: siderMenuProps.logo,
|
||||||
|
logoStyle: siderMenuProps.logoStyle,
|
||||||
|
menuRender: {
|
||||||
|
type: [Object, Function] as PropType<
|
||||||
|
WithFalse<(props: ProProps, defaultDom: CustomRender) => CustomRender>
|
||||||
|
>,
|
||||||
|
default: () => undefined,
|
||||||
|
},
|
||||||
|
menuItemRender: siderMenuProps.menuItemRender,
|
||||||
|
subMenuItemRender: siderMenuProps.subMenuItemRender,
|
||||||
|
rightContentRender: {
|
||||||
|
type: [Object, Function] as PropType<RightContentRender>,
|
||||||
|
default: () => undefined,
|
||||||
|
},
|
||||||
|
siderWidth: PropTypes.number.def(208),
|
||||||
|
// events
|
||||||
|
onMenuHeaderClick: PropTypes.func,
|
||||||
|
onCollapse: siderMenuProps.onCollapse,
|
||||||
|
onOpenKeys: siderMenuProps.onOpenKeys,
|
||||||
|
onSelect: siderMenuProps.onSelect,
|
||||||
|
}
|
||||||
|
|
||||||
|
export type HeaderProps = ExtractPropTypes<typeof headerProps>;
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'Header',
|
||||||
|
emits: [
|
||||||
|
'menuHeaderClick', 'collapse', 'openKeys', 'select'
|
||||||
|
],
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: headerProps,
|
||||||
|
setup(props, { slots, emit}) {
|
||||||
|
|
||||||
|
const {
|
||||||
|
onSelect,
|
||||||
|
onMenuHeaderClick,
|
||||||
|
onOpenKeys,
|
||||||
|
logo,
|
||||||
|
logoStyle,
|
||||||
|
menuData,
|
||||||
|
navTheme,
|
||||||
|
contentWidth,
|
||||||
|
title,
|
||||||
|
rightContentRender
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const rightSize = ref<number | string>('auto')
|
||||||
|
|
||||||
|
const context = useRouteContext();
|
||||||
|
|
||||||
|
const noChildrenMenuData = (menuData || []).map((item) => ({
|
||||||
|
...item,
|
||||||
|
children: undefined,
|
||||||
|
})) as RouteRecordRaw[];
|
||||||
|
|
||||||
|
const clearMenuData = clearMenuItem(noChildrenMenuData);
|
||||||
|
|
||||||
|
return () => (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
class={`header-content ${navTheme}`}
|
||||||
|
>
|
||||||
|
<div class={`header-main ${contentWidth === 'Fixed' ? 'wide' : ''}`}>
|
||||||
|
<div class={'header-main-left'} onClick={onMenuHeaderClick}>
|
||||||
|
<div class={'header-logo'}>
|
||||||
|
<a>
|
||||||
|
{defaultRenderLogo(logo, logoStyle)}
|
||||||
|
<h1 title={title}>{ title }</h1>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ flex: 1 }} class={'header-menu'}>
|
||||||
|
<BaseMenu
|
||||||
|
theme={props.navTheme === 'realDark' ? 'dark' : props.navTheme}
|
||||||
|
menuData={clearMenuData}
|
||||||
|
mode={'horizontal'}
|
||||||
|
menuItemRender={props.menuItemRender}
|
||||||
|
subMenuItemRender={props.subMenuItemRender}
|
||||||
|
openKeys={context.openKeys}
|
||||||
|
selectedKeys={context.selectedKeys}
|
||||||
|
{...{
|
||||||
|
'onUpdate:openKeys': ($event: string[]) => onOpenKeys && onOpenKeys($event),
|
||||||
|
'onUpdate:selectedKeys': ($event: string[]) => onSelect && onSelect($event),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class={'header-right'} style={{ minWidth: rightSize.value }}>
|
||||||
|
<div>
|
||||||
|
<ResizeObserver
|
||||||
|
onResize={({ width }: { width: number}) => {
|
||||||
|
rightSize.value = width
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{
|
||||||
|
rightContentRender && typeof rightContentRender === 'function' ? (
|
||||||
|
<div>{rightContentRender({...props})}</div>
|
||||||
|
) : rightContentRender
|
||||||
|
}
|
||||||
|
</ResizeObserver>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
.header-content {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-shadow: 0 1px 4px 0 rgb(0 21 41 / 12%);
|
||||||
|
transition: background .3s,width .2s;
|
||||||
|
|
||||||
|
&.light {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.dark {
|
||||||
|
.header-logo {
|
||||||
|
>a {
|
||||||
|
> h1 {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-main {
|
||||||
|
padding-left: 16px;
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.header-main-left {
|
||||||
|
display: flex;
|
||||||
|
min-width: 192px;
|
||||||
|
|
||||||
|
.header-logo {
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
min-width: 165px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
> a {
|
||||||
|
color: @primary-color;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: transparent;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color .3s;
|
||||||
|
|
||||||
|
> h1 {
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 0 0 12px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: rgba(0,0,0,.85);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: inline-block;
|
||||||
|
height: 32px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
import type { ExtractPropTypes, PropType } from 'vue'
|
||||||
|
import PropTypes from 'ant-design-vue/es/_util/vue-types';
|
||||||
|
import type { MenuDataItem, WithFalse, ProProps, CustomRender, RightContentRender } from '../../typings'
|
||||||
|
import { siderMenuProps } from '../SiderMenu/SiderMenu'
|
||||||
|
import { defaultSettingProps } from 'components/Layout/defaultSetting'
|
||||||
|
import Header, { headerProps } from './Header'
|
||||||
|
import { useRouteContext } from 'components/Layout/RouteContext'
|
||||||
|
import type { RouteRecordRaw } from 'vue-router'
|
||||||
|
import { clearMenuItem } from 'components/Layout/utils'
|
||||||
|
import DefaultSetting from '../../../../../config/config'
|
||||||
|
import { Layout } from 'ant-design-vue'
|
||||||
|
|
||||||
|
export const headerViewProps = {
|
||||||
|
...headerProps
|
||||||
|
}
|
||||||
|
|
||||||
|
export type HeaderViewProps = Partial<ExtractPropTypes<typeof headerViewProps>>;
|
||||||
|
|
||||||
|
export const HeaderView = defineComponent({
|
||||||
|
name: 'HeaderView',
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: headerViewProps,
|
||||||
|
setup(props) {
|
||||||
|
const { headerHeight, onCollapse } = toRefs(props);
|
||||||
|
|
||||||
|
const context = useRouteContext();
|
||||||
|
|
||||||
|
const clearMenuData = computed(
|
||||||
|
() => (context.menuData && clearMenuItem(context.menuData as RouteRecordRaw[])) || []
|
||||||
|
);
|
||||||
|
|
||||||
|
return () => (
|
||||||
|
<>
|
||||||
|
<Layout.Header
|
||||||
|
style={{
|
||||||
|
padding: 0,
|
||||||
|
height: `${headerHeight.value}px`,
|
||||||
|
lineHeight: `${headerHeight.value}px`,
|
||||||
|
width: `100%`,
|
||||||
|
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Layout.Header
|
||||||
|
style={{
|
||||||
|
padding: 0,
|
||||||
|
height: `${headerHeight.value}px`,
|
||||||
|
lineHeight: `${headerHeight.value}px`,
|
||||||
|
width: `100%`,
|
||||||
|
zIndex: 19,
|
||||||
|
position: 'fixed',
|
||||||
|
top: 0,
|
||||||
|
right: 0
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Header
|
||||||
|
{...props}
|
||||||
|
onCollapse={onCollapse.value}
|
||||||
|
menuData={clearMenuData.value}
|
||||||
|
/>
|
||||||
|
</Layout.Header>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
.page-container {
|
||||||
|
min-height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.page-container-grid-content {
|
||||||
|
padding: 24px;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
> div, .page-container-children-content, .page-container-full-height {
|
||||||
|
min-height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.children-full-height {
|
||||||
|
> :nth-child(1) {
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,248 @@
|
||||||
|
import { TabPaneProps } from 'ant-design-vue'
|
||||||
|
import type { ExtractPropTypes, FunctionalComponent, PropType, VNodeChild } from 'vue'
|
||||||
|
import { pageHeaderProps } from 'ant-design-vue/es/page-header';
|
||||||
|
import type { DefaultPropRender, PageHeaderRender } from 'components/Layout/typings'
|
||||||
|
import type { AffixProps, TabBarExtraContent } from 'components/Layout/components/PageContainer/types'
|
||||||
|
import { useRouteContext } from 'components/Layout/RouteContext'
|
||||||
|
import { getSlotVNode } from '@/utils/comm'
|
||||||
|
import { Affix, Spin, PageHeader, Tabs } from 'ant-design-vue';
|
||||||
|
import './index.less'
|
||||||
|
|
||||||
|
export const pageHeaderTabConfig = {
|
||||||
|
/**
|
||||||
|
* @name tabs 的列表
|
||||||
|
*/
|
||||||
|
tabList: {
|
||||||
|
type: [Object, Function, Array] as PropType<(Omit<TabPaneProps, 'id'> & { key?: string })[]>,
|
||||||
|
default: () => undefined,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @name 当前选中 tab 的 key
|
||||||
|
*/
|
||||||
|
tabActiveKey: String, //PropTypes.string,
|
||||||
|
/**
|
||||||
|
* @name tab 上多余的区域
|
||||||
|
*/
|
||||||
|
tabBarExtraContent: {
|
||||||
|
type: [Object, Function] as PropType<TabBarExtraContent>,
|
||||||
|
default: () => undefined,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @name tabs 的其他配置
|
||||||
|
*/
|
||||||
|
tabProps: {
|
||||||
|
type: Object, //as PropType<TabsProps>,
|
||||||
|
default: () => undefined,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @name 固定 PageHeader 到页面顶部
|
||||||
|
*/
|
||||||
|
fixedHeader: Boolean, //PropTypes.looseBool,
|
||||||
|
// events
|
||||||
|
onTabChange: Function, //PropTypes.func,
|
||||||
|
};
|
||||||
|
export type PageHeaderTabConfig = Partial<ExtractPropTypes<typeof pageHeaderTabConfig>>;
|
||||||
|
|
||||||
|
|
||||||
|
export const pageContainerProps = {
|
||||||
|
...pageHeaderTabConfig,
|
||||||
|
...pageHeaderProps,
|
||||||
|
prefixCls: {
|
||||||
|
type: String,
|
||||||
|
default: 'ant-pro',
|
||||||
|
}, //PropTypes.string.def('ant-pro'),
|
||||||
|
title: {
|
||||||
|
type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
|
||||||
|
default: () => null,
|
||||||
|
},
|
||||||
|
subTitle: {
|
||||||
|
type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
|
||||||
|
default: () => null,
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
|
||||||
|
default: () => null,
|
||||||
|
},
|
||||||
|
extra: {
|
||||||
|
type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
|
||||||
|
default: () => null,
|
||||||
|
},
|
||||||
|
extraContent: {
|
||||||
|
type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
|
||||||
|
default: () => null,
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
|
||||||
|
default: () => null,
|
||||||
|
},
|
||||||
|
pageHeaderRender: {
|
||||||
|
type: [Object, Function, Boolean] as PropType<PageHeaderRender>,
|
||||||
|
default: () => undefined,
|
||||||
|
},
|
||||||
|
affixProps: {
|
||||||
|
type: [Object, Function] as PropType<AffixProps>,
|
||||||
|
},
|
||||||
|
ghost: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => false,
|
||||||
|
}, //PropTypes.looseBool,
|
||||||
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => undefined,
|
||||||
|
}, //PropTypes.looseBool,
|
||||||
|
childrenFullHeight: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => true,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export type PageContainerProps = Partial<ExtractPropTypes<typeof pageContainerProps>>;
|
||||||
|
|
||||||
|
const renderFooter = (
|
||||||
|
props: Omit< PageContainerProps, 'title' >
|
||||||
|
): VNodeChild | JSX.Element => {
|
||||||
|
const { tabList, tabActiveKey, onTabChange, tabBarExtraContent, tabProps } = props;
|
||||||
|
if (tabList && tabList.length) {
|
||||||
|
return (
|
||||||
|
<Tabs
|
||||||
|
class={`page-container-tabs`}
|
||||||
|
activeKey={tabActiveKey}
|
||||||
|
onChange={(key: string | number) => {
|
||||||
|
if (onTabChange) {
|
||||||
|
onTabChange(key);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
tabBarExtraContent={tabBarExtraContent}
|
||||||
|
{...tabProps}
|
||||||
|
>
|
||||||
|
{tabList.map((item) => (
|
||||||
|
<Tabs.TabPane {...item} tab={item.tab} key={item.key} />
|
||||||
|
))}
|
||||||
|
</Tabs>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ProPageHeader: FunctionalComponent<PageContainerProps> = (props) => {
|
||||||
|
const {
|
||||||
|
title,
|
||||||
|
tabList,
|
||||||
|
tabActiveKey,
|
||||||
|
content,
|
||||||
|
pageHeaderRender,
|
||||||
|
header,
|
||||||
|
extraContent,
|
||||||
|
prefixCls,
|
||||||
|
fixedHeader: _,
|
||||||
|
...restProps
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const value = useRouteContext()
|
||||||
|
|
||||||
|
if (pageHeaderRender === false) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (pageHeaderRender) {
|
||||||
|
return pageHeaderRender({ ...props });
|
||||||
|
}
|
||||||
|
let pageHeaderTitle = title;
|
||||||
|
if (!title && title !== false) {
|
||||||
|
pageHeaderTitle = value.title;
|
||||||
|
}
|
||||||
|
|
||||||
|
const unrefBreadcrumb = unref(value.breadcrumb || {});
|
||||||
|
const breadcrumb = (props as any).breadcrumb || {
|
||||||
|
...unrefBreadcrumb,
|
||||||
|
routes: unrefBreadcrumb.routes,
|
||||||
|
itemRender: unrefBreadcrumb.itemRender,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class={`page-container-wrap`}>
|
||||||
|
<PageHeader
|
||||||
|
{...restProps}
|
||||||
|
// {...value}
|
||||||
|
title={pageHeaderTitle}
|
||||||
|
breadcrumb={breadcrumb}
|
||||||
|
footer={renderFooter({
|
||||||
|
...restProps,
|
||||||
|
tabList,
|
||||||
|
tabActiveKey
|
||||||
|
})}
|
||||||
|
prefixCls={prefixCls}
|
||||||
|
>
|
||||||
|
{/*{header || renderPageHeader(content, extraContent)}*/}
|
||||||
|
{ header }
|
||||||
|
</PageHeader>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const PageContainer = defineComponent({
|
||||||
|
name: 'PageContainer',
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: pageContainerProps,
|
||||||
|
setup(props, { slots }) {
|
||||||
|
const { loading, affixProps, ghost, childrenFullHeight } = toRefs(props);
|
||||||
|
|
||||||
|
const value = useRouteContext();
|
||||||
|
|
||||||
|
const headerDom = computed(() => {
|
||||||
|
// const tags = getSlotVNode<DefaultPropRender>(slots, props, 'tags');
|
||||||
|
const headerContent = getSlotVNode<DefaultPropRender>(slots, props, 'content');
|
||||||
|
const extra = getSlotVNode<DefaultPropRender>(slots, props, 'extra');
|
||||||
|
const extraContent = getSlotVNode<DefaultPropRender>(slots, props, 'extraContent');
|
||||||
|
const subTitle = getSlotVNode<DefaultPropRender>(slots, props, 'subTitle');
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
return (
|
||||||
|
<ProPageHeader
|
||||||
|
{...props}
|
||||||
|
prefixCls={undefined}
|
||||||
|
ghost={ghost.value}
|
||||||
|
subTitle={subTitle}
|
||||||
|
content={headerContent}
|
||||||
|
// tags={tags}
|
||||||
|
extra={extra}
|
||||||
|
extraContent={extraContent}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
const { fixedHeader } = props;
|
||||||
|
return (
|
||||||
|
<div class={'page-container'}>
|
||||||
|
{fixedHeader && headerDom.value ? (
|
||||||
|
<Affix {...affixProps.value} offsetTop={value.hasHeader && value.fixedHeader ? value.headerHeight : 0}>
|
||||||
|
{headerDom.value}
|
||||||
|
</Affix>
|
||||||
|
) : (
|
||||||
|
headerDom.value
|
||||||
|
)}
|
||||||
|
<div class={'page-container-grid-content'}>
|
||||||
|
{loading.value ? (
|
||||||
|
<Spin />
|
||||||
|
) : slots.default ? (
|
||||||
|
<div>
|
||||||
|
<div class={`page-container-children-content ${childrenFullHeight.value ? 'children-full-height' : ''}`}>{slots.default()}</div>
|
||||||
|
{value.hasFooterToolbar && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: 48,
|
||||||
|
marginTop: 24,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default PageContainer
|
||||||
|
|
@ -0,0 +1,56 @@
|
||||||
|
import type { VNodeChild, CSSProperties, VNode } from 'vue';
|
||||||
|
|
||||||
|
export interface Tab {
|
||||||
|
key: string;
|
||||||
|
tab: string | VNode | JSX.Element;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type TabBarType = 'line' | 'card' | 'editable-card';
|
||||||
|
export type TabSize = 'default' | 'large' | 'small';
|
||||||
|
export type TabPosition = 'left' | 'right';
|
||||||
|
export type TabBarExtraPosition = TabPosition;
|
||||||
|
|
||||||
|
export type TabBarExtraMap = Partial<Record<TabBarExtraPosition, VNodeChild>>;
|
||||||
|
|
||||||
|
export type TabBarExtraContent = VNodeChild | TabBarExtraMap;
|
||||||
|
|
||||||
|
export interface TabsProps {
|
||||||
|
prefixCls?: string;
|
||||||
|
class?: string | string[];
|
||||||
|
style?: CSSProperties;
|
||||||
|
id?: string;
|
||||||
|
|
||||||
|
activeKey?: string;
|
||||||
|
hideAdd?: boolean;
|
||||||
|
// Unchangeable
|
||||||
|
// size?: TabSize;
|
||||||
|
tabBarStyle?: CSSProperties;
|
||||||
|
tabPosition?: TabPosition;
|
||||||
|
type?: TabBarType;
|
||||||
|
tabBarGutter?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AffixProps {
|
||||||
|
offsetBottom: number;
|
||||||
|
offsetTop: number;
|
||||||
|
target?: () => HTMLElement;
|
||||||
|
|
||||||
|
onChange?: (affixed: boolean) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TabPaneProps {
|
||||||
|
tab?: string | VNodeChild | JSX.Element;
|
||||||
|
class?: string | string[];
|
||||||
|
style?: CSSProperties;
|
||||||
|
disabled?: boolean;
|
||||||
|
forceRender?: boolean;
|
||||||
|
closable?: boolean;
|
||||||
|
closeIcon?: VNodeChild | JSX.Element;
|
||||||
|
|
||||||
|
prefixCls?: string;
|
||||||
|
tabKey?: string;
|
||||||
|
id: string;
|
||||||
|
animated?: boolean;
|
||||||
|
active?: boolean;
|
||||||
|
destroyInactiveTabPane?: boolean;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,217 @@
|
||||||
|
import { isVNode, defineComponent, getCurrentInstance, withCtx } from 'vue'
|
||||||
|
import type { FunctionalComponent, PropType, VNodeChild, ComponentInternalInstance, ConcreteComponent, ExtractPropTypes, VNode } from 'vue'
|
||||||
|
import type {
|
||||||
|
MenuDataItem,
|
||||||
|
WithFalse,
|
||||||
|
MenuItemRender,
|
||||||
|
LayoutType,
|
||||||
|
MenuTheme,
|
||||||
|
SubMenuItemRender,
|
||||||
|
MenuMode
|
||||||
|
} from '../../typings'
|
||||||
|
import type {
|
||||||
|
SelectEventHandler,
|
||||||
|
MenuClickEventHandler,
|
||||||
|
SelectInfo,
|
||||||
|
MenuInfo,
|
||||||
|
} from 'ant-design-vue/es/menu/src/interface';
|
||||||
|
import type { Key } from 'ant-design-vue/es/_util/type';
|
||||||
|
import IconFont from '@/components/AIcon'
|
||||||
|
import { Menu } from 'ant-design-vue';
|
||||||
|
import { isUrl } from '@/utils/regular'
|
||||||
|
|
||||||
|
export const baseMenuProps = {
|
||||||
|
mode: {
|
||||||
|
type: String as PropType<MenuMode>,
|
||||||
|
default: 'inline',
|
||||||
|
},
|
||||||
|
menuData: {
|
||||||
|
type: Array as PropType<MenuDataItem[]>,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
layout: {
|
||||||
|
type: String as PropType<LayoutType>,
|
||||||
|
default: 'side',
|
||||||
|
},
|
||||||
|
theme: {
|
||||||
|
type: String as PropType<MenuTheme | 'realDark'>,
|
||||||
|
default: 'dark',
|
||||||
|
},
|
||||||
|
collapsed: {
|
||||||
|
type: Boolean as PropType<boolean | undefined>,
|
||||||
|
default: () => false,
|
||||||
|
},
|
||||||
|
openKeys: {
|
||||||
|
type: Array as PropType<WithFalse<string[]>>,
|
||||||
|
default: () => undefined,
|
||||||
|
},
|
||||||
|
selectedKeys: {
|
||||||
|
type: Array as PropType<WithFalse<string[]>>,
|
||||||
|
default: () => undefined,
|
||||||
|
},
|
||||||
|
menuProps: {
|
||||||
|
type: Object as PropType<Record<string, any>>,
|
||||||
|
default: () => null,
|
||||||
|
},
|
||||||
|
menuItemRender: {
|
||||||
|
type: [Object, Function, Boolean] as PropType<MenuItemRender>,
|
||||||
|
default: () => undefined,
|
||||||
|
},
|
||||||
|
subMenuItemRender: {
|
||||||
|
type: [Object, Function, Boolean] as PropType<SubMenuItemRender>,
|
||||||
|
default: () => undefined,
|
||||||
|
},
|
||||||
|
onClick: [Function, Object] as PropType<(...args: any) => void>,
|
||||||
|
}
|
||||||
|
|
||||||
|
export type BaseMenuProps = ExtractPropTypes<typeof baseMenuProps>;
|
||||||
|
|
||||||
|
const LazyIcon: FunctionalComponent<{ icon: VNodeChild | string;}> = (props) => {
|
||||||
|
const {icon} = props
|
||||||
|
if (!icon) return null
|
||||||
|
if (typeof icon === 'string' && icon !== '') {
|
||||||
|
return <IconFont type={icon} />;
|
||||||
|
}
|
||||||
|
if (isVNode(icon)) {
|
||||||
|
return icon;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class MenuUtil {
|
||||||
|
props: BaseMenuProps;
|
||||||
|
ctx: ComponentInternalInstance | null;
|
||||||
|
RouterLink: ConcreteComponent;
|
||||||
|
|
||||||
|
constructor(props: BaseMenuProps, ctx: ComponentInternalInstance | null) {
|
||||||
|
this.props = props
|
||||||
|
this.ctx = ctx
|
||||||
|
this.RouterLink = resolveComponent('router-link') as ConcreteComponent
|
||||||
|
}
|
||||||
|
|
||||||
|
getNavMenuItems = (menusData: MenuDataItem[] = []) => {
|
||||||
|
return menusData.map((item) => this.getSubMenuOrItem(item)).filter((item) => item);
|
||||||
|
};
|
||||||
|
|
||||||
|
getSubMenuOrItem = (item: MenuDataItem): VNode => {
|
||||||
|
if (
|
||||||
|
Array.isArray(item.children) &&
|
||||||
|
item.children.length > 0 &&
|
||||||
|
!item?.meta?.hideInMenu &&
|
||||||
|
!item?.meta?.hideChildrenInMenu
|
||||||
|
) {
|
||||||
|
if (this.props.subMenuItemRender) {
|
||||||
|
const subMenuItemRender = withCtx(this.props.subMenuItemRender, this.ctx);
|
||||||
|
return subMenuItemRender({
|
||||||
|
item,
|
||||||
|
children: this.getNavMenuItems(item.children),
|
||||||
|
}) as VNode;
|
||||||
|
}
|
||||||
|
const menuTitle = item.meta?.title
|
||||||
|
|
||||||
|
|
||||||
|
const defaultTitle = item.meta?.icon ? (
|
||||||
|
<span class={`header-menu-item`}>
|
||||||
|
<span class={`header-menu-item-title`}>{menuTitle}</span>
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span class={`header-menu-item`}>{menuTitle}</span>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Menu.SubMenu
|
||||||
|
title={defaultTitle}
|
||||||
|
key={item.path}
|
||||||
|
icon={<LazyIcon icon={item.meta?.icon} />}
|
||||||
|
>
|
||||||
|
{this.getNavMenuItems(item.children)}
|
||||||
|
</Menu.SubMenu>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const menuItemRender = this.props.menuItemRender && withCtx(this.props.menuItemRender, this.ctx);
|
||||||
|
|
||||||
|
const [title, icon] = this.getMenuItem(item);
|
||||||
|
|
||||||
|
return (
|
||||||
|
(menuItemRender && (menuItemRender({ item, title, icon }) as VNode)) || (
|
||||||
|
<Menu.Item disabled={item.meta?.disabled} danger={item.meta?.danger} key={item.path}>
|
||||||
|
{title}
|
||||||
|
</Menu.Item>
|
||||||
|
)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
getMenuItem = (item: MenuDataItem) => {
|
||||||
|
const meta = { ...item.meta };
|
||||||
|
const target = (meta.target || null) as string | null;
|
||||||
|
const hasUrl = isUrl(item.path);
|
||||||
|
const CustomTag: any = (target && 'a') || this.RouterLink;
|
||||||
|
const props = { to: { path: item.path, ...item.meta } };
|
||||||
|
const attrs = hasUrl || target ? { ...item.meta, href: item.path, target } : {};
|
||||||
|
|
||||||
|
const icon = (item.meta?.icon && <LazyIcon icon={item.meta.icon} />) || undefined;
|
||||||
|
const menuTitle = item.meta?.title;
|
||||||
|
const defaultTitle = item.meta?.icon ? (
|
||||||
|
<CustomTag {...attrs} {...props} class={`header-menu-item`}>
|
||||||
|
{icon}
|
||||||
|
<span class={`header-menu-item-title`}>{menuTitle}</span>
|
||||||
|
</CustomTag>
|
||||||
|
) : (
|
||||||
|
<CustomTag {...attrs} {...props} class={`header-menu-item`}>
|
||||||
|
<span>{menuTitle}</span>
|
||||||
|
</CustomTag>
|
||||||
|
);
|
||||||
|
|
||||||
|
return [defaultTitle, icon];
|
||||||
|
}
|
||||||
|
|
||||||
|
conversionPath = (path: string) => {
|
||||||
|
if (path && path.indexOf('http') === 0) {
|
||||||
|
return path;
|
||||||
|
}
|
||||||
|
return `/${path || ''}`.replace(/\/+/g, '/');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'BaseMenu',
|
||||||
|
props: baseMenuProps,
|
||||||
|
emits: ['update:openKeys', 'update:selectedKeys', 'click'],
|
||||||
|
setup(props, { emit }) {
|
||||||
|
const ctx = getCurrentInstance()
|
||||||
|
|
||||||
|
const menuUtil = new MenuUtil(props, ctx);
|
||||||
|
|
||||||
|
const handleOpenChange = (openKeys: Key[]): void => {
|
||||||
|
emit('update:openKeys', openKeys);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSelect: SelectEventHandler = (args: SelectInfo): void => {
|
||||||
|
// ignore https? link handle selectkeys
|
||||||
|
if (isUrl(args.key as string)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
emit('update:selectedKeys', args.selectedKeys);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClick: MenuClickEventHandler = (args: MenuInfo) => {
|
||||||
|
emit('click', args);
|
||||||
|
};
|
||||||
|
|
||||||
|
return () => (
|
||||||
|
<Menu
|
||||||
|
{...props}
|
||||||
|
key='Menu'
|
||||||
|
inlineIndent={16}
|
||||||
|
theme={props.theme as 'dark' | 'light'}
|
||||||
|
openKeys={props.openKeys === false ? [] : props.openKeys}
|
||||||
|
selectedKeys={props.selectedKeys || []}
|
||||||
|
onOpenChange={handleOpenChange}
|
||||||
|
onSelect={handleSelect}
|
||||||
|
onClick={handleClick}
|
||||||
|
>
|
||||||
|
{menuUtil.getNavMenuItems(props.menuData)}
|
||||||
|
</Menu>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
.pro-layout-sider {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 100;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
|
||||||
|
|
||||||
|
.ant-layout-sider-children {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,192 @@
|
||||||
|
import { Layout, Menu } from 'ant-design-vue';
|
||||||
|
import type { CSSProperties, ExtractPropTypes, FunctionalComponent, PropType } from 'vue'
|
||||||
|
import type {
|
||||||
|
LogoRender,
|
||||||
|
MenuHeaderRender,
|
||||||
|
MenuExtraRender,
|
||||||
|
MenuContentRender,
|
||||||
|
CollapsedButtonRender,
|
||||||
|
WithFalse,
|
||||||
|
CustomRender
|
||||||
|
} from '../../typings'
|
||||||
|
import PropTypes from 'ant-design-vue/es/_util/vue-types';
|
||||||
|
import { baseMenuProps } from 'components/Layout/components/SiderMenu/BaseMenu'
|
||||||
|
import AIcon from '@/components/AIcon'
|
||||||
|
import { useRouteContext } from 'components/Layout/RouteContext'
|
||||||
|
import BaseMenu from './BaseMenu'
|
||||||
|
import './SiderMenu.less'
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import { omit } from 'lodash-es'
|
||||||
|
|
||||||
|
export type PrivateSiderMenuProps = {
|
||||||
|
matchMenuKeys?: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const { Sider } = Layout
|
||||||
|
|
||||||
|
export const defaultRenderLogo = (logo?: CustomRender, logoStyle?: CSSProperties): CustomRender => {
|
||||||
|
if (!logo) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (typeof logo === 'string') {
|
||||||
|
return <img src={logo} alt="logo" style={logoStyle} />;
|
||||||
|
}
|
||||||
|
if (typeof logo === 'function') {
|
||||||
|
// @ts-ignore
|
||||||
|
return logo();
|
||||||
|
}
|
||||||
|
return logo;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const siderMenuProps = {
|
||||||
|
...baseMenuProps,
|
||||||
|
logo: {
|
||||||
|
type: [Object, String, Function] as PropType<LogoRender>,
|
||||||
|
default: () => '',
|
||||||
|
},
|
||||||
|
logoStyle: {
|
||||||
|
type: Object as PropType<CSSProperties>,
|
||||||
|
default: () => undefined,
|
||||||
|
},
|
||||||
|
siderWidth: PropTypes.number.def(208),
|
||||||
|
headerHeight: PropTypes.number.def(48),
|
||||||
|
collapsedWidth: PropTypes.number.def(48),
|
||||||
|
menuHeaderRender: {
|
||||||
|
type: [Function, Object, Boolean] as PropType<MenuHeaderRender>,
|
||||||
|
default: () => undefined,
|
||||||
|
},
|
||||||
|
menuContentRender: {
|
||||||
|
type: [Function, Object, Boolean] as PropType<MenuContentRender>,
|
||||||
|
default: () => undefined,
|
||||||
|
},
|
||||||
|
menuExtraRender: {
|
||||||
|
type: [Function, Object, Boolean] as PropType<MenuExtraRender>,
|
||||||
|
default: () => undefined,
|
||||||
|
},
|
||||||
|
collapsedButtonRender: {
|
||||||
|
type: [Function, Object, Boolean] as PropType<CollapsedButtonRender>,
|
||||||
|
default: () => undefined,
|
||||||
|
},
|
||||||
|
onMenuHeaderClick: PropTypes.func,
|
||||||
|
onMenuClick: PropTypes.func,
|
||||||
|
onCollapse: {
|
||||||
|
type: Function as PropType<(collapsed: boolean) => void>,
|
||||||
|
},
|
||||||
|
onOpenKeys: {
|
||||||
|
type: Function as PropType<(openKeys: WithFalse<string[]>) => void>,
|
||||||
|
},
|
||||||
|
onSelect: {
|
||||||
|
type: Function as PropType<(selectedKeys: WithFalse<string[]>) => void>,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export type SiderMenuProps = Partial<ExtractPropTypes<typeof siderMenuProps>>;
|
||||||
|
|
||||||
|
export const defaultRenderCollapsedButton = (collapsed?: boolean): CustomRender =>
|
||||||
|
collapsed ? <AIcon type={'MenuUnfoldOutlined'} /> : <AIcon type={'MenuFoldOutlined'} />;
|
||||||
|
|
||||||
|
const SiderMenu: FunctionalComponent<SiderMenuProps> = (props, { slots, emit}) => {
|
||||||
|
const {
|
||||||
|
collapsed,
|
||||||
|
collapsedWidth = 48,
|
||||||
|
menuExtraRender = false,
|
||||||
|
menuContentRender = false,
|
||||||
|
collapsedButtonRender = defaultRenderCollapsedButton,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const context = useRouteContext();
|
||||||
|
const sSideWidth = computed(() => (props.collapsed ? props.collapsedWidth : props.siderWidth));
|
||||||
|
|
||||||
|
const extraDom = menuExtraRender && menuExtraRender(props);
|
||||||
|
|
||||||
|
const handleSelect = ($event: string[]) => {
|
||||||
|
if (props.onSelect) {
|
||||||
|
props.onSelect([context.selectedKeys[0], ...$event]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultMenuDom = (
|
||||||
|
<BaseMenu
|
||||||
|
theme={props.theme as 'dark' | 'light'}
|
||||||
|
mode="inline"
|
||||||
|
menuData={context.flatMenuData}
|
||||||
|
collapsed={props.collapsed}
|
||||||
|
openKeys={context.openKeys}
|
||||||
|
selectedKeys={context.selectedKeys}
|
||||||
|
menuItemRender={props.menuItemRender}
|
||||||
|
subMenuItemRender={props.subMenuItemRender}
|
||||||
|
onClick={props.onMenuClick}
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
}}
|
||||||
|
{...{
|
||||||
|
'onUpdate:openKeys': ($event: string[]) => props.onOpenKeys && props.onOpenKeys($event),
|
||||||
|
'onUpdate:selectedKeys': handleSelect,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
|
||||||
|
const Style = computed(() => {
|
||||||
|
return {
|
||||||
|
overflow: 'hidden',
|
||||||
|
height: '100vh',
|
||||||
|
zIndex: 18,
|
||||||
|
paddingTop: `${props.headerHeight}px`,
|
||||||
|
flex: `0 0 ${sSideWidth.value}px`,
|
||||||
|
minWidth: `${sSideWidth.value}px`,
|
||||||
|
maxWidth: `${sSideWidth.value}px`,
|
||||||
|
width: `${sSideWidth.value}px`,
|
||||||
|
transition: 'background-color 0.3s ease 0s, min-width 0.3s ease 0s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
style={Style.value}
|
||||||
|
></div>
|
||||||
|
<Sider
|
||||||
|
collapsible
|
||||||
|
trigger={null}
|
||||||
|
collapsed={collapsed}
|
||||||
|
onCollapse={(collapse: boolean) => {
|
||||||
|
props.onCollapse?.(collapse);
|
||||||
|
}}
|
||||||
|
collapsedWidth={collapsedWidth}
|
||||||
|
style={omit(Style.value, ['transition'])}
|
||||||
|
width={sSideWidth.value}
|
||||||
|
theme={props.theme as 'dark' | 'light'}
|
||||||
|
class={'pro-layout-sider'}
|
||||||
|
>
|
||||||
|
<div style="flex: 1; overflow: hidden auto;">
|
||||||
|
{(menuContentRender && menuContentRender(props, defaultMenuDom)) || defaultMenuDom}
|
||||||
|
</div>
|
||||||
|
<div class={`header-links`}>
|
||||||
|
{collapsedButtonRender !== false ? (
|
||||||
|
<Menu
|
||||||
|
class={`header-link-menu`}
|
||||||
|
inlineIndent={16}
|
||||||
|
theme={props.theme as 'light' | 'dark'}
|
||||||
|
selectedKeys={[]}
|
||||||
|
openKeys={[]}
|
||||||
|
mode="inline"
|
||||||
|
onClick={() => {
|
||||||
|
if (props.onCollapse) {
|
||||||
|
props.onCollapse(!props.collapsed);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Menu.Item key={'collapsed-button'} class={`header-collapsed-button`} title={false}>
|
||||||
|
{collapsedButtonRender && typeof collapsedButtonRender === 'function'
|
||||||
|
? collapsedButtonRender(collapsed)
|
||||||
|
: collapsedButtonRender}
|
||||||
|
</Menu.Item>
|
||||||
|
</Menu>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</Sider>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SiderMenu
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
import type { PropType } from 'vue'
|
||||||
|
import config from '../../../config/config'
|
||||||
|
|
||||||
|
export interface PureSettings {
|
||||||
|
title: string
|
||||||
|
/**
|
||||||
|
* theme for nav menu
|
||||||
|
*/
|
||||||
|
navTheme: 'dark' | 'light' | 'realDark' | undefined;
|
||||||
|
/**
|
||||||
|
* nav menu position: `side` or `top`
|
||||||
|
*/
|
||||||
|
headerHeight?: number;
|
||||||
|
/**
|
||||||
|
* customize header height
|
||||||
|
*/
|
||||||
|
layout: 'side' | 'top' | 'mix';
|
||||||
|
/**
|
||||||
|
* layout of content: `Fluid` or `Fixed`, only works when layout is top
|
||||||
|
*/
|
||||||
|
contentWidth: 'Fluid' | 'Fixed';
|
||||||
|
menu: { locale?: boolean; defaultOpenAll?: boolean };
|
||||||
|
splitMenus?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const defaultSettings = {
|
||||||
|
navTheme: 'dark',
|
||||||
|
layout: 'side',
|
||||||
|
contentWidth: 'Fluid',
|
||||||
|
fixedHeader: false,
|
||||||
|
fixSiderbar: false,
|
||||||
|
menu: {},
|
||||||
|
headerHeight: 48,
|
||||||
|
iconfontUrl: '',
|
||||||
|
title: config.title
|
||||||
|
};
|
||||||
|
|
||||||
|
export const defaultSettingProps = {
|
||||||
|
navTheme: {
|
||||||
|
type: String as PropType<PureSettings['navTheme']>,
|
||||||
|
default: defaultSettings.navTheme,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String as PropType<PureSettings['title']>,
|
||||||
|
default: () => defaultSettings.title,
|
||||||
|
},
|
||||||
|
layout: {
|
||||||
|
type: String as PropType<PureSettings['layout']>,
|
||||||
|
default: defaultSettings.layout,
|
||||||
|
},
|
||||||
|
contentWidth: {
|
||||||
|
type: String as PropType<PureSettings['contentWidth']>,
|
||||||
|
default: defaultSettings.contentWidth,
|
||||||
|
},
|
||||||
|
menu: {
|
||||||
|
type: Object as PropType<PureSettings['menu']>,
|
||||||
|
default: () => {
|
||||||
|
return {
|
||||||
|
locale: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
headerHeight: {
|
||||||
|
type: Number as PropType<PureSettings['headerHeight']>,
|
||||||
|
default: defaultSettings.headerHeight,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { InjectionKey } from 'vue'
|
||||||
|
|
||||||
|
export type ContextType<T> = any;
|
||||||
|
|
||||||
|
export const useContext = <T>(
|
||||||
|
contextInjectKey: string | InjectionKey<ContextType<T>> = Symbol(),
|
||||||
|
defaultValue?: ContextType<T>
|
||||||
|
): T => {
|
||||||
|
return inject(contextInjectKey, defaultValue || ({} as T));
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
export { default as ProLayout } from './BasicLayout';
|
||||||
|
export { default as BasicLayoutPage } from './BasicLayoutPage.vue'
|
||||||
|
export { default as BlankLayoutPage } from './BlankLayoutPage.vue'
|
||||||
|
export { default as PageContainer } from './components/PageContainer'
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
import type { VNode, Slots } from 'vue';
|
||||||
|
import { BreadcrumbProps } from 'components/Layout/RouteContext'
|
||||||
|
import { VueNode } from 'ant-design-vue/es/_util/type'
|
||||||
|
|
||||||
|
export interface MetaRecord {
|
||||||
|
/**
|
||||||
|
* @name 菜单的icon
|
||||||
|
*/
|
||||||
|
icon?: string | VNode;
|
||||||
|
/**
|
||||||
|
* @name 自定义菜单的国际化 key，如果没有则返回自身
|
||||||
|
*/
|
||||||
|
title?: string;
|
||||||
|
/**
|
||||||
|
* @name 在菜单中隐藏子节点
|
||||||
|
*/
|
||||||
|
hideChildInMenu?: boolean;
|
||||||
|
/**
|
||||||
|
* @name 在菜单中隐藏自己和子节点
|
||||||
|
*/
|
||||||
|
hideInMenu?: boolean;
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
export interface MenuDataItem {
|
||||||
|
/**
|
||||||
|
* @name 用于标定选中的值，默认是 path
|
||||||
|
*/
|
||||||
|
path: string;
|
||||||
|
name?: string | symbol;
|
||||||
|
meta?: MetaRecord;
|
||||||
|
/**
|
||||||
|
* @name 子菜单
|
||||||
|
*/
|
||||||
|
children?: MenuDataItem[];
|
||||||
|
}
|
||||||
|
export type Theme = 'dark' | 'light';
|
||||||
|
|
||||||
|
export type MenuTheme = Theme;
|
||||||
|
export type MenuMode = 'horizontal' | 'vertical' | 'inline';
|
||||||
|
export type LayoutType = 'side' | 'top' | 'mix';
|
||||||
|
export type ProProps = Record<never, never>;
|
||||||
|
export type TargetType = '_blank' | '_self' | unknown;
|
||||||
|
export type BreadcrumbRender = BreadcrumbProps['itemRender'];
|
||||||
|
|
||||||
|
export type CustomRender = VueNode;
|
||||||
|
export type WithFalse<T> = T | false;
|
||||||
|
export type LogoRender = WithFalse<CustomRender>;
|
||||||
|
|
||||||
|
export type DefaultPropRender = WithFalse<CustomRender>;
|
||||||
|
export type HeaderContentRender = WithFalse<() => CustomRender>;
|
||||||
|
export type HeaderRender = WithFalse<(props: ProProps) => CustomRender>;
|
||||||
|
export type FooterRender = WithFalse<(props: ProProps) => CustomRender>;
|
||||||
|
export type RightContentRender = WithFalse<(props: ProProps) => CustomRender>;
|
||||||
|
export type MenuItemRender = WithFalse<
|
||||||
|
(args: { item: MenuDataItem; title?: JSX.Element; icon?: JSX.Element }) => CustomRender
|
||||||
|
>;
|
||||||
|
export type SubMenuItemRender = WithFalse<(args: { item: MenuDataItem; children?: CustomRender[] }) => CustomRender>;
|
||||||
|
export type MenuHeaderRender = WithFalse<(logo: CustomRender, title: CustomRender, props?: ProProps) => CustomRender>;
|
||||||
|
export type MenuContentRender = WithFalse<(props: ProProps, defaultDom: CustomRender) => CustomRender>;
|
||||||
|
export type MenuFooterRender = WithFalse<(props?: ProProps) => CustomRender>;
|
||||||
|
export type MenuExtraRender = WithFalse<(props?: ProProps) => CustomRender>;
|
||||||
|
|
||||||
|
export type CollapsedButtonRender = WithFalse<(collapsed?: boolean) => CustomRender>;
|
||||||
|
|
||||||
|
export type PageHeaderRender = WithFalse<(props?: ProProps) => CustomRender>;
|
||||||
|
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
import type { MenuDataItem } from 'components/Layout/typings'
|
||||||
|
import type { RouteRecord, RouteRecordRaw } from 'vue-router'
|
||||||
|
|
||||||
|
export function getMenuFirstChildren(menus: MenuDataItem[], key?: string) {
|
||||||
|
return key === undefined ? [] : (menus[menus.findIndex((menu) => menu.path === key)] || {}).children || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function clearMenuItem(menusData: RouteRecord[] | RouteRecordRaw[]): RouteRecordRaw[] {
|
||||||
|
return menusData
|
||||||
|
.map((item: RouteRecord | RouteRecordRaw) => {
|
||||||
|
const finalItem = { ...item };
|
||||||
|
if (finalItem.meta?.hideInMenu) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (finalItem && finalItem?.children) {
|
||||||
|
if (
|
||||||
|
!finalItem.meta?.hideChildInMenu &&
|
||||||
|
finalItem.children.some(
|
||||||
|
(child: RouteRecord | RouteRecordRaw) => child && !child.meta?.hideInMenu
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
children: clearMenuItem(finalItem.children),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
delete finalItem.children;
|
||||||
|
}
|
||||||
|
return finalItem;
|
||||||
|
})
|
||||||
|
.filter((item) => item) as RouteRecordRaw[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function flatMap(menusData: RouteRecord[]): MenuDataItem[] {
|
||||||
|
return menusData
|
||||||
|
.map((item) => {
|
||||||
|
const finalItem = { ...item } as MenuDataItem;
|
||||||
|
if (!finalItem.name || finalItem.meta?.hideInMenu) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (finalItem.children) {
|
||||||
|
delete finalItem.children;
|
||||||
|
}
|
||||||
|
return finalItem;
|
||||||
|
})
|
||||||
|
.filter((item) => item) as MenuDataItem[];
|
||||||
|
}
|
||||||
|
|
@ -4,25 +4,50 @@
|
||||||
<a-popconfirm v-bind="popConfirm" :disabled="!isPermission || props.disabled">
|
<a-popconfirm v-bind="popConfirm" :disabled="!isPermission || props.disabled">
|
||||||
<a-tooltip v-if="tooltip" v-bind="tooltip">
|
<a-tooltip v-if="tooltip" v-bind="tooltip">
|
||||||
<slot v-if="noButton"></slot>
|
<slot v-if="noButton"></slot>
|
||||||
<a-button v-else v-bind="buttonProps" :disabled="_isPermission"></a-button>
|
<a-button v-else v-bind="buttonProps" :disabled="_isPermission">
|
||||||
|
<slot></slot>
|
||||||
|
<template #icon>
|
||||||
|
<slot name="icon"></slot>
|
||||||
|
</template>
|
||||||
|
</a-button>
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
<a-button v-else v-bind="buttonProps" :disabled="_isPermission"></a-button>
|
<a-button v-else v-bind="buttonProps" :disabled="_isPermission">
|
||||||
|
<slot></slot>
|
||||||
|
<template #icon>
|
||||||
|
<slot name="icon"></slot>
|
||||||
|
</template>
|
||||||
|
</a-button>
|
||||||
</a-popconfirm>
|
</a-popconfirm>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="tooltip">
|
<template v-else-if="tooltip">
|
||||||
<a-tooltip v-bind="tooltip">
|
<a-tooltip v-bind="tooltip">
|
||||||
<slot v-if="noButton"></slot>
|
<slot v-if="noButton"></slot>
|
||||||
<a-button v-else v-bind="buttonProps" :disabled="_isPermission"></a-button>
|
<a-button v-else v-bind="buttonProps" :disabled="_isPermission">
|
||||||
|
<slot></slot>
|
||||||
|
<template #icon>
|
||||||
|
<slot name="icon"></slot>
|
||||||
|
</template>
|
||||||
|
</a-button>
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<slot v-if="noButton"></slot>
|
<slot v-if="noButton"></slot>
|
||||||
<a-button v-else v-bind="buttonProps" :disabled="_isPermission"></a-button>
|
<a-button v-else v-bind="buttonProps" :disabled="_isPermission">
|
||||||
|
<slot></slot>
|
||||||
|
<template #icon>
|
||||||
|
<slot name="icon"></slot>
|
||||||
|
</template>
|
||||||
|
</a-button>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
<a-tooltip v-else title="没有权限">
|
<a-tooltip v-else title="没有权限">
|
||||||
<slot v-if="noButton"></slot>
|
<slot v-if="noButton"></slot>
|
||||||
<a-button v-else v-bind="buttonProps" :disabled="_isPermission"></a-button>
|
<a-button v-else v-bind="buttonProps" :disabled="_isPermission">
|
||||||
|
<slot></slot>
|
||||||
|
<template #icon>
|
||||||
|
<slot name="icon"></slot>
|
||||||
|
</template>
|
||||||
|
</a-button>
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts" name="PermissionButton">
|
<script setup lang="ts" name="PermissionButton">
|
||||||
|
|
@ -49,13 +74,13 @@ const isPermission = computed(() => {
|
||||||
return permissionStore.hasPermission(props.hasPermission)
|
return permissionStore.hasPermission(props.hasPermission)
|
||||||
})
|
})
|
||||||
const _isPermission = computed(() =>
|
const _isPermission = computed(() =>
|
||||||
'hasPermission' in props && isPermission
|
'hasPermission' in props && isPermission.value
|
||||||
? 'disabled' in buttonProps
|
? 'disabled' in buttonProps
|
||||||
? buttonProps.disabled
|
? buttonProps.disabled
|
||||||
: false
|
: false
|
||||||
: true
|
: true
|
||||||
)
|
)
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="less">
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -9,6 +9,7 @@ import Search from './Search'
|
||||||
import NormalUpload from './NormalUpload/index.vue'
|
import NormalUpload from './NormalUpload/index.vue'
|
||||||
import FileFormat from './FileFormat/index.vue'
|
import FileFormat from './FileFormat/index.vue'
|
||||||
import JUpload from './JUpload/index.vue'
|
import JUpload from './JUpload/index.vue'
|
||||||
|
import { BasicLayoutPage, BlankLayoutPage, PageContainer } from './Layout'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
install(app: App) {
|
install(app: App) {
|
||||||
|
|
@ -22,5 +23,8 @@ export default {
|
||||||
.component('NormalUpload', NormalUpload)
|
.component('NormalUpload', NormalUpload)
|
||||||
.component('FileFormat', FileFormat)
|
.component('FileFormat', FileFormat)
|
||||||
.component('JUpload', JUpload)
|
.component('JUpload', JUpload)
|
||||||
|
.component('BasicLayoutPage', BasicLayoutPage)
|
||||||
|
.component('BlankLayoutPage', BlankLayoutPage)
|
||||||
|
.component('PageContainer', PageContainer)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,12 @@
|
||||||
import { createRouter, createWebHashHistory } from 'vue-router';
|
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||||
import menus, { LoginPath } from './menu'
|
import menus, { LoginPath } from './menu'
|
||||||
import { LocalStore } from "@/utils/comm";
|
import { getToken } from '@/utils/comm'
|
||||||
import { TOKEN_KEY } from "@/utils/variable";
|
import { useUserInfo } from '@/store/userInfo'
|
||||||
|
import { useSystem } from '@/store/system'
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHashHistory(),
|
history: createWebHashHistory(),
|
||||||
routes: menus
|
routes: menus
|
||||||
})
|
})
|
||||||
|
|
||||||
const filterPath = [
|
const filterPath = [
|
||||||
|
|
@ -14,17 +15,45 @@ const filterPath = [
|
||||||
]
|
]
|
||||||
|
|
||||||
router.beforeEach((to, from, next) => {
|
router.beforeEach((to, from, next) => {
|
||||||
const token = LocalStore.get(TOKEN_KEY)
|
// TODO 切换路由取消请求
|
||||||
// TODO 切换路由取消请求
|
const isFilterPath = filterPath.includes(to.path)
|
||||||
if (token || filterPath.includes(to.path)) {
|
if (isFilterPath) {
|
||||||
next()
|
next()
|
||||||
} else {
|
} else {
|
||||||
if (to.path === LoginPath) {
|
const token = getToken()
|
||||||
next()
|
if (token) {
|
||||||
|
if (to.path === LoginPath) {
|
||||||
|
next({ path: '/' })
|
||||||
|
} else {
|
||||||
|
const userInfo = useUserInfo()
|
||||||
|
const system = useSystem()
|
||||||
|
if (!userInfo.$state.userInfos.username) {
|
||||||
|
userInfo.getUserInfo()
|
||||||
|
system.getSystemVersion().then((menuData: any[]) => {
|
||||||
|
menuData.forEach(r => {
|
||||||
|
router.addRoute('main', r)
|
||||||
|
})
|
||||||
|
const redirect = decodeURIComponent((from.query.redirect as string) || to.path)
|
||||||
|
if(to.path === redirect) {
|
||||||
|
next({ ...to, replace: true })
|
||||||
|
} else {
|
||||||
|
next({ path: redirect })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
next({ path: LoginPath })
|
next()
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
if (to.path === LoginPath) {
|
||||||
|
next()
|
||||||
|
} else {
|
||||||
|
next({ path: LoginPath })
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
export default router
|
export default router
|
||||||
|
|
@ -1,9 +1,12 @@
|
||||||
import { defineStore } from "pinia";
|
import { defineStore } from "pinia";
|
||||||
|
import { queryOwnThree } from '@/api/system/menu'
|
||||||
|
import { filterAsnycRouter } from '@/utils/menu'
|
||||||
|
|
||||||
export const useMenuStore = defineStore({
|
export const useMenuStore = defineStore({
|
||||||
id: 'menu',
|
id: 'menu',
|
||||||
state: () => ({
|
state: () => ({
|
||||||
menus: {} as {[key: string]: string},
|
menus: {},
|
||||||
|
menusKey: []
|
||||||
}),
|
}),
|
||||||
getters: {
|
getters: {
|
||||||
hasPermission(state) {
|
hasPermission(state) {
|
||||||
|
|
@ -19,6 +22,47 @@ export const useMenuStore = defineStore({
|
||||||
}
|
}
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
queryMenuTree(isCommunity = false): Promise<any[]> {
|
||||||
|
return new Promise(async (res) => {
|
||||||
|
//过滤非集成的菜单
|
||||||
|
const params = [
|
||||||
|
{
|
||||||
|
terms: [
|
||||||
|
{
|
||||||
|
terms: [
|
||||||
|
{
|
||||||
|
column: 'owner',
|
||||||
|
termType: 'eq',
|
||||||
|
value: 'iot',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
column: 'owner',
|
||||||
|
termType: 'isnull',
|
||||||
|
value: '1',
|
||||||
|
type: 'or',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const resp = await queryOwnThree({ paging: false, terms: params })
|
||||||
|
if (resp.success) {
|
||||||
|
const menus = filterAsnycRouter(resp.result)
|
||||||
|
menus.push({
|
||||||
|
path: '/',
|
||||||
|
redirect: menus[0]?.path,
|
||||||
|
meta: {
|
||||||
|
hideInMenu: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.menus = menus
|
||||||
|
res(menus)
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { defineStore } from 'pinia';
|
||||||
|
import { systemVersion } from '@/api/comm'
|
||||||
|
import { useMenuStore } from './menu'
|
||||||
|
|
||||||
|
export const useSystem = defineStore('system', {
|
||||||
|
state: () => ({
|
||||||
|
isCommunity: false
|
||||||
|
}),
|
||||||
|
actions: {
|
||||||
|
getSystemVersion(): Promise<any[]> {
|
||||||
|
return new Promise(async(res, rej) => {
|
||||||
|
const resp = await systemVersion()
|
||||||
|
if (resp.success && resp.result) {
|
||||||
|
const isCommunity = resp.result.edition === 'community'
|
||||||
|
this.isCommunity = isCommunity
|
||||||
|
// 获取菜单
|
||||||
|
const menu = useMenuStore()
|
||||||
|
const menuData: any[] = await menu.queryMenuTree(isCommunity)
|
||||||
|
res(menuData)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { defineStore } from 'pinia';
|
import { defineStore } from 'pinia';
|
||||||
import { authLogin } from '@/api/login';
|
import { authLogin, userDetail } from '@/api/login';
|
||||||
import { LocalStore } from '@/utils/comm';
|
import { LocalStore } from '@/utils/comm';
|
||||||
import { TOKEN_KEY } from '@/utils/variable';
|
import { TOKEN_KEY } from '@/utils/variable';
|
||||||
|
|
||||||
|
|
@ -38,5 +38,17 @@ export const useUserInfo = defineStore('userInfo', {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
getUserInfo() {
|
||||||
|
return new Promise((res, rej) => {
|
||||||
|
userDetail().then(resp => {
|
||||||
|
if (resp.success) {
|
||||||
|
res(true)
|
||||||
|
this.userInfos = resp.result
|
||||||
|
} else {
|
||||||
|
rej()
|
||||||
|
}
|
||||||
|
}).catch(() => rej())
|
||||||
|
})
|
||||||
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,7 @@
|
||||||
|
import type { Slots } from 'vue'
|
||||||
import { TOKEN_KEY } from '@/utils/variable'
|
import { TOKEN_KEY } from '@/utils/variable'
|
||||||
import { Terms } from 'components/Search/types'
|
import { Terms } from 'components/Search/types'
|
||||||
|
import { urlReg } from '@/utils/regular'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 静态图片资源处理
|
* 静态图片资源处理
|
||||||
|
|
@ -10,32 +12,32 @@ export const getImage = (path: string) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
export const LocalStore = {
|
export const LocalStore = {
|
||||||
set(key: string, data: any) {
|
set(key: string, data: any) {
|
||||||
localStorage.setItem(key, typeof data === 'string' ? data : JSON.stringify(data))
|
localStorage.setItem(key, typeof data === 'string' ? data : JSON.stringify(data))
|
||||||
},
|
},
|
||||||
get(key: string) {
|
get(key: string) {
|
||||||
const dataStr = localStorage.getItem(key)
|
const dataStr = localStorage.getItem(key)
|
||||||
try {
|
try {
|
||||||
if (dataStr) {
|
if (dataStr) {
|
||||||
const data = JSON.parse(dataStr)
|
const data = JSON.parse(dataStr)
|
||||||
return data && typeof data === 'object' ? data : dataStr
|
return data && typeof data === 'object' ? data : dataStr
|
||||||
} else {
|
} else {
|
||||||
return dataStr
|
return dataStr
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
return dataStr
|
return dataStr
|
||||||
}
|
|
||||||
},
|
|
||||||
remove(key: string) {
|
|
||||||
localStorage.removeItem(key)
|
|
||||||
},
|
|
||||||
removeAll() {
|
|
||||||
localStorage.clear()
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
remove(key: string) {
|
||||||
|
localStorage.removeItem(key)
|
||||||
|
},
|
||||||
|
removeAll() {
|
||||||
|
localStorage.clear()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getToken = () => {
|
export const getToken = () => {
|
||||||
return LocalStore.get(TOKEN_KEY)
|
return LocalStore.get(TOKEN_KEY)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -45,7 +47,7 @@ export const getToken = () => {
|
||||||
* @param key
|
* @param key
|
||||||
*/
|
*/
|
||||||
export const filterTreeSelectNode = (value: string, treeNode: any, key: string = 'name'): boolean => {
|
export const filterTreeSelectNode = (value: string, treeNode: any, key: string = 'name'): boolean => {
|
||||||
return treeNode[key]?.includes(value)
|
return treeNode[key]?.includes(value)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -55,13 +57,28 @@ export const filterTreeSelectNode = (value: string, treeNode: any, key: string =
|
||||||
* @param key
|
* @param key
|
||||||
*/
|
*/
|
||||||
export const filterSelectNode = (value: string, option: any, key: string = 'label'): boolean => {
|
export const filterSelectNode = (value: string, option: any, key: string = 'label'): boolean => {
|
||||||
return option[key]?.includes(value)
|
return option[key]?.includes(value)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getSlot<T>(slots: Slots, props: Record<string, unknown>, prop = 'default'): T | false {
|
||||||
|
if (props[prop] === false) {
|
||||||
|
// force not render
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
return (props[prop] || slots[prop]) as T
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getSlotVNode<T>(slots: Slots, props: Record<string, unknown>, prop = 'default'): T | false {
|
||||||
|
if (props[prop] === false) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return (props[prop] || slots[prop]?.()) as T;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 时间转换为'2022-01-02 14:03:05'
|
* 时间转换为'2022-01-02 14:03:05'
|
||||||
* @param date 时间对象
|
* @param date 时间对象
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
export const dateFormat = (dateSouce:any):string|Error => {
|
export const dateFormat = (dateSouce:any):string|Error => {
|
||||||
let date = null
|
let date = null
|
||||||
|
|
@ -82,5 +99,5 @@ export const dateFormat = (dateSouce:any):string|Error => {
|
||||||
minutes = (minutes < 10) ? '0' + minutes : minutes;
|
minutes = (minutes < 10) ? '0' + minutes : minutes;
|
||||||
seconds = (seconds < 10) ? '0' + seconds : seconds;
|
seconds = (seconds < 10) ? '0' + seconds : seconds;
|
||||||
return year + "-" + month + "-" + day
|
return year + "-" + month + "-" + day
|
||||||
+ " " + hour + ":" + minutes + ":" + seconds;
|
+ " " + hour + ":" + minutes + ":" + seconds;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
import { isObject } from 'lodash-es'
|
||||||
|
|
||||||
export default function encodeQuery(params: any) {
|
export default function encodeQuery(params: any) {
|
||||||
if (!params) return {};
|
if (!params) return {};
|
||||||
const queryParam = {
|
const queryParam = {
|
||||||
|
|
@ -15,7 +17,7 @@ export default function encodeQuery(params: any) {
|
||||||
terms[k] === '' ||
|
terms[k] === '' ||
|
||||||
terms[k] === undefined ||
|
terms[k] === undefined ||
|
||||||
terms[k].length === 0 ||
|
terms[k].length === 0 ||
|
||||||
terms[k] === {} ||
|
(isObject(terms[k]) && Object.keys(terms[k]).length === 0) ||
|
||||||
terms[k] === null
|
terms[k] === null
|
||||||
)
|
)
|
||||||
) {
|
) {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,111 @@
|
||||||
|
const pagesComponent = import.meta.glob('../views/system/**/*.vue', { eager: true });
|
||||||
|
import { BlankLayoutPage, BasicLayoutPage } from 'components/Layout'
|
||||||
|
|
||||||
|
type ExtraRouteItem = {
|
||||||
|
code: string
|
||||||
|
name: string
|
||||||
|
url?: string
|
||||||
|
}
|
||||||
|
// 额外子级路由
|
||||||
|
const extraRouteObj = {
|
||||||
|
'media/Cascade': {
|
||||||
|
children: [
|
||||||
|
{ code: 'Save', name: '新增' },
|
||||||
|
{ code: 'Channel', name: '选择通道' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
'media/Device': {
|
||||||
|
children: [
|
||||||
|
{ code: 'Save', name: '详情' },
|
||||||
|
{ code: 'Channel', name: '通道列表' },
|
||||||
|
{ code: 'Playback', name: '回放' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
'rule-engine/Scene': {
|
||||||
|
children: [
|
||||||
|
{ code: 'Save', name: '详情' },
|
||||||
|
{ code: 'Save2', name: '测试详情' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
'rule-engine/Alarm/Configuration': {
|
||||||
|
children: [{ code: 'Save', name: '详情' }],
|
||||||
|
},
|
||||||
|
'device/Firmware': {
|
||||||
|
children: [{ code: 'Task', name: '升级任务' }],
|
||||||
|
},
|
||||||
|
demo: {
|
||||||
|
children: [{ code: 'AMap', name: '地图' }],
|
||||||
|
},
|
||||||
|
'system/Platforms': {
|
||||||
|
children: [
|
||||||
|
{ code: 'Api', name: '赋权' },
|
||||||
|
{ code: 'View', name: 'Api详情' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
'system/DataSource': {
|
||||||
|
children: [{ code: 'Management', name: '管理' }],
|
||||||
|
},
|
||||||
|
'system/Menu': {
|
||||||
|
children: [{ code: 'Setting', name: '菜单配置' }],
|
||||||
|
},
|
||||||
|
'system/Apply': {
|
||||||
|
children: [
|
||||||
|
{ code: 'Api', name: '赋权' },
|
||||||
|
{ code: 'View', name: 'Api详情' },
|
||||||
|
{ code: 'Save', name: '详情' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const resolveComponent = (name: any) => {
|
||||||
|
// TODO 暂时用system进行测试
|
||||||
|
const importPage = pagesComponent[`../views/${name}/index.vue`];
|
||||||
|
// if (!importPage) {
|
||||||
|
// throw new Error(`Unknown page ${name}. Is it located under Pages with a .vue extension?`);
|
||||||
|
// }
|
||||||
|
|
||||||
|
//@ts-ignore
|
||||||
|
return !importPage ? BlankLayoutPage : importPage.default
|
||||||
|
// return importPage.default
|
||||||
|
}
|
||||||
|
|
||||||
|
const findChildrenRoute = (code: string, url: string): ExtraRouteItem[] => {
|
||||||
|
if (extraRouteObj[code]) {
|
||||||
|
return extraRouteObj[code].children.map((route: ExtraRouteItem) => {
|
||||||
|
return {
|
||||||
|
url: `${url}/${route.code}`,
|
||||||
|
code: route.code,
|
||||||
|
name: route.name
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
|
||||||
|
export function filterAsnycRouter(asyncRouterMap: any, parentCode = '', level = 1) {
|
||||||
|
return asyncRouterMap.map((route: any) => {
|
||||||
|
|
||||||
|
route.path = `${route.url}`
|
||||||
|
route.meta = {
|
||||||
|
icon: route.icon,
|
||||||
|
title: route.name
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查看是否有隐藏子路由
|
||||||
|
route.children = route.children && route.children.length ? [...route.children, ...findChildrenRoute(route.code, route.url)] : findChildrenRoute(route.code, route.url)
|
||||||
|
|
||||||
|
// TODO 查看是否具有详情页
|
||||||
|
// route.children = [...route.children, ]
|
||||||
|
|
||||||
|
if (route.children && route.children.length) {
|
||||||
|
route.component = () => level === 1 ? BasicLayoutPage : BlankLayoutPage
|
||||||
|
route.children = filterAsnycRouter(route.children, `${parentCode}/${route.code}`, level + 1)
|
||||||
|
route.redirect = route.children[0].url
|
||||||
|
} else {
|
||||||
|
route.component = resolveComponent(route.code);
|
||||||
|
}
|
||||||
|
console.log(route.code, route)
|
||||||
|
return route
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
// 用于校验 url
|
||||||
|
export const urlReg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
|
||||||
|
|
||||||
|
export const isUrl = (path: string): boolean => urlReg.test(path)
|
||||||
|
|
@ -118,6 +118,7 @@ const errorHandler = (error: any) => {
|
||||||
const status = error.response.status
|
const status = error.response.status
|
||||||
if (status === 403) {
|
if (status === 403) {
|
||||||
Notification.error({
|
Notification.error({
|
||||||
|
key: '403',
|
||||||
message: 'Forbidden',
|
message: 'Forbidden',
|
||||||
description: (data.message + '').substr(0, 90)
|
description: (data.message + '').substr(0, 90)
|
||||||
})
|
})
|
||||||
|
|
@ -129,22 +130,25 @@ const errorHandler = (error: any) => {
|
||||||
}, 0)
|
}, 0)
|
||||||
} else if (status === 500) {
|
} else if (status === 500) {
|
||||||
Notification.error({
|
Notification.error({
|
||||||
|
key: '500',
|
||||||
message: 'Server Side Error',
|
message: 'Server Side Error',
|
||||||
description: (data.message + '').substr(0, 90)
|
description: (data.message + '').substr(0, 90)
|
||||||
})
|
})
|
||||||
} else if (status === 400) {
|
} else if (status === 400) {
|
||||||
Notification.error({
|
Notification.error({
|
||||||
|
key: '400',
|
||||||
message: 'Request Error',
|
message: 'Request Error',
|
||||||
description: (data.message + '').substr(0, 90)
|
description: (data.message + '').substr(0, 90)
|
||||||
})
|
})
|
||||||
} else if (status === 401) {
|
} else if (status === 401) {
|
||||||
Notification.error({
|
Notification.error({
|
||||||
|
key: '401',
|
||||||
message: 'Unauthorized',
|
message: 'Unauthorized',
|
||||||
description: 'Authorization verification failed'
|
description: 'Authorization verification failed'
|
||||||
})
|
})
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
router.replace({
|
router.replace({
|
||||||
name: 'login'
|
path: LoginPath
|
||||||
})
|
})
|
||||||
}, 0)
|
}, 0)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
|
<page-container>
|
||||||
<a-card class="basis-container">
|
<a-card class="basis-container">
|
||||||
<a-form
|
<a-form
|
||||||
layout="vertical"
|
layout="vertical"
|
||||||
|
|
@ -277,6 +278,7 @@
|
||||||
>保存</a-button
|
>保存</a-button
|
||||||
>
|
>
|
||||||
</a-card>
|
</a-card>
|
||||||
|
</page-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts" name="Basis">
|
<script setup lang="ts" name="Basis">
|
||||||
|
|
@ -289,6 +291,7 @@ import { LocalStore } from '@/utils/comm';
|
||||||
|
|
||||||
import { save_api, getDetails_api } from '@/api/system/basis';
|
import { save_api, getDetails_api } from '@/api/system/basis';
|
||||||
import { usePermissionStore } from '@/store/permission';
|
import { usePermissionStore } from '@/store/permission';
|
||||||
|
import PageContainer from 'components/Layout/components/PageContainer'
|
||||||
|
|
||||||
const action = ref<string>(`${BASE_API_PATH}/file/static`);
|
const action = ref<string>(`${BASE_API_PATH}/file/static`);
|
||||||
const headers = ref({ [TOKEN_KEY]: LocalStore.get(TOKEN_KEY) });
|
const headers = ref({ [TOKEN_KEY]: LocalStore.get(TOKEN_KEY) });
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
"store/*": ["./src/store/*"],
|
"store/*": ["./src/store/*"],
|
||||||
"style/*": ["./src/style/*"],
|
"style/*": ["./src/style/*"],
|
||||||
},
|
},
|
||||||
"types": ["ant-design-vue/typings/global"],
|
"types": ["ant-design-vue/typings/global", "vite/client"],
|
||||||
"suppressImplicitAnyIndexErrors": true
|
"suppressImplicitAnyIndexErrors": true
|
||||||
},
|
},
|
||||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||||
|
|
|
||||||
|
|
@ -82,6 +82,7 @@ export default defineConfig(({ mode}) => {
|
||||||
// target: 'http://192.168.33.22:8800',
|
// target: 'http://192.168.33.22:8800',
|
||||||
// target: 'http://192.168.32.244:8881',
|
// target: 'http://192.168.32.244:8881',
|
||||||
// target: 'http://47.112.135.104:5096', // opcua
|
// target: 'http://47.112.135.104:5096', // opcua
|
||||||
|
// target: 'http://120.77.179.54:8844', // 120测试
|
||||||
target: 'http://47.108.63.174:8845', // 测试
|
target: 'http://47.108.63.174:8845', // 测试
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
rewrite: (path) => path.replace(/^\/api/, '')
|
rewrite: (path) => path.replace(/^\/api/, '')
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue