From b1bd6d7d61ae02236b6d1693f91540fd04bc87c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= Date: Thu, 11 Dec 2025 18:01:55 +0800 Subject: [PATCH] =?UTF-8?q?feat(course):=20=E4=BC=98=E5=8C=96=E8=AF=BE?= =?UTF-8?q?=E7=A8=8B=E5=88=9B=E5=BB=BA=E4=B8=8E=E6=8B=96=E6=8B=BD=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 引入 SvgIcon 组件并替换原有图标 - 添加多个 SVG 图标文件（audio、courseDel、coursePreview、del、doc） - 更新 dragCollapse 和 dragTable 组件中的图标显示逻辑 - 修改 createCourse 页面样式及按钮布局 - 导入 iconfont 字体文件及相关 CSS 样式 - 调整表格操作列的图标和文本样式 - 增加对 Element Plus 图标库的使用 - 优化章节拖拽区域的视觉效果和交互体验 --- src/App.vue | 1 + src/assets/font/iconfont.css | 21 ++++ src/assets/font/iconfont.ttf | Bin 0 -> 1740 bytes src/assets/font/iconfont.woff | Bin 0 -> 1052 bytes src/assets/font/iconfont.woff2 | Bin 0 -> 684 bytes src/assets/scss/common.scss | 1 + src/assets/svg/audio.svg | 12 ++ src/assets/svg/courseDel.svg | 9 ++ src/assets/svg/coursePreview.svg | 9 ++ src/assets/svg/del.svg | 11 ++ src/assets/svg/doc.svg | 12 ++ src/assets/svg/kaoshi.svg | 11 ++ src/assets/svg/link.svg | 11 ++ src/assets/svg/pic.svg | 11 ++ src/assets/svg/pinggu.svg | 11 ++ src/assets/svg/scorm.svg | 11 ++ src/assets/svg/setting.svg | 9 ++ src/assets/svg/tableAudio.svg | 11 ++ src/assets/svg/tableBankOut.svg | 12 ++ src/assets/svg/tableDoc.svg | 13 ++ src/assets/svg/tableEdit.svg | 9 ++ src/assets/svg/tableLink.svg | 12 ++ src/assets/svg/tablePic.svg | 12 ++ src/assets/svg/tablePingGu.svg | 12 ++ src/assets/svg/tableScrom.svg | 11 ++ src/assets/svg/tableVideo.svg | 12 ++ src/assets/svg/tableWork.svg | 12 ++ src/assets/svg/up.svg | 9 ++ src/assets/svg/video.svg | 11 ++ src/assets/svg/work.svg | 11 ++ src/hooks/useCourseData.js | 24 ++-- .../courselibrary/components/createCourse.vue | 23 +++- .../courselibrary/components/dragCollapse.vue | 34 ++++-- .../courselibrary/components/dragTable.vue | 113 +++++++++++------- .../components/professionalmode.vue | 20 +--- 35 files changed, 415 insertions(+), 86 deletions(-) create mode 100644 src/assets/font/iconfont.css create mode 100644 src/assets/font/iconfont.ttf create mode 100644 src/assets/font/iconfont.woff create mode 100644 src/assets/font/iconfont.woff2 create mode 100644 src/assets/svg/audio.svg create mode 100644 src/assets/svg/courseDel.svg create mode 100644 src/assets/svg/coursePreview.svg create mode 100644 src/assets/svg/del.svg create mode 100644 src/assets/svg/doc.svg create mode 100644 src/assets/svg/kaoshi.svg create mode 100644 src/assets/svg/link.svg create mode 100644 src/assets/svg/pic.svg create mode 100644 src/assets/svg/pinggu.svg create mode 100644 src/assets/svg/scorm.svg create mode 100644 src/assets/svg/setting.svg create mode 100644 src/assets/svg/tableAudio.svg create mode 100644 src/assets/svg/tableBankOut.svg create mode 100644 src/assets/svg/tableDoc.svg create mode 100644 src/assets/svg/tableEdit.svg create mode 100644 src/assets/svg/tableLink.svg create mode 100644 src/assets/svg/tablePic.svg create mode 100644 src/assets/svg/tablePingGu.svg create mode 100644 src/assets/svg/tableScrom.svg create mode 100644 src/assets/svg/tableVideo.svg create mode 100644 src/assets/svg/tableWork.svg create mode 100644 src/assets/svg/up.svg create mode 100644 src/assets/svg/video.svg create mode 100644 src/assets/svg/work.svg diff --git a/src/App.vue b/src/App.vue index b06ba671..42ffaadf 100644 --- a/src/App.vue +++ b/src/App.vue @@ -121,6 +121,7 @@ function unloadHandler() { box-sizing: border-box; background: #ffffff; box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07); + border-radius: 6px; } .cus-btn { diff --git a/src/assets/font/iconfont.css b/src/assets/font/iconfont.css new file mode 100644 index 00000000..efa17f7c --- /dev/null +++ b/src/assets/font/iconfont.css @@ -0,0 +1,21 @@ +@font-face { + font-family: "iconfont"; /* Project id 5086622 */ + src: url("iconfont.woff2?t=1765446803106") format("woff2"), + url("iconfont.woff?t=1765446803106") format("woff"), + url("iconfont.ttf?t=1765446803106") format("truetype"); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-danseshixintubiao- { + color: #b5b5b5; +} +.icon-danseshixintubiao-:before { + content: "\e632"; +} diff --git a/src/assets/font/iconfont.ttf b/src/assets/font/iconfont.ttf new file mode 100644 index 0000000000000000000000000000000000000000..5a32ded01e6260e5d915df1d3a86a7e5243a224f GIT binary patch literal 1740 zcmd^9&1(}u9DTF9O>3)ZZK8+@u2t(-P3roANc})6PaQI^Y`6%BJygezpUheV!$&pptK<{8id}to`oTf+PkgFHcc!4%d-emm%lM;` zW9PTMe%?y_hR^O2h1R-$NyhlBFIB?nHUiH5z^={pb2iROuIJe$D)w|$bYXEgr){OGhup;~{j4(B=tKBFV{ zzMU9MNn1QNz8KIxlD2`njhf7);h;KLN4k|#wTzXf^Ed0ve#`ZeCPPOL!|2N+!2)4OZw&fPoKTFaL$O(!;sU->`d zcjn(G)9IvGmQ1C@eUem4l5~3B`ddWYRF>pV_6W~Us7#VIvqqTJccZTM0?7YPyf1l! zQwnQn#VUn$>OBe@#9I_@;n&7eI6-}%!tL0KL4`Y*u_|w(v54#R;*!DwUAV2Vh9n*; ztW$rgutEG%;T9~%JB1U}zbf30aj`_<4)luL;lQy&CvQ&9nB|=B6?`vjj-yU-%C&Mw7 zp=+2fFLExdriKe#&0>uqD>C^6%v2#7QuR5k#3eTQ0%hzx^W^BxpcKujVlOX#_WORC n{!Fybiu}mMO@3?t)HI<99o>1`t2wn&dAjU{Qvd83t|;&2|RD2eDCsdvK@|0|O%mP}CZTLlnAItNerYjeue96AdzkMj*=3|ArZ6xtnE?6vKy0Ra z{~UV;P!K2v6lahDViop#%*`3OB^5xi1|T0~HwTEw$xjBU1KGg_#z0eZ6DxrBGED&T z6+oC#fWap(F*g+`wgG6j1CUM^SZuSQAiubTfr0r0P>nVa+o<1Lf3#vwazaW%!hU}8|SX7ykI z=}k;bm~-I3sRIYDoGfW;Y+NYsWV|oUAn6H1m(d0z;{;a5%ypVP?DHgTjg#_z+&^&O zKutTNhmpY|jU*<9+@Cy0KxQN)qyjNplB_~nVnPB>VnPZ7qx}L6<%l^m8@YAP9a_K= zc9==1KJCkY`yQ50kq1F6f-OanZyXD;99fR#VoRzu?cT`t?6uTz*Kn{%mQLG-tFtbV#AE z0D@ z3|O#y0sH1>?%S?M>3dwU^zEA<{Dk9WMsb%%(oVO|Y7~j15qib5r6ZyCQ5Lows zZT_LqSMi7Jen#(TWBg}2+bcseE}dBNuA=X2lCb~V zl{Od6;%A1GHlGWWdKq#%d3Me27nb5HPt0=Rtz7;1#)>nuw(`YpDA9Yp{r1Ecju}Ec z2@4Hdljk@mw#h!`QsfD8aV<&zIpZCxSx02%|5E=K+fJ;MFKX3eDmfRUyzA1TN-N(! z-T2pmr6t;Vr)Ra8Oo=+{nY8HvXT;sok=3k#K#$nF)UwZ%ob)2c@&5 t1_nL0Hw~Q=J15R`)KE2CZ?V-vd9#x7`Xwfs#)k3J8yOj*zOa`w008zvbj$z% literal 0 HcmV?d00001 diff --git a/src/assets/font/iconfont.woff2 b/src/assets/font/iconfont.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..92b6c0c2cbe4e96a1aa13ffe82a746bf7573af1f GIT binary patch literal 684 zcmV;d0#p5WPew8T0RR9100OK43jhEB00zte00LbA0RR9100000000000000000000 z0000SR0d!Gf^Z6fJb^m_HUcCA2nz-P1Rw>3X9qkR0|v;Rnmh@#fe``()ENv+jtIW? zL-*ZX06-ynAPuM@Gf^=jk=U~E)oB~8o8`{V{r z&A7RFc9WY?>joY`MQQ&D;1lb1T&I+HIE zXtZQo@6Pe%4Vk?3u^_AZ+2$Zmj7!0NGAyl%f&=wJEp%lO&(x4^(nmavZy&#{#4t%s zW>fYrjw15%Yr8S|zKZ>{Y-C+VL+@cFI5ZS#M9QvqMSqq*2zDPVf) z&!`Q4pZE+|wI~DW5po2QjY61&M(3c)8aw?=m37@_Fx2b1S$&pb@h S1u7ODQD8F=eyI@x0000gFEK0t literal 0 HcmV?d00001 diff --git a/src/assets/scss/common.scss b/src/assets/scss/common.scss index 1870ffce..19ab0fff 100644 --- a/src/assets/scss/common.scss +++ b/src/assets/scss/common.scss @@ -1,3 +1,4 @@ +@import "../font/iconfont.css"; html, body { height: 100vh; diff --git a/src/assets/svg/audio.svg b/src/assets/svg/audio.svg new file mode 100644 index 00000000..8513fbbe --- /dev/null +++ b/src/assets/svg/audio.svg @@ -0,0 +1,12 @@ + + + yuyin 2 + + + + + + + + + diff --git a/src/assets/svg/courseDel.svg b/src/assets/svg/courseDel.svg new file mode 100644 index 00000000..4443558a --- /dev/null +++ b/src/assets/svg/courseDel.svg @@ -0,0 +1,9 @@ + + + 删除 + + + + + + \ No newline at end of file diff --git a/src/assets/svg/coursePreview.svg b/src/assets/svg/coursePreview.svg new file mode 100644 index 00000000..8e9ede1e --- /dev/null +++ b/src/assets/svg/coursePreview.svg @@ -0,0 +1,9 @@ + + + 预览 + + + + + + \ No newline at end of file diff --git a/src/assets/svg/del.svg b/src/assets/svg/del.svg new file mode 100644 index 00000000..2e031241 --- /dev/null +++ b/src/assets/svg/del.svg @@ -0,0 +1,11 @@ + + + shanchu1备份 + + + + + + + + diff --git a/src/assets/svg/doc.svg b/src/assets/svg/doc.svg new file mode 100644 index 00000000..37374676 --- /dev/null +++ b/src/assets/svg/doc.svg @@ -0,0 +1,12 @@ + + + a-wendang1 + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/kaoshi.svg b/src/assets/svg/kaoshi.svg new file mode 100644 index 00000000..6a5f83ce --- /dev/null +++ b/src/assets/svg/kaoshi.svg @@ -0,0 +1,11 @@ + + + monikaoshi + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/link.svg b/src/assets/svg/link.svg new file mode 100644 index 00000000..f7f3a3a8 --- /dev/null +++ b/src/assets/svg/link.svg @@ -0,0 +1,11 @@ + + + lianjiex + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/pic.svg b/src/assets/svg/pic.svg new file mode 100644 index 00000000..2782ec91 --- /dev/null +++ b/src/assets/svg/pic.svg @@ -0,0 +1,11 @@ + + + folder-image-fill + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/pinggu.svg b/src/assets/svg/pinggu.svg new file mode 100644 index 00000000..95e12493 --- /dev/null +++ b/src/assets/svg/pinggu.svg @@ -0,0 +1,11 @@ + + + pinggubaogao + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/scorm.svg b/src/assets/svg/scorm.svg new file mode 100644 index 00000000..b86065b2 --- /dev/null +++ b/src/assets/svg/scorm.svg @@ -0,0 +1,11 @@ + + + wenjianjia + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/setting.svg b/src/assets/svg/setting.svg new file mode 100644 index 00000000..9c1b4db5 --- /dev/null +++ b/src/assets/svg/setting.svg @@ -0,0 +1,9 @@ + + + 设置 + + + + + + diff --git a/src/assets/svg/tableAudio.svg b/src/assets/svg/tableAudio.svg new file mode 100644 index 00000000..b2d92413 --- /dev/null +++ b/src/assets/svg/tableAudio.svg @@ -0,0 +1,11 @@ + + + yuyin + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/tableBankOut.svg b/src/assets/svg/tableBankOut.svg new file mode 100644 index 00000000..3611a31b --- /dev/null +++ b/src/assets/svg/tableBankOut.svg @@ -0,0 +1,12 @@ + + + zidingyikaoshi + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/tableDoc.svg b/src/assets/svg/tableDoc.svg new file mode 100644 index 00000000..d532eff9 --- /dev/null +++ b/src/assets/svg/tableDoc.svg @@ -0,0 +1,13 @@ + + + wendang + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/tableEdit.svg b/src/assets/svg/tableEdit.svg new file mode 100644 index 00000000..37f277da --- /dev/null +++ b/src/assets/svg/tableEdit.svg @@ -0,0 +1,9 @@ + + + 形状 + + + + + + \ No newline at end of file diff --git a/src/assets/svg/tableLink.svg b/src/assets/svg/tableLink.svg new file mode 100644 index 00000000..16df9060 --- /dev/null +++ b/src/assets/svg/tableLink.svg @@ -0,0 +1,12 @@ + + + lianjie + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/tablePic.svg b/src/assets/svg/tablePic.svg new file mode 100644 index 00000000..5c2dd277 --- /dev/null +++ b/src/assets/svg/tablePic.svg @@ -0,0 +1,12 @@ + + + tuwen + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/tablePingGu.svg b/src/assets/svg/tablePingGu.svg new file mode 100644 index 00000000..6ea9377a --- /dev/null +++ b/src/assets/svg/tablePingGu.svg @@ -0,0 +1,12 @@ + + + pinggu + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/tableScrom.svg b/src/assets/svg/tableScrom.svg new file mode 100644 index 00000000..984a60bc --- /dev/null +++ b/src/assets/svg/tableScrom.svg @@ -0,0 +1,11 @@ + + + wj-wjj + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/tableVideo.svg b/src/assets/svg/tableVideo.svg new file mode 100644 index 00000000..8da43ba5 --- /dev/null +++ b/src/assets/svg/tableVideo.svg @@ -0,0 +1,12 @@ + + + shipinwenjian + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/tableWork.svg b/src/assets/svg/tableWork.svg new file mode 100644 index 00000000..9b11b9d9 --- /dev/null +++ b/src/assets/svg/tableWork.svg @@ -0,0 +1,12 @@ + + + zuoye + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/up.svg b/src/assets/svg/up.svg new file mode 100644 index 00000000..ebf13a94 --- /dev/null +++ b/src/assets/svg/up.svg @@ -0,0 +1,9 @@ + + + 三角形备份 4 + + + + + + diff --git a/src/assets/svg/video.svg b/src/assets/svg/video.svg new file mode 100644 index 00000000..cead89bf --- /dev/null +++ b/src/assets/svg/video.svg @@ -0,0 +1,11 @@ + + + luzhishipin + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/work.svg b/src/assets/svg/work.svg new file mode 100644 index 00000000..63325398 --- /dev/null +++ b/src/assets/svg/work.svg @@ -0,0 +1,11 @@ + + + lianjiex 3 + + + + + + + + \ No newline at end of file diff --git a/src/hooks/useCourseData.js b/src/hooks/useCourseData.js index 5ea6839b..dcb294eb 100644 --- a/src/hooks/useCourseData.js +++ b/src/hooks/useCourseData.js @@ -38,7 +38,7 @@ export function useCourseData() { showDialog: false, classId: "", }); - + // 课程列表数据 const courseList = ref([ { @@ -60,51 +60,51 @@ export function useCourseData() { const courseActionButtons = [ { label: "添加视频", - icon: "", + icon: "video", fun: "addVideo", }, { label: "添加音频", - icon: "", + icon: "audio", fun: "addAudio", }, { label: "添加文档", - icon: "", + icon: "doc", fun: "addDocument", }, { label: "添加图文", - icon: "", + icon: "pic", fun: "addImageText", }, { label: "外部链接", - icon: "", + icon: "link", fun: "addExternalLink", }, { label: "SCORM", - icon: "", + icon: "scorm", fun: "addScorm", }, { label: "添加考试", - icon: "", + icon: "kaoshi", fun: "addExam", }, { label: "添加作业", - icon: "", + icon: "work", fun: "addHomework", }, { label: "添加评估", - icon: "", + icon: "pinggu", fun: "addAssessment", }, ]; - + // 添加章 const addChapter = () => { courseList.value.push({ @@ -119,4 +119,4 @@ export function useCourseData() { courseActionButtons, addChapter, }; -} \ No newline at end of file +} diff --git a/src/views/courselibrary/components/createCourse.vue b/src/views/courselibrary/components/createCourse.vue index 796c1a29..192643d7 100644 --- a/src/views/courselibrary/components/createCourse.vue +++ b/src/views/courselibrary/components/createCourse.vue @@ -16,6 +16,8 @@ import ScormComp from "@/components/CreatedCourse/preview/ScormComp.vue"; import PaperComp from "@/components/CreatedCourse/preview/PaperComp.vue"; import HomeWorkComp from "@/components/CreatedCourse/preview/HomeWorkComp.vue"; import AccessComp from "@/components/CreatedCourse/preview/AccessComp.vue"; +import SvgIcon from "@/components/SvgIcon.vue"; +import { Plus } from "@element-plus/icons-vue"; defineOptions({ name: "CreateCourse", }); @@ -242,13 +244,13 @@ const handleNext = () => {