add: segment afterglow effect

src/components/equipments/SevenSegmentDisplay.vue

@@ -78,6 +78,7 @@ const pinRefs = ref<Record<string, any>>({});
 interface SevenSegmentDisplayProps {
   size?: number;
   color?: string;
+  AFTERGLOW_DURATION?: number; // 余晖持续时间，单位毫秒
   pins?: {
     pinId: string;
     constraint: string;
@@ -133,40 +134,99 @@ const segmentStates = ref({
   dp: false,
 });
 
+// 余晖状态
+const afterglowStates = ref({
+  a: false,
+  b: false,
+  c: false,
+  d: false,
+  e: false,
+  f: false,
+  g: false,
+  dp: false,
+});
+
+// 余晖定时器
+const afterglowTimers = ref<Record<string, number>>({});
+
 // 判断段是否激活
 function isSegmentActive(
   segment: "a" | "b" | "c" | "d" | "e" | "f" | "g" | "dp",
 ): boolean {
-  return segmentStates.value[segment];
+  return segmentStates.value[segment] || afterglowStates.value[segment];
 }
 
 // 更新引脚状态的函数
 function updateSegmentStates() {
+  // 先获取COM口状态
+  const comPin = props.pins.find(p => p.pinId === "COM");
+  let comActive = true;
+  if (comPin && comPin.constraint) {
+    const comState = getConstraintState(comPin.constraint);
+    if (props.cathodeType === "anode") {
+      // anode模式下，COM为高电平则所有段都熄灭
+      comActive = comState !== "high";
+    }
+    // 可扩展其他模式
+  }
+
   for (const pin of props.pins) {
     if (["a", "b", "c", "d", "e", "f", "g", "dp"].includes(pin.pinId)) {
+      // 如果COM未激活，段直接进入熄灭（带余晖效果）
+      if (!comActive) {
+        handleSegmentStateChange(pin.pinId, false);
+        continue;
+      }
+
       // 如果constraint为空，则默认为未激活状态
       if (!pin.constraint) {
-        segmentStates.value[pin.pinId as keyof typeof segmentStates.value] =
-          false;
+        handleSegmentStateChange(pin.pinId, false);
         continue;
       }
 
       const pinState = getConstraintState(pin.constraint);
-
-      // 根据阴极/阳极类型反转逻辑
+      let newState: boolean;
       if (props.cathodeType === "common") {
         // 共阴极: 高电平激活段
-        segmentStates.value[pin.pinId as keyof typeof segmentStates.value] =
-          pinState === "high";
+        newState = pinState === "high";
       } else {
         // 共阳极: 低电平激活段
-        segmentStates.value[pin.pinId as keyof typeof segmentStates.value] =
-          pinState === "low";
+        newState = pinState === "low";
       }
+      handleSegmentStateChange(pin.pinId, newState);
     }
   }
 }
 
+// 处理段状态变化
+function handleSegmentStateChange(segmentId: string, newState: boolean) {
+  const typedSegmentId = segmentId as keyof typeof segmentStates.value;
+  const currentState = segmentStates.value[typedSegmentId];
+  
+  // 更新实际状态
+  segmentStates.value[typedSegmentId] = newState;
+  
+  // 处理余晖效果
+  if (currentState && !newState) {
+    // 从激活变为非激活，启动余晖
+    if (afterglowTimers.value[segmentId]) {
+      window.clearTimeout(afterglowTimers.value[segmentId]);
+    }
+    afterglowStates.value[typedSegmentId] = true;
+    afterglowTimers.value[segmentId] = window.setTimeout(() => {
+      afterglowStates.value[typedSegmentId] = false;
+      delete afterglowTimers.value[segmentId];
+    }, props.AFTERGLOW_DURATION ?? 700);
+  } else if (newState) {
+    // 重新激活，清除余晖
+    if (afterglowTimers.value[segmentId]) {
+      window.clearTimeout(afterglowTimers.value[segmentId]);
+      delete afterglowTimers.value[segmentId];
+    }
+    afterglowStates.value[typedSegmentId] = false;
+  }
+}
+
 // 监听约束状态变化
 function onConstraintChange(constraint: string, level: string) {
   const affectedPin = props.pins.find((pin) => pin.constraint === constraint);
@@ -186,6 +246,10 @@ onMounted(() => {
 
 onUnmounted(() => {
   // 清理约束状态监听
+  // 清理所有余晖定时器
+  Object.values(afterglowTimers.value).forEach(timerId => {
+    if (timerId) window.clearTimeout(timerId);
+  });
 });
 
 // 暴露属性和方法