feat(core): 统一消息提示工具并优化样式和功能

- 新增 useMessage 工具模块，统一封装 Element Plus 的消息提示
- 替换项目中所有 ElMessage 调用为自定义 $message 工具
- 优化 AccessComp.vue 中的布局宽度和间距样式
- 扩展 common.scss 样式库，新增定位、底部等快捷类名
- 更新文件上传 hook 和课程创建组件中的消息提示方式
- 重构 xajax 接口模块，替换 ant-design-vue 消息组件为 element-plus 组件
- 完善 professionalmode.vue 页面路由跳转逻辑
- 清理冗余代码，移除未使用的表格列定义和操作函数
- 在 createCourse.vue 中添加固定底部操作栏和下一步按钮
- 修复 chooseFileList.vue 中的错误提示调用问题

src/api/modules/xajax.js

@@ -1,7 +1,8 @@
 import axios from "axios";
 import qs from "qs";
-import { notification, Modal, message } from "ant-design-vue";
+// import { notification, Modal, message } from "ant-design-vue";
-
+import { ElNotification, ElMessageBox } from "element-plus";
+import { $message } from "@/utils/useMessage";
 // 登录重定向 URL（可根据环境变量配置）
 const ReLoginUrl = process.env.VUE_APP_LOGIN_URL || "/login";
 const TokenName = "XBOE-Access-Token";
