Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

2023-01-30 17:08:46 +08:00 · 2023-01-30 17:08:46 +08:00 · c1adddbb3b
parent 05e1281728 e6c2a0875a
commit c1adddbb3b
40 changed files with 5918 additions and 4034 deletions
--- a/config/config.ts
+++ b/config/config.ts
@ -2,6 +2,15 @@ export default {
  theme: {
    'primary-color': '#1d39c4',
  },
-  logo: '/favicon.ico',
-  title: 'Jetlinks'
+  logo: '/favicon.ico', // 浏览器标签页logo
+  title: 'Jetlinks', // 浏览器标签页title
+  layout: {
+    title: '物联网平台', // 平台title
+    logo: '/icons/icon-192x192.png', // 平台logo
+    siderWidth: 208, // 左侧菜单栏宽度
+    headerHeight: 48, // 头部高度
+    collapsedWidth: 48,
+    mode: 'inline',
+    theme: 'light', // 'dark' 'light'
+  }
 }
--- a/src/App.vue
+++ b/src/App.vue
@ -1,9 +1,9 @@
-<script setup lang="ts">
-</script>
-
 <template>
  <router-view />
 </template>

+<script setup lang="ts">
+</script>
+
 <style scoped>
 </style>
--- a/src/api/comm.ts
+++ b/src/api/comm.ts
@ -23,3 +23,8 @@ export const getSearchHistory = (target:string) => server.get<SearchHistoryList[
 * @param target
 */
 export const deleteSearchHistory = (target:string, id:string) => server.remove<SearchHistoryList[]>(`/user/settings/${target}/${id}`)
+
+/**
+ * 获取当前系统版本
+ */
+export const systemVersion = () => server.get<{edition?: string}>('/system/version')
--- a/src/api/login.ts
+++ b/src/api/login.ts
@ -46,4 +46,9 @@ export const bindInfo = () => server.get(`/application/sso/_all`)
 * 查询配置信息
 * @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')
--- a/src/api/system/menu.ts
+++ b/src/api/system/menu.ts
@ -0,0 +1,3 @@
+import server from '@/utils/request'
+
+export const queryOwnThree = (data: any) => server.post<any>('/menu/user-own/tree', data)
--- a/src/components/AIcon/index.tsx
+++ b/src/components/AIcon/index.tsx
@ -39,6 +39,10 @@ const iconKeys = [
    'ArrowDownOutlined',
    'SmallDashOutlined',
    'TeamOutlined',
+    'MenuUnfoldOutlined',
+    'MenuFoldOutlined',
+    'QuestionCircleOutlined',
+    'InfoCircleOutlined',
    'SearchOutlined',
 ]

--- a/src/components/Layout/BasicLayout.tsx
+++ b/src/components/Layout/BasicLayout.tsx
@ -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>
+            )
+          }
+        </>
+      )
+    }
+  }
+})
+
+
+
+
--- a/src/components/Layout/BasicLayoutPage.vue
+++ b/src/components/Layout/BasicLayoutPage.vue
@ -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>
--- a/src/components/Layout/BlankLayoutPage.vue
+++ b/src/components/Layout/BlankLayoutPage.vue
@ -0,0 +1,13 @@
+<template>
+  <router-view />
+</template>
+
+<script>
+export default {
+  name: 'BlankLayoutPage'
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/components/Layout/PageContainer.tsx
+++ b/src/components/Layout/PageContainer.tsx
--- a/src/components/Layout/RouteContext.tsx
+++ b/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, {});
+
--- a/src/components/Layout/components/Header/Header.tsx
+++ b/src/components/Layout/components/Header/Header.tsx
@ -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>
+      </>
+    )
+  }
+})
--- a/src/components/Layout/components/Header/index.less
+++ b/src/components/Layout/components/Header/index.less
@ -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;
+        }
+      }
+    }
+  }
+}
--- a/src/components/Layout/components/Header/index.tsx
+++ b/src/components/Layout/components/Header/index.tsx
@ -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>
+      </>
+    )
+}
+})
--- a/src/components/Layout/components/PageContainer/index.less
+++ b/src/components/Layout/components/PageContainer/index.less
@ -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%;
+      }
+    }
+  }
+}
--- a/src/components/Layout/components/PageContainer/index.tsx
+++ b/src/components/Layout/components/PageContainer/index.tsx
@ -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
--- a/src/components/Layout/components/PageContainer/types.d.ts
+++ b/src/components/Layout/components/PageContainer/types.d.ts
@ -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;
+}
--- a/src/components/Layout/components/SiderMenu/BaseMenu.tsx
+++ b/src/components/Layout/components/SiderMenu/BaseMenu.tsx
@ -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>
+    )
+  }
+})
--- a/src/components/Layout/components/SiderMenu/SiderMenu.less
+++ b/src/components/Layout/components/SiderMenu/SiderMenu.less
@ -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%;
+  }
+}
--- a/src/components/Layout/components/SiderMenu/SiderMenu.tsx
+++ b/src/components/Layout/components/SiderMenu/SiderMenu.tsx
@ -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
--- a/src/components/Layout/defaultSetting.ts
+++ b/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,
+  },
+}
+
--- a/src/components/Layout/hooks/context.ts
+++ b/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));
+};
--- a/src/components/Layout/index.ts
+++ b/src/components/Layout/index.ts
@ -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'
--- a/src/components/Layout/typings.ts
+++ b/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>;
+
--- a/src/components/Layout/utils.ts
+++ b/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.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[];
+}
--- a/src/components/PermissionButton/index.vue
+++ b/src/components/PermissionButton/index.vue
@ -4,25 +4,50 @@
      <a-popconfirm v-bind="popConfirm" :disabled="!isPermission || props.disabled">
        <a-tooltip v-if="tooltip" v-bind="tooltip">
          <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-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>
    </template>
    <template v-else-if="tooltip">
      <a-tooltip v-bind="tooltip">
        <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>
    </template>
    <template v-else>
      <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>
  <a-tooltip v-else title="没有权限">
    <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>
 </template>
 <script setup lang="ts" name="PermissionButton">
