diff --git a/public/images/profile/default-file.png b/public/images/profile/default-file.png new file mode 100644 index 0000000..c45cf73 Binary files /dev/null and b/public/images/profile/default-file.png differ diff --git a/public/images/profile/doc.png b/public/images/profile/doc.png new file mode 100644 index 0000000..811ac16 Binary files /dev/null and b/public/images/profile/doc.png differ diff --git a/public/images/teacher/路径 17.png b/public/images/teacher/upload-fail.png similarity index 100% rename from public/images/teacher/路径 17.png rename to public/images/teacher/upload-fail.png diff --git a/public/images/teacher/分组 75.png b/public/images/teacher/upload-succeed.png similarity index 100% rename from public/images/teacher/分组 75.png rename to public/images/teacher/upload-succeed.png diff --git a/public/images/teacher/分组 81.png b/public/images/teacher/x.png similarity index 100% rename from public/images/teacher/分组 81.png rename to public/images/teacher/x.png diff --git a/src/components/admin/CourseComponents/CourseCategory.vue b/src/components/admin/CourseComponents/CourseCategory.vue index 143f302..d864268 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'); }; diff --git a/src/components/admin/CourseComponents/css/CourseCreate.css b/src/components/admin/CourseComponents/css/CourseCreate.css index 8730059..4977096 100644 --- a/src/components/admin/CourseComponents/css/CourseCreate.css +++ b/src/components/admin/CourseComponents/css/CourseCreate.css @@ -1,995 +1,872 @@ * { - box-sizing: border-box; - flex-shrink: 0; - } - - .flex-col { - display: flex; - flex-direction: column; - } - - .flex-row { - display: flex; - flex-direction: row; - } - - .justify-between { - display: flex; - justify-content: space-between; - } - - .justify-center { - display: flex; - justify-content: center; - } - - /* 原生上传组件样式 */ - .native-upload { - width: 100%; - height: 100%; - min-height: 120px; - border: 1px dashed #d9d9d9; - border-radius: 8px; - cursor: pointer; - transition: border-color 0.3s; - display: flex; - align-items: center; - justify-content: center; - background-color: #fafafa; - } - - .native-upload:hover { - border-color: #1890ff; - } - - .upload-content { - width: 100%; - height: 100%; - min-height: 120px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - } - - .upload-plus-icon { - font-size: 32px; - color: #999; - margin-bottom: 8px; - } - - .upload-text { - color: #666; - font-size: 14px; - } - - .image-delete-icon:hover { - background-color: rgba(0,0,0,0.7); - } - - /* 主容器 */ - .course-create-page { - background-color: rgba(255, 255, 255, 1); - position: relative; - min-height: 1712px; - height: auto; - overflow: visible; - } - - .course-form-container { - min-height: 1211px; - height: auto; - background-size: 100% 100%; - /* width: 1565px; */ - position: relative; - } - - /* 第一行:课程名称和分类 */ - .course-basic-info-row { - width: 1307px; - height: 43px; - margin: 30px 0 0 102px; - } - - .course-name-label { - width: 89px; - height: 18px; - overflow-wrap: break-word; - font-size: 0; - font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif; - font-weight: normal; - text-align: right; - white-space: nowrap; - line-height: 18px; - margin-top: 9px; - } - - .required-asterisk { - color: rgba(255, 77, 79, 1); - font-size: 16px; - font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif; - font-weight: normal; - text-align: left; - white-space: nowrap; - line-height: 18px; - } - - .label-text { - color: rgba(51, 51, 51, 1); - font-size: 16px; - font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif; - font-weight: normal; - text-align: left; - white-space: nowrap; - line-height: 18px; - } - - .course-name-input-wrapper { - height: 42px; - background-size: 562px 44px; - margin-left: 2px; - width: 560px; - border: 1px solid #e0e0e0; - border-radius: 4px; - padding: 0 12px; - display: flex; - align-items: center; - } - - .form-input { - width: 100%; - height: 100%; - border: none; - background: transparent; - font-size: 16px; - color: #333; - } - - .course-input::placeholder { - color: rgba(153, 153, 153, 1); - font-size: 16px; - } - - .course-category-section { - height: 42px; - width: 522px; - position: relative; - margin: 1px 0 0 134px; - } - - .course-category-label { - width: 89px; - height: 18px; - overflow-wrap: break-word; - font-size: 0; - font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif; - font-weight: normal; - text-align: right; - white-space: nowrap; - line-height: 18px; - margin-top: 9px; - } - - .course-category-select-wrapper { - height: 42px; - background-size: 562px 44px; - width: 560px; - position: absolute; - left: 87px; - top: 0; - border: 1px solid #e0e0e0; - border-radius: 4px; - padding: 0 12px; - display: flex; - align-items: center; - } - - .form-select { - width: 100%; - height: 100%; - border: none; - background: transparent; - } - - /* 第二行:主讲老师 */ - .instructor-sort-row { - width: 1340px; - height: 42px; - margin: 29px 0 0 102px; - } - - .instructor-label { - width: 89px; - height: 18px; - overflow-wrap: break-word; - font-size: 0; - font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif; - font-weight: normal; - text-align: right; - white-space: nowrap; - line-height: 18px; - margin-top: 9px; - } - - .instructor-select-wrapper { - width: 560px; - height: 42px; - background-size: 562px 44px; - margin-left: 2px; - border: 1px solid #e0e0e0; - border-radius: 4px; - padding: 0 12px; - display: flex; - align-items: center; - } - - .instructor-select { - width: 100%; - height: 100%; - border: none; - background: transparent; - } - - /* 主讲老师选择区域样式已整合到 .instructor-select 中 */ - - .course-sort-section { - height: 42px; - margin-left: 159px; - width: 630px; - display: flex; - align-items: center; - gap: 10px; - } - - .course-sort-label { - width: 57px; - height: 18px; - overflow-wrap: break-word; - font-size: 0; - font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif; - font-weight: normal; - text-align: right; - white-space: nowrap; - line-height: 18px; - flex-shrink: 0; - } - - /* 排序输入框 */ - .course-sort-input-wrapper { - position: relative; - left: 0; - top: 0; - width: 560px; - height: 42px; - background-size: 562px 44px; - border: 1px solid #e0e0e0; - border-radius: 4px; - padding: 0 12px; - display: flex; - align-items: center; - flex-shrink: 0; - } - - .sort-input { - width: 100%; - height: 100%; - border: none; - background: transparent; - font-size: 16px; - color: #333; - } - - .sort-input::placeholder { - color: rgba(153, 153, 153, 1); - font-size: 16px; - } - - /* 第三行:时间选择 */ - .course-time-row { - width: 1463px; - height: 49px; - margin: 30px 0 0 71px; - } - - .start-time-label { - width: 121px; - height: 18px; - overflow-wrap: break-word; - font-size: 0; - font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif; - font-weight: normal; - text-align: right; - white-space: nowrap; - line-height: 18px; - margin-top: 9px; - } - - .start-time-picker-wrapper, .end-time-picker-wrapper { - width: 560px; - height: 42px; - background-size: 562px 44px; - margin-left: 1px; - border: 1px solid #e0e0e0; - border-radius: 4px; - padding: 0 12px; - display: flex; - align-items: center; - } - - .group_12 { - margin: 7px 0 0 6px; - } - - .form-datepicker { - width: 100%; - height: 100%; - border: none; - background: transparent; - } - - .end-time-label { - width: 121px; - height: 18px; - overflow-wrap: break-word; - font-size: 0; - font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif; - font-weight: normal; - text-align: right; - white-space: nowrap; - line-height: 18px; - margin: 16px 0 0 94px; - } - - /* 参与学员 */ - .student-selection-row { - width: 312px; - height: 18px; - margin: 23px 0 0 103px; - } - - .student-selection-label { - width: 89px; - height: 18px; - overflow-wrap: break-word; - font-size: 0; - font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif; - font-weight: normal; - text-align: right; - white-space: nowrap; - line-height: 18px; - } - - .student-type-radio-group { - margin-left: 3px; - align-items: center; - } - - .radio-option { - display: flex; - align-items: center; - cursor: pointer; - margin-right: 38px; - } - - .radio-circle { - width: 16px; - height: 16px; - border: 2px solid #d9d9d9; - border-radius: 50%; - background: white; - margin-right: 8px; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.3s; - } - - .radio-circle.active { - border-color: #1890ff; - } - - .radio-dot { - width: 8px; - height: 8px; - background: #1890ff; - border-radius: 50%; - } - - .radio-text { - color: rgba(51, 51, 51, 1); - font-size: 16px; - font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif; - font-weight: normal; - text-align: left; - white-space: nowrap; - line-height: 18px; - margin-left: 7px; - } - - /* 班级选择 */ - .class-selection-row { - width: 560px; - height: 44px; - margin: 16px 0 0 192px; - } - - .class-select-wrapper { - width: 560px; - height: 44px; - background-size: 100% 100%; - border: 1px solid #e0e0e0; - border-radius: 4px; - padding: 0 18px; - display: flex; - align-items: center; - } - - .class-select { - width: 100%; - height: 100%; - border: none; - background: transparent; - } - - /* 课程封面 */ - .course-cover-row { - width: 312px; - height: 128px; - margin: 30px 0 0 41px; - } - - .course-cover-label { - width: 89px; - height: 18px; - overflow-wrap: break-word; - font-size: 0; - font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif; - font-weight: normal; - text-align: right; - white-space: nowrap; - line-height: 18px; - margin-top: 9px; - } - - .cover-upload-area { - width: 160px; - height: 128px; - border: 2px dashed #d9d9d9; - border-radius: 6px; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: all 0.3s; - } - - .cover-upload-area:hover { - border-color: #1890ff; - background-color: #f0f8ff; - } - - .upload-container { - width: 100%; - height: 100%; - text-align: center; - display: flex; - align-items: center; - justify-content: center; - } - - .cover-upload { - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - } - - .upload-content { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - } - - .upload-plus-icon { - font-size: 28px; - color: #999; - margin-bottom: 8px; - font-weight: normal; - line-height: 1; - display: block; - } - - .upload-text { - color: rgba(102, 102, 102, 1); - display: block; - font-size: 16px; - font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif; - font-weight: normal; - text-align: center; - white-space: nowrap; - line-height: 18px; - } - - .upload-text-label { - width: 32px; - height: 18px; - overflow-wrap: break-word; - color: rgba(102, 102, 102, 1); - font-size: 16px; - font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif; - font-weight: normal; - text-align: center; - white-space: nowrap; - line-height: 18px; - } - - /* 课程简介整体区域 */ - .course-description-section { - width: 1452px; - margin: 42px 0 0 41px; - } - - /* 课程简介标题 */ - .course-description-header { - position: relative; - width: 100%; - height: 20px; - margin-bottom: -30px; - } - - .course-description-label { - width: 89px; - height: 18px; - overflow-wrap: break-word; - font-size: 0; - font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif; - font-weight: normal; - text-align: right; - white-space: nowrap; - line-height: 18px; - } - - - - .toolbar-icon-btn { - background: #f5f5f5; - border: 1px solid #d9d9d9; - border-radius: 4px; - padding: 4px 8px; - cursor: pointer; - font-size: 14px; - transition: all 0.3s; - } - - .toolbar-icon-btn:hover { - background: #e6f7ff; - border-color: #1890ff; - } - - /* 富文本编辑器区域 */ - .description-editor-container { - height: 336px; - background-size: 100% 100%; - width: 1340px; - position: relative; - left: 0; - top: 0; - margin-left: 129px; - border-radius: 8px; - padding: 13px 19px; - background: white; - } - - - - .toolbar-btn { - background: #f5f5f5; - border: 1px solid #d9d9d9; - border-radius: 4px; - padding: 3px 8px; - cursor: pointer; - font-size: 14px; - font-weight: bold; - transition: all 0.3s; - } - - .toolbar-btn:hover { - background: #e6f7ff; - border-color: #1890ff; - } - - - .rich-text-editor { - width: 100%; - height: 100%; - border: 1px solid #e0e0e0; - border-radius: 4px; - background: white; - } - - /* 确保 QuillEditor 内部的边框正常显示 */ - .rich-text-editor :deep(.ql-container) { - border-bottom: 1px solid #e0e0e0; - border-left: 1px solid #e0e0e0; - border-right: 1px solid #e0e0e0; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - } - - .rich-text-editor :deep(.ql-toolbar) { - border-top: 1px solid #e0e0e0; - border-left: 1px solid #e0e0e0; - border-right: 1px solid #e0e0e0; - border-top-left-radius: 4px; - border-top-right-radius: 4px; - } - - /* 设置选项区域 */ - .course-settings-section { - margin: 30px 0 0 41px; - width: 1400px; - } - - .stop-on-leave-setting { - width: 350px; - height: 24px; - margin: 20px 0 0 31px; - display: flex; - align-items: center; - justify-content: space-between; - } - - .setting-control { - width: 100%; - height: 24px; - display: flex; - align-items: center; - } - - .setting-label { - width: auto; - height: 18px; - overflow-wrap: break-word; - font-size: 0; - font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif; - font-weight: normal; - text-align: left; - white-space: nowrap; - line-height: 18px; - margin-top: 1px; - display: flex; - align-items: center; - margin-right: 5px; - } - - .video-speed-setting { - width: 350px; - height: 24px; - margin: 20px 0 0 63px; - display: flex; - align-items: center; - justify-content: space-between; - } - - .video-text-setting { - width: 350px; - height: 24px; - margin: 20px 0 0 63px; - display: flex; - align-items: center; - justify-content: space-between; - } - - /* 积分设置 */ - .points-setting-row { - width: 800px; - height: 40px; - margin: 21px 0 40px 95px; - display: flex; - align-items: center; - gap: 10px; - } - - .points-setting-control { - width: auto; - height: 24px; - margin-top: 9px; - display: flex; - align-items: center; - margin-right: 20px; - } - - .points-setting-control .setting-label { - width: 89px; - margin-right: 0; - } - - .points-description-text { - color: rgba(51, 51, 51, 1); - font-size: 16px; - font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif; - font-weight: normal; - text-align: left; - white-space: nowrap; - line-height: 18px; - margin: 0 8px; - } - - .earn-points-input-container, .required-points-input-container { - width: 80px; - height: 32px; - display: flex; - align-items: center; - justify-content: center; - border: 1px solid #d9d9d9; - border-radius: 4px; - background: white; - } - - /* 蓝色开关样式 */ - .toggle-switch { - --n-rail-color: #e0e0e0 !important; - --n-rail-color-active: #1890ff !important; - --n-button-color: #ffffff !important; - --n-button-color-active: #ffffff !important; - --n-button-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important; - } - - .blue-switch .n-switch__rail { - background-color: #e0e0e0 !important; - } - - .blue-switch .n-switch__rail--active { - background-color: #1890ff !important; - } - - /* 原生开关按钮样式 */ - .toggle-button { - position: relative; - width: 44px; - height: 22px; - border-radius: 11px; - background-color: #e0e0e0; - cursor: pointer; - transition: all 0.3s; - outline: none; - padding: 0; - border: none; - font-size: 0; /* 隐藏文字 */ - box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1); - margin-left: 0; - } - - .toggle-button::after { - content: ''; - position: absolute; - top: 2px; - left: 2px; - width: 18px; - height: 18px; - border-radius: 50%; - background-color: white; - transition: all 0.3s; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); - } - - .toggle-button-active { - background-color: #1890ff; - box-shadow: none; - } - - .toggle-button-active::after { - left: calc(100% - 20px); - } - - /* 积分输入框样式 */ - .points-input { - width: 100%; - height: 100%; - border: none; - background: transparent; - font-size: 14px; - color: #333; - text-align: center; - outline: none; - } - - .points-input:focus { - background: rgba(240, 248, 255, 0.3); - } - - - - /* 底部按钮区域 */ - .form-action-buttons { - position: relative; - left: 0; - top: 0; - width: 100%; - height: 91px; - background-size: 1920px 139px; - display: flex; - align-items: center; - justify-content: flex-end; - padding-right: 100px; - gap: 15px; - margin-top: 60px; - } - - .button-spacer { - width: 66px; - height: 32px; - } - - .cancel-button { - height: 32px; - width: 80px; - border: 1px solid #d9d9d9; - border-radius: 4px; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: all 0.3s; - background-color: white; - } - - .cancel-button:hover { - border-color: #40a9ff; - color: #40a9ff; - } - - .submit-button { - height: 32px; - width: 80px; - background-color: #1890ff; - border: 1px solid #1890ff; - border-radius: 4px; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: all 0.3s; - } - - .submit-button:hover { - background-color: #40a9ff; - border-color: #40a9ff; - } - - .button-text { - color: rgba(255, 255, 255, 1); - font-size: 16px; - font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif; - font-weight: normal; - text-align: center; - white-space: nowrap; - line-height: 22px; - } - - .cancel-button .button-text { - color: rgba(0, 0, 0, 0.65); - font-size: 14px; - } - - /* 响应式设计 - 保持原有布局不变,只在特定屏幕尺寸下优化 */ - - /* 大屏幕优化 (≥1920px) - 让表单居中显示 */ - @media (min-width: 1920px) { - .course-create-page { - display: flex; - justify-content: center; - align-items: flex-start; - background-color: #f5f5f5; - } - - .course-form-container { - background: white; - border-radius: 8px; - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); - padding: 40px; - margin: 0 auto; - } - } - - /* 中等屏幕 (1400px-1919px) - 保持原有布局 */ - @media (max-width: 1919px) and (min-width: 1400px) { - .course-create-page { - width: 100%; - min-width: 1400px; - } - } - - /* 小屏幕适配 (1200px-1399px) */ - @media (max-width: 1399px) and (min-width: 1200px) { - .course-create-page { - width: 100%; - overflow-x: auto; - } - - .course-form-container { - min-width: 1200px; - } - - /* 稍微缩小一些元素的宽度 */ - .course-basic-info-row { - width: 1100px; - margin-left: 50px; - } - - .instructor-sort-row { - width: 1150px; - margin-left: 50px; - } - - .course-time-row { - width: 1250px; - margin-left: 50px; - } - - .course-description-section { - width: 1250px; - margin-left: 50px; - } - - .description-editor-container { - width: 1150px; - margin-left: 80px; - } - } - - /* 平板适配 (768px-1199px) */ - @media (max-width: 1199px) and (min-width: 768px) { - .course-create-page { - width: 100%; - overflow-x: auto; - padding: 20px; - } - - .course-form-container { - min-width: 800px; - position: relative; - transform: scale(0.8); - transform-origin: top left; - } - } - - /* 移动端适配 (≤767px) */ - @media (max-width: 767px) { - .course-create-page { - width: 100%; - overflow-x: auto; - padding: 10px; - } - - .course-form-container { - min-width: 600px; - position: relative; - transform: scale(0.6); - transform-origin: top left; - } - - /* 调整一些关键元素以适应移动端 */ - .form-action-buttons { - position: fixed; - bottom: 0; - left: 0; - right: 0; - background: white; - border-top: 1px solid #e0e0e0; - z-index: 1000; - transform: none; - width: 100%; - justify-content: center; - padding: 15px; - } - - .cancel-button, - .submit-button { - transform: scale(1.2); - } - } \ No newline at end of file + box-sizing: border-box; + flex-shrink: 0; +} + +.flex-col { + display: flex; + flex-direction: column; +} + +.flex-row { + display: flex; + flex-direction: row; +} + +.justify-between { + display: flex; + justify-content: space-between; +} + +.justify-center { + display: flex; + justify-content: center; +} + +/* 原生上传组件样式 */ +.native-upload { + width: 100%; + height: 100%; + min-height: 120px; + border: 1px dashed #d9d9d9; + border-radius: 8px; + cursor: pointer; + transition: border-color 0.3s; + display: flex; + align-items: center; + justify-content: center; + background-color: #fafafa; +} + +.native-upload:hover { + border-color: #1890ff; +} + +.upload-content { + width: 100%; + height: 100%; + min-height: 120px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.upload-plus-icon { + font-size: 32px; + color: #999; + margin-bottom: 8px; +} + +.upload-text { + color: #666; + font-size: 14px; +} + +.image-delete-icon:hover { + background-color: rgba(0, 0, 0, 0.7); +} + +/* 主容器 */ +.course-create-page { + background-color: rgba(255, 255, 255, 1); + position: relative; + min-height: 1200px; /* 从1712px减少到1200px */ + height: auto; + overflow: visible; +} + +.course-form-container { + min-height: 900px; /* 从1211px减少到900px */ + height: auto; + background-size: 100% 100%; + /* width: 1565px; */ + position: relative; +} + +/* 第一行:课程名称和分类 */ +.course-basic-info-row { + width: 1000px; /* 从1307px减少到1000px */ + height: 32px; /* 从43px减少到32px */ + margin: 20px 0 0 80px; /* 从30px 0 0 102px减少到20px 0 0 80px */ +} + +.course-name-label { + width: 70px; /* 从89px减少到70px */ + height: 16px; /* 从18px减少到16px */ + overflow-wrap: break-word; + font-size: 0; + font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif; + font-weight: normal; + text-align: right; + white-space: nowrap; + line-height: 16px; /* 从18px减少到16px */ + margin-top: 6px; /* 从9px减少到6px */ +} + +.required-asterisk { + color: rgba(255, 77, 79, 1); + font-size: 14px; /* 从16px减少到14px */ + font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif; + font-weight: normal; + text-align: left; + white-space: nowrap; + line-height: 16px; /* 从18px减少到16px */ +} + +.label-text { + color: rgba(51, 51, 51, 1); + font-size: 14px; /* 从16px减少到14px */ + font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif; + font-weight: normal; + text-align: left; + white-space: nowrap; + line-height: 16px; /* 从18px减少到16px */ +} + +.course-name-input-wrapper { + height: 32px; /* 从42px减少到32px */ + background-size: 400px 32px; /* 从562px 44px减少到400px 32px */ + margin-left: 2px; + width: 400px; /* 从560px减少到400px */ + border: 1px solid #e0e0e0; + border-radius: 4px; + padding: 0 10px; /* 从0 12px减少到0 10px */ + display: flex; + align-items: center; +} + +.form-input { + width: 100%; + height: 100%; + border: none; + background: transparent; + font-size: 14px; /* 从16px减少到14px */ + color: #333; +} + +.course-input::placeholder { + color: rgba(153, 153, 153, 1); + font-size: 14px; /* 从16px减少到14px */ +} + +.course-category-section { + height: 32px; /* 从42px减少到32px */ + width: 400px; /* 从522px减少到400px */ + position: relative; + margin: 1px 0 0 100px; /* 从1px 0 0 134px减少到1px 0 0 100px */ +} + +.course-category-label { + width: 70px; /* 从89px减少到70px */ + height: 16px; /* 从18px减少到16px */ + overflow-wrap: break-word; + font-size: 0; + font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif; + font-weight: normal; + text-align: right; + white-space: nowrap; + line-height: 16px; /* 从18px减少到16px */ + margin-top: 6px; /* 从9px减少到6px */ +} + +.course-category-select-wrapper { + height: 32px; /* 从42px减少到32px */ + background-size: 400px 32px; /* 从562px 44px减少到400px 32px */ + width: 400px; /* 从560px减少到400px */ + position: absolute; + left: 70px; /* 从87px减少到70px */ + top: 0; + border: 1px solid #e0e0e0; + border-radius: 4px; + padding: 0 10px; /* 从0 12px减少到0 10px */ + display: flex; + align-items: center; +} + +.form-select { + width: 100%; + height: 100%; + border: none; + background: transparent; +} + +/* 第二行:主讲老师 */ +.instructor-sort-row { + width: 1000px; /* 从1340px减少到1000px */ + height: 32px; /* 从42px减少到32px */ + margin: 20px 0 0 80px; /* 从29px 0 0 102px减少到20px 0 0 80px */ +} + +.instructor-label { + width: 70px; /* 从89px减少到70px */ + height: 16px; /* 从18px减少到16px */ + overflow-wrap: break-word; + font-size: 0; + font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif; + font-weight: normal; + text-align: right; + white-space: nowrap; + line-height: 16px; /* 从18px减少到16px */ + margin-top: 6px; /* 从9px减少到6px */ +} + +.instructor-select-wrapper { + width: 400px; /* 从560px减少到400px */ + height: 32px; /* 从42px减少到32px */ + background-size: 400px 32px; /* 从562px 44px减少到400px 32px */ + margin-left: 2px; + border: 1px solid #e0e0e0; + border-radius: 4px; + padding: 0 10px; /* 从0 12px减少到0 10px */ + display: flex; + align-items: center; +} + +.instructor-select { + width: 100%; + height: 100%; + border: none; + background: transparent; +} + +/* 主讲老师选择区域样式已整合到 .instructor-select 中 */ + +.course-sort-section { + height: 32px; /* 从42px减少到32px */ + margin-left: 120px; /* 从159px减少到120px */ + width: 480px; /* 从630px减少到480px */ + display: flex; + align-items: center; + gap: 8px; /* 从10px减少到8px */ +} + +.course-sort-label { + width: 45px; /* 从57px减少到45px */ + height: 16px; /* 从18px减少到16px */ + overflow-wrap: break-word; + font-size: 0; + font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif; + font-weight: normal; + text-align: right; + white-space: nowrap; + line-height: 16px; /* 从18px减少到16px */ + flex-shrink: 0; +} + +/* 排序输入框 */ +.course-sort-input-wrapper { + position: relative; + left: 0; + top: 0; + width: 400px; /* 从560px减少到400px */ + height: 32px; /* 从42px减少到32px */ + background-size: 400px 32px; /* 从562px 44px减少到400px 32px */ + border: 1px solid #e0e0e0; + border-radius: 4px; + padding: 0 10px; /* 从0 12px减少到0 10px */ + display: flex; + align-items: center; + flex-shrink: 0; +} + +.sort-input { + width: 100%; + height: 100%; + border: none; + background: transparent; + font-size: 14px; /* 从16px减少到14px */ + color: #333; +} + +.sort-input::placeholder { + color: rgba(153, 153, 153, 1); + font-size: 14px; /* 从16px减少到14px */ +} + +/* 第三行:时间选择 */ +.course-time-row { + width: 1100px; /* 从1463px减少到1100px */ + height: 36px; /* 从49px减少到36px */ + margin: 20px 0 0 60px; /* 从30px 0 0 71px减少到20px 0 0 60px */ +} + +.start-time-label { + width: 90px; /* 从121px减少到90px */ + height: 16px; /* 从18px减少到16px */ + overflow-wrap: break-word; + font-size: 0; + font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif; + font-weight: normal; + text-align: right; + white-space: nowrap; + line-height: 16px; /* 从18px减少到16px */ + margin-top: 6px; /* 从9px减少到6px */ +} + +.start-time-picker-wrapper, +.end-time-picker-wrapper { + width: 400px; /* 从560px减少到400px */ + height: 32px; /* 从42px减少到32px */ + background-size: 400px 32px; /* 从562px 44px减少到400px 32px */ + margin-left: 1px; + border: 1px solid #e0e0e0; + border-radius: 4px; + padding: 0 10px; /* 从0 12px减少到0 10px */ + display: flex; + align-items: center; +} + +.group_12 { + margin: 5px 0 0 4px; /* 从7px 0 0 6px减少到5px 0 0 4px */ +} + +.form-datepicker { + width: 100%; + height: 100%; + border: none; + background: transparent; +} + +.end-time-label { + width: 90px; /* 从121px减少到90px */ + height: 16px; /* 从18px减少到16px */ + overflow-wrap: break-word; + font-size: 0; + font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif; + font-weight: normal; + text-align: right; + white-space: nowrap; + line-height: 16px; /* 从18px减少到16px */ + margin: 12px 0 0 70px; /* 从16px 0 0 94px减少到12px 0 0 70px */ +} + +/* 参与学员 */ +.student-selection-row { + width: 250px; /* 从312px减少到250px */ + height: 16px; /* 从18px减少到16px */ + margin: 16px 0 0 80px; /* 从23px 0 0 103px减少到16px 0 0 80px */ +} + +.student-selection-label { + width: 70px; /* 从89px减少到70px */ + height: 16px; /* 从18px减少到16px */ + overflow-wrap: break-word; + font-size: 0; + font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif; + font-weight: normal; + text-align: right; + white-space: nowrap; + line-height: 16px; /* 从18px减少到16px */ +} + +.student-type-radio-group { + margin-left: 3px; + align-items: center; +} + +.radio-option { + display: flex; + align-items: center; + cursor: pointer; + margin-right: 30px; /* 从38px减少到30px */ +} + +.radio-circle { + width: 14px; /* 从16px减少到14px */ + height: 14px; /* 从16px减少到14px */ + border: 2px solid #d9d9d9; + border-radius: 50%; + background: white; + margin-right: 6px; /* 从8px减少到6px */ + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s; +} + +.radio-circle.active { + border-color: #1890ff; +} + +.radio-dot { + width: 6px; /* 从8px减少到6px */ + height: 6px; /* 从8px减少到6px */ + background: #1890ff; + border-radius: 50%; +} + +.radio-text { + color: rgba(51, 51, 51, 1); + font-size: 14px; /* 从16px减少到14px */ + font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif; + font-weight: normal; + text-align: left; + white-space: nowrap; + line-height: 16px; /* 从18px减少到16px */ + margin-left: 5px; /* 从7px减少到5px */ +} + +/* 班级选择 */ +.class-selection-row { + width: 400px; /* 从560px减少到400px */ + height: 32px; /* 从44px减少到32px */ + margin: 12px 0 0 150px; /* 从16px 0 0 192px减少到12px 0 0 150px */ +} + +.class-select-wrapper { + width: 400px; /* 从560px减少到400px */ + height: 32px; /* 从44px减少到32px */ + background-size: 100% 100%; + border: 1px solid #e0e0e0; + border-radius: 4px; + padding: 0 14px; /* 从0 18px减少到0 14px */ + display: flex; + align-items: center; +} + +.class-select { + width: 100%; + height: 100%; + border: none; + background: transparent; +} + +/* 课程封面 */ +.course-cover-row { + width: 250px; /* 从312px减少到250px */ + height: 96px; /* 从128px减少到96px */ + margin: 20px 0 0 30px; /* 从30px 0 0 41px减少到20px 0 0 30px */ +} + +.course-cover-label { + width: 70px; /* 从89px减少到70px */ + height: 16px; /* 从18px减少到16px */ + overflow-wrap: break-word; + font-size: 0; + font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif; + font-weight: normal; + text-align: right; + white-space: nowrap; + line-height: 16px; /* 从18px减少到16px */ + margin-top: 6px; /* 从9px减少到6px */ +} + +.cover-upload-area { + width: 120px; /* 从160px减少到120px */ + height: 96px; /* 从128px减少到96px */ + border: 2px dashed #d9d9d9; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s; +} + +.cover-upload-area:hover { + border-color: #1890ff; + background-color: #f0f8ff; +} + +.upload-container { + width: 100%; + height: 100%; + text-align: center; + display: flex; + align-items: center; + justify-content: center; +} + +.cover-upload { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.upload-content { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; +} + +.upload-plus-icon { + font-size: 24px; /* 从28px减少到24px */ + color: #999; + margin-bottom: 6px; /* 从8px减少到6px */ + font-weight: normal; + line-height: 1; + display: block; +} + +.upload-text { + color: rgba(102, 102, 102, 1); + display: block; + font-size: 14px; /* 从16px减少到14px */ + font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif; + font-weight: normal; + text-align: center; + white-space: nowrap; + line-height: 16px; /* 从18px减少到16px */ +} + +.upload-text-label { + width: 28px; /* 从32px减少到28px */ + height: 16px; /* 从18px减少到16px */ + overflow-wrap: break-word; + color: rgba(102, 102, 102, 1); + font-size: 14px; /* 从16px减少到14px */ + font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif; + font-weight: normal; + text-align: center; + white-space: nowrap; + line-height: 16px; /* 从18px减少到16px */ +} + +/* 课程简介整体区域 */ +.course-description-section { + width: 1100px; /* 从1452px减少到1100px */ + margin: 30px 0 0 30px; /* 从42px 0 0 41px减少到30px 0 0 30px */ +} + +/* 课程简介标题 */ +.course-description-header { + position: relative; + width: 100%; + height: 18px; /* 从20px减少到18px */ + margin-bottom: -20px; /* 从-30px减少到-20px */ +} + +.course-description-label { + width: 70px; /* 从89px减少到70px */ + height: 16px; /* 从18px减少到16px */ + overflow-wrap: break-word; + font-size: 0; + font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif; + font-weight: normal; + text-align: right; + white-space: nowrap; + line-height: 16px; /* 从18px减少到16px */ +} + +.toolbar-icon-btn { + background: #f5f5f5; + border: 1px solid #d9d9d9; + border-radius: 4px; + padding: 3px 6px; /* 从4px 8px减少到3px 6px */ + cursor: pointer; + font-size: 12px; /* 从14px减少到12px */ + transition: all 0.3s; +} + +.toolbar-icon-btn:hover { + background: #e6f7ff; + border-color: #1890ff; +} + +/* 富文本编辑器区域 */ +.description-editor-container { + height: 250px; /* 从336px减少到250px */ + background-size: 100% 100%; + width: 1000px; /* 从1340px减少到1000px */ + position: relative; + left: 0; + top: 0; + margin-left: 100px; /* 从129px减少到100px */ + border-radius: 8px; + padding: 10px 15px; /* 从13px 19px减少到10px 15px */ + background: white; +} + +.toolbar-btn { + background: #f5f5f5; + border: 1px solid #d9d9d9; + border-radius: 4px; + padding: 2px 6px; /* 从3px 8px减少到2px 6px */ + cursor: pointer; + font-size: 12px; /* 从14px减少到12px */ + font-weight: bold; + transition: all 0.3s; +} + +.toolbar-btn:hover { + background: #e6f7ff; + border-color: #1890ff; +} + +.rich-text-editor { + width: 100%; + height: 100%; + border: 1px solid #e0e0e0; + border-radius: 4px; + background: white; +} + +/* 确保 QuillEditor 内部的边框正常显示 */ +.rich-text-editor :deep(.ql-container) { + border-bottom: 1px solid #e0e0e0; + border-left: 1px solid #e0e0e0; + border-right: 1px solid #e0e0e0; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; +} + +.rich-text-editor :deep(.ql-toolbar) { + border-top: 1px solid #e0e0e0; + border-left: 1px solid #e0e0e0; + border-right: 1px solid #e0e0e0; + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} + +/* 设置选项区域 */ +.course-settings-section { + margin: 20px 0 0 30px; /* 从30px 0 0 41px减少到20px 0 0 30px */ + width: 1000px; /* 从1400px减少到1000px */ +} + +.stop-on-leave-setting { + width: 280px; /* 从350px减少到280px */ + height: 20px; /* 从24px减少到20px */ + margin: 15px 0 0 25px; /* 从20px 0 0 31px减少到15px 0 0 25px */ + display: flex; + align-items: center; + justify-content: space-between; +} + +.setting-control { + width: 100%; + height: 20px; /* 从24px减少到20px */ + display: flex; + align-items: center; +} + +.setting-label { + width: auto; + height: 16px; /* 从18px减少到16px */ + overflow-wrap: break-word; + font-size: 0; + font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif; + font-weight: normal; + text-align: left; + white-space: nowrap; + line-height: 16px; /* 从18px减少到16px */ + margin-top: 1px; + display: flex; + align-items: center; + margin-right: 4px; /* 从5px减少到4px */ +} + +.video-speed-setting { + width: 280px; /* 从350px减少到280px */ + height: 20px; /* 从24px减少到20px */ + margin: 15px 0 0 50px; /* 从20px 0 0 63px减少到15px 0 0 50px */ + display: flex; + align-items: center; + justify-content: space-between; +} + +.video-text-setting { + width: 280px; /* 从350px减少到280px */ + height: 20px; /* 从24px减少到20px */ + margin: 15px 0 0 50px; /* 从20px 0 0 63px减少到15px 0 0 50px */ + display: flex; + align-items: center; + justify-content: space-between; +} + +/* 积分设置 */ +.points-setting-row { + width: 600px; /* 从800px减少到600px */ + height: 32px; /* 从40px减少到32px */ + margin: 15px 0 30px 70px; /* 从21px 0 40px 95px减少到15px 0 30px 70px */ + display: flex; + align-items: center; + gap: 8px; /* 从10px减少到8px */ +} + +.points-setting-control { + width: auto; + height: 20px; /* 从24px减少到20px */ + margin-top: 6px; /* 从9px减少到6px */ + display: flex; + align-items: center; + margin-right: 15px; /* 从20px减少到15px */ +} + +.points-setting-control .setting-label { + width: 70px; /* 从89px减少到70px */ + margin-right: 0; +} + +.points-description-text { + color: rgba(51, 51, 51, 1); + font-size: 14px; /* 从16px减少到14px */ + font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif; + font-weight: normal; + text-align: left; + white-space: nowrap; + line-height: 16px; /* 从18px减少到16px */ + margin: 0 6px; /* 从0 8px减少到0 6px */ +} + +.earn-points-input-container, +.required-points-input-container { + width: 60px; /* 从80px减少到60px */ + height: 24px; /* 从32px减少到24px */ + display: flex; + align-items: center; + justify-content: center; + border: 1px solid #d9d9d9; + border-radius: 4px; + background: white; +} + +/* 蓝色开关样式 */ +.toggle-switch { + --n-rail-color: #e0e0e0 !important; + --n-rail-color-active: #1890ff !important; + --n-button-color: #ffffff !important; + --n-button-color-active: #ffffff !important; + --n-button-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important; +} + +.blue-switch .n-switch__rail { + background-color: #e0e0e0 !important; +} + +.blue-switch .n-switch__rail--active { + background-color: #1890ff !important; +} + +/* 原生开关按钮样式 */ +.toggle-button { + position: relative; + width: 36px; /* 从44px减少到36px */ + height: 18px; /* 从22px减少到18px */ + border-radius: 9px; /* 从11px减少到9px */ + background-color: #e0e0e0; + cursor: pointer; + transition: all 0.3s; + outline: none; + padding: 0; + border: none; + font-size: 0; /* 隐藏文字 */ + box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1); + margin-left: 0; +} + +.toggle-button::after { + content: ""; + position: absolute; + top: 2px; + left: 2px; + width: 14px; /* 从18px减少到14px */ + height: 14px; /* 从18px减少到14px */ + border-radius: 50%; + background-color: white; + transition: all 0.3s; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); +} + +.toggle-button-active { + background-color: #1890ff; + box-shadow: none; +} + +.toggle-button-active::after { + left: calc(100% - 16px); /* 从calc(100% - 20px)减少到calc(100% - 16px) */ +} + +/* 积分输入框样式 */ +.points-input { + width: 100%; + height: 100%; + border: none; + background: transparent; + font-size: 12px; /* 从14px减少到12px */ + color: #333; + text-align: center; + outline: none; +} + +.points-input:focus { + background: rgba(240, 248, 255, 0.3); +} + +/* 底部按钮区域 */ +.form-action-buttons { + position: relative; + left: 0; + top: 0; + width: 100%; + height: 70px; /* 从91px减少到70px */ + background-size: 1920px 139px; + display: flex; + align-items: center; + justify-content: flex-end; + padding-right: 80px; /* 从100px减少到80px */ + gap: 12px; /* 从15px减少到12px */ + margin-top: 40px; /* 从60px减少到40px */ +} + +.button-spacer { + width: 50px; /* 从66px减少到50px */ + height: 28px; /* 从32px减少到28px */ +} + +.cancel-button { + height: 28px; /* 从32px减少到28px */ + width: 70px; /* 从80px减少到70px */ + border: 1px solid #d9d9d9; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s; + background-color: white; +} + +.cancel-button:hover { + border-color: #40a9ff; + color: #40a9ff; +} + +.submit-button { + height: 28px; /* 从32px减少到28px */ + width: 70px; /* 从80px减少到70px */ + background-color: #1890ff; + border: 1px solid #1890ff; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s; +} + +.submit-button:hover { + background-color: #40a9ff; + border-color: #40a9ff; +} + +.button-text { + color: rgba(255, 255, 255, 1); + font-size: 14px; /* 从16px减少到14px */ + font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif; + font-weight: normal; + text-align: center; + white-space: nowrap; + line-height: 18px; /* 从22px减少到18px */ +} + +.cancel-button .button-text { + color: rgba(0, 0, 0, 0.65); + font-size: 12px; /* 从14px减少到12px */ +} diff --git a/src/components/common/CommonModal.vue b/src/components/common/CommonModal.vue new file mode 100644 index 0000000..5dad50e --- /dev/null +++ b/src/components/common/CommonModal.vue @@ -0,0 +1,232 @@ + + + + + diff --git a/src/components/common/CreateFolderContent.vue b/src/components/common/CreateFolderContent.vue new file mode 100644 index 0000000..cdbb4bb --- /dev/null +++ b/src/components/common/CreateFolderContent.vue @@ -0,0 +1,129 @@ + + + + + diff --git a/src/components/common/MoveFileContent.vue b/src/components/common/MoveFileContent.vue new file mode 100644 index 0000000..f0a6315 --- /dev/null +++ b/src/components/common/MoveFileContent.vue @@ -0,0 +1,216 @@ + + + + + diff --git a/src/router/index.ts b/src/router/index.ts index 15d6357..2d1bb8a 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -120,7 +120,7 @@ const routes: RouteRecordRaw[] = [ path: 'course-editor/:id', name: 'CourseEditor', component: CourseEditor, - meta: { title: '编辑课程' }, + meta: { title: '课程管理' }, redirect: (to) => `/teacher/course-editor/${to.params.id}/courseware`, children: [ { @@ -157,9 +157,23 @@ const routes: RouteRecordRaw[] = [ }, { path: 'practice', - name: 'PracticeManagement', - component: PracticeManagement, - meta: { title: '考试管理' }, + name: 'Practice', + redirect: (to) => `/teacher/course-editor/${to.params.id}/practice/exam`, + meta: { title: '练考通' }, + children: [ + { + path: 'exam', + name: 'PracticeExam', + component: () => import('../views/teacher/course/PracticeExam.vue'), + meta: { title: '试卷' } + }, + { + path: 'review', + name: 'PracticeReview', + component: () => import('../views/teacher/course/PracticeReview.vue'), + meta: { title: '阅卷中心' } + } + ] }, { path: 'question-bank', @@ -167,6 +181,12 @@ const routes: RouteRecordRaw[] = [ component: QuestionBankManagement, meta: { title: '题库管理' } }, + { + path: 'add-question', + name: 'AddQuestion', + component: () => import('../views/teacher/course/AddQuestion.vue'), + meta: { title: '新增试题' } + }, { path: 'certificate', name: 'CertificateManagement', diff --git a/src/views/teacher/AdminDashboard.vue b/src/views/teacher/AdminDashboard.vue index 12034e8..56b1634 100644 --- a/src/views/teacher/AdminDashboard.vue +++ b/src/views/teacher/AdminDashboard.vue @@ -83,13 +83,30 @@ const breadcrumbItems = computed(() => { // 获取当前路由的matched数组 const matchedRoutes = route.matched; - // 处理matchedRoutes,过滤掉'管理后台'并生成面包屑项 - return matchedRoutes + // 基础面包屑项 + let breadcrumbs = matchedRoutes .filter(item => item.meta.title !== '管理后台') .map(item => ({ title: item.meta.title || '未知页面', path: item.path })); + + // 特殊处理新增试题页面,插入"题库"层级 + const currentPath = route.path; + if (currentPath.includes('/add-question')) { + // 找到课程管理项的索引 + const courseIndex = breadcrumbs.findIndex(item => item.title === '课程管理'); + if (courseIndex !== -1) { + // 在课程管理和新增试题之间插入题库项 + const courseId = route.params.id; + breadcrumbs.splice(courseIndex + 1, 0, { + title: '题库', + path: `/teacher/course-editor/${courseId}/question-bank` + }); + } + } + + return breadcrumbs; }); // 监听路由变化,更新激活的导航项 @@ -120,6 +137,10 @@ const updateActiveNavItem = () => { diff --git a/src/views/teacher/course/CourseEditor.vue b/src/views/teacher/course/CourseEditor.vue index 0b5c1dd..3b6293f 100644 --- a/src/views/teacher/course/CourseEditor.vue +++ b/src/views/teacher/course/CourseEditor.vue @@ -1,7 +1,7 @@ @@ -81,6 +98,9 @@ import type { DataTableColumns, DropdownOption } from 'naive-ui' import AddCoursewareModal from './AddCoursewareModal.vue' import UploadFileModal from './UploadFileModal.vue' import DeleteFolderConfirmModal from '@/components/common/DeleteFolderConfirmModal.vue' +import CommonModal from '@/components/common/CommonModal.vue' +import CreateFolderContent from '@/components/common/CreateFolderContent.vue' +import MoveFileContent from '@/components/common/MoveFileContent.vue' const message = useMessage() @@ -107,6 +127,8 @@ const selectedFiles = ref([]) const showAddCoursewareModal = ref(false) const showUploadFileModal = ref(false) const showDeleteConfirmModal = ref(false) +const showCreateFolderModal = ref(false) +const showMoveFileModal = ref(false) // 存储待删除的项目信息 const itemsToDelete = ref<{ type: 'single' | 'multiple', data: any }>({ type: 'single', data: null }) @@ -589,12 +611,67 @@ const closeAddCoursewareModal = () => { } const createFolder = () => { - message.info('新建文件夹功能') + showCreateFolderModal.value = true } const moveFiles = () => { if (selectedFiles.value.length === 0) return - message.info(`移动 ${selectedFiles.value.length} 个文件`) + showMoveFileModal.value = true +} + +// 关闭新建文件夹模态框 +const closeCreateFolderModal = () => { + showCreateFolderModal.value = false +} + +// 关闭移动文件模态框 +const closeMoveFileModal = () => { + showMoveFileModal.value = false +} + +// 处理创建文件夹 +const handleCreateFolder = (folderName: string) => { + console.log('handleCreateFolder 接收到参数:', folderName) + + // 创建新的文件夹对象 + const newFolder: FileItem = { + id: Date.now(), + name: folderName, + type: 'folder', + size: '0B', + creator: '王建国', // 这里可以从用户状态获取 + createTime: new Date().toLocaleString('zh-CN', { + year: 'numeric', + month: '2-digit', + day: '2-digit', + hour: '2-digit', + minute: '2-digit' + }).replace(/\//g, '.'), + isTop: false, + expanded: false, + children: [] + } + + console.log('创建的新文件夹对象:', newFolder) + + // 添加到文件列表 + fileList.value.push(newFolder) + + // 显示成功消息 + message.success(`文件夹 "${folderName}" 创建成功`) + + // 关闭模态框 + showCreateFolderModal.value = false +} + +// 处理移动文件 +const handleMoveFiles = (targetFolder: any) => { + // 这里实现移动文件的逻辑 + message.success(`成功移动 ${selectedFiles.value.length} 个文件到 "${targetFolder.name}"`) + selectedFiles.value = [] // 清空选择 + + // 关闭模态框 + showMoveFileModal.value = false } const deleteSelected = () => { @@ -814,6 +891,10 @@ const toggleFolder = (folder: FileItem) => { color: #1890ff; } +.btn-default--active { + border-color: #1890ff !important; + color: #1890ff !important; +} .btn-danger { background: white; color: #FF4D4F; diff --git a/src/views/teacher/course/LocalUploadModal.vue b/src/views/teacher/course/LocalUploadModal.vue new file mode 100644 index 0000000..7ecdbc0 --- /dev/null +++ b/src/views/teacher/course/LocalUploadModal.vue @@ -0,0 +1,655 @@ + + + + + diff --git a/src/views/teacher/course/PracticeExam.vue b/src/views/teacher/course/PracticeExam.vue new file mode 100644 index 0000000..cf7608c --- /dev/null +++ b/src/views/teacher/course/PracticeExam.vue @@ -0,0 +1,15 @@ + + + + + diff --git a/src/views/teacher/course/PracticeReview.vue b/src/views/teacher/course/PracticeReview.vue new file mode 100644 index 0000000..88a4c2e --- /dev/null +++ b/src/views/teacher/course/PracticeReview.vue @@ -0,0 +1,15 @@ + + + + + diff --git a/src/views/teacher/course/QuestionBankManagement.vue b/src/views/teacher/course/QuestionBankManagement.vue index f98a144..a97f337 100644 --- a/src/views/teacher/course/QuestionBankManagement.vue +++ b/src/views/teacher/course/QuestionBankManagement.vue @@ -51,8 +51,11 @@ import { dateZhCN } from 'naive-ui' import type { DataTableColumns } from 'naive-ui' +import { useRoute, useRouter } from 'vue-router' const message = useMessage() +const route = useRoute() +const router = useRouter() // 题目类型定义 interface Question { @@ -440,7 +443,8 @@ const searchQuestions = () => { } const addQuestion = () => { - message.info('添加试题功能') + const courseId = route.params.id + router.push(`/teacher/course-editor/${courseId}/add-question`) } const importQuestions = () => { diff --git a/src/views/teacher/course/ResourceSelectionModal.vue b/src/views/teacher/course/ResourceSelectionModal.vue index 1be9475..334ec78 100644 --- a/src/views/teacher/course/ResourceSelectionModal.vue +++ b/src/views/teacher/course/ResourceSelectionModal.vue @@ -356,7 +356,6 @@ watch(() => props.show, (newVal) => { justify-content: flex-end; gap: 12px; padding-top: 16px; - border-top: 1px solid #e0e0e0; } /* 响应式设计 */ diff --git a/src/views/teacher/course/UploadFileModal.vue b/src/views/teacher/course/UploadFileModal.vue index e1f9e4d..a1c9b95 100644 --- a/src/views/teacher/course/UploadFileModal.vue +++ b/src/views/teacher/course/UploadFileModal.vue @@ -7,9 +7,9 @@ 选择文件
-