baozhida-building-system/src/layout/components/Sidebar/index.vue

<template>
  <div :class="{ 'has-logo': showLogo }">
    <div class="sidebar_box_bottom">
      <div class="arrow-icon_left" @click="arrowBack" @mousedown="handleMouseDown" @mouseup="handleMouseUp">
        <el-icon size="60" :color="getShowLeft ? '#0077fa' : 'rgb(0, 51, 115)'">
          <ArrowLeft />
        </el-icon>
        <div class="white_box_left">
          <el-icon size="30" :color="getShowLeft ? '#ffffff' : 'rgb(87, 94, 113)'">
            <ArrowLeftBold />
          </el-icon>
        </div>
        <div class="white_box_left_il">
          <el-icon size="22" :color="getShowLeft ? 'rgb(25, 148, 219)' : 'rgb(10, 61, 105)'">
            <CaretLeft />
          </el-icon>
        </div>
      </div>
      <div class="tag-style" ref="tagBox">
        <div class="menu_bottom_box" ref="scrollWrapper">
          <div class="item_box_sidebar" v-for="(item, index) in filteredArray" :key="item.path + index" :id="item.path">
            <div @click="goBack(item.path)">
              <div class="img_box_item" :class="getPathUrl(item.path) ? 'activate_img_sidebar' : ''">
                <svg class="energy_box_icon" aria-hidden="true">
                  <defs>
                    <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
                      <stop offset="0%" stop-color="rgb(20, 188, 244)" />
                      <stop offset="4%" stop-color="rgba(184, 225, 239, 1)" />
                      <stop offset="100%" stop-color="#ffffff" />
                    </linearGradient>
                    <linearGradient id="activate_Gradient" x1="0%" y1="100%" x2="0%" y2="0%">
                      <stop offset="0%" stop-color="#b68231" />
                      <stop offset="1%" stop-color="rgb(182, 130, 49)" />
                      <stop offset="100%" stop-color="#ffffff" />
                    </linearGradient>
                  </defs>
                  <use :xlink:href="iconName(item.meta.icon)"
                    :fill="getPathUrl(item.path) ? `url('#activate_Gradient')` : `url('#myGradient')`" />
                </svg>
              </div>
              <span class="title_sidebar">{{ item.meta.title }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="arrow-icon_right" @click="arrowForward" @mousedown="handleMouseDownRight"
        @mouseup="handleMouseUpRight">
        <el-icon size="60" :color="getShowRight ? '#0077fa' : 'rgb(0, 51, 115)'">
          <ArrowRight />
        </el-icon>
        <div class="white_box">
          <el-icon size="30" :color="getShowRight ? '#ffffff' : 'rgb(87, 94, 113)'">
            <ArrowRightBold />
          </el-icon>
        </div>
        <div class="white_box_il">
          <el-icon size="22" :color="getShowRight ? 'rgb(25, 148, 219)' : 'rgb(10, 61, 105)'">
            <CaretRight />
          </el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import SidebarItem from './SidebarItem'
import variables from '@/assets/styles/variables.module.scss'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
const tabScroll = ref(0); // 移动的距离
const showButton = ref(false); // 标签左右两侧箭头是否显示
const tagBox = ref(null)
const scrollWrapper = ref(null)
const route = useRoute();
const router = useRouter();
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()

const sidebarRouters = computed(() => permissionStore.sidebarRouters);
const filteredArray = ref([])
sidebarRouters.value.forEach((item) => {
  if (item.redirect == "noRedirect") {
    filteredArray.value = item.children.filter(obj => obj.hasOwnProperty('meta'));
  }
})

const showLogo = computed(() => settingsStore.sidebarLogo);
const sideTheme = computed(() => settingsStore.sideTheme);
const theme = computed(() => settingsStore.theme);
const isCollapse = computed(() => !appStore.sidebar.opened);

const getShowLeft = computed(() => {
  if (tabScroll.value == 0) {
    return false
  } else {
    return true
  }
});
const getShowRight = computed(() => {
  // 内容的宽度
  if (scrollWrapper.value) {
    let navSize = scrollWrapper.value.scrollWidth;
    let boxWidth = tagBox.value.scrollWidth
    let width = navSize - boxWidth
    if (tabScroll.value == width) {
      return false
    } else {
      return true
    }
  }
});
// 获取菜单背景色
const getMenuBackground = computed(() => {
  if (settingsStore.isDark) {
    return 'var(--sidebar-bg)';
  }
  return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg;
});

// 获取菜单文字颜色
const getMenuTextColor = computed(() => {
  if (settingsStore.isDark) {
    return 'var(--sidebar-text)';
  }
  return sideTheme.value === 'theme-dark' ? variables.menuText : variables.menuLightText;
});

function getPathUrl(pathUrl) {
  const { meta, path } = route;
  let arrUrl = path.split("/system/")
  let arril = ''
  if (arrUrl.length > 1) {
    arril = arrUrl[1];
  } else {
    arril = arrUrl[0];
  }
  if (arril == '/index' && pathUrl == '/') {
    return true
  } else {
    if (arril == pathUrl) {
      return true
    }
  }

}
function iconName(iconClass) {
  return `#icon-${iconClass}`
}

function goBack(event) {
  let path = '/system/' + event
  if (event == "/") {
    router.push("/index");
  } else {
    router.push({ path: path || "/" });
  }
}
const timeTag = ref(null)
const isLongPress = ref(false);
// 向右
function arrowBack() {
  if (tabScroll.value > 0 && !isLongPress.value) {
    let diffWidth = tabScroll.value - 100;
    if (diffWidth > 100) {
      tabScroll.value = diffWidth;
    } else {
      tabScroll.value = 0;// 否则移动到开始位置
    }
    scrollWrapper.value.scrollLeft = tabScroll.value
  }
}
function handleMouseDown() {
  timeTag.value = setInterval(() => {
    isLongPress.value = true;
    handleLongPress();
  }, 200)
}
function handleMouseUp() {
  clearInterval(timeTag.value)
  if (!isLongPress.value) {
    arrowBack(); // 如果不是长按，则处理点击逻辑
  }
  tabScroll.value = tabScroll.value + 100
  isLongPress.value = false
}
function handleLongPress() {
  if (tabScroll.value > 0) {
    let diffWidth = tabScroll.value - 10;
    if (diffWidth > 10) {
      tabScroll.value = diffWidth;
    } else {
      tabScroll.value = 0;// 否则移动到开始位置
    }
    scrollWrapper.value.scrollLeft = tabScroll.value
  }
}
// 向左
const timeTagil = ref(null)
const isLongPressil = ref(false);
function arrowForward() {
  let scrollWidth = scrollWrapper.value.scrollWidth; //内容宽度
  let boxWidth = tagBox.value.scrollWidth
  if (tabScroll.value < (scrollWidth - boxWidth) && !isLongPressil.value) {
    let diffWidth = tabScroll.value + 100;
    if (diffWidth < scrollWidth) {
      if ((diffWidth + 100) > (scrollWidth - boxWidth)) {
        tabScroll.value = (scrollWidth - boxWidth)
      } else {
        tabScroll.value = diffWidth
      }
    } else {
      tabScroll.value = scrollWidth
    }
    scrollWrapper.value.scrollLeft = tabScroll.value
  }
}
function handleMouseDownRight() {
  timeTagil.value = setInterval(() => {
    isLongPressil.value = true;
    handleLongPressil();
  }, 200)
}
function handleMouseUpRight() {
  clearInterval(timeTagil.value)
  if (!isLongPressil.value) {
    arrowForward(); // 如果不是长按，则处理点击逻辑
  }
  tabScroll.value = tabScroll.value - 100
  isLongPressil.value = false
}

function handleLongPressil() {
  let scrollWidth = scrollWrapper.value.scrollWidth; //内容宽度
  let boxWidth = tagBox.value.scrollWidth
  if (tabScroll.value < (scrollWidth - boxWidth)) {
    let diffWidth = tabScroll.value + 10;
    if (diffWidth < scrollWidth) {
      if ((diffWidth + 10) > (scrollWidth - boxWidth)) {
        tabScroll.value = (scrollWidth - boxWidth)
      } else {
        tabScroll.value = diffWidth
      }
    } else {
      tabScroll.value = scrollWidth
    }
    scrollWrapper.value.scrollLeft = tabScroll.value
  }
}
// 生命周期
onMounted(() => {
  const { meta, path } = route;
  let arrUrl = path.split("/system/")
  let arril = ''
  if (arrUrl.length > 1) {
    arril = arrUrl[1];
  } else {
    arril = arrUrl[0];
  }
  const targetElement = document.getElementById(`${arril}`);
  if (targetElement) {
    targetElement.scrollIntoView({ behavior: 'auto' });
  }
  nextTick(() => {
    let scrollTime = setInterval(() => {
      let navSize = scrollWrapper.value.scrollLeft;
      let boxWidth = tagBox.value.scrollLeft
      tabScroll.value = navSize;
      clearInterval(scrollTime)
    })
  })
});
</script>

<style lang="scss" scoped>
.el-menu--horizontal {
  justify-content: center;
}

.has-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebar_box_bottom {
  position: relative;
  width: fit-content;
  padding: 0px 30px;
  max-width: 50%;
  display: flex;
  align-items: center;
}

.arrow-icon_left {
  position: absolute;
  bottom: 0;
  left: -10px;
  cursor: pointer;
}

.white_box_left {
  position: absolute;
  top: 15px;
  left: 12px;
  z-index: -1;
}

.white_box_left_il {
  position: absolute;
  top: 19px;
  left: 23px;
  z-index: -1;
}

.arrow-icon_right {
  position: absolute;
  bottom: 0;
  right: -10px;
  cursor: pointer;
}

.white_box {
  position: absolute;
  top: 15px;
  right: 13px;
  z-index: -1;
}

.white_box_il {
  position: absolute;
  top: 19px;
  right: 23px;
  z-index: -1;
}

.sidebar_box_bottom::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-image: linear-gradient(to bottom, rgb(10 54 113 / 93%) 0%, rgb(0 93 191 / 70%) 100%);
  clip-path: polygon(0 100%, 8% 0, 92% 0, 100% 100%);
}

.tag-style {
  display: flex;
  align-items: center;
  overflow: hidden;
  pointer-events: all;
  cursor: pointer;
  position: relative;
}

.menu_bottom_box {
  height: 75px;
  display: flex;
  align-items: flex-end;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  transition: scroll-left 0.5s ease;
}

.item_box_sidebar {
  flex: none;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0px;
  width: 100px;
}

.img_box_item {
  cursor: pointer;
  position: absolute;
  bottom: 25px;
  width: 60px;
  height: 50px;
  background: url("@/assets/images/pedestal.png");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.activate_img_sidebar {
  background: url("@/assets/images/pedestalActivate.png");
  background-size: cover;
}

.title_sidebar {
  color: #fff;
  font-size: 14px;
  user-select: none;
}

.energy_box_icon {
  width: 30px;
  height: 30px;
  position: relative;
  vertical-align: -2px;
}
</style>