Files
yidaima_tools/docs/编辑器.md

231 lines
8.0 KiB
Markdown
Raw Normal View History

2026-04-09 14:55:54 +08:00
我来先查看一下这个项目的具体实现然后为你设计一个完整的Python实现方案。
基于对 doocs/md 项目的分析,我为你设计了一个完整的 Python 实现方案。这是一个桌面端微信 Markdown 编辑器,包含你要求的所有功能。
## 技术选型建议
**GUI 框架**: 推荐使用 **PyQt6/PySide6****Tkinter + CustomTkinter**
- PyQt6: 功能强大,适合复杂应用
- CustomTkinter: 现代化外观,开发快速
**Markdown 渲染**:
- `markdown` + `pygments` (代码高亮)
- 或直接嵌入 `WebEngine` 用 JavaScript 渲染
---
## 完整提示词 (Prompt)
```markdown
# 微信 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. 数据结构设计
```python
# 配置文件结构 (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. 核心类设计
```python
# 主要类结构
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 模板
```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: