完善抓大鹅创作入口与运行态表现

src/components/match3d-runtime/Match3DRuntimeShell.test.tsx

@@ -61,8 +61,119 @@ test('点击可见物品后先乐观入槽再等待确认', async () => {
   expect(clickableItem).toBeTruthy();
   const { onClickItem, onOptimisticRunChange } = renderRuntime(run);
 
-  fireEvent.click(screen.getByTestId(`match3d-item-${clickableItem!.itemInstanceId}`));
+  fireEvent.click(
+    screen.getByTestId(`match3d-item-${clickableItem!.itemInstanceId}`),
+  );
 
   expect(onOptimisticRunChange).toHaveBeenCalled();
   await waitFor(() => expect(onClickItem).toHaveBeenCalledTimes(1));
 });
+
+test('后端形状视觉键不会被统一兜底成红色苹字', () => {
+  const run = startLocalMatch3DRun(2);
+  run.items = run.items.slice(0, 2).map((item, index) => ({
+    ...item,
+    itemInstanceId: `shape-${index}`,
+    itemTypeId: `shape-type-${index}`,
+    visualKey: index === 0 ? 'red_circle' : 'yellow_triangle',
+    x: 0.42 + index * 0.16,
+    y: 0.5,
+    layer: index,
+    clickable: true,
+  }));
+  renderRuntime(run);
+
+  expect(screen.getByTestId('match3d-visual-red_circle')).toBeTruthy();
+  expect(screen.getByTestId('match3d-visual-yellow_triangle')).toBeTruthy();
+  expect(screen.queryAllByText('苹')).toHaveLength(0);
+});
+
+test('水果题材视觉键也渲染为无文字纯色几何体', () => {
+  const run = startLocalMatch3DRun(3);
+  run.items = run.items.slice(0, 3).map((item, index) => ({
+    ...item,
+    itemInstanceId: `fruit-${index}`,
+    itemTypeId: `fruit-type-${index}`,
+    visualKey:
+      index === 0
+        ? 'watermelon-green'
+        : index === 1
+          ? 'apple-red'
+          : 'grape-purple',
+    x: 0.35 + index * 0.15,
+    y: 0.5,
+    radius: index === 0 ? 0.12 : index === 1 ? 0.09 : 0.07,
+    layer: index,
+    clickable: true,
+  }));
+  renderRuntime(run);
+
+  expect(screen.getByTestId('match3d-visual-watermelon-green')).toBeTruthy();
+  expect(
+    screen.getByTestId('match3d-visual-apple-red').getAttribute('data-shape'),
+  ).toBe('heart');
+  expect(
+    screen
+      .getByTestId('match3d-visual-grape-purple')
+      .getAttribute('data-shape'),
+  ).toBe('star');
+  expect(screen.queryByText('苹果')).toBeNull();
+  expect(screen.queryByText('苹')).toBeNull();
+});
+
+test('运行态支持梯形和平行四边形等差异化几何造型', () => {
+  const run = startLocalMatch3DRun(3);
+  run.items = run.items.slice(0, 3).map((item, index) => ({
+    ...item,
+    itemInstanceId: `geometry-${index}`,
+    itemTypeId: `geometry-type-${index}`,
+    visualKey:
+      index === 0
+        ? 'peach-pink'
+        : index === 1
+          ? 'banana-yellow'
+          : 'orange_hexagon',
+    x: 0.35 + index * 0.15,
+    y: 0.5,
+    layer: index,
+    clickable: true,
+  }));
+  renderRuntime(run);
+
+  expect(
+    screen.getByTestId('match3d-visual-peach-pink').getAttribute('data-shape'),
+  ).toBe('trapezoid');
+  expect(
+    screen
+      .getByTestId('match3d-visual-banana-yellow')
+      .getAttribute('data-shape'),
+  ).toBe('parallelogram');
+  expect(
+    screen
+      .getByTestId('match3d-visual-orange_hexagon')
+      .getAttribute('data-shape'),
+  ).toBe('hexagon');
+});
+
+test('异常旧坐标只做显示层收束，不让物品贴出圆形空间', () => {
+  const run = startLocalMatch3DRun(1);
+  const item = run.items[0]!;
+  run.items = [
+    {
+      ...item,
+      itemInstanceId: 'legacy-outside',
+      visualKey: 'apple-red',
+      x: -0.4,
+      y: 0.5,
+      radius: 0.1,
+      clickable: true,
+    },
+  ];
+  renderRuntime(run);
+
+  const token = screen.getByTestId(
+    'match3d-item-legacy-outside',
+  ) as HTMLElement;
+  expect(parseFloat(token.style.left)).toBeGreaterThanOrEqual(0);
+  expect(parseFloat(token.style.left)).toBeLessThanOrEqual(100);
+});