@@ -36,16 +37,18 @@ jsonRequest.interceptors.response.use(
       return res.data;
     } else {
       if (code === 6001 || code === 401 || code === 402) {
-        Modal.warning({
+        ElMessageBox.confirm(
-          title: "登录失效",
+          "您已被登出，可以取消继续留在该页面，或者重新登录",
-          content: "您已被登出，可以取消继续留在该页面，或者重新登录",
+          "登录失效",
-          okText: "重新登录",
+          {
-          onOk() {
+            type: "warning",
-            window.location.href = ReLoginUrl;
+            confirmButtonText: "重新登录",
-          },
+          }
+        ).then(() => {
+          window.location.href = ReLoginUrl;
         });
       } else if (code === 403) {
-        message.error("当前操作没有权限");
+        ElMessage.error("当前操作没有权限");
       } else if (code === 302) {
         window.location.href = ReLoginUrl;
       } else {
@@ -66,7 +69,7 @@ jsonRequest.interceptors.response.use(
       const statusCode = error.message.substr(-3);
       msg = `系统接口 ${statusCode} 异常`;
       if (statusCode === "500") {
-        notification.error({
+        ElNotification.error({
           message: "服务错误",
           description: "服务器内部错误，请联系管理员。",
           duration: 5,
@@ -74,7 +77,7 @@ jsonRequest.interceptors.response.use(
       }
     }
 
-    message.error(msg, 5);
+    $message.error(msg, 5);
     return Promise.reject(error);
   }
 );
@@ -107,16 +110,14 @@ formRequest.interceptors.response.use(
       return res.data;
     } else {
       if (code === 6001 || code === 401 || code === 402) {
-        Modal.warning({
+        ElMessageBox.confirm("登录状态无效，即将跳转至登录页", "登录已过期", {
-          title: "登录已过期",
+          type: "warning",
-          content: "登录状态无效，即将跳转至登录页",
+          confirmButtonText: "确认",
-          okText: "确认",
+        }).then(() => {
-          onOk() {
+          window.location.href = ReLoginUrl;
-            window.location.href = ReLoginUrl;
-          },
         });
       } else if (code === 403) {
-        message.error("暂无权限执行此操作");
+        $message.error("暂无权限执行此操作");
       } else if (code === 302) {
         window.location.href = ReLoginUrl;
       } else {
@@ -136,7 +137,7 @@ formRequest.interceptors.response.use(
       msg = `服务端异常 (${error.message.slice(-3)})`;
     }
 
-    message.error(msg, 5);
+    $message.error(msg, 5);
     return Promise.reject(error);
   }
 );

src/assets/scss/common.scss

@@ -768,7 +768,7 @@ textarea {
 //}
 
 //循环 生成 mt mb  从 5  10 20 30
-@for $i from 1 through 100 {
+@for $i from 0 through 100 {
   .mt#{$i} {
     margin-top: $i * 1px;
   }
@@ -821,6 +821,18 @@ textarea {
   .w#{$i} {
     width: $i * 1px;
   }
+  .bottom#{$i} {
+    bottom: $i * 1px;
+  }
+  .top#{$i} {
+    top: $i * 1px;
+  }
+  .left#{$i} {
+    left: $i * 1px;
+  }
+  .right#{$i} {
+    right: $i * 1px;
+  }
 }
 .flex {
   display: flex;
@@ -840,3 +852,21 @@ textarea {
 .justify-content-s {
   justify-content: flex-start;
 }
+.text-center {
+  text-align: center;
+}
+.bg-w {
+  background: #fff;
+}
+.pst-r {
+  position: relative;
+}
+.pst-a {
+  position: absolute;
+}
+.pst-f {
+  position: fixed;
+}
+.pst-s {
+  position: sticky;
+}

src/components/CreatedCourse/chooseFileList.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { reactive, onMounted, ref, h } from "vue";
-import { ElButton, ElInput, ElUpload, ElMessage } from "element-plus";
+import { ElButton, ElInput, ElUpload } from "element-plus";
+import { $message, ElMessage } from "@/utils/useMessage";
 import BasicTable from "@/components/BasicElTable/BasicTable.vue";
 import {
   getPageListByType,
@@ -126,7 +127,7 @@ const handleChooseItem = (row) => {
     case 61:
       console.log(row);
       if (row.counts === 0) {
-        ElMessage.error("此试卷无试题内容，请重新选择");
+        $message.error("此试卷无试题内容，请重新选择");
         return;
       }
       break;
@@ -239,7 +240,7 @@ const handleUploadSuccess = (res, file) => {
         });
         fileList.value = [];
       } else {
-        ElMessage.error(rs.message);
+        $message.error(rs.message);
       }
     });
   }

src/components/CreatedCourse/preview/AccessComp.vue

@@ -93,7 +93,7 @@ updateFormValue("content", localDialogVideoForm.value.content);
         @update:modelValue="(val) => updateFormValue('name', val)"
       ></el-input>
     </el-form-item>
-    <div style="margin: 0 auto; width: 80%">
+    <div style="margin: 0 auto; width: 70%">
       <div class="text-center mb10">京东方大学课程评估V2.0</div>
       <div class="mb10">
         课程满意度计算方式:{{ localDialogVideoForm.content.countType }}
@@ -146,7 +146,7 @@ updateFormValue("content", localDialogVideoForm.value.content);
 
 .assessRadio1 {
   .el-radio-button {
-    margin: 0 10px;
+    margin: 5px 10px;
     //outline: 1px solid #ecf5ff;
     :deep(.el-radio-button__inner) {
       border-width: 1px;

src/hooks/useCourseData.js

@@ -16,6 +16,7 @@ import {
 } from "@ant-design/icons-vue";
 import { createVNode, h } from "vue";
 import { getType } from "@/hooks/useCreateCourseMaps";
+
 /**
  * 课程数据管理hook
  * @returns
@@ -28,224 +29,8 @@ export function useCourseData() {
     chooseIndex: "",
     sectionIndex: "",
     resType: 0,
+    selectionIndex: null,
   });
-  const tableColumns = [
-    {
-      title: "序号",
-      key: "index",
-      width: 100,
-      customRender: ({ index }) => {
-        return h(
-          "span",
-          {
-            style: {
-              display: "flex",
-              justifyContent: "space-between",
-            },
-          },
-          [
-            h("span", { class: "drag-handle" }, [
-              createVNode(MenuOutlined, {
-                style: { fontSize: "14px", color: "#666" },
-              }),
-            ]),
-            h("span", {}, index + 1),
-          ]
-        );
-      },
-    },
-    {
-      title: "节名称",
-      key: "name",
-      dataIndex: "name",
-      customRender: ({ record }) => {
-        // 检查当前行是否处于编辑状态
-        if (record._value.isEdit) {
-          return h(
-            "span",
-            { style: { display: "flex", alignItems: "center", gap: "8px" } },
-            [
-              h("input", {
-                value: record._value.copyName,
-                onInput: (e) => {
-                  record._value.copyName = e.target.value;
-                },
-                style: {
-                  border: "1px solid #d9d9d9",
-                  borderRadius: "4px",
-                  padding: "4px 11px",
-                  width: "200px",
-                },
-              }),
-              h(
-                "a",
-                {
-                  href: "javascript:void(0)",
-                  style: { fontSize: "16px", color: "#52c41a" },
-                  onClick: () => {
-                    record._value.name = record._value.copyName;
-                    record._value.copyName = null;
-                    record._value.isEdit = false;
-                  },
-                },
-                "✓"
-              ),
-            ]
-          );
-        }
-
-        // 否则显示正常文本和编辑图标
-        const getIconComponent = (type) => {
-          switch (type) {
-            case "视频":
-              return VideoCameraOutlined;
-            case "音频":
-              return AudioOutlined;
-            case "文档":
-              return FileTextOutlined;
-            case "图文":
-              return PictureOutlined;
-            case "链接":
-              return LinkOutlined;
-            case "SCORM":
-              return FolderOpenOutlined;
-            case "考试":
-              return BankOutlined;
-            case "作业":
-              return EditOutlined;
-            case "评估":
-              return BankOutlined;
-            default:
-              return FileTextOutlined;
-          }
-        };
-
-        const Icon = getIconComponent(getType(record._value.resType));
-        return h(
-          "span",
-          { style: { display: "flex", alignItems: "center", gap: "8px" } },
-          [
-            createVNode(Icon, { style: { color: "#1890ff" } }),
-            h("span", {}, record._value.name),
-            h(
-              "a",
-              {
-                href: "javascript:void(0)",
-                style: { marginLeft: "4px", fontSize: "12px" },
-                onClick: () => {
-                  record._value.copyName = record._value.name;
-                  record._value.isEdit = true;
-                },
-              },
-              "✎"
-            ),
-          ]
-        );
-      },
-    },
-    {
-      title: "类型",
-      key: "resType",
-      dataIndex: "resType",
-      align: "center",
-      customRender: ({ record }) => {
-        return h(
-          "span",
-          {
-            style: {
-              display: "block",
-              textAlign: "center",
-            },
-          },
-          getType(record._value.resType)
-        );
-      },
-    },
-    {
-      title: "操作",
-      key: "action",
-      width: 220,
-      align: "center",
-      customRender: ({ record, index, data }) => {
-        return h(
-          "span",
-          {
-            style: { display: "flex", justifyContent: "center", gap: "12px" },
-          },
-          [
-            // 设置
-            h(
-              "a",
-              {
-                href: "javascript:void(0)",
-                onClick: () => {
-                  console.log("设置:", record);
-                  // 在这里添加设置功能，比如打开设置弹窗
-                },
-              },
-              [
-                createVNode(SettingOutlined, {
-                  style: {
-                    fontSize: "14px",
-                    color: "#1890ff",
-                    paddingRight: "10px",
-                  },
-                }),
-                h(
-                  "span",
-                  { style: { marginLeft: "4px", fontSize: "12px" } },
-                  "设置"
-                ),
-              ]
-            ),
-            // 预览
-            h(
-              "a",
-              {
-                href: "javascript:void(0)",
-                onClick: () => {
-                  console.log("预览:", record);
-                  // 在这里添加预览功能
-                },
-              },
-              [
-                createVNode(EyeOutlined, {
-                  style: { fontSize: "14px", color: "#1890ff" },
-                }),
-                h(
-                  "span",
-                  { style: { marginLeft: "4px", fontSize: "12px" } },
-                  "预览"
-                ),
-              ]
-            ),
-            // 删除
-            h(
-              "a",
-              {
-                href: "javascript:void(0)",
-                onClick: () => {
-                  console.log("删除:", record, "索引:", index);
-                  // 执行删除操作
-                  data.splice(index, 1);
-                },
-              },
-              [
-                createVNode(DeleteOutlined, {
-                  style: { fontSize: "14px", color: "red" },
-                }),
-                h(
-                  "span",
-                  { style: { marginLeft: "4px", fontSize: "12px" } },
-                  "删除"
-                ),
-              ]
-            ),
-          ]
-        );
-      },
-    },
-  ];
   
   // 课程列表数据
   const courseList = ref([
@@ -264,46 +49,6 @@ export function useCourseData() {
     },
   ]);
 
-  // 课程操作映射
-  const courseOperations = {
-    addVideo: (index) => {
-      courseMetadata.chooseIndex = index;
-    },
-    addAudio: () => {
-      console.log("添加音频功能调用");
-    },
-    addDocument: () => {
-      console.log("添加文档功能调用");
-    },
-    addImageText: () => {
-      console.log("添加图文功能调用");
-    },
-    addExternalLink: () => {
-      console.log("添加外部链接功能调用");
-    },
-    addScorm: () => {
-      console.log("添加SCORM功能调用");
-    },
-    addExam: () => {
-      console.log("添加考试功能调用");
-    },
-    addHomework: () => {
-      console.log("添加作业功能调用");
-    },
-    addAssessment: () => {
-      console.log("添加评估功能调用");
-    },
-  };
-
-  // 执行课程操作
-  const executeCourseOperation = (operationName, data) => {
-    if (courseOperations[operationName]) {
-      courseOperations[operationName](data);
-    } else {
-      console.warn(`未找到操作: ${operationName}`);
-    }
-  };
-
   // 课程操作按钮
   const courseActionButtons = [
     {
@@ -352,6 +97,7 @@ export function useCourseData() {
       fun: "addAssessment",
     },
   ];
+  
   // 添加章
   const addChapter = () => {
     courseList.value.push({
@@ -364,8 +110,6 @@ export function useCourseData() {
     courseMetadata,
     courseList,
     courseActionButtons,
-    executeCourseOperation,
-    tableColumns,
     addChapter,
   };
 }

src/hooks/useUpload.js

@@ -1,5 +1,5 @@
 import { ref } from "vue";
-import { ElMessage } from "element-plus";
+import { $message, ElMessage } from "@/utils/useMessage";
 import { Loading, Plus } from "@element-plus/icons-vue";
 
 /**
@@ -34,7 +34,7 @@ export function useUpload() {
     }
     if (info.file.status === "error") {
       loading.value = false;
-      ElMessage.error("upload error");
+      $message.error("upload error");
     }
   };
 
@@ -42,11 +42,11 @@ export function useUpload() {
   const beforeUpload = (file) => {
     const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
     if (!isJpgOrPng) {
-      ElMessage.error("You can only upload JPG file!");
+      $message.error("You can only upload JPG file!");
     }
     const isLt2M = file.size / 1024 / 1024 < 2;
     if (!isLt2M) {
-      ElMessage.error("Image must smaller than 2MB!");
+      $message.error("Image must smaller than 2MB!");
     }
     return isJpgOrPng && isLt2M;
   };
@@ -60,6 +60,6 @@ export function useUpload() {
     // 方法
     getBase64,
     handleChange,
-    beforeUpload
+    beforeUpload,
   };
 }

src/utils/useMessage.js

@@ -0,0 +1,17 @@
+// utils/message.ts
+import { ElMessage } from "element-plus";
+
+const DEFAULT_OPTIONS = {
+  duration: 5000,
+  offset: 270,
+  // showClose: true,
+  // customClass: 'my-message', // 可加自定义 class
+};
+
+export const $message = {
+  success: (msg) => ElMessage.success({ message: msg, ...DEFAULT_OPTIONS }),
+  warning: (msg) => ElMessage.warning({ message: msg, ...DEFAULT_OPTIONS }),
+  error: (msg) => ElMessage.error({ message: msg, ...DEFAULT_OPTIONS }),
+  info: (msg) => ElMessage.info({ message: msg, ...DEFAULT_OPTIONS }),
+  custom: (config) => ElMessage({ ...DEFAULT_OPTIONS, ...config }),
+};

src/views/courselibrary/OnlineManage.vue

@@ -214,6 +214,7 @@
 </template>
 
 <script>
+import { $message } from "@/utils/useMessage";
 export default {
   name: "projectManage",
   data() {
@@ -553,7 +554,9 @@ export default {
       this.showSecondFilter = !this.showSecondFilter;
     },
     // 保留必要的空方法以防止点击报错
-    searchSubmit() {},
+    searchSubmit() {
+      $message.success("asd");
+    },
     searchReset() {},
     showModal1() {},
     handleEdit() {

src/views/courselibrary/components/createCourse.vue

@@ -1,6 +1,7 @@
 <script setup>
 import dragCollapse from "./dragCollapse.vue";
 import { ElButton, ElCheckbox, ElDialog, ElMessageBox } from "element-plus";
+import { $message } from "@/utils/useMessage";
 import dragTable from "./dragTable.vue";
 import { ref, watch } from "vue";
 defineOptions({
@@ -48,11 +49,7 @@ const copyChooseItemData = ref({});
 watch(
   () => courseMetadata.chooseIndex,
   (newVal) => {
-    console.log(newVal);
-    console.log(courseList.value[newVal]);
     classId.value = courseList.value[newVal].id;
-
-    console.log(classId.value);
   }
 );
 
@@ -102,6 +99,7 @@ const courseOperations = {
     showSettingDialog.value = true;
   },
 };
+
 // 执行课程操作
 const executeCourseOperation = (operationName, data) => {
   courseMetadata.chooseIndex = data;
@@ -116,6 +114,7 @@ const executeCourseOperation = (operationName, data) => {
     console.warn(`未找到操作: ${operationName}`);
   }
 };
+
 const chooseItem = (data) => {
   console.log(data);
   chooseItemData.value = data;
@@ -125,6 +124,7 @@ const chooseItem = (data) => {
   }
   showSettingDialog.value = true;
 };
+
 const choosePreviewItem = (data) => {
   chooseItemData.value = data;
   showSettingDialog.value = true;
@@ -159,6 +159,7 @@ const saveContent = () => {
 
   //   可以调用保存方法 保存考试
 };
+
 const deleteRow = (data) => {
   courseMetadata.chooseIndex = data.index;
   courseMetadata.selectionIndex = data.selectionIndex;
@@ -173,6 +174,7 @@ const deleteRow = (data) => {
     );
   });
 };
+
 const settingRow = (data) => {
   courseMetadata.chooseIndex = data.index;
   courseMetadata.selectionIndex = data.selectionIndex;
@@ -181,6 +183,7 @@ const settingRow = (data) => {
   isPreview.value = false;
   showSettingDialog.value = true;
 };
+
 const previewRow = (data) => {
   courseMetadata.chooseIndex = data.index;
   courseMetadata.selectionIndex = data.selectionIndex;
@@ -195,6 +198,11 @@ const chooseCusExam = (data) => {
   chooseItemData.value = data;
   showSettingDialog.value = true;
 };
+
+const handleNext = () => {
+  console.log($message);
+  $message.success("213");
+};
 </script>
 
 <template>
@@ -284,6 +292,12 @@ const chooseCusExam = (data) => {
         </div>
       </template>
     </el-dialog>
+
+    <div class="p10 pst-s bg-w bottom0">
+      <el-button>取消</el-button>
+      <el-button type="primary">存草稿</el-button>
+      <el-button @click="handleNext" type="primary">下一步</el-button>
+    </div>
   </div>
 </template>
 

src/views/courselibrary/components/professionalmode.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, defineOptions, reactive, onMounted } from "vue";
-import { ElMessage } from "element-plus";
+import { $message } from "@/utils/useMessage";
 import {
   ElForm,
   ElFormItem,
@@ -16,27 +16,18 @@ import { getClassTree } from "@/api/modules/newApi";
 import filecloud from "@/components/FileCloud/index.vue";
 import { useUpload } from "@/hooks/useUpload";
 import { useCourseForm } from "@/hooks/useCourseForm";
-
+import { useRouter } from "vue-router";
+const router = useRouter();
 defineOptions({
   name: "ProfessionalMode",
 });
 
 // 使用上传hook
-const { 
+const { fileList, loading, courseCoverurl, handleChange, beforeUpload } =
-  fileList, 
+  useUpload();
-  loading, 
-  courseCoverurl, 
-  handleChange, 
-  beforeUpload 
-} = useUpload();
 
 // 使用表单hook
-const { 
+const { formRef, formState, visibilityOptions, resetForm } = useCourseForm();
-  formRef, 
-  formState, 
-  visibilityOptions,
-  resetForm
-} = useCourseForm();
 
 // 表单相关
 const labelCol = { style: { width: "80px" } };
@@ -107,7 +98,7 @@ const handleSubmit = () => {
   //     ElMessage.error("请检查表单填写内容");
   //   });
   console.log("Received values of form:", formState);
-  ElMessage.success("表单提交成功");
+  $message.success("表单提交成功");
 };
 
 // 表单重置
@@ -126,12 +117,14 @@ const fetchApi = {
 
 const next = () => {
   // 注意：这里的路由跳转需要正确引入和使用vue-router
-  // this.$router.push({
+  router.push({
-  //   path: "/createcourse",
+    path: "/createcourse",
-  //   query: {
+    query: {
-  //     id: 1,
+      orgId: "1693922746301661185",
-  //   },
+      orgName: "'N'业务",
-  // });
+      duration: "1",
+    },
+  });
 };
 onMounted(() => {
   fetchApi.getClassTree();