{running ? '此对话已归档，任务仍在运行。' : '此对话已归档，恢复后可继续聊天。'}
diff --git a/src/pages/Chat/CodingStartHeading.tsx b/src/pages/Chat/CodingStartHeading.tsx
index f40c5e70..ab2cfacd 100644
--- a/src/pages/Chat/CodingStartHeading.tsx
+++ b/src/pages/Chat/CodingStartHeading.tsx
@@ -1,10 +1,8 @@
-import { Sparkles, Star } from 'lucide-react';
-import mark from '@/assets/consultations/mark.svg';
+import { CommunityLink } from '@/components/community/CommunityLink';
export function CodingStartHeading() {
return
- 
-
;
diff --git a/src/pages/Chat/classroom-workspace.css b/src/pages/Chat/classroom-workspace.css
index 56e51910..9081d19d 100644
--- a/src/pages/Chat/classroom-workspace.css
+++ b/src/pages/Chat/classroom-workspace.css
@@ -8,25 +8,31 @@
[data-testid="sidebar"][data-classroom="true"] .classroom-sidebar-header { padding-top: 0; padding-bottom: 0; }
[data-testid="sidebar"][data-classroom="true"] [data-testid="classroom-sidebar-navigation"] { align-items: center; }
[data-testid="sidebar"][data-classroom="true"] .classroom-brand { height: 46px; gap: 10px; padding: 0 2px; }
-[data-testid="sidebar"][data-classroom="true"] .classroom-sidebar-header .community-link[data-variant="sidebar"] { min-height: 41px; margin-top: 10px; gap: 9px; padding: 8px 11px; border: 1px solid #d5e1ed; border-radius: 11px; background: #f8faf5; box-shadow: 0 3px 0 #e3eaf3; font-size: 14px; font-weight: 500; line-height: 20px; white-space: normal; }
-[data-testid="sidebar"][data-classroom="true"] .classroom-sidebar-header .community-link[data-variant="sidebar"]:hover:not(:disabled) { background: #eef3e7; border-color: #b7c6a4; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-sidebar-header .community-link[data-variant="sidebar"] { min-height: 48px; margin-top: 10px; gap: 8px; padding: 8px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: #26384d; font-size: 14px; font-weight: 600; line-height: 20px; white-space: normal; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-sidebar-header .community-link[data-variant="sidebar"]:hover:not(:disabled) { background: #eef3e7; }
+[data-testid="sidebar"][data-classroom="true"] .community-link-icon { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border: 1px solid #dce5d0; border-radius: 12px; background: #f0f5e8; color: #526b46; }
+[data-testid="sidebar"][data-classroom="true"] .community-link-icon svg { width: 20px; height: 20px; }
+[data-testid="sidebar"][data-classroom="true"] .community-link-arrow { margin-left: auto; color: #64758a; }
[data-testid="sidebar"][data-classroom="true"] .classroom-brand:hover { background: #eaf1f8; }
.classroom-brand-mark { display: grid; place-items: center; width: 40px; height: 42px; flex-shrink: 0; border: 1px solid #f1d1aa; border-radius: 12px; background: #fff0dd; box-shadow: 0 3px 0 #ecdbc5; }
.classroom-brand-caption { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #64758a; }
[data-testid="sidebar"][data-classroom="true"] .classroom-sidebar-content { padding: 10px 12px 14px; }
-[data-testid="sidebar"][data-classroom="true"] [data-testid="sidebar-create-project"] { min-height: 41px; gap: 9px; padding: 8px 11px; border: 1px solid #d5e1ed; border-radius: 11px; background: #fff; color: #304968; box-shadow: 0 3px 0 #e3eaf3; }
+[data-testid="sidebar"][data-classroom="true"] [data-testid="sidebar-create-project"] { min-height: 48px; gap: 8px; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: #26384d; box-shadow: none; font-size: 14px; font-weight: 600; }
[data-testid="sidebar"][data-classroom="true"] [data-testid="sidebar-create-project"] svg { color: #c44b23; }
-[data-testid="sidebar"][data-classroom="true"] [data-testid="sidebar-create-project"]:hover { background: #fff7ef; border-color: #ecc5a5; }
+[data-testid="sidebar"][data-classroom="true"] [data-testid="sidebar-create-project"]:hover { background: #fff0e6; }
+.classroom-create-project-icon { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border: 1px solid #f0d9c7; border-radius: 12px; background: #ffead9; }
+.classroom-create-project-icon svg { width: 20px; height: 20px; }
[data-testid="sidebar"][data-classroom="true"] .classroom-projects { margin-top: 8px; }
[data-testid="sidebar"][data-classroom="true"] .classroom-projects-heading { padding: 6px 3px; color: #64758a; }
[data-testid="sidebar"][data-classroom="true"] .classroom-projects-heading > svg { display: none; }
-[data-testid="sidebar"][data-classroom="true"] .classroom-project-card { min-height: 56px; gap: 9px; padding: 8px 40px 8px 8px; border: 1px solid transparent; border-radius: 13px; }
-[data-testid="sidebar"][data-classroom="true"] .classroom-project-card:hover { background: #fff; }
-[data-testid="sidebar"][data-classroom="true"] .classroom-project-card[aria-current="page"] { background: #fff; border-color: #c9d9e9; box-shadow: 0 3px 0 #e2eaf3; }
-.classroom-project-icon { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 37px; border-radius: 10px; background: #ffead9; color: #a85026; }
-.classroom-project-icon svg { width: 21px; height: 21px; }
-.classroom-project-icon[data-tone="green"] { background: #e1f1d9; color: #507d39; }
-.classroom-project-icon[data-tone="blue"] { background: #deedfb; color: #3a6d9d; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-project-card { min-height: 48px; gap: 8px; padding: 8px 40px 8px 8px; border: 0; border-radius: 8px; box-shadow: none; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-project-card:hover { background: #eaf1f8; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-project-card[aria-current="page"] { background: hsl(var(--brand-soft)); box-shadow: none; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-project-card > span:last-child { font-size: 14px; font-weight: 600; }
+.classroom-project-icon { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border: 1px solid #f0d9c7; border-radius: 12px; background: #ffead9; color: #a85026; }
+.classroom-project-icon svg { width: 20px; height: 20px; }
+.classroom-project-icon[data-tone="green"] { border-color: #cfe3c6; background: #e1f1d9; color: #507d39; }
+.classroom-project-icon[data-tone="blue"] { border-color: #cddfec; background: #deedfb; color: #3a6d9d; }
[data-testid="sidebar"][data-classroom="true"] [data-testid="project-conversations"] { padding: 8px 0 4px; font-size: 13px; }
[data-testid="sidebar"][data-classroom="true"] .classroom-conversation-actions { gap: 2px; margin-bottom: 4px; color: #64758a; }
[data-testid="sidebar"][data-classroom="true"] .classroom-conversation-actions button { min-height: 32px; min-width: 30px; border-radius: 8px; }
diff --git a/tests/e2e/community-welcome.spec.ts b/tests/e2e/community-welcome.spec.ts
index eff697c2..ad4e42aa 100644
--- a/tests/e2e/community-welcome.spec.ts
+++ b/tests/e2e/community-welcome.spec.ts
@@ -39,10 +39,18 @@ test.afterAll(async () => { await server?.close(); });
test.beforeEach(async ({ page }) => {
page.on('pageerror', error => { throw error; });
await page.addInitScript(() => {
- const scope = window as typeof window & { __communityCalls: unknown[][] };
+ const scope = window as typeof window & { __communityCalls: unknown[][]; __communityFailures: number };
scope.__communityCalls = [];
+ scope.__communityFailures = 0;
Object.defineProperty(window, 'electron', { value: { ipcRenderer: {
- invoke: async (...args: unknown[]) => { scope.__communityCalls.push(args); return undefined; },
+ invoke: async (...args: unknown[]) => {
+ scope.__communityCalls.push(args);
+ if (args[0] === 'shell:openExternal' && scope.__communityFailures > 0) {
+ scope.__communityFailures--;
+ throw new Error('unavailable');
+ }
+ return undefined;
+ },
} } });
});
});
@@ -62,17 +70,16 @@ for (const width of [375, 768, 1280, 1470]) {
}).toBe(true);
}
await expect(page.locator('.coding-start-mark')).toHaveCSS('animation-name', 'none');
- await page.getByTestId('community-invitation').scrollIntoViewIfNeeded();
+ await page.getByTestId('community-welcome-link').scrollIntoViewIfNeeded();
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(width);
- await expect(page.getByRole('button', { name: '去作品广场逛逛' })).toBeVisible();
+ await expect(page.getByTestId('community-welcome-link')).toBeVisible();
+ await expect(page.getByTestId('community-invitation')).toHaveCount(0);
while (await teachers.count()) await teachers.getByRole('button', { name: /^收起全部老师介绍/ }).first().click();
await heading.scrollIntoViewIfNeeded();
const composer = page.getByTestId('coding-message-composer');
await expect(composer).toBeInViewport({ ratio: 1 });
const box = (await composer.boundingBox())!;
expect(850 - box.y - box.height).toBeLessThanOrEqual(40);
- const invitation = (await page.getByTestId('community-invitation').boundingBox())!;
- expect(box.y - invitation.y - invitation.height).toBeCloseTo(12, 0);
await page.screenshot({ path: test.info().outputPath(`community-welcome-${width}.png`) });
});
}
@@ -87,6 +94,12 @@ test('a short window scrolls the welcome while keeping the composer at the botto
const after = (await composer.boundingBox())!;
expect(after.y).toBeCloseTo(before.y, 0);
expect(600 - after.y - after.height).toBeLessThanOrEqual(40);
+ const teachers = page.getByTestId('teacher-welcomes');
+ while (await teachers.count()) await teachers.getByRole('button', { name: /^收起全部老师介绍/ }).first().click();
+ await page.getByTestId('community-welcome-link').scrollIntoViewIfNeeded();
+ await expect(page.getByTestId('community-welcome-link')).toBeInViewport({ ratio: 1 });
+ await expect(page.getByTestId('community-invitation')).toHaveCount(0);
+ expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(375);
});
for (const width of [1280, 1470]) {
@@ -104,10 +117,7 @@ for (const width of [1280, 1470]) {
return Math.abs(input!.x + input!.width / 2 - (side!.x + side!.width + width) / 2);
}).toBeLessThan(2);
const input = (await composer.boundingBox())!;
- const invitation = (await page.getByTestId('community-invitation').boundingBox())!;
- expect(invitation.x).toBeCloseTo(input.x, 0);
- expect(invitation.width).toBeCloseTo(input.width, 0);
- expect(input.y - invitation.y - invitation.height).toBeCloseTo(12, 0);
+ await expect(page.getByTestId('community-invitation')).toHaveCount(0);
const heading = page.getByTestId('coding-start-heading');
await expect.poll(async () => {
const [title, content] = await Promise.all([heading.boundingBox(), page.locator('.classroom-chat-view').boundingBox()]);
@@ -136,7 +146,7 @@ for (const width of [1280, 1470]) {
});
}
-test('the community link opens only on click and leaves the draft mounted', async ({ page }) => {
+test('the welcome entry opens only on click and leaves the draft mounted', async ({ page }) => {
await page.setViewportSize({ width: 1280, height: 850 });
const communityRequests: string[] = [];
page.on('request', request => { if (request.url().includes('square.nianxx.cn')) communityRequests.push(request.url()); });
@@ -144,14 +154,44 @@ test('the community link opens only on click and leaves the draft mounted', asyn
const composer = page.getByRole('textbox');
await composer.fill('我想做一个自己的小镇');
await composer.evaluate(node => node.setAttribute('data-mounted', 'same'));
- await page.getByRole('button', { name: '去作品广场逛逛' }).click();
+ const calls = () => page.evaluate(() => (window as typeof window & { __communityCalls: unknown[][] }).__communityCalls);
+ expect(await calls()).toEqual([]);
+ await expect(page.getByTestId('community-invitation')).toHaveCount(0);
+ await page.getByTestId('community-welcome-link').click();
expect(await page.evaluate(() => (window as typeof window & { __communityCalls: unknown[][] }).__communityCalls))
- .toContainEqual(['shell:openExternal', 'https://square.nianxx.cn/#explore']);
+ .toEqual([['shell:openExternal', 'https://square.nianxx.cn/#explore']]);
expect(communityRequests).toEqual([]);
await expect(page.locator('iframe')).toHaveCount(0);
await expect(composer).toHaveValue('我想做一个自己的小镇');
await expect(composer).toHaveAttribute('data-mounted', 'same');
+ await expect(page.getByTestId('coding-start-heading')).toBeVisible();
+ await expect(page.getByText('第一条消息已发送（测试）')).toHaveCount(0);
await page.getByRole('button', { name: '发送', exact: true }).click();
- await expect(page.getByTestId('community-invitation')).toHaveCount(0);
+ await expect(page.getByTestId('community-welcome-link')).toHaveCount(0);
await expect(composer).toHaveAttribute('data-mounted', 'same');
});
+
+test('the welcome entry supports keyboard activation and retry while preserving the draft', async ({ page }) => {
+ await page.setViewportSize({ width: 375, height: 600 });
+ await page.goto(baseUrl);
+ const composer = page.getByRole('textbox');
+ await composer.fill('保留我的草稿');
+ await page.evaluate(() => { (window as typeof window & { __communityFailures: number }).__communityFailures = 1; });
+ const entry = page.getByTestId('community-welcome-link');
+ await entry.focus();
+ await expect(entry).toBeFocused();
+ await expect(entry).toHaveCSS('outline-style', 'solid');
+ await entry.press('Enter');
+ await expect(page.getByRole('alert')).toHaveText('没能打开作品广场，请再点一次试试。');
+ await expect(entry).toBeEnabled();
+ await entry.press('Space');
+ await expect(page.getByRole('alert')).toHaveCount(0);
+ expect(await page.evaluate(() => (window as typeof window & { __communityCalls: unknown[][] }).__communityCalls))
+ .toEqual([
+ ['shell:openExternal', 'https://square.nianxx.cn/#explore'],
+ ['shell:openExternal', 'https://square.nianxx.cn/#explore'],
+ ]);
+ await expect(composer).toHaveValue('保留我的草稿');
+ await expect(page.getByTestId('coding-start-heading')).toBeVisible();
+ await expect(page.getByText('第一条消息已发送（测试）')).toHaveCount(0);
+});
diff --git a/tests/e2e/fixtures/community-welcome.tsx b/tests/e2e/fixtures/community-welcome.tsx
index 33fa9d23..49715672 100644
--- a/tests/e2e/fixtures/community-welcome.tsx
+++ b/tests/e2e/fixtures/community-welcome.tsx
@@ -4,7 +4,6 @@ import { CodingChatBody } from '../../../src/pages/Chat/CodingChatBody';
import { CodingStartHeading } from '../../../src/pages/Chat/CodingStartHeading';
import { CodingComposer } from '../../../src/pages/Chat/CodingComposer';
import { TeacherCompanion } from '../../../src/pages/Chat/TeacherCompanion';
-import { CommunityInvitation } from '../../../src/components/community/CommunityInvitation';
import '../../../src/styles/globals.css';
import '../../../src/pages/Chat/classroom-workspace.css';
@@ -37,7 +36,6 @@ export function Layout() {
小点子，也能变成大惊喜
+今天，你想创造什么？
一个游戏、一段故事，或是一个天马行空的想法。
{!sent ?
第一条消息已发送（测试）
}
- {!sent && ({ invokeIpc: vi.fn() }));
beforeEach(() => { vi.mocked(invokeIpc).mockReset().mockResolvedValue(undefined); });
-afterEach(cleanup);
+afterEach(() => { cleanup(); vi.restoreAllMocks(); });
it('only opens the public explore URL after a click, without fetching or embedding works', async () => {
const fetch = vi.spyOn(globalThis, 'fetch');
- render(