lingji-work-fe/src/layouts/components/siderBar/index.vue

<script lang="tsx">
import { Dropdown, Menu } from 'ant-design-vue';
import type { RouteMeta, RouteRecordRaw } from 'vue-router';
import { useRoute } from 'vue-router';
import SvgIcon from '@/components/svg-icon/index.vue';

import { useAppStore } from '@/stores';
import { useSidebarStore } from '@/stores/modules/side-bar';
import { MENU_LIST } from './menu-list';
import type { typeMenuItem } from './menu-list';

import icon1 from '@/assets/img/agent/icon1.png';

export default defineComponent({
  emit: ['collapse'],
  setup() {
    // const appStore = useAppStore();
    const router = useRouter();
    const route = useRoute();

    const sidebarStore = useSidebarStore();

    const currentMenuList = ref<typeMenuItem[]>([]);
    const currentMenuModInfo = ref<typeMenuItem>({});

    const currentRouteName = computed(() => route.name as string);
    const currentRouteGroup = computed(() => route.meta?.group ?? 'GroupMain');

    const getCollapseMenuKey = (routeName: string): string => {
      let _key: string;
      for (let i = 0; i < currentMenuList.value.length; i++) {
        const menuItem = currentMenuList.value[i];

        // 检查是否有list子级
        if (menuItem.children?.length > 0) {
          for (let j = 0; j < menuItem.children.length; j++) {
            const subMenuItem = menuItem.children[j];
            if (subMenuItem.activeMatch?.includes(routeName)) {
              currentMenuModInfo.value = menuItem;
              _key = menuItem.key;
              break;
            }
          }
        } else {
          // 没有list子级，直接检查当前项
          if (menuItem.routeName === routeName) {
            currentMenuModInfo.value = menuItem;
            _key = menuItem.key;
            break;
          }
        }
      }
      return _key;
    };
    const onClickItem = (name: string) => {
      router.push({ name });
    };
    const renderMenuItem = (item: typeMenuItem, hideLabel = false) => {
      const getMenuItemClass = () => {
        if (item.children?.length) {
          return getCollapseMenuKey(currentRouteName.value) === item.key ? 'active' : '';
        }
        return item.activeMatch?.includes(currentRouteName.value) ? 'active' : '';
      };

      return (
        <Menu.Item class={`menu-item ${getMenuItemClass()}`} onClick={() => onClickItem(item.routeName)}>
          <SvgIcon size="18" name={item.icon} alt="状态图标" class="color-#55585F flex-shrink-0" />
          {!hideLabel && <span class="cts label">{item.label}</span>}
        </Menu.Item>
      );
    };
    const renderMenuList = () => {
      return currentMenuList.value.map((item) => {
        if (!item.children) {
          return renderMenuItem(item, sidebarStore.menuCollapse);
        }
        return (
          <Dropdown
            overlayClassName="layout-sider-dropdown-xt"
            placement="rightTop"
            v-slots={{
              overlay: () => {
                return (
                  <div class="p-8px bg-#fff container">
                    {item.children.map((child) => {
                      return renderMenuItem(child);
                    })}
                  </div>
                );
              },
            }}
          >
            {renderMenuItem(item, sidebarStore.menuCollapse)}
          </Dropdown>
        );
      });
    };

    const initMenuList = () => {
      const groupMenuList = MENU_LIST?.[currentRouteGroup.value as string];
      currentMenuList.value = cloneDeep(groupMenuList);
    };
    const initCollapse = () => {
      getCollapseMenuKey(currentRouteName.value);

      if (currentMenuModInfo.value) {
        sidebarStore.setActiveMenuKey(currentMenuModInfo.value?.key);
      }
    };
    const init = () => {
      // 初始化菜单数据
      initMenuList();

      // 初始化菜单展开项
      initCollapse();
    };

    onMounted(() => {
      init();
    });

    return () => (
      <Menu class={`siderBar-wrap p-16px w-full h-full flex flex-col ${sidebarStore.menuCollapse ? 'menu-fold' : ''}`}>
        <Menu.Item
          class={`menu-item !mb-0 ${currentRouteName.value === 'Home' ? 'active' : ''}`}
          onClick={() => onClickItem('Home')}
        >
          <img src={icon1} width={18} height={18} />
          {!sidebarStore.menuCollapse && <span class="cts label">智能搜索</span>}
        </Menu.Item>
        <div class="line w-full h-1px bg-#211F24 my-12px"></div>
        <div class="flex flex-col flex-1">
          <div class="menu-list flex-1">{renderMenuList()}</div>
          <div class="flex justify-end items-center">
            <div
              class="flex fold-btn items-center cursor-pointer"
              onClick={() => {
                sidebarStore.setMenuCollapse();
              }}
            >
              {sidebarStore.menuCollapse ? (
                <icon-menu-unfold size={16} class="color-#55585F icon mr-4px" />
              ) : (
                <icon-menu-fold size={16} class="color-#55585F icon mr-4px" />
              )}
              {!sidebarStore.menuCollapse && <span class="cts !color-#55585F flex-shrink-0">展开</span>}
            </div>
          </div>
        </div>
      </Menu>
    );
  },
});
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
<style lang="scss">
@import './style.scss';
.layout-sider-dropdown-xt {
  .container {
    border-radius: 8px;
    background: var(--BG-White, #fff);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
    .menu-item {
      @include menu-item;
      padding: 8px;
      &:hover {
        background-color: rgba(109, 76, 254, 0.08);
        color: #6d4cfe;
        .svg-icon {
          color: #6d4cfe;
        }
      }
      &.active {
        background-color: #fff !important;
        .label,
        .svg-icon {
          color: #6d4cfe;
        }
      }
    }
  }
}
</style>