feat: 新增Layout组件，优化部分配置文件

config/config.ts

@@ -3,5 +3,14 @@ export default {
     'primary-color': '#1d39c4',
   },
   logo: '/favicon.ico',
-  title: 'Jetlinks'
+  title: 'Jetlinks',
+  layout: {
+    title: '物联网平台',
+    logo: '/icons/icon-192x192.png',
+    siderWidth: 208,
+    headerHeight: 48,
+    collapsedWidth: 48,
+    mode: 'inline',
+    theme: 'light', // 'dark' 'light'
+  }
 }

src/App.vue

@@ -1,9 +1,32 @@
-<script setup lang="ts">
-</script>
-
 <template>
-  <router-view />
+  <ProLayout
+    v-bind='layoutConf'
+    v-model:openKeys="state.openKeys"
+    v-model:collapsed="state.collapsed"
+    v-model:selectedKeys="state.selectedKeys"
+  >
+    <router-view />
+  </ProLayout>
 </template>
 
+<script setup lang="ts">
+import { ProLayout } from '@/components/Layout'
+import DefaultSetting from '../config/config'
+
+const layoutConf = reactive({
+  navTheme: DefaultSetting.layout.theme,
+  siderWidth: DefaultSetting.layout.theme,
+  logo: DefaultSetting.layout.logo,
+  title: DefaultSetting.layout.title,
+  menuData: [],
+});
+
+const state = reactive({
+  collapsed: false, // default value
+  openKeys: [],
+  selectedKeys: [],
+});
+</script>
+
 <style scoped>
 </style>

src/components/AIcon/index.tsx

@@ -26,7 +26,9 @@ const iconKeys = [
     'ExportOutlined',
     'SyncOutlined',
     'ExclamationCircleOutlined',
-    'UploadOutlined'
+    'UploadOutlined',
+    'MenuUnfoldOutlined',
+    'MenuFoldOutlined'
 ]
 
 const Icon = (props: {type: string}) => {

src/components/Layout/BasicLayout.tsx

@@ -0,0 +1,221 @@
+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
+    }
+  }
+}
+
+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 genLayoutStyle = reactive<CSSProperties>({
+      position: 'relative'
+    })
+
+    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 {
+        onCollapse: propsOnCollapse,
+        onOpenKeys: propsOnOpenKeys,
+        onSelect: propsOnSelect,
+        onMenuClick: propsOnMenuClick,
+        ...restProps
+      } = props
+
+      const collapsedButtonRender = getSlot<CollapsedButtonRender>(slots, props, 'collapsedButtonRender')
+      const headerContentRender = getSlot<HeaderContentRender>(slots, props, 'headerContentRender')
+      const rightContentRender = getSlot<RightContentRender>(slots, props, 'rightContentRender')
+      const customHeaderRender = getSlot<HeaderRender>(slots, props, 'headerRender')
+      const footerRender = getSlot<FooterRender>(slots, props, 'footerRender')
+
+      // menu
+      const menuHeaderRender = getSlot<MenuHeaderRender>(slots, props, 'menuHeaderRender')
+      const menuExtraRender = getSlot<MenuExtraRender>(slots, props, 'menuExtraRender')
+      const menuContentRender = getSlot<MenuContentRender>(slots, props, 'menuContentRender')
+      const menuFooterRender = getSlot<MenuFooterRender>(slots, props, 'menuFooterRender')
+      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 (
+        <div class={'pro-layout'}>
+          <Layout
+            style={{
+              minHeight: '100vh',
+            }}
+          >
+            {headerDom.value}
+              <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>
+              {slots.default?.()}
+            </Layout>
+          </Layout>
+        </div>
+      )
+    }
+  }
+})
+
+
+
+

src/components/Layout/RouteContext.tsx

@@ -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, {});
+

src/components/Layout/components/Header/Header.tsx

@@ -0,0 +1,113 @@
+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'
+
+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();
+
+    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={menuData}
+              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>
+    )
+  }
+})

src/components/Layout/components/Header/index.less

@@ -0,0 +1,59 @@
+.header-content {
+
+  &.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;
+        }
+      }
+    }
+  }
+}

src/components/Layout/components/Header/index.tsx

