feat: 新增知识点

package.json

@@ -19,7 +19,7 @@
     "axios": "^0.27.2",
     "blueimp-md5": "^2.19.0",
     "dayjs": "^1.11.3",
-    "echarts": "^5.3.2",
+    "echarts": "^5.6.0",
     "element-plus": "^2.2.9",
     "lodash-es": "^4.17.21",
     "pinia": "^2.0.14",
@@ -27,6 +27,7 @@
     "sortablejs": "^1.15.0",
     "video.js": "^7.19.2",
     "vue": "^3.2.37",
+    "vue-echarts": "^7.0.3",
     "vue-router": "^4.0.16"
   },
   "devDependencies": {

src/components/tinymce/Index.vue

@@ -6,8 +6,8 @@ import { getSignature, uploadFile } from '@/api/base'
 const props = defineProps({
   height: {
     type: Number,
-    default: 600
-  }
+    default: 600,
+  },
 })
 
 const ImageUploadHandler = (blobInfo: any) =>
@@ -26,7 +26,7 @@ const ImageUploadHandler = (blobInfo: any) =>
           signature,
           success_action_status: '200',
           file,
-          url: `${host}/${key}`
+          url: `${host}/${key}`,
         }
         uploadFile(params)
           .then((res: any) => {
@@ -58,12 +58,12 @@ const init = {
   quickbars_insert_toolbar: false,
   // style_formats: [{ title: '悬挂缩进', block: 'p', styles: { textIndent: '-2em', paddingLeft: '2em' } }],
   content_style: 'img {max-width:100%;}',
-  plugins: ['paste'],
-  paste_auto_cleanup_on_paste: true,
-  paste_remove_styles: true,
-  paste_remove_styles_if_webkit: true,
-  paste_strip_class_attributes: true,
-  paste_as_text: true
+  // plugins: ['paste'],
+  // paste_auto_cleanup_on_paste: true,
+  // paste_remove_styles: true,
+  // paste_remove_styles_if_webkit: true,
+  // paste_strip_class_attributes: true,
+  // paste_as_text: true,
 }
 </script>
 

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

+<script lang="ts" setup>
+import { ref, onMounted, nextTick } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Edit, Delete } from '@element-plus/icons-vue'
+import KnowledgeGraph from './KnowledgeGraph.vue'
+
+interface KnowledgeNode {
+  id: string
+  label: string
+  children?: KnowledgeNode[]
+  isEdit?: boolean
+  originalLabel?: string
+}
+
+const props = defineProps<{
+  chapterName: string
+  chapterID: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'create'): void
+}>()
+
+const activeName = ref('first')
+
+// 树形数据
+const treeData = ref<KnowledgeNode[]>([])
+const treeRef = ref()
+const inputRef = ref()
+
+// 获取localStorage key
+const getStorageKey = () => `knowledge_tree_${props.chapterID}`
+
+// 从localStorage加载数据
+const loadFromStorage = () => {
+  try {
+    const stored = localStorage.getItem(getStorageKey())
+    if (stored) {
+      treeData.value = JSON.parse(stored)
+    }
+  } catch (error) {
+    console.error('加载知识点数据失败:', error)
+    treeData.value = []
+  }
+}
+
+// 保存到localStorage
+const saveToStorage = () => {
+  try {
+    localStorage.setItem(getStorageKey(), JSON.stringify(treeData.value))
+  } catch (error) {
+    console.error('保存知识点数据失败:', error)
+    ElMessage.error('保存失败')
+  }
+}
+
+// 生成唯一ID
+const generateId = () => {
+  return Date.now().toString(36) + Math.random().toString(36).substr(2)
+}
+
+// 添加根节点
+const addRootNode = () => {
+  if (treeData.value.length > 0) {
+    ElMessage.warning('只能添加一个根节点')
+    return
+  }
+
+  const newNode = {
+    id: generateId(),
+    label: '新知识点',
+    children: [],
+    isEdit: true,
+  }
+
+  treeRef.value?.append(newNode)
+  treeRef.value?.setCurrentNode(newNode, true)
+
+  // 确保新节点可见并聚焦
+  nextTick(() => {
+    setTimeout(() => {
+      inputRef.value?.focus()
+      inputRef.value?.select()
+    }, 100)
+  })
+  saveToStorage()
+}
+
+// 添加子节点
+const addChildNode = (parentNode: KnowledgeNode) => {
+  const newNode: KnowledgeNode = {
+    id: generateId(),
+    label: '新知识点',
+    children: [],
+    isEdit: true,
+  }
+
+  treeRef.value?.append(newNode, parentNode)
+  treeRef.value?.setCurrentNode(newNode, true)
+
+  nextTick(() => {
+    setTimeout(() => {
+      inputRef.value?.focus()
+      inputRef.value?.select()
+    }, 100)
+  })
+  saveToStorage()
+}
+
+// 编辑节点
+const editNode = (node: KnowledgeNode) => {
+  // 保存原始值，用于取消时恢复
+  node.originalLabel = node.label
+  node.isEdit = true
+  nextTick(() => {
+    inputRef.value?.focus()
+    inputRef.value?.select()
+  })
+}
+
+// 保存编辑
+const saveEdit = (node: KnowledgeNode) => {
+  const trimmedLabel = node.label.trim()
+  if (!trimmedLabel) {
+    ElMessage.warning('知识点名称不能为空')
+    // 恢复原始值
+    if (node.originalLabel) {
+      node.label = node.originalLabel
+    }
+    return
+  }
+
+  // 检查是否有重复名称（同级节点）
+  const parent = findParentNode(treeData.value, node.id)
+  const siblings = parent ? parent.children : treeData.value
+
+  if (siblings) {
+    const duplicate = siblings.find((sibling) => sibling.id !== node.id && sibling.label.trim() === trimmedLabel)
+    if (duplicate) {
+      ElMessage.warning('同级节点中已存在相同名称的知识点')
+      inputRef.value?.focus()
+      inputRef.value?.select()
+      return
+    }
+  }
+
+  node.label = trimmedLabel
+  node.isEdit = false
+  delete node.originalLabel
+  saveToStorage()
+}
+
+// 取消编辑
+const cancelEdit = (node: KnowledgeNode) => {
+  // 恢复原始值
+  if (node.originalLabel) {
+    node.label = node.originalLabel
+    delete node.originalLabel
+  }
+  node.isEdit = false
+
+  // 如果是新节点且没有子节点，则删除
+  if (node.label === '新知识点' && (!node.children || node.children.length === 0)) {
+    deleteNode(node)
+  }
+}
+
+// 删除节点
+const deleteNode = async (node: KnowledgeNode) => {
+  try {
+    await ElMessageBox.confirm('确定要删除这个知识点吗？删除后其子知识点也会被删除。', '确认删除', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    treeRef.value?.remove(node)
+
+    saveToStorage()
+    ElMessage.success('删除成功')
+  } catch {
+    // 用户取消删除
+  }
+}
+
+// 处理键盘事件
+const handleKeydown = (event: KeyboardEvent, node: KnowledgeNode) => {
+  if (event.key === 'Enter') {
+    saveEdit(node)
+  } else if (event.key === 'Escape') {
+    cancelEdit(node)
+  }
+}
+
+// 查找父节点
+const findParentNode = (nodes: KnowledgeNode[], targetId: string): KnowledgeNode | null => {
+  for (const node of nodes) {
+    if (node.children) {
+      const found = node.children.find((child) => child.id === targetId)
+      if (found) {
+        return node
+      }
+      const parent = findParentNode(node.children, targetId)
+      if (parent) {
+        return parent
+      }
+    }
+  }
+  return null
+}
+
+onMounted(() => {
+  loadFromStorage()
+})
+</script>
+
+<template>
+  <el-dialog draggable width="800px" title="添加知识点" :model-value="true" @close="emit('update:modelValue', false)">
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="树状结构" name="first">
+        <div class="knowledge-tree-container">
+          <!-- 工具栏 -->
+          <div class="toolbar">
+            <div class="toolbar-left">
+              <el-button type="primary" @click="addRootNode" :icon="Plus"> 添加根节点 </el-button>
+            </div>
+            <div class="toolbar-tip">
+              <el-icon><Edit /></el-icon>
+              <span>提示：双击节点名称可直接编辑</span>
+            </div>
+          </div>
+
+          <!-- 树形结构 -->
+          <div class="tree-wrapper">
+            <el-tree
+              ref="treeRef"
+              node-key="id"
+              highlight-current
+              :data="treeData"
+              :expand-on-click-node="false"
+              :default-expand-all="false"
+              class="knowledge-tree">
+              <template #default="{ data }">
+                <div class="knowledge-tree-node" :data-node-id="data.id">
+                  <!-- 编辑模式 -->
+                  <div v-if="data.isEdit" class="edit-mode">
+                    <el-input
+                      v-model="data.label"
+                      size="small"
+                      placeholder="请输入知识点名称"
+                      maxlength="50"
+                      show-word-limit
+                      @keydown="(event: KeyboardEvent) => handleKeydown(event, data)"
+                      @blur="saveEdit(data)"
+                      ref="inputRef"
+                      style="width: 100%" />
+                  </div>
+
+                  <!-- 显示模式 -->
+                  <div v-else class="display-mode">
+                    <span class="node-label" @dblclick="editNode(data)">
+                      {{ data.label }}
+                    </span>
+                    <div class="node-actions">
+                      <el-button text size="small" :icon="Plus" @click="addChildNode(data)"> 添加 </el-button>
+                      <el-button text size="small" :icon="Edit" @click="editNode(data)"> 编辑 </el-button>
+                      <el-button text size="small" :icon="Delete" @click="deleteNode(data)"> 删除 </el-button>
+                    </div>
+                  </div>
+                </div>
+              </template>
+              <template #empty>
+                <el-empty description="暂无知识点，点击上方按钮添加根节点" />
+              </template>
+            </el-tree>
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="脑图预览" name="second" lazy>
+        <div style="width: 100%; height: 400px">
+          <KnowledgeGraph :treeData="treeData" />
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+
+    <template #footer>
+      <span>
+        <el-button @click="emit('update:modelValue', false)">取消</el-button>
+        <el-button type="primary" @click="emit('update:modelValue', false)">确定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.knowledge-tree-container {
+  min-height: 400px;
+}
+
+.toolbar {
+  margin-bottom: 16px;
+  padding: 12px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.toolbar-left {
+  display: flex;
+  gap: 12px;
+}
+
+.toolbar-tip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #909399;
+  font-size: 12px;
+}
+
+.tree-wrapper {
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  min-height: 300px;
+  position: relative;
+}
+
+.knowledge-tree {
+  padding: 16px;
+}
+
+.knowledge-tree-node {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 32px;
+}
+
+.edit-mode {
+  width: 100%;
+  padding: 8px;
+  border-radius: 4px;
+}
+
+.display-mode {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 8px 12px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.node-label {
+  flex: 1;
+  margin-right: 8px;
+  font-weight: 500;
+  color: #303133;
+  cursor: pointer;
+  padding: 2px 4px;
+  border-radius: 2px;
+  transition: background-color 0.2s;
+}
+
+.node-actions {
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.display-mode:hover .node-actions {
+  opacity: 1;
+}
+
+.empty-state {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* 覆盖 element-plus 树组件样式 */
+:deep(.el-tree-node__content) {
+  height: auto;
+  padding: 0;
+}
+
+:deep(.el-tree-node__expand-icon) {
+  margin-right: 8px;
+}
+
+:deep(.el-tree-node__label) {
+  width: 100%;
+}
+</style>

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

+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+import { use } from 'echarts/core'
+import VChart from 'vue-echarts'
+import { GraphChart } from 'echarts/charts'
+import { TitleComponent, TooltipComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+
+use([GraphChart, TitleComponent, TooltipComponent, CanvasRenderer])
+
+interface KnowledgeNode {
+  id: string
+  label: string
+  children?: KnowledgeNode[]
+}
+
+const props = defineProps<{ treeData: KnowledgeNode[] }>()
+const collapsedSet = ref<Set<string>>(new Set())
+const chartOption = ref({})
+
+function treeToGraph(tree: KnowledgeNode[]) {
+  const nodes: any[] = []
+  const links: any[] = []
+  function traverse(node: KnowledgeNode, parent: KnowledgeNode | null = null) {
+    nodes.push({
+      id: node.id,
+      name: node.label,
+      symbolSize: 50,
+      itemStyle: { color: collapsedSet.value.has(node.id) ? '#91cc75' : '#fac858' },
+    })
+    if (parent) {
+      links.push({
+        source: parent.id,
+        target: node.id,
+      })
+    }
+    if (!collapsedSet.value.has(node.id) && node.children) {
+      node.children.forEach((child) => traverse(child, node))
+    }
+  }
+  tree.forEach((root) => traverse(root))
+  return { nodes, links }
+}
+
+function updateOption() {
+  const { nodes, links } = treeToGraph(props.treeData)
+  chartOption.value = {
+    backgroundColor: '#222',
+    series: [
+      {
+        type: 'graph',
+        layout: 'force',
+        roam: true,
+        data: nodes,
+        links: links,
+        label: {
+          show: true,
+          color: '#fff',
+        },
+        force: {
+          repulsion: 200,
+          edgeLength: 100,
+        },
+        lineStyle: {
+          color: '#aaa',
+        },
+      },
+    ],
+  }
+}
+
+function onChartClick(params: any) {
+  if (params.dataType === 'node') {
+    const nodeId = params.data.id
+    if (collapsedSet.value.has(nodeId)) {
+      collapsedSet.value.delete(nodeId)
+    } else {
+      collapsedSet.value.add(nodeId)
+    }
+    updateOption()
+  }
+}
+
+watch(() => props.treeData, updateOption, { deep: true })
+onMounted(updateOption)
+</script>
+
+<template>
+  <VChart :option="chartOption" autoresize style="width: 100%; height: 100%" @click="onChartClick" />
+</template>

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

@@ -14,6 +14,7 @@ import VideoPlayDialog from '../components/stepTwoComponents/VideoPlayDialog.vue
 import AddChapterDialog from '../components/stepTwoComponents/AddChapterDialog.vue'
 import AddTextbookDialog from '../components/stepTwoComponents/AddTextbookDialog.vue'
 import AddGraphbookDialog from '../components/stepTwoComponents/AddGraphbookDialog.vue'
+import AddKnowledge from '../components/stepTwoComponents/AddKnowledge.vue'
 
 import OpenRules from '../components/stepTwoComponents/OpenRules.vue'
 const route = useRoute()
@@ -47,44 +48,48 @@ const flag = ref(false)
 const btnList = [
   {
     btn_name: '视频',
-    resource_type: '2'
+    resource_type: '2',
   },
   {
     btn_name: '课件',
-    resource_type: '10'
+    resource_type: '10',
   },
   {
     btn_name: '教案',
-    resource_type: '11'
+    resource_type: '11',
   },
   {
     btn_name: '资料',
-    resource_type: '4'
+    resource_type: '4',
   },
   {
     btn_name: '作业',
-    resource_type: '3'
+    resource_type: '3',
   },
   {
     btn_name: '考试',
-    resource_type: '9'
+    resource_type: '9',
   },
   {
     btn_name: '直播',
-    resource_type: '6'
+    resource_type: '6',
+  },
+  {
+    btn_name: '知识点',
+    resource_type: '999',
   },
   {
     btn_name: '关联数字教材',
-    resource_type: '13'
+    resource_type: '13',
   },
   {
     btn_name: '关联知识图谱',
-    resource_type: '14'
-  }
+    resource_type: '14',
+  },
 ]
 const defaultProps = {
   children: 'children',
-  label: 'name'
+  label: 'name',
 }
 
 // 获取章节列表
@@ -182,6 +187,8 @@ const handleAddDialog = (node: any, item: any, data: any) => {
     isShowTextbookDialog.value = true
   } else if (item.resource_type === '14') {
     isShowTextbookDialog2.value = true
+  } else if (item.resource_type === '999') {
+    isShowKnowledgeDialog.value = true
   }
 }
 //查阅
@@ -190,7 +197,7 @@ const handleConsult = (node: any) => {
 
   // 视频
   if (node.data.resource_type === '2') {
-    getVideoDetails({ id: node.data.resource_id }).then(res => {
+    getVideoDetails({ id: node.data.resource_id }).then((res) => {
       videoUrl.value = res.data.play_auth.play_info_list.filter((item: any) => item.Definition === 'SD')[0].PlayURL
       isShowVideoPlayDialog.value = true
     })
@@ -225,7 +232,7 @@ const handleDrop = (startNode: any, endNode: any, position: any) => {
       course_id: id,
       id: startNode.data.id,
       brother_id: endNode.data.id,
-      type: position
+      type: position,
     }
     dragChapterList(params).then(() => {
       handleChapterList()
@@ -340,7 +347,7 @@ const handleChangeStatus = (node: any, data: any) => {
       resource_type: node.data.resource_type,
       name: node.label,
       resource_id: node.data.resource_id,
-      can_download: node.can_download
+      can_download: node.can_download,
     }
     createCharacter(params).then(() => {
       ElMessage.success('设置下载控制成功')
@@ -351,13 +358,15 @@ const handleChangeStatus = (node: any, data: any) => {
       id: data.id,
       name: node.label,
       resource_id: node.data.resource_id,
-      can_download: node.data.can_download
+      can_download: node.data.can_download,
     }
     editCharacter(params).then(() => {
       ElMessage.success('设置下载控制成功')
     })
   }
 }
+
+const isShowKnowledgeDialog = ref(false)
 </script>
 <template>
   <AppCard :title="isEditCourse === '1' ? '编辑课程' : '新建课程'">
@@ -387,8 +396,7 @@ const handleChangeStatus = (node: any, data: any) => {
       @node-drop="handleDrop"
       style="min-width: 100%"
       @node-expand="handleNodeExpand"
-      @node-collapse="handleNodeCollapse"
-    >
+      @node-collapse="handleNodeCollapse">
       <!--  -->
       <template #default="{ node, data }">
         <span class="custom-tree-node">
@@ -450,8 +458,7 @@ const handleChangeStatus = (node: any, data: any) => {
               class="btn_operate"
               v-if="data.depth === '1' || data.depth === '2'"
               @click="handleOpenRules(node, data)"
-              v-permission="'v1-course-set-chapter-rules'"
-            >
+              v-permission="'v1-course-set-chapter-rules'">
               <el-icon><Plus /></el-icon>
               &nbsp; 开放规则
             </el-button>
@@ -464,8 +471,7 @@ const handleChangeStatus = (node: any, data: any) => {
                 class="btn_operate"
                 v-for="(item, index) in btnList"
                 :key="index"
-                @click="handleAddDialog(node, item, data)"
-              >
+                @click="handleAddDialog(node, item, data)">
                 <el-icon><Plus /></el-icon>
                 {{ item.btn_name }}
               </el-button>
@@ -479,8 +485,7 @@ const handleChangeStatus = (node: any, data: any) => {
                 node.data.resource_type !== '9' &&
                 node.data.resource_type !== '13' &&
                 node.data.resource_type !== '14'
-              "
-            >
+              ">
               <span class="btn_operate">学生下载控制：</span>
               <el-switch
                 class="btn_edit"
@@ -497,8 +502,7 @@ const handleChangeStatus = (node: any, data: any) => {
                 inactive-value="0"
                 inline-prompt
                 style="--el-switch-on-color: #aa1941"
-                @change="handleChangeStatus(node, data)"
-              ></el-switch>
+                @change="handleChangeStatus(node, data)"></el-switch>
             </template>
           </span>
         </span>
@@ -509,6 +513,7 @@ const handleChangeStatus = (node: any, data: any) => {
         >上一步</el-button
       >
       <el-button type="primary" @click="router.push('/course/my')">保存</el-button>
+      <el-button type="primary"><a :href="`/course/my/preview?id=${id}`" target="_blank">预览</a></el-button>
     </div>
   </AppCard>
   <!-- 更改资源名称 -->
@@ -520,8 +525,7 @@ const handleChangeStatus = (node: any, data: any) => {
     :chapterID="chapterID"
     :course_id="id"
     :sectionName="sectionName"
-    :resourceId="resourceId"
-  />
+    :resourceId="resourceId" />
   <!-- 添加章 -->
   <AddChapterDialog
     v-if="isShowDialog === true"
@@ -530,8 +534,7 @@ const handleChangeStatus = (node: any, data: any) => {
     :course_id="id"
     :isEdit="isEdit"
     :chapterID="chapterID"
-    :chapterName="chapterName"
-  />
+    :chapterName="chapterName" />
   <!-- 添加小节 -->
   <AddSectionDialog
     v-if="isShowSectionDialog === true"
@@ -541,8 +544,7 @@ const handleChangeStatus = (node: any, data: any) => {
     :chapterID="chapterID"
     :course_id="id"
     :isEdit="isEdit"
-    :sectionName="sectionName"
-  />
+    :sectionName="sectionName" />
   <!-- 添加直播 -->
   <AddLiveDialog
     v-if="isShowLiveDialog === true"
@@ -551,8 +553,7 @@ const handleChangeStatus = (node: any, data: any) => {
     :chapterName="chapterName"
     :chapterID="chapterID"
     :course_id="id"
-    :btnInfo="btnInfo"
-  />
+    :btnInfo="btnInfo" />
   <!-- 添加资源 -->
   <AddVideoDialog
     v-if="isShowAddDialog === true"
@@ -561,8 +562,7 @@ const handleChangeStatus = (node: any, data: any) => {
     :chapterName="chapterName"
     :chapterID="chapterID"
     :course_id="id"
-    :btnInfo="btnInfo"
-  />
+    :btnInfo="btnInfo" />
 
   <!-- 添加考试 -->
   <AddExamDialog
@@ -574,14 +574,12 @@ const handleChangeStatus = (node: any, data: any) => {
     :course_id="id"
     :btnInfo="btnInfo"
     :paper_use_list="paper_use_list"
-    :isMultiple="false"
-  />
+    :isMultiple="false" />
   <!-- 视频查阅弹框 -->
   <VideoPlayDialog
     v-if="isShowVideoPlayDialog === true"
     v-model:isShowVideoPlayDialog="isShowVideoPlayDialog"
-    :videoOptions="videoUrl"
-  />
+    :videoOptions="videoUrl" />
   <OpenRules
     v-model:isShowOpenRules="isShowOpenRules"
     v-if="isShowOpenRules === true"
@@ -590,24 +588,27 @@ const handleChangeStatus = (node: any, data: any) => {
     :chapterID="chapterID"
     :course_id="id"
     :controlInfo="controlInfo"
-    @create="handleFresh"
-  />
+    @create="handleFresh" />
   <AddTextbookDialog
     v-if="isShowTextbookDialog === true"
     v-model:isShowTextbookDialog="isShowTextbookDialog"
     @create="handleFresh"
     :chapterName="chapterName"
     :chapterID="chapterID"
-    :course_id="id"
-  />
+    :course_id="id" />
   <AddGraphbookDialog
     v-if="isShowTextbookDialog2 === true"
     v-model:isShowTextbookDialog2="isShowTextbookDialog2"
     @create="handleFresh"
     :chapterName="chapterName"
     :chapterID="chapterID"
-    :course_id="id"
-  />
+    :course_id="id" />
+  <AddKnowledge
+    v-model="isShowKnowledgeDialog"
+    @create="handleFresh"
+    :chapterName="chapterName"
+    :chapterID="chapterID"
+    v-if="isShowKnowledgeDialog === true" />
 </template>
 
 <style>