xlx_teacher_app/src/pages/index/index.vue

<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="home">
{
  "layout": "tabbar",
  "style": {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    "navigationStyle": "custom",
    "navigationBarTitleText": "首页"
  }
}
</route>

<script lang="ts" setup>
import { ref } from 'vue'

defineOptions({
  name: 'Home',
})

// 获取屏幕边界到安全区域距离
let safeAreaInsets
let systemInfo

// #ifdef MP-WEIXIN
// 微信小程序使用新的API
systemInfo = uni.getWindowInfo()
safeAreaInsets = systemInfo.safeArea
  ? {
      top: systemInfo.safeArea.top,
      right: systemInfo.windowWidth - systemInfo.safeArea.right,
      bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
      left: systemInfo.safeArea.left,
    }
  : null
// #endif

// #ifndef MP-WEIXIN
// 其他平台继续使用uni API
systemInfo = uni.getSystemInfoSync()
safeAreaInsets = systemInfo.safeAreaInsets
// #endif

// 模拟数据
const schoolName = ref('华师一附中')
const teacherName = ref('张信哲')
const teacherSubject = ref('语文')
const className = ref('初三(1)班班主任')

// 考试选择数据
const examOptions = ['初三年级摸底月考', '期中考试', '期末考试']
const selectedExam = ref(examOptions[0])

// 功能菜单数据
const menuItems = [
  {
    id: 'grade',
    name: '成绩',
    icon: 'i-mingcute:file-certificate-line',
    color: 'text-orange-500',
    bg: 'bg-orange-50',
  },
  {
    id: 'marking',
    name: '阅卷',
    icon: 'i-mingcute:edit-line',
    color: 'text-red-500',
    bg: 'bg-red-50',
  },
  {
    id: 'analysis',
    name: '试卷讲评',
    icon: 'i-mingcute:clipboard-line',
    color: 'text-green-500',
    bg: 'bg-green-50',
  },
  {
    id: 'class-analysis',
    name: '班级分析',
    icon: 'i-carbon:chart-bar-stacked',
    color: 'text-blue-500',
    bg: 'bg-blue-50',
  },
]

// 统计数据
const statsData = {
  classCount: 53,
  totalCount: 1123,
  ranking: 2,
  totalRanking: 11,
  top50Count: 11,
  top50Total: 50,
  highestScore: 98,
  lowestScore: 45,
  excellentRate: 12,
  goodRate: 65,
  passRate: 53,
}

// 菜单点击处理
function handleMenuClick(item: any) {
  if (item.id === 'grade') {
    uni.navigateTo({
      url: '/pages-sub/grade/index',
    })
  }
  else if (item.id === 'marking') {
    uni.navigateTo({
      url: '/pages/marking/index',
    })
  }
  else if (item.id === 'analysis') {
    uni.navigateTo({
      url: '/pages-sub/analysis/index',
    })
  }
  else if (item.id === 'class-analysis') {
    uni.navigateTo({
      url: '/pages-sub/class-analysis/index',
    })
  }
}

// 考试选择处理
function handleExamChange() {
  uni.showActionSheet({
    itemList: examOptions,
    success: (res) => {
      selectedExam.value = examOptions[res.tapIndex]
    },
  })
}

// 设置按钮处理
function handleSettings() {
  uni.showModal({
    title: '设置参数',
    content: '是否设置优秀率等参数？',
    success: (res) => {
      if (res.confirm) {
        uni.showToast({
          title: '设置功能开发中',
          icon: 'none',
        })
      }
    },
  })
}

// 查看详情
function handleViewDetail() {
  uni.showToast({
    title: '查看详情功能开发中',
    icon: 'none',
  })
}

// 试卷讲评
function handleExamReview() {
  uni.showToast({
    title: '试卷讲评功能开发中',
    icon: 'none',
  })
}
</script>

