feat(note): 新增笔记创建和编辑功能

- 实现了笔记创建和编辑的前端逻辑
- 更新了相关的后端接口和数据库操作
- 优化了分组获取和展示逻辑
-调整了 Markdown 文件更新接口

biji-qianduan/src/api/CommonApi.js

@@ -21,14 +21,8 @@ export const addGroupings = (name) => {
     })
 }
 //更新Markdown文件
-export const  updateMarkdown = (id, data) => {
-    const formData = new FormData()
-    if (data) formData.append('content', data)
-    return axiosApi.post(`/api/markdown/${id}`, formData, {
-        headers: {
-            'Content-Type': 'multipart/form-data'
-        }
-    })
+export const  updateMarkdown = (data) => {
+    return axiosApi.post(`/api/markdown/updateMarkdown`, data)
 }
 // 批量删除图片
 export const deleteImages = (list) => {

biji-qianduan/src/components/HomePage.vue

@@ -99,7 +99,14 @@
     <!-- 分类创建对话框 -->
     <el-dialog v-model="showCreateGroupDialog" title="新建分类" width="30%">
       <el-form :model="newGroupForm" label-width="80px">
-        <el-form-item label="分类名称">
+        <el-switch v-model="isGroup1" active-text="一级分类" inactive-text="二级分类" style="margin-bottom: 20px;margin-left:30%" />
+        <el-form-item label="一级名称">
+          <el-input v-model="newGroupForm.name" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="一级名称">
+          <el-input v-model="newGroupForm.name" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item  v-if="!isGroup1"  label="二级名称">
           <el-input v-model="newGroupForm.name" autocomplete="off"></el-input>
         </el-form-item>
       </el-form>
@@ -115,12 +122,22 @@
         <el-form-item label="笔记标题">
           <el-input v-model="newNoteForm.title" autocomplete="off"></el-input>
         </el-form-item>
+        <el-form-item label="选择大分类">
+          <el-select v-model="fenlei1" :change="getjb2()" placeholder="请选择">
+        <el-option
+            v-for="item in groupings"
+            :key="item.id"
+            :label="item.grouping"
+            :value="item.id"
+        />
+          </el-select>
+        </el-form-item>
         <el-form-item label="选择分类">
           <el-select v-model="newNoteForm.groupingId" placeholder="请选择">
             <el-option
-              v-for="group in groupings"
+              v-for="group in fenlei2"
               :key="group.id"
-              :label="group.name"
+              :label="group.grouping"
               :value="group.id"
             ></el-option>
           </el-select>
@@ -150,7 +167,11 @@ import {
 } from '@/api/CommonApi.js'
 import {DArrowRight} from "@element-plus/icons-vue";
 
-
+const isGroup1=ref(true)
+// 创建新文件中大分类的信息
+const fenlei1=ref(null)
+// 创建新文件中分类信息
+const fenlei2=ref(null)
 const markdownFiles = ref([]);
 const groupings = ref([]);
 // 二级分类下的markdown文件
@@ -162,22 +183,36 @@ const isCollapsed = ref(false);
 const showCreateGroupDialog = ref(false);
 const showCreateNoteDialog = ref(false);
 const newGroupForm = ref({ name: '' });
-const newNoteForm = ref({ title: '', groupingId: null });
-
+const newNoteForm = ref({
+  id: null,
+  title: '',
+  groupingId: null ,
+  fileName: '',
+  content: ''
+});
+// 创建新笔记的多级菜单
+const options=ref([])
+// 编辑笔记的数据
 const editData=ref(null)
-
 // 笔记中的所有图片url
 const imageUrls = ref([]);
 // 刚开始笔记中的所有图片url
 const originalImages = ref([]);
-
+// 分类为二级的数据
 const jb22=ref([])
 
+// 创建md文件时通过大分类获取二级分类
+const getjb2 = async () => {
+  if (fenlei1.value != null) {
+    const response = await groupingAll(fenlei1.value)
+    fenlei2.value=response.data
+  }
+}
+
 // 获取所有分组
 const fetchGroupings = async () => {
   try {
-    const response = await groupingAll(0)
-
+    const response = await groupingAll("")
     const jb1 = []
     const jb2 = []
     for (let i = 0; i <response.data.length; i++) {
@@ -189,6 +224,15 @@ const fetchGroupings = async () => {
     }
     groupings.value=jb1
     jb22.value=jb2
+    for (let i = 0; i < jb1.length; i++){
+      jb1[i].children=[]
+      options.value.push(jb1[i])
+      for (let j = 0; j < jb2.length; j++) {
+        if (+jb2[j].parentId===+jb1[i].id){
+          options.value[i].children.push(jb2[i])
+        }
+      }
+    }
   } catch (error) {
     console.error('获取分组失败:', error);
     ElMessage.error('获取分组失败: ' + (error.response?.data?.message || error.message));
@@ -237,20 +281,13 @@ const createGrouping = async () => {
 
 // 创建新笔记
 const createNote = async () => {
-  // TODO 添加笔记创建逻辑
   try {
-    await axios.post(`${API_BASE_URL}/api/markdown`, '# 新笔记内容', {
-      params: {
-        groupingId: newNoteForm.value.groupingId,
-        title: newNoteForm.value.title,
-        fileName: newNoteForm.value.title
-      }
-    });
-    
-    ElMessage.success('笔记创建成功');
-    showCreateNoteDialog.value = false;
-    newNoteForm.value = { title: '', groupingId: null };
-    await chushihua()
+    newNoteForm.value.fileName = newNoteForm.value.title+'.md'
+    editData.value=newNoteForm.value
+    console.log(editData.value)
+    showCreateNoteDialog.value = false
+    showEditor.value = true;
+    selectedFile.value=editData.value
   } catch (error) {
     ElMessage.error('创建笔记失败: ' + error.message);
   }
@@ -258,6 +295,11 @@ const createNote = async () => {
 
 // 选择文件预览
 const previewFile = async (file) => {
+  if (file.id === null){
+    editData.value=file
+    selectedFile.value=null
+    return;
+  }
   try {
     const response = await Preview(file.id)
 
@@ -313,7 +355,8 @@ const handleImageUpload=async (event, insertImage, files) => {
 const handleSave= async (file) => {
   imageUrls.value = extractImageUrls(file);
   extractDeletedImageUrls(imageUrls.value)
-  const filesRes = await updateMarkdown(editData.value.id,file);
+  editData.value.content = file
+  const filesRes = await updateMarkdown(editData.value);
   if (filesRes.code===200){
     ElMessage.success(filesRes.msg);
     await chushihua()