add text box

src/main.ts

@@ -1,5 +1,19 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import './style.css'
+import { createRouter, createWebHistory } from 'vue-router'
 
-createApp(App).mount('#app')
+const router = createRouter({
+    history: createWebHistory(),
+    routes: [
+        {
+            path: '/',
+            component: () => import('./views/Home.vue')
+        }, {
+            path: '/lab',
+            component: () => import('./views/VirtualLab.vue')
+        }
+    ]
+})
+
+createApp(App).use(router).mount('#app')

src/views/Home.vue

@@ -0,0 +1,3 @@
+<template>
+    <div>Home</div>
+</template>

src/views/circuit-ele/text_box.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#ffffff"/>
+      <stop offset="1" stop-color="#f3f4f6"/>
+    </linearGradient>
+  </defs>
+  <rect x="14" y="14" width="100" height="100" rx="12" ry="12" fill="url(#bg)" stroke="#111827" stroke-width="4"/>
+  <text x="50%" y="54%" dominant-baseline="middle" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="72" fill="#111827">T</text>
+</svg>

src/views/elements.ts

@@ -13,6 +13,7 @@ import switchOn from './circuit-ele/switch_on.png'
 import meter from './circuit-ele/meter.png'
 import slidingRheostat from './circuit-ele/sliding_rheostat.png'
 import slidingRheostatPin from './circuit-ele/sliding_rheostat_pin.png'
+import textBox from './circuit-ele/text_box.svg'
 
 export type ConnectionPoint = {
     // 以百分比（0..1）定义在图片盒子内的位置
@@ -49,6 +50,12 @@ export type PropertySchema =
         type: 'text'
         default: string
     }
+    | {
+        key: string
+        label: string
+        type: 'color'
+        default: string
+    }
     | {
         key: string
         label: string
@@ -64,14 +71,28 @@ export type Preset = {
 }
 
 export const elements: CircuitElement[] = [
+    {
+        key: 'text_box',
+        name: '文本框',
+        url: textBox,
+        defaultSize: 0,
+        // 文本框不参与电路连接，无端点
+        connectionPoints: [],
+        propertySchemas: [
+            { key: 'text', label: '文本', type: 'text', default: '双击编辑' },
+            { key: 'fontSize', label: '字体大小', type: 'number', unit: 'px', default: 24 },
+            { key: 'color', label: '颜色', type: 'color', default: '#111827' },
+            // 可选：是否粗体/对齐方式等，后续再加
+        ],
+    },
     {
         key: 'battery',
         name: '电池',
         url: battery,
         defaultSize: 110,
         connectionPoints: [
-            { x: 0.05, y: 0.5, name: 'A' }, // 左侧
-            { x: 0.95, y: 0.5, name: 'B' }, // 右侧
+            { x: 0.95, y: 0.5, name: '正极' }, // 右侧
+            { x: 0.05, y: 0.5, name: '负极' }, // 左侧
         ],
         propertySchemas: [
             { key: 'voltage', label: '电压', type: 'number', unit: 'V', default: 3 },
@@ -84,8 +105,8 @@ export const elements: CircuitElement[] = [
         url: powerSupply,
         defaultSize: 180,
         connectionPoints: [
-            { x: 0.2, y: 1, name: 'A' },
-            { x: 0.8, y: 1, name: 'B' },
+            { x: 0.8, y: 1, name: '正极' },
+            { x: 0.2, y: 1, name: '负极' },
         ],
         propertySchemas: [
             { key: 'voltage', label: '电压', type: 'number', unit: 'V', default: 5 },
@@ -122,32 +143,6 @@ export const elements: CircuitElement[] = [
         // 当电流超过阈值时在前端根据 state 切换图片
         stateImages: { on: lightBulbGrow, off: lightBulb },
     },
-    {
-        key: 'capacitor',
-        name: '电容',
-        url: capacitor,
-        defaultSize: 120,
-        connectionPoints: [
-            { x: 0.6, y: 0.96, name: 'A' },
-            { x: 0.4, y: 0.9, name: 'B' },
-        ],
-        propertySchemas: [
-            { key: 'capacitance', label: '电容', type: 'number', unit: 'F', default: 0.000001 },
-        ],
-    },
-    {
-        key: 'inductor',
-        name: '电感',
-        url: inductor,
-        defaultSize: 100,
-        connectionPoints: [
-            { x: 0.05, y: 0.5, name: 'A' },
-            { x: 0.95, y: 0.5, name: 'B' },
-        ],
-        propertySchemas: [
-            { key: 'inductance', label: '电感', type: 'number', unit: 'H', default: 0.001 },
-        ],
-    },
     {
         key: 'sliding_rheostat',
         name: '滑动变阻器',
@@ -155,10 +150,10 @@ export const elements: CircuitElement[] = [
         pinUrl: slidingRheostatPin,
         defaultSize: 180,
         connectionPoints: [
-            { x: 0.15, y: 0.28, name: 'A' },
-            { x: 0.85, y: 0.28, name: 'B' },
-            { x: 0.15, y: 0.76, name: 'C' },
-            { x: 0.85, y: 0.76, name: 'D' },
+            { x: 0.15, y: 0.28, name: '下部左侧' },
+            { x: 0.85, y: 0.28, name: '下部右侧' },
+            { x: 0.15, y: 0.76, name: '上部左侧' },
+            { x: 0.85, y: 0.76, name: '上部右侧' },
         ],
         propertySchemas: [
             { key: 'maxResistance', label: '最大电阻', type: 'number', unit: 'Ω', default: 100 },
@@ -197,8 +192,8 @@ export const elements: CircuitElement[] = [
         url: meter,
         defaultSize: 150,
         connectionPoints: [
-            { x: 0.25, y: 1, name: 'A' },
-            { x: 0.45, y: 1, name: 'B' },
+            { x: 0.25, y: 1, name: '正极' },
+            { x: 0.45, y: 1, name: '负极' },
         ],
         preset: [{
             name: '微安电流表', propertyValues: { resistance: 0.05, renderFunc: '(i) => `${(i * 1000000).toFixed(0)} uA`' }
@@ -214,4 +209,30 @@ export const elements: CircuitElement[] = [
             { key: 'renderFunc', label: '显示函数', type: 'text', default: '(i) => `${(i).toFixed(2)} A`' },
         ],
     },
+    {
+        key: 'capacitor',
+        name: '电容',
+        url: capacitor,
+        defaultSize: 120,
+        connectionPoints: [
+            { x: 0.4, y: 0.9, name: '正极' },
+            { x: 0.6, y: 0.96, name: '负极' },
+        ],
+        propertySchemas: [
+            { key: 'capacitance', label: '电容', type: 'number', unit: 'F', default: 0.000001 },
+        ],
+    },
+    {
+        key: 'inductor',
+        name: '电感',
+        url: inductor,
+        defaultSize: 100,
+        connectionPoints: [
+            { x: 0.05, y: 0.5, name: 'A' },
+            { x: 0.95, y: 0.5, name: 'B' },
+        ],
+        propertySchemas: [
+            { key: 'inductance', label: '电感', type: 'number', unit: 'H', default: 0.001 },
+        ],
+    },
 ]