<template>
  <view class="bg-slate-50">
    <div class="absolute left-0 right-0 top-0 z-0 h-200px rounded-b-2xl from-cyan-400 to-blue-500 bg-gradient-to-br" />
    <!-- 顶部区域 -->
    <view class="relative px-4 pb-4 pt-2" :style="{ paddingTop: `${(safeAreaInsets?.top || 0) + 8}px` }">
      <!-- 学校名称居中 -->
      <view class="mb-3 text-center">
        <view class="i-mingcute:school-line mx-auto mb-1 text-xl text-white" />
        <text class="text-base text-white font-medium">{{ schoolName }}</text>
      </view>

      <!-- 用户信息左右布局 -->
      <view class="flex items-center justify-between">
        <!-- 左侧用户信息 -->
        <view class="flex items-center">
          <view class="i-mingcute:user-line mr-2 text-lg text-white" />
          <text class="text-base text-white font-medium">{{ teacherName }}（{{ teacherSubject }}）</text>
        </view>

        <!-- 右侧班主任标识 -->
        <view class="rounded-full bg-white/20 px-3 py-1">
          <view class="i-mingcute:user-4-line mr-1 inline-block text-sm text-white" />
          <text class="text-xs text-white">{{ className }}</text>
        </view>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="relative z-10 mx-2 min-h-[calc(100vh-200px)] rounded-t-3xl bg-white px-2 pt-4">
      <!-- 功能菜单网格 -->
      <view class="mb-4 border border-slate-100 bg-gray-50 bg-gradient-to-r px-4 shadow-sm">
        <view class="grid grid-cols-4 gap-3">
          <view
            v-for="item in menuItems"
            :key="item.id"
            class="flex flex-col items-center rounded-xl py-2 transition-all active:scale-95"
            @tap="handleMenuClick(item)"
          >
            <view class="mb-1 h-10 w-10 flex items-center justify-center rounded-xl" :class="item.bg">
              <view class="text-lg" :class="[item.icon, item.color]" />
            </view>
            <text class="text-xs text-gray-700 font-medium">{{ item.name }}</text>
          </view>
        </view>
      </view>

      <!-- 整体概况区域 -->
      <view class="mb-4">
        <view class="mb-3 flex items-center justify-between">
          <text class="text-lg text-slate-800 font-semibold">整体概况</text>
          <view class="i-mingcute:filter-line text-lg text-cyan-500 hover:text-cyan-600" @tap="handleSettings" />
        </view>

        <!-- 考试选择 -->
        <view class="flex items-center justify-between border border-slate-200 rounded-xl from-slate-50 to-cyan-50 bg-gradient-to-r p-3" @tap="handleExamChange">
          <text class="text-sm text-slate-700 font-medium">{{ selectedExam }}</text>
          <view class="i-mingcute:down-line text-slate-400" />
        </view>
      </view>

      <!-- 统计数据卡片 -->
      <view class="grid grid-cols-2 mb-4 gap-3">
        <!-- 班级/年级人数 -->
        <view class="border border-blue-100 rounded-xl from-white to-blue-50 bg-gradient-to-br p-4 shadow-blue-50 shadow-sm">
          <view class="mb-1 flex items-center">
            <view class="i-mingcute:group-line mr-1 text-base text-blue-500" />
            <text class="text-xs text-slate-600">班级/年级人数</text>
          </view>
          <text class="text-lg text-slate-800 font-bold">{{ statsData.classCount }}/{{ statsData.totalCount }}</text>
        </view>

        <!-- 均分排名 -->
        <view class="border border-blue-100 rounded-xl from-white to-blue-50 bg-gradient-to-br p-4 shadow-blue-50 shadow-sm">
          <view class="mb-1 flex items-center">
            <view class="i-mingcute:chart-bar-line mr-1 text-base text-blue-600" />
            <text class="text-xs text-slate-600">均分排名</text>
          </view>
          <text class="text-lg text-slate-800 font-bold">{{ statsData.ranking }}/{{ statsData.totalRanking }}</text>
        </view>

        <!-- 年级前50名 -->
        <view class="border border-cyan-100 rounded-xl from-white to-cyan-50 bg-gradient-to-br p-4 shadow-cyan-50 shadow-sm">
          <view class="mb-1 flex items-center">
            <view class="i-mingcute:trophy-line mr-1 text-base text-cyan-500" />
            <text class="text-xs text-slate-600">年级前50名</text>
          </view>
          <text class="text-lg text-slate-800 font-bold">{{ statsData.top50Count }}/{{ statsData.top50Total }}</text>
        </view>

        <!-- 最高分/最低分 -->
        <view class="border border-cyan-100 rounded-xl from-white to-cyan-50 bg-gradient-to-br p-4 shadow-cyan-50 shadow-sm">
          <view class="mb-1 flex items-center">
            <view class="i-carbon:chart-line mr-1 text-base text-cyan-600" />
            <text class="text-xs text-slate-600">最高分/最低分</text>
          </view>
          <text class="text-lg text-slate-800 font-bold">{{ statsData.highestScore }}/{{ statsData.lowestScore }}</text>
        </view>

        <!-- 优秀率 -->
        <view class="border border-sky-100 rounded-xl from-white to-sky-50 bg-gradient-to-br p-4 shadow-sky-50 shadow-sm">
          <view class="mb-1 flex items-center">
            <view class="i-mingcute:thumb-up-line mr-1 text-base text-sky-500" />
            <text class="text-xs text-slate-600">优秀率</text>
          </view>
          <text class="text-lg text-slate-800 font-bold">{{ statsData.excellentRate }}%</text>
        </view>

        <!-- 良好率 -->
        <view class="border border-sky-100 rounded-xl from-white to-sky-50 bg-gradient-to-br p-4 shadow-sky-50 shadow-sm">
          <view class="mb-1 flex items-center">
            <view class="i-mingcute:check-circle-line mr-1 text-base text-sky-600" />
            <text class="text-xs text-slate-600">良好率</text>
          </view>
          <text class="text-lg text-slate-800 font-bold">{{ statsData.goodRate }}%</text>
        </view>
      </view>

      <!-- 及格率 -->
      <view class="mb-4 border border-blue-100 rounded-xl from-white to-blue-50 bg-gradient-to-br p-4 shadow-blue-50 shadow-sm">
        <view class="mb-1 flex items-center">
          <view class="i-carbon:checkmark mr-1 text-base text-blue-500" />
          <text class="text-xs text-slate-600">及格率</text>
        </view>
        <text class="text-lg text-slate-800 font-bold">{{ statsData.passRate }}%</text>
      </view>

      <!-- 底部操作按钮 -->
      <view class="flex gap-3 pb-4">
        <wd-button
          type="info"
          size="medium"
          class="flex-1 shadow-sm"
          @click="handleViewDetail"
        >
          查看详情
        </wd-button>
        <wd-button
          type="primary"
          size="medium"
          class="flex-1 shadow-sm"
          @click="handleExamReview"
        >
          试卷讲评
        </wd-button>
      </view>
    </view>
  </view>
</template>