JOJO/agent-Specialization
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(input): polish runtime queue rendering

Browse Source
This commit is contained in:
JOJO 2026-05-25 22:57:29 +08:00
parent 41305ae2a8
commit aff972b218
2 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
static/src/components/input/InputComposer.vue
View File

@ -388,7 +388,12 @@ const composerInputKey = computed(
const runtimeQueuedMessagesForRender = computed(() => { const runtimeQueuedMessagesForRender = computed(() => {
const list = Array.isArray(props.runtimeQueuedMessages) ? props.runtimeQueuedMessages : []; const list = Array.isArray(props.runtimeQueuedMessages) ? props.runtimeQueuedMessages : [];
return list.filter((item) => item && item.id && item.text); return list
.filter((item) => item && item.id && item.text)
.map((item) => ({
...item,
text: String(item.text || '').replace(/[\r\n\u2028\u2029]+/g, ' ')
}));
}); });
const RUNTIME_QUEUE_ANIM_DURATION = 300; const RUNTIME_QUEUE_ANIM_DURATION = 300;
@ -432,6 +437,7 @@ const stopRuntimeQueueAnimation = (el: HTMLElement) => {
} }
el.style.removeProperty('transition'); el.style.removeProperty('transition');
el.style.removeProperty('transform'); el.style.removeProperty('transform');
el.style.removeProperty('pointer-events');
}; };
const playRuntimeQueueTransform = ( const playRuntimeQueueTransform = (
@ -563,10 +569,7 @@ const spawnRuntimeQueueLeaveGhost = (id: string) => {
const animateRuntimeQueueEnter = (el: HTMLElement) => { const animateRuntimeQueueEnter = (el: HTMLElement) => {
const offset = resolveRuntimeQueueOffset(el); const offset = resolveRuntimeQueueOffset(el);
el.style.pointerEvents = 'none'; playRuntimeQueueTransform(el, offset, 0);
playRuntimeQueueTransform(el, offset, 0, () => {
el.style.removeProperty('pointer-events');
});
}; };
onBeforeUpdate(() => { onBeforeUpdate(() => {

11
static/src/styles/components/input/_composer.scss
View File

@ -58,14 +58,16 @@
position: relative; position: relative;
z-index: var(--runtime-queue-z, 1); z-index: var(--runtime-queue-z, 1);
min-height: 34px; min-height: 34px;
display: grid; display: flex;
grid-template-columns: minmax(0, 1fr) auto auto; flex-direction: row;
flex-wrap: nowrap;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
padding: 6px 10px 6px 12px; padding: 6px 10px 6px 12px;
border: none; border: none;
border-radius: 0; border-radius: 0;
background: var(--runtime-queue-bg); background: var(--runtime-queue-bg);
overflow: hidden;
} }
.runtime-queue-item--top { .runtime-queue-item--top {
@ -74,7 +76,9 @@
} }
.runtime-queue-item__text { .runtime-queue-item__text {
flex: 1 1 auto;
min-width: 0; min-width: 0;
display: block;
font-size: 13px; font-size: 13px;
line-height: 1.3; line-height: 1.3;
color: var(--claude-text); color: var(--claude-text);
@ -84,6 +88,7 @@
} }
.runtime-queue-item__action { .runtime-queue-item__action {
flex-shrink: 0;
border: none; border: none;
background: transparent; background: transparent;
color: var(--claude-text-secondary); color: var(--claude-text-secondary);
@ -92,6 +97,8 @@
padding: 3px 4px; padding: 3px 4px;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
position: relative;
z-index: 1;
} }
.runtime-queue-item__action:hover { .runtime-queue-item__action:hover {