dtScreen/src/components/ui/BottomDock.vue

<template>
    <div class="dock-wrapper">
        <div class="nav-arrow left-arrow" :class="{ 'is-disabled': !canScrollLeft, 'is-active': canScrollLeft }"
            @click="scrollList(-1)">
            <img v-if="canScrollLeft" src="@/assets/main/main-right.png" class="arrow-img left-facing" />
            <img v-else src="@/assets/main/main-left.png" class="arrow-img" />
        </div>

        <div class="dock-list-container" ref="listContainer" @scroll="checkScrollState">
            <div class="dock-list">
                <div v-for="(item, index) in dockItems" :key="index" class="dock-item"
                    :class="{ 'is-active': activeIndex === index, [`theme-${item.theme}`]: item.theme}"
                    @click="handleSelect(index, item)"
                    @mouseenter="hoverIndex = index"
                    @mouseleave="hoverIndex = null"
                    >
                    <div class="item-icon">
                        <img v-if="item.imgUrl" 
                        :src="(activeIndex === index || hoverIndex === index) && item.activeImgUrl ? item.activeImgUrl : item.imgUrl" 
                        class="custom-icon" />

                        <i v-else :class="item.iconClass"></i>
                    </div>
                    <div class="item-label">{{ item.label }}</div>
                </div>
            </div>
        </div>

        <div class="nav-arrow right-arrow" :class="{ 'is-disabled': !canScrollRight, 'is-active': canScrollRight }"
            @click="scrollList(1)">
            <img v-if="canScrollRight" src="@/assets/main/main-right.png" class="arrow-img" />
            <img v-else src="@/assets/main/main-left.png" class="arrow-img left-facing" />
        </div>
    </div>
</template>

