hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-12 04:16:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

还原提示

Browse Source
This commit is contained in:
670788339
2025-11-10 15:29:21 +08:00
parent 599370aded
commit c2fbbeeefa
3 changed files with 3 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
src/components/Course/courseForm.vue
View File

@@ -75,13 +75,6 @@
</el-form-item>
<el-form-item label="标签" required>
<courseTag ref="courseTag" :courseId="curCourseId" :sysTypeList="sysTypeList" :initialTags="courseTags" @change="handleTagsChange"></courseTag>
<!-- 标签提示对话框 -->
<div v-if="tagTipDialogVisible && isFirstTime"
class="tag-tip-dialog"
@click.stop="closeTagTip">
<p>请选择适合课程内容的标签，最多可选择5个</p>
<p>点击任意处关闭此提示</p>
</div>
</el-form-item>
<el-form-item label="资源归属" required>
<el-input placeholder="请选择" v-model="orgName" >
@@ -265,13 +258,6 @@
</el-form-item>
<el-form-item label="标签" required>
<courseTag ref="courseTag" :courseId="curCourseId" :sysTypeList="sysTypeList" :initialTags="courseTags" @change="handleTagsChange"></courseTag>
<!-- 标签提示对话框 -->
<div v-if="tagTipDialogVisible && isFirstTime"
class="tag-tip-dialog"
@click.stop="closeTagTip">
<p>请选择适合课程内容的标签，最多可选择5个</p>
<p>点击任意处关闭此提示</p>
</div>
</el-form-item>
<el-form-item label="关键字">
<el-input v-model.trim="keywords" maxlength="100" @keyup.enter.native="changeKeywords" placeholder="请输入关键字"></el-input>
@@ -419,14 +405,6 @@
<!--选择图片-->
<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>
@@ -454,44 +432,11 @@ 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,GuideOverlay},
components: { courseTag, weikeContent, catalogCourseware, imageUpload, WxEditor, catalogSort,agreement,filecloud,choice,chooseOrg},
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,
@@ -591,9 +536,7 @@ export default {
dlgShow: false
},
rightTypeId: {},
catalogSortDialogShow: false,
tagTipDialogVisible: false,
isFirstTime: true,
catalogSortDialogShow: false
};
},
created() {
@@ -645,84 +588,8 @@ export default {
this.loadResOwners();
this.loadSysTypes();
this.loadUserGroup();
// 初始化标签提示
this.$nextTick(() => {
// 监听 courseTag 组件的焦点事件
if (this.$refs.courseTag && this.$refs.courseTag.$el) {
this.$refs.courseTag.$el.addEventListener('focus', this.showTagTip, true);
}
});
this.checkAndShowGuide()
},
beforeDestroy() {
// 清理事件监听器
document.removeEventListener('click', this.handleGlobalClick);
if (this.$refs.courseTag && this.$refs.courseTag.$el) {
this.$refs.courseTag.$el.removeEventListener('focus', this.showTagTip, true);
}
},
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) {
this.tagTipDialogVisible = true;
// 添加全局点击监听器
document.addEventListener('click', this.handleGlobalClick);
}
},
// 关闭标签提示对话框
closeTagTip() {
this.tagTipDialogVisible = false;
this.isFirstTime = false;
document.removeEventListener('click', this.handleGlobalClick);
},
// 处理全局点击事件
handleGlobalClick(event) {
// 如果点击的不是标签提示框内部，则关闭提示框
if (this.tagTipDialogVisible) {
const tipDialog = document.querySelector('.tag-tip-dialog');
if (tipDialog && !tipDialog.contains(event.target)) {
this.closeTagTip();
}
}
},
// 关键字的更改
changeKeywords(option){
if(option.target.value){
@@ -1949,32 +1816,4 @@ export default {
}
}
}
.tag-tip-dialog {
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border: 1px solid #ebeef5;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px;
padding: 12px;
z-index: 2000;
width: 300px;
margin-top: 5px;
p {
margin: 0;
line-height: 1.5;
font-size: 14px;
color: #606266;
}
p:first-child {
color: #303133;
font-weight: 500;
margin-bottom: 5px;
}
}
</style>