xlx_teacher_app/src/pages/student/list.vue

<script setup lang="ts">
import type { StudentInfo } from '@/service/types'
import { useQuery } from '@tanstack/vue-query'
import { whenever } from '@vueuse/core'
import { computed, onMounted, ref } from 'vue'
import StudentListItem from '@/components/student/StudentListItem.vue'
import { teacherAnalysisAttentionStudentUsingPost, teacherAnalysisExportStudentListUsingPost, teacherAnalysisStudentListUsingPost } from '@/service/laoshichengjifenxi'
import { useHomeStore } from '@/store/home'

// 1. 引入 Store
const homeStore = useHomeStore()
const searchQuery = ref('')

// 2. 逻辑计算与 Query (保持原逻辑不变)
const canLoadStudents = computed(() => {
  return homeStore.selectedClassKey && homeStore.selectedExamId && homeStore.selectedExamSubjectId
})

const {
  data: studentsData,
  isLoading: loading,
  error,
  refetch,
} = useQuery({
  queryKey: computed(() => [
    'students',
    homeStore.selectedClassKey,
    homeStore.selectedExamId,
    homeStore.selectedExamSubjectId,
    homeStore.selectedGradeKey,
    searchQuery.value,
  ]),
  queryFn: async () => {
    const response = await teacherAnalysisStudentListUsingPost({
      body: {
        class_id: homeStore.selectedClassKey!,
        exam_subject_id: homeStore.selectedExamSubjectId!,
        grade_id: homeStore.selectedGradeKey!,
        keyword: searchQuery.value || undefined,
      },
    })
    return response || { attentioned_students: [], other_students: [] }
  },
  enabled: computed(() => !!canLoadStudents.value),
  staleTime: 30000,
  gcTime: 300000,
})

const attentionedStudents = computed(() => studentsData.value?.attentioned_students || [])
const otherStudents = computed(() => studentsData.value?.other_students || [])

// 3. 交互方法
function goToStudentDetail(student: StudentInfo) {
  uni.navigateTo({
    url: `/pages/student/detail?info_id=${student.info_id}&student_number=${student.student_number}&student_name=${student.student_name}`,
  })
}

async function toggleAttention(student: StudentInfo, isAttentioned: boolean) {
  if (!student.student_number) {
    return uni.showToast({ title: '缺少学号', icon: 'none' })
  }
  uni.showLoading({ title: '处理中', mask: true })
  try {
    await teacherAnalysisAttentionStudentUsingPost({
      body: { student_number: student.student_number, is_attention: !isAttentioned },
    })
    uni.showToast({ title: '操作成功', icon: 'success' })
    refetch()
  }
  catch (error) {
    uni.showToast({ title: '操作失败', icon: 'none' })
  }
  finally {
    uni.hideLoading()
  }
}

async function handleDownload() {
  try {
    uni.showLoading({ title: '准备中' })
    const response = await teacherAnalysisExportStudentListUsingPost({
      body: {
        class_id: homeStore.selectedClassKey!,
        exam_subject_id: homeStore.selectedExamSubjectId!,
        grade_id: homeStore.selectedGradeKey!,
      },
    })

    if (response) {
      const downloadUrl = `${import.meta.env.VITE_API_BASE_URL || ''}${response}`
      // #ifdef H5
      window.open(downloadUrl, '_blank')
      // #endif
      // #ifndef H5
      uni.downloadFile({
        url: downloadUrl,
        success: (res) => {
          if (res.statusCode === 200) {
            uni.openDocument({ filePath: res.tempFilePath })
          }
        },
        fail: () => uni.showToast({ title: '下载失败', icon: 'none' }),
      })
      // #endif
    }
    else {
      uni.showToast({ title: '链接获取失败', icon: 'none' })
    }
  }
  catch (e) {
    uni.showToast({ title: '请求失败', icon: 'none' })
  }
  finally {
    uni.hideLoading()
  }
}

const handleShare = () => uni.showToast({ title: '开发中', icon: 'none' })

whenever(() => error.value, () => {
  uni.showToast({ title: '数据加载失败', icon: 'none' })
})