@ -49,13 +74,13 @@ const isPermission = computed(() => {
  return permissionStore.hasPermission(props.hasPermission)
 })
 const _isPermission = computed(() =>
-  'hasPermission' in props && isPermission
+  'hasPermission' in props && isPermission.value
    ? 'disabled' in buttonProps
      ? buttonProps.disabled
      : false
    : true
 )
 </script>
-<style scoped lang="scss">
+<style scoped lang="less">

 </style>
--- a/src/components/index.ts
+++ b/src/components/index.ts
@ -9,6 +9,7 @@ import Search from './Search'
 import NormalUpload from './NormalUpload/index.vue'
 import FileFormat from './FileFormat/index.vue'
 import JUpload from './JUpload/index.vue'
+import { BasicLayoutPage, BlankLayoutPage, PageContainer } from './Layout'

 export default  {
    install(app: App) {
@ -22,5 +23,8 @@ export default  {
            .component('NormalUpload', NormalUpload)
            .component('FileFormat', FileFormat)
            .component('JUpload', JUpload)
+            .component('BasicLayoutPage', BasicLayoutPage)
+            .component('BlankLayoutPage', BlankLayoutPage)
+            .component('PageContainer', PageContainer)
    }
 }
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -1,11 +1,12 @@
-import { createRouter, createWebHashHistory } from 'vue-router';
+import { createRouter, createWebHashHistory } from 'vue-router'
 import menus, { LoginPath } from './menu'
-import { LocalStore } from "@/utils/comm";
-import { TOKEN_KEY } from "@/utils/variable";
+import { getToken } from '@/utils/comm'
+import { useUserInfo } from '@/store/userInfo'
+import { useSystem } from '@/store/system'

 const router = createRouter({
-    history: createWebHashHistory(),
-    routes: menus
+  history: createWebHashHistory(),
+  routes: menus
 })

 const filterPath = [
@ -14,17 +15,45 @@ const filterPath = [
 ]

 router.beforeEach((to, from, next) => {
-    const token = LocalStore.get(TOKEN_KEY)
-    // TODO 切换路由取消请求
-    if (token || filterPath.includes(to.path)) {
-        next()
-    } else {
-        if (to.path === LoginPath) {
-            next()
+  // TODO 切换路由取消请求
+  const isFilterPath = filterPath.includes(to.path)
+  if (isFilterPath) {
+    next()
+  } else {
+    const token = getToken()
+    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 {
-            next({ path: LoginPath })
+          next()
        }
+      }
+
+    } else {
+      if (to.path === LoginPath) {
+        next()
+      } else {
+        next({ path: LoginPath })
+      }
    }
+  }
 })

 export default router
--- a/src/store/menu.ts
+++ b/src/store/menu.ts
@ -1,9 +1,12 @@
 import { defineStore } from "pinia";
+import { queryOwnThree } from '@/api/system/menu'
+import { filterAsnycRouter } from '@/utils/menu'

 export const useMenuStore = defineStore({
  id: 'menu',
  state: () => ({
-    menus: {} as {[key: string]: string},
+    menus: {},
+    menusKey: []
  }),
  getters:  {
    hasPermission(state) {
@ -19,6 +22,47 @@ export const useMenuStore = defineStore({
        }
        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)
+        }
+      })
    }
  }
 })
