diff --git a/public/images/teacher/folder.jpg b/public/images/teacher/folder.jpg
new file mode 100644
index 0000000..f848588
Binary files /dev/null and b/public/images/teacher/folder.jpg differ
diff --git a/public/images/teacher/template.png b/public/images/teacher/template.png
index 5123207..3d624f7 100644
Binary files a/public/images/teacher/template.png and b/public/images/teacher/template.png differ
diff --git a/src/components/admin/CourseComponents/CourseCategory.vue b/src/components/admin/CourseComponents/CourseCategory.vue
index fd3fd45..daae8d2 100644
--- a/src/components/admin/CourseComponents/CourseCategory.vue
+++ b/src/components/admin/CourseComponents/CourseCategory.vue
@@ -100,7 +100,7 @@ const courseList = ref([
 
 // 跳转到创建课程页面
 const navigateToCreateCourse = () => {
-  // router.push('/teacher/course-create');  
+  router.push('/teacher/course-create');  
 };
 </script>
 
diff --git a/src/components/admin/CourseComponents/CourseCreate.vue b/src/components/admin/CourseComponents/CourseCreate.vue
index dc7cac0..ab51118 100644
--- a/src/components/admin/CourseComponents/CourseCreate.vue
+++ b/src/components/admin/CourseComponents/CourseCreate.vue
@@ -1,510 +1,728 @@
 <template>
-    <div class="course-create-page">
-      <div class="course-form-container flex-col">
-        <!-- 第一行：课程名称和课程分类 -->
-        <div class="course-basic-info-row flex-row">
-          <div class="course-name-label">
-            <span class="required-asterisk">*</span>
-            <span class="label-text">课程名称：</span>
-          </div>
-          <div class="course-name-input-wrapper flex-col">
-            <n-input
-              v-model:value="formData.courseName"
-              placeholder="请输入课程名称"
-              class="form-input"
-              :bordered="false"
-            />
-          </div>
-          <div class="course-category-section flex-col">
-            <div class="course-category-label">
-              <span class="required-asterisk">*</span>
-              <span class="label-text">课程分类：</span>
+  <div class="course-create-container">
+    <div class="form-container">
+      <!-- 表单内容 -->
+      <div class="form-content">
+        <!-- 上半部分：两列布局 -->
+        <div class="form-row">
+          <!-- 左列 -->
+          <div class="form-column">
+            <!-- 课程名称 -->
+            <div class="form-item">
+              <label class="form-label required">课程名称:</label>
+              <n-input v-model:value="formData.courseName" placeholder="请输入课程名称" class="form-input" />
             </div>
-            <div class="course-category-select-wrapper flex-col">
-              <n-select
-                v-model:value="formData.courseCategory"
-                placeholder="分类名称"
-                :options="categoryOptions"
-                class="form-select"
-                :bordered="false"
-              />
-            </div>
-          </div>
-        </div>
-  
-        <!-- 第二行：主讲老师和排序 -->
-        <div class="instructor-sort-row flex-row">
-          <div class="instructor-label">
-            <span class="required-asterisk">*</span>
-            <span class="label-text">主讲老师：</span>
-          </div>
-          <div class="instructor-select-wrapper flex-row">
-            <n-select
-              v-model:value="formData.instructors"
-              multiple
-              placeholder="请选择主讲老师"
-              :options="instructorOptions"
-              class="form-select"
-              :bordered="false"
-              :render-tag="renderInstructorTag"
-            />
-          </div>
-          <div class="course-sort-section flex-row">
-            <div class="course-sort-label">
-              <span class="required-asterisk">*</span>
-              <span class="label-text">排序：</span>
-            </div>
-            <div class="course-sort-input-wrapper">
-              <n-input
-                v-model:value="formData.sort"
-                placeholder="数字越小越排序靠前"
-                class="form-input"
-                :bordered="false"
-              />
-            </div>
-          </div>
-        </div>
-  
-        <!-- 第三行：课程开始时间和结束时间 -->
-        <div class="course-time-row flex-row">
-          <div class="start-time-label">
-            <span class="required-asterisk">*</span>
-            <span class="label-text">课程开始时间：</span>
-          </div>
-          <div class="start-time-picker-wrapper flex-row">
-            <n-date-picker
-              v-model:value="formData.startTime"
-              type="datetime"
-              placeholder="选择时间"
-              class="form-datepicker"
-              :bordered="false"
-            />
-          </div>
-          <div class="end-time-label">
-            <span class="required-asterisk">*</span>
-            <span class="label-text">课程结束时间：</span>
-          </div>
-          <div class="end-time-picker-wrapper flex-row">
-            <n-date-picker
-              v-model:value="formData.endTime"
-              type="datetime"
-              placeholder="选择时间"
-              class="form-datepicker"
-              :bordered="false"
-            />
-          </div>
-        </div>
-  
-        <!-- 第四行：参与学员 -->
-        <div class="student-selection-row flex-row">
-          <div class="student-selection-label">
-            <span class="required-asterisk">*</span>
-            <span class="label-text">参与学员：</span>
-          </div>
-          <div class="student-type-radio-group flex-row">
-            <label class="radio-option" @click="formData.studentType = 'all'">
-              <div class="radio-circle" :class="{ active: formData.studentType === 'all' }">
-                <div class="radio-dot" v-if="formData.studentType === 'all'"></div>
-              </div>
-              <span class="radio-text">全部学员</span>
-            </label>
-            <label class="radio-option" @click="formData.studentType = 'partial'">
-              <div class="radio-circle" :class="{ active: formData.studentType === 'partial' }">
-                <div class="radio-dot" v-if="formData.studentType === 'partial'"></div>
-              </div>
-              <span class="radio-text">仅部分学员</span>
-            </label>
-          </div>
-        </div>
 
-        <!-- 第五行：选择班级（仅在选择部分学员时显示） -->
-        <div class="class-selection-row" v-if="formData.studentType === 'partial'">
-          <div class="class-select-wrapper flex-row">
-            <n-select
-              v-model:value="formData.selectedClasses"
-              multiple
-              placeholder="选择班级（可多选）"
-              :options="classOptions"
-              class="form-select"
-              :bordered="false"
-            />
-          </div>
-        </div>
-  
-        <!-- 第六行：课程封面 -->
-        <div class="course-cover-row flex-row justify-between">
-          <div class="course-cover-label">
-            <span class="required-asterisk">*</span>
-            <span class="label-text">课程封面：</span>
-          </div>
-          <div class="cover-upload-area flex-row">
-            <div class="upload-container flex-col justify-between" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
-              <div class="native-upload">
-                <input
-                  type="file"
-                  id="coverUpload"
-                  accept="image/*"
-                  @change="handleNativeFileChange"
-                  style="display: none;"
-                />
-                <label for="coverUpload" class="upload-content" style="cursor: pointer; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
-                  <template v-if="!previewUrl">
-                    <div class="upload-plus-icon" style="font-size: 32px; display: block; text-align: center;">+</div>
-                    <span class="upload-text" style="display: block; text-align: center;">上传</span>
-                  </template>
-                  <div v-if="previewUrl" style="position: relative; width: 100%; height: 100%;">
-                    <img :src="previewUrl" style="max-width: 100%; max-height: 100%; object-fit: contain;" />
-                    <div
-                      class="image-delete-icon"
-                      @click.stop="clearUpload"
-                      style="position: absolute; top: 5px; right: 5px; background-color: rgba(0,0,0,0.5); color: white; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;"
-                    >
-                      ×
-                    </div>
-                  </div>
+            <!-- 主讲老师 -->
+            <div class="form-item">
+              <label class="form-label required">主讲老师:</label>
+              <n-select v-model:value="formData.instructors" multiple :options="instructorOptions" placeholder="请选择主讲老师"
+                class="form-input" />
+            </div>
+
+
+
+            <!-- 课程开始时间 -->
+            <div class="form-item">
+              <label class="form-label required">课程开始时间:</label>
+              <n-date-picker v-model:value="formData.startTime" type="datetime" placeholder="选择时间" class="form-input" />
+            </div>
+
+            <!-- 参与学员 -->
+            <div class="form-item">
+              <label class="form-label required">参与学员:</label>
+              <div class="radio-container">
+                <label class="radio-option">
+                  <input type="radio" name="studentType" value="all" v-model="formData.studentType"
+                    class="radio-input" />
+                  <span class="radio-label">全部学员</span>
+                </label>
+                <label class="radio-option">
+                  <input type="radio" name="studentType" value="partial" v-model="formData.studentType"
+                    class="radio-input" />
+                  <span class="radio-label">仅部分学员</span>
                 </label>
               </div>
             </div>
-          </div>
-        </div>
-  
-        <!-- 课程简介标题和编辑器 -->
-        <div class="course-description-section flex-col">
-          <div class="course-description-header flex-row">
-            <div class="course-description-label">
-              <span class="required-asterisk">*</span>
-              <span class="label-text">课程简介：</span>
+
+            <!-- 选择班级 -->
+            <div class="form-item">
+              <n-select v-model:value="formData.selectedClasses" multiple :options="classOptions"
+                placeholder="选择班级（可多选）" class="form-input" />
             </div>
           </div>
 
-          <!-- 富文本编辑器区域 -->
-          <div class="description-editor-container flex-col">
-              <QuillEditor
-                v-model="formData.courseDescription"
-                :height="'280px'"
-                placeholder="请输入内容…"
-                class="rich-text-editor"
-              />
+          <!-- 右列 -->
+          <div class="form-column">
+            <!-- 课程分类 -->
+            <div class="form-item">
+              <label class="form-label required">课程分类:</label>
+              <n-select v-model:value="formData.courseCategory" :options="categoryOptions" placeholder="分类名称"
+                class="form-input" />
+            </div>
+
+            <!-- 排序 -->
+            <div class="form-item">
+              <label class="form-label required">排序:</label>
+              <n-select v-model:value="formData.sort" :options="sortOptions" placeholder="数字越小越排序靠前"
+                class="form-input" />
+            </div>
+
+            <!-- 课程结束时间 -->
+            <div class="form-item">
+              <label class="form-label required">课程结束时间:</label>
+              <n-date-picker v-model:value="formData.endTime" type="datetime" placeholder="选择时间" class="form-input" />
+            </div>
           </div>
         </div>
-  
-        <!-- 设置选项区域 -->
-        <div class="course-settings-section">
-          <!-- 离开页面停止播放 -->
-          <div class="stop-on-leave-setting flex-row">
-            <div class="setting-control flex-row">
-              <div class="setting-label">
-                <span class="required-asterisk">*</span>
-                <span class="label-text">离开页面停止播放：</span>
+
+        <!-- 中间部分：课程封面 -->
+        <div class="form-section">
+          <div class="form-item">
+            <label class="form-label required">课程封面:</label>
+            <div class="cover-upload-container">
+              <div class="upload-area" @click="triggerFileUpload">
+                <template v-if="!previewUrl">
+                  <div class="upload-icon">+</div>
+                  <span class="upload-text">上传</span>
+                </template>
+                <div v-else class="preview-container">
+                  <img :src="previewUrl" alt="课程封面预览" class="preview-image" />
+                  <div class="delete-icon" @click.stop="clearUpload">×</div>
+                </div>
               </div>
-              <button
-                @click="formData.stopOnLeave = !formData.stopOnLeave"
-                class="toggle-button"
-                :class="{ 'toggle-button-active': formData.stopOnLeave }"
-              >
-                {{ formData.stopOnLeave ? '开启' : '关闭' }}
-              </button>
+              <input ref="fileInput" type="file" accept="image/*" @change="handleFileChange" style="display: none;" />
+            </div>
+          </div>
+        </div>
+
+        <!-- 课程简介 -->
+        <div class="form-text">
+          <label class="form-label required">课程简介:</label>
+          <div class="rich-editor-container">
+            <div class="editor-container">
+              <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
+                :mode="mode" />
+              <Editor style="height: 300px; overflow-y: hidden;" v-model="formData.courseDescription"
+                :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
+            </div>
+          </div>
+        </div>
+
+        <!-- 下半部分：设置选项 -->
+        <div class="form-section">
+          <!-- 离开页面停止播放 -->
+          <div class="form-item btn-label">
+            <label class="form-label required">离开页面停止播放</label>
+            <div class="setting-container">
+              <n-switch v-model:value="formData.stopOnLeave" class="form-toggle" />
             </div>
           </div>
 
           <!-- 视频倍数播放 -->
-          <div class="video-speed-setting flex-row">
-            <div class="setting-control flex-row">
-              <div class="setting-label">
-                <span class="required-asterisk">*</span>
-                <span class="label-text">视频倍数播放：</span>
-              </div>
-              <button
-                @click="formData.videoSpeedControl = !formData.videoSpeedControl"
-                class="toggle-button"
-                :class="{ 'toggle-button-active': formData.videoSpeedControl }"
-              >
-                {{ formData.videoSpeedControl ? '开启' : '关闭' }}
-              </button>
+          <div class="form-item btn-label">
+            <label class="form-label required">视频倍数播放</label>
+            <div class="setting-container">
+              <n-switch v-model:value="formData.videoSpeedControl" class="form-toggle" />
             </div>
           </div>
 
           <!-- 显示视频文本 -->
-          <div class="video-text-setting flex-row">
-            <div class="setting-control flex-row">
-              <div class="setting-label">
-                <span class="required-asterisk">*</span>
-                <span class="label-text">显示视频文本：</span>
-              </div>
-              <button
-                @click="formData.showVideoText = !formData.showVideoText"
-                class="toggle-button"
-                :class="{ 'toggle-button-active': formData.showVideoText }"
-              >
-                {{ formData.showVideoText ? '开启' : '关闭' }}
-              </button>
+          <div class="form-item btn-label">
+            <label class="form-label required">显示视频文本</label>
+            <div class="setting-container">
+              <n-switch v-model:value="formData.showVideoText" class="form-toggle" />
             </div>
           </div>
-  
-          <!-- 积分设置 -->
-          <div class="points-setting-row flex-row">
-            <div class="points-setting-control flex-row justify-between">
-              <div class="setting-label">
-                <span class="required-asterisk">*</span>
-                <span class="label-text">积分设置：</span>
-              </div>
-              <button
-                @click="formData.pointsEnabled = !formData.pointsEnabled"
-                class="toggle-button"
-                :class="{ 'toggle-button-active': formData.pointsEnabled }"
-              >
-                {{ formData.pointsEnabled ? '开启' : '关闭' }}
-              </button>
-            </div>
-            <span class="points-description-text">学完可获得</span>
-            <div class="earn-points-input-container">
-              <input
-                type="number"
-                v-model="formData.earnPoints"
-                min="0"
-                max="1000"
-                class="points-input"
-              />
-            </div>
-            <span class="points-description-text">积分</span>
-            <span class="points-description-text">本课程需</span>
-            <div class="required-points-input-container">
-              <input
-                type="number"
-                v-model="formData.requiredPoints"
-                min="0"
-                max="1000"
-                class="points-input"
-              />
-            </div>
-            <span class="points-description-text">积分兑换</span>
-          </div>
-        </div>
 
-        <!-- 底部按钮区域 -->
-        <div class="form-action-buttons flex-row">
-          <div class="button-spacer flex-col"></div>
-          <div class="cancel-button flex-col" @click="handleCancel">
-            <span class="button-text">取消</span>
-          </div>
-          <div class="submit-button flex-col" @click="handleSubmit">
-            <span class="button-text">保存</span>
+          <!-- 积分设置 -->
+          <div class="form-item form-integral">
+            <label class="form-label required">积分设置</label>
+            <div class="setting-container">
+              <n-switch v-model:value="formData.pointsEnabled" class="form-toggle" />
+              <span class="setting-label">学完可获得</span>
+              <n-input-number v-model:value="formData.earnPoints" :min="0" :max="1000" class="score-input"
+                :show-button="false" />
+              <span class="setting-label">积分</span>
+              <span class="setting-label">本课程需</span>
+              <n-input-number v-model:value="formData.requiredPoints" :min="0" :max="1000" class="score-input"
+                :show-button="false" />
+              <span class="setting-label">积分兑换</span>
+            </div>
           </div>
         </div>
       </div>
+
+      <!-- 底部按钮 -->
+      <div class="form-footer">
+        <n-button class="cancel-btn" @click="handleCancel">取消</n-button>
+        <n-button type="primary" class="save-btn" @click="handleSubmit">保存</n-button>
+      </div>
     </div>
-  </template>
-  
-  <script setup lang="ts">
-  import { ref, reactive, h } from 'vue'
-  import { useRouter } from 'vue-router'
-  import { useMessage } from 'naive-ui'
-  import { NInput, NSelect, NDatePicker } from 'naive-ui'
-  import QuillEditor from '@/components/common/QuillEditor.vue'
-  
-  const router = useRouter()
-  const message = useMessage()
-  
-  // 表单数据
-  const formData = reactive({
-    courseName: '',
-    courseCategory: '',
-    instructors: [], // 改为数组，支持多选
-    sort: '',
-    startTime: null,
-    endTime: null,
-    studentType: 'all', // 'all' 或 'partial'
-    selectedClasses: [],
-    courseCover: '',
-    courseDescription: '',
-    // 开关设置
-    allowDiscussion: true,
-    contentProtection: false,
-    allowTextContent: true,
-    studySettings: true,
-    // 视频设置
-    stopOnLeave: true,
-    videoSpeedControl: false,
-    showVideoText: true,
-    // 积分设置
-    pointsEnabled: true,
-    earnPoints: 60,
-    requiredPoints: 60,
-    // 学习设置详细配置
-    studyDuration: 60,
-    studyProgress: 80,
-    totalLessons: 0,
-    studyDeadline: 0
-  })
-  
-  // 课程分类选项
-  const categoryOptions = [
-    { label: '前端开发', value: 'frontend' },
-    { label: '后端开发', value: 'backend' },
-    { label: '移动开发', value: 'mobile' },
-    { label: '人工智能', value: 'ai' },
-    { label: '数据库', value: 'database' },
-    { label: '运维部署', value: 'devops' },
-    { label: '测试', value: 'testing' },
-    { label: '产品设计', value: 'design' }
-  ]
-  
-  // 讲师选项
-  const instructorOptions = [
-    { label: '李清林', value: '李清林' },
-    { label: '刘树光', value: '刘树光' },
-    { label: '肖蒙', value: '肖蒙' },
-    { label: '张老师', value: '张老师' },
-    { label: '王老师', value: '王老师' }
-  ]
-  
-  // 班级选项
-  const classOptions = [
-    { label: '前端开发班', value: 'frontend-class' },
-    { label: '后端开发班', value: 'backend-class' },
-    { label: 'AI算法班', value: 'ai-class' },
-    { label: '全栈开发班', value: 'fullstack-class' }
-  ]
-  
-  // 文件上传
-  const previewUrl = ref('')
-  
-  // 自定义渲染选中的讲师标签
-  const renderInstructorTag = ({ option, handleClose }: any) => {
-    return h('div', {
-      style: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        padding: '2px 8px',
-        margin: '2px',
-        background: '#f0f0f0',
-        borderRadius: '4px',
-        fontSize: '14px'
-      }
-    }, [
-      option.label,
-      h('span', {
-        style: {
-          marginLeft: '4px',
-          cursor: 'pointer',
-          fontSize: '12px'
-        },
-        onClick: handleClose
-      }, '×')
-    ])
-  }
-  
-  // 原生文件上传处理
-  const handleNativeFileChange = (event: Event) => {
-    const input = event.target as HTMLInputElement
-    if (input.files && input.files.length > 0) {
-      const file = input.files[0]
-      
-      // 验证文件类型
-      if (!file.type.startsWith('image/')) {
-        message.error('请上传图片文件')
-        return
-      }
-      
-      // 验证文件大小（限制为2MB）
-      if (file.size > 2 * 1024 * 1024) {
-        message.error('图片大小不能超过2MB')
-        return
-      }
-      
-      // 创建预览URL
-      previewUrl.value = URL.createObjectURL(file)
-      
-    //   // 保存文件到表单数据
-    //   formData.courseCover = file
-      
-      console.log('文件上传成功:', file.name)
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, shallowRef, onBeforeUnmount } from 'vue'
+import { useRouter } from 'vue-router'
+import { useMessage } from 'naive-ui'
+import {
+  NInput,
+  NDatePicker,
+  NSelect,
+  NSwitch,
+  NButton,
+  NInputNumber
+} from 'naive-ui'
+import '@wangeditor/editor/dist/css/style.css'
+// @ts-ignore
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+
+const router = useRouter()
+const message = useMessage()
+
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef()
+
+// 文件上传相关
+const fileInput = ref<HTMLInputElement>()
+const previewUrl = ref('')
+
+const toolbarConfig = {}
+const editorConfig = { placeholder: '请输入内容...' }
+const mode = 'default'
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value
+  if (editor == null) return
+  editor.destroy()
+})
+
+const handleCreated = (editor: any) => {
+  editorRef.value = editor // 记录 editor 实例，重要！
+}
+
+// 表单数据
+const formData = reactive({
+  courseName: '',
+  courseCategory: null, // 改为 null 以显示 placeholder
+  instructors: [],
+  sort: null, // 改为 null 以显示 placeholder
+  startTime: null,
+  endTime: null,
+  studentType: 'all', // 'all' 或 'partial'
+  selectedClasses: [],
+  courseCover: null as File | null,
+  courseDescription: '',
+  // 视频设置
+  stopOnLeave: true,
+  videoSpeedControl: false,
+  showVideoText: true,
+  // 积分设置
+  pointsEnabled: true,
+  earnPoints: 60,
+  requiredPoints: 60
+})
+
+
+
+// 课程分类选项
+const categoryOptions = [
+  { label: '前端开发', value: 'frontend' },
+  { label: '后端开发', value: 'backend' },
+  { label: '移动开发', value: 'mobile' },
+  { label: '人工智能', value: 'ai' },
+  { label: '数据库', value: 'database' },
+  { label: '运维部署', value: 'devops' },
+  { label: '测试', value: 'testing' },
+  { label: '产品设计', value: 'design' }
+]
+
+// 讲师选项
+const instructorOptions = [
+  { label: '李清林', value: '李清林' },
+  { label: '刘树光', value: '刘树光' },
+  { label: '肖蒙', value: '肖蒙' },
+  { label: '张老师', value: '张老师' },
+  { label: '王老师', value: '王老师' }
+]
+
+// 班级选项
+const classOptions = [
+  { label: '前端开发班', value: 'frontend-class' },
+  { label: '后端开发班', value: 'backend-class' },
+  { label: 'AI算法班', value: 'ai-class' },
+  { label: '全栈开发班', value: 'fullstack-class' }
+]
+
+// 排序选项
+const sortOptions = [
+  { label: '1', value: '1' },
+  { label: '2', value: '2' },
+  { label: '3', value: '3' },
+  { label: '4', value: '4' },
+  { label: '5', value: '5' },
+  { label: '6', value: '6' },
+  { label: '7', value: '7' },
+  { label: '8', value: '8' },
+  { label: '9', value: '9' },
+  { label: '10', value: '10' }
+]
+
+// 文件上传相关方法
+const triggerFileUpload = () => {
+  fileInput.value?.click()
+}
+
+const handleFileChange = (event: Event) => {
+  const input = event.target as HTMLInputElement
+  if (input.files && input.files.length > 0) {
+    const file = input.files[0]
+
+    // 验证文件类型
+    if (!file.type.startsWith('image/')) {
+      message.error('请上传图片文件')
+      return
     }
-  }
-  
-  // 清除上传的图片
-  const clearUpload = (event: Event) => {
-    event.preventDefault()
-    event.stopPropagation()
-    
-    // 释放预览URL
-    if (previewUrl.value) {
-      URL.revokeObjectURL(previewUrl.value)
+
+    // 验证文件大小（限制为2MB）
+    if (file.size > 2 * 1024 * 1024) {
+      message.error('图片大小不能超过2MB')
+      return
     }
-    
-    // 清除预览和表单数据
-    previewUrl.value = ''
-    formData.courseCover = ''
-    
-    // 重置文件输入框
-    const fileInput = document.getElementById('coverUpload') as HTMLInputElement
-    if (fileInput) {
-      fileInput.value = ''
+
+    // 创建预览URL
+    previewUrl.value = URL.createObjectURL(file)
+    formData.courseCover = file
+
+    console.log('文件上传成功:', file.name)
+  }
+}
+
+const clearUpload = () => {
+  // 释放预览URL
+  if (previewUrl.value) {
+    URL.revokeObjectURL(previewUrl.value)
+  }
+
+  // 清除预览和表单数据
+  previewUrl.value = ''
+  formData.courseCover = null
+
+  // 重置文件输入框
+  if (fileInput.value) {
+    fileInput.value.value = ''
+  }
+}
+
+// 取消
+const handleCancel = () => {
+  router.back()
+}
+
+// 保存
+const handleSubmit = async () => {
+  try {
+    // 表单验证
+    if (!formData.courseName) {
+      message.error('请输入课程名称')
+      return
     }
-  }
-  
-  // 提交表单
-  const handleSubmit = async () => {
-    try {
-      // 表单验证
-      if (!formData.courseName) {
-        message.error('请输入课程名称')
-        return
-      }
-      
-      if (!formData.courseCategory) {
-        message.error('请选择课程分类')
-        return
-      }
-      
-      if (formData.instructors.length === 0) {
-        message.error('请选择主讲老师')
-        return
-      }
-      
-      if (!formData.courseCover) {
-        message.error('请上传课程封面')
-        return
-      }
-      
-      // 创建FormData对象处理文件上传
-      // 表单提交逻辑已注释，如需使用可取消注释
-      // const formDataToSubmit = new FormData()
-      
-    //   // 添加表单字段
-    //   Object.keys(formData).forEach(key => {
-    //     if (key === 'courseCover' && formData[key] instanceof File) {
-    //       formDataToSubmit.append('courseCover', formData[key])
-    //     } else if (key === 'instructors' || key === 'selectedClasses') {
-    //       // 数组类型需要特殊处理
-    //       formData[key].forEach((item) => {
-    //         formDataToSubmit.append(`${key}[]`, item)
-    //       })
-    //     } else {
-    //       formDataToSubmit.append(key, String(formData[key]))
-    //     }
-    //   })
-      
-      console.log('表单数据:', formData)
-      message.success('课程创建成功！')
-      // 这里可以调用API提交数据
-      // const response = await api.createCourse(formDataToSubmit)
-      router.push('/teacher/course-management')
-    } catch (error) {
-      console.error('提交失败:', error)
-      message.error('提交失败，请重试')
+
+    if (!formData.courseCategory) {
+      message.error('请选择课程分类')
+      return
     }
+
+    if (formData.instructors.length === 0) {
+      message.error('请选择主讲老师')
+      return
+    }
+
+    if (!formData.courseCover || !previewUrl.value) {
+      message.error('请上传课程封面')
+      return
+    }
+
+    console.log('表单数据:', formData)
+    message.success('课程创建成功！')
+    router.push('/teacher/course-management')
+  } catch (error) {
+    console.error('提交失败:', error)
+    message.error('提交失败，请重试')
   }
-  
-  // 取消操作
-  const handleCancel = () => {
-    router.back()
+}
+</script>
+
+<style scoped>
+.course-create-container {
+  min-height: 100vh;
+  padding-bottom: 80px;
+}
+
+.form-container {
+  background: white;
+  overflow: hidden;
+}
+
+.form-content {
+  padding: 24px 24px 0 24px;
+}
+
+.form-row {
+  display: flex;
+  gap: 100px;
+  margin-bottom: 32px;
+}
+
+.form-column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.form-text {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.form-integral {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.form-label {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+  min-width: 125px;
+  flex-shrink: 0;
+  text-align: right;
+}
+
+.form-label.required::before {
+  content: '*';
+  color: #ff4d4f;
+  margin-right: 4px;
+}
+
+.form-input {
+  flex: 1;
+  min-width: 0;
+}
+
+/* 最简单的输入框高度统一方法 */
+.form-input {
+  height: 42px;
+}
+
+/* 强制设置下拉菜单高度 */
+.form-input :deep(.n-base-selection) {
+  --n-height: 42px !important;
+  height: 42px !important;
+}
+
+.form-input :deep(.n-base-selection-label) {
+  height: 42px !important;
+  line-height: 42px !important;
+}
+
+/* 强制设置时间选择器高度 */
+.form-input :deep(.n-input__input) {
+  height: 42px !important;
+}
+
+.form-input :deep(.n-input__input-el) {
+  height: 42px !important;
+  line-height: 42px !important;
+}
+
+/* 隐藏下拉菜单的加载状态和清除按钮 */
+.form-input :deep(.n-base-loading),
+.form-input :deep(.n-base-clear) {
+  display: none !important;
+}
+
+/* 隐藏默认下拉箭头 */
+.form-input :deep(.n-base-suffix__arrow) {
+  display: none !important;
+}
+
+/* 为下拉菜单添加自定义箭头 */
+.form-input :deep(.n-base-selection) {
+  position: relative;
+}
+
+.form-input :deep(.n-base-selection)::after {
+  content: '';
+  position: absolute;
+  right: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 13px;
+  height: 8px;
+  background-image: url('/images/teacher/箭头-灰.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* 自定义时间选择器图标 */
+.form-input :deep(.n-date-picker-icon svg) {
+  display: none !important;
+}
+
+.form-input :deep(.n-date-picker-icon) {
+  background-image: url('/images/teacher/日历.png') !important;
+  background-size: contain !important;
+  background-repeat: no-repeat !important;
+  background-position: center !important;
+  width: 14px !important;
+  height: 14px !important;
+}
+
+/* 多选标签样式调整 */
+.form-input :deep(.n-tag) {
+  background-color: #F5F8FB !important;
+  border: none !important;
+  color: #666666 !important;
+  margin-top: 3px;
+  margin-bottom: 3px;
+}
+
+.form-input :deep(.n-tag__content) {
+  color: #666666 !important;
+}
+
+.form-input :deep(.n-tag__border) {
+  display: none !important;
+}
+
+/* 关闭按钮样式调整 */
+.form-input :deep(.n-tag__close) {
+  width: 12px !important;
+  height: 12px !important;
+}
+
+.form-input :deep(.n-tag__close .n-base-icon) {
+  width: 12px !important;
+  height: 12px !important;
+  color: #999 !important;
+}
+
+.form-input :deep(.n-tag__close svg) {
+  width: 12px !important;
+  height: 12px !important;
+}
+
+.form-toggle {
+  margin-right: 8px;
+}
+
+.btn-label {
+  margin-top: 30px;
+}
+
+.toggle-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+}
+
+.toggle-label {
+  font-size: 14px;
+  color: #666;
+}
+
+/* 单选按钮样式 */
+.radio-container {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  flex: 1;
+}
+
+.radio-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.radio-input {
+  width: 16px;
+  height: 16px;
+  accent-color: #0288D1;
+  cursor: pointer;
+}
+
+.radio-label {
+  font-size: 14px;
+  color: #333;
+  cursor: pointer;
+}
+
+/* 课程封面上传区域 */
+.cover-upload-container {
+  flex: 1;
+  min-width: 0;
+}
+
+.upload-area {
+  width: 160px;
+  height: 130px;
+  border: 2px dashed #d9d9d9;
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: border-color 0.3s;
+  background-color: #fafafa;
+}
+
+.upload-area:hover {
+  border-color: #0288D1;
+}
+
+.upload-icon {
+  font-size: 32px;
+  color: #999;
+}
+
+.upload-text {
+  font-size: 14px;
+  color: #666;
+}
+
+.preview-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.preview-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.delete-icon {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  width: 20px;
+  height: 20px;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.delete-icon:hover {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+.form-section {
+  margin-bottom: 32px;
+}
+
+.rich-editor-container {
+  flex: 1;
+  border: 1px solid #D8D8D8;
+  overflow: hidden;
+}
+
+.setting-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+
+.setting-label {
+  font-size: 14px;
+  color: #666;
+}
+
+.score-input {
+  width: 80px;
+}
+
+.form-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 20px 24px;
+  background: #fff;
+  border-top: 1px solid #e6e6e6;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+}
+
+.cancel-btn {
+  min-width: 60px;
+  height: 32px;
+  border: 1px solid #0288D1;
+  background: #E2F5FF;
+  color: #0288D1;
+}
+
+.cancel-btn:hover {
+  border-color: #0277BD;
+  background: #B3E5FC;
+  color: #0277BD;
+}
+
+.save-btn {
+  min-width: 60px;
+  height: 32px;
+  background: #0288D1;
+  border-color: #0288D1;
+  color: white;
+}
+
+.save-btn:hover {
+  background: #0277BD;
+  border-color: #0277BD;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .form-row {
+    flex-direction: column;
+    gap: 16px;
   }
-  </script>
-  
-  
-  <style scoped>
-  
-  </style>
-  <style src="@/components/admin/CourseComponents/css/CourseCreate.css"></style>
-  
\ No newline at end of file
+
+  .form-content {
+    padding: 16px;
+  }
+}
+</style>
diff --git a/src/views/teacher/course/CoursewareManagement.vue b/src/views/teacher/course/CoursewareManagement.vue
index bb78beb..ae89a26 100644
--- a/src/views/teacher/course/CoursewareManagement.vue
+++ b/src/views/teacher/course/CoursewareManagement.vue
@@ -232,7 +232,7 @@ const filteredFiles = computed(() => {
 // 获取文件图标
 const getFileIcon = (type: string) => {
   const iconMap: { [key: string]: string } = {
-    folder: '/images/profile/folder.png',
+    folder: '/images/teacher/folder.jpg',
     excel: '/images/activity/xls.png',
     word: '/images/activity/wrod.png',
     pdf: '/images/activity/pdf.png',