🎨 圆角卡片与主题配色自适应的 Mermaid 流程图
---
## ✨ 核心特性
- ⚡ **即时交互 Mini-App**：通过滑块、数字输入、下拉菜单等控件操作，浏览器本地毫秒级重新计算公式、统计数据与图表，无需与后端重复交互。
- 📊 **20+ 款精美 UI 原生组件**：包含指标卡片（`stat`）、图表（柱状/折线/饼图/面积图 `chart`）、灵活布局（`box`, `row`, `grid`）、进度条、表格、徽标（`badge`）及分段控件等。
- 🎨 **主题化美化 Mermaid 图表**：自动拦截 ` ```mermaid ` 代码块，将其渲染为圆角卡片节点、浅色/深色主题自适应、具备清晰层次结构的现代可视化流程图。
- 🔁 **双向交互与一键回传**：支持内置操作按钮（`GenUI.issueNewTurn(...)`），用户在卡片上配置好的参数，点击即可作为下一轮提问直接发送给智能体。
- 🧠 **智能场景感知**：模型仅在计算、对比、流程等需要直观展示的场景下调用 UI 组件；对于常规事实性问答或代码交流，保持清爽的纯文本/代码块回复。
- 🔒 **严密安全沙箱**：计算表达式在轻量受限的 AST 解释器中执行，彻底杜绝 `eval`、DOM 访问或外部网络请求。表单状态仅保存在本地浏览器存储中。
---
## 🚀 安装指南
运行环境要求：**DeepSeek Harness 0.2.x** 或更高版本（桌面端或 `dsh web`）。
### 方式一：Web UI / 桌面端图形界面（最推荐）
1. 打开 DeepSeek Harness 客户端或 Web 界面。
2. 点击左侧导航栏的 **Plugins**（插件），然后点击 **Add plugin**（添加插件）。
3. 输入以下任一包名或 GitHub 仓库地址：
```
@rakutek/dsh-intelligent-ui
```
或
```
https://github.com/rakutek/dsh-intelligent-ui
```
4. 点击 **Install** 安装。安装完成后立即生效，无需重启客户端！
### 方式二：命令行 CLI 安装
在终端中执行对应配置集的添加命令：
```sh
# 安装至桌面端 Profile（安装前请先退出桌面客户端）：
dsh plugin --profile desktop add @rakutek/dsh-intelligent-ui
# 安装至 Web 模式 Profile：
dsh plugin --profile web add @rakutek/dsh-intelligent-ui
```
> **提示**：如需临时返回默认的纯文本回复，只需在 **Plugins** 列表中关闭此插件的开关即可。
---
## 💡 示例 Prompt 推荐
安装完成后，尝试用自然语言向模型提出以下需求：
- **计费与预估计算器**：
> “帮我做一个 SaaS 团队计费模拟器，可以用滑块调节团队人数和计费周期（月付/年付），并实时计算折扣优惠与年付总额。”
- **数码产品多维对比**：
> “对比 MacBook Pro M3、ThinkPad X1 Carbon 和 Dell XPS 13，生成包含续航、重量、价格和开发体验的交互式对比卡片。”
- **业务流程与系统架构图**：
> “画一张从 GitHub PR 提交，到 CI 自动化测试、Code Review，最后部署上线的清晰流程图。”
- **还款计划测算**：
> “制作一个房贷还款测算卡片，可调节贷款金额、年利率和还款年限，实时计算每月还款额和利息占比。”
---
## 🛠️ 实现原理（模型生成的 Markdown）
本插件向系统提示词（System Prompt）中注入简明格式规范。模型会在 Markdown 中输出类似 JSX 的组件标签与响应式状态：
```md
{@body const [seats, setSeats] = useState(25)}
{@body const [price, setPrice] = useState(1200)}
| 
|