提示测试

src/components/Course/courseForm.vue

@@ -74,7 +74,7 @@
                 :options="sysTypeListMap"></el-cascader>
             </el-form-item>
             <el-form-item label="标签" required>
-              <courseTag ref="courseTag" :courseId="curCourseId" :sysTypeList="sysTypeList" :initialTags="courseTags" :courseName="courseInfo.name" @change="handleTagsChange"></courseTag>
+              <courseTag ref="courseTag" :courseId="curCourseId" :sysTypeList="sysTypeList" :initialTags="courseTags" @change="handleTagsChange"></courseTag>
               <!-- 标签提示对话框 -->
               <div v-if="tagTipDialogVisible && isFirstTime"
                    class="tag-tip-dialog"
@@ -419,6 +419,14 @@
     <!--选择图片-->
     <filecloud :show="dlgFileChoose.show" @choose="changeCourseImage" @close="choseChoose"></filecloud>
     <chooseOrg ref="refChooseOrg" @confirm="confirmChooseOrg"></chooseOrg>
+
+    <!-- 蒙层引导 -->
+    <guide-overlay
+      :visible="showGuide"
+      :steps="guideSteps"
+      @skip="handleSkipGuide"
+      @complete="handleCompleteGuide"
+    />
   </div>
 </template>
 <script>
@@ -446,11 +454,44 @@ import { courseType, getType } from '../../utils/tools.js';
 import { mapGetters, mapActions } from 'vuex';
 import filecloud from '@/components/FileCloud/index.vue';
 import chooseOrg from '@/components/System/chooseOrg.vue';
+import GuideOverlay from '@/components/Course/GuideOverlay.vue';
 export default {
   props: {},
-  components: { courseTag, weikeContent, catalogCourseware, imageUpload, WxEditor, catalogSort,agreement,filecloud,choice,chooseOrg},
+  components: { courseTag, weikeContent, catalogCourseware, imageUpload, WxEditor, catalogSort,agreement,filecloud,choice,chooseOrg,GuideOverlay},
   data() {
     return {
+      showGuide: false,
+      guideSteps: [
+        {
+          title: '课程名称',
+          content: '请输入课程名称，这将帮助系统智能推荐相关标签',
+          targetElement: '.el-input__inner', // 课程名称输入框
+          borderRadius: '4px'
+        },
+        {
+          title: '课程分类',
+          content: '选择课程分类，系统会根据分类自动推荐合适的标签',
+          targetElement: '.el-cascader__search-input', // 分类选择框
+          borderRadius: '4px'
+        },
+        {
+          title: '智能标签',
+          content: '系统会根据课程名称和分类智能推荐标签，点击即可添加',
+          targetElement: '.smart-tag-hint', // 智能提示区域
+          borderRadius: '4px'
+        },
+        {
+          title: '标签管理',
+          content: '您可以手动输入标签或选择推荐标签，最多可添加5个标签',
+          targetElement: '.el-select__tags', // 标签显示区域
+          borderRadius: '4px'
+        }
+      ],
+      courseForm: {
+        name: '',
+        categories: [],
+        tags: []
+      },
       keywords:'',//关键字的定义
       tips:[],
       addOrder:1,
@@ -612,6 +653,7 @@ export default {
         this.$refs.courseTag.$el.addEventListener('focus', this.showTagTip, true);
       }
     });
+    this.checkAndShowGuide()
   },
 
   beforeDestroy() {
@@ -623,6 +665,37 @@ export default {
   },
 
   methods: {
+    checkAndShowGuide() {
+      // 检查是否为新用户或首次使用标签功能
+      const guideCompleted = localStorage.getItem('courseTagGuideCompleted')
+      if (!guideCompleted && this.isNewUser()) {
+        // 延迟显示引导，确保DOM已渲染
+        setTimeout(() => {
+          this.showGuide = true
+        }, 1000)
+      }
+    },
+
+    isNewUser() {
+      // 根据业务逻辑判断是否为新用户
+      return !this.curCourseId || this.courseTags.length === 0
+    },
+
+    handleSkipGuide() {
+      this.showGuide = false
+      this.$message.info('已跳过引导，您可以在设置中重新查看')
+    },
+
+    handleCompleteGuide() {
+      this.showGuide = false
+      this.$message.success('引导完成，开始使用智能标签功能吧！')
+    },
+
+    // 手动触发引导（供用户重新查看）
+    showTagGuide() {
+      this.showGuide = true
+    },
+
     // 显示标签提示对话框
     showTagTip() {
       if (this.isFirstTime) {