zydx-plus 1.33.387 → 1.33.389

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.33.387",
+  "version": "1.33.389",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

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

@@ -83,6 +83,41 @@
       </div>
     </div>
 
+    <!--图片的浮动菜单-->
+    <div class="bubble-menu-img">
+      <template  v-if="editor">
+        <div class="line">
+          <div class="label">图片缩放：</div>
+          <div class="percent">
+            <div class="symbol">%</div>
+            <input type="number" v-model="imgSizeVal" @input="changePercent" onfocus="this.select()" placeholder="10-100">
+          </div>
+        </div>
+        <div class="line">
+          <div class="label">图片位置：</div>
+          <div class="alignmentMode">
+            <div @click="changeAlign('left')">
+              <div class="imgBgc" :class="{imgBgcAction: editor.isActive({ textAlign: 'left' })}">
+                <img :src="alignmentModeLeft">
+              </div>
+            </div>
+            <div class="segmentation"></div>
+            <div  @click="changeAlign('center')">
+              <div class="imgBgc" :class="{imgBgcAction: editor.isActive({ textAlign: 'center' })}">
+                <img :src="alignmentModeCenter">
+              </div>
+            </div>
+            <div class="segmentation"></div>
+            <div  @click="changeAlign('right')">
+              <div class="imgBgc" :class="{imgBgcAction: editor.isActive({ textAlign: 'right' })}">
+                <img :src="alignmentModeRight">
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+
     <div v-if="!readOnly && toolbar.length > 0" class="complete">
       <button v-if="butShow" class="but" @click="confirm">完成</button>
     </div>
@@ -182,13 +217,11 @@
           <div class="p-popup-title">缩进设置</div>
           <div class="p-popup-retraction">
             <div class="p-popup-setting">
-              <div class="name">左侧缩进</div>
-              ：
+              <div class="name">左侧缩进</div>：
               <input v-model="paragraph.left" min="0" type="number" @input="checkNum"/>
               <p>px</p></div>
             <div class="p-popup-setting">
-              <div class="name">右侧缩进</div>
-              ：
+              <div class="name">右侧缩进</div>：
               <input v-model="paragraph.right" min="0" type="number" @input="checkNum"/>
               <p>px</p></div>
           </div>
@@ -338,7 +371,6 @@
             <div class="page-margin-title"> 切换版式</div>
             <div class="page-line-select">
               <div class="name">选择版式：</div>
-              ：
               <zydx-select v-model:value="templateType" :options="templateOptions"></zydx-select>
             </div>
           </div>
@@ -616,6 +648,10 @@ import MarginNarrow from "../src/margin-narrow.vue";
 import MarginStandard from "../src/margin-standard.vue";
 import MarginWide from "../src/margin-wide.vue";
 import isSelect from "../src/isSelect.vue";
