From 5bb1bbac26ea6ac8ca3e855f1c08ce769fa51e75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=BC=A0?= <2091066548@qq.com>
Date: Mon, 28 Jul 2025 23:29:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83=E6=A1=86?=
 =?UTF-8?q?=E6=9E=B6=E5=92=8C=E6=88=91=E7=9A=84=E8=AF=BE=E7=A8=8B=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Profile.vue | 1289 +++++++++++++++++++++++++++++++----------
 1 file changed, 994 insertions(+), 295 deletions(-)

diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 21d0ced..538e05b 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -1,367 +1,1066 @@
 <template>
-  <div class="profile">
-    <div class="container">
-      <div class="profile-container">
-        <!-- 侧边栏 -->
-        <div class="sidebar">
-          <n-menu
-            v-model:value="activeTab"
-            :options="menuOptions"
-            @update:value="handleMenuSelect"
-          />
-        </div>
-        
-        <!-- 主要内容 -->
-        <div class="main-content">
-          <!-- 个人信息 -->
-          <div v-if="activeTab === 'info'" class="profile-section">
-            <h2>个人信息</h2>
-            <n-form
-              ref="formRef"
-              :model="profileForm"
-              :rules="rules"
-              label-placement="left"
-              label-width="100px"
-            >
-              <n-form-item label="头像">
-                <div class="avatar-section">
-                  <SafeAvatar
-                    :src="userStore.user?.avatar"
-                    :name="userStore.user?.username"
-                    :size="100"
-                  />
-                  <n-button size="small" @click="handleAvatarUpload">
-                    更换头像
-                  </n-button>
-                </div>
-              </n-form-item>
-              
-              <n-form-item path="username" label="用户名">
-                <n-input v-model:value="profileForm.username" />
-              </n-form-item>
-              
-              <n-form-item path="email" label="邮箱">
-                <n-input v-model:value="profileForm.email" disabled />
-              </n-form-item>
-              
-              <n-form-item>
-                <n-button
-                  type="primary"
-                  :loading="userStore.isLoading"
-                  @click="handleUpdateProfile"
-                >
-                  保存修改
-                </n-button>
-              </n-form-item>
-            </n-form>
-          </div>
-          
-          <!-- 我的课程 -->
-          <div v-else-if="activeTab === 'courses'" class="profile-section">
-            <h2>我的课程</h2>
-            <div v-if="enrolledCourses.length > 0">
-              <n-grid :cols="2" :x-gap="24" :y-gap="24" responsive="screen">
-                <n-grid-item v-for="course in enrolledCourses" :key="course.id">
-                  <CourseCard :course="course" />
-                </n-grid-item>
-              </n-grid>
-            </div>
-            <div v-else class="empty-state">
-              <n-empty description="您还没有报名任何课程">
-                <template #extra>
-                  <n-button @click="$router.push('/courses')">
-                    去选课
-                  </n-button>
-                </template>
-              </n-empty>
-            </div>
-          </div>
-          
-          <!-- 学习统计 -->
-          <div v-else-if="activeTab === 'stats'" class="profile-section">
-            <h2>学习统计</h2>
-            <n-grid :cols="3" :x-gap="24" :y-gap="24" responsive="screen">
-              <n-grid-item>
-                <n-card>
-                  <n-statistic label="已报名课程" :value="enrolledCourses.length" />
-                </n-card>
-              </n-grid-item>
-              <n-grid-item>
-                <n-card>
-                  <n-statistic label="完成课程" :value="completedCourses" />
-                </n-card>
-              </n-grid-item>
-              <n-grid-item>
-                <n-card>
-                  <n-statistic label="学习时长" value="120" suffix="小时" />
-                </n-card>
-              </n-grid-item>
-            </n-grid>
-            
-            <div class="learning-progress">
-              <h3>学习进度</h3>
-              <div v-for="course in enrolledCourses" :key="course.id" class="progress-item">
-                <div class="course-info">
-                  <h4>{{ course.title }}</h4>
-                  <span class="progress-text">{{ course.progress || 0 }}%</span>
-                </div>
-                <n-progress
-                  type="line"
-                  :percentage="course.progress || 0"
-                  :show-indicator="false"
+  <div class="profile-page">
+    <!-- 主要内容区域 -->
+    <div class="profile-content flex-row">
+          <!-- 左侧侧边栏 -->
+          <div class="block_14">
+            <!-- 用户头像和姓名 -->
+            <img
+              class="image_7"
+              referrerpolicy="no-referrer"
+              :src="userStore.user?.avatar || 'https://via.placeholder.com/100'"
+            />
+            <span class="text_72">{{ userStore.user?.username || '用户名' }}</span>
+
+            <!-- 菜单项容器 -->
+            <div class="box_22">
+              <!-- 分割线 -->
+              <div class="menu-divider"></div>
+
+              <!-- 我的课程 -->
+              <div :class="['image-text_19', { active: activeTab === 'courses' }]" @click="handleMenuSelect('courses')">
+                <img
+                  class="image_8"
+                  referrerpolicy="no-referrer"
+                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng..."
                 />
