feat(image): 添加图片删除功能并优化 Markdown 编辑器

- 在 ImageController 中添加删除图片的接口
- 在 ImageService 中实现删除图片和批量更新图片 ID 的方法
- 在前端集成复制代码插件并优化 Markdown 编辑器配置
- 修复后端分组相关接口的参数类型问题
This commit is contained in:
ikmkj
2025-06-20 09:35:19 +08:00
parent df848fed23
commit 12ba82eaa1
8 changed files with 145 additions and 27 deletions

View File

@@ -49,13 +49,18 @@
<h2>{{ selectedFile.title }}</h2>
<div class="actions">
<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="primary" @click="editNote(selectedFile);isCollapsed=true">编辑</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 v-if="!showEditor" :text="selectedFile.content" class="markdown-preview"></v-md-preview>
<v-md-preview
v-if="!showEditor"
:text="selectedFile.content"
class="markdown-preview"
@copy-code-success="handleCopyCodeSuccess"
></v-md-preview>
<!-- Markdown编辑器 -->
<v-md-editor
v-if="showEditor"
@@ -63,6 +68,8 @@
height="500px"
@upload-image="handleImageUpload"
@save="handleSave"
:disabled-menus="[]"
@copy-code-success="handleCopyCodeSuccess"
></v-md-editor>
</div>
@@ -139,6 +146,8 @@ import '@kangc/v-md-editor/lib/theme/style/github.css';
import {groupingId, groupingAll, markdownAll, addGroupings, Preview, updateMarkdown} from '@/api/CommonApi.js'
import {DArrowRight} from "@element-plus/icons-vue";
const markdownFiles = ref([]);
const groupings = ref([]);
const groupFiles = ref({});
@@ -154,6 +163,8 @@ const newNoteForm = ref({ title: '', groupingId: null });
const editData=ref(null)
// 获取所有分组
const fetchGroupings = async () => {
try {
@@ -197,6 +208,10 @@ const fetchGroupings = async () => {
}
};
const handleCopyCodeSuccess = () => {
ElMessage.success('代码已复制到剪贴板');
};
// 获取所有Markdown文件确保ID为字符串
const fetchMarkdownFiles = async () => {
try {
@@ -277,8 +292,17 @@ const editNote = (file) => {
showEditor.value = true;
};
const handleImageUpload=()=>{
console.log(666)
const handleImageUpload=(event,insertImage,files)=>{
console.log(files)
// 插入图片
insertImage({
// 图片地址
url:
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1269952892,3525182336&fm=26&gp=0.jpg'
// 图片描述
// desc: '七龙珠',
});
}
// 在编辑页面按Ctrl+S保存笔记或者点击保存对数据进行保存