From 98979070d9fa4d5d4ef3105fd9c2944b3e7ccad7 Mon Sep 17 00:00:00 2001
From: zhoulexin <zhoulexin123@qq.com>
Date: Mon, 22 Jun 2026 09:16:38 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E7=AE=A1=E7=90=86=E7=AB=AF=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/admin/DashboardPage.vue | 167 ++++++++++++++++++++++++++++--
 src/views/admin/SessionManage.vue | 124 +++++++++++++++++++++-
 2 files changed, 280 insertions(+), 11 deletions(-)

diff --git a/src/views/admin/DashboardPage.vue b/src/views/admin/DashboardPage.vue
index c73cb6c..b51a2ff 100644
--- a/src/views/admin/DashboardPage.vue
+++ b/src/views/admin/DashboardPage.vue
@@ -169,7 +169,7 @@
               {{ formatTime(row.createTime) }}
             </template>
           </el-table-column>
-          <el-table-column label="操作" width="180" align="center" fixed="right">
+          <el-table-column label="操作" width="180" align="center" :fixed="isMobile ? false : 'right'">
             <template #default="{ row }">
               <el-button type="primary" link @click="viewDetail(row)">
                 <el-icon><View /></el-icon>
@@ -205,11 +205,11 @@
     <el-dialog
       v-model="detailDialogVisible"
       title="报名详情"
-      width="600px"
+      :width="dialogWidth"
       destroy-on-close
     >
       <div class="detail-content" v-if="currentDetail">
-        <el-descriptions :column="2" border>
+        <el-descriptions :column="detailColumn" border>
           <el-descriptions-item label="报名编号">{{ currentDetail.id }}</el-descriptions-item>
           <el-descriptions-item label="姓名">{{ currentDetail.name }}</el-descriptions-item>
           <el-descriptions-item label="所在单位">{{ currentDetail.organization }}</el-descriptions-item>
@@ -250,7 +250,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { getRegistrationList, getRegistrationStatistics, updateRegistrationStatus, getRegistrationDetail, getAllRegistrations, getSessionList } from '../../api/registration'
@@ -272,6 +272,15 @@ const tableRef = ref(null)
 const multipleSelection = ref([])
 const exportAllLoading = ref(false)
 