+                <span class="text-group_19">我的课程</span>
+              </div>
+
+              <!-- 我的作业 -->
+              <div :class="['image-text_20', { active: activeTab === 'homework' }]" @click="handleMenuSelect('homework')">
+                <img
+                  class="label_4"
+                  referrerpolicy="no-referrer"
+                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng..."
+                />
+                <span class="text-group_20">我的作业</span>
+              </div>
+
+              <!-- 我的考试 -->
+              <div :class="['image-text_21', { active: activeTab === 'exam' }]" @click="handleMenuSelect('exam')">
+                <img
+                  class="label_5"
+                  referrerpolicy="no-referrer"
+                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng..."
+                />
+                <span class="text-group_21">我的考试</span>
+              </div>
+
+              <!-- 我的练习 -->
+              <div :class="['image-text_22', { active: activeTab === 'practice' }]" @click="handleMenuSelect('practice')">
+                <img
+                  class="label_6"
+                  referrerpolicy="no-referrer"
+                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng..."
+                />
+                <span class="text-group_22">我的练习</span>
+              </div>
+
+              <!-- 我的活动 -->
+              <div :class="['image-text_23', { active: activeTab === 'activity' }]" @click="handleMenuSelect('activity')">
+                <img
+                  class="thumbnail_40"
+                  referrerpolicy="no-referrer"
+                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng..."
+                />
+                <span class="text-group_23">我的活动</span>
+              </div>
+
+              <!-- 我的消息 -->
+              <div :class="['image-text_24', { active: activeTab === 'message' }]" @click="handleMenuSelect('message')">
+                <img
+                  class="label_7"
+                  referrerpolicy="no-referrer"
+                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng..."
+                />
+                <span class="text-group_24">我的消息</span>
+              </div>
+
+              <!-- 我的资料 -->
+              <div :class="['image-text_25', { active: activeTab === 'materials' }]" @click="handleMenuSelect('materials')">
+                <img
+                  class="image_9"
+                  referrerpolicy="no-referrer"
+                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng..."
+                />
+                <span class="text-group_25">我的资料</span>
+              </div>
+
+              <!-- 我的下载 -->
+              <div :class="['image-text_26', { active: activeTab === 'download' }]" @click="handleMenuSelect('download')">
+                <img
+                  class="thumbnail_41"
+                  referrerpolicy="no-referrer"
+                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng..."
+                />
+                <span class="text-group_26">我的下载</span>
               </div>
             </div>
           </div>
-          
-          <!-- 设置 -->
-          <div v-else-if="activeTab === 'settings'" class="profile-section">
-            <h2>账户设置</h2>
-            <div class="settings-section">
-              <h3>密码修改</h3>
-              <n-form label-placement="left" label-width="120px">
-                <n-form-item label="当前密码">
-                  <n-input type="password" placeholder="请输入当前密码" />
-                </n-form-item>
-                <n-form-item label="新密码">
-                  <n-input type="password" placeholder="请输入新密码" />
-                </n-form-item>
-                <n-form-item label="确认新密码">
-                  <n-input type="password" placeholder="请再次输入新密码" />
-                </n-form-item>
-                <n-form-item>
-                  <n-button type="primary">修改密码</n-button>
-                </n-form-item>
-              </n-form>
+
+          <!-- 右侧课程列表区域 -->
+          <div class="group_5 flex-col">
+            <!-- 课程筛选标签 -->
+            <div class="text-wrapper_1 flex-row">
+              <span class="text_12" :class="{ active: activeCourseTab === 'all' }" @click="handleCourseTabChange('all')">全部课程</span>
+              <span class="text_13" :class="{ active: activeCourseTab === 'learning' }" @click="handleCourseTabChange('learning')">学习中</span>
+              <span class="text_14" :class="{ active: activeCourseTab === 'completed' }" @click="handleCourseTabChange('completed')">已完结</span>
             </div>
-            
-            <div class="settings-section">
-              <h3>通知设置</h3>
-              <n-space vertical>
-                <n-checkbox>接收课程更新通知</n-checkbox>
-                <n-checkbox>接收学习提醒</n-checkbox>
-                <n-checkbox>接收优惠活动通知</n-checkbox>
-              </n-space>
+
+            <!-- 分割线 -->
+            <div class="course-divider"></div>
+
+            <!-- 课程列表 -->
+            <div class="course-list">
+              <!-- 学习中的课程 -->
+              <div v-for="course in filteredCourses" :key="course.id" class="box_2 flex-row justify-between">
+                <div class="block_4 flex-col">
+                  <div class="box_3 flex-row justify-between">
+                    <img
+                      class="thumbnail_4"
+                      referrerpolicy="no-referrer"
+                      :src="course.thumbnail"
+                    />
+                    <span :class="['status-text', course.status]">{{ getStatusText(course.status) }}</span>
+                  </div>
+                </div>
+
+                <div class="block_5 flex-col">
+                  <div class="group_6 flex-row">
+                    <span class="text_16">{{ course.title }}</span>
+                    <img
+                      class="thumbnail_5"
+                      referrerpolicy="no-referrer"
+                      src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnge131c44858bb817d4885b81fdd8ddff8507f62cd51f1025cee826849e6a52c65"
+                    />
+                    <span class="text_17">{{ course.rating || 541 }}</span>
+                  </div>
+                  <span class="text_18">讲师：{{ course.instructor }}</span>
+                  <span class="text_19">{{ course.description }}</span>
+
+                  <div class="group_7 flex-row">
+                    <img
+                      class="thumbnail_6"
+                      referrerpolicy="no-referrer"
+                      src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng285a469537e55535ddd8097d697f25ce2f6071710544f034603554ee4d34f832"
+                    />
+                    <span class="text_20">共{{ course.chapters || 9 }}章{{ course.lessons || 54 }}节</span>
+                    <img
+                      class="thumbnail_7"
+                      referrerpolicy="no-referrer"
+                      src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng23376f42e0d0f21014efca4f1a7ee3c5efa70f6e1419d0d3e6c4a680191c7ef5"
+                    />
+                    <span class="text_21">{{ course.duration || '12小时43分钟' }}</span>
+                    <img
+                      class="thumbnail_8"
+                      referrerpolicy="no-referrer"
+                      :src="course.status === 'learning' ? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng51c1f99cd7b1c15c6efdc0480d16ff2681be4bef17a9dedfcaac33f2976fbd81' : 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng317a0d8f3287bb788c48059c8181479ad5eba8557ef1c09215d9a1c962d0db67'"
+                    />
+                    <span class="text_22">已看{{ course.watchedTime || '10小时20分钟' }}</span>
+                    <div class="text-wrapper_2 flex-col" @click="goToCourse(course.id)">
+                      <span class="text_23">{{ course.status === 'learning' ? '去学习' : '去复习' }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 分页器 -->
+            <div class="pagination-wrapper" v-if="totalPages > 1">
+              <div class="pagination">
+                <span
+                  class="pagination-item nav-button"
+                  :class="{ disabled: currentPage === 1 }"
+                  @click="goToPage('first')"
+                >
+                  首页
+                </span>
+                <span
+                  class="pagination-item nav-button"
+                  :class="{ disabled: currentPage === 1 }"
+                  @click="goToPage('prev')"
+                >
+                  上一页
+                </span>
+
+                <span
+                  v-for="page in totalPages"
+                  :key="page"
+                  class="pagination-item page-number"
+                  :class="{ active: page === currentPage }"
+                  @click="goToPage(page)"
+                >
+                  {{ page }}
+                </span>
+
+                <span
+                  class="pagination-item nav-button"
+                  :class="{ disabled: currentPage === totalPages }"
+                  @click="goToPage('next')"
+                >
+                  下一页
+                </span>
+                <span
+                  class="pagination-item nav-button"
+                  :class="{ disabled: currentPage === totalPages }"
+                  @click="goToPage('last')"
+                >
+                  尾页
+                </span>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </div>
+
+
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted, h } from 'vue'
-import { useMessage, type FormInst, type FormRules } from 'naive-ui'
+import { ref, computed, onMounted } from 'vue'
+import { useMessage } from 'naive-ui'
 import { useUserStore } from '@/stores/user'
