From 39b6f71443c3201da696dc506a2c5f37f838f2a5 Mon Sep 17 00:00:00 2001 From: MS-01-Codex <3647348c-0c07-48e0-8938-fb9280321c5f@agents.multica.local> Date: Tue, 18 Aug 2026 13:15:10 +0800 Subject: [PATCH] fix: align mentor page with final day/night visual review MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- app/config/architecture-inventory.json | 14 +-- app/frontend/index.html | 8 +- app/frontend/pages.config.js | 4 +- app/frontend/pages/mentor/foundation.css | 144 +++++++++++++++++++---- app/frontend/pages/mentor/page.html | 4 +- app/frontend/pages/mentor/page.js | 73 ++++++++---- app/frontend/shared/shell.css | 2 +- app/frontend/shared/tokens.css | 2 +- app/tests/e2e/app-shell.spec.js | 92 +++++++++++++-- app/tests/test_frontend_contract.py | 79 ++++++++++++- 10 files changed, 342 insertions(+), 80 deletions(-) diff --git a/app/config/architecture-inventory.json b/app/config/architecture-inventory.json index ec10204..5254157 100644 --- a/app/config/architecture-inventory.json +++ b/app/config/architecture-inventory.json @@ -370,9 +370,9 @@ } ], "css_layers": [ - "/shared/tokens.css?v=20260818-1", + "/shared/tokens.css?v=20260818-2", "/shared/base.css?v=20260806-1", - "/shared/shell.css?v=20260818-1", + "/shared/shell.css?v=20260818-2", "/shared/auth.css?v=20260806-1", "/shared/components/controls.css?v=20260806-1", "/shared/components/navigation.css?v=20260806-1", @@ -390,7 +390,7 @@ "/pages/popularity/foundation.css?v=20260806-1", "/pages/dragon-tiger/foundation.css?v=20260806-1", "/pages/screener/foundation.css?v=20260806-2", - "/pages/mentor/foundation.css?v=20260818-1", + "/pages/mentor/foundation.css?v=20260818-2", "/pages/heaven/foundation.css?v=20260806-2", "/pages/review/foundation.css?v=20260806-1" ], @@ -451,7 +451,7 @@ }, { "path": "frontend/shared/shell.css", - "bytes": 54738, + "bytes": 54781, "lines": 3348 }, { @@ -461,8 +461,8 @@ }, { "path": "frontend/index.html", - "bytes": 46345, - "lines": 649 + "bytes": 46058, + "lines": 647 }, { "path": "backend/features/screener/catalog.py", @@ -606,7 +606,7 @@ }, { "path": "frontend/pages/mentor/page.html", - "bytes": 8199, + "bytes": 8117, "lines": 110 }, { diff --git a/app/frontend/index.html b/app/frontend/index.html index ab6c4da..c289179 100644 --- a/app/frontend/index.html +++ b/app/frontend/index.html @@ -17,9 +17,9 @@ document.documentElement.style.colorScheme = theme; })(); - + - + @@ -37,7 +37,7 @@ - + @@ -593,8 +593,6 @@

公共行情

待检查
- -

默认停用。停用时仅保留凭据,不会发出任何 iFinD 请求;续费后开启此开关并保存即可恢复。

所有用户读取同一份后台快照,页面不会随后台任务自动重绘。

