feat: 优化时间轴

src/editor/canvas/DirectorCanvas.test.tsx

@@ -159,30 +159,39 @@ vi.mock("@react-three/drei", async () => {
     Grid: ({
       args,
       cellColor,
+      cellSize,
       cellThickness,
       fadeDistance,
       infiniteGrid,
       position,
       sectionColor,
+      sectionSize,
+      sectionThickness,
       side,
     }: {
       args?: [number, number];
       cellColor?: string;
+      cellSize?: number;
       cellThickness?: number;
       fadeDistance?: number;
       infiniteGrid?: boolean;
       position?: [number, number, number];
       sectionColor?: string;
+      sectionSize?: number;
+      sectionThickness?: number;
       side?: number;
     }) => (
       <div
         data-args={JSON.stringify(args)}
         data-cell-color={cellColor}
+        data-cell-size={String(cellSize)}
         data-cell-thickness={String(cellThickness)}
         data-fade-distance={String(fadeDistance)}
         data-infinite-grid={String(Boolean(infiniteGrid))}
         data-position={JSON.stringify(position)}
         data-section-color={sectionColor}
+        data-section-size={String(sectionSize)}
+        data-section-thickness={String(sectionThickness)}
         data-side={String(side)}
         data-testid="viewport-grid"
       />
@@ -292,13 +301,19 @@ it("does not render a full-viewport transform drag layer over the 3D viewport",
   expect(screen.queryByRole("application", { name: "3D视口缩放拖拽层" })).not.toBeInTheDocument();
 });
 
-it("renders only the dark major viewport grid lines on the same footprint as the ground", () => {
+it("renders a fine viewport grid with thicker, darker major lines every 5 cells on the same footprint as the ground", () => {
   render(<App />);
 
   const grid = screen.getByTestId("viewport-grid");
-  expect(grid).toHaveAttribute("data-cell-thickness", "0");
   expect(grid).toHaveAttribute("data-position", "[0,0.002,0]");
-  expect(grid).toHaveAttribute("data-section-color", "#2A4065");
+  expect(grid).toHaveAttribute("data-cell-size", "1");
+  expect(grid).toHaveAttribute("data-section-size", "5");
+  // 每 5 格一条更粗的分割线
+  expect(grid).toHaveAttribute("data-section-thickness", "1.4");
+  // 细分割线比主分割线更细
+  expect(grid).toHaveAttribute("data-cell-thickness", "0.5");
+  // 主分割线颜色更浅（中性灰，突出 RGB 坐标轴）
+  expect(grid).toHaveAttribute("data-section-color", "#6b7280");
   expect(grid).toHaveAttribute("data-fade-distance", "80");
   // 网格不能是"无限网格"：默认尺寸（1×1 × (1+fadeDistance)）比地面小得多，
   // 边缘不重合就会被看成另一层地面。这里必须和地面同尺寸。
@@ -450,7 +465,7 @@ it("renders the native 3D viewport gizmo in an overlay canvas above the aspect m
   expect(screen.getByTestId("native-gizmo-helper")).toHaveAttribute("data-margin", "[0,0]");
   expect(screen.getByTestId("native-gizmo-viewport")).toHaveAttribute(
     "data-axis-colors",
-    "[\"#E56C5B\",\"#6CDB7A\",\"#7AA7FF\"]"
+    "[\"#FF4D4F\",\"#52C41A\",\"#1890FF\"]"
   );
   expect(screen.getByTestId("native-gizmo-viewport")).toHaveAttribute("data-disabled", "true");
   expect(screen.getByTestId("native-gizmo-viewport")).toHaveAttribute("data-scale", "25");