Update README with terminal, Pan mode and shell commands

2026-03-19 00:00:39 +08:00
parent 48499b697c
commit 0a5d5d7dc8
1 changed files with 95 additions and 49 deletions
--- a/README.md
+++ b/README.md
@@ -1,89 +1,135 @@
-# md_reader
+# MD Reader

-A simple Markdown reader with Mermaid diagram support.
+Markdown 文件閱讀器，支援 Mermaid 圖表、PDF 匯出，原生視窗預覽。

-## Features
-
- Render Markdown to HTML
- Batch convert Markdown files
- HTTP server for serving files
- **Mermaid diagram support** with SVG export
- Preview in browser
- Export to PDF via browser print
-
-## Installation
+## 安裝

 ```bash
 cargo build --release
 ```

-## Usage
+## 功能

-### Render a single file
+### 1. Markdown 轉 HTML

 ```bash
-md_reader render document.md -o output.html
+./target/release/md_reader render docs/example.md
+# 輸出到 ~/docs/html/example.html
 ```

-### Batch convert
+### 2. 原生視窗預覽

 ```bash
-md_reader batch ./docs/ -o ./html/
+./target/release/md_reader preview docs/example.md
 ```

-### Start HTTP server
+### 3. 批次轉換

 ```bash
-md_reader server -p 8080 -d ./docs/
+./target/release/md_reader batch ./docs
 ```

-### Preview in browser
+### 4. PDF 匯出

 ```bash
-md_reader preview document.md
+./target/release/md_reader export docs/example.md -o output.pdf
+# 或使用 render -p
+./target/release/md_reader render docs/example.md -p
 ```

-### Export to PDF
+### 5. HTTP 伺服器

 ```bash
-# Method 1: Using export command
-md_reader export document.md -o output.html
-
-# Method 2: Using render with -p flag
-md_reader render document.md -p
+./target/release/md_reader server --port 8080 --path ./docs
 ```

-Open the exported HTML file in browser, then use **File > Print > Save as PDF**.
+## 視窗功能

-## Mermaid Support
+### 工具列按鈕

-md_reader supports rendering Mermaid diagrams in Markdown files.
+| 按鈕 | 功能 |
+|------|------|
+| Print / Save as PDF | 列印或儲存為 PDF |
+| Download All SVGs | 下載所有 Mermaid 圖表為 SVG |
+| Pan | 滑鼠拖曳平移內容 |
+| − / + | 縮小 / 放大 |
+| Reset | 重置縮放為 100% |

-### Usage
+### 終端機命令

-Use `mermaid` code blocks:
+按 `/` 開啟終端輸入框。

-```markdown
+| 命令 | 功能 |
+|------|------|
+| `/help` | 顯示幫助訊息 |
+| `/clear` | 清除終端輸出 |
+| `/print` | 開啟列印對話框 |
+| `/svg` | 下載所有 SVG 圖表 |
+| `/reload` | 重新載入頁面 |
+| `/zoom [N]` | 設定縮放 (50-200%) |
+| `/zoom in` 或 `/zoom +` | 放大 10% |
+| `/zoom out` 或 `/zoom -` | 縮小 10% |
+| `/zoom reset` 或 `/zoom 0` | 重置為 100% |
+
+### Shell 命令
+
+直接輸入 shell 命令（不帶 `/`）執行：
+
+```bash
+ls                    # 列出檔案
+pwd                   # 顯示目前目錄
+cd <dir>              # 切換目錄
+cat <file>            # 顯示檔案內容
+```
+
+### Pan 模式
+
+1. 點擊工具列的 `Pan` 按鈕
+2. 按住滑鼠左鍵拖曳移動內容
+3. 再次點擊 `Pan` 按鈕關閉
+
+### 快捷鍵
+
+| 按鍵 | 功能 |
+|------|------|
+| `/` | 開啟終端輸入框 |
+| `Esc` | 關閉終端輸入框 |
+
+## Mermaid 圖表支援
+
+在 Markdown 中使用 ```mermaid 程式碼塊：
+
+````markdown
 ```mermaid
 graph TD
    A[Start] --> B[End]
 ```
+````
+
+支援的圖表類型：
+- Flowchart (流程圖)
+- Sequence Diagram (序列圖)
+- Class Diagram (類別圖)
+- State Diagram (狀態圖)
+- Entity Relationship Diagram (ER 圖)
+- Gantt Chart (甘特圖)
+- Pie Chart (圓餅圖)
+
+## 專案結構
+
+```
+md_reader/
+├── Cargo.toml
+├── src/
+│   └── main.rs          # 主要程式碼
+└── docs/
+    └── mermaid.md       # Mermaid 範例文件
 ```

-### Supported Diagram Types
+## 依賴

- Flowchart
- Sequence Diagram
- Class Diagram
- State Diagram
- Gantt Chart
- Pie Chart
- Entity Relationship Diagram
-
-### SVG Export
-
-Hover over any Mermaid diagram and click "Download SVG" to download the vector graphic.
-
-## License
-
-MIT
+- Rust 2021 edition
+- tao (視窗管理)
+- wry (WebView)
+- pulldown-cmark (Markdown 解析)
+- clap (命令列參數)