src
├─assets 静态资源
│  └─images
├─components 公共组件
│  ├─error-boundary 错误提示
│  ├─list-status 异步列表
│  ├─login 登录/注册模块
│  │  ├─loginMobile 手机登录
│  │  ├─loginQrcode 二维码登录
│  │  └─loginRegisterBox
│  ├─not-found 404页面
│  ├─page-loading 页面顶部的加载条
│  └─water-full 瀑布流组件
├─config 全局配置
├─icons 公共icon
├─language 多语言配置
├─layout 布局框架
│  ├─index-layout
│  └─manage-layout
├─less 全局less
├─pages 页面模块
│  ├─editor 编辑器页面
│  │  ├─common 公共组件
│  │  │  ├─dragitem 拖拽素材到画布
│  │  │  └─source 资源列表框
│  │  ├─components 编辑器大模块
│  │  │  ├─canvas 画布区域组件
│  │  │  ├─contextMenu 鼠标右键菜单
│  │  │  ├─header 编辑器顶部栏
│  │  │  ├─options 设置区域模块
│  │  │  │  ├─components 设置小模块
│  │  │  │  │  ├─align 对齐方式设置
│  │  │  │  │  ├─background 背景设置
│  │  │  │  │  ├─blur 模糊设置
│  │  │  │  │  ├─border 边框设置
│  │  │  │  │  ├─color 颜色设置
│  │  │  │  │  ├─colour 叠加模式设置
│  │  │  │  │  ├─filter 滤镜设置
│  │  │  │  │  ├─flipxy 翻转、复制、锁定、可见等快捷按钮
│  │  │  │  │  ├─group 组设置
│  │  │  │  │  ├─item 公共布局小模块
│  │  │  │  │  ├─opacity 透明度设置
│  │  │  │  │  ├─position 位置设置
│  │  │  │  │  ├─radius 圆角设置
│  │  │  │  │  ├─rotation 旋转设置
│  │  │  │  │  ├─set-color 颜色设置
│  │  │  │  │  ├─shadow 阴影设置
│  │  │  │  │  ├─size 宽高设置
│  │  │  │  │  ├─slider-input 滚动条插件
│  │  │  │  │  ├─strength 强度设置
│  │  │  │  │  ├─text-content 文字内容修改
│  │  │  │  │  └─text-style 文字样式修改
│  │  │  │  └─elements 元素的设置区域功能配置文件
│  │  │  ├─sidebar 左侧菜单
│  │  │  └─sources 左侧资源列表
├─server API服务
├─stores mobx的store管理
├─theme 主题配置
└─utils 公共插件

import type { ViewData, ImageLayer, BasePage, TextLayer } from './core/types/data';

export const tdata: ViewData = {
  name: 'mock数据', // 工程名称
  desc: '暂无描述', // 工程的描述
  version: '1.0.0', // 工程文件当前的版本（版本号是和我们的内核相关的）
  thumb: '', // 工程项目的封面图
  selectPageId: 'p1', // 默认展示的页面id
  createTime: 0, // 创建时间
  updateTime: 0, // 更新时间
  pages: [ // 页面
    {
      id: 'p1',
      name: 'p1',
      desc: '',
      width: 1000, // 页面的尺寸
      height: 600,
      background: { // 页面背景
        type: 'solid',
        color: '#fff',
      },
      layers: [ // 图层
        {
          id: 't1',
          name: 'test',
          desc: '',
          x: 100,
          y: 100,
          opacity: 1,
          rotation: 0,
          flipx: true,
          flipy: false,
          blur: 0,
          type: 'image',
          _dirty: '1', // 用于视图更新
          _lock: false, // 是否锁定
          _hide: false, // 是否隐藏
          width: 200,
          height: 200,
          border: {
            stroke: '#f00', // 边框色
            strokeWidth: 2,
            visible: false,
          },
          shadow: {
            x: 10,
            y: 10,
            blur: 10,
            blendMode: 'normal',
            spread: 0,
            color: 'rgba(0,0,0,0.5)',
            box: false,
            visible: true,
          },
          naturalWidth: 200,
          naturalHeight: 285,
          url: 'https://cdn.h5ds.com/video/uploads/9715/20240207/679367666016878592.png', // 图片链接
          cornerRadius: [200, 200, 200, 200], // 圆角
        } as ImageLayer,
        {
          id: 't3',
          name: 'txt',
          desc: '',
          x: 100,
          y: 100,
          opacity: 1,
          rotation: 0,
          blur: 0,
          type: 'text',
          text: '测试文字，无界云PS',
          fill: null,
          blendMode: 'normal',
          fontFamilyURL: '',
          textStyle: {
            fontSize: 20,
            fill: {
              type: 'linear',
              from: { x: 0, y: 0 },
              to: { x: 1, y: 0 },
              stops: [
                { offset: 0, color: '#FF4B4B' },
                { offset: 1, color: '#FEB027' },
              ],
            },
          },
          _dirty: '1', // 用于视图更新
          _lock: false, // 是否锁定
          _hide: false, // 是否隐藏
          border: {
            stroke: '#f00', // 边框色
            strokeWidth: 2,
            visible: false,
          },
          shadow: {
            x: 10,
            y: 10,
            blur: 10,
            blendMode: 'normal',
            spread: 0,
            color: 'rgba(0,0,0,0.5)',
            box: false,
            visible: false,
          },
        } as TextLayer,
      ],
    } as BasePage,
  ],
};

import { View } from './core';

const editor = {...};

return (
  <View
    resourceHost="https://cdn.h5ds.com"
    callback={_store => {
      editor.store = _store;
    }}
    env="editor"
    data={pageData}
    target={document.body}
    onContextMenu={(e, layers) => {
      // 显示鼠标右键菜单
      editor.showContextMenu(e.origin, {
        layers,
      });
    }}
    onDragUp={() => {
      // 更新设置区域
      editor.updateOption();
    }}
    onControlSelect={(_e, ids) => {
      // 选中元素
      editor.setSelectedElementIds(ids);
    }}
  />
);

const url = '/assets/img.png';

const newURL = store.setURL(url);

// newURL地址为：https://cdn.h5ds.com/assets/img.png;

// 修改坐标
layer.x = 100;
layer.y = 200;

// 通知视图更新
store.update();

// video-editor/vite.config.ts

server: {
  https: true,
  host: '0.0.0.0',
  port: 3002,
  headers: { // 因为视频编辑器的业务需求，必须加上这两个头信息才可以让ffmpeg在浏览器正常运行
    'Cross-Origin-Opener-Policy': 'same-origin',
    'Cross-Origin-Embedder-Policy': 'credentialless',
  },
  proxy: {
    '/cgi-bin': { // 微信二维码地址代理
      target: 'https://video.h5ds.com',
      changeOrigin: true,
    },
    '/api': { // api地址代理
      target: 'https://video.h5ds.com',
      changeOrigin: true,
    },
    '/fonts': { // 字体包资源的代理地址
      target: 'https://cdn.h5ds.com/assets',
      changeOrigin: true,
    },
    '/video': { // 部分素材的代理地址
      target: 'https://cdn.h5ds.com',
      changeOrigin: true,
    },
  },
},