Update README with terminal, Pan mode and shell commands

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
+./target/release/md_reader server --port 8080 --path ./docs
-md_reader export document.md -o output.html
-
-# Method 2: Using render with -p flag
-md_reader render document.md -p
 ```
 
-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
+- Rust 2021 edition
-- Sequence Diagram
+- tao (視窗管理)
-- Class Diagram
+- wry (WebView)
-- State Diagram
+- pulldown-cmark (Markdown 解析)
-- Gantt Chart
+- clap (命令列參數)
-- Pie Chart
-- Entity Relationship Diagram
-
-### SVG Export
-
-Hover over any Mermaid diagram and click "Download SVG" to download the vector graphic.
-
-## License
-
-MIT