Media Editor

前言

这是个练手项目，用来熟悉Vue3/TypeScript/vite. 很多东西都在摸索中前进。

演示

• github-page

仓库

• github
• gitee

安装

yarn
yarn dev

技术栈

• vue3
• vite
• typescript

插件

• Pinia
• scss
• naive-ui
• vue-use

ICON

使用xicons中的carbon图标

import { Undo } from '@vicons/carbon'
import { NIcon } from 'naive-ui'

<NIcon :size="18" class="icon" title="撤销">
  <Undo />
</NIcon>

• 通用样式src\styles\index.scss中.n-icon
• 禁用: class="disabled"

深色模式

1. 使用css变量(styles/var.scss)
2. <style>直接使用color: var(--color)
3. <script>使用useCssVar

  import { useCssVar } from "@vueuse/core";
  const color = useCssVar('--color', document.body)

TODO:

22.4.21

短期内将要做的内容

• 片段跨轨道拖拽
• 片段拖拽碰撞覆盖
• 片段入出点设置
• 时间轴 Ruler.vue
• 轨道控制器 trackControls.vue
• 添加时码线
• 片段 从媒体库添加到轨道上