yidaima_tools/docs/编辑器.md

我来先查看一下这个项目的具体实现，然后为你设计一个完整的Python实现方案。 基于对 doocs/md 项目的分析，我为你设计了一个完整的 Python 实现方案。这是一个桌面端微信 Markdown 编辑器，包含你要求的所有功能。

技术选型建议

GUI 框架: 推荐使用 PyQt6/PySide6 或 Tkinter + CustomTkinter

• PyQt6: 功能强大，适合复杂应用
• CustomTkinter: 现代化外观，开发快速

Markdown 渲染:

• markdown + pygments (代码高亮)
• 或直接嵌入 WebEngine 用 JavaScript 渲染

---

完整提示词 (Prompt)

# 微信 Markdown 编辑器 - Python 桌面应用开发

## 项目概述
使用 Python 开发一个仿照 https://github.com/doocs/md 的微信 Markdown 编辑器桌面应用。支持实时预览、多主题切换、自定义样式，专为微信公众号排版优化。

## 技术栈要求
- **GUI 框架**: PyQt6 (推荐) 或 CustomTkinter
- **Markdown 解析**: markdown + pymdownx 扩展 + pygments
- **预览引擎**: QWebEngineView (PyQt6) 或 WebView (Tkinter)
- **配置存储**: JSON 配置文件
- **代码高亮**: Pygments (支持 100+ 主题)

## 核心功能模块

### 1. 编辑器界面布局

┌─────────────────────────────────────────────────────────────┐ │ 菜单栏: 文件 | 编辑 | 格式 | 主题 | 设置 | 帮助 │ ├──────────────────┬──────────────────┬───────────────────────┤ │ │ │ │ │ Markdown │ 预览/手机 │ 设置面板 │ │ 编辑区 │ 模拟预览 │ (可折叠) │ │ (左侧) │ (中间) │ (右侧) │ │ │ │ │ │ - 行号显示 │ - 微信样式渲染 │ - 主题选择 │ │ - 语法高亮 │ - 手机框模拟 │ - 字体设置 │ │ - 自动保存 │ - 一键复制HTML │ - 代码块主题 │ │ │ │ - 自定义CSS │ └──────────────────┴──────────────────┴───────────────────────┘

### 2. 必须实现的功能清单

#### A. 主题系统
- [ ] **预设主题** (至少5个):
  - 默认主题 (类似微信默认)
  - 优雅主题 (简约商务风)
  - 科技主题 (暗色代码风格)
  - 文艺主题 (衬线字体)
  - 节日主题 (可切换配色)
- [ ] **主题色自定义**: 主色调、强调色、背景色选择器
- [ ] **实时预览**: 切换主题即时生效

#### B. 字体设置
- [ ] **正文字体**: 提供系统字体列表选择
- [ ] **标题字体**: 可独立设置或跟随正文
- [ ] **代码字体**: 等宽字体选择 (推荐: Consolas, Fira Code, JetBrains Mono)
- [ ] **字号调节**: 正文字号 (12px-20px), 标题相对比例

#### C. 代码块样式
- [ ] **Mac 风格代码块开关**: 是否显示 macOS 窗口控制按钮 (红黄绿圆点)
- [ ] **代码主题选择**: 
  - 亮色主题: default, github, vs, xcode
  - 暗色主题: monokai, dracula, one-dark, nord
- [ ] **代码行号显示**: 可选开启/关闭
- [ ] **代码复制按钮**: 悬浮显示复制图标

#### D. 自定义 CSS
- [ ] **CSS 编辑器**: 内置代码编辑器输入自定义样式
- [ ] **实时生效**: 输入 CSS 即时预览效果
- [ ] **导入/导出**: 支持保存为 .css 文件
- [ ] **重置功能**: 一键恢复默认样式

#### E. 微信专用功能
- [ ] **微信样式重置**: 自动添加微信兼容性 CSS
- [ ] **图片处理**: 支持本地图片转 Base64 或图床上传
- [ ] **一键复制**: 生成适合粘贴到公众号后台的 HTML
- [ ] **手机预览**: 模拟 iPhone 界面预览效果

### 3. 详细界面组件

