markdown/PRD.md at 00a7e919f7db95aa4212d0f922bd1895a3f3459c

6.5 KiB

Raw Blame History

1. 产品概述

这是一个基于 uTools 平台的 Markdown 编辑器插件，提供本地 Markdown 文件的管理、编辑、预览和 Git 集成功能。用户可以在 uTools 中直接打开、编辑和预览 Markdown 文件，享受类似 Typora 的编辑体验。

产品主要解决开发者和写作者在本地管理和编辑 Markdown 文件时的效率问题，通过集成文件树、实时预览、搜索、Git 操作等功能，提供一站式的 Markdown 文档处理解决方案。

2. 核心功能

2.1 功能模块

本 Markdown 编辑器插件包含以下主要功能页面：

主编辑界面: 文件树导航、多标签页编辑器、实时预览面板
搜索界面: 文件内容搜索、文件名搜索、搜索结果展示
导出界面: HTML/PDF 导出、水印配置
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 文件编辑流程

用户选择本地文件夹，插件加载文件树结构
用户在文件树中点击 Markdown 文件
右侧创建新的标签页，加载文件内容，同时显示实时预览
用户可在多个打开的文件间切换标签页
用户编辑内容，预览面板实时更新
用户可切换源码/预览模式
编辑完成后文件自动保存
文件关闭时从标签页中移除

3.2 首页标签流程

插件启动时默认显示首页标签
首页显示最近打开的 Markdown 文件列表（最多10个）
首页显示置顶的 Markdown 文件列表
用户点击最近打开或置顶的文件，打开对应标签页
置顶状态通过右键菜单控制，配置保存在当前目录的 .md-helper.json 文件中

3.3 图片处理流程

用户在编辑器中粘贴图片
插件检测粘贴内容包含图片
自动创建以当前 MD 文件名命名的文件夹
图片以时间戳命名并保存到该文件夹
在 Markdown 中自动生成正确的图片引用路径

3.3 搜索流程

用户输入搜索关键词，选择搜索类型（内容/文件名）
插件扫描目标文件或目录
显示搜索结果列表，包含文件路径和匹配内容预览
用户点击搜索结果，跳转到对应文件并定位到匹配位置

3.4 Git 操作流程

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 标准

6.5 KiB Raw Blame History Unescape Escape