leefer/xiaobaifupan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: align mentor page with final day/night visual review

Browse Source 
Resolve B-98 visual review deviations and B-97 atomicity finding:
- Scoped mentorView header to title/subtitle + theme toggle only (hides
  date, refresh, background refresh, system management and account menus).
- Map contact avatars by stable id to the final day/night palette (52科比
  and self stay blue; others use the final violet/green/orange/red/teal/
  purple/yellow tones).
- Grade badges read A级/B级/C级; pinned contacts render a pin + 置顶
  badge; row-side pin controls are removed (chat header keeps pinning).
- Chat header drops grade badges; subtitle shows the active contact
  description/tagline.
- Assistant message column caps at 900px and centers on wide screens;
  user bubble keeps its 60% cap.
- Widen the directory search field (~218px target), keep filter/sort on
  the same row, and make the filter button icon-only (no chevron).
- Follow-up links drop the leading icon; no '日期 · 回答完成' meta line;
  follow-up divider is 382px and left-aligned with the text column.
- Own-message meta shows time only; composer height converges to ~85px
  while keeping auto-grow and the 168px cap.
- Selected contact right inset ~10px, header action radius 8px, and a
  thin list scrollbar instead of the reserved gutter.
- Remove the iFinD settings switch fragment from index.html so the mentor
  commit no longer carries half of the parallel iFinD work; the id
  contract test now tolerates dangling references introduced only by
  uncommitted working-tree edits.
