DesktopMain.vue

<template>
  <div class="flex h-screen bg-neutral-100">
    <!-- 侧边栏 -->
    <div 
      :class="`flex flex-col transition-all duration-300 ease-in-out ${isSidebarCollapsed ? 'w-20' : 'w-[200px]'}`"
      style="background-color: #001529"
    >
      <!-- Logo区域 -->
      <div class="h-16 flex items-center justify-center px-6 border-b border-neutral-800">
        <div v-if="isSidebarCollapsed" class="w-10 h-10 rounded-lg flex items-center justify-center">
          <img :src="platformLogo" alt="平台Logo" class="h-9 object-contain" />
        </div>
        <h1 v-else class="text-white flex items-center gap-2 flex-nowrap whitespace-nowrap">
          <img :src="platformLogo" alt="平台Logo" class="h-9 object-contain" />
          <span class="text-[16px]">享零工云平台</span>
        </h1>
      </div>
      <!-- 导航菜单 -->
      <nav class="flex-1 py-6 px-3 overflow-hidden">
        <div class="space-y-6">
          <!-- 业务管理菜单 -->
          <div class="space-y-1" v-if="businessMenuItems.length>0">
            <div v-if="!isSidebarCollapsed" class="px-4 mb-2">
              <p class="text-xs text-neutral-500 uppercase tracking-wide">业务管理</p>
            </div>
            
            <template v-for="item in businessMenuItems" :key="item.id">
              <el-tooltip 
                v-if="isSidebarCollapsed"
                :content="item.label"
                placement="right"
                :delay="0">
                <button
                  @click="handleMenuChange(item.id)"
                  :class="`
                    flex items-center transition-all relative
                    w-[45px] h-[45px] mx-auto justify-center p-0 rounded-[10px]
                    ${activeMenu === item.id 
                      ? 'bg-brand-primary text-white' 
                      : 'text-neutral-400 hover:bg-white/10 hover:text-neutral-100'
                    }
                  `"
                  style="display: flex; align-items: center; justify-content: center;"
                >
                  <component :is="item.icon" class="h-4 w-4 shrink-0" />
                </button>
              </el-tooltip>
              <button
                v-else
                @click="handleMenuChange(item.id)"
                :class="`
                  flex items-center transition-all relative
                  w-full gap-3 px-4 py-3 rounded-lg
                  ${activeMenu === item.id 
                    ? 'bg-brand-primary text-white' 
                    : 'text-neutral-400 hover:bg-white/10 hover:text-neutral-100'
                  }
                `">
                <component :is="item.icon" class="h-4 w-4 shrink-0" />
                <span class="text-[14px]">{{ item.label }}</span>
              </button>
            </template>
          </div>
          <!-- 系统管理菜单 -->
          <div class="space-y-1" v-if="systemMenuItems.length>0">
            <div v-if="!isSidebarCollapsed" class="px-4 mb-2">
              <p class="text-xs text-neutral-500 uppercase tracking-wide">系统管理</p>
            </div>
            
            <template v-for="item in systemMenuItems" :key="item.id">
              <el-tooltip 
                v-if="isSidebarCollapsed"
                :content="item.label"
                placement="right"
                :delay="0"
              >
                <button
                  @click="handleMenuChange(item.id)"
                  :class="`
                    flex items-center transition-all relative
                    w-[45px] h-[45px] mx-auto justify-center p-0 rounded-[10px]
                    ${activeMenu === item.id 
                      ? 'bg-brand-primary text-white' 
                      : 'text-neutral-400 hover:bg-white/10 hover:text-neutral-100'
                    }
                  `"
                  style="display: flex; align-items: center; justify-content: center;"
                >
                  <component :is="item.icon" class="h-4 w-4 shrink-0" />
                </button>
              </el-tooltip>
              <button
                v-else
                @click="handleMenuChange(item.id)"
                :class="`
                  flex items-center transition-all relative
                  w-full gap-3 px-4 py-3 rounded-lg
                  ${activeMenu === item.id 
                    ? 'bg-brand-primary text-white' 
                    : 'text-neutral-400 hover:bg-white/10 hover:text-neutral-100'
                  }
                `"
              >
                <component :is="item.icon" class="h-4 w-4 shrink-0" />
                <span class="text-[14px]">{{ item.label }}</span>
              </button>
            </template>
          </div>
        </div>
      </nav>
      <!-- 收缩按钮 -->
      <div class="p-4 border-t border-neutral-800">
        <button
          @click="isSidebarCollapsed = !isSidebarCollapsed"
          :class="`w-full flex items-center py-2 rounded transition-colors ${isSidebarCollapsed ? 'justify-center' : 'justify-start pl-4 hover:bg-white/10 group'}`"
        >
          <div :class="`h-6 w-6 transition-transform duration-300 text-neutral-400 flex items-center justify-center ${isSidebarCollapsed ? '' : 'group-hover:text-white'} ${isSidebarCollapsed ? 'rotate-180' : ''}`">
            <!-- 展开按钮图标 -->
            <svg class="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 16 16">
              <g>
                <rect fill="currentColor" height="1" rx="0.5" width="10" x="3" y="3" />
                <rect fill="currentColor" height="1" rx="0.5" width="6" x="3" y="6" />
                <path d="M11.5 9.5L13 8L11.5 6.5V7.5H10V8.5H11.5V9.5Z" fill="currentColor" />
                <rect fill="currentColor" height="1" rx="0.5" width="10" x="3" y="12" />
                <rect fill="currentColor" height="1" rx="0.5" width="6" x="3" y="9" />
              </g>
            </svg>
          </div>
        </button>
      </div>
    </div>
    <!-- 右侧主内容区 -->
    <div class="flex-1 flex flex-col overflow-hidden">
      <!-- 顶部Header -->
      <header class="h-16 bg-white border-b border-neutral-200 flex items-center justify-between px-6">
        <!-- 面包屑导航 -->
        <div class="flex gap-1 items-center">
          <!-- 一级导航 -->
          <button
            @click="handleBreadcrumbClick('level1')"
            class="flex flex-col font-['PingFang_SC:Regular',sans-serif] justify-center leading-[0] not-italic text-[#909399] text-[14px] text-nowrap tracking-[-0.01px] hover:text-brand-primary cursor-pointer transition-colors"
          >
            <p class="leading-[22px] whitespace-pre">
              {{ activeView === 'orders' || activeView === 'order-detail' ? '业务管理' : '权限管理' }}
            </p>
          </button>
          
          <!-- 分隔符 -->
          <div class="relative shrink-0 size-[12px]">
            <div class="absolute inset-[13.77%_30.91%]">
              <div class="absolute inset-0">
                <svg class="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 5 9">
                  <path d="M0 0L5 4.5L0 9" fill="#909399" />
                </svg>
              </div>
            </div>
          </div>
          
          <!-- 二级导航 -->
          <button
            @click="handleBreadcrumbClick('level2')"
            :class="`flex flex-col font-['PingFang_SC:Regular',sans-serif] justify-center leading-[0] not-italic text-[14px] text-nowrap tracking-[-0.01px] transition-colors ${
              activeView === 'order-detail' ? 'text-[#909399] hover:text-brand-primary cursor-pointer' : 'text-[#303133]'
            }`"
          >
            <p class="leading-[22px] whitespace-pre">
              {{ currentMenuTitle }}
            </p>
          </button>
          
          <!-- 三级导航（仅订单详情时显示） -->
          <template v-if="activeView === 'order-detail'">
            <div class="relative shrink-0 size-[12px]">
              <div class="absolute inset-[13.77%_30.91%]">
                <div class="absolute inset-0">
                  <svg class="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 5 9">
                    <path d="M0 0L5 4.5L0 9" fill="#909399" />
                  </svg>
                </div>
              </div>
            </div>
            <div class="flex flex-col font-['PingFang_SC:Regular',sans-serif] justify-center leading-[0] not-italic text-[#303133] text-[14px] text-nowrap tracking-[-0.01px]">
              <p class="leading-[22px] whitespace-pre">订单详情</p>
            </div>
          </template>
        </div>
        <!-- 用户下拉菜单 -->
        <el-dropdown trigger="click" @command="handleCommand">
          <el-button 
            text 
            class="flex items-center gap-3 rounded-lg px-3 py-2"
          >
            <div class="text-left">
              <p class="text-sm text-neutral-900 text-[14px] font-bold">{{ currentUser?.username || '管理员' }}</p>
              <!-- <p class="text-xs text-neutral-500">
                {{ currentUser?.role === 'admin' ? '系统管理员' : '普通用户' }}
              </p> -->
            </div>
            <ChevronDown :size="16" class="text-neutral-400" />
          </el-button>
          <template #dropdown>
            <el-dropdown-menu class="w-[140px] bg-neutral-800 border-neutral-700 p-1">
              <el-dropdown-item 
                command="logout"
                class="text-error hover:text-error focus:text-error hover:bg-neutral-700 focus:bg-neutral-700 cursor-pointer rounded-md px-3 py-2"
              >
                <LogOut :size="16" class="mr-2" />
                <span class="text-[14px] text-[#181818] hover:text-[#3b82f6] transition-colors">退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </header>
      <!-- 页面内容区 -->
      <main class="flex-1 overflow-auto p-6 bg-[#F0F2F5]">
        <!-- 订单监控页面 -->
        <OrderMonitoring 
          v-if="activeView === 'orders'" 
          :orders="orders" 
          :current-user="currentUser"
          @view-order-detail="handleViewOrderDetail"
          @orders-update="handleOrdersUpdate"
        />
        
        <!-- 订单详情页面 -->
        <OrderDetail
          v-else-if="activeView === 'order-detail' && selectedOrderId"
          :order="selectedOrder"
          :business-rules="businessRules"
          :current-user="currentUser"
          @update="handleUpdateOrder"
          @back="handleBackToOrders"
        />
        
        <!-- 业务酬金管理页面 -->
        <BusinessRulesManagement
          v-else-if="activeView === 'business'"
          :rules="businessRules as any"
          @add="handleAddBusinessRule as any"
          @update="handleUpdateBusinessRule as any"
          @toggle-status="handleToggleBusinessRuleStatus"
          @delete="handleDeleteBusinessRule"
        />
        
        <!-- 角色管理页面 -->
        <RoleManagement
          v-else-if="activeView === 'roles'"
          :roles="roles as any"
          :permissions="permissions"
          @add-role="handleAddRole"
          @update-role="handleUpdateRole"
        />
        
        <UserManagement
          v-else-if="activeView === 'users'"
          :users="users"
          :roles="roles"
          :organizations="organizations"
          :current-user-id="currentUserId"
          @add-user="handleAddUser"
          @update-user="handleUpdateUser"
          @delete-user="handleDeleteUser"
        />
        
        <div v-else class="p-8 bg-white rounded-lg">
          <h2 class="text-xl font-semibold mb-4">欢迎</h2>
          <p class="text-neutral-600">请从左侧菜单选择一个功能。</p>
        </div>
      </main>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed ,onMounted,getCurrentInstance} from 'vue'
import { 
  LayoutDashboard, 
  DollarSign, 
  LogOut, 
  Settings, 
  Users, 
  User as UserIcon, 
  ChevronRight, 
  ChevronDown 
} from 'lucide-vue-next'
import { ElMessage, ElMessageBox } from 'element-plus'
// 导入图片资源
import platformLogoImg from '@/assets/8a3322d5ba8c2ae3592af24d73566a63828a3a27.png'
// 导入子组件
import OrderMonitoring from './OrderMonitoring.vue'
import OrderDetail from './OrderDetail.vue'
import BusinessRulesManagement from './BusinessRulesManagement.vue'
import RoleManagement, { type Permission } from './RoleManagement.vue'
import UserManagement, { type User as UserType } from './UserManagement.vue'
import RoleIcon from './icons/RoleIcon.vue'
const platformLogo = ref(platformLogoImg)
// 获取全局API实例
const { $api } = getCurrentInstance()!.appContext.config.globalProperties
// 本地Role类型定义，确保permissions字段是必需的
interface Role {
  id: string
  roleName: string
  name: string
  level: '地市级' | '区县级' | '一线人员'
  status: '启用' | '禁用'
  remark?: string
  permissionIds?: string[]
  permissions: string[]
  createTime?: string
}
interface DesktopMainProps {
  currentUser: { username: string; role: 'admin' | 'viewer' } | null;
}
const props = defineProps<DesktopMainProps>()
const emit = defineEmits(['logout'])
// 响应式数据
const isSidebarCollapsed = ref(false)
const activeMenu = ref<string>('orders') // 当前激活的菜单
const activeView = ref<string>('orders') // 当前显示的视图
const selectedOrderId = ref<string | null>(null) // 当前查看的订单ID
const selectedOrder = ref<any>(null) // 当前查看的订单
const userInfo = ref(localStorage.getItem('pcUserInfo') ? JSON.parse(localStorage.getItem('pcUserInfo') as string) : {})
// 菜单配置
// const businessMenuItems = [
//   { id: 'orders', label: '登记订单管理', icon: LayoutDashboard },
//   { id: 'business', label: '业务酬金管理', icon: DollarSign }
// ]
const businessMenuItems = computed(() => {
  let va = userInfo.value
  if(va?.functions){
    let arr = va.functions.filter((item: any) => {return item.id==1})
    if(arr.length>0 && arr[0].children){
      let barr: any[] = []
      arr[0].children.forEach((item: any) => {
        if(item.id == 2){
          barr.push({ id: 'orders', label: '登记订单管理', icon: LayoutDashboard })
        }
        if(item.id == 8){
          barr.push({ id: 'business', label: '业务酬金管理', icon: DollarSign })
        }
      })

      return barr
    }
  }
  return []
})
// const systemMenuItems = [
//   { id: 'roles', label: '角色管理', icon: RoleIcon },
//   { id: 'users', label: '账号管理', icon: Users }
// ]
const systemMenuItems = computed(() => {
  let va = userInfo.value
  if(va?.functions){
    let arr = va.functions.filter((item: any) => {return item.id==14})
    if(arr.length>0 && arr[0].children){
      let barr: any[] = []
      arr[0].children.forEach((item: any) => {
        if(item.id == 15){
          barr.push({ id: 'roles', label: '角色管理', icon: RoleIcon })
        }
        if(item.id == 19){
          barr.push({ id: 'users', label: '账号管理', icon: Users })
        }
      })

      return barr
    }
  }
  return []
})
const menuMap: Record<string, string> = {
  orders: '登记订单管理',
  business: '业务酬金管理',
  roles: '角色管理',
  users: '账号管理',
}
const currentMenuTitle = computed(() => {
  if (activeView.value === 'order-detail') {
    return '订单详情'
  }
  return menuMap[activeView.value] || '首页'
})
// 业务规则数据
const businessRules = ref<BusinessRule[]>([
  {
    id: 'BIZ001',
    businessCode: 'B5G001',
    businessName: '5G套餐办理',
    estimatedReward: 50,
    status: '生效中',
    jobName: '5G套餐办理',
    jobId: 'JOB001',
    preMoney: 50,
    totalPrice: 50,
    createTime: '2025-10-20 10:00'
  },
  {
    id: 'BIZ002',
    businessCode: 'BKDXZ01',
    businessName: '宽带新装',
    estimatedReward: 80,
    status: '生效中',
    jobName: '宽带新装',
    jobId: 'JOB002',
    preMoney: 80,
    totalPrice: 80,
    createTime: '2025-10-20 10:05'
  },
  {
    id: 'BIZ003',
    businessCode: 'BHFCZ01',
    businessName: '话费充值',
    estimatedReward: 30,
    status: '生效中',
    jobName: '话费充值',
    jobId: 'JOB003',
    preMoney: 30,
    totalPrice: 30,
    createTime: '2025-10-20 10:10'
  },
  {
    id: 'BIZ004',
    businessCode: 'BLLB001',
    businessName: '流量包办理',
    estimatedReward: 40,
    status: '已停用',
    jobName: '流量包办理',
    jobId: 'JOB004',
    preMoney: 40,
    totalPrice: 40,
    createTime: '2025-10-20 10:15'
  }
])
// 模拟订单数据
// 使用空数组，让 OrderMonitoring 组件自动生成模拟数据
const orders = ref([])
// 存储从 OrderMonitoring 组件获取的订单数据
const allOrders = ref([] as any[])
// 类型定义
interface BusinessRule {
  id: string
  businessCode: string
  businessName: string
  estimatedReward: number
  status: "生效中" | "已停用"
  createTime: string
  jobName: string
  preMoney: number
  jobId: string
  totalPrice: number
}
interface Organization {
  id: string
  name: string
  areaCode: string
  type: "地市" | "区县" | "客户经理团队"
  parentId?: string
  children?: Organization[]
}
// 角色管理数据
const roles = ref<Role[]>([])
// 权限数据
const permissions = ref<Permission[]>(userInfo.value?.functions || [])
// 根据订单ID获取订单详情
const getOrderById = (orderId: string) => {
  return allOrders.value.find((order: any) => order.id === orderId)
}
// 方法
const handleMenuChange = (menuId: string) => {
  activeMenu.value = menuId
  activeView.value = menuId
}
const handleCommand = (command: string) => {
  if (command === 'logout') {
    ElMessageBox.confirm('确定要退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      emit('logout')
      ElMessage.success('已退出登录')
    }).catch(() => {
      // 用户取消操作
    })
  } else {
    ElMessage.info(`点击了 ${command}`)
  }
}
const handleViewOrderDetail = (order: any) => {
  selectedOrder.value = order
  selectedOrderId.value = order.id
  activeView.value = 'order-detail'
}
const handleBackToOrders = () => {
  selectedOrderId.value = null
  activeView.value = 'orders'
}
const handleUpdateOrder = (updates: any) => {
  // 更新 allOrders 中的订单数据
  if (selectedOrderId.value) {
    const orderIndex = allOrders.value.findIndex(order => order.id === selectedOrderId.value)
    if (orderIndex !== -1) {
      allOrders.value[orderIndex] = { ...allOrders.value[orderIndex], ...updates }
    }
  }
  console.log('更新订单:', updates)
  ElMessage.success('订单更新成功')
}
// 接收来自 OrderMonitoring 组件的订单数据
const handleOrdersUpdate = (ordersList: any[]) => {
  allOrders.value = ordersList
}
// 面包屑导航点击处理
const handleBreadcrumbClick = (level: string) => {
  if (level === 'level1') {
    if (activeView.value === 'orders' || activeView.value === 'order-detail') {
      activeView.value = 'orders'
      activeMenu.value = 'orders'
    }
  } else if (level === 'level2') {
    if (activeView.value === 'order-detail') {
      activeView.value = 'orders'
    }
  }
}
// 业务规则管理方法
const handleAddBusinessRule = (ruleData: Omit<BusinessRule, 'id' | 'createTime'>) => {
  const newRule = {
    id: `BIZ${String(businessRules.value.length + 1).padStart(3, '0')}`,
    ...ruleData,
    createTime: new Date().toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    })
  }
  businessRules.value.push(newRule)
  ElMessage.success('业务规则创建成功')
  console.log('新增业务规则:', newRule)
}
const handleUpdateBusinessRule = (ruleId: string, updates: Partial<BusinessRule>) => {
  const ruleIndex = businessRules.value.findIndex(rule => rule.id === ruleId)
  if (ruleIndex !== -1) {
    const existingRule = businessRules.value[ruleIndex]
    businessRules.value[ruleIndex] = {
      ...existingRule,
      ...updates
    } as BusinessRule
    ElMessage.success('业务规则更新成功')
    console.log('更新业务规则:', ruleId, updates)
  }
}
const handleToggleBusinessRuleStatus = (ruleId: string) => {
  const ruleIndex = businessRules.value.findIndex(rule => rule.id === ruleId)
  if (ruleIndex !== -1) {
    const rule = businessRules.value[ruleIndex]
    if (rule) {
      const currentStatus = rule.status
      const newStatus = currentStatus === '生效中' ? '已停用' : '生效中'
      businessRules.value[ruleIndex] = {
        ...rule,
        status: newStatus
      }
      ElMessage.success(`业务规则已${newStatus === '生效中' ? '启用' : '停用'}`)
      console.log('切换业务规则状态:', ruleId, newStatus)
    }
  }
}
const handleDeleteBusinessRule = (ruleId: string) => {
  const ruleIndex = businessRules.value.findIndex(rule => rule.id === ruleId)
  if (ruleIndex !== -1) {
    businessRules.value.splice(ruleIndex, 1)
    ElMessage.success('业务规则删除成功')
    console.log('删除业务规则:', ruleId)
  }
}
// 角色管理方法
const handleAddRole = (roleData: any) => {
  const newRole: Role = {
    id: String(Date.now()),
    roleName: roleData.roleName || roleData.name || '',
    name: roleData.name || roleData.roleName,
    level: roleData.level,
    permissions: roleData.permissions || roleData.permissionIds || [],
    status: '启用',
    createTime: new Date().toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })
  }
  roles.value.push(newRole)
  console.log('新增角色:', newRole)
}
const handleUpdateRole = (roleId: string, updates: any) => {
  const roleIndex = roles.value.findIndex((role: any) => String(role.id) === roleId)
  if (roleIndex !== -1) {
    const existingRole = roles.value[roleIndex]
    if (existingRole) {
      roles.value[roleIndex] = {
        ...existingRole,
        ...updates,
        permissions: updates.permissions || updates.permissionIds || existingRole.permissions
      } as Role
      console.log('更新角色:', roleId, updates)
    }
  }
}
// 组织架构数据
const organizations = ref<Organization[]>([])

// 生命周期
onMounted(() => {
  getArea()
})
const getArea = async ()=>{
    try {
      const response = await $api.queryAreaData({
        areaId: userInfo.value.areaId
      })
      if (response && response.c === 0) {
        let pa = response.d

        pa.id += ''
        pa.type = pa.areaLevel==2?'地市':'区县'
        pa.name = pa.areaName
        pa.parentId += ''

        pa.children.forEach((item: any) => {
          item.id += ''
          item.type = item.areaLevel==2?'地市':'区县'
          item.name = item.areaName
          item.parentId += ''
        })

        organizations.value = [pa]

        console.log(pa)
      }
    } catch (error) {
      
    }
}

// 当前登录用户ID
const currentUserId = ref('user-001')
// 用户数据
const users = ref<UserType[]>([
  {
    id: 'user-001',
    username: 'admin',
    realName: '系统管理员',
    organizationId: 'org-001',
    roleId: 'role-001',
    phone: '13800138000',
    email: 'admin@cmcc.com',
    status: '1' as '0' | '1',
    createTime: '2025-10-20 08:00:00',
    creatorId: 'system'
  },
  {
    id: 'user-002',
    username: 'zhangsan',
    realName: '张三',
    organizationId: 'org-002',
    roleId: 'role-002',
    phone: '13800138001',
    email: 'zhangsan@cmcc.com',
    status: '1' as '0' | '1',
    createTime: '2025-10-20 09:00:00',
    creatorId: 'user-001'
  },
  {
    id: 'user-003',
    username: 'lisi',
    realName: '李四',
    organizationId: 'org-003',
    roleId: 'role-002',
    phone: '13800138002',
    email: 'lisi@cmcc.com',
    status: '0' as '0' | '1',
    createTime: '2025-10-20 10:00:00',
    creatorId: 'user-001'
  },
  {
    id: 'user-004',
    username: 'wangwu',
    realName: '王五',
    organizationId: 'org-005',
    roleId: 'role-003',
    phone: '13800138003',
    email: 'wangwu@cmcc.com',
    status: '1' as '0' | '1',
    createTime: '2025-10-20 11:00:00',
    creatorId: 'user-001'
  }
])
// 用户管理方法
const handleAddUser = (userData: Omit<UserType, 'id' | 'createTime' | 'creatorId'>) => {
  const newUser = {
    id: `user-${Date.now()}`,
    creatorId: props.currentUser?.username || 'system',
    ...userData,
    createTime: new Date().toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })
  } as UserType
  users.value.push(newUser)
  console.log('新增用户:', newUser)
}
const handleUpdateUser = (userId: string, updates: Partial<UserType>) => {
  const userIndex = users.value.findIndex(user => user.id === userId)
  if (userIndex !== -1) {
    const existingUser = users.value[userIndex]
    users.value[userIndex] = {
      ...existingUser,
      ...updates
    } as UserType
    console.log('更新用户:', userId, updates)
  }
}
const handleDeleteUser = (userId: string) => {
  const userIndex = users.value.findIndex(user => user.id === userId)
  if (userIndex !== -1) {
    users.value.splice(userIndex, 1)
    console.log('删除用户:', userId)
  }
}
</script>
<style scoped>
/* 隐藏滚动条但保持滚动功能 */
.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}
/* 移除右上角用户信息按钮的悬浮背景效果 */
:deep(header .el-button.is-text:hover),
:deep(header .el-button.is-text:focus),
:deep(header .el-button.is-text:active) {
  background-color: transparent !important;
}
</style>