classroom-instruments/src/components/layout/layoutSilder.tsx

import { defineComponent, onMounted, reactive } from 'vue';
import { NImage } from 'naive-ui';
import styles from './index.module.less';
import logo from './images/logo.png';
import classIcon from './images/classIcon.png';
import classNormal from './images/classNormal.png';
import indexIcon from './images/indexIcon.png';
import indexNormal from './images/indexNormal.png';
import kuIcon from './images/kuIcon.png';
import kuNormal from './images/kuNormal.png';
import palyIcon from './images/palyIcon.png';
import palyNormal from './images/palyNormal.png';
import resourceIcon from './images/resourceIcon.png';
import resourceNormal from './images/resourceNormal.png';
import setIcon from './images/setIcon.png';
import setNormal from './images/setNormal.png';
import studentIcon from './images/studentIcon.png';
import studentNormal from './images/studentNormal.png';
import SilderItem from './modals/silderItem';
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
export default defineComponent({
  name: 'layoutSilder',
  setup() {
    const router = useRouter();
    const route = useRoute();
    const itemInfoList = reactive([
      {
        activeIcon: indexIcon,
        name: '主页',
        normalIcon: indexNormal,
        isActive: true,
        id: 1,
        path: '/'
      },
      {
        activeIcon: classIcon,
        name: '班级',
        normalIcon: classNormal,
        isActive: false,
        id: 3,
        path: '/classList'
      },
      {
        activeIcon: studentIcon,
        name: '学生',
        normalIcon: studentNormal,
        isActive: false,
        id: 2,
        path: '/studentList'
      },

      {
        activeIcon: palyIcon,
        name: '备课',
        normalIcon: palyNormal,
        isActive: false,
        id: 4,
        path: '/prepare-lessons'
      },
      {
        activeIcon: kuIcon,
        name: '小酷AI',
        normalIcon: kuNormal,
        isActive: false,
        id: 5,
        lightList: ['/xiaoku-music'], //小酷AI的灯光列表
        path: '/xiaoku-ai'
      },
      {
        activeIcon: resourceIcon,
        name: '资源',
        normalIcon: resourceNormal,
        isActive: false,
        id: 6,
        path: '/natural-resources'
      },
      {
        activeIcon: setIcon,
        name: '设置',
        normalIcon: setNormal,
        isActive: false,
        id: 7,
        path: '/setting'
      }
    ]);
    const checkNavBar = (item: any) => {
      itemInfoList.forEach((now: any) => {
        now.isActive = false;
        if (now.id == item.id) {
          now.isActive = true;
          // console.log(item.path);
          item.path && router.push(item.path);
        }
      });
    };

    onBeforeRouteUpdate((to: any) => {
      console.log(to, 'to');
      checkPathChange(to.path);
    });

    const checkPathChange = (path: string) => {
      itemInfoList.forEach((now: any) => {
        now.isActive = false;
        if (now.path === path || now.lightList?.includes(path)) {
          now.isActive = true;
        }
      });
    };

    onMounted(() => {
      checkPathChange(route.path);
    });
    return () => (
      <>
        <div class={styles.silder}>
          <div class={styles.logoWrap}>
            <NImage class={styles.logo} src={logo} preview-disabled></NImage>
          </div>
          <div class={styles.sliderList}>
            {itemInfoList.map((item: any) => (
              <SilderItem onCheckNavBar={checkNavBar} item={item} />
            ))}
          </div>
        </div>
      </>
    );
  }
});