mmkk/USAGE.md

# 🎯 Markdown编辑器使用指南

## 🚀 快速开始

### 1. 启动应用
```bash
# 使用清理版启动脚本
./start-clean.sh
```

### 2. 访问应用
打开浏览器访问：
- **前端界面**: http://localhost:3001
- **后端API**: http://localhost:5001

## 📋 功能概览

### ✅ 已验证可用功能

#### 1. 实时Markdown编辑
- ✅ 左侧编辑，右侧实时预览
- ✅ 支持基础Markdown语法
- ✅ 字数统计和行数显示
- ✅ 响应式设计

#### 2. 后端API服务
- ✅ Markdown解析器 (http://localhost:5001/api/parse)
- ✅ 文件管理系统 (http://localhost:5001/api/files)
- ✅ 正则表达式工具 (http://localhost:5001/api/regex)
- ✅ 健康检查 (http://localhost:5001/api/health)

#### 3. 支持的Markdown语法
- ✅ 标题 (# ## ###)
- ✅ 粗体和斜体 (**bold** *italic*)
- ✅ 代码块 (```code```)
- ✅ 列表 (- item)
- ✅ 链接和引用
- ✅ 数学公式 ($E=mc^2$)

## 🛠️ 使用步骤

### 步骤1：启动服务
```bash
cd /home/glowz/claude/mmkk
./start-clean.sh
```

### 步骤2：访问界面
打开浏览器访问 http://localhost:3001

### 步骤3：开始编辑
1. 在左侧编辑器输入Markdown内容
2. 右侧实时显示预览效果
3. 查看状态栏的字数和行数统计

## 🔧 API测试

### 测试Markdown解析
```bash
curl -X POST http://localhost:5001/api/parse \
  -H "Content-Type: application/json" \
  -d '{"content": "# Hello World\n\nThis is **bold** text."}'
```

### 测试文件列表
```bash
curl http://localhost:5001/api/files
```

### 测试正则替换
```bash
curl -X POST http://localhost:5001/api/regex/replace \
  -H "Content-Type: application/json" \
  -d '{"content": "hello world", "pattern": "hello", "replacement": "hi"}'
```

## 🎨 界面特色

- **专业外观**: 深色标题栏 + 浅色内容区
- **响应式设计**: 自适应不同屏幕尺寸
- **直观操作**: 清晰的编辑器和预览区域
- **实时反馈**: 即时显示字数和行数统计

## 🚨 常见问题解决

### 端口冲突
如果遇到端口被占用：
- **前端**: 自动使用3001端口
- **后端**: 自动使用5001端口

### 服务未启动
```bash
# 手动停止所有相关进程
pkill -f "python.*app.py"
pkill -f "vite"

# 重新启动
./start-clean.sh
```

## 📞 技术支持

- **前端**: React 18 + TypeScript + Vite
- **后端**: Python Flask + Flask-CORS
- **Markdown**: python-markdown库
- **数学公式**: KaTeX支持

## 🎯 下一步扩展

当前版本为基础工作版本，后续可扩展：
- 文件浏览器功能
- 正则表达式工具界面
- 主题切换
- 云存储集成
- 协作编辑功能

---

**🎉 应用已完全可用！立即访问 http://localhost:3001 开始编辑Markdown！**