markdown/.trae/documents/预览页所见即所得编辑（Typora 风格）.md

目标效果

• 新增一个“所见即所得/预览编辑”模式：单栏展示（类似你图二），内容呈现为柔和的排版样式，同时可直接输入修改，最终落盘仍是 Markdown 文本。
• 输入 # / ## / ... 时，当前行在编辑区内立即呈现为 H1/H2… 的视觉样式（标题更大、分割线等），并弱化 # 标记的存在感。
• 头部提供一排快捷按钮（加粗/斜体/删除线/行内代码/引用/列表/H1-H3/链接），一键对选中文本或当前行应用对应 Markdown 语法。

现状定位（已确认）

• 预览是 Preview.vue 用 markdown-it 渲染到 v-html，天然不可编辑。
• 编辑器是 Editor.vue 基于 CodeMirror 6。
• 模式切换在 FileTab.vue（源码/分屏/预览）。

技术方案（不引入新依赖，基于现有 CodeMirror 6 实现“近似 Typora”）

• 新增组件 LivePreviewEditor.vue（或 WysiwygEditor.vue）：内部仍是 CodeMirror，但通过“行级装饰 + 主题样式”让 Markdown 在编辑时呈现为更像渲染态的排版。
• 行级装饰（核心）：
  • 扫描每行文本，识别 ^#{1,6}\s+、^>\s+、无序/有序/任务列表等；
  • 对整行加 Decoration.line（例如 cm-md-h1 / cm-md-quote / cm-md-list），让整行的字号、间距、分隔线等看起来像图二。
  • 对语法标记部分（如 #、>、-、1.）加 Decoration.mark，把其颜色/透明度调低（“柔和”且弱存在感）。
  • 对 fenced code block（```）做简单状态机：在代码块内不做上述弱化，避免误伤代码内容。
• 高亮与软主题：
  • 复用现有 CSS 变量（--card-background/--text-color/--border-color/...），单独为 live 模式做一套更柔和的 EditorView.theme（行距、段落间距、标题线条更淡、代码块背景更柔）。

快捷按钮（头部工具条）

• LivePreviewEditor 顶部增加一个工具条（Ant Design Vue Button/Space/Divider）：
  • H1/H2/H3：对当前行前缀加 # / ## / ### （若已存在则替换层级）。
  • 加粗/斜体/删除线/行内代码：对选区做包裹（** / * / ~~ / `），无选区则插入成对标记并把光标放在中间。
  • 引用/列表：对当前行或多行统一加前缀（> 、- 、1. ）。
  • 链接：将选区变成 [text](url)，无选区则插入模板并定位光标到 url。
• 交互细节：按钮操作后保持焦点回到编辑器，不打断输入。

与现有模式的集成

• 扩展 FileTab.vue：
  • 在 RadioGroup 增加一个模式：value="live"（显示名：预览编辑 或 所见即所得）。
  • mode === 'live' 时只渲染 LivePreviewEditor 占满整个编辑区域；其他模式保持原行为不变。
  • LivePreviewEditor 使用同一个 v-model="localContent"，因此保存/dirty 逻辑无需改动。

复用与去重（顺手优化）

• 把现有 Editor.vue 的“粘贴图片并落盘插入 ![]()”逻辑抽成一个可复用方法（例如 useImagePaste(view, filePath, onChange)），让 live 模式也支持同样体验且避免重复代码。

验证方式

• 手工验证：
  • 切到“预览编辑”模式，输入 # 后输入文字，视觉立即呈现标题样式；切回源码模式仍看到标准 Markdown。
  • 点击工具条按钮，对选区应用加粗/标题/引用等，内容正确写回并可保存。
  • 粘贴图片：生成资源文件并插入相对路径语法，预览模式仍能正确展示（利用现有相对路径解析逻辑）。
• 构建校验：执行 npm run build 确认通过（项目规则要求）。

说明（范围与预期）

• 该方案实现的是“Markdown 文本 + 编辑时视觉接近渲染”的 Typora 风格体验；不会引入真正富文本编辑器（ProseMirror/Tiptap）与 HTML 作为存储格式，因此兼容现有文件与渲染链路。