feat(canvas): 提示词改悬浮底部黑色渐变遮罩,生成中占位美化
This commit is contained in:
@@ -207,7 +207,8 @@ defineExpose({ startEdit, commitNote })
|
||||
<div v-else class="cv-node__gen">
|
||||
<template v-if="node.status === 'running'">
|
||||
<span class="cv-node__spin" />
|
||||
<span>生成中…</span>
|
||||
<span class="cv-node__genlabel">生成中…</span>
|
||||
<span class="cv-node__gensub">{{ node.model || 'AI' }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="cv-node__x">✕</span>
|
||||
@@ -272,17 +273,23 @@ defineExpose({ startEdit, commitNote })
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 5px 9px;
|
||||
padding: 26px 10px 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
color: var(--fg);
|
||||
background: var(--surface-solid);
|
||||
border-top: 1px solid var(--ink-soft);
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
|
||||
background: linear-gradient(to top, rgb(0 0 0 / 0.62), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.cv-node:hover .cv-node__cap,
|
||||
.cv-node.is-selected .cv-node__cap {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 笔记 = 淡黄色贴纸 */
|
||||
@@ -318,14 +325,6 @@ html.dark .cv-node__note { color: rgb(255 255 255 / 0.88); }
|
||||
}
|
||||
|
||||
.cv-node--gen {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--surface);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
border-style: dashed;
|
||||
color: var(--fg-2);
|
||||
font-size: 13px;
|
||||
@@ -334,19 +333,63 @@ html.dark .cv-node__note { color: rgb(255 255 255 / 0.88); }
|
||||
.cv-node--gen.is-failed {
|
||||
border-color: #e5484d;
|
||||
color: #e5484d;
|
||||
background: #ffe4e6;
|
||||
}
|
||||
/* 生成占位内容:居中排布 + 微光扫过 */
|
||||
.cv-node__gen {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
background:
|
||||
radial-gradient(130% 130% at 15% 0%, rgb(124 92 252 / 0.14), transparent 55%),
|
||||
radial-gradient(130% 130% at 85% 100%, rgb(34 211 238 / 0.12), transparent 55%),
|
||||
var(--surface);
|
||||
}
|
||||
.cv-node__gen::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.18) 50%, transparent 62%);
|
||||
background-size: 260% 100%;
|
||||
background-position: 260% 0;
|
||||
animation: cv-gen-shine 2.4s linear infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
.is-failed .cv-node__gen {
|
||||
background:
|
||||
radial-gradient(130% 130% at 15% 0%, rgb(229 72 77 / 0.1), transparent 55%),
|
||||
var(--surface);
|
||||
}
|
||||
.is-failed .cv-node__gen::after {
|
||||
display: none;
|
||||
}
|
||||
.cv-node__genlabel {
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.cv-node__gensub {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--fg-faint);
|
||||
}
|
||||
.cv-node__spin {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid var(--ink-soft);
|
||||
border: 3px solid rgb(124 92 252 / 0.2);
|
||||
border-top-color: var(--m-orange);
|
||||
border-right-color: var(--m-orange-2);
|
||||
animation: cv-spin 0.9s linear infinite;
|
||||
filter: drop-shadow(0 0 10px var(--accent-glow));
|
||||
}
|
||||
@keyframes cv-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes cv-gen-shine {
|
||||
to { background-position: -260% 0; }
|
||||
}
|
||||
.cv-node__err {
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
|
||||
@@ -675,6 +675,7 @@ async function generate() {
|
||||
const node = reactive({
|
||||
id: newId('g'), type: 'gen', status: 'running',
|
||||
x: Math.round(x + i * (size.w + 48)), y: Math.round(y), w: size.w, h: size.h, z: 0,
|
||||
model: model.value?.alias || model.value?.name || model.value?.id || 'AI',
|
||||
})
|
||||
doc.nodes.push(node)
|
||||
for (const s of sources) {
|
||||
@@ -1249,13 +1250,13 @@ const saveLabel = computed(() => ({
|
||||
.cv-dock {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 14px;
|
||||
bottom: 18px;
|
||||
transform: translateX(-50%);
|
||||
width: min(720px, calc(100% - 28px));
|
||||
width: min(760px, calc(100% - 28px));
|
||||
z-index: 8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
gap: 8px;
|
||||
}
|
||||
.cv-ratios {
|
||||
display: flex;
|
||||
@@ -1287,23 +1288,25 @@ const saveLabel = computed(() => ({
|
||||
.cv-composer {
|
||||
width: 100%;
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 20px;
|
||||
background: var(--surface);
|
||||
-webkit-backdrop-filter: blur(18px);
|
||||
backdrop-filter: blur(18px);
|
||||
box-shadow: var(--glass-shadow-lg);
|
||||
border-radius: 22px;
|
||||
background:
|
||||
linear-gradient(160deg, rgb(124 92 252 / 0.06), transparent 40%),
|
||||
var(--surface);
|
||||
-webkit-backdrop-filter: blur(22px) saturate(1.15);
|
||||
backdrop-filter: blur(22px) saturate(1.15);
|
||||
box-shadow: var(--glass-shadow-lg), 0 0 42px var(--accent-glow);
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
overflow: visible; /* 下拉面板要从输入框上方弹出,不能被裁切 */
|
||||
}
|
||||
.cv-composer:focus-within {
|
||||
border-color: rgb(124 92 252 / 0.6);
|
||||
box-shadow: var(--glass-shadow-lg), 0 0 0 3px rgb(124 92 252 / 0.18);
|
||||
border-color: rgb(124 92 252 / 0.55);
|
||||
box-shadow: var(--glass-shadow-lg), 0 0 0 3px rgb(124 92 252 / 0.16), 0 0 42px var(--accent-glow);
|
||||
}
|
||||
.cv-composer__refs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 10px 10px 0;
|
||||
padding: 12px 14px 4px;
|
||||
}
|
||||
.cv-composer__refs:empty,
|
||||
.cv-composer__refs:not(:has(> *)) {
|
||||
@@ -1311,12 +1314,13 @@ const saveLabel = computed(() => ({
|
||||
}
|
||||
.cv-refthumb {
|
||||
position: relative;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 10px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--ink-soft);
|
||||
border: 1px solid var(--glass-border);
|
||||
background: var(--surface-2);
|
||||
box-shadow: var(--glass-shadow);
|
||||
}
|
||||
.cv-refthumb img {
|
||||
width: 100%;
|
||||
@@ -1343,26 +1347,27 @@ const saveLabel = computed(() => ({
|
||||
background: #ef4444;
|
||||
}
|
||||
.cv-refadd {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 10px;
|
||||
border: 2px dashed rgb(124 92 252 / 0.45);
|
||||
background: transparent;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 12px;
|
||||
border: 1.5px dashed rgb(124 92 252 / 0.5);
|
||||
background: rgb(124 92 252 / 0.04);
|
||||
color: var(--m-orange);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1px;
|
||||
gap: 2px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s ease, background 0.15s ease, transform 0.13s ease;
|
||||
transition: border-color 0.15s ease, background 0.15s ease, transform 0.13s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.cv-refadd:hover {
|
||||
border-color: var(--m-orange);
|
||||
background: rgb(124 92 252 / 0.08);
|
||||
background: rgb(124 92 252 / 0.1);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 16px var(--accent-glow);
|
||||
}
|
||||
.cv-refadd__icon {
|
||||
font-size: 15px;
|
||||
@@ -1375,25 +1380,29 @@ const saveLabel = computed(() => ({
|
||||
}
|
||||
.cv-composer__ta {
|
||||
width: 100%;
|
||||
min-height: 56px;
|
||||
padding: 10px 14px;
|
||||
min-height: 62px;
|
||||
padding: 12px 16px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--fg);
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.6;
|
||||
resize: none;
|
||||
outline: none;
|
||||
display: block;
|
||||
}
|
||||
.cv-composer__ta::placeholder {
|
||||
color: var(--fg-faint);
|
||||
}
|
||||
.cv-composer__bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
padding: 8px 12px;
|
||||
padding: 10px 14px;
|
||||
border-top: 1px solid var(--ink-soft);
|
||||
border-radius: 0 0 19px 19px; /* composer 不再裁切,圆角由最底层行补齐 */
|
||||
background: rgb(255 255 255 / 0.02);
|
||||
border-radius: 0 0 21px 21px; /* composer 不再裁切,圆角由最底层行补齐 */
|
||||
}
|
||||
.cv-composer__bar .cv-dd--model {
|
||||
flex: 1;
|
||||
@@ -1402,7 +1411,9 @@ const saveLabel = computed(() => ({
|
||||
}
|
||||
.cv-composer__bar .cv-gen {
|
||||
margin-left: auto;
|
||||
padding: 7px 24px;
|
||||
padding: 8px 26px;
|
||||
border-radius: 12px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.cv-gen {
|
||||
padding: 10px;
|
||||
|
||||
Reference in New Issue
Block a user