zydx-plus 1.12.50 → 1.13.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.12.50",
+  "version": "1.13.52",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [
@@ -25,7 +25,9 @@
     "flipbook-vue": "^1.0.0-beta.4",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/plugin-upload-attachment": "^1.1.0",
-    "snabbdom": "^3.5.1"
+    "snabbdom": "^3.5.1",
+    "@wangeditor/plugin-formula": "^1.0.11",
+    "katex": "^0.16.6"
   },
   "peerDependencies": {
     "vue": "^3.2.13"

package/src/components/editor/src/editor.vue

@@ -10,10 +10,12 @@ import '@wangeditor/editor/dist/css/style.css'
 import { defineComponent, shallowReactive } from 'vue'
 import { Boot } from '@wangeditor/editor'
 import attachmentModule from '@wangeditor/plugin-upload-attachment'
+import formulaModule from '@wangeditor/plugin-formula'
 import { menuModule } from './menu'
 import { nodeModule } from './node'
 import { useWangEditor,WeEditable, WeToolbar } from './wangeditor5-for-vue3/index'
 Boot.registerModule(attachmentModule)
+Boot.registerModule(formulaModule)
 Boot.registerModule(nodeModule)
 Boot.registerModule(menuModule)
 

package/src/components/mind/index.js

@@ -0,0 +1,7 @@
+import mind from './src/mind.vue';
+
+mind.install = function(Vue) {
+    Vue.component(mind.name, mind);
+};
+
+export default mind;

package/src/components/mind/src/mind.vue

@@ -0,0 +1,514 @@
+<template>
+    <div class="mind" ref="mind">
+        <div class="table">
+            <button :disabled="retShow" @click="ret">返回</button>
+            <button :disabled="forwardShow" @click="forward">前进</button>
+            <button :disabled="mindShow" @click="addNode">添加节点</button>
+            <button :disabled="mindShow" @click="brotherNode">兄弟节点</button>
+            <button :disabled="mindShow" @click="delNode">删除节点</button>
+            <button :disabled="mindShow" @click="associativeLine">关联线</button>
+            <button :disabled="mindShow" @click="nodeStyle">节点样式</button>
+            <button @click="structure">结构切换</button>
+            <button @click="preservation">保存</button>
+        </div>
+        <div id="mindMapContainer"></div>
+        <div class="node-style" ref="nodeStyle" :class="{'node-s': trans, 'node-h': !trans}">
+            <div class="style-li">
+                <div class="style-title">文字</div>
+                <div class="style-list">
+                    <div class="node-left zIndex2">
+                        <span>字号</span>
+                        <Select :options="optionSize" v-model:value="sizeValue"></Select>
+                    </div>
+                    <div class="node-left padd zIndex2">
+                        <span>行高</span>
+                        <Select :options="optionRow" v-model:value="rowValue"></Select>
+                    </div>
+                </div>
+                <div class="node-but">
+                    <button @click="colorTap($event,'color')">颜色</button>
+                    <button :style="{'background-color': (boldAct)? '#549688': '#fff','color': (boldAct)? '#fff': '#333'}" @click="bolds">粗体</button>
+                    <button :style="{'background-color': (italicAct)? '#549688': '#fff','color': (italicAct)? '#fff': '#333'}" @click="italics">斜体</button>
+                    <button :style="{'background-color': (scribeAct)? '#549688': '#fff','color': (scribeAct)? '#fff': '#333'}" @click="scribes">划线</button>
+                </div>
+            </div>
+            <div class="style-li">
+                <div class="style-title">边框</div>
+                <div class="style-list">
+                    <div class="node-left">
+                        <span>颜色</span>
+                        <div @click="colorTap($event,'borderColor')" class="backColor"></div>
+                    </div>
+                    <div class="node-left padd zIndex3">
+                        <span>样式</span>
+                        <Select :options="optionLine" v-model:value="styleValue"></Select>
+                    </div>
+                </div>
+                <div class="style-list">
+                    <div class="node-left zIndex3">
+                        <span>宽度</span>
+                        <Select :options="optionWidth" v-model:value="widthValue"></Select>
+                    </div>
+                    <div class="node-left padd zIndex4">
+                        <span>圆角</span>
+                        <Select :options="optionWidth" v-model:value="filletValue"></Select>
+                    </div>
+                </div>
+            </div>
+            <div class="style-li">
+                <div class="style-title">背景</div>
+                <div class="style-list">
+                    <div class="node-left">
+                        <span>颜色</span>
+                        <div @click="colorTap($event,'fillColor')" class="backColor"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="style-li">
+                <div class="style-title">线条</div>
+                <div class="style-list">
+                    <div class="node-left zIndex">
+                        <span>宽度</span>
+                        <Select :options="optionWidth" v-model:value="lineValue"></Select>
+                    </div>
+                    <div class="node-left padd zIndex">
+                        <span>样式</span>
+                        <Select :options="optionLine" v-model:value="lineStyleValue"></Select>
+                    </div>
+                </div>
+                <div class="style-list">
+                    <div class="node-left">
+                        <span>颜色</span>
+                        <div @click="colorTap($event,'lineColor')" class="backColor"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="style-li">
+                <div class="style-title">形状</div>
+                <div class="style-list">
+                    <div class="node-left">
+                        <span>形状</span>
+                        <Select :options="optionShape" v-model:value="shapeValue"></Select>
+                    </div>
+                </div>
+            </div>
+            <div class="back-col" :style="{top: top + 'px'}" v-if="colorShow">
+                <Coloring @submit="submit" @empty="empty" @rgba="rgba" :color="color"></Coloring>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Select from '../../select/src/select.vue'
+import Coloring from '../../coloring/src/coloring.vue'
+import MindMap from "simple-mind-map";
+import Drag from 'simple-mind-map/src/Drag.js'
+import AssociativeLine from 'simple-mind-map/src/AssociativeLine.js'
+import Export from 'simple-mind-map/src/Export.js'
+import "simple-mind-map/dist/simpleMindMap.esm.css";
+
+// 注册插件
+MindMap.usePlugin(Drag).usePlugin(AssociativeLine).usePlugin(Export)
+
+export default {
+    components: {Select,Coloring},
+    name: "jsmind",
+    data() {
+        return {
+            mindMap: null,
+            mindShow: false,
+            retShow: false,
+            forwardShow: false,
+            optionSize: [
+                {label: "12", value: '12'},
+                {label: "14", value: '14'},
+                {label: "16", value: '16'},
+                {label: "18", value: '18'},
+                {label: "20", value: '20'},
+                {label: "24", value: '24'},
+                {label: "26", value: '26'},
+                {label: "28", value: '28'},
+                {label: "30", value: '30'}
+            ],
+            sizeValue: '18',
+            optionRow: [
+                {label: "1", value: '1'},
+                {label: "1.5", value: '1.5'},
+                {label: "2", value: '2'},
+                {label: "2.5", value: '2.5'},
+                {label: "3", value: '3'}
+            ],
+            rowValue: '1.5',
+            optionWidth: [
+                {label: "0", value: '0'},
+                {label: "1", value: '1'},
+                {label: "2", value: '2'},
+                {label: "3", value: '3'},
+                {label: "4", value: '4'},
+                {label: "5", value: '5'},
+                {label: "6", value: '6'},
+                {label: "7", value: '7'},
+                {label: "8", value: '8'},
+                {label: "9", value: '9'},
+                {label: "10", value: '10'},
+            ],
+            widthValue: '1',
+            filletValue: '5',
+            lineValue: '1',
+            optionLine: [
+                {label: "实线", value: 'none'},
+                {label: "虚线", value: '5,5'},
+                {label: "点线", value: '1,5'}
+            ],
+            lineStyleValue: 'none',
+            styleValue: 'none',
+            optionShape: [
+                {label: "矩形", value: 'rectangle'},
+                {label: "菱形", value: 'diamond'},
+                {label: "平行四边形", value: 'parallelogram'},
+                {label: "圆角矩形", value: 'roundedRectangle'},
+                {label: "八角形", value: 'octagonalRectangle'},
+                {label: "外三角矩形", value: 'outerTriangularRectangle'},
+                {label: "内三角矩形", value: 'innerTriangularRectangle'},
+                {label: "椭圆", value: 'ellipse'},
+                {label: "圆", value: 'circle'},
+            ],
+            shapeValue: 'rectangle',
+            trans: false,
+            colorShow: false,
+            top: 0,
+            colorData: {},
+            activeNodes: null,
+            color: 'rgba(84,150,136,1)',
+            boldAct: false,
+            italicAct: false,
+            scribeAct: false
+        }
+    },
+    props: {
+        data: { // 数据
+            type: Object,
+            default: {
+                "data": {
+                    "text": "根节点"
+                },
+                "children": []
+            }
+        },
+        readOnly: { // 只读
+            type: Boolean,
+            default: false
+        },
+    },
+    watch: {
+        sizeValue(e) { // 字号
+            this.activeNodes.forEach(node => {
+                node.setStyle('fontSize',e)
+            })
+        },
+        rowValue(e) { // 行高
+            this.activeNodes.forEach(node => {
+                node.setStyle('lineHeight',e)
+            })
+        },
+        styleValue(e) { // 粗斜体
+            this.activeNodes.forEach(node => {
+                node.setStyle('borderDasharray',e)
+            })
+        },
+        widthValue(e) { // 线宽
+            this.activeNodes.forEach(node => {
+                node.setStyle('borderWidth',e)
+            })
+        },
+        filletValue(e) { // 圆角
+            this.activeNodes.forEach(node => {
+                node.setStyle('borderRadius',e)
+            })
+        },
+        shapeValue(e) { // 形状
+            this.activeNodes.forEach(node => {
+                node.setStyle('shape',e)
+            })
+        },
+        lineValue(e) { // 线宽
+            this.activeNodes.forEach(node => {
+                node.setStyle('lineWidth',e)
+            })
+        },
+        lineStyleValue(e) { // 线宽
+            this.activeNodes.forEach(node => {
+                node.setStyle('lineDasharray',e)
+            })
+        },
+    },
+    mounted() {
+        let mindSess = sessionStorage.getItem('mind')
+        this.mindMap = new MindMap({
+            el: document.getElementById('mindMapContainer'),
+            enableFreeDrag: false, // 是否开启自由拖拽
+            enableNodeTransitionMove: false, // 是否开启节点过渡动画
+            layout: 'logicalStructure', // 节点布局方式
+            data: this.data
+        });
+        this.mindMap.setMode(this.readOnly ? 'readonly':'edit')
+        this.mindMap.on('node_active', (node, activeNodeList) => {
+            this.mindShow = node === null;
+        })
+        this.mindMap.on('back_forward', (index, len) => {
+            this.retShow = index <= 0;
+            this.forwardShow = index >= len - 1
+        })
+        this.mindMap.on('node_active', (node, activeNodeList) => {
+            this.activeNodes = activeNodeList
+        })
+    },
+    methods: {
+        // readOnly() {
+        //     this.mindMap.setMode(value ? 'readonly' : 'edit')
+        // },
+        scribes() {
+            this.scribeAct = !this.scribeAct
+            this.activeNodes.forEach(node => {
+                node.setStyle('textDecoration', (!this.scribeAct)? 'none':'underline')
+            })
+        },
+        italics() {
+            this.italicAct = !this.italicAct
+            this.activeNodes.forEach(node => {
+                node.setStyle('fontStyle', (!this.italicAct)? 'normal':'italic')
+            })
+        },
+        bolds() {
+            this.boldAct = !this.boldAct
+            this.activeNodes.forEach(node => {
+                node.setStyle('fontWeight', (!this.boldAct)? 'normal':'bold')
+            })
+        },
+        rgba(e) {
+            this.colorData.data.target.style.backgroundColor = e.rgba
+        },
+        submit(e) {
+            this.activeNodes.forEach(node => {
+                node.setStyle(this.colorData.index, e.rgba)
+            })
+            this.colorData.data.target.style.backgroundColor = e.rgba
+            this.colorShow = false
+        },
+        empty() {
+            this.colorShow = false
+        },
+        colorTap(e,i) {
+            this.colorData = {index: i, data: e}
+            let parent = this.colorData.data.target.parentNode.offsetTop + 32
+            if(parent > 330) parent = 300
+            this.colorShow = !this.colorShow
+            this.top = parent
+        },
+        structure() {
+            let layoutList = 'logicalStructure'
+            const layout = this.mindMap.getLayout()
+            if (layout === 'mindMap') {
+                layoutList = 'organizationStructure'
+            } else if (layout === 'organizationStructure') {
+                layoutList = 'logicalStructure'
+            }else {
+                layoutList = 'mindMap'
+            }
+            this.mindMap.setLayout(layoutList)
+        },
+        preservation() {
+            this.mindMap.export('png',true,'123213', true)
+        },
+        nodeStyle() {
+            this.$refs.nodeStyle.style.display = 'block'
+            this.$refs.mind.style.overflow = 'hidden'
+            this.trans = !this.trans
+            setTimeout(() => {
+                this.$refs.mind.style.overflow = 'visible'
+                if(!this.trans) {
+                    this.$refs.nodeStyle.style.display = 'none'
+                }
+            }, 250)
+        },
+        // 关联线
+        associativeLine() {
+            this.mindMap.associativeLine.createLineFromActiveNode()
+        },
+        // 前进
+        forward() {
+            this.mindMap.execCommand('FORWARD')
+        },
+        // 返回
+        ret() {
+            this.mindMap.execCommand('BACK')
+        },
+        // 添加节点
+        addNode() {
+            this.mindMap.execCommand('INSERT_CHILD_NODE')
+        },
+        // 删除节点
+        delNode() {
+            this.mindMap.execCommand('REMOVE_NODE')
+        },
+        // 兄弟节点
+        brotherNode() {
+            this.mindMap.execCommand('INSERT_NODE')
+        }
+    }
+}
+</script>
+
+<style scoped>
+.node-s{
+    animation: nodeShow 0.3s;
+    display: block;
+}
+.node-h{
+    animation: nodeHide 0.3s;
+}
+@keyframes nodeHide {
+    0% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+    100% {
+        opacity: 0;
+        transform: translateX(110%);
+    }
+}
+@keyframes nodeShow {
+    0% {
+        opacity: 0;
+        transform: translateX(110%);
+    }
+    10% {
+        opacity: 1;
+        transform: translateX(100%);
+    }
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+.zIndex{
+    position: relative;
+    z-index: 30;
+}
+.zIndex2{
+    position: relative;
+    z-index: 33;
+}
+.zIndex3{
+    position: relative;
+    z-index: 32;
+}
+.zIndex4{
+    position: relative;
+    z-index: 31;
+}
+.backColor{
+    width: 93px;
+    height: 30px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    margin-left: -40px;
+    box-shadow: 0 1px 0 1px rgb(0 0 0 / 4%);
+    cursor: pointer;
+    background-color: #549688;
+}
+.back-col{
+    position: absolute;
+    top: 0;
+    left: 60px;
+    z-index: 40;
+}
+.node-but{
+    display: flex;
+    padding: 5px 0;
+}
+.node-but button{
+    flex: 1;
+    margin-right: 5px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    padding: 5px 10px;
+    cursor: pointer;
+    font-size: 12px;
+}
+.node-but button:last-child{
+    margin: 0;
+}
+.style-title{
+    font-size: 16px;
+    font-weight: bold;
+    padding: 5px 0 10px 0;
+}
+.mind {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+.table{
+    position: absolute;
+    top: 10px;
+    left: 30px;
+    background-color: #fff;
+    border-radius: 5px;
+    padding: 10px;
+    box-shadow: rgba(0, 0, 0, 0.06) 0 2px 16px 0;
+    z-index: 10;
+}
+.style-list{
+    display: flex;
+    padding: 5px 0;
+}
+.node-left{
+    display: flex;
+    padding-right: 10px;
+}
+.node-left>span{
+    display: inline-block;
+    width: 80px;
+    line-height: 32px;
+    padding-right: 10px;
+    box-sizing: border-box;
+}
+.padd{
+    padding-right: 0;
+}
+.node-style{
+    position: absolute;
+    right: 0;
+    top: 50%;
+    background-color: #fff;
+    border-bottom-left-radius: 5px;
+    border-top-left-radius: 5px;
+    padding: 20px;
+    box-shadow: rgba(0, 0, 0, 0.06) 0 2px 16px 0;
+    z-index: 11;
+    width: 320px;
+    height: 550px;
+    margin-top: -270px;
+    display: none;
+}
+.table button{
+    margin-right: 5px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    padding: 5px 10px;
+    cursor: pointer;
+    font-size: 12px;
+}
+.table button:last-child{
+    margin-right: 0;
+}
+
+#mindMapContainer {
+    width: 100%;
+    height: 100%;
+}
+</style>

package/src/components/word/src/word.vue

@@ -5,16 +5,18 @@
 </template>
 
 <script>
+import katex from "katex";
+import "katex/dist/katex.css";
 export default {
     name: "zydx-word",
     data() {
         return {
-            perPage: 38,
+            perPage: 40,
             pages: [],
             imgList: [], // 图片列表
             strNum: 76, // 每行字符数
             pagesText: '', // 每页内容
-            start: 0,
+            start: 0
         }
     },
     props: {
@@ -27,6 +29,11 @@ export default {
         this.splitHtml(this.content, this.perPage)
     },
     methods: {
+        ToString(data) {
+            return katex.renderToString(data, {
+                throwOnError: false,
+            });
+        },
         getImgHeight(imgs) {
             // 获取img标签里的图片地址
             imgs = imgs.join('')
@@ -87,6 +94,16 @@ export default {
                         this.pagesText += `<p style="text-align: center;"><img style="width: ${(w < 693) ? w : 693}px;height: ${(h > 1020) ? 1020 : h}px;vertical-align: middle;padding: 14px 0" src="${src}" alt="" /></p>`
                         imgIndex += 1
                     } else {
+                        // 判断是否data-w-e-type="video"
+                        if (arr[i].indexOf('data-w-e-type="formula"') > -1) {
+                            // 获取公式内容
+                            const dataValue = arr[i].match(/data-value=".*?"/g)[0].replace(/data-value="|"/g, '')
+                            // 删除span标签
+                            arr[i] = arr[i].replace(/<span.*?>/g, '$')
+                            arr[i] = arr[i].replace(/<\/span>/g, '$')
+                            const sp = arr[i].split('$$')
+                            arr[i] = `${sp[0]}${this.ToString(dataValue)}${sp[1]}`
+                        }
                         // 判断标签是否是h1-h6
                         if (arr[i].indexOf('<h') > -1) {
                             arr[i] = arr[i].replace(/<h[1-6]>/g, '<p style="font-size: 18px;font-weight: bold;">')
@@ -147,14 +164,12 @@ export default {
     background-color: #fff;
     padding: 50px;
     display: inline-block;
-    box-sizing: border-box;
     white-space: pre-wrap;
     text-align: left;
     box-shadow: 0 0 5px rgba(0, 0, 0, .5);
     margin-bottom: 30px;
     font-size: 18px;
-    line-height: 1.5;
-    page-break-after: always;
     position: relative;
+    box-sizing: border-box;
 }
 </style>

package/src/index.js

@@ -15,6 +15,7 @@ import flip from './components/flip/index';
 import editor from './components/editor/index';
 import tab from './components/tab/index';
 import word from './components/word/index';
+import mind from './components/mind/index';
 
 const components = [
     Calendar,
@@ -31,7 +32,8 @@ const components = [
     flip,
     editor,
     tab,
-    word
+    word,
+    mind
 ];
 
 function install(app) {
@@ -43,7 +45,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.12.50',
+    version: '1.13.52',
     install,
     Calendar,
     Message,
@@ -61,6 +63,7 @@ export default {
     flip,
     editor,
     tab,
-    word
+    word,
+    mind
 };