feat(*): 创作工作台 - 完善媒体上传预览与连线交互并修复任务章节及日志筛选

web/src/styles/globals.css

@@ -8040,6 +8040,18 @@
 
     .canvas-node-shell {
         box-shadow: none;
+        transition: transform 160ms ease-out;
+    }
+
+    /* Only a valid connection approach tilts; selection and ordinary hover stay flat. */
+    .canvas-node-shell[data-connection-tilt="true"] {
+        transform: perspective(900px) rotateX(var(--connection-tilt-x)) rotateY(var(--connection-tilt-y));
+        will-change: transform;
+    }
+
+    .no-motion .canvas-node-shell[data-connection-tilt="true"] {
+        transform: none;
+        transition: none;
     }
 
     .canvas-node-inline-action {
@@ -16125,3 +16137,67 @@ html:not(.dark) .creation-home .creation-user-message-copy-wrap { box-shadow: 0
     letter-spacing: .04em;
 }
 .creation-history-group-head h4::after { content: ""; flex: 1; height: 1px; background: var(--creation-history-line); transform: translateY(-2px); }
+
+/* 图片上传：浅磨砂与低饱和流光，和模型生成状态分离。 */
+.canvas-file-upload {
+    --upload-glow-blue: color-mix(in srgb, var(--status-loading) 22%, transparent);
+    --upload-glow-mint: color-mix(in srgb, var(--status-success) 14%, transparent);
+    --upload-glow-warm: color-mix(in srgb, var(--status-warning) 12%, transparent);
+    position: relative;
+    isolation: isolate;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: var(--upload-surface);
+    color: var(--upload-text);
+}
+.canvas-file-upload-glow {
+    transition: opacity 180ms ease-out;
+    position: absolute;
+    inset: -45%;
+    background: radial-gradient(ellipse at 28% 32%, var(--upload-glow-blue), transparent 48%), radial-gradient(ellipse at 75% 64%, var(--upload-glow-mint), transparent 46%), radial-gradient(ellipse at 55% 78%, var(--upload-glow-warm), transparent 42%);
+    animation: canvas-file-upload-drift 5s ease-in-out infinite alternate;
+    pointer-events: none;
+}
+.canvas-file-upload-frost {
+    transition: opacity 180ms ease-out;
+    position: absolute;
+    inset: 0;
+    background: color-mix(in srgb, var(--upload-surface) 24%, transparent);
+    backdrop-filter: blur(20px) saturate(0.8);
+    pointer-events: none;
+}
+.canvas-file-upload-frost::after {
+    content: "";
+    position: absolute;
+    inset: -60%;
+    background: linear-gradient(110deg, transparent 35%, color-mix(in srgb, var(--upload-text) 4%, transparent) 47%, color-mix(in srgb, var(--upload-surface) 40%, transparent) 51%, transparent 65%);
+    animation: canvas-file-upload-sheen 4s ease-in-out infinite;
+}
+.canvas-file-upload-copy {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    height: 100%;
+    padding: var(--space-5);
+    text-align: center;
+}
+.canvas-file-upload-copy > svg { color: var(--upload-muted); }
+.canvas-file-upload-label { font-size: var(--fs-caption); font-weight: 500; }
+.canvas-file-upload-detail { max-width: 100%; font-size: var(--fs-tiny); color: var(--upload-muted); overflow-wrap: anywhere; }
+.canvas-file-upload-retry { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--r-md); background: color-mix(in srgb, var(--upload-text) 8%, transparent); font-size: var(--fs-caption); cursor: pointer; }
+.canvas-file-upload-retry:hover { background: color-mix(in srgb, var(--upload-text) 12%, transparent); }
+.canvas-file-upload-retry:focus-visible { outline: 2px solid var(--control-focus-ring); outline-offset: 2px; }
+@keyframes canvas-file-upload-drift { from { transform: translate(-8%, -4%) rotate(-8deg); } to { transform: translate(8%, 4%) rotate(12deg); } }
+@keyframes canvas-file-upload-sheen { from { transform: translateX(-35%); } to { transform: translateX(35%); } }
+.canvas-file-upload[data-static] .canvas-file-upload-glow,
+.canvas-file-upload[data-static] .canvas-file-upload-frost::after { animation: none; }
+.canvas-file-upload[data-static] .canvas-file-upload-glow,
+.canvas-file-upload[data-static] .canvas-file-upload-frost { transition: none; }
+@media (prefers-reduced-motion: reduce) {
+    .canvas-file-upload-glow, .canvas-file-upload-frost::after { animation: none; }
+    .canvas-file-upload-glow, .canvas-file-upload-frost { transition: none; }
+}