feat(canvas): 参数全部改下拉,支持生视频模式与视频节点

frontend/src/components/canvas/CanvasNodeView.vue

@@ -24,7 +24,7 @@ const editing = ref(false)
 
 let imgController = null
 async function loadSrc() {
-  if (props.node.type !== 'image' || !props.node.src) return
+  if (!['image', 'video'].includes(props.node.type) || !props.node.src) return
   imgController?.abort()
   imgController = new AbortController()
   imgLoaded.value = false
@@ -79,6 +79,19 @@ function onImgLoad(e) {
     })
   }
 }
+function onVidMeta(e) {
+  imgLoaded.value = true
+  imgBroken.value = false
+  const v = e.target
+  if (v.videoWidth && v.videoHeight) {
+    const long = Math.max(v.videoWidth, v.videoHeight)
+    const k = 512 / long
+    emit('imgload', {
+      w: Math.round(v.videoWidth * k),
+      h: Math.round(v.videoHeight * k),
+    })
+  }
+}
 
 function startEdit() {
   if (props.node.type !== 'note') return
@@ -164,6 +177,23 @@ defineExpose({ startEdit, commitNote })
       <div v-if="node.prompt" class="cv-node__cap" :title="node.prompt">{{ node.prompt }}</div>
     </template>
 
+    <!-- 视频节点 -->
+    <template v-else-if="node.type === 'video'">
+      <video
+        v-if="!imgBroken && imgBlob"
+        class="cv-node__img"
+        :src="imgBlob"
+        controls
+        muted
+        loop
+        playsinline
+        @loadedmetadata="onVidMeta"
+        @error="imgBroken = true"
+      />
+      <div v-else class="cv-node__missing">{{ imgBroken ? '视频不可用' : '加载中…' }}<small v-if="imgStatus">HTTP {{ imgStatus }}</small></div>
+      <div v-if="node.prompt" class="cv-node__cap" :title="node.prompt">{{ node.prompt }}</div>
+    </template>
+
     <!-- 笔记节点 -->
     <div
       v-else-if="node.type === 'note'"