Преглед изворни кода

style: 时间随消息操作悬浮显示

samien пре 2 месеци
родитељ
комит
7b4df819d4
2 измењених фајлова са 6 додато и 2 уклоњено
  1. 1 1
      src/client/components/messages/MessageTimeline.vue
  2. 5 1
      tests/e2e/workspace.spec.ts

+ 1 - 1
src/client/components/messages/MessageTimeline.vue

@@ -288,7 +288,7 @@ defineExpose({ scrollToMessage, scrollToBottom })
 .message--user .message__attachments { margin: 0 0 9px; }.message--user .message__attachments button { width: 100%; max-width: none; min-height: 50px; padding: 7px 9px; border: 0; border-radius: 11px; background: rgba(255,255,255,.48); color: var(--text-primary); }.message--user .message__attachments button > span { width: 28px; height: 28px; background: rgba(255,255,255,.65); }.message--user .message__attachments strong { font-size: 11px; font-weight: 560; }.dark .message--user .message__attachments button { background: rgba(255,255,255,.08); }
 .message--user .message__attachments { margin: 0 0 9px; }.message--user .message__attachments button { width: 100%; max-width: none; min-height: 50px; padding: 7px 9px; border: 0; border-radius: 11px; background: rgba(255,255,255,.48); color: var(--text-primary); }.message--user .message__attachments button > span { width: 28px; height: 28px; background: rgba(255,255,255,.65); }.message--user .message__attachments strong { font-size: 11px; font-weight: 560; }.dark .message--user .message__attachments button { background: rgba(255,255,255,.08); }
 .message__tools { margin-top: 9px; }.message__error { display: flex; align-items: center; gap: 5px; margin: 7px 0 0; color: var(--danger); font-size: 9px; }
 .message__tools { margin-top: 9px; }.message__error { display: flex; align-items: center; gap: 5px; margin: 7px 0 0; color: var(--danger); font-size: 9px; }
 .message__actions { display: flex; position: absolute; left: -3px; top: 100%; gap: 2px; padding-top: 2px; opacity: 0; transition: opacity 120ms ease; }.message:hover .message__actions, .message:focus-within .message__actions { opacity: 1; }.message--user .message__actions { right: 0; left: auto; }.message__actions button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); cursor: pointer; }.message__actions button:hover { background: var(--surface-soft); color: var(--text-primary); }
 .message__actions { display: flex; position: absolute; left: -3px; top: 100%; gap: 2px; padding-top: 2px; opacity: 0; transition: opacity 120ms ease; }.message:hover .message__actions, .message:focus-within .message__actions { opacity: 1; }.message--user .message__actions { right: 0; left: auto; }.message__actions button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); cursor: pointer; }.message__actions button:hover { background: var(--surface-soft); color: var(--text-primary); }
-.message--assistant-anonymous .message__actions { align-items: center; opacity: .72; }.message--assistant-anonymous:hover .message__actions, .message--assistant-anonymous:focus-within .message__actions { opacity: 1; }.message__action-time { min-width: 36px; padding: 0 4px 0 3px; color: var(--text-muted); font-size: 9px; font-variant-numeric: tabular-nums; }
+.message--assistant-anonymous .message__actions { align-items: center; }.message__action-time { min-width: 36px; padding: 0 4px 0 3px; color: var(--text-muted); font-size: 9px; font-variant-numeric: tabular-nums; }
 .message--failed .message__body { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
 .message--failed .message__body { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
 .message--revealed .message__body { animation: reveal-message 1.8s ease; }
 .message--revealed .message__body { animation: reveal-message 1.8s ease; }
 @keyframes reveal-message { 0%, 28% { box-shadow: 0 0 0 5px var(--focus-ring); } 100% { box-shadow: 0 0 0 0 transparent; } }
 @keyframes reveal-message { 0%, 28% { box-shadow: 0 0 0 5px var(--focus-ring); } 100% { box-shadow: 0 0 0 0 transparent; } }

+ 5 - 1
tests/e2e/workspace.spec.ts

@@ -126,7 +126,11 @@ test('keeps the canonical logo and yaoyao-webui composer geometry', async ({ pag
   await expect(page.locator('.timeline')).toHaveCSS('background-color', 'rgb(255, 255, 255)')
   await expect(page.locator('.timeline')).toHaveCSS('background-color', 'rgb(255, 255, 255)')
   await expect(page.locator('.message--assistant .message__avatar')).toHaveCount(0)
   await expect(page.locator('.message--assistant .message__avatar')).toHaveCount(0)
   await expect(page.locator('.message--assistant .message__meta')).toHaveCount(0)
   await expect(page.locator('.message--assistant .message__meta')).toHaveCount(0)
-  await expect(page.locator('.message--assistant-anonymous:not(.message--tool-only) .message__action-time').first()).toBeVisible()
+  const assistantMessage = page.locator('.message--assistant-anonymous:not(.message--tool-only)').first()
+  await page.mouse.move(1200, 20)
+  await expect(assistantMessage.locator('.message__actions')).toHaveCSS('opacity', '0')
+  await assistantMessage.hover()
+  await expect(assistantMessage.locator('.message__actions')).toHaveCSS('opacity', '1')
   await expect(page.locator('.message--tool-only .message__actions')).toHaveCount(0)
   await expect(page.locator('.message--tool-only .message__actions')).toHaveCount(0)
   await expect(page.locator('[data-message-id="message-thinking-tool"] .message__actions')).toHaveCount(0)
   await expect(page.locator('[data-message-id="message-thinking-tool"] .message__actions')).toHaveCount(0)
   await expect(page.locator('.message--user .message__meta')).toHaveCSS('display', 'none')
   await expect(page.locator('.message--user .message__meta')).toHaveCSS('display', 'none')