From 3d31989d4b4b4ccbe96457dbb75b07b78aa054cd Mon Sep 17 00:00:00 2001
From: cfq <cfq@qq.com>
Date: Mon, 26 Jan 2026 18:38:44 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E4=B8=BA=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E6=B7=BB=E5=8A=A0=E5=B7=A5=E5=85=B7=E6=A0=8F=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 EditorToolbar 组件，提供标题、文本样式、引用、代码、链接和列表等常用格式操作按钮
- 在 LivePreviewEditor 中集成工具栏，并调整编辑器样式以适配工具栏布局
---
 src/components/EditorToolbar.vue     | 85 ++++++++++++++++++++++++++++
 src/components/LivePreviewEditor.vue |  4 +-
 2 files changed, 88 insertions(+), 1 deletion(-)
 create mode 100644 src/components/EditorToolbar.vue

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,