@focus-teach/ui 1.0.37 → 1.0.39

package/package.json

@@ -2,7 +2,7 @@
   "name": "@focus-teach/ui",
   "packageName": "ui",
   "publishName": "@focus-teach/ui",
-  "version": "1.0.37",
+  "version": "1.0.39",
   "private": false,
   "main": "lib/ui.umd.min.js",
   "scripts": {
@@ -26,6 +26,7 @@
     "sass": "^1.26.5",
     "sass-loader": "^10.1.1",
     "underscore": "^1.13.1",
+    "v-viewer": "^1.7.4",
     "vue": "^2.6.10",
     "vue-infinite-scroll": "^2.0.2",
     "vue-loader": "^15.9.6",

package/utils/common.js

@@ -1,3 +1,13 @@
+const TABLE_PC = 647; // PC所占宽度
+const TABLE_MISP = 959; // 错打所占宽度
+const TABLE_MINIP = 320; // 小程序所占宽度
+const TABLE_DRAWER = 470; // 抽屉所占宽度
+const TABLE_CLASS = 509; // 上课所占宽度
+const TABLE_MISD = 457; // 错打下载所占宽度
+const TABLE_MINI110 = 408; // 小程序110mm所占宽度
+const MAX_HEIGHT = 1024 //一页a4的高度
+
+
 function getFileTypeSuffix(fileName) {
     var index = fileName.lastIndexOf(".");
     if (index > -1) {
@@ -167,4 +177,284 @@ export function getKlLeafNode(tree){
     }
     deep(tree);
     return result;
+}
+
+function ptToPx(pt) {
+    var dpi = window.devicePixelRatio * 96;
+    return pt * dpi / 72;
+}
+
+function getStringWidthNoImage(text, type, fontSize = '14px',fontFamily='Times New Roman, SimSun, 宋体 ,Segoe UI Symbol') {
+    var span = document.createElement("span");
+    var result = {};
+    result.width = span.offsetWidth;
+    result.height = span.offsetHeight;
+    span.style.visibility = "hidden";
+    span.style.fontSize = fontSize;
+    span.style.fontFamily = fontFamily
+    span.style.display = "inline-block";
+    span.style.whiteSpace = 'break-spaces'
+    document.body.appendChild(span);
+    if(type == 'text'){
+        if (typeof span.textContent != "undefined") {
+            span.textContent = text;
+          } else {
+            span.innerText = text;
+          }
+    }else{
+        span.innerHTML = text
+    }
+ 
+    result.width = parseFloat(window.getComputedStyle(span).width) - result.width;
+    result.height = parseFloat(window.getComputedStyle(span).height) - result.height;
+    document.body.removeChild(span);
+    return result.width;
+}
+
+function getImageWidth(child, maxWidth, maxHeight) {
+    let rect = child.getBoundingClientRect()
+    let width = rect.width,height = rect.height;
+    if(!child.getAttribute('width') || !child.getAttribute('height')){
+        child.setAttribute('width',width)
+        child.setAttribute('height',height < maxHeight ? height : maxHeight)
+        let computedWidth = width > maxWidth ? maxWidth : width
+        let computedHeight = (computedWidth * child.naturalHeight / child.naturalWidth)
+        if(width >= maxWidth) {
+            height = computedWidth
+            child.style.width = computedWidth + 'px'//超过高度之后 按原图片等比例缩放的高度设置
+        }
+        if(height >= maxHeight) {
+            height = computedHeight
+            child.style.height = computedHeight + 'px'//超过高度之后 按原图片等比例缩放的高度设置
+        }
+    }else{
+        width = rect.width;
+        height = rect.height;
+    }
+    return {width,height}
+}
+function loadImage({child,maxHeight,maxWidth}){//等待图片加载完成
+    return new Promise(async (resolve)=>{
+        try{
+            const promiseArr = [];
+            let imgLoadCount = 0;
+            if(child.nodeName === 'IMG'){
+                promiseArr.push(new Promise(resolve=>{
+                    let timer = setInterval(function() {
+                        if(child.complete) {
+                            clearInterval(timer)
+                            let { width,height } = getImageWidth(child,maxWidth,maxHeight)
+                            resolve({width,height})
+                        }
+                        if(child.onerror){
+                            imgLoadCount++
+                            if(imgLoadCount > 60){
+                                clearInterval(timer)
+                                imgLoadCount = 0
+                                let { width,height } = getImageWidth(child,maxWidth,maxHeight)
+                                resolve({width,height})
+                            }
+                        }
+                    }, 50)
+                }))
+            }
+          if(!promiseArr.length){
+            resolve('other')
+          }else{
+            try{
+              let res = await Promise.all(promiseArr)
+              console.log('res is...',res)
+              resolve({width:res?.[0]?.width,height:res?.[0]?.height})
+            }catch(err){
+              setTimeout(()=>{
+                resolve('loadError')
+              },2000)
+            }
+          }
+        }catch(error){
+          setTimeout(()=>{
+            resolve('loadError')
+          },2000)
+        }
+      })
+}
+
+// 计算当前选项的列数
+async function getCols(optionArr,TABLE_WIDTH,className){
+    let optionCount = optionArr.length, factors = [], cols = 1;
+    
+    // 计算选项公约数
+    factors = [...Array(optionCount).keys()].map(item=>item+1).filter(item=> optionCount % item === 0).reverse();
+    let widthList = [];
+    // let widthList = optionArr.map(async item=>{
+    for(let i = 0; i < optionArr.length; i++){
+        let item = optionArr[i]
+        if(item.includes('img')){
+            let div = document.createElement('div')
+            div.id = 'preRenderImgContainer'
+            div.style.visibility = 'hidden'
+            div.innerHTML = item
+            document.body.appendChild(div)
+            let width = 0
+            // Array.from(div.childNodes).forEach((childNode)=>{
+            for(let j = 0; j < div.childNodes.length; j++){
+                let childNode = div.childNodes[j]
+                if(childNode.nodeName == 'IMG'){
+                    let tempWidth = childNode?.style?.width || childNode.width
+                    console.log(tempWidth,className,'图片宽度');
+                    let realWidth = String(tempWidth || '').includes('pt') ? ptToPx(parseFloat(tempWidth)) : parseFloat(tempWidth)
+                    // 若图片不存在宽度，则随便给一个值，超过编辑器宽度即可，这里给了1000
+                    if(!realWidth) {
+                        let { width,height } = await loadImage({child:childNode,maxHeight:MAX_HEIGHT,maxWidth:TABLE_WIDTH})
+                        realWidth = width
+                    }
+                    width += realWidth || MAX_HEIGHT
+                }else{
+                    if(childNode.nodeName == '#text'){
+                        width += getStringWidthNoImage(childNode.textContent,'text',className == 'options-mistake-print' ? '16px' : '14px',className == 'options-mistake-print' ? 'Avenir, Helvetica, Arial, sans-serif' : undefined)
+                        console.log(width,'文本节点宽度');
+                    }else{
+                        width += getStringWidthNoImage(childNode.outerHTML,'',className == 'options-mistake-print' ? '16px' : '14px',className == 'options-mistake-print' ? 'Avenir, Helvetica, Arial, sans-serif' : undefined)
+                        console.log(width,'其他标签宽度');
+                    }
+                }
+            }
+            div?.remove?.()
+            console.log("带图片识别出来的宽",className,width);
+            // return width
+            widthList.push(width)
+        }else{
+            let eleWidth = getStringWidthNoImage(item.trim(),'',className == 'options-mistake-print' ? '16px' : '14px',className == 'options-mistake-print' ? 'Avenir, Helvetica, Arial, sans-serif' : undefined)
+            widthList.push(eleWidth)
+        }
+    }
+    //当前选项的长度列表
+    let maxWidth = Math.max(...widthList); // 当前选项的最大长度
+
+    let find = factors.find(item=> maxWidth <= TABLE_WIDTH / item)
+    find && (cols = find);
+    console.log('计算出来的表格列数=====>',cols,maxWidth);
+    return cols
+}
+
+
+async function getOptionArr(optionArr,TABLE_WIDTH,className){
+    let cols = await getCols(optionArr,TABLE_WIDTH,className);
+    let rows = Math.ceil(optionArr.length / cols);
+    optionArr = Array.from({ length: rows }, (_, i) => optionArr.slice(i * cols, i * cols + cols));
+    return optionArr
+}
+
+export async function generateTable(optionArr,option) {
+
+    let table = '<table border="0" class="ckeditor-table cke_show_border option-table" style="border-collapse: collapse; width: 100%;;border:none"><tbody>';
+    // 后续有新增类型只需要添加宽度和对应的类名即可
+    // !!!!!!!!!!!!!!!!
+    // !!!!!!!!!!!!!!!!
+    // !!!!!!!!!!!!!!!! 新增类型需要去ckeditor.js源码中在表格转换功能处过滤新增的类型
+    // !!!!!!!!!!!!!!!!
+    // !!!!!!!!!!!!!!!!
+    let tableList = [
+        // PC
+        {
+            className: 'options-origin',
+            width: TABLE_PC
+        },
+        // 错打
+        {
+            className: 'options-mistake-print',
+            width: TABLE_MISP
+        },
+        // 小程序
+        {
+            className: 'options-miniprogram',
+            width: TABLE_MINIP
+        },
+        // 抽屉
+        {
+            className: 'options-drawer',
+            width: TABLE_DRAWER
+        },
+        // 上课
+        {
+            className: 'options-class',
+            width: TABLE_CLASS
+        },
+        // 错打下载
+        {
+            className: 'options-mistake-download',
+            width: TABLE_MISD
+        },
+        // 小程序110mm
+        {
+            className: 'options-mini110',
+            width: TABLE_MINI110
+        },
+    ]
+    // [[A,B],[C,D]]
+    for(let i = 0; i < tableList.length; i++){
+        let item = tableList[i]
+        let optionsTemp = await getOptionArr(optionArr,item.width,item.className);
+        optionsTemp.forEach((optionCols)=>{
+            table += `<tr class="options-tr ${item.className}">`
+            optionCols.forEach((item)=>{
+                table += '<td>'+item+'</td>'
+            })
+           table += '</tr>'
+        })
+    
+    }
+    table += '</tbody></table>'
+    return table
+}
+
+// 把选项转换成表格展示
+function optionToTable(stem) {
+    let content = [] // 存储题干内容
+    let option = '' // 存储选项内容
+    let optionPosition = -1 // 选项在题干中的位置
+    let div = document.createElement('div');
+    div.innerHTML = stem;
+    if(div?.childNodes.length){
+        div.childNodes.forEach((item,index)=>{
+            if(item?.innerHTML.match(/^((\n|\s|&nbsp;)*([A-H]\s*)+[.|、|．])/g) || item?.innerHTML.match(/\n?(\s|&nbsp;)+([A-H])[.|、|．]\s*/g)){
+                // 有选项的节点，从中取出选项
+                let matchs = item?.innerHTML.match(/^((\n|\s|&nbsp;)*([A-H]\s*)+[.|、|．])/g) || item?.innerHTML.match(/\n?(\s|&nbsp;)+([A-H])[.|、|．]\s*/g);
+                let optionIndex = item.innerHTML.indexOf(matchs[0])
+
+                if(optionIndex > 0){
+                    // 表示选项前面有其他内容
+                    content.push(`<p>${item.innerHTML.slice(0,optionIndex)}</p>`)
+                    option += item?.innerHTML.slice(optionIndex)
+                    optionPosition < 0 && (optionPosition = index + 1)
+                }else{
+                    option += item?.innerHTML
+                     // 只记录第一个选项的位置
+                    optionPosition < 0 && (optionPosition = index)
+                }
+            }else{
+                // content += item?.outerHTML
+                content.push(item?.outerHTML)
+            }
+        })
+    }
+    console.log(option,'option======');
+    if(!option) return stem
+    const reg = /([A-H])[.|、|．]\s*(.+?)(?=[A-H][.|、|．]|\s*$)/g;
+    let optionArr = option.match(reg);
+    if(!optionArr || !optionArr.length) return stem // 没有匹配到选项，直接返回
+    // optionArr 肯定是以选项A-H开头的,如果超过一个A开头的选项，说明不符合单选题的规则，直接返回
+    // 若匹配到的选项不以A开头，则直接返回
+    if(optionArr?.filter(item=>item.startsWith('A'))?.length > 1 || optionArr?.filter(item=>item.startsWith('A'))?.length == 0 ||optionArr?.length > 4) return stem
+    optionArr = optionArr.map(item=> item.trim())
+    let table = generateTable(optionArr,option);
+    
+    content.splice(optionPosition,0,table)
+    return content.join('')
+}
+
+export function getUpdateTime(timeStr) {
+    var oneTime = new Date(timeStr).getTime();
+    var date = new Date(oneTime);
+    return formatDate(date, "yyyy-MM-dd hh:mm");
 }