wangxuming/makelore
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): introduce each teacher with an individual welcome bubble

Browse Source
This commit is contained in:
鲨鱼辣椒 committed 2026-09-29 14:02:50 +08:00
1 parent e4b99d5e32
commit c82b1a43be
9 files changed
+253 -22
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/pages/Chat/classroom-workspace.css
+22
View File
@@ -113,5 +113,27 @@
.teacher-companion-actions button:hover { text-decoration: underline; text-underline-offset: 4px; }
.teacher-companion-speaker { flex-shrink: 0; width: 48px; height: 48px; margin-top: 5px; border-radius: 8px; }
.teacher-companion-speaker img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 3px 1px #33485820); }
.teacher-welcome-presence { position: absolute; top: calc(100% + 12px); right: 0; z-index: 90; width: 340px; max-width: calc(100vw - 40px); padding: 6px; border-radius: 18px; background: #fffdf8; box-shadow: 0 8px 24px #30465f12; }
.teacher-welcome-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 8px 4px; color: #6a7463; font-size: 12px; }
.teacher-welcome-heading button { min-height: 32px; padding: 0 4px; color: #4d663c; border-radius: 8px; cursor: pointer; }
.teacher-welcome-heading button:hover { background: #eef1e8; }
.teacher-welcome-list { display: grid; gap: 10px; max-height: min(440px, calc(100vh - 200px)); overflow-y: auto; overscroll-behavior: contain; padding: 4px 6px 8px; scrollbar-width: thin; }
.teacher-welcome-card { --welcome-fill: #fff3ce; --welcome-edge: #efddb0; display: flex; align-items: flex-start; gap: 10px; min-width: 0; animation: teacher-welcome-arrive 220ms ease-out backwards; animation-delay: var(--welcome-delay, 0ms); }
.teacher-welcome-card[data-tone="1"] { --welcome-fill: #edf5ff; --welcome-edge: #d7e5f5; }
.teacher-welcome-card[data-tone="2"] { --welcome-fill: #f3edfc; --welcome-edge: #e5d9f5; }
.teacher-welcome-avatar { flex-shrink: 0; width: 42px; height: 44px; margin-top: 8px; padding: 2px; border: 1px solid var(--welcome-edge); border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--welcome-edge); cursor: pointer; }
.teacher-welcome-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; }
.teacher-welcome-bubble { position: relative; flex: 1; min-width: 0; border: 1px solid var(--welcome-edge); border-radius: 17px 17px 17px 6px; background: var(--welcome-fill); box-shadow: 0 2px 0 var(--welcome-edge); }
.teacher-welcome-bubble::before { content: ''; position: absolute; top: 23px; left: -5px; width: 8px; height: 8px; transform: rotate(45deg); border-left: 1px solid var(--welcome-edge); border-bottom: 1px solid var(--welcome-edge); background: var(--welcome-fill); }
.teacher-welcome-open { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; padding: 12px; border-radius: inherit; color: #34465c; text-align: left; cursor: pointer; }
.teacher-welcome-open:hover { background: #ffffff40; }
.teacher-welcome-name { padding-right: 20px; font-size: 13px; font-weight: 600; line-height: 19px; overflow-wrap: anywhere; }
.teacher-welcome-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 13px; line-height: 1.6; }
.teacher-welcome-action { display: inline-flex; align-items: center; gap: 3px; color: #596b55; font-size: 11px; line-height: 18px; }
.teacher-welcome-dismiss { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 30px; height: 30px; color: #6e776b; border-radius: 10px; cursor: pointer; }
.teacher-welcome-dismiss:hover { background: #ffffff90; }
@keyframes teacher-welcome-arrive { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .teacher-welcome-card { animation: none; } }
@media (max-width: 600px) { .teacher-welcome-presence { position: fixed; top: 64px; right: 12px; max-width: calc(100vw - 24px); } }
/* Native preview clearance is measured against the bubble, not the whole pane. */
@media (max-height: 650px) { .teacher-companion-bubble { padding-top: 9px; } .teacher-companion-message { -webkit-line-clamp: 2; } }