Home-Care/hss-home-service/website/pages/platform/index.vue

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { usePlatformAuth } from '~/composables/usePlatformAuth'
import { useApi } from '~/composables/useApi'

definePageMeta({ layout: false })

const ROLE_LABELS: Record<string,string> = { ADMIN:'系统管理员', RECEPTIONIST:'受理员', ASSESSOR:'评估员', PLANNER:'方案制定员', DISPATCHER:'调度员', STAFF:'服务人员', SETTLER:'结算员', SUPERVISOR:'监管员', REVIEWER:'复核员' }

const { isLoggedIn, user, logout } = usePlatformAuth()
const roleLabel = computed(() => ROLE_LABELS[user.value?.userRole || ''] || user.value?.userRole || '')
const { get, post } = useApi()

const stats = ref<Record<string,any>>({})
const recentOrders = ref<any[]>([])
const activeMenu = ref('dashboard')

onMounted(async () => {
  if (!isLoggedIn.value) { await navigateTo('/platform/login'); return }
  try { stats.value = await get<any>('/admin/dashboard').catch(() => ({})) } catch {}
})

const menuItems = [
  { key: 'dashboard', label: '工作台', icon: 'chart' },
  { key: 'applications', label: '服务申请', icon: 'clipboard', href: '/platform/applications' },
  { key: 'work-orders', label: '工单管理', icon: 'document', href: '/platform/work-orders' },
]

const roleMenus: Record<string, string[]> = {
  RECEPTIONIST: ['applications'],
  ASSESSOR: ['applications'],
  DISPATCHER: ['work-orders'],
  STAFF: ['work-orders'],
  SETTLER: ['dashboard'],
  SUPERVISOR: ['dashboard'],
  ADMIN: ['applications', 'work-orders'],
}
</script>

<template>
  <div class="min-h-screen bg-surface flex">
    <!-- Sidebar -->
    <aside class="hidden lg:flex flex-col w-56 bg-white border-r shrink-0">
      <div class="p-4 border-b">
        <NuxtLink to="/platform" class="flex items-center gap-2 font-bold text-primary">
          <div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white text-xs font-mono">H</div>
          <span class="text-sm">智慧医养平台</span>
        </NuxtLink>
      </div>
      <nav class="flex-1 p-3 space-y-1">
        <NuxtLink v-for="m in menuItems" :key="m.key" :to="m.href || '/platform'"
          class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors"
          :class="activeMenu === m.key ? 'bg-primary-50 text-primary font-medium' : 'text-text-secondary hover:bg-gray-50'">
          <AppIcon :name="m.icon" class="w-4 h-4" /> {{ m.label }}
        </NuxtLink>
      </nav>
      <div class="p-3 border-t">
        <div class="flex items-center gap-2 px-3 py-2 text-sm">
          <div class="w-7 h-7 rounded-full bg-primary-50 text-primary flex items-center justify-center text-xs font-bold">{{ user?.userName?.charAt(0) }}</div>
          <div class="min-w-0">
            <div class="text-xs font-medium truncate">{{ user?.userName }}</div>
            <div class="text-xs text-text-secondary">{{ roleLabel }}</div>
          </div>
        </div>
        <button @click="logout(); navigateTo('/platform/login')"
          class="w-full mt-2 px-3 py-2 text-xs text-text-secondary hover:text-red-500 transition-colors text-left rounded-lg hover:bg-red-50">退出登录</button>
      </div>
    </aside>

    <!-- Main Content -->
    <main class="flex-1 overflow-auto">
      <!-- Mobile header -->
      <div class="lg:hidden bg-white border-b px-4 py-3 flex items-center justify-between">
        <NuxtLink to="/platform" class="font-bold text-primary text-sm">智慧医养平台</NuxtLink>
        <div class="flex items-center gap-2">
          <span class="text-xs text-text-secondary">{{ roleLabel }}</span>
          <button @click="logout(); navigateTo('/platform/login')" class="text-xs text-red-500">退出</button>
        </div>
      </div>

      <div class="p-4 lg:p-8">
        <h2 class="text-xl font-bold mb-6">工作台 — {{ ROLE_LABELS[user?.userRole] || user?.userRole }}</h2>

        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
          <div class="bg-white rounded-xl p-4 shadow-sm border"><div class="text-2xl font-bold font-mono text-primary">{{ stats.todayOrders || '--' }}</div><div class="text-xs text-text-secondary mt-1">今日工单</div></div>
          <div class="bg-white rounded-xl p-4 shadow-sm border"><div class="text-2xl font-bold font-mono text-accent-700">{{ stats.inProgress || '--' }}</div><div class="text-xs text-text-secondary mt-1">进行中</div></div>
          <div class="bg-white rounded-xl p-4 shadow-sm border"><div class="text-2xl font-bold font-mono text-green-600">{{ stats.completedToday || '--' }}</div><div class="text-xs text-text-secondary mt-1">已完成</div></div>
          <div class="bg-white rounded-xl p-4 shadow-sm border"><div class="text-2xl font-bold font-mono text-red-500">{{ stats.exceptions || '--' }}</div><div class="text-xs text-text-secondary mt-1">异常</div></div>
        </div>

        <!-- Quick actions based on role -->
        <div class="grid lg:grid-cols-2 gap-6">
          <div class="bg-white rounded-2xl shadow-sm border p-6">
            <h3 class="font-bold mb-4">快捷操作</h3>
            <div class="grid grid-cols-2 gap-3">
              <NuxtLink v-if="['RECEPTIONIST','ADMIN'].includes(user?.userRole||'')" to="/platform/applications"
                class="p-4 rounded-xl bg-primary-50 text-primary text-sm font-medium hover:bg-primary hover:text-white transition-colors text-center">受理新申请</NuxtLink>
              <NuxtLink v-if="['DISPATCHER','ADMIN'].includes(user?.userRole||'')" to="/platform/work-orders"
                class="p-4 rounded-xl bg-accent-50 text-accent-700 text-sm font-medium hover:bg-accent hover:text-white transition-colors text-center">查看工单</NuxtLink>
              <NuxtLink to="/demo" class="p-4 rounded-xl bg-gray-50 text-text-secondary text-sm font-medium hover:bg-gray-100 transition-colors text-center">平台演示</NuxtLink>
              <NuxtLink to="/" class="p-4 rounded-xl bg-gray-50 text-text-secondary text-sm font-medium hover:bg-gray-100 transition-colors text-center">返回官网</NuxtLink>
            </div>
          </div>
          <div class="bg-white rounded-2xl shadow-sm border p-6">
            <h3 class="font-bold mb-4">当前角色权限</h3>
            <div class="space-y-2 text-sm">
              <div class="flex justify-between py-2 border-b border-gray-50"><span class="text-text-secondary">角色</span><span class="font-medium">{{ ROLE_LABELS[user?.userRole] || user?.userRole }}</span></div>
              <div class="flex justify-between py-2 border-b border-gray-50"><span class="text-text-secondary">可操作模块</span><span class="font-medium">{{ (roleMenus[user?.userRole||'']||['dashboard']).join(', ') }}</span></div>
              <div class="flex justify-between py-2"><span class="text-text-secondary">数据范围</span><span class="font-medium">本机构</span></div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>