<template>
  <div class="w-test">
    <div>
      <div>
        <router-link to="/">系统首页</router-link>
        
        <router-link v-for="(path,index) in list" :to="'./'+path" :key="index">{{ path }}</router-link>
      </div>
    </div>
    <div>
      <div>
        <router-view />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const list = ref([]);
let files = import.meta.glob("@/views/test/*.vue");

for (let fileName in files) {
  let moduleName = fileName.replace(/^.*\/(\w+)\.vue$/, "$1");
  // if (moduleName == "index") {
  //   continue;
  // }
  list.value.push(moduleName);
}
</script>
<style lang="scss" scoped>
.w-test {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 2rem;

  & > div {
    position: relative;

    & > div {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    &:last-child > div {
      overflow: auto;
    }
    &:first-child {
      background-image: linear-gradient(to right, #fff 70%, #0001);
      & > div {
        padding: 1rem 0;

        & > a {
          display: flex;
          font-size: 0.9rem;
          position: relative;
          height: 2rem;
          align-items: center;
          justify-content: center;
          transition: all 0.5s;
          margin: 0.3rem 0;
          color: var(--el-color-primary-dark-2);
          border: solid 0.1rem #0000;

          &:not(.router-link-exact-active):hover {
            background-color: #fff;
            color: var(--el-color-primary-dark-3);
            border: solid 0.1rem var(--el-color-primary-dark-3);
            transform: scale(0.95);
          }
          &::after {
            content: "";
            position: absolute;
            box-sizing: border-box;
            right: 0rem;
            width: 1rem;
            height: 2rem;
            border: solid 1rem #0000;
            border-right-width: 0;
            border-left-color: var(--c, #0000);
            transition: all 0.5s;
          }

          &.router-link-exact-active {
            --c: var(--el-color-primary-dark-2);
            background-color: var(--c);
            color: #fff;
            transform: scale(1.05);
            &:hover {
              --c: var(--el-color-primary-dark-3);
            }
            &::after {
              right: -1rem;
            }
          }
        }
      }
    }
  }
}
</style>