侧边栏样式调整

src/App.vue

@@ -209,7 +209,7 @@ listen("menu-event", (event) => {
       />
 
       <!-- Right: Editor area -->
-      <main class="flex-1 flex flex-col overflow-y-auto p-3">
+      <main class="flex-1 flex flex-col overflow-y-auto">
           <MarkdownEditor
             v-model="content"
             placeholder="输入 Markdown 内容... 支持标题、粗体、斜体、代码块等 ✨"

src/components/DirectorySidebar.vue

@@ -44,7 +44,7 @@ const rootEntry = computed<DirEntry | null>(() => {
 });
 
 // ---- sidebar view mode ----
-type ViewMode = "folder" | "search" | "outline";
+type ViewMode = "folder" | "search" | "outline" | "setting";
 const activeView = ref<ViewMode>("folder");
 const expanded = ref(true);
 
@@ -124,7 +124,7 @@ const showSettings = ref(false);
       <!-- ===== Settings ===== -->
       <button
           class="p-2 rounded-md transition-colors mt-auto"
-          :class="activeView === 'outline' ? 'text-[#bf6a3b] bg-[#ede8de]' : 'text-[#b8b3a8] hover:text-[#5c574e] hover:bg-[#ede8de]'"
+          :class="activeView === 'setting' ? 'text-[#bf6a3b] bg-[#ede8de]' : 'text-[#b8b3a8] hover:text-[#5c574e] hover:bg-[#ede8de]'"
           title="设置"
           @click="showSettings = true"
       >

src/components/MarkdownEditor.vue

@@ -64,157 +64,8 @@ watch(
 
 <template>
   <div
-    class="flex flex-col flex-1 w-full border border-[#e0dbcf] bg-white shadow-2xl overflow-hidden"
+    class="flex flex-col flex-1 w-full border-[#e0dbcf] bg-white shadow-2xl overflow-y-auto"
   >
-    <!-- Toolbar -->
-    <div
-      v-if="editor"
-      class="flex flex-wrap items-center gap-0.5 px-3 py-2 border-b border-[#e0dbcf] bg-[#f4f1eb]/80 backdrop-blur"
-    >
-      <!-- Headings -->
-      <button
-        v-for="level in ([1, 2, 3] as const)"
-        :key="'h' + level"
-        :class="[
-          'px-2.5 py-1.5 text-xs font-semibold rounded-md transition-colors',
-          editor.isActive('heading', { level })
-            ? 'bg-[#bf6a3b] text-white'
-            : 'text-[#5c574e] hover:bg-[#e0dbcf] hover:text-[#38342e]',
-        ]"
-        @click="editor.chain().focus().toggleHeading({ level }).run()"
-      >
-        H{{ level }}
-      </button>
-
-      <span class="w-px h-6 bg-[#d4cfc4] mx-1" />
-
-      <!-- Inline formatting -->
-      <button
-        :class="[
-          'px-2.5 py-1.5 text-xs font-medium rounded-md transition-colors',
-          editor.isActive('bold')
-            ? 'bg-[#bf6a3b] text-white'
-            : 'text-[#5c574e] hover:bg-[#e0dbcf] hover:text-[#38342e]',
-        ]"
-        @click="editor.chain().focus().toggleBold().run()"
-      >
-        <i class="ri-bold"></i>
-      </button>
-      <button
-        :class="[
-          'px-2.5 py-1.5 text-xs font-medium rounded-md transition-colors',
-          editor.isActive('italic')
-            ? 'bg-[#bf6a3b] text-white'
-            : 'text-[#5c574e] hover:bg-[#e0dbcf] hover:text-[#38342e]',
-        ]"
-        @click="editor.chain().focus().toggleItalic().run()"
-      >
-        <i class="ri-italic"></i>
-      </button>
-      <button
-        :class="[
-          'px-2.5 py-1.5 text-xs font-medium rounded-md transition-colors',
-          editor.isActive('strike')
-            ? 'bg-[#bf6a3b] text-white'
-            : 'text-[#5c574e] hover:bg-[#e0dbcf] hover:text-[#38342e]',
-        ]"
-        @click="editor.chain().focus().toggleStrike().run()"
-      >
-        <i class="ri-strikethrough"></i>
-      </button>
-      <button
-        :class="[
-          'px-2.5 py-1.5 text-xs font-medium rounded-md transition-colors',
-          editor.isActive('code')
-            ? 'bg-[#bf6a3b] text-white'
-            : 'text-[#5c574e] hover:bg-[#e0dbcf] hover:text-[#38342e]',
-        ]"
-        @click="editor.chain().focus().toggleCode().run()"
-      >
-        <i class="ri-code-line"></i>
-      </button>
-
-      <span class="w-px h-6 bg-[#d4cfc4] mx-1" />
-
-      <!-- Block elements -->
-      <button
-        :class="[
-          'px-2.5 py-1.5 text-xs font-medium rounded-md transition-colors',
-          editor.isActive('blockquote')
-            ? 'bg-[#bf6a3b] text-white'
-            : 'text-[#5c574e] hover:bg-[#e0dbcf] hover:text-[#38342e]',
-        ]"
-        @click="editor.chain().focus().toggleBlockquote().run()"
-      >
-        <i class="ri-double-quotes-l"></i>
-      </button>
-      <button
-        :class="[
-          'px-2.5 py-1.5 text-xs font-medium rounded-md transition-colors',
-          editor.isActive('codeBlock')
-            ? 'bg-[#bf6a3b] text-white'
-            : 'text-[#5c574e] hover:bg-[#e0dbcf] hover:text-[#38342e]',
-        ]"
-        @click="editor.chain().focus().toggleCodeBlock().run()"
-      >
-        <i class="ri-code-box-line"></i>
-      </button>
-
-      <span class="w-px h-6 bg-[#d4cfc4] mx-1" />
-
-      <!-- Lists -->
-      <button
-        :class="[
-          'px-2.5 py-1.5 text-xs font-medium rounded-md transition-colors',
-          editor.isActive('bulletList')
-            ? 'bg-[#bf6a3b] text-white'
-            : 'text-[#5c574e] hover:bg-[#e0dbcf] hover:text-[#38342e]',
-        ]"
-        @click="editor.chain().focus().toggleBulletList().run()"
-      >
-        <i class="ri-list-unordered"></i>
-      </button>
-      <button
-        :class="[
-          'px-2.5 py-1.5 text-xs font-medium rounded-md transition-colors',
-          editor.isActive('orderedList')
-            ? 'bg-[#bf6a3b] text-white'
-            : 'text-[#5c574e] hover:bg-[#e0dbcf] hover:text-[#38342e]',
-        ]"
-        @click="editor.chain().focus().toggleOrderedList().run()"
-      >
-        <i class="ri-list-ordered"></i>
-      </button>
-
-      <span class="w-px h-6 bg-[#d4cfc4] mx-1" />
-
-      <!-- Horizontal rule -->
-      <button
-        class="px-2.5 py-1.5 text-xs font-medium rounded-md text-[#5c574e] hover:bg-[#e0dbcf] hover:text-[#38342e] transition-colors"
-        @click="editor.chain().focus().setHorizontalRule().run()"
-      >
-        <i class="ri-separator"></i>
-      </button>
-
-      <span class="flex-1" />
-
-      <!-- Undo / Redo -->
-      <button
-        class="px-2.5 py-1.5 text-xs font-medium rounded-md text-[#5c574e] hover:bg-[#e0dbcf] hover:text-[#38342e] transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
-        :disabled="!editor.can().chain().focus().undo().run()"
-        @click="editor.chain().focus().undo().run()"
-      >
-        <i class="ri-arrow-go-back-line"></i>
-      </button>
-      <button
-        class="px-2.5 py-1.5 text-xs font-medium rounded-md text-[#5c574e] hover:bg-[#e0dbcf] hover:text-[#38342e] transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
-        :disabled="!editor.can().chain().focus().redo().run()"
-        @click="editor.chain().focus().redo().run()"
-      >
-        <i class="ri-arrow-go-forward-line"></i>
-      </button>
-    </div>
-
     <!-- Editor content -->
     <EditorContent :editor="editor" class="tiptap-editor flex-1 flex flex-col" />
   </div>