项目初始化

2026-03-19 10:57:24 +08:00
commit ee94d420ad
3822 changed files with 582614 additions and 0 deletions
--- a/web-vue/packages/core/components/Menu/src/BasicMenu.vue
+++ b/web-vue/packages/core/components/Menu/src/BasicMenu.vue
@@ -0,0 +1,174 @@
+<template>
+  <AMenu
+    :selectedKeys="selectedKeys"
+    :defaultSelectedKeys="defaultSelectedKeys"
+    :mode="mode"
+    :openKeys="getOpenKeys"
+    :inlineIndent="inlineIndent"
+    :theme="theme"
+    @open-change="handleOpenChange"
+    :class="getMenuClass"
+    @click="handleMenuClick"
+    :subMenuOpenDelay="0.2"
+    v-bind="getInlineCollapseOptions"
+  >
+    <slot name="menuBefore"></slot>
+    <template v-for="item in items" :key="item.path">
+      <BasicSubMenuItem :item="item" :theme="theme" :isHorizontal="isHorizontal" />
+    </template>
+    <slot name="menuAfter"></slot>
+  </AMenu>
+</template>
+<script lang="ts">
+  import type { MenuState } from './types';
+  import { computed, defineComponent, reactive, ref, toRefs, unref, watch } from 'vue';
+  import { Menu } from 'ant-design-vue';
+  import BasicSubMenuItem from './components/BasicSubMenuItem.vue';
+  import { MenuModeEnum, MenuTypeEnum } from '@jeesite/core/enums/menuEnum';
+  import { useOpenKeys } from './useOpenKeys';
+  import { RouteLocationNormalizedLoaded, useRouter } from 'vue-router';
+  import { isFunction } from '@jeesite/core/utils/is';
+  import { basicProps } from './props';
+  import { useMenuSetting } from '@jeesite/core/hooks/setting/useMenuSetting';
+  import { REDIRECT_NAME } from '@jeesite/core/router/constant';
+  import { useDesign } from '@jeesite/core/hooks/web/useDesign';
+  import { getCurrentParentPath } from '@jeesite/core/router/menus';
+  import { listenerRouteChange } from '@jeesite/core/logics/mitt/routeChange';
+  import { getAllParentPath } from '@jeesite/core/router/helper/menuHelper';
+  import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+
+  export default defineComponent({
+    name: 'BasicMenu',
+    components: {
+      AMenu: Menu,
+      BasicSubMenuItem,
+    },
+    props: basicProps,
+    emits: ['menuClick'],
+    setup(props, { emit }) {
+      const isClickGo = ref(false);
+      // const currentActiveMenu = ref('');
+
+      const menuState = reactive<MenuState>({
+        defaultSelectedKeys: [],
+        openKeys: [],
+        selectedKeys: [],
+        collapsedOpenKeys: [],
+      });
+
+      const { prefixCls } = useDesign('basic-menu');
+      const { items, mode, accordion } = toRefs(props);
+
+      const { getCollapsed, getTopMenuAlign, getSplit } = useMenuSetting();
+
+      const { currentRoute } = useRouter();
+
+      const { handleOpenChange, setOpenKeys, getOpenKeys } = useOpenKeys(menuState, items, mode as any, accordion);
+
+      const getIsTopMenu = computed(() => {
+        const { type, mode } = props;
+
+        return (
+          (type === MenuTypeEnum.TOP_MENU && mode === MenuModeEnum.HORIZONTAL) ||
+          (props.isHorizontal && unref(getSplit))
+        );
+      });
+
+      const getMenuClass = computed(() => {
+        const align = props.isHorizontal && unref(getSplit) ? 'start' : unref(getTopMenuAlign);
+        return [
+          prefixCls,
+          `justify-${align}`,
+          {
+            [`${prefixCls}__second`]: !props.isHorizontal && unref(getSplit),
+            [`${prefixCls}__sidebar-hor`]: unref(getIsTopMenu),
+          },
+        ];
+      });
+
+      const getInlineCollapseOptions = computed(() => {
+        const isInline = props.mode === MenuModeEnum.INLINE;
+
+        const inlineCollapseOptions: { inlineCollapsed?: boolean } = {};
+        if (isInline) {
+          inlineCollapseOptions.inlineCollapsed = props.mixSider ? false : unref(getCollapsed);
+        }
+        return inlineCollapseOptions;
+      });
+
+      !props.mixSider &&
+        watch(
+          () => props.items,
+          () => {
+            handleMenuChange();
+          },
+        );
+
+      listenerRouteChange((route) => {
+        if (route.name === REDIRECT_NAME) return;
+        // currentActiveMenu.value = route.meta?.currentActiveMenu as string;
+        // if (unref(currentActiveMenu)) {
+        //   menuState.selectedKeys = [unref(currentActiveMenu)];
+        //   setOpenKeys(unref(currentActiveMenu));
+        // }
+        handleMenuChange(route);
+      });
+
+      async function handleMenuChange(route?: RouteLocationNormalizedLoaded) {
+        if (unref(isClickGo)) {
+          isClickGo.value = false;
+          return;
+        }
+        // const path = (route || unref(currentRoute)).path;
+        const currRoute = route || unref(currentRoute);
+        const path = (currRoute.meta?.currentActiveMenu as string) || currRoute.path;
+
+        await setOpenKeys(path);
+
+        if (menuState.openKeys.length > 0) {
+          menuState.selectedKeys = menuState.openKeys;
+        } else {
+          if (props.isHorizontal && unref(getSplit)) {
+            const parentPath = await getCurrentParentPath(path);
+            menuState.selectedKeys = [parentPath];
+          } else {
+            menuState.selectedKeys = getAllParentPath(props.items, path);
+          }
+        }
+      }
+
+      async function handleMenuClick({ item, key }: MenuInfo) {
+        // { item: any; key: string; keyPath: string[] }) {
+        const { beforeClickFn } = props;
+        if (beforeClickFn && isFunction(beforeClickFn)) {
+          const flag = await beforeClickFn(key as string);
+          if (!flag) return;
+        }
+        emit('menuClick', key, item);
+
+        isClickGo.value = true;
+
+        await setOpenKeys(key as string);
+
+        if (menuState.openKeys.length > 0) {
+          menuState.selectedKeys = menuState.openKeys;
+        } else {
+          menuState.selectedKeys = [key as string];
+        }
+        // console.log('TopMenuClick', menuState.selectedKeys, menuState.openKeys);
+      }
+
+      return {
+        getInlineCollapseOptions,
+        getMenuClass,
+        handleOpenChange,
+        getOpenKeys,
+        handleMenuClick,
+        ...toRefs(menuState),
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @import './index.less';
+</style>
--- a/web-vue/packages/core/components/Menu/src/components/BasicMenuItem.vue
+++ b/web-vue/packages/core/components/Menu/src/components/BasicMenuItem.vue
@@ -0,0 +1,24 @@
+<template>
+  <MenuItem :key="item.path" v-bind="getMenuItem">
+    <MenuItemContent v-bind="$props" :item="item" />
+  </MenuItem>
+</template>
+<script lang="ts">
+  import { computed, defineComponent } from 'vue';
+  import { Menu } from 'ant-design-vue';
+  import { itemProps } from '../props';
+  import { omit } from 'lodash-es';
+  import MenuItemContent from './MenuItemContent.vue';
+
+  export default defineComponent({
+    name: 'BasicMenuItem',
+    components: { MenuItem: Menu.Item, MenuItemContent },
+    props: itemProps,
+    setup(props) {
+      const getMenuItem = computed(() => {
+        return omit(props.item, 'children', 'icon', 'title', 'color', 'extend');
+      });
+      return { getMenuItem };
+    },
+  });
+</script>
--- a/web-vue/packages/core/components/Menu/src/components/BasicSubMenuItem.vue
+++ b/web-vue/packages/core/components/Menu/src/components/BasicSubMenuItem.vue
@@ -0,0 +1,55 @@
+<template>
+  <BasicMenuItem v-if="!menuHasChildren(item) && getShowMenu" v-bind="$props" />
+  <SubMenu
+    v-if="menuHasChildren(item) && getShowMenu"
+    :class="[theme]"
+    :key="`submenu-${item.path}`"
+    popupClassName="app-top-menu-popup"
+  >
+    <template #title>
+      <MenuItemContent v-bind="$props" :item="item" />
+    </template>
+
+    <template v-for="childrenItem in item.children || []" :key="childrenItem.path">
+      <BasicSubMenuItem v-bind="$props" :item="childrenItem" />
+    </template>
+  </SubMenu>
+</template>
+<script lang="ts">
+  import type { Menu as MenuType } from '@jeesite/core/router/types';
+  import { defineComponent, computed } from 'vue';
+  import { Menu } from 'ant-design-vue';
+  import { useDesign } from '@jeesite/core/hooks/web/useDesign';
+  import { itemProps } from '../props';
+  import BasicMenuItem from './BasicMenuItem.vue';
+  import MenuItemContent from './MenuItemContent.vue';
+
+  export default defineComponent({
+    name: 'BasicSubMenuItem',
+    isSubMenu: true,
+    components: {
+      BasicMenuItem,
+      SubMenu: Menu.SubMenu,
+      MenuItemContent,
+    },
+    props: itemProps,
+    setup(props) {
+      const { prefixCls } = useDesign('basic-menu-item');
+
+      const getShowMenu = computed(() => !props.item.meta?.hideMenu);
+      function menuHasChildren(menuTreeItem: MenuType): boolean {
+        return (
+          !menuTreeItem.meta?.hideChildrenInMenu &&
+          Reflect.has(menuTreeItem, 'children') &&
+          !!menuTreeItem.children &&
+          menuTreeItem.children.length > 0
+        );
+      }
+      return {
+        prefixCls,
+        menuHasChildren,
+        getShowMenu,
+      };
+    },
+  });
+</script>
--- a/web-vue/packages/core/components/Menu/src/components/MenuItemContent.vue
+++ b/web-vue/packages/core/components/Menu/src/components/MenuItemContent.vue
@@ -0,0 +1,36 @@
+<template>
+  <span :class="`${prefixCls}- flex items-center `" :style="`color: ${getColor}`">
+    <Icon v-if="getIcon" :icon="getIcon" :size="18" :class="`${prefixCls}-wrapper__icon mr-2`" />
+    {{ getI18nName }}
+  </span>
+</template>
+<script lang="ts">
+  import { computed, defineComponent } from 'vue';
+
+  import Icon from '@jeesite/core/components/Icon';
+  import { useI18n } from '@jeesite/core/hooks/web/useI18n';
+  import { useDesign } from '@jeesite/core/hooks/web/useDesign';
+  import { contentProps } from '../props';
+  const { t } = useI18n();
+
+  export default defineComponent({
+    name: 'MenuItemContent',
+    components: {
+      Icon,
+    },
+    props: contentProps,
+    setup(props) {
+      const { prefixCls } = useDesign('basic-menu-item-content');
+      const getI18nName = computed(() => t(props.item?.name));
+      const getIcon = computed(() => props.item?.icon);
+      const getColor = computed(() => props.item?.color);
+
+      return {
+        prefixCls,
+        getI18nName,
+        getIcon,
+        getColor,
+      };
+    },
+  });
+</script>
--- a/web-vue/packages/core/components/Menu/src/index.less
+++ b/web-vue/packages/core/components/Menu/src/index.less
@@ -0,0 +1,138 @@
+@basic-menu-prefix-cls: ~'jeesite-basic-menu';
+
+.app-top-menu-popup {
+  min-width: 150px;
+}
+
+.ant-menu.@{basic-menu-prefix-cls} {
+  width: 100%;
+
+  .ant-menu-item {
+    transition: unset;
+  }
+
+  .ant-menu-item::after,
+  .ant-menu-submenu::after {
+    border-bottom: 2px solid transparent !important;
+  }
+
+  &__sidebar-hor {
+    &.ant-menu-horizontal {
+      display: flex;
+      align-items: center;
+      border-bottom: 0; // 1px solid @header-light-bottom-border-color;
+
+      .ant-menu-item,
+      .ant-menu-submenu {
+        margin: 4.5px 2px 0;
+        padding: 0 13px;
+        height: calc(@header-height - 10px);
+        line-height: calc(@header-height - 10px);
+        border-radius: 10px;
+      }
+
+      &.ant-menu-light {
+        .ant-menu-item,
+        .ant-menu-submenu {
+          margin: 4px 2px 0;
+        }
+
+        .ant-menu-submenu:hover,
+        .ant-menu-item-open,
+        .ant-menu-submenu-open,
+        .ant-menu-item-selected,
+        .ant-menu-submenu-selected,
+        .ant-menu-item:hover,
+        .ant-menu-item-active,
+        .ant-menu-submenu-active {
+          color: @primary-color;
+          background-color: fade(@primary-color, 10);
+        }
+
+        .ant-menu-submenu-title:hover {
+          color: @primary-color;
+        }
+      }
+
+      &.ant-menu-dark {
+        background-color: transparent;
+        color: #efefef;
+
+        .ant-menu-item,
+        .ant-menu-submenu {
+          &.@{basic-menu-prefix-cls}-item__level1,
+          .ant-menu-submenu-title {
+            height: calc(@header-height - 10px);
+            line-height: calc(@header-height - 10px);
+          }
+        }
+
+        .ant-menu-submenu:hover,
+        .ant-menu-item-open,
+        .ant-menu-submenu-open,
+        .ant-menu-item-selected,
+        .ant-menu-submenu-selected,
+        .ant-menu-item:hover,
+        .ant-menu-item-active,
+        .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
+        .ant-menu-submenu-active,
+        .ant-menu-submenu-title:hover {
+          color: #fff;
+          background-color: @top-menu-active-bg-color !important;
+        }
+
+        .ant-menu-item:hover,
+        .ant-menu-item-active,
+        .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
+        .ant-menu-submenu-active,
+        .ant-menu-submenu-title:hover {
+          background-color: @top-menu-active-bg-color;
+        }
+
+        .@{basic-menu-prefix-cls}-item__level1 {
+          background-color: transparent;
+
+          &.ant-menu-item-selected,
+          &.ant-menu-submenu-selected {
+            background-color: @top-menu-active-bg-color !important;
+          }
+        }
+      }
+    }
+  }
+
+  .ant-menu-submenu,
+  .ant-menu-submenu-inline {
+    transition: unset;
+  }
+
+  .ant-menu-inline.ant-menu-sub {
+    box-shadow: unset !important;
+    transition: unset;
+  }
+}
+
+html[data-theme='dark'] {
+  .ant-menu.@{basic-menu-prefix-cls} {
+    &__sidebar-hor {
+      &.ant-menu-horizontal {
+        .ant-menu-item,
+        .ant-menu-submenu {
+          color: #c2c2c2 !important;
+        }
+
+        .ant-menu-submenu:hover,
+        .ant-menu-item-open,
+        .ant-menu-submenu-open,
+        .ant-menu-item-selected,
+        .ant-menu-submenu-selected,
+        .ant-menu-item:hover,
+        .ant-menu-item-active,
+        .ant-menu-submenu-active {
+          color: #fff !important;
+          background-color: #262626 !important;
+        }
+      }
+    }
+  }
+}
--- a/web-vue/packages/core/components/Menu/src/props.ts
+++ b/web-vue/packages/core/components/Menu/src/props.ts
@@ -0,0 +1,60 @@
+import type { Menu } from '@jeesite/core/router/types';
+import type { PropType } from 'vue';
+
+import { MenuModeEnum, MenuTypeEnum } from '@jeesite/core/enums/menuEnum';
+import { ThemeEnum } from '@jeesite/core/enums/appEnum';
+import { propTypes } from '@jeesite/core/utils/propTypes';
+import type { MenuTheme } from 'ant-design-vue';
+import type { MenuMode } from 'ant-design-vue/lib/menu/src/interface';
+
+export const basicProps = {
+  items: {
+    type: Array as PropType<Menu[]>,
+    default: () => [],
+  },
+  collapsedShowTitle: propTypes.bool,
+  // 最好是4 倍数
+  inlineIndent: propTypes.number.def(20),
+  // 菜单组件的mode属性
+  mode: {
+    type: String as PropType<MenuMode>,
+    default: MenuModeEnum.INLINE,
+  },
+  type: {
+    type: String as PropType<MenuTypeEnum>,
+    default: MenuTypeEnum.MIX,
+  },
+  theme: {
+    type: String as PropType<MenuTheme>,
+    default: ThemeEnum.DARK,
+  },
+  inlineCollapsed: propTypes.bool,
+  mixSider: propTypes.bool,
+
+  isHorizontal: propTypes.bool,
+  accordion: propTypes.bool.def(true),
+  beforeClickFn: {
+    type: Function as PropType<(key: string) => Promise<boolean>>,
+  },
+};
+
+export const itemProps = {
+  item: {
+    type: Object as PropType<Menu>,
+    default: {},
+  },
+  level: propTypes.number,
+  theme: propTypes.oneOf(['dark', 'light']),
+  showTitle: propTypes.bool,
+  isHorizontal: propTypes.bool,
+};
+
+export const contentProps = {
+  item: {
+    type: Object as PropType<Menu>,
+    default: null,
+  },
+  showTitle: propTypes.bool.def(true),
+  level: propTypes.number.def(0),
+  isHorizontal: propTypes.bool.def(true),
+};
--- a/web-vue/packages/core/components/Menu/src/types.ts
+++ b/web-vue/packages/core/components/Menu/src/types.ts
@@ -0,0 +1,25 @@
+// import { ComputedRef } from 'vue';
+// import { ThemeEnum } from '@jeesite/core/enums/appEnum';
+// import { MenuModeEnum } from '@jeesite/core/enums/menuEnum';
+export interface MenuState {
+  // 默认选中的列表
+  defaultSelectedKeys: string[];
+
+  // 模式
+  // mode: MenuModeEnum;
+
+  // // 主题
+  // theme: ComputedRef<ThemeEnum> | ThemeEnum;
+
+  // 缩进
+  inlineIndent?: number;
+
+  // 展开数组
+  openKeys: string[];
+
+  // 当前选中的菜单项 key 数组
+  selectedKeys: string[];
+
+  // 收缩状态下展开的数组
+  collapsedOpenKeys: string[];
+}
--- a/web-vue/packages/core/components/Menu/src/useOpenKeys.ts
+++ b/web-vue/packages/core/components/Menu/src/useOpenKeys.ts
@@ -0,0 +1,102 @@
+import { MenuModeEnum } from '@jeesite/core/enums/menuEnum';
+import type { Menu as MenuType } from '@jeesite/core/router/types';
+import type { MenuState } from './types';
+
+import { computed, Ref, toRaw } from 'vue';
+
+import { unref } from 'vue';
+import { uniq } from 'lodash-es';
+import { useMenuSetting } from '@jeesite/core/hooks/setting/useMenuSetting';
+import { getAllParentPath } from '@jeesite/core/router/helper/menuHelper';
+import { useTimeoutFn } from '@jeesite/core/hooks/core/useTimeout';
+
+export function useOpenKeys(
+  menuState: MenuState,
+  menus: Ref<MenuType[]>,
+  mode: Ref<MenuModeEnum>,
+  accordion: Ref<boolean>,
+) {
+  const { getCollapsed, getIsMixSidebar } = useMenuSetting();
+
+  async function setOpenKeys(path: string) {
+    if (mode.value === MenuModeEnum.HORIZONTAL) {
+      return;
+    }
+    const native = unref(getIsMixSidebar);
+    useTimeoutFn(
+      () => {
+        const menuList = toRaw(menus.value);
+        // console.log('TopMenu.menuList', menuList);
+        if (menuList?.length === 0) {
+          menuState.openKeys = [];
+          return;
+        }
+        let keys: string[] = getAllParentPath(menuList, path);
+        // console.log('TopMenu.getAllParentPath', path, keys, menuList);
+        // if (keys.length === 0) {
+        //   const currentPaths = sessionStorage.getItem('temp-menu-paths');
+        //   if (currentPaths) {
+        //     keys = currentPaths.split(',');
+        //   }
+        // } else {
+        //   sessionStorage.setItem('temp-menu-paths', keys.join(','));
+        // }
+        if (keys.length === 0) {
+          return;
+        }
+
+        if (!unref(accordion)) {
+          menuState.openKeys = uniq([...menuState.openKeys, ...keys]);
+        } else {
+          menuState.openKeys = keys;
+        }
+        // console.log('TopMenu.setOpenKeys', path, menuState.openKeys);
+      },
+      16,
+      !native,
+    );
+  }
+
+  const getOpenKeys = computed(() => {
+    const collapse = unref(getIsMixSidebar) ? false : unref(getCollapsed);
+
+    return collapse ? menuState.collapsedOpenKeys : menuState.openKeys;
+  });
+
+  /**
+   * @description:  重置值
+   */
+  function resetKeys() {
+    menuState.selectedKeys = [];
+    menuState.openKeys = [];
+  }
+
+  type Key = string | number;
+
+  function handleOpenChange(openKey: Key[]) {
+    const openKeys = openKey as unknown as string[];
+    if (unref(mode) === MenuModeEnum.HORIZONTAL || !unref(accordion) || unref(getIsMixSidebar)) {
+      menuState.openKeys = openKeys;
+    } else {
+      // const menuList = toRaw(menus.value);
+      // getAllParentPath(menuList, path);
+      const rootSubMenuKeys: string[] = [];
+      for (const { children, path } of unref(menus)) {
+        if (children && children.length > 0) {
+          rootSubMenuKeys.push(path);
+        }
+      }
+      if (!unref(getCollapsed)) {
+        const latestOpenKey = openKeys.find((key) => menuState.openKeys.indexOf(key) === -1);
+        if (rootSubMenuKeys.indexOf(latestOpenKey as string) === -1) {
+          menuState.openKeys = openKeys;
+        } else {
+          menuState.openKeys = latestOpenKey ? [latestOpenKey] : [];
+        }
+      } else {
+        menuState.collapsedOpenKeys = openKeys;
+      }
+    }
+  }
+  return { setOpenKeys, resetKeys, getOpenKeys, handleOpenChange };
+}