medical-mall/layouts/admin/breadcrumb.uvue

<!-- CRMEB Admin Breadcrumb组件 - uni-app版本 -->
<template>
  <view class="admin-breadcrumb">
    <!-- 左侧：菜单按钮 + 面包屑 -->
    <view class="breadcrumb-left">
      <!-- 菜单折叠按钮 -->
      <view class="menu-toggle" @click="$emit('toggle-collapse')">
        <text class="iconfont icon-menu"></text>
      </view>

      <!-- 面包屑导航 -->
      <view class="breadcrumb-content">
        <text class="breadcrumb-home" @click="goHome">首页</text>
        <text class="breadcrumb-separator">/</text>
        <text class="breadcrumb-current">{{ currentPageTitle }}</text>
      </view>
    </view>

    <!-- 右侧：用户信息和操作 -->
    <view class="breadcrumb-right">
      <!-- 通知中心 -->
      <view class="nav-item" @click="handleNotification">
        <text class="iconfont icon-notification"></text>
        <view class="badge" v-if="notificationCount > 0">{{ notificationCount }}</view>
      </view>

      <!-- 用户信息 -->
      <view class="user-section" @click="handleProfile">
        <view class="user-avatar">
          <text class="avatar-text">{{ userInfo.nickname ? userInfo.nickname.charAt(0) : 'A' }}</text>
        </view>
        <view class="user-info">
          <text class="user-name">{{ userInfo.nickname || '管理员' }}</text>
          <text class="user-role">{{ userInfo.role || 'admin' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import type { UserInfo } from './types.uts'

export default {
  name: 'AdminBreadcrumb',
  props: {
    currentPageTitle: {
      type: String,
      default: '管理后台'
    },
    isCollapsed: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      userInfo: {
        nickname: '管理员',
        role: 'admin'
      } as UserInfo,
      notificationCount: 3
    }
  },
  onLoad() {
    this.loadUserInfo()
  },
  methods: {
    // 加载用户信息
    loadUserInfo() {
      const userInfo = uni.getStorageSync('user_info')
      if (userInfo) {
        this.userInfo = userInfo
      }
    },

    // 返回首页
    goHome() {
      uni.navigateTo({
        url: '/pages/mall/admin/index'
      })
    },

    // 处理通知
    handleNotification() {
      uni.navigateTo({
        url: '/pages/mall/admin/notifications'
      })
    },

    // 处理个人资料
    handleProfile() {
      uni.navigateTo({
        url: '/pages/user/profile'
      })
    }
  }
}
</script>

<style lang="scss">
.admin-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 30rpx;
  background-color: #fff;
}

/* 左侧区域 */
.breadcrumb-left {
  display: flex;
  align-items: center;
  flex: 1;
}

/* 菜单切换按钮 */
.menu-toggle {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  border-radius: 8rpx;
  margin-right: 20rpx;
  transition: background-color 0.3s;

  &:active {
    background-color: #f5f5f5;
  }

  .iconfont {
    font-size: 28rpx;
  }
}

/* 面包屑内容 */
.breadcrumb-content {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #666;
}

.breadcrumb-home {
  color: #1890ff;
  cursor: pointer;

  &:active {
    opacity: 0.7;
  }
}

.breadcrumb-separator {
  margin: 0 10rpx;
  color: #ccc;
}

.breadcrumb-current {
  color: #333;
  font-weight: 500;
}

/* 右侧区域 */
.breadcrumb-right {
  display: flex;
  align-items: center;
}

/* 导航项 */
.nav-item {
  position: relative;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  border-radius: 8rpx;
  margin-left: 20rpx;
  transition: background-color 0.3s;

  &:active {
    background-color: #f5f5f5;
  }

  .iconfont {
    font-size: 28rpx;
  }
}

/* 消息徽章 */
.badge {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  min-width: 32rpx;
  height: 32rpx;
  background-color: #ff4d4f;
  color: #fff;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
  padding: 0 6rpx;
  box-sizing: border-box;
  z-index: 1;
}

/* 用户信息区域 */
.user-section {
  display: flex;
  align-items: center;
  padding: 12rpx 20rpx;
  border-radius: 8rpx;
  margin-left: 20rpx;
  transition: background-color 0.3s;
  cursor: pointer;

  &:active {
    background-color: #f5f5f5;
  }
}

.user-avatar {
  width: 50rpx;
  height: 50rpx;
  background-color: #1890ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15rpx;
}

.avatar-text {
  color: #fff;
  font-size: 24rpx;
  font-weight: bold;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
  line-height: 1.2;
}

.user-role {
  font-size: 22rpx;
  color: #999;
  line-height: 1.2;
}

/* 响应式设计 */
@media screen and (max-width: 768rpx) {
  .admin-breadcrumb {
    padding: 0 20rpx;
  }

  .breadcrumb-content {
    display: none; /* 移动端隐藏面包屑 */
  }

  .user-info {
    display: none; /* 移动端隐藏用户信息文字 */
  }

  .user-section {
    padding: 12rpx;
  }
}
</style>