diff --git a/app/frontend/pages.config.js b/app/frontend/pages.config.js index b0e361f..9eeb2f8 100644 --- a/app/frontend/pages.config.js +++ b/app/frontend/pages.config.js @@ -47,7 +47,7 @@ ["heaven", "/pages/heaven/page.html?v=20260803-1", ["heavenView"]], ["ladder", "/pages/ladder/page.html?v=20260803-1", ["ladderView"]], ["screener", "/pages/screener/page.html?v=20260804-1", ["screenerView", "screenerTrackingView"]], - ["mentor", "/pages/mentor/page.html?v=20260818-1", ["mentorView"]], + ["mentor", "/pages/mentor/page.html?v=20260818-2", ["mentorView"]], ["rotation", "/pages/rotation/page.html?v=20260803-1", ["rotationView"]], ["auction", "/pages/auction/page.html?v=20260803-1", ["auctionView"]], ["themes", "/pages/themes/page.html?v=20260803-1", ["themeLibraryView"]], @@ -81,7 +81,7 @@ "/pages/popularity/page.js?v=20260729-1", "/pages/dragon-tiger/page.js?v=20260806-1", "/pages/screener/page.js?v=20260806-1", - "/pages/mentor/page.js?v=20260818-1", + "/pages/mentor/page.js?v=20260818-2", "/pages/heaven/page.js?v=20260729-1", "/pages/review/page.js?v=20260729-1", "/shared/state.js?v=20260729-1", diff --git a/app/frontend/pages/mentor/foundation.css b/app/frontend/pages/mentor/foundation.css index 0936308..f038e37 100644 --- a/app/frontend/pages/mentor/foundation.css +++ b/app/frontend/pages/mentor/foundation.css @@ -110,15 +110,16 @@ flex: 0 0 auto; display: flex; align-items: center; - gap: var(--space-8); - padding: 12px; + gap: var(--space-4); + padding: 10px 8px; border-bottom: 1px solid var(--qp-border); } #mentorView .mentor-search-field { min-width: 0; height: 32px; - flex: 1 1 auto; + flex: 1 1 218px; + max-width: 218px; display: flex; align-items: center; gap: var(--space-8); @@ -165,11 +166,12 @@ } #mentorView .mentor-filter-toggle { + width: 32px; height: 32px; display: inline-flex; align-items: center; - gap: var(--space-4); - padding: 0 10px; + justify-content: center; + padding: 0; border: 1px solid transparent; border-radius: 8px; background: var(--qp-bg-control); @@ -244,8 +246,8 @@ flex: 0 0 auto; display: inline-flex; align-items: center; - gap: var(--space-4); - padding: 0 8px; + gap: var(--space-2); + padding: 0 6px; border: 0; border-radius: 8px; background: transparent; @@ -278,14 +280,27 @@ min-height: 0; flex: 1 1 auto; overflow: hidden auto; - scrollbar-gutter: stable; + scrollbar-width: thin; padding: 4px 0; } +#mentorView .mentor-list::-webkit-scrollbar { + width: 6px; +} + +#mentorView .mentor-list::-webkit-scrollbar-thumb { + border-radius: 3px; + background: var(--qp-border-input); +} + +#mentorView .mentor-list::-webkit-scrollbar-track { + background: transparent; +} + #mentorView .mentor-option { position: relative; height: 75px; - margin: 0 8px; + margin: 0 10px 0 8px; display: flex; align-items: stretch; border-radius: 10px; @@ -323,6 +338,86 @@ cursor: pointer; } +#mentorView .mentor-avatar-tone-violet { + --qp-avatar-bg: #EEECFD; + --qp-avatar-ink: #6A5CF5; +} + +#mentorView .mentor-avatar-tone-blue { + --qp-avatar-bg: #E3F0FF; + --qp-avatar-ink: #3370FF; +} + +#mentorView .mentor-avatar-tone-green { + --qp-avatar-bg: #DDF5E5; + --qp-avatar-ink: #2EA44F; +} + +#mentorView .mentor-avatar-tone-orange { + --qp-avatar-bg: #FDEEDD; + --qp-avatar-ink: #D97A1B; +} + +#mentorView .mentor-avatar-tone-red { + --qp-avatar-bg: #FDE8EC; + --qp-avatar-ink: #D63F57; +} + +#mentorView .mentor-avatar-tone-teal { + --qp-avatar-bg: #DCF5F2; + --qp-avatar-ink: #1F9C8F; +} + +#mentorView .mentor-avatar-tone-purple { + --qp-avatar-bg: #F0E9FD; + --qp-avatar-ink: #7D52E0; +} + +#mentorView .mentor-avatar-tone-yellow { + --qp-avatar-bg: #FFF3D6; + --qp-avatar-ink: #C28904; +} + +:root[data-theme="dark"] #mentorView .mentor-avatar-tone-violet { + --qp-avatar-bg: #35305C; + --qp-avatar-ink: #A89EF2; +} + +:root[data-theme="dark"] #mentorView .mentor-avatar-tone-blue { + --qp-avatar-bg: #2B3F66; + --qp-avatar-ink: #7BA5F5; +} + +:root[data-theme="dark"] #mentorView .mentor-avatar-tone-green { + --qp-avatar-bg: #234A38; + --qp-avatar-ink: #5FCE8F; +} + +:root[data-theme="dark"] #mentorView .mentor-avatar-tone-orange { + --qp-avatar-bg: #4D3A24; + --qp-avatar-ink: #E8A05C; +} + +:root[data-theme="dark"] #mentorView .mentor-avatar-tone-red { + --qp-avatar-bg: #4D2B33; + --qp-avatar-ink: #F08A9B; +} + +:root[data-theme="dark"] #mentorView .mentor-avatar-tone-teal { + --qp-avatar-bg: #1F4540; + --qp-avatar-ink: #5CCABC; +} + +:root[data-theme="dark"] #mentorView .mentor-avatar-tone-purple { + --qp-avatar-bg: #3A3160; + --qp-avatar-ink: #B39CF0; +} + +:root[data-theme="dark"] #mentorView .mentor-avatar-tone-yellow { + --qp-avatar-bg: #4D4020; + --qp-avatar-ink: #E3B34E; +} + #mentorView .mentor-avatar { width: var(--mentor-avatar-size); height: var(--mentor-avatar-size); @@ -395,7 +490,7 @@ padding-right: 4px; } -#mentorView :is(.mentor-pin-button, .mentor-order-button) { +#mentorView :is(.mentor-order-button) { width: 30px; height: 30px; display: inline-flex; @@ -410,18 +505,17 @@ transition: color var(--motion-fast), background var(--motion-fast), opacity var(--motion-fast); } -#mentorView .mentor-option:is(:hover, :focus-within) :is(.mentor-pin-button, .mentor-order-button), -#mentorView .mentor-pin-button.active, +#mentorView .mentor-option:is(:hover, :focus-within) .mentor-order-button, #mentorView .mentor-list.is-sorting .mentor-order-button { opacity: 1; } -#mentorView :is(.mentor-pin-button, .mentor-order-button):is(:hover, .active) { +#mentorView .mentor-order-button:is(:hover, .active) { background: var(--qp-bg-btn-active); color: var(--qp-icon-active); } -#mentorView :is(.mentor-pin-button, .mentor-order-button) .lucide { +#mentorView .mentor-order-button .lucide { width: 16px; height: 16px; } @@ -538,11 +632,6 @@ white-space: nowrap; } -#mentorView .mentor-active-badges { - display: inline-flex; - gap: var(--space-4); -} - #mentorView #activeMentorStatus { margin: 2px 0 0; color: var(--qp-text-3); @@ -564,6 +653,7 @@ background: transparent; color: var(--qp-icon-normal); font-size: 18px; + border-radius: 8px; } #mentorView .mentor-header-action:hover { @@ -584,6 +674,7 @@ background: transparent; color: var(--qp-icon-normal); font-size: 18px; + border-radius: 8px; } #mentorView .mentor-clear-button:hover { @@ -676,7 +767,9 @@ } #mentorView .mentor-message.assistant .mentor-message-body { - flex: 1 1 auto; + flex: 0 1 900px; + max-width: 900px; + min-width: 0; } #mentorView .mentor-message.user .mentor-message-body { @@ -774,7 +867,8 @@ } #mentorView .mentor-follow-ups { - width: 100%; + width: 382px; + max-width: 100%; display: grid; gap: var(--space-4); margin-top: var(--space-8); @@ -1197,7 +1291,7 @@ } @media (prefers-reduced-motion: reduce) { - #mentorView :is(.mentor-sort-toggle, .mentor-search-field, .mentor-filter-toggle, .mentor-filter-options button, .mentor-option, .mentor-pin-button, .mentor-order-button, .mentor-follow-ups button, .mentor-quick-prompts button, .mentor-send-button) { + #mentorView :is(.mentor-sort-toggle, .mentor-search-field, .mentor-filter-toggle, .mentor-filter-options button, .mentor-option, .mentor-order-button, .mentor-follow-ups button, .mentor-quick-prompts button, .mentor-send-button) { transition: none; } @@ -1210,6 +1304,12 @@ } } +@media (min-width: 1920px) { + #mentorView .mentor-message.assistant { + justify-content: center; + } +} + @media (max-width: 767px) { #mentorView .mentor-layout { grid-template-columns: minmax(0, 1fr); diff --git a/app/frontend/pages/mentor/page.html b/app/frontend/pages/mentor/page.html index d66ca3c..d0e8d49 100644 --- a/app/frontend/pages/mentor/page.html +++ b/app/frontend/pages/mentor/page.html @@ -10,7 +10,7 @@
- +