Unify encoder knob display between editor and preview

src/components/keymap/layout/KeyboardLayoutEditor.tsx

@@ -1,3 +1,4 @@
+import { Icon } from "@iconify/react";
 import {
   Fragment,
   useEffect,
@@ -400,6 +401,7 @@ export function KeyboardLayoutEditor({
               </span>
               {press && (
                 <span className="knob-row knob-row-press">
+                  <Icon icon="mdi:gesture-tap-button" className="encoder-dir" aria-hidden="true" />
                   <KeycapFace qmkId={keyboard.getKey(layer, press.key.row, press.key.col)} />
                 </span>
               )}

src/components/keymap/layout/KeyboardLayoutPreview.tsx

@@ -1,3 +1,4 @@
+import { Icon } from "@iconify/react";
 import {
   useMemo,
   useState,
@@ -314,19 +315,23 @@ export function KeyboardLayoutPreview({
             >
               <span className="knob-row">
                 <span className="encoder-dir">↺</span>
+                <KeycapFace qmkId={keyboard.getEncoder(layer, index, 0)} />
               </span>
               {press && (
                 <span className="knob-row knob-row-press">
+                  <Icon icon="mdi:gesture-tap-button" className="encoder-dir" aria-hidden="true" />
                   <KeycapFace qmkId={keyboard.getKey(layer, press.key.row, press.key.col)} />
                 </span>
               )}
               <span className="knob-row">
                 <span className="encoder-dir">↻</span>
+                <KeycapFace qmkId={keyboard.getEncoder(layer, index, 1)} />
               </span>
             </div>
           );
         })}
         {looseEncoders.map(({ encoder, shiftX, shiftY }) => {
+          const qmkId = keyboard.getEncoder(layer, encoder.index, encoder.direction);
           const isSelected =
             menu?.target.kind === "encoder" &&
             menu.target.index === encoder.index &&
@@ -345,6 +350,7 @@ export function KeyboardLayoutPreview({
               style={shapeStyle(encoder, shiftX, shiftY, PITCH, inset, plateMargin)}
             >
               <span className="encoder-dir">{encoder.direction === 1 ? "↻" : "↺"}</span>
+              <KeycapFace qmkId={qmkId} />
             </div>
           );
         })}

src/index.css

@@ -1487,22 +1487,13 @@ input[type="number"].input,
   height: calc(0.9rem * var(--key-font-scale, 1));
 }
 
-/* 按下功能所在的中间行:旋钮的「面」是按下、「圈」是旋转,所以按下用接近普通键帽
-   的字号占据圆心,两个旋转方向缩在上下两条边上。只有板子把旋钮轴向开关接进矩阵
-   时才会出现这一行(见 knobGrouping.ts 的 press 推断)。 */
+/* 按下功能所在的中间行:与左旋/右旋两行共用同一套字号(见上方
+   `.encoder-knob`/`.encoder-knob .key-icon`),三行文字/图标大小保持一致。只有
+   板子把旋钮轴向开关接进矩阵时才会出现这一行(见 knobGrouping.ts 的 press 推断)。 */
 .keyboard-layout .encoder-knob-press {
   gap: 0;
 }
 
-.keyboard-layout .encoder-knob .knob-row-press {
-  font-size: calc(0.7rem * var(--key-font-scale, 1));
-}
-
-.keyboard-layout .encoder-knob .knob-row-press .key-icon {
-  width: calc(1.15rem * var(--key-font-scale, 1));
-  height: calc(1.15rem * var(--key-font-scale, 1));
-}
-
 /* 线稿(wireframe) 风格：键帽/旋钮只描边、不填充 —— 4 态立体感枚举(PreviewStyle)
    之一。底板的描边、外壳的半透明填充在 KeyboardLayoutPreview.tsx/
    KeyboardLayoutEditor.tsx 里内联设置（颜色是用户可配的 caseColor/plateColor），