赵江涛 - 前端开发工程师

// 精选作品

项目展示

以下项目支持独立访问，部分项目可通过子域名直接打开演示。

VideoEditor.tsx

class TimelineEngine {
  // 多轨道时间线引擎
  tracks: Track[] = []
  fps = 24  // 拟24帧排版

  addClip(trackId, clip) {
    const track = this.getTrack(trackId)
    track.clips.push(clip)
    this.rebuildRenderGraph()
  }

  renderFrame(time: number) {
    const ctx = this.canvas
    this.tracks.forEach(t =>
      t.drawAt(ctx, time)
    )
  }
}

前端 2017 - 2024

云视频创作平台

互联网版的 Premiere。多轨道在线视频编辑器，支持拟24帧排版、无极缩放、音视频/图片/文字/特效文字多样式素材自由排布与实时预览。集成素材供应、模板套用、一键分发、字幕配音、语音文字互转等完整创作生态。前端独立管理十多个媒体进程，低消耗实现实时预览。

24帧精度

10+媒体进程

全流程创作服务

React Ant Design HLS.js Video.js CSS3 Lottie html2canvas

演示

服务器原因加载比较慢，现在是纯前端站，支持上传素材编辑，后续会完善别的功能和支持导出。

video.engrave.date

quant-crawler.js

// 实时爬取 + 策略筛选
const pool = await loadWatchPool()
for (const code of pool) {
  const quote = await fetchQuote(code)
  const signal = analyzeStrategy(
    quote, historyData
  )
  if (signal.strength > THRESHOLD) {
    await sendAlert(code, signal)
    logBacktest(code, signal)
  }
}

全栈 2022 - 2026

证券数据量化分析

实时与分时段爬取新浪、东财等证券数据入库，按策略进行计算筛选，多维方块+K线展示全市场行业势能。监测异动前蓄势，辅助选股和指数预测。

1万+数据表

多策略量化筛选

Node.js React ECharts MySQL Nginx PM2

演示

stock.engrave.date

DataViz.tsx

// 图表 -> 视频 生成管线
const chart = echarts.init(container)
chart.setOption(excelData)

const videoStream = await captureFrames(
  chart, { fps: 30, duration: 10 }
)

await videojs.encode(videoStream, {
  format: 'mp4',
  quality: 'high'
})

全栈 2020 -

数据可视化 - 图表转视频

基于 React、ECharts、Handsontable、Video.js 开发。支持 Excel 导入导出、页面内编辑，十多种特色图表（动态排序柱状图、饼图、散点图、玉珏图等）可直接渲染为视频输出。

10+图表类型

自动视频生成

React ECharts Handsontable Video.js

演示

dataV.engrave.date

LiveClip.tsx

// 直播流 -> 片段裁剪
const stream = connectLive(streamUrl)
const monitor = createMonitor(stream)

monitor.onSegment((seg) => {
  timeline.addClip(seg)
  preview.update(seg)
})

const clip = timeline.exportRange(
  startTime, endTime
)

前端 2019 -

直播剪辑平台

接收用户指定直播流，展示视频直播预览监视器与视频时序轨道图，可在时间轴上选择和裁剪，将所选视频片段快速保存为新视频。

实时直播预览

快剪片段导出

React HLS.js Video.js CSS3

演示

cut.engrave.date

WindMonitor.tsx

// 风机实时数据监控
const ws = new WebSocket(monitorUrl)

ws.onmessage = (e) => {
  const data = JSON.parse(e.data)
  dashboard.updateGauge(
    data.rpm, data.power, data.temp
  )
  if (data.alarm) {
    triggerAlert(data)
  }
}

全栈

风机监控

风力发电设备的实时数据监控与告警系统，包含设备状态仪表盘、运行数据可视化与异常告警推送。

实时数据监控

自动异常告警

React ECharts WebSocket Node.js

演示

blades.engrave.date

pages/visitor.vue

<template>
  <view class="visit-card">
    <picker mode="date"
      :value="form.date"
      @change="onDatePick" />
    </picker>
    <button @click="submitVisit">
      提交预约
    </button>
  </view>
</template>

移动端 2022 - 2024

大北农集团园区信息化

基于 UniApp 开发的企业园区信息化小程序，涵盖访客预约审核、餐厅点餐、会议室/车位/便民物品预约、园区知识库等功能。PC 端管理平台基于若依框架开发。

6+业务模块

小程序+ PC 管理端

UniApp 微信小程序 Vue.js 若依框架

微信小程序

构建复杂交互
的 Web 体验

项目展示

云视频创作平台

证券数据量化分析

数据可视化 - 图表转视频

直播剪辑平台

风机监控

大北农集团园区信息化

个人简介

重度交互领域的实践者

技术栈

工作经历

有项目想法？

构建 复杂交互的 Web 体验

项目展示

云视频创作平台

证券数据量化分析

数据可视化 - 图表转视频

直播剪辑平台

风机监控

大北农集团园区信息化

个人简介

重度交互领域的实践者

技术栈

工作经历

有项目想法？

构建复杂交互
的 Web 体验