139 lines
6.5 KiB
Markdown
139 lines
6.5 KiB
Markdown
## 1. 产品概述
|
||
|
||
这是一个基于 uTools 平台的 Markdown 编辑器插件，提供本地 Markdown 文件的管理、编辑、预览和 Git 集成功能。用户可以在 uTools 中直接打开、编辑和预览 Markdown 文件，享受类似 Typora 的编辑体验。
|
||
|
||
产品主要解决开发者和写作者在本地管理和编辑 Markdown 文件时的效率问题，通过集成文件树、实时预览、搜索、Git 操作等功能，提供一站式的 Markdown 文档处理解决方案。
|
||
|
||
## 2. 核心功能
|
||
|
||
### 2.1 功能模块
|
||
|
||
本 Markdown 编辑器插件包含以下主要功能页面：
|
||
|
||
1. **主编辑界面**: 文件树导航、多标签页编辑器、实时预览面板
|
||
2. **搜索界面**: 文件内容搜索、文件名搜索、搜索结果展示
|
||
3. **导出界面**: HTML/PDF 导出、水印配置
|
||
4. **Git 操作界面**: 提交、推送、拉取等 Git 操作
|
||
|
||
**新增多标签页功能**: 右侧编辑区域支持多标签页管理，包含固定的首页标签和动态的文件标签页
|
||
|
||
### 2.2 页面详情
|
||
|
||
| 页面名称 | 模块名称 | 功能描述 |
|
||
|---------|---------|---------|
|
||
| 主编辑界面 | 文件树导航 | 显示本地文件夹结构，支持递归展开子目录，提供刷新按钮，可切换已选择的目录 |
|
||
| 主编辑界面 | 文件选择 | 点击文件树中的文件在右侧打开新标签页，支持打开多个文件 |
|
||
| 主编辑界面 | 多标签页管理 | 右侧编辑区域支持多标签页，包含固定首页和动态文件标签 |
|
||
| 主编辑界面 | 首页标签 | 显示最近打开的 Markdown 文件列表和置顶的文件列表 |
|
||
| 主编辑界面 | 文件置顶 | 在文件树中右键 Markdown 文件可选择置顶或取消置顶 |
|
||
| 主编辑界面 | Markdown 编辑器 | 支持直接编辑 Markdown 文件，提供源码模式和预览模式切换 |
|
||
| 主编辑界面 | 实时预览 | 编辑时实时渲染 Markdown 内容，支持同步滚动 |
|
||
| 主编辑界面 | 图片处理 | 支持粘贴图片自动保存到以当前 MD 文件命名的文件夹，图片文件名使用时间戳命名 |
|
||
| 搜索界面 | 内容搜索 | 支持在文件内容中搜索，支持正则表达式，可跳转到搜索结果位置 |
|
||
| 搜索界面 | 文件搜索 | 支持按文件名搜索，点击结果可直接打开对应文件 |
|
||
| 导出界面 | HTML 导出 | 将当前 Markdown 文件导出为 HTML 格式 |
|
||
| 导出界面 | PDF 导出 | 将当前 Markdown 文件导出为 PDF 格式，支持自定义水印内容 |
|
||
| Git 操作界面 | Git 状态检测 | 自动检测目录中是否存在 .git 文件夹 |
|
||
| Git 操作界面 | 提交操作 | 提供提交按钮，点击后弹出输入框输入提交信息 |
|
||
| Git 操作界面 | 推送拉取 | 支持 Git 推送和拉取操作 |
|
||
|
||
### 2.3 右键菜单功能
|
||
|
||
| 功能类型 | 功能描述 |
|
||
|---------|---------|
|
||
| 目录操作 | 右键目录可新增文件夹或文件 |
|
||
| 文件操作 | 右键文件可删除文件 |
|
||
| Markdown 文件操作 | 右键 Markdown 文件可置顶或取消置顶 |
|
||
| 文件夹操作 | 右键文件夹可删除文件夹 |
|
||
| 重命名 | 右键文件或文件夹可重命名 |
|
||
| 路径复制 | 可复制当前文件或目录的路径 |
|
||
| 资源管理器 | 可打开当前文件或目录所在的本地文件管理器 |
|
||
| 克隆复制 | 可复制克隆文件或目录，并添加 -copy 后缀 |
|
||
|
||
## 3. 核心流程
|
||
|
||
### 3.1 文件编辑流程
|
||
|
||
1. 用户选择本地文件夹，插件加载文件树结构
|
||
2. 用户在文件树中点击 Markdown 文件
|
||
3. 右侧创建新的标签页，加载文件内容，同时显示实时预览
|
||
4. 用户可在多个打开的文件间切换标签页
|
||
5. 用户编辑内容，预览面板实时更新
|
||
6. 用户可切换源码/预览模式
|
||
7. 编辑完成后文件自动保存
|
||
8. 文件关闭时从标签页中移除
|
||
|
||
### 3.2 首页标签流程
|
||
|
||
1. 插件启动时默认显示首页标签
|
||
2. 首页显示最近打开的 Markdown 文件列表（最多10个）
|
||
3. 首页显示置顶的 Markdown 文件列表
|
||
4. 用户点击最近打开或置顶的文件，打开对应标签页
|
||
5. 置顶状态通过右键菜单控制，配置保存在当前目录的 `.md-helper.json` 文件中
|
||
|
||
### 3.3 图片处理流程
|
||
|
||
1. 用户在编辑器中粘贴图片
|
||
2. 插件检测粘贴内容包含图片
|
||
3. 自动创建以当前 MD 文件名命名的文件夹
|
||
4. 图片以时间戳命名并保存到该文件夹
|
||
5. 在 Markdown 中自动生成正确的图片引用路径
|
||
|
||
### 3.3 搜索流程
|
||
|
||
1. 用户输入搜索关键词，选择搜索类型（内容/文件名）
|
||
2. 插件扫描目标文件或目录
|
||
3. 显示搜索结果列表，包含文件路径和匹配内容预览
|
||
4. 用户点击搜索结果，跳转到对应文件并定位到匹配位置
|
||
|
||
### 3.4 Git 操作流程
|
||
|
||
```mermaid
|
||
graph TD
|
||
A[检测Git仓库] --> B{存在.git文件夹?}
|
||
B -->|是| C[显示Git操作按钮]
|
||
B -->|否| D[隐藏Git功能]
|
||
C --> E[用户选择操作]
|
||
E --> F[提交]
|
||
E --> G[推送]
|
||
E --> H[拉取]
|
||
F --> I[输入提交信息]
|
||
I --> J[执行提交]
|
||
G --> K[执行推送]
|
||
H --> L[执行拉取]
|
||
```
|
||
|
||
## 4. 用户界面设计
|
||
|
||
### 4.1 设计风格
|
||
|
||
- **主色调**: 深蓝色 (#1890ff) 搭配白色背景，营造专业科技感
|
||
- **辅助色**: 浅灰色 (#f5f5f5) 用于背景分隔，深灰色 (#333) 用于文字
|
||
- **按钮样式**: 圆角矩形设计，主要操作为实心按钮，次要操作为线框按钮
|
||
- **字体**: 使用系统默认字体，编辑器区域使用等宽字体 (Consolas, Monaco)
|
||
- **布局**: 左侧固定宽度的文件树，右侧可调整的编辑器和预览面板
|
||
- **图标**: 使用简洁的线性图标，符合现代设计趋势
|
||
|
||
### 4.2 页面布局
|
||
|
||
| 页面模块 | 布局设计 | 交互元素 |
|
||
|---------|---------|---------|
|
||
| 文件树面板 | 左侧 250px 固定宽度，可折叠 | 文件夹图标、文件图标、右键菜单 |
|
||
| 编辑器区域 | 中间自适应区域，支持分屏 | 编辑工具栏、编辑区域、滚动条 |
|
||
| 预览区域 | 右侧可调整宽度，可隐藏 | 预览内容、同步滚动 |
|
||
| 顶部工具栏 | 固定顶部，包含主要操作 | 模式切换、搜索、导出、Git 操作 |
|
||
| 状态栏 | 底部固定，显示状态信息 | 当前文件、编码、行列号 |
|
||
|
||
### 4.3 响应式设计
|
||
|
||
- **桌面端**: 完整三栏布局（文件树+编辑器+预览）
|
||
- **平板端**: 文件树可折叠，编辑器和预览可切换显示
|
||
- **移动端**: 单栏布局，通过标签页切换不同功能模块
|
||
|
||
### 4.4 无障碍设计
|
||
|
||
- 所有交互元素支持键盘导航
|
||
- 提供清晰的焦点指示
|
||
- 使用语义化 HTML 标签
|
||
- 支持屏幕阅读器
|
||
- 颜色对比度符合 WCAG 2.1 AA 标准 |