<script>
export default {
    name: 'BottomDock',
    data() {
        return {
            activeIndex: 0,
            hoverIndex: null,
            canScrollLeft: false, // 初始默认在最左侧，所以左侧不能滚
            canScrollRight: true, // 初始默认右侧有内容，可以滚
            dockItems: [
                /* ... 你的菜单数据 ... */
                {
                    label: '首页',
                    imgUrl: require('@/assets/main/main-home.png'),
                    activeImgUrl: require('@/assets/main/main-home-hover.png'),
                    route: '/home',
                    theme: 'blue',
                },
                {
                    label: '状态监控',
                    imgUrl: require('@/assets/main/main-surve.png'),
                    activeImgUrl: require('@/assets/main/main-surve-hover.png'),
                    route: '/surve',
                    theme: 'blue',
                },
                {
                    label: '特勤安保',
                    imgUrl: require('@/assets/main/main-security.png'),
                    activeImgUrl: require('@/assets/main/main-security-hover.png'),
                    route: '/security',
                    theme: 'gold',
                },
                {
                    label: '干线协调',
                    imgUrl: require('@/assets/main/main-coor.png'),
                    activeImgUrl: require('@/assets/main/main-coor-hover.png'),
                    route: '/coor',
                    theme: 'blue',
                },
                {
                    label: '数据分析',
                    imgUrl: require('@/assets/main/main-watch.png'),
                    activeImgUrl: require('@/assets/main/main-watch-hover.png'),
                    route: '/watch',
                    theme: 'blue',
                },
                {
                    label: '系统设置',
                    imgUrl: require('@/assets/main/main-setting.png'),
                    activeImgUrl: require('@/assets/main/main-setting-hover.png'),
                    route: '/setting',
                    theme: 'blue',
                },
                // (建议多加几个测试数据，撑爆容器宽度，才能看到滚动和状态切换)
                {
                    label: '测试1',
                    imgUrl: require('@/assets/main/main-home.png'),
                    theme: 'blue',
                },
                {
                    label: '测试2',
                    imgUrl: require('@/assets/main/main-surve.png'),
                    theme: 'blue',
                },
                {
                    label: '测试3',
                    imgUrl: require('@/assets/main/main-security.png'),
                    theme: 'blue',
                },
            ]
        };
    },
    watch: {
        $route() {
            this.updateActiveIndexByRoute();
        }
    },
    created() {
        this.updateActiveIndexByRoute();
    },
    mounted() {
        // 组件挂载后，等 DOM 渲染完毕，立即计算一次初始状态
        this.$nextTick(() => {
            this.checkScrollState();
            // 监听窗口大小变化，防止屏幕拉伸导致容器尺寸变化
            window.addEventListener('resize', this.checkScrollState);
        });
    },
    beforeDestroy() {
        // 销毁时移除监听
        window.removeEventListener('resize', this.checkScrollState);
    },
    methods: {
        updateActiveIndexByRoute() {
            const currentPath = this.$route.path;
            console.log(currentPath)
            // 查找当前路由路径匹配的菜单项索引
            const matchIndex = this.dockItems.findIndex(item => {
                // 精确匹配：item.route === currentPath
                // 模糊匹配（推荐）：当前路径包含菜单的路由（解决含有子路由 /monitor/detail 时底部也高亮的问题）
                return item.route && currentPath.startsWith(item.route);
            });

            // 如果找到了对应的菜单，就更新 activeIndex
            if (matchIndex !== -1) {
                this.activeIndex = matchIndex;
            }
        },
        handleSelect(index, item) {
            if (this.activeIndex === index) return;
            this.activeIndex = index;

            // 【新增路由跳转逻辑】
            if (item.route) {
                // 使用 catch 拦截重复点击同一个路由时的 NavigationDuplicated 报错
                this.$router.push(item.route).catch(err => {
                    if (err.name !== 'NavigationDuplicated') {
                        console.error('路由跳转失败:', err);
                    }
                });
            }

            this.$emit('change', item);
        },

        // 【新增核心方法】：检查并更新滚动状态
        checkScrollState() {
            const container = this.$refs.listContainer;
            if (!container) return;

            // 1. 如果 scrollLeft 大于 0，说明不在最左边，左侧按钮可点击 (状态1)
            this.canScrollLeft = container.scrollLeft > 0;

            // 2. 如果 scrollLeft + 可视宽度 < 实际总宽度，说明右侧还没滚到底，右侧按钮可点击 (状态1)
            // 使用 Math.ceil 是为了防止部分高分屏下出现小数像素导致的精度误差
            this.canScrollRight = Math.ceil(container.scrollLeft + container.clientWidth) < container.scrollWidth;
        },

        scrollList(direction) {
            // 如果处于不可滚动状态(状态2)，直接 return，不执行滚动
            if (direction === -1 && !this.canScrollLeft) return;
            if (direction === 1 && !this.canScrollRight) return;

            const container = this.$refs.listContainer;
            // 1 个图标宽度 100px + 右侧间距 30px = 130px
            const scrollAmount = 130; // 调整每次滑动的距离

            if (container) {
                container.scrollBy({
                    left: direction * scrollAmount,
                    behavior: 'smooth'
                });
                // 这里的平滑滚动会自动触发上面绑定的 @scroll 事件，
                // 从而实时调用 checkScrollState 更新按钮状态
            }
        }
    }
};
</script>

<style scoped>
/* ================= 整体容器布局 (修复垂直排列的核心) ================= */
.dock-wrapper {
    display: flex !important;
    flex-direction: row !important;
    /* 1. 强制左右水平排列 */
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 160px;
    position: relative;
}

/* 视窗容器：定宽，超出部分隐藏并允许横向滚动 
    【精算容器宽度】：
    要想完美不漏边，容器宽度必须等于：(显示个数 * 元素宽度) + ((显示个数 - 1) * 间距)
    假设你想完美显示 6 个：(6 * 100px) + (5 * 30px) = 750px
  */
