# KitfoxMarkdown

**Repository Path**: kitfoxai/KitfoxMarkdown

## Basic Information

- **Project Name**: KitfoxMarkdown
- **Description**: 基于 Electron + React + Ant Design 的 Markdown 文件链接转换工具，帮助用户将本地资源文件转移到云存储，方便分享和上传到各种平台
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-23
- **Last Updated**: 2026-01-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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. **安装依赖**

```bash
cd vnode
npm install
```

2. **开发模式运行**

```bash
npm run dev
```

这将同时启动：
- React 开发服务器（端口 3000）
- Electron 应用
- 后端 API 服务器（端口 3001）

3. **构建生产版本**

```bash
# 构建 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**：跨平台桌面应用框架

## 📦 构建和打包

### 开发模式

```bash
npm run dev
```

### 构建 React 应用

```bash
npm run build
```

### 打包 Electron 应用

```bash
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` 常量

### 依赖安装问题

如果遇到依赖安装问题，尝试：
```bash
rm -rf node_modules package-lock.json
npm install
```

## 📄 许可证

MIT License

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！