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 Table from './common/BaseTable.vue'
+import SvgIcon from './SvgIcon.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(key, globalComponents[key])
-        })
-    }
+  install(app) {
+    app.component('SvgIcon', SvgIcon)
+  }
 }

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,195 +163,210 @@ onMounted(() => {
       @submit.prevent="handleSubmit"
     >
       <div class="professional-mode-title">
-        <div class="professional-mode-title-text" style="padding-bottom: 20px">
-          基本信息
-        </div>
-        <div class="professional-mode-form">
-          <el-form-item
-            label="课程名称"
-            prop="name"
-            :rules="[{ required: true, message: '请输入课程名称' }]"
-          >
-            <el-input
-              size="large"
-              v-model="formState.name"
-              placeholder="请输入课程名称"
-            />
-          </el-form-item>
-
-          <el-form-item
-            label="课程分类"
-            prop="courseCategory"
-            :rules="[{ required: true, message: '请选择课程分类' }]"
-          >
-            <el-cascader
-              size="large"
-              v-model="formState.courseCategory"
-              placeholder="请选择课程分类"
-              :options="sysTypeListMap"
-              :props="{
-                label: 'name',
-                value: 'id',
-              }"
-            />
-          </el-form-item>
-
-          <el-form-item
-            label="资源归属"
-            prop="orgName"
-            :rules="[{ required: true, message: '请选择资源归属' }]"
-          >
-            <el-tree-select
-              size="large"
-              check-strictly
-              lazy
-              :load="loadOrgNode"
-              :render-after-expand="false"
-              v-model="formState.orgName"
-              :props="{ value: 'id', label: 'name', children: 'children' }"
-              placeholder="请选择资源归属"
-            />
-          </el-form-item>
-
-          <el-form-item
-            label="授课教师"
-            prop="lecturer"
-            :rules="[{ required: true, message: '请选择授课教师' }]"
-          >
-            <el-select-v2
-              size="large"
-              filterable
-              multiple
-              v-model="formState.lecturer"
-              :options="teachersList"
-              placeholder="请选择授课教师"
-            >
-            </el-select-v2>
-          </el-form-item>
-
-          <el-form-item
-            label="目标人群"
-            prop="forUsers"
-            :rules="[{ required: true, message: '请输入目标人群' }]"
-          >
-            <el-input
-              size="large"
-              v-model="formState.forUsers"
-              placeholder="请输入目标人群"
-            />
-          </el-form-item>
-
-          <el-form-item label="课程标签" prop="courseTags">
-            <courseTag
-              :courseId="curCourseId"
-              :sysTypeList="sysTypeList"
-              :initialTags="courseTags"
-              @change="handleTagsChange"
-              @focus="onTagFocus"
-              style="width: 100%"
-            ></courseTag>
-          </el-form-item>
-
-          <el-form-item label="受众" prop="crowds">
-            <el-select
-              size="large"
-              v-model="formState.crowds"
-              placeholder="请选择受众"
-              multiple
-              value-key="id"
-            >
-              <el-option
-                v-for="item in userGroupList"
-                :key="item.id"
-                :label="item.name"
-                :value="item"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-
-          <el-form-item label="观看设置" prop="device">
-            <el-radio-group v-model="formState.device">
-              <el-radio
-                v-for="item in visibilityOptions"
-                :key="item.value"
-                :label="item.value"
+        <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="name"
+                :rules="[{ required: true, message: '请输入课程名称' }]"
               >
-                {{ item.label }}
-              </el-radio>
-            </el-radio-group>
-          </el-form-item>
-        </div>
-
-        <div class="professional-mode-title-text" style="padding-top: 0">
-          课程介绍
-        </div>
-
-        <div class="professional-mode-form">
-          <el-form-item label="封面介绍" prop="coverIntro">
-            <div style="display: flex; align-items: flex-end">
-              <el-upload
-                v-model:file-list="fileList"
-                name="avatar"
-                list-type="picture-card"
-                class="avatar-uploader"
-                :show-file-list="false"
-                :before-upload="beforeUpload"
-              >
-                <img
-                  v-if="formState.coverImg"
-                  :src="formState.coverImg"
-                  alt="avatar"
-                  style="width: 100%"
+                <el-input
+                  v-model="formState.name"
+                  placeholder="请输入课程名称"
                 />
-                <div v-else class="text-center">
-                  <Loading v-if="loading" class="w30" />
-                  <Plus v-else class="w30" />
-                  <div class="el-upload-text">上传图片</div>
-                </div>
-              </el-upload>
-              <el-button type="primary" link @click="chooseFile" class="ml10"
-                >选择封面</el-button
+              </el-form-item>
+
+              <el-form-item
+                label="课程分类"
+                prop="courseCategory"
+                :rules="[{ required: true, message: '请选择课程分类' }]"
               >
+                <el-cascader
+                  v-model="formState.courseCategory"
+                  placeholder="请选择课程分类"
+                  :options="sysTypeListMap"
+                  :props="{
+                    label: 'name',
+                    value: 'id',
+                  }"
+                />
+              </el-form-item>
+
+              <el-form-item
+                label="资源归属"
+                prop="orgName"
+                :rules="[{ required: true, message: '请选择资源归属' }]"
+              >
+                <el-tree-select
+                  check-strictly
+                  lazy
+                  :load="loadOrgNode"
+                  :render-after-expand="false"
+                  v-model="formState.orgName"
+                  :props="{ value: 'id', label: 'name', children: 'children' }"
+                  placeholder="请选择资源归属"
+                />
+              </el-form-item>
+
+              <el-form-item
+                label="授课教师"
+                prop="lecturer"
+                :rules="[{ required: true, message: '请选择授课教师' }]"
+              >
+                <el-select-v2
+                  filterable
+                  multiple
+                  v-model="formState.lecturer"
+                  :options="teachersList"
+                  placeholder="请选择授课教师"
+                >
+                </el-select-v2>
+              </el-form-item>
+
+              <el-form-item
+                label="目标人群"
+                prop="forUsers"
+                :rules="[{ required: true, message: '请输入目标人群' }]"
+                style="display: flex"
+              >
+                <el-input
+                  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">
+                <courseTag
+                  :courseId="curCourseId"
+                  :sysTypeList="sysTypeList"
+                  :initialTags="courseTags"
+                  @change="handleTagsChange"
+                  @focus="onTagFocus"
+                  style="width: 100%"
+                ></courseTag>
+              </el-form-item>
+
+              <el-form-item label="受众" prop="crowds">
+                <el-select
+                  v-model="formState.crowds"
+                  placeholder="请选择受众"
+                  multiple
+                  value-key="id"
+                >
+                  <el-option
+                    v-for="item in userGroupList"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+
+              <el-form-item
+                label="观看设置"
+                prop="device"
+                :rules="[{ required: true, message: '请选择观看设置' }]"
+              >
+                <el-radio-group v-model="formState.device">
+                  <el-radio
+                    v-for="item in visibilityOptions"
+                    :key="item.value"
+                    :label="item.value"
+                  >
+                    {{ item.label }}
+                  </el-radio>
+                </el-radio-group>
+              </el-form-item>
             </div>
