feat(ui): 添加颜色类和图标样式支持

- 在 common.scss 中新增红、绿、黄三种颜色类
- 更新 iconfont 字体文件，添加 checked、warning、close 图标
- 修改 createCourse.vue 中的消息弹窗实现方式
- 扩展 useMessage.js，增加 $messageBox 确认弹窗功能
- 优化 useUpload.js 文件类型校验提示文案
- 修复 JPG 文件类型判断逻辑错误问题

src/assets/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 5086622 */
-  src: url("iconfont.woff2?t=1765507086795") format("woff2"),
-    url("iconfont.woff?t=1765507086795") format("woff"),
-    url("iconfont.ttf?t=1765507086795") format("truetype");
+  src: url("iconfont.woff2?t=1765533102668") format("woff2"),
+    url("iconfont.woff?t=1765533102668") format("woff"),
+    url("iconfont.ttf?t=1765533102668") format("truetype");
 }
 
 .iconfont {
@@ -11,8 +11,18 @@
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #b5b5b5;
-  display: inline-table;
+}
+
+.icon-checked:before {
+  content: "\e70f";
+}
+
+.icon-warning:before {
+  content: "\e88f";
+}
+
+.icon-close:before {
+  content: "\e604";
 }
 
 .icon-delete:before {

src/assets/scss/common.scss

@@ -872,7 +872,15 @@ textarea {
 .pst-s {
   position: sticky;
 }
-
+.colorR {
+  color: #cf1717;
+}
+.colorG {
+  color: #44bb00;
+}
+.colorY {
+  color: #facd91;
+}
 .el-dialog {
   border-radius: 12px;
   .el-dialog__header {

src/hooks/useUpload.js

@@ -53,13 +53,13 @@ export function useUpload() {
 
   // 上传前检查
   const beforeUpload = (file) => {
-    const isJpgOrPng = file.type === "image/jpg" || file.type === "image/png";
+    const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
     if (!isJpgOrPng) {
-      $message.error("You can only upload JPG file!");
+      $message.error("请上传正确的图片格式");
     }
     const isLt2M = file.size / 1024 / 1024 < 2;
     if (!isLt2M) {
-      $message.error("Image must smaller than 2MB!");
+      $message.error("图片大小应小于2MB");
     }
 
     if (isJpgOrPng && isLt2M) {

src/utils/useMessage.js

@@ -1,6 +1,6 @@
 // utils/message.ts
-import { ElMessage } from "element-plus";
-
+import { ElMessage, ElMessageBox } from "element-plus";
+import { h, ref } from "vue";
 const DEFAULT_OPTIONS = {
   duration: 5000,
   offset: 270,
@@ -15,3 +15,33 @@ export const $message = {
   info: (msg) => ElMessage.info({ message: msg, ...DEFAULT_OPTIONS }),
   custom: (config) => ElMessage({ ...DEFAULT_OPTIONS, ...config }),
 };
+
+const getMessageTypeFun = (type) => {
+  switch (type) {
+    case "success":
+      return "icon-checked colorG";
+    case "warning":
+      return "icon-warning colorY";
+    case "error":
+      return "icon-warning colorR";
+    case "info":
+      return "icon-warning colorD";
+    default:
+      return "icon-warning colorY";
+  }
+};
+
+export const $messageBox = {
+  confirm: (msg, title = "提示", obj) =>
+    ElMessageBox.confirm(msg, {
+      confirmButtonText: obj.confirmButtonText,
+      cancelButtonText: obj.cancelButtonText,
+      title: title,
+      message: h("p", null, [
+        h("i", {
+          class: `iconfont ${getMessageTypeFun(obj.type)} mr10 fs18`,
+        }),
+        h("span", null, msg),
+      ]),
+    }),
+};

src/views/courselibrary/components/createCourse.vue

@@ -1,7 +1,7 @@
 <script setup>
 import dragCollapse from "./dragCollapse.vue";
 import { ElButton, ElCheckbox, ElDialog, ElMessageBox } from "element-plus";
-import { $message } from "@/utils/useMessage";
+import { $message, $messageBox } from "@/utils/useMessage";
 import dragTable from "./dragTable.vue";
 import { ref, watch } from "vue";
 import { getType } from "@/hooks/useCreateCourseMaps";
@@ -188,7 +188,8 @@ const deleteRow = (data) => {
   courseMetadata.chooseIndex = data.index;
   courseMetadata.selectionIndex = data.selectionIndex;
 
-  ElMessageBox.confirm(`确定删除${data.record.name}吗？`, "删除确认", {
+  $messageBox
+    .confirm(`确定删除${data.record.name}吗？`, "删除确认", {
       confirmButtonText: "确定",
       cancelButtonText: "取消",
       type: "error",
@@ -348,6 +349,7 @@ const handleNext = () => {
     </el-dialog>
 
     <div class="p10 pst-s bg-w bottom0">
+      {{ courseList }}
       <el-button>取消</el-button>
       <el-button type="primary">存草稿</el-button>
       <el-button @click="handleNext" type="primary">下一步</el-button>