xihuaDesign/src/views/website/components/layout/Menu.tsx

import { css } from "@linaria/core";
import { Dropdown, Menu } from "ant-design-vue";

import { defineComponent } from "vue";
import { RouterLink } from "vue-router";
import { any } from "vue-types";
export default defineComponent({
  props: {
    data: any(),
  },
  setup(props) {
    return () => (
      <div class={MenuLayout}>
        {props.data.map((e: CategoryItem) => {
          return <Menus data={e} />;
        })}
      </div>
    );
  },
});
const Menus = defineComponent({
  props: {
    data: any(),
  },
  setup(props) {
    const menuRender = (dropUrls: any) => {
      return (
        <Menu class={DropMenu}>
          {dropUrls.map((e: CategoryItem) => {
            return (
              <Menu.Item>
                <RouterLink to={`/detail/${e._id}`}>{e.name}</RouterLink>
              </Menu.Item>
            );
          })}
        </Menu>
      );
    };

    return () => {
      const menu = props.data;
      return (
        <>
          {menu.children && menu.children.length > 0 ? (
            <Dropdown overlay={menuRender(menu.children)}>
              <RouterLink to={`/detail/${menu._id}`}>{menu.name}</RouterLink>
            </Dropdown>
          ) : (
            <RouterLink to={`/detail/${menu._id}`}>{menu.name}</RouterLink>
          )}
        </>
      );
    };
  },
});
const MenuLayout = css`
  display: flex;
  align-items: center;
  a {
    flex: 1;
    position: relative;
    margin-top: 16px;
    padding-bottom: 22px;
    font-size: 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    &:hover {
      color: rgba(255, 255, 255, 1);
      &::before {
        width: 24px;
      }
    }
    &::before {
      content: "";
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 2px;
      background-color: rgba(255, 255, 255, 1);
      transition: width 0.3s ease-in-out;
    }
    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      height: 16px;
      border-right: 1px solid rgba(255, 255, 255, 0.3);
      transform: skewX(-15deg);
    }
    &:last-child {
      &::after {
        display: none;
      }
    }
  }
`;
const DropMenu = css`
  &.ant-dropdown-menu {
    padding: 10px 0;
    border-radius: 0;
    .ant-dropdown-menu-item {
      padding: 0;
      &:hover {
        a {
          color: var(--vt-c-primary);
        }
      }
      a {
        padding: 8px 12px;
        display: block;
        text-align: center;
      }
    }
  }
`;