feat: merge accepted frontend design updates

2026-09-12 18:12:25 +08:00
parent cde8f377e2
commit 4fd6d66c0e
9 changed files with 560 additions and 94 deletions
@@ -0,0 +1,60 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import test from 'node:test';
+import ts from 'typescript';
+
+async function loadCanvasDocumentModule() {
+  const source = await readFile(new URL('../src/lib/canvasDocument.ts', import.meta.url), 'utf8');
+  const compiled = ts.transpileModule(source, {
+    compilerOptions: {
+      module: ts.ModuleKind.CommonJS,
+      target: ts.ScriptTarget.ES2020,
+    },
+  }).outputText;
+  const module = { exports: {} };
+  new Function('exports', 'module', compiled)(module.exports, module);
+  return module.exports;
+}
+
+const documentWithTwoLayers = {
+  width: 400,
+  height: 240,
+  background: '#ffffff',
+  layers: [
+    { id: 'layer-bottom', name: '底层', visible: true, locked: false },
+    { id: 'layer-top', name: '顶层', visible: true, locked: false },
+  ],
+  layerFolders: [],
+  elements: [
+    { id: 'top-first', type: 'rect', layerId: 'layer-top', x: 0, y: 0, width: 10, height: 10, rotation: 0, opacity: 1, fill: '#f00', stroke: '#f00', strokeWidth: 0 },
+    { id: 'bottom-first', type: 'rect', layerId: 'layer-bottom', x: 0, y: 0, width: 10, height: 10, rotation: 0, opacity: 1, fill: '#0f0', stroke: '#0f0', strokeWidth: 0 },
+    { id: 'top-second', type: 'rect', layerId: 'layer-top', x: 0, y: 0, width: 10, height: 10, rotation: 0, opacity: 1, fill: '#00f', stroke: '#00f', strokeWidth: 0 },
+  ],
+};
+
+test('canvas paint order keeps every element above the background and honors layer order', async () => {
+  const { orderCanvasElementsByLayer } = await loadCanvasDocumentModule();
+
+  assert.deepEqual(
+    orderCanvasElementsByLayer(documentWithTwoLayers).map(element => element.id),
+    ['bottom-first', 'top-first', 'top-second'],
+  );
+});
+
+test('moving an element only changes its order inside its own canvas layer', async () => {
+  const { moveCanvasElementWithinLayer } = await loadCanvasDocumentModule();
+
+  const moved = moveCanvasElementWithinLayer(documentWithTwoLayers, 'top-first', 1);
+
+  assert.deepEqual(
+    moved.elements.map(element => element.id),
+    ['top-second', 'bottom-first', 'top-first'],
+  );
+});
+
+test('canvas elements remain visible when they extend beyond the document surface', async () => {
+  const styles = await readFile(new URL('../src/styles.css', import.meta.url), 'utf8');
+  const stageRule = /\.studio-stage\s*\{([\s\S]*?)\n\}/.exec(styles)?.[1] ?? '';
+
+  assert.match(stageRule, /overflow:\s*visible/);
+});
@@ -0,0 +1,10 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import test from 'node:test';
+
+test('dock preview is mounted in the workspace rather than inside the moving panel', async () => {
+  const source = await readFile(new URL('../src/components/FloatingPanel.tsx', import.meta.url), 'utf8');
+
+  assert.match(source, /createPortal\(/);
+  assert.match(source, /workspaceNodeRef\.current,\s*\n\s*\)/);
+});
@@ -0,0 +1,47 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import test from 'node:test';
+
+const sourcePath = new URL('../src/pages/TemplateHome.tsx', import.meta.url);
+const stylesPath = new URL('../src/styles.css', import.meta.url);
+
+test('template details are rendered through one reusable right-panel component', async () => {
+  const source = await readFile(sourcePath, 'utf8');
+
+  assert.match(source, /function TemplateDetailPanel\(/);
+  assert.match(source, /<TemplateDetailPanel/);
+  assert.match(source, /className="[^"]*template-detail-panel/);
+});
+
+test('template detail styles separate summary, specifications, and actions', async () => {
+  const styles = await readFile(stylesPath, 'utf8');
+
+  assert.match(styles, /\.template-detail-summary/);
+  assert.match(styles, /\.template-detail-specs/);
+  assert.match(styles, /\.template-detail-actions/);
+});
+
+test('template detail specifications and actions stack on narrow screens', async () => {
+  const styles = await readFile(stylesPath, 'utf8');
+
+  assert.match(styles, /@media \(max-width: 560px\) \{[\s\S]*?\.template-detail-specs\s*\{\s*grid-template-columns: 1fr;/);
+  assert.match(styles, /@media \(max-width: 560px\) \{[\s\S]*?\.template-detail-actions\s*\{\s*grid-template-columns: 1fr;/);
+});
+
+test('narrow-screen modal keeps the action row reachable under the viewport cap', async () => {
+  const styles = await readFile(stylesPath, 'utf8');
+
+  // The modal caps height with overflow:hidden. On single-column mobile the
+  // detail panel must keep its own scroll so actions cannot be clipped away.
+  assert.match(styles, /\.template-modal\s*\{[^}]*max-height:\s*calc\(100vh\s*-\s*56px\);/);
+  assert.match(styles, /\.template-modal\s*\{[^}]*overflow:\s*hidden;/);
+  assert.match(styles, /\.template-detail-panel\s*\{[^}]*overflow-y:\s*auto;/);
+});
+
+test('modal previews fill their column with a white SVG backdrop and thumbnails stay opaque', async () => {
+  const styles = await readFile(stylesPath, 'utf8');
+
+  assert.match(styles, /\.template-home \.template-modal \.template-preview\.large\s*\{[^}]*align-self: stretch;[^}]*aspect-ratio: 4 \/ 3;[^}]*background: #fff;/);
+  assert.match(styles, /\.template-home \.template-modal \.template-preview\.large img\s*\{[^}]*height: 100%;[^}]*max-height: none;/);
+  assert.match(styles, /\.template-home \.template-detail-references \.reference-strip img\s*\{[^}]*background: #fff;/);
+});