移出分类

src/main/events/ipc.js

@@ -333,6 +333,10 @@ class IpcEvents {
       let { name,detail,index } = data;
       this.categoryPlugin.updateName({name, detail, sender:e.sender})
     })
+    ipcMain.on("removeSoftFromCate", (e, data) => {
+      let { cate,soft } = data;
+      this.categoryPlugin.removeSoft({cate,soft, sender:e.sender})
+    })
   }
 }
 

src/main/plugins/category.js

@@ -70,14 +70,26 @@ class category {
     updateCategory({id, detail, sender}) {
         let categoryList = this.store.get('category');
         let hasIn = categoryList.findIndex(v => v.id == id);
-        console.log('hasIn', hasIn)
+        // console.log('hasIn', hasIn)
         if(hasIn == -1) return null;
 
         categoryList[hasIn] = detail;
 
         this.store.set('category', categoryList);
         sender.send('change-category',{detail,id});
-        this.mainWindow.win.webContents.send('getMsg', categoryList)
+    }
+
+    // 更新分类下的软件列表
+    updateSoftList({id, detail, sender}) {
+        let categoryList = this.store.get('category');
+        let hasIn = categoryList.findIndex(v => v.id == id);
+        // console.log('hasIn', hasIn)
+        if(hasIn == -1) return null;
+
+        categoryList[hasIn] = detail;
+
+        this.store.set('category', categoryList);
+        sender.send('remove-soft',{detail,id});
     }
 
     /* 修改分类名称 */
@@ -110,10 +122,26 @@ class category {
             if(softD) cateDetail.softList.push(softD);
         });
         // 更新分类列表
-        console.log('修改分类',cateDetail,categoryId)
+        // console.log('修改分类',cateDetail,categoryId)
         this.updateCategory({detail:cateDetail, id: categoryId, sender})
     }
 
