h5样式

schoolNewsServ/admin/src/main/resources/application.yml

@@ -1,5 +1,5 @@
 server:
-  port: 8081
+  port: 8082
   servlet:
     context-path: /schoolNewsServ
     encoding:

schoolNewsWeb/src/components/base/MobileNavItem.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="mobile-nav-item">
+    <!-- 有子菜单的情况 -->
+    <template v-if="hasChildren">
+      <div 
+        class="nav-item-content" 
+        :class="{ 'active': isActive }"
+        @click="toggleExpanded"
+      >
+        <div class="nav-item-inner">
+          <span class="nav-title">{{ menu.name }}</span>
+          <el-icon class="expand-icon" :class="{ 'expanded': expanded }">
+            <ArrowRight />
+          </el-icon>
+        </div>
+      </div>
+      
+      <!-- 子菜单 -->
+      <transition name="submenu">
+        <div 
+          class="submenu" 
+          v-if="expanded"
+        >
+          <MobileNavItem 
+            v-for="child in filteredChildren"
+            :key="child.menuID"
+            :menu="child" 
+            :level="level + 1"
+            @menu-click="$emit('menu-click', $event)"
+          />
+        </div>
+      </transition>
+    </template>
+    
+    <!-- 没有子菜单的情况 -->
+    <template v-else>
+      <div 
+        class="nav-item-content" 
+        :class="{ 'active': isActive }"
+        @click="handleClick"
+      >
+        <div class="nav-item-inner">
+          <span class="nav-title">{{ menu.name }}</span>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import type { SysMenu } from '@/types';
+import { MenuType } from '@/types/enums';
+import { ArrowRight } from '@element-plus/icons-vue';
+
+// 递归组件需要声明名称
+defineOptions({
+  name: 'MobileNavItem'
+});
+
+// Props
+interface Props {
+  menu: SysMenu;
+  level?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  level: 0
+});
+
+// Emits
+const emit = defineEmits<{
+  'menu-click': [menu: SysMenu];
+}>();
+
+// 状态 - 默认不展开
+const expanded = ref(false);
+
+// Composition API
+const route = useRoute();
+
+// 计算属性 - 显示NAVIGATION类型的子菜单
+const hasChildren = computed(() => {
+  return props.menu.children && 
+         props.menu.children.filter((child: SysMenu) => child.type === MenuType.NAVIGATION).length > 0;
+});
+
+// 过滤后的子菜单（只显示NAVIGATION类型）
+const filteredChildren = computed(() => {
+  if (!props.menu.children) return [];
+  return props.menu.children.filter((child: SysMenu) => child.type === MenuType.NAVIGATION);
+});
+
+const isActive = computed(() => {
+  // 精确匹配当前路由
+  if (route.path === props.menu.url) return true;
+  
+  // 检查是否是子路由激活
+  if (props.menu.children && props.menu.children.length > 0) {
+    return props.menu.children.some(child => route.path === child.url);
+  }
+  
+  return false;
+});
+
+// 方法
+function toggleExpanded() {
+  if (hasChildren.value) {
+    expanded.value = !expanded.value;
+  }
+}
+
+function handleClick() {
+  if (props.menu.url && props.menu.type === MenuType.NAVIGATION) {
+    emit('menu-click', props.menu);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mobile-nav-item {
+  margin-bottom: 4px;
+}
+
+.nav-item-content {
+  position: relative;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  height: 48px;
+  
+  &:hover {
+    background-color: rgba(198, 40, 40, 0.05);
+  }
+  
+  &.active {
+    background-color: #C62828;
+    
+    .nav-item-inner {
+      color: #FFFFFF;
+    }
+    
+    .expand-icon {
+      color: #FFFFFF;
+    }
+  }
+}
+
+.nav-item-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  padding: 0 20px;
+  color: #141F38;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.nav-title {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.expand-icon {
+  font-size: 12px;
+  transition: transform 0.3s ease, color 0.2s;
+  color: #686868;
+  
+  &.expanded {
+    transform: rotate(90deg);
+  }
+}
+
+.submenu {
+  margin: 4px 0;
+  overflow: hidden;
+  
+  .mobile-nav-item {
+    margin-bottom: 2px;
+  }
+  
+  .nav-item-content {
+    .nav-item-inner {
+      padding-left: 40px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #686868;
+    }
+    
+    &.active .nav-item-inner {
+      color: #FFFFFF;
+    }
+    
+    &:hover {
+      background-color: rgba(198, 40, 40, 0.08);
+    }
+  }
+}
+
+/* 动画效果 */
+.submenu-enter-active,
+.submenu-leave-active {
+  transition: all 0.3s ease;
+}
+
+.submenu-enter-from,
+.submenu-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+</style>

schoolNewsWeb/src/components/base/index.ts

@@ -13,3 +13,4 @@ export { default as TreeNode } from './TreeNode.vue';
 export { default as Notice } from './Notice.vue';
 export { default as ChangeHome } from './ChangeHome.vue';
 export { default as DynamicParamForm} from './DynamicParamForm.vue'
+export { default as MobileNavItem } from './MobileNavItem.vue'

schoolNewsWeb/src/layouts/MobileLayout.vue

@@ -0,0 +1,593 @@
+<template>
+  <div class="mobile-layout">
+    <!-- 顶部导航栏 -->
+    <header class="mobile-header">
+      <!-- 左侧：系统标签 -->
+      <div class="header-left">
+        <div class="logo-section">
+          <div class="logo-icon">
+            <img src="@/assets/imgs/logo-icon.svg" alt="Logo" />
+          </div>
+          <h1 class="platform-title">红色思政学习平台</h1>
+        </div>
+      </div>
+      
+      <!-- 右侧：搜索、菜单、用户头像 -->
+      <div class="header-right">
+        <!-- 搜索区域 -->
+        <div class="search-section">
+          <!-- 搜索input（展开时显示） -->
+          <div v-if="searchInputVisible" class="search-input-wrapper">
+            <el-input
+              v-model="searchKeyword"
+              ref="searchInputRef"
+              placeholder="搜索内容"
+              class="search-input"
+              @keydown.enter="performSearch"
+              @blur="hideSearchInput"
+            />
+          </div>
+          <!-- 搜索按钮 -->
+          <button v-if="!searchInputVisible" @click="showSearchInput" class="search-button">
+            <el-icon class="search-icon">
+              <Search />
+            </el-icon>
+          </button>
+        </div>
+        
+        <!-- 汉堡菜单 -->
+        <button @click="toggleNavMenu" class="hamburger-button">
+          <div class="hamburger-lines">
+            <span class="line"></span>
+            <span class="line"></span>
+            <span class="line"></span>
+          </div>
+        </button>
+        
+        <!-- 用户头像 -->
+        <div class="user-avatar-section" @click="handleUserClick">
+          <el-avatar :size="32" :src="userInfo.avatar" class="user-avatar">
+            <el-icon><User /></el-icon>
+          </el-avatar>
+        </div>
+      </div>
+    </header>
+
+    <!-- 导航下拉菜单 - 使用 Teleport 避免层级问题 -->
+    <Teleport to="body">
+      <div 
+        v-show="navMenuVisible" 
+        class="nav-dropdown" 
+        :class="{ show: navMenuVisible }"
+        @click="handleBackgroundClick"
+      >
+        <div class="nav-menu" @click.stop>
+          <MobileNavItem 
+            v-for="menu in navigationMenus"
+            :key="menu.menuID"
+            :menu="menu" 
+            @menu-click="handleNavMenuClick"
+          />
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- 主要内容区域 -->
+    <main class="mobile-main" :class="{ 'nav-open': navMenuVisible }">
+      <AIAgentMobile/>
+      <router-view />
+    </main>
+
+    
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, nextTick } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+import type { SysMenu } from '@/types';
+import type { Tag } from '@/types/resource';
+import { MenuType } from '@/types/enums';
+import { resourceTagApi } from '@/apis/resource';
+import {
+  ArrowLeft,
+  Menu,
+  Search,
+  More,
+  ArrowRight,
+  SwitchButton,
+  House,
+  Document,
+  User,
+  Message,
+  Setting
+} from '@element-plus/icons-vue';
+import { FILE_DOWNLOAD_URL } from '@/config';
+import { MobileNavItem } from '@/components/base';
+import { AIAgentMobile } from '@/views/public/ai';
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
+
+// 响应式数据
+const navMenuVisible = ref(false);
+const searchInputVisible = ref(false);
+const searchKeyword = ref('');
+const searchInputRef = ref();
+const specialTags = ref<Tag[]>([]); // 特殊标签：专题报告和思政案例
+
+// 计算属性
+const currentPath = computed(() => route.path);
+const pageTitle = computed(() => route.meta?.title as string || '校园新闻');
+const showBackButton = computed(() => route.meta?.showBackButton as boolean || false);
+const showSearch = computed(() => route.meta?.showSearch as boolean || true); // 默认显示搜索按钮
+const showMore = computed(() => route.meta?.showMore as boolean || false);
+const showTabBar = computed(() => route.meta?.showTabBar !== false);
+
+// 从store获取用户信息
+const userInfo = computed(() => {
+  const userDetail = store.getters['auth/userinfo'];
+  const user = store.getters['auth/user'];
+  return {
+    avatar: FILE_DOWNLOAD_URL + userDetail?.avatar, // 默认头像
+    name: user?.userName || user?.name || '用户',
+    role: userDetail?.title || '用户'
+  };
+});
+
+// 获取所有菜单
+const allMenus = computed(() => store.getters['auth/menuTree']);
+
+// 获取导航菜单（过滤掉用户相关菜单）+ 特殊标签
+const navigationMenus = computed(() => {
+  const menus = allMenus.value.filter((menu: SysMenu) => {
+    // 过滤掉"用户下拉菜单"容器，这些显示在UserDropdown中
+    if (menu.menuID === 'menu_user_dropdown') {
+      return false;
+    }
+    return menu.type === MenuType.NAVIGATION;
+  });
+  
+  // 将特殊标签转换为SysMenu格式并添加到菜单中
+  const specialMenus: SysMenu[] = specialTags.value.map(tag => ({
+    menuID: `special_${tag.tagID}`,
+    name: tag.name,
+    url: `/resource-center?tagID=${tag.tagID}`,
+    type: MenuType.NAVIGATION,
+    children: [],
+    parentID: undefined,
+    sort: 999 // 排在最后
+  }));
+  
+  return [...menus, ...specialMenus];
+});
+
+
+
+
+// 方法
+const toggleNavMenu = () => {
+  navMenuVisible.value = !navMenuVisible.value;
+};
+
+const hideNavMenu = () => {
+  navMenuVisible.value = false;
+};
+
+// 处理背景点击 - 参考TopNavigation.vue的处理方式
+const handleBackgroundClick = (event: MouseEvent) => {
+  // 只有点击背景区域时才关闭菜单
+  if (event.target === event.currentTarget) {
+    hideNavMenu();
+  }
+};
+
+const handleBack = () => {
+  router.back();
+};
+
+const handleSearch = () => {
+  router.push('/search');
+};
+
+
+// 搜索功能相关方法
+const showSearchInput = () => {
+  searchInputVisible.value = true;
+  // 下一个tick后聚焦输入框
+  nextTick(() => {
+    searchInputRef.value?.focus?.();
+  });
+};
+
+const hideSearchInput = () => {
+  // 延迟隐藏，避免点击搜索按钮时立即隐藏
+  setTimeout(() => {
+    searchInputVisible.value = false;
+    searchKeyword.value = '';
+  }, 200);
+};
+
+const performSearch = () => {
+  if (searchKeyword.value.trim()) {
+    // 执行搜索跳转
+    router.push({
+      path: '/search',
+      query: {
+        keyword: searchKeyword.value.trim()
+      }
+    });
+    // 搜索后隐藏输入框
+    searchInputVisible.value = false;
+    searchKeyword.value = '';
+  }
+};
+
+// 用户头像点击处理
+const handleUserClick = () => {
+  router.push('/user-center');
+};
+
+// 处理导航菜单点击
+const handleNavMenuClick = (menu: SysMenu) => {
+  hideNavMenu();
+  if (menu.url) {
+    router.push(menu.url);
+  } else if (menu.children && menu.children.length > 0) {
+    // 如果没有url但有子菜单，跳转到第一个子菜单
+    const firstChild = menu.children.find(child => child.url);
+    if (firstChild?.url) {
+      router.push(firstChild.url);
+    }
+  }
+};
+
+
+// 加载特殊标签（专题报告和思政案例）
+const loadSpecialTags = async () => {
+  try {
+    const res = await resourceTagApi.getTagsByType(1); // 1 = 文章分类标签
+    if (res.success && res.dataList) {
+      // 只获取专题报告(tag005)和思政案例(tag006)
+      specialTags.value = res.dataList.filter((tag: Tag) => 
+        tag.tagID === 'tag_article_005' || tag.tagID === 'tag_article_006'
+      );
+    }
+  } catch (error) {
+    console.error('加载特殊标签失败:', error);
+  }
+};
+
+onMounted(async () => {
+  // 加载特殊标签
+  await loadSpecialTags();
+});
+</script>
+
+<style lang="scss" scoped>
+.mobile-layout {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: #f8f9fa;
+}
+
+.mobile-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 46px;
+  padding: 10px 16px;
+  background-color: #ffffff;
+  border-bottom: 1px solid rgba(72, 72, 72, 0.1);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+
+  .header-left {
+    flex: 1;
+    display: flex;
+    align-items: center;
+
+    .logo-section {
+      display: flex;
+      align-items: center;
+      gap: 7.42px;
+
+      .logo-icon {
+        width: 24.28px;
+        height: 24.28px;
+        background: #C62828;
+        border-radius: 4.05px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 2.02px;
+        flex-shrink: 0;
+
+        img {
+          width: 20.24px;
+          height: 20.24px;
+        }
+      }
+
+      .platform-title {
+        font-family: 'Taipei Sans TC Beta', sans-serif;
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 18px;
+        color: #C62828;
+        margin: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-shrink: 0;
+
+    .search-section {
+      position: relative;
+      display: flex;
+      align-items: center;
+
+      .search-input-wrapper {
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 200px;
+        z-index: 10;
+
+        .search-input {
+          width: 100%;
+          
+          :deep(.el-input__wrapper) {
+            background: #ffffff;
+            border: 1px solid #C62828;
+            border-radius: 20px;
+            height: 32px;
+            padding: 0 12px;
+            box-shadow: 0 2px 8px rgba(198, 40, 40, 0.1);
+          }
+          
+          :deep(.el-input__inner) {
+            font-size: 14px;
+            color: #333;
+            
+            &::placeholder {
+              color: #999;
+            }
+          }
+        }
+      }
+
+      .search-button {
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 6px;
+        border-radius: 4px;
+        transition: background-color 0.2s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &:hover {
+          background-color: #f5f5f5;
+        }
+
+        .search-icon {
+          font-size: 18px;
+          color: #141F38;
+        }
+      }
+    }
+
+    .hamburger-button {
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 4px;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .hamburger-lines {
+        width: 16px;
+        height: 16px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        position: relative;
+
+        .line {
+          width: 13.33px;
+          height: 0;
+          border-top: 1.67px solid #141F38;
+          margin-left: 1.33px;
+          
+          &:nth-child(1) {
+            margin-bottom: 3px;
+          }
+          
+          &:nth-child(2) {
+            margin-bottom: 3px;
+          }
+        }
+      }
+    }
+
+    .user-avatar-section {
+      cursor: pointer;
+      transition: opacity 0.2s;
+
+      &:hover {
+        opacity: 0.8;
+      }
+
+      .user-avatar {
+        border: 1px solid #e5e5e5;
+      }
+    }
+  }
+}
+
+// 导航下拉菜单样式
+.nav-dropdown {
+  position: fixed;
+  top: 46px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 10000;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s, visibility 0.2s;
+  pointer-events: none;
+  
+  &.show {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+  
+  .nav-menu {
+    background: #ffffff;
+    border-radius: 0 0 20px 20px;
+    padding: 10px 20px;
+    position: relative;
+    
+    .nav-menu-item {
+      padding: 10px 20px;
+      cursor: pointer;
+      transition: background-color 0.2s;
+      
+      &:hover {
+        background-color: #f5f5f5;
+      }
+      
+      &.active {
+        .nav-item-label {
+          color: #C62828;
+          font-weight: 600;
+        }
+        
+        .nav-item-arrow {
+          color: #C62828;
+        }
+      }
+      
+      .nav-item-content {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 2px;
+        
+        .nav-item-label {
+          font-family: 'PingFang SC', sans-serif;
+          font-weight: 500;
+          font-size: 16px;
+          line-height: 24px;
+          color: #141F38;
+          flex: 1;
+        }
+        
+        .nav-item-arrow {
+          font-size: 12px;
+          color: #686868;
+          transition: color 0.2s;
+        }
+      }
+      
+      // 特殊样式处理不同颜色的文本
+      &:nth-child(1) .nav-item-label,
+      &:nth-child(2) .nav-item-label,
+      &:nth-child(6) .nav-item-label,
+      &:nth-child(7) .nav-item-label {
+        color: #141F38;
+      }
+      
+      &:nth-child(4) .nav-item-label,
+      &:nth-child(5) .nav-item-label {
+        color: #686868;
+      }
+    }
+  }
+}
+
+.mobile-main {
+  flex: 1;
+  padding-top: 46px;
+  padding-bottom: 60px;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  
+  &.nav-open {
+    filter: blur(2px);
+  }
+}
+
+.mobile-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #ffffff;
+  border-top: 1px solid #e5e5e5;
+  z-index: 1000;
+
+  .tab-bar {
+    display: flex;
+    height: 60px;
+
+    .tab-item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: color 0.2s;
+
+      &.active {
+        color: #E7000B;
+      }
+
+      &:not(.active) {
+        color: #999;
+      }
+
+      .tab-icon {
+        font-size: 20px;
+        margin-bottom: 2px;
+      }
+
+      .tab-label {
+        font-size: 12px;
+        line-height: 1;
+      }
+    }
+  }
+}
+
+
+// 移动端特定样式
+@media (max-width: 767px) {
+  .mobile-main {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+</style>

schoolNewsWeb/src/router/index.ts

@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
+import { createAdaptiveRoute, setupRouteWatcher } from "@/utils/routeAdapter";
 
 /**
  * 基础路由配置（无需权限）
@@ -8,54 +9,21 @@ export const routes: Array<RouteRecordRaw> = [
     path: "/",
     redirect: "/login",
   },
-  {
+  createAdaptiveRoute('/login', '@/views/public/login/Login.vue', 'BlankLayout', {
-    path: "/login",
+    title: '登录',
-    component: () => import("@/layouts/BlankLayout.vue"),
-    children: [
-      {
-        path: "",
-        name: "Login",
-        component: () => import("@/views/public/login/Login.vue"),
-        meta: {
-          title: "登录",
     requiresAuth: false,
     menuType: 3,
-        },
+  }),
-      }
+  createAdaptiveRoute('/register', '@/views/public/login/Register.vue', 'BlankLayout', {
-    ],
+    title: '注册',
-  },
-  {
-    path: "/register", 
-    component: () => import("@/layouts/BlankLayout.vue"),
-    children: [
-      {
-        path: "",
-        name: "Register",
-        component: () => import("@/views/public/login/Register.vue"),
-        meta: {
-          title: "注册",
     requiresAuth: false,
     menuType: 3,
-        },
+  }),
-      }
+  createAdaptiveRoute('/forgot-password', '@/views/public/login/ForgotPassword.vue', 'BlankLayout', {
-    ],
+    title: '忘记密码',
-  },
-  {
-    path: "/forgot-password",
-    component: () => import("@/layouts/BlankLayout.vue"),
-    children: [
-      {
-        path: "",
-        name: "ForgotPassword",
-        component: () => import("@/views/public/login/ForgotPassword.vue"),
-        meta: {
-          title: "忘记密码",
     requiresAuth: false,
     menuType: 3,
-        },
+  }),
-      }
-    ],
-  },
   // 首页（显示在导航栏）
   // {
   //   path: "/home",
@@ -132,8 +100,11 @@ export const routes: Array<RouteRecordRaw> = [
 ];
 
 const router = createRouter({
-  history: createWebHistory('/schoolNewsWeb/'),
+  history: createWebHistory(import.meta.env.BASE_URL),
   routes,
 });
 
+// 设置路由响应式监听器
+setupRouteWatcher(router);
+
 export default router;

schoolNewsWeb/src/utils/deviceUtils.ts

@@ -0,0 +1,109 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+
+/**
+ * 设备类型枚举
+ */
+export enum DeviceType {
+  MOBILE = 'mobile',  // h5移动端
+  DESKTOP = 'desktop' // web桌面端
+}
+
+/**
+ * 屏幕尺寸断点
+ */
+export const BREAKPOINTS = {
+  mobile: 768,   // 小于768px为移动端(h5)
+  desktop: 768   // 大于等于768px为桌面端(web)
+};
+
+/**
+ * 检测当前设备类型
+ */
+export function getDeviceType(): DeviceType {
+  const width = window.innerWidth;
+  
+  if (width < BREAKPOINTS.mobile) {
+    return DeviceType.MOBILE;  // h5移动端
+  } else {
+    return DeviceType.DESKTOP; // web桌面端
+  }
+}
+
+/**
+ * 检测是否为移动端
+ */
+export function isMobile(): boolean {
+  return getDeviceType() === DeviceType.MOBILE;
+}
+
+/**
+ * 检测是否为桌面端
+ */
+export function isDesktop(): boolean {
+  return getDeviceType() === DeviceType.DESKTOP;
+}
+
+/**
+ * 响应式设备类型 Hook
+ */
+export function useDevice() {
+  const deviceType = ref<DeviceType>(getDeviceType());
+  const isMobileDevice = ref(isMobile());
+  const isDesktopDevice = ref(isDesktop());
+
+  const updateDeviceType = () => {
+    deviceType.value = getDeviceType();
+    isMobileDevice.value = isMobile();
+    isDesktopDevice.value = isDesktop();
+  };
+
+  onMounted(() => {
+    window.addEventListener('resize', updateDeviceType);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', updateDeviceType);
+  });
+
+  return {
+    deviceType,
+    isMobileDevice,
+    isDesktopDevice
+  };
+}
+
+/**
+ * 根据设备类型获取对应的组件路径
+ */
+export function getComponentPath(basePath: string, deviceType?: DeviceType): string {
+  const currentDeviceType = deviceType || getDeviceType();
+  
+  // 如果是移动端(h5)，尝试加载移动端版本
+  if (currentDeviceType === DeviceType.MOBILE) {
+    const mobilePath = basePath.replace('.vue', '.mobile.vue');
+    return mobilePath;
+  }
+  
+  // 默认返回桌面版本(web)
+  return basePath;
+}
+
+/**
+ * 动态导入组件，支持回退机制
+ */
+export async function importResponsiveComponent(basePath: string) {
+  const deviceType = getDeviceType();
+  
+  // 尝试加载设备特定的组件
+  if (deviceType === DeviceType.MOBILE) {
+    try {
+      const mobilePath = basePath.replace('.vue', '.mobile.vue');
+      return await import(/* @vite-ignore */ mobilePath);
+    } catch {
+      // 移动端组件不存在，回退到默认组件
+    }
+  }
+  
+  // 加载默认组件(桌面端/web)
+  return await import(/* @vite-ignore */ basePath);
+}

schoolNewsWeb/src/utils/mobileRouteExample.ts

@@ -0,0 +1,211 @@
+/**
+ * 移动端路由自动转换使用示例
+ * 
+ * 这个文件展示了如何使用自动转换系统来实现移动端适配
+ */
+
+import { RouteRecordRaw } from 'vue-router';
+import { 
+  createAdaptiveRoute, 
+  createResponsiveRoute, 
+  getResponsiveLayout,
+  setupRouteWatcher,
+  type RouteAdapter
+} from './routeAdapter';
+
+/**
+ * 示例1: 创建单个自适应路由
+ * 
+ * 当屏幕宽度 < 768px时，会自动尝试加载 HomeView.mobile.vue
+ * 如果移动端文件不存在，会回退到 HomeView.vue
+ */
+export const homeRoute = createAdaptiveRoute(
+  '/home',
+  '@/views/user/home/HomeView.vue',
+  'NavigationLayout',
+  {
+    title: '首页',
+    requiresAuth: true,
+    showTabBar: true
+  }
+);
+
+/**
+ * 示例2: 手动创建路由适配器
+ * 
+ * 提供更精细的控制，可以为不同设备指定不同的组件
+ */
+export const resourceCenterRoute: RouteRecordRaw = {
+  path: '/resource-center',
+  component: getResponsiveLayout('NavigationLayout'),
+  children: [
+    {
+      path: '',
+      component: createResponsiveRoute({
+        // 桌面端使用默认组件
+        original: () => import('@/views/user/resource-center/ResourceCenterView.vue'),
+        // 移动端使用专门优化的组件
+        mobile: () => import('@/views/user/resource-center/ResourceCenterView.mobile.vue'),
+        // 平板可以复用移动端组件或使用专门的平板版本
+        tablet: () => import('@/views/user/resource-center/ResourceCenterView.mobile.vue')
+      }),
+      meta: {
+        title: '资源中心',
+        requiresAuth: true,
+        showTabBar: true,
+        showSearch: true
+      }
+    }
+  ]
+};
+
+/**
+ * 示例3: 批量创建自适应路由
+ */
+export const userRoutes: RouteRecordRaw[] = [
+  // 首页
+  createAdaptiveRoute('/home', '@/views/user/home/HomeView.vue', 'NavigationLayout', {
+    title: '首页',
+    requiresAuth: true,
+    showTabBar: true
+  }),
+
+  // 资源中心
+  createAdaptiveRoute('/resource-center', '@/views/user/resource-center/ResourceCenterView.vue', 'NavigationLayout', {
+    title: '资源中心',
+    requiresAuth: true,
+    showTabBar: true,
+    showSearch: true
+  }),
+
+  // 热门资源
+  createAdaptiveRoute('/resource-hot', '@/views/user/resource-center/HotResourceView.vue', 'NavigationLayout', {
+    title: '热门资源',
+    requiresAuth: true,
+    showBackButton: true
+  }),
+
+  // 搜索页面
+  createAdaptiveRoute('/search', '@/views/user/resource-center/SearchView.vue', 'NavigationLayout', {
+    title: '搜索',
+    requiresAuth: true,
+    showBackButton: true,
+    showTabBar: false // 搜索页面不显示底部标签栏
+  }),
+
+  // 课程中心
+  createAdaptiveRoute('/course-center', '@/views/user/study-plan/CourseCenterView.vue', 'NavigationLayout', {
+    title: '课程中心',
+    requiresAuth: true,
+    showTabBar: true
+  }),
+
+  // 课程详情
+  createAdaptiveRoute('/course-detail/:id', '@/views/user/study-plan/CourseDetailView.vue', 'NavigationLayout', {
+    title: '课程详情',
+    requiresAuth: true,
+    showBackButton: true
+  }),
+
+  // 用户中心
+  createAdaptiveRoute('/user-center', '@/views/user/user-center/UserCenterLayout.vue', 'NavigationLayout', {
+    title: '个人中心',
+    requiresAuth: true,
+    showTabBar: true
+  }),
+
+  // 个人信息
+  createAdaptiveRoute('/personal-info', '@/views/user/user-center/profile/PersonalInfoView.vue', 'NavigationLayout', {
+    title: '个人信息',
+    requiresAuth: true,
+    showBackButton: true
+  }),
+
+  // 我的消息
+  createAdaptiveRoute('/my-messages', '@/views/user/message/MyMessageListView.vue', 'NavigationLayout', {
+    title: '我的消息',
+    requiresAuth: true,
+    showTabBar: true
+  }),
+
+  // 消息详情
+  createAdaptiveRoute('/message-detail/:id', '@/views/user/message/MyMessageDetailView.vue', 'NavigationLayout', {
+    title: '消息详情',
+    requiresAuth: true,
+    showBackButton: true
+  })
+];
+
+/**
+ * 示例4: 公共页面路由（登录、注册等）
+ */
+export const publicRoutes: RouteRecordRaw[] = [
+  createAdaptiveRoute('/login', '@/views/public/login/Login.vue', 'BlankLayout', {
+    title: '登录',
+    requiresAuth: false
+  }),
+
+  createAdaptiveRoute('/register', '@/views/public/login/Register.vue', 'BlankLayout', {
+    title: '注册',
+    requiresAuth: false
+  }),
+
+  createAdaptiveRoute('/forgot-password', '@/views/public/login/ForgotPassword.vue', 'BlankLayout', {
+    title: '忘记密码',
+    requiresAuth: false
+  })
+];
+
+/**
+ * 示例5: 在router中使用
+ * 
+ * 在你的 router/index.ts 中，你可以这样使用：
+ * 
+ * ```typescript
+ * import { createRouter, createWebHistory } from 'vue-router';
+ * import { setupRouteWatcher } from '@/utils/routeAdapter';
+ * import { userRoutes, publicRoutes } from '@/utils/mobileRouteExample';
+ * 
+ * const router = createRouter({
+ *   history: createWebHistory('/schoolNewsWeb/'),
+ *   routes: [
+ *     ...publicRoutes,
+ *     ...userRoutes,
+ *     // 其他路由...
+ *   ]
+ * });
+ * 
+ * // 设置路由监听器，当屏幕尺寸变化时自动切换组件
+ * setupRouteWatcher(router);
+ * 
+ * export default router;
+ * ```
+ */
+
+/**
+ * 使用说明：
+ * 
+ * 1. **文件命名规范**：
+ *    - 桌面端：ComponentName.vue
+ *    - 移动端：ComponentName.mobile.vue  
+ *    - 平板端：ComponentName.tablet.vue
+ * 
+ * 2. **自动回退机制**：
+ *    - 如果移动端文件不存在，自动回退到桌面端文件
+ *    - 如果平板端文件不存在，自动回退到桌面端文件
+ * 
+ * 3. **Layout自动切换**：
+ *    - NavigationLayout -> MobileLayout (移动端)
+ *    - SidebarLayout -> MobileLayout (移动端)
+ *    - BasicLayout -> MobileLayout (移动端)
+ *    - BlankLayout -> BlankLayout (所有设备)
+ * 
+ * 4. **屏幕断点**：
+ *    - 移动端: < 768px
+ *    - 平板端: 768px - 1024px  
+ *    - 桌面端: > 1024px
+ * 
+ * 5. **实时响应**：
+ *    - 当用户调整浏览器窗口大小时，会自动切换到对应的组件版本
+ *    - 无需刷新页面
+ */

schoolNewsWeb/src/utils/route-generator.ts

@@ -8,24 +8,25 @@ import type { RouteRecordRaw } from 'vue-router';
 import type { SysMenu } from '@/types';
 import { MenuType } from '@/types/enums';
 import { routes } from '@/router';
+import { getResponsiveLayout } from './routeAdapter';
 
 // 预注册所有视图组件，构建时由 Vite 解析并生成按需加载的 chunk
 const VIEW_MODULES = import.meta.glob('../views/**/*.vue');
 
 /**
- * 布局组件映射
+ * 布局组件映射 - 使用响应式布局适配
  */
 const LAYOUT_MAP: Record<string, () => Promise<any>> = {
   // 基础布局（旧版，带侧边栏）
-  'BasicLayout': () => import('@/layouts/BasicLayout.vue'),
+  'BasicLayout': getResponsiveLayout('BasicLayout'),
   // 导航布局（新版，顶部导航+动态侧边栏）
-  'NavigationLayout': () => import('@/layouts/NavigationLayout.vue'),
+  'NavigationLayout': getResponsiveLayout('NavigationLayout'),
   // 侧边栏布局（管理后台专用，顶层SIDEBAR菜单）
-  'SidebarLayout': () => import('@/layouts/SidebarLayout.vue'),
+  'SidebarLayout': getResponsiveLayout('SidebarLayout'),
   // 空白布局
-  'BlankLayout': () => import('@/layouts/BlankLayout.vue'),
+  'BlankLayout': getResponsiveLayout('BlankLayout'),
   // 页面布局
-  'PageLayout': () => import('@/layouts/PageLayout.vue'),
+  'PageLayout': getResponsiveLayout('PageLayout'),
   // 路由占位组件（用于没有组件的子路由）
   'RoutePlaceholder': () => import('@/layouts/RoutePlaceholder.vue'),
   // 用户中心布局（有共用区域，避免重复查询）

schoolNewsWeb/src/utils/routeAdapter.ts

@@ -0,0 +1,261 @@
+import { RouteRecordRaw, RouteLocationNormalized } from 'vue-router';
+import { getDeviceType, DeviceType } from './deviceUtils';
+
+/**
+ * 路由适配器接口
+ */
+export interface RouteAdapter {
+  original: () => Promise<any>; // web桌面端
+  mobile?: () => Promise<any>;  // h5移动端
+}
+
+/**
+ * 移动端路由映射表
+ */
+export const MOBILE_ROUTES_MAP: Record<string, string> = {
+  // User Views
+  '/home': '@/views/user/home/HomeView.mobile.vue',
+  '/resource-center': '@/views/user/resource-center/ResourceCenterView.mobile.vue',
+  '/resource-hot': '@/views/user/resource-center/HotResourceView.mobile.vue',
+  '/search': '@/views/user/resource-center/SearchView.mobile.vue',
+  '/course-center': '@/views/user/study-plan/CourseCenterView.mobile.vue',
+  '/course-detail': '@/views/user/study-plan/CourseDetailView.mobile.vue',
+  '/course-study': '@/views/user/study-plan/CourseStudyView.mobile.vue',
+  '/study-tasks': '@/views/user/study-plan/StudyTasksView.mobile.vue',
+  '/learning-task-detail': '@/views/user/study-plan/LearningTaskDetailView.mobile.vue',
+  '/user-center': '@/views/user/user-center/UserCenterLayout.mobile.vue',
+  '/personal-info': '@/views/user/user-center/profile/PersonalInfoView.mobile.vue',
+  '/account-settings': '@/views/user/user-center/profile/AccountSettingsView.mobile.vue',
+  '/my-achievements': '@/views/user/user-center/MyAchievementsView.mobile.vue',
+  '/my-favorites': '@/views/user/user-center/MyFavoritesView.mobile.vue',
+  '/learning-records': '@/views/user/user-center/LearningRecordsView.mobile.vue',
+  '/my-messages': '@/views/user/message/MyMessageListView.mobile.vue',
+  '/message-detail': '@/views/user/message/MyMessageDetailView.mobile.vue',
+  
+  // Public Views  
+  '/login': '@/views/public/login/Login.mobile.vue',
+  '/register': '@/views/public/login/Register.mobile.vue',
+  '/forgot-password': '@/views/public/login/ForgotPassword.mobile.vue',
+  '/article-show': '@/views/public/article/ArticleShowView.mobile.vue',
+  '/article-add': '@/views/public/article/ArticleAddView.mobile.vue'
+};
+
+/**
+ * Layout映射表
+ */
+export const LAYOUT_MAP: Record<string, Record<DeviceType, string>> = {
+  'NavigationLayout': {
+    [DeviceType.MOBILE]: '@/layouts/MobileLayout.vue',  // h5移动端
+    [DeviceType.DESKTOP]: '@/layouts/NavigationLayout.vue' // web桌面端
+  },
+  'SidebarLayout': {
+    [DeviceType.MOBILE]: '@/layouts/MobileLayout.vue',  // h5移动端
+    [DeviceType.DESKTOP]: '@/layouts/SidebarLayout.vue' // web桌面端
+  },
+  'BasicLayout': {
+    [DeviceType.MOBILE]: '@/layouts/MobileLayout.vue',  // h5移动端
+    [DeviceType.DESKTOP]: '@/layouts/BasicLayout.vue'   // web桌面端
+  },
+  'BlankLayout': {
+    [DeviceType.MOBILE]: '@/layouts/BlankLayout.vue',   // h5移动端
+    [DeviceType.DESKTOP]: '@/layouts/BlankLayout.vue'   // web桌面端
+  },
+  'PageLayout': {
+    [DeviceType.MOBILE]: '@/layouts/MobileLayout.vue',  // h5移动端
+    [DeviceType.DESKTOP]: '@/layouts/PageLayout.vue'    // web桌面端
+  }
+};
+
+/**
+ * 创建响应式路由组件
+ */
+export function createResponsiveRoute(adapter: RouteAdapter): () => Promise<any> {
+  return async () => {
+    const deviceType = getDeviceType();
+    
+    try {
+      // 尝试加载设备特定的组件
+      if (deviceType === DeviceType.MOBILE && adapter.mobile) {
+        return await adapter.mobile();
+      }
+    } catch (error) {
+      console.warn(`Failed to load device-specific component for ${deviceType}, falling back to original:`, error);
+    }
+    
+    // 回退到原始组件(桌面端/web)
+    return await adapter.original();
+  };
+}
+
+/**
+ * 获取响应式Layout组件
+ */
+export function getResponsiveLayout(layoutName: string): () => Promise<any> {
+  const deviceType = getDeviceType();
+  const layoutMap = LAYOUT_MAP[layoutName];
+  
+  if (!layoutMap) {
+    console.warn(`Unknown layout: ${layoutName}, using original`);
+    // 使用具体的导入路径
+    switch (layoutName) {
+      case 'BlankLayout':
+        return () => import('@/layouts/BlankLayout.vue');
+      case 'NavigationLayout':
+        return () => import('@/layouts/NavigationLayout.vue');
+      case 'SidebarLayout':
+        return () => import('@/layouts/SidebarLayout.vue');
+      case 'BasicLayout':
+        return () => import('@/layouts/BasicLayout.vue');
+      case 'PageLayout':
+        return () => import('@/layouts/PageLayout.vue');
+      default:
+        throw new Error(`Unknown layout: ${layoutName}`);
+    }
+  }
+  
+  const targetLayout = layoutMap[deviceType];
+  
+  return async () => {
+    try {
+      // 使用具体的导入路径而不是动态路径
+      switch (targetLayout) {
+        case '@/layouts/BlankLayout.vue':
+          return await import('@/layouts/BlankLayout.vue');
+        case '@/layouts/NavigationLayout.vue':
+          return await import('@/layouts/NavigationLayout.vue');
+        case '@/layouts/SidebarLayout.vue':
+          return await import('@/layouts/SidebarLayout.vue');
+        case '@/layouts/BasicLayout.vue':
+          return await import('@/layouts/BasicLayout.vue');
+        case '@/layouts/MobileLayout.vue':
+          return await import('@/layouts/MobileLayout.vue');
+        case '@/layouts/PageLayout.vue':
+          return await import('@/layouts/PageLayout.vue');
+        default:
+          throw new Error(`Unknown layout path: ${targetLayout}`);
+      }
+    } catch (error) {
+      console.warn(`Failed to load responsive layout ${targetLayout}, falling back to original:`, error);
+      // 回退到原始layout
+      switch (layoutName) {
+        case 'BlankLayout':
+          return await import('@/layouts/BlankLayout.vue');
+        case 'NavigationLayout':
+          return await import('@/layouts/NavigationLayout.vue');
+        case 'SidebarLayout':
+          return await import('@/layouts/SidebarLayout.vue');
+        case 'BasicLayout':
+          return await import('@/layouts/BasicLayout.vue');
+        case 'PageLayout':
+          return await import('@/layouts/PageLayout.vue');
+        default:
+          throw new Error(`Unknown layout: ${layoutName}`);
+      }
+    }
+  };
+}
+
+/**
+ * 创建自适应路由配置
+ */
+export function createAdaptiveRoute(
+  path: string,
+  originalComponent: string,
+  layoutName?: string,
+  meta?: any
+): RouteRecordRaw {
+  // 创建具体的导入函数而不是使用动态路径
+  const getOriginalComponent = () => {
+    switch (originalComponent) {
+      case '@/views/public/login/Login.vue':
+        return import('@/views/public/login/Login.vue');
+      case '@/views/public/login/Register.vue':
+        return import('@/views/public/login/Register.vue');
+      case '@/views/public/login/ForgotPassword.vue':
+        return import('@/views/public/login/ForgotPassword.vue');
+      default:
+        throw new Error(`Unknown component: ${originalComponent}`);
+    }
+  };
+  
+  const getMobileComponent = (): (() => Promise<any>) | null => {
+    const mobilePath = MOBILE_ROUTES_MAP[path];
+    if (!mobilePath) return null;
+    
+    switch (mobilePath) {
+      case '@/views/public/login/Login.mobile.vue':
+        return () => import('@/views/public/login/Login.mobile.vue');
+      case '@/views/public/login/Register.mobile.vue':
+        return () => import('@/views/public/login/Register.mobile.vue');
+      case '@/views/public/login/ForgotPassword.mobile.vue':
+        return () => import('@/views/public/login/ForgotPassword.mobile.vue');
+      default:
+        return null;
+    }
+  };
+
+  const adapter: RouteAdapter = {
+    original: getOriginalComponent
+  };
+  
+  // 检查是否有移动端版本
+  const mobileImportFunction = getMobileComponent();
+  if (mobileImportFunction) {
+    adapter.mobile = mobileImportFunction;
+  }
+  
+  // 如果指定了Layout，应用响应式Layout
+  if (layoutName) {
+    const route: RouteRecordRaw = {
+      path,
+      component: getResponsiveLayout(layoutName),
+      children: [
+        {
+          path: '',
+          component: createResponsiveRoute(adapter),
+          meta
+        }
+      ],
+      meta
+    };
+    return route;
+  }
+  
+  const route: RouteRecordRaw = {
+    path,
+    component: createResponsiveRoute(adapter),
+    meta
+  };
+  
+  return route;
+}
+
+/**
+ * 监听屏幕尺寸变化，重新加载路由
+ */
+export function setupRouteWatcher(router: any) {
+  let currentDeviceType = getDeviceType();
+  
+  const handleResize = () => {
+    const newDeviceType = getDeviceType();
+    if (newDeviceType !== currentDeviceType) {
+      currentDeviceType = newDeviceType;
+      // 重新加载当前路由以应用新的组件
+      const currentRoute = router.currentRoute.value;
+      router.replace({
+        ...currentRoute,
+        query: { 
+          ...currentRoute.query, 
+          _refresh: Date.now() // 强制重新加载
+        }
+      });
+    }
+  };
+  
+  window.addEventListener('resize', handleResize);
+  
+  // 返回清理函数
+  return () => {
+    window.removeEventListener('resize', handleResize);
+  };
+}

schoolNewsWeb/src/views/public/ai/AIAgent.mobile.vue

@@ -0,0 +1,952 @@
+<template>
+  <div v-if="hasAgent">
+    <!-- 悬浮球 -->
+    <div class="ball-container">
+      <div class="chat-ball" @click="openDrawer">
+        <img src="@/assets/imgs/chat-ball.svg" alt="AI助手" class="ball-icon" />
+        <div v-if="unreadCount > 0" class="unread-badge">{{ unreadCount }}</div>
+      </div>
+    </div>
+
+    <!-- AI助手抽屉 -->
+    <el-drawer 
+      v-model="drawerVisible" 
+      title=""
+      direction="btt"
+      size="85%"
+      :show-close="false"
+      class="ai-drawer"
+    >
+      <!-- 自定义标题栏 -->
+      <template #header>
+        <div class="drawer-header">
+          <button @click="showHistory = !showHistory" class="hamburger-btn">
+            <div class="hamburger-lines">
+              <span class="line"></span>
+              <span class="line"></span>
+              <span class="line"></span>
+            </div>
+          </button>
+          
+          <div class="drawer-title">
+            <span>{{ agentConfig?.name || 'AI助手' }}</span>
+          </div>
+          
+          <button @click="drawerVisible = false" class="close-btn">
+            <el-icon><Close /></el-icon>
+          </button>
+        </div>
+      </template>
+
+      <!-- 抽屉内容 -->
+      <div class="drawer-content">
+        <!-- 历史对话侧边栏 -->
+        <div v-if="showHistory" class="history-sidebar">
+          <div class="history-header">
+            <h3>对话历史</h3>
+            <button @click="showHistory = false" class="close-history-btn">
+              <el-icon><Close /></el-icon>
+            </button>
+          </div>
+          
+          <div class="history-list">
+            <button class="new-chat-btn" @click="prepareNewConversation">
+              + 新建对话
+            </button>
+
+            <div v-for="conv in conversations" :key="conv.id" class="conversation-item"
+              :class="{ active: currentConversation?.id === conv.id }" @click="selectConversation(conv)">
+              <div class="conv-title">{{ conv.title || '新对话' }}</div>
+              <div class="conv-time">{{ formatTime(conv.updateTime) }}</div>
+              <button class="delete-conv-btn" @click.stop="deleteConversationConfirm(conv.id || '')">
+                ×
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- 主要聊天区域 -->
+        <div class="chat-main" :class="{ 'with-history': showHistory }">
+          <!-- 欢迎界面 -->
+          <div v-if="!currentConversation && messages.length === 0" class="welcome-content">
+            <div class="welcome-icon">
+              <img v-if="agentAvatarUrl" :src="agentAvatarUrl" alt="AI助手" class="welcome-avatar" />
+              <img v-else src="@/assets/imgs/assistant.svg" alt="AI助手" class="welcome-avatar" />
+            </div>
+            <h2>你好！我是{{ agentConfig?.name || 'AI助手' }}</h2>
+            <AIRecommend @select="handleRecommendSelect" />
+          </div>
+
+          <!-- 对话消息列表 -->
+          <div v-else class="messages-container" ref="chatContentRef">
+            <div v-for="message in messages" :key="message.id" class="message-item">
+              <!-- 用户消息 -->
+              <div v-if="message.role === 'user'" class="message user-message">
+                <div class="message-avatar">
+                  <div class="avatar-circle">👤</div>
+                </div>
+                <div class="message-content">
+                  <div class="message-text">{{ message.content }}</div>
+                  <div class="message-time">{{ formatMessageTime(message.createTime) }}</div>
+                </div>
+              </div>
+
+              <!-- AI 消息 -->
+              <div v-else class="message ai-message">
+                <div class="message-avatar">
+                  <div class="avatar-circle ai-avatar">
+                    <img v-if="agentAvatarUrl" :src="agentAvatarUrl" alt="AI助手" class="ai-avatar-img" />
+                    <img v-else src="@/assets/imgs/assistant.svg" alt="AI助手" class="ai-avatar-img" />
+                  </div>
+                </div>
+                <div class="message-content">
+                  <div v-if="message.content" class="message-text" v-html="formatMarkdown(message.content)"></div>
+                  
+                  <!-- 正在生成中的加载动画 -->
+                  <div v-if="isGenerating && messages[messages.length - 1]?.id === message.id" class="typing-indicator">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                  </div>
+                  
+                  <div class="message-time">{{ formatMessageTime(message.createTime) }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 输入区域 -->
+          <div class="input-section">
+            <div class="input-area">
+              <textarea v-model="inputMessage" class="input-text" placeholder="请输入问题..."
+                @keydown.enter.exact.prevent="sendMessage" ref="inputRef" rows="2" />
+              <div class="input-actions">
+                <button @click="sendMessage" class="send-btn" :disabled="!canSend">
+                  <el-icon><Promotion /></el-icon>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, nextTick } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { Close, Paperclip, VideoPause, Promotion } from '@element-plus/icons-vue';
+import { chatApi, chatHistoryApi, aiAgentConfigApi, fileUploadApi } from '@/apis/ai';
+import type { AiConversation, AiMessage, AiAgentConfig, AiUploadFile } from '@/types/ai';
+import { AIRecommend } from '@/views/public/ai';
+
+interface AIAgentProps {
+  agentId?: string;
+}
+
+const props = withDefaults(defineProps<AIAgentProps>(), {
+  agentId: undefined
+});
+
+// ===== 移动端特有状态 =====
+const drawerVisible = ref(false);
+const showHistory = ref(false);
+
+// ===== AI助手配置 =====
+const hasAgent = ref(true);
+const agentConfig = ref<AiAgentConfig | null>(null);
+const agentAvatarUrl = ref<string>('');
+
+// ===== 悬浮球相关 =====
+const ballRef = ref<HTMLElement | null>(null);
+const ballX = ref(0);
+const ballY = ref(0);
+const unreadCount = ref(0);
+
+// 悬浮球样式
+const ballStyle = computed(() => ({
+  right: '20px',
+  bottom: '100px',
+  position: 'fixed'
+}));
+
+// 打开抽屉
+function openDrawer() {
+  drawerVisible.value = true;
+}
+
+// ===== 对话相关 =====
+const conversations = ref<AiConversation[]>([]);
+const currentConversation = ref<AiConversation | null>(null);
+const hasMoreConversations = ref(false);
+const messages = ref<AiMessage[]>([]);
+const inputMessage = ref('');
+const isGenerating = ref(false);
+const chatContentRef = ref<HTMLElement | null>(null);
+const inputRef = ref<HTMLTextAreaElement | null>(null);
+const uploadedFiles = ref([]);
+
+// 是否可以发送
+const canSend = computed(() => {
+  return inputMessage.value.trim().length > 0 && !isGenerating.value;
+});
+
+// 加载AI助手配置
+async function loadAgentConfig() {
+  try {
+    if (props.agentId) {
+      const result = await aiAgentConfigApi.getAgentById(props.agentId);
+      if (result.success && result.data) {
+        agentConfig.value = result.data;
+      } else {
+        hasAgent.value = false;
+      }
+    } else {
+      const result = await aiAgentConfigApi.listEnabledAgents();
+      if (result.success && result.dataList && result.dataList.length > 0) {
+        agentConfig.value = result.dataList[0];
+      } else {
+        hasAgent.value = false;
+      }
+    }
+  } catch (error) {
+    console.error('加载AI助手配置失败:', error);
+  }
+}
+
+// 加载最近对话
+async function loadRecentConversations() {
+  try {
+    const result = await chatHistoryApi.getRecentConversations(10);
+    if (result.success) {
+      const conversationList = result.dataList || result.data;
+      if (conversationList && Array.isArray(conversationList)) {
+        conversations.value = conversationList;
+      } else {
+        conversations.value = [];
+      }
+    }
+  } catch (error) {
+    console.error('加载对话历史失败:', error);
+  }
+}
+
+// 准备新对话
+function prepareNewConversation() {
+  currentConversation.value = null;
+  messages.value = [];
+  showHistory.value = false;
+  ElMessage.success('已准备新对话');
+}
+
+// 选择对话
+async function selectConversation(conv: AiConversation) {
+  currentConversation.value = conv;
+  showHistory.value = false;
+  if (conv.id) {
+    await loadMessages(conv.id);
+  }
+}
+
+// 删除对话确认
+async function deleteConversationConfirm(conversationId: string) {
+  try {
+    await ElMessageBox.confirm('确定要删除这个对话吗？', '提示', {
+      confirmButtonText: '删除',
+      cancelButtonText: '取消',
+      type: 'warning'
+    });
+
+    const result = await chatApi.deleteConversation(conversationId);
+    if (result.success) {
+      conversations.value = conversations.value.filter(c => c.id !== conversationId);
+      if (currentConversation.value?.id === conversationId) {
+        prepareNewConversation();
+      }
+      ElMessage.success('对话已删除');
+    }
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('删除对话失败:', error);
+      ElMessage.error('删除对话失败');
+    }
+  }
+}
+
+// 加载更多对话
+function loadMoreConversations() {
+  // TODO: 实现分页加载
+}
+
+// 加载消息
+async function loadMessages(conversationId: string) {
+  try {
+    const result = await chatApi.listMessages(conversationId);
+    if (result.success) {
+      const messageList = result.dataList || result.data || [];
+      messages.value = Array.isArray(messageList) ? messageList : [];
+      await nextTick();
+      scrollToBottom();
+    }
+  } catch (error) {
+    console.error('加载消息失败:', error);
+  }
+}
+
+// 发送消息
+async function sendMessage() {
+  if (!canSend.value) return;
+
+  const message = inputMessage.value.trim();
+  if (!message) return;
+
+  // 如果没有当前对话，创建新对话
+  if (!currentConversation.value) {
+    const title = message.length > 20 ? message.substring(0, 20) + '...' : message;
+    const newConv = await createNewConversation(title);
+    if (!newConv) {
+      ElMessage.error('创建对话失败');
+      return;
+    }
+  }
+
+  // 添加用户消息到界面
+  const userMessage: AiMessage = {
+    id: `temp-user-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+    conversationID: currentConversation.value?.id || '',
+    role: 'user',
+    content: message,
+    createTime: new Date().toISOString(),
+    updateTime: new Date().toISOString()
+  };
+
+  messages.value.push(userMessage);
+  inputMessage.value = '';
+  
+  await nextTick();
+  scrollToBottom();
+
+  isGenerating.value = true;
+  
+  // 添加AI消息
+  const aiMessage: AiMessage = {
+    id: `temp-ai-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+    conversationID: currentConversation.value?.id || '',
+    role: 'assistant',
+    content: '',
+    createTime: new Date().toISOString(),
+    updateTime: new Date().toISOString()
+  };
+  
+  messages.value.push(aiMessage);
+  
+  try {
+    let aiMessageContent = '';
+
+    chatApi.streamChat({
+      agentId: agentConfig.value!.id!,
+      conversationId: currentConversation.value?.id || '',
+      query: message,
+      files: []
+    }, {
+      onStart: () => {},
+      onInit: (initData) => {
+        const lastMessage = messages.value[messages.value.length - 1];
+        if (lastMessage && lastMessage.role === 'assistant') {
+          lastMessage.id = initData.messageId;
+        }
+      },
+      onMessage: (chunk: string) => {
+        if (chunk) {
+          aiMessageContent += chunk;
+        }
+        const aiMessageIndex = messages.value.length - 1;
+        if (aiMessageIndex >= 0) {
+          messages.value[aiMessageIndex].content = aiMessageContent;
+        }
+        nextTick(() => scrollToBottom());
+      },
+      onDifyEvent: () => {},
+      onMessageEnd: () => {
+        isGenerating.value = false;
+      },
+      onError: (error: Error) => {
+        console.error('对话失败:', error);
+        ElMessage.error('对话失败，请重试');
+        isGenerating.value = false;
+      }
+    });
+  } catch (error) {
+    console.error('发送消息失败:', error);
+    ElMessage.error('发送消息失败');
+    isGenerating.value = false;
+  }
+}
+
+// 创建新对话
+async function createNewConversation(title?: string) {
+  try {
+    const result = await chatApi.createConversation(agentConfig.value!.id!, title);
+    if (result.success && result.data) {
+      currentConversation.value = result.data;
+      conversations.value.unshift(result.data);
+      return result.data;
+    }
+  } catch (error) {
+    console.error('创建对话失败:', error);
+    return null;
+  }
+}
+
+// 处理推荐选择
+function handleRecommendSelect(text: string) {
+  inputMessage.value = text;
+  sendMessage();
+}
+
+// 滚动到底部
+function scrollToBottom() {
+  if (chatContentRef.value) {
+    chatContentRef.value.scrollTop = chatContentRef.value.scrollHeight;
+  }
+}
+
+// 工具函数
+function formatTime(dateStr: string | undefined) {
+  if (!dateStr) return '';
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+  const minutes = Math.floor(diff / 60000);
+  const hours = Math.floor(diff / 3600000);
+  const days = Math.floor(diff / 86400000);
+
+  if (minutes < 1) return '刚刚';
+  if (minutes < 60) return `${minutes}分钟前`;
+  if (hours < 24) return `${hours}小时前`;
+  if (days < 7) return `${days}天前`;
+  return date.toLocaleDateString();
+}
+
+function formatMessageTime(dateStr: string | undefined) {
+  if (!dateStr) return '';
+  const date = new Date(dateStr);
+  return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
+}
+
+function formatMarkdown(content: string) {
+  let html = content;
+  html = html.replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>');
+  html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+  html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+  html = html.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+  html = html.replace(/\n/g, '<br>');
+  return html;
+}
+
+// 生命周期
+onMounted(() => {
+  loadAgentConfig();
+  loadRecentConversations();
+});
+</script>
+
+<style scoped lang="scss">
+// 悬浮球样式
+.ball-container {
+  position: fixed;
+  right: 16px;
+  bottom: 80px;
+  z-index: 9999;
+}
+
+.chat-ball {
+  width: 56px;
+  height: 56px;
+  cursor: pointer;
+  position: relative;
+  transition: transform 0.3s ease;
+  user-select: none;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  .ball-icon {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  .unread-badge {
+    position: absolute;
+    top: 0;
+    right: 0;
+    background: #E7000B;
+    color: white;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 11px;
+    font-weight: bold;
+  }
+}
+
+// 抽屉样式
+:deep(.ai-drawer) {
+  .el-drawer__header {
+    padding: 0;
+    margin: 0;
+    border-bottom: 1px solid #E5E7EB;
+  }
+
+  .el-drawer__body {
+    padding: 0;
+  }
+}
+
+.drawer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  background: #fff;
+
+  .hamburger-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 8px;
+    
+    .hamburger-lines {
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+      
+      .line {
+        width: 18px;
+        height: 2px;
+        background: #141F38;
+        transition: all 0.3s;
+      }
+    }
+  }
+
+  .drawer-title {
+    flex: 1;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 600;
+    color: #141F38;
+  }
+
+  .close-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 8px;
+    color: #6B7280;
+    font-size: 20px;
+  }
+}
+
+.drawer-content {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+
+// 历史对话侧边栏
+.history-sidebar {
+  width: 280px;
+  background: #F9FAFB;
+  border-right: 1px solid #E5E7EB;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 10;
+  
+  .history-header {
+    padding: 16px 20px;
+    border-bottom: 1px solid #E5E7EB;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    h3 {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: #101828;
+    }
+
+    .close-history-btn {
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: #6B7280;
+    }
+  }
+
+  .history-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+  }
+
+  .new-chat-btn {
+    width: 100%;
+    padding: 12px;
+    background: #E7000B;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 16px;
+
+    &:hover {
+      background: #C90009;
+    }
+  }
+
+  .conversation-item {
+    padding: 12px;
+    background: white;
+    border-radius: 8px;
+    margin-bottom: 8px;
+    cursor: pointer;
+    position: relative;
+    transition: all 0.2s;
+
+    &:hover {
+      background: #EFF6FF;
+
+      .delete-conv-btn {
+        opacity: 1;
+      }
+    }
+
+    &.active {
+      background: #E7000B;
+      color: white;
+
+      .conv-title,
+      .conv-time {
+        color: white;
+      }
+    }
+
+    .conv-title {
+      font-size: 14px;
+      font-weight: 500;
+      color: #101828;
+      margin-bottom: 4px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .conv-time {
+      font-size: 12px;
+      color: #6B7280;
+    }
+
+    .delete-conv-btn {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      background: rgba(0, 0, 0, 0.1);
+      border: none;
+      border-radius: 50%;
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+      opacity: 0;
+      transition: opacity 0.2s;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.2);
+      }
+    }
+  }
+
+  .load-more {
+    text-align: center;
+    padding: 12px;
+
+    button {
+      background: none;
+      border: none;
+      color: #E7000B;
+      cursor: pointer;
+      font-size: 14px;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+// 主聊天区域
+.chat-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  
+  &.with-history {
+    margin-left: 280px;
+  }
+
+  .welcome-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    text-align: center;
+    overflow-y: auto;
+
+    .welcome-icon {
+      margin-bottom: 20px;
+      
+      .welcome-avatar {
+        width: 64px;
+        height: 64px;
+        border-radius: 50%;
+        object-fit: cover;
+      }
+    }
+
+    h2 {
+      font-size: 20px;
+      font-weight: 600;
+      color: #101828;
+      margin: 0 0 20px 0;
+    }
+  }
+
+  .messages-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+    
+    .message-item {
+      margin-bottom: 20px;
+
+      .message {
+        display: flex;
+        gap: 12px;
+        align-items: flex-start;
+
+        .message-avatar {
+          flex-shrink: 0;
+
+          .avatar-circle {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: #E5E7EB;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            overflow: hidden;
+
+            &.ai-avatar {
+              background: #EFF6FF;
+            }
+
+            .ai-avatar-img {
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+            }
+          }
+        }
+
+        .message-content {
+          flex: 1;
+          max-width: calc(100% - 50px);
+
+          .message-text {
+            padding: 10px 14px;
+            border-radius: 12px;
+            font-size: 14px;
+            line-height: 1.5;
+            word-wrap: break-word;
+            
+            :deep(code) {
+              background: rgba(0, 0, 0, 0.1);
+              padding: 2px 4px;
+              border-radius: 4px;
+              font-family: 'Courier New', monospace;
+              font-size: 12px;
+            }
+
+            :deep(pre) {
+              background: #1F2937;
+              color: #F9FAFB;
+              padding: 12px;
+              border-radius: 8px;
+              overflow-x: auto;
+              margin: 8px 0;
+
+              code {
+                background: none;
+                color: inherit;
+                padding: 0;
+              }
+            }
+          }
+
+          .message-time {
+            font-size: 11px;
+            color: #9CA3AF;
+            margin-top: 4px;
+            padding-left: 4px;
+          }
+        }
+      }
+
+      // 用户消息靠右
+      .user-message {
+        flex-direction: row-reverse;
+
+        .message-content {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-end;
+
+          .message-text {
+            background: #E7000B;
+            color: white;
+            max-width: 240px;
+          }
+        }
+      }
+
+      // AI消息靠左
+      .ai-message {
+        .message-content {
+          .message-text {
+            background: #F3F4F6;
+            color: #101828;
+            max-width: 280px;
+          }
+        }
+      }
+    }
+    
+    // 加载动画
+    .typing-indicator {
+      display: flex;
+      gap: 4px;
+      padding: 8px 0;
+      width: fit-content;
+
+      span {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #9CA3AF;
+        animation: typing 1.4s infinite;
+
+        &:nth-child(2) {
+          animation-delay: 0.2s;
+        }
+
+        &:nth-child(3) {
+          animation-delay: 0.4s;
+        }
+      }
+    }
+  }
+
+  .input-section {
+    border-top: 1px solid #E5E7EB;
+    padding: 16px 20px;
+    background: white;
+    flex-shrink: 0;
+
+    .input-area {
+      display: flex;
+      gap: 12px;
+      align-items: flex-end;
+
+      .input-text {
+        flex: 1;
+        padding: 12px 16px;
+        border: 1px solid #D1D5DB;
+        border-radius: 20px;
+        font-size: 14px;
+        resize: none;
+        max-height: 100px;
+        font-family: inherit;
+        background: #F9FAFB;
+
+        &:focus {
+          outline: none;
+          border-color: #E7000B;
+          background: white;
+        }
+
+        &::placeholder {
+          color: #9CA3AF;
+        }
+      }
+
+      .input-actions {
+        .send-btn {
+          width: 44px;
+          height: 44px;
+          background: #E7000B;
+          border: none;
+          border-radius: 50%;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: white;
+          transition: all 0.2s;
+
+          &:hover:not(:disabled) {
+            background: #C90009;
+            transform: scale(1.05);
+          }
+
+          &:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes typing {
+  0%, 60%, 100% {
+    transform: translateY(0);
+  }
+  30% {
+    transform: translateY(-6px);
+  }
+}
+</style>

schoolNewsWeb/src/views/public/ai/AIRecommend.vue

@@ -40,7 +40,8 @@ type TabName = 'top' | 'ideological'
 const activeName = ref<TabName>('top')
 const handleClick = (tab: any, event: Event) => {
     console.log(tab, event)
-    loadData()
+    // 直接使用tab.props.name而不是等待activeName更新
+    loadDataByType(tab.props.name as TabName)
 }
 const showData = ref<ResourceRecommendVO[]>([])
 
@@ -51,12 +52,16 @@ function buildUrl(item: ResourceRecommendVO) {
     return `${PUBLIC_WEB_PATH}/article/show?articleId=${item.resourceID}`;
 }
 
-async function loadData(){
+async function loadDataByType(type: TabName){
-    resourceRecommendApi.getRecommendsByType(tabMap[activeName.value], limit).then((res) => {
+    resourceRecommendApi.getRecommendsByType(tabMap[type], limit).then((res) => {
         showData.value = res.dataList || []
     })
 }
 
+async function loadData(){
+    await loadDataByType(activeName.value)
+}
+
 onMounted(() => {
     loadData().then(() => {
         console.log()

schoolNewsWeb/src/views/public/ai/index.ts

@@ -1,2 +1,3 @@
 export { default as AIAgent} from './AIAgent.vue';
+export { default as AIAgentMobile} from './AIAgent.mobile.vue';
 export { default as AIRecommend} from './AIRecommend.vue';

schoolNewsWeb/src/views/public/login/ForgotPassword.mobile.vue

@@ -0,0 +1,710 @@
+<template>
+  <div class="login-container">
+    <!-- 左侧励志区域 -->
+    <div class="login-left">
+      <div class="left-content">
+        <div class="quote-text">
+          <span class="quote-mark">"</span>
+          <div class="quote-content">
+            <p>不负时代韶华，</p>
+            <p>争做时代新人。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 右侧忘记密码表单区域 -->
+    <div class="login-right">
+      <div class="login-form-container">
+        <!-- Logo和标题区域 -->
+        <div class="login-header">
+          <div class="logo-section">
+            <div class="logo">
+              <img src="@/assets/imgs/logo-icon.svg" alt="Logo" />
+            </div>
+            <h1 class="platform-title">红色思政学习平台</h1>
+          </div>
+        </div>
+        
+        <!-- 重置密码方式切换 -->
+        <div class="reset-type-tabs">
+          <div 
+            :class="['tab-item', { active: resetType === 'phone' }]" 
+            @click="switchResetType('phone')"
+          >
+            手机号重置
+          </div>
+          <div 
+            :class="['tab-item', { active: resetType === 'email' }]" 
+            @click="switchResetType('email')"
+          >
+            邮箱重置
+          </div>
+        </div>
+        
+        <!-- 忘记密码表单 -->
+        <el-form
+          ref="forgotFormRef"
+          :model="forgotForm"
+          :rules="forgotRules"
+          class="forgot-form"
+          @submit.prevent="handleResetPassword"
+        >
+          <p class="form-title">重置密码</p>
+          
+          <!-- 手机号重置 -->
+          <template v-if="resetType === 'phone'">
+            <el-form-item prop="phone">
+              <el-input
+                v-model="forgotForm.phone"
+                placeholder="请输入手机号"
+                class="form-input"
+              />
+            </el-form-item>
+            
+            <el-form-item prop="smsCode">
+              <div class="captcha-input-container">
+                <el-input
+                  v-model="forgotForm.smsCode"
+                  placeholder="请输入手机验证码"
+                  class="form-input captcha-input"
+                />
+                <el-button
+                  :disabled="smsCountdown > 0"
+                  @click="handleSendSmsCode"
+                  class="send-captcha-btn"
+                >
+                  {{ smsCountdown > 0 ? `${smsCountdown}s` : '获取验证码' }}
+                </el-button>
+              </div>
+            </el-form-item>
+          </template>
+          
+          <!-- 邮箱重置 -->
+          <template v-else>
+            <el-form-item prop="email">
+              <el-input
+                v-model="forgotForm.email"
+                placeholder="请输入邮箱"
+                class="form-input"
+              />
+            </el-form-item>
+            
+            <el-form-item prop="emailCode">
+              <div class="captcha-input-container">
+                <el-input
+                  v-model="forgotForm.emailCode"
+                  placeholder="请输入邮箱验证码"
+                  class="form-input captcha-input"
+                />
+                <el-button
+                  :disabled="emailCountdown > 0"
+                  @click="handleSendEmailCode"
+                  class="send-captcha-btn"
+                >
+                  {{ emailCountdown > 0 ? `${emailCountdown}s` : '获取验证码' }}
+                </el-button>
+              </div>
+            </el-form-item>
+          </template>
+          
+          <!-- 新密码 -->
+          <el-form-item prop="newPassword">
+            <el-input
+              v-model="forgotForm.newPassword"
+              type="password"
+              placeholder="请输入新密码（至少6个字符）"
+              show-password
+              class="form-input"
+            />
+          </el-form-item>
+          
+          <el-form-item prop="confirmPassword">
+            <el-input
+              v-model="forgotForm.confirmPassword"
+              type="password"
+              placeholder="请再次输入新密码"
+              show-password
+              class="form-input"
+            />
+          </el-form-item>
+          
+          <el-form-item>
+            <el-button
+              type="primary"
+              :loading="resetLoading"
+              @click="handleResetPassword"
+              class="reset-button"
+            >
+              重置密码
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      
+      <!-- 底部信息 -->
+      <div class="login-footer">
+        <p class="register-link">
+          想起密码？<span class="register-link-text" @click="$router.push('/login')">立即登录</span>
+        </p>
+        <p class="copyright">
+          Copyright ©红色思政智能体平台
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
+import { authApi } from '@/apis/system/auth';
+
+// 响应式引用
+const forgotFormRef = ref<FormInstance>();
+const resetLoading = ref(false);
+const smsCountdown = ref(0);
+const emailCountdown = ref(0);
+let smsTimer: number | null = null;
+let emailTimer: number | null = null;
+
+// Composition API
+const router = useRouter();
+
+// 重置方式：phone-手机号，email-邮箱
+const resetType = ref<'phone' | 'email'>('phone');
+
+// 表单数据
+const forgotForm = reactive({
+  phone: '',
+  email: '',
+  smsCode: '',
+  emailCode: '',
+  newPassword: '',
+  confirmPassword: '',
+  smsSessionId: '',
+  emailSessionId: ''
+});
+
+// 切换重置方式
+const switchResetType = (type: 'phone' | 'email') => {
+  resetType.value = type;
+  // 清空表单验证
+  forgotFormRef.value?.clearValidate();
+  // 清空相关表单数据
+  if (type === 'phone') {
+    forgotForm.email = '';
+    forgotForm.emailCode = '';
+    forgotForm.emailSessionId = '';
+  } else {
+    forgotForm.phone = '';
+    forgotForm.smsCode = '';
+    forgotForm.smsSessionId = '';
+  }
+};
+
+// 自定义验证器
+const validateNewPassword = (rule: any, value: string, callback: any) => {
+  if (value === '') {
+    callback(new Error('请输入新密码'));
+  } else if (value.length < 6) {
+    callback(new Error('密码至少6个字符'));
+  } else {
+    if (forgotForm.confirmPassword !== '') {
+      forgotFormRef.value?.validateField('confirmPassword');
+    }
+    callback();
+  }
+};
+
+const validateConfirmPassword = (rule: any, value: string, callback: any) => {
+  if (value === '') {
+    callback(new Error('请再次输入新密码'));
+  } else if (value !== forgotForm.newPassword) {
+    callback(new Error('两次输入的密码不一致'));
+  } else {
+    callback();
+  }
+};
+
+// 表单验证规则
+const forgotRules: FormRules = {
+  phone: [
+    { 
+      validator: (rule: any, value: string, callback: any) => {
+        if (resetType.value === 'phone') {
+          if (value === '') {
+            callback(new Error('请输入手机号'));
+          } else if (!/^1[3-9]\d{9}$/.test(value)) {
+            callback(new Error('请输入正确的手机号'));
+          } else {
+            callback();
+          }
+        } else {
+          callback();
+        }
+      }, 
+      trigger: 'blur' 
+    }
+  ],
+  email: [
+    { 
+      validator: (rule: any, value: string, callback: any) => {
+        if (resetType.value === 'email') {
+          if (value === '') {
+            callback(new Error('请输入邮箱'));
+          } else if (!/^[A-Za-z0-9+_.-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/.test(value)) {
+            callback(new Error('请输入正确的邮箱地址'));
+          } else {
+            callback();
+          }
+        } else {
+          callback();
+        }
+      }, 
+      trigger: 'blur' 
+    }
+  ],
+  smsCode: [
+    { 
+      validator: (rule: any, value: string, callback: any) => {
+        if (resetType.value === 'phone') {
+          if (value === '') {
+            callback(new Error('请输入手机验证码'));
+          } else if (value.length !== 6) {
+            callback(new Error('验证码为6位'));
+          } else {
+            callback();
+          }
+        } else {
+          callback();
+        }
+      }, 
+      trigger: 'blur' 
+    }
+  ],
+  emailCode: [
+    { 
+      validator: (rule: any, value: string, callback: any) => {
+        if (resetType.value === 'email') {
+          if (value === '') {
+            callback(new Error('请输入邮箱验证码'));
+          } else if (value.length !== 6) {
+            callback(new Error('验证码为6位'));
+          } else {
+            callback();
+          }
+        } else {
+          callback();
+        }
+      }, 
+      trigger: 'blur' 
+    }
+  ],
+  newPassword: [
+    { required: true, validator: validateNewPassword, trigger: 'blur' }
+  ],
+  confirmPassword: [
+    { required: true, validator: validateConfirmPassword, trigger: 'blur' }
+  ]
+};
+
+// 发送手机验证码
+const handleSendSmsCode = async () => {
+  // 先验证手机号
+  try {
+    await forgotFormRef.value?.validateField('phone');
+  } catch (error) {
+    return;
+  }
+  
+  try {
+    const result = await authApi.sendSmsCode(forgotForm.phone);
+    if (result.code === 200 && result.data) {
+      // 保存sessionId
+      forgotForm.smsSessionId = result.data.sessionId;
+      ElMessage.success(result.data.message || '验证码已发送');
+      
+      // 开始倒计时
+      smsCountdown.value = 60;
+      smsTimer = window.setInterval(() => {
+        smsCountdown.value--;
+        if (smsCountdown.value <= 0 && smsTimer) {
+          clearInterval(smsTimer);
+          smsTimer = null;
+        }
+      }, 1000);
+    } else {
+      ElMessage.error(result.message || '发送验证码失败');
+    }
+  } catch (error: any) {
+    console.error('发送验证码失败:', error);
+    ElMessage.error(error.message || '发送验证码失败');
+  }
+};
+
+// 发送邮箱验证码
+const handleSendEmailCode = async () => {
+  // 先验证邮箱
+  try {
+    await forgotFormRef.value?.validateField('email');
+  } catch (error) {
+    return;
+  }
+  
+  try {
+    const result = await authApi.sendEmailCode(forgotForm.email);
+    if (result.code === 200 && result.data) {
+      // 保存sessionId
+      forgotForm.emailSessionId = result.data.sessionId;
+      ElMessage.success(result.data.message || '验证码已发送到邮箱');
+      
+      // 开始倒计时
+      emailCountdown.value = 60;
+      emailTimer = window.setInterval(() => {
+        emailCountdown.value--;
+        if (emailCountdown.value <= 0 && emailTimer) {
+          clearInterval(emailTimer);
+          emailTimer = null;
+        }
+      }, 1000);
+    } else {
+      ElMessage.error(result.message || '发送验证码失败');
+    }
+  } catch (error: any) {
+    console.error('发送验证码失败:', error);
+    ElMessage.error(error.message || '发送验证码失败');
+  }
+};
+
+// 重置密码处理
+const handleResetPassword = async () => {
+  if (!forgotFormRef.value) return;
+  
+  try {
+    const valid = await forgotFormRef.value.validate();
+    if (!valid) return;
+    
+    resetLoading.value = true;
+    
+    // 调用重置密码API (暂时模拟成功响应)
+    // TODO: 实现后端resetPassword API
+    const result = { code: 200, message: '密码重置成功！请用新密码登录' };
+    
+    if (result.code === 200) {
+      ElMessage.success('密码重置成功！请用新密码登录');
+      
+      // 密码重置成功后跳转到登录页
+      setTimeout(() => {
+        router.push('/login');
+      }, 1500);
+    } else {
+      ElMessage.error(result.message || '密码重置失败，请重试');
+    }
+    
+  } catch (error: any) {
+    console.error('密码重置失败:', error);
+    ElMessage.error(error.message || '密码重置失败，请重试');
+  } finally {
+    resetLoading.value = false;
+  }
+};
+
+// 组件卸载时清除定时器
+onUnmounted(() => {
+  if (smsTimer) {
+    clearInterval(smsTimer);
+  }
+  if (emailTimer) {
+    clearInterval(emailTimer);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+// 移动端忘记密码页面样式
+.login-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-height: 100vh;
+    background: #FFFFFF;
+    margin: 0 auto;
+    box-shadow: 0px 4px 30px 0px rgba(176, 196, 225, 0.25);
+    overflow: hidden;
+}
+
+.login-left {
+    height: 30%;
+    display: flex;
+    padding: 30px 44px;
+    background: url(@/assets/imgs/login-bg.png);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    
+    .left-content {
+        width: 100%;
+        display: flex;
+        align-items: center;
+    }
+    
+    .quote-text {
+        color: #FFF2D3;
+        
+        .quote-mark {
+            font-family: 'Arial Black', sans-serif;
+            font-weight: 900;
+            font-size: 38.9px;
+            line-height: 0.74;
+            display: block;
+            margin-bottom: 20px;
+        }
+        
+        .quote-content {
+            p {
+                font-family: 'Source Han Sans SC', sans-serif;
+                font-weight: 700;
+                font-size: 28px;
+                line-height: 1.42;
+                margin: 0;
+            }
+        }
+    }
+}
+
+.login-right {
+    flex: 1;
+    height: 70%;
+    background: #FFFFFF;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 30px 44px;
+    position: relative;
+    border-radius: 20px 20px 0 0;
+    margin-top: -20px;
+    z-index: 2;
+}
+
+.login-form-container {
+    width: 100%;
+    max-width: 287px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding-top: 30px;
+}
+
+.login-header {
+    margin-bottom: 32px;
+    
+    .logo-section {
+        display: flex;
+        align-items: center;
+        gap: 11px;
+        justify-content: center;
+        
+        .logo {
+            width: 36px;
+            height: 36px;
+            background: #C62828;
+            border-radius: 6px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 3px;
+            
+            img {
+                width: 30px;
+                height: 30px;
+            }
+        }
+        
+        .platform-title {
+            font-family: 'Taipei Sans TC Beta', sans-serif;
+            font-weight: 700;
+            font-size: 20px;
+            line-height: 1.31;
+            color: #141F38;
+            margin: 0;
+        }
+    }
+}
+
+.reset-type-tabs {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 24px;
+    
+    .tab-item {
+        flex: 1;
+        padding: 12px 16px;
+        text-align: center;
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.65);
+        background: #F2F3F5;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.3s;
+        
+        &:hover {
+            background: #E8E8E8;
+        }
+        
+        &.active {
+            color: #FFFFFF;
+            background: #C62828;
+            font-weight: 500;
+        }
+    }
+}
+
+.forgot-form {
+    width: 100%;
+    
+    .form-title {
+        font-family: "Source Han Sans SC";
+        font-weight: 600;
+        font-size: 16px;
+        line-height: 1.5;
+        color: #141F38;
+        margin: 0 0 24px 0;
+        text-align: center;
+    }
+    
+    .form-input {
+        width: 100%;
+        height: 48px;
+        background: #F2F3F5;
+        border: none;
+        border-radius: 12px;
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.65);
+        
+        :deep(.el-input__wrapper) {
+            background: #F2F3F5;
+            border: none;
+            border-radius: 12px;
+            padding: 0 16px;
+            box-shadow: none;
+        }
+        
+        :deep(.el-input__inner) {
+            color: rgba(0, 0, 0, 0.65);
+            
+            &::placeholder {
+                color: rgba(0, 0, 0, 0.3);
+            }
+        }
+        
+        :deep(.el-input__wrapper:focus),
+        :deep(.el-input__wrapper.is-focus) {
+            background: #FFFFFF;
+            border: 1px solid #C62828;
+            box-shadow: none;
+        }
+    }
+    
+    .captcha-input-container {
+        display: flex;
+        gap: 8px;
+        width: 100%;
+        
+        .captcha-input {
+            flex: 1;
+        }
+        
+        .send-captcha-btn {
+            height: 48px;
+            padding: 0 12px;
+            background: #C62828;
+            border: none;
+            border-radius: 12px;
+            color: #FFFFFF;
+            font-size: 12px;
+            white-space: nowrap;
+            min-width: 90px;
+            
+            &:hover:not(:disabled) {
+                background: #B71C1C;
+            }
+            
+            &:disabled {
+                background: #D9D9D9;
+                color: rgba(0, 0, 0, 0.25);
+                cursor: not-allowed;
+            }
+        }
+    }
+    
+    .reset-button {
+        width: 100%;
+        height: 46px;
+        background: #C62828;
+        border: none;
+        border-radius: 12px;
+        color: #FFFFFF;
+        font-family: "Source Han Sans SC";
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 1.4;
+        margin-bottom: 16px;
+        
+        &:hover {
+            background: #B71C1C;
+        }
+    }
+}
+
+.login-footer {
+    width: 100%;
+    max-width: 287px;
+    margin-top: auto;
+    padding-bottom: 24px;
+    
+    .register-link {
+        font-family: "Source Han Sans SC";
+        font-weight: 600;
+        font-size: 12px;
+        line-height: 1.83;
+        color: #141F38;
+        text-align: center;
+        margin: 0 0 16px 0;
+     
+        .register-link-text {
+            cursor: pointer;
+            color: #ff0000;
+            
+            &:hover {
+                color: #C62828;
+            }
+        }
+    }
+    
+    .copyright {
+        font-family: "Source Han Sans SC";
+        font-size: 12px;
+        line-height: 2;
+        color: #D9D9D9;
+        text-align: center;
+    }
+}
+
+// Element Plus 组件样式覆盖
+:deep(.el-form-item) {
+    margin-bottom: 16px;
+    
+    .el-form-item__content {
+        line-height: normal;
+    }
+}
+
+:deep(.el-form-item__error) {
+    font-size: 12px;
+    color: #F56C6C;
+    padding-top: 4px;
+}
+</style>

schoolNewsWeb/src/views/public/login/ForgotPassword.vue

@@ -1,25 +1,153 @@
 <template>
   <div class="forgot-password-container">
-    <div class="forgot-password-box">
+    <!-- 左侧励志区域 -->
+    <div class="forgot-password-left">
+      <div class="left-content">
+        <div class="quote-text">
+          <span class="quote-mark">"</span>
+          <div class="quote-content">
+            <p>不负时代韶华，</p>
+            <p>争做时代新人。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 右侧忘记密码表单区域 -->
+    <div class="forgot-password-right">
+      <div class="forgot-password-form-container">
+        <!-- Logo和标题区域 -->
         <div class="forgot-password-header">
+          <div class="logo-section">
             <div class="logo">
-          <img src="@/assets/logo.png" alt="Logo" />
+              <img src="@/assets/imgs/logo-icon.svg" alt="Logo" />
             </div>
-        <h1 class="title">找回密码</h1>
+            <h1 class="platform-title">红色思政学习平台</h1>
-        <p class="subtitle">重置您的账户密码</p>
+          </div>
+          <h2 class="forgot-password-title">找回密码</h2>
         </div>
         
-      <div class="forgot-password-form">
+        <!-- 重置密码方式切换 -->
-        <!-- 找回密码表单内容 -->
+        <div class="reset-type-tabs">
-        <div class="form-placeholder">
+          <div 
-          <p>找回密码功能开发中...</p>
+            :class="['tab-item', { active: resetType === 'phone' }]" 
+            @click="switchResetType('phone')"
+          >
+            手机号重置
+          </div>
+          <div 
+            :class="['tab-item', { active: resetType === 'email' }]" 
+            @click="switchResetType('email')"
+          >
+            邮箱重置
           </div>
         </div>
         
+        <!-- 忘记密码表单 -->
+        <el-form
+          ref="forgotFormRef"
+          :model="forgotForm"
+          :rules="forgotRules"
+          class="forgot-password-form"
+          @submit.prevent="handleResetPassword"
+        >
+          <!-- 手机号重置 -->
+          <template v-if="resetType === 'phone'">
+            <el-form-item prop="phone">
+              <el-input
+                v-model="forgotForm.phone"
+                placeholder="请输入手机号"
+                class="form-input"
+              />
+            </el-form-item>
+            
+            <el-form-item prop="smsCode">
+              <div class="code-input-wrapper">
+                <el-input
+                  v-model="forgotForm.smsCode"
+                  placeholder="请输入手机验证码"
+                  class="form-input code-input"
+                />
+                <el-button
+                  :disabled="smsCountdown > 0"
+                  @click="handleSendSmsCode"
+                  class="code-button"
+                >
+                  {{ smsCountdown > 0 ? `${smsCountdown}s` : '获取验证码' }}
+                </el-button>
+              </div>
+            </el-form-item>
+          </template>
+          
+          <!-- 邮箱重置 -->
+          <template v-else>
+            <el-form-item prop="email">
+              <el-input
+                v-model="forgotForm.email"
+                placeholder="请输入邮箱"
+                class="form-input"
+              />
+            </el-form-item>
+            
+            <el-form-item prop="emailCode">
+              <div class="code-input-wrapper">
+                <el-input
+                  v-model="forgotForm.emailCode"
+                  placeholder="请输入邮箱验证码"
+                  class="form-input code-input"
+                />
+                <el-button
+                  :disabled="emailCountdown > 0"
+                  @click="handleSendEmailCode"
+                  class="code-button"
+                >
+                  {{ emailCountdown > 0 ? `${emailCountdown}s` : '获取验证码' }}
+                </el-button>
+              </div>
+            </el-form-item>
+          </template>
+          
+          <!-- 新密码 -->
+          <el-form-item prop="newPassword">
+            <el-input
+              v-model="forgotForm.newPassword"
+              type="password"
+              placeholder="请输入新密码（至少6个字符）"
+              show-password
+              class="form-input"
+            />
+          </el-form-item>
+          
+          <el-form-item prop="confirmPassword">
+            <el-input
+              v-model="forgotForm.confirmPassword"
+              type="password"
+              placeholder="请再次输入新密码"
+              show-password
+              class="form-input"
+            />
+          </el-form-item>
+          
+          <el-form-item>
+            <el-button
+              type="primary"
+              :loading="resetLoading"
+              @click="handleResetPassword"
+              class="reset-button"
+            >
+              重置密码
+            </el-button>
+          </el-form-item>
+        </el-form>
+        
+      </div>
+      <!-- 底部信息 -->
       <div class="forgot-password-footer">
-        <p>
+        <p class="login-link">
-          想起密码了？
+          想起密码了？<span class="login-link-text" @click="goToLogin">返回登录</span>
-          <el-link type="primary" @click="goToLogin">返回登录</el-link>
+        </p>
+        <p class="copyright">
+          Copyright ©红色思政智能体平台
         </p>
       </div>
     </div>
@@ -27,23 +155,544 @@
 </template>
 
 <script setup lang="ts">
+import { ref, reactive } from 'vue';
 import { useRouter } from 'vue-router';
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
+import { authApi } from '@/apis/system/auth';
 
+// 响应式引用
+const forgotFormRef = ref<FormInstance>();
+const resetLoading = ref(false);
+const smsCountdown = ref(0);
+const emailCountdown = ref(0);
+let smsTimer: number | null = null;
+let emailTimer: number | null = null;
+
+// Composition API
 const router = useRouter();
 
+// 重置方式：phone-手机号，email-邮箱
+const resetType = ref<'phone' | 'email'>('phone');
+
+// 表单数据
+const forgotForm = reactive({
+  phone: '',
+  email: '',
+  smsCode: '',
+  emailCode: '',
+  newPassword: '',
+  confirmPassword: '',
+  smsSessionId: '',
+  emailSessionId: ''
+});
+
+// 切换重置方式
+const switchResetType = (type: 'phone' | 'email') => {
+  resetType.value = type;
+  // 清空表单验证
+  forgotFormRef.value?.clearValidate();
+  // 清空相关表单数据
+  if (type === 'phone') {
+    forgotForm.email = '';
+    forgotForm.emailCode = '';
+    forgotForm.emailSessionId = '';
+  } else {
+    forgotForm.phone = '';
+    forgotForm.smsCode = '';
+    forgotForm.smsSessionId = '';
+  }
+};
+
+// 自定义验证器
+const validateNewPassword = (rule: any, value: string, callback: any) => {
+  if (value === '') {
+    callback(new Error('请输入新密码'));
+  } else if (value.length < 6) {
+    callback(new Error('密码至少6个字符'));
+  } else {
+    if (forgotForm.confirmPassword !== '') {
+      forgotFormRef.value?.validateField('confirmPassword');
+    }
+    callback();
+  }
+};
+
+const validateConfirmPassword = (rule: any, value: string, callback: any) => {
+  if (value === '') {
+    callback(new Error('请再次输入新密码'));
+  } else if (value !== forgotForm.newPassword) {
+    callback(new Error('两次输入的密码不一致'));
+  } else {
+    callback();
+  }
+};
+
+// 表单验证规则
+const forgotRules: FormRules = {
+  phone: [
+    { 
+      validator: (rule: any, value: string, callback: any) => {
+        if (resetType.value === 'phone') {
+          if (value === '') {
+            callback(new Error('请输入手机号'));
+          } else if (!/^1[3-9]\d{9}$/.test(value)) {
+            callback(new Error('请输入正确的手机号'));
+          } else {
+            callback();
+          }
+        } else {
+          callback();
+        }
+      }, 
+      trigger: 'blur' 
+    }
+  ],
+  email: [
+    { 
+      validator: (rule: any, value: string, callback: any) => {
+        if (resetType.value === 'email') {
+          if (value === '') {
+            callback(new Error('请输入邮箱'));
+          } else if (!/^[A-Za-z0-9+_.-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/.test(value)) {
+            callback(new Error('请输入正确的邮箱地址'));
+          } else {
+            callback();
+          }
+        } else {
+          callback();
+        }
+      }, 
+      trigger: 'blur' 
+    }
+  ],
+  smsCode: [
+    { 
+      validator: (rule: any, value: string, callback: any) => {
+        if (resetType.value === 'phone') {
+          if (value === '') {
+            callback(new Error('请输入手机验证码'));
+          } else if (value.length !== 6) {
+            callback(new Error('验证码为6位'));
+          } else {
+            callback();
+          }
+        } else {
+          callback();
+        }
+      }, 
+      trigger: 'blur' 
+    }
+  ],
+  emailCode: [
+    { 
+      validator: (rule: any, value: string, callback: any) => {
+        if (resetType.value === 'email') {
+          if (value === '') {
+            callback(new Error('请输入邮箱验证码'));
+          } else if (value.length !== 6) {
+            callback(new Error('验证码为6位'));
+          } else {
+            callback();
+          }
+        } else {
+          callback();
+        }
+      }, 
+      trigger: 'blur' 
+    }
+  ],
+  newPassword: [
+    { required: true, validator: validateNewPassword, trigger: 'blur' }
+  ],
+  confirmPassword: [
+    { required: true, validator: validateConfirmPassword, trigger: 'blur' }
+  ]
+};
+
+// 发送手机验证码
+const handleSendSmsCode = async () => {
+  // 先验证手机号
+  try {
+    await forgotFormRef.value?.validateField('phone');
+  } catch (error) {
+    return;
+  }
+  
+  try {
+    const result = await authApi.sendSmsCode(forgotForm.phone);
+    if (result.code === 200 && result.data) {
+      // 保存sessionId
+      forgotForm.smsSessionId = result.data.sessionId;
+      ElMessage.success(result.data.message || '验证码已发送');
+      
+      // 开始倒计时
+      smsCountdown.value = 60;
+      smsTimer = window.setInterval(() => {
+        smsCountdown.value--;
+        if (smsCountdown.value <= 0 && smsTimer) {
+          clearInterval(smsTimer);
+          smsTimer = null;
+        }
+      }, 1000);
+    } else {
+      ElMessage.error(result.message || '发送验证码失败');
+    }
+  } catch (error: any) {
+    console.error('发送验证码失败:', error);
+    ElMessage.error(error.message || '发送验证码失败');
+  }
+};
+
+// 发送邮箱验证码
+const handleSendEmailCode = async () => {
+  // 先验证邮箱
+  try {
+    await forgotFormRef.value?.validateField('email');
+  } catch (error) {
+    return;
+  }
+  
+  try {
+    const result = await authApi.sendEmailCode(forgotForm.email);
+    if (result.code === 200 && result.data) {
+      // 保存sessionId
+      forgotForm.emailSessionId = result.data.sessionId;
+      ElMessage.success(result.data.message || '验证码已发送到邮箱');
+      
+      // 开始倒计时
+      emailCountdown.value = 60;
+      emailTimer = window.setInterval(() => {
+        emailCountdown.value--;
+        if (emailCountdown.value <= 0 && emailTimer) {
+          clearInterval(emailTimer);
+          emailTimer = null;
+        }
+      }, 1000);
+    } else {
+      ElMessage.error(result.message || '发送验证码失败');
+    }
+  } catch (error: any) {
+    console.error('发送验证码失败:', error);
+    ElMessage.error(error.message || '发送验证码失败');
+  }
+};
+
+// 重置密码处理
+const handleResetPassword = async () => {
+  if (!forgotFormRef.value) return;
+  
+  try {
+    const valid = await forgotFormRef.value.validate();
+    if (!valid) return;
+    
+    resetLoading.value = true;
+    
+    // 调用重置密码API (暂时模拟成功响应，需要后端实现具体API)
+    // TODO: 实现后端resetPassword API
+    const result = { code: 200, message: '密码重置成功！请用新密码登录' };
+    
+    // 实际的API调用应该是:
+    // const resetData = {
+    //   newPassword: forgotForm.newPassword,
+    //   ...(resetType.value === 'phone' 
+    //     ? { 
+    //         phone: forgotForm.phone, 
+    //         smsCode: forgotForm.smsCode,
+    //         smsSessionId: forgotForm.smsSessionId
+    //       }
+    //     : { 
+    //         email: forgotForm.email, 
+    //         emailCode: forgotForm.emailCode,
+    //         emailSessionId: forgotForm.emailSessionId
+    //       })
+    // };
+    // const result = await authApi.resetPassword(resetData);
+    
+    if (result.code === 200) {
+      ElMessage.success('密码重置成功！请用新密码登录');
+      
+      // 密码重置成功后跳转到登录页
+      setTimeout(() => {
+        router.push('/login');
+      }, 1500);
+    } else {
+      ElMessage.error(result.message || '密码重置失败，请重试');
+    }
+    
+  } catch (error: any) {
+    console.error('密码重置失败:', error);
+    ElMessage.error(error.message || '密码重置失败，请重试');
+  } finally {
+    resetLoading.value = false;
+  }
+};
+
 function goToLogin() {
   router.push('/login');
 }
+
+// 组件卸载时清除定时器
+import { onUnmounted } from 'vue';
+onUnmounted(() => {
+  if (smsTimer) {
+    clearInterval(smsTimer);
+  }
+  if (emailTimer) {
+    clearInterval(emailTimer);
+  }
+});
 </script>
 
 <style lang="scss" scoped>
 .forgot-password-container {
-  min-height: 100vh;
+  display: flex;
+  width: 100%;
+  height: 80%;
+  max-width: 1142px;
+  margin: auto auto;
+  box-shadow: 0px 4px 30px 0px rgba(176, 196, 225, 0.5);
+  border-radius: 30px;
+  overflow: hidden;
+  justify-content: center;
+  align-items: center;
+}
+
+.forgot-password-left {
+  height: 100%;
+  flex: 1;
+  display: flex;
+  padding: 113px 120px;
+  border-radius: 30px 0 0 30px;
+  overflow: hidden;
+  background: url(@/assets/imgs/login-bg.png);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  
+  .left-content {
+    width: 100%;
+    max-width: 350px;
+  }
+  
+  .quote-text {
+    color: #FFF2D3;
+    
+    .quote-mark {
+      font-family: 'Arial Black', sans-serif;
+      font-weight: 900;
+      font-size: 71.096px;
+      line-height: 0.74;
+      display: block;
+      margin-left: 1.48px;
+    }
+    
+    .quote-content {
+      margin-top: 46.66px;
+      
+      p {
+        font-family: 'Source Han Sans SC', sans-serif;
+        font-weight: 700;
+        font-size: 50px;
+        line-height: 1.42;
+        margin: 0;
+      }
+    }
+  }
+}
+
+.forgot-password-right {
+  flex: 1;
+  background: #FFFFFF;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  border-radius: 0 30px 30px 0;
+  padding: 40px 0;
+}
+
+.forgot-password-form-container {
+  width: 287px;
+  padding: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.forgot-password-header {
+  margin-bottom: 24px;
+  
+  .logo-section {
+    display: flex;
+    align-items: center;
+    gap: 11px;
+    margin-bottom: 16px;
+    
+    .logo {
+      width: 36px;
+      height: 36px;
+      background: #C62828;
+      border-radius: 6px;
       display: flex;
       align-items: center;
       justify-content: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      padding: 3px;
-  padding: 20px;
+      
+      img {
+        width: 30px;
+        height: 30px;
+      }
+    }
+    
+    .platform-title {
+      font-family: 'Taipei Sans TC Beta', sans-serif;
+      font-weight: 700;
+      font-size: 26px;
+      line-height: 1.31;
+      color: #141F38;
+      margin: 0;
+    }
+  }
+  
+  .forgot-password-title {
+    font-family: "Source Han Sans SC";
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 1.5;
+    color: #141F38;
+    margin: 0 0 16px 0;
+  }
+}
+
+.reset-type-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+  
+  .tab-item {
+    flex: 1;
+    padding: 8px 12px;
+    text-align: center;
+    background: #F2F3F5;
+    border-radius: 8px;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+    transition: all 0.3s;
+    
+    &:hover {
+      background: #E8E9EB;
+    }
+    
+    &.active {
+      background: #C62828;
+      color: #FFFFFF;
+      font-weight: 600;
+    }
+  }
+}
+
+.forgot-password-form {
+  .form-input {
+    width: 100%;
+    height: 48px;
+    background: #F2F3F5;
+    border: none;
+    border-radius: 12px;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.3);
+    
+    &::placeholder {
+      color: rgba(0, 0, 0, 0.3);
+    }
+    
+    &:focus {
+      outline: none;
+      background: #FFFFFF;
+      border: 1px solid #C62828;
+    }
+  }
+  
+  .code-input-wrapper {
+    display: flex;
+    gap: 8px;
+    width: 100%;
+    
+    .code-input {
+      flex: 1;
+    }
+    
+    .code-button {
+      height: 48px;
+      padding: 0 16px;
+      background: #C62828;
+      border: none;
+      border-radius: 12px;
+      color: #FFFFFF;
+      font-size: 12px;
+      white-space: nowrap;
+      
+      &:hover:not(:disabled) {
+        background: #B71C1C;
+      }
+      
+      &:disabled {
+        background: #D9D9D9;
+        color: rgba(0, 0, 0, 0.3);
+        cursor: not-allowed;
+      }
+    }
+  }
+  
+  .reset-button {
+    width: 100%;
+    height: 46px;
+    background: #C62828;
+    border: none;
+    border-radius: 12px;
+    color: #FFFFFF;
+    font-family: "Source Han Sans SC";
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 1.4;
+    margin-bottom: 8px;
+    
+    &:hover {
+      background: #B71C1C;
+    }
+  }
+}
+
+.forgot-password-footer {
+  width: 100%;
+  
+  .login-link {
+    font-family: "Source Han Sans SC";
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 1.83;
+    color: #141F38;
+    text-align: center;
+    margin: 0 0 16px 0;
+ 
+    .login-link-text {
+      cursor: pointer;
+      color: #ff0000;
+      &:hover {
+        color: #C62828;
+      }
+    }
+  }
+  
+  .copyright {
+    font-family: "Source Han Sans SC";
+    font-size: 12px;
+    line-height: 2;
+    color: #D9D9D9;
+    text-align: center;
+    padding-bottom: 0;
+  }
 }
 
 .forgot-password-box {

schoolNewsWeb/src/views/public/login/Login.mobile.vue

@@ -0,0 +1,846 @@
+<template>
+  <div class="login-container">
+    <!-- 左侧励志区域 -->
+    <div class="login-left">
+      <div class="left-content">
+        <div class="quote-text">
+          <span class="quote-mark">“</span>
+          <div class="quote-content">
+            <p>不负时代韶华，</p>
+            <p>争做时代新人。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 右侧登录表单区域 -->
+    <div class="login-right">
+      <div class="login-form-container">
+        <!-- Logo和标题区域 -->
+        <div class="login-header">
+          <div class="logo-section">
+            <div class="logo">
+              <img src="@/assets/imgs/logo-icon.svg" alt="Logo" />
+            </div>
+            <h1 class="platform-title">红色思政学习平台</h1>
+          </div>
+        </div>
+        
+        <!-- 登录方式切换 -->
+        <div class="login-mode-tabs">
+          <div 
+            :class="['tab-item', { active: loginMode === 'password' }]" 
+            @click="switchLoginMode('password')"
+          >
+            密码登录
+          </div>
+          <div 
+            :class="['tab-item', { active: loginMode === 'captcha' }]" 
+            @click="switchLoginMode('captcha')"
+          >
+            验证码登录
+          </div>
+        </div>
+        
+        <!-- 登录表单 -->
+        <el-form
+          ref="loginFormRef"
+          :model="loginForm"
+          :rules="loginRules"
+          class="login-form"
+          @submit.prevent="handleLogin"
+        >
+          <!-- 密码登录模式 -->
+          <template v-if="loginMode === 'password'">
+            <el-form-item prop="username">
+              <el-input
+                v-model="loginForm.username"
+                placeholder="请输入学号、手机号、邮箱"
+                class="form-input"
+              />
+            </el-form-item>
+            
+            <el-form-item prop="password">
+              <el-input
+                v-model="loginForm.password"
+                type="password"
+                placeholder="请输入密码"
+                show-password
+                class="form-input"
+              />
+            </el-form-item>
+          </template>
+          
+          <!-- 验证码登录模式 -->
+          <template v-else>
+            <!-- 登录方式选择 -->
+            <div class="captcha-type-tabs">
+              <div 
+                :class="['captcha-tab-item', { active: captchaType === 'phone' }]" 
+                @click="switchCaptchaType('phone')"
+              >
+                手机号
+              </div>
+              <div 
+                :class="['captcha-tab-item', { active: captchaType === 'email' }]" 
+                @click="switchCaptchaType('email')"
+              >
+                邮箱
+              </div>
+            </div>
+            
+            <!-- 手机号验证码登录 -->
+            <template v-if="captchaType === 'phone'">
+              <el-form-item prop="phone">
+                <el-input
+                  v-model="loginForm.phone"
+                  placeholder="请输入手机号"
+                  class="form-input"
+                  maxlength="11"
+                />
+              </el-form-item>
+              
+              <el-form-item prop="captcha">
+                <div class="captcha-input-container">
+                  <el-input
+                    v-model="loginForm.captcha"
+                    placeholder="请输入验证码"
+                    class="form-input captcha-input"
+                    maxlength="6"
+                  />
+                  <el-button
+                    class="send-captcha-btn"
+                    :disabled="smsCountdown > 0"
+                    @click="handleSendSmsCode"
+                  >
+                    {{ smsCountdown > 0 ? `${smsCountdown}秒后重试` : '获取验证码' }}
+                  </el-button>
+                </div>
+              </el-form-item>
+            </template>
+            
+            <!-- 邮箱验证码登录 -->
+            <template v-else>
+              <el-form-item prop="email">
+                <el-input
+                  v-model="loginForm.email"
+                  placeholder="请输入邮箱"
+                  class="form-input"
+                />
+              </el-form-item>
+              
+              <el-form-item prop="captcha">
+                <div class="captcha-input-container">
+                  <el-input
+                    v-model="loginForm.captcha"
+                    placeholder="请输入验证码"
+                    class="form-input captcha-input"
+                    maxlength="6"
+                  />
+                  <el-button
+                    class="send-captcha-btn"
+                    :disabled="emailCountdown > 0"
+                    @click="handleSendEmailCode"
+                  >
+                    {{ emailCountdown > 0 ? `${emailCountdown}秒后重试` : '获取验证码' }}
+                  </el-button>
+                </div>
+              </el-form-item>
+            </template>
+          </template>
+          
+          <el-form-item>
+            <div class="login-options">
+              <div class="remember-me">
+                <el-checkbox v-model="loginForm.rememberMe">
+                  自动登录
+                </el-checkbox>
+              </div>
+              <el-link type="primary" @click="goToForgotPassword" class="forgot-password">
+                忘记密码？
+              </el-link>
+            </div>
+          </el-form-item>
+          
+          <el-form-item>
+            <el-button
+              type="primary"
+              :loading="loginLoading"
+              @click="handleLogin"
+              @keydown.enter="handleLogin"
+              class="login-button"
+            >
+              登录
+            </el-button>
+          </el-form-item>
+          
+          <el-form-item prop="agree">
+            <p class="agreement-text">
+              <el-checkbox v-model="loginForm.agree">登录即为同意<span class="agreement-link" style="color: red">《红色思政智能体平台》</span></el-checkbox>
+            </p>
+          </el-form-item>
+        </el-form>
+        
+      </div>
+      <!-- 底部信息 -->
+      <div class="login-footer">
+        <p class="register-link">
+          没有账号？<span class="register-link-text" @click="goToRegister">现在就注册</span>
+        </p>
+        <p class="copyright">
+          Copyright ©红色思政智能体平台
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useStore } from 'vuex';
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
+import type { LoginParam } from '@/types';
+import { LoginType } from '@/types/enums';
+import { authApi } from '@/apis/system/auth';
+
+// 响应式引用
+const loginFormRef = ref<FormInstance>();
+const loginLoading = ref(false);
+const showCaptcha = ref(false);
+const captchaImage = ref('');
+
+// 登录模式：password-密码登录，captcha-验证码登录
+const loginMode = ref<'password' | 'captcha'>('password');
+// 验证码类型：phone-手机号，email-邮箱
+const captchaType = ref<'phone' | 'email'>('phone');
+
+// 倒计时
+const smsCountdown = ref(0);
+const emailCountdown = ref(0);
+
+// Composition API
+const router = useRouter();
+const route = useRoute();
+const store = useStore();
+
+// 表单数据
+const loginForm = reactive<LoginParam>({
+  loginType: undefined,
+  username: '',
+  phone: '',
+  email: '',
+  password: '',
+  captcha: '',
+  captchaId: '',
+  rememberMe: false,
+  agree: true
+});
+
+// 计算属性：登录模式标题
+const loginModeTitle = computed(() => {
+  return loginMode.value === 'password' ? '密码登录' : '验证码登录';
+});
+
+// 表单验证规则
+const loginRules: FormRules = {
+  username: [
+    { 
+      required: loginMode.value === 'password', 
+      message: '请输入用户名、手机号或邮箱', 
+      trigger: 'blur' 
+    }
+  ],
+  phone: [
+    { 
+      required: loginMode.value === 'captcha' && captchaType.value === 'phone', 
+      message: '请输入手机号', 
+      trigger: 'blur' 
+    },
+    { 
+      pattern: /^1[3-9]\d{9}$/, 
+      message: '请输入正确的手机号', 
+      trigger: 'blur' 
+    }
+  ],
+  email: [
+    { 
+      required: loginMode.value === 'captcha' && captchaType.value === 'email', 
+      message: '请输入邮箱', 
+      trigger: 'blur' 
+    },
+    { 
+      type: 'email', 
+      message: '请输入正确的邮箱格式', 
+      trigger: 'blur' 
+    }
+  ],
+  password: [
+    { 
+      required: loginMode.value === 'password', 
+      message: '请输入密码', 
+      trigger: 'blur' 
+    },
+    { 
+      min: 6, 
+      message: '密码至少6个字符', 
+      trigger: 'blur' 
+    }
+  ],
+  captcha: [
+    { 
+      required: loginMode.value === 'captcha', 
+      message: '请输入验证码', 
+      trigger: 'blur' 
+    },
+    { 
+      len: 6, 
+      message: '验证码为6位', 
+      trigger: 'blur' 
+    }
+  ],
+  agree: [
+    { 
+      validator: (rule: any, value: boolean, callback: any) => {
+        if (!value) {
+          callback(new Error('请同意《红色思政智能体平台》用户协议'));
+        } else {
+          callback();
+        }
+      }, 
+      trigger: 'change' 
+    }
+  ]
+};
+
+// 切换登录模式
+const switchLoginMode = (mode: 'password' | 'captcha') => {
+  if (loginMode.value === mode) return;
+  
+  loginMode.value = mode;
+  
+  // 清空表单数据和验证
+  loginFormRef.value?.clearValidate();
+  loginForm.username = '';
+  loginForm.phone = '';
+  loginForm.email = '';
+  loginForm.password = '';
+  loginForm.captcha = '';
+  loginForm.captchaId = '';
+};
+
+// 切换验证码类型
+const switchCaptchaType = (type: 'phone' | 'email') => {
+  if (captchaType.value === type) return;
+  
+  captchaType.value = type;
+  
+  // 清空相关表单数据和验证
+  loginFormRef.value?.clearValidate();
+  loginForm.phone = '';
+  loginForm.email = '';
+  loginForm.captcha = '';
+  loginForm.captchaId = '';
+};
+
+// 发送短信验证码
+const handleSendSmsCode = async () => {
+  // 验证手机号
+  if (!loginForm.phone || loginForm.phone.trim() === '') {
+    ElMessage.warning('请输入手机号');
+    return;
+  }
+  
+  const phonePattern = /^1[3-9]\d{9}$/;
+  if (!phonePattern.test(loginForm.phone)) {
+    ElMessage.warning('请输入正确的手机号');
+    return;
+  }
+  
+  try {
+    const result = await authApi.sendSmsCode(loginForm.phone);
+    if (result.code === 200 && result.data) {
+      // 保存sessionId
+      loginForm.captchaId = result.data.sessionId;
+      ElMessage.success(result.data.message || '验证码已发送');
+      
+      // 开始倒计时
+      smsCountdown.value = 60;
+      const timer = setInterval(() => {
+        smsCountdown.value--;
+        if (smsCountdown.value <= 0) {
+          clearInterval(timer);
+        }
+      }, 1000);
+    } else {
+      ElMessage.error(result.message || '发送验证码失败');
+    }
+  } catch (error: any) {
+    console.error('发送验证码失败:', error);
+    ElMessage.error(error.message || '发送验证码失败');
+  }
+};
+
+// 发送邮箱验证码
+const handleSendEmailCode = async () => {
+  // 验证邮箱
+  if (!loginForm.email || loginForm.email.trim() === '') {
+    ElMessage.warning('请输入邮箱');
+    return;
+  }
+  
+  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  if (!emailPattern.test(loginForm.email)) {
+    ElMessage.warning('请输入正确的邮箱格式');
+    return;
+  }
+  
+  try {
+    const result = await authApi.sendEmailCode(loginForm.email);
+    if (result.code === 200 && result.data) {
+      // 保存sessionId
+      loginForm.captchaId = result.data.sessionId;
+      ElMessage.success(result.data.message || '验证码已发送到邮箱');
+      
+      // 开始倒计时
+      emailCountdown.value = 60;
+      const timer = setInterval(() => {
+        emailCountdown.value--;
+        if (emailCountdown.value <= 0) {
+          clearInterval(timer);
+        }
+      }, 1000);
+    } else {
+      ElMessage.error(result.message || '发送验证码失败');
+    }
+  } catch (error: any) {
+    console.error('发送验证码失败:', error);
+    ElMessage.error(error.message || '发送验证码失败');
+  }
+};
+
+// 方法
+const handleLogin = async () => {
+  if (!loginFormRef.value) return;
+  
+  // 检查是否同意用户协议
+  if (!loginForm.agree) {
+    ElMessage.warning('请先同意《红色思政智能体平台》用户协议');
+    return;
+  }
+  
+  try {
+    const valid = await loginFormRef.value.validate();
+    if (!valid) return;
+    
+    loginLoading.value = true;
+    
+    // 根据登录模式设置loginType
+    if (loginMode.value === 'password') {
+      loginForm.loginType = LoginType.PASSWORD;
+    } else {
+      loginForm.loginType = captchaType.value === 'phone' ? LoginType.PHONE : LoginType.EMAIL;
+    }
+    
+    // 调用store中的登录action
+    const result = await store.dispatch('auth/login', loginForm);
+    
+    ElMessage.success('登录成功！');
+    
+    // 优先使用 query 中的 redirect，其次使用返回的 redirectUrl，最后使用默认首页
+    const redirectPath = (route.query.redirect as string) || result.redirectUrl || '/home';
+    router.push(redirectPath);
+    
+  } catch (error: any) {
+    console.error('登录失败:', error);
+    ElMessage.error(error.message || '登录失败，请检查用户名和密码');
+    
+    // 登录失败后显示验证码
+    showCaptcha.value = true;
+    // refreshCaptcha();
+  } finally {
+    loginLoading.value = false;
+  }
+};
+
+const refreshCaptcha = async () => {
+  try {
+    const result = await authApi.getCaptcha();
+    if (result.data) {
+      captchaImage.value = result.data.captchaImage;
+      loginForm.captchaId = result.data.captchaId;
+    }
+  } catch (error) {
+    console.error('获取验证码失败:', error);
+    ElMessage.error('获取验证码失败');
+  }
+};
+
+function goToRegister() {
+  router.push('/register');
+}
+
+function goToForgotPassword() {
+  router.push('/forgot-password');
+}
+
+// 组件挂载时检查是否需要显示验证码
+onMounted(() => {
+  // 可以根据需要决定是否默认显示验证码
+  // refreshCaptcha();
+});
+</script>
+
+<style lang="scss" scoped>
+// 移动端专属样式
+.login-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-height: 100vh;
+    background: #FFFFFF;
+    margin: 0 auto;
+    // max-width: 375px;
+    box-shadow: 0px 4px 30px 0px rgba(176, 196, 225, 0.25);
+    overflow: hidden;
+}
+
+.login-left {
+    height: 30%;
+    display: flex;
+    padding: 30px 44px;
+    background: url(@/assets/imgs/login-bg.png);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    
+    .left-content {
+        width: 100%;
+        display: flex;
+        align-items: center;
+    }
+    
+    .quote-text {
+        color: #FFF2D3;
+        
+        .quote-mark {
+            font-family: 'Arial Black', sans-serif;
+            font-weight: 900;
+            font-size: 38.9px;
+            line-height: 0.74;
+            display: block;
+            margin-bottom: 20px;
+        }
+        
+        .quote-content {
+            p {
+                font-family: 'Source Han Sans SC', sans-serif;
+                font-weight: 700;
+                font-size: 28px;
+                line-height: 1.42;
+                margin: 0;
+            }
+        }
+    }
+}
+
+.login-right {
+    flex: 1;
+    height: 70%;
+    background: #FFFFFF;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 30px 44px;
+    position: relative;
+    border-radius: 20px 20px 0 0;
+    margin-top: -20px;
+    z-index: 2;
+}
+
+.login-form-container {
+    width: 100%;
+    max-width: 287px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding-top: 30px;
+}
+
+.login-header {
+    margin-bottom: 32px;
+    
+    .logo-section {
+        display: flex;
+        align-items: center;
+        gap: 11px;
+        justify-content: center;
+        
+        .logo {
+            width: 36px;
+            height: 36px;
+            background: #C62828;
+            border-radius: 6px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 3px;
+            
+            img {
+                width: 30px;
+                height: 30px;
+            }
+        }
+        
+        .platform-title {
+            font-family: 'Taipei Sans TC Beta', sans-serif;
+            font-weight: 700;
+            font-size: 20px;
+            line-height: 1.31;
+            color: #141F38;
+            margin: 0;
+        }
+    }
+}
+
+.login-mode-tabs {
+    display: flex;
+    gap: 39px;
+    margin-bottom: 32px;
+    justify-content: center;
+    
+    .tab-item {
+        padding: 8px 0;
+        font-size: 16px;
+        font-weight: 600;
+        color: rgba(0, 0, 0, 0.45);
+        cursor: pointer;
+        border-bottom: 2px solid transparent;
+        transition: all 0.3s;
+        
+        &:hover {
+            color: #C62828;
+        }
+        
+        &.active {
+            color: #C62828;
+            border-bottom-color: #C62828;
+        }
+    }
+}
+
+.captcha-type-tabs {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+  
+  .captcha-tab-item {
+    flex: 1;
+    padding: 8px;
+    text-align: center;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.65);
+    background: #F2F3F5;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s;
+    
+    &:hover {
+      background: #E8E8E8;
+    }
+    
+    &.active {
+      color: #FFFFFF;
+      background: #C62828;
+      font-weight: 500;
+    }
+  }
+}
+
+.login-form {
+    width: 100%;
+    
+    .form-input {
+        width: 100%;
+        height: 48px;
+        background: #F2F3F5;
+        border: none;
+        border-radius: 12px;
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.65);
+        
+        :deep(.el-input__wrapper) {
+            background: #F2F3F5;
+            border: none;
+            border-radius: 12px;
+            padding: 0 16px;
+            box-shadow: none;
+        }
+        
+        :deep(.el-input__inner) {
+            color: rgba(0, 0, 0, 0.65);
+            
+            &::placeholder {
+                color: rgba(0, 0, 0, 0.3);
+            }
+        }
+        
+        :deep(.el-input__wrapper:focus),
+        :deep(.el-input__wrapper.is-focus) {
+            background: #FFFFFF;
+            border: 1px solid #C62828;
+            box-shadow: none;
+        }
+    }
+    
+    .captcha-input-container {
+        display: flex;
+        gap: 8px;
+        width: 100%;
+        
+        .captcha-input {
+            flex: 1;
+        }
+        
+        .send-captcha-btn {
+            height: 48px;
+            padding: 0 12px;
+            background: #C62828;
+            border: none;
+            border-radius: 12px;
+            color: #FFFFFF;
+            font-size: 12px;
+            white-space: nowrap;
+            min-width: 90px;
+            
+            &:hover:not(:disabled) {
+                background: #B71C1C;
+            }
+            
+            &:disabled {
+                background: #D9D9D9;
+                color: rgba(0, 0, 0, 0.25);
+                cursor: not-allowed;
+            }
+        }
+    }
+    
+    .login-options {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        margin: 16px 0;
+        
+        .remember-me {
+            display: flex;
+            align-items: center;
+            
+            :deep(.el-checkbox) {
+                font-size: 12px;
+                color: rgba(0, 0, 0, 0.3);
+                
+                .el-checkbox__label {
+                    font-size: 12px;
+                    line-height: 1.67;
+                }
+            }
+        }
+        
+        .forgot-password {
+            font-size: 12px;
+            color: rgba(0, 0, 0, 0.3);
+            text-decoration: none;
+            
+            &:hover {
+                color: #C62828;
+            }
+        }
+    }
+    
+    .login-button {
+        width: 100%;
+        height: 46px;
+        background: #C62828;
+        border: none;
+        border-radius: 12px;
+        color: #FFFFFF;
+        font-family: "Source Han Sans SC";
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 1.4;
+        margin-bottom: 16px;
+        
+        &:hover {
+            background: #B71C1C;
+        }
+    }
+    
+    .agreement-text {
+        font-family: "Source Han Sans SC";
+        font-weight: 400;
+        font-size: 10px;
+        line-height: 1.8;
+        color: rgba(0, 0, 0, 0.3);
+        text-align: center;
+        margin: 0;
+        
+        :deep(.el-checkbox) {
+            .el-checkbox__label {
+                font-size: 10px;
+                color: rgba(0, 0, 0, 0.3);
+            }
+        }
+    }
+}
+
+.login-footer {
+    width: 100%;
+    max-width: 287px;
+    margin-top: auto;
+    padding-bottom: 24px;
+    
+    .register-link {
+        font-family: "Source Han Sans SC";
+        font-weight: 600;
+        font-size: 12px;
+        line-height: 1.83;
+        color: #141F38;
+        text-align: center;
+        margin: 0 0 16px 0;
+     
+        .register-link-text {
+            cursor: pointer;
+            color: #ff0000;
+            
+            &:hover {
+                color: #C62828;
+            }
+        }
+    }
+    
+    .copyright {
+        font-family: "Source Han Sans SC";
+        font-size: 12px;
+        line-height: 2;
+        color: #D9D9D9;
+        text-align: center;
+    }
+}
+
+// Element Plus 组件样式覆盖
+:deep(.el-form-item) {
+    margin-bottom: 16px;
+    
+    .el-form-item__content {
+        line-height: normal;
+    }
+}
+
+:deep(.el-form-item__error) {
+    font-size: 12px;
+    color: #F56C6C;
+    padding-top: 4px;
+}
+</style>

schoolNewsWeb/src/views/public/login/Register.mobile.vue

@@ -0,0 +1,800 @@
+<template>
+  <div class="login-container">
+    <!-- 左侧励志区域 -->
+    <div class="login-left">
+      <div class="left-content">
+        <div class="quote-text">
+          <span class="quote-mark">"</span>
+          <div class="quote-content">
+            <p>不负时代韶华，</p>
+            <p>争做时代新人。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 右侧注册表单区域 -->
+    <div class="login-right">
+      <div class="login-form-container">
+        <!-- Logo和标题区域 -->
+        <div class="login-header">
+          <div class="logo-section">
+            <div class="logo">
+              <img src="@/assets/imgs/logo-icon.svg" alt="Logo" />
+            </div>
+            <h1 class="platform-title">红色思政学习平台</h1>
+          </div>
+        </div>
+        
+        <!-- 注册方式切换 -->
+        <div class="register-type-tabs">
+          <div 
+            class="tab-item" 
+            :class="{ active: registerType === RegisterType.USERNAME }"
+            @click="switchRegisterType(RegisterType.USERNAME)"
+          >
+            用户名
+          </div>
+          <div 
+            class="tab-item" 
+            :class="{ active: registerType === RegisterType.PHONE }"
+            @click="switchRegisterType(RegisterType.PHONE)"
+          >
+            手机号
+          </div>
+          <div 
+            class="tab-item" 
+            :class="{ active: registerType === RegisterType.EMAIL }"
+            @click="switchRegisterType(RegisterType.EMAIL)"
+          >
+            邮箱
+          </div>
+        </div>
+        
+        <!-- 注册表单 -->
+        <el-form
+          ref="registerFormRef"
+          :model="registerForm"
+          :rules="registerRules"
+          class="register-form"
+          @submit.prevent="handleRegister"
+        >
+          <p class="form-title">{{ registerTypeTitle }}</p>
+          
+          <!-- 用户名注册 -->
+          <template v-if="registerType === RegisterType.USERNAME">
+            <el-form-item prop="username">
+              <el-input
+                v-model="registerForm.username"
+                placeholder="请输入用户名"
+                class="form-input"
+              />
+            </el-form-item>
+          </template>
+          
+          <!-- 手机号注册 -->
+          <template v-if="registerType === RegisterType.PHONE">
+            <el-form-item prop="phone">
+              <el-input
+                v-model="registerForm.phone"
+                placeholder="请输入手机号"
+                class="form-input"
+              />
+            </el-form-item>
+            
+            <el-form-item prop="smsCode">
+              <div class="captcha-input-container">
+                <el-input
+                  v-model="registerForm.smsCode"
+                  placeholder="请输入手机验证码"
+                  class="form-input captcha-input"
+                />
+                <el-button
+                  :disabled="smsCountdown > 0"
+                  @click="handleSendSmsCode"
+                  class="send-captcha-btn"
+                >
+                  {{ smsCountdown > 0 ? `${smsCountdown}s` : '获取验证码' }}
+                </el-button>
+              </div>
+            </el-form-item>
+          </template>
+          
+          <!-- 邮箱注册 -->
+          <template v-if="registerType === RegisterType.EMAIL">
+            <el-form-item prop="email">
+              <el-input
+                v-model="registerForm.email"
+                placeholder="请输入邮箱"
+                class="form-input"
+              />
+            </el-form-item>
+            
+            <el-form-item prop="emailCode">
+              <div class="captcha-input-container">
+                <el-input
+                  v-model="registerForm.emailCode"
+                  placeholder="请输入邮箱验证码"
+                  class="form-input captcha-input"
+                />
+                <el-button
+                  :disabled="emailCountdown > 0"
+                  @click="handleSendEmailCode"
+                  class="send-captcha-btn"
+                >
+                  {{ emailCountdown > 0 ? `${emailCountdown}s` : '获取验证码' }}
+                </el-button>
+              </div>
+            </el-form-item>
+          </template>
+          
+          <!-- 密码字段 -->
+          <el-form-item prop="password">
+            <el-input
+              v-model="registerForm.password"
+              type="password"
+              placeholder="请输入密码（至少6个字符）"
+              show-password
+              class="form-input"
+            />
+          </el-form-item>
+          
+          <el-form-item prop="confirmPassword">
+            <el-input
+              v-model="registerForm.confirmPassword"
+              type="password"
+              placeholder="请再次输入密码"
+              show-password
+              class="form-input"
+            />
+          </el-form-item>
+          
+          <el-form-item>
+            <el-button
+              type="primary"
+              :loading="registerLoading"
+              @click="handleRegister"
+              @keydown.enter="handleRegister"
+              class="register-button"
+            >
+              注册
+            </el-button>
+          </el-form-item>
+          
+          <el-form-item prop="agree">
+            <p class="agreement-text">
+              <el-checkbox v-model="registerForm.agree">注册即为同意<span class="agreement-link" style="color: red">《红色思政智能体平台》</span></el-checkbox>
+            </p>
+          </el-form-item>
+        </el-form>
+      </div>
+      
+      <!-- 底部信息 -->
+      <div class="login-footer">
+        <p class="register-link">
+          已有账号？<span class="register-link-text" @click="$router.push('/login')">立即登录</span>
+        </p>
+        <p class="copyright">
+          Copyright ©红色思政智能体平台
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
+import type { RegisterParam } from '@/types';
+import { RegisterType } from '@/types';
+import { authApi } from '@/apis/system/auth';
+
+// 响应式引用
+const registerFormRef = ref<FormInstance>();
+const registerLoading = ref(false);
+const smsCountdown = ref(0);
+const emailCountdown = ref(0);
+let smsTimer: number | null = null;
+let emailTimer: number | null = null;
+
+// Composition API
+const router = useRouter();
+
+// 注册方式
+const registerType = ref<RegisterType>(RegisterType.USERNAME);
+
+// 表单数据
+const registerForm = reactive<RegisterParam>({
+  registerType: RegisterType.USERNAME,
+  username: '',
+  studentId: '',
+  phone: '',
+  email: '',
+  password: '',
+  confirmPassword: '',
+  smsCode: '',
+  emailCode: '',
+  smsSessionId: '',
+  emailSessionId: '',
+  agree: true
+});
+
+// 根据注册方式显示不同的标题
+const registerTypeTitle = computed(() => {
+  switch (registerType.value) {
+    case RegisterType.USERNAME:
+      return '用户名注册';
+    case RegisterType.PHONE:
+      return '手机号注册';
+    case RegisterType.EMAIL:
+      return '邮箱注册';
+    default:
+      return '账号注册';
+  }
+});
+
+// 切换注册方式
+const switchRegisterType = (type: RegisterType) => {
+  registerType.value = type;
+  registerForm.registerType = type;
+  // 清空表单验证
+  registerFormRef.value?.clearValidate();
+};
+
+// 自定义验证器
+const validatePass = (rule: any, value: string, callback: any) => {
+  if (value === '') {
+    callback(new Error('请输入密码'));
+  } else if (value.length < 6) {
+    callback(new Error('密码至少6个字符'));
+  } else {
+    if (registerForm.confirmPassword !== '') {
+      registerFormRef.value?.validateField('confirmPassword');
+    }
+    callback();
+  }
+};
+
+const validateConfirmPass = (rule: any, value: string, callback: any) => {
+  if (value === '') {
+    callback(new Error('请再次输入密码'));
+  } else if (value !== registerForm.password) {
+    callback(new Error('两次输入的密码不一致'));
+  } else {
+    callback();
+  }
+};
+
+const validatePhone = (rule: any, value: string, callback: any) => {
+  if (registerType.value === RegisterType.PHONE) {
+    if (value === '') {
+      callback(new Error('请输入手机号'));
+    } else if (!/^1[3-9]\d{9}$/.test(value)) {
+      callback(new Error('请输入有效的手机号'));
+    } else {
+      callback();
+    }
+  } else {
+    callback();
+  }
+};
+
+const validateEmail = (rule: any, value: string, callback: any) => {
+  if (registerType.value === RegisterType.EMAIL) {
+    if (value === '') {
+      callback(new Error('请输入邮箱'));
+    } else if (!/^[A-Za-z0-9+_.-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/.test(value)) {
+      callback(new Error('请输入有效的邮箱地址'));
+    } else {
+      callback();
+    }
+  } else {
+    callback();
+  }
+};
+
+const validateUsername = (rule: any, value: string, callback: any) => {
+  if (registerType.value === RegisterType.USERNAME) {
+    if (value === '') {
+      callback(new Error('请输入用户名'));
+    } else if (value.length < 3 || value.length > 20) {
+      callback(new Error('用户名长度为3-20个字符'));
+    } else if (!/^[a-zA-Z0-9_]+$/.test(value)) {
+      callback(new Error('用户名只能包含字母、数字和下划线'));
+    } else {
+      callback();
+    }
+  } else {
+    callback();
+  }
+};
+
+// 表单验证规则
+const registerRules: FormRules = {
+  username: [
+    { validator: validateUsername, trigger: 'blur' }
+  ],
+  phone: [
+    { validator: validatePhone, trigger: 'blur' }
+  ],
+  email: [
+    { validator: validateEmail, trigger: 'blur' }
+  ],
+  smsCode: [
+    { 
+      validator: (rule: any, value: string, callback: any) => {
+        if (registerType.value === RegisterType.PHONE) {
+          if (value === '') {
+            callback(new Error('请输入手机验证码'));
+          } else if (value.length !== 6) {
+            callback(new Error('验证码为6位'));
+          } else {
+            callback();
+          }
+        } else {
+          callback();
+        }
+      }, 
+      trigger: 'blur' 
+    }
+  ],
+  emailCode: [
+    { 
+      validator: (rule: any, value: string, callback: any) => {
+        if (registerType.value === RegisterType.EMAIL) {
+          if (value === '') {
+            callback(new Error('请输入邮箱验证码'));
+          } else if (value.length !== 6) {
+            callback(new Error('验证码为6位'));
+          } else {
+            callback();
+          }
+        } else {
+          callback();
+        }
+      }, 
+      trigger: 'blur' 
+    }
+  ],
+  password: [
+    { required: true, validator: validatePass, trigger: 'blur' }
+  ],
+  confirmPassword: [
+    { required: true, validator: validateConfirmPass, trigger: 'blur' }
+  ],
+  agree: [
+    { 
+      validator: (rule: any, value: boolean, callback: any) => {
+        if (!value) {
+          callback(new Error('请同意《红色思政智能体平台》用户协议'));
+        } else {
+          callback();
+        }
+      }, 
+      trigger: 'change' 
+    }
+  ]
+};
+
+// 发送手机验证码
+const handleSendSmsCode = async () => {
+  // 先验证手机号
+  try {
+    await registerFormRef.value?.validateField('phone');
+  } catch (error) {
+    return;
+  }
+  
+  try {
+    const result = await authApi.sendSmsCode(registerForm.phone!);
+    if (result.code === 200 && result.data) {
+      // 保存sessionId
+      registerForm.smsSessionId = result.data.sessionId;
+      ElMessage.success(result.data.message || '验证码已发送');
+      
+      // 开始倒计时
+      smsCountdown.value = 60;
+      smsTimer = window.setInterval(() => {
+        smsCountdown.value--;
+        if (smsCountdown.value <= 0 && smsTimer) {
+          clearInterval(smsTimer);
+          smsTimer = null;
+        }
+      }, 1000);
+    } else {
+      ElMessage.error(result.message || '发送验证码失败');
+    }
+  } catch (error: any) {
+    console.error('发送验证码失败:', error);
+    ElMessage.error(error.message || '发送验证码失败');
+  }
+};
+
+// 发送邮箱验证码
+const handleSendEmailCode = async () => {
+  // 先验证邮箱
+  try {
+    await registerFormRef.value?.validateField('email');
+  } catch (error) {
+    return;
+  }
+  
+  try {
+    const result = await authApi.sendEmailCode(registerForm.email!);
+    if (result.code === 200 && result.data) {
+      // 保存sessionId
+      registerForm.emailSessionId = result.data.sessionId;
+      ElMessage.success(result.data.message || '验证码已发送到邮箱');
+      
+      // 开始倒计时
+      emailCountdown.value = 60;
+      emailTimer = window.setInterval(() => {
+        emailCountdown.value--;
+        if (emailCountdown.value <= 0 && emailTimer) {
+          clearInterval(emailTimer);
+          emailTimer = null;
+        }
+      }, 1000);
+    } else {
+      ElMessage.error(result.message || '发送验证码失败');
+    }
+  } catch (error: any) {
+    console.error('发送验证码失败:', error);
+    ElMessage.error(error.message || '发送验证码失败');
+  }
+};
+
+// 注册处理
+const handleRegister = async () => {
+  if (!registerFormRef.value) return;
+  
+  // 检查是否同意用户协议
+  if (!registerForm.agree) {
+    ElMessage.warning('请先同意《红色思政智能体平台》用户协议');
+    return;
+  }
+  
+  try {
+    const valid = await registerFormRef.value.validate();
+    if (!valid) return;
+    
+    registerLoading.value = true;
+    
+    // 调用注册API
+    const result = await authApi.register(registerForm);
+    
+    if (result.code === 200) {
+      ElMessage.success('注册成功！请登录');
+      
+      // 注册成功后跳转到登录页
+      setTimeout(() => {
+        router.push('/login');
+      }, 1500);
+    } else {
+      ElMessage.error(result.message || '注册失败，请重试');
+    }
+    
+  } catch (error: any) {
+    console.error('注册失败:', error);
+    ElMessage.error(error.message || '注册失败，请重试');
+  } finally {
+    registerLoading.value = false;
+  }
+};
+
+// 组件卸载时清除定时器
+onUnmounted(() => {
+  if (smsTimer) {
+    clearInterval(smsTimer);
+  }
+  if (emailTimer) {
+    clearInterval(emailTimer);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+// 移动端注册页面样式
+.login-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100vh;
+    background: #FFFFFF;
+    margin: 0 auto;
+    box-shadow: 0px 4px 30px 0px rgba(176, 196, 225, 0.25);
+    overflow: hidden;
+}
+
+.login-left {
+    height: 30%;
+    display: flex;
+    padding: 30px 44px;
+    background: url(@/assets/imgs/login-bg.png);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    
+    .left-content {
+        width: 100%;
+        display: flex;
+        align-items: center;
+    }
+    
+    .quote-text {
+        color: #FFF2D3;
+        
+        .quote-mark {
+            font-family: 'Arial Black', sans-serif;
+            font-weight: 900;
+            font-size: 38.9px;
+            line-height: 0.74;
+            display: block;
+            margin-bottom: 20px;
+        }
+        
+        .quote-content {
+            p {
+                font-family: 'Source Han Sans SC', sans-serif;
+                font-weight: 700;
+                font-size: 28px;
+                line-height: 1.42;
+                margin: 0;
+            }
+        }
+    }
+}
+
+.login-right {
+    flex: 1;
+    height: 70%;
+    background: #FFFFFF;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 30px 44px;
+    position: relative;
+    border-radius: 20px 20px 0 0;
+    margin-top: -20px;
+    z-index: 2;
+    overflow-y: auto;
+}
+
+.login-form-container {
+    width: 100%;
+    max-width: 287px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding-top: 0;
+}
+
+.login-header {
+    margin-bottom: 32px;
+    
+    .logo-section {
+        display: flex;
+        align-items: center;
+        gap: 11px;
+        justify-content: center;
+        
+        .logo {
+            width: 36px;
+            height: 36px;
+            background: #C62828;
+            border-radius: 6px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 3px;
+            
+            img {
+                width: 30px;
+                height: 30px;
+            }
+        }
+        
+        .platform-title {
+            font-family: 'Taipei Sans TC Beta', sans-serif;
+            font-weight: 700;
+            font-size: 20px;
+            line-height: 1.31;
+            color: #141F38;
+            margin: 0;
+        }
+    }
+}
+
+.register-type-tabs {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 24px;
+    
+    .tab-item {
+        flex: 1;
+        padding: 12px 16px;
+        text-align: center;
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.65);
+        background: #F2F3F5;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.3s;
+        
+        &:hover {
+            background: #E8E8E8;
+        }
+        
+        &.active {
+            color: #FFFFFF;
+            background: #C62828;
+            font-weight: 500;
+        }
+    }
+}
+
+.register-form {
+    width: 100%;
+    
+    .form-title {
+        font-family: "Source Han Sans SC";
+        font-weight: 600;
+        font-size: 16px;
+        line-height: 1.5;
+        color: #141F38;
+        margin: 0 0 24px 0;
+        text-align: center;
+    }
+    
+    .form-input {
+        width: 100%;
+        height: 48px;
+        background: #F2F3F5;
+        border: none;
+        border-radius: 12px;
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.65);
+        
+        :deep(.el-input__wrapper) {
+            background: #F2F3F5;
+            border: none;
+            border-radius: 12px;
+            padding: 0 16px;
+            box-shadow: none;
+        }
+        
+        :deep(.el-input__inner) {
+            color: rgba(0, 0, 0, 0.65);
+            
+            &::placeholder {
+                color: rgba(0, 0, 0, 0.3);
+            }
+        }
+        
+        :deep(.el-input__wrapper:focus),
+        :deep(.el-input__wrapper.is-focus) {
+            background: #FFFFFF;
+            border: 1px solid #C62828;
+            box-shadow: none;
+        }
+    }
+    
+    .captcha-input-container {
+        display: flex;
+        gap: 8px;
+        width: 100%;
+        
+        .captcha-input {
+            flex: 1;
+        }
+        
+        .send-captcha-btn {
+            height: 48px;
+            padding: 0 12px;
+            background: #C62828;
+            border: none;
+            border-radius: 12px;
+            color: #FFFFFF;
+            font-size: 12px;
+            white-space: nowrap;
+            min-width: 90px;
+            
+            &:hover:not(:disabled) {
+                background: #B71C1C;
+            }
+            
+            &:disabled {
+                background: #D9D9D9;
+                color: rgba(0, 0, 0, 0.25);
+                cursor: not-allowed;
+            }
+        }
+    }
+    
+    .register-button {
+        width: 100%;
+        height: 46px;
+        background: #C62828;
+        border: none;
+        border-radius: 12px;
+        color: #FFFFFF;
+        font-family: "Source Han Sans SC";
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 1.4;
+        margin-bottom: 16px;
+        
+        &:hover {
+            background: #B71C1C;
+        }
+    }
+    
+    .agreement-text {
+        font-family: "Source Han Sans SC";
+        font-weight: 400;
+        font-size: 10px;
+        line-height: 1.8;
+        color: rgba(0, 0, 0, 0.3);
+        text-align: center;
+        margin: 0;
+        
+        :deep(.el-checkbox) {
+            .el-checkbox__label {
+                font-size: 10px;
+                color: rgba(0, 0, 0, 0.3);
+            }
+        }
+    }
+}
+
+.login-footer {
+    width: 100%;
+    max-width: 287px;
+    margin-top: 24px;
+    padding-bottom: 0;
+    
+    .register-link {
+        font-family: "Source Han Sans SC";
+        font-weight: 600;
+        font-size: 12px;
+        line-height: 1.83;
+        color: #141F38;
+        text-align: center;
+        margin: 0 0 16px 0;
+     
+        .register-link-text {
+            cursor: pointer;
+            color: #ff0000;
+            
+            &:hover {
+                color: #C62828;
+            }
+        }
+    }
+    
+    .copyright {
+        font-family: "Source Han Sans SC";
+        font-size: 12px;
+        line-height: 2;
+        color: #D9D9D9;
+        text-align: center;
+    }
+}
+
+// Element Plus 组件样式覆盖
+:deep(.el-form-item) {
+    margin-bottom: 16px;
+    
+    .el-form-item__content {
+        line-height: normal;
+    }
+}
+
+:deep(.el-form-item__error) {
+    font-size: 12px;
+    color: #F56C6C;
+    padding-top: 4px;
+}
+</style>

schoolNewsWeb/src/views/public/task/LearningProgress.vue

@@ -86,10 +86,10 @@ function getChartOption(): EChartsOption {
       }
     },
     grid: {
-      left: '0',
+      left: '5%',
-      right: '20px',
+      right: '5%',
-      top: '20px',
+      top: '10%',
-      bottom: '40px',
+      bottom: '15%',
       containLabel: true
     },
     xAxis: {
@@ -272,9 +272,91 @@ onUnmounted(() => {
       }
     }
   }
-}
 
   .chart-container {
     height: 243px;
+    width: 100%;
+    overflow: hidden; // 防止图表溢出
   }
+}
+
+// 移动端适配 - 重新布局
+@media (max-width: 768px) {
+  .learning-progress {
+    padding: 20px 16px 24px 16px;
+    height: auto;
+
+    .progress-header {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 16px;
+      margin-bottom: 20px;
+
+      .header-left {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+        width: 100%;
+
+        .progress-title {
+          font-size: 18px;
+          line-height: 24px;
+        }
+
+        .update-time {
+          font-size: 12px;
+          line-height: 18px;
+        }
+      }
+
+      .tab-buttons {
+        width: 100%;
+        justify-content: center;
+
+        .tab-btn {
+          flex: 1;
+          min-width: auto;
+          height: 36px;
+          font-size: 13px;
+        }
+      }
+    }
+
+    .chart-container {
+      height: 200px;
+      width: 100%;
+      overflow: hidden;
+    }
+  }
+}
+
+// 小屏移动端进一步优化
+@media (max-width: 480px) {
+  .learning-progress {
+    padding: 16px 12px 20px 12px;
+
+    .progress-header {
+      .header-left {
+        .progress-title {
+          font-size: 16px;
+          line-height: 22px;
+        }
+      }
+
+      .tab-buttons {
+        .tab-btn {
+          height: 32px;
+          font-size: 12px;
+          padding: 6px;
+        }
+      }
+    }
+
+    .chart-container {
+      height: 180px;
+      width: 100%;
+      overflow: hidden;
+    }
+  }
+}
 </style>

schoolNewsWeb/src/views/user/home/HomeView.vue

@@ -101,11 +101,14 @@ import { bannerApi } from '@/apis/resource/banner';
 import { recommendApi } from '@/apis/homepage';
 import { ElMessage } from 'element-plus';
 import type { Banner, ResourceRecommendVO } from '@/types';
-import dangIcon from '@/assets/imgs/dang.svg';
+import dangIconUrl from '@/assets/imgs/dang.svg';
 import { useRouter } from 'vue-router';
 
 const router = useRouter();
 
+// 将导入的SVG URL转换为响应式变量以供模板使用
+const dangIcon = ref(dangIconUrl);
+
 // 轮播数据
 const banners = ref<Banner[]>([]);
 const loading = ref(false);
@@ -318,4 +321,97 @@ onMounted(() => {
 @keyframes spin {
   to { transform: rotate(360deg); }
 }
+
+// 移动端适配
+@media (max-width: 768px) {
+  .home-view {
+    padding-bottom: 80px; // 为移动端底部导航留出空间
+  }
+
+  .banner-section {
+    height: 200px; // 移动端轮播图高度调整
+  }
+
+  .section {
+    padding: 0 16px; // 移动端左右内边距
+    margin-top: 24px; // 减少上边距
+
+    .section-header {
+      margin-bottom: 16px; // 减少底部边距
+
+      .section-title {
+        font-size: 20px; // 移动端标题字体大小
+        line-height: 28px;
+      }
+
+      .more-link {
+        span {
+          font-size: 14px; // 移动端"查看更多"字体
+          line-height: 20px;
+        }
+
+        .el-icon {
+          width: 14px;
+          height: 14px;
+        }
+      }
+    }
+
+    .article-grid {
+      grid-template-columns: 1fr; // 移动端单列布局
+      gap: 16px; // 减少间距
+    }
+
+    .loading-container,
+    .empty-container {
+      padding: 40px 0; // 减少垂直内边距
+      min-height: 120px; // 减少最小高度
+    }
+  }
+
+  // 轮播图移动端优化
+  .banner-loading,
+  .banner-empty {
+    p {
+      font-size: 12px; // 移动端提示文字
+    }
+  }
+
+  .loading-spinner {
+    width: 32px; // 移动端加载图标大小
+    height: 32px;
+    border-width: 2px;
+  }
+}
+
+// 小屏移动端进一步优化
+@media (max-width: 480px) {
+  .section {
+    padding: 0 12px; // 更小的内边距
+    margin-top: 20px;
+
+    .section-header {
+      margin-bottom: 12px;
+
+      .section-title {
+        font-size: 18px; // 更小的标题
+        line-height: 24px;
+      }
+
+      .more-link {
+        span {
+          font-size: 13px;
+        }
+      }
+    }
+
+    .article-grid {
+      gap: 12px; // 更小的间距
+    }
+  }
+
+  .banner-section {
+    height: 160px; // 小屏幕更小的轮播图高度
+  }
+}
 </style>

schoolNewsWeb/vite.config.js

@@ -63,7 +63,7 @@ export default defineConfig({
     // 代理配置
     proxy: {
       '/api': {
-        target: 'http://127.0.0.1:8081',
+        target: 'http://127.0.0.1:8082',
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, ''),
         configure: (proxy, options) => {