diff --git a/src/tis_app_template_kt/bus.min.js b/src/tis_app_template_kt/bus.min.js deleted file mode 100644 index 5de2404..0000000 --- a/src/tis_app_template_kt/bus.min.js +++ /dev/null @@ -1 +0,0 @@ -!function(t,e,o){"use strict";function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var r=n(e),s=n(o);const a=document.querySelector("body");async function i(t){if(t.length)for(const e of t)a.appendChild(e),await function(n){return new Promise((e,o)=>{n.onload=n.onreadystatechange=function(){var t=n.readyState;void 0!==t&&!/^(loaded|complete)$/.test(t)||(e(),n.onload=n.onerror=n.onreadystatechange=null)},n.onerror=function(){var t=n.readyState;void 0!==t&&!/^(loaded|complete)$/.test(t)||(console.log("load js resources failed"),o({error:"load js resources failed"}),n.onload=n.onerror=n.onreadystatechange=null)}})}(e).catch(()=>{a.removeChild(e)})}function c(t){const e=document.createElement("link");return e.setAttribute("rel","stylesheet"),e.setAttribute("href",t),e}function l(t){const e=document.createElement("script");return e.setAttribute("type","text/javascript"),/require.min.js/.test(t)?(e.setAttribute("src","/TIS_DLTS_WEB/esapp-map/Build/Js/require.min.js"),e.setAttribute("data-main","/TIS_DLTS_WEB/esapp-map/Build/Js/main.js")):e.setAttribute("src",t.src||t),e}const p=new Set,u="development"===process.env.NODE_ENV?process.env.BASE_URL:"";let m="";async function d(t,e){var o;if(m=/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)/.test(e)?e:"",void 0===t||null==t)return Promise.resolve("[所加载资源为null]");o=t,await async function(){if(void 0!==o&&null!=o){const{cssFiles:t,jsFiles:e}=o;t?await i([...t.filter(y).map(h).map(c),...e.filter(y).map(h).map(l)]):await i([...e.filter(y).map(h).map(l)])}}()}function h(t){return(m||u)+t}function y(t){var e=p.has(t);return p.add(t),!e}let f="";const g=new r.default({data:{components:[],asserts:{},deviceType:"pc",actives:[],layouts:[],widgets:[]},methods:{setVueInstance(t){},getDeviceType(){return this.deviceType},getTemplateLayouts(){return this.layouts},menuStatusUpdate(){var t=this.getTemplateLayouts().filter(t=>!t.lazy).map(t=>t.component.name||t.component);console.log("============>",""),this.$emit("TIS_TEMPLATE_MENU_ACTIVE",{appId:"",onActives:t,system:!0})},async loadComponent(s){const a=this.components.find(t=>t.component===s)||{};console.log("所有组件...",this.components),console.log("所有资源...",this.asserts),console.log("当前加载组件...",s),console.log("匹配到的组件...",a);let i=null,t=[],c=!1;try{var e=a.segprefix;i=this.asserts[e],t=a.dependencies||[],c=a.lib}catch(t){console.error(t)}for(const o of t)await d(this.asserts[o]||null,f);return new Promise((o,n)=>{console.log("开始加载组件资源",i,f),d(i,f).then(()=>{if(c)o(a);else{let t=(new Date).getTime();const e=setInterval(()=>{r.default.component(`${s}`)?(o(a),clearInterval(e)):2e3<(new Date).getTime()-t&&(i?n(`[loading error:${s}]:loading component timed out`):n(`[loading error:${s}]:组件资源加载失败`),clearInterval(e))},300)}}).catch(t=>{i?n(`[loading error:${s}]:${t}`):n(`[loading error:${s}]:组件资源加载失败`)})})},openComponentByMenu(o){this.components.filter(t=>{var e=t.component.name||t.component,e=o.includes(e);if(e)return t.lazy=!e,t}).forEach(e=>{this.layouts.some(t=>(t.component.name||t.component)===e.component)?this.layouts.forEach(t=>{(t.component.name||t.component)===e.component&&(t.lazy=!1)}):this.layouts.push(e),this.actives.some(t=>t.component===e.component)||("dialog"===e.type?this.actives=[e]:this.actives.push(e))}),console.log("layouts变化状态",this.layouts),console.log("actives变化状态",this.actives),this.menuStatusUpdate()},closeComponent(o){this.layouts.forEach(t=>{var e=t.component.name||t.component,e=o.includes(e);e&&(t.lazy=e)}),console.log("待删除组件",o),o.forEach(e=>{var t=this.actives.findIndex(t=>t.component===e);console.log("aaaaaa",t),0<=t&&this.actives.splice(t,1)}),console.log("layouts变化状态",this.layouts),console.log("actives变化状态",this.actives),this.menuStatusUpdate()},initLayouts(t=[]){this.layouts.push(...t.filter(t=>!t.lazy))},getWidgetsByType(e){return this.layouts.filter(t=>(t.type===e||t.position===e)&&!t.lazy).map(t=>"string"==typeof t.component?(console.log("下载component资源",t.component),this.loadComponent(t.component)):t)},getActivesByType(e){return this.actives.filter(t=>t.type===e)},async initData(t){var e="development"===process.env.NODE_ENV;f=t.tis?t.tis.entry:baseUrl;var o=await s.default.get(`${f}/esplug.json`).catch(t=>console.error(t)),n=await s.default.get(`${f}/tisplatform.json`).catch(t=>console.error(t));try{t.tis&&!e?(console.log("框架传入的components:",t.tis.components),this.components=t.tis.components?[...t.tis.components,...o.data.components]:o.data.components,this.asserts=0!==Object.keys(t.tis.asserts).length?t.tis.asserts:n.data,this.widgets=t.tis.widgets||o.data.widgets):(this.components=o.data.components,this.asserts=n.data,this.widgets=o.data.widgets),this.components=this.components.map(t=>(Object.prototype.hasOwnProperty.call(t,"lazy")||"background"===t.type||(t.lazy=!0),t))}catch(t){console.error(t)}}}});t.default=g,t.onMount=async function(t){await g.initData(t),g.initLayouts(g.components),g.initLayouts(g.widgets)},t.onSetup=function(t={}){g.layouts=t.layout},Object.defineProperty(t,"__esModule",{value:!0})}({},Vue,axios); diff --git a/src/tis_app_template_kt/package.json b/src/tis_app_template_kt/package.json index 3206752..94f2a24 100644 --- a/src/tis_app_template_kt/package.json +++ b/src/tis_app_template_kt/package.json @@ -27,6 +27,7 @@ "lint-staged": "^9.5.0", "postcss-px-to-viewport": "git+https://git.inscloudtech.com/mirrors/postcss-px-to-viewport.git", "prettier": "^1.19.1", + "rollup-plugin-replace": "^2.2.0", "rollup-plugin-uglify": "^6.0.4", "sass": "^1.26.5", "sass-loader": "^8.0.2", diff --git a/src/tis_app_template_kt/public/index.html b/src/tis_app_template_kt/public/index.html index 26d264b..cb0bb4e 100644 --- a/src/tis_app_template_kt/public/index.html +++ b/src/tis_app_template_kt/public/index.html @@ -28,6 +28,7 @@ + diff --git a/src/tis_app_template_kt/public/lib/bus.min.js b/src/tis_app_template_kt/public/lib/bus.min.js new file mode 100644 index 0000000..4a1165d --- /dev/null +++ b/src/tis_app_template_kt/public/lib/bus.min.js @@ -0,0 +1,363 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) : + typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) : + (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TISBUS = {}, global.Vue)); +})(this, (function (exports, Vue) { 'use strict'; + + function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } + + var Vue__default = /*#__PURE__*/_interopDefaultLegacy(Vue); + + const jsAttachPoint = document.querySelector('body'); + + //const cssAttachPoint = document.querySelector('head') + + async function loadResources(resources) { + if (!resources.length) return + for (const resource of resources) { + // + jsAttachPoint.appendChild(resource); + await onLoad(resource).catch(() => { + + // resourcesLoaded.forEach(item => { + // if (resource.src.indexOf(item) > 0) { + // let res = item.replace(new RegExp("/\static\/","gm"),``); + // console.error(`${res}资源加载失败，请检查该软件段是否正确安装!`); + // resourcesLoaded.delete(item); + // } + // }); + // console.log(resourcesLoaded.entries()); + jsAttachPoint.removeChild(resource); + }); + } + } + + + function createStylesheet(href) { + const link = document.createElement('link'); + link.setAttribute('rel', 'stylesheet'); + link.setAttribute('href', href); + return link + } + + function createScript(src) { + // const script = document.createElement('script') + // script.setAttribute('type', 'text/javascript') + // script.setAttribute('src', src.src? src.src :src); + // if (/require.min.js/.test(src)) script.setAttribute("data-main", '/TIS_DLTS_WEB/esapp-map/Build/Js/main.js'); + + const script = document.createElement('script'); + script.setAttribute('type', 'text/javascript'); + // if (src && src === "/TIS_DLTS_WEB/esapp-map/Build/Js/require.min.js") script.setAttribute("data-main", '/TIS_DLTS_WEB/esapp-map/Build/Js/main.js'); + if (/require.min.js/.test(src)) { + script.setAttribute('src', "/TIS_DLTS_WEB/esapp-map/Build/Js/require.min.js"); + script.setAttribute("data-main", '/TIS_DLTS_WEB/esapp-map/Build/Js/main.js'); + } else { + script.setAttribute('src', src.src ? src.src : src); + } + return script + } + + function onLoad(el) { + return new Promise((resolve, reject) => { + el.onload = el.onreadystatechange = function () { + let readyState = el.readyState; + if (typeof readyState === 'undefined' || /^(loaded|complete)$/.test(readyState)) { + resolve(); + // 卸载事件和断开dom引用，避免内存泄漏 + el.onload = el.onerror = el.onreadystatechange = null; + } + }; + el.onerror = function () { + let readyState = el.readyState; + if (typeof readyState === 'undefined' || /^(loaded|complete)$/.test(readyState)) { + console.log('load js resources failed'); + reject({error: 'load js resources failed'}); + // 卸载事件和断开dom引用，避免内存泄漏 + el.onload = el.onerror = el.onreadystatechange = null; + } + }; + }) + } + + const resourcesLoaded = new Set(); + const baseUrl$1 = "" ; + let currentBaseUrl = ""; + async function registerApps(appObject,curBaseUrl) { + //开发态需要根据域名加载资源，运行态不需要加publicPath + let reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)/; + currentBaseUrl = reg.test(curBaseUrl) ? curBaseUrl : ""; + // if("development" === 'development'){ + // console.log('ppppp',baseUrl) + // const response = await fetch(`${baseUrl}/tisplatform.json`,{method:'get'}); + // const scripts = await response.json() + // console.log('000000000000',Object.values(scripts)) + // Object.values(scripts).map(async script => await getAppLoader(script)()) + // }else{ + if (appObject === undefined || appObject == null) { + return Promise.resolve('[所加载资源为null]'); + } + await getAppLoader(appObject)(); + // } + + } + + function getAppLoader(info) { + return async function () { + if (info === undefined || info == null) return + const {cssFiles, jsFiles} = info; + if (cssFiles) { + await loadResources([ + ...cssFiles.filter(notLoaded).map(appendBaseUrl).map(createStylesheet), + ...jsFiles.filter(notLoaded).map(appendBaseUrl).map(createScript) + ]); + } else { + await loadResources([ + ...jsFiles.filter(notLoaded).map(appendBaseUrl).map(createScript) + ]); + + } + } + } + + function appendBaseUrl(target) { + return (currentBaseUrl ? currentBaseUrl : baseUrl$1) + target; + } + + function notLoaded(file) { + const loaded = resourcesLoaded.has(file); + resourcesLoaded.add(file); + return !loaded + } + + // temp + let curBaseUrl = ''; + const baseUrl = "" ; + // 数据机制，考虑vuex来实现 + const bus = new Vue__default["default"]({ + data: { + components: [], // components + asserts: {}, + deviceType: "pc", + actives: [],//从菜单中激活的组件, + layouts: [],//由自定义组件和第三方组件组成的布局组件集合 + widgets: [],//在应用模板内部需要加载的widgets + }, + methods: { + getDeviceType() { + return this.deviceType + }, + getTemplateLayouts(){ + return this.layouts; + }, + + // 传递当前所处组件的上下文环境 + menuStatusUpdate(){ + const onActives = this.getTemplateLayouts().filter(l => !l.lazy).map(c=>c.component.name || c.component); + const appId = ''; + console.log('============>', appId); + // TODO 这里通过event-bus来实现吧，Vue实例获取不到 + this.$emit('TIS_TEMPLATE_MENU_ACTIVE', {appId, onActives: onActives,system:true}); + }, + async loadComponent(component) { + + const comp = this.components.find(arg => arg.component === component) || {}; + console.log('所有组件...', this.components,); + console.log('所有资源...', this.asserts); + console.log('当前加载组件...', component,); + console.log('匹配到的组件...', comp); + let assets = null; + let dependencies = []; + let isLib = false; + try { + const info = comp.segprefix; + assets = this.asserts[info]; + dependencies = comp.dependencies || []; + isLib = comp.lib; + } catch (e) { + console.error(e); + } + + //等待依赖下载完毕 + for (const refer of dependencies) { + let reference = this.asserts[refer] || null; + await registerApps(reference, curBaseUrl); + } + return new Promise((resolve, reject) => { + //加载组件资源 + console.log('开始加载组件资源', assets, curBaseUrl); + registerApps(assets, curBaseUrl).then(() => { + if (!isLib) {//正常组件的加载流程,isLib为true代表纯js lib库的加载 + let startTime = new Date().getTime(); + const looper = setInterval(() => { + + if (Vue__default["default"].component(`${component}`)) { + resolve(comp); + clearInterval(looper); + } else { + let nowTime = new Date().getTime(); + if (nowTime - startTime > 2000) { + if (!assets) { + reject(`[loading error:${component}]:组件资源加载失败`); + } else { + reject(`[loading error:${component}]:loading component timed out`); + } + clearInterval(looper); + } + } + }, 300); + } else { + resolve(comp); + } + }).catch(err => { + if (!assets) { + reject(`[loading error:${component}]:组件资源加载失败`); + } else { + reject(`[loading error:${component}]:${err}`); + } + }); + + + }) + + }, + //自定义函数,支持开发者按需增加接口 + + openComponentByMenu(components) { + //长度变化才会触发computed? + this.components.filter(c => { + const component = c.component.name || c.component; + //激活组件命中此组件,更改状态 + const hit = components.includes(component); + if (hit) { + c.lazy = !hit; + return c; + } + }).forEach(c => { + if (!this.layouts.some(l => (l.component.name || l.component) === c.component)) { + this.layouts.push(c); + }else { + //改变状态 + this.layouts.forEach(l => { + if((l.component.name || l.component) === c.component ){ + l.lazy = false; + } + }); + } + + if (!this.actives.some(l => l.component === c.component)) { + //弹窗暂定为同一时间只能打开一个 + if (c.type === 'dialog') { + this.actives = [c]; + } else { + this.actives.push(c); + } + + } + }); + //有 加入 无 删除？ + + console.log('layouts变化状态', this.layouts); + console.log('actives变化状态', this.actives); + this.menuStatusUpdate(); + }, + // 关闭组件 + closeComponent(components) { + //修改layout中的状态 + this.layouts.forEach(c => { + const component = c.component.name || c.component; + //激活组件命中此组件,更改状态 + const hit = components.includes(component); + if (hit) { + c.lazy = hit; + } + }); + //active中删除该组件 + console.log('待删除组件', components); + components.forEach(c => { + const index = this.actives.findIndex(b => b.component === c); + console.log('aaaaaa', index); + if (index >= 0) { + this.actives.splice(index, 1); + } + + }); + console.log('layouts变化状态', this.layouts); + console.log('actives变化状态', this.actives); + this.menuStatusUpdate(); + }, + //initLayouts //layouts 初始化,外部组件 + initLayouts(layouts = []) { + this.layouts.push(...layouts.filter(l => !l.lazy)); + }, + + //获取组件 + getWidgetsByType(type) { + //以type 或 position 命中widget,背景板默认lazy=false + return this.layouts.filter(f => (f.type === type || f.position === type) && !f.lazy).map(f => { + //string类型，来自配置文件，需要下载资源才能使用，懒加载组件不加载但是需要加入到数组中、、 + + if (typeof f.component === "string") { + console.log('下载component资源', f.component); + return this.loadComponent(f.component); + } else { + return f + } + + }); + }, + + //获取含有当前类型的激活组件 + getActivesByType(type) { + return this.actives.filter(a => a.type === type); + }, + + // 初始化配置信息 + async initData(props) { + const dev = "development" === 'development'; + curBaseUrl = props.tis ? props.tis.entry : baseUrl; + const esData = await Vue__default["default"].prototype.$axios.get(`${curBaseUrl}/esplug.json`).catch(err => console.error(err)); + const asserts = await Vue__default["default"].prototype.$axios.get(`${curBaseUrl}/tisplatform.json`).catch(err => console.error(err)); + try { + //运行模式才取用框架返回的数据 + if (props.tis && !dev) { + console.log('框架传入的components:',props.tis.components); + this.components = props.tis.components ? [...props.tis.components,...esData.data.components] : esData.data.components; + this.asserts = Object.keys(props.tis.asserts).length !== 0 ? props.tis.asserts : asserts.data; + this.widgets = props.tis.widgets ? props.tis.widgets : esData.data.widgets; + } else { + this.components = esData.data.components; + this.asserts = asserts.data; + this.widgets = esData.data.widgets; + } + //避免不填此属性，默认懒加载 + this.components = this.components.map(c => { + if (!Object.prototype.hasOwnProperty.call(c, "lazy") && c.type !== "background") { + c.lazy = true; + } + return c; + }); + } catch (e) { + console.error(e); + } + }, + } + }); + + function onSetup(options = {}) { + bus.layouts = options.layout; + } + + async function onMount(props) { + await bus.initData(props); + bus.initLayouts(bus.components); + bus.initLayouts(bus.widgets); + } + + exports["default"] = bus; + exports.onMount = onMount; + exports.onSetup = onSetup; + + Object.defineProperty(exports, '__esModule', { value: true }); + +})); diff --git a/src/tis_app_template_kt/rollup.config.js b/src/tis_app_template_kt/rollup.config.js index 534bc22..149fc64 100644 --- a/src/tis_app_template_kt/rollup.config.js +++ b/src/tis_app_template_kt/rollup.config.js @@ -1,17 +1,23 @@ import { uglify } from 'rollup-plugin-uglify' +import replace from 'rollup-plugin-replace' export default { input: 'src/tis/bus.js', output: { - file: 'bus.min.js', - format: 'iife' + file: 'public/lib/bus.min.js', + format: 'umd', + name: 'TISBUS' }, external: [ 'vue', - 'axios' ], plugins: [ - uglify() + //uglify(), + replace({ + //'process.env.NODE_ENV': JSON.stringify('production'), + 'process.env.NODE_ENV': JSON.stringify('development'), + 'process.env.BASE_URL': JSON.stringify('') + }), /* babel({ exclude: ["node_modules/**"], @@ -25,5 +31,5 @@ export default { ] }) */ - ] + ], } diff --git a/src/tis_app_template_kt/src/components/controlMixins.js b/src/tis_app_template_kt/src/components/controlMixins.js index 4d0d0d4..023c831 100644 --- a/src/tis_app_template_kt/src/components/controlMixins.js +++ b/src/tis_app_template_kt/src/components/controlMixins.js @@ -33,7 +33,6 @@ export const controlMixins = { ///记录激活数量 return list; }, - watch: ['$tis.layouts'], default() { return []; }, diff --git a/src/tis_app_template_kt/src/pc.vue b/src/tis_app_template_kt/src/pc.vue index dbd640a..de93262 100644 --- a/src/tis_app_template_kt/src/pc.vue +++ b/src/tis_app_template_kt/src/pc.vue @@ -61,7 +61,7 @@ }; -