#### 设置面板 (右侧抽屉/面板)
```python
settings_panel = {
    "外观设置": {
        "主题选择": ["下拉菜单", "预设主题列表"],
        "主题色": ["颜色选择器", "支持十六进制输入"],
        "自定义主题": ["保存当前配置为新主题", "删除自定义主题"]
    },
    "字体设置": {
        "正文字体": ["系统字体下拉框", "中文字体优先"],
        "正文字号": ["滑块: 12-20px", "数字输入框"],
        "标题字体": ["同正文/独立选择", "复选框"],
        "标题缩放": ["滑块: 1.0-2.0倍"],
        "代码字体": ["等宽字体列表"]
    },
    "代码块设置": {
        "Mac风格": ["开关按钮", "控制是否显示三个圆点"],
        "代码主题": ["下拉菜单", "按亮/暗分类"],
        "显示行号": ["开关"],
        "代码背景": ["颜色选择", "圆角设置"]
    },
    "高级设置": {
        "自定义CSS": ["文本编辑区", "语法高亮"],
        "导入CSS": ["文件选择按钮"],
        "导出配置": ["保存当前所有设置"],
        "重置默认": ["确认后恢复出厂设置"]
    }
}

4. 数据结构设计

# 配置文件结构 (config.json)
{
    "version": "1.0.0",
    "editor": {
        "font_family": "PingFang SC, Microsoft YaHei",
        "font_size": 14,
        "auto_save": true,
        "auto_save_interval": 30
    },
    "preview": {
        "theme": "default",  # 当前主题ID
        "custom_themes": [
            {
                "id": "custom_1",
                "name": "我的主题",
                "primary_color": "#07C160",
                "background": "#ffffff",
                "text_color": "#333333",
                "css_override": "..."
            }
        ],
        "font": {
            "body": "PingFang SC",
            "heading": "PingFang SC",
            "code": "Consolas",
            "body_size": 16,
            "heading_scale": 1.3
        },
        "code_block": {
            "mac_style": true,
            "theme": "github",
            "line_numbers": false,
            "background": "#f6f8fa",
            "border_radius": 6
        },
        "custom_css": "/* 用户自定义CSS */"
    },
    "recent_files": ["path/to/file1.md", "path/to/file2.md"]
}

5. 核心类设计

# 主要类结构
class WechatMarkdownEditor(QMainWindow):
    """主窗口"""
    def __init__(self):
        self.editor = MarkdownEditor()      # 编辑区
        self.preview = PreviewWidget()      # 预览区
        self.settings = SettingsPanel()     # 设置面板
        self.theme_manager = ThemeManager() # 主题管理器

class ThemeManager:
    """主题管理"""
    def load_themes(self) -> List[Theme]
    def apply_theme(self, theme_id: str)
    def save_custom_theme(self, theme: Theme)
    def export_css(self, theme: Theme) -> str

class PreviewGenerator:
    """预览生成器"""
    def markdown_to_html(self, md_content: str) -> str
    def apply_wechat_style(self, html: str) -> str
    def inject_custom_css(self, html: str, css: str) -> str
    def generate_mac_code_block(self, code: str, lang: str) -> str

6. 微信样式 CSS 模板

/* 微信文章基础样式 */
.wechat-article {
    max-width: 677px;
    margin: 0 auto;
    padding: 20px;
    font-family: {{body_font}};
    font-size: {{body_size}}px;
    line-height: 1.8;
    color: #333;
    background: #fff;
}

/* Mac 风格代码块 */
.mac-code-block {
    position: relative;
    background: #f6f8fa;
    border-radius: 6px;
    padding: 16px;
    margin: 1em 0;
}

.mac-code-block::before {
    content: "● ● ●";
    color: #ff5f56 #ffbd2e #27c93f;
    letter-spacing: 4px;
    font-size: 12px;
    position: absolute;
    top: 10px;
    left: 12px;
}

/* 代码高亮主题变量 */
.code-theme-{{theme_name}} {
    --bg: {{code_bg}};
    --text: {{code_text}};
    --keyword: {{keyword_color}};
    --string: {{string_color}};
    --comment: