gypsy-crm-frontend-vu/windows/left-window.vue

<template>
  <view class="cwg-sidebar bg-body" :class="{ 'sidebar-collapsed': isCollapsed, 'dark': isDark }">
    <view class="menu-list">
      <view class="menu" v-for="(item, index) in menus" :key="item.path + index">
        <view class="menu-item" @click="handleClick(index)">
          <cwg-icon :name="item.icon" :size="20" :color="!isDark ? '#6c8595' : '#fff'" />
          <view class="menu-label" v-t="item.label" />
          <view class="chevron-icon" :class="{ 'expanded': item.isOpenMenu }">
            <cwg-icon v-if="item.children && item.children.length" name="crm-chevron-down" :size="20"
              :color="!isDark ? '#97A1C0' : '#fff'" />
          </view>
        </view>
        <view :ref="(el) => setSubmenuRef(index, el)" class="submenu-box" :a="index" :key1="item.path + index" :b="item"
          :style="{
            height: !(item.children && item.children.length) ? '0px' : item.isOpenMenu ? item.submenuHeight + 'px' : '0px',
            transition: 'height 281ms cubic-bezier(0.4, 0, 0.2, 1)'
          }" :class="{ 'active': item.isOpenMenu }">
          <cwg-submenu v-if="item.children && item.children.length" :submenu-items="item.children" />
        </view>
      </view>
    </view>
    <view class="menu fixed">
      <view class="menu-item btn-danger btn btn-app-nav btn-danger btn-shadow mb-2 w-100 waves-effect ib-box btn-mode"
        @click="setMode('customer')" v-if="mode !== 'customer'">
        <cwg-icon name="crm-trade" :size="20" color="#fff" />
        <view class="menu-label" v-t="'Home.msg.Custom'" />
      </view>
      <view class="menu-item btn-danger btn btn-app-nav btn-danger btn-shadow mb-2 w-100 waves-effect ib-box btn-mode"
        @click="setMode('ib')" v-if="mode !== 'ib' && ibStatus">
        <cwg-icon name="crm-ib" :size="20" color="#fff" />
        <view class="menu-label" v-t="'Home.msg.Ib'" />
      </view>
      <view class="menu-item btn-danger btn btn-app-nav btn-danger btn-shadow mb-2 w-100 waves-effect ib-box btn-mode"
        @click="setMode('follow')" v-if="mode !== 'follow'">
        <cwg-icon name="crm-gd" :size="20" color="#fff" />
        <view class="menu-label" v-t="'Documentary.title'" />
      </view>
      <view class="menu-item btn-danger btn btn-app-nav btn-danger btn-shadow mb-2 w-100 waves-effect zy-box"
        @click="handleFixedMenuClick">
        <view class="zy-icon1" :class="{ 'active': isCollapsed }">
          <cwg-icon name="crm-zy" :size="20" color="#fff" />
        </view>

      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { storeToRefs } from 'pinia'
import useUserStore from '@/stores/use-user-store'
import { useMenuSplit } from '@/composables/useMenuSplit'
const { menus, setSubmenuRef, setMode, handleClick, handleSubmenuClick, mode } = useMenuSplit()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
import useGlobalStore from '@/stores/use-global-store'
const globalStore = useGlobalStore()
const isDark = computed(() => globalStore.theme === 'dark')
// 控制侧边栏折叠状态
const isCollapsed = ref(false)

// ib按钮展示
const ibStatus = computed(() => {
  return userInfo.value?.customInfo?.ibInvalid == 0 && !!userInfo.value?.ibInfo
})

// 固定菜单项点击事件
function handleFixedMenuClick() {
  // 切换侧边栏折叠状态
  isCollapsed.value = !isCollapsed.value
  // 更新全局样式
  const leftWindow = document.querySelector('uni-left-window')
  const content = document.querySelector('uni-content')
  if (leftWindow && content) {
    if (isCollapsed.value) {
      leftWindow.classList.add('collapsed')
      content.classList.add('collapsed')
    } else {
      leftWindow.classList.remove('collapsed')
      content.classList.remove('collapsed')
    }
  }
}
</script>
<style scoped lang="scss">
@import "@/uni.scss";

.cwg-sidebar {
  width: 100%;
  color: var(--bs-emphasis-color);
  height: calc(100vh - 56px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: px2rpx(8);
  padding-top: px2rpx(20);
  padding-bottom: px2rpx(8);
  box-sizing: border-box;
  gap: px2rpx(8);
  border-right: 1px solid rgba(108, 133, 149, 0.12);

  .logo {
    width: px2rpx(54);
  }

  .menu-list {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: px2rpx(8);
  }

  .submenu-box {
    width: 100%;
    height: 0;
    overflow: hidden;
  }

  .menu {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;

  }

  .menu-item {
    width: 100%;
    height: px2rpx(40);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: px2rpx(8);
    padding: px2rpx(10);
    box-sizing: border-box;
    font-size: 14px;


    .menu-label {
      flex: 1;
    }


    .expanded .icon {
      transform: rotate(180deg);
    }
  }

  .zy-icon1{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ib-box {
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    border: 1px solid rgba(140, 69, 246, 0.2) !important;
    font-size: px2rpx(18);
    font-weight: 600;
    color: #fff;

    &:hover {
      color: var(--bs-btn-hover-color);
      background-color: var(--bs-btn-hover-bg);
      border-color: var(--bs-btn-hover-border-color);
    }
  }

  .btn-mode {
    justify-content: center;

    .menu-label {
      flex: none;
    }
  }

  .zy-box {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .zy-box .active {
    transform: rotate(180deg);
  }

  .fixed {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: px2rpx(8);
  }
}

.sidebar-collapsed:not(:hover) .menu-label,
.sidebar-collapsed:not(:hover) .submenu-box,
.sidebar-collapsed:not(:hover) .chevron-icon {
  display: none;
}

.sidebar-collapsed:hover .menu-label,
.sidebar-collapsed:hover .submenu-box,
.sidebar-collapsed:hover .chevron-icon {
  display: block;
}

.sidebar-collapsed .fixed {
  display: flex;
}

@media screen and (max-width: 1100px) {

  .cwg-sidebar:not(:hover) .menu-label,
  .cwg-sidebar:not(:hover) .submenu-box,
  .cwg-sidebar:not(:hover) .chevron-icon {
    display: none;
  }

  .cwg-sidebar:hover .menu-label,
  .cwg-sidebar:hover .submenu-box,
  .cwg-sidebar:hover .chevron-icon {
    display: block;
  }

  .cwg-sidebar .fixed {
    display: flex;
  }
}
</style>