feat(canvas): 画布创作对话 - 统一流式 Markdown 展示与交互修复
This commit is contained in:
ddCat
@@ -1,6 +1,8 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
@import "shadcn/tailwind.css";
|
||||
@source "../../node_modules/streamdown/dist/*.js";
|
||||
@source "../../node_modules/@streamdown/code/dist/*.js";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@@ -712,6 +714,9 @@
|
||||
--canvas-composer-control-hover: color-mix(in srgb, var(--foreground) 8%, transparent);
|
||||
--canvas-composer-shadow: var(--elevation-card);
|
||||
--canvas-composer-settings-width: 138px;
|
||||
--canvas-mention-menu-max-height: 320px;
|
||||
--canvas-mention-search-height: 40px;
|
||||
--canvas-mention-item-height: 34px;
|
||||
|
||||
/* Modal 组件（对话框，对应 #98 面板层级）*/
|
||||
--modal-radius: var(--r-lg);
|
||||
@@ -3115,7 +3120,7 @@
|
||||
.creation-message-model { max-width: min(400px, 48vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.creation-message-state { border-radius: 6px; background: rgba(255, 255, 255, .08); padding: 3px 6px; color: var(--creation-muted); }
|
||||
.creation-message-state.is-error { background: rgba(185, 61, 61, .18); color: #ec7474; }
|
||||
.creation-message-content { padding: 14px 0 0 42px; color: var(--creation-text); font-size: 15px; line-height: 1.8; white-space: pre-wrap; }
|
||||
.creation-message-content { padding: 14px 0 0 42px; color: var(--creation-text); font-size: 15px; line-height: 1.8; }
|
||||
.creation-message-content > span { color: var(--creation-muted); }
|
||||
.creation-message-error { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 15px 0 0 42px; color: #ef5350; font-size: 14px; line-height: 1.6; }
|
||||
.creation-message-error button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--creation-text); padding: 6px 9px; font-size: 12px; transition: background-color 140ms ease; }
|
||||
@@ -5985,6 +5990,134 @@
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.canvas-resource-mention-menu {
|
||||
display: flex;
|
||||
max-height: var(--canvas-mention-menu-max-height);
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
|
||||
border-radius: var(--r-md);
|
||||
background: var(--canvas-composer-surface);
|
||||
color: var(--cn-text);
|
||||
box-shadow: var(--elevation-overlay);
|
||||
}
|
||||
|
||||
.canvas-resource-mention-search {
|
||||
display: flex;
|
||||
min-height: var(--canvas-mention-search-height);
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding-inline: var(--space-2-half);
|
||||
color: color-mix(in srgb, var(--foreground) 44%, transparent);
|
||||
}
|
||||
|
||||
.canvas-resource-mention-search > svg {
|
||||
width: var(--space-4);
|
||||
height: var(--space-4);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.canvas-resource-mention-search > input {
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
color: var(--cn-text);
|
||||
font-size: var(--fs-caption);
|
||||
}
|
||||
|
||||
.canvas-resource-mention-search > input::placeholder {
|
||||
color: color-mix(in srgb, var(--foreground) 36%, transparent);
|
||||
}
|
||||
|
||||
.canvas-resource-mention-scroll {
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 0 var(--space-1) var(--space-1);
|
||||
border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
|
||||
}
|
||||
|
||||
.canvas-resource-mention-section {
|
||||
padding-top: var(--space-1);
|
||||
}
|
||||
|
||||
.canvas-resource-mention-section + .canvas-resource-mention-section {
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
|
||||
.canvas-resource-mention-section > h4 {
|
||||
margin: 0;
|
||||
padding: var(--space-1) var(--space-2);
|
||||
color: color-mix(in srgb, var(--foreground) 48%, transparent);
|
||||
font-size: var(--fs-tiny);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.canvas-resource-mention-item,
|
||||
.canvas-resource-mention-folder,
|
||||
.canvas-resource-mention-back {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: var(--canvas-mention-item-height);
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
border: 0;
|
||||
border-radius: var(--r-md);
|
||||
background: transparent;
|
||||
padding: calc(var(--space-1) / 2) var(--space-2);
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
transition: background-color var(--motion-instant) ease-out;
|
||||
}
|
||||
|
||||
.canvas-resource-mention-item:hover,
|
||||
.canvas-resource-mention-folder:hover,
|
||||
.canvas-resource-mention-back:hover {
|
||||
background: var(--canvas-composer-control-hover) !important;
|
||||
}
|
||||
|
||||
.canvas-resource-mention-folder > svg:first-child,
|
||||
.canvas-resource-mention-back > svg:first-child {
|
||||
width: var(--space-4);
|
||||
height: var(--space-4);
|
||||
flex: 0 0 auto;
|
||||
color: color-mix(in srgb, var(--foreground) 58%, transparent);
|
||||
}
|
||||
|
||||
.canvas-resource-mention-folder > span,
|
||||
.canvas-resource-mention-back > span {
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: var(--fs-caption);
|
||||
}
|
||||
|
||||
.canvas-resource-mention-folder > small,
|
||||
.canvas-resource-mention-back > small {
|
||||
color: color-mix(in srgb, var(--foreground) 38%, transparent);
|
||||
font-size: var(--fs-tiny);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.canvas-resource-mention-folder > svg:last-child {
|
||||
width: var(--space-4);
|
||||
height: var(--space-4);
|
||||
flex: 0 0 auto;
|
||||
color: color-mix(in srgb, var(--foreground) 32%, transparent);
|
||||
}
|
||||
|
||||
.canvas-resource-mention-empty {
|
||||
padding: var(--space-8) var(--space-3);
|
||||
color: color-mix(in srgb, var(--foreground) 42%, transparent);
|
||||
font-size: var(--fs-tiny);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
[data-canvas-viewport-interacting="true"] .canvas-node-shell,
|
||||
[data-canvas-viewport-interacting="true"] .canvas-frame-shell,
|
||||
[data-canvas-viewport-interacting="true"] .aceternity-comet-card {
|
||||
@@ -7167,19 +7300,6 @@ html:not(.dark) .creation-user-message-reference { background: rgba(28, 32, 37,
|
||||
.creation-message-state { border: 0; border-radius: 5px; background: rgba(255, 255, 255, .06); padding: 2px 5px; color: var(--creation-muted); font-size: 10px; }
|
||||
|
||||
.creation-message-content { max-width: 800px; padding: 14px 0 0 34px; color: var(--creation-text); font-size: 15px; line-height: 1.8; }
|
||||
.creation-message-content p { margin: 0 0 12px; }
|
||||
.creation-message-content p:last-child { margin-bottom: 0; }
|
||||
.creation-message-content h1, .creation-message-content h2, .creation-message-content h3 { margin: 20px 0 8px; color: var(--creation-text); font-weight: 650; line-height: 1.35; }
|
||||
.creation-message-content h1 { font-size: 21px; }
|
||||
.creation-message-content h2 { font-size: 18px; }
|
||||
.creation-message-content h3 { font-size: 16px; }
|
||||
.creation-message-content ul, .creation-message-content ol { margin: 10px 0; padding-left: 22px; }
|
||||
.creation-message-content li + li { margin-top: 4px; }
|
||||
.creation-message-content blockquote { margin: 14px 0; border-left: 2px solid color-mix(in srgb, var(--creation-text) 24%, transparent); padding: 2px 0 2px 12px; color: var(--creation-muted); }
|
||||
.creation-message-content code { border-radius: 4px; background: rgba(255, 255, 255, .08); padding: 2px 5px; font-size: .88em; }
|
||||
.creation-message-content pre { overflow-x: auto; border-radius: 8px; background: #181b20; padding: 12px 14px; }
|
||||
.creation-message-content pre code { background: transparent; padding: 0; }
|
||||
.creation-message-content a { color: var(--creation-text); text-decoration: underline; text-underline-offset: 3px; }
|
||||
|
||||
.creation-message-error { display: flex; max-width: 760px; align-items: center; gap: 10px; padding: 16px 0 0 34px; color: #ee8585; font-size: 13px; line-height: 1.6; }
|
||||
.creation-message-error button { display: inline-flex; height: 28px; align-items: center; gap: 5px; border: 0; border-radius: 6px; background: rgba(226, 96, 96, .12); color: #ef8b8b; padding: 0 8px; font-size: 11px; }
|
||||
@@ -7211,10 +7331,8 @@ html:not(.dark) .creation-user-message-reference { background: rgba(28, 32, 37,
|
||||
.creation-media-preview-video { width: 100%; background: #050505; }
|
||||
|
||||
html:not(.dark) .creation-user-message { background: rgba(28, 32, 37, .07); }
|
||||
html:not(.dark) .creation-message-content pre,
|
||||
html:not(.dark) .creation-video-result,
|
||||
html:not(.dark) .creation-media-preview-modal .ant-modal-container { background: #1f2227; }
|
||||
html:not(.dark) .creation-message-content code { background: rgba(28, 32, 37, .08); }
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.creation-home .creation-chat-writing-surface,
|
||||
@@ -8451,7 +8569,7 @@ body.app-spatial-overlays :where(.ant-modal-mask, .ant-drawer-mask) {
|
||||
.app-story-generating p {
|
||||
margin: 0;
|
||||
color: var(--foreground);
|
||||
font-size: var(--fs-body);
|
||||
font-size: var(--fs-caption);
|
||||
font-weight: 560;
|
||||
}
|
||||
|
||||
@@ -9938,3 +10056,105 @@ html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { backgrou
|
||||
.wallet-library-page .wallet-ledger-table .ant-table-tbody > tr:hover > td {
|
||||
background: color-mix(in srgb, var(--foreground) 2.5%, var(--background)) !important;
|
||||
}
|
||||
|
||||
/* ===== AI Markdown ===== */
|
||||
|
||||
.ai-message-markdown {
|
||||
min-width: 0;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
line-height: 1.7;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.ai-message-markdown > :first-child { margin-top: 0; }
|
||||
.ai-message-markdown > :last-child { margin-bottom: 0; }
|
||||
.ai-message-markdown-heading {
|
||||
margin: 1.15em 0 0.42em;
|
||||
color: inherit;
|
||||
font-weight: 650;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.ai-message-markdown-heading-1 { font-size: 1.18em; }
|
||||
.ai-message-markdown-heading-2 { font-size: 1.08em; }
|
||||
.ai-message-markdown-heading-3,
|
||||
.ai-message-markdown-heading-4 { font-size: 1em; }
|
||||
.ai-message-markdown-paragraph { margin: 0.5em 0; }
|
||||
.ai-message-markdown-list {
|
||||
margin: 0.55em 0;
|
||||
padding-left: 1.35em;
|
||||
}
|
||||
.ai-message-markdown-list-unordered { list-style: disc; }
|
||||
.ai-message-markdown-list-ordered { list-style: decimal; }
|
||||
.ai-message-markdown-list-item { padding-left: 0.15em; }
|
||||
.ai-message-markdown-list-item + .ai-message-markdown-list-item { margin-top: 0.22em; }
|
||||
.ai-message-markdown-list-item > .ai-message-markdown-list { margin-top: 0.25em; margin-bottom: 0.25em; }
|
||||
.ai-message-markdown-blockquote {
|
||||
margin: 0.75em 0;
|
||||
padding: 0.1em 0 0.1em 0.85em;
|
||||
border-left: 2px solid color-mix(in srgb, currentColor 24%, transparent);
|
||||
color: color-mix(in srgb, currentColor 74%, transparent);
|
||||
}
|
||||
.ai-message-markdown-code {
|
||||
padding: 0.12em 0.34em;
|
||||
border-radius: var(--r-sm);
|
||||
background: color-mix(in srgb, currentColor 9%, transparent);
|
||||
color: inherit;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 0.88em;
|
||||
}
|
||||
.ai-message-markdown-pre {
|
||||
margin: 0.8em 0;
|
||||
padding: 0.8em 0.9em;
|
||||
overflow-x: auto;
|
||||
border-radius: var(--r-sm);
|
||||
background: color-mix(in srgb, var(--foreground) 7%, var(--background));
|
||||
color: color-mix(in srgb, var(--foreground) 86%, transparent);
|
||||
font-size: 0.84em;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.ai-message-markdown-pre .ai-message-markdown-code {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
font-size: inherit;
|
||||
}
|
||||
.ai-message-markdown-link {
|
||||
color: var(--primary);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.ai-message-markdown-link:hover { text-decoration-color: currentColor; }
|
||||
.ai-message-markdown-rule {
|
||||
margin: 1em 0;
|
||||
border: 0;
|
||||
border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
|
||||
}
|
||||
.ai-message-markdown-table-wrap {
|
||||
max-width: 100%;
|
||||
margin: 0.8em 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.ai-message-markdown-table {
|
||||
width: 100%;
|
||||
min-width: 320px;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.92em;
|
||||
}
|
||||
.ai-message-markdown-table-cell {
|
||||
padding: 0.48em 0.65em;
|
||||
border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ai-message-markdown-table-header {
|
||||
color: color-mix(in srgb, currentColor 82%, transparent);
|
||||
font-weight: 620;
|
||||
background: color-mix(in srgb, currentColor 5%, transparent);
|
||||
}
|
||||
.ai-message-markdown-task {
|
||||
width: 0.9em;
|
||||
height: 0.9em;
|
||||
margin: 0 0.35em 0 0;
|
||||
vertical-align: -0.08em;
|
||||
accent-color: var(--primary);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user