初步构建起页面布局

layouts/admin/breadcrumb.uvue

@@ -0,0 +1,281 @@
+<!-- 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>