Match Canvas sidebar to Code with a lavender surface

tests/e2e/image-workspace-v2.spec.ts

@@ -473,6 +473,59 @@ test.describe('AI Design V2 workspace', () => {
       await expect(page.getByText('目标与用途')).toHaveCount(0);
       await expect(page.locator('[data-testid^="sidebar-image-conversation-"]')).toHaveCount(0);
 
+      // Canvas shares Code's navigation recipe, with a lavender surface and its own top return row.
+      const sidebar = page.getByTestId('sidebar');
+      const createProject = sidebar.getByTestId('sidebar-create-project');
+      const project = sidebar.getByTestId('sidebar-image-project-workspace-1');
+      const projectsHeading = sidebar.locator('.classroom-projects-heading');
+      const moduleReturn = sidebar.getByTestId('sidebar-module-switcher-trigger');
+      const community = sidebar.getByRole('button', { name: '作品广场', exact: true });
+      const account = sidebar.getByTestId('sidebar-member-menu-trigger');
+      await expect(sidebar).toHaveAttribute('aria-hidden', 'false');
+      await expect(sidebar).toHaveCSS('background-color', 'rgb(245, 242, 250)');
+      await expect(createProject).toHaveText('新建项目');
+      await expect(projectsHeading).toHaveText('我的项目');
+      await expect(project).toHaveText('咖啡机新品主视觉');
+      await expect(project).toHaveAttribute('aria-current', 'page');
+      await expect(project.getByText('咖啡机新品主视觉', { exact: true })).toHaveCSS('font-size', '14px');
+      await expect(project.getByText('咖啡机新品主视觉', { exact: true })).toHaveCSS('font-weight', '600');
+      await expect(moduleReturn).toHaveText('');
+      await expect(moduleReturn).toHaveAttribute('aria-label', '返回首页');
+      await expect(moduleReturn).toHaveCSS('width', '32px');
+      await expect(moduleReturn).toHaveCSS('height', '32px');
+      for (const badge of [createProject.locator('.classroom-create-project-icon'), project.locator('.classroom-project-icon')]) {
+        await expect(badge).toHaveCSS('width', '32px');
+        await expect(badge).toHaveCSS('height', '32px');
+        await expect(badge.locator('svg')).toHaveCSS('width', '20px');
+        await expect(badge.locator('svg')).toHaveCSS('height', '20px');
+      }
+      const actions = sidebar.getByRole('button', { name: '项目操作：咖啡机新品主视觉', exact: true });
+      await expect(actions).toHaveCSS('width', '32px');
+      await expect(actions).toHaveCSS('height', '32px');
+      const [sidebarBox, createBox, headingBox, projectBox, returnBox, communityBox, accountBox] = await Promise.all(
+        [sidebar, createProject, projectsHeading, project, moduleReturn, community, account].map((locator) => locator.boundingBox()),
+      );
+      expect(sidebarBox!.width).toBe(256);
+      expect(createBox!.height).toBe(48);
+      expect(projectBox!.height).toBe(48);
+      expect(createBox!.y - sidebarBox!.y).toBe(40);
+      expect(headingBox!.y - sidebarBox!.y).toBe(96);
+      expect(projectBox!.y - sidebarBox!.y).toBe(136);
+      expect(returnBox!.y - sidebarBox!.y).toBe(4);
+      expect(communityBox!.x).toBe(createBox!.x);
+      expect(communityBox!.height).toBe(createBox!.height);
+      expect(communityBox!.y).toBeGreaterThan(projectBox!.y + projectBox!.height);
+      expect(accountBox!.y - communityBox!.y - communityBox!.height).toBeCloseTo(0, 0);
+      expect(sidebarBox!.y + sidebarBox!.height - accountBox!.y - accountBox!.height).toBeLessThanOrEqual(14);
+      const navigationStyles = await sidebar.evaluate((element) => {
+        const recipe = (selector: string) => {
+          const style = getComputedStyle(element.querySelector(selector)!);
+          return [style.borderRadius, style.borderWidth, style.boxShadow, style.padding, style.fontSize, style.fontWeight, style.lineHeight];
+        };
+        return { create: recipe('[data-testid="sidebar-create-project"]'), community: recipe('.community-link') };
+      });
+      expect(navigationStyles.community).toEqual(navigationStyles.create);
+
       const splitBounds = (await split.boundingBox())!;
       const conversationBounds = (await conversationPane.boundingBox())!;
       const worksBounds = (await worksPane.boundingBox())!;