+// 移动端适配
+const isMobile = ref(false)
+const detailColumn = computed(() => isMobile.value ? 1 : 2)
+const dialogWidth = computed(() => isMobile.value ? '92%' : '600px')
+const mediaQuery = window.matchMedia('(max-width: 768px)')
+const updateIsMobile = (e) => { isMobile.value = e.matches }
+mediaQuery.addEventListener('change', updateIsMobile)
+isMobile.value = mediaQuery.matches
+
 // 管理员信息
 const adminUser = reactive({
   username: 'admin'
@@ -593,6 +602,11 @@ onMounted(() => {
   loadData()
   loadSessionOptions()
 })
+
+// 离开时清理媒体查询监听
+onBeforeUnmount(() => {
+  mediaQuery.removeEventListener('change', updateIsMobile)
+})
 </script>
 
 <style scoped>
@@ -791,12 +805,18 @@ onMounted(() => {
     padding: 12px 16px;
   }
 
+  .admin-logo {
+    font-size: 16px;
+  }
+
   .admin-body {
     flex-direction: column;
+    overflow: visible;
   }
 
   .admin-aside {
     width: 100% !important;
+    height: auto !important;
     border-right: none;
     border-bottom: 1px solid #e8e8e8;
   }
@@ -806,7 +826,9 @@ onMounted(() => {
   }
 
   .admin-content {
-    padding: 16px;
+    height: 0;
+    min-height: 0;
+    padding: 12px;
   }
 
   .admin-main {
@@ -815,44 +837,175 @@ onMounted(() => {
 
   .admin-stats {
     grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
   }
 
   .stat-card {
-    padding: 16px;
+    padding: 14px;
+  }
+
+  .stat-icon {
+    width: 40px;
+    height: 40px;
+    margin-bottom: 12px;
+  }
+
+  .stat-icon .el-icon {
+    font-size: 20px;
   }
 
   .stat-value {
     font-size: 22px;
   }
 
+  .stat-label {
+    font-size: 13px;
+  }
+
   .search-bar {
     flex-direction: column;
     align-items: stretch;
+    padding: 12px;
   }
 
   .search-bar .el-input,
   .search-bar .el-select {
     width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  .admin-table-card {
+    padding: 12px;
   }
 
   .table-header {
     flex-direction: column;
-    gap: 12px;
+    gap: 10px;
     align-items: flex-start;
   }
 
+  .table-header h3 {
+    font-size: 15px;
+  }
+
+  .table-header-actions {
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .table-header-actions .el-button {
+    flex: 1;
+    min-width: 0;
+    font-size: 12px;
+    padding: 8px 12px;
+  }
+
   .el-table {
     font-size: 12px;
   }
 
+  /* 移动端表格横向滚动 */
+  .el-table__body-wrapper {
+    overflow-x: auto;
+  }
+
+  /* 操作列按钮竖排显示 */
+  .el-table .el-button.is-link {
+    font-size: 12px;
+    padding: 4px 2px;
+  }
+
   .pagination-wrapper {
     justify-content: center;
+    overflow-x: auto;
+  }
+
+  .pagination-wrapper .el-pagination {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  /* 详情弹窗适配 */
+  .detail-content {
+    padding: 4px 0;
+  }
+
+  .detail-content .el-descriptions__title {
+    font-size: 13px;
+  }
+
+  .detail-content .el-descriptions__label {
+    font-size: 12px;
+    white-space: nowrap;
+  }
+
+  .detail-content .el-descriptions__content {
+    font-size: 12px;
+  }
+
+  /* 弹窗底部按钮 */
+  .el-dialog__footer {
+    display: flex;
+    gap: 8px;
+  }
+
+  .el-dialog__footer .el-button {
+    flex: 1;
   }
 }
 
 @media screen and (max-width: 480px) {
   .admin-stats {
     grid-template-columns: 1fr;
+    gap: 10px;
+  }
+
+  .stat-card {
+    padding: 12px;
+  }
+
+  .stat-value {
+    font-size: 20px;
+  }
+
+  .admin-logo span {
+    font-size: 14px;
+  }
+
+  .admin-content {
+    padding: 8px;
+  }
+
+  .search-bar {
+    padding: 10px;
+    gap: 8px;
+  }
+
+  .admin-table-card {
+    padding: 8px;
+  }
+
+  .table-header-actions .el-button {
+    font-size: 11px;
+    padding: 6px 8px;
+  }
+
+  .el-table {
+    font-size: 11px;
+  }
+
+  .el-table .el-button.is-link {
+    font-size: 11px;
+    padding: 2px;
+  }
+
+  .detail-content .el-descriptions__label {
+    font-size: 11px;
+  }
+
+  .detail-content .el-descriptions__content {
+    font-size: 11px;
   }
 }
 </style>
diff --git a/src/views/admin/SessionManage.vue b/src/views/admin/SessionManage.vue
index 9a94156..35f5ff5 100644
--- a/src/views/admin/SessionManage.vue
+++ b/src/views/admin/SessionManage.vue
@@ -56,7 +56,7 @@
             {{ formatTime(row.createTime) }}
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="180" align="center" fixed="right">
+        <el-table-column label="操作" width="180" align="center" :fixed="isMobile ? false : 'right'">
           <template #default="{ row }">
             <el-button type="primary" link icon="Edit" @click="showEditDialog(row)">编辑</el-button>
             <el-button type="danger" link icon="Delete" @click="handleDelete(row)">删除</el-button>
@@ -82,7 +82,7 @@
     <el-dialog
       v-model="dialogVisible"
       :title="isEdit ? '编辑期次' : '新增期次'"
-      width="520px"
+      :width="dialogWidth"
       destroy-on-close
       :close-on-click-modal="false"
     >
@@ -90,7 +90,7 @@
         ref="formRef"
         :model="form"
         :rules="rules"
-        label-width="100px"
+        :label-width="isMobile ? '80px' : '100px'"
         size="default"
       >
         <el-form-item label="期次名称" prop="periodName">
@@ -136,7 +136,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { getSessionList, addSession, updateSession, deleteSession } from '../../api/registration'
 
@@ -149,6 +149,14 @@ const editId = ref(null)
 const submitLoading = ref(false)
 const formRef = ref(null)
 
+// 移动端适配
+const isMobile = ref(false)
+const dialogWidth = computed(() => isMobile.value ? '92%' : '520px')
+const mediaQuery = window.matchMedia('(max-width: 768px)')
+const updateIsMobile = (e) => { isMobile.value = e.matches }
+mediaQuery.addEventListener('change', updateIsMobile)
+isMobile.value = mediaQuery.matches
+
 // 搜索与分页
 const searchKeyword = ref('')
 const filterStatus = ref('')
@@ -337,6 +345,11 @@ const handleDelete = (row) => {
 onMounted(() => {
   loadSessionList()
 })
+
+// 离开时清理媒体查询监听
+onBeforeUnmount(() => {
+  mediaQuery.removeEventListener('change', updateIsMobile)
+})
 </script>
 
 <style scoped>
@@ -382,4 +395,107 @@ onMounted(() => {
   display: flex;
   justify-content: flex-end;
 }
+
+/* ===== 移动端适配 ===== */
+@media screen and (max-width: 768px) {
+  .session-toolbar {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .session-toolbar h3 {
+    font-size: 15px;
+  }
+
+  .session-toolbar .el-button {
+    width: 100%;
+  }
+
+  .search-bar {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 12px;
+    gap: 8px;
+  }
+
+  .search-bar .el-input,
+  .search-bar .el-select {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  .session-table-card {
+    padding: 12px;
+    overflow-x: auto;
+  }
+
+  /* 表格横向滚动 */
+  .el-table__body-wrapper {
+    overflow-x: auto;
+  }
+
+  .el-table {
+    font-size: 12px;
+  }
+
+  .pagination-wrapper {
+    justify-content: center;
+    overflow-x: auto;
+  }
+
+  .pagination-wrapper .el-pagination {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  /* 弹窗适配 */
+  .el-dialog__footer {
+    display: flex;
+    gap: 8px;
+  }
+
+  .el-dialog__footer .el-button {
+    flex: 1;
+  }
+
+  /* 表单在移动端更紧凑 */
+  .el-form-item {
+    margin-bottom: 18px;
+  }
+
+  .el-form-item__label {
+    font-size: 13px;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .session-table-card {
+    padding: 8px;
+  }
+
+  .session-toolbar h3 {
+    font-size: 14px;
+  }
+
+  .search-bar {
+    padding: 10px;
+  }
+
+  .el-table {
+    font-size: 11px;
+  }
+  .el-table .el-button.is-link {
+    font-size: 11px;
+    padding: 2px;
+  }
+
+  .el-form-item__label {
+    font-size: 12px;
+  }
+
+  .el-form-item {
+    margin-bottom: 14px;
+  }
+}
 </style>