From 6e6be1ecbe17c1df6ab6fead53ccee8500b74826 Mon Sep 17 00:00:00 2001
From: zlwu <704541015@qq.com>
Date: Fri, 1 Aug 2025 20:32:36 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/xg/xsjcxx/stuRoster/index.vue | 194 +++++++++++++++-----
 1 file changed, 143 insertions(+), 51 deletions(-)

diff --git a/web/src/views/xg/xsjcxx/stuRoster/index.vue b/web/src/views/xg/xsjcxx/stuRoster/index.vue
index 49294e37..930026c3 100644
--- a/web/src/views/xg/xsjcxx/stuRoster/index.vue
+++ b/web/src/views/xg/xsjcxx/stuRoster/index.vue
@@ -136,64 +136,97 @@
                   </el-tooltip>
                 </template>
               </el-table-column>
+
+              <!-- 空状态插槽 -->
+              <template #empty>
+                <div class="empty-container">
+                  <el-empty :image-size="120" description="暂无学生数据">
+                    <template #image>
+                      <el-icon size="120" color="#c0c4cc">
+                        <Picture />
+                      </el-icon>
+                    </template>
+                    <template #description>
+                      <span class="empty-description">暂无学生数据</span>
+                    </template>
+                  </el-empty>
+                </div>
+              </template>
             </el-table>
           </div>
 
           <!-- 卡片视图 -->
           <div v-else class="card-view-container">
-            <div class="card-scroll-container">
-              <el-row :gutter="16">
-                <el-col v-for="item in studentList" :key="item.id" :span="6" class="mb-6">
-                  <el-card shadow="hover" class="student-card" @dblclick="handleDetail(item)">
-                    <div class="card-header">
-                      <div class="student-photo">
-                        <el-avatar
-                          :size="100"
-                          :src="item.photoUrl"
-                          :icon="!item.photoUrl ? (item.gender === '0' ? 'Male' : 'Female') : undefined"
-                          :class="{
-                            'male-placeholder': !item.photoUrl && item.gender === '0',
-                            'female-placeholder': !item.photoUrl && item.gender === '1'
-                          }"
-                        >
-                          <template v-if="!item.photoUrl">
-                            <div
-                              class="no-photo-placeholder"
-                              :class="{ 'male-placeholder': item.gender === '0', 'female-placeholder': item.gender === '1' }"
-                            >
-                              <el-icon size="96" small :color="item.gender === '0' ? '#409eff' : '#e91e63'">
-                                <Male v-if="item.gender === '0'" />
-                                <Female v-else />
-                              </el-icon>
-                              <span class="no-photo-text">{{ item.gender === '0' ? '男生' : '女生' }}</span>
-                            </div>
-                          </template>
-                        </el-avatar>
+            <div v-loading="loading" class="card-scroll-container">
+              <!-- 有数据时显示卡片列表 -->
+              <div v-if="studentList && studentList.length > 0">
+                <el-row :gutter="16">
+                  <el-col v-for="item in studentList" :key="item.id" :span="6" class="mb-6">
+                    <el-card shadow="hover" class="student-card" @dblclick="handleDetail(item)">
+                      <div class="card-header">
+                        <div class="student-photo">
+                          <el-avatar
+                            :size="100"
+                            :src="item.photoUrl"
+                            :icon="!item.photoUrl ? (item.gender === '0' ? 'Male' : 'Female') : undefined"
+                            :class="{
+                              'male-placeholder': !item.photoUrl && item.gender === '0',
+                              'female-placeholder': !item.photoUrl && item.gender === '1'
+                            }"
+                          >
+                            <template v-if="!item.photoUrl">
+                              <div
+                                class="no-photo-placeholder"
+                                :class="{ 'male-placeholder': item.gender === '0', 'female-placeholder': item.gender === '1' }"
+                              >
+                                <el-icon size="96" small :color="item.gender === '0' ? '#409eff' : '#e91e63'">
+                                  <Male v-if="item.gender === '0'" />
+                                  <Female v-else />
+                                </el-icon>
+                                <span class="no-photo-text">{{ item.gender === '0' ? '男生' : '女生' }}</span>
+                              </div>
+                            </template>
+                          </el-avatar>
+                        </div>
+                        <div class="student-info">
+                          <h3 class="student-name">{{ item.name }}</h3>
+                          <p class="student-no">{{ item.studentNo }}</p>
+                          <el-tag :type="getStatusType(item.studentStatus)" size="small">
+                            {{ getStudentStatusLabel(item.studentStatus) }}
+                          </el-tag>
+                        </div>
                       </div>
