切换markdown渲染为unified

src/components/DirectorySidebar.vue

@@ -16,11 +16,13 @@ const props = withDefaults(
       content?: string;
       currentFilePath?: string | null;
       isFullWidth?: boolean;
+      displayMode?: "split" | "wysiwyg";
     }>(),
     {
       content: "",
       currentFilePath: null,
       isFullWidth: false,
+      displayMode: "split",
     },
 );
 
@@ -32,6 +34,7 @@ const emit = defineEmits<{
   createFile: [];
   createFolder: [];
   toggleFullWidth: [value: boolean];
+  toggleDisplayMode: [value: "split" | "wysiwyg"];
 }>();
 
 // Wrap the workspace root as a top-level tree node
@@ -248,6 +251,33 @@ const showSettings = ref(false);
           </button>
         </div>
         <div class="px-4 py-6 space-y-5">
+          <!-- Display mode toggle -->
+          <div class="flex items-center justify-between">
+            <div class="flex-1 mr-3">
+              <p class="text-sm text-[#38342e] font-medium">编辑模式</p>
+              <p class="text-xs text-[#8c877d] mt-0.5 leading-relaxed">
+                {{ props.displayMode === "wysiwyg" ? "单栏：所见即所得，预览区直接编辑" : "双栏：左侧编辑源码，右侧预览效果" }}
+              </p>
+            </div>
+            <button
+              type="button"
+              role="switch"
+              :aria-checked="props.displayMode === 'wysiwyg'"
+              :class="[
+                'relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none',
+                props.displayMode === 'wysiwyg' ? 'bg-[#bf6a3b]' : 'bg-[#d4cfc4]',
+              ]"
+              @click="emit('toggleDisplayMode', props.displayMode === 'wysiwyg' ? 'split' : 'wysiwyg')"
+            >
+              <span
+                :class="[
+                  'pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm ring-0 transition-transform duration-200 ease-in-out',
+                  props.displayMode === 'wysiwyg' ? 'translate-x-4' : 'translate-x-0',
+                ]"
+              />
+            </button>
+          </div>
+
           <!-- Full-width mode toggle -->
           <div class="flex items-center justify-between">
             <div class="flex-1 mr-3">