feat(image): 实现 Markdown 图片文件名同步

- 新增 ImageName 实体类和对应的 Mapper- 在 MarkdownFileService 中添加图片文件名同步方法
- 优化 HomePage 组件，支持实时预览 Markdown 内容
- 新增 MarkdownImageExtractor 工具类，用于提取 Markdown 中的图片文件名

biji-qianduan/src/components/HomePage.vue

@@ -64,7 +64,7 @@
               </el-dropdown>
             </div>
           </el-header>
-          <div v-if="!showEditor" v-html="previewHtml" class="markdown-preview"></div>
+          <div v-if="!showEditor" :key="selectedFile.id" class="markdown-preview"></div>
           <!-- Vditor 编辑器 -->
           <div v-show="showEditor" id="vditor" class="vditor" />
         </div>
@@ -350,7 +350,6 @@ const imageUrls = ref([]);
 const originalImages = ref([]);
 
 const vditor = ref(null);
-const previewHtml = ref('');
 const saveStatus = ref('空闲');
 let debounceTimer = null;
 
@@ -559,35 +558,22 @@ const renderMenu = (item) => {
 
 // 选择文件预览
 const previewFile = async (file) => {
-  if (file.id === null){
-    editData.value=file
-    selectedFile.value=null
+  if (file.id === null) {
+    editData.value = file;
+    selectedFile.value = null;
     return;
   }
   try {
-    const response = await Preview(file.id)
-
-    // 确保内容为字符串
-    const content = String(response.data || '');
-    
+    const response = await Preview(file.id);
+    const content = String(response || '');
     selectedFile.value = {
       ...file,
       content: content
     };
-    await nextTick();
-    const previewElement = document.querySelector('.markdown-preview');
-    if (previewElement) {
-      Vditor.preview(previewElement, content, {
-        // 在这里提供一个基本的配置对象
-        mode: 'light', // 或者 'dark'，可以根据当前主题动态设置
-        hljs: {
-          enable: true,
-          style: 'github'
-        }
-      });
-    }
+    showEditor.value = false; // 确保进入预览模式
   } catch (error) {
     ElMessage.error('获取笔记内容失败: ' + error.message);
+    selectedFile.value = null;
   }
 };
 
@@ -993,6 +979,23 @@ watch(activeMenu, (newVal) => {
   }
 });
 
+watch([selectedFile, showEditor], ([newFile, newShowEditor]) => {
+  if (newFile && !newShowEditor) {
+    nextTick(() => {
+      const previewElement = document.querySelector('.markdown-preview');
+      if (previewElement) {
+        Vditor.preview(previewElement, newFile.content, {
+          mode: 'light',
+          hljs: {
+            enable: true,
+            style: 'github'
+          }
+        });
+      }
+    });
+  }
+}, { deep: true });
+
 const handleToggleRegistration = async (value) => {
   try {
     await toggleRegistration(value);