WinCard

use

main.js 中引用 WinCard：

import { createApp } from "vue";
import App from "./App.vue";

import WinCard from "wincard";
import "wincard/dist/wincard.css";

createApp(App)
    .use(WinCard)
    .mount("#app");

vue 中使用：

<!-- 素材页编辑 -->
<PPTEditor :slide="slide" @onSave="onSave" />

<!-- 预览 -->
<ScreenView :slide="slide" @pagePrev="pagePrev()" @pageNext="pageNext()" />

slide数据示例：

// 素材页
{
    id: "39FFFBBE2B08D1CFD8FCA24DE655B35B",
    type: "element",
    viewportRatio: 0.5625,
    elements: [
        {
            name: "形状1",
            type: "shape",
            id: "4cbRxp",
            left: 0,
            top: 200,
            width: 546,
            height: 362.5,
            viewBox: 200,
            path: "M 0 0 L 0 200 L 200 200 Z",
            fill: "#5b9bd5",
            fixedRatio: false,
            opacity: 0.7,
            rotate: 0
        },
        {
            name: "形状2",
            type: "shape",
            id: "ookHrf",
            left: 0,
            top: 0,
            width: 300,
            height: 320,
            viewBox: 200,
            path: "M 0 0 L 0 200 L 200 200 Z",
            fill: "#5b9bd5",
            fixedRatio: false,
            flipV: true,
            rotate: 0
        },
        {
            name: "文本1",
            type: "text",
            id: "idn7Mx",
            left: 355,
            top: 65.25,
            width: 585,
            height: 188,
            lineHeight: 1.2,
            content:
                "<p><strong><span style='font-size:  112px'>PPTIST</span></strong></p>",
            rotate: 0,
            defaultFontName: "Microsoft Yahei",
            defaultColor: "#333"
        },
        {
            name: "文本2",
            type: "text",
            id: "7stmVP",
            left: 355,
            top: 253.25,
            width: 585,
            height: 56,
            content:
                "<p><span style='font-size:  24px'>基于 Vue 3.x + TypeScript 的在线演示文稿应用</span></p>",
            rotate: 0,
            defaultFontName: "Microsoft Yahei",
            defaultColor: "#333"
        },
        {
            name: "线条",
            type: "line",
            id: "FnpZs4",
            left: 361,
            top: 238,
            start: [0, 0],
            end: [549, 0],
            points: ["", ""],
            color: "#5b9bd5",
            style: "solid",
            width: 2
        }
    ],
    background: {
        type: "solid",
        color: "#ffffff"
    }
}

// 听写页
{
    id: "39FFFBBE2B08D1CFD8FCA24DE655B35B",
    type: "listen",
    viewportRatio: 0.5625,
    elements: [],
    listenWords: [
        {
            id: "39FED7308B47FE07436EC33844DE78F5",
            name: "苹果1",
            file: "TeachPageFile/EFF4D19486842BDF411839B61AE22B71.mp3",
            extention: "mp3",
            pageWordID: "39FFFC10573FB3AD0BC87C17A08E2AD5"
        },
        {
            name: "121212",
            id: "39FECC5CDF3022C43C032688958B16BF",
            file: "TeachPageFile/28D7326F7772879CDCF564A2A755B264.m4a",
            extention: "m4a",
            pageWordID: "39FFFC10574015C89FAEF9355BB5E7CB"
        },
        {
            name: "121212",
            id: "39FECC5CDF3022C43C032688958B16BF",
            file: "TeachPageFile/28D7326F7772879CDCF564A2A755B264.m4a",
            extention: "m4a",
            pageWordID: "39FFFC65054430D68B36F090A1875989"
        },
        {
            name: "测试",
            id: "39FEBCA9648BE111E08E1B4CD1C5104E",
            file: "TeachPageFile/814F94E1DBA66566099B0787FA7678D7.mp4",
            extention: "mp4",
            pageWordID: "39FFFC654B2BDC6027B84AE7E1021F3A"
        },
        {
            name: "敦实",
            id: "39FEBCA933D981CE5D2A348A65ABC0DB",
            file: "TeachPageFile/CA7DC5A89DD86B2DD66B8D996EAB67E3.mp3",
            extention: "mp3",
            pageWordID: "39FFFC654B2B2A9804F1F6914BF1D786"
        }
    ],
    background: {
        type: "solid",
        color: "#ffffff"
    }
}

// 跟读页
{
    id: "39FFFBBE2B08D1CFD8FCA24DE655B35B",
    type: "follow",
    viewportRatio: 0.5625,
    elements: [],
    follow: {
        src: "ElementFile/435F9C581336C2582C98A7708699585D.mp4"
    },
    background: {
        type: "solid",
        color: "#ffffff"
    }
}

