feat(ui): 优化模型菜单滚动条与会话项悬浮布局

This commit is contained in:
肖应宇 2026-03-27 14:19:43 +08:00
parent 3f9cfc80b0
commit 16adb99aba
2 changed files with 29 additions and 11 deletions

View File

@ -33,7 +33,7 @@
<span class="model-name">{{ model.name }}</span>
<span class="model-desc">{{ model.description }}</span>
</div>
<Check v-if="model.id === currentModelId" :size="16" class="check-icon" />
<!-- <Check v-if="model.id === currentModelId" :size="16" class="check-icon" /> -->
</button>
</div>
</Transition>
@ -419,13 +419,19 @@ onBeforeUnmount(() => {
min-width: 200px;
max-height: 300px;
overflow-y: auto;
padding: 8px;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 15px;
background: white;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10);
z-index: 100;
&::-webkit-scrollbar {
display: none;
}
.dark & {
background: #1e1e2e;
border-color: #2d2d3d;
@ -438,7 +444,7 @@ onBeforeUnmount(() => {
align-items: center;
justify-content: space-between;
width: 100%;
padding: 12px 14px;
padding: 10px;
border: none;
border-radius: 10px;
background: transparent;
@ -447,7 +453,7 @@ onBeforeUnmount(() => {
transition: all 0.15s ease;
&:hover {
background: #f3f4f6;
background: #F8F9FA;
.dark & {
background: #2d2d3d;
@ -455,10 +461,13 @@ onBeforeUnmount(() => {
}
&.active {
background: rgba(59, 130, 246, 0.1);
background: #F8F9FA;
.model-name {
color: #3b82f6;
color: var(---000F33, #000F33);
}
.model-desc{
color: var(--6-666666, #666);
}
}
}
@ -473,7 +482,7 @@ onBeforeUnmount(() => {
.model-name {
font-size: 14px;
font-weight: 500;
color: #1f2937;
color: var(--6-666666, #666);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -485,7 +494,7 @@ onBeforeUnmount(() => {
.model-desc {
font-size: 12px;
color: #9ca3af;
color: var(--9-999999, #999);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

View File

@ -170,6 +170,7 @@ function handleDelete() {
<style lang="scss" scoped>
.conversation-item {
position: relative;
display: flex;
align-items: center;
gap: 10px;
@ -177,7 +178,6 @@ function handleDelete() {
margin: 2px 8px;
border-radius: 10px;
cursor: pointer;
position: relative;
&:hover:not(.active) {
background: rgba(0, 0, 0, 0.05);
@ -194,6 +194,11 @@ function handleDelete() {
.pin-indicator {
opacity: 0;
}
.item-content {
flex: 0 1 clamp(72px, 28%, 96px);
max-width: clamp(72px, 28%, 96px);
}
}
&.active {
@ -224,9 +229,11 @@ function handleDelete() {
}
.item-content {
flex: 1;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
max-width: 100%;
transition: flex-basis 0.2s ease, max-width 0.2s ease;
}
.item-title {
@ -280,6 +287,8 @@ function handleDelete() {
}
.item-actions {
position: absolute;
right: 12px;
display: flex;
align-items: center;
gap: 2px;