+          </div>
+        </div>
 
-            <div class="upload-hint">
-              建议上传800px*450px（16:9）的图片，格式为.png或.jpg，大小不超过2M
+        <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"
+                      name="avatar"
+                      list-type="picture-card"
+                      class="avatar-uploader"
+                      :show-file-list="false"
+                      :before-upload="beforeUpload"
+                    >
+                      <img
+                        v-if="formState.coverImg"
+                        :src="formState.coverImg"
+                        alt="avatar"
+                        style="width: 100%"
+                      />
+                      <div v-else class="text-center">
+                        <Loading v-if="loading" class="w30" />
+                        <Plus v-else class="w30" />
+                        <div class="el-upload-text">上传图片</div>
+                      </div>
+                    </el-upload>
+                    <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
+                label="课程价值"
+                prop="courseValue"
+                :rules="[{ required: true, message: '请输入课程价值' }]"
+              >
+                <el-input
+                  type="textarea"
+                  v-model="formState.courseValue"
+                  :rows="3"
+                  placeholder="请输入课程价值"
+                />
+              </el-form-item>
+
+              <el-form-item
+                label="课程简介"
+                prop="summary"
+                :rules="[{ required: true, message: '请输入课程简介' }]"
+              >
+                <el-input
+                  type="textarea"
+                  v-model="formState.summary"
+                  :rows="4"
+                  placeholder="请输入课程简介"
+                />
+              </el-form-item>
             </div>
