feat: add bundled OpenCode skills and refine module flow

tests/e2e/main-navigation.spec.ts

@@ -24,14 +24,49 @@ test.describe('Makelore module navigation without setup flow', () => {
 
       const initialMetrics = await readCardMetrics();
       expect(initialMetrics).toHaveLength(4);
+      await expect(moduleCards.first().locator('.module-option-card-arrow')).toHaveCount(0);
+      await expect(moduleCards.first().locator('.module-option-artwork')).toHaveCount(0);
+      await expect.poll(async () => await moduleCards.first().evaluate((element) => {
+        const surface = element.querySelector<HTMLElement>('.module-option-card-surface');
+        const frame = element.querySelector<HTMLElement>('.module-option-card-frame');
+        if (!surface || !frame) return false;
+        const surfaceStyle = getComputedStyle(surface);
+        const frameStyle = getComputedStyle(frame);
+        const surfaceInsets = [surfaceStyle.top, surfaceStyle.right, surfaceStyle.bottom, surfaceStyle.left]
+          .map((value) => Number.parseFloat(value));
+        return frameStyle.display === 'none'
+          && surfaceInsets.every((value) => value === 0)
+          && surfaceStyle.transform === 'none';
+      })).toBe(true);
+      const initialImageStyles = await moduleCards.first().evaluate((element) => {
+        const image = element.querySelector<HTMLElement>('.module-option-card-image');
+        const cardHeight = element.getBoundingClientRect().height;
+        if (!image) return null;
+        const style = getComputedStyle(image);
+        return {
+          height: Number.parseFloat(style.height),
+          cardHeight,
+          marginTop: Number.parseFloat(style.marginTop),
+          marginBottom: Number.parseFloat(style.marginBottom),
+          marginLeft: Number.parseFloat(style.marginLeft),
+        };
+      });
+      expect(initialImageStyles).not.toBeNull();
+      expect(initialImageStyles!.height).toBeLessThan(initialImageStyles!.cardHeight);
+      expect(initialImageStyles!.marginTop).toBe(1);
+      expect(initialImageStyles!.marginBottom).toBe(1);
+      expect(initialImageStyles!.marginTop).toBe(initialImageStyles!.marginBottom);
+      expect(initialImageStyles!.marginLeft).toBeGreaterThan(0);
+      expect(initialImageStyles!.marginLeft).toBe(initialImageStyles!.marginTop);
       expect(Math.max(...initialMetrics.map((card) => card.left)) - Math.min(...initialMetrics.map((card) => card.left))).toBeLessThan(1);
       expect(initialMetrics.map((card) => card.top)).toEqual(
         [...initialMetrics].sort((top, bottom) => top.top - bottom.top).map((card) => card.top),
       );
 
       const initialWidth = initialMetrics[0]?.width ?? 0;
+      expect(initialMetrics[0]?.imageWidth ?? 0).toBeGreaterThan(initialWidth * 0.24);
       expect(initialMetrics[0]?.imageWidth ?? 0).toBeLessThan(initialWidth / 2);
-      expect(initialMetrics[0]?.imageHeight ?? 0).toBeGreaterThan((initialMetrics[0]?.height ?? 0) * 0.9);
+      expect(initialMetrics[0]?.imageHeight ?? 0).toBeGreaterThan((initialMetrics[0]?.height ?? 0) * 0.75);
 
       await app.evaluate(({ BrowserWindow }) => {
         BrowserWindow.getAllWindows()[0]?.setSize(1100, 700);
@@ -45,14 +80,76 @@ test.describe('Makelore module navigation without setup flow', () => {
       expect(resizedMetrics.map((card) => card.top)).toEqual(
         [...resizedMetrics].sort((top, bottom) => top.top - bottom.top).map((card) => card.top),
       );
+      expect(resizedMetrics[0]!.imageWidth).toBeGreaterThan(resizedMetrics[0]!.width * 0.24);
       expect(resizedMetrics[0]!.imageWidth).toBeLessThan(resizedMetrics[0]!.width / 2);
-      expect(resizedMetrics[0]!.imageHeight).toBeGreaterThan(resizedMetrics[0]!.height * 0.9);
+      expect(resizedMetrics[0]!.imageHeight).toBeGreaterThan(resizedMetrics[0]!.height * 0.75);
+
+      await page.mouse.move(20, 20);
+      const restingTransforms = await moduleCards.first().evaluate((element) => {
+        const surface = element.querySelector<HTMLElement>('.module-option-card-surface');
+        const image = element.querySelector<HTMLElement>('.module-option-card-image');
+        const imageMedia = element.querySelector<HTMLElement>('.module-option-card-image-media');
+        const content = element.querySelector<HTMLElement>('.module-option-card-content');
+        const title = element.querySelector<HTMLElement>('.module-option-card-title');
+        return {
+          surfaceShadow: surface ? getComputedStyle(surface).boxShadow : 'none',
+          image: image ? getComputedStyle(image).transform : 'none',
+          imageMedia: imageMedia ? getComputedStyle(imageMedia).transform : 'none',
+          content: content ? getComputedStyle(content).transform : 'none',
+          title: title ? getComputedStyle(title).transform : 'none',
+        };
+      });
+
+      await moduleCards.first().hover();
+      await moduleCards.first().focus();
+      await expect.poll(async () => await moduleCards.first().evaluate((element, rest) => {
+        const surface = element.querySelector<HTMLElement>('.module-option-card-surface');
+        const image = element.querySelector<HTMLElement>('.module-option-card-image');
+        const imageMedia = element.querySelector<HTMLElement>('.module-option-card-image-media');
+        const content = element.querySelector<HTMLElement>('.module-option-card-content');
+        const title = element.querySelector<HTMLElement>('.module-option-card-title');
+        const description = element.querySelector<HTMLElement>('.module-option-card-description');
+        const getTranslateZ = (transform: string) => {
+          if (!transform.startsWith('matrix3d(')) return 0;
+          const values = transform.slice(9, -1).split(',').map(Number);
+          return values[14] ?? 0;
+        };
+        const titleTransform = title ? getComputedStyle(title).transform : 'none';
+        const descriptionTransform = description ? getComputedStyle(description).transform : 'none';
+        return Boolean(surface)
+          && Boolean(image)
+          && Boolean(imageMedia)
+          && Boolean(content)
+          && Boolean(title)
+          && Boolean(description)
+          && getComputedStyle(surface).transform !== 'none'
+          && getComputedStyle(surface).boxShadow !== rest.surfaceShadow
+          && getComputedStyle(surface).borderTopColor === 'rgb(255, 255, 255)'
+          && getComputedStyle(image).transform !== 'none'
+          && getComputedStyle(imageMedia).transform !== 'none'
+          && getComputedStyle(content).transform !== 'none'
+          && titleTransform !== 'none'
+          && descriptionTransform !== 'none'
+          && getTranslateZ(titleTransform) > getTranslateZ(descriptionTransform) + 20;
+      }, restingTransforms)).toBe(true);
+
+      await expect.poll(async () => await moduleCards.first().evaluate((element, rest) => {
+        const image = element.querySelector<HTMLElement>('.module-option-card-image');
+        const imageMedia = element.querySelector<HTMLElement>('.module-option-card-image-media');
+        const content = element.querySelector<HTMLElement>('.module-option-card-content');
+        const title = element.querySelector<HTMLElement>('.module-option-card-title');
+        return Boolean(image && imageMedia && content && title)
+          && getComputedStyle(image!).transform !== rest.image
+          && getComputedStyle(imageMedia!).transform !== rest.imageMedia
+          && getComputedStyle(content!).transform !== rest.content
+          && getComputedStyle(title!).transform !== rest.title;
+      }, restingTransforms)).toBe(true);
     } finally {
       await closeElectronApp(app);
     }
   });
 
-  test('opens the module chooser and switches between enabled modules', async ({ launchElectronApp }) => {
+  test('returns to the module chooser from the sidebar entry', async ({ launchElectronApp }) => {
     const app = await launchElectronApp({ skipSetup: true });
 
     try {
@@ -79,33 +176,24 @@ test.describe('Makelore module navigation without setup flow', () => {
       await expect(page.getByTestId('game-asset-review-summary')).toHaveCount(0);
 
       await expect(page.getByTestId('sidebar-module-switcher')).toBeVisible();
-      await expect(page.getByTestId('sidebar-module-switcher-trigger')).toHaveAttribute('aria-expanded', 'false');
-      await page.getByTestId('sidebar-module-switcher-trigger').click();
-      await expect(page.getByTestId('sidebar-module-programming')).toHaveAttribute('aria-current', 'page');
-      await expect(page.getByTestId('sidebar-module-learning')).toBeDisabled();
-      await expect(page.getByTestId('sidebar-module-robot')).toContainText('Robot 机器');
-      await page.getByTestId('sidebar-module-painting').click();
-      await expect(page.getByTestId('image-canvas-page')).toBeVisible();
-      await expect(page.getByTestId('image-workspace-unavailable')).toBeVisible();
-      await expect(page.getByText('AI 设计暂不可用').first()).toBeVisible();
-      await expect(page.getByTestId('sidebar-image-workspace')).toBeVisible();
-      await expect(page.getByTestId('sidebar-create-image-project')).toBeVisible();
-      await expect(page.getByTestId('sidebar-image-projects')).toBeVisible();
-      await expect(page.getByText('本地开发')).toHaveCount(0);
-      await expect(page.getByTestId('sidebar-reset-local-image-workspace')).toHaveCount(0);
-      await expect(page.getByTestId('sidebar-create-project')).toHaveCount(0);
-      await expect(page.getByTestId('sidebar-module-painting')).toHaveAttribute('aria-current', 'page');
-      await page.getByTestId('sidebar-module-switcher-trigger').click();
-      await page.getByTestId('sidebar-module-robot').click();
+      const moduleHomeTrigger = page.getByTestId('sidebar-module-switcher-trigger');
+      await expect(moduleHomeTrigger).toHaveAttribute('aria-label', '返回首页');
+      await expect(moduleHomeTrigger).toHaveCSS('padding-top', '8px');
+      await expect(moduleHomeTrigger).toHaveCSS('padding-right', '8px');
+      await expect(moduleHomeTrigger).toHaveCSS('padding-bottom', '8px');
+      await expect(moduleHomeTrigger).toHaveCSS('padding-left', '8px');
+      await expect(page.getByTestId('sidebar-module-switcher-menu')).toHaveCount(0);
+      await moduleHomeTrigger.click();
+      await expect(page).toHaveURL(/\/module-select$/);
+      await expect(page.getByTestId('ai-module-selection-page')).toBeVisible();
+      await page.getByTestId('ai-module-option-robot').click();
+      await expect(page).toHaveURL(/\/ai-hardware$/);
       await expect(page.getByTestId('ai-hardware-page')).toBeVisible();
       await expect(page.getByTestId('sidebar-robot-navigation')).toBeVisible();
-      await expect(page.getByTestId('sidebar-create-project')).toHaveCount(0);
-      await expect(page.getByTestId('sidebar-module-robot')).toHaveAttribute('aria-current', 'page');
+      await expect(page.getByTestId('sidebar-module-switcher-trigger')).toContainText('Robot 机器');
       await page.getByTestId('sidebar-module-switcher-trigger').click();
-      await page.getByTestId('sidebar-module-programming').click();
-      await expect(page.getByText('请先新建项目')).toHaveCount(0);
-      await expect(page.getByText('一念成光，万物可创。')).toBeVisible();
-      await expect(page.getByTestId('chat-operation-page')).toHaveCount(0);
+      await expect(page).toHaveURL(/\/module-select$/);
+      await expect(page.getByTestId('ai-module-selection-page')).toBeVisible();
     } finally {
       await closeElectronApp(app);
     }