From f35be1c7fbfc3b121ac68e88629a500af0b1a782 Mon Sep 17 00:00:00 2001 From: hanbaoshan <hanbaoshan@aiotlink.com> Date: 星期二, 04 八月 2020 20:58:00 +0800 Subject: [PATCH] 应用入口操作相关交互更新 --- src/pages/desktop/index/store/modules/desktop.js | 58 ++++++++++++++++------------ src/pages/desktop/index/components/ToolsEntry.vue | 9 ++++ src/pages/desktop/index/components/DFrame.vue | 9 +++- src/pages/desktop/index/components/Tools.vue | 30 +++++++++++++-- 4 files changed, 74 insertions(+), 32 deletions(-) diff --git a/src/pages/desktop/index/components/DFrame.vue b/src/pages/desktop/index/components/DFrame.vue index c19e0fc..93f431f 100644 --- a/src/pages/desktop/index/components/DFrame.vue +++ b/src/pages/desktop/index/components/DFrame.vue @@ -102,10 +102,10 @@ this.fullScreen = !this.fullScreen; }, frameClick: function () { + debugger this.$store.commit('desktop/refreshFrame', this.data); }, minFrame (data,e) { - //e.stopPropagation() //鎵惧埌褰撳墠鐨刬frame let curIframe = Array.from(document.querySelectorAll('iframe')).find(iframe => iframe.src.indexOf(data.url) >= 0); //淇濆瓨褰撳墠搴旂敤蹇収 @@ -124,8 +124,8 @@ type: "3", screenshot: shotSrc }); - }) - + }); + return false; //this.refreshDock(); }, refreshDock: function () { @@ -237,6 +237,7 @@ top: 0; right: 0; height: 30px; + z-index: 2; } .d-frame-title-operation i { @@ -246,7 +247,9 @@ width: 46px; text-align: center; vertical-align: middle; + cursor: pointer; } + .d-frame-title-operation i:hover{ background-color: #c7cacf; } diff --git a/src/pages/desktop/index/components/Tools.vue b/src/pages/desktop/index/components/Tools.vue index d2e1367..12d3fd2 100644 --- a/src/pages/desktop/index/components/Tools.vue +++ b/src/pages/desktop/index/components/Tools.vue @@ -12,7 +12,7 @@ </div> </div> <div class="tools-middle"> - <div v-for="dock in this.$store.state.desktop.minDocks" :key="dock.id" class="dock-item-wrap"> + <div v-for="dock in this.$store.state.desktop.minDocks" :key="dock.id" class="dock-item-wrap" :class="{'actived':dock.highlight}"> <a @click="dockClick(dock)"> <img class="dock-item" :src="dock.src" :alt="dock.alt" /> <img class="dock-shot" :src="dock.screenshot" :alt="dock.name" /> @@ -44,7 +44,9 @@ return { publicPath: process.env.BASE_URL, notificationCenterVisible: false, - notificationCenterMessageCount: 0 + notificationCenterMessageCount: 0, + maxOrder: 0, + maxOrderOne: '' }; }, created() { @@ -58,6 +60,22 @@ }, 600) ]; }, + // watch:{ + // '$store.state.desktop.frames':{ + // handler(n,o){ + // if(n){ + // debugger; + // n.forEach((item,index) => { + // if(item.order >= this.maxOrder){ + // this.maxOrderOne = item.id; + // } + // }); + // } + // }, + // deep: true + // } + // }, + methods: { notificationCenterClick: function () { this.notificationCenterVisible = !this.notificationCenterVisible; @@ -102,6 +120,9 @@ }); } else if (dock.type === "3") { this.$store.commit("desktop/resetMinFrame", dock.id); + //鐐瑰嚮鐨刬frame缃《骞堕珮浜� + debugger + //this.$store.commit("desktop/refreshFrame", dock); } } } @@ -153,10 +174,11 @@ border-bottom: 2px solid transparent; position: relative; } -.tools .tools-middle .dock-item-wrap:hover, -.tools .tools-middle .dock-item-wrap.clicked { +.tools .tools-middle .dock-item-wrap:hover{ color: white; background-color: #98aabe; +} +.tools-middle .dock-item-wrap.actived{ border-color: #40c3ff; } .dock-item-wrap a { diff --git a/src/pages/desktop/index/components/ToolsEntry.vue b/src/pages/desktop/index/components/ToolsEntry.vue index 1006a0f..f721fb0 100644 --- a/src/pages/desktop/index/components/ToolsEntry.vue +++ b/src/pages/desktop/index/components/ToolsEntry.vue @@ -40,6 +40,15 @@ title: dock.name, url: dock.url }); + debugger + this.$store.commit('desktop/addMinDock', { + id: dock.id, + src: dock.src, + alt: dock.title, + type: "3", + highlight: true, + isOpen: dock.isOpen + }); } else if (dock.type === '2' && dock.isOpen) { this.$store.commit('desktop/resetMinFrame', dock.id); } diff --git a/src/pages/desktop/index/store/modules/desktop.js b/src/pages/desktop/index/store/modules/desktop.js index 9b29087..72ecaa8 100644 --- a/src/pages/desktop/index/store/modules/desktop.js +++ b/src/pages/desktop/index/store/modules/desktop.js @@ -103,21 +103,24 @@ return true; }, addMinDock: (state, dock) => { + debugger let ids = state.minDocks.map(item => item.id); if (ids.indexOf(dock.id) > -1) { + //宸茬粡鍦╩indock閲� + let curFrame = state.frames.find(frame => frame.id == dock.id); + curFrame.isShow = false; return; } - state.frames.find(function (it) { - if (it.id === dock.id) { - it.isShow = false; - return true; - } - return false; - }); + // state.frames.find(function (it) { + // if (it.id === dock.id) { + // it.isShow = false; + // return true; + // } + // return false; + // }); + debugger state.minDocks.push(dock); - if (dock.id === 'safari') { - state.safari.isShow = false; - } + }, addMessageNotice: (state, msg) => { let ids = state.messageNotices.map(item => item.id); @@ -163,18 +166,25 @@ state.safari.isShow = true; }, refreshFrame: (state, item) => { + debugger state.frames.forEach(function (it) { + debugger if (it.id === item.id) { it.order = 1; + + state.minDocks.forEach(min=>{ + if(min.id == it.id){ + debugger + min.highlight = true; + }else{ + min.highlight = false; + } + }) } else { it.order = 0; } }); - if (item.id === 'safari') { - state.safari.order = 1; - } else { - state.safari.order = 0; - } + }, refreshTime: (state) => { state.currentDate = new Date(); @@ -187,16 +197,14 @@ } return false; }); - state.minDocks.find(function (it, idx) { - if (it.id === id) { - state.minDocks.splice(idx, 1); - return true; - } - return false; - }); - if (id === 'safari') { - state.safari.isShow = true; - } + // state.minDocks.find(function (it, idx) { + // if (it.id === id) { + // state.minDocks.splice(idx, 1); + // return true; + // } + // return false; + // }); + }, removeMessageById: (state, id) => { state.messageNotices.find(function (item, idx) { -- Gitblit v1.8.0