-                      <div class="student-info">
-                        <h3 class="student-name">{{ item.name }}</h3>
-                        <p class="student-no">{{ item.studentNo }}</p>
-                        <el-tag :type="getStatusType(item.studentStatus)" size="small">
-                          {{ getStudentStatusLabel(item.studentStatus) }}
-                        </el-tag>
+                      <div class="card-content">
+                        <p><strong>院系：</strong>{{ item.collegeName || '未设置' }}</p>
+                        <p><strong>专业：</strong>{{ item.majorName || '未设置' }}</p>
+                        <p><strong>班级：</strong>{{ item.className || '未设置' }}</p>
+                        <p><strong>手机：</strong>{{ item.phone || '未设置' }}</p>
+                        <p><strong>入学年份：</strong>{{ item.enrollmentYear || '未设置' }}</p>
                       </div>
-                    </div>
-                    <div class="card-content">
-                      <p><strong>院系：</strong>{{ item.collegeName || '未设置' }}</p>
-                      <p><strong>专业：</strong>{{ item.majorName || '未设置' }}</p>
-                      <p><strong>班级：</strong>{{ item.className || '未设置' }}</p>
-                      <p><strong>手机：</strong>{{ item.phone || '未设置' }}</p>
-                      <p><strong>入学年份：</strong>{{ item.enrollmentYear || '未设置' }}</p>
-                    </div>
-                    <div class="card-hint">
-                      <el-text type="primary" size="small">
-                        <el-icon class="mr-1"><View /></el-icon>
-                        双击查看详情
-                      </el-text>
-                    </div>
-                  </el-card>
-                </el-col>
-              </el-row>
+                      <div class="card-hint">
+                        <el-text type="primary" size="small">
+                          <el-icon class="mr-1"><View /></el-icon>
+                          双击查看详情
+                        </el-text>
+                      </div>
+                    </el-card>
+                  </el-col>
+                </el-row>
+              </div>
+
+              <!-- 无数据时显示空状态 -->
+              <div v-else-if="!loading" class="card-empty-container">
+                <el-empty :image-size="160" description="暂无学生数据">
+                  <template #image>
+                    <el-icon size="160" color="#c0c4cc">
+                      <Picture />
+                    </el-icon>
+                  </template>
+                  <template #description>
+                    <span class="empty-description">暂无学生数据</span>
+                  </template>
+                </el-empty>
+              </div>
             </div>
 
             <!-- 卡片视图分页 -->
@@ -1229,6 +1262,48 @@ onMounted(() => {
   font-weight: 500;
 }
 
+/* 空状态容器样式 */
+.empty-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  padding: 40px 20px;
+}
+
+.card-empty-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  height: 100%;
+  width: 100%;
+  padding: 40px 20px;
+}
+
+.empty-description {
+  color: #909399;
+  font-size: 16px;
+  margin-top: 16px;
+}
+
+.card-empty-container .empty-description {
+  color: #909399;
+  font-size: 18px;
+  margin-top: 20px;
+}
+
+/* 空状态图标和文字的间距优化 */
+.empty-container :deep(.el-empty__description),
+.card-empty-container :deep(.el-empty__description) {
+  margin-top: 16px;
+}
+
+.empty-container :deep(.el-empty__image),
+.card-empty-container :deep(.el-empty__image) {
+  margin-bottom: 20px;
+}
+
 /* 响应式布局 */
 @media (max-width: 1200px) {
   .left-panel {
@@ -1293,5 +1368,22 @@ onMounted(() => {
   .card-content {
     font-size: 12px;
   }
+
+  /* 移动端空状态样式调整 */
+  .empty-container,
+  .card-empty-container {
+    min-height: 300px;
+    padding: 20px 10px;
+  }
+
+  .empty-description,
+  .card-empty-container .empty-description {
+    font-size: 14px;
+  }
+
+  .empty-container :deep(.el-empty__image) .el-icon,
+  .card-empty-container :deep(.el-empty__image) .el-icon {
+    font-size: 100px !important;
+  }
 }
 </style>