fix(ui): 下拉箭头统一改为 SVG 修复旋转偏心;个人空间菜单展开对齐 4 个整选项并显示悬浮滚动条
This commit is contained in:
parent
c76431a8f1
commit
c7ea8a395c
@ -345,7 +345,7 @@
|
|||||||
aria-haspopup="true"
|
aria-haspopup="true"
|
||||||
>
|
>
|
||||||
<span>{{ agentTypeLabel }}</span>
|
<span>{{ agentTypeLabel }}</span>
|
||||||
<span class="agent-type-switcher__caret" :class="{ open: agentTypeMenuOpen }" aria-hidden="true">›</span>
|
<svg class="agent-type-switcher__caret" :class="{ open: agentTypeMenuOpen }" viewBox="0 0 10 10" aria-hidden="true"><path d="M2.75 3.75L5 6.25L7.25 3.75" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||||
</button>
|
</button>
|
||||||
<div v-if="agentTypeMenuOpen && !agentTypeLocked" class="agent-type-switcher__menu" @click.stop>
|
<div v-if="agentTypeMenuOpen && !agentTypeLocked" class="agent-type-switcher__menu" @click.stop>
|
||||||
<button
|
<button
|
||||||
@ -372,7 +372,7 @@
|
|||||||
:title="workModeLocked ? $t('input.workModeLockedTitle') : $t('input.workModeTitle')"
|
:title="workModeLocked ? $t('input.workModeLockedTitle') : $t('input.workModeTitle')"
|
||||||
>
|
>
|
||||||
<span>{{ workModeLabel }}</span>
|
<span>{{ workModeLabel }}</span>
|
||||||
<span class="agent-type-switcher__caret" :class="{ open: workModeMenuOpen }" aria-hidden="true">›</span>
|
<svg class="agent-type-switcher__caret" :class="{ open: workModeMenuOpen }" viewBox="0 0 10 10" aria-hidden="true"><path d="M2.75 3.75L5 6.25L7.25 3.75" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||||
</button>
|
</button>
|
||||||
<div v-if="workModeMenuOpen && !workModeLocked" class="agent-type-switcher__menu" @click.stop>
|
<div v-if="workModeMenuOpen && !workModeLocked" class="agent-type-switcher__menu" @click.stop>
|
||||||
<button
|
<button
|
||||||
@ -531,7 +531,7 @@
|
|||||||
:class="{ 'permission-switcher__exec--warn': currentExecutionMode === 'direct' }"
|
:class="{ 'permission-switcher__exec--warn': currentExecutionMode === 'direct' }"
|
||||||
>{{ currentExecutionShortLabel }}</span
|
>{{ currentExecutionShortLabel }}</span
|
||||||
>
|
>
|
||||||
<span class="permission-switcher__caret" :class="{ open: permissionMenuOpen }">›</span>
|
<svg class="permission-switcher__caret" :class="{ open: permissionMenuOpen }" viewBox="0 0 10 10" aria-hidden="true"><path d="M2.75 3.75L5 6.25L7.25 3.75" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||||
</button>
|
</button>
|
||||||
<div
|
<div
|
||||||
v-if="permissionMenuOpen"
|
v-if="permissionMenuOpen"
|
||||||
|
|||||||
@ -174,16 +174,10 @@ body[data-theme='dark'] .settings-redesign-card {
|
|||||||
|
|
||||||
.settings-redesign-tabs::-webkit-scrollbar,
|
.settings-redesign-tabs::-webkit-scrollbar,
|
||||||
.settings-redesign-scroll::-webkit-scrollbar,
|
.settings-redesign-scroll::-webkit-scrollbar,
|
||||||
.settings-floating-menu::-webkit-scrollbar,
|
|
||||||
.role-editor-body::-webkit-scrollbar {
|
.role-editor-body::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-floating-menu {
|
|
||||||
scrollbar-width: none;
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-page {
|
.settings-page {
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
}
|
}
|
||||||
@ -267,21 +261,12 @@ body[data-theme='dark'] .settings-redesign-card {
|
|||||||
.settings-select-button .select-chevron {
|
.settings-select-button .select-chevron {
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
display: inline-flex;
|
background-color: currentColor;
|
||||||
align-items: center;
|
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.75 3.75L5 6.25L7.25 3.75' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 10px 10px;
|
||||||
justify-content: center;
|
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.75 3.75L5 6.25L7.25 3.75' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 10px 10px;
|
||||||
transition: transform 0.15s ease;
|
transition: transform 0.15s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-select-button .select-chevron::before {
|
|
||||||
content: '';
|
|
||||||
width: 7px;
|
|
||||||
height: 7px;
|
|
||||||
border-right: 1.5px solid currentColor;
|
|
||||||
border-bottom: 1.5px solid currentColor;
|
|
||||||
transform: translateY(-1.5px) rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-select-wrap.open .settings-select-button .select-chevron {
|
.settings-select-wrap.open .settings-select-button .select-chevron {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
@ -303,6 +288,37 @@ body[data-theme='dark'] .settings-redesign-card {
|
|||||||
backdrop-filter: none;
|
backdrop-filter: none;
|
||||||
z-index: 2147483647;
|
z-index: 2147483647;
|
||||||
display: none;
|
display: none;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: transparent transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 可滚动时显示细滚动条:平时完全透明,悬停浮层时显现(视觉悬浮感) */
|
||||||
|
.settings-floating-menu::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-floating-menu::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-floating-menu::-webkit-scrollbar-thumb {
|
||||||
|
background-color: transparent;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
border-radius: 8px;
|
||||||
|
background-clip: padding-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-floating-menu:hover {
|
||||||
|
scrollbar-color: var(--text-muted) transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-floating-menu:hover::-webkit-scrollbar-thumb {
|
||||||
|
background-color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 带描述行的选项固定 44px 高,浮层按 4 个整选项计算高度 */
|
||||||
|
.settings-floating-menu:has(.settings-menu-option > span) {
|
||||||
|
max-height: calc(44px * 4 + 12px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-select-wrap.open .settings-floating-menu {
|
.settings-select-wrap.open .settings-floating-menu {
|
||||||
@ -350,6 +366,12 @@ body[data-theme='dark'] .settings-floating-menu {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 含描述行的选项固定 44px:配合浮层 max-height 保证展开恰好 4 个整选项 */
|
||||||
|
.settings-menu-option:has(> span) {
|
||||||
|
height: 44px;
|
||||||
|
min-height: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (hover: hover) {
|
@media (hover: hover) {
|
||||||
.settings-menu-option:hover {
|
.settings-menu-option:hover {
|
||||||
background: var(--settings-floating-menu-hover);
|
background: var(--settings-floating-menu-hover);
|
||||||
@ -369,6 +391,7 @@ body[data-theme='dark'] .settings-floating-menu {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 550;
|
font-weight: 550;
|
||||||
letter-spacing: -0.01em;
|
letter-spacing: -0.01em;
|
||||||
|
line-height: 1.3;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -613,9 +613,10 @@ body[data-theme='light'] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.permission-switcher__caret {
|
.permission-switcher__caret {
|
||||||
font-size: 14px;
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
flex-shrink: 0;
|
||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
transform: rotate(90deg);
|
|
||||||
transition: transform 0.18s ease;
|
transition: transform 0.18s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -628,7 +629,7 @@ body[data-theme='light'] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.permission-switcher__caret.open {
|
.permission-switcher__caret.open {
|
||||||
transform: rotate(270deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.permission-switcher__item {
|
.permission-switcher__item {
|
||||||
@ -1545,15 +1546,15 @@ body[data-theme='light'] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.agent-type-switcher__caret {
|
.agent-type-switcher__caret {
|
||||||
font-size: 13px;
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
flex-shrink: 0;
|
||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
transform: rotate(90deg);
|
|
||||||
transition: transform 0.18s ease;
|
transition: transform 0.18s ease;
|
||||||
line-height: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.agent-type-switcher__caret.open {
|
.agent-type-switcher__caret.open {
|
||||||
transform: rotate(270deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 菜单底色/边框/圆角与 + 菜单(.quick-menu)一致 */
|
/* 菜单底色/边框/圆角与 + 菜单(.quick-menu)一致 */
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user