Skip to content

T
testMenu
提交 c8b93249 authored 作者: caicai's avatar caicai
浏览文件
操作

修改简约模式

上级 8452d20b
隐藏空白字符变更
内嵌 并排
正在显示 包含 223 行增加 和 51 行删除
src/main/events/ipc.js
浏览文件 @ c8b93249
...@@ -97,7 +97,7 @@ class IpcEvents { ...@@ -97,7 +97,7 @@ class IpcEvents {
}, true); }, true);
//首次创建三个新窗口 //首次创建三个新窗口
setTimeout(() => { setTimeout(() => {
this.cateWinPlugin.firstCreate(); this.cateWinPlugin.resizeAndCreate();
},1500); },1500);
} }
}, },
...@@ -129,7 +129,7 @@ class IpcEvents { ...@@ -129,7 +129,7 @@ class IpcEvents {
let list = this.categoryPlugin.getList(); let list = this.categoryPlugin.getList();
let length = list.length; let length = list.length;
let addWidth = (length-4)*161; let addWidth = length<4 ? 0 : (length-4)*161;
width = addWidth + Number(process.env.VUE_APP_UXueModeW); width = addWidth + Number(process.env.VUE_APP_UXueModeW);
this.windowManager.mainWindow.win.setBounds({ this.windowManager.mainWindow.win.setBounds({
...@@ -158,7 +158,7 @@ class IpcEvents { ...@@ -158,7 +158,7 @@ class IpcEvents {
// 获取app列表 // 获取app列表
ipcMain.on("getApps", (e, data) => { ipcMain.on("getApps", (e, data) => {
let apps = this.store.get(process.env.VUE_APP_APPSNAME); let apps = this.store.get(process.env.VUE_APP_APPSNAME);
this.store.set("currentMode", "modeJianYue"); this.store.set("currentMode", "modeJiJian");
e.sender.send("appsList", apps) e.sender.send("appsList", apps)
}) })
......
src/main/plugins/cateWin.js
浏览文件 @ c8b93249
...@@ -18,7 +18,7 @@ class cateWin { ...@@ -18,7 +18,7 @@ class cateWin {
// } // }
// 首次创建，仅限于小于三个窗口 // 首次创建，仅限于小于三个窗口
if(isFirst && cateWinList.length >= 3) return; if(isFirst && cateWinList.length >= 3) return;
console.log('创建',index,cateId, width) console.log('创建',cateId,index, baseX, baseY, width, offsetX)
let x = baseX || 0; let x = baseX || 0;
let y = baseY || 0; let y = baseY || 0;
this.mainWindow.createWindow({ this.mainWindow.createWindow({
...@@ -63,7 +63,7 @@ class cateWin { ...@@ -63,7 +63,7 @@ class cateWin {
console.log(len) console.log(len)
currentWidth = item.softList && len ? (len * 50 + (len-1)*24 + 80) : 20; currentWidth = item.softList && len ? (len * 50 + (len-1)*24 + 80) : 20;
this.createWin({ this.createWin({
cateId:item.cateId, cateId:item.id,
index, index,
baseX: Number(width) + Number(x), baseX: Number(width) + Number(x),
baseY: Number(y), baseY: Number(y),
...@@ -74,6 +74,22 @@ class cateWin { ...@@ -74,6 +74,22 @@ class cateWin {
}); });
} }
delCateWin() {
// 删除所有分类窗口
let winList = this.getAllWindows();
winList.forEach(v => {
v.close();
})
}
delCateIdWin(id) {
// 删除某个分类窗口
let currentWin = this.mainWindow.getWinCateOf(id);
if(currentWin != null) {
currentWin.close();
}
}
/* 获取简约模式-所有分类的窗口 */ /* 获取简约模式-所有分类的窗口 */
getAllWindows() { getAllWindows() {
let windowList = this.mainWindow.getAllWindows(); let windowList = this.mainWindow.getAllWindows();
...@@ -98,21 +114,90 @@ class cateWin { ...@@ -98,21 +114,90 @@ class cateWin {
}) })
} }
// 位置调整，如果当前分类不是第一个，找不到窗口则创建窗口
resizeAndCreate({categoryList} = {}) {
if(categoryList == undefined) {
categoryList = this.getCategoryList();
}
let {width:mainWidth, height:mainHeight, x: mainX, y:mainY} = this.getMainBounds();
let cateList = categoryList;
let pList = [];
let baseX = Number(mainWidth) + Number(mainX); //基础偏移
console.log(cateList)
cateList.forEach((cItem, cIndex) => {
let currentWin = this.mainWindow.getWinCateOf(cItem.id);
// console.log(currentWin)
if(cIndex == 0) return;
if( currentWin == null ) {
pList.push({
x: 0,
y: mainY,
width:20,
height: mainHeight,
cateId:cItem.id,
softList: cItem.softList,
win:null
});
return;
}
let {x,y,width,height} = currentWin.getBounds();
// pList.push({x,y,width,height,cateId:cItem.id, softList: cItem.softList, win:currentWin});
pList.push({x: 0,y,width,height,cateId:cItem.id, softList: cItem.softList, win:currentWin});
});
// 排序
pList.sort((a, b) => parseInt(a.x) - parseInt(b.x));
console.log(pList)
let offsetX = 0;
let currentWidth = 0;
let len = 0;
pList.forEach((item, pIndex) => {
len = item.softList && item.softList.length || 0;
currentWidth = len ? (len * 50 + (len-1)*24 + 80) : 20;
item.x = offsetX || item.x;
item.width = currentWidth;
if(item.win) {
// item.x =
item.win.setBounds( {
x: baseX + offsetX + (pIndex + 1)*12,
width: currentWidth
} );
}
if(item.win == null) {
// 创建窗口
this.createWin({
cateId:item.cateId,
index:(pIndex + 1),
baseX: Number(mainWidth) + Number(mainX),
baseY: Number(mainY),
width:currentWidth,
offsetX,
});
}
// 为下一个准备的偏移
offsetX = item.x + currentWidth + 12;
})
console.log('最终渲染')
console.log(pList)
}
/* 窗口位置，大小调整 */ /* 窗口位置，大小调整 */
resizeAndPosition({cateId, softList}) { resizeAndPosition({cateId, softList}={}) {
let cateList = this.getCategoryList(); let cateList = this.getCategoryList();
let pList = []; let pList = [];
// this.mainWindow.getWinCateOf();
console.log(cateList)
cateList.forEach(cItem => { cateList.forEach(cItem => {
let currentWin = this.mainWindow.getWinCateOf(cItem.id); let currentWin = this.mainWindow.getWinCateOf(cItem.id);
console.log(currentWin) // console.log(currentWin)
if(currentWin == null) return; if(currentWin == null) return;
let {x,y,width,height} = currentWin.getBounds(); let {x,y,width,height} = currentWin.getBounds();
pList.push({x,y,width,height,cateId:cItem.id, softList: (cateId == cItem.id ? softList : cItem.softList), win:currentWin}); pList.push({x,y,width,height,cateId:cItem.id, softList: (cateId == cItem.id ? softList : cItem.softList), win:currentWin});
}); });
// 排序 // 排序
pList.sort((a, b) => parseInt(a.x) - parseInt(b.x)); pList.sort((a, b) => parseInt(a.x) - parseInt(b.x));
console.log(pList) // console.log(pList)
let offsetX = 0; let offsetX = 0;
let currentWidth = 0; let currentWidth = 0;
let len = 0; let len = 0;
......
src/main/plugins/category.js
浏览文件 @ c8b93249
...@@ -57,6 +57,9 @@ class category { ...@@ -57,6 +57,9 @@ class category {
}; };
categoryList.unshift(category); categoryList.unshift(category);
this.store.set(process.env.VUE_APP_CATENAME, categoryList); this.store.set(process.env.VUE_APP_CATENAME, categoryList);
if(this.store.get("currentMode")==="modeJianYue") this.cateWinPlugin.resizeAndCreate({categoryList});
sender.send("add-category", category); sender.send("add-category", category);
this.mainWindow.win.webContents.send("add-category", category); this.mainWindow.win.webContents.send("add-category", category);
} }
...@@ -65,10 +68,30 @@ class category { ...@@ -65,10 +68,30 @@ class category {
delCategory({id, sender}) { delCategory({id, sender}) {
let categoryList = this.store.get(process.env.VUE_APP_CATENAME); let categoryList = this.store.get(process.env.VUE_APP_CATENAME);
let hasIn = categoryList.findIndex(v => v.id == id); let hasIn = categoryList.findIndex(v => v.id == id);
console.log('delCategory - hasIn', hasIn, id) let nextId = null;
// console.log('delCategory - hasIn', hasIn, id)
if(hasIn == -1) return null; if(hasIn == -1) return null;
if(hasIn == 0) nextId = categoryList[1].id;
categoryList.splice(hasIn,1); categoryList.splice(hasIn,1);
// 删除对应窗口，主窗口不用
// 分类 id
//根据分类重新渲染
if(this.store.get("currentMode")==="modeJianYue") {
if(hasIn == 0) {
this.cateWinPlugin.delCateIdWin(nextId);
setTimeout(() => {
this.cateWinPlugin.resizeAndCreate({categoryList});
}, 800);
}else {
this.cateWinPlugin.delCateIdWin(id);
setTimeout(() => {
this.cateWinPlugin.resizeAndCreate({categoryList});
}, 800);
}
}
this.store.set(process.env.VUE_APP_CATENAME, categoryList); this.store.set(process.env.VUE_APP_CATENAME, categoryList);
sender.send('remove-category',{id}); sender.send('remove-category',{id});
...@@ -91,17 +114,18 @@ class category { ...@@ -91,17 +114,18 @@ class category {
console.log('分类id',id) console.log('分类id',id)
if(hasIn == -1) return null; if(hasIn == -1) return null;
categoryList[hasIn] = detail;
// 修改窗口大小 // 修改窗口大小
let cateWin = this.mainWindow.getWinCateOf(id); let cateWin = this.mainWindow.getWinCateOf(id);
if(cateWin != null) { if(cateWin != null && (this.store.get("currentMode")==="modeJianYue") ) {
// cateWin.setBounds({ // cateWin.setBounds({
// width:352, // width:352,
// }); // });
this.cateWinPlugin.resizeAndPosition({cateId:id, softList:detail.softList}); // this.cateWinPlugin.resizeAndPosition({cateId:id, softList:detail.softList});
this.cateWinPlugin.resizeAndCreate({categoryList});
} }
categoryList[hasIn] = detail;
this.store.set(process.env.VUE_APP_CATENAME, categoryList); this.store.set(process.env.VUE_APP_CATENAME, categoryList);
sender.send('change-category',{detail,id}); sender.send('change-category',{detail,id});
this.mainWindow.main.webContents.send("category-list", categoryList); this.mainWindow.main.webContents.send("category-list", categoryList);
...@@ -116,6 +140,10 @@ class category { ...@@ -116,6 +140,10 @@ class category {
categoryList[hasIn] = detail; categoryList[hasIn] = detail;
// 重新调整窗口大小及其位置
// if(this.store.get("currentMode")==="modeJianYue") this.cateWinPlugin.resizeAndPosition({cateId:id, softList:detail.softList});
if(this.store.get("currentMode")==="modeJianYue") this.cateWinPlugin.resizeAndCreate({categoryList});
this.store.set(process.env.VUE_APP_CATENAME, categoryList); this.store.set(process.env.VUE_APP_CATENAME, categoryList);
sender.send('remove-soft',{detail,id}); sender.send('remove-soft',{detail,id});
this.mainWindow.main.webContents.send("category-list", categoryList); this.mainWindow.main.webContents.send("category-list", categoryList);
......
src/renderer/components/Dockmode/one.vue
浏览文件 @ c8b93249
...@@ -19,7 +19,8 @@ ...@@ -19,7 +19,8 @@
<span class="app_name">{{ appItem.name }}</span> <span class="app_name">{{ appItem.name }}</span>
</div> </div>
</div> --> </div> -->
<div v-if="cateList && cateList[0]"> <div v-if="cateList && cateList[0]" class="group_list_inner">
<div class="group1_wrap_name">{{cateList[0].name}}</div>
<el-scrollbar ref="scrollContainer" :vertical="false" style="width:300px;"> <el-scrollbar ref="scrollContainer" :vertical="false" style="width:300px;">
<div class="group1_wrap"> <div class="group1_wrap">
<div v-for="(appItem, appIndex) in cateList[0].softList" <div v-for="(appItem, appIndex) in cateList[0].softList"
...@@ -81,38 +82,58 @@ export default { ...@@ -81,38 +82,58 @@ export default {
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
} }
.group1_wrap { .group_list_inner {
border-radius: 6px; position: relative;
// background: rgba(0, 0, 0, .1); padding-left: 20px;
// border: 2px solid transparent; &:hover {
// border-radius: 16px; .group1_wrap_name {
// background-clip: padding-box, border-box; opacity: 0.8;
// background-origin: padding-box, border-box;
// background-image: linear-gradient(to right, #fff, #fff), linear-gradient(180deg, #87B7FF 44%, #0071FF 100%, #9CC7F8 6%, #0077FF 100%);
display: flex;
align-items: center;
justify-content: center;
// flex: 1;
height: 56px;
padding: 0 6px;
&.center {
flex: 1;
background-color: transparent;
}
&.first {
padding-left: 10px;
// margin-left: 2px;
} }
} }
}
.group1_wrap {
padding-left: 20px;
display: flex;
align-items: center;
// justify-content: center;
// flex: 1;
height: 68px;
&.center {
flex: 1;
background-color: transparent;
}
&.first {
// padding-left: 10px;
// margin-left: 2px;
}
}
.group1_wrap_name {
transition: opacity 0.6s;
opacity: 0;
position: absolute;
left: 6px;
top: 4px;
bottom: 0;
width: 20px;
height: 4em;
overflow: hidden;
line-height: 1;
// z-index: 1;
font-size: 14px;
color: #fff;
word-spacing: 0;
letter-spacing: 0;
}
.app_item { .app_item {
position: relative; position: relative;
margin: 0 12px;
flex-shrink: 0; flex-shrink: 0;
// padding: 2px; padding: 5px;
width: 36px; margin-right: 24px;
height: 36px; width: 50px;
height: 50px;
box-sizing: border-box;
border-radius: 10px; border-radius: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -127,11 +148,15 @@ export default { ...@@ -127,11 +148,15 @@ export default {
background-color: rgba(255, 255, 255, .1); background-color: rgba(255, 255, 255, .1);
width: 50px; width: 50px;
height: 50px; height: 50px;
padding: 0;
.app_name { .app_name {
// display: block; // display: block;
opacity: 1; opacity: 1;
} }
} }
&:first-child {
margin-left: 0;
}
} }
.img { .img {
flex-shrink: 0; flex-shrink: 0;
......
src/renderer/views/Home.vue
浏览文件 @ c8b93249
...@@ -83,6 +83,7 @@ export default { ...@@ -83,6 +83,7 @@ export default {
// 更改 U学模式宽度 // 更改 U学模式宽度
let length = list.length; let length = list.length;
let addWidth = (length-4)*161; let addWidth = (length-4)*161;
this.categoryList = list;
if(this.mode === "modeUXue") { if(this.mode === "modeUXue") {
this.ipcRenderer.send("setSize",{ this.ipcRenderer.send("setSize",{
width: addWidth + Number(process.env.VUE_APP_UXueModeW) width: addWidth + Number(process.env.VUE_APP_UXueModeW)
...@@ -237,7 +238,8 @@ export default { ...@@ -237,7 +238,8 @@ export default {
this.ipcRenderer.on("category-list", (event, list) => { this.ipcRenderer.on("category-list", (event, list) => {
// console.log("获取到分类列表 1", list); // console.log("获取到分类列表 1", list);
this.categoryList = list; // this.categoryList = list;
this.$set(this,'categoryList',list);
}); });
this.ipcRenderer.on("appsList_update", (event, list) => { this.ipcRenderer.on("appsList_update", (event, list) => {
......
src/renderer/views/category/index.vue
浏览文件 @ c8b93249
<template> <template>
<div class="category_container page_wrap app-drag"> <div class="category_container page_wrap app-drag">
<el-scrollbar ref="scrollContainer" :vertical="false" style="width:96%;height: 68px;" class="" <!-- {{id}} -->
@wheel.native.prevent="handleScroll"> <div v-if="list && list.length > 0" class="group1_wrap_name">{{detail.name}}</div>
<div class="group1_wrap"> <!-- <el-scrollbar ref="scrollContainer" :vertical="false" style="height: 68px;background:red" class=""
@wheel.native.prevent="handleScroll"> -->
<div class="group1_wrap app-nodrag">
<div v-for="(appItem, appIndex) in list" <div v-for="(appItem, appIndex) in list"
:key="appIndex" :key="appIndex"
:data-appname="appItem.name" :data-appname="appItem.name"
class="app_item" class="app_item "
@click="tapApp(appItem)"> @click="tapApp(appItem)">
<img :src="appItem.icon" alt="" class="img disable-drag app-nodrag"> <img :src="appItem.icon" alt="" class="img disable-drag">
<span class="app_name">{{ appItem.name }}</span> <span class="app_name">{{ appItem.name }}</span>
</div> </div>
</div> </div>
</el-scrollbar> <!-- </el-scrollbar> -->
</div> </div>
</template> </template>
...@@ -22,11 +24,12 @@ export default { ...@@ -22,11 +24,12 @@ export default {
return { return {
id:null, id:null,
list:[], list:[],
detail:{}
}; };
}, },
computed: { computed: {
ipcRenderer() { ipcRenderer() {
return (this.$electron && this.$electron.ipcRenderer) || {}; return (this.$electron && this.$electron.ipcRenderer) || {};
}, },
}, },
mounted() { mounted() {
...@@ -50,6 +53,7 @@ export default { ...@@ -50,6 +53,7 @@ export default {
if(targetIndex == -1) return; if(targetIndex == -1) return;
let detail = cateList[targetIndex]; let detail = cateList[targetIndex];
if(!detail.softList) return; if(!detail.softList) return;
this.detail = detail;
this.list = detail.softList; this.list = detail.softList;
} }
} }
...@@ -58,15 +62,43 @@ export default { ...@@ -58,15 +62,43 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.category_container { .category_container {
min-height: 70px; height: 70px;
position: relative;
display: flex;
justify-content: center;
overflow: hidden;
&:hover {
.group1_wrap_name {
opacity: 0.9;
}
}
} }
.group1_wrap { .group1_wrap {
// border-radius: 6px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 68px; height: 68px;
box-sizing: border-box; box-sizing: border-box;
// margin-left: 20px;
// width: calc(100% - 40px);
box-sizing: border-box;
padding: 0 12px;
}
.group1_wrap_name {
transition: opacity 0.6s;
opacity: 0;
position: absolute;
left: 16px;
top: 6px;
bottom: 0;
width: 20px;
height: 4em;
overflow: hidden;
line-height: 1;
font-size: 14px;
color: #fff;
word-spacing: 0;
letter-spacing: 0;
} }
.app_item { .app_item {
position: relative; position: relative;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论