【注】：支持数据导入和导出

5.0.0版本针对动画进行数据大调整，数据增加版本号

import { version } from "wincard";
// 获取插件支持数据版本号，与使用的slide数据的版本号进行比较，当不支持时，需要对相应的数据进行相应的处理
// 1.0.0，数据当中没有版本号的数据我们这里统称为1.0.0版本数据
// 针对1.0.0的数据，其中的步骤数据字段steps没有了，统一使用animations，事件的里的数据结构也进行的调整和anmaitions的数据结构保持一致
// 相关处理代码示例
export const dealAnimationData = (slide: Slide) => {
    if (slide.steps) {
        const steps = slide.steps;
        delete slide.steps;

        let animations: PPTAnimation[] = [];
        // 当步骤中存在进入与退出动画时，只管进入动画，舍弃退出动画
        steps.forEach(actions => {
            const _animation = getAnimations(actions || []);
            animations = animations.concat(_animation);
        });

        slide.animations = animations;
    }

    slide.elements.forEach(element => {
        element.actions = getAnimations((element.actions as unknown || []) as PPTElementAction[]);
    });

    return slide;
};

const getAnimations = (actions: PPTElementAction[]) => {
    const animations: PPTAnimation[] = [];
    actions.forEach((item, index) => {
        const type = item.inAni ? "in" : item.outAni ? "out" : "in";
        animations.push({
            id: createRandomCode(),
            elId: item.target,
            ani: (type === "in" ? item.inAni : item.outAni) || "",
            type,
            path: type === "in" ? item.inPath : item.outPath,
            duration: item.duration || 0,
            trigger: index === 0 ? "click" : "meantime"
        });
    });
    return animations;
};

6.0.0版本

• 引入font.css

import "node_modules/wincard/dist/font.css";

• 使用MathJax@3.2.2版本，在使用本插件，需要引入该版本插件

// 引入mathjax
// 处理批量初始化问题
const callbackArr: (() => void)[] = [];
let isInit = true;

export const initMathJax = (config = {}, callback?: () => void) => {
    if (window.MathJax) return callback && callback();
    if (isInit) {
        isInit = false;
        const script = document.createElement("script");
        script.src = "./mathjax/3.2.2/tex-svg-full.js";
        script.async = true;
        document.head.appendChild(script);
        // 没有找到好的配置解决办法，这里直接在localstorage里存入配置值
        // localStorage.setItem("MathJax-Menu-Settings", '{"renderer":"svg"}');
        const defaultConfig = {
            loader: { load: ["[tex]/unicode", "[tex]/mhchem"] },
            tex: {
                packages: { "[+]": ["unicode", "mhchem"] },
                inlineMath: [['\\(', '\\)']],
                displayMath: [
                    ['$$', '$$'],
                    ['\\[', '\\]']
                ],
                processEscapes: true
            },
            options: {
                enableMenu: false,
                menuOptions: {
                    settings: {
                        renderer: "svg"
                    }
                }
            },
            startup: {
                pageReady: () => {
                    callback && callback();

                    if (callbackArr.length > 0) {
                        for (const c of callbackArr) {
                            c();
                        }
                    }
                }
            }
        };

        const mergeConfig = Object.assign({}, defaultConfig, config);
        window.MathJax = mergeConfig;
    } else {
        if (callback) callbackArr.push(callback);
    }
};

initMathJax();

• 编辑操作

    SORT = "sort", // 排序
    SAVE = "save", // 保存
    RENAME = "rename", // 重命名
    PREVIEW = "preview", // 预览
    STICKUP = "stickup", // 粘贴
    SHOW_HIDE = "show_hide", // 显示或隐藏
    IMPORT_PPT = "import_ppt", // 导入ppt
    CREATE_PAGE = "create_page", // 创建页
    GAME_CONFIG = "game_config", // 游戏配置
    HANDOFF_PAGE = "handoff_page", // 切换页
    INSERT_VIDEO = "insert_video", // 插入视频
    UPDATE_VIDEO = "update_video", // 更换视频
    SAVE_ELEMENT = "SAVE_ELEMENT", // 保存素材
    SAVE_TEMPLATE = "save_template", // 保存模板
    CREATE_FOLDER = "create_folder", // 创建文件夹
    SELECT_HYPERLINK = "select_hyperlink", // 选择超链接
    DELETE_HYPERLINK = "delete_hyperlink", // 删除超链接
    REMOVE_CARD_PAGE = "remove_card_page", // 删除卡或者页
    LESSON_PLAN_DESIGN = "lesson_plan_design", // 教案设计
    APPLY_BACKGROUND = "apply_background", // 当前背景应用于所有幻灯片