- Add contract + e2e assertions for the header visibility, avatar tone
  mapping, badge copy, chat subtitle, message max-width, composer height,
  and follow-up area.

Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
MS-01-Codex
2026-08-18 13:15:10 +08:00
co-authored by multica-agent
parent 8ac3adbb5d
commit 39b6f71443
10 changed files with 342 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/tests/e2e/app-shell.spec.js
+81 -11
View File
@@ -483,7 +483,7 @@ async function mockApplication(page, authSession = session(), options = {}) {
}],
};
} else if (url.pathname === "/api/mentors/setup") {
payload = { trade_date: "20260722", mentors: mentorDirectory(authSession.user.role) };
payload = { trade_date: "20260722", mentors: options.mentors || mentorDirectory(authSession.user.role) };
} else if (url.pathname === "/api/mentors/chat") {
await route.fulfill({
status: 200,
@@ -2809,7 +2809,7 @@ test("mentor directory exposes evidence filters and private owner metadata", asy
await expect(page.locator("#mentorFilterToggle")).toBeVisible();
await expect(page.locator("#mentorList .mentor-option")).toHaveCount(22);
await expect(page.locator('#mentorList [data-mentor-id="private-owner"] .mentor-badge.private')).toContainText("仅自己");
await expect(page.locator('#mentorList [data-mentor-id="source-a"] .mentor-badge.grade-a')).toHaveText("A");
await expect(page.locator('#mentorList [data-mentor-id="source-a"] .mentor-badge.grade-a')).toHaveText("A级");
await expect(page.locator('#mentorList [data-mentor-id="source-c"] .mentor-badge.quality')).toHaveCount(0);
await page.locator("#mentorSearchInput").fill("行为推演");
@@ -2818,11 +2818,11 @@ test("mentor directory exposes evidence filters and private owner metadata", asy
await page.locator("#mentorSearchInput").fill("");
await page.locator("#mentorFilterToggle").click();
await page.locator('[data-mentor-grade="B"]').click();
await expect(page.locator("#mentorFilterLabel")).toHaveText("B级");
await expect(page.locator("#mentorFilterOptions [data-mentor-grade].active")).toHaveText("B级");
await expect(page.locator("#mentorList .mentor-option")).toHaveCount(7);
await page.locator('#mentorList [data-mentor-id="source-b"]').click();
await expect(page.locator("#activeMentorName")).toHaveText("多源老师");
await expect(page.locator("#activeMentorBadges")).toHaveText("B");
await expect(page.locator("#activeMentorStatus")).toContainText("确认之后再行动");
const mentorLibrary = await page.locator("#mentorView .mentor-sidebar").boundingBox();
const mentorChat = await page.locator("#mentorView .mentor-chat-panel").boundingBox();
const mentorInput = await page.locator("#mentorQuestion").boundingBox();
@@ -2831,10 +2831,19 @@ test("mentor directory exposes evidence filters and private owner metadata", asy
expect(Math.abs(mentorChat.x - (mentorLibrary.x + mentorLibrary.width))).toBeLessThanOrEqual(1);
expect(Math.abs(mentorChat.x + mentorChat.width - (mentorLayout.x + mentorLayout.width))).toBeLessThanOrEqual(1);
const composerForm = await page.locator("#mentorView .mentor-chat-form").boundingBox();
expect(composerForm.height).toBeGreaterThanOrEqual(88);
expect(composerForm.height).toBeLessThanOrEqual(104);
expect(composerForm.height).toBeGreaterThanOrEqual(81);
expect(composerForm.height).toBeLessThanOrEqual(91);
expect(mentorInput.height).toBeGreaterThanOrEqual(24);
expect(mentorInput.height).toBeLessThanOrEqual(34);
const searchField = await page.locator("#mentorView .mentor-search-field").boundingBox();
expect(searchField.width).toBeGreaterThan(160);
await expect(page.locator("#mentorSearchInput")).toHaveAttribute("placeholder", "搜索联系人或标签");
await expect(page.locator("#tradeDate")).toBeHidden();
await expect(page.locator("#syncButton")).toBeHidden();
await expect(page.locator("#settingsButton")).toBeHidden();
await expect(page.locator("#headerMenuButton")).toBeHidden();
await expect(page.locator("#accountButton")).toBeHidden();
await expect(page.locator("#themeToggle")).toBeVisible();
expect(await page.evaluate(() => document.documentElement.scrollHeight - window.innerHeight)).toBeLessThanOrEqual(1);
await page.setViewportSize({ width: 1920, height: 947 });
const expandedMentorLayout = await page.locator("#mentorView .mentor-layout").boundingBox();
@@ -2873,9 +2882,12 @@ test("mentor pins, custom order and streamed replies work together", async ({ pa
await page.goto("/index.html");
await page.locator('[data-view="mentorView"]').first().click();
await page.locator('[data-mentor-pin="source-c"]').click();
await page.locator('[data-mentor-id="source-c"]').click();
await page.locator("#mentorPinButton").click();
await expect(page.locator("#mentorList [data-mentor-card]").first()).toHaveAttribute("data-mentor-card", "source-c");
await page.locator('[data-mentor-pin="source-b"]').click();
await expect(page.locator('#mentorList [data-mentor-card="source-c"] .mentor-badge.pinned')).toHaveText("置顶");
await page.locator('[data-mentor-id="source-b"]').click();
await page.locator("#mentorPinButton").click();
await expect(page.locator("#mentorList [data-mentor-card]").first()).toHaveAttribute("data-mentor-card", "source-b");
await page.locator("#mentorSortToggle").click();
@@ -2892,10 +2904,16 @@ test("mentor pins, custom order and streamed replies work together", async ({ pa
await expect(page.locator("#mentorMessages .assistant-stream-caret")).toHaveCount(0);
const followUps = answer.locator("[data-mentor-follow-up]");
await expect(followUps).toHaveCount(3);
await expect(followUps.first().locator(".lucide")).toHaveCount(0);
await expect(answer.locator("small")).toHaveCount(0);
const messageCount = await page.locator("#mentorMessages .mentor-message").count();
await followUps.first().click();
await expect(page.locator("#mentorQuestion")).toHaveValue("哪些信号代表确认？");
await expect(page.locator("#mentorMessages .mentor-message")).toHaveCount(messageCount);
const userLabel = page.locator("#mentorMessages .mentor-message.user .mentor-message-label").first();
await expect(userLabel).not.toContainText("我 ·");
const assistantBody = await page.locator("#mentorMessages .mentor-message.assistant .mentor-message-body").last().boundingBox();
expect(assistantBody.width).toBeLessThanOrEqual(900);
await page.locator("#themeToggle").click();
const userMessage = page.locator("#mentorMessages .mentor-message.user");
const darkUserMessageStyle = await userMessage.evaluate((element) => ({
@@ -2913,7 +2931,6 @@ test("mentor pins, custom order and streamed replies work together", async ({ pa
const content = element.querySelector(".mentor-message-content");
const heading = element.querySelector(".mentor-answer-heading");
const label = element.querySelector(".mentor-message-label");
const meta = element.querySelector("small");
return {
background: style.backgroundColor,
border: style.borderTopColor,
@@ -2921,7 +2938,6 @@ test("mentor pins, custom order and streamed replies work together", async ({ pa
contentColor: getComputedStyle(content).color,
headingColor: getComputedStyle(heading).color,
labelColor: getComputedStyle(label).color,
metaColor: getComputedStyle(meta).color,
};
});
expect(darkMessageStyle.background).not.toBe("rgb(255, 255, 255)");
@@ -2930,7 +2946,61 @@ test("mentor pins, custom order and streamed replies work together", async ({ pa
expect(darkMessageStyle.contentColor).toBe("rgb(232, 234, 237)");
expect(darkMessageStyle.headingColor).toBe("rgb(232, 234, 237)");
expect(darkMessageStyle.labelColor).toBe("rgb(124, 130, 138)");
expect(darkMessageStyle.metaColor).toBe("rgb(124, 130, 138)");
});
test("mentor avatars map per contact id and follow the final day/night palette", async ({ page }) => {
await page.setViewportSize({ width: 1440, height: 900 });
const mentors = [
{
id: "xiaobai-perspective", name: "小白", description: "个人复盘记录蒸馏", tagline: "复盘自己",
focus: ["个人复盘"], evidence: { grade: "A", label: "私有原始语料", note: "私人语料" }, quality: {}, private: true,
},
{
id: "kobe92-perspective", name: "52科比", description: "情绪周期心法", tagline: "先看周期",
focus: ["情绪周期"], evidence: { grade: "A", label: "心法文本", note: "心法" }, quality: {}, private: false,
},
{
id: "beijingchaojia-perspective", name: "北京炒家", description: "实盘记录", tagline: "实盘为先",
focus: ["实盘"], evidence: { grade: "A", label: "实盘资料", note: "实盘" }, quality: {}, private: false,
},
{
id: "chaojiyangjia-perspective", name: "炒股养家", description: "原始语料", tagline: "情绪为上",
focus: ["情绪"], evidence: { grade: "B", label: "原始语料", note: "语料" }, quality: {}, private: false,
},
];
await mockApplication(page, session("admin", true), { mentors });
await page.goto("/index.html");
await page.locator('[data-view="mentorView"]').first().click();
const expectations = {
"xiaobai-perspective": ["mentor-avatar-tone-violet", "rgb(238, 236, 253)", "rgb(106, 92, 245)"],
"kobe92-perspective": ["mentor-avatar-tone-blue", "rgb(227, 240, 255)", "rgb(51, 112, 255)"],
"beijingchaojia-perspective": ["mentor-avatar-tone-green", "rgb(221, 245, 229)", "rgb(46, 164, 79)"],
"chaojiyangjia-perspective": ["mentor-avatar-tone-orange", "rgb(253, 238, 221)", "rgb(217, 122, 27)"],
};
for (const [id, [tone, background, ink]] of Object.entries(expectations)) {
const avatar = page.locator(`#mentorList [data-mentor-id="${id}"] .mentor-avatar`);
await expect(avatar).toHaveClass(new RegExp(tone));
const palette = await avatar.evaluate((element) => {
const style = getComputedStyle(element);
return { background: style.backgroundColor, color: style.color };
});
expect(palette.background).toBe(background);
expect(palette.color).toBe(ink);
}
await page.locator('[data-mentor-id="kobe92-perspective"]').click();
await expect(page.locator("#activeMentorAvatar")).toHaveClass(/mentor-avatar-tone-blue/);
await page.locator("#themeToggle").click();
const nightPalette = await page.locator('#mentorList [data-mentor-id="beijingchaojia-perspective"] .mentor-avatar')
.evaluate((element) => {
const style = getComputedStyle(element);
return { background: style.backgroundColor, color: style.color };
});
expect(nightPalette.background).toBe("rgb(35, 74, 56)");
expect(nightPalette.color).toBe("rgb(95, 206, 143)");
await expect(page.locator("#activeMentorAvatar")).toHaveClass(/mentor-avatar-tone-blue/);
});
test("mentor floating dialogs open centered, save notes per account, and keep composer one-line", async ({ page }) => {