+import {CustomImage} from "./image-size";
+import alignmentModeCenter from './image/center.png'
+import alignmentModeLeft from './image/left.png'
+import alignmentModeRight from './image/right.png'
 
 const img = require('./image/annotation.png')
 export default {
@@ -821,7 +857,12 @@ export default {
           menuKeys: [],
           html: `<p data-signid="subject" style="text-align: center;"><strong><span style="font-size: 24px; font-family: SimHei; color: rgb(0, 0, 0);">请在此处输入题目</span></strong></p><p data-signid="author" class="author" style="text-align: center;padding-bottom: 30px;"><span style="font-size: 14px; font-family: FangSong; color: rgb(0, 0, 0);">请在此处输入作者</span></p><p data-signid="abstract" class="abstract abstract"><strong><span style="font-size: 14px; font-family: SimSun; color: rgb(0, 0, 0)">摘要:</span></strong> <span style="font-size: 14px; font-family: FangSong; color: rgb(0, 0, 0)">请在此处输入摘要文本...</span></p><p data-signid="keyword" class="keyword keyword"><strong><span contenteditable="false" style="font-size: 14px; font-family: SimSun; color: rgb(0, 0, 0)">关键词:</span></strong> <span style="font-size: 14px; font-family: FangSong; color: rgb(0, 0, 0)"> 请在此处输入关键字...</span></p><p></p><p class="indent indent"><span style="font-size: 14px; font-family: SimHei; color: rgb(0, 0, 0)">请在此处输入正文文本</span></p><p data-signid="title-1" class="title drrvcvmj indent"><strong><span style="font-size: 14px; font-family: SimHei; color: rgb(0, 0, 0)">一、请在此处输入一级标题</span></strong></p><p class="indent indent"><span style="font-size: 14px; font-family: SimHei; color: rgb(0, 0, 0)">请在此处输入正文文本</span></p><p data-signid="title-2" class="title xxhnhuja indent"><strong><span style="font-size: 14px; font-family: SimHei; color: rgb(0, 0, 0)">（一）请在此处输入二级标题</span></strong></p><p class="indent indent"><span style="font-size: 14px; font-family: SimHei; color: rgb(0, 0, 0)">请在此处输入正文文本（复用格式建议直接复制粘贴段落）</span></p><p data-signid="splitLine" contenteditable="false" class="paging-line">分  页  线（保存文档时线下内容另起一页）</p><p></p><p data-signid="annotation" contenteditable="false" style="text-align: center;"><strong><span style="font-size: 24px; font-family: SimHei; color: rgb(0, 0, 0);">注释</span></strong></p><p data-signid="author" contenteditable="false" class="author" style="text-align: center;padding-bottom: 30px;"><span style="font-size: 14px;font-weight: 700; color: rgba(0, 0, 0, 0.5);">（请在文中标识要注释的内容，此处将生成注释的序号而后需要作者填写注释内容）</span></p><p data-signid="a-l" class="text" contenteditable="false"><span style="font-size: 12px; font-family: FangSong;text-indent: 2em;">① 注释：是指解释字句的文字，也指用文字解释字句，可以是文字符号图片等多种形式。（当前文本只是示例展示，不会出现在保存的文本中。）</span></p><p data-signid="annotationSplitLine" contenteditable="false" class="paging-line">分  页  线（保存文档时线下内容另起一页）</p><p></p><p contenteditable="false" data-signId="reference" style="text-align: center;margin-bottom: 30px;"><span font-family: SimHei; style="font-weight: 700;font-size: 24px;">参考文献</span></p><p data-signid="author" contenteditable="false" class="author" style="text-align: center;padding-bottom: 30px;"><span style="font-size: 14px;font-weight: 700; color: rgba(0, 0, 0, 0.5);">（请在文中标识要注释的内容，此处将生成注释的序号而后需要作者填写注释内容）</span></p><p data-signid="r-l" class="text" contenteditable="false"><span style="font-size: 12px; font-family: FangSong;text-indent: 2em;"> [1] 孙品一.高校学报编辑工作现代化特征[C].中国高等学校自然科学学报研究会.科技编辑学论文集(2).北京：北京师范大学出版社，1998:10-22.   （当前文本只是示例展示，不会出现在保存的文本中。）</span></p><p data-signid="r-l" class="text" contenteditable="false"><span style="font-size: 12px; font-family: FangSong;text-indent: 2em;"> [2] 张和生.地质力学系统理论[D].太原：太原理工大学，1998.   （当前文本只是示例展示，不会出现在保存的文本中。）</span></p><p data-signid="referenceSplitLine" contenteditable="false" class="paging-line">分  页  线（保存文档时线下内容另起一页）</p><p></p><p data-signid="ack" style="text-align: center"><strong><span style="font-size: 16px; color: rgb(0, 0, 0)">致谢</span></strong></p><p><span style="font-size: 14px; font-family: KaiTi; color: rgb(0, 0, 0)">致谢内容...</span></p><p data-signid="paragraph" style="margin: 30px 0px 0px; text-align: right"><strong><span style="font-size: 14px; color: rgb(0, 0, 0)">请在此处输入落款</span></strong></p><p style="text-align: right"><strong><span style="font-size: 14px; color: rgb(0, 0, 0)">请在此处输入日期</span></strong></p>`
         }
-      ]
+      ],
+      imgSizeVal: '',
+      imgSizeLock: true,
+      alignmentModeLeft: alignmentModeLeft,
+      alignmentModeCenter: alignmentModeCenter,
+      alignmentModeRight: alignmentModeRight,
     }
   },
   props: {
@@ -1061,6 +1102,7 @@ export default {
         titleId, // 标题id
         lineHeightId,//行高
         dataUrl,
+        CustomImage,// 自定义图片大小
         Superscript.configure({
           HTMLAttributes: {
             class: 'annotation',
@@ -1108,6 +1150,19 @@ export default {
             }
           },
         }),
+        BubbleMenu.configure({
+          pluginKey: 'bubbleMenuImg',
+          element: document.querySelector('.bubble-menu-img'),
+          tippyOptions: { duration: 100 },
+          shouldShow: ({editor, view, state, oldState, from, to}) => {
+              if(editor.isActive('image')) {
+                  this.imgSizeVal = parseInt(this.editor.getAttributes('image').width)
+              } else {
+                  this.imgSizeVal = ''
+              }
+              return editor.isActive('image')
+          },
+        }),
         Link.configure({
           openOnClick: false,
           HTMLAttributes: {
@@ -1274,6 +1329,26 @@ export default {
   },
   emits: ['confirm', 'enclosure', 'enlDownload', 'enlSee'],
   methods: {
+    changeAlign(tag) {
+        // 图片对齐方式
+        this.editor.chain().setTextAlign(tag).run()
+    },
+    changePercent(e) {
+        // 改变图片百分比
+        if(parseInt(e.target.value) > 100) {
+            this.imgSizeVal = 100
+            this.editor.chain().setImageWidth('100%').focus().run()
+        } else if(parseInt(e.target.value) < 10) {
+        } else {
+            if(this.imgSizeLock) {
+                this.imgSizeLock = false
+                setTimeout(() => {
+                    this.editor.chain().setImageWidth(e.target.value + '%').focus().run()
+                    this.imgSizeLock = true
+                }, 500)
+            }
+        }
+    },
     selectMargin(selectItem) {
       this.pageMarginSvg.forEach(item => {
         item.isSelect = item.title === selectItem.title;
@@ -4680,4 +4755,67 @@ li {
   border:1px solid #000;
   border-radius: 50%;
 }
+.bubble-menu-img {
+  position: relative;
+  padding: 15px;
+  background-color: #fff;
+  border-radius: 5px;
+  box-shadow: 0 1px 6px #d2d2d2;
+}
+.line {
+  display: flex;
+  align-items: center;
+  padding-bottom: 10px;
+}
+.line:last-child {
+  padding-bottom: 0
+}
+.percent {
+  position: relative;
+}
+.percent input{
+  border-radius: 4px;
+  width: 68px;
+}
+.percent input::-webkit-outer-spin-button,
+.percent input::-webkit-inner-spin-button {
+  -webkit-appearance: none !important;
+}
+.percent input[type='number']{
+  -moz-appearance: textfield;
+  box-shadow: none;
+  border: 1px solid #8c939d;
+  padding: 5px 15px 5px 5px;
+}
+.symbol {
+  position: absolute;
+  right: 5px;
+  top: 5px
+}
+
+.alignmentMode {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.segmentation {
+  height: 13px;
+  width: 1px;
+  margin: 0 5px;
+  background-color: #565656;
+}
+.imgBgc {
+  border-radius: 3px;
+  width: 20px;
+  height: 20px;
+  background-color: #CCCCCC;
+}
+.imgBgcAction {
+  background-color: #2A82E4;
+}
+.imgBgc > img {
+  padding: 1px;
+  width: 100%;
+  height: 100%;
+}
 </style>

package/src/components/editor/src/extend/insertHorizontalLine.js

@@ -33,12 +33,12 @@ export const borderBottom = Extension.create({
 
     addCommands() {
         return {
-            setMargin: borderBottom => ({ chain }) => {
+            setBorder: borderBottom => ({ chain }) => {
                 return chain()
                     .setNode('paragraph', { borderBottom })
                     .run()
             },
-            unsetMargin: () => ({ chain }) => {
+            unsetBorder: () => ({ chain }) => {
                 return chain()
                     .setNode('paragraph', { borderBottom: null })
                     .run()

package/src/components/editor/src/image-size.js

@@ -0,0 +1,23 @@
+import Image from '@tiptap/extension-image'
+
+export const CustomImage = Image.extend({
+    addCommands() {
+        return {
+            setImageWidth: width => ({commands}) => {
+                return commands.updateAttributes('image', {width: width})
+            },
+        }
+    },
+    addAttributes() {
+        return {
+            width: {
+                default: '',
+                renderHTML: attributes => {
+                    return {
+                        style: `width: ${attributes.width}`,
+                    }
+                }
+            }
+        }
+    }
+})

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

@@ -409,14 +409,15 @@ export default {
     })
   },
   methods: {
-      // 下面三个方法是改变图片大小的方法
     changeAlign(tag) {
+        // 图片对齐方式
         this.editor.chain().setTextAlign(tag).run()
     },
     changePercent(e) {
+        // 改变图片百分比
         if(parseInt(e.target.value) > 100) {
             this.imgSizeVal = 100
-            this.editor.chain().setImageWidth('100%').run()
+            this.editor.chain().setImageWidth('100%').focus().run()
         } else if(parseInt(e.target.value) < 10) {
         } else {
             if(this.lock) {
@@ -429,6 +430,7 @@ export default {
         }
     },
     shouldShowFn({ editor, view, state, oldState, from, to }) {
+        // BubbleMenu是否显示
         this.$nextTick(() => {
             this.showBubble =  editor.isActive('image')
             if(editor.isActive('image')) {
@@ -907,6 +909,7 @@ export default {
 
 :deep(.imgCont) {
   line-height: 0 !important;
+  text-indent: 0 !important;
 }
 
 :deep(.ProseMirror-separator) {
@@ -954,7 +957,7 @@ export default {
 }
 
 :deep(.editor-img) {
-  max-width: calc(100% - 4em);
+  max-width: 100%;
   padding: 2px 0;
 }
 

package/src/components/flip/src/flip.vue

@@ -2,22 +2,22 @@
   <div class="docView">
     <div class="full-screen">
       <div class="full-screen-img" @click.stop="fullScreen">
-        <div class="full-screen-title" style="" v-if="showText">全屏查看</div>
-        <img @mouseover="showText=true" @mouseout="showText=false" src="../img/full-screen.png" alt="">
+        <!--        <div class="full-screen-title" style="" v-if="showText">全屏查看</div>-->
+        <img @mouseover="showText=true" @mouseout="showText=false" src="../img/full-screen.png" alt="" title="全屏查看">
       </div>
-      <div class="full-screen-img" v-if="doublePage" @click.stop="doublePage=!doublePage">
-        <div class="full-screen-title" style="" v-if="showMultiText">多页查看</div>
-        <img @mouseover="showMultiText=true" @mouseout="showMultiText=false" src="../img/multi-page.png" alt="">
+      <div class="full-screen-img" v-if="doublePage" @click.stop="changeView">
+        <!--        <div class="full-screen-title" style="" v-if="showMultiText">多页查看</div>-->
+        <img @mouseover="showMultiText=true" @mouseout="showMultiText=false" src="../img/multi-page.png" alt="" title="多页查看">
       </div>
-      <div class="full-screen-img" v-else @click.stop="doublePage=!doublePage">
-        <div class="full-screen-title" style="" v-if="showSingleText">单页查看</div>
-        <img @mouseover="showSingleText=true" @mouseout="showSingleText=false" src="../img/single-page.png" alt="">
+      <div class="full-screen-img" v-else @click.stop="changeView">
+<!--        <div class="full-screen-title" style="" v-if="showSingleText">单页查看</div>-->
+        <img @mouseover="showSingleText=true" @mouseout="showSingleText=false" src="../img/single-page.png" alt="" title="单页查看">
       </div>
     </div>
     <div>
       <div class="book">
         <div class="pages">
-          <div class="wrap-box" v-if="doublePage">
+          <div class="wrap-box" ref="wrap-box"  v-if="doublePage">
             <div class="wrap wrap-block" :ref="`wrap-${item.id}`" v-for="(item,index) in pageInfoArr" :key="index">
               <div class="wrap-can" v-show="!loading" ref="wrapCan">
                 <canvas @click.stop="turnText" class="wrap-can-one" @mousedown.stop="mouseDown"
@@ -123,7 +123,7 @@ export default {
       flipRights: false,
       flipLefts: false,
       oneIndex: 'right',
-      scales: 1.3,
+      scales: 1.35,
       timer: null,
       resultImg: '',
       startX: 0,
@@ -164,6 +164,7 @@ export default {
       showText:false,
       showMultiText:false,
       showSingleText:false,
+      boxWidth:''
     }
   },
   props: {
@@ -185,7 +186,7 @@ export default {
     },
     scale: {
       type: Number,
-      default: 1.3
+      default: 1.35
     },
     scaleStyle: {
       type: Object,
@@ -261,15 +262,13 @@ export default {
       deep: true,
       immediate: true
     },
-    // pageInfoArr:{
-    //   handler: function (val){
-    //     if(val.length===this.pdfPages){
-    //       this.sourceUrl()
-    //     }
-    //   },
-    //   deep: true,
-    //   immediate: true
-    // }
+    scale:{
+      handler: function (val){
+        this.scales = val
+      },
+      deep: true,
+      immediate: true
+    }
   },
   emits: ['flip'],
   mounted() {
@@ -287,6 +286,12 @@ export default {
     window.removeEventListener('keydown', this.handleKeyEvent)
   },
   methods: {
+    changeView(){
+      this.$emit('changeViewDoublePage',!this.doublePage)
+      setTimeout(()=>{
+        this.doublePage = !this.doublePage
+      },500)
+    },
     fullScreen(){
       window.open(this.source)
     },
@@ -1145,6 +1150,7 @@ export default {
         let ctx2 = canvas2.getContext('2d');
         let viewport = page.getViewport({scale: that.scales})
         const sc = viewport.width / viewport.height
+        that.boxWidth = that.$refs.wrap.offsetWidth
         const wid = that.$refs.wrap.offsetWidth - 10
         const hei = wid / sc
         canvas.width = wid * that.sratio
@@ -1195,7 +1201,9 @@ export default {
           let canvas2 = document.getElementById(`${item.id}2`)
           item.ctx = canvas.getContext('2d');
           item.ctx2 = canvas2.getContext('2d');
-          let viewport = page.getViewport({scale: that.scales/2.06})
+          let wrapBoxWidth = that.$refs['wrap-box'].offsetWidth
+          let newScale=(wrapBoxWidth/that.boxWidth)*that.scales
+          let viewport = page.getViewport({scale: newScale/2})
           const sc = viewport.width / viewport.height
           const wid = that.$refs[`wrap-${item.id}`][0].offsetWidth-15
           const hei = wid / sc
@@ -1304,7 +1312,7 @@ export default {
   display: inline-block;
   margin: 0 auto;
   position: relative;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
 //cursor: none;
 }
 
@@ -1467,7 +1475,7 @@ div{
 .full-screen{
   position: absolute;
   top: 20px;
-  right: -60px;
+  right: -20px;
   z-index: 100;
 }
 
@@ -1497,6 +1505,6 @@ div{
 .full-screen-img>img{
   width: 20px;
   height: 20px;
-  margin-left: 5px;
+//margin-left: 5px;
 }
 </style>

package/src/components/treeList/src/treeList.vue

@@ -5,11 +5,12 @@
                  :style="{'border-bottom': (link)? '1px solid #ccc': '0', 'color': (active === index)? activeColor : '#333'}"
                  @click="listTap(item,index)" v-for="(item,index) in list" :key="index">
                 <div class="list-title">
-                    <span :style="{'font-size': column[0].fontSize + 'px', 'font-weight': column[0].fontWeight}">{{
+                    <!-- <span :style="{'font-size': column[0].fontSize + 'px', 'font-weight': column[0].fontWeight}">{{
                         index + 1
                         }}. {{ (angleBrackets) ? '《' : '' }} {{ item[column[0].label] }} {{
                         (angleBrackets) ? '》' : ''
-                        }}</span>
+                        }}</span> -->
+                    <span :style="{'font-size': column[0].fontSize + 'px', 'font-weight': column[0].fontWeight}" v-html="(index + 1) + '.' + (angleBrackets ? '《' : '') + item[column[0].label] + (angleBrackets ? '》' : '')"></span>
                     <button v-if="delShow" @click="del(item)">{{ delText }}</button>
                 </div>
                 <div class="list-cont" v-if="open">

package/src/index.js

@@ -83,7 +83,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.33.387',
+    version: '1.33.389',
     install,
     Calendar,
     Message,