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

<script lang="tsx">
import { Dropdown, Menu, Layout } 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 { handleUserHome } from '@/utils/user';

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 appStore = useAppStore();

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

    const currentRouteName = computed(() => route.name as string);
    const currentRouteGroup = computed(() => route.meta?.group ?? 'GroupMain');
    const isHomeRoute = computed(() => currentRouteName.value === 'Home');
    const showAiSearch = computed(() => !route.meta?.hideAiSearch);

    const collapsed = computed(() => {
      return sidebarStore.menuCollapse;
    });

    const setCollapsed = (val) => {
      appStore.updateSettings({ menuCollapse: val });
    };
    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 = (item: typeMenuItem) => {
      let targetRoute = item.routeName;
      if (item.children?.length) {
        targetRoute = item.children[0].routeName;
      }
      router.push({ name: targetRoute });
    };
    const renderMenuItem = (item: typeMenuItem, hideLabel = false) => {
      const getMenuItemClass = () => {
        const hasChildren = item.children?.length;
        let target = !hasChildren ? 'sub-menu-item ' : '';
        if (hasChildren) {
          target += getCollapseMenuKey(currentRouteName.value) === item.key ? 'active' : '';
        } else {
          target += item.activeMatch?.includes(currentRouteName.value) ? 'active' : '';
        }
        return target;
      };

      return (
        <Menu.Item class={`menu-item ${getMenuItemClass()}`} onClick={() => onClickItem(item)}>
          {(() => {
            const isActive = getMenuItemClass() === 'active';
            const iconName = Array.isArray(item.icon)
              ? isActive
                ? item.icon[1] ?? item.icon[0]
                : item.icon[0]
              : item.icon;
            return <SvgIcon size="18" name={iconName as any} 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, collapsed.value);
        }
        return (
          <Dropdown
            overlayClassName="layout-sider-dropdown-xt"
            placement="rightTop"
            align={{ offset: [8, 0] }}
            v-slots={{
              overlay: () => {
                return (
                  <div class="p-8px bg-#fff container w-139px">
                    {item.children.map((child) => {
                      return renderMenuItem(child);
                    })}
                  </div>
                );
              },
            }}
          >
            {renderMenuItem(item, collapsed.value)}
          </Dropdown>
        );
      });
    };

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

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

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

    watch(
      () => currentRouteGroup.value,
      () => {
        init();
      },
      { immediate: false, deep: true },
    );

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

    return () => (
      <Layout.Sider
        v-model={collapsed.value}
        width={sidebarStore.sidebarWidth}
        collapsible
        trigger
        onCollapse={setCollapsed}
      >
        <Menu class={`siderBar-wrap w-full flex flex-col px-16px pt-16px ${collapsed.value ? 'menu-fold' : ''}`}>
          {showAiSearch.value && (
            <>
              <Menu.Item class={`menu-item !mb-0 ${isHomeRoute.value ? 'active' : ''}`} onClick={handleUserHome}>
                <img src={icon1} width={18} height={18} />
                {!collapsed.value && <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>
        </Menu>
        <div
          class={`bg-#F6F5FC flex items-center absolute bottom-0 w-full pt-8px px-16px pb-16px right-0 ${
            collapsed.value ? 'justify-center' : 'justify-end'
          }`}
        >
          <div
            class="flex fold-btn items-center cursor-pointer h-22px "
            onClick={() => {
              sidebarStore.setMenuCollapse();
            }}
          >
            {collapsed.value ? (
              <icon-menu-unfold size={16} class="color-#55585F icon mr-4px" />
            ) : (
              <icon-menu-fold size={16} class="color-#55585F icon mr-4px" />
            )}
            {!collapsed.value && <span class="cts !color-#55585F flex-shrink-0">收起</span>}
          </div>
        </div>
      </Layout.Sider>
    );
  },
});
</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) !important;
        color: #6d4cfe !important;
        .svg-icon {
          color: #6d4cfe !important;
        }
      }
      // &.active {
      //   background-color: rgba(109, 76, 254, 0.08);
      //   color: #6d4cfe;
      //   .label,
      //   .svg-icon {
      //     color: #6d4cfe;
      //   }
      // }
    }
  }
}
</style>