feat(studio): add key test panel

Author: MeowKJ

firmware/CH592F/CMakeLists.txt

@@ -210,7 +210,8 @@ else()
     list(APPEND CH592_COMPILE_DEFINITIONS
         UART_LOG_ENABLE=0
         KBD_DEBUG_BUILD=0
-        KBD_USB_LOG_ENABLE=0
+        KBD_USB_LOG_ENABLE=1
+        KBD_LOG_DEFAULT_ENABLED=0
     )
 endif()
 

tools/studio/src/components/EncoderButton.vue

@@ -9,13 +9,13 @@
 
             <!-- 3个扇形区域（作为可点击的 path） -->
             <path v-for="(part, idx) in encoderParts" :key="`sector-${idx}`" :d="getSectorPath(idx)"
-                :class="['encoder-sector', `encoder-sector-${idx}`, { selected: selectedIndex === part.index }]"
+                :class="['encoder-sector', `encoder-sector-${idx}`, { selected: selectedIndex === part.index, 'test-active': testActiveSet.has(part.index), 'test-pulse': testPulseIndex === part.index }]"
                 @click.stop="!disabled && handlePartClick(part.index)" />
         </svg>
 
         <!-- 标签和徽章（在 SVG 上方） -->
         <div v-for="(part, idx) in encoderParts" :key="`label-${idx}`" class="encoder-label-container"
-            :class="{ selected: selectedIndex === part.index }" :style="getLabelContainerStyle(idx)"
+            :class="{ selected: selectedIndex === part.index, 'test-active': testActiveSet.has(part.index), 'test-pulse': testPulseIndex === part.index }" :style="getLabelContainerStyle(idx)"
             @click.stop="!disabled && handlePartClick(part.index)">
             <span class="encoder-part-label">{{ part.label }}</span>
             <span v-if="part.actionBadge" class="encoder-part-badge">{{ part.actionBadge }}</span>
@@ -49,6 +49,10 @@ const props = defineProps<{
     };
     /** 是否禁用 */
     disabled?: boolean;
+    /** 测试模式: 当前按下的旋钮虚拟键索引 */
+    testActiveIndices?: number[];
+    /** 测试模式: 最近触发的旋钮虚拟键索引 */
+    testPulseIndex?: number | null;
 }>();
 
 const emit = defineEmits<{
@@ -74,6 +78,8 @@ const anySelected = computed(() => {
         props.selectedIndex === props.encoderIndices.ccw;
 });
 
+const testActiveSet = computed(() => new Set(props.testActiveIndices ?? []));
+
 /** 旋钮的3个部分 */
 const encoderParts = computed(() => {
     return [
@@ -282,6 +288,15 @@ function getActionBadge(action: KeyAction): string | null {
     opacity: 1;
 }
 
+.encoder-sector.test-active {
+    fill: rgba(74, 222, 128, 0.38);
+    opacity: 1;
+}
+
+.encoder-sector.test-pulse:not(.test-active) {
+    animation: encoder-test-pulse 520ms ease-out;
+}
+
 .encoder-label-container {
     display: flex;
     flex-direction: column;
@@ -299,6 +314,11 @@ function getActionBadge(action: KeyAction): string | null {
     text-shadow: 0 1px 3px rgba(59, 130, 246, 0.5);
 }
 
+.encoder-label-container.test-active {
+    color: var(--c-success);
+    text-shadow: 0 1px 4px rgba(74, 222, 128, 0.45);
+}
+
 .encoder-label-container:hover {
     color: var(--c-text-primary);
     transform: scale(1.1);
@@ -317,4 +337,9 @@ function getActionBadge(action: KeyAction): string | null {
     user-select: none;
     font-weight: 600;
 }
+
+@keyframes encoder-test-pulse {
+    0% { fill: rgba(74, 222, 128, 0.45); }
+    100% { fill: rgba(255, 255, 255, 0.05); }
+}
 </style>

tools/studio/src/components/KeyButton.vue

@@ -1,7 +1,7 @@
 <template>
   <button 
     class="key-button" 
-    :class="[sizeClass, typeClass, { selected, 'has-action': hasAction, disabled }]"
+    :class="[sizeClass, typeClass, { selected, 'has-action': hasAction, disabled, 'test-active': testActive, 'test-pulse': testPulse }]"
     :style="gridStyle"
     :disabled="disabled"
     @click="!disabled && emit('click')"
@@ -27,6 +27,10 @@ const props = defineProps<{
   selected: boolean;
   /** 是否禁用 */
   disabled?: boolean;
+  /** 测试模式: 当前按下 */
+  testActive?: boolean;
+  /** 测试模式: 最近触发 */
+  testPulse?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -176,6 +180,17 @@ function getWheelName(dir: number): string {
   box-shadow: 0 0 0 3px var(--c-accent-soft), 0 8px 24px var(--c-key-shadow);
 }
 
+.key-button.test-active {
+  background: color-mix(in srgb, var(--c-success) 24%, var(--c-key-bg));
+  border-color: var(--c-success);
+  color: var(--c-text-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-success) 30%, transparent), 0 8px 24px rgba(74, 222, 128, 0.24);
+}
+
+.key-button.test-pulse:not(.test-active) {
+  animation: key-test-pulse 520ms ease-out;
+}
+
 .key-button.has-action {
   color: var(--c-text-primary);
 }
@@ -266,4 +281,18 @@ function getWheelName(dir: number): string {
 .badge-mouse { color: var(--c-warning); }
 .badge-layer { color: var(--c-accent); }
 .badge-macro { color: var(--c-danger); }
+
+@keyframes key-test-pulse {
+  0% {
+    border-color: var(--c-success);
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-success) 42%, transparent);
+  }
+  70% {
+    box-shadow: 0 0 0 10px transparent;
+  }
+  100% {
+    border-color: var(--c-key-border);
+    box-shadow: none;
+  }
+}
 </style>