```

feat(LearningSystem): 为学习笔记组件添加富文本编辑器对话框

- 在xuxibiji.vue组件中添加BlockNoteEditorDialog引用
- 为添加按钮添加点击事件openAddDialog以打开对话框
- 导入BlockNoteEditorDialog组件并添加到模板中
- 实现openAddDialog方法用于打开富文本编辑器对话框
```

src/components/BlockNoteEditorDialog.vue

@@ -0,0 +1,46 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    title="编辑学习笔记"
+    width="800"
+  >
+    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
+      <el-form-item label="笔记名称" prop="title">
+        <el-input v-model="form.title" placeholder="请输入笔记名称" />
+      </el-form-item>
+      <el-form-item label="笔记内容" prop="content">
+        <BlockNoteEditor v-model="form.content" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button type="primary" @click="submitForm">保存</el-button>
+      <el-button @click="dialogVisible = false">取消</el-button>
+    </template>
+  </el-dialog>
+</template>
+<script setup>
+import BlockNoteEditor from '@/components/BlockNoteEditor.vue'
+import { ref, reactive } from 'vue'
+
+
+
+const dialogVisible = ref(false)
+const form = reactive({
+  title: '',
+  content: ''
+})
+const rules = {
+  title: [{ required: true, message: '请输入笔记名称', trigger: 'blur' }],
+  content: [{ required: true, message: '请输入笔记内容', trigger: 'blur' }]
+}
+const submitForm = async () => {
+  
+};
+const openDialog = () => {
+  dialogVisible.value = true
+};
+
+defineExpose({
+  openDialog
+});
+</script>

src/pages/LearningSystem/components/xuxibiji.vue

@@ -2,7 +2,7 @@
   <div class="xuxibiji">
     <div class="font_size18 bold">{{$t('common.xuxibiji')}}</div>
     <div class="addBtn flex-center gradient border_radius_16">
-      <div class="gap10">
+      <div class="gap10" @click="openAddDialog">
         <img :src="addIcon" alt="" style="width:30px;height:30px">
         <span class="font_size18">{{$t('common.add')}}{{$t('common.xuxibiji')}}</span>
       </div>
@@ -30,10 +30,12 @@
       :current-page="searchFom.pageNum"
       @page-change="handlePageChange"
     />
+    <BlockNoteEditorDialog ref="blockNoteEditorDialogRef" />
   </div>
 </template>
 <script setup>
 import addIcon from '@/assets/imgs/add.png'
+import BlockNoteEditorDialog from '@/components/BlockNoteEditorDialog.vue'
 import Pagination from '@/components/Pagination.vue'
 import { getCourseList } from '@/api/course.js'
 import { ref, onMounted,reactive } from 'vue'
@@ -74,6 +76,11 @@ const getList = async (type) => {
   //   list.value = res.rows
   // }
 };
+// 打开添加对话框
+const blockNoteEditorDialogRef = ref(null)
+const openAddDialog = () => {
+  blockNoteEditorDialogRef.value.openDialog();
+};
 
 </script>
 <style scoped lang="scss">