231 lines
8.0 KiB
Markdown
231 lines
8.0 KiB
Markdown
我来先查看一下这个项目的具体实现，然后为你设计一个完整的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: |