-import { useCourseStore } from '@/stores/course'
-import CourseCard from '@/components/course/CourseCard.vue'
-import SafeAvatar from '@/components/common/SafeAvatar.vue'
-import {
-  PersonOutline,
-  BookOutline,
-  StatsChartOutline,
-  SettingsOutline
-} from '@vicons/ionicons5'
+
+// 定义课程接口
+interface Course {
+  id: number
+  title: string
+  instructor: string
+  description: string
+  thumbnail: string
+  status: 'learning' | 'completed'
+  rating?: number
+  chapters?: number
+  lessons?: number
+  duration?: string
+  watchedTime?: string
+  progress?: number
+}
 
 const message = useMessage()
 const userStore = useUserStore()
-const courseStore = useCourseStore()
 
-const activeTab = ref('info')
-const formRef = ref<FormInst | null>(null)
+const activeTab = ref('courses')
+const activeCourseTab = ref('all')
 
-// 个人信息表单
-const profileForm = reactive({
-  username: '',
-  email: ''
-})
+// 分页相关状态
+const currentPage = ref(1)
+const pageSize = ref(5) // 每页显示5个课程
 
-// 表单验证规则
-const rules: FormRules = {
-  username: [
-    {
-      required: true,
-      message: '请输入用户名',
-      trigger: ['input', 'blur']
-    }
-  ]
-}
-
-// 菜单选项
-const menuOptions = [
+// 模拟课程数据（基于蓝湖UI设计）
+const mockCourses: Course[] = [
   {
-    label: '个人信息',
-    key: 'info',
-    icon: () => h(PersonOutline)
+    id: 1,
+    title: '教育心理学的起源',
+    instructor: '代方枚  史雯',
+    description: '本课程紧跟风向，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引领，强调课程内容的易用性和岗位要求的匹配性，课程内容与全国计算机等级考试、"1+X"WPS办公应用职业技能等级证书，技能…',
+    thumbnail: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd0745b9ee85d1fd2251cde7df5f13cdc38cfb57ba7f1ca467638a1196af0a4fc',
+    status: 'learning',
+    rating: 541,
+    chapters: 9,
+    lessons: 54,
+    duration: '12小时43分钟',
+    watchedTime: '10小时20分钟',
+    progress: 75
   },
   {
-    label: '我的课程',
-    key: 'courses',
-    icon: () => h(BookOutline)
+    id: 2,
+    title: '现代教育技术应用',
+    instructor: '代方枚  史雯',
+    description: '本课程紧跟风向，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引领，强调课程内容的易用性和岗位要求的匹配性，课程内容与全国计算机等级考试、"1+X"WPS办公应用职业技能等级证书，技能…',
+    thumbnail: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng80fbbc0cab537164b6d85a9a7dcea31848f9becbaceafadb4ea618af4fde9554',
+    status: 'completed',
+    rating: 541,
+    chapters: 9,
+    lessons: 54,
+    duration: '12小时43分钟',
+    watchedTime: '10小时20分钟',
+    progress: 100
   },
   {
-    label: '学习统计',
-    key: 'stats',
-    icon: () => h(StatsChartOutline)
+    id: 3,
+    title: '课程设计与开发',
+    instructor: '代方枚  史雯',
+    description: '本课程紧跟风向，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引领，强调课程内容的易用性和岗位要求的匹配性，课程内容与全国计算机等级考试、"1+X"WPS办公应用职业技能等级证书，技能…',
+    thumbnail: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng80fbbc0cab537164b6d85a9a7dcea31848f9becbaceafadb4ea618af4fde9554',
+    status: 'completed',
+    rating: 541,
+    chapters: 9,
+    lessons: 54,
+    duration: '12小时43分钟',
+    watchedTime: '10小时20分钟',
+    progress: 100
   },
   {
-    label: '账户设置',
-    key: 'settings',
-    icon: () => h(SettingsOutline)
+    id: 4,
+    title: '现代教育技术应用',
+    instructor: '代方枚  史雯',
+    description: '本课程紧跟风向，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引领，强调课程内容的易用性和岗位要求的匹配性，课程内容与全国计算机等级考试、"1+X"WPS办公应用职业技能等级证书，技能…',
+    thumbnail: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng80fbbc0cab537164b6d85a9a7dcea31848f9becbaceafadb4ea618af4fde9554',
+    status: 'learning',
+    rating: 541,
+    chapters: 9,
+    lessons: 54,
+    duration: '12小时43分钟',
+    watchedTime: '8小时15分钟',
+    progress: 65
+  },
+  {
+    id: 5,
+    title: '数字化教学设计',
+    instructor: '代方枚  史雯',
+    description: '本课程紧跟风向，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引领，强调课程内容的易用性和岗位要求的匹配性，课程内容与全国计算机等级考试、"1+X"WPS办公应用职业技能等级证书，技能…',
+    thumbnail: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng80fbbc0cab537164b6d85a9a7dcea31848f9becbaceafadb4ea618af4fde9554',
+    status: 'learning',
+    rating: 541,
+    chapters: 9,
+    lessons: 54,
+    duration: '12小时43分钟',
+    watchedTime: '5小时30分钟',
+    progress: 45
+  },
+  {
+    id: 6,
+    title: '在线教育平台运营',
+    instructor: '代方枚  史雯',
+    description: '本课程紧跟风向，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引领，强调课程内容的易用性和岗位要求的匹配性，课程内容与全国计算机等级考试、"1+X"WPS办公应用职业技能等级证书，技能…',
+    thumbnail: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng80fbbc0cab537164b6d85a9a7dcea31848f9becbaceafadb4ea618af4fde9554',
+    status: 'completed',
+    rating: 541,
+    chapters: 9,
+    lessons: 54,
+    duration: '12小时43分钟',
+    watchedTime: '12小时43分钟',
+    progress: 100
+  },
+  {
+    id: 7,
+    title: '教学评估与反馈',
+    instructor: '代方枚  史雯',
+    description: '本课程紧跟风向，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引领，强调课程内容的易用性和岗位要求的匹配性，课程内容与全国计算机等级考试、"1+X"WPS办公应用职业技能等级证书，技能…',
+    thumbnail: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng80fbbc0cab537164b6d85a9a7dcea31848f9becbaceafadb4ea618af4fde9554',
+    status: 'learning',
+    rating: 541,
+    chapters: 9,
+    lessons: 54,
+    duration: '12小时43分钟',
+    watchedTime: '3小时20分钟',
+    progress: 25
+  },
+  {
+    id: 8,
+    title: '智能教育工具应用',
+    instructor: '代方枚  史雯',
+    description: '本课程紧跟风向，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引领，强调课程内容的易用性和岗位要求的匹配性，课程内容与全国计算机等级考试、"1+X"WPS办公应用职业技能等级证书，技能…',
+    thumbnail: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng80fbbc0cab537164b6d85a9a7dcea31848f9becbaceafadb4ea618af4fde9554',
+    status: 'completed',
+    rating: 541,
+    chapters: 9,
+    lessons: 54,
+    duration: '12小时43分钟',
+    watchedTime: '12小时43分钟',
+    progress: 100
   }
 ]
 
-// 已报名课程
-const enrolledCourses = computed(() => courseStore.enrolledCourses)
+// 获取筛选后的所有课程
+const allFilteredCourses = computed(() => {
+  if (activeCourseTab.value === 'learning') {
+    return mockCourses.filter(course => course.status === 'learning')
+  } else if (activeCourseTab.value === 'completed') {
+    return mockCourses.filter(course => course.status === 'completed')
+  }
+  return mockCourses
+})
 
-// 完成课程数量
-const completedCourses = computed(() => {
-  return enrolledCourses.value.filter(course => course.progress === 100).length
+// 计算总页数
+const totalPages = computed(() => {
+  return Math.ceil(allFilteredCourses.value.length / pageSize.value)
+})
+
+// 当前页显示的课程
+const filteredCourses = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  const end = start + pageSize.value
+  return allFilteredCourses.value.slice(start, end)
 })
 
 // 处理菜单选择
 const handleMenuSelect = (key: string) => {
   activeTab.value = key
+  message.info(`切换到${key}页面`)
 }
 
-// 处理头像上传
-const handleAvatarUpload = () => {
-  message.info('头像上传功能待实现')
-}
-
-// 处理更新个人信息
-const handleUpdateProfile = async () => {
-  if (!formRef.value) return
-
-  try {
-    await formRef.value.validate()
-    
-    const result = await userStore.updateProfile({
-      username: profileForm.username
-    })
-
-    if (result.success) {
-      message.success(result.message)
-    } else {
-      message.error(result.message)
-    }
-  } catch (error) {
-    console.error('表单验证失败:', error)
+// 获取状态文本
+const getStatusText = (status: string) => {
+  switch (status) {
+    case 'learning':
+      return '学习中'
+    case 'completed':
+      return '已完结'
+    default:
+      return '未开始'
   }
 }
 
+// 跳转到课程
+const goToCourse = (courseId: number) => {
+  message.info(`跳转到课程 ${courseId}`)
+}
+
+// 分页器方法
+const goToPage = (page: number | string) => {
+  if (typeof page === 'number') {
+    if (page >= 1 && page <= totalPages.value) {
+      currentPage.value = page
+    }
+  } else {
+    switch (page) {
+      case 'first':
+        if (currentPage.value > 1) {
+          currentPage.value = 1
+        }
+        break
+      case 'prev':
+        if (currentPage.value > 1) {
+          currentPage.value--
+        }
+        break
+      case 'next':
+        if (currentPage.value < totalPages.value) {
+          currentPage.value++
+        }
+        break
+      case 'last':
+        if (currentPage.value < totalPages.value) {
+          currentPage.value = totalPages.value
+        }
+        break
+    }
+  }
+}
+
+// 监听筛选变化，重置到第一页
+const handleCourseTabChange = (tab: string) => {
+  activeCourseTab.value = tab
+  currentPage.value = 1
+}
+
 onMounted(() => {
-  // 初始化表单数据
-  if (userStore.user) {
-    profileForm.username = userStore.user.username
-    profileForm.email = userStore.user.email
-  }
+  // 初始化
 })
 </script>
 
 <style scoped>
-.profile {
-  min-height: 100vh;
-  padding: 40px 0;
-}
-
-.profile-container {
-  display: grid;
-  grid-template-columns: 250px 1fr;
-  gap: 40px;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.sidebar {
-  background: white;
-  border-radius: 12px;
-  padding: 24px 0;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  height: fit-content;
-}
-
-.main-content {
-  background: white;
-  border-radius: 12px;
-  padding: 32px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.profile-section h2 {
-  margin: 0 0 32px;
-  color: #333;
-  font-size: 24px;
-}
-
-.avatar-section {
+/* 基础布局类 */
+.flex-col {
   display: flex;
-  align-items: center;
-  gap: 16px;
+  flex-direction: column;
 }
 
-.empty-state {
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+/* 主页面容器 */
+.profile-page {
+  width: 100vw;
+  min-height: calc(100vh - 6.4vh); /* 减去顶部导航栏高度 */
+  background: #f6f6f6;
+  padding: 0;
   display: flex;
   justify-content: center;
-  align-items: center;
-  min-height: 300px;
 }
 
-.learning-progress {
-  margin-top: 32px;
+/* 主要内容区域 */
+.profile-content {
+  width: 80vw; /* 调整为80vw */
+  min-height: calc(100vh - 6.4vh);
+  margin: 2.08vh auto 0 auto; /* 距离顶部40px转换为vh */
+  position: relative;
+  background: #f6f6f6;
 }
 
-.learning-progress h3 {
-  margin-bottom: 24px;
-  color: #333;
-}
-
-.progress-item {
-  margin-bottom: 24px;
-}
-
-.progress-item .course-info {
+/* 左侧侧边栏 */
+.block_14 {
+  position: relative;
+  width: 13.4vw; /* 20vw缩小33% = 20vw * 0.67 = 13.4vw */
+  min-height: calc(100vh - 6.4vh);
+  background: #ffffff; /* 改为白色背景 */
+  border-right: 0.05vw solid rgba(232, 232, 232, 1);
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* 内容居中 */
+}
+
+/* 用户头像和姓名 */
+.image_7 {
+  width: 5vw; /* 调整头像大小 */
+  height: 5vw;
+  border-radius: 50%;
+  margin: 2.6vh auto 0 auto; /* 居中显示 */
+  object-fit: cover;
+  display: block;
+}
+
+.text_72 {
+  width: 100%;
+  height: auto;
+  font-size: 1.1vw; /* 调整字体大小 */
+  color: rgba(0, 0, 0, 1);
+  font-family: 'Microsoft YaHei', Arial, sans-serif;
+  font-weight: normal;
+  text-align: center;
+  line-height: 1.6vh;
+  margin: 0.9vh 0 0 0; /* 居中显示 */
+}
+
+/* 菜单背景 */
+.box_22 {
+  width: 12vw; /* 调整菜单背景宽度，适应缩小的导航栏 */
+  height: auto; /* 自适应高度 */
+  background: transparent; /* 去掉背景色 */
+  border-radius: 0.6vw; /* 12px转换为vw */
+  margin: 2.55vh 0; /* 去掉左右边距，因为父容器已经居中 */
+  padding: 1.04vh 0; /* 20px 0转换 */
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* 菜单项居中 */
+}
+
+/* 分割线 */
+.menu-divider {
+  width: 10vw; /* 与菜单项宽度一致 */
+  height: 0.05vh; /* 1px转换为vh */
+  background: #E6E6E6;
+  margin: 1.5vh 0; /* 上下间距 */
+}
+
+/* 菜单项 */
+.image-text_19, .image-text_20, .image-text_21, .image-text_22,
+.image-text_23, .image-text_24, .image-text_25, .image-text_26 {
+  width: 10vw; /* 进一步缩小菜单项宽度，适应新的导航栏宽度 */
+  height: auto; /* 自适应高度 */
+  min-height: 3vh; /* 设置最小高度，让盒子更大 */
+  margin: 1.5vh 0; /* 减小间距：从2.34vh减少到1.5vh */
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-bottom: 8px;
+  justify-content: center; /* 菜单项内容居中 */
+  cursor: pointer;
+  padding: 1.2vh 0.5vw; /* 增加上下内边距，让盒子更高 */
+  border-radius: 0.31vw; /* 6px转换为vw */
+  transition: all 0.3s ease;
+  background: transparent; /* 默认透明背景 */
 }
 
-.progress-item h4 {
-  margin: 0;
-  color: #333;
-  font-size: 16px;
+.image-text_19:hover, .image-text_20:hover, .image-text_21:hover, .image-text_22:hover,
+.image-text_23:hover, .image-text_24:hover, .image-text_25:hover, .image-text_26:hover {
+  background: #eff7fc; /* 悬停时背景色 */
 }
 
-.progress-text {
-  color: #666;
-  font-size: 14px;
+/* 激活状态的菜单项 */
+.image-text_19.active, .image-text_20.active, .image-text_21.active, .image-text_22.active,
+.image-text_23.active, .image-text_24.active, .image-text_25.active, .image-text_26.active {
+  background: #eff7fc; /* 激活时背景色 */
 }
 
-.settings-section {
-  margin-bottom: 40px;
+/* 菜单图标 */
+.image_8, .label_4, .label_5, .label_6, .thumbnail_40, .label_7, .image_9, .thumbnail_41 {
+  width: 1.04vw; /* 20px转换为vw */
+  height: 1.04vw;
+  margin-right: 0.78vw; /* 15px转换为vw */
 }
 
-.settings-section h3 {
-  margin-bottom: 24px;
-  color: #333;
-  font-size: 18px;
+/* 菜单文字 */
+.text-group_19, .text-group_20, .text-group_21, .text-group_22,
+.text-group_23, .text-group_24, .text-group_25, .text-group_26 {
+  font-size: 1.04vw; /* 20px转换为vw */
+  color: rgba(102, 102, 102, 1); /* 默认灰色 */
+  font-family: 'Microsoft YaHei', Arial, sans-serif;
+  font-weight: normal;
+  line-height: 1.46vh; /* 28px转换为vh */
+  transition: color 0.3s ease;
+}
+
+/* 激活状态的菜单文字颜色 */
+.image-text_19.active .text-group_19,
+.image-text_20.active .text-group_20,
+.image-text_21.active .text-group_21,
+.image-text_22.active .text-group_22,
+.image-text_23.active .text-group_23,
+.image-text_24.active .text-group_24,
+.image-text_25.active .text-group_25,
+.image-text_26.active .text-group_26 {
+  color: rgba(2, 134, 206, 1); /* 激活时蓝色 */
+}
+
+/* 悬停状态的菜单文字颜色 */
+.image-text_19:hover .text-group_19,
+.image-text_20:hover .text-group_20,
+.image-text_21:hover .text-group_21,
+.image-text_22:hover .text-group_22,
+.image-text_23:hover .text-group_23,
+.image-text_24:hover .text-group_24,
+.image-text_25:hover .text-group_25,
+.image-text_26:hover .text-group_26 {
+  color: rgba(2, 134, 206, 1); /* 悬停时蓝色 */
+}
+
+/* 右侧课程列表区域 */
+.group_5 {
+  width: 60vw; /* 保持60vw宽度 */
+  min-height: calc(100vh - 6.4vh);
+  padding: 2.08vh 2.08vw; /* 40px转换为vh和vw */
+  background: rgba(255, 255, 255, 1);
+  overflow-y: auto;
+  margin-left: 1.56vw; /* 30px转换为vw：30/1920*100 = 1.56vw */
+}
+
+/* 课程筛选标签 */
+.text-wrapper_1 {
+  width: 100%;
+  height: 2.08vh; /* 40px转换为vh */
+  align-items: center;
+  margin-bottom: 1.67vh; /* 32px转换为vh */
+  gap: 2.81vw; /* 54px转换为vw：54/1920*100 = 2.81vw */
+}
+
+.text_12, .text_13, .text_14 {
+  font-size: 0.94vw; /* 18px转换为vw */
+  color: rgba(102, 102, 102, 1);
+  font-family: 'Microsoft YaHei', Arial, sans-serif;
+  font-weight: normal;
+  cursor: pointer;
+  padding: 0.42vh 0; /* 去掉左右内边距，只保留上下 */
+  transition: color 0.3s ease; /* 只保留颜色过渡 */
+  background: transparent; /* 确保背景透明 */
+}
+
+.text_12.active, .text_13.active, .text_14.active {
+  color: rgba(2, 134, 206, 1); /* 只改变字体颜色，去掉背景色 */
+}
+
+.text_12:hover, .text_13:hover, .text_14:hover {
+  color: rgba(2, 134, 206, 1);
+}
+
+/* 课程区域分割线 */
+.course-divider {
+  width: 100%; /* 与课程卡片宽度一致 */
+  height: 0.05vh; /* 1px转换为vh */
+  background: #E6E6E6;
+  margin-bottom: 1.67vh; /* 与课程列表的间距 */
+}
+
+/* 课程列表 */
+.course-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25vh; /* 24px转换为vh */
+}
+
+/* 课程卡片 */
+.box_2 {
+  width: 100%;
+  min-height: 10.42vh; /* 200px转换为vh */
+  background: rgba(255, 255, 255, 1);
+  border: none; /* 去掉边框 */
+  border-radius: 0.6vw; /* 12px转换为vw */
+  padding: 1.04vh 1.04vw; /* 20px转换 */
+  transition: all 0.3s ease;
+}
+
+.box_2:hover {
+  box-shadow: 0 0.21vh 1.04vh rgba(0, 0, 0, 0.1); /* 0 4px 20px转换 */
+  transform: translateY(-0.1vh); /* -2px转换为vh */
+}
+
+/* 课程缩略图区域 */
+.block_4 {
+  width: 10.42vw; /* 200px转换为vw */
+  margin-right: 1.04vw; /* 20px转换为vw */
+}
+
+.box_3 {
+  width: 10.42vw; /* 200px转换为vw */
+  height: 7.81vh; /* 150px转换为vh */
+  position: relative;
+  border-radius: 0.42vw; /* 8px转换为vw */
+  overflow: hidden;
+}
+
+.thumbnail_4 {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* 状态标签 */
+.status-text {
+  position: absolute;
+  top: 0.63vh; /* 12px转换为vh */
+  left: 0.63vw; /* 12px转换为vw */
+  padding: 0.21vh 0.63vw; /* 4px 12px转换 */
+  border-radius: 0.21vw; /* 4px转换为vw */
+  font-size: 0.63vw; /* 12px转换为vw */
+  color: rgba(255, 255, 255, 1);
+  font-weight: 500;
+}
+
+.status-text.learning {
+  background: rgba(82, 196, 26, 1);
+}
+
+.status-text.completed {
+  background: rgba(24, 144, 255, 1);
+}
+
+/* 课程信息区域 */
+.block_5 {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 课程标题和评分 */
+.group_6 {
+  align-items: center;
+  margin-bottom: 0.42vh; /* 8px转换为vh */
+  gap: 0.63vw; /* 12px转换为vw */
+}
+
+.text_16 {
+  font-size: 0.94vw; /* 18px转换为vw */
+  color: rgba(51, 51, 51, 1);
+  font-family: 'Microsoft YaHei', Arial, sans-serif;
+  font-weight: 500;
+  flex: 1;
+}
+
+.thumbnail_5 {
+  width: 0.83vw; /* 16px转换为vw */
+  height: 0.83vw;
+}
+
+.text_17 {
+  font-size: 0.73vw; /* 14px转换为vw */
+  color: rgba(250, 173, 20, 1);
+  font-family: 'Microsoft YaHei', Arial, sans-serif;
+  font-weight: normal;
+}
+
+/* 讲师信息 */
+.text_18 {
+  font-size: 0.73vw; /* 14px转换为vw */
+  color: rgba(102, 102, 102, 1);
+  font-family: 'Microsoft YaHei', Arial, sans-serif;
+  font-weight: normal;
+  margin-bottom: 0.42vh; /* 8px转换为vh */
+}
+
+/* 课程描述 */
+.text_19 {
+  font-size: 0.73vw; /* 14px转换为vw */
+  color: rgba(102, 102, 102, 1);
+  font-family: 'Microsoft YaHei', Arial, sans-serif;
+  font-weight: normal;
+  line-height: 1.5;
+  margin-bottom: 0.83vh; /* 16px转换为vh */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* 课程统计信息 */
+.group_7 {
+  align-items: center;
+  gap: 1.04vw; /* 20px转换为vw */
+}
+
+.thumbnail_6, .thumbnail_7, .thumbnail_8 {
+  width: 0.83vw; /* 16px转换为vw */
+  height: 0.83vw;
+}
+
+.text_20, .text_21, .text_22 {
+  font-size: 0.73vw; /* 14px转换为vw */
+  color: rgba(102, 102, 102, 1);
+  font-family: 'Microsoft YaHei', Arial, sans-serif;
+  font-weight: normal;
+}
+
+/* 操作按钮 */
+.text-wrapper_2 {
+  background: rgba(2, 134, 206, 1);
+  border-radius: 0.31vw; /* 6px转换为vw */
+  padding: 0.42vh 0.83vw; /* 8px 16px转换 */
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  margin-left: auto;
+}
+
+.text-wrapper_2:hover {
+  background: rgba(2, 134, 206, 0.8);
+}
+
+.text_23 {
+  font-size: 0.73vw; /* 14px转换为vw */
+  color: rgba(255, 255, 255, 1);
+  font-family: 'Microsoft YaHei', Arial, sans-serif;
+  font-weight: normal;
+  text-align: center;
+}
+
+/* 分页器样式 */
+.pagination-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: 4.17vh; /* 80px转换为vh，增加上方间距 */
+  padding: 1.04vh 0; /* 20px转换为vh */
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: 0.52vw; /* 10px转换为vw */
+}
+
+.pagination-item {
+  min-width: 2.08vw; /* 40px转换为vw */
+  height: 2.08vh; /* 40px转换为vh */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.73vw; /* 14px转换为vw */
+  color: rgba(102, 102, 102, 1);
+  font-family: 'Microsoft YaHei', Arial, sans-serif;
+  cursor: pointer;
+  border-radius: 0.21vw; /* 4px转换为vw */
+  transition: all 0.3s ease;
+  padding: 0.52vh 0.83vw; /* 10px 16px转换 */
+  background: rgba(255, 255, 255, 1);
+  border: 0.05vw solid rgba(232, 232, 232, 1);
+}
+
+.pagination-item:hover {
+  color: rgba(2, 134, 206, 1);
+  border-color: rgba(2, 134, 206, 1);
+}
+
+.pagination-item.active {
+  background: rgba(2, 134, 206, 1);
+  color: rgba(255, 255, 255, 1);
+  border-color: rgba(2, 134, 206, 1);
+}
+
+.pagination-item.disabled {
+  color: rgba(204, 204, 204, 1);
+  cursor: not-allowed;
+  border-color: rgba(232, 232, 232, 1);
+  background: rgba(248, 248, 248, 1);
+}
+
+.pagination-item.disabled:hover {
+  color: rgba(204, 204, 204, 1);
+  border-color: rgba(232, 232, 232, 1);
+  background: rgba(248, 248, 248, 1);
+}
+
+.nav-button {
+  min-width: 3.65vw; /* 70px转换为vw，导航按钮稍宽一些 */
+}
+
+.page-number {
+  min-width: 2.08vw; /* 40px转换为vw，页码按钮保持原宽度 */
+}
+
+/* 响应式设计 */
+@media (max-width: 1440px) {
+  .profile-page {
+    max-width: 100vw;
+  }
+
+  .profile-content {
+    max-width: 100vw;
+  }
+}
+
+@media (max-width: 1024px) {
+  .profile-content {
+    flex-direction: column;
+  }
+
+  .block_14 {
+    width: 100%;
+    min-height: auto;
+    order: 2;
+    border-right: none;
+    border-top: 0.05vw solid rgba(232, 232, 232, 1);
+  }
+
+  .group_5 {
+    width: 100%;
+    order: 1;
+    min-height: auto;
+    margin-left: 0; /* 移动端取消左边距 */
+  }
+
+  .box_2 {
+    flex-direction: column;
+  }
+
+  .block_4 {
+    width: 100%;
+    margin-right: 0;
+    margin-bottom: 0.83vh; /* 16px转换为vh */
+  }
+
+  .box_3 {
+    width: 100%;
+    height: 10.42vh; /* 200px转换为vh */
+  }
+
+  /* 调整用户信息区域为横向布局 */
+  .image_7 {
+    margin: 1.04vh 0 0 1.04vw; /* 20px转换 */
+    width: 4.17vw; /* 80px转换为vw */
+    height: 4.17vw;
+  }
+
+  .text_72 {
+    margin: 1.04vh 0 0 1.04vw; /* 20px转换 */
+    width: auto;
+    text-align: left;
+  }
+
+  .box_22 {
+    margin: 1.04vh 0; /* 移动端保持居中 */
+    width: 90%; /* 移动端调整宽度 */
+    height: auto;
+    padding: 1.04vh 0; /* 移动端调整内边距 */
+  }
+
+  .image-text_19, .image-text_20, .image-text_21, .image-text_22,
+  .image-text_23, .image-text_24, .image-text_25, .image-text_26 {
+    width: 80%; /* 移动端菜单项宽度 */
+    margin: 1.5vh 0; /* 保持与桌面端一致的间距 */
+    padding: 1.2vh 2vw; /* 保持与桌面端一致的内边距 */
+    min-height: 3vh; /* 保持最小高度 */
+  }
+
+  .menu-divider {
+    width: 80%; /* 移动端分割线宽度 */
+    margin: 1.5vh 0;
+  }
 }
 
 @media (max-width: 768px) {
-  .profile-container {
-    grid-template-columns: 1fr;
-    gap: 24px;
+  .group_5 {
+    padding: 1.04vh 1.04vw; /* 20px转换 */
   }
-  
-  .sidebar {
-    order: 2;
+
+  .text-wrapper_1 {
+    justify-content: flex-start; /* 改为左对齐 */
+    gap: 4vw; /* 手机端调整间距 */
+    flex-wrap: wrap;
   }
-  
-  .main-content {
-    order: 1;
-    padding: 24px;
+
+  .text_12, .text_13, .text_14 {
+    font-size: 2.5vw; /* 手机端调整字体大小 */
+    padding: 0.8vh 0; /* 保持无左右内边距 */
+  }
+
+  .course-divider {
+    width: 100%; /* 手机端也保持与课程卡片宽度一致 */
+  }
+
+  .pagination-wrapper {
+    margin-top: 6vh; /* 手机端增加更多上方间距 */
+  }
+
+  .pagination {
+    gap: 2vw; /* 手机端增加间距 */
+  }
+
+  .pagination-item {
+    min-width: 8vw; /* 手机端增加按钮宽度 */
+    height: 4vh; /* 手机端增加按钮高度 */
+    font-size: 2.5vw; /* 手机端调整字体大小 */
+    padding: 1vh 2vw;
+  }
+
+  .nav-button {
+    min-width: 12vw; /* 手机端导航按钮更宽 */
+  }
+
+  .page-number {
+    min-width: 8vw; /* 手机端页码按钮宽度 */
+  }
+
+  .group_7 {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.42vh; /* 8px转换为vh */
+  }
+
+  .box_2 {
+    padding: 0.83vh 0.83vw; /* 16px转换 */
+  }
+
+  .block_4 {
+    margin-bottom: 0.63vh; /* 12px转换为vh */
+  }
+
+  .box_3 {
+    height: 9.38vh; /* 180px转换为vh */
   }
 }
-</style>
+
+@media (max-width: 576px) {
+  .profile-page {
+    padding: 0;
+  }
+
+  .group_5 {
+    padding: 0.83vh 0.83vw; /* 16px转换 */
+  }
+
+  .text-wrapper_1 {
+    gap: 0.83vw; /* 16px转换为vw */
+  }
+
+  .text_12, .text_13, .text_14 {
+    font-size: 0.83vw; /* 16px转换为vw */
+    padding: 0.31vh 0.63vw; /* 6px 12px转换 */
+  }
+
+  .box_2 {
+    padding: 0.63vh 0.63vw; /* 12px转换 */
+  }
+
+  .text_16 {
+    font-size: 0.83vw; /* 16px转换为vw */
+  }
+
+  .text_19 {
+    font-size: 0.68vw; /* 13px转换为vw */
+  }
+
+  .group_7 {
+    gap: 0.31vh; /* 6px转换为vh */
+  }
+
+  .text_20, .text_21, .text_22 {
+    font-size: 0.63vw; /* 12px转换为vw */
+  }
+}
+</style>
\ No newline at end of file