docs: usage

README.md

@@ -1,89 +1,52 @@
 # TTRPG Tools
 
-一个基于 `solid.js` 和 `rsbuild` 的 `ttrpg` 工具箱。
+一个基于 `solid.js` 和 `rsbuild` 的 TTRPG 工具箱，支持 Markdown 解析、自定义组件和 CLI 工具。
 
-## 功能
-
-- **CLI**: 提供一个 cli 工具，用于将目录内的各种 ttrpg 文档编译为 html。
-- **Markdown**: 解析以各种格式编写的 ttrpg 内容，并支持扩展的语法。
-- **TTRPG 组件**: 用于 ttrpg 内容的各种 UI 组件，且可以在 markdown 中通过扩展语法插入。
-
-## CLI 命令
-
-```bash
-# 克隆仓库后，npm install & npm link安装
-
-# 在项目文件夹内运行
-ttrpg serve [dir] -p 3000
-
-```
-
-## 组件语法
-
-### csv
-
-所有csv使用英文逗号分割。可使用空行。以#为注释。所有包含#或者英文逗号的字段，都应该使用双引号包裹。
-
-### 骰子组件
-
-```markdown
-:dice[2d6+d8]
-:dice[1d20+5]{key="attack"}
-```
-
-### 表格组件
-
-```markdown
-:table[./sparks.csv]
-:table[./sparks.csv]{roll=true}
-:table[./sparks.csv]{roll=true remix=true}
-```
-
-### 卡牌组件
-
-假设准备有`./cards.csv`内容如下：
-
-```csv
-label,title,body
-1,卡牌1,这张卡牌的**效果**的markdown文本
-2,卡牌2,更多卡牌效果
-```
-
-```markdown
-:md-deck[./cards.csv]{grid="5x8" layers="title:1,1-5,1f8 body:1,5-5,8f3"}
-```
-
-上述卡牌将生成5x8的卡牌牌面排版，其中title层占第1行1-5列，8mm字体。
-
-## 开发
+## 快速开始
 
 ```bash
 # 安装依赖
 npm install
 
-# 开发模式
-npm run dev
+# 全局安装 CLI
+npm link
 
-# 构建
-npm run build
-
-# 预览
-npm run preview
+# 预览内容
+ttrpg serve ./content
 ```
 
-## 项目结构
+## 文档导航
 
-```
-ttrpg-tools/
-├── src/
-│   ├── cli/           # CLI 工具源码
-│   ├── components/    # TTRPG 组件
-│   ├── markdown/      # Markdown 解析器
-│   ├── App.tsx        # 主应用组件
-│   ├── main.tsx       # 入口文件
-│   └── styles.css     # 样式文件
-├── content/           # 示例内容
-├── package.json
-├── tsconfig.json
-└── rsbuild.config.ts
-```
+| 文档 | 说明 |
+|------|------|
+| [📖 CLI 使用说明](./docs/cli.md) | CLI 安装、命令和用法 |
+| [🛠️ 开发指南](./docs/development.md) | 项目结构、开发规范和构建 |
+| [📝 Markdown 编写说明](./docs/markdown.md) | Markdown 语法和组件用法 |
+
+## 功能概览
+
+- **CLI 工具**: `serve` 预览模式 和 `compile` 编译模式
+- **Markdown 解析**: 支持指令语法、YAML 标签、mermaid 图表
+- **TTRPG 组件**: 骰子、表格、卡牌、标记、命令追踪器等
+
+## 核心组件
+
+| 组件 | 语法 | 说明 |
+|------|------|------|
+| 🎲 骰子 | `:dice[2d6+d8]` | 掷骰并记录结果 |
+| 📊 表格 | `:table[./data.csv]` | 标签页式表格 |
+| 🃏 卡牌 | `:md-deck[./cards.csv]` | 卡牌布局 |
+| 📍 标记 | `:md-pin[A]{x=40 y=40}` | 图片标记 |
+| 📋 追踪器 | `:md-commander` | 命令历史和状态追踪 |
+
+## 技术栈
+
+- **前端**: Solid.js 1.9+
+- **构建**: Rsbuild
+- **样式**: Tailwind CSS 4
+- **Markdown**: marked + marked-directive
+- **测试**: Jest
+
+## 许可证
+
+MIT