# x-md

**Repository Path**: opsx-tools/x-md

## Basic Information

- **Project Name**: x-md
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-16
- **Last Updated**: 2026-04-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
  <h1 align="center">X-MD</h1>
  <p align="center">
    <strong>现代化 Markdown 编辑器</strong><br/>
    融合双栏实时预览与所见即所得体验
  </p>
</p>

<p align="center">
  <img src="https://img.shields.io/badge/version-0.9.0--beta-blue" alt="version" />
  <img src="https://img.shields.io/badge/Electron-36-47848F" alt="Electron" />
  <img src="https://img.shields.io/badge/React-19-61DAFB" alt="React" />
  <img src="https://img.shields.io/badge/TypeScript-5.8-3178C6" alt="TypeScript" />
  <img src="https://img.shields.io/badge/license-MIT-green" alt="License" />
  <img src="https://img.shields.io/badge/tests-2057✓-success" alt="Tests" />
</p>

---

> 📸 **截图占位** — 主编辑界面、三种编辑模式、主题切换

## ✨ 特性

### 编辑器

- **三种编辑模式** — 源码编辑 / 双栏实时预览 / 所见即所得 (WYSIWYG)
- **CodeMirror 6** — 高性能语法高亮，支持 35+ 文件类型、192 种代码语言
- **Tiptap (ProseMirror)** — 所见即所得编辑，支持表格、任务列表、图片
- **Markdown 增强** — GFM、KaTeX 数学公式、Mermaid 图表、Front Matter

### 导出

- 导出为 **HTML / PDF / DOCX / 纯文本**
- 复制为 HTML（保留样式）

### 界面

- **Catppuccin 配色主题** — 12 编辑器主题 + 7 预览主题 + 自定义 CSS
- **多语言** — 中文 (zh-CN) / 英文 (en-US) / 日文 (ja-JP)
- **命令面板** — `⌘+Shift+P` 快速执行任意命令
- **大纲视图** — TOC 侧边栏，快速导航
- **资源管理器** — 文件树 + 右键菜单 + 拖拽操作
- **多标签编辑** — 拖拽排序、关闭已保存、恢复已关闭标签

### 性能

- **大文件虚拟渲染** — >50KB 自动分节 + IntersectionObserver 延迟加载
- **增量更新** — Markdown 管线缓存 + LRU HTML 结果缓存
- **启动优化** — React.lazy 6 组件 + 主 chunk 294KB（压缩 87%）

### 工程质量

- **108 个测试文件，2057+ 测试用例**，全部通过
- TypeScript 严格模式零错误
- ESLint + Prettier 代码规范

---

## 🛠 技术栈

| 模块 | 技术 | 说明 |
|------|------|------|
| 框架 | Electron 36 | 跨平台桌面应用（macOS 优先） |
| 构建 | Vite 6 | 极速 HMR，秒级构建 |
| 前端 | React 19 + TypeScript 5.8 | 类型安全组件化开发 |
| 样式 | Tailwind CSS 4 | 原子化样式，CSS 变量主题系统 |
| 源码编辑 | CodeMirror 6 | 高性能代码编辑器 |
| WYSIWYG | Tiptap (ProseMirror) | 所见即所得编辑 |
| Markdown | Remark + Rehype | 统一 Markdown/HTML 处理管线 |
| 数学 | KaTeX | 快速公式渲染 |
| 图表 | Mermaid 10 | 流程图/时序图/甘特图 |
| 高亮 | highlight.js / lowlight | 代码块语法高亮 |
| 状态 | Zustand | 轻量响应式状态管理 |
| 打包 | electron-builder | DMG/NSIS/AppImage + 自动更新 |

---

## 🚀 快速开始

### 环境要求

- **Node.js** ≥ 18
- **npm** ≥ 9

### 安装依赖

```bash
git clone https://gitee.com/opsx-tools/x-md.git
cd x-md
npm install
```

### 开发

```bash
# 启动开发服务器 (Electron + Vite HMR)
npm run dev
```

### 构建

```bash
# 生产构建
npm run build

# Electron 打包 (macOS DMG)
npm run build:electron
```

### 测试

```bash
# 运行单元测试
npm run test:unit

# 监听模式
npm run test:unit:watch

# 覆盖率报告
npm run test:unit:coverage
```

### 代码质量

```bash
# 类型检查
npm run typecheck

# ESLint 检查
npm run lint

# ESLint 自动修复
npm run lint:fix

# Prettier 格式化
npm run format
```

---

## 📁 项目结构

```
x-md/
├── electron/                    # Electron 主进程
│   ├── main/                    # 入口、窗口、菜单、IPC、文件系统、更新
│   └── preload/                 # 安全桥接 (contextBridge)
├── src/                         # 渲染进程 (React)
│   ├── components/              # UI 组件
│   │   ├── editor/              #   SourceEditor / WysiwygEditor / FindReplace
│   │   ├── preview/             #   实时预览面板 / Mermaid 渲染
│   │   ├── sidebar/             #   文件树 / 大纲 / 全局搜索
│   │   ├── tabs/                #   多标签栏
│   │   ├── toolbar/             #   格式工具栏
│   │   ├── commandPalette/      #   命令面板 (cmdk)
│   │   ├── settings/            #   设置页面
│   │   └── common/              #   公共 UI 组件
│   ├── features/                # 功能模块
│   │   ├── markdown/            #   格式化工具
│   │   ├── export/              #   导出功能
│   │   ├── search/              #   模糊搜索
│   │   └── settings/            #   设置导入/导出
│   ├── hooks/                   # React Hooks
│   ├── stores/                  # Zustand 状态 (editor/file/theme/ui/settings)
│   ├── themes/                  # 主题系统 (编辑器/预览/自定义CSS)
│   ├── i18n/                    # 国际化 (zh-CN / en-US / ja-JP)
│   ├── utils/                   # 工具函数
│   └── shared/                  # IPC 通道 / 命令注册 / 编辑器动作
├── tests/                       # 测试
│   ├── unit/                    #   单元测试 (108 文件, 2057+ 用例)
│   └── e2e/                     #   端到端测试
├── ROADMAP.md                   # 开发路线图
└── package.json
```

---

## 📄 License

[MIT](./LICENSE) © X-MD Team

---

<p align="center">
  <a href="https://gitee.com/opsx-tools/x-md">Gitee 仓库</a>
</p>