移动端适配

schoolNewsServ/.bin/mysql/sql/createTableUser.sql

@@ -31,7 +31,7 @@ CREATE TABLE `tb_sys_user_info` (
   `family_name` VARCHAR(50) DEFAULT NULL COMMENT '姓',
   `given_name` VARCHAR(50) DEFAULT NULL COMMENT '名',
   `full_name` VARCHAR(100) DEFAULT NULL COMMENT '全名',
-  `level` INT(4) DEFAULT 1 COMMENT '等级',
+  `level` FLOAT DEFAULT 1 COMMENT '等级',
   `student_id` VARCHAR(50) DEFAULT NULL COMMENT '学号',
   `id_card` VARCHAR(50) DEFAULT NULL COMMENT '身份证号',
   `address` VARCHAR(255) DEFAULT NULL COMMENT '地址',

schoolNewsServ/achievement/src/main/java/org/xyzh/achievement/service/impl/ACHAchievementServiceImpl.java

@@ -942,7 +942,7 @@ public class ACHAchievementServiceImpl implements AchievementService {
             }
 
             // 获取用户当前信息
-            TbSysUserInfo userInfo = userInfoMapper.selectById(userID);
+            TbSysUserInfo userInfo = userInfoMapper.selectByUserID(userID);
             if (userInfo == null) {
                 logger.warn("用户信息不存在: {}", userID);
                 return;

schoolNewsServ/system/src/main/java/org/xyzh/system/mapper/UserInfoMapper.java

@@ -34,4 +34,6 @@ public interface UserInfoMapper extends BaseMapper<TbSysUserInfo> {
      * @since 2025-10-06
      */
     int deleteUserInfo(@Param("userID") String userId);
+
+    TbSysUserInfo selectByUserID(@Param("userID") String userID);
 }

schoolNewsServ/system/src/main/resources/mapper/UserInfoMapper.xml

@@ -53,4 +53,11 @@
     DELETE FROM tb_sys_user_info
     WHERE user_id = #{userID}
   </delete>
+
+  <!-- selectByUserID --> 
+
+  <select id="selectByUserID">
+    SELECT * FROM tb_sys_user_info WHERE user_id = #{userID}
+  </select>
+  
 </mapper>

schoolNewsWeb/src/components/base/FloatingSidebar.vue

@@ -210,10 +210,95 @@ function handleClick(menu: SysMenu) {
   }
 }
 
-/* 响应式设计 */
+/* 移动端响应式设计 - 水平标签栏 */
 @media (max-width: 768px) {
   .floating-sidebar {
-    width: 160px;
+    width: 100%;
+    height: auto;
+    flex-direction: row;
+    border-radius: 0 0 8px 8px; // 顶部圆角移除，与main-content连接
+  }
+  
+  .sidebar-content {
+    width: 100%;
+    flex-direction: row;
+  }
+  
+  .sidebar-nav {
+    flex-direction: row;
+    padding: 10px 0;
+    gap: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    
+    /* 水平滚动条样式 */
+    &::-webkit-scrollbar {
+      height: 4px;
+      width: auto;
+    }
+  }
+  
+  .sidebar-item {
+    flex: 1;
+    min-width: 60px;
+    height: 44px;
+    justify-content: center;
+    
+    &::before {
+      display: none; // 移动端隐藏左侧指示条
+    }
+    
+    &.active::after {
+      content: '';
+      position: absolute;
+      bottom: -10px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 20px;
+      height: 3px;
+      background: #C62828;
+      border-radius: 2px;
+    }
+    
+    // Resource theme 在移动端的特殊样式
+    &.theme-resource {
+      padding: 0 5px;
+      margin: 0;
+      
+      &.active {
+        background: transparent;
+        border-radius: 0;
+        margin: 0;
+        height: 44px;
+        
+        &::after {
+          right: auto;
+          top: auto;
+          width: 20px;
+          height: 3px;
+          background: #C62828;
+          opacity: 1;
+          bottom: -10px;
+          left: 50%;
+          transform: translateX(-50%);
+          border-radius: 2px;
+        }
+        
+        .sidebar-link {
+          color: #C62828;
+        }
+      }
+    }
+  }
+  
+  .sidebar-link {
+    padding: 0 8px;
+    font-size: 14px;
+    justify-content: center;
+    
+    .theme-resource & {
+      margin-left: 0; // 移动端取消左边距
+    }
   }
 }
 </style>

schoolNewsWeb/src/components/base/TopNavigation.vue

@@ -61,7 +61,7 @@
               <!-- 搜索框 -->
         <Search @search="handleSearch" />
         <Notice />
-        <UserDropdown :user="userInfo" @logout="handleLogout" />
+        <UserDropdown :userinfo="userInfo" @logout="handleLogout" />
       </div>
     </div>
   </nav>
@@ -88,7 +88,7 @@ const specialTags = ref<Tag[]>([]); // 特殊标签：专题报告和思政案
 
 // 获取所有菜单
 const allMenus = computed(() => store.getters['auth/menuTree']);
-const userInfo = computed(() => store.getters['auth/user']);
+const userInfo = computed(() => store.getters['auth/userinfo']);
 
 // 加载特殊标签
 onMounted(async () => {

schoolNewsWeb/src/components/base/UserDropdown.vue

@@ -3,8 +3,8 @@
     ref="dropdownRef"
     class="user-dropdown" 
     @click="toggleDropdown"
-    @mouseenter="openDropdown"
+    @mouseenter="props.disableHover ? undefined : openDropdown"
-    @mouseleave="closeDropdown"
+    @mouseleave="props.disableHover ? undefined : closeDropdown"
     v-click-outside="forceCloseDropdown"
   >
     <!-- 未登录状态 -->
@@ -23,10 +23,9 @@
         <span class="avatar-placeholder" v-else>{{ avatarText }}</span>
       </div>
       <div class="user-details" v-if="!collapsed">
-        <div class="user-name">{{ user?.fullName || user?.username }}</div>
+        <div class="user-name">{{ user?.username }}</div>
         <div class="user-role">{{ primaryRole }}</div>
       </div>
-      <i class="dropdown-icon" :class="{ 'open': dropdownVisible }"></i>
     </div>
     
     <!-- 下拉菜单 -->
@@ -36,8 +35,8 @@
         :class="{ 'show': dropdownVisible }"
         :style="dropdownStyle"
         v-if="dropdownVisible"
-        @mouseenter="openDropdown"
+        @mouseenter="props.disableHover ? undefined : openDropdown"
-        @mouseleave="closeDropdown"
+        @mouseleave="props.disableHover ? undefined : closeDropdown"
       >
         <!-- 未登录时的菜单 -->
         <template v-if="!isLoggedIn">
@@ -65,7 +64,7 @@
           </div>
           <div class="dropdown-divider" v-if="userMenus.length > 0"></div>
           <div class="dropdown-footer">
-            <div class="dropdown-item info" v-if="isAdmin">
+            <div class="dropdown-item info" v-if="!props.hideAdmin && isAdmin">
               <img class="item-icon icon-logout" src="@/assets/imgs/admin-home.svg" alt="切换页面">
               <ChangeHome />
             </div>
@@ -95,11 +94,14 @@ const routes = router.getRoutes();
 
 // Props
 interface Props {
-  user?: UserVO | null;
+  userinfo?: UserVO | null;
   collapsed?: boolean;
+  hideAdmin?: boolean; // 新增：隐藏管理端相关功能
+  disableHover?: boolean; // 新增：禁用hover事件，用于移动端
 }
 
 const props = defineProps<Props>();
+const user = computed(() => store.getters['auth/user']);
 
 // Emits
 const emit = defineEmits<{
@@ -121,11 +123,11 @@ const isLoggedIn = computed(() => {
 });
 
 const userAvatar = computed(() => {
-  return props.user?.avatar ? FILE_DOWNLOAD_URL + props.user?.avatar : '';
+  return props.userinfo?.avatar ? FILE_DOWNLOAD_URL + props.userinfo?.avatar : '';
 });
 
 const avatarText = computed(() => {
-  const name = props.user?.fullName || props.user?.username || '';
+  const name = props.userinfo?.fullName || props.userinfo?.username || '';
   return name.charAt(0).toUpperCase();
 });
 

schoolNewsWeb/src/layouts/BasicLayout.vue

@@ -13,7 +13,7 @@
 
       <div class="header-right">
         <!-- 用户信息 -->
-        <UserDropdown :user="userInfo" @logout="handleLogout" />
+        <UserDropdown :userinfo="userInfo" @logout="handleLogout" />
       </div>
     </header>
     <!-- 主内容区域 -->

schoolNewsWeb/src/layouts/MobileLayout.vue

@@ -44,11 +44,15 @@
           </div>
         </button>
         
-        <!-- 用户头像 -->
+        <!-- 用户下拉菜单 -->
-        <div class="user-avatar-section" @click="handleUserClick">
+        <div class="user-dropdown-section">
-          <el-avatar :size="32" :src="userInfo.avatar" class="user-avatar">
+          <UserDropdown 
-            <el-icon><User /></el-icon>
+            :userinfo="userStore" 
-          </el-avatar>
+            :hideAdmin="true"
+            :disableHover="true"
+            @logout="handleLogout"
+            class="mobile-user-dropdown"
+          />
         </div>
       </div>
     </header>
@@ -104,7 +108,7 @@ import {
   Setting
 } from '@element-plus/icons-vue';
 import { FILE_DOWNLOAD_URL } from '@/config';
-import { MobileNavItem } from '@/components/base';
+import { MobileNavItem, UserDropdown } from '@/components/base';
 import { AIAgentMobile } from '@/views/public/ai';
 const route = useRoute();
 const router = useRouter();
@@ -126,6 +130,10 @@ const showMore = computed(() => route.meta?.showMore as boolean || false);
 const showTabBar = computed(() => route.meta?.showTabBar !== false);
 
 // 从store获取用户信息
+const userStore = computed(() => {
+  return store.getters['auth/userinfo'];
+});
+
 const userInfo = computed(() => {
   const userDetail = store.getters['auth/userinfo'];
   const user = store.getters['auth/user'];
@@ -224,9 +232,11 @@ const performSearch = () => {
   }
 };
 
-// 用户头像点击处理
+// 用户退出登录处理
-const handleUserClick = () => {
+const handleLogout = () => {
-  router.push('/user-center');
+  store.dispatch('auth/logout').then(() => {
+    router.push('/login');
+  });
 };
 
 // 处理导航菜单点击
@@ -428,16 +438,43 @@ onMounted(async () => {
       }
     }
 
-    .user-avatar-section {
+    .user-dropdown-section {
-      cursor: pointer;
+      .mobile-user-dropdown {
-      transition: opacity 0.2s;
+        :deep(.user-info) {
-
+          padding: 4px 8px;
-      &:hover {
+          background: transparent;
-        opacity: 0.8;
+          
-      }
+          &:hover {
-
+            background-color: rgba(0, 0, 0, 0.1);
-      .user-avatar {
+            color: #333;
-        border: 1px solid #e5e5e5;
+          }
+        }
+        
+        :deep(.user-avatar) {
+          width: 32px;
+          height: 32px;
+          border: 1px solid #e5e5e5;
+        }
+        
+        :deep(.user-details) {
+          display: none;
+        }
+        
+        :deep(.dropdown-icon) {
+          display: none;
+        }
+        
+        // 移动端下拉菜单样式调整
+        :deep(.dropdown-menu) {
+          right: 16px;
+          left: auto;
+          min-width: 140px;
+          
+          // 隐藏管理端相关选项
+          .dropdown-item.info {
+            display: none;
+          }
+        }
       }
     }
   }

schoolNewsWeb/src/views/user/user-center/LearningRecordsView.vue

@@ -3,9 +3,19 @@
       <div class="learning-records">
         <div class="records-header">
           <h2>学习记录</h2>
-          <div style="width: 40%; display: flex;">
+          <div class="date-picker-container">
-            <el-date-picker  v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
+            <el-date-picker 
-            end-placeholder="结束日期" @change="handleDateChange" />
+              v-model="dateRange" 
+              type="daterange" 
+              range-separator="至" 
+              start-placeholder="开始日期"
+              end-placeholder="结束日期" 
+              @change="handleDateChange" 
+              :size="isMobile ? 'small' : 'default'"
+              :teleported="false"
+              popper-class="date-picker-popper"
+              placement="bottom-start"
+            />
           </div>
         </div>
 
@@ -18,7 +28,8 @@
         <!-- 学习记录分页表格 -->
         <div class="records-table" v-loading="tableLoading">
           <h3>学习记录明细</h3>
-          <el-table :data="tableData">
+          <div class="table-container">
+            <el-table :data="tableData">
             <el-table-column prop="resourceTitle" label="资源标题"/>
             <el-table-column prop="resourceTypeName" label="类型" />
             <el-table-column label="学习时长">
@@ -38,8 +49,11 @@
               </template>
             </el-table-column>
           </el-table>
+          </div>
 
+          <!-- 桌面端分页 -->
           <el-pagination
+            v-if="!isMobile"
             class="pagination-container"
             v-model:current-page="currentPage"
             v-model:page-size="pageSize"
@@ -50,6 +64,13 @@
             @current-change="handleCurrentChange"
             style="margin-top: 20px; justify-content: center"
           />
+          
+          <!-- 移动端加载更多 -->
+          <div v-if="isMobile && hasMore && tableData.length > 0" class="mobile-loading">
+            <div v-if="loadingMore" class="loading-more">
+              <span>加载中...</span>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -57,7 +78,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, nextTick } from 'vue';
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
 import { ElDatePicker, ElMessage, ElTable, ElTableColumn, ElPagination, ElTag } from 'element-plus';
 import { UserCenterLayout } from '@/views/user/user-center';
 import { learningRecordApi } from '@/apis/study/learning-record';
@@ -89,8 +110,16 @@ const tableLoading = ref(false);
 const currentPage = ref(1);
 const pageSize = ref(10);
 const totalElements = ref(0);
+const isMobile = ref(false);
+const loadingMore = ref(false);
+const hasMore = ref(true);
 
 onMounted(() => {
+  // 检查移动端
+  checkMobile();
+  window.addEventListener('resize', checkMobile);
+  window.addEventListener('scroll', handleScroll); // 移动端使用页面级滚动
+  
   // 初始化图表
   nextTick(() => {
     if (chartRef.value) {
@@ -101,10 +130,54 @@ onMounted(() => {
   loadTableData();
 });
 
+onUnmounted(() => {
+  window.removeEventListener('resize', checkMobile);
+  window.removeEventListener('scroll', handleScroll);
+});
+
+// 检查是否为移动端
+function checkMobile() {
+  isMobile.value = window.innerWidth < 768;
+  if (isMobile.value) {
+    pageSize.value = 20; // 移动端使用更大的页面大小
+  }
+}
+
+// 处理整个页面滚动事件（保留用于其他用途）
+function handleScroll() {
+  if (!isMobile.value || loadingMore.value || !hasMore.value) return;
+  
+  const scrollHeight = document.documentElement.scrollHeight;
+  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+  const clientHeight = document.documentElement.clientHeight;
+  
+  // 滚动到底部-2px时触发加载
+  if (scrollHeight - scrollTop - clientHeight <= 2) {
+    loadMoreData();
+  }
+}
+
+// 处理表格容器滚动事件
+function handleTableScroll(event: Event) {
+  if (!isMobile.value || loadingMore.value || !hasMore.value) return;
+  
+  const target = event.target as HTMLElement;
+  const scrollTop = target.scrollTop;
+  const scrollHeight = target.scrollHeight;
+  const clientHeight = target.clientHeight;
+  
+  // 滚动到底部-2px时触发加载
+  if (scrollHeight - scrollTop - clientHeight <= 2) {
+    loadMoreData();
+  }
+}
+
 function handleDateChange() {
   // 日期变化时重新加载图表和表格
+  currentPage.value = 1;
+  hasMore.value = true;
   loadChartData();
-  loadTableData();
+  loadTableData(true); // 传入true表示刷新
 }
 
 // 加载图表数据
@@ -186,7 +259,12 @@ async function loadChartData() {
 }
 
 // 加载表格数据
-async function loadTableData() {
+async function loadTableData(isRefresh = false) {
+  if (isRefresh) {
+    currentPage.value = 1;
+    hasMore.value = true;
+  }
+  
   tableLoading.value = true;
   try {
     const pageRequest = {
@@ -206,21 +284,68 @@ async function loadTableData() {
       const dataList = result.dataList || result.data?.dataList || [];
       // console.log('📊 表格数据:', dataList);
       
-      tableData.value = dataList;
+      tableData.value = isRefresh ? dataList : tableData.value.concat(dataList);
       totalElements.value = result.data?.pageParam?.totalElements || result.pageParam?.totalElements || 0;
+      
+      // 检查是否还有更多数据
+      if (isMobile.value) {
+        hasMore.value = tableData.value.length < totalElements.value;
+      }
     } else {
       ElMessage.error(result.message || '加载记录失败');
-      tableData.value = [];
+      if (isRefresh) tableData.value = [];
     }
   } catch (error) {
     console.error('加载表格数据失败:', error);
     ElMessage.error('加载记录失败');
-    tableData.value = [];
+    if (isRefresh) tableData.value = [];
   } finally {
     tableLoading.value = false;
   }
 }
 
+// 加载更多数据（移动端）
+async function loadMoreData() {
+  if (loadingMore.value || !hasMore.value) return;
+  
+  loadingMore.value = true;
+  const nextPage = currentPage.value + 1;
+  
+  try {
+    const pageRequest = {
+      filter: {},
+      pageParam: {
+        pageNumber: nextPage,
+        pageSize: pageSize.value
+      }
+    };
+
+    const result = await learningRecordApi.getUserRecordRangePage(pageRequest);
+    
+    if (result.success) {
+      const dataList = result.dataList || result.data?.dataList || [];
+      
+      if (dataList.length > 0) {
+        tableData.value = tableData.value.concat(dataList);
+        currentPage.value = nextPage;
+        totalElements.value = result.data?.pageParam?.totalElements || result.pageParam?.totalElements || 0;
+        
+        // 检查是否还有更多数据
+        hasMore.value = tableData.value.length < totalElements.value;
+      } else {
+        hasMore.value = false;
+      }
+    } else {
+      ElMessage.error('加载更多记录失败');
+    }
+  } catch (error) {
+    console.error('加载更多数据失败:', error);
+    ElMessage.error('加载更多记录失败');
+  } finally {
+    loadingMore.value = false;
+  }
+}
+
 // 分页大小变化
 function handleSizeChange(size: number) {
   pageSize.value = size;
@@ -280,6 +405,37 @@ function getRecordIcon(type: string) {
       font-weight: 600;
       color: #141F38;
     }
+    
+    // 移动端适配
+    @media (max-width: 768px) {
+      flex-direction: column;
+      gap: 16px;
+      align-items: flex-start;
+      margin-bottom: 24px;
+      
+      h2 {
+        font-size: 20px;
+      }
+    }
+  }
+  
+  .date-picker-container {
+    width: 40%;
+    display: flex;
+    position: relative;
+    
+    // 移动端适配
+    @media (max-width: 768px) {
+      width: 100%;
+      
+      :deep(.el-date-editor) {
+        width: 100% !important;
+      }
+      
+      :deep(.el-input__wrapper) {
+        font-size: 14px;
+      }
+    }
   }
 }
 
@@ -403,6 +559,17 @@ function getRecordIcon(type: string) {
     color: #141F38;
     margin-bottom: 20px;
   }
+  
+  // 移动端适配
+  @media (max-width: 768px) {
+    padding: 16px;
+    margin-bottom: 24px;
+    
+    h3 {
+      font-size: 16px;
+      margin-bottom: 16px;
+    }
+  }
 }
 
 .records-table {
@@ -417,5 +584,84 @@ function getRecordIcon(type: string) {
     color: #141F38;
     margin-bottom: 20px;
   }
+  
+  .table-container {
+    // 移动端使用页面级滚动，不限制容器高度
+    width: 100%;
+    
+    // 移动端适配
+    @media (max-width: 768px) {
+      // 让表格自然展开，配合页面级滚动
+    }
+  }
+  
+  // 移动端适配
+  @media (max-width: 768px) {
+    padding: 16px;
+    
+    h3 {
+      font-size: 16px;
+      margin-bottom: 16px;
+    }
+    
+    // 表格在移动端的滚动
+    :deep(.el-table) {
+      font-size: 14px;
+      
+      .el-table__cell {
+        padding: 8px 4px;
+      }
+      
+      .cell {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+// 移动端加载更多样式
+.mobile-loading {
+  display: flex;
+  justify-content: center;
+  padding: 20px 0;
+  
+  .loading-more {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #666;
+    font-size: 14px;
+  }
+}
+
+// 时间选择器弹出层样式
+:deep(.date-picker-popper) {
+  z-index: 3000 !important;
+  
+  @media (max-width: 768px) {
+    max-width: calc(100vw - 32px) !important;
+    
+    .el-picker-panel {
+      max-width: 100% !important;
+    }
+    
+    .el-date-range-picker {
+      width: 100% !important;
+      
+      .el-picker-panel__body {
+        min-width: auto !important;
+      }
+      
+      .el-date-table {
+        font-size: 12px !important;
+      }
+      
+      .el-picker-panel__content {
+        margin: 0 !important;
+      }
+    }
+  }
 }
 </style>

schoolNewsWeb/src/views/user/user-center/MyAchievementsView.vue

@@ -303,4 +303,175 @@ onMounted(() => {
   }
 }
 
+/* 移动端适配 */
+@media (max-width: 768px) {
+  .my-achievements {
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px;
+
+    h3 {
+      font-size: 18px;
+      margin-bottom: 12px;
+      color: #1f2937;
+      font-weight: 600;
+    }
+
+    .level-achieve {
+      width: 100%;
+
+      .level {
+        padding: 20px 16px;
+        gap: 16px;
+
+        .level-icons {
+          width: 140px;
+          height: 90px;
+          
+          .level-star { 
+            width: 100%; 
+            height: auto; 
+          }
+          
+          .level-badge { 
+            position: absolute; 
+            top: 35px; 
+            width: 56px; 
+            height: 56px; 
+          }
+        }
+
+        .level-word { 
+          height: 24px; 
+        }
+
+        .next-tip { 
+          color: #64748b; 
+          font-size: 12px;
+          text-align: center;
+          line-height: 1.4;
+          max-width: 280px;
+        }
+
+        .level-range { 
+          width: 100%; 
+          display: flex; 
+          justify-content: space-between; 
+          font-size: 11px; 
+          color: #64748b; 
+        }
+
+        .el-progress { 
+          width: 100%; 
+        }
+      }
+    }
+
+    .badge-achieve {
+      width: 100%;
+
+      .achievement-list {
+        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+        gap: 12px;
+        
+        .achievement-item {
+          padding: 10px 8px;
+          gap: 6px;
+
+          .achv-name-wrap {
+            width: 120px;
+            height: 28px;
+            
+            .achv-name { 
+              font-size: 11px; 
+              max-width: 100px; 
+            }
+          }
+
+          .achv-icon { 
+            width: 60px; 
+            height: 60px; 
+          }
+
+          .achv-cond { 
+            font-size: 11px; 
+            color: #64748b;
+            text-align: center;
+            line-height: 1.3;
+          }
+        }
+      }
+    }
+  }
+}
+
+/* 小屏幕移动端进一步适配 */
+@media (max-width: 480px) {
+  .my-achievements {
+    padding: 12px;
+    gap: 12px;
+
+    h3 {
+      font-size: 16px;
+      margin-bottom: 8px;
+    }
+
+    .level-achieve {
+      .level {
+        padding: 16px 12px;
+
+        .level-icons {
+          width: 120px;
+          height: 75px;
+          
+          .level-badge { 
+            top: 25px; 
+            width: 48px; 
+            height: 48px; 
+          }
+        }
+
+        .level-word { 
+          height: 20px; 
+        }
+
+        .next-tip { 
+          font-size: 11px;
+          max-width: 240px;
+        }
+      }
+    }
+
+    .badge-achieve {
+      .achievement-list {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 10px;
+        
+        .achievement-item {
+          padding: 8px 6px;
+
+          .achv-name-wrap {
+            width: 100px;
+            height: 24px;
+            
+            .achv-name { 
+              font-size: 10px; 
+              max-width: 80px; 
+            }
+          }
+
+          .achv-icon { 
+            width: 48px; 
+            height: 48px; 
+          }
+
+          .achv-cond { 
+            font-size: 10px; 
+          }
+        }
+      }
+    }
+  }
+}
+
 </style>

schoolNewsWeb/src/views/user/user-center/MyFavoritesView.vue

@@ -49,7 +49,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import { ElButton, ElMessage, ElMessageBox, ElIcon } from 'element-plus';
@@ -69,6 +69,7 @@ const router = useRouter();
 const activeFilter = ref<'all' | number>('all');
 const favorites = ref<UserCollectionVO[]>([]);
 const loading = ref(false);
+const isMobile = ref(false);
 
 const filters: Array<{ key: 'all' | number; label: string }> = [
   { key: 'all', label: '全部' },
@@ -123,9 +124,20 @@ const getTypeName = (item: UserCollectionVO): string => {
 const currentUser = computed(() => store.getters['auth/user']);
 
 onMounted(() => {
+  checkMobile();
+  window.addEventListener('resize', checkMobile);
   loadFavorites();
 });
 
+onUnmounted(() => {
+  window.removeEventListener('resize', checkMobile);
+});
+
+// 检查是否为移动端
+function checkMobile() {
+  isMobile.value = window.innerWidth < 768;
+}
+
 // 加载收藏列表
 async function loadFavorites() {
   if (!currentUser.value?.id) {
@@ -221,12 +233,31 @@ function formatDate(dateStr?: string): string {
       font-weight: 600;
       color: #141F38;
     }
+    
+    // 移动端适配
+    @media (max-width: 768px) {
+      flex-direction: column;
+      gap: 16px;
+      align-items: flex-start;
+      margin-bottom: 24px;
+      
+      h2 {
+        font-size: 20px;
+      }
+    }
   }
 }
 
 .filter-tabs {
   display: flex;
   gap: 8px;
+  
+  // 移动端适配
+  @media (max-width: 768px) {
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
 }
 
 .filter-tab {
@@ -247,12 +278,34 @@ function formatDate(dateStr?: string): string {
     background: #C62828;
     color: white;
   }
+  
+  // 移动端适配
+  @media (max-width: 768px) {
+    flex: 1;
+    text-align: center;
+    padding: 6px 12px;
+    font-size: 13px;
+    min-width: 60px;
+  }
 }
 
 .favorites-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 24px;
+  
+  // 移动端适配
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr; // 单列布局
+    gap: 16px;
+    padding: 0; // 移除额外padding
+  }
+  
+  // 小屏平板适配
+  @media (max-width: 1024px) and (min-width: 769px) {
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 20px;
+  }
 }
 
 .favorite-item {
@@ -265,6 +318,18 @@ function formatDate(dateStr?: string): string {
     border-color: #C62828;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }
+  
+  // 移动端适配
+  @media (max-width: 768px) {
+    border-radius: 6px;
+    margin-bottom: 0; // 移除额外边距
+    
+    &:hover {
+      // 移动端减少hover效果
+      transform: none;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    }
+  }
 }
 
 .item-thumbnail {
@@ -278,6 +343,11 @@ function formatDate(dateStr?: string): string {
     height: 100%;
     object-fit: cover;
   }
+  
+  // 移动端适配
+  @media (max-width: 768px) {
+    height: 160px; // 稍微降低高度
+  }
 }
 
 .item-type {
@@ -300,6 +370,20 @@ function formatDate(dateStr?: string): string {
     color: #141F38;
     margin-bottom: 8px;
   }
+  
+  // 移动端适配
+  @media (max-width: 768px) {
+    padding: 12px;
+    
+    h3 {
+      font-size: 15px;
+      margin-bottom: 6px;
+      // 标题截断
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
 }
 
 .item-summary {
@@ -312,6 +396,14 @@ function formatDate(dateStr?: string): string {
   line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
+  
+  // 移动端适配
+  @media (max-width: 768px) {
+    font-size: 13px;
+    margin-bottom: 12px;
+    -webkit-line-clamp: 1; // 移动端只显示一行
+    line-clamp: 1;
+  }
 }
 
 .item-footer {
@@ -320,16 +412,46 @@ function formatDate(dateStr?: string): string {
   align-items: center;
   padding-top: 12px;
   border-top: 1px solid #f0f0f0;
+  
+  // 移动端适配
+  @media (max-width: 768px) {
+    flex-direction: column;
+    gap: 8px;
+    align-items: stretch;
+    padding-top: 8px;
+  }
 }
 
 .item-date {
   font-size: 12px;
   color: #999;
+  
+  // 移动端适配
+  @media (max-width: 768px) {
+    text-align: center;
+    order: 2; // 移到按钮下方
+    font-size: 11px;
+  }
 }
 
 .item-actions {
   display: flex;
   gap: 8px;
+  
+  // 移动端适配
+  @media (max-width: 768px) {
+    order: 1; // 移到日期上方
+    
+    :deep(.el-button) {
+      flex: 1;
+      font-size: 12px;
+      padding: 4px 8px;
+    }
+    
+    :deep(.el-button--small) {
+      height: 28px;
+    }
+  }
 }
 
 .thumbnail-placeholder {
@@ -360,5 +482,18 @@ function formatDate(dateStr?: string): string {
     font-size: 16px;
     margin: 0;
   }
+  
+  // 移动端适配
+  @media (max-width: 768px) {
+    padding: 60px 20px;
+    
+    .empty-icon {
+      margin-bottom: 12px;
+    }
+    
+    p {
+      font-size: 14px;
+    }
+  }
 }
 </style>

schoolNewsWeb/src/views/user/user-center/UserCenterLayout.vue

@@ -59,7 +59,13 @@ const menus = computed(() => {
   align-items: center;
   gap: 20px;
   min-height: calc(100vh - 76px);
-  // overflow-y: auto;
+  
+  // 移动端适配
+  @media (max-width: 768px) {
+    padding: 16px;
+    gap: 16px;
+    min-height: calc(100vh - 60px);
+  }
 }
 
 .user-card-wrapper {
@@ -67,18 +73,39 @@ const menus = computed(() => {
   height: 25%;
   display: flex;
   justify-content: center;
+  
+  // 移动端适配
+  @media (max-width: 768px) {
+    width: 100%;
+    height: auto;
+    min-height: 120px;
+  }
 }
 
 .content-wrapper {
   width: 90%;
-
   height: 75%;
   display: flex;
   gap: 20px;
+  
+  // 移动端垂直布局
+  @media (max-width: 768px) {
+    width: 100%;
+    height: auto;
+    flex-direction: column;
+    gap: 16px;
+  }
 }
 
 .sidebar-wrapper {
   flex-shrink: 0;
+  order: 1; // 桌面端显示在左侧
+  
+  // 移动端水平标签栏
+  @media (max-width: 768px) {
+    width: 100%;
+    flex-shrink: 1;
+  }
 }
 
 .main-content {
@@ -87,5 +114,13 @@ const menus = computed(() => {
   border-radius: 8px;
   padding: 20px;
   min-height: 60vh;
+  order: 2; // 桌面端显示在右侧
+  
+  // 移动端适配
+  @media (max-width: 768px) {
+    padding: 16px;
+    min-height: 50vh;
+    border-radius: 8px 8px 0 0; // 底部圆角移除，为标签栏让位
+  }
 }
 </style>

schoolNewsWeb/src/views/user/user-center/components/UserCard.vue

@@ -25,7 +25,7 @@
         <div class="user-name-row">
           <span class="username">{{ userInfo?.username || '未设置昵称' }}</span>
           <div class="gender-tag" v-if="userInfo?.gender">
-            <img :src="userInfo?.gender === 1 ? maleIcon : femaleIcon" :alt="userInfo?.gender === 1 ? '男' : '女'" class="gender-icon" />
+            <img :src="userInfo?.gender === 1 ? genderIcons.maleIcon : genderIcons.femaleIcon" :alt="userInfo?.gender === 1 ? '男' : '女'" class="gender-icon" />
             <span class="gender-text">{{ userInfo?.gender === 1 ? '男' : '女' }}</span>
           </div>
         </div>
@@ -65,6 +65,12 @@ const userInfo = ref<UserVO>();
 // 默认头像
 const defaultAvatar = defaultAvatarImg;
 
+// 性别图标
+const genderIcons = {
+    maleIcon,
+    femaleIcon
+};
+
 const levelIcon = computed(() => {
   const level = userInfo.value?.level || 1;
   return getLevelWordIconUrl(level);
@@ -94,6 +100,12 @@ onMounted(async () => {
   display: flex;
   flex-direction: column;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  
+  // 移动端适配
+  @media (max-width: 768px) {
+    padding: 16px;
+    min-height: auto;
+  }
 }
 
 .card-header {
@@ -145,12 +157,28 @@ onMounted(async () => {
   &:active {
     background: rgba(198, 40, 40, 0.15);
   }
+  
+  // 移动端适配
+  @media (max-width: 768px) {
+    align-self: center;
+    margin-top: 8px;
+    padding: 6px 20px;
+    font-size: 14px;
+  }
 }
 
 .user-info-section {
   display: flex;
   align-items: center;
   gap: 20px;
+  
+  // 移动端垂直布局
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    text-align: center;
+  }
 }
 
 .avatar-wrapper {
@@ -175,6 +203,12 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   gap: 10px;
+  
+  // 移动端居中对齐
+  @media (max-width: 768px) {
+    justify-content: center;
+    flex-wrap: wrap;
+  }
 }
 
 .username {
@@ -209,6 +243,13 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   gap: 40px;
+  
+  // 移动端自动换行布局
+  @media (max-width: 768px) {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 16px 20px; 
+  }
 }
 
 .info-item {