+    // 将软件从某个分类移出
+    removeSoft({cate,soft, sender}) {
+        let softId = soft.id;
+        let categoryId = cate.id;
+        if(!softId || !categoryId) return;
+        let cateDetail = this.getCategory(categoryId);
+        let hasIn = cateDetail.softIds.includes(softId);
+        // 不属于当前分类
+        if(!hasIn) return;
+
+        cateDetail.softIds = cateDetail.softIds.filter(v => v != softId);
+        cateDetail.softList = cateDetail.softList.filter(v => v.id != softId);
+
+        this.updateSoftList({detail:cateDetail, id: categoryId, sender})
+    }
+
     getSoftDetail(softId) {
         let appList = this.store.get('apps');
         let targetIndex = appList.findIndex(v => v.id == softId);

src/main/windows/mainWindow.js

@@ -236,7 +236,6 @@ class MainWindow {
     // })
     // 等待加载完成再去显示，不显示白屏加载过程
     win.once('ready-to-show', () => {
-      console.log('是否显示', args.visible)
       if(args.visible!='hide') win.show();
       // win.setAlwaysOnTop(true);
       if(win.webContents.webType === 'mainWindow') {
@@ -244,10 +243,9 @@ class MainWindow {
       }
     });
     win.on('blur', (event) => {
-      console.log(event.sender.webContents.webType)
       event.preventDefault();
       
-      console.log(`Window ${win.id} lost focus webType:${win.webContents.webType}`)
+      // console.log(`Window ${win.id} lost focus webType:${win.webContents.webType}`)
       // 如果当前app 管理页 失去焦点，则隐藏
       // if(win.webContents.webType === 'appManage') {
       //   event.sender.send('manageVisible',false);

src/renderer/components/Appbox/item.vue

@@ -42,7 +42,7 @@ export default {
   .item_wrap {
     cursor: pointer;
     flex-shrink: 0;
-    margin-right: 5px;
+    margin-right: 15px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -66,5 +66,6 @@ export default {
     color: #333333;
     font-size: 14px;
     font-weight: 400;
+    text-align: center;
   }
 </style>
\ No newline at end of file

src/renderer/components/DragBox/box.vue

@@ -13,7 +13,9 @@ export default {
 <style lang="less" scoped>
   .box {
     float: left;
-    width: 460px;
+    // width: 460px;
+    // width: 43%;
+    width: 49%;
     display: flex;
     flex-wrap: wrap;
     margin-top: 24px;
@@ -21,9 +23,11 @@ export default {
     background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0.5) 100%);
     box-shadow: 0px 4px 4px 0px rgba(10,78,141,0.1);
     border-radius: 20px 20px 20px 20px;
+    margin: 24px 12px 0;
     &:nth-child(2n+1) {
-      margin-left: 30px;
-      width: 346px;
+      // margin-left: 30px;
+      // width: 346px;
+      width: 37%;
     }
   }
 </style>
\ No newline at end of file

src/renderer/components/DragBox/index.vue

@@ -4,8 +4,12 @@
           <img @click="addCate" src="~@/assets/addCategory.png" alt="" class="dragbox_head_img"><span @click="addCate" class="dragbox_head_txt">添加分类</span>
       </div>
       <cateBox v-for="(cItem, cIndex) in cateList" :key="cIndex">
-          <div class="dragbox_cate">
-              <div v-if="editIndex != cIndex" class="dragbox_cate_name" @dblclick="modifyName(cItem.name,cIndex)">{{cItem.name}}</div>
+            <div class="dragbox_cate" :data-id="cItem.id" data-type="cate_container">
+                <!-- @dblclick="modifyName(cItem.name,cIndex)" -->
+                <div v-if="editIndex != cIndex" class="dragbox_cate_name" >{{cItem.name}}
+                    <img @click="modifyName(cItem.name,cIndex)" 
+                        src="~@/assets/edit_icon.png" alt="" class="dragbox_cate_edit">
+                </div>
                 <el-input v-else v-model="editName" placeholder="" @blur="closeEdit(cIndex)" class="dragbox_cate_input"></el-input>
                 <div v-if="cItem.softList" class="dragbox_cate_list">
                     <cateItem v-for="(sItem, sIndex) in cItem.softList" :key="sIndex"  :detail="sItem" :src="sItem.icon" :name="sItem.name"></cateItem>
@@ -25,6 +29,10 @@
                 <el-button type="primary" @click="sureAdd">确 定</el-button>
             </span>
         </el-dialog>
+        <right-menu @closeMenu="closeMenu" @select="selectMenu"
+            :cates="[{'name':'从当前分类移出'}]" :showText="false"
+            :visible="showMenu" :left="menuPosition.left" :top="menuPosition.top">
+        </right-menu>
   </div>
 </template>
 
@@ -32,6 +40,7 @@
 import draggable from 'vuedraggable';
 import cateBox from './box.vue';
 import cateItem from './item.vue';
+import rightMenu from '@/renderer/components/RightMenu/index.vue';
 export default {
     props: {
         cateList: {
@@ -63,7 +72,8 @@ export default {
     components: {
         draggable,
         cateBox,
-        cateItem
+        cateItem,
+        rightMenu
     },
     data() {
         return {
@@ -71,9 +81,74 @@ export default {
             cateName:"",
             editIndex: -1,
             editName:"",
+            showMenu: false,//右键菜单
+            menuPosition: {
+                left:0,
+                top:0,
+                current:-1,
+                id:-1,
+            }
         };
     },
+    created() {
+        this.listener();
+    },
+    destroyed() {
+        window.removeEventListener("contextmenu",this.handleEvent)
+    },
     methods: {
+        findParentEl({dataType, element}) {
+            if(element.dataset.type === dataType) return element;
+            if(element.parentElement) return this.findParentEl({dataType,element:element.parentElement});
+            return null;
+        },
+        handleEvent(e) {
+            // console.dir(e)
+            e.preventDefault();
+            e.stopPropagation();
+            if(e.target.dataset.type === 'closeMask' || this.showMenu) {
+                // 点击遮罩层
+                this.closeMenu();
+                return;
+            }
+            if (
+            (e.target.parentElement &&
+                e.target.parentElement.dataset.type !== 'right-menu') &&
+                e.target.dataset.type !== 'right-menu'
+            ) {
+                return;
+            }
+            let cateElement = this.findParentEl({dataType:"cate_container", element:e.target.parentElement ? e.target.parentElement : e.target});
+            
+            if(!cateElement || !cateElement.dataset.id) {
+                return;
+            }
+
+            this.menuPosition.cateId = cateElement.dataset.id;
+            // 需要显示右键菜单
+            this.menuPosition.left = e.layerX;
+            this.menuPosition.top = e.layerY;
+            this.menuPosition.id = e.target.parentElement ? e.target.parentElement.dataset.id : e.target.dataset.id;
+            this.showMenu = true;
+        },
+        listener() {
+            // 监听右键菜单
+            window.addEventListener("contextmenu", this.handleEvent);
+        },
+        selectMenu(item) {
+            // // 移出分类
+            let {id, cateId} = this.menuPosition;
+            this.$emit('removeSoftFromCate', {
+                cate: {id:cateId},
+                soft: {id}
+            });
+            this.closeMenu();
+        },
+        closeMenu() {
+            this.showMenu = false;
+            this.menuPosition.left=0;
+            this.menuPosition.top=0;
+        },
         closeEdit(index) {
             let oldName = this.cateList[index].name;
             let editName = this.editName.trim();
@@ -106,20 +181,6 @@ export default {
             }
             this.centerDialogVisible = true;
         },
-        add: function() {
-            this.list.push({ name: "Juan" });
-        },
-        replace: function() {
-            this.list = [{ name: "Edgard" }];
-        },
-        clone: function(el) {
-            return {
-                name: el.name + " cloned"
-            };
-        },
-        log: function(evt) {
-            window.console.log(evt);
-        } 
     }
 }
 </script>
@@ -144,12 +205,20 @@ export default {
     }
     .dragbox_cate {
         .dragbox_cate_name {
+            display: flex;
+            align-items: center;
             padding-left: 25px;
             font-size: 18px;
             font-weight: 500;
             color: #333333;
             cursor: text;
             user-select: none;
+            .dragbox_cate_edit {
+                cursor: pointer;
+                margin-left:6px;
+                width: 20px;
+                height: 20px;
+            }
         }
         .dragbox_cate_input /deep/.el-input__inner {
             padding-left: 25px;
@@ -159,6 +228,7 @@ export default {
             border: none;
             outline: none;
             background-color: inherit;
+            border: 1px solid #C6D3EA;
         }
         .dragbox_cate_list {
             display: flex;

src/renderer/components/DragBox/item.vue

 <template>
-  <div class="item_wrap" @click="tapApp">
+  <div class="item_wrap" @click="tapApp" data-type="right-menu" :data-id="detail.id">
     <img :src="src" alt="" class="item_img">
     <span class="item_name">{{name}}</span>
   </div>

src/renderer/components/RightMenu/index.vue

@@ -4,7 +4,7 @@
         <div v-for="(cItem, cIndex) in cates" :key="cIndex"
             @click="tapItem(cItem)"
             class="right-menu-item">
-            加入 {{cItem.name}}
+            <span v-if="showText">加入 </span>{{cItem.name}}
         </div>
     </div>
     <div v-if="visible" class="right-menu-mask" @click="closeMenu" data-type="closeMask"></div>
@@ -40,6 +40,10 @@ export default {
         visible: {
             type: Boolean,
             default: false,
+        },
+        showText: {
+            type: Boolean,
+            default: true,
         }
     },
     methods: {

src/renderer/views/manage/index.vue

 <template>
   <el-container class="manage_container">
-    <el-aside width="200px" class="manage_aside">
+    <el-aside class="manage_aside" :class="{'minwidth':!expand}">
       <div class="aside_top">
-        <!-- <div>开始</div> -->
-        <div class="aside_item" @click="openWin('system')">关于系统</div>
+        <div class="aside_item" @click="toggleExpand">
+          <img src="~@/assets//statr.png" alt="" class="icon_img">
+          <span v-if="expand">开始</span>
+          </div>
+        <!-- <div class="aside_item" @click="openWin('system')">关于系统</div>
         <div class="aside_item" @click="openWin('settingCenter')">设置中心</div>
         <div class="aside_item" @click="openWin('lockScreen')">锁屏</div>
         <div class="aside_item" @click="openWin('restart')">重启</div>
-        <div class="aside_item" @click="openWin('shutdown')">关机</div>
+        <div class="aside_item" @click="openWin('shutdown')">关机</div> -->
       </div>
       <div class="aside_bottom">
         <div class="aside_item" @click="changeTap('school')" :class="{ 'active': current === 'school' }">
           <img v-if="current === 'school'" src="~@/assets/xueshimao_a.png" alt="" class="icon_img">
           <img v-else src="~@/assets/xueshimao.png" alt="" class="icon_img">
-          学校应用</div>
+          <span v-if="expand">学校应用</span>
+        </div>
         <div class="aside_item" @click="changeTap('all')" :class="{ 'active': current === 'all' }">
           <img v-if="current === 'all'" src="~@/assets/alisis_a.png" alt="" class="icon_img">
           <img v-else src="~@/assets/alisis.png" alt="" class="icon_img">
-          全部应用</div>
+          <span v-if="expand">全部应用</span>
+        </div>
         <div class="aside_item" @click="changeTap('mine')" :class="{ 'active': current === 'mine' }">
           <img v-if="current === 'mine'" src="~@/assets/user_a.png" alt="" class="icon_img">
           <img v-else src="~@/assets/user.png" alt="" class="icon_img">
-          我的应用</div>
+          <span v-if="expand">我的应用</span>
+        </div>
       </div>
     </el-aside>
     <el-main class="manage_main">
@@ -34,7 +40,10 @@
           <div>
             <Appbox v-if="current === 'all'" :cateList="categoryList" :listObj="listObj" :listAll="appList" @softAddtoCate="softAddtoCate"></Appbox>
             <SchoolBox v-if="current === 'school'"></SchoolBox>
-            <DragBox ref="dragEl" v-if="current === 'mine'" :cateList="categoryList" @addCategory="addCategory" @changeName="changeName"></DragBox>
+            <DragBox ref="dragEl" v-if="current === 'mine'" :cateList="categoryList" 
+              @addCategory="addCategory" @changeName="changeName"
+              @removeSoftFromCate="removeSoftFromCate"
+            ></DragBox>
           </div>
       </el-scrollbar>
     </el-main>
@@ -70,6 +79,8 @@ export default {
         lastest:[],
       },
       categoryList:[],
+      minwidth:0,
+      expand:true,
     };
   },
   computed: {
@@ -109,6 +120,9 @@ export default {
 
   },
   methods: {
+    toggleExpand() {
+      this.expand = !this.expand;
+    },
     changeName({name,detail,index}) {
       // 修改分类名字
       this.ipcRenderer.send("changeNameOfCategory",{name,detail,index});
@@ -117,7 +131,12 @@ export default {
       // 添加分类
       this.ipcRenderer.send("addCategory",name);
     },
+    removeSoftFromCate(args) {
+      // 从分类移出某个软件
+      this.ipcRenderer.send("removeSoftFromCate",args)
+    },
     softAddtoCate(detail) {
+      // 软件添加到哪个分类
       let { cate, soft } = detail;
       console.log('软件添加到哪个分类', detail)
       this.ipcRenderer.send("changeCategory", {
@@ -156,7 +175,6 @@ export default {
       });
       this.ipcRenderer.on("change-category", (event, {detail,id}) => {
         console.log("修改分类 2", detail,id);
-        // this.categoryList = list;
         let curIndex = this.categoryList.findIndex(v => v.id == id);
         this.categoryList[curIndex] = detail;
         this.$message.success("加入成功");
@@ -176,6 +194,14 @@ export default {
         this.categoryList[curIndex].name = name;
         this.$message.success("修改成功");
       });
+
+      this.ipcRenderer.on("remove-soft", (event, {detail,id}) => {
+        console.log('移出成功', detail)
+        let curIndex = this.categoryList.findIndex(v => v.id == detail.id);
+        this.categoryList[curIndex] = detail;
+        this.$set(this.categoryList, curIndex, detail);
+        this.$message.success("移出成功");
+      });
     },
     changeTap(tabType) {
       if(this.current === tabType) return;
@@ -214,12 +240,17 @@ export default {
   }
   .manage_aside {
     padding: 24px 0;
-    width: 148px;
+    width: 148px !important;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     background-color: #DBE4F6;
     box-shadow: 2px 0px 4px 0px rgba(10,78,141,0.1);
+    transition: width 0.6s;
+    overflow-x: hidden;
+    &.minwidth {
+      width: 60px !important;
+    }
     .aside_item {
       cursor: pointer;
       display: flex;
@@ -234,6 +265,7 @@ export default {
       line-height: 19px;
       height: 48px;
       line-height: 48px;
+      word-break: keep-all;
       &.active,&:hover {
         color: #399DF9;
         background: rgba(57, 157, 249, 0.08);