diff --git a/src/components/EditorToolbar.vue b/src/components/EditorToolbar.vue
new file mode 100644
index 0000000..c7794e7
--- /dev/null
+++ b/src/components/EditorToolbar.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="editor-toolbar">
+    <a-space :size="4">
+      <!-- 标题 -->
+      <a-dropdown :trigger="['click']">
+        <a-button type="text" size="small" title="标题">
+          <template #icon><span style="font-weight: bold; font-size: 14px;">H</span></template>
+        </a-button>
+        <template #overlay>
+          <a-menu @click="({ key }) => triggerAction('heading', key)">
+            <a-menu-item :key="1"><span style="font-size: 1.6em; font-weight: bold;">H1 标题</span></a-menu-item>
+            <a-menu-item :key="2"><span style="font-size: 1.4em; font-weight: bold;">H2 标题</span></a-menu-item>
+            <a-menu-item :key="3"><span style="font-size: 1.2em; font-weight: bold;">H3 标题</span></a-menu-item>
+            <a-menu-item :key="4"><span style="font-size: 1.1em; font-weight: bold;">H4 标题</span></a-menu-item>
+            <a-menu-item :key="5"><span style="font-size: 1em; font-weight: bold;">H5 标题</span></a-menu-item>
+            <a-menu-item :key="6"><span style="font-size: 0.9em; font-weight: bold; color: var(--text-color-secondary);">H6 标题</span></a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+
+      <a-divider type="vertical" style="height: 1.2em; background-color: var(--border-color);" />
+
+      <!-- 文本样式 -->
+      <a-button type="text" size="small" @click="triggerAction('bold')" title="加粗 (Ctrl+B)">
+        <template #icon><BoldOutlined /></template>
+      </a-button>
+      <a-button type="text" size="small" @click="triggerAction('italic')" title="斜体 (Ctrl+I)">
+        <template #icon><ItalicOutlined /></template>
+      </a-button>
+      <a-button type="text" size="small" @click="triggerAction('strike')" title="删除线">
+        <template #icon><StrikethroughOutlined /></template>
+      </a-button>
+
+      <a-divider type="vertical" style="height: 1.2em; background-color: var(--border-color);" />
+
+      <!-- 引用与代码 -->
+      <a-button type="text" size="small" @click="triggerAction('quote')" title="引用">
+        <template #icon><MessageOutlined /></template>
+      </a-button>
+      <a-button type="text" size="small" @click="triggerAction('inlineCode')" title="行内代码">
+        <template #icon><CodeOutlined /></template>
+      </a-button>
+      <a-button type="text" size="small" @click="triggerAction('link')" title="链接">
+        <template #icon><LinkOutlined /></template>
+      </a-button>
+
+      <a-divider type="vertical" style="height: 1.2em; background-color: var(--border-color);" />
+
+      <!-- 列表 -->
+      <a-button type="text" size="small" @click="triggerAction('unorderedList')" title="无序列表">
+        <template #icon><UnorderedListOutlined /></template>
+      </a-button>
+      <a-button type="text" size="small" @click="triggerAction('orderedList')" title="有序列表">
+        <template #icon><OrderedListOutlined /></template>
+      </a-button>
+    </a-space>
+  </div>
+</template>
+
+<script setup>
+import { 
+  BoldOutlined,
+  ItalicOutlined,
+  StrikethroughOutlined,
+  CodeOutlined,
+  MessageOutlined,
+  UnorderedListOutlined,
+  OrderedListOutlined,
+  LinkOutlined
+} from '@ant-design/icons-vue';
+import { useEditor } from '../composables/useEditor';
+
+const { triggerAction } = useEditor();
+</script>
+
+<style scoped>
+.editor-toolbar {
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border-color);
+  background-color: var(--card-background);
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/LivePreviewEditor.vue b/src/components/LivePreviewEditor.vue
index b728cc0..1e140ed 100644
--- a/src/components/LivePreviewEditor.vue
+++ b/src/components/LivePreviewEditor.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="live-editor">
+    <EditorToolbar />
     <codemirror
       v-model="code"
       placeholder="请输入 Markdown 内容..."
-      :style="{ height: '100%', fontSize: 'var(--editor-font-size)' }"
+      :style="{ height: 'auto', flex: 1, fontSize: 'var(--editor-font-size)' }"
       :autofocus="true"
       :indent-with-tab="true"
       :tab-size="2"
@@ -25,6 +26,7 @@ import { attachImagePaste } from '../codemirror/imagePaste'
 import { useEditor } from '../composables/useEditor'
 import { useMarkdownActions } from '../composables/useMarkdownActions'
 import { useTabs } from '../composables/useTabs'
+import EditorToolbar from './EditorToolbar.vue'
 
 const props = defineProps({
   modelValue: String,