← Back to home@Dongfang81

dsh-oil-account

A film-ready oil car vs EV ownership cost demo for DSH Better Sidebar.

Stars
0
Language
TypeScript
Created
Sep 4, 2026
Updated
Sep 4, 2026
Web UI
GitHub repo

Introduction

DSH 油电账本

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

License: MIT DSH

查看 Insight H3 生成的 8 秒动态概念演示

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：娱乐化讲解文案与可选浏览器语音。

开发验证

pnpm install
pnpm test
pnpm typecheck
pnpm build

本地安装

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

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

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

许可证

MIT