hzdyjs/mobile/src/components/NavBar.vue

<template>
    <view class="navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
        <view class="navbar-content">
            <text class="navbar-title">{{ title }}</text>
            <view class="navbar-actions">
                <slot name="actions">
                    <view
                        v-if="showRefresh"
                        class="btn-icon refresh-btn touchable"
                        @click="handleRefresh"
                        :aria-label="refreshLabel"
                    >
                        <text class="icon">🔄</text>
                    </view>
                    <view
                        v-if="showSearch"
                        class="btn-icon touchable"
                        @click="handleSearch"
                        :aria-label="searchLabel"
                    >
                        <text class="icon">🔍</text>
                    </view>
                    <view
                        v-if="showSettings"
                        class="btn-icon touchable"
                        @click="handleSettings"
                        :aria-label="settingsLabel"
                    >
                        <text class="icon">⚙️</text>
                    </view>
                </slot>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'NavBar',
    props: {
        title: {
            type: String,
            default: '智慧校园',
        },
        showRefresh: {
            type: Boolean,
            default: false,
        },
        showSearch: {
            type: Boolean,
            default: false,
        },
        showSettings: {
            type: Boolean,
            default: false,
        },
        refreshLabel: {
            type: String,
            default: '刷新',
        },
        searchLabel: {
            type: String,
            default: '搜索',
        },
        settingsLabel: {
            type: String,
            default: '设置',
        },
    },
    data() {
        return {
            statusBarHeight: 20,
        };
    },
    mounted() {
        // 获取状态栏高度
        const systemInfo = uni.getSystemInfoSync();
        this.statusBarHeight = systemInfo.statusBarHeight || 20;
    },
    methods: {
        handleRefresh() {
            this.$emit('refresh');
            // 触觉反馈
            uni.vibrateShort();
        },
        handleSearch() {
            this.$emit('search');
            uni.vibrateShort();
        },
        handleSettings() {
            this.$emit('settings');
            uni.vibrateShort();
        },
    },
};
</script>

<style lang="scss" scoped>
.navbar {
    background: linear-gradient(135deg, $uni-color-primary, $uni-color-primary-dark);
    color: $uni-text-color-inverse;
    padding-bottom: 16px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: $uni-shadow;
}

.navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 $uni-spacing-row-lg;
    min-height: 44px;
}

.navbar-title {
    font-size: $uni-font-size-xl;
    font-weight: 600;
    color: $uni-text-color-inverse;
}

.navbar-actions {
    display: flex;
    gap: $uni-spacing-row-base;
}

.btn-icon {
    background: rgba(255, 255, 255, 0.2);
    border-radius: $uni-border-radius-circle;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: $uni-transition;

    &:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.1);
    }

    .icon {
        font-size: 18px;
        color: $uni-text-color-inverse;
    }
}

/* 动画效果 */
.refresh-btn {
    animation: none;

    &:active {
        animation: spin 0.6s ease-in-out;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 无障碍支持 */
.btn-icon[aria-label] {
    position: relative;

    &:focus {
        outline: 2px solid rgba(255, 255, 255, 0.5);
        outline-offset: 2px;
    }
}
</style>