dsh-oil-account

Readme

# DSH 油电账本

一个为录屏演示设计的 DSH Better Sidebar 插件 Demo。它用可调年限和年里程对比油车/电车持有成本，并配有卡通阿特讲解、简化嘴部动画、波形和一键重播演示。

[![License: MIT](https://img.shields.io/badge/License-MIT-4c8dff.svg)](LICENSE)
[![DSH](https://img.shields.io/badge/DSH-Better%20Sidebar-111827.svg)](https://github.com/Dongfang81/dsh-better-sidebar)

[查看 Insight H3 生成的 8 秒动态概念演示](https://game-ai-editor-videoassets-test.oss-cn-guangzhou.aliyuncs.com/H3/981569b76bfafc50c857e574910c3914.mp4)

## Demo 能力

- 3/5/8/10 年快速切换，年里程 5,000–50,000 km 可调。
- 本地确定性计算，默认 8 年结果为 43,600 元。
- SVG 累计成本曲线、节省区间、反转年里程和结果动画。
- 浏览器支持时使用 `speechSynthesis` 播放中文讲解；不支持时仍会完成视觉演示。
- 纯客户端，不调用付费模型，不上传用户数据。

> 预置参数只用于娱乐化产品演示，不构成真实车辆价格或购买建议。

## 架构

- `src/calculator.ts`：购买价、能源、保养和保险的纯函数计算。
- `src/client/OilAccountPanel.tsx`：参数、结果和录屏时间线。
- `src/client/CostChart.tsx`：响应式 SVG 累计成本曲线。
- `src/client/AtPresenter.tsx`：纯 CSS 卡通形象、嘴部和波形动画。
- `src/client/narration.ts`：娱乐化讲解文案与可选浏览器语音。

## 开发验证

```sh
pnpm install
pnpm test
pnpm typecheck
pnpm build
```

## 本地安装

先确保 Web profile 已安装 `dsh-better-sidebar >= 0.12.2`，然后在本目录构建并链接：

```sh
pnpm build
dsh plugin --profile web add .
dsh web
```

打开 Better Sidebar，点击 Tab 栏的 `+`，选择「油电账本」。

## 许可证

[MIT](LICENSE)