feat(qianduan): 实现 Markdown 文件的更新功能

- 新增 updateMarkdown API 接口，用于更新 Markdown 文件内容
- 在 HomePage 组件中集成 Markdown 编辑器，支持文件编辑和保存
- 优化 MarkdownEditor 组件，支持内容预览和编辑切换
- 更新后端 MarkdownController，增加文件更新相关处理

biji-houdaun/src/main/java/com/test/bijihoudaun/controller/MarkdownController.java

@@ -67,10 +67,10 @@ public class MarkdownController {
     })
     @PostMapping("/{id}")
     public R<MarkdownFile> updateMarkdown(
-            @PathVariable Long id,
-            @RequestBody String content) {
-
-        MarkdownFile file = markdownFileService.updateMarkdownContent(id, content);
+            @PathVariable String id,
+             String content) {
+        long l = Long.parseLong(id);
+        MarkdownFile file = markdownFileService.updateMarkdownContent(l, content);
 
         if (file != null) {
             return R.success(file);

biji-qianduan/src/api/CommonApi.js

@@ -10,9 +10,6 @@ export const markdownAll = () => axiosApi.get(`/api/markdown`);
 // 预览markdown文件
 export const Preview = (id) => axiosApi.get(`/api/markdown/${id}`);
 
-
-
-
 // 创建分类分组
 export const addGroupings = (name) => {
     const formData = new FormData()
@@ -23,7 +20,16 @@ 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'
+        }
+    })
+}
 
 
 // MD5哈希

biji-qianduan/src/components/HomePage.vue

@@ -48,11 +48,22 @@
           <div class="preview-header">
             <h2>{{ selectedFile.title }}</h2>
             <div class="actions">
-              <el-button type="primary" @click="editNote(selectedFile)">编辑</el-button>
-              <el-button type="danger" @click="deleteNote(selectedFile)">删除</el-button>
+              <el-button v-if="!showEditor"  type="primary" @click="selectedFile=null">清空</el-button>
+              <el-button v-if="!showEditor"  type="primary" @click="editNote(selectedFile)">编辑</el-button>
+              <el-button v-if="!showEditor"  type="danger" @click="deleteNote(selectedFile)">删除</el-button>
+              <el-button v-if="showEditor"  type="primary" @click="showEditor=!showEditor;selectFile(editData)">返回</el-button>
+              <el-button  v-if="showEditor" type="success" @click="handleSave(editData.content)">保存</el-button>
             </div>
           </div>
-          <v-md-preview :text="selectedFile.content" class="markdown-preview"></v-md-preview>
+          <v-md-preview v-if="!showEditor" :text="selectedFile.content" class="markdown-preview"></v-md-preview>
+          <!-- Markdown编辑器 -->
+          <v-md-editor
+              v-if="showEditor"
+              v-model="editData.content"
+              height="500px"
+              @upload-image="handleImageUpload"
+              @save="handleSave"
+          ></v-md-editor>
         </div>
         
         <div v-else>
@@ -117,34 +128,21 @@
         <el-button type="primary" @click="createNote">确定</el-button>
       </template>
     </el-dialog>
-
-    <!-- Markdown编辑器 -->
-    <markdown-editor 
-      v-if="showEditor" 
-      :file-id="currentFileId"
-      @close="showEditor = false"
-      @saved="handleNoteSaved"
-    />
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue';
 import { ElMessage } from 'element-plus';
-import MarkdownEditor from '@/components/MarkdownEditor.vue';
-import VMdPreview from '@kangc/v-md-editor/lib/preview';
 import '@kangc/v-md-editor/lib/style/preview.css';
-import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
 import '@kangc/v-md-editor/lib/theme/style/github.css';
-import {groupingId, groupingAll, markdownAll, addGroupings, Preview} from '@/api/CommonApi.js'
+import {groupingId, groupingAll, markdownAll, addGroupings, Preview, updateMarkdown} from '@/api/CommonApi.js'
 import {DArrowRight} from "@element-plus/icons-vue";
 
-VMdPreview.use(githubTheme);
 const markdownFiles = ref([]);
 const groupings = ref([]);
 const groupFiles = ref({});
 const showEditor = ref(false);
-const currentFileId = ref(null);
 const selectedFile = ref(null);
 const activeMenu = ref('all');
 const isCollapsed = ref(false);
@@ -153,6 +151,9 @@ const showCreateNoteDialog = ref(false);
 const newGroupForm = ref({ name: '' });
 const newNoteForm = ref({ title: '', groupingId: null });
 
+const editData=ref(null)
+
+
 // 获取所有分组
 const fetchGroupings = async () => {
   try {
@@ -246,6 +247,7 @@ const createNote = async () => {
 
 // 选择文件预览
 const selectFile = async (file) => {
+  console.log( file)
   try {
     const response = await Preview(file.id)
 
@@ -271,10 +273,25 @@ const selectFile = async (file) => {
 
 // 编辑笔记
 const editNote = (file) => {
-  currentFileId.value = file.id;
+  editData.value = file
   showEditor.value = true;
 };
 
+const handleImageUpload=()=>{
+  console.log(666)
+}
+
+// 在编辑页面，按Ctrl+S保存笔记，或者点击保存，对数据进行保存
+const handleSave= async (file) => {
+  const filesRes = await updateMarkdown(editData.value.id,file);
+  if (filesRes.code===200){
+    ElMessage.success(filesRes.msg);
+    await chushihua()
+  }else {
+    ElMessage.error(filesRes.msg);
+  }
+}
+
 // 笔记保存后处理
 const handleNoteSaved = () => {
   showEditor.value = false;
@@ -350,9 +367,13 @@ const handleMarkdownUpload = (file) => {
 };
 
 onMounted(() => {
-  fetchMarkdownFiles();
-  fetchGroupings();
+  chushihua()
 });
+
+const  chushihua = async () => {
+  await fetchMarkdownFiles();
+  await fetchGroupings();
+}
 </script>
 
 <style scoped>

biji-qianduan/src/components/MarkdownEditor.vue

@@ -4,10 +4,10 @@
       <el-input v-model="title" placeholder="标题" class="title-input" />
       <el-input v-model="fileName" placeholder="文件名" class="file-input" />
     </div>
-    
-    <v-md-editor 
+
+    <v-md-editor
       v-model="content" 
-      height="500px" 
+      height="500px"
       :disabled-menus="[]"
       @upload-image="handleImageUpload"
     ></v-md-editor>
@@ -20,6 +20,8 @@
 </template>
 
 <script>
+import MarkdownEditor from '@/components/MarkdownEditor.vue';
+import VMdPreview from '@kangc/v-md-editor/lib/preview';
 import { ref } from 'vue';
 import { ElMessage } from 'element-plus';
 import axios from 'axios';
@@ -113,7 +115,8 @@ export default {
       content,
       saveMarkdown,
       previewMarkdown,
-      handleImageUpload
+      handleImageUpload,
+      MarkdownEditor
     };
   }
 };