From 2d8339ed4e52632079dcff6fbf936bc2a380b10c Mon Sep 17 00:00:00 2001 From: Admin <14169871+longhui_3_0@user.noreply.gitee.com> Date: Fri, 22 Aug 2025 21:10:29 +0800 Subject: [PATCH] =?UTF-8?q?=20=E6=96=B0=E5=A2=9E=E7=AB=A0=E8=8A=82?= =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E3=80=81=E8=AF=BE=E4=BB=B6=E4=B8=8A?= =?UTF-8?q?=E4=BC=A0=E5=BC=B9=E7=AA=97=E7=AD=89=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/images/teacher/分组76.png | Bin 0 -> 544 bytes public/images/teacher/切片_58.png | Bin 0 -> 1069 bytes public/images/teacher/加号(2).png | Bin 0 -> 918 bytes public/images/teacher/加号(3).png | Bin 0 -> 962 bytes public/images/teacher/加号_4.png | Bin 0 -> 2747 bytes public/images/teacher/路径18.png | Bin 0 -> 378 bytes public/images/teacher/路径4.png | Bin 0 -> 329 bytes public/images/teacher/路径5.png | Bin 0 -> 476 bytes public/images/teacher/路径_2.png | Bin 0 -> 627 bytes .../admin/CourseComponents/CourseCategory.vue | 331 +++++++++++- .../admin/CourseComponents/CourseCreate.vue | 51 +- .../CourseComponents/css/CourseCreate.css | 180 +++++-- src/components/admin/CourseManagement.vue | 4 +- .../common/DeleteFolderConfirmModal.vue | 199 ++++++++ src/router/index.ts | 13 +- src/views/teacher/course/ChapterEditor.vue | 479 +++++++++++++++++- .../teacher/course/ChapterManagement.vue | 11 +- .../teacher/course/CoursewareManagement.vue | 138 +++-- 18 files changed, 1267 insertions(+), 139 deletions(-) create mode 100644 public/images/teacher/分组76.png create mode 100644 public/images/teacher/切片_58.png create mode 100644 public/images/teacher/加号(2).png create mode 100644 public/images/teacher/加号(3).png create mode 100644 public/images/teacher/加号_4.png create mode 100644 public/images/teacher/路径18.png create mode 100644 public/images/teacher/路径4.png create mode 100644 public/images/teacher/路径5.png create mode 100644 public/images/teacher/路径_2.png create mode 100644 src/components/common/DeleteFolderConfirmModal.vue diff --git a/public/images/teacher/分组76.png b/public/images/teacher/分组76.png new file mode 100644 index 0000000000000000000000000000000000000000..458f7a2d0e70c8611171f9765ecb357a47d83c6e GIT binary patch literal 544 zcmV+*0^j|KP)00001b5ch_0Itp) z=>Px#1am@3R0s$N2z&@+hyVZq%1J~)R5*>zlud5aP!xr~dxH$jj0%-Hs=b3SBZ`oc z9V9ylD`>ldv@1xn0@4-04w?xvvw8>iEQ1!cvm&az%fOEFQ#&?{dPcr_=lI?C_X)Y8 zZxEZ=v>U#ku_4LKcOyi;QX+x)(X`(W-#q|mlq`ZOGk`(+t-A55R@56; znTwEddY#<+0BXjdE&$;1GyqTmze!--5~NLxf@X^r;d`^dQw*Ty{!9%XYTW0Y@F)e) zPI#1x*;!>sn01a1F4kqPC|LxkH#Vc4ZG@%HxY|AG7bw{*qGS;`T0KGhCB&b@5A)K% zb#m{&Q8&RD?Tn|+mcwp%7;goBroV0s+Er~hTYg-H^ha_x+Ghq(X?*gJyB8bWDU0RCtASRL?&fW6XEjH@xfV9N68{E@ox4KP&i+a zLs4&Bhs!M(WAqv<)GuHR1a*N;X)Pv;S^gKs&Ml|4X5q4caW_1SG5b<&xA~*fau|!e io;a+RZ*#g!Zh*fD#k-+z+UG0)0000}`k6@!kq!KJ>Yqi!yo2Js5#C2oAnABw5k8{qPnem<7Y>JvRy=f2UIq%H-@ys*t z%;C66&#fUo^W%k&#xMOkH(B~)VPd*m`(gUG#>7l1Bt$<=&&CeqR}SMdzpL??vN~TX zsma;P=JdJKcJ%m%c4+8UlEub9euhi0;Vm%rtl=6^V|3 z;D@5abBJU{Mj|U?o|du5$f_1HM2dCZnMd!v+wkU*cfZK@-WBrU(Gy>H-`17WDuFQu zT5AZw5QZ_lz(-6xm3D3o4KTTza&iXhL$R2CtXg9l(i7TS8)F*pS7OAZc;bUMJ&(h}-X zh+M7TJ17_|saDM_SyQg28`>vge=XOJb#UA{Pc_@%=yoSmF5 zyXY#ho9r6g^BCE3MAwWC7n}(gCW+obK-0VpOMP#)m?Px#1am@3R0s$N2z&@+hyVZsKuJVFR9J=8SfKg~&zi}fRC4oq5wlAXF;9SY63-Nlw+40|_`O!Cp)uo=}NBB~;$W#h{ zCf|&hCmfzE00gFG5_7W{S8^&9+$_d0=GXpt)qt2(kuG!zbF&zOm>i6h3sf)lD!hIF z_cr0oXP-Q`OY>hZS5j*4edybCi6{w-n3=~OR;fK5c20HJITh*vZ{!=ph`C3U1RMWt zE|4*RjRj30)aklKmZNa4)bm~S0ceY~HVpXY5}9@XcqoSsJH>b6dhr(??y>F~uND>& zA6LlhhEmziZUF!yt=FiL5ss3sK)OCk4+#Ogh>|Xl6E-3jM`h%Iyx3Z~#K*Pn8u|cW za#IJ#Wa5Z+R(t2B{tPh2oShI1#Jwy|%Wu5c^3TK)ES5AmT{1X2eg#{b|)8%Vd=aMu2u@ z0sj$U9MWccm1PczR+RKnbDs!U1JKqfGh$}B!owg+y7{H60aG#8FEc=#$&?p4V#}g| zT>pLo7!=Aft2$M31RqWyVoO3~F|CqIS{7$>Y0xO%mhLUqsOqz?qW=Y@J{p&B@1j*Mr z<1ID&Te&bJ`X?OD*SneM`gZ*c_;zfJ+ncb$svMtB|hRFv6^ sq76uUm5Q_XBCP-xB34zOeMh(d0A&|mO3}4o3IG5A07*qoM6N<$f)SgG3jhEB literal 0 HcmV?d00001 diff --git a/public/images/teacher/加号(3).png b/public/images/teacher/加号(3).png new file mode 100644 index 0000000000000000000000000000000000000000..997793d00aede0077e31735f645a5850826a27bc GIT binary patch literal 962 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 Y9~UKc^ChjN)c^nh07*qoM6N<$f?x=n>Hq)$ literal 0 HcmV?d00001 diff --git a/public/images/teacher/路径4.png b/public/images/teacher/路径4.png new file mode 100644 index 0000000000000000000000000000000000000000..5cb70ed30e1a849cf929317818f8e0873065d8e6 GIT binary patch literal 329 zcmV-P0k-~$P)Px#1am@3R0s$N2z&@+hyVZp^GQTOR5*>j)X{CkAPj)v-_8OzLPlseNH*vS_kzSk zNW9z%-5@tYMqq@S0QaHcR9%w>BBeYU{K+x~i80=C&b^skz4wU&D}>N@U3UYLbM6YD zX7(W>gQ`v;g#HMss*{-wW;T?#ipU5&fW8$kD9{5b=RB4@0f;fanb`zf%7MMMtf4=1 z6u>z*=bYbxR8#pL`mDGmq2|mlcrURQU4^#*fLe4DUc;Ag75XQVpaG8Jd6|82!7 zmv_pzo$^3hs;Pd`E$9aR5RuV2H$UMcXbrAMQ2_6KnV1AzmaiB1{^;+(+={;9W_A~m b&l3LvPc$SB!DL5S00000NkvXXu0mjfv7Cm* literal 0 HcmV?d00001 diff --git a/public/images/teacher/路径5.png b/public/images/teacher/路径5.png new file mode 100644 index 0000000000000000000000000000000000000000..8c4375f05bbf0b98e29fa8edced91a84040ae147 GIT binary patch literal 476 zcmV<20VDp2P)Px#1am@3R0s$N2z&@+hyVZqhDk(0R5*>Tl+kh9Fbsx2h#tTrXasivvEc^s2FV8U z1aT&CJ3-wEnhltv2B=5S2p+&V%jH?0cn15FfAf+hJx`2CC{T4zvegRfH=l=3OMpQKny-}5irfHssN*9Yo z{30wC81OhYVl_;frg;YT0A{wz4xS2IW>^g%B3tkMeq2|LU#RLvL=HK9=(_G{3M^0L z49m@5#04;fa6Fw(YoG@(v+ZY4=iJWBRyp1O3kCzzT5+2)6oQp?B14rSN= z3kc_1qd2w~k^N|AC&4BI;o@Q_aaKI_JClLepyOL)b|AdF(#-Be2y8_OkF$|1T2+GTjg?jcQ%`;(&_Z~Uaz;gP!aH18rW<$H=(*W2!iD2^ZCA5EY3zE zk#~c^;E4d9XenT;)q0)J=RX5%DwRtA+ibQyi9~WfolePQGP#Xm*wWCYfKc5hXd?|f z4Tr;D3*R)llhru~>Am<7}H3 zI3AB5Q4}@P>-E2MI^92ZGGl8rns3knyxZ-*$mMeH89&#}3nWRBG8&C>i^bC9N@jd6 zm+L^SR(Iuc`Mlk3>#NnOjft^uUSKAZ`D3+OkJw3Eb|4VgM-XHP!zBWs2ij}rddCao zO5pQFqtUM_m1<0q { max-width: 100%; height: auto; min-height: 1181px; - margin-right: 28px; + margin: 0; /* 移除所有边距 */ box-sizing: border-box; - padding: 10px; /* 添加内边距以便更好地观察布局 */ + padding: 5px; /* 减少内边距 */ position: relative; /* 添加相对定位，使分页按钮的绝对定位基于此容器 */ + overflow-x: hidden; /* 防止水平滚动 */ } .top { white-space: nowrap; /* 防止链接换行 */ - padding: 0 20px; + padding: 0 8px; /* 进一步减少左右padding */ height: 60px; display: flex; align-items: center; @@ -219,9 +220,13 @@ const navigateToCreateCourse = () => { .course-grid { display: grid; - grid-template-columns: repeat(6, 1fr); - gap: 20px; + grid-template-columns: repeat(4, 1fr); /* 默认4列，确保100%缩放下不被截断 */ + gap: 12px; /* 进一步减少间距 */ margin-bottom: 20px; + width: 100%; + max-width: 100%; + box-sizing: border-box; + padding: 0 3px; /* 减少内边距 */ } .course-card { @@ -374,9 +379,11 @@ const navigateToCreateCourse = () => { aspect-ratio: 150 / 105; /* 居中 */ display: block; - margin: 5px auto 10px; + margin: 5px auto 20px; /* 增加图片下方间距从10px到20px */ position: relative; top: -10px; + object-fit: cover; + object-position: center; } .course-name{ width: 80%; @@ -391,21 +398,24 @@ const navigateToCreateCourse = () => { white-space: nowrap; /* 强制文本在一行显示 */ overflow: hidden; /* 隐藏超出容器的文本 */ text-overflow: ellipsis; /* 溢出部分用省略号表示 */ - margin-top: -5px; + margin-top: 0; /* 移除负边距，让文字与图片保持正常距离 */ + margin-bottom: 15px; /* 添加底部边距，让文字不挨着底部 */ } /* 分页样式 */ .pagination { display: flex; justify-content: center; - position: absolute; - bottom: 61px; + position: relative; + margin-top: 40px; + margin-bottom: 40px; left: 0; right: 0; } .pagination-content { - width: 703px; + width: 100%; + max-width: 703px; height: 38px; display: flex; justify-content: center; @@ -413,6 +423,7 @@ const navigateToCreateCourse = () => { margin: 0 auto; border-radius: 4px; padding: 0 10px; + box-sizing: border-box; } .page-numbers { @@ -472,4 +483,304 @@ const navigateToCreateCourse = () => { border-color: #1890ff; } +/* 响应式设计 - 让卡片图片和文字响应式放大 */ + +/* 超大屏幕 (≥1920px) - 图片和文字放大 */ +@media (min-width: 1920px) { + .course-category { + max-width: 1800px; + margin: 0 auto; + padding: 20px; + background: #f5f5f5; + border-radius: 8px; + } + + .course-grid { + grid-template-columns: repeat(6, 1fr); + gap: 30px; + } + + .course-card { + aspect-ratio: 200 / 220; + } + + .course-info img { + width: 85%; + margin: 8px auto 25px; + } + + .course-name { + font-size: 16px; + height: 24px; + line-height: 24px; + width: 85%; + margin-bottom: 18px; + } + + .section-title { + width: 60px; + height: 24px; + font-size: 14px; + } + + .more-icon { + font-size: 20px; + } +} + +/* 超大屏幕 (1600px+) */ +@media (min-width: 1600px) { + .course-category { + max-width: 1500px; + margin: 0 auto; + padding: 15px; + } + + .course-grid { + grid-template-columns: repeat(6, 1fr); + gap: 20px; + } + + .course-info img { + width: 82%; + margin: 6px auto 22px; + } + + .course-name { + font-size: 15px; + height: 22px; + line-height: 22px; + width: 82%; + margin-bottom: 16px; + } + + .section-title { + width: 55px; + height: 22px; + font-size: 13px; + } +} + +/* 大屏幕 (1400px-1599px) */ +@media (max-width: 1599px) and (min-width: 1400px) { + .course-grid { + grid-template-columns: repeat(5, 1fr); + gap: 15px; + } +} + +/* 标准屏幕 (1300px-1399px) */ +@media (max-width: 1399px) and (min-width: 1300px) { + .course-grid { + grid-template-columns: repeat(4, 1fr); + gap: 15px; + } +} + +/* 中等屏幕 (1200px-1299px) */ +@media (max-width: 1299px) and (min-width: 1200px) { + .course-grid { + grid-template-columns: repeat(4, 1fr); + gap: 15px; + } + + .course-card { + aspect-ratio: 190 / 210; + } + + .course-info img { + width: 80%; + } + + .course-name { + font-size: 14px; + width: 80%; + margin-bottom: 15px; + } +} + +/* 小屏幕 (900px-1199px) */ +@media (max-width: 1199px) and (min-width: 900px) { + .course-grid { + grid-template-columns: repeat(4, 1fr); + gap: 18px; + } + + .course-card { + aspect-ratio: 180 / 200; + } + + .course-info img { + width: 78%; + margin: 5px auto 18px; + } + + .course-name { + font-size: 13px; + height: 18px; + line-height: 18px; + width: 78%; + margin-bottom: 14px; + } + + .section-title { + width: 48px; + height: 18px; + font-size: 11px; + } +} + +/* 平板 (600px-899px) */ +@media (max-width: 899px) and (min-width: 600px) { + .course-category { + padding: 10px; + } + + .course-grid { + grid-template-columns: repeat(3, 1fr); + gap: 15px; + } + + .course-card { + aspect-ratio: 170 / 190; + } + + .course-info img { + width: 75%; + margin: 4px auto 15px; + } + + .course-name { + font-size: 12px; + height: 16px; + line-height: 16px; + width: 75%; + margin-bottom: 12px; + } + + .section-title { + width: 45px; + height: 16px; + font-size: 10px; + } + + .more-icon { + font-size: 16px; + } + + /* 调整顶部操作区域 */ + .top { + flex-direction: column; + gap: 15px; + } + + .actions { + flex-direction: column; + gap: 10px; + } + + .search-container { + width: 100%; + } + + .search-container input { + width: 70%; + } +} + +/* 移动端 (≤599px) */ +@media (max-width: 599px) { + .course-category { + padding: 8px; + } + + .course-grid { + grid-template-columns: repeat(2, 1fr); + gap: 12px; + } + + .course-card { + aspect-ratio: 160 / 180; + } + + .course-info img { + width: 70%; + margin: 3px auto 12px; + } + + .course-name { + font-size: 11px; + height: 14px; + line-height: 14px; + width: 70%; + margin-bottom: 10px; + } + + .section-title { + width: 40px; + height: 14px; + font-size: 9px; + } + + .more-icon { + font-size: 14px; + } + + /* 顶部区域移动端优化 */ + .top { + flex-direction: column; + gap: 10px; + padding: 10px 0; + } + + .nav-links { + justify-content: center; + } + + .nav-links a { + padding: 8px 12px; + font-size: 14px; + } + + .actions { + flex-direction: column; + gap: 8px; + width: 100%; + } + + .create-btn { + width: 100%; + padding: 10px; + } + + .search-container { + width: 100%; + } + + .search-container input { + width: 70%; + padding: 8px; + } + + .search-btn { + padding: 8px 12px; + } + + /* 分页区域移动端优化 */ + .pagination-content { + width: 100%; + padding: 0 5px; + } + + .page-numbers { + flex-wrap: wrap; + gap: 5px; + } + + .page-number { + padding: 5px 8px; + font-size: 12px; + } +} + diff --git a/src/components/admin/CourseComponents/CourseCreate.vue b/src/components/admin/CourseComponents/CourseCreate.vue index fc5109a..dc7cac0 100644 --- a/src/components/admin/CourseComponents/CourseCreate.vue +++ b/src/components/admin/CourseComponents/CourseCreate.vue @@ -49,23 +49,21 @@ :render-tag="renderInstructorTag" /> -
+
* 排序：
+
+ +
- - -
- -
@@ -170,23 +168,24 @@
- -
-
- * - 课程简介： + +
+
+
+ * + 课程简介： +
-
- - -
- + +
+ +
diff --git a/src/components/admin/CourseComponents/css/CourseCreate.css b/src/components/admin/CourseComponents/css/CourseCreate.css index 1efcfc0..8730059 100644 --- a/src/components/admin/CourseComponents/css/CourseCreate.css +++ b/src/components/admin/CourseComponents/css/CourseCreate.css @@ -71,15 +71,17 @@ .course-create-page { background-color: rgba(255, 255, 255, 1); position: relative; - height: 1712px; - overflow: hidden; + min-height: 1712px; + height: auto; + overflow: visible; } .course-form-container { - height: 1211px; + min-height: 1211px; + height: auto; background-size: 100% 100%; /* width: 1565px; */ - position: absolute; + position: relative; } /* 第一行：课程名称和分类 */ @@ -233,7 +235,10 @@ .course-sort-section { height: 42px; margin-left: 159px; - width: 530px; + width: 630px; + display: flex; + align-items: center; + gap: 10px; } .course-sort-label { @@ -246,14 +251,14 @@ text-align: right; white-space: nowrap; line-height: 18px; - margin-top: 9px; + flex-shrink: 0; } /* 排序输入框 */ .course-sort-input-wrapper { - position: absolute; - left: 974px; - top: 102px; + position: relative; + left: 0; + top: 0; width: 560px; height: 42px; background-size: 562px 44px; @@ -262,6 +267,7 @@ padding: 0 12px; display: flex; align-items: center; + flex-shrink: 0; } .sort-input { @@ -521,12 +527,18 @@ line-height: 18px; } + /* 课程简介整体区域 */ + .course-description-section { + width: 1452px; + margin: 42px 0 0 41px; + } + /* 课程简介标题 */ .course-description-header { position: relative; - width: 1452px; + width: 100%; height: 20px; - margin: 42px 0 0 41px; + margin-bottom: -30px; } .course-description-label { @@ -563,9 +575,10 @@ height: 336px; background-size: 100% 100%; width: 1340px; - position: absolute; - left: 170px; - top: 453px; + position: relative; + left: 0; + top: 0; + margin-left: 129px; border-radius: 8px; padding: 13px 19px; background: white; @@ -617,13 +630,14 @@ /* 设置选项区域 */ .course-settings-section { - margin-top: 20px; + margin: 30px 0 0 41px; + width: 1400px; } .stop-on-leave-setting { width: 350px; height: 24px; - margin: 334px 0 0 31px; + margin: 20px 0 0 31px; display: flex; align-items: center; justify-content: space-between; @@ -655,7 +669,7 @@ .video-speed-setting { width: 350px; height: 24px; - margin: 29px 0 0 63px; + margin: 20px 0 0 63px; display: flex; align-items: center; justify-content: space-between; @@ -664,7 +678,7 @@ .video-text-setting { width: 350px; height: 24px; - margin: 31px 0 0 63px; + margin: 20px 0 0 63px; display: flex; align-items: center; justify-content: space-between; @@ -674,7 +688,7 @@ .points-setting-row { width: 800px; height: 40px; - margin: 21px 0 140px 95px; + margin: 21px 0 40px 95px; display: flex; align-items: center; gap: 10px; @@ -792,10 +806,10 @@ /* 底部按钮区域 */ .form-action-buttons { - position: absolute; - left: -325px; - top: 1149px; - width: 1917px; + position: relative; + left: 0; + top: 0; + width: 100%; height: 91px; background-size: 1920px 139px; display: flex; @@ -803,6 +817,7 @@ justify-content: flex-end; padding-right: 100px; gap: 15px; + margin-top: 60px; } .button-spacer { @@ -861,17 +876,120 @@ font-size: 14px; } - /* 响应式设计 */ - @media (max-width: 1920px) { + /* 响应式设计 - 保持原有布局不变，只在特定屏幕尺寸下优化 */ + + /* 大屏幕优化 (≥1920px) - 让表单居中显示 */ + @media (min-width: 1920px) { .course-create-page { - width: 100%; - min-width: 1200px; + 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; } } - @media (max-width: 1400px) { - .course-basic-info-row, .instructor-sort-row, .course-time-row { - width: 90%; - margin-left: 5%; + /* 中等屏幕 (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 diff --git a/src/components/admin/CourseManagement.vue b/src/components/admin/CourseManagement.vue index 7e357f2..aae3741 100644 --- a/src/components/admin/CourseManagement.vue +++ b/src/components/admin/CourseManagement.vue @@ -204,8 +204,10 @@ import CourseCategory from './CourseComponents/CourseCategory.vue' .content-container { flex: 1; - padding: 20px 20px 20px 5px; + padding: 8px 8px 8px 5px; /* 进一步减少padding */ min-height: 100vh; box-sizing: border-box; + max-width: calc(100vw - 274px - 21px); /* 更精确的宽度计算 */ + overflow-x: hidden; /* 防止水平滚动 */ } diff --git a/src/components/common/DeleteFolderConfirmModal.vue b/src/components/common/DeleteFolderConfirmModal.vue new file mode 100644 index 0000000..11a51cc --- /dev/null +++ b/src/components/common/DeleteFolderConfirmModal.vue @@ -0,0 +1,199 @@ + + + + + diff --git a/src/router/index.ts b/src/router/index.ts index 8d99c0b..b4db1d0 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -59,6 +59,8 @@ import ExamLibrary from '@/views/teacher/course/ExamPages/ExamLibrary.vue' import MarkingCenter from '@/views/teacher/course/ExamPages/MarkingCenter.vue' import AddExam from '@/views/teacher/course/ExamPages/AddExam.vue' +import ChapterEditor from '@/views/teacher/course/ChapterEditor.vue' + // ========== 路由配置 ========== const routes: RouteRecordRaw[] = [ // 管理后台路由 @@ -101,7 +103,8 @@ const routes: RouteRecordRaw[] = [ name: 'CourseAnalysis', component: CourseAnalysis, meta: { title: '课程分析' } - } + }, + ] }, { @@ -129,6 +132,7 @@ const routes: RouteRecordRaw[] = [ component: ChapterManagement, meta: { title: '章节管理' } }, + { path: 'homework', name: 'HomeworkManagement', @@ -231,10 +235,17 @@ const routes: RouteRecordRaw[] = [ name: 'StudentManagement', component: StudentManagement, meta: { title: '学员管理' } + }, + { + path: 'chapter-editor-teacher/:courseId', + name: 'ChapterEditor', + component: ChapterEditor, + meta: { title: '章节编辑' } } ] }, + // 帮助中心 { path: '/help-center', diff --git a/src/views/teacher/course/ChapterEditor.vue b/src/views/teacher/course/ChapterEditor.vue index 1e1c6a7..5ac6fd4 100644 --- a/src/views/teacher/course/ChapterEditor.vue +++ b/src/views/teacher/course/ChapterEditor.vue @@ -1,12 +1,26 @@ @@ -71,12 +83,11 @@ import { ref, computed, h, onMounted, onUnmounted } from 'vue' import { NButton, NDropdown, NTag, useMessage, NDataTable, NConfigProvider, zhCN, dateZhCN } from 'naive-ui' import type { DataTableColumns, DropdownOption } from 'naive-ui' import AddCoursewareModal from './AddCoursewareModal.vue' +import UploadFileModal from './UploadFileModal.vue' +import DeleteFolderConfirmModal from '@/components/common/DeleteFolderConfirmModal.vue' const message = useMessage() -// 控制模态框显示 -const showAddCoursewareModal = ref(false) - // 文件类型定义 interface FileItem { id: number @@ -96,6 +107,17 @@ const searchKeyword = ref('') // 选中的文件行 const selectedFiles = ref([]) +// 控制模态框显示 +const showAddCoursewareModal = ref(false) +const showUploadFileModal = ref(false) +const showDeleteConfirmModal = ref(false) + +// 存储待删除的项目信息 +const itemsToDelete = ref<{ type: 'single' | 'multiple', data: any }>({ type: 'single', data: null }) + +// 存储当前要上传文件的目标文件夹 +const currentUploadTarget = ref(null) + // 文件列表数据 const fileList = ref([ { @@ -565,6 +587,11 @@ const addCourseware = () => { showAddCoursewareModal.value = true } +// 关闭添加课件模态框 +const closeAddCoursewareModal = () => { + showAddCoursewareModal.value = false +} + const createFolder = () => { message.info('新建文件夹功能') } @@ -576,16 +603,12 @@ const moveFiles = () => { const deleteSelected = () => { if (selectedFiles.value.length === 0) return - if (confirm(`确定要删除选中的 ${selectedFiles.value.length} 个文件吗？`)) { - selectedFiles.value.forEach((id: number) => { - const index = fileList.value.findIndex((f: FileItem) => f.id === id) - if (index > -1) { - fileList.value.splice(index, 1) - } - }) - selectedFiles.value = [] - message.success('删除成功') + // 存储要删除的文件信息 + itemsToDelete.value = { + type: 'multiple', + data: selectedFiles.value } + showDeleteConfirmModal.value = true } const searchFiles = () => { @@ -593,7 +616,14 @@ const searchFiles = () => { } const uploadFile = (file: FileItem) => { - message.info('上传文件: ' + file.name) + currentUploadTarget.value = file + showUploadFileModal.value = true +} + +// 关闭上传文件模态框 +const closeUploadFileModal = () => { + showUploadFileModal.value = false + currentUploadTarget.value = null } const viewFile = (file: FileItem) => { @@ -601,13 +631,44 @@ const viewFile = (file: FileItem) => { } const deleteFile = (file: FileItem) => { - if (confirm('确定要删除这个文件吗？')) { + // 存储要删除的文件信息 + itemsToDelete.value = { + type: 'single', + data: file + } + showDeleteConfirmModal.value = true +} + +// 确认删除 +const confirmDelete = () => { + if (itemsToDelete.value.type === 'multiple') { + // 批量删除 + const idsToDelete = itemsToDelete.value.data as number[] + idsToDelete.forEach((id: number) => { + const index = fileList.value.findIndex((f: FileItem) => f.id === id) + if (index > -1) { + fileList.value.splice(index, 1) + } + }) + selectedFiles.value = [] + message.success(`成功删除 ${idsToDelete.length} 个文件`) + } else { + // 单个删除 + const file = itemsToDelete.value.data as FileItem const index = fileList.value.findIndex((f: FileItem) => f.id === file.id) if (index > -1) { fileList.value.splice(index, 1) message.success('删除成功') } } + showDeleteConfirmModal.value = false + itemsToDelete.value = { type: 'single', data: null } +} + +// 取消删除 +const cancelDelete = () => { + showDeleteConfirmModal.value = false + itemsToDelete.value = { type: 'single', data: null } } const renameFile = (file: FileItem) => { @@ -689,11 +750,6 @@ const toggleFolder = (folder: FileItem) => { folder.expanded = !folder.expanded } } - -// 关闭模态框 -const closeModal = () => { - showAddCoursewareModal.value = false -}