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 {
}, true);
//首次创建三个新窗口
setTimeout(() => {
this.cateWinPlugin.firstCreate();
this.cateWinPlugin.resizeAndCreate();
},1500);
}
},
......@@ -129,7 +129,7 @@ class IpcEvents {
let list = this.categoryPlugin.getList();
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);
this.windowManager.mainWindow.win.setBounds({
......@@ -158,7 +158,7 @@ class IpcEvents {
// 获取app列表
ipcMain.on("getApps", (e, data) => {
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)
})
......
src/main/plugins/cateWin.js
浏览文件 @ c8b93249
......@@ -18,7 +18,7 @@ class cateWin {
// }
// 首次创建，仅限于小于三个窗口
if(isFirst && cateWinList.length >= 3) return;
console.log('创建',index,cateId, width)
console.log('创建',cateId,index, baseX, baseY, width, offsetX)
let x = baseX || 0;
let y = baseY || 0;
this.mainWindow.createWindow({
......@@ -63,7 +63,7 @@ class cateWin {
console.log(len)
currentWidth = item.softList && len ? (len * 50 + (len-1)*24 + 80) : 20;
this.createWin({
cateId:item.cateId,
cateId:item.id,
index,
baseX: Number(width) + Number(x),
baseY: Number(y),
......@@ -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() {
let windowList = this.mainWindow.getAllWindows();
......@@ -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 pList = [];
// this.mainWindow.getWinCateOf();
console.log(cateList)
cateList.forEach(cItem => {
let currentWin = this.mainWindow.getWinCateOf(cItem.id);
console.log(currentWin)
// console.log(currentWin)
if(currentWin == null) return;
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.sort((a, b) => parseInt(a.x) - parseInt(b.x));
console.log(pList)
// console.log(pList)
let offsetX = 0;
let currentWidth = 0;
let len = 0;
......
src/main/plugins/category.js
浏览文件 @ c8b93249
......@@ -57,6 +57,9 @@ class category {
};
categoryList.unshift(category);
this.store.set(process.env.VUE_APP_CATENAME, categoryList);
if(this.store.get("currentMode")==="modeJianYue") this.cateWinPlugin.resizeAndCreate({categoryList});
sender.send("add-category", category);
this.mainWindow.win.webContents.send("add-category", category);
}
......@@ -65,10 +68,30 @@ class category {
delCategory({id, sender}) {
let categoryList = this.store.get(process.env.VUE_APP_CATENAME);
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 == 0) nextId = categoryList[1].id;
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);
sender.send('remove-category',{id});
......@@ -91,17 +114,18 @@ class category {
console.log('分类id',id)
if(hasIn == -1) return null;
categoryList[hasIn] = detail;
// 修改窗口大小
let cateWin = this.mainWindow.getWinCateOf(id);
if(cateWin != null) {
if(cateWin != null && (this.store.get("currentMode")==="modeJianYue") ) {
// cateWin.setBounds({
// 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);
sender.send('change-category',{detail,id});
this.mainWindow.main.webContents.send("category-list", categoryList);
......@@ -116,6 +140,10 @@ class category {
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);
sender.send('remove-soft',{detail,id});
this.mainWindow.main.webContents.send("category-list", categoryList);
......
src/renderer/components/Dockmode/one.vue
浏览文件 @ c8b93249
......@@ -19,7 +19,8 @@
<span class="app_name">{{ appItem.name }}</span>
</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;">
<div class="group1_wrap">
<div v-for="(appItem, appIndex) in cateList[0].softList"
......@@ -81,38 +82,58 @@ export default {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.group1_wrap {
border-radius: 6px;
// background: rgba(0, 0, 0, .1);
// border: 2px solid transparent;
// border-radius: 16px;
// background-clip: padding-box, border-box;
// 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;
.group_list_inner {
position: relative;
padding-left: 20px;
&:hover {
.group1_wrap_name {
opacity: 0.8;
}
}
}
.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 {
position: relative;
margin: 0 12px;
flex-shrink: 0;
// padding: 2px;
width: 36px;
height: 36px;
padding: 5px;
margin-right: 24px;
width: 50px;
height: 50px;
box-sizing: border-box;
border-radius: 10px;
display: flex;
align-items: center;
......@@ -127,11 +148,15 @@ export default {
background-color: rgba(255, 255, 255, .1);
width: 50px;
height: 50px;
padding: 0;
.app_name {
// display: block;
opacity: 1;
}
}
&:first-child {
margin-left: 0;
}
}
.img {
flex-shrink: 0;
......
src/renderer/views/Home.vue
浏览文件 @ c8b93249
......@@ -83,6 +83,7 @@ export default {
// 更改 U学模式宽度
let length = list.length;
let addWidth = (length-4)*161;
this.categoryList = list;
if(this.mode === "modeUXue") {
this.ipcRenderer.send("setSize",{
width: addWidth + Number(process.env.VUE_APP_UXueModeW)
......@@ -237,7 +238,8 @@ export default {
this.ipcRenderer.on("category-list", (event, list) => {
// console.log("获取到分类列表 1", list);
this.categoryList = list;
// this.categoryList = list;
this.$set(this,'categoryList',list);
});
this.ipcRenderer.on("appsList_update", (event, list) => {
......
src/renderer/views/category/index.vue
浏览文件 @ c8b93249
<template>
<div class="category_container page_wrap app-drag">
<el-scrollbar ref="scrollContainer" :vertical="false" style="width:96%;height: 68px;" class=""
@wheel.native.prevent="handleScroll">
<div class="group1_wrap">
<!-- {{id}} -->
<div v-if="list && list.length > 0" class="group1_wrap_name">{{detail.name}}</div>
<!-- <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"
:key="appIndex"
:data-appname="appItem.name"
class="app_item"
class="app_item "
@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>
</div>
</div>
</el-scrollbar>
<!-- </el-scrollbar> -->
</div>
</template>
......@@ -22,11 +24,12 @@ export default {
return {
id:null,
list:[],
detail:{}
};
},
computed: {
ipcRenderer() {
return (this.$electron && this.$electron.ipcRenderer) || {};
return (this.$electron && this.$electron.ipcRenderer) || {};
},
},
mounted() {
......@@ -50,6 +53,7 @@ export default {
if(targetIndex == -1) return;
let detail = cateList[targetIndex];
if(!detail.softList) return;
this.detail = detail;
this.list = detail.softList;
}
}
......@@ -58,15 +62,43 @@ export default {
<style lang="less" scoped>
.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 {
// border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
height: 68px;
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 {
position: relative;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论