opensource/mateclaw
2
0
Fork 0
mirror of https://gitee.com/mateos/mateclaw.git synced 2026-09-16 12:27:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(ui): keep model group-header chip and Fix button on one line

Browse Source
This commit is contained in:
matevip 2026-05-18 16:27:34 +08:00
parent d53d66abe3
commit 8cfc78e7b4
1 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
mateclaw-ui/src/components/chat/ModelSelector.vue
View File

@ -32,7 +32,7 @@
<div class="model-groups" ref="listRef"> <div class="model-groups" ref="listRef">
<template v-for="group in filteredGroups" :key="group.provider.id"> <template v-for="group in filteredGroups" :key="group.provider.id">
<div class="model-group-header"> <div class="model-group-header">
<span class="model-group-header__name">{{ group.provider.name }}</span> <span class="model-group-header__name" :title="group.provider.name">{{ group.provider.name }}</span>
<span v-if="group.provider.isLocal" class="model-group-header__badge model-group-header__badge--local">Local</span> <span v-if="group.provider.isLocal" class="model-group-header__badge model-group-header__badge--local">Local</span>
<!-- Liveness dot — UNPROBED = grey, COOLDOWN = amber, LIVE = none. <!-- Liveness dot — UNPROBED = grey, COOLDOWN = amber, LIVE = none.
v2 R3: when showAllStates, also surface UNCONFIGURED / REMOVED chips v2 R3: when showAllStates, also surface UNCONFIGURED / REMOVED chips
@ -417,9 +417,21 @@ watch(open, async (isOpen) => {
user-select: none; user-select: none;
} }
/* The provider name takes the remaining width and truncates; the status
chip / Fix button keep their natural size on the same line. Without
min-width:0 the long name would squeeze the chip and wrap its text. */
.model-group-header__name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.model-group-header__badge { .model-group-header__badge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
flex: 0 0 auto;
height: 16px; height: 16px;
padding: 0 5px; padding: 0 5px;
border-radius: 4px; border-radius: 4px;
@ -427,6 +439,7 @@ watch(open, async (isOpen) => {
font-weight: 600; font-weight: 600;
letter-spacing: 0.02em; letter-spacing: 0.02em;
text-transform: uppercase; text-transform: uppercase;
white-space: nowrap;
} }
.model-group-header__badge--local { .model-group-header__badge--local {
@ -437,6 +450,7 @@ watch(open, async (isOpen) => {
/* RFC-073 liveness dot — sits next to the provider name */ /* RFC-073 liveness dot — sits next to the provider name */
.model-group-header__dot { .model-group-header__dot {
display: inline-block; display: inline-block;
flex: 0 0 auto;
width: 7px; width: 7px;
height: 7px; height: 7px;
border-radius: 50%; border-radius: 50%;
@ -458,6 +472,7 @@ watch(open, async (isOpen) => {
.model-group-header__chip { .model-group-header__chip {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
flex: 0 0 auto;
height: 16px; height: 16px;
padding: 0 6px; padding: 0 6px;
border-radius: 4px; border-radius: 4px;
@ -465,6 +480,7 @@ watch(open, async (isOpen) => {
font-weight: 600; font-weight: 600;
letter-spacing: 0.02em; letter-spacing: 0.02em;
text-transform: none; text-transform: none;
white-space: nowrap;
} }
.model-group-header__chip--warn { .model-group-header__chip--warn {
background: rgba(245, 158, 11, 0.15); background: rgba(245, 158, 11, 0.15);
@ -483,7 +499,7 @@ watch(open, async (isOpen) => {
.dark .model-group-header__chip--info { color: #93c5fd; } .dark .model-group-header__chip--info { color: #93c5fd; }
.model-group-header__fix { .model-group-header__fix {
margin-left: auto; flex: 0 0 auto;
height: 18px; height: 18px;
padding: 0 8px; padding: 0 8px;
border-radius: 4px; border-radius: 4px;
@ -491,6 +507,7 @@ watch(open, async (isOpen) => {
background: transparent; background: transparent;
color: var(--mc-text-secondary); color: var(--mc-text-secondary);
font-size: 11px; font-size: 11px;
white-space: nowrap;
cursor: pointer; cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s; transition: background 0.12s, color 0.12s, border-color 0.12s;
} }