--- a/src/store/system.ts
+++ b/src/store/system.ts
@ -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)
+        }
+      })
+    }
+  }
+})
--- a/src/store/userInfo.ts
+++ b/src/store/userInfo.ts
@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { authLogin } from '@/api/login';
+import { authLogin, userDetail } from '@/api/login';
 import { LocalStore } from '@/utils/comm';
 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())
+            })
+        }
    },
 });
--- a/src/utils/comm.ts
+++ b/src/utils/comm.ts
@ -1,5 +1,7 @@
+import type { Slots } from 'vue'
 import { TOKEN_KEY } from '@/utils/variable'
 import { Terms } from 'components/Search/types'
+import { urlReg } from '@/utils/regular'

 /**
 * 静态图片资源处理
@ -10,32 +12,32 @@ export const getImage = (path: string) => {
 }

 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,13 +57,28 @@ 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;
 }

 /**
 * 时间转换为'2022-01-02 14:03:05'
 * @param date 时间对象
- * @returns 
+ * @returns
 */
 export const dateFormat = (dateSouce:any):string|Error => {
    let date = null
@ -82,5 +99,5 @@ export const dateFormat = (dateSouce:any):string|Error => {
    minutes = (minutes < 10) ? '0' + minutes : minutes;
    seconds = (seconds < 10) ? '0' + seconds : seconds;
    return year + "-" + month + "-" + day
-        + " " + hour + ":" + minutes + ":" + seconds;
+      + " " + hour + ":" + minutes + ":" + seconds;
 }
--- a/src/utils/encodeQuery.ts
+++ b/src/utils/encodeQuery.ts
@ -1,3 +1,5 @@
+import { isObject } from 'lodash-es'
+
 export default function encodeQuery(params: any) {
  if (!params) return {};
  const queryParam = {
@ -15,7 +17,7 @@ export default function encodeQuery(params: any) {
            terms[k] === '' ||
            terms[k] === undefined ||
            terms[k].length === 0 ||
-            terms[k] === {} ||
+            (isObject(terms[k]) && Object.keys(terms[k]).length === 0) ||
            terms[k] === null
          )
        ) {
--- a/src/utils/menu.ts
+++ b/src/utils/menu.ts
@ -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
+  })
+}
--- a/src/utils/regular.ts
+++ b/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)
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@ -118,6 +118,7 @@ const errorHandler = (error: any) => {
        const status = error.response.status
        if (status === 403) {
            Notification.error({
+                key: '403',
                message: 'Forbidden',
                description: (data.message + '').substr(0, 90)
            })
@ -129,22 +130,25 @@ const errorHandler = (error: any) => {
            }, 0)
        } else if (status === 500) {
            Notification.error({
+                key: '500',
                message: 'Server Side Error',
                description: (data.message + '').substr(0, 90)
            })
        } else if (status === 400) {
            Notification.error({
+                key: '400',
                message: 'Request Error',
                description: (data.message + '').substr(0, 90)
            })
        } else if (status === 401) {
            Notification.error({
+                key: '401',
                message: 'Unauthorized',
                description: 'Authorization verification failed'
            })
            setTimeout(() => {
                router.replace({
-                    name: 'login'
+                    path: LoginPath
                })
            }, 0)
        }
--- a/src/views/system/Basis/index.vue
+++ b/src/views/system/Basis/index.vue
@ -1,4 +1,5 @@
 <template>
+  <page-container>
    <a-card class="basis-container">
        <a-form
            layout="vertical"
@ -277,6 +278,7 @@
            >保存</a-button
        >
    </a-card>
+  </page-container>
 </template>

 <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 { usePermissionStore } from '@/store/permission';
+import PageContainer from 'components/Layout/components/PageContainer'

 const action = ref<string>(`${BASE_API_PATH}/file/static`);
 const headers = ref({ [TOKEN_KEY]: LocalStore.get(TOKEN_KEY) });
--- a/tsconfig.json
+++ b/tsconfig.json
@ -22,7 +22,7 @@
      "store/*": ["./src/store/*"],
      "style/*": ["./src/style/*"],
    },
-    "types": ["ant-design-vue/typings/global"],
+    "types": ["ant-design-vue/typings/global", "vite/client"],
    "suppressImplicitAnyIndexErrors": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
--- a/vite.config.ts
+++ b/vite.config.ts
@ -82,6 +82,7 @@ export default defineConfig(({ mode}) => {
                  // target: 'http://192.168.33.22:8800',
                  // target: 'http://192.168.32.244:8881',
                //   target: 'http://47.112.135.104:5096', // opcua
+                //   target: 'http://120.77.179.54:8844', // 120测试
                  target: 'http://47.108.63.174:8845', // 测试
                  changeOrigin: true,
                  rewrite: (path) => path.replace(/^\/api/, '')
--- a/yarn.lock
+++ b/yarn.lock