@@ -0,0 +1,51 @@
+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, navTheme, 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%`,
+          zIndex: 19,
+          position: 'fixed',
+        }}
+      >
+        <Header
+          {...props}
+          onCollapse={onCollapse.value}
+          menuData={clearMenuData.value}
+        />
+      </Layout.Header>
+    )
+}
+})

src/components/Layout/components/SiderMenu/BaseMenu.tsx

@@ -0,0 +1,214 @@
+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} />}
+        />
+      )
+    }
+
+    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: { name: item.name, ...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.menuProps}
+        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>
+    )
+  }
+})

src/components/Layout/components/SiderMenu/SiderMenu.tsx

@@ -0,0 +1,173 @@
+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'
+
+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,
+    siderWidth,
+    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 = () => {
+
+  }
+
+  const defaultMenuDom = (
+    <BaseMenu
+      theme={props.theme as 'dark' | 'light'}
+      mode="inline"
+      menuData={context.menuData}
+      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,
+      }}
+    />
+  )
+
+  return (
+    <>
+      <Sider
+        collapsible
+        trigger={null}
+        collapsed={collapsed}
+        onCollapse={(collapse: boolean) => {
+          props.onCollapse?.(collapse);
+        }}
+        collapsedWidth={collapsedWidth}
+        style={{
+          overflow: 'hidden',
+          height: '100vh',
+        }}
+        width={siderWidth}
+        theme={props.theme as 'dark' | 'light'}
+      >
+        <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

src/components/Layout/defaultSetting.ts

@@ -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,
+  },
+}
+

src/components/Layout/hooks/context.ts

@@ -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));
+};

src/components/Layout/index.ts

@@ -0,0 +1 @@
+export { default as ProLayout } from './BasicLayout';

src/components/Layout/typings.ts

@@ -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>;
+

src/components/Layout/utils.ts

@@ -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.name || finalItem.meta?.hideInMenu) {
+        return null;
+      }
+
+      if (finalItem && finalItem?.children) {
+        if (
+          !finalItem.meta?.hideChildInMenu &&
+          finalItem.children.some(
+            (child: RouteRecord | RouteRecordRaw) => child && child.name && !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[];
+}

src/utils/comm.ts

@@ -1,41 +1,43 @@
+import type { Slots } from 'vue'
 import { TOKEN_KEY } from '@/utils/variable'
 import { Terms } from 'components/Search/types'
+import { urlReg } from '@/utils/regular'
 
 /**
  * 静态图片资源处理
  * @param path {String} 路径
  */
 export const getImage = (path: string) => {
-    return new URL('/images'+path, import.meta.url).href
+  return new URL('/images' + path, import.meta.url).href
 }
 
 export const LocalStore = {
-    set(key: string, data: any) {
-        localStorage.setItem(key, typeof data === 'string' ? data : JSON.stringify(data))
-    },
-    get(key: string) {
-        const dataStr = localStorage.getItem(key)
-        try {
-            if (dataStr) {
-                const data = JSON.parse(dataStr)
-                return data && typeof data === 'object' ? data : dataStr
-            } else {
-                return dataStr
-            }
-        } catch (e) {
-            return dataStr
-        }
-    },
-    remove(key: string) {
-        localStorage.removeItem(key)
-    },
-    removeAll() {
-        localStorage.clear()
+  set(key: string, data: any) {
+    localStorage.setItem(key, typeof data === 'string' ? data : JSON.stringify(data))
+  },
+  get(key: string) {
+    const dataStr = localStorage.getItem(key)
+    try {
+      if (dataStr) {
+        const data = JSON.parse(dataStr)
+        return data && typeof data === 'object' ? data : dataStr
+      } else {
+        return dataStr
+      }
+    } catch (e) {
+      return dataStr
     }
+  },
+  remove(key: string) {
+    localStorage.removeItem(key)
+  },
+  removeAll() {
+    localStorage.clear()
+  }
 }
 
 export const getToken = () => {
-    return LocalStore.get(TOKEN_KEY)
+  return LocalStore.get(TOKEN_KEY)
 }
 
 /**
@@ -45,7 +47,7 @@ export const getToken = () => {
  * @param key
  */
 export const filterTreeSelectNode = (value: string, treeNode: any, key: string = 'name'): boolean => {
-    return treeNode[key]?.includes(value)
+  return treeNode[key]?.includes(value)
 }
 
 /**
@@ -55,5 +57,20 @@ export const filterTreeSelectNode = (value: string, treeNode: any, key: string =
  * @param key
  */
 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;
 }

src/utils/regular.ts

@@ -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)