chore: update

src/modules/course/create/components/stepTwoComponents/AddKnowledge.vue

@@ -10,11 +10,16 @@ interface KnowledgeNode {
   children?: KnowledgeNode[]
   isEdit?: boolean
   originalLabel?: string
+  course_id?: string
+  chapter_id?: string
+  section_id?: string
 }
 
 const props = defineProps<{
   chapterName: string
-  chapterID: string
+  chapterId: string
+  courseId: string
+  parentId: string
 }>()
 
 const emit = defineEmits<{
@@ -30,14 +35,14 @@ const treeRef = ref()
 const inputRef = ref()
 
 // 获取localStorage key
-const getStorageKey = () => `knowledge_tree_${props.chapterID}`
+const getStorageKey = () => `knowledge`
 
 // 从localStorage加载数据
 const loadFromStorage = () => {
   try {
-    const stored = localStorage.getItem(getStorageKey())
-    if (stored) {
-      treeData.value = JSON.parse(stored)
+    const allData = JSON.parse(localStorage.getItem(getStorageKey()) || '[]')
+    if (allData) {
+      treeData.value = allData?.filter((item: any) => item.section_id === props.chapterId) || []
     }
   } catch (error) {
     console.error('加载知识点数据失败:', error)
@@ -48,7 +53,10 @@ const loadFromStorage = () => {
 // 保存到localStorage
 const saveToStorage = () => {
   try {
-    localStorage.setItem(getStorageKey(), JSON.stringify(treeData.value))
+    const allData = JSON.parse(localStorage.getItem(getStorageKey()) || '[]')
+    const newData = allData.filter((item: any) => item.section_id !== props.chapterId)
+    newData.push(...treeData.value)
+    localStorage.setItem(getStorageKey(), JSON.stringify(newData))
   } catch (error) {
     console.error('保存知识点数据失败:', error)
     ElMessage.error('保存失败')
@@ -72,6 +80,9 @@ const addRootNode = () => {
     label: '新知识点',
     children: [],
     isEdit: true,
+    course_id: props.courseId,
+    chapter_id: props.parentId,
+    section_id: props.chapterId,
   }
 
   treeRef.value?.append(newNode)

src/modules/course/create/components/stepTwoComponents/KnowledgeGraphPreview.vue

+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import KnowledgeGraph from './KnowledgeGraph.vue'
+
+interface KnowledgeNode {
+  id: string
+  label: string
+  children?: KnowledgeNode[]
+  course_id?: string
+  chapter_id?: string
+  section_id?: string
+}
+
+const props = defineProps<{
+  isShowKnowledgeGraphPreview: boolean
+  courseId: string
+  chapterId?: string // 可选的章节ID，如果提供则只显示该章节的知识点
+  title?: string // 弹框标题
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:isShowKnowledgeGraphPreview', value: boolean): void
+}>()
+
+// 知识图谱数据
+const knowledgeData = ref<KnowledgeNode[]>([])
+const loading = ref(false)
+
+// 获取localStorage key
+const getStorageKey = () => `knowledge`
+
+// 获取知识图谱数据
+const fetchKnowledgeData = async () => {
+  if (!props.courseId) return
+
+  loading.value = true
+  try {
+    // 从localStorage读取数据
+    const allData = JSON.parse(localStorage.getItem(getStorageKey()) || '[]')
+
+    if (allData && allData.length > 0) {
+      // 如果提供了章节ID，则筛选该章节的数据
+      if (props.chapterId) {
+        knowledgeData.value = allData.filter((item: any) => item.chapter_id === props.chapterId) || []
+      } else {
+        // 否则显示所有属于该课程的数据
+        knowledgeData.value = allData.filter((item: any) => item.course_id === props.courseId) || []
+      }
+    } else {
+      knowledgeData.value = []
+    }
+  } catch (error) {
+    console.error('获取知识图谱数据失败:', error)
+    knowledgeData.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+// 关闭弹框
+const handleClose = () => {
+  emit('update:isShowKnowledgeGraphPreview', false)
+}
+
+// 监听弹框显示状态
+watch(
+  () => props.isShowKnowledgeGraphPreview,
+  (newVal) => {
+    if (newVal) {
+      fetchKnowledgeData()
+    }
+  }
+)
+
+// 监听课程ID变化
+watch(
+  () => props.courseId,
+  () => {
+    if (props.isShowKnowledgeGraphPreview) {
+      fetchKnowledgeData()
+    }
+  }
+)
+
+// 监听章节ID变化
+watch(
+  () => props.chapterId,
+  () => {
+    if (props.isShowKnowledgeGraphPreview) {
+      fetchKnowledgeData()
+    }
+  }
+)
+
+onMounted(() => {
+  if (props.isShowKnowledgeGraphPreview) {
+    fetchKnowledgeData()
+  }
+})
+</script>
+
+<template>
+  <el-dialog
+    :model-value="isShowKnowledgeGraphPreview"
+    :title="title || '知识点脑图预览'"
+    width="800px"
+    :before-close="handleClose"
+    draggable
+    destroy-on-close
+    @update:model-value="(val) => emit('update:isShowKnowledgeGraphPreview', val)">
+    <div v-loading="loading" style="min-height: 500px">
+      <div v-if="!loading && knowledgeData.length === 0" class="empty-state">
+        <el-empty description="暂无知识点数据" />
+      </div>
+      <div v-else-if="!loading" style="width: 100%; height: 500px">
+        <KnowledgeGraph :treeData="knowledgeData" />
+      </div>
+    </div>
+
+    <template #footer>
+      <span>
+        <el-button @click="handleClose">关闭</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 500px;
+}
+</style>

src/modules/course/create/views/StepTwo.vue

@@ -15,6 +15,7 @@ import AddChapterDialog from '../components/stepTwoComponents/AddChapterDialog.v
 import AddTextbookDialog from '../components/stepTwoComponents/AddTextbookDialog.vue'
 import AddGraphbookDialog from '../components/stepTwoComponents/AddGraphbookDialog.vue'
 import AddKnowledge from '../components/stepTwoComponents/AddKnowledge.vue'
+import KnowledgeGraphPreview from '../components/stepTwoComponents/KnowledgeGraphPreview.vue'
 
 import OpenRules from '../components/stepTwoComponents/OpenRules.vue'
 const route = useRoute()
@@ -37,6 +38,7 @@ const isShowExamDialog = ref(false)
 const isShowVideoPlayDialog = ref(false)
 const chapterName = ref('')
 const chapterID = ref('')
+const parentID = ref('')
 const btnInfo = ref({}) // 按钮信息
 const isEdit = ref(false)
 const videoUrl = ref('')
@@ -82,10 +84,10 @@ const btnList = [
     btn_name: '关联数字教材',
     resource_type: '13',
   },
-  {
-    btn_name: '关联知识图谱',
-    resource_type: '14',
-  },
+  // {
+  //   btn_name: '关联知识图谱',
+  //   resource_type: '14',
+  // },
 ]
 const defaultProps = {
   children: 'children',
@@ -165,6 +167,7 @@ const handleAddDialog = (node: any, item: any, data: any) => {
   console.log(data, 'data', dataSource)
   chapterID.value = node.key
   chapterName.value = node.label
+  parentID.value = data.parent_id
   btnInfo.value = item
   flag.value = true
   defaultExpandedKeys.value = [node.key]
@@ -367,6 +370,22 @@ const handleChangeStatus = (node: any, data: any) => {
 }
 
 const isShowKnowledgeDialog = ref(false)
+const isShowKnowledgeGraphPreview = ref(false)
+const knowledgeGraphTitle = ref('')
+const currentChapterId = ref('')
+
+// 显示知识图谱预览
+const handleShowKnowledgeGraph = (node: any) => {
+  knowledgeGraphTitle.value = `${node.label} - 知识点脑图预览`
+  currentChapterId.value = node.key
+  isShowKnowledgeGraphPreview.value = true
+}
+
+const handleShowCourseKnowledgeGraph = () => {
+  knowledgeGraphTitle.value = '课程知识点脑图预览'
+  currentChapterId.value = ''
+  isShowKnowledgeGraphPreview.value = true
+}
 </script>
 <template>
   <AppCard :title="isEditCourse === '1' ? '编辑课程' : '新建课程'">
@@ -374,13 +393,16 @@ const isShowKnowledgeDialog = ref(false)
       <el-button
         type="primary"
         round
-        style="margin-bottom: 20px"
+        style="margin-bottom: 20px; margin-right: 10px"
         @click="handleAddChapter"
         v-permission="'v1-course-create-chapter'"
         >添加章</el-button
       >
+      <el-button type="primary" round style="margin-bottom: 20px" @click="handleShowCourseKnowledgeGraph"
+        >知识点脑图</el-button
+      >
       <div class="course_tip">
-        温馨提示：先建“章”，后建“小节”；课程资源关联到小节；能够关联的资源包含：视频、作业、考试、直播、其他资料、教案、课件。
+        温馨提示：先建"章"，后建"小节"；课程资源关联到小节；能够关联的资源包含：视频、作业、考试、直播、其他资料、教案、课件。
       </div>
     </el-row>
     <el-tree
@@ -466,6 +488,10 @@ const isShowKnowledgeDialog = ref(false)
               <el-icon><Plus /></el-icon>
               &nbsp; 添加小节
             </el-button>
+            <el-button class="btn_operate" v-if="data.depth === '1'" @click="handleShowKnowledgeGraph(node, data)">
+              <el-icon><Plus /></el-icon>
+              &nbsp; 知识点脑图
+            </el-button>
             <template v-if="data.depth === '2'">
               <el-button
                 class="btn_operate"
@@ -607,8 +633,17 @@ const isShowKnowledgeDialog = ref(false)
     v-model="isShowKnowledgeDialog"
     @create="handleFresh"
     :chapterName="chapterName"
-    :chapterID="chapterID"
+    :chapterId="chapterID"
+    :courseId="id"
+    :parentId="parentID"
     v-if="isShowKnowledgeDialog === true" />
+  <!-- 知识图谱预览 -->
+  <KnowledgeGraphPreview
+    v-if="isShowKnowledgeGraphPreview === true"
+    v-model:isShowKnowledgeGraphPreview="isShowKnowledgeGraphPreview"
+    :courseId="id"
+    :chapterId="currentChapterId"
+    :title="knowledgeGraphTitle" />
 </template>
 
 <style>

src/modules/course/my/views/Preview.vue

@@ -15,13 +15,13 @@ const id = route.query.id as string
 const activeTab = ref('study')
 const tabList = [
   { label: '学习', name: 'study' },
-  { label: '论坛', name: 'forum' },
-  { label: '大作业', name: 'homework' },
-  { label: '考试', name: 'exam' },
-  { label: '课程教务', name: 'affair' },
-  { label: '直播', name: 'live' },
-  { label: '资料', name: 'material' },
-  { label: '数字教材', name: 'ebook' },
+  // { label: '论坛', name: 'forum' },
+  // { label: '大作业', name: 'homework' },
+  // { label: '考试', name: 'exam' },
+  // { label: '课程教务', name: 'affair' },
+  // { label: '直播', name: 'live' },
+  // { label: '资料', name: 'material' },
+  // { label: '数字教材', name: 'ebook' },
 ]
 
 // 简介/目标切换