在线标签提示改版

src/components/Course/courseForm.vue

@@ -56,13 +56,13 @@
               <div class="step-desc">✨ 涉内容（如：5W1H分析法）</div>
             </div>
           </div>
-<!--          <div class="guidance-step" :class="{ active: currentStep === 2 }">
-            <div class="step-number">2</div>
-            <div class="step-content">
-              <div class="step-title">添加课程标签</div>
-              <div class="step-desc">为课程添加相关标签,最多5个，便于搜索和分类,可回车创建新标签</div>
-            </div>
-          </div>-->
+          <!--          <div class="guidance-step" :class="{ active: currentStep === 2 }">
+                      <div class="step-number">2</div>
+                      <div class="step-content">
+                        <div class="step-title">添加课程标签</div>
+                        <div class="step-desc">为课程添加相关标签,最多5个，便于搜索和分类,可回车创建新标签</div>
+                      </div>
+                    </div>-->
         </div>
         <!--        <div class="guidance-actions">
                   <el-button @click="previousStep1" v-if="currentStep > 1">上一步</el-button>
@@ -75,7 +75,7 @@
     </div>
 
     <!-- 高亮指引元素 -->
-<!--    <div v-if="showGuidance" class="highlight-element" :style="highlightStyle"></div>-->
+    <!--    <div v-if="showGuidance" class="highlight-element" :style="highlightStyle"></div>-->
 
 
     <!--微课-->
@@ -114,11 +114,14 @@
               </el-cascader>
             </el-form-item>
 
-            <el-form-item label="标签" required class="guidance-highlight" data-step="1">
+            <el-form-item label="标签" required class="guidance-highlight" data-step="1" style="display: flex" >
               <courseTag ref="courseTag" :courseId="curCourseId" :sysTypeList="sysTypeList"
                          :initialTags="courseTags" @change="handleTagsChange"
-                         @focus="onTagFocus">
+                         @focus="onTagFocus" style="width: 95%;">
               </courseTag>
+              <el-tooltip content="点击查看标签新功能引导" placement="top">
+                <i class="el-icon-question" style="color: #409EFF; cursor: pointer;" @click="handleTagHelp"></i>
+              </el-tooltip>
             </el-form-item>
 
             <el-form-item label="资源归属" required>
@@ -303,11 +306,14 @@
                   </el-select> -->
                   <choice :teacherValue="teacherValues" @getTeacherList="getTeacherList"></choice>
                 </el-form-item>
-                <el-form-item label="标签" required class="guidance-highlight" data-step="1">
+                <el-form-item label="标签" required class="tag-from-item" data-step="1" >
                   <courseTag ref="courseTag" :courseId="curCourseId" :sysTypeList="sysTypeList"
                              :initialTags="courseTags" @change="handleTagsChange"
-                             @focus="onTagFocus">
+                             @focus="onTagFocus" >
                   </courseTag>
+                  <el-tooltip content="点击查看标签新功能引导" placement="top">
+                    <i class="el-icon-question" style="color: #409EFF; cursor: pointer;" @click="handleTagHelp"></i>
+                  </el-tooltip>
                 </el-form-item>
 
                 <el-form-item label="关键字">
@@ -647,6 +653,9 @@ export default {
     this.loadUserGroup();
   },
   methods: {
+    handleTagHelp(){
+      this.checkAndShowGuidance();
+    },
     // 关键字的更改
     changeKeywords(option){
       if(option.target.value){
@@ -955,26 +964,26 @@ export default {
           this.curCourseId = this.courseInfo.id
           console.log('保存课程成功',this.curCourseId)
           console.log('isTip ',this.courseInfo.isTip)
-          if(this.courseInfo.isTip){
-            // 检查是否为首次创建，显示引导
-            this.checkAndShowGuidance();
-          }
+          // if(this.courseInfo.isTip){
+          //   // 检查是否为首次创建，显示引导
+          //   this.checkAndShowGuidance();
+          // }
 
           if (this.courseChooseId == 1) {
             this.weike.dlgShow = true;
           } else {
             this.biaoke.dlgShow = true;
           }
-          this.$nextTick(() => {
-            this.initTagComponent();
-            // 如果显示引导，初始化高亮元素
-            if (this.showGuidance) {
-              this.$nextTick(() => {
-                this.initGuidanceElements();
-                this.highlightCurrentStep();
-              });
-            }
-          });
+          // this.$nextTick(() => {
+          //   this.initTagComponent();
+          //   // 如果显示引导，初始化高亮元素
+          //   if (this.showGuidance) {
+          //     this.$nextTick(() => {
+          //       this.initGuidanceElements();
+          //       this.highlightCurrentStep();
+          //     });
+          //   }
+          // });
         } else {
           this.$message.error(rs.message);
         }
@@ -983,15 +992,15 @@ export default {
     // 检查并显示引导
     checkAndShowGuidance() {
       // 检查本地存储，判断是否为首次创建
-      const hasShownGuidance = localStorage.getItem('course_creation_guidance_shown');
-      if (!hasShownGuidance) {
-        this.showGuidance = true;
-        this.currentStep = 1;
-        this.isFirstCreate = true;
-        // 标记引导已显示
-        localStorage.setItem('course_creation_guidance_shown', 'true');
-        apiCourse.saveTip();
-      }
+      // const hasShownGuidance = localStorage.getItem('course_creation_guidance_shown');
+      // if (!hasShownGuidance) {
+      this.showGuidance = true;
+      this.currentStep = 1;
+      this.isFirstCreate = true;
+      // 标记引导已显示
+      localStorage.setItem('course_creation_guidance_shown', 'true');
+      // apiCourse.saveTip();
+      // }
     },
     // 初始化引导元素
     initGuidanceElements() {
@@ -2060,4 +2069,26 @@ export default {
   position: relative;
   z-index: 10001;
 }
+//.el-form-item__content {
+//  display: flex;
+//  width: 80%;
+//  .tag-container {
+//    width: 95%;
+//  }
+//}
+.tag-from-item .el-form-item__content {
+  margin-left: 0 !important;
+  display: flex;
+  //align-items: center;
+  .tag-container {
+    width: 95%;
+  }
+}
+.guidance-highlight .el-form-item__content {
+  margin-left: 0 !important;
+  display: flex;
+  width: 75%;
+}
+
 </style>
+