diff --git a/static/src/components/sidebar/ConversationSidebar.vue b/static/src/components/sidebar/ConversationSidebar.vue index 35f661d7..0a523f82 100644 --- a/static/src/components/sidebar/ConversationSidebar.vue +++ b/static/src/components/sidebar/ConversationSidebar.vue @@ -289,37 +289,39 @@ > -
- - -
+ + + + @@ -407,37 +409,39 @@ > -
- - -
+ + + + @@ -511,37 +515,39 @@ > -
- - -
+ + + + diff --git a/static/src/styles/components/sidebar/_conversation.scss b/static/src/styles/components/sidebar/_conversation.scss index 2779c09a..bb919ecf 100644 --- a/static/src/styles/components/sidebar/_conversation.scss +++ b/static/src/styles/components/sidebar/_conversation.scss @@ -542,7 +542,9 @@ body[data-theme='dark'] .conversation-sidebar .conversation-item.active:focus-wi 11px 0 0 currentColor; } -.conversation-sidebar .conversation-actions-menu { +/* 菜单通过 Teleport 挂载到 body(脱离移动端面板的 transform 包含块与 overflow 裁切), + 因此样式选择器不能挂在 .conversation-sidebar 下 */ +.conversation-actions-menu { z-index: 140; width: max-content; min-width: 92px; @@ -559,24 +561,25 @@ body[data-theme='dark'] .conversation-sidebar .conversation-item.active:focus-wi transform 150ms cubic-bezier(0.22, 1, 0.36, 1); } -.conversation-sidebar .conversation-actions-menu--absolute { +.conversation-actions-menu--absolute { position: absolute; right: 0; top: calc(100% + 6px); } -.conversation-sidebar .conversation-actions-menu--fixed { +.conversation-actions-menu--fixed { position: fixed; - z-index: 1000; + /* 需高于移动端面板遮罩 .mobile-panel-overlay(z-index: 2000) */ + z-index: 2300; } -.conversation-sidebar .conversation-actions-menu.open { +.conversation-actions-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } -.conversation-sidebar .conversation-actions-menu button { +.conversation-actions-menu button { width: 100%; min-width: 80px; height: 36px; @@ -595,11 +598,11 @@ body[data-theme='dark'] .conversation-sidebar .conversation-item.active:focus-wi transition: background 140ms ease; } -.conversation-sidebar .conversation-actions-menu button:hover { +.conversation-actions-menu button:hover { background: var(--theme-tab-active); } -.conversation-sidebar .conversation-actions-menu button.danger { +.conversation-actions-menu button.danger { color: var(--state-danger); } @@ -896,6 +899,15 @@ body[data-theme='dark'] .workspace-group-header.search-result-group-header:hover background: var(--theme-tab-active); } +/* 触摸设备(手机/平板)没有 hover:常显操作入口。 + 否则按钮透明时首次 tap 只会应用 hover 态(按钮显现)并吞掉 click,菜单打不开 */ +@media (hover: none) { + .conversation-sidebar .conversation-more-btn, + .conversation-sidebar .workspace-group-actions { + opacity: 1; + } +} + .workspace-group-children { display: grid; grid-template-rows: 0fr;