-          </el-form-item>
-
-          <el-form-item
-            label="课程价值"
-            prop="courseValue"
-            :rules="[{ required: true, message: '请输入课程价值' }]"
-          >
-            <el-input
-              type="textarea"
-              size="large"
-              v-model="formState.courseValue"
-              :rows="3"
-              placeholder="请输入课程价值"
-            />
-          </el-form-item>
-
-          <el-form-item
-            label="课程简介"
-            prop="summary"
-            :rules="[{ required: true, message: '请输入课程简介' }]"
-          >
-            <el-input
-              type="textarea"
-              size="large"
-              v-model="formState.summary"
-              :rows="4"
-              placeholder="请输入课程简介"
-            />
-          </el-form-item>
+          </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-title-text {
-      font-size: 15px;
-      padding: 10px 0;
-      font-weight: 600;
+    .professional-mode-content {
+      margin-bottom: 20px;
+      background: #fff;
+      border-radius: 6px;
+      overflow: hidden;
+      .professional-mode-title-text {
+        font-size: 15px;
+        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

@@ -9,81 +9,96 @@
 const { defineConfig } = require("@vue/cli-service");
 
 module.exports = defineConfig({
-    lintOnSave: false,
-    publicPath: process.env.VUE_APP_BASE,
-    outputDir: process.env.VUE_APP_OUTPUT_DIR,
-    devServer: {
-        port: 8070,
-        client: {
-            overlay: false,// 解决代码抛出异常
-        },
-        proxy: {
-            // "/professional": {
-            //     target: 'http://192.168.31.211:32002',
-            //     // target: 'http://192.168.50.195:32002',
-            //     // target: 'http://192.168.86.195:32002',
-            //     changeOrigin: true,
-            // },
-            "/growth": {
-                target: 'https:' + process.env.VUE_APP_BOE_API_URL,
-                changeOrigin: true,
-            },
-            "/manageApi": {
-                target: 'https:' + process.env.VUE_APP_PROXY_URL,
-                changeOrigin: true, //表示是否改变原域名
-                pathRewrite: {
-                    "^/manageApi": "",
-                },
-            }, "/userbasic": {
-                target: 'https:' + process.env.VUE_APP_BOE_API_URL,
-                changeOrigin: true, //表示是否改变原域名
-            },
-            "/systemapi": {
-                target: 'https:' + process.env.VUE_APP_BOE_API_URL,
-                changeOrigin: true, //表示是否改变原域名
-            },
-            "/api": {
-                target: 'https:' + process.env.VUE_APP_BOE_API_URL,
-                changeOrigin: true, //表示是否改变原域名
-            },
-            // "/reportsnake": {
-            //     target:'https:' + process.env.VUE_APP_BOE_API_URL,
-            //     changeOrigin: true, //表示是否改变原域名
-            //     pathRewrite: {
-            //         // "^/reportsnake": "",
-            //     },
-            // },
-            "/reportsnake": {
-                target: 'http://127.0.0.1:32004',
-                changeOrigin: true, //表示是否改变原域名
-                pathRewrite: {
-                    "^/reportsnake": "",
-                },
-                onProxyReq(proxyReq, req) {
-                    console.log('Proxying request to:', req.url); // 调试日志
-                }
-            },
-            "/report": {
-                target: 'https:' + process.env.VUE_APP_BOE_API_URL,
-                changeOrigin: true, //表示是否改变原域名
-                pathRewrite: {
-                    // "^/manageApi": "",
-                },
-            },
-
-
-            // "/report": {
-            //     target: 'http://192.168.31.211:18878',
-            //     changeOrigin: true, //表示是否改变原域名
-            //     pathRewrite: {
-            //         "^/report": "",
-            //     },
-            // },
-            "/activityApi": {
-                target: 'https:' + process.env.VUE_APP_BOE_API_URL,
-                changeOrigin: true,
-            },
-
-        },
+  lintOnSave: false,
+  publicPath: process.env.VUE_APP_BASE,
+  outputDir: process.env.VUE_APP_OUTPUT_DIR,
+  devServer: {
+    port: 8070,
+    client: {
+      overlay: false, // 解决代码抛出异常
     },
+    proxy: {
+      // "/professional": {
+      //     target: 'http://192.168.31.211:32002',
+      //     // target: 'http://192.168.50.195:32002',
+      //     // target: 'http://192.168.86.195:32002',
+      //     changeOrigin: true,
+      // },
+      "/growth": {
+        target: "https:" + process.env.VUE_APP_BOE_API_URL,
+        changeOrigin: true,
+      },
+      "/manageApi": {
+        target: "https:" + process.env.VUE_APP_PROXY_URL,
+        changeOrigin: true, //表示是否改变原域名
+        pathRewrite: {
+          "^/manageApi": "",
+        },
+      },
+      "/userbasic": {
+        target: "https:" + process.env.VUE_APP_BOE_API_URL,
+        changeOrigin: true, //表示是否改变原域名
+      },
+      "/systemapi": {
+        target: "https:" + process.env.VUE_APP_BOE_API_URL,
+        changeOrigin: true, //表示是否改变原域名
+      },
+      "/api": {
+        target: "https:" + process.env.VUE_APP_BOE_API_URL,
+        changeOrigin: true, //表示是否改变原域名
+      },
+      // "/reportsnake": {
+      //     target:'http:' + process.env.VUE_APP_BOE_API_URL,
+      //     changeOrigin: true, //表示是否改变原域名
+      //     pathRewrite: {
+      //         // "^/reportsnake": "",
+      //     },
+      // },
+      "/reportsnake": {
+        target: "http://127.0.0.1:32004",
+        changeOrigin: true, //表示是否改变原域名
+        pathRewrite: {
+          "^/reportsnake": "",
+        },
+        onProxyReq(proxyReq, req) {
+          console.log("Proxying request to:", req.url); // 调试日志
+        },
+      },
+      "/report": {
+        target: "https:" + process.env.VUE_APP_BOE_API_URL,
+        changeOrigin: true, //表示是否改变原域名
+        pathRewrite: {
+          // "^/manageApi": "",
+        },
+      },
+
+      // "/report": {
+      //     target: 'http://192.168.31.211:18878',
+      //     changeOrigin: true, //表示是否改变原域名
+      //     pathRewrite: {
+      //         "^/report": "",
+      //     },
+      // },
+      "/activityApi": {
+        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]",
+      });
+  },
 });