diff --git a/src/api/modules/system.ts b/src/api/modules/system.ts
index fd85873..6972d58 100644
--- a/src/api/modules/system.ts
+++ b/src/api/modules/system.ts
@@ -1,4 +1,4 @@
-import { request } from '../request'
+import request from '../request'
 import type { ApiResponse } from '../types'
 
 export interface SystemSettings {
diff --git a/src/utils/maintenanceGuard.ts b/src/utils/maintenanceGuard.ts
index d8adca5..bb5638f 100644
--- a/src/utils/maintenanceGuard.ts
+++ b/src/utils/maintenanceGuard.ts
@@ -34,7 +34,7 @@ export const isAdminRoute = (path: string): boolean => {
 /**
  * 路由守卫：检查网站维护状态
  */
-export const maintenanceGuard = (to: any, from: any, next: any) => {
+export const maintenanceGuard = (to: any, _from: any, next: any) => {
   const siteEnabled = isSiteEnabled()
   const isAdmin = isAdminRoute(to.path)
   
diff --git a/src/views/CourseExchanged.vue b/src/views/CourseExchanged.vue
index 32932ed..304838b 100644
--- a/src/views/CourseExchanged.vue
+++ b/src/views/CourseExchanged.vue
@@ -30,9 +30,9 @@
           <!-- 课程内容 -->
           <div v-else-if="course" class="course-content">
             <!-- 右侧主要内容 -->
-            <div class="main-column">
-              <!-- 横幅标题区域 -->
-              <div class="banner-title-section">
+            <div class="main-column" :class="{ 'practice-mode': practiceMode }">
+              <!-- 横幅标题区域 - 练习模式和讨论模式下隐藏 -->
+              <div v-if="!practiceMode && !discussionMode" class="banner-title-section">
                 <div class="banner-content">
                   <div class="banner-text">
                     <span class="main-text">暑期名师领学,提高班级教学质量!高效冲分指南</span>
@@ -44,8 +44,8 @@
                 </div>
               </div>
 
-              <!-- 提示 -->
-              <div class="tip-section">
+              <!-- 提示 - 练习模式和讨论模式下隐藏 -->
+              <div v-if="!practiceMode && !discussionMode" class="tip-section">
                 <img src="/images/aiCompanion/ii.jpg" alt="">
                 <span>此视频请在2025.10.23 23:59前完成学习，快进拖拽或逾期学习不计入观看进度和成绩。</span>
                 <div class="tip-section-box">
@@ -55,8 +55,187 @@
                 </div>
               </div>
 
-              <!-- 视频播放器区域 - 已兑换状态 -->
-              <div class="video-player-section">
+              <!-- 练习模式界面 -->
+              <div v-if="practiceMode" class="practice-section">
+                <!-- 练习说明页面 -->
+                <div v-if="!practiceStarted" class="practice-instructions">
+                  <div class="instructions-card">
+                    <h3>练习说明</h3>
+                    <ul>
+                      <li>本次练习共{{ practiceQuestions.length }}道题，总分{{ practiceQuestions.reduce((sum, q) => sum + q.score, 0) }}分</li>
+                      <li>练习没有时间限制，可以随时暂停和继续</li>
+                      <li>每道题可以多次修改答案</li>
+                      <li>完成后可以查看正确答案和解析</li>
+                      <li>练习结果不会影响最终成绩</li>
+                    </ul>
+                    <div class="practice-actions">
+                      <button class="btn-start-practice" @click="startPractice">开始练习</button>
+                      <button class="btn-back-practice" @click="exitPractice">返回课程</button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 练习主体内容 -->
+                <div v-if="practiceStarted && !practiceFinished" class="practice-main">
+                  <div class="practice-layout">
+                    <!-- 中间答题区域 -->
+                    <div class="practice-content">
+                    <div class="question-card" v-if="currentPracticeQuestion">
+                      <div class="question-header">
+                        <span class="question-title-info">{{ String(currentQuestionIndex + 1).padStart(2, '0') }}【{{ getPracticeQuestionTypeShort(currentPracticeQuestion.type) }}】<span>{{ currentPracticeQuestion.score }}分</span></span>
+                      </div>
+
+                      <div class="question-content">
+                        <div class="question-title">
+                          {{ currentPracticeQuestion.title }}
+                        </div>
+
+                        <!-- 选择题选项 -->
+                        <div v-if="currentPracticeQuestion.type === '单选题' || currentPracticeQuestion.type === '多选题' || currentPracticeQuestion.type === '判断题'" class="question-options">
+                          <div v-for="(option, index) in currentPracticeQuestion.options" :key="index"
+                               class="option-item"
+                               :class="{ 'selected': isPracticeOptionSelected(index) }"
+                               @click="selectPracticeOption(index)">
+                            <div class="option-checkbox">
+                              <input type="checkbox"
+                                     :name="`practice-question-${currentQuestionIndex}`"
+                                     :checked="isPracticeOptionSelected(index)"
+                                     @change="handlePracticeCheckboxClick(index, $event)"
+                                     @click="handlePracticeCheckboxClick(index, $event)">
+                            </div>
+                            <span class="option-label">{{ String.fromCharCode(65 + index) }}.</span>
+                            <span class="option-text">{{ option }}</span>
+                          </div>
+                        </div>
+
+                        <!-- 填空题输入框 -->
+                        <div v-else-if="currentPracticeQuestion.type === '填空题'" class="fill-blank">
+                          <div class="fill-item" v-for="(_, index) in currentPracticeQuestion.blanks || [1]" :key="index">
+                            <span class="fill-number">{{ index + 1 }}.</span>
+                            <input type="text"
+                                   :value="getPracticeFillAnswer(currentQuestionIndex, index)"
+                                   @input="setPracticeFillAnswer(currentQuestionIndex, index, $event.target.value)"
+                                   placeholder=""
+                                   class="fill-input" />
+                          </div>
+                          <div class="fill-hint">
+                            *请在上方输入框内输入填空内容
+                          </div>
+                        </div>
+
+                        <!-- 简答题文本域 -->
+                        <div v-else-if="currentPracticeQuestion.type === '简答题'" class="essay-answer">
+                          <div class="essay-container">
+                            <textarea v-model="essayAnswers[currentQuestionIndex]"
+                                      placeholder=""
+                                      class="essay-textarea"
+                                      rows="8"
+                                      maxlength="500"></textarea>
+                          </div>
+                          <div class="essay-footer">
+                            <div class="essay-hint">
+                              *请在上方输入框内输入答案内容
+                            </div>
+                            <div class="essay-counter">
+                              {{ getPracticeEssayLength(currentQuestionIndex) }}/500
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="question-navigation">
+                        <button class="btn-nav btn-prev" @click="previousPracticeQuestion" :disabled="currentQuestionIndex === 0">
+                          上一题
+                        </button>
+                        <button class="btn-nav btn-next" @click="nextPracticeQuestion">
+                          下一题
+                        </button>
+                      </div>
+                    </div>
+                    </div>
+
+                    <!-- 右侧答题卡 -->
+                    <div class="practice-answer-card">
+                      <div class="answer-card-container">
+                        <!-- 答题报告标题 -->
+                        <div class="answer-card-header">
+                          <h3>答题报告</h3>
+                          <div class="difficulty-tag">难度·4.8</div>
+                        </div>
+
+                        <!-- 当前得分圆环 -->
+                        <div class="score-circle-container">
+                          <div class="score-circle">
+                            <svg width="120" height="120" viewBox="0 0 120 120">
+                              <circle cx="60" cy="60" r="50" fill="none" stroke="#f0f0f0" stroke-width="8"/>
+                              <circle cx="60" cy="60" r="50" fill="none" stroke="#1890ff" stroke-width="8"
+                                      :stroke-dasharray="314"
+                                      :stroke-dashoffset="314 - (314 * getPracticeProgress() / 100)"
+                                      transform="rotate(-90 60 60)"/>
+                            </svg>
+                            <div class="score-text">
+                              <div class="current-score">{{ getCurrentPracticeScore() }}</div>
+                              <div class="score-label">当前得分</div>
+                            </div>
+                          </div>
+                        </div>
+
+                        <!-- 答题信息 -->
+                        <div class="answer-info">
+                          <div class="info-item">
+                            <span class="info-label">答题时间：</span>
+                            <span class="info-value">--</span>
+                          </div>
+                          <div class="info-item">
+                            <span class="info-label">答题时长：</span>
+                            <span class="info-value">--</span>
+                          </div>
+                          <div class="info-item">
+                            <span class="info-label">答题总数：</span>
+                            <span class="info-value">{{ getAnsweredCount() }}/{{ practiceQuestions.length }}</span>
+                          </div>
+                        </div>
+
+                        <!-- 得分情况 -->
+                        <div class="score-breakdown">
+                          <h4>得分情况</h4>
+                          <div class="score-item">
+                            <span class="score-type">单选</span>
+                            <span class="score-count">{{ getSingleChoiceScore() }}/{{ getSingleChoiceTotal() }}</span>
+                          </div>
+                          <div class="score-item">
+                            <span class="score-type">多选</span>
+                            <span class="score-count">{{ getMultiChoiceScore() }}/{{ getMultiChoiceTotal() }}</span>
+                          </div>
+                          <div class="score-item">
+                            <span class="score-type">判断</span>
+                            <span class="score-count">{{ getJudgeScore() }}/{{ getJudgeTotal() }}</span>
+                          </div>
+                        </div>
+
+                        <!-- 排名信息 -->
+                        <div class="ranking-info">
+                          <div class="ranking-item">
+                            <div class="ranking-number">6</div>
+                            <div class="ranking-label">最高分</div>
+                          </div>
+                          <div class="ranking-item">
+                            <div class="ranking-number">30</div>
+                            <div class="ranking-label">练习人数3892人</div>
+                          </div>
+                          <div class="ranking-item">
+                            <div class="ranking-number">90</div>
+                            <div class="ranking-label">答错人数</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 视频播放器区域 - 已兑换状态，讨论模式下隐藏 -->
+              <div v-else-if="!discussionMode" class="video-player-section">
                 <div class="video-player enrolled">
                   <div class="video-container">
                     <!-- DPlayer 播放器 -->
@@ -121,8 +300,101 @@
                   </div>
                 </div>
               </div>
-              <!-- 课程信息区域 -->
-              <div class="course-info-section">
+
+              <!-- 讨论模式界面 -->
+              <div v-if="discussionMode" class="discussion-section">
+                <div class="discussion-header">
+                  <div class="discussion-title">
+                    <h3>{{ currentDiscussionSection?.name }} - 讨论区</h3>
+                    <p class="discussion-subtitle">如何理解机器学习与科研流程的关系？如何理解机器学习与科研流程之间的关系？各位同学大家好，欢迎加入本学期的课程学习，在学习过程中有任何问题思考不同见解，都欢迎在讨论区积极交流，期待回复老师的问题。</p>
+                  </div>
+                  <div class="discussion-actions">
+                    <button @click="exitDiscussion" class="exit-discussion-btn">
+                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                        <path d="M12 4L4 12M4 4l8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                      </svg>
+                      退出讨论
+                    </button>
+                  </div>
+                </div>
+
+                <div class="discussion-content">
+                  <!-- 评论统计 -->
+                  <div class="discussion-stats">
+                    <span class="comment-count">评论 ({{ discussionList.length }})</span>
+                    <button class="sort-btn">
+                      <svg width="16" height="16" viewBox="0 0 16 16" class="sort-icon">
+                        <path d="M3 3h10M3 8h7M3 13h4" stroke="currentColor" stroke-width="1.5" fill="none" />
+                      </svg>
+                      <span class="sort-text">正序</span>
+                    </button>
+                  </div>
+
+                  <!-- 发表评论 -->
+                  <div class="comment-input-section">
+                    <div class="comment-input-wrapper">
+                      <textarea
+                        v-model="newComment"
+                        placeholder="发表你的想法下来吧..."
+                        class="comment-textarea"
+                        rows="3"
+                      ></textarea>
+                      <div class="comment-actions">
+                        <div class="comment-tools">
+                          <button class="tool-btn">
+                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                              <path d="M8 2v12M2 8h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                            </svg>
+                          </button>
+                          <button class="tool-btn">
+                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                              <rect x="2" y="3" width="12" height="10" rx="2" stroke="currentColor" stroke-width="1.5"/>
+                              <circle cx="6.5" cy="7.5" r="1.5" stroke="currentColor" stroke-width="1.5"/>
+                              <path d="m10 10-1.5-1.5L6 11" stroke="currentColor" stroke-width="1.5"/>
+                            </svg>
+                          </button>
+                        </div>
+                        <button @click="submitDiscussionComment" class="submit-comment-btn" :disabled="!newComment.trim()">
+                          发布
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- 评论列表 -->
+                  <div class="discussion-list">
+                    <div v-for="comment in discussionList" :key="comment.id" class="discussion-item">
+                      <div class="comment-avatar">
+                        <img :src="comment.avatar" :alt="comment.username" />
+                      </div>
+                      <div class="comment-content">
+                        <div class="comment-header">
+                          <span class="comment-username">{{ comment.username }}</span>
+                          <span class="comment-time">{{ comment.time }}</span>
+                        </div>
+                        <div class="comment-text">{{ comment.content }}</div>
+                        <div class="comment-actions">
+                          <button @click="likeComment(comment)" class="action-btn like-btn">
+                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                              <path d="M8 14s6-4 6-8c0-2-1.5-3-3-3s-3 1-3 3c0-2-1.5-3-3-3s-3 1-3 3c0 4 6 8 6 8z" stroke="currentColor" stroke-width="1.5"/>
+                            </svg>
+                            {{ comment.likes || 0 }}
+                          </button>
+                          <button class="action-btn reply-btn">
+                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                              <path d="M3 8h10M8 3l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                            </svg>
+                            回复
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 课程信息区域 - 练习模式和讨论模式下隐藏 -->
+              <div v-if="!practiceMode && !discussionMode" class="course-info-section">
 
                 <!-- 课程描述 -->
                 <div class="course-description">
@@ -636,6 +908,11 @@
                                   @click.stop="handleHomework(section)">
                                   <img src="/public/images/courses/homework-enroll.png" alt="作业" width="14" height="14">
                                 </button>
+                                <!-- 练习图标 - 可点击 -->
+                                <button v-else-if="isPracticeLesson(section)" class="lesson-action-btn practice-btn"
+                                  @click.stop="handlePractice(section)">
+                                  <img src="/public/images/courses/homework-enroll.png" alt="练习" width="14" height="14">
+                                </button>
                                 <!-- 考试图标 - 可点击 -->
                                 <button v-else-if="isExamLesson(section)" class="lesson-action-btn exam-btn"
                                   @click.stop="handleExam(section)">
@@ -714,8 +991,8 @@
               </div>
             </div>
           </div>
-          <!-- AI助手界面 - 仅在AI伴学模式下显示 -->
-          <div v-if="(course as any)?.izAi === 1" class="ai-assistant-interface">
+          <!-- AI助手界面 - 仅在AI伴学模式下显示，练习模式和讨论模式下隐藏 -->
+          <div v-if="(course as any)?.izAi === 1 && !practiceMode && !discussionMode" class="ai-assistant-interface">
             <!-- <div class="banner-button">
               <img src="/images/aiCompanion/切换@2x.png" alt="切换" class="button-icon-image">
               <span class="button-text">普通</span>
@@ -925,6 +1202,8 @@
             </div>
           </div>
         </div>
+
+
       </div>
     </div>
 
@@ -1257,6 +1536,24 @@ const currentQuality = ref<string>('360')
 const videoLoading = ref<boolean>(false)
 const videoPlayerRef = ref<any>(null)
 
+// 练习模式状态
+const practiceMode = ref(false)
+const currentPracticeSection = ref<CourseSection | null>(null)
+const practiceQuestions = ref<any[]>([])
+const currentQuestionIndex = ref(0)
+const practiceAnswers = ref<any[]>([])
+const fillAnswers = ref<any[]>([])
+const essayAnswers = ref<any[]>([])
+const practiceStarted = ref(false)
+const practiceFinished = ref(false)
+
+// 讨论模式状态
+const discussionMode = ref(false)
+const currentDiscussionSection = ref<CourseSection | null>(null)
+const discussionList = ref<any[]>([])
+const newComment = ref('')
+const replyingTo = ref<any>(null)
+
 // 新增的响应式数据
 const aiActiveTab = ref('assistant')
 const courseActiveTab = ref('summary')
@@ -1343,9 +1640,6 @@ const commentsCount = computed(() => {
   return comments.value.length
 })
 
-// 新评论内容
-const newComment = ref('')
-
 // 自动调整textarea高度
 const adjustTextareaHeight = (event: Event) => {
   const textarea = event.target as HTMLTextAreaElement
@@ -1493,7 +1787,6 @@ const handleReplyTextareaClick = (event: MouseEvent) => {
 }
 
 // 回复相关数据
-const replyingTo = ref<string | number | null>(null)
 const replyText = ref('')
 const replyToUsername = ref('')
 
@@ -1693,12 +1986,71 @@ const loadCourseSections = async () => {
         console.log('✅ API返回的原始章节数据:', response.data.list)
         console.log('✅ 章节数据数量:', response.data.list.length)
 
-        courseSections.value = response.data.list
-        groupedSections.value = groupSectionsByChapter(response.data.list)
+        // 添加模拟练习章节
+        const sectionsWithPractice = [...response.data.list]
+
+        // 添加一个练习章节到第一章
+        const practiceSection: CourseSection = {
+          id: '999999', // 使用一个特殊的ID
+          lessonId: '999999',
+          name: 'JavaScript基础练习',
+          type: 5, // 练习类型
+          level: 2, // 二级章节
+          parentId: sectionsWithPractice.find(s => s.level === 1)?.id || '1', // 找到第一个父章节
+          duration: '30分钟',
+          completed: false,
+          outline: '',
+          sort: 999,
+          revision: 1,
+          createdAt: Date.now(),
+          updatedAt: Date.now(),
+          deletedAt: null
+        }
+
+        // 将练习章节插入到合适的位置（第一章的最后）
+        const firstChapterSections = sectionsWithPractice.filter(s => s.level === 2 && s.parentId === practiceSection.parentId)
+        if (firstChapterSections.length > 0) {
+          // 插入到第一章的最后一个章节后面
+          const insertIndex = sectionsWithPractice.findIndex(s => s.id === firstChapterSections[firstChapterSections.length - 1].id) + 1
+          sectionsWithPractice.splice(insertIndex, 0, practiceSection)
+        } else {
+          // 如果没有找到合适位置，就添加到最后
+          sectionsWithPractice.push(practiceSection)
+        }
+
+        // 添加一个讨论章节
+        const discussionSection: CourseSection = {
+          id: '999998', // 使用另一个特殊的ID
+          lessonId: '999998',
+          name: '机器学习与科研流程讨论',
+          type: 6, // 讨论类型（自定义）
+          level: 2, // 二级章节
+          parentId: sectionsWithPractice.find(s => s.level === 1)?.id || '1', // 找到第一个父章节
+          duration: '讨论',
+          completed: false,
+          outline: '',
+          sort: 998,
+          revision: 1,
+          createdAt: Date.now(),
+          updatedAt: Date.now(),
+          deletedAt: null
+        }
+
+        // 将讨论章节插入到练习章节后面
+        const practiceIndex = sectionsWithPractice.findIndex(s => s.id === practiceSection.id)
+        if (practiceIndex !== -1) {
+          sectionsWithPractice.splice(practiceIndex + 1, 0, discussionSection)
+        } else {
+          sectionsWithPractice.push(discussionSection)
+        }
+
+        courseSections.value = sectionsWithPractice
+        groupedSections.value = groupSectionsByChapter(sectionsWithPractice)
 
         console.log('✅ 设置后的courseSections:', courseSections.value)
         console.log('✅ 设置后的groupedSections:', groupedSections.value)
         console.log('✅ groupedSections长度:', groupedSections.value.length)
+        console.log('✅ 已添加练习章节:', practiceSection)
       } else {
         console.log('❌ API返回的章节数据为空或格式错误')
         console.log('❌ response.data:', response.data)
@@ -1738,12 +2090,24 @@ const toggleChapter = (chapterIndex: number) => {
 
 
 
+// 判断是否为练习课程
+const isPracticeLesson = (section: CourseSection) => {
+  // 优先根据type字段判断：5=练习
+  if (section.type === 5) {
+    return true
+  }
+  // 如果type为null，则根据名称判断
+  return section.name.includes('练习')
+}
+
 // 获取课程类型文本
 const getLessonTypeText = (section: CourseSection) => {
   if (isVideoLesson(section)) return '视频'
   if (isResourceLesson(section)) return '资料'
+  if (isPracticeLesson(section)) return '练习'  // 练习判断放在作业前面
   if (isHomeworkLesson(section)) return '作业'
   if (isExamLesson(section)) return '考试'
+  if (isDiscussionLesson(section)) return '讨论'
   return '视频'
 }
 
@@ -1784,8 +2148,8 @@ const isHomeworkLesson = (section: CourseSection) => {
   if (section.type === 3) {
     return true
   }
-  // 如果type为null，则根据名称判断
-  return section.name.includes('作业') || section.name.includes('练习')
+  // 如果type为null，则根据名称判断（只判断作业，不包括练习）
+  return section.name.includes('作业')
 }
 
 const isExamLesson = (section: CourseSection) => {
@@ -1797,12 +2161,19 @@ const isExamLesson = (section: CourseSection) => {
   return section.name.includes('考试') || section.name.includes('测试')
 }
 
+const isDiscussionLesson = (section: CourseSection) => {
+  // 根据名称判断是否为讨论
+  return section.name.includes('讨论')
+}
+
 // 获取课程类型样式类
 const getLessonTypeBadgeClass = (section: CourseSection) => {
   if (isVideoLesson(section)) return 'badge-video'
   if (isResourceLesson(section)) return 'badge-resource'
+  if (isPracticeLesson(section)) return 'badge-practice'  // 练习判断放在作业前面
   if (isHomeworkLesson(section)) return 'badge-homework'
   if (isExamLesson(section)) return 'badge-exam'
+  if (isDiscussionLesson(section)) return 'badge-discussion'
   return 'badge-default'
 }
 
@@ -1960,6 +2331,243 @@ const handleHomework = async (section: CourseSection) => {
   }
 }
 
+// 处理练习操作
+const handlePractice = async (section: CourseSection) => {
+  console.log('📝 开始练习:', section)
+
+  // 退出讨论模式
+  if (discussionMode.value) {
+    exitDiscussion()
+  }
+
+  try {
+    // 模拟获取练习题目数据
+    const mockQuestions = [
+      {
+        id: 1,
+        type: '单选题',
+        title: '以下哪个是JavaScript的数据类型？',
+        options: ['String', 'Integer', 'Float', 'Character'],
+        score: 10
+      },
+      {
+        id: 2,
+        type: '多选题',
+        title: '以下哪些是前端框架？',
+        options: ['Vue.js', 'React', 'Angular', 'Django'],
+        score: 15
+      },
+      {
+        id: 3,
+        type: '判断题',
+        title: 'JavaScript是一种编译型语言。',
+        options: ['正确', '错误'],
+        score: 5
+      },
+      {
+        id: 4,
+        type: '填空题',
+        title: 'JavaScript中声明变量使用关键字____。',
+        blanks: 1,
+        score: 10
+      },
+      {
+        id: 5,
+        type: '简答题',
+        title: '请简述JavaScript闭包的概念和作用。',
+        score: 20
+      }
+    ]
+
+    // 设置练习数据
+    practiceQuestions.value = mockQuestions
+    currentPracticeSection.value = section
+    practiceMode.value = true
+    practiceStarted.value = false
+    practiceFinished.value = false
+    currentQuestionIndex.value = 0
+
+    // 初始化答案数组
+    practiceAnswers.value = new Array(mockQuestions.length).fill(null).map(() => [])
+    fillAnswers.value = new Array(mockQuestions.length).fill(null).map(() => [])
+    essayAnswers.value = new Array(mockQuestions.length).fill('')
+
+    console.log('✅ 练习模式已启动')
+  } catch (error) {
+    console.error('❌ 启动练习失败:', error)
+    message.error('启动练习失败，请稍后重试')
+  }
+}
+
+// 练习相关计算属性和方法
+const currentPracticeQuestion = computed(() => {
+  if (practiceQuestions.value.length > 0 && currentQuestionIndex.value >= 0) {
+    return practiceQuestions.value[currentQuestionIndex.value]
+  }
+  return null
+})
+
+// 开始练习
+const startPractice = () => {
+  practiceStarted.value = true
+  console.log('✅ 练习已开始')
+}
+
+// 退出练习
+const exitPractice = () => {
+  practiceMode.value = false
+  practiceStarted.value = false
+  practiceFinished.value = false
+  currentPracticeSection.value = null
+  practiceQuestions.value = []
+  console.log('✅ 已退出练习模式')
+}
+
+
+
+// 获取练习题目类型简称
+const getPracticeQuestionTypeShort = (type: string) => {
+  const typeMap: { [key: string]: string } = {
+    '单选题': '单选',
+    '多选题': '多选',
+    '判断题': '判断',
+    '填空题': '填空',
+    '简答题': '简答'
+  }
+  return typeMap[type] || type
+}
+
+// 判断练习选项是否被选中
+const isPracticeOptionSelected = (optionIndex: number) => {
+  const answers = practiceAnswers.value[currentQuestionIndex.value] || []
+  return answers.includes(optionIndex)
+}
+
+// 选择练习选项
+const selectPracticeOption = (optionIndex: number) => {
+  const questionType = currentPracticeQuestion.value?.type
+  if (!practiceAnswers.value[currentQuestionIndex.value]) {
+    practiceAnswers.value[currentQuestionIndex.value] = []
+  }
+
+  if (questionType === '单选题' || questionType === '判断题') {
+    // 单选题和判断题只能选一个
+    practiceAnswers.value[currentQuestionIndex.value] = [optionIndex]
+  } else if (questionType === '多选题') {
+    // 多选题可以选多个
+    const answers = practiceAnswers.value[currentQuestionIndex.value]
+    const index = answers.indexOf(optionIndex)
+    if (index > -1) {
+      answers.splice(index, 1)
+    } else {
+      answers.push(optionIndex)
+    }
+  }
+}
+
+// 处理练习复选框点击
+const handlePracticeCheckboxClick = (optionIndex: number, event: Event) => {
+  event.stopPropagation()
+  selectPracticeOption(optionIndex)
+}
+
+// 获取练习填空答案
+const getPracticeFillAnswer = (questionIndex: number, blankIndex: number) => {
+  if (!fillAnswers.value[questionIndex]) {
+    fillAnswers.value[questionIndex] = []
+  }
+  return fillAnswers.value[questionIndex][blankIndex] || ''
+}
+
+// 设置练习填空答案
+const setPracticeFillAnswer = (questionIndex: number, blankIndex: number, value: string) => {
+  if (!fillAnswers.value[questionIndex]) {
+    fillAnswers.value[questionIndex] = []
+  }
+  fillAnswers.value[questionIndex][blankIndex] = value
+}
+
+// 获取练习简答题字数
+const getPracticeEssayLength = (questionIndex: number) => {
+  return essayAnswers.value[questionIndex]?.length || 0
+}
+
+// 上一题
+const previousPracticeQuestion = () => {
+  if (currentQuestionIndex.value > 0) {
+    currentQuestionIndex.value--
+  }
+}
+
+// 下一题
+const nextPracticeQuestion = () => {
+  if (currentQuestionIndex.value < practiceQuestions.value.length - 1) {
+    currentQuestionIndex.value++
+  }
+}
+
+
+
+// 答题卡相关计算方法
+const getPracticeProgress = () => {
+  if (practiceQuestions.value.length === 0) return 0
+  const answered = getAnsweredCount()
+  return Math.round((answered / practiceQuestions.value.length) * 100)
+}
+
+const getCurrentPracticeScore = () => {
+  // 这里可以根据实际答题情况计算得分
+  // 暂时返回0，实际应用中需要根据正确答案计算
+  return 0
+}
+
+const getAnsweredCount = () => {
+  let count = 0
+  practiceQuestions.value.forEach((question, index) => {
+    if (question.type === '单选题' || question.type === '多选题' || question.type === '判断题') {
+      if (practiceAnswers.value[index] && practiceAnswers.value[index].length > 0) {
+        count++
+      }
+    } else if (question.type === '填空题') {
+      if (fillAnswers.value[index] && fillAnswers.value[index].some((answer: string) => answer.trim())) {
+        count++
+      }
+    } else if (question.type === '简答题') {
+      if (essayAnswers.value[index] && essayAnswers.value[index].trim()) {
+        count++
+      }
+    }
+  })
+  return count
+}
+
+const getSingleChoiceScore = () => {
+  // 计算单选题得分
+  return 0
+}
+
+const getSingleChoiceTotal = () => {
+  return practiceQuestions.value.filter(q => q.type === '单选题').length
+}
+
+const getMultiChoiceScore = () => {
+  // 计算多选题得分
+  return 0
+}
+
+const getMultiChoiceTotal = () => {
+  return practiceQuestions.value.filter(q => q.type === '多选题').length
+}
+
+const getJudgeScore = () => {
+  // 计算判断题得分
+  return 0
+}
+
+const getJudgeTotal = () => {
+  return practiceQuestions.value.filter(q => q.type === '判断题').length
+}
+
 // 处理考试操作
 const handleExam = (section: CourseSection) => {
   console.log('开始考试:', section)
@@ -1978,7 +2586,80 @@ const handleExam = (section: CourseSection) => {
   })
 }
 
+// 讨论相关方法
+const handleDiscussion = (section: CourseSection) => {
+  console.log('进入讨论模式:', section.name)
 
+  // 退出练习模式
+  if (practiceMode.value) {
+    exitPractice()
+  }
+
+  discussionMode.value = true
+  currentDiscussionSection.value = section
+  loadDiscussionData(section)
+}
+
+const loadDiscussionData = async (section: CourseSection) => {
+  try {
+    console.log('加载讨论数据:', section.name)
+    // 模拟加载讨论数据
+    discussionList.value = [
+      {
+        id: 1,
+        username: '张同学',
+        avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=60&q=80',
+        content: '如何理解机器学习与科研流程的关系？如何理解机器学习与科研流程之间的关系？各位同学大家好，欢迎加入本学期的课程学习，在学习过程中有任何问题思考不同见解，都欢迎在讨论区积极交流，期待回复老师的问题。',
+        time: '2023.07.23 16:25',
+        likes: 29,
+        replies: []
+      },
+      {
+        id: 2,
+        username: '春暖花开',
+        avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&auto=format&fit=crop&w=60&q=80',
+        content: '为了让科学教育有效，它必须符合科学的本质，而且应该让学生认识科学的本质，家庭和社会如何配合学校实现科学教育的目标。',
+        time: '2023.07.23 16:25',
+        likes: 24,
+        replies: []
+      }
+    ]
+  } catch (error) {
+    console.error('加载讨论数据失败:', error)
+  }
+}
+
+const exitDiscussion = () => {
+  discussionMode.value = false
+  currentDiscussionSection.value = null
+  discussionList.value = []
+  newComment.value = ''
+  replyingTo.value = null
+  console.log('✅ 已退出讨论模式')
+}
+
+const submitDiscussionComment = () => {
+  if (!newComment.value.trim()) return
+
+  const comment = {
+    id: Date.now(),
+    username: '当前用户',
+    avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=60&q=80',
+    content: newComment.value,
+    time: new Date().toLocaleString(),
+    likes: 0,
+    replies: []
+  }
+
+  discussionList.value.unshift(comment)
+  newComment.value = ''
+  message.success('评论发布成功！')
+}
+
+const likeComment = (comment: any) => {
+  comment.likes = (comment.likes || 0) + 1
+  message.success('点赞成功！')
+}
 
 // 处理章节点击 - 已报名状态，可以正常点击
 const handleSectionClick = (section: CourseSection) => {
@@ -1988,15 +2669,20 @@ const handleSectionClick = (section: CourseSection) => {
   // 检查章节类型
   const isVideo = isVideoLesson(section)
   const isResource = isResourceLesson(section)
+  const isPractice = isPracticeLesson(section)  // 练习判断放在前面
   const isHomework = isHomeworkLesson(section)
   const isExam = isExamLesson(section)
+  const isDiscussion = isDiscussionLesson(section)
 
   console.log('🔍 章节类型判断结果:', {
     isVideo,
     isResource,
+    isPractice,
     isHomework,
     isExam,
-    type: section.type
+    isDiscussion,
+    type: section.type,
+    name: section.name
   })
 
   // 如果是视频课程，加载视频数据
@@ -2006,12 +2692,18 @@ const handleSectionClick = (section: CourseSection) => {
   } else if (isResource) {
     console.log('✅ 识别为资料课程')
     handleDownload(section)
+  } else if (isPractice) {
+    console.log('✅ 识别为练习课程')
+    handlePractice(section)
   } else if (isHomework) {
     console.log('✅ 识别为作业课程')
     handleHomework(section)
   } else if (isExam) {
     console.log('✅ 识别为考试课程')
     handleExam(section)
+  } else if (isDiscussion) {
+    console.log('✅ 识别为讨论课程')
+    handleDiscussion(section)
   } else {
     console.log('⚠️ 未识别的课程类型，默认当作视频处理')
     loadSectionVideo(section)
@@ -4075,6 +4767,11 @@ onActivated(() => {
   color: white;
 }
 
+.badge-practice {
+  background: #9C27B0;
+  color: white;
+}
+
 /* 课时操作按钮样式 */
 .lesson-action-btn {
   background: none;
@@ -6811,4 +7508,842 @@ onActivated(() => {
 .course-description span:hover {
   color: #40a9ff;
 }
+
+/* 练习模式样式 */
+.practice-section {
+  background: white;
+  border-radius: 8px;
+  overflow: hidden;
+  width: 100%;
+  max-width: none;
+}
+
+/* 练习模式布局调整 */
+.course-layout.practice-layout-mode {
+  padding-left: 120px;
+  padding-right: 140px;
+}
+
+/* 练习模式下的主列样式调整 */
+.main-column.practice-mode {
+  min-width: auto;
+  max-width: none;
+  width: 100%;
+}
+
+.practice-instructions {
+  padding: 40px;
+  text-align: center;
+}
+
+.instructions-card {
+  max-width: 600px;
+  margin: 0 auto;
+  background: #f8f9fa;
+  border-radius: 12px;
+  padding: 40px;
+}
+
+.instructions-card h3 {
+  font-size: 24px;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.instructions-card ul {
+  text-align: left;
+  margin: 20px 0;
+  padding-left: 20px;
+}
+
+.instructions-card li {
+  margin-bottom: 10px;
+  color: #666;
+  line-height: 1.6;
+}
+
+.practice-actions {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  margin-top: 30px;
+}
+
+.btn-start-practice {
+  background: #1890ff;
+  color: white;
+  border: none;
+  padding: 12px 30px;
+  border-radius: 6px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.btn-start-practice:hover {
+  background: #40a9ff;
+}
+
+.btn-back-practice {
+  background: #f5f5f5;
+  color: #666;
+  border: none;
+  padding: 12px 30px;
+  border-radius: 6px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.btn-back-practice:hover {
+  background: #e6f7ff;
+}
+
+.practice-main {
+  padding: 20px;
+}
+
+.practice-layout {
+  display: flex;
+  gap: 24px;
+  width: 100%;
+  align-items: flex-start;
+}
+
+.practice-sidebar {
+  width: 300px;
+  flex-shrink: 0;
+}
+
+.practice-content {
+  flex: 1;
+  min-width: 0;
+  background: white;
+  border-radius: 8px;
+  padding: 24px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.answer-sheet {
+  background: white;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.answer-sheet-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.answer-sheet-header h4 {
+  margin: 0;
+  font-size: 16px;
+  color: #333;
+}
+
+.progress-text {
+  font-size: 14px;
+  color: #666;
+}
+
+.question-grid {
+  margin-bottom: 20px;
+}
+
+.question-numbers {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 8px;
+}
+
+.answer-card-number {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.3s;
+}
+
+.answer-card-number.unanswered {
+  background: white;
+  color: #666;
+}
+
+.answer-card-number.answered {
+  background: #1890ff;
+  color: white;
+  border-color: #1890ff;
+}
+
+.answer-card-number:hover {
+  border-color: #40a9ff;
+}
+
+.answer-legend {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.legend-icon {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+}
+
+.legend-icon.unanswered {
+  background: white;
+  border: 1px solid #d9d9d9;
+}
+
+.legend-icon.answered {
+  background: #1890ff;
+}
+
+.legend-text {
+  font-size: 12px;
+  color: #666;
+}
+
+.submit-section {
+  text-align: center;
+}
+
+.btn-submit-practice {
+  background: #52c41a;
+  color: white;
+  border: none;
+  padding: 12px 30px;
+  border-radius: 6px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background 0.3s;
+  width: 100%;
+}
+
+.btn-submit-practice:hover {
+  background: #73d13d;
+}
+
+.question-card {
+  background: white;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  padding: 30px;
+}
+
+.question-header {
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.question-title-info {
+  font-size: 16px;
+  color: #1890ff;
+  font-weight: 500;
+}
+
+.question-title-info span {
+  color: #ff4d4f;
+}
+
+.question-content {
+  margin-bottom: 30px;
+}
+
+.question-title {
+  font-size: 18px;
+  color: #333;
+  line-height: 1.6;
+  margin-bottom: 20px;
+}
+
+.question-options {
+  margin-top: 20px;
+}
+
+.option-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px;
+  border: 1px solid #e8e8e8;
+  border-radius: 6px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.option-item:hover {
+  border-color: #1890ff;
+  background: #f6ffed;
+}
+
+.option-item.selected {
+  border-color: #1890ff;
+  background: #e6f7ff;
+}
+
+.option-checkbox input {
+  margin: 0;
+}
+
+.option-label {
+  font-weight: 500;
+  color: #333;
+  min-width: 20px;
+}
+
+.option-text {
+  flex: 1;
+  color: #333;
+  line-height: 1.5;
+}
+
+.fill-blank {
+  margin-top: 20px;
+}
+
+.fill-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 15px;
+}
+
+.fill-number {
+  font-weight: 500;
+  color: #333;
+  min-width: 20px;
+}
+
+.fill-input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.fill-input:focus {
+  border-color: #1890ff;
+  outline: none;
+}
+
+.fill-hint {
+  font-size: 12px;
+  color: #999;
+  margin-top: 10px;
+}
+
+.essay-answer {
+  margin-top: 20px;
+}
+
+.essay-container {
+  margin-bottom: 10px;
+}
+
+.essay-textarea {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  font-size: 14px;
+  resize: vertical;
+  font-family: inherit;
+}
+
+.essay-textarea:focus {
+  border-color: #1890ff;
+  outline: none;
+}
+
+.essay-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.essay-hint {
+  font-size: 12px;
+  color: #999;
+}
+
+.essay-counter {
+  font-size: 12px;
+  color: #666;
+}
+
+.question-navigation {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.btn-nav {
+  padding: 10px 20px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  background: white;
+  color: #333;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.btn-nav:hover:not(:disabled) {
+  border-color: #1890ff;
+  color: #1890ff;
+}
+
+.btn-nav:disabled {
+  background: #f5f5f5;
+  color: #bfbfbf;
+  cursor: not-allowed;
+}
+
+.btn-next {
+  background: #1890ff;
+  color: white;
+  border-color: #1890ff;
+}
+
+.btn-next:hover {
+  background: #40a9ff;
+  border-color: #40a9ff;
+}
+
+@media (max-width: 768px) {
+  .practice-layout {
+    flex-direction: column;
+  }
+
+  .practice-sidebar {
+    width: 100%;
+    order: 2;
+  }
+
+  .practice-content {
+    order: 1;
+  }
+
+  .question-numbers {
+    grid-template-columns: repeat(8, 1fr);
+  }
+
+  .question-navigation {
+    flex-direction: column;
+  }
+}
+
+/* 练习答题卡样式 */
+.practice-answer-card {
+  width: 300px;
+  flex-shrink: 0;
+}
+
+.answer-card-container {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  border: 1px solid #e8e8e8;
+}
+
+.answer-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.answer-card-header h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  margin: 0;
+}
+
+.difficulty-tag {
+  background: #1890ff;
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.score-circle-container {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.score-circle {
+  position: relative;
+  width: 120px;
+  height: 120px;
+}
+
+.score-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.current-score {
+  font-size: 32px;
+  font-weight: bold;
+  color: #333;
+  line-height: 1;
+}
+
+.score-label {
+  font-size: 12px;
+  color: #999;
+  margin-top: 4px;
+}
+
+.answer-info {
+  margin-bottom: 20px;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+
+.info-label {
+  color: #666;
+}
+
+.info-value {
+  color: #333;
+}
+
+.score-breakdown {
+  margin-bottom: 20px;
+}
+
+.score-breakdown h4 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin: 0 0 12px 0;
+}
+
+.score-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+
+.score-type {
+  color: #666;
+}
+
+.score-count {
+  color: #1890ff;
+  font-weight: 500;
+}
+
+.ranking-info {
+  display: flex;
+  justify-content: space-between;
+  text-align: center;
+}
+
+.ranking-item {
+  flex: 1;
+}
+
+.ranking-number {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+
+.ranking-item:nth-child(1) .ranking-number {
+  color: #ff6b35;
+}
+
+.ranking-item:nth-child(2) .ranking-number {
+  color: #666;
+}
+
+.ranking-item:nth-child(3) .ranking-number {
+  color: #1890ff;
+}
+
+.ranking-label {
+  font-size: 12px;
+  color: #999;
+  line-height: 1.2;
+}
+
+/* 讨论模式样式 */
+.discussion-section {
+  background: white;
+  border-radius: 8px;
+  overflow: hidden;
+  width: 100%;
+  max-width: none;
+  margin: 0;
+  padding: 0;
+}
+
+.discussion-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 24px;
+  border-bottom: 1px solid #f0f0f0;
+  background: #fafafa;
+}
+
+.discussion-title h3 {
+  margin: 0 0 8px 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.discussion-subtitle {
+  margin: 0;
+  font-size: 14px;
+  color: #666;
+  line-height: 1.6;
+  max-width: 800px;
+}
+
+.exit-discussion-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: white;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  color: #666;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.exit-discussion-btn:hover {
+  border-color: #1890ff;
+  color: #1890ff;
+}
+
+.discussion-content {
+  padding: 24px;
+}
+
+.discussion-stats {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.comment-count {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+
+
+.comment-input-section {
+  margin-bottom: 32px;
+}
+
+.comment-input-wrapper {
+  border: 1px solid #d9d9d9;
+  border-radius: 8px;
+  overflow: hidden;
+  background: white;
+}
+
+.comment-textarea {
+  width: 100%;
+  padding: 16px;
+  border: none;
+  outline: none;
+  resize: vertical;
+  min-height: 80px;
+  font-size: 14px;
+  line-height: 1.6;
+  font-family: inherit;
+}
+
+.comment-textarea::placeholder {
+  color: #bfbfbf;
+}
+
+.comment-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: #fafafa;
+  border-top: 1px solid #f0f0f0;
+}
+
+.comment-tools {
+  display: flex;
+  gap: 8px;
+}
+
+.tool-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: white;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  color: #666;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.tool-btn:hover {
+  border-color: #1890ff;
+  color: #1890ff;
+}
+
+.submit-comment-btn {
+  padding: 8px 24px;
+  background: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.submit-comment-btn:hover:not(:disabled) {
+  background: #40a9ff;
+}
+
+.submit-comment-btn:disabled {
+  background: #f5f5f5;
+  color: #bfbfbf;
+  cursor: not-allowed;
+}
+
+.discussion-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.discussion-item {
+  display: flex;
+  gap: 12px;
+  padding: 20px;
+  background: #fafafa;
+  border-radius: 8px;
+}
+
+.comment-avatar {
+  flex-shrink: 0;
+}
+
+.comment-avatar img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.comment-content {
+  flex: 1;
+}
+
+.comment-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.comment-username {
+  font-weight: 600;
+  color: #333;
+  font-size: 14px;
+}
+
+.comment-time {
+  color: #999;
+  font-size: 12px;
+}
+
+.comment-text {
+  color: #333;
+  font-size: 14px;
+  line-height: 1.6;
+  margin-bottom: 12px;
+}
+
+.comment-actions {
+  display: flex;
+  gap: 16px;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  background: none;
+  border: none;
+  color: #666;
+  font-size: 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.3s;
+}
+
+.action-btn:hover {
+  background: #f0f0f0;
+  color: #1890ff;
+}
+
+.like-btn.liked {
+  color: #ff4d4f;
+}
+
+/* 讨论模式下的徽章样式 */
+.badge-discussion {
+  background: #52c41a;
+  color: white;
+}
 </style>
\ No newline at end of file