kexueadmin
/
ai-chat-ui
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/sidebar/ChatSidebar.vue
View File

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

13
src/components/sidebar/ConversationItem.vue
View File

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