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

- 新增 useMessage 工具模块，统一封装 Element Plus 的消息提示 - 替换项目中所有 ElMessage 调用为自定义 $message 工具 - 优化 AccessComp.vue 中的布局宽度和间距样式 - 扩展 common.scss 样式库，新增定位、底部等快捷类名 - 更新文件上传 hook 和课程创建组件中的消息提示方式 - 重构 xajax 接口模块，替换 ant-design-vue 消息组件为 element-plus 组件 - 完善 professionalmode.vue 页面路由跳转逻辑 - 清理冗余代码，移除未使用的表格列定义和操作函数 - 在 createCourse.vue 中添加固定底部操作栏和下一步按钮 - 修复 chooseFileList.vue 中的错误提示调用问题
2025-12-09 10:56:46 +08:00 · 2025-11-26 11:37:23 +08:00
parent c6321027e1
commit 2158c7f0f1
10 changed files with 125 additions and 322 deletions
--- a/src/api/modules/xajax.js
+++ b/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({
-          title: "登录失效",
-          content: "您已被登出，可以取消继续留在该页面，或者重新登录",
-          okText: "重新登录",
-          onOk() {
-            window.location.href = ReLoginUrl;
-          },
+        ElMessageBox.confirm(
+          "您已被登出，可以取消继续留在该页面，或者重新登录",
+          "登录失效",
+          {
+            type: "warning",
+            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({
-          title: "登录已过期",
-          content: "登录状态无效，即将跳转至登录页",
-          okText: "确认",
-          onOk() {
-            window.location.href = ReLoginUrl;
-          },
+        ElMessageBox.confirm("登录状态无效，即将跳转至登录页", "登录已过期", {
+          type: "warning",
+          confirmButtonText: "确认",
+        }).then(() => {
+          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);
  }
 );
--- a/src/assets/scss/common.scss
+++ b/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;
+}
--- a/src/components/CreatedCourse/chooseFileList.vue
+++ b/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);
      }
    });
  }
--- a/src/components/CreatedCourse/preview/AccessComp.vue
+++ b/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;
--- a/src/hooks/useCourseData.js
+++ b/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,225 +29,9 @@ 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,
  };
 }
--- a/src/hooks/useUpload.js
+++ b/src/hooks/useUpload.js
@@ -1,10 +1,10 @@
 import { ref } from "vue";
-import { ElMessage } from "element-plus";
+import { $message, ElMessage } from "@/utils/useMessage";
 import { Loading, Plus } from "@element-plus/icons-vue";

 /**
 * 文件上传相关hook
- * @returns 
+ * @returns
 */
 export function useUpload() {
  // 上传相关
@@ -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;
  };
@@ -56,10 +56,10 @@ export function useUpload() {
    fileList,
    loading,
    courseCoverurl,
-    
+
    // 方法
    getBase64,
    handleChange,
-    beforeUpload
+    beforeUpload,
  };
-}
+}
--- a/src/utils/useMessage.js
+++ b/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 }),
+};
--- a/src/views/courselibrary/OnlineManage.vue
+++ b/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() {
--- a/src/views/courselibrary/components/createCourse.vue
+++ b/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>

--- a/src/views/courselibrary/components/professionalmode.vue
+++ b/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 { 
-  fileList, 
-  loading, 
-  courseCoverurl, 
-  handleChange, 
-  beforeUpload 
-} = useUpload();
+const { fileList, loading, courseCoverurl, handleChange, beforeUpload } =
+  useUpload();

 // 使用表单hook
-const { 
-  formRef, 
-  formState, 
-  visibilityOptions,
-  resetForm
-} = useCourseForm();
+const { 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({
-  //   path: "/createcourse",
-  //   query: {
-  //     id: 1,
-  //   },
-  // });
+  router.push({
+    path: "/createcourse",
+    query: {
+      orgId: "1693922746301661185",
+      orgName: "'N'业务",
+      duration: "1",
+    },
+  });
 };
 onMounted(() => {
  fetchApi.getClassTree();