onMounted(async () => {
  if (homeStore.examOptions.length === 0) {
    await homeStore.fetchOptions()
  }
})
</script>

<template>
  <view class="min-h-screen bg-slate-50 pb-10">
    <wd-navbar

      placeholder safe-area-inset-top fixed
      title="学生名单"
      custom-class="bg-white"
    >
      <template #right>
        <view class="h-full flex items-center">
          <view class="p-2 active:opacity-70" @click="handleDownload">
            <wd-icon name="download" size="22px" color="#333" />
          </view>
          <view class="p-2 active:opacity-70" @click="handleShare">
            <wd-icon name="share" size="22px" color="#333" />
          </view>
        </view>
      </template>
    </wd-navbar>

    <view class="relative z-10 bg-white shadow-sm">
      <wd-drop-menu custom-class="border-b border-gray-100">
        <wd-drop-menu-item v-model="homeStore.selectedClassId" :options="homeStore.classOptions" />
        <wd-drop-menu-item v-model="homeStore.selectedExamId" :options="homeStore.examOptions" />
        <wd-drop-menu-item v-model="homeStore.selectedExamSubjectId" :options="homeStore.subjectOptions" />
      </wd-drop-menu>

      <view class="px-3 py-2">
        <wd-search
          v-model="searchQuery"
          placeholder="搜索学生姓名"
          hide-cancel
          custom-class="bg-gray-100 rounded-full"
        />
      </view>
    </view>

    <view class="p-3">
      <view v-if="loading" class="flex flex-col items-center justify-center py-20">
        <wd-loading size="30px" color="#3b82f6" />
        <text class="mt-3 text-sm text-gray-400">数据加载中...</text>
      </view>

      <block v-else>
        <view v-if="attentionedStudents.length > 0 || otherStudents.length > 0">
          <view v-if="attentionedStudents.length > 0" class="mb-4 overflow-hidden rounded-xl bg-white shadow-sm">
            <view class="flex items-center border-b border-orange-100 bg-orange-50 px-4 py-3">
              <wd-icon name="star-filled" color="#f97316" size="18px" />
              <text class="ml-2 text-sm text-orange-800 font-bold">重点关注</text>
              <text class="ml-auto text-xs text-orange-400">{{ attentionedStudents.length }}人</text>
            </view>

            <view class="px-2">
              <StudentListItem
                v-for="(student, index) in attentionedStudents"
                :key="student.info_id"
                :student="student"
                :index="index + 1"
                :is-attentioned="true"
                @click="goToStudentDetail"
                @toggle-attention="toggleAttention(student, true)"
              />
            </view>
          </view>

          <view v-if="otherStudents.length > 0" class="overflow-hidden rounded-xl bg-white shadow-sm">
            <view class="flex items-center border-b border-gray-100 px-4 py-3">
              <view class="mr-2 h-4 w-1 rounded-full bg-blue-500" />
              <text class="text-sm text-gray-800 font-bold">全部学生</text>
              <text class="ml-auto text-xs text-gray-400">{{ otherStudents.length }}人</text>
            </view>

            <view class="px-2">
              <StudentListItem
                v-for="(student, index) in otherStudents"
                :key="student.info_id"
                :student="student"
                :index="attentionedStudents.length + index + 1"
                :is-attentioned="false"
                @click="goToStudentDetail"
                @toggle-attention="toggleAttention(student, false)"
              />
            </view>
          </view>
        </view>

        <view v-else class="pt-10">
          <wd-status-tip
            :image="!canLoadStudents ? 'search' : 'content'"
            :tip="!canLoadStudents ? '请完善上方筛选条件' : '暂无相关学生数据'"
          />
        </view>
      </block>
    </view>
  </view>
</template>

<route lang="jsonc" type="home">
{
  "layout": "tabbar",
  "style": {
    "navigationStyle": "custom",
    "navigationBarTitleText": "学生名单"
  }
}
</route>

<style>
/* Uniapp 小程序兼容性补充：
  page 标签在小程序中对应整个页面容器
*/
page {
  background-color: #f8fafc; /* slate-50 */
}
</style>