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">
            <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">
            <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 && getOrderById(selectedOrderId)"
          :order="getOrderById(selectedOrderId)!"
          :business-rules="businessRules"
          :current-user="currentUser"
          @update="handleUpdateOrder"
          @back="handleBackToOrders"
        />
        
        <!-- 业务酬金管理页面 -->
        <BusinessRulesManagement
          v-else-if="activeView === 'business'"
          :rules="businessRules"
          @add="handleAddBusinessRule"
          @update="handleUpdateBusinessRule"
          @toggle-status="handleToggleBusinessRuleStatus"
          @delete="handleDeleteBusinessRule"
        />
        
        <!-- 角色管理页面 -->
        <RoleManagement
          v-else-if="activeView === 'roles'"
          :roles="roles"
          :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 } 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 from './RoleManagement.vue'
import UserManagement from './UserManagement.vue'
import RoleIcon from './icons/RoleIcon.vue'

const platformLogo = ref(platformLogoImg)

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 businessMenuItems = [
  { id: 'orders', label: '登记订单管理', icon: LayoutDashboard },
  { id: 'business', label: '业务酬金管理', icon: DollarSign }
]

const systemMenuItems = [
  { id: 'roles', label: '角色管理', icon: RoleIcon },
  { id: 'users', label: '账号管理', icon: Users }
]

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([
  {
    id: 'BIZ001',
    businessCode: 'B5G001',
    businessName: '5G套餐办理',
    estimatedReward: 50,
    status: '生效中',
    createTime: '2025-10-20 10:00'
  },
  {
    id: 'BIZ002',
    businessCode: 'BKDXZ01',
    businessName: '宽带新装',
    estimatedReward: 80,
    status: '生效中',
    createTime: '2025-10-20 10:05'
  },
  {
    id: 'BIZ003',
    businessCode: 'BHFCZ01',
    businessName: '话费充值',
    estimatedReward: 30,
    status: '生效中',
    createTime: '2025-10-20 10:10'
  },
  {
    id: 'BIZ004',
    businessCode: 'BLLB001',
    businessName: '流量包办理',
    estimatedReward: 40,
    status: '已停用',
    createTime: '2025-10-20 10:15'
  }
])

// 模拟订单数据
// 使用空数组，让 OrderMonitoring 组件自动生成模拟数据
const orders = ref([])

// 存储从 OrderMonitoring 组件获取的订单数据
const allOrders = ref([])

// 类型定义
interface Role {
  id: string
  name: string
  description?: string
  level: '地市级' | '区县级' | '一线人员'
  permissionIds: string[]
  status: '启用' | '禁用'
  createTime?: string
}

interface Permission {
  id: string
  name: string
  code: string
  description?: string
  parentId?: string
  children?: Permission[]
}

// 角色管理数据
const roles = ref<Role[]>([
  {
    id: 'role-001',
    name: '区县全权管理员',
    description: '拥有区县级别的所有管理权限，可以管理订单、用户和业务规则',
    level: '区县级',
    permissionIds: [
      'order',
      'order:view',
      'order:complete',
      'order:reward',
      'order:approve',
      'business',
      'business:view',
      'business:create',
      'business:edit',
      'system',
      'system:role',
      'system:role:view',
      'system:role:create',
      'system:role:edit',
      'system:account',
      'system:account:view',
      'system:account:create',
      'system:account:edit'
    ],
    status: '启用',
    createTime: '2025-10-20 09:00:00'
  },
  {
    id: 'role-002',
    name: '订单管理员',
    description: '负责订单的日常管理和处理',
    level: '一线人员',
    permissionIds: ['order', 'order:view', 'order:complete', 'order:reward', 'order:approve'],
    status: '启用',
    createTime: '2025-10-20 09:30:00'
  },
  {
    id: 'role-003',
    name: '业务酬金管理员',
    description: '负责业务酬金的配置和维护',
    level: '区县级',
    permissionIds: ['business', 'business:view', 'business:create', 'business:edit'],
    status: '启用',
    createTime: '2025-10-20 10:00:00'
  }
])

