功能修复

src/components/MarkdownEditor.vue

@@ -13,12 +13,14 @@ const props = withDefaults(
     placeholder?: string;
     isFullWidth?: boolean;
     displayMode?: "split" | "wysiwyg";
+    previewOnly?: boolean;
   }>(),
   {
     modelValue: "",
     placeholder: "开始写作...",
     isFullWidth: false,
     displayMode: "split",
+    previewOnly: false,
   },
 );
 
@@ -62,6 +64,11 @@ watch(
   () => props.modelValue,
   (val) => {
     if (!isSingle.value) renderFullHtml(val);
+    // 切换文件时重置滚动位置到顶部
+    nextTick(() => {
+      if (previewRef.value) previewRef.value.scrollTop = 0;
+      if (splitTextareaRef.value) splitTextareaRef.value.scrollTop = 0;
+    });
   },
   { immediate: true },
 );
@@ -126,11 +133,17 @@ function escapeHtml(s: string): string {
     .replace(/>/g, ">");
 }
 
+const singlePaneRef = ref<HTMLDivElement>();
+
 // Watch modelValue → re-parse blocks in single mode
 watch(
   () => props.modelValue,
   (val) => {
     if (isSingle.value) parseBlocks(val);
+    // 切换文件时重置滚动位置到顶部
+    nextTick(() => {
+      if (singlePaneRef.value) singlePaneRef.value.scrollTop = 0;
+    });
   },
   { immediate: true },
 );
@@ -318,6 +331,7 @@ function onSplitScroll() {
     <!-- ════════════════ Single-pane: block editing ════════════════ -->
     <div
       v-if="isSingle"
+      ref="singlePaneRef"
       class="flex-1 overflow-auto p-8 pb-40"
       :style="{ fontSize: `calc(1rem * var(--editor-zoom, 1))` }"
     >
@@ -351,27 +365,33 @@ function onSplitScroll() {
         <!-- Rendered state (clickable) -->
         <div
           v-else
-          class="
-            markdown-preview block-render
-            cursor-text rounded
-            -mx-1 px-1 py-px
-            hover:bg-[#faf9f6] transition-colors
-          "
+          :class="[
+            'markdown-preview block-render py-px',
+            previewOnly ? '' : 'cursor-text rounded -mx-1 px-1 hover:bg-[#faf9f6] transition-colors',
+          ]"
           v-html="block.html"
-          @click="startEdit(block.id)"
+          @click="!previewOnly && startEdit(block.id)"
         />
       </template>
     </div>
 
     <!-- ════════════════ Split-pane mode ════════════════ -->
     <template v-else>
-      <div class="flex-1 min-w-0 border-r border-[#e0dbcf] flex flex-col">
+      <!-- Textarea column: smoothly collapses width on preview-only -->
+      <div
+        :class="[
+          'flex flex-col min-h-0 transition-[width,opacity] duration-300 ease-in-out',
+          previewOnly
+            ? 'w-0 overflow-hidden opacity-0 border-r-0'
+            : 'flex-1 min-w-0 border-r border-[#e0dbcf] opacity-100',
+        ]"
+      >
         <textarea
           ref="splitTextareaRef"
           :value="props.modelValue"
           :placeholder="props.placeholder"
           class="
-            flex-1 w-full resize-none bg-white p-8 pb-40 outline-none
+            flex-1 min-h-0 w-full resize-none bg-white p-8 pb-40 outline-none
             font-serif text-[#38342e] leading-relaxed
             placeholder:text-[#b8b3a8]
           "
@@ -382,9 +402,10 @@ function onSplitScroll() {
         />
       </div>
 
+      <!-- Preview column: smoothly expands to fill available space -->
       <div
         ref="previewRef"
-        class="flex-1 min-w-0 overflow-auto p-8 pb-40"
+        class="flex-1 min-w-0 min-h-0 overflow-auto p-8 pb-40 transition-[width] duration-300 ease-in-out"
         :style="{ fontSize: `calc(1rem * var(--editor-zoom, 1))` }"
       >
         <div v-if="renderError" class="text-red-500 text-sm">