KitfoxMarkdown - Electron 版本

基于 Electron + React + Ant Design 的 Markdown 文件链接转换工具。

📖 简介

这是 KitfoxMarkdown 的 Electron 版本，提供了现代化的桌面应用程序界面，使用 Ant Design 作为 UI 框架。

核心功能

• ✅ 自动识别本地资源：智能解析 Markdown，识别所有本地图片和文件链接
• ✅ 批量上传到 OSS：支持批量处理多个 Markdown 文件
• ✅ 链接自动替换：将本地路径替换为 OSS 链接，保持文档结构完整
• ✅ 文件去重机制：基于 MD5 哈希值，相同文件只上传一次
• ✅ 现代化 UI：使用 Ant Design 提供美观的用户界面
• ✅ 配置持久化：支持保存 OSS 配置，下次使用无需重复输入

🚀 快速开始

环境要求

• Node.js 16+
• npm 或 yarn

安装步骤

1. 安装依赖

cd vnode
npm install

2. 开发模式运行

npm run dev

这将同时启动：

• React 开发服务器（端口 3000）
• Electron 应用
• 后端 API 服务器（端口 3001）

3. 构建生产版本

# 构建 React 应用
npm run build

# 构建 Electron 应用
npm run build:electron

📁 项目结构

vnode/
├── main.js                 # Electron 主进程
├── preload.js              # 预加载脚本
├── package.json            # 项目配置
├── server/                 # 后端 API 服务器
│   └── index.js           # Express 服务器
├── src/                    # React 前端源码
│   ├── App.js             # 主应用组件
│   ├── components/        # UI 组件
│   │   ├── FileSelector.js
│   │   ├── OSSConfig.js
│   │   ├── ProcessPanel.js
│   │   └── LogPanel.js
│   └── utils/             # 工具函数
│       └── api.js         # API 调用
└── public/                # 静态资源
    └── index.html

🎯 使用说明

1. 配置 OSS

在"OSS配置"面板中填写：

• AccessKey ID
• AccessKey Secret
• Endpoint（如：https://oss-cn-hangzhou.aliyuncs.com）
• Bucket 名称
• （可选）基础路径（如：markdown-files/）

点击"保存配置"保存设置。

2. 选择文件

• 点击"添加文件"选择要处理的 Markdown 文件（支持多选）
• 选择输出目录

3. 处理文件

• 点击"开始处理"按钮开始批量处理
• 可以在"处理日志"面板查看处理进度和结果
• 处理完成后，点击"打开输出目录"查看生成的文件

🛠️ 技术栈

前端

• React 18：UI 框架
• Ant Design 5：UI 组件库
• React Scripts：构建工具

后端

• Node.js：运行时环境
• Express：Web 框架
• oss2：阿里云 OSS SDK

桌面应用

• Electron：跨平台桌面应用框架

📦 构建和打包

开发模式

npm run dev

构建 React 应用

npm run build

打包 Electron 应用

npm run build:electron

打包后的文件在 dist-electron 目录。

🔧 配置说明

配置文件保存在应用目录下的 config.json，包含 OSS 相关配置。

📝 API 接口

后端 API 服务器运行在 http://localhost:3001，提供以下接口：

• GET /api/config - 获取配置
• POST /api/config - 保存配置
• POST /api/preview - 预览文件
• POST /api/process - 处理文件

🐛 故障排除

端口冲突

如果端口 3000 或 3001 被占用，可以修改：

• React 开发服务器端口：在 package.json 中设置 PORT 环境变量
• 后端 API 端口：修改 server/index.js 中的 PORT 常量

依赖安装问题

如果遇到依赖安装问题，尝试：

rm -rf node_modules package-lock.json
npm install

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！