tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(canvas): 画布提示词 - 修复视频引用遮挡文本 (#301)

Browse Source
This commit is contained in:
MasterChiefCN
2026-08-24 16:55:53 +08:00
committed by GitHub
parent 837a30e75d
commit a2b44d940d
4 changed files with 99 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/components/canvas/canvas-resource-mention-textarea.tsx
View File

@@ -409,17 +409,17 @@ function createInlineMentionChip(reference: CanvasResourceReference, token: stri
const chip = document.createElement("span");
chip.contentEditable = "false";
chip.dataset.mentionToken = token;
chip.className = "mx-[0.06em] inline-flex h-[1.68em] translate-y-[0.08em] select-none items-center gap-[0.18em] rounded-[0.38em] bg-black/[0.06] px-[0.22em] text-[0.92em] font-medium leading-none text-current align-baseline dark:bg-white/[0.1]";
chip.className = "canvas-resource-inline-mention";
const at = document.createElement("span");
at.className = "shrink-0 opacity-90";
at.className = "canvas-resource-inline-at";
at.textContent = "@";
chip.appendChild(at);
chip.appendChild(createInlinePreview(reference));
const label = document.createElement("span");
label.className = "shrink-0";
label.className = "canvas-resource-inline-label";
label.textContent = reference.label;
chip.appendChild(label);
@@ -429,7 +429,7 @@ function createInlineMentionChip(reference: CanvasResourceReference, token: stri
function createInlinePreview(reference: CanvasResourceReference) {
if ((reference.kind === "image" || reference.kind === "video" || reference.kind === "character") && reference.previewUrl) {
const media = document.createElement(reference.kind === "video" ? "video" : "img");
media.className = `size-[1.18em] shrink-0 rounded-[0.24em] ${reference.kind === "video" ? "bg-black object-cover" : reference.kind === "character" ? "bg-black/5 object-contain" : "object-cover"}`;
media.className = `canvas-resource-inline-preview is-${reference.kind}`;
media.setAttribute("src", reference.previewUrl);
media.setAttribute("alt", "");
if (media instanceof HTMLVideoElement) {
@@ -439,7 +439,7 @@ function createInlinePreview(reference: CanvasResourceReference) {
return media;
}
const fallback = document.createElement("span");
fallback.className = "grid size-[1.18em] shrink-0 place-items-center rounded-[0.24em] bg-current/10";
fallback.className = "canvas-resource-inline-preview is-fallback";
fallback.textContent = reference.sourceType === CanvasNodeType.Drawing ? "✎" : reference.kind === "audio" ? "♪" : reference.kind === "video" ? "▶" : reference.kind === "image" ? "□" : reference.kind === "skill" ? "✦" : "";
return fallback;
}

64
web/src/styles/globals.css
View File

@@ -748,6 +748,11 @@
--canvas-mention-menu-max-height: 320px;
--canvas-mention-search-height: 40px;
--canvas-mention-item-height: 34px;
--canvas-mention-chip-height: 1.68em;
--canvas-mention-chip-preview-size: 1.18em;
--canvas-mention-chip-gap: 0.18em;
--canvas-mention-chip-padding-inline: 0.22em;
--canvas-mention-chip-offset-y: 0.08em;
/* Modal 组件（对话框，对应 #98 面板层级）*/
--modal-radius: var(--r-lg);
@@ -7023,6 +7028,65 @@
outline: none;
}
.canvas-resource-inline-mention {
display: inline-flex;
min-width: 0;
max-width: 100%;
height: var(--canvas-mention-chip-height);
align-items: center;
gap: var(--canvas-mention-chip-gap);
margin-inline: 0.06em;
overflow: hidden;
border-radius: var(--r-xs);
background: var(--canvas-composer-control-surface);
padding-inline: var(--canvas-mention-chip-padding-inline);
color: inherit;
font-size: 0.92em;
font-weight: 500;
line-height: 1;
vertical-align: baseline;
user-select: none;
transform: translateY(var(--canvas-mention-chip-offset-y));
}
.canvas-resource-inline-at,
.canvas-resource-inline-label {
flex: 0 0 auto;
}
.canvas-resource-inline-at {
opacity: 0.9;
}
.canvas-resource-inline-preview {
display: block;
width: var(--canvas-mention-chip-preview-size);
min-width: var(--canvas-mention-chip-preview-size);
max-width: var(--canvas-mention-chip-preview-size);
height: var(--canvas-mention-chip-preview-size);
min-height: var(--canvas-mention-chip-preview-size);
max-height: var(--canvas-mention-chip-preview-size);
flex: 0 0 var(--canvas-mention-chip-preview-size);
overflow: hidden;
border-radius: var(--r-xs);
object-fit: cover;
}
.canvas-resource-inline-preview.is-video {
background: var(--color-neutral-950);
}
.canvas-resource-inline-preview.is-character {
background: color-mix(in srgb, var(--foreground) 5%, transparent);
object-fit: contain;
}
.canvas-resource-inline-preview.is-fallback {
display: grid;
place-items: center;
background: color-mix(in srgb, currentColor 10%, transparent);
}
.canvas-resource-mention-menu {
display: flex;
max-height: var(--canvas-mention-menu-max-height);