feat(course): 优化课程专业模式表单界面与交互

- 移除表单组件的 size 属性统一使用默认尺寸
- 引入 SvgIcon 组件并支持自动导入 svg 图标
- 添加 svg-sprite-loader 依赖用于 svg 图标处理
- 重构课程标签组件 courseTag 移除 size 属性
- 优化专业模式表单布局结构提升视觉效果
- 添加目标人群输入框提示信息 tooltip
- 调整表单元素宽度统一为 95% 提升一致性
- 更新按钮样式统一使用圆角和主题色
- 优化单选框样式显示勾选符号
- 调整标签颜色提升可读性
- 配置 webpack 支持 svg sprite 加载方式
- 添加 tishi.svg 图标文件用于提示信息展示

package.json

@@ -56,7 +56,8 @@
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
     "sass": "^1.32.7",
-    "sass-loader": "^12.0.0"
+    "sass-loader": "^12.0.0",
+    "svg-sprite-loader": "^6.0.11"
   },
   "eslintConfig": {
     "root": true,

src/assets/svg/tishi.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>tishi </title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon" transform="translate(-220, -786)" fill="#000000" fill-rule="nonzero">
+            <g id="tishi-" transform="translate(220, 786)">
+                <path d="M5,0 C7.76142375,0 10,2.23857625 10,5 C10,7.76142375 7.76142375,10 5,10 C2.23857625,10 0,7.76142375 0,5 C0,2.23857625 2.23857625,0 5,0 Z M5,0.625 C2.58375422,0.625 0.625,2.58375422 0.625,5 C0.625,7.41624578 2.58375422,9.375 5,9.375 C7.41624578,9.375 9.375,7.41624578 9.375,5 C9.375,2.58375422 7.41624578,0.625 5,0.625 Z M5,7.03125 C5.25888348,7.03125 5.46875,7.24111652 5.46875,7.5 C5.46875,7.75888348 5.25888348,7.96875 5,7.96875 C4.74111652,7.96875 4.53125,7.75888348 4.53125,7.5 C4.53125,7.24111652 4.74111652,7.03125 5,7.03125 Z M5,2.03125 C6.035625,2.03125 6.87500514,2.875 6.87500514,3.916875 C6.87713025,4.83483823 6.21706272,5.62058261 5.3125,5.776875 L5.3125,6.18625 C5.3125,6.35883898 5.17258898,6.49875 5,6.49875 C4.82741102,6.49875 4.6875,6.35883898 4.6875,6.18625 L4.6875,5.56125 C4.68758364,5.40346795 4.80527154,5.27049939 4.961875,5.25125 C5.026875,5.239375 5.1325,5.260625 5.220625,5.24625 C5.86812592,5.13575806 6.34110391,4.57373337 6.339375,3.916875 C6.34110369,3.17522829 5.7416448,2.57241266 5,2.57 C4.2583552,2.57241266 3.65889631,3.17522829 3.660625,3.916875 C3.66097121,4.06505852 3.54130732,4.18556118 3.393125,4.18625 C3.24494261,4.18590539 3.12499155,4.06568279 3.12499155,3.9175 C3.12350592,3.41872656 3.32021117,2.93978831 3.67184236,2.58604733 C4.02347355,2.23230635 4.50122655,2.03273961 5,2.03125 Z" id="形状"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/SvgIcon.vue

@@ -0,0 +1,43 @@
+<template>
+  <svg :class="svgClass" aria-hidden="true" v-bind="$attrs">
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'SvgIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>

src/components/index.js

@@ -1,14 +1,12 @@
-import Pagination from './Pagination.vue'
+import SvgIcon from './SvgIcon.vue'
-import Table from './common/BaseTable.vue'
+
+// 自动导入 @/assets/svg 下的所有图标
+const req = require.context('../assets/svg', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+requireAll(req)
 
-const globalComponents = {
-    Pagination,
-    Table
-}
 export default {
   install(app) {
-        Object.keys(globalComponents).forEach(key => {
+    app.component('SvgIcon', SvgIcon)
-            app.component(key, globalComponents[key])
-        })
   }
 }

src/views/courselibrary/components/courseTag.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="tag-container" @click="handleContainerClick">
     <el-select
-      size="large"
       style="width: 100%"
       v-model="selectedTags"
       multiple

src/views/courselibrary/components/professionalmode.vue

@@ -3,6 +3,7 @@ import { ref, defineOptions, onMounted, watch } from "vue";
 import { Plus, Loading } from "@element-plus/icons-vue";
 import courseTag from "./courseTag.vue";
 import { $message } from "@/utils/useMessage";
+
 import {
   ElForm,
   ElFormItem,
@@ -16,7 +17,7 @@ import {
   ElSelectV2,
   ElTreeSelect,
   ElOption,
-  ElDialog,
+  ElTooltip,
 } from "element-plus";
 import FieldCloud from "@/components/FileCloud/index.vue";
 import Cropper from "@/components/Cropper/Cropper.vue";
@@ -71,7 +72,6 @@ const dlgFileShow = ref(false);
 // 方法定义
 const chooseFile = () => {
   dlgFileShow.value = true;
-
 };
 
 const dlgCutShow = ref(false);
@@ -163,9 +163,9 @@ onMounted(() => {
       @submit.prevent="handleSubmit"
     >
       <div class="professional-mode-title">
-        <div class="professional-mode-title-text" style="padding-bottom: 20px">
+        <div class="professional-mode-content">
-          基本信息
+          <div class="professional-mode-title-text">基本信息</div>
-        </div>
+          <div style="width: 70%; margin: 0 auto">
             <div class="professional-mode-form">
               <el-form-item
                 label="课程名称"
@@ -173,7 +173,6 @@ onMounted(() => {
                 :rules="[{ required: true, message: '请输入课程名称' }]"
               >
                 <el-input
-              size="large"
                   v-model="formState.name"
                   placeholder="请输入课程名称"
                 />
@@ -185,7 +184,6 @@ onMounted(() => {
                 :rules="[{ required: true, message: '请选择课程分类' }]"
               >
                 <el-cascader
-              size="large"
                   v-model="formState.courseCategory"
                   placeholder="请选择课程分类"
                   :options="sysTypeListMap"
@@ -202,7 +200,6 @@ onMounted(() => {
                 :rules="[{ required: true, message: '请选择资源归属' }]"
               >
                 <el-tree-select
-              size="large"
                   check-strictly
                   lazy
                   :load="loadOrgNode"
@@ -219,7 +216,6 @@ onMounted(() => {
                 :rules="[{ required: true, message: '请选择授课教师' }]"
               >
                 <el-select-v2
-              size="large"
                   filterable
                   multiple
                   v-model="formState.lecturer"
@@ -233,12 +229,23 @@ onMounted(() => {
                 label="目标人群"
                 prop="forUsers"
                 :rules="[{ required: true, message: '请输入目标人群' }]"
+                style="display: flex"
               >
                 <el-input
-              size="large"
                   v-model="formState.forUsers"
                   placeholder="请输入目标人群"
                 />
+                <el-tooltip
+                  content="目标人群为课程面对的群体"
+                  placement="top"
+                  effect="light"
+                >
+                  <svg-icon
+                    icon-class="tishi"
+                    style="width: 0.7em; height: 0.7em"
+                    class="ml20"
+                  />
+                </el-tooltip>
               </el-form-item>
 
               <el-form-item label="课程标签" prop="courseTags">
@@ -254,7 +261,6 @@ onMounted(() => {
 
               <el-form-item label="受众" prop="crowds">
                 <el-select
-              size="large"
                   v-model="formState.crowds"
                   placeholder="请选择受众"
                   multiple
@@ -269,7 +275,11 @@ onMounted(() => {
                 </el-select>
               </el-form-item>
 
-          <el-form-item label="观看设置" prop="device">
+              <el-form-item
+                label="观看设置"
+                prop="device"
+                :rules="[{ required: true, message: '请选择观看设置' }]"
+              >
                 <el-radio-group v-model="formState.device">
                   <el-radio
                     v-for="item in visibilityOptions"
@@ -281,13 +291,15 @@ onMounted(() => {
                 </el-radio-group>
               </el-form-item>
             </div>
-
+          </div>
-        <div class="professional-mode-title-text" style="padding-top: 0">
-          课程介绍
         </div>
 
+        <div class="professional-mode-content">
+          <div class="professional-mode-title-text">课程介绍</div>
+          <div style="width: 70%; margin: 0 auto">
             <div class="professional-mode-form">
               <el-form-item label="封面介绍" prop="coverIntro">
+                <div style="display: flex; flex-direction: column">
                   <div style="display: flex; align-items: flex-end">
                     <el-upload
                       v-model:file-list="fileList"
@@ -309,14 +321,18 @@ onMounted(() => {
                         <div class="el-upload-text">上传图片</div>
                       </div>
                     </el-upload>
-              <el-button type="primary" link @click="chooseFile" class="ml10"
+                    <el-button
+                      type="primary"
+                      link
+                      @click="chooseFile"
+                      class="ml10"
                       >选择封面</el-button
                     >
                   </div>
-
                   <div class="upload-hint">
                     建议上传800px*450px（16:9）的图片，格式为.png或.jpg，大小不超过2M
                   </div>
+                </div>
               </el-form-item>
 
               <el-form-item
@@ -326,7 +342,6 @@ onMounted(() => {
               >
                 <el-input
                   type="textarea"
-              size="large"
                   v-model="formState.courseValue"
                   :rows="3"
                   placeholder="请输入课程价值"
@@ -340,18 +355,18 @@ onMounted(() => {
               >
                 <el-input
                   type="textarea"
-              size="large"
                   v-model="formState.summary"
                   :rows="4"
                   placeholder="请输入课程简介"
                 />
               </el-form-item>
             </div>
+          </div>
+        </div>
 
         <div class="form-actions">
           <el-button
             style="margin-left: 80px; margin-right: 12px"
-            size="large"
             @click="handleReset"
             >存草稿</el-button
           >
@@ -376,21 +391,42 @@ onMounted(() => {
 
 <style scoped>
 .professional-mode {
-  width: 70%;
+  width: 100%;
+  background: rgb(245, 247, 250);
 
   .default-form {
     width: 100%;
     margin-bottom: 30px;
-    padding: 10px 15px;
+    //padding: 10px 15px;
   }
 
   .professional-mode-title {
     width: 100%;
 
+    .professional-mode-content {
+      margin-bottom: 20px;
+      background: #fff;
+      border-radius: 6px;
+      overflow: hidden;
       .professional-mode-title-text {
         font-size: 15px;
-      padding: 10px 0;
+        padding: 10px 24px;
         font-weight: 600;
+        border-radius: 6px;
+        border: 1px solid rgba(222, 222, 222, 0.93);
+        margin-bottom: 20px;
+        position: relative;
+        &:before {
+          content: " ";
+          position: absolute;
+          width: 12px;
+          background: #4284f7;
+          border-radius: 6px 0 0 6px;
+          left: 0;
+          top: 0;
+          height: 100%;
+        }
+      }
     }
   }
 
@@ -410,8 +446,52 @@ onMounted(() => {
 
   .form-actions {
     padding: 20px 0;
+    text-align: center;
+  }
+  :deep(.el-button) {
+    min-width: 120px;
+    border-radius: 10px;
+    border: 1px solid #4284f7;
+    color: #4284f7;
+    height: 40px;
+    &.is-link {
+      height: auto;
+      color: #4284f7;
+      background: transparent;
+      border: none;
+      min-width: 10px;
+    }
+  }
+  :deep(.el-button--primary) {
+    background: #4284f7;
+    color: #fff;
+  }
+  /* 注意：如果用了 scoped，要用 :deep() */
+  :deep(.el-radio__inner::after) {
+    display: none !important;
   }
 
+  :deep(.el-radio__input.is-checked .el-radio__inner::before) {
+    content: "✔";
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: #409eff;
+    border-radius: 50%;
+    font-size: 12px;
+    color: #fff;
+    text-align: center;
+    line-height: 15px;
+    box-sizing: border-box;
+  }
+
+  :deep(.el-select__tags .el-tag--info) {
+    background-color: #c8d9f6;
+    color: #000;
+  }
   :deep(.el-upload--picture-card) {
     width: 200px;
     height: 112px;
@@ -425,5 +505,14 @@ onMounted(() => {
     width: 200px;
     height: 112px;
   }
+  :deep(.el-input, .el-select) {
+    width: 95%;
+  }
+  :deep(.el-select-v2) {
+    width: 95%;
+  }
+  :deep(.el-textarea) {
+    width: 95%;
+  }
 }
 </style>

vue.config.js

@@ -15,7 +15,7 @@ module.exports = defineConfig({
   devServer: {
     port: 8070,
     client: {
-            overlay: false,// 解决代码抛出异常
+      overlay: false, // 解决代码抛出异常
     },
     proxy: {
       // "/professional": {
@@ -25,53 +25,53 @@ module.exports = defineConfig({
       //     changeOrigin: true,
       // },
       "/growth": {
-                target: 'https:' + process.env.VUE_APP_BOE_API_URL,
+        target: "https:" + process.env.VUE_APP_BOE_API_URL,
         changeOrigin: true,
       },
       "/manageApi": {
-                target: 'https:' + process.env.VUE_APP_PROXY_URL,
+        target: "https:" + process.env.VUE_APP_PROXY_URL,
         changeOrigin: true, //表示是否改变原域名
         pathRewrite: {
           "^/manageApi": "",
         },
-            }, "/userbasic": {
+      },
-                target: 'https:' + process.env.VUE_APP_BOE_API_URL,
+      "/userbasic": {
+        target: "https:" + process.env.VUE_APP_BOE_API_URL,
         changeOrigin: true, //表示是否改变原域名
       },
       "/systemapi": {
-                target: 'https:' + process.env.VUE_APP_BOE_API_URL,
+        target: "https:" + process.env.VUE_APP_BOE_API_URL,
         changeOrigin: true, //表示是否改变原域名
       },
       "/api": {
-                target: 'https:' + process.env.VUE_APP_BOE_API_URL,
+        target: "https:" + process.env.VUE_APP_BOE_API_URL,
         changeOrigin: true, //表示是否改变原域名
       },
       // "/reportsnake": {
-            //     target:'https:' + process.env.VUE_APP_BOE_API_URL,
+      //     target:'http:' + process.env.VUE_APP_BOE_API_URL,
       //     changeOrigin: true, //表示是否改变原域名
       //     pathRewrite: {
       //         // "^/reportsnake": "",
       //     },
       // },
       "/reportsnake": {
-                target: 'http://127.0.0.1:32004',
+        target: "http://127.0.0.1:32004",
         changeOrigin: true, //表示是否改变原域名
         pathRewrite: {
           "^/reportsnake": "",
         },
         onProxyReq(proxyReq, req) {
-                    console.log('Proxying request to:', req.url); // 调试日志
+          console.log("Proxying request to:", req.url); // 调试日志
-                }
+        },
       },
       "/report": {
-                target: 'https:' + process.env.VUE_APP_BOE_API_URL,
+        target: "https:" + process.env.VUE_APP_BOE_API_URL,
         changeOrigin: true, //表示是否改变原域名
         pathRewrite: {
           // "^/manageApi": "",
         },
       },
 
-
       // "/report": {
       //     target: 'http://192.168.31.211:18878',
       //     changeOrigin: true, //表示是否改变原域名
@@ -80,10 +80,25 @@ module.exports = defineConfig({
       //     },
       // },
       "/activityApi": {
-                target: 'https:' + process.env.VUE_APP_BOE_API_URL,
+        target: "https:" + process.env.VUE_APP_BOE_API_URL,
         changeOrigin: true,
       },
-
     },
   },
+  chainWebpack: (config) => {
+    // 移除默认的svg处理规则
+    config.module.rules.delete("svg");
+
+    // 添加新的svg处理规则
+    config.module
+      .rule("svg")
+      .test(/\.svg$/)
+      .include.add(require("path").resolve("src/assets/svg"))
+      .end()
+      .use("svg-sprite-loader")
+      .loader("svg-sprite-loader")
+      .options({
+        symbolId: "icon-[name]",
+      });
+  },
 });