From ff7d7cda1081ff3e745953e5de546eddd88b7c2c Mon Sep 17 00:00:00 2001
From: yonghang <1251679661@qq.com>
Date: Wed, 10 Nov 2021 11:53:03 +0800
Subject: [PATCH] =?UTF-8?q?kt=E4=B8=8Bbus=E6=94=B9=E4=B8=BAvuex=E7=94=A8?=
 =?UTF-8?q?=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/tis_app_template_kt/src/App.vue           |   2 +-
 .../src/components/BottomView.vue             |   2 +-
 .../src/components/Dialog/DialogPc.vue        |  10 +-
 .../src/components/Dialog/Pc.vue              | 217 +++++++------
 .../src/components/EventBusExample.vue        |   2 +
 .../src/components/LeftView.vue               |   8 +-
 .../src/components/RightCardComponent.vue     |   2 +-
 .../src/components/RightView.vue              |   2 +-
 .../src/components/controlMixins.js           | 192 ++++++------
 src/tis_app_template_kt/src/main.js           | 104 ++++---
 src/tis_app_template_kt/src/pc.vue            |  16 +-
 src/tis_app_template_kt/src/tis/index.js      | 271 ++++++++--------
 .../src/tis/layouts/BackContainer.vue         |   2 +-
 .../src/tis/layouts/DialogContainer.vue       |   3 +-
 .../src/tis/store/index.js                    |  11 +-
 .../src/tis/store/modules/tisbus.js           | 294 ++++++++++++++++++
 16 files changed, 724 insertions(+), 414 deletions(-)
 create mode 100644 src/tis_app_template_kt/src/tis/store/modules/tisbus.js

diff --git a/src/tis_app_template_kt/src/App.vue b/src/tis_app_template_kt/src/App.vue
index 892a966..02ae395 100644
--- a/src/tis_app_template_kt/src/App.vue
+++ b/src/tis_app_template_kt/src/App.vue
@@ -20,7 +20,7 @@
         computed: {
             deviceType() {
                 // return "mobile"
-                return this.$tis.getDeviceType() || "pc";
+                return this.$store.getters['tisbus/getDeviceType'] || "pc";
             }
         }
     };
diff --git a/src/tis_app_template_kt/src/components/BottomView.vue b/src/tis_app_template_kt/src/components/BottomView.vue
index fc5468f..2d4ac46 100644
--- a/src/tis_app_template_kt/src/components/BottomView.vue
+++ b/src/tis_app_template_kt/src/components/BottomView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="app-cards" v-if="list.length > 0">
+    <div class="app-cards" v-if="list && list.length > 0">
         <div class="side-menu">
             <div class="inner">
                 <div
diff --git a/src/tis_app_template_kt/src/components/Dialog/DialogPc.vue b/src/tis_app_template_kt/src/components/Dialog/DialogPc.vue
index 60b3007..88d94a0 100644
--- a/src/tis_app_template_kt/src/components/Dialog/DialogPc.vue
+++ b/src/tis_app_template_kt/src/components/Dialog/DialogPc.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Pc v-for="(dialog, index) in list" :key="dialog.component" :dialog="dialog" />
+    <Pc v-for="dialog in list" :key="dialog.component" :dialog="dialog" ></Pc>
   </div>
 </template>
 
