meilan-app/src/pages/questionStatistics/index.vue

<template>
    <home-container :customStyle="{ background: 'none' }">
        <div class="question-statistics-container">
            <!-- 选项卡 -->
            <div class="tab-container">
                <h-tabs class="h-tab" v-model="activeTab" :tabs="tabs" :activeColor="'#2B7BFF'" value-key="value" label-key="label"
                    @change="handleTabChange" />
            </div>

            <!-- 组件切换区域 -->
            <div class="component-container">
                <!-- 实时状态组件 -->
                <real-time-status 
                    v-if="activeTab === 'realtime'" 
                    :loading="loading"
                    @update:loading="loading = $event"
                />
                
                <!-- 完成趋势组件 -->
                <completion-trend 
                    v-else-if="activeTab === 'trend'" 
                />
                
                <!-- 错题分析组件 -->
                <error-analysis 
                    v-else-if="activeTab === 'analysis'" 
                />
            </div>
        </div>
    </home-container>
</template>

<script>
import HomeContainer from "@/components/HomeContainer.vue";
import RealTimeStatus from "./components/RealTimeStatus.vue";
import CompletionTrend from "./components/CompletionTrend.vue";
import ErrorAnalysis from "./components/ErrorAnalysis.vue";
import HTabs from "@/components/h-tabs/h-tabs.vue";
import { mapState } from 'vuex'

export default {
    name: 'QuestionStatistics',
    components: {
        HomeContainer,
        RealTimeStatus,
        CompletionTrend,
        ErrorAnalysis,
        HTabs
    },
    data() {
        return {
            loading: false,
            activeTab: 'realtime', // realtime, trend, analysis
            allTabs: [
                { label: '实时状态', value: 'realtime', style: { 'color': '#666666' }, activeStyle: { 'color': '#2B7BFF' } },
                { label: '完成趋势', value: 'trend', style: { 'color': '#666666' }, activeStyle: { 'color': '#2B7BFF' } },
                { label: '错题分析', value: 'analysis', style: { 'color': '#666666' }, activeStyle: { 'color': '#2B7BFF' } }
            ]
        };
    },
    computed: {
        ...mapState({
            userRoles: state => state.user.roles
        }),
        // 根据用户角色过滤tabs
        tabs() {
            // 如果是班组长，过滤掉完成趋势tab
            if (this.isBanZuZhang) {
                return this.allTabs.filter(tab => tab.value !== 'trend');
            }
            return this.allTabs;
        },
        // 判断是否为班组长
        isBanZuZhang() {
            let roles = this.userRoles;
            console.log('用户角色：', roles);
            return roles && (roles.includes('banzuzhang') || roles.includes('teamLeader'));
        }
    },
    methods: {
        // 选项卡切换事件
        handleTabChange(index) {
            this.activeTab = index;
            console.log('切换到选项卡:', this.tabs.find(tab => tab.value === index)?.label);
        }
    }
};
</script>

<style lang="scss" scoped>
.question-statistics-container {
    position: relative;
    padding-top: 80rpx;
}

.tab-container {
    position: fixed;
    top: 80rpx;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 15px 15px 0 15px;
    background-color: white;
    .h-tab{
        padding-bottom: 10px !important;
    }
}

.capsule-tab-container {
    display: inline-flex;
    
    // border: 2rpx solid #2B7BFF;
    border-radius: 32rpx;
    padding: 2rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    
}

.capsule-tab-item {
    position: relative;
    padding: 8rpx 24rpx;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;

    // 非激活状态 - 蓝字白底蓝边框
    &:not(.capsule-tab-active) {
        background: #ffffff;
        border: 1rpx solid #2B7BFF;

        .capsule-tab-text {
            color: #2B7BFF;
            font-weight: normal;
        }
    }

    // 激活状态 - 白字蓝底
    &.capsule-tab-active {
        background: #2B7BFF;
        border: 1rpx solid #2B7BFF;
        box-shadow: 0 2rpx 8rpx rgba(43, 123, 255, 0.3);

        .capsule-tab-text {
            color: #ffffff;
            font-weight: bold;
        }
    }
}

.capsule-tab-text {
    font-size: 24rpx;
    line-height: 1;
    transition: all 0.3s ease;
}

.component-container {
    min-height: 400rpx;
}

.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200rpx;
    font-size: 32rpx;
    color: #999;
    background: #f8f8f8;
    border-radius: 16rpx;
}

.progress-container {
    display: flex;
    align-items: center;
    gap: 16rpx;

    .progress-text {
        font-size: 24rpx;
        color: #4873E3;
        font-weight: 500;
        min-width: 60rpx;
    }
}
</style>