// 权限数据
const permissions = ref<Permission[]>(JSON.parse(localStorage.getItem('pcUserInfo')).functions)

// 根据订单ID获取订单详情
const getOrderById = (orderId: string) => {
  return allOrders.value.find(order => 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) => {
  selectedOrderId.value = order.id
  activeView.value = 'order-detail'
}

const handleBackToOrders = () => {
  selectedOrderId.value = null
  activeView.value = 'orders'
}

const handleUpdateOrder = (updates: any) => {
  // 更新 allOrders 中的订单数据
  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<any, '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: any) => {
  const ruleIndex = businessRules.value.findIndex(rule => rule.id === ruleId)
  if (ruleIndex !== -1) {
    businessRules.value[ruleIndex] = { 
      ...businessRules.value[ruleIndex], 
      ...updates,
      updateTime: new Date().toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    }
    ElMessage.success('业务规则更新成功')
    console.log('更新业务规则:', ruleId, updates)
  }
}

const handleToggleBusinessRuleStatus = (ruleId: string) => {
  const ruleIndex = businessRules.value.findIndex(rule => rule.id === ruleId)
  if (ruleIndex !== -1) {
    const currentStatus = businessRules.value[ruleIndex].status
    const newStatus = currentStatus === '生效中' ? '已停用' : '生效中'
    businessRules.value[ruleIndex].status = newStatus
    businessRules.value[ruleIndex].updateTime = new Date().toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    })
    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: Omit<Role, 'id' | 'createTime'>) => {
  const newRole = {
    id: `role-${Date.now()}`,
    ...roleData,
    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: Partial<Role>) => {
  const roleIndex = roles.value.findIndex(role => role.id === roleId)
  if (roleIndex !== -1) {
    roles.value[roleIndex] = { ...roles.value[roleIndex], ...updates }
    console.log('更新角色:', roleId, updates)
  }
}

// 组织架构数据
const organizations = ref([
  {
    id: 'org-001',
    name: '杭州市移动',
    type: '地市',
    children: [
      {
        id: 'org-002',
        name: '西湖区',
        type: '区县',
        parentId: 'org-001',
        children: [
          {
            id: 'org-005',
            name: '客户经理团队',
            type: '客户经理团队',
            parentId: 'org-002'
          }
        ]
      },
      {
        id: 'org-003',
        name: '滨江区',
        type: '区县',
        parentId: 'org-001',
        children: [
          {
            id: 'org-006',
            name: '客户经理团队',
            type: '客户经理团队',
            parentId: 'org-003'
          }
        ]
      },
      {
        id: 'org-004',
        name: '余杭区',
        type: '区县',
        parentId: 'org-001',
        children: [
          {
            id: 'org-007',
            name: '客户经理团队',
            type: '客户经理团队',
            parentId: 'org-004'
          }
        ]
      }
    ]
  }
])

// 当前登录用户ID
const currentUserId = ref('user-001')

// 用户数据
const users = ref([
  {
    id: 'user-001',
    username: 'admin',
    realName: '系统管理员',
    organizationId: 'org-001',
    roleId: 'role-001',
    phone: '13800138000',
    email: 'admin@cmcc.com',
    status: '正常',
    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: '正常',
    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: '禁用',
    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: '正常',
    createTime: '2025-10-20 11:00:00',
    creatorId: 'user-001'
  }
])

// 用户管理方法
const handleAddUser = (userData: any) => {
  const newUser = {
    id: `user-${Date.now()}`,
    ...userData,
    createTime: new Date().toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })
  }
  users.value.push(newUser)
  console.log('新增用户:', newUser)
}

const handleUpdateUser = (userId: string, updates: any) => {
  const userIndex = users.value.findIndex(user => user.id === userId)
  if (userIndex !== -1) {
    users.value[userIndex] = { ...users.value[userIndex], ...updates }
    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>