@@ -16,11 +16,12 @@ export default {
   asyncComputed: {
     list: {
       async get() {
-        const list = this.$tis.getActivesByType('PopupWidget')
+        // const list = this.$tis.getActivesByType('PopupWidget')
+        const list = this.$store.getters['tisbus/getActivesByType']('PopupWidget')
         for (let component of list) {
           if (!component.lazy) continue;
           if (typeof component.component === 'string') {
-            await this.$tis.loadComponent(component.component)
+            await this.$store.dispatch('tisbus/loadComponent', component.component)
           }
         }
 
@@ -33,7 +34,6 @@ export default {
       }
     }
   },
-  methods: {
-  }
+  methods: {}
 }
 </script>
diff --git a/src/tis_app_template_kt/src/components/Dialog/Pc.vue b/src/tis_app_template_kt/src/components/Dialog/Pc.vue
index 317a8a5..0fd2d38 100644
--- a/src/tis_app_template_kt/src/components/Dialog/Pc.vue
+++ b/src/tis_app_template_kt/src/components/Dialog/Pc.vue
@@ -28,124 +28,123 @@
 </template>
 
 <script>
-    //import VueDragResize from "../vueDragResize/vue-drag-resize.vue";
+//import VueDragResize from "../vueDragResize/vue-drag-resize.vue";
 import VueDragResize from 'vue-drag-resize'
-    //import {dialogMixins} from './dialogMixins'
+//import {dialogMixins} from './dialogMixins'
 
-    export default {
-      props: {
-        dialog: {
-          type: Object,
-          default: function () {
-            return {}
-          }
-        }
-      },
-        //mixins: [dialogMixins],
-        components: {
-            VueDragResize,
+export default {
+  name: 'Pc',
+  components: { VueDragResize },
+  props: {
+    dialog: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    }
+  },
+    //mixins: [dialogMixins],
+    computed: {
+        parentW() {
+            return window.outerWidth;
         },
-        computed: {
-            parentW() {
-                return window.outerWidth;
-            },
-            parentH() {
-                return window.outerHeight;
-            },
-            isDraggable() {
-                return this.isMax ? false : true;
-            },
-            isResizable() {
-                return this.isMax ? false : true;
-            },
-            isTitle() {
-                return true;
-            },
-            minh() {
-                return 40;
-            },
-            minw() {
-                return 280;
-            },
+        parentH() {
+            return window.outerHeight;
         },
-        data() {
-
-            return {
-                // 是否最大化
-                isMax:false,
-                isDestory:false,
-                showSizeChoice: false,
-                curWidth:600,
-                curHeight:500,
-                width: Math.round(window.innerWidth * .6),
-                height: Math.round(window.innerHeight * .6),
-                top: Math.round(window.innerHeight * .2),
-                left: Math.round(window.innerWidth * .2),
-                // eslint-disable-next-line vue/no-reserved-keys
-                _style: {}, // 缓存最大化之前的数据
-            };
+        isDraggable() {
+            return this.isMax ? false : true;
         },
-        methods: {
-            resize(newRect) {
-                this.width = newRect.width;
-                this.height = newRect.height;
-                this.top = newRect.top;
-                this.left = newRect.left;
+        isResizable() {
+            return this.isMax ? false : true;
+        },
+        isTitle() {
+            return true;
+        },
+        minh() {
+            return 40;
+        },
+        minw() {
+            return 280;
+        },
+    },
+    data() {
+
+        return {
+            // 是否最大化
+            isMax:false,
+            isDestory:false,
+            showSizeChoice: false,
+            curWidth:600,
+            curHeight:500,
+            width: Math.round(window.innerWidth * .6),
+            height: Math.round(window.innerHeight * .6),
+            top: Math.round(window.innerHeight * .2),
+            left: Math.round(window.innerWidth * .2),
+            // eslint-disable-next-line vue/no-reserved-keys
+            _style: {}, // 缓存最大化之前的数据
+        };
+    },
+    methods: {
+        resize(newRect) {
+            this.width = newRect.width;
+            this.height = newRect.height;
+            this.top = newRect.top;
+            this.left = newRect.left;
 
-                this.curWidth = newRect.width;
-                this.curHeight = newRect.height;
-            },
-            onMaxSize(){
-              this.isMax = !this.isMax
+            this.curWidth = newRect.width;
+            this.curHeight = newRect.height;
+        },
+        onMaxSize(){
+          this.isMax = !this.isMax
 
-              const $dragEl = this.$refs.dragEl.$el
-              const $contentEl = $dragEl.firstChild
-              // 最大化
-              if (this.isMax) {
-                this._style = {
-                  width: this.width,
-                  height: this.height,
-                  left: this.left,
-                  top: this.top
-                }
-                $dragEl.style.left = 0
-                $dragEl.style.top = 0
-                $contentEl.style.width = window.innerWidth + 'px'
-                $contentEl.style.height = window.innerHeight + 'px'
-              }
-              else {
-                $dragEl.style.left = this._style.left + 'px'
-                $dragEl.style.top = this._style.top + 'px'
-                $contentEl.style.width = this._style.width + 'px'
-                $contentEl.style.height = this._style.height + 'px'
-              }
-            },
-            minisize() {
-              console.log(this.dialog)
-              this.$tis.minimizeComponent(this.dialog.component)
-            },
-            onClose() {
-                this.centerDialogVisible = false;
-                this.$tis.closeComponent([this.dialog.component]);
-            },
-            toggle() {
-                this.showSizeChoice = !this.showSizeChoice;
-            },
-            onChangeSize() {
-                this.resize({
-                    width: this.width,
-                    height: this.height,
-                    top: this.top,
-                    left: this.left,
-                });
-            },
-          onShow() {
-          },
-          activeComponent() {
-            this.$tis.activeComponent(this.dialog.component)
+          const $dragEl = this.$refs.dragEl.$el
+          const $contentEl = $dragEl.firstChild
+          // 最大化
+          if (this.isMax) {
+            this._style = {
+              width: this.width,
+              height: this.height,
+              left: this.left,
+              top: this.top
+            }
+            $dragEl.style.left = 0
+            $dragEl.style.top = 0
+            $contentEl.style.width = window.innerWidth + 'px'
+            $contentEl.style.height = window.innerHeight + 'px'
           }
-        }
+          else {
+            $dragEl.style.left = this._style.left + 'px'
+            $dragEl.style.top = this._style.top + 'px'
+            $contentEl.style.width = this._style.width + 'px'
+            $contentEl.style.height = this._style.height + 'px'
+          }
+        },
+        minisize() {
+          console.log(this.dialog)
+          this.$store.commit('tisbus/minimizeComponent', this.dialog.component)
+        },
+        onClose() {
+            this.centerDialogVisible = false;
+            this.$store.commit('tisbus/closeComponent', this.dialog.component)
+        },
+        toggle() {
+            this.showSizeChoice = !this.showSizeChoice;
+        },
+        onChangeSize() {
+            this.resize({
+                width: this.width,
+                height: this.height,
+                top: this.top,
+                left: this.left,
+            });
+        },
+      onShow() {
+      },
+      activeComponent() {
+        this.$store.commit('tisbus/activeComponent', this.dialog.component)
+      }
     }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/tis_app_template_kt/src/components/EventBusExample.vue b/src/tis_app_template_kt/src/components/EventBusExample.vue
index 85ab31c..787c877 100644
--- a/src/tis_app_template_kt/src/components/EventBusExample.vue
+++ b/src/tis_app_template_kt/src/components/EventBusExample.vue
@@ -23,6 +23,8 @@ export default {
   computed: {},
   created() {
     console.log('gggg',this.$tis)
+    // TODO 暂时先注释掉
+    return
     this._off = this.$tis.$on(
       "COUNT", //  监听的事件
       { appIds: [this.$tis.appId] }, // 限定监听来源
diff --git a/src/tis_app_template_kt/src/components/LeftView.vue b/src/tis_app_template_kt/src/components/LeftView.vue
index 5134b21..fdde8cf 100644
--- a/src/tis_app_template_kt/src/components/LeftView.vue
+++ b/src/tis_app_template_kt/src/components/LeftView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="app-cards" v-if="list.length > 0">
+    <div class="app-cards" v-if="list && list.length > 0">
         <div class="side-menu">
             <div class="top-bar">
                 <transition name="slide-fade">
@@ -56,11 +56,11 @@
             actives(){
                 //先采用setTimeout 不太合理
                 setTimeout(()=>{
-                    const count = this.$tis.getActivesByType(this.type).length;
+                    const count = this.$store.getters['tisbus/getActivesByType'](this.type).length
                     if (this.activeCache > -1 && this.activeCache < count) {
                         //打开指定的组件。。
                         let index = -1;
-                        this.$tis.getActivesByType("left").forEach(a => {
+                        this.$store.getters['tisbus/getActivesByType']('left').forEach(a => {
                             index = this.list.findIndex(item => {
                                 return (item.component.name || item.component) === (a.component.name || a.component)
                             });
@@ -71,7 +71,7 @@
                         });
 
                     }
-                    this.activeCache = this.$tis.getActivesByType(this.type).length;
+                    this.activeCache = this.$store.getters['tisbus/getActivesByType'](this.type).length
                 },800)
 
             }
diff --git a/src/tis_app_template_kt/src/components/RightCardComponent.vue b/src/tis_app_template_kt/src/components/RightCardComponent.vue
index 75401a9..350a4bf 100644
--- a/src/tis_app_template_kt/src/components/RightCardComponent.vue
+++ b/src/tis_app_template_kt/src/components/RightCardComponent.vue
@@ -46,7 +46,7 @@ export default {
       return this.conf.type;
     },
     deviceType(){
-      return this.$tis.getDeviceType()
+      return this.$store.getters['tisbus/getDeviceType']
     }
   },
   destroyed(){
diff --git a/src/tis_app_template_kt/src/components/RightView.vue b/src/tis_app_template_kt/src/components/RightView.vue
index 2b842bb..20bd6e2 100644
--- a/src/tis_app_template_kt/src/components/RightView.vue
+++ b/src/tis_app_template_kt/src/components/RightView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="app-cards" v-if="list.length > 0">
+    <div class="app-cards" v-if="list && list.length > 0">
         <div class="content">
             <div class="item" v-for="(v, index) in list" :key="index" v-show="!v.lazy" ref="appCards">
                 <div v-show="active===index && showRightContent">
diff --git a/src/tis_app_template_kt/src/components/controlMixins.js b/src/tis_app_template_kt/src/components/controlMixins.js
index d6c6437..e8cb2f9 100644
--- a/src/tis_app_template_kt/src/components/controlMixins.js
+++ b/src/tis_app_template_kt/src/components/controlMixins.js
@@ -1,107 +1,111 @@
 
 export const controlMixins = {
     data() {
-        return {
-            active: 0,
-            hidden: [],
-            activeCache: -1,
-            show: true,
-            showRightContent: true,
-            type1: ''
-        };
+      return {
+        active: 0,
+        hidden: [],
+        activeCache: -1,
+        show: true,
+        showRightContent: true,
+        type1: '',
+      }
     },
     asyncComputed: {
-        list: {
-            lazy: false,
-            async get() {
-                let list = [];
-                const lefts = this.$tis.getWidgetsByType(this.type);
-                if (lefts) {
-                    const lfs = lefts.filter(l => l && !l.lazy);
-                    for (let i = 0; i < lfs.length; i++) {
-                        let l = lfs[i];
-
-                        if (l instanceof Promise) {
-                            const r = await l.then(r => r)
-                            list.push(r);
-                        } else {
-                            list.push(l);
-                        }
-                    }
+      list: {
+        lazy: false,
+        async get() {
+          let list = []
+          // const lefts = this.$tis.getWidgetsByType(this.type)
+          return this.$store
+            .dispatch('tisbus/getWidgetsByType', this.type)
+            .then(lefts => {
+              if (lefts.length > 0) {
+                const lfs = lefts.filter(l => l && !l.lazy)
+                for (let i = 0; i < lfs.length; i++) {
+                  let l = lfs[i]
+                  if (l instanceof Promise) {
+                    console.log('tetetetete4t')
+                    l.then(s => list.push(rl))
+                  } else {
+                    list.push(l)
+                  }
                 }
-                console.log(this.type, list);
-                ///记录激活数量
-                return list;
-            },
-          watch: ['$tis.layouts'],
-            default() {
-                return [];
-            },
-
+              }
+              ///记录激活数量
+              return list
+            })
+            .catch(err => {
+              console.log(err)
+            })
         },
+        watch: ['$store.state.tisbus.layouts'],
+        default() {
+          return []
+        },
+      },
     },
     computed: {
-        actives() {
-            return this.$tis.getActivesByType(this.type);
-        },
-        allHiddened() {
-            if (this.hidden.length === 0) return false;
-            return this.list.every((i, index) => {
-                return this.hidden[index] === true;
-            });
-        },
+      actives() {
+        // return this.$tis.getActivesByType(this.type);
+        return this.$store.getters['tisbus/getActivesByType'](this.type)
+      },
+      allHiddened() {
+        if (this.hidden.length === 0) return false
+        return this.list.every((i, index) => {
+          return this.hidden[index] === true
+        })
+      },
     },
     methods: {
-        onClose(index) {
-            console.log("删除", index);
-            // //最小化后
-            this.list[index].lazy = true;
-            this.$tis.closeComponent([this.list[index].component]);
-            this.activeCache > 0 ? this.activeCache-- : "";
-        },
-        onMinize(index) {
-            this.$set(this.hidden, index, true);
-            if (this.active === index) {
-                this.active = -1;
-                for (let i = index + 1; i < this.list.length; i++) {
-                    if (!this.hidden[i]) {
-                        this.active = i;
-                        return;
-                    }
-                }
+      onClose(index) {
+        console.log('删除', index)
+        // //最小化后
+        this.list[index].lazy = true
+        this.$tis.closeComponent([this.list[index].component])
+        this.activeCache > 0 ? this.activeCache-- : ''
+      },
+      onMinize(index) {
+        this.$set(this.hidden, index, true)
+        if (this.active === index) {
+          this.active = -1
+          for (let i = index + 1; i < this.list.length; i++) {
+            if (!this.hidden[i]) {
+              this.active = i
+              return
             }
-        },
-        onClickMenu(index) {
-            if(this.active === index){
-                this.showRightContent = !this.showRightContent
-                this.type1 = 'self'
-            }else{
-                this.showRightContent =  true
-                this.type1 = 'ohter'
-            }
-            this.active = index;
-            this.$set(this.hidden, index, false);
-            // const appCard = this.$refs.appCards[index];
-            // // console.log('99999999',index,this.$refs.appCards,this.$refs.appCards[index]);
-            // appCard.scrollIntoView({
-            //     behavior: "smooth",
-            //     block: "start",
-            //     inline: "start",
-            // });
-            this.$forceUpdate();
-
-        },
-        onHideAll() {
-            this.list.forEach((item, index) => {
-                this.$set(this.hidden, index, true);
-            });
-            this.active = -1;
-        },
-        onOpenAll() {
-            this.list.forEach((item, index) => {
-                this.$set(this.hidden, index, false);
-            });
-            this.active = 0;
-        },
+          }
+        }
+      },
+      onClickMenu(index) {
+        if (this.active === index) {
+          this.showRightContent = !this.showRightContent
+          this.type1 = 'self'
+        } else {
+          this.showRightContent = true
+          this.type1 = 'ohter'
+        }
+        this.active = index
+        this.$set(this.hidden, index, false)
+        // const appCard = this.$refs.appCards[index];
+        // // console.log('99999999',index,this.$refs.appCards,this.$refs.appCards[index]);
+        // appCard.scrollIntoView({
+        //     behavior: "smooth",
+        //     block: "start",
+        //     inline: "start",
+        // });
+        this.$forceUpdate()
+      },
+      onHideAll() {
+        this.list.forEach((item, index) => {
+          this.$set(this.hidden, index, true)
+        })
+        this.active = -1
+      },
+      onOpenAll() {
+        this.list.forEach((item, index) => {
+          this.$set(this.hidden, index, false)
+        })
+        this.active = 0
+      },
     },
-}
+  }
diff --git a/src/tis_app_template_kt/src/main.js b/src/tis_app_template_kt/src/main.js
index b7aeba5..b8389ba 100644
--- a/src/tis_app_template_kt/src/main.js
+++ b/src/tis_app_template_kt/src/main.js
@@ -1,6 +1,7 @@
-import tis, {setup} from "./tis";
-import App from "./App.vue";
-
+// import tis, { setup } from "./tis";
+import {setup} from './tis'
+import App from './App.vue'
+import store from './tis/store'
 import EventBusExample from './components/EventBusExample'
 import GlobalStateExample from './components/GlobalStateExample.vue'
 import SlideExample from './components/SlideExample.vue'
@@ -9,85 +10,90 @@ import SlideExample from './components/SlideExample.vue'
 // import {registerApps} from './scriptsLoader/index'
 // 生命周期函数
 function bootstrap(params) {
-    console.log(`[SubApp: ${tis.appId}] boostrap`, params);
+  console.log(`[SubApp: ${tis.appId}] boostrap`, params)
 }
 
 function mount(params) {
-    // window.esapp = tis;
-    // console.log('app_demo.....',window.tisApp.Vue)
-    // registerApps();
-    console.log(`[SubApp: ${tis.appId}] mount`, params.tis);
+  // window.esapp = tis;
+  // console.log('app_demo.....',window.tisApp.Vue)
+  // registerApps();
+  // console.log(`[SubApp: ${tis.appId}] mount`, params.tis);
+  console.log(`[SubApp: mount`, params.tis)
 }
 
 function show(params) {
-    console.log(`[Template App--->: ${tis.appId}] show`, params);
-    tis.menuStatusUpdate();
-
+  // console.log(`[Template App--->: ${tis.appId}] show`, params);
+  console.log(`[Template App--->: show`, params)
+  // tis.menuStatusUpdate();
+  store.dispatch('tisbus/menuStatusUpdate')
 }
 
 function hide(params) {
-    console.log(`[SubApp: ${tis.appId}] hide`, params);
+  // console.log(`[SubApp: ${tis.appId}] hide`, params);
+  console.log(`[SubApp: hide`, params)
 }
 
 function unmount(params) {
-    console.log(`[SubApp: ${tis.appId}] unmount`, params);
+  // console.log(`[SubApp: ${tis.appId}] unmount`, params);
+  console.log(`[SubApp: unmount`, params)
 }
 
 // 收到消息
 function onMessage(params, message) {
-    console.log(`我是子应用[SubApp: ${tis.appId}] onMessage`, params, message);
+  // console.log(`我是子应用[SubApp: ${tis.appId}] onMessage`, params, message);
+  console.log(`我是子应用[SubApp: onMessage`, params, message)
 }
 
 //初始化全局组件
 function install() {
-    // console.log(Vue)
+  // console.log(Vue)
 }
 
 // 点击菜单
 function onMenu(menu) {
-    const {component} = menu;
-    console.log("当前被点击菜单", menu, component)
-    tis.openComponentByMenu(component);
+  const {component} = menu
+  console.log('当前被点击菜单', menu, component)
+  // tis.openComponentByMenu(component);
+  store.dispatch('tisbus/openComponentByMenu', component)
 }
 
 //api初始化
 
 //layouts 初始化,内部组件
 const layout = [
-    {
-        title: "右1",
-        component: EventBusExample,
-        lazy: false,
-        type: 'RightWidget',
-    },
-    {
-        title: "底1",
-        component: GlobalStateExample,
-        lazy: false,
-        type: 'BottomWidget',
-    },
-    {
-        title: "底2",
-        component: SlideExample,
-        lazy: false,
-        type: 'BottomWidget',
-
-    },
-
+  {
+    title: '右1',
+    component: EventBusExample,
+    lazy: false,
+    type: 'RightWidget',
+  },
+  {
+    title: '底1',
+    component: GlobalStateExample,
+    lazy: false,
+    type: 'BottomWidget',
+  },
+  {
+    title: '底2',
+    component: SlideExample,
+    lazy: false,
+    type: 'BottomWidget',
+  },
 ]
 
 // 启动
 setup(App, {
-    layout,
-    install,
-    bootstrap,
-    mount,
-    hide,
-    show,
-    unmount,
-    onMessage,
-    onMenu
-});
+  layout,
+  install,
+  bootstrap,
+  mount,
+  hide,
+  show,
+  unmount,
+  onMessage,
+  onMenu,
+})
 
 // for qiankun framework
-export * from "./tis";
+// export * from "./tis";
+export * from './tis'
diff --git a/src/tis_app_template_kt/src/pc.vue b/src/tis_app_template_kt/src/pc.vue
index de93262..22375e7 100644
--- a/src/tis_app_template_kt/src/pc.vue
+++ b/src/tis_app_template_kt/src/pc.vue
@@ -43,14 +43,14 @@
             },
         },
         created() {
-            this.off = this.$tis.$on(
-                "visibleAppCards",
-                {system: true},
-                (payload, source) => {
-                    this.visibleAppCards = !!payload;
-                    console.log(payload, source);
-                }
-            );
+            // this.off = this.$tis.$on(
+            //     "visibleAppCards",
+            //     {system: true},
+            //     (payload, source) => {
+            //         this.visibleAppCards = !!payload;
+            //         console.log(payload, source);
+            //     }
+            // );
         },
         beforeDestroy() {
             this.off();
diff --git a/src/tis_app_template_kt/src/tis/index.js b/src/tis_app_template_kt/src/tis/index.js
index 69dd230..b7e16fc 100644
--- a/src/tis_app_template_kt/src/tis/index.js
+++ b/src/tis_app_template_kt/src/tis/index.js
@@ -1,45 +1,46 @@
-const devLib = process.env.VUE_APP_DEVLIB === "dev";
-console.log('当前版本======> for',process.env.VUE_APP_DEVLIB)
+const devLib = process.env.VUE_APP_DEVLIB === 'dev'
+console.log('当前版本======> for', process.env.VUE_APP_DEVLIB)
 if (window.__POWERED_BY_QIANKUN__) {
-    // eslint-disable-next-line no-undef 
-    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ + (devLib ? "/TIS_APP_TEMPLATE_KT/" : '');
+  // eslint-disable-next-line no-undef
+  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ + (devLib ? '/TIS_APP_TEMPLATE_KT/' : '')
 }
-import Vue from "vue";
+import Vue from 'vue'
 import store from './store'
 import AsyncComputed from 'vue-async-computed'
 import axios from 'axios'
 import Vuex from 'vuex'
 import EventBusExample from '../components/EventBusExample'
-import bus, { onSetup, onMount } from './bus'
+// import bus, { onSetup, onMount } from './bus'
 
 Vue.component('EventBusExample', EventBusExample)
-Vue.config.productionTip = false;
-Vue.use(AsyncComputed);
-const dev = process.env.NODE_ENV === 'development';
+Vue.config.productionTip = false
+Vue.use(AsyncComputed)
+const dev = process.env.NODE_ENV === 'development'
 // const sdk = process.env.VUE_APP_SDK === 'sdk';
 //作为sdk向组件提供能力时，确保加载的资源是当前组件域下的资源，
 // http://localhost:7001是一个写死的路径。。如何能正确的获取到组件的域
 let _App,
-    _instance,
-    _options = {},
-    // _layout,//由自定义组件和第三方组件组成的布局组件集合
-    // eslint-disable-next-line no-unused-vars
-    _props = {};
+  _instance,
+  _options = {},
+  // _layout,//由自定义组件和第三方组件组成的布局组件集合
+  // eslint-disable-next-line no-unused-vars
+  _props = {}
 
 export function setup(App, options = {}) {
-    _App = App;
-    _options = options;
-    onSetup(options)
-
-    if (typeof _options.install === "function") {
-        _options.install(Vue);
-    }
-    // 独立运行时
-    if (!window.__POWERED_BY_QIANKUN__) {
-        Vue.prototype.$tis = bus;
-        // console.log('----------','独立运行')
-        mount();
-    }
+  _App = App
+  _options = options
+  // onSetup(options)
+  store.commit('tisbus/onSetup', options)
+
+  if (typeof _options.install === 'function') {
+    _options.install(Vue)
+  }
+  // 独立运行时
+  if (!window.__POWERED_BY_QIANKUN__) {
+    // Vue.prototype.$tis = bus
+    // console.log('----------','独立运行')
+    mount()
+  }
 }
 
 /**
@@ -47,29 +48,28 @@ export function setup(App, options = {}) {
  * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
  */
 export async function bootstrap(props) {
-    //将这个bus同步给app内维护的bus
-    // bus.initAppBusById(bus,props.tis.appId)
-    // props.tis.privateBus.asserts = bus.
-    //主题初始化
-    const theme = localStorage.getItem("TIS_DESIGN_THEME") || 'default';
-    swithTheme(theme);
-    _props = props;
-    Vue.prototype.$tis = bus;
-    Vue.prototype.$EsDataMsg = function (params = {}) {
-        if (typeof params.callback === "function") {
-            bus.$on('message', {system: true}, async (payload) => {
-                params.callback(payload.message)
-            })
-        }
-    }
-    Vue.prototype.$EsOpenComponent = function () {
-    }
-    props.onMessage.ref = _options.onMessage // 暴露onMessage回调给宿主
-    props.onMenu && (props.onMenu.ref = _options.onMenu) // 暴露onMessage回调给宿主
-    if (typeof _options.bootstrap === "function") {
-        _options.bootstrap(props);
-    }
-    ;
+  //将这个bus同步给app内维护的bus
+  // bus.initAppBusById(bus,props.tis.appId)
+  // props.tis.privateBus.asserts = bus.
+  //主题初始化
+  const theme = localStorage.getItem('TIS_DESIGN_THEME') || 'default'
+  swithTheme(theme)
+  _props = props
+  // Vue.prototype.$tis = bus
+  // TODO 暂无使用的地方，先注释掉
+  // Vue.prototype.$EsDataMsg = function(params = {}) {
+  //   if (typeof params.callback === 'function') {
+  //     bus.$on('message', {system: true}, async payload => {
+  //       params.callback(payload.message)
+  //     })
+  //   }
+  // }
+  Vue.prototype.$EsOpenComponent = function() {}
+  props.onMessage.ref = _options.onMessage // 暴露onMessage回调给宿主
+  props.onMenu && (props.onMenu.ref = _options.onMenu) // 暴露onMessage回调给宿主
+  if (typeof _options.bootstrap === 'function') {
+    _options.bootstrap(props)
+  }
 }
 
 /**
@@ -77,107 +77,112 @@ export async function bootstrap(props) {
  */
 
 export async function mount(props = {}) {
-    //兼容kt接口
-    Vue.prototype.$ajaxGet = axios.get;
-    Vue.prototype.$ajaxPost = axios.post;
-    Vue.prototype.$ajaxPut = axios.put;
-    Vue.prototype.$ajaxDelete = axios.delete
-    Vue.prototype.$axios = axios;
-
-    // 等待bus执行mount生命周期
-    await onMount(props)
-
-    const {container} = props;
-    document.documentElement.setAttribute('data-device', "pc");
-    window.esapp = Object.assign({}, {
-        Vue: Vue,
-        vue: _instance = new Vue({
-            store,
-            render: h => h(_App),
-        }).$mount(container ? container.querySelector("#app") : "#app"),
-        add_path: function (route, name, obj) {
-            store.registerModule(name, obj);
-        },
-        add_store: function (module, data) {
-            store.commit(module, data);
-        },
-        Vuex: Vuex,
-        VueRouter: {},
-        registerAppAsync: function (source) {
-            return source
-        },
-        tis: props.tis || bus, //新框架核心对象,
-        flag: "",
-        ShareMap: window.esapp ? window.esapp.ShareMap : {},
-    });
-    console.log('应用 mounted,检视esapp对象', window.esapp)
-
-    if (typeof _options.mount === "function") {
-        _options.mount(props);
+  //兼容kt接口
+  Vue.prototype.$ajaxGet = axios.get
+  Vue.prototype.$ajaxPost = axios.post
+  Vue.prototype.$ajaxPut = axios.put
+  Vue.prototype.$ajaxDelete = axios.delete
+  Vue.prototype.$axios = axios
+
+  // 等待bus执行mount生命周期
+  await store.dispatch('tisbus/onMount', props)
+
+  const {container} = props
+  document.documentElement.setAttribute('data-device', 'pc')
+  window.esapp = Object.assign(
+    {},
+    {
+      Vue: Vue,
+      vue: (_instance = new Vue({
+        store,
+        render: h => h(_App),
+      }).$mount(container ? container.querySelector('#app') : '#app')),
+      add_path: function(route, name, obj) {
+        store.registerModule(name, obj)
+      },
+      add_store: function(module, data) {
+        store.commit(module, data)
+      },
+      Vuex: Vuex,
+      VueRouter: {},
+      registerAppAsync: function(source) {
+        return source
+      },
+      // tis: props.tis || bus, //新框架核心对象,
+      tis: props.tis || new Vue(), //新框架核心对象,
+      flag: '',
+      ShareMap: window.esapp ? window.esapp.ShareMap : {},
     }
-
-    // console.log("---", window.esapp)
-
-  bus.openComponentByMenu(['kt_zzgl_datapackaging'])
-  bus.openComponentByMenu(['GlobalStateExample'])
+  )
+  console.log('应用 mounted,检视esapp对象', window.esapp)
+  if (typeof _options.mount === 'function') {
+    _options.mount(props)
+  }
+  // console.log("---", window.esapp)
+  setTimeout(() => {
+    store.dispatch('tisbus/openComponentByMenu', ['kt_zzgl_datapackaging'])
+    store.dispatch('tisbus/openComponentByMenu', ['GlobalStateExample'])
+  }, 100)
 }
 
 /**
  * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
  */
 export async function unmount(props = {}) {
-    if (_instance) {
-        _instance.$destroy();
-        _instance.$el.innerHTML = "";
-        _instance = null;
-    }
-    if (typeof _options.unmount === "function") {
-        _options.unmount(props);
-    }
+  if (_instance) {
+    _instance.$destroy()
+    _instance.$el.innerHTML = ''
+    _instance = null
+  }
+  if (typeof _options.unmount === 'function') {
+    _options.unmount(props)
+  }
 }
 
 /**
  * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
  */
 export async function update(props = {}) {
-    if (props.show === true && typeof _options.show === 'function') {
-        //如果当前运行应用和本应用相同，则不执行此函数(待开发。。)
-        swithTheme(props.theme);
-        _options.show(props.params);
-    }
-
-    if (props.show === false && typeof _options.hide === 'function') {
-        _options.hide(props.params);
-    }
-
-    if (props.theme) {
-        swithTheme(props.theme)
-    }
-
-    if (typeof _options.update === "function") {
-        _options.update(props);
-    }
+  if (props.show === true && typeof _options.show === 'function') {
+    //如果当前运行应用和本应用相同，则不执行此函数(待开发。。)
+    swithTheme(props.theme)
+    _options.show(props.params)
+  }
+
+  if (props.show === false && typeof _options.hide === 'function') {
+    _options.hide(props.params)
+  }
+
+  if (props.theme) {
+    swithTheme(props.theme)
+  }
+
+  if (typeof _options.update === 'function') {
+    _options.update(props)
+  }
 }
 
 /***
  * 主题切换功能
  */
 function swithTheme(param) {
-    console.log('<------当前主题-------->', param);
-    const container = document.querySelector('body');
-    const _themeStyle = document.getElementById("tis_app_theme_style");
-    if (_themeStyle) container.removeChild(_themeStyle);
-    const themeStyle = document.createElement('style')
-    themeStyle.setAttribute('id', 'tis_app_theme_style');
-    themeStyle.setAttribute('type', 'text/css')
-
-    const dir = param === "default" ? "chalk" : param;
-    const baseURL = dev ? "http://localhost:9902/tis-ui/" : "/TIS_LIB/tis-ui/";
-    // theme-chalk/index${dir}.css
-    axios.get(`${baseURL}/theme-${dir}/index.css`).then(r => themeStyle.innerHTML = r.data).catch(r => console.log(r));
-
-    container.appendChild(themeStyle);
-
+  console.log('<------当前主题-------->', param)
+  const container = document.querySelector('body')
+  const _themeStyle = document.getElementById('tis_app_theme_style')
+  if (_themeStyle) container.removeChild(_themeStyle)
+  const themeStyle = document.createElement('style')
+  themeStyle.setAttribute('id', 'tis_app_theme_style')
+  themeStyle.setAttribute('type', 'text/css')
+
+  const dir = param === 'default' ? 'chalk' : param
+  const baseURL = dev ? 'http://localhost:9902/tis-ui/' : '/TIS_LIB/tis-ui/'
+  // theme-chalk/index${dir}.css
+  axios
+    .get(`${baseURL}/theme-${dir}/index.css`)
+    .then(r => (themeStyle.innerHTML = r.data))
+    .catch(r => console.log(r))
+
+  container.appendChild(themeStyle)
 }
 
-export default bus;
+// export default bus
diff --git a/src/tis_app_template_kt/src/tis/layouts/BackContainer.vue b/src/tis_app_template_kt/src/tis/layouts/BackContainer.vue
index 3ee6754..cd259f0 100644
--- a/src/tis_app_template_kt/src/tis/layouts/BackContainer.vue
+++ b/src/tis_app_template_kt/src/tis/layouts/BackContainer.vue
@@ -17,7 +17,7 @@
             BackWidget: {
                 lazy: true,
                 get() {
-                    const p = this.$tis.getWidgetsByType('BackWidget')[0];
+                    const p = this.$store.dispatch('tisbus/getWidgetsByType', 'BackWidget')?.[0]
                     return p && p.then(r => r.component)
                 }
             },
diff --git a/src/tis_app_template_kt/src/tis/layouts/DialogContainer.vue b/src/tis_app_template_kt/src/tis/layouts/DialogContainer.vue
index a8c1c55..9f240d3 100644
--- a/src/tis_app_template_kt/src/tis/layouts/DialogContainer.vue
+++ b/src/tis_app_template_kt/src/tis/layouts/DialogContainer.vue
@@ -14,10 +14,9 @@
         components:{DialogPc,DialogPad},
         computed:{
             deviceType(){
-                return this.$tis.getDeviceType();
+                return this.$store.getters['tisbus/getDeviceType']
             }
         }
-
     }
 </script>
 
diff --git a/src/tis_app_template_kt/src/tis/store/index.js b/src/tis_app_template_kt/src/tis/store/index.js
index 4dcf11c..2bdbb85 100644
--- a/src/tis_app_template_kt/src/tis/store/index.js
+++ b/src/tis_app_template_kt/src/tis/store/index.js
@@ -6,14 +6,15 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import createLogger from 'vuex/dist/logger'
+import tisbus from './modules/tisbus'
 
 const debug = process.env.NODE_ENV !== 'production'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-    modules: {
-    },
-    strict: debug,
-    plugin: debug ? [createLogger()] : []// debug add logger module
+  modules: {
+    tisbus,
+  },
+  strict: false,
+  plugin: debug ? [createLogger()] : [], // debug add logger module
 })
-
diff --git a/src/tis_app_template_kt/src/tis/store/modules/tisbus.js b/src/tis_app_template_kt/src/tis/store/modules/tisbus.js
new file mode 100644
index 0000000..37c259a
--- /dev/null
+++ b/src/tis_app_template_kt/src/tis/store/modules/tisbus.js
@@ -0,0 +1,294 @@
+import Vue from 'vue'
+import {registerApps} from '../.././scriptsLoader/index'
+
+export default {
+  namespaced: true,
+  state: {
+    dialogZIndex: 400,
+    curBaseUrl: '',
+    baseUrl: process.env.NODE_ENV === 'development' ? process.env.BASE_URL : '',
+    components: [], // components
+    asserts: {}, // 所有资源
+    deviceType: 'pc',
+    actives: [], // 从菜单中激活的组件,
+    layouts: [], // 由自定义组件和第三方组件组成的布局组件集合
+    widgets: [], // 在应用模板内部需要加载的widgets
+  },
+  getters: {
+    // 获取设备型号
+    getDeviceType(state) {
+      return state.deviceType
+    },
+    // 获取布局组件集合
+    getTemplateLayouts(state) {
+      return state.layouts
+    },
+    // 计算弹窗的z-index
+    getNextDialogZIndex(state) {
+      let zIndex = 0
+      for (let item of state.actives) {
+        if (item.zIndex && item.zIndex > zIndex) {
+          zIndex = item.zIndex
+        }
+      }
+      return zIndex > 0 ? zIndex + 1 : state.dialogZIndex
+    },
+    // 获取含有当前类型的激活组件
+    getActivesByType(state) {
+      return type => {
+        console.log(
+          '获取含有当前类型的激活组件',
+          state.actives.filter(a => a.type === type)
+        )
+        return state.actives.filter(a => a.type === type)
+      }
+      // return type => state.actives.filter(a => a.type === type)
+    },
+  },
+  mutations: {
+    // 传递当前所处组件的上下文环境
+    menuStatusUpdate(state) {
+      const onActives = state.layouts
+        .filter(l => !l.lazy)
+        .map(c => ({
+          component: c.component.name || c.component,
+          status: c.status,
+        }))
+      const appId = ''
+      console.log('============>', appId, onActives)
+      // TODO 这里通过event-bus来实现吧，Vue实例获取不到
+      // window.esapp.tis.$emit('TIS_TEMPLATE_MENU_ACTIVE', {
+      //   appId,
+      //   onActives: onActives,
+      //   system: true,
+      // })
+    },
+    // 初始化配置信息
+    async initData(state, props) {
+      const dev = process.env.NODE_ENV === 'development'
+      state.curBaseUrl = props.tis ? props.tis.entry : state.baseUrl
+      const esData = await Vue.prototype.$axios.get(`${state.curBaseUrl}/esplug.json`).catch(err => console.error(err))
+      console.log('初始化配置信息', esData)
+      const asserts = await Vue.prototype.$axios
+        .get(`${state.curBaseUrl}/tisplatform.json`)
+        .catch(err => console.error(err))
+      try {
+        // 运行模式才取用框架返回的数据
+        if (props.tis && !dev) {
+          console.log('框架传入的components:', props.tis.components)
+          state.components = props.tis.components
+            ? [...props.tis.components, ...esData.data.components]
+            : esData.data.components
+          state.asserts = Object.keys(props.tis.asserts).length !== 0 ? props.tis.asserts : asserts.data
+          state.widgets = props.tis.widgets ? props.tis.widgets : esData.data.widgets
+        } else {
+          // state.actives = esData.data.components
+          state.components = esData.data.components
+          state.asserts = asserts.data
+          state.widgets = esData.data.widgets
+        }
+        // 避免不填此属性，默认懒加载
+        state.components = state.components.map(c => {
+          if (!Object.prototype.hasOwnProperty.call(c, 'lazy') && c.type !== 'background') {
+            c.lazy = true
+          }
+          return c
+        })
+        console.log('初始化配置信息components', state.components)
+      } catch (e) {
+        console.error(e)
+      }
+    },
+    // 激活窗口
+    activeComponent(state, component) {
+      const curComponent = state.actives.find(v => (v.component.name || v.component) === component)
+      const maxZIndex = Math.max.apply(
+        Math,
+        state.actives.map(function(o) {
+          return o.zIndex
+        })
+      )
+      const maxComponent = state.actives.find(v => v.zIndex === maxZIndex)
+      if (curComponent === maxComponent) return
+      maxComponent.zIndex = curComponent.zIndex
+      curComponent.zIndex = maxZIndex
+      state.actives = [...state.actives]
+    },
+    // 最小化激活的弹窗
+    minimizeComponent(state, component) {
+      state.actives.forEach(c => {
+        const comp = c.component.name || c.component
+        console.log(comp, component, c)
+        if (comp === component) {
+          c.status = 'minimize'
+          c.zIndex = 0
+        }
+      })
+      state.actives = [...state.actives]
+      console.log('after minimize', state.actives)
+      this.commit('menuStatusUpdate')
+    },
+    // 关闭组件
+    closeComponent(state, components) {
+      // 修改layout中的状态
+      state.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 = state.actives.findIndex(b => b.component === c)
+        console.log('aaaaaa', index)
+        if (index >= 0) {
+          state.actives.splice(index, 1)
+        }
+      })
+      console.log('layouts变化状态', state.layouts)
+      console.log('actives变化状态', state.actives)
+      this.commit('menuStatusUpdate')
+    },
+    // initLayouts state.layouts 初始化,外部组件
+    initLayouts(state, layouts = []) {
+      state.layouts.push(...layouts.filter(l => !l.lazy))
+    },
+    onSetup(state, options = {}) {
+      state.layouts = options.layout
+    },
+  },
+  actions: {
+    // 加载组件资源
+    async loadComponent({state}, component) {
+      const comp = state.components.find(arg => arg.component === component) || {}
+      console.log('所有组件...', state.components)
+      console.log('所有资源...', state.asserts)
+      console.log('当前加载组件...', component)
+      console.log('匹配到的组件...', comp)
+      let assets = null,
+        dependencies = [],
+        isLib = false
+      try {
+        const info = comp.segprefix
+        assets = state.asserts[info]
+        dependencies = comp.dependencies || []
+        isLib = comp.lib
+      } catch (e) {
+        console.error(e)
+      }
+
+      // 等待依赖下载完毕
+      for (const refer of dependencies) {
+        let reference = state.asserts[refer] || null
+        await registerApps(reference, state.curBaseUrl)
+      }
+      return new Promise((resolve, reject) => {
+        // 加载组件资源
+        console.log('开始加载组件资源', assets, state.curBaseUrl)
+        registerApps(assets, state.curBaseUrl)
+          .then(() => {
+            if (!isLib) {
+              // 正常组件的加载流程,isLib为true代表纯js lib库的加载
+              let startTime = new Date().getTime()
+              const looper = setInterval(() => {
+                if (Vue.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({commit, state, getters}, components) {
+      // 长度变化才会触发computed?
+      state.components
+        .filter(c => {
+          const component = c.component.name || c.component
+          // 激活组件命中此组件,更改状态
+          const hit = components.includes(component)
+          if (hit) {
+            c.lazy = !hit
+            c.status = c.status === 'minimize' ? 'normal' : c.status
+            return c
+          }
+        })
+        .forEach(c => {
+          if (!state.layouts.some(l => (l.component.name || l.component) === c.component)) {
+            state.layouts.push(c)
+          } else {
+            // 改变状态
+            state.layouts.forEach(l => {
+              if ((l.component.name || l.component) === c.component) {
+                l.lazy = false
+              }
+            })
+          }
+          if (!state.actives.some(l => l.component === c.component)) {
+            // 弹窗暂定为同一时间只能打开一个 "PopupWidget" 非dialog
+            // 计算z-index
+            if (!c.zIndex) {
+              // c.zIndex = commit('getNextDialogZIndex')
+              c.zIndex = getters.getNextDialogZIndex
+            }
+            if (c.type === 'dialog') {
+              state.actives = [c]
+            } else {
+              state.actives.push(c)
+            }
+          }
+        })
+      // 有 加入 无 删除？
+      // 强制触发更新
+      state.actives = [...state.actives]
+      console.log('layouts变化状态', state.layouts)
+      console.log('actives变化状态', state.actives)
+      commit('menuStatusUpdate')
+    },
+    // 获取组件
+    getWidgetsByType({dispatch, state}, type) {
+      //以type 或 position 命中widget,背景板默认lazy=false
+      return state.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 dispatch('loadComponent', f.component)
+          } else {
+            return f
+          }
+        })
+    },
+
+    async onMount({commit, state}, props) {
+      await commit('initData', props)
+      commit('initLayouts', state.components)
+      commit('initLayouts', state.widgets)
+    },
+  },
+}