@skillpet/circuit 0.5.0

package/README.md

@@ -0,0 +1,131 @@
+# @skillpet/circuit
+
+电路原理图绘制库 — 通过 JSON 描述电路，渲染为交互式 SVG，支持主题、颜色过渡、tooltip，提供 Vue 和 React 组件。
+
+## 安装
+
+```bash
+npm install @skillpet/circuit
+```
+
+## 快速开始
+
+### ESM / TypeScript
+
+```ts
+import { renderFromJson } from "@skillpet/circuit";
+
+const svg = renderFromJson({
+  elements: [
+    { type: "SourceV", d: "up", label: "12V" },
+    { type: "ResistorIEEE", label: "R1 10kΩ" },
+    { type: "Capacitor", d: "down", label: "C1 100nF" },
+    { type: "Line", d: "left" },
+    { type: "Ground" },
+  ],
+});
+// svg 是 SVG 字符串，可嵌入 HTML 或写入文件
+```
+
+### 普通网页
+
+```html
+<script src="https://unpkg.com/@skillpet/circuit/dist/circuit.bundle.min.js"></script>
+<script>
+  const svg = Circuit.renderFromJson({
+    elements: [
+      { type: "ResistorIEEE", label: "R1" },
+      { type: "Capacitor", d: "down", label: "C1" },
+    ],
+  });
+  document.getElementById("output").innerHTML = svg;
+</script>
+```
+
+### 交互模式（带 tooltip、hover 高亮、事件）
+
+```ts
+import { mountFromJson } from "@skillpet/circuit";
+
+const ctrl = mountFromJson(document.getElementById("container"), {
+  elements: [
+    { type: "ResistorIEEE", id: "R1", tooltip: "碳膜电阻 100kΩ" },
+    { type: "Capacitor", d: "down", id: "C1", tooltip: "陶瓷电容 0.1μF" },
+  ],
+}, { interactive: true });
+
+ctrl.on("element:click", (info) => console.log("Clicked:", info.id));
+ctrl.on("element:hover", (info) => console.log("Hover:", info.tooltip));
+```
+
+### Vue 3
+
+```vue
+<script setup>
+import { CircuitDiagram } from "@skillpet/circuit/vue";
+const circuit = {
+  elements: [
+    { type: "ResistorIEEE", label: "R1", id: "R1", tooltip: "100kΩ" },
+  ],
+};
+</script>
+<template>
+  <CircuitDiagram :circuit="circuit" interactive @element-click="console.log" />
+</template>
+```
+
+### React
+
+```tsx
+import { CircuitDiagram } from "@skillpet/circuit/react";
+
+function App() {
+  return (
+    <CircuitDiagram
+      circuit={{ elements: [{ type: "ResistorIEEE", label: "R1" }] }}
+      interactive
+      onElementClick={(info) => console.log(info)}
+    />
+  );
+}
+```
+
+## 主题
+
+```ts
+import { renderFromJson } from "@skillpet/circuit";
+
+// 内置主题：'light'、'dark'、'print'
+const svg = renderFromJson(circuit, { theme: "dark" });
+```
+
+## 颜色过渡
+
+```ts
+const svg = renderFromJson({
+  drawing: { colorTransition: true },
+  elements: [
+    { type: "SourceV", d: "up", color: "#2ecc71" },
+    { type: "ResistorIEEE", color: "#e74c3c" },
+    // 引线处自动生成渐变过渡
+  ],
+}, { colorTransition: true });
+```
+
+## 开发
+
+```bash
+npm install
+npm run build    # tsc → dist/
+npm run bundle   # esbuild → IIFE/CJS/ESM bundles
+npm test         # vitest
+npm run preview  # Vite 预览页（元件画廊 + 交互演示）
+```
+
+## 要求
+
+- Node.js >= 18
+
+## 许可
+
+MIT