每日工作总结 - 2025-02-25

今日概览

今天主要完成了三件事:

  1. 修复 nano-video 项目的 DOM 节点错误
  2. 整理 AI 视频生成提示词文档
  3. 使用 FFmpeg 拼接视频并上传到 R2

一、Bug 修复 - DOM 节点错误

问题描述

每次打开网站时出现以下错误:

  • Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node
  • Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node

修复内容

文件 问题 解决方案
BaiDuAnalytics.tsx 直接 DOM 操作 insertBefore/appendChild 改用 Next.js Script 组件
ToltScript.tsx 直接 DOM 操作 appendChild 改用 Script 组件
CookieConsent/index.tsx 组件卸载后 setTimeout 仍执行 添加 isMounted 检查
TableOfContents.tsx scroll 事件中直接访问 DOM 添加 isMounted 检查
downloadFile.ts DOM 移除时可能出错 添加 try-finally 保护
r2-download.ts 同上 添加 try-finally 保护
layout.tsx ToasterThemeProvider 外部 移到内部

核心原因

React 18 的并发渲染模式与直接 DOM 操作产生冲突,导致组件卸载后仍尝试操作已移除的节点。


二、AI 视频提示词整理

生成了 8 个”无限美食空间”主题的视频生成提示词:

主题 核心元素
无限麻辣烫空间 红色木门、辣油货架、牛肚
无限牛排空间 炭火烤架、滋滋牛排、奢华氛围
无限水果派空间 发光货架、草莓塔、LED灯带
无限火锅空间 中式木雕、涮肉、蒸汽
无限饮料空间 黄铜水龙头、冰块、乳白液体
无限炒饭空间 牛膝骨炒饭、黑色货架
无限烤肉空间 旋转烤鸭、油脂流淌、工业风
无限辣条空间 红色零食、油亮质感

统一风格: 超现实主义 + Dolly In 推镜头 + 跟随镜头 + 特写切换


三、视频剪辑 - FFmpeg 拼接与 R2 上传

操作流程

1
2
3
4
5
6
7
8
9
10
# 1. 创建文件列表
cd "D:/雨下雨停/OneDrive/文档/"
for i in {1..8}; do echo "file 'f$i.mp4'"; done > filelist.txt

# 2. 执行拼接
ffmpeg -f concat -safe 0 -i filelist.txt -c copy merged_f1_to_f8.mp4

# 3. 上传 R2
cd C:/Users/雨下雨停/nano-video
pnpm tsx scripts/upload-local-video-to-r2.ts

最终结果


四、今日产出

  • ✅ 修复 7 个文件的 DOM 操作相关 Bug
  • ✅ 生成 8 个 AI 视频生成提示词文档
  • ✅ 完成 8 个视频片段的拼接并上传到云端
  • ✅ 创建视频剪辑教程文档

相关链接