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

<template>
    <view class="cwg-sidebar bg-body" :class="{ 'sidebar-collapsed': isCollapsed, 'dark': isDark }" @mouseenter="handleHoverEnter" @mouseleave="handleHoverLeave">
      <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 btn-outline-danger btn-app-nav 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="#000" />
        <view class="menu-label" v-t="'Home.msg.Custom'" />
      </view>
      <view
        class="menu-item btn btn-outline-danger btn-app-nav 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="#000" />
        <view class="menu-label" v-t="'Home.msg.Ib'" />
      </view>
      <view
        class="menu-item btn btn-outline-danger btn-app-nav 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="#000" />
        <view class="menu-label" v-t="'Documentary.title'" />
      </view>
    </view>
    </view>
</template>

<script lang="ts" setup>
import { computed, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import useUserStore from '@/stores/use-user-store'
import { useMenuSplit } from '@/composables/useMenuSplit'
import { useLeftSidebarCollapse } from '@/composables/useLeftSidebarCollapse'
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, isCollapsedByToggle, syncCollapsedFromDom,toggleLeftSidebar } = useLeftSidebarCollapse()

onMounted(() => {
  syncCollapsedFromDom()
})

// 处理侧边栏 hover 展开/折叠
const handleHoverEnter = () => {
  if (isCollapsed.value) {
    toggleLeftSidebar(false)
  }
}

const handleHoverLeave = () => {
  if (!isCollapsed.value && isCollapsedByToggle.value) {
    toggleLeftSidebar(false)
  }
}

// ib按钮展示
const ibStatus = computed(() => {
  return userInfo.value?.customInfo?.ibInvalid == 0 && !!userInfo.value?.ibInfo
})
</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%;
    min-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);
    }
  }

  .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);
    font-size: px2rpx(18);
    font-weight: 600;
    color: var(--bs-emphasis-color);

    :deep(.zui-svg-icon-image) {
      transition: filter 0.15s ease;
    }

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

      :deep(.zui-svg-icon-image) {
        filter: brightness(0) invert(1);
      }
    }
  }

  .btn-mode {
    justify-content: center;

    .menu-label {
      flex: none;
      max-width: px2rpx(150);
      white-space: normal;
      word-wrap: break-word;
      word-break: break-all;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .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;
  //display: none;
}

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