.dock-list-container {
    width: 750px;
    height: 160px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    /* 2. 强制内部文本/元素绝对不换行 */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.dock-list-container::-webkit-scrollbar {
    display: none;
}

/* 真实的菜单列表：尺寸由内容撑开 */
.dock-list {
    display: flex !important;
    flex-direction: row !important;
    /* 3. 菜单项强制水平排列 */
    flex-wrap: nowrap !important;
    /* 4. 绝对不允许换行 */
    align-items: flex-end;
    /* 底部对齐 */
    height: 100%;
    width: max-content;
    /* 5. 关键：真实宽度由内部项决定，从而完美触发父级滚动 */
    min-width: 100%;
    padding-bottom: 20px;
    gap: 30px;
    /* 图标之间的横向间距 */
}

/* ================= 左右控制箭头 ================= */
/* 容器基础样式 */
.nav-arrow {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
    margin: 0 15px;
    /* 【修改】：去掉之前的底色和边框，因为你现在用整张切图了 */
    background: transparent !important;
    border: none !important;
}

.arrow-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* transition: transform 0.2s ease, filter 0.3s ease; */
}

/* 强制让左侧的图片掉头指向上一个 */
.left-facing {
  transform: rotate(180deg);
}

/* 状态2：允许切换时的悬浮放大效果 */
.nav-arrow.is-active {
  cursor: pointer;
}
.nav-arrow.is-active:hover .arrow-img {
  transform: scale(1.1); 
  filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.8));
}

/* 【关键修复】：由于左箭头自带 rotate(180deg)，悬浮放大时不能丢掉它的旋转角度，否则它会瞬间掉头！ */
.nav-arrow.left-arrow.is-active:hover .arrow-img.left-facing {
  transform: rotate(180deg) scale(1.1);
}

/* 状态1：不允许切换时稍微变暗 */
.nav-arrow.is-disabled {
  cursor: not-allowed;
  opacity: 0.6; 
}

/* ================= 单个导航项 ================= */
.dock-item {
    flex-shrink: 0;
    /* 7. 关键：禁止菜单项自身被挤压 */
    position: relative;
    display: flex;
    flex-direction: column;
    /* 菜单项内部（图标+文字）是上下垂直排布的 */
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    width: 100px;
    height: 90px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- 图标部分 --- */
.item-icon {
    font-size: 32px;
    color: #a0cfff;
    z-index: 3;
    margin-bottom: 5px;
    transition: all 0.3s;
}

/* --- 文字部分 --- */
.item-label {
    color: #c0c4cc;
    font-size: 14px;
    text-align: center;
    transition: all 0.3s;
    letter-spacing: 1px;
}

/* ================= 交互状态：悬浮与选中 ================= */

.dock-item:hover,
.dock-item.is-active {
    transform: translateY(-15px) scale(1.15);
}

.dock-item:hover .item-icon,
.dock-item.is-active .item-icon {
    color: #ffffff;
    text-shadow: 0 0 15px #00e5ff;
}

.dock-item:hover .item-label,
.dock-item.is-active .item-label {
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0 0 8px #00e5ff;
}

.dock-item:hover .top-solid,
.dock-item.is-active .top-solid {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.9), rgba(0, 115, 255, 0.9));
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.6);
}

.dock-item.theme-gold.is-active .item-icon {
    color: #ffd700;
    text-shadow: 0 0 15px #ffaa00;
}

.dock-item.theme-gold.is-active .item-label {
    color: #ffd700;
    text-shadow: 0 0 8px #ffaa00;
}

/* --- 图标部分 --- */
.item-icon {
    z-index: 3;
    margin-bottom: 5px;
    /* 确保图片也能有悬浮时的丝滑过渡 */
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* 专门针对图片的样式 */
.custom-icon {
    width: 88px;
    /* 根据你切图的实际大小调整 */
    height: 64px;
    object-fit: contain;
    /* 保证图片不变形 */
}

/* 悬浮时，如果想让图片也发光，可以使用 CSS 的 drop-shadow 滤镜 */
.dock-item:hover .custom-icon,
.dock-item.is-active .custom-icon {
    filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.8));
}
</style>